merge from 'dev2/luolei'

src/components/icss/NoiseTemplate.vue

@@ -13,8 +13,14 @@
     ></PubTagGroup>
     <div class="main">
       <p class="title"> <i>*</i> 标签明细：</p>
-      <PubTagPartDetail :pool="dataPub.tagPool" :type="dataPub.region1" :sign="dataPub.region2" v-show="dataPub.region2 == 2"></PubTagPartDetail>
-      <SymptomTagGroup v-if="dataPub.region2 == 4" :pool="dataPub.tagPool" :type="dataPub.region1"></SymptomTagGroup>
+      <PubTagPartDetail
+        :pool="dataPub.tagPool"
+        :type="dataPub.region1"
+        :sign="dataPub.region2"
+        :choose="dataPub.region2 == 6?'multiple':'single'"
+        v-show="dataPub.region2 == 2 || dataPub.region2 == 6"
+      ></PubTagPartDetail>
+     <SymptomTagGroup v-if="dataPub.region2 == 4" :pool="dataPub.tagPool" :type="dataPub.region1"></SymptomTagGroup>
       <div class="btn">
         <el-button
           type="primary"
@@ -38,6 +44,7 @@ export default {
       dataPub: {},      //公用组件传的值都在这
     }
   },
+
   methods: {
     back() { this.$router.go(-1) },
     changeVal(val) {    //子组件数据改变传递到父组件
@@ -47,7 +54,7 @@ export default {
     changeSex(sex) {       //性别改变，清空标签明细
       console.log(sex)
     },
-    changeType(type){        //填写单类型改变，标签明细左侧更新，右侧清空
+    changeType(type) {        //填写单类型改变，标签明细左侧更新，右侧清空
       console.log(type)
     },
     submitForm() {       // 调用子组件的方法验证公用部分
@@ -55,7 +62,7 @@ export default {
     },
     validatePass() {      //验证成功回调，调取接口
       //仍需验证标签明细是否选择
-      
+
     },
   },
   components: {

src/components/icss/PubTagGroup.vue

@@ -175,8 +175,8 @@ export default {
         { name: '血压类型', key: '15' },
       ],
       form: {
-        region1: '',    //归属
-        region2: '',     //填写单类型
+        region1: '3',    //归属
+        region2: '2',     //填写单类型
         region3: '',      //系统名称
         region4: '',      //界面名称
         region5: '',      //选项之间的链接
@@ -228,6 +228,7 @@ export default {
       tagTypes: [],        //标签池数据
       type:'',
       systom:null,      //标签系统名称存在与否
+      order:[],
     }
   },
   computed: {
@@ -244,6 +245,9 @@ export default {
   mounted() {
     this.$emit('submitForm', 'groups', false);
     this.getDropList();
+    //方便调试
+    this.searchTagList()
+    this.$emit('changeVal', this.form, false)
   },
   watch: {
     newSex(nextVal, prevVal) {
@@ -266,6 +270,7 @@ export default {
         if (res.data.code === '0') {
           this.Adscriptions = res.data.data[1];
           this.labelTypes = res.data.data[2];
+          this.order = res.data.data[5];
         }
       })
     },
@@ -273,7 +278,7 @@ export default {
       let region1 = this.form.region1,region2 = this.form.region2;
       let param = {
         "type": region1,
-        "tagType": region2 == 2?[1]:[],
+        // "tagType": region2 == 2?[1]:[],
         "controlType":region2 == 2?[1,2]:[],
       }
       api.searchTagList(param).then((res) => {
@@ -284,7 +289,10 @@ export default {
     },
     validateSystomName(name,callback) {
       if(this.form.region3.trim() == ''){ return }
-      let param = {"existName": this.form.region3,"type": this.form.region1}
+      let param = {
+        "existName": this.form.region3,
+        "type": this.form.region1
+      }
       api.validateSystomName(param).then((res) => {
         if (res.data.code === '0') {
           if(res.data.data && res.data.data.length != 0){

src/components/icss/PubTagPartDetail.vue

@@ -34,27 +34,43 @@
           class="onlyTop pubLiStyle"
           :class="selectArr[0]?'activeBgc':null"
           @click="selectPart(0)"
+          v-if="choose == 'single'"
         >
           <template v-for="item in poolDetailList[0]">
-            <span class="hzx" v-for="part in item.questionDetailList" :key="part.id">{{part.name}}</span>
+            <span class="hzx ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">{{part.name}}</span>
           </template>
         </div>
+        <div
+          class="onlyTop pubLiStyle"
+          :class="selectArr[0]?'activeBgc':null"
+          @click="selectPart(0)"
+          v-else
+        >
+          <span class="hzx ellipsis" v-for="item in poolDetailList[0]" :title="'[ '+item.name+' ]'" v-show="choose == 'multiple'" :key="item.id">{{item.name}}</span>
+        </div>
         <div class="onlyBottom pubList">
           <ul class="clearfix">
             <li v-for="n in 5"
               :key="n + 'part'"
-              class="onlyBottomPart"
+              class="onlyBottomPart "
               :class="selectArr[n]?'activeBgc':null"
               :style="{borderRight:n==5?'0':''}"
               @click="selectPart(n)"
             >
-              <ul>
+              <ul v-if="choose == 'single'">
                 <template v-for="item in poolDetailList[n]">
-                  <li class="partDetail" v-for="part in item.questionDetailList" :key="part.id">
+                  <li class="partDetail ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">
                     {{part.name}}
                   </li>
                 </template>
               </ul>
+              <ul v-else>
+                <template>
+                  <li class="partDetail ellipsis" v-for="item in poolDetailList[n]" :style="getStyleR(item.id)?styleR:null" :title="'[ '+item.name+' ]'" :key="item.id" @click="selectTagOne($event,item.id,n)">
+                    [ {{item.name}} ]
+                  </li>
+                </template>
+              </ul>
             </li>
           </ul>
         </div>
@@ -62,20 +78,40 @@
       <div class="partWaring">
         <ul>
           <li v-for="i in 5" :key="i">
-            <template v-for="item in poolDetailList[i]">
-              <p class="partDetail" v-show="item.controlType != 1" :key="item.id + '1'">
-                {{1}}
-              </p>
-              <p class="partDetail" v-show="item.controlType != 2" :key="item.id + '2'">
-                {{2}}
-              </p>
-            </template>
+            <p v-for="item in poolDetailListTips[i]" class="partDetail tipsWrap" v-show="1||2||3||4||5||6||7||8||9" :key="item">
+              <span class="tips" v-if="item == 1">1111</span>
+              <span class="tips" v-if="item == 2">2222</span>
+              <span class="tips" v-if="item == 3">3333</span>
+              <span class="tips" v-if="item == 4">4444</span>
+              <span class="tips" v-if="item == 5">5555</span>
+              <span class="tips" v-if="item == 6">6666</span>
+              <span class="tips" v-if="item == 7">7777</span>
+              <span class="tips" v-if="item == 8">8888</span>
+              <span class="tips" v-if="item == 9">9999</span>
+              <span class="tips" v-if="item == 10">1010</span>
+            </p>
           </li>
-         
         </ul>
       </div>
     </div>
     <span class="mutex">互斥项</span>
+    <!-- <el-form-item
+      label="选择标签成文顺序："
+      prop="order"
+    >
+      <el-select
+        v-model="form.order"
+        placeholder="选择标签成文顺序"
+        @change="changeType"
+      >
+        <el-option
+          v-for="item in labelTypes"
+          :label="item.name"
+          :value="item.val"
+          :key="item.id"
+        ></el-option>
+      </el-select>
+    </el-form-item> -->
   </div>
 </template>
 <script>
@@ -97,28 +133,29 @@ export default {
       type: String
     },
     choose: {
-      default: 'single',      //multiple多选
+      default: 'single',      //multiple 多选 single 单选
       type: String
     },
   },
   data() {
     return {
-      currentDetail: {},     //当前点击的标签对应的展开数据
-      poolDetailList: [     //默认6个部分
-        [], [], [], [], [], []
-      ],
+      poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
+      poolDetailListTips: [[],[],[],[],[],[]],     //6个部分对应的提示
       poolDetailListAll:[],    //默认6个部分转化为一维数组
-      activePart: '-1',     //选中part第几个
+      activePart: '-1',        //选中part第几个
+      activePartSon:'-1',      //选中第几个part中的元素了
       selectArr: [false, false, false, false, false, false],   //右侧选中part状态
-      select: '',              //右侧选中的项
+      form:{
+        order:'',     //标签成文顺序
+      },
       
-      styles:{
-        background:'#eae7e7'
-      },                       //选中单条样式
+      styles:{background:'#eae7e7'},                       //选中单条样式
+      styleR:{color:'red !important'},
       searchVal: '',           //搜索值
       currentPool: [],         //标签池数据
       currentLis:[],           //选中单条ID组合（多选）
       notIds:[],               //去重IDs
+      multipleItem:[],         //右侧选中的单条标签
     }
   },
   watch: {
@@ -127,30 +164,119 @@ export default {
         this.currentPool = newVal
       }
     },
+    sign(newVal, preVal) {
+      if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+        this.poolDetailList = [[],[],[],[],[],[]]
+        this.poolDetailListTips = [[],[],[],[],[],[]]
+        this.poolDetailListAll=[]
+        this.activePart='-1'
+        this.activePartSon='-1'
+        this.selectArr = [false, false, false, false, false, false]
+        this.searchVal= ''          
+        this.currentPool= []        
+        this.currentLis=[]           
+        this.notIds=[]               
+        this.multipleItem=[]       
+      }
+    },
     searchVal(newVal, preVal){
       if(newVal.trim() == ''){
-        this.searchTagList()
+        this.searchTagList();
       }else if(newVal.trim() != preVal.trim()){
-        this.searchTagList()
+        this.searchTagList();
       }
     }
   },
   methods: {
+    selectTagOne(e,id,n){
+      e.stopPropagation()
+      this.activePartSon = n
+      this.activePart = -1
+      this.selectArr = [false, false, false, false, false, false]
+      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+      if(utils.filterArr(this.multipleItem,id,2)){
+        let tmpArr = utils.filterArr(this.multipleItem,id,1);
+        this.multipleItem = tmpArr;
+      }else{
+        let tmpArr = this.multipleItem;
+        tmpArr.push(id);
+        this.multipleItem = tmpArr;
+      }
+      this.getPoolDetailListTips();
+    },
     toRightPool(){
-
+      if(this.currentLis.length == 0){
+        this.$message({
+          showClose: true,
+          message: '请选择标签池标签',
+          type: 'warning'
+        });
+        return;
+      }
+      if(this.choose == 'multiple'){
+        this.getRightListDes();
+      }
     },
-    toLeftPool(){
-
+    toLeftPool(){      //往左返回数据
+      if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0){
+        let tmparr = this.poolDetailList;
+        tmparr[this.activePart] = []
+        this.poolDetailList = tmparr;
+        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+        this.searchTagList();
+        this.currentLis = [];
+        this.getPoolDetailListTips();
+      }else if((this.choose == 'multiple') && (utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0) || (this.multipleItem.length > 0)){
+        if(this.activePart != -1){
+          let tmparr = this.poolDetailList;
+          tmparr[this.activePart] = []
+          this.poolDetailList = tmparr;
+          this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+          this.searchTagList();
+          this.currentLis = [];
+          this.getPoolDetailListTips();
+        }else{
+          let tmparr = [],tmpArr = this.poolDetailList[this.activePartSon],tmpArrR = [];
+          this.multipleItem.map((id)=>{
+            this.poolDetailListAll = utils.filterArr(this.poolDetailListAll,id,1,1)
+            this.multipleItem = []
+            tmpArr = utils.filterArr(tmpArr,id,1,1)
+          })
+          this.poolDetailList[this.activePartSon] = tmpArr
+          this.searchTagList();
+          this.currentLis = [];
+          this.getPoolDetailListTips();
+        }
+      }
+    },
+    getPoolDetailListTips(){
+      let list = this.poolDetailList;
+      let poolDetailListTips = [[],[],[],[],[],[]];
+      for(let i = 0;i < list.length;i++){
+        let tmpLis = list[i];
+        if(tmpLis.length > 0){
+          for(let j = 0;j < tmpLis.length;j++){
+            let tmpLi = list[i][j];
+            if(!utils.filterArr(poolDetailListTips[i],tmpLi.controlType,2)){
+              poolDetailListTips[i].push(tmpLi.controlType)
+            }
+          }
+        }
+      }
+      this.poolDetailListTips = poolDetailListTips
     },
     getStyle(id){       //左侧选中状态
       return utils.filterArr(this.currentLis,id,2)
     },
+    getStyleR(id){       //右侧选中状态
+      return utils.filterArr(this.multipleItem,id,2)
+    },
     searchTagList() {
       let ids = [];
       this.poolDetailListAll.map((value)=>{
         ids.push(value.id)
-        this.notIds = ids;
       })
+      this.notIds = ids;
       let param = {
         "tagName": this.searchVal || '',
         "type": this.type,
@@ -165,6 +291,7 @@ export default {
       })
     },
     selectPart(idx) {
+      this.multipleItem = []   
       let tmpFst1 = this.selectArr[0],
         tmpFst2 = this.selectArr[1],
         tmpFst3 = this.selectArr[2],
@@ -217,54 +344,85 @@ export default {
         let tmpIds = [];
         tmpIds.push(id);
         this.currentLis = tmpIds;
+        this.getRightListDes();
       }else{                                //多选
-        // let tmpIds = this.currentLis;
-        // if(utils.filterArr(tmpIds,id,2)){
-        //   return;
-        // }else{
-        //   tmpIds.push(id);
-        // }
-        // this.currentLis = tmpIds;
+        let tmpIds = this.currentLis;
+        if(utils.filterArr(tmpIds,id,2)){
+          tmpIds = utils.filterArr(tmpIds,id,1)
+        }else{
+          tmpIds.push(id);
+        }
+        this.currentLis = tmpIds;
       }
-
+    },
+    getRightListDes(){
+      let idStr = this.currentLis.join(',');
       let param = {
         // "age": 0,
-        "ids": id,
+        "ids": idStr,
         // "sexType": 3
       }
       api.detailsTagList(param).then((res) => {        //右侧展开内容
         if (res.data.code === '0') {
-          const currentDetail = res.data.data[id];
-          this.currentDetail = currentDetail;
-          let num = 0;
           if(this.choose == 'single'){              //判断是单选
+            let num = 0,tmpArr = [];
+            tmpArr.push(res.data.data[idStr]);
             this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
               if(flg){    //有选中
-                let tmp = [],ids = [];
-                tmp.push(currentDetail);
-                this.poolDetailList[idx] = tmp;
+                let ids = [];
+                this.poolDetailList[idx] = tmpArr;
                 this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                 this.searchTagList();
+                this.getPoolDetailListTips();
               }else{      //没选中,按順序第二个开始添加
                 ++num;
                 if(num == 6){
                   for(let i = 1;i < this.poolDetailList.length;i++){
-                    let tmp = [],ids = [];
+                    let ids = [];
                     if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
-                      tmp.push(currentDetail);
-                      this.poolDetailList[i] = tmp;
+                      this.poolDetailList[i] = tmpArr;
                       this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                       this.searchTagList();
+                      this.getPoolDetailListTips();
+                      return
+                    }
+                  }
+                }
+              }
+              this.currentLis = [];       //左侧选中数据清空
+            })
+          }else{           //判断是多选
+            let num = 0,tmpArr = [];
+            this.currentLis.map((id)=>{
+              tmpArr.push(res.data.data[id]);
+            })
+            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
+              if(flg){    //有选中
+                this.poolDetailList[idx] = tmpArr;
+                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+                this.searchTagList();
+                this.getPoolDetailListTips();
+              }else{
+                ++num;
+                if(num == 6){
+                  for(let i = 1;i < this.poolDetailList.length;i++){
+                    let ids = [];
+                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
+                      this.poolDetailList[i] = tmpArr;
+                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
+                      this.searchTagList();
+                      this.getPoolDetailListTips();
                       return;
                     }
                   }
                 }
               }
+              this.currentLis = []
             })
           }
         }
       })
-    },
+    }
   }
 }
 </script>
@@ -278,6 +436,16 @@ export default {
   .desTitle {
     padding-bottom: 10px;
   }
+  .tipsWrap {
+    display: inline-block;
+    text-align: center;
+    border: 1px solid @icssBorder;
+    padding: 2px 3px;
+    border-radius: 5px;
+    margin: 0 3px 3px 0;
+    .tips {
+    }
+  }
   .pubList {
     height: @icssHeight;
     overflow: auto;
@@ -287,6 +455,9 @@ export default {
     line-height: 30px;
     padding: 0 8px;
   }
+  .pubLiStyleWrap {
+    cursor: pointer;
+  }
   .pubLiStyleWrap:hover {
     background-color: #f5f5f5;
   }
@@ -331,12 +502,13 @@ export default {
     }
   }
   .bottomPartMid {
-    width: 10%;
+    width: 8%;
     margin-top: 60px;
     p {
       width: 100%;
       text-align: center;
       span {
+        cursor: pointer;
         display: inline-block;
         width: 30px;
         height: 40px;
@@ -349,7 +521,7 @@ export default {
     }
   }
   .bottomPartRight {
-    width: 60%;
+    width: 62%;
     .partWaring {
       li {
         float: left;
@@ -363,6 +535,7 @@ export default {
     }
     .onlyTop {
       border-bottom: 1px solid @icssBorder;
+      cursor: pointer;
       .hzx{
         padding: 0 30px 0 0;
       }
@@ -375,6 +548,7 @@ export default {
         width: 20%;
         height: @icssHeight;
         overflow: auto;
+        cursor: pointer;
         .partDetail {
           padding: 3px 5px;
         }

src/components/icss/PubTagPartDetails.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="bottomPart clearfix">
+    <div class="bottomPartLeft fl">
+      <p class="desTitle">标签池：</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="pubList searchList">
+          <li class="pubLiStyle pubLiStyleWrap ellipsis"
+            v-for="val in currentPool"
+            :title="'[ '+val.tagName+' ]'"
+            :key="val.id"
+            :style="getStyle(val.id)?styles:null"
+            @click="detailsTagList(val.id)" 
+          >{{val.tagName}}</li>
+        </ul>
+      </div>
+    </div>
+    <div class="bottomPartMid fl">
+      <p><span class="el-icon-arrow-right" @click="toRightPool"></span></p>
+      <p><span class="el-icon-arrow-left" @click="toLeftPool"></span></p>
+    </div>
+    <div class="bottomPartRight fl">
+      <p class="desTitle">操作界面：</p>
+      <div class="rightPool">
+        <div
+          class="onlyTop pubLiStyle"
+          :class="selectArr[0]?'activeBgc':null"
+          @click="selectPart(0)"
+        >
+          <template v-for="item in poolDetailList[0]">
+            <span class="hzx" v-for="part in item.questionDetailList" :key="part.id">{{part.name}}</span>
+          </template>
+        </div>
+        <div class="onlyBottom pubList">
+          <ul class="clearfix">
+            <li v-for="n in 5"
+              :key="n + 'part'"
+              class="onlyBottomPart"
+              :class="selectArr[n]?'activeBgc':null"
+              :style="{borderRight:n==5?'0':''}"
+              @click="selectPart(n)"
+            >
+              <ul>
+                <template v-for="item in poolDetailList[n]">
+                  <li class="partDetail" v-for="part in item.questionDetailList" :key="part.id">
+                    {{part.name}}
+                  </li>
+                </template>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="partWaring">
+        <ul>
+          <li v-for="i in 5" :key="i">
+            <template v-for="item in poolDetailList[i]">
+              <p class="partDetail" v-show="item.controlType != 1" :key="item.id + '1'">
+                {{1}}
+              </p>
+              <p class="partDetail" v-show="item.controlType != 2" :key="item.id + '2'">
+                {{2}}
+              </p>
+            </template>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <span class="mutex">互斥项</span>
+  </div>
+</template>
+<script>
+import api from '@api/icss.js';
+import utils from '@api/utils.js';
+
+export default {
+  props: {
+    pool: {
+      default: () => [],
+      type: Array
+    },
+    type: {
+      default: '',
+      type: String
+    },
+    sign: {
+      default: '',
+      type: String
+    },
+    choose: {
+      default: 'single',      //multiple多选
+      type: String
+    },
+  },
+  data() {
+    return {
+      currentDetail: {},     //当前点击的标签对应的展开数据
+      poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
+      poolDetailListAll:[],    //默认6个部分转化为一维数组
+      activePart: '-1',     //选中part第几个
+      selectArr: [false, false, false, false, false, false],   //右侧选中part状态
+      select: [],              //右侧选中的项
+      currentIdx:'',            //右侧选中的第几个
+      
+      styles:{
+        background:'#eae7e7'
+      },                       //选中单条样式
+      searchVal: '',           //搜索值
+      currentPool: [],         //标签池数据
+      currentLis:[],           //选中单条ID组合（多选）
+      notIds:[],               //去重IDs
+    }
+  },
+  watch: {
+    pool(newVal, preVal) {
+      if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+        this.currentPool = newVal
+      }
+    },
+    searchVal(newVal, preVal){
+      if(newVal.trim() == ''){
+        this.searchTagList()
+      }else if(newVal.trim() != preVal.trim()){
+        this.searchTagList()
+      }
+    }
+  },
+  methods: {
+    toRightPool(){
+      if(this.currentLis.length == 0){
+        this.$message({
+          showClose: true,
+          message: '请选择标签池标签',
+          type: 'warning'
+        });
+        return;
+      }
+      this.detailsTagList(this.currentLis[0])
+    },
+    toLeftPool(){      //往左返回数据
+      if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.currentIdx].length > 0){
+        console.log(this.currentIdx)
+        let tmparr = this.poolDetailList;
+        tmparr[this.currentIdx] = []
+        this.poolDetailList = tmparr;
+        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+        this.searchTagList();
+        this.currentLis = [];
+      }
+    },
+    getStyle(id){       //左侧选中状态
+      return utils.filterArr(this.currentLis,id,2)
+    },
+    searchTagList() {
+      let ids = [];
+      this.poolDetailListAll.map((value)=>{
+        ids.push(value.id)
+      })
+      this.notIds = ids;
+      let param = {
+        "tagName": this.searchVal || '',
+        "type": this.type,
+        "notIds": this.notIds,
+        "tagType": this.sign == 2?[1]:[],
+        "controlType":this.sign == 2?[1,2]:[],
+      }
+      api.searchTagList(param).then((res) => {
+        if (res.data.code === '0') {
+          this.currentPool = res.data.data
+        }
+      })
+    },
+    selectPart(idx) {
+      // this.select = this.poolDetailList[idx]  
+      this.currentIdx = idx 
+      let tmpFst1 = this.selectArr[0],
+        tmpFst2 = this.selectArr[1],
+        tmpFst3 = this.selectArr[2],
+        tmpFst4 = this.selectArr[3],
+        tmpFst5 = this.selectArr[4],
+        tmpFst6 = this.selectArr[5];
+      if (idx == 0) {
+        this.selectArr = [!tmpFst1, false, false, false, false, false];
+      } else if (idx == 1) {
+        this.selectArr = [false, !tmpFst2, false, false, false, false];
+      } else if (idx == 2) {
+        this.selectArr = [false, false, !tmpFst3, false, false, false];
+      } else if (idx == 3) {
+        this.selectArr = [false, false, false, !tmpFst4, false, false];
+      } else if (idx == 4) {
+        this.selectArr = [false, false, false, false, !tmpFst5, false];
+      } else if (idx == 5) {
+        this.selectArr = [false, false, false, false, false, !tmpFst6];
+      }
+      let tmpArr = this.selectArr;
+      let num = 0;
+      tmpArr.map((val, idx) => {
+        if (val) {
+          this.activePart = idx;
+        } else {
+          num = ++num
+          if (num == 6) { this.activePart = '-1' }
+        }
+      })
+    },
+    detailsTagList(id) {
+      let plus1 = 0,plus2 = 0;
+      for(let j = 0;j < this.selectArr.length;j++){        //判断右侧有没有选中
+        if(!this.selectArr[j]){
+          ++plus1;
+          if(plus1 == 6){       //右侧未选中
+            for(let k = 1;k < this.poolDetailList.length;k++){
+              if(JSON.stringify(this.poolDetailList[k]) != '[]'){
+                ++plus2
+                if(plus2 == 5){     //右侧数据填满了
+                  alert('请选择需要修改的模块')
+                  return;
+                }
+              }
+            }
+          }
+        }
+      }
+      if(this.choose == 'single'){           //单选
+        let tmpIds = [];
+        tmpIds.push(id);
+        this.currentLis = tmpIds;
+      }else{                                //多选
+        let tmpIds = this.currentLis;
+        if(utils.filterArr(tmpIds,id,2)){
+          return;
+        }else{
+          tmpIds.push(id);
+        }
+        this.currentLis = tmpIds;
+      }
+
+      let param = {
+        // "age": 0,
+        "ids": this.currentLis.join(','),
+        // "sexType": 3
+      }
+      api.detailsTagList(param).then((res) => {        //右侧展开内容
+        if (res.data.code === '0') {
+          const currentDetail = res.data.data[id];
+          this.currentDetail = currentDetail;
+          let num = 0;
+          if(this.choose == 'single'){              //判断是单选
+            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
+              if(flg){    //有选中
+                let tmp = [],ids = [];
+                tmp.push(currentDetail);
+                this.poolDetailList[idx] = tmp;
+                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+                this.searchTagList();
+              }else{      //没选中,按順序第二个开始添加
+                ++num;
+                if(num == 6){
+                  for(let i = 1;i < this.poolDetailList.length;i++){
+                    let tmp = [],ids = [];
+                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
+                      tmp.push(currentDetail);
+                      this.poolDetailList[i] = tmp;
+                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
+                      this.searchTagList();
+                      return;
+                    }
+                  }
+                }
+              }
+              this.currentLis = [];       //左侧选中数据清空
+            })
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+<style lang="less">
+@import "../../less/common.less";
+.bottomPart {
+  box-sizing: border-box;
+  padding-right: 100px;
+  position: relative;
+  padding-bottom: 500px;
+  .desTitle {
+    padding-bottom: 10px;
+  }
+  .pubList {
+    height: @icssHeight;
+    overflow: auto;
+  }
+  .pubLiStyle {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+  }
+  .pubLiStyleWrap:hover {
+    background-color: #f5f5f5;
+  }
+  .pubLiStyleWrap:before {
+    content: "[ ";
+  }
+  .pubLiStyleWrap:after {
+    content: " ]";
+  }
+  .mutex {
+    position: absolute;
+    right: 36px;
+    top: 36px;
+  }
+  .bottomPartLeft {
+    width: 30%;
+    .pool {
+      border: 1px solid @icssBorder;
+      .el-input__prefix {
+        left: 5px;
+        right: auto;
+      }
+      .el-input__inner {
+        height: 31px;
+        line-height: 31px;
+      }
+      .el-input__icon {
+        line-height: 31px;
+      }
+      .el-input--prefix .el-input__inner {
+        border: 0 none;
+        border-bottom: 1px solid @icssBorder;
+        border-radius: 0;
+      }
+      .search {
+        border-bottom: 1px solid @icssBorder;
+      }
+      .searchList {
+        li {
+        }
+      }
+    }
+  }
+  .bottomPartMid {
+    width: 10%;
+    margin-top: 60px;
+    p {
+      width: 100%;
+      text-align: center;
+      span {
+        display: inline-block;
+        width: 30px;
+        height: 40px;
+        line-height: 40px;
+        margin: 0 auto;
+        border: 1px solid @icssBorder;
+        margin-bottom: 15px;
+        font-size: 18px;
+      }
+    }
+  }
+  .bottomPartRight {
+    width: 60%;
+    .partWaring {
+      li {
+        float: left;
+        width: 20%;
+        padding: 5px;
+        box-sizing: border-box;
+      }
+    }
+    .rightPool {
+      border: 1px solid @icssBorder;
+    }
+    .onlyTop {
+      border-bottom: 1px solid @icssBorder;
+      .hzx{
+        padding: 0 30px 0 0;
+      }
+    }
+    .onlyBottom {
+      .onlyBottomPart {
+        float: left;
+        border-right: 1px solid @icssBorder;
+        box-sizing: border-box;
+        width: 20%;
+        height: @icssHeight;
+        overflow: auto;
+        .partDetail {
+          padding: 3px 5px;
+        }
+      }
+    }
+  }
+}
+</style>
+
+

src/less/common.less

@@ -17,7 +17,7 @@
 /*朗通后台基本颜色*/
 @adminBase: #22ccc8;
 @icssBorder: #c0c4cc;
-@icssHeight:150px;
+@icssHeight:240px;
 
 /*用户后台基本颜色*/
 @userBase: #1774f0;