refactor: 调整业务审批主体菜单请求参数、类型定义

src/enums/gc.ts

@@ -1,18 +1,18 @@
 /** 业务类型 */
 export enum BusinessType {
   /** 预算 */
-  BUDGET = 'ys',
+  UNDO = 'undo',
   /** 决算 */
-  FINAL = 'jues',
+  DOING = 'doing',
   /** 结算 */
-  SETTLEMENT = 'jies'
+  DONE = 'done'
 }
 /** 执行者配置方式 */
 export enum ExecutorSetType {
   /** 预置成员 */
-  PRESET_MEMBER = 'yz',
+  PERSET = 'perset',
   /** 步骤设置 */
-  STEP_SETTING = 'bz'
+  DYNAMIC = 'dynamic'
 }
 
 /** 执行者审批模式 */

src/global.less

@@ -152,3 +152,6 @@ ol {
 //   background-color: #f5f7fa;
 //   border-radius: 10px 10px 10px 10px;
 // }
+.menu-title {
+  box-shadow: inset 0 -1px 0 0 #f0f0f0;
+}

src/pages/Business/Inventory/hooks/useRowScript.tsx

@@ -68,7 +68,12 @@ function formatTreeNode(nodes: API.ProfileTemplateItem[], ID?: string, PID?: str
 
 export function useRowScript(modal: ModalAction) {
   const [state, setState] = useState<IState>({})
-  const { refresh, loading } = useRequest(queryProfileTemplateList, {
+  const {
+    run: query,
+    refresh,
+    loading
+  } = useRequest(queryProfileTemplateList, {
+    manual: true,
     onSuccess: (result?: API.ProfileTemplateItem[]) => {
       setState({ ...state, list: formatTreeTable(result) || [], record: null })
     }
@@ -257,6 +262,7 @@ export function useRowScript(modal: ModalAction) {
   }
 
   return {
+    query,
     loading,
     list: state.list?.[0]?.children || [],
     record: state.record,

src/pages/Business/Inventory/index.tsx

@@ -1,6 +1,6 @@
 import useModal from '@/components/Modal'
 import { PageContainer } from '@ant-design/pro-layout'
-import { Button, Dropdown, Table, Menu, Space } from 'antd'
+import { Button, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import { useRowScript } from './hooks/useRowScript'
 import {
@@ -11,27 +11,22 @@ import {
   FileAddOutlined,
   FolderAddOutlined,
   SelectOutlined,
-  DownOutlined,
   FolderOpenFilled,
   FileTextOutlined
 } from '@ant-design/icons'
+import LeftMenu from '../RuleCode/components/LeftMenu'
 
 export enum TemplateMode {
   PAPER = 'paper',
   UPLOAD = 'upload'
 }
-const items = [
-  {
-    key: '1',
-    label: '预算业务审批'
-  }
-]
 
 const Inventory = () => {
   const contentHeight = document.body.clientHeight - 122
   const [modal, ModalDOM] = useModal()
 
   const {
+    query,
     loading,
     record,
     list = [],
@@ -101,98 +96,95 @@ const Inventory = () => {
     }
   ]
 
+  const handleMenuOnChange = (key: string) => {
+    const [subjectID, businessType] = key.split('_')
+    query({ subjectID, businessType })
+  }
   return (
     <PageContainer title={false}>
-      <div style={{ height: `${contentHeight}px` }} className="bg-white">
-        <Table
-          rowKey="ID"
-          title={() => (
-            <div className="ml-2 flex flex-nowrap justify-start items-center">
-              <Dropdown
-                overlay={<Menu selectable defaultSelectedKeys={['1']} items={items} />}
-                trigger={['click']}>
-                <div className="font-bold cursor-pointer">
-                  <Space>
-                    {items[0].label}
-                    <DownOutlined />
-                  </Space>
+      <div className="h-full w-full flex flex-row">
+        <LeftMenu title="业务列表" onChange={key => handleMenuOnChange(key)} />
+        <div style={{ height: `${contentHeight}px` }} className="bg-white w-6/7 ml-8">
+          <Table
+            rowKey="ID"
+            title={() => (
+              <div className="ml-2 flex flex-nowrap justify-start items-center">
+                <div className="children:mx-1 px-1 py-2 ">
+                  <Button icon={<FolderAddOutlined />} size="small" type="primary" ghost onClick={addFolder}>
+                    新建目录
+                  </Button>
+                  <Button
+                    icon={<FileAddOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    onClick={() => addFile()}>
+                    新建文件
+                  </Button>
+                  <Button
+                    icon={<EditOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    onClick={() => {
+                      record?.folder && editFolder()
+                      !record?.folder && addFile('update')
+                    }}
+                    disabled={!record}>
+                    编辑
+                  </Button>
+                  <Button
+                    icon={<DeleteOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    onClick={deleteFolderOrFile}
+                    disabled={!record}>
+                    删除
+                  </Button>
+                  <Button
+                    icon={<ArrowUpOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    disabled={!record?.moveable || record?.position === 'top'}
+                    onClick={() => moveWithOperation('up')}>
+                    上移
+                  </Button>
+                  <Button
+                    icon={<ArrowDownOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    disabled={!record?.moveable || record?.position === 'bottom'}
+                    onClick={() => moveWithOperation('down')}>
+                    下移
+                  </Button>
+                  <Button
+                    icon={<SelectOutlined />}
+                    size="small"
+                    type="primary"
+                    ghost
+                    disabled={!record}
+                    onClick={move}>
+                    移动至
+                  </Button>
                 </div>
-              </Dropdown>
-              <div className="children:mx-1 px-1 py-2 ml-5">
-                <Button icon={<FolderAddOutlined />} size="small" type="primary" ghost onClick={addFolder}>
-                  新建目录
-                </Button>
-                <Button
-                  icon={<FileAddOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  onClick={() => addFile()}>
-                  新建文件
-                </Button>
-                <Button
-                  icon={<EditOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  onClick={() => {
-                    record?.folder && editFolder()
-                    !record?.folder && addFile('update')
-                  }}
-                  disabled={!record}>
-                  编辑
-                </Button>
-                <Button
-                  icon={<DeleteOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  onClick={deleteFolderOrFile}
-                  disabled={!record}>
-                  删除
-                </Button>
-                <Button
-                  icon={<ArrowUpOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  disabled={!record?.moveable || record?.position === 'top'}
-                  onClick={() => moveWithOperation('up')}>
-                  上移
-                </Button>
-                <Button
-                  icon={<ArrowDownOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  disabled={!record?.moveable || record?.position === 'bottom'}
-                  onClick={() => moveWithOperation('down')}>
-                  下移
-                </Button>
-                <Button
-                  icon={<SelectOutlined />}
-                  size="small"
-                  type="primary"
-                  ghost
-                  disabled={!record}
-                  onClick={move}>
-                  移动至
-                </Button>
               </div>
-            </div>
-          )}
-          loading={loading}
-          columns={columns}
-          dataSource={list}
-          pagination={false}
-          size="small"
-          bordered
-          expandable={{ defaultExpandAllRows: true }}
-          onRow={record => ({
-            onClick: () => rowClick(record)
-          })}
-          rowClassName={row => (row.ID === record?.ID ? 'ant-table-row-selected' : '')}
-        />
+            )}
+            loading={loading}
+            columns={columns}
+            dataSource={list}
+            pagination={false}
+            size="small"
+            bordered
+            expandable={{ defaultExpandAllRows: true }}
+            onRow={record => ({
+              onClick: () => rowClick(record)
+            })}
+            rowClassName={row => (row.ID === record?.ID ? 'ant-table-row-selected' : '')}
+          />
+        </div>
       </div>
       {ModalDOM}
     </PageContainer>

src/pages/Business/Process/components/LeftMenu/index.tsx

@@ -1,6 +1,5 @@
 import { Menu } from 'antd'
 import React from 'react'
-import '@/pages/Schema/Base/components/LeftMenu/index.less'
 
 type LeftMenuProps = {
   title?: string

src/pages/Business/Process/hooks/useScripts.tsx

@@ -3,7 +3,7 @@ import consts from '@/utils/consts'
 import { useState } from 'react'
 import { useRequest } from 'ahooks'
 import { addExecutor, delExecutor, queryExecutorList, updateExecutor } from '@/services/api/business'
-import { ApprovalType, BusinessType, ExecutorSetType } from '@/enums/gc'
+import { ApprovalType, ExecutorSetType } from '@/enums/gc'
 import { QuestionCircleFilled } from '@ant-design/icons'
 import { Form, message, Tooltip } from 'antd'
 import ProForm, { ProFormDependency, ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-form'
@@ -40,12 +40,13 @@ type iState = {
   total: number
 }
 
-export default function useScripts(modal: ModalAction, business: BusinessType) {
+export default function useScripts(modal: ModalAction) {
   const [state, seState] = useState<iState>({
     items: [],
     total: 0
   })
-  const { refresh, loading } = useRequest(() => queryExecutorList({ businessType: BusinessType.BUDGET }), {
+  const { run: query, loading } = useRequest(queryExecutorList, {
+    manual: true,
     onSuccess: result => {
       seState(result.data)
     }
@@ -126,5 +127,5 @@ export default function useScripts(modal: ModalAction, business: BusinessType) {
       }
     })
   }
-  return { data: state, loading, addOrEdit, del }
+  return { query, data: state, loading, addOrEdit, del }
 }

src/pages/Business/Process/index.tsx

@@ -1,11 +1,11 @@
-import LeftMenu from './components/LeftMenu'
 import useModal from '@/components/Modal'
-import { useState } from 'react'
+import { startTransition, useState } from 'react'
 import { PageContainer } from '@ant-design/pro-layout'
 import { BusinessType, ExecutorSetType } from '@/enums/gc'
 import useScripts from './hooks/useScripts'
 import { Button } from 'antd'
 import ProTable, { ProColumnType } from '@ant-design/pro-table'
+import LeftMenu from '../RuleCode/components/LeftMenu'
 
 export const menuOptions = [{ label: '预算业务审批', value: BusinessType.BUDGET }]
 
@@ -15,10 +15,10 @@ type iProcessProps = {
 
 const Process = () => {
   const [state, setState] = useState<iProcessProps>({
-    activeKey: BusinessType.BUDGET
+    activeKey: null
   })
   const [modal, ModalDOM] = useModal()
-  const { data, loading, addOrEdit, del } = useScripts(modal, state.activeKey)
+  const { query, data, loading, addOrEdit, del } = useScripts(modal)
 
   const columns: ProColumnType<API.ExecutorItem>[] = [
     {
@@ -72,15 +72,18 @@ const Process = () => {
       )
     }
   ]
+
+  const handleMenuOnChange = (key: string) => {
+    const [subjectID, businessType] = key.split('_')
+    setState({ ...state, activeKey: key })
+    startTransition(() => {
+      query({ subjectID, businessType })
+    })
+  }
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
-        <LeftMenu
-          title="业务列表"
-          options={menuOptions}
-          value={state.activeKey}
-          onChange={key => setState({ ...state, activeKey: key })}
-        />
+        <LeftMenu title="业务列表" onChange={key => handleMenuOnChange(key)} />
         <div className="w-6/7 ml-8 bg-white">
           <ProTable
             toolbar={{

src/pages/Business/RuleCode/components/LeftMenu/index.tsx

@@ -1,7 +1,9 @@
 import { Menu } from 'antd'
 import React, { useState } from 'react'
-import type { MenuProps } from 'antd'
 import './index.less'
+import { BusinessType } from '@/enums/gc'
+import { querySubjectList } from '@/services/api/subject'
+import { useRequest } from '@umijs/max'
 
 type LeftMenuProps = {
   title?: string
@@ -10,44 +12,56 @@ type LeftMenuProps = {
   value: string
 }
 
-const itemsChild = [
-  { label: '预算审核', key: '_yuS' },
-  { label: '结算审核', key: '_jieS' },
-  { label: '决算审核', key: '_jueS' }
+export const businessOptions = [
+  { label: '预算审核', key: BusinessType.UNDO },
+  { label: '结算审核', key: BusinessType.DOING },
+  { label: '决算审核', key: BusinessType.DONE }
 ]
 
-const LeftMenu: React.FC<LeftMenuProps> = ({ title = '业务主体列表', options, onChange, value }) => {
-  const rootSubmenuKeys = options.map(item => item.ID)
-  const [openKeys, setOpenKeys] = useState([options?.[0]?.ID])
-  const onOpenChange: MenuProps['onOpenChange'] = keys => {
-    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1)
-    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
-      setOpenKeys(keys)
-    } else {
-      setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
-    }
-  }
+const LeftMenu: React.FC<LeftMenuProps> = ({ title = '业务主体列表', onChange }) => {
+  const [state, setState] = useState({
+    defaultOpenKeys: null,
+    subjectList: [],
+    /** 激活的业务主体id+业务类型 */
+    activeKey: null
+  })
   const handleOnSelect = ({ key }) => {
     onChange(key)
   }
+  useRequest(() => querySubjectList({ current: 1, pageSize: 214000 }), {
+    onSuccess: async result => {
+      const activeKey = `${result?.items[0]?.ID}_${businessOptions[0].key}`
+      setState({
+        ...state,
+        subjectList: result?.items,
+        activeKey,
+        defaultOpenKeys: [result?.items[0]?.ID]
+      })
+      handleOnSelect({ key: activeKey })
+    }
+  })
 
   return (
     <div
       className="w-216px rounded-20px menu-box"
       style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
       <div className="p-5 text-16px text-opacity-85 menu-title">{title}</div>
-      <Menu
-        defaultSelectedKeys={[value]}
-        openKeys={openKeys}
-        onOpenChange={onOpenChange}
-        onSelect={handleOnSelect}
-        mode="inline"
-        items={options.map(item => ({
-          label: item.name,
-          key: item.ID,
-          children: itemsChild.map(data => ({ label: data.label, key: item.ID + data.key }))
-        }))}
-      />
+      {state.activeKey && (
+        <Menu
+          defaultSelectedKeys={[state.activeKey]}
+          defaultOpenKeys={state.defaultOpenKeys}
+          onSelect={handleOnSelect}
+          mode="inline"
+          items={state.subjectList.map(item => ({
+            label: item.name,
+            key: item.ID,
+            children: businessOptions.map(business => ({
+              label: business.label,
+              key: `${item.ID}_${business.key}`
+            }))
+          }))}
+        />
+      )}
     </div>
   )
 }

src/pages/Business/RuleCode/index.tsx

@@ -1,12 +1,11 @@
 import { PageContainer } from '@ant-design/pro-layout'
 import { Button, Input, InputNumber, message, Select, Tabs, Tag } from 'antd'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { TweenOneGroup } from 'rc-tween-one'
 import { createUid, dayjsFormat } from '@/utils/util'
 import { queryRuleCodeList, updateRuleCode } from '@/services/api/business'
 import { useRequest } from '@umijs/max'
 import LeftMenu from './components/LeftMenu'
-import { querySubjectList } from '@/services/api/subject'
 
 const { TabPane } = Tabs
 
@@ -86,7 +85,6 @@ const RenderTags: React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
 const RulesCode = () => {
   const [state, setState] = useState({
     ruleTypeValue: RuleOptionEunm.APPROVALTYPE,
-    tabId: 'yuS',
     subjectList: '',
     activeKey: '',
     connector: '-',
@@ -95,7 +93,6 @@ const RulesCode = () => {
     autoCode: '00001',
     fixedText: ''
   })
-  console.log(state.activeKey)
 
   const [ruleArr, setRuleArr] = useState<ruleOption[]>([])
 
@@ -125,7 +122,7 @@ const RulesCode = () => {
     }
   }
 
-  const { run: tryRuleCode } = useRequest(params => queryRuleCodeList(params), {
+  const { run: tryQueryRuleCode } = useRequest(params => queryRuleCodeList(params), {
     manual: true,
     onSuccess: result => {
       setRuleArr(result?.rules || [])
@@ -137,22 +134,11 @@ const RulesCode = () => {
     manual: true,
     onSuccess: () => {
       message.success('规则更改成功')
-      tryRuleCode({ tab: state.tabId, subjectID: state.activeKey.split('_')[0] })
+      const [subject, tab] = state.activeKey.split('_')
+      tryQueryRuleCode({ tab, subjectID: subject })
     }
   })
 
-  const { run: trySubjectList } = useRequest(() => querySubjectList({ current: 1, pageSize: 214000 }), {
-    manual: true,
-    onSuccess: result => {
-      setState({ ...state, subjectList: result?.items })
-    }
-  })
-
-  // 只需首次加载执行一次
-  useEffect(() => {
-    trySubjectList()
-  }, [])
-
   // 添加规则
   const addRule = () => {
     let ruleValue = null
@@ -207,22 +193,14 @@ const RulesCode = () => {
     const [subject, tab] = key.split('_')
     setState({
       ...state,
-      activeKey: key,
-      tabId: tab
+      activeKey: key
     })
-    tryRuleCode({ tab: tab, subjectID: subject })
+    tryQueryRuleCode({ tab: tab, subjectID: subject })
   }
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
-        {state.subjectList.length ? (
-          <LeftMenu
-            title="业务主体列表"
-            options={state.subjectList}
-            value={state.activeKey}
-            onChange={key => handleMenuChange(key)}
-          />
-        ) : null}
+        <LeftMenu title="业务主体列表" onChange={key => handleMenuChange(key)} />
 
         <div className="w-6/7 ml-8 p-4 pt-1 bg-white">
           <Tabs

src/pages/Schema/Base/components/LeftMenu/index.less

@@ -1,3 +0,0 @@
-.menu-title {
-  box-shadow: inset 0 -1px 0 1px #f0f0f0;
-}

src/pages/Schema/Base/components/LeftMenu/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Menu } from 'antd'
-import './index.less'
 
 type LeftMenuProps = {
   title?: string

src/services/api/business.ts

@@ -2,8 +2,8 @@ import { BusinessType } from '@/enums/gc'
 import { request } from '@umijs/max'
 
 /** 清单模板 列表 */
-export async function queryProfileTemplateList() {
-  return request<API.ProfileTemplateItem[]>('/form/v1/profile/template/list')
+export async function queryProfileTemplateList(params: { businessType: BusinessType; subjectID: string }) {
+  return request<API.ProfileTemplateItem[]>('/form/v1/profile/template/list', { params })
 }
 
 /** 清单模板 创建目录 */
@@ -73,7 +73,9 @@ export async function updateRuleCode(params: API.RuleCodeUpdateParams) {
 }
 
 /** 获取执行者列表 */
-export async function queryExecutorList(params: { businessType: BusinessType }) {
+export async function queryExecutorList(params: { subjectID: string; businessType: BusinessType }) {
+  console.log(params)
+
   return request('/executor/list', {
     params
   })