JVxeTableMixin.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import { VALIDATE_FAILED, getRefPromise, validateFormAndTables} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  2. import { httpAction, getAction } from '@/api/manage'
  3. export const JVxeTableMixin = {
  4. data() {
  5. return {
  6. title: '操作',
  7. visible: false,
  8. form: this.$form.createForm(this),
  9. confirmLoading: false,
  10. scrolling: true,
  11. model: {},
  12. labelCol: {
  13. xs: { span: 24 },
  14. sm: { span: 6 }
  15. },
  16. wrapperCol: {
  17. xs: { span: 24 },
  18. sm: { span: 18 }
  19. }
  20. }
  21. },
  22. methods: {
  23. /** 获取所有的JVxeTable实例 */
  24. getAllTable() {
  25. if (!(this.refKeys instanceof Array)) {
  26. throw this.throwNotArray('refKeys')
  27. }
  28. let values = this.refKeys.map(key => getRefPromise(this, key))
  29. return Promise.all(values)
  30. },
  31. /** 遍历所有的JVxeTable实例 */
  32. eachAllTable(callback) {
  33. // 开始遍历
  34. this.getAllTable().then(tables => {
  35. tables.forEach((item, index) => {
  36. if (typeof callback === 'function') {
  37. callback(item, index)
  38. }
  39. })
  40. })
  41. },
  42. /** 当点击新增按钮时调用此方法 */
  43. add() {
  44. if (typeof this.addBefore === 'function') this.addBefore()
  45. // 默认新增空数据
  46. let rowNum = this.addDefaultRowNum
  47. if (typeof rowNum !== 'number') {
  48. rowNum = 1
  49. console.warn('由于你没有在 data 中定义 addDefaultRowNum 或 addDefaultRowNum 不是数字,所以默认添加一条空数据,如果不想默认添加空数据,请将定义 addDefaultRowNum 为 0')
  50. }
  51. //update-begin-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
  52. this.eachAllTable((item) => {
  53. setTimeout(()=>{
  54. item.addRows()
  55. }, 30)
  56. })
  57. //update-end-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
  58. if (typeof this.addAfter === 'function') this.addAfter(this.model)
  59. this.edit({})
  60. },
  61. /** 当点击了编辑(修改)按钮时调用此方法 */
  62. edit(record) {
  63. if (typeof this.editBefore === 'function') this.editBefore(record)
  64. this.visible = true
  65. this.activeKey = this.refKeys[0]
  66. this.form.resetFields()
  67. this.model = Object.assign({}, record)
  68. if (typeof this.editAfter === 'function') this.editAfter(this.model)
  69. },
  70. /** 关闭弹窗,并将所有JVxeTable实例回归到初始状态 */
  71. close() {
  72. this.visible = false
  73. this.eachAllTable((item) => {
  74. item._remove()
  75. })
  76. this.$emit('close')
  77. },
  78. /** 查询某个tab的数据 */
  79. requestSubTableData(url, params, tab, success) {
  80. tab.loading = true
  81. getAction(url, params).then(res => {
  82. let { result } = res
  83. let dataSource = []
  84. if (result) {
  85. if (Array.isArray(result)) {
  86. dataSource = result
  87. } else if (Array.isArray(result.records)) {
  88. dataSource = result.records
  89. }
  90. }
  91. tab.dataSource = dataSource
  92. typeof success === 'function' ? success(res) : ''
  93. }).finally(() => {
  94. tab.loading = false
  95. })
  96. },
  97. /** 发起请求,自动判断是执行新增还是修改操作 */
  98. request(formData) {
  99. let url = this.url.add, method = 'post'
  100. if (this.model.id) {
  101. url = this.url.edit
  102. method = 'put'
  103. }
  104. this.confirmLoading = true
  105. console.log("formData===>",formData);
  106. httpAction(url, formData, method).then((res) => {
  107. if (res.success) {
  108. this.$message.success(res.message)
  109. this.$emit('ok')
  110. this.close()
  111. } else {
  112. this.$message.warning(res.message)
  113. }
  114. }).finally(() => {
  115. this.confirmLoading = false
  116. })
  117. },
  118. /* --- handle 事件 --- */
  119. /** ATab 选项卡切换事件 */
  120. handleChangeTabs(key) {
  121. // 自动重置scrollTop状态,防止出现白屏
  122. getRefPromise(this, key).then(vxeTable => {
  123. vxeTable.resetScrollTop()
  124. })
  125. },
  126. /** 关闭按钮点击事件 */
  127. handleCancel() {
  128. this.close()
  129. },
  130. /** 确定按钮点击事件 */
  131. handleOk() {
  132. /** 触发表单验证 */
  133. this.getAllTable().then(tables => {
  134. /** 一次性验证主表和所有的次表 */
  135. return validateFormAndTables(this.form, tables)
  136. }).then(allValues => {
  137. if (typeof this.classifyIntoFormData !== 'function') {
  138. throw this.throwNotFunction('classifyIntoFormData')
  139. }
  140. let formData = this.classifyIntoFormData(allValues)
  141. // 发起请求
  142. return this.request(formData)
  143. }).catch(e => {
  144. if (e.error === VALIDATE_NO_PASSED) {
  145. // 如果有未通过表单验证的子表,就自动跳转到它所在的tab
  146. this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
  147. } else {
  148. console.error(e)
  149. }
  150. })
  151. },
  152. /* --- throw --- */
  153. /** not a function */
  154. throwNotFunction(name) {
  155. return `${name} 未定义或不是一个函数`
  156. },
  157. /** not a array */
  158. throwNotArray(name) {
  159. return `${name} 未定义或不是一个数组`
  160. }
  161. }
  162. }