|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
|
- <!-- 可选:添加 loading 提示 -->
|
|
|
|
|
<el-form ref="form" :model="form" label-width="140px" v-loading="loading">
|
|
<el-form ref="form" :model="form" label-width="140px" v-loading="loading">
|
|
|
<div v-for="(answer, index) in form.answers" :key="index">
|
|
<div v-for="(answer, index) in form.answers" :key="index">
|
|
|
<div style="margin-bottom: 20px; margin-top: 20px;">
|
|
<div style="margin-bottom: 20px; margin-top: 20px;">
|
|
@@ -9,24 +8,22 @@
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div style="margin-left: 31px;">
|
|
<div style="margin-left: 31px;">
|
|
|
- <!-- flag 控制是否可编辑 -->
|
|
|
|
|
<el-checkbox-group
|
|
<el-checkbox-group
|
|
|
- :disabled="answer.flag || false"
|
|
|
|
|
v-model="form.answers[index].value"
|
|
v-model="form.answers[index].value"
|
|
|
size="mini"
|
|
size="mini"
|
|
|
|
|
+ :disabled="true"
|
|
|
>
|
|
>
|
|
|
<el-checkbox
|
|
<el-checkbox
|
|
|
- v-for="dict in answer.options"
|
|
|
|
|
|
|
+ v-for="dict in getSelectedOptions(answer)"
|
|
|
:key="dict.value"
|
|
:key="dict.value"
|
|
|
:label="dict.value"
|
|
:label="dict.value"
|
|
|
>
|
|
>
|
|
|
- {{ dict.name }}
|
|
|
|
|
|
|
+ {{ dict.name }}
|
|
|
</el-checkbox>
|
|
</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <!-- 如果没有数据 -->
|
|
|
|
|
<div v-if="!form.answers || form.answers.length === 0" style="text-align: center; color: #999; padding: 20px;">
|
|
<div v-if="!form.answers || form.answers.length === 0" style="text-align: center; color: #999; padding: 20px;">
|
|
|
暂无采集信息
|
|
暂无采集信息
|
|
|
</div>
|
|
</div>
|
|
@@ -35,8 +32,8 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-//根据 userId 获取采集信息的接口
|
|
|
|
|
import { getCollectionByUserId } from "@/api/collection";
|
|
import { getCollectionByUserId } from "@/api/collection";
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
name: "CollectionDetail",
|
|
name: "CollectionDetail",
|
|
|
props: {
|
|
props: {
|
|
@@ -54,10 +51,7 @@ export default {
|
|
|
form: {
|
|
form: {
|
|
|
answers: []
|
|
answers: []
|
|
|
},
|
|
},
|
|
|
- loading: false,
|
|
|
|
|
- questionOptions: [],
|
|
|
|
|
- privatePackageOptions: [],
|
|
|
|
|
- codeImage: null
|
|
|
|
|
|
|
+ loading: false
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
@@ -71,22 +65,29 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ getSelectedOptions(answer) {
|
|
|
|
|
+ if (!Array.isArray(answer.value) || !Array.isArray(answer.options)) {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ }
|
|
|
|
|
+ const selectedValues = new Set(answer.value);
|
|
|
|
|
+ return answer.options.filter(option => selectedValues.has(option.value));
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
fetchCollectionInfo(userId) {
|
|
fetchCollectionInfo(userId) {
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
- console.log("传入的用户信息:", userId)
|
|
|
|
|
getCollectionByUserId(userId)
|
|
getCollectionByUserId(userId)
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
const data = res.data;
|
|
const data = res.data;
|
|
|
if (data && Array.isArray(data.answers)) {
|
|
if (data && Array.isArray(data.answers)) {
|
|
|
- this.form = data;
|
|
|
|
|
|
|
+ this.form.answers = data.answers;
|
|
|
} else {
|
|
} else {
|
|
|
- this.form = { answers: [] };
|
|
|
|
|
|
|
+ this.form.answers = [];
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
.catch(err => {
|
|
.catch(err => {
|
|
|
console.error("获取采集信息失败:", err);
|
|
console.error("获取采集信息失败:", err);
|
|
|
this.$message.warning("暂无采集信息");
|
|
this.$message.warning("暂无采集信息");
|
|
|
- this.form = { answers: [] };
|
|
|
|
|
|
|
+ this.form.answers = [];
|
|
|
})
|
|
})
|
|
|
.finally(() => {
|
|
.finally(() => {
|
|
|
this.loading = false;
|
|
this.loading = false;
|
|
@@ -97,14 +98,17 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
|
|
|
|
|
- color: #1890ff;
|
|
|
|
|
|
|
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
|
|
|
+ background-color: #409eff !important;
|
|
|
|
|
+ border-color: #409eff !important;
|
|
|
}
|
|
}
|
|
|
-::v-deep .el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner {
|
|
|
|
|
- color: #1890ff;
|
|
|
|
|
|
|
+
|
|
|
|
|
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
|
|
|
+ border-color: #fff !important;
|
|
|
}
|
|
}
|
|
|
-::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
|
|
|
|
- border-color: #1890ff;
|
|
|
|
|
|
|
+
|
|
|
|
|
+/*让已选中禁用状态的文字也高亮为蓝色 */
|
|
|
|
|
+.app-container >>> .el-checkbox.is-disabled .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
|
|
+ color: #409eff !important;
|
|
|
}
|
|
}
|
|
|
-/* 可添加一些样式优化 */
|
|
|
|
|
</style>
|
|
</style>
|