代码优化

src/components/Crud/CRUD.operation.vue

@@ -71,10 +71,18 @@
             aria-hidden="true"
           />
         </el-button>
+        <el-checkbox
+          v-model="allColumnsSelected"
+          :indeterminate="allColumnsSelectedIndeterminate"
+          @change="handleCheckAllChange"
+        >
+          全选
+        </el-checkbox>
         <el-checkbox
           v-for="item in crud.props.tableColumns"
           :key="item.label"
           v-model="item.visible"
+          @change="handleCheckedTableColumnsChange(item)"
         >
           {{ item.label }}
         </el-checkbox>
@@ -83,7 +91,7 @@
   </div>
 </template>
 <script>
-import { crud } from '@crud/crud'
+import CRUD, { crud } from '@crud/crud'
 export default {
   mixins: [crud()],
   props: {
@@ -94,6 +102,8 @@ export default {
   },
   data() {
     return {
+      allColumnsSelected: true,
+      allColumnsSelectedIndeterminate: false
     }
   },
   created() {
@@ -114,6 +124,34 @@ export default {
       }).catch(() => {
       })
     },
+    handleCheckAllChange(val) {
+      if (val === false) {
+        this.allColumnsSelected = true
+        return
+      }
+      for (const key in this.crud.props.tableColumns) {
+        this.crud.props.tableColumns[key].visible = val
+      }
+      this.allColumnsSelected = val
+      this.allColumnsSelectedIndeterminate = false
+    },
+    handleCheckedTableColumnsChange(item) {
+      let totalCount = 0
+      let selectedCount = 0
+      for (const key in this.crud.props.tableColumns) {
+        ++totalCount
+        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
+      }
+      if (selectedCount === 0) {
+        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
+        this.$nextTick(function() {
+          item.visible = true
+        })
+        return
+      }
+      this.allColumnsSelected = selectedCount === totalCount
+      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
+    },
     toggleSearch() {
       this.crud.props.searchToggle = !this.crud.props.searchToggle
     }