platformFront/src/components/diagBase/DisFormulaItem.vue

<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" :class="{borderRed:item.verifyFormula}">
                        <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>
import config from '@api/config.js';
export default {
    props:['item', 'index','formulaTypeList'],
    data() {
        return {
            timer: undefined
        }
    },
    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) {
             clearTimeout(this.timer)
            let timer = setTimeout(()=>{
                clearTimeout(this.timer);
                this.$emit('handleInp',{index,e,type,itemType})
            }, config.delayTime)
            this.timer = timer
        },
        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 !important;
            box-sizing: border-box !important;
        }
        .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>