test

src/components/icss/CommonTemplate.vue

@@ -44,13 +44,13 @@
         :model="form"
       >
         <el-form-item
-          label="选择归属："
+          label="添加子模板："
           prop="region"
           size="mini"
         >
           <el-select
             v-model="form.region"
-            placeholder="请选择模板归属"
+            placeholder="请选择模板类型"
           >
             <el-option
               v-for="item in Adscriptions"
@@ -59,9 +59,11 @@
               :key="item.id"
             ></el-option>
           </el-select>
-          <el-button size="mini">添加</el-button>
-          <el-button size="mini">删除子模板</el-button>
-          <el-button size="mini">插入输入栏</el-button>
+          <div style="display:inline-block">
+            <el-button size="mini" @click="addDomTemplate(0)">添加</el-button>
+            <el-button size="mini" @click="delSubTemplate">删除子模板</el-button>
+            <el-button size="mini" @click="addDomTemplate(1)">插入输入栏</el-button>
+          </div>
 
           <el-button icon="el-icon-arrow-left" class="changeOrder changeOrderPub"></el-button>
           <el-button icon="el-icon-arrow-right" class="changeOrderPub"></el-button>
@@ -70,19 +72,23 @@
       <ul class="tagList operationPool templateTagLists">
         <li
           class="tagItem operationItem"
-          v-for="(item) in rightTagsList2"
+          v-for="(item,idx) in rightTagsList"
           :key='item.id'
           :style="getStyle2(item)?styles:null"
-          @click='selectRightTag(item)'
+          @click='selectRightTag(item,idx)'
         >
-          <div class="inputBox">
-            <el-input
-              v-if="item.type === 'input'"
-              placeholder=""
-              v-model="item.text"
-            >
-            </el-input>
+          <div class="inputBox" v-if="item.type === 'input'">
+              <el-input
+                placeholder=""
+                v-model="item.text"
+              >
+              </el-input>
           </div>
+          <p
+            v-if="item.type === 'sub'"
+            class="tagName  ellipsis"
+            :title="'[ 添加子模块 ]'"
+          >添加子模块 </p>
           <p
             v-if="item.tagName"
             class="tagName  ellipsis"
