af-mobile-client-vue3 1.3.65 → 1.3.66

package/package.json

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

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

@@ -119,6 +119,42 @@ let debouncedDepLinkFunc: (() => void) | null = null
 let debouncedUpdateOptions: (() => void) | null = null
 
 const { attr, form, mode, serviceName, getDataParams, columnsField } = props
+// 配置的表单值格式（仅针对 datePicker 生效）
+// 作用：统一控制日期值的格式化输入/输出与选择器展示粒度
+// 可选：'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss'
+const formValueFormat = computed(() => {
+  // 默认全格式
+  return (attr && (attr as any).formValueFormat) || 'YYYY-MM-DD HH:mm:ss'
+})
+
+// 根据 formValueFormat 动态计算日期列类型（决定 VanDatePicker 展示年/月/日）
+// 例如：YYYY 只显示年；YYYY-MM 显示年、月；YYYY-MM-DD 显示年、月、日
+const dateColumnsType = computed(() => {
+  const format = formValueFormat.value
+  const columns: string[] = ['year']
+  if (format.includes('MM'))
+    columns.push('month')
+  if (format.includes('DD'))
+    columns.push('day')
+  return columns as any
+})
+
+// 是否包含时间（决定是否展示时间页签与 VanTimePicker）
+const hasTime = computed(() => formValueFormat.value.includes('HH'))
+
+// 根据 formValueFormat 动态计算时间列类型（决定时/分/秒的展示）
+// 例如：包含 HH 显示小时；包含 mm 显示分钟；包含 ss 显示秒
+const timeColumnsType = computed(() => {
+  const format = formValueFormat.value
+  const columns: string[] = []
+  if (format.includes('HH'))
+    columns.push('hour')
+  if (format.includes('mm'))
+    columns.push('minute')
+  if (format.includes('ss'))
+    columns.push('second')
+  return columns as any
+})
 const calendarShow = ref(false)
 const option = ref([])
 const pickerValue = ref(undefined)
