组合填写单

src/components/preTreat/AddCombinQuestion.vue

@@ -15,11 +15,10 @@
                 ref="submitForm"
         ></PubIndeptQa>
         <div class="main">
-            <p class="title" v-if="dataPub.region2==1||dataPub.region2==2|| dataPub.region2==11">
-                <i>*</i> 填写单明细：
-                <i v-if='dataPub.region2==2' style="margin-left:70px;color: #22ccc8; font-size: 12px;">所有选项必须都有或者都没有同“伴”/“无”标记</i>
+            <p class="title">
+                填写单明细：
             </p>
-            <PubSelect v-if="dataPub.region2==1 || dataPub.region2==2 || dataPub.region2==11" :ascription="dataPub.region1" :sexType="dataPub.region7" :type="dataPub.region2" @pushValues="pushValues" :options="editData.questionDetailList"></PubSelect>
+            <QuestionTagGroup :ascription="dataPub.region1" :sexType="dataPub.region7" :type="dataPub.region2" @pushValues="pushValues" :options="editData.questionDetailList"></QuestionTagGroup>
             <div class="btn">
                 <el-button
                         type="primary"
@@ -34,7 +33,7 @@
    * dataPub.region2  判断底部显示哪些
    */
   import PubIndeptQa from './PubIndeptQa';
-  import PubSelect from './PubSelect';
+  import QuestionTagGroup from './QuestionTagGroup';
   import api from '@api/preTreat.js';
   import utils from '@api/utils.js';
 
@@ -167,7 +166,7 @@
     },
     components: {
       PubIndeptQa,
-      PubSelect
+      QuestionTagGroup
     }
   }
 </script>

src/components/preTreat/PubIndeptQa.vue

