|
|
@@ -1,8 +1,9 @@ |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import { Form, Input, InputNumber, Radio, Modal, Switch } from 'antd'; |
|
|
|
import { Form, Input, InputNumber, Radio, Modal, Select } from 'antd'; |
|
|
|
import departmentService from '@/request/service/deparatment'; |
|
|
|
import userService from '@/request/service/user'; |
|
|
|
import { useRequest } from '@/hooks/use-request'; |
|
|
|
import type { DepartmentVO } from '@/models' |
|
|
|
import type { DepartmentVO, UserDTO, UserVO } from '@/models' |
|
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
|
|
|
|
|
const layout = { |
|
|
@@ -21,18 +22,45 @@ interface EditorProps { |
|
|
|
const DepartmentEditor: React.FC<EditorProps> = (props) => { |
|
|
|
|
|
|
|
const { visible, onCancel, onSave, data } = props; |
|
|
|
const [ departments, setDepartments ] = useState<DepartmentVO[]>([]); |
|
|
|
const [ userList, setUserList ] = useState<UserVO[]>([]); |
|
|
|
|
|
|
|
const { runAsync: updatePostApi } = useRequest(departmentService.updateDeptApi, { manual: true }); |
|
|
|
const { runAsync: createPostApi } = useRequest(departmentService.createDeptApi, { manual: true }); |
|
|
|
const { runAsync: listSimpleDeptApi } = useRequest(departmentService.listSimpleDeptApi, {manual: true}); |
|
|
|
const { runAsync: listSimpleUsersApi } = useRequest(userService.getListSimpleUsersApi, {manual: true}); |
|
|
|
|
|
|
|
const isEdit = !!data; |
|
|
|
|
|
|
|
|
|
|
|
const [saveLoading, setSaveLoading] = useState(false); |
|
|
|
const [form] = Form.useForm(); |
|
|
|
|
|
|
|
const loadDepartments = async () => { |
|
|
|
const [error, { data, msg }] = await listSimpleDeptApi(); |
|
|
|
if(!error) { |
|
|
|
setDepartments(data); |
|
|
|
} else { |
|
|
|
antdUtils.message?.error(msg ?? '获取部门列表数据失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const loadUserList = async () => { |
|
|
|
const [error, { data, msg }] = await listSimpleUsersApi(); |
|
|
|
if(!error) { |
|
|
|
setUserList(data); |
|
|
|
} else { |
|
|
|
antdUtils.message?.error(msg ?? '获取用户列表数据失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (visible) { |
|
|
|
if(departments.length === 0) { |
|
|
|
loadDepartments() |
|
|
|
} |
|
|
|
if(userList.length === 0) { |
|
|
|
loadUserList(); |
|
|
|
} |
|
|
|
if (data) { |
|
|
|
form.setFieldsValue(data); |
|
|
|
} |
|
|
@@ -76,6 +104,9 @@ const DepartmentEditor: React.FC<EditorProps> = (props) => { |
|
|
|
labelCol={{ flex: '0 0 100px' }} |
|
|
|
wrapperCol={{ span: 16 }} |
|
|
|
> |
|
|
|
<Form.Item name="parentId" label="上级部门"> |
|
|
|
<Select options={departments.map(it => ({ value: it.id, label: it.name }))} /> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item name="name" label="部门名称" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
@@ -87,6 +118,10 @@ const DepartmentEditor: React.FC<EditorProps> = (props) => { |
|
|
|
<Input /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Form.Item name="leaderUserId" label="负责人"> |
|
|
|
<Select options={userList.map(it => ({ value: it.id, label: it.nickname }))}/> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Form.Item name="phone" label="联系电话" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|