【企业微信多选的星期数据生成如“周一、周三至周六“】

目标效果如下图在这里插入图片描述
实现这个过程首先是要找到逻辑,这个看似简单的操作却属实让我想了很久。

首先要了解需求

根据拿到的数据得到生成符合要求的字符串。中间有连续的星期大于三天的,开始和结束星期中间要有"至"。

分析逻辑

一、判断开始日期和结束日期之间连续不连续,有多少天连续。数据不连续了,开始和最后星期赋值相同,继续判断。拼接字符串

以下是我的代码,敬请拜读。

<el-form-item prop="timeArray" label="打卡时间:">
            <div v-for="item in form.timeArray" style="margin-top: 5px">
              <span style="margin-left: 10px">上班</span>
              <el-time-picker
                style="width: 150px;margin-left: 10px"
                value-format="HH:mm"
                format="HH:mm"
                v-model="item.startTime"
                placeholder="任意时间点">
              </el-time-picker>
              <span style="margin-left: 10px">—下班</span>
              <el-time-picker
                style="width: 150px;margin-left: 10px"
                value-format="HH:mm"
                format="HH:mm"
                v-model="item.endTime"
                placeholder="任意时间点">
              </el-time-picker>
              <i class="el-icon-remove" @click="deleteTimeArray(item)" v-if="form.timeArray.length!=1" style="font-size: 25px; margin-left: 10px; margin-bottom: 5px;"></i>
              <i class="el-icon-circle-plus" @click="addTimeArray" v-if="form.timeArray.indexOf(item)==form.timeArray.length-1&&form.timeArray.length!=4" style="font-size: 25px; margin-left: 10px; margin-bottom: 5px;"></i>
            </div>
</el-form-item>
weekdays: [
        {
        label: "星期一",
        value: 1
      }, {
        label: "星期二",
        value: 2
      }, {
        label: "星期三",
        value: 3
      }, {
        label: "星期四",
        value: 4
      }, {
        label: "星期五",
        value: 5
      }, {
        label: "星期六",
        value: 6
      }, {
        label: "星期日",
        value: 7
      }
],
      
getWeekString(arr) {
      const weekArray = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      arr.sort(function(a, b) {
        return a - b;
      });
      let result = "";
      let start = -1;
      let end = -1;
      for (let i = 0; i < arr.length; i++) {
        if (start === -1) {
          start = arr[i];
          end = arr[i];
        } else if (arr[i] === end + 1) {
          end = arr[i];
        } else {
          if (start === end) {
            result += weekArray[start - 1] + "、";
          } else if (end - start === 1) {
            result += weekArray[start - 1] + "、" + weekArray[end - 1] + "、";
          } else {
            result += weekArray[start - 1] + "至" + weekArray[end - 1] + "、";
          }
          start = arr[i];
          end = arr[i];
        }
      }

      if (start !== -1) {
        if (start === end) {
          result += weekArray[start - 1];
        } else if (end - start === 1) {
          result += weekArray[start - 1] + "、" + weekArray[end - 1];
        } else {
          result += weekArray[start - 1] + "至" + weekArray[end - 1];
        }
      }
      this.form.result=result;
    },

以下是我做的效果图
在这里插入图片描述
春秋相伴,日月同处。
枝连八荒并四海士子,叶接四方容万千师表。
求同兮,吾辈皆且为所引;繁荣兮,日月不落其娇容。

突然看到了年少时写的迎接校庆的文字,一眨眼我已经走了这么远了,肯定是比从前更加有力量了,但是呢?我做出的努力真的使我实现了我的目标吗?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/37191.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux常用命令——emacs命令

在线Linux命令查询工具 emacs 功能强大的全屏文本编辑器 补充说明 emacs命令是由GNU组织的创始人Richard Stallman开发的一个功能强大的全屏文本编辑器&#xff0c;它支持多种编程语言&#xff0c;具有很多优良的特性。有众多的系统管理员和软件开发者使用emacs。 语法 e…

在线考试系统

在线考试系统 简介 该系统由C#开发语言开发&#xff0c;数据库是sql server2016&#xff0c;前端用到的前端技术有Bootstrap&#xff0c;js&#xff0c;css等前端技术&#xff0c;同时用到的.Net Core MVC的技术框架。另外本系统也支持mysql&#xff0c;暂未调试。 该系统是…

Exceptional C++读书笔记——泛型程序设计与C++标准库

更新中——上次更新&#xff08;2023.07.13-23:07&#xff09; 迭代器&#xff08;iterator&#xff09; #include <iostream> #include <vector> #include <iterator> #include <algorithm>int main() { std::vector<int> e; std::copy(…

10_SPI_Flash 连续写实验

10_SPI_Flash 连续写实验 1. 实验目标2. 连续写方法3. 操作时序4. 流程框图4.1 顶层模块4.2 连续写模块 5. 波形图6. RTL6.1 flash_seq_wr_ctrl6.2 spi_flash_seq_wr 7. Testbench 1. 实验目标 使用页写指令&#xff0c;将串口发送过来的连续不定量数据写入 Flash。本实验中&a…

Redis【实战篇】---- 秒杀优化

Redis【实战篇】---- 秒杀优化 1. 秒杀优化-异步秒杀思路2. 秒杀优化-Redis完成秒杀资格判断3. 秒杀优化-基于阻塞队列完成秒杀优化 1. 秒杀优化-异步秒杀思路 我们来回顾一下下单流程 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c…

如何在没有软件的情况下将 PDF 转换为 PPT(100% 免费)

