af-mobile-client-vue3 1.6.43 → 1.6.45

package/package.json

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

package/src/components/common/otherCharge/ChargePrintSelectorAndRemarks.vue

@@ -6,7 +6,7 @@ import {
   Picker as VanPicker,
   Popup as VanPopup,
 } from 'vant'
-import { ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue: string
@@ -51,6 +51,9 @@ watch(() => props.modelValue, (newValue) => {
 watch(() => props.remarks, (newValue) => {
   remarks.value = newValue
 })
+onBeforeUnmount(() => {
+  showPicker.value = false
+})
 </script>
 
 <template>

package/src/components/common/otherCharge/GridFileUploader.vue

@@ -10,7 +10,7 @@ import {
   Icon as VanIcon,
   ImagePreview as VanImagePreview,
 } from 'vant'
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
 
 export interface FileTypeConfig {
   userType: string
@@ -371,7 +371,9 @@ function validateAll(): boolean {
 const minLength = computed(() => {
   return props.fileTypes.reduce((acc, config) => acc + config.picMinNum, 0)
 })
-
+onBeforeUnmount(() => {
+  showPreview.value = false
+})
 // 暴露验证方法给父组件
 defineExpose({
   validateAll,

package/src/components/core/ImageUploader/index.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import type { NativePickedFile } from '@af-mobile-client-vue3/utils/nativeFilePicker'
 // import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
 import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
 import { detectEnvironment } from '@af-mobile-client-vue3/utils/environment'
-import { buildInputAccept, getFileTypeMeta, getUploadFormType, isImageFileName } from '@af-mobile-client-vue3/utils/fileType'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import {
-  hasNativeFilePicker,
-  openNativeFilePicker,
-  triggerBrowserFileInput,
-} from '@af-mobile-client-vue3/utils/nativeFilePicker'
-import { toDataUrl } from '@af-mobile-client-vue3/utils/resourceUrl'
 import { formatNow } from '@af-mobile-client-vue3/utils/timeUtil'
 import {
   ActionSheet,
@@ -19,7 +11,7 @@ import {
   Icon as VanIcon,
   Uploader as vanUploader,
 } from 'vant'
-import { computed, inject, ref } from 'vue'
+import { inject, onBeforeUnmount, ref } from 'vue'
 
 interface WatermarkConfig {
   fontSize?: number | string
@@ -36,7 +28,7 @@ const props = defineProps({
   outerIndex: { default: undefined },
   authority: { default: 'user' },
   uploadMode: { default: 'server' },
-  attr: { type: Object as () => { type?: string, addOrEdit?: string, accept?: string[] | string, acceptCount?: number, minAcceptCount?: number, uploadImage?: boolean, watermark?: WatermarkConfig, useType?: string }, default: () => ({}) },
+  attr: { type: Object as () => { addOrEdit?: string, acceptCount?: number, minAcceptCount?: number, uploadImage?: boolean, watermark?: WatermarkConfig, useType?: string }, default: () => ({}) },
   mode: { default: '新增' }, // 预览
   serviceName: { type: String, default: '' },
   // 整体只读：只允许预览，禁止拍照/上传/删除
@@ -47,19 +39,30 @@ const emit = defineEmits(['updateFileList', 'updateAllFileList'])
 
 const imageList = ref<Array<any>>(props.imageList ?? [])
 
-const parentData: any = inject('provideParent')
-const imageInputRef = ref<HTMLInputElement | undefined>()
-const documentInputRef = ref<HTMLInputElement | undefined>()
-const showActionSheet = ref(false)
+// 从父组件获取 commonId，仅读取一次而非持有引用
+const parentCommonId = (() => {
+  try {
+    const parent = inject<any>('provideParent', undefined)
+    return parent?.commonId?.value ?? ''
+  }
+  catch {
+    return ''
+  }
+})()
 
-const documentAccept = computed(() => buildInputAccept(props.attr?.accept))
+// 浏览器 / 微信内 H5：统一用隐藏 file input（与单独 camera input 行为等价，均为系统选图）
+// const fileInputRef = ref<HTMLInputElement | undefined>()
+const parentData: any = inject('provideParent')
+// 浏览器 / 微信内 H5：统一用隐藏 file input（与单独 camera input 行为等价，均为系统选图）
+const fileInputRef = ref<HTMLInputElement | undefined>()
 
-function openImageFilePicker() {
-  triggerBrowserFileInput(imageInputRef.value)
+function openBrowserFilePicker() {
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+    fileInputRef.value.click()
+  }
 }
 
-const useNativeDocumentPicker = computed(() => hasNativeFilePicker())
-
 function emitUpdatesAfterChange() {
   // 新增：对外抛出完整与ID列表
   (emit as any)('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item))
@@ -74,31 +77,13 @@ function emitUpdatesAfterChange() {
   }
 }
 
-const DOC_TILE_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82"><rect width="82" height="82" rx="8" fill="#f0f1f5"/></svg>')}`
-
-function isFileItemImage(item: any): boolean {
-  if (item?.isDocument)
-    return false
-  if (item?.isImage === false)
-    return false
-  if (item?.isImage === true && !item?.isDocument)
-    return true
-  return isImageFileName(item?.name || item?.photo_name || item?.f_downloadpath || '')
-}
-
-function getItemFileMeta(item: any) {
-  return getFileTypeMeta(item?.name || item?.photo_name || item?.f_downloadpath || '')
-}
-
-function createTempUploadingItem(name: string, previewUrl: string, isImage = true) {
+function createTempUploadingItem(name: string, previewUrl: string) {
   const temp = {
     uid: Date.now() + Math.random().toString(36).substr(2, 5),
     name,
     status: 'uploading',
     message: '上传中...',
-    url: isImage ? (previewUrl || undefined) : DOC_TILE_PLACEHOLDER,
-    isImage: true,
-    isDocument: !isImage,
+    url: previewUrl,
   }
   if (!imageList.value)
     imageList.value = [temp]
@@ -106,12 +91,12 @@ function createTempUploadingItem(name: string, previewUrl: string, isImage = tru
   return temp
 }
 
-function uploadFileViaHttp(file: File, previewUrl: string, temp: any, formType: 'image' | 'file' = 'image') {
+function uploadFileViaHttp(file: File, previewUrl: string, temp: any) {
   const formData = new FormData()
   formData.append('avatar', file)
   formData.append('resUploadMode', props.uploadMode)
   formData.append('pathKey', 'Default')
-  formData.append('formType', formType)
+  formData.append('formType', 'image')
   formData.append('useType', 'Default')
   formData.append('resUploadStock', '1')
   formData.append('filename', file.name)
@@ -130,15 +115,9 @@ function uploadFileViaHttp(file: File, previewUrl: string, temp: any, formType:
       if (index !== -1) {
         imageList.value[index].uid = res.data.id
         imageList.value[index].id = res.data.id
-        imageList.value[index].f_downloadpath = res.data.f_downloadpath
-        imageList.value[index].photo_name = res.data.f_filename
-        imageList.value[index].isDocument = formType === 'file'
-        imageList.value[index].isImage = true
-        if (formType === 'file')
-          imageList.value[index].url = DOC_TILE_PLACEHOLDER
         delete imageList.value[index].message
         imageList.value[index].status = 'done'
-        // 与签名一致：保留本地 base64 预览，不因替换为服务器相对路径导致部分 APK 展示损坏
+        imageList.value[index].url = `${import.meta.env.VITE_APP_RESOURCE_PATH || ''}${res.data.f_downloadpath}`
       }
     }
     else {
@@ -165,7 +144,7 @@ function buildWatermarkText() {
   return lines.join('\n')
 }
 
-function handleBrowserImageFiles(files: FileList | null) {
+function handleBrowserFiles(files: FileList | null) {
   if (!files || files.length === 0)
     return
   const max = props.attr?.acceptCount ?? Number.POSITIVE_INFINITY
@@ -173,120 +152,23 @@ function handleBrowserImageFiles(files: FileList | null) {
     if (imageList.value.length >= max)
       break
     const file = files[i]
-    const formType = getUploadFormType(file)
-    if (formType === 'file') {
-      const temp = createTempUploadingItem(file.name, '', false)
-      uploadFileViaHttp(file, '', temp, 'file')
-      continue
-    }
     const reader = new FileReader()
     reader.onload = (e: any) => {
       const previewUrl = e.target?.result as string
-      const temp = createTempUploadingItem(file.name, previewUrl, true)
-      uploadFileViaHttp(file, previewUrl, temp, 'image')
+      const temp = createTempUploadingItem(file.name, previewUrl)
+      uploadFileViaHttp(file, previewUrl, temp)
     }
     reader.readAsDataURL(file)
   }
 }
 
-function handleBrowserDocumentFiles(files: FileList | null) {
-  if (!files || files.length === 0)
-    return
-  const max = props.attr?.acceptCount ?? Number.POSITIVE_INFINITY
-  for (let i = 0; i < files.length; i++) {
-    if (imageList.value.length >= max)
-      break
-    const file = files[i]
-    const formType = getUploadFormType(file)
-    if (formType === 'image') {
-      const reader = new FileReader()
-      reader.onload = (e: any) => {
-        const previewUrl = e.target?.result as string
-        const temp = createTempUploadingItem(file.name, previewUrl, true)
-        uploadFileViaHttp(file, previewUrl, temp, 'image')
-      }
-      reader.readAsDataURL(file)
-    }
-    else {
-      const temp = createTempUploadingItem(file.name, '', false)
-      uploadFileViaHttp(file, '', temp, 'file')
-    }
-  }
-}
-
-function handleNativeDocumentUpload(fileData: NativePickedFile) {
-  const filePath = fileData.filePath || fileData.path || ''
-  const fileName = fileData.name || filePath.split('/').pop() || 'file'
-  const tempFile = createTempUploadingItem(fileName, '', false)
-
-  const param = {
-    resUploadMode: props.uploadMode,
-    pathKey: 'Default',
-    formType: 'file' as const,
-    useType: props.attr?.useType || 'Default',
-    resUploadStock: '1',
-    filename: fileName,
-    filesize: fileData.size,
-    f_operator: 'server',
-    imgPath: filePath,
-    urlPath: `/api/${props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-    commonId: parentData?.commonId?.value ?? '',
-  }
-
-  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].f_downloadpath = result.data.f_downloadpath
-          imageList.value[index].photo_name = result.data.f_filename
-          imageList.value[index].isDocument = true
-          imageList.value[index].isImage = true
-          imageList.value[index].url = DOC_TILE_PLACEHOLDER
-          delete imageList.value[index].message
-          imageList.value[index].status = 'done'
-        }
-      }
-      else if (index !== -1) {
-        imageList.value[index].status = 'failed'
-        imageList.value[index].message = '上传失败'
-      }
-      emitUpdatesAfterChange()
-    },
-  })
-}
-
-function onDocumentInputChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  handleBrowserDocumentFiles(input.files)
-  showActionSheet.value = false
-  input.value = ''
-}
-
-function onPickDocumentNative() {
-  showActionSheet.value = false
-  openNativeFilePicker({
-    accept: documentAccept.value,
-    multiple: true,
-    onSuccess: files => files.forEach(handleNativeDocumentUpload),
-    onError: (msg) => {
-      if (msg)
-        showFailToast(msg)
-    },
-  })
-}
-
 // 触发拍照
 function triggerCamera() {
   mobileUtil.execute({
     funcName: 'takePicture',
     param: (() => {
       const param: any = {}
-      const watermark = (props.attr as any)?.watermark
+      const watermark = { ...(props.attr as any)?.watermark }
       if (watermark) {
         const txt = buildWatermarkText()
         if (txt)
@@ -305,9 +187,6 @@ function triggerCamera() {
         rePhotoCheck(result.data)
       }
       else if (result.status === 'error') {
-        if (result.message && result.message.startsWith('图片质量检测失败')) {
-          parentData?.onPhotoQualityFailed?.()
-        }
         const env = detectEnvironment()
         // App 环境下弹窗提示错误
         if (env.isApp) {
@@ -317,8 +196,8 @@ function triggerCamera() {
           })
           return
         }
-        // 浏览器模式：打开图片文件选择
-        openImageFilePicker()
+        // 浏览器模式：打开文件选择
+        openBrowserFilePicker()
       }
     },
   })
@@ -351,7 +230,6 @@ function rePhotoCheck(photoData: any) {
           if (result && result.status === 'success') {
             const checkRePhotoResult = result.data
             if (checkRePhotoResult.is_rephoto === true || checkRePhotoResult.is_rephoto === 'true') {
-              parentData?.onPhotoRephotodetected?.()
               console.warn(`检测到当前图片属于翻拍照片\n请上传合法图片！`)
               showFailToast({
                 message: `当前图片属于翻拍照片\n请上传合法图片！`,
@@ -396,14 +274,13 @@ function handlePhotoUpload(photoData: any) {
   console.log('图片上传前的参数:', JSON.stringify(photoData))
   // 添加临时预览
   const mimeType = getImageMimeType(photoData.filePath)
-  const previewUrl = toDataUrl(photoData.content, mimeType)
   const tempFile = {
     uid: Date.now() + Math.random().toString(36).substr(2, 5),
     name: photoData.filePath.split('/').pop(),
     status: 'uploading',
     message: '上传中...',
-    url: previewUrl,
-    content: previewUrl,
+    url: `data:${mimeType};base64,${photoData.content}`,
+    content: `data:image/png;base64,${photoData.content}`,
     isImage: true,
     type: mimeType,
   }
@@ -418,7 +295,7 @@ function handlePhotoUpload(photoData: any) {
   const param = {
     resUploadMode: props.uploadMode,
     pathKey: 'Default',
-    formType: 'image' as const,
+    formType: 'image',
     useType: props.attr?.useType || 'Default',
     resUploadStock: '1',
     filename: photoData.name,
@@ -426,7 +303,7 @@ function handlePhotoUpload(photoData: any) {
     f_operator: 'server',
     imgPath: photoData.filePath,
     urlPath: `/api/${props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-    commonId: parentData?.commonId?.value ?? '',
+    commonId: parentCommonId,
   }
   if (props.isAsyncUpload) {
     // 添加上传队列
@@ -477,12 +354,9 @@ function handlePhotoUpload(photoData: any) {
           if (index !== -1) {
             imageList.value[index].uid = result.data.id
             imageList.value[index].id = result.data.id
-            imageList.value[index].f_downloadpath = result.data.f_downloadpath
-            imageList.value[index].photo_name = result.data.f_filename
-            imageList.value[index].isImage = true
             delete imageList.value[index].message
             imageList.value[index].status = 'done'
-            // 保留拍照后的 base64 预览，与 SignatureComponent 行为一致
+            imageList.value[index].url = `${import.meta.env.VITE_APP_RESOURCE_PATH || ''}${result.data.f_downloadpath}`
           }
         }
         else {
@@ -565,35 +439,54 @@ function deleteFileFunction(file: any) {
   return false // 阻止van-uploader二次处理
 }
 
+const showActionSheet = ref(false)
 const uploaderRef = ref()
 
+const actionOptions = [
+  { name: '拍照', key: 'camera' },
+  { name: '上传', key: 'file' },
+]
+
 function handleUploadAreaClick() {
   if (props.readonly)
     return
-  showActionSheet.value = true
-}
-
-function onPickCamera() {
-  showActionSheet.value = false
-  triggerCamera()
+  const env = detectEnvironment()
+  // 微信内：直接走浏览器式文件选择，不弹出拍照/上传菜单
+  if (env.isWechat || env.isMiniprogram) {
+    openBrowserFilePicker()
+    return
+  }
+  if (props.attr?.uploadImage) {
+    showActionSheet.value = true
+  }
+  else {
+    triggerCamera()
+  }
 }
 
-function onPickAlbum() {
+function handleActionSelect(option: any) {
   showActionSheet.value = false
-  mobileUtil.execute({
-    funcName: 'photoAlbum',
-    param: {},
-    callbackFunc: (result: any) => {
-      if (result.status === 'success') {
-        result.data?.photos.forEach((photo: any) => {
-          rePhotoCheck(photo)
-        })
-      }
-      else {
-        openImageFilePicker()
-      }
-    },
-  })
+  if (option.key === 'camera') {
+    triggerCamera()
+  }
+  else if (option.key === 'file') {
+    // 手机文件上传
+    mobileUtil.execute({
+      funcName: 'photoAlbum',
+      param: {},
+      callbackFunc: (result: any) => {
+        if (result.status === 'success') {
+          result.data?.photos.forEach((photo: any) => {
+            rePhotoCheck(photo)
+          })
+        }
+        else {
+          // 手机文件选择失败，则走浏览器式文件选择
+          openBrowserFilePicker()
+        }
+      },
+    })
+  }
 }
 
 function getUploadStatus() {
@@ -614,18 +507,27 @@ function getUploadStatus() {
 defineExpose({
   getUploadStatus,
 })
+
+/**
+ * 组件卸载时清理：关闭 ActionSheet，清空图片列表以释放闭包引用
+ */
+onBeforeUnmount(() => {
+  showActionSheet.value = false
+  // 清空图片列表，释放闭包中对 props.attr 等对象的引用，防止内存泄漏
+  imageList.value = []
+})
 </script>
 
 <template>
   <div class="uploader-container">
-    <!-- 图片选择（拍摄 / 相册） -->
+    <!-- 浏览器 / 微信 H5：统一隐藏文件选择（多选图片） -->
     <input
-      ref="imageInputRef"
+      ref="fileInputRef"
       type="file"
       multiple
       accept="image/*"
-      class="hidden-file-input"
-      @change="(e:any) => handleBrowserImageFiles(e.target.files)"
+      style="display:none"
+      @change="(e:any) => handleBrowserFiles(e.target.files)"
     >
     <van-uploader
       ref="uploaderRef"
@@ -637,16 +539,6 @@ defineExpose({
       :preview-image="true"
       :before-delete="!props.readonly && props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
     >
-      <template #preview-cover="{ index }">
-        <div
-          v-if="imageList[index] && !isFileItemImage(imageList[index])"
-          class="file-type-tile"
-          :style="{ background: getItemFileMeta(imageList[index]).color }"
-        >
-          <span class="file-type-tile__ext">{{ getItemFileMeta(imageList[index]).ext }}</span>
-          <span class="file-type-tile__label">{{ getItemFileMeta(imageList[index]).label }}</span>
-        </div>
-      </template>
       <template #default>
         <div
           v-if="!props.readonly && props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
@@ -662,37 +554,11 @@ defineExpose({
     </van-uploader>
     <ActionSheet
       v-model:show="showActionSheet"
+      :actions="actionOptions"
       teleport="body"
       cancel-text="取消"
-    >
-      <div class="upload-source-sheet">
-        <button type="button" class="upload-source-sheet__item" @click="onPickCamera">
-          拍摄
-        </button>
-        <button type="button" class="upload-source-sheet__item" @click="onPickAlbum">
-          相册中选择
-        </button>
-        <button
-          v-if="useNativeDocumentPicker"
-          type="button"
-          class="upload-source-sheet__item"
-          @click="onPickDocumentNative"
-        >
-          文件上传
-        </button>
-        <label v-else class="upload-source-sheet__item upload-source-sheet__item--file">
-          文件上传
-          <input
-            ref="documentInputRef"
-            type="file"
-            multiple
-            :accept="documentAccept"
-            class="upload-source-sheet__file-input"
-            @change="onDocumentInputChange"
-          >
-        </label>
-      </div>
-    </ActionSheet>
+      @select="handleActionSelect"
+    />
   </div>
 </template>
 
@@ -706,19 +572,6 @@ defineExpose({
   // 该属性会影响表单布局
   // gap: 16px;
 }
-
-/* WebView 内 display:none 会导致 file input 无法被程序化触发，改用视觉隐藏 */
-.hidden-file-input {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-}
 /* 让自定义上传按钮可点击：关闭 Vant 覆盖在上方的透明 input 的事件捕获 */
 :deep(.custom-trigger-uploader .van-uploader__input) {
   pointer-events: none;
@@ -756,74 +609,4 @@ defineExpose({
     margin-top: 0;
   }
 }
-
-.upload-source-sheet {
-  &__item {
-    display: block;
-    width: 100%;
-    padding: 14px 16px;
-    font-size: 16px;
-    line-height: 22px;
-    text-align: center;
-    background: #fff;
-    border: none;
-    color: #323233;
-    cursor: pointer;
-    position: relative;
-    box-sizing: border-box;
-
-    & + & {
-      border-top: 1px solid #ebedf0;
-    }
-  }
-
-  &__item--file {
-    margin: 0;
-  }
-
-  /* 用户手指直接点 input，WebView 才允许调起系统文件选择器（程序化 click 在 APK 内会被拦截） */
-  &__file-input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    font-size: 0;
-  }
-}
-
-.file-type-tile {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  border-radius: 8px;
-  padding: 4px;
-  box-sizing: border-box;
-  text-align: center;
-  pointer-events: none;
-
-  &__ext {
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1.2;
-  }
-
-  &__label {
-    font-size: 10px;
-    margin-top: 2px;
-    opacity: 0.95;
-  }
-}
-
-:deep(.custom-trigger-uploader) {
-  .van-uploader__preview {
-    position: relative;
-    overflow: hidden;
-  }
-}
 </style>