gzdyh/front.git

/*
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2025-01-02 09:20:18
 * @LastEditTime: 2025-02-20 17:58:49
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:
 */
import React, { Fragment, useEffect, useState } from 'react';
import { Steps, Tabs, Button, Badge, Message } from '@arco-design/web-react';
import { Space } from 'antd';
import { Scrollbars } from "react-custom-scrollbars";
import { useSearchParams, useNavigate } from 'react-router-dom';
 
import { apply, floating, Matter, judicial_8, transfer_1 } from '@/assets/images';
import { result } from '@/assets/images/icon';
 
import NewPage from '@/components/NewPage';
import ProgressStep from '@/components/ProgressStep/VisitStep';
 
import Preview from '../register/visit/preview';
import Judicial from '../register/matterDetail/Judicial';
import ApplyInfo from './ApplyInfo';
import HandleRecord from '../register/matterDetail/HandleRecord';
import SupervisingView from '../register/matterDetail/Supervising';
import RateModule from '../register/matterDetail/RateModule';
import DismissModule from '../register/matterDetail/DismissModule';
import RegisInfoModule from '../register/matterDetail/RegisInfoModule';
 
import RepeatView from '../register/handleFeedback/component/RepeatView';
import EventFlow from '../register/eventFlow/component/EventFlow';
 
// RepeatView
import * as $$ from '@/utils/utility';
 
const Step = Steps.Step;
const TabPane = Tabs.TabPane;
 
function getTransactResultApi(caseId) {
  return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?caseId=${caseId}`, type: 'get', service: 'mediate' });
}
 
function getVideoApi(caseId) {
  return $$.ax.request({ url: `meetInfo/getVideo?caseId=${caseId}`, type: 'get', service: 'mediate' });
 
}
 
function getByCaseIdApi(caseId) {
  return $$.ax.request({ url: `caseEvaluate/getByCaseId?caseId=${caseId}`, type: 'get', service: 'mediate' });
}
function getMainCaseIdApi(caseId) {
  return $$.ax.request({ url: `caseRepeatInfo/getMainCaseId?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' });
}
 
function getCaseDismiss(caseId) {
  return $$.ax.request({ url: `caseDismiss/getByCaseId?caseId=` + caseId, type: 'get', service: 'mediate' });
}
 
function getTabButton(data) {
  return $$.ax.request({ url: `caseTask/getTabButton`, type: 'get', service: 'mediate', data });
}
 
