af-mobile-client-vue3 1.2.24 → 1.2.25

package/package.json

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

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

@@ -1,159 +1,159 @@
-<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() {
-  mobileUtil.execute({
-    funcName: 'takePicture',
-    param: {},
-    callbackFunc: (result: any) => {
-      if (result.status === 'success') {
-        handlePhotoUpload(result.data)
-      }
-    },
-  })
-}
-
-// 处理拍照后的上传
-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 handlePhotoUpload(photoData: any) {
-  // 添加临时预览
-  const mimeType = getImageMimeType(photoData.filePath)
-  const tempFile = {
-    uid: Date.now() + Math.random().toString(36).substr(2, 5),
-    name: photoData.filePath.split('/').pop(),
-    status: 'uploading',
-    message: '上传中...',
-    url: `data:${mimeType};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/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-  }
-  // 上传到服务器
-  mobileUtil.execute({
-    funcName: 'uploadResource',
-    param,
-    callbackFunc: (result: any) => {
-      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>
+<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() {
+  mobileUtil.execute({
+    funcName: 'takePicture',
+    param: {},
+    callbackFunc: (result: any) => {
+      if (result.status === 'success') {
+        handlePhotoUpload(result.data)
+      }
+    },
+  })
+}
+
+// 处理拍照后的上传
+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 handlePhotoUpload(photoData: any) {
+  // 添加临时预览
+  const mimeType = getImageMimeType(photoData.filePath)
+  const tempFile = {
+    uid: Date.now() + Math.random().toString(36).substr(2, 5),
+    name: photoData.filePath.split('/').pop(),
+    status: 'uploading',
+    message: '上传中...',
+    url: `data:${mimeType};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/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
+  }
+  // 上传到服务器
+  mobileUtil.execute({
+    funcName: 'uploadResource',
+    param,
+    callbackFunc: (result: any) => {
+      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

@@ -1,133 +1,172 @@
-<script setup lang="ts">
-import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
-import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import {
-  Button as VanButton,
-  Tab as VanTab,
-  Tabs as VanTabs,
-} from 'vant'
-import { defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
-
-const props = withDefaults(defineProps<{
-  configName?: string
-  serviceName?: string
-  groupFormData?: object
-  mode?: string
-}>(), {
-  configName: '',
-  serviceName: undefined,
-  groupFormData: () => ({}),
-  mode: '查询',
-})
-const emit = defineEmits(['submit'])
-
-interface Form {
-  configName?: string
-  serviceName?: string
-  groupFormData?: object
-  mode?: string
-}
-
-const groupItems = ref([])
-const formData = ref({})
-const submitGroup = ref(false)
-const submitSimple = ref(false)
-const isInit = ref(false)
-const initStatus = ref(false)
-const propsData = ref({})
-
-// 组件初始化函数
-function init(params: Form) {
-  initStatus.value = true
-  propsData.value = {
-    // configName: '',
-    // serviceName: undefined,
-    // groupFormData: () => ({}),
-    // mode: '查询',
-    configName: props.configName,
-    serviceName: props.serviceName,
-    groupFormData: props.groupFormData,
-    mode: props.mode,
-    ...params,
-  }
-  formData.value = propsData.value.groupFormData
-  getConfigByName(propsData.value.configName, (result) => {
-    if (result?.groups) {
-      // 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 {
-      submitSimple.value = result.showSubmitBtn
-      groupItems.value = [{ ...result }]
-    }
-    isInit.value = true
-  }, propsData.value.serviceName)
-}
-watch(() => props.groupFormData, (_val) => {
-  formData.value = { ...formData.value, ...props.groupFormData }
-})
-onBeforeMount(() => {
-  if (!initStatus.value)
-    init(props)
-})
-const xFormListRef = ref([])
-async function submit() {
-  for (const res of xFormListRef.value) {
-    await res.validate()
-    formData.value[res.formGroupName] = res.form
-  }
-  emit('submit', formData.value)
-}
-
-// function initXForm(index: number) {
-// 获取自身示例
-// refs[`xFormListRef-${index}`].init({})
-// }
-
-defineExpose({ init })
-</script>
-
-<template>
-  <div v-if="isInit" id="x-form-group">
-    <VanTabs scrollspy sticky>
-      <VanTab
-        v-for="(item, index) in groupItems"
-        :key="item.groupName ? (item.groupName + index) : index"
-        :title="item.describe ? item.describe : item.tableName "
-      >
-        <div class="x-form-group-item">
-          <!--          :ref="`xFormListRef-${index}`" -->
-          <XForm
-            ref="xFormListRef"
-            :mode="props.mode"
-            :group-form-items="item"
-            :form-data="item.groupName ? formData[item.groupName] : formData"
-            :form-name="item.groupName"
-            :service-name="props.serviceName"
-            :submit-button="submitSimple"
-            @on-submit="submit"
-          />
-        </div>
-      </VanTab>
-    </VanTabs>
-    <VanButton v-if="submitGroup" round block type="primary" @click="submit">
-      提交
-    </VanButton>
-  </div>
-</template>
-
-<style scoped lang="less">
-#x-form-group {
-  background-color: rgb(247, 248, 250);
-  padding-bottom: 10px;
-  .x-form-group-item {
-    margin: 20px 0;
-  }
-}
-</style>
+<script setup lang="ts">
+import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+import {
+  Button as VanButton,
+  Tab as VanTab,
+  Tabs as VanTabs,
+} from 'vant'
+import { defineEmits, defineProps, onBeforeMount, ref, watch, useSlots, computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  configName?: string
+  serviceName?: string
+  groupFormData?: object
+  mode?: string
+}>(), {
+  configName: '',
+  serviceName: undefined,
+  groupFormData: () => ({}),
+  mode: '查询',
+})
+const emit = defineEmits(['submit'])
+
+interface Form {
+  configName?: string
+  serviceName?: string
+  groupFormData?: object
+  mode?: string
+}
+
+const groupItems = ref([])
+const formData = ref({})
+const submitGroup = ref(false)
+const submitSimple = ref(false)
+const isInit = ref(false)
+const initStatus = ref(false)
+const propsData = ref<Partial<Form>>({})
+
+const slots = useSlots()
+const renderableGroupItems = computed(() => {
+  return groupItems.value.filter(item => {
+    if (item.formGroupType === 'slot') {
+      return !!(item.slotName && slots[item.slotName])
+    }
+    return true
+  })
+})
+
+// 组件初始化函数
+function init(params: Form) {
+  initStatus.value = true
+  propsData.value = {
+    configName: props.configName,
+    serviceName: props.serviceName,
+    groupFormData: props.groupFormData,
+    mode: props.mode,
+    ...params,
+  }
+  formData.value = propsData.value.groupFormData
+  getConfigByName(propsData.value.configName, (result) => {
+    console.log('result===', result)
+    if (result?.groups) {
+      groupItems.value = result.groups
+      result.groups.forEach((group) => {
+        if (!formData.value[group.groupName])
+          formData.value[group.groupName] = {}
+        if (group.showSubmitBtn)
+          submitGroup.value = true
+      })
+    }
+    else {
+      submitSimple.value = result.showSubmitBtn
+      groupItems.value = [{ ...result }]
+    }
+    isInit.value = true
+  }, propsData.value.serviceName)
+}
+watch(() => props.groupFormData, (_val) => {
+  formData.value = { ...formData.value, ...props.groupFormData }
+})
+onBeforeMount(() => {
+  if (!initStatus.value)
+    init(props)
+})
+interface XFormLike {
+  validate: () => Promise<void>
+  formGroupName?: string
+  form?: any
+  getFormData?: () => object
+}
+const xFormListRef = ref<XFormLike[]>([])
+
+// 注册表单实例，避免重复
+function setRef(refValue: XFormLike) {
+  if (refValue && !xFormListRef.value.includes(refValue)) {
+    xFormListRef.value.push(refValue)
+  }
+}
+// 注销表单实例
+function removeRef(refValue: XFormLike) {
+  const idx = xFormListRef.value.indexOf(refValue)
+  if (idx !== -1) xFormListRef.value.splice(idx, 1)
+}
+
+async function submit() {
+  for (const res of xFormListRef.value) {
+    try {
+      await res.validate()
+      if (res.formGroupName && res.form) {
+        formData.value[res.formGroupName] = res.form
+      } else if (typeof res.getFormData === 'function') {
+        Object.assign(formData.value, res.getFormData())
+      }
+    } catch (msg) {
+      console.log('error:', msg)
+      return
+    }
+  }
+  console.log('formData.value===', formData.value)
+  emit('submit', formData.value)
+}
+
+defineExpose({ init, removeRef, xFormListRef })
+</script>
+
+<template>
+  <div v-if="isInit" id="x-form-group">
+    <VanTabs scrollspy sticky>
+      <VanTab
+        v-for="(item, index) in renderableGroupItems"
+        :key="item.groupName ? (item.groupName + index) : index"
+        :title="item.describe ? item.describe : item.tableName "
+      >
+        <div class="x-form-group-item">
+          <template v-if="item.formGroupType === 'slot'">
+            <slot :name="item.slotName"
+                  :item="item"
+                  :form-data="item.groupName ? formData[item.groupName] : formData"
+                  :set-ref="setRef"
+                  :remove-ref="removeRef"
+            />
+          </template>
+          <template v-else>
+            <XForm
+              ref="xFormListRef"
+              :mode="props.mode"
+              :group-form-items="item"
+              :form-data="item.groupName ? formData[item.groupName] : formData"
+              :form-name="item.groupName"
+              :service-name="props.serviceName"
+              :submit-button="submitSimple"
+              @on-submit="submit"
+            />
+          </template>
+        </div>
+      </VanTab>
+    </VanTabs>
+    <VanButton v-if="submitGroup" round block type="primary" @click="submit">
+      提交
+    </VanButton>
+  </div>
+</template>
+
+<style scoped lang="less">
+#x-form-group {
+  background-color: rgb(247, 248, 250);
+  padding-bottom: 10px;
+  .x-form-group-item {
+    margin: 20px 0;
+  }
+}
+</style>