微擎可以做企业网站吗,杭州微网站开发公司,新乡网站建设哪家权威,杭州网站建设faxide一. 需求
后端返回一个数组#xff0c;前端按时间维度将该数组的分割为【今年】和【往年】俩个数组后端返回的数组格式如下
timeList:[{id:1,billTime:2024-01-10,createTime:2024-01-10 00:00:00,status:0},{id:2,billTime:2022-05-25…一. 需求
后端返回一个数组前端按时间维度将该数组的分割为【今年】和【往年】俩个数组后端返回的数组格式如下
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},
]效果如下 全部账期【今年账期】点击切换标签、往年账期下拉框 二. 实现
templatediv!-- 本年账期 --el-radio-group v-modelnewTime changehandleChangeNewTime sizeminiel-radio-button v-for(item,index) in newYear :keyindex :labelitem.billTime :valueitem.valuetemplatespan{{item.value}}/span/template/el-radio-button/el-radio-group!-- 往年账期 --el-button sizemini stylemargin-left: 20px split-button往年账期/el-buttonel-select changebillTimeSearch v-modelpreTime sizemini placeholder请选择 clearableel-option v-for(item,index) in preYear :keyindex :labelitem.billTime :valueitem.billTime/el-option/el-selectdiv
/templatescript
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, //monthd: date.getDate(), //dayh: date.getHours(), //hourm: date.getMinutes(), //minutes: date.getSeconds(), //secondq: 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 ;
}
