platformFront/src/components/icss/AddAssaySon.vue

<template>
    <div class="assayBox" @click="close">
        <crumbs
          :title="'化验子项维护-'+titleText"
          class="topBack"
          :param="$route.params"
          linkTo="AssaySon"
        ></crumbs>
        <el-form :model="form" ref="ruleForm"  class="addDepartForm">
            <p class="assayTitle">添加化验标准术语</p>
            <el-form-item  class="addDepartFormItem"  v-if="!isEdit" label="添加：" prop="department">
                <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchConcept"> 
                <span class="searchName" @click="searchDiag">搜索</span>
                <ul class="itemList" v-show="conceptList.length>0">
                    <li 
                    v-for="item in conceptList" 
                    class="diagItem ellipsis"
                    :title="item.conceptName"
                    @click="selectDiag(item)"
                    :key="item.conceptId">
                    {{item.conceptNameType||item.conceptName}}
                    </li>
                </ul>
            </el-form-item>
             <el-form-item class="isRequired" label="已选择化验标准术语：" prop="type">
                {{form.conceptNameType||form.conceptName}}
            </el-form-item>
        </el-form>
        <div class="symptomList">
            <div class="screenIndex clearfix">
                    <p class="assayTitle">化验子项添加</p>
                    <label class="screenIndexLabel">添加：</label>
                    <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchIndexVal"> 
                    <span class="searchName" @click="searchIndex">搜索</span>
                    <ul class="itemList indexList" v-show="indexList.length>0">
                        <li 
                        v-for="item in indexList" 
                        class="diagItem ellipsis"
                        :title="item.conceptName"
                        @click="selectIndex(item)"
                        :key="item.conceptName">
                        {{item.conceptNameType||item.conceptName}}
                        </li>
                    </ul>
            </div>
            <table class="indexTab">
                
                <tr>
                    <td class="selectedContent">已选择内容</td>
                    <td class="selectedContentOpera">操作</td>
                </tr>
                <tr v-for="(item, index) in selectedIndexList" :key="item.conceptId"> 
                    <!-- <td class="selectedContent ">{{item.parentConceptName?item.conceptName+'（'+item.parentConceptName+'）':item.conceptName}}</td> -->
                    <td class="selectedContent ">{{item.conceptNameType||item.conceptName}}</td>
                    <td class="selectedContentOpera"><el-button type="text" size="small" class="delete" @click="delSelectedIndex(item, index)">删除</el-button></td>
                </tr>
            </table>
        </div>
        <div class="btn">
            <el-button
            type="primary"
            :disabled = 'saveDisable'
            @click="submitForm('ruleForm')"
            >确 定</el-button>
        </div>
    </div>
    
</template>

