af-mobile-client-vue3 1.1.16 → 1.1.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import {
+  Button as vanButton,
+  Uploader as vanUploader,
+} from 'vant'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  imageList: Array<any>,
+  outerIndex: { default: undefined },
+  authority: { default: 'user' },
+  uploadMode: { default: 'server' },
+  attr: { type: Object as () => { addOrEdit?: string }, default: () => ({}) },
+})
+const emit = defineEmits(['updateFileList'])
+
+const imageList = ref<Array<any>>(props.imageList ?? [])
+
+// 同步 props.imageList 到内部 imageList，保证每次变化都响应
+watch(() => props.imageList, (newVal) => {
+  imageList.value = Array.isArray(newVal) ? [...newVal] : []
+}, { immediate: true })
+
+// 触发拍照
+function triggerCamera() {
+  console.log('>>>> uploader 上传111')
+  mobileUtil.execute({
+    funcName: 'takePicture',
+    param: {},
+    callbackFunc: (result: any) => {
+      console.log('>>>> 拍照 后 上传', result)
+      if (result.status === 'success') {
+        handlePhotoUpload(result.data)
+      }
+    },
+  })
+}
+
+// 处理拍照后的上传
+function handlePhotoUpload(photoData: any) {
+  const formData = new FormData()
+  formData.append('resUploadMode', props.uploadMode)
+  formData.append('pathKey', 'Default')
+  formData.append('formType', 'image')
+  formData.append('useType', 'Default')
+  formData.append('resUploadStock', '1')
+  formData.append('filename', photoData.name)
+  formData.append('filesize', (photoData.size / 1024 / 1024).toFixed(4))
+  formData.append('f_operator', 'server')
+  formData.append('imgPath', photoData.filePath)
+  formData.append('urlPath', '/api/af-revenue/resource/upload')
+
+  // 添加临时预览
+  const tempFile = {
+    uid: Date.now() + Math.random().toString(36).substr(2, 5),
+    name: photoData.name,
+    status: 'uploading',
+    message: '上传中...',
+    url: `data:image/png;base64,${photoData.content}`,
+  }
+
+  if (!imageList.value) {
+    imageList.value = [tempFile]
+  }
+  else {
+    imageList.value.push(tempFile)
+  }
+
+  const param = {
+    resUploadMode: props.uploadMode,
+    pathKey: 'Default',
+    formType: 'image',
+    useType: 'Default',
+    resUploadStock: '1',
+    filename: photoData.name,
+    filesize: photoData.size,
+    f_operator: 'server',
+    imgPath: photoData.filePath,
+    urlPath: '/api/af-revenue/resource/upload',
+  }
+  console.log('>>>> 上传 param: ', JSON.stringify(param))
+  // 上传到服务器
+  mobileUtil.execute({
+    funcName: 'uploadResource',
+    param,
+    callbackFunc: (result: any) => {
+      console.log('>>>> 上传结果: ', result)
+      if (result.status === 'success') {
+        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+        if (index !== -1) {
+          imageList.value[index].uid = result.data.id
+          imageList.value[index].id = result.data.id
+          delete imageList.value[index].message
+          imageList.value[index].status = 'done'
+          imageList.value[index].url = result.data.f_downloadpath
+        }
+      }
+      else {
+        const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+        if (index !== -1) {
+          imageList.value[index].status = 'failed'
+          imageList.value[index].message = '上传失败'
+        }
+      }
+
+      if (props.outerIndex !== undefined)
+        emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+      else
+        emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+    },
+  })
+}
+
+// 删除图片
+function deleteFileFunction(file: any) {
+  if (file.id) {
+    deleteFile({ ids: [file.id], f_state: '删除' }).then((res: any) => {
+      if (res.msg !== undefined) {
+        const targetIndex = imageList.value.findIndex(item => item.id === file.id)
+        if (targetIndex !== -1) {
+          imageList.value.splice(targetIndex, 1)
+          if (props.outerIndex !== undefined)
+            emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+          else
+            emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+        }
+      }
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="uploader-container">
+    <van-button
+      v-if="props.attr?.addOrEdit !== 'readonly'"
+      icon="photograph"
+      type="primary"
+      @click="triggerCamera"
+    >
+      拍照
+    </van-button>
+
+    <van-uploader
+      v-model="imageList"
+      :show-upload="false"
+      :deletable="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin'"
+      :multiple="props.authority === 'admin'"
+      :preview-image="true"
+      :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.uploader-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

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

@@ -53,11 +53,13 @@ function init(params: Form) {
   formData.value = propsData.value.groupFormData
   getConfigByName(propsData.value.configName, (result) => {
     if (result?.groups) {
-      submitGroup.value = true
+      // submitGroup.value = true
       groupItems.value = result.groups
       result.groups.forEach((group) => {
         if (!formData.value[group.groupName])
           formData.value[group.groupName] = {}
+        if (group.showSubmitBtn)
+          submitGroup.value = true
       })
     }
     else {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 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 Uploader from '@af-mobile-client-vue3/components/core/Uploader/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'
@@ -759,9 +760,9 @@ function handleAddressConfirm(location) {
       </template>
     </VanField>
 
-    <!-- 图片文件上传 -->
+    <!-- 文件上传 -->
     <VanField
-      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
+      v-if="attr.type === 'file' && showItem"
       name="uploader"
       :label="labelData"
       :label-align="labelAlign"
@@ -779,6 +780,26 @@ function handleAddressConfirm(location) {
       </template>
     </VanField>
 
+    <!-- 图片上传, 手机端拍照 -->
+    <VanField
+      v-if="attr.type === 'image' && showItem"
+      name="image"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <ImageUploader
+          upload-mode="server"
+          :image-list="(localValue as any[])"
+          authority="admin"
+          :attr="attr"
+          @update-file-list="updateFile"
+        />
+      </template>
+    </VanField>
+
     <!-- 选择器 -->
     <VanField
       v-if="attr.type === 'picker' && showItem"

package/src/components/data/XOlMap/XLocationPicker/index.vue

@@ -15,12 +15,15 @@ const props = withDefaults(defineProps<Props>(), {
   defaultCenter: () => {
     try {
       mobileUtil.execute({
-        param: undefined,
-        funcName: 'getPhoneStatus',
+        param: {},
+        funcName: 'getLocationResult',
         callbackFunc: (result) => {
-          const locationResult = result as PhoneLocationStatus
-          if (locationResult.f_latitude && locationResult.f_longitude) {
-            return [locationResult.f_longitude, locationResult.f_latitude]
+          const res = result as PhoneLocationStatus
+          if (res.status === 'success') {
+            const locationResult = JSON.parse(res.data.location)
+            if (locationResult.longitude && locationResult.latitude) {
+              return [locationResult.longitude, locationResult.latitude]
+            }
           }
         },
       })

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

@@ -818,16 +818,19 @@ async function handleLocation() {
 
   try {
     mobileUtil.execute({
-      param: undefined,
-      funcName: 'getPhoneStatus',
+      param: {},
+      funcName: 'getLocationResult',
       callbackFunc: (result) => {
-        const locationResult = result as PhoneLocationStatus
-        if (locationResult.f_latitude && locationResult.f_longitude) {
-          const center: [number, number] = [locationResult.f_longitude, locationResult.f_latitude]
-          setCenterAndZoom(center, getZoom())
-          // 更新位置图标
-          if (isFollowingLocation.value) {
-            updateLocationMarker(center)
+        const res = result as PhoneLocationStatus
+        if (res.status === 'success') {
+          const locationResult = JSON.parse(res.data.location)
+          if (locationResult.longitude && locationResult.latitude) {
+            const center: [number, number] = [locationResult.longitude, locationResult.latitude]
+            setCenterAndZoom(center, getZoom())
+            // 更新位置图标
+            if (isFollowingLocation.value) {
+              updateLocationMarker(center)
+            }
           }
         }
       },

package/src/components/data/XOlMap/types.ts

@@ -10,12 +10,12 @@ export interface LocationResult {
 
 /** 手机状态接口 */
 export interface PhoneLocationStatus {
-  /** 纬度 */
-  f_latitude: number
-  /** 经度 */
-  f_longitude: number
-  /** 其他可能的状态属性 */
-  [key: string]: unknown
+
+  status: string
+
+  data: {
+    location: string;
+  }
 }
 
 /** 初始化参数接口 */

package/src/utils/mobileUtil.ts

@@ -20,7 +20,15 @@ export class mobileUtil {
   // 执行flutter端函数
   static execute(locationParam: Param): any {
     locationParam.callBackMethodName = `mobile_func_${Math.random().toString(36).substring(7)}`
-    window[locationParam.callBackMethodName] = locationParam.callbackFunc
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+      console.warn('我在微前端环境中')
+      // 微前端应用中需要绑定函数到真实的window中
+      window.rawWindow[locationParam.callBackMethodName] = locationParam.callbackFunc
+    }
+    else {
+      console.warn('我不在微前端环境中')
+      window[locationParam.callBackMethodName] = locationParam.callbackFunc
+    }
     window[locationParam.funcName].postMessage(JSON.stringify(locationParam))
   }
 }

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

@@ -1,11 +1,92 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { ref } from 'vue'
+import { defineEmits, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 定义事件
+const emit = defineEmits(['deleteRow'])
+// 访问路由
+const router = useRouter()
+// 获取默认值
+const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('defectDispatchPhoneCRUD')
-const serviceName = ref('af-linepatrol')
+const configName = ref('crud_oper_log_manage')
+const serviceName = ref('af-system')
+
+// 资源权限测试
+// const configName = ref('crud_sources_test')
+// const serviceName = ref('af-system')
+
+// 实际业务测试
+// const configName = ref('lngChargeAuditMobileCRUD')
+// const serviceName = ref('af-gaslink')
+
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
+
+// 跳转到表单——以表单组来渲染纯表单
+function toDetail(item) {
+  router.push({
+    name: 'XFormGroupView',
+    query: {
+      id: item[idKey.value],
+      // id: item.rr_id,
+      // o_id: item.o_id,
+    },
+  })
+}
+
+// 新增功能
+// function addOption(totalCount) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: totalCount, openid: totalCount },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '新增',
+//     },
+//   })
+// }
+
+// 修改功能
+// function updateRow(result) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: result.o_id, openid: result.o_id },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '修改',
+//     },
+//   })
+// }
+
+// 删除功能
+function deleteRow(result) {
+  emit('deleteRow', result.o_id)
+}
 </script>
 
 <template>
@@ -14,6 +95,10 @@ const serviceName = ref('af-linepatrol')
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
+        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
+        :id-key="idKey"
+        @to-detail="toDetail"
+        @delete-row="deleteRow"
       />
     </template>
   </NormalDataLayout>