af-mobile-client-vue3 1.2.17 → 1.2.19

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

@@ -12,7 +12,6 @@ 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 { getRangeByType } from '@af-mobile-client-vue3/utils/queryFormDefaultRangePicker'
 import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
 import { areaList } from '@vant/area-data'
 import dayjs from 'dayjs/esm/index'
@@ -20,6 +19,7 @@ import { debounce } from 'lodash-es'
 import {
   Area as VanArea,
   Calendar as VanCalendar,
+  Cascader as VanCascader,
   Checkbox as VanCheckbox,
   CheckboxGroup as vanCheckboxGroup,
   DatePicker as VanDatePicker,
@@ -35,7 +35,7 @@ import {
   Switch as VanSwitch,
   TimePicker as VanTimePicker,
 } from 'vant'
-import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { computed, defineEmits, defineModel, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
 
 const props = defineProps({
   attr: {
@@ -73,6 +73,7 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+  // 用 defineModel 替代 modelValue/emit
   modelValue: {
     type: [String, Number, Boolean, Array, Object],
     default: undefined,
@@ -91,7 +92,18 @@ const props = defineProps({
 
 })
 
-const emits = defineEmits(['update:modelValue', 'set-form'])
+const emits = defineEmits(['setForm'])
+
+// 用 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
@@ -101,7 +113,6 @@ 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)
@@ -109,16 +120,8 @@ 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([])
+const showTreeSelect = ref(false)
+const treeValue = ref('')
 
 // 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
 const userState = useUserStore().getLogin()
@@ -136,9 +139,9 @@ const currInst = getCurrentInstance()
 
 // 配置中心->表单项变更触发函数
 const dataChangeFunc = debounce(async () => {
-  if (attr.dataChangeFunc)
-    // eslint-disable-next-line vue/custom-event-name-casing
-    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, val => emits('set-form', val), attr, null, mode])
+  if (attr.dataChangeFunc) {
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, val => modelData.value = val, attr, null, mode])
+  }
 }, 500)
 
 // 配置中心->表单项展示函数
@@ -156,58 +159,120 @@ const showFormItemFunc = debounce(async () => {
   }
 }, 500)
 
