选中状态

src/components/icss/NoiseTemplate.vue

@@ -13,8 +13,17 @@
     ></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" :dataPub ="this.dataPub"></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"
+        :dataPub="this.dataPub"
+      ></SymptomTagGroup>
       <div class="btn">
         <el-button
           type="primary"
@@ -38,7 +47,7 @@ export default {
       dataPub: {},      //公用组件传的值都在这
     }
   },
-  
+
   methods: {
     back() { this.$router.go(-1) },
     changeVal(val) {    //子组件数据改变传递到父组件
@@ -48,7 +57,7 @@ export default {
     changeSex(sex) {       //性别改变，清空标签明细
       console.log(sex)
     },
-    changeType(type){        //填写单类型改变，标签明细左侧更新，右侧清空
+    changeType(type) {        //填写单类型改变，标签明细左侧更新，右侧清空
       console.log(type)
     },
     submitForm() {       // 调用子组件的方法验证公用部分
@@ -56,7 +65,7 @@ export default {
     },
     validatePass() {      //验证成功回调，调取接口
       //仍需验证标签明细是否选择
-      
+
     },
   },
   components: {

src/components/icss/PubTagGroup.vue

@@ -228,6 +228,7 @@ export default {
       tagTypes: [],        //标签池数据
       type:'',
       systom:null,      //标签系统名称存在与否
+      order:[],
     }
   },
   computed: {
@@ -269,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];
         }
       })
     },

src/components/icss/PubTagPartDetail.vue

@@ -78,19 +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>
@@ -112,19 +133,21 @@ export default {
       type: String
     },
     choose: {
-      default: 'multiple',      //multiple 多选 single 单选
+      default: 'single',      //multiple 多选 single 单选
       type: String
     },
   },
   data() {
     return {
-      currentDetail: [],     //当前点击的标签对应的展开数据
       poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
       poolDetailListTips: [[],[],[],[],[],[]],     //6个部分对应的提示
       poolDetailListAll:[],    //默认6个部分转化为一维数组
       activePart: '-1',        //选中part第几个
       activePartSon:'-1',      //选中第几个part中的元素了
       selectArr: [false, false, false, false, false, false],   //右侧选中part状态
+      form:{
+        order:'',     //标签成文顺序
+      },
       
       styles:{background:'#eae7e7'},                       //选中单条样式
       styleR:{color:'red !important'},
@@ -141,6 +164,21 @@ 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();
@@ -150,21 +188,10 @@ export default {
     }
   },
   methods: {
-    showTips(n){
-      let arr = this.poolDetailList[n],tmpControlType=[];
-      arr.map((item)=>{
-        if(utils.filterArr(this.tmpControlType,item.controlType,2)){
-          return
-        }else{
-          tmpControlType.push(item.controlType)
-        }
-      })
-      console.log(tmpControlType)
-      return tmpControlType;
-    },
     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)){
@@ -172,9 +199,10 @@ export default {
         this.multipleItem = tmpArr;
       }else{
         let tmpArr = this.multipleItem;
-        tmpArr.push(id)
-        this.multipleItem = tmpArr
+        tmpArr.push(id);
+        this.multipleItem = tmpArr;
       }
+      this.getPoolDetailListTips();
     },
     toRightPool(){
       if(this.currentLis.length == 0){
@@ -197,6 +225,7 @@ export default {
         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;
@@ -205,9 +234,9 @@ export default {
           this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
           this.searchTagList();
           this.currentLis = [];
+          this.getPoolDetailListTips();
         }else{
           let tmparr = [],tmpArr = this.poolDetailList[this.activePartSon],tmpArrR = [];
-          console.log(tmpArr)
           this.multipleItem.map((id)=>{
             this.poolDetailListAll = utils.filterArr(this.poolDetailListAll,id,1,1)
             this.multipleItem = []
@@ -216,27 +245,25 @@ export default {
           this.poolDetailList[this.activePartSon] = tmpArr
           this.searchTagList();
           this.currentLis = [];
+          this.getPoolDetailListTips();
         }
       }
     },
-    getPoolDetailListTips(list){
-      let poolDetailListTips = this.poolDetailListTips;
-      // list.map((item,index)=>{
-      //   (item.length > 0) && item.map((part,idx)=>{
-      //     if(utils.filterArr(poolDetailListTips[index],part.id,2)){
-
-      //     }
-      //   })
-      // })
+    getPoolDetailListTips(){
+      let list = this.poolDetailList;
+      let poolDetailListTips = [[],[],[],[],[],[]];
       for(let i = 0;i < list.length;i++){
-        if(item.length > 0){
-          for(let j = 0;j < list[i].length;j++){
-            if(utils.filterArr(poolDetailListTips[index],part.id,2)){
-
+        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)
@@ -346,6 +373,7 @@ export default {
                 this.poolDetailList[idx] = tmpArr;
                 this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                 this.searchTagList();
+                this.getPoolDetailListTips();
               }else{      //没选中,按順序第二个开始添加
                 ++num;
                 if(num == 6){
@@ -355,7 +383,8 @@ export default {
                       this.poolDetailList[i] = tmpArr;
                       this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                       this.searchTagList();
-                      return;
+                      this.getPoolDetailListTips();
+                      return
                     }
                   }
                 }
@@ -372,6 +401,7 @@ export default {
                 this.poolDetailList[idx] = tmpArr;
                 this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                 this.searchTagList();
+                this.getPoolDetailListTips();
               }else{
                 ++num;
                 if(num == 6){
@@ -381,6 +411,7 @@ export default {
                       this.poolDetailList[i] = tmpArr;
                       this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                       this.searchTagList();
+                      this.getPoolDetailListTips();
                       return;
                     }
                   }
@@ -405,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;
@@ -414,6 +455,9 @@ export default {
     line-height: 30px;
     padding: 0 8px;
   }
+  .pubLiStyleWrap {
+    cursor: pointer;
+  }
   .pubLiStyleWrap:hover {
     background-color: #f5f5f5;
   }
@@ -458,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;
@@ -476,7 +521,7 @@ export default {
     }
   }
   .bottomPartRight {
-    width: 60%;
+    width: 62%;
     .partWaring {
       li {
         float: left;
@@ -490,6 +535,7 @@ export default {
     }
     .onlyTop {
       border-bottom: 1px solid @icssBorder;
+      cursor: pointer;
       .hzx{
         padding: 0 30px 0 0;
       }