|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<CommonPage>
|
|
|
<template #action>
|
|
|
- <NButton type="primary" @click="handleAdd()">
|
|
|
+ <NButton type="primary" @click="handleModalAdd">
|
|
|
<i class="i-material-symbols:add mr-4 text-18" />
|
|
|
新增
|
|
|
</NButton>
|
|
|
@@ -14,24 +14,20 @@
|
|
|
</n-input>
|
|
|
</MeQueryItem>
|
|
|
<MeQueryItem label="状态" :label-width="50">
|
|
|
- <n-select
|
|
|
- v-model:value="queryItems.enable" clearable :options="[
|
|
|
- { label: '启用', value: 1 },
|
|
|
- { label: '停用', value: 0 },
|
|
|
- ]"
|
|
|
- />
|
|
|
+ <n-select v-model:value="queryItems.enable" clearable :options="[
|
|
|
+ { label: '启用', value: 1 },
|
|
|
+ { label: '停用', value: 0 },
|
|
|
+ ]" />
|
|
|
</MeQueryItem>
|
|
|
</MeCrud>
|
|
|
|
|
|
<MeModal ref="modalRef" width="520px">
|
|
|
<n-form ref="modalFormRef" label-placement="left" label-align="left" :label-width="80" :model="modalForm">
|
|
|
- <n-form-item
|
|
|
- label="分类名" path="title" :rule="{
|
|
|
- required: true,
|
|
|
- message: '请输入分类名',
|
|
|
- trigger: ['input', 'blur'],
|
|
|
- }"
|
|
|
- >
|
|
|
+ <n-form-item label="分类名" path="title" :rule="{
|
|
|
+ required: true,
|
|
|
+ message: '请输入分类名',
|
|
|
+ trigger: ['input', 'blur'],
|
|
|
+ }">
|
|
|
<n-input v-model:value="modalForm.title" />
|
|
|
</n-form-item>
|
|
|
<n-form-item label="上层分类" path="parentId">
|
|
|
@@ -44,23 +40,19 @@
|
|
|
<n-tabs v-if="modalForm.translations.length > 0" type="line" animated>
|
|
|
<template v-for="(lang, index) in langs" :key="lang">
|
|
|
<n-tab-pane :name="lang" :tab="langLabel[lang]" :index="index">
|
|
|
- <n-form-item
|
|
|
- label="名称" path="title" :rule="{
|
|
|
- required: true,
|
|
|
- message: '请输入名称',
|
|
|
- trigger: ['input', 'blur'],
|
|
|
- }"
|
|
|
- >
|
|
|
+ <n-form-item label="名称" path="title" :rule="{
|
|
|
+ required: true,
|
|
|
+ message: '请输入名称',
|
|
|
+ trigger: ['input', 'blur'],
|
|
|
+ }">
|
|
|
<n-input v-model:value="modalForm.translations[index].title" />
|
|
|
</n-form-item>
|
|
|
|
|
|
- <n-form-item
|
|
|
- label="备注" path="remark" :rule="{
|
|
|
- required: false,
|
|
|
- message: '请输入备注',
|
|
|
- trigger: ['input', 'blur'],
|
|
|
- }"
|
|
|
- >
|
|
|
+ <n-form-item label="备注" path="remark" :rule="{
|
|
|
+ required: false,
|
|
|
+ message: '请输入备注',
|
|
|
+ trigger: ['input', 'blur'],
|
|
|
+ }">
|
|
|
<n-input v-model:value="modalForm.translations[index].remark" type="textarea" />
|
|
|
</n-form-item>
|
|
|
</n-tab-pane>
|
|
|
@@ -214,6 +206,11 @@ async function handleFormEdit(data = {}) {
|
|
|
handleEdit(data)
|
|
|
}
|
|
|
|
|
|
+function handleModalAdd() {
|
|
|
+ modalForm.value.translations = initTranslations({}, ['title', 'remark']).translations
|
|
|
+ handleAdd()
|
|
|
+}
|
|
|
+
|
|
|
const allCategory = ref([])
|
|
|
api.getAll().then(({ data = [] }) => (allCategory.value = data.map(item => ({ label: item.title, value: item.id }))))
|
|
|
</script>
|
gemercheung
