feat: 修改页面架构

zhangyongtian

2024-08-31 c41e9c7bd6fedf4e480d4737f94d13a2b9ddf5eb

feat: 修改页面架构

 gz-customerSystem/src/api/appUrl.js

@@ -10,11 +10,11 @@
export const debug = {
    // web服务
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://192.168.3.108:9002',
    baseUrl: 'http://b8bmfu.natappfree.cc',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    fileUrl: 'http://192.168.3.108:9002',
    fileUrl: 'http://b8bmfu.natappfree.cc',
    // fileUrl: 'http://gz.hugeinfo.com.cn',



 gz-customerSystem/src/router/router.js

@@ -135,9 +135,11 @@
import DataSearch from "../views/statistic/dataSearch";

//来访登记
import Visit from "../views/register/visit"
//自行排查
import Check from "../views/register/visit/check"
import Visit from "../views/register/visit";
//事件流转
import EventFlow from "../views/register/eventFlow";
//办理反馈
import HandleFeedback from "../views/register/handleFeedback";

import Test from "../views/test";

@@ -211,7 +213,8 @@
                        <Route path="judicialOverview" element={<JudicialOverview />} />
                        {/* 来访登记*/}
                        <Route path="visit" element={<Visit />} />
                        <Route path="visit/check" element={<Check />} />
                        <Route path="visit/eventFlow" element={<EventFlow />} />
                        <Route path="visit/handleFeedback" element={<HandleFeedback />} />
                        {/* 工作流模块 */}
                        <Route path="workflowTemplate" element={<WorkflowTemplate />} />
                        <Route path="workflowTemplate/workflowTemplateEdit" element={<WorkflowTemplateEdit />} />

 gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx

 gz-customerSystem/src/views/register/eventFlow/component/MattersInfo.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/agentDialog.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/applyDialog.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/levelDetail.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/map.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/selectUnitDialog.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/component/visitorRegister.jsx

File was deleted

 gz-customerSystem/src/views/register/eventFlow/index.jsx

@@ -12,33 +12,16 @@
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { Button, Steps, Tabs, Message } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';
import MattersInfo from './component/MattersInfo';
import { question, register, Matter, transfer } from '@/assets/images'
import EventFlow from './component/EventFlow';
import MatterDetali from '../matterDetail';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;

function saveDispute(data) {
    return $$.ax.request({ url: `casedraftInfo/caseDraftRegister`, type: 'post', service: 'mediate', data });
}

function getId() {
    return $$.ax.request({ url: `caseUtils/getNewTimeCaseId`, type: 'get', service: 'utils' });
}

function submitDispute(data) {
    return $$.ax.request({ url: `caseInfo/caseRegister`, type: 'post', service: 'mediate', data });
}


const Organization = () => {
    const formRef = useRef();

    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(2);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
@@ -54,178 +37,51 @@
            isNeedStep: true,//加上这个就有进度条
        },
    ])
    const breadcrumbDataMap = {
        1: { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' },
        2: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' },
        3: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
    }

    //提交信息，需要校验规则
    const handleSubmit = async () => {
        if (formRef.current) {
            formRef.current.validate(undefined, (errors, values) => {
                if (!errors) {
                    const data = formRef.current.getFields()
                    handleData(data).then(res => {
                        reauestSubmit({
                            ...res,
                            isSelfAccept: 0,
                            isDraft: 0,
                            operateType: 0,
                        })
                    })
                }
            });
        }
    }

    //保存草稿信息,不需要校验规则
    const handleSave = () => {
        if (formRef.current) {
            const data = formRef.current.getFields()
            handleData(data).then(res => {
                requestSave(res)
            })
        }
    }

    //数据处理
    const handleData = async (data) => {
        const { fakeData, ...newObj } = data
        if (data.id) {
            return {
                ...newObj,
                personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                    //personNameList用于查看详情显示代理人名字，不需要上传，去除
                    const { personNameList, ...rest } = item
                    return {
                        ...rest,
                        personId: item.personId.join(',')
                    }
                }),
            }
        } else {
            const res = await getId()
            if (res.type) {
                return {
                    ...newObj,
                    personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                    agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                        //personNameList用于查看详情显示代理人名字，不需要上传，去除
                        const { personNameList, ...rest } = item
                        return {
                            ...rest,
                            personId: item.personId.join(',')
                        }
                    }),
                    id: res.data
                }
            }
        }
    }

    //预览信息
    const handleReview = () => {
        setIsReview(!isReview)
    }

    function selfAcceptance() {
        $$.modalInfo({
            title: '自行受理确认',
            content: '确定自行受理吗？',
            okText: '确定受理',
            cancelText: '我再想想',
            onOk: async () => {
                setCurrent(3)
            },
        });
    }

    //保存请求
    const requestSave = async (data) => {
        const response = await saveDispute(data)
        if (response.type) {
            Message.success('保存草稿成功！')
        }
    }

    //提交请求
    const reauestSubmit = async (data) => {
        const response = await submitDispute(data)
        if (response.type) {
            Message.success('提交成功！')
            setCurrent(2)
        }
    }

    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    breadcrumbDataMap[current]
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                }
            >
                {
                    current === 1 &&
                    <Fragment>
                        <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                            <Steps type='navigation' current={current}>
                                <Step title='来访登记' disabled />
                                <Step title='事件流转' disabled />
                                <Step title='办理反馈' disabled />
                                <Step title='结案审核' disabled />
                                <Step title='当事人评价' disabled />
                                <Step title='结案归档' disabled />
                            </Steps>
                        </div>
                        <Preview style={{ display: isReview ? '' : 'none' }} />
                        <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>
                    </Fragment>
                }
                {
                    (current === 2 || current === 3) &&
                    <Tabs
                        defaultActiveTab='1'
                        onChange={(v) => setTabsActive(v)}
                        className='myTabContent'
                    >
                        {tabsList?.map(item => {
                            return <TabPane
                                key={item.key}
                                title={
                                    <span>
                                        {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                                        <span style={{ fontSize: '16px' }}>{item.label}</span>
                                    </span>
                                }
                            >
                                {
                                    item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                                        <Steps type='navigation' current={current}>
                                            <Step title='来访登记' disabled />
                                            <Step title='事件流转' disabled />
                                            <Step title='办理反馈' disabled />
                                            <Step title='结案审核' disabled />
                                            <Step title='当事人评价' disabled />
                                            <Step title='结案归档' disabled />
                                        </Steps>
                                    </div>
                                }
                                <MattersInfo active={tabsActive} current={current} />
                            </TabPane>
                        })}
                    </Tabs>
                }
                <Tabs
                    defaultActiveTab='1'
                    onChange={(v) => setTabsActive(v)}
                    className='myTabContent'
                >
                    {tabsList?.map(item => {
                        return <TabPane
                            key={item.key}
                            title={
                                <span>
                                    {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                                    <span style={{ fontSize: '16px' }}>{item.label}</span>
                                </span>
                            }
                        >
                            {
                                item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                                    <Steps type='navigation' current={current}>
                                        <Step title='来访登记' disabled />
                                        <Step title='事件流转' disabled />
                                        <Step title='办理反馈' disabled />
                                        <Step title='结案审核' disabled />
                                        <Step title='当事人评价' disabled />
                                        <Step title='结案归档' disabled />
                                    </Steps>
                                </div>
                            }
                            {tabsActive === '1' &&
                                <MatterDetali />
                            }
                            {
                                (tabsActive === '2' && current === 2) && <EventFlow />
                            }
                        </TabPane>
                    })}
                </Tabs>
            </NewPage>
        </div>
    )

 gz-customerSystem/src/views/register/handleFeedback/component/FileUpLoad.jsx

 gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx

File was renamed from gz-customerSystem/src/views/register/eventFlow/component/handle.jsx
@@ -1,11 +1,11 @@
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 { register, fold, down, empty, link } from '@/assets/images';
import { Form, Input, Tabs, Typography, Empty } 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 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 * as $$ from '@/utils/utility';
@@ -19,6 +19,58 @@
  textAlign: 'center',
  marginTop: 20,
};

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: '李晓明'
  },
];



