164 lines
4.2 KiB
Vue
164 lines
4.2 KiB
Vue
<template>
|
||
<div class="base">
|
||
<div class="sell-verify">标签属性#{{ info?.question_value }}</div>
|
||
<div class="related-option" v-for="rel in relatedOption" :key="rel.id">
|
||
<i class="iconfont"></i>
|
||
<div class="related-option-title">
|
||
{{ rel.flag }}关联自{{ rel.title }}的{{ rel.relatedList.length }}个{{
|
||
rel.citeFlag
|
||
}}：
|
||
</div>
|
||
<div
|
||
class="related-option-html"
|
||
v-html="rel.relatedList.join('、')"
|
||
></div>
|
||
</div>
|
||
<div class="base-option">
|
||
<slot name="option"> </slot>
|
||
</div>
|
||
<slot name="noMrgOption"></slot>
|
||
<div><slot name="footer"></slot></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { defineComponent } from "vue";
|
||
import { watch } from "@vue/runtime-core";
|
||
import { ref } from "@vue/reactivity";
|
||
import { useStore } from "vuex";
|
||
export default defineComponent({
|
||
name: "QuesBaseItem",
|
||
props: {
|
||
info: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
setup(props) {
|
||
const store = useStore();
|
||
const relatedOption = ref([]);
|
||
/** 递归获取关联的所有选项 */
|
||
const getRelationOption = (info) => {
|
||
const { questionInfo } = JSON.parse(JSON.stringify(store.state.common));
|
||
const questionList = questionInfo.questions;
|
||
const result = [];
|
||
const func = (ques, tempObj, tempAss) => {
|
||
if (ques.associate && ques.associate.length > 0) {
|
||
ques.associate.forEach((ass) => {
|
||
// 假设一道选择题关联了一道矩阵题的行标签，则只显示改矩阵题的所有行选项
|
||
if (tempAss.cite_type === ass.type) {
|
||
const newQues = questionList.find(
|
||
(x) => x.question_index === ass.question_index
|
||
);
|
||
const filterOpt = newQues.options.filter((opt) =>
|
||
opt.find((x) => x.type === ass.cite_type)
|
||
);
|
||
const newOpt = (filterOpt.length > 0 ? filterOpt[0] : []).map(
|
||
(opt) => opt.option
|
||
);
|
||
tempObj.relatedList.push(...newOpt);
|
||
func(newQues, tempObj, ass);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
info.associate.forEach((ass) => {
|
||
const newQues = questionList.find(
|
||
(x) => x.question_index === ass.question_index
|
||
);
|
||
let flag = "";
|
||
if (ass.type === 1) {
|
||
flag = "行标签";
|
||
} else if (ass.type === 2) {
|
||
flag = "列标签";
|
||
} else if (ass.type === 3) {
|
||
flag = "分类";
|
||
}
|
||
let citeFlag = "选项";
|
||
if (ass.cite_type === 1) {
|
||
citeFlag = "行标签";
|
||
} else if (ass.cite_type === 2) {
|
||
citeFlag = "列标签";
|
||
} else if (ass.cite_type === 3) {
|
||
citeFlag = "分类";
|
||
}
|
||
const temp = {
|
||
id: newQues.id,
|
||
flag,
|
||
citeFlag,
|
||
title: newQues.title,
|
||
relatedList: [],
|
||
};
|
||
const filterOpt = newQues.options.filter((opt) =>
|
||
opt.find((x) => x.type === ass.cite_type)
|
||
);
|
||
const newOpt = (filterOpt.length > 0 ? filterOpt[0] : []).map(
|
||
(opt) => opt.option
|
||
);
|
||
temp.relatedList.push(...newOpt);
|
||
func(newQues, temp, ass);
|
||
result.push(temp);
|
||
});
|
||
relatedOption.value = result;
|
||
};
|
||
watch(
|
||
() => props.info,
|
||
(val) => {
|
||
if (val) {
|
||
setTimeout(() => {
|
||
getRelationOption(val);
|
||
}, 100);
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
return {
|
||
relatedOption,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.base {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
margin-left: 25px;
|
||
}
|
||
.base-option {
|
||
margin-left: 40px;
|
||
margin-bottom: 25px;
|
||
flex: 1;
|
||
}
|
||
.sell-verify {
|
||
padding-left: 37px;
|
||
color: $yili-default-color;
|
||
}
|
||
.related-option {
|
||
display: flex;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #c0c0c0;
|
||
margin-left: 37px;
|
||
&-title {
|
||
word-break: keep-all;
|
||
}
|
||
&-html {
|
||
display: flex;
|
||
&::v-deep p {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: contents;
|
||
}
|
||
}
|
||
.iconfont {
|
||
font-size: 14px;
|
||
margin-right: 12px;
|
||
}
|
||
&:not(:last-child) {
|
||
padding-bottom: 8px;
|
||
}
|
||
}
|
||
</style>
|