vue_zhongyou 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/DynamicMobileForm.vue

@@ -109,6 +109,18 @@
           @click="openAddressPicker(field)"
         />
 
+        <!-- 单个日期时间 -->
+        <van-field
+          v-else-if="field.type === 'datetime'"
+          is-link
+          readonly
+          :label="field.label"
+          :label-width="60"
+          :placeholder="field.placeholder || '请选择日期时间'"
+          :model-value="getDateTimeText(field)"
+          :rules="field.rules || []"
+          @click="openDateTime(field)"
+        />
 
         <!-- 自定义内容 -->
         <slot v-else :field="field" :value="formData[field.field]" />
@@ -190,6 +202,23 @@
       @cancel="closeAddressPicker"
     />
   </van-popup>
+
+  <!-- 单个日期时间 -->
+  <van-popup v-model:show="dateTimePopup.visible" position="bottom" round>
+    <div class="datetime-popup">
+      <div class="popup-header">
+        <span class="cancel-btn" @click="closeDateTime">取消</span>
+        <span class="confirm-btn" @click="confirmDateTime">确定</span>
+      </div>
+      <nut-date-picker
+        v-model="dateTimePopup.selectedTime"
+        type="datetime"
+        :show-toolbar="false"
+        :filter="dateTimeFilter"
+        @change="onSingleDateTimeChange"
+      />
+    </div>
+  </van-popup>
 </template>
 
 <script setup>
@@ -254,6 +283,17 @@ const addressPopup = ref({
   columnsPlaceholder: null
 })
 
+// 存储各个datetime字段的选择时间
+const dateTimeValues = ref({})
+
+// 单个日期时间弹窗状态
+const dateTimePopup = ref({
+  visible: false,
+  field: null,
+  selectedTime: new Date(),
+  currentHour: '8'
+})
+
 
 
 
@@ -268,6 +308,7 @@ const getDefaultValue = (type) => {
   if (type === 'checkbox') return []
   if (type === 'dateRange') return ['', '']
   if (type === 'datetimeRange') return ['', '']
+  if (type === 'datetime') return ''
   if (type === 'address') return { province: '', city: '', county: '', code: '' }
   return ''
 }
