将查看标签详情、添加标签、编辑标签、添加标签组的功能提出到一个组件里面

src/components/tags-detail/tags-detail.vue

+<template>
+  <div class="m-l-60">
+    <tags-group
+      v-for="(item, index) in selectedTagData"
+      :key="index"
+      :tagsData="item"
+      :showTagsRelation="(index === 0 && selectedTagData.length > 1) || (index === 1 && selectedTagData.length > 2)"
+      :tagsGroupIndex="index"
+      tagsRelation="or"
+      @addTags="addTags"
+      @delTags="delTags"
+      @editTags="editTags"
+      @delTagsGroup="delTagsGroup"
+      @changeTagsGroupRelation="changeTagsGroupRelation"
+    />
+    <el-button class="m-t-10 m-l-60 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTagsGroup">
+      &nbsp;&nbsp;添加
+    </el-button>
+  </div>
+</template>
+
+<script>
+import tagsGroup from './tags-group';
+export default {
+  name: 'tags-detail',
+  props: {
+    selectedTagData: Array
+  },
+  components: {
+    tagsGroup
+  },
+  methods: {
+    // 添加一个标签组，最多只能有3个标签组
+    addTagsGroup() {
+      this.selectedTagData.length < 3 && this.selectedTagData.push([]);
+    },
+    // 删除一个标签组
+    delTagsGroup(tagGroupIndex) {
+      this.selectedTagData.splice(tagGroupIndex, 1);
+    },
+    // 添加标签
+    addTags(data) {
+      this.selectedTagData[data.tagsGroupIndex].push(data.tagData);
+    },
+    // 删除标签
+    delTags(data) {
+      this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1);
+    },
+    // 编辑一个标签
+    editTags(data) {
+      this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
+    },
+    // 修改两个标签组之间的关系
+    changeTagsGroupRelation(data) {
+      alert('修改两个标签组之间的关系');
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.m-l-60 {
+  margin-left: 60px;
+}
+</style>

src/components/tags-detail/tags-group.vue

+<template>
+  <div class="w-548 border-box m-l-60">
+    <div class="tags-group">
+      <!--右上角的下拉菜单-->
+      <el-dropdown class="tags-group__dropdown" placement="bottom-end">
+        <i class="el-icon-more"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="addTags">添加标签</el-dropdown-item>
+          <el-dropdown-item @click.native="showDelPop = true">删除</el-dropdown-item>
+          <el-dropdown-item class="tags-group__popover">
+            <el-popover width="200" placement="top" v-model="showDelPop">
+              <p class="m-b-20">确认删除输入框及内部所有标签？</p>
+              <div class="text-right">
+                <el-button @click="showDelPop = false">取消</el-button>
+                <el-button type="primary" @click="delTagsGroup">确认</el-button>
+              </div>
+              <span slot="reference"></span>
+            </el-popover>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <!--展示选中的标签-->
+      <div class="tags-group__show">
+        <div class="tags-group__tag" v-for="(item, index) in tagsData" :key="index">
+          <span>{{ item.tagName }}</span>
+          <span class="tags-group__tag-name">【选择:{{ item.newTagVal }}】</span>
+          <i class="el-icon-edit" @click="editTags(index)"></i>
+          <i class="el-icon-delete" @click="delTags(index)"></i>
+        </div>
+      </div>
+    </div>
+    <!--标签组之间的关系-->
+    <div class="tags-group__relation" v-show="showTagsRelation">
+      <el-button type="btn btn-default tags-group__btn" @click="changeTagsGroupRelation">
+        {{ tagsRelation === 'or' ? '或者' : tagsRelation === 'andNot' ? '剔除' : '' }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tags-group',
+  props: {
+    // 一组标签（选中的）的数据
+    tagsData: Array,
+    // 是否显示剔除按钮
+    showTagsRelation: Boolean,
+    // 与下一组标签之间的关系 or 、andNot
+    tagsRelation: String,
+    // 当前标签组的索引
+    tagsGroupIndex: Number
+  },
+  data() {
+    return {
+      showDelPop: false
+    };
+  },
+  methods: {
+    // 删除一个标签组
+    delTagsGroup() {
+      this.showDelPop = false;
+      this.$emit('delTagsGroup', {
+        index: this.tagsGroupIndex
+      });
+    },
+    // 添加一个标签
+    addTags() {
+      this.$emit('addTags', {
+        tagsGroupIndex: this.tagsGroupIndex,
+        tagData: {
+          tagId: 1,
+          tagName: '有车一族',
+          tagValue: '233',
+          newTagVal: '',
+          tagParams: '',
+          isActive: 0
+        }
+      });
+    },
+    // 删除一个标签
+    delTags(tagIndex) {
+      this.$emit('delTags', {
+        tagsGroupIndex: this.tagsGroupIndex,
+        tagIndex
+      });
+    },
+    // 编辑一个标签
+    editTags(tagIndex) {
+      this.$emit('editTags', {
+        tagsGroupIndex: this.tagsGroupIndex,
+        tagIndex,
+        tagData: {
+          tagId: 1,
+          tagName: '有车二族',
+          tagValue: '233',
+          newTagVal: '',
+          tagParams: '',
+          isActive: 0
+        }
+      });
+    },
+    // 切换与下一个标签组之间的关系
+    changeTagsGroupRelation() {
+      this.$emit('changeTagsGroupRelation');
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.m-l-60 {
+  margin-left: 60px;
+}
+
+/* 控制popover弹出位置的hack方法 */
+.tags-group__popover {
+  height: 0;
+  transform: translate(82px, -100px);
+}
+
+.tags-group {
+  position: relative;
+  padding: 12px 0;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+
+  .tags-group__dropdown {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: 0 8px;
+    height: 20px;
+  }
+
+  .tags-group__show {
+    padding: 12px;
+    height: 150px;
+    overflow-y: scroll;
+  }
+
+  .tags-group__tag {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 10px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    background: #f3f6f9;
+    border-radius: 2px;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+
+    &:hover {
+      color: #303133;
+      background: #e6e8ed;
+
+      i.el-icon-edit {
+        color: #1890ff;
+      }
+
+      i.el-icon-delete {
+        color: #f56c6c;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    i {
+      color: #4a4a4a;
+      cursor: pointer;
+      padding-left: 10px;
+    }
+
+    .tags-group__tag-name {
+      max-width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.tags-group__relation {
+  position: relative;
+  transform: translate(-60px, 0);
+
+  .tags-group__btn {
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 40px;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 20px;
+    z-index: 1;
+    width: 40px;
+    height: 80px;
+    border-left: 1px solid #dcdfe6;
+  }
+
+  &::before {
+    top: -80px;
+    border-top: 1px solid #dcdfe6;
+  }
+
+  &::after {
+    bottom: -80px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+}
+</style>

src/view/memberGroup/memberGroupEdit.vue

@@ -5,34 +5,12 @@
       <div class="right-box">
         <div class="memberGroupEdit-wrap__body">
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
-            <el-form-item label="" prop="selectedTag" class="m-l-60">
-              <div>
+            <el-form-item label="" prop="selectedTag">
+              <div class="m-l-60">
                 已选标签
                 <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
               </div>
-              <div class="w-548 border-box" v-for="(tagsGroup, tagsGroupIndex) in selectedTagData" :key="tagsGroupIndex">
-                <div class="memberGroupEdit-wrap__tags">
-                  <el-dropdown class="memberGroupEdit-wrap__dropdown">
-                    <i class="el-icon-more"></i>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item @click.native="showAddTag">添加标签</el-dropdown-item>
-                      <el-dropdown-item @click.native="delTagsGroup(tagsGroupIndex)">删除</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                  <div class="memberGroupEdit-wrap__tags-box">
-                    <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in tagsGroup" :key="index">
-                      <span>{{ item.tagName }}</span>
-                      <span class="memberGroupEdit-wrap__tag-name">【选择:{{ item.newTagVal }}】</span>
-                      <i class="el-icon-edit" @click="editSelTag(index, item)"></i>
-                      <i class="el-icon-delete" @click="delSelTag(index, item)"></i>
-                    </div>
-                  </div>
-                </div>
-                <div class="memberGroupEdit-wrap__tags-relation" v-show="(tagsGroupIndex === 0 && selectedTagData.length >= 2) || (tagsGroupIndex === 1 && selectedTagData.length >= 3)">
-                  <el-button type="btn btn-default memberGroupEdit-wrap__btn" @click="changeTagsRelation">剔除</el-button>
-                </div>
-              </div>
-              <el-button class="m-t-10 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTgsGroup">&nbsp;&nbsp;添加</el-button>
+              <tags-detail :selectedTagData="selectedTagData" v-model="selectedTagData" />
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
               <div>分组名称</div>
@@ -91,7 +69,7 @@
       ref="addTagViewComponent"
       :delTagId="delTagId"
       :addTagShow.sync="showTagFlag"
-      :selTagData="selectedTagsGroup"
+      :selTagData="selectedTagData"
       :returnEditObj="returnEditObj"
       @showTabActive="showTabActive"
       @showShortDetail="showShortDetail"
@@ -115,6 +93,7 @@
 import navCrumb from '@/components/nav/nav.vue';
 import addTagView from '@/components/addTagView.vue';
 import tagShortDetail from '@/components/tagShortDetail.vue';
+import tagsDetail from '@/components/tags-detail/tags-detail.vue';
 import strLength from '@/common/js/strlen';
 import showMsg from '@/common/js/showmsg';
 // import errMsg from '@/common/js/error';
@@ -204,8 +183,6 @@ export default {
           // },
         ]
       ],
-      // 选中的一组标签数据
-      selectedTagsGroup: [],
 
       rowItemData: {}, //选择的标签的数据
       showTagDetail: false, // 标签详情缩小版显示/隐藏
@@ -259,28 +236,6 @@ export default {
     },
 
     /**
-     * 点击添加按钮，添加一个标签组
-     * */
-    addTgsGroup() {
-      this.selectedTagData.length < 3 && this.selectedTagData.push([]);
-    },
-
-    /**
-     * 点击删除按钮，删除一个标签组
-     * */
-    delTagsGroup(index) {
-      console.log(index);
-      this.selectedTagData.splice(index, 1);
-    },
-
-    /**
-     * 切换两个标签组之间的关系
-     * */
-    changeTagsRelation() {
-      alert('改变标签组之间的关系（剔除、或者）');
-    },
-
-    /**
      * 点击输入框
      */
     focus(name, num) {
@@ -742,7 +697,8 @@ export default {
   components: {
     navCrumb,
     addTagView,
-    tagShortDetail
+    tagShortDetail,
+    tagsDetail
   }
 };
 </script>
@@ -751,103 +707,6 @@ export default {
 .m-l-60 {
   margin-left: 60px;
 }
-.memberGroupEdit-wrap__tags {
-  position: relative;
-  padding: 12px 0;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-
-  .memberGroupEdit-wrap__tags-box {
-    padding: 12px;
-    height: 150px;
-    overflow-y: scroll;
-  }
-
-  .memberGroupEdit-wrap__dropdown {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    padding: 0 8px;
-    height: 20px;
-  }
-
-  .memberGroupEdit-wrap__tagcell {
-    display: inline-block;
-    vertical-align: top;
-    padding: 0 10px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-    background: #f3f6f9;
-    border-radius: 2px;
-    font-size: 14px;
-    color: #606266;
-    cursor: pointer;
-    &:hover {
-      color: #303133;
-      background: #e6e8ed;
-      i.el-icon-edit {
-        color: #1890ff;
-      }
-      i.el-icon-delete {
-        color: #f56c6c;
-      }
-    }
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    i {
-      /*font-size: 18px;*/
-      color: #4a4a4a;
-      cursor: pointer;
-      padding-left: 10px;
-    }
-
-    .memberGroupEdit-wrap__tag-name {
-      max-width: 200px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
-.memberGroupEdit-wrap__tags-relation {
-  position: relative;
-  transform: translate(-60px, 0);
-  .memberGroupEdit-wrap__btn {
-    padding: 0;
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 40px;
-  }
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 20px;
-    z-index: 1;
-    width: 40px;
-    height: 80px;
-    border-left: 1px solid #dcdfe6;
-  }
-  &::before {
-    top: -80px;
-    border-top: 1px solid #dcdfe6;
-  }
-  &::after {
-    bottom: -80px;
-    border-bottom: 1px solid #dcdfe6;
-  }
-}
 
 .memberGroupEdit-wrap__body {
   width: 100%;