hotline-web/src/views/business/visit/component/Smart-visit-add.vue

<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="新增智能回访任务" @close="close" append-to-body destroy-on-close>
		<el-divider content-position="left" class="mb30">
			<el-text tag="b" size="large"> 回访任务内容 </el-text>
		</el-divider>
		<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef" v-loading="state.loading">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="任务名称" prop="name" :rules="[{ required: true, message: '请填写任务名称', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.name" placeholder="请填写任务名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="时间段" prop="crTime" :rules="[{ required: true, message: '请选择时间段', trigger: 'change' }]">
						<el-date-picker
							v-model="state.ruleForm.crTime"
							type="datetimerange"
							unlink-panels
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:shortcuts="shortcuts"
							value-format="YYYY-MM-DD[T]HH:mm:ss"
              :default-time="defaultTimeStartEnd"
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="节日禁呼" prop="festivalBan" :rules="[{ required: true, message: '请选择节日禁呼', trigger: 'change' }]">
						<el-radio-group v-model="state.ruleForm.festivalBan">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left" class="mb30">
			<el-text tag="b" size="large"> 回访任务名单 </el-text>
		</el-divider>
		<el-form :model="state.queryParams" ref="queryFormRef" @submit.native.prevent>
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
					<el-form-item label="工单标题" prop="Title">
						<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="queryList" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
					<el-form-item label="工单编码" prop="No">
						<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="queryList" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
					<el-form-item label="受理类型" prop="AcceptTypes">
						<el-select
							v-model="state.queryParams.AcceptTypes"
							placeholder="请选择受理类型"
							multiple
							clearable
							class="w100"
							collapse-tags
							collapse-tags-tooltip
							:max-collapse-tags="2"
						>
							<el-option v-for="item in state.acceptTypeOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
					<el-form-item label="热点分类" prop="HotspotIds">
						<hot-spot-select
							v-model="state.queryParams.HotspotIds"
							class="w100"
							:hotspotExternal="state.hotspotExternal"
							show-checkbox
							ref="hotSpotRef"
							@confirm="queryList"
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
					<el-form-item>
						<el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
						<el-button @click="resetQuery(queryFormRef)" class="default-button" :loading="state.loading">
							<SvgIcon name="ele-Refresh" class="mr5" />重置
						</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
			<template #title="{ row }">
				<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
			</template>
		</ProTable>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading" :disabled="!canChoose">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="tsx">
import { formatDate } from '@/utils/formatTime';
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref, defineAsyncComponent, computed } from 'vue';
import { getSmartVisitRecord } from '@/api/smartVisit';
import { defaultTimeStartEnd, shortcuts } from "@/utils/constants";
import { smartVisitAdd, smartVisitBaseData } from '@/api/smartVisit';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const HotSpotSelect = defineAsyncComponent(() => import('@/components/Hotspot/index.vue')); // 选择热点
const emit = defineEmits(['updateList']);
const state = reactive({
	queryParams: {
		Title: null,
		No: null,
		AcceptTypes: [],
		HotspotIds: [],
	},
	tableData: [], //表格
	loading: false, // 加载
	dialogVisible: false, // 弹窗
	ruleForm: {
		name: '',
		crTime: [],
		festivalBan: 1,
	}, // 表单数据
	hotspotExternal: [],
	acceptTypeOptions: [],
});
const columns = ref<any[]>([
	{ type: 'selection', fixed: 'left', width: 55, align: 'center' },
	{ prop: 'order.no', label: '工单编码', width: 150 },
	{
		prop: 'title',
		label: '标题',
		width: 300,
	},
	{ prop: 'order.sourceChannel', label: '来源方式' },
	{ prop: 'visitStateText', label: '回访状态' },
	{ prop: 'order.acceptType', label: '受理类型', width: 150 },
	{ prop: 'order.hotspotName', label: '热点分类', width: 100 },
	{ prop: 'order.actualHandleStepName', label: '办理节点', width: 150 },
	{
		prop: 'order.acceptorName',
		label: '受理人',
		width: 120,
	},
	{ prop: 'order.orgLevelOneName', label: '一级部门', width: 150 },
	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 150 },
	{
		label: '受理时间',
		prop: 'order.startTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '办结时间',
		prop: 'order.filedTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '办结时间',
		prop: 'order.filedTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '发布时间',
		prop: 'publishTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row?.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{ prop: 'employeeName', label: '回访人', width: 170 },
]);
const proTableRef = ref<RefType>();
const canChoose = computed(() => {
	return proTableRef.value?.selectedList.length;
});
// 基础信息
const getBaseData = async () => {
	const acceptTypeOptions = await smartVisitBaseData();
	state.acceptTypeOptions = acceptTypeOptions.result?.acceptTypeOptions;
};
// 打开弹窗
const openDialog = () => {
	state.dialogVisible = true;
	getBaseData();
	queryList();
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
};
// 获取所有工单列表
const queryList = async () => {
	state.loading = true;
	try {
		const res = await getSmartVisitRecord(state.queryParams);
		state.tableData = res.result;
		state.loading = false;
	} catch (e) {
		console.log(e);
		state.loading = false;
	}
};
// 重置所有工单列表
const queryFormRef = ref<RefType>();
const hotSpotRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	hotSpotRef.value?.reset();
	queryList();
};

// 确定选择所有工单到重复工单
const ruleFormRef = ref<RefType>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		const request = {
			name: state.ruleForm.name,
			beginTime: state.ruleForm.crTime[0],
			endTime: state.ruleForm.crTime[1],
			festivalBan: state.ruleForm.festivalBan,
			aiOrderVisitDetails: proTableRef.value?.selectedList.map((item: any) => {
				return {
					orderId: item.order?.id,
					orderVisitId: item.id,
					outerNo: item.order?.contact,
				};
			}),
		};
		smartVisitAdd(request)
			.then(() => {
				state.loading = false;
				state.dialogVisible = false;
				ElMessage.success('操作成功');
				emit('updateList');
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
defineExpose({
	openDialog,
});
</script>