af-mobile-client-vue3 1.5.80 → 1.5.81

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.5.80",
+  "version": "1.5.81",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/data/XForm/index.vue

@@ -71,6 +71,8 @@ const props = withDefaults(defineProps<{
   labelAlign?: string
   // 表单文本对齐方式 left、center、right
   inputAlign?: string
+  /** 是否启用提交按钮 loading（默认不启用，保持历史行为） */
+  enableSubmitLoading?: boolean
 }>(), {
   configName: undefined,
   groupTitle: undefined,
@@ -88,6 +90,7 @@ const props = withDefaults(defineProps<{
   watermarkCustomLines: () => [],
   labelAlign: undefined,
   inputAlign: undefined,
+  enableSubmitLoading: false,
 })
 
 const emits = defineEmits(['onSubmit', 'xFormItemEmitFunc'])
@@ -103,6 +106,7 @@ const form = ref({})
 const rules = reactive({})
 const myGetDataParams = ref({})
 const isKeyHandle = ref(false)
+const submitLoading = ref(false)
 
 // 配置相关状态
 const formConfig = ref<GroupFormItems | null>(null)
@@ -658,33 +662,44 @@ function getFormData() {
 }
 
 async function onSubmit() {
-  await validate()
-  // 清理表单数据
-  let realForm = prepareForm()
-  await appendSilenceAddFields(realForm)
-  if (!props.configName && props.groupFormItems) {
-    // 只有单表才可以成功，多表关联或者自定义sql不行
-    realForm = handleFormKeys(realForm)
-
-    try {
-      addOrModifyEntity(realForm, tableName.value, props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME).then(() => {
-        showSuccessToast('提交成功!！')
-      })
-    }
-    catch (error) {
-      showFailToast('提交失败!！')
+  if (props.enableSubmitLoading) {
+    if (submitLoading.value)
+      return
+    submitLoading.value = true
+  }
+  try {
+    await validate()
+    // 清理表单数据
+    let realForm = prepareForm()
+    await appendSilenceAddFields(realForm)
+    if (!props.configName && props.groupFormItems) {
+      // 只有单表才可以成功，多表关联或者自定义sql不行
+      realForm = handleFormKeys(realForm)
+
+      try {
+        addOrModifyEntity(realForm, tableName.value, props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME).then(() => {
+          showSuccessToast('提交成功!！')
+        })
+      }
+      catch (error) {
+        showFailToast('提交失败!！')
+      }
+      finally {
+        setTimeout(() => {
+          history.back()
+        }, 1000)
+      }
     }
-    finally {
-      setTimeout(() => {
-        history.back()
-      }, 1000)
+    else {
+      if (isKeyHandle.value)
+        realForm = handleFormKeys(realForm)
+      // 使用清理后的数据
+      emits('onSubmit', realForm)
     }
   }
-  else {
-    if (isKeyHandle.value)
-      realForm = handleFormKeys(realForm)
-    // 使用清理后的数据
-    emits('onSubmit', realForm)
+  catch {
+    if (props.enableSubmitLoading)
+      submitLoading.value = false
   }
 }
 async function validate() {
@@ -695,7 +710,17 @@ function emitFunc(func: any, data: any, value: any, attr: any) {
   emits('xFormItemEmitFunc', func, data, value, attr)
 }
 
-defineExpose({ init, form, formGroupName, validate, asyncSubmit, setForm, getFormData, setFormData })
+function openLoading() {
+  if (props.enableSubmitLoading)
+    submitLoading.value = true
+}
+
+function closeLoading() {
+  if (props.enableSubmitLoading)
+    submitLoading.value = false
+}
+
+defineExpose({ init, form, formGroupName, validate, asyncSubmit, setForm, getFormData, setFormData, openLoading, closeLoading })
 </script>
 
 <template>
@@ -733,7 +758,15 @@ defineExpose({ init, form, formGroupName, validate, asyncSubmit, setForm, getFor
       </div>
     </div>
     <div v-if="resolvedSubmitButton && props.mode !== '预览' && !props.formReadonly" class="form-footer-fixed">
-      <VanButton class="action-btn" round block type="primary" native-type="submit">
+      <VanButton
+        class="action-btn"
+        round
+        block
+        type="primary"
+        native-type="submit"
+        :loading="props.enableSubmitLoading && submitLoading"
+        :disabled="props.enableSubmitLoading && submitLoading"
+      >
         {{ props.groupFormItems?.btnName ? props.groupFormItems.btnName : '提交' }}
       </VanButton>
       <slot />

package/src/components/data/XFormGroup/index.vue

@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<{
   isScrollspy?: boolean
   formShow?: any
   showTabHeader?: boolean
+  /** 是否启用提交按钮 loading（默认不启用，保持历史行为） */
+  enableSubmitLoading?: boolean
 }>(), {
   configName: '',
   serviceName: undefined,
@@ -20,6 +22,7 @@ const props = withDefaults(defineProps<{
   isScrollspy: true,
   formShow: undefined,
   showTabHeader: true,
+  enableSubmitLoading: false,
 })
 const emit = defineEmits(['submit', 'xFormItemEmitFunc'])
 
@@ -28,6 +31,7 @@ const formData = ref({})
 const submitGroup = ref(false)
 const submitSimple = ref(false)
 const isInit = ref(false)
+const submitLoading = ref(false)
 
 const slots = useSlots()
 const renderableGroupItems = computed(() => {
@@ -93,13 +97,30 @@ function removeRef(refValue: XFormLike) {
 }
 
 async function submit() {
+  if (props.enableSubmitLoading) {
+    if (submitLoading.value)
+      return
+    submitLoading.value = true
+  }
   console.log(props.groupFormData)
   const groupFormData = await getGroupFormData()
   if (!groupFormData) {
+    if (props.enableSubmitLoading)
+      submitLoading.value = false
     return
   }
   emit('submit', formData.value)
 }
+
+function openLoading() {
+  if (props.enableSubmitLoading)
+    submitLoading.value = true
+}
+
+function closeLoading() {
+  if (props.enableSubmitLoading)
+    submitLoading.value = false
+}
 async function getGroupFormData(isValidate = true) {
   for (const res of xFormListRef.value) {
     try {
@@ -129,7 +150,7 @@ onMounted(() => {
   offsetTop.value = Number.parseInt(navBarHeight, 10) || 60 + 10
 })
 
-defineExpose({ init, removeRef, xFormListRef, getGroupFormData })
+defineExpose({ init, removeRef, xFormListRef, getGroupFormData, openLoading, closeLoading })
 </script>
 
 <template>
@@ -175,7 +196,15 @@ defineExpose({ init, removeRef, xFormListRef, getGroupFormData })
       </VanTab>
     </VanTabs>
     <div class="form-footer-fixed">
-      <VanButton v-if="submitGroup" round block type="primary" @click="submit">
+      <VanButton
+        v-if="submitGroup"
+        round
+        block
+        type="primary"
+        :loading="props.enableSubmitLoading && submitLoading"
+        :disabled="props.enableSubmitLoading && submitLoading"
+        @click="submit"
+      >
         提交
       </VanButton>
     </div>

package/src/views/component/XFormGroupView/index.vue

@@ -9,52 +9,18 @@ import { useRoute } from 'vue-router'
 const configName = ref('form_check_test')
 const serviceName = ref('af-system')
 
-// const configName = ref("计划下发Form")
-// const serviceName = ref("af-linepatrol")
-
-// 表单组
-// const configName = ref('lngChargeAuditMobileFormGroup')
-// const serviceName = ref('af-gaslink')
-
 const formData = ref({})
-const formGroup = ref(null)
+const formGroup = ref<any>(null)
 const route = useRoute()
 const isInit = ref(false)
 function submit(_result) {
   showDialog({ message: '提交成功' }).then(() => {
+    formGroup.value?.closeLoading?.()
     history.back()
+  }).catch(() => {
+    formGroup.value?.closeLoading?.()
   })
 }
-
-// 表单组——数据
-// function initComponents () {
-//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
-//     formData.value = {...res}
-//   })
-// }
-
-// 纯表单——数据
-// function initComponents() {
-//   formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
-// }
-
-// function initComponents() {
-//   runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
-//     console.log('res------', res)
-//     formData.value = { ...res }
-// formGroup.value.init({
-//   configName: configName.value,
-//   serviceName: serviceName.value,
-//   groupFormData: { ...res },
-//   mode: "新增"
-// })
-//     isInit.value = true
-//   })
-// }
-
-// onBeforeMount(() => {
-//   initComponents()
-// })
 </script>
 
 <template>
@@ -66,6 +32,7 @@ function submit(_result) {
         :config-name="configName"
         :service-name="serviceName"
         :group-form-data="formData"
+        :enable-submit-loading="true"
         mode="新增"
         @submit="submit"
       />

package/src/views/component/XFormView/index.vue

@@ -8,13 +8,22 @@ import { ref } from 'vue'
 const configName = ref('AddConstructionForm')
 const serviceName = ref('af-linepatrol')
 
-const formGroupAddConstruction = ref(null)
-
+const formGroupAddConstruction = ref<any>(null)
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
 // 地图预览相关
 const previewMapRef = ref(null)
-function onSubmit(data: any) {
-  console.warn('提交表单', data)
-  router.back()
+
+async function onSubmit(data: any) {
+  try {
+    console.warn('提交表单', data)
+    await sleep(1000) // 暂停10秒
+    router.back()
+  }
+  finally {
+    formGroupAddConstruction.value?.closeLoading?.()
+  }
 }
 function onAddressChange(data: any) {
   console.warn('表单新增数据变化', data)
@@ -33,6 +42,7 @@ function onRegionChange(data: any) {
         mode="新增"
         :config-name="configName"
         :service-name="serviceName"
+        :enable-submit-loading="true"
         @address-change="onAddressChange"
         @region-change="onRegionChange"
         @on-submit="onSubmit"