添加生成工资条功能

修改图标
修改工资配置权限
2025-05-29 11:30:31 +08:00 · 2025-05-26 16:25:54 +08:00 · 2025-05-26 15:59:16 +08:00 · 2025-05-26 15:12:19 +08:00 · 2025-05-26 14:28:42 +08:00 · 2025-05-26 14:25:23 +08:00
73 changed files with 14129 additions and 0 deletions
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
@@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
@@ -0,0 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="//at.alicdn.com/t/c/font_3654542_filhj6brvds.css" />
    <title>后台管理系统</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!-- 百度地图引入 -->
    <!-- <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Ol0d1CqPErteakupIcX4actXo6GiQI7g"></script> -->
  </body>
 </html>
@@ -0,0 +1,44 @@
 {
  "name": "vue-manage-system",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vite build",
    "dev": "vite --host",
    "preview": "vite preview"
  },
  "dependencies": {
    "@braks/vue-flow": "^0.4.38",
    "@element-plus/icons-vue": "^1.1.4",
    "@kangc/v-md-editor": "^2.3.15",
    "@wangeditor/editor": "^5.1.14",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^0.27.2",
    "dingtalk-jsapi": "^2.15.6",
    "driver.js": "^0.9.8",
    "echarts": "^5.3.3",
    "element-plus": "^2.1.11",
    "js-base64": "^3.7.2",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "screenfull": "^6.0.1",
    "vconsole": "^3.15.1",
    "video.js": "^7.20.3",
    "vue": "^3.2.25",
    "vue-router": "^4.0.13",
    "vue-video-player": "^6.0.0",
    "vue3-print-nb": "^0.1.4",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "sass": "^1.51.0",
    "vite": "^2.9.7",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^2.9.6",
    "vue-cli-plugin-style-resources-loader": "~0.1.5"
  }
 }
@@ -0,0 +1,25 @@
 <template>
  <router-view v-if="isRouterAlive"></router-view>
 </template>
 <script setup>
 import { onMounted, ref, nextTick, provide } from "vue";
 import { useStore } from "vuex";
 // 局部组件刷新
 const isRouterAlive = ref(true);
 const globalStore = useStore();
 const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
    console.log("数据刷新成功");
  });
 };
 provide("reload", reload);
 onMounted(() => {
  globalStore.dispatch("user/changeThem", "#4060c7");
 });
 </script>
 <style scoped lang="scss"></style>
@@ -0,0 +1,247 @@
 import service from "../request.js";
 // 登录
 export function login(authCode) {
  return service({
    url: `/login?code=${authCode}`,
    method: "get",
  });
 }
 // 获取组别列表
 export function getGroupList() {
  return service({
    url: "/group/list",
    method: "get",
  });
 }
 // 添加组别
 export function addGroup(data) {
  return service({
    url: "/group",
    method: "post",
    data,
  });
 }
 // 修改组别名称
 export function updateGroup(data) {
  return service({
    url: "/group",
    method: "put",
    data,
  });
 }
 // 删除组别
 export function deleteGroup(groupId) {
  return service({
    url: `/group/${groupId}`,
    method: "delete",
  });
 }
 // 获取未分组人员列表
 export function getNonGroupUsers() {
  return service({
    url: "/user/non/group",
    method: "get",
  });
 }
 // 添加/修改组内人员角色
 export function updateGroupUserRole(groupId, userid, role) {
  return service({
    url: `/group/${groupId}/user/${userid}/role/${role}`,
    method: "post",
  });
 }
 // 获取组内人员列表
 export function getGroupUsers(groupId) {
  return service({
    url: `/user/${groupId}`,
    method: "get",
  });
 }
 // 删除组内人员
 export function deleteGroupUser(groupId, userid) {
  return service({
    url: `/group/user/${groupId}/${userid}`,
    method: "delete",
  });
 }
 export function obtainUserInformationApi(groupId, userid) {
  return service({
    url: `/user`,
    method: "get",
  });
 }
 // 获取用户工资配置
 export function getUserSalaryConfig(userid) {
  return service({
    url: `/user/salary/config/${userid}`,
    method: "get",
  });
 }
 // 更新用户工资配置
 export function updateUserSalaryConfig(data) {
  return service({
    url: "/user/salary/config",
    method: "put",
    data,
  });
 }
 // 添加用户到组
 export function addUserToGroup(groupId, userid, role) {
  return service({
    url: `/group/${groupId}/user/${userid}/role/${role}`,
    method: 'post'
  });
 }
 // 同步钉钉成员
 export function syncUsers() {
  return service({
    url: "/user/sync",
    method: "post"
  });
 }
 // 获取综合部考勤列表
 export function getGeneralAttendanceList(params) {
  return service({
    url: "/performance/attendance/general/list",
    method: "get",
    params
  });
 }
 // 修改考勤详情
 export function updateAttendanceDetail(data) {
  return service({
    url: "/performance/attendance/detail",
    method: "PUT",
    data
  });
 }
 // 审批考勤
 export function approveAttendance(data) {
  return service({
    url: "/performance/attendance/general/approve",
    method: "PUT",
    data
  });
 }
 // 获取异常考勤详情
 export const getAbnormalAttendanceDetail = (userId, year, month) => {
  return service({
    url: `/abnormal/attendance/detail/${userId}/${year}/${month}`,
    method: 'get'
  });
 };
 // 修改异常考勤
 export function updateAbnormalAttendance(data) {
  return service({
    url: "/performance/attendance/detail",
    method: "PUT",
    data
  });
 }
 // 获取综合部复审列表
 export function getReviewedAttendanceList(params) {
  return service({
    url: '/performance/attendance/reviewed/list',
    method: 'get',
    params
  });
 }
 // 综合部复审审批
 export function reviewAttendance(data) {
  return service({
    url: '/performance/attendance/general/review',
    method: 'put',
    data
  });
 }
 // 获取主管审批列表
 export function getManagerAttendanceList(params) {
  return service({
    url: '/performance/attendance/manager/list',
    method: 'get',
    params
  });
 }
 // 主管审批
 export function approveManagerAttendance(data) {
  return service({
    url: '/performance/attendance/manager/approve',
    method: 'put',
    data
  });
 }
 // 主管修改绩效
 export function updateManagerAttendanceDetail(data) {
  return service({
    url: '/performance/attendance/manager/detail',
    method: 'put',
    data
  });
 }
 // 获取财务查看考勤列表
 export const getFinanceAttendanceList = (params) => {
  return service({
    url: '/performance/attendance/finance/list',
    method: 'get',
    params
  });
 };
 // 获取工资条列表
 export const getPayrollSheetsList = (params) => {
  return service({
    url: '/payroll/sheets/list',
    method: 'get',
    params
  });
 };
 // 修改工资条
 export const updatePayrollSheet = (data) => {
  return service({
    url: '/payroll/sheets',
    method: 'put',
    data
  });
 };
 // 展示工资条给员工
 export const showPayrollSheet = (data) => {
  return service({
    url: '/payroll/sheets/show',
    method: 'put',
    data
  });
 };
 // 生成工资条
 export function calculatePayrollSheets(year, month) {
  return service({
    url: `/payroll/sheets/calculate/${year}/${month}`,
    method: 'post'
  });
 }
