From fa5529623fc125a384b47b266a4e2113654ed5e6 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Thu, 05 Sep 2024 21:10:17 +0800 Subject: [PATCH] feat: 办理记录对接 --- gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx | 601 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 485 insertions(+), 116 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx index 4b4fbcc..3246d0b 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx @@ -1,23 +1,30 @@ import React, { useState, useRef, useEffect } from 'react'; -import { Col, Space, Row, Tooltip, Button } from 'antd'; -import { register, fold, down, empty, link } from '@/assets/images'; -import { Form, Input, Tabs, Typography, Empty } from '@arco-design/web-react'; +import { Col, Space, Row, Tooltip } from 'antd'; +import { register, fold, down, empty, link, edit } from '@/assets/images'; +import { knock } from '@/assets/images/icon' +import { Form, Input, Tabs, Typography, Empty, Radio, Button, Modal } from '@arco-design/web-react'; import { question1, } from '@/assets/images'; import ProgressStep from '@/components/ProgressStep/VisitStep'; import SelectObjModal from '@/components/SelectObjModal/selectPerson'; import WantUserTag from '@/components/WantUserTag/Handling'; import { scan } from '@/assets/images/icon' -import DocumentScanner from './FileUpLoad' +import DocumentScanner from '../../matterDetail/FileUpLoad'; import * as $$ from '@/utils/utility'; +import CaseResult from './CaseResult' +import ArcoUpload from '@/components/ArcoUpload'; +import HandleRecord from '../../matterDetail/HandleRecord'; const InputSearch = Input.Search; const FormItem = Form.Item; const TabPane = Tabs.TabPane; +const RadioGroup = Radio.Group; +const appUrl = $$.appUrl; + const style = { - textAlign: 'center', - marginTop: 20, + // textAlign: 'center', + // marginTop: 20, }; const fakeData = [ @@ -72,26 +79,75 @@ }, ]; +function getByIdRoleApi(id) { + return $$.ax.request({ url: 'ctUser/getByIdRole?id=' + id, type: 'get', service: 'cust' }); +} + +function choosePrincipalApi(id) { + return $$.ax.request({ url: 'caseInfoUnfold/choosePrincipal?caseId=24083010062110001&userId=' + id, type: 'get', service: 'mediate' }); +} + +function delFile(id) { + return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } }); +} + +function getNewTimeIdApi(id) { + return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' }); +} + +function saveFeedbackApi(data) { + return $$.ax.request({ url: `caseFeedback/saveFeedback`, type: 'post', service: 'mediate', data }); +} + +function listFeedbackApi(id) { + return $$.ax.request({ url: `caseFeedback/listFeedback?id=` + id, type: 'get', service: 'mediate' }); +} + +function updateFeedbackApi(data) { + return $$.ax.request({ url: `caseFeedback/updateFeedback`, type: 'post', service: 'mediate', data }); +} + const Handle = () => { + const formRef = useRef(); const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab + const [selectedTab1, setSelectedTab1] = useState('1'); // 默认选中第一个 tab + + const [wantUser, setWantUser] = useState({}); - // const [scanFile, setScanFile] = useState(false); + const [formView, setFormView] = useState(false); + const [personView, setPersonView] = useState(false); + const [supervising, setSupervising] = useState(false) + const [data, setData] = useState({}) + const [caseResult, SetCaseResult] = useState(false); + const [response, setResponse] = useState('') + const [list, setList] = useState([]) const tabs = [ { index: '1', label: '承办部门' }, { index: '2', label: '配合部门' }, ]; + const tabs1 = [ + { index: '1', label: '公共模板1:化解成功结案意见范本' }, + { index: '2', label: '个人模板1:化解成功结案意见范本(完整版)' } + ] + + const tabs2 = [ + { index: '1', label: '公共模板1:回复督办内容收到通用范本' }, + ] + const [isModalVisible, setIsModalVisible] = useState(false); - const formRef = useRef(null); - - + const [id, setId] = useState('') const handleTabChange = (newTabIndex) => { setSelectedTab(newTabIndex); }; + + const handleCheckedKeys = (userId) => { + choosePrincipal(userId) + } const [records, setRecords] = useState([ { @@ -160,40 +216,139 @@ }, ]); - - - const toggleView = (id) => { - setRecords(records.map(record => { - if (record.id === id) { - return { - ...record, - showView: !record.showView, - }; - } - return record; - })); - }; - - const [scannerVisible, setScannerVisible] = useState(false); - const handleConfirm = (text) => { - console.log('识别完成:', text); + const handleConfirm = () => { + // 处理确认逻辑 + setScannerVisible(false); + }; + + const handleCancel = () => { + // 处理取消逻辑 setScannerVisible(false); }; const openScanner = () => { setScannerVisible(true); - formRef.current?.resetFields(); - formRef.current?.setFieldsValue({}); }; - const onCancel = () => { - setScannerVisible(false); + const getByIdRole = async () => { + const res = await getByIdRoleApi('2105180249501982') + if (res.type) { + let data = res.data + setData(data) + } + + } + + const choosePrincipal = async (id) => { + console.log(id, 'choosePrincipalId') + const res = await choosePrincipalApi(id) + if (res.type) { + let data = res.data + console.log(data, 'choosePrincipalchoosePrincipal') + } + + } + + + //删除文件 + const handleDelFile = async (id) => { + const res = await delFile(id) + if (res.type) { + $$.infoSuccess({ content: '删除成功!' }); + } + } + + //获取理由id + const getNewTimeId = async () => { + const res = await getNewTimeIdApi() + if (res.type) { + setId(res.data) + } + } + + //新增、编辑办理理由 + const saveFeedback = async (submitData) => { + console.log(submitData, 'submitData1111') + if(submitData.id) { + //编辑 + const res = await updateFeedbackApi({ + ...submitData, + }) + if (res.type) { + $$.infoSuccess({ content: '修改成功' }); + listFeedback('24083010062110001') + } + } else { + const res = await saveFeedbackApi({ + ...submitData, + caseId: '24083010062110001', + id: id, + caseTaskId: '', + }) + if (res.type) { + $$.infoSuccess({ content: '保存成功' }); + listFeedback('24083010062110001') + } + } + } + + //获取办理记录接口 + const listFeedback = async (id) => { + const res = await listFeedbackApi(id) + if (res.type) { + let data = res.data.caseFeedbackList + setList(data) + } + } + + //添加办理记录 + const addMark = () => { + setFormView(!formView); + getNewTimeId() + } + + //保存信息 + const handleFinish = () => { + let submitData = formRef.current.getFields() + saveFeedback(submitData) + setFormView(!formView); + } + + //点击编辑办理事由 + const handleEdit = (record) => { + setFormView(true) + formRef.current.setFieldsValue({ + ...record + }) + } + + const Supervising = () => { + setSupervising(!supervising) + } + + const handleTabChange1 = (newTabIndex) => { + setSelectedTab1(newTabIndex); }; + const content = selectedTab1 === '1' + ? `鉴于本事项的重要性及紧迫性,现要求你尽快启动调解程序,并确保案件能够得到及时有效的处理。请您务必于本周内完成以下事项:XX、XX、XX。请确保在事项办理的过程中,遵循公平、公正的原则,并积极促进双方达成共识` + : '1'; + + const handleSupervising = () => { + setSupervising(!supervising) + } + + const handleResponse = () => { + setResponse(!response) + } + useEffect(() => { + listFeedback('24083010062110001'); + // getByIdRole() + }, []) return ( @@ -214,7 +369,7 @@ <div><div className="title-text">经办人:</div></div> <div style={{ display: 'flex' }}> <div>王一顺</div> - <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> + <img onClick={() => setPersonView(!personView)} src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> </div> </Col> <Col span={8} style={{ display: 'flex' }}> @@ -253,96 +408,94 @@ {wantUser.wantUserId ? <WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} /> : - <InputSearch - searchButton='选择' - placeholder='请选择' - style={{ width: 350 }} - onClick={() => setIsModalVisible(true)} - onSearch={() => setIsModalVisible(true)} - /> + <Button onClick={() => setIsModalVisible(true)} style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} type='outline'>选择</Button> + // <InputSearch + // searchButton='选择' + // placeholder='请选择' + // style={{ width: 350 }} + // onClick={() => setIsModalVisible(true)} + // onSearch={() => setIsModalVisible(true)} + // /> } </FormItem> </Col> <Col span={24}> <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div> - {records.length > 0 ? - <div> - {records.map(record => ( - <div key={record.id} className='container-bottom-left-record'> - <div className='container-bottom-left-record-top'> - { - record.showView ? ( - <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} /> - ) : ( - <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} /> - ) - } - <div>{`${record.date} ${record.location}`}</div> - <div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div> - </div> - <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}> - <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'> - {record.details.map(detail => ( - <tr key={detail.title}> - <th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th> - <td>{detail.content}</td> - </tr> - ))} - </table> - </div> - </div> - ))} - </div> - : - <Empty - icon={ - <div - style={{ - display: 'flex', - justifyContent: 'center', - marginBottom: '100px' - }} + <HandleRecord isReview={false} handleEdit={handleEdit} data={list} /> + {/* {formView && */} + <div className='Form' style={{display: formView ? '' : 'none'}}> + <Col span={24} style={{ marginBottom: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5> + </Space> + </Col> + <Col span={24}> + <Form + ref={formRef} + layout='vertical' + requiredSymbol={false} + scrollToFirstError={true} > - <img src={empty} alt='' style={{ width: '160px', height: '160px' }} /> - </div> - } - description='暂无数据' - /> - } - <div className='Form'> - <Col span={24} style={{ marginBottom: '8px' }}> - <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5> - </Space> - </Col> - <Col span={24}> - <FormItem - label={<div style={{ display: 'flex' }}> - 办理意见 - <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> - <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div> - </div> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <Input.TextArea - maxLength={2000} - showWordLimit - rows={5} - placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' - wrapperStyle={{ width: '100%' }} - /> - </FormItem> - </Col> + <Row gutter={[32, 0]}> + <Col span={24}> + <FormItem + label={<div style={{ display: 'flex' }}> + 办理意见 + <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> + <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div> + </div> + } + field='handleContent' + rules={[{ message: '请填写事项概况', required: true }]} + > + <Input.TextArea + maxLength={200} + showWordLimit + rows={5} + placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' + wrapperStyle={{ width: '100%' }} + /> + </FormItem> - </div> + </Col> + <Col span={24}> + <FormItem + label={<div style={{ display: 'flex' }}> + 办理附件 + </div> + } + field='caseDes' + rules={[{ message: '请填写事项概况', required: true }]} + > + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId='24083010062110001'&&ownerId=${id}&ownerType=22_00018-102`, + }} + field='file1' + // handleChangeFile={handleChangeFile} + label='' + // editData={props.editData} + handleDelFile={handleDelFile} + /> + </FormItem> + </Col> + + </Row> + </Form> + </Col> + <Space size='middle'> + <Button type='primary' onClick={() => handleFinish()}>保存</Button> + <Button type='secondary' onClick={() => { setFormView(!formView); }}>取消添加</Button> + </Space> + </div> + {/* } */} </Col> </Form> - <Space style={{ marginTop: '38px', position: 'absolute', bottom: '4px' }}> - <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button> - <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button> + <Space style={{ marginTop: '38px', bottom: '4px' }}> + <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => addMark()}>添加办理记录</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button> + <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => SetCaseResult(!caseResult)}>结案申请</Button> + <Button type='outline' style={{ color: '#EF6C24', border: '1px solid #EF6C24' }} onClick={() => Supervising()}>督办</Button> <Button type='secondary'>返回上级页面</Button> </Space> </div> @@ -389,7 +542,41 @@ </span> } > - <Typography.Paragraph style={style}>Content of Tab Panel 2</Typography.Paragraph> + <Typography.Paragraph> + <RadioGroup + type='button' + name='lang' + defaultValue='1' + style={{ display: 'flex', margin: '0 16px 0px 16px', }} + > + <Radio value='1' style={{ flex: 1, textAlign: 'center' }}>未回复</Radio> + <Radio value='2' style={{ flex: 1, textAlign: 'center' }}>已回复</Radio> + </RadioGroup> + <div className='Supervising'> + <div style={{ display: 'flex' }}> + <img src={knock} alt='' style={{ marginRight: '4px' }} /> + <div style={{ color: '#EF6C24' }} >回复期限剩3小时</div> + </div> + <div className='Supervising-item'> + <div className='Supervising-item-title'>督办时间:</div> + <div>2024-7-12 10:50</div> + </div> + <div className='Supervising-item'> + <div className='Supervising-item-title'>督办人:</div> + <div>张三丰</div> + </div> + <div className='Supervising-item'> + <div className='Supervising-item-title'>督办内容:</div> + <div>该纠纷事件目前群众较为关注,现要求相关部门即刻启动纠纷化解工作。请负责同事务必于本周内制定出具体解决方案,并确保与当事人进行有效沟通。请各位积极响应,高效协作,争取在最短时间内妥善处理完毕。</div> + </div> + <div className='Supervising-item'> + <div className='Supervising-item-title'>督办附件:</div> + <img src={link} alt='' style={{ width: '16px' }} /> + <div>2</div> + </div> + <Button className='Supervising-btn' size='small' type='outline' onClick={() => handleResponse()}>回复</Button> + </div> + </Typography.Paragraph> </TabPane> </Tabs> @@ -401,19 +588,201 @@ visible={isModalVisible} checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined} onOk={(value) => { + console.log(value.key, value, 'value.key', 'value') setIsModalVisible(false); setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name }); + handleCheckedKeys(value.keys?.[0]) }} onClose={() => setIsModalVisible(false)} /> <DocumentScanner visible={scannerVisible} - onCancel={onCancel} onConfirm={handleConfirm} - formRef={formRef} + onCancel={handleCancel} /> - </div > + <Modal visible={personView} onCancel={() => setPersonView(false)} title='工作人员信息' centered footer={null}> + <table border="1" align="center" cellpadding="5" className="table"> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th> + <td width='380'><div style={{ display: 'flex' }}><div>{data.trueName}</div></div></td> + <th bgcolor="#F7F8FA" className="table-title" width="120">登录账号</th> + <td width='380'>{data.acc}</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title">手机号码</th> + <td>{data.mobile}</td> + <th bgcolor="#F7F8FA" className="table-title">工作电话</th> + <td>020-83002020</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title">所属部门</th> + <td>{data.deptName}</td> + <th bgcolor="#F7F8FA" className="table-title">职务</th> + <td>主任</td> + </tr> + </table> + </Modal> + <Modal visible={supervising} onCancel={() => setSupervising(false)} title='督办' centered footer={null}> + <div style={{ marginTop: '18px' }}>督办意见</div> + <Form + layout='vertical' + requiredSymbol={false} + scrollToFirstError={true} + initialValues={{ + suggestion: '' + }}//默认值 + > + <Row> + <Col span={24}> + <FormItem + field='suggestion' + > + <div className='tabs1'> + {tabs1.map((tab) => ( + <div + key={tab.index} + style={{ + color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', + border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, + borderRadius: '2px', + cursor: 'pointer', + padding: '0px 8px', + }} + onClick={() => handleTabChange1(tab.index)} + > + {tab.label} + </div> + ))} + </div> + <Input.TextArea + rows={5} + wrapperStyle={{ width: '700px' }} + value={content} + /> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label='附件材料' + field='caseDes' + rules={[{ message: '请填写事项概况', required: true }]} + > + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId='24083010062110001'&&ownerId=${id}&ownerType=22_00018-102`, + }} + field='file1' + // handleChangeFile={handleChangeFile} + label='' + // editData={props.editData} + handleDelFile={handleDelFile} + /> + </FormItem> + </Col> + <Button type='primary' style={{ marginTop: '-16px' }} onClick={() => handleSupervising()}>提交</Button> + </Row> + </Form> + </Modal> + <Modal visible={response} onCancel={() => setResponse(false)} title='回复督办' centered footer={null} style={{ overflowY: 'auto' }}> + <div style={{}}> + <Col span={24} style={{ marginBottom: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>督办意见</h5> + </Space> + </Col> + <Row gutter={[16, 16]}> + <Col span={24} > + <div className="title-text">督办时间</div> + <div>2024-7-12 10:50</div> + </Col> + <Col span={24}> + <div className="title-text">督办人</div> + <div>张三丰</div> + </Col> + <Col span={24}> + <div className="title-text">督办内容</div> + <div>该纠纷事件目前群众较为关注,现要求相关部门即刻启动纠纷化解工作。请负责同事务必于本周内制定出具体解决方案,并确保与当事人进行有效沟通。请各位积极响应,高效协作,争取在最短时间内妥善处理完毕。</div> + </Col> + <Col span={24}> + <div className="title-text">督办附件</div> + <img src={link} alt="" className="title-file" />广东好又多贸易有限公司营业执照副本.pdf + </Col> + </Row> + <Col span={24} style={{ marginBottom: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>督办回复</h5> + </Space> + </Col> + <Form + layout='vertical' + requiredSymbol={false} + scrollToFirstError={true} + initialValues={{ + suggestion: '' + }}//默认值 + > + <Row> + <Col span={24}> + <FormItem + field='suggestion' + > + <div> + + </div> + <div className='tabs1'> + {tabs2.map((tab) => ( + <div + key={tab.index} + style={{ + color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', + border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, + borderRadius: '2px', + cursor: 'pointer', + padding: '0px 8px', + }} + onClick={() => handleTabChange1(tab.index)} + > + {tab.label} + </div> + ))} + </div> + <div>更多模板</div> + + <Input.TextArea + rows={5} + wrapperStyle={{ width: '700px' }} + value={content} + /> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label='附件材料' + field='caseDes' + rules={[{ message: '请填写事项概况', required: true }]} + > + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId='24083010062110001'&&ownerId=${id}&ownerType=22_00018-102`, + }} + field='file1' + // handleChangeFile={handleChangeFile} + label='' + // editData={props.editData} + handleDelFile={handleDelFile} + /> + </FormItem> + </Col> + <Button type='primary' style={{ marginTop: '-16px', marginBottom: '16px' }} onClick={() => handleSupervising()}>提交</Button> + </Row> + </Form> + </div> + </Modal> + + <CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} /> + + </div> </> ) -- Gitblit v1.8.0