platformFront/src/components/icss/AddChemicalAndCommonMapping.vue

<template>
    <div class="AddChemicalAndCommonMappingWrapper clearfix" @click="close">
        <!-- <div class="groupTitle"><i
                class="el-icon-back"
                @click="back"
        ></i> 化验大小项与公表项对应维护--添加关联</div> -->
        <crumbs
          title="化验大小项与公表项对应维护--添加关联"
          class="topBack"
          linkTo="/admin/LT-YXSJWH-HYDXXYGBXDY"
        ></crumbs>
        <div class="AddChemicalAndCommonMappingBox clearfix">
            <div class="titleBox clearfix">
                <p class="title">关联公表项</p>
                <p class="title">关联化验项</p> 
            </div>
            <div class="leftBox clearfix" >
                
                <div class="itemLabel clearfix">
                    <label class="itemLabelName">选择化验大项：</label> 
                    <input class="searchInput" @focus="focuInput" type="text" v-model = "mealText"> 
                    <span class="searchName" @click="searchMealItem(1)">搜索</span>
                    <ul class="itemList mealNameList" ref="mealNameList">
                      <li 
                        v-for="item in mealNameList" 
                        class="mealNameItem ellipsis"
                        :title="item.tagName"
                        @click="selectMealName(item)"
                        :key="item.id">
                        {{item.tagName}}
                      </li>
                    </ul>
                    
                </div>
                <div class="itemLabel clearfix">
                    <label  class="itemLabelName isRequired">已选择化验大项：</label>
                    <span class="selectItemName">{{form.mealName}}</span>
                </div>
                <div class="itemLabel clearfix">
                    <label  class="itemLabelName">选择化验小项：</label>
                    <input class="searchInput"  @focus="focuInput" type="text" v-model = "itemText"> 
                    <span class="searchName" @click="searchMealItem(2)">搜索</span>
                    <ul class="itemList itemNameList" ref="itemNameList">
                      <li 
                        v-for="item in itemNameList" 
                        class="mealNameItem ellipsis"
                        :title="item.tagName"
                        @click="selectItemName(item)"
                        :key="item.id">
                        {{item.tagName}}
                      </li>
                    </ul>
                </div>
                <div class="itemLabel">
                    <label  class="itemLabelName">已选择化验小项：</label>
                    <span class="selectItemName">{{form.itemName}}</span>
                </div>
            </div>
            <div class="midBox">
                <img class="midLogo" src="../../images/relation.png" alt="">
                <p class="midTitle">相互关联</p>
            </div>
            <div class="rightBox">
                <div class="itemLabel">
                    <label  class="itemLabelName">选择公表项：</label>
                    <input class="searchInput"  @focus="focuInput" type="text" v-model = "uniqueText"> 
                    <span class="searchName" @click="searchMealItem(3)">搜索</span>
                    <ul class="itemList uniqueNameList" ref="uniqueNameList">
                      <li 
                        v-for="item in uniqueNameList" 
                        class="mealNameItem ellipsis"
                        :title="item.conceptName"
                        @click="selectUniqueName(item)"
                        :key="item.conceptName">
                        {{item.conceptName}}
                      </li>
                    </ul>
                </div>
                <div class="itemLabel">
                    <label  class="itemLabelName isRequired">已选择公表项：</label>
                    <span class="selectItemName">{{form.uniqueName}}</span>
                </div>
            </div>
        </div>
       <div class="sumbitBox">
           <!-- <span class="sumbit" @click="submitForm">建立关联</span> -->
           <el-button
                type="primary"
                @click="submitForm"
            >建立关联</el-button>
        </div> 
    </div>
    
</template>
<script>
import api from '@api/icss.js';

