af-mobile-client-vue3 1.6.30 → 1.6.31

package/package.json

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

package/src/components/core/Signature/AdaptiveSignatureField.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { SignatureComponentExpose, SignatureComponentProps } from './signature'
+import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
+import { upload } from '@af-mobile-client-vue3/services/api/common'
+import { detectEnvironment } from '@af-mobile-client-vue3/utils/environment'
+import { showFailToast, Field as VanField } from 'vant'
+import { ref, watch } from 'vue'
+import SignatureComponent from './SignatureComponent.vue'
+
+const props = withDefaults(defineProps<SignatureComponentProps & {
+  serviceName?: string
+}>(), {
+  label: '用户签字',
+  required: false,
+  disabled: false,
+  uploadMode: 'server',
+  imageList: null,
+  formReadonly: false,
+  isAsyncUpload: false,
+  serviceName: undefined,
+})
+
+const emit = defineEmits<{
+  signatureComplete: [data: any]
+}>()
+
+// 仅区分 App / 非 App：原生桥只在 App 可用，其余环境统一走 H5 签名
+const isApp = detectEnvironment().isApp
+
+const nativeSignatureRef = ref<InstanceType<typeof SignatureComponent>>()
+const webSignatureImage = ref('')
+const webSignatureData = ref<any>(null)
+const webUploading = ref(false)
+
+const serviceName = props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME
+
+watch(
+  () => props.imageList,
+  (list) => {
+    if (isApp || !Array.isArray(list) || !list[0]?.url)
+      return
+    webSignatureImage.value = list[0].url
+  },
+  { immediate: true, deep: true },
+)
+
+async function uploadWebSignature(base64Image: string) {
+  const blob = await (await fetch(base64Image)).blob()
+  const filename = `signature_${Date.now()}.png`
+  const file = new File([blob], filename, { type: blob.type || 'image/png' })
+  const formData = new FormData()
+  formData.append('avatar', file)
+  formData.append('resUploadMode', props.uploadMode)
+  formData.append('pathKey', 'Default')
+  formData.append('formType', 'image')
+  formData.append('useType', 'Default')
+  formData.append('resUploadStock', '1')
+  formData.append('filename', filename)
+  formData.append('filesize', (file.size / 1024 / 1024).toFixed(4))
+  formData.append('f_operator', 'server')
+
+  return upload(formData, serviceName, { 'Content-Type': 'multipart/form-data' })
+}
+
+function resetWebSignature() {
+  webSignatureImage.value = ''
+  webSignatureData.value = null
+}
+
+async function handleWebSignatureSave(base64Image: string) {
+  if (props.disabled || props.formReadonly || webUploading.value)
+    return
+
+  webUploading.value = true
+  try {
+    const res: any = await uploadWebSignature(base64Image)
+    if (!res?.data?.id) {
+      showFailToast('签名上传失败')
+      resetWebSignature()
+      return
+    }
+    webSignatureData.value = res.data
+    emit('signatureComplete', { status: 'success', data: res.data })
+  }
+  catch (error) {
+    console.error('签名上传失败:', error)
+    showFailToast('签名上传失败')
+    resetWebSignature()
+  }
+  finally {
+    webUploading.value = false
+  }
+}
+
+function handleWebSignatureClear() {
+  resetWebSignature()
+  emit('signatureComplete', { base64: '', status: 'cleared' })
+}
+
+defineExpose<SignatureComponentExpose>({
+  clearSignature() {
+    if (isApp)
+      nativeSignatureRef.value?.clearSignature()
+    else
+      handleWebSignatureClear()
+  },
+  hasSignature() {
+    if (isApp)
+      return nativeSignatureRef.value?.hasSignature() ?? false
+    return !!webSignatureData.value?.id || !!webSignatureImage.value
+  },
+  getSignatureData() {
+    if (isApp)
+      return nativeSignatureRef.value?.getSignatureData() ?? ''
+    return webSignatureImage.value.replace(/^data:image\/\w+;base64,/, '')
+  },
+  previewSignature() {
+    nativeSignatureRef.value?.previewSignature()
+  },
+  getSignatureList() {
+    if (isApp)
+      return nativeSignatureRef.value?.getSignatureList() ?? []
+    if (!webSignatureData.value)
+      return []
+    return [{
+      photo_name: webSignatureData.value.f_filename,
+      id: webSignatureData.value.id,
+      f_downloadpath: webSignatureData.value.f_downloadpath,
+    }]
+  },
+})
+</script>
+
+<template>
+  <!-- App：原生签字板 -->
+  <SignatureComponent
+    v-if="isApp"
+    ref="nativeSignatureRef"
+    :label="label"
+    :required="required"
+    :disabled="disabled"
+    :upload-mode="uploadMode"
+    :image-list="imageList"
+    :form-readonly="formReadonly"
+    :is-async-upload="isAsyncUpload"
+    @signature-complete="emit('signatureComplete', $event)"
+  />
+  <!-- 非 App：H5 在线签名（浏览器、微信等） -->
+  <VanField
+    v-else
+    center
+    name="signature"
+    :label="label"
+    :required="required"
+  >
+    <template #input>
+      <XSignature
+        v-model="webSignatureImage"
+        button-text="点击签字"
+        :show-button-after-signed="true"
+        :show-sign-button="!formReadonly"
+        :show-preview="true"
+        @save="handleWebSignatureSave"
+        @clear="handleWebSignatureClear"
+      />
+    </template>
+  </VanField>
+</template>

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

@@ -2,7 +2,7 @@
 import type { FieldType } from 'vant'
 import type { Numeric } from 'vant/es/utils'
 import ImageUploader from '@af-mobile-client-vue3/components/core/ImageUploader/index.vue'
-import SignatureComponent from '@af-mobile-client-vue3/components/core/Signature/SignatureComponent.vue'
+import AdaptiveSignatureField from '@af-mobile-client-vue3/components/core/Signature/AdaptiveSignatureField.vue'
 import XDatePicker from '@af-mobile-client-vue3/components/core/XDatePicker/index.vue'
 import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
 import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
@@ -1275,17 +1275,17 @@ function commChange() {
         />
       </template>
     </VanField>
-    <!-- 手机端签字 -->
-    <SignatureComponent
+    <!-- 签字：App 原生签字板，微信/浏览器 H5 在线签名 -->
+    <AdaptiveSignatureField
       v-if="attr.type === 'signature' && showItem"
       :label="labelData"
       upload-mode="server"
       :image-list="(modelData as any[])"
-      authority="admin"
-      :required="attr.rule?.required"
+      :required="attr.rule?.required === 'true'"
       :disabled="attr.disabled"
       :form-readonly="readonly"
       :is-async-upload="isAsyncUpload"
+      :service-name="serviceName"
       @signature-complete="signatureComplete"
     />