832 lines
32 KiB
Vue
832 lines
32 KiB
Vue
<template>
|
||
<div class="related">
|
||
<a-button type="text" class="custom-button" @click="openModal">
|
||
<div class="flex-align">
|
||
<img style="margin-top:-2px" :src="require('@/assets/img/guanlianxuanxiang.png')" />
|
||
<span style="margin-left: 6px">{{ title }}</span>
|
||
<span v-if="info.associate.length !== 0">（{{ info.associate.filter((ass) => ass.type === type).length }}）</span>
|
||
</div>
|
||
</a-button>
|
||
<a-modal v-model:visible="visible" width="80%" wrapClassName="custom-modal" style="max-width: 1000px; height: 80%" :destroyOnClose="false" :centered="true" :maskClosable="false" :title="title" @ok="saveRelate" @cancel="closeRelate">
|
||
<div class="related-main">
|
||
<div class="related-main-content">
|
||
<div class="related-main-content-card" v-for="(item, index) in relateds" :key="index">
|
||
<div class="related-main-content-card-ques">
|
||
<div class="related-main-content-card-ques-text">关联</div>
|
||
<a-select
|
||
v-model:value="item.question_index"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px; max-width: 50%"
|
||
placeholder="请选择问题"
|
||
show-search
|
||
:filterOption="
|
||
(value, option) => {
|
||
return filterOptionHandle(value, option, quesList)
|
||
}
|
||
"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
"
|
||
@change="selectQuesChange(item, index)">
|
||
<a-select-option v-for="ques in quesList" :key="ques.id" :value="ques.question_index" :disabled="relateds.find((rel) => rel.question_index === ques.question_index)">
|
||
<div class="relate-html" v-html="`${ques.title}${ques.stem}`"></div>
|
||
</a-select-option>
|
||
</a-select>
|
||
<!-- 选择(单，多)题 -->
|
||
<template v-if="[1, 2].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="1">选中项</a-select-option>
|
||
<a-select-option :value="2">未选中项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template v-if="[25].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="1">选中项</a-select-option>
|
||
<a-select-option :value="3">未选中项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template v-if="[26].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="1">喜欢</a-select-option>
|
||
<a-select-option :value="2">不喜欢</a-select-option>
|
||
<a-select-option :value="3">未选中项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 矩阵(单，多)题 -->
|
||
<template v-if="[9, 10].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.cite_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择标签"
|
||
@change="item.relation_type = undefined"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="1">行标签</a-select-option>
|
||
<a-select-option :value="2">列标签</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择选项"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<template v-if="item.cite_type === 1">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="1">选中项</a-select-option>
|
||
<a-select-option :value="2">未选中项</a-select-option>
|
||
</template>
|
||
<template v-else-if="item.cite_type === 2">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</template>
|
||
</a-select>
|
||
</template>
|
||
<!-- 矩阵(打分,填空)题 -->
|
||
<template v-if="[8, 11].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.cite_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择标签"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="1">行标签</a-select-option>
|
||
<a-select-option :value="2">列标签</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择选项"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 排序题 -->
|
||
<template v-if="item.quesInfo.question_type === 16">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 分类题 -->
|
||
<template v-if="item.quesInfo.question_type === 15">
|
||
<a-select
|
||
v-model:value="item.cite_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择部分"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="3">分类</a-select-option>
|
||
<a-select-option :value="0">选项</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 恒定总和题 -->
|
||
<template v-if="item.quesInfo.question_type === 17">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 打分题 -->
|
||
<template v-if="item.quesInfo.question_type === 5">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- 图片题(单，多) -->
|
||
<template v-if="[13, 14].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="1">选中项</a-select-option>
|
||
<a-select-option :value="2">未选中项</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-model:value="item.picture_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联部分"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">图片</a-select-option>
|
||
<a-select-option :value="1">文字</a-select-option>
|
||
<a-select-option :value="2">图文</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<!-- maxdiff -->
|
||
<template v-if="[105].includes(item.quesInfo.question_type)">
|
||
<a-select
|
||
v-model:value="item.relation_type"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择关联方式"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option :value="0">全部项</a-select-option>
|
||
<a-select-option :value="3">相关</a-select-option>
|
||
<a-select-option :value="4">不相关</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<div class="related-main-content-card-ques-icon">
|
||
<!-- <i class="iconfont addfont" @click="addRelateHandle(index)"
|
||
></i
|
||
> -->
|
||
<i class="iconfont addfont" @click="deleteRelatedHandle(index)"></i>
|
||
</div>
|
||
</div>
|
||
<div class="related-main-content-card-option">
|
||
<div class="related-main-content-card-option-item" v-if="item.showScope">
|
||
<div class="related-main-content-card-option-item-text">关联范围</div>
|
||
<a-select
|
||
v-model:value="item.first_scope"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 5px"
|
||
placeholder="请选择选项"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
|
||
</a-select>
|
||
<span style="margin-right: 5px"> ~ </span>
|
||
<a-select
|
||
v-model:value="item.last_scope"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
placeholder="请选择选项"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
|
||
</a-select>
|
||
<i class="iconfont addfont deletefont" style="font-size: 20px" @click="deleteScope(item)"></i>
|
||
</div>
|
||
<div class="related-main-content-card-option-item" v-if="item.showOut">
|
||
<div class="related-main-content-card-option-item-text">排除选项</div>
|
||
<a-select
|
||
v-model:value="item.out_scope"
|
||
class="custom-select"
|
||
style="flex: 1; margin-right: 12px"
|
||
mode="multiple"
|
||
placeholder="请选择选项"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body
|
||
}
|
||
">
|
||
<a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
|
||
</a-select>
|
||
<i class="iconfont addfont deletefont" style="font-size: 20px" @click="deleteOut(item)"></i>
|
||
</div>
|
||
<div class="related-main-content-card-option-item">
|
||
<template v-if="questions_type === 0">
|
||
<a-button disabled type="text" class="custom-button" @click="addScope(item)">
|
||
<span style="margin-left: 6px">关联范围</span>
|
||
</a-button>
|
||
<a-button disabled type="text" class="custom-button" @click="addOut(item)">
|
||
<span style="margin-left: 6px">排除选项</span>
|
||
</a-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 热区题特殊处理只能添加一个关联 -->
|
||
<a-button :disabled="questions_type !== 0 && relateds.length !== 0" type="text" class="custom-button" @click="addRelateHandle(relateds.length - 1)">
|
||
<div class="flex-align">
|
||
<i class="iconfont"></i>
|
||
<span style="margin-left: 6px">添加关联</span>
|
||
</div>
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from '@vue/reactivity'
|
||
import { useStore } from 'vuex'
|
||
import { saveQuesApi, nodeHandle } from '../js/util.js'
|
||
import { Modal } from 'ant-design-vue'
|
||
const commonJson = {
|
||
question_index: undefined, // 问题序号
|
||
type: 0, // 显示类型 0默认 1矩阵行 2矩阵列 3分类(当前题的type)
|
||
cite_type: undefined, // 引用类型 0默认 1矩阵行 2矩阵列 3分类(引用题的type，用于显示关联列表的类型)
|
||
showScope: false, // 开启关联范围
|
||
showOut: false, // 开启排除范围
|
||
quesInfo: {} // 题目信息
|
||
}
|
||
const json = [
|
||
{
|
||
value: [1, 2, 25, 26, 105], // 选择, 热区, maxDiff
|
||
json: {
|
||
...commonJson,
|
||
relation_type: undefined, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined, // 关联范围末选项
|
||
out_scope: [] // 排除选项
|
||
}
|
||
},
|
||
{
|
||
value: [9, 10], // 矩阵-单，多选
|
||
json: {
|
||
...commonJson,
|
||
relation_type: undefined, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined, // 关联范围末选项
|
||
out_scope: [] // 排除选项
|
||
}
|
||
},
|
||
{
|
||
value: [8, 11], // 矩阵-填空/打分
|
||
json: {
|
||
...commonJson,
|
||
relation_type: 0, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined, // 关联范围末选项
|
||
value: '' // 数值
|
||
}
|
||
},
|
||
{
|
||
value: [16], // 排序题
|
||
json: {
|
||
...commonJson,
|
||
relation_type: 0, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined, // 关联范围末选项
|
||
value: '' // 数值
|
||
}
|
||
},
|
||
{
|
||
value: [15], // 分类题
|
||
json: {
|
||
...commonJson,
|
||
relation_type: 0 // 关联方式
|
||
}
|
||
},
|
||
{
|
||
value: [17], // 恒定总和题
|
||
json: {
|
||
...commonJson,
|
||
relation_type: 0, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined // 关联范围末选项
|
||
}
|
||
},
|
||
{
|
||
value: [5], // 打分题
|
||
json: {
|
||
...commonJson,
|
||
relation_type: 0, // 关联方式
|
||
first_scope: undefined, // 关联范围首选项
|
||
last_scope: undefined // 关联范围末选项
|
||
}
|
||
},
|
||
{
|
||
value: [13, 14], // 图片题
|
||
json: {
|
||
...commonJson,
|
||
relation_type: undefined, // 关联方式
|
||
picture_type: undefined // 0图片 1文字 2图文
|
||
}
|
||
}
|
||
]
|
||
export default {
|
||
name: 'RelatedOption',
|
||
props: {
|
||
info: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: '关联选项'
|
||
},
|
||
type: {
|
||
// 0默认 1矩阵行 2矩阵列 3分类(当前题的type)
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
questions_type: {
|
||
type: [Number, String],
|
||
default: () => 0
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
const visible = ref(false)
|
||
const store = useStore()
|
||
const relateds = ref([])
|
||
const quesList = ref([])
|
||
const openModal = () => {
|
||
getQuesList()
|
||
relateds.value = JSON.parse(JSON.stringify(props.info.associate))
|
||
.filter((x) => x.type === props.type)
|
||
.map((x) => {
|
||
const quesInfo = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions)).find((ques) => ques.id && ques.question_index === x.question_index)
|
||
const newEle = {
|
||
...json.find((x) => x.value.includes(quesInfo.question_type)).json,
|
||
quesInfo: quesInfo
|
||
}
|
||
Object.keys(x).forEach((key) => {
|
||
newEle[key] = x[key]
|
||
})
|
||
// 分类题和图片题不处理
|
||
if (![15, 13, 14].includes(quesInfo.question_type)) {
|
||
newEle.first_scope = newEle.first_scope === 0 ? undefined : newEle.first_scope
|
||
newEle.last_scope = newEle.last_scope === 0 ? undefined : newEle.last_scope
|
||
}
|
||
return newEle
|
||
})
|
||
visible.value = true
|
||
}
|
||
/**获取问题列表，包含选择题(单，多)，矩阵(单，多，填空，打分)，排序题，分类题，恒定总和题，图片题(单，多),当前题前面的题 */
|
||
const getQuesList = () => {
|
||
debugger
|
||
quesList.value = []
|
||
const ques = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions.filter((ques) => ques.id)))
|
||
let previousList = []
|
||
for (let index = 0; index < ques.length; index++) {
|
||
const element = ques[index]
|
||
element.stem = nodeHandle(element.stem)
|
||
if (element.id === props.info.id) break
|
||
previousList.push(element)
|
||
}
|
||
//【矩阵关联】同一题内，列标签关联下拉隐掉行标签关联的问题，行标签关联下拉隐掉列标签关联的问题，不同题间的行列标签不互相影响
|
||
if ([8, 9, 10, 11].includes(props.info.question_type)) {
|
||
if (props.type === 1) {
|
||
const colAssociateSelectList = props.info.associate.filter((ass) => ass.type === 2)
|
||
previousList = previousList.filter((q) => {
|
||
const hasQues = colAssociateSelectList.find((ass) => ass.question_index === q.question_index)
|
||
return !hasQues
|
||
})
|
||
}
|
||
if (props.type === 2) {
|
||
const colAssociateSelectList = props.info.associate.filter((ass) => ass.type === 1)
|
||
previousList = previousList.filter((q) => {
|
||
const hasQues = colAssociateSelectList.find((ass) => ass.question_index === q.question_index)
|
||
return !hasQues
|
||
})
|
||
}
|
||
}
|
||
// [1, 2, 5, 8, 9, 10, 11, 15, 16, 17, 13, 14].includes(x.question_type)
|
||
// [1, 2, 5].includes(x.question_type)
|
||
// 热区题特殊处理，只能选择其他热区题
|
||
if (props.questions_type !== 0) {
|
||
console.log(props.questions_type, previousList)
|
||
quesList.value = previousList.filter((x) => x.id && [...props.questions_type.split(',').map((s) => Number.parseInt(s))].includes(x.question_type))
|
||
console.log(quesList.value, previousList)
|
||
} else {
|
||
quesList.value = previousList.filter((x) => x.id && [1, 2, 5, 8, 9, 10, 11, 17, 105].includes(x.question_type))
|
||
}
|
||
}
|
||
/**
|
||
* 问题选中回调
|
||
* */
|
||
const selectQuesChange = (item, index) => {
|
||
item.quesInfo = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions)).find((x) => x.id && x.question_index === item.question_index)
|
||
const newEle = json.find((x) => x.value.includes(item.quesInfo.question_type)).json
|
||
newEle.question_index = item.question_index
|
||
newEle.quesInfo = JSON.parse(JSON.stringify(item.quesInfo))
|
||
newEle.type = props.type
|
||
console.log(json)
|
||
relateds.value = relateds.value.map((x, relIndex) => {
|
||
if (relIndex === index) {
|
||
x = { ...newEle }
|
||
}
|
||
return x
|
||
})
|
||
}
|
||
/**
|
||
* 添加关联
|
||
* */
|
||
const addRelateHandle = (index) => {
|
||
relateds.value.splice(index + 1, 0, {
|
||
question_index: undefined,
|
||
quesInfo: {}
|
||
})
|
||
}
|
||
/**
|
||
* 删除关联
|
||
* */
|
||
const deleteRelatedHandle = (index) => {
|
||
relateds.value.splice(index, 1)
|
||
}
|
||
/**
|
||
* 下拉框筛选
|
||
*/
|
||
const filterOptionHandle = (value, option, optionList) => {
|
||
let result = false
|
||
const curOpt = optionList.find((opt) => opt.id === option.key)
|
||
if (`${curOpt.title}${curOpt.stem}`.includes(value)) {
|
||
result = true
|
||
}
|
||
return result
|
||
}
|
||
/**添加关联范围 */
|
||
const addScope = (item) => {
|
||
item.showScope = true
|
||
}
|
||
/**删除关联范围 */
|
||
const deleteScope = (item) => {
|
||
item.first_scope = undefined
|
||
item.last_scope = undefined
|
||
item.showScope = false
|
||
}
|
||
/**添加排除范围 */
|
||
const addOut = (item) => {
|
||
item.showOut = true
|
||
}
|
||
/**删除排除范围 */
|
||
const deleteOut = (item) => {
|
||
item.out_scope = []
|
||
item.showOut = false
|
||
}
|
||
/**保存关联 */
|
||
const saveRelate = () => {
|
||
let copyRelateds = JSON.parse(JSON.stringify(relateds.value))
|
||
const { hasSame, warnStr } = hasSameRelateOption(copyRelateds)
|
||
if (hasSame) {
|
||
closeRelate()
|
||
Modal.warning({
|
||
title: () => '无法操作',
|
||
content: () => warnStr
|
||
})
|
||
return
|
||
}
|
||
copyRelateds.forEach((rel) => {
|
||
rel.cite_type = rel.cite_type === undefined ? 0 : rel.cite_type
|
||
delete rel.quesInfo
|
||
delete rel.showScope
|
||
delete rel.showOut
|
||
})
|
||
copyRelateds = copyRelateds.filter((rel) => rel.question_index)
|
||
const { questionInfo, quesSaveParam, activeQuestion } = JSON.parse(JSON.stringify(store.state.common))
|
||
const filteRelate = activeQuestion.associate.filter((ass) => ass.type !== props.type)
|
||
activeQuestion.associate = filteRelate
|
||
filteRelate.push(...copyRelateds)
|
||
const copyInfo = JSON.parse(JSON.stringify(props.info))
|
||
questionInfo.questions.forEach((x) => {
|
||
if (x.id === props.info.id) {
|
||
x.associate = x.associate.filter((ass) => ass.type !== props.type)
|
||
x.associate.push(...copyRelateds)
|
||
if (x.question_type === 25 || x.question_type === 26) {
|
||
if (copyRelateds.length <= 0) {
|
||
x.options[0] = []
|
||
x.config.img_url = ''
|
||
x.config.img_height = 0
|
||
x.config.img_weight = 0
|
||
return
|
||
}
|
||
const questionMadel = questionInfo.questions.find((s) => s.question_index === copyRelateds[0].question_index)
|
||
x.options[0] = []
|
||
x.config.img_url = questionMadel.config.img_url
|
||
x.config.img_height = questionMadel.config.img_height
|
||
x.config.img_weight = questionMadel.config.img_weight
|
||
copyInfo.config = x.config
|
||
activeQuestion.config = x.config
|
||
}
|
||
}
|
||
})
|
||
store.commit('common/A_COMMON_SET_ACTIVEQUESTION', JSON.stringify(activeQuestion))
|
||
store.commit('common/A_COMMON_SET_QUESTIONINFO', JSON.stringify(questionInfo))
|
||
|
||
quesSaveParam.newLogics = questionInfo.logics.filter((logic) => logic.question_id === props.info.id)
|
||
quesSaveParam.newQuestion.push(
|
||
JSON.parse(
|
||
JSON.stringify({
|
||
...copyInfo,
|
||
associate: filteRelate
|
||
})
|
||
)
|
||
)
|
||
quesSaveParam.newSurvey.pages = questionInfo.survey.pages
|
||
saveQuesApi(quesSaveParam, store)
|
||
closeRelate()
|
||
}
|
||
/**关闭弹框 */
|
||
const closeRelate = () => {
|
||
relateds.value = []
|
||
visible.value = false
|
||
}
|
||
/**
|
||
* 判断添加的关联是否重复
|
||
* 例：一共3道题，Q2添加一个关联至Q1，Q3添加一个关联至Q2,此时是没问题的，然后给Q3再添加一个关联至Q1，此时是不允许添加的
|
||
*/
|
||
const hasSameRelateOption = (relateds) => {
|
||
const { questionInfo } = JSON.parse(JSON.stringify(store.state.common))
|
||
const relatedIndex = []
|
||
relateds.forEach((rel) => {
|
||
if (rel.question_index) {
|
||
const ques = questionInfo.questions.find((ques) => ques.question_index === rel.question_index)
|
||
const temp = {
|
||
ques,
|
||
indexs: []
|
||
}
|
||
const func = (info) => {
|
||
temp.indexs.push(info.question_index)
|
||
if (info.associate) {
|
||
info.associate.forEach((ass) => {
|
||
const tempQues = questionInfo.questions.find((ques) => ques.question_index === ass.question_index)
|
||
func(tempQues)
|
||
})
|
||
}
|
||
}
|
||
func(ques)
|
||
relatedIndex.push(temp)
|
||
}
|
||
})
|
||
let hasSame = false
|
||
let warnStr = ''
|
||
for (let indexX = 0; indexX < relatedIndex.length; indexX++) {
|
||
const element1 = relatedIndex[indexX]
|
||
for (let indexY = indexX + 1; indexY < relatedIndex.length; indexY++) {
|
||
const element2 = relatedIndex[indexY]
|
||
element1.indexs.forEach((i) => {
|
||
if (element2.indexs.includes(i)) {
|
||
hasSame = true
|
||
warnStr = `${element1.ques.title}，${element2.ques.title}之间存在重复的关联选项，不能同时关联。`
|
||
}
|
||
})
|
||
if (hasSame) break
|
||
}
|
||
if (hasSame) break
|
||
}
|
||
console.log('index', relatedIndex, warnStr)
|
||
if (!hasSame) {
|
||
for (let index = 0; index < questionInfo.questions.length; index++) {
|
||
const ques = questionInfo.questions[index]
|
||
if (ques.associate) {
|
||
if (ques.associate.find((ass) => ass.question_index === props.info.question_index)) {
|
||
for (let index = 0; index < relateds.length; index++) {
|
||
const rel = relateds[index]
|
||
if (ques.associate.find((ass) => ass.question_index === rel.question_index)) {
|
||
hasSame = true
|
||
warnStr = `${rel.quesInfo.title}，${ques.title}之间存在重复的关联选项，不能同时关联。`
|
||
}
|
||
if (hasSame) break
|
||
}
|
||
}
|
||
}
|
||
if (hasSame) break
|
||
}
|
||
}
|
||
return {
|
||
hasSame,
|
||
warnStr
|
||
}
|
||
}
|
||
return {
|
||
relateds,
|
||
quesList,
|
||
visible,
|
||
openModal,
|
||
saveRelate,
|
||
closeRelate,
|
||
addRelateHandle,
|
||
deleteRelatedHandle,
|
||
filterOptionHandle,
|
||
|
||
addScope,
|
||
deleteScope,
|
||
addOut,
|
||
deleteOut,
|
||
selectQuesChange
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.related {
|
||
display: inline-block;
|
||
&-main {
|
||
width: 100%;
|
||
padding: 0 24px;
|
||
&-content {
|
||
max-height: 496px;
|
||
min-height: 300px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding-bottom: 74px;
|
||
&-card {
|
||
margin-bottom: 12px;
|
||
&-ques {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
&-text {
|
||
width: 100px;
|
||
min-width: 100px;
|
||
height: 32px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 12px;
|
||
}
|
||
&-icon {
|
||
min-width: 48px;
|
||
}
|
||
}
|
||
&-option {
|
||
padding-left: 110px;
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
&-text {
|
||
width: 100px;
|
||
min-width: 100px;
|
||
height: 32px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.addfont {
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
color: #bfbfbf;
|
||
&:hover {
|
||
color: #434343;
|
||
}
|
||
}
|
||
.deletefont {
|
||
min-width: 48px;
|
||
margin-right: 0;
|
||
}
|
||
.custom-button {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
&-html {
|
||
display: flex;
|
||
align-items: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
max-width: 400px;
|
||
&::v-deep p {
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
:deep(.relate-html) {
|
||
overflow: hidden;
|
||
}
|
||
</style>
|