export default {
    name: 'AddChemicalAndCommonMapping',
    data() {
        return {
            mealText: '', //化验大项搜索文字内容
            itemText: '',   //化验小项搜索文字内容
            uniqueText: '',     //公表项搜索文字内容
            isEdit: false,
            mealNameList:[],
            itemNameList: [],
            uniqueNameList:[],
            form: {
                mealName: '', //大项名称
                itemName: '',   //小项名称
                uniqueName: '',    //公表名称，必填
            }
            
        }
    },
    created() {
        //修改（不需要）
        // const { isEdit, data } = this.$route.params
        // if(isEdit) {
        //     this.isEdit = isEdit;
        //     this.form.mealName = data.mealName
        //     this.form.itemName = data.itemName
        //     this.form.uniqueName = data.uniqueName
        // }
    },
    methods: {
        close() {
            this.mealNameList = [];
            this.itemNameList =[];
            this.uniqueNameList = [];
            this.$refs['mealNameList'].style.display='none';
            this.$refs['itemNameList'].style.display='none';
            this.$refs['uniqueNameList'].style.display='none';
        },
        back() {
            this.$router.go(-1)
        },
        searchMealItem(type) {
            if( type == '1' || type == '2') {
                this.getTagList(type)
            } else if ( type == '3') {
                this.getAllLisConcept()
            }
            
        },
        getTagList(type) {
            let param = {}
            if (type == 1) {
                param.tagName = this.mealText
                param.tagType = [7]
                param.type = 5
            } else if (type == 2) {
                param.tagName = this.itemText
                param.tagType = [1]
                param.type = 5
            }
            api.searchTagList(param).then((res) => {
                if (res.data.code === '0') {
                     if (type == 1) {
                        this.mealNameList = res.data.data
                        if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='block' }
                        if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
                        if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
                    } else if (type == 2) {
                       
                        this.itemNameList = res.data.data
                        if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='block' }
                        if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
                        if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
                    }
                }
            })
            
        },
        getAllLisConcept() {
            const param = {
                conceptName: this.uniqueText
            }
            api.getAllLisConcept(param).then((res) => {
                if(res.data.code === '0') {
                    this.uniqueNameList = res.data.data
                    if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='block'}
                    if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
                    if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
                }
            })
        },
        focuInput() {
            this.$refs['mealNameList'].style.display='none'
            this.$refs['itemNameList'].style.display='none'
            this.$refs['uniqueNameList'].style.display='none'
        },
        selectMealName(item) {
            this.form.mealName = item.tagName
            this.$refs['mealNameList'].style.display='none'
            this.mealText = ''
            this.mealNameList = []
        },
        selectItemName(item) {
             this.form.itemName = item.tagName
            this.$refs['itemNameList'].style.display='none'
            this.itemText = ''
            this.itemNameList = []
        },
        selectUniqueName(item) {
             this.form.uniqueName = item.conceptName
            this.$refs['uniqueNameList'].style.display='none'
            this.uniqueText = ''
            this.uniqueNameList = []
        },
        initForm() {
            this.form.mealName = ''
            this.form.itemName = ''
            this.form.uniqueName = ''
        },
        submitForm() {
        const { mealName, itemName, uniqueName } = this.form
        if (!mealName || !uniqueName) {
            this.warning('请填写相关数据')
            return
        }
        //通过必填验证，提交保存
        const param = {
            "itemName": itemName,
            "mealName": mealName,
            "uniqueName": uniqueName
        }
        console.log(param);
        this.showSaveDialog(param);
      },
      saveLisMapping(param, msg, type) {
        api.saveLisMapping(param).then((res) => {
            if (res.data.code === '0') {
            this.warning(res.data.msg || msg, type);
            // this.$router.push({name: 'ChemicalAndCommonMapping'});
            this.initForm();
            } else {
                this.warning(res.data.msg)
            }
        })
      },
      showSaveDialog(param) {
        //  修改（不需要）
        //   if(this.isEdit) {
        //       this.saveLisMapping(param)
        //   } else {
            api.hasLisMapping(param).then((res) => {
                if (!res.data.data) {
                    this.saveLisMapping(param, '关联建立成功', 'success' )
                } else {
                    this.showConfirmDialog('该关联已存在是否替换旧的关系信息', () => {
                        this.saveLisMapping(param, '关联建立成功', 'success' )
                    });
                }
            }).catch((err) => {
                this.warning(err);
            })

        //   }
      },
      showConfirmDialog(msg, resolve) {
        this.$confirm(msg, '提示', {
          customClass: 'confirmRealation',
          confirmButtonText: '是',
          cancelButtonText: '否',
          cancelButtonClass: 'cancelButton',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {
            this.warning('建立失败','error')
        });
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },

    }
}
</script>
<style lang="less">
.AddChemicalAndCommonMappingWrapper {
    .AddChemicalAndCommonMappingBox {
        min-width: 940px;
    }
    color: #606266;
    .topBack {
        top: 0;
    }
    // .groupTitle {
    //     width: calc(100% - 50px);
    //     height: 40px;
    //     background: #fff;
    //     padding: 0 20px 0 30px;
    //     margin-bottom: 20px;
    //     line-height: 40px;
    //     position: relative;
    //     z-index: 5;
            
    // }
    .titleBox {
        padding:  0 0 10px 0px;
    }
    .title {
        width: 50%;
        float: left;
        font-size: 14px;
    }
    .AddChemicalAndCommonMappingBox {
        padding: 20px 30px 20px 30px;
        margin: 70px 20px 0 20px;
        background: #fff;
    }
    .leftBox , .midBox, .rightBox{
        width: 40%;
        float: left;
        height: 200px;
        font-size: 14px;
    }
    .midBox {
        width: 6%;
        padding:  50px 0 0 0;
        text-align: center;
    }
    .midTitle {
        width: 40px;
        margin: 0 auto;
    }
    .midLogo {
        margin: 0 auto;
    }
    .leftBox, .rightBox {
        border: 1px solid #a9a9a9;
        padding: 20px 20px;
    }
    .itemLabel {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: relative;
    }
    .itemLabelName, .searchInput,  .searchName{
        float: left;
        color: #606266;
    }
    .itemLabelName {
        width: 150px;
    }
    .isRequired::before {
        content: '*';
        color: red;
    }
    .searchInput, .mealNameItem {
        padding: 0 5px;
    }
    .searchInput, .searchName {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        border: 1px solid #a9a9a9;
        margin: 8px 0 0 0;
    }
    
    .searchName {
        text-align: center;
        border-left: none;
        cursor: pointer;
        padding: 0 12px;
        font-size: 16px;
    }
    .itemList {
        position: absolute;
        display: none;
        background: #fff;
        width: 162px;
        max-height: 150px;
        border: 1px solid #a9a9a9;
        left: 150px;
        top: 42px;
        z-index: 2;
        overflow-y: auto;
    }
    .mealNameItem {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
    }
    .mealNameItem:hover {
        background: #f5f7fa;
    }
    .selectItemName {
        display: inline-block;
        width: calc(100% - 160px);
    }
    .sumbitBox {
         position: relative;
            background-color: #fff;
            margin: 0px 20px;
            padding: 20px;
            min-width: 960px;
            height: 80px;
            .el-button {
                position: absolute;
                right: 80px;
                top: 20px;
            }
    }
    .sumbit {
        position: absolute;
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;  
        border: 1px solid #a9a9a9;
        text-align: center;
        right: 100px;
    }
}
.confirmRealation {
    .cancelButton{
        border: 1px solid #a9a9a9;
        span {
            color: #606266;
        }
    }  
    

}
</style>