解决ui冲突，完成标签分配用户

src/views/label/Label_AddUser copy.vue

@@ -2,8 +2,7 @@
   <div v-if="pageStatus == 0">配置加载中...</div>
   <div v-else-if="pageStatus == 1">此页面只对站点用户开发</div>
   <div v-else-if="pageStatus == 4">
-    <div  class="Label_AddUser">
-    <!-- v-if="labelList.labelFlag == 1" -->
+    <div  class="Label_AddUser" v-if="labelList.labelFlag == 1">
       <div v-if="(labelList.labelArr||[]).length == 0">
         你未添加标签，请先添加标签后再来设置规则
       </div>
@@ -11,7 +10,7 @@
       <el-collapse
         v-model="activeNames"
         @change="openLabel"
-        class="collapse"
+        class=""
         accordion
       >
         <el-collapse-item
@@ -63,8 +62,9 @@
                 :resizable="false"
                 highlight-current-row
                 height="500"
-                @selection-change="handleSelectionChange"
+                @selection-change="handleLeftChange"
                 disabled
+                ref="leftTable"
               >
                 >
                 <el-table-column label="可选">
@@ -107,8 +107,8 @@
               />
               
             </el-col>
-            <el-col :span="2">
-               <el-button type="primary" size="mini" @click="toggleLabel">主要</el-button>
+            <el-col :span="2" style="text-align: center;">
+               <el-button type="primary" size="mini" @click="toggleLabel" style="margin-top:200px" :disabled="toggleable">切换</el-button>
             </el-col>
             <el-col :span="11">
               <div>
@@ -150,8 +150,9 @@
                 highlight-current-row
                 :resizable="false"
                 height="500"
-                @selection-change="handleSelectionChange"
+                @selection-change="handleRightChange"
                 :loading="true"
+                ref="rightTable"
               >
                 <el-table-column label="已选" :resizable="false">
                   <el-table-column
@@ -195,7 +196,7 @@
         </el-collapse-item>
       </el-collapse>
     </div>
-    <!-- <div v-else>你未启用标签功能</div> -->
+    <div v-else>你未启用标签功能</div>
   </div>
 </template>
 
@@ -218,7 +219,7 @@ export default {
       loading: false,
       error: false,
       currentLabelId: undefined,
-      pageStatus: 4,
+      pageStatus: 0,
       timer: null,
       leftData: [],
       rightData: [],
@@ -238,11 +239,21 @@ export default {
         customerName: null,
         phone:null
       },
+      moveRightData:[],
+      moveLeftData:[]
     };
   },
   created() {
     this.init();
   },
