Merge branch 'dev-dingdang' of 115.159.76.241:memberTag/memberTag-web into dev-dingdang

src/components/selected-tags-list.vue

 <template>
-  <div class="flex">
-    <div v-for="(tags, index) in tagsList" :key="tags">
-      <ul>
-        <li v-for="tag in tags" :key="tag.tagId"></li>
+  <div class="flex m-t-20 tags">
+    <div v-for="(tags, index) in tagsList" :key="tags" :style="`width: ${100 / tagsList.length}%`" class="tag-group">
+      <ul class="tag-list">
+        <li v-for="tag in tags" :key="tag.tagId">{{ tag.tagName }}</li>
       </ul>
-      <div v-if="(index === 0 && tagsList.length > 1) || (index === 1 && tagsList.length > 2)">
-        {{ tagsList[index][0].levelType === 'or' ? '或者' : tagsList[index][0].levelType === 'andNot' ? '剔除' : '' }}
+      <div v-if="(index === 0 && tagsList.length > 1) || (index === 1 && tagsList.length > 2)" class="tag-relation">
+        <span class="tag-relation__wrap">
+          <i class="tag-relation__cont">
+            {{ tagsList[index][0].levelType === 'or' ? '或者' : tagsList[index][0].levelType === 'andNot' ? '剔除' : '' }}
+          </i>
+        </span>
       </div>
     </div>
   </div>
@@ -19,13 +23,54 @@ export default {
       type: Array,
       required: true
     }
-  },
-  mounted() {
-    setTimeout(() => {
-      console.log(this.tagsList);
-    }, 2000);
   }
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tags {
+  width: 100%;
+  border-right: 2px solid #aaa;
+  border-left: 2px solid #aaa;
+  .tag-group {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    .tag-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 0 35px;
+      width: 100%;
+      font-size: 16px;
+      min-height: 120px;
+    }
+    .tag-relation {
+      position: relative;
+      border-left: 2px solid #aaa;
+      .tag-relation__wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        height: 40px;
+        color: #333;
+        cursor: default;
+        background: #cfcfcf;
+        border-radius: 15px;
+        box-shadow: 0 0 0 8px #fff;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+        .tag-relation__cont {
+          transform: rotateZ(-45deg);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/tagShortDetail.vue

@@ -870,7 +870,7 @@ export default {
     const that = this;
     that.tagShortVisible = that.showTagDetail;
     // that.getcityData();
-    document.getElementById('app').style.zIndex = 1;
+    // document.getElementById('app').style.zIndex = 1;
     // that.getTagData(that.tagShortId)
     that.rowData = that.rowItemData;
   }

src/view/memberGroup/memberGroupDetail.less

+.table-header__handle {
+  &.cell {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    padding-right: 0;
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-icon-setting {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 60px;
+      height: 100%;
+      font-size: 20px;
+      color: #666;
+      cursor: pointer;
+      background: #eaeaea;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+}

src/view/memberGroup/tags-group-list.vue

@@ -6,8 +6,8 @@
       :tagsData="item"
       :showTagsRelation="(index === 0 && selectedTagsData.length > 1) || (index === 1 && selectedTagsData.length > 2)"
       :tagsGroupIndex="index"
-      tagsRelation="or"
-      :showAddMenu="true"
+      :tagsRelation="tagsGroupRelation[index]"
+      :showAddMenu="showAddMenu"
       :active="activeTagsGroup === index"
       @addTags="addTags"
       @delTags="delTags"
@@ -20,7 +20,7 @@
         添加
     </el-button>
     <!-- 添加标签 -->
-    <el-dialog :visible.sync="showAddTagPop" title="选择标签" custom-class="tags-body" width="980px" :modal-append-to-body="false">
+    <el-dialog :visible.sync="showAddTagPop" title="选择标签" custom-class="tags-body" width="980px">
       <div class="tags">
         <div class="tags-list">
           <el-tree :data="tagsList" :props="{ label: 'nameStr', children: 'children' }" :default-expand-all="true" :highlight-current="true" @node-click="treeClick"></el-tree>
@@ -69,7 +69,15 @@ import { getMemberTagCount } from '@/request/memberGroup.js';
 export default {
   name: 'tags-detail',
   props: {
-    selectedTagsData: Array
+    // 标签数据
+    selectedTagsData: Array,
+    // 标签组之间的关系
+    tagsGroupRelation: Array,
+    // 是否显示下拉菜单的"添加标签"按钮
+    showAddMenu: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     tagsGroup,
@@ -95,11 +103,16 @@ export default {
   methods: {
     // 添加一个标签组，最多只能有3个标签组
     addTagsGroup() {
-      this.selectedTagsData.length < 3 && this.selectedTagsData.push([]);
+      if (this.selectedTagsData.length < 3) {
+        this.selectedTagsData.push([]);
+        this.selectedTagsData.length > 1 && this.tagsGroupRelation.push('or');
+      }
+      // this.$emit('addTagsGroup');
       this.activeTagsGroup = this.selectedTagsData.length - 1;
     },
     // 删除一个标签组
     delTagsGroup(data) {
+      this.tagsGroupRelation.splice(data.tagsGroupIndex === this.selectedTagsData.length - 1 ? data.tagsGroupIndex - 1 : data.tagsGroupIndex, 1);
       this.selectedTagsData.splice(data.tagsGroupIndex, 1);
       this.activeTagsGroup = 0;
     },
@@ -108,6 +121,7 @@ export default {
       // 添加之前先判断已选中的标签中是否存在即将添加的标签
       this.activeTagsGroup = data.tagsGroupIndex;
       this.showAddTagPop = true;
+      this.$emit('addTags', { tagsGroupIndex: this.activeTagsGroup });
     },
     // 删除标签
     delTags(data) {
@@ -117,12 +131,12 @@ export default {
     // 编辑一个标签
     editTags(data) {
       // 保存之前先判断已选中的标签中是否存在即将添加的标签
-      this.selectedTagsData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
       this.activeTagsGroup = data.tagsGroupIndex;
+      this.$emit('editTags', { tagsGroupIndex: data.tagsGroupIndex, tagIndex: data.tagIndex });
     },
     // 修改两个标签组之间的关系
     changeTagsGroupRelation(data) {
-      alert('修改两个标签组之间的关系');
+      this.tagsGroupRelation[data.relationIndex] = this.tagsGroupRelation[data.relationIndex] === 'or' ? 'andNot' : 'or';
     },
     // 点击标签组切换标签组的选中状态
     checkTagsGroup(data) {

src/view/memberGroup/tags-group.vue

@@ -99,20 +99,13 @@ export default {
     editTags(tagIndex) {
       this.$emit('editTags', {
         tagsGroupIndex: this.tagsGroupIndex,
-        tagIndex,
-        tagData: {
-          tagId: 1,
-          tagName: '有车二族',
-          tagValue: '233',
-          newTagVal: '',
-          tagParams: '',
-          isActive: 0
-        }
+        tagIndex
       });
     },
     // 切换与下一个标签组之间的关系
     changeTagsGroupRelation() {
-      this.$emit('changeTagsGroupRelation');
+      this.tagsRelation = this.tagsRelation === 'or' ? 'andNot' : 'or';
+      this.$emit('changeTagsGroupRelation', { relationIndex: this.tagsGroupIndex });
     },
     // 选中当前标签组
     checkTagsGroup() {
@@ -196,7 +189,7 @@ export default {
 }
 
 .tags-group--active {
-  box-shadow: 0 0 5px #1890ff;
+  border: 1px solid #1890ff;
 }
 
 .tags-group__relation {