feat: 单位下人员管理详情

src/pages/Institutions/Company/Detail/components/Organization.tsx

@@ -166,7 +166,6 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
           columns={columns}
           dataSource={state.organizationList}
           defaultExpandAllRows={true}
-          indentSize={25}
           search={false}
           pagination={false}
           toolbar={{

src/pages/Institutions/Company/Detail/components/Staff.tsx

@@ -1,21 +1,44 @@
 import ProTable from '@ant-design/pro-table'
-import React, { useState, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Button } from 'antd'
 import consts from '@/utils/consts'
-import { history } from 'umi'
+// import { history } from 'umi'
+import { connect } from 'umi'
 import { queryAcountList } from '@/services/api/institution'
+import StaffDrawer, { ModalType } from '@/pages/Institutions/Staff/components/StaffDrawer'
+import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
+import { BaseMenuEnum } from '@/pages/Schema/Base'
+import type { InstitutionsModelState } from '@/pages/Institutions/model'
 
 type ListProps = ConnectProps & {
   accountType: API.AccountType[]
 }
-const Staff: React.FC<ListProps> = ({ dataID }) => {
+const Staff: React.FC<ListProps> = ({ dataID, dispatch, accountTypeList }) => {
   const tRef = useRef<ActionType>(null)
+  // console.log(accountTypeList)
+
+  useEffect(() => {
+    if (!accountTypeList.length) {
+      dispatch({
+        type: 'institutions/queryAccountTypeList'
+      })
+    }
+    dispatch({
+      type: 'schemaBase/querySchema',
+      payload: {
+        columnType: BaseMenuEnum.STAFF
+      }
+    })
+  }, [])
   const [state, setState] = useState({
     params: {
       search: null,
       accountType: 1,
       dataID
-    }
+    },
+    visible: false,
+    currentModalType: ModalType.ADD,
+    defaultFormData: null
   })
   const columns = [
     {
@@ -28,7 +51,8 @@ const Staff: React.FC<ListProps> = ({ dataID }) => {
     },
     {
       dataIndex: 'institution',
-      title: '组织架构'
+      title: '组织架构',
+      render: (_, record) => record.institution.name
     },
     {
       dataIndex: 'phone',
@@ -41,6 +65,31 @@ const Staff: React.FC<ListProps> = ({ dataID }) => {
     {
       dataIndex: 'created',
       title: '创建人'
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      render: (_, record) => (
+        <div className="divide-x divide-bg-gray-400 flex flex-row">
+          <div
+            className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
+            onClick={() => {
+              setState({
+                ...state,
+                visible: true,
+                currentModalType: ModalType.UPDATE,
+                defaultFormData: {
+                  ...record,
+                  institutionID: record.ID,
+                  accountType: record.accountType,
+                  dataID: record.institution.ID
+                }
+              })
+            }}>
+            编辑
+          </div>
+        </div>
+      )
     }
   ]
   return (
@@ -70,15 +119,37 @@ const Staff: React.FC<ListProps> = ({ dataID }) => {
           actions: [
             <Button
               onClick={() => {
-                history.push('/institutions/company/add')
+                setState({ ...state, visible: true, currentModalType: ModalType.ADD })
               }}>
               添加人员
             </Button>
           ]
         }}
       />
+      <StaffDrawer
+        visible={state.visible}
+        setVisible={(visible: boolean) => setState({ ...state, visible })}
+        type={state.currentModalType}
+        defaultFormData={state.defaultFormData}
+        accountTypeList={accountTypeList}
+        reloadTable={() => tRef.current?.reload()}
+      />
     </div>
   )
 }
 
-export default Staff
+export default connect(
+  ({
+    institutions,
+    schemaBase
+  }: {
+    institutions: InstitutionsModelState
+    schemaBase: SchemaBaseModelState
+  }) => ({
+    accountTypeList: institutions.accountType.map(item => ({
+      label: item.name,
+      value: item.value
+    })),
+    schema: schemaBase.base[BaseMenuEnum.STAFF]?.schema
+  })
+)(Staff)

src/pages/Institutions/Staff/components/StaffDrawer.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react'
 import { message, Button, Drawer } from 'antd'
 import { connect, useRequest } from 'umi'
-import consts from '@/utils/consts'
-import { addAccount, queryInstitutionList, updateAccount } from '@/services/api/institution'
-import DebounceSelect from './DebounceSelect'
+// import consts from '@/utils/consts'
+import { addAccount, updateAccount } from '@/services/api/institution'
+// import DebounceSelect from './DebounceSelect'
 import { delay } from '@/utils/util'
 import FormRender, { useForm } from 'form-render'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import type { ConnectProps } from 'umi'
-import type { InstitutionsModelState } from '../model'
+import type { InstitutionsModelState } from '../../model'
 
 export enum ModalType {
   ADD = 0,
@@ -20,8 +20,14 @@ type StaffModalProps = ConnectProps & {
   visible: boolean
   setVisible: (visible: boolean) => void
   type: ModalType
-  defaultFormData?: API.AccountListItem
+  defaultFormData?: {
+    ID: string
+    name: string
+    accountType: string
+    dataID: string
+  }
   accountTypeList: API.AccountType
+  organizationList: API.OrganizationalStructureListItem
   reloadTable: () => void
   schema?: Record<string, any> | null
 }
@@ -34,6 +40,7 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
   type,
   defaultFormData,
   accountTypeList,
+  // organizationList,
   // pTypeList,
   reloadTable
 }) => {
@@ -43,7 +50,7 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
       dispatch({
         type: 'schemaBase/querySchema',
         payload: {
-          columnType: BaseMenuEnum.PROJECT
+          columnType: BaseMenuEnum.STAFF
         }
       })
     }
@@ -69,12 +76,14 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
   const onMount = () => {
     form.setValues({ ...defaultFormData })
     delay(80).then(() => {
-      // console.log(pTypeList)
-
       form.setSchemaByPath('accountType', {
         enum: accountTypeList.map(item => item.value),
         enumNames: accountTypeList.map(item => item.label)
       })
+      // form.setSchemaByPath('institution', {
+      //   enum: organizationList.map(item => item.value),
+      //   enumNames: organizationList.map(item => item.label)
+      // })
     })
   }
 
@@ -110,18 +119,18 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
       message.error(error)
     }
   }
-  const queryInstitutionOptions = async search => {
-    const { code = -1, data = {} } = await queryInstitutionList({
-      search,
-      current: 1,
-      pageSize: 100
-    })
-    if (code === consts.RET_CODE.SUCCESS) {
-      return data.items.map(item => ({ label: item.name, value: item.ID }))
-    }
-    return []
-  }
-  const { institution } = defaultFormData || {}
+  // const queryInstitutionOptions = async search => {
+  //   const { code = -1, data = {} } = await queryInstitutionList({
+  //     search,
+  //     current: 1,
+  //     pageSize: 100
+  //   })
+  //   if (code === consts.RET_CODE.SUCCESS) {
+  //     return data.items.map(item => ({ label: item.name, value: item.ID }))
+  //   }
+  //   return []
+  // }
+  // const { institution } = defaultFormData || {}
   return (
     <Drawer
       width="50vw"
@@ -149,7 +158,14 @@ export default connect(
     institutions: InstitutionsModelState
     schemaBase: SchemaBaseModelState
   }) => ({
-    accountTypeList: institutions.accountType.map(item => ({ label: item.name, value: item.ID })),
+    accountTypeList: institutions.accountType.map(item => ({
+      label: item.name,
+      value: item.value
+    })),
+    // organizationList: institutions.organizationType.map(item => ({
+    //   label: item.name,
+    //   value: item.dataID
+    // })),
     schema: schemaBase.base[BaseMenuEnum.STAFF]?.schema
   })
 )(StaffDrawer)

