feat: 流程用户设置不完善版

src/pages/Business/ProcessUser/index.tsx

@@ -1,8 +1,10 @@
 import { PageContainer } from '@ant-design/pro-layout'
 import { useDispatch, connect } from 'umi'
-import { Form, Select } from 'antd'
+import { Button, Form, Select, TreeSelect } from 'antd'
 import React, { useState, useEffect } from 'react'
 import LeftMenu from './components/LeftMenu'
+import { queryOrganizationalMembersList } from '@/services/api/institution'
+import { useRequest } from '@umijs/max'
 
 export enum LeftMenuEnum {
   BUDGET = '1'
@@ -11,25 +13,24 @@ export enum LeftMenuEnum {
 export const menuOptions = [{ label: '预算业务审批', value: LeftMenuEnum.BUDGET }]
 
 const ProcessUser = props => {
-  const { institutionList, organizationList } = props
-  console.log(organizationList)
-
+  const { institutionList } = props
   const [form] = Form.useForm()
   const dispatch = useDispatch()
   const [state, setState] = useState({
     activeKey: LeftMenuEnum.BUDGET,
-    institutionID: null
+    organizationListNew: []
   })
+  console.log(state.organizationListNew)
 
-  const handleInstitutionSelect = ID => {
-    setState({ ...state, institutionID: ID })
-  }
+  const { run: tryOrganizationList } = useRequest(queryOrganizationalMembersList, {
+    manual: true,
+    onSuccess: result => {
+      setState({ ...state, organizationListNew: result })
+    }
+  })
 
-  const handleOrganizationList = () => {
-    dispatch({
-      type: 'business/queryOrganizationalMembers',
-      payload: { institutionID: state.institutionID }
-    })
+  const handleInstitutionChange = ID => {
+    tryOrganizationList({ institutionID: ID })
   }
 
   useEffect(() => {
@@ -53,68 +54,38 @@ const ProcessUser = props => {
             <Button type="primary">编辑</Button>
           </div> */}
           <div className="max-w-800px">
-            <Form
-              labelCol={{ span: 4 }}
-              wrapperCol={{ span: 20 }}
-              layout="horizontal"
-              form={form}
-              onFinish={async values => {
-                console.log(values)
-              }}>
-              <Form.Item label="收件员：">
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择单位"
-                  onChange={handleInstitutionSelect}
-                  options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
-                />
-                <Select
-                  style={{ width: 250 }}
-                  placeholder="请选择用户"
-                  onChange={handleOrganizationList}
-                  options={organizationList?.items?.map(item => ({ value: item.name }))}
-                />
-              </Form.Item>
-              {/* <Form.Item label="分管领导：" name="fgLeader">
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo">Demo</Select.Option>
-                </Select>
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo1">dasdasd</Select.Option>
-                </Select>
-              </Form.Item>
-              <Form.Item label="分管领导：" name="fgLeader">
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo">Demo</Select.Option>
-                </Select>
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo1">dasdasd</Select.Option>
-                </Select>
-              </Form.Item>
-              <Form.Item label="中心领导：" name="zxLeader">
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo">Demo</Select.Option>
-                </Select>
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo1">dasdasd</Select.Option>
-                </Select>
+            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout="horizontal" form={form}>
+              <Form.Item label="收件员">
+                <Form.Item name="aa" style={{ display: 'inline-block', margin: '0' }}>
+                  <Select
+                    style={{ width: 250 }}
+                    placeholder="请选择单位"
+                    onChange={handleInstitutionChange}
+                    options={institutionList?.items?.map(item => ({ value: item.ID, label: item.name }))}
+                  />
+                </Form.Item>
+                <Form.Item name="bb" style={{ display: 'inline-block', margin: '0 8px' }}>
+                  <TreeSelect
+                    style={{ width: 250 }}
+                    placeholder="请选择用户"
+                    treeDefaultExpandAll
+                    treeNodeFilterProp="label"
+                    multiple
+                    treeData={state.organizationListNew}
+                  />
+                </Form.Item>
               </Form.Item>
-              <Form.Item label="发文：" name="post">
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo">Demo</Select.Option>
-                </Select>
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo1">dasdasd</Select.Option>
-                </Select>
+              <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    form.validateFields().then(async values => {
+                      await console.log(values)
+                    })
+                  }}>
+                  提交
+                </Button>
               </Form.Item>
-              <Form.Item label="归档：" name="archive">
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo">Demo</Select.Option>
-                </Select>
-                <Select style={{ width: 250 }}>
-                  <Select.Option value="demo1">dasdasd</Select.Option>
-                </Select>
-              </Form.Item> */}
             </Form>
           </div>
         </div>