条目关联质控类型

src/api/config.js

@@ -320,6 +320,13 @@ export default {
       'delQcType': '/api/mrman/qc/qcType/delete', //删除质控类型
       'getQcTypeItem': '/api/mrman/qc/qcType/getEntryByHospital', //获取质控条目
       'getQcTypeDetail':'/api/mrman/qc/qcType/getById', //获取质控类型明细
+      'getQcEntryTypeList': '/api/mrman/qc/qcEntryType/page', //质控条目与质控类型关系--分页列表
+      'getQcEntryTypeDetail': '/api/mrman/qc/qcEntryType/getById', //质控条目与质控类型关系--根据entryId和医院id返回内容
+      'getQcEntryTypeByHospital': '/api/mrman/qc/qcEntryType/getTypeByHospital', //质控条目与质控类型关系--根据医院获取质控类型列表
+      'getQcEntryTypeIndex': '/api/mrman/qc/qcEntryType/index', //质控条目与质控类型关系--根据医院和条目检索未被选择的质控类型
+      'saveQcEntryType': '/api/mrman/qc/qcEntryType/saveOrUpdate', //质控条目与质控类型关系--保存
+      
+      
   },
 	menuIconList: { //菜单对应图标
 		'YH-KZT': 'el-icon-menu',

src/api/qualityControl.js

@@ -53,5 +53,20 @@ export default {
   },
   getQcTypeItem(param){ //获取质控条目
     return axios.post(urls.getQcTypeItem,param);
-  }
+  },
+  getQcEntryTypeList(param){ //质控条目与质控类型关系--分页列表
+    return axios.post(urls.getQcEntryTypeList,param);
+  },
+  getQcEntryTypeDetail(param){ //质控条目与质控类型关系--根据entryId和医院id返回内容
+    return axios.post(urls.getQcEntryTypeDetail,param);
+  },
+  getQcEntryTypeByHospital(param){ //质控条目与质控类型关系--根据医院获取质控类型列表
+    return axios.post(urls.getQcEntryTypeByHospital,param);
+  },
+  getQcEntryTypeIndex(param){ //质控条目与质控类型关系--根据医院和条目检索未被选择的质控类型
+    return axios.post(urls.getQcEntryTypeIndex,param);
+  },
+  saveQcEntryType(param){ //质控条目与质控类型关系--保存
+    return axios.post(urls.saveQcEntryType,param);
+  },
 }

src/components/qualityControl/ItemDataType.vue

@@ -3,29 +3,29 @@
         <crumbs title="条目关联质控类型">
             <el-form :inline="true" class="demo-form-inline">
                 <el-form-item label="所属医院：">
-                    <el-select size="mini" v-model.trim="filter.hospitalName" @change="getValue"  placeholder="所属医院" clearable>
+                    <el-select size="mini" v-model.trim="filter.hospitalId" @change="getValue"  placeholder="所属医院" clearable>
                         <el-option v-for="item in hospitalList" :label="item.name" :value="item.val" :key="item.id" ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="质控类型：">
-                    <el-select size="mini" v-model.trim="filter.hospitalName" @change="getValue"  placeholder="质控类型" clearable>
-                        <el-option v-for="item in hospitalList" :label="item.name" :value="item.val" :key="item.id" ></el-option>
+                    <el-select size="mini" v-model.trim="filter.typeName" placeholder="质控类型" clearable>
+                        <el-option v-for="item in qcTypeNameList" :label="item.name" :value="item.name" :key="item.name" ></el-option>
                     </el-select>
                 </el-form-item>
                  <el-form-item label="条目名称：">
-                    <el-input size="mini" v-model.trim="filter.modeName" placeholder="条目名称" clearable></el-input>
+                    <el-input size="mini" v-model.trim="filter.entryName" placeholder="条目名称" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="所属模块：">
-                     <el-select size="mini" v-model.trim="filter.modeId" @change="getValue"  placeholder="所属模块" clearable>
+                     <el-select size="mini" v-model.trim="filter.casesId"  placeholder="所属模块" clearable>
                         <el-option v-for="item in moduleList" :label="item.name" :value="item.val" :key="item.id" ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="条目编码：">
-                    <el-input size="mini" v-model.trim="filter.moduleId" placeholder="条目编码" clearable></el-input>
+                    <el-input size="mini" v-model.trim="filter.code" placeholder="条目编码" clearable></el-input>
                 </el-form-item>
                 <el-form-item>
                     <el-button size="mini" @click="filterDatas">确认</el-button>
-                    <el-button size="mini" type="warning" @click="addTemp">添加模板</el-button>
+                    <!-- <el-button size="mini" type="warning" @click="addTemp">添加模板</el-button> -->
                 </el-form-item>
             </el-form>
         </crumbs>
@@ -42,39 +42,45 @@
                 </el-table-column>
                 <el-table-column
                         :resizable = "false"
-                        label="模板Id"
-                        prop="id"
+                        label="所属医院"
+                        prop="hospitalId"
+                        :formatter="hisFormatter"
                         >
                 </el-table-column>
                 <el-table-column
                         :resizable = "false"
-                        prop="name"
-                        label="模板名称"
-                        width="180">
+                        prop="entryName"
+                        label="条目名称"
+                        width="180"
+                        show-overflow-tooltip>
                 </el-table-column>
                 <el-table-column
                         :resizable = "false"
-                        prop="modeId"
-                        :formatter="moduleFormatter"
+                        prop="casesName"
                         label="所属模块">
                 </el-table-column>
                 
                 <el-table-column
                         :resizable = "false"
