单选数据处理

src/common/CheckBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="check-wrap" v-if="item">
-    <p class="quest">{{item.name}}</p>
+    <p class="quest">{{indx + '.' + item.name}}</p>
     <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
     <p v-for="(it,index) in item.questionDetailList" class="list">
       <img src="../images/check-default.png">
@@ -17,7 +17,7 @@ import tools from '@utils/tools.js';
         imgUrl:tools.imageUrlPrefix
       }
     },
-    props:['item']
+    props:['item','indx']
   }
 </script>
 <style lang="less" scoped>

src/common/Radio.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="radio-wrap" v-if="item">
-    <p class="quest">{{item.name}}</p>
+    <p class="quest">{{indx + '.' + item.name}}</p>
     <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
     <p v-for="(it,index) in item.questionDetailList" :key="it.id" class="list">
       <img :src="index==current?check:defaultPic" @click="handleClick(it,index)">
+      <!-- <img :src="it.select?check:defaultPic" @click="handleClick(it,index)"> -->
       <span>{{it.name}}</span>
     </p>
   </div>
@@ -11,19 +12,35 @@
 <script type="text/javascript">
 import icon from '../images/radio-default.png'
 import checkIcon from '../images/radio-check.png'
+import {deepClone} from '@utils/tools.js'
   export default{
     name:'Radio',
     data(){
       return{
         defaultPic:icon,
         check:checkIcon,
-        current:null
+        current:null,
+        datas:{}
       }
     },
-    props:['item'],
+    props:['item','indx','pId'],
     methods:{
-      handleClick(item,index){
-        this.current = index;console.log(123,item)
+      handleClick(it,index){
+        this.current = index;
+        const list = JSON.parse(JSON.stringify(this.item));
+        let data = list.questionDetailList.slice(0); //数组深拷贝？
+        // let data = deepClone(list);
+        let value = "";
+        for(let i=0;i<data.length; i++){
+          data[i].select = 0
+          if(i==index){
+            data[i].select = 1;
+            value = data[i].name;
+          }
+        }
+        const newData = Object.assign({},this.item,{questionDetailList:data},{value:value})
+        this.$store.commit('setDatas',{data:newData,pId:this.pId});
+        this.$store.commit('getUpdate'); //更新数据
       }
     }
   }

src/components/Detail.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="detail-wrap">
     <div v-for="(item,index) in datas">
-      <Radio v-if="item.controlType==1" :item="item" />
-      <CheckBox v-if="item.controlType==2" :item="item" />
+      <Radio v-if="item.controlType==1" 
+            :item="item" 
+            :indx="index+1" 
+            :pId="id"
+            :key="item.id"
+            @updata="updataData"/>
+      <CheckBox v-if="item.controlType==2" :item="item" :indx="index+1"/>
+      <!-- 输入框 -->
+      <div class="inp" v-if="item.controlType==6">
+        <p class="name">{{index+1+'.'+item.name}}</p>
+        <input type="" name="">
+      </div>
     </div>
   </div>
 </template>
@@ -16,10 +26,15 @@ import CheckBox from '../common/CheckBox.vue';
 
       }
     },
-    props:['datas'],
+    props:['datas','id'],
     components:{
       Radio,
       CheckBox
+    },
+    methods:{
+      updataData(data){
+        // console.log("源数据：",this.datas,'更改后:',data)
+      }
     }
   }
 </script>

src/components/DetailBox.vue

@@ -8,9 +8,9 @@
       <span>清空</span>
     </div>
     <div class="main">
-      <Detail :datas="data.questionMapping" />
+      <Detail :datas="data.questionMapping" :id="data.id"/>
     </div>
-    <div class="foot">完成</div>
+    <div class="foot" @click="complete">完成</div>
   </div>
 </template>
 <script type="text/javascript">
@@ -25,6 +25,20 @@
     methods:{
       close(){
         this.$emit("close","胸痛");
+      },
+      complete(){//拼接value
+        const id = this.data.id;
+        const datas = this.$store.state.datas;
+        const current = datas[id];
+        const detail = current.questionMapping;
+        let text = "";
+        for(let i in detail){
+          if(detail[i].value){
+            text += detail[i].value+'，';
+          }
+        }
+        let msg = current.name+ '，' + text;
+        this.$emit("pComplete",msg.substring(0,msg.length-1));
       }
     },
     props:['data'],

src/components/Symptom.vue

@@ -20,7 +20,10 @@
     </div>
     <div class="footer" @click="toNext">下一步</div>
     <div class="detail" v-if="show">
-      <DetailBox @close="closeDetal" :data="labelDetail"/>
+      <DetailBox @close="closeDetal" 
+              :data="labelDetail" 
+              v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
+              @pComplete="complete"/>
     </div>
     <Toast :message="delText" 
           :show="showToast"
