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