Ver código fonte

Merge branch 'development' into dev

Luolei 6 anos atrás
pai
commit
6c1978b3cf

+ 1 - 0
package.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.11",
     "qs": "^6.7.0",
     "vue": "^2.6.10",
+    "vue-photo-preview": "^1.1.3",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

+ 3 - 3
src/common/Radio.vue

@@ -3,7 +3,7 @@
     <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="index==current||it.select==1?check:defaultPic" @click="handleClick(it,index)">
       <!-- <img :src="it.select?check:defaultPic" @click="handleClick(it,index)"> -->
       <span :class="{'check':index==current}">{{it.name}}</span>
     </p>
@@ -25,7 +25,7 @@ import {deepClone} from '@utils/tools.js'
     },
     props:['item','indx','pId'],
     methods:{
-      handleClick(it,index){
+      handleClick(it,index){console.log("单选:",this.item)
         this.current = index;
         const list = JSON.parse(JSON.stringify(this.item));
         let data = list.questionDetailList.slice(0); //数组深拷贝?
@@ -39,7 +39,7 @@ import {deepClone} from '@utils/tools.js'
           }
         }
         const newData = Object.assign({},this.item,{questionDetailList:data},{value:value})
-        this.$store.commit('setDatas',{data:newData,pId:this.pId});
+        this.$store.commit('setDatas',{data:newData,pId:this.pId,type:"1"});
         this.$store.commit('getUpdate'); //更新数据
       }
     }

+ 64 - 17
src/common/UploadImg.vue

@@ -3,13 +3,16 @@
     <p class="name">{{item.name|| msg}}</p>
     <div class="box">
       <ul class="upload-imgs">
-        <li v-if="imgLen>=6 ? false : true">
+        <li v-if="imgLen>=6 ? false : true" class="uploadBox" @click="handleUpload">
           <input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
-          <p @click="handleUpload">点击上传</p>
+          <img src="../images/upload.png">
+          <p>点击上传</p>
         </li>
         <li v-for='(value, key) in imgs'>
-          <!-- <p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p> -->
-          <p class="img"><img :src="value"><a class="close" @click="delImg(key)">×</a></p>
+          <p class="imgbox">
+            <img :src="value" :preview="item.id" class="img" preview-text="">
+          </p>
+          <a class="close" @click="delImg(key)"></a>
         </li>
       </ul>
     </div>
@@ -25,20 +28,29 @@
         imgLen:0
       }
     },
-    props:['item'],
+    props:['item','moduleType','imgList'],//moduleType-哪个模块下上传的图
+    mounted(){
+      // 将store存的值赋给imgs
+      this.imgs = this.imgList;
+    },
     methods:{
       handleUpload(){
         const inp = this.$refs.inp;
         inp.click();
       },
       delImg(key){
-        console.log(2222,key)
+        let obj = this.imgs;
+        delete(obj[key]);
+        this.imgLen--;
+        this.imgs = Object.assign({},obj);
+        this.$store.commit('deleImg',{key:key,type:this.moduleType});
+        this.$store.commit('deleSrc',{key:key,type:this.moduleType});
       },
       addImg(){
         // 上传图片进行压缩,压缩后超过4M则不允许上传
         let fileTag = this.$refs.inp;
         let img = this.$refs.img;
-        let file = fileTag.files[0];console.log("文件信息:",file)
+        let file = fileTag.files[0];
         const that = this;
         this.imgBase64(file, function (image, canvas) {
             var maxSize = 4*1024; // 4M
@@ -46,26 +58,26 @@
             var uploadSrc;
             var uploadFile;
             if(fileSize > maxSize) { // 如果图片大小大于4m,进行压缩
-              console.log(maxSize,fileSize, maxSize/fileSize );
+              // console.log(maxSize,fileSize, maxSize/fileSize );
               uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
                 uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
                 // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
-                //console.log("大于:",uploadFile)
               } else {
                 uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
                 uploadFile = file;
               }
 
               var compressedSize = uploadFile.size / 1024 / 1024;
-              //console.log("压缩后大小:",compressedSize)
               if(compressedSize.toFixed(2) > 4.00) {
                 alert('上传图片不可超过4M');
               } else {
-                // img.setAttribute('src',uploadSrc);
-                // img.className = 'img';
                 let key = file.name + new Date().getTime();
-                this.$set(this.imgs,key,uploadSrc);
-                this.imgLen++;
+                that.$set(that.imgs,key,uploadSrc);
+                that.imgLen++;
+                // 将图片信息存到store
+                that.$store.commit('setImgFile',{type:that.moduleType,pId:that.item.id,key:key,file:uploadFile})
+                that.$store.commit('setImgSrc',{key:key,src:uploadSrc,type:that.moduleType})
+                that.$previewRefresh(); //异步获取的图片需要刷新下
               }
           });
       },
@@ -99,13 +111,11 @@
             callback(image, canvas);
           };
           if (/^image/.test(file.type)) {
-            // 创建一个reader
             var reader = new FileReader();
             // 将图片将转成 base64 格式
             reader.readAsDataURL(file);
             // 读取成功后的回调
             reader.onload = function () {
-                // self.imgUrls.push(this.result);
                 // 设置src属性,浏览器会自动加载。
                 // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
                 image.src = this.result;
@@ -149,8 +159,45 @@
     }
     .upload-imgs{
       margin-bottom: .2rem;
+      .uploadBox{
+        border: 1px solid #DFE0E4;
+        box-sizing: border-box;
+        text-align: center;
+        img{
+          width:.6rem;
+          margin:.45rem 0 .23rem 0;
+        }
+      }
       li{
-        
+        width:1.86rem;
+        height:1.9rem;
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        border-radius: .08rem;
+        margin: 0 0 .3rem .3rem;
+        .close{
+          width:.54rem;
+          height:.54rem;
+          background: url(../images/del-pic.png) no-repeat;
+          background-size: cover;
+          position: absolute;
+          top: -.27rem;
+          right: -.27rem;
+          z-index: 3;
+        }
+      }
+      li:nth-child(3n+1){
+        margin-left: 0;
+      }
+      .imgbox{
+        width:100%;
+        height:100%;
+        overflow: hidden;
+        border-radius: .08rem;
+        .img{
+          width:100%;
+        } 
       }
     }
   }

