👣 编写基础模块字典

kicc-ui/src/views/system/dict/DictModal.vue

@@ -1,7 +1,5 @@
 <template>
   <BasicModal v-bind="$attrs"
-              showFooter
-              :title="getTitle"
               width="720px"
               @register="registerModal"
               @ok="handleSubmit"
@@ -10,43 +8,67 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
+  import { ref, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './dict.data';
-  import { TreeItem } from '/@/components/Tree';
-  //import { set } from '/@/api/platform/system/controller/dict';
-  import {BasicModal, useModalInner} from '/@/components/Modal';
+  import { addDict, editDict, getDict } from '/@/api/platform/system/controller/dict';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
 
+  /** 通用变量统一声明区域 */
+  const tag = ref<Nullable<string>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-  const isUpdate = ref(true);
-  const treeData = ref<TreeItem[]>([]);
-
-  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
+    baseColProps: { span: 24 }
   });
-
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+    // 处理清除脏数据
     await resetFields();
-    setModalProps({ confirmLoading: false });
-
-    isUpdate.value = !!data?.isUpdate;
-
-    if (unref(isUpdate)) {
-      await setFieldsValue({
-        ...data.record,
-      });
+    await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
+    const dictId = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    // 采用tag标签区分操作
+    switch (unref(tag)) {
+      case 'add':
+        props.title = '新增字典';
+        break;
+      case 'edit':
+        props.title = '编辑字典';
+        await setFieldsValue(await getDict(dictId));
+        break;
     }
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
   });
 
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增字典' : '编辑字典'));
-
+  /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
-      const values = await validate();
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
-      //await set(values);
+      // 采用tag标签区分操作
+      switch (unref(tag)) {
+        case 'add':
+          await addDict(formData);
+          break;
+        case 'edit':
+          await editDict(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
       closeModal();
       emit('success');
     } finally {

kicc-ui/src/views/system/dict/index.vue

@@ -67,7 +67,6 @@
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
-    ids: string[];
     single: boolean;
     multiple: boolean;
   }
@@ -80,8 +79,6 @@
       /** 通用变量统一声明区域 */
       const dictSubRef = ref();
       const state = reactive<TableState>({
-        // 选中数组
-        ids: [],
         // 非单个禁用
         single: true,
         // 非多个禁用
@@ -89,7 +86,7 @@
       });
       const { createConfirm, createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
-      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+      const [registerTable, { reload, clearSelectedRowKeys, getSelectRows }] = useTable({
         title: '字典列表',
         api: listDict,
         rowKey: 'id',
@@ -117,7 +114,6 @@
       /** 处理多选框选中数据 */
       function handleSelectionChange(selection?: Recordable) {
         const rowSelection = toRaw(selection?.keys) || [];
-        state.ids = rowSelection;
         state.single = rowSelection.length != 1;
         state.multiple = !rowSelection.length;
       }
@@ -129,19 +125,19 @@
 
       /** 编辑按钮操作,行内编辑 */
       function handleEdit(record?: Recordable) {
-        record = record || { id: toRaw(state.ids) };
+        record = record || { id: getSelectRows().map(item => item.id) };
         openModal(true, { _tag: 'edit', record });
       }
 
       /** 删除按钮操作,行内删除 */
       async function handleDel(record?: Recordable) {
-        const ids = record?.id || toRaw(state.ids);
+        const types = record?.type || getSelectRows().map(item => item.type);
         createConfirm({
           iconType: 'warning',
           title: '警告',
-          content: `是否确认删除角色编号为${ids}角色吗?`,
+          content: `是否确认删除字典类型为${types}字典吗?`,
           onOk: async () => {
-            //await delRole(ids);
+            await delDict(types);
             createMessage.success('删除成功!');
             handleRefreshTable();
           }