af-mobile-client-vue3 1.2.18 → 1.2.19

package/package.json

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

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,17 @@ 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 +258,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 +283,7 @@ function onRefresh() {
 }
 
 // 加载数据
-function onLoad() {
+function onLoad(defaultParams = {}) {
   if (refreshing.value) {
     list.value = []
     pageNo.value = 1
@@ -292,8 +297,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 +541,16 @@ defineExpose({
           @search="onRefresh"
         />
       </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)))) )">
+        <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 +572,6 @@ defineExpose({
           :button-permissions="buttonPermissions"
           :scan-options="scanOptions"
           @on-refresh="onRefresh"
-          @add-option="addOption"
         />
       </VanCol>
     </VanRow>
@@ -953,6 +966,31 @@ 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>

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

@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<{
 })
 const emits = defineEmits(['onSubmit'])
 const userStore = useUserStore()
-const formRef = ref<FormInstance>()
+const xFormRef = ref<FormInstance>()
 const myFormItems = ref<FormItem[]>([])
 const rules = reactive({})
 const form = ref({})
@@ -203,21 +203,6 @@ function init(params) {
 }
 
 function setFormProps(form, item) {
-  // 只有在字段未定义时，按类型赋有意义的默认值
-  if (form.value[item.model] === undefined) {
-    switch (item.rule?.type) {
-      case 'number':
-      case 'integer':
-      case 'float':
-        form.value[item.model] = 0
-        break
-      case 'string':
-        form.value[item.model] = ''
-        break
-      default:
-        form.value[item.model] = ''
-    }
-  }
   if (item.rule) {
     rules[item.model] = []
     let defaultValue
@@ -273,9 +258,9 @@ function getRealKey(key, mustHandleKey = false) {
 async function asyncSubmit() {
   return new Promise((resolve, reject) => {
     validate().then(async () => {
-      const requestForm = prepareForm()
-      await appendSilenceAddFields(requestForm)
-      const realForm = handleFormKeys(requestForm)
+      const cleanedForm = prepareForm()
+      await appendSilenceAddFields(cleanedForm)
+      const realForm = handleFormKeys(cleanedForm)
       resolve({
         realForm,
         mode: props.mode,
@@ -364,21 +349,74 @@ async function appendSilenceAddFields(form) {
 
 function prepareForm() {
   const formObj = { ...form.value }
+  const cleanedForm = {}
+
   for (const key of Object.keys(formObj)) {
     const value = formObj[key]
-    if (value === null || (typeof value === 'object' && Object.keys(value).length === 0)) {
-      formObj[key] = undefined
+
+    // 跳过无效值
+    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) {
+        cleanedForm[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) {
+        cleanedForm[key] = cleanedObject
+      }
+      continue
+    }
+
+    // 处理基本类型
+    if (value !== null && value !== undefined && value !== '') {
+      cleanedForm[key] = value
     }
   }
-  return formObj
+
+  return cleanedForm
 }
 
 async function onSubmit() {
+  await validate()
+  // 清理表单数据
+  const cleanedForm = prepareForm()
   if (!props.configName && props.groupFormItems) {
     // 只有单表才可以成功，多表关联或者自定义sql不行
-    const requestForm = prepareForm()
-    await appendSilenceAddFields(requestForm)
-    const realForm = handleFormKeys(requestForm)
+    await appendSilenceAddFields(cleanedForm)
+    const realForm = handleFormKeys(cleanedForm)
+
     try {
       addOrModifyEntity(realForm, tableName.value, props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME).then(() => {
         showSuccessToast('提交成功!！')
@@ -394,11 +432,12 @@ async function onSubmit() {
     }
   }
   else {
-    emits('onSubmit', form.value)
+    // 使用清理后的数据
+    emits('onSubmit', cleanedForm)
   }
 }
 async function validate() {
-  await formRef.value?.validate()
+  await xFormRef.value?.validate()
 }
 watch(() => props.formData, (_val) => {
   form.value = _val
@@ -407,7 +446,7 @@ defineExpose({ init, form, formGroupName, validate, asyncSubmit })
 </script>
 
 <template>
-  <VanForm ref="formRef" class="x-form-container" @submit="onSubmit">
+  <VanForm ref="xFormRef" class="x-form-container" @submit="onSubmit">
     <div class="form-fields-scrollable">
       <VanCellGroup inset>
         <XFormItem