<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>
|