-                        prop="hospitalId"
-                        :formatter="hisFormatter"
-                        label="所属医院">
+                        prop="code"
+                        label="条目编码">
+                </el-table-column>
+                 <el-table-column
+                        :resizable = "false"
+                        prop="typeStr"
+                        label="质控类型"
+                        show-overflow-tooltip>
                 </el-table-column>
                 <el-table-column
                         :resizable = "false"
                         prop="operate"
                         label="操作">
                     <template slot-scope="scope">
-                        <el-button  @click="modifyIndeptTag(scope.row, 'modify')" type="text" size="small">修改</el-button>
-                        <span style="margin:0 3px;">|</span>
+                        <el-button  @click="modifyIndeptTag(scope.row, 'modify')" type="text" size="small">关联</el-button>
+                        <!-- <span style="margin:0 3px;">|</span>
                         <el-button @click="modifyIndeptTag(scope.row, 'copy')" class="text" type="text" size="small">复制</el-button>
                         <span style="margin:0 3px;">|</span>
-                        <el-button @click="showDelDialog(scope.row)" class="delete" type="text" size="small">删除</el-button>
+                        <el-button @click="showDelDialog(scope.row)" class="delete" type="text" size="small">删除</el-button> -->
                     </template>
                 </el-table-column>
             </el-table>
