From fc537a1aa6bc1ca8e63d89e2454607a7602815df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Wed, 24 Jun 2026 14:59:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=94=AE=E5=90=8E=E5=B7=A5=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2):=20=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI=E4=B8=8E=E5=8A=9F=E8=83=BD=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  api层优化：新增驳回接口，优化提交接口过滤无用参数
2.  页面重构：统一页面布局为左右分栏拖拽面板，替换原有弹窗模式
3.  样式升级：采用类Word文档风格重构所有页面样式，新增中英双语标题
4.  功能新增：添加流程总览组件，新增PDF导出功能，新增驳回操作
5.  交互优化：调整卡片布局与间距，优化空状态提示，统一标签样式
---
 klp-ui/src/api/flow/complaintAccept.js        |  14 +-
 klp-ui/src/api/flow/complaintTask.js          |   8 +-
 .../objection/components/BasicInfoSection.vue |  23 +-
 .../objection/components/CoilInfoSection.vue  |  30 +-
 .../components/ContractInfoSection.vue        |  30 +-
 .../components/DepartmentOpinionSection.vue   | 155 +++---
 .../components/ExecutionFeedbackSection.vue   | 155 +++---
 .../components/FlowOverviewSection.vue        | 147 ++++++
 .../components/HandlingSchemeSection.vue      |  40 +-
 .../components/HeaderControlSection.vue       |  87 +++-
 klp-ui/src/views/wms/post/objection/index.vue | 264 +++++++---
 .../src/views/wms/post/objection/opinion.vue  | 479 ++++++++++++-----
 klp-ui/src/views/wms/post/objection/todo.vue  | 487 +++++++++++++-----
 13 files changed, 1397 insertions(+), 522 deletions(-)
 create mode 100644 klp-ui/src/views/wms/post/objection/components/FlowOverviewSection.vue

diff --git a/klp-ui/src/api/flow/complaintAccept.js b/klp-ui/src/api/flow/complaintAccept.js
index 97ea1ad51..73caf9ec9 100644
--- a/klp-ui/src/api/flow/complaintAccept.js
+++ b/klp-ui/src/api/flow/complaintAccept.js
@@ -46,9 +46,13 @@ export function opinionDispatch(acceptId) {
 }
 
 export function feedbackDispatch(acceptId, deptIds) {
-  return request({
-    url: '/flow/complaintAccept/feedbackDispatch',
-    method: 'post',
-    params: { acceptId, deptIds }
-  })
+  return request({ url: '/flow/complaintAccept/feedbackDispatch', method: 'post', params: { acceptId, deptIds } })
+}
+
+export function opinionReject(taskId, reason) {
+  return request({ url: '/flow/complaintAccept/opinionReject/' + taskId, method: 'post', params: { reason } })
+}
+
+export function feedbackReject(relId, reason) {
+  return request({ url: '/flow/complaintAccept/feedbackReject/' + relId, method: 'post', params: { reason } })
 }
diff --git a/klp-ui/src/api/flow/complaintTask.js b/klp-ui/src/api/flow/complaintTask.js
index 8d583f1fe..150a644e9 100644
--- a/klp-ui/src/api/flow/complaintTask.js
+++ b/klp-ui/src/api/flow/complaintTask.js
@@ -16,18 +16,22 @@ export function getComplaintTask(taskId) {
 }
 
 export function addComplaintTask(data) {
+  // 剔除掉rejectMark字段
+  const { rejectMark, ...payload } = { ...data };
   return request({
     url: '/flow/complaintTask',
     method: 'post',
-    data: data
+    data: payload
   })
 }
 
 export function updateComplaintTask(data) {
+  // 剔除掉rejectMark字段
+  const { rejectMark, ...payload } = { ...data };
   return request({
     url: '/flow/complaintTask',
     method: 'put',
-    data: data
+    data: payload
   })
 }
 
diff --git a/klp-ui/src/views/wms/post/objection/components/BasicInfoSection.vue b/klp-ui/src/views/wms/post/objection/components/BasicInfoSection.vue
index fc522d754..9de803ce5 100644
--- a/klp-ui/src/views/wms/post/objection/components/BasicInfoSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/BasicInfoSection.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="enabled" class="section-container">
     <div class="detail-section">
-      <div class="detail-section-label">投诉情况</div>
+      <div class="detail-section-label">Complaint Content · 投诉情况</div>
       <div class="detail-section-text">{{ data.complaintContent || '-' }}</div>
     </div>
 
     <div class="detail-section">
-      <div class="detail-section-label">客户诉求</div>
+      <div class="detail-section-label">Customer Demand · 客户诉求</div>
       <div class="detail-section-text">{{ data.customerDemand || '-' }}</div>
     </div>
 
     <div class="detail-section" v-if="data.file">
-      <div class="detail-section-label">凭证文件</div>
+      <div class="detail-section-label">Voucher File · 凭证文件</div>
       <FileList :ossIds="data.file" />
     </div>
   </div>
