测试完成

WXL (wul)

昨天 e06cd3953ba8a6e0eee11c235bce9ced419a2800

 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 {
        // 这里从父组件传递数据，不需要重新调用API
        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) {
          // 深拷贝item，避免修改原数据
          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;