修改

dminyi

2024-09-11 c25bde50c087f7814d88533b46772f94c3373c82

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

@@ -1,55 +1,114 @@
/*
 * @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 React, { useState, useEffect } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Button, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
import { Steps, Tabs } from '@arco-design/web-react';
import { examine, Matter, applyRecord } from '@/assets/images'
import EventFlow from './component/EventFlow';
import MatterDetali from '../matterDetail';
import Examine from "./component/Examine";
import ApplyInfo from "../matterDetail/ApplyInfo";
import { useParams } from 'react-router-dom';

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

function getTabButton(data) {
   return $$.ax.request({ url: `caseTask/getTabButton`, type: 'get', service: 'mediate', data });
}

const myTab = [
   {
      img: Matter,
      label: '详情',
      key: 'dslxq',
   },
   {
      img: Matter,
      label: '事项详情',
      key: 'sxxq',
   },
   // {
   //    img: applyRecord,
   //    label: '申请记录',
   //    key: 'sqjl',
   // },
   {
      img: examine,
      label: '回退审核',
      key: 'htsh',
   },
   {
      img: examine,
      label: '上报审核',
      key: 'sbsh',
   },
]
const Organization = () => {
   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 routeData = useParams();
   const caseTaskId = $$.getQueryString('caseTaskId')
   const caseId = $$.getQueryString('caseId')
   const [authorData, setAuthorData] = useState({});
   const [tabsList, setTabsList] = useState([]);
   const [tabsActive, setTabsActive] = useState();
   const [disTab, setDisTab] = useState(true);

   useEffect(() => {
      getAuthor()
   }, [])

   //获取权限tab和按钮权限
   const getAuthor = async () => {
      console.log(caseTaskId, caseId)
      const res = await getTabButton({
         caseTaskId: caseTaskId
      })
      if (res.type) {
         const { tabList } = res.data
         setAuthorData(res.data)
         if (tabList.length === 0) {
            //没有tab就不展示
            setDisTab(false)
         } else {
            setTabsList(myTab.filter(item => {
               const flag = tabList.some(result => {
                  if (result.id === item.key) {
                     return true
                  }
               })
               return flag
            }))
            setTabsActive(tabList[0].id)
         }
      }
   }

   //根据id定义组件
   const getTypeDom = (key) => {
      if (key === 'dslxq' || key === 'sxxq') {
         return <EventFlow authorData={authorData} caseId={caseId} caseTaskId={caseTaskId}/>
      }
      if (key === 'sqjl') {
         return <ApplyInfo />
      }
      if (key === 'htsh' || key === 'sbsh' || key === 'lhczsh') {
         return <Examine type={key} caseTaskId={routeData.caseTaskId} caseId={routeData.caseId} />
      }
   }

   console.log(caseId, 'caseId')

   return (
      <div style={{ position: 'relative' }}>
         <NewPage
            pageHead={
               { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
               { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '处理' }
            }
         >
            <Tabs
               defaultActiveTab='1'
            {disTab ? <Tabs
               onChange={(v) => setTabsActive(v)}
               className='myTabContent'
               activeTab={tabsActive}
            >
               {tabsList?.map(item => {
                  return <TabPane
@@ -61,27 +120,11 @@
                        </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 />
                     }
                     {getTypeDom(item.key)}
                  </TabPane>
               })}
            </Tabs>
            </Tabs> : <EventFlow authorData={authorData} caseId={caseId} />
            }
         </NewPage>
      </div>
   )