feat:menu

src/views/educational/whiteList/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive } from 'vue';
+  import { h, reactive } from 'vue';
   import { getDataOption } from '/@/api/system/dic';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
@@ -95,6 +95,35 @@
         align: 'left',
         width: 100,
       },
+      {
+        title: '状态',
+        dataIndex: 'isTemporary',
+        align: 'left',
+        width: 80,
+        customRender: ({ record }) => {
+          const isTemporary = record.isTemporary === 0;
+          const text = isTemporary ? '永久' : '临时';
+          const color = isTemporary ? 'success' : 'error';
+          return h(
+            'span',
+            {
+              style: {
+                color: `var(--${color}-color)`,
+              },
+            },
+            text,
+          );
+        },
+      },
+      {
+        title: '有效日期',
+        dataIndex: 'endTime',
+        align: 'left',
+        width: 100,
+        customRender: ({ record }) => {
+          return record.isTemporary === 0 ? '' : record.endTime;
+        },
+      },
     ],
     formConfig: {
       labelWidth: 120,

src/views/system/dictionary/index.vue

@@ -74,8 +74,8 @@
     <DicDetailDrawer @register="registerDetailDrawer" @success="handleDetailSuccess" />
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
 
   import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
   import {
@@ -94,7 +94,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import { listToTree } from '/@/utils/helper/treeHelper';
   const { t } = useI18n();
-  export const searchFormSchemaItem: FormSchema[] = [
+  const searchFormSchemaItem: FormSchema[] = [
     {
       field: 'name',
       label: t('项目名'),
@@ -109,7 +109,7 @@
     },
   ];
 
-  export const itemColumns: BasicColumn[] = [
+  const itemColumns: BasicColumn[] = [
     {
       title: t('项目名'),
       dataIndex: 'name',
@@ -129,7 +129,7 @@
     },
   ];
 
-  export const searchFormSchemaDetail: FormSchema[] = [
+  const searchFormSchemaDetail: FormSchema[] = [
     {
       field: 'name',
       label: t('字典名'),
@@ -144,7 +144,7 @@
     },
   ];
 
-  export const detailColumns: BasicColumn[] = [
+  const detailColumns: BasicColumn[] = [
     {
       title: t('字典名'),
       dataIndex: 'name',
@@ -170,170 +170,147 @@
     },
   ];
 
-  export default defineComponent({
-    name: 'DicManagement',
-    components: { BasicTable, PageWrapper, TableAction, DicItemDrawer, DicDetailDrawer },
-    setup() {
-      const { notification } = useMessage();
+  const { notification } = useMessage();
 
-      const selectItemId = ref('');
+  const selectItemId = ref('');
 
-      const [registerItemDrawer, { openDrawer: openItemDrawer }] = useDrawer();
-      const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();
+  const [registerItemDrawer, { openDrawer: openItemDrawer }] = useDrawer();
+  const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();
 
-      const [registerTableItem, { reload: itemReload }] = useTable({
-        title: t('数据字典项'),
-        api: getDicItemPageList,
-        rowKey: 'id',
-        columns: itemColumns,
-        formConfig: {
-          rowProps: {
-            gutter: 16,
-          },
-          schemas: searchFormSchemaItem,
-        },
-        rowSelection: {
-          type: 'radio',
-          onChange: onSelectChange,
-        },
-        useSearchForm: true,
-        showTableSetting: true,
-        striped: false,
-        actionColumn: {
-          width: 80,
-          title: t('操作'),
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-        },
-      });
-      const [registerTableDetail, { reload: detailReload }] = useTable({
-        title: t('数据字典详情'),
-        api: async (params) => {
-          if (!selectItemId.value) return Promise.resolve([]);
-          const data = await getDataItemTree(params);
-          const newTree = listToTree(data, {
-            id: 'id',
-            pid: 'pId',
-            children: 'children',
-          });
-
-          return newTree;
-        },
-        rowKey: 'id',
-        showIndexColumn: false,
-        pagination: false,
-        columns: detailColumns,
-        formConfig: {
-          rowProps: {
-            gutter: 16,
-          },
-          schemas: searchFormSchemaDetail,
-        },
-        beforeFetch: (params) => {
-          //发送请求默认新增  左边树结构所选机构id
-          return { ...params, itemId: selectItemId.value };
-        },
-        useSearchForm: true,
-        showTableSetting: true,
-        striped: false,
-        actionColumn: {
-          width: 120,
-          title: t('操作'),
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-        },
+  const [registerTableItem, { reload: itemReload }] = useTable({
+    title: t('数据字典项'),
+    api: getDicItemPageList,
+    rowKey: 'id',
+    columns: itemColumns,
+    formConfig: {
+      rowProps: {
+        gutter: 16,
+      },
+      schemas: searchFormSchemaItem,
+    },
+    rowSelection: {
+      type: 'radio',
+      onChange: onSelectChange,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    striped: false,
+    actionColumn: {
+      width: 80,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
+  const [registerTableDetail, { reload: detailReload }] = useTable({
+    title: t('数据字典详情'),
+    api: async (params) => {
+      if (!selectItemId.value) return Promise.resolve([]);
+      const data = await getDataItemTree(params);
+      const newTree = listToTree(data, {
+        id: 'id',
+        pid: 'pId',
+        children: 'children',
       });
 
-      function handleRowClick(record: any) {
-        selectItemId.value = record.id;
-        detailReload();
-      }
-      function onSelectChange(rowKey: string[]) {
-        selectItemId.value = rowKey[0];
-        detailReload();
-      }
-      function handleItemCreate() {
-        openItemDrawer(true, {
-          isUpdate: false,
-        });
-      }
+      return newTree;
+    },
+    rowKey: 'id',
+    showIndexColumn: false,
+    pagination: false,
+    columns: detailColumns,
+    formConfig: {
+      rowProps: {
+        gutter: 16,
+      },
+      schemas: searchFormSchemaDetail,
+    },
+    beforeFetch: (params) => {
+      //发送请求默认新增  左边树结构所选机构id
+      return { ...params, itemId: selectItemId.value };
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    striped: false,
+    actionColumn: {
+      width: 120,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
 
-      function handleDetailCreate(record) {
-        console.log(record);
-        if (!selectItemId.value) {
-          notification.warning({
-            message: t('提示'),
-            description: t('没有选择任意一行字典项！'),
-          });
-          return;
-        }
+  function handleRowClick(record: any) {
+    selectItemId.value = record.id;
+    detailReload();
+  }
+  function onSelectChange(rowKey: string[]) {
+    selectItemId.value = rowKey[0];
+    detailReload();
+  }
+  function handleItemCreate() {
+    openItemDrawer(true, {
+      isUpdate: false,
+    });
+  }
 
-        openDetailDrawer(true, {
-          itemId: selectItemId.value,
-          pId: record ? record.id : null,
-          isUpdate: false,
-        });
-      }
+  function handleDetailCreate(record) {
+    console.log(record);
+    if (!selectItemId.value) {
+      notification.warning({
+        message: t('提示'),
+        description: t('没有选择任意一行字典项！'),
+      });
+      return;
+    }
 
-      function handleItemEdit(record: Recordable) {
-        console.log(record);
-        openItemDrawer(true, {
-          record,
-          isUpdate: true,
-        });
-      }
-      function handleDetailEdit(record: Recordable) {
-        console.log(record);
-        openDetailDrawer(true, {
-          record,
-          isUpdate: true,
-        });
-      }
+    openDetailDrawer(true, {
+      itemId: selectItemId.value,
+      pId: record ? record.id : null,
+      isUpdate: false,
+    });
+  }
 
-      function handleItemDelete(record: Recordable) {
-        deleteDicItem([record.id]).then((_) => {
-          itemReload();
-          notification.success({
-            message: t('提示'),
-            description: t('删除成功'),
-          }); //提示消息
-        });
-      }
+  function handleItemEdit(record: Recordable) {
+    console.log(record);
+    openItemDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function handleDetailEdit(record: Recordable) {
+    console.log(record);
+    openDetailDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
 
-      function handleDetailDelete(record: Recordable) {
-        deleteDicDetail([record.id]).then((_) => {
-          detailReload();
-          notification.success({
-            message: t('提示'),
-            description: t('删除成功'),
-          }); //提示消息
-        });
-      }
+  function handleItemDelete(record: Recordable) {
+    deleteDicItem([record.id]).then((_) => {
+      itemReload();
+      notification.success({
+        message: t('提示'),
+        description: t('删除成功'),
+      }); //提示消息
+    });
+  }
 
-      function handleItemSuccess() {
-        itemReload();
-      }
+  function handleDetailDelete(record: Recordable) {
+    deleteDicDetail([record.id]).then((_) => {
+      detailReload();
+      notification.success({
+        message: t('提示'),
+        description: t('删除成功'),
+      }); //提示消息
+    });
+  }
 
-      function handleDetailSuccess() {
-        detailReload();
-      }
+  function handleItemSuccess() {
+    itemReload();
+  }
 
-      return {
-        registerTableItem,
-        registerTableDetail,
-        registerItemDrawer,
-        registerDetailDrawer,
-        handleItemCreate,
-        handleItemEdit,
-        handleItemDelete,
-        handleDetailCreate,
-        handleDetailEdit,
-        handleDetailDelete,
-        handleItemSuccess,
-        handleDetailSuccess,
-        handleRowClick,
-        t,
-      };
-    },
-  });
+  function handleDetailSuccess() {
+    detailReload();
+  }
 </script>

src/views/system/menu/components/MenuDrawer.vue

@@ -46,8 +46,8 @@
     </a-tabs>
   </BasicDrawer>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicColumn } from '/@/components/Table';
@@ -77,7 +77,7 @@
   const componentType = ref<number>(0);
   const hasMetaFormId = ref(false);
   const systemType = ref('');
-  export const formSchema: FormSchema[] = [
+  const formSchema: FormSchema[] = [
     {
       field: 'title',
       label: t('菜单名称'),
@@ -279,7 +279,7 @@
     },
   ];
 
-  export const columns: BasicColumn[] = [
+  const columns: BasicColumn[] = [
     {
       title: t('按钮名称'),
       dataIndex: 'name',
@@ -308,218 +308,184 @@
       },
     },
   ];
+  const emit = defineEmits(['success', 'register']);
 
-  export default defineComponent({
-    name: 'MenuDrawer',
-    components: {
-      Upload,
-      BasicDrawer,
-      BasicForm,
-      FormTable,
+  const permissionStore = usePermissionStore();
+  const { notification } = useMessage();
+  const rowId = ref('');
+  const activeKey = ref('1');
+  const buttonTable = ref();
+  const columnTable = ref();
+  const formTable = ref();
+  const buttonDatas = ref<MenuButtonModel[]>([]);
+  const columnDatas = ref<MenuButtonModel[]>([]);
+  const formDatas = ref<MenuButtonModel[]>([]);
+  const systemId = ref('1');
 
-      ButtonTable,
-      ColumnTable,
-    },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const permissionStore = usePermissionStore();
-      const { notification } = useMessage();
-      const rowId = ref('');
-      const activeKey = ref('1');
-      const buttonTable = ref();
-      const columnTable = ref();
-      const formTable = ref();
-      const buttonDatas = ref<MenuButtonModel[]>([]);
-      const columnDatas = ref<MenuButtonModel[]>([]);
-      const formDatas = ref<MenuButtonModel[]>([]);
-      const systemId = ref('1');
-
-      const folderId = ref('');
+  const folderId = ref('');
 
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
-        labelWidth: 100,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-        baseColProps: { lg: 12, md: 24 },
-      });
-      //     {
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 12, md: 24 },
+  });
+  //     {
 
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        await resetFields();
-        systemType.value = data.systemType;
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-        if (isUpdate.value) {
-          rowId.value = data.record.id;
-          folderId.value = data.record.iconUrl || '0';
-          if (data.record && data.record.meta && data.record.meta.formId) {
-            hasMetaFormId.value = true;
-          }
-          componentType.value = data.record.componentType;
-          if (data.record.outLink == 1) {
-            data.record.url = data.record.component;
-          }
-          if (data.record.parentId) {
-            data.record.systemId = null;
-          }
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    systemType.value = data.systemType;
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (isUpdate.value) {
+      rowId.value = data.record.id;
+      folderId.value = data.record.iconUrl || '0';
+      if (data.record && data.record.meta && data.record.meta.formId) {
+        hasMetaFormId.value = true;
+      }
+      componentType.value = data.record.componentType;
+      if (data.record.outLink == 1) {
+        data.record.url = data.record.component;
+      }
+      if (data.record.parentId) {
+        data.record.systemId = null;
+      }
 
-          if (data.record.deptId) {
-            data.record['orgIds'] = data.record.deptId.split(',');
-          }
+      if (data.record.deptId) {
+        data.record['orgIds'] = data.record.deptId.split(',');
+      }
 
-          setFieldsValue({
-            ...data.record,
-          });
-          getMenuButtonById({ id: data.record.id }).then((res) => {
-            buttonDatas.value = res;
-          });
-          getMenuColumnById({ menuId: data.record.id }).then((res) => {
-            columnDatas.value = res;
-          });
-          getMenuFormById({ menuId: data.record.id }).then((res) => {
-            formDatas.value = res;
-          });
-        } else {
-          rowId.value = '';
-          componentType.value = 0;
-          setFieldsValue({
-            menuType: 1,
-            enabledMark: 1,
-            outLink: 0,
-            display: 1,
-            componentType: 0,
-            systemId: '1',
-          });
+      setFieldsValue({
+        ...data.record,
+      });
+      getMenuButtonById({ id: data.record.id }).then((res) => {
+        buttonDatas.value = res;
+      });
+      getMenuColumnById({ menuId: data.record.id }).then((res) => {
+        columnDatas.value = res;
+      });
+      getMenuFormById({ menuId: data.record.id }).then((res) => {
+        formDatas.value = res;
+      });
+    } else {
+      rowId.value = '';
+      componentType.value = 0;
+      setFieldsValue({
+        menuType: 1,
+        enabledMark: 1,
+        outLink: 0,
+        display: 1,
+        componentType: 0,
+        systemId: '1',
+      });
 
-          folderId.value = '0';
-        }
+      folderId.value = '0';
+    }
 
-        const treeData = await getMenuTree({ systemType: systemType.value });
+    const treeData = await getMenuTree({ systemType: systemType.value });
 
-        const system = await getSubSystemList();
-        await updateSchema([
-          {
-            field: 'parentId',
-            component: 'MenuSelect',
-            componentProps: ({ formModel }) => {
-              return {
-                getPopupContainer: () => document.body,
-                systemType: systemType.value,
-                onChange: (v) => {
-                  findParentSystem(treeData, treeData, v);
-                  formModel.systemId = systemId.value;
-                },
-              };
+    const system = await getSubSystemList();
+    await updateSchema([
+      {
+        field: 'parentId',
+        component: 'MenuSelect',
+        componentProps: ({ formModel }) => {
+          return {
+            getPopupContainer: () => document.body,
+            systemType: systemType.value,
+            onChange: (v) => {
+              findParentSystem(treeData, treeData, v);
+              formModel.systemId = systemId.value;
             },
-          },
-          {
-            field: 'systemId',
-            componentProps: { options: system },
-          },
-          {
-            field: 'outLink',
-            dynamicDisabled: () => {
-              return isUpdate.value && componentType.value == 1;
-            },
-          },
-          {
-            field: 'path',
-            dynamicDisabled: () => {
-              return isUpdate.value && componentType.value == 1;
-            },
-          },
-        ]);
-      });
+          };
+        },
+      },
+      {
+        field: 'systemId',
+        componentProps: { options: system },
+      },
+      {
+        field: 'outLink',
+        dynamicDisabled: () => {
+          return isUpdate.value && componentType.value == 1;
+        },
+      },
+      {
+        field: 'path',
+        dynamicDisabled: () => {
+          return isUpdate.value && componentType.value == 1;
+        },
+      },
+    ]);
+  });
 
-      const getTitle = computed(() => (!isUpdate.value ? t('新增菜单') : t('编辑菜单')));
-      const { createMessage } = useMessage();
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          if (values.outLink == 1) {
-            values.component = values.url;
-          }
-          if (values.orgIds) {
-            const orgIds: Recordable[] = [];
-            values.orgIds.forEach((item) => {
-              orgIds.push({ deptId: item });
-            });
-            values.menuDeptRelations = orgIds;
-          }
-          values.buttonList = buttonTable.value
-            ? buttonTable.value.getDataSource()
-            : buttonDatas.value;
-          values.columnList = columnTable.value
-            ? columnTable.value.getDataSource()
-            : columnDatas.value;
-          values.systemType = systemType.value;
-          values.formList = formTable.value ? formTable.value.getDataSource() : formDatas.value;
-          setDrawerProps({ confirmLoading: true });
-          if (values.parentId === rowId.value) {
-            setDrawerProps({ confirmLoading: false });
-            createMessage.error('不能将自身设为上级菜单');
-            return false;
-          }
-          // TODO custom api
-          if (!isUpdate.value) {
-            //false 新增
-            await addMenu(values);
-            notification.success({
-              message: t('提示'),
-              description: t('新增菜单成功'),
-            }); //提示消息
-          } else {
-            values.id = rowId.value;
-            await updateMenu(values);
-            notification.success({
-              message: t('提示'),
-              description: t('修改菜单成功'),
-            }); //提示消息
-          }
-          await permissionStore.buildRoutesAction();
-          closeDrawer();
-          emit('success');
-        } catch (error) {
-          setDrawerProps({ confirmLoading: false });
-        }
+  const getTitle = computed(() => (!isUpdate.value ? t('新增菜单') : t('编辑菜单')));
+  const { createMessage } = useMessage();
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      if (values.outLink == 1) {
+        values.component = values.url;
       }
-      const handleUpdate = (e) => {
-        setFieldsValue({
-          iconUrl: e[0].fileUrl,
+      if (values.orgIds) {
+        const orgIds: Recordable[] = [];
+        values.orgIds.forEach((item) => {
+          orgIds.push({ deptId: item });
         });
-      };
-      function findParentSystem(treeData, tempTree, id) {
-        for (let i = 0; i < treeData.length; i++) {
-          let o = treeData[i];
+        values.menuDeptRelations = orgIds;
+      }
+      values.buttonList = buttonTable.value ? buttonTable.value.getDataSource() : buttonDatas.value;
+      values.columnList = columnTable.value ? columnTable.value.getDataSource() : columnDatas.value;
+      values.systemType = systemType.value;
+      values.formList = formTable.value ? formTable.value.getDataSource() : formDatas.value;
+      setDrawerProps({ confirmLoading: true });
+      if (values.parentId === rowId.value) {
+        setDrawerProps({ confirmLoading: false });
+        createMessage.error('不能将自身设为上级菜单');
+        return false;
+      }
+      // TODO custom api
+      if (!isUpdate.value) {
+        //false 新增
+        await addMenu(values);
+        notification.success({
+          message: t('提示'),
+          description: t('新增菜单成功'),
+        }); //提示消息
+      } else {
+        values.id = rowId.value;
+        await updateMenu(values);
+        notification.success({
+          message: t('提示'),
+          description: t('修改菜单成功'),
+        }); //提示消息
+      }
+      await permissionStore.buildRoutesAction();
+      closeDrawer();
+      emit('success');
+    } catch (error) {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+  const handleUpdate = (e) => {
+    setFieldsValue({
+      iconUrl: e[0].fileUrl,
+    });
+  };
+  function findParentSystem(treeData, tempTree, id) {
+    for (let i = 0; i < treeData.length; i++) {
+      let o = treeData[i];
 
-          if (o.id == id) {
-            systemId.value = o.systemId;
-            if (o.parentId) {
-              findParentSystem(tempTree, tempTree, o.parentId);
-            } else {
-              break;
-            }
-          } else if (o.children?.length > 0) {
-            findParentSystem(o.children, tempTree, id);
-          }
+      if (o.id == id) {
+        systemId.value = o.systemId;
+        if (o.parentId) {
+          findParentSystem(tempTree, tempTree, o.parentId);
+        } else {
+          break;
         }
+      } else if (o.children?.length > 0) {
+        findParentSystem(o.children, tempTree, id);
       }
-      return {
-        registerDrawer,
-        registerForm,
-        getTitle,
-        hasMetaFormId,
-        handleSubmit,
-        buttonTable,
-        rowId,
-        columnTable,
-        formTable,
-        activeKey,
-        t,
-        folderId,
-        handleUpdate,
-        systemType,
-      };
-    },
-  });
+    }
+  }
 </script>

src/views/system/menu/index.vue

@@ -30,8 +30,8 @@
     <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
+<script lang="ts" setup>
+  import { h } from 'vue';
 
   import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
   import { getMenuTree, deleteMenu } from '/@/api/system/menu';
@@ -46,7 +46,7 @@
   import { getDataOption } from '/@/api/system/dic';
   import { getSubsystemList } from '/@/services/apis/SubsystemController';
   const { t } = useI18n();
-  export const columns: BasicColumn[] = [
+  const columns: BasicColumn[] = [
     {
       title: t('菜单名称'),
       dataIndex: 'title',
@@ -111,7 +111,7 @@
     },
   ];
 
-  export const searchFormSchema: FormSchema[] = [
+  const searchFormSchema: FormSchema[] = [
     {
       field: 'systemType',
       label: t('所属系统类型'),
@@ -168,94 +168,78 @@
     },
   ];
 
-  export default defineComponent({
-    name: 'MenuManagement',
-    components: { BasicTable, MenuDrawer, TableAction, PageWrapper },
-    setup() {
-      const { notification } = useMessage();
-      const [registerDrawer, { openDrawer }] = useDrawer();
-      const [registerTable, { reload, getForm }] = useTable({
-        title: t('菜单列表'),
-        api: getMenuTree,
-        columns,
-        rowKey: 'id',
-        formConfig: {
-          rowProps: {
-            gutter: 16,
-          },
-          schemas: searchFormSchema,
-        },
-        pagination: {
-          pageSize: 20,
-        },
-        beforeFetch: (params) => {
-          if (!params.systemType) {
-            params.systemType = 'system_pc';
-          }
-          return { ...params };
-        },
-        striped: true,
-        useSearchForm: true,
-        showTableSetting: true,
-        showIndexColumn: false,
-        bordered: true,
-        actionColumn: {
-          width: 80,
-          title: t('操作'),
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: undefined,
-        },
-      });
-      const { createMessage } = useMessage();
-      function handleCreate() {
-        const formData = getForm().getFieldsValue().systemType;
-        if (!formData) {
-          createMessage.error('请选择系统类型');
-        }
-        openDrawer(true, {
-          systemType: formData,
-          isUpdate: false,
-        });
-      }
-
-      function handleEdit(record: Recordable) {
-        const formData = getForm().getFieldsValue().systemType;
-        if (!formData) {
-          createMessage.error('请选择系统类型');
-        }
-        openDrawer(true, {
-          record,
-          isUpdate: true,
-          systemType: formData,
-        });
+  const { notification } = useMessage();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, getForm }] = useTable({
+    title: t('菜单列表'),
+    api: getMenuTree,
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      rowProps: {
+        gutter: 16,
+      },
+      schemas: searchFormSchema,
+    },
+    pagination: {
+      pageSize: 20,
+    },
+    beforeFetch: (params) => {
+      if (!params.systemType) {
+        params.systemType = 'system_pc';
       }
+      return { ...params };
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 80,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+  const { createMessage } = useMessage();
+  function handleCreate() {
+    const formData = getForm().getFieldsValue().systemType;
+    if (!formData) {
+      createMessage.error('请选择系统类型');
+    }
+    openDrawer(true, {
+      systemType: formData,
+      isUpdate: false,
+    });
+  }
 
-      function handleDelete(record: Recordable) {
-        const permissionStore = usePermissionStore();
-        deleteMenu([record.id]).then(async (_) => {
-          await permissionStore.buildRoutesAction();
-          reload();
-          notification.success({
-            message: t('提示'),
-            description: t('删除成功'),
-          }); //提示消息
-        });
-      }
+  function handleEdit(record: Recordable) {
+    const formData = getForm().getFieldsValue().systemType;
+    if (!formData) {
+      createMessage.error('请选择系统类型');
+    }
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      systemType: formData,
+    });
+  }
 
-      function handleSuccess() {
-        reload();
-      }
+  function handleDelete(record: Recordable) {
+    const permissionStore = usePermissionStore();
+    deleteMenu([record.id]).then(async (_) => {
+      await permissionStore.buildRoutesAction();
+      reload();
+      notification.success({
+        message: t('提示'),
+        description: t('删除成功'),
+      }); //提示消息
+    });
+  }
 
-      return {
-        registerTable,
-        registerDrawer,
-        handleCreate,
-        handleEdit,
-        handleDelete,
-        handleSuccess,
-        t,
-      };
-    },
-  });
+  function handleSuccess() {
+    reload();
+  }
 </script>

src/views/system/user/components/UserModal.vue

@@ -3,8 +3,8 @@
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { FormSchema } from '/@/components/Table';
@@ -17,7 +17,7 @@
   import { getRoleAllList } from '/@/api/system/role';
   // import { getPostList } from '/@/api/system/post';
   const { t } = useI18n();
-  export const accountFormSchema: FormSchema[] = [
+  const accountFormSchema: FormSchema[] = [
     {
       field: 'userName',
       label: t('用户名'),
@@ -154,120 +154,113 @@
     },
   ];
 
-  export default defineComponent({
-    name: 'UserModel',
-    components: { BasicModal, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const { notification } = useMessage();
-      const isUpdate = ref(true);
-      const rowId = ref('');
-      // const { t } = useI18n();
+  const emit = defineEmits(['success', 'register']);
 
-      const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
-        labelWidth: 100,
-        schemas: accountFormSchema,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 23,
-        },
-      });
+  const { notification } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  // const { t } = useI18n();
 
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        resetFields();
-        setModalProps({ confirmLoading: false });
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    schemas: accountFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
 
-        isUpdate.value = !!data?.isUpdate;
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
 
-        if (unref(isUpdate)) {
-          rowId.value = data.id;
-          const record = await getUser(data.id);
-          const departmentIds = record.departmentIds.split(',');
-          setFieldsValue({
-            ...record,
-            departmentIds,
-          });
-        }
-        const treeData = await getDepartmentTree();
+    isUpdate.value = !!data?.isUpdate;
 
-        updateSchema([
-          {
-            field: 'password',
-            ifShow: !unref(isUpdate),
-          },
-          {
-            field: 'departmentIds',
-            componentProps: { treeData },
-          },
-        ]);
+    if (unref(isUpdate)) {
+      rowId.value = data.id;
+      const record = await getUser(data.id);
+      const departmentIds = record.departmentIds.split(',');
+      setFieldsValue({
+        ...record,
+        departmentIds,
       });
+    }
+    const treeData = await getDepartmentTree();
 
-      const getTitle = computed(() => (!unref(isUpdate) ? t('新增用户') : t('编辑用户')));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          const data = { ...values, departmentIds: values.departmentIds.toString() };
-          if (!unref(isUpdate)) {
-            // 验证 密码必须包含大写字母、小写字母、数字和特殊字符，长度8~16位
-            if (data.password.length < 8 || data.password.length > 16) {
-              notification.error({
-                message: t('密码'),
-                description: t('密码须长度8~16位'),
-              });
-            }
-            let pwdCount = 0;
-            let pwdRegex1 = new RegExp('(?=.*[0-9]).{8,16}'); //纯数字
-            let pwdRegex2 = new RegExp('(?=.*[a-z]).{8,16}'); //小写字母
-            let pwdRegex3 = new RegExp('(?=.*[A-Z]).{8,16}'); //大写字母
-            let pwdRegex4 = new RegExp('(?=.*[^a-zA-Z0-9]).{8,16}'); //特殊字符
-            if (pwdRegex1.test(data.password)) {
-              pwdCount = pwdCount + 1;
-            }
-            if (pwdRegex2.test(data.password)) {
-              pwdCount = pwdCount + 1;
-            }
-            if (pwdRegex3.test(data.password)) {
-              pwdCount = pwdCount + 1;
-            }
-            if (pwdRegex4.test(data.password)) {
-              pwdCount = pwdCount + 1;
-            }
-            if (pwdCount < 4) {
-              notification.error({
-                message: t('密码'),
-                description: t('须含大写,小写,数字和特殊字符'),
-              });
-              return;
-            }
-          }
-          setModalProps({ confirmLoading: true });
+    updateSchema([
+      {
+        field: 'password',
+        ifShow: !unref(isUpdate),
+      },
+      {
+        field: 'departmentIds',
+        componentProps: { treeData },
+      },
+    ]);
+  });
 
-          // TODO custom api
-          if (!unref(isUpdate)) {
-            //false 新增
-            await addUser(data);
-            notification.success({
-              message: t('新增用户'),
-              description: t('成功'),
-            }); //提示消息
-          } else {
-            data.id = rowId.value;
-            await updateUser(data);
-            notification.success({
-              message: t('编辑用户'),
-              description: t('成功'),
-            }); //提示消息
-          }
+  const getTitle = computed(() => (!unref(isUpdate) ? t('新增用户') : t('编辑用户')));
 
-          closeModal();
-          emit('success');
-        } catch (error) {
-          setModalProps({ confirmLoading: false });
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      const data = { ...values, departmentIds: values.departmentIds.toString() };
+      if (!unref(isUpdate)) {
+        // 验证 密码必须包含大写字母、小写字母、数字和特殊字符，长度8~16位
+        if (data.password.length < 8 || data.password.length > 16) {
+          notification.error({
+            message: t('密码'),
+            description: t('密码须长度8~16位'),
+          });
+        }
+        let pwdCount = 0;
+        let pwdRegex1 = new RegExp('(?=.*[0-9]).{8,16}'); //纯数字
+        let pwdRegex2 = new RegExp('(?=.*[a-z]).{8,16}'); //小写字母
+        let pwdRegex3 = new RegExp('(?=.*[A-Z]).{8,16}'); //大写字母
+        let pwdRegex4 = new RegExp('(?=.*[^a-zA-Z0-9]).{8,16}'); //特殊字符
+        if (pwdRegex1.test(data.password)) {
+          pwdCount = pwdCount + 1;
+        }
+        if (pwdRegex2.test(data.password)) {
+          pwdCount = pwdCount + 1;
+        }
+        if (pwdRegex3.test(data.password)) {
+          pwdCount = pwdCount + 1;
+        }
+        if (pwdRegex4.test(data.password)) {
+          pwdCount = pwdCount + 1;
+        }
+        if (pwdCount < 4) {
+          notification.error({
+            message: t('密码'),
+            description: t('须含大写,小写,数字和特殊字符'),
+          });
+          return;
         }
       }
+      setModalProps({ confirmLoading: true });
 
-      return { registerModal, registerForm, getTitle, handleSubmit, t };
-    },
-  });
+      // TODO custom api
+      if (!unref(isUpdate)) {
+        //false 新增
+        await addUser(data);
+        notification.success({
+          message: t('新增用户'),
+          description: t('成功'),
+        }); //提示消息
+      } else {
+        data.id = rowId.value;
+        await updateUser(data);
+        notification.success({
+          message: t('编辑用户'),
+          description: t('成功'),
+        }); //提示消息
+      }
+
+      closeModal();
+      emit('success');
+    } catch (error) {
+      setModalProps({ confirmLoading: false });
+    }
+  }
 </script>