wangqing
4 years ago
11 changed files with 370 additions and 73 deletions
@ -0,0 +1,285 @@ |
|||
<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> |
|||
Loading…
Reference in new issue