多选带输入及互斥功能完成

build/webpack.dev.conf.js

@@ -33,8 +33,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
     // host: HOST || config.dev.host,
-    // host: '192.168.3.6'/,
-    host: '192.168.3.126',
+    host: '192.168.3.6',
+    // host: '192.168.3.126',
     port: PORT || config.dev.port,
     open: config.dev.autoOpenBrowser,
     overlay: config.dev.errorOverlay

src/common/CheckBox.vue

@@ -4,13 +4,11 @@
     <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 v-if="(it.name.indexOf('${'))==-1" :class="{'check':it.select==1}">{{it.name}}</span>
+      <span v-if="(it.name.indexOf('${'))==-1" :class="[{'check':it.select==1},{'exclu':exclusion !==999 && it.exclusion !== exclusion}]">{{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" 
@@ -31,28 +29,53 @@ import MultiLineInput from '../common/MultiLineInput.vue';
         defaultPic:icon,
         check:checkIcon,
         datas:{},
-        checkTxt:[]
+        exclusion:999 //互斥
       }
     },
     props:['item'],
     created(){
       // this.datas = JSON.parse(JSON.stringify(this.item));
       this.datas = this.item;
+      this.resetExc();
     },
     methods:{
       handleClick(it,index){
         const list = this.datas;
         let data = list.questionDetailList&&list.questionDetailList.slice(0);
-        let value = "";
+        // 处理互斥
+        const excluArr = data.filter(it=>it.exclusion==1);
+        const filArr = data.filter(it=>it.select==1);
+        if(excluArr.length>0){//有互斥
+          if(filArr.length>0){//有选中
+            if(it.exclusion !== filArr[0].exclusion){
+              return
+            }
+          }
+          this.exclusion = it.exclusion;  
+        }
+        // 处理选中状态
         if(data[index].select){
           data[index].select = 0;
-          this.checkTxt.splice(index,1);
         }else{
           data[index].select = 1;
-          this.checkTxt[index] = data[index].name;
+          this.exclusion = it.exclusion;
+        }
+        // 处理取消-互斥
+        const filArr1 = data.filter(it=>it.select==1);
+        if(excluArr.length>0){//有互斥
+          if(filArr1.length==0){//无选中
+            this.exclusion = 999;
+          }else{
+            this.exclusion = filArr1[0].exclusion;
+          }
+        }
+        let value = "";
+        for(let k in data){
+          if(data[k].select==1){
+            value += data[k].name + '，'
+          }
         }
-        value = this.checkTxt.filter(item=>item).join('，');
-        const newData = Object.assign({},this.datas,{questionDetailList:data},{value:value})
+        const newData = Object.assign({},this.datas,{questionDetailList:data},{value:value?value.substring(0,value.length-1):''})
         this.$emit("updata",newData);
       },
       inpVal(val,index){//输入框失焦处理
@@ -67,14 +90,22 @@ import MultiLineInput from '../common/MultiLineInput.vue';
         currItem.value = val;
         this.$emit("updata",this.datas);
       },
-      changeMultipVal(val){
-        
-      },
+      resetExc(){
+        // 回读互斥项标识
+        const arr = this.datas.questionDetailList;
+        const filArr = arr.filter(it=>it.select==1);
+        if(filArr.length > 0){
+          this.exclusion = filArr[0].exclusion;
+        }else{
+          this.exclusion = 999;
+        }
+      }
     },
     watch:{
       item:{
         handler(newVal,oldVal){
           this.datas = JSON.parse(JSON.stringify(newVal));
+          this.resetExc();
         },
         deep:true
       }
@@ -103,5 +134,8 @@ import MultiLineInput from '../common/MultiLineInput.vue';
     .check{
       color: #4F50FF;
     }
+    .exclu{
+      color:#e6e7e9;
+    }
   }
 </style>

src/common/ComTextArea.vue

@@ -23,9 +23,6 @@ export default {
     item:{
       type:Object,
       require: true
-    },
-    uFlag:{
-      type:Boolean
     }
   },
   data() {
@@ -44,8 +41,11 @@ export default {
     }
   },
   watch:{
-    uFlag(newVal,oldVal){//清空时更新数据
-      this.txt = this.item.value;
+    item:{//清空时更新数据
+      handler(newVal,oldVal){
+        this.txt = newVal.value;
+      },
+      deep:true
     }
   }
 }

src/common/Input.vue

@@ -17,7 +17,7 @@
         borColor:false
       }
     },
