af-mobile-client-vue3 1.4.74 → 1.4.76

package/package.json

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

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

@@ -173,10 +173,9 @@ function triggerCamera() {
         handlePhotoUpload(result.data)
       }
       else if (result.status === 'error') {
-        console.error('拍照异常原因:', result.message)
         showDialog({
           title: '拍照异常',
-          message: '拍照失败，请重试',
+          message: result.message || '拍照失败，请重试',
         })
       }
     },

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

@@ -363,6 +363,11 @@ function emitFunc(func: any, data: any, value: any) {
   emit(func, data, value)
   emit('xFormItemEmitFunc', func, data, value)
 }
+
+// 处理  值/标签/值和标签  变化
+function setForm(form) {
+  Object.assign(conditionParams.value, form)
+}
 </script>
 
 <template>
@@ -473,6 +478,7 @@ function emitFunc(func: any, data: any, value: any) {
                 :service-name="props.serviceName"
                 :show-label="false"
                 @x-form-item-emit-func="emitFunc"
+                @set-form="setForm"
               />
             </template>
           </div>

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

@@ -6,6 +6,7 @@ import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOpt
 import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
 import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
 import XLocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
+import { createSelectValueTypeHandler } from '@af-mobile-client-vue3/plugins/selectValueTypeHelper'
 import { getConfigByNameAsync, runLogic } from '@af-mobile-client-vue3/services/api/common'
 import { post } from '@af-mobile-client-vue3/services/restTools'
 import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
@@ -38,7 +39,17 @@ import {
   Switch as VanSwitch,
   TimePicker as VanTimePicker,
 } from 'vant'
-import { computed, defineEmits, defineModel, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import {
+  computed,
+  defineEmits,
+  defineModel,
+  defineProps,
+  getCurrentInstance,
+  nextTick,
+  onBeforeMount,
+  ref,
+  watch,
+} from 'vue'
 
 const props = defineProps({
   attr: {
@@ -124,6 +135,8 @@ let debouncedUserLinkFunc: (() => void) | null = null
 let debouncedDepLinkFunc: (() => void) | null = null
 let debouncedUpdateOptions: (() => void) | null = null
 
+const selectValueTypeHandler = createSelectValueTypeHandler()
+
 const { attr, form, mode, serviceName, getDataParams, columnsField } = props
 // 配置的表单值格式（仅针对 datePicker 生效）
 // 作用：统一控制日期值的格式化输入/输出与选择器展示粒度
@@ -677,7 +690,8 @@ function onCalendarConfirm(values) {
 // js 函数作为数据源
 async function updateOptions() {
   if (attr.keyName && (attr.keyName.toString().includes('async ') || attr.keyName.toString().includes('function '))) {
-    option.value = await executeStrFunctionByContext(currInst, attr.keyName, [props.form, runLogic, props.mode, getConfigByNameAsync, post, userState.f.resources])
+    const res = await executeStrFunctionByContext(currInst, attr.keyName, [props.form, runLogic, props.mode, getConfigByNameAsync, post, userState.f.resources])
+    option.value = selectValueTypeHandler.processOptions(res, attr.selectValueType)
   }
 }
 
@@ -685,7 +699,7 @@ function init() {
   if (attr.keyName && typeof attr.keyName === 'string') {
     if (attr.keyName && attr.keyName.includes('logic@')) {
       getData({}, (res) => {
-        option.value = res
+        option.value = selectValueTypeHandler.processOptions(res, attr.selectValueType)
         initRadioValue()
       })
     }
@@ -693,7 +707,7 @@ function init() {
       const configName = attr.keyName.substring(7)
       getDict(configName, (result) => {
         if (result)
-          option.value = result
+          option.value = selectValueTypeHandler.processOptions(result, attr.selectValueType)
       }, serviceName)
     }
     else if (attr.keyName && attr.keyName.includes('search@')) {
@@ -725,8 +739,14 @@ function init() {
   }
 }
 
+// 根据selectValueType预处理options数据
+function processOptionsForValueType(options) {
+  return selectValueTypeHandler.processOptions(options, attr.selectValueType)
+}
+
 function getDataCallback(res) {
-  option.value = res
+  // 预处理options数据
+  option.value = processOptionsForValueType(res)
   if (attr.type === 'radio')
     initRadioValue()
 }
@@ -951,6 +971,7 @@ function onTreeSelectFinish({ selectedOptions }) {
   else {
     modelData.value = selectedOptions[index].value
   }
+  commChange()
   showTreeSelect.value = false
 }
 
@@ -1120,6 +1141,43 @@ function scanCodeOrNfc(attr) {
     })
   }
 }
+// 统一的表单项change处理逻辑
+function handleFormItemChange() {
+  // 处理both模式
+  const options = option.value
+  if (attr.selectValueType === 'both') {
+    nextTick(() => {
+      selectValueTypeHandler.processBothMode(
+        form,
+        attr.model,
+        form[attr.model],
+        options,
+      )
+    })
+  }
+  // 处理label模式
+  if (attr.selectValueType === 'label') {
+    nextTick(() => {
+      selectValueTypeHandler.processLabelMode(
+        form,
+        attr.model,
+        form[attr.model],
+        options,
+      )
+    })
+  }
+  // 处理原有的dataChangeFunc
+  if (attr.dataChangeFunc) {
+    // this.debouncedDataChangeFunc()
+    dataChangeFuncdebounce()
+  }
+  emits('setForm', form)
+}
+
+// 需要选择的表单项变化时触发
+function commChange() {
+  handleFormItemChange()
+}
 </script>
 
 <template>
@@ -1154,7 +1212,7 @@ function scanCodeOrNfc(attr) {
     <template v-if="attr.type === 'checkbox' && showItem">
       <!--  勾选    -->
       <VanField
-        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
+        v-if="mode !== '查询'"
         name="checkboxGroup"
         :label="labelData"
         :label-align="labelAlign"
@@ -1163,7 +1221,13 @@ function scanCodeOrNfc(attr) {
         :required="attr.rule.required === 'true'"
       >
         <template #input>
-          <van-checkbox-group v-model="modelData as any[]" direction="horizontal" shape="square" :disabled="readonly">
+          <van-checkbox-group
+            v-model="modelData as any[]"
+            direction="horizontal"
+            shape="square"
+            :disabled="readonly"
+            @change="commChange"
+          >
             <VanCheckbox v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :shape="rules?.[attr.model].shape" :value="item[columnsField.value]">
               {{ item[columnsField.text] }}
             </VanCheckbox>
@@ -1184,6 +1248,7 @@ function scanCodeOrNfc(attr) {
             :column-num="labelData ? 3 : 4"
             :multiple="true"
             :columns="option"
+            @change="commChange"
           />
         </template>
       </VanField>
@@ -1201,6 +1266,7 @@ function scanCodeOrNfc(attr) {
         :required="attr.rule.required === 'true'"
         :lazy-load="attr.lazyLoad"
         :on-search="attr.lazyLoad ? handleLazySearch : null"
+        @confirm="commChange"
       />
     </template>
 
@@ -1217,7 +1283,7 @@ function scanCodeOrNfc(attr) {
       :required="attr.rule.required === 'true'"
     >
       <template #input>
-        <VanRadioGroup v-model="modelData" direction="horizontal" :disabled="readonly">
+        <VanRadioGroup v-model="modelData" direction="horizontal" :disabled="readonly" @change="commChange">
           <VanRadio v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :value="item[columnsField.value]">
             {{ item[columnsField.text] }}
           </VanRadio>
@@ -1240,6 +1306,7 @@ function scanCodeOrNfc(attr) {
           v-model="(modelData as string)"
           :column-num="labelData ? 3 : 4"
           :columns="option"
+          @change="commChange"
         />
       </template>
     </VanField>
@@ -1516,6 +1583,7 @@ function scanCodeOrNfc(attr) {
       :required="attr.rule.required === 'true'"
       :lazy-load="attr.lazyLoad"
       :on-search="attr.lazyLoad ? handleLazySearch : null"
+      @confirm="commChange"
     />
 
     <!-- 文本区域 -->

package/src/plugins/selectValueTypeHelper.ts

@@ -0,0 +1,283 @@
+/**
+ * selectValueType 功能辅助工具
+ * 用于处理表单选择组件的值存储模式转换
+ */
+
+/**
+ * 根据selectValueType预处理options数据
+ * @param {Array} options - 原始选项数据
+ * @param {string} selectValueType - 值存储类型：'value' | 'label' | 'both'
+ * @returns {Array} 处理后的选项数据
+ */
+export function processOptionsForValueType(options, selectValueType = 'value') {
+  // value模式：不做任何改变，保持现有逻辑
+  if (selectValueType === 'value') {
+    return options
+  }
+
+  // label模式：交换value和label，保存原始value到originValue
+  if (selectValueType === 'label') {
+    return processOptionsForLabelType(options)
+  }
+
+  // both模式：不处理options
+  return options
+}
+
+/**
+ * 处理label模式的options数据转换
+ * @param {Array} options - 原始选项数据
+ * @returns {Array} 转换后的选项数据
+ */
+export function processOptionsForLabelType(options) {
+  if (!Array.isArray(options)) {
+    return options
+  }
+
+  return options.map((item) => {
+    // 先创建基础的转换对象
+    const transformedItem = { ...item }
+
+    // 处理各种数据格式的属性转换
+    if (item.value !== undefined && item.label !== undefined) {
+      // 标准格式 {value, label}
+      transformedItem.originValue = item.value
+      transformedItem.value = item.label
+    }
+    else if (item.key !== undefined && item.title !== undefined) {
+      // 兼容格式 {key, title}
+      transformedItem.originValue = item.key
+      transformedItem.value = item.title
+      transformedItem.label = item.title
+    }
+    else if (item.value !== undefined && item.text !== undefined) {
+      // 字典格式 {value, text}
+      transformedItem.originValue = item.value
+      transformedItem.value = item.text
+      transformedItem.label = item.text
+    }
+    else if (item.value !== undefined) {
+      // 其他情况，尝试从多个可能的标签字段获取
+      const labelValue = item.label || item.title || item.text
+      if (labelValue !== undefined) {
+        transformedItem.originValue = item.value
+        transformedItem.value = labelValue
+      }
+    }
+
+    // 处理树形结构（递归处理children）
+    if (item.children && Array.isArray(item.children)) {
+      transformedItem.children = processOptionsForLabelType(item.children)
+    }
+
+    return transformedItem
+  })
+}
+
+/**
+ * 根据value查找对应的label（支持单选和多选）
+ * @param {any} value - 要查找的值
+ * @param {Array} options - 选项数据
+ * @returns {string | Array | null} 对应的label值，找不到时返回null
+ */
+export function findLabelByValue(value, options) {
+  if (value === undefined || value === null) {
+    return null
+  }
+
+  // 多选情况：value是数组
+  if (Array.isArray(value)) {
+    const labels = []
+    for (const val of value) {
+      const label = findSingleLabelByValue(val, options)
+      if (label !== null) {
+        labels.push(label)
+      }
+    }
+    return labels.length > 0 ? labels : null
+  }
+
+  // 单选情况：value是单个值
+  return findSingleLabelByValue(value, options)
+}
+
+/**
+ * 在选项数据中查找单个value对应的label（支持树形结构递归查找）
+ * @param {any} value - 要查找的值
+ * @param {Array} options - 选项数据
+ * @returns {string} 对应的label值，找不到时返回String(value)作为fallback
+ */
+export function findSingleLabelByValue(value, options) {
+  if (!Array.isArray(options)) {
+    return String(value)
+  }
+
+  for (const item of options) {
+    // 处理标准格式 {value, label}
+    if (item.value !== undefined && String(item.value) === String(value)) {
+      return item.label || item.title || item.text || String(value)
+    }
+
+    // 处理兼容格式 {key, title}
+    if (item.key !== undefined && String(item.key) === String(value)) {
+      return item.title || item.label || item.text || String(value)
+    }
+
+    // 递归查找树形结构
+    if (item.children && Array.isArray(item.children)) {
+      const childLabel = findSingleLabelByValue(value, item.children)
+      // 只有找到真正匹配项时才返回（不是fallback的String(value)）
+      if (childLabel !== String(value)) {
+        return childLabel
+      }
+    }
+  }
+
+  // 如果找不到对应的label，降级返回原值
+  return String(value)
+}
+
+/**
+ * 处理 label 模式数据存储
+ * @param {object} form - 表单对象
+ * @param {string} fieldName - 字段名
+ * @param {any} currentValue - 当前值
+ * @param {Array} options - 选项数据
+ */
+export function processLabelModeData(form, fieldName, currentValue, options) {
+  // 确保 originData 对象存在
+  if (!form.originData) {
+    form.originData = {}
+  }
+
+  // 获取当前值对应的原始值
+  const originValue = getOriginValue(currentValue, options)
+
+  // 存储原始值到 originData 中
+  form.originData[fieldName] = originValue
+}
+
+/**
+ * 处理 both 模式数据存储
+ * @param {object} form - 表单对象
+ * @param {string} fieldName - 字段名
+ * @param {any} currentValue - 当前值
+ * @param {Array} options - 选项数据
+ */
+export function processBothModeData(form, fieldName, currentValue, options) {
+  // 确保 labelData 对象存在
+  if (!form.labelData) {
+    form.labelData = {}
+  }
+
+  // 获取当前值对应的标签值
+  const labelValue = findLabelByValue(currentValue, options)
+
+  // 存储标签值到 labelData 中
+  if (labelValue !== null && labelValue !== undefined) {
+    form.labelData[fieldName] = labelValue
+  }
+}
+
+/**
+ * 获取原始值（用于label模式时获取originValue）
+ * @param {any} currentValue - 当前值
+ * @param {Array} options - 选项数据
+ * @returns {any} 原始值，找不到时返回currentValue作为fallback
+ */
+export function getOriginValue(currentValue, options) {
+  console.log('getOriginValue', options)
+  if (!Array.isArray(options) || currentValue === undefined || currentValue === null) {
+    return currentValue
+  }
+
+  // 多选情况
+  if (Array.isArray(currentValue)) {
+    const originValues = []
+    for (const val of currentValue) {
+      const originVal = findOriginValueByLabel(val, options)
+      // 只有找到真正的原始值时才使用originVal（不是fallback值）
+      if (originVal !== val) {
+        originValues.push(originVal)
+      }
+      else {
+        // 如果没找到原始值，保留当前值
+        originValues.push(val)
+      }
+    }
+    return originValues
+  }
+
+  // 单选情况
+  return findOriginValueByLabel(currentValue, options)
+}
+
+/**
+ * 根据label查找原始value值
+ * @param {any} label - 标签值
+ * @param {Array} options - 选项数据
+ * @returns {any} 原始值，找不到时返回label作为fallback
+ */
+function findOriginValueByLabel(label, options) {
+  for (const item of options) {
+    // 如果有originValue，说明是经过label模式转换的
+    if (item.originValue !== undefined && String(item.value) === String(label)) {
+      return item.originValue
+    }
+
+    // 递归查找树形结构
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      const childOriginValue = findOriginValueByLabel(label, item.children)
+      // 只有当找到真正的匹配项时才返回（不等于传入的label）
+      if (childOriginValue !== label) {
+        return childOriginValue
+      }
+    }
+  }
+
+  return label // 如果找不到，返回原值
+}
+
+/**
+ * 创建selectValueType处理器的工厂函数
+ * @returns {object} 处理器对象
+ */
+export function createSelectValueTypeHandler() {
+  return {
+    // 预处理options数据
+    processOptions(options, selectValueType) {
+      return processOptionsForValueType(options, selectValueType)
+    },
+
+    // 查找label值
+    findLabel(value, options) {
+      return findLabelByValue(value, options)
+    },
+
+    // 处理both模式数据
+    processBothMode(form, fieldName, currentValue, options) {
+      return processBothModeData(form, fieldName, currentValue, options)
+    },
+
+    // 处理label模式数据
+    processLabelMode(form, fieldName, currentValue, options) {
+      return processLabelModeData(form, fieldName, currentValue, options)
+    },
+
+    // 获取原始值
+    getOriginValue(currentValue, options) {
+      return getOriginValue(currentValue, options)
+    },
+  }
+}
+
+export default {
+  processOptionsForValueType,
+  processOptionsForLabelType,
+  findLabelByValue,
+  findSingleLabelByValue,
+  processLabelModeData,
+  processBothModeData,
+  getOriginValue,
+  createSelectValueTypeHandler,
+}