index.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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. showSizeChanger: this.showSizeChanger,
  108. pageSize: (pagination && pagination.pageSize) ||
  109. this.localPagination.pageSize
  110. });
  111. !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
  112. this.localDataSource = r.data; // 返回结果中的数组数据
  113. this.localLoading = false
  114. });
  115. }
  116. },
  117. initTotalList(columns) {
  118. const totalList = []
  119. columns && columns instanceof Array && columns.forEach(column => {
  120. if (column.needTotal) {
  121. totalList.push({ ...column,
  122. total: 0
  123. })
  124. }
  125. })
  126. return totalList
  127. },
  128. updateSelect(selectedRowKeys, selectedRows) {
  129. this.selectedRowKeys = selectedRowKeys
  130. this.selectedRows = selectedRows
  131. let list = this.needTotalList
  132. this.needTotalList = list.map(item => {
  133. return {
  134. ...item,
  135. total: selectedRows.reduce((sum, val) => {
  136. let total = sum + get(val, item.dataIndex)
  137. return isNaN(total) ? 0 : total
  138. }, 0)
  139. }
  140. })
  141. // this.$emit('change', selectedRowKeys, selectedRows)
  142. },
  143. updateEdit() {
  144. this.selectedRows = []
  145. },
  146. onClearSelected() {
  147. // 【TESTA-262】页面清空后还能才做所选行,增加 this.$emit('clearAll')
  148. this.selectedRowKeys = []
  149. this.selectedRows = []
  150. this.updateSelect([], [])
  151. this.$emit('clearAll')
  152. },
  153. renderMsg(h) {
  154. const _vm = this
  155. let d = []
  156. // 构建 已选择
  157. d.push(
  158. h('span', {
  159. style: {
  160. marginRight: '12px'
  161. }
  162. }, ['已选择 ', h('a', {
  163. style: {
  164. fontWeight: 600
  165. }
  166. }, this.selectedRows.length)])
  167. );
  168. // 构建 列统计
  169. this.needTotalList.map(item => {
  170. d.push(h('span', {
  171. style: {
  172. marginRight: '12px'
  173. }
  174. },
  175. [
  176. `${ item.title }总计 `,
  177. h('a', {
  178. style: {
  179. fontWeight: 600
  180. }
  181. }, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
  182. ]))
  183. });
  184. // 构建 清空选择
  185. d.push(h('a', {
  186. style: {
  187. marginLeft: '24px'
  188. },
  189. on: {
  190. click: _vm.onClearSelected
  191. }
  192. }, '清空'))
  193. return d
  194. },
  195. renderAlert(h) {
  196. return h('span', {
  197. slot: 'message'
  198. }, this.renderMsg(h))
  199. },
  200. },
  201. render(h) {
  202. const _vm = this
  203. let props = {},
  204. localKeys = Object.keys(this.$data);
  205. Object.keys(T.props).forEach(k => {
  206. let localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`;
  207. if (localKeys.includes(localKey)) {
  208. return props[k] = _vm[localKey];
  209. }
  210. return props[k] = _vm[k];
  211. })
  212. // 显示信息提示
  213. if (this.showAlertInfo) {
  214. props.rowSelection = {
  215. selectedRowKeys: this.selectedRowKeys,
  216. onChange: (selectedRowKeys, selectedRows) => {
  217. _vm.updateSelect(selectedRowKeys, selectedRows)
  218. _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
  219. }
  220. };
  221. return h('div', {}, [
  222. h("a-alert", {
  223. style: {
  224. marginBottom: '16px'
  225. },
  226. props: {
  227. type: 'info',
  228. showIcon: true
  229. }
  230. }, [_vm.renderAlert(h)]),
  231. h("a-table", {
  232. tag: "component",
  233. attrs: props,
  234. on: {
  235. change: _vm.loadData
  236. },
  237. scopedSlots: this.$scopedSlots
  238. }, this.$slots.default)
  239. ]);
  240. }
  241. return h("a-table", {
  242. tag: "component",
  243. attrs: props,
  244. on: {
  245. change: _vm.loadData
  246. },
  247. scopedSlots: this.$scopedSlots
  248. }, this.$slots.default);
  249. }
  250. };