测试完成

WXL (wul)

3 天以前 dac4393e8af2646f544f6e1ca24dab11b40c8492

 src/views/Satisfaction/sfstatistics/components/components/TopicDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,208 @@
<template>
  <div class="topic-dialog">
    <div class="topicdia">
      <div style="overflow-x: hidden; overflow-y: auto; max-height: 65vh">
        <!-- ä¿®æ”¹è¿™é‡Œï¼šä½¿ç”¨ processedTopicList è€Œä¸æ˜¯ topicList -->
        <div
          v-for="(item, index) in processedTopicList"
          :key="item.scriptid"
          class="ttaabbcc"
        >
          <div class="describe">
            ç¬¬{{ index + 1 }}题： {{ item.scriptContent }}
            <span>[{{ item.scriptType == 1 ? "单选题" : "多选题" }}]</span>
          </div>
          <div>
            <el-table :data="item.details" style="width: 100%">
              <el-table-column
                prop="optionText"
                label="问题选项"
                align="center"
                min-width="200"
              />
              <el-table-column
                prop="chosenQuantity"
                label="选择人数"
                align="center"
                min-width="120"
              >
                <template slot-scope="{ row }">
                  {{ row.chosenQuantity || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="chosenPercentage"
                label="比例"
                align="center"
                min-width="120"
              >
                <template slot-scope="{ row }">
                  <span
                    v-if="
                      row.chosenPercentage !== null &&
                      row.chosenPercentage !== undefined
                    "
                  >
                    {{ (Number(row.chosenPercentage) * 100).toFixed(2) }}%
                  </span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- å¦‚果没有数据 -->
    <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>
export default {
  name: "TopicDialog",
  props: {
    rowData: {
      type: Object,
      default: () => ({}),
    },
    queryParams: {
      type: Object,
      default: () => ({}),
    },
    topicList: {
      type: [Array, Object],
      default: () => ({}),
    },
  },
  data() {
    return {
      processedTopicList: [], // å¤„理后的数据
    };
  },
  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;
    },

    // æ ¼å¼åŒ–百分比
    formatPercent(value) {
      if (value === null || value === undefined) return "-";
      const num = parseFloat(value);
      if (isNaN(num)) return "-";
      return `${num.toFixed(2)}%`; // æ³¨æ„ï¼šä½ çš„数据中百分比已经是0-100的形式
    },

    // å…³é—­å¯¹è¯æ¡†
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.topic-dialog {
  .topicdia {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    color: #333;
  }

  .ttaabbcc {
    background: #fafafa;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
    border-left: 4px solid #4794c5;
  }

  .describe {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #1f2d3d;
  }

  .describe span {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin-left: 8px;
  }

  ::v-deep .el-table {
    border-radius: 4px;
    overflow: hidden;
    font-size: 14px;
  }

  ::v-deep .el-table th {
    background-color: #f1f5f9;
    color: #333;
    font-weight: 600;
  }

  ::v-deep .el-table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
  }
}
</style>