af-mobile-client-vue3 1.0.86 → 1.0.89

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

@@ -1,880 +1,962 @@
-<script setup lang="ts">
-import {
-  Area as VanArea,
-  Calendar as VanCalendar,
-  Checkbox as VanCheckbox,
-  DatePicker as VanDatePicker,
-  Field as VanField,
-  Picker as VanPicker,
-  Popup as VanPopup,
-  Radio as VanRadio,
-  RadioGroup as VanRadioGroup,
-  Rate as VanRate,
-  Slider as VanSlider,
-  Stepper as VanStepper,
-  Switch as VanSwitch,
-  TimePicker as VanTimePicker,
-  CheckboxGroup as vanCheckboxGroup,
-} from 'vant'
-import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
-import { areaList } from '@vant/area-data'
-import { runLogic } from '@af-mobile-client-vue3/services/api/common'
-import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
-import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
-import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-import type { Numeric } from 'vant/es/utils'
-import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
-import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { debounce } from 'lodash-es'
-import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
-
-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: () => {},
-  },
-  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(['update:modelValue'])
-// 判断并初始化防抖函数
-let debouncedUserLinkFunc: Function | null = null
-let debouncedDepLinkFunc: Function | null = null
-
-const { attr, form, mode, serviceName, getDataParams, columnsField } = props
-const calendarShow = ref(false)
-const option = ref([])
-const pickerValue = ref(undefined)
-const datePickerValue = 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 formInputDefaultValue = ref('')
-// 输入-查询
-const queryInputDefaultValue = ref('')
-// 选择-非查询
-const formSelectDefaultValue = ref([])
-// 选择-查询
-const querySelectDefaultValue = ref([])
-
-// eslint-disable-next-line ts/no-use-before-define
-const currUser = computed(() => userState.f.resources.id)
-// 是否展示当前项
-const showItem = ref(true)
-
-// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
-const currInst = getCurrentInstance()
-
-// 配置中心->表单项变更触发函数
-const dataChangeFunc = debounce(async () => {
-  if (attr.dataChangeFunc)
-    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, attr, null, mode])
-}, 500)
-
-// 配置中心->表单项展示函数
-const showFormItemFunc = debounce(async () => {
-  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
-    }
-  }
-}, 500)
-
-const localValue = computed({
-  get() {
-    // if (props.modelValue !== undefined) {
-    //   return props.modelValue
-    // }
-    switch (attr.type) {
-      case 'uploader':
-        if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      case 'switch':
-        return props.modelValue !== undefined ? props.modelValue : false
-      case 'checkbox':
-      case 'file':
-      case 'image':
-      case 'datePicker':
-      case 'timePicker':
-      case 'select':
-        if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          // console.log(formSelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      case 'radio':
-      case 'rate':
-      case 'slider':
-      case 'area':
-      case 'citySelect':
-      case 'calendar':
-      case 'textarea':
-      case 'intervalPicker':
-      case 'input':
-        if (mode === '查询')
-          return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
-        else
-          return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
-      case 'stepper':
-        return props.modelValue !== undefined ? props.modelValue : 1
-      case 'rangePicker':
-        if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
-          return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
-
-        else
-          return props.modelValue
-
-      default:
-        return undefined
-    }
-  },
-  set(newValue) {
-    emits('update:modelValue', newValue)
-    dataChangeFunc()
-  },
-})
-
-// 表单校验的类型校验
-function formTypeCheck(attr, value) {
-  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 (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
-        errorMessage.value = `请输入正确的邮箱地址`
-        return
-      }
-      break
-    case 'idNumber':
-      if (!/^(^\d{15}$|^\d{17}([0-9]|X)$)$/.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+)(?:[eE][+-]?\d+)?$/.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()
-  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)
-})
-// 是否展示表单左侧label文字
-const labelData = computed(() => {
-  return props.showLabel ? attr.name : null
-})
-// 是否只读
-const readonly = computed(() => {
-  return attr.addOrEdit === 'readonly'
-})
-// 提示内容
-const placeholder = computed(() => {
-  if (attr.addOrEdit === 'readonly')
-    return ' 暂无内容 ~ '
-  else
-    return attr.placeholder ? attr.placeholder : `请选择${attr.name}`
-})
-// 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
-const userState = useUserStore().getLogin()
-
-const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
-
-function onCalendarConfirm(values) {
-  localValue.value = [formatDate(values[0]), formatDate(values[1])]
-  calendarShow.value = false
-}
-
-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 {
-      initRadioValue()
-    }
-  }
-  if (attr.type === 'radio' || attr.type === 'rate' || attr.type === 'slider' || attr.type === 'area' || attr.type === 'citySelect' || attr.type === 'calendar' || attr.type === 'textarea' || attr.type === 'intervalPicker' || attr.type === 'input') {
-    if (attr.formDefault)
-      formInputDefaultValue.value = attr.formDefault
-    if (attr.queryFormDefault)
-      queryInputDefaultValue.value = attr.queryFormDefault
-  }
-
-  if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker' || attr.type === 'select') {
-    if (attr.formDefault) {
-      if (attr.type === 'checkbox' || attr.type === 'image' || attr.type === 'file')
-        formSelectDefaultValue.value = attr.formDefault
-      else
-        formSelectDefaultValue.value.push(attr.formDefault)
-    }
-    if (attr.queryFormDefault) {
-      // console.log(querySelectDefaultValue.value)
-      querySelectDefaultValue.value.push(attr.queryFormDefault)
-      // querySelectDefaultValue.value = attr.queryFormDefault
-    }
-  }
-}
-
-function getDataCallback(res) {
-  option.value = res
-  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('.', '_')
-    // console.log(form)
-    const formModelData = form[formModel]
-    if (formModel?.length && formModelData?.length) {
-      await searchToListOption(searchData, (res) => {
-        // console.log(res)
-        // console.log(form)
-        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' && !localValue.value) {
-    if (attr.keys && attr.keys.length > 0)
-      localValue.value = attr.keys[0].value
-    else if (option.value && option.value.length > 0)
-      localValue.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])
-
-    runLogic(logic, value, serviceName).then((res) => {
-      callback(res)
-    })
-  }
-}
-
-function onPickerConfirm({ selectedOptions }) {
-  showPicker.value = false
-  pickerValue.value = selectedOptions[0].text
-  emits('update:modelValue', [selectedOptions[0].text])
-}
-
-function onDatePickerConfirm({ selectedValues }) {
-  showDatePicker.value = false
-  localValue.value = selectedValues.join('-')
-}
-
-function onTimePickerConfirm({ selectedValues }) {
-  showTimePicker.value = false
-  timePickerValue.value = selectedValues.join(':')
-  emits('update:modelValue', timePickerValue.value)
-}
-
-function onAreaConfirm({ selectedOptions }) {
-  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
-  showArea.value = false
-  emits('update:modelValue', [{
-    province: selectedOptions[0].text,
-    city: selectedOptions[1].text,
-    district: selectedOptions[2].text,
-  }])
-}
-
-function updateFile(files, _index) {
-  files.forEach((file) => {
-    if (file.content)
-      delete file.content
-    if (file.file)
-      delete file.file
-    if (file.objectUrl)
-      delete file.objectUrl
-  })
-  localValue.value = files
-  emits('update:modelValue', localValue.value)
-}
-// 监听表单发生变化后触发展示函数
-watch(() => form, (_oldVal, _newVal) => {
-  showFormItemFunc()
-  // 数据源来自人员联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
-    debouncedUserLinkFunc()
-
-  // 数据源来自部门联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
-    debouncedDepLinkFunc()
-}, { deep: true })
-</script>
-
-<template>
-  <div>
-    <!-- switch开关 -->
-    <VanField
-      v-if="attr.type === 'switch' && showItem"
-      name="switch"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <VanSwitch v-model="localValue" />
-      </template>
-    </VanField>
-
-    <!-- 复选框 -->
-    <!--    <VanField
-      v-if="attr.type === 'checkbox'"
-      name="checkbox"
-      :label="labelData"
-    >
-      <template #input>
-        <VanCheckbox v-model="localValue" shape="square" />
-      </template>
-    </VanField> -->
-
-    <!-- 多选框-checkbox-复选框组  -->
-    <template v-if="attr.type === 'checkbox' && showItem">
-      <!--  勾选    -->
-      <VanField
-        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
-        name="checkboxGroup"
-        :label="labelData"
-        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      >
-        <template #input>
-          <van-checkbox-group v-model="localValue 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"
-        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      >
-        <template #input>
-          <XGridDropOption
-            v-model="(localValue as string[])"
-            :column-num="labelData ? 3 : 4"
-            :multiple="true"
-            :columns="option"
-          />
-        </template>
-      </VanField>
-      <!--   下拉   -->
-      <XMultiSelect
-        v-else
-        v-model="localValue"
-        :label="labelData"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        :columns="option"
-        :option="attr.option ? attr.option : columnsField"
-        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      />
-    </template>
-
-    <!-- 单选框 -->
-    <VanField
-      v-if="attr.type === 'radio' && mode !== '查询' && showItem"
-      name="radio"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <VanRadioGroup v-model="localValue" 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"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <XGridDropOption
-          v-model="(localValue as string)"
-          :column-num="labelData ? 3 : 4"
-          :columns="option"
-        />
-      </template>
-    </VanField>
-
-    <!-- 步进器 -->
-    <VanField
-      v-if="attr.type === 'stepper' && showItem"
-      name="stepper"
-      :label="labelData"
-      :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <VanStepper v-model="(localValue as string)" />
-      </template>
-    </VanField>
-
-    <!-- 评分 -->
-    <VanField
-      v-if="attr.type === 'rate' && showItem"
-      name="rate"
-      :label="labelData"
-      :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <VanRate v-model="(localValue as number)" />
-      </template>
-    </VanField>
-
-    <!-- 滑块 -->
-    <VanField
-      v-if="attr.type === 'slider' && showItem"
-      name="slider"
-      :label="labelData"
-      :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <VanSlider v-model="(localValue as number)" />
-      </template>
-    </VanField>
-
-    <!-- 图片文件上传 -->
-    <VanField
-      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
-      name="uploader"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    >
-      <template #input>
-        <!--      <van-uploader v-model="localValue" /> -->
-        <Uploader
-          upload-mode="server"
-          :image-list="(localValue as any[])"
-          authority="admin"
-          @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"
-      :readonly="readonly"
-      is-link
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="showPicker = true"
-    />
-    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
-      <VanPicker
-        v-model="(localValue 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="(localValue as string | number)"
-      is-link
-      readonly
-      name="rangePicker"
-      :label="labelData"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="calendarShow = true"
-    />
-    <VanCalendar
-      v-model:show="calendarShow"
-      switch-mode="year-month"
-      type="range"
-      teleport="body"
-      :show-confirm="attr.showConfirm"
-      @confirm="onCalendarConfirm"
-    />
-
-    <!-- 日期选择-非查询 -->
-    <VanField
-      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
-      v-model="(localValue as string | number)"
-      name="datePicker"
-      :label="labelData"
-      readonly
-      :is-link="true"
-      :placeholder="placeholder"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="readonly ? null : showDatePicker = true"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
-      <VanDatePicker
-        v-model="datePickerValue"
-        calend
-        :title="attr.name"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-        @cancel="showDatePicker = false"
-        @confirm="onDatePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 日期选择-查询 -->
-    <VanField
-      v-if="attr.type === 'datePicker' && mode === '查询' && showItem"
-      v-model="(localValue as string | number)"
-      name="datePicker"
-      :label="labelData"
-      readonly
-      :is-link="true"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="showDatePicker = true"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
-      <VanDatePicker
-        v-model="datePickerValue"
-        calend
-        :title="attr.name"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-        :readonly="attr.readonly ? attr.readonly : false"
-        @cancel="showDatePicker = false"
-        @confirm="onDatePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 时间选择 -->
-    <VanField
-      v-if="attr.type === 'timePicker' && showItem"
-      v-model="timePickerValue"
-      name="timePicker"
-      is-link
-      readonly
-      :placeholder="attr.placeholder"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="showTimePicker = true"
-    />
-    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
-      <VanTimePicker
-        v-model="localValue 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="attr.readonly ? attr.readonly : false"
-        @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"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-      @click="readonly ? null : showArea = true"
-    />
-    <VanPopup v-model:show="showArea" position="bottom" teleport="body">
-      <VanArea
-        v-model="localValue as string" :title="attr.name" :area-list="areaList"
-        @confirm="onAreaConfirm"
-        @cancel="showArea = false"
-      />
-    </VanPopup>
-
-    <!-- 单选下拉列表 -->
-    <XSelect
-      v-if="attr.type === 'select' && showItem"
-      v-model="localValue"
-      :label="labelData"
-      :readonly="readonly"
-      clearable
-      :placeholder="placeholder"
-      :columns="option"
-      :option="attr.option ? attr.option : columnsField"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
-    />
-
-    <!-- 文本区域 -->
-    <VanField
-      v-if="attr.type === 'textarea' && showItem"
-      v-model="(localValue as string)"
-      rows="3"
-      autosize
-      :label="labelData"
-      type="textarea"
-      :readonly="readonly"
-      :maxlength="attr.maxlength"
-      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
-      show-word-limit
-      label-align="top"
-      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
-    />
-
-    <!-- 文本输入框 -->
-    <VanField
-      v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
-      v-model="(localValue as string)"
-      :label="labelData"
-      :type="attr.type"
-      :readonly="readonly"
-      :disabled="attr.disabled"
-      :placeholder="placeholder"
-      :error-message="errorMessage"
-      :clearable="attr.clearable"
-      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
-      @blur="() => formTypeCheck(attr, localValue as string)"
-    />
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {
+  Area as VanArea,
+  Calendar as VanCalendar,
+  Checkbox as VanCheckbox,
+  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,
+  CheckboxGroup as vanCheckboxGroup,
+} from 'vant'
+import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { areaList } from '@vant/area-data'
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
+import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+import type { Numeric } from 'vant/es/utils'
+import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { debounce } from 'lodash-es'
+import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
+
+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: () => {},
+  },
+  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(['update:modelValue'])
+// 判断并初始化防抖函数
+let debouncedUserLinkFunc: Function | null = null
+let debouncedDepLinkFunc: Function | null = null
+
+const { attr, form, mode, serviceName, getDataParams, columnsField } = props
+const calendarShow = ref(false)
+const option = ref([])
+const pickerValue = ref(undefined)
+const datePickerValue = 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 formInputDefaultValue = ref('')
+// 输入-查询
+const queryInputDefaultValue = ref('')
+// 选择-非查询
+const formSelectDefaultValue = ref([])
+// 选择-查询
+const querySelectDefaultValue = ref([])
+
+// eslint-disable-next-line ts/no-use-before-define
+const currUser = computed(() => userState.f.resources.id)
+// 是否展示当前项
+const showItem = ref(true)
+
+// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
+const currInst = getCurrentInstance()
+
+// 配置中心->表单项变更触发函数
+const dataChangeFunc = debounce(async () => {
+  if (attr.dataChangeFunc)
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, attr, null, mode])
+}, 500)
+
+// 配置中心->表单项展示函数
+const showFormItemFunc = debounce(async () => {
+  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
+    }
+  }
+}, 500)
+
+const localValue = computed({
+  get() {
+    // if (props.modelValue !== undefined) {
+    //   return props.modelValue
+    // }
+    switch (attr.type) {
+      case 'uploader':
+        if (mode === '查询') {
+          // console.log(querySelectDefaultValue.value)
+          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+        }
+        else {
+          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
+        }
+      case 'switch':
+        return props.modelValue !== undefined ? props.modelValue : false
+      case 'checkbox':
+      case 'file':
+      case 'image':
+      case 'timePicker':
+      case 'datePicker':
+        if (mode === '查询') {
+          // console.log(querySelectDefaultValue.value)
+          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+        }
+        else {
+          // console.log(formSelectDefaultValue.value)
+          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
+        }
+      // case 'datePicker':
+      //   if (mode === '查询') {
+      //     // console.log(querySelectDefaultValue.value)
+      //     return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+      //   }
+      //   else {
+      //     if (props.modelValue !== undefined) {
+      //       // 拆分日期和时间
+      //       const [dateStr, timeStr] = props.modelValue.split(' ')
+      //       // 拆分日期部分
+      //       const date = dateStr.split('-')
+      //       // 拆分时间部分
+      //       const time = timeStr.split(':')
+      //       // 赋值给 dateTimePickerValue
+      //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      //       dateTimePickerValue.value = {
+      //         date,
+      //         time,
+      //       }
+      //       return dateTimePickerValue.value
+      //     }
+      //     return formSelectDefaultValue.value
+      //   }
+      case 'radio':
+      case 'rate':
+      case 'slider':
+      case 'area':
+      case 'citySelect':
+      case 'calendar':
+      case 'textarea':
+      case 'intervalPicker':
+      case 'input':
+      case 'select':
+        if (mode === '查询')
+          return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
+        else
+          return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
+      case 'stepper':
+        return props.modelValue !== undefined ? props.modelValue : 1
+      case 'rangePicker':
+        if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
+          return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
+
+        else
+          return props.modelValue
+
+      default:
+        return undefined
+    }
+  },
+  set(newValue) {
+    emits('update:modelValue', newValue)
+    dataChangeFunc()
+  },
+})
+
+// 表单校验的类型校验
+function formTypeCheck(attr, value) {
+  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 (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
+        errorMessage.value = `请输入正确的邮箱地址`
+        return
+      }
+      break
+    case 'idNumber':
+      if (!/^(^\d{15}$|^\d{17}([0-9]|X)$)$/.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+)(?:[eE][+-]?\d+)?$/.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()
+  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)
+})
+// 是否展示表单左侧label文字
+const labelData = computed(() => {
+  return props.showLabel ? attr.name : null
+})
+// 是否只读
+const readonly = computed(() => {
+  return attr.addOrEdit === 'readonly'
+})
+// 提示内容
+const placeholder = computed(() => {
+  if (attr.addOrEdit === 'readonly')
+    return ' 暂无内容 ~ '
+  else
+    return attr.placeholder ? attr.placeholder : `请选择${attr.name}`
+})
+// 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
+const userState = useUserStore().getLogin()
+
+const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+
+function onCalendarConfirm(values) {
+  localValue.value = [formatDate(values[0]), formatDate(values[1])]
+  calendarShow.value = false
+}
+
+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 {
+      initRadioValue()
+    }
+  }
+  if (attr.type === 'radio' || attr.type === 'rate' || attr.type === 'slider' || attr.type === 'area' || attr.type === 'citySelect' || attr.type === 'calendar' || attr.type === 'textarea' || attr.type === 'intervalPicker' || attr.type === 'input' || attr.type === 'select') {
+    if (attr.formDefault)
+      formInputDefaultValue.value = attr.formDefault
+    if (attr.queryFormDefault)
+      queryInputDefaultValue.value = attr.queryFormDefault
+  }
+
+  if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker') {
+    if (attr.formDefault) {
+      if (attr.type === 'checkbox' || attr.type === 'image' || attr.type === 'file')
+        formSelectDefaultValue.value = attr.formDefault
+      else
+        formSelectDefaultValue.value.push(attr.formDefault)
+    }
+    if (attr.queryFormDefault) {
+      // console.log(querySelectDefaultValue.value)
+      querySelectDefaultValue.value.push(attr.queryFormDefault)
+      // querySelectDefaultValue.value = attr.queryFormDefault
+    }
+  }
+}
+
+function getDataCallback(res) {
+  option.value = res
+  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('.', '_')
+    // console.log(form)
+    const formModelData = form[formModel]
+    if (formModel?.length && formModelData?.length) {
+      await searchToListOption(searchData, (res) => {
+        // console.log(res)
+        // console.log(form)
+        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' && !localValue.value) {
+    if (attr.keys && attr.keys.length > 0)
+      localValue.value = attr.keys[0].value
+    else if (option.value && option.value.length > 0)
+      localValue.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])
+
+    runLogic(logic, value, serviceName).then((res) => {
+      callback(res)
+    })
+  }
+}
+
+function onPickerConfirm({ selectedOptions }) {
+  showPicker.value = false
+  pickerValue.value = selectedOptions[0].text
+  emits('update:modelValue', [selectedOptions[0].text])
+}
+
+// 日期时间选择数据
+const dateTimePickerValue = ref(undefined)
+function showDataTimePicker() {
+  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null) {
+    // 拆分日期和时间
+    const [dateStr, timeStr] = props.modelValue.split(' ')
+    // 拆分日期部分
+    const date = dateStr.split('-')
+    // 拆分时间部分
+    const time = timeStr.split(':')
+    // 赋值给 dateTimePickerValue
+    dateTimePickerValue.value = {
+      date,
+      time,
+    }
+  }
+  else {
+    dateTimePickerValue.value = {
+      date: ['2015', '01', '01'],
+      time: ['00', '00', '00'],
+    }
+  }
+  showDatePicker.value = true
+}
+
+function onDatePickerConfirm({ selectedValues }) {
+  showDatePicker.value = false
+  localValue.value = selectedValues.join('-')
+}
+
+function onTimePickerConfirm({ selectedValues }) {
+  showTimePicker.value = false
+  timePickerValue.value = selectedValues.join(':')
+  emits('update:modelValue', timePickerValue.value)
+}
+
+function onAreaConfirm({ selectedOptions }) {
+  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
+  showArea.value = false
+  emits('update:modelValue', [{
+    province: selectedOptions[0].text,
+    city: selectedOptions[1].text,
+    district: selectedOptions[2].text,
+  }])
+}
+
+function updateFile(files, _index) {
+  files.forEach((file) => {
+    if (file.content)
+      delete file.content
+    if (file.file)
+      delete file.file
+    if (file.objectUrl)
+      delete file.objectUrl
+  })
+  localValue.value = files
+  emits('update:modelValue', localValue.value)
+}
+// 监听表单发生变化后触发展示函数
+watch(() => form, (_oldVal, _newVal) => {
+  showFormItemFunc()
+  // 数据源来自人员联动时更新数据
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
+    debouncedUserLinkFunc()
+
+  // 数据源来自部门联动时更新数据
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
+    debouncedDepLinkFunc()
+}, { deep: true })
+
+function onDateTimePickerConfirm() {
+  showDatePicker.value = false
+  const dateStr = dateTimePickerValue.value.date.join('-')
+  const timeStr = dateTimePickerValue.value.time.join(':')
+  localValue.value = `${dateStr} ${timeStr}`
+}
+
+function onPickerCancel() {
+  showDatePicker.value = false
+}
+</script>
+
+<template>
+  <div>
+    <!-- switch开关 -->
+    <VanField
+      v-if="attr.type === 'switch' && showItem"
+      name="switch"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <VanSwitch v-model="localValue" />
+      </template>
+    </VanField>
+
+    <!-- 复选框 -->
+    <!--    <VanField
+      v-if="attr.type === 'checkbox'"
+      name="checkbox"
+      :label="labelData"
+    >
+      <template #input>
+        <VanCheckbox v-model="localValue" shape="square" />
+      </template>
+    </VanField> -->
+
+    <!-- 多选框-checkbox-复选框组  -->
+    <template v-if="attr.type === 'checkbox' && showItem">
+      <!--  勾选    -->
+      <VanField
+        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
+        name="checkboxGroup"
+        :label="labelData"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      >
+        <template #input>
+          <van-checkbox-group v-model="localValue 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"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      >
+        <template #input>
+          <XGridDropOption
+            v-model="(localValue as string[])"
+            :column-num="labelData ? 3 : 4"
+            :multiple="true"
+            :columns="option"
+          />
+        </template>
+      </VanField>
+      <!--   下拉   -->
+      <XMultiSelect
+        v-else
+        v-model="localValue"
+        :label="labelData"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :columns="option"
+        :option="attr.option ? attr.option : columnsField"
+        :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      />
+    </template>
+
+    <!-- 单选框 -->
+    <VanField
+      v-if="attr.type === 'radio' && mode !== '查询' && showItem"
+      name="radio"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+    >
+      <template #input>
+        <VanRadioGroup v-model="localValue" 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"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+    >
+      <template #input>
+        <XGridDropOption
+          v-model="(localValue as string)"
+          :column-num="labelData ? 3 : 4"
+          :columns="option"
+        />
+      </template>
+    </VanField>
+
+    <!-- 步进器 -->
+    <VanField
+      v-if="attr.type === 'stepper' && showItem"
+      name="stepper"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <VanStepper v-model="(localValue as string)" />
+      </template>
+    </VanField>
+
+    <!-- 评分 -->
+    <VanField
+      v-if="attr.type === 'rate' && showItem"
+      name="rate"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <VanRate v-model="(localValue as number)" />
+      </template>
+    </VanField>
+
+    <!-- 滑块 -->
+    <VanField
+      v-if="attr.type === 'slider' && showItem"
+      name="slider"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <VanSlider v-model="(localValue as number)" />
+      </template>
+    </VanField>
+
+    <!-- 图片文件上传 -->
+    <VanField
+      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
+      name="uploader"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    >
+      <template #input>
+        <!--      <van-uploader v-model="localValue" /> -->
+        <Uploader
+          upload-mode="server"
+          :image-list="(localValue as any[])"
+          authority="admin"
+          @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"
+      :readonly="readonly"
+      is-link
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="showPicker = true"
+    />
+    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
+      <VanPicker
+        v-model="(localValue 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="(localValue as string | number)"
+      is-link
+      readonly
+      name="rangePicker"
+      :label="labelData"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="calendarShow = true"
+    />
+    <VanCalendar
+      v-model:show="calendarShow"
+      switch-mode="year-month"
+      allow-same-day
+      type="range"
+      teleport="body"
+      :show-confirm="attr.showConfirm"
+      @confirm="onCalendarConfirm"
+    />
+
+    <!-- 日期选择-非查询 -->
+    <VanField
+      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
+      v-model="(localValue as string | number)"
+      name="datePicker"
+      :label="labelData"
+      readonly
+      :is-link="true"
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="readonly ? null : showDataTimePicker()"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+      <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.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+        />
+        <VanTimePicker
+          v-model="dateTimePickerValue.time"
+          :columns-type="['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="(localValue as string | number)"
+      name="datePicker"
+      :label="labelData"
+      readonly
+      :is-link="true"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="showDatePicker = true"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+      <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.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+          :readonly="attr.readonly ? attr.readonly : false"
+        />
+        <VanTimePicker
+          v-model="dateTimePickerValue.time"
+          :columns-type="['hour', 'minute', 'second']"
+          :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+          :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+          :readonly="attr.readonly ? attr.readonly : false"
+        />
+      </VanPickerGroup>
+    </VanPopup>
+
+    <!-- 时间选择 -->
+    <VanField
+      v-if="attr.type === 'timePicker' && showItem"
+      v-model="timePickerValue"
+      name="timePicker"
+      is-link
+      readonly
+      :placeholder="attr.placeholder"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="showTimePicker = true"
+    />
+    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
+      <VanTimePicker
+        v-model="localValue 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="attr.readonly ? attr.readonly : false"
+        @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"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      @click="readonly ? null : showArea = true"
+    />
+    <VanPopup v-model:show="showArea" position="bottom" teleport="body">
+      <VanArea
+        v-model="localValue as string" :title="attr.name" :area-list="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showArea = false"
+      />
+    </VanPopup>
+
+    <!-- 单选下拉列表 -->
+    <XSelect
+      v-if="attr.type === 'select' && showItem"
+      v-model="localValue"
+      :label="labelData"
+      :readonly="readonly"
+      clearable
+      :placeholder="placeholder"
+      :columns="option"
+      :option="attr.option ? attr.option : columnsField"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+    />
+
+    <!-- 文本区域 -->
+    <VanField
+      v-if="attr.type === 'textarea' && showItem"
+      v-model="(localValue as string)"
+      rows="3"
+      autosize
+      :label="labelData"
+      type="textarea"
+      :readonly="readonly"
+      :maxlength="attr.maxlength"
+      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
+      show-word-limit
+      label-align="top"
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+    />
+
+    <!-- 文本输入框 -->
+    <VanField
+      v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
+      v-model="(localValue as string)"
+      :label="labelData"
+      :type="attr.type"
+      :readonly="readonly"
+      :disabled="attr.disabled"
+      :placeholder="placeholder"
+      :error-message="errorMessage"
+      :clearable="attr.clearable"
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      @blur="() => formTypeCheck(attr, localValue as string)"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>