feat: 事件流转改变

zhangyongtian

2024-09-06 336a519d0481f9f1678e84bd47d46b66942b1ae0

feat: 事件流转改变

 gz-customerSystem/src/assets/images/applyRecord.png

 gz-customerSystem/src/assets/images/index.js

@@ -58,6 +58,7 @@
import examine from "./examine.png";
import knock from "./knock.png";
import edit from "./edit.png";
import applyRecord from "./applyRecord.png";

export {
  ledger_1,
@@ -110,5 +111,6 @@
  apply,
  examine,
  knock,
  edit
  edit,
  applyRecord
};

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

@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
import { Button, Modal, Tabs, Badge } from '@arco-design/web-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Button, Modal, Tabs, Badge, Steps } from '@arco-design/web-react';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';
import BackModel from "./BackModel";
@@ -7,8 +7,11 @@
import { getOffset, getSize } from '@/utils/utility';
import EscalationModel from './EscalationModel';
import AssignedModel from './AssignedModel';
import MatterDetail from '../../matterDetail';
import SupervisingView from "../../matterDetail/Supervising";

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

const fakeData = [
  {
@@ -91,94 +94,106 @@
      offsetLeft = getOffset(scrollRef.current.container).left;
      offsetTop = getOffset(scrollRef.current.container).top;
    }
    setHeight(getSize().windowH - offsetTop - 65)
    setHeight(getSize().windowH - offsetTop - 16)
  };

  return (
    <div className='dataSync'>
      <div className='dataSync-hasTabPage' >
        <Tabs defaultActiveTab='1' >
          <TabPane
            key='1'
            title={
              <span style={{ fontSize: '15px' }}>
                流转进度
              </span>
            }
          >
            <Scrollbars
              style={{ height: height }}
              ref={scrollRef}
              autoHide
            >
              <ProgressStep progressData={fakeData} />
            </Scrollbars>
          </TabPane>
          <TabPane
            key='2'
            title={
              <span style={{ fontSize: '15px' }}>
                督办信息
                <Badge maxCount={99} count={1000} />
              </span>
            }
          >
            <Scrollbars
              style={{ height: height }}
              ref={scrollRef}
            ></Scrollbars>
          </TabPane>
        </Tabs>
    <Fragment>
      <div style={{ backgroundColor: '#fff', margin: '0 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
        <Steps type='navigation' current={2}>
          <Step title='来访登记' disabled />
          <Step title='事件流转' disabled />
          <Step title='办理反馈' disabled />
          <Step title='结案审核' disabled />
          <Step title='当事人评价' disabled />
          <Step title='结案归档' disabled />
        </Steps>
      </div>

      <div className='dataSync' style={{ marginTop: '8px' }}>
        <Scrollbars
          style={{ height: height }}
          ref={scrollRef}
          autoHide
        >
          <MatterDetail />
          <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
            <Tabs defaultActiveTab='1' >
              <TabPane
                key='1'
                title={
                  <span style={{ fontSize: '15px' }}>
                    流转进度
                  </span>
                }
              >
                <ProgressStep progressData={fakeData} />
              </TabPane>
              <TabPane
                key='2'
                title={
                  <span style={{ fontSize: '15px' }}>
                    督办信息
                    <Badge maxCount={99} count={1000} />
                  </span>
                }
              >
                <div style={{ marginBottom: '20px' }}>
                  <SupervisingView id={''} />
                </div>
              </TabPane>
            </Tabs>
          </div>
        </Scrollbars>
        <Modal
          title='回退'
          visible={backVisible}
          onOk={() => setBackVisible(false)}
          onCancel={() => { setBackVisible(false) }}
          autoFocus={false}
          focusLock={true}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <BackModel />
        </Modal>
        <Modal
          title='上报'
          visible={escalationVisible}
          onOk={() => setEscalationVisible(false)}
          onCancel={() => { setEscalationVisible(false) }}
          autoFocus={false}
          focusLock={true}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <EscalationModel />
        </Modal>
        <Modal
          title='交办'
          visible={assignedVisible}
          onOk={() => setAssignedVisible(false)}
          onCancel={() => { setAssignedVisible(false) }}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <AssignedModel />
        </Modal>
        <div className="dataSync-excel">
          <Space size="large" style={{ margin: '4px 14px' }}>
            <Button type="primary"  >受理</Button>
            <Button type="primary"  >提交</Button>
            <Button type="primary"  >自行受理</Button>
            <Button type='outline' status='danger' onClick={() => setBackVisible(true)}>回退</Button>
            <Button type='outline' onClick={() => setAssignedVisible(true)}>交办</Button>
            <Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button>
            <Button type='secondary' >返回上级页面</Button>
          </Space>
        </div>
      </div>
      <div className="dataSync-excel">
        <Space size="large" style={{ margin: '4px 14px' }}>
          <Button type="primary"  >受理</Button>
          <Button type="primary"  >提交</Button>
          <Button type="primary"  >自行受理</Button>
          <Button type='outline' status='danger' onClick={() => setBackVisible(true)}>回退</Button>
          <Button type='outline' onClick={() => setAssignedVisible(true)}>交办</Button>
          <Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button>
          <Button type='secondary' >返回上级页面</Button>
        </Space>
      </div>
      <Modal
        title='回退'
        visible={backVisible}
        onOk={() => setBackVisible(false)}
        onCancel={() => { setBackVisible(false) }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <BackModel />
      </Modal>
      <Modal
        title='上报'
        visible={escalationVisible}
        onOk={() => setEscalationVisible(false)}
        onCancel={() => { setEscalationVisible(false) }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <EscalationModel />
      </Modal>
      <Modal
        title='交办'
        visible={assignedVisible}
        onOk={() => setAssignedVisible(false)}
        onCancel={() => { setAssignedVisible(false) }}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <AssignedModel />
      </Modal>
    </div>
    </Fragment>
  )
}

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

@@ -13,10 +13,10 @@
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Steps, Tabs } from '@arco-design/web-react';
import { examine, Matter, transfer } from '@/assets/images'
import { examine, Matter, transfer, applyRecord } from '@/assets/images'
import EventFlow from './component/EventFlow';
import MatterDetail from '../matterDetail';
import Examine from "./component/Examine";
import ApplyInfo from "../matterDetail/ApplyInfo";

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
@@ -28,14 +28,13 @@
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            label: '详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            img: applyRecord,
            label: '申请记录',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
        {
            img: examine,
@@ -43,6 +42,7 @@
            key: '3',
        },
    ])
    const [disTab, setDisTab] = useState(true)


    return (
@@ -52,7 +52,7 @@
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '处理' }
                }
            >
                <Tabs
                {disTab ? <Tabs
                    defaultActiveTab='1'
                    onChange={(v) => setTabsActive(v)}
                    className='myTabContent'
@@ -67,24 +67,13 @@
                                </span>
                            }
                        >
                            {
                                item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '0 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' && <MatterDetail />}
                            {tabsActive === '2' && <EventFlow />}
                            {tabsActive === '1' && <EventFlow />}
                            {tabsActive === '2' && <ApplyInfo />}
                            {tabsActive === '3' && <Examine />}
                        </TabPane>
                    })}
                </Tabs>
                </Tabs> : <EventFlow />
                }
            </NewPage>
        </div>
    )

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

