关于jeecgboot在header中添加全局参数的构想

最新推荐文章于 2025-06-27 09:06:08 发布

原创最新推荐文章于 2025-06-27 09:06:08 发布 · 578 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

首先是先考虑要实现的功能

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');
      }