gxwebsoft/tiantian-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(oa): 修复多处 Duplicate attribute 错误问题

Browse Source 
- 修改 app/components/oa/TaskForm.vue 中 a-input 类型冲突为 a-input-number
- 合并 admin/supply/warehouse.vue 和 production/equipment.vue 中多个 :class 绑定，避免重复属性
- 统一改为数组方式绑定静态和动态 class，防止 Vue 编译器 Duplicate attribute 警告
- 清理缓存并验证构建通过，确保无重复属性错误
- 通过扫描确认 app/ 目录下 Vue 文件不再存在重复属性问题
- 添加 OaTaskForm 组件类型声明及懒加载声明
- 将 ERP 演示独立 HTML 页面整合至 /app/pages，统一布局与导航
- 升级制造业管理后台页面风格，采用玻璃态和渐变设计
- 修订规划文档相关内容，更新 DEMO 系统名称及功能模块描述
- 修改 ecosystem.config.cjs 中运行端口为 10591
This commit is contained in:
赵忠林
2026-04-09 12:08:55 +08:00
parent f9e1286ab1
commit a9da04fbb8
26 changed files with 1203 additions and 2516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/pages/admin/production/equipment.vue
View File

@@ -178,9 +178,7 @@ function handleAdd() {
<a-table-column title="状态" dataIndex="status" width="100" align="center">
<template #default="{ text }">
<span
:class="statusMap[text]?.color"
class="px-2 py-1 rounded-lg text-sm font-medium"
:class="statusMap[text]?.bg"
:class="['px-2 py-1 rounded-lg text-sm font-medium', statusMap[text]?.color, statusMap[text]?.bg]"
>
{{ statusMap[text]?.label }}
</span>
@@ -251,9 +249,7 @@ function handleAdd() {
<a-descriptions-item label="安装位置">{{ selectedEquipment.location }}</a-descriptions-item>
<a-descriptions-item label="当前状态">
<span
:class="statusMap[selectedEquipment.status]?.color"
class="px-2 py-0.5 rounded text-sm font-medium"
:class="statusMap[selectedEquipment.status]?.bg"
:class="['px-2 py-0.5 rounded text-sm font-medium', statusMap[selectedEquipment.status]?.color, statusMap[selectedEquipment.status]?.bg]"
>
{{ statusMap[selectedEquipment.status]?.label }}
</span>

3
app/pages/admin/supply/purchase.vue
View File

@@ -167,9 +167,8 @@ function handleAdd() {
<a-table-column title="状态" dataIndex="status" width="100" align="center">
<template #default="{ text }">
<span
:class="statusMap[text]?.color"
class="px-2 py-1 rounded-lg text-sm font-medium"
:class="statusMap[text]?.bg"
:class="[statusMap[text]?.color, statusMap[text]?.bg]"
>
{{ statusMap[text]?.label }}
</span>

4
app/pages/admin/supply/warehouse.vue
View File

@@ -178,9 +178,7 @@ function handleInbound() {
<a-table-column title="状态" dataIndex="status" width="100" align="center">
<template #default="{ text }">
<span
:class="statusMap[text]?.color"
class="px-2 py-1 rounded-lg text-sm font-medium"
:class="statusMap[text]?.bg"
:class="['px-2 py-1 rounded-lg text-sm font-medium', statusMap[text]?.color, statusMap[text]?.bg]"
>
{{ statusMap[text]?.label }}
</span>

535
app/pages/hr.vue Normal file
View File

@@ -0,0 +1,535 @@
<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">
<!-- Logo -->
<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 active 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="搜索员工、部门、职位..."
class="w-full"
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="5" :offset="[-2, 2]">
<BellOutlined class="text-gray-500 hover:text-purple-600 transition-colors text-lg cursor-pointer" />
</a-badge>
<button class="text-gray-500 hover:text-purple-600 transition-colors">
<GlobalOutlined class="text-lg" />
</button>
<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">
<TeamOutlined class="text-blue-600 text-xl" />
</div>
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 5%</span>
</div>
<h3 class="text-3xl font-bold text-gray-800 mb-1">186</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">
<UserAddOutlined class="text-green-600 text-xl" />
</div>
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 12%</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 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">
<ClockCircleOutlined class="text-orange-600 text-xl" />
</div>
<span class="text-red-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 3</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 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">
<DollarOutlined class="text-purple-600 text-xl" />
</div>
<span class="text-green-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">¥156<span class="text-lg">万</span></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>
<ImportOutlined class="text-blue-500" />
批量导入
</a-button>
<a-button>
<ExportOutlined class="text-green-500" />
导出报表
</a-button>
</div>
<div class="flex gap-3">
<a-button>
<FilterOutlined class="text-gray-500" />
筛选
</a-button>
<a-button>
<CalendarOutlined class="text-gray-500" />
2026年4月
</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">186</a-tag>
</h3>
<div class="flex items-center gap-3">
<a-input-search
v-model:value="listSearchKeyword"
placeholder="搜索姓名、工号、部门..."
class="w-64"
/>
</div>
</div>
</div>
<a-table :dataSource="employeeData" :columns="columns" :pagination="false">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'employee'">
<div class="flex items-center gap-3">
<a-avatar :style="{ background: record.avatarBg }">{{ record.name[0] }}</a-avatar>
<div>
<p class="font-medium text-gray-800">{{ record.name }}</p>
<p class="text-xs text-gray-500">{{ record.employeeId }}</p>
</div>
</div>
</template>
<template v-if="column.key === 'department'">
<p class="font-medium text-gray-800">{{ record.department }}</p>
<p class="text-xs text-gray-500">{{ record.position }}</p>
</template>
<template v-if="column.key === 'status'">
<a-tag :color="getStatusColor(record.status)">
<template v-if="record.status === 'active'"><CheckCircleOutlined /> 在职</template>
<template v-else-if="record.status === 'probation'"><ClockCircleOutlined /> 试用期</template>
<template v-else-if="record.status === 'leave'"><PauseCircleOutlined /> 休假中</template>
<template v-else-if="record.status === 'resigned'"><CloseCircleOutlined /> 已离职</template>
</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>
<a-button type="text" size="small" class="text-red-600">
<DeleteOutlined />
</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 条，共 186 条</p>
<a-pagination v-model:current="currentPage" :total="186" :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>
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
</div>
<div class="space-y-4">
<div v-for="dept in departments" :key="dept.name">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-600">{{ dept.name }}</span>
<span class="text-sm font-medium text-gray-800">{{ dept.count }}人 ({{ dept.percent }}%)</span>
</div>
<a-progress :percent="dept.percent" :stroke-color="dept.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">
<BellOutlined class="text-orange-500" />
待办事项
</h3>
<a-badge count="5" />
</div>
<div class="space-y-3">
<div
v-for="todo in todos"
:key="todo.id"
class="todo-item flex items-center gap-4 p-4 bg-gray-50 rounded-xl cursor-pointer hover:shadow-md transition-all"
>
<div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" :class="todo.iconBg">
<component :is="todo.icon" :class="todo.iconColor" />
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800">{{ todo.title }}</h4>
<p class="text-xs text-gray-500">{{ todo.desc }}</p>
</div>
<a-tag :color="todo.urgency === 'high' ? 'red' : todo.urgency === 'medium' ? 'orange' : 'blue'">
{{ todo.urgencyText }}
</a-tag>
</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,
GlobalOutlined,
ArrowLeftOutlined,
ArrowUpOutlined,
PlusOutlined,
ImportOutlined,
ExportOutlined,
FilterOutlined,
CalendarOutlined,
UnorderedListOutlined,
CheckCircleOutlined,
ClockCircleOutlined,
DollarOutlined,
UserAddOutlined,
PauseCircleOutlined,
CloseCircleOutlined,
EyeOutlined,
EditOutlined,
DeleteOutlined,
PieChartOutlined,
BlockOutlined,
FileTextOutlined,
CheckOutlined,
} 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: 'employee' },
{ title: '部门职位', key: 'department' },
{ title: '入职日期', dataIndex: 'joinDate', key: 'joinDate' },
{ title: '联系方式', dataIndex: 'phone', key: 'phone' },
{ title: '状态', key: 'status' },
{ title: '操作', key: 'action', align: 'center' },
]
// 员工数据
const employeeData = [
{
key: '1',
name: '张三',
employeeId: 'TT2024001',
department: '技术部',
position: '高级前端工程师',
joinDate: '2024-03-15',
phone: '138****1234',
status: 'active',
avatarBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
},
{
key: '2',
name: '李四',
employeeId: 'TT2024002',
department: '产品部',
position: '产品经理',
joinDate: '2024-02-20',
phone: '139****5678',
status: 'active',
avatarBg: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
},
{
key: '3',
name: '王五',
employeeId: 'TT2025001',
department: '销售部',
position: '销售经理',
joinDate: '2025-01-10',
phone: '137****9012',
status: 'probation',
avatarBg: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)',
},
{
key: '4',
name: '赵六',
employeeId: 'TT2023005',
department: '人事部',
position: 'HR专员',
joinDate: '2023-08-15',
phone: '136****3456',
status: 'leave',
avatarBg: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
},
{
key: '5',
name: '孙七',
employeeId: 'TT2022008',
department: '财务部',
position: '财务主管',
joinDate: '2022-06-01',
phone: '135****7890',
status: 'active',
avatarBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
},
]
// 部门数据
const departments = [
{ name: '技术部', count: 45, percent: 24, color: { from: '#667eea', to: '#764ba2' } },
{ name: '销售部', count: 38, percent: 20, color: { from: '#11998e', to: '#38ef7d' } },
{ name: '产品部', count: 25, percent: 13, color: { from: '#f5576c', to: '#f093fb' } },
{ name: '运营部', count: 32, percent: 17, color: { from: '#ffecd2', to: '#fcb69f' } },
{ name: '人事行政部', count: 18, percent: 10, color: { from: '#a8edea', to: '#fed6e3' } },
{ name: '财务部', count: 15, percent: 8, color: { from: '#667eea', to: '#764ba2' } },
{ name: '其他', count: 13, percent: 7, color: { from: '#11998e', to: '#38ef7d' } },
]
// 待办事项
const todos = [
{ id: 1, title: '审批请假申请', desc: '技术部 - 张三，3天病假', urgency: 'high', urgencyText: '紧急', icon: FileTextOutlined, iconBg: 'bg-red-100', iconColor: 'text-red-600' },
{ id: 2, title: '试用期转正评估', desc: '销售部 - 王五，入职3个月', urgency: 'medium', urgencyText: '今日', icon: CheckOutlined, iconBg: 'bg-orange-100', iconColor: 'text-orange-600' },
{ id: 3, title: '薪资调整审批', desc: '产品部 - 李四，晋升调薪', urgency: 'medium', urgencyText: '本周', icon: DollarOutlined, iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
{ id: 4, title: '新员工入职办理', desc: '明天有2名新员工报到', urgency: 'low', urgencyText: '明日', icon: UserAddOutlined, iconBg: 'bg-green-100', iconColor: 'text-green-600' },
]
// 获取状态颜色
const getStatusColor = (status: string) => {
const colorMap: Record<string, string> = {
active: 'success',
probation: 'warning',
leave: 'processing',
resigned: 'default',
}
return colorMap[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); }
.todo-item {
transition: all 0.3s ease;
}
</style>

46
app/pages/index.vue
View File

@@ -9,7 +9,7 @@
<BlockOutlined class="text-xl" />
</div>
<div>
<h1 class="font-bold text-lg">天天系统</h1>
<h1 class="font-bold text-lg">DEMO演示系统</h1>
<p class="text-xs text-white/70">ERP 管理平台</p>
</div>
</div>
@@ -18,34 +18,34 @@
<!-- 导航菜单 -->
<nav class="flex-1 py-6 px-3">
<div class="space-y-1">
<a href="#" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'home'">
<NuxtLink to="/" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
<HomeOutlined class="text-base" />
<span>工作台</span>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'device'">
</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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'purchase'">
</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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'warehouse'">
</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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'finance'">
</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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'hr'">
</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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'office'">
</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>
</a>
</NuxtLink>
</div>
<div class="mt-8 pt-6 border-t border-white/10">
@@ -336,12 +336,12 @@ const todos = [
// 应用模块
const apps = [
{ name: '设备管理', icon: SettingOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '128 设备', route: '/admin/device' },
{ name: '采购管理', icon: ShoppingCartOutlined, gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', stats: '23 订单', route: '/admin/purchase' },
{ name: '仓储物流', icon: InboxOutlined, gradient: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)', stats: '5,230 物料', route: '/admin/warehouse' },
{ name: '财务管理', icon: WalletOutlined, gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', stats: '¥89.5万', route: '/admin/finance' },
{ name: '人力资源', icon: TeamOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '56 员工', route: '/admin/hr' },
{ name: '协同办公', icon: ProjectOutlined, gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', stats: '8 流程', route: '/admin/office' },
{ name: '设备管理', icon: SettingOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '128 设备', route: '/device' },
{ name: '采购管理', icon: ShoppingCartOutlined, gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', stats: '23 订单', route: '/procurement' },
{ name: '仓储物流', icon: InboxOutlined, gradient: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)', stats: '5,230 物料', route: '/warehouse' },
{ name: '财务管理', icon: WalletOutlined, gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', stats: '¥328万', route: '/finance' },
{ name: '人力资源', icon: TeamOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '186 员工', route: '/hr' },
{ name: '协同办公', icon: ProjectOutlined, gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', stats: '24 任务', route: '/office' },
]
// 图表数据
@@ -366,6 +366,10 @@ const navigateToApp = (route: string) => {
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);

766
app/pages/oa/tasks.vue
View File

@@ -43,78 +43,80 @@
</div>
<a-tag color="red" class="priority-badge">高优先</a-tag>
</div>
<draggable
v-model="todoTasks"
group="tasks"
item-key="id"
class="task-list"
@change="handleTaskMove"
>
<template #item="{ element: task }">
<div class="task-card" @click="openTaskDetail(task.id)">
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-actions">
<a-dropdown :trigger="['click']">
<a-button type="text" size="small" class="more-button">
<MoreOutlined />
</a-button>
<template #overlay>
<a-menu>
<a-menu-item key="edit" @click="editTask(task)">
<EditOutlined /> 编辑
</a-menu-item>
<a-menu-item key="assign" @click="assignTask(task)">
<UserAddOutlined /> 分配
</a-menu-item>
<a-menu-item key="delete" danger @click="deleteTask(task)">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<div class="task-list">
<div
v-for="task in todoTasks"
:key="task.id"
class="task-card"
@click="openTaskDetail(task.id)"
>
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CalendarOutlined />
<span :class="{ 'deadline-warning': isDeadlineWarning(task.dueDate) }">
{{ task.dueDate }}
</span>
</div>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-avatars">
<a-avatar-group :max-count="2" size="small">
<a-avatar v-for="avatar in task.collaborators" :key="avatar" :src="avatar" />
</a-avatar-group>
<span v-if="task.collaborators.length > 2" class="more-count">
+{{ task.collaborators.length - 2 }}
</span>
</div>
<div class="task-actions">
<a-dropdown :trigger="['click']">
<a-button type="text" size="small" class="more-button">
<MoreOutlined />
</a-button>
<template #overlay>
<a-menu>
<a-menu-item key="edit" @click="editTask(task)">
<EditOutlined /> 编辑
</a-menu-item>
<a-menu-item key="assign" @click="assignTask(task)">
<UserAddOutlined /> 分配
</a-menu-item>
<a-menu-divider />
<a-menu-item key="move" @click="moveTaskToProgress(task)">
<RightOutlined /> 移动到进行中
</a-menu-item>
<a-menu-divider />
<a-menu-item key="delete" danger @click="deleteTask(task)">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
</template>
</draggable>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CalendarOutlined />
<span :class="{ 'deadline-warning': isDeadlineWarning(task.dueDate) }">
{{ task.dueDate }}
</span>
</div>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-avatars">
<a-avatar-group :max-count="2" size="small">
<a-avatar v-for="avatar in task.collaborators" :key="avatar" :src="avatar" />
</a-avatar-group>
<span v-if="task.collaborators.length > 2" class="more-count">
+{{ task.collaborators.length - 2 }}
</span>
</div>
</div>
</div>
</div>
</div>
<!-- In Progress 列 -->
@@ -127,77 +129,79 @@
</div>
<a-tag color="orange" class="priority-badge">进行中</a-tag>
</div>
<draggable
v-model="inProgressTasks"
group="tasks"
item-key="id"
class="task-list"
@change="handleTaskMove"
>
<template #item="{ element: task }">
<div class="task-card" @click="openTaskDetail(task.id)">
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-actions">
<a-dropdown :trigger="['click']">
<a-button type="text" size="small" class="more-button">
<MoreOutlined />
</a-button>
<template #overlay>
<a-menu>
<a-menu-item key="edit" @click="editTask(task)">
<EditOutlined /> 编辑
</a-menu-item>
<a-menu-item key="complete" @click="completeTask(task)">
<CheckCircleOutlined /> 完成
</a-menu-item>
<a-menu-item key="delete" danger @click="deleteTask(task)">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<div class="task-list">
<div
v-for="task in inProgressTasks"
:key="task.id"
class="task-card"
@click="openTaskDetail(task.id)"
>
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<FieldTimeOutlined />
<span>已耗时 {{ task.elapsedTime || '--' }}</span>
</div>
</div>
<div class="task-progress">
<a-progress :percent="task.progress || 0" size="small" />
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-avatars">
<a-avatar-group :max-count="2" size="small">
<a-avatar v-for="avatar in task.collaborators" :key="avatar" :src="avatar" />
</a-avatar-group>
</div>
<div class="task-actions">
<a-dropdown :trigger="['click']">
<a-button type="text" size="small" class="more-button">
<MoreOutlined />
</a-button>
<template #overlay>
<a-menu>
<a-menu-item key="edit" @click="editTask(task)">
<EditOutlined /> 编辑
</a-menu-item>
<a-menu-item key="complete" @click="completeTask(task)">
<CheckCircleOutlined /> 标记完成
</a-menu-item>
<a-menu-divider />
<a-menu-item key="move" @click="moveTaskToReview(task)">
<RightOutlined /> 移动到待审核
</a-menu-item>
<a-menu-divider />
<a-menu-item key="delete" danger @click="deleteTask(task)">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
</template>
</draggable>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<FieldTimeOutlined />
<span>已耗时 {{ task.elapsedTime || '--' }}</span>
</div>
</div>
<div class="task-progress">
<a-progress :percent="task.progress || 0" size="small" />
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-avatars">
<a-avatar-group :max-count="2" size="small">
<a-avatar v-for="avatar in task.collaborators" :key="avatar" :src="avatar" />
</a-avatar-group>
</div>
</div>
</div>
</div>
</div>
<!-- Review 列 -->
@@ -210,62 +214,76 @@
</div>
<a-tag color="blue" class="priority-badge">待审核</a-tag>
</div>
<draggable
v-model="reviewTasks"
group="tasks"
item-key="id"
class="task-list"
@change="handleTaskMove"
>
<template #item="{ element: task }">
<div class="task-card" @click="openTaskDetail(task.id)">
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-reviewer">
<a-tag color="cyan" size="small">审核: {{ task.reviewer }}</a-tag>
</div>
<div class="task-list">
<div
v-for="task in reviewTasks"
:key="task.id"
class="task-card"
@click="openTaskDetail(task.id)"
>
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="getPriorityColor(task.priority)" size="small">
{{ getPriorityText(task.priority) }}
</a-tag>
</div>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CalendarOutlined />
<span>提交: {{ task.submittedDate }}</span>
</div>
</div>
<div class="task-actions-row">
<a-space>
<a-button size="small" type="primary" @click.stop="approveTask(task)">
<CheckCircleOutlined /> 通过
</a-button>
<a-button size="small" danger @click.stop="rejectTask(task)">
<CloseCircleOutlined /> 驳回
</a-button>
</a-space>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-reviewer">
<a-tag color="cyan" size="small">审核: {{ task.reviewer }}</a-tag>
</div>
</div>
</template>
</draggable>
<div class="task-title">{{ task.title }}</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CalendarOutlined />
<span>提交: {{ task.submittedDate }}</span>
</div>
</div>
<div class="task-actions-row">
<a-space>
<a-button size="small" type="primary" @click.stop="approveTask(task)">
<CheckCircleOutlined /> 通过
</a-button>
<a-button size="small" danger @click.stop="rejectTask(task)">
<CloseCircleOutlined /> 驳回
</a-button>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item key="move" @click="moveTaskToDone(task)">
移动到已完成
</a-menu-item>
<a-menu-item key="back" @click="moveTaskToTodo(task)">
退回给负责人
</a-menu-item>
<a-menu-divider />
<a-menu-item key="delete" danger>删除</a-menu-item>
</a-menu>
</template>
<a-button size="small">
更多
</a-button>
</a-dropdown>
</a-space>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- Done 列 -->
@@ -278,63 +296,60 @@
</div>
<a-tag color="green" class="priority-badge">已完成</a-tag>
</div>
<draggable
v-model="doneTasks"
group="tasks"
item-key="id"
class="task-list"
@change="handleTaskMove"
>
<template #item="{ element: task }">
<div class="task-card completed" @click="openTaskDetail(task.id)">
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="'green'" size="small">
已完成
</a-tag>
</div>
<div class="task-completed-time">
<a-tag color="green" size="small">
{{ task.completedTime }}
</a-tag>
</div>
<div class="task-list">
<div
v-for="task in doneTasks"
:key="task.id"
class="task-card completed"
@click="openTaskDetail(task.id)"
>
<div class="task-card-header">
<div class="task-priority">
<a-tag :color="'green'" size="small">
已完成
</a-tag>
</div>
<div class="task-title">
<span class="completed-text">{{ task.title }}</span>
</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CheckCircleOutlined />
<span>{{ task.completedBy }}</span>
</div>
</div>
<div class="task-comment" v-if="task.comment">
<div class="comment-label">评价:</div>
<div class="comment-content">{{ task.comment }}</div>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-rating" v-if="task.rating">
<a-rate :value="task.rating" disabled />
</div>
<div class="task-completed-time">
<a-tag color="green" size="small">
{{ task.completedTime }}
</a-tag>
</div>
</div>
</template>
</draggable>
<div class="task-title">
<span class="completed-text">{{ task.title }}</span>
</div>
<div class="task-description" v-if="task.description">
{{ task.description }}
</div>
<div class="task-meta">
<div class="meta-item">
<UserOutlined />
<span>{{ task.assignee }}</span>
</div>
<div class="meta-item">
<CheckCircleOutlined />
<span>{{ task.completedBy }}</span>
</div>
</div>
<div class="task-comment" v-if="task.comment">
<div class="comment-label">评价:</div>
<div class="comment-content">{{ task.comment }}</div>
</div>
<div class="task-footer">
<div class="task-project">
<span class="project-tag">#{{ task.project }}</span>
</div>
<div class="task-rating" v-if="task.rating">
<a-rate :value="task.rating" disabled />
</div>
</div>
</div>
</div>
</div>
</div>
@@ -391,18 +406,128 @@
<!-- 新建任务模态框 -->
<a-modal
v-model:open="showCreateModal"
title="新建任务"
:title="formMode === 'create' ? '新建任务' : '编辑任务'"
:footer="null"
width="600px"
@cancel="resetForm"
>
<task-form
ref="taskFormRef"
:mode="formMode"
:initial-data="editingTask"
@submit="handleTaskSubmit"
@cancel="resetForm"
/>
<a-space direction="vertical" size="large" style="width: 100%">
<div v-if="formMode === 'create'">
<a-form :model="simpleTaskForm" layout="vertical">
<a-form-item label="任务标题" required>
<a-input
v-model:value="simpleTaskForm.title"
placeholder="请输入任务标题"
:maxlength="200"
/>
</a-form-item>
<a-form-item label="任务描述（选填）">
<a-textarea
v-model:value="simpleTaskForm.description"
placeholder="请输入详细任务描述"
:rows="3"
:maxlength="500"
show-count
/>
</a-form-item>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="优先级" required>
<a-select
v-model:value="simpleTaskForm.priority"
placeholder="选择优先级"
style="width: 100%"
>
<a-select-option value="high">高</a-select-option>
<a-select-option value="medium">中</a-select-option>
<a-select-option value="low">低</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="负责人" required>
<a-select
v-model:value="simpleTaskForm.assignee"
placeholder="选择负责人"
style="width: 100%"
>
<a-select-option v-for="member in teamMembers" :key="member.id" :value="member.name">
{{ member.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="所属项目" required>
<a-select
v-model:value="simpleTaskForm.project"
placeholder="选择项目"
style="width: 100%"
>
<a-select-option v-for="project in activeProjects" :key="project.id" :value="project.name">
{{ project.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="截止日期">
<a-date-picker
v-model:value="simpleTaskForm.dueDate"
placeholder="选择截止日期"
style="width: 100%"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
<div v-else-if="editingTask">
<div class="edit-task-info">
<h4>编辑任务: {{ editingTask.title }}</h4>
<p class="form-help-text">更新任务信息，并说明修改理由</p>
</div>
<a-form layout="vertical">
<a-form-item label="任务标题" required>
<a-input
v-model:value="editingTask.title"
placeholder="请输入任务标题"
:maxlength="200"
/>
</a-form-item>
<a-form-item label="任务描述">
<a-textarea
v-model:value="editingTask.description"
placeholder="请输入详细任务描述"
:rows="3"
:maxlength="500"
show-count
/>
</a-form-item>
<a-form-item label="修改备注（选填）">
<a-textarea
v-model:value="editRemark"
placeholder="请说明本次修改的理由"
:rows="2"
:maxlength="200"
show-count
/>
</a-form-item>
</a-form>
</div>
<div class="form-actions">
<a-space>
<a-button type="primary" @click="handleTaskSubmit">
{{ formMode === 'create' ? '创建任务' : '保存修改' }}
</a-button>
<a-button @click="resetForm">取消</a-button>
</a-space>
</div>
</a-space>
</a-modal>
</div>
</template>
@@ -410,11 +535,11 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import draggable from 'vuedraggable'
import {
PlusOutlined, DownOutlined, MoreOutlined, EditOutlined,
DeleteOutlined, UserOutlined, CalendarOutlined, FieldTimeOutlined,
CheckCircleOutlined, CloseCircleOutlined, UserAddOutlined
CheckCircleOutlined, CloseCircleOutlined, UserAddOutlined,
RightOutlined
} from '@ant-design/icons-vue'
interface Task {
@@ -563,7 +688,17 @@ const completionRate = computed(() => {
const showCreateModal = ref(false)
const formMode = ref<'create' | 'edit'>('create')
const editingTask = ref<Task | null>(null)
const taskFormRef = ref()
const editRemark = ref('')
// 新增任务表单
const simpleTaskForm = ref({
title: '',
description: '',
priority: 'medium' as 'low' | 'medium' | 'high',
assignee: '',
project: '',
dueDate: null as any
})
// 方法
function handleMenuClick({ key }: { key: string }) {
@@ -588,38 +723,59 @@ function isDeadlineWarning(dueDate: string) {
return diffDays <= 3 && diffDays > 0
}
function handleTaskMove(event: any) {
if (event.added) {
const task = event.added.element
const newStatus = getColumnStatus(event.added.newIndex)
updateTaskStatus(task.id, newStatus)
message.success(`任务已移动到${getStatusText(newStatus)}`)
function moveTaskToProgress(task: Task) {
const index = todoTasks.value.findIndex(t => t.id === task.id)
if (index !== -1) {
const [movedTask] = todoTasks.value.splice(index, 1)
movedTask.status = 'in_progress'
inProgressTasks.value.push(movedTask)
message.success(`任务"${task.title}"已移动到进行中`)
}
}
function getColumnStatus(index: number) {
const statusMap: Record<number, Task['status']> = {
0: 'todo',
1: 'in_progress',
2: 'review',
3: 'done'
function moveTaskToReview(task: Task) {
const index = inProgressTasks.value.findIndex(t => t.id === task.id)
if (index !== -1) {
const [movedTask] = inProgressTasks.value.splice(index, 1)
movedTask.status = 'review'
movedTask.submittedDate = new Date().toLocaleDateString()
reviewTasks.value.push(movedTask)
message.success(`任务"${task.title}"已提交审核`)
}
return statusMap[index]
}
function getStatusText(status: Task['status']) {
const texts = {
todo: '待处理',
in_progress: '进行中',
review: '待审核',
done: '已完成'
function moveTaskToDone(task: Task) {
const index = reviewTasks.value.findIndex(t => t.id === task.id)
if (index !== -1) {
const [movedTask] = reviewTasks.value.splice(index, 1)
movedTask.status = 'done'
movedTask.completedTime = '刚刚'
movedTask.completedBy = '审核人'
doneTasks.value.push(movedTask)
message.success(`任务"${task.title}"已标记为已完成`)
}
return texts[status]
}
function updateTaskStatus(taskId: number, status: Task['status']) {
// 在实际应用中，这里应该调用API更新任务状态
console.log(`更新任务${taskId}状态为${status}`)
function moveTaskToTodo(task: Task) {
// 从待审核列退回
const index = reviewTasks.value.findIndex(t => t.id === task.id)
if (index !== -1) {
const [movedTask] = reviewTasks.value.splice(index, 1)
movedTask.status = 'todo'
todoTasks.value.push(movedTask)
message.success(`任务"${task.title}"已退还给负责人`)
}
// 从已完成列恢复
const doneIndex = doneTasks.value.findIndex(t => t.id === task.id)
if (doneIndex !== -1) {
const [movedTask] = doneTasks.value.splice(doneIndex, 1)
movedTask.status = 'todo'
movedTask.completedTime = ''
movedTask.completedBy = ''
todoTasks.value.push(movedTask)
message.success(`任务"${task.title}"已恢复为待处理`)
}
}
function openTaskDetail(taskId: number) {
@@ -659,34 +815,62 @@ function rejectTask(task: Task) {
// 这里应该移动任务到待处理列
}
function handleTaskSubmit(taskData: any) {
// 团队成员数据（从概览页面引入）
const teamMembersData = ref([
{ id: 1, name: '张三', avatar: 'https://randomuser.me/api/portraits/men/32.jpg', role: '产品经理', status: '在线', tasks: 8 },
{ id: 2, name: '李四', avatar: 'https://randomuser.me/api/portraits/women/44.jpg', role: 'UI设计师', status: '在线', tasks: 5 },
{ id: 3, name: '王五', avatar: 'https://randomuser.me/api/portraits/men/67.jpg', role: '前端工程师', status: '忙碌', tasks: 12 },
{ id: 4, name: '赵六', avatar: 'https://randomuser.me/api/portraits/women/23.jpg', role: '后端工程师', status: '在线', tasks: 9 },
{ id: 5, name: '钱七', avatar: 'https://randomuser.me/api/portraits/men/89.jpg', role: '测试工程师', status: '离开', tasks: 7 },
{ id: 6, name: '孙八', avatar: 'https://randomuser.me/api/portraits/women/56.jpg', role: '运维工程师', status: '离线', tasks: 4 }
])
function handleTaskSubmit() {
if (formMode.value === 'create') {
if (!simpleTaskForm.value.title.trim() || !simpleTaskForm.value.assignee || !simpleTaskForm.value.project) {
message.error('请填写必填项：任务标题、负责人和所属项目')
return
}
const newTask: Task = {
id: Date.now(),
title: taskData.title,
description: taskData.description,
priority: taskData.priority,
assignee: taskData.assignee,
project: taskData.project,
title: simpleTaskForm.value.title,
description: simpleTaskForm.value.description,
priority: simpleTaskForm.value.priority,
assignee: simpleTaskForm.value.assignee,
project: simpleTaskForm.value.project,
status: 'todo',
dueDate: taskData.dueDate?.format('YYYY-MM-DD') || taskData.dueDate,
collaborators: []
dueDate: simpleTaskForm.value.dueDate?.format('YYYY-MM-DD') || '今天 18:00',
collaborators: [
'https://randomuser.me/api/portraits/men/32.jpg',
'https://randomuser.me/api/portraits/women/44.jpg'
]
}
todoTasks.value.unshift(newTask)
message.success('任务创建成功')
} else {
resetForm()
} else if (editingTask.value) {
// 更新任务逻辑
message.success('任务更新成功')
resetForm()
}
resetForm()
}
function resetForm() {
showCreateModal.value = false
editingTask.value = null
formMode.value = 'create'
if (taskFormRef.value) {
taskFormRef.value.reset()
editRemark.value = ''
// 重置新建任务表单
simpleTaskForm.value = {
title: '',
description: '',
priority: 'medium',
assignee: '',
project: '',
dueDate: null
}
}

22
app/pages/procurement.vue
View File

@@ -9,7 +9,7 @@
<BlockOutlined class="text-xl" />
</div>
<div>
<h1 class="font-bold text-lg">天天系统</h1>
<h1 class="font-bold text-lg">DEMO演示系统</h1>
<p class="text-xs text-white/70">ERP 管理平台</p>
</div>
</div>
@@ -22,30 +22,30 @@
<HomeOutlined class="text-base" />
<span>工作台</span>
</NuxtLink>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
<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>
</a>
</NuxtLink>
<NuxtLink to="/procurement" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
<ShoppingCartOutlined class="text-base" />
<span>采购管理</span>
</NuxtLink>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
<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>
</a>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
</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>
</a>
</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>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
<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>
</a>
</NuxtLink>
</div>
<div class="mt-8 pt-6 border-t border-white/10">
@@ -535,6 +535,10 @@ const getStatusColor = (status: string) => {
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);