280643d61313360902f67e6b470338ca7e8a151c.svn-base 6.7 KB

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