hotline-web/src/views/home/components/Todo-center.vue

<template>
	<el-card shadow="never" class="mb20">
		<div class="tab-container">
			<el-tabs v-model="activeName" @tab-change="handleChange">
				<el-tab-pane name="all" :disabled="state.tableLoading" v-if="['YiBin'].includes(themeConfig.appScope)">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-suoyou" class="mr3 mt2" size="18px" />所有<span>({{ allNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="waited" v-if="waited" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-daiban" class="mr3 mt2" size="18px" />待办件<span>({{ state.waitedNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="waitedExpired" v-if="waitedExpired" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-chaoqi1" class="mr3 mt2" size="18px" />已超期<span>({{ state.waitedExpiredNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="visit" v-if="visit" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-outbound" class="mr3 mt2" size="18px" />回访待办<span>({{ state.visitListNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="sign" v-if="sign" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-huiqian" class="mr3 mt2" size="18px" />会签待办<span>({{ state.signDataNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="delay" v-if="delay" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-yanqi" class="mr3 mt2" size="18px" />延期待审批<span>({{ state.delayNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="nearlyExpired" v-if="nearlyExpired" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-chaoqi" class="mr3 mt2" size="18px" />即将超期<span>({{ state.nearlyExpiredNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="screen" v-if="screen" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-zhenbiechaxun" class="mr3 mt2" size="18px" />甄别待审批<span>({{ state.screenNum }})</span>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane name="sendBackAudit" v-if="sendBackAudit" :disabled="state.tableLoading">
					<template #label>
						<div class="flex-center-center">
							<SvgIcon name="iconfont icon-wj-thwj" class="mr3 mt2" size="18px" />退回待审批<span>({{ state.sendBackAuditNum }})</span>
						</div>
					</template>
				</el-tab-pane>
			</el-tabs>
			<el-button class="more-button" link type="primary" @click="linkList" :loading="state.tableLoading" v-show="activeName !== 'all'"
				>更多<SvgIcon name="ele-ArrowRight"
			/></el-button>
		</div>
		<div style="height: calc(100vh - 330px); overflow: hidden">
			<vxe-table
				:loading="state.tableLoading"
				:data="state.tableData"
				:row-config="{ isCurrent: true, isHover: true, height: 30,useKey:true }"
				ref="tableRef"
				height="auto"
				auto-resize
				show-overflow
				:scrollY="{ enabled: true, gt: 0 }"
				:show-header="false"
			>
				<vxe-column field="no" title="工单编码" width="200">
					<template #default="{ row }">
						<span v-if="row.type === 'Waited'"><SvgIcon name="iconfont icon-daiban" />【{{ row.no }}】</span>
						<span v-if="row.type === 'WaitedExpired'"><SvgIcon name="iconfont icon-chaoqi1" />【{{ row.no }}】</span>
						<span v-if="row.type === 'Visit'"><SvgIcon name="iconfont icon-outbound" />【{{ row.no }}】</span>
						<span v-if="row.type === 'Sign'"><SvgIcon name="iconfont icon-huiqian" />【{{ row.no }}】</span>
						<span v-if="row.type === 'Delay'"><SvgIcon name="iconfont icon-yanqi" />【{{ row.no }}】</span>
						<span v-if="row.type === 'NearlyExpired'"><SvgIcon name="iconfont icon-chaoqi" />【{{ row.no }}】</span>
						<span v-if="row.type === 'Screen'"><SvgIcon name="iconfont icon-zhenbiechaxun" />【{{ row.no }}】</span>
						<span v-if="row.type === 'ScreenApply'"><SvgIcon name="iconfont icon-chaoqigongdan" />【{{ row.no }}】</span>
						<span v-if="row.type === 'SendBackAudit'"><SvgIcon name="iconfont icon-wj-thwj" />【{{ row.no }}】</span>
					</template>
				</vxe-column>
				<vxe-column field="title" title="工单标题" min-width="200">
					<template #default="{ row }">
						<order-detail :order="{ id: row.orderId, ...row }">{{ row.title }}</order-detail>
					</template>
				</vxe-column>
				<vxe-column field="acceptType" title="受理类型" width="100"></vxe-column>
				<vxe-column field="hotspotName" title="热点分类" min-width="150"></vxe-column>
				<vxe-column field="expiredTime" title="工单期满时间" width="160">
					<template #default="{ row }">
						{{ formatDate(row.time, 'YYYY-mm-dd HH:MM:SS') }}
					</template>
				</vxe-column>
			</vxe-table>
		</div>
	</el-card>
</template>
<script setup lang="tsx">
import { computed, defineAsyncComponent, onActivated, onMounted, reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { useRouter } from 'vue-router';
import { getHomeData2 } from '@/api/home';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const SvgIcon = defineAsyncComponent(() => import('@/components/SvgIcon/index.vue'));
const state = reactive({
	tableLoading: false, // 表格loading
	tableData: [], //表格数据
	allNum: 0, // 所有数量
	waitedNum: 0, // 待办数量
	waitedExpiredNum: 0, // 已超期数量
	visitListNum: 0, // 回访数量
	signDataNum: 0, // 会签数量
	delayNum: 0, // 延期数量
	nearlyExpiredNum: 0, // 部门即将超期数量
	screenNum: 0, // 甄别待审批数量
	sendBackAuditNum: 0, // 退回待审批数量
});
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const activeName = ref('all');
// 获取列表和总数
const resultData = ref<EmptyObjectType>({});
const getTableAndNum = async () => {
	state.tableLoading = true;
	try {
		const { result } = await getHomeData2();
		resultData.value = result;
		if (['ZiGong'].includes(themeConfig.value.appScope)) {
			// state.tableData = result?.waitedList ?? []; // 待办列表
			// 判断这几个有权限的路由 如果有就按照顺序取第一个
			if (waited.value) {
				state.tableData = result?.waitedList ?? []; // 待办列表
			} else if (waitedExpired.value) {
				state.tableData = result?.waitedExpired ?? []; // 已超期
			} else if (visit.value) {
				state.tableData = result?.visitList ?? []; // 回访列表
			} else if (sign.value) {
				state.tableData = result?.signData ?? []; // 会签列表
			} else if (delay.value) {
				state.tableData = result?.delayList ?? []; // 延期列表
			} else if (nearlyExpired.value) {
				state.tableData = result?.nearlyExpiredList ?? []; // 部门即将超期列表
			} else if (screen.value) {
				state.tableData = result?.screenList ?? []; // 甄别待审批列表
			} else if (sendBackAudit.value) {
				state.tableData = result?.sendBackAuditList ?? []; // 退回待审批列表
			}
		} else {
			state.tableData = allList.value ?? []; // 所有列表
		}
		state.allNum = result?.allNum ?? 0; // 所有数量
		state.waitedNum = result?.waitedNum ?? 0; // 待办数量
		state.waitedExpiredNum = result?.waitedExpiredNum ?? 0; // 已超期
		state.visitListNum = result?.visitListNum ?? 0; // 回访数量
		state.signDataNum = result?.signDataNum ?? 0; // 会签数量
		state.delayNum = result?.delayNum ?? 0; // 延期数量
		state.nearlyExpiredNum = result?.nearlyExpiredNum ?? 0; // 部门即将超期
		state.screenNum = result?.screenNum ?? 0; // 甄别待审批
		state.sendBackAuditNum = result?.sendBackAuditNum ?? 0; // 退回待审批
		state.tableLoading = false;
	} catch (error) {
		state.tableLoading = false;
	}
};
// tab切换
const handleChange = async (tab: any) => {
	try {
		state.tableLoading = true;
		switch (tab) {
			case 'all': // 所有
				setTimeout(() => {
					state.tableData = allList.value;
					state.tableLoading = false;
				}, 10);
				break;
			case 'waited': // 工单待办
				setTimeout(() => {
					state.tableData = resultData.value?.waitedList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'waitedExpired': // 已超期
				setTimeout(() => {
					state.tableData = resultData.value?.waitedExpiredList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'visit': // 回访
				setTimeout(() => {
					state.tableData = resultData.value?.visitList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'sign': // 会签
				setTimeout(() => {
					state.tableData = resultData.value?.signDataList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'delay': // 延期
				setTimeout(() => {
					state.tableData = resultData.value?.delayDataList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'nearlyExpired': // 部门即将超期
				setTimeout(() => {
					state.tableData = resultData.value?.nearlyExpiredList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'screen': // 甄别待审批
				setTimeout(() => {
					state.tableData = resultData.value?.screenList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			case 'sendBackAudit': // 退回待审批
				setTimeout(() => {
					state.tableData = resultData.value?.sendBackAuditList ?? [];
					state.tableLoading = false;
				}, 10);
				break;
			default:
				state.tableLoading = false;
				break;
		}
	} catch (e) {
		state.tableLoading = false;
		console.log(e);
	}
};
// 跳转
const router = useRouter();
// 列表入口
const linkList = () => {
	switch (activeName.value) {
		case 'waited': // 工单待办
			router.push('/todo/order');
			break;
		case 'waitedExpired': // 已超期
			router.push({
				path: '/todo/order',
				query: {
					type: 'expired',
				},
			});
			break;
		case 'visit': // 回访
			router.push('/business/visit/todo');
			break;
		case 'sign': // 会签
			router.push({
				path: '/todo/order',
				query: {
					type: 'sign',
				},
			});
			break;
		case 'delay': // 延期
			router.push('/business/delay/audit');
			break;
		case 'nearlyExpired': // 部门即将超期
			router.push('/business/overdue/soon');
			break;
		case 'screen': // 甄别待审批
			router.push('/business/discern/todo');
			break;
		case 'sendBackAudit': // 退回待审批
			router.push('/business/return/audit');
			break;
	}
};
const waited = computed(() => {
	return router.hasRoute('todoOrder');
});
const waitedExpired = computed(() => {
	return router.hasRoute('todoOrder');
});
const visit = computed(() => {
	return router.hasRoute('businessVisitTodo');
});
const sign = computed(() => {
	return router.hasRoute('todoOrder');
});
const delay = computed(() => {
	return router.hasRoute('businessDelayAudit');
});
const nearlyExpired = computed(() => {
	return router.hasRoute('businessOverdueSoon');
});
const screen = computed(() => {
	return router.hasRoute('businessDiscernTodo');
});
const sendBackAudit = computed(() => {
	return router.hasRoute('businessReturnAudit');
});
// 计算所有有路由的数量的总和
const allNum = computed(() => {
	return [
		waited.value ? state.waitedNum : 0,
		waitedExpired.value ? state.waitedExpiredNum : 0,
		visit.value ? state.visitListNum : 0,
		sign.value ? state.signDataNum : 0,
		delay.value ? state.delayNum : 0,
		nearlyExpired.value ? state.nearlyExpiredNum : 0,
		screen.value ? state.screenNum : 0,
		sendBackAudit.value ? state.sendBackAuditNum : 0,
	].reduce((a, b) => a + b);
});
//  计算所有有路由的数组的拼接
const allList = computed(() => {
	return [].concat(
		waited.value ? resultData.value?.waitedList : [],
		waitedExpired.value ? resultData.value?.waitedExpiredList : [],
		visit.value ? resultData.value?.visitList : [],
		sign.value ? resultData.value?.signDataList : [],
		delay.value ? resultData.value?.delayDataList : [],
		nearlyExpired.value ? resultData.value?.nearlyExpiredList : [],
		screen.value ? resultData.value?.screenList : [],
		sendBackAudit.value ? resultData.value?.sendBackAuditList : []
	);
});
onMounted(() => {
	getTableAndNum();
	// 判断这几个有权限的路由 如果有就按照顺序取第一个
	if (['ZiGong', 'LuZhou'].includes(themeConfig.value.appScope)) {
		if (waited.value) activeName.value = 'waited';
		else if (waitedExpired.value) activeName.value = 'waitedExpired';
		else if (visit.value) activeName.value = 'visit';
		else if (sign.value) activeName.value = 'sign';
		else if (delay.value) activeName.value = 'delay';
		else if (nearlyExpired.value) activeName.value = 'nearlyExpired';
		else if (screen.value) activeName.value = 'screen';
		else if (sendBackAudit.value) activeName.value = 'sendBackAudit';
	}
});
</script>
<style scoped lang="scss">
.tab-container {
	display: flex;
	align-items: center;
	:deep(.el-tabs) {
		flex: 1;
		width: calc(100% - 70px);
		.el-tabs__item {
			padding: 0 10px;
		}
	}
	.more-button {
		margin-bottom: 12px;
		justify-content: flex-end;
	}
}
</style>