/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-21 15:40:30
|
* @LastEditTime: 2023-12-19 18:16:35
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 调解总览修改使用
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { Row, Col, Radio, Button, Input, Space } from 'antd';
|
import { ExclamationCircleFilled, ScheduleOutlined, ShareAltOutlined, UserAddOutlined } from '@ant-design/icons';
|
import { caseDetail } from '../../../assets/images';
|
import { ax, info, infoSuccess, verifyEmpty, modalInfo, sleep, timeFormat } from '../../../utils/utility';
|
import MyUpload from '../../../components/MyUpload';
|
import SelectObjModal from '../../../components/SelectObjModal';
|
import ProgressStep from '../../../components/ProgressStep';
|
import WantUserTag from '../../../components/WantUserTag';
|
|
const { TextArea } = Input;
|
|
|
const Dispatch1 = ({ onData, outData }) => {
|
// form
|
const [formData, setFormData] = useState({});
|
|
// 选择modal
|
const [selectModal, setSelectModal] = useState(false);
|
|
const [selectPersonModal, setSelectPersonModal] = useState(false);
|
|
// 选择协助调解员modal显隐
|
const [selectHelpObjModal, setSelectHelpObjModal] = useState({ visible: false, type: 'person', isCheckbox: true });
|
|
|
|
|
|
// 初始化
|
useEffect(() => {
|
console.log('111new', onData);
|
setFormData(onData || {});
|
}, [onData]);
|
return (
|
|
<>
|
<div className="dispatch">
|
|
{/* 调度处理 */}
|
<div className="dispatch-main">
|
<div className="caseDetail-card dispatch-main-left">
|
{/* // wantUserId wantUserName wantUnitName wantUnitId 意向调解组织编号 */}
|
<div>
|
<Col style={{ padding: '0px 0px 15px 0px' }} span={24}>
|
<h5><span>调解组织</span></h5>
|
<div className="caseHandle-subtitle">只允许设置为当前登录账号所在的调委会或镇街综治中心</div>
|
{formData.wantUnitId && (
|
<WantUserTag name={formData.wantUnitName} onClose={() => {
|
setFormData({ ...formData, wantUnitId: '', wantUnitName: '' });
|
outData({ wantUnitId: '', wantUnitName: '' })
|
}
|
} />
|
)}
|
|
{!formData.wantUnitId &&
|
<div style={{ marginTop: '12px' }}>
|
<Button
|
type="dashed"
|
icon={<UserAddOutlined />}
|
onClick={() => {
|
setSelectModal(true);
|
}}
|
>
|
选择调解组织
|
</Button>
|
</div>
|
}
|
|
</Col>
|
<Col style={{ paddingBottom: '15px' }} span={24}>
|
<h5><span>调解员</span></h5>
|
<div className="caseHandle-subtitle">只能有一名，设置完成后在<span className="public-color">我的调解/我负责的/调解结束、调解总览（一本账）</span>菜单中查看案件</div>
|
{formData.wantUserId && (
|
<WantUserTag name={formData.wantUserName} onClose={() => {
|
setFormData({ ...formData, wantUserId: '', wantUserName: '' })
|
outData({ wantUserId: '', wantUserName: '' })
|
}} />
|
)}
|
|
{!formData.wantUserId &&
|
<div style={{ marginTop: '12px' }}>
|
<Button
|
type="dashed"
|
icon={<UserAddOutlined />}
|
onClick={() => {
|
setSelectPersonModal(true);
|
}}
|
>
|
选择调解员
|
</Button>
|
</div>
|
}
|
</Col>
|
<Col span={24}>
|
<h5>协助调解员</h5>
|
<div className="caseHandle-subtitle">可以有多名，设置完成后在<span className="public-color">我的调解/我负责的/调解结束、调解总览（一本账）</span>菜单中查看案件</div>
|
<Space size="small" wrap>
|
{formData.caseAssistList?.map((item) => (
|
<WantUserTag
|
color='orange'
|
key={`caseAssistList${item.assUserId}`}
|
value={item.assUserId}
|
name={item.assUserName}
|
onClose={() => {
|
const list = formData.caseAssistList.filter((x) => x.assUserId !== item.assUserId);
|
console.log('item', list);
|
setFormData({ ...formData, caseAssistList: list });
|
outData({ ...formData, caseAssistList: list })
|
}}
|
/>
|
))}
|
<Button
|
type="dashed"
|
icon={<UserAddOutlined />}
|
onClick={() =>
|
setSelectHelpObjModal({ visible: true })}
|
>
|
选择协助调解员
|
</Button>
|
</Space>
|
</Col>
|
</div>
|
</div>
|
|
</div >
|
</div >
|
{/* 调解组织 */}
|
< SelectObjModal
|
visible={selectModal}
|
type={'unit'}
|
checkKeys={formData.acceptObjId ? [{ value: formData.acceptObjId, label: formData.acceptObjName }] : undefined}
|
onOk={(value) => {
|
setSelectModal(false);
|
setFormData({ ...formData, wantUnitId: value.keys[0], wantUnitName: value.items[0].name });
|
outData({ wantUnitId: value.keys[0], wantUnitName: value.items[0].name })
|
}}
|
onClose={() => setSelectModal(false)}
|
/>
|
|
{/* 调解员 */}
|
<SelectObjModal
|
visible={selectPersonModal}
|
type={'person'}
|
checkKeys={formData.acceptObjId ? [{ value: formData.acceptObjId, label: formData.acceptObjName }] : undefined}
|
onOk={(value) => {
|
setSelectPersonModal(false);
|
setFormData({ ...formData, wantUserId: value.keys[0], wantUserName: value.items[0].name });
|
outData({ wantUserId: value.keys[0], wantUserName: value.items[0].name })
|
}}
|
onClose={() => setSelectPersonModal(false)}
|
/>
|
{/* 协助调解员 */}
|
<SelectObjModal
|
visible={selectHelpObjModal.visible}
|
type={selectHelpObjModal.type}
|
isCheckbox={true}
|
checkKeys={formData.caseAssistList ? formData.caseAssistList.map(item => ({ value: item.assUserId, label: item.assUserName })) : undefined}
|
onOk={(value) => {
|
setSelectHelpObjModal({ visible: false });
|
// console.log('value', value);
|
const selectedValues = value.keys.map((key, index) => ({
|
assUserId: key,
|
assUserName: value.items[index]?.name||value.items[index]?.label
|
}));
|
console.log('value', value);
|
setFormData({ ...formData, caseAssistList: selectedValues });
|
outData({ ...formData, caseAssistList: selectedValues })
|
}}
|
onClose={() => {
|
setSelectHelpObjModal({ visible: false });
|
}}
|
/>
|
</>
|
);
|
};
|
|
export default Dispatch1;
|
