From ccf2565e1dcd2532a9d60370eb19e338210994e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E6=B0=B8=E6=98=A5?= <JSpringYC@gmail.com>
Date: Thu, 4 Dec 2025 23:16:29 +0800
Subject: [PATCH] =?UTF-8?q?feat-wip(components):=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.test                                     |   2 +-
 src/locales/langs/en-us.ts                    |   8 +-
 src/locales/langs/zh-cn.ts                    |   8 +-
 src/service/api/sys/core/dictionary.ts        |  10 ++
 src/typings/app.d.ts                          |   6 +
 src/typings/components.d.ts                   |   2 +
 src/views/sys/core/dictionary/index.vue       |   5 -
 .../modules/dictionary-operate-dialog.vue     |  59 ++++++++++
 .../modules/dictionary-operate-drawer.vue     | 103 +++++++++++++-----
 9 files changed, 167 insertions(+), 36 deletions(-)
 create mode 100644 src/views/sys/core/dictionary/modules/dictionary-operate-dialog.vue

diff --git a/.env.test b/.env.test
index b0347e13..5962ca66 100644
--- a/.env.test
+++ b/.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=`{
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index c66b1dd8..33a8c83d 100644
--- a/src/locales/langs/en-us.ts
+++ b/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'
+            }
           }
         }
       },
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 0be2af72..603fcea2 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -328,7 +328,13 @@ const local: App.I18n.Schema = {
             }
           },
           item: {
-            title: '字典项'
+            title: '字典项',
+            fields: {
+              name: '名称',
+              code: '代码',
+              sort: '排序',
+              description: '描述'
+            }
           }
         }
       },
diff --git a/src/service/api/sys/core/dictionary.ts b/src/service/api/sys/core/dictionary.ts
index 7b75ef84..63d463a2 100644
--- a/src/service/api/sys/core/dictionary.ts
+++ b/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
+    }
+  });
+}
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 509219da..3cdee59e 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -575,6 +575,12 @@ declare namespace App {
               };
               item: {
                 title: string;
+                fields: {
+                  name: string;
+                  code: string;
+                  sort: string;
+                  description: string;
+                };
               };
             };
           };
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index fbf95912..12e7abd0 100644
--- a/src/typings/components.d.ts
+++ b/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']
diff --git a/src/views/sys/core/dictionary/index.vue b/src/views/sys/core/dictionary/index.vue
index 7f54f348..f0726cd5 100644
--- a/src/views/sys/core/dictionary/index.vue
+++ b/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>
diff --git a/src/views/sys/core/dictionary/modules/dictionary-operate-dialog.vue b/src/views/sys/core/dictionary/modules/dictionary-operate-dialog.vue
new file mode 100644
index 00000000..2013866d
--- /dev/null
+++ b/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>
diff --git a/src/views/sys/core/dictionary/modules/dictionary-operate-drawer.vue b/src/views/sys/core/dictionary/modules/dictionary-operate-drawer.vue
index 04d4d92d..22a9789b 100644
--- a/src/views/sys/core/dictionary/modules/dictionary-operate-drawer.vue
+++ b/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,31 +142,36 @@ watch(visible, () => {
 <template>
   <NDrawer v-model:show="visible" display-directive="show" :default-width="600" resizable>
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <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')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.sys.core.dictionary.fields.code')" path="code">
-          <NInput v-model:value="model.code" :placeholder="$t('page.sys.core.dictionary.fields.code')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.sys.core.dictionary.fields.type')" path="type">
-          <NRadioGroup v-model:value="model.type">
-            <NRadio
-              v-for="item in dictionaryTypeOptions"
-              :key="item.value"
-              :value="item.value"
-              :label="$t(item.label)"
+      <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')" />
+          </NFormItem>
+          <NFormItem :label="$t('page.sys.core.dictionary.fields.code')" path="code">
+            <NInput v-model:value="model.code" :placeholder="$t('page.sys.core.dictionary.fields.code')" />
+          </NFormItem>
+          <NFormItem :label="$t('page.sys.core.dictionary.fields.type')" path="type">
+            <NRadioGroup v-model:value="model.type">
+              <NRadio
+                v-for="item in dictionaryTypeOptions"
+                :key="item.value"
+                :value="item.value"
+                :label="$t(item.label)"
+              />
+            </NRadioGroup>
+          </NFormItem>
+          <NFormItem :label="$t('page.sys.core.dictionary.fields.description')" path="description">
+            <NInput
+              v-model:value="model.description"
+              :placeholder="$t('page.sys.core.dictionary.fields.description')"
+              type="textarea"
             />
-          </NRadioGroup>
-        </NFormItem>
-        <NFormItem :label="$t('page.sys.core.dictionary.fields.description')" path="description">
-          <NInput
-            v-model:value="model.description"
-            :placeholder="$t('page.sys.core.dictionary.fields.description')"
-            type="textarea"
-          />
-        </NFormItem>
-      </NForm>
+          </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>