af-mobile-client-vue3 1.3.50 → 1.3.51

package/package.json

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
-import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
+import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import {
   ActionSheet,
@@ -20,6 +20,103 @@ const emit = defineEmits(['updateFileList', 'updateAllFileList'])
 
 const imageList = ref<Array<any>>(props.imageList ?? [])
 
+// 浏览器模式：隐藏的文件输入（选择 / 拍照）
+const fileInputRef = ref<HTMLInputElement | undefined>()
+const cameraInputRef = ref<HTMLInputElement | undefined>()
+
+function openBrowserFilePicker() {
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+    fileInputRef.value.click()
+  }
+}
+
+function openBrowserCameraPicker() {
+  if (cameraInputRef.value) {
+    cameraInputRef.value.value = ''
+    cameraInputRef.value.click()
+  }
+}
+
+function emitUpdatesAfterChange() {
+  // 新增：对外抛出完整与ID列表
+  (emit as any)('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item))
+  const doneIds = Object.values(imageList.value)
+    .filter(item => item.status === 'done')
+    .map(item => item.id)
+  if (props.outerIndex !== undefined) {
+    (emit as any)('updateFileList', doneIds, props.outerIndex)
+  }
+  else {
+    (emit as any)('updateFileList', doneIds)
+  }
+}
+
+function createTempUploadingItem(name: string, previewUrl: string) {
+  const temp = {
+    uid: Date.now() + Math.random().toString(36).substr(2, 5),
+    name,
+    status: 'uploading',
+    message: '上传中...',
+    url: previewUrl,
+  }
+  if (!imageList.value)
+    imageList.value = [temp]
+  else imageList.value.push(temp)
+  return temp
+}
+
+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', 'image')
+  formData.append('useType', 'Default')
+  formData.append('resUploadStock', '1')
+  formData.append('filename', file.name)
+  formData.append('filesize', (file.size / 1024 / 1024).toFixed(4))
+  formData.append('f_operator', 'server')
+
+  upload(formData, import.meta.env.VITE_APP_SYSTEM_NAME, { 'Content-Type': 'multipart/form-data' }).then((res: any) => {
+    const index = imageList.value.findIndex(item => item.uid === temp.uid)
+    if (res?.data?.id) {
+      if (index !== -1) {
+        imageList.value[index].uid = res.data.id
+        imageList.value[index].id = res.data.id
+        delete imageList.value[index].message
+        imageList.value[index].status = 'done'
+        imageList.value[index].url = res.data.f_downloadpath
+      }
+    }
+    else {
+      if (index !== -1) {
+        imageList.value[index].status = 'failed'
+        imageList.value[index].message = '上传失败'
+      }
+    }
+    emitUpdatesAfterChange()
+  })
+}
+
+function handleBrowserFiles(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 reader = new FileReader()
+    reader.onload = (e: any) => {
+      const previewUrl = e.target?.result as string
+      const temp = createTempUploadingItem(file.name, previewUrl)
+      uploadFileViaHttp(file, previewUrl, temp)
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
 // 触发拍照
 function triggerCamera() {
   mobileUtil.execute({
@@ -29,6 +126,10 @@ function triggerCamera() {
       if (result.status === 'success') {
         handlePhotoUpload(result.data)
       }
+      else {
+        // 浏览器模式：调起相机输入
+        openBrowserCameraPicker()
+      }
     },
   })
 }
@@ -185,6 +286,10 @@ function handleActionSelect(option: any) {
             handlePhotoUpload(photo)
           })
         }
+        else {
+          // 浏览器模式：打开文件选择
+          openBrowserFilePicker()
+        }
       },
     })
   }
@@ -193,6 +298,24 @@ function handleActionSelect(option: any) {
 
 <template>
   <div class="uploader-container">
+    <!-- 浏览器模式隐藏输入：文件选择 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      accept="image/*"
+      style="display:none"
+      @change="(e:any) => handleBrowserFiles(e.target.files)"
+    >
+    <!-- 浏览器模式隐藏输入：拍照（相机） -->
+    <input
+      ref="cameraInputRef"
+      type="file"
+      accept="image/*"
+      capture="environment"
+      style="display:none"
+      @change="(e:any) => handleBrowserFiles(e.target.files)"
+    >
     <div
       v-if="props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
       class="custom-upload-area"

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

@@ -3,10 +3,13 @@ import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-const configName = ref('AddConstructionForm')
-const serviceName = ref('af-linepatrol')
+const configName = ref('sealCheckInForm')
+const serviceName = ref('af-safecheck')
 
 const formGroupAddConstruction = ref(null)
+function submit(s) {
+  console.log('>>>> ss: ', JSON.stringify(s))
+}
 </script>
 
 <template>
@@ -17,6 +20,7 @@ const formGroupAddConstruction = ref(null)
         mode="新增"
         :config-name="configName"
         :service-name="serviceName"
+        @on-submit="submit"
       />
     </template>
   </NormalDataLayout>