vue_zhongyou 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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

@@ -8,8 +8,9 @@
           v-model="formData[field.field]"
           :type="field.type === 'textarea' ? 'textarea' : 'text'"
           :label="field.label"
+          :label-width="60"
           :placeholder="field.placeholder || `请输入${field.label}`"
-          :rules="field.rules"
+          :rules="field.rules || []"
           :maxlength="field.maxlength"
           :rows="field.rows || (field.type === 'textarea' ? 3 : undefined)"
           :autosize="field.type === 'textarea'"
@@ -19,7 +20,7 @@
         />
 
         <!-- 单选 -->
-        <van-field v-else-if="field.type === 'radio'" name="radio" :label="field.label">
+        <van-field v-else-if="field.type === 'radio'" name="radio" :label="field.label" :rules="field.rules || []">
           <template #input>
             <van-radio-group 
               v-model="formData[field.field]" 
@@ -40,7 +41,7 @@
 
 
         <!-- 多选 -->
-        <van-field v-else-if="field.type === 'checkbox'" name="checkboxGroup" :label="field.label">
+        <van-field v-else-if="field.type === 'checkbox'" name="checkboxGroup" :label="field.label" :rules="field.rules || []">
           <template #input>
             <van-checkbox-group 
               v-model="formData[field.field]" 
@@ -67,6 +68,7 @@
           :label="field.label"
           :placeholder="field.placeholder || `请选择${field.label}`"
           :model-value="getSelectLabel(field)"
+          :rules="field.rules || []"
           @click="openSelect(field)"
         />
 
@@ -77,10 +79,24 @@
           readonly
           :label="field.label"
           :placeholder="field.placeholder || '请选择时间范围'"
+          :rules="field.rules || []"
           :model-value="getDateRangeText(field)"
           @click="openDateRange(field)"
         />
 
+        <!-- 日期时间范围 -->
+        <van-field
+          v-else-if="field.type === 'datetimeRange'"
+          is-link
+          readonly
+          :label="field.label"
+          :label-width="60"
+          :placeholder="field.placeholder || '请选择日期时间范围'"
+          :model-value="getDateTimeRangeText(field)"
+          :rules="field.rules || []"
+          @click="openDateTimeRange(field)"
+        />
+
         <!-- 地址选择 -->
         <van-field
           v-else-if="field.type === 'address'"
@@ -88,10 +104,24 @@
           readonly
           :label="field.label"
           :placeholder="field.placeholder || '请选择地址'"
+          :rules="field.rules || []"
           :model-value="getAddressText(field)"
           @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]" />
       </template>
@@ -122,6 +152,7 @@
       @confirm="onSelectConfirm"
       @cancel="closeSelect"
     />
+    
   </van-popup>
 
   <!-- 时间范围 -->
@@ -135,6 +166,33 @@
     @cancel="closeDateRange"
   />
 
+  <!-- 日期时间范围选择器 -->
+  <van-popup v-model:show="dateTimeRangePopup.visible" position="bottom" round>
+    <div class="datetime-range-popup">
+      <div class="popup-header">
+        <span class="cancel-btn" @click="closeDateTimeRange">取消</span>
+        <span class="confirm-btn" @click="confirmDateTimeRange">确定</span>
+      </div>
+      <div class="time_title">开始时间</div>
+      <nut-date-picker
+        v-model="dateTimeRangePopup.startTime"
+        type="datetime"
+        :show-toolbar="false"
+        :filter="startTimeFilter"
+        @change="(e)=>onDateTimeChange(e,'startTime')"
+      />
+      <div class="time_title">结束时间</div>
+      <nut-date-picker
+        v-model="dateTimeRangePopup.endTime"
+        type="datetime"
+        :show-toolbar="false"
+        :filter="endTimeFilter"
+        @change="(e)=>onDateTimeChange(e,'endTime')"
+      />
+    </div>
+  </van-popup>
+
+
   <!-- 地址 -->
   <van-popup v-model:show="addressPopup.visible" position="bottom" round>
     <van-area
@@ -144,11 +202,30 @@
       @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>
 import { computed, reactive, ref, watch } from 'vue'
 import { areaList } from '@vant/area-data'
