vue_zhongyou 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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/ChatForm.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="chat-form">
+    <van-form :model="formData" ref="formRef">
+      <template v-for="field in schema" :key="field.field">
+        <!-- 输入框 -->
+        <van-field
+          v-if="field.type === 'input'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          :placeholder="field.placeholder"
+          :rules="field.rules"
+          :required="field.rules?.some(rule => rule.required)"
+        />
+        
+        <!-- 文本域 -->
+        <van-field
+          v-else-if="field.type === 'textarea'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          type="textarea"
+          :placeholder="field.placeholder"
+          :rows="field.rows || 2"
+          :autosize="field.autosize || false"
+        />
+        
+        <!-- 选择器 -->
+        <van-field
+          v-else-if="field.type === 'select'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          is-link
+          readonly
+          :placeholder="field.placeholder"
+          @click="() => showPicker(field)"
+        >
+          <template #input>
+            <span v-if="formData[field.field]">{{ getOptionLabel(field, formData[field.field]) }}</span>
+          </template>
+        </van-field>
+        
+        <!-- 单选框 -->
+        <van-cell-group v-else-if="field.type === 'radio'" :title="field.label">
+          <van-radio-group v-model="formData[field.field]" direction="horizontal">
+            <van-radio 
+              v-for="option in field.options" 
+              :key="option.value" 
+              :name="option.value"
+              icon-size="16px"
+              checked-color="#1989fa"
+            >
+              {{ option.label }}
+            </van-radio>
+          </van-radio-group>
+        </van-cell-group>
+        
+        <!-- 复选框 -->
+        <van-cell-group v-else-if="field.type === 'checkbox'" :title="field.label">
+          <van-checkbox-group v-model="formData[field.field]" direction="horizontal">
+            <van-checkbox 
+              v-for="option in field.options" 
+              :key="option.value" 
+              :name="option.value"
+              icon-size="16px"
+              checked-color="#1989fa"
+            >
+              {{ option.label }}
+            </van-checkbox>
+          </van-checkbox-group>
+        </van-cell-group>
+        
+        <!-- 日期选择 -->
+        <van-field
+          v-else-if="field.type === 'date'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          is-link
+          readonly
+          :placeholder="field.placeholder"
+          @click="() => showDatePicker(field)"
+        />
+        
+        <!-- 日期范围 -->
+        <van-cell-group v-else-if="field.type === 'dateRange'" :title="field.label">
+          <van-cell
+            :title="`${field.label}开始`"
+            :value="formData[field.field]?.[0] || '请选择'"
+            is-link
+            @click="() => showDateRangePicker(field, 0)"
+          />
+          <van-cell
+            :title="`${field.label}结束`"
+            :value="formData[field.field]?.[1] || '请选择'"
+            is-link
+            @click="() => showDateRangePicker(field, 1)"
+          />
+        </van-cell-group>
+      </template>
+      
+      <!-- 操作按钮 -->
+      <div class="form-actions" v-if="showActions">
+        <van-button 
+          v-if="submitButtonLabel" 
+          type="primary" 
+          block 
+          :loading="isSubmitting"
+          @click="onSubmit"
+        >
+          {{ submitButtonLabel }}
+        </van-button>
+        <van-button 
+          v-if="resetButtonLabel" 
+          type="default" 
+          block 
+          @click="onReset"
+        >
+          {{ resetButtonLabel }}
+        </van-button>
+      </div>
+    </van-form>
+    
+    <!-- 选择器弹窗 -->
+    <van-popup v-model:show="showPickerDialog" position="bottom">
+      <van-picker
+        :columns="currentPickerColumns"
+        @confirm="onPickerConfirm"
+        @cancel="showPickerDialog = false"
+      />
+    </van-popup>
+    
+    <!-- 日期选择器弹窗 -->
+    <van-popup v-model:show="showDatePickerDialog" position="bottom">
+      <van-date-picker
+        v-model="currentDateValue"
+        @confirm="onDatePickerConfirm"
+        @cancel="showDatePickerDialog = false"
+      />
+    </van-popup>
+    
+    <!-- 日期范围选择器弹窗 -->
+    <van-popup v-model:show="showDateRangePickerDialog" position="bottom">
+      <van-date-picker
+        v-model="currentDateRangeValue"
+        @confirm="onDateRangePickerConfirm"
+        @cancel="showDateRangePickerDialog = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue'
+import { showToast } from 'vant'
+
+// 定义组件属性
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  schema: {
+    type: Array,
+    required: true
+  },
+  submitButtonLabel: {
+    type: String,
+    default: '提交'
+  },
+  resetButtonLabel: {
+    type: String,
+    default: '重置'
+  },
+  showActions: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'submit', 'change'])
+
+// 表单数据
+const formData = ref({})
+
+// 表单引用
+const formRef = ref(null)
+
+// 提交状态
+const isSubmitting = ref(false)
+
+// 弹窗相关
+const showPickerDialog = ref(false)
+const showDatePickerDialog = ref(false)
+const showDateRangePickerDialog = ref(false)
+const currentField = ref(null)
+const currentPickerColumns = ref([])
+const currentDateValue = ref(new Date())
+const currentDateRangeValue = ref([new Date(), new Date()])
+
+// 初始化表单数据
+const initializeFormData = () => {
+  const data = { ...props.modelValue }
+  
+  props.schema.forEach(field => {
+    // 如果没有初始值但有默认值，则使用默认值
+    if (!(field.field in data) && 'default' in field) {
+      data[field.field] = field.default
+    }
+    
+    // 确保所有字段都在数据中
+    if (!(field.field in data)) {
+      if (field.type === 'checkbox') {
+        data[field.field] = []
+      } else if (field.type === 'dateRange') {
+        data[field.field] = []
+      } else {
+        data[field.field] = ''
+      }
+    }
+  })
+  
+  formData.value = data
+}
+
+// 获取选项标签
+const getOptionLabel = (field, value) => {
+  const option = field.options.find(opt => opt.value === value)
+  return option ? option.label : value
+}
+
+// 显示选择器
+const showPicker = (field) => {
+  currentField.value = field
+  currentPickerColumns.value = field.options.map(option => ({
+    text: option.label,
+    value: option.value
+  }))
+  showPickerDialog.value = true
+}
+
+// 选择器确认
+const onPickerConfirm = ({ selectedValues }) => {
+  const value = selectedValues[0]
+  formData.value[currentField.value.field] = value
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value })
+  showPickerDialog.value = false
+}
+
+// 显示日期选择器
+const showDatePicker = (field) => {
+  currentField.value = field
+  currentDateValue.value = formData.value[field.field] ? new Date(formData.value[field.field]) : new Date()
+  showDatePickerDialog.value = true
+}
+
+// 日期选择器确认
+const onDatePickerConfirm = ({ selectedValues }) => {
+  const date = new Date(selectedValues[0], selectedValues[1] - 1, selectedValues[2])
+  const dateString = date.toISOString().split('T')[0]
+  formData.value[currentField.value.field] = dateString
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value: dateString })
+  showDatePickerDialog.value = false
+}
+
+// 显示日期范围选择器
+const showDateRangePicker = (field, index) => {
+  currentField.value = field
+  const range = formData.value[field.field] || []
+  if (range[index]) {
+    currentDateRangeValue.value[index] = new Date(range[index])
+  }
+  showDateRangePickerDialog.value = true
+}
+
+// 日期范围选择器确认
+const onDateRangePickerConfirm = ({ selectedValues }) => {
+  const startDate = new Date(selectedValues[0][0], selectedValues[0][1] - 1, selectedValues[0][2])
+  const endDate = new Date(selectedValues[1][0], selectedValues[1][1] - 1, selectedValues[1][2])
+  
+  const range = [...(formData.value[currentField.value.field] || [])]
+  range[0] = startDate.toISOString().split('T')[0]
+  range[1] = endDate.toISOString().split('T')[0]
+  
+  formData.value[currentField.value.field] = range
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value: range })
+  showDateRangePickerDialog.value = false
+}
+
+// 提交表单
+const onSubmit = async () => {
+  if (formRef.value) {
+    try {
+      await formRef.value.validate()
+      isSubmitting.value = true
+      emit('submit', formData.value)
+    } catch (error) {
+      showToast(error.message || '请检查表单填写是否正确')
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+}
+
+// 重置表单
+const onReset = () => {
+  initializeFormData()
+  emit('update:modelValue', formData.value)
+}
+
+// 监听表单数据变化
+watch(formData, (newVal) => {
+  emit('update:modelValue', newVal)
+}, { deep: true })
+
+// 监听外部传入的值变化
+watch(() => props.modelValue, (newVal) => {
+  formData.value = { ...newVal }
+}, { deep: true })
+
+// 组件挂载时初始化数据
+onMounted(() => {
+  initializeFormData()
+})
+</script>
+
+<style lang="scss" scoped>
+.chat-form {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 8px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  
+  // 当在消息气泡中显示时，调整样式
+  :deep(.message-bubble) & {
+    background: transparent;
+    box-shadow: none;
+    margin: 0;
+  }
+  
+  .form-actions {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  :deep(.van-cell-group) {
+    margin-bottom: 16px;
+    
+    .van-cell {
+      padding: 12px 0;
+    }
+  }
+  
+  :deep(.van-radio-group--horizontal) {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+  }
+  
+  :deep(.van-checkbox-group--horizontal) {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+  }
+  
+  :deep(.van-radio) {
+    margin-bottom: 4px;
+  }
+  
+  :deep(.van-checkbox) {
+    margin-bottom: 4px;
+  }
+}
+</style>