hotline-admin-wex/src/views/business/order/components/Order-repeat-event.vue

<template>
	<el-dialog v-model="state.dialogVisible" draggable title="重复性事件" ref="dialogRef" width="60%" append-to-body>
		<el-form :model="state.queryParams" ref="queryParamsRef" :inline="true" @submit.native.prevent>
			<el-form-item label="关键词" prop="Keyword">
				<el-input v-model="state.queryParams.Keyword" placeholder="事件标题/关键词" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<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="timeStartChangeCr"
					value-format="YYYY-MM-DD[T]HH:mm:ss"
				/>
			</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(queryParamsRef)" :loading="state.loading" class="default-button">
					<SvgIcon name="ele-Refresh" class="mr5" />重置
				</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="state.tableData" v-loading="state.loading" max-height="300">
			<el-table-column prop="phoneNo" label="标题" show-overflow-tooltip width="180">
				<template #default="{ row }">
					{{ row.title }}
				</template>
			</el-table-column>
			<el-table-column prop="hotspotName" label="关键词" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="no" label="创建时间" show-overflow-tooltip width="170">
				<template #default="{ row }"> </template>
			</el-table-column>
			<el-table-column prop="currentStepName" label="创建人" show-overflow-tooltip></el-table-column>
			<el-table-column prop="statusText" label="事件工单数" width="100" fixed="right" align="center"></el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button class="default-button" @click="state.dialogVisible = false">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="orderRepeatEvent">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { shortcuts } from '/@/utils/constants';
import { ElButton, ElMessage } from 'element-plus';
import { throttle } from '/@/utils/tools';
import { auth } from '/@/utils/authFunction';
// 引入组件
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: '', // 关键字
	},
	tableData: [], // 表格数据
	total: 0, // 总条数
	loading: false, // 加载状态
	ruleForm: {}, // 表单数据
});
const queryParamsRef = ref<RefType>(); // 查询参数
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] = '';
	}
};
// 时间
const timeStartChangeCr = (val: string[]) => {
	handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
};
/** 搜索按钮操作 */
const handleQuery = throttle(() => {
	state.queryParams.PageIndex = 1;
	queryList();
}, 500);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	handleQuery();
}, 300);
const queryList = () => {
	if (!auth('business:order:history')) ElMessage.error('抱歉，您没有权限查询历史工单！');
	else {
	}
};
// 打开弹窗
const openDialog = (row: any) => {
	queryList();
	state.dialogVisible = true;
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>