From f6efc465e8f5633313afc8da54c17988722073eb Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Sat, 14 Sep 2024 15:55:07 +0800 Subject: [PATCH] fix: 审核页面逻辑调整、滚动调整 --- gz-customerSystem/src/views/register/closingReview/component/ReviewExamine.jsx | 100 ++++++++---- gz-customerSystem/src/views/register/visit/preview.jsx | 2 gz-customerSystem/src/api/apiHandler.js | 1 gz-customerSystem/src/views/register/index.jsx | 4 gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx | 195 +++++++++++++----------- gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx | 148 +++++++++-------- gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 2 7 files changed, 253 insertions(+), 199 deletions(-) diff --git a/gz-customerSystem/src/api/apiHandler.js b/gz-customerSystem/src/api/apiHandler.js index 6cadc03..709a96d 100644 --- a/gz-customerSystem/src/api/apiHandler.js +++ b/gz-customerSystem/src/api/apiHandler.js @@ -52,7 +52,6 @@ export const ax = axios; export function request(value = {}) { - console.log(value); let token = getSessionStorage("customerSystemToken"); // 无token、非登录、非网格单点跳转时 diff --git a/gz-customerSystem/src/views/register/closingReview/component/ReviewExamine.jsx b/gz-customerSystem/src/views/register/closingReview/component/ReviewExamine.jsx index f25b545..c5e7665 100644 --- a/gz-customerSystem/src/views/register/closingReview/component/ReviewExamine.jsx +++ b/gz-customerSystem/src/views/register/closingReview/component/ReviewExamine.jsx @@ -7,6 +7,7 @@ import ReviewProgress from './ReviewProgress'; import * as $$ from '@/utils/utility'; import { useNavigate } from 'react-router-dom'; +import { getOffset, getSize } from '@/utils/utility'; const RadioGroup = Radio.Group; const FormItem = Form.Item; @@ -36,10 +37,13 @@ export default function ReviewExamine(props) { const navigate = useNavigate(); const formRef = useRef(); + const scrollRef = useRef(null); const [result, setResult] = useState() const [infoData, setInfoData] = useState({}); const [id, setId] = useState(); const [progressData, setProgressData] = useState({}) + const [reasonRadio, setReasonRadio] = useState(); + const [height, setHeight] = useState(500); const options = [ { label: '材料不完整', @@ -58,26 +62,42 @@ value: '4' }, ] - console.log(props.id,'props.idprops.id') + useEffect(() => { getInfoData() - getAppId() + // getAppId() getProData() + onWindowResize() + window.addEventListener("resize", onWindowResize); + // 返回一个函数,该函数会在组件卸载前执行 + return () => { + // 组件销毁时执行 + window.removeEventListener("resize", onWindowResize); + }; }, []) - //获取id - const getAppId = async () => { - const res = await getId() - if (res.type) { - setId(res.data) + const onWindowResize = () => { + let offsetTop = 0; + if (scrollRef.current.container) { + offsetTop = getOffset(scrollRef.current.container).top; } - } + setHeight(getSize().windowH - offsetTop - 80) + }; + + //获取id + // const getAppId = async () => { + // const res = await getId() + // if (res.type) { + // setId(res.data) + // } + // } //回显数据 const getInfoData = async () => { const res = await getData({ caseTaskId: props.caseTaskId }) if (res.type) { setInfoData(res.data || {}) + setId(res.data.id) } } @@ -97,7 +117,7 @@ if (!errors) { const { file, myNoUp, ...rest } = formRef.current.getFields() requestSubmit({ - id: props.id, + id: id, caseId: props.caseId, caseTaskId: props.caseTaskId, ...rest @@ -125,8 +145,8 @@ return ( <div className='dataSync'> - <div className='dataSync-noBackTabPage'> - <Scrollbars style={{ height: '100%' }} autoHide> + <div className='dataSync-noBackTabPage' style={{ background: '#fff' }}> + <Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}> <div className='whiteBox'> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>结案申请</h5> @@ -166,7 +186,7 @@ </Col> </Row> </div> - <div style={{ display: 'flex', marginTop: '8px' }}> + <div style={{ display: 'flex', borderTop: '8px solid #f0f2f5' }}> <div className='whiteBox' style={{ flex: 1, marginRight: '8px' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核</h5> @@ -176,6 +196,8 @@ layout='vertical' requiredSymbol={false} initialValues={{ + auditResult: '24_00004-1', + auditResultName: '同意' }}//默认值 scrollToFirstError > @@ -212,25 +234,32 @@ direction='vertical' options={options} onChange={(value) => { - const obj = options.find(item => item.value === value) - formRef.current.setFieldValue('audit_content', obj.label) + setReasonRadio(value) + if (value !== '4') { + const obj = options.find(item => item.value === value) + formRef.current.setFieldValue('auditContent', obj.label) + } else { + formRef.current.setFieldValue('auditResultName', '') + } }} > </RadioGroup> </FormItem> </Col> - <Col span={24}> - <FormItem - label=' ' - field='audit_content' - rules={[{ required: true, message: '理由不能为空' }]} - > - <TextArea - autoSize={{ minRows: 4, maxRows: 8 }} - placeholder='请填写回退的具体理由' - /> - </FormItem> - </Col> + { + reasonRadio === '4' && <Col span={24}> + <FormItem + label=' ' + field='auditContent' + rules={[{ required: true, message: '理由不能为空' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写回退的具体理由' + /> + </FormItem> + </Col> + } <Col span={24} className="doubleFile"> <ArcoUpload params={{ @@ -245,15 +274,6 @@ } </Row> </Form> - <div className='dialogFooter'> - <Button - type="primary" - className="dialogPrimary" - onClick={handleSubmit} - > - 提交 - </Button> - </div> </div> { (infoData.caseLevel === 1 || infoData.caseLevel === 2) && @@ -266,6 +286,16 @@ } </div> </Scrollbars> + <div className='dialogFooter' style={{ margin: 0, padding: '16px 12px' }}> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button> + </div> </div> </div> ) diff --git a/gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx b/gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx index 72bbed3..c0b35ae 100644 --- a/gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx +++ b/gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx @@ -34,6 +34,8 @@ const [infoData, setInfoData] = useState({}); const [id, setId] = useState(); const [height, setHeight] = useState(500); + const [agreeRadio, setAgreeRadio] = useState(); + const [reasonRadio, setReasonRadio] = useState(); const mainFlag = props.type == 'htsh' ? 'return' : 'appear' const options = [ { @@ -69,7 +71,7 @@ if (scrollRef.current.container) { offsetTop = getOffset(scrollRef.current.container).top; } - setHeight(getSize().windowH - offsetTop - 74) + setHeight(getSize().windowH - offsetTop - 80) }; //回显数据 @@ -117,45 +119,45 @@ return ( <div className='dataSync'> - <div className='dataSync-noBackTabPage'> - <div className='whiteBox'> - <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>{props.type === 'htsh' ? '回退申请' : '上报申请'}</h5> - </Space> - <Row gutter={[16, 16]}> - <Col span={24}> - <div><div className="title-text">{props.type === 'htsh' ? '回退理由' : '上报理由'}</div></div> - <div>{infoData[mainFlag + 'Content'] || '-'}</div> - </Col> - <Col span={24}> - <div><div className="title-text">附件材料</div></div> - <div style={{ color: '#1A6FB8' }}> - {infoData?.fileInfoList?.map(res => { - return res.fileList.map((result, resIndex) => { - return <a href="your-link-here.html" target="_blank"> - <img src={link} alt="" className="title-file" />{result.name} - {resIndex !== res.fileList.length - 1 && <>,</>} - </a> - }) - }) || '-'} - </div> - </Col> - <Col span={24}> - <div><div className="title-text">申请时间</div></div> - <div>{$$.myTimeFormat(infoData[mainFlag + 'Time'], 'YYYY-MM-DD HH:mm') || '-'}</div> - </Col> - <Col span={24}> - <div><div className="title-text">申请人</div></div> - <div> - {infoData[mainFlag + 'UnitName']} - {infoData[mainFlag + 'UserName'] || '-'} - <img src={register} alt="" className="title-register" /> - </div> - </Col> - </Row> - </div> - <div className='whiteBox' style={{ marginTop: '8px' }}> - <Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}> + <div className='dataSync-noBackTabPage' style={{ background: '#fff' }}> + <Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}> + <div className='whiteBox'> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>{props.type === 'htsh' ? '回退申请' : '上报申请'}</h5> + </Space> + <Row gutter={[16, 16]}> + <Col span={24}> + <div><div className="title-text">{props.type === 'htsh' ? '回退理由' : '上报理由'}</div></div> + <div>{infoData[mainFlag + 'Content'] || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">附件材料</div></div> + <div style={{ color: '#1A6FB8' }}> + {infoData?.fileInfoList?.map(res => { + return res.fileList.map((result, resIndex) => { + return <a href="your-link-here.html" target="_blank"> + <img src={link} alt="" className="title-file" />{result.name} + {resIndex !== res.fileList.length - 1 && <>,</>} + </a> + }) + }) || '-'} + </div> + </Col> + <Col span={24}> + <div><div className="title-text">申请时间</div></div> + <div>{$$.myTimeFormat(infoData[mainFlag + 'Time'], 'YYYY-MM-DD HH:mm') || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">申请人</div></div> + <div> + {infoData[mainFlag + 'UnitName']} + {infoData[mainFlag + 'UserName'] || '-'} + <img src={register} alt="" className="title-register" /> + </div> + </Col> + </Row> + </div> + <div className='whiteBox' style={{ borderTop: '8px solid #f0f2f5' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核</h5> </Space> @@ -164,6 +166,8 @@ layout='vertical' requiredSymbol={false} initialValues={{ + auditResult: '24_00004-1', + auditResultName: "同意" }}//默认值 scrollToFirstError > @@ -177,6 +181,7 @@ direction='vertical' options={$$.options.auditResult} onChange={(value) => { + setAgreeRadio(value) if (value) { const data = $$.options.auditResult.find(item => item.value === value) formRef.current.setFieldValue('auditResultName', data.label) @@ -187,59 +192,71 @@ /> </FormItem> </Col> - <Col span={24}> - <FormItem - label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)} - field='myNoUp' - rules={[{ required: true, message: '请选择理由说明' }]} - > - <RadioGroup - direction='vertical' - options={options} - onChange={(value) => { - const obj = options.find(item => item.value === value) - formRef.current.setFieldValue('auditContent', obj.label) - }} - > - </RadioGroup> - </FormItem> - </Col> - <Col span={24}> - <FormItem - label=' ' - field='auditContent' - rules={[{ required: true, message: '理由不能为空' }]} - > - <TextArea - autoSize={{ minRows: 4, maxRows: 8 }} - placeholder='请填写回退的具体理由' - /> - </FormItem> - </Col> - <Col span={24} className="doubleFile"> - <ArcoUpload - params={{ - action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${id}&ownerType=${props.type == 'htsh' ? '22_00018-511' : '22_00018-513'}`, - }} - field='file' - label='附件材料' - handleDelFile={handleDelFile} - /> - </Col> + {agreeRadio == '24_00004-2' && + <> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)} + field='myNoUp' + rules={[{ required: true, message: '请选择理由说明' }]} + > + <RadioGroup + direction='vertical' + options={options} + onChange={(value) => { + setReasonRadio(value) + if (value !== '2') { + const obj = options.find(item => item.value === value) + formRef.current.setFieldValue('auditContent', obj.label) + } else { + formRef.current.setFieldValue('auditContent', '') + } + }} + > + </RadioGroup> + </FormItem> + </Col> + { + reasonRadio === '2' && <Col span={24}> + <FormItem + label=' ' + field='auditContent' + rules={[{ required: true, message: '理由不能为空' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder={`请填写不同意${props.type === 'htsh' ? '回退' : '上报'}的具体理由`} + /> + </FormItem> + </Col> + } + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${id}&ownerType=${props.type == 'htsh' ? '22_00018-511' : '22_00018-513'}`, + }} + field='file' + label='附件材料' + handleDelFile={handleDelFile} + /> + </Col> + </> + } </Row> </Form> - </Scrollbars> - <div className='dialogFooter'> - <Button - type="primary" - className="dialogPrimary" - onClick={handleSubmit} - > - 提交 - </Button> </div> + </Scrollbars> + <div className='dialogFooter' style={{ margin: 0, padding: '16px 12px' }}> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button> </div> </div> - </div> + </div > ) } diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx index 941952c..32121ac 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx @@ -31,6 +31,7 @@ const [id, setId] = useState(); const [infoData, setInfoData] = useState({}); const [height, setHeight] = useState(500); + const [agreeRadio, setAgreeRadio] = useState(); useEffect(() => { getInfoData() @@ -48,7 +49,7 @@ if (scrollRef.current.container) { offsetTop = getOffset(scrollRef.current.container).top; } - setHeight(getSize().windowH - offsetTop - 74) + setHeight(getSize().windowH - offsetTop - 80) }; //回显数据 @@ -93,39 +94,39 @@ return ( <div className='dataSync'> - <div className='dataSync-noBackTabPage'> - <div className="whiteBox"> - <Col span={24} className='title'> - <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>联合处置申请</h5> - </Space> - </Col> - <Row gutter={[16, 16]}> - <Col span={24}> - <div><div className="title-text">添加配合部门</div></div> - <div>{infoData.applyAssistUnitName || '-'}</div> + <div className='dataSync-noBackTabPage' style={{ background: '#fff' }}> + <Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}> + <div className="whiteBox"> + <Col span={24} className='title'> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>联合处置申请</h5> + </Space> </Col> - <Col span={24}> - <div><div className="title-text">添加理由</div></div> - <div>{infoData.applyContent || '-'}</div> - </Col> - <Col span={24}> - <div className="title"><div className="title-text">申请时间</div></div> - <div>{$$.myTimeFormat(infoData.applyTime, 'YYYY-MM-DD HH:mm') || '-'}</div> - </Col> - <Col span={24}> - <div><div className="title-text">申请人</div></div> - <div> - {infoData.applyUnitName} - {infoData.applyUserName || '-'} - <img src={register} alt="" className="title-register" /> - </div> - </Col> - </Row> + <Row gutter={[16, 16]}> + <Col span={24}> + <div><div className="title-text">添加配合部门</div></div> + <div>{infoData.applyAssistUnitName || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">添加理由</div></div> + <div>{infoData.applyContent || '-'}</div> + </Col> + <Col span={24}> + <div className="title"><div className="title-text">申请时间</div></div> + <div>{$$.myTimeFormat(infoData.applyTime, 'YYYY-MM-DD HH:mm') || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">申请人</div></div> + <div> + {infoData.applyUnitName} + {infoData.applyUserName || '-'} + <img src={register} alt="" className="title-register" /> + </div> + </Col> + </Row> - </div> - <div className='whiteBox' style={{ marginTop: '8px' }}> - <Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}> + </div> + <div className='whiteBox' style={{ borderTop: '8px solid #f0f2f5' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核</h5> </Space> @@ -134,6 +135,8 @@ layout='vertical' requiredSymbol={false} initialValues={{ + auditResult: '24_00004-1', + auditResultName: "同意" }}//默认值 scrollToFirstError > @@ -147,6 +150,7 @@ direction='vertical' options={$$.options.auditResult} onChange={(value) => { + setAgreeRadio(value) if (value) { const data = $$.options.auditResult.find(item => item.value === value) formRef.current.setFieldValue('auditResultName', data.label) @@ -157,47 +161,51 @@ /> </FormItem> </Col> - <Col span={24}> - <FormItem - label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)} - field='auditContent' - rules={[{ required: true, message: '请选择理由说明' }]} - > - <TextArea - autoSize={{ minRows: 4, maxRows: 8 }} - placeholder='请填写不同意联合处置申请的理由' - /> - </FormItem> - </Col> - <Col span={24} className="doubleFile"> - <ArcoUpload - params={{ - action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${id}&ownerType=22_00018-509`, - }} - field='file' - label={ - <div> - 附件材料 - <Tooltip> - <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '-3px 4px 0px 4px' }} /> - </Tooltip> - </div> - } - handleDelFile={handleDelFile} - /> - </Col> + {agreeRadio == '24_00004-2' && + <> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)} + field='auditContent' + rules={[{ required: true, message: '请选择理由说明' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写不同意联合处置申请的理由' + /> + </FormItem> + </Col> + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${id}&ownerType=22_00018-509`, + }} + field='file' + label={ + <div> + 附件材料 + <Tooltip> + <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '-3px 4px 0px 4px' }} /> + </Tooltip> + </div> + } + handleDelFile={handleDelFile} + /> + </Col> + </> + } </Row> </Form> - </Scrollbars> - <div className='dialogFooter'> - <Button - type="primary" - className="dialogPrimary" - onClick={handleSubmit} - > - 提交 - </Button> </div> + </Scrollbars> + <div className='dialogFooter' style={{ margin: 0, padding: '16px 12px' }}> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> </div> </div> </div> diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx index 2bb49af..a2a9fd8 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx @@ -213,7 +213,7 @@ scrollToFirstError={true} requiredSymbol={false} initialValues={{ - agreeType: 1, + agreeType: 2, }} //默认值 > <Col span={8}> diff --git a/gz-customerSystem/src/views/register/index.jsx b/gz-customerSystem/src/views/register/index.jsx index 0fca04b..8f5a353 100644 --- a/gz-customerSystem/src/views/register/index.jsx +++ b/gz-customerSystem/src/views/register/index.jsx @@ -225,8 +225,8 @@ }, { title: '回退部门', - dataIndex: 'backUnit', - key: 'backUnit', + dataIndex: 'organizingUnit', + key: 'organizingUnit', width: 150, }, { diff --git a/gz-customerSystem/src/views/register/visit/preview.jsx b/gz-customerSystem/src/views/register/visit/preview.jsx index 429a2fa..d908672 100644 --- a/gz-customerSystem/src/views/register/visit/preview.jsx +++ b/gz-customerSystem/src/views/register/visit/preview.jsx @@ -147,7 +147,7 @@ <div ><div className="title-text">问题属地</div></div> <div> {props.data?.queProvName ? - `${props.data.queProvName}/${props.data.queCityName}/${props.data.queAreaName}/${props.data.queRoadName}` + `${props.data.queCityName}/${props.data.queAreaName}/${props.data.queRoadName}` : '-' } </div> -- Gitblit v1.8.0