You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
11 KiB
261 lines
11 KiB
import { Form, Input, Modal, Select, DatePicker } from 'antd';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { getUserList, getProjectList, positionList } from '../actions/plan';
|
|
import moment from 'moment';
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userList, structureList, struLoading, type, curRecord, templateLoading, patrolTemplate }) => {
|
|
const [userOpt, setUserOpt] = useState();
|
|
const [struOpt, setStruOpt] = useState();
|
|
const [pointOpt, setPointOpt] = useState();
|
|
const [points, setPoints] = useState();
|
|
const [unit, setUnit] = useState(curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天");
|
|
const [form] = Form.useForm();
|
|
|
|
useEffect(() => {
|
|
if (type === 'view') {
|
|
|
|
} else {
|
|
dispatch(getUserList())
|
|
dispatch(getProjectList())
|
|
}
|
|
if (type === 'edit' || type === 'view') {
|
|
dispatch(positionList({ projectId: curRecord?.project?.id })).then(res => {
|
|
if (res.success) {
|
|
setPoints(res.payload.data?.rows)
|
|
setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
|
|
}
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (userList.length) {
|
|
setUserOpt(userList?.filter(f => f.structure?.includes(curRecord?.project?.id))?.map(u => ({ label: u.name, value: u.id })))
|
|
// 如果巡检人员用户被删除，筛掉被删除的用户
|
|
const userListIds = userList?.map(u => u.id);
|
|
const filterUsers = curRecord?.users?.filter(u => userListIds.includes(u.id));
|
|
const nextUserIds = filterUsers?.map(u => u.id);
|
|
form.setFieldsValue({
|
|
userIds: nextUserIds,
|
|
userDept: [...new Set(filterUsers?.map(u => u.department?.name))].join()
|
|
});
|
|
}
|
|
}, [userList])
|
|
|
|
useEffect(() => {
|
|
if (structureList?.rows?.length) {
|
|
setStruOpt(structureList?.rows?.map(s => ({ label: s.name, value: s.id })))
|
|
}
|
|
}, [structureList])
|
|
|
|
const selectAfter = (
|
|
<Select
|
|
defaultValue={curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天"}
|
|
onChange={value => setUnit(value)}
|
|
suffixIcon={<DownOutlined style={{color: '#fff'}} />}
|
|
>
|
|
<Option value="次/天">次/天</Option>
|
|
<Option value="次/周">次/周</Option>
|
|
<Option value="次/月">次/月</Option>
|
|
</Select>
|
|
);
|
|
return (
|
|
<Modal
|
|
className="global-modal"
|
|
width={717}
|
|
visible={visible}
|
|
title={(type === 'view' ? '查看' : type === 'edit' ? '编辑' : '新增') + "巡检计划"}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
onCancel();
|
|
}}
|
|
onOk={() => {
|
|
if (type === 'view') {
|
|
form.resetFields();
|
|
onCancel();
|
|
return;
|
|
}
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
form.resetFields();
|
|
const params = {
|
|
...values,
|
|
frequency: values.frequency + unit,
|
|
startTime: values.time[0],
|
|
endTime: values.time[1],
|
|
points: points[0]?.points?.filter(p => values?.points?.includes(p.id))
|
|
}
|
|
onCreate(params);
|
|
})
|
|
.catch((info) => {
|
|
console.log('Validate Failed:', info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
name="form_in_modal"
|
|
labelAlign='right'
|
|
labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}
|
|
initialValues={{
|
|
...curRecord,
|
|
time: [moment(curRecord?.startTime), moment(curRecord?.endTime)],
|
|
points: curRecord?.points?.map(p => p.id),
|
|
userIds: curRecord?.users?.map(u => u.id),
|
|
userDept: [...new Set(curRecord?.users?.map(u => u.department?.name))].join(),
|
|
frequency: curRecord?.frequency?.split('次')[0]
|
|
}}
|
|
disabled={type === 'view'}
|
|
>
|
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
|
|
<Form.Item
|
|
name="structureId"
|
|
label="结构物名称"
|
|
labelCol={{ span: 9 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择结构物' },
|
|
]}
|
|
>
|
|
<Select disabled={type === 'view'} bordered={false} options={struOpt} loading={struLoading} onChange={(projectId) => {
|
|
dispatch(positionList({ projectId })).then(res => {
|
|
if (res.success) {
|
|
setPoints(res.payload.data?.rows)
|
|
setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
|
|
}
|
|
})
|
|
form.setFieldsValue({ userIds: [], userDept: [] });
|
|
setUserOpt(userList?.filter(f => f.structure?.includes(projectId))?.map(u => ({ label: u.name, value: u.id })))
|
|
}} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="name"
|
|
label="巡检任务名称"
|
|
labelCol={{ span: 9 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请输入巡检任务名称' },
|
|
]}
|
|
>
|
|
<Input disabled={type === 'view'} bordered={false} />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
|
|
<Form.Item
|
|
name="way"
|
|
label="巡检方式"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择巡检方式' },
|
|
]}
|
|
initialValue='周期巡检'
|
|
>
|
|
<Select bordered={false} options={[{
|
|
label: '周期巡检',
|
|
value: '周期巡检'
|
|
}]} disabled />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="frequency"
|
|
label="巡检频次"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择巡检频次' },
|
|
]}
|
|
>
|
|
<Input addonAfter={selectAfter} disabled={type === 'view'} bordered={false} />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
|
|
<Form.Item
|
|
name="templateId"
|
|
label="巡检模板"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择巡检模板' },
|
|
]}
|
|
>
|
|
<Select
|
|
bordered={false}
|
|
disabled={type === 'view'}
|
|
options={patrolTemplate.map(t => {
|
|
return { label: t.name, value: t.id }
|
|
})}
|
|
loading={templateLoading}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="time"
|
|
label="任务周期"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择任务周期' },
|
|
]}
|
|
>
|
|
<RangePicker disabled={type === 'view'} bordered={false} />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
|
|
<Form.Item
|
|
name="points"
|
|
label="巡检点"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择巡检点' },
|
|
]}
|
|
>
|
|
<Select mode="multiple" options={pointOpt} disabled={!pointOpt || type === 'view'} bordered={false} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="userIds"
|
|
label="巡检人员"
|
|
labelCol={{ span: 8 }}
|
|
style={{ width: 330 }}
|
|
rules={[
|
|
{ required: true, message: '请选择巡检人员' },
|
|
]}
|
|
>
|
|
<Select mode="multiple" disabled={type === 'view'} bordered={false} options={userOpt} loading={userLoading} onChange={(values) => {
|
|
const selectUser = userList?.filter(u => values?.includes(u.id))
|
|
form.setFieldsValue({
|
|
userDept: [...new Set(selectUser?.map(u => u.department.name))].join()
|
|
});
|
|
}} />
|
|
</Form.Item>
|
|
</div>
|
|
<Form.Item
|
|
name="userDept"
|
|
label="巡检单位"
|
|
>
|
|
<Input disabled bordered={false} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal >
|
|
);
|
|
};
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, userList, structureList, patrolTemplate } = state
|
|
return {
|
|
user: auth.user,
|
|
userList: userList.data || [],
|
|
structureList: structureList.data || [],
|
|
patrolTemplate: (patrolTemplate.data || { rows: [] }).rows,
|
|
userLoading: userList.isRequesting,
|
|
struLoading: structureList.isRequesting,
|
|
templateLoading: patrolTemplate.isRequesting,
|
|
}
|
|
}
|
|
export default connect(mapStateToProps)(PlanModal);
|