当前位置：首页 > VUE

vue 实现 oa门户

2026-03-30 08:24:05VUE

Vue 实现 OA 门户的关键步骤

项目结构与基础配置

使用 Vue CLI 或 Vite 初始化项目，推荐目录结构：

src/views 存放页面级组件
src/components 存放公共组件
src/router 配置路由
src/api 封装接口请求
src/store 状态管理（如需 Vuex/Pinia）

安装基础依赖：

npm install vue-router axios element-plus # 按需选择UI库

路由与权限控制

配置动态路由，结合后端权限数据过滤可访问路由：

// router/index.js
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

核心功能模块实现

登录鉴权

// api/auth.js
export const login = (data) => axios.post('/api/login', data)

// 登录成功后存储token
localStorage.setItem('token', response.data.token)

布局组件 使用插槽实现主框架：

<!-- layouts/MainLayout.vue -->
<template>
  <div class="layout">
    <Header />
    <Sidebar :menu-list="menuList" />
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

工作流引擎集成 对接审批流接口：

// api/workflow.js
export const startProcess = (formData) => 
  axios.post('/workflow/start', formData)

典型页面示例

待办事项列表

vue 实现 oa门户

<template>
  <el-table :data="todoList">
    <el-table-column prop="title" label="事项名称" />
    <el-table-column prop="creator" label="发起人" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleProcess(scope.row)">处理</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
const todoList = ref([])

const fetchData = async () => {
  todoList.value = await getTodoList()
}
</script>