yxk-20260818

把把脉、所务会、党委会的查看详情页面样式优化

src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue

@@ -7,20 +7,96 @@
     :footer="null"
     :maskClosable="false"
     :bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
+    wrapClassName="takepulse-detail-modal"
     destroyOnClose
   >
     <a-tabs v-model:activeKey="activeKey">
       <a-tab-pane key="item" tab="事项信息">
-        <div class="detail-grid">
-          <div
-            v-for="field in detailFields"
-            :key="field.label"
-            class="detail-row"
-            :class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
-          >
-            <span class="detail-label">{{ field.label }}</span>
-            <span class="detail-value">{{ field.value }}</span>
-          </div>
+        <div class="matter-detail">
+          <section class="matter-summary">
+            <div class="summary-heading">
+              <span class="summary-heading-icon">
+                <Icon icon="ant-design:bulb-outlined" />
+              </span>
+              <div class="summary-heading-content">
+                <span class="summary-kicker">把把脉事项</span>
+                <h3 class="summary-title">{{ detailSummary.title }}</h3>
+              </div>
+            </div>
+
+            <div class="summary-meta">
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:calendar-outlined" />
+                <span class="summary-meta-label">年份</span>
+                <span class="summary-meta-value">{{ detailSummary.year }}</span>
+              </div>
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:appstore-outlined" />
+                <span class="summary-meta-label">会议类型</span>
+                <span class="summary-meta-value">{{ detailSummary.taskType }}</span>
+              </div>
+              <div class="summary-tag-group">
+                <a-tag class="summary-tag" :color="statusTagColor">完成状态：{{ detailSummary.bpmStatus }}</a-tag>
+                <a-tag class="summary-tag">密级：{{ detailSummary.secretLevel }}</a-tag>
+                <a-tag class="summary-tag" :color="urgencyTagColor">是否急件：{{ detailSummary.urgencyLevel }}</a-tag>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:profile-outlined" />
+              </span>
+              <h3>意见信息</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in opinionFields" :key="field.key" class="detail-item">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:message-outlined" />
+              </span>
+              <h3>具体意见</h3>
+            </div>
+            <div class="long-text-content">{{ specificOpinion }}</div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:team-outlined" />
+              </span>
+              <h3>责任与落实</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in responsibilityFields" :key="field.key" class="detail-item">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value" :class="{ 'detail-value-strong': field.strong }">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:check-circle-outlined" />
+              </span>
+              <h3>落实与成果</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in resultFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
         </div>
       </a-tab-pane>
 
@@ -48,12 +124,12 @@
           :scroll="{ x: 1800 }"
           :loading="feedbackLoading"
         >
-          <template #bodyCell="{ column, record }">
+          <template #bodyCell="{ column, record: feedbackRecord }">
             <template v-if="column.key === 'attachments'">
               <SUploadFile
-                v-if="record.id"
+                v-if="feedbackRecord.id"
                 class="feedback-attachment-list"
-                :bussiness-id="record.id"
+                :bussiness-id="feedbackRecord.id"
                 :disabled="true"
                 :multiple="true"
               />
@@ -100,38 +176,73 @@
     return fmt(record[`${key}_dictText`] || record[key]);
   }
 
