vue实现审批首页设计
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()
}
})
