af-mobile-client-vue3 1.2.19 → 1.2.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.2.19",
+  "version": "1.2.21",
   "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/XCellList/index.vue

@@ -200,10 +200,11 @@ function initComponent() {
     configContent.value = result
     // 扁平化 type=group 的 groupItems，保持顺序
     const flatFormJson = []
-    result.formJson.forEach(item => {
+    result.formJson.forEach((item) => {
       if (item.type === 'group' && Array.isArray(item.groupItems)) {
         flatFormJson.push(...item.groupItems)
-      } else {
+      }
+      else {
         flatFormJson.push(item)
       }
     })
@@ -542,7 +543,7 @@ defineExpose({
         />
       </VanCol>
       <!-- 新增按钮，放在查询框后、查询条件下拉按钮前 -->
-      <VanCol class="add-col" v-if="buttonState?.add && buttonState.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr)))) )">
+      <VanCol v-if="buttonState?.add && buttonState.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr)))))" class="add-col">
         <VanButton
           icon="plus"
           type="primary"
@@ -740,7 +741,6 @@ defineExpose({
   flex-direction: column;
   --van-search-padding: 3px;
   --van-dropdown-menu-title-padding: 3px;
-  --van-cell-horizontal-padding: 0px;
   --van-text-color-2: rgb(75, 85, 99);
   --van-button-normal-font-size: 13px;
   .main {
@@ -976,14 +976,15 @@ defineExpose({
         border-radius: 10px;
         background-color: var(--van-background);
         color: #888;
-        border: 1px solid rgba(0,0,0,0.06);
+        border: 1px solid rgba(0, 0, 0, 0.06);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 22px;
         padding: 0;
         transition: all 0.2s;
-        &:hover, &:active {
+        &:hover,
+        &:active {
           opacity: 0.85;
           background-color: rgba(25, 137, 250, 0.08);
           border-color: var(--van-primary-color);

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

@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<{
   submitButton: true,
   isHandleFormKey: true,
 })
-const emits = defineEmits(['onSubmit'])
+const emits = defineEmits(['onSubmit', 'xFormItemEmitFunc'])
 const userStore = useUserStore()
 const xFormRef = ref<FormInstance>()
 const myFormItems = ref<FormItem[]>([])
@@ -408,6 +408,10 @@ function prepareForm() {
   return cleanedForm
 }
 
+function getFormData() {
+  return prepareForm()
+}
+
 async function onSubmit() {
   await validate()
   // 清理表单数据
@@ -439,10 +443,15 @@ async function onSubmit() {
 async function validate() {
   await xFormRef.value?.validate()
 }
+function emitFunc(func, data, value) {
+  emits(func, data, value)
+  emits('xFormItemEmitFunc', func, data, value)
+}
+
 watch(() => props.formData, (_val) => {
   form.value = _val
 })
-defineExpose({ init, form, formGroupName, validate, asyncSubmit })
+defineExpose({ init, form, formGroupName, validate, asyncSubmit, setForm, getFormData })
 </script>
 
 <template>
@@ -460,6 +469,7 @@ defineExpose({ init, form, formGroupName, validate, asyncSubmit })
           :service-name="myServiceName"
           :get-data-params="myGetDataParams"
           @set-form="setForm"
+          @x-form-item-emit-func="emitFunc"
         />
         <slot name="extraFormItem" />
       </VanCellGroup>

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

@@ -18,6 +18,7 @@ import dayjs from 'dayjs/esm/index'
 import { debounce } from 'lodash-es'
 import {
   Area as VanArea,
+  Button as VanButton,
   Calendar as VanCalendar,
   Cascader as VanCascader,
   Checkbox as VanCheckbox,
@@ -35,7 +36,7 @@ import {
   Switch as VanSwitch,
   TimePicker as VanTimePicker,
 } from 'vant'
-import { computed, defineEmits, defineModel, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { computed, defineEmits, defineModel, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
 
 const props = defineProps({
   attr: {
@@ -92,7 +93,7 @@ const props = defineProps({
 
 })
 
-const emits = defineEmits(['setForm'])
+const emits = defineEmits(['setForm', 'xFormItemEmitFunc'])
 
 // 用 defineModel 替代 modelValue/emit
 const modelData = defineModel<string | number | boolean | any[] | Record<string, any>>()
@@ -748,6 +749,10 @@ function onTreeSelectFinish(value) {
   modelData.value = [value.value]
   showTreeSelect.value = false
 }
+
+function emitFunc(func, data) {
+  emits('xFormItemEmitFunc', func, data, data?.model ? this.form[data.model] : this.form)
+}
 </script>
 
 <template>
@@ -874,7 +879,7 @@ function onTreeSelectFinish(value) {
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanStepper v-model="modelData" :disabled="readonly" />
+        <VanStepper v-model="modelData as any" :disabled="readonly" />
       </template>
     </VanField>
 
@@ -1154,19 +1159,41 @@ function onTreeSelectFinish(value) {
     <!-- 文本输入框 -->
     <VanField
       v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
-      v-model="modelData"
+      v-model="(modelData as string)"
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :type="attr.type as FieldType"
-      :readonly="readonly"
+      :readonly="readonly || (attr.inputOnAfterName && attr.inputOnAfterFunc && !attr.inputOnAfterName.includes('|'))"
       :disabled="attr.disabled"
       :placeholder="placeholder"
       :error-message="errorMessage"
       :clearable="attr.clearable"
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
       @blur="() => formTypeCheck(attr, modelData as string)"
-    />
+    >
+      <template #input>
+        <input
+          :value="modelData"
+          :readonly="readonly || (attr.inputOnAfterName && attr.inputOnAfterFunc && !attr.inputOnAfterName.includes('|'))"
+          class="van-field__control"
+          :placeholder="placeholder"
+          style="flex: 1; min-width: 0;"
+          @input="e => modelData = (e.target as HTMLInputElement).value"
+          @blur="() => formTypeCheck(attr, modelData as string)"
+        >
+        <VanButton
+          v-if="attr.inputOnAfterName && attr.inputOnAfterFunc && !attr.inputOnAfterName.includes('|')"
+          class="action-btn"
+          round
+          type="primary"
+          size="small"
+          @click="emitFunc(attr.inputOnAfterFunc, attr)"
+        >
+          {{ attr.inputOnAfterName }}
+        </VanButton>
+      </template>
+    </VanField>
 
     <!-- 地址选择器 -->
     <VanField
@@ -1232,4 +1259,10 @@ function onTreeSelectFinish(value) {
 .date-picker-overlay {
   background-color: rgba(0, 0, 0, 0.2); /* 设置为半透明的黑色 */
 }
+.action-btn {
+  border-radius: 10px;
+  margin-left: 8px;
+  min-width: 4rem;
+  max-width: 6rem;
+}
 </style>