feat： 结案审核静态

zhangyongtian

2024-09-05 ea23af49874833b91e8bcecf1905a97124a2bd7a

feat： 结案审核静态

 gz-customerSystem/src/router/router.js

@@ -142,6 +142,8 @@
import HandleFeedback from "../views/register/handleFeedback";
//档案信息
import FileMessage from "../views/register/matterDetail/fileMessage";
//结案审核
import ClosingReview from "../views/register/closingReview";

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

@@ -218,6 +220,7 @@
                        <Route path="visit/eventFlow" element={<EventFlow />} />
                        <Route path="visit/handleFeedback" element={<HandleFeedback />} />
                        <Route path="visit/fileMessage" element={<FileMessage />} />
                        <Route path="visit/closingReview" element={<ClosingReview />}/>

                        
                        

 gz-customerSystem/src/views/register/closingReview/component/AssignedModel.jsx

New file
@@ -0,0 +1,130 @@
import React, { useRef, useState } from 'react'
import { Row, Col } from 'antd';
import { Form, Input, Button, Select } from '@arco-design/web-react';
import ArcoUpload from '@/components/ArcoUpload';
import { Scrollbars } from "react-custom-scrollbars";
import SelectObjModal from '@/components/SelectObjModal/selectPerson';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
const options = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan'];

export default function BackModel(props) {
  const formRef = useRef();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [wantUser, setWantUser] = useState({});

  const handleSubmit = () => {
    formRef.current.validate(undefined, (errors, values) => {
      console.log(errors, values);
    })
  }

  const handleTemplate = (type) => {
    if (type === 1) {
      formRef.current.setFieldValue('trueName', '本事项经初步核实，认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事，尽快查明事实真相，依法依规进行处理，并在处理过程中充分考虑当事人的合理诉求，确保公平公正，维护当事人的合法权益。同时，请务必保持与当事人的沟通畅通，及时反馈办理进展，以增强矛盾纠纷化解工作的透明度和公信力。')
    } else {
      formRef.current.setFieldValue('trueName', '')
    }
  }

  const handleFocus = (e) => {
    e.stopPropagation()
    setIsModalVisible(true)
  }

  return (
    <div>
      <Scrollbars style={{ height: '550px' }} autoHide>
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          scrollToFirstError
        >
          <Row>
            <Col span={24}>
              <FormItem
                label={(<div style={{ display: 'flex' }}>承办部门<div className="must">必填</div></div>)}
                field='bumen'
              >
                <Select
                  mode='multiple'
                  placeholder='请选择承办部门'
                  allowClear
                  onFocus={handleFocus}
                >
                </Select>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label={(<div style={{ display: 'flex' }}>配合部门<div style={{ color: '#86909C' }}>（可多选）</div></div>)}
                field='peihe'
              >
                <Select
                  mode='multiple'
                  placeholder='请选择配合部门'
                  allowClear
                >
                  {options.map((option) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </FormItem>
            </Col>
            <Col span={24} style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}>
                <div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate(1) }}>公共模板1：通用上报意见范本</div>
                <div className='myTag' onClick={() => { handleTemplate(2) }}>个人模板1：张三的交办意见范本</div>
              </div>
              <FormItem
                label={(<div style={{ display: 'flex' }}>交办意见<div className="must">必填</div></div>)}
                field='trueName'
                rules={[{ required: true, message: '请选择回退理由' }]}
              >
                <TextArea
                  autoSize={{ minRows: 4, maxRows: 8 }}
                  placeholder='请填写回退的具体理由'
                  style={{ marginTop: '40px' }}
                />
              </FormItem>
            </Col>
            <Col span={24} className="doubleFile">
              <ArcoUpload
                params={{
                  action: ``,
                }}
                field='file'
                label='附件材料'
              />
            </Col>
          </Row>
        </Form>
      </Scrollbars>
      <div className='dialogFooter'>
        <Button
          type="primary"
          className="dialogPrimary"
          onClick={handleSubmit}
        >
          提交
        </Button>
      </div>
      <SelectObjModal
        visible={isModalVisible}
        checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
        onOk={(value) => {
          setIsModalVisible(false);
          setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
        }}
        onClose={() => setIsModalVisible(false)}
      />
    </div>
  )
}

 gz-customerSystem/src/views/register/closingReview/component/BackModel.jsx

New file
@@ -0,0 +1,95 @@
import React, { useRef } from 'react'
import { Row, Col } from 'antd';
import { Form, Input, Button, Radio } from '@arco-design/web-react';
import ArcoUpload from '@/components/ArcoUpload';
import { Scrollbars } from "react-custom-scrollbars";

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const TextArea = Input.TextArea;

