javascript - 动态添加时间范围，如何置灰已选择时间？

Question

先说下需求：开始时段和结束时段是24小时按照30分钟分割成48个点的数据，数据格式如下：["00:00","00:30","01:00","01:30",.....,"23:30"]，每行数据后都有新增和删除操作。

1、开始时段选择后，结束时段小于开始时段的值置灰不能选择。

2、假如：开始时段选择了 "01:00",结束时段选择了 "03:30"，点击后边新增时，前边已选的数据置灰不能选择，第二条的数据选择只能在这个范围内："00:00"-"01:00","03:30"-"23:30"，
当用户开始时间选择了"00:00"，则结束时间只能选择"00:00"到"01:00"范围内的任何一个值，其他时间段都置灰。
当用户开始时间选择了"03:30"，则结束时间只能在"03:30"到"23:30"范围内的任何一个值，而"00:00"到"03:30"置灰不能选择。

3、当第二条数据选择了 "05:00"，结束时间选择了"05:30"，点击后边新增时，前边已选的数据置灰不能选择，第三条的数据选择只能在这个范围内:"00:00"-"01:00","03:30"-"05:00","05:30"-"23:00"，
当用户开始时间选择了"00:00"，则结束时间只能选择"00:00"到"01:00"范围内的任何一个值，其他时间段都置灰。
当用户开始时间选择了"03:30"，则结束时间只能选择"03:30"到"05:00"范围内的任何一个值，其他时间段都置灰。
当用户开始时间选择了"05:30"，则结束时间只能在"05:30"到"23:30"范围内的任何一个值，而"00:00"到"05:30"置灰不能选择。
以此类推...

4、当删除某行数据时，已删除的数据要重新进行可选和置灰操作。

页面如下：
初次进入页面显示：

添加一行数据显示：

以下是我的代码，各位大佬后边的逻辑如何实现？

html

<template>  <el-dialog    :visible.sync="showSetDialog.visible"    v-dialogDrag    width="620px"    :title="showSetDialog.title"    :close-on-click-modal="false"    :append-to-body="true"    @close="handleDialogClose"  >    <el-form ref="form" size="mini" label-width="90px" :inline="true">      <div v-for="(item, index) in allTimeData" :key="index">        <el-form-item prop="startTime">          <el-select            v-model="item.startTime"            placeholder="开始时段"            style="margin-right: 5px"            @change="handleStartChange"          >            <el-option              v-for="(list, index) in stList"              :key="index"              :value="list.value"              :label="list.label"              :disabled="list.disabled"            ></el-option> </el-select          >-        </el-form-item>        <el-form-item prop="endTime">          <el-select            v-model="item.endTime"            placeholder="结束时段"          >            <el-option              v-for="(list, index) in etList"              :key="index"              :value="list.value"              :label="list.label"              :disabled="list.disabled"            ></el-option>          </el-select>        </el-form-item>        <el-form-item>          <i            v-if="index == allTimeData.length - 1"            class="el-icon-circle-plus-outline plus-icon"            @click="handleElecPlus(item)"          ></i>          <i            v-if="allTimeData.length > 1"            class="el-icon-remove-outline remove-icon"            @click="handleElecRemove(index)"          ></i>        </el-form-item>      </div>    </el-form>    <div slot="footer" class="dialog-footer">      <el-button size="small" @click="handleDialogClose">取 消</el-button>      <el-button size="small" type="primary" @click="handleDialogSave">        确 定      </el-button>    </div>  </el-dialog></template>

js