+import { showNotify } from 'vant';
+
 const props = defineProps({
   schema: {
     type: Array,
@@ -188,6 +265,16 @@ const dateRangePopup = ref({
   minDate: null,
   maxDate: null
 })
+// 日期时间范围弹窗状态
+const dateTimeRangePopup = ref({
+  visible: false,        // 弹窗显示状态
+  field: null,           // 当前操作的字段
+  startTime: new Date(),       // 开始时间
+  endTime: new Date(),         // 结束时间
+  currentDate: new Date(), // 当前选中日期
+  currentHour: '8'       // 当前选择的小时值，默认为'12'
+})
+
 
 const addressPopup = ref({
   visible: false,
@@ -196,6 +283,17 @@ const addressPopup = ref({
   columnsPlaceholder: null
 })
 
+// 单个日期时间弹窗状态
+const dateTimePopup = ref({
+  visible: false,
+  field: null,
+  selectedTime: new Date(),
+  currentHour: '8'
+})
+
+
+
+
 const normalizedSchema = computed(() =>
   props.schema.map((item) => ({
     ...item,
@@ -206,6 +304,8 @@ const normalizedSchema = computed(() =>
 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 ''
 }
@@ -303,6 +403,137 @@ const closeDateRange = () => {
   dateRangePopup.value.visible = false
 }
 
+// 打开日期时间范围选择
+const openDateTimeRange = (field) => {
+  dateTimeRangePopup.value.visible = true
+  dateTimeRangePopup.value.field = field
+  
+  // 设置默认时间：开始时间为当天8:30，结束时间为当天17:30
+  const today = new Date()
+  const defaultStartTime = new Date(today)
+  defaultStartTime.setHours(8, 30, 0, 0)
+  const defaultEndTime = new Date(today)
+  defaultEndTime.setHours(17, 30, 0, 0)
+  
+  // 将field的startTime和endTime转换为日期时间格式
+  dateTimeRangePopup.value.startTime = typeof field.startTime === 'string' ? reverseFormatDateTime(field.startTime) : defaultStartTime
+  dateTimeRangePopup.value.endTime = typeof field.endTime === 'string' ? reverseFormatDateTime(field.endTime) : defaultEndTime
+}
+
+const closeDateTimeRange = () => {
+  dateTimeRangePopup.value.visible = false
+}
+
+// 日期时间选择器改变事件处理
+const onDateTimeChange = (params,type) => {
+  
+  // 更新当前选择的小时值
+  if (params && params.selectedValue && params.columnIndex === 3) {
+    // 更新小时值
+    // 根据小时值设置默认分钟值
+    if (['08', '17'].includes(params.selectedValue[3])) {
+      // 小时为08或17时，分钟设为30
+      if(type === 'startTime'){
+        dateTimeRangePopup.value.startTime.setMinutes(30)
+      }else{
+        dateTimeRangePopup.value.endTime.setMinutes(30)
+      }
+    } else if (['12', '13'].includes(params.selectedValue[3])) {
+      // 小时为12或13时，分钟设为00
+      if(type === 'startTime'){
+        dateTimeRangePopup.value.startTime.setMinutes(0)
+      }else{
+        dateTimeRangePopup.value.endTime.setMinutes(0)
+      }
+    }
+    if(type === 'startTime'){
+      dateTimeRangePopup.value.currentStartHour = params.selectedValue[3];
+    }else{
+      dateTimeRangePopup.value.currentEndHour = params.selectedValue[3];
+    }
+    
+  }
+}
+
+// 确认日期时间范围选择
+const confirmDateTimeRange = () => {
+  if(!dateTimeRangePopup.value.startTime || !dateTimeRangePopup.value.endTime){
+    return
+  }
+  if(dateTimeRangePopup.value.startTime.getTime()>=dateTimeRangePopup.value.endTime.getTime()){
+    showNotify({ type: 'warning', message: '结束时间必须晚于开始时间' });
+    return
+  }
+  console.log(dateTimeRangePopup.value.startTime.getTime()<dateTimeRangePopup.value.endTime.getTime())
+  // 格式化日期时间范围
+  const startDateStr = formatDateTime(dateTimeRangePopup.value.startTime)
+  const endDateStr = formatDateTime(dateTimeRangePopup.value.endTime)
+  console.log('开始时间：', startDateStr);
+  console.log('结束时间：', endDateStr);
+  // 更新表单数据
+  if (dateTimeRangePopup.value.field) {
+    updateFieldValue(dateTimeRangePopup.value.field.field, [startDateStr, endDateStr])
+  }
+  // 关闭弹窗
+  closeDateTimeRange()
+}
+
+// 日期时间选择器筛选函数
+// 通用时间过滤函数，根据类型（开始时间/结束时间）和当前小时值过滤选项
+const timeFilter = (type, options, timeType) => {
+  if (type === 'hour') {
+    return options.filter(option => ['08', '12', '13', '17'].includes(option.value))
+  } else if (type === 'minute') {
+    // 获取对应时间类型的当前小时值
+    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 {
+      return options.filter(option => ['30'].includes(option.value))
+    }
+  }
+  return 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') {
+    // 当小时位是'12'或者'13'时，分钟只保留'00'
+    if (['12','13'].includes(dateTimePopup.value.currentHour)) {
+      return options.filter(option => ['00'].includes(option.value))
+    } else {
+      return options.filter(option => ['30'].includes(option.value))
+    }
+  }
+  return options
+}
+// 格式化日期时间为字符串
+var formatDateTime = (date) => {
+  const y = date.getFullYear()
+  const m = `${date.getMonth() + 1}`.padStart(2, '0')
+  const d = `${date.getDate()}`.padStart(2, '0')
+  const h = `${date.getHours()}`.padStart(2, '0')
+  const min = `${date.getMinutes()}`.padStart(2, '0')
+  return `${y}-${m}-${d} ${h}:${min}`
+}
+// 解析字符串为日期时间对象
+var reverseFormatDateTime = (dateStr) => {
+  const [datePart, timePart] = dateStr.split(' ')
+  const [y, m, d] = datePart.split('-')
+  const [h, min] = timePart.split(':')
+  return new Date(`${y}-${m}-${d}T${h}:${min}`)
+}
+
 const formatDate = (date) => {
   const y = date.getFullYear()
   const m = `${date.getMonth() + 1}`.padStart(2, '0')
@@ -328,6 +559,17 @@ const getDateRangeText = (field) => {
   return ''
 }
 
+const getDateTimeRangeText = (field) => {
+  const value = formData[field.field]
+  if (Array.isArray(value) && value[0] && value[1]) {
+    // 只显示日期部分用于预览
+    const startDate = value[0]
+    const endDate = value[1]
+    return `${startDate} ~ ${endDate}`
+  }
+  return ''
+}
+
 // Address
 const openAddressPicker = (field) => {
   addressPopup.value = {
@@ -363,8 +605,78 @@ const getAddressText = (field) => {
   const value = formData[field.field]
   if (!value) return ''
   const parts = [value.province, value.city, value.county].filter(Boolean)
-  return parts.join(' ')
+  return parts.join('')
+}
+
+// 单个日期时间
+const openDateTime = (field) => {
+  dateTimePopup.value.visible = true
+  dateTimePopup.value.field = field
+  
+  // 设置默认时间为当天8:30
+  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
+  
+  // 初始化当前小时值
+  dateTimePopup.value.currentHour = '8'
+}
+
+const closeDateTime = () => {
+  dateTimePopup.value.visible = false
+}
+
+const confirmDateTime = () => {
+  if (!dateTimePopup.value.selectedTime) {
+    return
+  }
+  
+  // 格式化日期时间
+  const dateTimeStr = formatDateTime(dateTimePopup.value.selectedTime)
+  
+  // 更新表单数据
+  if (dateTimePopup.value.field) {
+    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>
 
 <style scoped lang="scss">
@@ -392,6 +704,73 @@ const getAddressText = (field) => {
   }
 }
 
+.datetime-range-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;
+    }
+    
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+  
+  .datetime-content {
+    padding: 20px 16px;
+    
+    :deep(.van-picker-column__item--selected) {
+      font-weight: 500;
+    }
+  }
+  
+  .time_title {
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+  }
+}
+
+.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;
 }