hotline-web/src/views/home/component/ToDo.vue

<template>
	<el-card shadow="never" class="mb20" style="position: relative" v-loading="state.tableLoading">
		<el-button
			link
			type="primary"
			style="position: absolute; right: 20px; top: 32px; z-index: 2"
			@click="linkList"
			v-auths="['home:orderTodo', 'home:orderSeatTodo']"
		>
			更多<SvgIcon name="ele-ArrowRight" />
		</el-button>
		<el-tabs v-model="activeName" @tab-change="handleChange" v-if="auths(['home:orderTodo', 'home:orderSeatTodo'])">
			<el-tab-pane name="0" label="工单待办" v-if="auth('home:orderTodo')"></el-tab-pane>
			<el-tab-pane name="1" label="工单坐席待办" v-if="auth('home:orderSeatTodo')"></el-tab-pane>
		</el-tabs>
		<!-- 表格 -->
		<el-table :data="state.tableList" row-key="id" v-if="auths(['home:orderTodo', 'home:orderSeatTodo'])">
			<!-- 工单待办 -->
			<template v-if="activeName === '0' && auth('home:orderTodo')">
				<el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column width="100" label="省/市工单" prop="isProvince">
					<template #default="{ row }">
						<span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="currentStepName" label="办理节点" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column label="工单状态" show-overflow-tooltip width="100" prop="statusText"></el-table-column>
				<el-table-column label="标题" show-overflow-tooltip width="300">
					<template #default="{ row }">
						<span class="color-primary">{{ row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="受理时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="工单期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
				<el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100"></el-table-column>
				<el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
				<el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="150">
					<template #default="{ row }">
						<span
							>{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<order-detail :order="row" @updateList="handleChange('0')" />
					</template>
				</el-table-column>
			</template>
			<!-- 工单坐席待办 -->
			<template v-if="activeName === '1' && auth('home:orderSeatTodo')">
				<el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column width="100" label="省/市工单" prop="isProvince">
					<template #default="{ row }">
						<span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="currentStepName" label="办理节点" show-overflow-tooltip width="150"></el-table-column>
				<template v-if="state.queryParams.Status === 'false'">
					<el-table-column prop="creationTime" label="节点签收时间" show-overflow-tooltip width="170">
						<template #default="{ row }">
							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						</template>
					</el-table-column>
				</template>
				<el-table-column label="工单状态" show-overflow-tooltip width="100" prop="statusText"></el-table-column>
				<el-table-column label="标题" show-overflow-tooltip width="300">
					<template #default="{ row }">
						<span class="color-primary">{{ row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="生成时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="受理时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="工单期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText"></el-table-column>
				<el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="150">
					<template #default="{ row }">
						<span
							>{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="140" fixed="right" align="center">
					<template #default="{ row }">
						<el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'todo:seats:edit'"> 修改 </el-button>
						<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'todo:seats:sign'"> 签收 </el-button>
						<order-detail :order="row" @updateList="handleChange('1')" v-if="row.workflowId" />
					</template>
				</el-table-column>
			</template>
			<template #empty>
				<Empty />
			</template>
		</el-table>
		<Empty v-else />
	</el-card>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, onMounted, reactive, ref, watch, watchEffect } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { useRouter } from 'vue-router';
import { orderListTodo, orderSign, seatsListTodo } from '@/api/todo/order';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { auth, auths } from '@/utils/authFunction';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const state = reactive<any>({
	tableLoading: false, // 表格loading
	tableList: [], //表格数据
	queryParams: {
		PageIndex: 1,
		PageSize: 10,
	},
});
const activeName = ref('0');
watchEffect(() => {
	if (auth('home:orderTodo')) {
		return (activeName.value = '0');
	} else if (auth('home:orderSeatTodo')) {
		return (activeName.value = '1');
	}
});
// tab切换
const handleChange = async (tab: any) => {
	state.tableLoading = true;
	switch (tab) {
		case '0': // 工单待办
			try {
				const res: any = await orderListTodo({ ...state.queryParams, IsHandled: 'false' });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		case '1': // 工单待办
			try {
				const res: any = await seatsListTodo({ ...state.queryParams, IsHandled: 'false' });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		default:
			state.tableLoading = false;
			break;
	}
};
// 跳转
const router = useRouter();
// 列表入口
const linkList = () => {
	switch (activeName.value) {
		case '0': // 工单待办
			router.push('/todo/order');
			break;
		case '1': // 工单坐席待办
			router.push('/todo/seats');
			break;
	}
};
// 编辑工单
const onOrderEdit = (row: any) => {
	if (!router.hasRoute('orderAccept')) {
		ElMessage.warning('未找到工单受理页面');
		return;
	}
	router.push({
		name: 'orderAccept',
		params: {
			tagsViewName: '工单受理-' + row.no,
			id: row.id,
			callId: '0',
		},
	});
};
// 签收工单
const onSign = (row: any) => {
	ElMessageBox.confirm(`您确定要要签收【${row.title}】，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			orderSign(row.id).then(() => {
				ElMessage.success('签收成功');
				handleChange(activeName.value);
			});
		})
		.catch(() => {});
};
onMounted(() => {
	handleChange(activeName.value);
});
</script>