Merge remote-tracking branch 'origin/dev-dingdang' into dev

src/components/selected-tags-list.vue

+<template>
+  <div class="flex">
+    <ul>
+      <li v-for="item in tagsList[0]" :key="item.tagId"></li>
+    </ul>
+    <div v-if="tagsList[1] && tagsList[1].length > 0">
+      {{ tagsList[1][0].levelType === 'or' ? '或者' : tagsList[1][0].levelType === 'andNot' ? '剔除' : '' }}
+    </div>
+    <ul>
+      <li v-for="item in tagsList[1]" :key="item.tagId"></li>
+    </ul>
+    <div v-if="tagsList[2] && tagsList[2].length > 0">
+      {{ tagsList[2][0].levelType === 'or' ? '或者' : tagsList[2][0].levelType === 'andNot' ? '剔除' : '' }}
+    </div>
+    <ul>
+      <li v-for="item in tagsList[2]" :key="item.tagId"></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selected-tags-list',
+  props: {
+    tagsList: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      console.log(this.tagsList);
+    }, 2000);
+  }
+};
+</script>
+
+<style lang="less" scoped></style>

src/view/memberGroup/memberGroupEdit.vue

 <template>
-  <div class="memberGroupEdit-wrap common-wrap">
+  <div class="common-wrap">
     <nav-crumb :navpath="navpath"></nav-crumb>
     <div class="right-content">
       <div class="right-box">
         <div class="memberGroupEdit-wrap__body">
-          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
             <el-form-item label="" prop="selectedTag">
-              <div class="memberGroupEdit-wrap__item__title">
-                已选标签<span class="color-c0c4cc font-14">（筛选同时符合下列条件的会员）</span>
-                <el-button type="text" class="m-l-220" @click="showAddTag">添加标签</el-button>
+              <div>
+                已选标签
+                <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
               </div>
-              <div class="memberGroupEdit-wrap__tags w-548 border-box">
-                <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in selectedTagData" :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 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>
+                <el-button v-show="(tagsGroupIndex === 0 && selectedTagData.length >= 2) || (tagsGroupIndex === 1 && selectedTagData.length >= 3)" type="text" @click="changeTagsRelation">剔除</el-button>
               </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>
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
-              <div class="memberGroupEdit-wrap__item__title">分组名称</div>
+              <div>分组名称</div>
               <el-input class="w-220" v-model="ruleForm.groupName" @focus="focus('groupName', 10)" @keyup.native="value => toInput(value)"> </el-input>
               <label class="input-label">{{ inputNumObj.groupName }}/10</label>
             </el-form-item>
             <el-form-item label="" prop="effectiveDateTmp">
-              <div class="memberGroupEdit-wrap__item__title">分组有效期</div>
+              <div>分组有效期</div>
               <el-date-picker v-model="ruleForm.effectiveDateTmp" type="date" :editable="false" format="yyyyMMdd" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptions">
               </el-date-picker>
               <div class="form-tip-text">
-                <label class="">*分组有效期需早于所用标签的最早有效期，且最长不超过365天</label>
+                <label>*分组有效期需早于所用标签的最早有效期，且最长不超过365天</label>
               </div>
             </el-form-item>
             <el-form-item label="" prop="describle" class="w-548">
-              <div class="memberGroupEdit-wrap__item__title">分组描述</div>
-              <el-input class="w-407" type="textarea" v-model="ruleForm.describle" style="height: 96px;" @focus="focus('describle', 200)" @keyup.native="value => toInput(value)"> </el-input>
+              <div>分组描述</div>
+              <el-input class="w-548" type="textarea" v-model="ruleForm.describle" style="height: 96px;" @focus="focus('describle', 200)" @keyup.native="value => toInput(value)"> </el-input>
               <template>
                 <label class="input-label textarea-label">{{ inputNumObj.describle }}/200</label>
               </template>
             </el-form-item>
-            <el-form-item label="" class="" prop="updateDay" v-if="ruleForm.isActive == 0">
-              <div class="memberGroupEdit-wrap__item__title">更新频率</div>
+            <el-form-item label="" prop="updateDay" v-if="ruleForm.isActive == 0">
+              <div>更新频率</div>
               <el-select v-model="ruleForm.updateType" placeholder="请选择" class="w-200" @change="changeRate(ruleForm.updateType)">
                 <el-option label="每日一次" value="1"></el-option>
                 <el-option label="每周一次" value="2"></el-option>
@@ -48,9 +61,9 @@
               ><el-select v-model="ruleForm.updateDay" v-if="ruleForm.updateType != 1" placeholder="请选择" class="w-200 p-l-8">
                 <el-option v-for="item in rateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
               </el-select>
-              <div class="form-tip-text"><label class="">*更新时间预计选择日期的凌晨0点至6点</label></div>
+              <div class="form-tip-text"><label>*更新时间预计选择日期的凌晨0点至6点</label></div>
             </el-form-item>
-            <el-form-item label="" class="font-0">
+            <el-form-item label="">
               <el-button type="primary" @click.stop="confirmSave('ruleForm')">保存</el-button>
               <el-button @click.stop="cancelSave">返回</el-button>
             </el-form-item>
@@ -76,7 +89,7 @@
       ref="addTagViewComponent"
       :delTagId="delTagId"
       :addTagShow.sync="showTagFlag"
-      :selTagData="selectedTagData"
+      :selTagData="selectedTagsGroup"
       :returnEditObj="returnEditObj"
       @showTabActive="showTabActive"
       @showShortDetail="showShortDetail"
@@ -90,6 +103,12 @@
 </template>
 
 <script>
+/**
+ * 点击添加标签按钮，将选中的标签数据保存到一个数组中，当弹出层关闭时，将选中的标签赋值给selectedTagData
+ * 需要实现标签组中添加标签的功能
+ * 切换标签组之间关系（剔除、或者）的功能
+ * 解决add-tag-view中的一个SyntaxError错误
+ * */
 import navCrumb from '@/components/nav/nav.vue';
 import addTagView from '@/components/addTagView.vue';
 import tagShortDetail from '@/components/tagShortDetail.vue';
@@ -171,15 +190,19 @@ export default {
 
       // 已选标签数据
       selectedTagData: [
-        // {
-        //   tagId: 1,
-        //   tagName: '有车一族',
-        //   tagValue: '233',
-        //   newTagVal: ''
-        //   tagParams: '',
-        //   isActive: 0,
-        // },
+        [
+          // {
+          //   tagId: 1,
+          //   tagName: '有车一族',
+          //   tagValue: '233',
+          //   newTagVal: ''
+          //   tagParams: '',
+          //   isActive: 0,
+          // },
+        ]
       ],
+      // 选中的一组标签数据
+      selectedTagsGroup: [],
 
       rowItemData: {}, //选择的标签的数据
       showTagDetail: false, // 标签详情缩小版显示/隐藏
@@ -233,6 +256,28 @@ 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) {
@@ -702,12 +747,26 @@ export default {
 
 <style lang="scss" scoped>
 .memberGroupEdit-wrap__tags {
-  max-height: 222px;
-  min-height: 100px;
-  padding: 12px;
+  position: relative;
+  padding: 12px 0;
   border: 1px solid #dcdfe6;
+  border-left: 10px solid #1890ff;
   border-radius: 4px;
-  overflow-y: auto;
+
+  .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;