feat: 流程用户设置相关

src/pages/Business/ProcessUser/index.tsx

@@ -1,11 +1,33 @@
 import { PageContainer } from '@ant-design/pro-layout'
 import { useDispatch, connect } from 'umi'
-import { message, Select, TreeSelect } from 'antd'
+import { message } from 'antd'
 import React, { useState, useEffect } from 'react'
 import LeftMenu from './components/LeftMenu'
+import { createForm, onFieldReact } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+  FormItem,
+  Input,
+  Switch,
+  Select,
+  FormGrid,
+  FormLayout,
+  Form,
+  Radio,
+  Checkbox,
+  NumberPicker,
+  Password,
+  DatePicker,
+  TimePicker,
+  TreeSelect,
+  FormButtonGroup,
+  Submit
+} from '@formily/antd'
+import { schema } from './schema'
 import { queryOrganizationalMembersList } from '@/services/api/institution'
 import { useRequest } from '@umijs/max'
-import { saveApprovalAccount } from '@/services/api/schema'
+import consts from '@/utils/consts'
+import { queryApprovalAccountDetail, saveApprovalAccount } from '@/services/api/schema'
 
 export enum LeftMenuEnum {
   BUDGET = '1'
@@ -23,8 +45,8 @@ export enum InstitutionEnum {
 
 type ProcessUserProps = {
   name: Nullable<string>
-  institutionID: Nullable<string>
   organizationListNew: API.OrganizationalStructureListItem[]
+  approvalAccountDetail: API.ApprovalAccountDetail[]
 }
 
 const ProcessUser = props => {
@@ -33,15 +55,15 @@ const ProcessUser = props => {
   const [state, setState] = useState<ProcessUserProps>({
     activeKey: LeftMenuEnum.BUDGET,
     name: null,
-    institutionID: null,
-    organizationListNew: []
+    organizationListNew: [],
+    approvalAccountDetail: []
   })
-  console.log(state.institutionID)
+  console.log(state.approvalAccountDetail.data)
 
-  const { run: tryOrganizationList } = useRequest(queryOrganizationalMembersList, {
+  const { run: tryApprovalAccountDetail } = useRequest(queryApprovalAccountDetail, {
     manual: true,
     onSuccess: result => {
-      setState({ ...state, organizationListNew: result })
+      setState({ ...state, approvalAccountDetail: result })
     }
   })
 
@@ -55,13 +77,6 @@ const ProcessUser = props => {
     }
   )
 
-  const handleInstitutionSelect = value => {
-    // console.log(value)
-    // debugger
-    setState({ ...state, institutionID: value })
-    // tryOrganizationList({ institutionID: value })
-  }
-
   const renderTreeNodes = data =>
     data.map(item => {
       const newItem = { ...item }
@@ -73,24 +88,189 @@ const ProcessUser = props => {
       return newItem
     })
 
-  const handleApprovalonChange = async value => {
-    if (value) {
-      await trysaveApprovalAccount({
-        accountIDs: value,
-        name: state.name,
-        institutionID: state.institutionID
-      })
-    }
-  }
-
   useEffect(() => {
     if (!institutionList.length) {
       dispatch({
         type: 'business/queryInstitution'
       })
-      // tryOrganizationList(state.institutionID)
     }
+    tryApprovalAccountDetail()
   }, [])
+
+  const AA = state.approvalAccountDetail.data
+    ?.filter(item => item.name === 'zxLeader')
+    .map(item => item.accountIDs)
+  console.log(AA)
+
+  const form = createForm({
+    initialValues: {
+      receiver: {
+        receiverInstitutionID: state.approvalAccountDetail.data
+          ?.filter(item => item.name === 'receiver')
+          .map(item => item.institutionID)
+          .toString()
+        // receiverAccountIDs: state.approvalAccountDetail.data
+        //   ?.filter(item => item.name === 'receiver')
+        //   .map(item => item.accountIDs)
+      },
+      fgLeader: {
+        fgLeaderInstitutionID: state.approvalAccountDetail.data
+          ?.filter(item => item.name === 'fgLeader')
+          .map(item => item.institutionID)
+          .toString()
+        // fgLeaderAccountIDs: state.approvalAccountDetail.data
+        //   ?.filter(item => item.name === 'fgLeader')
+        //   .map(item => item.accountIDs)
+      },
+      zxLeader: {
+        zxLeaderInstitutionID: state.approvalAccountDetail.data
+          ?.filter(item => item.name === 'zxLeader')
+          .map(item => item.institutionID)
+          .toString()
+        // zxLeaderAccountIDs: state.approvalAccountDetail.data
+        //   ?.filter(item => item.name === 'zxLeader')
+        //   .map(item => item.accountIDs)
+      },
+      post: {
+        postInstitutionID: state.approvalAccountDetail.data
+          ?.filter(item => item.name === 'post')
+          .map(item => item.institutionID)
+          .toString()
+        // postAccountIDs: state.approvalAccountDetail.data
+        //   ?.filter(item => item.name === 'post')
+        //   .map(item => item.accountIDs)
+      },
+      archive: {
+        archiveInstitutionID: state.approvalAccountDetail.data
+          ?.filter(item => item.name === 'archive')
+          .map(item => item.institutionID)
+          .toString()
+        // archiveAccountIDs: state.approvalAccountDetail.data
+        //   ?.filter(item => item.name === 'archive')
+        //   .map(item => item.accountIDs)
+      }
+    },
+    effects() {
+      onFieldReact('receiver.receiverInstitutionID', async field => {
+        if (!field.dataSource?.length) {
+          // 将企事业列表直接赋予当前字段
+          field.dataSource = institutionList?.items?.map(item => ({
+            value: item.ID,
+            label: item.name
+          }))
+          return
+        }
+        // 收件人企事业id
+        const institutionID = field.value
+        if (institutionID) {
+          const { code = -1, data } = await queryOrganizationalMembersList({ institutionID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            form.setFieldState('receiver.receiverAccountIDs', field => {
+              field.dataSource = renderTreeNodes(data).filter(item => item.children?.length)
+            })
+          }
+        }
+      })
+      onFieldReact('fgLeader.fgLeaderInstitutionID', async field => {
+        if (!field.dataSource?.length) {
+          field.dataSource = institutionList?.items?.map(item => ({
+            value: item.ID,
+            label: item.name
+          }))
+          return
+        }
+        const institutionID = field.value
+        if (institutionID) {
+          const { code = -1, data } = await queryOrganizationalMembersList({ institutionID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            form.setFieldState('fgLeader.fgLeaderAccountIDs', field => {
+              field.dataSource = renderTreeNodes(data).filter(item => item.children?.length)
+            })
+          }
+        }
+      })
+      onFieldReact('zxLeader.zxLeaderInstitutionID', async field => {
+        if (!field.dataSource?.length) {
+          field.dataSource = institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))
+          return
+        }
+        const institutionID = field.value
+        if (institutionID) {
+          const { code = -1, data } = await queryOrganizationalMembersList({ institutionID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            form.setFieldState('zxLeader.zxLeaderAccountIDs', field => {
+              field.dataSource = renderTreeNodes(data).filter(item => item.children?.length)
+            })
+          }
+        }
+      })
+      onFieldReact('post.postInstitutionID', async field => {
+        if (!field.dataSource?.length) {
+          field.dataSource = institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))
+          return
+        }
+        const institutionID = field.value
+        if (institutionID) {
+          const { code = -1, data } = await queryOrganizationalMembersList({ institutionID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            form.setFieldState('post.postAccountIDs', field => {
+              field.dataSource = renderTreeNodes(data).filter(item => item.children?.length)
+            })
+          }
+        }
+      })
+      onFieldReact('archive.archiveInstitutionID', async field => {
+        if (!field.dataSource?.length) {
+          field.dataSource = institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))
+          return
+        }
+        const institutionID = field.value
+        if (institutionID) {
+          const { code = -1, data } = await queryOrganizationalMembersList({ institutionID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            form.setFieldState('archive.archiveAccountIDs', field => {
+              field.dataSource = renderTreeNodes(data).filter(item => item.children?.length)
+            })
+          }
+        }
+      })
+    }
+  })
+
+  const SchemaField = createSchemaField({
+    components: {
+      FormLayout,
+      FormItem,
+      FormGrid,
+      Input,
+      Switch,
+      Select,
+      Radio,
+      Checkbox,
+      NumberPicker,
+      Password,
+      DatePicker,
+      TimePicker,
+      TreeSelect
+    }
+  })
+
+  const onFinish = values => {
+    console.log(values)
+
+    // trysaveApprovalAccount({
+    //   archiveAccountIDs: values.archive.archiveAccountIDs,
+    //   archiveInstitutionID: values.archive.archiveInstitutionID,
+    //   fgLeaderAccountIDs: values.fgLeader.fgLeaderAccountIDs,
+    //   fgLeaderInstitutionID: values.fgLeader.fgLeaderInstitutionID,
+    //   postAccountIDs: values.post.postAccountIDs,
+    //   postInstitutionID: values.post.postInstitutionID,
+    //   receiverAccountIDs: values.receiver.receiverAccountIDs,
+    //   receiverInstitutionID: values.receiver.receiverInstitutionID,
+    //   zxLeaderAccountIDs: values.zxLeader.zxLeaderAccountIDs,
+    //   zxLeaderInstitutionID: values.zxLeader.zxLeaderInstitutionID
+    // })
+  }
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
@@ -103,137 +283,13 @@ const ProcessUser = props => {
         <div className="w-6/7 ml-8 bg-white p-6 rounded-20px">
           <div className="flex flex-row mb-5 w-full text-xl">流程用户设置</div>
           <div className="max-w-800px">
-            <div className="flex justify-start items-center mb-4">
-              <div className="w-20">收件员：</div>
-              <div>
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  // defaultValue={{ value: '56b9fc0f-02d8-446e-be13-ad705be31d11' }}
-                  onSelect={handleInstitutionSelect}
-                  onClick={() => {
-                    setState({ ...state, name: InstitutionEnum.RECEIVER })
-                  }}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-              </div>
-              <div className="ml-2">
-                <TreeSelect
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  treeDefaultExpandAll
-                  treeNodeFilterProp="label"
-                  multiple
-                  maxTagCount="responsive"
-                  // defaultValue={[{ title: 'ceshixinjian1', value: '14db339b-3675-4a47-a23d-ecacbc9e0385' }]}
-                  onChange={handleApprovalonChange}
-                  treeData={renderTreeNodes(state.organizationListNew).filter(item => item.children?.length)}
-                />
-              </div>
-            </div>
-            <div className="flex justify-start items-center mb-4">
-              <div className="w-20">分管领导：</div>
-              <div>
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  onChange={handleInstitutionSelect}
-                  onClick={() => {
-                    setState({ ...state, name: InstitutionEnum.FGLEADER })
-                  }}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-              </div>
-              <div className="ml-2">
-                <TreeSelect
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  treeDefaultExpandAll
-                  treeNodeFilterProp="label"
-                  multiple
-                  maxTagCount="responsive"
-                  onChange={handleApprovalonChange}
-                  treeData={renderTreeNodes(state.organizationListNew).filter(item => item.children?.length)}
-                />
-              </div>
-            </div>
-            <div className="flex justify-start items-center mb-4">
-              <div className="w-20">中心领导：</div>
-              <div>
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  onChange={handleInstitutionSelect}
-                  onClick={() => {
-                    setState({ ...state, name: InstitutionEnum.ZXLEADER })
-                  }}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-              </div>
-              <div className="ml-2">
-                <TreeSelect
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  treeDefaultExpandAll
-                  treeNodeFilterProp="label"
-                  multiple
-                  maxTagCount="responsive"
-                  onChange={handleApprovalonChange}
-                  treeData={renderTreeNodes(state.organizationListNew).filter(item => item.children?.length)}
-                />
-              </div>
-            </div>
-            <div className="flex justify-start items-center mb-4">
-              <div className="w-20">发文：</div>
-              <div>
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  onChange={handleInstitutionSelect}
-                  onClick={() => {
-                    setState({ ...state, name: InstitutionEnum.POST })
-                  }}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-              </div>
-              <div className="ml-2">
-                <TreeSelect
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  treeDefaultExpandAll
-                  treeNodeFilterProp="label"
-                  multiple
-                  maxTagCount="responsive"
-                  onChange={handleApprovalonChange}
-                  treeData={renderTreeNodes(state.organizationListNew).filter(item => item.children?.length)}
-                />
-              </div>
-            </div>
-            <div className="flex justify-start items-center mb-4">
-              <div className="w-20">归档：</div>
-              <div>
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  onChange={handleInstitutionSelect}
-                  onClick={() => {
-                    setState({ ...state, name: InstitutionEnum.ARCHIVE })
-                  }}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-              </div>
-              <div className="ml-2">
-                <TreeSelect
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  treeDefaultExpandAll
-                  treeNodeFilterProp="label"
-                  multiple
-                  maxTagCount="responsive"
-                  onChange={handleApprovalonChange}
-                  treeData={renderTreeNodes(state.organizationListNew).filter(item => item.children?.length)}
-                />
-              </div>
+            <div className="w-600px">
+              <Form form={form} labelCol={12}>
+                <SchemaField schema={schema} />
+                <FormButtonGroup>
+                  <Submit onSubmit={onFinish}>提交</Submit>
+                </FormButtonGroup>
+              </Form>
             </div>
           </div>
         </div>

src/pages/Business/ProcessUser/schema.ts

@@ -0,0 +1,269 @@
+export const schema = {
+  type: 'object',
+  properties: {
+    receiver: {
+      type: 'object',
+      'x-validator': [],
+      name: 'receiver',
+      'x-designable-id': 'uzrnxyxj8l2',
+      'x-index': 0,
+      properties: {
+        j6t9tp83i49: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-validator': [],
+          'x-component-props': {
+            minColumns: 2
+          },
+          'x-designable-id': 'j6t9tp83i49',
+          'x-index': 0,
+          properties: {
+            receiverInstitutionID: {
+              title: '收件员',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-validator': [],
+              'x-component-props': {},
+              'x-decorator-props': {},
+              name: 'receiverInstitutionID',
+              required: true,
+              'x-designable-id': 'ggfc3yhph1q',
+              'x-index': 0
+            },
+            receiverAccountIDs: {
+              title: '',
+              'x-decorator': 'FormItem',
+              'x-component': 'TreeSelect',
+              'x-validator': [],
+              'x-component-props': {
+                treeCheckable: true,
+                treeDefaultExpandAll: true,
+                showSearch: true,
+                showArrow: true,
+                labelInValue: false,
+                autoFocus: false,
+                allowClear: true,
+                maxTagCount: 2
+              },
+              'x-decorator-props': {},
+              required: true,
+              name: 'receiverAccountIDs',
+              'x-designable-id': 'h3lybqrqozk',
+              'x-index': 1
+            }
+          }
+        }
+      }
+    },
+    fgLeader: {
+      type: 'object',
+      'x-validator': [],
+      name: 'fgLeader',
+      'x-designable-id': 'h2winr4c2sl',
+      'x-index': 1,
+      properties: {
+        ctp8nw51qvl: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-validator': [],
+          'x-component-props': {
+            minColumns: 2
+          },
+          'x-designable-id': 'ctp8nw51qvl',
+          'x-index': 0,
+          properties: {
+            fgLeaderInstitutionID: {
+              title: '分管领导',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-validator': [],
+              'x-component-props': {},
+              'x-decorator-props': {},
+              name: 'fgLeaderInstitutionID',
+              required: true,
+              'x-designable-id': 'lv362lk8zoh',
+              'x-index': 0
+            },
+            fgLeaderAccountIDs: {
+              title: '',
+              'x-decorator': 'FormItem',
+              'x-component': 'TreeSelect',
+              'x-validator': [],
+              'x-component-props': {
+                allowClear: true,
+                showArrow: true,
+                showSearch: true,
+                treeDefaultExpandAll: true,
+                treeCheckable: true,
+                maxTagCount: 2
+              },
+              'x-decorator-props': {},
+              name: 'fgLeaderAccountIDs',
+              required: true,
+              'x-designable-id': 'kosbw33j1wy',
+              'x-index': 1
+            }
+          }
+        }
+      }
+    },
+    zxLeader: {
+      type: 'object',
+      'x-validator': [],
+      name: 'zxLeader',
+      'x-designable-id': 'ls0xboaj8sc',
+      'x-index': 2,
+      properties: {
+        v0qrosfsw3p: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-validator': [],
+          'x-component-props': {
+            minColumns: 2
+          },
+          'x-designable-id': 'v0qrosfsw3p',
+          'x-index': 0,
+          properties: {
+            zxLeaderInstitutionID: {
+              title: '中心领导',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-validator': [],
+              'x-component-props': {},
+              'x-decorator-props': {},
+              name: 'zxLeaderInstitutionID',
+              'x-designable-id': 'p31hkjixl16',
+              'x-index': 0,
+              required: true
+            },
+            zxLeaderAccountIDs: {
+              title: '',
+              'x-decorator': 'FormItem',
+              'x-component': 'TreeSelect',
+              'x-validator': [],
+              'x-component-props': {
+                allowClear: true,
+                labelInValue: false,
+                showArrow: true,
+                showSearch: true,
+                treeCheckable: true,
+                treeDefaultExpandAll: true,
+                maxTagCount: 2
+              },
+              'x-decorator-props': {},
+              name: 'zxLeaderAccounts',
+              required: true,
+              'x-designable-id': 'vbu2agjbkia',
+              'x-index': 1
+            }
+          }
+        }
+      }
+    },
+    post: {
+      type: 'object',
+      'x-validator': [],
+      name: 'post',
+      'x-designable-id': '7jrdrzcwl4z',
+      'x-index': 3,
+      properties: {
+        nxombc1rrjd: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-validator': [],
+          'x-component-props': {
+            minColumns: 2
+          },
+          'x-designable-id': 'nxombc1rrjd',
+          'x-index': 0,
+          properties: {
+            postInstitutionID: {
+              title: '发文',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-validator': [],
+              'x-component-props': {},
+              'x-decorator-props': {},
+              name: 'postInstitutionID',
+              'x-designable-id': '1sohvz4sbw5',
+              'x-index': 0,
+              required: true
+            },
+            postAccountIDs: {
+              title: '',
+              'x-decorator': 'FormItem',
+              'x-component': 'TreeSelect',
+              'x-validator': [],
+              'x-component-props': {
+                labelInValue: false,
+                showArrow: true,
+                showSearch: true,
+                treeCheckable: true,
+                treeDefaultExpandAll: true,
+                maxTagCount: 2
+              },
+              'x-decorator-props': {},
+              name: 'postAccountIDs',
+              required: true,
+              'x-designable-id': 'lw5p0zkp266',
+              'x-index': 1
+            }
+          }
+        }
+      }
+    },
+    archive: {
+      type: 'object',
+      'x-validator': [],
+      name: 'archive',
+      'x-designable-id': '8ou2kur3tku',
+      'x-index': 4,
+      properties: {
+        archive: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-validator': [],
+          'x-component-props': {
+            minColumns: 2
+          },
+          name: 'archive',
+          'x-designable-id': 'fle7qp5yshx',
+          'x-index': 0,
+          properties: {
+            archiveInstitutionID: {
+              title: '归档',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-validator': [],
+              'x-component-props': {},
+              'x-decorator-props': {},
+              name: 'archiveInstitutionID',
+              'x-designable-id': 'gfbvoofphoo',
+              'x-index': 0,
+              required: true
+            },
+            archiveAccountIDs: {
+              title: '',
+              'x-decorator': 'FormItem',
+              'x-component': 'TreeSelect',
+              'x-validator': [],
+              'x-component-props': {
+                showArrow: true,
+                showSearch: true,
+                treeCheckable: true,
+                treeDefaultExpandAll: true,
+                maxTagCount: 2
+              },
+              'x-decorator-props': {},
+              required: true,
+              name: 'archiveAccountIDs',
+              'x-designable-id': 'ynu0ga6cip0',
+              'x-index': 1
+            }
+          }
+        }
+      }
+    }
+  },
+  'x-designable-id': 'khexddrjzg0'
+}

src/pages/Business/model.ts

@@ -1,13 +1,12 @@
 // import { getProjectTypeList } from '@/services/api/project'
 // import consts from '@/utils/consts'
-import { queryInstitutionList, queryOrganizationalMembersList } from '@/services/api/institution'
+import { queryInstitutionList } from '@/services/api/institution'
 import consts from '@/utils/consts'
 import type { Effect, Reducer } from '@umijs/max'
 
 export interface BusinessModelState {
   dataID: string
   institutionList: API.InstitutionList[]
-  organizationalMembersList: API.OrganizationalStructureListItem[]
 }
 
 export interface BusinessModelType {
@@ -15,7 +14,6 @@ export interface BusinessModelType {
   state: BusinessModelState
   effects: {
     queryInstitution: Effect
-    queryOrganizationalMembers: Effect
   }
   reducers: {
     save: Reducer<BusinessModelState>
@@ -27,8 +25,7 @@ export interface BusinessModelType {
 const BusinessModel: BusinessModelType = {
   namespace: 'business',
   state: {
-    institutionList: [],
-    organizationalMembersList: []
+    institutionList: []
   },
   effects: {
     *queryInstitution({ payload }, { call, put }) {
@@ -41,17 +38,6 @@ const BusinessModel: BusinessModelType = {
           }
         })
       }
-    },
-    *queryOrganizationalMembers({ payload }, { call, put }) {
-      const response = yield call(queryOrganizationalMembersList, payload)
-      if (response?.code === consts.RET_CODE.SUCCESS) {
-        yield put({
-          type: 'save',
-          payload: {
-            organizationalMembersList: response.data
-          }
-        })
-      }
     }
   },
   reducers: {

src/services/api/schema.ts

@@ -58,3 +58,8 @@ export async function saveApprovalAccount(params: API.SaveApprovalParams) {
     data: params
   })
 }
+
+/** 获得流程审批用户-详情 */
+export async function queryApprovalAccountDetail() {
+  return request('/form/v1/approval/account/detail')
+}