@@ -0,0 +1,109 @@
 import axios from "axios";
 import { ElMessage, ElMessageBox } from "element-plus";
 import router from "../router/router";
 const errorCode = {
  401: "登录状态已过期,即将返回首页重新登录。",
  403: "当前操作没有权限",
  404: "访问资源不存在",
  default: "系统未知错误，请反馈给管理员",
 };
 // 肖星越服务
 const url = "https://paystubs.vip.cpolar.top";
 // 袁永军测试服务
 // const url = "https://crm-test.scdswj.cn/prod-api";
 // 正式环境
 // const url = "https://paystubs.vip.cpolar.top";
 const service = axios.create({
  baseURL: url,
  timeout: 10000,
 });
 // Request interceptors
 service.interceptors.request.use(
  (config) => {
    if (sessionStorage.getItem("token")) {
      config.headers["Authorization"] =
        "Bearer " + sessionStorage.getItem("token");
    }
    if (sessionStorage.getItem("deptId")) {
      config.headers["selected-dept-id"] = sessionStorage.getItem("deptId");
    }
    let params = config.params;
    let newData = {};
    for (let key in params) {
      if (params[key] !== null && params[key] !== "") {
        newData[key] = params[key];
      }
    }
    config.params = newData;
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
 );
 // Response interceptors
 service.interceptors.response.use(
  (res) => {
    // 对响应数据做点什么
    const response = res.data;
    const code = res.data.code || 200;
    const message = errorCode[code] || res.data.msg || errorCode["default"];
    if (code === 401) {
      if (res.code === 401 || res.code === 4001) {
        // 清除浏览器全部临时缓存
        // sessionStorage.clear();
        // localStorage.clear();
        router.push("/login");
        // store.commit('setMenuData', {});
        // resetRouter(); // 重置路由
        ElMessageBox.alert("你已被登出，请重新登录", "提示", {})
          .then(() => {})
          .catch(() => {});
      }
    } else if (code === 500) {
      // Message({ message: msg, type: 'error' })
      ElMessage.error(message);
      return Promise.reject(new Error(msg));
    } else if (code === 601) {
      // Message({ message: msg, type: 'warning' })
      ElMessage.error(message);
      return Promise.reject("error");
    } else if (code != 200) {
      ElMessage.error(message);
      return Promise.reject("error");
    } else {
      return response;
    }
  },
  (error) => {
    console.log("走了错误的", error);
    // 对响应错误做点什么
    if (error.message.indexOf("timeout") != -1) {
      ElMessage.error("网络超时");
    } else if (error.message == "Network Error") {
      ElMessage.error("网络连接错误");
    } else if (error.request.status == "401") {
      console.log("登录过期捕获到");
      sessionStorage.clear();
      router.push("/login");
      ElMessage.error("登录信息过期");
    } else {
      ElMessage.error(
        error.response.data.errmsg ||
          error.response.data.error ||
          error.response.data.errMessage
      );
    }
    return Promise.reject(error);
  }
 );
 export default service;
@@ -0,0 +1,41 @@
 export const showMessage = (status) => {
  let message = "";
  switch (status) {
    case 400:
      message = "请求错误(400)";
      break;
    case 401:
      message = "未授权，请重新登录(401)";
      break;
    case 403:
      message = "拒绝访问(403)";
      break;
    case 404:
      message = "请求出错(404)";
      break;
    case 408:
      message = "请求超时(408)";
      break;
    case 500:
      message = "服务器错误(500)";
      break;
    case 501:
      message = "服务未实现(501)";
      break;
    case 502:
      message = "网络错误(502)";
      break;
    case 503:
      message = "服务不可用(503)";
      break;
    case 504:
      message = "网络超时(504)";
      break;
    case 505:
      message = "HTTP版本不受支持(505)";
      break;
    default:
      message = `连接出错(${status})!`;
  }
  return `${message}，请检查网络或联系管理员！`;
 };
@@ -0,0 +1,80 @@
 <template>
  <div class="videoPlay">
    <video
      ref="m3u8_video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
    >
      <source :src="videoSrc" />
    </video>
  </div>
 </template>
 <script setup>
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import videojs from 'video.js'
 import 'video.js/dist/video-js.css'
 const props = defineProps({
  videoSrc: String,
  autoPlay: Boolean,
 })
 const m3u8_video = ref()
 let player
 const initPlay = async () => {
  videojs.addLanguage('zh-CN', zh)
  await nextTick()
  const options = {
    muted: true,
    controls: true,
    autoplay: true,
    loop: true,
    language: 'zh-CN',
    techOrder: ['html5'],
  }
  player = videojs(m3u8_video.value, options, () => {
    videojs.log('播放器已经准备好了!')
    if (props.autoPlay && props.videoSrc) {
      player.play()
    }
    player.on('ended', () => {
      videojs.log('播放结束了!')
    })
    player.on('error', () => {
      videojs.log('播放器解析出错!')
    })
  })
 }
 onMounted(() => {
  initPlay()
 })
 //直接改变路径测试
 watch(
  () => props.videoSrc,
  () => {
    player.pause()
    player.src(props.videoSrc)
    player.load()
    if (props.videoSrc) {
      player.play()
    }
  }
 )
 onBeforeUnmount(() => {
  player?.dispose()
 })
 </script>
 <style lang="scss" scoped>
 .videoPlay {
  width: 100%;
  height: 100%;
  .video-js {
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
 }
 :deep(.vjs-tech) {
  object-fit: fill;
 }
 </style>
@@ -0,0 +1,55 @@
 <template>
  <el-dialog v-model="dialogVisible" title="添加数据">
    <el-form v-model="uploadFrom">
      <el-form-item label="文件上传:">
        <el-upload
          style="width: 80%"
          drag
          multiple
          :limit="excelLimit"
          :on-success="uploadSuccess"
          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处<em>或点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="数据覆盖:">
        <el-switch v-model="is_cover" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确认</el-button>
    </template>
  </el-dialog>
 </template>
 <script setup name="filesUpload">
 import { ref, defineEmits } from 'vue'
 const excelLimit = ref(1)
 const dialogVisible = ref(false)
 const parameter = ref({})
 const is_cover = ref(false)
 const emit = defineEmits(['acceptParams'])
 // 接收父组件参数
 const acceptParams = (params) => {
  parameter.value = params
  emit('gatewayData', parameter.value)
  dialogVisible.value = true
 }
 const uploadExcel = (param) => {
  console.log(param)
 }
 const uploadSuccess = (files) => {
  console.log('上传成功' + JSON.stringify(files))
 }
 // 接受父组件得参数
 defineExpose({
  acceptParams,
 })
 </script>
@@ -0,0 +1,53 @@
 import { ElMessage } from 'element-plus'
 // 角色权限映射
 const roleMap = {
    0: '普通员工',
    1: '部门主管',
    2: '综合部',
    3: '财务部'
 }
 // 权限配置
 const authConfig = {
    // 工资条管理
    'payroll:view': [0, 1, 2, 3], // 查看工资条
    'payroll:edit': [1, 2, 3],    // 编辑工资条
    'payroll:delete': [2, 3],     // 删除工资条
    'payroll:show': [1, 2, 3],    // 展示给员工
    // 组别管理
    'group:view': [0, 1, 2, 3],   // 查看组别
    'group:add': [2],             // 添加组别
    'group:edit': [2],            // 编辑组别
    'group:delete': [2],          // 删除组别
    // 成员管理
    'member:view': [0, 1, 2, 3],  // 查看成员
    'member:add': [2],            // 添加成员
    'member:edit': [2],           // 编辑成员
    'member:delete': [2],         // 删除成员
    'member:role': [2],           // 修改成员角色
    'member:salary': [3],         // 修改成员工资
 }
 export default {
    mounted(el, binding) {
        const { value } = binding
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
        const userRole = userInfo.role || 0
        // 如果没有权限配置，默认显示
        if (!value) {
            return
        }
        // 检查权限
        const hasAuth = authConfig[value]?.includes(userRole)
        if (!hasAuth) {
            // 移除元素
            el.parentNode?.removeChild(el)
        }
    }
 } 
@@ -0,0 +1,24 @@
 import draggable from "./modules/draggable";
 import copy from "./modules/copy";
 import debounce from "./modules/debounce";
 import longPress from "./modules/longPress";
 import throttle from "./modules/throttle";
 const directivesList = {
  draggable,
  copy,
  debounce,
  longPress,
  throttle
 };
 const directives = {
  install: function (app) {
    Object.keys(directivesList).forEach((key) => {
      // 注册所有自定义指令
      app.directive(key, directivesList[key]);
    });
  },
 };
 export default directives;
@@ -0,0 +1,58 @@
 /*
 	需求：实现一个复制指定。复制指定内容至剪贴板
  1.动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
  2.将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
  3.选中值 textarea 并复制
  4.将 body 中插入的 textarea 移除
  5.在第一次调用时绑定事件，在解绑时移除事件
 */
 import { ElMessage } from "element-plus";
 export const copy = {
  mounted: function (el, { value }) {
    console.log(arguments);
    el.$value = value;
    el.onclick = () => {
      if (!el.$value) {
        // 值为空的时候，给出提示。可根据项目UI仔细设计
        ElMessage({
          type: "error",
          message: "无复制内容",
        });
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement("input");
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = "readonly";
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      const result = document.execCommand("Copy");
      if (result) {
        ElMessage({
          type: "success",
          message: "复制成功",
        });
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener("click", el.handler);
  },
  // 当传进来的值更新的时候触发
  beforeUpdate(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unmounted(el) {
    el.removeEventListener("click", el.handler);
  },
 };
 export default copy;
@@ -0,0 +1,28 @@
 /**
 * v-debounce
 * 按钮防抖指令，可自行扩展至input
 * 接收参数：function类型
 */
 const debounce = {
  mounted(el, binding) {
    if (typeof binding.value != "function") {
      console.log("callback must be a function");
    }
    let timer = null;
    el.__handleClick__ = function () {
      // if (timer) clearInterval(timer);
      //   
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        binding.value();
      }, 3000);
    };
    el.addEventListener("click", el.__handleClick__);
  },
  beforeUnmount(el) {
    el.removeEventListener("click", el.__handleClick__);
  },
 };
 export default debounce;
@@ -0,0 +1,47 @@
 /*
 	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
 	思路：
 		1、设置需要拖拽的元素为absolute，其父元素为relative。
 		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
 		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
 		4、鼠标松开(onmouseup)时完成一次拖拽
 	使用：在 Dom 上加上 v-draggable 即可
 	<div class="dialog-model" v-draggable></div>
 */
 const draggable = {
  mounted: function (el) {
    console.log(el)
    el.style.cursor = "move";
    el.style.position = "absolute";
    el.onmousedown = function (e) {
      let disX = e.pageX - el.offsetLeft;
      let disY = e.pageY - el.offsetTop;
      document.onmousemove = function (e) {
        let x = e.pageX - disX;
        let y = e.pageY - disY;
        console.log(el.parentNode.offsetWidth)
        let maxX = el.parentNode.offsetWidth - el.offsetWidth;
        let maxY = el.parentNode.offsetHeight - el.offsetHeight;
        if (x < 0) {
          x = 0;
        } else if (x > maxX) {
          x = maxX;
        }
        if (y < 0) {
          y = 0;
        } else if (y > maxY) {
          y = maxY;
        }
        el.style.left = x + "px";
        el.style.top = y + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
 };
 export default draggable;
@@ -0,0 +1,44 @@
 const longPress = {
  mounted(el, binding) {
    if (typeof binding.value != "function") {
      console.log("callback must be a function");
    }
    let pressTimer = null;
    let start = (e) => {
      if (e.type === "click" && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          // 执行函数
          handler();
        }, 2000);
      }
    };
    // 取消计时器
    let cancel = () => {
      // 检查计时器是否有值
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    // 运行函数
    const handler = (e) => {
      // 执行传递给指令的方法
      binding.value(e);
      console.log(e);
    };
    // 添加事件监听器
    el.addEventListener("mousedown", start);
    el.addEventListener("touchstart", start);
    el.addEventListener("click", start);
    // 取消计时器
    el.addEventListener("click", cancel);
    el.addEventListener("mouseout", cancel);
    el.addEventListener("touchend", cancel);
    el.addEventListener("touchcancel", cancel);
  },
 };
 export default longPress;
@@ -0,0 +1,30 @@
 /**
 * 一段时间内控制请求的频率
 * 上一次时间触发的时间和这次触发的时间相减 传入节流的时间
 * 
 * 
 * 应用场景：scroll加载的时候  和input框输入的情况
 */
 const throttle = {
  mounted(el, binding) {
    if (typeof binding.value != "function") {
      console.log("callback must be a function");
    }
    let lastTime = 0
    let newtimer = +new Date(); //拿到当前的时间
    el.__handleClick__ = function () {
      if (newtimer - lastTime > 3000) {
        binding.value()
        lastTime = newtimer
      }
    };
    el.addEventListener("click", el.__handleClick__);
  },
  beforeUnmount(el) {
    el.removeEventListener("click", el.__handleClick__);
  },
 }
 export default throttle
@@ -0,0 +1,79 @@
 <template>
  <div class="tags">
    <el-tag
      ref="tagRef"
      v-for="tag in tags"
      :key="tag.title"
      class="mR10 tabs"
      :closable="tag.close"
      :effect="tag.checked ? 'dark' : 'plain'"
      @click="tagChange(tag)"
      @close="delectTag(tag, index)"
    >
      <el-icon class="tabs-icon">
        <component :is="tag.icon"></component>
      </el-icon>
      {{ tag.title }}
    </el-tag>
  </div>
 </template>
 <script setup>
 import { useRoute, useRouter } from 'vue-router'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import store from '../../store/index.js'
 import { useStore } from 'vuex'
 const tabsMenuValue = ref('')
 const nameScroll = ref(false)
 const tagRef = ref()
 const route = useRoute()
 const router = useRouter()
 const globalStore = useStore() // 该方法用于返回store 实例
 // 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
 watch(
  () => route.path,
  () => {
    let params = {
      title: route.meta.name,
      url: route.path,
      icon: 'Menu',
      close: true,
      checked: true,
    }
    globalStore.dispatch('tabs/addTabs', params)
  },
  {
    immediate: true,
  }
 )
 const tags = store.getters.tabsMenuList
 const tagChange = (item) => {
  item.checked = true
  router.push(item.url)
 }
 const delectTag = (item, index) => {
  globalStore.dispatch('tabs/delectTag', item)
 }
 onMounted(() => {
  nextTick(() => {})
 })
 </script>
 <style lang="scss" scoped>
 .tags {
  width: 95%;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-flow: row;
  overflow: scroll;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
  .tabs {
    height: 30px;
  }
 }
 </style>
@@ -0,0 +1,64 @@
 <template>
  <el-icon class="icon-style" id="collapseIcon" @click="changeShrinkage">
    <component :is="!isCollapse ? 'Fold' : 'Expand'"></component>
  </el-icon>
  <el-breadcrumb separator="/" id="breadcrumb">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <span class="no-redirect" v-if="index === breadcrumbList.length - 1" :style="{ color: themeConfig.footColor }">{{ item.meta.name }}</span>
      <span class="redirect" v-else @click="handleRedirect(item.path)" :style="{ color: themeConfig.footColor }">{{ item.meta.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
 </template>
 <script setup>
 import { watch, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import store from "../../../store";
 import { useStore } from "vuex";
 const route = useRoute();
 const router = useRouter();
 const breadcrumbList = ref([]);
 const isCollapse = ref(false);
 const globalStore = useStore();
 const themeConfig = store.getters.themeConfig;
 const initBreadcrumbList = () => {
  breadcrumbList.value = route.matched;
  console.log(route.matched);
 };
 const handleRedirect = (path) => {
  router.push(path);
 };
 const changeShrinkage = () => {
  isCollapse.value = !store.getters.isCollapse;
  globalStore.dispatch("user/changeIsCollapse", isCollapse.value);
 };
 watch(
  route,
  () => {
    initBreadcrumbList();
  },
  { deep: true, immediate: true }
 );
 </script>
 <style lang="scss" scoped>
 .no-redirect {
  // color: #97a8be;
  cursor: text;
 }
 .redirect {
  font-weight: 600;
  cursor: pointer;
  &:hover {
    color: #97a8be;
  }
 }
 .icon-style {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
 }
 </style>
@@ -0,0 +1,25 @@
 export const steps = () => [{
    element: "#guide",
    popover: {
      title: "菜单栏",
      description: "Body of the popover",
      position: "left",
    },
  },
  {
    element: "#breadcrumb",
    popover: {
      title: "标签页",
      description: "",
      position: "bottom",
    },
  },
  {
    element: "#screenFul",
    popover: {
      title: "全屏",
      description: "Body of the popover",
      position: "bottom",
    },
  },
 ];
@@ -0,0 +1,33 @@
 <template>
  <el-icon @click="handleDriver"><Position /></el-icon>
 </template>
 <script setup>
 import Driver from 'driver.js'
 import 'driver.js/dist/driver.min.css'
 import { onMounted, ref } from 'vue'
 import { steps } from './index.js'
 let driver = ref('')
 onMounted(() => {
  driver.value = new Driver({
    className: 'scoped-class', //包裹driver.js弹窗的类名 className to wrap driver.js popover
    animate: true, // 高亮元素改变时是否显示动画 Animate while changing highlighted element
    opacity: 0.75, //背景透明度(0 表示只有弹窗并且没有遮罩) Background opacity (0 means only popovers and without overlay)
    padding: 10, //  元素与边缘的距离 Distance of element from around the edges
    allowClose: true, // 是否允许点击遮罩时关闭 Whether clicking on overlay should close or not
    overlayClickNext: false, //是否允许点击遮罩时移到到下一步 Should it move to next step on overlay click
    doneBtnText: '完成', // 最终按钮上的文本 Text on the final button
    closeBtnText: '跳过', // 当前步骤关闭按钮上的文本 Text on the close button for this step
    nextBtnText: '下一步', //当前步骤下一步按钮上的文本 Next button text for this step
    prevBtnText: '上一步',
  })
 })
 const handleDriver = () => {
  driver.value.defineSteps(steps)
  driver.value.start()
 }
 </script>
 <style lang="scss" scoped></style>
@@ -0,0 +1,66 @@
 <template>
  <el-icon class="icon-style" @click="dialogVisible = true"><Search /></el-icon>
  <el-dialog v-model="dialogVisible" :show-close="false">
    <template #header>
      <el-input
        v-model="searchValue"
        placeholder="搜索"
        class="input-with-select"
      >
        <template #prepend>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </template>
    <div class="centent col-center">暂无搜索结果🦁🦁🦁🦁</div>
    <template #footer>
      <div class="footer-tip flx-row">
        <span>↩</span> 确认 <span class="ml10">⇅</span>切换
        <span class="ml10" style="font-size: 10px">ESC</span>关闭
      </div>
    </template>
  </el-dialog>
 </template>
 <script setup>
 import { Search, Top, Bottom } from '@element-plus/icons-vue'
 import { nextTick, onMounted, ref } from 'vue'
 const dialogVisible = ref(false)
 const searchValue = ref('')
 onMounted(() => {
  nextTick(() => {
    document.addEventListener('keyup', function (e) {
      if (e.keyCode == 27) {
        dialogVisible.value = false
      }
    })
  })
 })
 </script>
 <style lang="scss" scoped>
 .input-with-select {
  height: 40px;
 }
 .footer-tip {
  height: 20px;
  padding: 0;
  font-size: 12px;
  span {
    display: flex;
    width: 20px;
    height: 18px;
    padding-bottom: 2px;
    margin-right: 0.4em;
    background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    border-radius: 2px;
    box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
      0 1px 2px 1px #1e235a66;
    align-items: center;
    justify-content: center;
  }
 }
 </style>
@@ -0,0 +1,71 @@
 <template>
  <el-dropdown placement="bottom">
    <div class="flx-center">
      <div class="avatar">
        <img :src="userInfo?.avatar || ''" alt="avatar" />
      </div>
      <span class="username" :style="{ color: themeConfig.footColor }">{{
        userInfo?.name || ''
      }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
        <el-dropdown-item @click="gotoLogin">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
 </template>
 <script setup>
 import { ArrowDown } from "@element-plus/icons-vue";
 import { nextTick, onMounted, ref } from "vue";
 import store from "../../../store/index.js";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const themeConfig = store.getters.themeConfig;
 const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert("button click");
 };
 const userInfo = ref(null);
 onMounted(() => {
  userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
 })
 const gotoLogin = () => {
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("userInfo");
  router.push("/login");
 };
 </script>
 <style lang="scss" scoped>
 .el-dropdown {
  cursor: pointer;
  .el-tooltip__trigger {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
 }
 .username {
  font-size: 15px;
  margin: 0 0 0 10px;
 }
 .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin-left: 20px;
  img {
    width: 100%;
    height: 100%;
  }
 }
 </style>
@@ -0,0 +1,33 @@
 <template>
  <el-icon id="fullscreen" class="icon-style" @click="handleFullScreen">
    <component :is="icon ? 'Rank' : 'FullScreen'"></component>
  </el-icon>
 </template>
 <script setup>
 import screenfull from 'screenfull'
 import { ref, onMounted, onBeforeMount } from 'vue'
 import { ElMessage } from 'element-plus'
 let icon = ref(screenfull.isFullscreen)
 const handleFullScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }
 }
 const changeIcon = () => {
  icon.value = screenfull.isFullscreen
 }
 onMounted(() => {
  screenfull.on('change', changeIcon)
 })
 onBeforeMount(() => {
  screenfull.off('change')
 })
 </script>
 <style scoped></style>
@@ -0,0 +1,78 @@
 <template>
  <el-popover :width="400" placement="bottom" trigger="click">
    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> -->
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="通知" name="first">
        <div class="notice-lists">
          <div class="item one-cut-txt" v-for="item in notList" :key="item.id">
            <span class="type">通知</span> {{ item.text }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="公告" name="second">
        <div class="notice-lists">
          <div class="item one-cut-txt" v-for="item in notList" :key="item.id">
            <span class="type">公告</span> {{ item.text }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统消息" name="third">
        <div class="notice-lists">
          <div class="item one-cut-txt" v-for="item in notList" :key="item.id">
            <span class="type" style="color: rgb(47, 96, 194); background-color: #e8f3ff"
              >系统消息</span
            >
            {{ item.text }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #reference>
      <el-icon class="icon-style" @click="visible = !visible"><bell /></el-icon>
    </template>
  </el-popover>
 </template>
 <script setup name="messages">
 import { Bell } from "@element-plus/icons-vue";
 import { nextTick, onMounted, ref } from "vue";
 const visible = ref(false);
 const activeName = ref("first");
 const notList = ref("first");
 onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 .icon-style {
  font-size: 20px;
  cursor: pointer;
  margin: 0 11px;
 }
 .notice-lists {
  height: 260px;
  overflow: scroll;
  .item {
    font-size: 14px;
    padding: 10px;
    color: #666;
    .type {
      font-size: 10px;
      padding: 5px 10px;
      font-weight: 500;
      line-height: 0px;
      color: #fa4a1e;
      text-align: left;
      border-radius: 6px;
      background: #fa4a1e14;
      &.error-type {
        color: #4060c7;
        background: #e8f3ff;
      }
    }
  }
 }
 </style>
@@ -0,0 +1,192 @@
 <template>
  <el-icon @click="openDrawer" class="icon-style"><Setting /></el-icon>
  <el-drawer v-model="drawerVisible" title="布局设置" size="300px">
    <el-divider>主题颜色</el-divider>
    <div class="flx-row">
      <div
        class="theme-item"
        v-for="item in colorList"
        :key="item"
        :style="{ backgroundColor: item }"
        @click="changePrimary(item)"
      >
        <el-icon v-if="item == themeConfig.primary" class="icon"
          ><Select
        /></el-icon>
      </div>
    </div>
    <el-divider>导航栏颜色</el-divider>
    <div class="flx-row">
      <div
        class="theme-item"
        v-for="item in tabColorList"
        :key="item"
        :style="{ backgroundColor: item }"
        @click="changeTabCole(item)"
      >
        <el-icon v-if="item == themeConfig.tabColor" class="icon"
          ><Select
        /></el-icon>
      </div>
    </div>
    <!-- <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Check" :inactive-icon="Close" /> -->
    <div class="flx-row">
      <div class="flx-tit">侧边栏模式</div>
      <el-switch
        v-model="value2"
        @change="changeGreyOrWeak($event)"
        class="mt-2"
        style="margin-left: 24px"
        inline-prompt
        :active-icon="Sunny"
        :inactive-icon="Moon"
      />
    </div>
    <div class="flx-row">
      <div class="flx-tit">标签栏是否显示</div>
      <el-switch
        v-model="istags"
        @change="changeTags($event)"
        class="mt-2"
        style="margin-left: 24px"
      />
    </div>
    <!-- <div class="theme-item">
        <el-color-picker
          v-model="themeConfig.primary"
          :predefine="colorList"
          @change="changePrimary"
        >
        </el-color-picker>
      </div> -->
    <!--  <div class="theme-item">
        <span>暗黑模式</span>
        <SwitchDark></SwitchDark>
      </div>
      <div class="theme-item">
        <span>灰色模式</span>
        <el-switch
          v-model="themeConfig.isGrey"
          @change="changeGreyOrWeak($event, 'grey')"
        />
      </div>
      <div class="theme-item">
        <span>色弱模式</span>
        <el-switch
          v-model="themeConfig.isWeak"
          @change="changeGreyOrWeak($event, 'weak')"
        />
      </div>
      <br />
      <el-divider class="divider" content-position="center">
       <el-icon><Setting /></el-icon>
        界面设置
      </el-divider>
      <div class="theme-item">
        <span>折叠菜单</span>
        <el-switch v-model="isCollapse" />
      </div>
      <div class="theme-item">
        <span>面包屑导航</span>
        <el-switch v-model="themeConfig.breadcrumb" />
      </div>
      <div class="theme-item">
        <span>标签栏</span>
        <el-switch v-model="themeConfig.tabs" />
      </div>
      <div class="theme-item">
        <span>页脚</span>
        <el-switch v-model="themeConfig.footer" />
      </div> -->
  </el-drawer>
 </template>
 <script setup>
 import { ref, computed, useAttrs } from 'vue'
 import { Sunny, Moon } from '@element-plus/icons-vue'
 import store from '../../../store/index.js'
 import { mix } from '../../../utils/color.js'
 import { useStore } from 'vuex'
 const value2 = ref(true)
 const istags = computed(() => {
  return store.getters.themeConfig.istags
 })
 // 预定义主题颜色
 const colorList = [
  '#4060c7',
  '#409EFF',
  '#009688',
  '#27ae60',
  '#e74c3c',
  '#fd726d',
  '#f39c12',
  '#9b59b6',
 ]
 // 预导航栏颜色
 const tabColorList = [
  '#FFFFFF',
  '#333333',
  '#009688',
  '#27ae60',
  '#e74c3c',
  '#fd726d',
  '#f39c12',
  '#9b59b6',
 ]
 // 主题初始化
 const globalStore = useStore()
 const themeConfig = computed(() => {
  return store.getters.themeConfig
 })
 const changePrimary = (val) => {
  globalStore.dispatch('user/changeThem', val)
 }
 const changeTabCole = (val) => {
  globalStore.dispatch('user/changeTabColor', val)
 }
 const drawerVisible = ref(false)
 const openDrawer = () => {
  drawerVisible.value = true
 }
 const changeGreyOrWeak = (e) => {
  globalStore.dispatch('user/changeMenuColor', e)
 }
 const changeTags = (e) => {
  globalStore.dispatch('user/changeTags', e)
 }
 </script>
 <style scoped lang="scss">
 .icon-style {
  font-size: 20px;
  cursor: pointer;
  margin: 0 11px;
 }
 .flx-row {
  flex-wrap: wrap;
 }
 .flx-tit {
  color: #303133;
  flex: 1;
  font-size: 14px;
 }
 .theme-item {
  margin: 16px 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 2px;
  position: relative;
  .icon {
    color: #fff;
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 14px;
  }
 }
 </style>
@@ -0,0 +1,89 @@
 <template>
  <div
    class="header"
    :style="{ backgroundColor: themeConfig.tabColor, color: themeConfig.footColor }"
  >
    <div class="header-lf flx-center">
      <Breadcrumb></Breadcrumb>
    </div>
    <div class="header-ri flx-center">
      <!-- <Search></Search> -->
      <el-icon class="icon-style" @click="refresh"><Refresh /></el-icon>
      <!-- <message></message> -->
      <!-- <Driver></Driver> -->
      <fullScreen></fullScreen>
      <avatar></avatar>
      <setting></setting>
    </div>
  </div>
 </template>
 <script setup name="header">
 import { inject, ref } from "vue";
 import store from "../../store/index.js";
 // import { Setting, Search } from '@element-plus/icons-vue'
 import avatar from "./components/avatar.vue";
 import setting from "./components/setting.vue";
 import Search from "./components/Search.vue";
 import fullScreen from "./components/fullScreen.vue";
 import message from "./components/message.vue";
 import Breadcrumb from "./components/Breadcrumb.vue";
 // import Driver from "./components/Driver/index.vue";
 // 局部数据刷新
 const refresh = inject("reload");
 const themeConfig = store.getters.themeConfig;
 </script>
 <style scoped lang="scss">
 .header {
  border-bottom: 1px solid #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 48px;
  line-height: 48px;
  .header-lf {
    .collapse-icon {
      font-size: 22px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .header-ri {
    // margin-left:10px;
    .message-box {
      height: 100%;
      position: relative;
      .dot {
        position: absolute;
        top: -5px;
        right: 10px;
        background-color: #d54f50;
        border-radius: 50%;
        width: 8px;
        height: 8px;
      }
      .bell-icon {
        font-size: 22px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .icon-style {
      font-size: 20px;
      cursor: pointer;
      margin: 0 0 0 11px;
    }
  }
 }
 </style>
@@ -0,0 +1,65 @@
 .el-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .el-aside {
    width: auto;
    overflow: inherit;
  }
  .el-header,
  .el-footer {
    height: auto;
    padding: 0;
  }
  .main-tabs {
    width: 100%;
    margin-bottom: 10px;
    background-color: #fff;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    height: 30px;
  }
  .el-main {
    background: #f0f2f5;
    padding: 10px 13px;
    box-sizing: border-box;
    // 防止切换出现横向滚动条
    overflow-x: hidden;
    .main-box {
      width: 100%;
      height: 100%;
      // background-color: #f5f5f5;
      // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      // border-radius: 4px;
      // padding: 20px;
      box-sizing: border-box;
      overflow: auto;
      overflow-x: hidden !important;
      &::-webkit-scrollbar {
        background-color: white;
      }
    }
  }
 }
 .shake {
  animation: shake 0.5s linear;
 }
@keyframes shake {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
 }
@@ -0,0 +1,61 @@
 <template>
  <el-container class="container">
    <el-aside :style="{ backgroundColor: themeConfig.backgroundColor }"
      ><Menu></Menu
    ></el-aside>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <div class="main-tabs flx-row" v-if="themeConfig.istags">
          <tabs></tabs>
        </div>
        <div class="main-box">
          <router-view :class="{ shake: disabled }"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
 </template>
 <script setup name="layout">
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 import { ref, watch } from 'vue'
 import store from '../store/index.js'
 import Header from './header/index.vue'
 import Menu from './menu/index.vue'
 import tabs from './Tabs/index.vue'
 const themeConfig = store.getters.themeConfig
 console.log(themeConfig.backgroundColor)
 let router = useRouter()
 const disabled = ref(false)
 // onMounted(() => {
 //   disabled.value = true
 //   setTimeout(() => {
 //     disabled.value = false
 //   }, 1500)
 // })
 watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log('watch', newValue)
    console.log('watch', oldValue)
    if (newValue == oldValue) {
    } else {
      disabled.value = true
      setTimeout(() => {
        disabled.value = false
      }, 1000)
    }
  },
  { immediate: true }
 )
 </script>
 <style scoped lang="scss">
@import './index.scss';
 </style>
@@ -0,0 +1,48 @@
 <template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu
      v-if="subItem.children && subItem.children.length > 0"
      :index="subItem.path"
    >
      <template #title>
        <el-icon>
          <component :is="subItem.meta.icon"></component>
        </el-icon>
        <span>{{ subItem.meta.title }}</span>
      </template>
      <Menu-items :menuList="subItem.children"></Menu-items>
      <!--<template v-for="child in subItem.children" :key="child.path">
        <template v-if="child.children && child.children.length > 0">
           <Menu-items :menuList="child.children"></Menu-items>
        </template>
        <el-menu-item v-else :index="child.path">
          <el-icon>
            <component :is="child.meta.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ child.meta.title }}</span>
          </template>
        </el-menu-item>
      </template> -->
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.path">
      <el-icon>
        <component :is="subItem.meta.icon"></component>
      </el-icon>
      <template #title>
        <span>{{ subItem.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
 </template>
 <script setup>
 defineProps(["menuList"]);
 </script>
 <style scoped>
 .icons {
  width: 24px;
  height: 18px;
 }
 </style>
@@ -0,0 +1,32 @@
 <template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-menu-item v-if="!subItem.children" :index="subItem.url" :route="subItem.url">
      <el-icon>
        <component :is="subItem.icon"></component>
      </el-icon>
      <span>{{ subItem.title }}</span>
    </el-menu-item>
    <!--有多级菜单-->
    <el-sub-menu v-if="subItem.children" :key="subItem.url" :index="subItem.url">
      <template #title>
        <el-icon>
          <component :is="subItem.icon"></component>
        </el-icon>
        <span> {{ subItem.title }}</span>
      </template>
      <!--递归组件，把遍历的值传回子组件，完成递归调用-->
      <menu-items :menuList="subItem.children"></menu-items>
    </el-sub-menu>
  </template>
 </template>
 <script setup>
 defineProps(["menuList"]);
 </script>
 <style scoped>
 .icons {
  width: 24px;
  height: 18px;
 }
 </style>
@@ -0,0 +1,118 @@
 .menu {
  transition: all 0.3s ease;
  background: #20222a;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .logo {
    transition: width 0.3s ease;
    height: 55px;
    box-sizing: border-box;
    border-bottom: 2px solid #1d1e26;
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
    span {
      font-size: 22px;
      font-weight: bold;
      color: #dadada;
      white-space: nowrap;
    }
    img {
      width: 30px;
      object-fit: contain;
      margin-right: 8px;
    }
  }
  .el-scrollbar {
    height: calc(100% - 55px);
    .el-menu {
      // flex: 1;
      overflow: auto;
      overflow-x: hidden;
      border: none !important;
      width: 100% !important;
      &::-webkit-scrollbar {
        background-color: #20222a;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #41444b;
      }
      .el-menu-item {
        width: 200px;
        &.is-active {
          background-color: #060708 !important;
        }
        &.is-active::before {
          content: "";
          top: 0;
          left: 0;
          bottom: 0;
          width: 4px;
          background: $bg-color;
          position: absolute;
        }
      }
      .href {
        display: inline-block;
        text-decoration: none;
        color: #bdbdc0;
        width: 100%;
        height: 100%;
      }
    }
  }
 }
 // .el-menu--popup {
 //   .el-menu-item {
 //     background-color: #20222a;
 //     width: 200px;
 //     i {
 //       margin-right: 5px;
 //     }
 //     i,
 //     span {
 //       color: hsla(0, 0%, 100%, 0.7);
 //     }
 // // 
 //     &:hover {
 //       i,
 //       span {
 //         color: #fff !important;
 //       }
 //     }
 //     &.is-active {
 //       background-color: #060708 !important;
 //       &:before {
 //         content: "";
 //         top: 0;
 //         left: 0;
 //         bottom: 0;
 //         width: 4px;
 //         background: $bg-color;
 //         position: absolute;
 //       }
 //       i,
 //       span {
 //         color: #fff !important;
 //       }
 //     }
 //   }
 // }
@@ -0,0 +1,73 @@
 <template>
  <div id="guide" class="menu" :style="{
    width: store.getters.isCollapse == true ? '' : '200px',
    height: '100%',
    color: themeConfig.textColor,
  }">
    <div class="logo" v-if="!store.getters.isCollapse">
      <img src="../../assets/logo.png" alt="" style="margin-right: 5px" /> BIG CUTE
    </div>
    <div class="logo" v-else>
      <img src="../../assets/logo.png" alt="" />
    </div>
    <el-scrollbar style="height: 100%">
      <el-menu :default-active="activeMenu" :router="true" :collapse="store.getters.isCollapse"
        :collapse-transition="false" :unique-opened="true" :background-color="themeConfig.backgroundColor"
        :text-color="themeConfig.textColor" :active-text-color="themeConfig.primary">
        <menuItems :menuList="menuList"></menuItems>
      </el-menu>
    </el-scrollbar>
  </div>
 </template>
 <script setup>
 import { computed, onMounted, reactive, ref } from "vue";
 import store from "../../store/index.js";
 import menuItems from "./components/menuItems.vue";
 // 引入本地路由表渲染导航栏
 // import menuTable from "./menuTable.js";
 import { useRouter, useRoute } from "vue-router";
 import { generateMenu } from "../../router/generateMenu.js"
 import routerList from "../../router/originalRoutingTable.js";
 const route = useRoute();
 const activeMenu = computed(() => {
  return route.path;
 });
 const menuList = ref([]);
 const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
 };
 const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
 };
 const themeConfig = store.getters.themeConfig;
 // 菜单表存在后端的操作方式
 onMounted(() => {
  // 权限检查
  const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
  const menuTable = generateMenu(routerList, userInfo.role)
  // 获取本地菜单表渲染
  menuList.value = menuTable;
 });
 </script>
 <style scoped lang="scss">
 .menu {
  // width: 200px;
  .logo {
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;
    img {
      width: 25px;
      vertical-align: middle;
    }
  }
 }
 </style>
@@ -0,0 +1,33 @@
 const menuTable = [
  {
    title: "首页",
    url: "/home",
    icon: "HomeFilled",
  },
  {
    title: "组别管理",
    url: "/groupManagement",
    icon: "Notebook",
  },
  {
    title: "综合部初审列表",
    url: "/performance/attendance/general",
    icon: "Notebook",
  },
  {
    title: "主管审批列表",
    url: "/performance/attendance/manager",
    icon: "Notebook",
  },
  {
    title: "综合部复审列表",
    url: "/performance/attendance/reviewed",
    icon: "Notebook",
  },
  {
    title: "财务考勤列表",
    url: "/performance/attendance/finance",
    icon: "Notebook",
  },
 ];
 export default menuTable;
@@ -0,0 +1,37 @@
 import { createApp } from "vue";
 import router from "./router/index";
 import store from "../src/store/index";
 import "./styles/common.scss";
 import ElementPlus from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 // 引入注册自定义指令
 import directives from "./instruction/index.js";
 import "element-plus/dist/index.css";
 import App from "./App.vue";
 import * as ELIcons from "@element-plus/icons-vue";
 import VMdEditor from "@kangc/v-md-editor";
 import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
 import "@kangc/v-md-editor/lib/style/base-editor.css";
 import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
 import VConsole from "vconsole";
 import authDirective from './directives/auth'
 // 或者使用配置参数来初始化，详情见文档
 const vConsole = new VConsole({ theme: "dark" });
 VMdEditor.use(vuepressTheme);
 const app = createApp(App);
 // 小图标引用
 for (const iconName in ELIcons) {
  // 注册组件
  app.component(iconName, ELIcons[iconName]);
 }
 app.use(router).use(store).use(directives).use(VMdEditor).use(ElementPlus, {
  locale: zhCn,
 });
 // 注册自定义指令
 app.directive('auth', authDirective)
 app.mount("#app");
@@ -0,0 +1,67 @@
 // 递归处理路由列表生成菜单数据
 export const generateMenu = (routes, userRole) => {
    const menuList = [];
    // 递归处理路由
    const processRoute = (route) => {
        // 检查路由是否需要权限验证
        if (route.meta && route.meta.requiresAuth) {
            // 检查用户角色是否有权限访问
            if (route.meta.roles && !route.meta.roles.includes(userRole)) {
                return null;
            }
            const menuItem = {
                title: route.meta.name,
                path: route.path,
                name: route.name,
                meta: route.meta,
                url: route.url || route.path,
                icon: route.meta.icon
            };
            // 如果有子路由，递归处理
            if (route.children && route.children.length > 0) {
                const children = route.children
                    .map(child => processRoute(child))
                    .filter(child => child !== null);
                if (children.length > 0) {
                    // 如果只有一个子路由，将其提升为一级菜单
                    if (children.length === 1) {
                        const child = children[0];
                        return {
                            title: child.meta.name,
                            path: child.path,
                            name: child.name,
                            meta: child.meta,
                            url: child.url || child.path,
                            icon: route.meta.icon
                        };
                    }
                    menuItem.children = children;
                }
            }
            return menuItem;
        }
        return null;
    };
    // 处理所有路由
    routes.forEach(route => {
        const menuItem = processRoute(route);
        if (menuItem) {
            menuList.push(menuItem);
        }
    });
    return menuList;
 };
 // 使用示例
 /*
 const userRole = 2; // 用户角色
 const menuList = generateMenu(routerList, userRole);
 console.log(menuList);
 */ 
@@ -0,0 +1,40 @@
 import router from "./router.js";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 NProgress.configure({
  ease: "ease",
  speed: 500,
 });
 // 路由守卫
 router.beforeEach((to, from, next) => {
  // 获取token和用户信息
  const token = sessionStorage.getItem('token')
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
  // 白名单路由（不需要登录就可以访问的路由）
  const whiteList = ['/login']
  // 如果在白名单中，直接放行
  if (whiteList.includes(to.path)) {
    next()
    return
  }
  // 判断是否登录
  if (!token || !userInfo.userid) {
    // 未登录，跳转到登录页
    next('/login')
    return
  }
  // 已登录，放行
  next()
 })
 router.afterEach((transition) => {
  NProgress.done();
 });
 export default router;
@@ -0,0 +1,149 @@
 // 模板自带的功能路由表
 const routerList = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/index.vue"),
  },
  {
    path: "/",
    component: () => import("../layout/index.vue"),
    name: "container",
    redirect: "home",
    meta: {
      requiresAuth: true, //有一些页面是否登录才能进去
      name: "首页",
      icon: "HomeFilled",
    },
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("../views/home/index.vue"),
        meta: {
          requiresAuth: true, //有一些页面是否登录才能进去
          name: "首页",
          icon: "HomeFilled",
        },
      },
    ],
  },
  {
    path: "/group",
    name: "employe",
    component: () => import("../layout/index.vue"),
    meta: {
      requiresAuth: true, //有一些页面是否登录才能进去
      name: "组别管理",
      icon: "Notebook",
      roles: [2, 3]
    },
    children: [
      {
        path: "/groupManagement",
        name: "groupManagement",
        component: () => import("../views/groupManagement/index.vue"),
        meta: {
          requiresAuth: true,
          name: "组别管理",
          icon: "Notebook",
          roles: [2, 3]
        },
      },
    ],
  },
  {
    path: '/performance/attendance',
    component: () => import("../layout/index.vue"),
    redirect: '/performance/attendance/general',
    name: 'PerformanceAttendance',
    meta: {
      title: '绩效考勤',
      icon: 'el-icon-s-data',
      name: "绩效考勤",
      requiresAuth: true,
      icon: "Notebook",
      roles: [1, 2, 3] // 所有角色都可以访问
    },
    children: [
      {
        path: '/general',
        name: 'GeneralAttendance',
        component: () => import('../views/performance/attendance/general/index.vue'),
        meta: {
          title: '综合部初审列表',
          name: "综合部初审列表",
          requiresAuth: true,
          icon: "Notebook",
          roles: [2] // 只有role=2的用户可以查看
        }
      },
      {
        path: '/reviewed',
        name: 'ReviewedAttendance',
        component: () => import('../views/performance/attendance/reviewed/index.vue'),
        meta: {
          title: '综合部复审列表',
          name: "综合部复审列表",
          requiresAuth: true,
          icon: "Notebook",
          roles: [2] // 只有role=2的用户可以查看
        }
      },
      {
        path: '/manager',
        name: 'ManagerAttendance',
        component: () => import('../views/performance/attendance/manager/index.vue'),
        meta: {
          title: '主管审批列表',
          name: "主管审批列表",
          icon: "Notebook",
          requiresAuth: true,
          roles: [1] // 只有role=1的用户可以查看
        }
      },
      {
        path: '/finance',
        name: 'FinanceAttendance',
        component: () => import('../views/performance/attendance/finance/index.vue'),
        meta: {
          title: '财务查看考勤列表',
          name: "财务查看考勤列表",
          icon: "Notebook",
          requiresAuth: true,
          roles: [3] // 只有role=3的用户可以查看
        }
      }
    ]
  },
  {
    path: '/payroll',
    component: () => import("../layout/index.vue"),
    redirect: '/payroll/sheets',
    name: 'Payroll',
    meta: {
      title: '工资查看',
      icon: "Notebook",
      name: "工资查看",
      requiresAuth: true,
      roles: [3] // 只有财务角色可以访问
    },
    children: [
      {
        path: '/sheets',
        name: 'PayrollSheets',
        component: () => import('../views/payroll/sheets/index.vue'),
        meta: {
          title: '工资条列表',
          name: "工资条列表",
          requiresAuth: true,
          icon: "Notebook",
          roles: [3] // 只有财务角色可以访问
        }
      }
    ]
  }
 ];
 export default routerList;
@@ -0,0 +1,15 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import home from "../views/home/index.vue";
 import login from "../views/login/index.vue";
 import Layout from "../layout/index.vue";
 // 原本模板功能路由表
 import routerList from "./originalRoutingTable.js";
 const routes = routerList;
 const router = createRouter({
  history: createWebHashHistory(),
  routes,
 });
 export default router;
@@ -0,0 +1,9 @@
 const getters = {
  token: (state) => state.user.token,
  isCollapse: (state) => state.user.isCollapse,
  UserInfo: (state) => state.user.UserInfo,
  themeConfig: (state) => state.user.themeConfig,
  tabsMenuList: (state) => state.tabs.tabsMenuList
 };
 export default getters;
@@ -0,0 +1,23 @@
 import {
  createStore
 } from "vuex";
 import user from "./modules/users";
 import tabs from './modules/tabs'
 import getters from "./getters";
 import createPersistedState from "vuex-persistedstate";
 export default createStore({
  getters,
  modules: {
    user,
    tabs
  },
  plugins: [
    // 默认储存在localstorage
    createPersistedState({
      // 本地储存名
      key: "user",
      // 指定模块
      paths: ["user"],
    }),
  ],
 });
@@ -0,0 +1,69 @@
 import {
  ElStep
 } from "element-plus";
 import router from "../../router/router.js";
 export default {
  namespaced: true,
  state: {
    tabsMenuList: [{
      title: "首页",
      url: 'home',
      icon: "Menu",
      close: false,
      checked: true
    }]
  },
  mutations: {
    addTabsMenu(state, obj) {
      let titles = state.tabsMenuList.map(item => item.title).join(',')
      if (titles.includes(obj.title)) {
        for (let index = 0; index < state.tabsMenuList.length; index++) {
          const element = state.tabsMenuList[index];
          state.tabsMenuList[index].checked = false
          if (element.title == obj.title) {
            state.tabsMenuList[index].checked = true
          }
        }
      } else {
        state.tabsMenuList.forEach(item => {
          item.checked = false
        });
        state.tabsMenuList.push(obj)
      }
    },
    delectTagMenu(state, item) {
      if (state.tabsMenuList.length == 0) {
        return
      }
      for (let i = 0; i < state.tabsMenuList.length; i++) {
        let ele = state.tabsMenuList[i]
        console.log(ele)
        if (ele == item) {
          state.tabsMenuList[i - 1].checked = true
          state.tabsMenuList.splice(i, 1)
          return router.push(state.tabsMenuList[i - 1].url)
        }
      }
      console.log(state.tabsMenuList)
    }
  },
  actions: {
    addTabs({
      commit
    }, str) {
      console.log(str);
      commit("addTabsMenu", str);
    },
    delectTag({
      commit
    }, val) {
      commit('delectTagMenu', val)
    }
  },
 };
@@ -0,0 +1,112 @@
 import router from "../../router/router.js";
 import { mix } from "../../utils/color.js";
 import { ElMessage } from "element-plus";
 export default {
  namespaced: true,
  state: {
    UserInfo: {},
    token: sessionStorage.getItem("token") || "",
    isCollapse: true,
    themeConfig: {
      primary: "#4060c7",
      tabColor: "#FFFFFF",
      footColor: "#606266",
      backgroundColor: "#FFFFFF",
      textColor: "#00000099",
      istags: true,
    },
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUserInfo(state, userinfo) {
      state.UserInfo = userinfo;
    },
    SetIsCollapse(state, isCollapse) {
      state.isCollapse = isCollapse;
    },
    setThemeConfig(state, primary) {
      state.themeConfig.primary = primary;
    },
    setThemeConfigTbaColor(state, primary) {
      state.themeConfig.tabColor = primary;
      if (primary == "#FFFFFF") {
        state.themeConfig.footColor = "#606266";
      } else {
        state.themeConfig.footColor = "#ffffff";
      }
    },
    setThemeConfigMenuColor(state, primary) {
      if (primary) {
        state.themeConfig.backgroundColor = "#FFFFFF";
        state.themeConfig.textColor = "#00000099";
      } else {
        state.themeConfig.backgroundColor = "#1d2129";
        state.themeConfig.textColor = "#bdbdc0";
      }
    },
    setThemeConfigchangeTags(state, primary) {
      if (primary) {
        state.themeConfig.istags = true;
      } else {
        state.themeConfig.istags = false;
      }
    },
  },
  actions: {
    // 登录
    // login({ commit }, userInfo) {
    //   return new Promise((resolve, reject) => {
    //     LoginInfo(userInfo)
    //       .then((res) => {
    //         console.log(res.data.data);
    //         sessionStorage.setItem("token", res.data.data.token);
    //         sessionStorage.setItem("UserInfo", JSON.stringify(res.data.data));
    //         commit("setToken", res.data.data.token);
    //         commit("setUserInfo", res.data.data);
    //         router.replace("/");
    //         ElMessage({
    //           message: "登录成功",
    //           type: "success",
    //         });
    //         resolve();
    //       })
    //       .catch((err) => {
    //         reject(err);
    //       });
    //   });
    // },
    changeIsCollapse({ commit }, str) {
      console.log(str);
      commit("SetIsCollapse", str);
    },
    changeThem({ commit }, str) {
      commit("setThemeConfig", str);
      const pre = "--el-color-primary";
      // 白色混合色
      const mixWhite = "#ffffff";
      // 黑色混合色
      const mixBlack = "#000000";
      const el = document.documentElement;
      el.style.setProperty(pre, str);
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.1));
      }
      el.style.setProperty("--el-color-primary-dark", mix(str, mixBlack, 0.1));
    },
    changeTabColor({ commit }, val) {
      commit("setThemeConfigTbaColor", val);
    },
    changeMenuColor({ commit }, val) {
      commit("setThemeConfigMenuColor", val);
    },
    changeTags({ commit }, val) {
      commit("setThemeConfigchangeTags", val);
    },
  },
 };
@@ -0,0 +1,216 @@
 /* 
  Reset style sheet
 */
 html,
 body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
  display: block;
 }
 ol,
 ul {
  list-style: none;
 }
 blockquote,
 q {
  quotes: none;
 }
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
  content: "";
  content: none;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 html,
 body,
 #app {
  height: 100%;
  width: 100%;
 }
 /* flex */
 .flx-center {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .flx-justify-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .flx-align-center {
  display: flex;
  align-items: center;
 }
 .flx-row {
  display: flex;
  flex-flow: row;
  align-items: center;
 }
 .flx-row-right {
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
 }
 .col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
 }
 .ml10 {
  margin-left: 10px;
 }
 .p10 {
  padding: 10px;
 }
 .p20 {
  padding: 20px;
 }
 .m10 {
  margin: 10px;
 }
 .m20 {
  margin: 20px;
 }
 .mt10 {
  margin-top: 10px;
 }
 .mt20 {
  margin-top: 20px;
 }
 .w100 {
  width: 100%;
 }
 .ml20 {
  margin-left: 20px;
 }
 .mR10 {
  margin-right: 10px;
 }
 .one-cut-txt {
  /*强制文字在一行文本框内*/
  white-space: nowrap;
  /*溢出部分文字隐藏*/
  overflow: hidden;
  /*溢出部分省略号处理*/
  text-overflow: ellipsis;
 }
 /* 清除浮动 */
 .clearfix::after {
  content: "";
  display: block;
  height: 0px;
  clear: both;
  overflow: hidden;
 }
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
  transition: all 0.2s;
 }
 .fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.2s;
 }
 .fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.2s;
 }
 /* Breadcrumb */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
  transition: all 0.2s ease;
 }
 .breadcrumb-enter-from,
 .breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
 }
 .breadcrumb-leave-active {
  position: absolute;
  z-index: -1;
 }
 /* scroll bar */
 ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: white;
 }
 ::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  background-color: #dddee0;
  border-radius: 20px;
 }
 .content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  font-size: 23px;
  font-weight: bold;
  color: rgb(88, 88, 88);
  line-height: 100px;
  min-height: 400px;
 }