@@ -264,7 +264,7 @@
           '52':['1','2','3','5','6','7']            //补充内容
         },
         combinLabelMaps:{
-          '1':['4','6'], //症状情况
+          '1':['4'], //症状情况
           '51':['4','6'],    //诊疗情况
           '3':['4','6'],         //其他史
           '52':['4','6']            //补充内容

src/components/preTreat/QuestionTagGroup.vue

@@ -0,0 +1,404 @@
+<template>
+    <div class="symptomTagGroupWrapper commomSymptom clearfix">
+    <div class="bottomPartLeft">
+      <p class="poolTitle">标签池</p>
+      <div class="pool">
+        <el-input
+          placeholder="请输入搜索内容"
+          v-model="searchVal"
+        >
+            <i
+                slot="prefix"
+                class="el-input__icon el-icon-search"
+            ></i>
+        </el-input>
+        <ul class="tagList tagPool">
+            <li v-for="(item, index) in leftTagsList"
+                class = "tagItem"
+                :key='item.id'
+                :title="'[ '+item.tagName+' ]'"
+                :style="getStyle(item)?styles:null"
+                @click='selectLeftTag(item, index, $event)'
+            >
+                <p class="tagName ellipsis" >{{item.tagName}} </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" :class="(type == 1 && isSymp == 0)?'':'operationPools'">
+            <li class = "tagItem"
+                v-for="(item) in rightTagsList2" 
+                :key='item.id'
+                :style="getStyle2(item)?styles:null"
+                @click='selectRightTag(item)'
+            >   
+                <div class="inputBox">
+                    <el-input
+                        v-if="item.type === 'input'"
+                        placeholder=""
+                        v-model="item.text"
+                    >
+                    </el-input>
+                </div>
+                <p class="tagName  ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
+            </li>
+        </ul>
+    </div>
+    <div class="buttonBox">
+        <div class="bottomPartMid bottomPartMidss fl" :class="(type == 1 && isSymp == 0)?'':'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/preTreat.js';
+import utils from '@api/utils.js';
+import { constants } from 'fs';
+
+export default {
+    name: "QuestionTagGroup",
+    props: {
+        pool: {
+            default: () => [],
+            type: Array
+        },
+        type: {
+            default: '',
+            type: String
+        },
+        isSymp: {
+            default: '',
+            type: String
+        },
+        sexType: {
+            default: '',
+            type: String
+        },
+        options: {
+            default: () => [],
+            type: Array
+        }
+    },
+    data() {
+        return {
+            leftTagsList: [],
+            selectLeftTagsList: [],
+            rightTagsList: [],
+            rightTagsList2: [],
+            selectRightTagsList: [],
+            searchVal: '',
+            styles:{
+                background:'#eae7e7'
+            },
+        }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let tagList = this.options;
+        if(tagList.length > 0){
+          /*this.rightTagsList2 = this.options
+          let newArr = []
+          for (let i = 0; i < this.rightTagsList2.length; i++) {
+              if(this.rightTagsList2[i].tagType == 8) {
+                  newArr.push({ text: this.rightTagsList2[i].tagName ,type:'input' ,id: i+',,,', symptomType: this.rightTagsList2[i].symptomType})
+              } else {
+                  if(i === 0 ) {
+                      newArr.push({ text: '' ,type:'input' ,id: i+',,,'})
+                  }
+                  newArr.push(this.rightTagsList2[i])
+                  if(!this.rightTagsList2[i+1] || this.rightTagsList2[i+1]&&this.rightTagsList2[i+1].tagType != 8) {
+                      newArr.push({ text: '' ,type:'input' ,id: i+',,,,'})
+                  }
+              }
+          }*/
+          this.rightTagsList2 = tagList;
+          this.$emit('changeActionData',this.rightTagsList2, false);
+          this.searchTagList();
+        }
+      })
+        
+        // this.leftTagsList = this.pool
+        // console.log('TAGPOOL', this.pool)
+    },
+    watch: {
+        pool(newVal, preVal) {
+             this.leftTagsList = newVal
+        },
+        searchVal(newVal, preVal){
+            if(newVal.trim() == ''){
+                this.searchTagList()
+            }else if(newVal.trim() != preVal.trim()){
+                this.searchTagList()
+            }
+        },
+        sexType(newVal, preVal) {
+            if (newVal != preVal) {
+                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+                    this.leftTagsList = [];
+                    this.selectLeftTagsList = [];
+                    this.rightTagsList = [];
+                    this.rightTagsList2 = [];
+                    this.selectRightTagsList = [];
+                    this.searchVal = '';
+                    //  this.searchTagList();
+                }
+            }
+        },
+
+        
+    },
+    methods: {
+        selectLeftTag(tag, index, e) {
+            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){       //左侧选中状态
+            // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
+            // return utils.filterArr(this.selectLeftTagsList,item,2)
+            return this.isHasTag(item, this.selectLeftTagsList)
+        },
+        getStyle2(item) {
+            // return utils.filterArr(this.selectRightTagsList,item,2)
+            return this.isHasTag(item, this.selectRightTagsList);
+        },
+        toggleTopDownList(type){
+          if(this.selectRightTagsList.length == 0 || this.rightTagsList2.length == 0){
+            return;
+          }
+          const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList));
+          const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList2));
+          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.rightTagsList2 = [...tmpRightLis];
+                  this.$emit('changeActionData',this.rightTagsList2, 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.rightTagsList2 = [...tmpRightLis];
+                  this.$emit('changeActionData',this.rightTagsList2, false);
+                  return;
+                }
+              }
+            }
+          }
+        },
+        toLeftList() {
+            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.rightTagsList2.length; j++) {
+                    if(this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
+                        if(this.rightTagsList2.length === 1) {
+                            this.rightTagsList2 = [];
+                        } else {
+                            this.rightTagsList2.splice(j, 1);
+                        }
+                    }
+                }
+            }
+            this.selectLeftTagsList = [];
+            this.selectRightTagsList = [];
+            this.searchTagList();
+            this.$emit('changeActionData',this.rightTagsList2, false);
+        },
+        toRightList() {
+            this.rightTagsList.push(...this.selectLeftTagsList);
+            for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个加入输入框，默认为逗号
+                this.rightTagsList2.push(this.selectLeftTagsList[i]);
+            }
+            
+            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.searchTagList();
+            this.$emit('changeActionData',this.rightTagsList2, false);
+        },
+        searchTagList() {
+            let notIds = [];
+            for (let i = 0; i < this.rightTagsList2.length; i++) {
+                if(typeof this.rightTagsList2[i].id === 'number') {
+                    notIds.push(this.rightTagsList2[i].id);
+                }
+                
+            }
+            
+            let param = {
+                "tagName": this.searchVal,
+                "type": this.type || '',
+                "notIds": notIds,
+                "sexType": this.sexType,
+            };
+            api.questionSearch(param).then((res) => {
+                if (res.data.code === '0') {
+                    this.leftTagsList = res.data.data;
+                    this.selectLeftTagsList = [];
+                    this.selectRightTagsList = [];
+                }
+            })
+           
+        },
+    }
+}
+</script>
+
+<style lang="less" >
+@import '../../less/common.less';
+.commomSymptom {
+  .tagList.operationPools {
+    width: 100%;
+  }
+  div.bottomPartMids {
+    margin-left: 20px;
+  }
+  div.bottomPartMidss {
+    margin-top: 30px;
+  }
+}
+.symptomTagGroupWrapper {
+    .bottomPartLeft {
+        width: 30%;
+        box-sizing: border-box;
+        float: left;
+    }
+    .poolTitle {
+        // border-bottom: 1px solid @icssBorder;
+        box-sizing: border-box;
+        margin-bottom: 20px;
+    }
+    .pool {
+        // border:1px solid @icssBorder;
+    
+    }
+    .search {
+        width: 100%;
+        border-bottom: 1px solid @icssBorder;
+        box-sizing: border-box;
+        height: 30px;
+    }
+    .tagList {
+        border: 1px solid @icssBorder;
+    }
+    .tagPool {
+        height: 300px;
+        overflow-y: auto;
+
+    }
+    .attributeBox {
+        position: absolute;
+        right: -100px;
+        top: 2px;
+    }
+    .tagItem {
+        position: relative;
+        line-height: 30px;
+        cursor: pointer;
+        padding: 0 10px;
+    }
+    .operationPool {
+        position: relative;
+        width: 60%;
+        min-height: 300px;
+        padding: 10px 0;
+    }
+    .tagName:before {
+        content: '['
+    }
+    .tagName::after {
+        content: ']'
+    }
+    .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>