一. 需求
后端返回一个数组，前端按时间维度将该数组的分割为【今年】和【往年】俩个数组
- 后端返回的数组格式如下
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},
]
- 需要的数组如下
// 往年
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"},
]
- 效果如下
全部账期【今年账期】（点击切换标签）、往年账期（下拉框）
二. 实现
<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 "";
}
