多选带输入框

src/common/CheckBox.vue

@@ -3,14 +3,26 @@
     <img :src="datas.url.replace('{imageUrlPrefix}',imgUrl)" v-if="datas.url">
     <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index)">
       <img :src="it.select==1?check:defaultPic">
-      <span :class="{'check':it.select==1}">{{it.name}}</span>
+      <!-- <span :class="{'check':it.select==1}">{{it.name}}</span> -->
+      <span v-if="(it.name.indexOf('${'))==-1" :class="{'check':it.select==1}">{{it.name}}</span>
+      <MultiLineInput v-else 
+          @changeMultipVal="changeMultipVal($event,index)" 
+          @handleInp="inpVal($event,index)"
+          :msg="it.name" 
+          :part="it"
+          :value="it.value" 
+          :border="false" 
+          :inline="true" 
+          :select="it.select==1" 
+          />
     </p>
   </div>
 </template>
 <script type="text/javascript">
 import tools from '@utils/tools.js';
-import icon from '../images/check-default.png'
-import checkIcon from '../images/check.png'
+import icon from '../images/check-default.png';
+import checkIcon from '../images/check.png';
+import MultiLineInput from '../common/MultiLineInput.vue';
   export default{
     name:'CheckBox',
     data(){
@@ -42,16 +54,33 @@ import checkIcon from '../images/check.png'
         value = this.checkTxt.filter(item=>item).join('，');
         const newData = Object.assign({},this.datas,{questionDetailList:data},{value:value})
         this.$emit("updata",newData);
-      }
+      },
+      inpVal(val,index){//输入框失焦处理
+        let valueStr = this.datas.value;
+        let patt = /\$\{[^\]]+\}/g;
+        let newVal =  val;
+        const str = valueStr.replace(patt,newVal);
+        this.datas.value = str;
+        // 输入框回读
+        let detailList = this.datas.questionDetailList;
+        let currItem = detailList[index];
+        currItem.value = val;
+        this.$emit("updata",this.datas);
+      },
+      changeMultipVal(val){
+        
+      },
     },
     watch:{
       item:{
         handler(newVal,oldVal){
           this.datas = JSON.parse(JSON.stringify(newVal));
-          // this.$forceUpdate();
         },
         deep:true
       }
+    },
+    components:{
+      MultiLineInput
     }
   }
 </script>
@@ -65,6 +94,7 @@ import checkIcon from '../images/check.png'
       margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
       display: inline-block;
+      white-space: nowrap;
       img{
         width: .38rem;
         vertical-align: middle;

src/common/Label.vue

@@ -25,15 +25,13 @@ import Toast from '../common/Toast.vue';
     },
     props:['item','moduleType','ppId'],
     created(){
-      this.datas = JSON.parse(JSON.stringify(this.item));
+      this.datas = this.item;
     },
     components:{
       Toast
     },
     methods:{
       handleClick(it,index){
-        // store更新数据
-        // this.$emit('updateOrig');
         const newItem = Object.assign({},it,{select:1});
         const origMapping = this.item.questionMapping;
         let mapping = this.datas.questionMapping;
@@ -43,7 +41,7 @@ import Toast from '../common/Toast.vue';
           }
         }
         // 存值到store
