From feb5a669dced68415bc7e32f237f77bf9842fe8b Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期三, 03 六月 2026 17:42:18 +0800
Subject: [PATCH] 测试完成

---
 src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue |  297 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 264 insertions(+), 33 deletions(-)

diff --git a/src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue b/src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue
index c0f9faf..7b6fa0a 100644
--- a/src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue
+++ b/src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue
@@ -1,14 +1,28 @@
 <template>
   <div class="topic-dialog">
+    <div class="dialog-header">
+      <span class="title"> {{ configTitle }}鎸囨爣璇︽儏 </span>
+      <el-button
+        type="primary"
+        size="mini"
+        icon="el-icon-download"
+        :disabled="!processedTopicList.length"
+        @click="exportTopicDetail"
+      >
+        瀵煎嚭
+      </el-button>
+    </div>
+
     <div class="topicdia">
       <div style="overflow-x: hidden; overflow-y: auto; max-height: 65vh">
+        <!-- 淇敼杩欓噷锛氫娇鐢� processedTopicList 鑰屼笉鏄� topicList -->
         <div
-          v-for="(item, index) in topiclist"
-          :key="index"
+          v-for="(item, index) in processedTopicList"
+          :key="item.scriptid"
           class="ttaabbcc"
         >
           <div class="describe">
-            绗瑊{ index + 1 }}棰橈細 {{ item.scriptContent }}?
+            绗瑊{ index + 1 }}棰橈細 {{ item.scriptContent }}
             <span>[{{ item.scriptType == 1 ? "鍗曢�夐" : "澶氶�夐" }}]</span>
           </div>
           <div>
@@ -24,7 +38,11 @@
                 label="閫夋嫨浜烘暟"
                 align="center"
                 min-width="120"
-              />
+              >
+                <template slot-scope="{ row }">
+                  {{ row.chosenQuantity || 0 }}
+                </template>
+              </el-table-column>
               <el-table-column
                 prop="chosenPercentage"
                 label="姣斾緥"
@@ -32,8 +50,13 @@
                 min-width="120"
               >
                 <template slot-scope="{ row }">
-                  <span v-if="row.chosenPercentage !== null && row.chosenPercentage !== undefined">
-                    {{ formatPercent(row.chosenPercentage) }}
+                  <span
+                    v-if="
+                      row.chosenPercentage !== null &&
+                      row.chosenPercentage !== undefined
+                    "
+                  >
+                    {{ (Number(row.chosenPercentage) * 100).toFixed(2) }}%
                   </span>
                   <span v-else>-</span>
                 </template>
@@ -44,60 +67,255 @@
       </div>
     </div>
 
-    <div slot="footer" class="dialog-footer" style="text-align: center; padding-top: 20px;">
+    <!-- 濡傛灉娌℃湁鏁版嵁 -->
+    <div
+      v-if="!processedTopicList.length"
+      class="no-data"
+      style="text-align: center; padding: 50px 0"
+    >
+      <el-empty description="鏆傛棤鏁版嵁"></el-empty>
+    </div>
+
+    <div
+      slot="footer"
+      class="dialog-footer"
+      style="text-align: center; padding-top: 20px"
+    >
       <el-button @click="handleClose">鍏� 闂�</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import ExcelJS from "exceljs";
