Web/src/components/yoTable/index.js

@@ -0,0 +1,198 @@
+// 列设置用jsx实现起来较为困难
+import ColumnSetting from './column'
+
+export default {
+  props: {
+    pageNo: {
+      default: 1,
+      type: Number,
+    },
+    pageSize: {
+      default: 10,
+      type: Number,
+    },
+    loadData: {
+      type: Function,
+      require: true,
+    },
+    columns: {
+      type: Array,
+      require: true,
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+
+      type: '',
+
+      data: [],
+
+      pagination: {
+        current: this.pageNo,
+        pageSize: this.pageSize,
+        total: 0,
+        size: 'small',
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total) => `总共${total}条数据`
+      },
+
+      sorter: {
+        sortField: '',
+        sortOrder: '',
+      },
+
+      columnSettingVisible: false
+    };
+  },
+
+  created() {
+    this.onLoadData()
+  },
+
+  methods: {
+
+    renderColumnSetting() {
+
+      const props = {
+        visible: this.columnSettingVisible,
+        placement: 'bottomRight'
+      }
+
+      const on = {
+        visibleChange: (visible) => {
+          this.columnSettingVisible = visible
+        }
+      }
+
+      return (
+        <a-dropdown {...{ props, on }}>
+          <a-button onClick={() => this.columnSettingVisible = true}>设置列</a-button>
+          <a-menu slot="overlay" onClick={() => { return false }}>
+            {
+              this.columns.map(column => {
+                return (
+                  <a-menu-item key={column.dataIndex || column.key}>
+                    <a-checkbox checked={column.hidden} onChange={() => { column.hidden = !column.hidden }}>{column.title}</a-checkbox>
+                  </a-menu-item>
+                )
+              })
+            }
+          </a-menu>
+        </a-dropdown>
+      )
+    },
+
+    onLoading() {
+      this.loading = {
+        indicator: <a-icon type="loading" spin />
+      }
+    },
+
+    onLoaded() {
+      this.loading = false
+    },
+
+    onLoadData() {
+      this.onLoading()
+
+      this.loadData({
+        pageNo: this.pagination.current,
+        pageSize: this.pagination.pageSize,
+        ...this.sorter
+      }).then((res) => {
+        if (res.rows) {
+          // 普通表格
+          this.type = 'table'
+          this.data = res.rows
+          this.pagination.total = res.totalRows
+        } else if (res) {
+          // 树形表格
+          this.type = 'tree'
+          this.data = this.onClearChildren(res)
+          this.pagination = false
+        }
+        this.onLoaded()
+      })
+    },
+
+    onReloadData(refresh = false) {
+      if (refresh && refresh.constructor === Boolean && this.pagination.constructor === Object) {
+        this.pagination.current = this.pageNo
+        this.pagination.pageSize = this.pageSize
+      }
+      this.onLoadData()
+    },
+
+    onTableChange(pagination, filters, sorter) {
+      this.pagination = pagination
+      this.sorter = sorter
+      this.onLoadData()
+    },
+
+    /**
+     * 清除没有子节点内容的子节点位置
+     */
+    onClearChildren(data) {
+      data.forEach(p => {
+        if (p.children) {
+          if (p.children.length) {
+            p.children = this.onClearChildren(p.children)
+          } else {
+            delete p.children
+          }
+        }
+      })
+      return data
+    },
+  },
+
+  render() {
+    const props = {
+      loading: this.loading,
+      pagination: this.pagination,
+      dataSource: this.data,
+      columns: this.columns.filter(p => !p.hidden),
+      bordered: true,
+      size: 'middle',
+      rowKey: record => record.id,
+      scroll: { x: 'max-content' }
+    }
+
+    const on = {
+      change: this.onTableChange
+    }
+    return (
+      <section>
+        <a-alert type="warning" closable>
+          <template slot="message">
+            后端没有排序参数
+             <br />
+            字段固定应该遵循左侧固定到最左,右侧固定到最右(此逻辑难以实现)
+            </template>
+        </a-alert>
+        <br />
+        <div class="yo-action-bar">
+          <div class="yo-action-bar--actions">
+            {this.$scopedSlots.operator && this.$scopedSlots.operator()}
+          </div>
+          <div class="yo-action-bar--actions">
+            <a-button-group>
+              <a-button onClick={this.onReloadData}>刷新</a-button>
+              {
+                this.type === 'table' && <ColumnSetting {...{ props: { columns: this.columns } }} />
+              }
+            </a-button-group>
+          </div>
+        </div>
+        <a-table class="yo-table" {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
+          {Object.keys(this.$slots).map((name) => (
+            <template slot={name}>{this.$slots[name]}</template>
+          ))}
+        </a-table>
+      </section>
+    )
+  },
+}