首先是先考虑要实现的功能
1、通过考试时间的选择,进行当前考试的级联回显
2、当前考试的数据由考试管理里面的数据所得
3、其实是登录项目后的回显
功能考虑完成之后就要进行全局的布局设置
1、设置一个数据存储器进行对考试ID、考试名称及开始时间和结束时间的一个存储
import { defineStore } from 'pinia';
export interface batchState {
batchInfoList: string;
batchId: string;
batchFlag: boolean;
batchName: string;
batchFalg: boolean
startTime: string;
endTime: string;
}
export const usebatchStore = defineStore({
id: 'app-batch',
state: (): batchState => ({
batchInfoList: "",
batchId: '',
batchFlag: true,
batchName: '',
batchFalg: false,
startTime: "2000-01-01 00:00",
endTime: "2099-12-31 23:59",
}),
actions: {
// 对set方法进行参数校验,确保传入的是字符串类型
setBatchInfoList(count: string): void {
if (typeof count !== 'string') {
console.error('很抱歉,setBatchInfoList传入的值不是字符串类型,请检查!');
return;
}
this.batchInfoList = count
},
setBatchId(count: string): void {
if (typeof count !== 'string') {
console.error('很抱歉,setBatchId传入的值不是字符串类型,请检查!');
return;
}
this.batchId = count;
},
setBatchName(count: string): void {
if (typeof count !== 'string') {
console.error('很抱歉,setBatchName传入的值不是字符串类型,请检查!');
return;
}
this.batchName = count;
},
setStartTime(count: string): void {
if (typeof count !== 'string') {
console.error('很抱歉,setStartTime,请检查!');
return;
}
this.startTime = count;
},
setEndTime(count: string): void {
if (typeof count !== 'string') {
console.error('很抱歉,setEndTime传入的值不是字符串类型,请检查!');
return;
}
this.endTime = count;
},
},
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
}
]
}
});
2、对事件登录后回显、选择时间回显以及切换当前考试选项的一个回显的事件封装
/**
* 获取当前考试
*/
export async function handleUpdateExamListToLocalStorage(val?: any, examName?: any, examId?: any) {
const usebatch = usebatchStore();
try {
const res = await GetList();
// 判断返回数据类型,确保安全存储
if (typeof res === 'object' && res !== null) {
// 序列化对象或数组为字符串
const resString = JSON.stringify(res);
// 检查数据大小,以防超过localStorage限制
if (resString.length <= 5 * 1024 * 1024) {
// 假设单个key的value上限为5MB
usebatch.setBatchInfoList(resString);
} else {
console.error('很抱歉,当前考试数据过大,无法存储到localStorage');
}
if (val === 'login') {
usebatch.setBatchName("");
usebatch.setBatchId("");
} else if (val === 'save') {
JSON.parse(usebatch.batchInfoList).forEach((element) => {
if (element.value == usebatch.batchId) {
usebatch.setBatchName(element.content);
}
});
} else if (val === 'change') {
usebatch.setBatchName(examName);
usebatch.setBatchId(examId);
}
} else {
console.error('很抱歉,当前考试返回的不是对象且为空,无法存储到localStorage');
}
} catch (error) {
// 异常处理
console.error('获取批次异常:', error);
}
}
3、在获取考试信息处理的前提是先获取数据库里面的考试数据,故封装了一个请求
/**
* 查询考试数据
*/
enum Api {
GetList = '/exam/getExamList',
}
export const GetList = () => {
const usebatch = usebatchStore();
let params={
startTime:dayjs(usebatch.startTime).format('YYYY-MM-DD HH:mm'),
endTime:dayjs(usebatch.endTime).format('YYYY-MM-DD HH:mm')
}
return defHttp.post({ url: Api.GetList,params }, { joinParamsToUrl: true })
};
4、差点忘记了,还封装了一个时间计算函数(获取当前时间的前/后x天的日期)
// 定义一天的毫秒数常量,用于日期计算
const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
// 定义JavaScript支持的最大日期常量,用于防止时间戳溢出
const MAX_DATE = new Date(2099, 0, 19);
/**
* 格式化日期函数
* @param {Date} date - 需要格式化的日期对象
* @return {string} 格式化后的日期字符串,格式为 'YYYY-MM-DD'
*/
export const format = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
/**
* 计算从今天起指定天数后的日期
* @param {number} days - 从今天起的天数,0表示今天,1表示明天,以此类推
* @return {string} 格式化后的目标日期字符串,格式为 'YYYY-MM-DD'
* @throws {Error} 如果输入类型非数字、值不在有效范围内或目标日期超过最大支持日期,则抛出错误
*/
export const getDaysFromNow = (days) => {
// 类型检查,确保输入是数字类型
if (typeof days !== 'number') {
throw new Error('Invalid input type for days. Expected number.');
}
const today = new Date();
const targetDate = new Date(today.getTime() + days * MILLISECONDS_IN_DAY);
// 时间戳溢出检查,确保目标日期在最大支持日期范围内
if (targetDate > MAX_DATE) {
throw new Error('Target date exceeds maximum supported date.');
}
// 返回格式化后的目标日期字符串
return format(targetDate);
};
最后就开始分项进行事件处理
1、登录后进行数据处理,(默认时间区间为前后七天)。代码如下:
usebatch.setStartTime(getDaysFromNow(-7)+ " 00:00")
usebatch.setEndTime(getDaysFromNow(7)+ " 23:59")
Timevalue.value=[dayjs(usebatch.startTime, dateFormat),dayjs(usebatch.endTime, dateFormat)]
handleUpdateExamListToLocalStorage("login");
2、选择时间后触发更新函数,代码如下:
const handleTimeChange = () => {
usebatch.setStartTime(dayjs(Timevalue.value[0],).format('YYYY-MM-DD HH:mm'))
usebatch.setEndTime(dayjs(Timevalue.value[1],).format('YYYY-MM-DD HH:mm'))
handleUpdateExamListToLocalStorage("login",);
};
3、选择当前考试的切换函数,代码如下:
const handleChange = (value: any, res: any) => {
handleUpdateExamListToLocalStorage("change", res.content, value);
message.success('切换批次成功,1s后刷新页面');
setTimeout(() => {
window.location.reload();
}, 1000);
};
4、也是最后一项,就是在考试管理编辑的数据正是当前考试的数据的时候,要对选项的名字进行同步,代码如下:
if (values.id == usebatch.batchId) {
await handleUpdateExamListToLocalStorage('save');
}