修改流程中心

src/router/routes/index.ts

@@ -75,7 +75,7 @@ export const processCenterRoute: AppRouteRecordRaw = {
       name: 'detailsTab2',
       component: () => import('@/views/processCenter/detailsTab2/index.vue'),
       meta: {
-        title: '发起事项详情页面',
+        title: '待办事项详情页面',
         icon: '',
       },
     },

src/views/processCenter/detailsTab2/index.vue

 <template>
-  <p>发起事项详情页</p>
+  <page-wrapper title="待办事项" content="" content-class="p-4">
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }"> </template>
+    </BasicForm>
+    <div class="table-container">
+      <BasicTable @register="registerTable" />
+    </div>
+    <div class="flex flex-row justify-end mr-5">
+      <a-button type="primary" @click="handleSubmit">通过</a-button
+      ><a-button type="error" @click="handleSubmit">驳回</a-button>
+    </div>
+  </page-wrapper>
 </template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { viewFormSchematab2, viewFormColumntab2 } from './mock';
+  // import { BasicTree, TreeItem } from '@/components/Tree';
+  import { roleDetailApi, roleUpdataApi, addRoleApi } from '@/api/system/role/role';
+  import { getMenuSelect, getRoleMenuSelected } from '@/api/system/menu/menu';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useGo } from '@/hooks/web/usePage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const go = useGo();
+  const roleId = ref('');
+  // const treeData = ref<TreeItem[]>([]);
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: viewFormSchematab2,
+    showActionButtonGroup: false,
+  });
+  //table
+  const [registerTable, { reload }] = useTable({
+    columns: viewFormColumntab2,
+    rowKey: 'key',
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const getTitle = computed(() => (!unref(isUpdate) ? '新建通知规则' : '编辑通知规则'));
+
+  async function handleSubmit() {
+    go('/processCenter/index');
+  }
+</script>

src/views/processCenter/detailsTab2/mock.ts

+import { def } from '@vue/shared';
+import { component } from 'vxe-pc-ui';
+
+export const viewFormSchematab2: any[] = [
+  {
+    component: 'Divider',
+    field: 'divider-linked',
+    label: '申请信息',
+  },
+  {
+    field: 'applyReason',
+    component: 'Input',
+    label: '申请理由',
+    colProps: {
+      span: 12,
+    },
+    defaultValue: '申请理由',
+  },
+  {
+    field: 'applyTitle',
+    component: 'Input',
+    label: '申请标题',
+    colProps: {
+      span: 12,
+    },
+    defaultValue: '申请标题',
+  },
+  {
+    field: 'applyUser',
+    component: 'Input',
+    label: '申请人',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请人',
+  },
+  {
+    field: 'applyOrg',
+    component: 'Input',
+    label: '所属机构',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '所属机构',
+  },
+  {
+    field: 'applyTime',
+    component: 'Input',
+    label: '申请时间',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请时间',
+  },
+  {
+    field: 'applyStatus',
+    component: 'Select',
+    label: '申请状态',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      defaultValue: '0',
+      options: [
+        { label: '待审批', value: '0' },
+        { label: '已通过', value: '1' },
+        { label: '已驳回', value: '2' },
+      ],
+    },
+  },
+  {
+    component: 'Divider',
+    field: 'divider-linked',
+    label: '资源信息',
+  },
+];
+export const viewFormColumntab2: any[] = [
+  {
+    field: 'resourceName',
+    title: '资源信息',
+    width: 100,
+  },
+  {
+    field: 'applyStatus',
+    title: '处理状态',
+    width: 100,
+  },
+  {
+    field: 'detail',
+    title: '详情',
+    width: 100,
+  },
+];

src/views/processCenter/detailsTab3/index.vue

 <template>
-  <p>已办事项详情页</p>
+  <page-wrapper title="已办事项" content="" content-class="p-4">
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }"> </template>
+    </BasicForm>
+    <div class="table-container">
+      <BasicTable @register="registerTable" />
+    </div>
+  </page-wrapper>
 </template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { viewFormSchematab3, viewFormColumntab3 } from './mock';