<script>
  import api from '@api/icss.js';
  export default {
    name: 'AddAssaySon',
    data() {
      return{   
        form: {
            conceptId: '', 
            conceptName:'' ,
            conceptNameType:''
        },
        titleText: '添加化验子项',
        conceptList: [],
        indexList: [],
        selectedIndexList: [],  //选择的同义词
        searchConcept: '',
        searchIndexVal: '',
        isEdit: false,
        nodeList:[], //化验子项列表
        saveDisable: false 
      }
    },
    created(){
        const { isEdit, data } = this.$route.params;
        if(isEdit) {
          this.isEdit = isEdit;
          this.titleText = '修改化验子项';
          this.form.conceptId = data.conceptId;
          this.form.conceptName = data.conceptName;
          this.form.conceptNameType = data.conceptNameType;
          this.selectedIndexList = data.nodeList;
        }
    },
    methods: {
        close() {
            this.conceptList = [];
            this.indexList = [];
        },
        back(){
            this.$router.go(-1);
        },
        searchDiag() {
            const param = {
              "name": this.searchConcept,
              "relationId": 18,
              "relationPosition": 1,
              "typeId": 12
            }
            api.getConceptInfoAssay(param).then((res)=>{
               if(res.data.code === '0') {
                   this.conceptList = res.data.data
                }
            })
        },
        selectDiag(item) {
            this.form.conceptId = item.conceptId;
            this.form.conceptName = item.conceptName;
            this.form.conceptNameType = item.conceptNameType;
            this.searchConcept = '';
            this.conceptList=[];
        },
        focuInput() {
            // 聚焦时清空搜索结果？   
        },
        selectedTags() {//已选项ids
          let selectedTags = []
          for (let i =0; i < this.selectedIndexList.length; i++) {
            selectedTags.push(this.selectedIndexList[i].conceptId)
          }
          return selectedTags
        },
        searchIndex() {
           const notIds = this.selectedTags();
           const param = {
            "name": this.searchIndexVal,
            "relationId": 18,
            "relationPosition": 2,
            "typeId": 13,
            "relationConceptId":this.form.conceptId,
            "excludedConceptIds":notIds
          }
          
          api.getConceptInfoAssay(param).then((res)=>{
             if(res.data.code === '0') {
                 this.indexList = res.data.data;
              }
          })
        },
        selectIndex(item) {
          this.selectedIndexList.push(item);
          this.indexList = [];
        },
        delSelectedIndex(selectedItem, index) {
            this.selectedIndexList.splice(index, 1)
            this.nodeList.splice(index, 1)
        },
        submitForm(formName) {
            if(!this.form.conceptId) {
                this.warning('请选择化验标准术语')
                return
            }
            if(this.selectedIndexList.length === 0) {
                this.warning('请添加化验子项')
                return
            }
            this.showDelDialog();
        },
        showDelDialog() {
          const selected = this.selectedIndexList;
          for (let i = 0; i < selected.length; i++) {
            let item = {};
            item.conceptId = selected[i].conceptId;
            item.relationId = 18;
            this.nodeList.push(item);
          }
          const param ={
            "conceptId": this.form.conceptId,
            "nodeList": this.nodeList,
            "sonRelationId": 18
          }
          this.showConfirmDialog('是否建立该关联？', () => {
              this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.addAssaySon(param).then((res) => {
              if (res.data.code  === '0') {
                  this.warning(res.data.msg || '关联成功', 'success','1000')
                  setTimeout(() => {
                    //返回带搜索条件的首页
                  this.$router.push({
                      path:'AssaySon',
                    params: Object.assign({}, this.$route.params, {currentPage: 1})
                  })
                  }, 1000);
              } else {
                  this.warning(res.data.msg)
              }
              this.saveDisable = false
              }).catch((err) => {
                  this.warning(err);
              })
          });
        },
        showConfirmDialog(msg, resolve) {
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                resolve();
            }).catch(() => {});
        },
        warning(msg, type,time) {
            this.$message({
                showClose: true,
                message: msg,
                type: type || 'warning',
                duration:time || '3000'
            })
        },
    }
  }
</script>

<style lang="less">
    @import '../../less/common.less';
    .assayBox {
        color: #606266;
        min-width: 980px;
        .topBack {
            top: 0;
        }
        .assayTitle{
            font-weight: bold;
            margin-bottom: 20px;
        }
        .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;
            // display: none;
            background: #fff;
            width: 162px;
            max-height: 150px;
            border: 1px solid #a9a9a9;
            left: 54px;
            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;
            border-bottom: 1px solid #c0c4cc;
        }
        .addDepartFormItem {
            position: relative;
        }
        .symptomList {
            background-color: #fff;
             padding: 20px;
             margin: 0px 20px 0px 20px;
             min-height: 400px;
        }
        .screenIndexLabel {
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
        .indexTab {
            // width: 100%;
            width: 600px;
            border-collapse: collapse;
            tr {
                td {
                    padding: 5px 10px;
                    border-bottom: 1px solid #a9a9a9;
                    text-align: center;
                }
            }
            .selectedContent {
                width: 25%;
            }
            .selectedContentGrop {
                width: 55%;
            }
            .selectedContentOpera {
                width: 20%;
            }
        }
        .screenIndex {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
        }
        .indexList {
            left: 42px;
            top: 78px;
        }
        .groupInput {
            text-align: center;
            height: 28px;
            color: #606266;
            width: 60%;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            height: 40px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>