-// 获取默认值的函数
-function getDefaultValue() {
-  switch (attr.type) {
-    case 'uploader':
-    case 'checkbox':
-    case 'file':
-    case 'image':
-    case 'timePicker':
-    case 'datePicker':
-      if (mode === '查询')
-        return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-      else
-        return props.modelValue !== undefined && props.modelValue ? props.modelValue : formSelectDefaultValue.value
-    case 'switch':
-      return props.modelValue !== undefined ? props.modelValue : false
-    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]}`
+// 监听 props.modelValue 的变化
+// watch(() => props.modelValue, (newVal) => {
+//   console.log('props.modelValue===', props.modelValue)
+// })
+
+/* function getDeafultValue(){
+  console.log('attr===', attr)
+  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)
+      localValue.value = attr.formDefault
+    if (attr.queryFormDefault)
+      localValue.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
-        return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-    case 'addressSearch':
-      return props.modelValue
-    default:
-      return undefined
+        formSelectDefaultValue.value.push(attr.formDefault)
+    }
+    if (attr.queryFormDefault) {
+      // console.log(querySelectDefaultValue.value)
+      querySelectDefaultValue.value.push(...attr.queryFormDefault)
+      // querySelectDefaultValue.value = attr.queryFormDefault
+    }
+  }
+
+  if (attr.type === 'rangePicker') {
+    if (attr.formDefault)
+      formSelectDefaultValue.value = attr.formDefault
+    if (attr.queryFormDefault) {
+      const dateArray = getRangeByType(attr.queryFormDefault, true)
+      pickerValue.value = `${dateArray[0]} ~ ${dateArray[1]}`
+      querySelectDefaultValue.value = pickerValue.value
+    }
+  }
+} */
+/**
+ * 检测是否传入了有效的值
+ * @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
+
+    // 数组类型默认值
+    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
@@ -220,91 +285,74 @@ function getDateRange({
     datePicker: 'YYYY-MM-DD HH:mm:ss',
     rangePicker: 'YYYY-MM-DD HH:mm:ss',
   }
-
-  const format = defaultFormat || formatMap[type]
-
-  let start: string, end: string
-
-  switch (defaultValue) {
-    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 (queryType === 'BETWEEN') {
-      return [start, end]
+  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 (name.includes('开始') || name.includes('起始')) {
-      return start
+    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
+      }
     }
-    else {
-      return end
+    // rangePicker组件表单显示的值
+    if (mode === '查询' && type === 'rangePicker') {
+      pickerValue.value = `${start} ~ ${end}`
     }
+    return mode !== '查询' ? start : [start, end]
   }
-  else if (['rangePicker', 'yearRangePicker', 'monthRangePicker'].includes(type)) {
-    return [start, end]
+  else {
+    return undefined
   }
-
-  return [start, end]
 }
 
-// 改用 ref，并设置初始值
-const localValue = ref(getDefaultValue())
-
-// 监听 props.modelValue 的变化
-watch(() => props.modelValue, (newVal) => {
-  // 如果是文件上传类型，需要特殊处理
-  if (attr.type === 'image' || attr.type === 'file') {
-    localValue.value = Array.isArray(newVal) ? newVal : []
-  }
-  else {
-    if (attr.type === 'rangePicker') {
-      console.log('newVal', newVal)
-      pickerValue.value = newVal !== undefined ? `${newVal[0]} ~ ${newVal[1]}` : getDefaultValue()
-    }
-    else if (['datePicker', 'rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker'].includes(attr.type)) {
-      localValue.value = getDateRange(attr)
+// 删除 localValue 相关
+// 监听 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()
     }
-    else {
-      console.log('newVal', newVal)
-      localValue.value = newVal !== undefined ? newVal : getDefaultValue()
-    }
-  }
-})
-
-// 监听 localValue 的变化
-watch(localValue, (newVal) => {
-  if (attr.type === 'image' || attr.type === 'file') {
-    // 确保上传组件的值始终是数组
-    const value = Array.isArray(newVal) ? newVal : []
-    emits('update:modelValue', value)
-  }
-  else {
-    emits('update:modelValue', newVal)
-  }
-  dataChangeFunc()
-})
+  },
+  { deep: true },
+)
 
 function updateFile(files, _index) {
   // 处理文件数据
   // 更新本地值
-  localValue.value = files.map((file) => {
+  modelData.value = files.map((file) => {
     const newFile = { ...file }
     if (newFile.content)
       delete newFile.content
@@ -440,6 +488,7 @@ function formTypeCheck(attr, value) {
 
 onBeforeMount(() => {
   init()
+  modelData.value = getDefaultValue()
   showFormItemFunc()
   dataChangeFunc()
   if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
@@ -475,7 +524,7 @@ const placeholder = computed(() => {
 const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
 
 function onCalendarConfirm(values) {
-  localValue.value = [formatDate(values[0]), formatDate(values[1])]
+  modelData.value = [formatDate(values[0]), formatDate(values[1])]
   pickerValue.value = `${formatDate(values[0])} ~ ${formatDate(values[1])}`
   calendarShow.value = false
 }
@@ -529,36 +578,6 @@ function init() {
       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
-    }
-  }
-
-  if (attr.type === 'rangePicker') {
-    if (attr.formDefault)
-      formSelectDefaultValue.value = attr.formDefault
-    if (attr.queryFormDefault) {
-      const dateArray = getRangeByType(attr.queryFormDefault, true)
-      pickerValue.value = `${dateArray[0]} ~ ${dateArray[1]}`
-      querySelectDefaultValue.value = pickerValue.value
-    }
-  }
 }
 
 function getDataCallback(res) {
@@ -596,11 +615,11 @@ async function updateResOptions(type) {
 }
 
 function initRadioValue() {
-  if ((mode === '新增' || mode === '修改') && attr.type === 'radio' && !localValue.value) {
+  if ((mode === '新增' || mode === '修改') && attr.type === 'radio' && !props.modelValue) {
     if (attr.keys && attr.keys.length > 0)
-      localValue.value = attr.keys[0].value
+      modelData.value = attr.keys[0].value
     else if (option.value && option.value.length > 0)
-      localValue.value = option.value[0].value
+      modelData.value = option.value[0].value
   }
 }
 
@@ -618,16 +637,16 @@ function getData(value, callback) {
   }
 }
 
+// 已废弃 不进行维护
 function onPickerConfirm({ selectedOptions }) {
   showPicker.value = false
-  pickerValue.value = selectedOptions[0].text
-  emits('update:modelValue', [selectedOptions[0].text])
+  modelData.value = selectedOptions[0].text
 }
 
 // 日期时间选择数据
-const dateTimePickerValue = ref(undefined)
+const dateTimePickerValue = ref<any>({})
 function showDataTimePicker() {
-  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null && typeof props.modelValue === 'string') {
+  if (props.modelValue && typeof props.modelValue === 'string') {
     // 拆分日期和时间
     const [dateStr, timeStr] = props.modelValue.split(' ')
     // 拆分日期部分
@@ -642,7 +661,7 @@ function showDataTimePicker() {
   }
   else {
     dateTimePickerValue.value = {
-      date: ['2015', '01', '01'],
+      date: formatDate(new Date()).split('-'),
       time: ['00', '00', '00'],
     }
   }
@@ -651,30 +670,32 @@ function showDataTimePicker() {
 
 function onDatePickerConfirm({ selectedValues }) {
   showDatePicker.value = false
-  localValue.value = selectedValues.join('-')
+  modelData.value = selectedValues.join('-')
 }
 
+// 已废弃 不进行维护
 function onTimePickerConfirm({ selectedValues }) {
   showTimePicker.value = false
   timePickerValue.value = selectedValues.join(':')
-  emits('update:modelValue', timePickerValue.value)
+  modelData.value = timePickerValue.value
 }
 
+// 没人用到本次先不动。后续需要看这个组件需要怎么使用
 function onAreaConfirm({ selectedOptions }) {
   area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
   showArea.value = false
-  emits('update:modelValue', [{
+  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(':')
-  localValue.value = `${dateStr} ${timeStr}`
+  modelData.value = `${dateStr} ${timeStr}`
 }
 
 function onPickerCancel() {
@@ -704,10 +725,29 @@ function handleAddressConfirm(location) {
     [attr.model]: location.address,
   }
   // 更新表单数据
-  // eslint-disable-next-line vue/custom-event-name-casing
-  emits('set-form', formData)
+  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 onTreeSelectFinish(value) {
+  treeValue.value = value.value
+  modelData.value = [value.value]
+  showTreeSelect.value = false
+}
 </script>
 
 <template>
@@ -719,10 +759,10 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'right'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanSwitch v-model="localValue" />
+        <VanSwitch v-model="modelData" />
       </template>
     </VanField>
 
@@ -733,7 +773,7 @@ function handleAddressConfirm(location) {
       :label="labelData"
     >
       <template #input>
-        <VanCheckbox v-model="localValue" shape="square" />
+        <VanCheckbox v-model="modelData" shape="square" />
       </template>
     </VanField> -->
 
@@ -749,7 +789,7 @@ function handleAddressConfirm(location) {
         :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">
+          <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>
@@ -766,7 +806,7 @@ function handleAddressConfirm(location) {
       >
         <template #input>
           <XGridDropOption
-            v-model="(localValue as string[])"
+            v-model="(modelData as string[])"
             :column-num="labelData ? 3 : 4"
             :multiple="true"
             :columns="option"
@@ -775,8 +815,8 @@ function handleAddressConfirm(location) {
       </VanField>
       <!--   下拉   -->
       <XMultiSelect
-        v-else
-        v-model="localValue"
+        v-if="attr.showMode === 'select' && mode === '查询'"
+        v-model="modelData"
         :label="labelData"
         :readonly="readonly"
         :placeholder="placeholder"
@@ -797,7 +837,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanRadioGroup v-model="localValue" direction="horizontal" :disabled="readonly">
+        <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>
@@ -817,7 +857,7 @@ function handleAddressConfirm(location) {
     >
       <template #input>
         <XGridDropOption
-          v-model="(localValue as string)"
+          v-model="(modelData as string)"
           :column-num="labelData ? 3 : 4"
           :columns="option"
         />
@@ -831,10 +871,10 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanStepper v-model="(localValue as string)" :disabled="readonly" />
+        <VanStepper v-model="modelData" :disabled="readonly" />
       </template>
     </VanField>
 
@@ -845,10 +885,10 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanRate v-model="(localValue as number)" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
+        <VanRate v-model="modelData as number" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
       </template>
     </VanField>
 
@@ -859,10 +899,10 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
-        <VanSlider v-model="(localValue as number)" :readonly="readonly" />
+        <VanSlider v-model="modelData as number" :readonly="readonly" />
       </template>
     </VanField>
 
@@ -873,13 +913,13 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
         <!--      <van-uploader v-model="localValue" /> -->
         <Uploader
           upload-mode="server"
-          :image-list="(localValue as any[])"
+          :image-list="(modelData as any[])"
           authority="admin"
           @update-file-list="updateFile"
         />
@@ -893,12 +933,12 @@ function handleAddressConfirm(location) {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     >
       <template #input>
         <ImageUploader
           upload-mode="server"
-          :image-list="(localValue as any[])"
+          :image-list="(modelData as any[])"
           authority="admin"
           :attr="attr"
           @update-file-list="updateFile"
@@ -906,7 +946,7 @@ function handleAddressConfirm(location) {
       </template>
     </VanField>
 
-    <!-- 选择器 -->
+    <!-- 选择器 琉璃中不存在,不进行维护后续将删除 -->
     <VanField
       v-if="attr.type === 'picker' && showItem"
       v-model="pickerValue"
@@ -917,12 +957,12 @@ function handleAddressConfirm(location) {
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       readonly
       is-link
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :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="(localValue as Numeric[])"
+        v-model="(modelData as Numeric[])"
         :title="attr.name"
         :columns="attr.selectKey"
         :readonly="readonly"
@@ -945,7 +985,7 @@ function handleAddressConfirm(location) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       @click="calendarShow = true"
     />
     <VanCalendar
@@ -961,7 +1001,7 @@ function handleAddressConfirm(location) {
     <!-- 日期选择-非查询 -->
     <VanField
       v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
-      v-model="(localValue as string | number)"
+      v-model="(modelData as string | number)"
       name="datePicker"
       :label="labelData"
       :label-align="labelAlign"
@@ -969,7 +1009,7 @@ function handleAddressConfirm(location) {
       readonly
       :is-link="true"
       :placeholder="placeholder"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       @click="readonly ? null : showDataTimePicker()"
     />
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
@@ -998,7 +1038,7 @@ function handleAddressConfirm(location) {
     <!-- 日期选择-查询 -->
     <VanField
       v-if="attr.type === 'datePicker' && mode === '查询' && showItem"
-      v-model="(localValue as string | number)"
+      v-model="(modelData as string | number)"
       name="datePicker"
       :label="labelData"
       :label-align="labelAlign"
@@ -1006,7 +1046,7 @@ function handleAddressConfirm(location) {
       readonly
       :is-link="true"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :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">
@@ -1032,7 +1072,7 @@ function handleAddressConfirm(location) {
       </VanPickerGroup>
     </VanPopup>
 
-    <!-- 时间选择 -->
+    <!-- 时间选择 --该配置未在pc找到不进行维护 后续将删除 -->
     <VanField
       v-if="attr.type === 'timePicker' && showItem"
       v-model="timePickerValue"
@@ -1048,7 +1088,7 @@ function handleAddressConfirm(location) {
     />
     <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanTimePicker
-        v-model="localValue as string[]"
+        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'"
@@ -1075,7 +1115,7 @@ function handleAddressConfirm(location) {
     />
     <VanPopup v-model:show="showArea" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanArea
-        v-model="localValue as string" :title="attr.name" :area-list="areaList"
+        v-model="modelData as string" :title="attr.name" :area-list="areaList"
         @confirm="onAreaConfirm"
         @cancel="showArea = false"
       />
@@ -1084,20 +1124,20 @@ function handleAddressConfirm(location) {
     <!-- 单选下拉列表 -->
     <XSelect
       v-if="attr.type === 'select' && showItem"
-      v-model="localValue"
+      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: '请选择' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
     />
 
     <!-- 文本区域 -->
     <VanField
       v-if="attr.type === 'textarea' && showItem"
-      v-model="(localValue as string)"
+      v-model="(modelData as string)"
       rows="3"
       autosize
       :label="labelData"
@@ -1114,7 +1154,7 @@ function handleAddressConfirm(location) {
     <!-- 文本输入框 -->
     <VanField
       v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
-      v-model="(localValue as string)"
+      v-model="modelData"
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
@@ -1125,13 +1165,13 @@ function handleAddressConfirm(location) {
       :error-message="errorMessage"
       :clearable="attr.clearable"
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
-      @blur="() => formTypeCheck(attr, localValue as string)"
+      @blur="() => formTypeCheck(attr, modelData as string)"
     />
 
     <!-- 地址选择器 -->
     <VanField
       v-if="attr.type === 'addressSearch' && showItem"
-      v-model="localValue as string"
+      v-model="modelData as string"
       name="addressSearch"
       :label="labelData"
       :label-align="labelAlign"
@@ -1155,6 +1195,36 @@ function handleAddressConfirm(location) {
         @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}` }]"
+      @click="readonly ? null : showTreeSelect = true"
+    />
+    <VanPopup
+      v-model:show="showTreeSelect"
+      position="bottom"
+      teleport="body"
+      overlay-class="date-picker-overlay"
+    >
+      <VanCascader
+        :options="option"
+        :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>