vue_zhongyou 1.0.8 → 1.0.10

package/package.json

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

@@ -0,0 +1,637 @@
+<template>
+  <van-form class="dynamic-mobile-form" @submit="handleSubmit" >
+    <van-cell-group inset style="margin: 0px;">
+      <template v-for="field in normalizedSchema" :key="field.field">
+        <!-- 输入框 -->
+        <van-field
+          v-if="field.type === 'input' || field.type === 'textarea'"
+          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 || []"
+          :maxlength="field.maxlength"
+          :rows="field.rows || (field.type === 'textarea' ? 3 : undefined)"
+          :autosize="field.type === 'textarea'"
+          :disabled="field.disabled"
+          clearable
+          @update:model-value="(val) => updateFieldValue(field.field, val)"
+        />
+
+        <!-- 单选 -->
+        <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]" 
+              direction="horizontal"
+              @change="(val) => updateFieldValue(field.field, val)"
+            >
+              <van-radio
+                v-for="option in field.options"
+                :key="option.value"
+                :name="option.value"
+                shape="dot"
+              >
+                {{ option.label }}
+              </van-radio>
+            </van-radio-group>
+          </template>
+        </van-field> 
+
+
+        <!-- 多选 -->
+        <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]" 
+              direction="horizontal"
+              @change="(val) => updateFieldValue(field.field, val)"
+            >
+              <van-checkbox
+                v-for="option in field.options"
+                :key="option.value"
+                :name="option.value"
+                shape="square"
+              >
+                {{ option.label }}
+              </van-checkbox>
+            </van-checkbox-group>
+          </template>
+        </van-field>
+
+        <!-- 选择器 -->
+        <van-field
+          v-else-if="field.type === 'select'"
+          is-link
+          readonly
+          :label="field.label"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          :model-value="getSelectLabel(field)"
+          :rules="field.rules || []"
+          @click="openSelect(field)"
+        />
+
+        <!-- 时间范围 -->
+        <van-field
+          v-else-if="field.type === 'dateRange'"
+          is-link
+          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'"
+          is-link
+          readonly
+          :label="field.label"
+          :placeholder="field.placeholder || '请选择地址'"
+          :rules="field.rules || []"
+          :model-value="getAddressText(field)"
+          @click="openAddressPicker(field)"
+        />
+
+
+        <!-- 自定义内容 -->
+        <slot v-else :field="field" :value="formData[field.field]" />
+      </template>
+    </van-cell-group>
+
+    <slot name="actions">
+      <div class="form-actions">
+        <van-button size="small"  @click.prevent="handleReset">
+          {{ resetButtonLabel }}
+        </van-button>
+        <van-button
+          type="primary"
+          size="small"
+          native-type="submit"
+          :loading="submitting"
+        >
+          {{ submitButtonLabel }}
+        </van-button>
+      </div>
+    </slot>
+  </van-form>
+
+  <!-- 下拉选择 -->
+  <van-popup v-model:show="selectPopup.visible" position="bottom" round>
+    <van-picker
+      show-toolbar
+      :columns="selectPopup.options"
+      @confirm="onSelectConfirm"
+      @cancel="closeSelect"
+    />
+    
+  </van-popup>
+
+  <!-- 时间范围 -->
+  <van-calendar
+    v-model:show="dateRangePopup.visible"
+    type="range"
+    color="#1989fa"
+    :min-date="dateRangePopup.minDate"
+    :max-date="dateRangePopup.maxDate"
+    @confirm="onDateRangeConfirm"
+    @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
+      :area-list="areaList"
+      :columns-placeholder="addressPopup.columnsPlaceholder || ['请选择', '请选择', '请选择']"
+      @confirm="onAddressConfirm"
+      @cancel="closeAddressPicker"
+    />
+  </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,
+    default: () => []
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  submitButtonLabel: {
+    type: String,
+    default: '提交'
+  },
+  resetButtonLabel: {
+    type: String,
+    default: '重置'
+  },
+  submitting: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'submit', 'reset'])
+
+const formData = reactive({})
+
+const selectPopup = ref({
+  visible: false,
+  field: null,
+  options: []
+})
+
+const dateRangePopup = ref({
+  visible: false,
+  field: null,
+  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,
+  field: null,
+  areaList: null,
+  columnsPlaceholder: null
+})
+
+
+
+
+const normalizedSchema = computed(() =>
+  props.schema.map((item) => ({
+    ...item,
+    field: item.field || item.name
+  }))
+)
+
+const getDefaultValue = (type) => {
+  if (type === 'checkbox') return []
+  if (type === 'dateRange') return ['', '']
+  if (type === 'datetimeRange') return ['', '']
+  if (type === 'address') return { province: '', city: '', county: '', code: '' }
+  return ''
+}
+
+const snapshot = () => JSON.parse(JSON.stringify(formData))
+
+const initializeFormData = () => {
+  normalizedSchema.value.forEach((field) => {
+    const key = field.field
+    const incoming = props.modelValue[key]
+    formData[key] = incoming !== undefined ? incoming : field.default ?? getDefaultValue(field.type)
+  })
+}
+
+watch(
+  () => props.schema,
+  () => {
+    initializeFormData()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val) return
+    Object.keys(val).forEach((key) => {
+      formData[key] = val[key]
+    })
+  },
+  { deep: true }
+)
+
+const updateFieldValue = (field, value) => {
+  formData[field] = value
+  emit('update:modelValue', snapshot())
+  emit('change', { field, value, values: snapshot() })
+}
+
+const handleSubmit = () => {
+  emit('submit', snapshot())
+}
+
+const handleReset = () => {
+  initializeFormData()
+  emit('update:modelValue', snapshot())
+  emit('reset', snapshot())
+}
+
+// Select
+const openSelect = (field) => {
+  selectPopup.value = {
+    visible: true,
+    field,
+    options: (field.options || []).map((opt) => ({
+      text: opt.label,
+      value: opt.value
+    }))
+  }
+}
+
+const closeSelect = () => {
+  selectPopup.value.visible = false
+}
+
+const onSelectConfirm = ({ selectedOptions }) => {
+  const option = selectedOptions?.[0]
+  if (option && selectPopup.value.field) {
+    updateFieldValue(selectPopup.value.field.field, option.value)
+  }
+  closeSelect()
+}
+
+const getSelectLabel = (field) => {
+  const value = formData[field.field]
+  const option = (field.options || []).find((opt) => opt.value === value)
+  return option ? option.label : ''
+}
+
+// Date range
+const openDateRange = (field) => {
+  dateRangePopup.value.visible = true
+  dateRangePopup.value.field = field
+  // 计算前后五年的日期范围
+  const currentDate = new Date()
+  const fiveYearsAgo = new Date(currentDate.getFullYear() - 5, currentDate.getMonth(), currentDate.getDate())
+  const fiveYearsLater = new Date(currentDate.getFullYear() + 5, currentDate.getMonth(), currentDate.getDate())
+  
+  // 如果没有设置minDate和maxDate，则使用前后五年的范围
+  dateRangePopup.value.minDate = field.minDate || fiveYearsAgo
+  dateRangePopup.value.maxDate = field.maxDate || fiveYearsLater
+}
+
+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 startTimeFilter = (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.currentStartHour)) {
+      return options.filter(option => ['00'].includes(option.value))
+    }else{
+      return options.filter(option => ['30'].includes(option.value))
+    }
+  }
+  return options
+}
+const endTimeFilter = (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)) {
+      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')
+  const d = `${date.getDate()}`.padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+const onDateRangeConfirm = (values) => {
+  if (!values || values.length !== 2 || !dateRangePopup.value.field) {
+    closeDateRange()
+    return
+  }
+  const [start, end] = values
+  updateFieldValue(dateRangePopup.value.field.field, [formatDate(start), formatDate(end)])
+  closeDateRange()
+}
+
+const getDateRangeText = (field) => {
+  const value = formData[field.field]
+  if (Array.isArray(value) && value[0] && value[1]) {
+    return `${value[0]} ~ ${value[1]}`
+  }
+  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 = {
+    visible: true,
+    field,
+    areaList: areaList,
+    columnsPlaceholder: field.columnsPlaceholder
+  }
+}
+
+const closeAddressPicker = () => {
+  addressPopup.value.visible = false
+}
+
+const onAddressConfirm = ({ selectedOptions }) => {
+  if (!selectedOptions || !addressPopup.value.field) {
+    closeAddressPicker()
+    return
+  }
+  console.log(selectedOptions);
+  
+  const [province, city, county] = selectedOptions
+  updateFieldValue(addressPopup.value.field.field, {
+    province: province?.text || '',
+    city: city?.text || '',
+    county: county?.text || '',
+    code: county?.value || city?.value || province?.value || ''
+  })
+  closeAddressPicker()
+}
+
+const getAddressText = (field) => {
+  const value = formData[field.field]
+  if (!value) return ''
+  const parts = [value.province, value.city, value.county].filter(Boolean)
+  return parts.join('')
+}
+
+
+
+</script>
+
+<style scoped lang="scss">
+.dynamic-mobile-form {
+  .field-wrapper {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f7f8fa;
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    .field-label {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+  }
+
+  .form-actions {
+    display: flex;
+    flex-direction: row-reverse;
+
+    padding: 16px;
+    gap: 12px;
+  }
+}
+
+.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;
+  }
+}
+
+:deep(.van-cell) {
+  padding: 8px;
+}
+</style>
+