@@ -0,0 +1,16 @@
 export const mix = (c1, c2, ratio) => {
  ratio = Math.max(Math.min(Number(ratio), 1), 0)
  let r1 = parseInt(c1.substring(1, 3), 16)
  let g1 = parseInt(c1.substring(3, 5), 16)
  let b1 = parseInt(c1.substring(5, 7), 16)
  let r2 = parseInt(c2.substring(1, 3), 16)
  let g2 = parseInt(c2.substring(3, 5), 16)
  let b2 = parseInt(c2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - ratio) + r2 * ratio) + ''
  let g = Math.round(g1 * (1 - ratio) + g2 * ratio) + ''
  let b = Math.round(b1 * (1 - ratio) + b2 * ratio) + ''
  r = ('0' + (r || 0).toString(16)).slice(-2)
  g = ('0' + (g || 0).toString(16)).slice(-2)
  b = ('0' + (b || 0).toString(16)).slice(-2)
  return '#' + r + g + b
 }
@@ -0,0 +1,44 @@
 export function getDateTime(type) {
  var date = new Date();
  var hengGang = "-";
  var maoHao = ":";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var curDate = date.getDate();
  var curHours = date.getHours();
  var curMinutes = date.getMinutes();
  var curSeconds = date.getSeconds();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (curDate >= 0 && curDate <= 9) {
    curDate = "0" + curDate;
  }
  if (curHours >= 0 && curHours <= 9) {
    curHours = "0" + curHours;
  }
  if (curMinutes >= 0 && curMinutes <= 9) {
    curMinutes = "0" + curMinutes;
  }
  if (curSeconds >= 0 && curSeconds <= 9) {
    curSeconds = "0" + curSeconds;
  }
  var currentdate = "";
  if (type == "year") {
    currentdate = year;
    return currentdate;
  } else if (type == "month") {
    currentdate = year + hengGang + month;
    return currentdate;
  } else {
    currentdate = year + hengGang + month + hengGang + curDate + " "
    return currentdate;
  }
 }
 // var year = getDateTime('year');  
 // console.log(year);  // 2021
 // var month = getDateTime('month');  
 // console.log(month); // 12
 // var date = getDateTime('');
 // console.log(date);  // 2021-12-03 09:00:00