@@ -78,7 +78,7 @@
                                </div>
                            }
                            {tabsActive === '1' &&
                                <MatterDetail />
                                <MatterDetail hasApplet={true} hasEditBtn={true}/>
                            }
                            {
                                tabsActive === '2' && <Typography.Paragraph style={style}>

 gz-customerSystem/src/views/register/index.less

@@ -108,6 +108,12 @@
        overflow-y: scroll;
    }

    &-noScrollPage {
        background-color: #fff;
        margin: 0px 16px 0px 16px;
        padding: 12px 16px 16px 16px;
    }

    &-addBtn {
        cursor: pointer;
        padding: 8px;
@@ -138,14 +144,9 @@
        background-color: #fff;
        margin: 8px 16px 0px 16px;
        padding: 12px 16px 64px 16px;
        height: calc(100vh - 288px);

        .arco-tabs-header-nav {
            margin-left: 0 !important;
        }

        .scrollTabContent {
            overflow-y: scroll;
        }
    }


 gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx

New file
@@ -0,0 +1,9 @@
import React from 'react'

export default function ApplyInfo(props) {
  return (
    <div>
      
    </div>
  )
}

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

@@ -11,7 +11,7 @@
}


export default function MatterDetail() {
export default function MatterDetail(props) {
  const [fakeData, setFakeData] = useState([{
    "trueName": "王大锤",
    "mobile": "13380313412",
@@ -169,15 +169,16 @@
  return (
    <div style={{ position: 'relative' }}>
      <Typography.Paragraph>
        <div className='dataSync-page'>
        <div className='dataSync-noScrollPage'>

          <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
            </Space>
            <div>
            {props.hasApplet && <div>
              <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
            </div>
            }
          </Col>
          <div style={{ margin: '16px 0' }}>
            <PersonCard
@@ -294,7 +295,7 @@
              <div>{infoData.createTime || '-'}</div>
            </Col>
          </Row>
          <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
          {props.hasEditBtn && <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>}
        </div>

      </Typography.Paragraph>