-    props:['item','uFlag'],
+    props:['item'],
     methods:{
       changeVal(){
         this.borColor = true;
@@ -29,8 +29,11 @@
       }
     },
     watch:{
-      uFlag(newVal,oldVal){
-        this.val = this.item.value;
+      item:{
+        handler(newVal,oldVal){
+          this.val = newVal.value;
+        },
+        deep:true
       }
     }
   }

src/common/Label.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="label-wrap" v-if="item">
-    <span v-for="(it,index) in datas.questionMapping" :key="it.id" :class="['symp',{'check':it.select==1}]" @click="handleClick(it,index)">
+    <span v-for="(it,index) in datas.questionMapping" :key="it.id" :class="['symp',{'check':it.select==1},{'exclu':exclusion !==999 && it.exclusionType !== exclusion}]" @click="handleClick(it,index)">
       <i>{{it.name}}</i>
       <i v-if="it.select==1" @click="deletSymp($event,it,index)"><img src="../images/delete.png" alt=""></i>
     </span>
@@ -20,18 +20,36 @@ import Toast from '../common/Toast.vue';
         checkTxt:[],
         showToast:false,
         delText:"是否取消当前选中内容？",
-        tempItem:{}
+        tempItem:{},
+        exclusion:999 //互斥
       }
     },
     props:['item','moduleType','ppId'],
     created(){
       this.datas = this.item;
+      // 回读互斥项标识
+      const arr = this.datas.questionMapping;
+      const filArr = arr.filter(it=>it.select==1);
+      if(filArr.length > 0){
+        this.exclusion = filArr[0].exclusionType;
+      }
     },
     components:{
       Toast
     },
     methods:{
       handleClick(it,index){
+        const arr = this.datas.questionMapping;
+        const excluArr = arr.filter(it=>it.exclusionType==1);
+        const filArr = arr.filter(it=>it.select==1);
+        if(excluArr.length>0){//有互斥
+          if(filArr.length>0){//有选中
+            if(it.exclusionType !== filArr[0].exclusionType){
+              return
+            }
+          }
+          this.exclusion = it.exclusionType;
+        }
         const newItem = Object.assign({},it,{select:1});
         const origMapping = this.item.questionMapping;
         let mapping = this.datas.questionMapping;
@@ -79,6 +97,13 @@ import Toast from '../common/Toast.vue';
             }
           }
         }
+        // 是否解除互斥
+        const arr = this.datas.questionMapping;
+        const filArr = arr.filter(it=>it.select==1);
+        if(filArr.length==0){
+          this.exclusion = 999;
+        }
+        //存值
         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();
@@ -122,6 +147,9 @@ import Toast from '../common/Toast.vue';
       box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
       padding-right: 0.57rem;
     }
+    .exclu{
+      background:#f0f1f5;
+    }
   }
   
 </style>

src/common/MultiLineInput.vue

@@ -34,16 +34,11 @@ export default {
       default:false,
       type:Boolean
     },
-    value:{ //回读的值
-      default:'',
-      type:String
-    }
   },
   data(){
     return {
       content:{},
       txt:this.part.value || '', //回读用
-      val:this.value
     }
   },
   mounted(){
@@ -51,14 +46,22 @@ export default {
   },
   methods:{
     changeVal(){
-      this.$emit('changeMultipVal',this.txt)
+      // this.$emit('changeMultipVal',this.txt)
     },
     blur(){
       const newData = Object.assign({},this.part,{value:this.txt,controlType:3});
       this.$emit("updata",newData);
       this.$emit('handleInp',this.txt);
     }
-  }
+  },
+  watch:{
+      part:{//清空时更新
+        handler(newVal,oldVal){
+          this.txt = newVal.value;
+        },
+        deep:true
+      }
+    },
 }
 </script>
 <style lang="less" scoped>

src/common/Radio.vue

@@ -6,11 +6,9 @@
       <!-- <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" 
+          :part="it" 
           :border="false" 
           :inline="true" 
           :select="it.select==1" 
@@ -65,9 +63,6 @@ import MultiLineInput from '../common/MultiLineInput.vue';
         currItem.value = val; 
         this.$emit("updata",this.datas);
       },
