|
|
|
@ -9,8 +9,9 @@ |
|
|
|
title="工单详情与评议痕迹" |
|
|
|
:width="850" |
|
|
|
:open="visibleFlag" |
|
|
|
@cancel="onClose" |
|
|
|
:footer="null" |
|
|
|
:destroyOnClose="true" |
|
|
|
@cancel="onClose" |
|
|
|
> |
|
|
|
<div v-if="loading" class="loading-wrapper"> |
|
|
|
<a-spin tip="加载中..." /> |
|
|
|
@ -18,38 +19,29 @@ |
|
|
|
|
|
|
|
<div v-else class="detail-container"> |
|
|
|
<!-- 1. 基本信息卡片 --> |
|
|
|
<a-card title="基本信息" size="small" class="detail-card"> |
|
|
|
<a-descriptions :column="2" bordered size="small"> |
|
|
|
<a-card size="small" class="detail-card" :bordered="false" style="background: transparent; padding: 0"> |
|
|
|
<FormTitle title="基本信息" /> |
|
|
|
<a-descriptions :column="3" bordered size="small"> |
|
|
|
<a-descriptions-item label="受理编号">{{ detail.slbh || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="所属地市">{{ detail.cityName || detail.cityCode || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="数据大类"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.SYSTEM_CLASSIFICATION" :data-value="detail.sjlyqd" /> |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="业务小类"> |
|
|
|
<a-descriptions-item label="业务分类"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.BUSINESS_CLASSIFICATION" :data-value="detail.sjlyNo" /> |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="诉求分类"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.CZZX_SQFL" :data-value="detail.sqfl" /> |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="诉求等级">{{ detail.sqdj || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="涉及单位">{{ detail.sjdwMc || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="涉及民警">{{ detail.sjmjMc || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="涉及警种"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.SYSTEM_JZ" :data-value="detail.sjjzNo" /> |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="涉及单位">{{ detail.sjdwMc || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="涉及民警">{{ detail.sjmjMc || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="关键字">{{ detail.gjz || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="是否已延期">{{ detail.sfyyq || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="当前状态"> |
|
|
|
<a-tag :color="detail.gdzt === '2' ? 'green' : detail.gdzt === '1' ? 'orange' : 'blue'"> |
|
|
|
{{ detail.gdzt === '2' ? '已办结' : detail.gdzt === '1' ? '办结中' : '已录入' }} |
|
|
|
</a-tag> |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="关联警情编号">{{ detail.gljqBh || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="关联案件编号">{{ detail.glajBh || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="登记时间">{{ detail.sqsj || detail.createTime || '暂无' }}</a-descriptions-item> |
|
|
|
</a-descriptions> |
|
|
|
</a-card> |
|
|
|
|
|
|
|
<!-- 2. 诉求人信息卡片 --> |
|
|
|
<a-card title="诉求人(调查人)信息" size="small" class="detail-card"> |
|
|
|
<a-descriptions :column="2" bordered size="small"> |
|
|
|
<a-card size="small" class="detail-card" :bordered="false" style="background: transparent; padding: 0"> |
|
|
|
<FormTitle title="诉求人信息" /> |
|
|
|
<a-descriptions :column="3" bordered size="small"> |
|
|
|
<a-descriptions-item label="姓名">{{ detail.sqrXm || '匿名' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="联系电话">{{ detail.lxdh || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="身份证号">{{ detail.sqrZjhm || '暂无' }}</a-descriptions-item> |
|
|
|
@ -57,81 +49,119 @@ |
|
|
|
{{ detail.sqrXb === '1' ? '男' : detail.sqrXb === '2' ? '女' : '未知' }} |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="户籍地详址" :span="2">{{ detail.sqrHjdxz || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="现住地详址" :span="2">{{ detail.sqrXzdxz || '暂无' }}</a-descriptions-item> |
|
|
|
<a-descriptions-item label="现住地详址" :span="3">{{ detail.sqrXzdxz || '暂无' }}</a-descriptions-item> |
|
|
|
</a-descriptions> |
|
|
|
</a-card> |
|
|
|
|
|
|
|
<!-- 3. 诉求描述及拟办意见 --> |
|
|
|
<a-card title="诉求与处理描述" size="small" class="detail-card"> |
|
|
|
<!-- 3. 问题描述与附件 --> |
|
|
|
<a-card size="small" class="detail-card" :bordered="false" style="background: transparent; padding: 0"> |
|
|
|
<FormTitle title="问题描述" /> |
|
|
|
<div class="desc-box"> |
|
|
|
<div class="desc-title">调查/诉求描述：</div> |
|
|
|
<div class="desc-content">{{ detail.sqnr || '暂无详细内容' }}</div> |
|
|
|
</div> |
|
|
|
<div class="desc-box" style="margin-top: 12px"> |
|
|
|
<div class="desc-title">最终拟办意见与处理结果：</div> |
|
|
|
<div class="desc-content">{{ detail.cljg || '暂无拟办意见' }}</div> |
|
|
|
<div class="desc-title">详细问题描述 (诉求内容)：</div> |
|
|
|
<div class="desc-content">{{ detail.wtms || detail.sqnr || '暂无详细内容' }}</div> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
|
|
|
|
<!-- 4. 首访录音电话记录 --> |
|
|
|
<a-card title="首访电话记录(录音试听)" size="small" class="detail-card"> |
|
|
|
<a-table |
|
|
|
:dataSource="detail.czzxWtczYyList || []" |
|
|
|
:columns="yyColumns" |
|
|
|
size="small" |
|
|
|
bordered |
|
|
|
:pagination="false" |
|
|
|
rowKey="id" |
|
|
|
> |
|
|
|
<template #bodyCell="{ text, record, column }"> |
|
|
|
<template v-if="column.dataIndex === 'thfx'"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.CALL_DIRECTION" :data-value="text" /> |
|
|
|
</template> |
|
|
|
<template v-if="column.dataIndex === 'action'"> |
|
|
|
<div v-if="record.lydz" class="audio-player"> |
|
|
|
<!-- 音频试听播放器 --> |
|
|
|
<audio :src="record.lydz" controls preload="none" style="height: 32px; width: 220px"></audio> |
|
|
|
<a-button type="link" size="small" :href="record.lydz" target="_blank" style="margin-left: 8px">下载</a-button> |
|
|
|
<!-- 4. 首访与二次回访折叠面板 --> |
|
|
|
<div style="margin-top: 24px"> |
|
|
|
<a-collapse v-model:activeKey="activeKeys" expand-icon-position="right" class="custom-collapse"> |
|
|
|
<!-- 面板 1：首访电话记录 --> |
|
|
|
<a-collapse-panel key="1"> |
|
|
|
<template #header> |
|
|
|
<div class="panel-header-custom"> |
|
|
|
<span class="panel-title">首访电话记录 (录音调查)</span> |
|
|
|
<span class="panel-badge-wrap"> |
|
|
|
<a-tag :color="detail.czzxWtczYyList && detail.czzxWtczYyList.length > 0 ? 'success' : 'default'"> |
|
|
|
{{ detail.czzxWtczYyList && detail.czzxWtczYyList.length > 0 ? `${detail.czzxWtczYyList.length} 条录音` : '暂无通话' }} |
|
|
|
</a-tag> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<span v-else style="color: #999">暂无录音文件</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</a-card> |
|
|
|
<div class="panel-content-wrapper"> |
|
|
|
<div v-if="detail.czzxWtczYyList && detail.czzxWtczYyList.length > 0" class="sub-list"> |
|
|
|
<div v-for="yy in detail.czzxWtczYyList" :key="yy.id" class="yy-item-card"> |
|
|
|
<div class="yy-info"> |
|
|
|
<span><span class="label">通话号码：</span>{{ yy.thhm }}</span> |
|
|
|
<span class="split">|</span> |
|
|
|
<span> |
|
|
|
<span class="label">呼叫方向：</span> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.CALL_DIRECTION" :data-value="yy.thfx" /> |
|
|
|
</span> |
|
|
|
<span class="split">|</span> |
|
|
|
<span><span class="label">通话时长：</span>{{ yy.thsc }} 秒</span> |
|
|
|
</div> |
|
|
|
<div class="yy-player"> |
|
|
|
<template v-if="yy.lydz"> |
|
|
|
<audio :src="yy.lydz" controls preload="none" class="mini-audio"></audio> |
|
|
|
<a-button type="link" size="small" :href="yy.lydz" target="_blank" style="margin-left: 8px"> |
|
|
|
<template #icon><DownloadOutlined /></template>下载录音 |
|
|
|
</a-button> |
|
|
|
</template> |
|
|
|
<span v-else class="no-audio"><InfoCircleOutlined /> 暂无录音文件</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="empty-detail-tip"> |
|
|
|
<InfoCircleOutlined /> 话务首访调查中，暂无录音同步。 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-collapse-panel> |
|
|
|
|
|
|
|
<!-- 5. 二次回访整改历史 --> |
|
|
|
<a-card title="二次回访与整改核实历史" size="small" class="detail-card"> |
|
|
|
<a-table |
|
|
|
:dataSource="detail.czzxWtczHfhcList || []" |
|
|
|
:columns="hfhcColumns" |
|
|
|
size="small" |
|
|
|
bordered |
|
|
|
:pagination="false" |
|
|
|
rowKey="id" |
|
|
|
> |
|
|
|
<template #bodyCell="{ text, record, column }"> |
|
|
|
<template v-if="column.dataIndex === 'qzmyqkNo'"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.CALLBACK_SATISFACTION" :data-value="text" /> |
|
|
|
</template> |
|
|
|
<template v-if="column.dataIndex === 'sfyz'"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.IS_FACT" :data-value="text" /> |
|
|
|
</template> |
|
|
|
<template v-if="column.dataIndex === 'fjUuid'"> |
|
|
|
<a-button v-if="record.fjUuid" type="primary" size="small" ghost :href="record.fjUuid" target="_blank"> |
|
|
|
查看附件 |
|
|
|
</a-button> |
|
|
|
<span v-else style="color: #999">无附件</span> |
|
|
|
<!-- 面板 2：二次回访与整改核实 --> |
|
|
|
<a-collapse-panel key="2" style="margin-top: 12px"> |
|
|
|
<template #header> |
|
|
|
<div class="panel-header-custom"> |
|
|
|
<span class="panel-title">二次回访与整改核实历史</span> |
|
|
|
<span class="panel-badge-wrap"> |
|
|
|
<a-tag :color="detail.czzxWtczHfhcList && detail.czzxWtczHfhcList.length > 0 ? 'processing' : 'default'"> |
|
|
|
{{ detail.czzxWtczHfhcList && detail.czzxWtczHfhcList.length > 0 ? `${detail.czzxWtczHfhcList.length} 条记录` : '暂无回访' }} |
|
|
|
</a-tag> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<div style="text-align: right"> |
|
|
|
<a-button @click="onClose">关闭</a-button> |
|
|
|
<div class="panel-content-wrapper"> |
|
|
|
<div v-if="detail.czzxWtczHfhcList && detail.czzxWtczHfhcList.length > 0" class="sub-list"> |
|
|
|
<div v-for="hf in detail.czzxWtczHfhcList" :key="hf.id" class="hf-item-card"> |
|
|
|
<div class="hf-header"> |
|
|
|
<span class="hf-user">回访人：{{ hf.tjrXm || '系统' }}</span> |
|
|
|
<span class="split">|</span> |
|
|
|
<span> |
|
|
|
满意度： |
|
|
|
<a-tag color="blue"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.CALLBACK_SATISFACTION" :data-value="hf.qzmyqkNo" /> |
|
|
|
</a-tag> |
|
|
|
</span> |
|
|
|
<span class="split">|</span> |
|
|
|
<span> |
|
|
|
核实属实： |
|
|
|
<a-tag :color="hf.sfyz === '1' ? 'success' : 'warning'"> |
|
|
|
<DictLabel :dict-code="DICT_CODE_ENUM.IS_FACT" :data-value="hf.sfyz" /> |
|
|
|
</a-tag> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="hf-body"> |
|
|
|
<div class="hf-comment"><span class="label">整改核实说明：</span>{{ hf.hfqksm || '暂无说明' }}</div> |
|
|
|
<div v-if="hf.fjUuid" class="hf-attachment"> |
|
|
|
<a-button type="link" size="small" :href="hf.fjUuid" target="_blank"> |
|
|
|
查看整改附件材料 |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="empty-detail-tip"> |
|
|
|
<InfoCircleOutlined /> 等待业务部门反馈整改报告及开展二次回访核实。 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-collapse-panel> |
|
|
|
</a-collapse> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 底部关闭按钮 --> |
|
|
|
<div style="text-align: right; margin-top: 24px"> |
|
|
|
<a-button type="primary" @click="onClose" style="width: 80px">关闭</a-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</a-modal> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -141,10 +171,16 @@ import { message } from 'ant-design-vue'; |
|
|
|
import { wtczApi } from '/@/api/business/jwpy/wtcz-api'; |
|
|
|
import { DICT_CODE_ENUM } from '/@/constants/support/dict-const.js'; |
|
|
|
import DictLabel from '/@/components/support/dict-label/index.vue'; |
|
|
|
import FormTitle from './form-title.vue'; |
|
|
|
import { |
|
|
|
DownloadOutlined, |
|
|
|
InfoCircleOutlined |
|
|
|
} from '@ant-design/icons-vue'; |
|
|
|
|
|
|
|
const visibleFlag = ref(false); |
|
|
|
const loading = ref(false); |
|
|
|
const detail = ref({}); |
|
|
|
const activeKeys = ref([]); |
|
|
|
|
|
|
|
function show(id) { |
|
|
|
visibleFlag.value = true; |
|
|
|
@ -153,6 +189,7 @@ function show(id) { |
|
|
|
|
|
|
|
function onClose() { |
|
|
|
detail.value = {}; |
|
|
|
activeKeys.value = []; |
|
|
|
visibleFlag.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
@ -162,6 +199,16 @@ async function loadDetail(id) { |
|
|
|
try { |
|
|
|
const res = await wtczApi.getDetail(id); |
|
|
|
detail.value = res.data || {}; |
|
|
|
|
|
|
|
// 动态展开有数据的面板 |
|
|
|
const keys = []; |
|
|
|
if (detail.value.czzxWtczYyList && detail.value.czzxWtczYyList.length > 0) { |
|
|
|
keys.push('1'); |
|
|
|
} |
|
|
|
if (detail.value.czzxWtczHfhcList && detail.value.czzxWtczHfhcList.length > 0) { |
|
|
|
keys.push('2'); |
|
|
|
} |
|
|
|
activeKeys.value = keys; |
|
|
|
} catch (err) { |
|
|
|
message.error('加载详情数据失败，请重试'); |
|
|
|
} finally { |
|
|
|
@ -169,22 +216,6 @@ async function loadDetail(id) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// ------------------- 表格字段 ------------------- |
|
|
|
const yyColumns = [ |
|
|
|
{ title: '通话号码', dataIndex: 'thhm', width: 120 }, |
|
|
|
{ title: '呼叫方向', dataIndex: 'thfx', width: 100 }, |
|
|
|
{ title: '时长(秒)', dataIndex: 'thsc', width: 80 }, |
|
|
|
{ title: '录音回放/试听', dataIndex: 'action' }, |
|
|
|
]; |
|
|
|
|
|
|
|
const hfhcColumns = [ |
|
|
|
{ title: '回访人', dataIndex: 'tjrXm', width: 100 }, |
|
|
|
{ title: '回访满意度', dataIndex: 'qzmyqkNo', width: 110 }, |
|
|
|
{ title: '核实说明', dataIndex: 'hfqksm' }, |
|
|
|
{ title: '是否验证/属实', dataIndex: 'sfyz', width: 120 }, |
|
|
|
{ title: '相关整改附件', dataIndex: 'fjUuid', width: 110 }, |
|
|
|
]; |
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
show, |
|
|
|
}); |
|
|
|
@ -221,8 +252,141 @@ defineExpose({ |
|
|
|
line-height: 1.6; |
|
|
|
} |
|
|
|
|
|
|
|
.audio-player { |
|
|
|
/* 折叠面板定制样式 */ |
|
|
|
.custom-collapse { |
|
|
|
background-color: transparent !important; |
|
|
|
border: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-collapse-item) { |
|
|
|
border: 1px solid #f0f0f0 !important; |
|
|
|
background-color: #fff !important; |
|
|
|
border-radius: 6px !important; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-collapse-header) { |
|
|
|
padding: 12px 16px !important; |
|
|
|
font-weight: 600; |
|
|
|
background-color: #fafafa !important; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-collapse-content) { |
|
|
|
border-top: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-collapse-content-box) { |
|
|
|
padding: 16px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-header-custom { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 92%; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-title { |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-badge-wrap { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-content-wrapper { |
|
|
|
color: #555; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-detail-tip { |
|
|
|
color: #bfbfbf; |
|
|
|
font-style: italic; |
|
|
|
font-size: 12px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.sub-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.yy-item-card, .hf-item-card { |
|
|
|
background: #fdfdfd; |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 12px; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01); |
|
|
|
} |
|
|
|
|
|
|
|
.yy-info { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 8px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.yy-info .label, .hf-comment .label { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.split { |
|
|
|
color: #e8e8e8; |
|
|
|
} |
|
|
|
|
|
|
|
.yy-player { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.mini-audio { |
|
|
|
height: 28px; |
|
|
|
width: 240px; |
|
|
|
} |
|
|
|
|
|
|
|
.no-audio { |
|
|
|
color: #bfbfbf; |
|
|
|
font-size: 12px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.hf-header { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 8px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.hf-user { |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.hf-body { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.hf-comment { |
|
|
|
color: #555; |
|
|
|
line-height: 1.6; |
|
|
|
} |
|
|
|
|
|
|
|
.hf-attachment { |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
wang
1 month ago