af-mobile-client-vue3 1.4.13 → 1.4.15

package/package.json

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

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

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { SignatureComponentExpose, SignatureComponentProps } from '@af-mobile-client-vue3/components/core/Signature/signature'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import { showImagePreview, showToast } from 'vant'
+import { defineEmits, defineProps, inject, ref } from 'vue'
+
+const props = withDefaults(defineProps<SignatureComponentProps>(), {
+  label: '用户签字',
+  required: false,
+  disabled: false,
+  uploadMode: 'server',
+  imageList: null,
+  formReadonly: false,
+  isAsyncUpload: false,
+})
+
+const emit = defineEmits<{
+  signatureComplete: [data: any]
+}>()
+
+const signatureImage = ref<string>('')
+const rawBase64Data = ref<string>('') // 保存原始base64数据
+const hasSignature = ref(false)
+const parentData: any = inject('provideParent')
+const imageList = ref<Array<any>>(props.imageList ?? [])
+console.log('imageList', imageList.value)
+console.log('props.imageList', props.imageList)
+// 处理签字后的上传
+function getImageMimeType(fileName: string): string {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  if (ext === 'jpg' || ext === 'jpeg')
+    return 'image/jpeg'
+  if (ext === 'png')
+    return 'image/png'
+  if (ext === 'gif')
+    return 'image/gif'
+  return 'image/png' // 默认
+}
+
+function handleSignature() {
+  if (props.disabled)
+    return
+
+  mobileUtil.execute({
+    funcName: 'showSignaturePad',
+    param: {},
+    callbackFunc: (result: any) => {
+      console.log('签字结果:', result)
+      if (result.status === 'success') {
+        const mimeType = getImageMimeType(result.data.filePath)
+        // 保存原始base64数据
+        rawBase64Data.value = result.data.base64
+        // 添加base64图片前缀用于显示
+        signatureImage.value = `data:${mimeType};base64,${result.data.base64}`
+        hasSignature.value = true
+        const tempFile = {
+          uid: Date.now() + Math.random().toString(36).substr(2, 5),
+          name: result.data.filePath.split('/').pop(),
+          status: 'uploading',
+          message: '上传中...',
+          url: `data:${mimeType};base64,${result.data.base64}`,
+          isImage: true,
+          type: mimeType,
+        }
+        if (imageList.value) {
+          imageList.value = [tempFile]
+        }
+
+        const param = {
+          resUploadMode: props.uploadMode,
+          pathKey: 'Default',
+          formType: 'image',
+          useType: 'Default',
+          resUploadStock: '1',
+          filename: tempFile.name,
+          // 暂无size
+          // filesize: photoData.size,
+          f_operator: 'server',
+          imgPath: result.data.filePath,
+          urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
+          commonId: parentData?.commonId.value ?? '',
+        }
+        if (props.isAsyncUpload) {
+          // 添加上传队列
+          mobileUtil.execute({
+            funcName: 'queueUpload',
+            param,
+            callbackFunc: (res: any) => {
+              console.warn('上传结果', res)
+              let resStatus = 'success'
+              // 成功
+              if (res.data && res.data.enqueued) {
+                const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+                if (index !== -1) {
+                  delete imageList.value[index].message
+                  imageList.value[index].status = 'done'
+                  imageList.value[index].photo_name = tempFile.name
+                  imageList.value[index].type = mimeType
+                }
+              }
+              else {
+                resStatus = 'error'
+                // 上传失败，显示错误提示并清除图片
+                const errorMessage = res.message || res.error || '上传失败，请重试'
+                showToast({
+                  message: errorMessage,
+                  type: 'fail',
+                  duration: 3000,
+                })
+                clearSignature()
+              }
+              emit('signatureComplete', {
+                status: resStatus,
+                data: imageList.value?.length > 0 ? imageList.value[0] : null,
+              })
+            },
+          })
+        }
+        else {
+          // 上传到服务器
+          mobileUtil.execute({
+            funcName: 'uploadResource',
+            param,
+            callbackFunc: (result: any) => {
+              const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+              if (result.status === 'success') {
+                if (index !== -1) {
+                  imageList.value[index].uid = result.data.id
+                  imageList.value[index].id = result.data.id
+                  imageList.value[index].photo_name = result.data.f_filename
+                  imageList.value[index].f_downloadpath = result.data.f_downloadpath
+                  delete imageList.value[index].message
+                  imageList.value[index].status = 'done'
+                }
+              }
+              else {
+                // 上传失败，显示错误提示并清除图片
+                const errorMessage = result.message || result.error || '上传失败，请重试'
+                showToast({
+                  message: errorMessage,
+                  type: 'fail',
+                  duration: 3000,
+                })
+                clearSignature()
+              }
+              emit('signatureComplete', {
+                status: result.status,
+                data: result.data,
+              })
+            },
+          })
+        }
+      }
+    },
+  })
+}
+
+function clearSignature() {
+  signatureImage.value = ''
+  rawBase64Data.value = ''
+  hasSignature.value = false
+  imageList.value = []
+  emit('signatureComplete', {
+    base64: '',
+    status: 'cleared',
+  })
+}
+
+// 预览签字照片
+function previewSignature() {
+  if (imageList.value) {
+    showImagePreview(imageList.value.map(item => item.url))
+  }
+}
+
+// 暴露方法供父组件调用
+defineExpose<SignatureComponentExpose>({
+  clearSignature,
+  hasSignature: () => hasSignature.value,
+  getSignatureData: () => rawBase64Data.value, // 返回原始base64数据
+  previewSignature,
+  getSignatureList: () => imageList.value.map((item) => { return { photo_name: item.photo_name, id: item.id, f_downloadpath: item.f_downloadpath } }),
+})
+</script>
+
+<template>
+  <van-field
+    center
+    name="signature"
+    :label="label"
+    :required="required"
+  >
+    <template #input>
+      <div class="signature-container">
+        <!-- 签字照片预览 -->
+        <div v-if="imageList.length > 0 || hasSignature" class="signature-preview">
+          <van-image
+            v-for="(item, index) in imageList"
+            :key="`${item}_${index}`"
+            :src="item.url"
+            alt="签字照片"
+            class="signature-image"
+            fit="contain"
+            :show-loading="true"
+            :show-error="true"
+            loading-icon="photo-o"
+            error-icon="warning-o"
+            @click="previewSignature"
+          />
+        </div>
+
+        <!-- 按钮行 -->
+        <div class="button-row">
+          <!-- 签字按钮 -->
+          <van-button
+            v-if="!props.formReadonly"
+            :disabled="disabled"
+            type="default"
+            size="small"
+            class="signature-btn dashed-btn"
+            @click="handleSignature"
+          >
+            <van-icon :name="hasSignature ? 'edit' : 'edit'" class="btn-icon" />
+            {{ imageList.length > 0 || hasSignature ? '重签' : '点击签字' }}
+          </van-button>
+
+          <!-- 清除按钮 -->
+          <van-button
+            v-if="(imageList.length > 0 || hasSignature) && !props.formReadonly"
+            type="default"
+            size="small"
+            class="dashed-btn clear-btn"
+            @click="clearSignature"
+          >
+            <van-icon name="delete" class="btn-icon" />
+            清除
+          </van-button>
+        </div>
+      </div>
+    </template>
+  </van-field>
+</template>
+
+<style scoped lang="less">
+.signature-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.signature-preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  .signature-image {
+    max-width: 200px;
+    max-height: 120px;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+}
+
+// 按钮行样式
+.button-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.signature-btn {
+  flex-shrink: 0;
+  margin-right: auto;
+}
+
+// 虚线按钮样式
+.dashed-btn {
+  border: 1px dashed #1989fa !important;
+  background-color: transparent !important;
+  color: #1989fa !important;
+  border-radius: 4px !important;
+
+  &:hover {
+    border-color: #0570d9 !important;
+    color: #0570d9 !important;
+  }
+
+  &:active {
+    border-color: #0366d6 !important;
+    color: #0366d6 !important;
+    background-color: rgba(25, 137, 250, 0.1) !important;
+  }
+
+  &:disabled {
+    border-color: #c8c9cc !important;
+    color: #c8c9cc !important;
+    background-color: transparent !important;
+  }
+}
+
+// 按钮图标样式
+.btn-icon {
+  margin-right: 4px;
+  font-size: 14px;
+}
+</style>

package/src/components/core/Signature/signature.ts

@@ -0,0 +1,38 @@
+// 签字结果接口
+export interface SignatureResult {
+  status: 'success' | 'failed' | 'cancelled' | 'cleared'
+  base64?: string
+  message?: string
+}
+
+// 签字组件属性接口
+export interface SignatureComponentProps {
+  label?: string
+  required?: boolean
+  disabled?: boolean
+  uploadMode?: string
+  imageList?: Array<any>
+  formReadonly?: boolean
+  isAsyncUpload?: boolean // 是否使用异步上传-异步上传后将不会返回file表的数据，需要通过上传时的文件名去t_files中查询
+}
+
+// 签字完成事件数据接口
+export interface SignatureCompleteData {
+  base64: string
+  status: string
+}
+
+// 签字组件暴露的方法接口
+export interface SignatureComponentExpose {
+  clearSignature: () => void
+  hasSignature: () => boolean
+  getSignatureData: () => string
+  previewSignature: () => void
+  getSignatureList: () => Array<any>
+}
+
+// base64图片工具类型
+export interface Base64ImageData {
+  raw: string // 原始base64数据（不含前缀）
+  full: string // 完整的base64图片URL（含前缀）
+}