当前位置：首页 > VUE

vue实现审批首页设计

2026-01-21 00:57:05VUE

Vue实现审批首页设计

设计审批首页布局

审批首页通常包含待办事项、已办事项、审批统计等模块。使用Vue的组件化开发方式，可以将首页拆分为多个子组件，如待办列表、已办列表、统计卡片等。

<template>
  <div class="approval-home">
    <el-row :gutter="20">
      <el-col :span="6">
        <stat-card title="待审批" :count="pendingCount" icon="el-icon-time"/>
      </el-col>
      <el-col :span="6">
        <stat-card title="已审批" :count="approvedCount" icon="el-icon-check"/>
      </el-col>
    </el-row>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="待办事项" name="pending">
        <approval-list :data="pendingList" @approve="handleApprove"/>
      </el-tab-pane>
      <el-tab-pane label="已办事项" name="approved">
        <approval-list :data="approvedList"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

实现数据获取与状态管理

使用Vuex管理审批数据状态，通过API接口获取审批数据。在created或mounted生命周期钩子中调用数据获取方法。

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      activeTab: 'pending'
    }
  },
  computed: {
    ...mapState('approval', ['pendingList', 'approvedList', 'pendingCount', 'approvedCount'])
  },
  created() {
    this.fetchPendingApprovals()
    this.fetchApprovedApprovals()
  },
  methods: {
    ...mapActions('approval', ['fetchPendingApprovals', 'fetchApprovedApprovals', 'approveRequest']),

    handleApprove(id) {
      this.approveRequest(id).then(() => {
        this.$message.success('审批成功')
      })
    }
  }
}
</script>

样式设计与响应式布局

使用CSS或预处理器如SCSS编写样式，确保在不同设备上都能良好显示。结合Element UI等UI框架的栅格系统实现响应式布局。

.approval-home {
  padding: 20px;

  .stat-card {
    margin-bottom: 20px;
  }

  .el-tabs {
    margin-top: 20px;
  }
}

组件化开发

将可复用的UI元素拆分为独立组件，如审批卡片、统计卡片等，提高代码复用性和可维护性。

<!-- StatCard.vue -->
<template>
  <el-card shadow="hover">
    <div class="stat-content">
      <i :class="icon" class="stat-icon"></i>
      <div class="stat-info">
        <div class="stat-title">{{ title }}</div>
        <div class="stat-count">{{ count }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    title: String,
    count: Number,
    icon: String
  }
}
</script>

交互功能实现

为审批操作添加交互功能，如点击审批按钮触发审批流程，显示审批结果提示等。使用Vue的事件机制实现组件间通信。

// 在ApprovalList组件中
methods: {
  onApprove(id) {
    this.$emit('approve', id)
  }
}

路由配置

如果审批首页是独立页面，需要在Vue路由中配置对应的路由规则。

// router.js
{
  path: '/approval',
  name: 'ApprovalHome',
  component: () => import('./views/ApprovalHome.vue'),
  meta: { requiresAuth: true }
}

权限控制

根据用户角色控制审批功能的访问权限，可以在路由守卫或组件内部进行权限校验。

// 路由守卫示例
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

vue实现审批首页设计