字段设置全选

fe/PC/src/components/rowDrop/index.vue

@@ -8,6 +8,13 @@
     <div class="test_wrapper" @dragover="dragover($event)">
       <div class="text" >字段设置</div>
       <el-divider></el-divider>
+      <!-- 全选 -->
+      <div class="allSelectContent" @click="redioAllChange()">
+        <i class="el-icon-success icon" v-if="allSeletType == 'allSelect'"></i>
+        <i class="el-icon-remove icon" v-if="allSeletType == 'hasSelect'"></i>
+        <i class="el-icon-success icon" v-if="allSeletType == 'NoSelect'" style="color:#999" ></i>
+        全选
+      </div>
       <transition-group class="transition-wrapper" name="sort">
         <div 
           v-for="(item,index) in dataList" 
@@ -25,12 +32,6 @@
             @click="rediochange(index)" 
             :icon-class="dataList[index].isture ? 'show' : 'hide'" 
           />
-          <!-- <svg-icon v-if="!dataList[index].isture" @change="rediochange" icon-class="hide" /> -->
-          <!-- <el-checkbox 
-            v-model="dataList[index].isture" 
-            @change="rediochange"  
-            :data="checked" 
-          ></el-checkbox> -->
           <div class="lable">{{ item.label }}</div>
         </div>
       </transition-group>
@@ -53,13 +54,12 @@ export default {
   },
   data() {
     return {
-      visibleclose:true,
-      visibleon:false,
       name: null,
       oldData: null,
       newData: null,
-      // checked: false,
       dataList: [],
+      // 全选 allSelect hasSelect NoSelect
+      allSeletType:'NoSelect',
     }
   },
   props: {
@@ -78,6 +78,7 @@ export default {
   },
   mounted() {
       this.formatData(this.tableColumns)
+      this.initSelectSta()
   },
   methods: {
     reset() {
@@ -93,6 +94,7 @@ export default {
           item.isture = true
         })
         this.dataList = _resetCol
+        this.initSelectSta()
         this.$emit('radio',_resetCol)
         this.close()
       }).catch(() => {
@@ -102,12 +104,6 @@ export default {
     close() {
       this.$emit('closeRowDrop')
     },
-    // save () {
-    //     this.$emit('closeRowDrop')
-    //     this.$emit('radio',this.dataList)
-    //     // 本地缓存 当前用户名 + 路由名称
-    //     localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
-    // },
     // 格式化表头数据
     formatData (val) {
       this.dataList = JSON.parse(JSON.stringify(val))
@@ -117,32 +113,12 @@ export default {
           }
       })
     },
-      // 拖拽事件
-      handleEdit(index, row) {
-          console.log(index, row);
-      },
     save () {
       this.$forceUpdate()
       this.$emit('radio',this.dataList)
       // 本地缓存 当前用户名 + 路由名称
       localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
     },
-      // 格式化表头数据
-      formatData (val) {
-        this.dataList = JSON.parse(JSON.stringify(val))
-        this.dataList.forEach(item => {
-            if (item.isture == undefined) {
-                item.isture = true
-            }
-        })
-      },
-      // 拖拽事件
-      handleEdit(index, row) {
-          console.log(index, row);
-      },
-      handleDelete(index, row) {
-          console.log(index, row);
-      },
     dragstart(value) {
         this.oldData = value
     },
@@ -169,23 +145,35 @@ export default {
     dragover(e) {
         e.preventDefault()
     },
-      // 拖拽事件结束
-      // 点击展开拖拽框
-      visclose(){
-          this.visibleclose = false
-          this.visibleon = true
-      },
-      // 点击关闭拖拽框
-      vison(){
-          this.visibleclose = true
-          this.visibleon = false
-      },
+    // item元素点击眼睛事件
     rediochange(index){
       this.dataList[index].isture = !this.dataList[index].isture
+      this.initSelectSta()
       this.save()
+    },
+    // 初始化当前全选状态
+    initSelectSta(){
+      let _num = 0
+      this.dataList.forEach(item=>{
+        if(item.isture){
+          _num ++
         }
+      })
+      if(_num == 0){this.allSeletType = 'NoSelect'}
+      if(_num == this.dataList.length){this.allSeletType = 'allSelect'}
+      if(_num > 0 && _num != this.dataList.length){this.allSeletType = 'hasSelect'}
+    },
+    // 全选点击事件
+    redioAllChange(){
+      let isSelectAll = !(this.allSeletType == 'allSelect')
+      this.allSeletType = isSelectAll ? 'allSelect' : 'NoSelect';
+      this.dataList.forEach(item=>{
+        return item.isture = isSelectAll
+      })
+      this.save()
+    },
   }
-  }
+}
 </script>
 <style lang="scss">
 $paddingSize:20px;
@@ -225,6 +213,17 @@ $paddingSize:20px;
     font-weight: bold;
     padding: $paddingSize 0 0 $paddingSize;
   }
+  .allSelectContent{
+    user-select: none;
+    cursor: pointer;
+    padding:0 0 10px $paddingSize;
+    .icon{
+      font-size:18px;
+      vertical-align: middle;
+      color: #409EFF;
+      margin-right: 5px;
+    }
+  }
   .buttonsBox{
     text-align: center; 
     margin: 0;