@@ -0,0 +1,912 @@
 <template>
  <div class="group-management-container">
    <!-- 左侧组别管理 -->
    <div class="left-panel">
      <el-card>
        <template #header>
          <div class="card-header">
            <span class="title">组别管理</span>
            <div class="header-right">
              <el-input v-model="groupSearchKeyword" placeholder="请输入组别名称搜索" clearable @input="handleGroupSearch"
                style="width: 200px; margin-right: 8px;">
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="small" @click="handleAdd" v-auth="'group:add'">添加组别</el-button>
            </div>
          </div>
        </template>
        <el-table :data="groupList" style="width: 100%" @row-click="handleGroupSelect"
          :row-class-name="tableRowClassName" height="calc(100vh - 280px)">
          <el-table-column prop="groupId" label="组别" width="100" align="center" />
          <el-table-column prop="groupName" label="组别名称" min-width="150" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.createTime || "暂无" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right" align="center" v-if="userRole === 2">
            <template #default="scope">
              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
                v-auth="'group:edit'">编辑</el-button>
              <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)"
                v-auth="'group:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 右侧成员管理 -->
    <div class="right-panel">
      <el-card v-if="currentGroup">
        <template #header>
          <div class="card-header">
            <span class="title">{{ currentGroup.groupName }} - 成员管理</span>
            <div class="header-right">
              <el-input v-model="memberSearchKeyword" placeholder="请输入姓名搜索" clearable @input="handleMemberSearch"
                style="width: 200px; margin-right: 8px;">
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="small" @click="handleAddUser" v-auth="'member:add'">添加成员</el-button>
            </div>
          </div>
        </template>
        <div class="user-management">
          <div class="user-container">
            <!-- 组内人员列表 -->
            <div class="user-section">
              <el-table :data="groupUsers" style="width: 100%" height="calc(100vh - 280px)" border stripe>
                <el-table-column label="头像" align="center">
                  <template #default="scope">
                    <el-avatar :size="40" :src="scope.row.avatar" />
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" show-overflow-tooltip />
                <el-table-column label="角色" align="center">
                  <template #default="scope">
                    <template v-if="userRole === 2">
                      <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
                        @change="(value) => handleRoleChange(scope.row, value)">
                        <el-option label="普通员工" :value="0" />
                        <el-option label="部门主管" :value="1" />
                        <el-option label="综合部" :value="2" />
                        <el-option label="财务部" :value="3" />
                      </el-select>
                    </template>
                    <template v-else>
                      <el-tag :type="getRoleTagType(scope.row.role)">
                        {{ getRoleName(scope.row.role) }}
                      </el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="220" fixed="right" align="center"
                  v-if="userRole === 2 || userRole === 3">
                  <template #default="scope">
                    <template v-if="userRole === 3">
                      <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)"
                        v-auth="'member:salary'">查看工资配置</el-button>
                    </template>
                    <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)"
                      v-auth="'member:delete'">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-card>
      <el-empty v-else description="请选择左侧组别进行管理" />
    </div>
    <!-- 添加/编辑组别对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加组别' : '编辑组别'" width="500px">
      <el-form :model="groupForm" :rules="groupRules" ref="groupFormRef" label-width="80px">
        <el-form-item label="组别名称" prop="groupName" required>
          <el-input v-model="groupForm.groupName" placeholder="请输入组别名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 工资配置对话框 -->
    <div class="salary-config-dialog">
      <el-dialog v-model="salaryDialogVisible" title="工资配置" width="600px">
        <div class="salary-config-form">
          <el-form :model="salaryForm" :rules="salaryRules" ref="salaryFormRef" label-width="140px">
            <el-form-item label="基本工资">
              <el-input-number v-model="salaryForm.baseSalary" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="总经理补贴" prop="managerAllowance" required>
              <el-input-number v-model="salaryForm.managerAllowance" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="交通补贴">
              <el-input-number v-model="salaryForm.transportationAllowance" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="其他补贴" prop="otherAllowance" required>
              <el-input-number v-model="salaryForm.otherAllowance" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="年度绩效奖金" prop="annualPerformanceBonus" required>
              <el-input-number v-model="salaryForm.annualPerformanceBonus" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="月度绩效奖金" prop="monthlyPerformanceBonus" required>
              <el-input-number v-model="salaryForm.monthlyPerformanceBonus" :min="0" :precision="2" :step="100" />
            </el-form-item>
            <el-form-item label="其他奖金" prop="otherBonus" required>
              <el-input-number v-model="salaryForm.otherBonus" :min="0" :precision="2" :step="100" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="salaryDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSalarySubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 添加成员对话框 -->
    <el-dialog v-model="addUserDialogVisible" title="添加成员" width="800px">
      <div class="dialog-header">
        <div class="left">
          <el-button type="primary" @click="handleSyncUsers">
            <el-icon>
              <Refresh />
            </el-icon>
            同步钉钉成员
          </el-button>
        </div>
        <div class="right">
          <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch" style="width: 200px">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <el-table :data="nonGroupUsers" style="width: 100%" height="400px" border stripe>
        <el-table-column label="头像" width="80" align="center">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleAddToGroup(scope.row)">
              <el-icon>
                <Plus />
              </el-icon>
              添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
  getGroupList,
  addGroup,
  updateGroup,
  deleteGroup,
  updateGroupUserRole,
  getGroupUsers,
  deleteGroupUser,
  getUserSalaryConfig,
  updateUserSalaryConfig,
  getNonGroupUsers,
  addUserToGroup,
  syncUsers,
 } from "../../api/modules/index";
 import { Refresh, Search, Plus } from '@element-plus/icons-vue';
 import { useRouter } from 'vue-router';
 // 组别列表数据
 const groupList = ref([]);
 const currentGroup = ref(null);
 const groupSearchKeyword = ref('');
 const originalGroupList = ref([]); // 用于存储原始数据
 // 对话框相关
 const dialogVisible = ref(false);
 const dialogType = ref("add"); // add 或 edit
 const groupFormRef = ref(null);
 const groupForm = ref({
  groupId: null,
  groupName: "",
 });
 // 成员管理相关
 const groupUsers = ref([]);
 const memberSearchKeyword = ref('');
 const originalGroupUsers = ref([]); // 用于存储原始数据
 // 工资配置相关
 const salaryDialogVisible = ref(false);
 const salaryFormRef = ref(null);
 const salaryForm = ref({
  userid: '',
  baseSalary: 0,
  managerAllowance: 0,
  transportationAllowance: 0,
  otherAllowance: 0,
  annualPerformanceBonus: 0,
  monthlyPerformanceBonus: 0,
  otherBonus: 0
 });
 // 添加成员相关
 const addUserDialogVisible = ref(false);
 const nonGroupUsers = ref([]);
 const searchKeyword = ref('');
 // 表单校验规则
 const salaryRules = {
  baseSalary: [
    { required: true, message: '请输入基本工资', trigger: 'blur' }
  ],
  managerAllowance: [
    { required: true, message: '请输入总经理补贴', trigger: 'blur' }
  ],
  transportationAllowance: [
    { required: true, message: '请输入交通补贴', trigger: 'blur' }
  ],
  otherAllowance: [
    { required: true, message: '请输入其他补贴', trigger: 'blur' }
  ],
  annualPerformanceBonus: [
    { required: true, message: '请输入年度绩效奖金', trigger: 'blur' }
  ],
  monthlyPerformanceBonus: [
    { required: true, message: '请输入月度绩效奖金', trigger: 'blur' }
  ],
  otherBonus: [
    { required: true, message: '请输入其他奖金', trigger: 'blur' }
  ]
 };
 // 组别表单校验规则
 const groupRules = {
  groupName: [
    { required: true, message: '请输入组别名称', trigger: 'blur' }
  ]
 };
 const router = useRouter();
 const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
 const userRole = userInfo.role || 0
 // 获取组别列表
 const fetchGroupList = async () => {
  try {
    const res = await getGroupList();
    if (res.errcode === 0) {
      originalGroupList.value = res.result;
      groupList.value = res.result;
      if (groupList.value && groupList.value.length) {
        handleGroupSelect(groupList.value[0]);
      }
    }
  } catch (error) {
    ElMessage.error("获取组别列表失败");
  }
 };
 // 搜索组别
 const handleGroupSearch = () => {
  if (!groupSearchKeyword.value) {
    groupList.value = originalGroupList.value;
    return;
  }
  groupList.value = originalGroupList.value.filter(group =>
    group.groupName.toLowerCase().includes(groupSearchKeyword.value.toLowerCase())
  );
 };
 // 选择组别
 const handleGroupSelect = async (row) => {
  currentGroup.value = row;
  await fetchGroupUsers(row.groupId);
 };
 // 获取组内人员列表
 const fetchGroupUsers = async (groupId) => {
  try {
    const res = await getGroupUsers(groupId);
    if (res.errcode === 0) {
      originalGroupUsers.value = res.result;
      groupUsers.value = res.result;
    }
  } catch (error) {
    ElMessage.error("获取组内人员列表失败");
  }
 };
 // 搜索成员
 const handleMemberSearch = () => {
  if (!memberSearchKeyword.value) {
    groupUsers.value = originalGroupUsers.value;
    return;
  }
  groupUsers.value = originalGroupUsers.value.filter(user =>
    user.name.toLowerCase().includes(memberSearchKeyword.value.toLowerCase())
  );
 };
 // 修改成员角色
 const handleRoleChange = async (user, role) => {
  try {
    const res = await updateGroupUserRole(
      currentGroup.value.groupId,
      user.userid,
      role
    );
    if (res.errcode === 0) {
      ElMessage.success("修改成功");
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {}
      // 检查是否是当前登录用户
      if (user.userid === userInfo?.userid) {
        ElMessage.warning("您已修改了自己的角色，需要重新登录");
        gotoLogin()
      }
    }
  } catch (error) {
    ElMessage.error("修改失败");
  }
 };
 const gotoLogin = () => {
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("userInfo");
  router.push("/login");
 };
 // 移除成员
 const handleRemoveUser = async (user) => {
  try {
    const res = await deleteGroupUser(currentGroup.value.groupId, user.userid);
    if (res.errcode === 0) {
      ElMessage.success("移除成功");
      fetchGroupUsers(currentGroup.value.groupId);
    }
  } catch (error) {
    ElMessage.error("移除失败");
  }
 };
 // 添加组别
 const handleAdd = () => {
  dialogType.value = "add";
  groupForm.value = {
    groupId: null,
    groupName: "",
  };
  dialogVisible.value = true;
 };
 // 编辑组别
 const handleEdit = (row) => {
  dialogType.value = "edit";
  groupForm.value = {
    groupId: row.groupId,
    groupName: row.groupName,
  };
  dialogVisible.value = true;
 };
 // 删除组别
 const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该组别吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      const res = await deleteGroup(row.groupId);
      if (res.errcode === 0) {
        ElMessage.success("删除成功");
        if (currentGroup.value?.groupId === row.groupId) {
          currentGroup.value = null;
        }
        fetchGroupList();
      }
    } catch (error) {
      ElMessage.error("删除失败");
    }
  });
 };
 // 提交表单
 const handleSubmit = async () => {
  if (!groupFormRef.value) return;
  await groupFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (dialogType.value === "add") {
          const res = await addGroup({ groupName: groupForm.value.groupName });
          if (res.errcode === 0) {
            ElMessage.success("添加成功");
            dialogVisible.value = false;
            fetchGroupList();
          }
        } else {
          const res = await updateGroup({
            groupId: groupForm.value.groupId,
            groupName: groupForm.value.groupName,
          });
          if (res.errcode === 0) {
            ElMessage.success("修改成功");
            dialogVisible.value = false;
            fetchGroupList();
          }
        }
      } catch (error) {
        ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
      }
    }
  });
 };
 // 查看工资配置
 const handleViewSalary = async (user) => {
  try {
    const res = await getUserSalaryConfig(user.userid);
    if (res.errcode === 0) {
      const result = res.result;
      salaryForm.value = {
        userid: user.userid,
        baseSalary: result.baseSalary,
        managerAllowance: result.managerAllowance,
        transportationAllowance: result.transportationAllowance,
        otherAllowance: result.otherAllowance,
        annualPerformanceBonus: result.annualPerformanceBonus,
        monthlyPerformanceBonus: result.monthlyPerformanceBonus,
        otherBonus: result.otherBonus
      };
      salaryDialogVisible.value = true;
    } else {
      ElMessage.error('获取工资配置失败');
    }
  } catch (error) {
    ElMessage.error('获取工资配置失败');
    console.error(error);
  }
 };
 // 提交工资配置
 const handleSalarySubmit = async () => {
  if (!salaryFormRef.value) return;
  await salaryFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const data = {
          userid: salaryForm.value.userid,
          baseSalary: salaryForm.value.baseSalary,
          managerAllowance: salaryForm.value.managerAllowance,
          transportationAllowance: salaryForm.value.transportationAllowance,
          otherAllowance: salaryForm.value.otherAllowance,
          annualPerformanceBonus: salaryForm.value.annualPerformanceBonus,
          monthlyPerformanceBonus: salaryForm.value.monthlyPerformanceBonus,
          otherBonus: salaryForm.value.otherBonus
        };
        const res = await updateUserSalaryConfig(data);
        if (res.errcode === 0) {
          ElMessage.success('保存成功');
          salaryDialogVisible.value = false;
        } else {
          ElMessage.error('保存失败');
        }
      } catch (error) {
        ElMessage.error('保存失败');
        console.error(error);
      }
    }
  });
 };
 // 表格行样式
 const tableRowClassName = ({ row }) => {
  if (currentGroup.value && row.groupId === currentGroup.value.groupId) {
    return 'selected-row';
  }
  return '';
 };
 // 打开添加成员对话框
 const handleAddUser = async () => {
  addUserDialogVisible.value = true;
  searchKeyword.value = ""
  await fetchNonGroupUsers();
 };
 // 获取不在组内的用户列表
 const fetchNonGroupUsers = async () => {
  try {
    const res = await getNonGroupUsers();
    if (res.errcode === 0) {
      nonGroupUsers.value = res.result;
    }
  } catch (error) {
    ElMessage.error("获取用户列表失败");
  }
 };
 // 添加用户到组
 const handleAddToGroup = async (user) => {
  try {
    const res = await addUserToGroup(currentGroup.value.groupId, user.userid, 0); // 默认角色为普通员工
    if (res.errcode === 0) {
      ElMessage.success("添加成功");
      addUserDialogVisible.value = false;
      fetchGroupUsers(currentGroup.value.groupId);
    }
  } catch (error) {
    ElMessage.error("添加失败");
  }
 };
 // 同步钉钉成员
 const handleSyncUsers = async () => {
  try {
    const res = await syncUsers();
    if (res.errcode === 0) {
      ElMessage.success("同步成功");
      await fetchNonGroupUsers(); // 重新获取未加入成员列表
    } else {
      ElMessage.error("同步失败");
    }
  } catch (error) {
    ElMessage.error("同步失败");
    console.error(error);
  }
 };
 // 搜索用户
 const handleSearch = () => {
  if (!searchKeyword.value) {
    fetchNonGroupUsers();
    return;
  }
  nonGroupUsers.value = nonGroupUsers.value.filter(user =>
    user.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
 };
 // 获取角色名称
 const getRoleName = (role) => {
  const roleMap = {
    0: '普通员工',
    1: '部门主管',
    2: '综合部',
    3: '财务部'
  }
  return roleMap[role] || '未知角色'
 }
 // 获取角色标签类型
 const getRoleTagType = (role) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return typeMap[role] || 'info'
 }
 // 页面加载时获取组别列表
 onMounted(() => {
  fetchGroupList();
 });
 </script>
 <style lang="scss" scoped>
 .group-management-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  .left-panel {
    width: 40%;
    min-width: 500px;
    :deep(.el-card) {
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      box-shadow: var(--el-box-shadow-light);
      .el-card__body {
        flex: 1;
        overflow: hidden;
        padding: 0;
        display: flex;
        flex-direction: column;
      }
    }
    :deep(.el-table) {
      flex: 1;
      .el-table__body-wrapper {
        height: 100%;
      }
      .el-table__cell {
        padding-left: 20px;
        padding-right: 20px;
      }
      .el-table__header {
        th {
          background-color: var(--el-bg-color);
          font-weight: 600;
          color: var(--el-text-color-primary);
          height: 48px;
        }
      }
      .el-table__row {
        height: 56px;
      }
    }
  }
  .right-panel {
    flex: 1;
    min-width: 600px;
    :deep(.el-card) {
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      box-shadow: var(--el-box-shadow-light);
      .el-card__body {
        flex: 1;
        overflow: hidden;
        padding: 0;
        display: flex;
        flex-direction: column;
      }
    }
    :deep(.el-table) {
      flex: 1;
      .el-table__body-wrapper {
        height: 100%;
      }
      .el-table__cell {
        padding-left: 20px;
        padding-right: 20px;
      }
      .el-table__header {
        th {
          background-color: var(--el-bg-color);
          font-weight: 600;
          color: var(--el-text-color-primary);
          height: 48px;
        }
      }
      .el-table__row {
        height: 56px;
      }
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
 }
 .user-management {
  .user-container {
    display: flex;
    gap: 20px;
    height: 100%;
    padding: 20px;
  }
  .user-section {
    flex: 1;
    min-width: 0;
  }
 }
 :deep(.selected-row) {
  background-color: #f1f1f1 !important;
 }
 :deep(.el-table__row .current-row) {
  background-color: #f1f1f1 !important;
 }
 :deep(.el-table__row:hover) {
  background-color: #f1f1f1 !important;
 }
 :deep(.el-table) {
  .el-button {
    padding: 4px 8px;
  }
  .el-select {
    width: 120px;
  }
  .el-avatar {
    border: 1px solid var(--el-border-color-light);
  }
 }
 .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 20px;
  .left {
    display: flex;
    gap: 8px;
  }
  .right {
    display: flex;
    gap: 8px;
  }
 }
 :deep(.el-button) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  &.el-button--primary {
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
  }
 }
 :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
  &:hover {
    box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
  }
  &.is-focus {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
  }
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .salary-config-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  :deep(.el-dialog__header) {
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
  }
  :deep(.el-dialog__footer) {
    padding: 20px;
    border-top: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
  }
  :deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;
  }
 }
 .salary-config-form {
  padding: 20px;
  background-color: #f8fafd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  :deep(.el-form-item) {
    margin-bottom: 20px;
    .el-form-item__label {
      font-weight: 500;
      color: #333;
      font-size: 15px;
    }
    .el-input-number {
      width: 100%;
      min-width: 120px;
      .el-input__wrapper {
        padding-right: 40px;
      }
    }
  }
 }
 .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 </style>
