【Vue2】一个数组按时间分割为【今年】和【往年】俩个数组

一. 需求

后端返回一个数组,前端按时间维度将该数组的分割为【今年】和【往年】俩个数组
  1. 后端返回的数组格式如下
timeList:[{id:1,billTime:"2024-01-10",createTime:"2024-01-10 00:00:00",status:0},{id:2,billTime:"2022-05-25",createTime:"2022-05-25 00:00:00",status:1},{id:3,billTime:"2022-03-23",createTime:"2022-03-23 00:00:00",status:2},{id:4,billTime:"2022-02-11",createTime:"2022-02-11 00:00:00",status:0},{id:5,billTime:"2022-01-01",createTime:"2022-01-01 00:00:00",status:2},{id:6,billTime:"2021-12-01",createTime:"2021-12-01 00:00:00",status:2},{id:7,billTime:"2021-11-01",createTime:"2021-11-01 00:00:00",status:2},
]
  1. 需要的数组如下
// 往年
preYear:[{billTime:"2022-05",value:"2022-05"},{billTime:"2022-03",value:"2022-03"},{billTime:"2022-02",value:"2022-02"},{billTime:"2022-01",value:"2022-01"},{billTime:"2021-12",value:"2021-12"},{billTime:"2021-11",value:"2021-11"},
]
// 今年
newYear:[{billTime:"2024-01",value:"2024-01"},
]
  1. 效果如下
    全部账期【今年账期】(点击切换标签)、往年账期(下拉框)

在这里插入图片描述

二. 实现

