疾病特征和诊断公式Item提取（加快渲染速度）

src/components/diagBase/AddDiagBase.vue

@@ -40,7 +40,25 @@
                     <td class="FeatureResult">结果</td>
                     <td class="FeatureOpera"></td>
                 </tr>
-                <tr v-for="(item, index) in disFeatureList" :key="item.index"> 
+                <DisFeatureItem
+                    v-for="(item, index) in disFeatureList"
+                    :key="index"
+                    :item = "item"
+                    :index = "index"
+                    :featureTypeList = 'featureTypeList'
+                    :showDiagList = 'showDiagList'
+                    :searchIndex = 'searchIndex'
+                    :searchFiled = 'searchFiled'
+                    :searchResultList = 'searchResultList'
+                     @handleInp="handleInp($event)"  
+                     @clickItem="clickItem($event)"
+                     @addItem ="addItem($event)"
+                     @delItem ="delItem($event)"
+                     @selectSearchItem = "selectSearchItem($event)"
+                >
+
+                </DisFeatureItem>
+                <!-- <tr v-for="(item, index) in disFeatureList" :key="item.index"> 
                     <td class="FeatureSort" >{{index+1}}</td>
                     <td class="FeatureType" >
                         <el-select size="mini" :class="{selectType: item.typeNull}" v-model.trim="item.type" placeholder="标签类型" @change="clickItem(index,'FeatureType')">
@@ -152,19 +170,13 @@
                                 @input="handleInp(index,$event,'FeatureResult')"
                                 @focus="clickItem(index,'FeatureResult')">
                             </el-input>
-                            <!-- <Textarea 
-                                :value = "item.midResult"
-                                :readonly = "item.type==3"
-                                :borderRed = 'item.verifyResult'
-                                @handleInp="handleInp(index,$event,'FeatureResult')"
-                            ></Textarea> -->
                         </el-tooltip> 
                     </td>
                     <td class="FeatureOpera">
                         <el-button type="text" size="small" class="delete" @click="addItem(index, 1)"><div class="btnOpera">+</div></el-button>
                         <el-button v-if="index !=0" type="text" size="small" class="delete" @click="delItem(index, 1)"><div class="btnOpera">-</div></el-button>
                     </td>
-                </tr>
+                </tr> -->
             </table>
             <p class="moduleTitle">诊断公式：</p>
             <p class="inpTips">可输入数字（0~9）；可输入规定汉字：任、一、二、三、四、五、六、七、八、九、十，其余汉字不可输入可输入的符号：“.”、“/”、“（）”  “+”；确诊还可输入“拟、诊”二字；鉴别诊断的序号不可输入公式中，数据放入后该条件无效；</p>
@@ -175,7 +187,20 @@
                     <td class="FormulaNumber">公式</td>
                     <td class="FormulaOpera"></td>
                 </tr>
-                <tr v-for="(item, index) in disFormulaList"  :key="item.index"> 
+
+                <DisFormulaItem
+                    v-for="(item, index) in disFormulaList"
+                    :key="index"
+                    :item = "item"
+                    :index = "index"
+                    :formulaTypeList = 'formulaTypeList'
+                     @handleInp="handleInp($event)"  
+                     @clickItem="clickItem($event)"
+                     @addItem ="addItem($event)"
+                     @delItem ="delItem($event)"
+                >
+                </DisFormulaItem>
+                <!-- <tr v-for="(item, index) in disFormulaList"  :key="item.index"> 
                     <td class="FormulaSort">{{index +1}}</td>
                     <td class="FormulaType">
                         <el-select size="mini" :class="{selectType: item.verifyType}" v-model.trim="item.type" placeholder="标签类型"  @change="clickItem(index,'FormulaType')">
@@ -201,10 +226,7 @@
                         <el-button type="text" size="small" class="delete" @click="addItem(index, 2)"><div class="btnOpera">+</div></el-button>
                         <el-button v-if="index !=0" type="text" size="small" class="delete" @click="delItem(index, 2)"><div class="btnOpera">-</div></el-button>
                     </td>
-                    <!-- <td class="selectedContent ">{{item.indexUnique}}</td>
-                    <td class="selectedContentGroup"><input class="groupInput" type="text" v-model="item.indexDesc" @input="handleInp(index,$event)"></td>
-                    <td class="selectedContentOpera"><el-button type="text" size="small" class="delete" @click="delSelectedIndex(item, index)">删除</el-button></td> -->
-                </tr>
+                </tr> -->
                 
             </table>
              <div class="btn clearfix">
