import React, { useRef, useState } from 'react';
|
import { Col, Space, Row } from 'antd';
|
import { Form, Input, Tabs, Typography, Button, Modal, Select, Upload, Message } from '@arco-design/web-react';
|
import * as $$ from '@/utils/utility';
|
import SelectObjModal from '@/components/SelectObjModal/selectPerson';
|
import TemplateChoose from '@/components/TemplateChoose';
|
// import CaseRepeatInfo from '@/components/CaseRepeatInfo';
|
const FormItem = Form.Item;
|
const appUrl = $$.appUrl;
|
const TextArea = Input.TextArea;
|
|
//添加督办
|
function addCaseSuperviseApi(data) {
|
return $$.ax.request({ url: `caseSupervise/addCaseSupervise`, type: 'post', service: 'mediate', data });
|
}
|
|
const SupervisingViews = ({ visible, caseId, handleOnCancel, title = '督办', supervisingId, getTableData }) => {
|
const supervisingRef = useRef();
|
const [selectOptions, setSelectOptions] = useState([]);//部门选择的options
|
const [selectedTemplate, setSelectedTemplate] = useState(); // 选择的模板
|
const [wantUser, setWantUser] = useState([]); // 选择的督办部门
|
const [isModalVisible, setIsModalVisible] = useState(false); // 选择部门弹窗
|
const [templateVisible, setTemplateVisible] = useState(false);
|
const [repeatInfoVisible, setRepeatInfoVisible] = useState(false);
|
const handleTemplate = (type) => {
|
setSelectedTemplate(type);
|
if (type === 1) {
|
supervisingRef.current.setFieldValue('supContent', '鉴于本事项的重要性及紧迫性，现要求你尽快启动调解程序，并确保案件能够得到及时有效的处理。请您务必于本周内完成以下事项：\n[事项1......]\n[事项2......]\n请确保在事项办理的过程中，遵循公平、公正的原则，并积极促进双方达成共识。')
|
} else {
|
supervisingRef.current.setFieldValue('supContent', '')
|
}
|
}
|
|
const handleSync = (value) => {
|
console.log(value, 'handleSyncValue')
|
let newList = wantUser.filter(item => value.indexOf(item.value) != -1)
|
setWantUser(newList);
|
}
|
|
const addCaseSupervise = async (data) => {
|
const res = await addCaseSuperviseApi(data)
|
if (res.type) {
|
Message.success('添加成功')
|
getTableData()
|
}
|
}
|
|
//督办提交
|
const handleSupervising = () => {
|
handleOnCancel()
|
let data = supervisingRef.current.getFieldsValue()
|
let selectDept = wantUser.map(item => ({
|
quiltUnitName: item.name,
|
quiltUnitId: item.value,
|
}));
|
addCaseSupervise({ ...data, caseId: caseId, id: supervisingId, quiltUnitDTOList: selectDept, })
|
}
|
|
// 处理模板选择
|
const handleTemplateSelect = (template) => {
|
setSelectedTemplate(2); // 设置为自定义模板
|
supervisingRef.current.setFieldValue('supContent', template.templateContent);
|
};
|
|
return (
|
<Modal
|
visible={visible}
|
onCancel={handleOnCancel}
|
title={title}
|
centered
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
autoFocus={false}
|
focusLock={false}
|
>
|
<Form
|
ref={supervisingRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Row>
|
<Col span={24}>
|
<FormItem
|
label={<div style={{ display: 'flex' }}><div>添加督办部门</div><div style={{ color: '#86909C' }}>（可多选）</div></div>}
|
field='quiltUnitDTOList'
|
>
|
<Select
|
mode='multiple'
|
placeholder='请选择督办部门'
|
allowClear
|
onFocus={(e) => {
|
e.stopPropagation()
|
setIsModalVisible(true)
|
}}
|
options={selectOptions}
|
onChange={handleSync}
|
>
|
</Select>
|
</FormItem>
|
</Col>
|
<Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1, width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
|
<div
|
className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`}
|
onClick={() => handleTemplate(1)}
|
>
|
公共模板：提醒尽快启动调解程序督办模板
|
</div>
|
<div
|
className="more-template-link"
|
onClick={() => setRepeatInfoVisible(true)}
|
style={{
|
color: '#1A6FB8',
|
cursor: 'pointer',
|
marginRight: '16px',
|
lineHeight: '32px'
|
}}
|
>
|
更多模板
|
</div>
|
</div>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>督办意见</div>)}
|
field='supContent'
|
rules={[{ message: '请填写督办意见', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label='附件材料'
|
field=''
|
rules={[{ message: '请填写事项概况', required: true }]}
|
>
|
<Upload
|
multiple
|
imagePreview
|
action={`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${supervisingId}&ownerType=${'22_00018-506'}`}
|
listType='picture-card'
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
onPreview={(file) => {
|
Message.info('click preview icon')
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Button type='primary' onClick={() => handleSupervising()}>提交</Button>
|
</Row>
|
</Form>
|
<SelectObjModal
|
visible={isModalVisible}
|
checkKeys={wantUser || []}
|
onOk={(value) => {
|
setWantUser(value.items)
|
setSelectOptions(value.items.map(item => ({
|
label: item.name,
|
value: item.value
|
})))
|
supervisingRef.current.setFieldValue('quiltUnitDTOList', value.items.map(item => item.value))
|
setIsModalVisible(false)
|
}}
|
onClose={() => setIsModalVisible(false)}
|
type='supUnit'
|
isCheckbox={true}
|
caseId={caseId}
|
/>
|
{/* <CaseRepeatInfo
|
visible={repeatInfoVisible}
|
onCancel={() => setRepeatInfoVisible(false)}
|
onSelect={handleTemplateSelect}
|
caseId="2503031454021001" // 传入模板类型，用于筛选督办相关的模板
|
/> */}
|
</Modal>
|
)
|
}
|
|
export default SupervisingViews;
|
