platformFront/src/components/diagBase/DisFeatureItem.vue

<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" :class="{borderRed:item.verifyCode||item.codeNull}"  @click.self="clickItemBox" >
                        <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="{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" :class="{borderRed:item.verifyStandard||item.standardNull}"    @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}"
                                :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"  :class="{borderRed:item.verifyRelation|| item.relationNull}"  @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}"
                                :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"  :class="{borderRed:item.uniqueName===null ||item.verifyUnique}" >
                        <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}"
                                :title="item.uniqueName" 
                                v-model.trim="item.uniqueName" 
                                >
                            </el-input>
                            
                        </el-tooltip> 
                    </td>
                    <td class="FeatureResult" :class="{inpDisabled:item.type!=3,borderRed:item.verifyResult,}" @click.self="clickItemBox">
                        <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="{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 {
            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})
            }, 100)
            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}) 
        },
        selectSearchItem(index, item, searchType) {
            this.$emit('selectSearchItem',{index, item, searchType}) 
        },
        clickItemBox(e) {
            e.target.children[0].focus()
        },
    }
}
</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>