hotline-web/src/views/statistics/department/handle.vue

<template>
	<div class="statistics-department-handle-container layout-pd">
		<el-card shadow="never">
			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
        <el-form-item label="来电主体" prop="TypeId">
          <el-select v-model="state.queryParams.TypeId" placeholder="请选择来电主体" @change="handleQuery">
            <el-option :value="0" label="全部" />
            <el-option :value="1" label="市民" />
            <el-option :value="2" label="企业" />
          </el-select>
        </el-form-item>
				<el-form-item label="部门名称" prop="OrgName">
					<el-input v-model="state.queryParams.OrgName" placeholder="部门名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
				</el-form-item>
				<el-form-item label="时间段" prop="crTime">
					<el-date-picker
						v-model="state.queryParams.crTime"
						type="daterange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="handleQuery"
						value-format="YYYY-MM-DD"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item label="" prop="isProvince">
					<el-checkbox v-model="state.queryParams.isProvince" label="省来源" border @change="handleQuery" />
				</el-form-item>
				<el-form-item>
					<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 type="primary" @click="onDetailList" :loading="state.loading"> <SvgIcon name="ele-List" class="mr5" /> 列表明细 </el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="never">
			<ProTable
				ref="proTableRef"
				:pagination="false"
				:columns="columns"
				:data="state.tableData"
				@updateTable="queryList"
				:loading="state.loading"
				show-summary
				:summary-method="getSummaries"
				:toolButton="['refresh', 'setting', 'exportAll']"
				:exportMethod="departmentOrderExport"
				:exportParams="requestParams"
			>
			</ProTable>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="statisticsDepartmentHandle">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { departmentOrder, departmentOrderExport } from '@/api/statistics/department';
import { defaultDate, shortcuts } from '@/utils/constants';
import { useRouter } from 'vue-router';
import Other from '@/utils/other';

// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
// ProTable 实例
const proTableRef = ref<RefType>();