const myTab = [
  {
    img: Matter,
    label: '详情',
    key: 'byslxq',
  },
  {
    img: result,
    label: '档案信息',
    key: 'daxx',
  },
  {
    img: result,
    label: '事项详情',
    key: 'dslxq',
  },
  {
    img: result,
    label: '事项详情',
    key: 'sxxq',
  },
  {
    img: transfer_1,
    label: '重复事项',
    key: "cfsx",
    isNeedStep: true,
  },
  {
    img: floating,
    label: '流转督办',
    key: 'lcdb',
  },
  {
    img: apply,
    label: '申请记录',
    key: 'sqjl',
  },
  {
    img: judicial_8,
    label: '司法确认',
    key: 'sfqr',
  },
]
const WindowDetail = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const caseTaskId = $$.getQueryString('caseTaskId')
  const back = searchParams.get('back');
  const tab = searchParams.get('tab');
  const caseId = $$.getQueryString('caseId')
  const moutedTab = $$.getQueryString('moutedTab')
  const [tabsActive, setTabsActive] = useState();
  const [current, setCurrent] = useState(7);
  const [tabsList, setTabsList] = useState([])
  const [grade, setGrade] = useState(null);
  const [caseInfo, setCaseInfo] = useState({})
  const [TransactResult, setTransactResult] = useState(null)
  const [videoList, setVideoList] = useState([])
  const [list, setList] = useState([])
  const [progressData, setProgressData] = useState({});
  const [dismissData, setDismissData] = useState(null);
  const [authorData, setAuthorData] = useState({});
  const [staticButtonList, setStaticButtonList] = useState([])
 
  const myButton = [
    {
      label: '处理',
      type: 'primary',
      click: () => {
        navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}`)
      },
      key: 'xqcl',
    },
    {
      label: '处理',
      type: 'primary',
      click: () => {
        switch (moutedTab) {
          case 'sxbl':
            navigate(`/mediate/visit/handleFeedback?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=sxbl`)
            break;
          case 'htsh':
            navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=htsh`)
            break;
          case 'sbsh':
            navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=sbsh`)
            break;
          case 'jash':
            navigate(`/mediate/visit/closingReview?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=jash`)
            break;
          case 'lhczsh':
            navigate(`/mediate/visit/handleFeedback?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=lhczsh`)
            break;
          default:
            break;
        }
      },
      key: 'tabcl',
    },
  ]
 
  useEffect(() => {
      // getMainCaseIdApi(caseId).then(res => {
      //   if (res.type) {
      //     const mainCaseId = res.data
      //     if(mainCaseId===caseId){
      //       getAuthor();
      //     }else{
      //       getAuthor(mainCaseId);
      //     }
      //     getByCaseId(mainCaseId);
      //     getTransactResult(mainCaseId);
      //     getVideo(mainCaseId);
      //     getCaseInfo(mainCaseId);
      //     listFeedback(mainCaseId);
      //     getData(mainCaseId);
 
      //   }
      // })
      getAuthor();
      getByCaseId(caseId);
      getTransactResult(caseId);
      getVideo(caseId);
      getCaseInfo(caseId);
      listFeedback(caseId);
      getData(caseId);
      getDismissData(caseId)
  }, [])
 
  //获取权限tab和按钮权限
  const getAuthor = async (caseId) => {
    const res = await getTabButton({
      caseTaskId: caseId || caseTaskId
    })
    if (res.type) {
      const { tabList } = res.data
      const { buttonList } = res.data
      setAuthorData(res.data)
      if (tabList.length === 0) {
        //没有tab
        setTabsList([{
          img: result,
          label: '详情',
          key: 'daxx',
        }])
        setTabsActive('daxx')
      } else {
        const list = myTab.filter(item => {
          const flag = tabList.some(result => {
            if (result.id === item.key) {
              return true
            }
          })
          return flag
        }).map(item => {
          const data = tabList.find(res => res.id == item.key) || {}
          return {
            ...item,
            label: data.name || item.label
          }
        })
        setTabsList(list)
        setTabsActive(list[0].key)
      }
      setStaticButtonList(myButton.filter(item => {
        const flag = buttonList.some(result => {
          if (result.id === item.key) {
            return true
          }
        })
        return flag
      }).map(item => {
        const data = buttonList.find(res => res.id == item.key)
        return {
          ...item,
          label: data.name,
          id: item.key,
          name: data.name,
        }
      }))
    }
  }
 
  //获取不予受理信息
  const getDismissData = async (id) => {
    const res = await getCaseDismiss(id)
    if (res.type) {
      setDismissData(res.data)
    }
  }
 
  const getTransactResult = async (id) => {
    const res = await getTransactResultApi(id)
    if (res.type) {
      if (res.data) {
        setTransactResult({ ...res.data })
      } else {
        setTransactResult(null)
      }
    }
  }
 
  const getVideo = async (id) => {
    const res = await getVideoApi(id)
    if (res.type) {
      if (res.data) {
        setVideoList(res.data || [])
      } else {
        setVideoList(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 newParList = parList?.map(item => {
        const fileInfoList = item.fileInfoList
        let file = [];//身份证明材料、企业登记材料
        let file1 = [];//法人、机构身份证明材料、代理人授权委托书
        if (fileInfoList && fileInfoList.length != 0) {
          fileInfoList.forEach(item => {
            if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
              item.fileList.forEach(res => {
                file.push({
                  ...res,
                  uid: res.id,
                })
              })
            }
            if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
              item.fileList.forEach(res => {
                file1.push({
                  ...res,
                  uid: res.id,
                })
              })
            }
          })
        }
        return {
          ...item,
          file,
          file1
        }
      }) || []
      const obj = {
        ...rest,
        fakeData: newParList,
      }
      setCurrent(obj.process)
      setCaseInfo(obj)
      if (obj.status == 2) {
        //待签收自动跳转到受理页面
        handleSign()
      }
    }
  }
 
 
  //待签收的处理
  const handleSign = () => {
    Message.success({
      content: <div className='myMessageBox'>
        <div className='messageTop'>签收成功</div>
        <div className='messageBottom'>请在受理时限内及时跟进</div>
      </div>,
      showIcon: true,
      className: 'acro-myMessage',
      position: 'bottom'
    })
    navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}`)
  }
 
  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)
    }
  }
 
  //根据id定义组件
  const getTypeDom = (key) => {
    if (key === 'byslxq') {
      return <Fragment>
        <Scrollbars style={{ height: 'calc(100vh - 219px)' }} autoHide>
          <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
            <Preview mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} isNotAccet={true} />
          </div>
          <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
            <Tabs defaultActiveTab='1' >
              <TabPane
                key='1'
                title={
                  <span style={{ fontSize: '15px' }}>
                    流转进度
                  </span>
                }
              >
                <ProgressStep progressData={progressData} />
              </TabPane>
              <TabPane
                key='2'
                title={
                  <span style={{ fontSize: '15px' }}>
                    督办信息
                    {/* <Badge maxCount={99} count={1000} /> */}
                  </span>
                }
              >
                <SupervisingView caseId={caseId} />
              </TabPane>
            </Tabs>
          </div>
          {dismissData && <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
            <DismissModule dismissData={dismissData} />
          </div>}
        </Scrollbars>
      </Fragment>
    }
    if (key === 'daxx') {
      return <Fragment>
        <Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
          <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 />
              {caseInfo.canal != '22_00001-3' && <Step title='当事人评价' disabled />}
              <Step title='结案归档' disabled />
            </Steps>
          </div>
          <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px', marginTop: '8px' }}>
            <Preview videoList={videoList} isReview={true} 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>
          }
          {dismissData && <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
            <DismissModule dismissData={dismissData} />
          </div>}
        </Scrollbars>
      </Fragment>
    }
    if (key === 'cfsx') {
      return <Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
        <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
          <RepeatView caseId={caseId} />
        </div>
      </Scrollbars>
    }
    if (key === 'lcdb') {
      return <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
        <Tabs defaultActiveTab='1' >
          <TabPane
            key='1'
            title={
              <span style={{ fontSize: '15px' }}>
                流转进度
              </span>
            }
          >
            <Scrollbars style={{ height: 'calc(100vh - 238px)' }} autoHide>
              <ProgressStep progressData={progressData} />
            </Scrollbars>
          </TabPane>
          <TabPane
            key='2'
            title={
              <span style={{ fontSize: '15px' }}>
                督办信息
                {/* <Badge maxCount={99} count={1000} /> */}
              </span>
            }
          >
            <Scrollbars style={{ height: 'calc(100vh - 238px)' }} autoHide>
              <SupervisingView caseId={caseId} />
            </Scrollbars>
          </TabPane>
        </Tabs>
      </div>
    }
    if (key === 'sqjl') {
      return <ApplyInfo caseId={caseId} />
    }
    if (key === 'dslxq' || key === 'sxxq') {
      return <EventFlow listFeedback={list} windowDetail={true} authorType={key} authorData={{ buttonList: [] }} caseId={caseId} caseTaskId={caseTaskId} moutedTab={moutedTab} />
    }
    if (key === 'sfqr') {
      return <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px', marginTop: '8px' }}>
        <Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
          <Judicial caseId={caseId} />
        </Scrollbars>
      </div>
    }
  }
 
  return (
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
      }
    >
      <Tabs
        onChange={(v) => setTabsActive(v)}
        className='myTabContent'
        activeTab={tabsActive}
        destroyOnHide
      >
        {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>
            }
          >
            {getTypeDom(item.key)}
          </TabPane>
        })}
      </Tabs>
    </NewPage>
  )
}
 
export default WindowDetail;