export default function BackModel(props) {
  const formRef = useRef();
  const options = [
    {
      label: '不属于本部门的职能范围',
      value: 1
    },
    {
      label: '超出本部门管辖范围',
      value: 2
    },
    {
      label: '重复上报',
      value: 3
    },
    {
      label: '无法与当事人取得联系',
      value: 4
    },
    {
      label: '其他',
      value: 5
    },
  ]
  const handleSubmit = () => {

  }
  return (
    <div>
      <Scrollbars style={{ height: '550px' }} autoHide>
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          scrollToFirstError
        >
          <Row>
            <Col span={24}>
              <FormItem
                label={(<div style={{ display: 'flex' }}>回退理由<div className="must">必填</div></div>)}
                field='trueName'
                rules={[{ required: true, message: '请选择回退理由' }]}
              >
                <RadioGroup direction='vertical' options={options}>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label=' '
                field='luyou'
                rules={[{ required: true, message: '回退理由不能为空' }]}
              >
                <TextArea
                  autoSize={{ minRows: 4, maxRows: 8 }}
                  placeholder='请填写回退的具体理由'
                />
              </FormItem>
            </Col>
            <Col span={24} className="doubleFile">
              <ArcoUpload
                params={{
                  action: ``,
                }}
                field='file'
                label='附件材料'
              />
            </Col>
          </Row>
        </Form>
      </Scrollbars>
      <div className='dialogFooter'>
        <Button
          type="primary"
          className="dialogPrimary"
          onClick={handleSubmit}
        >
          提交
        </Button>
      </div>
    </div>
  )
}

 gz-customerSystem/src/views/register/closingReview/component/EscalationModel.jsx

New file
@@ -0,0 +1,91 @@
import React, { useRef } from 'react'
import { Row, Col } from 'antd';
import { Form, Input, Button } from '@arco-design/web-react';
import ArcoUpload from '@/components/ArcoUpload';
import { Scrollbars } from "react-custom-scrollbars";
import { escalation } from '@/assets/images/icon';

const FormItem = Form.Item;
const TextArea = Input.TextArea;

export default function BackModel(props) {
  const formRef = useRef();

  const handleSubmit = () => {
    formRef.current.validate(undefined, (errors, values) => {
      console.log(errors, values);
    })
  }

  const handleTemplate = (type) => {
    if(type === 1) {
      formRef.current.setFieldValue('trueName', '经初步核查，该事项较为复杂，且涉及多个相关部门的协调配合，为确保能够高效、妥善地解决当事人的问题，特此请求上级给予指导和支持。')
    } else {
      formRef.current.setFieldValue('trueName', '')
    }
  }

  return (
    <div>
      <Scrollbars style={{ height: '550px' }} autoHide>
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          scrollToFirstError
        >
          <Row>
            <Col span={24}>
              <FormItem
                label='上报至'
                field='trueName'
              >
                <div className='myTag' >
                  <img src={escalation} alt="" className="title-file" />白云区综治中心
                </div>
              </FormItem>
            </Col>
            <Col span={24} style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}>
                <div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate(1) }}>公共模板1：通用上报意见范本</div>
                <div className='myTag' onClick={() => { handleTemplate(2) }}>个人模板1：超过处置范围的上报意见</div>
              </div>
              <FormItem
                label={(<div style={{ display: 'flex' }}>上报意见<div className="must">必填</div></div>)}
                field='trueName'
                rules={[{ required: true, message: '请选择回退理由' }]}
              >

                <TextArea
                  autoSize={{ minRows: 4, maxRows: 8 }}
                  placeholder='请填写回退的具体理由'
                  style={{ marginTop: '40px' }}
                />
              </FormItem>
            </Col>
            <Col span={24} className="doubleFile">
              <ArcoUpload
                params={{
                  action: ``,
                }}
                field='file'
                label='附件材料'
              />
            </Col>
          </Row>
        </Form>
      </Scrollbars>
      <div className='dialogFooter'>
        <Button
          type="primary"
          className="dialogPrimary"
          onClick={handleSubmit}
        >
          提交
        </Button>
      </div>
    </div>
  )
}

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

New file
@@ -0,0 +1,184 @@
import React, { useState, useRef, useEffect } from 'react';
import { Button, Modal, Tabs, Badge } from '@arco-design/web-react';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';
import BackModel from "./BackModel";
import { Scrollbars } from "react-custom-scrollbars";
import { getOffset, getSize } from '@/utils/utility';
import EscalationModel from './EscalationModel';
import AssignedModel from './AssignedModel';