@@ -312,6 +353,11 @@ const handleSubmit = () => {
 }
 
 const handleReset = () => {
+  // 清除保存的datetime值
+  Object.keys(dateTimeValues.value).forEach(key => {
+    delete dateTimeValues.value[key]
+  })
+  
   initializeFormData()
   emit('update:modelValue', snapshot())
   emit('reset', snapshot())
@@ -441,27 +487,39 @@ const confirmDateTimeRange = () => {
 }
 
 // 日期时间选择器筛选函数
-const startTimeFilter = (type, options) => {
+// 通用时间过滤函数，根据类型（开始时间/结束时间）和当前小时值过滤选项
+const timeFilter = (type, options, timeType) => {
   if (type === 'hour') {
     return options.filter(option => ['08', '12', '13', '17'].includes(option.value))
   } else if (type === 'minute') {
-    // 当小时位是'08'或者'12'时，分钟只保留'00'
-    if (['12','13'].includes(dateTimeRangePopup.value.currentStartHour)) {
+    // 获取对应时间类型的当前小时值
+    const currentHour = timeType === 'start' 
+      ? dateTimeRangePopup.value.currentStartHour 
+      : dateTimeRangePopup.value.currentEndHour
+    
+    // 当小时位是'12'或者'13'时，分钟只保留'00'
+    if (['12','13'].includes(currentHour)) {
       return options.filter(option => ['00'].includes(option.value))
-    }else{
+    } else {
       return options.filter(option => ['30'].includes(option.value))
     }
   }
   return options
 }
-const endTimeFilter = (type, options) => {
+
+// 开始时间和结束时间的过滤器包装函数
+const startTimeFilter = (type, options) => timeFilter(type, options, 'start')
+const endTimeFilter = (type, options) => timeFilter(type, options, 'end')
+
+// 单个日期时间的过滤函数
+const dateTimeFilter = (type, options) => {
   if (type === 'hour') {
     return options.filter(option => ['08', '12', '13', '17'].includes(option.value))
   } else if (type === 'minute') {
-    // 当小时位是'08'或者'12'时，分钟只保留'00'
-    if (['12','13'].includes(dateTimeRangePopup.value.currentEndHour)) {
+    // 当小时位是'12'或者'13'时，分钟只保留'00'
+    if (['12','13'].includes(dateTimePopup.value.currentHour)) {
       return options.filter(option => ['00'].includes(option.value))
-    }else{
+    } else {
       return options.filter(option => ['30'].includes(option.value))
     }
   }
@@ -558,6 +616,84 @@ const getAddressText = (field) => {
   return parts.join('')
 }
 
+// 单个日期时间
+const openDateTime = (field) => {
+  dateTimePopup.value.visible = true
+  dateTimePopup.value.field = field
+  
+  // 检查是否已有该字段的保存值
+  const savedTime = dateTimeValues.value[field.field]
+  
+  // 如果已经有保存的时间，则使用保存的时间，否则设置默认时间为当天8:30
+  if (savedTime) {
+    dateTimePopup.value.selectedTime = new Date(savedTime)
+  } else {
+    const today = new Date()
+    const defaultTime = new Date(today)
+    defaultTime.setHours(8, 30, 0, 0)
+    
+    // 将field的时间转换为日期时间格式
+    dateTimePopup.value.selectedTime = typeof field.defaultValue === 'string' ? reverseFormatDateTime(field.defaultValue) : defaultTime
+  }
+  
+  // 更新当前小时值
+  const hours = dateTimePopup.value.selectedTime.getHours()
+  dateTimePopup.value.currentHour = hours.toString().padStart(2, '0')
+}
+
+const closeDateTime = () => {
+  dateTimePopup.value.visible = false
+}
+
+const confirmDateTime = () => {
+  if (!dateTimePopup.value.selectedTime) {
+    return
+  }
+  
+  // 格式化日期时间
+  const dateTimeStr = formatDateTime(dateTimePopup.value.selectedTime)
+  
+  // 保存当前字段的时间值
+  if (dateTimePopup.value.field) {
+    dateTimeValues.value[dateTimePopup.value.field.field] = new Date(dateTimePopup.value.selectedTime)
+    
+    // 更新表单数据
+    updateFieldValue(dateTimePopup.value.field.field, dateTimeStr)
+  }
+  
+  // 关闭弹窗
+  closeDateTime()
+}
+
+const getDateTimeText = (field) => {
+  const value = formData[field.field]
+  return value || ''
+}
+
+const onSingleDateTimeChange = (params) => {
+  // 更新当前选择的时间
+  if (params && params.selectedValue) {
+    const [year, month, day, hour, minute] = params.selectedValue
+    const newDate = new Date(year, month - 1, day, hour, minute)
+    dateTimePopup.value.selectedTime = newDate
+    
+    // 更新当前选择的小时值
+    if (params && params.selectedValue && params.columnIndex === 3) {
+      // 更新小时值
+      dateTimePopup.value.currentHour = params.selectedValue[3];
+      
+      // 根据小时值设置默认分钟值
+      if (['08', '17'].includes(params.selectedValue[3])) {
+        // 小时为08或17时，分钟设为30
+        dateTimePopup.value.selectedTime.setMinutes(30)
+      } else if (['12', '13'].includes(params.selectedValue[3])) {
+        // 小时为12或13时，分钟设为00
+        dateTimePopup.value.selectedTime.setMinutes(0)
+      }
+    }
+  }
+}
+
 
 
 </script>
@@ -630,6 +766,30 @@ const getAddressText = (field) => {
   }
 }
 
+.datetime-popup {
+  .popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    
+    .cancel-btn, .confirm-btn {
+      font-size: 16px;
+      padding: 4px 8px;
+      cursor: pointer;
+    }
+    
+    .cancel-btn {
+      color: #666;
+    }
+    
+    .confirm-btn {
+      color: #1989fa;
+    }
+  }
+}
+
 :deep(.van-cell) {
   padding: 8px;
 }