-  const detailFields = computed(() => {
+  // 摘要区聚合最常用的识别与状态信息，其余字段按业务含义分组展示。
+  const detailSummary = computed(() => {
+    const r = record.value || {};
+    return {
+      title: fmt(r.title),
+      year: dictText(r, 'year'),
+      taskType: dictText(r, 'taskType'),
+      bpmStatus: dictText(r, 'bpmStatus'),
+      secretLevel: dictText(r, 'secretLevel'),
+      urgencyLevel: dictText(r, 'urgencyLevel'),
+    };
+  });
+
+  const opinionFields = computed(() => {
     const r = record.value || {};
     return [
-      { label: '年份', value: dictText(r, 'year'), bold: true },
-      { label: '会议类型', value: dictText(r, 'taskType') },
-      { label: '序号', value: fmt(r.number) },
-      { label: '密级', value: dictText(r, 'secretLevel') },
-      { label: '意见主题', value: fmt(r.title), bold: true },
-      { label: '类别', value: fmt(r.type) },
-      { label: '提出人', value: dictText(r, 'proposer') },
-      { label: '具体意见', value: fmt(r.content), fullWidth: true },
-      { label: '分管所领导', value: dictText(r, 'manageSuoleader'), bold: true },
-      { label: '责任领导', value: dictText(r, 'suoleader') },
-      { label: '牵头部门', value: dictText(r, 'responDeptid'), bold: true },
-      { label: '协办部门', value: dictText(r, 'assistDeptid'), bold: true },
-      { label: '落实部门', value: dictText(r, 'implementDeptid') },
-      { label: '是否采纳', value: ynText(r.isAdopt) },
-      { label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
-      { label: '措施数量', value: fmt(r.measureNumber) },
-      { label: '成果形式', value: fmt(r.achievement), fullWidth: true },
-      { label: '要求完成日期', value: fmtDate(r.deadline) },
-      { label: '备注', value: fmt(r.remark) },
-      { label: '实际完成时间', value: fmtDate(r.actualTime) },
-      { label: '提出人确认', value: fmt(r.proposerConfirm) },
-      { label: '完成状态', value: dictText(r, 'bpmStatus') },
-      { label: '督办次数', value: fmt(r.superviseCount) },
-      { label: '是否急件', value: dictText(r, 'urgencyLevel') },
-      { label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
-      { label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
+      { key: 'number', label: '序号', value: fmt(r.number) },
+      { key: 'type', label: '类别', value: fmt(r.type) },
+      { key: 'proposer', label: '提出人', value: dictText(r, 'proposer') },
+      { key: 'isAdopt', label: '是否采纳', value: ynText(r.isAdopt) },
     ];
   });
 
+  const specificOpinion = computed(() => fmt(record.value?.content));
+
+  const responsibilityFields = computed(() => {
+    const r = record.value || {};
+    return [
+      { key: 'manageSuoleader', label: '分管所领导', value: dictText(r, 'manageSuoleader'), strong: true },
+      { key: 'suoleader', label: '责任领导', value: dictText(r, 'suoleader'), strong: true },
+      { key: 'responDeptid', label: '牵头部门', value: dictText(r, 'responDeptid'), strong: true },
+      { key: 'assistDeptid', label: '协办部门', value: dictText(r, 'assistDeptid'), strong: true },
+      { key: 'implementDeptid', label: '落实部门', value: dictText(r, 'implementDeptid') },
+      { key: 'deadline', label: '要求完成日期', value: fmtDate(r.deadline) },
+      { key: 'measureNumber', label: '措施数量', value: fmt(r.measureNumber) },
+      { key: 'superviseCount', label: '督办次数', value: fmt(r.superviseCount) },
+      { key: 'isNeedAppro', label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
+      { key: 'supDeptleaderid', label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
+    ];
+  });
+
+  const resultFields = computed(() => {
+    const r = record.value || {};
+    return [
+      { key: 'actualTime', label: '实际完成时间', value: fmtDate(r.actualTime) },
+      { key: 'proposerConfirm', label: '提出人确认', value: fmt(r.proposerConfirm) },
+      { key: 'measure', label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
+      { key: 'achievement', label: '成果形式', value: fmt(r.achievement), fullWidth: true },
+      { key: 'remark', label: '备注', value: fmt(r.remark), fullWidth: true },
+    ];
+  });
+
+  // 同时兼容字典文本和原始编码，确保状态标签在不同列表数据形态下保持一致。
+  const statusTagColor = computed(() => {
+    const rawStatus = String(record.value?.bpmStatus ?? '');
+    const statusText = detailSummary.value.bpmStatus;
+    if (rawStatus === '3' || statusText.includes('已完成')) return 'success';
+    if (rawStatus === '2' || statusText.includes('督办中') || statusText.includes('进行中')) return 'processing';
+    if (rawStatus === '1' || statusText.includes('未开始')) return 'warning';
+    return undefined;
+  });
+
+  const urgencyTagColor = computed(() => {
+    const rawUrgency = String(record.value?.urgencyLevel ?? '');
+    return rawUrgency === '1' || detailSummary.value.urgencyLevel === '是' ? 'error' : undefined;
+  });
+
   const feedbackColumns: BasicColumn[] = [
     { title: '责任部门名称', dataIndex: 'responDeptname', align: 'center', width: 160 },
     { title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 110 },
@@ -189,7 +300,7 @@
 
   function open(currentRecord: Recordable) {
     record.value = currentRecord || {};
-    title.value = '详情';
+    title.value = '把把脉详情';
     activeKey.value = 'item';
     visible.value = true;
     if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
@@ -201,40 +312,275 @@
 </script>
 
 <style lang="less" scoped>
-  .detail-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px 32px;
-    padding: 4px 0;
+  // 弹窗内容会 Teleport 到 body，通过专属类限定公共组件的字号，避免影响其他页面。
+  :global(.takepulse-detail-modal .ant-modal-title) {
+    font-size: 18px;
+    line-height: 26px;
   }
 
-  .detail-row {
+  :global(.takepulse-detail-modal .ant-tabs-tab-btn) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  :global(.takepulse-detail-modal .ant-table) {
+    font-size: 15px;
+  }
+
+  :global(.takepulse-detail-modal .ant-table-thead > tr > th),
+  :global(.takepulse-detail-modal .ant-table-tbody > tr > td) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  .matter-detail {
+    padding: 4px 2px 10px;
+  }
+
+  .matter-summary {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 16px;
+    padding: 20px 22px;
+    background: linear-gradient(135deg, #f2f8ff 0%, #f8fbff 48%, #ffffff 100%);
+    border: 1px solid #d6e8ff;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgb(22 119 255 / 8%);
+
+    &::after {
+      position: absolute;
+      top: -46px;
+      right: -24px;
+      width: 132px;
+      height: 132px;
+      background: rgb(22 119 255 / 5%);
+      border-radius: 50%;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  .summary-heading {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: flex-start;
     gap: 12px;
+  }
+
+  .summary-heading-icon {
+    display: inline-flex;
+    flex: 0 0 40px;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: #1677ff;
+    font-size: 20px;
+    background: #e6f4ff;
+    border-radius: 10px;
+  }
+
+  .summary-heading-content {
     min-width: 0;
   }
 
-  .detail-row-full {
+  .summary-kicker {
+    display: block;
+    margin-bottom: 2px;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .summary-title {
+    margin: 0;
+    color: #172033;
+    font-size: 21px;
+    font-weight: 600;
+    line-height: 30px;
+    overflow-wrap: anywhere;
+  }
+
+  .summary-meta {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 18px;
+    margin-top: 16px;
+    padding-top: 14px;
+    border-top: 1px solid #deebfa;
+  }
+
+  .summary-meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 24px;
+    color: #64748b;
+
+    > :first-child {
+      color: #1677ff;
+      font-size: 15px;
+    }
+  }
+
+  .summary-meta-label {
+    font-size: 14px;
+  }
+
+  .summary-meta-value {
+    color: #1f2937;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .summary-tag-group {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .summary-tag {
+    margin-inline-end: 0;
+    padding: 2px 10px;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: normal;
+  }
+
+  .detail-section {
+    overflow: hidden;
+    margin-top: 14px;
+    background: #ffffff;
+    border: 1px solid #e7edf4;
+    border-radius: 8px;
+  }
+
+  .detail-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+    padding: 10px 16px;
+    background: #f8fbff;
+    border-bottom: 1px solid #e7edf4;
+
+    h3 {
+      margin: 0;
+      color: #27364b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+
+  .detail-section-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    color: #1677ff;
+    background: #e6f4ff;
+    border-radius: 6px;
+  }
+
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1px;
+    background: #edf1f5;
+  }
+
+  .detail-item {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    min-width: 0;
+    min-height: 54px;
+    padding: 14px 16px;
+    background: #ffffff;
+  }
+
+  .detail-item-full {
     grid-column: 1 / -1;
   }
 
   .detail-label {
-    flex: 0 0 150px;
-    color: #8c8c8c;
-    line-height: 22px;
+    color: #7b8798;
+    font-size: 14px;
+    line-height: 26px;
   }
 
   .detail-value {
-    flex: 1;
-    color: #1f2937;
-    line-height: 22px;
-    word-break: break-all;
+    min-width: 0;
+    color: #27364b;
+    font-size: 15px;
+    line-height: 26px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 
-  .detail-row-bold .detail-value {
-    font-weight: 700;
+  .detail-value-strong {
+    color: #172033;
+    font-weight: 600;
+  }
+
+  .long-text-content {
+    min-height: 90px;
+    padding: 16px 18px 18px;
+    color: #27364b;
     font-size: 15px;
+    line-height: 1.9;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @media (max-width: 768px) {
+    .matter-summary {
+      padding: 16px;
+    }
+
+    .summary-meta {
+      align-items: flex-start;
+    }
+
+    .summary-tag-group {
+      flex-basis: 100%;
+    }
+
+    .detail-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .detail-item-full {
+      grid-column: auto;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .summary-title {
+      font-size: 19px;
+      line-height: 27px;
+    }
+
+    .summary-meta {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .detail-item {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 2px;
+      padding: 11px 14px;
+    }
   }
 
   .feedback-summary-header {
@@ -256,9 +602,9 @@
     flex-wrap: wrap;
     min-width: 0;
     color: #1f2937;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
-    line-height: 24px;
+    line-height: 26px;
   }
 
   .feedback-summary-icon {
@@ -275,12 +621,14 @@
 
   .feedback-summary-tag {
     margin-left: 10px;
+    font-size: 14px;
+    line-height: 22px;
   }
 
   .feedback-summary-desc {
     color: #64748b;
-    font-size: 13px;
-    line-height: 22px;
+    font-size: 14px;
+    line-height: 24px;
     white-space: nowrap;
   }
 
@@ -303,11 +651,23 @@
       padding-bottom: 6px;
     }
 
+    :deep(.file-list-header .file-count) {
+      font-size: 14px;
+    }
+
     :deep(.file-list .file-item) {
       padding: 8px;
       margin-bottom: 6px;
     }
 
+    :deep(.file-list .file-name) {
+      font-size: 15px;
+    }
+
+    :deep(.file-list .file-size) {
+      font-size: 13px;
+    }
+
     :deep(.ant-empty) {
       margin: 0 !important;
       display: flex;
@@ -322,8 +682,8 @@
 
     :deep(.ant-empty-description) {
       color: #94a3b8;
-      font-size: 12px;
-      line-height: 20px;
+      font-size: 13px;
+      line-height: 22px;
     }
   }
 </style>