|
|
@@ -0,0 +1,253 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-model="state.dialogVisible"
|
|
|
+ draggable
|
|
|
+ title="批量回访"
|
|
|
+ append-to-body
|
|
|
+ destroy-on-close
|
|
|
+ @close="close"
|
|
|
+ ref="dialogRef"
|
|
|
+ @mouseup="mouseup"
|
|
|
+ :style="'transform: ' + state.transform + ';'"
|
|
|
+ >
|
|
|
+ <div class="collapse-container" v-loading="state.loading">
|
|
|
+ <el-form label-width="120px" ref="ruleFormRef" :model="state.ruleForm">
|
|
|
+ <el-row :gutter="35">
|
|
|
+ <el-col>
|
|
|
+ <el-form-item label="回访人">
|
|
|
+ {{ userInfos.name }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="话务员评价" prop="seatEvaluate" :rules="[{ required: true, message: '请选择话务员评价', trigger: 'change' }]">
|
|
|
+ <el-radio-group v-model="state.ruleForm.seatEvaluate">
|
|
|
+ <el-radio v-for="items in seatEvaluate" :key="items.key" :label="items.value" :value="items.key">{{ items.value }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item
|
|
|
+ label="话务员回访内容"
|
|
|
+ prop="seatVisitContent"
|
|
|
+ :rules="[{ required: true, message: '请填写话务员回访内容', trigger: 'blur' }]"
|
|
|
+ >
|
|
|
+ <common-advice
|
|
|
+ @chooseAdvice="chooseAdviceSeats"
|
|
|
+ v-model="state.ruleForm.seatVisitContent"
|
|
|
+ placeholder="请填写话务员回访内容"
|
|
|
+ :loading="state.loading"
|
|
|
+ :commonEnum="commonEnum.ReturnVisit"
|
|
|
+ :minRows="5"
|
|
|
+ :maxRows="10"
|
|
|
+ drawerWidth="40%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
|
+ <el-form-item
|
|
|
+ label="部门办件结果"
|
|
|
+ prop="orgProcessingResults"
|
|
|
+ :rules="[{ required: true, message: '请选择部门办件结果', trigger: 'change' }]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="state.ruleForm.orgProcessingResults"
|
|
|
+ placeholder="请选择部门办件结果"
|
|
|
+ value-key="dicDataValue"
|
|
|
+ clearable
|
|
|
+ @change="
|
|
|
+ (val) => {
|
|
|
+ state.ruleForm.orgProcessingResults.value = val?.dicDataName;
|
|
|
+ state.ruleForm.orgProcessingResults.key = val?.dicDataValue;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-option v-for="items in visitSatisfaction" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- 不满意才会选择不满意原因 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['1', '2'].includes(state.ruleForm.orgProcessingResults?.key)">
|
|
|
+ <el-form-item
|
|
|
+ label="不满意原因"
|
|
|
+ prop="orgNoSatisfiedReason"
|
|
|
+ :rules="[{ required: true, message: '请选择不满意原因', trigger: 'change' }]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="state.ruleForm.orgNoSatisfiedReason"
|
|
|
+ placeholder="请选择不满意原因"
|
|
|
+ value-key="dicDataValue"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ collapse-tags-tooltip
|
|
|
+ @change="
|
|
|
+ (val) => {
|
|
|
+ state.ruleForm.orgNoSatisfiedReason.value = val?.dicDataName;
|
|
|
+ state.ruleForm.orgNoSatisfiedReason.key = val?.dicDataValue;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-option v-for="items in dissatisfiedReason" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="['ZiGong'].includes(themeConfig.appScope)">
|
|
|
+ <el-form-item
|
|
|
+ label="部门办件态度"
|
|
|
+ prop="orgHandledAttitude"
|
|
|
+ :rules="[{ required: true, message: '请选择部门办件态度', trigger: 'change' }]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="state.ruleForm.orgHandledAttitude"
|
|
|
+ placeholder="请选择部门办件态度"
|
|
|
+ value-key="dicDataValue"
|
|
|
+ clearable
|
|
|
+ @change="
|
|
|
+ (val) => {
|
|
|
+ state.ruleForm.orgHandledAttitude.value = val.dicDataName;
|
|
|
+ state.ruleForm.orgHandledAttitude.key = val.dicDataValue;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-option v-for="items in visitManner" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="部门回访内容" prop="orgVisitContent" :rules="[{ required: true, message: '请填写部门回访内容', trigger: 'blur' }]">
|
|
|
+ <common-advice
|
|
|
+ @chooseAdvice="chooseAdviceContent"
|
|
|
+ v-model="state.ruleForm.orgVisitContent"
|
|
|
+ d
|
|
|
+ placeholder="请填写部门回访内容"
|
|
|
+ :loading="state.loading"
|
|
|
+ :commonEnum="commonEnum.ReturnVisit"
|
|
|
+ :minRows="5"
|
|
|
+ :maxRows="10"
|
|
|
+ drawerWidth="40%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="closeDialog" class="default-button">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onAudit(ruleFormRef)" :loading="state.loading">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { defineAsyncComponent, reactive, ref } from 'vue';
|
|
|
+import { ElNotification, FormInstance } from 'element-plus';
|
|
|
+import { visitAddBaseData, visitAddBatch, visitTurnSatisfaction } from '@/api/business/visit';
|
|
|
+import { useUserInfo } from '@/stores/userInfo';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+import { commonEnum } from '@/utils/constants';
|
|
|
+import { useThemeConfig } from '@/stores/themeConfig';
|
|
|
+
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['updateList']);
|
|
|
+
|
|
|
+const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false, // 是否显示弹窗
|
|
|
+ loading: false, // 是否显示加载
|
|
|
+ ruleForm: {
|
|
|
+ seatEvaluate: null,
|
|
|
+ orgProcessingResults: null,
|
|
|
+ orgHandledAttitude: null,
|
|
|
+ orgNoSatisfiedReason: null,
|
|
|
+ seatVisitContent: null,
|
|
|
+ orgVisitContent: null,
|
|
|
+ visit: [],
|
|
|
+ },
|
|
|
+ transform: 'translate(0px, 0px)', // 附件弹窗位置
|
|
|
+});
|
|
|
+const ruleFormRef = ref<RefType>();
|
|
|
+const ids = ref<any>([]);
|
|
|
+const storesUserInfo = useUserInfo();
|
|
|
+const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
|
|
|
+const storesThemeConfig = useThemeConfig();
|
|
|
+const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
+const seatEvaluate = ref<EmptyArrayType>(); // 话务员评价
|
|
|
+const dissatisfiedReason = ref<EmptyArrayType>(); // 不满意原因
|
|
|
+const visitManner = ref<EmptyArrayType>(); // 部门办件态度
|
|
|
+const visitSatisfaction = ref<EmptyArrayType>(); // 部门办件结果
|
|
|
+// 获取基础信息
|
|
|
+const getBaseData = async () => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const { result } = await visitAddBaseData();
|
|
|
+ seatEvaluate.value = result?.seatEvaluate ?? [];
|
|
|
+ dissatisfiedReason.value = result?.dissatisfiedReason ?? [];
|
|
|
+ visitManner.value = result?.visitManner ?? [];
|
|
|
+ visitSatisfaction.value = result?.visitSatisfaction ?? [];
|
|
|
+ state.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 打开弹窗
|
|
|
+const openDialog = async (val: any) => {
|
|
|
+ state.dialogVisible = true;
|
|
|
+ state.ruleForm.visit = val;
|
|
|
+ await getBaseData();
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
+};
|
|
|
+const close = () => {
|
|
|
+ ruleFormRef.value?.clearValidate();
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+ state.loading = false;
|
|
|
+};
|
|
|
+// 设置抽屉
|
|
|
+const dialogRef = ref<RefType>(); // 弹窗ref
|
|
|
+const mouseup = () => {
|
|
|
+ state.transform = dialogRef.value.dialogContentRef.$el.style.transform;
|
|
|
+};
|
|
|
+// 保存
|
|
|
+const onAudit = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
+ state.loading = true;
|
|
|
+ visitAddBatch(state.ruleForm)
|
|
|
+ .then((res: any) => {
|
|
|
+ state.loading = false;
|
|
|
+ closeDialog();
|
|
|
+ emit('updateList');
|
|
|
+ ElNotification({
|
|
|
+ type: 'info',
|
|
|
+ title: '批量回访完成',
|
|
|
+ message: `成功评判${res.result?.completeCount}条，失败${res.result?.errorCount}条`,
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+// 选中常用意见
|
|
|
+const chooseAdviceSeats = (item: any) => {
|
|
|
+ state.ruleForm.seatVisitContent += item.content;
|
|
|
+};
|
|
|
+const chooseAdviceContent = (item: any) => {
|
|
|
+ state.ruleForm.orgVisitContent += item.content;
|
|
|
+};
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-radio {
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+</style>
|
zhangchong