新增带输入框选项组件

Squashed commit of the following:

commit 0f282a4005150b8b4234df99de1521fba5ec55e8
Merge: 6fc7207 a1ac90c
Author: Luolei <16657115156@163.com>
Date:   Tue Jul 23 15:47:37 2019 +0800

    Merge branch 'dev' into byll

    # Conflicts:
    #	config/index.js
    #	src/common/MultiLineInput.vue
    #	src/components/Symptom.vue
    #	src/components/TabPage.vue
    #	src/store.js
    #	src/utils/tools.js

commit 6fc720795865ba16ff3c9cd9cd8a2d1b0dbda978
Author: Luolei <16657115156@163.com>
Date:   Tue Jul 23 15:24:38 2019 +0800

    数字键盘弹起输入问题解决

commit 89f2791e4b36c0ee671c8dc87285b7c82cf35cfd
Author: Luolei <16657115156@163.com>
Date:   Tue Jul 23 10:27:55 2019 +0800

    类型修改

commit 55594b6e10078c5aff8ed95cd938c0fa07fb0125
Author: Luolei <16657115156@163.com>
Date:   Tue Jul 23 10:20:19 2019 +0800

    type类型改变

commit e9eeb458968371f579c6b61c7693438b99d18443
Merge: ada4e4e 1248f0c
Author: Luolei <16657115156@163.com>
Date:   Mon Jul 22 15:49:52 2019 +0800

    Merge branch 'dev' into byll

commit ada4e4e7216614e111914fc4a787609722b665cf
Author: Luolei <16657115156@163.com>
Date:   Mon Jul 22 15:39:22 2019 +0800

    模块配置

commit 1fe1910a2a54e5ece7a2b3ea8162cd9c7827059b
Merge: 7ef08db 3a8f52d
Author: Luolei <16657115156@163.com>
Date:   Thu Jul 18 16:39:19 2019 +0800

    Merge branch 'dev' into byll

commit 7ef08db55a456528a93b2ca8bb204b67a83daa80
Author: Luolei <16657115156@163.com>
Date:   Thu Jul 18 16:38:09 2019 +0800

    图片上传数据结构修改

src/common/CheckBox.vue

@@ -5,14 +5,15 @@
       <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},{'exclu':exclusion !==999 && it.exclusion !== exclusion}]">{{it.name}}</span>
-      <MultiLineInput v-else 
+      <!-- <MultiLineInput v-else 
           @handleInp="inpVal($event,index)"
           :msg="it.name" 
           :part="it"
           :border="false" 
           :inline="true" 
           :select="it.select==1" 
-          />
+          /> -->
+      <OptionInp v-else :item="it" @handleInp="inpVal($event,index)" />
     </p>
   </div>
 </template>
@@ -21,6 +22,7 @@ import {imageUrlPrefix,patt} from '@utils/tools.js';
 import icon from '../images/check-default.png';
 import checkIcon from '../images/check.png';
 import MultiLineInput from '../common/MultiLineInput.vue';
+import OptionInp from '../common/OptionInp.vue';
   export default{
     name:'CheckBox',
     data(){
@@ -114,7 +116,8 @@ import MultiLineInput from '../common/MultiLineInput.vue';
       }
     },
     components:{
-      MultiLineInput
+      MultiLineInput,
+      OptionInp
     }
   }
 </script>

src/common/Input.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inp-wrap">
-    <input :type="item.controlType==6?'text':'number'" 
+    <input :type="item.controlType==6?'text':'tel'" 
           :class="{'change':borColor}" 
           v-model="val" 
           @input="changeVal" 

src/common/MultiLineInput.vue

@@ -3,11 +3,26 @@
     <span class="prefix" v-if="content.prefix">{{content.prefix}}</span>
     <div class="sticP" :style="{paddingRight:content.suffix?'1rem':'0'}">
         <div class="iptWrap">
-          <!-- <input class="contentVal" type="number" :placeholder="content.placeholder" pattern="\d*" v-model="txt" @input="changeVal" @blur="blur" @click="handleClick"> -->
-          <!-- <input ref="ipt" class="contentVal" :placeholder="content.placeholder" pattern="[0-9]*" v-model="txt" @input="changeVal" @blur="blur" @click="handleClick"> -->
-          <input ref="ipt" type="tel" class="contentVal" :placeholder="content.placeholder" v-model="txt" @input="changeVal" @blur="blur" @click="handleClick">
-          <!-- <input v-for="(item,index) in content.iptList" type="tel" class="contentVal" :placeholder="content.placeholder" v-model="txt" @input="changeVal" @blur="blur" @click="handleClick"> -->
-
+          <template v-for="(item,idx) in content.iptLis">
+            <input v-if="content.iptLis.length>1" 
+              class="contentVal" 
+              :type="content.type=='number'?'tel':'text'" 
+              :style="{'width':1/content.iptLis.length*100-3+'%'}" 
+              :key="item.placeholder+idx" 
+              v-model="item.value"
+              :placeholder="item.placeholder"
+              @input="changeVal($event,idx)" 
+              @blur="blur" 
+              @click="handleClick">
+            <input v-show="content.iptLis.length==1" class="contentVal" 
+              :type="content.type=='number'?'tel':'text'" 
+              :placeholder="content.placeholder" 
+              v-model="item.value" 
+              @input="changeVal($event,idx)" 
+              @blur="blur" 
+              @click="handleClick">
+            <span v-if="idx == 0&&content.iptLis.length>1">/</span>
+          </template>
         </div>
     </div>
     <span class="suffix" v-if="content.suffix">{{content.suffix}}</span>
