|
@@ -0,0 +1,653 @@
|
|
|
+<template>
|
|
|
+ <el-dialog v-model="state.dialogVisible" class="order-detail-dialog" draggable ref="dialogRef" width="80%" append-to-body destroy-on-close>
|
|
|
+ <template #header>
|
|
|
+ <el-tabs v-model="state.activeName" @tab-change="handleClick">
|
|
|
+ <el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-collapse v-model="state.collapseArr" v-if="state.activeName === '0'" class="collapse-box" v-loading="state.loading">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">来电人信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.transferPhone">
|
|
|
+ <el-form-item label="转接来源"> {{ state.ruleForm.transferPhone }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromPhone">
|
|
|
+ <el-form-item label="来电号码">
|
|
|
+ {{ state.ruleForm.fromPhone }}
|
|
|
+ <el-button plain title="录音文件" size="small" type="primary" class="ml8" @click="recordFile(state.ruleForm.callId)"
|
|
|
+ v-if="state.ruleForm.callId" >录音文件</el-button>
|
|
|
+ <!-- <el-popover :width="480" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
|
|
|
+ </template>
|
|
|
+ <AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" />
|
|
|
+ </el-popover> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.callAddress">
|
|
|
+ <el-form-item label="号码归属地">
|
|
|
+ {{ state.ruleForm.callAddress }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="来电人姓名">
|
|
|
+ {{ state.ruleForm.fromName }} <span class="ml5"> {{ state.ruleForm.fromGenderText }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="来电人性别">
|
|
|
+ {{ state.ruleForm.fromGenderText }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.contact">
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <span v-if="showMaskNumber"> {{ state.ruleForm.contactMask }}</span>
|
|
|
+ <span v-else>{{ state.ruleForm.contact }}</span>
|
|
|
+ <el-button plain title="外呼" size="small" type="primary" class="ml8" @click="callPhone(state.ruleForm.contact)">外呼</el-button>
|
|
|
+ <el-button plain title="查看号码" size="small" type="primary" class="ml8" @click="showMaskNumber = !showMaskNumber">{{
|
|
|
+ showMaskNumber ? '查看号码' : '隐藏号码'
|
|
|
+ }}</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="来电人身份"> {{ state.ruleForm.identityTypeText }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="受理短信"> {{ state.ruleForm.smsSendedText }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.company">
|
|
|
+ <el-form-item label="工作单位"> {{ state.ruleForm.company }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="2">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">工单信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="来源方式"> {{ state.ruleForm.sourceChannel }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="受理类型"> {{ state.ruleForm.acceptType }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromProvinceNo">
|
|
|
+ <el-form-item label="省工单编码"> {{ state.ruleForm.fromProvinceNo }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单类型">
|
|
|
+ {{ state.ruleForm.orderTypeText }}
|
|
|
+ <!-- 投诉或者建议并且是12315工单才有扩展信息 -->
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ v-if="state.ruleForm.orderType === 1 && (state.ruleForm.acceptType === '30' || state.ruleForm.acceptType === '35')"
|
|
|
+ class="ml10"
|
|
|
+ @click="showExpandInfo"
|
|
|
+ ><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="是否重复">
|
|
|
+ {{ state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0 ? '是(' + state.ruleForm.duplicateIds.length + '次)' : '否' }}
|
|
|
+ <el-button
|
|
|
+ plain
|
|
|
+ title="查看重复工单"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ class="ml8"
|
|
|
+ @click="showRepeatInfo"
|
|
|
+ v-if="state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0"
|
|
|
+ >查看重复工单</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="受理人">
|
|
|
+ <span>{{ state.ruleForm?.acceptorName}} <span v-if="state.ruleForm?.acceptorStaffNo">[{{state.ruleForm?.acceptorStaffNo}}]</span></span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.incidentTime">
|
|
|
+ <el-form-item label="受理时间"> {{ formatDate(state.ruleForm.incidentTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.pushType">
|
|
|
+ <el-form-item label="推送分类"> {{ state.ruleForm.pushType }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="工单标题">
|
|
|
+ {{ state.ruleForm.title }} <el-tag class="ml10">{{ state.ruleForm.statusText }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="受理内容">
|
|
|
+ {{ state.ruleForm.content }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-auth="'file:list'">
|
|
|
+ <el-form-item label="附件">
|
|
|
+ <annex-list name="查看附件" readonly :businessId="state.ruleForm.id" classify="查看附件" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="3">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">结果信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="交办部门"> 热线中心 </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="交办时间"> {{ formatDate(state.ruleForm.centerToOrgTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办理部门"> {{ state.ruleForm.actualHandleOrgName }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办理时间"> {{ formatDate(state.ruleForm.actualHandleTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单办理期限"> {{ state.ruleForm.timeLimit }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单期满时间"> {{ formatDate(state.ruleForm.expiredTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="办理结果"> {{ state.ruleForm.actualOpinion }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="4" v-if="state.supplements && state.supplements.length">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">补充信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container">
|
|
|
+ <div v-for="i in state.supplements" :key="i" class="plug-container">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充部门">
|
|
|
+ {{ i.creator.organization }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充时间"> {{ formatDate(i.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充人">
|
|
|
+ {{ i.creator.name }} <span v-if="i.creator.staffNo">[{{ i.creator.staffNo }} ]</span></el-form-item
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="补充详情">
|
|
|
+ {{ i.opinion }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="5" v-if="state.workflow.assignOrgs">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">回访信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="6" v-if="state.workflow.assignOrgs">
|
|
|
+ <template #title>
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">重办信息</b>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被重办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="重办时间"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="重办理由"> {{ state.workflow.timeLimit }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="重办原因"> {{ state.workflow.opinion }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+
|
|
|
+ <div v-if="state.activeName === '1'" v-loading="state.loading">
|
|
|
+ <process-time-line :data="state.traces" defaultExpandAll />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="state.activeName === '2'" v-loading="state.loading">
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">回访信息</b>
|
|
|
+ </p>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="state.activeName === '3'" v-loading="state.loading">
|
|
|
+ <p class="pl20">
|
|
|
+ <b class="font14">发布信息</b>
|
|
|
+ </p>
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 扩展信息 -->
|
|
|
+ <order-expand-detail ref="orderExpandDetailRef" />
|
|
|
+ <!-- 重复工单 -->
|
|
|
+ <order-repeat ref="orderRepeatRef" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="orderDetail">
|
|
|
+import { defineAsyncComponent, reactive, ref } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { throttle } from '/@/utils/tools';
|
|
|
+import { commonEnum } from '/@/utils/constants';
|
|
|
+import { orderDetail } from '/@/api/business/order';
|
|
|
+import { formatDate } from '/@/utils/formatTime';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import { VoiceInterfaceObject } from '/@/utils/PhoneScript';
|
|
|
+import {workflowTraces} from "/@/api/system/workflow";
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const OrderExpandDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-expand-detail.vue')); // 扩展信息
|
|
|
+const OrderRepeat = defineAsyncComponent(() => import('/@/views/business/order/components/Order-repeat.vue')); // 重复工单
|
|
|
+const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue')); // 附件列表
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const ProcessTimeLine = defineAsyncComponent(() => import('/@/components/ProcessTimeLine/index.vue'));
|
|
|
+// const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));
|
|
|
+
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['updateList', 'handle']);
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false, // 弹窗显示隐藏
|
|
|
+ ruleForm: {
|
|
|
+ // 表单数据
|
|
|
+ url: '',
|
|
|
+ fromGenderText: '',
|
|
|
+ channelText: '',
|
|
|
+ identityTypeText: '',
|
|
|
+ licenceNo: '',
|
|
|
+ contactMask: '',
|
|
|
+ company: '',
|
|
|
+ emergencyLevelText: '',
|
|
|
+ incidentTime: '',
|
|
|
+ } as any,
|
|
|
+ activeName: '0', // tab切换
|
|
|
+ tabPaneList: [
|
|
|
+ // tab列表
|
|
|
+ {
|
|
|
+ label: '工单详情',
|
|
|
+ value: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '流程明细',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '回访详情',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发布详情',
|
|
|
+ value: '3',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ collapseArr: ['1', '2','3'], //展开列表
|
|
|
+ loading: false,
|
|
|
+ supplements: [], // 补充内容
|
|
|
+ workflow: {}, // 工单流程内容
|
|
|
+ orderId: '', //工单id
|
|
|
+ traces: [],
|
|
|
+});
|
|
|
+const showMaskNumber = ref<boolean>(true); // 是否展示号码
|
|
|
+const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
+const router = useRouter(); // 路由
|
|
|
+// 查看工单详情
|
|
|
+const getOrderDetail = async (id: string) => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const res: any = await orderDetail(id);
|
|
|
+ state.ruleForm = res.result;
|
|
|
+ state.workflow = state.ruleForm?.workflow ?? {};
|
|
|
+ state.supplements = res.result?.workflow?.supplements ?? [];
|
|
|
+ state.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+const formatTraces = (val: any) => {
|
|
|
+ if (!val || !val.length) return [];
|
|
|
+ val.forEach((item: any) => {
|
|
|
+ switch (item.expiredStatus) {
|
|
|
+ case 0:
|
|
|
+ item.type = 'success';
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ item.type = 'primary';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ item.type = 'danger';
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (item.traces?.length) {
|
|
|
+ formatTraces(item.traces);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return val;
|
|
|
+};
|
|
|
+// 查看流程明细
|
|
|
+const getWorkflowTraces = async (id: string) => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ // 查询审核记录
|
|
|
+ const res = await workflowTraces(id);
|
|
|
+ state.traces = res.result?.traces ?? [];
|
|
|
+ state.traces = formatTraces(state.traces);
|
|
|
+ state.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 回访详情
|
|
|
+const getVisitDetail = async (id: string) => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+
|
|
|
+ state.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 发布详情
|
|
|
+const getPublishDetail = async (id: string) => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+
|
|
|
+ state.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 打开弹窗
|
|
|
+const openDialog = (val: any) => {
|
|
|
+ if (!val || !val.id) {
|
|
|
+ ElMessage.error('工单id不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.orderId = val.id;
|
|
|
+ if(val.activeName) {
|
|
|
+ state.activeName = val.activeName;//传入查询tab
|
|
|
+ handleClick(val.activeName)
|
|
|
+ }else{
|
|
|
+ getOrderDetail(state.orderId);
|
|
|
+ }
|
|
|
+ state.dialogVisible = true;
|
|
|
+};
|
|
|
+// 切换tab 查询列表
|
|
|
+const handleClick = (val: string) => {
|
|
|
+ switch (val) {
|
|
|
+ case '0': //工单详情
|
|
|
+ getOrderDetail(state.orderId);
|
|
|
+ break;
|
|
|
+ case '1': // 流程明细
|
|
|
+ getWorkflowTraces(state.workflow.id)
|
|
|
+ break;
|
|
|
+ case '2':// 回访详情
|
|
|
+ getVisitDetail(state.orderId)
|
|
|
+ break;
|
|
|
+ case '3': // 发布详情
|
|
|
+ getPublishDetail(state.orderId)
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ getOrderDetail(state.orderId);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
+};
|
|
|
+// 查看录音文件
|
|
|
+const recordFile = (callId:string)=>{
|
|
|
+ console.log(callId)
|
|
|
+}
|
|
|
+// 电话外呼
|
|
|
+const callPhone = (number: number | string) => {
|
|
|
+ VoiceInterfaceObject.DialOut(number); // 呼叫
|
|
|
+};
|
|
|
+const orderRepeatRef = ref<RefType>();
|
|
|
+// 展示重复工单列表
|
|
|
+const showRepeatInfo = () => {
|
|
|
+ orderRepeatRef.value.openDialog(state.ruleForm);
|
|
|
+};
|
|
|
+// 展示扩展表单
|
|
|
+const orderExpandDetailRef = ref<RefType>(); // 扩展信息
|
|
|
+const showExpandInfo = () => {
|
|
|
+ let form: any = {};
|
|
|
+ if (state.ruleForm.acceptType === '30') {
|
|
|
+ // 举报
|
|
|
+ form = state.ruleForm.orderReport;
|
|
|
+ form.orderTypeText = '12315市场监管局受理单';
|
|
|
+ form.acceptTypeText = '举报';
|
|
|
+ } else if (state.ruleForm.acceptType === '35') {
|
|
|
+ //投诉
|
|
|
+ form = state.ruleForm.orderComplain;
|
|
|
+ form.orderTypeText = '12315市场监管局受理单';
|
|
|
+ form.acceptTypeText = '投诉';
|
|
|
+ }
|
|
|
+ orderExpandDetailRef.value.openDialog(form);
|
|
|
+};
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.collapse-box {
|
|
|
+ :deep(.el-collapse-item__header) {
|
|
|
+ background-color: var(--hotline-bg-main-color);
|
|
|
+ height: 40px;
|
|
|
+ border-radius: var(--el-border-radius-base);
|
|
|
+ }
|
|
|
+ :deep(.el-collapse-item__content) {
|
|
|
+ padding-bottom: 10px !important;
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .el-form-item__content {
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collapse-container {
|
|
|
+ padding: 10px;
|
|
|
+ .plug-container {
|
|
|
+ border: var(--el-border);
|
|
|
+ border-radius: var(--el-border-radius-base);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.el-tabs__item) {
|
|
|
+ font-size: var(--el-font-size-base);
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.order-detail-dialog {
|
|
|
+}
|
|
|
+</style>
|