| | |
| | | import { postOaContractGetContractList } from '@/services/WebApi/contract'; |
| | | import { PlusOutlined, UserOutlined } from '@ant-design/icons'; |
| | | import { ExclamationCircleOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons'; |
| | | import { PageContainer, ProTable } from '@ant-design/pro-components'; |
| | | import { Button, Col, Form, Input, Modal, Row, Select, Space } from 'antd'; |
| | | import { Button, Col, Form, Input, message, Modal, Row, Select, Space } from 'antd'; |
| | | import TextArea from 'antd/es/input/TextArea'; |
| | | import React, { useRef, useState } from 'react'; |
| | | import React, { useEffect, useRef, useState } from 'react'; |
| | | import styles from './index.less'; |
| | | import { postOaDepartmentGetDepartmentList } from '@/services/WebApi/oaDepartment'; |
| | | import { postOaDepartmentDelDepartment, postOaDepartmentGetDepartmentList, postOaDepartmentNewDepartment, postOaDepartmentUpdateDepartment } from '@/services/WebApi/oaDepartment'; |
| | | import { useModel } from '@umijs/max'; |
| | | import { postOaOrgGetOrgList } from '@/services/WebApi/oaOrg'; |
| | | import { postIdentityDepartmentNewDepartment } from '@/services/WebApi/department'; |
| | | import SelectUser from '@/components/selectUser'; |
| | | import modal from 'antd/es/modal'; |
| | | |
| | | const DepartmentalInformationConfiguration: React.FC = () => { |
| | | const { initialState, setInitialState } = useModel('@@initialState'); |
| | | |
| | | const [dialogTitle, setDialogTitle] = useState(''); |
| | | const [addDialogVisible, setAddDialogVisible] = useState(false); |
| | | |
| | | const [selectUserDialogVisible, setSelectUserDialogVisible] = useState(false); |
| | | const [userDialogTitle, setUserDialogTitle] = useState("选择部门领导"); |
| | | const [depLeader, setDepLeader] = useState<any>(null); |
| | | const [currentEditDepartment, setCurrentEditDepartment] = useState<any>(null); |
| | | const actionRef = useRef(null); |
| | | const [formRef] = Form.useForm(); |
| | | |
| | | const columns = [ |
| | | { |
| | | title: '部门名称', |
| | | key: 'code', |
| | | dataIndex: 'code', |
| | | key: 'name', |
| | | dataIndex: 'name', |
| | | align: 'center', |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'name', |
| | | align: 'center', |
| | | search: false, |
| | | render: (_, rowData) => { |
| | | return rowData?.manager?.name || "-" |
| | | } |
| | | }, |
| | | { |
| | | title: '部门类型', |
| | |
| | | }, |
| | | { |
| | | title: '部门电话', |
| | | key: 'date1', |
| | | dataIndex: 'date1', |
| | | key: 'phone', |
| | | dataIndex: 'phone', |
| | | align: 'center', |
| | | search: false, |
| | | }, |
| | | { |
| | | title: '上级部门', |
| | | key: 'date2', |
| | | dataIndex: 'date2', |
| | | key: 'parent', |
| | | dataIndex: 'parent', |
| | | align: 'center', |
| | | search: false, |
| | | render: (_, rowData) => { |
| | | return rowData?.parent?.name || "-" |
| | | } |
| | | }, |
| | | |
| | | { |
| | |
| | | search: false, |
| | | render: (_, rowData) => ( |
| | | <Space size="middle"> |
| | | <a onClick={() => {}} style={{ cursor: 'pointer', margin: ' 0 5px' }}> |
| | | <a onClick={() => { |
| | | formRef.setFieldsValue(rowData); |
| | | setDepLeader(rowData.manager) |
| | | formRef.setFieldValue('managerId', rowData.manager.name) |
| | | setDialogTitle('编辑部门'); |
| | | setCurrentEditDepartment(rowData); |
| | | setAddDialogVisible(true); |
| | | }} style={{ cursor: 'pointer', margin: ' 0 5px' }}> |
| | | 编辑 |
| | | </a> |
| | | |
| | | <a onClick={() => { |
| | | handleDelete(rowData.id) |
| | | }} style={{ cursor: 'pointer', margin: ' 0 5px', color: 'red' }}> 删除</a> |
| | | </Space> |
| | | ), |
| | | }, |
| | | ]; |
| | | const handleOk = () => {}; |
| | | |
| | | useEffect(() => { |
| | | if (!addDialogVisible) { |
| | | formRef.resetFields(); |
| | | } |
| | | }, [addDialogVisible]) |
| | | |
| | | |
| | | //删除部门 |
| | | const handleDelete = (id: number) => { |
| | | modal.confirm({ |
| | | title: '删除', |
| | | icon: <ExclamationCircleOutlined />, |
| | | content: '是否删除该部门?', |
| | | okText: '确认', |
| | | cancelText: '取消', |
| | | onOk: () => { |
| | | postOaDepartmentDelDepartment({ ids: [id] }).then((res) => { |
| | | message.success('删除成功'); |
| | | actionRef.current?.reload(); |
| | | }) |
| | | }, |
| | | }); |
| | | } |
| | | |
| | | //新增or编辑 |
| | | const handleOk = () => { |
| | | formRef.validateFields().then((values) => { |
| | | const body = { |
| | | orgId: initialState?.appInfo?.org?.id, |
| | | ...values |
| | | } |
| | | for (let key in body) { |
| | | if (body[key] === undefined) { |
| | | body[key] = '' |
| | | } |
| | | } |
| | | body.parentId = 14 |
| | | body.type = "Normal" |
| | | body.managerId = depLeader.id |
| | | if (dialogTitle == '编辑部门') { |
| | | body.id = currentEditDepartment.id |
| | | postOaDepartmentUpdateDepartment(body).then((res) => { |
| | | console.log(res, 'res'); |
| | | setAddDialogVisible(false); |
| | | message.success('编辑成功'); |
| | | actionRef.current?.reload(); |
| | | }) |
| | | } else { |
| | | postOaDepartmentNewDepartment(body).then((res) => { |
| | | console.log(res, 'res'); |
| | | setAddDialogVisible(false); |
| | | message.success('添加成功'); |
| | | actionRef.current?.reload(); |
| | | }) |
| | | } |
| | | |
| | | }) |
| | | }; |
| | | const handleCancel = () => { |
| | | setAddDialogVisible(false); |
| | | }; |
| | | const getTableData = (params: { current: number; pageSize: number }) => { |
| | | console.log(params, 'params'); |
| | | let searchList = []; |
| | | if (params?.name) { |
| | | searchList = [{ |
| | | field: 'name', keywords: params.name, compareType: 'Contains', domain: "", |
| | | type: "", |
| | | fieldBaseType: "", |
| | | subSearches: [ |
| | | ] |
| | | }]; |
| | | } |
| | | const body = { |
| | | start: (params.current - 1) * params.pageSize, |
| | | size: params.pageSize, |
| | | filterList: [], |
| | | searchList: [], |
| | | searchList, |
| | | orgId: initialState?.appInfo?.org?.id, |
| | | }; |
| | | |
| | | return postOaDepartmentGetDepartmentList(body).then((res) => { |
| | | console.log(res, 'res'); |
| | | return { |
| | | data: res.datas, |
| | | total: res.data.totalSize, |
| | | total: res.totalSize, |
| | | }; |
| | | }); |
| | | }; |
| | | |
| | | |
| | | return ( |
| | | <PageContainer> |
| | | <ProTable |
| | |
| | | width={900} |
| | | onOk={handleOk} |
| | | open={addDialogVisible} |
| | | // confirmLoading={confirmLoading} |
| | | onCancel={handleCancel} |
| | | > |
| | | <div className={styles.addDialog}> |
| | | <Form form={formRef} layout="vertical" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}> |
| | | <Row> |
| | | <Col span={12}> |
| | | <Form.Item label="部门名称" name="name"> |
| | | <Form.Item label="部门名称" name="name" rules={[{ required: true, message: '请输入部门名称' }]}> |
| | | <Input /> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item |
| | | label="部门类型" |
| | | name="name" |
| | | rules={[{ required: true, message: '请输入机构名称' }]} |
| | | name="type" |
| | | rules={[{ required: true, message: '请选择部门类型' }]} |
| | | > |
| | | <Select |
| | | defaultValue="lucy" |
| | |
| | | </Row> |
| | | <Row> |
| | | <Col span={12}> |
| | | <Form.Item label="部门领导" name="name"> |
| | | <Input suffix={<UserOutlined className="site-form-item-icon" />} /> |
| | | <Form.Item label="部门领导" name="managerId"> |
| | | <Input suffix={<UserOutlined onClick={() => { |
| | | setSelectUserDialogVisible(true) |
| | | }} className="site-form-item-icon" />} /> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="上级部门" name="name"> |
| | | <Form.Item label="上级部门" name="parentId"> |
| | | <Select |
| | | defaultValue="lucy" |
| | | options={[ |
| | |
| | | |
| | | <Row> |
| | | <Col span={24}> |
| | | <Form.Item label="部门电话" name="name"> |
| | | <Form.Item label="部门电话" name="phone"> |
| | | <Input /> |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | <Row> |
| | | <Col span={24}> |
| | | <Form.Item label="部门描述" name="name"> |
| | | <Form.Item label="部门描述" name="description"> |
| | | <TextArea rows={4} /> |
| | | </Form.Item> |
| | | </Col> |
| | |
| | | </Form> |
| | | </div> |
| | | </Modal> |
| | | |
| | | { |
| | | selectUserDialogVisible && <SelectUser title={userDialogTitle} onConfirm={(user) => { |
| | | formRef.setFieldValue('managerId', user.name) |
| | | setDepLeader(user) |
| | | setSelectUserDialogVisible(false) |
| | | }} onCancel={() => { |
| | | setSelectUserDialogVisible(false) |
| | | }} /> |
| | | } |
| | | |
| | | </PageContainer> |
| | | ); |
| | | }; |