+  computed:{
+    toggleable(){
+      if(this.moveRightData.length === 0 && this.moveLeftData.length === 0){
+        return true;
+      }
+      return false;
+    }
+  },
   methods: {
     getLeftData(){
       // this.leftData = [];
@@ -281,7 +292,7 @@ export default {
 
     },
     handleMoveLabel(direction = 'right', type = 1, row, labelIdArr){  // type 1 传row  type 2 idArr    direction right 向右转移 left 向左转移
-       const changeArr = []
+       let changeArr = []
        if(type == 1){
           changeArr.push(row.phone)
        }else if(type == 2){
@@ -328,14 +339,30 @@ export default {
         phone:null
       }
     },
-    handleSelectionChange(val) {
+    handleLeftChange(val) {
       let changeArr = [];
       val.map((ele) => {
         changeArr.push(ele.phone);
       });
+      this.moveLeftData = []
+      this.moveRightData = changeArr
+      this.$refs.rightTable.map((ele)=>{
+        ele.clearSelection();
+      });
+    },
+    handleRightChange(val) {
+      let changeArr = [];
+      val.map((ele) => {
+        changeArr.push(ele.phone);
+      });
+      this.moveLeftData = changeArr
+      this.moveRightData = []
+      this.$refs.leftTable.map((ele)=>{
+        ele.clearSelection()
+      });
     },
-
     init() {
+      this.setPageStatus();
       this.getLabelList();
     },
     setPageStatus() {
@@ -369,7 +396,17 @@ export default {
     //     });
     // },
     toggleLabel(){
-      console.log('hahaha');
+      console.log(this.moveLeftData);
+      console.log(this.moveRightData);
+      if(this.moveLeftData.length !== 0){
+        this.handleMoveLabel('left',2,null,this.moveLeftData)
+        return;
+      }
+      if(this.moveRightData.length !== 0){
+        this.handleMoveLabel('right',2,null,this.moveRightData)
+        return;
+      }
+      return;
     },
 
     getLabelList() {

src/views/label/Label_AddUser.vue

@@ -1,34 +1,88 @@
 <template>
   <div>
-    <!--
- 
-    -->
-    <!-- Example split danger button -->
+    <div class="accordion" id="accordionExample">
+      <div class="card">
+        <div class="card-header" id="headingOne">
+          <h2 class="mb-0">
+            <button
+              class="btn btn-link btn-block text-left"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapseOne"
+              aria-expanded="true"
+              aria-controls="collapseOne"
+            >
+              Collapsible Group Item #1
+            </button>
+          </h2>
+          导出标签
+        </div>
 
-     <div class="btn-group">
-      <button type="button" class="btn btn-sm btn-outline-secondary">加多多</button>
-      <button
-        type="button"
-        class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split"
-        data-toggle="dropdown"
-        aria-expanded="false"
-      >
-        <span class="sr-only"></span>
-      </button>
-      <div class="dropdown-menu" style="overflow-y: auto;max-height: 400px;max-width:280px" >
-        <form class="px-4 py-3">
-          <input
-            type="email"
-            class="form-control"
-            id="exampleDropdownFormEmail1"
-            placeholder="Name or ID"
-            autocomplete="off"
-          />
-        </form>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#">哈哈集团</a>
-        <a class="dropdown-item" href="#">你哈哈哈哈好集团</a>
-        <a class="dropdown-item" href="#">李哈哈集团团</a>
+        <div
+          id="collapseOne"
+          class="collapse show"
+          aria-labelledby="headingOne"
+          data-parent="#accordionExample"
+        >
+          <div class="card-body">
+            Some placeholder content for the first accordion panel. This panel
+            is shown by default, thanks to the <code>.show</code> class.
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header" id="headingTwo">
+          <h2 class="mb-0">
+            <button
+              class="btn btn-link btn-block text-left collapsed"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapseTwo"
+              aria-expanded="false"
+              aria-controls="collapseTwo"
+            >
+              Collapsible Group Item #2
+            </button>
+          </h2>
+        </div>
+        <div
+          id="collapseTwo"
+          class="collapse"
+          aria-labelledby="headingTwo"
+          data-parent="#accordionExample"
+        >
+          <div class="card-body">
+            Some placeholder content for the second accordion panel. This panel
+            is hidden by default.
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header" id="headingThree">
+          <h2 class="mb-0">
+            <button
+              class="btn btn-link btn-block text-left collapsed"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapseThree"
+              aria-expanded="false"
+              aria-controls="collapseThree"
+            >
+              Collapsible Group Item #3
+            </button>
+          </h2>
+        </div>
+        <div
+          id="collapseThree"
+          class="collapse"
+          aria-labelledby="headingThree"
+          data-parent="#accordionExample"
+        >
+          <div class="card-body">
+            And lastly, the placeholder content for the third and final
+            accordion panel. This panel is hidden by default.
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/views/label/Label_SetLabel.vue

@@ -6,7 +6,7 @@
     <div v-if="labelForm.labelArr.length == 0">
       你未添加标签，请先添加标签后再来设置规则
     </div>
-    <el-collapse v-model="activeNames" class="collapse">
+    <el-collapse v-model="activeNames">
       <el-collapse-item
         :title="ele.labelName"
         :name="ele.id"

vue.config.js

@@ -54,13 +54,13 @@ module.exports = {
       }
     }
   },
-  plugins: [
-    new webpack.ProvidePlugin({
-      $: "jquery",
-      jQuery: "jquery",
-      "windows.jQuery": "jquery"
-    })
-  ],
+  // plugins: [
+  //   new webpack.ProvidePlugin({
+  //     $: "jquery",
+  //     jQuery: "jquery",
+  //     "windows.jQuery": "jquery"
+  //   })
+  // ],
   chainWebpack(config) {
     config.plugins.delete('preload') // TODO: need test
     config.plugins.delete('prefetch') // TODO: need test