NavOverlay.tsx
5.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
import { useAppDispatch } from '@/store'
import { openTab } from '@/store/tabs'
const navSide = [
{ ico: 'sales', label: '销售管理' }, { ico: 'dcs', label: 'DCS系统' }, { ico: 'prod', label: '产品管理' },
{ ico: 'ops', label: '生产运营' }, { ico: 'exec', label: '生产执行' }, { ico: 'mold', label: '模具管理' },
{ ico: 'cart', label: '采购管理' }, { ico: 'mat', label: '材料库存' }, { ico: 'fg', label: '成品库存' },
{ ico: 'out', label: '外协管理' }, { ico: 'logi', label: '物流管理' }, { ico: 'qa', label: '质量管理' },
{ ico: 'fin', label: '财务管理' }, { ico: 'cost1', label: '成本管理(专)' }, { ico: 'cost2', label: '成本管理' },
{ ico: 'eq', label: '设备管理' }, { ico: 'hr', label: '人事行政' }, { ico: 'oa', label: 'OA系统' },
{ ico: 'base', label: '基础设置' }, { ico: 'sys', label: '系统设置', active: true },
]
const sideIco: Record<string, string> = {
sales: 'M3 7l3 10h12l3-10M5 7l1-3h12l1 3M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
dcs: 'M12 2l9 5-9 5-9-5z M3 12l9 5 9-5 M3 17l9 5 9-5',
prod: 'M3 7l9-5 9 5v10l-9 5-9-5z',
ops: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z',
exec: 'M5 4h14v16H5z M5 9h14 M9 4v5',
mold: 'M4 7h16v10H4z M8 7v10 M16 7v10',
cart: 'M5 5h2l3 11h10l2-8H8 M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
mat: 'M4 21V8l8-5 8 5v13z M9 21v-7h6v7',
fg: 'M3 21V9l9-6 9 6v12z',
out: 'M12 12c2 0 4-1 4-4s-2-4-4-4-4 1-4 4 2 4 4 4z M4 21c0-4 4-7 8-7s8 3 8 7',
logi: 'M3 7h11v9H3z M14 10h5l3 3v3h-8z M7 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
qa: 'M12 2l8 4v6c0 5-4 8-8 10-4-2-8-5-8-10V6z M9 12l2 2 4-4',
fin: 'M12 2v20 M7 6h10 M7 10h10',
cost1: 'M4 20V8 M9 20V4 M14 20v-8 M19 20v-6 M2 20h20',
cost2: 'M4 20V8 M9 20V4 M14 20v-8 M19 20v-6 M2 20h20',
eq: 'M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M19 12a7 7 0 0 0-.5-2.5l1.5-1.5-2-2-1.5 1.5A7 7 0 0 0 14 7l-.5-2h-3l-.5 2A7 7 0 0 0 7.5 7.5L6 6 4 8l1.5 1.5A7 7 0 0 0 5 12',
hr: 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M2 21c0-4 3-7 7-7s7 3 7 7 M17 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M22 21c0-3-2-5-5-5',
oa: 'M3 7h18v12H3z M3 11h18 M8 7V4h8v3',
base: 'M4 6h16 M4 12h16 M4 18h16 M8 6v12 M14 6v12',
sys: 'M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M19 12a7 7 0 0 0-.5-2.5l1.5-1.5-2-2-1.5 1.5A7 7 0 0 0 14 7l-.5-2h-3l-.5 2A7 7 0 0 0 7.5 7.5L6 6 4 8l1.5 1.5A7 7 0 0 0 5 12',
}
interface NavLink {
label: string
star?: boolean
go?: 'userlist'
}
const navCols: { title: string; items: (string | NavLink)[] }[] = [
{ title: '期初设置', items: ['客户期初', '供应商期初', '材料期初', '产品期初', '数据导入', '离线导出下载'] },
{ title: '用户管理', items: [{ label: '用户列表', star: true, go: 'userlist' }, '系统权限', '系统权限稽查表', '权限组'] },
{ title: '系统参数', items: ['系统参数', '财务结账', '系统常量配置'] },
{ title: '计算方案', items: ['方案列表', '计算参数'] },
{ title: '日志', items: ['个性化模块', '操作日志', '异常清除KPI任务表', 'MYSQL监听器'] },
{ title: '开发平台', items: ['自定义开发范例', { label: '系统功能模块设置', star: true }, 'EBC流程清单', '功能模块界面设置', '增删改存业务处理'] },
{ title: 'API对接管理', items: ['调用第三方接口(TOKEN配置)', '调用第三方接口(接口定义)', '被第三方调用(生成token)', '数据同步', '被第三方调用(API定义)'] },
]
interface Props {
onClose: () => void
}
export default function NavOverlay({ onClose }: Props) {
const navigate = useNavigate()
const dispatch = useAppDispatch()
const handleClick = (it: string | NavLink) => {
if (typeof it !== 'string' && it.go === 'userlist') {
dispatch(openTab({ key: 'userlist', title: '用户列表', path: '/users' }))
navigate('/users')
onClose()
} else {
const label = typeof it === 'string' ? it : it.label
message.info(`${label} - 未实现`)
}
}
return (
<div className="nav-overlay">
<div className="side">
{navSide.map(s => (
<div key={s.label} className={`si ${s.active ? 'active' : ''}`}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}>
<path d={sideIco[s.ico] || ''} />
</svg>
{s.label}
</div>
))}
</div>
<div className="grid">
{navCols.map(c => (
<div key={c.title} className="col">
<h3>{c.title}</h3>
{c.items.map((it, i) => {
const label = typeof it === 'string' ? it : it.label
const star = typeof it !== 'string' && it.star
return (
<a key={i} onClick={() => handleClick(it)}>
{label}
{star && <span className="star">★</span>}
</a>
)
})}
</div>
))}
</div>
</div>
)
}