@@ -324,7 +376,7 @@
                  </div>
                  {selectedTab === '1' &&
                    <div className='progress'>
                      <ProgressStep caseId='202408291012566613' pageFrom="dispatchRecord" />
                      <ProgressStep progressData={fakeData} />
                    </div>
                  }
                </Typography.Paragraph>

 gz-customerSystem/src/views/register/handleFeedback/index.jsx

New file
@@ -0,0 +1,96 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-28 14:38:20
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */

import React, { useState, useRef, Fragment } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Typography, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
import MatterDetali from '../matterDetail';
import Handle from './component/handle';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
const style = {
  // textAlign: 'center',
  // marginTop: 20,
};


const Organization = () => {
    const [current, setCurrent] = useState(3);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
    ])


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                }
            >
                <Tabs
                    defaultActiveTab='1'
                    onChange={(v) => setTabsActive(v)}
                    className='myTabContent'
                >
                    {tabsList?.map(item => {
                        return <TabPane
                            key={item.key}
                            title={
                                <span>
                                    {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                                    <span style={{ fontSize: '16px' }}>{item.label}</span>
                                </span>
                            }
                        >
                            {
                                item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                                    <Steps type='navigation' current={current}>
                                        <Step title='来访登记' disabled />
                                        <Step title='事件流转' disabled />
                                        <Step title='办理反馈' disabled />
                                        <Step title='结案审核' disabled />
                                        <Step title='当事人评价' disabled />
                                        <Step title='结案归档' disabled />
                                    </Steps>
                                </div>
                            }
                            {tabsActive === '1' &&
                                <MatterDetali />
                            }
                            {
                                tabsActive === '2' && <Typography.Paragraph style={style}>
                                    <Handle />
                                </Typography.Paragraph>
                            }
                        </TabPane>
                    })}
                </Tabs>
            </NewPage>
        </div>
    )
}

