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 { Tabs } from '@arco-design/web-react';
|
import { examine, Matter, applyRecord } from '@/assets/images'
|
import EventFlow from './component/EventFlow';
|
import Examine from "./component/Examine";
|
import ApplyInfo from "../matterDetail/ApplyInfo";
|
|
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 caseTaskId = $$.getQueryString('caseTaskId')
|
const caseId = $$.getQueryString('caseId')
|
const moutedTab = $$.getQueryString('moutedTab')
|
const [authorData, setAuthorData] = useState({});
|
const [tabsList, setTabsList] = useState([]);
|
const [tabsActive, setTabsActive] = useState();
|
const [disTab, setDisTab] = useState(true);
|
|
useEffect(() => {
|
getAuthor()
|
}, [])
|
|
//获取权限tab和按钮权限
|
const getAuthor = async () => {
|
const res = await getTabButton({
|
caseTaskId: caseTaskId
|
})
|
if (res.type) {
|
const { tabList } = res.data
|
setAuthorData({
|
...res.data,
|
buttonList: res.data.buttonList.filter(item => {
|
return item.id != 'tabcl' && item.id != 'xqcl'
|
})
|
})
|
if (tabList.length === 0) {
|
//没有tab就不展示
|
setDisTab(false)
|
} 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
|
}
|
})
|
setTabsList(list)
|
setTabsActive(moutedTab || list[0].key)
|
}
|
}
|
}
|
|
//根据id定义组件
|
const getTypeDom = (key) => {
|
if (key === 'dslxq' || key === 'sxxq') {
|
return <EventFlow authorData={authorData} caseId={caseId} caseTaskId={caseTaskId} />
|
}
|
if (key === 'sqjl') {
|
return <ApplyInfo caseId={caseId} />
|
}
|
if (key === 'htsh' || key === 'sbsh' || key === 'lhczsh') {
|
return <Examine type={key} caseTaskId={caseTaskId} caseId={caseId} />
|
}
|
}
|
|
return (
|
<div style={{ position: 'relative' }}>
|
<NewPage
|
pageHead={
|
{ breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '处理' }
|
}
|
>
|
{disTab ? <Tabs
|
onChange={(v) => setTabsActive(v)}
|
className='myTabContent'
|
activeTab={tabsActive}
|
>
|
{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> : <EventFlow authorData={authorData} caseId={caseId} />
|
}
|
</NewPage>
|
</div>
|
)
|
}
|
|
export default Organization;
|
