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

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

@@ -53,3 +53,29 @@ export function fetchTreeDictionaryItem(dictionaryId: string) {
     }
   });
 }
+
+export function fetchDictionaryItemAdd(dictionaryOp: Api.Sys.Core.DictionaryItemOp) {
+  return request({
+    url: '/dictionaryItem/insert',
+    method: 'post',
+    data: dictionaryOp
+  });
+}
+
+export function fetchDictionaryItemEdit(dictionaryOp: Api.Sys.Core.DictionaryItemOp) {
+  return request({
+    url: '/dictionaryItem/update',
+    method: 'post',
+    data: dictionaryOp
+  });
+}
+
+export function fetchDictionaryItemDelete(id: string) {
+  return request({
+    url: '/dictionaryItem/delete',
+    method: 'post',
+    data: {
+      id
+    }
+  });
+}

src/typings/api/sys/core.d.ts

@@ -35,6 +35,14 @@ declare namespace Api {
         updateTime: string | null;
         children: DictionaryItem[];
       }
+      interface DictionaryItemOp {
+        id: string | null;
+        dictionaryId: string;
+        name: string;
+        code: string;
+        sort: number;
+        description: string | null;
+      }
     }
   }
 }

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

@@ -3,7 +3,14 @@ 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, fetchTreeDictionaryItem } from '@/service/api';
+import {
+  fetchDictionaryAdd,
+  fetchDictionaryEdit,
+  fetchDictionaryItemAdd,
+  fetchDictionaryItemDelete,
+  fetchDictionaryItemEdit,
+  fetchTreeDictionaryItem
+} from '@/service/api';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
 import DictionaryItem = Api.Sys.Core.DictionaryItem;
@@ -50,8 +57,32 @@ interface Model {
   children: Api.Sys.Core.DictionaryItem[];
 }
 
+interface ChildrenOperateModel {
+  id: string | null;
+  name: string;
+  code: string;
+  sort: number;
+  description: string | null;
+}
+
 const model = ref(createDefaultModel());
 
