340 lines
9.4 KiB
JavaScript
340 lines
9.4 KiB
JavaScript
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||
|
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, TreeSelect,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||
|
|
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||
|
|
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
|
||
|
|
import PersonTree from '../../../../components/PersonTree';
|
||
|
|
import apiurl from '../../../../service/apiurl';
|
||
|
|
|
||
|
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||
|
|
import { xyt_httpget2 } from '../../../../utils/request';
|
||
|
|
import "./index.less"
|
||
|
|
import moment from 'moment';
|
||
|
|
import { httpget2 } from '../../../../utils/request';
|
||
|
|
const { RangePicker } = DatePicker
|
||
|
|
const { Dragger } = Upload;
|
||
|
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||
|
|
|
||
|
|
|
||
|
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||
|
|
const [itemList, setItemList] = useState([])
|
||
|
|
const [itemParams, setItemParams] = useState([])
|
||
|
|
const taskTypes = [
|
||
|
|
{label:"日常巡查",value:0},
|
||
|
|
{label:"特别检查",value:1},
|
||
|
|
{label:"汛前巡检",value:2},
|
||
|
|
]
|
||
|
|
const [form] = Form.useForm();
|
||
|
|
|
||
|
|
const handleTree = (arr) => {
|
||
|
|
|
||
|
|
const res = arr.map(item => {
|
||
|
|
item.value = item.id;
|
||
|
|
item.title = item.itemDesc;
|
||
|
|
if (item.children) {
|
||
|
|
item.children = handleTree(item.children)
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
})
|
||
|
|
return res
|
||
|
|
}
|
||
|
|
|
||
|
|
const getItemList = async() => {
|
||
|
|
try {
|
||
|
|
const res = await httpget2(apiurl.rcgl.xcxj.xjrw.list);
|
||
|
|
if (res.code === 200) {
|
||
|
|
const arr1 = res.data.map(item => ({
|
||
|
|
id: item.id,
|
||
|
|
itemDesc: item.name,
|
||
|
|
children: item.children,
|
||
|
|
disabled:item.children.length > 0 ? false : true
|
||
|
|
}));
|
||
|
|
const result = handleTree(arr1)
|
||
|
|
console.log(result);
|
||
|
|
setItemList(result)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const onfinish = (values) => {
|
||
|
|
const userId = localStorage.getItem('userId')
|
||
|
|
values.startDate = values.startDate?moment(values.startDate).format("YYYY-MM-DD 00:00:00"):''
|
||
|
|
values.endDate = values.endDate ? moment(values.endDate).format("YYYY-MM-DD 00:00:00") : ''
|
||
|
|
values.createUserId = userId
|
||
|
|
values.inspectUserName = deptUserList?.find(item => item.userId == values.inspectUserId)?.nickName
|
||
|
|
values.items = itemParams;
|
||
|
|
if (mode === 'save') {
|
||
|
|
onSave(apiurl.rcgl.xcxj.xjrw.save,values)
|
||
|
|
}
|
||
|
|
if (mode == "edit") {
|
||
|
|
onEdit(apiurl.rcgl.xcxj.xjrw.edit,{...record,...values})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const itemChange = (a, b,c) => {
|
||
|
|
const itemArr = a.map(item => ({
|
||
|
|
pointId: c?.triggerNode?.props?.pointId,
|
||
|
|
itemId:item
|
||
|
|
}))
|
||
|
|
setItemParams(itemArr)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getXjInfo = async () => {
|
||
|
|
try {
|
||
|
|
const res = await httpget2(apiurl.rcgl.xcxj.xjrw.detail, { taskId: record?.id })
|
||
|
|
if (res.code === 200) {
|
||
|
|
const xjd = res.data.map(item => item.itemId)
|
||
|
|
form.setFieldValue("items", xjd)
|
||
|
|
setItemParams(res.data)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
useEffect(() => {
|
||
|
|
getItemList()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (mode == "edit") {
|
||
|
|
getXjInfo()
|
||
|
|
}
|
||
|
|
}, [record,mode])
|
||
|
|
|
||
|
|
|
||
|
|
const [deptList, setDeptList] = useState([])
|
||
|
|
const [deptUserList, setDeptUserList] = useState([])
|
||
|
|
const buildTree = (data, parentId) => {
|
||
|
|
let tree = [];
|
||
|
|
data.forEach((node) => {
|
||
|
|
node.title = node.deptName;
|
||
|
|
node.key = node.deptId;
|
||
|
|
|
||
|
|
if (node.parentId === parentId) {
|
||
|
|
let children = buildTree(data, node.deptId);
|
||
|
|
if (children.length) {
|
||
|
|
node.children = children;
|
||
|
|
}
|
||
|
|
tree.push(node);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return tree;
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleTreeList = (dept, user) => {
|
||
|
|
const deptArr = dept.map(item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
value: item.deptId,
|
||
|
|
title: item.deptName,
|
||
|
|
disabled: item.userId ? false : true,
|
||
|
|
children: user.filter(u => u.deptId == item.deptId).map(u => ({
|
||
|
|
...u,
|
||
|
|
value: u.userId,
|
||
|
|
title: u.nickName
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log("deptArr",deptArr);
|
||
|
|
const treelist = buildTree(deptArr,0)
|
||
|
|
return treelist
|
||
|
|
}
|
||
|
|
const treeList = useMemo(() => {
|
||
|
|
if (deptUserList?.length > 0 && deptList?.length > 0) {
|
||
|
|
return handleTreeList(deptList,deptUserList)
|
||
|
|
} else {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}, [deptUserList, deptList])
|
||
|
|
|
||
|
|
|
||
|
|
// 获取部门数据
|
||
|
|
const getDeptList = async() => {
|
||
|
|
try {
|
||
|
|
const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.deptlist);
|
||
|
|
if (result.code == 200) {
|
||
|
|
setDeptList(result.data);
|
||
|
|
getDeptUser(result.data[0])
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取部门人员数据
|
||
|
|
const getDeptUser = async() => {
|
||
|
|
try {
|
||
|
|
const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, {pageNum:1,pageSize:9999});
|
||
|
|
if (result.code == 200) {
|
||
|
|
setDeptUserList(result.rows)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
useEffect(() => {
|
||
|
|
getDeptList()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Form
|
||
|
|
form={form}
|
||
|
|
{...formItemLayout}
|
||
|
|
onFinish={onfinish}
|
||
|
|
initialValues={record}
|
||
|
|
>
|
||
|
|
<Row>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
label="任务类型"
|
||
|
|
name="taskType"
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<NormalSelect
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
allowClear
|
||
|
|
options={taskTypes}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
label="任务标题"
|
||
|
|
name="taskTitle"
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
allowClear
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row>
|
||
|
|
<Col span={24}>
|
||
|
|
<Form.Item
|
||
|
|
label="选择巡查人"
|
||
|
|
name="inspectUserId"
|
||
|
|
labelCol={{ span: 3 }}
|
||
|
|
wrapperCol={{ span: 19 }}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<TreeSelect
|
||
|
|
showSearch
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
dropdownStyle={{
|
||
|
|
maxHeight: 400,
|
||
|
|
overflow: 'auto',
|
||
|
|
}}
|
||
|
|
allowClear
|
||
|
|
treeDefaultExpandAll
|
||
|
|
treeData={treeList}
|
||
|
|
treeNodeFilterProp='title'
|
||
|
|
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row>
|
||
|
|
<Col span={24}>
|
||
|
|
<Form.Item
|
||
|
|
label="巡查项"
|
||
|
|
name="items"
|
||
|
|
labelCol={{ span: 3 }}
|
||
|
|
wrapperCol={{ span: 19 }}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<TreeSelect
|
||
|
|
showSearch
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
dropdownStyle={{
|
||
|
|
maxHeight: 400,
|
||
|
|
overflow: 'auto',
|
||
|
|
}}
|
||
|
|
onChange={itemChange}
|
||
|
|
allowClear
|
||
|
|
treeDefaultExpandAll
|
||
|
|
treeData={itemList}
|
||
|
|
treeNodeFilterProp='title'
|
||
|
|
treeCheckable={true}
|
||
|
|
maxTagCount={1}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<Col span={24}>
|
||
|
|
<Form.Item
|
||
|
|
label="任务内容"
|
||
|
|
name="taskContent"
|
||
|
|
labelCol={{ span: 3 }}
|
||
|
|
wrapperCol={{ span: 19 }}
|
||
|
|
>
|
||
|
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
label="开始日期"
|
||
|
|
name="startDate"
|
||
|
|
getValueFromEvent={(e,dateString) => dateString}
|
||
|
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||
|
|
|
||
|
|
>
|
||
|
|
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col span={12}>
|
||
|
|
<Form.Item
|
||
|
|
label="结束日期"
|
||
|
|
name="endDate"
|
||
|
|
getValueFromEvent={(e,dateString) => dateString}
|
||
|
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||
|
|
|
||
|
|
>
|
||
|
|
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
{
|
||
|
|
mode==='view'?null:(
|
||
|
|
<>
|
||
|
|
<Form.Item {...btnItemLayout}>
|
||
|
|
<Button type="primary" htmlType="submit">
|
||
|
|
{mode === 'save' ? '提交' : '修改'}
|
||
|
|
</Button>
|
||
|
|
</Form.Item>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ModalForm;
|