src/pages/Institutions/Staff/components/StaffModal.tsx

@@ -1,154 +0,0 @@
-import { useRequest } from 'umi'
-import { useRef, useEffect } from 'react'
-import ProForm, { ProFormSelect, ProFormText } from '@ant-design/pro-form'
-import { Col, message, Modal, Row, Form } from 'antd'
-import type { FormInstance } from 'antd'
-import { addAccount, queryInstitutionList, updateAccount } from '@/services/api/institution'
-import DebounceSelect from './DebounceSelect'
-import consts from '@/utils/consts'
-
-export enum ModalType {
-  ADD = 0,
-  UPDATE = 1
-}
-
-type StaffModalProps = {
-  visible: boolean
-  setVisible: (visible: boolean) => void
-  type: ModalType
-  defaultFormData?: API.AccountListItem
-  accountType: API.AccountType
-  reloadTable: () => void
-}
-const StaffModal: React.FC<StaffModalProps> = ({
-  visible,
-  setVisible,
-  type,
-  defaultFormData,
-  accountType,
-  // pTypeList,
-  reloadTable
-}) => {
-  const layout = {
-    layout: 'horizontal',
-    labelCol: { flex: '100px' }
-  }
-  const ref = useRef<FormInstance>(null)
-
-  useEffect(() => {
-    defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
-  }, [defaultFormData])
-
-  const { run: tryUpdateAccount } = useRequest(updateAccount, {
-    manual: true,
-    onSuccess: () => {
-      message.success('更新成功')
-    }
-  })
-
-  const { run: tryAddAccount } = useRequest(addAccount, {
-    manual: true,
-    onSuccess: () => {
-      message.success('创建成功')
-    }
-  })
-
-  const handleOnFinish = () => {
-    ref.current?.validateFields().then(async values => {
-      try {
-        // 执行表单提交
-        if (type === ModalType.ADD) {
-          await tryAddAccount(values)
-        } else {
-          await tryUpdateAccount(values)
-        }
-        setVisible(false)
-        reloadTable()
-        ref.current?.resetFields()
-      } catch (error) {
-        message.error(error)
-      }
-    })
-  }
-  const queryInstitutionOptions = async search => {
-    const { code = -1, data = {} } = await queryInstitutionList({
-      search,
-      current: 1,
-      pageSize: 100
-    })
-    if (code === consts.RET_CODE.SUCCESS) {
-      return data.items.map(item => ({ label: item.name, value: item.ID }))
-    }
-    return []
-  }
-  const { institution } = defaultFormData || {}
-
-  return (
-    <Modal
-      width="35vw"
-      visible={visible}
-      onCancel={() => {
-        ref.current?.resetFields()
-        setVisible(false)
-      }}
-      title={type === ModalType.ADD ? '新增账号' : '编辑账号'}
-      onOk={() => handleOnFinish()}>
-      <ProForm formRef={ref} submitter={{ render: false }} {...layout}>
-        {type === ModalType.UPDATE ? <ProFormText name="ID" hidden /> : null}
-        <Form.Item
-          labelCol={{ flex: '150px' }}
-          name="institutionID"
-          label="所属企事业单位"
-          rules={[{ required: true, message: '请选择企事业单位' }]}>
-          <DebounceSelect
-            fetchOptions={queryInstitutionOptions}
-            showSearch
-            defaultOptions={institution && [{ label: institution.name, value: institution.ID }]}
-          />
-        </Form.Item>
-        <Row>
-          <Col span={12}>
-            <ProFormText
-              name="account"
-              label="账号"
-              rules={[{ required: true, message: '请输入账号' }]}
-            />
-            <ProFormText
-              name="name"
-              label="姓名"
-              rules={[{ required: true, message: '请输入名称' }]}
-            />
-            <ProFormText name="phone" label="手机号" />
-          </Col>
-          <Col span={12}>
-            <ProFormSelect
-              name="accountType"
-              label="账号类型"
-              options={accountType.map(item => ({ label: item.name, value: item.value }))}
-              rules={[{ required: true, message: '请选择账号类型' }]}
-            />
-            {type === ModalType.ADD && (
-              <ProFormText
-                name="password"
-                label="密码"
-                rules={[{ required: true, message: '请输入密码' }]}
-              />
-            )}
-
-            <ProFormSelect
-              name="gender"
-              label="性别"
-              options={[
-                { label: '男', value: 0 },
-                { label: '女', value: 1 }
-              ]}
-              rules={[{ required: true, message: '请选择性别' }]}
-            />
-          </Col>
-        </Row>
-      </ProForm>
-    </Modal>
-  )
-}
-
-export default StaffModal

