601d9eda8c607d1f0f4cbc7a22d4d84641a2839f.svn-base 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. import T from 'ant-design-vue/es/table/Table'
  2. import get from 'lodash.get'
  3. export default {
  4. data() {
  5. return {
  6. needTotalList: [],
  7. selectedRows: [],
  8. selectedRowKeys: [],
  9. localLoading: false,
  10. localDataSource: [],
  11. localPagination: Object.assign({}, T.props.pagination)
  12. }
  13. },
  14. props: Object.assign({}, T.props, {
  15. rowKey: {
  16. type: [String, Function],
  17. default: 'id'
  18. },
  19. data: {
  20. type: Function,
  21. required: true
  22. },
  23. pageNum: {
  24. type: Number,
  25. default: 1
  26. },
  27. pageSize: {
  28. type: Number,
  29. default: 10
  30. },
  31. showSizeChanger: {
  32. type: Boolean,
  33. default: true
  34. },
  35. showAlertInfo: {
  36. type: Boolean,
  37. default: false
  38. },
  39. showPagination: {
  40. default: 'auto'
  41. }
  42. }),
  43. watch: {
  44. 'localPagination.current'(val) {
  45. this.$router.push({
  46. name: this.$route.name,
  47. params: Object.assign({}, this.$route.params, {
  48. pageNo: val
  49. })
  50. })
  51. },
  52. pageNum(val) {
  53. Object.assign(this.localPagination, {
  54. current: val
  55. })
  56. },
  57. pageSize(val) {
  58. console.log('pageSize:', val)
  59. Object.assign(this.localPagination, {
  60. pageSize: val
  61. })
  62. },
  63. showSizeChanger(val) {
  64. console.log('showSizeChanger', val)
  65. Object.assign(this.localPagination, {
  66. showSizeChanger: val
  67. })
  68. }
  69. },
  70. created() {
  71. this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
  72. current: this.pageNum,
  73. pageSize: this.pageSize,
  74. showSizeChanger: this.showSizeChanger
  75. })
  76. this.needTotalList = this.initTotalList(this.columns)
  77. this.loadData()
  78. },
  79. methods: {
  80. refresh() {
  81. this.loadData()
  82. },
  83. loadData(pagination, filters, sorter) {
  84. this.localLoading = true
  85. var result = this.data(
  86. Object.assign({
  87. pageNo: (pagination && pagination.current) ||
  88. this.localPagination.current,
  89. pageSize: (pagination && pagination.pageSize) ||
  90. this.localPagination.pageSize
  91. },
  92. (sorter && sorter.field && {
  93. sortField: sorter.field
  94. }) || {},
  95. (sorter && sorter.order && {
  96. sortOrder: sorter.order
  97. }) || {}, {
  98. ...filters
  99. }
  100. )
  101. )
  102. if (result instanceof Promise) {
  103. result.then(r => {
  104. this.localPagination = Object.assign({}, this.localPagination, {
  105. // current: r.pageNo, // 返回结果中的当前分页数
  106. // total: r.totalCount, // 返回结果中的总记录数
  107. current: r.current, // 返回结果中的当前分页数
  108. total: r.total, // 返回结果中的总记录数
  109. showSizeChanger: this.showSizeChanger,
  110. pageSize: (pagination && pagination.pageSize) ||
  111. this.localPagination.pageSize
  112. })
  113. // !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)//判断是否需要分页
  114. // this.localDataSource = r.data // 返回结果中的数组数据
  115. !r.total && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
  116. this.localDataSource = r.records // 返回结果中的数组数据
  117. this.localLoading = false
  118. })
  119. }
  120. },
  121. initTotalList(columns) {
  122. const totalList = []
  123. columns && columns instanceof Array && columns.forEach(column => {
  124. if (column.needTotal) {
  125. totalList.push({ ...column,
  126. total: 0
  127. })
  128. }
  129. })
  130. return totalList
  131. },
  132. updateSelect(selectedRowKeys, selectedRows) {
  133. this.selectedRowKeys = selectedRowKeys
  134. this.selectedRows = selectedRows
  135. const list = this.needTotalList
  136. this.needTotalList = list.map(item => {
  137. return {
  138. ...item,
  139. total: selectedRows.reduce((sum, val) => {
  140. const total = sum + get(val, item.dataIndex)
  141. return isNaN(total) ? 0 : total
  142. }, 0)
  143. }
  144. })
  145. // this.$emit('change', selectedRowKeys, selectedRows)
  146. },
  147. updateEdit() {
  148. this.selectedRows = []
  149. },
  150. onClearSelected() {
  151. // 【TESTA-262】页面清空后还能才做所选行,增加 this.$emit('clearAll')
  152. this.selectedRowKeys = []
  153. this.selectedRows = []
  154. this.updateSelect([], [])
  155. this.$emit('clearAll')
  156. },
  157. renderMsg(h) {
  158. const _vm = this
  159. const d = []
  160. // 构建 已选择
  161. d.push(
  162. h('span', {
  163. style: {
  164. marginRight: '12px'
  165. }
  166. }, ['已选择 ', h('a', {
  167. style: {
  168. fontWeight: 600
  169. }
  170. }, this.selectedRows.length)])
  171. )
  172. // 构建 列统计
  173. this.needTotalList.map(item => {
  174. d.push(h('span', {
  175. style: {
  176. marginRight: '12px'
  177. }
  178. },
  179. [
  180. `${item.title}总计 `,
  181. h('a', {
  182. style: {
  183. fontWeight: 600
  184. }
  185. }, `${!item.customRender ? item.total : item.customRender(item.total)}`)
  186. ]))
  187. })
  188. // 构建 清空选择
  189. d.push(h('a', {
  190. style: {
  191. marginLeft: '24px'
  192. },
  193. on: {
  194. click: _vm.onClearSelected
  195. }
  196. }, '清空'))
  197. return d
  198. },
  199. renderAlert(h) {
  200. return h('span', {
  201. slot: 'message'
  202. }, this.renderMsg(h))
  203. }
  204. },
  205. render(h) {
  206. const _vm = this
  207. const props = {}
  208. const localKeys = Object.keys(this.$data)
  209. Object.keys(T.props).forEach(k => {
  210. const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
  211. if (localKeys.includes(localKey)) {
  212. return props[k] = _vm[localKey]
  213. }
  214. return props[k] = _vm[k]
  215. })
  216. // 显示信息提示
  217. if (this.showAlertInfo) {
  218. props.rowSelection = {
  219. selectedRowKeys: this.selectedRowKeys,
  220. onChange: (selectedRowKeys, selectedRows) => {
  221. _vm.updateSelect(selectedRowKeys, selectedRows)
  222. _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
  223. }
  224. }
  225. return h('div', {}, [
  226. h('a-alert', {
  227. style: {
  228. marginBottom: '16px'
  229. },
  230. props: {
  231. type: 'info',
  232. showIcon: true
  233. }
  234. }, [_vm.renderAlert(h)]),
  235. h('a-table', {
  236. tag: 'component',
  237. attrs: props,
  238. on: {
  239. change: _vm.loadData
  240. },
  241. scopedSlots: this.$scopedSlots
  242. }, this.$slots.default)
  243. ])
  244. }
  245. return h('a-table', {
  246. tag: 'component',
  247. attrs: props,
  248. on: {
  249. change: _vm.loadData
  250. },
  251. scopedSlots: this.$scopedSlots
  252. }, this.$slots.default)
  253. }
  254. }