From 874d063d42e61295e80072a3d0bf05508d75b538 Mon Sep 17 00:00:00 2001
From: wang <wzh@>
Date: Tue, 9 Jun 2026 17:41:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/jwpy/jwpy/flow/form-title.vue   |  44 +++
 .../src/views/jwpy/jwpy/flow/wtcz-detail.vue  | 368 +++++++++++++-----
 .../src/views/jwpy/jwpy/flow/wtcz-form.vue    | 173 ++++----
 3 files changed, 390 insertions(+), 195 deletions(-)
 create mode 100644 smart-flow-web/src/views/jwpy/jwpy/flow/form-title.vue

diff --git a/smart-flow-web/src/views/jwpy/jwpy/flow/form-title.vue b/smart-flow-web/src/views/jwpy/jwpy/flow/form-title.vue
new file mode 100644
index 0000000..624d892
--- /dev/null
+++ b/smart-flow-web/src/views/jwpy/jwpy/flow/form-title.vue
@@ -0,0 +1,44 @@
+<!--
+  * 通用表单模块标题组件
+  *
+  * @Author:    Antigravity
+  * @Date:      2026-06-09
+-->
+<template>
+  <div class="form-title">
+    {{ title }}
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.form-title {
+  position: relative;
+  padding-left: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1b1b1b;
+  margin: 16px 0 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+  padding-bottom: 8px;
+  text-align: left;
+}
+.form-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  width: 4px;
+  height: 16px;
+  background: #1890ff;
+  border-radius: 2px;
+}
+</style>
diff --git a/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-detail.vue b/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-detail.vue
index 840eafb..07bee38 100644
--- a/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-detail.vue
+++ b/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-detail.vue
@@ -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>
+
+
diff --git a/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-form.vue b/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-form.vue
index 9d42ead..40c3d39 100644
--- a/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-form.vue
+++ b/smart-flow-web/src/views/jwpy/jwpy/flow/wtcz-form.vue
@@ -6,88 +6,78 @@
 -->
 <template>
   <a-modal
-    :title="form.id ? '编辑工单' : '新建工单'"
-    :width="720"
     :open="visibleFlag"
-    @cancel="onClose"
+    :title="form.id ? '编辑工单' : '登记工单'"
+    :width="850"
+    ok-text="确认"
+    cancel-text="取消"
     :maskClosable="false"
     :destroyOnClose="true"
+    @ok="onSubmit"
+    @cancel="onClose"
   >
     <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
+      <FormTitle title="基本信息" />
+      <!-- 基础信息三列 -->
       <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="受理编号" name="slbh">
             <a-input v-model:value="form.slbh" placeholder="请输入受理编号" :disabled="!!form.id" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-item label="数据来源大类" name="sjlyqd">
-            <DictSelect :dict-code="DICT_CODE_ENUM.SYSTEM_CLASSIFICATION" placeholder="请选择来源大类" v-model:value="form.sjlyqd" width="100%" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="业务来源小类" name="sjlyNo">
-            <DictSelect :dict-code="DICT_CODE_ENUM.BUSINESS_CLASSIFICATION" placeholder="请选择来源小类" v-model:value="form.sjlyNo" width="100%" />
+        <a-col :span="8">
+          <a-form-item label="业务分类" name="sjlyNo">
+            <DictSelect :dict-code="DICT_CODE_ENUM.BUSINESS_CLASSIFICATION" placeholder="请选择业务分类" v-model:value="form.sjlyNo" width="100%" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-item label="诉求分类" name="sqfl">
-            <DictSelect :dict-code="DICT_CODE_ENUM.CZZX_SQFL" placeholder="请选择诉求分类" v-model:value="form.sqfl" width="100%" />
+        <a-col :span="8">
+          <a-form-item label="涉及警种" name="sjjzNo">
+            <DictSelect :dict-code="DICT_CODE_ENUM.SYSTEM_JZ" placeholder="请选择涉及警种" v-model:value="form.sjjzNo" width="100%" />
           </a-form-item>
         </a-col>
       </a-row>
 
       <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="涉及单位" name="sjdwMc">
             <a-input v-model:value="form.sjdwMc" placeholder="请输入涉及单位名称" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="涉及民警" name="sjmjMc">
             <a-input v-model:value="form.sjmjMc" placeholder="请输入涉及民警姓名" />
           </a-form-item>
         </a-col>
-      </a-row>
-
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="涉及警种" name="sjjzNo">
-            <DictSelect :dict-code="DICT_CODE_ENUM.SYSTEM_JZ" placeholder="请选择涉及警种" v-model:value="form.sjjzNo" width="100%" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="关键字" name="gjz">
             <a-input v-model:value="form.gjz" placeholder="请输入关键字" />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-divider style="margin: 12px 0">诉求人信息</a-divider>
+      <FormTitle title="诉求人信息" />
 
+      <!-- 诉求人三列 -->
       <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="诉求人姓名" name="sqrXm">
             <a-input v-model:value="form.sqrXm" placeholder="请输入诉求人姓名" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="诉求人电话" name="lxdh">
             <a-input v-model:value="form.lxdh" placeholder="请输入诉求人电话" />
           </a-form-item>
         </a-col>