<template><div><!-- 本年账期 --><el-radio-group v-model="newTime" @change="handleChangeNewTime" size="mini"><el-radio-button v-for="(item,index) in newYear" :key="index" :label="item.billTime" :value="item.value"><template><span>{{item.value}}</span></template></el-radio-button></el-radio-group><!-- 往年账期 --><el-button size="mini" style="margin-left: 20px" split-button>往年账期</el-button><el-select @change="billTimeSearch" v-model="preTime" size="mini" placeholder="请选择" clearable><el-option v-for="(item,index) in preYear" :key="index" :label="item.billTime" :value="item.billTime"></el-option></el-select><div>
</template><script>
import { getBillTime,getList } from "@/api/xxx"
import { dateFormat } from "@/utils/index";export default{data(){return{query:{pageNum:1,pageSize:10,startTime:"" // 选中的账期},list:[],listLoading:false,newYear:[], // 本年账期列表preYear:[], // 往年账期列表preTime:"", // 选中的往年账期newTime:""	// 选中的今年账期}},mounted(){this.fetchData()this.getBillTime()},methods:{/*** 初始化列表数据*/fetchData(){this.listLoading = truegetList(this.query).then(res=>{this.list = res.data.listthis.listLoading = false})},/*** 获取列表,并按照时间分割为【往年】和【今年】账期*/getBillTime(){getBillTime().then(res=>{let currentYear = this.formatDateYear(new Date())res.data.list.forEach(item=>{item.billTime = this.formatDate(item.billTime)let obj = {billTime:item.billTime,value:item.billTime};if(item.billTime.indexOf(currentYear) == -1 || this.newYear.length == 12){this.preYear.push(obj)// 去重this.preYear = this.preYear.reduce((preVal,curVal) => {object[curVal.billTime] ? "" : (object[curVal.billTime] = preVal.push(curVal));return preVal;}, []);}else{this.newYear.push(obj);// 账单日重复问题let object = {};this.newYear = this.newYear.reduce((preVal, curVal) => {object[curVal.billTime] ? "" : (object[curVal.billTime] = preVal.push(curVal));return preVal;}, []);}});var result = this.newYear.some(item => {if (item.billTime == "") {return true;}});if (!result) {// 如果存在this.newYear.unshift({ billTime: "", value: "全部账单" });}})},/*** 切换今年账单日标签项* @param {String} val */handleChangeNewTime(val) {this.query.startTime = val;this.preTime = ""// this.$refs.orderListRef.clearSelection();this.fetchData();},/*** 往年账单筛选 此处仅需要传一个值年月即可,后端进行模糊查询* @param {String} val */billTimeSearch(val) {this.query.startTime = val;this.newTime = ""this.fetchData();},/*** 账单日格式化* @param {Date} date */formatDate(date) {return dateFormat(new Date(date), "yyyy-MM");},formatDateYear(date) {return dateFormat(new Date(date), "yyyy");},}}
</script>

三. 时间转换

@/utils/index

//格式化时间
export function dateFormat(date, format) {format = format || "yyyy-MM-dd hh:mm:ss";if (date !== "Invalid Date") {let o = {"M+": date.getMonth() + 1, //month"d+": date.getDate(), //day"h+": date.getHours(), //hour"m+": date.getMinutes(), //minute"s+": date.getSeconds(), //second"q+": Math.floor((date.getMonth() + 3) / 3), //quarterS: date.getMilliseconds() //millisecond};if (/(y+)/.test(format))format = format.replace(RegExp.$1,(date.getFullYear() + "").substr(4 - RegExp.$1.length));for (let k in o)if (new RegExp("(" + k + ")").test(format))format = format.replace(RegExp.$1,RegExp.$1.length === 1 ?o[k] :("00" + o[k]).substr(("" + o[k]).length));return format;}return "";
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【大数据】NiFi 中的处理器(二):PutDatabaseRecord

NiFi 中的处理器&#xff08;二&#xff09;&#xff1a;PutDatabaseRecord 1.基本介绍2.属性配置3.连接关系4.应用场景 1.基本介绍 PutDatabaseRecord 处理器使用指定的 RecordReader 从传入的流文件中读取&#xff08;可能是多个&#xff0c;说数组也成&#xff09;记录。这…

DHSP和DNS

一、服务程序 1.1DHCP定义 DHCP&#xff08;动态主机配置协议&#xff09;是一个局域网的网络协议。指的是由服务器控制一段IP地址范围&#xff0c;客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码。默认情况下&#xff0c;DHCP作为Windows Server的一个服务组…

性格是如何形成的?能不能改变性格?

有一句话叫“性格决定命运”&#xff0c;广泛流传&#xff0c;也就是说 “命运”与“性格”是紧密相连的&#xff0c;可见“性格”对于一个人的重要性。 性格是怎么来的&#xff1f; 1、遗传基因 根据一些心理学家的最新研究&#xff0c;认为性格与人体内的基因有关系&#x…

不再恐惧指针,指针详解

什么是指针&#xff1f; 通俗来说指针就相当于地址&#xff0c;因为我们写入的代码每个变量的数据类型不同&#xff0c;字节大小不同&#xff0c;在计算机内存中所开辟存储的大小自然不同&#xff0c;且指针通常存储的是内存单元中最小单元的编号 比如&#xff1a;int*指针的…

【Scala】——面向对象

1 Scala 包 1.1 包风格 Scala 有两种包的管理风格。 第一种 Java 的包管理风格相同&#xff0c;每个源文件一个包&#xff08;包 名和源文件所在路径不要求必须一致&#xff09;&#xff0c;包名用“.”进行分隔以表示包的层级关系&#xff0c;如 com.atguigu.scala。另一种风…

遥感单通道图像保存为彩色图像

系列文章目录 第一章PIL单通道图像处理 文章目录 系列文章目录前言一、代码实现二、问题记录在这里插入图片描述 总结 前言 将单通道图像以彩色图像的形式进行保存主要使用了PIL库 一、代码实现 palette_data [***]&#xff1a;可以进行自定义设置 代码如下&#xff1a; fr…

UVa12304 2D Geometry 110 in 1!

题目链接 UVa12304 2D Geometry 110 in 1! 题意 这是一个拥有6&#xff08;二进制是110&#xff09;个子问题的2D几何问题集。 1 CircumscribedCircle x1 y1 x2 y2 x3 y3&#xff1a;求三角形(x1,y1)-(x2,y2)-(x3,y3)的外接圆。这3点保证不共线。答案应格式化成(x,y,r…

服务器 配置git

参考了下面这篇文章&#xff0c;不对的地方做了改正 在服务器上git clone github项目的过程-CSDN博客 1. 下载解压 wget https://www.kernel.org/pub/software/scm/git/git-2.34.1.tar.gz tar -zxvf git-2.34.1.tar.gz 2. 安装 cd git-2.34.1/ ./configure make confi…

Geotools-PG空间库(Crud,属性查询,空间查询)

建立连接 经过测试&#xff0c;这套连接逻辑除了支持纯PG以外&#xff0c;也支持人大金仓&#xff0c;凡是套壳PG的都可以尝试一下。我这里的测试环境是Geosence创建的pg SDE&#xff0c;数据库选用的是人大金仓。 /*** 获取数据库连接资源** param connectConfig* return* {…

springboot私人健身与教练预约管理系统源码和论文

随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&#xf…

【rk3568】01-环境搭建

文章目录 1.开发板介绍1.1相关资源&#xff1a;1.2接口布局1.3屏幕1.4核心板引脚可复用资源 2.环境搭建2.1安装依赖包2.2git配置2.3安装sdk2.4sdk介绍2.5sdk编译 3.镜像介绍 1.开发板介绍 开发板&#xff1a;atk-rk3568开发板 eMMC&#xff1a;64G LPDDR4&#xff1a;4G 显示屏…

螺旋数字矩阵 - 华为OD统一考试

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C++ 题目描述 疫情期间,小明隔离在家,百无聊赖,在纸上写数字玩。他发明了一种写法: 给出数字个数n和行数m (0 < n <= 999,0 < m <= 999),从左上角的1开始,按照顺时针螺旋向内写方式,依次写出2,3……

创建ROS模型与小机器人地图规划

1、打开自己的VM系统 2、安装小机器人的安装包&#xff0c;输入如下命令&#xff0c;回车输入密码(自己设的)&#xff1a; sudo apt install ros-noetic-turtlebot3-simulations ros-noetic-turtlebot3-slam ros-noetic-turtlebot3-navigation 提示我之前安装过了 3、用rosla…

Java 常见缓存详解以及解决方案

一. 演示Mybatis 一级缓存 首先我们准备一个接口 两个实现的方法&#xff0c; 当我们调用这个queryAll&#xff08;&#xff09;方法时我们需要调用selectAll&#xff08;&#xff09;方法来查询数据 调用此接口实现效果 这个时候我们就可以发现了问题&#xff0c;我们调用方法…

18张AI电脑动漫超清壁纸免费分享

18张AI电脑动漫壁纸&#xff0c;紫色系和暗黑系&#xff0c;都很不错&#xff0c;喜欢的朋友可以拿去 CSDN免积分下载

【LV12 DAY12-13 GPIO C 语言与寄存器封装】

GPIO 通用型输入输出&#xff0c;GPIO可以控制连接在其引脚实现信号的输入和输出 芯片的引脚和外部设备相连从而实现与外部硬件的通讯&#xff0c;控制&#xff0c;信号采集的功能。 控制CHG_COK引脚输出为高电平&#xff0c;LED亮&#xff0c;输出为低电平&#xff0c;LED熄灭…

Android 10.0 TvSettings系统设置wifi连接密码框点击Enter键失去焦点

1.前言 在10.0的box产品开发中,在TvSettings中,在wifi连接的时候,在用遥控器输入wifi密码框的时候,会发现在按遥控器Enter键的时候, 发现EditText焦点失去了,导致输入法消失了,为了解决这个问题就需要拦截Enter键保证正常输入wifi密码,接下来就来实现这个功能 如图: 2.…

CSS 弹幕按钮动画

<template><view class="content"><button class="btn-23"><text class="text">弹幕按钮</text><text class="marquee">弹幕按钮</text></button></view></template><…

win7添加access的odbc数据源

从控制面板打开odbc数据源&#xff1b;如果像下面没有access的驱动程序&#xff0c; 根据资料&#xff0c;打开C盘-Windows-SysWow64-odbcad32.exe&#xff0c;看一下就有了&#xff1b; 然后添加用户DSN&#xff0c;选中access的驱动程序&#xff0c; 自己输入一个数据源名&am…

【浅尝C++】引用

&#x1f388;归属专栏&#xff1a;浅尝C &#x1f697;个人主页&#xff1a;Jammingpro &#x1f41f;记录一句&#xff1a;大半夜写博客的感觉就是不一样&#xff01;&#xff01; 文章前言&#xff1a;本篇文章简要介绍C中的引用&#xff0c;每个介绍的技术点&#xff0c;在…