@@ -242,7 +264,10 @@
   import api from '@api/diagBase.js';
   import utils from '@api/utils.js';
   import apis from '@api/icss.js';
-  import Textarea from './Textarea'
+  import Textarea from './Textarea';
+  import DisFeatureItem from './DisFeatureItem'
+  import DisFormulaItem from './DisFormulaItem'
+  
 
   export default {
     name: 'AddChronicAndIndexRelation',
@@ -296,6 +321,7 @@
         }
     },
     created(){
+        console.time('aaaaaaa')
         const userLoginDTO = JSON.parse(localStorage.getItem('userLoginDTO'))
         this.modifier = userLoginDTO && userLoginDTO.linkman
         this.getDropList()
@@ -321,10 +347,17 @@
     },
    mounted(){
        this.$nextTick(()=>{
-           for(let i=0; i <this.$refs.textarea.length; i++) {
-               this.$refs.textarea[i].resizeTextarea()
-           }
+            if(Array.isArray(this.$refs.textarea)) {
+                for(let i=0; i <this.$refs.textarea.length; i++) {
+                    this.$refs.textarea[i].resizeTextarea()
+                } 
+            }else {
+                this.$refs.textarea&&this.$refs.textarea.resizeTextarea()
+            }
+           
+            console.timeEnd('aaaaaaa')
        })
+       
    },
     watch: {
         // searchTagVal(newVal, preVal) {
@@ -378,7 +411,8 @@
             this.searchDiagVal = ''
             this.diagList=[]
         },
-        selectSearchItem(index, item, searchType){
+        selectSearchItem(event){
+            const {index, item, searchType} = event
             if(searchType === 'FeatureStand') {
                 const SelectResult =  this.getSelectResult(this.disFeatureList[index].standard, item)
                 this.disFeatureList[index].standard = SelectResult
@@ -428,7 +462,8 @@
                 }
             })
         },