+const childrenOperateModel = ref(createDefaultModel2());
+
+const childrenModelVisible = ref(false);
+const childrenTitle = ref('');
+const childrenModelOperateType = ref('');
+
+function showChildrenModel(operateType: NaiveUI.TableOperateType, row: DictionaryItem | null = null) {
+  childrenModelOperateType.value = operateType;
+  childrenTitle.value = operateType === 'edit' ? $t('common.edit') : $t('common.add');
+  childrenModelVisible.value = true;
+  childrenOperateModel.value = createDefaultModel2();
+  if (row) {
+    Object.assign(childrenOperateModel.value, jsonClone(row));
+  }
+}
+
 const childrenColumns: DataTableColumns<DictionaryItem> = [
   {
     key: 'name',
@@ -76,14 +107,14 @@ const childrenColumns: DataTableColumns<DictionaryItem> = [
     title: $t('common.operate'),
     align: 'center',
     width: 80,
-    render: _ => {
+    render: (row, index) => {
       if (model.value.type === 'tree') {
         return (
           <div class="flex-center gap-8px">
             <NButton type="success" ghost size="small">
               {$t('common.children')}
             </NButton>
-            <NButton type="primary" ghost size="small">
+            <NButton type="primary" ghost size="small" onClick={() => showChildrenModel('edit', row)}>
               {$t('common.edit')}
             </NButton>
             <NButton type="error" ghost size="small">
@@ -94,12 +125,19 @@ const childrenColumns: DataTableColumns<DictionaryItem> = [
       }
       return (
         <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small">
+          <NButton type="primary" ghost size="small" onClick={() => showChildrenModel('edit', row)}>
             {$t('common.edit')}
           </NButton>
-          <NButton type="error" ghost size="small">
-            {$t('common.delete')}
-          </NButton>
+          <NPopconfirm onPositiveClick={() => handleChildrenDelete(row, index)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
         </div>
       );
     }
@@ -116,6 +154,16 @@ function createDefaultModel(): Model {
   };
 }
 
+function createDefaultModel2(): ChildrenOperateModel {
+  return {
+    id: null,
+    name: '',
+    code: '',
+    sort: 0,
+    description: null
+  };
+}
+
 type RuleKey = 'name' | 'code' | 'type';
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
@@ -143,6 +191,40 @@ function handleInitChildrenModel() {
   });
 }
 
+function handleChildrenSubmit() {
+  const apiParams: Api.Sys.Core.DictionaryItemOp = {
+    dictionaryId: props.rowData?.id || '',
+    ...childrenOperateModel.value
+  };
+  if (childrenModelOperateType.value === 'edit') {
+    // 编辑
+    fetchDictionaryItemEdit(apiParams).then(() => {
+      window.$message?.success($t('common.updateSuccess'));
+      childrenModelVisible.value = false;
+      handleInitChildrenModel();
+    });
+  } else {
+    // 新增
+    fetchDictionaryItemAdd(apiParams).then(() => {
+      window.$message?.success($t('common.updateSuccess'));
+      childrenModelVisible.value = false;
+      handleInitChildrenModel();
+    });
+  }
+}
+
+function handleChildrenDelete(row: DictionaryItem, index: number) {
+  if (row.id) {
+    // 执行删除
+    fetchDictionaryItemDelete(row.id).then(() => {
+      window.$message?.success($t('common.deleteSuccess'));
+      handleInitChildrenModel();
+    });
+  } else {
+    model.value.children = model.value.children.splice(index);
+  }
+}
+
 function closeDrawer() {
   visible.value = false;
 }
@@ -204,10 +286,49 @@ watch(visible, () => {
         <NCard v-if="props.operateType === 'edit'" :title="$t('page.sys.core.dictionary.item.title')">
           <template #header-extra>
             <NSpace>
-              <NButton type="primary">{{ $t('common.add') }}</NButton>
+              <NButton type="primary" @click="showChildrenModel('add')">
+                {{ $t('common.add') }}
+              </NButton>
             </NSpace>
           </template>
           <NDataTable :data="model.children" :columns="childrenColumns" :bordered="true" />
+          <NModal
+            v-model:show="childrenModelVisible"
+            preset="dialog"
+            :title="childrenTitle"
+            :positive-text="$t('common.confirm')"
+            :negative-text="$t('common.cancel')"
+            @positive-click="handleChildrenSubmit"
+            @negative-click="childrenModelVisible = false"
+          >
+            <NForm :model="childrenOperateModel">
+              <NFormItem :label="$t('page.sys.core.dictionary.item.fields.name')" path="name">
+                <NInput
+                  v-model:value="childrenOperateModel.name"
+                  :placeholder="$t('page.sys.core.dictionary.item.fields.name')"
+                />
+              </NFormItem>
+              <NFormItem :label="$t('page.sys.core.dictionary.item.fields.code')" path="code">
+                <NInput
+                  v-model:value="childrenOperateModel.code"
+                  :placeholder="$t('page.sys.core.dictionary.item.fields.code')"
+                />
+              </NFormItem>
+              <NFormItem :label="$t('page.sys.core.dictionary.item.fields.sort')" path="sort">
+                <NInputNumber
+                  v-model:value="childrenOperateModel.sort"
+                  :placeholder="$t('page.sys.core.dictionary.item.fields.sort')"
+                />
+              </NFormItem>
+              <NFormItem :label="$t('page.sys.core.dictionary.item.fields.description')" path="description">
+                <NInput
+                  v-model:value="childrenOperateModel.description"
+                  :placeholder="$t('page.sys.core.dictionary.item.fields.description')"
+                  type="textarea"
+                />
+              </NFormItem>
+            </NForm>
+          </NModal>
         </NCard>
       </NScrollbar>
       <template #footer>