feat-wip(components): 数据字典相关页面代码提交

.env.test

@@ -1,5 +1,5 @@
 # backend service base url, test environment
-VITE_SERVICE_BASE_URL=http://localhost:8080
+VITE_SERVICE_BASE_URL=http://192.168.1.7:8080
 
 # other backend service base url, test environment
 VITE_OTHER_SERVICE_BASE_URL=`{

src/locales/langs/en-us.ts

@@ -332,7 +332,13 @@ const local: App.I18n.Schema = {
             }
           },
           item: {
-            title: 'Item'
+            title: 'Item',
+            fields: {
+              name: 'Name',
+              code: 'Code',
+              sort: 'Sort',
+              description: 'Description'
+            }
           }
         }
       },

src/locales/langs/zh-cn.ts

@@ -328,7 +328,13 @@ const local: App.I18n.Schema = {
             }
           },
           item: {
-            title: '字典项'
+            title: '字典项',
+            fields: {
+              name: '名称',
+              code: '代码',
+              sort: '排序',
+              description: '描述'
+            }
           }
         }
       },

src/service/api/sys/core/dictionary.ts

@@ -43,3 +43,13 @@ export function fetchDictionaryDeleteBatch(ids: string[]) {
     }
   });
 }
+
+export function fetchTreeDictionaryItem(dictionaryId: string) {
+  return request<Api.Sys.Core.DictionaryItem[]>({
+    url: '/dictionaryItem/tree',
+    method: 'post',
+    data: {
+      dictionaryId
+    }
+  });
+}

src/typings/app.d.ts

@@ -575,6 +575,12 @@ declare namespace App {
               };
               item: {
                 title: string;
+                fields: {
+                  name: string;
+                  code: string;
+                  sort: string;
+                  description: string;
+                };
               };
             };
           };

src/typings/components.d.ts

@@ -63,6 +63,7 @@ declare module 'vue' {
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
+    NHr: typeof import('naive-ui')['NHr']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -154,6 +155,7 @@ declare global {
   const NFormItemGi: typeof import('naive-ui')['NFormItemGi']
   const NGi: typeof import('naive-ui')['NGi']
   const NGrid: typeof import('naive-ui')['NGrid']
+  const NHr: typeof import('naive-ui')['NHr']
   const NInput: typeof import('naive-ui')['NInput']
   const NInputGroup: typeof import('naive-ui')['NInputGroup']
   const NInputNumber: typeof import('naive-ui')['NInputNumber']

src/views/sys/core/dictionary/index.vue

@@ -82,9 +82,6 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
       align: 'center',
       render: row => (
         <div class="flex-center gap-8px">
-          <NButton type="success" ghost size="small" onClick={() => handleOpenChildren(row.id)}>
-            {$t('common.children')}
-          </NButton>
           <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
             {$t('common.edit')}
           </NButton>
@@ -122,8 +119,6 @@ function handleDelete(id: string) {
 function edit(id: string) {
   handleEdit(id);
 }
-
-function handleOpenChildren(_: string) {}
 </script>
 
 <template>

src/views/sys/core/dictionary/modules/dictionary-operate-dialog.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'DictionaryOperateDialog'
+});
+
+const props = defineProps<{
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  // rowData?: Api.Sys.Core.Dictionary | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submitted'): void;
+}>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: $t('common.add'),
+    edit: $t('common.edit')
+  };
+  return titles[props.operateType];
+});
+
+function closeDialog(): void {
+  visible.value = false;
+}
+
+function handleSubmit() {
+  window.$message?.success($t('common.updateSuccess'));
+  closeDialog();
+  emit('submitted');
+}
+</script>
+
+<template>
+  <NModal
+    v-model:show="visible"
+    preset="dialog"
+    :title="title"
+    @positive-click="handleSubmit"
+    @negative-click="visible = false"
+  >
+    <div class="dialog-wrapper">111</div>
+  </NModal>
+</template>
+
+<style scoped>
+.dialog-wrapper {
+  width: 1000px;
+}
+</style>

src/views/sys/core/dictionary/modules/dictionary-operate-drawer.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import type { DataTableColumns } from 'naive-ui';
 import { jsonClone } from '@sa/utils';
 import { dictionaryTypeOptions } from '@/constants/sys/core/dictionary';
-import { fetchDictionaryAdd, fetchDictionaryEdit } from '@/service/api';
+import { fetchDictionaryAdd, fetchDictionaryEdit, fetchTreeDictionaryItem } from '@/service/api';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
+import DictionaryItem = Api.Sys.Core.DictionaryItem;
 
 defineOptions({
   name: 'DictionaryOperateDrawer'
@@ -40,20 +42,48 @@ const title = computed(() => {
   return titles[props.operateType];
 });
 
-type Model = Pick<Api.Sys.Core.Dictionary, 'name' | 'code' | 'type' | 'description'>;
+interface Model {
+  name: string;
+  code: string;
+  type: Api.Sys.Core.DictionaryType;
+  description: string | null;
+  children: Api.Sys.Core.DictionaryItem[];
+}
 
 const model = ref(createDefaultModel());
 
+const childrenColumns: DataTableColumns<DictionaryItem> = [
+  {
+    key: 'name',
+    title: $t('page.sys.core.dictionary.item.fields.name'),
+    align: 'center',
+    resizable: true
+  },
+  {
+    key: 'code',
+    title: $t('page.sys.core.dictionary.item.fields.code'),
+    align: 'center',
+    resizable: true
+  },
+  {
+    key: 'sort',
+    title: $t('page.sys.core.dictionary.item.fields.sort'),
+    align: 'center',
+    resizable: true
+  }
+];
+
 function createDefaultModel(): Model {
   return {
     name: '',
     code: '',
     type: 'enum',
-    description: null
+    description: null,
+    children: []
   };
 }
 
-type RuleKey = Exclude<keyof Model, 'description'>;
+type RuleKey = 'name' | 'code' | 'type';
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   name: defaultRequiredRule,
@@ -69,6 +99,17 @@ function handleInitModel() {
   }
 }
 
+function handleInitChildrenModel() {
+  if (props.operateType !== 'edit' || !props.rowData?.id) {
+    return;
+  }
+  fetchTreeDictionaryItem(props.rowData.id).then(res => {
+    if (res.data) {
+      model.value.children = res.data ? res.data : [];
+    }
+  });
+}
+
 function closeDrawer() {
   visible.value = false;
 }
@@ -93,6 +134,7 @@ watch(visible, () => {
   if (visible.value) {
     handleInitModel();
     restoreValidation();
+    handleInitChildrenModel();
   }
 });
 </script>
@@ -100,6 +142,7 @@ watch(visible, () => {
 <template>
   <NDrawer v-model:show="visible" display-directive="show" :default-width="600" resizable>
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NScrollbar>
         <NForm ref="formRef" :model="model" :rules="rules">
           <NFormItem :label="$t('page.sys.core.dictionary.fields.name')" path="name">
             <NInput v-model:value="model.name" :placeholder="$t('page.sys.core.dictionary.fields.name')" />
@@ -125,6 +168,10 @@ watch(visible, () => {
             />
           </NFormItem>
         </NForm>
+        <NCard v-if="props.operateType === 'edit'" :title="$t('page.sys.core.dictionary.item.title')">
+          <NDataTable :data="model.children" :columns="childrenColumns" :bordered="true" />
+        </NCard>
+      </NScrollbar>
       <template #footer>
         <NSpace :size="16">
           <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>