/*
|
* @Company: hugeInfo
|
* @Author: Claude
|
* @Date: 2022-04-07
|
* @LastEditTime: 2025-05-20 16:15:23
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 流程页面
|
*/
|
import React, { Fragment, useState, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Tabs, Drawer, Button, TextareaItem } from 'dingtalk-design-mobile';
|
import { RightArrow2Outlined } from 'dd-icons';
|
|
import { Scrollbars } from 'react-custom-scrollbars';
|
import { CloseOutlined } from 'dd-icons';
|
|
import NavBarPage from '../../components/NavBarPage';
|
import Descriptions from '../../components/Descriptions';
|
import UserTag from '../../components/UserTag';
|
import DingUpload from '../../components/DingUpload';
|
import { applyClose_1 } from '../../assets/img';
|
import Daxx from './component/daxx';
|
import Sqjl from './component/sqjl';
|
import Sxbl from './component/sxbl';
|
import Lzjd from './component/lzjd';
|
import Dbcb from './component/dbcb';
|
import Bysl from './component/bysl';
|
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
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 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 });
|
}
|
|
function getFeedbackInfoApi(data) {
|
return $$.ax.request({ url: `caseFeedback/getFeedbackInfo`, data, type: 'get', service: 'mediate' });
|
}
|
|
//删除经办人
|
function deletePrincipalApi(data) {
|
return $$.ax.request({ url: `caseInfoUnfold/deletePrincipal`, data, type: 'get', service: 'mediate' });
|
}
|
|
function getId() {
|
return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
|
}
|
|
// 不予受理
|
function requestDismiss(data) {
|
return $$.ax.request({ url: `caseTask/dismiss`, type: 'post', service: 'mediate', data });
|
}
|
|
// 受理+自行受理
|
function accept(data) {
|
return $$.ax.request({ url: `caseTask/accept`, type: 'post', service: 'mediate', data });
|
}
|
|
// 上报
|
function getAppearToUnit(data) {
|
return $$.ax.request({ url: `ctUnit/getAppearToUnit`, type: 'get', service: 'cust', data });
|
}
|
|
// 上报申请
|
function appearApply(data) {
|
return $$.ax.request({ url: `caseTask/appearApply`, type: 'post', service: 'mediate', data });
|
}
|
|
// 交办
|
function assign(data) {
|
return $$.ax.request({ url: `caseTask/assign`, type: 'post', service: 'mediate', data });
|
}
|
|
// 回退
|
function returnApply(data) {
|
return $$.ax.request({ url: `caseTask/returnApply`, type: 'post', service: 'mediate', data });
|
}
|
|
// 定义标签页内容
|
const myTab = [
|
{
|
label: '详情',
|
key: 'byslxq',
|
},
|
{
|
label: '事项详情',
|
key: 'daxx',
|
},
|
{
|
label: '事项详情',
|
key: 'dslxq',
|
},
|
{
|
label: '事项详情',
|
key: 'sxxq',
|
},
|
{
|
label: '重复事项',
|
key: 'cfsx',
|
isNeedStep: true,
|
},
|
{
|
label: '流转进度',
|
key: 'lzjd',
|
},
|
{
|
label: '督办催办',
|
key: 'dbcb',
|
},
|
{
|
label: '办理信息',
|
key: 'sxbl',
|
},
|
{
|
label: '申请信息',
|
key: 'sqjl',
|
},
|
{
|
label: '司法确认',
|
key: 'sfqr',
|
},
|
];
|
|
// 九宫格tab数据
|
const gridTabs = [
|
{ key: 'daxx', label: '事项信息' },
|
{ key: 'lzjd', label: '流转进度' },
|
{ key: 'dbcb', label: '督办催办' },
|
{ key: 'sxbl', label: '办理信息' },
|
{ key: 'sqjl', label: '申请信息' },
|
{ key: 'sfqr', label: '结案信息' },
|
{ key: 'hfxx', label: '回访信息' },
|
{ key: 'cfsx', label: '重复事项' },
|
{ key: 'byslxq', label: '不予受理' },
|
];
|
|
const Flow = () => {
|
const history = useHistory();
|
const caseTaskId = $$.getQueryString('caseTaskId');
|
const caseId = $$.getQueryString('caseId');
|
const moutedTab = $$.getQueryString('moutedTab');
|
const editShow = $$.getQueryString('editShow') === 'true' ? true : false;
|
const slTitle = $$.getQueryString('slTitle') ? '受理' : '自行受理';
|
const leftFunction = $$.getQueryString('leftFunction');
|
// const back = searchParams.get('back');
|
// const tab = searchParams.get('tab');
|
const [flowData, setFlowData] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [authorData, setAuthorData] = useState({});
|
const [grade, setGrade] = useState({});
|
const [transactResult, setTransactResult] = useState({});
|
const [videoList, setVideoList] = useState([]);
|
const [caseInfo, setCaseInfo] = useState({});
|
const [list, setList] = useState([]);
|
const [progressData, setProgressData] = useState([]);
|
const [dismissData, setDismissData] = useState([]);
|
|
const [tabsList, setTabsList] = useState([]);
|
const [tabsActive, setTabsActive] = useState(moutedTab || '');
|
const [staticButtonList, setStaticButtonList] = useState([]);
|
const [current, setCurrent] = useState({});
|
|
const [wantUser, setWantUser] = useState({});
|
const [visible, setVisible] = useState(false);
|
const [rejectVisible, setRejectVisible] = useState(false);
|
const [reportVisible, setReportVisible] = useState(false);
|
const [rejectReason, setRejectReason] = useState('');
|
|
const [auditForm, setAuditForm] = useState({
|
rejectReason: '',
|
rejectReasonTwo: '',
|
fileList: [],
|
});
|
|
const [reportForm, setReportForm] = useState({
|
reportUnit: '', // 上报至单位
|
appearContent: '', // 上报意见
|
fileList: [], // 附件列表
|
});
|
|
const [assignForm, setAssignForm] = useState({
|
handleUnitName: '', // 承办部门名称
|
cooperateDeptsName: [], // 配合部门名称
|
assignContent: '', // 交办意见
|
fileList: [], // 附件列表
|
id: '', // 交办id
|
});
|
|
const [assignVisible, setAssignVisible] = useState(false);
|
|
const [returnVisible, setReturnVisible] = useState(false);
|
const [returnForm, setReturnForm] = useState({
|
id: '',
|
returnReason: '',
|
content: '',
|
fileList: [],
|
});
|
|
const [activeGridTab, setActiveGridTab] = useState(gridTabs[0].key);
|
|
const myButton = [
|
{
|
label: slTitle,
|
type: 'success',
|
key: 'sl',
|
},
|
{
|
label: '交办',
|
type: 'primary',
|
key: 'jb',
|
},
|
{
|
label: '上报',
|
type: 'warning',
|
key: 'sb',
|
},
|
{
|
label: '不予受理',
|
type: 'danger',
|
key: 'bysl',
|
},
|
{
|
label: '回退',
|
type: 'danger',
|
key: 'ht',
|
},
|
{
|
label: '添加办理记录',
|
type: 'primary',
|
key: 'tjbljl',
|
},
|
{
|
label: '申请结案',
|
type: 'success',
|
key: 'jasq',
|
},
|
{
|
label: '申请联合处置',
|
type: 'warning',
|
key: 'lhczsq',
|
},
|
];
|
|
// tab切换事件
|
const handleTabChange = (tab, index) => {
|
setTabsActive(tab.key);
|
};
|
|
//获取权限tab和按钮权限
|
const getTabButtonApi = async () => {
|
const res = await getTabButton({
|
caseTaskId: caseTaskId,
|
});
|
if (res.type) {
|
const { tabList } = res.data;
|
const { buttonList } = res.data;
|
setAuthorData(res.data);
|
if (tabList.length === 0) {
|
//没有tab
|
setTabsList([
|
{
|
label: '详情',
|
key: 'daxx',
|
},
|
]);
|
setTabsActive('daxx');
|
} else {
|
const list = myTab
|
.filter((item) => {
|
// 如果是流转进度或督办催办，直接保留
|
if (['lzjd', 'dbcb'].includes(item.key)) {
|
return true;
|
}
|
|
// 其他情况保持原有逻辑
|
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: item.label || data.name,
|
};
|
});
|
setTabsList(list);
|
|
// 当moutedTab为sbsh、htsh、jash、lhczsh时，将其设置为sqjl
|
const specialTabs = ['sbsh', 'htsh', 'jash', 'lhczsh'];
|
const activeTab = specialTabs.includes(moutedTab) ? 'sqjl' : tabsActive || list[0].key;
|
setTabsActive(activeTab);
|
|
if (list.some((item) => item.key === 'sxbl')) {
|
// 如果tablist中存在办理信息，则调用该接口
|
getFeedbackInfo({ caseId, caseTaskId });
|
}
|
|
// 如果tabList中存在回退审核或者上报审核或者联合处置申请审核或者结案申请审核，则在缓存中存放一个key为'sqjl'的值
|
if (tabList.some((item) => item.id === 'htsh' || item.id === 'sbsh' || item.id === 'jash' || item.id === 'lhczsh')) {
|
$$.setLocal('sqjl', true);
|
}
|
}
|
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,
|
};
|
})
|
);
|
}
|
};
|
|
console.log(staticButtonList, 'staticButtonList');
|
|
const getByCaseId = async (id) => {
|
const res = await getByCaseIdApi(id);
|
if (res.type) {
|
setGrade(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 handleShowPanel = () => {
|
setVisible(true);
|
};
|
|
// 关闭操作面板
|
const handleClose = () => {
|
setVisible(false);
|
};
|
|
// 处理交办表单变更
|
const handleAssignFormChange = (field, value) => {
|
setAssignForm({ ...assignForm, [field]: value });
|
};
|
|
// 关闭交办抽屉
|
const handleAssignDrawerClose = () => {
|
setAssignVisible(false);
|
setAssignForm({
|
handleUnitName: '',
|
cooperateDepts: [],
|
assignContent: '',
|
fileList: [],
|
id: '',
|
});
|
};
|
|
// 提交交办
|
const handleSubmitAssign = () => {
|
if (!assignForm.handleUnitName) {
|
$$.showToast({ content: '请选择承办部门' });
|
return;
|
}
|
if (!assignForm.assignContent) {
|
$$.showToast({ content: '请填写交办意见' });
|
return;
|
}
|
|
$$.confirmModal({
|
title: '交办确认',
|
subtitle: '确定交办吗？',
|
onOk: async () => {
|
const res = await assign({
|
...assignForm,
|
assistUnitList: assignForm?.assistUnitList?.map((item) => ({ uitId: item.value, uitName: item.label })),
|
caseId,
|
caseTaskId,
|
});
|
if (res.type) {
|
$$.showToast({ type: 'success', content: '提交成功' });
|
handleAssignDrawerClose();
|
history.goBack();
|
}
|
},
|
});
|
};
|
|
// 关闭上报抽屉
|
const handleReportClose = () => {
|
setReportVisible(false);
|
};
|
|
// 关闭不予受理抽屉
|
const handleRejectClose = () => {
|
setRejectVisible(false);
|
setRejectReason('');
|
};
|
|
// 处理回退表单变更
|
const handleReturnFormChange = (field, value) => {
|
setReturnForm({ ...returnForm, [field]: value });
|
};
|
|
// 关闭回退抽屉
|
const handleReturnClose = () => {
|
setReturnVisible(false);
|
setReturnForm({
|
id: '',
|
returnReason: '',
|
content: '',
|
fileList: [],
|
});
|
};
|
|
// 提交回退
|
const handleSubmitReturn = () => {
|
if (!returnForm.returnReason) {
|
$$.showToast({ content: '请选择回退理由' });
|
return;
|
}
|
if (returnForm.returnReason === '其他' && !returnForm.content) {
|
$$.showToast({ content: '请填写回退具体理由' });
|
return;
|
}
|
|
const returnContent = returnForm.returnReason === '其他' ? returnForm.content : returnForm.returnReason;
|
|
$$.confirmModal({
|
title: '回退确认',
|
subtitle: '确定回退吗？',
|
onOk: async () => {
|
const res = await returnApply({ id: returnForm.id, returnContent: returnContent, caseId, caseTaskId });
|
if (res.type) {
|
$$.showToast({ type: 'success', content: '提交成功' });
|
handleReturnClose();
|
history.goBack();
|
}
|
},
|
});
|
};
|
|
// 添加统一的按钮点击处理函数
|
const handleButtonClick = async (type, e) => {
|
switch (type) {
|
case 'sl':
|
// 自行受理+受理
|
$$.confirmModal({
|
title: slTitle + '确认',
|
subtitle: '确定' + slTitle + '吗？',
|
onOk: async () => {
|
const res = await accept({ caseTaskId });
|
if (res.type) {
|
$$.showToast({ type: 'success', content: '提交成功' });
|
// 关闭按钮区域
|
handleClose();
|
// history.push(`/gzdyh/flow?caseTaskId=${caseTaskId}&caseId=${caseId}`);
|
history.goBack();
|
}
|
},
|
});
|
break;
|
case 'jb':
|
// 交办
|
handleClose();
|
const res1 = await getId();
|
if (res1.type) {
|
setAssignForm({ ...assignForm, id: res1.data });
|
setAssignVisible(true);
|
}
|
break;
|
case 'sb':
|
// 上报
|
handleClose();
|
const res2 = await getId();
|
global.setSpinning(true);
|
const res3 = await getAppearToUnit();
|
global.setSpinning(false);
|
if (res3.type) {
|
setReportVisible(true);
|
setReportForm({ ...reportForm, id: res2.data, auditUnitId: res3.data.auditUnitId, auditUnitName: res3.data.auditUnitName });
|
}
|
break;
|
case 'bysl':
|
// 不予受理
|
handleClose();
|
setRejectVisible(true);
|
const res4 = await getId();
|
if (res4.type) {
|
setAuditForm({ ...auditForm, id: res4.data });
|
}
|
break;
|
case 'ht':
|
// 回退
|
handleClose();
|
const res5 = await getId();
|
if (res5.type) {
|
setReturnForm({ ...returnForm, id: res5.data });
|
setReturnVisible(true);
|
}
|
break;
|
default:
|
break;
|
}
|
};
|
|
// 处理表单
|
const handleAuditFormChange = (field, value) => {
|
setAuditForm({ ...auditForm, [field]: value });
|
};
|
|
// 提交不予受理
|
const handleSubmitAudit = () => {
|
if (!auditForm.rejectReason) {
|
$$.showToast({ content: '请选择不予受理理由' });
|
return;
|
}
|
if (auditForm.rejectReason === '其他' && !auditForm.content) {
|
$$.showToast({ content: '请填写不予受理具体理由' });
|
return;
|
}
|
|
const disContent = auditForm.rejectReason === '其他' ? auditForm.content : auditForm.rejectReason;
|
|
$$.confirmModal({
|
title: '不予受理确认',
|
subtitle: '确定不予受理吗？',
|
onOk: async () => {
|
const res = await requestDismiss({ id: auditForm.id, disContent, caseId, caseTaskId });
|
if (res.type) {
|
$$.showToast({ type: 'success', content: '提交成功' });
|
// 关闭底部抽屉
|
handleRejectClose();
|
history.goBack();
|
}
|
},
|
});
|
};
|
|
// 处理上报表单变更
|
const handleReportFormChange = (field, value) => {
|
setReportForm({ ...reportForm, [field]: value });
|
};
|
|
// 提交上报
|
const handleSubmitReport = () => {
|
if (!reportForm.appearContent) {
|
$$.showToast({ content: '请填写上报意见' });
|
return;
|
}
|
|
$$.confirmModal({
|
title: '上报确认',
|
subtitle: '确定上报吗？',
|
onOk: async () => {
|
// TODO: 调用上报接口
|
const res = await appearApply({ ...reportForm, caseId, caseTaskId });
|
if (res.type) {
|
$$.showToast({ type: 'success', content: '提交成功' });
|
handleReportClose();
|
history.goBack();
|
}
|
},
|
});
|
};
|
|
function bottomOnclick(type) {
|
switch (type) {
|
case 'sxxq':
|
history.push(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}`);
|
break;
|
case 'dslxq':
|
handleShowPanel();
|
break;
|
default:
|
break;
|
}
|
}
|
|
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);
|
}
|
};
|
|
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);
|
}
|
};
|
|
//获取不予受理信息
|
const getDismissData = async (id) => {
|
const res = await getCaseDismiss(id);
|
if (res.type) {
|
setDismissData(res.data);
|
}
|
};
|
|
// 获取反馈信息
|
const getFeedbackInfo = async (data) => {
|
const res = await getFeedbackInfoApi(data);
|
if (res.type) {
|
let data = res.data;
|
setWantUser({ handleUserName: data?.handleUserName, handleUserId: data?.handleUserId });
|
}
|
};
|
|
// 删除经办人
|
const handleDelete = async () => {
|
global.setSpinning(true);
|
const res = await deletePrincipalApi({ caseId, caseTaskId });
|
global.setSpinning(false);
|
if (res.type) {
|
getFeedbackInfo({ caseId, caseTaskId });
|
}
|
};
|
|
// 接收承办部门
|
useEffect(() => {
|
let data = $$.getLocal('mainDept');
|
let data2 = $$.getLocal('cooperateDepts');
|
if (data) {
|
setAssignForm({ ...assignForm, handleUnitId: data[0].value, handleUnitName: data[0].label });
|
$$.clearLocal('mainDept');
|
}
|
if (data2) {
|
setAssignForm({ ...assignForm, assistUnitList: data2 });
|
$$.clearLocal('cooperateDepts');
|
}
|
}, [$$.getLocal('mainDept'), $$.getLocal('cooperateDepts')]);
|
|
// 更新办理记录
|
useEffect(() => {
|
let data = $$.getLocal('bljl');
|
if (data) {
|
listFeedback(caseId);
|
$$.clearLocal('bljl');
|
}
|
}, [$$.getLocal('bljl')]);
|
|
// 模拟获取数据
|
useEffect(() => {
|
getTabButtonApi();
|
getByCaseId(caseId);
|
getTransactResult(caseId);
|
getVideo(caseId);
|
getCaseInfo(caseId);
|
listFeedback(caseId);
|
getData(caseId);
|
getDismissData(caseId);
|
}, []);
|
|
// 更新经办人
|
useEffect(() => {
|
let data = $$.getLocal('selectPerson');
|
if (data) {
|
getFeedbackInfo({ caseId, caseTaskId });
|
$$.clearLocal('selectPerson');
|
}
|
}, [$$.getLocal('selectPerson')]);
|
|
console.log(tabsList, 'tabsList');
|
console.log(staticButtonList, 'staticButtonList');
|
|
return (
|
<NavBarPage
|
leftContentFunc={() => {
|
// 如果leftFunction=home，则跳转到首页
|
if (leftFunction === 'home') {
|
history.replace('/gzdyh/home');
|
} else {
|
// 否则返回上一页
|
history.goBack();
|
}
|
}}
|
title="事项处理"
|
>
|
{tabsList?.find((item) => item.key === 'daxx') || tabsList?.find((item) => item.key === 'byslxq') ? (
|
<div className="flow-container">
|
{/* 用来切换 */}
|
<div className="custom-grid-tabs">
|
{gridTabs.map((tab, idx) => (
|
<div
|
key={tab.key}
|
className={`grid-tab-item${activeGridTab === tab.key ? ' active' : ''}`}
|
onClick={() => setActiveGridTab(tab.key)}
|
style={{
|
width: '33.33%',
|
borderRight: (idx + 1) % 3 === 0 ? 'none' : '1px solid #fff',
|
borderBottom: idx >= 6 ? 'none' : '1px solid #fff',
|
}}
|
>
|
{tab.label}
|
</div>
|
))}
|
</div>
|
<div className="custom-tab-content">
|
{activeGridTab === 'daxx' && <Daxx data={caseInfo} />}
|
{activeGridTab === 'lzjd' && <Lzjd progressData={progressData} />}
|
{activeGridTab === 'dbcb' && <Dbcb />}
|
{activeGridTab === 'sxbl' && <Sxbl editShow={editShow} wantUser={wantUser} staticButtonList={staticButtonList} caseId={caseId} caseTaskId={caseTaskId} recordList={list} onClose={() => handleDelete({ caseId, caseTaskId })} />}
|
{activeGridTab === 'sqjl' && <Sqjl />}
|
{activeGridTab === 'sfqr' && <div>结案信息内容</div>}
|
{activeGridTab === 'hfxx' && <div>回访信息内容</div>}
|
{activeGridTab === 'cfsx' && <div>回访信息内容</div>}
|
{activeGridTab === 'byslxq' && <Bysl data={dismissData} />}
|
</div>
|
</div>
|
) : (
|
<div className="flow-container">
|
<Tabs
|
tabs={tabsList?.map((i) => ({ ...i, title: i.label }))}
|
onTabClick={handleTabChange}
|
activeKey={tabsActive}
|
className="flow-tab-container"
|
>
|
<div key="daxx">
|
{tabsList?.some((item) => item.key === 'daxx') && (
|
<Scrollbars style={{ height: 'calc(100vh - 104px)' }}>
|
<Daxx data={caseInfo} />
|
</Scrollbars>
|
)}
|
</div>
|
|
<div key="dslxq">
|
{tabsList?.some((item) => item.key === 'dslxq') && (
|
<>
|
<Scrollbars style={{ height: editShow ? 'calc(100vh - 162px)' : 'calc(100vh - 94px)' }}>
|
<Daxx data={caseInfo} />
|
</Scrollbars>
|
{editShow && (
|
<div className="flow-bottom-button">
|
<Button type="primary" onClick={() => bottomOnclick('dslxq')}>
|
处理
|
</Button>
|
</div>
|
)}
|
</>
|
)}
|
</div>
|
<div key="sxxq">
|
{tabsList?.some((item) => item.key === 'sxxq') && (
|
<>
|
<Scrollbars style={{ height: editShow ? 'calc(100vh - 162px)' : 'calc(100vh - 94px)' }}>
|
<Daxx data={caseInfo} />
|
</Scrollbars>
|
{editShow && (
|
<div className="flow-bottom-button">
|
<Button type="primary" onClick={() => bottomOnclick('dslxq')}>
|
处理
|
</Button>
|
</div>
|
)}
|
</>
|
)}
|
</div>
|
<div key="lzjd">
|
<>
|
<Scrollbars style={{ height: editShow ? 'calc(100vh - 162px)' : 'calc(100vh - 104px)' }}>
|
<Lzjd progressData={progressData} />
|
</Scrollbars>
|
{editShow && (
|
<div className="flow-bottom-button">
|
<Button type="primary" onClick={() => bottomOnclick('dslxq')}>
|
处理
|
</Button>
|
</div>
|
)}
|
</>
|
{/* <Scrollbars style={{ height: 'calc(100vh - 101px)' }}>
|
<Lzjd progressData={progressData} />
|
</Scrollbars> */}
|
</div>
|
<div key="dbcb">{tabsList?.some((item) => item.key === 'dbcb') && <Dbcb />}</div>
|
<div key="sqjl">{tabsList?.some((item) => item.key === 'sqjl') && <Sqjl />}</div>
|
<div key="sxbl">
|
{tabsList?.some((item) => item.key === 'sxbl') && (
|
<Sxbl
|
editShow={editShow}
|
wantUser={wantUser}
|
staticButtonList={staticButtonList}
|
caseId={caseId}
|
caseTaskId={caseTaskId}
|
recordList={list}
|
onClose={() => handleDelete({ caseId, caseTaskId })}
|
/>
|
)}
|
</div>
|
</Tabs>
|
</div>
|
)}
|
|
{/*dslxq的处理按钮*/}
|
{visible && (
|
<>
|
<div className="action-mask" onClick={handleClose}></div>
|
<div className="action-panel">
|
<div className="action-buttons">
|
{staticButtonList.map((button) => (
|
<div key={button.key} className={`action-btn action-btn-${button.type}`} onClick={(e) => handleButtonClick(button.key, e)}>
|
{button.label}
|
</div>
|
))}
|
<div className="action-btn-cancel">
|
<div className="close-btn" onClick={handleClose}>
|
<CloseOutlined />
|
</div>
|
</div>
|
</div>
|
</div>
|
</>
|
)}
|
|
{/* 不予受理抽屉 */}
|
<Drawer visible={rejectVisible} onClose={handleRejectClose} position="bottom">
|
<div className="audit-drawer">
|
<div className="audit-drawer-header">
|
<div className="audit-drawer-title">不予受理</div>
|
<div className="audit-drawer-close" onClick={handleRejectClose}>
|
<i className="audit-drawer-close-icon"></i>
|
</div>
|
</div>
|
<div className="audit-drawer-content">
|
<div className="audit-drawer-scroll">
|
<div className="audit-section required-field">
|
<div className="audit-section-title">不予受理理由</div>
|
<div className="audit-reason-group">
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '不属于相关职责范围' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '不属于相关职责范围')}
|
>
|
{auditForm.rejectReason === '不属于相关职责范围' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>不属于相关职责范围</span>
|
</div>
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '诉求不合理或不明确' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '诉求不合理或不明确')}
|
>
|
{auditForm.rejectReason === '诉求不合理或不明确' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>诉求不合理或不明确</span>
|
</div>
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '无法与当事人取得联系' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '无法与当事人取得联系')}
|
>
|
{auditForm.rejectReason === '无法与当事人取得联系' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>无法与当事人取得联系</span>
|
</div>
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '缺乏具体事实依据' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '缺乏具体事实依据')}
|
>
|
{auditForm.rejectReason === '缺乏具体事实依据' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>缺乏具体事实依据</span>
|
</div>
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '违反法律法规' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '违反法律法规')}
|
>
|
{auditForm.rejectReason === '违反法律法规' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>违反法律法规</span>
|
</div>
|
<div
|
className={`audit-reason-item ${auditForm.rejectReason === '其他' ? 'active' : ''}`}
|
onClick={(e) => handleAuditFormChange('rejectReason', '其他')}
|
>
|
{auditForm.rejectReason === '其他' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>其他</span>
|
</div>
|
</div>
|
{auditForm.rejectReason === '其他' && (
|
<div className="audit-content-wrapper">
|
<TextareaItem
|
placeholder={`请填写不予受理具体理由`}
|
value={auditForm.content}
|
onChange={(value) => handleAuditFormChange('content', value)}
|
rows={4}
|
/>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
{/* <div className="audit-footer-gap"></div> */}
|
<div className="audit-footer">
|
<Button type="primary" block onClick={handleSubmitAudit}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
|
{/* 上报抽屉 */}
|
<Drawer visible={reportVisible} onClose={handleReportClose} position="bottom">
|
<div className="audit-drawer">
|
<div className="audit-drawer-header">
|
<div className="audit-drawer-title">上报</div>
|
<div className="audit-drawer-close" onClick={handleReportClose}>
|
<i className="audit-drawer-close-icon"></i>
|
</div>
|
</div>
|
<div className="audit-drawer-content">
|
<div className="audit-drawer-scroll">
|
<div className="audit-section">
|
<div className="audit-section-title">上报至</div>
|
<div className="audit-unit-select">
|
<div className="audit-unit-value audit-unit-value-tag">{reportForm.auditUnitName}</div>
|
</div>
|
</div>
|
<div className="audit-section required-field">
|
<div className="audit-section-title">上报意见</div>
|
<div className="audit-content-wrapper">
|
<TextareaItem
|
placeholder="请填写"
|
value={reportForm.appearContent}
|
onChange={(value) => handleReportFormChange('appearContent', value)}
|
rows={4}
|
/>
|
</div>
|
</div>
|
<div className="audit-section">
|
<DingUpload
|
title="附件材料"
|
subtitle="可添加上报申请相关附件"
|
fileList={reportForm.fileList}
|
mainId={caseId}
|
ownerId={reportForm?.id || ''}
|
ownerType="22_00018-512"
|
multiple={true}
|
maxCount={9}
|
/>
|
</div>
|
</div>
|
</div>
|
<div className="audit-footer">
|
<Button type="primary" block onClick={handleSubmitReport}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
|
{/* 交办抽屉 */}
|
<Drawer visible={assignVisible} onClose={handleAssignDrawerClose} position="bottom">
|
<div className="audit-drawer">
|
<div className="audit-drawer-header">
|
<div className="audit-drawer-title">交办</div>
|
<div className="audit-drawer-close" onClick={handleAssignDrawerClose}>
|
<i className="audit-drawer-close-icon"></i>
|
</div>
|
</div>
|
<div className="audit-drawer-content">
|
<div className="audit-drawer-scroll">
|
<div className="audit-section">
|
<div className=" audit-section-flex required-field">
|
<div className="audit-section-title" style={{ margin: '0' }}>
|
承办部门
|
</div>
|
<div
|
className="audit-section-select"
|
onClick={() => history.push(`/gzdyh/selectPerson?type=3&caseId=${caseId}&caseTaskId=${caseTaskId}&isMultiple=false`)}
|
>
|
<span>选择</span>
|
<span className="joint-handle-arrow">
|
<RightArrow2Outlined style={{ fontSize: '16px' }} />
|
</span>
|
</div>
|
</div>
|
<div className="joint-handle-value">
|
{assignForm.handleUnitName ? (
|
// 循环
|
<div className="joint-handle-dept-tags">
|
<UserTag
|
viewBtn={false}
|
name={assignForm.handleUnitName}
|
value={assignForm.handleUnitId}
|
onClose={() => setAssignForm({ ...assignForm, handleUnitName: '', handleUnitId: '' })}
|
/>
|
</div>
|
) : null}
|
</div>
|
</div>
|
<div className="audit-section">
|
<div className=" audit-section-flex">
|
<div className="audit-section-title" style={{ margin: '0' }}>
|
配合部门<span className="audit-section-select">（可多选）</span>
|
</div>
|
<div
|
className="audit-section-select"
|
onClick={() => history.push(`/gzdyh/selectPerson?type=4&caseId=${caseId}&caseTaskId=${caseTaskId}&isMultiple=true`)}
|
>
|
<span>选择</span>
|
<span className="joint-handle-arrow">
|
<RightArrow2Outlined style={{ fontSize: '16px' }} />
|
</span>
|
</div>
|
</div>
|
<div className="joint-handle-value">
|
{assignForm.assistUnitList?.length > 0 ? (
|
// 循环
|
<div className="joint-handle-dept-tags">
|
{assignForm.assistUnitList?.map((dept) => (
|
<UserTag
|
key={dept.value}
|
viewBtn={false}
|
name={dept.label}
|
value={dept.value}
|
onClose={() =>
|
setAssignForm({ ...assignForm, assistUnitList: assignForm.assistUnitList.filter((item) => item.value !== dept.value) })
|
}
|
/>
|
))}
|
</div>
|
) : null}
|
</div>
|
</div>
|
|
<div className="audit-section required-field">
|
<div className="audit-section-title">交办意见</div>
|
<div className="audit-content-wrapper">
|
<TextareaItem
|
placeholder="请填写"
|
value={assignForm.assignContent}
|
onChange={(value) => handleAssignFormChange('assignContent', value)}
|
rows={4}
|
/>
|
</div>
|
</div>
|
<div className="audit-section">
|
<DingUpload
|
title="附件材料"
|
subtitle="可添加交办工作相关附件"
|
fileList={assignForm.fileList}
|
mainId={caseId}
|
ownerId={assignForm?.id || ''}
|
ownerType="22_00018-513"
|
multiple={true}
|
maxCount={9}
|
/>
|
</div>
|
</div>
|
</div>
|
{/* 间隔 */}
|
<div className="audit-footer-gap"></div>
|
<div className="audit-footer">
|
<Button type="primary" block onClick={handleSubmitAssign}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
|
{/* 回退抽屉 */}
|
<Drawer visible={returnVisible} onClose={handleReturnClose} position="bottom">
|
<div className="audit-drawer">
|
<div className="audit-drawer-header">
|
<div className="audit-drawer-title">回退</div>
|
<div className="audit-drawer-close" onClick={handleReturnClose}>
|
<i className="audit-drawer-close-icon"></i>
|
</div>
|
</div>
|
<div className="audit-drawer-content">
|
<div className="audit-drawer-scroll">
|
<div className="audit-section required-field">
|
<div className="audit-section-title">回退理由</div>
|
<div className="audit-reason-group">
|
<div
|
className={`audit-reason-item ${returnForm.returnReason === '不属于本部门的职能范围' ? 'active' : ''}`}
|
onClick={() => handleReturnFormChange('returnReason', '不属于本部门的职能范围')}
|
>
|
{returnForm.returnReason === '不属于本部门的职能范围' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>不属于本部门的职能范围</span>
|
</div>
|
<div
|
className={`audit-reason-item ${returnForm.returnReason === '超出本部门管辖范围' ? 'active' : ''}`}
|
onClick={() => handleReturnFormChange('returnReason', '超出本部门管辖范围')}
|
>
|
{returnForm.returnReason === '超出本部门管辖范围' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>超出本部门管辖范围</span>
|
</div>
|
<div
|
className={`audit-reason-item ${returnForm.returnReason === '重复上报' ? 'active' : ''}`}
|
onClick={() => handleReturnFormChange('returnReason', '重复上报')}
|
>
|
{returnForm.returnReason === '重复上报' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>重复上报</span>
|
</div>
|
<div
|
className={`audit-reason-item ${returnForm.returnReason === '无法与当事人取得联系' ? 'active' : ''}`}
|
onClick={() => handleReturnFormChange('returnReason', '无法与当事人取得联系')}
|
>
|
{returnForm.returnReason === '无法与当事人取得联系' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>无法与当事人取得联系</span>
|
</div>
|
<div
|
className={`audit-reason-item ${returnForm.returnReason === '其他' ? 'active' : ''}`}
|
onClick={() => handleReturnFormChange('returnReason', '其他')}
|
>
|
{returnForm.returnReason === '其他' ? (
|
<img src={applyClose_1} alt="选中" className="audit-radio-checked" />
|
) : (
|
<div className="audit-radio-unchecked"></div>
|
)}
|
<span>其他</span>
|
</div>
|
</div>
|
{returnForm.returnReason === '其他' && (
|
<div className="audit-content-wrapper">
|
<TextareaItem
|
placeholder="请填写回退具体理由"
|
value={returnForm.content}
|
onChange={(value) => handleReturnFormChange('content', value)}
|
rows={4}
|
/>
|
</div>
|
)}
|
</div>
|
<div className="audit-section">
|
<DingUpload
|
title="附件材料"
|
subtitle="可添加回退相关附件"
|
fileList={returnForm.fileList}
|
mainId={caseId}
|
ownerId={returnForm?.id || ''}
|
ownerType="22_00018-514"
|
multiple={true}
|
maxCount={9}
|
/>
|
</div>
|
</div>
|
</div>
|
<div className="audit-footer">
|
<Button type="primary" block onClick={handleSubmitReturn}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
</NavBarPage>
|
);
|
};
|
|
export default Flow;
|