-        this.$store.commit('setOrigin',{type:this.moduleType,data:newItem,pId:this.datas.id});
+        this.$store.commit('setDatas',{type:this.moduleType,data:newItem,pId:this.datas.id,ppId:this.ppId});
         this.$store.commit('setText',{type:this.moduleType,text:it.name,pId:it.id});
         if(it.questionMapping&&it.questionMapping.length>0){//有明细
           this.$emit("setDetail",{detail:it,ppId:this.ppId})
@@ -56,15 +54,32 @@ import Toast from '../common/Toast.vue';
       },
       comfirnDel(){
         const temp = this.tempItem;
-        const newItem = Object.assign({},temp,{select:0});
-        const origMapping = this.item.questionMapping;
-        let mapping = this.datas.questionMapping;
-        for(let i in origMapping){
-          if(origMapping[i].id==temp.id){
-            mapping.splice(i,1,newItem)
+        // 从store中取origin的值
+        let origin,newItem;
+        if(this.moduleType==2){
+          origin = this.$store.state.diagnose.origin
+        }else if(this.moduleType == 3){
+          origin = this.$store.state.others.origin
+        }
+        if(origin){
+          for(let i in origin){
+            if(origin[i].id==this.ppId){
+              let origItem = origin[i].questionMapping;
+              for(let j in origItem){
+                if(origItem[j].id==temp.id){
+                  newItem = origItem[j];
+                }
+              }
+            }
+          }
+          let mapping = this.datas.questionMapping;
+          for(let n in mapping){
+            if(mapping[n].id==temp.id){
+              mapping.splice(n,1,newItem)
+            }
           }
         }
-        this.$store.commit('setOrigin',{type:this.moduleType,data:newItem,pId:this.datas.id});
+        this.$store.commit('setDatas',{type:this.moduleType,data:newItem,pId:this.datas.id,ppId:this.ppId});
         this.$store.commit('delText',{type:this.moduleType,pId:temp.id});
         this.cancelDel();
       },

src/common/Radio.vue

@@ -55,17 +55,18 @@ import MultiLineInput from '../common/MultiLineInput.vue';
       inpVal(val,index){//输入框失焦处理
         let valueStr = this.datas.value;
         let patt = /\$\{[^\]]+\}/g;
-        let newVal = '{' + val + '}';//修改时替换值用
+        // let newVal = '{' + val + '}';//修改时替换值用
+        let newVal =  val;//修改时替换值用
         const str = valueStr.replace(patt,newVal);
         this.datas.value = str;
         // 输入框回读
         let detailList = this.datas.questionDetailList;
         let currItem = detailList[index];
-        currItem.value = val; //console.log('单选：',val,valueStr,str,this.datas)
+        currItem.value = val; 
         this.$emit("updata",this.datas);
       },
       changeMultipVal(val){
-        // console.log('输入：',this.datas,val)
+        
       },
     },
     watch:{

src/components/Detail.vue

@@ -50,12 +50,6 @@ import ComTextArea from '../common/ComTextArea.vue';
       Input,
       ComTextArea
     },
-    /*beforeUpdate(){
-      console.log(3333,this.checkDatas)
-    },
-    updated(){
-      console.log(777)
-    },*/
     methods:{
       updataData(data){
         const origMapping = this.datas.questionMapping;
@@ -68,6 +62,7 @@ import ComTextArea from '../common/ComTextArea.vue';
       },
       saveData(){//存值
         this.finished = true;
+        this.checkDatas = Object.assign({},this.checkDatas,{select:1});
         const datas = this.checkDatas.questionMapping;
         let text = "";
         for(let i in datas){
@@ -75,10 +70,16 @@ import ComTextArea from '../common/ComTextArea.vue';
             text += datas[i].value+'，';
           }
         }
-        // 替换占位符 {}
-        let msg = this.checkDatas.name+ '，' + text.substring(0,text.length-1);
+        // let msg = this.checkDatas.name+ '，' + text.substring(0,text.length-1);
+        let msg = this.checkDatas.name+ '，' + text;
+        let newMsg = "";
+        if(msg[msg.length-1] == '，'){
+          newMsg = msg.substring(0,msg.length-1);
+        }else{
+          newMsg = msg
+        }
         this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
-        this.$store.commit('setText',{text:msg.replace('{','').replace('}',''),pId:this.checkDatas.id,type:this.type,flag:true});
+        this.$store.commit('setText',{text:newMsg,pId:this.checkDatas.id,type:this.type,flag:true});
       },
       clearData(){//清空
         const datas = this.checkDatas.questionMapping;
@@ -88,6 +89,9 @@ import ComTextArea from '../common/ComTextArea.vue';
           if(detaiList.length>0){
             for(let k in detaiList){
               detaiList[k].select = 0;
+              if(detaiList[k].value){
+                detaiList[k].value = "";
+              }
             }
           }
         }

src/components/DetailBox.vue

