基于el-cascader三级联动实现日报周报时间区间选择

已于 2022-06-23 10:39:38 修改
阅读量411 收藏 1
点赞数 5
分类专栏： element UI 文章标签： 前端 javascript
于 2022-06-20 14:41:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codingMonkeyKing/article/details/125372219
版权

做过日报周报月报需求的童鞋就会发现，这块需求好复杂，心想为啥不在提交表单的时候，直接验证就好了，为啥要在选择的时候，难为前端，无奈~~，产品童鞋说用户体验会更好，用户至上！！！

直接上效果图：

每天开始时间、截止时间选项联动规则：
a.时间范围：1小时 ≤ 时间 ≤ 24小时；
b.时间联动规则：当用户先设置开始时间，选择开始时间为 “当日 9时 15分” 时，截止时间可选范围为 “当日 10时 15分” 至 “次日 9时 15分”；当用户先设置截止时间，选择截止时间 “当日 20时 0分”时，开始时间可选范围为“当日 0时 0分” 至“当日 19时 0分”；

每周开始时间、截止时间选项联动规则：
a.时间范围：1小时 ≤ 时间 ≤ 7天；
b.时间联动规则：当用户先设置开始时间，选择开始时间为 “周三 10时 0分” 时，截止时间可选范围为 “周三 11时 0分” 至 “次周三 10时 0分”；当用户先设置截止时间，选择截止时间 “周三 11时 0分”时，开始时间可选范围为“周一 0时 0分” 至“周三 10时 0分”；

直接上代码：

<template>
  <div class="fill-time-select">
    <!-- 填写频率 -->
    <li class="template-setting__content">
      <span class="setting-item">
        填写频率
      </span>
      <div class="template-setting-period setting-value">
        <el-select v-model="defultSubmitCycle" @change="handlePeriodChange" popper-class="template-period-popper">
          <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </li>

    <!-- 提交时间段 -->
    <li class="template-setting__content">
      <span class="setting-item">
        开始时间
      </span>
      <div class="template-setting-time-solt setting-value">
        <el-cascader id="sub-startTime" ref="subStartTime" v-model="subStartTime" :options="optionsStartDate" :separator="' '" :placeholder="''" @change="handleStartDateChange" popper-class="template-time-popper log-template-setting">
        </el-cascader>
      </div>
    </li>
    <li class="template-setting__content">
      <span class="setting-item">
        截止时间
      </span>
      <div class="template-setting-time-solt setting-value">
        <el-cascader id="sub-endTime" ref="subEndTime" v-model="subEndTime" :options="optionsEndDate" :separator="' '" :placeholder="''" @change="handleEndDateChange" popper-class="template-time-popper log-template-setting">
        </el-cascader>
      </div>
    </li>
  </div>
