From cf88306b1f6aade9f0c6c4fa5859872d3f177c4a Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Fri, 13 Sep 2024 14:56:29 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh --- gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx | 350 ++++++++++++++++++++++++---------------------------------- 1 files changed, 146 insertions(+), 204 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx index 332190d..c6b887f 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx @@ -15,74 +15,19 @@ import HandleRecord from '../../matterDetail/HandleRecord'; import SupervisingView from '../../matterDetail/Supervising' import UniteHandle from '../../matterDetail/UniteHandle'; - +import { useNavigate } from 'react-router-dom'; const Option = Select.Option; const FormItem = Form.Item; const TabPane = Tabs.TabPane; const appUrl = $$.appUrl; - - -const fakeData = [ - { - handlerUserName: '天河区棠下街综治中心', - finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '来访登记', - mediResult: '22_00025-1', - handleContent: '调解成功,双方达成一致意见。', - operationName: '李晓明' - }, - { - handlerUserName: '系统派单', - finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '派单至:白云区新市街市场监管所', - }, - { - handlerUserName: '白云区新市街市场监管所', - finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '已签收', - operationName: '赵菲菲' - }, - { - handlerUserName: '白云区新市街市场监管所', - finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '3', - taskNodeName: '事件回退', - mediResult: '22_00025-1', - // handleContent: '已签收', - operationName: '赵菲菲' - }, - { - handlerUserName: '天河区棠下街综治中心', - finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间 - handleResult: '2', - status: '1', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '案件已被签收,准备开始调解。', - operationName: '李晓明' - }, -]; - - -function choosePrincipalApi(id) { - return $$.ax.request({ url: 'caseInfoUnfold/choosePrincipal?caseId=24083010062110001&userId=' + id, type: 'get', service: 'mediate' }); +function choosePrincipalApi(caseId, userId) { + return $$.ax.request({ url: `caseInfoUnfold/choosePrincipal?caseId=${caseId}&userId=` + userId, type: 'get', service: 'mediate' }); } function delFile(id) { - return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data: { id } }); + return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } }); } function getNewTimeIdApi(id) { @@ -101,20 +46,26 @@ return $$.ax.request({ url: `caseFeedback/updateFeedback`, type: 'post', service: 'mediate', data }); } -function getFeedbackInfoApi(caseTaskId) { - return $$.ax.request({ url: `caseFeedback/getFeedbackInfo?caseTaskId=` + caseTaskId, type: 'get', service: 'mediate' }); +function getFeedbackInfoApi(caseId) { + return $$.ax.request({ url: `caseFeedback/getFeedbackInfo?caseId=` + caseId, type: 'get', service: 'mediate' }); } function getByIdRoleApi(id) { return $$.ax.request({ url: `ctUser/getByIdRole?id=` + id, type: 'get', service: 'cust' }); } +function getListCaseFlow(caseId) { + return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=` + caseId, type: 'get', service: 'mediate' }); +} +//删除经办人 +function deletePrincipalApi(caseId) { + return $$.ax.request({ url: `caseInfoUnfold/deletePrincipal?caseId=` + caseId, type: 'get', service: 'mediate' }); +} -const Handle = () => { +const Handle = ({ authorData, caseTaskId, caseId }) => { const formRef = useRef(); - const routeData = useParams(); - const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab + const navigate = useNavigate(); const [selectedTab1, setSelectedTab1] = useState('1'); // 默认选中第一个 tab const [wantUser, setWantUser] = useState({}); const [formView, setFormView] = useState(false); @@ -131,13 +82,36 @@ const [id, setId] = useState(''); const [uniteHandleId, setUniteHandleId] = useState(''); const [caseResultId, setCaseResultId] = useState(''); + const [managerName, setManagerName] = useState('') + const [progressData, setProgressData] = useState({}); + const [staticButtonList, setStaticButtonList] = useState([]) - - - const tabs = [ - { index: '1', label: '承办部门' }, - { index: '2', label: '配合部门' }, - ]; + const myButton = [ + { + label: '添加办理记录', + type: 'primary', + click: () => addMark(), + key: 'tjbljl', + }, + { + label: '联合处置申请', + type: 'outline', + click: () => uniteHandle(), + key: 'lhczsq', + }, + { + label: '结案申请', + type: 'outline', + click: () => uniteHandle(), + key: 'jasq', + }, + { + label: '督办', + type: 'outline', + click: () => Supervising(), + key: 'db', + }, + ] const tabs1 = [ { index: '1', label: '公共模板:提醒尽快启动调解程序督办模板' }, @@ -147,15 +121,6 @@ const options = [ { value: '1', label: '一' }, { value: '2', label: '二' }, { value: '3', label: '三' } ]; - - const tabs2 = [ - { index: '1', label: '公共模板1:回复督办内容收到通用范本' }, - ] - - - const handleTabChange = (newTabIndex) => { - setSelectedTab(newTabIndex); - }; const handleCheckedKeys = (userId) => { choosePrincipal(userId) @@ -168,30 +133,31 @@ setScannerVisible(false); }; + const handleWantUserClose = () => { + setWantUser({ wantUserId: null, wantUserName: null }) + deletePrincipalApi(caseId) + } + const handleCancel = () => { // 处理取消逻辑 setScannerVisible(false); }; - const openScanner = () => { - setScannerVisible(true); - }; const choosePrincipal = async (id) => { - console.log(id, 'choosePrincipalId') - const res = await choosePrincipalApi(id) + const res = await choosePrincipalApi(caseId, id) if (res.type) { - let data = res.data - console.log(data, 'choosePrincipalchoosePrincipal') + getFeedbackInfo() } - } const getByIdRole = async () => { - const res = await getByIdRoleApi('2105180249501982') - setPersonData(res.data) - + const res = await getByIdRoleApi(feedbackInfoData?.handleUserId) + if (res.type) { + setPersonView(!personView) + setPersonData(res.data) + } } @@ -207,7 +173,6 @@ //新增、编辑办理理由 const saveFeedback = async (submitData) => { - console.log(submitData, 'submitData1111') if (submitData.id) { //编辑 const res = await updateFeedbackApi({ @@ -215,34 +180,41 @@ }) if (res.type) { $$.infoSuccess({ content: '修改成功' }); - listFeedback('24083010062110001') + listFeedback(caseId); + formRef.current.resetFields(); } } else { const res = await saveFeedbackApi({ ...submitData, - caseId: "24083010062110001", + caseId: caseId, id: id, caseTaskId: '', }) if (res.type) { $$.infoSuccess({ content: '保存成功' }); - listFeedback('24083010062110001') + listFeedback(caseId); + formRef.current.resetFields(); } } } const getFeedbackInfo = async () => { - const res = await getFeedbackInfoApi('24083010062110001') - setFeedbackInfoData(res.data) - console.log(res.data, 'res.data') + const res = await getFeedbackInfoApi(caseId) + if (res.type) { + let data = res.data; + setFeedbackInfoData(data); + setWantUser({ wantUserName: data?.handleUserName }) + } } //获取办理记录接口 const listFeedback = async (id) => { const res = await listFeedbackApi(id) if (res.type) { - let data = res.data.caseFeedbackList + let data = res.data.caseFeedbackList; + let manager = res.data.manager setList(data) + setManagerName(manager) } } @@ -253,13 +225,22 @@ if (type === 'uniteHandle') { setUniteHandleId(res.data) } - if (type === 'addMark') + if (type === 'addMark') { setId(res.data) + } if (type === 'caseResult') { setCaseResultId(res.data) } } } + + const getData = async (id) => { + const res = await getListCaseFlow(id) + if (res.type) { + setProgressData(res.data) + } + } + //添加办理记录 const addMark = () => { @@ -269,9 +250,15 @@ //保存信息 const handleFinish = () => { - let submitData = formRef.current.getFields() - saveFeedback(submitData) - setFormView(!formView); + if (formRef.current) { + formRef.current.validate(undefined, (errors, values) => { + if (!errors) { + let submitData = formRef.current.getFields() + saveFeedback(submitData) + setFormView(!formView); + } + }); + } } //点击编辑办理事由 @@ -305,10 +292,6 @@ setSupervising(!supervising) } - const handlePersonView = () => { - setPersonView(!personView) - - } const handleCaseResultApply = () => { SetCaseResult(!caseResult) @@ -317,19 +300,35 @@ useEffect(() => { - listFeedback('24083010062110001'); + listFeedback(caseId); + getData(caseId) getFeedbackInfo(); - getByIdRole(); }, []) + + useEffect(() => { + if (authorData) { + const { buttonList } = authorData; + setStaticButtonList(myButton.filter(item => { + const flag = buttonList.some(result => { + if (result.id === item.key) { + return true + } + }) + return flag + })) + console.log(buttonList, myButton); + } + }, [authorData]) + return ( <> - <div className='container'> + <div className='container' style={{ height: 'calc(-307px + 100vh)' }}> <div className='container-top'> <Col span={24}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理信息</h4> </Space> </Col> <Row gutter={[16, 16]}> @@ -339,9 +338,14 @@ </Col> <Col span={8} style={{ display: 'flex' }}> <div><div className="title-text">经办人:</div></div> - <div style={{ display: 'flex' }}> - <div>{feedbackInfoData?.handleUserName}</div> - <img onClick={() => handlePersonView()} src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> + <div style={{ marginTop: '-4px' }}> + { + wantUser.wantUserName ? + <> + <WantUserTag name={wantUser.wantUserName} onClose={() => handleWantUserClose()} /> </> + : + <Button onClick={() => { setIsModalVisible(true); }} style={{ color: '#1A6FB8', marginTop: '-2px' }} type='outline'>选择</Button> + } </div> </Col> <Col span={8} style={{ display: 'flex' }}> @@ -350,7 +354,7 @@ </Col> <Col span={8} style={{ display: 'flex' }}> <div><div className="title-text">受理时间:</div></div> - <div>{feedbackInfoData?.acceptTime}</div> + <div>{$$.minuteFormat(feedbackInfoData?.acceptTime)}</div> </Col> </Row> @@ -358,9 +362,9 @@ <div className='container-bottom'> <div className='container-bottom-left'> - <Col span={24} style={{ marginBottom: '8px' }}> + <Col span={24} style={{}}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>办理反馈</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理反馈</h4> </Space> </Col> <Form @@ -368,30 +372,13 @@ requiredSymbol={false} scrollToFirstError={true} > - <Col span={8}> - <FormItem label={<div style={{ display: 'flex' }}> - <span style={{ color: '#86909C' }}>经办人</span> - <Tooltip> - <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> - </Tooltip> - </div> - } - field='level' > - {wantUser.wantUserId ? - <WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} /> - : - <Button onClick={() => setIsModalVisible(true)} style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} type='outline'>选择</Button> - } - </FormItem> - </Col> <Col span={24}> - <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div> <HandleRecord isReview={false} handleEdit={handleEdit} data={list} /> {/* {formView && */} - <div className='Form' style={{ display: formView ? '' : 'none' }}> + <div className='Form' style={{ display: formView ? '' : 'none', marginBottom: '50px' }}> <Col span={24} style={{ marginBottom: '8px' }}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>添加办理记录</h4> </Space> </Col> <Col span={24}> @@ -404,24 +391,18 @@ <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> - } + label={(<div style={{ display: 'flex' }}>办理意见<div className="must">必填</div></div>)} field='handleContent' - rules={[{ message: '请填写事项概况', required: true }]} + rules={[{ message: '请填写办理意见', required: true }]} > <Input.TextArea maxLength={200} showWordLimit - rows={5} - placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' + rows={7} + placeholder='办理意见应该填写完整,办理意见应具备5要素:调解时间+调解参与部门/人+调解地点+调解过程+调解结果' wrapperStyle={{ width: '100%' }} /> </FormItem> - </Col> <Col span={24}> <FormItem @@ -429,12 +410,11 @@ 办理附件 </div> } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} + field='file' > <ArcoUpload params={{ - action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${'24083010062110001'}&ownerId=${id}&ownerType=${'22_00018-501'}`, + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${id}&ownerType=${'22_00018-501'}`, }} field='file1' // handleChangeFile={handleChangeFile} @@ -456,47 +436,30 @@ {/* } */} </Col> </Form> - <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' }} onClick={() => uniteHandle()}>联合处置申请</Button> - <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => handleCaseResultApply()} >结案申请</Button> - <Button type='outline' style={{ color: '#EF6C24', border: '1px solid #EF6C24' }} onClick={() => Supervising()}>督办</Button> - <Button type='secondary'>返回上级页面</Button> - </Space> + <div className="dataSync-excel"> + <Space size="middle" style={{ margin: '4px 14px' }}> + {staticButtonList?.map(item => { + const { label, key, click, ...rest } = item; + return <Button key={key} onClick={click} {...rest} >{label}</Button> + })} + <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button> + </Space> + </div> </div> <div className='container-bottom-right'> <Tabs defaultActiveTab='1' className='tabs-container' > <TabPane key='1' title={ - <span style={{ fontSize: '15px' }}> + <span style={{ fontSize: '15px', paddingTop: '-16px' }}> 流转进度 </span> } > <Typography.Paragraph> - <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}> - {tabs.map((tab) => ( - <div - key={tab.index} - style={{ - color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', - padding: '6px 12px', - border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, - borderRadius: '4px', - cursor: 'pointer', - }} - onClick={() => handleTabChange(tab.index)} - > - {tab.label} - </div> - ))} + <div className='progress' style={{ paddingBottom: '16px', marginTop: '0px' }} > + <ProgressStep progressData={progressData} hasTab={true} /> </div> - {selectedTab === '1' && - <div className='progress'> - <ProgressStep progressData={fakeData} /> - </div> - } </Typography.Paragraph> </TabPane> <TabPane @@ -521,12 +484,13 @@ 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]) + handleCheckedKeys(value.keys?.[0]); + }} onClose={() => setIsModalVisible(false)} + type='person' /> <DocumentScanner @@ -534,28 +498,6 @@ onConfirm={handleConfirm} onCancel={handleCancel} /> - <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>{personData?.trueName}</div></div></td> - <th bgcolor="#F7F8FA" className="table-title" width="120">登录账号</th> - <td width='380'>{personData?.acc}</td> - </tr> - <tr> - <th bgcolor="#F7F8FA" className="table-title">手机号码</th> - <td>{personData?.mobile}</td> - <th bgcolor="#F7F8FA" className="table-title">工作电话</th> - <td>-</td> - </tr> - <tr> - <th bgcolor="#F7F8FA" className="table-title">所属部门</th> - <td>{personData?.deptName}</td> - <th bgcolor="#F7F8FA" className="table-title">职务</th> - <td>{personData?.userRoles}</td> - </tr> - </table> - </Modal> <Modal visible={supervising} onCancel={() => setSupervising(false)} title='督办' centered footer={null}> <Form ref={formRef} @@ -579,7 +521,7 @@ allowClear > {options.map((option) => ( - <Option key={option.value} value={option.value} onChange={(v) => console.log(v, 'vvvvvv')}> + <Option key={option.value} value={option.value}> {option.label} </Option> ))} @@ -640,8 +582,8 @@ </Row> </Form> </Modal> - <UniteHandle id={uniteHandleId} visible={uniteHandleView} handleOnCancel={() => setUniteHandleView(false)} /> - <CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} caseResultId={caseResultId} caseId={routeData.caseId} /> + <UniteHandle id={uniteHandleId} visible={uniteHandleView} handleOnCancel={() => setUniteHandleView(false)} caseId={caseId} caseTaskId={caseTaskId} /> + <CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} caseResultId={caseResultId} caseId={caseId} caseTaskId={caseTaskId} /> </div> </> -- Gitblit v1.8.0