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"
                :param="$route.params"
                linkTo="ChemicalAndCommonMapping"
        ></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
                            v-if="showMealNameList&&mealNameList.length >0"
                            class="itemList mealNameList"
                            ref="mealNameList"
                    >
                        <li
                                v-for="item in mealNameList"
                                class="mealNameItem ellipsis"
                                :title="item.conceptName"
                                @click="selectMealName(item)"
                                :key="item.conceptId">
                            {{item.conceptName}}
                        </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
                            v-if="showItemNameList&&itemNameList.length >0"
                            class="itemList itemNameList"
                            ref="itemNameList"
                    >
                        <li
                                v-for="item in itemNameList"
                                class="mealNameItem ellipsis"
                                :title="item.conceptName"
                                @click="selectItemName(item)"
                                :key="item.conceptId">
                            {{item.conceptName}}
                        </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
                            v-if="showUniqueNameList&&uniqueNameList.length >0"
                            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="btn">
            <!-- <span class="sumbit" @click="submitForm">建立关联</span> -->
            <el-button
                    type="primary"
                    :disabled = 'saveDisable'
                    @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:[],
        showMealNameList: false,
        showItemNameList: false,
        showUniqueNameList: false,
        form: {
          mealName: '', //大项名称
          mealId: '', //大项Id
          itemName: '',   //小项名称
          itemId: '',     //小项Id
          uniqueName: '',    //公表名称，必填
          uniqueId:'' //公表项Id
        },
        saveDisable: false  //保存按钮禁止点击

      }
    },
    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.showSearchList()
      },
      searchMealItem(type) {
        if( type == '1' || type == '2') {
          this.getTagList(type)
        } else if ( type == '3') {
          this.getAllLisConcept()
        }

      },
      getTagList(type) {
        let param = {
          relationPosition: 3
        }
        if (type == 1) {
          param.name = this.mealText.trim();
          param.typeId = 12
        } else if (type == 2) {
          param.name = this.itemText.trim();
          param.typeId = 13
        }
        if(!param.name) {
          return
        }
        api.getConceptInfoAssay(param).then((res) => {
          if (res.data.code === '0') {
            if (type == 1) {
              this.mealNameList = res.data.data;
              this.showSearchList('showMealNameList')
            } else if (type == 2) {

              this.itemNameList = res.data.data;
              this.showSearchList('showItemNameList')
            }
          }
        })

      },
      getAllLisConcept() {
        const param = {
          conceptName: this.uniqueText
        }
        if(!param.conceptName) {
          return
        }
        api.getAllLisConcept(param).then((res) => {
          if(res.data.code === '0') {
            this.uniqueNameList = res.data.data
            this.showSearchList('showUniqueNameList')
          }
        })
      },
      focuInput() {
        this.showSearchList()
      },
      showSearchList(type) {
        this.showMealNameList = false
        this.showItemNameList = false
        this.showUniqueNameList = false
        if(type === 'showMealNameList') {
          this.showMealNameList = true
        } else if (type === 'showItemNameList') {
          this.showItemNameList = true
        } else if (type === 'showUniqueNameList'){
          this.showUniqueNameList = true
        }
      },
      selectMealName(item) {
        this.form.mealName = item.conceptName
        this.form.mealId = item.conceptId
        // this.$refs['mealNameList'].style.display='none'
        this.mealText = ''
        this.mealNameList = []
      },
      selectItemName(item) {
        this.form.itemName = item.conceptName
        this.form.itemId = item.conceptId
        this.itemText = ''
        this.itemNameList = []
      },
      selectUniqueName(item) {
        this.form.uniqueName = item.conceptName
        this.form.uniqueId = item.conceptId
        //搜索公表项自动填充大小项（目前暂时不需要）
        // let nameArr = item.conceptName.split('--');
        // this.form.mealName = nameArr[0]
        // this.form.itemName = nameArr[1]
        // this.$refs['uniqueNameList'].style.display='none'
        this.uniqueText = ''
        this.uniqueNameList = []
      },
      initForm() {
        this.form.mealName = ''
        this.form.mealId = ''
        this.form.itemName = ''
        this.form.itemId = ''
        this.form.uniqueName = ''
        this.form.uniqueId = ''
      },
      submitForm() {
        const { itemId, mealId, uniqueId } = this.form
        if (!mealId || !uniqueId) {
          this.warning('请填写相关数据')
          return
        }
        //通过必填验证，提交保存
        const param = {
          "itemId": itemId,
          "mealId": mealId,
          "uniqueId": uniqueId
        }
        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)
          }
          this.saveDisable = false
        })
      },
      showSaveDialog(param) {
        //  修改（不需要）
        //   if(this.isEdit) {
        //       this.saveLisMapping(param)
        //   } else {
        this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        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.saveDisable = false
          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;
        min-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%;
        min-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;
        background: #fff;
        width: 162px;
        max-height: 150px;
        border: 1px solid #a9a9a9;
        left: 150px;
        top: 42px;
        z-index: 2;
        overflow-y: auto;
    }
    .itemList {
        width: calc(100% - 131px);
    }
    .mealNameItem {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
    }
    .mealNameItem:hover {
        background: #f5f7fa;
    }
    .selectItemName {
        display: inline-block;
        width: calc(100% - 160px);
    }
    .btn {
        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>