|
@@ -0,0 +1,149 @@
|
|
|
+import ProForm, { DrawerForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
|
|
|
+import React, { useRef, useEffect } from 'react'
|
|
|
+import { message, Form } from 'antd'
|
|
|
+import { useRequest } from 'umi'
|
|
|
+import consts from '@/utils/consts'
|
|
|
+import type { FormInstance } from 'antd'
|
|
|
+import { addAccount, queryInstitutionList, updateAccount } from '@/services/api/institution'
|
|
|
+import DebounceSelect from './DebounceSelect'
|
|
|
+
|
|
|
+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 StaffDrawer: React.FC<StaffModalProps> = ({
|
|
|
+ visible,
|
|
|
+ setVisible,
|
|
|
+ type,
|
|
|
+ defaultFormData,
|
|
|
+ accountType,
|
|
|
+ // pTypeList,
|
|
|
+ reloadTable
|
|
|
+}) => {
|
|
|
+ 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 (
|
|
|
+ <DrawerForm
|
|
|
+ width="60vw"
|
|
|
+ formRef={ref}
|
|
|
+ visible={visible}
|
|
|
+ title={type === ModalType.ADD ? '新增账号' : '编辑账号'}
|
|
|
+ onVisibleChange={setVisible}
|
|
|
+ onFinish={() => handleOnFinish()}>
|
|
|
+ <ProForm.Group>
|
|
|
+ <Form.Item
|
|
|
+ name="institutionID"
|
|
|
+ label="所属企事业单位"
|
|
|
+ rules={[{ required: true, message: '请选择企事业单位' }]}>
|
|
|
+ <DebounceSelect
|
|
|
+ fetchOptions={queryInstitutionOptions}
|
|
|
+ showSearch
|
|
|
+ defaultOptions={institution && [{ label: institution.name, value: institution.ID }]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ </ProForm.Group>
|
|
|
+ <ProForm.Group>
|
|
|
+ <ProFormText
|
|
|
+ width="md"
|
|
|
+ name="account"
|
|
|
+ label="账号"
|
|
|
+ rules={[{ required: true, message: '请输入账号' }]}
|
|
|
+ />
|
|
|
+ <ProFormText
|
|
|
+ width="md"
|
|
|
+ name="name"
|
|
|
+ label="姓名"
|
|
|
+ rules={[{ required: true, message: '请输入名称' }]}
|
|
|
+ />
|
|
|
+ </ProForm.Group>
|
|
|
+ <ProForm.Group>
|
|
|
+ <ProFormText width="md" name="phone" label="手机号" />
|
|
|
+ <ProFormSelect
|
|
|
+ width="md"
|
|
|
+ name="accountType"
|
|
|
+ label="账号类型"
|
|
|
+ options={accountType.map(item => ({ label: item.name, value: item.value }))}
|
|
|
+ rules={[{ required: true, message: '请选择账号类型' }]}
|
|
|
+ />
|
|
|
+ </ProForm.Group>
|
|
|
+ <ProForm.Group>
|
|
|
+ {type === ModalType.ADD && (
|
|
|
+ <ProFormText
|
|
|
+ width="md"
|
|
|
+ name="password"
|
|
|
+ label="密码"
|
|
|
+ rules={[{ required: true, message: '请输入密码' }]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <ProFormSelect
|
|
|
+ width="md"
|
|
|
+ name="gender"
|
|
|
+ label="性别"
|
|
|
+ options={[
|
|
|
+ { label: '男', value: 0 },
|
|
|
+ { label: '女', value: 1 }
|
|
|
+ ]}
|
|
|
+ rules={[{ required: true, message: '请选择性别' }]}
|
|
|
+ />
|
|
|
+ </ProForm.Group>
|
|
|
+ </DrawerForm>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default StaffDrawer
|