HTML后台

sap-procurement-dashboard-template — HTML 后台模板

作者 hamzaMissewi

一个用 HTML、CSS 和 JavaScript 构建的 SAP MM 采购仪表盘演示项目，在浏览器中重现 ME21N、ME23N、ME2M、MK03、ME2A 和 MIGO 等 SAP 事务界面。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

sap-procurement-dashboard-template · 桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-15查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

在浏览器中重现 ME21N、ME23N、ME2M、MK03、ME2A、MIGO 等 SAP MM 事务界面

包含仪表盘概览、采购订单列表与筛选、创建采购订单表单、采购订单详情、供应商主数据、支出分析图表和收货过账流程

采购订单与供应商记录使用本地存储持久化

支持 Ctrl+S 保存采购订单、Ctrl+G 过账收货的键盘快捷键

项目结构分为 index.html、src/styles.css、src/main.js 和 src/data.js

模板详细介绍

该项目是一个静态前端演示，用 HTML、CSS 和 JavaScript 重建 SAP MM 采购相关的事务界面，包括 ME21N、ME23N、ME2M、MK03、ME2A 和 MIGO。README 说明其定位为演示与作品集用途，并可直接作为完整演示仓库推送到 GitHub。

功能覆盖仪表盘概览与状态图表、采购订单列表（筛选、凭证类型、状态徽章）、创建采购订单表单（动态行项目、合计与校验）、采购订单详情（抬头、行项目、交货/发票数据与历史）、供应商主数据列表（评级、支出与筛选）、支出分析图表与导出、收货过账流程（确认与状态更新），以及采购订单和供应商记录的本地存储持久化。键盘快捷键为 Ctrl+S 保存采购订单、Ctrl+G 过账收货。

项目结构为 index.html 应用外壳、src/styles.css 样式、src/main.js 应用逻辑与路由、状态和图表、src/data.js 初始采购与供应商数据集。README 未说明具体框架版本、后端服务、真实 SAP 系统集成或生产部署方式，也未提供性能与安全方面的说明。

HTML后台

适合你的项目吗？

适用场景

演示 SAP MM 采购流程中的采购订单创建、查看与收货过账操作
作为前端作品集展示 SAP 风格界面与交互实现
用于学习或教学 SAP 事务代码对应的浏览器界面布局
在本地运行并修改 src/data.js 中的初始采购与供应商数据

适合人群

需要 SAP MM 采购界面演示或作品集的前端开发者
学习 SAP 事务界面布局与前端实现的学生或教师
希望快速搭建静态采购仪表盘原型的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js 18+ 或兼容版本以及 npm
2
进入 SAP samples/sap-procurement-dashboard 目录后执行 npm install
3
使用 npm run dev 在本地运行，打开终端显示的本地 URL
4
使用 npm run build 构建
5
README 未说明生产部署、后端服务或真实 SAP 系统集成方式

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/hamzaMissewi/sap-procurement-dashboard-template/blob/master/LICENSE https://github.com/hamzaMissewi/sap-procurement-dashboard-template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-15。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 83 / 100
技术栈: HTML
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-06-14
截图检查日期: 2026-10-15

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: 32a74ee693a8fcda2a9bd2e05fb0b35df9848c034d2099ff40b4d5d60708a4c7

2026-10-15T05:06:52.563Z

来源文件 / 仓库

# SAP Procurement Dashboard

A complete SAP MM procurement dashboard project built with HTML, CSS, and JavaScript. It recreates SAP-style transaction screens like ME21N, ME23N, ME2M, MK03, ME2A, and MIGO using a modern browser interface.

## Features

- Dashboard overview with procurement metrics and status charts
- Purchase order list with filters, document types, and status badges
- Create PO form with dynamic line items, totals, and validation
- PO detail view with header, item lines, delivery/invoice data, and history
- Vendor master list with ratings, spend, and filters
- Spend analytics charts and export support
- Goods receipt posting workflow with confirmation and status updates
- Local storage persistence for POs and vendor records
- Keyboard shortcuts: `Ctrl+S` to save a PO, `Ctrl+G` to post goods receipt

![alt text](preview.png)

## Getting Started

### Prerequisites

- Node.js 18+ or compatible
- npm

### Install

```bash
cd "SAP samples/sap-procurement-dashboard"
npm install
```

### Run locally

```bash
npm run dev
```

Open the local URL shown in the terminal.

### Build

```bash
npm run build
```

## Project Structure

- `index.html` — main app shell and content structure
- `src/styles.css` — SAP-inspired styling
- `src/main.js` — application logic, routing, state, and charts
- `src/data.js` — initial procurement and vendor dataset

## Notes

This is a static frontend project designed for demonstration and portfolio use. It is ready to push to GitHub as a complete demo repository.

反馈内容错误