src/pages/Institutions/Staff/index.tsx

@@ -19,7 +19,7 @@ type ListProps = ConnectProps & {
 }
 
 const CompanyList: React.FC<ListProps> = ({ dispatch, accountTypeList }) => {
-  console.log(accountTypeList)
+  // console.log(accountTypeList)
 
   const tRef = useRef<ActionType>(null)
   useEffect(() => {
@@ -58,18 +58,6 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountTypeList }) => {
       title: '名称'
     },
     // {
-    //   dataIndex: 'accountType',
-    //   title: '账号类型',
-    //   filters: true,
-    //   valueEnum: accountType.reduce((prev, curr) => {
-    //     const obj = { ...prev }
-    //     obj[curr.value] = {
-    //       text: curr.name
-    //     }
-    //     return obj
-    //   }, {})
-    // },
-    // {
     //   dataIndex: 'institution',
     //   title: '所属企事业单位',
     //   renderText: (_, record) => record.institution.name
@@ -105,11 +93,17 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountTypeList }) => {
           <div
             className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
             onClick={() => {
+              // console.log(record)
               setState({
                 ...state,
                 visible: true,
                 currentModalType: ModalType.UPDATE,
-                defaultFormData: { ...record, institutionID: record.ID }
+                defaultFormData: {
+                  ...record,
+                  institutionID: record.ID,
+                  accountType: record.accountType,
+                  dataID: record.institution.ID
+                }
               })
             }}>
             编辑
@@ -166,18 +160,11 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountTypeList }) => {
         type={state.currentModalType}
         defaultFormData={state.defaultFormData}
         visible={state.visible}
-        accountType={accountTypeList}
+        accountTypeList={accountTypeList}
+        // accountType={accountTypeList}
         reloadTable={() => tRef.current?.reload()}
         setVisible={(visible: boolean) => setState({ ...state, visible })}
       />
-      {/* <StaffModal
-        type={state.currentModalType}
-        defaultFormData={state.defaultFormData}
-        visible={state.visible}
-        accountType={accountType}
-        reloadTable={() => tRef.current?.reload()}
-        setVisible={(visible: boolean) => setState({ ...state, visible })}
-      /> */}
     </div>
   )
 }

