af-mobile-client-vue3 1.2.18 → 1.2.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "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

@@ -131,9 +131,6 @@ const isLastPage = ref(false)
 // 条件参数(查询框)
 const conditionParams = ref(undefined)
 
-// 查询参数（配置自带的默认值）
-const queryDefaultParams = ref({})
-
 // 主要按钮的状态
 const buttonState = ref(undefined)
 
@@ -201,8 +198,18 @@ function initComponent() {
       }
     }
     configContent.value = result
-    formQueryList.value = result.formJson
-
+    // 扁平化 type=group 的 groupItems，保持顺序
+    const flatFormJson = []
+    result.formJson.forEach((item) => {
+      if (item.type === 'group' && Array.isArray(item.groupItems)) {
+        flatFormJson.push(...item.groupItems)
+      }
+      else {
+        flatFormJson.push(item)
+      }
+    })
+    formQueryList.value = flatFormJson
+    console.log('formQueryList', formQueryList.value)
     if (result.buttonState) {
       buttonState.value = result.buttonState
       buttonPermissions.value = result.buttonPermissions
@@ -252,13 +259,12 @@ function initConditionParams(formItems, isQuery) {
   hasDefaults = true
 
   // 如果有默认值，则设置到条件参数中并立即执行查询
-  queryDefaultParams.value = defaultParams
   isInitQuery.value = isQuery
   if (hasDefaults && isInitQuery.value) {
     // 延迟执行第一次查询，确保组件完全加载
     setTimeout(() => {
       loading.value = true
-      onLoad()
+      onLoad(defaultParams)
     }, 100)
   }
 }
@@ -278,7 +284,7 @@ function onRefresh() {
 }
 
 // 加载数据
-function onLoad() {
+function onLoad(defaultParams = {}) {
   if (refreshing.value) {
     list.value = []
     pageNo.value = 1
@@ -292,8 +298,7 @@ function onLoad() {
     // 确保conditionParams不是undefined
     if (conditionParams.value === undefined)
       conditionParams.value = {}
-    const mergedParams = mergeParams(queryDefaultParams.value, conditionParams.value)
-
+    const mergedParams = mergeParams(defaultParams, conditionParams.value)
     // 输出查询条件，便于调试
     console.log('查询条件:', {
       pageNo: pageNo.value,
@@ -537,6 +542,16 @@ defineExpose({
           @search="onRefresh"
         />
       </VanCol>
+      <!-- 新增按钮，放在查询框后、查询条件下拉按钮前 -->
+      <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"
+          size="small"
+          class="add-action-btn"
+          @click="addOption"
+        />
+      </VanCol>
       <!-- 右侧动态插槽区域 -->
       <template v-for="(_, name) in slots" :key="name">
         <template v-if="typeof name === 'string' && name.startsWith('search-right-')">
@@ -558,7 +573,6 @@ defineExpose({
           :button-permissions="buttonPermissions"
           :scan-options="scanOptions"
           @on-refresh="onRefresh"
-          @add-option="addOption"
         />
       </VanCol>
     </VanRow>
@@ -953,6 +967,32 @@ defineExpose({
     position: sticky;
     top: 0;
     z-index: 10;
+    .add-col {
+      display: flex;
+      align-items: center;
+      margin: 0 4px;
+      .add-action-btn {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background-color: var(--van-background);
+        color: #888;
+        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 {
+          opacity: 0.85;
+          background-color: rgba(25, 137, 250, 0.08);
+          border-color: var(--van-primary-color);
+          color: var(--van-primary-color);
+        }
+      }
+    }
     :deep(.van-search) {
       width: 100%;
       padding: var(--van-search-padding);

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

@@ -12,7 +12,7 @@ import {
   Icon as VanIcon,
   Row as VanRow,
 } from 'vant'
-import { computed, defineEmits, defineModel, defineProps, onMounted, ref } from 'vue'
+import { computed, defineEmits, defineModel, defineProps, nextTick, onMounted, ref } from 'vue'
 import QrScanner from './QrScanner/index.vue'
 import VpnRecognition from './VpnRecognition/index.vue'
 
@@ -91,6 +91,9 @@ const colFieldNames = {
 // 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
 const conditionParams = ref({})
 
+// 用于存储每个 XFormItem 的 ref
+const formItemRefs = ref([])
+
 // 视图模式 - 当前选中的扫描模式
 const scanType = ref(getDefaultScanType())
 
@@ -234,6 +237,15 @@ function resetOption() {
   Object.keys(conditionParams.value).forEach((key) => {
     conditionParams.value[key] = undefined
   })
+  // 关键：调用所有 XFormItem 的 reset 方法
+  nextTick(() => {
+    formItemRefs.value.forEach((refItem) => {
+      if (refItem && typeof refItem.reset === 'function') {
+        refItem.reset()
+      }
+    })
+  })
+  console.log('conditionParams.value重置', conditionParams.value)
 }
 function checkOrderOption() {
   let isCheck = true
@@ -251,22 +263,81 @@ function checkOrderOption() {
   }
   return isCheck
 }
+// 清理查询条件参数，删除无效内容
+function cleanConditionParams(params) {
+  const cleanedParams = {}
+
+  for (const key of Object.keys(params)) {
+    const value = params[key]
+
+    // 跳过无效值
+    if (value === null || value === undefined || value === '') {
+      continue
+    }
+
+    // 处理数组
+    if (Array.isArray(value)) {
+      // 过滤掉空字符串、null、undefined
+      const filteredArray = value.filter(item =>
+        item !== null && item !== undefined && item !== '',
+      )
+      // 只有当数组不为空时才添加
+      if (filteredArray.length > 0) {
+        cleanedParams[key] = filteredArray
+      }
+      continue
+    }
+
+    // 处理对象
+    if (typeof value === 'object' && value !== null) {
+      // 检查对象是否为空
+      const objectKeys = Object.keys(value)
+      if (objectKeys.length === 0) {
+        continue
+      }
+
+      // 递归清理对象内部
+      const cleanedObject = {}
+      let hasValidValue = false
+
+      for (const objKey of objectKeys) {
+        const objValue = value[objKey]
+        if (objValue !== null && objValue !== undefined && objValue !== '') {
+          cleanedObject[objKey] = objValue
+          hasValidValue = true
+        }
+      }
+
+      // 只有当对象有有效值时才添加
+      if (hasValidValue) {
+        cleanedParams[key] = cleanedObject
+      }
+      continue
+    }
+
+    // 处理基本类型
+    if (value !== null && value !== undefined && value !== '') {
+      cleanedParams[key] = value
+    }
+  }
+
+  return cleanedParams
+}
+
 // 确认筛选条件
 function confirmOption() {
   const isCheck = checkOrderOption()
   if (isCheck) {
-    const isEmptyObject = Object.keys(conditionParams.value).length === 0
-    emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
+    // 清理查询条件参数
+    const cleanedParams = cleanConditionParams(conditionParams.value)
+
+    const isEmptyObject = Object.keys(cleanedParams).length === 0
+    emit('update:conditionParams', isEmptyObject ? undefined : cleanedParams)
     emit('onRefresh', {})
     listFilterMenu.value.close(false)
   }
 }
 
-// 新增按钮
-function addOption() {
-  emit('addOption')
-}
-
 // 处理筛选菜单显示
 function handleFilterMenuChange(value: boolean) {
   filterMenuShow.value = value
@@ -387,20 +458,20 @@ function filterButtonPermissions(btn) {
                   </div>
                 </VanCol> -->
               </VanRow>
-              <XFormItem v-model="conditionParams[item.model]" :form="conditionParams" :attr="item" :service-name="props.serviceName" :show-label="false" />
+              <XFormItem
+                ref="formItemRefs"
+                v-model="conditionParams[item.model]"
+                :form="conditionParams"
+                :attr="item"
+                :service-name="props.serviceName"
+                :show-label="false"
+              />
             </template>
           </div>
           <div class="operations-panel">
             <VanButton type="default" @click="resetOption">
               重置
             </VanButton>
-            <VanButton
-              v-if="props.buttonState.add && props.buttonState.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr)))))"
-              type="primary"
-              @click="addOption"
-            >
-              新增
-            </VanButton>
             <VanButton type="primary" @click="confirmOption">
               查询
             </VanButton>