流转督办先去除99的红框显示

xusd

2024-09-13 466f59f771bc9306079728ba4363f4b204d5beca

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

@@ -1,80 +1,238 @@
import React,{useState} from 'react';
import React, { useEffect, useState } from 'react';
import NewPage from '@/components/NewPage';
import { Steps, Tabs } from '@arco-design/web-react';
import {apply} from '@/assets/images';
import {result} from '@/assets/images/icon';
import { Steps, Tabs, Button, Badge } from '@arco-design/web-react';
import { apply, floating } from '@/assets/images';
import { result } from '@/assets/images/icon';
import * as $$ from '@/utils/utility';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';
import ApplyInfo from './ApplyInfo';
import Preview from '../visit/preview';
import HandleRecord from './HandleRecord';
import { Scrollbars } from "react-custom-scrollbars";
import RateModule from './RateModule';
import RegisInfoModule from './RegisInfoModule';
import SupervisingView from "./Supervising";
import { useNavigate } from 'react-router-dom';

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

function getTransactResultApi(caseId) {
  return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?caseId=${caseId}`, type: 'get', service: 'mediate' });
}

function getByCaseIdApi(caseId) {
  return $$.ax.request({ url: `caseEvaluate/getByCaseId?caseId=${caseId}`, type: 'get', service: 'mediate' });
}

function getCaseInfoApi(id) {
  return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
}

function listFeedbackApi(id) {
  return $$.ax.request({ url: `caseFeedback/listFeedback?id=` + id, type: 'get', service: 'mediate' });
}

function getListCaseFlow(caseId) {
  return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=` + caseId, type: 'get', service: 'mediate' });
}

const FileMessage = (props) => {

  const navigate = useNavigate();
  const caseTaskId = $$.getQueryString('caseTaskId')
  const caseId = $$.getQueryString('caseId')
  const [tabsActive, setTabsActive] = useState('1');
  const [current, setCurrent] = useState(6);
  const [current, setCurrent] = useState(7);
  const [grade, setGrade] = useState(null);
  const [caseInfo, setCaseInfo] = useState({})
  const [TransactResult, setTransactResult] = useState(null)
  const [tabsList, setTabList] = useState([
      {
         img: result,
         label: '档案信息',
         key: '1'
      },
      {
         img: apply,
         label: '申请记录',
         key: '2',
         isNeedStep: true,//加上这个就有进度条
      },
   ])
    {
      img: result,
      label: '档案信息',
      key: '1',
      isNeedStep: true
    },
    {
      img: floating,
      label: '流转督办',
      key: '2',
    },
    // {
    //   img: apply,
    //   label: '申请记录',
    //   key: '3',
    // },
  ])
  const [list, setList] = useState([])
  const [progressData, setProgressData] = useState({});

  useEffect(() => {
    console.log(caseId, 'caseId')
    getByCaseId(caseId);
    getTransactResult(caseId);
    getCaseInfo(caseId);
    listFeedback(caseId);
    getData(caseId)
  }, [])

  const getTransactResult = async (id) => {
    const res = await getTransactResultApi(id)
    console.log(res);
    if (res.type) {
      if (res.data) {
        setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList?.map(item => item.trueName) })
      } else {
        setTransactResult(null)
      }

    }
  }

  const getByCaseId = async (id) => {
    const res = await getByCaseIdApi(id)
    if (res.type) {
      setGrade(res.data)
    }
  }

  const getCaseInfo = async (id) => {
    const res = await getCaseInfoApi(id)
    if (res.type) {
      const { agentList, personList, ...rest } = res.data
      const parList = agentList.concat(personList)
      const obj = {
        ...rest,
        fakeData: parList,
      }
      setCaseInfo(obj)
    }
  }

  const listFeedback = async (id) => {
    const res = await listFeedbackApi(id)
    if (res.type) {
      let data = res.data.caseFeedbackList
      setList(data)
    }
  }

  const getData = async (id) => {
    const res = await getListCaseFlow(id)
    if (res.type) {
      setProgressData(res.data)
    }
  }

  return (
    <>
      <NewPage
        pageHead={
          { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
        }
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
      }
    >
      <Tabs
        defaultActiveTab='1'
        onChange={(v) => setTabsActive(v)}
        className='myTabContent'
      >
        <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>
        {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', 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' &&
              <>
                <Scrollbars style={{ height: 'calc(100vh - 291px)', marginTop: '8px' }} autoHide>
                  <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
                    <Preview mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} />
                  </div>
                  {list.length != 0 &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理记录（{list.length}）</h4>
                      </Space>
                      <HandleRecord isReview={true} data={list} noEdit/>
                    </div>
                  }
                  {grade &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RateModule grade={grade} />
                    </div>
                  }
                  {caseInfo?.canal === '22_00001-1' &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RegisInfoModule caseInfo={caseInfo} />
                    </div>
                  }
                  <div style={{ backgroundColor: '#ffff', margin: '0 16px 64px 16px', padding: '12px' }}></div>
                </Scrollbars>
                <div className="dataSync-excel">
                  <Space size="large" style={{ margin: '4px 14px' }}>
                    <Button type='primary' >导出</Button>
                    <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
                  </Space>
                </div>
              }
              {tabsActive === '1' &&
                <></>
              }
              {
                tabsActive === '2' &&
                <></>
              }
            </TabPane>
          })}
        </Tabs>


      </NewPage>
    </>
              </>
            }
            {
              tabsActive === '2' &&
              <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
                <Tabs defaultActiveTab='1' >
                  <TabPane
                    key='1'
                    title={
                      <span style={{ fontSize: '15px' }}>
                        流转进度
                      </span>
                    }
                  >
                    <Scrollbars style={{ height: 'calc(100vh - 300px)' }} autoHide>
                      <ProgressStep progressData={progressData} hasTab={true} />
                    </Scrollbars>
                  </TabPane>
                  <TabPane
                    key='2'
                    title={
                      <span style={{ fontSize: '15px' }}>
                        督办信息
                        {/* <Badge maxCount={99} count={1000} /> */}
                      </span>
                    }
                  >
                    <Scrollbars style={{ height: 'calc(100vh - 300px)' }} autoHide>
                      <SupervisingView id={''} />
                    </Scrollbars>
                  </TabPane>
                </Tabs>
              </div>
            }
            {
              tabsActive === '3' &&
              <ApplyInfo />
            }
          </TabPane>
        })}
      </Tabs>
    </NewPage>
  )
}