<script>export default {   data(){     return {       newItem: {        startTime: "",        endTime: "",      },      allTimeData: [        {          startTime: "",          endTime: "",        },      ],    timeOptions: [    "00:00",    "00:30",    "01:00",    "01:30",    "02:00",    "02:30",    "03:00",    "03:30",    "04:00",    "04:30",    "05:00",    "05:30",    "06:00",    "06:30",    "07:00",    "07:30",    "08:00",    "08:30",    "09:00",    "09:30",    "10:00",    "10:30",    "11:00",    "11:30",    "12:00",    "12:30",    "13:00",    "13:30",    "14:00",    "14:30",    "15:00",    "15:30",    "16:00",    "16:30",    "17:00",    "17:30",    "18:00",    "18:30",    "19:00",    "19:30",    "20:00",    "20:30",    "21:00",    "21:30",    "22:00",    "22:30",    "23:00",    "23:30"]     }   },  props: {    showSetDialog: {      type: Object,      default: () => ({}),    },  },computed: {   // 获取起始时刻的数据    stList() {      return this.timeOptions.map((item) => ({        value: item,        label: item,        disabled: false,      }));   // 获取结束时间的数据   etList() {      return this.timeOptions.map((item) => ({        value: item,        label: item,        disabled: false,     }));    },},methods： {   // 新增    handleElecPlus(item) {      if (item.startTime && item.endTime) {        this.allTimeData.push(this.newItem);      } else {        this.$message.warning("开始时间和结束时间不能为空");        return false;      }    },    // 删除当前行    handleElecRemove(index) {      this.allTimeData.splice(index, 1);    },    // 触发开始时间下拉框事件    handleStartChange() {},}}</script>

Answer 1

我觉得你可以动态生成 timeOptions
你可以用一个计算属性调用 generatorTimeOptions ，根据已选的数据传入适当的 skipList 这样你就不用关心 删除 新增这些逻辑了。

/** * 生成时间选项 * * @param startTime 开始时间，单位为分钟，默认为0 * @param endTime 结束时间，单位为分钟，默认为1440 * @param step 步长，单位为分钟，默认为30 * @param skipList 需要跳过的时间段列表，格式为[['00:00', '01:00'], '02:00']，默认为空数组 * @returns 返回时间选项数组，格式为['00:00', '00:30', ...] */export function generatorTimeOptions(startTime = 0, endTime = 1440, step = 30, skipList = []) {  let currentTime = startTime  const options = []  let skipMinutes = []  if (skipList && skipList.length > 0) {    skipMinutes = skipList.map((item) => {      if (Array.isArray(item) && item.length === 2) {        return {          start: timeToMinutes(item[0]),          end: timeToMinutes(item[1]),        }      } else if (Array.isArray(item) && item.length === 1) {        return {          start: timeToMinutes('00:00'),          end: timeToMinutes(item[0]),        }      } else if (item && item.split(':').length === 2) {        return {          start: timeToMinutes('00:00'),          end: timeToMinutes(item),        }      }    })  }  while (currentTime < endTime) {    let skip = false    if (skipMinutes.length > 0) {      skipMinutes.forEach((item) => {        if (currentTime >= item.start && currentTime <= item.end) {          skip = true        }      })    }    if (!skip) {      options.push(minutesToTime(currentTime))    }    currentTime += step  }  return options}function timeToMinutes(time = '00:00') {  return time.split(':').reduce((total, cur, index) => {    if (index === 0) {      total += Number(cur) * 60    } else {      total += Number(cur)    }    return total  }, 0)}function minutesToTime(minutes = 0) {  let hour = Math.floor(minutes / 60)  let minute = minutes % 60  if (minute < 10) {    minute = `0${minute}`  }  if (hour < 10) {    hour = `0${hour}`  }  return `${hour}:${minute}`}

上面的代码你可以存为一个文件
然后在你的代码里

import {generatorTimeOptions} from '文件位置'// ...computed: {   timeOptions() {      const skipList = this.allTimeData.map(item => {         return item.startTime && item.endTime ? {            start: item.startTime,            end: item.endTime,         } : item.startTime      })      return generatorTimeOptions(0, 1440, 30, skipList);   }

Answer 2

试试这个

// 计算结束时间是否应被禁用isDisabledEndTime(timeOption, dataIndex) {  if (dataIndex === 0) {    // 第一行的结束时间不受限制    return false;  }  const previousEnd = this.allTimeData[dataIndex - 1].endTime;  // 当前选择的开始时间  const currentStart = this.allTimeData[dataIndex].startTime;  // 遍历已占用的时间区间，找到与当前开始时间相邻的占用区间  const occupiedInterval = this.occupiedIntervals.find(    interval => currentStart >= interval[0] && currentStart <= interval[1]  );  if (occupiedInterval) {    // 如果找到与当前开始时间相邻的占用区间，则禁用在该区间内的结束时间    return timeOption >= occupiedInterval[0] && timeOption <= occupiedInterval[1];  } else {    // 在没有找到相邻占用区间的情况下，仅当结束时间小于等于前一行结束时间时禁用    return timeOption <= previousEnd;  }},

// 更新禁用状态的方法updateOccupiedIntervals() {  this.occupiedIntervals = [];  for (let i = 0; i < this.allTimeData.length; i++) {    const start = this.timeOptions.indexOf(this.allTimeData[i].startTime);    const end = this.timeOptions.indexOf(this.allTimeData[i].endTime);    // 将每个有效时间段添加到占用区间列表，但排除与前一时间段相连的情况    if (i === 0 || start > this.occupiedIntervals[this.occupiedIntervals.length - 1][1]) {      this.occupiedIntervals.push([start, end]);    } else {      this.occupiedIntervals[this.occupiedIntervals.length - 1][1] = Math.max(this.occupiedIntervals[this.occupiedIntervals.length - 1][1], end);    }  }},