@@ -185,9 +221,16 @@ function checkModel(val = props.modelValue) {
  */
 function getDefaultValue() {
   const val = props.modelValue
-
-  // 如果有有效值，直接返回
+  console.warn('>>>>>props', props)
+  console.warn('>>>> attr', attr)
+  // 如果有有效值，直接返回（datePicker 初始值需按 formValueFormat 归一）
+  // 目的：外部通过 formData 传入的初始值在组件挂载即与配置格式一致
   if (checkModel(val)) {
+    if (attr.type === 'datePicker' && typeof val === 'string') {
+      const parsed = dayjs(val)
+      if (parsed.isValid())
+        return parsed.format(formValueFormat.value)
+    }
     return val
   }
 
@@ -233,7 +276,8 @@ function getDefaultValue() {
       return specialDefaults[attr.type]
     }
 
-    // 日期时间类型
+    // 日期时间类型：调用 getDateRange，并传入 formValueFormat
+    // 说明：让初始化/查询默认值同样遵循配置的格式显示
     const dateTypes = ['rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker', 'datePicker', 'timePicker']
     if (dateTypes.includes(attr.type)) {
       return getDateRange({
@@ -243,6 +287,7 @@ function getDefaultValue() {
         queryType: attr.queryType,
         queryValueFormat: attr.queryValueFormat,
         name: attr.name ?? '',
+        formValueFormat: formValueFormat.value,
       }) ?? []
     }
 
@@ -261,6 +306,7 @@ function getDateRange({
   queryType,
   queryValueFormat: defaultFormat,
   name,
+  formValueFormat: formFormat,
 }: {
   type: string
   formDefault: string
@@ -268,6 +314,8 @@ function getDateRange({
   queryType?: string
   queryValueFormat?: string
   name: string
+  // 新增：用于优先覆盖 datePicker 的显示/存储格式
+  formValueFormat?: string
 }): string | [string, string] | undefined {
   const formatMap: Record<string, string> = {
     yearPicker: 'YYYY',
@@ -278,7 +326,9 @@ function getDateRange({
     rangePicker: 'YYYY-MM-DD HH:mm:ss',
   }
   if (mode) {
-    const format = defaultFormat || formatMap[type]
+    // datePicker 优先使用 formValueFormat（否则退回 queryValueFormat 或默认映射）
+    const preferFormat = type === 'datePicker' ? (formFormat || defaultFormat) : defaultFormat
+    const format = preferFormat || formatMap[type]
     const val = mode === '查询' ? queryFormDefault : defaultValue
     let start: string, end: string
     switch (val) {
@@ -649,24 +699,53 @@ function onPickerConfirm({ selectedOptions }) {
 
 // 日期时间选择数据
 const dateTimePickerValue = ref<any>({})
+// 展示日期时间选择器：根据 formValueFormat 初始化 VanDatePicker/VanTimePicker 的当前值
+// 规则：
+// - 若已有字符串值，按 formValueFormat 解析并拆分为日期/时间数组
+// - 若无值，按当前时间生成匹配格式的默认数组
 function showDataTimePicker() {
   if (props.modelValue && typeof props.modelValue === 'string') {
-    // 拆分日期和时间
-    const [dateStr, timeStr] = props.modelValue.split(' ')
-    // 拆分日期部分
-    const date = dateStr.split('-')
-    // 拆分时间部分
-    const time = timeStr.split(':')
-    // 赋值给 dateTimePickerValue
+    const base = dayjs(props.modelValue as string, formValueFormat.value)
+    const dateArr: string[] = []
+    dateArr.push(base.format('YYYY'))
+    if (dateColumnsType.value.includes('month'))
+      dateArr.push(base.format('MM'))
+    if (dateColumnsType.value.includes('day'))
+      dateArr.push(base.format('DD'))
+    const timeArr: string[] = []
+    if (hasTime.value) {
+      if (timeColumnsType.value.includes('hour'))
+        timeArr.push(base.format('HH'))
+      if (timeColumnsType.value.includes('minute'))
+        timeArr.push(base.format('mm'))
+      if (timeColumnsType.value.includes('second'))
+        timeArr.push(base.format('ss'))
+    }
     dateTimePickerValue.value = {
-      date,
-      time,
+      date: dateArr,
+      time: timeArr.length ? timeArr : ['00', '00', '00'].slice(0, timeColumnsType.value.length),
     }
   }
   else {
+    const now = dayjs()
+    const dateArr: string[] = []
+    dateArr.push(now.format('YYYY'))
+    if (dateColumnsType.value.includes('month'))
+      dateArr.push(now.format('MM'))
+    if (dateColumnsType.value.includes('day'))
+      dateArr.push(now.format('DD'))
+    const timeArr: string[] = []
+    if (hasTime.value) {
+      if (timeColumnsType.value.includes('hour'))
+        timeArr.push(now.format('HH'))
+      if (timeColumnsType.value.includes('minute'))
+        timeArr.push(now.format('mm'))
+      if (timeColumnsType.value.includes('second'))
+        timeArr.push(now.format('ss'))
+    }
     dateTimePickerValue.value = {
-      date: formatDate(new Date()).split('-'),
-      time: ['00', '00', '00'],
+      date: dateArr,
+      time: timeArr.length ? timeArr : ['00', '00', '00'].slice(0, timeColumnsType.value.length),
     }
   }
   showDatePicker.value = true
@@ -695,11 +774,19 @@ function onAreaConfirm({ selectedOptions }) {
   }]
 }
 
+// 日期时间选择确认：将选择的年月日(+时分秒)拼装后，最终使用 formValueFormat 输出到 v-model
 function onDateTimePickerConfirm() {
   showDatePicker.value = false
-  const dateStr = dateTimePickerValue.value.date.join('-')
-  const timeStr = dateTimePickerValue.value.time.join(':')
-  modelData.value = `${dateStr} ${timeStr}`
+  const dateParts = dateTimePickerValue.value.date as string[]
+  const timeParts = (dateTimePickerValue.value.time as string[]) || []
+  const year = dateParts[0]
+  const month = dateParts[1] || '01'
+  const day = dateParts[2] || '01'
+  const hour = hasTime.value && timeParts[0] ? timeParts[0] : '00'
+  const minute = hasTime.value && timeParts[1] ? timeParts[1] : '00'
+  const second = hasTime.value && timeParts[2] ? timeParts[2] : '00'
+  const full = `${year}-${month}-${day} ${hour}:${minute}:${second}`
+  modelData.value = dayjs(full, 'YYYY-MM-DD HH:mm:ss').format(formValueFormat.value)
 }
 
 function onPickerCancel() {
@@ -1065,7 +1152,7 @@ function findOptionInTree(options, value) {
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanPickerGroup
         :title="attr.name"
-        :tabs="['选择日期', '选择时间']"
+        :tabs="hasTime ? ['选择日期', '选择时间'] : ['选择日期']"
         next-step-text="下一步"
         :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
         :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
@@ -1074,11 +1161,12 @@ function findOptionInTree(options, value) {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
+          :columns-type="attr.dateColumnsType || dateColumnsType"
         />
         <VanTimePicker
+          v-if="hasTime"
           v-model="dateTimePickerValue.time"
-          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || timeColumnsType"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
         />
@@ -1097,12 +1185,12 @@ function findOptionInTree(options, value) {
       :is-link="true"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
-      @click="readonly ? null : (showDatePicker = true)"
+      @click="readonly ? null : showDataTimePicker()"
     />
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanPickerGroup
         :title="attr.name"
-        :tabs="['选择日期', '选择时间']"
+        :tabs="hasTime ? ['选择日期', '选择时间'] : ['选择日期']"
         next-step-text="下一步"
         :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
         :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
@@ -1111,11 +1199,12 @@ function findOptionInTree(options, value) {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
+          :columns-type="attr.dateColumnsType || dateColumnsType"
         />
         <VanTimePicker
+          v-if="hasTime"
           v-model="dateTimePickerValue.time"
-          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || timeColumnsType"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
         />