+  // import { BasicTree, TreeItem } from '@/components/Tree';
+  import { roleDetailApi, roleUpdataApi, addRoleApi } from '@/api/system/role/role';
+  import { getMenuSelect, getRoleMenuSelected } from '@/api/system/menu/menu';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const roleId = ref('');
+  // const treeData = ref<TreeItem[]>([]);
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: viewFormSchematab3,
+    showActionButtonGroup: false,
+  });
+  //table
+  const [registerTable, { reload }] = useTable({
+    columns: viewFormColumntab3,
+    rowKey: 'key',
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const getTitle = computed(() => (!unref(isUpdate) ? '新建通知规则' : '编辑通知规则'));
+
+  async function handleSubmit() {
+    try {
+      const formData = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // 编辑
+      if (unref(isUpdate)) {
+        formData.businessId = roleId.value;
+        roleUpdataApi(formData).then((res) => {
+          if (res.code === 200) {
+            createMessage.success('编辑成功');
+            closeDrawer();
+            emit('success', {
+              isUpdate: unref(isUpdate),
+              values: { ...formData, id: roleId.value },
+            });
+          }
+        });
+      } else {
+        //新增
+        const paramsAdd = {
+          businessId: formData.businessId,
+          menuIds: formData.menuIds,
+          remarks: formData.remarks,
+          roleKey: formData.roleKey,
+          roleName: formData.roleName,
+          roleSort: formData.roleSort,
+          roleStatus: formData.roleStatus,
+        };
+        addRoleApi(paramsAdd).then((res) => {
+          if (res.code === 200) {
+            createMessage.success('新增成功');
+            closeDrawer();
+            emit('success', {
+              isUpdate: unref(isUpdate),
+              values: { ...formData, id: roleId.value },
+            });
+          }
+        });
+      }
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/processCenter/detailsTab3/mock.ts

+import { component } from 'vxe-pc-ui';
+
+export const viewFormSchematab3: any[] = [
+  {
+    component: 'Divider',
+    field: 'divider-linked',
+    label: '申请信息',
+  },
+  {
+    field: 'applyReason',
+    component: 'Input',
+    label: '申请理由',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请理由',
+  },
+  {
+    field: 'applyTitle',
+    component: 'Input',
+    label: '申请标题',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请标题',
+  },
+  {
+    field: 'applyUser',
+    component: 'Input',
+    label: '申请人',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请人',
+  },
+  {
+    field: 'applyOrg',
+    component: 'Input',
+    label: '所属机构',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+
+    defaultValue: '所属机构',
+  },
+  {
+    field: 'applyTime',
+    component: 'Input',
+    label: '申请时间',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '申请时间',
+  },
+  {
+    field: 'applyStatus',
+    component: 'Select',
+    label: '申请状态',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      defaultValue: '0',
+      options: [
+        { label: '待审批', value: '0' },
+        { label: '已通过', value: '1' },
+        { label: '已驳回', value: '2' },
+      ],
+      disabled: true,
+    },
+  },
+  {
+    component: 'Divider',
+    field: 'divider-linked',
+    label: '资源信息',
+  },
+];
+export const viewFormColumntab3: any[] = [
+  {
+    field: 'resourceName',
+    title: '资源信息',
+    width: 100,
+  },
+  {
+    field: 'applyStatus',
+    title: '处理状态',
+    width: 100,
+  },
+  {
+    field: 'detail',
+    title: '详情',
+    width: 100,
+  },
+];

src/views/processCenter/index.vue

 <template>
   <div>
     <tabs v-model:value="activeKey" @change="handleTabChange" style="margin-left: 2%">
-      <Tabs.TabPane key="1" tab="我的待办事项">
+      <Tabs.TabPane key="1" tab="我发起的事项">
         <BasicTable @register="registerTable" class="p-2">
           <!-- <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
@@ -22,7 +22,7 @@
           </template>
         </BasicTable>
       </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="我发起的事项">
+      <Tabs.TabPane key="2" tab="我的待办事项">
         <!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 -->
         <BasicTable @register="registerTable2">
           <template #toolbar>

src/views/processCenter/mock.ts

+import { component } from 'vxe-pc-ui';
+
 export const tableListtab1: any[] = [
   {
     title: '申请标题1',