const TabPane = Tabs.TabPane;

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() - 10 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '3',
    taskNodeName: '事件回退',
    mediResult: '22_00025-1',
    // handleContent: '已签收',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '白云区新市街综治中心',
    finishTime: new Date().getTime() - 9 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    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: '李晓明'
  },
];

export default function EventFlow(props) {
  const scrollRef = useRef(null)
  const [backVisible, setBackVisible] = useState(false)
  const [height, setHeight] = useState(500)
  const [escalationVisible, setEscalationVisible] = useState(false)
  const [assignedVisible, setAssignedVisible] = useState(false)

  useEffect(() => {
    onWindowResize()
    window.addEventListener("resize", onWindowResize);
  }, [])

  const onWindowResize = () => {
    let offsetLeft = 0;
    let offsetTop = 0;
    if (scrollRef.current.container) {
      offsetLeft = getOffset(scrollRef.current.container).left;
      offsetTop = getOffset(scrollRef.current.container).top;
    }
    setHeight(getSize().windowH - offsetTop - 65)
  };

  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>

      </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>
  )
}

 gz-customerSystem/src/views/register/closingReview/component/Examine.jsx

New file
@@ -0,0 +1,186 @@
import React, { useRef, useState } from 'react'
import { Row, Col, Space } from 'antd';
import { link, register } from '@/assets/images';
import { Form, Input, Button, Radio } from '@arco-design/web-react';
import ArcoUpload from '@/components/ArcoUpload';
import { Scrollbars } from "react-custom-scrollbars";
import ReviewProgress from './ReviewProgress';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const TextArea = Input.TextArea;