src/pages/Institutions/model.ts

@@ -1,12 +1,14 @@
 // import { getProjectTypeList } from '@/services/api/project'
 // import consts from '@/utils/consts'
-import { getAccountTypeList } from '@/services/api/institution'
+import { getAccountTypeList, queryOrganizationalStructureList } from '@/services/api/institution'
 import consts from '@/utils/consts'
 import type { Effect, Reducer } from 'umi'
 
 export interface InstitutionsModelState {
   list: API.InstitutionListItem[]
   accountType: API.AccountType[]
+  organizationType: API.OrganizationalStructureListItem[]
+  dataID: string
 }
 
 export interface InstitutionsModelType {
@@ -15,6 +17,7 @@ export interface InstitutionsModelType {
   effects: {
     query: Effect
     queryAccountTypeList: Effect
+    queryOrganizationList: Effect
   }
   reducers: {
     save: Reducer<InstitutionsModelState>
@@ -27,7 +30,8 @@ const InstitutionsModel: InstitutionsModelType = {
   namespace: 'institutions',
   state: {
     list: [],
-    accountType: []
+    accountType: [],
+    organizationType: []
   },
   effects: {
     *queryInstitutionTypeList({ payload }, { call, put }) {
@@ -42,7 +46,7 @@ const InstitutionsModel: InstitutionsModelType = {
       // }
     },
     *queryAccountTypeList(_, { call, put }) {
-      console.log('111')
+      // console.log('111')
 
       const response = yield call(getAccountTypeList)
       if (response?.code === consts.RET_CODE.SUCCESS) {
@@ -53,6 +57,17 @@ const InstitutionsModel: InstitutionsModelType = {
           }
         })
       }
+    },
+    *queryOrganizationList(_, { call, put }) {
+      const response = yield call(queryOrganizationalStructureList)
+      if (response?.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'save',
+          payload: {
+            organizationType: response.data
+          }
+        })
+      }
     }
   },
   reducers: {