开发常遇见的bug避雷:日期

只能选择下个月之后的日期

picker-options的用法就是控制选择日期的范围，禁用哪些日期,

:picker-options="{ disabledDate }"

<el-date-picker size="mini" v-model="formInline.changeDates" type="dates"  
   placeholder="选择日期"  format='yyyy-MM-dd' value-format='yyyy-MM-dd'  :picker-options="endDatePicker">
</el-date-picker>

  data(){
        return{
          endDatePicker: this.handelFixDate()
            }
         }
         
   methods:{
     handelFixDate() {
      let self = this;
      return {
        disabledDate(time) { 
          const today = new Date();
          const nextMonthFirst = new Date(today.getFullYear(), today.getMonth() + 1, 1); 
          let t = new Date().getDate(); 
          return time.getTime() < nextMonthFirst ;
        },
      };
    }, 
   } 

GPT给出的案例

禁用特定的日期

<el-date-picker
  v-model="value1"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions1">
</el-date-picker>
 
<script>
export default {
  data() {
    return {
      value1: '',
      pickerOptions1: {
        disabledDate(time) {
          // 禁用今天的日期
          return time.getTime() === new Date().getTime();
        }
      }
    };
  }
}
</script>

限制日期的选择范围

<el-date-picker
  v-model="value3"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions3">
</el-date-picker>
 
<script>
import moment from 'moment';
 
export default {
  data() {
    return {
      value3: '',
      pickerOptions3: {
        disabledDate(time) {
          const now = moment();
          const nextMonthFirstDay = now.clone().startOf('month').add(1, 'months').toDate();
          return time.getTime() < nextMonthFirstDay.getTime();
        }
      }
    };
  }
}
</script>

点击删除时只能删除下个月的数据

1.界面代码

• 使用 el-table 来展示数据，并启用多选框，el-button 来触发删除操作。

<el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"> 
  <el-table-column label="序号" type="index" width="50">
</el-table-column>
  <el-table-column prop="shutdownDate" label="停机日期"></el-table-column>
 </el-table> 
<el-button icon="el-icon-document-copy" size="mini" plain type="danger" @click="handleDelete">删除</el-button>

2.JavaScript 部分

-在 Vue 的 data 和 methods 中，处理多选、日期判断和删除逻辑。

data() { 
return { 
tableData: [ 
{ id: 1, shutdownDate: '2024-01-20' },
{ id: 2, shutdownDate: '2024-02-15' }, 
{ id: 3, shutdownDate: '2024-03-01' } 
], 
selectedRows: [], // 选中的行数据
loading: false }; 
},
methods: {
// 当选择发生变化时，更新选中的行 handleSelectionChange(val) { 
this.selectedRows = val;
},
// 删除操作
handleDelete() {
// 检查是否有选中的行 
if (this.selectedRows.length === 0) {   this.$message.warning('请选择至少一行进行删除');
return; 
}
//获取下个月的日期
const nextMonthDate = this.getNextMonthDate();
//判断所有选中的行的停机日期是否为下个月的日期
const canDelete = this.selectedRows.every(row=>row.shutDownDate === nextMonthDate); 
if(!canDelete){
this.$message.warning('只能删除停机日期为下个月的行'); return;
}

 this.$confirm('此操作将永久删除选中设备, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await deleteEquipMaintenance(this.esmIdList);
          if(res.code!==200){
            return this.$message.error('删除设备失败！');
          }
          this.$message({type: 'success',message: '删除设备成功!'}); 
            this.getList();
          }).catch(() => {
            this.$message({type: 'info',message: '已取消删除' });          
          });   
} ,
//获取下个月的日期
getNextMonthDate() { 
const today = new Date(); 
const nextMonth = new Date(today.getFullYear(),today.getMonth() + 1, 1); 
// 下个月的第一天 
return this.formatDate(nextMonth); },
}，// 格式化日期（将日期对象转换为"yyyy-mm-dd"格式） formatDate(date) { 
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, '0');
const d = date.getDate().toString().padStart(2, '0'); return `${y}-${m}-${d}`; }

只能删除今天的日期

const today = new Date();
const todayDate = this.formatDate(today); 
// 格式化为 "yyyy-MM-dd" 
// 判断所有选中的行的停机日期是否为今天之后的日期 const canDelete = this.selectedRows.every(row => row.shutdownDate > todayDate); 
if (!canDelete) { this.$message.warning('只能删除今天之后的停机日期'); 
return; 
}