| | |
| | | import React, { useRef, useState } from 'react' |
| | | 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 { useParams } from 'react-router-dom'; |
| | | import * as $$ from '@/utils/utility'; |
| | | import { useNavigate } from 'react-router-dom'; |
| | | |
| | | |
| | | const FormItem = Form.Item; |
| | | const TextArea = Input.TextArea; |
| | | const Option = Select.Option; |
| | | const options = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan']; |
| | | 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 routeData = useParams(); |
| | | 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) => { |
| | | console.log(errors, values); |
| | | if (!errors) { |
| | | handleAssign({ |
| | | caseTaskId: routeData.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('trueName', '本事项经初步核实,认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事,尽快查明事实真相,依法依规进行处理,并在处理过程中充分考虑当事人的合理诉求,确保公平公正,维护当事人的合法权益。同时,请务必保持与当事人的沟通畅通,及时反馈办理进展,以增强矛盾纠纷化解工作的透明度和公信力。') |
| | | formRef.current.setFieldValue('assignContent', '本事项经初步核实,认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事,尽快查明事实真相,依法依规进行处理,并在处理过程中充分考虑当事人的合理诉求,确保公平公正,维护当事人的合法权益。同时,请务必保持与当事人的沟通畅通,及时反馈办理进展,以增强矛盾纠纷化解工作的透明度和公信力。') |
| | | } else { |
| | | formRef.current.setFieldValue('trueName', '') |
| | | formRef.current.setFieldValue('assignContent', '') |
| | | } |
| | | } |
| | | |
| | | const handleFocus = (e) => { |
| | | e.stopPropagation() |
| | | setIsModalVisible(true) |
| | | //交办请求 |
| | | const handleAssign = async (data) => { |
| | | const res = await assign({ ...data, caseTaskId: props.caseTaskId }) |
| | | 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 ( |
| | |
| | | <Col span={24}> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>承办部门<div className="must">必填</div></div>)} |
| | | field='bumen' |
| | | field='handleUnit' |
| | | rules={[{ required: true, message: '请选择承办部门' }]} |
| | | > |
| | | <Select |
| | | mode='multiple' |
| | | placeholder='请选择承办部门' |
| | | allowClear |
| | | onFocus={handleFocus} |
| | | onFocus={(e) => { |
| | | e.stopPropagation() |
| | | setIsModalVisible(true) |
| | | setMainDept('handleUnit') |
| | | }} |
| | | options={selectOptions['handleUnit']} |
| | | onChange={(v) => { handleSync('handleUnit', v) }} |
| | | > |
| | | </Select> |
| | | </FormItem> |
| | |
| | | <Col span={24}> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>配合部门<div style={{ color: '#86909C' }}>(可多选)</div></div>)} |
| | | field='peihe' |
| | | field='assistUnit' |
| | | > |
| | | <Select |
| | | mode='multiple' |
| | | placeholder='请选择配合部门' |
| | | allowClear |
| | | onFocus={(e) => { |
| | | e.stopPropagation() |
| | | setIsModalVisible(true) |
| | | setMainDept('assistUnit') |
| | | }} |
| | | options={selectOptions['assistUnit']} |
| | | onChange={(v) => { handleSync('assistUnit', v) }} |
| | | > |
| | | {options.map((option) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | </Select> |
| | | </FormItem> |
| | | </Col> |
| | |
| | | </div> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>交办意见<div className="must">必填</div></div>)} |
| | | field='trueName' |
| | | field='assignContent' |
| | | rules={[{ required: true, message: '请选择回退理由' }]} |
| | | > |
| | | <TextArea |
| | |
| | | <Col span={24} className="doubleFile"> |
| | | <ArcoUpload |
| | | params={{ |
| | | action: ``, |
| | | action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${props.caseId}&ownerType=22_00018-501`, |
| | | }} |
| | | field='file' |
| | | label='附件材料' |
| | | handleDelFile={handleDelFile} |
| | | /> |
| | | </Col> |
| | | </Row> |
| | |
| | | </div> |
| | | <SelectObjModal |
| | | visible={isModalVisible} |
| | | checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined} |
| | | checkKeys={wantUser[mainDept]} |
| | | onOk={(value) => { |
| | | console.log(value); |
| | | setIsModalVisible(false); |
| | | setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name }); |
| | | 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> |
| | | ) |