|
@@ -1,18 +1,35 @@
|
|
|
<template>
|
|
|
<div class="radio-wrap radioSelect" v-if="item">
|
|
|
- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list">
|
|
|
+ <p class="please">请尽量选择其他不适症状</p>
|
|
|
+ <div class="list" @click="handleClickShow(1)" :class="[{'setColor':!!hasStr}]">
|
|
|
+ <span>有:<i>{{hasStr?hasStr:'点击选择症状'}}</i></span>
|
|
|
+ </div>
|
|
|
+ <div class="list" @click="handleClickShow(2)" :class="[{'setColor':!!noStr}]">
|
|
|
+ <span>无:<i>{{noStr?noStr:'点击选择症状'}}</i></span>
|
|
|
+ </div>
|
|
|
+ <SymptomLis
|
|
|
+ v-if="show"
|
|
|
+ :data="SymptomLis"
|
|
|
+ :show="show"
|
|
|
+ :flg="flg"
|
|
|
+ @close="close"
|
|
|
+ @makeSure="makeSure"
|
|
|
+ ></SymptomLis>
|
|
|
+ <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="check">
|
|
|
+ <span>{{it.description||it.name}}</span>
|
|
|
+ </p> -->
|
|
|
+ <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list">
|
|
|
<img @click="handleClick(it,index,true,1)" :src="it.select==1?check:defaultPic"> <i @click="handleClick(it,index,true,1)">有</i>
|
|
|
<img @click="handleClick(it,index,true,2)" :src="it.select==2?check:defaultPic"> <i @click="handleClick(it,index,true,2)">无</i>
|
|
|
<span v-if="((it.description||it.name).indexOf('${'))==-1" :class="{'check':it.select==1||it.select==2}">{{it.description||it.name}}</span>
|
|
|
- </p>
|
|
|
+ </p> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script type="text/javascript">
|
|
|
import icon from '../images/radio-default.png'
|
|
|
import checkIcon from '../images/radio-check.png'
|
|
|
import {patt,imageUrlPrefix,concatVal} from '@utils/tools.js'
|
|
|
-import MultiLineInput from '../common/MultiLineInput.vue';
|
|
|
-import OptionInp from '../common/OptionInp.vue';
|
|
|
+import SymptomLis from '../common/SymptomLis.vue';
|
|
|
export default{
|
|
|
name:'RadioSelect',
|
|
|
data(){
|
|
@@ -21,24 +38,79 @@ import OptionInp from '../common/OptionInp.vue';
|
|
|
check:checkIcon,
|
|
|
datas:{},
|
|
|
imgUrl:imageUrlPrefix,
|
|
|
+ show:false,
|
|
|
+ SymptomLis:[],
|
|
|
+ flg:'', //是有还是无
|
|
|
+ noStr:'',
|
|
|
+ hasStr:''
|
|
|
}
|
|
|
},
|
|
|
props:['item'],
|
|
|
created(){
|
|
|
// this.datas = JSON.parse(JSON.stringify(this.item));
|
|
|
this.datas = this.item;
|
|
|
+ console.log(this.item)
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.setStr(this.datas&&this.datas.questionDetailList)
|
|
|
},
|
|
|
methods:{
|
|
|
+ setStr(lis){
|
|
|
+ let noTmp = '',hasTmp = '';
|
|
|
+ for(let i = 0;i < lis.length;i++){
|
|
|
+ if(lis[i].flg == 1&&lis[i].select){
|
|
|
+ hasTmp += (lis[i].description||lis[i].name)+','
|
|
|
+ }else if(lis[i].flg == 2&&lis[i].select){
|
|
|
+ noTmp += (lis[i].description||lis[i].name)+','
|
|
|
+ }
|
|
|
+ }
|
|
|
+ noTmp = noTmp.slice(0,noTmp.length-1)
|
|
|
+ hasTmp = hasTmp.slice(0,hasTmp.length-1)
|
|
|
+ this.noStr = noTmp
|
|
|
+ this.hasStr = hasTmp
|
|
|
+
|
|
|
+ },
|
|
|
+ makeSure(lis){
|
|
|
+ this.show = false;
|
|
|
+ this.SymptomLis=lis
|
|
|
+ this.datas.questionDetailList = lis
|
|
|
+ // let noTmp = '',hasTmp = '';
|
|
|
+ // for(let i = 0;i < lis.length;i++){
|
|
|
+ // if(lis[i].flg == 1&&lis[i].select){
|
|
|
+ // hasTmp += (lis[i].description||lis[i].name)+','
|
|
|
+ // }else if(lis[i].flg == 2&&lis[i].select){
|
|
|
+ // noTmp += (lis[i].description||lis[i].name)+','
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // noTmp = noTmp.slice(0,noTmp.length-1)
|
|
|
+ // hasTmp = hasTmp.slice(0,hasTmp.length-1)
|
|
|
+ // this.noStr = noTmp
|
|
|
+ // this.hasStr = hasTmp
|
|
|
+
|
|
|
+ this.setStr(lis)
|
|
|
+
|
|
|
+ let temp = concatVal(lis,true);
|
|
|
+ const newData = Object.assign({},this.datas,{questionDetailList:lis,value:temp.value,valueP:temp.valueP});
|
|
|
+ this.$emit("updata",newData);
|
|
|
+ },
|
|
|
+ handleClickShow(idx){
|
|
|
+ this.flg = idx
|
|
|
+ this.show = true
|
|
|
+ this.SymptomLis = this.datas&&this.datas.questionDetailList
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.show = false
|
|
|
+ },
|
|
|
handleClick(it,index,flg,isHas){
|
|
|
if(flg){
|
|
|
- document.activeElement.blur();
|
|
|
+ document.activeElement.blur();
|
|
|
document.activeElement.scrollIntoViewIfNeeded(true);
|
|
|
setTimeout(()=>{
|
|
|
document.activeElement.scrollIntoViewIfNeeded(true);
|
|
|
},300)
|
|
|
}
|
|
|
const list = this.datas;
|
|
|
- let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝?
|
|
|
+ let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝
|
|
|
for(let i=0;i<data.length; i++){
|
|
|
// data[i].select = 0
|
|
|
if(i==index){
|
|
@@ -48,7 +120,7 @@ import OptionInp from '../common/OptionInp.vue';
|
|
|
}
|
|
|
let temp = concatVal(data,true);
|
|
|
|
|
|
- const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP})
|
|
|
+ const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP});
|
|
|
this.$emit("updata",newData);
|
|
|
},
|
|
|
inpVal(val,index){//输入框失焦处理
|
|
@@ -76,25 +148,30 @@ import OptionInp from '../common/OptionInp.vue';
|
|
|
}
|
|
|
},
|
|
|
components:{
|
|
|
- MultiLineInput,
|
|
|
- OptionInp
|
|
|
+ SymptomLis
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import '../less/base.less';
|
|
|
.radio-wrap{
|
|
|
+ .setColor {
|
|
|
+ color: #4F50FF!important;
|
|
|
+ }
|
|
|
img{
|
|
|
width:100%;
|
|
|
}
|
|
|
.list{
|
|
|
color: #colors[text];
|
|
|
- margin:0 .1rem .1rem 0;
|
|
|
+ margin:0 .1rem .2rem 0;
|
|
|
padding: .12rem .1rem;
|
|
|
+ background-color: #f5f5f5;
|
|
|
white-space: nowrap;
|
|
|
-webkit-white-space: nowrap;
|
|
|
+ height: .44rem;
|
|
|
+ border-radius: 5px;
|
|
|
span {
|
|
|
- margin-left:1.2rem;
|
|
|
+ margin-left:.2rem;
|
|
|
}
|
|
|
img{
|
|
|
width: .38rem;
|
|
@@ -104,5 +181,10 @@ import OptionInp from '../common/OptionInp.vue';
|
|
|
color: #colors[theme];
|
|
|
}
|
|
|
}
|
|
|
+ .please {
|
|
|
+ padding-bottom: .15rem;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|