-        addItem(index, type) {
+        addItem(event) {
+            const {index, type } = event
             if(type == 1) {
                 const item = {
                     type:1,
@@ -453,7 +488,8 @@
                 this.disFormulaList.splice(index+1, 0, item)
             }
         },
-        delItem(index, type) {
+        delItem(event) {
+            const {index, type} = event
             if(type == 1) {
                 this.disFeatureList.splice(index, 1)
             }else if(type == 2) {
@@ -980,8 +1016,8 @@
         },
        
         // handleInp(index,e,type,itemType){ //分组不能输入负数
-        handleInp(index,e,type,itemType){ //分组不能输入负数
-
+         handleInp(event){
+            const {index,e,type,itemType} = event
             const value = e
             if(type === 'FeatureNumber') { //序号只能输入数字和.
                 this.$nextTick(() => {
@@ -1114,7 +1150,9 @@
         }
     },
     components: {
-        Textarea
+        Textarea,
+        DisFeatureItem,
+        DisFormulaItem
     }
   }
 </script>

src/components/diagBase/DisFeatureItem.vue

@@ -0,0 +1,429 @@
+<template>
+    <tr> 
+                    <td class="FeatureSort" >{{index+1}}</td>
+                    <td class="FeatureType" >
+                        <el-select size="mini" :class="{selectType: item.typeNull}" v-model.trim="item.type" placeholder="标签类型" @change="clickItem(index,'FeatureType')">
+                            <el-option v-for="item in featureTypeList" :label="item.name" :value="item.key" :key="item.key"></el-option>
+                        </el-select>
+                    </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">
+                            <el-input class="groupTextarea" 
+                                ref="textarea"
+                                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"   @click.self="clickItemBox">
+                        <el-tooltip  :disabled="!item.verifyStandard&&!item.standardNull" class="item" effect="dark" :content="item.verifyStandard||item.standardNull" placement="top">
+                            <el-input class="groupTextarea" 
+                                ref="textarea" 
+                                type="textarea"
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyStandard||item.standardNull}" 
+                                :title="item.standard" 
+                                v-model.trim="item.standard" 
+                                @input="handleInp(index,$event,'FeatureStand',item.type)"   
+                                @focus="clickItem(index,'FeatureStand')">
+                            </el-input>
+                        </el-tooltip>    
+                        <div  class="searchItemBox">
+                            <ul 
+                                class="searchItemList"
+                                v-if="showDiagList&&index === searchIndex && searchFiled ==='FeatureStand' && searchResultList.length > 0"
+                            >
+                                <li v-for="(item, ind) in searchResultList" 
+                                    class="diagItem ellipsis"
+                                    :key="ind"
+                                    :title="item"
+                                    @click="selectSearchItem(index,item,'FeatureStand')"
+                                > 
+                                    {{item}}
+                                </li>
+
+                            </ul>  
+                        </div> 
+                          
+                    </td>
+                    <td class="FeatureRelate" @click.self="clickItemBox">
+                        <el-tooltip :disabled="!item.verifyRelation&&!item.relationNull"  class="item" effect="dark" :content="item.verifyRelation||item.relationNull" placement="top">
+                            <el-input class="groupTextarea" 
+                                ref="textarea"
+                                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> 
+                        <div class="searchItemBox">
+                             <ul 
+                                class="searchItemList"
+                                v-if="showDiagList&&index === searchIndex && searchFiled ==='FeatureRelate' && searchResultList.length > 0"
+                            >  
+                                <li v-for="(item, ind) in searchResultList" 
+                                    class="diagItem ellipsis"  
+                                    :key="ind"
+                                    :title="item"
+                                    @click="selectSearchItem(index,item,'FeatureRelate')"
+                                > 
+                                    {{item}}
+                                </li>
+
+                            </ul>
+                        </div>
+                        
+                    </td>
+                     <td class="FeatureuniqueName inpDisabled">
+                        <el-tooltip :disabled="!item.verifyUnique"  class="item" effect="dark" :content="item.verifyUnique" placement="top">
+                            <el-input class="groupTextarea inpDisabled"  
+                                ref="textarea"
+                                type="textarea"
+                                :readonly = true
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.uniqueName===null ||item.verifyUnique}" 
+                                :title="item.uniqueName" 
+                                v-model.trim="item.uniqueName" 
+                                >
+                            </el-input>
+                            
+                        </el-tooltip> 
+                    </td>
+                    <td class="FeatureResult" :class="{inpDisabled:item.type!=3}" >
+                        <el-tooltip :disabled="!item.verifyResult"  class="item" effect="dark" :content="item.verifyResult" placement="top">
+                            <el-input class="groupTextarea"
+                                ref="textarea"
+                                type="textarea"  
+                                :autosize="{ minRows: 1}"
+                                :readonly="item.type!=3"  
+                                :class="{borderRed:item.verifyResult, inpDisabled:item.type!=3}"  
+                                :title="item.midResult" 
+                                v-model.trim="item.midResult" 
+                                @input="handleInp(index,$event,'FeatureResult')"
+                                @focus="clickItem(index,'FeatureResult')">
+                            </el-input>
+                        </el-tooltip> 
+                    </td>
+                    <td class="FeatureOpera">
+                        <el-button type="text" size="small" class="delete" @click="addItem(index, 1)"><div class="btnOpera">+</div></el-button>
+                        <el-button v-if="index !=0" type="text" size="small" class="delete" @click="delItem(index, 1)"><div class="btnOpera">-</div></el-button>
+                    </td>
+                </tr>
+</template>
+<script>
+export default {
+    props:['item', 'index','featureTypeList','showDiagList','searchIndex',
+            'searchFiled', 'searchResultList'],
+    data() {
+        return {
+
+        }
+    },
+    mounted(){
+        this.$nextTick(()=>{
+            if(Array.isArray(this.$refs.textarea)) {
+                for(let i=0; i <this.$refs.textarea.length; i++) {
+                    this.$refs.textarea[i].resizeTextarea()
+                } 
+            }else {
+                this.$refs.textarea&&this.$refs.textarea.resizeTextarea()
+            }
+            
+        })
+       
+   },
+    methods: {
+        handleInp(index,e,type,itemType) {
+            this.$emit('handleInp',{index,e,type,itemType})
+        },
+        clickItem(index, type) {
+             this.$emit('clickItem',{index, type})
+        },
+        addItem(index, type) {
+          this.$emit('addItem',{index, type}) 
+        },
+        delItem(index, type) {
+          this.$emit('delItem',{index, type}) 
+        },
+        selectSearchItem(index, item, searchType) {
+            this.$emit('selectSearchItem',{index, item, searchType}) 
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    @import '../../less/common.less';
+        table,tr,td {
+            list-style: none;
+        }
+        .topBack {
+            top: 0;
+        }
+        .groupTitle {
+            background-color: #fff;
+            height: 40px;
+            line-height: 40px;
+            padding-left: 20px;
+        }
+        .searchInput, .searchName {
+            display: inline-block;
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid #a9a9a9;
+            margin: 0px 0 0 0;
+            padding: 0 5px;
+            float: left;
+            margin-top: 4px;
+        }
+        .isRequired .el-form-item__label::before {
+            content: '*';
+            color: red;
+        }
+        .searchName {
+            border-left: none;
+            cursor: pointer;
+            font-size: 16px;
+            padding: 0 14px;
+        }
+        .itemList {
+            position: absolute;
+            background: #fff;
+            width: 162px;
+            max-height: 150px;
+            border: 1px solid #a9a9a9;
+            left: 138px;
+            top: 37px;
+            z-index: 2;
+            overflow-y: auto;
+        }
+        .diagItem {
+            padding: 0 5px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        .diagItem:hover {
+            background: #f5f7fa;
+        }
+        .addDepartForm {
+            position: relative;
+            background-color: #fff;
+            padding: 20px;
+            margin: 70px 20px 0px 20px;
+        }
+        .addDiagName {
+            position: relative;
+        }
+        .symptomList {
+            position: relative;
+            background-color: #fff;
+             padding: 0px 20px 100px 20px;
+             margin: 0px 20px 40px 20px;
+             min-height: 400px;
+        }
+        
+        .diagTable {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            tr {
+                td {
+                    /deep/textarea::-webkit-scrollbar{
+                        display: none;
+                    }
+                    position: relative;
+                    border: 1px solid #a9a9a9;
+                    text-align: center;
+                }
+                .FormulaOpera, .FeatureOpera{
+                    background: #fff;
+                    border: none;
+                    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%;
+            }
+            .selectedContentGroup {
+                width: 55%;
+            }
+            .selectedContentOpera {
+                width: 20%;
+            }
+        }
+        .groupInput {
+            text-align: center;
+            color: #606266;
+            width: 80%;
+        }
+        .groupTextarea {
+             text-align: center;
+            color: #606266;
+            width: 100%;
+        }
+        .btn {
+            position: absolute;
+            background-color: #fff;
+            width: 100%;
+            margin: 20px 0;
+            height: 40px;
+            bottom: 0px;
+            right: 0px;
+            .btnBox {
+                position: absolute;
+                right: 0px;
+                
+            }
+            .el-button {
+                margin-right: 20px;
+               
+            }
+        }
+        .tableTitle{
+            background: rgba(239,243,249,1);
+            height: 40px;
+        }
+        .require::after{
+            content:"*";
+            color: red;
+        }
+        .borderRed {
+            border: 3px solid red ;
+            box-sizing: border-box;
+        }
+        .colorRed {
+            color: red;
+        }
+        .FeatureSort {
+            width: 5%;
+        }
+        .FeatureType {
+            width: 7%;
+            padding: 0 5px;
+        }
+        .FeatureNumber {
+            width: 8%;
+        }
+        .FeatureStand {
+            width: 20%;
+        }
+        .FeatureRelate {
+            width: 30%;
+        }
+        .FeatureuniqueName {
+            width: 10%;
+        }
+        .FeatureResult {
+            width: 10%;
+        } 
+        .FeatureOpera{
+            width: 10%;
+        } 
+        .FormulaSort{
+            width: 5%;
+        } 
+        .FormulaType{
+            width: 7%;
+            padding: 0 5px;
+        } 
+        .FormulaNumber{
+            width: 78%;
+        } 
+        .FormulaOpera{
+            width: 10%;
+        }
+        .btnOpera {
+            width:16px;
+            height:16px;
+            background:rgba(176,190,197,1);
+            border-radius: 50%;
+            color: #fff;
+            line-height: 16px;
+            text-align: center;
+        }
+        /deep/.el-input--mini .el-input__inner {
+            width: 80px;
+        }
+        /deep/ .is-disabled {
+                    background: #ECECEC;
+                    color: #AAAAAA;
+                    border: none;
+                }
+        .selectType {
+            input {
+                border: 3px solid red;
+            }
+            input:hover {
+                border: 3px solid red;
+            }
+        }
+        .moduleTitle {
+            margin: 0 0 10px 0;
+            font-weight: 600;
+        }
+        .inpDisabled{
+            background: #ECECEC;
+            cursor: not-allowed;
+            textarea {
+                background: #ECECEC;
+                color: #AAAAAA;
+                border: none;
+                cursor: not-allowed;
+                height: 100%;
+            }
+            
+        }
+        .inpTips {
+            font-size: 14px;
+            color: red;
+            margin-bottom: 10px;
+        }
+        #upFile{
+            display: none
+        }
+        .disableDiv {
+            background: rgb(236, 236, 236);
+            box-sizing: border-box;
+            cursor: not-allowed;
+            font-size: 14px;
+            line-height: 20px;
+            padding: 5px 0;
+            min-height: 30px;
+        }
+        .searchItemBox{
+            position: relative;
+            bottom: 0px;
+        }
+        .searchItemList {
+            position: absolute;
+            border: 1px solid #a9a9a9;
+            box-sizing: border-box;
+            top: 4px;
+            z-index: 2;
+            width: 100%;
+            max-height: 150px;
+            overflow: auto; 
+            background: #fff;
+            margin: 0 0 20px 0;
+        }   
+    
+</style>

src/components/diagBase/DisFormulaItem.vue

@@ -0,0 +1,334 @@
+<template>
+    <tr> 
+                    <td class="FormulaSort">{{index +1}}</td>
+                    <td class="FormulaType">
+                        <el-select size="mini" :class="{selectType: item.verifyType}" v-model.trim="item.type" placeholder="标签类型"  @change="clickItem(index,'FormulaType')">
+                            <el-option v-for="item in formulaTypeList" :label="item.name" :value="item.key" :key="item.key"></el-option>
+                        </el-select>
+                    </td>
+                    <td class="FormulaNumber">
+                        <el-tooltip :disabled="!item.verifyFormula"  class="item" effect="dark" :content="item.verifyFormula" placement="top">
+                            <el-input class="groupTextarea"
+                                ref="textarea"
+                                type="textarea"  
+                                :readonly="!item.type"
+                                :autosize="{ minRows: 1}"
+                                :class="{borderRed:item.verifyFormula,inpDisabled:!item.type}"
+                                :title="item.formula" 
+                                v-model.trim="item.formula" 
+                                @input="handleInp(index,$event,'FormulaNumber',item.type)"
+                                @focus="clickItem(index,'FormulaNumber')">
+                            </el-input>
+                        </el-tooltip> 
+                    </td>
+                   <td class="FeatureOpera">
+                        <el-button type="text" size="small" class="delete" @click="addItem(index, 2)"><div class="btnOpera">+</div></el-button>
+                        <el-button v-if="index !=0" type="text" size="small" class="delete" @click="delItem(index, 2)"><div class="btnOpera">-</div></el-button>
+                    </td>
+                </tr>
+</template>
+<script>
+export default {
+    props:['item', 'index','formulaTypeList'],
+    data() {
+        return {
+
+        }
+    },
+    mounted(){
+        this.$nextTick(()=>{
+            if(Array.isArray(this.$refs.textarea)) {
+                for(let i=0; i <this.$refs.textarea.length; i++) {
+                    this.$refs.textarea[i].resizeTextarea()
+                } 
+            }else {
+                this.$refs.textarea&&this.$refs.textarea.resizeTextarea()
+            }
+            
+        })
+       
+   },
+    methods: {
+        handleInp(index,e,type,itemType) {
+            this.$emit('handleInp',{index,e,type,itemType})
+        },
+        clickItem(index, type) {
+             this.$emit('clickItem',{index, type})
+        },
+        addItem(index, type) {
+          this.$emit('addItem',{index, type}) 
+        },
+        delItem(index, type) {
+          this.$emit('delItem',{index, type}) 
+        }
+        
+    }
+}
+</script>
+<style lang="less" scoped>
+    @import '../../less/common.less';
+        table,tr,td {
+            list-style: none;
+        }
+        .topBack {
+            top: 0;
+        }
+        .groupTitle {
+            background-color: #fff;
+            height: 40px;
+            line-height: 40px;
+            padding-left: 20px;
+        }
+        .searchInput, .searchName {
+            display: inline-block;
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid #a9a9a9;
+            margin: 0px 0 0 0;
+            padding: 0 5px;
+            float: left;
+            margin-top: 4px;
+        }
+        .isRequired .el-form-item__label::before {
+            content: '*';
+            color: red;
+        }
+        .searchName {
+            border-left: none;
+            cursor: pointer;
+            font-size: 16px;
+            padding: 0 14px;
+        }
+        .itemList {
+            position: absolute;
+            background: #fff;
+            width: 162px;
+            max-height: 150px;
+            border: 1px solid #a9a9a9;
+            left: 138px;
+            top: 37px;
+            z-index: 2;
+            overflow-y: auto;
+        }
+        .diagItem {
+            padding: 0 5px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        .diagItem:hover {
+            background: #f5f7fa;
+        }
+        .addDepartForm {
+            position: relative;
+            background-color: #fff;
+            padding: 20px;
+            margin: 70px 20px 0px 20px;
+        }
+        .addDiagName {
+            position: relative;
+        }
+        .symptomList {
+            position: relative;
+            background-color: #fff;
+             padding: 0px 20px 100px 20px;
+             margin: 0px 20px 40px 20px;
+             min-height: 400px;
+        }
+        
+        .diagTable {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            tr {
+                td {
+                    /deep/textarea::-webkit-scrollbar{
+                        display: none;
+                    }
+                    position: relative;
+                    border: 1px solid #a9a9a9;
+                    text-align: center;
+                }
+                .FormulaOpera, .FeatureOpera{
+                    background: #fff;
+                    border: none;
+                    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%;
+            }
+            .selectedContentGroup {
+                width: 55%;
+            }
+            .selectedContentOpera {
+                width: 20%;
+            }
+        }
+        .groupInput {
+            text-align: center;
+            color: #606266;
+            width: 80%;
+        }
+        .groupTextarea {
+             text-align: center;
+            color: #606266;
+            width: 100%;
+        }
+        .btn {
+            position: absolute;
+            background-color: #fff;
+            width: 100%;
+            margin: 20px 0;
+            height: 40px;
+            bottom: 0px;
+            right: 0px;
+            .btnBox {
+                position: absolute;
+                right: 0px;
+                
+            }
+            .el-button {
+                margin-right: 20px;
+               
+            }
+        }
+        .tableTitle{
+            background: rgba(239,243,249,1);
+            height: 40px;
+        }
+        .require::after{
+            content:"*";
+            color: red;
+        }
+        .borderRed {
+            border: 3px solid red ;
+            box-sizing: border-box;
+        }
+        .colorRed {
+            color: red;
+        }
+        .FeatureSort {
+            width: 5%;
+        }
+        .FeatureType {
+            width: 7%;
+            padding: 0 5px;
+        }
+        .FeatureNumber {
+            width: 8%;
+        }
+        .FeatureStand {
+            width: 20%;
+        }
+        .FeatureRelate {
+            width: 30%;
+        }
+        .FeatureuniqueName {
+            width: 10%;
+        }
+        .FeatureResult {
+            width: 10%;
+        } 
+        .FeatureOpera{
+            width: 10%;
+        } 
+        .FormulaSort{
+            width: 5%;
+        } 
+        .FormulaType{
+            width: 7%;
+            padding: 0 5px;
+        } 
+        .FormulaNumber{
+            width: 78%;
+        } 
+        .FormulaOpera{
+            width: 10%;
+        }
+        .btnOpera {
+            width:16px;
+            height:16px;
+            background:rgba(176,190,197,1);
+            border-radius: 50%;
+            color: #fff;
+            line-height: 16px;
+            text-align: center;
+        }
+        /deep/.el-input--mini .el-input__inner {
+            width: 80px;
+        }
+        /deep/ .is-disabled {
+                    background: #ECECEC;
+                    color: #AAAAAA;
+                    border: none;
+                }
+        .selectType {
+            input {
+                border: 3px solid red;
+            }
+            input:hover {
+                border: 3px solid red;
+            }
+        }
+        .moduleTitle {
+            margin: 0 0 10px 0;
+            font-weight: 600;
+        }
+        .inpDisabled{
+            background: #ECECEC;
+            cursor: not-allowed;
+            textarea {
+                background: #ECECEC;
+                color: #AAAAAA;
+                border: none;
+                cursor: not-allowed;
+                height: 100%;
+            }
+            
+        }
+        .inpTips {
+            font-size: 14px;
+            color: red;
+            margin-bottom: 10px;
+        }
+        #upFile{
+            display: none
+        }
+        .disableDiv {
+            background: rgb(236, 236, 236);
+            box-sizing: border-box;
+            cursor: not-allowed;
+            font-size: 14px;
+            line-height: 20px;
+            padding: 5px 0;
+            min-height: 30px;
+        }
+        .searchItemBox{
+            position: relative;
+            bottom: 0px;
+        }
+        .searchItemList {
+            position: absolute;
+            border: 1px solid #a9a9a9;
+            box-sizing: border-box;
+            top: 4px;
+            z-index: 2;
+            width: 100%;
+            max-height: 150px;
+            overflow: auto; 
+            background: #fff;
+            margin: 0 0 20px 0;
+        }   
+    
+</style>