修改诊断依据间距

src/components/diagBase/AddDiagBase.vue

@@ -47,22 +47,55 @@
                     </td>
                     <td class="FeatureNumber"  >
                         <el-tooltip :disabled="!item.verifyCode&&!item.codeNull&&!item.codeError" class="item" effect="dark" :content="item.verifyCode||item.codeNull||item.codeError" placement="top">
-                            <input class="groupInput"  :class="{borderRed:item.verifyCode||item.codeNull, colorRed: item.codeError}" :title="item.code" type="text" v-model.trim="item.code" @input="handleInp(index,$event,'FeatureNumber')"  @click="clickItem(index,'FeatureNumber')">
+                            <el-input class="groupTextarea" 
+                                type="textarea"  
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyCode||item.codeNull, colorRed: item.codeError}" 
+                                :title="item.code" 
+                                v-model.trim="item.code"
+                                 @input="handleInp(index,$event,'FeatureNumber')"  
+                                 @focus="clickItem(index,'FeatureNumber')">
+                            </el-input>
                         </el-tooltip>
                     </td>
                     <td class="FeatureStand" >
                         <el-tooltip  :disabled="!item.verifyStandard&&!item.standardNull" class="item" effect="dark" :content="item.verifyStandard||item.standardNull" placement="top">
-                            <input class="groupInput"  :class="{borderRed:item.verifyStandard||item.standardNull}" :title="item.standard" type="text" v-model.trim="item.standard" @input="handleInp(index,$event,'FeatureStand')"   @click="clickItem(index,'FeatureStand')">
+                            <el-input class="groupTextarea"  
+                                type="textarea"
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyStandard||item.standardNull}" 
+                                :title="item.standard" 
+                                v-model.trim="item.standard" 
+                                @input="handleInp(index,$event,'FeatureStand')"   
+                                @focus="clickItem(index,'FeatureStand')">
+                            </el-input>
                         </el-tooltip>                    
                     </td>
                     <td class="FeatureRelate">
                         <el-tooltip :disabled="!item.verifyRelation&&!item.relationNull"  class="item" effect="dark" :content="item.verifyRelation||item.relationNull" placement="top">
-                            <input class="groupInput" :class="{borderRed:item.verifyRelation|| item.relationNull}" :title="item.relation" type="text" v-model.trim="item.relation" @input="handleInp(index,$event,'FeatureRelate',item.type)"  @click="clickItem(index,'FeatureRelate')">
+                            <el-input class="groupTextarea"  
+                                type="textarea"
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyRelation|| item.relationNull}" 
+                                :title="item.relation" 
+                                v-model.trim="item.relation" 
+                                @input="handleInp(index,$event,'FeatureRelate',item.type)"  
+                                @focus="clickItem(index,'FeatureRelate')">
+                            </el-input>
                         </el-tooltip> 
                     </td>
                     <td class="FeatureResult">
                         <el-tooltip :disabled="!item.verifyResult"  class="item" effect="dark" :content="item.verifyResult" placement="top">
-                            <input :readonly="item.type!=3" class="groupInput" :class="{borderRed:item.verifyResult, inpDisabled:item.type!=3}"  :title="item.result" type="text" v-model.trim="item.result" @input="handleInp(index,$event,'FeatureResult')" @click="clickItem(index,'FeatureResult')">
+                            <el-input class="groupTextarea"
+                                type="textarea"  
+                                :autosize="{ minRows: 1}"
+                                :readonly="item.type!=3"  
+                                :class="{borderRed:item.verifyResult, inpDisabled:item.type!=3}"  
+                                :title="item.result" 
+                                v-model.trim="item.result" 
+                                @input="handleInp(index,$event,'FeatureResult')"
+                                @focus="clickItem(index,'FeatureResult')">
+                            </el-input>
                         </el-tooltip> 
                     </td>
                     <td class="FeatureOpera">
@@ -89,7 +122,15 @@
                     </td>
                     <td class="FormulaNumber">
                         <el-tooltip :disabled="!item.verifyFormula"  class="item" effect="dark" :content="item.verifyFormula" placement="top">
-                            <input class="groupInput" :class="{borderRed:item.verifyFormula}" :title="item.formula" type="text" v-model.trim="item.formula" @input="handleInp(index,$event,'FormulaNumber')"  @click="clickItem(index,'FormulaNumber')">
+                            <el-input class="groupTextarea"
+                                type="textarea"  
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyFormula}" 
+                                :title="item.formula" 
+                                v-model.trim="item.formula" 
+                                @input="handleInp(index,$event,'FormulaNumber')"  
+                                @focus="clickItem(index,'FormulaNumber')">
+                            </el-input>
                         </el-tooltip> 
                     </td>
                    <td class="FeatureOpera">
