👣 编写基础模块字典

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

@@ -1,9 +1,6 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    showFooter
-    :title="getTitle"
-    width="500px"
+  <BasicModal v-bind="$attrs"
+              width="720px"
               @register="registerModal"
               @ok="handleSubmit"
   >
@@ -11,45 +8,71 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import {ref, computed, unref} from 'vue';
-import {BasicForm, useForm} from '/@/components/Form/index';
-import {formSchema} from './dictdata.data';
-//import {set} from '/@/api/platform/system/controller/dictdata';
-import {BasicModal, useModalInner} from '/@/components/Modal';
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用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 './dictdata.data';
+  import { getDictData, addDictData, editDictData } from '/@/api/platform/system/controller/dictdata';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
 
-const emit = defineEmits(['success', 'register']);
-const isUpdate = ref(true);
-const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
+  /** 通用变量统一声明区域 */
+  const tag = ref<Nullable<string>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
-});
-
-const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
-  await resetFields();
-  setModalProps({confirmLoading: false});
-  isUpdate.value = !!data?.isUpdate;
-
-  if (unref(isUpdate)) {
-    await setFieldsValue({
-      ...data.record,
+    baseColProps: { span: 24 }
   });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+    // 处理清除脏数据
+    await resetFields();
+    await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
+    const dictDataId = 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 getDictData(dictDataId));
+        break;
     }
-});
-
-const getTitle = computed(() => (!unref(isUpdate) ? '新增字典项' : '编辑字典项'));
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
 
-async function handleSubmit() {
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
     try {
-    const values = await validate();
-    setModalProps({confirmLoading: true});
-    //await set(values);
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (unref(tag)) {
+        case 'add':
+          await addDictData(formData);
+          break;
+        case 'edit':
+          await editDictData(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
       closeModal();
       emit('success');
     } finally {
-    setModalProps({confirmLoading: false});
+      setModalProps({ confirmLoading: false });
+    }
   }
-}
-
-
 </script>

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

@@ -4,118 +4,168 @@
                fixedHeight
                contentClass="flex"
   >
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable"
+                @selection-change="handleSelectionChange"
+    >
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate">新增字典</a-button>
+        <a-button v-auth="['dictData_add']"
+                  type="primary"
+                  @click="handleAdd()"
+        >新增字典数据</a-button>
+        <a-button v-auth="['dictData_edit']"
+                  type="primary"
+                  :disabled="state.single"
+                  @click="handleEdit()"
+        >修改字典数据</a-button>
+        <a-button v-auth="['dictData_del']"
+                  type="primary"
+                  :disabled="state.multiple"
+                  @click="handleDel()"
+        >删除字典数据</a-button>
       </template>
       <template #action="{ record }">
-        <TableAction
-          :actions="[
+        <TableAction :actions="[
           {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
+            label: '编辑',
+            icon: 'fa6-regular:pen-to-square',
+            auth: ['dictData_edit'],
+            onClick: handleEdit.bind(null, record)
           },
           {
+            label: '删除',
             icon: 'ant-design:delete-outlined',
+            auth: ['dictData_del'],
             color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
-              },
-            },
-          ]"
+            onClick: handleDel.bind(null, record)
+          }]"
         />
       </template>
     </BasicTable>
-    <DictDataModal @register="registerModal" @success="handleSuccess"/>
+    <DictDataModal @register="registerModal" @success="handleRefreshTable"/>
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive } from 'vue';
-  // 引入基础组件
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
+  import {defineComponent, ref, reactive, toRaw} from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  // 插入数据内容
   import { columns, searchFormSchema } from './dictdata.data';
-  // 通过API接口获取日志
-  //import { list, remove } from '/@/api/platform/system/controller/dictdata';
+  import { listDictData, delDictData } from '/@/api/platform/system/controller/dictdata';
   import { useModal } from '/@/components/Modal';