-      changeMultipVal(val){
-        
-      },
     },
     watch:{
       item:{

src/components/AddContent.vue

@@ -21,7 +21,6 @@
           <Input v-if="item.controlType==6 || item.controlType==7"
             :item="item"
             :key="item.id"
-            :uFlag="uFlag"
             @updata="updataData"/>
           <template
             v-if="item.controlType == 3"
@@ -32,7 +31,6 @@
               :msg="part.name"
               :part="part"
               @updata="updataData($event,index,item)"
-              @changeMultipVal="changeMultipVal($event,idx)"
             ></MultiLineInput>
           </template>
         </li>
@@ -62,7 +60,6 @@ export default {
   data() {
     return {
       dataTrd: [],
-      uFlag:false,  //输入框触发更新
       val: ''
     }
   },
@@ -348,9 +345,6 @@ export default {
       // console.log(value,idx)
       this.val = value
     },
-    changeMultipVal(value, idx) {
-      // console.log(value, idx)
-    },
     next(){
       this.$store.commit('setText',{data:this.dataTrd,type:4});
       this.$emit('next','preview')
@@ -369,7 +363,7 @@ export default {
       if(data.controlType == 3){//多行输入，多了一层需单独处理
         let tmpLis = item.questionDetailList
         tmpLis.splice(idx,1,data)
-        console.log(this.dataTrd,7878)
+        // console.log(this.dataTrd,7878)
         // this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
         // this.$store.commit('setText',{text:msg,pId:this.checkDatas.id,type:this.type,flag:true});
         return;

src/components/Detail.vue

@@ -14,13 +14,11 @@
       <!-- 文本域 -->
       <ComTextArea v-if="item.controlType == 5"
             :item="item"
-            :uFlag="uFlag"
             @updata="updataData"/>
       <!-- 输入框 -->
       <Input v-if="item.controlType==6 || item.controlType==7"
             :item="item"
             :key="item.id"
-            :uFlag="uFlag"
             @updata="updataData"/>
     </div>
   </div>
@@ -36,7 +34,6 @@ import ComTextArea from '../common/ComTextArea.vue';
     data(){
       return{
         checkDatas:{},
-        uFlag:false,  //输入框触发更新
         finished:false
       }
     },
@@ -78,7 +75,9 @@ import ComTextArea from '../common/ComTextArea.vue';
         }else{
           newMsg = msg
         }
+
         this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
+        // flag是区分点开已选症状 未点完成
         this.$store.commit('setText',{text:newMsg,pId:this.checkDatas.id,type:this.type,flag:true});
       },
       clearData(){//清空
@@ -99,7 +98,6 @@ import ComTextArea from '../common/ComTextArea.vue';
         let msg = this.checkDatas.name;
         this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
         this.$store.commit('setText',{text:msg,pId:this.checkDatas.id,type:this.type,flag:true});
-        this.uFlag = !this.uFlag;
       }
     },
   }

src/components/Others.vue

@@ -14,7 +14,6 @@
         <Input v-if="it.controlType==6 || it.controlType==7"
             :item="it"
             :key="it.id"
-            :uFlag="uFlag"
             @updata="updataData($event,it.id)"/>
     </div>
     <div class="result" v-if="checkText.length>0">
@@ -55,7 +54,6 @@
         checkText:text, //选中的文字
         ppId:null,
         show:false,
-        uFlag:false
       }
     },
     props:['datas','preName','nextName'],
@@ -90,15 +88,18 @@
             list.splice(i,1,data)
           }
         }
+        
         // 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}); 
+        this.$store.commit('setText',{type:'3',text:data.value,pId:data.id,flag:true}); 
       },
       getText(){
         let textArr = this.checkText;
         let msg = "";
         for(let k in textArr){
-          msg += textArr[k].text + '；'
+          if(textArr[k].text){
+            msg += textArr[k].text + '；'
+          }          
         }
         return msg;
       }
