要求表头显示本周剩余的日期（包括今天）+本周后四周的日期，第一行是当前日期是今年的第几周，第二行是周几，第三行是日期
import {Card, Col, message, Row} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import ProTable from '@ant-design/pro-table';
import {connect} from 'umi';
// import * as columns from '@/data/tableColumns'
import {queryAdvancedProfile} from './service';
import {formDateString, formTrimParams} from '@/utils/utils';
const TableList = ({dispatch}) => {
const actionRef = useRef();
const formRef = useRef();
useEffect(() => {
let basicColumns = [
{
title: '序号',
dataIndex: 'index',
valueType: 'indexBorder',
width: 72,
}
]
/*let currentDay=new Date()
console.log(getYearWeek(currentDay))
console.log(currentDay.getDate()+1)
console.log(currentDay.getDay())
console.log(getMonthLength(currentDay))
console.log(todayBefore(3))
console.log(todayAfter(30))*/
//本周、下一周日期
let currentDate=new Date();
let thisWeek=setDate(addDate(currentDate,0,currentDate));//本周
let currentFirstDate=new Date(thisWeek[0]);
let nextWeek=setDate(addDate(currentFirstDate,7,currentFirstDate));//下周
let currentSecondDate=new Date(nextWeek[0]);
let nextNextWeek=setDate(addDate(currentSecondDate,7,currentSecondDate));//下下周
let currentThirdDate=new Date(nextNextWeek[0]);
let nextNextNextWeek=setDate(addDate(currentThirdDate,7,currentThirdDate));//下下下周
let currentForthDate=new Date(nextNextNextWeek[0]);
let nextNextNextNextWeek=setDate(addDate(currentForthDate,7,currentForthDate));//下下下下周
// console.log(thisWeek);
// console.log(nextWeek);
// console.log(nextNextWeek);
// console.log(nextNextNextWeek);
// console.log(nextNextNextNextWeek);
let dayArr=['7','1','2','3','4','5','6']
// console.log(currentDate.getDate())
console.log(thisWeek)
console.log(new Date().getDay())
let newThisWeek
if(new Date().getDay()===0){
newThisWeek=thisWeek.slice(6)
}else{
newThisWeek=thisWeek.slice(new Date().getDay()-1)
}
let thisWeekArr=getWeekObj(newThisWeek)
let nextWeekArr=getWeekObj(nextWeek)
let nextNextWeekArr=getWeekObj(nextNextWeek)
let nextNextNextWeekArr=getWeekObj(nextNextNextWeek)
let nextNextNextNextWeekArr=getWeekObj(nextNextNextNextWeek)
/* newThisWeek.map(day=>{
console.log(day)
let dayObj={}
dayObj.title='第'+thisWeekNum+'周'
dayObj.search=false
dayObj.children={}
dayObj.children.title=dayArr[new Date(day).getDay()]
dayObj.children.children={}
let strArr=day.split('.')
dayObj.children.children.title=strArr[1]+'月'+strArr[2]+'日'
thisWeekArr.push(dayObj)
})*/
console.log(thisWeekArr)
console.log(nextWeekArr)
console.log(nextNextWeekArr)
console.log(nextNextNextWeekArr)
console.log(nextNextNextNextWeekArr)
basicColumns.push(...thisWeekArr,...nextWeekArr,...nextNextWeekArr,...nextNextNextWeekArr,...nextNextNextNextWeekArr)
setColumns(basicColumns)
}, [])
const getWeekObj=(week)=>{
let thisWeekNum=getYearWeek(week[0])
let thisWeekArr=[]
let dayArr=['7','1','2','3','4','5','6']
week.map(day=>{
// console.log(day)
let dayObj={}
let strArr=day.split('.')
dayObj.title='第'+thisWeekNum+'周'
dayObj.search=false
dayObj.dataIndex=strArr[1]+'月'+strArr[2]+'日'
dayObj.children=[]
let childrenObj={}
childrenObj.title=dayArr[new Date(day).getDay()]
childrenObj.children=[]
let grandchild={}
grandchild.title=strArr[1]+'月'+strArr[2]+'日'
childrenObj.children.push(grandchild)
dayObj.children.push(childrenObj)
thisWeekArr.push(dayObj)
})
return thisWeekArr
}
let formatDate = function(date){
let year = date.getFullYear();//年
let month = (date.getMonth()+1);//月
let day = date.getDate();//日;
return year+'.'+month+'.'+day
};
let addDate= function(date,n,currentFirstDate){
date.setDate(date.getDate()+n);
return date;
};
let setDate = function(date){
// console.log(currentFirstDate)
let week = date.getDay()-1;
date = addDate(date,week*-1);
// currentFirstDate = new Date(date);
let weekList=[];
for(let i = 0;i<7;i++){
weekList[i]=formatDate(i===0 ? date : addDate(date,1));
}
return weekList
};
function getMonthLength(date) { // 获取每月有多少天
let d = new Date(date)
// 将日期设置为下月一号
d.setMonth(d.getMonth()+1)
d.setDate('1')
// 获取本月最后一天
d.setDate(d.getDate()-1)
return d.getDate()
}
const getYearWeek = function (dt) { //获得当前是第几周
let d1 = new Date(dt);
let d2 = new Date(dt);
d2.setMonth(0);
d2.setDate(1);
let rq = d1-d2;
let days = Math.ceil(rq/(24*60*60*1000));
return Math.ceil(days / 7);
};
function todayBefore(day) {//今天前的第day天
let today = new Date();
let beforMilliseconds = today.getTime() - 1000 * 3600 * 24 * day;
let beforday = new Date();
beforday.setTime(beforMilliseconds);
let strYear = beforday.getFullYear();
let strDay = beforday.getDate();
let strMonth = beforday.getMonth() + 1;
if (strMonth < 10) {
strMonth = "0" + strMonth;
}
return strMonth + "月" + strDay + '日';
}
function todayAfter(day) {//今天后的第day天
let today = new Date();
let afterMilliseconds = today.getTime() + 1000 * 3600 * 24 * day;
let afterDay = new Date();
afterDay.setTime(afterMilliseconds);
let strYear = afterDay.getFullYear();
let strDay = afterDay.getDate();
let strMonth = afterDay.getMonth() + 1;
if (strMonth < 10) {
strMonth = "0" + strMonth;
}
return strMonth + "月" + strDay + '日';
}
const [columns, setColumns] = useState([]);
const [xWidth, setXWidth] = useState(2000)
//处理数据请求
const handleRequest = async (params) => {
// console.log("curent---------------->")
const otherParams = formTrimParams(formRef.current.getFieldsValue())
const res = await queryAdvancedProfile({
page: params.current,
row: params.pageSize,
...otherParams
});
// console.log(res);
if (res.code === 200) {
return {
// data: newList,
data: res.data.list,
total: res.data.total,
success: true,
pageSize: res.data.row,
current: res.data.page,
};
} else {
message.error('获取数据失败');
return {
data: [],
total: 0,
success: true,
};
}
}
useEffect(() => {
console.log("useEffect------>")
setXWidth(columns.reduce((total, item) => {
item.width = item.width ? item.width : 120;
total += item.width;
return total;
}, 0))
}, [columns])
return (
<Row gutter={24}>
<Col xl={24} lg={24} sm={24} xs={24}>
<Card>
<ProTable
bordered
columns={columns}
pagination={
{
showQuickJumper: true,
pageSize: 20,
}}
actionRef={actionRef}
scroll={
{
x: xWidth,
y: 300
}}
formRef={formRef}
request={handleRequest}
rowKey="id"
dateFormatter="string"
search={
{
layout: "inline",
defaultCollapsed: false,
}}
/>
</Card>
</Col>
</Row>
);
};
export default connect(({}) => ({}))(TableList);