vue_zhongyou 1.0.7 → 1.0.9

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,399 @@
+<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"
+          :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">
+          <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">
+          <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)"
+          @click="openSelect(field)"
+        />
+
+        <!-- 时间范围 -->
+        <van-field
+          v-else-if="field.type === 'dateRange'"
+          is-link
+          readonly
+          :label="field.label"
+          :placeholder="field.placeholder || '请选择时间范围'"
+          :model-value="getDateRangeText(field)"
+          @click="openDateRange(field)"
+        />
+
+        <!-- 地址选择 -->
+        <van-field
+          v-else-if="field.type === 'address'"
+          is-link
+          readonly
+          :label="field.label"
+          :placeholder="field.placeholder || '请选择地址'"
+          :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="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'
+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 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 === '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 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 ''
+}
+
+// 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;
+  }
+}
+
+:deep(.van-cell) {
+  padding: 8px;
+}
+</style>
+