export default Organization;

 gz-customerSystem/src/views/register/visit/check.jsx

File was deleted

 gz-customerSystem/src/views/register/visit/component/FileUpLoad.jsx

File was deleted

 gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx

File was deleted

 gz-customerSystem/src/views/register/visit/component/handle.jsx

File was deleted

 gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx

File was deleted

 gz-customerSystem/src/views/register/visit/index.jsx

@@ -13,14 +13,11 @@
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { Button, Steps, Tabs, Message } from '@arco-design/web-react';
import { Button, Steps, Message } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';
import MattersInfo from './component/MattersInfo';
import { question, register, Matter, transfer } from '@/assets/images'

const Step = Steps.Step;
const TabPane = Tabs.TabPane;

function saveDispute(data) {
    return $$.ax.request({ url: `casedraftInfo/caseDraftRegister`, type: 'post', service: 'mediate', data });
@@ -39,26 +36,7 @@
    const formRef = useRef();

    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(2);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
    ])
    const breadcrumbDataMap = {
        1: { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' },
        2: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' },
        3: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
    }
    const [current, setCurrent] = useState(1);

    //提交信息，需要校验规则
    const handleSubmit = async () => {
@@ -163,69 +141,32 @@
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    breadcrumbDataMap[current]
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                {
                    current === 1 &&
                    <Fragment>
                        <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                            <Steps type='navigation' current={current}>
                                <Step title='来访登记' disabled />
                                <Step title='事件流转' disabled />
                                <Step title='办理反馈' disabled />
                                <Step title='结案审核' disabled />
                                <Step title='当事人评价' disabled />
                                <Step title='结案归档' disabled />
                            </Steps>
                        </div>
                        <Preview style={{ display: isReview ? '' : 'none' }} />
                        <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>
                    </Fragment>
                }
                {
                    (current === 2 || current === 3) &&
                    <Tabs
                        defaultActiveTab='1'
                        onChange={(v) => setTabsActive(v)}
                        className='myTabContent'
                    >
                        {tabsList?.map(item => {
                            return <TabPane
                                key={item.key}
                                title={
                                    <span>
                                        {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                                        <span style={{ fontSize: '16px' }}>{item.label}</span>
                                    </span>
                                }
                            >
                                {
                                    item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                                        <Steps type='navigation' current={current}>
                                            <Step title='来访登记' disabled />
                                            <Step title='事件流转' disabled />
                                            <Step title='办理反馈' disabled />
                                            <Step title='结案审核' disabled />
                                            <Step title='当事人评价' disabled />
                                            <Step title='结案归档' disabled />
                                        </Steps>
                                    </div>
                                }
                                <MattersInfo active={tabsActive} current={current} />
                            </TabPane>
                        })}
                    </Tabs>
                }
                <Fragment>
                    <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                        <Steps type='navigation' current={current}>
                            <Step title='来访登记' disabled />
                            <Step title='事件流转' disabled />
                            <Step title='办理反馈' disabled />
                            <Step title='结案审核' disabled />
                            <Step title='当事人评价' disabled />
                            <Step title='结案归档' disabled />
                        </Steps>
                    </div>
                    <Preview style={{ display: isReview ? '' : 'none' }} />
                    <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
                    <div className="dataSync-excel">
                        <Space size="large" style={{ margin: '4px 14px' }}>
                            <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                            <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                            <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                            <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                            <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                        </Space>
                    </div>
                </Fragment>
            </NewPage>
        </div>
    )