@@ -126,11 +132,16 @@ export default {
       form: {
         region: '1',    //归属
       },
+      addTag:{
+        text:'',              //输入框内容为空
+        id:'',                //id可以用index做id
+        type:'input',        //sub 子模板
+      },
       leftTagsList: [],
       selectLeftTagsList: [],
       rightTagsList: [],
-      rightTagsList2: [],
       selectRightTagsList: [],
+      selectRightTagsListIndex: [],
       searchVal: '',
       styles: {
         background: '#eae7e7'
@@ -138,26 +149,19 @@ export default {
     }
   },
   mounted() {
-    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 + ',,,' })
-      } 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.$nextTick(()=>{
+      this.rightTagsList = this.options
+      let newArr = [];
+      for (let i = 0; i < this.rightTagsList.length; i++) {
+        if (this.rightTagsList[i].tagType == 8) {
+          newArr.push({ text: this.rightTagsList[i].tagName, type: 'input', id: i })
+        } else {
+          newArr.push(this.rightTagsList[i])
         }
       }
-    }
-    this.rightTagsList2 = newArr
-    this.$emit('changeActionData', this.rightTagsList2, false);
-    this.searchTagList()
-    // this.leftTagsList = this.pool
-    // console.log('TAGPOOL', this.pool)
+      this.rightTagsList = newArr
+      this.$emit('changeActionData', this.rightTagsList, false);
+    })
   },
   watch: {
     pool(newVal, preVal) {
@@ -172,6 +176,27 @@ export default {
     },
   },
   methods: {
+    addDomTemplate(sign){
+      let tmpArr1 = this.rightTagsList.slice(0);
+      let tmpArr2 = this.selectRightTagsListIndex.slice(0);
+      if(tmpArr2.length < 1){return}
+      for(let i =0; i < tmpArr1.length; i++){    //循环右侧所有数据
+        let id1 = tmpArr1[i].id;
+        for(let j = 0; j < tmpArr2.length; j++){       //循环右侧选中的数据
+          let id2 = tmpArr2[j];
+          if(id1 == id2){
+            let tmpTag = Object.assign({},this.addTag);     //防止id相同
+            tmpTag.type = sign == 0?'sub':'input';
+            tmpTag.id = id1 + i +55454;            //id还是会重复bug
+            tmpArr1.splice(i+1,0,tmpTag);
+          }
+        }
+      }
+      this.rightTagsList = tmpArr1
+    },
+    delSubTemplate(){
+
+    },
     selectLeftTag(tag, index, e) {
       const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
       if (hasTag) {
@@ -180,12 +205,17 @@ export default {
         this.selectLeftTagsList.push(tag);
       }
     },
-    selectRightTag(tag) {
+    selectRightTag(tag,idx) {
       const hasTag = this.isHasTag(tag, this.selectRightTagsList)
+      let tmpArr = this.selectRightTagsListIndex;
       if (hasTag) {
         this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
+        tmpArr = tmpArr.filter(item => item !== tag.id)
+        this.selectRightTagsListIndex = tmpArr
       } else {
         this.selectRightTagsList.push(tag);
+        tmpArr.push(tag.id)
+        this.selectRightTagsListIndex = tmpArr
       }
     },
     isHasTag(item, arr) {
@@ -208,12 +238,16 @@ export default {
       }
       for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
         if (this.selectRightTagsList[i].type !== 'input') {
-          for (let j = 0; j < this.rightTagsList2.length; j++) {
-            if (this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
-              if (this.rightTagsList2.length === 3) {
-                this.rightTagsList2 = []
-              } else {
-                this.rightTagsList2.splice(j, 2)
+          for (let j = 0; j < this.rightTagsList.length; j++) {
+            if (this.selectRightTagsList[i].id === this.rightTagsList[j].id) {
+              if(j < this.rightTagsList.length-1){
+                if(this.rightTagsList[i+1].type !== 'input'){
+                  this.rightTagsList.splice(j, 1)
+                }else if(this.rightTagsList[i+1].type === 'input'){
+                  this.rightTagsList.splice(j, 2)
+                }
+              }else{
+                this.rightTagsList.splice(j, 1)
               }
             }
           }
@@ -221,36 +255,25 @@ export default {
       }
       this.selectLeftTagsList = []
       this.selectRightTagsList = []
+      this.selectRightTagsListIndex = []
       this.searchTagList()
-      this.$emit('changeActionData', this.rightTagsList2, false);
+      this.$emit('changeActionData', this.rightTagsList, false);
     },
     toRightList() {
       this.rightTagsList.push(...this.selectLeftTagsList);
-      let textItem = { text: '', type: 'input' }
-      for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
-        if (this.rightTagsList2.length === 0) {
-          let textItem1 = JSON.parse(JSON.stringify(textItem))
-          textItem1.id = this.selectLeftTagsList[i].id + ',,'
-          this.rightTagsList2.push(textItem1)
-        }
-        this.rightTagsList2.push(this.selectLeftTagsList[i]);
-        let textItem2 = JSON.parse(JSON.stringify(textItem))
-        textItem2.id = this.selectLeftTagsList[i].id + ','
-        this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
-      }
-
       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.$emit('changeActionData', this.rightTagsList2, false);
+      this.selectRightTagsListIndex = []
+      this.$emit('changeActionData', this.rightTagsList, false);
     },
     searchTagList() {
       let notIds = []
-      for (let i = 0; i < this.rightTagsList.length; i++) {
-        if (typeof this.rightTagsList2[i].id === 'number') {
-          notIds.push(this.rightTagsList2[i].id)
+      for (let i = 0; i < this.selectRightTagsList.length; i++) {
+        if (typeof this.rightTagsList[i].id === 'number') {
+          notIds.push(this.rightTagsList[i].id)
         }
       }
       let param = {
@@ -357,6 +380,7 @@ export default {
     margin: 0 5px 10px 0;
     text-align: center;
     float: left;
+    height: 40px;
     p {
       padding: 5px 0;
     }

src/components/icss/PubTemplateGroup.vue

@@ -73,6 +73,7 @@ export default {
       form: {
         region1: '1',    //归属
         region2: '',     //模板名称
+        tagPool:[],      //标签池
       },
       rules: {
         region1: [
@@ -97,10 +98,13 @@ export default {
       this.form = Object.assign({},this.form,trans);
     }
     this.$emit('changeVal', this.form, false)
+    this.searchTagList()
   },
   watch: {
     newType(nextVal, prevVal) {
-      
+      if(nextVal != prevVal){
+        this.searchTagList()
+      }
     },
   },
   methods:{
@@ -110,6 +114,19 @@ export default {
     readyChangeSelect(val){
       console.log(val)
     },
+    searchTagList() {
+      let region1 = this.form.region1;
+      let param = {
+        "type": region1,
+        "tagName": "腹"
+      }
+
+      api.searchTagList(param).then((res) => {
+        if (res.data.code === '0') {
+          this.form.tagPool = res.data.data
+        }
+      })
+    },
     validateSystomName(name,callback) {         //判断模板名称是否存在
       if(this.form.region2.trim() == ''){ return }
       let param = {