import React, { useRef, useState } 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';
|
|
const FormItem = Form.Item;
|
const TextArea = Input.TextArea;
|
const Option = Select.Option;
|
const options = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan'];
|
|
export default function BackModel(props) {
|
const formRef = useRef();
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [wantUser, setWantUser] = useState({});
|
|
const handleSubmit = () => {
|
formRef.current.validate(undefined, (errors, values) => {
|
console.log(errors, values);
|
})
|
}
|
|
const handleTemplate = (type) => {
|
if (type === 1) {
|
formRef.current.setFieldValue('trueName', '本事项经初步核实，认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事，尽快查明事实真相，依法依规进行处理，并在处理过程中充分考虑当事人的合理诉求，确保公平公正，维护当事人的合法权益。同时，请务必保持与当事人的沟通畅通，及时反馈办理进展，以增强矛盾纠纷化解工作的透明度和公信力。')
|
} else {
|
formRef.current.setFieldValue('trueName', '')
|
}
|
}
|
|
const handleFocus = (e) => {
|
e.stopPropagation()
|
setIsModalVisible(true)
|
}
|
|
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='bumen'
|
>
|
<Select
|
mode='multiple'
|
placeholder='请选择承办部门'
|
allowClear
|
onFocus={handleFocus}
|
>
|
</Select>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>配合部门<div style={{ color: '#86909C' }}>（可多选）</div></div>)}
|
field='peihe'
|
>
|
<Select
|
mode='multiple'
|
placeholder='请选择配合部门'
|
allowClear
|
>
|
{options.map((option) => (
|
<Option key={option} value={option}>
|
{option}
|
</Option>
|
))}
|
</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 className='myTag' onClick={() => { handleTemplate(2) }}>个人模板1：张三的交办意见范本</div>
|
</div>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>交办意见<div className="must">必填</div></div>)}
|
field='trueName'
|
rules={[{ required: true, message: '请选择回退理由' }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写回退的具体理由'
|
style={{ marginTop: '40px' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<ArcoUpload
|
params={{
|
action: ``,
|
}}
|
field='file'
|
label='附件材料'
|
/>
|
</Col>
|
</Row>
|
</Form>
|
</Scrollbars>
|
<div className='dialogFooter'>
|
<Button
|
type="primary"
|
className="dialogPrimary"
|
onClick={handleSubmit}
|
>
|
提交
|
</Button>
|
</div>
|
<SelectObjModal
|
visible={isModalVisible}
|
checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
|
onOk={(value) => {
|
setIsModalVisible(false);
|
setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
|
}}
|
onClose={() => setIsModalVisible(false)}
|
/>
|
</div>
|
)
|
}
|
