106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<template>
|
|
<div class="default-main ba-table-box zi-hua-dict-page">
|
|
<el-alert type="info" :closable="false" show-icon>
|
|
{{ t('config.ziHuaDictionary.desc') }}
|
|
</el-alert>
|
|
|
|
<div class="toolbar">
|
|
<el-button v-if="canSave" type="primary" :loading="saving" :disabled="loading" @click="onSave">
|
|
{{ t('config.ziHuaDictionary.btn_save') }}
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table v-loading="loading" border stripe :data="items" row-key="no" max-height="640">
|
|
<el-table-column prop="no" :label="t('config.ziHuaDictionary.no')" width="72" align="center" />
|
|
<el-table-column :label="t('config.ziHuaDictionary.name')" min-width="120">
|
|
<template #default="{ row }">
|
|
<el-input v-model="row.name" maxlength="32" show-word-limit />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('config.ziHuaDictionary.category')" min-width="160">
|
|
<template #default="{ row }">
|
|
<el-select v-model="row.category" style="width: 100%">
|
|
<el-option v-for="c in categories" :key="c" :label="categoryLabel(c)" :value="c" />
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import createAxios from '/@/utils/axios'
|
|
import { auth } from '/@/utils/common'
|
|
|
|
defineOptions({
|
|
name: 'config/ziHuaDictionary',
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const canSave = auth('save')
|
|
|
|
type Item = { no: number; name: string; category: string }
|
|
|
|
const loading = ref(false)
|
|
const saving = ref(false)
|
|
const items = ref<Item[]>([])
|
|
const categories = ref<string[]>(['zodiac', 'beast', 'fowl', 'vermin', 'divine'])
|
|
|
|
function categoryLabel(cat: string): string {
|
|
return t('config.ziHuaDictionary.category_label.' + cat)
|
|
}
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const res = await createAxios({
|
|
url: '/admin/config.ZiHuaDictionary/index',
|
|
method: 'get',
|
|
})
|
|
if (res.code === 1 && res.data) {
|
|
const list = res.data.items as Item[]
|
|
items.value = Array.isArray(list) ? list : []
|
|
if (Array.isArray(res.data.categories) && res.data.categories.length) {
|
|
categories.value = res.data.categories as string[]
|
|
}
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function onSave() {
|
|
if (!auth('save')) {
|
|
return
|
|
}
|
|
saving.value = true
|
|
try {
|
|
await createAxios({
|
|
url: '/admin/config.ZiHuaDictionary/save',
|
|
method: 'post',
|
|
data: { items: items.value },
|
|
showSuccessMessage: true,
|
|
})
|
|
await load()
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void load()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.zi-hua-dict-page {
|
|
.toolbar {
|
|
margin: 12px 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|