右侧的创建按钮

src/view/platformTag/member-tag.vue

@@ -21,7 +21,8 @@
               {{ tagName }}
               <el-button type="primary" class="add-newtag" @click="addNewTag" v-show="handTag == 1">新增标签</el-button>
             </p>
-            <tag-container :data="memberTagList" :handTag="handTag" :groupId="groupId" @deleteHandTag="deleteHandTag" @returnTagData="returnTagData"> </tag-container>
+
+            <tag-container :data="memberTagList" :handTag="handTag" :groupId="groupId" @deleteHandTag="deleteHandTag" @returnTagData="returnTagData" ref="tagContainer"> </tag-container>
 
             <div class="page-box" v-if="total > 0">
               <el-pagination
@@ -50,9 +51,29 @@
       <vue-gic-footer></vue-gic-footer>
     </div>
 
-    <div class="grouo-right-list" v-show="groupShow && groupListNumber">
+    <div class="group-right-list" v-show="groupShow && groupListNumber">
       <el-collapseTransition>
-        <tags-group-list :selectedTagsData="selectedTags" :tagsGroupRelation="tagsGroupRelation" @addTags="addTags" @editTags="editTags" :activeTagsGroupIndex.sync="activeTagsGroupIndex" />
+        <div class="wapper">
+          <div class="inner">
+            <tags-group-list :selectedTagsData="selectedTags" :tagsGroupRelation="tagsGroupRelation" @addTags="addTags" @editTags="editTags" :activeTagsGroupIndex.sync="activeTagsGroupIndex" />
+            <div class="form-item">
+              <label for="">分组名称</label>
+              <el-input v-model="tagConfig.groupName" :maxlength="10"></el-input>
+            </div>
+            <div class="form-item">
+              <label for="">分组有效期</label>
+              <el-date-picker v-model="tagConfig.date" type="date" placeholder="选择日期"> </el-date-picker>
+            </div>
+            <div class="form-item">
+              <label for="">分组描述</label>
+              <el-input type="textarea" v-model="tagConfig.textarea" :maxlength="10"></el-input>
+            </div>
+            <p>更新频率（更新时间预计选择日期的凌晨0点至6点）</p>
+          </div>
+          <div class="fixed-btn">
+            <el-button type="primary" @click="createNewGroup">创建会员分组</el-button>
+          </div>
+        </div>
       </el-collapseTransition>
     </div>
   </div>
@@ -83,6 +104,11 @@ export default {
 
   data() {
     return {
+      tagConfig: {
+        groupName: '',
+        textarea: '',
+        date: ''
+      },
       activeTagsGroupIndex: 0,
       groupShow: false,
       selectedTags: [[]],
@@ -124,6 +150,9 @@ export default {
   },
 
   methods: {
+    createNewGroup() {
+      //
+    },
     expendsGroupList() {
       // if (this.selectedTags && this.selectedTags.length) {
       this.groupShow = true;
@@ -146,6 +175,7 @@ export default {
     },
     editTags() {
       //
+      this.$refs.tagContainer.dialogVisible = true;
     },
     addTags() {
       //
@@ -414,7 +444,7 @@ export default {
       transform: scale(1.2);
     }
   }
-  .grouo-right-list {
+  .group-right-list {
     position: absolute;
     top: 0px;
     right: 0px;
@@ -422,6 +452,26 @@ export default {
     padding: 10px;
     box-shadow: 0 0 5px #bbb;
     background-color: #fff;
+    z-index: 10;
+    .form-item {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      color: #606266;
+      label {
+        display: block;
+        margin-bottom: 10px;
+      }
+    }
+    .wapper {
+      height: 700px;
+      overflow-y: auto;
+    }
+    .fixed-btn {
+      position: absolute;
+      bottom: 20px;
+      width: 100%;
+      text-align: center;
+    }
   }
 }
 </style>