reactor:新增中心代办件菜单;

src/views/business/center/todo.vue

@@ -0,0 +1,585 @@
+<template>
+	<div class="business-center-todo-container layout-pd">
+		<el-card shadow="never">
+			<div class="flex-center-align mb20">
+				<span style="color: var(--el-text-color-regular); display: inline-block; width: 100px; text-align: right; padding-right: 12px">快捷查询</span>
+				<el-radio-group v-model="fastSearch" @change="fastSearchChange">
+					<el-radio-button label="all">全部</el-radio-button>
+					<el-radio-button label="city">市工单</el-radio-button>
+					<el-radio-button label="province">省工单</el-radio-button>
+				</el-radio-group>
+			</div>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="100px">
+				<el-row :gutter="10">
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="工单标题" prop="Keyword">
+							<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="工单编码" prop="No">
+							<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="生成时间" prop="exTime">
+							<el-date-picker
+								v-model="state.queryParams.exTime"
+								type="datetimerange"
+								unlink-panels
+								range-separator="至"
+								start-placeholder="开始时间"
+								end-placeholder="结束时间"
+								:shortcuts="shortcuts"
+								@change="timeStartChangeEx"
+								value-format="YYYY-MM-DD[T]HH:mm:ss"
+							/>
+						</el-form-item>
+					</el-col>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="受理时间" prop="crTime">
+								<el-date-picker
+									v-model="state.queryParams.crTime"
+									type="datetimerange"
+									unlink-panels
+									range-separator="至"
+									start-placeholder="开始时间"
+									end-placeholder="结束时间"
+									:shortcuts="shortcuts"
+									@change="timeStartChangeCr"
+									value-format="YYYY-MM-DD[T]HH:mm:ss"
+								/>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="当前办理节点" prop="CurrentStepCode">
+								<el-select v-model="state.queryParams.CurrentStepCode" placeholder="请选择当前办理节点" clearable class="w100" @change="handleQuery">
+									<el-option v-for="item in state.currentStepOptions" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="接办部门" prop="OrgCodes">
+								<el-cascader
+									:options="state.orgsOptions"
+									filterable
+									:show-all-levels="false"
+									:props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false, multiple: true }"
+									placeholder="请选择接办部门"
+									clearable
+									class="w100"
+									v-model="state.queryParams.OrgCodes"
+									ref="cascadeRef"
+									@change="changeOrg"
+									collapse-tags
+									collapse-tags-tooltip
+									:max-collapse-tags="2"
+								>
+								</el-cascader>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="工单状态" prop="Statuses">
+								<el-select v-model="state.queryParams.Statuses" placeholder="请选择工单状态" clearable class="w100" multiple>
+									<el-option v-for="item in state.orderStatusOptions" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="受理人" prop="NameOrNo">
+								<el-input v-model="state.queryParams.NameOrNo" placeholder="受理人/坐席工号" clearable @keyup.enter="handleQuery" />
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="超期状态" prop="NameOrNo">
+								<el-input v-model="state.queryParams.NameOrNo" placeholder="受理人/坐席工号" clearable @keyup.enter="handleQuery" />
+							</el-form-item>
+						</el-col>
+					</transition>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label=" ">
+							<div class="flex-end w100">
+								<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+								<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+									<SvgIcon name="ele-Refresh" class="mr5" />重置
+								</el-button>
+								<el-button link type="primary" @click="closeSearch" :loading="state.loading">
+									{{ searchCol ? '展开' : '收起' }}
+									<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+								</el-button>
+							</div>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+		</el-card>
+		<el-card shadow="never">
+			<!-- 表格 -->
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:total="state.total"
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				@export-current="exportCurrent"
+				@export-all="exportAll"
+				:key="Math.random()"
+			>
+				<!-- 表格 header 按钮 -->
+				<template #tableHeader="scope">
+					<el-button
+						type="primary"
+						@click="onProvinceReturn"
+						v-auth="'business:order:returnBatch'"
+						:disabled="!scope.isSelected"
+						v-show="fastSearch === 'province'"
+						:loading="state.loading"
+						>省退回申请
+					</el-button>
+					<el-button type="primary" @click="onCreateRepeatEvent" :loading="state.loading">创建重复性事件 </el-button>
+					<el-button type="primary" @click="onObserve" v-auth="'business:order:observe'" :disabled="!scope.isSelected" :loading="state.loading"
+						>设置观察件
+					</el-button>
+					<el-button type="primary" @click="onEnd" v-auth="'business:order:end'" :disabled="!scope.isSelected" :loading="state.loading"
+						>设置终结件
+					</el-button>
+					<!--					<el-button type="primary" @click="onJbExport" :disabled="!scope.isSelected" :loading="state.loading">交办单导出 </el-button>-->
+				</template>
+				<template #expiredStatus="{ row }">
+					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+				</template>
+				<template #isProvince="{ row }">
+					<span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row" @updateList="queryList" :type="row.canSign ? 'danger' : 'primary'">{{ row.title }}</order-detail>
+				</template>
+				<template #employeeName="{ row }">
+					<span
+						>{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
+					</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'business:order:sign'"> 签收 </el-button>
+					<el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'business:order:edit'">
+						修改
+					</el-button>
+					<order-detail :order="row" @updateList="queryList" />
+				</template>
+			</ProTable>
+		</el-card>
+
+		<!-- 编辑重复性事件 -->
+		<repeat-event-edit ref="repeatEventEditRef" @updateList="queryList" />
+		<!-- 工单省退回 -->
+		<order-return ref="orderReturnRef" @updateList="queryList" />
+	</div>
+</template>
+<script setup lang="tsx" name="centerTodo">
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import type { FormInstance } from 'element-plus';
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
+import { shortcuts } from '@/utils/constants';
+import other from '@/utils/other';
+import { useRoute, useRouter } from 'vue-router';
+import { formatDate } from '@/utils/formatTime';
+import { listBaseData, orderList, provinceReturn } from '@/api/business/order';
+import { addObserve } from '@/api/query/observe';
+import { addEnd } from '@/api/query/end';
+import { treeArea } from '@/api/auxiliary/area';
+import { orderSign } from '@/api/todo/order';
+
+// 引入组件
+const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const RepeatEventEdit = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-edit.vue')); // 编辑重复性事件
+const HotSpotSelect = defineAsyncComponent(() => import('@/components/Hotspot/index.vue')); // 选择热点
+const OrderReturn = defineAsyncComponent(() => import('@/views/business/return/components/Apply.vue')); // 工单退回
+
+// 定义变量内容
+const state = reactive<any>({
+	queryParams: {
+		PageIndex: 1, // 当前页
+		PageSize: 10, // 每页条数
+		// 查询条件
+		No: null, // 工单编码
+		CurrentStepCode: null, // 当前办理节点
+		IsOverTime: null, // 是否超期
+		Keyword: null, // 关键字
+		OrgCodes: [], // 机构
+		NameOrNo: null, // 受理坐席
+		crTime: [], // 创建时间
+		CreationTimeStart: null, // 创建时间 开始
+		CreationTimeEnd: null, // 创建时间 结束
+		TransferPhone: null, // 转派人
+		EmergencyLevel: [], // 紧急程度
+		exTime: [], // 过期时间
+		ExpiredTimeStart: null, //办理期限 开始
+		ExpiredTimeEnd: null, //办理期限 结束
+		Statuses: [], // 状态
+		doneTime: [], // 办结时间
+		PushTypeCode: null, //推送类型
+		IsProvinceOrder: null, // 省市工单
+	},
+	tableData: [], //表单
+	loading: false, // 加载
+	total: 0, // 总数
+	acceptTypeOptions: [], //受理类型
+	channelOptions: [], // 来源频道
+	emergencyLevelOptions: [], // 紧急程度
+	orderStatusOptions: [], // 工单状态
+	currentStepOptions: [], // 当前办理节点
+	identityTypeOptions: [], // 来电主体
+	orgsOptions: [], // 部门
+	pushTypeOptions: [], //推送分类
+	orgData: [], // 机构数据
+	areaOptions: [], // 省市区数据
+});
+const fastSearch = ref('all'); // tab位置
+const fastSearchChange = (val: string) => {
+	fastSearch.value = val;
+	switch (val) {
+		case 'all':
+			state.queryParams.IsProvinceOrder = null;
+			break;
+		case 'city':
+			state.queryParams.IsProvinceOrder = false;
+			break;
+		case 'province':
+			state.queryParams.IsProvinceOrder = true;
+			break;
+	}
+	handleQuery();
+};
+const ruleFormRef = ref<RefType>(); // 表单ref
+const searchCol = ref(true); // 展开/收起
+// 展开/收起
+const closeSearch = () => {
+	searchCol.value = !searchCol.value;
+};
+const route = useRoute(); // 路由
+const router = useRouter(); // 路由
+const proTableRef = ref<RefType>(); // 表格ref
+const selectable = (row: any) => {
+	if (state.queryParams.IsProvinceOrder) {
+		return row?.isProvince && row?.source > 1 && row?.status <= 1;
+	} else {
+		return !row?.isProvince;
+	}
+};
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'selection', fixed: 'left', width: 55, selectable: selectable },
+	{ prop: 'expiredStatus', label: '超期状态', align: 'center' },
+	{ prop: 'no', label: '工单编码', width: 150 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'actualHandleStepName', label: '办理节点', width: 150 },
+	{ prop: 'statusText', label: '工单状态', width: 100 },
+	{ prop: 'title', label: '工单标题', width: 300 },
+	{
+		prop: 'startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'expiredTime',
+		label: '工单期满时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'filedTime',
+		label: '办结时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'orgLevelOneName', label: '一级部门', width: 170 },
+	{ prop: 'actualHandleOrgName', label: '接办部门', width: 170 },
+	{ prop: 'acceptType', label: '受理类型', width: 150 },
+	{ prop: 'counterSignTypeText', label: '是否会签', width: 100 },
+	{ prop: 'sourceChannel', label: '来源方式', width: 100 },
+	{ prop: 'hotspotName', label: '热点分类', width: 200 },
+	{
+		prop: 'sensitive',
+		label: '敏感词',
+		width: 200,
+		render: (scope) => {
+			return <span>{scope.row.sensitive?.join(',')}</span>;
+		},
+	},
+	{ prop: 'employeeName', label: '受理人', width: 120 },
+	{
+		prop: 'reTransactNum',
+		label: '重办次数',
+		render: (scope) => {
+			return <span>{scope.row.reTransactNum ? scope.row.reTransactNum : 0}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'center' },
+]);
+// 获取选择组织name值
+const cascadeRef = ref<RefType>();
+const changeOrg = () => {
+	let currentNode = cascadeRef.value.getCheckedNodes();
+	state.queryParams.orgCode = currentNode[0]?.data.orgCode ?? '';
+};
+const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
+	if (val) {
+		state.queryParams[startKey] = val[0];
+		state.queryParams[endKey] = val[1];
+	} else {
+		state.queryParams[startKey] = '';
+		state.queryParams[endKey] = '';
+	}
+	handleQuery();
+};
+// 受理时间
+const timeStartChangeCr = (val: string[]) => {
+	handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
+};
+// 过期时间
+const timeStartChangeEx = (val: string[]) => {
+	handleTimeChange(val, 'ExpiredTimeStart', 'ExpiredTimeEnd');
+};
+// 办结时间
+const timeStartChangeDone = (val: string[]) => {
+	handleTimeChange(val, 'ActualHandleTimeStart', 'ActualHandleTimeEnd');
+};
+// 获取查询条件基础信息
+const getBaseData = async () => {
+	try {
+		const res: any = await listBaseData();
+		const mappings: any = {
+			acceptTypeOptions: 'acceptTypeOptions',
+			channelOptions: 'channelOptions',
+			emergencyLevelOptions: 'emergencyLevelOptions',
+			orgsOptions: 'orgsOptions',
+			pushTypeOptions: 'pushTypeOptions',
+			orderStatusOptions: 'orderStatusOptions',
+			identityTypeOptions: 'identityTypeOptions',
+			currentStepOptions: 'currentStepOptions',
+		};
+		for (const key in mappings) {
+			state[key] = res.result?.[mappings[key]] ?? [];
+		}
+		const area = await treeArea();
+		state.areaOptions = area?.result ?? []; //省市区数据
+	} catch (error) {
+		console.log(error);
+	}
+};
+// 手动查询，将页码设置为1
+const handleQuery = () => {
+	state.queryParams.PageIndex = 1;
+	queryList();
+};
+/** 获取列表 */
+const queryList = () => {
+	let request = other.deepClone(state.queryParams);
+	Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
+	Reflect.deleteProperty(request, 'exTime'); // 删除无用的参数
+	Reflect.deleteProperty(request, 'doneTime'); // 删除无用的参数
+	Reflect.deleteProperty(request, 'AreaCode'); // 删除无用的参数
+	state.loading = true;
+	orderList(request)
+		.then((response: any) => {
+			state.tableData = response?.result.items ?? [];
+
+			state.total = response?.result.total;
+			state.loading = false;
+		})
+		.catch(() => {
+			state.loading = false;
+		});
+};
+/** 重置按钮操作 */
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	state.queryParams.CreationTimeStart = null;
+	state.queryParams.CreationTimeEnd = null;
+	state.queryParams.ExpiredTimeStart = null;
+	state.queryParams.ExpiredTimeEnd = null;
+	state.queryParams.ActualHandleTimeStart = null;
+	state.queryParams.ActualHandleTimeEnd = null;
+	state.queryParams.IsSensitiveWord = null;
+	state.queryParams.IsProvinceOrder = null;
+	fastSearch.value = 'all';
+	checkList.value = [];
+	state.queryParams.AreaCodes = [];
+	queryList();
+};
+// 设置终结件
+const onObserve = () => {
+	const titles = proTableRef.value.selectedList.map((item: any) => item.title).join(',');
+	const ids = proTableRef.value.selectedList.map((item: any) => {
+		return {
+			orderId: item.id,
+		};
+	});
+	ElMessageBox.confirm(`确定要将【${titles}】设置观察件吗？`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		autofocus: false,
+	})
+		.then(() => {
+			addObserve({ orderIds: ids }).then(() => {
+				ElMessage.success('操作成功');
+				queryList();
+			});
+		})
+		.catch(() => {});
+};
+// 设置终结件
+const onEnd = () => {
+	const titles = proTableRef.value.selectedList.map((item: any) => item.title).join(',');
+	const ids = proTableRef.value.selectedList.map((item: any) => {
+		return {
+			orderId: item.id,
+		};
+	});
+	ElMessageBox.confirm(`确定要将【${titles}】设置终结件吗？`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		autofocus: false,
+	})
+		.then(() => {
+			addEnd({ orderIds: ids }).then(() => {
+				ElMessage.success('操作成功');
+				queryList();
+			});
+		})
+		.catch(() => {});
+};
+// 省退回申请
+const onProvinceReturn = () => {
+	const titles = proTableRef.value.selectedList.map((item: any) => item.title).join(',');
+	const ids = proTableRef.value.selectedList.map((item: any) => {
+		return {
+			orderId: item.id,
+		};
+	});
+	ElMessageBox.prompt(`【${titles}】的退回原因`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		draggable: true,
+		autofocus: false,
+		inputPlaceholder: '请填写退回原因，不超过50字符',
+		inputErrorMessage: '请填写退回原因',
+		inputType: 'textarea',
+		inputValidator: (value) => {
+			if (value) return true;
+			else return '请填写退回原因';
+		},
+	})
+		.then(({ value }) => {
+			provinceReturn({ orderIds: ids, content: value }).then((res: any) => {
+				ElNotification({
+					title: '退回完成',
+					dangerouslyUseHTMLString: true,
+					message: `<div>
+  <div>总退回条数：${res.result.count}条；</>
+  <div>成功条数：${res.result.successCount}条；</div>
+  <div>失败条数：${res.result.errorCount}条；</div>
+</div>`,
+				});
+				queryList();
+			});
+		})
+		.catch(() => {});
+};
+// 签收工单
+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('签收成功');
+				queryList();
+			});
+		})
+		.catch(() => {});
+};
+// 创建重复性事件
+const repeatEventEditRef = ref<RefType>();
+const onCreateRepeatEvent = () => {
+	repeatEventEditRef.value.openDialog();
+};
+// 编辑工单
+const onOrderEdit = (row: any) => {
+	router.push({
+		name: 'orderAccept',
+		params: {
+			tagsViewName: '工单受理-' + row.no,
+			id: row.id,
+			callId: '0',
+		},
+	});
+};
+const exportCurrent = () => {
+	console.log('导出当前页', proTableRef.value);
+};
+const exportAll = () => {
+	console.log('导出全部', proTableRef.value);
+};
+// 交办单导出
+const onJbExport = () => {
+	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定导出选中的${proTableRef.value.selectedList.length}个工单的交办单，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {})
+		.catch(() => {});
+};
+onMounted(() => {
+	getBaseData();
+	queryList();
+});
+</script>
+<style scoped lang="scss">
+.business-center-todo-container {
+	.arrow {
+		transition: transform var(--el-transition-duration);
+		cursor: pointer;
+	}
+	.arrow.is-reverse {
+		transform: rotateZ(-180deg);
+	}
+}
+</style>