export default function Examine(props) {
  const formRef = useRef();
  const [result, setResult] = useState()
  const infoData = {
    result: '化解不成功',
    time: '2024-7-21 12:00',
    people: '白云区新市街市场监管所',
    person: '张晓霞',
    reason: '当事人拒绝参加调解，对调解工作极为抗拒',
    opinion: `针对该事项，我部门高度重视并立即启动了调解程序。然而，在调解过程中遇到的主要困难是当事人李晓明未能积极配合我们的工作，具体表现为：
    1、拒绝提供必要的证据材料；
    2、不接听我们拨打的相关电话；
    3、拒绝到场参加任何调解行为
    由于上述原因，我们目前无法进一步查清事实真相，也无法制定出切实可行的解决方案。为了保障当事人的合法权益得到维护，已引导当事人走司法途径，目前已在法院立案，特申请结案。`,
    isProceeding: '是',
    proceeding: '（粤）云调20240811号'
  }

  const handleSubmit = () => {

  }

  return (
    <div className='dataSync'>
      <div className='dataSync-noBackTabPage'>
        <Scrollbars style={{ height: '100%' }} autoHide>
          <div className='whiteBox'>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>结案申请</h5>
            </Space>
            <Row gutter={[16, 16]}>
              <Col span={24}>
                <div><div className="title-text">化解结果</div></div>
                <div>{infoData?.result || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">无法化解理由</div></div>
                <div>{infoData?.reason || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">结案意见</div></div>
                <div>{infoData?.opinion || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">是否转诉讼案件</div></div>
                <div>{infoData?.isProceeding || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">诉讼案号</div></div>
                <div>{infoData?.proceeding || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">申请时间</div></div>
                <div>{infoData?.time || '-'}</div>
              </Col>
              <Col span={24}>
                <div><div className="title-text">申请人</div></div>
                <div>{infoData?.people}&nbsp;&nbsp;{infoData?.person}<img src={register} alt="" className="title-register" /></div>
              </Col>
            </Row>
          </div>
          <div style={{ display: 'flex', marginTop: '8px' }}>
            <div className='whiteBox' style={{ flex: 1, marginRight: '8px' }}>
              <Space size='small'>
                <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核</h5>
              </Space>
              <Form
                ref={formRef}
                layout='vertical'
                requiredSymbol={false}
                initialValues={{
                }}//默认值
                scrollToFirstError
              >
                <Row>
                  <Col span={24}>
                    <FormItem
                      label={(<div style={{ display: 'flex' }}>审核结果</div>)}
                      field='result'
                    >
                      <RadioGroup
                        direction='vertical'
                        options={[
                          {
                            label: '同意',
                            value: 1
                          },
                          {
                            label: '不同意',
                            value: 0
                          },
                        ]}
                        onChange={(v) => { setResult(v) }}
                      >
                      </RadioGroup>
                    </FormItem>
                  </Col>
                  {result === 0 &&
                    <>
                      <Col span={24}>
                        <FormItem
                          label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)}
                          field='trueName'
                          rules={[{ required: true, message: '请选择理由说明' }]}
                        >
                          <RadioGroup direction='vertical' options={[
                            {
                              label: '材料不完整',
                              value: '0'
                            },
                            {
                              label: '办理流程有问题',
                              value: '1'
                            },
                            {
                              label: '当事人不满意调解结果',
                              value: '2'
                            },
                            {
                              label: '其他',
                              value: '3'
                            },
                          ]}>
                          </RadioGroup>
                        </FormItem>
                      </Col>
                      <Col span={24}>
                        <FormItem
                          label=' '
                          field='luyou'
                          rules={[{ required: true, message: '理由不能为空' }]}
                        >
                          <TextArea
                            autoSize={{ minRows: 4, maxRows: 8 }}
                            placeholder='请填写回退的具体理由'
                          />
                        </FormItem>
                      </Col>
                      <Col span={24} className="doubleFile">
                        <ArcoUpload
                          params={{
                            action: ``,
                          }}
                          field='file'
                          label='附件材料'
                        />
                      </Col>
                    </>
                  }
                </Row>
              </Form>
              <div className='dialogFooter'>
                <Button
                  type="primary"
                  className="dialogPrimary"
                  onClick={handleSubmit}
                >
                  提交
                </Button>
              </div>
            </div>
            <div className='whiteBox' style={{ width: '400px' }}>
              <Space size='small'>
                <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核进度</h5>
              </Space>
              <ReviewProgress />
            </div>
          </div>

        </Scrollbars>
      </div>
    </div>
  )
}

 gz-customerSystem/src/views/register/closingReview/component/ReviewProgress.jsx

New file
@@ -0,0 +1,95 @@
import React from 'react';
import { register } from '@/assets/images';

export default function ReviewProgress(props) {
  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() - 10 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '3',
      taskNodeName: '事件回退',
      mediResult: '22_00025-1',
      // handleContent: '已签收',
      operationName: '赵菲菲'
    },
    {
      handlerUserName: '白云区新市街综治中心',
      finishTime: new Date().getTime() - 9 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      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: '李晓明'
    },
  ];
  return (
    <div className='reviewProgress'>
      {fakeData.map((item, index) => {
        const flag = index + 1 === fakeData.length
        return <div style={{ display: 'flex' }}>
          <div style={{ marginRight: '10px' }}>
            <div className='reviewCircle' style={flag ? { borderColor: '#EF6C24' } : {}}></div>
            {!flag && <div className='reviewLine'></div>}
          </div>
          <div>
            <div className='deepTitle'>{item.handlerUserName}（{item.taskNodeName}）</div>
            {!flag &&
              <>
                <div className='shallowTitle'>
                  操作人：<span>{item.operationName}<img src={register} alt="" className="title-register" /></span>
                </div>
                <div className='shallowTitle'>
                  操作时间：<span>{item.mediResult}</span>
                </div>
                <div style={{ height: '34px' }}></div>
              </>
            }
          </div>
        </div>

      })}

    </div>
  )
}

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

New file
@@ -0,0 +1,93 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-31 17:13:53
 * @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 { Steps, Tabs } from '@arco-design/web-react';
import { examine, Matter, transfer } from '@/assets/images'
import EventFlow from './component/EventFlow';
import MatterDetail from '../matterDetail';
import Examine from "./component/Examine";

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


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


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '处理' }
                }
            >
                <Tabs
                    activeTab={tabsActive}
                    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: '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 === '3' && <Examine />}
                        </TabPane>
                    })}
                </Tabs>
            </NewPage>
        </div>
    )
}

export default Organization;

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

@@ -483,4 +483,51 @@
    height: 8px;
    background-color: #F2F3F5;
    margin: 16px -18px 0px -16px;
}

.reviewProgress {
    .reviewCircle {
        width: 14px;
        height: 14px;
        border: 2px solid #3491fa;
        border-radius: 50%;
        margin-top: 4px;
    }

    .reviewLine {
        height: calc(100% - 19px);
        width: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
            content: '';
            height: 100%;
            width: 1px;
            background-color: #e5e6eb;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .deepTitle {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        text-align: LEFT;
        color: #1d2129;
        line-height: 22px;
    }

    .shallowTitle {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        text-align: LEFT;
        color: #86909c;
        line-height: 22px;
    }
}