import React, { useRef, useState, useEffect } from 'react';
|
import { Row, Col } from 'antd';
|
import { Form, Input, Button, Select } from '@arco-design/web-react';
|
import ArcoUpload from '@/components/ArcoUpload';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
import SelectObjModal from '@/components/SelectObjModal/selectPerson';
|
import * as $$ from '@/utils/utility';
|
import { useNavigate } from 'react-router-dom';
|
|
const FormItem = Form.Item;
|
const TextArea = Input.TextArea;
|
const appUrl = $$.appUrl;
|
|
function assign(data) {
|
return $$.ax.request({ url: `caseTask/assign`, type: 'post', service: 'mediate', data });
|
}
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
|
}
|
|
export default function BackModel(props) {
|
const navigate = useNavigate();
|
const formRef = useRef();
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [wantUser, setWantUser] = useState({});
|
const [mainDept, setMainDept] = useState('handleUnit'); //判断打开弹窗的是承办部门还是配合部门
|
const [selectOptions, setSelectOptions] = useState({}); //两个部门选择的options
|
|
useEffect(() => {}, []);
|
|
const handleSubmit = () => {
|
formRef.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
handleAssign({
|
caseTaskId: props.caseTaskId,
|
assignContent: values.assignContent,
|
handleUnitId: wantUser['handleUnit'][0].value,
|
handleUnitName: wantUser['handleUnit'][0].name,
|
assistUnitList:
|
wantUser['assistUnit'] &&
|
wantUser['assistUnit'].map((item) => {
|
return {
|
uitId: item.value,
|
uitName: item.name,
|
};
|
}),
|
});
|
}
|
});
|
};
|
|
const handleTemplate = (type) => {
|
if (type === 1) {
|
formRef.current.setFieldValue(
|
'assignContent',
|
'本事项经初步核实，认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事，尽快查明事实真相，依法依规进行处理，并在处理过程中充分考虑当事人的合理诉求，确保公平公正，维护当事人的合法权益。同时，请务必保持与当事人的沟通畅通，及时反馈办理进展，以增强矛盾纠纷化解工作的透明度和公信力。'
|
);
|
} else {
|
formRef.current.setFieldValue('assignContent', '');
|
}
|
};
|
|
//交办请求
|
const handleAssign = async (data) => {
|
const res = await assign(data);
|
if (res.type) {
|
$$.infoSuccess({ content: '交办成功！' });
|
props.onCancel();
|
navigate('/mediate/visit/visitWorkBench');
|
}
|
};
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
};
|
|
//form数据同步要提交的数据
|
const handleSync = (field, value) => {
|
wantUser[field] = wantUser[field].filter((item) => value.indexOf(item.value) != -1);
|
setWantUser(wantUser);
|
};
|
|
return (
|
<div>
|
<Scrollbars style={{ height: '550px' }} autoHide>
|
<Form
|
ref={formRef}
|
layout="vertical"
|
requiredSymbol={false}
|
initialValues={{}} //默认值
|
scrollToFirstError
|
>
|
<Row>
|
<Col span={24}>
|
<FormItem
|
label={
|
<div style={{ display: 'flex' }}>
|
承办部门<div className="must">必填</div>
|
</div>
|
}
|
field="handleUnit"
|
rules={[{ required: true, message: '请选择承办部门' }]}
|
>
|
<Select
|
mode="multiple"
|
placeholder="请选择承办部门"
|
allowClear
|
onFocus={(e) => {
|
e.stopPropagation();
|
setIsModalVisible(true);
|
setMainDept('handleUnit');
|
}}
|
options={selectOptions['handleUnit']}
|
onChange={(v) => {
|
handleSync('handleUnit', v);
|
}}
|
></Select>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label={
|
<div style={{ display: 'flex' }}>
|
配合部门<div style={{ color: '#86909C' }}>（可多选）</div>
|
</div>
|
}
|
field="assistUnit"
|
>
|
<Select
|
mode="multiple"
|
placeholder="请选择配合部门"
|
allowClear
|
onFocus={(e) => {
|
e.stopPropagation();
|
setIsModalVisible(true);
|
setMainDept('assistUnit');
|
}}
|
options={selectOptions['assistUnit']}
|
onChange={(v) => {
|
handleSync('assistUnit', v);
|
}}
|
></Select>
|
</FormItem>
|
</Col>
|
<Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}>
|
<div
|
className="myTag"
|
style={{ marginRight: '22px' }}
|
onClick={() => {
|
handleTemplate(1);
|
}}
|
>
|
公共模板1：通用交办意见范本
|
</div>
|
</div>
|
<FormItem
|
label={
|
<div style={{ display: 'flex' }}>
|
交办意见<div className="must">必填</div>
|
</div>
|
}
|
field="assignContent"
|
rules={[{ required: true, message: '请选择交办理由' }]}
|
>
|
<TextArea autoSize={{ minRows: 4, maxRows: 8 }} placeholder="请填写交办的具体理由" style={{ marginTop: '40px' }} />
|
</FormItem>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${props.caseTaskId}&ownerType=22_00018-501`,
|
}}
|
field="file"
|
label="附件材料"
|
handleDelFile={handleDelFile}
|
/>
|
</Col>
|
</Row>
|
</Form>
|
</Scrollbars>
|
<div className="dialogFooter">
|
<Button type="primary" className="dialogPrimary" onClick={handleSubmit}>
|
提交
|
</Button>
|
</div>
|
<SelectObjModal
|
visible={isModalVisible}
|
checkKeys={wantUser[mainDept]}
|
onOk={(value) => {
|
console.log(value);
|
setIsModalVisible(false);
|
wantUser[mainDept] = value.items;
|
setWantUser(wantUser);
|
selectOptions[mainDept] = value.items.map((item) => ({
|
label: item.name,
|
value: item.value,
|
}));
|
setSelectOptions(selectOptions);
|
formRef.current.setFieldValue(
|
mainDept,
|
value.items.map((item) => item.value)
|
);
|
}}
|
onClose={() => setIsModalVisible(false)}
|
type="dept"
|
isCheckbox={mainDept === 'handleUnit' ? false : true}
|
/>
|
</div>
|
);
|
}
|
