初始化

src/views/survey/cpnt/MultiDatePicker.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="multi-date-picker">
+    <el-date-picker
+      v-model="selectedDate"
+      type="date"
+      placeholder="选择日期"
+      :picker-options="pickerOptions"
+      @change="handleDateChange"
+    >
+    </el-date-picker>
+    
+    <div class="selected-dates">
+      <el-tag
+        v-for="(date, index) in selectedDates"
+        :key="index"
+        closable
+        @close="removeDate(index)"
+      >
+        {{ formatDate(date) }}
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultiDatePicker',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedDate: null,
+      selectedDates: [...this.value],
+      pickerOptions: {
+        disabledDate: (date) => {
+          // 可选：禁用已选择的日期，避免重复
+          return this.selectedDates.some(
+            selected => this.isSameDay(selected, date)
+          );
+        }
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.selectedDates = [...newVal];
+    }
+  },
+  methods: {
+    handleDateChange(date) {
+      if (!date) return;
+      
+      // 检查是否已存在相同日期
+      const isExist = this.selectedDates.some(
+        selected => this.isSameDay(selected, date)
+      );
+      
+      if (!isExist) {
+        this.selectedDates.push(date);
+        this.emitUpdate();
+      }
+      
+      this.selectedDate = null; // 清空选择器以便再次选择
+    },
+    removeDate(index) {
+      this.selectedDates.splice(index, 1);
+      this.emitUpdate();
+    },
+    isSameDay(date1, date2) {
+      return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+      );
+    },
+    formatDate(date) {
+      return date.toLocaleDateString('zh-CN');
+    },
+    emitUpdate() {
+      // 按照日期排序
+      this.selectedDates.sort((a, b) => a - b);
+      // 触发更新事件
+      this.$emit('input', [...this.selectedDates]);
+      this.$emit('change', [...this.selectedDates]);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.multi-date-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.selected-dates {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 10px;
+}
+
+.el-tag {
+  margin-right: 5px;
+}
+</style>