@@ -123,6 +123,6 @@
   }
   @keyframes wave {
     0%   {height:0 ;}
-    100% {height: 95%;}
+    100% {height: 100%;}
   } 
 </style>

src/components/DiagTreat.vue

@@ -10,8 +10,7 @@
               :indx="i" 
               :ppId="it.id" 
               :moduleType="datas.type" 
-              @setDetail="setDetail"
-              @updateOrig="updateOrig"/>
+              @setDetail="setDetail"/>
       <UploadImg v-if="it.controlType==4" 
             :item="it" 
             :moduleType="datas.type"
@@ -35,25 +34,21 @@
               v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
               @pComplete="complete"/>
     </div>
-    <!-- <Toast :message="delText" 
-          :show="showToast"
-          @comfirn="comfirnDel" 
-          @cancel="cancelDel"/> -->
   </div>
 </template>
 <script type="text/javascript">
   import UploadImg from '../common/UploadImg.vue';
   import Label from '../common/Label.vue';
   import DetailBox from './DetailBox.vue';
-  import Toast from '../common/Toast.vue';
   export default {
     name:'DiagTreat',
     data(){
-      let {origin,text} = this.$store.state.diagnose;
+      let {origin,text,datas} = this.$store.state.diagnose;
       return{
         msg:"诊疗情况",
         imgs:this.$store.state.diagnose.imgSrc,
-        dtoList:origin, //模板数据
+        // dtoList:origin, //模板数据
+        dtoList:datas, //模板数据
         labelDetail:{}, //标签明细
         checkText:text, //选中的文字-Arr
         show:false,
@@ -61,19 +56,12 @@
       }
     },
     props:['datas','preName','nextName'],
-    created(){
-      /*let dataArr = this.datas&&this.datas.moduleDetailDTOList;
-      if(dataArr){
-        this.dtoList = JSON.parse(JSON.stringify(dataArr));
-      }*/
-    },
     methods:{
       beBack(){
         this.$emit('back');
       },
       toNext(){
         this.$emit('next');
-        // console.log("模板数据:",this.datas,"诊疗数据:",this.dtoList)
       },
       setDetail(obj){
         this.labelDetail = obj.detail;
@@ -91,10 +79,6 @@
         this.labelDetail = {};
         this.ppId = null;
       },
-      updateOrig(){
-        let origin = this.$store.state.diagnose.origin;
-        // this.dtoList = origin;console.log("更新：",origin)
-      },
       getText(){
         let textArr = this.checkText;
         let msg = "";
@@ -109,14 +93,13 @@
       Label,
       DetailBox
     },
-    watch:{
+    /*watch:{
       dtoList:{
         handler(newVal,oldVal){
-          // console.log("诊疗数据更新:",newVal,oldVal); 
         },
         deep:true
       }
-    },
+    },*/
   }
 </script>
 <style lang="less" scoped>

src/components/Others.vue

@@ -9,14 +9,13 @@
               :item="it"
               :ppId="it.id" 
               :moduleType="datas.type" 
-              @setDetail="setDetail"
-              @updateOrig="updateOrig"/>
+              @setDetail="setDetail"/>
         <!-- 输入框 -->
         <Input v-if="it.controlType==6 || it.controlType==7"
             :item="it"
             :key="it.id"
             :uFlag="uFlag"
-            @updata="updataData"/>
+            @updata="updataData($event,it.id)"/>
     </div>
     <div class="result" v-if="checkText.length>0">
       <p class="title">其他病史</p>
@@ -46,11 +45,12 @@
   export default {
     name:'Others',
     data(){
-      let {origin,text} = this.$store.state.others;
+      let {origin,datas,text} = this.$store.state.others;
       return{
         msg:"其他情况",
         // imgs:this.$store.state.others.imgSrc,
-        dtoList:origin, //模板数据
+        // dtoList:origin, //模板数据
+        dtoList:datas, //模板数据
         labelDetail:{}, //标签明细
         checkText:text, //选中的文字
         ppId:null,
@@ -66,7 +66,6 @@
       },
       toNext(){
         this.$emit('next');
-        // console.log("模板数据:",this.datas,"诊疗数据:",this.dtoList)
       },
       setDetail(obj){
         this.labelDetail = obj.detail;
@@ -84,18 +83,15 @@
         this.labelDetail = {};
         this.ppId = null;
       },
-      updateOrig(){
-        let origin = this.$store.state.diagnose.origin;
-      },
-      updataData(data){//输入框存值
-        console.log("输入框的值：",data,this.dtoList)
+      updataData(data,id){//输入框存值
         let list = this.dtoList;
         for(let i in list){
           if(list[i].id==data.id){
             list.splice(i,1,data)
           }
         }
-        this.$store.commit('setOrigin',{type:'3',data:data,pId:data.id});
+        // this.$store.commit('setOrigin',{type:'3',data:data,pId:data.id});
+        this.$store.commit('setDatas',{type:'3',data:data,pId:data.id,ppId:id});
         this.$store.commit('setText',{type:'3',text:data.value,pId:data.id}); 
       },
       getText(){
@@ -113,14 +109,13 @@
       DetailBox,
       Input
     },
-    watch:{
+    /*watch:{
       dtoList:{
         handler(newVal,oldVal){
-          // console.log("诊疗数据更新:",newVal,oldVal); 
         },
         deep:true
       }
-    },
+    },*/
   }
 </script>
 <style lang="less" scoped>

src/store.js

@@ -21,14 +21,14 @@ const store = new Vuex.Store({
     },
     diagnose:{ //诊疗
       origin:[], //模板数据
-      datas:{},
+      datas:[],
       text:[],
       imgFile:[],
       imgSrc:{},
     },
     others:{ //其他情况
       origin:[], //模板数据
-      datas:{},
+      datas:[],
       text:[],
       imgFile:[],
       imgSrc:{},
@@ -48,14 +48,14 @@ const store = new Vuex.Store({
       }
       state.diagnose={ //诊疗
         origin:[], //模板数据
-        datas:{},
+        datas:[],
         text:[],
         imgFile:[],
         imgSrc:{},
       }
       state.others={ //其他情况
         origin:[], //模板数据
-        datas:{},
+        datas:[],
         text:[],
         imgFile:[],
         imgSrc:{},
@@ -81,8 +81,10 @@ const store = new Vuex.Store({
       for(let k in param){
         if(param[k].type == 2){
           state.diagnose.origin = JSON.parse(JSON.stringify(param[k].moduleDetailDTOList))
+          state.diagnose.datas = JSON.parse(JSON.stringify(param[k].moduleDetailDTOList))
         }else if(param[k].type == 3){
           state.others.origin = JSON.parse(JSON.stringify(param[k].moduleDetailDTOList))
+          state.others.datas = JSON.parse(JSON.stringify(param[k].moduleDetailDTOList))
         }
       }
     },
@@ -128,7 +130,7 @@ const store = new Vuex.Store({
     },
     setDatas(state,param){
       // ppId--每一道题的id；pId--每个选项的id
-      const type = parseInt(param.type);//console.log("存值：",param)
+      const type = parseInt(param.type);
       const data = param.data;
       const ppId = param.ppId;
       switch(type){
@@ -136,20 +138,23 @@ const store = new Vuex.Store({
           state.symptom.datas = Object.assign({},state.symptom.datas,{[param.pId]:data});
           break;
         case 2: //诊疗情况
-          let diagData = state.diagnose.origin;
+          // let diagData = state.diagnose.origin;
+          let diagData = state.diagnose.datas;
           for(let i in diagData){
             if(diagData[i].id == ppId){
               let questionMapping = diagData[i].questionMapping;
               for(let k in questionMapping){
                 if(questionMapping[k].id == data.id){
-                  questionMapping[k].questionMapping = data.questionMapping;
+                  // questionMapping[k].questionMapping = data.questionMapping;
+                  questionMapping.splice(k,1,data);
                 }
               }
             }
           }
           break;
         case 3:
-          let otherData = state.others.origin;
+          // let otherData = state.others.origin;
+          let otherData = state.others.datas;
           for(let i in otherData){
             if(otherData[i].id == ppId){
               let questionMapping = otherData[i].questionMapping;