-      </a-row>
-
-      <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="身份证号码" name="sqrZjhm">
             <a-input v-model:value="form.sqrZjhm" placeholder="请输入身份证号码" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :span="8">
           <a-form-item label="性别" name="sqrXb">
             <a-select v-model:value="form.sqrXb" placeholder="请选择性别">
               <a-select-option value="1">男</a-select-option>
@@ -95,55 +85,49 @@
             </a-select>
           </a-form-item>
         </a-col>
-      </a-row>
-
-      <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="户籍地详址" name="sqrHjdxz">
             <a-input v-model:value="form.sqrHjdxz" placeholder="请输入户籍地详址" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="8">
           <a-form-item label="现住地详址" name="sqrXzdxz">
             <a-input v-model:value="form.sqrXzdxz" placeholder="请输入现住地详址" />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-divider style="margin: 12px 0">处理详述</a-divider>
-
-      <a-form-item label="调查内容" name="sqnr">
-        <a-textarea v-model:value="form.sqnr" placeholder="请输入诉求及调查详细内容" :rows="4" />
-      </a-form-item>
-
-      <a-form-item label="拟办意见/处理结果" name="cljg">
-        <a-textarea v-model:value="form.cljg" placeholder="请输入处理意见或办理结果" :rows="3" />
-      </a-form-item>
+      <FormTitle title="关联业务与问题详述" />
 
       <a-row :gutter="16">
         <a-col :span="12">
-          <a-form-item label="工单状态" name="gdzt">
-            <a-select v-model:value="form.gdzt" placeholder="请选择状态">
-              <a-select-option value="0">已录入</a-select-option>
-              <a-select-option value="1">办结中</a-select-option>
-              <a-select-option value="2">已办结</a-select-option>
-            </a-select>
+          <a-form-item label="关联警情编号" name="gljqBh">
+            <a-input v-model:value="form.gljqBh" placeholder="请输入关联警情编号" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item label="群众满意度" name="qzmyqk">
-            <DictSelect :dict-code="DICT_CODE_ENUM.CALLBACK_SATISFACTION" placeholder="请选择满意度" v-model:value="form.qzmyqk" width="100%" />
+          <a-form-item label="关联案件编号" name="glajBh">
+            <a-input v-model:value="form.glajBh" placeholder="请输入关联案件编号" />
           </a-form-item>
         </a-col>
       </a-row>
-    </a-form>
 
-    <template #footer>
-      <a-space style="float: right">
-        <a-button @click="onClose">取消</a-button>
-        <a-button type="primary" @click="onSubmit">保存</a-button>
-      </a-space>
-    </template>
+      <a-form-item label="问题描述 (诉求内容)" name="wtms">
+        <a-textarea v-model:value="form.wtms" placeholder="请输入详细的登记问题描述" :rows="4" />
+      </a-form-item>
+
+      <FormTitle title="附件材料" />
+      <a-form-item name="uuid">
+        <Upload
+          accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg"
+          :maxUploadSize="3"
+          listType="text"
+          buttonText="点击上传附件"
+          :default-file-list="form.uuid"
+          @change="(fileList) => form.uuid = fileList"
+        />
+      </a-form-item>
+    </a-form>
   </a-modal>
 </template>
 
@@ -156,6 +140,8 @@ import { wtczApi } from '/@/api/business/jwpy/wtcz-api';
 import { smartSentry } from '/@/lib/smart-sentry';
 import { DICT_CODE_ENUM } from '/@/constants/support/dict-const.js';
 import DictSelect from '/@/components/support/dict-select/index.vue';
+import Upload from '/@/components/support/file-upload/index.vue';
+import FormTitle from './form-title.vue';
 
 const emits = defineEmits(['reloadList']);
 
@@ -246,38 +232,39 @@ let form = reactive({ ...formDefault });
 
 const rules = {
   slbh: [{ required: true, message: '工单受理编号 必填' }],
-  sjlyqd: [{ required: true, message: '请选择数据来源大类' }],
+  sjlyNo: [{ required: true, message: '请选择业务分类' }],
 };
 
-// 提交数据
-async function onSubmit() {
-  try {
-    await formRef.value.validateFields();
-    save();
-  } catch (err) {
-    message.error('参数验证错误，请仔细填写必要表单数据!');
-  }
-}
-
-async function save() {
-  SmartLoading.show();
-  try {
-    if (form.id) {
-      await wtczApi.update(form);
-    } else {
-      await wtczApi.add(form);
-    }
-    message.success('操作成功');
-    emits('reloadList');
-    onClose();
-  } catch (err) {
-    smartSentry.captureError(err);
-  } finally {
-    SmartLoading.hide();
-  }
+// 提交并校验数据
+function onSubmit() {
+  formRef.value
+    .validate()
+    .then(async () => {
+      SmartLoading.show();
+      try {
+        if (form.id) {
+          await wtczApi.update(form);
+        } else {
+          await wtczApi.add(form);
+        }
+        message.success(`${form.id ? '修改' : '登记'}成功`);
+        emits('reloadList');
+        onClose();
+      } catch (err) {
+        smartSentry.captureError(err);
+      } finally {
+        SmartLoading.hide();
+      }
+    })
+    .catch((err) => {
+      console.log('error', err);
+      message.error('参数验证错误，请仔细填写必要表单数据!');
+    });
 }
 
 defineExpose({
   show,
 });
 </script>
+
+