当前位置：首页 > VUE

vue实现审批首页设计

2026-02-21 16:33:22VUE

Vue 审批首页设计实现

设计思路 审批首页通常包含待办任务、已办任务、统计图表等模块，采用卡片化布局和分栏设计提升用户体验。Vue 的组件化特性适合封装复用模块，配合状态管理工具（如 Vuex 或 Pinia）处理数据流。

核心实现步骤

1. 项目初始化与依赖安装 使用 Vue CLI 或 Vite 创建项目，安装必要依赖：

npm install element-plus axios vue-router pinia chart.js

element-plus：UI 组件库
axios：HTTP 请求
chart.js：数据可视化

2. 路由配置 在 router/index.js 中定义审批相关路由：

const routes = [
  {
    path: '/approval',
    component: () => import('@/views/ApprovalHome.vue'),
    children: [
      { path: 'todo', component: () => import('@/components/TodoList.vue') },
      { path: 'done', component: () => import('@/components/DoneList.vue') }
    ]
  }
]

3. 状态管理（Pinia） 创建 stores/approvalStore.js 管理审批数据：

import { defineStore } from 'pinia'
export const useApprovalStore = defineStore('approval', {
  state: () => ({
    todoList: [],
    doneList: [],
    stats: {}
  }),
  actions: {
    async fetchData() {
      const res = await axios.get('/api/approvals')
      this.todoList = res.data.todo
      this.doneList = res.data.done
    }
  }
})

4. 主页面布局（ApprovalHome.vue） 采用 Element Plus 的布局组件：

<template>
  <el-container>
    <el-header>
      <h1>审批中心</h1>
      <el-menu mode="horizontal" router>
        <el-menu-item index="/approval/todo">待办</el-menu-item>
        <el-menu-item index="/approval/done">已办</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
      <el-row :gutter="20">
        <el-col :span="12">
          <approval-chart :data="stats"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

5. 待办列表组件（TodoList.vue） 实现带分页的表格展示：

<template>
  <el-table :data="store.todoList">
    <el-table-column prop="title" label="审批事项"/>
    <el-table-column prop="applicant" label="申请人"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button @click="handleApprove(row)">批准</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
const store = useApprovalStore()
const handleApprove = (item) => {
  // 调用审批接口
}
</script>

6. 数据可视化组件 使用 Chart.js 封装审批统计图表：

<template>
  <div class="chart-container">
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Chart } from 'chart.js'
const props = defineProps(['data'])
const chartCanvas = ref(null)
onMounted(() => {
  new Chart(chartCanvas.value, {
    type: 'bar',
    data: props.data
  })
})
</script>

7. 样式优化 添加 SCSS 样式增强视觉效果：

.approval-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  &:hover {
    transform: translateY(-5px);
  }
}

关键注意事项