@@ -35,7 +38,12 @@ import Toast from '../common/Toast.vue';
   export default {
     name:'Symptom',
     data(){
-      const pathInfo = this.$store.state.pathInfo;
+      /*const pathInfo = this.$store.state.pathInfo;
+      let datas = this.$store.state.datas;
+      let originDatas = this.$store.state.originDatas;*/
+      let {datas,update} = this.$store.state;
+      const {pathInfo,originDatas} = this.$store.state;
+      console.log("symp组件：",update,pathInfo)
       return {
         age:pathInfo.patientAge,
         sexType:pathInfo.patientSex=='男'?1:(pathInfo.patientSex=='女'?2:3),
@@ -48,10 +56,13 @@ import Toast from '../common/Toast.vue';
         symp:[], //症状
         labelDetail:{}, //明细
         checkText:{}, //选中拼好的明细
-        current:null,
+        questId:null, //id
+        // symptomName:'', //点击的症状名称
         delText:"是否删除该信息？",
         delIndex:null,
-        showToast:false
+        showToast:false,
+        finished:false,   //是否填写了明细
+        upData:update
       }
     },
     created(){
@@ -76,7 +87,9 @@ import Toast from '../common/Toast.vue';
       },
       showDetil(item){
         this.chooseSymp.push(item);
-        this.current = item.conceptId;
+        // this.questId = item.conceptId;
+        this.questId = item.questionId;
+        // this.symptomName = item.name;
         const id = item.questionId;
         const param = {
           "age":this.age,
@@ -87,6 +100,8 @@ import Toast from '../common/Toast.vue';
           const result = res.data;
           if(result.code==0){
             this.labelDetail = result.data;
+            this.$store.commit('setOrigin',result.data);
+            // this.$store.commit('getUpdate');
             this.show = true;
           }
         })
@@ -108,15 +123,15 @@ import Toast from '../common/Toast.vue';
         })
       },
       closeDetal(msg){
-        const current = this.current;
+        const questId = this.questId;
         this.getPush(msg);
-        this.checkText = Object.assign({},this.checkText,{[current]:msg});
+        this.checkText = Object.assign({},this.checkText,{[questId]:msg});
         this.show = false;
-        this.current = null;console.log('子组件触发关闭',this.checkText);
+        this.questId = null;
       },
       deletSymp(item,index){
         this.delIndex = index;
-        this.current = item.conceptId;
+        this.questId = item.questionId;
         if(this.chooseSymp.length==1){
           this.delText = "是否删除该信息？删除后将重新填写预问诊流程"
         }
@@ -124,7 +139,7 @@ import Toast from '../common/Toast.vue';
       },
       comfirnDel(){
         this.chooseSymp.splice(this.delIndex,1);
-        delete(this.checkText[this.current]);
+        delete(this.checkText[this.questId]);
         // this.getPush(''); //删除后重新调推理-入参：拼好的内容
         this.cancelDel();
         console.log("确认删除：",this.chooseSymp,this.checkText)
@@ -132,12 +147,35 @@ import Toast from '../common/Toast.vue';
       cancelDel(){
         this.showToast = false;
         this.delIndex = null;
-        this.current = null;
+        this.questId = null;
+      },
+      complete(msg){//明细填写完成
+        // 获取选择后的明细数据-拼接症状情况-关闭明细弹窗
+        // let text = this.symptomName + text;
+        this.checkText = Object.assign({},this.checkText,{[this.questId]:msg});
+        this.show = false;
+        this.questId = null;
       }
     },
     components:{
       DetailBox,
       Toast
+    },
+    computed:{
+      getQuestId(){
+        return this.upData;
+      }
+    },
+    watch:{
+      getQuestId:{
+        handler(newVal,oldVal){
+          console.log("数据更新了11",newVal,oldVal);
+          let datas = this.$store.state.datas;
+          let originDatas = this.$store.state.originDatas;
+          this.labelDetail = datas[this.questId] || originDatas[this.questId];
+        },
+        deep:true
+      }
     }
   }
 </script>

src/store.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import {deepClone} from '@utils/tools.js'
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
@@ -7,6 +8,9 @@ const store = new Vuex.Store({
     pathInfo:{}, //患者信息-后续提交要用
     sysConfig:[], //系统配置项
     allMoudles:[], //模板
+    originDatas:{},  //getById获取到的数据
+    datas:{},  //处理过的数据
+    updata:false  //更新数据
   },
   mutations:{
     savePathInfo(state,param){
@@ -17,6 +21,24 @@ const store = new Vuex.Store({
     },
     saveAll(state,param){
       state.allMoudles = param;
+    },
+    setOrigin(state,param){
+      state.originDatas[param.id] = param;
+    },
+    setDatas(state,param){
+      // let originData = JSON.parse(JSON.stringify(state.originDatas[param.pId]));
+      let originData = state.datas[param.pId]?state.datas[param.pId]:JSON.parse(JSON.stringify(state.originDatas[param.pId]));
+      // let list = deepClone(originData.questionMapping);
+      let list = originData.questionMapping.slice(0);
+      for(let i=0; i<originData.questionMapping.length; i++){
+        if(originData.questionMapping[i].id==param.data.id){
+          list.splice(i,1,param.data);
+        }
+      }
+      state.datas[param.pId] = Object.assign({},state.originDatas[param.pId],{questionMapping:list});
+    },
+    getUpdate(state){//更新数据
+      state.updata = !state.updata;
     }
   }
 })

src/utils/tools.js

@@ -8,7 +8,16 @@ const getUrlArgObject = (parm) => {
     return args[parm];//返回对象  
 } 
 
+const deepClone = (arr) =>{
+  let newArr = [];
+  for(let i in arr){
+    newArr.push(arr[i]);
+  }
+  return newArr;
+}
+
 module.exports =  {
   imageUrlPrefix,
-  getUrlArgObject
+  getUrlArgObject,
+  deepClone
 }