kd-aiot-frontend-hr/src/App.vue

<template>
  <div id="page-hr-app">
    <router-view v-if="isQiankun || isFullPage" :key="$route.fullPath" />
    <ele-pro-layout
      v-else
      :menus="menus"
      :tabs="pageTabs"
      :project-name="PROJECT_NAME"
      :collapse.sync="sidebarCollapsed"
      :show-tabs="true"
      :show-breadcrumb="false"
      :show-footer="false"
      tab-style="card"
      :tab-sortable="true"
      home-title="首页"
      home-path="/home"
      layout-path="/"
      @tab-add="onTabAdd"
      @tab-remove="onTabRemove"
      @tab-remove-left="onTabRemoveLeft"
      @tab-remove-right="onTabRemoveRight"
      @tab-remove-other="onTabRemoveOther"
      @tab-remove-all="onTabRemoveAll"
      @tabSortChange="onTabSortChange"
      @reload-page="onReloadPage"
      @set-home-components="onSetHomeComponents"
      @logo-click="onLogoClick"
    >
      <!-- 不缓存页面：切换选项卡时重新挂载并刷新全部数据 -->
      <router-view v-if="!pageRefreshing" :key="$route.fullPath" />
    </ele-pro-layout>
  </div>
</template>
<script>
import { PROJECT_NAME } from '@/config/setting';
export default {
  name: 'App',
  data() {
    return {
      PROJECT_NAME,
      sidebarCollapsed: false,
      pageTabs: [],
      homeComponents: [],
      pageRefreshing: false,
      menus: [
      { path: '/home', meta: { title: '首页', icon: 'el-icon-house' } },
      {
        path: '/position',
        meta: { title: '岗位管理', icon: 'el-icon-suitcase' },
        children: [
          { path: '/position-management', meta: { title: '岗位设定' } },
          { path: '/position-sequence', meta: { title: '岗位序列' } },
          { path: '/position-application', meta: { title: '岗位申请' } }
        ]
      },
      {
        path: '/hiring',
        meta: { title: '录用管理', icon: 'el-icon-s-check' },
        children: [
          { path: '/hiring-approval', meta: { title: '录用审批' } },
          { path: '/offer-notify', meta: { title: 'Offer 通知' } }
        ]
      },

      {
        path: '/hr-management',
        meta: { title: '人事管理', icon: 'el-icon-user' },
        children: [
          // { path: '/organization', meta: { title: '组织机构' } },
          { path: '/employee-archive', meta: { title: '员工档案' } },
          { path: '/onboarding-handling', meta: { title: '办理入职' } },
          { path: '/regularization-handling', meta: { title: '转正办理' } },
          { path: '/resignation-application', meta: { title: '离职申请' } },
          { path: '/resignation-handover-order', meta: { title: '离职交接单' } },
          { path: '/position-transfer', meta: { title: '岗位调动办理' } },
          { path: '/qualification-management', meta: { title: '资质管理' } },
          { path: '/term-management', meta: { title: '期限管理' } },
          {
            path: '/employee-template',
            meta: { title: '员工模板' },
            children: [
              { path: '/offer-letter-template', meta: { title: '录用通知书' } },
              { path: '/onboarding-contract-template', meta: { title: '合同模版' } },
              { path: '/regularization-template', meta: { title: '转正申请模板' } },
              { path: '/resignation-letter', meta: { title: '辞职申请书' } },
              { path: '/resignation-handover-table', meta: { title: '离职交接表' } },
              { path: '/resignation-certificate', meta: { title: '离职证明' } },
              { path: '/position-transfer-template', meta: { title: '岗位调动' } }
            ]
          }
        ]
      },
      { path: '/contract-management', meta: { title: '合同管理', icon: 'el-icon-document' } },
      // 合同模板类目暂时隐藏
      // {
      //   path: '/contract',
      //   meta: { title: '合同管理', icon: 'el-icon-document' },
      //   children: [
      //     { path: '/contract-template', meta: { title: '合同模版' } },
      //     { path: '/contract-management', meta: { title: '合同管理' } }
      //   ]
      // },
      // {
      //   path: '/approval',
      //   meta: { title: '行政审批', icon: 'el-icon-finished' },
      //   children: [
      //     { path: '/approval-sync-attendance', meta: { title: '行政审批同步考勤' } }
      //   ]
      // },
      
      // { path: '/recruitment-plan', meta: { title: '招聘需求计划', icon: 'el-icon-suitcase' } },
      // { path: '/talent-pool', meta: { title: '人才库', icon: 'el-icon-user' } },
      // { path: '/performance-scoring', meta: { title: '绩效评分', icon: 'el-icon-edit-outline' } },
      // { path: '/performance-scheme', meta: { title: '绩效方案', icon: 'el-icon-document-checked' } },
      
      {
        path: '/attendance',
        meta: { title: '考勤管理', icon: 'el-icon-time' },
        children: [
          { path: '/attendance/rule', meta: { title: '打卡规则设定' } },
          { path: '/attendance/report', meta: { title: '考勤统计' } }
        ]
      },
      {
        path: '/hr-analysis',
        meta: { title: '人力资源分析报表', icon: 'el-icon-data-analysis' },
        children: [
          { path: '/personnel-structure-dashboard', meta: { title: '人员结构看板' } },
          { path: '/personnel-structure-analysis-board', meta: { title: '人员结构分析看板' } }
        ]
      }
    ] };
  },
  computed: {
    isQiankun() { return Boolean(window.__POWERED_BY_QIANKUN__); },
    isFullPage() { return Boolean(this.$route.meta?.fullPage); }
  },
  methods: {
    findTabIndex(key) {
      return this.pageTabs.findIndex((tab) => tab.key === key);
    },
    tabPath(tab) {
      return (tab && (tab.fullPath || tab.key)) || '/home';
    },
    goTabOrHome(tab) {
      const path = this.tabPath(tab);
      if (this.$route.fullPath !== path && this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    onTabAdd(data) {
      if (!data?.key) return;
      const index = this.findTabIndex(data.key);
      if (index === -1) {
        this.pageTabs.push(data);
        return;
      }
      const current = this.pageTabs[index];
      if (current.fullPath !== data.fullPath || current.title !== data.title) {
        this.$set(this.pageTabs, index, { ...current, ...data });
      }
    },
    onTabRemove({ key, active }) {
      const index = this.findTabIndex(key);
      if (index === -1) return;
      const next = this.pageTabs[index + 1] || this.pageTabs[index - 1];
      this.pageTabs.splice(index, 1);
      if (active === key) this.goTabOrHome(next);
    },
    onTabRemoveLeft({ key, active }) {
      const index = this.findTabIndex(key);
      if (index <= 0) return;
      this.pageTabs.splice(0, index);
      if (!this.pageTabs.some((tab) => tab.key === active)) this.goTabOrHome(this.pageTabs[0]);
    },
    onTabRemoveRight({ key, active }) {
      const index = this.findTabIndex(key);
      if (index === -1 || index >= this.pageTabs.length - 1) return;
      this.pageTabs.splice(index + 1);
      if (!this.pageTabs.some((tab) => tab.key === active)) this.goTabOrHome(this.pageTabs[index]);
    },
    onTabRemoveOther({ key }) {
      this.pageTabs = this.pageTabs.filter((tab) => tab.key === key);
      this.goTabOrHome(this.pageTabs[0]);
    },
    onTabRemoveAll() {
      this.pageTabs = [];
      if (this.$route.path !== '/home') this.$router.push('/home');
    },
    onTabSortChange(tabs) {
      this.pageTabs = tabs || [];
    },
    onReloadPage() {
      this.pageRefreshing = true;
      this.$nextTick(() => {
        this.pageRefreshing = false;
      });
    },
    onSetHomeComponents(components) {
      this.homeComponents = components || [];
    },
    onLogoClick(isHome) {
      if (!isHome) this.$router.push('/home');
    }
  }
};
</script>
<style src="./styles/App.css"></style>