@@ -112,6 +113,7 @@
     /*watch:{
       dtoList:{
         handler(newVal,oldVal){
+          console.log("其他史数据更新：",newVal,this.$store.state.others.text)
         },
         deep:true
       }

src/components/Preview.vue

@@ -20,22 +20,22 @@
         <li v-if="symptom.choose.length>0">
           <h4><i :style="{'background': '#FF9A9A'}"></i> 主诉：</h4>
           <p>
-            <span v-for="(item,idx) in symptom.choose" :key="item.name">{{item.name+(idx == symptom.choose.length-1?'':'、')}}</span>
+            <span v-for="(item,idx) in symptom.choose" :key="item.name+idx">{{item.name+(idx == symptom.choose.length-1?'':'、')}}</span>
           </p>
         </li>
         <li v-if="diagnose.text.length>0">
           <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
           <p>
-            <span v-for="(item,idx) in symptom.text" :key="item.text">{{item.text+(idx == symptom.choose.length-1?'。':';')}}</span>
+            <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.text+(idx == symptom.choose.length-1?'。':';')}}</span>
           </p>
           <p>
-            <span v-for="(item,idx) in diagnose.text" :key="item.text">{{item.text+(idx == diagnose.text.length-1?'。':';')}}</span>
+            <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.text+(idx == diagnose.text.length-1?'。':';')}}</span>
           </p>
         </li>
         <li v-if="others.text.length>0">
           <h4><i></i> 其他史：</h4>
           <p>
-            <span v-for="(item,idx) in others.text" :key="item.text">{{item.text+(idx == others.text.length-1?'。':';')}}</span>
+            <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.text+(idx == others.text.length-1?'。':';')}}</span>
           </p>
         </li>
         <li v-if="addContent.txt">

src/components/Search.vue

@@ -83,7 +83,6 @@ export default {
       }
       api.getTagInfos(param).then((res) => {
         const result = res.data;
-        console.log(result)
         if (result.code == 0) {
           this.searchLis = result.data
         }

src/components/Symptom.vue

@@ -84,8 +84,6 @@ export default {
       sexType: pathInfo.patientSex == '男' ? 1 : (pathInfo.patientSex == '女' ? 2 : 3),
       deptName: pathInfo.selfDeptName,
       hosCode: pathInfo.hospitalCode,
-      choose: false,
-      check: false,
       show: false, //显示明细
       chooseSymp: choose, //已选症状
       symp: [], //症状
@@ -95,7 +93,6 @@ export default {
       delText: "是否删除该信息？<br/> （已填内容将清除）",
       delIndex: null,
       showToast: false,
-      finished: false,//是否填写了明细
       searchShow: false,//显示搜索界面
       tmpItem:{},//检索的症状
       isSearch:false
@@ -239,6 +236,7 @@ export default {
         this.chooseSymp.push(this.tmpItem);
         this.searchShow = false
       }
+      this.isSearch = false; //重置，否则每次点开都会叠加
       this.checkText = this.$store.state.symptom.text;
       this.show = false;
       this.questId = null;

src/store.js

@@ -8,11 +8,6 @@ const store = new Vuex.Store({
     pathInfo:{}, //患者信息-后续提交要用
     sysConfig:[], //系统配置项
     allMoudles:[], //模板
-    // originDatas:{},  //getById获取到的源数据
-    // datas:{},  //处理过的数据
-    updata:false,  //更新数据
-    // imgFile:[],   //上传图片信息file
-    // imgSrc:{},   //上传的图片信息src
     symptom:{ //症状情况
       choose:[],
       origin:{},
@@ -23,8 +18,8 @@ const store = new Vuex.Store({
       origin:[], //模板数据
       datas:[],
       text:[],
-      imgFile:[],
-      imgSrc:{},
+      imgFile:[],//上传图片信息file
+      imgSrc:{},//上传的图片信息src
     },
     others:{ //其他情况
       origin:[], //模板数据
@@ -88,7 +83,7 @@ const store = new Vuex.Store({
         }
       }
     },
-    setOrigin(state,param){
+    setOrigin(state,param){//取消选中时用
       const type = parseInt(param.type);
       const data = param.data;
       switch(type){
@@ -138,7 +133,6 @@ 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.datas;
           for(let i in diagData){
             if(diagData[i].id == ppId){
@@ -153,7 +147,6 @@ const store = new Vuex.Store({
           }
           break;
         case 3:
-          // let otherData = state.others.origin;
           let otherData = state.others.datas;
           for(let i in otherData){
             if(otherData[i].id == ppId){
@@ -183,7 +176,7 @@ const store = new Vuex.Store({
           let text = state.symptom.text;
           if(text.length > 0){
             for(let i in text){
-              // 点完成时才覆盖，单纯点开再关闭不覆盖
+              // 点完成时才覆盖，单纯点开再关闭不覆盖flag
               if(text[i].pId==param.pId){
                 if(param.flag){
                   text.splice(i,1,param);
@@ -274,9 +267,6 @@ const store = new Vuex.Store({
     setChoose(state,param){ //症状情况-已选症状
       state.symptom.choose = param.choose;
     },
-    getUpdate(state){//更新数据
-      state.updata = !state.updata;
-    },
     setImgFile(state,param){//区别模块
       const type = parseInt(param.type);
       switch(type){