fix: 添加字典页面

src/api/sys/sysDictApi.ts

@@ -5,6 +5,7 @@ enum Api {
   sysDictAdd = '/sys/dict/add',
   sysDictEdit = '/sys/dict/edit',
   sysDictQueryPage = '/sys/dict/query/page',
+  sysDictQueryTree = '/sys/dict/query/tree',
   sysDictRemove = '/sys/dict/deleteByIds',
   sysDictQueryList = '/sys/dict/query/list',
 }
@@ -30,6 +31,13 @@ export const sysDictEdit = (params?: object) => {
 export const sysDictQueryPage = (params?: object) => {
   return defHttp.post({ url: Api.sysDictQueryPage, params: setParams(params) });
 };
+/**
+ * @description: 查询字典树,权限 - sys:dict:list
+ * @method: POST
+ */
+export const sysDictQueryTree = (params?: object) => {
+  return defHttp.post({ url: Api.sysDictQueryTree, params: params });
+};
 
 /**
  * @description: 查询字典列表,权限 - sys:dict:list

src/views/sys/sysDict/sysDictTable/FormModal.vue → src/views/sys/sysDict/category/FormModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm" layout="vertical" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -14,8 +14,13 @@
 
   const emit = defineEmits(['success', 'register']);
 
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增字典' : '编辑字典'));
+  const getTitle = computed(() =>
+    !unref(isUpdate)
+      ? `新增${dictType.value ? '系统' : '业务'}字典`
+      : `编辑${dictType.value ? '系统' : '业务'}字典`,
+  );
   const isUpdate = ref(false);
+  const dictType = ref(1);
   const rowId = ref();
 
   const { createMessage } = useMessage();
@@ -31,9 +36,10 @@
     await resetFields();
     setModalProps({ confirmLoading: false });
     isUpdate.value = !!data?.isUpdate;
+    dictType.value = data?.dictType;
     rowId.value = data.record.id;
     const resData = data.record;
-    resData.disable = String(resData.disable);
+    resData.dictType = dictType.value;
     await setFieldsValue({
       ...resData,
     });
@@ -45,7 +51,7 @@
       const values = await validate();
       setModalProps({ confirmLoading: true });
       !unref(isUpdate)
-        ? await sysDictAdd({ ...values })
+        ? await sysDictAdd({ ...values, dictType: dictType.value })
         : await sysDictEdit({ ...values, id: rowId.value });
       !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
       closeModal();

src/views/sys/sysDict/sysDictTable/data.ts → src/views/sys/sysDict/category/data.ts

@@ -1,6 +1,5 @@
 import { BasicColumn, FormSchema } from '/@/components/Table';
-import { listDictModel } from '/@/api/common';
-import { validateStr } from '/@/utils/validate';
+import { sysDictQueryTree } from '/@/api/sys/sysDictApi';
 
 export const columns: BasicColumn[] = [
   {
@@ -16,8 +15,13 @@ export const columns: BasicColumn[] = [
     dataIndex: 'dictType',
   },
   {
-    title: '状态',
-    dataIndex: 'disable',
+    title: '颜色',
+    dataIndex: 'color',
+    width: 120,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
     width: 80,
   },
   {
@@ -43,21 +47,39 @@ export const searchFormSchema: FormSchema[] = [
       placeholder: '请输入字典编码',
     },
   },
+];
+
+export const dataFormSchema: FormSchema[] = [
   {
     field: 'dictType',
     label: '字典类型',
-    component: 'ApiSelect',
+    component: 'Input',
     componentProps: {
-      api: listDictModel,
-      params: {
-        dictCode: 'sys_dict_type',
-      },
+      placeholder: '请输入字典类型',
+    },
+    show: false,
+  },
+  {
+    field: 'parentId',
+    label: '上级字典',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请选择上级字典',
+        api: sysDictQueryTree,
+        // params root 是否手动添加根节点
+        params: { dictType: formModel.dictType, root: true },
+        resultField: 'data',
+        fieldNames: {
+          label: 'dictName',
+          key: 'id',
+          value: 'id',
+        },
+        getPopupContainer: () => document.body,
+      };
     },
-    defaultValue: '1',
   },
-];
-
-export const dataFormSchema: FormSchema[] = [
   {
     field: 'dictName',
     label: '字典名称',
@@ -83,9 +105,9 @@ export const dataFormSchema: FormSchema[] = [
             if (!value) {
               return Promise.reject('字典项编码不能为空');
             }
-            if (validateStr(value)) {
-              return Promise.reject('字典项编码为字母或数字组成');
-            }
+            // if (validateStr(value)) {
+            //   return Promise.reject('字典项编码为字母或数字组成');
+            // }
             return Promise.resolve();
           },
         },
@@ -93,29 +115,27 @@ export const dataFormSchema: FormSchema[] = [
     },
   },
   {
-    field: 'dictType',
-    label: '字典类型',
-    component: 'ApiSelect',
-    required: true,
-    componentProps: {
-      api: listDictModel,
-      params: {
-        dictCode: 'sys_dict_type',
-      },
+    field: 'color',
+    label: '颜色',
+    component: 'FormColorPicker',
+    componentProps: ({ formModel }) => {
+      return {
+        onChange: e => {
+          formModel.color = e;
+        },
+      };
     },
   },
   {
-    field: 'disable',
-    label: '状态',
-    component: 'ApiRadioGroup',
-    required: true,
+    field: 'sort',
+    label: '排序',
+    component: 'InputNumber',
+    defaultValue: 999,
     componentProps: {
-      api: listDictModel,
-      params: {
-        dictCode: 'sys_disable_type',
-      },
+      placeholder: '请输入排序',
+      min: 1,
+      style: { width: '100%' },
     },
-    defaultValue: '0',
   },
   {
     label: '备注',

src/views/sys/sysDict/category/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <a-row>
+    <a-col :span="5">
+      <a-tree
+        v-if="treeData.length > 0"
+        v-model:expandedKeys="defaultExpandedKeys"
+        :tree-data="treeData"
+        :field-names="treeFieldNames"
+        @select="treeSelect"
+      />
+      <a-empty v-else />
+    </a-col>
+    <a-col :span="19">
+      <BasicTable @register="registerTable" :showExpandColumn="false">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'dictType'">
+            <Tag :color="formatDictColor(sysDictTypeOptions, record.dictType)">
+              {{ formatDictValue(sysDictTypeOptions, record.dictType) }}
+            </Tag>
+          </template>
+          <template v-if="column.key === 'color'">
+            <Tag :color="record.color || '#000'">
+              {{ record.color }}
+            </Tag>
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  auth: ['sys:dict:edit'],
+                  icon: 'icon-edit|iconfont',
+                  tooltip: '编辑',
+                  onClick: handleEdit.bind(null, record),
+                },
+                {
+                  auth: ['sys:dict:remove'],
+                  icon: 'icon-delete|iconfont',
+                  tooltip: '删除',
+                  color: 'error',
+                  popConfirm: {
+                    title: '是否确认删除',
+                    placement: 'left',
+                    confirm: handleDelete.bind(null, record),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </template>
+        <template #toolbar>
+          <a-button
+            v-auth="['sys:dict:add']"
+            type="primary"
+            @click="handleCreate"
+            preIcon="icon-plus|iconfont"
+            >新增</a-button
+          >
+        </template>
+      </BasicTable>
+      <FormModal @register="registerModal" @success="handleSuccess" />
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang="ts">
+  import { computed, onBeforeMount, onMounted, ref } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import FormModal from './FormModal.vue';
+  import { columns, searchFormSchema } from './data';
+  import { sysDictQueryPage, sysDictQueryTree, sysDictRemove } from '/@/api/sys/sysDictApi';
+  import { formatDictColor, formatDictValue } from '/@/utils';
+  import { listDictModel } from '/@/api/common';
+
+  const sysDictTypeOptions = ref([]);
+  onBeforeMount(async () => {
+    const dictTypeStatus = await listDictModel({ dictCode: 'sys_dict_type' });
+    sysDictTypeOptions.value = dictTypeStatus || [];
+  });
+
+  onMounted(async () => {
+    await getTreeData();
+  });
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'DICT_SYS',
+    },
+  });
+  const getTableTitle = computed(() => {
+    if (parentId.value == '0') {
+      return props.type == 'DICT_SYS' ? '系统 字典列表' : '业务 字典列表';
+    } else {
+      return treeSelectNodeName.value + ' 字典列表';
+    }
+  });
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload }] = useTable({
+    title: getTableTitle,
+    api: sysDictQueryPage,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      baseColProps: { span: 8 },
+      resetButtonOptions: {
+        preIcon: 'icon-delete|iconfont',
+      },
+      submitButtonOptions: {
+        preIcon: 'icon-search|iconfont',
+      },
+    },
+    showIndexColumn: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    tableSetting: {
+      setting: false,
+    },
+    bordered: true,
+    actionColumn: {
+      auth: ['sys:dict:edit', 'sys:dict:remove'],
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    beforeFetch: handleBeforeFetch,
+  });
+
+  // 默认父节点
+  const parentId = ref('0');
+  // 默认展开的节点
+  const defaultExpandedKeys = ref(['0']);
+  const treeData = ref([]);
+  const treeSelectNodeName = ref('');
+  // 替换treeNode 中 title,key,children
+  const treeFieldNames = { children: 'children', title: 'dictName', key: 'id' };
+  // 获取 tree 所有节点信息
+  async function getTreeData() {
+    const data = await sysDictQueryTree({ dictType: props.type });
+    treeData.value = [
+      {
+        dictName: '根目录',
+        id: '0',
+        children: data,
+      },
+    ];
+  }
+
+  // 新增按钮事件
+  function handleCreate() {
+    openModal(true, {
+      dictType: props.type,
+      isUpdate: false,
+    });
+  }
+
+  // 编辑按钮事件
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      dictType: record.dictType || '1',
+      isUpdate: true,
+    });
+  }
+
+  // 删除按钮事件
+  async function handleDelete(record: Recordable) {
+    console.log(record);
+    await sysDictRemove([record.id]);
+    createMessage.success('删除成功！');
+    await reload();
+  }
+
+  // 弹窗回调事件
+  async function handleSuccess() {
+    await reload();
+  }
+
+  function handleBeforeFetch(params) {
+    return {
+      ...params,
+      dictType: props.type,
+      parentId: parentId.value,
+      orders: [{ field: 'sort', direction: 'ASC' }],
+    };
+  }
+
+  // tree选中事件
+  async function treeSelect(selectedKeys, { selectedNodes }) {
+    if (selectedKeys && selectedKeys.length > 0) {
+      parentId.value = selectedKeys[0];
+      treeSelectNodeName.value = selectedNodes[0]['dictName'];
+      await reload();
+    }
+  }
+</script>
+
+<style lang="less" scoped></style>

src/views/sys/sysDict/index.vue

@@ -1,24 +1,40 @@
 <template>
-  <PageWrapper dense contentFullHeight contentClass="flex">
-    <SysDictTable class="w-1/2" @dict-change="handleDictChange" />
-    <SysDictItemTable class="w-1/2" :dictId="dictId" />
+  <PageWrapper>
+    <a-card
+      :bordered="false"
+      :active-tab-key="activeKey"
+      :tab-list="tabList"
+      @tabChange="
+        key => {
+          activeKey = key;
+        }
+      "
+    >
+      <p v-for="item in tabList" :key="item.key">
+        <Category :type="item.type" v-if="activeKey == item.key" />
+      </p>
+    </a-card>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
-  import SysDictTable from './sysDictTable/index.vue';
-  import SysDictItemTable from './sysDictItemTable/index.vue';
-  // import { filterSub, getSub } from '/@/utils/websocket';
-
+  import Category from './category/index.vue';
+  import { listDictModel } from '/@/api/common';
   defineOptions({
     name: 'sysDict',
   });
-
-  const dictId = ref();
-  // 字典选中事件
-  function handleDictChange(value) {
-    if (!value) return;
-    dictId.value = value;
-  }
+  const activeKey = ref(null);
+  const tabList = ref([]);
+  onMounted(async () => {
+    const dictType = await listDictModel({ dictCode: 'sys_dict_type' });
+    tabList.value = dictType.map(ele => {
+      return {
+        key: ele.id,
+        tab: ele.label + '字典',
+        type: ele.value,
+      };
+    });
+    activeKey.value = dictType[1]['id'];
+  });
 </script>

src/views/sys/sysDict/sysDictItemTable/FormModal.vue

@@ -1,61 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { dataFormSchema } from './data';
-
-  import { sysDictItemAdd, sysDictItemEdit } from '/@/api/sys/sysDictItemApi';
-
-  const emit = defineEmits(['success', 'register']);
-
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增字典项' : '编辑字典项'));
-  const isUpdate = ref(false);
-  const rowId = ref();
-  const dictId = ref();
-
-  const { createMessage } = useMessage();
-  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
-    labelWidth: 100,
-    schemas: dataFormSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
-    await resetFields();
-    setModalProps({ confirmLoading: false });
-    isUpdate.value = !!data?.isUpdate;
-    dictId.value = data?.dictId;
-    rowId.value = data.record.id;
-    const resData = data.record;
-    await setFieldsValue({
-      ...resData,
-    });
-  });
-
-  // 提交按钮事件
-  async function handleSubmit() {
-    try {
-      const values = await validate();
-      setModalProps({ confirmLoading: true });
-      !unref(isUpdate)
-        ? await sysDictItemAdd({ ...values, id: rowId.value, dictId: dictId.value })
-        : await sysDictItemEdit({ ...values, id: rowId.value, dictId: dictId.value });
-      !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
-      closeModal();
-      emit('success', {
-        isUpdate: unref(isUpdate),
-        values: { ...values, id: rowId.value, dictId: dictId.value },
-      });
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  }
-</script>

src/views/sys/sysDict/sysDictItemTable/data.ts

@@ -1,115 +0,0 @@
-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { validateStr } from '/@/utils/validate';
-
-export const columns: BasicColumn[] = [
-  {
-    title: '字典项名称',
-    dataIndex: 'label',
-  },
-  {
-    title: '字典项编码',
-    dataIndex: 'value',
-    width: 120,
-  },
-  {
-    title: '颜色',
-    dataIndex: 'color',
-    width: 120,
-  },
-  {
-    title: '排序',
-    dataIndex: 'sort',
-    width: 80,
-  },
-  {
-    title: '备注',
-    dataIndex: 'remark',
-  },
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'dictItemName',
-    label: '字典项名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入字典项名称',
-    },
-  },
-  {
-    field: 'dictItemCode',
-    label: '字典项编码',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入字典项编码',
-    },
-  },
-];
-
-export const dataFormSchema: FormSchema[] = [
-  {
-    field: 'label',
-    label: '字典项名称',
-    component: 'Input',
-    required: true,
-    componentProps: {
-      placeholder: '请输入字典项名称',
-    },
-  },
-  {
-    field: 'value',
-    label: '字典项编码',
-    component: 'Input',
-    required: true,
-    componentProps: {
-      placeholder: '请输入字典项编码',
-    },
-    dynamicRules: () => {
-      return [
-        {
-          required: true,
-          validator: async (_, value) => {
-            if (!value) {
-              return Promise.reject('字典项编码不能为空');
-            }
-            if (validateStr(value)) {
-              return Promise.reject('字典项编码为字母或数字组成');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
-  },
-  {
-    field: 'color',
-    label: '颜色',
-    component: 'FormColorPicker',
-    componentProps: ({ formModel }) => {
-      return {
-        onChange: e => {
-          formModel.color = e;
-        },
-      };
-    },
-  },
-  {
-    field: 'sort',
-    label: '排序',
-    component: 'InputNumber',
-    required: true,
-    defaultValue: '1',
-    componentProps: {
-      placeholder: '请输入排序',
-      min: 1,
-    },
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'InputTextArea',
-    componentProps: {
-      placeholder: '请输入备注',
-    },
-  },
-];

src/views/sys/sysDict/sysDictItemTable/index.vue

@@ -1,163 +0,0 @@
-<template>
-  <div style="margin-top: 16px">
-    <BasicTable @register="registerTable">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'color'">
-          <Tag :color="record.color || '#000'">
-            {{ record.color }}
-          </Tag>
-        </template>
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                auth: ['sys:dictItem:edit'],
-                icon: 'icon-edit|iconfont',
-                tooltip: '编辑',
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                auth: ['sys:dictItem:remove'],
-                icon: 'icon-delete|iconfont',
-                tooltip: '删除',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  placement: 'left',
-                  confirm: handleDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </template>
-      <template #toolbar>
-        <a-button
-          v-auth="['sys:dictItem:add']"
-          v-show="!!dictId"
-          type="primary"
-          @click="handleCreate"
-          preIcon="icon-plus|iconfont"
-          >新增</a-button
-        >
-      </template>
-    </BasicTable>
-    <FormModal @register="registerModal" @success="handleSuccess" />
-  </div>
-</template>
-<script lang="ts" setup>
-  import { Tag } from 'ant-design-vue';
-  import { nextTick, onBeforeMount, ref, watch } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useModal } from '/@/components/Modal';
-  import FormModal from './FormModal.vue';
-  import { columns, searchFormSchema } from './data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  import { sysDictItemQueryList, sysDictItemRemove } from '/@/api/sys/sysDictItemApi';
-  import { listDictModel } from '/@/api/common';
-
-  const props = defineProps({
-    dictId: { type: String },
-  });
-
-  const sysStatusOptions = ref([]);
-  onBeforeMount(async () => {
-    sysStatusOptions.value = await listDictModel({ dictCode: 'sys_status' });
-  });
-
-  // const { createMessage, createConfirm } = useMessage();
-  const { createMessage } = useMessage();
-  const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload }] = useTable({
-    title: '字典项列表',
-    titleHelpMessage: '请先选中字典，再操作字典项',
-    api: sysDictItemQueryList,
-    rowKey: 'id',
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      autoSubmitOnEnter: true,
-      resetButtonOptions: {
-        preIcon: 'ant-design:delete-outlined',
-      },
-      submitButtonOptions: {
-        preIcon: 'ant-design:search-outlined',
-      },
-    },
-    immediate: false,
-    showIndexColumn: false,
-    useSearchForm: false,
-    showTableSetting: true,
-    bordered: true,
-    actionColumn: {
-      auth: ['sys:dictItem:edit', 'sys:dictItem:remove'],
-      width: 80,
-      title: '操作',
-      dataIndex: 'action',
-    },
-    beforeFetch: handleBeforeFetch,
-  });
-
-  // 新增按钮事件
-  function handleCreate() {
-    openModal(true, {
-      isUpdate: false,
-      dictId: props.dictId,
-    });
-  }
-
-  // 编辑按钮事件
-  function handleEdit(record: Recordable) {
-    console.log(record);
-    openModal(true, {
-      record,
-      isUpdate: true,
-      dictId: props.dictId,
-    });
-  }
-
-  // 删除按钮事件
-  async function handleDelete(record: Recordable) {
-    console.log('🚀 ~ file: index.vue:141 ~ handleDelete ~ record', record);
-    await sysDictItemRemove([record.id]);
-    createMessage.success('删除成功！');
-    await reload();
-  }
-
-  // 导出按钮事件
-  // async function handleExport() {
-  //   createConfirm({
-  //     iconType: 'warning',
-  //     title: '提示',
-  //     content: '确认导出？',
-  //     onOk: async () => {
-  //       const params = Object.assign({}, getForm().getFieldsValue(), { dictId: props.dictId });
-  //       const filepath = await exportList(params);
-  //       downloadFile(filepath);
-  //     },
-  //   });
-  // }
-
-  // 弹窗回调事件
-  function handleSuccess({ isUpdate, values }) {
-    console.log(isUpdate);
-    console.log(values);
-    reload();
-  }
-
-  // 表格请求之前，对参数进行处理
-  function handleBeforeFetch(params) {
-    return { ...params, dictId: props.dictId, orders: [{ field: 'sort', direction: 'ASC' }] };
-  }
-
-  watch(
-    () => props.dictId,
-    () => {
-      nextTick(() => {
-        reload();
-      });
-    },
-  );
-</script>

src/views/sys/sysDict/sysDictTable/index.vue

@@ -1,220 +0,0 @@
-<template>
-  <div>
-    <BasicTable
-      @register="registerTable"
-      @selection-change="handleSelectionChange"
-      @row-click="handleRowClick"
-      @row-dbClick="handleRowDbClick"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'disable'">
-          <Tag :color="formatDictColor(sysDisableType, record.disable)">
-            {{ formatDictValue(sysDisableType, record.disable) }}
-          </Tag>
-        </template>
-        <template v-if="column.key === 'dictType'">
-          <Tag :color="formatDictColor(sysDictTypeOptions, record.dictType)">
-            {{ formatDictValue(sysDictTypeOptions, record.dictType) }}
-          </Tag>
-        </template>
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                auth: ['sys:dict:edit'],
-                icon: 'icon-edit|iconfont',
-                tooltip: '编辑',
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                auth: ['sys:dict:remove'],
-                icon: 'icon-delete|iconfont',
-                tooltip: '删除',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </template>
-      <template #toolbar>
-        <a-button
-          v-auth="['sys:dict:add']"
-          type="primary"
-          @click="handleCreate"
-          preIcon="icon-plus|iconfont"
-          >新增</a-button
-        >
-      </template>
-    </BasicTable>
-    <FormModal @register="registerModal" @success="handleSuccess" />
-  </div>
-</template>
-<script lang="ts" setup>
-  import { onBeforeMount, ref } from 'vue';
-  import { Tag } from 'ant-design-vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useModal } from '/@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import FormModal from './FormModal.vue';
-  import { columns, searchFormSchema } from './data';
-  import { sysDictQueryPage, sysDictRemove } from '/@/api/sys/sysDictApi';
-  import { formatDictColor, formatDictValue } from '/@/utils';
-  import { listDictModel } from '/@/api/common';
-
-  const emit = defineEmits(['dict-change']);
-
-  const sysDictTypeOptions = ref([]);
-  const sysDisableType = ref();
-  onBeforeMount(async () => {
-    const dictTypeStatus = await listDictModel({ dictCode: 'sys_dict_type' });
-    sysDisableType.value = await listDictModel({ dictCode: 'sys_disable_type' });
-    sysDictTypeOptions.value = dictTypeStatus || [];
-  });
-
-  const { createMessage } = useMessage();
-  const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload, getDataSource, getSelectRowKeys, setSelectedRowKeys }] = useTable(
-    {
-      title: '字典列表',
-      api: sysDictQueryPage,
-      rowKey: 'id',
-      columns,
-      rowSelection: { type: 'radio' },
-      clickToRowSelect: true,
-      formConfig: {
-        labelWidth: 120,
-        schemas: searchFormSchema,
-        autoSubmitOnEnter: true,
-        baseColProps: { span: 12 },
-        resetButtonOptions: {
-          preIcon: 'icon-delete|iconfont',
-        },
-        submitButtonOptions: {
-          preIcon: 'icon-search|iconfont',
-        },
-      },
-      showIndexColumn: false,
-      useSearchForm: true,
-      showTableSetting: true,
-      bordered: true,
-      actionColumn: {
-        auth: ['sys:dict:edit', 'sys:dict:remove'],
-        width: 80,
-        title: '操作',
-        dataIndex: 'action',
-      },
-      afterFetch: handleAfterFetch,
-    },
-  );
-
-  // 新增按钮事件
-  function handleCreate() {
-    openModal(true, {
-      isUpdate: false,
-    });
-  }
-
-  // 编辑按钮事件
-  function handleEdit(record: Recordable) {
-    console.log(record);
-    openModal(true, {
-      record,
-      isUpdate: true,
-    });
-  }
-
-  // 删除按钮事件
-  async function handleDelete(record: Recordable) {
-    console.log(record);
-    await sysDictRemove([record.id]);
-    createMessage.success('删除成功！');
-    await reload();
-    // after delete, select first row
-    const list = getDataSource();
-    if (list.length > 0) {
-      setSelectedRowKeys([list[0].id]);
-    } else {
-      setSelectedRowKeys([]);
-    }
-    console.log('handleDelete');
-    emitDictChange();
-  }
-
-  // 导出按钮事件
-  // async function handleExport() {
-  //   createConfirm({
-  //     iconType: 'warning',
-  //     title: '提示',
-  //     content: '确认导出？',
-  //     onOk: async () => {
-  //       const params = getForm().getFieldsValue();
-  //       const filepath = await exportList(params);
-  //       downloadFile(filepath);
-  //     },
-  //   });
-  // }
-
-  // 弹窗回调事件
-  async function handleSuccess({ isUpdate, values }) {
-    console.log(isUpdate);
-    console.log(values);
-    await reload();
-    if (isUpdate) {
-      // after update, select updated row
-      setSelectedRowKeys([values.id]);
-    } else {
-      // after create, select first row
-      const list = getDataSource();
-      if (list.length > 0) {
-        setSelectedRowKeys([list[0].id]);
-      } else {
-        setSelectedRowKeys([]);
-      }
-    }
-    console.log('handleSuccess', isUpdate ? 'update' : 'create');
-    emitDictChange();
-  }
-
-  // 表格请求之后，对返回值进行处理
-  function handleAfterFetch(data) {
-    // after fetch, select first row
-    if (data.length > 0) {
-      setSelectedRowKeys([data[0].id]);
-    } else {
-      setSelectedRowKeys([]);
-    }
-    console.log('handleAfterFetch', data);
-    emitDictChange();
-  }
-
-  // 表格行点击事件
-  function handleRowClick(record: Recordable) {
-    console.log('handleRowClick', record);
-    setSelectedRowKeys([record.id]);
-    emitDictChange();
-  }
-
-  // 表格行双击事件
-  function handleRowDbClick(record: Recordable) {
-    console.log('handleRowDbClick', record);
-    setSelectedRowKeys([record.id]);
-    emitDictChange();
-  }
-
-  // 表格行选中事件
-  function handleSelectionChange({ keys, rows }) {
-    console.log('handleSelectionChange', keys, rows);
-    emitDictChange();
-  }
-
-  // 字典变化事件
-  function emitDictChange() {
-    const selectedKeys = getSelectRowKeys();
-    console.log(selectedKeys);
-    emit('dict-change', selectedKeys.length > 0 ? selectedKeys[0] : '');
-  }
-</script>