// 表格配置项
const columns = reactive<any[]>([
	{
		prop: 'orgName',
		label: '部门名称',
		align: 'center',
		fixed: 'left',
		minWidth: 200,
		render: (scope) => {
			return (
				<el-button type="primary" link onClick={() => linkDetail(scope)}>
					{scope.row.orgName}
				</el-button>
			);
		},
	},
	{ prop: 'orgTypeText', label: '部门类别', align: 'center', fixed: 'left', minWidth: 100 },
	{ prop: 'orderCountNum', label: '信件总量', align: 'center', fixed: 'left', minWidth: 90 },
	{
		prop: 'bjxx',
		label: '办件信息',
		align: 'center',
		_children: [
			{
				prop: 'ybOrderCountNum',
				label: '已办案件',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '0')}>
							{scope.row.ybOrderCountNum}
						</el-button>
					);
				},
			},
			{
				prop: 'zbOrderCountNum',
				label: '在办案件',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '1')}>
							{scope.row.zbOrderCountNum}
						</el-button>
					);
				},
			},
			{
				prop: 'orderCompletionRate',
				label: '办结率',
				align: 'center',
				minWidth: 90,
			},
			{
				prop: 'completeOnTimeRate',
				label: '按时办结率',
				align: 'center',
				minWidth: 120,
			},
		],
	},
	{
		prop: 'yqcs',
		label: '延期次数',
		align: 'center',
		_children: [
			{
				prop: 'orderDelayCount',
				label: '延期次数',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '2')}>
							{scope.row.orderDelayCount}
						</el-button>
					);
				},
			},
			{
				prop: 'orderDelayRate',
				label: '延期率',
				align: 'center',
				minWidth: 90,
			},
		],
	},
	{
		prop: 'cqxx',
		label: '超期信息',
		align: 'center',
		_children: [
			{
				prop: 'ybOverdue',
				label: '已办超期',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '3')}>
							{scope.row.ybOverdue}
						</el-button>
					);
				},
			},
			{
				prop: 'zbOverdue',
				label: '待办超期',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '4')}>
							{scope.row.zbOverdue}
						</el-button>
					);
				},
			},
			{
				prop: 'hqybOverdue',
				label: '会签已办超期',
				align: 'center',
				minWidth: 120,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '5')}>
							{scope.row.hqybOverdue}
						</el-button>
					);
				},
			},
			{
				prop: 'hqzbOverdue',
				label: '会签待办超期',
				align: 'center',
				minWidth: 120,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '6')}>
							{scope.row.hqzbOverdue}
						</el-button>
					);
				},
			},
			{
				prop: 'subtotalOverdue',
				label: '超期件数',
				align: 'center',
				minWidth: 120,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '7')}>
							{scope.row.subtotalOverdue}
						</el-button>
					);
				},
			},
			{
				prop: 'hqOverdueRate',
				label: '超期率',
				align: 'center',
				minWidth: 90,
			},
		],
	},
	{
		prop: 'hqxx',
		label: '会签信息',
		align: 'center',
		_children: [
			{
				prop: 'delayWait',
				label: '会签待办',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '9')}>
							{scope.row.delayWait}
						</el-button>
					);
				},
			},
			{
				prop: 'delayEnd',
				label: '会签已办',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '8')}>
							{scope.row.delayEnd}
						</el-button>
					);
				},
			},
		],
	},
	{
		prop: 'gdxx',
		label: '归档信息',
		align: 'center',
		_children: [
			{
				prop: 'toBeArchived',
				label: '待归档',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '10')}>
							{scope.row.toBeArchived}
						</el-button>
					);
				},
			},
			{
				prop: 'archived',
				label: '已归档',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '11')}>
							{scope.row.archived}
						</el-button>
					);
				},
			},
		],
	},
	{
		prop: 'fbxx',
		label: '发布信息',
		align: 'center',
		_children: [
			{
				prop: 'waitPublished',
				label: '待发布',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '12')}>
							{scope.row.waitPublished}
						</el-button>
					);
				},
			},
			{
				prop: 'publishedOpen',
				label: '公开件',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '13')}>
							{scope.row.publishedOpen}
						</el-button>
					);
				},
			},
			{
				prop: 'publishedNoOpen',
				label: '不公开件',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '14')}>
							{scope.row.publishedNoOpen}
						</el-button>
					);
				},
			},
		],
	},
	{
		prop: 'zbj',
		label: '甄别件',
		align: 'center',
		_children: [
			{
				prop: 'screenCount',
				label: '申请总量',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '15')}>
							{scope.row.screenCount}
						</el-button>
					);
				},
			},
			{
				prop: 'screenApproval',
				label: '待甄别',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '16')}>
							{scope.row.screenApproval}
						</el-button>
					);
				},
			},
			{
				prop: 'screenNotPass',
				label: '未同意',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '18')}>
							{scope.row.screenNotPass}
						</el-button>
					);
				},
			},
			{
				prop: 'screenPass',
				label: '已同意',
				align: 'center',
				minWidth: 90,
				render: (scope) => {
					return (
						<el-button type="primary" link onClick={() => linkDetail(scope, '17')}>
							{scope.row.screenPass}
						</el-button>
					);
				},
			},
		],
	},
	{
		prop: 'satisfactionRate',
		label: '总满意率',
		align: 'center',
		minWidth: 90,
	},
]);
const state = reactive<any>({
	queryParams: {
		// 查询条件
		OrgName: null, // 部门名称
		crTime: defaultDate, // 时间默认今天开始到今天结束
		isProvince: null,
    TypeId:0
	},
	tableData: [], //表单
	loading: false, // 加载
	totalCount: 0, // 总计
  IdentityType:0,
});
/** 搜索按钮操作 */
const handleQuery = () => {
	// state.queryParams.PageIndex = 1;
	queryList();
};
/** 获取列表 */
const requestParams = ref({});
const queryList = () => {
	state.loading = true;
	requestParams.value = Other.deepClone(state.queryParams);
	requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	Reflect.deleteProperty(requestParams.value, 'crTime');
	departmentOrder(requestParams.value)
		.then((res: any) => {
			state.tableData = res.result?.list ?? [];
			state.totalCount = res.result?.total;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
// 合计
const getSummaries = (param: any) => {
	const { columns } = param;
	const sums: string[] = [];
	columns.forEach((column: { property: string }, index: number) => {
		if (index === 0) {
			sums[index] = '合计';
			return;
		}
		switch (column.property) {
			case 'orgTypeText': // 部门类别
				sums[index] = state.totalCount?.orgTypeText;
				break;
			case 'orderCountNum': // 信件总量
				sums[index] = state.totalCount?.orderCountNum;
				break;
			case 'ybOrderCountNum': // 已办案件
				sums[index] = state.totalCount?.ybOrderCountNum;
				break;
			case 'zbOrderCountNum': // 在办案件
				sums[index] = state.totalCount?.zbOrderCountNum;
				break;
			case 'completeOnTimeRate': // 按时办结率
				sums[index] = state.totalCount?.completeOnTimeRate;
				break;
			case 'orderCompletionRate': // 办结率
				sums[index] = state.totalCount?.orderCompletionRate;
				break;
			case 'orderDelayCount': // 延期次数
				sums[index] = state.totalCount?.orderDelayCount;
				break;
			case 'orderDelayRate': // 延期率
				sums[index] = state.totalCount?.orderDelayRate;
				break;
			case 'ybOverdue': // 已办超期
				sums[index] = state.totalCount?.ybOverdue;
				break;
			case 'zbOverdue': // 待办超期
				sums[index] = state.totalCount?.zbOverdue;
				break;
			case 'hqybOverdue': // 会签已办超期
				sums[index] = state.totalCount?.hqybOverdue;
				break;
			case 'hqzbOverdue': // 会签待办超期
				sums[index] = state.totalCount?.hqzbOverdue;
				break;
			case 'subtotalOverdue': // 超期件数
				sums[index] = state.totalCount?.subtotalOverdue;
				break;
			case 'hqOverdueRate': // 超期率
				sums[index] = state.totalCount?.hqOverdueRate;
				break;
			case 'delayWait': // 会签待办
				sums[index] = state.totalCount?.delayWait;
				break;
			case 'delayEnd': // 会签已办
				sums[index] = state.totalCount?.delayEnd;
				break;
			case 'toBeArchived': // 待归档
				sums[index] = state.totalCount?.toBeArchived;
				break;
			case 'archived': // 已归档
				sums[index] = state.totalCount?.archived;
				break;
			case 'waitPublished': // 待发布
				sums[index] = state.totalCount?.waitPublished;
				break;
			case 'publishedOpen': // 公开件
				sums[index] = state.totalCount?.publishedOpen;
				break;
			case 'publishedNoOpen': // 不公开件
				sums[index] = state.totalCount?.publishedNoOpen;
				break;
			case 'screenCount': // 甄别申请总量
				sums[index] = state.totalCount?.screenCount;
				break;
			case 'screenApproval': // 待甄别
				sums[index] = state.totalCount?.screenApproval;
				break;
			case 'screenNotPass': // 未同意
				sums[index] = state.totalCount?.screenNotPass;
				break;
			case 'screenPass': // 已同意
				sums[index] = state.totalCount?.screenPass;
				break;
			case 'satisfactionRate': // 总满意率
				sums[index] = state.totalCount?.satisfactionRate;
				break;
			default:
				sums[index] = '';
				break;
		}
	});
	return sums;
};
// 查看详情
const router = useRouter();
const linkDetail = (scope, key?: string) => {
	let StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	let EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	if (key) {
		// 点击数字
		router.push({
			name: 'statisticsDepartmentDetailHandle',
			query: {
				StartTime,
				EndTime,
				OrgCode: scope.row.orgCode,
				StatisticsType: key,
				isProvince: state.queryParams.isProvince,
			},
		});
	} else {
		// 点击部门
		router.push({
			name: 'statisticsDepartmentDetailHandleOrg',
			query: {
				StartTime,
				EndTime,
				isProvince: state.queryParams.isProvince,
				id: scope.row.orgCode,
			},
		});
	}
};
// 跳转列表明细
const onDetailList = () => {
	router.push({
		path: '/statistics/department/detailHandleList',
	});
};
onMounted(() => {
	queryList();
});
</script>