@@ -0,0 +1,390 @@
 .data-lists {
  width: 100%;
  .el-col {
    height: 100%;
  }
  .data-item-one {
    background: #2969ff;
    margin-right: 10px;
    padding: 10px;
    height: 156px;
    border-radius: 6px;
    color: #fff;
    .item-left {}
    .item-right {
      padding-left: 20px;
      padding-right: 10px;
      flex: 1;
      .item-right-top {
        margin-bottom: 10px;
        .tit {
          padding-bottom: 5px;
        }
        .num {
          font-size: 24px;
          font-weight: 700;
          text-align: left;
        }
      }
      .line {
        width: 100%;
        height: 2px;
        background-color: #fff;
        opacity: 0.1;
      }
      .item-right-bottom {
        margin-top: 10px;
        .item {
          flex: 1;
          .tit {
            font-size: 14px;
            padding-bottom: 5px;
          }
          .num {
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .data-item-two {
    height: 176px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 50%;
      width: 50%;
      .item-des {
        margin-right: 8px;
        margin-bottom: 8px;
        background-color: #fff;
        padding: 20px;
        border-radius: 6px;
        &:nth-child(2n) {
          margin-right: 0px;
        }
        .right {
          flex: 1;
          padding-left: 22px;
          .num {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0px;
            span {
              font-size: 12px;
              color: rgba(30, 189, 94, 1);
            }
          }
          .txt {
            padding-top: 8px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
  .data-item-three {
    padding: 10px;
    height: 156px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
    .tit {
      font-size: 14px;
      padding-bottom: 5px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 50%;
        .item-data {
          margin: 5px;
          opacity: 1;
          padding: 10px;
          border-radius: 6px;
          background: #fafafcff;
          position: relative;
          .icon {
            position: absolute;
            right: 16px;
            top: 40%;
            color: rgba(25, 30, 36, 0.5);
            font-size: 14px;
          }
          .tit {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 30, 36, 0.5);
            padding-bottom: 5px;
          }
          .num {
            color: #0052d9;
            font-size: 14px;
            font-weight: 700;
            span {
              color: #666;
              font-weight: 400;
              color: rgba(25, 30, 36, 0.5);
            }
          }
        }
      }
    }
  }
 }
 .dataLayer {
  .datalayer-echarts {
    flex: 1;
    height: 260px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
  }
  .table-data {
    border-radius: 6px;
    margin-right: 10px;
    background-color: #fff;
    padding-bottom: 10px;
    .tit {
      padding: 10px 10px 0 10px;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    .table-box {
      margin: 10px;
      .el-table {
        width: 100%;
        height: 360px;
        .type {
          font-size: 10px;
          padding: 5px 10px;
          font-weight: 500;
          line-height: 0px;
          color: #fa4a1e;
          text-align: left;
          border-radius: 6px;
          background: #fa4a1e14;
          &.error-type {
            color: #4060c7;
            background: #e8f3ff;
          }
        }
        .state {
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #4060c7;
          border-radius: 50%;
          margin-right: 5px;
          &.error-state {
            background-color: #fa4a1e;
          }
        }
      }
    }
  }
  .data-item-three {
    padding: 10px;
    // height: 156px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
    .tit {
      font-size: 14px;
      padding-bottom: 5px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 50%;
        .item-data {
          margin: 5px;
          opacity: 1;
          padding: 10px;
          border-radius: 6px;
          background: #fafafcff;
          position: relative;
          align-items: center;
          .icon {
            position: absolute;
            right: 16px;
            top: 40%;
            color: rgba(25, 30, 36, 0.5);
            font-size: 14px;
          }
          .tit {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 30, 36, 0.5);
            padding-bottom: 5px;
            display: flex;
            align-items: center;
            .el-icon {
              font-size: 20px;
              color: rgba(25, 30, 36, 0.5);
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .notice {
    width: 100%;
    height: 152px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    .notice-news {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        object-fit: cover;
      }
      .txt {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 14px;
        color: #fff;
        padding: 10px;
      }
    }
  }
  .notice-lists {
    height: 260px;
    overflow: scroll;
    .item {
      font-size: 14px;
      padding: 10px;
      color: #666;
      .type {
        font-size: 10px;
        padding: 5px 10px;
        font-weight: 500;
        line-height: 0px;
        color: #fa4a1e;
        text-align: left;
        border-radius: 6px;
        background: #fa4a1e14;
        &.error-type {
          color: #4060c7;
          background: #e8f3ff;
        }
      }
    }
  }
 }
 .border-right-1px {
  border-right: 1px solid #eae3e3;
 }
 .icon-edit {
  font-size: 20px;
  color: #2f60c2;
  margin: 0 10px;
 }
 .icon-dele {
  font-size: 20px;
  color: #ff5722;
 }
 .shake {
  animation: shake 0.5s linear;
 }
 .shakeRight {
  animation: shakeRight 0.5s linear;
 }
@keyframes shake {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
 }
@keyframes shakeRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
 }
@@ -0,0 +1,9 @@
 <template>
  <el-card>
    <div>欢迎使用💐🌸💮🏵️🌹🌺🌻</div>
  </el-card>
 </template>
 <script setup></script>
 <style lang="scss" scoped></style>
@@ -0,0 +1,99 @@
 .login-container {
 	width: 100vw;
 	height: 100vh;
 	// background-color: #6c88d5;
 	background-image: url('../../assets/bg.png');
 	background-size: 100% 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	.login-box {
 		width: 96%;
 		height: 94%;
 		background-color: hsla(0, 0%, 100%, 0.85);
 		border-radius: 10px;
 		padding: 0 8% 0 50px;
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
 		.login-left {
 			width: 800px;
 			color: #6E736FFF;
 			.title {
 				font-size: 48px;
 				font-weight: 400;
 				letter-spacing: 0px;
 				color: rgba(47, 57, 78, 1);
 				text-align: left;
 			}
 			img {
 				width: 735px;
 				height: 465px;
 			}
 		}
 		.login-form {
 			width: 400px;
 			height: 260px;
 			padding: 10px 40px 35px 40px;
 			border-radius: 10px;
 			-webkit-box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
 			box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
 			.login-logo {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				// margin-bottom: 45px;
 				.login-icon {
 					width: 60px;
 					// height: 52px;
 				}
 				.logo-text {
 					font-weight: bold;
 					font-size: 32px;
 					padding-left: 25px;
 					white-space: nowrap;
 					color: #2d51e6;
 				}
 			}
 			.el-form-item {
 				margin-bottom: 20px;
 			}
 			.flx-row {
 				span {
 					font-size: 14px;
 					color: #2d51e6;
 				}
 				.img {
 					flex: 1;
 					text-align: center;
 				}
 			}
 			.login-btn {
 				margin-top: 20px;
 				padding-bottom: 20px;
 				display: flex;
 				justify-content: space-between;
 				width: 100%;
 				white-space: nowrap;
 				.el-button {
 					width: 185px;
 				}
 			}
 		}
 	}
 }
@@ -0,0 +1,89 @@
 <template>
  <div class="login-container flx-center">
    <div class="login-box">
      <div class="login-left">
        <div class="title">
          人资薪资核算系统<span style="font-size: 14px">v1.7</span>
        </div>
        <div class="sub">用于自动管理核算人员工资</div>
        <img src="../../assets/login.png" alt="" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="../../assets/logo.png" alt="" />
          <p class="logo-text">人资薪资核算系统</p>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup name="login">
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 // import { login, obtainUserInformationApi } from "../../api/modules/index";
 import { login, obtainUserInformationApi } from "../../api/modules/index";
 import { ElMessage } from "element-plus";
 import dd from "dingtalk-jsapi";
 const router = useRouter();
 // 登录
 const loginIn = async (code) => {
  let res = await login(code);
  console.log(res);
  sessionStorage.setItem("token", res.result.token);
  ElMessage({
    message: "授权成功",
    type: "success",
  });
  // 拿用户信息
  await obInformation();
  // router.push("/");
 };
 // 登录判断
 const token = sessionStorage.getItem("token");
 if (token) {
  // 有then代表已经登录
 } else {
  // 钉钉环境去登录，
  if (dd.env.platform === "notInDingTalk") {
    // ElMessage({
    //   message: "检测到不是钉钉环境，请进入钉钉环境打开",
    //   type: "error",
    // });
    router.push("/");
    console.log("跳转");
  } else {
    dd.ready(() => {
      dd.runtime.permission.requestAuthCode({
        corpId: "ding03f8e88dde9b426835c2f4657eb6378f", //企业id
        onSuccess: function (info) {
          console.log(info.code, "code");
          loginIn(info.code);
        },
      });
    });
  }
  // 测试修改环境
  // loginIn("4545");
 }
 // 获取个人信息
 const obInformation = async () => {
  let res = await obtainUserInformationApi();
  const userInfo = res.result;
  console.log(userInfo, "userInfo");
  ElMessage({
    message: "获取个人信息成功",
    type: "success",
  });
  sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
  // router.push("/");
  router.replace("/")
 };
 </script>
 <style scoped lang="scss">
@import "./index.scss";
 </style>
@@ -0,0 +1,905 @@
 <template>
  <div class="payroll-sheets-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">工资条列表</span>
          <div class="header-right">
            <el-date-picker
              v-model="dateRange"
              type="month"
              placeholder="选择月份"
              :default-time="defaultTime"
              :shortcuts="dateShortcuts"
              @change="handleDateChange"
              style="width: 200px; margin-right: 8px;"
            />
            <el-input
              v-model="searchKeyword"
              placeholder="请输入姓名搜索"
              clearable
              @input="handleSearch"
              style="width: 200px; margin-right: 8px;"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="success" @click="handleBatchShowToEmployee">批量展示给员工</el-button>
          </div>
        </div>
      </template>
      <el-table
        :data="payrollList"
        style="width: 100%"
        height="calc(100vh - 280px)"
        border
        stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '12px 0'
        }"
        :cell-style="{
          padding: '8px 0'
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="头像" width="80" align="center" fixed="left">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip fixed="left" />
        <el-table-column prop="baseSalary" label="基本工资" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.baseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="annualPerformanceBonus" label="年度绩效奖金" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.annualPerformanceBonus) }}
          </template>
        </el-table-column>
        <el-table-column prop="monthlyPerformanceBonus" label="月度绩效奖金" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.monthlyPerformanceBonus) }}
          </template>
        </el-table-column>
        <el-table-column prop="otherBonus" label="其他奖金" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.otherBonus) }}
          </template>
        </el-table-column>
        <el-table-column prop="managerAllowance" label="总经理补贴" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.managerAllowance) }}
          </template>
        </el-table-column>
        <el-table-column prop="transportationAllowance" label="交通补贴" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.transportationAllowance) }}
          </template>
        </el-table-column>
        <el-table-column prop="otherAllowance" label="其他补贴" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.otherAllowance) }}
          </template>
        </el-table-column>
        <el-table-column prop="senioritySalary" label="工龄工资" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.senioritySalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="overtimePay" label="加班工资" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.overtimePay) }}
          </template>
        </el-table-column>
        <el-table-column prop="grossPaySummary" label="应发小计" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.grossPaySummary) }}
          </template>
        </el-table-column>
        <el-table-column prop="annualPerformanceDeduction" label="年度绩效扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.annualPerformanceDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="monthlyPerformanceDeduction" label="月度绩效扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.monthlyPerformanceDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="personalLeaveDeduction" label="事假扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.personalLeaveDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="sickLeaveDeduction" label="病假扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.sickLeaveDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="lateEarlyDeduction" label="迟到早退扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.lateEarlyDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="missedCheckInOutDeduction" label="签到签退扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.missedCheckInOutDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="absentCardDeduction" label="缺卡扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.absentCardDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="absenteeismDeduction" label="旷工扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.absenteeismDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="violationDeduction" label="违纪扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.violationDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="basicPensionDeduction" label="基本养老" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.basicPensionDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="unemploymentInsuranceDeduction" label="失业保险" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.unemploymentInsuranceDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="basicMedicalDeduction" label="基本医疗" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.basicMedicalDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="medicalDeductionAmount" label="大额医疗" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.medicalDeductionAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="housingFundDeduction" label="住房公积金" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.housingFundDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="otherDeduction" label="其他扣款" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.otherDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="individualTaxDeduction" label="个税" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.individualTaxDeduction) }}
          </template>
        </el-table-column>
        <el-table-column prop="deductionTotal" label="扣款小计" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.deductionTotal) }}
          </template>
        </el-table-column>
        <el-table-column prop="netSalary" label="实发工资" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.netSalary) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="success"
              link
              size="small"
              @click="handleShowToEmployee(scope.row)"
            >
              展示给员工
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 修改工资条对话框 -->
    <div class="edit-payroll-dialog">
      <el-dialog
        v-model="editDialogVisible"
        title="修改工资条"
        width="900px"
      >
        <div class="edit-form">
          <el-form
            ref="editFormRef"
            :model="editForm"
            :rules="editRules"
            label-width="140px"
          >
            <!-- 仅保留可编辑字段 -->
            <div class="form-section">
              <div class="section-title">违纪扣款</div>
              <div class="form-grid">
                <el-form-item label="违纪扣款" prop="violationDeduction">
                  <el-input-number
                    v-model="editForm.violationDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="form-section">
              <div class="section-title">社保公积金</div>
              <div class="form-grid">
                <el-form-item label="基本养老保险" prop="basicPensionDeduction">
                  <el-input-number
                    v-model="editForm.basicPensionDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="失业保险" prop="unemploymentInsuranceDeduction">
                  <el-input-number
                    v-model="editForm.unemploymentInsuranceDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="基本医疗保险" prop="basicMedicalDeduction">
                  <el-input-number
                    v-model="editForm.basicMedicalDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="补充医疗保险" prop="medicalDeductionAmount">
                  <el-input-number
                    v-model="editForm.medicalDeductionAmount"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="住房公积金" prop="housingFundDeduction">
                  <el-input-number
                    v-model="editForm.housingFundDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="form-section">
              <div class="section-title">其他扣款</div>
              <div class="form-grid">
                <el-form-item label="个人所得税" prop="individualTaxDeduction">
                  <el-input-number
                    v-model="editForm.individualTaxDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="其他扣款" prop="otherDeduction">
                  <el-input-number
                    v-model="editForm.otherDeduction"
                    :precision="2"
                    :step="100"
                    :min="0"
                    controls-position="right"
                  />
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmitEdit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { Search } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import {
  getPayrollSheetsList,
  updatePayrollSheet,
  showPayrollSheet
 } from "../../../api/modules/index";
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
 // if (userInfo.role !== 3) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
 // 列表数据
 const payrollList = ref([]);
 const originalList = ref([]);
 const searchKeyword = ref('');
 const currentPage = ref(1);
 const pageSize = ref(10);
 const total = ref(0);
 // 日期范围
 const dateRange = ref(null);
 const defaultTime = new Date(2000, 1, 1, 0, 0, 0);
 // 日期快捷选项
 const dateShortcuts = [
  {
    text: '上个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() - 1, 1);
    },
  },
  {
    text: '本月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), 1);
    },
  },
  {
    text: '下个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() + 1, 1);
    },
  },
 ];
 // 设置默认日期范围（上个月）
 const setDefaultDateRange = () => {
  const now = new Date();
  dateRange.value = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 };
 // 处理日期变化
 const handleDateChange = (val) => {
  if (val) {
    currentPage.value = 1;
    fetchList();
  }
 };
 // 获取列表数据
 const fetchList = async () => {
  try {
    const params = {
      current: currentPage.value,
      size: pageSize.value
    };
    if (dateRange.value) {
      params.year = dateRange.value.getFullYear();
      params.month = dateRange.value.getMonth() + 1;
    }
    if (searchKeyword.value) {
      params.keyword = searchKeyword.value;
    }
    const res = await getPayrollSheetsList(params);
    if (res.errcode === 0 && res.result) {
      payrollList.value = res.result.records || [];
      total.value = res.result.total || 0;
    } else {
      ElMessage.error(res.errmsg || "获取列表失败");
    }
  } catch (error) {
    ElMessage.error("获取列表失败");
  }
 };
 // 搜索
 const handleSearch = () => {
  currentPage.value = 1;
  fetchList();
 };
 // 分页大小变化
 const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchList();
 };
 // 页码变化
 const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchList();
 };
 // 格式化金额
 const formatMoney = (value) => {
  if (value === undefined || value === null) return '0.00';
  return Number(value).toFixed(2);
 };
 // 获取状态标签
 const getStatusLabel = (status) => {
  const statusMap = {
    0: '待确认',
    1: '已确认',
    2: '已发放'
  };
  return statusMap[status] || '未知';
 };
 // 获取状态标签样式
 const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'info'
  };
  return typeMap[status] || '';
 };
 // 修改对话框
 const editDialogVisible = ref(false);
 const editFormRef = ref(null);
 const editForm = ref({
  userid: '',
  year: 0,
  month: 0,
  violationDeduction: 0,
  basicPensionDeduction: 0,
  unemploymentInsuranceDeduction: 0,
  basicMedicalDeduction: 0,
  medicalDeductionAmount: 0,
  housingFundDeduction: 0,
  individualTaxDeduction: 0,
  otherDeduction: 0
 });
 // 表单验证规则
 const editRules = {
  violationDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  basicPensionDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  unemploymentInsuranceDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  basicMedicalDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  medicalDeductionAmount: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  housingFundDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  individualTaxDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }],
  otherDeduction: [{ type: 'number', min: 0, message: '金额不能小于0' }]
 };
 // 打开修改对话框
 const handleEdit = (row) => {
  editForm.value = {
    userid: row.userid,
    year: row.year,
    month: row.month,
    violationDeduction: row.violationDeduction || 0,
    basicPensionDeduction: row.basicPensionDeduction || 0,
    unemploymentInsuranceDeduction: row.unemploymentInsuranceDeduction || 0,
    basicMedicalDeduction: row.basicMedicalDeduction || 0,
    medicalDeductionAmount: row.medicalDeductionAmount || 0,
    housingFundDeduction: row.housingFundDeduction || 0,
    individualTaxDeduction: row.individualTaxDeduction || 0,
    otherDeduction: row.otherDeduction || 0
  };
  editDialogVisible.value = true;
 };
 // 提交修改
 const handleSubmitEdit = async () => {
  if (!editFormRef.value) return;
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await updatePayrollSheet(editForm.value);
        if (res.errcode === 0) {
          ElMessage.success('修改成功');
          editDialogVisible.value = false;
          fetchList(); // 刷新列表
        } else {
          ElMessage.error(res.errmsg || '修改失败');
        }
      } catch (error) {
        ElMessage.error('修改失败');
      }
    }
  });
 };
 // 展示给员工
 const handleShowToEmployee = async (row) => {
  try {
    const params = {
      year: Number(row.year),
      month: Number(row.month),
      userids: [row.userid]
    };
    const res = await showPayrollSheet(params);
    if (res.errcode === 0) {
      ElMessage.success('展示成功');
    } else {
      ElMessage.error(res.errmsg || '展示失败');
    }
  } catch (error) {
    ElMessage.error('展示失败');
  }
 };
 const selectedRows = ref([]);
 // 处理多选变化
 const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
 };
 // 批量展示给员工
 const handleBatchShowToEmployee = async () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请选择要展示的工资条');
    return;
  }
  try {
    const params = {
      year: Number(selectedRows.value[0].year),
      month: Number(selectedRows.value[0].month),
      userids: selectedRows.value.map(item => item.userid)
    };
    const res = await showPayrollSheet(params);
    if (res.errcode === 0) {
      ElMessage.success('批量展示成功');
    } else {
      ElMessage.error(res.errmsg || '批量展示失败');
    }
  } catch (error) {
    ElMessage.error('批量展示失败');
  }
 };
 // 页面加载时设置默认日期范围并获取数据
 onMounted(() => {
  setDefaultDateRange();
  fetchList();
 });
 </script>
 <style lang="scss" scoped>
 .payroll-sheets-container {
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
    .el-card__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }
  :deep(.el-table) {
    flex: 1;
    .el-table__body-wrapper {
      height: 100%;
    }
    .el-table__cell {
      padding: 8px 0;
    }
    .el-table__header {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
        color: #606266;
        height: 48px;
        padding: 12px 0;
      }
    }
    .el-table__row {
      height: 56px;
    }
    .el-table__fixed-right {
      height: 100% !important;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }
    .el-table__fixed {
      height: 100% !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
  .pagination-container {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
  }
 }
 .payroll-detail {
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--el-border-color-light);
    .employee-info {
      display: flex;
      align-items: center;
      gap: 16px;
      .info-content {
        h3 {
          margin: 0 0 8px;
          font-size: 18px;
          font-weight: 600;
        }
        p {
          margin: 0;
          color: var(--el-text-color-secondary);
        }
      }
    }
    .salary-period {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }
  .detail-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--el-border-color-light);
    .signature-section {
      display: flex;
      justify-content: space-around;
      gap: 32px;
      .signature-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        .label {
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
        .signature-image {
          height: 100px;
          border: 1px solid var(--el-border-color);
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
        .no-signature {
          height: 100px;
          border: 1px dashed var(--el-border-color);
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .salary-section {
  margin-bottom: 24px;
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin-bottom: 16px;
    padding-left: 8px;
    border-left: 4px solid var(--el-color-primary);
  }
  :deep(.el-descriptions) {
    .el-descriptions__label {
      width: 120px;
      font-weight: 500;
    }
    .el-descriptions__content {
      text-align: right;
    }
    .highlight {
      font-weight: 600;
      color: var(--el-color-primary);
    }
    .red {
      color: var(--el-color-danger);
    }
  }
 }
 .edit-payroll-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }
 }
 .edit-form {
  padding: 20px;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  .form-section {
    margin-bottom: 32px;
    background-color: #f8fafd;
    border-radius: 8px;
    padding: 20px 24px 8px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    &:last-child {
      margin-bottom: 0;
    }
    .section-title {
      font-size: 18px;
      font-weight: 700;
      color: #409eff;
      margin-bottom: 20px;
      padding-left: 8px;
      border-left: 4px solid #409eff;
      letter-spacing: 1px;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 32px;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
    .el-form-item__label {
      font-weight: 500;
      color: #333;
      font-size: 15px;
    }
    .el-input-number {
      width: 100%;
      min-width: 120px;
      .el-input__wrapper {
        padding-right: 40px;
      }
    }
  }
 }
 .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 </style> 
@@ -0,0 +1,694 @@
 <template>
  <div class="attendance-finance-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">财务查看考勤列表</span>
          <div class="header-right">
            <el-date-picker v-model="dateRange" type="month" placeholder="选择月份" :default-time="defaultTime"
              :shortcuts="dateShortcuts" @change="handleDateChange" style="width: 200px; margin-right: 8px;" />
            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch"
              style="width: 200px; margin-right: 8px;">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="handleGeneratePayroll" :loading="generating">
              生成工资条
            </el-button>
          </div>
        </div>
      </template>
      <el-table :data="attendanceList" style="width: 100%" height="calc(100vh - 280px)" border stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '12px 0'
        }" :cell-style="{
          padding: '8px 0'
        }">
        <el-table-column label="头像" width="80" align="center" fixed="left">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip fixed="left" />
        <el-table-column prop="baseSalary" label="基本工资" width="120" align="right" show-overflow-tooltip>
          <template #default="scope">
            {{ formatMoney(scope.row.baseSalary) }}
          </template>
        </el-table-column>
        <el-table-column prop="workDays" label="工作天数" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'success' : 'warning'" size="small">
              {{ scope.row.status === 0 ? '正式' : '试用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="personalLeave" label="事假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="sickLeave" label="病假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="maternityLeave" label="产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="paternityLeave" label="陪产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="marriageLeave" label="婚假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="bereavementLeave" label="丧假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="annualLeave" label="年休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="managementAnnualLeave" label="年休假(管理岗)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="compensatoryLeave" label="调休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="early" label="早退次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="late" label="迟到次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="seriousLate" label="严重迟到" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenteeism" label="旷工次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missedCount" label="缺卡次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenceCount" label="缺勤次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missingLogCount" label="未提交日志" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="workdayOvertime" label="工作日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="restdayOvertime" label="休息日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="holidayOvertime" label="节假日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
        <el-table-column label="签名" width="100" align="center">
          <template #default="scope">
            <div class="signature-cell">
              <el-image v-if="scope.row.signatureImg" :src="scope.row.signatureImg" fit="contain"
                style="width: 40px; height: 40px; cursor: pointer;"
                @click="handlePreviewSignature(scope.row.signatureImg)">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <Picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
              <span v-else>无签名</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleViewDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 工资条详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="考勤详情" width="800px">
      <div v-if="currentDetail" class="attendance-detail">
        <div class="detail-header">
          <div class="employee-info">
            <el-avatar :size="64" :src="currentDetail.avatar" />
            <div class="info-content">
              <h3>{{ currentDetail.name }}</h3>
              <p>{{ currentDetail.position }}</p>
            </div>
          </div>
          <div class="attendance-period">
            {{ currentDetail.year }}年{{ currentDetail.month }}月考勤
          </div>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="基本工资">{{ formatMoney(currentDetail.baseSalary) }}</el-descriptions-item>
          <el-descriptions-item label="工作天数">{{ currentDetail.workDays }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentDetail.status === 0 ? 'success' : 'warning'" size="small">
              {{ currentDetail.status === 0 ? '正式' : '试用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="事假">{{ currentDetail.personalLeave }}</el-descriptions-item>
          <el-descriptions-item label="病假">{{ currentDetail.sickLeave }}</el-descriptions-item>
          <el-descriptions-item label="产假">{{ currentDetail.maternityLeave }}</el-descriptions-item>
          <el-descriptions-item label="陪产假">{{ currentDetail.paternityLeave }}</el-descriptions-item>
          <el-descriptions-item label="婚假">{{ currentDetail.marriageLeave }}</el-descriptions-item>
          <el-descriptions-item label="丧假">{{ currentDetail.bereavementLeave }}</el-descriptions-item>
          <el-descriptions-item label="年休假">{{ currentDetail.annualLeave }}</el-descriptions-item>
          <el-descriptions-item label="年休假(管理岗)">{{ currentDetail.managementAnnualLeave }}</el-descriptions-item>
          <el-descriptions-item label="调休假">{{ currentDetail.compensatoryLeave }}</el-descriptions-item>
          <el-descriptions-item label="早退次数">{{ currentDetail.early }}</el-descriptions-item>
          <el-descriptions-item label="迟到次数">{{ currentDetail.late }}</el-descriptions-item>
          <el-descriptions-item label="严重迟到">{{ currentDetail.seriousLate }}</el-descriptions-item>
          <el-descriptions-item label="旷工次数">{{ currentDetail.absenteeism }}</el-descriptions-item>
          <el-descriptions-item label="缺卡次数">{{ currentDetail.missedCount }}</el-descriptions-item>
          <el-descriptions-item label="缺勤次数">{{ currentDetail.absenceCount }}</el-descriptions-item>
          <el-descriptions-item label="未提交日志">{{ currentDetail.missingLogCount }}</el-descriptions-item>
          <el-descriptions-item label="工作日加班">{{ currentDetail.workdayOvertime }}</el-descriptions-item>
          <el-descriptions-item label="休息日加班">{{ currentDetail.restdayOvertime }}</el-descriptions-item>
          <el-descriptions-item label="节假日加班">{{ currentDetail.holidayOvertime }}</el-descriptions-item>
          <el-descriptions-item label="年度绩效">{{ currentDetail.annualPerformance }}</el-descriptions-item>
          <el-descriptions-item label="月度绩效">{{ currentDetail.monthlyPerformance }}</el-descriptions-item>
          <el-descriptions-item label="违纪扣奖">{{ formatMoney(currentDetail.penaltyAmount) }}</el-descriptions-item>
        </el-descriptions>
        <div class="detail-footer">
          <div class="signature-section">
            <div class="signature-item">
              <div class="label">员工签名：</div>
              <div class="signature-image" v-if="currentDetail.signatureImg">
                <el-image :src="currentDetail.signatureImg" fit="contain" style="width: 100%; height: 100%;"
                  @click="handlePreviewSignature(currentDetail.signatureImg)">
                  <template #error>
                    <div class="image-slot">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="no-signature" v-else>未签名</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 签名预览对话框 -->
    <el-dialog v-model="signaturePreviewVisible" title="签名预览" width="500px" :show-close="true"
      :close-on-click-modal="true" :close-on-press-escape="true" class="signature-preview-dialog">
      <div class="signature-preview-content">
        <el-image v-if="currentSignatureImg" :src="currentSignatureImg" fit="contain"
          style="width: 100%; height: 300px;">
          <template #error>
            <div class="image-slot">
              <el-icon>
                <Picture />
              </el-icon>
            </div>
          </template>
        </el-image>
      </div>
    </el-dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { Search, Picture } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import {
  getFinanceAttendanceList,
  calculatePayrollSheets,
 } from "../../../../api/modules/index";
 // 格式化金额
 const formatMoney = (value) => {
  if (value === undefined || value === null) return '0.00';
  // 将输入转换为数字
  const num = Number(value);
  // 检查是否为有效数字
  if (isNaN(num)) return '0.00';
  // 使用toFixed(2)保留两位小数
  const fixedNum = num.toFixed(2);
  // 添加千分位分隔符
  const parts = fixedNum.split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return parts.join('.');
 };
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
 // if (userInfo.role !== 3) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
 // 列表数据
 const attendanceList = ref([]);
 const originalList = ref([]);
 const searchKeyword = ref('');
 // 详情对话框
 const detailDialogVisible = ref(false);
 const currentDetail = ref(null);
 // 日期范围
 const dateRange = ref(null);
 const defaultTime = new Date(2000, 1, 1, 0, 0, 0);
 // 日期快捷选项
 const dateShortcuts = [
  {
    text: '上个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() - 1, 1);
    },
  },
  {
    text: '本月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), 1);
    },
  },
  {
    text: '下个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() + 1, 1);
    },
  },
 ];
 // 设置默认日期范围（上个月）
 const setDefaultDateRange = () => {
  const now = new Date();
  dateRange.value = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 };
 // 处理日期变化
 const handleDateChange = (val) => {
  if (val) {
    fetchList();
  }
 };
 // 获取列表数据
 const fetchList = async () => {
  try {
    const params = {};
    if (dateRange.value) {
      params.year = dateRange.value.getFullYear();
      params.month = dateRange.value.getMonth() + 1; // 月份从0开始，需要+1
    }
    const res = await getFinanceAttendanceList(params);
    if (res.errcode === 0 && res.result && res.result.data) {
      originalList.value = res.result.data;
      attendanceList.value = res.result.data;
    } else {
      ElMessage.error(res.errmsg || "获取列表失败");
    }
  } catch (error) {
    ElMessage.error("获取列表失败");
  }
 };
 // 搜索
 const handleSearch = () => {
  if (!searchKeyword.value) {
    attendanceList.value = originalList.value;
    return;
  }
  attendanceList.value = originalList.value.filter(item =>
    item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
 };
 // 查看详情
 const handleViewDetail = (row) => {
  currentDetail.value = row;
  detailDialogVisible.value = true;
 };
 // 签名预览
 const signaturePreviewVisible = ref(false);
 const currentSignatureImg = ref('');
 const handlePreviewSignature = (url) => {
  if (!url) return;
  currentSignatureImg.value = url;
  signaturePreviewVisible.value = true;
 };
 // 生成工资条
 const generating = ref(false);
 const handleGeneratePayroll = async () => {
  if (!dateRange.value) {
    ElMessage.warning('请选择月份');
    return;
  }
  try {
    generating.value = true;
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const res = await calculatePayrollSheets(year, month);
    if (res.errcode === 0) {
      ElMessage.success('生成工资条成功');
      fetchList(); // 刷新列表
    } else {
      ElMessage.error(res.errmsg || '生成工资条失败');
    }
  } catch (error) {
    ElMessage.error('生成工资条失败');
  } finally {
    generating.value = false;
  }
 };
 // 页面加载时设置默认日期范围并获取数据
 onMounted(() => {
  setDefaultDateRange();
  fetchList();
 });
 </script>
 <style lang="scss" scoped>
 .attendance-finance-container {
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
    .el-card__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }
  :deep(.el-table) {
    flex: 1;
    .el-table__body-wrapper {
      height: 100%;
    }
    .el-table__cell {
      padding: 8px 0;
    }
    .el-table__header {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
        color: #606266;
        height: 48px;
        padding: 12px 0;
      }
    }
    .el-table__row {
      height: 56px;
    }
    .el-table__fixed-right {
      height: 100% !important;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
      z-index: 1;
    }
    .el-table__fixed {
      height: 100% !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
      z-index: 1;
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
  .signature-cell {
    position: relative;
    z-index: 2;
  }
  :deep(.el-image-viewer__wrapper) {
    z-index: 9999;
  }
  :deep(.el-image-viewer__mask) {
    z-index: 9998;
  }
  :deep(.el-image-viewer__btn) {
    z-index: 10000;
  }
  :deep(.el-image-viewer__actions) {
    z-index: 10000;
  }
  :deep(.el-image-viewer__canvas) {
    z-index: 9999;
  }
  :deep(.el-dialog__wrapper) {
    z-index: 2000;
  }
  :deep(.el-dialog) {
    z-index: 2001;
  }
 }
 .abnormal-date-group {
  display: none;
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #909399;
  font-size: 20px;
 }
 .signature-image {
  height: 100px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  z-index: 3000;
  :deep(.el-image) {
    width: 100%;
    height: 100%;
    background: #ffffff;
    position: relative;
    z-index: 3000;
  }
 }
 :deep(.el-image-viewer__wrapper) {
  z-index: 3000;
  .el-image-viewer__canvas {
    background: #ffffff;
  }
 }
 :deep(.el-dialog) {
  .el-dialog__body {
    position: relative;
    z-index: 2000;
  }
 }
 .signature-cell {
  position: relative;
  z-index: 2;
 }
 :deep(.el-table) {
  .el-table__fixed-right {
    z-index: 2000;
  }
  .el-table__fixed {
    z-index: 2000;
  }
 }
 :deep(.el-image-viewer__wrapper) {
  z-index: 9999;
 }
 :deep(.el-image-viewer__mask) {
  z-index: 9998;
 }
 .signature-preview-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  .signature-preview-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
  }
 }
 :deep(.el-dialog__wrapper) {
  z-index: 2000;
 }
 :deep(.el-dialog) {
  z-index: 2001;
 }
 .attendance-detail {
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    .employee-info {
      display: flex;
      align-items: center;
      gap: 16px;
      .info-content {
        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }
        p {
          margin: 4px 0 0;
          font-size: 14px;
          color: #909399;
        }
      }
    }
    .attendance-period {
      font-size: 16px;
      color: #606266;
      font-weight: 500;
    }
  }
  .detail-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    .signature-section {
      display: flex;
      justify-content: flex-end;
      gap: 40px;
      .signature-item {
        display: flex;
        align-items: center;
        gap: 12px;
        .label {
          font-size: 14px;
          color: #606266;
        }
        .signature-image {
          width: 120px;
          height: 60px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            border-color: #409eff;
          }
        }
        .no-signature {
          width: 120px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #909399;
          font-size: 14px;
          border: 1px dashed #dcdfe6;
          border-radius: 4px;
        }
      }
    }
  }
 }
 :deep(.el-descriptions) {
  .el-descriptions__label {
    width: 120px;
    color: #606266;
  }
  .el-descriptions__content {
    color: #303133;
  }
 }
 </style>