-  import DictDataModal from './DictDataModal.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import DictDataModal from './DictDataModal.vue';
+
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    dictType: String;
+    single: boolean;
+    multiple: boolean;
+  }
 
   export default defineComponent({
+    name: 'DictDataManagement',
     components: { BasicTable, PageWrapper, DictDataModal, TableAction },
     setup() {
-      const { createMessage } = useMessage();
 
-      let dictType = ref<string>('');
-      let record = reactive({
+      /** 通用变量统一声明区域 */
+      const state = reactive<TableState>({
+        // 父表字典类型
         dictType: '',
-        parentId: 0,
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true
       });
-
+      const { createConfirm, createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
-      const [registerTable, { reload, setProps }] = useTable({
+      const [registerTable, { reload, setProps, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
         title: '>>字典项列表',
-        //api: list,
+        api: listDictData,
+        rowKey: 'id',
         columns,
         formConfig: {
           labelWidth: 120,
           schemas: searchFormSchema,
+          autoSubmitOnEnter: true
         },
+        rowSelection: { type: 'checkbox' },
         useSearchForm: true,
         showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
         actionColumn: {
-          width: 80,
+          width: 220,
           title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
-          fixed: undefined,
+          fixed: false
         },
-        immediate: false,
+        handleSearchInfoFn: () => clearSelectedRowKeys(),
+        immediate: false
       });
 
-      function filterByDictType(records: Recordable) {
-        setProps({ searchInfo: { dictType: records.type } });
-        record.dictType = records.type;
-        record.parentId = records.id;
+      /** 根据字典类型查找字典数据 */
+      function filterByDictType(dictType: string) {
+        setProps({ searchInfo: { dictType } });
+        state.dictType = dictType;
         reload();
       }
 
-      function handleCreate() {
-        openModal(true, {
-          record,
-          isUpdate: true,
-        });
+      /** 处理多选框选中数据 */
+      function handleSelectionChange(selection?: Recordable) {
+        const rowSelection = toRaw(selection?.keys) || [];
+        state.single = rowSelection.length != 1;
+        state.multiple = !rowSelection.length;
       }
-      function handleEdit(record: Recordable) {
-        openModal(true, {
-          record,
-          isUpdate: true,
-        });
+
+      /** 新增按钮操作,行内新增与工具栏局域新增通用 */
+      function handleAdd() {
+        openModal(true,{ _tag: 'add' });
       }
 
-      async function handleDelete(record: Recordable) {
-        //await remove({ id: record.id });
+      /** 编辑按钮操作,行内编辑 */
+      function handleEdit(record?: Recordable) {
+        record = record || { id: getSelectRowKeys() };
+        openModal(true, { _tag: 'edit', record });
+      }
+
+      /** 删除按钮操作,行内删除 */
+      async function handleDel(record?: Recordable) {
+        const ids = record?.id || getSelectRowKeys();
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: `是否确认删除字典数据编号为${ids}字典数据吗?`,
+          onOk: async () => {
+            await delDictData(ids);
             createMessage.success('删除成功!');
-        handleSuccess();
+            handleRefreshTable();
+          }
+        });
       }
 
-      function handleSuccess() {
+      /** 处理表格刷新 */
+      function handleRefreshTable() {
+        clearSelectedRowKeys();
         reload();
       }
+
       return {
+        state,
         registerTable,
         registerModal,
-        handleCreate,
+        handleAdd,
         handleEdit,
-        handleDelete,
-        handleSuccess,
+        handleDel,
+        handleRefreshTable,
         filterByDictType,
-        dictType
+        handleSelectionChange
       };
-    },
+    }
   });
 </script>

kicc-ui/src/views/system/dict/dict.data.ts

@@ -92,18 +92,21 @@ export const formSchema: FormSchema[] = [
     field: 'name',
     label: '字典名称',
     component: 'Input',
+    required: true,
     colProps:{ span: 12 }
   },
   {
     field: 'type',
     label: '字典类型',
     component: 'Input',
+    required: true,
     colProps:{ span: 12 }
   },
   {
     field: 'isSys',
     label: '系统内置',
     component: 'Select',
+    required: true,
     defaultValue: '0',
     componentProps: {
       options: [
@@ -117,6 +120,7 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'Select',
+    required: true,
     defaultValue: '0',
     componentProps: {
       options: [

kicc-ui/src/views/system/dict/dictdata.data.ts

@@ -1,82 +1,107 @@
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
+/**
+ * @program: kicc-ui
+ * @description: 字典数据模块动态渲染配置
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/5/8
+ */
 
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+/** 表格列配置 */
 export const columns: BasicColumn[] = [
   {
-        title: '字典ID',
-        dataIndex: 'id',
-        width: 100,
-    },
-    {
-        title: '字典类型',
-        dataIndex: 'dictType',
-        width: 100,
+    title: '字典数据类型',
+    dataIndex: 'dictType'
   },
   {
-        title: '字典标签',
-        dataIndex: 'label',
-        width: 130,
+    title: '字典数据标签',
+    dataIndex: 'label'
   },
   {
-        title: '字典键值',
-        dataIndex: 'value',
-        width: 90,
+    title: '字典数据键值',
+    dataIndex: 'value'
   },
   {
-        title: '字典排序',
-        dataIndex: 'sort',
-        width: 90,
+    title: '字典数据排序',
+    dataIndex: 'sort'
   }
-
 ];
 
-
+/** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'dataType',
-        label: '字典参数类型',
+    label: '字典类型',
     component: 'Input',
     componentProps: {
-            placeholder: '请输入字典参数类型',
+      placeholder: '请输入字典类型'
     },
-        colProps: {span: 16},
+    colProps: { span: 12 }
+  },
+  {
+    field: 'dataType',
+    label: '字典数据标签',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入字典数据标签'
+    },
+    colProps: { span: 12 }
   }
 ];
 
+/** 表单配置 */
 export const formSchema: FormSchema[] = [
   {
     field: 'id',
     label: 'ID',
     component: 'Input',
-        show: false,
+    show: false
   },
   {
     field: 'dictType',
     label: '字典类型',
     component: 'Input',
     required: true,
-        componentProps: {disabled: true}
+    componentProps: { disabled: true },
+    colProps:{ span: 12 }
   },
   {
     field: 'label',
     label: '字典标签',
     component: 'Input',
-        required: true
+    required: true,
+    colProps:{ span: 12 }
   },
   {
     field: 'value',
     label: '字典键值',
     component: 'Input',
-        required: true
+    required: true,
+    colProps:{ span: 12 }
   },
   {
     field: 'sort',
     label: '排序',
     component: 'InputNumber',
+    componentProps: {
+      style: { width:'100%' },
+      min: 0
+    },
+    required: true,
+    colProps: {
+      span: 12
+    }
   },
   {
     field: 'remark',
     label: '备注',
     component: 'InputTextArea',
+    componentProps: {
+      rows: 6
+    },
+    colProps: {
+      span: 24
+    }
   }
 ];