@@ -43,14 +58,28 @@ export default {
     return {
       content:{},
       txt:this.part.value || '', //回读用
+      tmpArr:[]
     }
   },
   mounted(){
-    this.content = getModelExpStr(this.msg)
+    this.setValue()
   },
   methods:{
-    changeVal(){
-      // this.$emit('changeMultipVal',this.txt)
+    changeVal(e,num){
+      let tmpTxt = '',arr=this.tmpArr
+      e.currentTarget.value=e.currentTarget.value.replace(/[^\d]/g,'')
+      arr[num]=e.currentTarget.value
+      tmpTxt=arr.join('/')
+      this.txt = tmpTxt
+      this.setValue()
+      // this.$emit('changeMultipVal',e.currentTarget.value,num)
+    },
+    setValue(){
+      if(this.txt){
+        this.content = getModelExpStr(this.msg,this.txt)
+      }else{
+        this.content = getModelExpStr(this.msg)
+      }
     },
     blur(){
       // 如果该项未选中，则不存值
@@ -122,7 +151,7 @@ export default {
   .suffix {
     position: absolute;
     right: .1rem;
-    top: .1rem;
+    top: .2rem;
     width: 1rem;
     text-align: right;
     text-align: left;

src/common/OptionInp.vue

@@ -0,0 +1,70 @@
+<!-- 带输入框选项 -->
+<template>
+  <div :class="['inpbox',{'check':item.select}]">
+    <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
+    <div class="inp" @click="preClick">
+      <input :type="msg.type=='number'?'tel':'text'" 
+              :placeholder="msg.placeholder"
+              v-model="txt"
+              @blur="handleBlur">
+    </div>
+    <span class="suffix" v-if="msg.suffix">{{msg.suffix}}</span>
+  </div>
+</template>
+<script type="text/javascript">
+import { getExpStr } from '@utils/tools';
+  export default {
+    name:'OptionInp',
+    data(){
+      return{
+        msg:{},
+        txt:this.item.value || ''
+      }
+    },
+    props:['item'],
+    mounted(){
+      this.msg = getExpStr(this.item.name);
+    },
+    methods:{
+      handleBlur(){
+        // 如果该项未选中，则不存值
+      const select = this.item.select;
+      if(!select){return}
+      const newData = Object.assign({},this.part,{value:this.txt});
+      this.$emit("updata",newData);
+      this.$emit('handleInp',this.txt);
+      },
+      preClick(e){
+        e.stopPropagation();
+      }
+    },
+    watch:{
+      item:{//清空时更新
+        handler(newVal,oldVal){
+          this.txt = newVal.value;
+        },
+        deep:true
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .inpbox{
+    color:#7C828E;
+    display: inline-block;
+    .inp{
+      display: inline-block;
+      vertical-align: top;
+      input{
+        color: #4F50FF;
+        font-size: .3rem;
+        border-bottom: 1px solid #DFE0E4 !important;
+        border-radius: 0;
+        padding-left: .05rem;
+      }
+    }
+    .check{
+      color: #4F50FF;
+    }
+  }
+</style>

src/common/Radio.vue

@@ -5,14 +5,15 @@
       <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>
-      <MultiLineInput v-else 
+      <!-- <MultiLineInput v-else 
           @handleInp="inpVal($event,index)"
           :msg="it.name" 
           :part="it" 
           :border="false" 
           :inline="true" 
           :select="it.select==1" 
-          />
+          /> -->
+      <OptionInp v-else :item="it" @handleInp="inpVal($event,index)" />
     </p>
   </div>
 </template>
@@ -21,6 +22,7 @@ import icon from '../images/radio-default.png'
 import checkIcon from '../images/radio-check.png'
 import {patt,imageUrlPrefix} from '@utils/tools.js'
 import MultiLineInput from '../common/MultiLineInput.vue';
+import OptionInp from '../common/OptionInp.vue';
   export default{
     name:'Radio',
     data(){
@@ -77,7 +79,8 @@ import MultiLineInput from '../common/MultiLineInput.vue';
       }
     },
     components:{
-      MultiLineInput
+      MultiLineInput,
+      OptionInp
     }
   }
 </script>

src/components/AddContent.vue

@@ -31,6 +31,7 @@
               :msg="part.name"
               :part="part"
               @updata="updataData($event,index,item)"
+              @changeMultipVal="changeMultipVal($event,val,idx)"
             ></MultiLineInput>
           </template>
         </li>
@@ -40,6 +41,7 @@
         <p>您可以点击预览病历回顾病情；或者点击顶部修改病历采集信息。</p>
         <p>如果没有需要修改的内容，请点击提交，医生便能看到您的病历。</p>
       </div>
+      <p>{{vals}}</p>
     </div>
     <div class="foot">
       <span class="back" @click="back">{{'返回'+ preName}}</span>
@@ -60,7 +62,8 @@ export default {
   data() {
     return {
       dataTrd: [],
-      val: ''
+      val: '',
+      vals:''
     }
   },
   mounted() {
@@ -74,6 +77,10 @@ export default {
       // console.log(value,idx)
       this.val = value
     },
+    changeMultipVal(value, idx) {
+      console.log(value,idx)
+      this.vals = value
+    },
     next(){
       this.$store.commit('setText',{data:this.dataTrd,type:this.allMoudles&&this.allMoudles.type});
       this.$emit('next','preview')
@@ -88,6 +95,7 @@ export default {
       // this.dtoList = origin;console.log("更新：",origin)
     },
     updataData(data,idx,item){
+      console.log(data)
       let mapping = this.dataTrd;
       if(data.controlType == 3){//多行输入，多了一层需单独处理
         let tmpLis = item.questionDetailList

src/components/TabPage.vue

@@ -75,10 +75,10 @@ export default {
       modlues: allMoudles.data,
       modluesLen: allMoudles.len,
       type: {
-        '1': sysConfig.length > 0 && sysConfig.filter(item => item.code == "symptoms_show")[0].value,
-        '51': sysConfig.length > 0 && sysConfig.filter(item => item.code == "diagnosis_show")[0].value,
-        '3': sysConfig.length > 0 && sysConfig.filter(item => item.code == "omhistory_show")[0].value,
-        '52': sysConfig.length > 0 && sysConfig.filter(item => item.code == "replenish_show")[0].value,
+        "1": sysConfig.length > 0 && sysConfig.filter(item => item.code == "symptoms_show")[0].value,
+        "51": sysConfig.length > 0 && sysConfig.filter(item => item.code == "diagnosis_show")[0].value,
+        "3": sysConfig.length > 0 && sysConfig.filter(item => item.code == "omhistory_show")[0].value,
+        "52": sysConfig.length > 0 && sysConfig.filter(item => item.code == "replenish_show")[0].value,
       },
       flag: allMoudles.order,
       moduleShow:true,

src/utils/tools.js

@@ -1,6 +1,5 @@
 
 const qs = require('qs');
-// const imageUrlPrefix = 'http://192.168.2.236:82' //后台图片地址
 const imageUrlPrefix = 'http://192.168.2.241:82' //后台图片地址
 
 const getUrlArgObject = (parm) => {
@@ -17,23 +16,56 @@ const deepClone = (arr) =>{
   return newArr;
 }
 
-const getModelExpStr = (str) =>{
+// 选项带输入
+const getExpStr = (str) =>{
   let result = {}
+  if(str.match(/\${number_(.*})/)){//数字输入框
+    let matchStr = str.match(/\${number_(.*})/)[0]
+    result = {
+      type:'number',
+      placeholder:matchStr.split('${number_')[1].split('}')[0],
+      prefix:str.split(matchStr)[0]||'',
+      suffix:str.split(matchStr)[1]||''
+    }
+  }else if(str.match(/\${input_(.*})/)){
+    let matchStr = str.match(/\${input_(.*})/)[0]
+    result = {
+      type:'text',
+      placeholder:matchStr.split('${input_')[1].split('}')[0],
+      prefix:str.split(matchStr)[0]||'',
+      suffix:str.split(matchStr)[1]||''
+    }
+  }
+  return result
+}
+// 多行输入 多个输入框
+const getModelExpStr = (str,txt) =>{
+  let result = {}
+  console.log(str,txt,44444)
   if(str.match(/\${number_(.*})/)){//数字输入框
     let matchStr = str.match(/\${number_(.*})/)[0]
     let tmpHolder = matchStr.split('${number_')[1].split('}')[0]
-    let iptLis = [],join='',pre='',next=''
+    let iptLis = [],join='';
     if(tmpHolder.indexOf('/') != -1){
-      pre = tmpHolder.split('/')[0]
-      next = tmpHolder.split('/')[1]
+      let tmpHolderArr = tmpHolder.split('/')
+      for(let i = 0;i < tmpHolderArr.length;i++){
+        let obj={placeholder:'',value:''}
+        let tmpData = tmpHolderArr[i];
+        obj.placeholder=tmpData
+        if(txt){
+          obj.value=txt.split('/')[i]
+        }
+        iptLis.push(obj)
+      }
       join = '/'
-      iptLis.push(pre,next)
+    }else{
+      let obj={placeholder:'tmpHolder',value:txt}
+      iptLis.push(obj)
     }
     result = {
       type:'number',
       placeholder:tmpHolder,
-      pre:pre||'',
-      next:next||'',
+      iptLis:iptLis,
       join:join,
       prefix:str.split(matchStr)[0]||'',
       suffix:str.split(matchStr)[1]||'',
@@ -113,7 +145,8 @@ module.exports =  {
   getAllStr,
   moduleConfig,
   patt,
-  moduleCP
+  moduleCP,
+  getExpStr
 }