@@ -0,0 +1,861 @@
 <template>
  <div class="attendance-general-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">综合部考勤</span>
          <div class="header-right">
            <el-date-picker v-model="dateRange" type="month" placeholder="选择月份" :default-time="defaultTime"
              :shortcuts="dateShortcuts" @change="handleDateChange" style="width: 200px; margin-right: 8px;" />
            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch"
              style="width: 200px; margin-right: 8px;">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
      <el-table :data="attendanceList" style="width: 100%" height="calc(100vh - 280px)" border stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '12px 0'
        }" :cell-style="{
          padding: '8px 0'
        }">
        <el-table-column label="头像" width="80" align="center" fixed="left">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip fixed="left" />
        <el-table-column prop="workDays" label="工作天数" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'success' : 'warning'" size="small">
              {{ scope.row.status === 0 ? '正式' : '试用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="personalLeave" label="事假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="sickLeave" label="病假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="maternityLeave" label="产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="paternityLeave" label="陪产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="marriageLeave" label="婚假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="bereavementLeave" label="丧假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="annualLeave" label="年休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="managementAnnualLeave" label="年休假(管理岗)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="compensatoryLeave" label="调休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="early" label="早退次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="late" label="迟到次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="seriousLate" label="严重迟到" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenteeism" label="旷工次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missedCount" label="缺卡次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenceCount" label="缺勤次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missingLogCount" label="未提交日志" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="workdayOvertime" label="工作日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="restdayOvertime" label="休息日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="holidayOvertime" label="节假日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
              详情
            </el-button>
            <el-button type="success" link size="small" @click="handleApprove(scope.row)">
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改对话框 -->
    <el-dialog v-model="editDialogVisible" title="修改考勤" width="800px">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事假" prop="personalLeave">
              <el-input-number v-model="editForm.personalLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="病假" prop="sickLeave">
              <el-input-number v-model="editForm.sickLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产假" prop="maternityLeave">
              <el-input-number v-model="editForm.maternityLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪产假" prop="paternityLeave">
              <el-input-number v-model="editForm.paternityLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚假" prop="marriageLeave">
              <el-input-number v-model="editForm.marriageLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="丧假" prop="bereavementLeave">
              <el-input-number v-model="editForm.bereavementLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年休假" prop="annualLeave">
              <el-input-number v-model="editForm.annualLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年休假(管理岗)" prop="managementAnnualLeave">
              <el-input-number v-model="editForm.managementAnnualLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调休假" prop="compensatoryLeave">
              <el-input-number v-model="editForm.compensatoryLeave" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="早退次数" prop="early">
              <el-input-number v-model="editForm.early" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="迟到次数" prop="late">
              <el-input-number v-model="editForm.late" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="严重迟到" prop="seriousLate">
              <el-input-number v-model="editForm.seriousLate" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="旷工次数" prop="absenteeism">
              <el-input-number v-model="editForm.absenteeism" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缺卡次数" prop="missedCount">
              <el-input-number v-model="editForm.missedCount" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缺勤次数" prop="absenceCount">
              <el-input-number v-model="editForm.absenceCount" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未提交日志" prop="missingLogCount">
              <el-input-number v-model="editForm.missingLogCount" :min="0" :precision="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日加班" prop="workdayOvertime">
              <el-input-number v-model="editForm.workdayOvertime" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="休息日加班" prop="restdayOvertime">
              <el-input-number v-model="editForm.restdayOvertime" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节假日加班" prop="holidayOvertime">
              <el-input-number v-model="editForm.holidayOvertime" :min="0" :precision="1" :step="0.5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="违纪扣奖" prop="penaltyAmount">
              <el-input-number v-model="editForm.penaltyAmount" :min="0" :precision="2" :step="100" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 异常考勤详情对话框 -->
    <el-dialog v-model="abnormalDialogVisible" title="异常考勤详情" width="800px">
      <div v-for="(records, date) in abnormalList" :key="date" class="abnormal-date-group">
        <div class="date-header">{{ date }}</div>
        <el-table :data="records" style="width: 100%" border stripe>
          <el-table-column prop="type" label="异常类型" width="120">
            <template #default="scope">
              <el-tag :type="getAbnormalTypeTag(scope.row.type)">
                {{ getAbnormalTypeLabel(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="异常详情" min-width="200">
            <template #default="scope">
              <template v-if="scope.row.type === 'abnormal'">
                <div>考勤类型：{{ scope.row.checkType === 'OnDuty' ? '上班' : '下班' }}</div>
                <div>考勤时间：{{ scope.row.baseCheckTime }}</div>
                <div class="result-row">
                  考勤结果：
                  <el-select v-model="scope.row.realResult" size="small" style="width: 100px; margin: 0 8px;"
                    @change="handleUpdateAbnormal(scope.row)">
                    <el-option label="正常" value="Normal" />
                    <el-option label="早退" value="Early" />
                    <el-option label="迟到" value="Late" />
                    <el-option label="严重迟到" value="SeriousLate" />
                    <el-option label="旷工迟到" value="Absenteeism" />
                    <el-option label="未打卡" value="NotSigned" />
                  </el-select>
                </div>
              </template>
              <template v-else-if="scope.row.type === 'checkin'">
                <div class="result-row">
                  缺卡次数：
                  <el-input-number v-model="scope.row.missedCount" size="small" style="width: 100px; margin: 0 8px;"
                    :min="0" :max="10" @change="handleUpdateAbnormal(scope.row)" />
                  次
                </div>
              </template>
              <template v-else-if="scope.row.type === 'report'">
                <div class="result-row">
                  日志状态：
                  <el-select v-model="scope.row.reportCount" size="small" style="width: 100px; margin: 0 8px;"
                    @change="handleUpdateAbnormal(scope.row)">
                    <el-option label="未写日志" :value="0" />
                    <el-option label="正常" :value="1" />
                  </el-select>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="修改记录" min-width="300">
            <template #default="scope">
              <div v-if="scope.row.modifications && scope.row.modifications.length > 0">
                <div v-for="(mod, index) in scope.row.modifications" :key="index" class="modification-item">
                  <div>修改人：{{ mod.modifiedBy }}</div>
                  <div>修改时间：{{ mod.modifiedAt }}</div>
                  <div>修改前：{{ getModificationValue(mod.originalValue, scope.row.type) }}</div>
                  <div>修改后：{{ getModificationValue(mod.modifiedValue, scope.row.type) }}</div>
                  <div v-if="mod.isFinally" class="finally-tag">最终修改</div>
                </div>
              </div>
              <span v-else>无修改记录</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Search } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import {
  getGeneralAttendanceList,
  updateAttendanceDetail,
  approveAttendance,
  getAbnormalAttendanceDetail,
  updateAbnormalAttendance,
 } from "../../../../api/modules/index";
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
 // if (userInfo.role !== 2) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
 // 列表数据
 const attendanceList = ref([]);
 const originalList = ref([]);
 const searchKeyword = ref('');
 // 日期范围
 const dateRange = ref(null);
 const defaultTime = new Date(2000, 1, 1, 0, 0, 0);
 // 日期快捷选项
 const dateShortcuts = [
  {
    text: '上个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() - 1, 1);
    },
  },
  {
    text: '本月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), 1);
    },
  },
  {
    text: '下个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() + 1, 1);
    },
  },
 ];
 // 设置默认日期范围（上个月）
 const setDefaultDateRange = () => {
  const now = new Date();
  dateRange.value = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 };
 // 处理日期变化
 const handleDateChange = (val) => {
  if (val) {
    fetchList();
  }
 };
 // 修改对话框
 const editDialogVisible = ref(false);
 const editFormRef = ref(null);
 const editForm = ref({
  id: '',
  personalLeave: 0,
  sickLeave: 0,
  maternityLeave: 0,
  paternityLeave: 0,
  marriageLeave: 0,
  bereavementLeave: 0,
  annualLeave: 0,
  managementAnnualLeave: 0,
  compensatoryLeave: 0,
  early: 0,
  late: 0,
  seriousLate: 0,
  absenteeism: 0,
  missedCount: 0,
  absenceCount: 0,
  missingLogCount: 0,
  workdayOvertime: 0,
  restdayOvertime: 0,
  holidayOvertime: 0,
  penaltyAmount: 0
 });
 // 表单校验规则
 const editRules = {
  personalLeave: [{ type: 'number', message: '请输入数字' }],
  sickLeave: [{ type: 'number', message: '请输入数字' }],
  maternityLeave: [{ type: 'number', message: '请输入数字' }],
  paternityLeave: [{ type: 'number', message: '请输入数字' }],
  marriageLeave: [{ type: 'number', message: '请输入数字' }],
  bereavementLeave: [{ type: 'number', message: '请输入数字' }],
  annualLeave: [{ type: 'number', message: '请输入数字' }],
  managementAnnualLeave: [{ type: 'number', message: '请输入数字' }],
  compensatoryLeave: [{ type: 'number', message: '请输入数字' }],
  early: [{ type: 'number', message: '请输入数字' }],
  late: [{ type: 'number', message: '请输入数字' }],
  seriousLate: [{ type: 'number', message: '请输入数字' }],
  absenteeism: [{ type: 'number', message: '请输入数字' }],
  missedCount: [{ type: 'number', message: '请输入数字' }],
  absenceCount: [{ type: 'number', message: '请输入数字' }],
  missingLogCount: [{ type: 'number', message: '请输入数字' }],
  workdayOvertime: [{ type: 'number', message: '请输入数字' }],
  restdayOvertime: [{ type: 'number', message: '请输入数字' }],
  holidayOvertime: [{ type: 'number', message: '请输入数字' }],
  penaltyAmount: [{ type: 'number', message: '请输入数字' }]
 };
 // 获取列表数据
 const fetchList = async () => {
  try {
    const params = {};
    if (dateRange.value) {
      params.year = dateRange.value.getFullYear();
      params.month = dateRange.value.getMonth() + 1; // 月份从0开始，需要+1
    }
    const res = await getGeneralAttendanceList(params);
    if (res.errcode === 0) {
      originalList.value = res.result;
      attendanceList.value = res.result;
    }
  } catch (error) {
    ElMessage.error("获取列表失败");
  }
 };
 // 搜索
 const handleSearch = () => {
  if (!searchKeyword.value) {
    attendanceList.value = originalList.value;
    return;
  }
  attendanceList.value = originalList.value.filter(item =>
    item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
 };
 // 获取类型标签
 const getTypeLabel = (type) => {
  const typeMap = {
    1: '正常',
    2: '迟到',
    3: '早退',
    4: '缺勤',
    5: '请假'
  };
  return typeMap[type] || '未知';
 };
 // 获取类型标签样式
 const getTypeTagType = (type) => {
  const typeMap = {
    1: 'success',
    2: 'warning',
    3: 'warning',
    4: 'danger',
    5: 'info'
  };
  return typeMap[type] || '';
 };
 // 获取状态标签
 const getStatusLabel = (status) => {
  const statusMap = {
    0: '待审批',
    1: '已通过',
    2: '已驳回'
  };
  return statusMap[status] || '未知';
 };
 // 获取状态标签样式
 const getStatusTagType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  };
  return statusMap[status] || '';
 };
 // 获取审批状态标签
 const getFlagLabel = (flag) => {
  const flagMap = {
    0: '待审批',
    1: '已通过',
    2: '已驳回'
  };
  return flagMap[flag] || '未知';
 };
 // 获取审批状态标签样式
 const getFlagTagType = (flag) => {
  const flagMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  };
  return flagMap[flag] || '';
 };
 // 修改
 const handleEdit = (row) => {
  editForm.value = {
    id: row.id,
    personalLeave: row.personalLeave || 0,
    sickLeave: row.sickLeave || 0,
    maternityLeave: row.maternityLeave || 0,
    paternityLeave: row.paternityLeave || 0,
    marriageLeave: row.marriageLeave || 0,
    bereavementLeave: row.bereavementLeave || 0,
    annualLeave: row.annualLeave || 0,
    managementAnnualLeave: row.managementAnnualLeave || 0,
    compensatoryLeave: row.compensatoryLeave || 0,
    early: row.early || 0,
    late: row.late || 0,
    seriousLate: row.seriousLate || 0,
    absenteeism: row.absenteeism || 0,
    missedCount: row.missedCount || 0,
    absenceCount: row.absenceCount || 0,
    missingLogCount: row.missingLogCount || 0,
    workdayOvertime: row.workdayOvertime || 0,
    restdayOvertime: row.restdayOvertime || 0,
    holidayOvertime: row.holidayOvertime || 0,
    penaltyAmount: row.penaltyAmount || 0
  };
  editDialogVisible.value = true;
 };
 // 提交修改
 const handleEditSubmit = async () => {
  if (!editFormRef.value) return;
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await updateAttendanceDetail(editForm.value);
        if (res.errcode === 0) {
          ElMessage.success("修改成功");
          editDialogVisible.value = false;
          fetchList();
        }
      } catch (error) {
        ElMessage.error("修改失败");
      }
    }
  });
 };
 // 审批
 const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确认审批通过该考勤记录？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await approveAttendance([row.id]);
      if (res.errcode === 0) {
        ElMessage.success("审批成功");
        fetchList();
      }
    } catch (error) {
      ElMessage.error("审批失败");
    }
  }).catch(() => {
    ElMessage.info('已取消审批');
  });
 };
 // 异常考勤对话框
 const abnormalDialogVisible = ref(false);
 const abnormalList = ref([]);
 // 在 data 中添加新的响应式变量
 const currentAbnormalUser = ref({
  id: '',
  userid: ''
 });
 // 获取异常类型标签
 const getAbnormalTypeLabel = (type) => {
  const typeMap = {
    'abnormal': '考勤异常',
    'checkin': '签到签退',
    'report': '日志异常'
  };
  return typeMap[type] || '未知';
 };
 // 获取异常类型标签样式
 const getAbnormalTypeTag = (type) => {
  const typeMap = {
    'abnormal': 'danger',
    'checkin': 'warning',
    'report': 'info'
  };
  return typeMap[type] || '';
 };
 // 获取异常结果标签
 const getAbnormalResultLabel = (result) => {
  const resultMap = {
    'Normal': '正常',
    'Early': '早退',
    'Late': '迟到',
    'SeriousLate': '严重迟到',
    'Absenteeism': '旷工迟到',
    'NotSigned': '未打卡'
  };
  return resultMap[result] || '未知';
 };
 // 获取异常结果标签样式
 const getAbnormalResultTag = (result) => {
  const resultMap = {
    'Normal': 'success',
    'Early': 'warning',
    'Late': 'warning',
    'SeriousLate': 'danger',
    'Absenteeism': 'danger',
    'NotSigned': 'danger'
  };
  return resultMap[result] || '';
 };
 // 修改查看异常考勤方法
 const handleViewAbnormal = async (row) => {
  try {
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const res = await getAbnormalAttendanceDetail(row.userid, year, month);
    if (res.errcode === 0) {
      currentAbnormalUser.value = {
        id: res.result.id,
        userid: res.result.userid
      };
      abnormalList.value = res.result.data;
      abnormalDialogVisible.value = true;
    } else {
      ElMessage.error(res.errmsg || "获取异常考勤数据失败");
    }
  } catch (error) {
    ElMessage.error("获取异常考勤数据失败");
  }
 };
 // 修改异常考勤
 const handleUpdateAbnormal = async (record) => {
  // 保存原始值
  const originalValue = record.realResult;
  try {
    await ElMessageBox.confirm(
      '确认修改该考勤记录？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const data = {
      id: currentAbnormalUser.value.id,
      userid: currentAbnormalUser.value.userid,
      year,
      month,
      data: abnormalList.value
    };
    const res = await updateAbnormalAttendance(data);
    if (res.errcode === 0) {
      ElMessage.success("修改成功");
      fetchList()
      // 重新获取异常考勤数据
      const detailRes = await getAbnormalAttendanceDetail(currentAbnormalUser.value.userid, year, month);
      if (detailRes.errcode === 0) {
        currentAbnormalUser.value = {
          id: detailRes.result.id,
          userid: detailRes.result.userid
        };
        abnormalList.value = detailRes.result.data;
      }
    } else {
      // 如果修改失败，恢复原值
      record.realResult = originalValue;
      ElMessage.error(res.errmsg || "修改失败");
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消时恢复原值并刷新列表
      record.realResult = originalValue;
      const year = dateRange.value.getFullYear();
      const month = dateRange.value.getMonth() + 1;
      const detailRes = await getAbnormalAttendanceDetail(currentAbnormalUser.value.userid, year, month);
      if (detailRes.errcode === 0) {
        currentAbnormalUser.value = {
          id: detailRes.result.id,
          userid: detailRes.result.userid
        };
        abnormalList.value = detailRes.result.data;
      }
      ElMessage.info('已取消修改');
    } else {
      // 其他错误时也恢复原值
      record.realResult = originalValue;
      ElMessage.error("修改失败");
    }
  }
 };
 // 获取修改记录的值显示
 const getModificationValue = (value, type) => {
  if (type === 'abnormal') {
    const resultMap = {
      'Normal': '正常',
      'Early': '早退',
      'Late': '迟到',
      'SeriousLate': '严重迟到',
      'Absenteeism': '旷工迟到',
      'NotSigned': '未打卡'
    };
    return resultMap[value] || value;
  } else if (type === 'checkin') {
    return `${value}次`;
  } else if (type === 'report') {
    return value == 0 ? '未写日志' : '正常';
  }
  return value;
 };
 // 页面加载时设置默认日期范围并获取数据
 onMounted(() => {
  setDefaultDateRange();
  fetchList();
 });
 </script>
 <style lang="scss" scoped>
 .attendance-general-container {
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
    .el-card__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }
  :deep(.el-table) {
    flex: 1;
    .el-table__body-wrapper {
      height: 100%;
    }
    .el-table__cell {
      padding: 8px 0;
    }
    .el-table__header {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
        color: #606266;
        height: 48px;
        padding: 12px 0;
      }
    }
    .el-table__row {
      height: 56px;
    }
    .el-table__fixed-right {
      height: 100% !important;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }
    .el-table__fixed {
      height: 100% !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .abnormal-date-group {
  margin-bottom: 20px;
  .date-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  .modification-item {
    padding: 8px;
    border-bottom: 1px solid #ebeef5;
    position: relative;
    &:last-child {
      border-bottom: none;
    }
    .finally-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: #67c23a;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
 }
 .result-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
 }
 </style>
@@ -0,0 +1,597 @@
 <template>
  <div class="attendance-manager-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">主管审批列表</span>
          <div class="header-right">
            <el-date-picker v-model="dateRange" type="month" placeholder="选择月份" :default-time="defaultTime"
              :shortcuts="dateShortcuts" @change="handleDateChange" style="width: 200px; margin-right: 8px;" />
            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch"
              style="width: 200px; margin-right: 8px;">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
      <el-table :data="attendanceList" style="width: 100%" height="calc(100vh - 280px)" border stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '12px 0'
        }" :cell-style="{
          padding: '8px 0'
        }">
        <el-table-column label="头像" width="80" align="center" fixed="left">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip fixed="left" />
        <el-table-column prop="workDays" label="工作天数" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'success' : 'warning'" size="small">
              {{ scope.row.status === 0 ? '正式' : '试用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="personalLeave" label="事假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="sickLeave" label="病假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="maternityLeave" label="产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="paternityLeave" label="陪产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="marriageLeave" label="婚假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="bereavementLeave" label="丧假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="annualLeave" label="年休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="managementAnnualLeave" label="年休假(管理岗)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="compensatoryLeave" label="调休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="early" label="早退次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="late" label="迟到次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="seriousLate" label="严重迟到" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenteeism" label="旷工次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missedCount" label="缺卡次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenceCount" label="缺勤次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missingLogCount" label="未提交日志" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="workdayOvertime" label="工作日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="restdayOvertime" label="休息日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="holidayOvertime" label="节假日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="280" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
              详情
            </el-button>
            <el-button type="success" link size="small" @click="handleApprove(scope.row)">
              审批
            </el-button>
            <el-button type="warning" link size="small" @click="handleEditPerformance(scope.row)">
              修改绩效
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 异常考勤详情对话框 -->
    <el-dialog v-model="abnormalDialogVisible" title="异常考勤详情" width="800px">
      <div v-for="(records, date) in abnormalList" :key="date" class="abnormal-date-group">
        <div class="date-header">{{ date }}</div>
        <el-table :data="records" style="width: 100%" border stripe>
          <el-table-column prop="type" label="异常类型" width="120">
            <template #default="scope">
              <el-tag :type="getAbnormalTypeTag(scope.row.type)">
                {{ getAbnormalTypeLabel(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="异常详情" min-width="200">
            <template #default="scope">
              <template v-if="scope.row.type === 'abnormal'">
                <div>考勤类型：{{ scope.row.checkType === 'OnDuty' ? '上班' : '下班' }}</div>
                <div>考勤时间：{{ scope.row.baseCheckTime }}</div>
                <div>考勤结果：{{ getAbnormalResultLabel(scope.row.realResult) }}</div>
              </template>
              <template v-else-if="scope.row.type === 'checkin'">
                <div>缺卡次数：{{ scope.row.missedCount }}次</div>
              </template>
              <template v-else-if="scope.row.type === 'report'">
                <div>日志状态：{{ scope.row.reportCount === 0 ? '未写日志' : '正常' }}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="修改记录" min-width="300">
            <template #default="scope">
              <div v-if="scope.row.modifications && scope.row.modifications.length > 0">
                <div v-for="(mod, index) in scope.row.modifications" :key="index" class="modification-item">
                  <div>修改人：{{ mod.modifiedBy }}</div>
                  <div>修改时间：{{ mod.modifiedAt }}</div>
                  <div>修改前：{{ getModificationValue(mod.originalValue, scope.row.type) }}</div>
                  <div>修改后：{{ getModificationValue(mod.modifiedValue, scope.row.type) }}</div>
                  <div v-if="mod.isFinally" class="finally-tag">最终修改</div>
                </div>
              </div>
              <span v-else>无修改记录</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 修改绩效对话框 -->
    <el-dialog v-model="performanceDialogVisible" title="修改绩效" width="500px">
      <el-form ref="performanceFormRef" :model="performanceForm" label-width="100px" :rules="performanceRules">
        <el-form-item label="年度绩效" prop="annualPerformance">
          <el-input-number v-model="performanceForm.annualPerformance" :min="0" :max="100" :precision="1" :step="0.5"
            style="width: 200px" />
        </el-form-item>
        <el-form-item label="月度绩效" prop="monthlyPerformance">
          <el-input-number v-model="performanceForm.monthlyPerformance" :min="0" :max="100" :precision="1" :step="0.5"
            style="width: 200px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="performanceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPerformanceForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Search } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import {
  getManagerAttendanceList,
  updateManagerAttendanceDetail,
  approveManagerAttendance,
  getAbnormalAttendanceDetail,
 } from "../../../../api/modules/index";
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
 // if (userInfo.role !== 2) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
 // 列表数据
 const attendanceList = ref([]);
 const originalList = ref([]);
 const searchKeyword = ref('');
 // 日期范围
 const dateRange = ref(null);
 const defaultTime = new Date(2000, 1, 1, 0, 0, 0);
 // 日期快捷选项
 const dateShortcuts = [
  {
    text: '上个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() - 1, 1);
    },
  },
  {
    text: '本月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), 1);
    },
  },
  {
    text: '下个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() + 1, 1);
    },
  },
 ];
 // 设置默认日期范围（上个月）
 const setDefaultDateRange = () => {
  const now = new Date();
  dateRange.value = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 };
 // 处理日期变化
 const handleDateChange = (val) => {
  if (val) {
    fetchList();
  }
 };
 // 获取列表数据
 const fetchList = async () => {
  try {
    const params = {};
    if (dateRange.value) {
      params.year = dateRange.value.getFullYear();
      params.month = dateRange.value.getMonth() + 1; // 月份从0开始，需要+1
    }
    const res = await getManagerAttendanceList(params);
    if (res.errcode === 0) {
      originalList.value = res.result;
      attendanceList.value = res.result;
    }
  } catch (error) {
    ElMessage.error("获取列表失败");
  }
 };
 // 搜索
 const handleSearch = () => {
  if (!searchKeyword.value) {
    attendanceList.value = originalList.value;
    return;
  }
  attendanceList.value = originalList.value.filter(item =>
    item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
 };
 // 获取审批状态标签
 const getFlagLabel = (flag) => {
  const flagMap = {
    0: '待审批',
    1: '已通过',
    2: '已驳回'
  };
  return flagMap[flag] || '未知';
 };
 // 获取审批状态标签样式
 const getFlagTagType = (flag) => {
  const flagMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  };
  return flagMap[flag] || '';
 };
 // 审批
 const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确认审批通过该考勤记录？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await approveManagerAttendance([row.id]);
      if (res.errcode === 0) {
        ElMessage.success("审批成功");
        fetchList();
      }
    } catch (error) {
      ElMessage.error("审批失败");
    }
  }).catch(() => {
    ElMessage.info('已取消审批');
  });
 };
 // 异常考勤对话框
 const abnormalDialogVisible = ref(false);
 const abnormalList = ref([]);
 // 在 data 中添加新的响应式变量
 const currentAbnormalUser = ref({
  id: '',
  userid: ''
 });
 // 获取异常类型标签
 const getAbnormalTypeLabel = (type) => {
  const typeMap = {
    'abnormal': '考勤异常',
    'checkin': '签到签退',
    'report': '日志异常'
  };
  return typeMap[type] || '未知';
 };
 // 获取异常类型标签样式
 const getAbnormalTypeTag = (type) => {
  const typeMap = {
    'abnormal': 'danger',
    'checkin': 'warning',
    'report': 'info'
  };
  return typeMap[type] || '';
 };
 // 获取异常结果标签
 const getAbnormalResultLabel = (result) => {
  const resultMap = {
    'Normal': '正常',
    'Early': '早退',
    'Late': '迟到',
    'SeriousLate': '严重迟到',
    'Absenteeism': '旷工迟到',
    'NotSigned': '未打卡'
  };
  return resultMap[result] || '未知';
 };
 // 获取异常结果标签样式
 const getAbnormalResultTag = (result) => {
  const resultMap = {
    'Normal': 'success',
    'Early': 'warning',
    'Late': 'warning',
    'SeriousLate': 'danger',
    'Absenteeism': 'danger',
    'NotSigned': 'danger'
  };
  return resultMap[result] || '';
 };
 // 获取修改记录的值显示
 const getModificationValue = (value, type) => {
  if (type === 'abnormal') {
    const resultMap = {
      'Normal': '正常',
      'Early': '早退',
      'Late': '迟到',
      'SeriousLate': '严重迟到',
      'Absenteeism': '旷工迟到',
      'NotSigned': '未打卡'
    };
    return resultMap[value] || value;
  } else if (type === 'checkin') {
    return `${value}次`;
  } else if (type === 'report') {
    return value == 0 ? '未写日志' : '正常';
  }
  return value;
 };
 // 修改查看异常考勤方法
 const handleViewAbnormal = async (row) => {
  try {
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const res = await getAbnormalAttendanceDetail(row.userid, year, month);
    if (res.errcode === 0) {
      currentAbnormalUser.value = {
        id: res.result.id,
        userid: res.result.userid
      };
      abnormalList.value = res.result.data;
      abnormalDialogVisible.value = true;
    } else {
      ElMessage.error(res.errmsg || "获取异常考勤数据失败");
    }
  } catch (error) {
    ElMessage.error("获取异常考勤数据失败");
  }
 };
 // 绩效修改相关
 const performanceDialogVisible = ref(false);
 const performanceFormRef = ref(null);
 const performanceForm = ref({
  id: '',
  annualPerformance: 0,
  monthlyPerformance: 0
 });
 const performanceRules = {
  annualPerformance: [
    { required: true, message: '请输入年度绩效', trigger: 'blur' },
    { type: 'number', min: 0, max: 100, message: '年度绩效必须在0-100之间', trigger: 'blur' }
  ],
  monthlyPerformance: [
    { required: true, message: '请输入月度绩效', trigger: 'blur' },
    { type: 'number', min: 0, max: 100, message: '月度绩效必须在0-100之间', trigger: 'blur' }
  ]
 };
 // 打开修改绩效对话框
 const handleEditPerformance = (row) => {
  performanceForm.value = {
    id: row.id,
    annualPerformance: row.annualPerformance || 0,
    monthlyPerformance: row.monthlyPerformance || 0
  };
  performanceDialogVisible.value = true;
 };
 // 提交绩效表单
 const submitPerformanceForm = async () => {
  if (!performanceFormRef.value) return;
  await performanceFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await updateManagerAttendanceDetail(performanceForm.value);
        if (res.errcode === 0) {
          ElMessage.success("修改成功");
          performanceDialogVisible.value = false;
          fetchList();
        } else {
          ElMessage.error(res.errmsg || "修改失败");
        }
      } catch (error) {
        ElMessage.error("修改失败");
      }
    }
  });
 };
 // 页面加载时设置默认日期范围并获取数据
 onMounted(() => {
  setDefaultDateRange();
  fetchList();
 });
 </script>
 <style lang="scss" scoped>
 .attendance-manager-container {
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
    .el-card__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }
  :deep(.el-table) {
    flex: 1;
    .el-table__body-wrapper {
      height: 100%;
    }
    .el-table__cell {
      padding: 8px 0;
    }
    .el-table__header {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
        color: #606266;
        height: 48px;
        padding: 12px 0;
      }
    }
    .el-table__row {
      height: 56px;
    }
    .el-table__fixed-right {
      height: 100% !important;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }
    .el-table__fixed {
      height: 100% !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .abnormal-date-group {
  margin-bottom: 20px;
  .date-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  .modification-item {
    padding: 8px;
    border-bottom: 1px solid #ebeef5;
    position: relative;
    &:last-child {
      border-bottom: none;
    }
    .finally-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: #67c23a;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
 }
 .result-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
 }
 .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
 }
 </style>
