feat(collaboration): 添加完整协同办公模块及设备管理和文档协同页面
- 新增现代化企业协同办公系统，包含概览仪表板、项目管理、任务看板和文档协同 - 使用Vue 3、TypeScript、Nuxt.js及Ant Design Vue实现前端结构和交互 - 设计响应式布局、渐变背景及毛玻璃视觉效果，优化移动端体验 - 创建设备管理页面，实现设备台账、巡检、维修和报警管理 - 新建文档协同页面，支持文档搜索、筛选、分类显示及多种视图切换 - 配置协同办公导航及布局文件，完善模块化和组件化架构 - 修复管理页语法错误，完善演示数据和统计信息展示 - 提供新建、导入、分享、重命名和删除文档等核心操作功能 - 添加设备健康度及维修记录展示模块，方便车间设备管理和维护 - 更新.gitignore忽略输出目录，提升项目环境整洁性
This commit is contained in:
348
app/pages/device.vue
Normal file
348
app/pages/device.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="w-64 fixed h-full text-white flex flex-col sidebar">
|
||||
<div class="p-6 border-b border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<BlockOutlined class="text-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg">DEMO演示系统</h1>
|
||||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 py-6 px-3">
|
||||
<div class="space-y-1">
|
||||
<NuxtLink to="/" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<HomeOutlined class="text-base" /><span>工作台</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/device" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>设备管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/procurement" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ShoppingCartOutlined class="text-base" /><span>采购管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/warehouse" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<InboxOutlined class="text-base" /><span>仓储物流</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/finance" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<WalletOutlined class="text-base" /><span>财务管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/hr" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<TeamOutlined class="text-base" /><span>人力资源</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/office" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ProjectOutlined class="text-base" /><span>协同办公</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-white/10">
|
||||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<UserOutlined class="text-base" /><span>个人信息</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<UserOutlined />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">管理员</p>
|
||||
<p class="text-xs text-white/70">超级管理员</p>
|
||||
</div>
|
||||
<button class="text-white/70 hover:text-white"><LogoutOutlined /></button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 ml-64">
|
||||
<header class="bg-white/85 backdrop-blur-xl sticky top-0 z-50 px-8 py-4 border-b border-white/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="relative w-96">
|
||||
<a-input v-model:value="searchKeyword" placeholder="搜索设备名称、编号、位置..." size="large">
|
||||
<template #prefix><SearchOutlined class="text-gray-400" /></template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<FullscreenOutlined class="text-lg" />
|
||||
</button>
|
||||
<a-badge count="3" :offset="[-2, 2]">
|
||||
<BellOutlined class="text-gray-500 hover:text-purple-600 transition-colors text-lg cursor-pointer" />
|
||||
</a-badge>
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||
<a-avatar class="bg-gradient-to-br from-purple-500 to-pink-500">A</a-avatar>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">Admin</p>
|
||||
<p class="text-xs text-gray-500">超级管理员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-8">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<NuxtLink to="/" class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<ArrowLeftOutlined />
|
||||
</NuxtLink>
|
||||
<h2 class="text-3xl font-bold text-gray-800">设备管理</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">管理设备台账、巡检记录、维修保养及设备报警</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<ToolOutlined class="text-blue-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 4%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">128</h3>
|
||||
<p class="text-gray-500 text-sm">设备总数</p>
|
||||
</div>
|
||||
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<CheckCircleOutlined class="text-green-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium">正常运行</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">115</h3>
|
||||
<p class="text-gray-500 text-sm">运行中</p>
|
||||
</div>
|
||||
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<AlertOutlined class="text-orange-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-red-500 text-sm font-medium">需处理</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">7</h3>
|
||||
<p class="text-gray-500 text-sm">待维修</p>
|
||||
</div>
|
||||
<div class="stat-card purple bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<ClockCircleOutlined class="text-purple-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-blue-500 text-sm font-medium">本月计划</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">6</h3>
|
||||
<p class="text-gray-500 text-sm">维保中</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-4 mb-8 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-3">
|
||||
<a-button type="primary" class="bg-gradient-to-r from-purple-600 to-purple-700 border-0">
|
||||
<PlusOutlined />新增设备
|
||||
</a-button>
|
||||
<a-button><ExportOutlined class="text-green-500" />导出台账</a-button>
|
||||
<a-button><ScanOutlined class="text-blue-500" />扫码查询</a-button>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a-button><FilterOutlined class="text-gray-500" />筛选</a-button>
|
||||
<a-select v-model:value="filterStatus" class="w-32">
|
||||
<a-select-option value="">全部状态</a-select-option>
|
||||
<a-select-option value="running">运行中</a-select-option>
|
||||
<a-select-option value="repair">维修中</a-select-option>
|
||||
<a-select-option value="maintain">保养中</a-select-option>
|
||||
<a-select-option value="idle">闲置</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-2 mb-8 inline-flex shadow-sm">
|
||||
<a-segmented v-model:value="activeTab" :options="tabOptions" />
|
||||
</div>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl overflow-hidden mb-8 shadow-sm">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<UnorderedListOutlined class="text-purple-500" />
|
||||
设备台账
|
||||
<a-tag color="purple">128</a-tag>
|
||||
</h3>
|
||||
</div>
|
||||
<a-table :dataSource="deviceData" :columns="columns" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'device'">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="record.iconBg">
|
||||
<ToolOutlined :class="record.iconColor" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">{{ record.name }}</p>
|
||||
<p class="text-xs text-gray-500">{{ record.code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
<template v-if="record.status === 'running'"><CheckCircleOutlined /> 运行中</template>
|
||||
<template v-else-if="record.status === 'repair'"><AlertOutlined /> 维修中</template>
|
||||
<template v-else-if="record.status === 'maintain'"><ToolOutlined /> 保养中</template>
|
||||
<template v-else-if="record.status === 'idle'"><PauseCircleOutlined /> 闲置</template>
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'health'">
|
||||
<a-progress :percent="record.health" :stroke-color="record.health > 80 ? '#52c41a' : record.health > 60 ? '#faad14' : '#ff4d4f'" size="small" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<a-button type="text" size="small" class="text-blue-600"><EyeOutlined /></a-button>
|
||||
<a-button type="text" size="small" class="text-green-600"><EditOutlined /></a-button>
|
||||
<a-button type="text" size="small" class="text-orange-600"><ToolOutlined /></a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="p-6 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 1-6 条，共 128 条</p>
|
||||
<a-pagination v-model:current="currentPage" :total="128" :pageSize="6" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 维修记录 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<AlertOutlined class="text-red-500" />最近维修记录
|
||||
</h3>
|
||||
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="r in repairRecords" :key="r.id" class="flex items-center gap-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<ToolOutlined class="text-red-600" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">{{ r.device }}</p>
|
||||
<p class="text-xs text-gray-500">{{ r.desc }}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-medium" :class="r.done ? 'text-green-600' : 'text-orange-500'">
|
||||
{{ r.done ? '已完成' : '处理中' }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400">{{ r.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备健康度 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<LineChartOutlined class="text-purple-500" />车间设备健康度
|
||||
</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div v-for="w in workshopHealth" :key="w.name">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">{{ w.name }}</span>
|
||||
<span class="text-sm font-medium text-gray-800">{{ w.health }}%</span>
|
||||
</div>
|
||||
<a-progress :percent="w.health" :stroke-color="w.color" :show-info="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
HomeOutlined, SettingOutlined, ShoppingCartOutlined, InboxOutlined, WalletOutlined,
|
||||
TeamOutlined, ProjectOutlined, UserOutlined, LogoutOutlined, SearchOutlined,
|
||||
FullscreenOutlined, BellOutlined, ArrowLeftOutlined, ArrowUpOutlined,
|
||||
PlusOutlined, ExportOutlined, FilterOutlined, UnorderedListOutlined,
|
||||
CheckCircleOutlined, ClockCircleOutlined, AlertOutlined, PauseCircleOutlined,
|
||||
EyeOutlined, EditOutlined, ToolOutlined, LineChartOutlined, BlockOutlined, ScanOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const currentPage = ref(1)
|
||||
const activeTab = ref('设备台账')
|
||||
const filterStatus = ref('')
|
||||
const tabOptions = ['设备台账', '巡检管理', '维修工单', '保养计划', '设备报警']
|
||||
|
||||
const columns = [
|
||||
{ title: '设备信息', key: 'device' },
|
||||
{ title: '类型', dataIndex: 'type', key: 'type' },
|
||||
{ title: '所在位置', dataIndex: 'location', key: 'location' },
|
||||
{ title: '状态', key: 'status' },
|
||||
{ title: '健康度', key: 'health', width: 160 },
|
||||
{ title: '下次保养', dataIndex: 'nextMaintain', key: 'nextMaintain' },
|
||||
{ title: '操作', key: 'action', align: 'center' },
|
||||
]
|
||||
|
||||
const deviceData = [
|
||||
{ key: '1', name: '数控车床 CNC-001', code: 'SB-2021-001', type: '加工设备', location: '1号车间A区', status: 'running', health: 92, nextMaintain: '2026-05-15', iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
|
||||
{ key: '2', name: '注塑机 ZS-008', code: 'ZS-2020-008', type: '生产设备', location: '2号车间B区', status: 'repair', health: 45, nextMaintain: '维修中', iconBg: 'bg-red-100', iconColor: 'text-red-600' },
|
||||
{ key: '3', name: '空压机 KY-003', code: 'KY-2022-003', type: '辅助设备', location: '动力房', status: 'maintain', health: 78, nextMaintain: '保养中', iconBg: 'bg-orange-100', iconColor: 'text-orange-600' },
|
||||
{ key: '4', name: '激光切割机 JG-002', code: 'JG-2023-002', type: '加工设备', location: '3号车间', status: 'running', health: 88, nextMaintain: '2026-04-30', iconBg: 'bg-green-100', iconColor: 'text-green-600' },
|
||||
{ key: '5', name: '传送带 CS-012', code: 'CS-2019-012', type: '物流设备', location: '仓储区', status: 'idle', health: 65, nextMaintain: '2026-04-20', iconBg: 'bg-gray-100', iconColor: 'text-gray-600' },
|
||||
{ key: '6', name: '焊接机器人 HR-005', code: 'HR-2023-005', type: '自动化设备', location: '4号车间', status: 'running', health: 97, nextMaintain: '2026-06-01', iconBg: 'bg-purple-100', iconColor: 'text-purple-600' },
|
||||
]
|
||||
|
||||
const repairRecords = [
|
||||
{ id: 1, device: '注塑机 ZS-008', desc: '液压系统泄漏，更换密封件', done: false, date: '2026-04-08' },
|
||||
{ id: 2, device: '空压机 KY-003', desc: '定期保养，更换滤芯', done: false, date: '2026-04-07' },
|
||||
{ id: 3, device: '传送带 CS-011', desc: '皮带磨损，已更换新品', done: true, date: '2026-04-05' },
|
||||
{ id: 4, device: 'CNC-003 主轴', desc: '主轴轴承异响，已更换', done: true, date: '2026-04-03' },
|
||||
]
|
||||
|
||||
const workshopHealth = [
|
||||
{ name: '1号车间', health: 95, color: { from: '#52c41a', to: '#38ef7d' } },
|
||||
{ name: '2号车间', health: 72, color: { from: '#faad14', to: '#ffd666' } },
|
||||
{ name: '3号车间', health: 88, color: { from: '#667eea', to: '#764ba2' } },
|
||||
{ name: '4号车间', health: 96, color: { from: '#11998e', to: '#38ef7d' } },
|
||||
{ name: '动力区', health: 61, color: { from: '#f5576c', to: '#f093fb' } },
|
||||
]
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const m: Record<string, string> = { running: 'success', repair: 'error', maintain: 'warning', idle: 'default' }
|
||||
return m[status] || 'default'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar { background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
|
||||
.sidebar-item { color: white; }
|
||||
.sidebar-item:hover, .sidebar-item.active { background: rgba(255,255,255,0.2); }
|
||||
.card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
|
||||
.stat-card { position: relative; overflow: hidden; }
|
||||
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||||
</style>
|
||||
325
app/pages/finance.vue
Normal file
325
app/pages/finance.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<aside class="w-64 fixed h-full text-white flex flex-col sidebar">
|
||||
<div class="p-6 border-b border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<BlockOutlined class="text-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg">DEMO演示系统</h1>
|
||||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 py-6 px-3">
|
||||
<div class="space-y-1">
|
||||
<NuxtLink to="/" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<HomeOutlined class="text-base" /><span>工作台</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/device" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>设备管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/procurement" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ShoppingCartOutlined class="text-base" /><span>采购管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/warehouse" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<InboxOutlined class="text-base" /><span>仓储物流</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/finance" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<WalletOutlined class="text-base" /><span>财务管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/hr" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<TeamOutlined class="text-base" /><span>人力资源</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/office" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ProjectOutlined class="text-base" /><span>协同办公</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-white/10">
|
||||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<UserOutlined class="text-base" /><span>个人信息</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center"><UserOutlined /></div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">管理员</p>
|
||||
<p class="text-xs text-white/70">超级管理员</p>
|
||||
</div>
|
||||
<button class="text-white/70 hover:text-white"><LogoutOutlined /></button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 ml-64">
|
||||
<header class="bg-white/85 backdrop-blur-xl sticky top-0 z-50 px-8 py-4 border-b border-white/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="relative w-96">
|
||||
<a-input v-model:value="searchKeyword" placeholder="搜索凭证、账单、收支..." size="large">
|
||||
<template #prefix><SearchOutlined class="text-gray-400" /></template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<FullscreenOutlined class="text-lg" />
|
||||
</button>
|
||||
<a-badge count="1" :offset="[-2, 2]">
|
||||
<BellOutlined class="text-gray-500 hover:text-purple-600 transition-colors text-lg cursor-pointer" />
|
||||
</a-badge>
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||
<a-avatar class="bg-gradient-to-br from-purple-500 to-pink-500">A</a-avatar>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">Admin</p>
|
||||
<p class="text-xs text-gray-500">超级管理员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-8">
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<NuxtLink to="/" class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<ArrowLeftOutlined />
|
||||
</NuxtLink>
|
||||
<h2 class="text-3xl font-bold text-gray-800">财务管理</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">管理收支账单、财务报表、费用报销及资金流水</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<RiseOutlined class="text-blue-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 18%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥328<span class="text-lg">万</span></h3>
|
||||
<p class="text-gray-500 text-sm">本月收入</p>
|
||||
</div>
|
||||
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<FallOutlined class="text-orange-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-red-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 8%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥238<span class="text-lg">万</span></h3>
|
||||
<p class="text-gray-500 text-sm">本月支出</p>
|
||||
</div>
|
||||
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<DollarOutlined class="text-green-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium">净利润</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥90<span class="text-lg">万</span></h3>
|
||||
<p class="text-gray-500 text-sm">本月利润</p>
|
||||
</div>
|
||||
<div class="stat-card purple bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<ClockCircleOutlined class="text-purple-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-orange-500 text-sm font-medium">待处理</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">15</h3>
|
||||
<p class="text-gray-500 text-sm">待审批报销</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-4 mb-8 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-3">
|
||||
<a-button type="primary" class="bg-gradient-to-r from-purple-600 to-purple-700 border-0">
|
||||
<PlusOutlined />新建凭证
|
||||
</a-button>
|
||||
<a-button><FormOutlined class="text-blue-500" />费用报销</a-button>
|
||||
<a-button><FileTextOutlined class="text-green-500" />财务报表</a-button>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a-button><CalendarOutlined class="text-gray-500" />2026年4月</a-button>
|
||||
<a-button><ExportOutlined class="text-green-500" />导出</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-2 mb-8 inline-flex shadow-sm">
|
||||
<a-segmented v-model:value="activeTab" :options="tabOptions" />
|
||||
</div>
|
||||
|
||||
<!-- 流水列表 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl overflow-hidden mb-8 shadow-sm">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<UnorderedListOutlined class="text-purple-500" />
|
||||
资金流水
|
||||
<a-tag color="purple">本月 86 笔</a-tag>
|
||||
</h3>
|
||||
<a-input-search v-model:value="listSearchKeyword" placeholder="搜索摘要、单号..." class="w-64" />
|
||||
</div>
|
||||
</div>
|
||||
<a-table :dataSource="billData" :columns="columns" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="record.type === 'income' ? 'success' : 'error'">
|
||||
{{ record.type === 'income' ? '收入' : '支出' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'amount'">
|
||||
<span :class="record.type === 'income' ? 'text-green-600 font-bold' : 'text-red-600 font-bold'">
|
||||
{{ record.type === 'income' ? '+' : '-' }}{{ record.amount }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'done' ? 'success' : 'warning'">
|
||||
{{ record.status === 'done' ? '已确认' : '待审批' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<a-button type="text" size="small" class="text-blue-600"><EyeOutlined /></a-button>
|
||||
<a-button type="text" size="small" class="text-green-600"><EditOutlined /></a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="p-6 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 1-5 条，共 86 条</p>
|
||||
<a-pagination v-model:current="currentPage" :total="86" :pageSize="5" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 收支构成 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<PieChartOutlined class="text-blue-500" />支出构成
|
||||
</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div v-for="item in expenseBreakdown" :key="item.name">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">{{ item.name }}</span>
|
||||
<span class="text-sm font-medium text-gray-800">{{ item.amount }} ({{ item.percent }}%)</span>
|
||||
</div>
|
||||
<a-progress :percent="item.percent" :stroke-color="item.color" :show-info="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待审批报销 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<FileTextOutlined class="text-orange-500" />待审批报销
|
||||
</h3>
|
||||
<a-badge count="15" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="r in pendingReimburse" :key="r.id" class="flex items-center gap-4 p-3 bg-orange-50 rounded-xl border border-orange-100">
|
||||
<a-avatar :style="{ background: r.avatarBg }">{{ r.name[0] }}</a-avatar>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">{{ r.name }} <span class="text-gray-500 text-sm font-normal">- {{ r.category }}</span></p>
|
||||
<p class="text-xs text-gray-500">{{ r.desc }}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-bold text-red-600">¥{{ r.amount }}</p>
|
||||
<div class="flex gap-1 mt-1">
|
||||
<a-button type="primary" size="small" class="text-xs">通过</a-button>
|
||||
<a-button size="small" class="text-xs" danger>拒绝</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
HomeOutlined, SettingOutlined, ShoppingCartOutlined, InboxOutlined, WalletOutlined,
|
||||
TeamOutlined, ProjectOutlined, UserOutlined, LogoutOutlined, SearchOutlined,
|
||||
FullscreenOutlined, BellOutlined, ArrowLeftOutlined, ArrowUpOutlined,
|
||||
PlusOutlined, ExportOutlined, FilterOutlined, UnorderedListOutlined, CalendarOutlined,
|
||||
DollarOutlined, ClockCircleOutlined, EyeOutlined, EditOutlined,
|
||||
RiseOutlined, FallOutlined, PieChartOutlined, FileTextOutlined, FormOutlined,
|
||||
BlockOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const listSearchKeyword = ref('')
|
||||
const currentPage = ref(1)
|
||||
const activeTab = ref('资金流水')
|
||||
const tabOptions = ['资金流水', '费用报销', '应收账款', '应付账款', '财务报表']
|
||||
|
||||
const columns = [
|
||||
{ title: '凭证编号', dataIndex: 'code', key: 'code' },
|
||||
{ title: '类型', key: 'type' },
|
||||
{ title: '摘要', dataIndex: 'desc', key: 'desc' },
|
||||
{ title: '金额', key: 'amount' },
|
||||
{ title: '账户', dataIndex: 'account', key: 'account' },
|
||||
{ title: '日期', dataIndex: 'date', key: 'date' },
|
||||
{ title: '状态', key: 'status' },
|
||||
{ title: '操作', key: 'action', align: 'center' },
|
||||
]
|
||||
|
||||
const billData = [
|
||||
{ key: '1', code: 'CW-2026-0409-001', type: 'income', desc: '客户货款回收 - 深圳华强公司', amount: '¥58,000', account: '工商银行基本户', date: '2026-04-09', status: 'done' },
|
||||
{ key: '2', code: 'CW-2026-0409-002', type: 'expense', desc: '采购货款支付 - 钢材原料', amount: '¥128,000', account: '工商银行基本户', date: '2026-04-09', status: 'pending' },
|
||||
{ key: '3', code: 'CW-2026-0408-005', type: 'income', desc: '产品销售款 - 广州客户', amount: '¥86,500', account: '建设银行账户', date: '2026-04-08', status: 'done' },
|
||||
{ key: '4', code: 'CW-2026-0408-004', type: 'expense', desc: '员工薪资发放 - 4月工资', amount: '¥156,000', account: '工商银行基本户', date: '2026-04-08', status: 'done' },
|
||||
{ key: '5', code: 'CW-2026-0407-008', type: 'expense', desc: '办公室租金 - 4月', amount: '¥25,000', account: '工商银行基本户', date: '2026-04-07', status: 'done' },
|
||||
]
|
||||
|
||||
const expenseBreakdown = [
|
||||
{ name: '人工成本', amount: '¥156万', percent: 65, color: { from: '#667eea', to: '#764ba2' } },
|
||||
{ name: '原材料采购', amount: '¥45万', percent: 19, color: { from: '#11998e', to: '#38ef7d' } },
|
||||
{ name: '运营费用', amount: '¥25万', percent: 11, color: { from: '#f5576c', to: '#f093fb' } },
|
||||
{ name: '其他支出', amount: '¥12万', percent: 5, color: { from: '#ffecd2', to: '#fcb69f' } },
|
||||
]
|
||||
|
||||
const pendingReimburse = [
|
||||
{ id: 1, name: '张三', category: '差旅费', desc: '出差北京，3天往返', amount: '2,580', avatarBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ id: 2, name: '李四', category: '餐饮招待', desc: '客户宴请，4人', amount: '1,280', avatarBg: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)' },
|
||||
{ id: 3, name: '王五', category: '办公用品', desc: '文具及耗材采购', amount: '480', avatarBg: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar { background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
|
||||
.sidebar-item { color: white; }
|
||||
.sidebar-item:hover, .sidebar-item.active { background: rgba(255,255,255,0.2); }
|
||||
.card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
|
||||
.stat-card { position: relative; overflow: hidden; }
|
||||
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||||
</style>
|
||||
1307
app/pages/oa/documents.vue
Normal file
1307
app/pages/oa/documents.vue
Normal file
File diff suppressed because it is too large
Load Diff
554
app/pages/oa/index.vue
Normal file
554
app/pages/oa/index.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<div class="oa-home">
|
||||
<!-- 头部介绍 -->
|
||||
<div class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">协同办公系统</h1>
|
||||
<p class="hero-description">
|
||||
企业级团队协作平台，集项目管理、任务跟踪、文档协同于一体
|
||||
</p>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">2000+</div>
|
||||
<div class="stat-label">企业使用</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">85%</div>
|
||||
<div class="stat-label">协作效率提升</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">99.9%</div>
|
||||
<div class="stat-label">系统可用率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<span class="image-placeholder">📊</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能模块介绍 -->
|
||||
<div class="features-section">
|
||||
<h2 class="section-title">核心功能模块</h2>
|
||||
<p class="section-description">全面覆盖企业团队协作需求</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div
|
||||
v-for="feature in features"
|
||||
:key="feature.id"
|
||||
class="feature-card"
|
||||
@click="navigateTo(feature.path)"
|
||||
>
|
||||
<div class="feature-icon" :style="{ backgroundColor: feature.color + '10', color: feature.color }">
|
||||
{{ feature.icon }}
|
||||
</div>
|
||||
<h3 class="feature-title">{{ feature.title }}</h3>
|
||||
<p class="feature-description">{{ feature.description }}</p>
|
||||
<div class="feature-tags">
|
||||
<span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="feature-action">
|
||||
<a-typography-link>立即体验 →</a-typography-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用流程演示 -->
|
||||
<div class="workflow-section">
|
||||
<h2 class="section-title">典型工作流程示例</h2>
|
||||
<p class="section-description">从立项到交付的一体化管理</p>
|
||||
|
||||
<div class="workflow-steps">
|
||||
<div class="workflow-step" v-for="(step, index) in workflowSteps" :key="index">
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-content">
|
||||
<h4>{{ step.title }}</h4>
|
||||
<p>{{ step.description }}</p>
|
||||
<div class="step-modules">
|
||||
<a-tag
|
||||
v-for="module in step.modules"
|
||||
:key="module"
|
||||
color="#1890ff"
|
||||
@click="navigateToModule(module)"
|
||||
>
|
||||
{{ getModuleLabel(module) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 立即开始按钮 -->
|
||||
<div class="cta-section">
|
||||
<div class="cta-content">
|
||||
<h3 class="cta-title">立即开始您的协同办公之旅</h3>
|
||||
<p class="cta-description">
|
||||
已有数据？点击任意功能模块直接进入演示，或从概览仪表板开始
|
||||
</p>
|
||||
<a-space>
|
||||
<a-button type="primary" size="large" @click="navigateTo('/oa')">
|
||||
进入概览仪表板
|
||||
</a-button>
|
||||
<a-button size="large" @click="navigateTo('/oa/projects')">
|
||||
直接体验项目管理
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
// 功能模块数据
|
||||
const features = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '📊',
|
||||
title: '概览仪表板',
|
||||
description: '团队工作状态全局概览，快速了解各项进度和统计',
|
||||
tags: ['数据统计', '快捷操作', '实时通知'],
|
||||
path: '/oa',
|
||||
color: '#1890ff'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '🚀',
|
||||
title: '项目管理',
|
||||
description: '完整项目生命周期管理，从规划到交付全过程跟踪',
|
||||
tags: ['进度跟踪', '团队协作', '风险管理'],
|
||||
path: '/oa/projects',
|
||||
color: '#52c41a'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '📋',
|
||||
title: '任务看板',
|
||||
description: '可视化任务管理，拖拽操作，实时同步团队成员任务状态',
|
||||
tags: ['看板管理', '优先级管理', '进度跟踪'],
|
||||
path: '/oa/tasks',
|
||||
color: '#722ed1'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '📄',
|
||||
title: '文档协同',
|
||||
description: '多人实时协同编辑，版本管理，企业知识库建设',
|
||||
tags: ['实时协作', '版本控制', '权限管理'],
|
||||
path: '/oa/documents',
|
||||
color: '#fa8c16'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '🗓️',
|
||||
title: '会议管理',
|
||||
description: '会议安排、纪要管理、任务分派一体化管理',
|
||||
tags: ['日程管理', '会议纪要', '决议跟踪'],
|
||||
path: '/oa/meetings',
|
||||
color: '#f5222d'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: '✅',
|
||||
title: '审批流程',
|
||||
description: '自定义审批流程，多级审批，移动端快速处理',
|
||||
tags: ['流程设计', '移动审批', '电子签章'],
|
||||
path: '/oa/approvals',
|
||||
color: '#faad14'
|
||||
}
|
||||
]
|
||||
|
||||
// 工作流程步骤
|
||||
const workflowSteps = [
|
||||
{
|
||||
title: '项目立项与规划',
|
||||
description: '创建项目，明确目标，制定计划，分配资源',
|
||||
modules: ['projects', 'teams']
|
||||
},
|
||||
{
|
||||
title: '任务分解与分配',
|
||||
description: '将项目目标分解为具体任务，分配给团队成员',
|
||||
modules: ['tasks', 'teams']
|
||||
},
|
||||
{
|
||||
title: '文档协作与共享',
|
||||
description: '团队协同编写文档，共享资源和知识',
|
||||
modules: ['documents', 'chat']
|
||||
},
|
||||
{
|
||||
title: '进度跟踪与会议',
|
||||
description: '定期会议讨论进度，调整计划，解决问题',
|
||||
modules: ['meetings', 'tasks', 'calendar']
|
||||
},
|
||||
{
|
||||
title: '成果交付与审批',
|
||||
description: '交付成果，进行质量审查和最终审批',
|
||||
modules: ['approvals', 'documents']
|
||||
},
|
||||
{
|
||||
title: '回顾总结与归档',
|
||||
description: '项目复盘，总结经验，知识归档',
|
||||
modules: ['documents', 'projects']
|
||||
}
|
||||
]
|
||||
|
||||
// 功能模块对应关系
|
||||
const moduleLabels: Record<string, string> = {
|
||||
'projects': '项目管理',
|
||||
'tasks': '任务看板',
|
||||
'documents': '文档协同',
|
||||
'meetings': '会议管理',
|
||||
'approvals': '审批流程',
|
||||
'teams': '团队协作',
|
||||
'calendar': '日程日历',
|
||||
'chat': '即时通讯'
|
||||
}
|
||||
|
||||
// 方法
|
||||
function navigateToModule(module: string) {
|
||||
const path = `/oa/${module}`
|
||||
navigateTo(path)
|
||||
}
|
||||
|
||||
function getModuleLabel(module: string) {
|
||||
return moduleLabels[module] || module
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.oa-home {
|
||||
min-height: calc(100vh - 140px);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
/* Hero 区域 */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
margin-bottom: 64px;
|
||||
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
color: #1a3353;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 18px;
|
||||
color: rgba(26, 51, 83, 0.8);
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: rgba(26, 51, 83, 0.6);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
flex-shrink: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 16px 32px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
/* 功能模块区域 */
|
||||
.features-section {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1a3353;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: rgba(26, 51, 83, 0.6);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a3353;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
font-size: 14px;
|
||||
color: rgba(26, 51, 83, 0.7);
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.feature-action {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* 工作流程区域 */
|
||||
.workflow-section {
|
||||
margin-bottom: 64px;
|
||||
background: #fafafa;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.workflow-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-content h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a3353;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
font-size: 14px;
|
||||
color: rgba(26, 51, 83, 0.7);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.step-modules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-modules :deep(.ant-tag) {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.step-modules :deep(.ant-tag):hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* CTA 区域 */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-description {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 32px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)) {
|
||||
background: white;
|
||||
border-color: white;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)):hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.cta-section :deep(.ant-btn-background-ghost) {
|
||||
background: transparent;
|
||||
border-color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-section :deep(.ant-btn-background-ghost):hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-modules {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
327
app/pages/office.vue
Normal file
327
app/pages/office.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<aside class="w-64 fixed h-full text-white flex flex-col sidebar">
|
||||
<div class="p-6 border-b border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<BlockOutlined class="text-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg">DEMO演示系统</h1>
|
||||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 py-6 px-3">
|
||||
<div class="space-y-1">
|
||||
<NuxtLink to="/" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<HomeOutlined class="text-base" /><span>工作台</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/device" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>设备管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/procurement" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ShoppingCartOutlined class="text-base" /><span>采购管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/warehouse" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<InboxOutlined class="text-base" /><span>仓储物流</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/finance" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<WalletOutlined class="text-base" /><span>财务管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/hr" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<TeamOutlined class="text-base" /><span>人力资源</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/office" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ProjectOutlined class="text-base" /><span>协同办公</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-white/10">
|
||||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<UserOutlined class="text-base" /><span>个人信息</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center"><UserOutlined /></div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">管理员</p>
|
||||
<p class="text-xs text-white/70">超级管理员</p>
|
||||
</div>
|
||||
<button class="text-white/70 hover:text-white"><LogoutOutlined /></button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 ml-64">
|
||||
<header class="bg-white/85 backdrop-blur-xl sticky top-0 z-50 px-8 py-4 border-b border-white/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="relative w-96">
|
||||
<a-input v-model:value="searchKeyword" placeholder="搜索任务、文档、公告..." size="large">
|
||||
<template #prefix><SearchOutlined class="text-gray-400" /></template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<FullscreenOutlined class="text-lg" />
|
||||
</button>
|
||||
<a-badge count="8" :offset="[-2, 2]">
|
||||
<BellOutlined class="text-gray-500 hover:text-purple-600 transition-colors text-lg cursor-pointer" />
|
||||
</a-badge>
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||
<a-avatar class="bg-gradient-to-br from-purple-500 to-pink-500">A</a-avatar>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">Admin</p>
|
||||
<p class="text-xs text-gray-500">超级管理员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-8">
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<NuxtLink to="/" class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<ArrowLeftOutlined />
|
||||
</NuxtLink>
|
||||
<h2 class="text-3xl font-bold text-gray-800">协同办公</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">管理工作任务、审批流程、企业公告及团队日历</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<CheckSquareOutlined class="text-blue-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium">本周</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">24</h3>
|
||||
<p class="text-gray-500 text-sm">待完成任务</p>
|
||||
</div>
|
||||
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<AuditOutlined class="text-orange-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-red-500 text-sm font-medium">紧急</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">8</h3>
|
||||
<p class="text-gray-500 text-sm">待我审批</p>
|
||||
</div>
|
||||
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<FileTextOutlined class="text-green-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium">本月</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">56</h3>
|
||||
<p class="text-gray-500 text-sm">共享文档</p>
|
||||
</div>
|
||||
<div class="stat-card purple bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<CalendarOutlined class="text-purple-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-blue-500 text-sm font-medium">今日</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">3</h3>
|
||||
<p class="text-gray-500 text-sm">今日会议</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-4 mb-8 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-3">
|
||||
<a-button type="primary" class="bg-gradient-to-r from-purple-600 to-purple-700 border-0">
|
||||
<PlusOutlined />新建任务
|
||||
</a-button>
|
||||
<a-button><FileAddOutlined class="text-blue-500" />新建文档</a-button>
|
||||
<a-button><SoundOutlined class="text-orange-500" />发布公告</a-button>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a-button><FilterOutlined class="text-gray-500" />筛选</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-2 mb-8 inline-flex shadow-sm">
|
||||
<a-segmented v-model:value="activeTab" :options="tabOptions" />
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl overflow-hidden mb-8 shadow-sm">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<CheckSquareOutlined class="text-purple-500" />
|
||||
我的任务
|
||||
<a-tag color="purple">24</a-tag>
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<a-tag
|
||||
v-for="f in taskFilters"
|
||||
:key="f.key"
|
||||
:color="activeFilter === f.key ? 'purple' : 'default'"
|
||||
class="cursor-pointer"
|
||||
@click="activeFilter = f.key"
|
||||
>{{ f.label }}</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 space-y-3">
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
class="task-item flex items-center gap-4 p-4 bg-gray-50 rounded-xl hover:bg-purple-50 transition-all cursor-pointer"
|
||||
>
|
||||
<a-checkbox :checked="task.done" class="flex-shrink-0" />
|
||||
<div class="flex-1">
|
||||
<p :class="['font-medium', task.done ? 'line-through text-gray-400' : 'text-gray-800']">{{ task.title }}</p>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="text-xs text-gray-500"><UserOutlined class="mr-1" />{{ task.assignee }}</span>
|
||||
<span class="text-xs text-gray-500"><CalendarOutlined class="mr-1" />{{ task.deadline }}</span>
|
||||
<span class="text-xs text-gray-500"><FolderOutlined class="mr-1" />{{ task.project }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-tag :color="getPriorityColor(task.priority)">{{ task.priorityText }}</a-tag>
|
||||
<a-tag :color="getTaskStatusColor(task.status)">{{ task.statusText }}</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 5 条，共 24 条</p>
|
||||
<a-pagination v-model:current="currentPage" :total="24" :pageSize="5" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 审批流程 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<AuditOutlined class="text-orange-500" />待我审批
|
||||
</h3>
|
||||
<a-badge count="8" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="a in approvals" :key="a.id" class="flex items-center gap-4 p-3 bg-orange-50 rounded-xl border border-orange-100">
|
||||
<a-avatar :style="{ background: a.avatarBg }">{{ a.submitter[0] }}</a-avatar>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">{{ a.title }}</p>
|
||||
<p class="text-xs text-gray-500">{{ a.submitter }} 提交 · {{ a.time }}</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<a-button type="primary" size="small">通过</a-button>
|
||||
<a-button size="small" danger>拒绝</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最新公告 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<SoundOutlined class="text-red-500" />企业公告
|
||||
</h3>
|
||||
<button class="text-purple-600 text-sm font-medium hover:underline">全部公告</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
:class="['p-4 rounded-xl border-l-4 cursor-pointer hover:scale-[1.02] transition-transform', notice.bgColor, notice.borderColor]"
|
||||
>
|
||||
<h4 class="font-medium text-gray-800 mb-1">{{ notice.title }}</h4>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span><UserOutlined class="mr-1" />{{ notice.author }}</span>
|
||||
<span><ClockCircleOutlined class="mr-1" />{{ notice.date }}</span>
|
||||
<span><EyeOutlined class="mr-1" />{{ notice.views }} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
HomeOutlined, SettingOutlined, ShoppingCartOutlined, InboxOutlined, WalletOutlined,
|
||||
TeamOutlined, ProjectOutlined, UserOutlined, LogoutOutlined, SearchOutlined,
|
||||
FullscreenOutlined, BellOutlined, ArrowLeftOutlined,
|
||||
PlusOutlined, FilterOutlined, CalendarOutlined,
|
||||
CheckSquareOutlined, AuditOutlined, FileTextOutlined, SoundOutlined,
|
||||
EyeOutlined, ClockCircleOutlined, FolderOutlined, BlockOutlined, FileAddOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const currentPage = ref(1)
|
||||
const activeTab = ref('任务管理')
|
||||
const activeFilter = ref('all')
|
||||
const tabOptions = ['任务管理', '审批流程', '共享文档', '企业公告', '团队日历']
|
||||
|
||||
const taskFilters = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'urgent', label: '紧急' },
|
||||
{ key: 'today', label: '今日截止' },
|
||||
{ key: 'done', label: '已完成' },
|
||||
]
|
||||
|
||||
const tasks = [
|
||||
{ id: 1, title: '完成Q2产品需求文档评审', assignee: '张三', deadline: '2026-04-10', project: '产品迭代', priority: 'high', priorityText: '紧急', status: 'pending', statusText: '进行中', done: false },
|
||||
{ id: 2, title: '优化设备管理模块性能', assignee: '李四', deadline: '2026-04-12', project: '系统优化', priority: 'medium', priorityText: '普通', status: 'pending', statusText: '进行中', done: false },
|
||||
{ id: 3, title: '采购流程说明文档整理', assignee: '王五', deadline: '2026-04-09', project: '文档管理', priority: 'high', priorityText: '紧急', status: 'overdue', statusText: '已逾期', done: false },
|
||||
{ id: 4, title: '完成4月份财务月报', assignee: '赵六', deadline: '2026-04-15', project: '财务管理', priority: 'medium', priorityText: '普通', status: 'pending', statusText: '未开始', done: false },
|
||||
{ id: 5, title: '新员工入职材料归档', assignee: '孙七', deadline: '2026-04-08', project: '人事管理', priority: 'low', priorityText: '低', status: 'done', statusText: '已完成', done: true },
|
||||
]
|
||||
|
||||
const approvals = [
|
||||
{ id: 1, title: '差旅费报销申请 ¥2,580', submitter: '张三', time: '2小时前', avatarBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ id: 2, title: '加班申请 - 本周六', submitter: '李四', time: '4小时前', avatarBg: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)' },
|
||||
{ id: 3, title: '外出采购审批', submitter: '王五', time: '昨天', avatarBg: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)' },
|
||||
]
|
||||
|
||||
const notices = [
|
||||
{ id: 1, title: '关于清明节放假安排的通知', author: '人事行政部', date: '2026-04-01', views: '1,258', bgColor: 'bg-red-50', borderColor: 'border-red-500' },
|
||||
{ id: 2, title: '2026年第一季度经营总结会议通知', author: '总经办', date: '2026-03-28', views: '986', bgColor: 'bg-blue-50', borderColor: 'border-blue-500' },
|
||||
{ id: 3, title: '新版ERP系统正式上线公告', author: '技术部', date: '2026-03-25', views: '1,056', bgColor: 'bg-green-50', borderColor: 'border-green-500' },
|
||||
]
|
||||
|
||||
const getPriorityColor = (p: string) => ({ high: 'error', medium: 'warning', low: 'default' }[p] || 'default')
|
||||
const getTaskStatusColor = (s: string) => ({ pending: 'processing', done: 'success', overdue: 'error' }[s] || 'default')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar { background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
|
||||
.sidebar-item { color: white; }
|
||||
.sidebar-item:hover, .sidebar-item.active { background: rgba(255,255,255,0.2); }
|
||||
.card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
|
||||
.stat-card { position: relative; overflow: hidden; }
|
||||
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||||
.task-item { transition: all 0.2s ease; }
|
||||
</style>
|
||||
328
app/pages/warehouse.vue
Normal file
328
app/pages/warehouse.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<aside class="w-64 fixed h-full text-white flex flex-col sidebar">
|
||||
<div class="p-6 border-b border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<BlockOutlined class="text-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg">DEMO演示系统</h1>
|
||||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 py-6 px-3">
|
||||
<div class="space-y-1">
|
||||
<NuxtLink to="/" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<HomeOutlined class="text-base" /><span>工作台</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/device" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>设备管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/procurement" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ShoppingCartOutlined class="text-base" /><span>采购管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/warehouse" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<InboxOutlined class="text-base" /><span>仓储物流</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/finance" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<WalletOutlined class="text-base" /><span>财务管理</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/hr" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<TeamOutlined class="text-base" /><span>人力资源</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/office" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<ProjectOutlined class="text-base" /><span>协同办公</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-white/10">
|
||||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<UserOutlined class="text-base" /><span>个人信息</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||
<SettingOutlined class="text-base" /><span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center"><UserOutlined /></div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">管理员</p>
|
||||
<p class="text-xs text-white/70">超级管理员</p>
|
||||
</div>
|
||||
<button class="text-white/70 hover:text-white"><LogoutOutlined /></button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 ml-64">
|
||||
<header class="bg-white/85 backdrop-blur-xl sticky top-0 z-50 px-8 py-4 border-b border-white/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="relative w-96">
|
||||
<a-input v-model:value="searchKeyword" placeholder="搜索物料名称、编码、位置..." size="large">
|
||||
<template #prefix><SearchOutlined class="text-gray-400" /></template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<FullscreenOutlined class="text-lg" />
|
||||
</button>
|
||||
<a-badge count="2" :offset="[-2, 2]">
|
||||
<BellOutlined class="text-gray-500 hover:text-purple-600 transition-colors text-lg cursor-pointer" />
|
||||
</a-badge>
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||
<a-avatar class="bg-gradient-to-br from-purple-500 to-pink-500">A</a-avatar>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">Admin</p>
|
||||
<p class="text-xs text-gray-500">超级管理员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-8">
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<NuxtLink to="/" class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<ArrowLeftOutlined />
|
||||
</NuxtLink>
|
||||
<h2 class="text-3xl font-bold text-gray-800">仓储物流</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">管理物料入库、出库、库存盘点及物流配送</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<InboxOutlined class="text-blue-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 6%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">5,230</h3>
|
||||
<p class="text-gray-500 text-sm">库存物料种类</p>
|
||||
</div>
|
||||
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<ImportOutlined class="text-green-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 15%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">48</h3>
|
||||
<p class="text-gray-500 text-sm">本月入库单</p>
|
||||
</div>
|
||||
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<ExportOutlined class="text-orange-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 9%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">62</h3>
|
||||
<p class="text-gray-500 text-sm">本月出库单</p>
|
||||
</div>
|
||||
<div class="stat-card red bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
|
||||
<WarningOutlined class="text-red-600 text-xl" />
|
||||
</div>
|
||||
<span class="text-red-500 text-sm font-medium">需补货</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">12</h3>
|
||||
<p class="text-gray-500 text-sm">库存预警</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-4 mb-8 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-3">
|
||||
<a-button type="primary" class="bg-gradient-to-r from-purple-600 to-purple-700 border-0">
|
||||
<PlusOutlined />新建入库单
|
||||
</a-button>
|
||||
<a-button><ExportOutlined class="text-orange-500" />新建出库单</a-button>
|
||||
<a-button><AuditOutlined class="text-blue-500" />库存盘点</a-button>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a-button><FilterOutlined class="text-gray-500" />筛选</a-button>
|
||||
<a-button><ExportOutlined class="text-green-500" />导出报表</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-2 mb-8 inline-flex shadow-sm">
|
||||
<a-segmented v-model:value="activeTab" :options="tabOptions" />
|
||||
</div>
|
||||
|
||||
<!-- 库存列表 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl overflow-hidden mb-8 shadow-sm">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<UnorderedListOutlined class="text-purple-500" />
|
||||
物料库存列表
|
||||
<a-tag color="purple">5,230</a-tag>
|
||||
</h3>
|
||||
<a-input-search v-model:value="listSearchKeyword" placeholder="搜索物料编码、名称..." class="w-64" />
|
||||
</div>
|
||||
</div>
|
||||
<a-table :dataSource="stockData" :columns="columns" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'material'">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">{{ record.name }}</p>
|
||||
<p class="text-xs text-gray-500">{{ record.code }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'stock'">
|
||||
<span :class="record.qty < record.minQty ? 'text-red-600 font-bold' : 'text-gray-800'">
|
||||
{{ record.qty }} {{ record.unit }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'warning'">
|
||||
<a-tag v-if="record.qty < record.minQty" color="error"><WarningOutlined /> 库存不足</a-tag>
|
||||
<a-tag v-else color="success"><CheckCircleOutlined /> 正常</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<a-button type="text" size="small" class="text-blue-600"><EyeOutlined /></a-button>
|
||||
<a-button type="text" size="small" class="text-green-600"><ImportOutlined /></a-button>
|
||||
<a-button type="text" size="small" class="text-orange-600"><ExportOutlined /></a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="p-6 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">显示 1-6 条，共 5,230 条</p>
|
||||
<a-pagination v-model:current="currentPage" :total="5230" :pageSize="6" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 出入库趋势 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<LineChartOutlined class="text-purple-500" />出入库趋势
|
||||
</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div v-for="trend in stockTrends" :key="trend.month">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm text-gray-600">{{ trend.month }}</span>
|
||||
<span class="text-sm font-medium text-gray-800">入库 {{ trend.inQty }} / 出库 {{ trend.outQty }}</span>
|
||||
</div>
|
||||
<div class="flex gap-1 h-3">
|
||||
<div class="rounded-full bg-blue-400" :style="{ width: trend.inPercent + '%' }"></div>
|
||||
<div class="rounded-full bg-orange-400" :style="{ width: trend.outPercent + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs text-gray-500 pt-2">
|
||||
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-blue-400 inline-block"></span>入库</span>
|
||||
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-orange-400 inline-block"></span>出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 库存预警 -->
|
||||
<div class="bg-white/85 backdrop-blur-xl rounded-2xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<WarningOutlined class="text-red-500" />库存预警
|
||||
</h3>
|
||||
<a-badge count="12" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="w in warnings" :key="w.code" class="flex items-center gap-4 p-3 bg-red-50 rounded-xl border border-red-100">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<WarningOutlined class="text-red-600" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">{{ w.name }}</p>
|
||||
<p class="text-xs text-gray-500">当前库存：{{ w.current }} / 最低要求：{{ w.min }}</p>
|
||||
</div>
|
||||
<a-button type="primary" size="small" danger>申请补货</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
HomeOutlined, SettingOutlined, ShoppingCartOutlined, InboxOutlined, WalletOutlined,
|
||||
TeamOutlined, ProjectOutlined, UserOutlined, LogoutOutlined, SearchOutlined,
|
||||
FullscreenOutlined, BellOutlined, ArrowLeftOutlined, ArrowUpOutlined,
|
||||
PlusOutlined, ExportOutlined, ImportOutlined, FilterOutlined, UnorderedListOutlined,
|
||||
CheckCircleOutlined, WarningOutlined, EyeOutlined, LineChartOutlined,
|
||||
BlockOutlined, AuditOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
definePageMeta({ layout: 'blank' })
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const listSearchKeyword = ref('')
|
||||
const currentPage = ref(1)
|
||||
const activeTab = ref('库存管理')
|
||||
const tabOptions = ['库存管理', '入库管理', '出库管理', '库存盘点', '物流配送']
|
||||
|
||||
const columns = [
|
||||
{ title: '物料信息', key: 'material' },
|
||||
{ title: '类别', dataIndex: 'category', key: 'category' },
|
||||
{ title: '存放位置', dataIndex: 'location', key: 'location' },
|
||||
{ title: '当前库存', key: 'stock' },
|
||||
{ title: '单价', dataIndex: 'price', key: 'price' },
|
||||
{ title: '库存状态', key: 'warning' },
|
||||
{ title: '操作', key: 'action', align: 'center' },
|
||||
]
|
||||
|
||||
const stockData = [
|
||||
{ key: '1', name: '304不锈钢板 2mm', code: 'WL-STL-001', category: '原材料', location: 'A区-01-03', qty: 850, minQty: 500, unit: 'kg', price: '¥38/kg' },
|
||||
{ key: '2', name: '铝合金型材 6061', code: 'WL-ALU-008', category: '原材料', location: 'A区-02-01', qty: 120, minQty: 200, unit: 'kg', price: '¥45/kg' },
|
||||
{ key: '3', name: '标准六角螺栓 M8', code: 'WL-BLT-023', category: '标准件', location: 'B区-05-12', qty: 5800, minQty: 1000, unit: '个', price: '¥0.5/个' },
|
||||
{ key: '4', name: 'ABS工程塑料颗粒', code: 'WL-PLT-006', category: '原材料', location: 'C区-03-08', qty: 380, minQty: 400, unit: 'kg', price: '¥28/kg' },
|
||||
{ key: '5', name: '密封圈 O型 20mm', code: 'WL-SL-047', category: '耗材', location: 'B区-08-04', qty: 1200, minQty: 500, unit: '个', price: '¥2.5/个' },
|
||||
{ key: '6', name: '导轨润滑油脂', code: 'WL-OIL-012', category: '耗材', location: 'D区-01-02', qty: 45, minQty: 50, unit: 'kg', price: '¥85/kg' },
|
||||
]
|
||||
|
||||
const stockTrends = [
|
||||
{ month: '1月', inQty: 380, outQty: 320, inPercent: 55, outPercent: 45 },
|
||||
{ month: '2月', inQty: 290, outQty: 260, inPercent: 52, outPercent: 48 },
|
||||
{ month: '3月', inQty: 420, outQty: 390, inPercent: 51, outPercent: 49 },
|
||||
{ month: '4月', inQty: 480, outQty: 620, inPercent: 43, outPercent: 57 },
|
||||
]
|
||||
|
||||
const warnings = [
|
||||
{ code: 'WL-ALU-008', name: '铝合金型材 6061', current: '120kg', min: '200kg' },
|
||||
{ code: 'WL-PLT-006', name: 'ABS工程塑料颗粒', current: '380kg', min: '400kg' },
|
||||
{ code: 'WL-OIL-012', name: '导轨润滑油脂', current: '45kg', min: '50kg' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar { background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
|
||||
.sidebar-item { color: white; }
|
||||
.sidebar-item:hover, .sidebar-item.active { background: rgba(255,255,255,0.2); }
|
||||
.card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
|
||||
.stat-card { position: relative; overflow: hidden; }
|
||||
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||
.stat-card.red::before { background: linear-gradient(90deg, #f5576c, #ff4d4f); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user