@@ -475,17 +516,29 @@
             })
         },
         handleInp(index,e,type,itemType){ //分组不能输入负数
-            const value =  e.target.value;
+            const value = e;
             if(type === 'FeatureNumber') { //序号只能输入数字和.
-                this.disFeatureList[index].code = value.replace(/[^\d.]/g,'')
-            } else if(type==='FeatureStand') {  //关联词不能输入顿号
-                this.disFeatureList[index].standard = value.replace(/、/g,'')
+                this.$nextTick(() => {
+                    this.disFeatureList[index].code = value.replace(/[^\d.]/g,'')
+                })
+            } else if(type==='FeatureStand') {  //标准词不能输入顿号
+                console.log('event', e)
+                this.$nextTick(() => {
+                    this.disFeatureList[index].standard = value.replace(/、/g,'')
+                })
+                // this.disFeatureList[index].standard = value.replace(/、/g,'')
             } else if ( type === 'FormulaNumber') {
                 //计算公式只能输入以下内容： 任、一、二、三、四、五、六、七、八、九、十、0-9、/、.、(、)、（、）
-                this.disFormulaList[index].formula =  value.replace(/[^\u4EFB\u4E00\u4E8C\u4E09\u56DB\u4E94\u516D\u4E03\u516B\u4E5D\u53410-9\/\.+\(\)\（\）]/g,'').replace(/[\（]/g, '(').replace(/[\）]/g, ')').replace(/' '/g, '')
+                 this.$nextTick(() => {
+                    this.disFormulaList[index].formula =  value.replace(/[^\u4EFB\u4E00\u4E8C\u4E09\u56DB\u4E94\u516D\u4E03\u516B\u4E5D\u53410-9\/\.+\(\)\（\）]/g,'').replace(/[\（]/g, '(').replace(/[\）]/g, ')').replace(/' '/g, '')
+                })
+                
+            
             } else if ( type === 'FeatureRelate') {
                 if(itemType == 3) {
-                    this.disFeatureList[index].relation = value.replace(/、/g,'')
+                     this.$nextTick(() => {
+                        this.disFeatureList[index].relation = value.replace(/、/g,'')
+                    })
                 }
             }
             // const item = this.selectedIndexList[index].indexDesc;
@@ -617,7 +670,6 @@
             margin-bottom: 20px;
             tr {
                 td {
-                    padding: 5px 10px;
                     border: 1px solid #a9a9a9;
                     text-align: center;
                 }
@@ -627,6 +679,14 @@
                     text-align: left;
                     padding-left: 30px;
                 }
+                /deep/.el-textarea__inner {
+                    width: 100%;
+                    line-height: 20px;
+                    resize:none;
+                    border: none;
+                    border-radius: 0;
+                    text-align: center;
+                }
             }
             .selectedContent {
                 width: 25%;
@@ -640,10 +700,14 @@
         }
         .groupInput {
             text-align: center;
-            height: 28px;
             color: #606266;
             width: 80%;
         }
+        .groupTextarea {
+             text-align: center;
+            color: #606266;
+            width: 100%;
+        }
         .btn {
             position: absolute;
             background-color: #fff;
@@ -671,6 +735,7 @@
         }
         .borderRed {
             border: 1px solid red !important;
+            box-sizing: border-box;
         }
         .colorRed {
             color: red;
@@ -680,6 +745,7 @@
         }
         .FeatureType {
             width: 7%;
+            padding: 0 5px;
         }
         .FeatureNumber {
             width: 8%;
@@ -701,6 +767,7 @@
         } 
         .FormulaType{
             width: 7%;
+            padding: 0 5px;
         } 
         .FormulaNumber{
             width: 78%;
@@ -737,10 +804,14 @@
             margin: 0 0 10px 0;
         }
         .inpDisabled{
-            background: #ECECEC;
-            color: #AAAAAA;
-            border: none;
-            cursor: not-allowed;
+            textarea {
+                background: #ECECEC;
+                color: #AAAAAA;
+                border: none;
+                cursor: not-allowed;
+                height: 100%;
+            }
+            
         }
         .inpTips {
             font-size: 13px;