fix: perfect dict menu

chansee97 · Jul 6, 2024 · 48054e0 · 48054e0
1 parent 6b40f45
commit 48054e0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 160 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nova-admin",
   "type": "module",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "private": true,
   "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
   "author": {

diff --git a/src/views/setting/dictionary/components/DictContentModal.vue b/src/views/setting/dictionary/components/DictContentModal.vue
diff --git a/src/views/setting/dictionary/components/DictModal.vue b/src/views/setting/dictionary/components/DictModal.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import type { FormRules } from 'naive-ui'
 import { useBoolean } from '@/hooks'
 
 interface Props {
   modalName?: string
+  dictCode?: string
+  isRoot?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modalName: '',
+  isRoot: false,
 })
 
 const emit = defineEmits<{
@@ -42,6 +46,11 @@ async function openModal(type: ModalType = 'add', data?: any) {
   const handlers = {
     async add() {
       formModel.value = { ...formDefault }
+
+      formModel.value.isRoot = props.isRoot ? 1 : 0
+      if (props.dictCode) {
+        formModel.value.code = props.dictCode
+      }
     },
     async view() {
       if (!data)
@@ -95,16 +104,22 @@ async function submitModal() {
   await handlers[modalType.value]() && closeModal()
 }
 
-const rules = {
+const rules: FormRules = {
   label: {
     required: true,
     message: '请输入字典名称',
-    trigger: 'blur',
+    trigger: ['input', 'blur'],
+  },
+  code: {
+    required: true,
+    message: '请输入字典码',
+    trigger: ['input', 'blur'],
   },
   value: {
     required: true,
     message: '请输入字典值',
-    trigger: 'blur',
+    type: 'number',
+    trigger: ['input', 'blur'],
   },
 }
 </script>
@@ -126,7 +141,10 @@ const rules = {
         <n-input v-model:value="formModel.label" />
       </n-form-item>
       <n-form-item label="字典码" path="code">
-        <n-input v-model:value="formModel.code" />
+        <n-input v-model:value="formModel.code" :disabled="!isRoot" />
+      </n-form-item>
+      <n-form-item v-if="!isRoot" label="字典值" path="value">
+        <n-input-number v-model:value="formModel.value" :min="0" />
       </n-form-item>
     </n-form>
     <template #action>

diff --git a/src/views/setting/dictionary/index.vue b/src/views/setting/dictionary/index.vue
@@ -2,16 +2,16 @@
 import type { DataTableColumns } from 'naive-ui'
 import { NButton, NFlex, NPopconfirm } from 'naive-ui'
 import DictModal from './components/DictModal.vue'
-import DictContentModal from './components/DictContentModal.vue'
 import { fetchDictList } from '@/service'
 import { useBoolean } from '@/hooks'
 import { useDictStore } from '@/store'
+import CopyText from '@/components/custom/CopyText.vue'
 
 const { bool: dictLoading, setTrue: startDictLoading, setFalse: endDictLoading } = useBoolean(false)
 const { bool: contentLoading, setTrue: startContentLoading, setFalse: endContentLoading } = useBoolean(false)
 
 const dictRef = ref<InstanceType<typeof DictModal>>()
-const dictContentRef = ref<InstanceType<typeof DictContentModal>>()
+const dictContentRef = ref<InstanceType<typeof DictModal>>()
 
 onMounted(() => {
   getDictList()
@@ -31,10 +31,11 @@ async function getDictList() {
   endDictLoading()
 }
 
-let lastDictCode: string
+const lastDictCode = ref('')
 async function getDictContent(code: string) {
   startContentLoading()
   dictContentData.value = await getDictByNet(code)
+  lastDictCode.value = code
   endContentLoading()
 }
 
@@ -46,6 +47,11 @@ const dictColumns: DataTableColumns<Entity.Dict> = [
   {
     title: '字典码',
     key: 'code',
+    render: (row) => {
+      return (
+        <CopyText value={row.code} />
+      )
+    },
   },
   {
     title: '操作',
@@ -167,7 +173,7 @@ function deleteDict(id: number) {
     <div class="flex-1">
       <n-card>
         <template #header>
-          <NButton type="primary" @click="dictContentRef!.openModal('add')">
+          <NButton type="primary" :disabled="!lastDictCode" @click="dictContentRef!.openModal('add')">
             <template #icon>
               <icon-park-outline-add-one />
             </template>
@@ -176,7 +182,7 @@ function deleteDict(id: number) {
         </template>
         <template #header-extra>
           <NFlex>
-            <NButton type="primary" secondary @click="getDictContent(lastDictCode)">
+            <NButton type="primary" :disabled="!lastDictCode" secondary @click="getDictContent(lastDictCode)">
               <template #icon>
                 <icon-park-outline-refresh />
               </template>
@@ -191,8 +197,8 @@ function deleteDict(id: number) {
       </n-card>
     </div>
 
-    <DictModal ref="dictRef" modal-name="字典项" />
-    <DictContentModal ref="dictContentRef" modal-name="字典值" :dict-code="lastDictCode" />
+    <DictModal ref="dictRef" modal-name="字典项" is-root />
+    <DictModal ref="dictContentRef" modal-name="字典值" :dict-code="lastDictCode" />
   </NFlex>
 </template>