useJvxeMethods.ts 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. import { defHttp } from '/@/utils/http/axios';
  2. import { ref, unref } from 'vue';
  3. import { VALIDATE_FAILED, validateFormModelAndTables } from '/@/utils/common/vxeUtils';
  4. export function useJvxeMethod(requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys, validateSubForm?) {
  5. const formRef = ref();
  6. /** 查询某个tab的数据 */
  7. function requestSubTableData(url, params, tab, success) {
  8. tab.loading = true;
  9. defHttp
  10. .get({ url, params }, { isTransformResponse: false })
  11. .then((res) => {
  12. let { result } = res;
  13. if (res.success && result) {
  14. if (Array.isArray(result)) {
  15. tab.dataSource = result;
  16. } else if (Array.isArray(result.records)) {
  17. tab.dataSource = result.records;
  18. }
  19. }
  20. typeof success === 'function' ? success(res) : '';
  21. })
  22. .finally(() => {
  23. tab.loading = false;
  24. });
  25. }
  26. /* --- handle 事件 --- */
  27. /** ATab 选项卡切换事件 */
  28. function handleChangeTabs(key) {
  29. // 自动重置scrollTop状态,防止出现白屏
  30. tableRefs[key]?.value?.resetScrollTop(0);
  31. }
  32. /** 获取所有的editableTable实例*/
  33. function getAllTable() {
  34. let values = Object.values(tableRefs);
  35. return Promise.all(values);
  36. }
  37. /** 确定按钮点击事件 */
  38. function handleSubmit() {
  39. /** 触发表单验证 */
  40. getAllTable()
  41. .then((tables) => {
  42. let values = formRef.value.getFieldsValue();
  43. return validateFormModelAndTables(formRef.value.validate, values, tables, formRef.value.getProps);
  44. })
  45. .then((allValues) => {
  46. /** 一次性验证一对一的所有子表 */
  47. return validateSubForm && typeof validateSubForm === 'function' ? validateSubForm(allValues) : validateAllSubOne(allValues);
  48. })
  49. .then((allValues) => {
  50. if (typeof classifyIntoFormData !== 'function') {
  51. throw throwNotFunction('classifyIntoFormData');
  52. }
  53. let formData = classifyIntoFormData(allValues);
  54. // 发起请求
  55. return requestAddOrEdit(formData);
  56. })
  57. .catch((e) => {
  58. if (e.error === VALIDATE_FAILED) {
  59. // 如果有未通过表单验证的子表,就自动跳转到它所在的tab
  60. activeKey.value = e.index == null ? unref(activeKey) : refKeys.value[e.index];
  61. } else {
  62. console.error(e);
  63. }
  64. });
  65. }
  66. //校验所有子表表单
  67. function validateAllSubOne(allValues) {
  68. return new Promise((resolve) => {
  69. resolve(allValues);
  70. });
  71. }
  72. /* --- throw --- */
  73. /** not a function */
  74. function throwNotFunction(name) {
  75. return `${name} 未定义或不是一个函数`;
  76. }
  77. /** not a array */
  78. function throwNotArray(name) {
  79. return `${name} 未定义或不是一个数组`;
  80. }
  81. return [handleChangeTabs, handleSubmit, requestSubTableData, formRef];
  82. }
  83. //update-begin-author:taoyan date:2022-6-16 for: 代码生成-原生表单用
  84. /**
  85. * 校验多个表单和子表table,用于原生的antd-vue的表单
  86. * @param activeKey 子表表单/vxe-table 所在tabs的 activeKey
  87. * @param refMap 子表表单/vxe-table对应的ref对象 map结构
  88. * 示例:
  89. * useValidateAntFormAndTable(activeKey, {
  90. * 'tableA': tableARef,
  91. * 'formB': formBRef
  92. * })
  93. */
  94. export function useValidateAntFormAndTable(activeKey, refMap) {
  95. /**
  96. * 获取所有子表数据
  97. */
  98. async function getSubFormAndTableData() {
  99. let formData = {};
  100. let all = Object.keys(refMap);
  101. let key = '';
  102. for (let i = 0; i < all.length; i++) {
  103. key = all[i];
  104. let instance = refMap[key].value;
  105. if (instance.isForm) {
  106. let subFormData = await validateFormAndGetData(instance, key);
  107. if (subFormData) {
  108. formData[key + 'List'] = [subFormData];
  109. }
  110. } else {
  111. let arr = await validateTableAndGetData(instance, key);
  112. if (arr && arr.length > 0) {
  113. formData[key + 'List'] = arr;
  114. }
  115. }
  116. }
  117. return formData;
  118. }
  119. /**
  120. * 转换数据用 如果有数组转成逗号分割的格式
  121. * @param data
  122. */
  123. function transformData(data) {
  124. if (data) {
  125. Object.keys(data).map((k) => {
  126. if (data[k] instanceof Array) {
  127. data[k] = data[k].join(',');
  128. }
  129. });
  130. }
  131. return data;
  132. }
  133. /**
  134. * 子表table
  135. * @param instance
  136. * @param key
  137. */
  138. async function validateTableAndGetData(instance, key) {
  139. const errors = await instance.validateTable();
  140. if (!errors) {
  141. return instance.getTableData();
  142. } else {
  143. activeKey.value = key;
  144. // 自动重置scrollTop状态,防止出现白屏
  145. instance.resetScrollTop(0);
  146. return Promise.reject(1);
  147. }
  148. }
  149. /**
  150. * 子表表单
  151. * @param instance
  152. * @param key
  153. */
  154. async function validateFormAndGetData(instance, key) {
  155. try {
  156. let data = await instance.getFormData();
  157. transformData(data);
  158. return data;
  159. } catch (e) {
  160. activeKey.value = key;
  161. return Promise.reject(e);
  162. }
  163. }
  164. return {
  165. getSubFormAndTableData,
  166. transformData,
  167. };
  168. }
  169. //update-end-author:taoyan date:2022-6-16 for: 代码生成-原生表单用