@@ -38,20 +38,25 @@ export default {
 
 <style scoped>
 .detail-section {
-  margin-bottom: 14px;
+  margin-bottom: 20px;
 }
+
 .detail-section-label {
-  font-size: 12px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
   font-weight: 600;
-  color: #909399;
+  color: #8c8c8c;
   margin-bottom: 4px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
+
 .detail-section-text {
   font-size: 14px;
-  color: #303133;
-  line-height: 1.6;
+  color: #1a1a1a;
+  line-height: 1.8;
   word-break: break-all;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eeeae4;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/CoilInfoSection.vue b/klp-ui/src/views/wms/post/objection/components/CoilInfoSection.vue
index 3bbfac5b6..36f8168d1 100644
--- a/klp-ui/src/views/wms/post/objection/components/CoilInfoSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/CoilInfoSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="enabled" class="section-container">
     <div class="section-title">
-      <span>关联钢卷</span>
+      <span>关联钢卷 <span class="en-sub">· Related Coils</span></span>
       <el-button size="mini" type="text" icon="el-icon-refresh" @click="$emit('refresh')" title="刷新关联钢卷"></el-button>
       <slot name="selector"></slot>
     </div>
@@ -57,25 +57,39 @@ export default {
 
 <style scoped>
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
   font-size: 15px;
-  font-weight: 600;
-  color: #1d2129;
-  margin: 20px 0 12px 0;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
   padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
+  border-bottom: 1px solid #d4d0c8;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 .section-title:first-child {
   margin-top: 0;
 }
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/ContractInfoSection.vue b/klp-ui/src/views/wms/post/objection/components/ContractInfoSection.vue
index 96531d12c..f8e969990 100644
--- a/klp-ui/src/views/wms/post/objection/components/ContractInfoSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/ContractInfoSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="enabled" class="section-container">
-    <div class="section-title">合同信息</div>
+    <div class="section-title">合同信息 <span class="en-sub">· Contract Information</span></div>
     <el-table :data="contractList" border size="small" v-if="contractList.length > 0" style="width: 100%">
       <el-table-column label="合同编号" align="center" prop="contractCode" width="160" show-overflow-tooltip />
       <el-table-column label="合同名称" align="center" prop="contractName" width="140" show-overflow-tooltip />
@@ -51,25 +51,39 @@ export default {
 
 <style scoped>
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
   font-size: 15px;
-  font-weight: 600;
-  color: #1d2129;
-  margin: 20px 0 12px 0;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
   padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
+  border-bottom: 1px solid #d4d0c8;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 .section-title:first-child {
   margin-top: 0;
 }
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/DepartmentOpinionSection.vue b/klp-ui/src/views/wms/post/objection/components/DepartmentOpinionSection.vue
index a169ef7cb..908858948 100644
--- a/klp-ui/src/views/wms/post/objection/components/DepartmentOpinionSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/DepartmentOpinionSection.vue
@@ -1,28 +1,31 @@
 <template>
   <div v-if="enabled" class="section-container">
     <div class="section-title">
-      <span>部门处理意见</span>
+      <span>部门处理意见 <span class="en-sub">· Department Opinions</span></span>
       <el-button size="mini" type="text" icon="el-icon-refresh" @click="$emit('refresh')" title="刷新部门处理意见"></el-button>
     </div>
     <div v-if="taskList.length > 0" class="card-grid">
-      <div v-for="item in taskList" :key="item.taskId" class="invoice-card">
-        <div class="invoice-row">
-          <span class="invoice-dept">{{ getDeptName(item.deptId) }}</span>
-          <el-tag v-if="item.taskStatus === 0" type="warning" size="mini">待填写</el-tag>
+      <div v-for="item in taskList" :key="item.taskId" class="opinion-card">
+        <div class="opinion-card-header">
+          <div class="opinion-dept">
+            <span class="opinion-dept-icon">◆</span>
+            <span>{{ getDeptName(item.deptId) }}</span>
+          </div>
+          <el-tag v-if="item.rejectMark === 1" type="danger" size="mini">已驳回</el-tag>
+          <el-tag v-else-if="item.rejectMark === 2" type="info" size="mini">已隐藏</el-tag>
+          <el-tag v-else-if="item.taskStatus === 0" type="warning" size="mini">待填写</el-tag>
           <el-tag v-else-if="item.taskStatus === 1" type="success" size="mini">已完成</el-tag>
         </div>
-        <hr class="invoice-divider" />
-        <div class="invoice-body">
-          <div v-if="item.deptOpinion" class="invoice-content" v-html="item.deptOpinion"></div>
-          <div v-else class="invoice-empty">暂无意见</div>
-          <div v-if="item.fillFile" class="invoice-file">
+        <div class="opinion-card-body">
+          <div v-if="item.deptOpinion" class="opinion-content" v-html="item.deptOpinion"></div>
+          <div v-else class="opinion-empty">— No opinion yet · 暂无意见 —</div>
+          <div v-if="item.fillFile" class="opinion-file">
             <FileList :ossIds="item.fillFile" />
           </div>
         </div>
-        <hr class="invoice-divider" />
-        <div class="invoice-meta">
-          <span v-if="item.fillNo" class="invoice-meta-item"><i class="el-icon-document"></i> {{ item.fillNo }}</span>
-          <span v-if="item.fillTime" class="invoice-meta-item"><i class="el-icon-time"></i> {{ parseTime(item.fillTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        <div class="opinion-card-footer">
+          <span v-if="item.fillNo" class="opinion-footer-item">{{ item.fillNo }}</span>
+          <span v-if="item.fillTime" class="opinion-footer-item">{{ parseTime(item.fillTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </div>
       </div>
     </div>
@@ -75,93 +78,125 @@ export default {
 
 <style scoped>
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
   font-size: 15px;
-  font-weight: 600;
-  color: #1d2129;
-  margin: 20px 0 12px 0;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
   padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
+  border-bottom: 1px solid #d4d0c8;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 .section-title:first-child {
   margin-top: 0;
 }
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
+/* ===== 意见卡片（正式文档风格） ===== */
 .card-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 14px;
 }
-.invoice-card {
-  flex: 0 0 calc((100% - 20px) / 3);
-  background: #fff;
-  border: 1px solid #e8eaec;
-  border-left: 3px solid #409eff;
+
+.opinion-card {
+  flex: 0 0 calc((100% - 14px) / 2);
+  background: #ffffff;
+  border: 1px solid #e8e4de;
   border-radius: 2px;
-  padding: 10px 12px 8px;
+  padding: 14px 16px 12px;
   display: flex;
   flex-direction: column;
 }
-.invoice-row {
+
+.opinion-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 6px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #e0dcd6;
 }
-.invoice-dept {
-  font-size: 13px;
-  font-weight: 600;
-  color: #303133;
+
+.opinion-dept {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a3c6e;
+  letter-spacing: 0.3px;
 }
-.invoice-divider {
-  border: none;
-  border-top: 1px dashed #dcdfe6;
-  margin: 6px 0;
+
+.opinion-dept-icon {
+  font-size: 10px;
+  color: #1a3c6e;
 }
-.invoice-body {
+
+.opinion-card-body {
   flex: 1;
 }
-.invoice-content {
-  font-size: 12px;
-  color: #606266;
-  line-height: 1.6;
+
+.opinion-content {
+  font-size: 13px;
+  color: #3a3a3a;
+  line-height: 1.7;
   word-break: break-all;
-  max-height: 80px;
+  max-height: 100px;
   overflow-y: auto;
 }
-.invoice-content /deep/ p {
+
+.opinion-content /deep/ p {
   margin: 0;
 }
-.invoice-empty {
-  color: #c0c4cc;
+
+.opinion-empty {
+  color: #bab5ae;
   font-size: 12px;
+  font-style: italic;
+  font-family: 'Georgia', 'Times New Roman', serif;
 }
-.invoice-file {
-  margin-top: 6px;
+
+.opinion-file {
+  margin-top: 8px;
 }
-.invoice-meta {
+
+.opinion-card-footer {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 6px;
+  gap: 14px;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dashed #e0dcd6;
 }
-.invoice-meta-item {
-  font-size: 11px;
-  color: #909399;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-.invoice-meta-item i {
+
+.opinion-footer-item {
+  font-family: 'Georgia', 'Times New Roman', serif;
   font-size: 11px;
+  color: #8c8c8c;
 }
+
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/ExecutionFeedbackSection.vue b/klp-ui/src/views/wms/post/objection/components/ExecutionFeedbackSection.vue
index e7b205005..0ad4c1fc0 100644
--- a/klp-ui/src/views/wms/post/objection/components/ExecutionFeedbackSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/ExecutionFeedbackSection.vue
@@ -1,28 +1,31 @@
 <template>
   <div v-if="enabled" class="section-container">
     <div class="section-title">
-      <span>执行反馈</span>
+      <span>执行反馈 <span class="en-sub">· Execution Feedback</span></span>
       <el-button size="mini" type="text" icon="el-icon-refresh" @click="$emit('refresh')" title="刷新执行反馈"></el-button>
     </div>
     <div v-if="executeList.length > 0" class="card-grid">
-      <div v-for="item in executeList" :key="item.relId" class="invoice-card">
-        <div class="invoice-row">
-          <span class="invoice-dept">{{ getDeptName(item.deptId) }}</span>
-          <el-tag v-if="item.executeStatus === 0" type="warning" size="mini">待执行</el-tag>
+      <div v-for="item in executeList" :key="item.relId" class="opinion-card">
+        <div class="opinion-card-header">
+          <div class="opinion-dept">
+            <span class="opinion-dept-icon">◆</span>
+            <span>{{ getDeptName(item.deptId) }}</span>
+          </div>
+          <el-tag v-if="item.rejectMark === 1" type="danger" size="mini">已驳回</el-tag>
+          <el-tag v-else-if="item.rejectMark === 2" type="info" size="mini">已隐藏</el-tag>
+          <el-tag v-else-if="item.executeStatus === 0" type="warning" size="mini">待执行</el-tag>
           <el-tag v-else-if="item.executeStatus === 1" type="success" size="mini">已反馈</el-tag>
         </div>
-        <hr class="invoice-divider" />
-        <div class="invoice-body">
-          <div v-if="item.executeResult" class="invoice-content" v-html="item.executeResult"></div>
-          <div v-else class="invoice-empty">暂无反馈</div>
-          <div v-if="item.feedbackFile" class="invoice-file">
+        <div class="opinion-card-body">
+          <div v-if="item.executeResult" class="opinion-content" v-html="item.executeResult"></div>
+          <div v-else class="opinion-empty">— No feedback yet · 暂无反馈 —</div>
+          <div v-if="item.feedbackFile" class="opinion-file">
             <FileList :ossIds="item.feedbackFile" />
           </div>
         </div>
-        <hr class="invoice-divider" />
-        <div class="invoice-meta">
-          <span v-if="item.feedbackNo" class="invoice-meta-item"><i class="el-icon-document"></i> {{ item.feedbackNo }}</span>
-          <span v-if="item.feedbackTime" class="invoice-meta-item"><i class="el-icon-time"></i> {{ parseTime(item.feedbackTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        <div class="opinion-card-footer">
+          <span v-if="item.feedbackNo" class="opinion-footer-item">{{ item.feedbackNo }}</span>
+          <span v-if="item.feedbackTime" class="opinion-footer-item">{{ parseTime(item.feedbackTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </div>
       </div>
     </div>
@@ -75,93 +78,125 @@ export default {
 
 <style scoped>
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
   font-size: 15px;
-  font-weight: 600;
-  color: #1d2129;
-  margin: 20px 0 12px 0;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
   padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
+  border-bottom: 1px solid #d4d0c8;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 .section-title:first-child {
   margin-top: 0;
 }
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
+/* ===== 反馈卡片（正式文档风格） ===== */
 .card-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 14px;
 }
-.invoice-card {
-  flex: 0 0 calc((100% - 20px) / 3);
-  background: #fff;
-  border: 1px solid #e8eaec;
-  border-left: 3px solid #409eff;
+
+.opinion-card {
+  flex: 0 0 calc((100% - 14px) / 2);
+  background: #ffffff;
+  border: 1px solid #e8e4de;
   border-radius: 2px;
-  padding: 10px 12px 8px;
+  padding: 14px 16px 12px;
   display: flex;
   flex-direction: column;
 }
-.invoice-row {
+
+.opinion-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 6px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #e0dcd6;
 }
-.invoice-dept {
-  font-size: 13px;
-  font-weight: 600;
-  color: #303133;
+
+.opinion-dept {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a3c6e;
+  letter-spacing: 0.3px;
 }
-.invoice-divider {
-  border: none;
-  border-top: 1px dashed #dcdfe6;
-  margin: 6px 0;
+
+.opinion-dept-icon {
+  font-size: 10px;
+  color: #1a3c6e;
 }
-.invoice-body {
+
+.opinion-card-body {
   flex: 1;
 }
-.invoice-content {
-  font-size: 12px;
-  color: #606266;
-  line-height: 1.6;
+
+.opinion-content {
+  font-size: 13px;
+  color: #3a3a3a;
+  line-height: 1.7;
   word-break: break-all;
-  max-height: 80px;
+  max-height: 100px;
   overflow-y: auto;
 }
-.invoice-content /deep/ p {
+
+.opinion-content /deep/ p {
   margin: 0;
 }
-.invoice-empty {
-  color: #c0c4cc;
+
+.opinion-empty {
+  color: #bab5ae;
   font-size: 12px;
+  font-style: italic;
+  font-family: 'Georgia', 'Times New Roman', serif;
 }
-.invoice-file {
-  margin-top: 6px;
+
+.opinion-file {
+  margin-top: 8px;
 }
-.invoice-meta {
+
+.opinion-card-footer {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 6px;
+  gap: 14px;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dashed #e0dcd6;
 }
-.invoice-meta-item {
-  font-size: 11px;
-  color: #909399;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-.invoice-meta-item i {
+
+.opinion-footer-item {
+  font-family: 'Georgia', 'Times New Roman', serif;
   font-size: 11px;
+  color: #8c8c8c;
 }
+
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/FlowOverviewSection.vue b/klp-ui/src/views/wms/post/objection/components/FlowOverviewSection.vue
new file mode 100644
index 000000000..ae2223740
--- /dev/null
+++ b/klp-ui/src/views/wms/post/objection/components/FlowOverviewSection.vue
@@ -0,0 +1,147 @@
+<template>
+  <div v-if="enabled" class="section-container">
+    <div class="section-title">
+      <i class="el-icon-s-order"></i>
+      <span>流程总览 <span class="en-sub">· Process Overview</span></span>
+    </div>
+    <el-steps :active="activeStep" align-center class="flow-steps">
+      <el-step title="待审核" icon="el-icon-document" />
+      <el-step title="意见填写" icon="el-icon-edit-outline" />
+      <el-step title="汇总方案" icon="el-icon-s-data" />
+      <el-step title="执行反馈" icon="el-icon-s-promotion" />
+      <el-step title="执行完成" icon="el-icon-success" />
+      <el-step title="全部办结" icon="el-icon-circle-check" />
+    </el-steps>
+    <div class="current-status">
+      <span class="status-label">当前阶段：</span>
+      <el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FlowOverviewSection',
+  props: {
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    flowStatus: {
+      type: [Number, String],
+      default: undefined
+    }
+  },
+  computed: {
+    /**
+     * el-steps 的 active 属性是从 0 开始索引的。
+     * 当 status=1 时 active=0（待审核高亮），
+     * status=2 时 active=1（已完成待审核+意见填写中高亮），依此类推。
+     * status=5（执行完成）和 status=6（全部办结）共享第5步作为已完成状态。
+     */
+    activeStep() {
+      if (this.flowStatus == null) return -1;
+      const v = Number(this.flowStatus);
+      if (v >= 6) return 5; // 全部办结 -> 第5步已完成
+      return v - 1;
+    },
+    flowStatusText() {
+      const map = {
+        1: '待审核',
+        2: '意见填写中',
+        3: '待汇总方案',
+        4: '执行反馈中',
+        5: '执行完成',
+        6: '全部办结'
+      };
+      return map[this.flowStatus] || '未知';
+    },
+    tagType() {
+      const map = {
+        1: 'info',
+        2: 'warning',
+        3: '',
+        4: 'warning',
+        5: 'success',
+        6: 'success'
+      };
+      return map[this.flowStatus] || '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.section-container {
+  margin-bottom: 6px;
+}
+
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
+.flow-steps {
+  padding: 8px 0 4px;
+}
+
+.flow-steps >>> .el-step.is-wait .el-step__icon-inner,
+.flow-steps >>> .el-step.is-wait .el-step__title {
+  color: #c0c4cc;
+}
+
+.flow-steps >>> .el-step.is-process .el-step__icon-inner,
+.flow-steps >>> .el-step.is-process .el-step__title {
+  color: #409eff;
+}
+
+.flow-steps >>> .el-step.is-finish .el-step__icon-inner,
+.flow-steps >>> .el-step.is-finish .el-step__title {
+  color: #67c23a;
+}
+
+.flow-steps >>> .el-step__description {
+  display: none;
+}
+
+.current-status {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 6px;
+  padding-top: 8px;
+  border-top: 1px dashed #e0dcd6;
+}
+
+.status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
+}
+</style>
diff --git a/klp-ui/src/views/wms/post/objection/components/HandlingSchemeSection.vue b/klp-ui/src/views/wms/post/objection/components/HandlingSchemeSection.vue
index 2b0beed67..aeb4e6785 100644
--- a/klp-ui/src/views/wms/post/objection/components/HandlingSchemeSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/HandlingSchemeSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="enabled" class="section-container">
     <div class="section-title">
-      <span>处理方案</span>
+      <span>处理方案 <span class="en-sub">· Handling Scheme</span></span>
       <el-button v-if="editable && !editing" size="mini" type="text" icon="el-icon-edit" @click="startEdit">编辑</el-button>
       <template v-if="editing">
         <el-button size="mini" type="text" icon="el-icon-check" @click="handleSave">保存</el-button>
@@ -71,32 +71,48 @@ export default {
 
 <style scoped>
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
   font-size: 15px;
-  font-weight: 600;
-  color: #1d2129;
-  margin: 20px 0 12px 0;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 32px 0 16px 0;
   padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
+  border-bottom: 1px solid #d4d0c8;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 .section-title:first-child {
   margin-top: 0;
 }
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 .plan-content {
-  padding: 8px;
-  background: #f5f7fa;
-  border-radius: 4px;
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.8;
+  color: #1a1a1a;
 }
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/components/HeaderControlSection.vue b/klp-ui/src/views/wms/post/objection/components/HeaderControlSection.vue
index 4032fbfe8..411771d92 100644
--- a/klp-ui/src/views/wms/post/objection/components/HeaderControlSection.vue
+++ b/klp-ui/src/views/wms/post/objection/components/HeaderControlSection.vue
@@ -1,15 +1,23 @@
 <template>
   <div v-if="enabled" class="section-container">
-    <div class="detail-header">
-      <div class="detail-header-left">
-        <div class="detail-complaint-no">{{ complaintNo }}</div>
-        <el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
+    <!-- 文档标题区 -->
+    <div class="doc-header">
+      <div class="doc-header-top">
+        <div class="doc-title-group">
+          <div class="doc-title">{{ complaintNo }}</div>
+          <div class="doc-subtitle">After-sales Acceptance Record</div>
+        </div>
+        <div class="doc-header-right">
+          <slot name="actions"></slot>
+        </div>
       </div>
-      <div class="detail-header-right">
-        <slot name="actions"></slot>
+      <div class="doc-status-row">
+        <span class="doc-status-label">Status / 状态：</span>
+        <el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
       </div>
     </div>
 
+    <!-- 元信息行（原始 flex-wrap 样式） -->
     <div class="detail-meta">
       <span v-if="meta.createBy" title="创建人"><i class="el-icon-user"></i> 创建人：{{ meta.createBy }}</span>
       <span v-if="meta.createTime" title="创建时间"><i class="el-icon-time"></i> 创建时间：{{ parseTime(meta.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@@ -99,26 +107,67 @@ export default {
 </script>
 
 <style scoped>
-.detail-header {
+.section-container {
+  margin-bottom: 4px;
+}
+
+/* ===== 文档标题 ===== */
+.doc-header {
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #1a3c6e;
+}
+
+.doc-header-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 12px;
+  gap: 16px;
 }
-.detail-header-left {
+
+.doc-title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.doc-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+  letter-spacing: 0.5px;
+}
+
+.doc-subtitle {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #8c8c8c;
+  font-style: italic;
+  letter-spacing: 0.8px;
+  margin-top: 2px;
+}
+
+.doc-header-right {
+  flex-shrink: 0;
+}
+
+.doc-status-row {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-top: 10px;
 }
-.detail-complaint-no {
-  font-size: 20px;
-  font-weight: 700;
-  color: #303133;
-  line-height: 1.2;
-}
-.detail-header-right {
-  flex-shrink: 0;
+
+.doc-status-label {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 11px;
+  color: #8c8c8c;
+  letter-spacing: 0.3px;
 }
+
+/* ===== 元信息行（原始样式） ===== */
 .detail-meta {
   display: flex;
   flex-wrap: wrap;
@@ -127,13 +176,15 @@ export default {
   color: #909399;
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #e0dcd6;
 }
+
 .detail-meta span {
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
+
 .detail-meta i {
   font-size: 13px;
 }
diff --git a/klp-ui/src/views/wms/post/objection/index.vue b/klp-ui/src/views/wms/post/objection/index.vue
index b73e93a9b..8c7984bba 100644
--- a/klp-ui/src/views/wms/post/objection/index.vue
+++ b/klp-ui/src/views/wms/post/objection/index.vue
@@ -72,6 +72,8 @@
             <HeaderControlSection :complaintNo="currentRow.complaintNo" :flowStatus="currentRow.flowStatus"
               :meta="currentRow">
               <template #actions>
+                <!-- <el-button :loading="pdfLoading" size="mini" type="text" icon="el-icon-printer" @click="handlePrint"
+                  :disabled="pdfLoading" title="导出PDF">导出PDF</el-button> -->
                 <el-button v-if="currentRow.flowStatus === 1" size="mini" type="primary" plain
                   icon="el-icon-s-promotion" @click="handleOpinionDispatch">意见下发</el-button>
                 <el-button v-if="currentRow.flowStatus === 3" size="mini" type="warning" plain
@@ -90,6 +92,8 @@
 
             <el-divider />
 
+            <FlowOverviewSection :flowStatus="currentRow.flowStatus" />
+
             <CoilInfoSection :coilList="coilList" :loading="coilLoading" :editable="currentRow.flowStatus === 1"
               @refresh="loadCoilList(currentRow.acceptId)"
               @remove="handleRemoveCoil">
@@ -174,6 +178,8 @@ import { listComplaintAccept, getComplaintAccept, addComplaintAccept, updateComp
 import { listComplaintTask } from "@/api/flow/complaintTask";
 import { listAcceptCoilRel, addAcceptCoilRel, delAcceptCoilRel } from "@/api/flow/acceptCoilRel";
 import { listPlanExecuteRel } from "@/api/flow/planExecuteRel";
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
 import CoilSelector from "@/components/CoilSelector/index.vue";
 import CurrentCoilNo from "@/components/KLPService/Renderer/CurrentCoilNo.vue";
 import DragResizePanel from "@/components/DragResizePanel/index.vue";
@@ -184,18 +190,20 @@ import CoilInfoSection from "./components/CoilInfoSection.vue";
 import DepartmentOpinionSection from "./components/DepartmentOpinionSection.vue";
 import HandlingSchemeSection from "./components/HandlingSchemeSection.vue";
 import ExecutionFeedbackSection from "./components/ExecutionFeedbackSection.vue";
+import FlowOverviewSection from "./components/FlowOverviewSection.vue";
 
 export default {
   name: "AftermarketObjection",
   components: {
     CoilSelector, CurrentCoilNo, DragResizePanel,
     HeaderControlSection, BasicInfoSection, ContractInfoSection,
-    CoilInfoSection, DepartmentOpinionSection, HandlingSchemeSection, ExecutionFeedbackSection
+    CoilInfoSection, DepartmentOpinionSection, HandlingSchemeSection, ExecutionFeedbackSection, FlowOverviewSection
   },
   dicts: ['coil_quality_status'],
   data() {
     return {
       buttonLoading: false,
+      pdfLoading: false,
       loading: true,
       detailLoading: false,
       coilLoading: false,
@@ -395,6 +403,65 @@ export default {
         this.loadDetail(this.currentRow.acceptId);
       }
     },
+    async handlePrint() {
+      const element = this.$el.querySelector('.detail-content');
+      if (!element) return;
+
+      this.pdfLoading = true;
+
+      try {
+        // 临时隐藏操作按钮
+        element.classList.add('pdf-exporting');
+
+        const canvas = await html2canvas(element, {
+          scale: 2,
+          useCORS: true,
+          logging: false,
+          backgroundColor: '#ffffff'
+        });
+
+        // 恢复按钮
+        element.classList.remove('pdf-exporting');
+
+        const imgData = canvas.toDataURL('image/png');
+        const pdf = new jsPDF('p', 'mm', 'a4');
+        const pdfWidth = pdf.internal.pageSize.getWidth();
+        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
+        const pageHeight = pdf.internal.pageSize.getHeight();
+
+        // 多页处理
+        if (pdfHeight <= pageHeight) {
+          pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
+        } else {
+          let posY = 0;
+          const ratio = pdfWidth / canvas.width;
+          const pageCanvasHeight = pageHeight / ratio;
+
+          while (posY < canvas.height) {
+            if (posY > 0) pdf.addPage();
+
+            const pieceCanvas = document.createElement('canvas');
+            pieceCanvas.width = canvas.width;
+            pieceCanvas.height = Math.min(pageCanvasHeight, canvas.height - posY);
+            const ctx = pieceCanvas.getContext('2d');
+            ctx.drawImage(canvas, 0, posY, canvas.width, pieceCanvas.height, 0, 0, canvas.width, pieceCanvas.height);
+
+            const pieceData = pieceCanvas.toDataURL('image/png');
+            pdf.addImage(pieceData, 'PNG', 0, 0, pdfWidth, pieceCanvas.height * ratio);
+            posY += pageCanvasHeight;
+          }
+        }
+
+        pdf.save(`${this.currentRow?.complaintNo || '售后单'}_处理记录.pdf`);
+        this.$modal.msgSuccess('PDF 导出成功');
+      } catch (err) {
+        console.error('PDF 导出失败:', err);
+        this.$modal.msgError('PDF 导出失败');
+        element.classList.remove('pdf-exporting');
+      } finally {
+        this.pdfLoading = false;
+      }
+    },
     handleSavePlan(planContent) {
       updateComplaintAccept({ acceptId: this.currentRow.acceptId, planContent }).then(() => {
         this.$modal.msgSuccess("处理方案保存成功");
@@ -581,11 +648,20 @@ export default {
   background: #f5f7fa;
 }
 
+/* ========== 右侧面板 — Word 文档风格 ========== */
 .right-panel {
   height: 100%;
   overflow-y: auto;
-  padding: 16px;
-  background: #fff;
+  padding: 12px 16px;
+  background: #faf8f5;   /* 暖白纸张底色 */
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
 }
 
 .empty-tip {
@@ -598,107 +674,155 @@ export default {
   gap: 8px;
 }
 
-.detail-content {
-  height: 100%;
-}
-
-.detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.detail-header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.detail-complaint-no {
-  font-size: 20px;
-  font-weight: 700;
-  color: #303133;
-  line-height: 1.2;
-}
-
-.detail-header-right {
-  flex-shrink: 0;
-}
-
-.detail-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.detail-meta span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.detail-meta i {
-  font-size: 13px;
-}
-
 .detail-section {
-  margin-bottom: 14px;
+  margin-bottom: 20px;
 }
 
 .detail-section-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  color: #909399;
+  color: #8c8c8c;
   margin-bottom: 4px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
 }
 
 .detail-section-text {
   font-size: 14px;
-  color: #303133;
-  line-height: 1.6;
+  color: #1a1a1a;
+  line-height: 1.8;
   word-break: break-all;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eeeae4;
 }
 
+/* 文档级通用 section 标题 */
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  margin: 16px 0 8px 0;
-  padding-left: 8px;
-  border-left: 3px solid #409eff;
-  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
   display: flex;
   align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 
 .section-title:first-child {
   margin-top: 0;
 }
 
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 
 .plan-content {
-  padding: 8px;
-  background: #f5f7fa;
-  border-radius: 4px;
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.8;
+  color: #1a1a1a;
 }
 
 .section-gap {
+  height: 16px;
+}
+
+/* 正式表格覆写 */
+.right-panel .el-table {
+  border: 1px solid #e8e4de !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.right-panel .el-table thead th {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0.5px !important;
+  border-bottom: none !important;
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+
+.right-panel .el-table thead th .cell {
+  color: #ffffff !important;
+}
+
+.right-panel .el-table__body tr:hover > td {
+  background-color: #f7f5f0 !important;
+}
+
+.right-panel .el-table--border td {
+  border-right: 1px solid #f0ece6 !important;
+}
+
+.right-panel .el-table--border th {
+  border-right: 1px solid #3a5166 !important;
+}
+
+.right-panel .el-table td {
+  padding: 6px 4px !important;
+  color: #3a3a3a !important;
+}
+
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
+
+/* el-tag 文档风格微调 */
+.right-panel .el-tag {
+  border-radius: 2px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.3px;
+}
+
+.right-panel .el-tag--mini {
+  padding: 0 6px;
+  line-height: 20px;
   height: 20px;
 }
+
+.right-panel .el-tag--small {
+  padding: 0 8px;
+}
+
+/* ===== PDF 导出时隐藏操作按钮 ===== */
+.detail-content.pdf-exporting .doc-header-right .el-button {
+  display: none !important;
+}
+
+.detail-content.pdf-exporting .el-button--text {
+  display: none !important;
+}
+
+.detail-content.pdf-exporting .el-table__fixed,
+.detail-content.pdf-exporting .el-table__fixed-right {
+  display: none !important;
+}
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/opinion.vue b/klp-ui/src/views/wms/post/objection/opinion.vue
index a536edbf6..f1b5afdb4 100644
--- a/klp-ui/src/views/wms/post/objection/opinion.vue
+++ b/klp-ui/src/views/wms/post/objection/opinion.vue
@@ -1,124 +1,137 @@
 <template>
-  <div class="app-container">
-    <div class="filter-bar">
-      <el-form :model="queryParams" ref="queryForm" size="small" class="filter-form">
-        <el-form-item label="售后编号">
-          <el-input v-model="queryParams.complaintNo" placeholder="请输入售后编号" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="任务状态">
-          <el-select v-model="queryParams.taskStatus" placeholder="请选择" clearable>
-            <el-option label="待填写" :value="0" />
-            <el-option label="已完成" :value="1" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+  <div class="app-container objection-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-edit-outline"></i>
+              <span>待处理意见</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;"
+                title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.taskStatus" placeholder="任务状态" clearable size="mini" @change="handleQuery"
+              class="header-filter">
+              <el-option label="待填写" :value="0" />
+              <el-option label="已完成" :value="1" />
+            </el-select>
+          </div>
 
-    <el-table v-loading="loading" :data="taskList" border>
-      <el-table-column label="售后编号" align="center" width="150">
-        <template slot-scope="scope">
-          {{ (scope.row.acceptInfo || {}).complaintNo || '' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="投诉日期" align="center" width="110">
-        <template slot-scope="scope">
-          <span>{{ parseTime((scope.row.acceptInfo || {}).complaintDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="任务状态" align="center" prop="taskStatus" width="100">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.taskStatus === 0" type="warning">待填写</el-tag>
-          <el-tag v-else-if="scope.row.taskStatus === 1" type="success">已完成</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="处理意见" align="center" min-width="200" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <div v-html="scope.row.deptOpinion"></div>
-        </template>
-      </el-table-column>
-      <el-table-column label="填写时间" align="center" prop="fillTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.fillTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="canEdit(scope.row)" size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row, true)">填写</el-button>
-          <el-button v-else size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row, false)">查看</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <div class="search-row">
+            <el-input v-model="queryParams.complaintNo" placeholder="搜索售后编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in taskList" :key="item.taskId" class="list-item"
+              :class="{ active: currentTask && currentTask.taskId === item.taskId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ (item.acceptInfo || {}).complaintNo || '' }}</span>
+                <span class="item-sub">{{ parseTime((item.acceptInfo || {}).complaintDate, '{y}-{m}-{d}') }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.rejectMark === 1" type="danger" size="mini">已驳回</el-tag>
+                <el-tag v-else-if="item.rejectMark === 2" type="info" size="mini">已隐藏</el-tag>
+                <el-tag v-else-if="item.taskStatus === 0" type="warning" size="mini">待填写</el-tag>
+                <el-tag v-else-if="item.taskStatus === 1" type="success" size="mini">已完成</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button v-if="canEdit(item)" size="mini" type="text" icon="el-icon-edit" @click.stop="handleRowClick(item)"></el-button>
+                <el-button v-else size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="taskList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无待处理意见</span>
+            </div>
+          </div>
 
-    <el-dialog :title="(isEditable ? '填写' : '查看') + '处理意见 - ' + getDeptLabel()" :visible.sync="opinionOpen" width="900px" append-to-body :close-on-click-modal="false">
-      <div v-loading="detailLoading" class="opinion-dialog">
-        <HeaderControlSection
-          :complaintNo="acceptDetail.complaintNo"
-          :flowStatus="acceptDetail.flowStatus"
-          :meta="acceptDetail"
-        >
-          <template #actions>
-            <el-button size="mini" type="text" icon="el-icon-refresh" @click="refreshDetail" title="刷新">刷新</el-button>
-          </template>
-
-          <template #basic-info>
-            <BasicInfoSection :data="acceptDetail" />
-          </template>
-
-          <template #contract-info>
-            <ContractInfoSection :coilList="dialogCoilList" />
-          </template>
-        </HeaderControlSection>
-
-        <el-divider />
-
-        <CoilInfoSection :coilList="dialogCoilList" :loading="coilLoading" :editable="false" />
-
-        <el-divider />
-
-        <div v-if="isEditable" class="opinion-form">
-          <div class="section-title">填写处理意见</div>
-          <el-form ref="opinionForm" :model="opinionForm" label-width="100px">
-            <el-form-item label="处理意见" prop="deptOpinion">
-              <editor v-model="opinionForm.deptOpinion" :min-height="200" />
-            </el-form-item>
-            <el-form-item label="意见文件">
-              <file-upload v-model="opinionForm.fillFile" />
-            </el-form-item>
-          </el-form>
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
         </div>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="opinionOpen = false">{{ isEditable ? '取 消' : '关 闭' }}</el-button>
-        <el-button v-if="isEditable" :loading="submitLoading" type="primary" @click="submitOpinion">提 交</el-button>
-      </div>
-    </el-dialog>
+      </template>
+
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentTask.taskId" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条任务查看详情</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <HeaderControlSection
+              :complaintNo="acceptDetail.complaintNo"
+              :flowStatus="acceptDetail.flowStatus"
+              :meta="acceptDetail"
+            >
+              <template #actions>
+                <el-button size="mini" type="text" icon="el-icon-refresh" @click="refreshDetail" title="刷新">刷新</el-button>
+              </template>
+
+              <template #basic-info>
+                <BasicInfoSection :data="acceptDetail" />
+              </template>
+
+              <template #contract-info>
+                <ContractInfoSection :coilList="dialogCoilList" />
+              </template>
+            </HeaderControlSection>
+
+            <el-divider />
+
+            <FlowOverviewSection :flowStatus="acceptDetail.flowStatus" />
+
+            <CoilInfoSection :coilList="dialogCoilList" :loading="coilLoading" :editable="false" />
+
+            <div v-if="isEditable" class="section-gap" />
+            <div v-if="isEditable" class="opinion-form-wrapper">
+              <div class="opinion-form-section">
+                <div class="section-title">
+                  <span>填写处理意见 <span class="en-sub">· Fill in Opinion</span></span>
+                </div>
+                <el-form ref="opinionForm" :model="opinionForm" label-width="100px">
+                  <el-form-item label="处理意见" prop="deptOpinion">
+                    <editor v-model="opinionForm.deptOpinion" :min-height="200" />
+                  </el-form-item>
+                  <el-form-item label="意见文件">
+                    <file-upload v-model="opinionForm.fillFile" />
+                  </el-form-item>
+                </el-form>
+                <div class="form-actions">
+                  <el-button :loading="rejectLoading" type="danger" @click="handleReject">驳 回</el-button>
+                  <el-button :loading="submitLoading" type="primary" @click="submitOpinion">提 交</el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </DragResizePanel>
   </div>
 </template>
 
 <script>
 import { listComplaintTask, getComplaintTask, updateComplaintTask } from "@/api/flow/complaintTask";
-import { getComplaintAccept } from "@/api/flow/complaintAccept";
+import { getComplaintAccept, opinionReject } from "@/api/flow/complaintAccept";
 import { listAcceptCoilRel } from "@/api/flow/acceptCoilRel";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
 import HeaderControlSection from "./components/HeaderControlSection.vue";
 import BasicInfoSection from "./components/BasicInfoSection.vue";
 import CoilInfoSection from "./components/CoilInfoSection.vue";
 import ContractInfoSection from "./components/ContractInfoSection.vue";
+import FlowOverviewSection from "./components/FlowOverviewSection.vue";
 
 export default {
   name: "AftermarketOpinion",
-  components: { HeaderControlSection, BasicInfoSection, CoilInfoSection, ContractInfoSection },
+  components: { DragResizePanel, HeaderControlSection, BasicInfoSection, CoilInfoSection, ContractInfoSection, FlowOverviewSection },
   data() {
     return {
       loading: false,
       detailLoading: false,
       coilLoading: false,
       submitLoading: false,
+      rejectLoading: false,
       total: 0,
 
       queryParams: {
@@ -129,7 +142,6 @@ export default {
         taskStatus: undefined
       },
       taskList: [],
-      opinionOpen: false,
       opinionForm: { deptOpinion: '', fillFile: '' },
       acceptDetail: {},
       dialogCoilList: [],
@@ -144,13 +156,13 @@ export default {
   methods: {
     getList() {
       this.loading = true;
-      const params = { ...this.queryParams };
+      const params = { ...this.queryParams, rejectMark: 0 };
       if (params.taskStatus === '' || params.taskStatus === undefined) {
         delete params.taskStatus;
       }
       listComplaintTask(params).then(response => {
-        this.taskList = response.rows || [];
         this.total = response.total;
+        this.taskList = response.rows || [];
       }).finally(() => { this.loading = false; });
     },
     handleQuery() {
@@ -162,9 +174,9 @@ export default {
       this.queryParams.taskStatus = undefined;
       this.handleQuery();
     },
-    handleView(row, editable) {
+    handleRowClick(row) {
       this.currentTask = row;
-      this.isEditable = editable;
+      this.isEditable = this.canEdit(row);
       this.opinionForm = { deptOpinion: '', fillFile: '' };
       this.detailLoading = true;
       this.coilLoading = true;
@@ -182,8 +194,6 @@ export default {
           fillFile: task.fillFile || ''
         };
       });
-
-      this.opinionOpen = true;
     },
     refreshDetail() {
       if (!this.currentTask.acceptId) return;
@@ -204,6 +214,26 @@ export default {
       const status = (row.acceptInfo || {}).flowStatus;
       return (status === 2 || status === 3) && row.taskStatus === 0;
     },
+    confirmCancel() {
+      this.$modal.confirm('确认取消？已填写的内容将不会保存。').then(() => {
+        this.currentTask = {};
+      }).catch(() => {});
+    },
+    handleReject() {
+      this.$prompt('请输入驳回意见', '意见驳回', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea',
+        inputValidator: (val) => val ? true : '驳回意见不能为空'
+      }).then(({ value }) => {
+        this.rejectLoading = true;
+        return opinionReject(this.currentTask.taskId, value);
+      }).then(() => {
+        this.$modal.msgSuccess("驳回成功");
+        this.getList();
+        this.currentTask = {};
+      }).catch(() => { }).finally(() => { this.rejectLoading = false; });
+    },
     submitOpinion() {
       if (!this.opinionForm.deptOpinion) {
         this.$modal.msgWarning("请填写处理意见");
@@ -220,8 +250,8 @@ export default {
         fillTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
       }).then(() => {
         this.$modal.msgSuccess("意见提交成功");
-        this.opinionOpen = false;
         this.getList();
+        this.currentTask = {};
       }).finally(() => { this.submitLoading = false; });
     }
   }
@@ -229,43 +259,220 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar {
-  background: #fafafa;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  border-radius: 4px;
+.objection-container {
+  height: calc(100vh - 84px);
+}
+
+/* ========== 左侧面板（复用 index.vue 风格） ========== */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+}
+
+.panel-header {
   display: flex;
   align-items: center;
-  gap: 20px;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 12px 14px 8px;
+  background: #f5f7fa;
 }
-.filter-form {
+
+.header-title {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0;
-}
-.filter-form .el-form-item {
-  margin-bottom: 0;
-  margin-right: 10px;
-}
-.opinion-dialog {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-.opinion-dialog /deep/ .section-title {
-  margin-top: 16px;
-}
-.section-title {
-  font-size: 15px;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
   font-weight: 600;
-  color: #1d2129;
-  margin: 0 0 12px 0;
-  padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
-  white-space: nowrap;
+  color: #303133;
 }
-.opinion-form {
+
+.header-title i {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.header-filter {
+  width: 120px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 10px;
+  background: #f5f7fa;
+}
+
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: #ebeef5;
+}
+
+.list-item.active {
+  background: #d9ecff;
+}
+
+.list-item.active .item-title {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.item-meta {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #c0c4cc;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.list-empty i {
+  font-size: 32px;
+}
+
+.list-footer {
+  border-top: 1px solid #e4e7ed;
+  padding: 2px 8px 0;
+  background: #f5f7fa;
+}
+
+/* ========== 右侧面板（复用 index.vue 风格） ========== */
+.right-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: #faf8f5;
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+}
+
+/* section-title 与 index.vue 统一 */
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-gap {
+  height: 16px;
+}
+
+/* ========== 意见填写区 ========== */
+.opinion-form-wrapper {
   padding-top: 4px;
 }
+
+.opinion-form-section {
+  margin-bottom: 0;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 0 0;
+  border-top: 1px solid #e0dcd6;
+  margin-top: 12px;
+}
+
+/* el-divider 样式与 index.vue 统一 */
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
 </style>
diff --git a/klp-ui/src/views/wms/post/objection/todo.vue b/klp-ui/src/views/wms/post/objection/todo.vue
index befbd438b..92a8bfbd3 100644
--- a/klp-ui/src/views/wms/post/objection/todo.vue
+++ b/klp-ui/src/views/wms/post/objection/todo.vue
@@ -1,127 +1,141 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="售后编号" prop="complaintNo">
-        <el-input v-model="queryParams.complaintNo" placeholder="请输入售后编号" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="执行状态" prop="executeStatus">
-        <el-select v-model="queryParams.executeStatus" placeholder="请选择" clearable>
-          <el-option label="待执行反馈" :value="0" />
-          <el-option label="已反馈完成" :value="1" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+  <div class="app-container objection-container">
+    <DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
+      <template #panelA>
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="header-title">
+              <i class="el-icon-s-promotion"></i>
+              <span>待执行反馈</span>
+              <el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;"
+                title="刷新列表"></el-button>
+            </div>
+            <el-select v-model="queryParams.executeStatus" placeholder="执行状态" clearable size="mini" @change="handleQuery"
+              class="header-filter">
+              <el-option label="待执行反馈" :value="0" />
+              <el-option label="已反馈完成" :value="1" />
+            </el-select>
+          </div>
 
-    <el-row :gutter="10" class="mb8">
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+          <div class="search-row">
+            <el-input v-model="queryParams.complaintNo" placeholder="搜索售后编号..." clearable prefix-icon="el-icon-search"
+              size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" />
+          </div>
 
-    <el-table v-loading="loading" :data="dataList" border>
-      <el-table-column label="售后编号" align="center" width="150">
-        <template slot-scope="scope">
-          {{ (scope.row.acceptInfo || {}).complaintNo || '' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="投诉日期" align="center" width="110">
-        <template slot-scope="scope">
-          <span>{{ parseTime((scope.row.acceptInfo || {}).complaintDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="执行部门" align="center" prop="deptId" width="100">
-        <template slot-scope="scope">
-          {{ getDeptName(scope.row.deptId) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="执行状态" align="center" prop="executeStatus" width="100">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.executeStatus === 0" type="warning">待执行</el-tag>
-          <el-tag v-else-if="scope.row.executeStatus === 1" type="success">已反馈</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="执行结果" align="center" min-width="200" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <div v-html="scope.row.executeResult"></div>
-        </template>
-      </el-table-column>
-      <el-table-column label="反馈时间" align="center" prop="feedbackTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.feedbackTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.executeStatus === 0" size="mini" type="text" icon="el-icon-edit" @click="handleExecute(scope.row, true)">执行反馈</el-button>
-          <el-button v-else size="mini" type="text" icon="el-icon-view" @click="handleExecute(scope.row, false)">查看</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <div v-loading="loading" class="list-body">
+            <div v-for="item in dataList" :key="item.relId" class="list-item"
+              :class="{ active: currentRel && currentRel.relId === item.relId }" @click="handleRowClick(item)">
+              <div class="item-main">
+                <span class="item-title">{{ (item.acceptInfo || {}).complaintNo || '' }}</span>
+                <span class="item-sub">{{ getDeptName(item.deptId) }} · {{ parseTime((item.acceptInfo || {}).complaintDate, '{y}-{m}-{d}') }}</span>
+              </div>
+              <div class="item-meta">
+                <el-tag v-if="item.rejectMark === 1" type="danger" size="mini">已驳回</el-tag>
+                <el-tag v-else-if="item.rejectMark === 2" type="info" size="mini">已隐藏</el-tag>
+                <el-tag v-else-if="item.executeStatus === 0" type="warning" size="mini">待执行</el-tag>
+                <el-tag v-else-if="item.executeStatus === 1" type="success" size="mini">已反馈</el-tag>
+              </div>
+              <div class="item-actions">
+                <el-button v-if="item.executeStatus === 0" size="mini" type="text" icon="el-icon-edit" @click.stop="handleRowClick(item)"></el-button>
+                <el-button v-else size="mini" type="text" icon="el-icon-view" @click.stop="handleRowClick(item)"></el-button>
+              </div>
+            </div>
+            <div v-if="dataList.length === 0 && !loading" class="list-empty">
+              <i class="el-icon-folder-opened"></i>
+              <span>暂无待执行反馈</span>
+            </div>
+          </div>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="(isEditable ? '执行反馈 - ' : '查看反馈 - ') + getDeptLabel()" :visible.sync="execOpen" width="900px" append-to-body :close-on-click-modal="false">
-      <div v-loading="detailLoading" class="exec-dialog">
-        <HeaderControlSection
-          :complaintNo="acceptDetail.complaintNo"
-          :flowStatus="acceptDetail.flowStatus"
-          :meta="acceptDetail"
-        >
-          <template #basic-info>
-            <BasicInfoSection :data="acceptDetail" />
-          </template>
-        </HeaderControlSection>
-
-        <el-divider />
-
-        <CoilInfoSection :coilList="dialogCoilList" :loading="coilLoading" :editable="false" />
-
-        <ContractInfoSection :coilList="dialogCoilList" />
-
-        <div v-if="acceptDetail.planContent">
-          <div class="section-title">处理方案</div>
-          <div class="plan-content" v-html="acceptDetail.planContent"></div>
+          <div class="list-footer">
+            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+              @pagination="getList" />
+          </div>
         </div>
+      </template>
 
-        <div v-if="isEditable">
-          <div class="section-title">填写执行反馈</div>
-          <el-form ref="execForm" :model="execForm" label-width="100px">
-            <el-form-item label="执行结果" prop="executeResult">
-              <editor v-model="execForm.executeResult" :min-height="200" />
-            </el-form-item>
-            <el-form-item label="反馈文件">
-              <file-upload v-model="execForm.feedbackFile" />
-            </el-form-item>
-          </el-form>
+      <template #panelB>
+        <div class="right-panel">
+          <div v-if="!currentRel.relId" class="empty-tip">
+            <i class="el-icon-info"></i>
+            <span>请在左侧列表中选择一条任务查看详情</span>
+          </div>
+          <div v-else v-loading="detailLoading" class="detail-content">
+            <HeaderControlSection
+              :complaintNo="acceptDetail.complaintNo"
+              :flowStatus="acceptDetail.flowStatus"
+              :meta="acceptDetail"
+            >
+              <template #actions>
+                <el-button size="mini" type="text" icon="el-icon-refresh" @click="refreshDetail" title="刷新">刷新</el-button>
+              </template>
+
+              <template #basic-info>
+                <BasicInfoSection :data="acceptDetail" />
+              </template>
+            </HeaderControlSection>
+
+            <el-divider />
+
+            <FlowOverviewSection :flowStatus="acceptDetail.flowStatus" />
+
+            <CoilInfoSection :coilList="dialogCoilList" :loading="coilLoading" :editable="false" />
+
+            <ContractInfoSection :coilList="dialogCoilList" />
+
+            <div v-if="acceptDetail.planContent" class="section-gap" />
+            <div v-if="acceptDetail.planContent">
+              <div class="section-title">
+                <span>处理方案 <span class="en-sub">· Handling Scheme</span></span>
+              </div>
+              <div class="plan-content" v-html="acceptDetail.planContent"></div>
+            </div>
+
+            <div v-if="isEditable" class="section-gap" />
+            <div v-if="isEditable" class="exec-form-wrapper">
+              <div class="section-title">
+                <span>填写执行反馈 <span class="en-sub">· Execution Feedback</span></span>
+              </div>
+              <el-form ref="execForm" :model="execForm" label-width="100px">
+                <el-form-item label="执行结果" prop="executeResult">
+                  <editor v-model="execForm.executeResult" :min-height="200" />
+                </el-form-item>
+                <el-form-item label="反馈文件">
+                  <file-upload v-model="execForm.feedbackFile" />
+                </el-form-item>
+              </el-form>
+              <div class="form-actions">
+                <el-button :loading="rejectLoading" type="danger" @click="handleReject">驳 回</el-button>
+                <el-button :loading="submitLoading" type="primary" @click="submitExecute">提 交</el-button>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="closeDialog">{{ isEditable ? '取 消' : '关 闭' }}</el-button>
-        <el-button v-if="isEditable" :loading="submitLoading" type="primary" @click="submitExecute">提 交</el-button>
-      </div>
-    </el-dialog>
+      </template>
+    </DragResizePanel>
   </div>
 </template>
 
 <script>
 import { listPlanExecuteRel, getPlanExecuteRel, updatePlanExecuteRel } from "@/api/flow/planExecuteRel";
 import { listAcceptCoilRel } from "@/api/flow/acceptCoilRel";
+import { feedbackReject } from "@/api/flow/complaintAccept";
+import DragResizePanel from "@/components/DragResizePanel/index.vue";
 import HeaderControlSection from "./components/HeaderControlSection.vue";
 import BasicInfoSection from "./components/BasicInfoSection.vue";
 import CoilInfoSection from "./components/CoilInfoSection.vue";
 import ContractInfoSection from "./components/ContractInfoSection.vue";
+import FlowOverviewSection from "./components/FlowOverviewSection.vue";
 
 export default {
   name: "AftermarketTodo",
-  components: { HeaderControlSection, BasicInfoSection, CoilInfoSection, ContractInfoSection },
+  components: { DragResizePanel, HeaderControlSection, BasicInfoSection, CoilInfoSection, ContractInfoSection, FlowOverviewSection },
   data() {
     return {
       loading: false,
       detailLoading: false,
+      coilLoading: false,
       submitLoading: false,
-      showSearch: true,
+      rejectLoading: false,
       total: 0,
       queryParams: {
         pageNum: 1,
@@ -131,11 +145,9 @@ export default {
         executeStatus: undefined
       },
       dataList: [],
-      execOpen: false,
       isEditable: false,
       acceptDetail: {},
       dialogCoilList: [],
-      coilLoading: false,
       execForm: { executeResult: '', feedbackFile: '' },
       currentRel: {}
     };
@@ -147,7 +159,7 @@ export default {
   methods: {
     getList() {
       this.loading = true;
-      const params = { ...this.queryParams };
+      const params = { ...this.queryParams, rejectMark: 0 };
       if (params.executeStatus === '' || params.executeStatus === undefined) {
         delete params.executeStatus;
       }
@@ -164,8 +176,8 @@ export default {
             return no.indexOf(complaintNoFilter) !== -1;
           });
         }
-        this.dataList = rows;
         this.total = response.total;
+        this.dataList = rows;
       }).finally(() => { this.loading = false; });
     },
     getDeptName(deptId) {
@@ -184,9 +196,9 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    handleExecute(row, editable) {
+    handleRowClick(row) {
       this.currentRel = row;
-      this.isEditable = editable;
+      this.isEditable = row.executeStatus === 0;
       this.acceptDetail = row.acceptInfo || {};
       this.execForm = { executeResult: '', feedbackFile: '' };
       this.dialogCoilList = [];
@@ -197,7 +209,7 @@ export default {
         this.dialogCoilList = r.rows || [];
       }).finally(() => { this.coilLoading = false; });
 
-      if (!editable) {
+      if (!this.isEditable) {
         getPlanExecuteRel(row.relId).then(response => {
           const rel = response.data || {};
           this.execForm = {
@@ -208,11 +220,29 @@ export default {
       } else {
         this.detailLoading = false;
       }
-      this.execOpen = true;
     },
-    closeDialog() {
-      this.execOpen = false;
-      this.isEditable = false;
+    refreshDetail() {
+      if (!this.currentRel.acceptId) return;
+      this.detailLoading = true;
+      this.coilLoading = true;
+      listAcceptCoilRel({ acceptId: this.currentRel.acceptId, pageNum: 1, pageSize: 999 }).then(r => {
+        this.dialogCoilList = r.rows || [];
+      }).finally(() => { this.coilLoading = false; this.detailLoading = false; });
+    },
+    handleReject() {
+      this.$prompt('请输入驳回原因', '反馈驳回', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea',
+        inputValidator: (val) => val ? true : '驳回原因不能为空'
+      }).then(({ value }) => {
+        this.rejectLoading = true;
+        return feedbackReject(this.currentRel.relId, value);
+      }).then(() => {
+        this.$modal.msgSuccess("驳回成功");
+        this.getList();
+        this.currentRel = {};
+      }).catch(() => { }).finally(() => { this.rejectLoading = false; });
     },
     submitExecute() {
       if (!this.execForm.executeResult) {
@@ -230,9 +260,8 @@ export default {
         feedbackTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
       }).then(() => {
         this.$modal.msgSuccess("执行反馈提交成功");
-        this.execOpen = false;
-        this.isEditable = false;
         this.getList();
+        this.currentRel = {};
       }).finally(() => { this.submitLoading = false; });
     }
   }
@@ -240,36 +269,226 @@ export default {
 </script>
 
 <style scoped>
-.exec-dialog {
-  max-height: 65vh;
-  overflow-y: auto;
+.objection-container {
+  height: calc(100vh - 84px);
 }
-.exec-dialog /deep/ .section-title {
-  margin-top: 16px;
+
+/* ========== 左侧面板（复用 index.vue 风格） ========== */
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
 }
-.section-title {
-  font-size: 15px;
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 8px;
+  background: #f5f7fa;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
   font-weight: 600;
-  color: #1d2129;
-  margin: 16px 0 12px 0;
-  padding: 0 0 10px 0;
-  border-bottom: 2px solid transparent;
-  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
-  white-space: nowrap;
+  color: #303133;
 }
+
+.header-title i {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.header-filter {
+  width: 120px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 10px;
+  background: #f5f7fa;
+}
+
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: #ebeef5;
+}
+
+.list-item.active {
+  background: #d9ecff;
+}
+
+.list-item.active .item-title {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #909399;
+}
+
+.item-meta {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.list-item:hover .item-actions {
+  opacity: 1;
+}
+
+.list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #c0c4cc;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.list-empty i {
+  font-size: 32px;
+}
+
+.list-footer {
+  border-top: 1px solid #e4e7ed;
+  padding: 2px 8px 0;
+  background: #f5f7fa;
+}
+
+/* ========== 右侧面板（复用 index.vue 风格） ========== */
+.right-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: #faf8f5;
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+}
+
+/* section-title 与 index.vue 统一 */
+.section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+
 .section-title:first-child {
   margin-top: 0;
 }
-.plan-content {
-  padding: 12px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  font-size: 13px;
-  line-height: 1.6;
+
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
 }
-.empty-data {
-  color: #909399;
+
+.section-gap {
+  height: 16px;
+}
+
+/* ========== 执行反馈填写区 ========== */
+.exec-form-wrapper {
+  padding-top: 4px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 0 0;
+  border-top: 1px solid #e0dcd6;
+  margin-top: 12px;
+}
+
+.plan-content {
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
   font-size: 13px;
-  padding: 8px 0;
+  line-height: 1.8;
+  color: #1a1a1a;
+}
+
+/* el-divider 样式与 index.vue 统一 */
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
 }
 </style>