@@ -0,0 +1,604 @@
 <template>
  <div class="attendance-reviewed-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">综合部复审列表</span>
          <div class="header-right">
            <el-date-picker v-model="dateRange" type="month" placeholder="选择月份" :default-time="defaultTime"
              :shortcuts="dateShortcuts" @change="handleDateChange" style="width: 200px; margin-right: 8px;" />
            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch"
              style="width: 200px; margin-right: 8px;">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
      <el-table :data="attendanceList" style="width: 100%" height="calc(100vh - 280px)" border stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          textAlign: 'center',
          padding: '12px 0'
        }" :cell-style="{
          padding: '8px 0'
        }">
        <el-table-column label="头像" width="80" align="center" fixed="left">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip fixed="left" />
        <el-table-column prop="workDays" label="工作天数" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'success' : 'warning'" size="small">
              {{ scope.row.status === 0 ? '正式' : '试用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="personalLeave" label="事假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="sickLeave" label="病假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="maternityLeave" label="产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="paternityLeave" label="陪产假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="marriageLeave" label="婚假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="bereavementLeave" label="丧假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="annualLeave" label="年休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="managementAnnualLeave" label="年休假(管理岗)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="compensatoryLeave" label="调休假" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="early" label="早退次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="late" label="迟到次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="seriousLate" label="严重迟到" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenteeism" label="旷工次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missedCount" label="缺卡次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="absenceCount" label="缺勤次数" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="missingLogCount" label="未提交日志" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="workdayOvertime" label="工作日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="restdayOvertime" label="休息日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="holidayOvertime" label="节假日加班" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
              详情
            </el-button>
            <el-button type="success" link size="small" @click="handleApprove(scope.row)">
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 异常考勤详情对话框 -->
    <el-dialog v-model="abnormalDialogVisible" title="异常考勤详情" width="800px">
      <div v-for="(records, date) in abnormalList" :key="date" class="abnormal-date-group">
        <div class="date-header">{{ date }}</div>
        <el-table :data="records" style="width: 100%" border stripe>
          <el-table-column prop="type" label="异常类型" width="120">
            <template #default="scope">
              <el-tag :type="getAbnormalTypeTag(scope.row.type)">
                {{ getAbnormalTypeLabel(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="异常详情" min-width="200">
            <template #default="scope">
              <template v-if="scope.row.type === 'abnormal'">
                <div>考勤类型：{{ scope.row.checkType === 'OnDuty' ? '上班' : '下班' }}</div>
                <div>考勤时间：{{ scope.row.baseCheckTime }}</div>
                <div class="result-row">
                  考勤结果：
                  <el-select v-model="scope.row.realResult" size="small" style="width: 100px; margin: 0 8px;"
                    @change="handleUpdateAbnormal(scope.row)">
                    <el-option label="正常" value="Normal" />
                    <el-option label="早退" value="Early" />
                    <el-option label="迟到" value="Late" />
                    <el-option label="严重迟到" value="SeriousLate" />
                    <el-option label="旷工迟到" value="Absenteeism" />
                    <el-option label="未打卡" value="NotSigned" />
                  </el-select>
                </div>
              </template>
              <template v-else-if="scope.row.type === 'checkin'">
                <div class="result-row">
                  缺卡次数：
                  <el-input-number v-model="scope.row.missedCount" size="small" style="width: 100px; margin: 0 8px;"
                    :min="0" :max="10" @change="handleUpdateAbnormal(scope.row)" />
                  次
                </div>
              </template>
              <template v-else-if="scope.row.type === 'report'">
                <div class="result-row">
                  日志状态：
                  <el-select v-model="scope.row.reportCount" size="small" style="width: 100px; margin: 0 8px;"
                    @change="handleUpdateAbnormal(scope.row)">
                    <el-option label="未写日志" :value="0" />
                    <el-option label="正常" :value="1" />
                  </el-select>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="修改记录" min-width="300">
            <template #default="scope">
              <div v-if="scope.row.modifications && scope.row.modifications.length > 0">
                <div v-for="(mod, index) in scope.row.modifications" :key="index" class="modification-item">
                  <div>修改人：{{ mod.modifiedBy }}</div>
                  <div>修改时间：{{ mod.modifiedAt }}</div>
                  <div>修改前：{{ getModificationValue(mod.originalValue, scope.row.type) }}</div>
                  <div>修改后：{{ getModificationValue(mod.modifiedValue, scope.row.type) }}</div>
                  <div v-if="mod.isFinally" class="finally-tag">最终修改</div>
                </div>
              </div>
              <span v-else>无修改记录</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Search } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import {
  getReviewedAttendanceList,
  updateAttendanceDetail,
  reviewAttendance,
  getAbnormalAttendanceDetail,
  updateAbnormalAttendance,
 } from "../../../../api/modules/index";
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
 // if (userInfo.role !== 2) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
 // 列表数据
 const attendanceList = ref([]);
 const originalList = ref([]);
 const searchKeyword = ref('');
 // 日期范围
 const dateRange = ref(null);
 const defaultTime = new Date(2000, 1, 1, 0, 0, 0);
 // 日期快捷选项
 const dateShortcuts = [
  {
    text: '上个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() - 1, 1);
    },
  },
  {
    text: '本月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth(), 1);
    },
  },
  {
    text: '下个月',
    value: () => {
      const now = new Date();
      return new Date(now.getFullYear(), now.getMonth() + 1, 1);
    },
  },
 ];
 // 设置默认日期范围（上个月）
 const setDefaultDateRange = () => {
  const now = new Date();
  dateRange.value = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 };
 // 处理日期变化
 const handleDateChange = (val) => {
  if (val) {
    fetchList();
  }
 };
 // 获取列表数据
 const fetchList = async () => {
  try {
    const params = {};
    if (dateRange.value) {
      params.year = dateRange.value.getFullYear();
      params.month = dateRange.value.getMonth() + 1; // 月份从0开始，需要+1
    }
    const res = await getReviewedAttendanceList(params);
    if (res.errcode === 0) {
      originalList.value = res.result;
      attendanceList.value = res.result;
    }
  } catch (error) {
    ElMessage.error("获取列表失败");
  }
 };
 // 搜索
 const handleSearch = () => {
  if (!searchKeyword.value) {
    attendanceList.value = originalList.value;
    return;
  }
  attendanceList.value = originalList.value.filter(item =>
    item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
 };
 // 获取审批状态标签
 const getFlagLabel = (flag) => {
  const flagMap = {
    0: '待审批',
    1: '已通过',
    2: '已驳回'
  };
  return flagMap[flag] || '未知';
 };
 // 获取审批状态标签样式
 const getFlagTagType = (flag) => {
  const flagMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  };
  return flagMap[flag] || '';
 };
 // 审批
 const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确认审批通过该考勤记录？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await reviewAttendance([row.id]);
      if (res.errcode === 0) {
        ElMessage.success("审批成功");
        fetchList();
      }
    } catch (error) {
      ElMessage.error("审批失败");
    }
  }).catch(() => {
    ElMessage.info('已取消审批');
  });
 };
 // 异常考勤对话框
 const abnormalDialogVisible = ref(false);
 const abnormalList = ref([]);
 // 在 data 中添加新的响应式变量
 const currentAbnormalUser = ref({
  id: '',
  userid: ''
 });
 // 获取异常类型标签
 const getAbnormalTypeLabel = (type) => {
  const typeMap = {
    'abnormal': '考勤异常',
    'checkin': '签到签退',
    'report': '日志异常'
  };
  return typeMap[type] || '未知';
 };
 // 获取异常类型标签样式
 const getAbnormalTypeTag = (type) => {
  const typeMap = {
    'abnormal': 'danger',
    'checkin': 'warning',
    'report': 'info'
  };
  return typeMap[type] || '';
 };
 // 获取异常结果标签
 const getAbnormalResultLabel = (result) => {
  const resultMap = {
    'Normal': '正常',
    'Early': '早退',
    'Late': '迟到',
    'SeriousLate': '严重迟到',
    'Absenteeism': '旷工迟到',
    'NotSigned': '未打卡'
  };
  return resultMap[result] || '未知';
 };
 // 获取异常结果标签样式
 const getAbnormalResultTag = (result) => {
  const resultMap = {
    'Normal': 'success',
    'Early': 'warning',
    'Late': 'warning',
    'SeriousLate': 'danger',
    'Absenteeism': 'danger',
    'NotSigned': 'danger'
  };
  return resultMap[result] || '';
 };
 // 获取修改记录的值显示
 const getModificationValue = (value, type) => {
  if (type === 'abnormal') {
    const resultMap = {
      'Normal': '正常',
      'Early': '早退',
      'Late': '迟到',
      'SeriousLate': '严重迟到',
      'Absenteeism': '旷工迟到',
      'NotSigned': '未打卡'
    };
    return resultMap[value] || value;
  } else if (type === 'checkin') {
    return `${value}次`;
  } else if (type === 'report') {
    return value == 0 ? '未写日志' : '正常';
  }
  return value;
 };
 // 修改查看异常考勤方法
 const handleViewAbnormal = async (row) => {
  try {
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const res = await getAbnormalAttendanceDetail(row.userid, year, month);
    if (res.errcode === 0) {
      currentAbnormalUser.value = {
        id: res.result.id,
        userid: res.result.userid
      };
      abnormalList.value = res.result.data;
      abnormalDialogVisible.value = true;
    } else {
      ElMessage.error(res.errmsg || "获取异常考勤数据失败");
    }
  } catch (error) {
    ElMessage.error("获取异常考勤数据失败");
  }
 };
 // 修改异常考勤
 const handleUpdateAbnormal = async (record) => {
  // 保存原始值
  const originalValue = record.realResult;
  try {
    await ElMessageBox.confirm(
      '确认修改该考勤记录？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    const year = dateRange.value.getFullYear();
    const month = dateRange.value.getMonth() + 1;
    const data = {
      id: currentAbnormalUser.value.id,
      userid: currentAbnormalUser.value.userid,
      year,
      month,
      data: abnormalList.value
    };
    const res = await updateAbnormalAttendance(data);
    if (res.errcode === 0) {
      ElMessage.success("修改成功");
      fetchList()
      // 重新获取异常考勤数据
      const detailRes = await getAbnormalAttendanceDetail(currentAbnormalUser.value.userid, year, month);
      if (detailRes.errcode === 0) {
        currentAbnormalUser.value = {
          id: detailRes.result.id,
          userid: detailRes.result.userid
        };
        abnormalList.value = detailRes.result.data;
      }
    } else {
      // 如果修改失败，恢复原值
      record.realResult = originalValue;
      ElMessage.error(res.errmsg || "修改失败");
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消时恢复原值并刷新列表
      record.realResult = originalValue;
      const year = dateRange.value.getFullYear();
      const month = dateRange.value.getMonth() + 1;
      const detailRes = await getAbnormalAttendanceDetail(currentAbnormalUser.value.userid, year, month);
      if (detailRes.errcode === 0) {
        currentAbnormalUser.value = {
          id: detailRes.result.id,
          userid: detailRes.result.userid
        };
        abnormalList.value = detailRes.result.data;
      }
      ElMessage.info('已取消修改');
    } else {
      // 其他错误时也恢复原值
      record.realResult = originalValue;
      ElMessage.error("修改失败");
    }
  }
 };
 // 页面加载时设置默认日期范围并获取数据
 onMounted(() => {
  setDefaultDateRange();
  fetchList();
 });
 </script>
 <style lang="scss" scoped>
 .attendance-reviewed-container {
  height: calc(100vh - 120px);
  padding: 20px;
  background-color: var(--el-bg-color-page);
  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
    .el-card__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }
  :deep(.el-table) {
    flex: 1;
    .el-table__body-wrapper {
      height: 100%;
    }
    .el-table__cell {
      padding: 8px 0;
    }
    .el-table__header {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
        color: #606266;
        height: 48px;
        padding: 12px 0;
      }
    }
    .el-table__row {
      height: 56px;
    }
    .el-table__fixed-right {
      height: 100% !important;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }
    .el-table__fixed {
      height: 100% !important;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color);
    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
 }
 :deep(.el-dialog__body) {
  padding: 20px;
 }
 :deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
 }
 :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
 }
 .abnormal-date-group {
  margin-bottom: 20px;
  .date-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  .modification-item {
    padding: 8px;
    border-bottom: 1px solid #ebeef5;
    position: relative;
    &:last-child {
      border-bottom: none;
    }
    .finally-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: #67c23a;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
 }
 .result-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
 }
 </style>
