useJvxeMethods.ts 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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, false);
  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. //update-begin-author:taoyan date:2022-11-22 for: VUEN-2866【代码生成】Tab风格 一对多子表校验不通过时,点击提交表单空白了,流程附加页面也有此问题
  61. if(e.paneKey){
  62. activeKey.value = e.paneKey
  63. }else{
  64. activeKey.value = e.index == null ? unref(activeKey) : refKeys.value[e.index];
  65. }
  66. //update-end-author:taoyan date:2022-11-22 for: VUEN-2866【代码生成】Tab风格 一对多子表校验不通过时,点击提交表单空白了,流程附加页面也有此问题
  67. } else {
  68. console.error(e);
  69. }
  70. });
  71. }
  72. //校验所有子表表单
  73. function validateAllSubOne(allValues) {
  74. return new Promise((resolve) => {
  75. resolve(allValues);
  76. });
  77. }
  78. /* --- throw --- */
  79. /** not a function */
  80. function throwNotFunction(name) {
  81. return `${name} 未定义或不是一个函数`;
  82. }
  83. /** not a array */
  84. function throwNotArray(name) {
  85. return `${name} 未定义或不是一个数组`;
  86. }
  87. return [handleChangeTabs, handleSubmit, requestSubTableData, formRef];
  88. }
  89. //update-begin-author:taoyan date:2022-6-16 for: 代码生成-原生表单用
  90. /**
  91. * 校验多个表单和子表table,用于原生的antd-vue的表单
  92. * @param activeKey 子表表单/vxe-table 所在tabs的 activeKey
  93. * @param refMap 子表表单/vxe-table对应的ref对象 map结构
  94. * 示例:
  95. * useValidateAntFormAndTable(activeKey, {
  96. * 'tableA': tableARef,
  97. * 'formB': formBRef
  98. * })
  99. */
  100. export function useValidateAntFormAndTable(activeKey, refMap) {
  101. /**
  102. * 获取所有子表数据
  103. */
  104. async function getSubFormAndTableData() {
  105. let formData = {};
  106. let all = Object.keys(refMap);
  107. let key = '';
  108. for (let i = 0; i < all.length; i++) {
  109. key = all[i];
  110. let instance = refMap[key].value;
  111. if (instance.isForm) {
  112. let subFormData = await validateFormAndGetData(instance, key);
  113. if (subFormData) {
  114. formData[key + 'List'] = [subFormData];
  115. }
  116. } else {
  117. let arr = await validateTableAndGetData(instance, key);
  118. if (arr && arr.length > 0) {
  119. formData[key + 'List'] = arr;
  120. }
  121. }
  122. }
  123. return formData;
  124. }
  125. /**
  126. * 转换数据用 如果有数组转成逗号分割的格式
  127. * @param data
  128. */
  129. function transformData(data) {
  130. if (data) {
  131. Object.keys(data).map((k) => {
  132. if (data[k] instanceof Array) {
  133. data[k] = data[k].join(',');
  134. }
  135. });
  136. }
  137. return data;
  138. }
  139. /**
  140. * 子表table
  141. * @param instance
  142. * @param key
  143. */
  144. async function validateTableAndGetData(instance, key) {
  145. const errors = await instance.validateTable();
  146. if (!errors) {
  147. return instance.getTableData();
  148. } else {
  149. activeKey.value = key;
  150. // 自动重置scrollTop状态,防止出现白屏
  151. instance.resetScrollTop(0);
  152. return Promise.reject(1);
  153. }
  154. }
  155. /**
  156. * 子表表单
  157. * @param instance
  158. * @param key
  159. */
  160. async function validateFormAndGetData(instance, key) {
  161. try {
  162. let data = await instance.getFormData();
  163. transformData(data);
  164. return data;
  165. } catch (e) {
  166. activeKey.value = key;
  167. return Promise.reject(e);
  168. }
  169. }
  170. return {
  171. getSubFormAndTableData,
  172. transformData,
  173. };
  174. }
  175. //update-end-author:taoyan date:2022-6-16 for: 代码生成-原生表单用