af-mobile-client-vue3 1.3.35 → 1.3.37

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

@@ -1,1311 +1,1311 @@
-<script setup lang="ts">
-import type { FieldType } from 'vant'
-import type { Numeric } from 'vant/es/utils'
-import ImageUploader from '@af-mobile-client-vue3/components/core/ImageUploader/index.vue'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-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 { 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'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
-import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
-import { areaList } from '@vant/area-data'
-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,
-  CheckboxGroup as vanCheckboxGroup,
-  DatePicker as VanDatePicker,
-  Field as VanField,
-  Picker as VanPicker,
-  PickerGroup as VanPickerGroup,
-  Popup as VanPopup,
-  Radio as VanRadio,
-  RadioGroup as VanRadioGroup,
-  Rate as VanRate,
-  Slider as VanSlider,
-  Stepper as VanStepper,
-  Switch as VanSwitch,
-  TimePicker as VanTimePicker,
-} from 'vant'
-import { computed, defineEmits, defineModel, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
-
-const props = defineProps({
-  attr: {
-    type: Object,
-  },
-  form: {
-    type: Object,
-  },
-  datePickerFilter: {
-    type: Function,
-    default: () => true,
-  },
-  datePickerFormatter: {
-    type: Function,
-    default: (type, val) => val,
-  },
-  mode: {
-    type: String,
-    default: '查询',
-  },
-  serviceName: {
-    type: String,
-    default: undefined,
-  },
-  // 调用logic获取数据源的追加参数
-  getDataParams: {
-    type: Object,
-    default: undefined,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Object,
-    default: () => {},
-  },
-  // 用 defineModel 替代 modelValue/emit
-  modelValue: {
-    type: [String, Number, Boolean, Array, Object],
-    default: undefined,
-  },
-  showLabel: {
-    type: Boolean,
-    default: true,
-  },
-  // radio/checkbox/select/mul-select 选项数据结构
-  columnsField: {
-    type: Object,
-    default: () => {
-      return { text: 'label', value: 'value' }
-    },
-  },
-
-})
-
-const emits = defineEmits(['setForm', 'xFormItemEmitFunc'])
-
-// 用 defineModel 替代 modelValue/emit
-const modelData = defineModel<string | number | boolean | any[] | Record<string, any>>()
-
-// 获取字典
-interface OptionItem {
-  label: string
-  value: any
-  children?: OptionItem[]
-}
-
-// 判断并初始化防抖函数
-let debouncedUserLinkFunc: (() => void) | null = null
-let debouncedDepLinkFunc: (() => void) | null = null
-let debouncedUpdateOptions: (() => void) | null = null
-
-const { attr, form, mode, serviceName, getDataParams, columnsField } = props
-const calendarShow = ref(false)
-const option = ref([])
-const pickerValue = ref(undefined)
-const timePickerValue = ref(undefined)
-const area = ref<any>(undefined)
-const showPicker = ref(false)
-const showDatePicker = ref(false)
-const showTimePicker = ref(false)
-const showArea = ref(false)
-const errorMessage = ref('')
-const showTreeSelect = ref(false)
-const treeValue = ref('')
-
-// 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
-const userState = useUserStore().getLogin()
-const currUser = computed(() => userState.f.resources.id)
-const userInfo = computed(() => ({
-  orgId: userState.f.resources.orgid,
-  userId: userState.f.resources.id,
-}))
-
-// 是否展示当前项
-const showItem = ref(true)
-
-// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
-const currInst = getCurrentInstance()
-
-// 配置中心->表单项变更触发函数
-async function dataChangeFunc() {
-  if (attr.dataChangeFunc) {
-    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [props.form, (formData: any) => emits('setForm', formData), attr, null, mode, runLogic, getConfigByNameAsync])
-  }
-}
-const dataChangeFuncdebounce = debounce(dataChangeFunc, 300)
-// 配置中心->表单项展示函数
-async function showFormItemFunc() {
-  if (attr.showFormItemFunc) {
-    const obj = await executeStrFunctionByContext(currInst, attr.showFormItemFunc, [form, attr, null, mode])
-    // 判断是 bool 还是  obj  兼容
-    if (typeof obj === 'boolean') {
-      showItem.value = obj
-    }
-    else if (obj && typeof obj === 'object') {
-      // obj 是一个对象，并且不是数组
-      showItem.value = obj?.show
-    }
-  }
-}
-const showFormItemFuncdebounce = debounce(showFormItemFunc, 300)
-/**
- * 检测是否传入了有效的值
- * @returns any
- */
-function checkModel(val = props.modelValue) {
-  if (val === null || val === undefined || val === '')
-    return false
-  if (Array.isArray(val))
-    return val.length > 0
-  return true
-}
-/**
- * 获取表单项的默认值
- * @returns any
- */
-function getDefaultValue() {
-  const val = props.modelValue
-
-  // 如果有有效值，直接返回
-  if (checkModel(val)) {
-    return val
-  }
-
-  // 根据类型获取默认值
-  const getDefaultByType = () => {
-    const def = mode !== '查询' ? attr.formDefault : attr.queryFormDefault
-
-    if (['treeSelect', 'select', 'checkbox'].includes(attr.type) && ['curOrgId', 'curDepId', 'curUserId'].includes(def)) {
-      if (def === 'curOrgId') {
-        if (attr.type === 'treeSelect') {
-          treeValue.value = userState.f.resources.orgs
-        }
-        return attr.type === 'select' ? userState.f.resources.orgid : [userState.f.resources.orgid]
-      }
-      if (def === 'curDepId') {
-        if (attr.type === 'treeSelect') {
-          treeValue.value = userState.f.resources.deps
-        }
-        return attr.type === 'select' ? userState.f.resources.depids : [userState.f.resources.depids]
-      }
-      if (def === 'curUserId') {
-        if (attr.type === 'treeSelect') {
-          treeValue.value = userState.f.resources.name
-        }
-        return attr.type === 'select' ? userState.f.resources.id : [userState.f.resources.id]
-      }
-    }
-
-    // 数组类型默认值
-    const arrayTypes = ['uploader', 'checkbox', 'file', 'area', 'image', 'treeSelect']
-    if (arrayTypes.includes(attr.type)) {
-      return def !== undefined ? def : []
-    }
-
-    // 特殊类型默认值
-    const specialDefaults = {
-      switch: false,
-      stepper: 1,
-      addressSearch: val,
-    }
-
-    if (specialDefaults[attr.type] !== undefined) {
-      return specialDefaults[attr.type]
-    }
-
-    // 日期时间类型
-    const dateTypes = ['rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker', 'datePicker', 'timePicker']
-    if (dateTypes.includes(attr.type)) {
-      return getDateRange({
-        type: attr.type,
-        formDefault: attr.formDefault ?? '',
-        queryFormDefault: attr.queryFormDefault ?? '',
-        queryType: attr.queryType,
-        queryValueFormat: attr.queryValueFormat,
-        name: attr.name ?? '',
-      }) ?? []
-    }
-
-    // 其他类型（字符串、数字等）
-    return def ?? ''
-  }
-
-  return getDefaultByType()
-}
-
-// 初始化日期组件初始值，组件自定义格式显示值和实际值（日期相关初始化都在此函数中操作）
-function getDateRange({
-  type,
-  formDefault: defaultValue,
-  queryFormDefault,
-  queryType,
-  queryValueFormat: defaultFormat,
-  name,
-}: {
-  type: string
-  formDefault: string
-  queryFormDefault: string
-  queryType?: string
-  queryValueFormat?: string
-  name: string
-}): string | [string, string] | undefined {
-  const formatMap: Record<string, string> = {
-    yearPicker: 'YYYY',
-    yearRangePicker: 'YYYY',
-    monthPicker: 'YYYY-MM',
-    monthRangePicker: 'YYYY-MM',
-    datePicker: 'YYYY-MM-DD HH:mm:ss',
-    rangePicker: 'YYYY-MM-DD HH:mm:ss',
-  }
-  if (mode) {
-    const format = defaultFormat || formatMap[type]
-    const val = mode === '查询' ? queryFormDefault : defaultValue
-    let start: string, end: string
-    switch (val) {
-      case 'curYear':
-        start = dayjs().startOf('year').format(format)
-        end = dayjs().endOf('year').format(format)
-        break
-      case 'curMonth':
-        start = dayjs().startOf('month').format(format)
-        end = dayjs().endOf('month').format(format)
-        break
-      case 'curDay':
-        start = dayjs().startOf('day').format(format)
-        end = dayjs().endOf('day').format(format)
-        break
-      case 'curTime':
-        start = dayjs().format(format)
-        end = dayjs().format(format)
-        break
-      default:
-        return undefined
-    }
-    if (['monthPicker', 'yearPicker', 'datePicker'].includes(type)) {
-      if (mode !== '查询') {
-        if (queryType === 'BETWEEN') {
-          return [start, end]
-        }
-        if (name.includes('开始') || name.includes('起始')) {
-          return start
-        }
-        else {
-          return end
-        }
-      }
-      else {
-        return start
-      }
-    }
-    // rangePicker组件表单显示的值
-    if (mode === '查询' && type === 'rangePicker') {
-      pickerValue.value = `${start} ~ ${end}`
-    }
-    return mode !== '查询' ? start : [start, end]
-  }
-  else {
-    return undefined
-  }
-}
-
-// 监听 props.form 的变化
-watch(
-  () => props.form,
-  (newVal, oldVal) => {
-    // 如果是从函数获取 options
-    if (props.attr.keyName && (props.attr.keyName.toString().includes('async ') || props.attr.keyName.toString().includes('function'))) {
-      debouncedUpdateOptions()
-    }
-    if (props.attr.showFormItemFunc) {
-      showFormItemFuncdebounce()
-    }
-  },
-  { deep: true },
-)
-
-// 监听 modelData 的变化，调用 dataChangeFunc
-watch(
-  () => modelData.value,
-  (newVal, oldVal) => {
-    // 避免初始化时的调用
-    if (newVal !== oldVal) {
-      dataChangeFuncdebounce()
-    }
-  },
-  { deep: true },
-)
-
-// 监听 option.value 的变化
-watch(
-  () => option.value,
-  (newOption) => {
-    if (attr.type === 'treeSelect' && newOption && newOption.length > 0) {
-      // 你可以在这里调用 findOptionInTree 函数来查找默认值对应的 label
-      const result = findOptionInTree(option.value, modelData.value)
-      if (attr.type === 'treeSelect' && result)
-        treeValue.value = result.label
-    }
-  },
-)
-
-function updateFile(files, _index) {
-  modelData.value = files
-}
-
-// 表单校验的类型校验
-function formTypeCheck(attr, value) {
-  if (mode === '查询')
-    return
-  if (!attr.rule || !attr.rule.required || attr.rule.required === 'false')
-    return
-  switch (attr.rule.type) {
-    case 'string':
-      if (value.length === 0) {
-        errorMessage.value = `请输入${attr.name}`
-        return
-      }
-      break
-    case 'number':
-      if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(value)) {
-        errorMessage.value = `${attr.name}必须为数字`
-        return
-      }
-      break
-    case 'boolean':
-    case 'array':
-    case 'regexp':
-      if (value) {
-        errorMessage.value = ''
-        return
-      }
-      break
-    case 'integer':
-      if (!/^-?\d+$/.test(value)) {
-        errorMessage.value = `${attr.name}必须为整数`
-        return
-      }
-      break
-    case 'float':
-      if (!/^-?\d+\.\d+$/.test(value)) {
-        errorMessage.value = `${attr.name}必须为小数`
-        return
-      }
-      break
-    case 'email':
-      if (!/^[\w.%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(value)) {
-        errorMessage.value = `请输入正确的邮箱地址`
-        return
-      }
-      break
-    case 'idNumber':
-      if (!/^(?:\d{15}|\d{17}[0-9X])$/.test(value)) {
-        errorMessage.value = `请输入正确的身份证号码`
-        return
-      }
-      break
-    case 'userPhone':
-      if (!/^1[3-9]\d{9}$/.test(value)) {
-        errorMessage.value = `请输入正确的手机号码`
-        return
-      }
-      break
-    case 'landlineNumber':
-      if (!/^0\d{2,3}[-\s]?\d{7,8}$/.test(value)) {
-        errorMessage.value = `请输入正确的座机号码`
-        return
-      }
-      break
-    case 'greaterThanZero':
-      if (!/^(?:[1-9]\d*(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
-        errorMessage.value = `请输入一个大于0的数字`
-        return
-      }
-      break
-    case 'greaterThanOrEqualZero':
-      if (!/^(?:\d+|\d*\.\d+)$/.test(value)) {
-        errorMessage.value = `请输入一个大于等于0的数字`
-        return
-      }
-      break
-    case 'stringLength':
-      if (!(value.length >= attr.rule.minLen && value.length < attr.rule.maxLen)) {
-        errorMessage.value = `长度必须在${attr.rule.minLen}~${attr.rule.maxLen}之间`
-        return
-      }
-      break
-    case 'customJs':
-      // eslint-disable-next-line no-case-declarations
-      const funcStr = attr.rule.customValidatorFunc
-      // 输入的数据是否符合条件
-      // eslint-disable-next-line no-case-declarations
-      const status = ref(true)
-      // 提取函数体部分
-      // eslint-disable-next-line no-case-declarations
-      const funcBodyMatch = funcStr.match(/function\s*\(.*?\)\s*\{([\s\S]*)\}/)
-      if (!funcBodyMatch)
-        throw new Error('自定义校验函数不合法')
-      // eslint-disable-next-line no-case-declarations
-      const funcBody = funcBodyMatch[1].trim() // 提取函数体
-      // 使用 new Function 创建函数
-      // eslint-disable-next-line no-new-func,no-case-declarations
-      const customValidatorFunc = new Function('rule', 'value', 'callback', 'form', 'attr', 'util', funcBody)
-      // 定义 callback 函数
-      // eslint-disable-next-line no-case-declarations
-      const callback = (error) => {
-        if (error) {
-          errorMessage.value = `${error}`
-          status.value = false // 表示有错误发生
-        }
-      }
-      // 调用自定义校验函数
-      customValidatorFunc(
-        attr.rule,
-        value,
-        callback,
-        form,
-        attr,
-        {}, // util 对象（可以根据需要传递）
-      )
-      if (!status.value)
-        return
-      break
-    default:
-      errorMessage.value = ''
-      break
-  }
-  errorMessage.value = ''
-}
-
-onBeforeMount(() => {
-  init()
-  modelData.value = getDefaultValue()
-  showFormItemFunc()
-  dataChangeFunc()
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
-    debouncedUserLinkFunc = debounce(() => updateResOptions('人员'), 200)
-
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
-    debouncedDepLinkFunc = debounce(() => updateResOptions('部门'), 200)
-
-  if (attr.keyName && (attr?.keyName?.toString().indexOf('async ') !== -1 || attr?.keyName?.toString()?.indexOf('function') !== -1)) {
-    debouncedUpdateOptions = debounce(updateOptions, 200)
-  }
-})
-// 是否展示表单左侧label文字
-const labelData = computed(() => {
-  return props.showLabel ? attr.name : null
-})
-// 是否展示表单左侧label文字
-const labelAlign = computed(() => {
-  return attr.labelAlign ? attr.labelAlign : 'left'
-})
-// 是否只读
-const readonly = computed(() => {
-  return attr.addOrEdit === 'readonly' || mode === '预览'
-})
-// 提示内容
-const placeholder = computed(() => {
-  if (attr.addOrEdit === 'readonly')
-    return '暂无内容 ~ '
-  else
-    return attr.placeholder ? attr.placeholder : `请选择${attr.name}`
-})
-
-const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
-
-function onCalendarConfirm(values) {
-  modelData.value = [formatDate(values[0]), formatDate(values[1])]
-  pickerValue.value = `${formatDate(values[0])} ~ ${formatDate(values[1])}`
-  calendarShow.value = false
-}
-
-// js 函数作为数据源
-async function updateOptions() {
-  if (attr.keyName && (attr.keyName.toString().includes('async ') || attr.keyName.toString().includes('function '))) {
-    option.value = await executeStrFunctionByContext(this, attr.keyName, [props.form, runLogic, props.mode, getConfigByNameAsync, post])
-  }
-}
-
-function init() {
-  if (attr.keyName && typeof attr.keyName === 'string') {
-    if (attr.keyName && attr.keyName.includes('logic@')) {
-      getData({}, (res) => {
-        option.value = res
-        initRadioValue()
-      })
-    }
-    else if (attr.keyName && attr.keyName.includes('config@')) {
-      const configName = attr.keyName.substring(7)
-      getDict(configName, (result) => {
-        if (result)
-          option.value = result
-      }, serviceName)
-    }
-    else if (attr.keyName && attr.keyName.includes('search@')) {
-      let source = attr.keyName.substring(7)
-      const userid = currUser.value
-      let roleName = 'roleName'
-      if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
-        const startIndex = source.indexOf('[') + 1
-        const endIndex = source.indexOf(']', startIndex)
-        roleName = source.substring(startIndex, endIndex)
-        source = '根据角色获取人员'
-      }
-      const searchData = { source, userid, roleName }
-      if (source.startsWith('根据表单项[') && source.endsWith(']联动人员'))
-        updateResOptions('人员')
-      else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门'))
-        updateResOptions('部门')
-      else if (attr.type === 'select' || attr.type === 'checkbox')
-        searchToListOption(searchData, res => getDataCallback(res))
-      else
-        searchToOption(searchData, res => getDataCallback(res))
-    }
-    else if (attr.keyName.toString().includes('async ') || attr.keyName.toString().includes('function ')) {
-      updateOptions()
-    }
-    else {
-      initRadioValue()
-    }
-  }
-}
-
-function getDataCallback(res) {
-  option.value = res.map(item => ({
-    ...item,
-    value: item.label, // 将value设置为label的值
-  }))
-  if (attr.type === 'radio')
-    initRadioValue()
-}
-
-async function updateResOptions(type) {
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString()?.endsWith(`]联动${type}`)) {
-    const searchData = { source: `获取${type}`, userid: currUser.value }
-    const startIndex = attr.keyName.indexOf('[') + 1
-    const endIndex = attr.keyName.indexOf(']', startIndex)
-    const formModel = attr.keyName.substring(startIndex, endIndex).replace('.', '_')
-    const formModelData = form[formModel]
-    if (formModel?.length && formModelData?.length) {
-      await searchToListOption(searchData, (res) => {
-        getDataCallback(res.filter((h) => {
-          return formModelData['0'] === h.f_organization_id || formModelData['0'] === h.f_department_id || formModelData['0'] === h.parentid
-          // if (formModel.indexOf('org') > -1) {
-          //   return formModelData?.includes(h.orgid || h.f_organization_id || h.parentid)
-          // } else {
-          //   return formModelData?.includes(h?.parentid)
-          // }
-        }))
-      })
-    }
-  }
-}
-
-function initRadioValue() {
-  if ((mode === '新增' || mode === '修改') && attr.type === 'radio' && !props.modelValue) {
-    if (attr.keys && attr.keys.length > 0)
-      modelData.value = attr.keys[0].value
-    else if (option.value && option.value.length > 0)
-      modelData.value = option.value[0].value
-  }
-}
-
-function getData(value, callback) {
-  if (value !== '') {
-    const logicName = attr.keyName
-    const logic = logicName.substring(6)
-    // 调用logic前设置参数
-    if (getDataParams && getDataParams[attr.model])
-      Object.assign(value, getDataParams[attr.model])
-    Object.assign(value, userInfo.value)
-    runLogic(logic, value, serviceName).then((res) => {
-      callback(res)
-    })
-  }
-}
-
-// 已废弃 不进行维护
-function onPickerConfirm({ selectedOptions }) {
-  showPicker.value = false
-  modelData.value = selectedOptions[0].text
-}
-
-// 日期时间选择数据
-const dateTimePickerValue = ref<any>({})
-function showDataTimePicker() {
-  if (props.modelValue && typeof props.modelValue === 'string') {
-    // 拆分日期和时间
-    const [dateStr, timeStr] = props.modelValue.split(' ')
-    // 拆分日期部分
-    const date = dateStr.split('-')
-    // 拆分时间部分
-    const time = timeStr.split(':')
-    // 赋值给 dateTimePickerValue
-    dateTimePickerValue.value = {
-      date,
-      time,
-    }
-  }
-  else {
-    dateTimePickerValue.value = {
-      date: formatDate(new Date()).split('-'),
-      time: ['00', '00', '00'],
-    }
-  }
-  showDatePicker.value = true
-}
-
-function onDatePickerConfirm({ selectedValues }) {
-  showDatePicker.value = false
-  modelData.value = selectedValues.join('-')
-}
-
-// 已废弃 不进行维护
-function onTimePickerConfirm({ selectedValues }) {
-  showTimePicker.value = false
-  timePickerValue.value = selectedValues.join(':')
-  modelData.value = timePickerValue.value
-}
-
-// 没人用到本次先不动。后续需要看这个组件需要怎么使用
-function onAreaConfirm({ selectedOptions }) {
-  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
-  showArea.value = false
-  modelData.value = [{
-    province: selectedOptions[0].text,
-    city: selectedOptions[1].text,
-    district: selectedOptions[2].text,
-  }]
-}
-
-function onDateTimePickerConfirm() {
-  showDatePicker.value = false
-  const dateStr = dateTimePickerValue.value.date.join('-')
-  const timeStr = dateTimePickerValue.value.time.join(':')
-  modelData.value = `${dateStr} ${timeStr}`
-}
-
-function onPickerCancel() {
-  showDatePicker.value = false
-}
-
-const showAddressPicker = ref(false)
-const addressValue = ref('')
-
-// XLocationPicker 默认加载的中心点
-const defaultMapCenter = computed(() => {
-  const lonLat = form[`${attr.model}_lon_lat`]
-  if (lonLat && typeof lonLat === 'string' && lonLat.includes(',')) {
-    const [lon, lat] = lonLat.split(',').map(Number)
-    if (!Number.isNaN(lon) && !Number.isNaN(lat)) {
-      return [lon, lat] as [number, number]
-    }
-  }
-  return undefined
-})
-
-// 处理地址选择器确认
-function handleAddressConfirm(location) {
-  // 构造新的数据格式
-  const formData = {
-    [`${attr.model}_lon_lat`]: `${location.longitude},${location.latitude}`,
-    [attr.model]: location.address,
-  }
-  // 更新表单数据
-  emits('setForm', formData)
-  showAddressPicker.value = false
-}
-
-// 重置方法，供父组件调用
-function reset() {
-  modelData.value = null
-  errorMessage.value = ''
-  treeValue.value = null
-  area.value = null
-  pickerValue.value = null
-}
-
-defineExpose({
-  reset,
-})
-
-// 数据处理
-function cleanEmptyChildren(options, fieldNames = { text: 'label', value: 'value', children: 'children' }) {
-  if (!Array.isArray(options))
-    return options
-
-  const childrenKey = fieldNames.children || 'children'
-
-  return options.map((option) => {
-    // 深拷贝选项，避免修改原始数据
-    const newOption = { ...option }
-
-    // 如果存在children属性且是空数组
-    if (newOption[childrenKey] && Array.isArray(newOption[childrenKey]) && newOption[childrenKey].length === 0) {
-      delete newOption[childrenKey]
-    }
-    // 如果存在children属性且非空，则递归处理
-    else if (newOption[childrenKey] && Array.isArray(newOption[childrenKey])) {
-      newOption[childrenKey] = cleanEmptyChildren(newOption[childrenKey], fieldNames)
-    }
-    return newOption
-  })
-}
-
-// 级联选择完成事件
-function onTreeSelectFinish({ selectedOptions }) {
-  const index = selectedOptions.length - 1
-  treeValue.value = selectedOptions[index].label
-  if (mode === '查询') {
-    modelData.value = [selectedOptions[index].value]
-  }
-  else {
-    modelData.value = selectedOptions[index].value
-  }
-  showTreeSelect.value = false
-}
-
-function emitFunc(func, data) {
-  emits('xFormItemEmitFunc', func, data, data?.model ? form[data.model] : form)
-}
-
-function findOptionInTree(options, value) {
-  // 在当前层级查找
-  const foundItem = options.find(item => item[columnsField.value] === value)
-  if (foundItem) {
-    return foundItem
-  }
-  // 递归查找子级
-  for (const item of options) {
-    if (item.children?.length) {
-      const foundInChildren = findOptionInTree(item.children, value)
-      if (foundInChildren)
-        return foundInChildren
-    }
-  }
-
-  return null
-}
-</script>
-
-<template>
-  <div>
-    <!-- switch开关 -->
-    <VanField
-      v-if="attr.type === 'switch' && showItem"
-      name="switch"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'right'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <VanSwitch v-model="modelData" />
-      </template>
-    </VanField>
-
-    <!-- 复选框 -->
-    <!--    <VanField
-      v-if="attr.type === 'checkbox'"
-      name="checkbox"
-      :label="labelData"
-    >
-      <template #input>
-        <VanCheckbox v-model="modelData" shape="square" />
-      </template>
-    </VanField> -->
-
-    <!-- 多选框-checkbox-复选框组  -->
-    <template v-if="attr.type === 'checkbox' && showItem">
-      <!--  勾选    -->
-      <VanField
-        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
-        name="checkboxGroup"
-        :label="labelData"
-        :label-align="labelAlign"
-        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-        :required="attr.rule.required === 'true'"
-      >
-        <template #input>
-          <van-checkbox-group v-model="modelData as any[]" direction="horizontal" shape="square" :disabled="readonly">
-            <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>
-          </van-checkbox-group>
-        </template>
-      </VanField>
-      <VanField
-        v-if="attr.showMode === 'checkbox' && mode === '查询'"
-        name="checkboxGroup"
-        :label="labelData"
-        :label-align="labelAlign"
-        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      >
-        <template #input>
-          <XGridDropOption
-            v-model="(modelData as string[])"
-            :column-num="labelData ? 3 : 4"
-            :multiple="true"
-            :columns="option"
-          />
-        </template>
-      </VanField>
-      <!--   下拉   -->
-      <XMultiSelect
-        v-if="attr.showMode === 'select' && mode === '查询'"
-        v-model="modelData"
-        :label="labelData"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        :columns="option"
-        :option="attr.option ? attr.option : columnsField"
-        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-        :required="attr.rule.required === 'true'"
-      />
-    </template>
-
-    <!-- 单选框 -->
-    <VanField
-      v-if="attr.type === 'radio' && mode !== '查询' && showItem"
-      name="radio"
-      center
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <VanRadioGroup v-model="modelData" direction="horizontal" :disabled="readonly">
-          <VanRadio v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :value="item[columnsField.value]">
-            {{ item[columnsField.text] }}
-          </VanRadio>
-        </VanRadioGroup>
-      </template>
-    </VanField>
-
-    <!-- 单选框-查询 -->
-    <VanField
-      v-if="attr.type === 'radio' && mode === '查询' && showItem"
-      name="radio"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-    >
-      <template #input>
-        <XGridDropOption
-          v-model="(modelData as string)"
-          :column-num="labelData ? 3 : 4"
-          :columns="option"
-        />
-      </template>
-    </VanField>
-
-    <!-- 步进器 -->
-    <VanField
-      v-if="attr.type === 'stepper' && showItem"
-      name="stepper"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <VanStepper v-model="modelData as any" :disabled="readonly" />
-      </template>
-    </VanField>
-
-    <!-- 评分 -->
-    <VanField
-      v-if="attr.type === 'rate' && showItem"
-      name="rate"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <VanRate v-model="modelData as number" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
-      </template>
-    </VanField>
-
-    <!-- 滑块 -->
-    <VanField
-      v-if="attr.type === 'slider' && showItem"
-      name="slider"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <VanSlider v-model="modelData as number" :readonly="readonly" />
-      </template>
-    </VanField>
-
-    <!-- 文件上传 -->
-    <!-- 图片上传, 手机端拍照 -->
-    <VanField
-      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
-      name="image"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    >
-      <template #input>
-        <ImageUploader
-          upload-mode="server"
-          :image-list="(modelData as any[])"
-          authority="admin"
-          :attr="attr"
-          :mode="props.mode"
-          @update-file-list="updateFile"
-        />
-      </template>
-    </VanField>
-
-    <!-- 选择器 琉璃中不存在,不进行维护后续将删除 -->
-    <VanField
-      v-if="attr.type === 'picker' && showItem"
-      v-model="pickerValue"
-      name="picker"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      readonly
-      is-link
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      @click="readonly ? null : showPicker = true"
-    />
-    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body" overlay-class="date-picker-overlay">
-      <VanPicker
-        v-model="(modelData as Numeric[])"
-        :title="attr.name"
-        :columns="attr.selectKey"
-        :readonly="readonly"
-        :columns-field-names="attr.customFieldName ? attr.customFieldName : { text: 'text', value: 'value', children: 'children' }"
-        :confirm-button-text="attr.confirmButtonText || attr.confirmButtonText === '' ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText || attr.cancelButtonText === '' ? attr.cancelButtonText : '取消'"
-        @cancel="showPicker = false"
-        @confirm="onPickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 日历选择-查询 -->
-    <VanField
-      v-if="attr.type === 'rangePicker' && mode === '查询' && showItem"
-      v-model="(pickerValue as string | number)"
-      is-link
-      readonly
-      name="rangePicker"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      @click="calendarShow = true"
-    />
-    <VanCalendar
-      v-model:show="calendarShow"
-      switch-mode="year-month"
-      type="range"
-      teleport="body"
-      overlay-class="date-picker-overlay"
-      :show-confirm="attr.showConfirm"
-      @confirm="onCalendarConfirm"
-    />
-
-    <!-- 日期选择-非查询 -->
-    <VanField
-      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
-      v-model="(modelData as string | number)"
-      name="datePicker"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      readonly
-      :is-link="true"
-      :placeholder="placeholder"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-      @click="readonly ? null : showDataTimePicker()"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
-      <VanPickerGroup
-        :title="attr.name"
-        :tabs="['选择日期', '选择时间']"
-        next-step-text="下一步"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        @confirm="onDateTimePickerConfirm"
-        @cancel="onPickerCancel"
-      >
-        <VanDatePicker
-          v-model="dateTimePickerValue.date"
-          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
-        />
-        <VanTimePicker
-          v-model="dateTimePickerValue.time"
-          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
-          :min-time="attr.minTime ? attr.minTime : '00:00:00'"
-          :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-        />
-      </VanPickerGroup>
-    </VanPopup>
-
-    <!-- 日期选择-查询 -->
-    <VanField
-      v-if="attr.type === 'datePicker' && mode === '查询' && showItem"
-      v-model="(modelData as string | number)"
-      name="datePicker"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      readonly
-      :is-link="true"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      @click="showDatePicker = true"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
-      <VanPickerGroup
-        :title="attr.name"
-        :tabs="['选择日期', '选择时间']"
-        next-step-text="下一步"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        @confirm="onDateTimePickerConfirm"
-        @cancel="onPickerCancel"
-      >
-        <VanDatePicker
-          v-model="dateTimePickerValue.date"
-          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
-        />
-        <VanTimePicker
-          v-model="dateTimePickerValue.time"
-          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
-          :min-time="attr.minTime ? attr.minTime : '00:00:00'"
-          :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-        />
-      </VanPickerGroup>
-    </VanPopup>
-
-    <!-- 时间选择 --该配置未在pc找到不进行维护 后续将删除 -->
-    <VanField
-      v-if="attr.type === 'timePicker' && showItem"
-      v-model="timePickerValue"
-      name="timePicker"
-      is-link
-      readonly
-      :placeholder="attr.placeholder"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="showTimePicker = true"
-    />
-    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
-      <VanTimePicker
-        v-model="modelData as string[]"
-        :title="attr.name"
-        :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
-        :min-time="attr.minTime ? attr.minTime : '00:00:00'"
-        :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-        :readonly="readonly"
-        @cancel="showTimePicker = false"
-        @confirm="onTimePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 省市区选择 -->
-    <VanField
-      v-if="(attr.type === 'area' || attr.type === 'citySelect') && showItem"
-      v-model="area"
-      name="area"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      is-link
-      readonly
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      :required="attr.rule.required === 'true'"
-      @click="readonly ? null : showArea = true"
-    />
-    <VanPopup v-model:show="showArea" position="bottom" teleport="body" overlay-class="date-picker-overlay">
-      <VanArea
-        v-model="modelData as string" :title="attr.name" :area-list="areaList"
-        @confirm="onAreaConfirm"
-        @cancel="showArea = false"
-      />
-    </VanPopup>
-
-    <!-- 单选下拉列表 -->
-    <XSelect
-      v-if="attr.type === 'select' && showItem"
-      v-model="modelData"
-      :label="labelData"
-      :readonly="readonly"
-      clearable
-      :placeholder="placeholder"
-      :columns="option"
-      :option="attr.option ? attr.option : columnsField"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    />
-
-    <!-- 文本区域 -->
-    <VanField
-      v-if="attr.type === 'textarea' && showItem"
-      v-model="(modelData as string)"
-      rows="3"
-      autosize
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      type="textarea"
-      :readonly="readonly"
-      :maxlength="attr.maxlength ? attr.maxlength : 200"
-      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
-      show-word-limit
-      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-    />
-
-    <!-- 文本输入框 -->
-    <VanField
-      v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
-      v-model="(modelData as string)"
-      style="align-items: center"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :type="attr.type as FieldType"
-      :readonly="readonly"
-      :disabled="attr.disabled"
-      :placeholder="placeholder"
-      :error-message="errorMessage"
-      :clearable="attr.clearable"
-      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-      @blur="() => formTypeCheck(attr, modelData as string)"
-    >
-      <template #input>
-        <input
-          :value="modelData"
-          :readonly="readonly"
-          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
-      v-if="attr.type === 'addressSearch' && showItem"
-      v-model="modelData as string"
-      name="addressSearch"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      readonly
-      is-link
-      :placeholder="placeholder"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择地址' }]"
-      :required="attr.rule.required === 'true'"
-      @click="readonly ? null : showAddressPicker = true"
-    />
-    <VanPopup
-      v-model:show="showAddressPicker"
-      position="bottom"
-      :style="{ height: '80vh' }"
-      teleport="body"
-      overlay-class="date-picker-overlay"
-    >
-      <XLocationPicker
-        :default-center="defaultMapCenter"
-        :service-name="serviceName"
-        @confirm="handleAddressConfirm"
-      />
-    </VanPopup>
-
-    <!--  pc的树形选择框————》 手机端采用 Cascader 级联选择  -->
-    <VanField
-      v-if="attr.type === 'treeSelect' && showItem"
-      v-model="treeValue"
-      name="treeSelect"
-      :label="labelData"
-      :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      readonly
-      is-link
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      :required="attr.rule.required === 'true'"
-      @click="readonly ? null : showTreeSelect = true"
-    />
-    <VanPopup
-      v-model:show="showTreeSelect"
-      position="bottom"
-      teleport="body"
-      overlay-class="date-picker-overlay"
-    >
-      <VanCascader
-        :options="cleanEmptyChildren(option, attr.customFieldName ? attr.customFieldName : { text: 'label', value: 'value', children: 'children' })"
-        :field-names="attr.customFieldName ? attr.customFieldName : { text: 'label', value: 'value', children: 'children' }"
-        :title="attr.name"
-        :closeable="true"
-        @close="showTreeSelect = false"
-        @finish="onTreeSelectFinish"
-      />
-    </VanPopup>
-  </div>
-</template>
-
-<style scoped>
-.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>
+<script setup lang="ts">
+import type { FieldType } from 'vant'
+import type { Numeric } from 'vant/es/utils'
+import ImageUploader from '@af-mobile-client-vue3/components/core/ImageUploader/index.vue'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+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 { 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'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
+import { areaList } from '@vant/area-data'
+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,
+  CheckboxGroup as vanCheckboxGroup,
+  DatePicker as VanDatePicker,
+  Field as VanField,
+  Picker as VanPicker,
+  PickerGroup as VanPickerGroup,
+  Popup as VanPopup,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+  Rate as VanRate,
+  Slider as VanSlider,
+  Stepper as VanStepper,
+  Switch as VanSwitch,
+  TimePicker as VanTimePicker,
+} from 'vant'
+import { computed, defineEmits, defineModel, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+
+const props = defineProps({
+  attr: {
+    type: Object,
+  },
+  form: {
+    type: Object,
+  },
+  datePickerFilter: {
+    type: Function,
+    default: () => true,
+  },
+  datePickerFormatter: {
+    type: Function,
+    default: (type, val) => val,
+  },
+  mode: {
+    type: String,
+    default: '查询',
+  },
+  serviceName: {
+    type: String,
+    default: undefined,
+  },
+  // 调用logic获取数据源的追加参数
+  getDataParams: {
+    type: Object,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Object,
+    default: () => {},
+  },
+  // 用 defineModel 替代 modelValue/emit
+  modelValue: {
+    type: [String, Number, Boolean, Array, Object],
+    default: undefined,
+  },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  // radio/checkbox/select/mul-select 选项数据结构
+  columnsField: {
+    type: Object,
+    default: () => {
+      return { text: 'label', value: 'value' }
+    },
+  },
+
+})
+
+const emits = defineEmits(['setForm', 'xFormItemEmitFunc'])
+
+// 用 defineModel 替代 modelValue/emit
+const modelData = defineModel<string | number | boolean | any[] | Record<string, any>>()
+
+// 获取字典
+interface OptionItem {
+  label: string
+  value: any
+  children?: OptionItem[]
+}
+
+// 判断并初始化防抖函数
+let debouncedUserLinkFunc: (() => void) | null = null
+let debouncedDepLinkFunc: (() => void) | null = null
+let debouncedUpdateOptions: (() => void) | null = null
+
+const { attr, form, mode, serviceName, getDataParams, columnsField } = props
+const calendarShow = ref(false)
+const option = ref([])
+const pickerValue = ref(undefined)
+const timePickerValue = ref(undefined)
+const area = ref<any>(undefined)
+const showPicker = ref(false)
+const showDatePicker = ref(false)
+const showTimePicker = ref(false)
+const showArea = ref(false)
+const errorMessage = ref('')
+const showTreeSelect = ref(false)
+const treeValue = ref('')
+
+// 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
+const userState = useUserStore().getLogin()
+const currUser = computed(() => userState.f.resources.id)
+const userInfo = computed(() => ({
+  orgId: userState.f.resources.orgid,
+  userId: userState.f.resources.id,
+}))
+
+// 是否展示当前项
+const showItem = ref(true)
+
+// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
+const currInst = getCurrentInstance()
+
+// 配置中心->表单项变更触发函数
+async function dataChangeFunc() {
+  if (attr.dataChangeFunc) {
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [props.form, (formData: any) => emits('setForm', formData), attr, null, mode, runLogic, getConfigByNameAsync])
+  }
+}
+const dataChangeFuncdebounce = debounce(dataChangeFunc, 300)
+// 配置中心->表单项展示函数
+async function showFormItemFunc() {
+  if (attr.showFormItemFunc) {
+    const obj = await executeStrFunctionByContext(currInst, attr.showFormItemFunc, [form, attr, null, mode])
+    // 判断是 bool 还是  obj  兼容
+    if (typeof obj === 'boolean') {
+      showItem.value = obj
+    }
+    else if (obj && typeof obj === 'object') {
+      // obj 是一个对象，并且不是数组
+      showItem.value = obj?.show
+    }
+  }
+}
+const showFormItemFuncdebounce = debounce(showFormItemFunc, 300)
+/**
+ * 检测是否传入了有效的值
+ * @returns any
+ */
+function checkModel(val = props.modelValue) {
+  if (val === null || val === undefined || val === '')
+    return false
+  if (Array.isArray(val))
+    return val.length > 0
+  return true
+}
+/**
+ * 获取表单项的默认值
+ * @returns any
+ */
+function getDefaultValue() {
+  const val = props.modelValue
+
+  // 如果有有效值，直接返回
+  if (checkModel(val)) {
+    return val
+  }
+
+  // 根据类型获取默认值
+  const getDefaultByType = () => {
+    const def = mode !== '查询' ? attr.formDefault : attr.queryFormDefault
+
+    if (['treeSelect', 'select', 'checkbox'].includes(attr.type) && ['curOrgId', 'curDepId', 'curUserId'].includes(def)) {
+      if (def === 'curOrgId') {
+        if (attr.type === 'treeSelect') {
+          treeValue.value = userState.f.resources.orgs
+        }
+        return attr.type === 'select' ? userState.f.resources.orgid : [userState.f.resources.orgid]
+      }
+      if (def === 'curDepId') {
+        if (attr.type === 'treeSelect') {
+          treeValue.value = userState.f.resources.deps
+        }
+        return attr.type === 'select' ? userState.f.resources.depids : [userState.f.resources.depids]
+      }
+      if (def === 'curUserId') {
+        if (attr.type === 'treeSelect') {
+          treeValue.value = userState.f.resources.name
+        }
+        return attr.type === 'select' ? userState.f.resources.id : [userState.f.resources.id]
+      }
+    }
+
+    // 数组类型默认值
+    const arrayTypes = ['uploader', 'checkbox', 'file', 'area', 'image', 'treeSelect']
+    if (arrayTypes.includes(attr.type)) {
+      return def !== undefined ? def : []
+    }
+
+    // 特殊类型默认值
+    const specialDefaults = {
+      switch: false,
+      stepper: 1,
+      addressSearch: val,
+    }
+
+    if (specialDefaults[attr.type] !== undefined) {
+      return specialDefaults[attr.type]
+    }
+
+    // 日期时间类型
+    const dateTypes = ['rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker', 'datePicker', 'timePicker']
+    if (dateTypes.includes(attr.type)) {
+      return getDateRange({
+        type: attr.type,
+        formDefault: attr.formDefault ?? '',
+        queryFormDefault: attr.queryFormDefault ?? '',
+        queryType: attr.queryType,
+        queryValueFormat: attr.queryValueFormat,
+        name: attr.name ?? '',
+      }) ?? []
+    }
+
+    // 其他类型（字符串、数字等）
+    return def ?? ''
+  }
+
+  return getDefaultByType()
+}
+
+// 初始化日期组件初始值，组件自定义格式显示值和实际值（日期相关初始化都在此函数中操作）
+function getDateRange({
+  type,
+  formDefault: defaultValue,
+  queryFormDefault,
+  queryType,
+  queryValueFormat: defaultFormat,
+  name,
+}: {
+  type: string
+  formDefault: string
+  queryFormDefault: string
+  queryType?: string
+  queryValueFormat?: string
+  name: string
+}): string | [string, string] | undefined {
+  const formatMap: Record<string, string> = {
+    yearPicker: 'YYYY',
+    yearRangePicker: 'YYYY',
+    monthPicker: 'YYYY-MM',
+    monthRangePicker: 'YYYY-MM',
+    datePicker: 'YYYY-MM-DD HH:mm:ss',
+    rangePicker: 'YYYY-MM-DD HH:mm:ss',
+  }
+  if (mode) {
+    const format = defaultFormat || formatMap[type]
+    const val = mode === '查询' ? queryFormDefault : defaultValue
+    let start: string, end: string
+    switch (val) {
+      case 'curYear':
+        start = dayjs().startOf('year').format(format)
+        end = dayjs().endOf('year').format(format)
+        break
+      case 'curMonth':
+        start = dayjs().startOf('month').format(format)
+        end = dayjs().endOf('month').format(format)
+        break
+      case 'curDay':
+        start = dayjs().startOf('day').format(format)
+        end = dayjs().endOf('day').format(format)
+        break
+      case 'curTime':
+        start = dayjs().format(format)
+        end = dayjs().format(format)
+        break
+      default:
+        return undefined
+    }
+    if (['monthPicker', 'yearPicker', 'datePicker'].includes(type)) {
+      if (mode !== '查询') {
+        if (queryType === 'BETWEEN') {
+          return [start, end]
+        }
+        if (name.includes('开始') || name.includes('起始')) {
+          return start
+        }
+        else {
+          return end
+        }
+      }
+      else {
+        return start
+      }
+    }
+    // rangePicker组件表单显示的值
+    if (mode === '查询' && type === 'rangePicker') {
+      pickerValue.value = `${start} ~ ${end}`
+    }
+    return mode !== '查询' ? start : [start, end]
+  }
+  else {
+    return undefined
+  }
+}
+
+// 监听 props.form 的变化
+watch(
+  () => props.form,
+  (newVal, oldVal) => {
+    // 如果是从函数获取 options
+    if (props.attr.keyName && (props.attr.keyName.toString().includes('async ') || props.attr.keyName.toString().includes('function'))) {
+      debouncedUpdateOptions()
+    }
+    if (props.attr.showFormItemFunc) {
+      showFormItemFuncdebounce()
+    }
+  },
+  { deep: true },
+)
+
+// 监听 modelData 的变化，调用 dataChangeFunc
+watch(
+  () => modelData.value,
+  (newVal, oldVal) => {
+    // 避免初始化时的调用
+    if (newVal !== oldVal) {
+      dataChangeFuncdebounce()
+    }
+  },
+  { deep: true },
+)
+
+// 监听 option.value 的变化
+watch(
+  () => option.value,
+  (newOption) => {
+    if (attr.type === 'treeSelect' && newOption && newOption.length > 0) {
+      // 你可以在这里调用 findOptionInTree 函数来查找默认值对应的 label
+      const result = findOptionInTree(option.value, modelData.value)
+      if (attr.type === 'treeSelect' && result)
+        treeValue.value = result.label
+    }
+  },
+)
+
+function updateFile(files, _index) {
+  modelData.value = files
+}
+
+// 表单校验的类型校验
+function formTypeCheck(attr, value) {
+  if (mode === '查询')
+    return
+  if (!attr.rule || !attr.rule.required || attr.rule.required === 'false')
+    return
+  switch (attr.rule.type) {
+    case 'string':
+      if (value.length === 0) {
+        errorMessage.value = `请输入${attr.name}`
+        return
+      }
+      break
+    case 'number':
+      if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为数字`
+        return
+      }
+      break
+    case 'boolean':
+    case 'array':
+    case 'regexp':
+      if (value) {
+        errorMessage.value = ''
+        return
+      }
+      break
+    case 'integer':
+      if (!/^-?\d+$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为整数`
+        return
+      }
+      break
+    case 'float':
+      if (!/^-?\d+\.\d+$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为小数`
+        return
+      }
+      break
+    case 'email':
+      if (!/^[\w.%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(value)) {
+        errorMessage.value = `请输入正确的邮箱地址`
+        return
+      }
+      break
+    case 'idNumber':
+      if (!/^(?:\d{15}|\d{17}[0-9X])$/.test(value)) {
+        errorMessage.value = `请输入正确的身份证号码`
+        return
+      }
+      break
+    case 'userPhone':
+      if (!/^1[3-9]\d{9}$/.test(value)) {
+        errorMessage.value = `请输入正确的手机号码`
+        return
+      }
+      break
+    case 'landlineNumber':
+      if (!/^0\d{2,3}[-\s]?\d{7,8}$/.test(value)) {
+        errorMessage.value = `请输入正确的座机号码`
+        return
+      }
+      break
+    case 'greaterThanZero':
+      if (!/^(?:[1-9]\d*(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
+        errorMessage.value = `请输入一个大于0的数字`
+        return
+      }
+      break
+    case 'greaterThanOrEqualZero':
+      if (!/^(?:\d+|\d*\.\d+)$/.test(value)) {
+        errorMessage.value = `请输入一个大于等于0的数字`
+        return
+      }
+      break
+    case 'stringLength':
+      if (!(value.length >= attr.rule.minLen && value.length < attr.rule.maxLen)) {
+        errorMessage.value = `长度必须在${attr.rule.minLen}~${attr.rule.maxLen}之间`
+        return
+      }
+      break
+    case 'customJs':
+      // eslint-disable-next-line no-case-declarations
+      const funcStr = attr.rule.customValidatorFunc
+      // 输入的数据是否符合条件
+      // eslint-disable-next-line no-case-declarations
+      const status = ref(true)
+      // 提取函数体部分
+      // eslint-disable-next-line no-case-declarations
+      const funcBodyMatch = funcStr.match(/function\s*\(.*?\)\s*\{([\s\S]*)\}/)
+      if (!funcBodyMatch)
+        throw new Error('自定义校验函数不合法')
+      // eslint-disable-next-line no-case-declarations
+      const funcBody = funcBodyMatch[1].trim() // 提取函数体
+      // 使用 new Function 创建函数
+      // eslint-disable-next-line no-new-func,no-case-declarations
+      const customValidatorFunc = new Function('rule', 'value', 'callback', 'form', 'attr', 'util', funcBody)
+      // 定义 callback 函数
+      // eslint-disable-next-line no-case-declarations
+      const callback = (error) => {
+        if (error) {
+          errorMessage.value = `${error}`
+          status.value = false // 表示有错误发生
+        }
+      }
+      // 调用自定义校验函数
+      customValidatorFunc(
+        attr.rule,
+        value,
+        callback,
+        form,
+        attr,
+        {}, // util 对象（可以根据需要传递）
+      )
+      if (!status.value)
+        return
+      break
+    default:
+      errorMessage.value = ''
+      break
+  }
+  errorMessage.value = ''
+}
+
+onBeforeMount(() => {
+  init()
+  modelData.value = getDefaultValue()
+  showFormItemFunc()
+  dataChangeFunc()
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
+    debouncedUserLinkFunc = debounce(() => updateResOptions('人员'), 200)
+
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
+    debouncedDepLinkFunc = debounce(() => updateResOptions('部门'), 200)
+
+  if (attr.keyName && (attr?.keyName?.toString().indexOf('async ') !== -1 || attr?.keyName?.toString()?.indexOf('function') !== -1)) {
+    debouncedUpdateOptions = debounce(updateOptions, 200)
+  }
+})
+// 是否展示表单左侧label文字
+const labelData = computed(() => {
+  return props.showLabel ? attr.name : null
+})
+// 是否展示表单左侧label文字
+const labelAlign = computed(() => {
+  return attr.labelAlign ? attr.labelAlign : 'left'
+})
+// 是否只读
+const readonly = computed(() => {
+  return attr.addOrEdit === 'readonly' || mode === '预览'
+})
+// 提示内容
+const placeholder = computed(() => {
+  if (attr.addOrEdit === 'readonly')
+    return '暂无内容 ~ '
+  else
+    return attr.placeholder ? attr.placeholder : `请选择${attr.name}`
+})
+
+const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+
+function onCalendarConfirm(values) {
+  modelData.value = [formatDate(values[0]), formatDate(values[1])]
+  pickerValue.value = `${formatDate(values[0])} ~ ${formatDate(values[1])}`
+  calendarShow.value = false
+}
+
+// js 函数作为数据源
+async function updateOptions() {
+  if (attr.keyName && (attr.keyName.toString().includes('async ') || attr.keyName.toString().includes('function '))) {
+    option.value = await executeStrFunctionByContext(this, attr.keyName, [props.form, runLogic, props.mode, getConfigByNameAsync, post])
+  }
+}
+
+function init() {
+  if (attr.keyName && typeof attr.keyName === 'string') {
+    if (attr.keyName && attr.keyName.includes('logic@')) {
+      getData({}, (res) => {
+        option.value = res
+        initRadioValue()
+      })
+    }
+    else if (attr.keyName && attr.keyName.includes('config@')) {
+      const configName = attr.keyName.substring(7)
+      getDict(configName, (result) => {
+        if (result)
+          option.value = result
+      }, serviceName)
+    }
+    else if (attr.keyName && attr.keyName.includes('search@')) {
+      let source = attr.keyName.substring(7)
+      const userid = currUser.value
+      let roleName = 'roleName'
+      if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
+        const startIndex = source.indexOf('[') + 1
+        const endIndex = source.indexOf(']', startIndex)
+        roleName = source.substring(startIndex, endIndex)
+        source = '根据角色获取人员'
+      }
+      const searchData = { source, userid, roleName }
+      if (source.startsWith('根据表单项[') && source.endsWith(']联动人员'))
+        updateResOptions('人员')
+      else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门'))
+        updateResOptions('部门')
+      else if (attr.type === 'select' || attr.type === 'checkbox')
+        searchToListOption(searchData, res => getDataCallback(res))
+      else
+        searchToOption(searchData, res => getDataCallback(res))
+    }
+    else if (attr.keyName.toString().includes('async ') || attr.keyName.toString().includes('function ')) {
+      updateOptions()
+    }
+    else {
+      initRadioValue()
+    }
+  }
+}
+
+function getDataCallback(res) {
+  option.value = res.map(item => ({
+    ...item,
+    value: item.label, // 将value设置为label的值
+  }))
+  if (attr.type === 'radio')
+    initRadioValue()
+}
+
+async function updateResOptions(type) {
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString()?.endsWith(`]联动${type}`)) {
+    const searchData = { source: `获取${type}`, userid: currUser.value }
+    const startIndex = attr.keyName.indexOf('[') + 1
+    const endIndex = attr.keyName.indexOf(']', startIndex)
+    const formModel = attr.keyName.substring(startIndex, endIndex).replace('.', '_')
+    const formModelData = form[formModel]
+    if (formModel?.length && formModelData?.length) {
+      await searchToListOption(searchData, (res) => {
+        getDataCallback(res.filter((h) => {
+          return formModelData['0'] === h.f_organization_id || formModelData['0'] === h.f_department_id || formModelData['0'] === h.parentid
+          // if (formModel.indexOf('org') > -1) {
+          //   return formModelData?.includes(h.orgid || h.f_organization_id || h.parentid)
+          // } else {
+          //   return formModelData?.includes(h?.parentid)
+          // }
+        }))
+      })
+    }
+  }
+}
+
+function initRadioValue() {
+  if ((mode === '新增' || mode === '修改') && attr.type === 'radio' && !props.modelValue) {
+    if (attr.keys && attr.keys.length > 0)
+      modelData.value = attr.keys[0].value
+    else if (option.value && option.value.length > 0)
+      modelData.value = option.value[0].value
+  }
+}
+
+function getData(value, callback) {
+  if (value !== '') {
+    const logicName = attr.keyName
+    const logic = logicName.substring(6)
+    // 调用logic前设置参数
+    if (getDataParams && getDataParams[attr.model])
+      Object.assign(value, getDataParams[attr.model])
+    Object.assign(value, userInfo.value)
+    runLogic(logic, value, serviceName).then((res) => {
+      callback(res)
+    })
+  }
+}
+
+// 已废弃 不进行维护
+function onPickerConfirm({ selectedOptions }) {
+  showPicker.value = false
+  modelData.value = selectedOptions[0].text
+}
+
+// 日期时间选择数据
+const dateTimePickerValue = ref<any>({})
+function showDataTimePicker() {
+  if (props.modelValue && typeof props.modelValue === 'string') {
+    // 拆分日期和时间
+    const [dateStr, timeStr] = props.modelValue.split(' ')
+    // 拆分日期部分
+    const date = dateStr.split('-')
+    // 拆分时间部分
+    const time = timeStr.split(':')
+    // 赋值给 dateTimePickerValue
+    dateTimePickerValue.value = {
+      date,
+      time,
+    }
+  }
+  else {
+    dateTimePickerValue.value = {
+      date: formatDate(new Date()).split('-'),
+      time: ['00', '00', '00'],
+    }
+  }
+  showDatePicker.value = true
+}
+
+function onDatePickerConfirm({ selectedValues }) {
+  showDatePicker.value = false
+  modelData.value = selectedValues.join('-')
+}
+
+// 已废弃 不进行维护
+function onTimePickerConfirm({ selectedValues }) {
+  showTimePicker.value = false
+  timePickerValue.value = selectedValues.join(':')
+  modelData.value = timePickerValue.value
+}
+
+// 没人用到本次先不动。后续需要看这个组件需要怎么使用
+function onAreaConfirm({ selectedOptions }) {
+  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
+  showArea.value = false
+  modelData.value = [{
+    province: selectedOptions[0].text,
+    city: selectedOptions[1].text,
+    district: selectedOptions[2].text,
+  }]
+}
+
+function onDateTimePickerConfirm() {
+  showDatePicker.value = false
+  const dateStr = dateTimePickerValue.value.date.join('-')
+  const timeStr = dateTimePickerValue.value.time.join(':')
+  modelData.value = `${dateStr} ${timeStr}`
+}
+
+function onPickerCancel() {
+  showDatePicker.value = false
+}
+
+const showAddressPicker = ref(false)
+const addressValue = ref('')
+
+// XLocationPicker 默认加载的中心点
+const defaultMapCenter = computed(() => {
+  const lonLat = form[`${attr.model}_lon_lat`]
+  if (lonLat && typeof lonLat === 'string' && lonLat.includes(',')) {
+    const [lon, lat] = lonLat.split(',').map(Number)
+    if (!Number.isNaN(lon) && !Number.isNaN(lat)) {
+      return [lon, lat] as [number, number]
+    }
+  }
+  return undefined
+})
+
+// 处理地址选择器确认
+function handleAddressConfirm(location) {
+  // 构造新的数据格式
+  const formData = {
+    [`${attr.model}_lon_lat`]: `${location.longitude},${location.latitude}`,
+    [attr.model]: location.address,
+  }
+  // 更新表单数据
+  emits('setForm', formData)
+  showAddressPicker.value = false
+}
+
+// 重置方法，供父组件调用
+function reset() {
+  modelData.value = null
+  errorMessage.value = ''
+  treeValue.value = null
+  area.value = null
+  pickerValue.value = null
+}
+
+defineExpose({
+  reset,
+})
+
+// 数据处理
+function cleanEmptyChildren(options, fieldNames = { text: 'label', value: 'value', children: 'children' }) {
+  if (!Array.isArray(options))
+    return options
+
+  const childrenKey = fieldNames.children || 'children'
+
+  return options.map((option) => {
+    // 深拷贝选项，避免修改原始数据
+    const newOption = { ...option }
+
+    // 如果存在children属性且是空数组
+    if (newOption[childrenKey] && Array.isArray(newOption[childrenKey]) && newOption[childrenKey].length === 0) {
+      delete newOption[childrenKey]
+    }
+    // 如果存在children属性且非空，则递归处理
+    else if (newOption[childrenKey] && Array.isArray(newOption[childrenKey])) {
+      newOption[childrenKey] = cleanEmptyChildren(newOption[childrenKey], fieldNames)
+    }
+    return newOption
+  })
+}
+
+// 级联选择完成事件
+function onTreeSelectFinish({ selectedOptions }) {
+  const index = selectedOptions.length - 1
+  treeValue.value = selectedOptions[index].label
+  if (mode === '查询') {
+    modelData.value = [selectedOptions[index].value]
+  }
+  else {
+    modelData.value = selectedOptions[index].value
+  }
+  showTreeSelect.value = false
+}
+
+function emitFunc(func, data) {
+  emits('xFormItemEmitFunc', func, data, data?.model ? form[data.model] : form)
+}
+
+function findOptionInTree(options, value) {
+  // 在当前层级查找
+  const foundItem = options.find(item => item[columnsField.value] === value)
+  if (foundItem) {
+    return foundItem
+  }
+  // 递归查找子级
+  for (const item of options) {
+    if (item.children?.length) {
+      const foundInChildren = findOptionInTree(item.children, value)
+      if (foundInChildren)
+        return foundInChildren
+    }
+  }
+
+  return null
+}
+</script>
+
+<template>
+  <div>
+    <!-- switch开关 -->
+    <VanField
+      v-if="attr.type === 'switch' && showItem"
+      name="switch"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'right'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <VanSwitch v-model="modelData" />
+      </template>
+    </VanField>
+
+    <!-- 复选框 -->
+    <!--    <VanField
+      v-if="attr.type === 'checkbox'"
+      name="checkbox"
+      :label="labelData"
+    >
+      <template #input>
+        <VanCheckbox v-model="modelData" shape="square" />
+      </template>
+    </VanField> -->
+
+    <!-- 多选框-checkbox-复选框组  -->
+    <template v-if="attr.type === 'checkbox' && showItem">
+      <!--  勾选    -->
+      <VanField
+        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
+        name="checkboxGroup"
+        :label="labelData"
+        :label-align="labelAlign"
+        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+        :required="attr.rule.required === 'true'"
+      >
+        <template #input>
+          <van-checkbox-group v-model="modelData as any[]" direction="horizontal" shape="square" :disabled="readonly">
+            <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>
+          </van-checkbox-group>
+        </template>
+      </VanField>
+      <VanField
+        v-if="attr.showMode === 'checkbox' && mode === '查询'"
+        name="checkboxGroup"
+        :label="labelData"
+        :label-align="labelAlign"
+        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      >
+        <template #input>
+          <XGridDropOption
+            v-model="(modelData as string[])"
+            :column-num="labelData ? 3 : 4"
+            :multiple="true"
+            :columns="option"
+          />
+        </template>
+      </VanField>
+      <!--   下拉   -->
+      <XMultiSelect
+        v-if="attr.showMode === 'select' && mode === '查询'"
+        v-model="modelData"
+        :label="labelData"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :columns="option"
+        :option="attr.option ? attr.option : columnsField"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+        :required="attr.rule.required === 'true'"
+      />
+    </template>
+
+    <!-- 单选框 -->
+    <VanField
+      v-if="attr.type === 'radio' && mode !== '查询' && showItem"
+      name="radio"
+      center
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <VanRadioGroup v-model="modelData" direction="horizontal" :disabled="readonly">
+          <VanRadio v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :value="item[columnsField.value]">
+            {{ item[columnsField.text] }}
+          </VanRadio>
+        </VanRadioGroup>
+      </template>
+    </VanField>
+
+    <!-- 单选框-查询 -->
+    <VanField
+      v-if="attr.type === 'radio' && mode === '查询' && showItem"
+      name="radio"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+    >
+      <template #input>
+        <XGridDropOption
+          v-model="(modelData as string)"
+          :column-num="labelData ? 3 : 4"
+          :columns="option"
+        />
+      </template>
+    </VanField>
+
+    <!-- 步进器 -->
+    <VanField
+      v-if="attr.type === 'stepper' && showItem"
+      name="stepper"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <VanStepper v-model="modelData as any" :disabled="readonly" />
+      </template>
+    </VanField>
+
+    <!-- 评分 -->
+    <VanField
+      v-if="attr.type === 'rate' && showItem"
+      name="rate"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <VanRate v-model="modelData as number" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
+      </template>
+    </VanField>
+
+    <!-- 滑块 -->
+    <VanField
+      v-if="attr.type === 'slider' && showItem"
+      name="slider"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <VanSlider v-model="modelData as number" :readonly="readonly" />
+      </template>
+    </VanField>
+
+    <!-- 文件上传 -->
+    <!-- 图片上传, 手机端拍照 -->
+    <VanField
+      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
+      name="image"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    >
+      <template #input>
+        <ImageUploader
+          upload-mode="server"
+          :image-list="(modelData as any[])"
+          authority="admin"
+          :attr="attr"
+          :mode="props.mode"
+          @update-file-list="updateFile"
+        />
+      </template>
+    </VanField>
+
+    <!-- 选择器 琉璃中不存在,不进行维护后续将删除 -->
+    <VanField
+      v-if="attr.type === 'picker' && showItem"
+      v-model="pickerValue"
+      name="picker"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      is-link
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      @click="readonly ? null : showPicker = true"
+    />
+    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body" overlay-class="date-picker-overlay">
+      <VanPicker
+        v-model="(modelData as Numeric[])"
+        :title="attr.name"
+        :columns="attr.selectKey"
+        :readonly="readonly"
+        :columns-field-names="attr.customFieldName ? attr.customFieldName : { text: 'text', value: 'value', children: 'children' }"
+        :confirm-button-text="attr.confirmButtonText || attr.confirmButtonText === '' ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText || attr.cancelButtonText === '' ? attr.cancelButtonText : '取消'"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 日历选择-查询 -->
+    <VanField
+      v-if="attr.type === 'rangePicker' && mode === '查询' && showItem"
+      v-model="(pickerValue as string | number)"
+      is-link
+      readonly
+      name="rangePicker"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      @click="calendarShow = true"
+    />
+    <VanCalendar
+      v-model:show="calendarShow"
+      switch-mode="year-month"
+      type="range"
+      teleport="body"
+      overlay-class="date-picker-overlay"
+      :show-confirm="attr.showConfirm"
+      @confirm="onCalendarConfirm"
+    />
+
+    <!-- 日期选择-非查询 -->
+    <VanField
+      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
+      v-model="(modelData as string | number)"
+      name="datePicker"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      :is-link="true"
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+      @click="readonly ? null : showDataTimePicker()"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
+      <VanPickerGroup
+        :title="attr.name"
+        :tabs="['选择日期', '选择时间']"
+        next-step-text="下一步"
+        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
+        @confirm="onDateTimePickerConfirm"
+        @cancel="onPickerCancel"
+      >
+        <VanDatePicker
+          v-model="dateTimePickerValue.date"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
+        />
+        <VanTimePicker
+          v-model="dateTimePickerValue.time"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
+          :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+          :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+        />
+      </VanPickerGroup>
+    </VanPopup>
+
+    <!-- 日期选择-查询 -->
+    <VanField
+      v-if="attr.type === 'datePicker' && mode === '查询' && showItem"
+      v-model="(modelData as string | number)"
+      name="datePicker"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      :is-link="true"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      @click="showDatePicker = true"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
+      <VanPickerGroup
+        :title="attr.name"
+        :tabs="['选择日期', '选择时间']"
+        next-step-text="下一步"
+        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
+        @confirm="onDateTimePickerConfirm"
+        @cancel="onPickerCancel"
+      >
+        <VanDatePicker
+          v-model="dateTimePickerValue.date"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
+        />
+        <VanTimePicker
+          v-model="dateTimePickerValue.time"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
+          :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+          :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+        />
+      </VanPickerGroup>
+    </VanPopup>
+
+    <!-- 时间选择 --该配置未在pc找到不进行维护 后续将删除 -->
+    <VanField
+      v-if="attr.type === 'timePicker' && showItem"
+      v-model="timePickerValue"
+      name="timePicker"
+      is-link
+      readonly
+      :placeholder="attr.placeholder"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="showTimePicker = true"
+    />
+    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
+      <VanTimePicker
+        v-model="modelData as string[]"
+        :title="attr.name"
+        :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
+        :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+        :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+        :readonly="readonly"
+        @cancel="showTimePicker = false"
+        @confirm="onTimePickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 省市区选择 -->
+    <VanField
+      v-if="(attr.type === 'area' || attr.type === 'citySelect') && showItem"
+      v-model="area"
+      name="area"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      is-link
+      readonly
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :required="attr.rule.required === 'true'"
+      @click="readonly ? null : showArea = true"
+    />
+    <VanPopup v-model:show="showArea" position="bottom" teleport="body" overlay-class="date-picker-overlay">
+      <VanArea
+        v-model="modelData as string" :title="attr.name" :area-list="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showArea = false"
+      />
+    </VanPopup>
+
+    <!-- 单选下拉列表 -->
+    <XSelect
+      v-if="attr.type === 'select' && showItem"
+      v-model="modelData"
+      :label="labelData"
+      :readonly="readonly"
+      clearable
+      :placeholder="placeholder"
+      :columns="option"
+      :option="attr.option ? attr.option : columnsField"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    />
+
+    <!-- 文本区域 -->
+    <VanField
+      v-if="attr.type === 'textarea' && showItem"
+      v-model="(modelData as string)"
+      rows="3"
+      autosize
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      type="textarea"
+      :readonly="readonly"
+      :maxlength="attr.maxlength ? attr.maxlength : 200"
+      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
+      show-word-limit
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+    />
+
+    <!-- 文本输入框 -->
+    <VanField
+      v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
+      v-model="(modelData as string)"
+      style="align-items: center"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      :type="attr.type as FieldType"
+      :readonly="readonly"
+      :disabled="attr.disabled"
+      :placeholder="placeholder"
+      :error-message="errorMessage"
+      :clearable="attr.clearable"
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+      @blur="() => formTypeCheck(attr, modelData as string)"
+    >
+      <template #input>
+        <input
+          :value="modelData"
+          :readonly="readonly"
+          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
+      v-if="attr.type === 'addressSearch' && showItem"
+      v-model="modelData as string"
+      name="addressSearch"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      is-link
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择地址' }]"
+      :required="attr.rule.required === 'true'"
+      @click="readonly ? null : showAddressPicker = true"
+    />
+    <VanPopup
+      v-model:show="showAddressPicker"
+      position="bottom"
+      :style="{ height: '80vh' }"
+      teleport="body"
+      overlay-class="date-picker-overlay"
+    >
+      <XLocationPicker
+        :default-center="defaultMapCenter"
+        :service-name="serviceName"
+        @confirm="handleAddressConfirm"
+      />
+    </VanPopup>
+
+    <!--  pc的树形选择框————》 手机端采用 Cascader 级联选择  -->
+    <VanField
+      v-if="attr.type === 'treeSelect' && showItem"
+      v-model="treeValue"
+      name="treeSelect"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      is-link
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
+      @click="readonly ? null : showTreeSelect = true"
+    />
+    <VanPopup
+      v-model:show="showTreeSelect"
+      position="bottom"
+      teleport="body"
+      overlay-class="date-picker-overlay"
+    >
+      <VanCascader
+        :options="cleanEmptyChildren(option, attr.customFieldName ? attr.customFieldName : { text: 'label', value: 'value', children: 'children' })"
+        :field-names="attr.customFieldName ? attr.customFieldName : { text: 'label', value: 'value', children: 'children' }"
+        :title="attr.name"
+        :closeable="true"
+        @close="showTreeSelect = false"
+        @finish="onTreeSelectFinish"
+      />
+    </VanPopup>
+  </div>
+</template>
+
+<style scoped>
+.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>