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