修改流程中心样式

src/views/processCenter/index.vue

@@ -137,24 +137,41 @@
   import { useModal } from '@/components/Modal';
   import { getMenuListByPage } from '@/api/system/menu/menu';
   import { Tabs, Descriptions, Alert } from 'ant-design-vue';
+  import { tableListtab1, tableListtab2, tableListtab3 } from './mock';
 
   defineOptions({ name: 'RoleManagement' });
   const filterStore = useFilterStore();
   const route = useRoute();
   const { createMessage } = useMessage();
+  const tableData = ref([]);
+  const tableDatatab2 = ref([]);
+  const tableDatatab3 = ref([]);
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerModal, { openModal }] = useModal();
   const [registerModalEmail, { openModal: openModalEmail }] = useModal();
-  const [registerTable, { reload, getForm }] = useTable({
+  const [registerTable, { reload, getForm, getRowSelection }] = useTable({
     title: '',
-    api: getRoleListByPage,
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableListtab1.length,
+        code: '',
+        message: '',
+        data: tableListtab1,
+      };
+      return { ...response };
+    },
     columns,
     rowSelection: {
       type: 'checkbox',
     },
     formConfig: {
-      labelWidth: 120,
+      labelWidth: 10,
       schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
     },
     useSearchForm: true,
     showTableSetting: true,
@@ -168,16 +185,32 @@
       fixed: undefined,
     },
   });
-  const [registerTable2, { reload: reload2, getForm: getForm2 }] = useTable({
+  const [
+    registerTable2,
+    { reload: reload2, getForm: getForm2, getRowSelection: getRowSelection2 },
+  ] = useTable({
     title: '',
-    api: getRoleListByPage,
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableListtab2.length,
+        code: '',
+        message: '',
+        data: tableListtab2,
+      };
+      return { ...response };
+    },
     columns: columnstab2,
     rowSelection: {
       type: 'checkbox',
     },
     formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchematab2,
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
     },
     useSearchForm: true,
     showTableSetting: true,
@@ -191,16 +224,32 @@
     //   fixed: undefined,
     // },
   });
-  const [registerTable3, { reload: reload3, getForm: getForm3 }] = useTable({
+  const [
+    registerTable3,
+    { reload: reload3, getForm: getForm3, getRowSelection: getRowSelection3 },
+  ] = useTable({
     title: '',
-    api: getRoleListByPage,
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableListtab2.length,
+        code: '',
+        message: '',
+        data: tableListtab2,
+      };
+      return { ...response };
+    },
     columns: columnstab3,
     rowSelection: {
       type: 'checkbox',
     },
     formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchematab3,
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
     },
     useSearchForm: true,
     showTableSetting: true,
@@ -265,25 +314,75 @@
     });
   }
 
-  /**删除按钮*/
-  async function handleDelete(record: Recordable) {
-    await deleteById(record.businessId);
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
+    tableData.value.splice(
+      tableData.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
     createMessage.success('删除成功!');
-    await reload();
+    reload();
   }
 
   /**tab2删除按钮*/
-  async function handleDeletetab2(record: Recordable) {
-    await deleteById(record.businessId);
+
+  function handleDeletetab2(record: Recordable) {
+    tableDatatab2.value.splice(
+      tableDatatab2.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
     createMessage.success('删除成功!');
-    await reload2();
+    reload2();
   }
   /**tab3删除按钮*/
-  async function handleDeletetab3(record: Recordable) {
-    await deleteById(record.businessId);
+
+  function handleDeletetab3(record: Recordable) {
+    tableDatatab3.value.splice(
+      tableDatatab3.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
     createMessage.success('删除成功!');
-    await reload3();
+    reload3();
   }
+  /**批量删除*/
+  function handleDeleteBatch() {
+    const rowSelection = getRowSelection().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++) {
+      tableData.value.splice(
+        tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
+        1,
+      );
+    }
+    createMessage.success('删除成功!');
+    reload();
+  }
+
+  /**批量删除tab2*/
+  function handleDeleteBatch2() {
+    const rowSelection = getRowSelection2().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++) {
+      tableDatatab2.value.splice(
+        tableDatatab2.value.findIndex((item) => item.businessId === rowSelection[i]),
+        1,
+      );
+    }
+    createMessage.success('删除成功!');
+    reload2();
+  }
+
+  /**批量删除tab3*/
+  function handleDeleteBatch3() {
+    const rowSelection = getRowSelection3().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++) {
+      tableDatatab3.value.splice(
+        tableDatatab3.value.findIndex((item) => item.businessId === rowSelection[i]),
+        1,
+      );
+    }
+    createMessage.success('删除成功!');
+    reload3();
+  }
+
   function handleSuccess() {
     reload();
   }
@@ -297,6 +396,9 @@
   /**进入页面的初始化方法 getForm2是给tab2用的*/
   onMounted(() => {
     const path = route.path;
+    tableData.value = tableListtab1;
+    tableDatatab2.value = tableListtab2;
+    tableDatatab3.value = tableListtab3;
     if (filterStore.getSearchParams[path]) {
       if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
         const params = JSON.parse(filterStore.getSearchParams[path]);

src/views/processCenter/mock.ts

+export const tableListtab1: any[] = [
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题2',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构2',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人2',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+];
+export const tableListtab2: any[] = [
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题2',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构2',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人2',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+];
+export const tableListtab3: any[] = [
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题2',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构2',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人2',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+  {
+    title: '申请标题1',
+    reason: '申请理由1',
+    createBy: '申请人1',
+    deptName: '机构1',
+    type: '申请类型1',
+    createTime: '2024-10-25 18:04:05',
+    status: '状态1',
+  },
+];

src/views/processCenter/processCenter.data.ts

@@ -123,7 +123,7 @@ export const columnstab3: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'keyword',
-    label: '',
+    label: ' ',
     component: 'Input',
     componentProps: {
       placeholder: '输入关键字搜索',
@@ -132,7 +132,7 @@ export const searchFormSchema: FormSchema[] = [
   },
   {
     field: 'type',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -145,7 +145,7 @@ export const searchFormSchema: FormSchema[] = [
   },
   {
     field: 'deptName',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -158,7 +158,7 @@ export const searchFormSchema: FormSchema[] = [
   },
   {
     field: 'status',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -173,7 +173,7 @@ export const searchFormSchema: FormSchema[] = [
 export const searchFormSchematab2: FormSchema[] = [
   {
     field: 'keyword',
-    label: '',
+    label: ' ',
     component: 'Input',
     componentProps: {
       placeholder: '输入关键字搜索',
@@ -182,7 +182,7 @@ export const searchFormSchematab2: FormSchema[] = [
   },
   {
     field: 'type',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -195,7 +195,7 @@ export const searchFormSchematab2: FormSchema[] = [
   },
   {
     field: 'deptName',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -208,7 +208,7 @@ export const searchFormSchematab2: FormSchema[] = [
   },
   {
     field: 'status',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -232,7 +232,7 @@ export const searchFormSchematab3: FormSchema[] = [
   },
   {
     field: 'type',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -245,7 +245,7 @@ export const searchFormSchematab3: FormSchema[] = [
   },
   {
     field: 'deptName',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [
@@ -258,7 +258,7 @@ export const searchFormSchematab3: FormSchema[] = [
   },
   {
     field: 'status',
-    label: '',
+    label: ' ',
     component: 'Select',
     componentProps: {
       options: [