</template>
<script>
let submitCycle = 1; //1 日报  2周报
let submitWeek = [
  '周一',
  '周二',
  '周三',
  '周四',
  '周五',
  '周六',
  '周日',
  '次周一',
  '次周二',
  '次周三',
  '次周四',
  '次周五',
  '次周六',
  '次周日',
];
let timeOptions = [
  {
    value: 1,
    label: '每天',
  },
  {
    value: 2,
    label: '每周',
  },
//   {
//     value: 3,
//     label: '每月',
//   },
//   {
//     value: 4,
//     label: '不重复',
//   },
];
let startWeekOptions = [
  {
    value: '周一',
    label: '周一',
    children: [],
  },
  {
    value: '周二',
    label: '周二',
    children: [],
  },
  {
    value: '周三',
    label: '周三',
    children: [],
  },
  {
    value: '周四',
    label: '周四',
    children: [],
  },
  {
    value: '周五',
    label: '周五',
    children: [],
  },
  {
    value: '周六',
    label: '周六',
    children: [],
  },
  {
    value: '周日',
    label: '周日',
    children: [],
  },
];
let endWeekOptions = [
  {
    value: '周二',
    label: '周二',
    children: [],
  },
  {
    value: '周三',
    label: '周三',
    children: [],
  },
  {
    value: '周四',
    label: '周四',
    children: [],
  },
  {
    value: '周五',
    label: '周五',
    children: [],
  },
  {
    value: '周六',
    label: '周六',
    children: [],
  },
  {
    value: '周日',
    label: '周日',
    children: [],
  },
  {
    value: '次周一',
    label: '次周一',
    children: [],
  },
  {
    value: '次周二',
    label: '次周二',
    children: [],
  },
];
let minutesArr = [
  { value: '0', label: '0分' },
  { value: '15', label: '15分' },
  { value: '30', label: '30分' },
  { value: '45', label: '45分' },
];
export default {
  data() {
    return {
      submitPeriod: submitWeek.slice(5),
      minutes: [0, 15, 30, 45],
      optionsStartDate: [],
      optionsEndDate: [],
      defultSubmitCycle: '1',
      subStartTime: ['当日', 0, 0],
      subEndTime: ['次日', 0, 0],
      timeOptions: timeOptions,
      startFirstOptions: [
        {
          value: '当日',
          label: '当日',
          children: [],
        },
      ],
      endFirstOptions: [
        {
          value: '当日',
          label: '当日',
          children: [],
        },
        {
          value: '次日',
          label: '次日',
          children: [],
        },
      ],
    };
  },
  created() {
    this.optionsStartDate = this.getStartDateOptionsDayList(24, 45); //24个小时4个分钟选择
    this.optionsEndDate = this.getEndDateOptionsDayList(0, 0);
    this.defultSubmitCycle = submitCycle;
  },
  components: {},
  computed: {},
  methods: {
    getStartDateOptionsDayList(currentHour, currentMinute) {
      currentHour = currentHour * 1;
      currentMinute = currentMinute * 1;
      let optionsDay = JSON.parse(JSON.stringify(this.startFirstOptions));
      let tempMinArr = []; //开始 当日0时15分，则结束 当日1时15分---次日0时15分
      const len = optionsDay.length;
      let tempWeekArr = JSON.parse(JSON.stringify(submitWeek));
      if (
        tempWeekArr.reverse().slice(7).includes(this.subEndTime[0]) ||
        this.subEndTime[0] == '当日'
      ) {
        for (let i = 0; i < currentHour; i++) {
          if (i === currentHour - 1) {
            tempMinArr = JSON.parse(JSON.stringify(minutesArr));
            tempMinArr.splice(this.minutes.indexOf(currentMinute) + 1);
          } else {
            tempMinArr = minutesArr;
          }
          //最后一天设置
          optionsDay[len - 1].children.push({
            value: i + '',
            label: i + '时',
            children: tempMinArr,
          });
        }
      } else {
        for (let i = 0; i < 24; i++) {
          //最后一天设置
          optionsDay[len - 1].children.push({
            value: i + '',
            label: i + '时',
            children: minutesArr,
          });
        }
      }

      if (optionsDay[0].value !== '当日') {
        for (let i = 0; i < 24; i++) {
          //开始时间第一天到倒数第二天设置
          optionsDay.map((v, index) => {
            if (index == len - 1) return;
            v.children.push({
              value: i + '',
              label: i + '时',
              children: minutesArr,
            });
          });
        }
      }
      return optionsDay;
    },
    getEndDateOptionsDayList(currentHour, currentMinute) {
      currentHour = currentHour * 1;
      currentMinute = currentMinute * 1;
      let optionsDay = JSON.parse(JSON.stringify(this.endFirstOptions));
      let tempMinArr = []; //开始 当日0时15分，则结束 当日1时15分---次日0时15分
      for (let i = currentHour + 1; i < 24; i++) {
        //结束时间首项设置
        if (i === currentHour + 1) {
          tempMinArr = JSON.parse(JSON.stringify(minutesArr));
          tempMinArr = tempMinArr.slice(this.minutes.indexOf(currentMinute));
        } else {
          tempMinArr = minutesArr;
        }
        optionsDay[0].children.push({
          value: i + '',
          label: i + '时',
          children: tempMinArr,
        });
      }
      for (let i = 0; i < currentHour + 1; i++) {
        //结束时间末项设置
        if (i === currentHour) {
          tempMinArr = JSON.parse(JSON.stringify(minutesArr));
          tempMinArr.splice(this.minutes.indexOf(currentMinute) + 1);
        } else {
          tempMinArr = minutesArr;
        }
        optionsDay[optionsDay.length - 1].children.push({
          value: i + '',
          label: i + '时',
          children: tempMinArr,
        });
      }
      if (optionsDay[0].value !== '当日') {
        for (let i = 0; i < 24; i++) {
          const lastIndex = optionsDay.length - 1;
          optionsDay.map((v, index) => {
            if (index === 0 || index === lastIndex) return;
            v.children.push({
              value: i + '',
              label: i + '时',
              children: minutesArr,
            });
          });
        }
      }
      return optionsDay;
    },
    handleStartDateChange(value) {
      this.subStartTime = value;
      console.log(this.subStartTime);
      const day = this.subStartTime[0];
      const hour = this.subStartTime[1];
      const min = this.subStartTime[2];

      const endDay = this.subEndTime[0];
      const endHour = this.subEndTime[1];
      const endMin = this.subEndTime[2];
      let needResetEndTime = false;

      switch (this.defultSubmitCycle) {
        case 1:
          needResetEndTime =
            endHour > hour || (endHour === hour && endMin > min);
          if (endDay === '次日' && needResetEndTime) {
            //保证默认值在范围内
            this.subEndTime[1] = hour;
            this.subEndTime[2] = min;
          }
          break;
        case 2:
          //刷新结束时间选择
          let startIndex = 0;
          this.startFirstOptions.map((item, index) => {
            if (item.value === day) {
              startIndex = index;
            }
          });
          let tempWeeks = JSON.parse(JSON.stringify(submitWeek));
          tempWeeks = tempWeeks.splice(startIndex);
          this.endFirstOptions = [];
          for (let i = 0; i < 8; i++) {
            this.endFirstOptions.push({
              value: tempWeeks[i],
              label: tempWeeks[i],
              children: [],
            });
          }
          //刷新结束时间默认值，保证默认值在范围内
          const endIndex = submitWeek.indexOf(this.subEndTime[0]);
          needResetEndTime =
            startIndex + 7 < endIndex ||
            (startIndex + 7 === endIndex && endHour > hour) ||
            (startIndex + 7 === endIndex && endHour === hour && endMin > min);
          if (needResetEndTime) {
            this.subEndTime[0] = submitWeek[startIndex + 7];
            this.subEndTime[1] = hour;
            this.subEndTime[2] = min;
          }
          break;
      }
      this.optionsEndDate = this.getEndDateOptionsDayList(hour, min);
    },
    handleEndDateChange(value) {
      this.subEndTime = value;
      console.log(this.subEndTime);
      const day = this.subEndTime[0];
      let hour = this.subEndTime[1];
      const min = this.subEndTime[2];
      hour = day === '次日' ? 24 : hour;

      switch (this.defultSubmitCycle) {
        case 1:
          break;
        case 2:
          let tempWeeks = JSON.parse(JSON.stringify(submitWeek));
          let endIndex = tempWeeks.indexOf(day);
          endIndex = endIndex > 6 ? 6 : endIndex;
          this.startFirstOptions = [];
          for (let i = 0; i < endIndex + 1; i++) {
            this.startFirstOptions.push({
              value: tempWeeks[i],
              label: tempWeeks[i],
              children: [],
            });
          }
          break;
      }

      this.optionsStartDate = this.getStartDateOptionsDayList(hour, min);
    },
    handlePeriodChange(value) {
      this.defultSubmitCycle = value;
      switch (value) {
        default:
        case 1:
          this.startFirstOptions = [
            {
              value: '当日',
              label: '当日',
              children: [],
            },
          ];
          this.endFirstOptions = [
            {
              value: '当日',
              label: '当日',
              children: [],
            },
            {
              value: '次日',
              label: '次日',
              children: [],
            },
          ];
          this.subStartTime = ['当日', '0', '0'];
          this.subEndTime = ['次日', '0', '0'];
          this.optionsStartDate = this.getStartDateOptionsDayList(24, 45); //24个小时4个分钟选择
          this.optionsEndDate = this.getEndDateOptionsDayList(0, 0);

          break;
        case 2:
          this.startFirstOptions = startWeekOptions;
          this.endFirstOptions = endWeekOptions;
          this.subStartTime = ['周二', '10', '0'];
          this.subEndTime = ['次周一', '10', '0'];
          this.optionsStartDate = this.getStartDateOptionsDayList(24, 45); //24个小时4个分钟选择
          this.optionsEndDate = this.getEndDateOptionsDayList(10, 0);
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.setting-subtitle {
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2f3033;
  line-height: 25px;
  margin-bottom: 28px;
  margin-top: 28px;
}
.setting-item {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #2f3033;
  line-height: 20px;
  margin-bottom: 10px;
  display: block;
}
.setting-value {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f3033;
  line-height: 22px;
  margin-bottom: 24px;
}
.template-setting-period {
  /deep/ .el-select {
    width: 100%;
    height: 40px;

    &:hover .el-input__inner {
      border-color: #0181ff;
    }
    .el-input__inner {
      padding-left: 12px;
    }
    .el-icon-arrow-up:before {
      color: #b6c5d3;
    }
  }
}

.template-setting-time-solt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  #sub-startTime {
    width: 100%;
    height: 40px;
    border-radius: 4px;
  }

  #sub-endTime {
    width: 100%;
    height: 40px;
    border-radius: 4px;
  }

  span {
    margin: auto 14px;
    width: 17px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #2f3033;
  }

  /deep/ .el-cascader .el-input .el-icon-arrow-down.is-reverse {
    transform: rotateZ(0);
  }
}
</style>

体验传送门：

https://www.yozocloud.cn/

点击免费使用，进入企业用户端，点击头像出现下拉列表选择管理后台，点击应用服务，日志模板管理，新建模板里的填写要求开关打开，然后就体验啦！！！

 

codingMonkeyKing
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
wjxhliu的博客
11-17 3056
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style="width: 100%;">//在el-select里加上一个style="width: xx%;" <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"&gt
element-plus---Cascader三级联动地区选择---json数据
08-19
在这个场景中，"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的Cascader组件来实现中国地区的三级联动选择，数据格式为JSON。 首先，我们来看Cascader组件。Cascader 是一个...
Cascader 级联选择器
weixin_30493401的博客
03-13 356
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。 通过expand-trigger可以定义展开子级菜单的触发方式。 本例还展示了change事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。 <div class...
探索高效日期选择器：antdCascaderDate
gitblog_00063的博客
04-22 293
探索高效日期选择器：antdCascaderDate 项目地址:https://gitcode.com/heerey525/antdCascaderDate 在前端开发中，处理日期和时间的选择是常见的需求，而一个良好设计的组件库可以大大提升用户体验和开发效率。antdCascaderDate 是一个基于 Ant Design 的增强型日期选择器，它将级联选择与日期选择完美结合，为开发者提供了更丰富...
使用element UI Cascader 级联选择器实现简单的选择生日日期的功能（没有年份）
jerrica的博客
06-25 3617
实现效果：选择完成，显示：主要是为了在所有列表中实现按生日日期进行筛选的功能。方法：&lt;tr&gt; &lt;td colspan="2"&gt; &lt;el-form-item label="会员生日" prop="vipBirthday"&gt; &lt;el-cascader :options="birthdayOption
db2日报日期范围取值
无名小卒菜的博客
05-27 448
每周一统计上周一到周日的数据，每周二统计周一的数据， 每周三，四，五，六，日分别统计， 每周一到每周二，三，四，五，六的数据。日期的sql如下： SELECT CASE WHEN DAYOFWEEK(CURRENT DATE) - 1 <= 1 THEN CURRENT DATE - (DAYOFWEEK(CURRENT DATE) + 5) DAY ...
Element-ui(Cascader 级联选择器)实现三级联动
若有所执，必有所成，心之所向，必显光芒
03-10 2087
Element-ui(Cascader 级联选择器)实现三级联动
element el-cascader动态加载数据 （多级联动，落地实现）
qq_54429571的博客
04-27 3825
element el-cascader动态加载数据 （省市区三级联动）
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择、回显及参数整合
爱蹦哒的咸鱼的博客
03-24 1524
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择、回显及参数整合
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
uniapp-cascader
11-14
传统的级联选择器通常只支持一级选择，而uniapp-cascader不仅支持两级，还支持三级级联。这种特性使得在处理如地区选择、组织结构或分类筛选等复杂数据时更加便捷。用户可以在不同层级之间逐级展开，清晰地查看和...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
实现el-cascader组件点击文字即选中效果
最新发布
05-30
实现el-cascader组件点击文字即选中效果
vue2封装的el-cascader三级地址联级选择器组件[拿来即用]
全易
01-12 1443
elementUI Cascader 级联选择器封装的三级地址组件
vue+element Cascader 级联选择器 ＞ 实现省市区三级联动
weixin_42475867的博客
07-15 2393
请安装指定版本的element-china-area-data(5.0.2)，否则可能会导致报错：CodeToText为undefined（我就遇到了（嘘），要注意哦~）
vue和el-cascader选择地区3级联动
m0_61601708的博客
10-24 408
2.使用 （以下使用6版本，直接选择纯中文的，若使用地域代码options：regionData）注意：如果使用5.0.2版本 需要使用CodeToText 大写！1、安装组件依赖（默认是6.1.0版本，如果需要稳定下载5.02）4、data中定义元素。5、触发事件的函数方法。
vue3 element-plus 级联选择器el-cascader实现省市区三级联动
huahua9197的博客
02-19 1178
【代码】vue3 element-plus 级联选择器el-cascader实现省市区三级联动。
Vue实现日期选择器
游坦之的博客
09-22 4290
本以为这是一个很简单的功能，几分钟就搞定。没想到，还是很麻烦的！记录一下开发过程。这里就涉及到了设计模式的一些知识，如果使用静态的代码，几乎1000行，这样大学生10W的代码岂不是很容易完成？但如果采用动态的方式，估计至少要减少一半无用的代码，还没改掉。继续前进！使用了Element-ui的Select 选择器，不过似乎有些鸡肋，感觉用下拉框就可以解决了，而且饿了么ui的选择器感觉也不是很好看。
el-cascader三级联动回显
03-14
要实现el-cascader的三级联动回显，需要以下步骤： 1. 定义数据源：首先，你需要定义一个数据源，包含三级联动的数据。每个级别的数据都是一个数组，其中包含了该级别的选项。 2. 绑定数据：将数据源绑定到el-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值