关联维护改弹窗-接口待对

src/components/base/LtModal.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="modal-container">
+        <div class="cover"></div>
+        <div class="modal-box">
+            <div class="modal-title">
+                <a class="close" @click="close()">×</a>
+            </div>
+            <div class="modal-body">
+                <slot></slot>
+            </div>
+            <div class="modal-footer">
+                <a class="confirm btn">确定</a>
+                <a class="cancel btn" @click="close()">取消</a>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name:'lt-modal',
+        data:function(){
+            return{
+
+            }
+        },
+        methods:{
+            close(){
+                this.$emit("close");
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+.modal-container{
+    position: fixed;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 21;
+    .cover{
+        background: #000;
+        opacity: .2;
+        width: 100%;
+        height: 100%;
+    }
+    .modal-box{
+        width: 860px;
+        height: 514px;
+        background: #fff;
+        position: absolute;
+        left: 50%;
+        top:50%;
+        margin-left: -430px;
+        margin-top: -257px;
+        .modal-title{
+            height: 40px;
+            background: #E3EAF4;
+            .close{
+                float: right;
+                margin:3px 13px 0 0;
+                font-size: 22px;
+                color: #979797;
+                cursor: pointer;
+            }
+        }
+        .btn{
+            display: inline-block;
+            width: 70px;
+            height: 34px;
+            line-height: 34px;
+            background: #48C5D7;
+            border-radius: 4px;
+            color: #fff;
+            text-align: center;
+            cursor: pointer;
+        }
+        .cancel{
+            background: #fff;
+            color: #48C5D7;
+            border:1px #48C5D7 solid;
+            margin-left: 40px;
+        }
+        .modal-body{
+            padding:34px 22px ;
+        }
+        .modal-footer{
+            position: absolute;
+            bottom: 60px;
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
+</style>

src/components/cdssManage/disease/Disease.vue

@@ -15,6 +15,16 @@
     <div class="searchBar">
       <div class="searchContent">
         <el-form :inline="true" class="demo-form-inline">
+          <el-form-item label="" class="selectMedicine">
+            <el-select size="mini" v-model="filter.match" placeholder="请选择" clearable>
+              <el-option
+                      v-for="item in matchList"
+                      :label="item.name"
+                      :value="item.name"
+                      :key="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item label="医院诊断名称：">
             <el-input size="mini" v-model="filter.hisName" placeholder="请输入" clearable></el-input>
           </el-form-item>
@@ -61,6 +71,76 @@
         ></el-pagination>
       </div>
     </div>
+    <LtModal v-if="modalVisiable" :disabled="saveDisable" @confirm="submitForm" @close="closeModal">
+      <el-form
+              :model="form"
+              :rules="rules"
+              label-position="right"
+              label-width="120px"
+              ref="relationForm"
+      >
+        <div class="AddChemicalAndCommonMappingBox clearfix">
+          <div class="titleBox clearfix">
+            <p class="title">医院术语</p>
+            <p class="title">标准术语</p>
+          </div>
+          <div class="leftBox clearfix">
+            <el-row>
+              <el-col :span="16">
+                <el-form-item label="诊断名称：" prop="hisName">
+                  <el-input v-model.trim="form.hisName" clearable style="minWidth: 240px"></el-input>
+                </el-form-item>
+                <el-form-item label="诊断名称预览：">
+                  <span class="previewInfo" style="minWidth: 240px">{{form.hisName}}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="midBox">
+            <img class="midLogo" src="../../../images/relation.png" alt />
+            <p class="midTitle">相互关联</p>
+          </div>
+          <div class="rightBox">
+            <el-row>
+              <el-col :span="16">
+                <el-form-item label="诊断名称：" prop="searchText">
+                  <el-select
+                          style="width:100%;minWidth: 240px"
+                          v-model="form.searchText"
+                          filterable
+                          remote
+                          clearable
+                          :loading="showDrop"
+                          loading-text="加载中..."
+                          @change="changeWord"
+                          @focus="handleFocus"
+                          @visible-change="handleVisible"
+                          placeholder="搜索"
+                          :remote-method="searchTerms"
+                          reserve-keyword
+                  >
+                    <el-option
+                            v-for="item in uniqueNameList"
+                            :key="item.icd10Code"
+                            :label="item.name"
+                            :value="item"
+                            :title="item.name"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="诊断名称预览：">
+                  <!-- <span class="previewInfo">{{!isEdit ? form.searchText.name : form.searchText}}</span> -->
+                  <span class="previewInfo" style="minWidth: 240px">{{form.searchText}}</span>
+                </el-form-item>
+                <el-form-item label="ICD编码：">
+                  <span class="previewInfo" style="minWidth: 240px">{{form.icdCode}}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-form>
+    </LtModal>
   </div>
 </template>
 
@@ -68,11 +148,13 @@
 import api from '@api/cdss.js';
 import config from '@api/config.js';
 import utils from '@api/utils.js';
+import LtModal from '@base/LtModal';
 
 export default {
   name: 'Disease', //化验大小项和公表维护
   data: function() {
     return {
+      matchList:[{id:-1,name:'全部'},{id:1,name:'已匹配'},{id:2,name:'未匹配'},{id:3,name:'多项匹配'}],
       list: [],
       searched: false,
       filter: {
@@ -87,9 +169,33 @@ export default {
       uploadInfo: '导入',
       title: '诊断关联维护 | ',
       hospitaiName: '',
-      hospitalId: ''
+      hospitalId: '',
+      isEdit: false,
+      editId: '',
+      uniqueNameList: [],
+      form: {
+          searchText: '', //搜索字段
+          hisName: '',
+          icdCode: ''
+      },
+
+      rules: {
+          hisName: [
+              { required: true, message: '请输入诊断名称', trigger: 'change' },
+              { max: 80, message: '诊断名称最多80字', trigger: 'change' }
+          ],
+          searchText: [
+              { required: true, message: '请选择诊断名称', trigger: 'change' }
+          ]
+      },
+      saveDisable: false, //保存按钮禁止点击
+      showDrop: false, //下拉框显示文字
+      modalVisiable:false,
     };
   },
+  components:{
+      LtModal
+  },
   created() {
     const { data } = this.$route.params;
     this.hospitaiName = (data && data.name) || '';
@@ -232,14 +338,15 @@ export default {
             filter: this.filter
           }
         : { currentPage: this.currentPage, pageSize: this.pageSize };
-      this.$router.push({
+      this.showModal()
+      /*this.$router.push({
         name: 'AddDisease',
         params: Object.assign(pam, {
           isEdit: false,
           data: { hospitalId: this.hospitalId },
           hospitaiName: this.hospitaiName
         })
-      });
+      });*/
     },
     // 修改诊断关联-跳转至编辑页面
     modifyRelation(row) {
@@ -251,14 +358,15 @@ export default {
             filter: this.filter
           }
         : { currentPage: this.currentPage, pageSize: this.pageSize };
-      this.$router.push({
+      /*this.$router.push({
         name: 'AddDisease',
         params: Object.assign(pam, {
           isEdit: true,
           data: { ...item, hospitalId: this.hospitalId },
           hospitaiName: this.hospitaiName
         })
-      });
+      });*/
+      this.showModal();
     },
     currentChange(next) {
       this.currentPage = next;
@@ -438,16 +546,148 @@ export default {
       //解决上传相同文件不触发change
       let inp = document.getElementById('upFile');
       inp.value = '';
-    }
+    },
+    /********新增编辑弹窗**********/
+
+    // 搜索列表
+    searchTerms(query) {
+        if (!query) {
+            this.uniqueNameList = [];
+            return;
+        }
+        this.showDrop = true;
+        let params = {
+            type: 4, //诊断
+            inputStr: query,
+            sex: 3,
+            age: 0
+        };
+        api.retrievalSearch(params).then(res => {
+            this.showDrop = false;
+            if (res.data.code === '0') {
+                this.uniqueNameList = res.data.data.diseaseNames;
+            }
+        });
+    },
+      changeWord(newValue) {
+          this.form.searchText = newValue.name;
+          this.form.icdCode = newValue.icd10Code;
+      },
+
+      handleVisible(flag) {
+          if (!flag) {
+              this.uniqueNameList = [];
+          }
+      },
+      // 获取焦点
+      handleFocus() {},
+
+      // 初始化表单数据
+      initForm() {
+          this.form.hisName = '';
+          this.form.searchText = '';
+          this.form.icdCode = '';
+      },
+      showModal(){
+          this.modalVisiable=true
+      },
+      closeModal(){
+        this.modalVisiable=false
+      },
+      // 建立关联-参数处理
+      submitForm() {
+          this.$refs.relationForm.validate(valid => {
+              if (valid) {
+                  const { searchText, hisName, icdCode } = this.form;
+                  let params = {
+                      hisName: hisName,
+                      uniqueName: searchText,
+                      icdCode: icdCode,
+                      hospitalId: this.hospitalId
+                  };
+                  this.showSaveDialog(params);
+              } else {
+                  console.log('error submit!!');
+                  return false;
+              }
+          });
+      },
+      // 建立关联-映射关系是否已存在
+      showSaveDialog(params) {
+          this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
+          api
+              .diseaseIsExistRecord(params)
+              .then(res => {
+                  if (!res.data.data) {
+                      // 不存在,创建新的关联
+                      // 如果是编辑时,需要携带id
+                      if (this.isEdit) {
+                          params = { ...params, id: this.editId };
+                      }
+                      this.saveLisMapping(params, '保存成功', 'success');
+                  } else {
+                      // 已存在,提示修改
+                      this.warning('该条关联已存在，无法添加');
+                      this.saveDisable = false;
+                  }
+              })
+              .catch(err => {
+                  if (err.code === '900010001') {
+                      return false;
+                  }
+                  this.warning(err);
+              });
+      },
+
+      // 映射关系不存在-建立关联
+      saveLisMapping(params, msg, type) {
+          api.saveOrUpdateDiseaseRecord(params).then(res => {
+              if (res.data.code === '0') {
+                  this.warning(res.data.msg || msg, type);
+                  this.initForm();
+                  this.$router.push({
+                      name: 'Disease',
+                      params: Object.assign({}, this.$route.params, {
+                          currentPage: 1
+                      })
+                  });
+              } else {
+                  this.warning(res.data.msg);
+              }
+              this.saveDisable = false;
+          });
+      },
+      // 关联已存在模态框
+      showConfirmDialog(msg, resolve) {
+          this.$alert(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">
+<style lang="less" scoped>
 @import '../../../less/admin.less';
-</style>
 
-<style lang="less" scoped>
 .delete {
   color: red;
 }
@@ -517,4 +757,131 @@ export default {
 .contentsOther {
   padding: 0 20px;
 }
+/*********新增编辑***********/
+  .topBack {
+    top: 0;
+  }
+  .titleBox {
+    padding: 0 0 10px 0px;
+  }
+  .title {
+    width: 50%;
+    float: left;
+    font-size: 14px;
+  }
+  .leftBox,
+  .midBox,
+  .rightBox {
+    width: 361px;
+    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 #dcdfe6;
+    padding: 20px 10px;
+  }
+  .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;
+  }
+  .previewInfo {
+    padding-left: 4px;
+    display: inline-block;
+    margin-top: 8px;
+    // width: calc(100% - 160px);s
+    line-height: 24px;
+    overflow: hidden;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+  .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>