演示文稿由文字、图片、音频、动画等元素组成&#xff0c;通常用于会议、课堂或演讲中&#xff0c;展示演讲者想要表达的主要内容。如果您遇到重要文档以 PDF 格式存储&#xff0c;但现在需要转换为 PPT 格式的情况&#xff0c;请不要担心。我们本指南的目标是帮助用户将 PDF 转…

Qt + QR-Code-generator 生成二维码

0.前言 之前使用 libgrencode 生成二维码&#xff0c;LGPL 协议实在不方便&#xff0c;所以需要找一个 github 星星多的&#xff0c;代码简单最好 header-only&#xff0c;协议最好是 MIT 或者兼容协议而不是 GPL 或者 LPGL。 QR-Code-generator 正好符合这个要求&#xff0c…

【自定义类型】(结构体、枚举、联合)

结构体内存对齐&#xff1a; 计算结构体的大小 结构体成员不是按照顺序在内存中连续存放的而是有一定的对齐规则的 结构体内存对齐的规则&#xff1a; 1、结构体的第一个成员永远放在相比于结构体变量起始位置的偏移量为0的位置。 2、从第二个成员开始&#xff0c;往后的每…

Gateway服务集成Nacos2021.0.4错误解决

问题 gateway服务集成nacos&#xff0c;启动后报错&#xff1a; Caused by: com.alibaba.nacos.shaded.io.grpc.netty.shaded.io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: no further information:; 版本&#xff1a; jdk:1.8 spring-b…

Node连接Mongodb数据库

1.初始化 npm init 2.安装mongoose npm i mongoose 3.导入mongoose const mongooserequire("mongoose") 4.连接mongodb服务 mongoose.connect("mongodb://127.0.0.1:27017/user") 说明&#xff1a;mongodb是协议,user是数据库&#xff0c;如果没有会自动创…

C#使用跨平台的PdfSharpCore开源库生成PDF文件

一、需求说明 在进行项目开发中,需要将C#程序的一些文本内容导出为PDF文件(能够根据文本自动分行分页),并且要求这个生成PDF文件的程序是可跨平台的;实现类似效果: 二、需求分析 ①将程序的文本内容导出为PDF文件; ②能够将文本内容自动分行分页【且可添加页眉、页脚、…

Docker安全开放远程访问连接权限

1、Docker完全开放远程访问 Docker服务完全开放对外访问权限操作如下&#xff1a; # 开启端口命令 &#xff08;--permanent永久生效&#xff0c;没有此参数重启后失效&#xff09; firewall-cmd --zonepublic --add-port2375/tcp --permanent # 重新载入 firewall-cmd --re…

2.Vue3中Cesium地图初始化及地图控件配置

前言 本文中&#xff0c;我们主要介绍 Cesium 在 Vue 3运行环境的配置&#xff0c;以及 Cesium 实例中控件的显隐设置&#xff0c;本文是后续文章内容的基础&#xff0c;项目代码在此查看&#xff1b;通过本文&#xff0c;我们可以得到一个纯净的 cesium 项目&#xff0c;后续的…

字符设备驱动开发(最初方式)

目录&#xff1a; 1.字符设备驱动简介2.字符设备驱动开发步骤2.1. 驱动模块的加载与卸载2.2. Makefile的编写2.3.字符设备的注册与注销2.3.1.设备号的组成2.3.2.设备号的分配 2.4.具体操作函数的实现2.4.1.进行打开和关闭操作2.4.2.对chrdev进行读写操作 3.具体程序的实现3.1.驱…

huggingface datasets map时出现KeyError: ‘output‘的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Spring MVC相关注解运用 —— 上篇

目录 一、Controller、RequestMapping 1.1 示例程序 1.2 测试结果 二、RequestParam 2.1 示例程序 2.2 测试结果 三、RequestHeader、CookieValue 3.1 示例程序 3.2 测试结果 四、SessionAttributes 4.1 示例程序 4.2 测试结果 五、ModelAttribute 5.1 示例程序 …

IDEA+springboot+mybatis+shiro+bootstrap+Mysql WMS仓库管理系统

IDEAspringbootmybatisshirobootstrapMysql WMS仓库管理系统 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.修改密码3.系统日志4. 登陆日志5. 库存查询6. 出入库记录7.货物入库8.货物出库9.仓库管理员管理10.供应商信息管理11.客户信息管理12.货物信息管理13. 仓库信息管…

Prometheus学习

Prometheus学习 promethueus exporter就是以 后台进程的方式运行在系统当中&#xff0c;不断去采集数据 1、红框框中是 prometheus基于数学算法输入的一个查询输入框 2.监控项的分类 3.数据采集的形式分类&#xff08;promethueus exporter就是以 后台进程的方式运行在系统当…

最新2023水果编曲软件FL Studio Producer Edition 21.0.3 Build 3517中文版下载安装激活图文教程

各位&#xff0c;大家好&#xff0c;今天兔八哥给大家带来最新最新2023水果编曲软件FL Studio Producer Edition 21.0.3 Build 3517中文版下载安装激活图文教程。我们一起先了解一些FL Studio 。FL Studio21是目前流行广泛使用人数最多音乐编曲宿主制作DAW软件&#xff0c;这款…

17.OpenCV中的GFTTDetector类

文章目录 GFTTDetector功能OpenCV中GFTTDetector类reference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 这是使用imgproc.hpp中的goodFeaturesToTrack函数封装的类&#xff0c;其使用和goodFeaturesToTrack函数基本相似。 GFTTDetec…