From 17aefdd1b4a411d0964352994e1214171e6183e2 Mon Sep 17 00:00:00 2001
From: Moxun <mxnstrive@gmail.com>
Date: Fri, 5 Jun 2020 09:09:58 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD]=20(#95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. @crud/CRUD.operation中增加对列隐藏(初始阶段)支持
  2. @crud/CRUD.operation中增加对列忽略支持
  3. @crud/CRUD.operation中列可见性控制选项顺序跟随表格列顺序变更

[代码完善]
  1. 取消crud.props记录tableColumns
  2. 调整表格列可见性控制时插入位置计算
---
 src/components/Crud/CRUD.operation.vue | 88 ++++++++++++++++++++++----
 src/components/Crud/crud.js            | 17 +----
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue
index d57c8c3..20fd0db 100644
--- a/src/components/Crud/CRUD.operation.vue
+++ b/src/components/Crud/CRUD.operation.vue
@@ -89,8 +89,8 @@
           全选
         </el-checkbox>
         <el-checkbox
-          v-for="item in crud.props.tableColumns"
-          :key="item.label"
+          v-for="item in tableColumns"
+          :key="item.property"
           v-model="item.visible"
           @change="handleCheckedTableColumnsChange(item)"
         >
@@ -102,24 +102,93 @@
 </template>
 <script>
 import CRUD, { crud } from '@crud/crud'
+
+function sortWithRef(src, ref) {
+  const result = Object.assign([], ref)
+  let cursor = -1
+  src.forEach(e => {
+    const idx = result.indexOf(e)
+    if (idx === -1) {
+      cursor += 1
+      result.splice(cursor, 0, e)
+    } else {
+      cursor = idx
+    }
+  })
+  return result
+}
+
 export default {
   mixins: [crud()],
   props: {
     permission: {
       type: Object,
       default: () => { return {} }
+    },
+    hiddenColumns: {
+      type: Array,
+      default: () => { return [] }
+    },
+    ignoreColumns: {
+      type: Array,
+      default: () => { return [] }
     }
   },
   data() {
     return {
+      tableColumns: [],
       allColumnsSelected: true,
-      allColumnsSelectedIndeterminate: false
+      allColumnsSelectedIndeterminate: false,
+      tableUnwatcher: null,
+      // 忽略下次表格列变动
+      ignoreNextTableColumnsChange: false
+    }
+  },
+  watch: {
+    'crud.props.table'() {
+      this.updateTableColumns()
+      this.tableColumns.forEach(column => {
+        if (this.hiddenColumns.indexOf(column.property) !== -1) {
+          column.visible = false
+          this.updateColumnVisible(column)
+        }
+      })
+    },
+    'crud.props.table.store.states.columns'() {
+      this.updateTableColumns()
     }
   },
   created() {
     this.crud.updateProp('searchToggle', true)
   },
   methods: {
+    updateTableColumns() {
+      const table = this.crud.getTable()
+      if (!table) {
+        this.tableColumns = []
+        return
+      }
+      let cols = null
+      const columnFilter = e => e && e.type === 'default' && e.property && this.ignoreColumns.indexOf(e.property) === -1
+      const refCols = table.columns.filter(columnFilter)
+      if (this.ignoreNextTableColumnsChange) {
+        this.ignoreNextTableColumnsChange = false
+        return
+      }
+      this.ignoreNextTableColumnsChange = false
+      const columns = []
+      const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter)
+      cols = sortWithRef(fullTableColumns, refCols)
+      cols.forEach(config => {
+        const column = {
+          property: config.property,
+          label: config.label,
+          visible: refCols.indexOf(config) !== -1
+        }
+        columns.push(column)
+      })
+      this.tableColumns = columns
+    },
     toDelete(datas) {
       this.$confirm(`确认删除选中的${datas.length}条数据?`, '提示', {
         confirmButtonText: '确定',
@@ -136,7 +205,7 @@ export default {
         this.allColumnsSelected = true
         return
       }
-      this.crud.props.tableColumns.forEach(column => {
+      this.tableColumns.forEach(column => {
         if (!column.visible) {
           column.visible = true
           this.updateColumnVisible(column)
@@ -148,7 +217,7 @@ export default {
     handleCheckedTableColumnsChange(item) {
       let totalCount = 0
       let selectedCount = 0
-      this.crud.props.tableColumns.forEach(column => {
+      this.tableColumns.forEach(column => {
         ++totalCount
         selectedCount += column.visible ? 1 : 0
       })
@@ -168,16 +237,13 @@ export default {
       const vm = table.$children.find(e => e.prop === item.property)
       const columnConfig = vm.columnConfig
       if (item.visible) {
-        let columnIndex = -1
         // 找出合适的插入点
-        table.store.states.columns.find(e => {
-          columnIndex++
-          return e.__index !== undefined && e.__index > columnConfig.__index
-        })
-        vm.owner.store.commit('insertColumn', columnConfig, columnIndex, null)
+        const columnIndex = this.tableColumns.indexOf(item)
+        vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null)
       } else {
         vm.owner.store.commit('removeColumn', columnConfig, null)
       }
+      this.ignoreNextTableColumnsChange = true
     },
     toggleSearch() {
       this.crud.props.searchToggle = !this.crud.props.searchToggle
diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js
index 8ad1744..1d38aa0 100644
--- a/src/components/Crud/crud.js
+++ b/src/components/Crud/crud.js
@@ -133,7 +133,7 @@ function CRUD(options) {
         // 请求数据
         initData(crud.url, crud.getQueryParams()).then(data => {
           const table = crud.getTable()
-          if (table.lazy) { // 懒加载子节点数据，清掉已加载的数据
+          if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据
             table.store.states.treeData = {}
             table.store.states.lazyTreeNodeMap = {}
           }
@@ -504,22 +504,7 @@ function CRUD(options) {
     },
     attchTable() {
       const table = this.getTable()
-      const columns = []
-      table.columns.forEach((e, index) => {
-        if (!e.property || e.type !== 'default') {
-          return
-        }
-        e.__index = index
-        columns.push({
-          property: e.property,
-          index,
-          label: e.label,
-          visible: true
-        })
-      })
-      this.updateProp('tableColumns', columns)
       this.updateProp('table', table)
-
       const that = this
       table.$on('expand-change', (row, expanded) => {
         if (!expanded) {