cdssHospital/src/components/icss/fusion/AddFusion.vue

<template>
  <div class="AddChemicalAndCommonMappingWrapper clearfix" @click="close">
    <crumbs title="血库关联维护-添加关联" class="topBack" :param="$route.params" linkTo="Fusion"></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" type="text" v-model="hisName" />
        </div>
        <div class="itemLabel clearfix">
          <label class="itemLabelName">用血类型预览：</label>
          <span class="selectItemName">{{hisName}}</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"
              @click="selectUniqueName(item)"
              :key="item"
            >{{item}}</li>
          </ul>
        </div>
        <div class="itemLabel">
          <!-- <label class="itemLabelName isRequired">诊断名称预览：</label> -->
          <label class="itemLabelName">用血类型预览：</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: 'AddFusion',
  data() {
    return {
      hisName: '', //检查项目
      itemText: '', //化验小项搜索文字内容
      uniqueText: '', //公表项搜索文字内容
      isEdit: false,
      editId: '',
      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.editId = data.id;
      this.uniqueText = data.uniqueName;
      this.hisName = data.hisName;
      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();
      }
    },


    // 标准术语搜索列表
    getAllLisConcept() {
      let params = {
        type: 8,  //血液
        inputStr: this.uniqueText,
        sex: 3,
        age: 0
      };
      if (!params.inputStr) {
        return;
      }
      api.retrievalSearch(params).then(res => {
        if (res.data.code === '0') {
          this.uniqueNameList = res.data.data.transfusionNames;
          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.hisName = '';
      this.mealNameList = [];
    },
    selectItemName(item) {
      this.form.itemName = item.conceptName;
      this.form.itemId = item.conceptId;
      this.itemText = '';
      this.itemNameList = [];
    },
    // 选中诊断标准术语
    selectUniqueName(item) {
      this.form.uniqueName = item;
      this.uniqueNameList = [];
    },
    // 初始化表单数据
    initForm() {
      this.form.uniqueName = '';
      this.hisName = '';
      this.uniqueText = '';
    },

    // 建立关联-参数处理
    submitForm() {
      const { hisName } = this;
      const { uniqueName } = this.form;
      if (!hisName || !uniqueName) {
        this.warning('请填写相关数据');
        return;
      }
      let params = {
        hisName: hisName,
        uniqueName: uniqueName
      };
      this.showSaveDialog(params);
    },
    // 建立关联-映射关系是否已存在
    showSaveDialog(params) {
      this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
      api
        .fusionIsExistRecord(params)
        .then(res => {
          if (!res.data.data) {
            // 不存在,创建新的关联
            // 如果是编辑时,需要携带id
            if (this.isEdit) {
              params = { ...params, id: this.editId };
            }
            this.saveLisMapping(params, '关联建立成功', 'success');
          } else {
            // 已存在,提示修改
            // this.showConfirmDialog('该关联已存在是否替换旧的关系信息', () => {
            //   this.saveLisMapping(params, '关联建立成功', 'success');
            // });
            this.warning('该条关联已存在,请重新编辑!');
            this.saveDisable = false;
          }
        })
        .catch(err => {
          this.warning(err);
        });
    },

    // 映射关系不存在-建立关联
    saveLisMapping(params, msg, type) {
      api.saveOrUpdateFusionRecord(params).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;
      });
    },
    // 关联已存在模态框
    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>