测试完成

WXL (wul)

4 天以前 4c5d48b7e9450e8e793970576caf2f3510e99dba

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

@@ -2,13 +2,14 @@
  <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 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 +25,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 +37,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,7 +54,20 @@
      </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>
@@ -52,52 +75,86 @@

<script>
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();
  watch: {
    // 监听父组件传递的数据变化
    topicList: {
      immediate: true,
      handler(newVal) {
        console.log("TopicDialog接收到父组件数据:", newVal);
        this.processTopicList(newVal);
      },
    },
  },

  mounted() {
    console.log("TopicDialog mounted, props:", this.$props);
  },
  methods: {
    // 加载数据
    async loadData() {
      try {
        // 这里从父组件传递数据，不需要重新调用API
        this.topiclist = this.$parent.topiclist || [];
      } catch (error) {
        console.error('加载题目详情失败:', error);
        this.$message.error('加载题目详情失败');
    // 处理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 '-';
      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>