1231312

<template>
  <el-dialog
    title="列表日期不重叠--2024-03-01--2024-03-31"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible="visiable"
    class="dialog list"
    append-to-body
  >
    <div v-for="(item, index) in timeList" :key="index" style="margin-bottom: 10px">
      <el-date-picker
        v-model="item.time"
        type="daterange"
        :picker-options="pickerOption(index)"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="text" style="margin-left: 10px" @click="delTime(index)">删除</el-button>
    </div>
    <el-button
      type="text"
      @click="addTime"
    >+添加时间</el-button>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visiable = false">关闭</el-button>
      <!--      <el-button type="primary" @click="handleSave">保 存</el-button>-->
    </div>
  </el-dialog>
</template>
<!-- 行单元格编辑 -->
<script>
// import { getInvoiceRemark } from '@/api/demo'

export default {
  data() {
    return {
      // 用于存储所有日期选择器的选中值
      timeList: [],
      visiable: false
    }
  },
  methods: {
    // 打开
    open() {
      this.visiable = !this.visiable
    },
    addTime() {
      const ele = {
        time: []
      }
      this.timeList.push(ele)
      console.log('--', this.timeList)
    },
    delTime(index) {
      this.timeList.splice(index, 1)
    },
    pickerOption(index) {
      const option = {
        disabledDate: (time) => {
          // 过滤当前日期
          const times = this.timeList.map(it => it.time).filter((it, i) => it && i !== index)
          let timeScope = null
          times.forEach((item, indexs) => {
            if (indexs === 0) {
              // -1 解决开始日之前一天不可选中的问题
              timeScope = (time.getTime() > new Date(item[0]).getTime() - 60 * 60 * 24 * 1000 &&
                time.getTime() < new Date(item[1]).getTime() + 1)
            } else {
              timeScope = timeScope || (time.getTime() > new Date(item[0]).getTime() - 60 * 60 * 24 * 1000 &&
                time.getTime() < new Date(item[1]).getTime() + 1)
            }
          })
          return timeScope || (time.getTime() > new Date('2024-03-31').getTime() - 60 * 60 * 24 * 1000 || time.getTime() < new Date('2024-03-01').getTime())
        }
      }
      return option
    }
  }
}
</script>