+import { saveAs } from "file-saver";
 export default {
-  name: 'TopicDialog',
+  name: "TopicDialog",
   props: {
     rowData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     queryParams: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
+    topicList: {
+      type: [Array, Object],
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      topiclist: []
+      processedTopicList: [], // 澶勭悊鍚庣殑鏁版嵁
     };
   },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    // 鍔犺浇鏁版嵁
-    async loadData() {
-      try {
-        // 杩欓噷浠庣埗缁勪欢浼犻�掓暟鎹紝涓嶉渶瑕侀噸鏂拌皟鐢ˋPI
-        this.topiclist = this.$parent.topiclist || [];
-      } catch (error) {
-        console.error('鍔犺浇棰樼洰璇︽儏澶辫触:', error);
-        this.$message.error('鍔犺浇棰樼洰璇︽儏澶辫触');
-      }
+  computed: {
+    configTitle() {
+      // 浠庣埗绾� queryParams 涓鍙�
+      const key = this.queryParams?.configKey;
+      return key === "returnVisitCount" ? "澶嶈瘖閫氱煡" : "婊℃剰搴�";
     },
+  },
+  watch: {
+    // 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
+    topicList: {
+      immediate: true,
+      handler(newVal) {
+        console.log("TopicDialog鎺ユ敹鍒扮埗缁勪欢鏁版嵁:", newVal);
+        this.processTopicList(newVal);
+      },
+    },
+  },
+  mounted() {
+    console.log("TopicDialog mounted, props:", this.$props);
+  },
+  methods: {
+    // 澶勭悊topicList鏁版嵁
+    processTopicList(data) {
+      console.log("寮�濮嬪鐞嗘暟鎹�:", data);
 
+      if (!data || typeof data !== "object") {
+        this.processedTopicList = [];
+        return;
+      }
+
+      // 灏嗗璞¤浆鎹负鏁扮粍
+      const result = [];
+
+      Object.keys(data).forEach((key) => {
+        const item = data[key];
+        if (item && item.scriptContent) {
+          // 娣辨嫹璐漣tem锛岄伩鍏嶄慨鏀瑰師鏁版嵁
+          const processedItem = JSON.parse(JSON.stringify(item));
+
+          // 杩囨护details锛屽彧淇濈暀鏈夐�夐」鏂囨湰鐨�
+          if (processedItem.details && Array.isArray(processedItem.details)) {
+            processedItem.details = processedItem.details.filter(
+              (detail) => detail && detail.optionText
+            );
+          }
+
+          result.push(processedItem);
+        }
+      });
+
+      console.log("澶勭悊鍚庣殑鏁版嵁:", result);
+      this.processedTopicList = result;
+    },
+    /** 瀵煎嚭棰樼洰鏄庣粏 */
+    async exportTopicDetail() {
+      if (!this.processedTopicList.length) {
+        this.$message.warning("鏆傛棤鏁版嵁鍙鍑�");
+        return;
+      }
+
+      const workbook = new ExcelJS.Workbook();
+      const sheetName = `${
+        this.rowData.leavehospitaldistrictname || this.rowData.deptname
+      }${this.configTitle}鏄庣粏`;
+      const worksheet = workbook.addWorksheet(sheetName);
+
+      /* ---------- 鏍峰紡 ---------- */
+      const titleStyle = {
+        font: { name: "寰蒋闆呴粦", size: 14, bold: true },
+        alignment: { horizontal: "center", vertical: "middle" },
+        fill: {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: "FFF5F7FA" },
+        },
+      };
+
+      const subtitleStyle = {
+        font: { name: "寰蒋闆呴粦", size: 12, bold: true },
+        alignment: { horizontal: "left", vertical: "middle" },
+      };
+
+      const headerStyle = {
+        font: { name: "寰蒋闆呴粦", size: 11, bold: true },
+        fill: {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: "FFEBEEF5" },
+        },
+        alignment: { horizontal: "center", vertical: "middle" },
+        border: {
+          top: { style: "thin" },
+          left: { style: "thin" },
+          bottom: { style: "thin" },
+          right: { style: "thin" },
+        },
+      };
+
+      const cellStyle = {
+        font: { name: "瀹嬩綋", size: 10 },
+        alignment: { horizontal: "center", vertical: "middle" },
+        border: {
+          top: { style: "thin" },
+          left: { style: "thin" },
+          bottom: { style: "thin" },
+          right: { style: "thin" },
+        },
+      };
+
+      /* ---------- 鏍囬鍖� ---------- */
+      worksheet.mergeCells(1, 1, 1, 4);
+      worksheet.getCell(1, 1).value = `${this.configTitle}棰樼洰鏄庣粏`;
+      worksheet.getCell(1, 1).style = titleStyle;
+
+      worksheet.mergeCells(2, 1, 2, 4);
+      worksheet.getCell(2, 1).value = `缁熻瀵硅薄锛�${
+        this.rowData.leavehospitaldistrictname || this.rowData.deptname
+      }`;
+      worksheet.getCell(2, 1).style = subtitleStyle;
+
+      worksheet.mergeCells(3, 1, 3, 4);
+      worksheet.getCell(3, 1).value = `缁熻鏃堕棿锛�${
+        this.queryParams.dateRange?.[0] || "-"
+      } 鑷� ${this.queryParams.dateRange?.[1] || "-"}`;
+      worksheet.getCell(3, 1).style = subtitleStyle;
+
+      let currentRow = 5;
+
+      /* ---------- 閫愰鍐欏叆 ---------- */
+      this.processedTopicList.forEach((item, index) => {
+        worksheet.mergeCells(currentRow, 1, currentRow, 4);
+        worksheet.getCell(currentRow, 1).value = `绗�${index + 1}棰橈細${
+          item.scriptContent
+        } [${item.scriptType == 1 ? "鍗曢�夐" : "澶氶�夐"}]`;
+        worksheet.getCell(currentRow, 1).style = subtitleStyle;
+        currentRow++;
+
+        const headerRow = worksheet.addRow([
+          "闂閫夐」",
+          "閫夋嫨浜烘暟",
+          "鍗犳瘮",
+          "",
+        ]);
+        headerRow.eachCell((cell) => {
+          cell.style = headerStyle;
+        });
+        currentRow++;
+
+        item.details.forEach((detail) => {
+          const percent =
+            detail.chosenPercentage != null
+              ? (Number(detail.chosenPercentage) * 100).toFixed(2) + "%"
+              : "-";
+
+          const row = worksheet.addRow([
+            detail.optionText,
+            detail.chosenQuantity || 0,
+            percent,
+            "",
+          ]);
+          row.eachCell((cell) => {
+            cell.style = cellStyle;
+          });
+          currentRow++;
+        });
+
+        currentRow++;
+      });
+
+      /* ---------- 鍒楀 ---------- */
+      worksheet.columns = [
+        { width: 40 },
+        { width: 12 },
+        { width: 12 },
+        { width: 10 },
+      ];
+
+      /* ---------- 瀵煎嚭 ---------- */
+      const buffer = await workbook.xlsx.writeBuffer();
+      const fileName =
+        `${this.rowData.leavehospitaldistrictname || this.rowData.deptname}` +
+        `${this.configTitle}鏄庣粏_` +
+        `${this.queryParams.dateRange?.[0]}鑷�${this.queryParams.dateRange?.[1]}.xlsx`;
+
+      saveAs(
+        new Blob([buffer], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        }),
+        fileName
+      );
+
+      this.$message.success("瀵煎嚭鎴愬姛");
+    },
     // 鏍煎紡鍖栫櫨鍒嗘瘮
     formatPercent(value) {
-      if (value === null || value === undefined) return '-';
+      if (value === null || value === undefined) return "-";
       const num = parseFloat(value);
-      if (isNaN(num)) return '-';
-      return `${(num * 100).toFixed(2)}%`;
+      if (isNaN(num)) return "-";
+      return `${num.toFixed(2)}%`; // 娉ㄦ剰锛氫綘鐨勬暟鎹腑鐧惧垎姣斿凡缁忔槸0-100鐨勫舰寮�
     },
 
     // 鍏抽棴瀵硅瘽妗�
     handleClose() {
-      this.$emit('close');
-    }
-  }
+      this.$emit("close");
+    },
+  },
 };
 </script>
 
@@ -136,7 +354,20 @@
     overflow: hidden;
     font-size: 14px;
   }
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #ebeef5;
+    background: #fafafa;
 
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
   ::v-deep .el-table th {
     background-color: #f1f5f9;
     color: #333;

--
Gitblit v1.9.3