+ 13 - 6
src/components/DetailBox.vue

@@ -4,11 +4,11 @@
       <span class="icon" @click="close">
         <img src="../images/small-close.png">
       </span>
-      <span class="name">{{data.name+'详情'}}</span>
+      <span class="name">{{privateData.name+'详情'}}</span>
       <span>清空</span>
     </div>
     <div class="main">
-      <Detail :datas="data.questionMapping" :id="data.id"/>
+      <Detail :datas="privateData.questionMapping" :id="privateData.id"/>
     </div>
     <div class="foot" @click="complete">完成</div>
   </div>
@@ -19,21 +19,28 @@
     name:'DetailBox', //点开详情的盒子
     data(){
       return{
-        msg:"胸痛详情"
+        msg:"胸痛详情",
+        privateData:{}
       }
     },
+    created(){
+      console.log("详情盒子:",this.data);
+      this.privateData = this.data;
+    },
     mounted(){
       const box = this.$refs.detailBox;
       const height = document.documentElement.clientHeight;
-      box.style.height = height - 100 + 'px';
+      box.style.height = height - 100 + 'px'; 
     },
     methods:{
       close(){
         this.$emit("close","胸痛");
       },
-      complete(){//拼接value
+      complete(){
+      //拼接value,将选中的数据结构存到store--setDatas
         const id = this.data.id;
-        const datas = this.$store.state.datas;
+        // const datas = this.$store.state.datas;
+        const datas = this.$store.state.symptom.datas;
         const current = datas[id];
         const detail = current.questionMapping;
         let text = "";

+ 7 - 2
src/components/DiagTreat.vue

@@ -7,7 +7,11 @@
         <p class="quest">{{it.name}}</p>
         <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
       </div>
-      <UploadImg v-if="it.controlType==4" :item="it"/>
+      <UploadImg v-if="it.controlType==4" 
+            :item="it" 
+            :moduleType="datas.type"
+            :imgList="imgs"
+            />
     </div>
     <div class="result">
       <p class="title">治疗情况</p>
@@ -26,7 +30,8 @@
     data(){
       return{
         msg:"诊疗情况",
-        chooseSymp:[{name:'未治疗'}]
+        chooseSymp:[{name:'未治疗'}],
+        imgs:this.$store.state.diagnose.imgSrc
       }
     },
     props:['datas','preName','nextName'],

+ 20 - 3
src/components/Symptom.vue

@@ -3,7 +3,7 @@
     <div class="choose" v-if="chooseSymp.length>0">
       <p class="quest">已选症状</p>
       <p class="choo-symp" v-for="(v,i) in chooseSymp">
-        <span>{{v.name}}</span>
+        <span @click="showChecked(v)">{{v.name}}</span>
         <span @click="deletSymp(v,i)"><img src="../images/delete.png" alt=""></span>
       </p>
     </div>
@@ -64,6 +64,10 @@ import Toast from '../common/Toast.vue';
     created(){
       this.getSympList();
     },
+    mounted(){
+      // 从store中取数据
+
+    },
     methods:{
       getSympList(){ 
         const param = {
@@ -82,6 +86,9 @@ import Toast from '../common/Toast.vue';
         // 把1切换成完成图标,且2高亮
         if(this.chooseSymp.length==0){return}
         this.$emit('next');
+        // 把症状情况的数据存起-已选、详情、拼好的文字
+        
+
       },
       showDetil(item){
         this.chooseSymp.push(item);
@@ -97,7 +104,7 @@ import Toast from '../common/Toast.vue';
           if(result.code==0){
             const mapping = result.data.questionMapping;
             this.labelDetail = result.data;
-            this.$store.commit('setOrigin',result.data);
+            this.$store.commit('setOrigin',{type:"1",data:result.data});
             // this.$store.commit('getUpdate');
             if(mapping&&mapping.length>0){
               this.show = true;
@@ -168,6 +175,16 @@ import Toast from '../common/Toast.vue';
         this.checkText = Object.assign({},this.checkText,{[this.questId]:msg});
         this.show = false;
         this.questId = null;
+      },
+      showChecked(item){  
+        const origin = this.$store.state.symptom.origin;
+        const read = this.$store.state.symptom.datas;
+        console.log(1111,item,origin,read,)
+        const data = read[item.questionId] || origin[item.questionId];
+        if(data.questionMapping&&data.questionMapping.length>0){
+          this.labelDetail = data;
+          this.show = true;
+        }
       }
     },
     components:{
@@ -182,7 +199,7 @@ import Toast from '../common/Toast.vue';
     watch:{
       getQuestId:{
         handler(newVal,oldVal){
-          console.log("数据更新了11",newVal,oldVal);
+          console.log("数据更新了",newVal,oldVal);
           let datas = this.$store.state.datas;
           let originDatas = this.$store.state.originDatas;
           this.labelDetail = datas[this.questId] || originDatas[this.questId];

BIN
src/images/del-pic.png


BIN
src/images/upload.png


+ 3 - 0
src/index.js

@@ -2,6 +2,9 @@ import Vue from 'vue';
 import router from './router.js';
 import store from './store.js';
 import App from './App.vue';
+import preview from 'vue-photo-preview';
+import 'vue-photo-preview/dist/skin.css';
+Vue.use(preview);
 Vue.config.productionTip = false;
 
 new Vue({

+ 154 - 14
src/store.js

@@ -8,9 +8,24 @@ const store = new Vuex.Store({
     pathInfo:{}, //患者信息-后续提交要用
     sysConfig:[], //系统配置项
     allMoudles:[], //模板
-    originDatas:{},  //getById获取到的数据
+    originDatas:{},  //getById获取到的数据
     datas:{},  //处理过的数据
-    updata:false  //更新数据
+    updata:false,  //更新数据
+    imgFile:[],   //上传图片信息file
+    imgSrc:{},   //上传的图片信息src
+    symptom:{ //症状情况
+      choose:[],
+      origin:{},
+      datas:{},
+      text:""
+    },
+    diagnose:{ //诊疗
+      origin:{},
+      datas:{},
+      text:"",
+      imgFile:[],
+      imgSrc:{}
+    }
   },
   mutations:{
     savePathInfo(state,param){
@@ -22,24 +37,149 @@ const store = new Vuex.Store({
     saveAll(state,param){
       state.allMoudles = param;
     },
-    setOrigin(state,param){
-      state.originDatas[param.id] = param;
+    setOrigin(state,param){console.log("存值:",param)
+      const type = parseInt(param.type);
+      const data = param.data;
+      switch(type){
+        case 1: //症状情况
+          state.symptom.origin = Object.assign({},state.symptom.origin,{[data.id]:data});
+          break;
+        case 2: //诊疗情况
+          
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
+      }
+      // state.originDatas = Object.assign({},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);
-        }
+      // let originData = state.datas[param.pId]?state.datas[param.pId]:JSON.parse(JSON.stringify(state.originDatas[param.pId]));
+      const type = parseInt(param.type);
+      switch(type){
+        case 1:
+          let originData = state.symptom.datas[param.pId]?state.symptom.datas[param.pId]:JSON.parse(JSON.stringify(state.symptom.origin[param.pId]));
+          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.symptom.datas[param.pId] = Object.assign({},state.symptom.origin[param.pId],{questionMapping:list});
+          break;
+        case 2: //诊疗情况
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
       }
-      state.datas[param.pId] = Object.assign({},state.originDatas[param.pId],{questionMapping:list});
+      
     },
     getUpdate(state){//更新数据
       state.updata = !state.updata;
-    }
+    },
+    setImgFile(state,param){//区别模块
+      const type = parseInt(param.type);
+      switch(type){
+        case 1:
+
+          break;
+        case 2: //诊疗情况
+          state.diagnose.imgFile.push(param);
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
+      }
+      
+    },
+    setImgSrc(state,param){
+      const key = param.key;
+      const src = param.src;
+      const type = parseInt(param.type);
+      switch(type){
+        case 1:
+
+          break;
+        case 2:
+          state.diagnose.imgSrc = Object.assign({},state.diagnose.imgSrc,{[key]:src});
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
+      }
+      
+    },
+    deleImg(state,param){
+      const key = param.key;
+      const type = parseInt(param.type);
+      switch(type){
+        case 1:
+
+          break;
+        case 2:
+          let data = state.diagnose.imgFile;
+          for(let i=0; i<data.length;i++){
+            if(data[i].key==key){
+              data.splice(i,1)
+            }
+          }
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
+      }
+      
+    },
+    deleSrc(state,param){
+      const key = param.key;
+      const type = parseInt(param.type);
+      switch(type){
+        case 1:
+
+          break;
+        case 2:
+          let data = state.diagnose.imgFile;
+          let obj = state.diagnose.imgSrc;
+          delete(obj[key]);
+          state.diagnose.imgSrc = Object.assign({},obj);
+          break;
+        case 3:
+
+          break;
+        case 4:
+
+          break;
+        default:
+          break;
+      }
+      
+    },
   }
 })