| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 | 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    },    showAlertInfo: {      type: Boolean,      default: false    },    showPagination: {      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) {      console.log('pageSize:', val)      Object.assign(this.localPagination, {        pageSize: val      })    },    showSizeChanger(val) {      console.log('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() {      this.loadData()    },    loadData(pagination, filters, sorter) {      this.localLoading = true      var result = this.data(        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        }        )      )      if (result instanceof Promise) {        result.then(r => {          this.localPagination = Object.assign({}, this.localPagination, {            // current: r.pageNo, // 返回结果中的当前分页数            // total: r.totalCount, // 返回结果中的总记录数            current: r.current, // 返回结果中的当前分页数            total: r.total, // 返回结果中的总记录数            showSizeChanger: this.showSizeChanger,            pageSize: (pagination && pagination.pageSize) ||              this.localPagination.pageSize          })                    // !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)//判断是否需要分页          // this.localDataSource = r.data // 返回结果中的数组数据          !r.total && ['auto', false].includes(this.showPagination) && (this.localPagination = false)          this.localDataSource = r.records // 返回结果中的数组数据          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.selectedRowKeys = selectedRowKeys      this.selectedRows = selectedRows      const list = this.needTotalList      this.needTotalList = list.map(item => {        return {          ...item,          total: selectedRows.reduce((sum, val) => {            const total = sum + get(val, item.dataIndex)            return isNaN(total) ? 0 : total          }, 0)        }      })      // this.$emit('change', selectedRowKeys, selectedRows)    },    updateEdit() {      this.selectedRows = []    },    onClearSelected() {      // 【TESTA-262】页面清空后还能才做所选行,增加  this.$emit('clearAll')      this.selectedRowKeys = []      this.selectedRows = []      this.updateSelect([], [])      this.$emit('clearAll')    },    renderMsg(h) {      const _vm = this      const d = []      // 构建 已选择      d.push(        h('span', {          style: {            marginRight: '12px'          }        }, ['已选择 ', h('a', {          style: {            fontWeight: 600          }        }, this.selectedRows.length)])      )      // 构建 列统计      this.needTotalList.map(item => {        d.push(h('span', {          style: {            marginRight: '12px'          }        },        [          `${item.title}总计 `,          h('a', {            style: {              fontWeight: 600            }          }, `${!item.customRender ? item.total : item.customRender(item.total)}`)        ]))      })      // 构建 清空选择      d.push(h('a', {        style: {          marginLeft: '24px'        },        on: {          click: _vm.onClearSelected        }      }, '清空'))      return d    },    renderAlert(h) {      return h('span', {        slot: 'message'      }, this.renderMsg(h))    }  },  render(h) {    const _vm = this    const props = {}    const localKeys = Object.keys(this.$data)    Object.keys(T.props).forEach(k => {      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`      if (localKeys.includes(localKey)) {        return props[k] = _vm[localKey]      }      return props[k] = _vm[k]    })    // 显示信息提示    if (this.showAlertInfo) {      props.rowSelection = {        selectedRowKeys: this.selectedRowKeys,        onChange: (selectedRowKeys, selectedRows) => {          _vm.updateSelect(selectedRowKeys, selectedRows)          _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })        }      }      return h('div', {}, [        h('a-alert', {          style: {            marginBottom: '16px'          },          props: {            type: 'info',            showIcon: true          }        }, [_vm.renderAlert(h)]),        h('a-table', {          tag: 'component',          attrs: props,          on: {            change: _vm.loadData          },          scopedSlots: this.$scopedSlots        }, this.$slots.default)      ])    }    return h('a-table', {      tag: 'component',      attrs: props,      on: {        change: _vm.loadData      },      scopedSlots: this.$scopedSlots    }, this.$slots.default)  }}
 |