@@ -96,18 +102,20 @@
   import config from '@api/config.js';
   import utils from '@api/utils.js'
   export default {
-    name: 'QualityControlTemp',
+    name: 'ItemDataType',
     data: function() {
       return {
         list: [],
         hospitalList: [],
         moduleList:[],
+        qcTypeNameList:[],
         searched: false,
         filter: {
-          modeName: '', //模板名称
-          moduleId:null, //模板Id
-          modeId: '',//所属模块
-          hospitalName: '', //所属医院
+          typeName:"",//质控类型名称
+          hospitalId: "", //所属医院
+          entryName:"", //条目名称
+          casesId:null,//所属模块
+          code:"",//条目编码
         },
         currentPage: 1,
         pageSize: config.pageSize,
@@ -118,6 +126,7 @@
     },
     created() {
       const _this=this;
+      this.getTypeNameList()
       setTimeout(function(){
         _this.getAllTypes().then(()=>{
           _this.getDataList()
@@ -142,7 +151,7 @@
     },
     methods: {
       moduleFormatter(row, column, cellValue){
-        const it = this.moduleList.find(item => item.val == cellValue);
+        const it = this.moduleList.find(item => item.id == cellValue);
         return it?it.name:'';
       },
       hisFormatter(row, column, cellValue){
@@ -171,13 +180,23 @@
               }
           });
       },
+      getTypeNameList(hospitalId){
+        api.getQcEntryTypeByHospital({hospitalId:hospitalId}).then((res) => {
+          if(res.data.code == 0){
+            // let list = res.data.data.records
+              this.qcTypeNameList = res.data.data
+          }
+          
+        })
+      },
       handleSizeChange(val){
         this.pageSize = val;
         this.currentPage = utils.getCurrentPage(this.currentPage, this.total, this.pageSize);
         this.getDataList();
       },
       getValue(val) {
-        console.log('changeVal', val, this.filter.tagAdscription)
+        console.log('changeVal', )
+        THIS.filter.typeName = ""
       },
       getDataList(isTurnPage) {
         const param = this.getFilterItems(isTurnPage);
@@ -188,9 +207,10 @@
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.7)'
         });
-        api.getQCTemplist(param).then((res) => {
+        api.getQcEntryTypeList(param).then((res) => {
           loading.close()
-          let list = res.data.data.records
+          if(res.data.code == 0){
+            let list = res.data.data.records
           /*for(let i = 0; i < list.length; i++){
             list[i].hospitalId = this.hospitalList.find(item => item.val == list[i].hospitalId).name
             list[i].modeId  = this.moduleList.find(item => item.val == list[i].modeId).name
@@ -201,6 +221,8 @@
             this.currentPage=this.inCurrentPage;
             this.inCurrentPage = undefined;
           }
+          }
+          
         })
       },
       filterDatas() {
@@ -214,23 +236,25 @@
           filter: this.filter
         } : {currentPage: this.currentPage,pageSize:this.pageSize};
         this.$router.push({
-          name: 'AddQualityControlTemp',
+          name: 'ItemDataTypeRelation',
           params: pam
         })
       },
       modifyIndeptTag(row, type) {
-        api.getQCTempDetail({moduleId:row.id}).then((res)=>{
+        api.getQcEntryTypeDetail({ "entryId": row.entryId,"hospitalId": row.hospitalId}).then((res)=>{
           const {code,data,msg} = res.data;
+          const hospitalItem = this.hospitalList.find(item => item.val == row.hospitalId);
+         const hospitalName = hospitalItem ? hospitalItem.name:''
           if(code=='0'){
-            const item = Object.assign({},row,data);
+            const item = Object.assign({},{hospitalName:hospitalName},data);
             const pam = this.searched ? {
               currentPage: this.currentPage,
               filter: this.filter
             } : {currentPage: this.currentPage};
             if(type == 'modify') {
-              this.$router.push({name: 'AddQualityControlTemp', params: Object.assign(pam, {isEdit: true, data: item})});
+              this.$router.push({name: 'ItemDataTypeRelation', params: Object.assign(pam, {isEdit: true, data: item})});
             } else if( type == 'copy') {
-              this.$router.push({name: 'AddQualityControlTemp', params: Object.assign(pam, {isCopy: true, data: item})});
+              this.$router.push({name: 'ItemDataTypeRelation', params: Object.assign(pam, {isCopy: true, data: item})});
             } else {
                 return
             }
@@ -254,11 +278,11 @@
       },
       clearFilter(){
         this.filter={
-          name: "",
-          modeId: "",
-          hospitalName: "",
-          id:"",
-
+          hospitalId: "",
+          typeName:"",
+          entryName:"",
+          casesId:null,
+          code:""
         };
       },
       getFilterItems(isTurnPage) {
@@ -266,14 +290,15 @@
         if(isTurnPage&&!this.searched){
           this.clearFilter();
         };
-        const {modeName, modeId, hospitalName,moduleId} = this.filter
+        const {hospitalId,typeName,entryName,casesId,code} = this.filter
         const param = {
-          name: modeName,
           current: this.inCurrentPage||this.currentPage,
           size: this.pageSize,
-          modeId: modeId,
-          id:moduleId,
-          hospitalId: hospitalName
+          hospitalId: hospitalId,
+          typeName:typeName,
+          entryName:entryName,
+          casesId:casesId,
+          code:code
         };
         return param;
       },

src/components/qualityControl/ItemDataTypeQcTypePour.vue

@@ -0,0 +1,453 @@
+<template>
+    <div class="qcTypeWrapper commomSymptom clearfix">
+        <QCTipPop :name="curName" :example="curEmp" :show="showPop" :top="popTop" :left="popLeft" @close="closePop"></QCTipPop>
+        <div class="bottomPartLeft">
+            <p style="height: 26px;"> </p>
+          <div class="pool">
+            <ul class="tagList tagPool">
+                <li v-for="(item, index) in leftTagsList"
+                    class = "tagItem"
+                    :key='item.id'
+                    :style="getStyle(item)?styles:null"
+                    @click='selectLeftTag(item, index, $event)'
+                >
+                    <p class="ellipsis" @click="closePop">
+                        <span class="tagName">{{item.name}}</span>
+                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span>
+                    </p>
+                </li>
+            </ul>
+          </div>
+        </div>
+        <div class="bottomPartMid fl">
+            <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
+            <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
+        </div>
+        <div class="bottomPartRight ">
+          <p class="poolTitle">已选模块类型：</p>
+          <ul class="tagList operationPool operationPools">
+                <li class = "tagItem"
+                    v-for="(item) in rightTagsList"
+                    :key='item.id'
+                    :style="getStyle2(item)?styles:null"
+                    @click='selectRightTag(item)'
+                >
+                    <p class="ellipsis" @click="closePop">
+                        <span class="tagName">{{item.name}}</span>
+                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span>
+                    </p>
+                </li>
+            </ul>
+        </div>
+    <!--<div class="buttonBox" :class="(qaType==2)?'rightMore':''">
+        <div class="bottomPartMid bottomPartMidss fl bottomPartMids" >
+            <p><span class="el-icon-arrow-up" @click="toggleTopDownList(1)"></span></p>
+            <p><span class="el-icon-arrow-down" @click="toggleTopDownList(2)"></span></p>
+        </div>
+    </div>-->
+  </div>
+</template>
+<script>
+import api from '@api/qualityControl.js';
+import QCTipPop from './QCTipPop.vue';
+import $ from 'jquery'
+
+export default {
+    name: "ItemDataTypeQcTypePour",
+    props: ['hospital','moduleName','selectedTag'],
+    data() {
+        return {
+            checkedExc:false,
+            leftTagsList: [],
+            selectLeftTagsList: [],
+            rightTagsList: [],
+            selectRightTagsList: [],
+            showPop:false,
+            activeId:'',
+            curName:"",
+            curEmp:"",
+            popTop:'',
+            popLeft:'',
+            styles:{
+                background:'#eae7e7'
+            },
+        }
+    },
+    mounted() {
+      //编辑
+        if(this.hospital&&this.moduleName){
+          const that = this;
+          setTimeout(function(){            //等watch执行后赋值tags,否则这里先执行，会被watch里清空
+            that.rightTagsList = [...that.selectedTag];
+            that.getModuleTypeList();
+            that.$emit('changeActionData',that.getModuleTypeIds());
+          },100);
+        }
+    },
+    watch: {
+      hospital(){
+            this.rightTagsList=[];
+          this.getModuleTypeList();
+        },
+      moduleName(){
+            this.rightTagsList=[];
+          this.getModuleTypeList();
+        },
+      /*'selectRightTagsList':{
+          handler:function(newVal){
+          },
+          deep:true
+        }*/
+    },
+    methods: {
+        closePop(){
+          this.activeId = '';
+          this.curName = '';
+          this.curEmp = '';
+          this.popTop = 0;
+          this.popLeft=0;
+          this.showPop=false;
+        },
+        showTipPop(item,e){
+          if(this.showPop&&this.activeId===item.id){
+            this.closePop();
+            return;
+          }
+          const t=$(".el-main").scrollTop();
+          this.activeId = item.id;
+          this.curName = item.name;
+          this.curEmp = item.behospitalCodes;
+          this.popTop = t+e.clientY;
+          this.popLeft=e.clientX;
+          this.showPop = true;
+        },
+        handleExclu(){
+            if(!this.selectRightTagsList||this.selectRightTagsList.length==0){
+              this.$message({
+                showClose: true,
+                message: '请先选择要操作的标签',
+                type: 'warning'
+              });
+              return ;
+            }
+            const arr = this.rightTagsList.map((it)=>{
+              if(it.id==this.selectRightTagsList[0].id){
+                if(it.exclusionType===1){
+                  it.exclusionType = 0
+                }else{
+                  it.exclusionType=1;
+                }
+              }else{
+                it.exclusionType=0;
+              }
+              return it;
+            });
+            this.rightTagsList=arr;
+            this.$emit('changeActionData',this.getModuleTypeIds());
+        },
+        transOptions(opt){
+          return opt&&opt.map((it)=>{
+            return Object.assign({},it,{id:it.questionId||it.id});      //模板是questionId，组合是id
+          });
+        },
+        ifReflashTagList(newVal='', preVal=''){
+          if(newVal.trim() == ''){
+            this.searchVal = '';
+            this.rightTagsList=[];
+            this.getModuleTypeList();
+          }else if(newVal.trim() != preVal.trim()){
+            this.searchVal = '';
+            this.rightTagsList=[];
+            this.getModuleTypeList();
+          }
+        },
+        selectLeftTag(tag) {
+            const hasTag = this.isHasTag(tag, this.selectLeftTagsList);
+            if (hasTag) {
+                this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
+            } else {
+                this.selectLeftTagsList.push(tag);
+            }
+        },
+        selectRightTag(tag) {
+            /*let tmpArr = [];
+            tmpArr.push(tag);
+            if (this.selectRightTagsList.length > 0 && tag.id == this.selectRightTagsList[0].id) {
+              this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
+            }else{
+              this.selectRightTagsList = tmpArr;
+            }*/
+          const hasTag = this.isHasTag(tag, this.selectRightTagsList);
+          if (hasTag) {
+            this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
+          } else {
+            this.selectRightTagsList.push(tag);
+          }
+        },
+        isHasTag(item, arr) {
+            for ( let i = 0; i <arr.length; i++) {
+                if(arr[i].id === item.id) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        getStyle(item){       //左侧选中状态
+            return this.isHasTag(item, this.selectLeftTagsList)
+        },
+        getStyle2(item) {
+            return this.isHasTag(item, this.selectRightTagsList);
+        },
+        toggleTopDownList(type){
+          if(this.selectRightTagsList.length == 0 || this.rightTagsList.length == 0){
+            return;
+          }
+          const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList));
+          const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList));
+          const numLen = tmpRightLis.length;
+          const numId = tmpRightSelect[0].id;
+          if(type == 1){
+            for(let i = 0;i < tmpRightLis.length;i++){
+              if(numId === tmpRightLis[i].id){//选中的是第几个
+                if(i == 0){//第一个不能往上移动
+                  return;
+                }else{//先把这个元素和后面的输入框从数组中删除，再添加到数组里
+                  let tmp1 = tmpRightLis[i];
+                  tmpRightLis.splice(i,1);
+                  tmpRightLis.splice(i-1,0,tmp1);
+                  this.rightTagsList = [...tmpRightLis];
+                  this.$emit('changeActionData',this.getModuleTypeIds(), false);
+                  return
+                }
+              }
+            }
+          }else if(type == 2){
+            for(let i = 0;i < tmpRightLis.length;i++){
+              if(numId === tmpRightLis[i].id){
+                if(i == numLen-1){
+                  return;
+                }else{
+                  let tmp1 = tmpRightLis[i];
+                  tmpRightLis.splice(i,1);
+                  tmpRightLis.splice(i+1,0,tmp1);
+                  this.rightTagsList = [...tmpRightLis];
+                  this.$emit('changeActionData',this.getModuleTypeIds(), false);
+                  return;
+                }
+              }
+            }
+          }
+        },
+        toLeftList() {console.log(this.rightTagsList)
+            this.leftTagsList.push(...this.selectRightTagsList);
+            for (let i = 0; i < this.selectRightTagsList.length; i++) {
+                this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id);
+            }
+            for (let i = 0; i < this.selectRightTagsList.length; i++) {
+                for (let j = 0; j < this.rightTagsList.length; j++) {
+                    if(this.selectRightTagsList[i].id === this.rightTagsList[j].id) {
+                        if(this.rightTagsList.length === 1) {
+                            this.rightTagsList = [];
+                        } else {
+                            this.rightTagsList.splice(j, 1);
+                        }
+                    }
+                }
+            }
+            this.selectLeftTagsList = [];
+            this.selectRightTagsList = [];
+            //this.getModuleTypeList();
+            this.$emit('changeActionData',this.getModuleTypeIds(), false);
+        },
+        toRightList() {
+            this.rightTagsList.push(...this.selectLeftTagsList);
+            for (let i = 0; i < this.rightTagsList.length; i++) {
+                this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
+            }
+            this.selectLeftTagsList = [];
+            this.selectRightTagsList = [];
+            //this.getModuleTypeList();
+            this.$emit('changeActionData',this.getModuleTypeIds(), false);
+        },
+        getModuleTypeList() {
+          this.leftTagsList = []
+          if(this.hospital === "" || this.moduleName===""){
+            return
+          }
+          return api.getQcEntryTypeIndex({hospitalId: ""+this.hospital, entryId: ""+this.moduleName,notIdList:this.getModuleTypeIds()||[]}).then((res) =>{
+            if(res.data.code==="0"){
+              const data = res.data.data;
+              this.leftTagsList = data;
+              this.selectLeftTagsList = [];
+              this.selectRightTagsList = [];
+            }else{
+              this.leftTagsList=[];
+              this.selectLeftTagsList = [];
+              this.selectRightTagsList = [];
+              this.warning("获取模块类型失败");
+            }
+          })
+        },
+      getModuleTypeIds(){
+          const list=this.rightTagsList;
+          return list.map((it)=>it.id);
+      },
+      warning(msg, type,time) {
+            this.$message({
+                showClose: true,
+                message: msg,
+                type: type || 'warning',
+                duration:time || '3000'
+            })
+        },
+    },
+    components:{
+      QCTipPop
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../../less/common.less';
+.operation-row{
+    text-align: right;
+}
+.exclu{
+    position: absolute;
+    right: -54px;
+    top: 5px;
+}
+.rightMore{
+    margin-left: 48px;
+}
+.commomSymptom {
+  .tagList.operationPools {
+    width: 100%;
+  }
+  div.bottomPartMids {
+    margin-left: 20px;
+  }
+  div.bottomPartMidss {
+    margin-top: 30px;
+  }
+}
+.qcTypeWrapper {
+    padding-left: 60px;
+    margin:-20px 0 20px;
+    position: relative;
+    .bottomPartLeft {
+        width: 40%;
+        box-sizing: border-box;
+        float: left;
+    }
+    .poolTitle {
+        // border-bottom: 1px solid @icssBorder;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        font-size: 12px;
+    }
+    .pool {
+        // border:1px solid @icssBorder;
+    
+    }
+    .search {
+        width: 100%;
+        border-bottom: 1px solid @icssBorder;
+        box-sizing: border-box;
+        height: 30px;
+    }
+    .tagList {
+        border: 1px solid @icssBorder;
+    }
+    .ellipsis{
+        .tip-icon{
+            display:inline-block;
+            width:16px;
+            height: 16px;
+            vertical-align: middle;
+            background-image:url("../../images/tip.png");
+            background-size:16px;
+            background-repeat:no-repeat;
+            &:hover,&.active{
+                 background-image:url("../../images/tip1.png");
+            }
+        }
+
+    }
+    /*.pop{
+        display: none;
+        position: absolute;
+        top:-30px;
+        right: -10px;
+        padding: 5px 10px;
+        background: #fff;
+        border:1px #ccc solid;
+        border-radius: 3px;
+        line-height: 20px;
+        font-size: 12px;
+        width: 300px;
+        word-break: break-all;
+        z-index: 1;
+    }*/
+    .tagPool {
+        height: 320px;
+        overflow-y: auto;
+
+    }
+    .tagItem {
+        position: relative;
+        line-height: 30px;
+        cursor: pointer;
+        padding: 0 10px;
+        /*z-index:0;*/
+    }
+    .operationPool {
+        position: relative;
+        width: 60%;
+        min-height: 300px;
+        padding: 10px 0;
+    }
+    .tagName{
+        margin-right: 10px;
+        font-size: 14px;
+        vertical-align: middle;
+    }
+    .bottomPartMid {
+        width: 8%;
+        margin-top: 60px;
+        p {
+        width: 100%;
+        text-align: center;
+        span {
+            cursor: pointer;
+            display: inline-block;
+            width: 30px;
+            height: 40px;
+            line-height: 40px;
+            margin: 0 auto;
+            border: 1px solid @icssBorder;
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+        }
+    }
+    .bottomPartRight {
+        float: left;
+        width: 40%;
+    }
+    .buttonBox {
+        width: 10%;
+        float: left;
+        margin-top: 30px;
+    }
+    .inputBox {
+        width: 120px;
+        .el-input {
+            .el-input__inner {
+                height: 30px;
+                background: rgb(234, 231, 231);
+            }
+        }
+    }
+}
+</style>

src/components/qualityControl/ItemDataTypeRelation.vue

@@ -0,0 +1,561 @@
+<template>
+    <div @click="closeSearch">
+       <crumbs :title="title" :param="$route.params" linkTo="ItemDataType">
+        </crumbs>
+        <div class="contentWrapper">
+            <div class="content">
+                <el-form :model="form" :rules="rules" ref="form" class="selectHospital">
+                    <el-form-item label="所属医院：" prop="hospital" class="formItem">
+                        <el-select  v-model="form.hospitalId" placeholder="请选择医院"  :disabled="isEdit||isCopy" class="selectHospital" @change="changeHsopital">
+                            <el-option v-for="item in hospitalList" :key="item.val" :label="item.name" :value="item.val"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="所属模块：" prop="moduleName" class="formItem">
+                        <el-select  v-model="form.moduleName" placeholder="请选择所属模块"  :disabled="isEdit||isCopy" class="selectModule" @change="changeModule">
+                            <el-option v-for="item in moduleList" :key="item.val" :label="item.name" :value="item.val"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="条目名称：" prop="tempName" class="formItem widthLarge">
+                        <el-input v-model.trim="form.tempName"  :title="form.tempName"  :disabled="isEdit||isCopy" placeholder="请输入条目名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="模块类型：" prop="moduleTypes" class="formItem widthLarge">
+                    </el-form-item>
+                    <ItemDataTypeQcTypePour :hospital="form.hospitalId"
+                                :moduleName="form.entryId"
+                                @changeActionData="moduleTypeChange" :selectedTag="form.recordAnalyzeList"></ItemDataTypeQcTypePour>
+                    <!-- <el-form-item label="模块内容：" prop="moduleInfo" class="formItem addCon">
+                        <div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
+                            <div class="orderBox">
+                                <span class="el-icon-arrow-up order"  @click="upUnit(index)"></span>
+                                <span  class="el-icon-arrow-down order" @click="downUnit(index)"></span> 
+                            </div>
+                            <div class="searchBox">
+                                <el-input v-model.trim="item.searchName"  placeholder="搜索字段单元" @click="stopClick"  @input="searchFiled(index)">
+                                </el-input>
+                                <ul v-if="searchIndex == index &&  item.searchResult.length > 0" class="searchResultBox">
+                                    <li class="searchItem" 
+                                        v-for="searchItem in item.searchResult" 
+                                        :title="searchItem.tagName"
+                                        @click="selectSearchFiled(searchItem,index)"
+                                    >
+                                        {{searchItem.tagName}}
+                                    </li>
+                                </ul>
+                            </div>
+                            <div>
+                                <p>已选择字段：</p>
+                                <div class="selectFiledBox">
+                                     <div class="orderBox">
+                                            <span class="el-icon-arrow-up order"  @click="upFiled(index)"></span>
+                                            <span  class="el-icon-arrow-down order" @click="downFiled(index)"></span> 
+                                        </div>
+                                    <div class="selectFiled" v-for="(it,ii) in item.selectFiled">
+                                        <span class="filedName" :class="{activeFiledName: item.activeIndex == ii}" @click="setActiveIndex(index,ii)">{{it.tagName}}
+                                            <span class="el-icon-circle-close delFiled" @click="delSelected(ii,index)"></span>
+                                        </span>
+                                    
+                                    </div>
+                                </div>
+                                
+                            </div>
+                            <span class="el-icon-circle-close delUnit" @click="delUnit(index)"></span>
+                        </div>
+                        <span  class="addUnit" >
+                            <el-button  size="small" type="primary"  @click="addUnit">+单元组</el-button>
+                        </span>
+                    </el-form-item> -->
+                </el-form>
+                <el-button class="disclButn" size="small" type="primary" :disabled = 'saveDisable' @click="confirm('form')">确定</el-button>
+            </div>
+        </div>
+        
+    </div>
+</template>
+<script>
+import api from '@api/qualityControl.js';
+import ItemDataTypeQcTypePour from './ItemDataTypeQcTypePour.vue';
+export default {
+    name:"AddQualityControlTemp",
+    data: function(){
+        return {
+            title: "条目关联质控类型-关联",
+            isEdit:false,
+            isCopy: false,
+            saveDisable: false,
+            form:{
+                tempName: "",
+                hospitalId:"",
+                moduleName:"",
+                moduleTypes:[],
+                recordAnalyzeList:[],
+                nameType:"",
+                entryId:""
+            },
+            rules:{
+                tempName:{ required: true, message: '请输入条目名称', trigger: ['blur', 'change']},
+                hospital:{ required: true, message: '请选择医院', trigger: ['blur', 'change']},
+                moduleName:{ required: true, message: '请选择所属模块', trigger: ['blur', 'change']},
+                moduleTypes:{ required: true, message: '请选择模块类型   ', trigger: ['blur', 'change']},
+                /*name:[{ required: true, message: '请输入显示名称',trigger: ['blur', 'change'] }],*/
+            },
+            searchIndex: -1,
+            
+            hospitalList:[],
+            moduleList:[ ],
+            moduleInfoList:[]
+        }
+    },
+    created(){
+        // this.getAllTypes();
+        const {isCopy, isEdit, data } = this.$route.params;
+        console.log('data',data)
+        if(isEdit || isCopy) {
+            this.isEdit = isEdit;
+            this.form.hospitalId = data.hospitalId
+            this.form.moduleName = data.casesName
+            this.form.tempName = data.entryName
+            this.form.entryId = data.entryId
+            this.form.recordAnalyzeList = data.qcTypeSimpDTOList
+            this.hospitalList.push({
+                val: this.form.hospitalId,
+                name: data.hospitalName
+            })
+            this.moduleList.push({
+                val: data.casesName,
+                name: data.casesName
+            })
+            // if(isEdit){
+            //     this.isEdit = isEdit;
+            //     this.id = data.id
+            //     this.title ="条目关联质控类型-关联"
+            //     this.form.tempName = data.name;
+            //     this.form.recordAnalyzeList = data.recordAnalyzeList;
+            // }
+            // if(isCopy){
+            //     this.isEdit = isEdit;
+            //     this.isCopy = isCopy
+            //     this.id = ""
+            //     this.title ="条目关联质控类型-关联"
+            //     this.form.tempName = ""
+            //     this.form.moduleTypes=[];
+            //      //this.form.example=""
+            // }
+            // const moduleDetail = data.moduleDetail
+            // const keysList = Object.keys(moduleDetail)
+            // for(let i = 0; i < keysList.length; i++){
+            //     let selectFiled = []
+            //     for(let j = 0; j < moduleDetail[keysList[i]].length; j++){
+            //         const item =  moduleDetail[keysList[i]][j]
+            //         selectFiled.push(item.questionDTO)
+            //     }
+            //     this.moduleInfoList.push({
+            //         searchName:"",
+            //         activeIndex: -1,
+            //         searchResult:[
+            //         ],
+            //         selectFiled:selectFiled
+            //     })
+                
+            // }
+          
+            
+        }
+       
+    },
+    methods:{
+        moduleTypeChange(list){
+          this.form.moduleTypes=[...list];
+        },
+        closeSearch(){
+            if(this.searchIndex > -1){
+                this.moduleInfoList[this.searchIndex].searchName = ""
+                this.moduleInfoList[this.searchIndex].searchResult=[]
+                this.searchIndex = -1
+            }
+            
+        },
+        getAllTypes(){
+            if(localStorage.getItem("qcModuleTypes")){
+                this.hospitalList = JSON.parse(localStorage.getItem("qcHospitalTypes"));
+                this.moduleList = JSON.parse(localStorage.getItem("qcModuleTypes"));
+                return new Promise(function(resolve, reject){
+                    resolve()
+                });
+            }
+            //获取枚举信息
+            return api.getQcTypes().then((res)=>{
+                if(res.data.code==="0"){
+                    const data = res.data.data;
+                    localStorage.setItem("qcFieldTypes",JSON.stringify(data[11]));
+                    localStorage.setItem("qcModuleTypes",JSON.stringify(data[12]));
+                    localStorage.setItem("qcHospitalTypes",JSON.stringify(data[13]));
+                    this.hospitalList = JSON.parse(localStorage.getItem("qcHospitalTypes"));
+                    this.moduleList = JSON.parse(localStorage.getItem("qcModuleTypes"));
+                }else{
+                    this.warning("获取枚举信息失败");
+                }
+            });
+        },
+        stopClick(e){
+            // e.stopPropagation()
+        },
+        changeHsopital(){
+            this.form.moduleTypes = []
+        },
+        changeModule(){
+             this.form.moduleTypes = []
+        },
+        addUnit(){
+          const {hospitalId,moduleName,tempName,moduleTypes}=this.form;
+            if(!hospitalId){
+                this.warning("请先选择所属医院")
+                return
+            }
+            if(!moduleName){
+              this.warning("请选择所属模块");
+              return
+            }
+            if(!tempName.trim()){
+              this.warning("请输入模块名称");
+              return
+            }
+            if(!moduleTypes.length){
+              this.warning("请先选择模块类型");
+              return
+            }
+            this.moduleInfoList.push({   
+                        searchName:"",
+                        activeIndex: -1,
+                        searchResult:[
+                        ],
+                        selectFiled:[
+                           
+                        ]
+                    })
+        },
+        searchFiled(index){
+            this.searchIndex = index
+            const searchName = this.moduleInfoList[index].searchName
+            if(!searchName){
+                return
+            }
+            const param = {
+                tagName: searchName,
+                hospitalId: this.form.hospitalId,
+                modeId:  [this.form.moduleName],
+            }
+            api.getQCName(param).then(res =>{
+                if(res.data.code == '0'){
+                     this.moduleInfoList[index].searchResult = []
+                     this.moduleInfoList[index].searchResult.push(...res.data.data)
+                }
+            }).catch(e =>{
+                console.log(e)
+            })
+          
+        },
+        selectSearchFiled(searchItem,index){
+            this.moduleInfoList[index].selectFiled.push(searchItem)
+            this.searchIndex = -1
+            this.moduleInfoList[index].searchName=""
+            this.moduleInfoList[index].searchResult = []
+        },
+        setActiveIndex(index, ii){
+             let activeIndex = this.moduleInfoList[index].activeIndex
+             if( ii === activeIndex) {
+                 this.moduleInfoList[index].activeIndex = -1
+             } else {
+                 this.moduleInfoList[index].activeIndex = ii
+             }
+             
+        },
+        upUnit(index){
+            if(index == 0){
+                return
+            }
+            const current = this.moduleInfoList[index]
+            const currentPre = this.moduleInfoList[index-1]
+            this.moduleInfoList.splice(index-1,2,current,currentPre)
+        },
+        downUnit(index){
+             if(index == this.moduleInfoList.length -1){
+                return
+            }
+            const current = this.moduleInfoList[index]
+            const currentNext = this.moduleInfoList[index+1]
+            this.moduleInfoList.splice(index,2,currentNext,current)
+        },
+        upFiled(index){
+            let activeIndex = this.moduleInfoList[index].activeIndex
+            if(activeIndex == 0 || activeIndex == -1){
+                return
+            }
+            const current = this.moduleInfoList[index].selectFiled[activeIndex]
+            const currentPre = this.moduleInfoList[index].selectFiled[activeIndex-1]
+            this.moduleInfoList[index].selectFiled.splice(activeIndex-1,2,current,currentPre)
+            this.moduleInfoList[index].activeIndex--
+        },
+        downFiled(index){
+             let activeIndex = this.moduleInfoList[index].activeIndex
+            if(activeIndex == this.moduleInfoList[index].selectFiled.length -1 || activeIndex == -1){
+                return
+            }
+            const current = this.moduleInfoList[index].selectFiled[activeIndex]
+            const currentNext = this.moduleInfoList[index].selectFiled[activeIndex+1]
+            this.moduleInfoList[index].selectFiled.splice(activeIndex,2,currentNext,current)
+             this.moduleInfoList[index].activeIndex++
+
+        },
+        delSelected(ii,index){
+            this.moduleInfoList[index].selectFiled.splice(ii,1)
+           
+        },
+        delUnit(index){
+             this.moduleInfoList.splice(index,1)
+        },
+        confirm(form){
+            // this.$refs[form].validate((valid) => {
+            //     if (valid) {
+                    const {tempName,hospitalId,moduleName,moduleTypes,entryId} = this.form;
+                   
+                    let moduleDetail = [], moduleInfoList = this.moduleInfoList;
+                    for(let i = 0; i < moduleInfoList.length; i++){
+                       for(let j = 0; j < moduleInfoList[i].selectFiled.length; j++){
+                            let item ={
+                                groupId: i,
+                                questionId: moduleInfoList[i].selectFiled[j].id
+                            }
+                            moduleDetail.push(item)
+                       }
+                        
+                    }
+                    if(!hospitalId){
+                        this.warning("请选择所属医院");
+                        return
+                    }
+                    if(!moduleName){
+                        this.warning("请选择所属模块");
+                        return
+                    }
+                    if(!tempName){
+                      this.warning("请输入条目名称：");
+                      return
+                    }
+                    if(!moduleTypes.length){
+                        this.warning("请选择模块类型");
+                        return
+                    }
+                   
+                    
+                    // if(moduleDetail.length === 0){
+                    //     this.warning('请添加模块内容')
+                    //     return
+                    // }
+                     let param = {
+                        entryId: entryId,
+                        hospitalId: hospitalId,
+                        // moduleDetail: moduleDetail,
+                        // remark:'',
+                        typeIdList:moduleTypes
+                     };
+                    //  if(this.isEdit){
+                    //      param = Object.assign({}, param, {id: this.id})
+                    //  }
+                    if(this.isEdit){//修改
+                        this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
+                        api.saveQcEntryType(param).then((res)=>{
+                            if(res.data.code==0){
+                            this.$message({
+                                message:"关联成功",
+                                type:'success'
+                            });
+                            //返回带搜索条件的首页
+                            this.$router.push({
+                                name: 'ItemDataType',
+                                params: Object.assign({}, this.$route.params, {currentPage: 1})
+                            });
+                            }else{
+                            this.$message({
+                                message:res.data.msg,
+                                type:'warning'
+                            });
+                            }
+                            this.saveDisable = false
+                        })
+                    }else{//添加
+                        // this.saveDisable = true;  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
+                        // api.saveOrUpdateQCTemp(param).then((res)=>{
+                        //     if(res.data.code==0){
+                        //     this.$message({
+                        //         message:"添加成功",
+                        //         type:'success'
+                        //     })
+                        //     this.$router.push({name: 'QualityControlTemp'});
+                        //     }else{
+                        //     this.$message({
+                        //         message:res.data.msg,
+                        //         type:'warning'
+                        //     });
+                        //     }
+                        //     this.saveDisable = false
+                        // })
+                    }
+            //     } else {
+            //         return false;
+            //     }
+            // }); 
+        },
+        warning(msg, type,time) {
+            this.$message({
+                showClose: true,
+                message: msg,
+                type: type || 'warning',
+                duration:time || '3000'
+            })
+        },
+    },
+    components:{
+      ItemDataTypeQcTypePour
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.contentWrapper{
+     padding: 50px 20px 0;
+}
+.content{
+    background: #fff;
+}
+.formItem{
+    /deep/.el-form-item__label{
+        width: 150px;
+    }
+}
+/deep/.el-form-item__content{
+    display: inline-block;
+}
+/deep/.el-input__inner {
+    height: 30px;
+    line-height: 30px;
+    // width: 200px;
+}
+/deep/.widthLarge .el-input__inner {
+    width: 350px;
+}
+/deep/.addCon .el-form-item__label:before {
+    content: '*';
+    color: #f56c6c;
+    margin-right: 4px;
+}
+.formExam{
+    /deep/.el-form-item__content{
+        width: calc(100% - 185px);
+    }
+}
+.exampleTxt{
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        max-height: 200px;
+        padding: 0 20px 0 0;
+        height: 100%;
+        word-break: break-all;
+        overflow-y: auto;
+}
+.moduleInfoItem{
+    width: 500px;
+    min-height: 200px;
+    padding: 0 50px 0 50px;
+    border: 1px solid #dcdfe6;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    position: relative;
+}
+.addUnit{
+    display: inline-block;
+    border: 1px solid #dcdfe6;
+    border-radius: 5px;
+    width: 80px;
+    text-align: center;
+    height: 20px;
+    line-height: 20px;
+    cursor: pointer;
+}
+
+.searchBox{
+    width: 500px;
+    position: relative;
+}
+.searchResultBox{
+    position: absolute;
+    width: 500px;
+    box-sizing: border-box;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #fff;
+    z-index: 2;
+    border: 1px solid #48c5d7;
+}
+.searchItem{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 20px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.searchItem:hover{
+    background-color: #F5F7FA;
+}
+.selectFiled{
+    position: relative;
+}
+.orderBox{
+    position: absolute;
+    left: -50px;
+    top: 50%;
+    width: 50px;
+    height: 84px;
+    margin-top: -42px;
+}
+.selectFiledBox{
+    position: relative;
+    min-height: 120px;
+}
+.order{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    font-size: 30px;
+    margin-left: 5px;
+    border: 1px solid #dcdfe6;
+    cursor: pointer;
+   
+}
+.firstItem{
+    margin-left: 28px;
+}
+.delUnit,.delFiled{
+    position: absolute;
+    top: -8px;
+    right: -6px;
+    cursor: pointer;
+}
+.delFiled{
+    top: -7px;
+    right: -9px;
+}
+.filedName{
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 5px 10px;
+    display: inline-block;
+    line-height: 20px;
+}
+.activeFiledName{
+    border: 1px solid #48C5D7;
+}
+</style>

src/components/qualityControl/QCTypePour.vue

@@ -291,7 +291,15 @@ export default {
       getModuleTypeIds(){
           const list=this.rightTagsList;
           return list.map((it)=>it.id);
-      }
+      },
+      warning(msg, type,time) {
+            this.$message({
+                showClose: true,
+                message: msg,
+                type: type || 'warning',
+                duration:time || '3000'
+            })
+        },
     },
     components:{
       QCTipPop

src/routes.js

@@ -133,6 +133,9 @@ import QCTypeMang from '@components/qualityControl/QCTypeMang.vue';
 import AddQcType from '@components/qualityControl/AddQcType.vue';
 import StandardRecord from '@components/qualityControl/StandardRecord.vue';
 import ItemDataType from '@components/qualityControl/ItemDataType.vue';
+import ItemDataTypeRelation from '@components/qualityControl/ItemDataTypeRelation.vue';
+
+
 
 //病历录入
 import RecordInput from '@components/recordInput/RecordList.vue';
@@ -328,6 +331,8 @@ export default [
       {path:'LT-ZKYMSJWH-TJZHDYWH',name:'AddCombineFeild',component: AddCombineFeild},  //添加组合字段
       {path:'LT-ZKYMSJWH-MBWH',name:'QualityControlTemp',component: QualityControlTemp},  //模板维护
       {path:'LT-ZKYMSJWH-TMGLZKLX',name:'ItemDataType',component: ItemDataType},  //条目关联质控类型
+      {path:'LT-ZKYMSJWH-TMGLZKLXGL',name:'ItemDataTypeRelation',component: ItemDataTypeRelation},  //条目关联质控类型--关联
+
       {path:'LT-ZKYMSJWH-TJMBWH',name:'AddQualityControlTemp',component: AddQualityControlTemp},  //添加模板维护
       {path: 'LT-BLZK-BLRl',name:'RecordInput', component: RecordInput},//病例录入
       {path: 'LT-BLZK-TJBLRl',name:'AddRecordInput', component: AddRecordInput},//病例录入
@@ -337,7 +342,6 @@ export default [
       {path:'LT-ZKYMSJWH-ZKLXWH',name:'QCTypeMang',component: QCTypeMang},  //质控类型
       {path:'LT-ZKYMSJWH-TJZKLXWH',name:'AddQcType',component: AddQcType},  //添加质控类型
       {path:'LT-ZKYMSJWH-BZBL',name:'StandardRecord',component: StandardRecord},  //添加质控类型
-
       
 
     ]