feat: 审批角色位置调整

feat: 单位审批角色表格的调整

src/pages/Project/Approval/index.tsx

@@ -4,7 +4,7 @@ import { PageContainer } from '@ant-design/pro-layout'
 import ProTable from '@ant-design/pro-table'
 import { useRequest } from '@umijs/max'
 import { connect, useDispatch } from 'umi'
-import { Button, message, Tabs, Modal } from 'antd'
+import { Button, message, Modal } from 'antd'
 import React, { useEffect, useRef, useState } from 'react'
 import {
   addInstitutionRole,
@@ -13,7 +13,6 @@ import {
   updateInstitutionRole
 } from '@/services/api/project'
 import consts from '@/utils/consts'
-const { TabPane } = Tabs
 export enum ApprovalModalType {
   ADD,
   UPDATE
@@ -25,6 +24,7 @@ const Approval: React.FC = props => {
   const tRef = useRef<ActionType>(null)
   const formRef = useRef<ProFormInstance>(null)
   const [state, setState] = useState({
+    activeKey: 'tab1',
     params: {},
     visible: false,
     modalType: 'add',
@@ -95,86 +95,106 @@ const Approval: React.FC = props => {
     }
   }, [])
 
-  const columns: ProColumnType<API.InstitutionRoleParams>[] = [
-    {
-      dataIndex: 'institutionName',
-      title: '单位名称',
-      align: 'center',
-      onHeaderCell: () => ({ style: { textAlign: 'center' } })
-    },
-    {
-      dataIndex: 'name',
-      title: '审批人（账号/姓名）',
-      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
-      render: (_, record) => (
-        <div>
-          <span className="mr-1">{record.approvalMember?.map(item => item.account)}</span>/
-          <span className="ml-1">{record.approvalMember?.map(item => item.name)}</span>
-        </div>
-      )
-    },
-    {
-      dataIndex: 'opreate',
-      title: '操作',
-      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
-      render: (_, record) => (
-        <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
-          <span
-            className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
-            onClick={() => {
-              setState({
-                ...state,
-                modalType: ApprovalModalType.UPDATE,
-                modalVisible: true,
-                ID: record.ID,
-                institutionID: record.institutionID
-              })
-              if (record.institutionID) {
-                tryStaffList(record.institutionID)
-                formRef.current?.resetFields([`accountID`], [])
-              }
-              setTimeout(() => {
-                formRef.current?.setFieldsValue({
-                  institutionID: record.institutionID,
-                  accountID: record.approvalMember?.map(item => item.ID)
+  const columns: ProColumnType<API.InstitutionRoleParams>[] = {
+    tab1: [
+      {
+        dataIndex: 'institutionName',
+        title: '单位名称',
+        // align: 'center',
+        onHeaderCell: () => ({ style: { textAlign: 'center' } })
+      },
+      {
+        dataIndex: 'name',
+        title: '审批人（账号/姓名）',
+        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+        render: (_, record) => (
+          <div>
+            <span className="mr-1">{record.approvalMember?.map(item => item.account)}</span>/
+            <span className="ml-1">{record.approvalMember?.map(item => item.name)}</span>
+          </div>
+        )
+      },
+      {
+        dataIndex: 'opreate',
+        title: '操作',
+        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+        render: (_, record) => (
+          <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
+            <span
+              className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
+              onClick={() => {
+                setState({
+                  ...state,
+                  modalType: ApprovalModalType.UPDATE,
+                  modalVisible: true,
+                  ID: record.ID,
+                  institutionID: record.institutionID
                 })
-              }, 80)
-            }}>
-            编辑
-          </span>
-          <span
-            className={'pl-2 text-red-500 cursor-pointer hover:text-red-600'}
-            onClick={() => handleDel(record.ID)}>
-            删除
-          </span>
-        </div>
-      )
-    }
-  ]
+                if (record.institutionID) {
+                  tryStaffList(record.institutionID)
+                  formRef.current?.resetFields([`accountID`], [])
+                }
+                setTimeout(() => {
+                  formRef.current?.setFieldsValue({
+                    institutionID: record.institutionID,
+                    accountID: record.approvalMember?.map(item => item.ID)
+                  })
+                }, 80)
+              }}>
+              编辑
+            </span>
+            <span
+              className={'pl-2 text-red-500 cursor-pointer hover:text-red-600'}
+              onClick={() => handleDel(record.ID)}>
+              删除
+            </span>
+          </div>
+        )
+      }
+    ]
+    // tab2: []
+  }
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
-        <div className="w-full h-full p-4 bg-white">
-          <Tabs defaultActiveKey="1">
-            <TabPane tab="单位审批角色" key="1">
-              <ProTable
-                rowKey="ID"
-                actionRef={tRef}
-                columns={columns}
-                search={false}
-                scroll={{ y: document.body.clientHeight - 315 }}
-                request={async params => {
-                  const { code = -1, data: { items = [], total = 0 } = {} } = await getInstitutionRole({
-                    ...params
-                  })
-                  return {
-                    data: items,
-                    success: code === consts.RET_CODE.SUCCESS,
-                    total
+        <div className="w-full h-full bg-white">
+          <ProTable
+            rowKey="ID"
+            actionRef={tRef}
+            columns={columns[state.activeKey]}
+            search={false}
+            scroll={{ y: document.body.clientHeight - 315 }}
+            request={async params => {
+              const { code = -1, data: { items = [], total = 0 } = {} } = await getInstitutionRole({
+                ...params
+              })
+              return {
+                data: items,
+                success: code === consts.RET_CODE.SUCCESS,
+                total
+              }
+            }}
+            toolbar={{
+              menu: {
+                type: 'tab',
+                activeKey: state.activeKey,
+                onChange: key => {
+                  setState({ ...state, activeKey: key })
+                },
+                items: [
+                  {
+                    key: 'tab1',
+                    tab: '单位审批角色'
                   }
-                }}
-                toolbar={{
-                  actions: [
+                  // {
+                  //   key: 'tab2',
+                  //   tab: '流程审批角色'
+                  // }
+                ]
+              },
+              actions: [
+                <>
+                  {state.activeKey === 'tab1' ? (
                     <Button
                       type="primary"
                       key="add_flow_btn"
@@ -187,58 +207,55 @@ const Approval: React.FC = props => {
                       }}>
                       新建角色
                     </Button>
-                  ]
-                }}
-              />
-              <ModalForm
-                visible={state.modalVisible}
-                isKeyPressSubmit
-                layout="horizontal"
-                labelCol={{ span: 4 }}
-                modalProps={{
-                  width: '30%'
-                }}
-                onVisibleChange={visible => {
-                  setState({ ...state, modalVisible: visible })
-                  setTimeout(() => {
-                    if (!visible) formRef.current?.resetFields()
-                  }, 80)
-                }}
-                title={`${state.modalType === ApprovalModalType.ADD ? '新建' : '编辑'}单位角色`}
-                formRef={formRef}
-                onFinish={async values => {
-                  try {
-                    if (state.modalType === ApprovalModalType.ADD) {
-                      await tryAddInstitutionRole(values)
-                    } else {
-                      await tryUpdateInstitutionRole({ ...values, ID: state.ID })
-                    }
-                    tRef.current?.reload()
-                    return true
-                  } catch (error) {
-                    message.error(error)
-                    return false
-                  }
-                }}>
-                <ProFormSelect
-                  label="单位名称"
-                  name="institutionID"
-                  className="w-full"
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                  onChange={async value => {
-                    if (value) {
-                      await tryStaffList(value)
-                      formRef.current?.resetFields([`accountID`], [])
-                    }
-                  }}
-                />
-                <ProFormSelect label="审批人" name="accountID" className="w-full" options={state.staffList} />
-              </ModalForm>
-            </TabPane>
-            <TabPane tab="流程审批角色" key="2">
-              预留
-            </TabPane>
-          </Tabs>
+                  ) : null}
+                </>
+              ]
+            }}
+          />
+          <ModalForm
+            visible={state.modalVisible}
+            isKeyPressSubmit
+            layout="horizontal"
+            labelCol={{ span: 4 }}
+            modalProps={{
+              width: '30%'
+            }}
+            onVisibleChange={visible => {
+              setState({ ...state, modalVisible: visible })
+              setTimeout(() => {
+                if (!visible) formRef.current?.resetFields()
+              }, 80)
+            }}
+            title={`${state.modalType === ApprovalModalType.ADD ? '新建' : '编辑'}单位角色`}
+            formRef={formRef}
+            onFinish={async values => {
+              try {
+                if (state.modalType === ApprovalModalType.ADD) {
+                  await tryAddInstitutionRole(values)
+                } else {
+                  await tryUpdateInstitutionRole({ ...values, ID: state.ID })
+                }
+                tRef.current?.reload()
+                return true
+              } catch (error) {
+                message.error(error)
+                return false
+              }
+            }}>
+            <ProFormSelect
+              label="单位名称"
+              name="institutionID"
+              className="w-full"
+              options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
+              onChange={async value => {
+                if (value) {
+                  await tryStaffList(value)
+                  formRef.current?.resetFields([`accountID`], [])
+                }
+              }}
+            />
+            <ProFormSelect label="审批人" name="accountID" className="w-full" options={state.staffList} />
+          </ModalForm>
         </div>
       </div>
     </PageContainer>