@@ -0,0 +1,60 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { viteMockServe } from "vite-plugin-mock";
 import viteCompression from "vite-plugin-compression";
 export default defineConfig({
  viteMockServe: {
    supportTs: false,
    logger: false,
    mockPath: "./mock/index.js",
  },
  plugins: [
    vue(),
    viteCompression({
      //gzip压缩
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: "gzip",
      ext: ".gz",
    }),
  ],
  build: {
    minify: "terser", // 明确指定使用 Terser 作为压缩工具
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
    rollupOptions: {
      output: {
        //静态资源分类打包
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        manualChunks(id) {
          //静态资源分拆打包
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
  css: {
    /* CSS 预处理器   导入全局样式*/
    preprocessorOptions: {
      scss: {
        // additionalData: '@import "src/styles/common.scss";',
      },
    },
  }
 });
Author	SHA1	Message	Date
1147680382@qq.com	943093ed5e	添加生成工资条功能	2025-05-29 11:30:31 +08:00
1147680382@qq.com	71421052df	修改图标	2025-05-26 16:25:54 +08:00
1147680382@qq.com	29ed6a57c7	修改工资配置权限	2025-05-26 15:59:16 +08:00
1147680382@qq.com	e4f7e76e78	添加路由权限	2025-05-26 15:12:19 +08:00
1147680382@qq.com	85d021711c	修改权限	2025-05-26 14:28:42 +08:00
1147680382@qq.com	6843cacf81	添加按钮权限	2025-05-26 14:25:23 +08:00
1147680382@qq.com	ea912c878c	修改角色后更新菜单	2025-05-26 11:59:09 +08:00
1147680382@qq.com	21eeb3c8ad	样式修改	2025-05-26 10:38:22 +08:00
1147680382@qq.com	5aa41ddae7	图标修改	2025-05-26 10:26:38 +08:00
1147680382@qq.com	978713c382	样式修改	2025-05-26 10:15:47 +08:00
1147680382@qq.com	da9119b7e7	组别样式修改	2025-05-26 09:39:23 +08:00
1147680382@qq.com	0ee4dd28b2	添加工资查看功能	2025-05-23 11:29:08 +08:00
1147680382@qq.com	df432367c6	完善考勤审批功能模块	2025-05-23 09:11:43 +08:00
1147680382@qq.com	4ad03c111f	添加考勤菜单	2025-05-22 09:35:50 +08:00
1147680382@qq.com	c357ad173c	修改分组管理	2025-05-21 14:55:59 +08:00
1147680382@qq.com	cd90af7c05	对接登录	2025-05-20 17:58:31 +08:00
1147680382@qq.com	4bd7c4de67	登录对接	2025-05-19 16:36:02 +08:00
hezhidong	839703dc1a	5.16	2025-05-16 08:55:13 +08:00