| import T from 'ant-design-vue/es/table/Table' |
| import get from 'lodash.get' |
| |
| export default { |
| data () { |
| return { |
| needTotalList: [], |
| |
| selectedRows: [], |
| selectedRowKeys: [], |
| |
| localLoading: false, |
| localDataSource: [], |
| localPagination: Object.assign({}, T.props.pagination) |
| } |
| }, |
| props: Object.assign({}, T.props, { |
| rowKey: { |
| type: [String, Function], |
| default: 'id' |
| }, |
| data: { |
| type: Function, |
| required: true |
| }, |
| pageNum: { |
| type: Number, |
| default: 1 |
| }, |
| pageSize: { |
| type: Number, |
| default: 10 |
| }, |
| showSizeChanger: { |
| type: Boolean, |
| default: true |
| }, |
| size: { |
| type: String, |
| default: 'default' |
| }, |
| /** |
| * { |
| * show: true, |
| * clear: Function |
| * } |
| */ |
| alert: { |
| type: [Object, Boolean], |
| default: null |
| }, |
| rowSelection: { |
| type: Object, |
| default: null |
| }, |
| /** @Deprecated */ |
| showAlertInfo: { |
| type: Boolean, |
| default: false |
| }, |
| showPagination: { |
| type: String, |
| default: 'auto' |
| } |
| }), |
| watch: { |
| 'localPagination.current' (val) { |
| this.$router.push({ |
| name: this.$route.name, |
| params: Object.assign({}, this.$route.params, { |
| pageNo: val |
| }) |
| }) |
| }, |
| pageNum (val) { |
| Object.assign(this.localPagination, { |
| current: val |
| }) |
| }, |
| pageSize (val) { |
| Object.assign(this.localPagination, { |
| pageSize: val |
| }) |
| }, |
| showSizeChanger (val) { |
| Object.assign(this.localPagination, { |
| showSizeChanger: val |
| }) |
| } |
| }, |
| created () { |
| this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, { |
| current: this.pageNum, |
| pageSize: this.pageSize, |
| showSizeChanger: this.showSizeChanger |
| }) |
| this.needTotalList = this.initTotalList(this.columns) |
| this.loadData() |
| }, |
| methods: { |
| refresh (bool = false) { |
| bool && (this.localPagination = Object.assign({}, { |
| current: 1, pageSize: this.pageSize |
| })) |
| this.loadData() |
| }, |
| loadData (pagination, filters, sorter) { |
| this.localLoading = true |
| const parameter = Object.assign({ |
| pageNo: (pagination && pagination.current) || |
| this.localPagination.current, |
| pageSize: (pagination && pagination.pageSize) || |
| this.localPagination.pageSize |
| }, |
| (sorter && sorter.field && { |
| sortField: sorter.field |
| }) || {}, |
| (sorter && sorter.order && { |
| sortOrder: sorter.order |
| }) || {}, { |
| ...filters |
| } |
| ) |
| const result = this.data(parameter) |
| // eslint-disable-next-line |
| if (result instanceof Promise || '[object Promise]' === result.toString()) { |
| result.then(r => { |
| this.localPagination = Object.assign({}, this.localPagination, { |
| current: r.pageNo, // 返回结果中的当前分页数 |
| total: r.totalCount, // 返回结果中的总记录数 |
| showSizeChanger: this.showSizeChanger, |
| pageSize: (pagination && pagination.pageSize) || |
| this.localPagination.pageSize |
| }) |
| if (r.data.length === 0 && this.localPagination.current !== 1) { |
| this.localPagination.current-- |
| this.loadData() |
| return |
| } |
| |
| !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false) |
| this.localDataSource = r.data |
| this.localLoading = false |
| }) |
| } |
| }, |
| initTotalList (columns) { |
| const totalList = [] |
| columns && columns instanceof Array && columns.forEach(column => { |
| if (column.needTotal) { |
| totalList.push({ |
| ...column, |
| total: 0 |
| }) |
| } |
| }) |
| return totalList |
| }, |
| updateSelect (selectedRowKeys, selectedRows) { |
| this.selectedRows = selectedRows |
| this.selectedRowKeys = selectedRowKeys |
| const list = this.needTotalList |
| this.needTotalList = list.map(item => { |
| return { |
| ...item, |
| total: selectedRows.reduce((sum, val) => { |
| const total = sum + parseInt(get(val, item.dataIndex)) |
| return isNaN(total) ? 0 : total |
| }, 0) |
| } |
| }) |
| }, |
| clearSelected () { |
| if (this.rowSelection) { |
| this.rowSelection.onChange([], []) |
| this.updateSelect([], []) |
| } |
| }, |
| renderClear (callback) { |
| if (this.selectedRowKeys.length <= 0) return null |
| return ( |
| <a style="margin-left: 24px" onClick={() => { |
| callback() |
| this.clearSelected() |
| }}>清空</a> |
| ) |
| }, |
| renderAlert () { |
| const needTotalItems = this.needTotalList.map((item) => { |
| return (<span style="margin-right: 12px"> |
| {item.title}总计 <a style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a> |
| </span>) |
| }) |
| |
| const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? ( |
| this.renderClear(this.clearSelected) |
| ) : (this.alert !== null && typeof this.alert.clear === 'function') ? ( |
| this.renderClear(this.alert.clear) |
| ) : null |
| |
| return ( |
| <a-alert showIcon={true} style="margin-bottom: 16px"> |
| <template slot="message"> |
| <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span> |
| {needTotalItems} |
| {clearItem} |
| </template> |
| </a-alert> |
| ) |
| } |
| }, |
| |
| render () { |
| const props = {} |
| const localKeys = Object.keys(this.$data) |
| const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert |
| |
| Object.keys(T.props).forEach(k => { |
| const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}` |
| if (localKeys.includes(localKey)) { |
| props[k] = this[localKey] |
| return props[k] |
| } |
| if (k === 'rowSelection') { |
| if (showAlert && this.rowSelection) { |
| props[k] = { |
| selectedRows: this.selectedRows, |
| selectedRowKeys: this.selectedRowKeys, |
| onChange: (selectedRowKeys, selectedRows) => { |
| this.updateSelect(selectedRowKeys, selectedRows) |
| typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows) |
| } |
| } |
| return props[k] |
| } else if (!this.rowSelection) { |
| props[k] = null |
| return props[k] |
| } |
| } |
| props[k] = this[k] |
| return props[k] |
| }) |
| const table = ( |
| <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}> |
| { Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>)) } |
| </a-table> |
| ) |
| |
| return ( |
| <div class="table-wrapper"> |
| { showAlert ? this.renderAlert() : null } |
| { table } |
| </div> |
| ) |
| } |
| } |