You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
11 KiB
286 lines
11 KiB
4 years ago
|
<template>
|
||
|
|
<div class="project-logic-container">
|
||
|
|
<el-scrollbar style="height: 90vh;">
|
||
|
|
<el-row type="flex" style="width: 230px" justify="center" align="middle">
|
||
|
|
<el-col :span="12">
|
||
|
|
<p class="logic_title">显示逻辑</p>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-tooltip popper-class="question-popper" placement="top">
|
||
|
|
<div slot="content">符合某项条件，则显示某道题<br/>点击查看帮助</div>
|
||
|
|
<i class="el-icon-question"></i>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<div class="show-logic-container">
|
||
|
|
<div v-if="!logicList.length">
|
||
|
|
<el-row>
|
||
|
|
<el-col :offset="10">
|
||
|
|
<el-button type="text" @click="addLogicHandle">
|
||
|
|
<i class="el-icon-circle-plus-outline" style="font-size: 20px"></i>
|
||
|
|
<span style="font-size: 18px">添加逻辑</span>
|
||
|
|
</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="12">
|
||
|
|
<p style="font-size: 14px;color: #aaa">共 {{ logicList.length + 1 }}. 条显示逻辑</p>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6" :offset="6">
|
||
|
|
<el-button type="primary" size="mini" @click="addLogicHandle">
|
||
|
|
<i class="el-icon-plus"></i>
|
||
|
|
<span style="font-size: 18px">添加逻辑</span>
|
||
|
|
</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-divider/>
|
||
|
|
<div v-for="(logicItem,index) in logicList"
|
||
|
|
:key="index">
|
||
|
|
<el-row type="flex" align="middle" justify="center">
|
||
|
|
<el-col :offset="1" :span="6">
|
||
|
|
<span style="margin-right: 8px">{{ index + 1 }}.</span>
|
||
|
|
<el-select
|
||
|
|
:disabled="!!logicItem.showFormItemId"
|
||
|
|
v-model="logicItem.showFormItemId" placeholder="请选择问题">
|
||
|
|
<el-option
|
||
|
|
v-for="item in getProjectItemList() "
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.id">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="2">
|
||
|
|
<span>符合以下</span>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="4">
|
||
|
|
<el-select v-model="logicItem.showExpression" placeholder="请选择">
|
||
|
|
<el-option
|
||
|
|
v-for="item in questionOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :offset="1" :span="10">
|
||
|
|
<span>条件时显示此问题：</span>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row
|
||
|
|
v-for="(cItem,cIndex) in logicItem.conditionList"
|
||
|
|
:key="cIndex"
|
||
|
|
:gutter="20"
|
||
|
|
style="margin-top: 5px" type="flex" align="middle" justify="center">
|
||
|
|
<el-col :offset="1" :span="6">
|
||
|
|
<el-select v-model="cItem.formItemId" placeholder="请选择题目">
|
||
|
|
<el-option
|
||
|
|
v-for="item in getConditionProjectItemList(logicItem)"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.id">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="5">
|
||
|
|
<el-select v-model="cItem.expression" placeholder="请选择条件">
|
||
|
|
<el-option
|
||
|
|
v-for="item in conditionOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-select v-model="cItem.optionValue" placeholder="请选择选项">
|
||
|
|
<el-option
|
||
|
|
v-for="item in getFormItemOptions(cItem.formItemId)"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="9">
|
||
|
|
<el-button type="text" @click="addConditionHandle(logicItem)">
|
||
|
|
<i class="el-icon-circle-plus-outline"
|
||
|
|
style="font-size: 24px"/>
|
||
|
|
</el-button>
|
||
|
|
<el-button type="text"
|
||
|
|
style="color: #ff4949"
|
||
|
|
@click="removeConditionHandle(logicItem,index,cIndex)">
|
||
|
|
<i class="el-icon-remove-outline"
|
||
|
|
style="font-size: 24px"/>
|
||
|
|
</el-button>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-divider/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import _ from 'lodash'
|
||
|
|
import {jsonSimpleClone} from '@/utils/index'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ProjectLogic',
|
||
|
|
components: {},
|
||
|
|
props: {
|
||
|
|
projectKey: ''
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.queryProjectItems()
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//默认逻辑项
|
||
|
|
defaultLogicItem: {
|
||
|
|
showFormItemId: null,
|
||
|
|
showExpression: 'all',
|
||
|
|
conditionList: [
|
||
|
|
{
|
||
|
|
formItemId: null,
|
||
|
|
expression: null,
|
||
|
|
optionValue: null
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
conditionOptions: [{
|
||
|
|
value: 'checked',
|
||
|
|
label: '选中'
|
||
|
|
}, {
|
||
|
|
value: 'unchecked',
|
||
|
|
label: '未选中'
|
||
|
|
}],
|
||
|
|
questionOptions: [{
|
||
|
|
value: 'all',
|
||
|
|
label: '全部'
|
||
|
|
}, {
|
||
|
|
value: 'any',
|
||
|
|
label: '任意'
|
||
|
|
}],
|
||
|
|
allProjectItemList: [],
|
||
|
|
logicList: []
|
||
|
|
}
|
||
|
|
}, methods: {
|
||
|
|
addConditionHandle(logicItem) {
|
||
|
|
logicItem.conditionList.push({})
|
||
|
|
},
|
||
|
|
removeConditionHandle(logicItem, logicIndex, index) {
|
||
|
|
logicItem.conditionList.splice(index, 1)
|
||
|
|
if (logicItem.conditionList.length == 0) {
|
||
|
|
this.logicList.splice(logicIndex, 1)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
addLogicHandle() {
|
||
|
|
this.logicList.push(jsonSimpleClone(this.defaultLogicItem))
|
||
|
|
},
|
||
|
|
getConditionProjectItemList(logicItem) {
|
||
|
|
let showFormItemId = logicItem.showFormItemId
|
||
|
|
if (!showFormItemId) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
//控制显示的条件只能使用在显示问题的前面
|
||
|
|
let conditionProjectItemList = jsonSimpleClone(this.allProjectItemList)
|
||
|
|
let index = conditionProjectItemList.findIndex(item => item.id == showFormItemId)
|
||
|
|
conditionProjectItemList = _.slice(conditionProjectItemList, 0, index)
|
||
|
|
conditionProjectItemList = conditionProjectItemList.filter((item) => {
|
||
|
|
return ['RADIO'].includes(item.type)
|
||
|
|
})
|
||
|
|
return conditionProjectItemList
|
||
|
|
},
|
||
|
|
getProjectItemList() {
|
||
|
|
//每个问题只能有一个逻辑设置项 已经设置不允许选择
|
||
|
|
let selectedFormItemList = this.logicList.map(item => item.showFormItemId)
|
||
|
|
let projectItemList = jsonSimpleClone(this.allProjectItemList)
|
||
|
|
projectItemList.shift()
|
||
|
|
return projectItemList.filter((item) => {
|
||
|
|
return !selectedFormItemList.includes(item.id)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getFormItemOptions(formItemId) {
|
||
|
|
let formItem = this.allProjectItemList.find(item => item.id == formItemId)
|
||
|
|
if (formItem) {
|
||
|
|
return formItem.expand.options
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
},
|
||
|
|
queryProjectItems() {
|
||
|
|
this.$api.get(`/user/project/item/list`, {params: {key: this.projectKey}}).then(res => {
|
||
|
|
this.allProjectItemList = res.data
|
||
|
|
// //可以控制被隐藏的问题 除了第一个问题 都可以被隐藏
|
||
|
|
// let projectItemList = res.data
|
||
|
|
// projectItemList.shift()
|
||
|
|
// this.projectItemList = projectItemList
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.project-logic-container {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0;
|
||
|
|
background-color: #F7F7F7;
|
||
|
|
min-height: 84vh;
|
||
|
|
min-width: 80vw;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-logic-container .logic_title {
|
||
|
|
font-size: 18px;
|
||
|
|
height: 45px;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #484848;
|
||
|
|
text-indent: 20px;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-icon-question {
|
||
|
|
font-size: 23px;
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
text-indent: 20px;
|
||
|
|
padding-top: 23px;
|
||
|
|
color: #D8D8D8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.show-logic-container {
|
||
|
|
padding: 10px;
|
||
|
|
min-width: 950px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.question-popper.el-tooltip__popper[x-placement^="top"] .popper__arrow {
|
||
|
|
/*border-top-color: #205bb5 !important;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-popper.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
|
||
|
|
/*border-top-color: #205bb5 !important;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-popper {
|
||
|
|
padding: 10px;
|
||
|
|
color: #000000 !important;
|
||
|
|
border-color: #205bb5 !important;
|
||
|
|
background: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|