<template>
|
<div class="topic-dialog">
|
<div class="topicdia">
|
<div style="overflow-x: hidden; overflow-y: auto; max-height: 65vh">
|
<div
|
v-for="(item, index) in topiclist"
|
:key="index"
|
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"
|
/>
|
<el-table-column
|
prop="chosenPercentage"
|
label="比例"
|
align="center"
|
min-width="120"
|
>
|
<template slot-scope="{ row }">
|
<span v-if="row.chosenPercentage !== null && row.chosenPercentage !== undefined">
|
{{ formatPercent(row.chosenPercentage) }}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</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: () => ({})
|
}
|
},
|
data() {
|
return {
|
topiclist: []
|
};
|
},
|
|
mounted() {
|
this.loadData();
|
},
|
|
methods: {
|
// 加载数据
|
async loadData() {
|
try {
|
// 这里从父组件传递数据，不需要重新调用API
|
this.topiclist = this.$parent.topiclist || [];
|
} catch (error) {
|
console.error('加载题目详情失败:', error);
|
this.$message.error('加载题目详情失败');
|
}
|
},
|
|
// 格式化百分比
|
formatPercent(value) {
|
if (value === null || value === undefined) return '-';
|
const num = parseFloat(value);
|
if (isNaN(num)) return '-';
|
return `${(num * 100).toFixed(2)}%`;
|
},
|
|
// 关闭对话框
|
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>
|
