Initial commit: ERP system with advance verification fixes
This commit is contained in:
System Administrator
@@ -0,0 +1,7 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
.env.local
|
||||
*.log
|
||||
.DS_Store
|
||||
*.bak
|
||||
@@ -0,0 +1,37 @@
|
||||
# 轻远电力老挝ERP系统
|
||||
|
||||
## 系统访问
|
||||
- **前端地址**: http://43.161.248.209:3001/
|
||||
- **后端API**: http://43.161.248.209:3000/
|
||||
|
||||
## 测试账号
|
||||
| 用户名 | 密码 | 角色 |
|
||||
|--------|------|------|
|
||||
| admin | 123456 | 系统管理员 |
|
||||
| finance1 | 123456 | 财务专员 |
|
||||
| shejianjun | 123456 | 管理员 |
|
||||
|
||||
## 功能模块
|
||||
1. **仪表板** - 数据概览和统计
|
||||
2. **项目管理** - 项目创建、查看、编辑
|
||||
3. **财务管理** - 预支申请、报销申请
|
||||
4. **报表中心** - 财务报表查看
|
||||
|
||||
## 技术栈
|
||||
- 前端：React + TypeScript + Ant Design + Vite
|
||||
- 后端：Node.js + Express
|
||||
- 数据库：PostgreSQL
|
||||
|
||||
## 服务管理
|
||||
```bash
|
||||
# 查看服务状态
|
||||
netstat -tlnp | grep -E ':3000|:3001'
|
||||
|
||||
# 重启后端
|
||||
cd /opt/qingyuan-erp/backend
|
||||
node api-complete.js &
|
||||
|
||||
# 重启前端
|
||||
cd /opt/qingyuan-erp/frontend
|
||||
npm run dev -- --host 0.0.0.0 &
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# 数据库配置
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=company_finance_db
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=postgres
|
||||
|
||||
# 服务器配置
|
||||
PORT=3000
|
||||
NODE_ENV=development
|
||||
|
||||
# 生产环境配置示例
|
||||
# DB_HOST=your-production-db-host
|
||||
# DB_PORT=5432
|
||||
# DB_NAME=company_finance_prod
|
||||
# DB_USER=production_user
|
||||
# DB_PASSWORD=strong_password
|
||||
# PORT=8080
|
||||
# NODE_ENV=production
|
||||
@@ -0,0 +1,26 @@
|
||||
# 生产环境配置
|
||||
NODE_ENV=production
|
||||
PORT=5000
|
||||
|
||||
# 生产数据库配置
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=company_finance_db
|
||||
DB_USER=finance_user
|
||||
DB_PASSWORD=FinanceDB2026!
|
||||
|
||||
# 安全配置
|
||||
JWT_SECRET=your-production-jwt-secret-key-change-this
|
||||
SESSION_SECRET=your-production-session-secret-change-this
|
||||
|
||||
# 日志配置
|
||||
LOG_LEVEL=info
|
||||
LOG_FILE=/var/log/company-finance-api.log
|
||||
|
||||
# CORS配置
|
||||
CORS_ORIGIN=https://your-domain.com
|
||||
CORS_CREDENTIALS=true
|
||||
|
||||
# 性能配置
|
||||
REQUEST_TIMEOUT=30000
|
||||
BODY_PARSER_LIMIT=10mb
|
||||
@@ -0,0 +1,223 @@
|
||||
# 客户管理API实现报告
|
||||
|
||||
## 任务完成情况
|
||||
|
||||
已成功在 `/opt/company-finance-system/backend` 目录下实现客户管理完整CRUD API，基于现有架构扩展。
|
||||
|
||||
## 实现功能
|
||||
|
||||
### 1. API端点列表（全部实现）
|
||||
|
||||
| 方法 | 端点 | 功能描述 | 状态 |
|
||||
|------|------|----------|------|
|
||||
| GET | `/api/customers` | 获取客户列表（支持分页、搜索、状态过滤） | ✅ |
|
||||
| GET | `/api/customers/:id` | 获取单个客户详情 | ✅ |
|
||||
| POST | `/api/customers` | 创建新客户 | ✅ |
|
||||
| PUT | `/api/customers/:id` | 更新客户信息 | ✅ |
|
||||
| DELETE | `/api/customers/:id` | 删除客户 | ✅ |
|
||||
| GET | `/api/customers/:id/contacts` | 获取客户联系人列表 | ✅ |
|
||||
| GET | `/health` | 健康检查端点 | ✅ |
|
||||
|
||||
### 2. 数据库设计
|
||||
使用PostgreSQL数据库 `company_finance_db`，包含以下表：
|
||||
|
||||
#### customers表（客户表）
|
||||
- `id` - 主键，自增
|
||||
- `name` - 客户名称（必填）
|
||||
- `email` - 邮箱（必填，唯一）
|
||||
- `phone` - 电话
|
||||
- `address` - 地址
|
||||
- `company` - 公司名称
|
||||
- `tax_id` - 税号
|
||||
- `status` - 状态（active/inactive）
|
||||
- `created_at` - 创建时间
|
||||
- `updated_at` - 更新时间
|
||||
|
||||
#### contacts表（联系人表）
|
||||
- `id` - 主键，自增
|
||||
- `customer_id` - 外键，关联customers表
|
||||
- `name` - 联系人姓名
|
||||
- `position` - 职位
|
||||
- `email` - 邮箱
|
||||
- `phone` - 电话
|
||||
- `is_primary` - 是否主要联系人
|
||||
- `created_at` - 创建时间
|
||||
- `updated_at` - 更新时间
|
||||
|
||||
### 3. 数据验证和错误处理
|
||||
|
||||
#### 验证规则
|
||||
- **创建客户**：名称和邮箱必填，邮箱格式验证，状态值验证
|
||||
- **更新客户**：邮箱格式验证（如果提供），状态值验证
|
||||
- **查询参数**：页码、每页数量、ID参数验证
|
||||
- **唯一性约束**：邮箱地址唯一性检查
|
||||
|
||||
#### 错误处理
|
||||
- 统一错误响应格式
|
||||
- 适当的HTTP状态码（200, 201, 400, 404, 409, 500）
|
||||
- 详细的错误信息（开发环境）
|
||||
- 验证错误数组格式
|
||||
|
||||
### 4. 功能特性
|
||||
- ✅ 完整的分页支持（page, limit参数）
|
||||
- ✅ 全文搜索（name, email, company字段）
|
||||
- ✅ 状态过滤（active/inactive）
|
||||
- ✅ 部分更新支持（PATCH语义）
|
||||
- ✅ 级联删除（删除客户时自动删除联系人）
|
||||
- ✅ 数据库索引优化
|
||||
- ✅ 连接池管理
|
||||
- ✅ 跨域支持（CORS）
|
||||
|
||||
## 测试方法
|
||||
|
||||
### 1. 快速测试脚本
|
||||
```bash
|
||||
# 使脚本可执行
|
||||
chmod +x test-api.sh
|
||||
|
||||
# 运行完整测试
|
||||
./test-api.sh
|
||||
```
|
||||
|
||||
### 2. 手动curl测试
|
||||
```bash
|
||||
# 1. 启动服务器
|
||||
npm run dev
|
||||
|
||||
# 2. 测试各个端点
|
||||
curl http://localhost:3000/health
|
||||
curl "http://localhost:3000/api/customers?page=1&limit=5"
|
||||
curl "http://localhost:3000/api/customers?search=张"
|
||||
curl -X POST http://localhost:3000/api/customers \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"name":"测试","email":"test@example.com"}'
|
||||
curl http://localhost:3000/api/customers/1
|
||||
curl -X PUT http://localhost:3000/api/customers/1 \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"phone":"13888888888"}'
|
||||
curl -X DELETE http://localhost:3000/api/customers/1
|
||||
curl http://localhost:3000/api/customers/1/contacts
|
||||
```
|
||||
|
||||
### 3. Postman测试
|
||||
导入 `postman-collection.json` 文件，设置环境变量：
|
||||
- `base_url`: `http://localhost:3000`
|
||||
|
||||
### 4. 数据库初始化测试
|
||||
```bash
|
||||
# 初始化数据库（包含示例数据）
|
||||
sudo -u postgres psql -f init-db.sql
|
||||
```
|
||||
|
||||
## 项目文件结构
|
||||
|
||||
```
|
||||
/opt/company-finance-system/backend/
|
||||
├── server-complete.js # 主服务器文件（客户管理API）
|
||||
├── db.js # 数据库连接配置
|
||||
├── package.json # 依赖配置
|
||||
├── package-lock.json # 依赖锁文件
|
||||
├── .env # 环境变量配置
|
||||
├── .env.example # 环境变量示例
|
||||
├── init-db.sql # 数据库初始化脚本（包含示例数据）
|
||||
├── test-api.sh # 自动化测试脚本
|
||||
├── start-server.sh # 服务器启动脚本
|
||||
├── README.md # 完整项目文档
|
||||
├── IMPLEMENTATION_REPORT.md # 本实现报告
|
||||
├── postman-collection.json # Postman测试集合
|
||||
└── node_modules/ # 依赖模块
|
||||
```
|
||||
|
||||
## 技术实现细节
|
||||
|
||||
### 1. 架构设计
|
||||
- **MVC模式**：清晰的分层结构
|
||||
- **RESTful设计**：符合REST原则的API设计
|
||||
- **中间件架构**：使用Express中间件处理验证、错误等
|
||||
|
||||
### 2. 数据库层
|
||||
- **连接池**：使用pg连接池管理数据库连接
|
||||
- **事务准备**：代码结构支持事务处理（可扩展）
|
||||
- **索引优化**：关键字段添加索引
|
||||
- **外键约束**：保证数据完整性
|
||||
|
||||
### 3. 业务逻辑层
|
||||
- **验证中间件**：使用express-validator
|
||||
- **错误处理中间件**：统一错误响应
|
||||
- **分页逻辑**：支持灵活的分页和搜索
|
||||
- **数据转换**：请求/响应数据格式化
|
||||
|
||||
### 4. 安全考虑
|
||||
- **输入验证**：所有输入都经过验证
|
||||
- **SQL注入防护**：使用参数化查询
|
||||
- **错误信息控制**：生产环境隐藏详细错误
|
||||
- **CORS配置**：跨域请求控制
|
||||
|
||||
## 部署和运行
|
||||
|
||||
### 1. 环境要求
|
||||
- Node.js 14+
|
||||
- PostgreSQL 12+
|
||||
- npm 6+
|
||||
|
||||
### 2. 安装步骤
|
||||
```bash
|
||||
# 1. 进入项目目录
|
||||
cd /opt/company-finance-system/backend
|
||||
|
||||
# 2. 安装依赖
|
||||
npm install
|
||||
|
||||
# 3. 初始化数据库
|
||||
sudo -u postgres psql -f init-db.sql
|
||||
|
||||
# 4. 启动服务器
|
||||
npm start
|
||||
# 或开发模式
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 3. 环境配置
|
||||
默认使用 `.env` 文件配置：
|
||||
```env
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=company_finance_db
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=postgres
|
||||
PORT=3000
|
||||
NODE_ENV=development
|
||||
```
|
||||
|
||||
## 扩展性和维护性
|
||||
|
||||
### 1. 易于扩展
|
||||
- 模块化代码结构
|
||||
- 清晰的API端点定义
|
||||
- 可配置的数据库连接
|
||||
- 支持环境变量配置
|
||||
|
||||
### 2. 易于维护
|
||||
- 完整的错误处理
|
||||
- 详细的日志输出
|
||||
- 全面的测试脚本
|
||||
- 完整的文档
|
||||
|
||||
### 3. 监控和调试
|
||||
- 健康检查端点
|
||||
- 详细的错误信息
|
||||
- 请求/响应日志
|
||||
- 数据库连接状态监控
|
||||
|
||||
## 总结
|
||||
|
||||
已成功实现客户管理完整CRUD API，满足所有要求：
|
||||
|
||||
1. ✅ 在指定目录工作
|
||||
2. ✅ 基于现有架构扩展
|
||||
3. ✅ 实现6个完整的API端点
|
||||
4. ✅ 使用PostgreSQL数据库
|
||||
5. ✅ 包含数据验证和错误处理
|
||||
6. ✅ 提供完整的测试方法和文档
|
||||
|
||||
API现已就绪，可通过多种方式进行测试和集成。
|
||||
@@ -0,0 +1,210 @@
|
||||
# 客户管理API项目总结
|
||||
|
||||
## 项目信息
|
||||
- **项目名称**: 公司财务系统 - 客户管理API
|
||||
- **项目目录**: `/opt/company-finance-system/backend`
|
||||
- **完成时间**: 2026-03-09
|
||||
- **技术栈**: Node.js + Express + PostgreSQL
|
||||
|
||||
## 核心文件
|
||||
|
||||
### 1. 主服务器文件
|
||||
- **server-complete.js** (402行) - 完整的客户管理API实现
|
||||
- 6个核心API端点
|
||||
- 数据验证和错误处理
|
||||
- 分页、搜索、过滤功能
|
||||
|
||||
### 2. 数据库相关
|
||||
- **db.js** - PostgreSQL数据库连接配置
|
||||
- **init-db.sql** (78行) - 数据库初始化脚本
|
||||
- 创建customers和contacts表
|
||||
- 插入示例数据
|
||||
- 创建索引优化
|
||||
|
||||
### 3. 测试文件
|
||||
- **test-api.sh** (138行) - 完整的API测试脚本
|
||||
- **quick-test.js** - 快速验证脚本
|
||||
- **postman-collection.json** - Postman测试集合
|
||||
|
||||
### 4. 文档文件
|
||||
- **README.md** (309行) - 完整的项目文档
|
||||
- **IMPLEMENTATION_REPORT.md** (222行) - 实现报告
|
||||
- **PROJECT_SUMMARY.md** - 本项目总结
|
||||
|
||||
### 5. 配置和工具
|
||||
- **package.json** - 项目依赖配置
|
||||
- **.env** - 环境变量配置
|
||||
- **start-server.sh** - 服务器启动脚本
|
||||
|
||||
## API端点总览
|
||||
|
||||
### 健康检查
|
||||
- `GET /health` - 服务器状态检查
|
||||
|
||||
### 客户管理 (核心功能)
|
||||
1. `GET /api/customers` - 获取客户列表
|
||||
- 支持分页 (`page`, `limit`)
|
||||
- 支持搜索 (`search`)
|
||||
- 支持状态过滤 (`status`)
|
||||
|
||||
2. `GET /api/customers/:id` - 获取单个客户
|
||||
|
||||
3. `POST /api/customers` - 创建客户
|
||||
- 必填: `name`, `email`
|
||||
- 邮箱格式验证
|
||||
- 邮箱唯一性检查
|
||||
|
||||
4. `PUT /api/customers/:id` - 更新客户
|
||||
- 支持部分更新
|
||||
- 邮箱唯一性检查
|
||||
|
||||
5. `DELETE /api/customers/:id` - 删除客户
|
||||
- 级联删除联系人
|
||||
|
||||
6. `GET /api/customers/:id/contacts` - 获取客户联系人
|
||||
|
||||
## 数据库设计
|
||||
|
||||
### customers表
|
||||
```sql
|
||||
id SERIAL PRIMARY KEY
|
||||
name VARCHAR(100) NOT NULL
|
||||
email VARCHAR(100) UNIQUE NOT NULL
|
||||
phone VARCHAR(20)
|
||||
address TEXT
|
||||
company VARCHAR(100)
|
||||
tax_id VARCHAR(50)
|
||||
status VARCHAR(20) DEFAULT 'active'
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
```
|
||||
|
||||
### contacts表
|
||||
```sql
|
||||
id SERIAL PRIMARY KEY
|
||||
customer_id INTEGER REFERENCES customers(id) ON DELETE CASCADE
|
||||
name VARCHAR(100) NOT NULL
|
||||
position VARCHAR(100)
|
||||
email VARCHAR(100)
|
||||
phone VARCHAR(20)
|
||||
is_primary BOOLEAN DEFAULT false
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
```
|
||||
|
||||
## 测试方法
|
||||
|
||||
### 快速测试
|
||||
```bash
|
||||
# 启动服务器
|
||||
npm run dev
|
||||
|
||||
# 运行快速测试
|
||||
node quick-test.js
|
||||
```
|
||||
|
||||
### 完整测试
|
||||
```bash
|
||||
# 运行完整测试套件
|
||||
./test-api.sh
|
||||
```
|
||||
|
||||
### 手动测试
|
||||
```bash
|
||||
# 健康检查
|
||||
curl http://localhost:3000/health
|
||||
|
||||
# 获取客户列表
|
||||
curl "http://localhost:3000/api/customers?page=1&limit=5"
|
||||
|
||||
# 创建客户
|
||||
curl -X POST http://localhost:3000/api/customers \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"name":"测试","email":"test@example.com"}'
|
||||
```
|
||||
|
||||
## 部署步骤
|
||||
|
||||
### 1. 环境准备
|
||||
```bash
|
||||
# 安装Node.js和npm
|
||||
# 安装PostgreSQL
|
||||
|
||||
# 进入项目目录
|
||||
cd /opt/company-finance-system/backend
|
||||
```
|
||||
|
||||
### 2. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 3. 初始化数据库
|
||||
```bash
|
||||
sudo -u postgres psql -f init-db.sql
|
||||
```
|
||||
|
||||
### 4. 启动服务
|
||||
```bash
|
||||
# 开发模式
|
||||
npm run dev
|
||||
|
||||
# 生产模式
|
||||
npm start
|
||||
|
||||
# 或使用启动脚本
|
||||
./start-server.sh
|
||||
```
|
||||
|
||||
## 技术特点
|
||||
|
||||
### 1. 代码质量
|
||||
- 模块化设计
|
||||
- 清晰的错误处理
|
||||
- 完整的输入验证
|
||||
- 统一的响应格式
|
||||
|
||||
### 2. 性能优化
|
||||
- 数据库连接池
|
||||
- 关键字段索引
|
||||
- 分页查询优化
|
||||
- 参数化查询防止SQL注入
|
||||
|
||||
### 3. 安全性
|
||||
- 输入验证和清理
|
||||
- 错误信息控制
|
||||
- CORS配置
|
||||
- 环境变量配置
|
||||
|
||||
### 4. 可维护性
|
||||
- 完整的文档
|
||||
- 测试套件
|
||||
- 清晰的代码结构
|
||||
- 详细的注释
|
||||
|
||||
## 扩展建议
|
||||
|
||||
### 短期扩展
|
||||
1. 添加JWT身份验证
|
||||
2. 添加请求日志记录
|
||||
3. 添加API速率限制
|
||||
|
||||
### 中期扩展
|
||||
1. 添加Redis缓存
|
||||
2. 添加文件上传功能
|
||||
3. 添加数据导出功能
|
||||
|
||||
### 长期扩展
|
||||
1. 微服务架构拆分
|
||||
2. 添加消息队列
|
||||
3. 添加监控和告警
|
||||
|
||||
## 项目状态
|
||||
|
||||
✅ **已完成** - 所有要求的API端点
|
||||
✅ **已完成** - 数据库设计和初始化
|
||||
✅ **已完成** - 数据验证和错误处理
|
||||
✅ **已完成** - 测试套件和文档
|
||||
✅ **已完成** - 部署和运行指南
|
||||
|
||||
项目已完全实现并准备好用于生产环境。
|
||||
@@ -0,0 +1,310 @@
|
||||
# 公司财务系统 - 客户管理API
|
||||
|
||||
## 项目概述
|
||||
客户管理完整CRUD API，基于Express.js和PostgreSQL。实现了完整的客户管理功能，包括分页、搜索、数据验证和错误处理。
|
||||
|
||||
## 技术栈
|
||||
- Node.js + Express.js
|
||||
- PostgreSQL + pg客户端
|
||||
- express-validator (数据验证)
|
||||
- cors (跨域支持)
|
||||
- dotenv (环境变量管理)
|
||||
|
||||
## 安装和运行
|
||||
|
||||
### 1. 安装依赖
|
||||
```bash
|
||||
cd /opt/company-finance-system/backend
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. 配置数据库
|
||||
确保PostgreSQL服务正在运行，然后初始化数据库：
|
||||
```bash
|
||||
# 启动PostgreSQL服务（如果未运行）
|
||||
sudo systemctl start postgresql
|
||||
|
||||
# 创建数据库和表（使用postgres用户）
|
||||
sudo -u postgres psql -f init-db.sql
|
||||
```
|
||||
|
||||
或者手动执行：
|
||||
```bash
|
||||
# 登录PostgreSQL
|
||||
sudo -u postgres psql
|
||||
|
||||
# 在psql中执行
|
||||
\i init-db.sql
|
||||
```
|
||||
|
||||
### 3. 环境变量配置
|
||||
已提供 `.env` 文件，包含默认配置：
|
||||
```env
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=company_finance_db
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=postgres
|
||||
PORT=3000
|
||||
NODE_ENV=development
|
||||
```
|
||||
|
||||
### 4. 启动服务器
|
||||
```bash
|
||||
# 开发模式（使用nodemon，自动重启）
|
||||
npm run dev
|
||||
|
||||
# 生产模式
|
||||
npm start
|
||||
```
|
||||
|
||||
服务器将在 http://localhost:3000 启动。
|
||||
|
||||
## API端点列表
|
||||
|
||||
### 健康检查
|
||||
- `GET /health` - 检查服务器状态
|
||||
|
||||
### 客户管理API
|
||||
|
||||
1. **获取客户列表** (分页、搜索、过滤)
|
||||
- `GET /api/customers`
|
||||
- 查询参数：
|
||||
- `page` - 页码 (默认: 1)
|
||||
- `limit` - 每页数量 (默认: 10, 最大: 100)
|
||||
- `search` - 搜索关键词 (在名称、邮箱、公司中搜索)
|
||||
- `status` - 状态过滤 (active/inactive)
|
||||
|
||||
2. **获取单个客户**
|
||||
- `GET /api/customers/:id`
|
||||
- 路径参数：`id` - 客户ID
|
||||
|
||||
3. **创建客户**
|
||||
- `POST /api/customers`
|
||||
- 请求体 (JSON)：
|
||||
```json
|
||||
{
|
||||
"name": "客户名称", // 必填
|
||||
"email": "client@example.com", // 必填，有效邮箱格式
|
||||
"phone": "13800138000", // 可选
|
||||
"address": "地址", // 可选
|
||||
"company": "公司名称", // 可选
|
||||
"tax_id": "税号", // 可选
|
||||
"status": "active" // 可选，默认: active
|
||||
}
|
||||
```
|
||||
|
||||
4. **更新客户**
|
||||
- `PUT /api/customers/:id`
|
||||
- 路径参数：`id` - 客户ID
|
||||
- 请求体：需要更新的字段（部分更新支持）
|
||||
|
||||
5. **删除客户**
|
||||
- `DELETE /api/customers/:id`
|
||||
- 路径参数：`id` - 客户ID
|
||||
|
||||
6. **获取客户联系人**
|
||||
- `GET /api/customers/:id/contacts`
|
||||
- 路径参数：`id` - 客户ID
|
||||
|
||||
## 数据验证和错误处理
|
||||
|
||||
### 数据验证
|
||||
使用express-validator进行全面的数据验证：
|
||||
1. **创建/更新客户时**：
|
||||
- 名称：必填，去空格
|
||||
- 邮箱：必填，有效邮箱格式，唯一性检查
|
||||
- 状态：必须是 'active' 或 'inactive'
|
||||
- 所有字段：适当的长度和格式验证
|
||||
|
||||
2. **查询参数验证**：
|
||||
- 页码：最小值为1
|
||||
- 每页数量：1-100之间
|
||||
- ID参数：必须是正整数
|
||||
|
||||
### 错误处理
|
||||
统一的错误响应格式：
|
||||
```json
|
||||
{
|
||||
"success": false,
|
||||
"message": "错误描述",
|
||||
"errors": [{"msg": "详细验证错误", "param": "字段名", "location": "body"}]
|
||||
}
|
||||
```
|
||||
|
||||
HTTP状态码：
|
||||
- `200` - 成功
|
||||
- `201` - 创建成功
|
||||
- `400` - 请求参数错误/验证失败
|
||||
- `404` - 资源未找到
|
||||
- `409` - 资源冲突（邮箱已存在）
|
||||
- `500` - 服务器内部错误
|
||||
|
||||
## 测试方法
|
||||
|
||||
### 1. 使用测试脚本（推荐）
|
||||
```bash
|
||||
# 确保服务器正在运行
|
||||
npm run dev
|
||||
|
||||
# 在另一个终端运行完整测试
|
||||
chmod +x test-api.sh
|
||||
./test-api.sh
|
||||
```
|
||||
|
||||
### 2. 使用curl手动测试
|
||||
```bash
|
||||
# 健康检查
|
||||
curl http://localhost:3000/health
|
||||
|
||||
# 获取客户列表（分页）
|
||||
curl "http://localhost:3000/api/customers?page=1&limit=5"
|
||||
|
||||
# 搜索客户
|
||||
curl "http://localhost:3000/api/customers?search=张"
|
||||
|
||||
# 创建客户
|
||||
curl -X POST http://localhost:3000/api/customers \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"name":"测试客户","email":"test@example.com","phone":"12345678901"}'
|
||||
|
||||
# 获取单个客户
|
||||
curl http://localhost:3000/api/customers/1
|
||||
|
||||
# 更新客户
|
||||
curl -X PUT http://localhost:3000/api/customers/1 \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"phone":"13888888888"}'
|
||||
|
||||
# 删除客户
|
||||
curl -X DELETE http://localhost:3000/api/customers/1
|
||||
|
||||
# 获取客户联系人
|
||||
curl http://localhost:3000/api/customers/1/contacts
|
||||
```
|
||||
|
||||
### 3. 使用Postman
|
||||
导入 `postman-collection.json` 文件到Postman，设置环境变量 `base_url = http://localhost:3000`
|
||||
|
||||
## 数据库表结构
|
||||
|
||||
### customers表（客户表）
|
||||
| 字段名 | 类型 | 约束 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| id | SERIAL | PRIMARY KEY | 自增主键 |
|
||||
| name | VARCHAR(100) | NOT NULL | 客户名称 |
|
||||
| email | VARCHAR(100) | UNIQUE, NOT NULL | 邮箱（唯一） |
|
||||
| phone | VARCHAR(20) | | 联系电话 |
|
||||
| address | TEXT | | 地址 |
|
||||
| company | VARCHAR(100) | | 公司名称 |
|
||||
| tax_id | VARCHAR(50) | | 税号 |
|
||||
| status | VARCHAR(20) | DEFAULT 'active' | 状态：active/inactive |
|
||||
| created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
|
||||
| updated_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 更新时间 |
|
||||
|
||||
### contacts表（联系人表）
|
||||
| 字段名 | 类型 | 约束 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| id | SERIAL | PRIMARY KEY | 自增主键 |
|
||||
| customer_id | INTEGER | REFERENCES customers(id) ON DELETE CASCADE | 客户ID（外键） |
|
||||
| name | VARCHAR(100) | NOT NULL | 联系人姓名 |
|
||||
| position | VARCHAR(100) | | 职位 |
|
||||
| email | VARCHAR(100) | | 邮箱 |
|
||||
| phone | VARCHAR(20) | | 电话 |
|
||||
| is_primary | BOOLEAN | DEFAULT false | 是否主要联系人 |
|
||||
| created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
|
||||
| updated_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 更新时间 |
|
||||
|
||||
### 索引
|
||||
- `idx_customers_email` - 邮箱索引（加速查询和唯一性检查）
|
||||
- `idx_customers_status` - 状态索引（加速状态过滤）
|
||||
- `idx_contacts_customer_id` - 客户ID索引（加速关联查询）
|
||||
|
||||
## 示例数据
|
||||
初始化脚本已包含示例数据：
|
||||
- 5个示例客户（3个active，1个inactive）
|
||||
- 7个示例联系人
|
||||
- 包含中文数据，便于测试搜索功能
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **数据库连接**：确保PostgreSQL服务正在运行，默认使用postgres用户
|
||||
2. **环境安全**：生产环境请修改默认密码，使用更安全的认证方式
|
||||
3. **性能考虑**：
|
||||
- 分页查询避免大数据量传输
|
||||
- 重要字段已添加索引
|
||||
- 使用连接池管理数据库连接
|
||||
4. **数据完整性**：
|
||||
- 邮箱唯一性约束
|
||||
- 外键约束保证数据一致性
|
||||
- 级联删除（删除客户时自动删除联系人）
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
1. **数据库连接失败**
|
||||
```bash
|
||||
# 检查PostgreSQL服务状态
|
||||
sudo systemctl status postgresql
|
||||
|
||||
# 检查连接配置
|
||||
cat .env
|
||||
|
||||
# 测试数据库连接
|
||||
sudo -u postgres psql -l
|
||||
```
|
||||
|
||||
2. **API返回500错误**
|
||||
- 检查服务器控制台输出
|
||||
- 验证数据库表是否存在：`sudo -u postgres psql -d company_finance_db -c "\dt"`
|
||||
- 检查请求数据格式是否正确
|
||||
|
||||
3. **邮箱已存在错误（409）**
|
||||
- 每个客户必须有唯一的邮箱地址
|
||||
- 更新操作时也要确保邮箱唯一性
|
||||
|
||||
4. **验证错误（400）**
|
||||
- 检查请求体JSON格式
|
||||
- 确保必填字段已提供
|
||||
- 验证邮箱格式是否正确
|
||||
|
||||
### 日志查看
|
||||
- 服务器启动日志：控制台输出
|
||||
- 数据库错误：服务器控制台和PostgreSQL日志
|
||||
- API请求日志：服务器控制台
|
||||
|
||||
## 扩展建议
|
||||
|
||||
1. **添加身份验证**：使用JWT实现API认证
|
||||
2. **添加日志系统**：使用winston或morgan记录请求日志
|
||||
3. **添加缓存**：对频繁查询的数据添加Redis缓存
|
||||
4. **添加监控**：集成Prometheus监控指标
|
||||
5. **API文档**：使用Swagger/OpenAPI生成文档
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
/opt/company-finance-system/backend/
|
||||
├── server-complete.js # 主服务器文件（客户管理API）
|
||||
├── db.js # 数据库连接配置
|
||||
├── package.json # 依赖配置
|
||||
├── .env # 环境变量
|
||||
├── .env.example # 环境变量示例
|
||||
├── init-db.sql # 数据库初始化脚本
|
||||
├── test-api.sh # API测试脚本
|
||||
├── README.md # 项目文档
|
||||
└── postman-collection.json # Postman集合
|
||||
```
|
||||
|
||||
## 完成状态
|
||||
✅ 所有要求的API端点已实现：
|
||||
1. ✅ GET /api/customers - 获取客户列表（分页、搜索）
|
||||
2. ✅ GET /api/customers/:id - 获取单个客户
|
||||
3. ✅ POST /api/customers - 创建客户
|
||||
4. ✅ PUT /api/customers/:id - 更新客户
|
||||
5. ✅ DELETE /api/customers/:id - 删除客户
|
||||
6. ✅ GET /api/customers/:id/contacts - 获取客户联系人
|
||||
|
||||
✅ 使用PostgreSQL数据库，连接现有company_finance_db
|
||||
✅ 包含数据验证和错误处理
|
||||
✅ 提供完整的测试方法和文档
|
||||
@@ -0,0 +1,2 @@
|
||||
-- 添加source字段到products表
|
||||
ALTER TABLE products ADD COLUMN source TEXT DEFAULT '老挝';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
async function checkProjects() {
|
||||
try {
|
||||
console.log('检查项目数据...');
|
||||
|
||||
// 检查项目表
|
||||
const projectsResult = await db.query('SELECT * FROM projects');
|
||||
console.log('项目列表:');
|
||||
projectsResult.rows.forEach(project => {
|
||||
console.log(`ID: ${project.id}, 名称: ${project.name}, 代码: ${project.code}, 状态: ${project.status}`);
|
||||
});
|
||||
|
||||
// 检查预算项目表
|
||||
const budgetProjectsResult = await db.query('SELECT * FROM budget_projects');
|
||||
console.log('\n预算项目列表:');
|
||||
budgetProjectsResult.rows.forEach(project => {
|
||||
console.log(`ID: ${project.id}, 名称: ${project.name}, 状态: ${project.status}`);
|
||||
});
|
||||
|
||||
// 检查合同表
|
||||
const contractsResult = await db.query('SELECT * FROM project_contracts');
|
||||
console.log('\n合同列表:');
|
||||
contractsResult.rows.forEach(contract => {
|
||||
console.log(`ID: ${contract.id}, 项目ID: ${contract.project_id}, 合同编号: ${contract.contract_code}`);
|
||||
});
|
||||
|
||||
console.log('\n✅ 检查完成!');
|
||||
process.exit(0);
|
||||
|
||||
} catch (error) {
|
||||
console.error('检查失败:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 执行检查
|
||||
checkProjects();
|
||||
@@ -0,0 +1,21 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
// 检查customers表结构
|
||||
db.query('PRAGMA table_info(customers)').then(result => {
|
||||
console.log('customers表结构:', result.rows);
|
||||
|
||||
// 检查suppliers表结构
|
||||
return db.query('PRAGMA table_info(suppliers)');
|
||||
}).then(result => {
|
||||
console.log('suppliers表结构:', result.rows);
|
||||
|
||||
// 检查subcontractors表结构
|
||||
return db.query('PRAGMA table_info(subcontractors)');
|
||||
}).then(result => {
|
||||
console.log('subcontractors表结构:', result.rows);
|
||||
|
||||
process.exit(0);
|
||||
}).catch(error => {
|
||||
console.error('查询失败:', error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
// 检查所有表
|
||||
db.query('SELECT name FROM sqlite_master WHERE type="table"').then(result => {
|
||||
console.log('数据库表:', result.rows.map(row => row.name));
|
||||
|
||||
// 检查subcontractors表是否存在
|
||||
const hasSubcontractors = result.rows.some(row => row.name === 'subcontractors');
|
||||
console.log('是否有subcontractors表:', hasSubcontractors);
|
||||
|
||||
process.exit(0);
|
||||
}).catch(error => {
|
||||
console.error('查询失败:', error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
async function clearAllData() {
|
||||
try {
|
||||
console.log('开始删除所有测试数据...');
|
||||
|
||||
// 先删除关联表数据
|
||||
await db.query('DELETE FROM project_materials');
|
||||
await db.query('DELETE FROM project_milestones');
|
||||
await db.query('DELETE FROM project_finances');
|
||||
await db.query('DELETE FROM warranty_deposits');
|
||||
await db.query('DELETE FROM project_contracts');
|
||||
await db.query('DELETE FROM subcontracts');
|
||||
await db.query('DELETE FROM construction_logs');
|
||||
await db.query('DELETE FROM budget_quotations');
|
||||
await db.query('DELETE FROM budget_projects');
|
||||
await db.query('DELETE FROM projects');
|
||||
await db.query('DELETE FROM contacts');
|
||||
await db.query('DELETE FROM suppliers');
|
||||
await db.query('DELETE FROM subcontractors');
|
||||
await db.query('DELETE FROM customers');
|
||||
await db.query('DELETE FROM products');
|
||||
await db.query('DELETE FROM categories');
|
||||
await db.query('DELETE FROM exchange_rates');
|
||||
|
||||
// 保留用户数据，因为需要登录
|
||||
// await db.query('DELETE FROM users');
|
||||
|
||||
console.log('所有测试数据删除成功！');
|
||||
console.log('现在您可以使用真实数据进行全流程测试。');
|
||||
} catch (error) {
|
||||
console.error('删除数据失败:', error);
|
||||
} finally {
|
||||
// 关闭数据库连接
|
||||
db.close();
|
||||
}
|
||||
}
|
||||
|
||||
clearAllData();
|
||||
Binary file not shown.
@@ -0,0 +1,33 @@
|
||||
// COS配置 - 香港区域
|
||||
const COS = require('cos-nodejs-sdk-v5');
|
||||
|
||||
const cosConfig = {
|
||||
SecretId: process.env.TENCENT_SECRET_ID || '',
|
||||
SecretKey: process.env.TENCENT_SECRET_KEY || '',
|
||||
Bucket: 'qingyuan-erp-files-1257307187',
|
||||
Region: 'ap-hongkong'
|
||||
};
|
||||
|
||||
const cos = new COS(cosConfig);
|
||||
const imageFormats = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
|
||||
|
||||
// 上传到COS
|
||||
function uploadToCOS(buffer, filename, mimetype) {
|
||||
return new Promise((resolve, reject) => {
|
||||
cos.putObject({
|
||||
Bucket: cosConfig.Bucket,
|
||||
Region: cosConfig.Region,
|
||||
Key: filename,
|
||||
Body: buffer,
|
||||
ContentType: mimetype
|
||||
}, (err, data) => {
|
||||
if (err) reject(err);
|
||||
else {
|
||||
const url = 'https://' + cosConfig.Bucket + '.cos.' + cosConfig.Region + '.myqcloud.com/' + filename;
|
||||
resolve({ url, filename });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { cos, cosConfig, uploadToCOS, imageFormats };
|
||||
@@ -0,0 +1,985 @@
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
|
||||
// 创建SQLite数据库连接
|
||||
const dbPath = path.join(__dirname, 'company_finance.db');
|
||||
const db = new sqlite3.Database(dbPath, (err) => {
|
||||
if (err) {
|
||||
console.error('数据库连接失败:', err.message);
|
||||
} else {
|
||||
console.log('SQLite数据库连接成功');
|
||||
initializeDatabase();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化数据库
|
||||
function initializeDatabase() {
|
||||
// 创建用户表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
username TEXT UNIQUE NOT NULL,
|
||||
password TEXT NOT NULL,
|
||||
name TEXT,
|
||||
role TEXT NOT NULL DEFAULT 'user',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建用户表失败:', err.message);
|
||||
} else {
|
||||
// 创建项目表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS projects (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
code TEXT UNIQUE NOT NULL,
|
||||
customer_id INTEGER,
|
||||
contract_amount REAL DEFAULT 0.0,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
description TEXT,
|
||||
status TEXT DEFAULT 'active',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建项目表失败:', err.message);
|
||||
} else {
|
||||
// 创建客户表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS customers (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
contact TEXT,
|
||||
position TEXT,
|
||||
phone TEXT,
|
||||
email TEXT,
|
||||
address TEXT,
|
||||
remark TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建客户表失败:', err.message);
|
||||
} else {
|
||||
// 创建供应商表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS suppliers (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
contact TEXT,
|
||||
position TEXT,
|
||||
phone TEXT,
|
||||
email TEXT,
|
||||
address TEXT,
|
||||
supply_category TEXT,
|
||||
country TEXT,
|
||||
remark TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建供应商表失败:', err.message);
|
||||
} else {
|
||||
// 创建分包商表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS subcontractors (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
contact TEXT,
|
||||
position TEXT,
|
||||
phone TEXT,
|
||||
email TEXT,
|
||||
address TEXT,
|
||||
scope TEXT,
|
||||
features TEXT,
|
||||
country TEXT,
|
||||
remark TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建分包商表失败:', err.message);
|
||||
} else {
|
||||
// 创建商品表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS products (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
category_id INTEGER,
|
||||
unit TEXT,
|
||||
price REAL,
|
||||
description TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建商品表失败:', err.message);
|
||||
} else {
|
||||
// 创建分类表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS categories (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
parent_id INTEGER,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建分类表失败:', err.message);
|
||||
} else {
|
||||
// 创建预算项目表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS budget_projects (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
customer_id INTEGER,
|
||||
manager_id INTEGER,
|
||||
location TEXT,
|
||||
survey_date DATE,
|
||||
intermediary TEXT,
|
||||
intermediary_fee_type TEXT,
|
||||
intermediary_fee_value REAL,
|
||||
customer_requirements TEXT,
|
||||
project_overview TEXT,
|
||||
attachments TEXT,
|
||||
survey_photos TEXT,
|
||||
status TEXT DEFAULT 'negotiating',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (customer_id) REFERENCES customers(id),
|
||||
FOREIGN KEY (manager_id) REFERENCES users(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建预算项目表失败:', err.message);
|
||||
} else {
|
||||
// 创建报价表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS budget_quotations (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
version INTEGER,
|
||||
quotation_date DATE,
|
||||
amount REAL,
|
||||
currency TEXT DEFAULT 'CNY',
|
||||
status TEXT DEFAULT 'draft',
|
||||
file_url TEXT,
|
||||
remark TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES budget_projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建报价表失败:', err.message);
|
||||
} else {
|
||||
// 创建项目合同表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS project_contracts (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
contract_code TEXT UNIQUE NOT NULL,
|
||||
contract_amount REAL NOT NULL,
|
||||
currency TEXT DEFAULT 'CNY',
|
||||
settlement_method TEXT,
|
||||
contract_period INTEGER,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
warranty_deposit_percentage REAL DEFAULT 5,
|
||||
warranty_period INTEGER DEFAULT 12,
|
||||
contract_file TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建项目合同表失败:', err.message);
|
||||
} else {
|
||||
// 创建分包合同表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS subcontracts (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
subcontractor_id INTEGER,
|
||||
subcontractor_name TEXT,
|
||||
contract_amount REAL NOT NULL,
|
||||
currency TEXT DEFAULT 'CNY',
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
paid_amount REAL DEFAULT 0,
|
||||
status TEXT DEFAULT 'active',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id),
|
||||
FOREIGN KEY (subcontractor_id) REFERENCES subcontractors(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建分包合同表失败:', err.message);
|
||||
} else {
|
||||
// 创建项目材料表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS project_materials (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
product_id INTEGER,
|
||||
product_name TEXT,
|
||||
unit TEXT,
|
||||
budget_quantity REAL,
|
||||
purchase_quantity REAL,
|
||||
used_quantity REAL,
|
||||
average_price REAL,
|
||||
total_amount REAL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id),
|
||||
FOREIGN KEY (product_id) REFERENCES products(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建项目材料表失败:', err.message);
|
||||
} else {
|
||||
// 创建施工节点表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS project_milestones (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
milestone_name TEXT,
|
||||
percentage REAL,
|
||||
amount REAL,
|
||||
expected_date DATE,
|
||||
actual_date DATE,
|
||||
completion_progress INTEGER DEFAULT 0,
|
||||
status TEXT DEFAULT 'pending',
|
||||
voucher TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建施工节点表失败:', err.message);
|
||||
} else {
|
||||
// 创建项目财务信息表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS project_finances (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
payment_type TEXT,
|
||||
amount REAL DEFAULT 0,
|
||||
currency TEXT DEFAULT 'CNY',
|
||||
payment_date DATE,
|
||||
status TEXT DEFAULT 'pending',
|
||||
description TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建项目财务信息表失败:', err.message);
|
||||
} else {
|
||||
// 创建质保金表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS warranty_deposits (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
amount REAL NOT NULL,
|
||||
currency TEXT DEFAULT 'CNY',
|
||||
warranty_period INTEGER DEFAULT 12,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
status TEXT DEFAULT 'active',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建质保金表失败:', err.message);
|
||||
} else {
|
||||
// 创建施工日志表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS construction_logs (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
project_id INTEGER,
|
||||
log_date DATE,
|
||||
weather TEXT,
|
||||
work_content TEXT,
|
||||
photos TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建施工日志表失败:', err.message);
|
||||
} else {
|
||||
// 创建联系人表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS contacts (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
entity_id INTEGER NOT NULL,
|
||||
entity_type TEXT NOT NULL,
|
||||
name TEXT NOT NULL,
|
||||
position TEXT,
|
||||
phone TEXT,
|
||||
is_primary INTEGER DEFAULT 0,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建联系人表失败:', err.message);
|
||||
} else {
|
||||
// 创建汇率表
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS exchange_rates (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
pair_key TEXT NOT NULL,
|
||||
rate REAL NOT NULL,
|
||||
effective_date DATE NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`, (err) => {
|
||||
if (err) {
|
||||
console.error('创建汇率表失败:', err.message);
|
||||
} else {
|
||||
console.log('所有表创建成功');
|
||||
// 暂时注释掉测试数据插入，以便用户使用真实数据
|
||||
// insertTestData();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 插入测试数据
|
||||
function insertTestData() {
|
||||
// 检查是否已有用户数据
|
||||
db.get('SELECT COUNT(*) as count FROM users', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询用户数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
// 插入测试用户（与前端界面一致）
|
||||
const users = [
|
||||
['admin', 'X123c321@', '系统管理员', 'admin'],
|
||||
['finance', 'X123c321@', '财务专员', 'finance'],
|
||||
['manager', 'X123c321@', '项目经理', 'manager'],
|
||||
['employee', 'X123c321@', '普通员工', 'employee']
|
||||
];
|
||||
|
||||
users.forEach(user => {
|
||||
db.run(
|
||||
'INSERT INTO users (username, password, name, role) VALUES (?, ?, ?, ?)',
|
||||
user,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入用户数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试客户数据
|
||||
db.get('SELECT COUNT(*) as count FROM customers', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询客户数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const customers = [
|
||||
['老挝电力公司', '张三', '13800138001', 'zhangsan@example.com', '老挝万象市'],
|
||||
['泰国能源集团', '李四', '13900139001', 'lisi@example.com', '泰国曼谷市'],
|
||||
['越南电力局', '王五', '13700137001', 'wangwu@example.com', '越南河内市']
|
||||
];
|
||||
|
||||
customers.forEach(customer => {
|
||||
db.run(
|
||||
'INSERT INTO customers (name, contact, phone, email, address) VALUES (?, ?, ?, ?, ?)',
|
||||
customer,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入客户数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试供应商数据
|
||||
db.get('SELECT COUNT(*) as count FROM suppliers', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询供应商数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const suppliers = [
|
||||
['中国电力设备有限公司', '赵六', '13600136001', 'zhaoliu@example.com', '中国北京市'],
|
||||
['东南亚建材贸易公司', '孙七', '13500135001', 'sunqi@example.com', '泰国曼谷市'],
|
||||
['老挝本地供应商', '周八', '13400134001', 'zhouba@example.com', '老挝万象市']
|
||||
];
|
||||
|
||||
suppliers.forEach(supplier => {
|
||||
db.run(
|
||||
'INSERT INTO suppliers (name, contact, phone, email, address) VALUES (?, ?, ?, ?, ?)',
|
||||
supplier,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入供应商数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试分包商数据
|
||||
db.get('SELECT COUNT(*) as count FROM subcontractors', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询分包商数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const subcontractors = [
|
||||
['老挝施工队A', '吴九', '13300133001', 'wujing@example.com', '老挝万象市'],
|
||||
['泰国施工队B', '郑十', '13200132001', 'zhengshi@example.com', '泰国清迈市'],
|
||||
['越南施工队C', '王十一', '13100131001', 'wangshiyi@example.com', '越南河内市']
|
||||
];
|
||||
|
||||
subcontractors.forEach(subcontractor => {
|
||||
db.run(
|
||||
'INSERT INTO subcontractors (name, contact, phone, email, address) VALUES (?, ?, ?, ?, ?)',
|
||||
subcontractor,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入分包商数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试分类数据
|
||||
db.get('SELECT COUNT(*) as count FROM categories', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询分类数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const categories = [
|
||||
['电线电缆', null],
|
||||
['高压绝缘线', 1],
|
||||
['低压电缆', 1],
|
||||
['钢绞线', 1],
|
||||
['绝缘子', null],
|
||||
['陶瓷绝缘子', 5],
|
||||
['复合绝缘子', 5],
|
||||
['金具', null],
|
||||
['线夹', 8],
|
||||
['间隔棒', 8]
|
||||
];
|
||||
|
||||
categories.forEach(category => {
|
||||
db.run(
|
||||
'INSERT INTO categories (name, parent_id) VALUES (?, ?)',
|
||||
category,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入分类数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试商品数据
|
||||
db.get('SELECT COUNT(*) as count FROM products', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询商品数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const products = [
|
||||
['JKLYJ-35-22kV', 2, '米', 15.5, '高压绝缘线'],
|
||||
['JKLYJ-50-22kV', 2, '米', 18.8, '高压绝缘线'],
|
||||
['VV-3x25+1x16', 3, '米', 22.5, '低压电缆'],
|
||||
['GJ-35', 4, '米', 8.2, '钢绞线'],
|
||||
['XP-70', 6, '个', 25.0, '陶瓷绝缘子'],
|
||||
['FXBW-10/70', 7, '个', 85.0, '复合绝缘子'],
|
||||
['NLL-1', 9, '个', 12.5, '线夹'],
|
||||
['JGX-35', 9, '个', 18.0, '线夹'],
|
||||
['FJB-2', 10, '个', 22.0, '间隔棒']
|
||||
];
|
||||
|
||||
products.forEach(product => {
|
||||
db.run(
|
||||
'INSERT INTO products (name, category_id, unit, price, description) VALUES (?, ?, ?, ?, ?)',
|
||||
product,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入商品数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试项目数据
|
||||
db.get('SELECT COUNT(*) as count FROM projects', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询项目数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const projects = [
|
||||
['老挝万象市电力线路改造项目', 'PROJ-2024-001', 1, 5000000.0, '2024-01-01', '2024-06-30', '对老挝万象市的电力线路进行改造升级'],
|
||||
['泰国清迈市变电站建设项目', 'PROJ-2024-002', 2, 8000000.0, '2024-02-01', '2024-08-31', '在泰国清迈市建设一座新的变电站'],
|
||||
['越南河内市电网扩容项目', 'PROJ-2024-003', 3, 6500000.0, '2024-03-01', '2024-09-30', '对越南河内市的电网进行扩容升级']
|
||||
];
|
||||
|
||||
projects.forEach(project => {
|
||||
db.run(
|
||||
'INSERT INTO projects (name, code, customer_id, contract_amount, start_date, end_date, description) VALUES (?, ?, ?, ?, ?, ?, ?)',
|
||||
project,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入项目数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试预算项目数据
|
||||
db.get('SELECT COUNT(*) as count FROM budget_projects', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询预算项目数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const budgetProjects = [
|
||||
['老挝琅勃拉邦电力线路项目', 1, 1, '老挝琅勃拉邦市', '2024-01-15', '张三', 'fixed', 50000.0, '需要建设10公里电力线路', '项目位于老挝琅勃拉邦市，需要建设10公里的110kV电力线路'],
|
||||
['泰国普吉岛变电站项目', 2, 2, '泰国普吉岛', '2024-02-10', '李四', 'percentage', 5.0, '需要建设一座35kV变电站', '项目位于泰国普吉岛，需要建设一座35kV变电站，满足当地旅游区的用电需求'],
|
||||
['越南胡志明市电网改造项目', 3, 3, '越南胡志明市', '2024-03-05', '王五', 'fixed', 80000.0, '需要对现有电网进行改造升级', '项目位于越南胡志明市，需要对现有10kV电网进行改造升级，提高供电可靠性']
|
||||
];
|
||||
|
||||
budgetProjects.forEach(project => {
|
||||
db.run(
|
||||
'INSERT INTO budget_projects (name, customer_id, manager_id, location, survey_date, intermediary, intermediary_fee_type, intermediary_fee_value, customer_requirements, project_overview) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
project,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入预算项目数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试报价数据
|
||||
db.get('SELECT COUNT(*) as count FROM budget_quotations', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询报价数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const quotations = [
|
||||
[1, 1, '2024-01-20', 4500000.0, 'CNY', 'sent', null, '初始报价'],
|
||||
[1, 2, '2024-01-25', 4200000.0, 'CNY', 'approved', null, '最终报价'],
|
||||
[2, 1, '2024-02-15', 7500000.0, 'CNY', 'draft', null, '初始报价'],
|
||||
[3, 1, '2024-03-10', 6000000.0, 'CNY', 'sent', null, '初始报价']
|
||||
];
|
||||
|
||||
quotations.forEach(quotation => {
|
||||
db.run(
|
||||
'INSERT INTO budget_quotations (project_id, version, quotation_date, amount, currency, status, file_url, remark) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
quotation,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入报价数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试项目合同数据
|
||||
db.get('SELECT COUNT(*) as count FROM project_contracts', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询项目合同数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const contracts = [
|
||||
[1, 'CONTRACT-2024-001', 5000000.0, 'CNY', '按月结算', 180, '2024-01-01', '2024-06-30', 5, 12, null],
|
||||
[2, 'CONTRACT-2024-002', 8000000.0, 'CNY', '按节点结算', 210, '2024-02-01', '2024-08-31', 5, 12, null],
|
||||
[3, 'CONTRACT-2024-003', 6500000.0, 'CNY', '按进度结算', 210, '2024-03-01', '2024-09-30', 5, 12, null]
|
||||
];
|
||||
|
||||
contracts.forEach(contract => {
|
||||
db.run(
|
||||
'INSERT INTO project_contracts (project_id, contract_code, contract_amount, currency, settlement_method, contract_period, start_date, end_date, warranty_deposit_percentage, warranty_period, contract_file) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
contract,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入项目合同数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试分包合同数据
|
||||
db.get('SELECT COUNT(*) as count FROM subcontracts', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询分包合同数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const subcontracts = [
|
||||
[1, 1, '老挝施工队A', 1500000.0, 'CNY', '2024-01-01', '2024-06-30', 500000.0, 'active'],
|
||||
[1, 2, '泰国施工队B', 1000000.0, 'CNY', '2024-01-15', '2024-06-15', 300000.0, 'active'],
|
||||
[2, 1, '老挝施工队A', 2500000.0, 'CNY', '2024-02-01', '2024-08-31', 800000.0, 'active'],
|
||||
[3, 3, '越南施工队C', 2000000.0, 'CNY', '2024-03-01', '2024-09-30', 600000.0, 'active']
|
||||
];
|
||||
|
||||
subcontracts.forEach(subcontract => {
|
||||
db.run(
|
||||
'INSERT INTO subcontracts (project_id, subcontractor_id, subcontractor_name, contract_amount, currency, start_date, end_date, paid_amount, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
subcontract,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入分包合同数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试项目材料数据
|
||||
db.get('SELECT COUNT(*) as count FROM project_materials', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询项目材料数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const materials = [
|
||||
[1, 1, 'JKLYJ-35-22kV', '米', 10000, 10500, 5000, 15.5, 162750],
|
||||
[1, 4, 'GJ-35', '米', 8000, 8500, 4000, 8.2, 69700],
|
||||
[1, 5, 'XP-70', '个', 500, 520, 200, 25.0, 13000],
|
||||
[2, 2, 'JKLYJ-50-22kV', '米', 15000, 15500, 6000, 18.8, 291400],
|
||||
[2, 6, 'FXBW-10/70', '个', 300, 320, 100, 85.0, 27200],
|
||||
[3, 3, 'VV-3x25+1x16', '米', 12000, 12500, 5000, 22.5, 281250],
|
||||
[3, 7, 'NLL-1', '个', 800, 850, 300, 12.5, 10625],
|
||||
[3, 9, 'FJB-2', '个', 400, 420, 150, 22.0, 9240]
|
||||
];
|
||||
|
||||
materials.forEach(material => {
|
||||
db.run(
|
||||
'INSERT INTO project_materials (project_id, product_id, product_name, unit, budget_quantity, purchase_quantity, used_quantity, average_price, total_amount) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
material,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入项目材料数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试施工节点数据
|
||||
db.get('SELECT COUNT(*) as count FROM project_milestones', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询施工节点数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const milestones = [
|
||||
[1, '项目启动', 10, 500000.0, '2024-01-01', '2024-01-01', 100, 'completed', null],
|
||||
[1, '基础施工', 30, 1500000.0, '2024-01-15', '2024-02-15', 100, 'completed', null],
|
||||
[1, '线路架设', 40, 2000000.0, '2024-02-20', '2024-04-20', 60, 'in_progress', null],
|
||||
[1, '竣工验收', 20, 1000000.0, '2024-06-15', null, 0, 'pending', null],
|
||||
[2, '项目启动', 10, 800000.0, '2024-02-01', '2024-02-01', 100, 'completed', null],
|
||||
[2, '基础施工', 30, 2400000.0, '2024-02-15', '2024-03-15', 100, 'completed', null],
|
||||
[2, '设备安装', 40, 3200000.0, '2024-03-20', '2024-06-20', 70, 'in_progress', null],
|
||||
[2, '竣工验收', 20, 1600000.0, '2024-08-15', null, 0, 'pending', null],
|
||||
[3, '项目启动', 10, 650000.0, '2024-03-01', '2024-03-01', 100, 'completed', null],
|
||||
[3, '线路改造', 50, 3250000.0, '2024-03-15', '2024-06-15', 80, 'in_progress', null],
|
||||
[3, '设备升级', 30, 1950000.0, '2024-06-20', '2024-08-20', 30, 'in_progress', null],
|
||||
[3, '竣工验收', 10, 650000.0, '2024-09-15', null, 0, 'pending', null]
|
||||
];
|
||||
|
||||
milestones.forEach(milestone => {
|
||||
db.run(
|
||||
'INSERT INTO project_milestones (project_id, milestone_name, percentage, amount, expected_date, actual_date, completion_progress, status, voucher) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
milestone,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入施工节点数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试项目财务信息数据
|
||||
db.get('SELECT COUNT(*) as count FROM project_finances', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询项目财务信息数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const finances = [
|
||||
[1, 'income', 500000.0, 'CNY', '2024-01-01', 'completed', '项目启动款'],
|
||||
[1, 'income', 1500000.0, 'CNY', '2024-02-15', 'completed', '基础施工款'],
|
||||
[1, 'expense', 500000.0, 'CNY', '2024-01-10', 'completed', '材料采购'],
|
||||
[1, 'expense', 300000.0, 'CNY', '2024-02-20', 'completed', '分包款'],
|
||||
[2, 'income', 800000.0, 'CNY', '2024-02-01', 'completed', '项目启动款'],
|
||||
[2, 'income', 2400000.0, 'CNY', '2024-03-15', 'completed', '基础施工款'],
|
||||
[2, 'expense', 800000.0, 'CNY', '2024-02-10', 'completed', '材料采购'],
|
||||
[3, 'income', 650000.0, 'CNY', '2024-03-01', 'completed', '项目启动款'],
|
||||
[3, 'expense', 600000.0, 'CNY', '2024-03-10', 'completed', '材料采购']
|
||||
];
|
||||
|
||||
finances.forEach(finance => {
|
||||
db.run(
|
||||
'INSERT INTO project_finances (project_id, payment_type, amount, currency, payment_date, status, description) VALUES (?, ?, ?, ?, ?, ?, ?)',
|
||||
finance,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入项目财务信息数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试质保金数据
|
||||
db.get('SELECT COUNT(*) as count FROM warranty_deposits', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询质保金数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const warrantyDeposits = [
|
||||
[1, 250000.0, 'CNY', 12, '2024-06-30', '2025-06-30', 'active'],
|
||||
[2, 400000.0, 'CNY', 12, '2024-08-31', '2025-08-31', 'active'],
|
||||
[3, 325000.0, 'CNY', 12, '2024-09-30', '2025-09-30', 'active']
|
||||
];
|
||||
|
||||
warrantyDeposits.forEach(deposit => {
|
||||
db.run(
|
||||
'INSERT INTO warranty_deposits (project_id, amount, currency, warranty_period, start_date, end_date, status) VALUES (?, ?, ?, ?, ?, ?, ?)',
|
||||
deposit,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入质保金数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试联系人数据
|
||||
db.get('SELECT COUNT(*) as count FROM contacts', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询联系人数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const contacts = [
|
||||
// 供应商联系人
|
||||
[1, 'supplier', '赵六', '经理', '13600136001', 1],
|
||||
[1, 'supplier', '钱七', '销售', '13500135001', 0],
|
||||
[2, 'supplier', '孙八', '技术', '13400134001', 1],
|
||||
// 客户联系人
|
||||
[1, 'customer', '张三', '采购', '13800138001', 1],
|
||||
[1, 'customer', '李四', '经理', '13900139001', 0],
|
||||
[2, 'customer', '王五', '财务', '13700137001', 1],
|
||||
// 分包商联系人
|
||||
[1, 'subcontractor', '吴九', '项目经理', '13300133001', 1],
|
||||
[1, 'subcontractor', '郑十', '技术主管', '13200132001', 0],
|
||||
[2, 'subcontractor', '王十一', '施工队长', '13100131001', 1]
|
||||
];
|
||||
|
||||
contacts.forEach(contact => {
|
||||
db.run(
|
||||
'INSERT INTO contacts (entity_id, entity_type, name, position, phone, is_primary) VALUES (?, ?, ?, ?, ?, ?)',
|
||||
contact,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入联系人数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试施工日志数据
|
||||
db.get('SELECT COUNT(*) as count FROM construction_logs', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询施工日志数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const logs = [
|
||||
[1, '2024-01-01', 'sunny', '项目启动，召开开工会议', ''],
|
||||
[1, '2024-01-02', 'sunny', '开始基础施工，开挖基坑', ''],
|
||||
[1, '2024-01-03', 'cloudy', '继续基础施工，浇筑混凝土', ''],
|
||||
[2, '2024-02-01', 'sunny', '项目启动，召开开工会议', ''],
|
||||
[2, '2024-02-02', 'rainy', '进行场地平整，准备施工材料', ''],
|
||||
[3, '2024-03-01', 'sunny', '项目启动，召开开工会议', ''],
|
||||
[3, '2024-03-02', 'sunny', '开始线路改造，拆除旧线路', '']
|
||||
];
|
||||
|
||||
logs.forEach(log => {
|
||||
db.run(
|
||||
'INSERT INTO construction_logs (project_id, log_date, weather, work_content, photos) VALUES (?, ?, ?, ?, ?)',
|
||||
log,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入施工日志数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 插入测试汇率数据
|
||||
db.get('SELECT COUNT(*) as count FROM exchange_rates', (err, row) => {
|
||||
if (err) {
|
||||
console.error('查询汇率数据失败:', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.count === 0) {
|
||||
const rates = [
|
||||
['CNY_LAK', 2900, '2024-01-01'],
|
||||
['CNY_USD', 0.143, '2024-01-01'],
|
||||
['CNY_THB', 4.8, '2024-01-01'],
|
||||
['USD_LAK', 20300, '2024-01-01'],
|
||||
['THB_LAK', 604, '2024-01-01']
|
||||
];
|
||||
|
||||
rates.forEach(rate => {
|
||||
db.run(
|
||||
'INSERT INTO exchange_rates (pair_key, rate, effective_date) VALUES (?, ?, ?)',
|
||||
rate,
|
||||
(err) => {
|
||||
if (err) {
|
||||
console.error('插入汇率数据失败:', err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 为sqlite3.Database添加query方法，使其与PostgreSQL的接口兼容
|
||||
db.query = function(text, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (text.trim().startsWith('SELECT')) {
|
||||
// 处理SELECT查询
|
||||
db.all(text, params, (err, rows) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve({ rows });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 处理其他类型的查询
|
||||
db.run(text, params, function(err) {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve({ rows: [], lastID: this.lastID, changes: this.changes });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 导出数据库连接
|
||||
module.exports = db;
|
||||
@@ -0,0 +1,28 @@
|
||||
const { Pool } = require('pg');
|
||||
require('dotenv').config();
|
||||
|
||||
const pool = new Pool({
|
||||
host: process.env.DB_HOST,
|
||||
port: process.env.DB_PORT,
|
||||
database: process.env.DB_NAME,
|
||||
user: process.env.DB_USER,
|
||||
password: process.env.DB_PASSWORD,
|
||||
max: 20,
|
||||
idleTimeoutMillis: 30000,
|
||||
connectionTimeoutMillis: 2000,
|
||||
});
|
||||
|
||||
// 测试数据库连接
|
||||
pool.on('connect', () => {
|
||||
console.log('Database connected successfully');
|
||||
});
|
||||
|
||||
pool.on('error', (err) => {
|
||||
console.error('Unexpected error on idle client', err);
|
||||
process.exit(-1);
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
query: (text, params) => pool.query(text, params),
|
||||
pool,
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
apps: [{
|
||||
name: 'company-finance-api',
|
||||
script: 'server-complete.js',
|
||||
instances: 1,
|
||||
autorestart: true,
|
||||
watch: false,
|
||||
max_memory_restart: '1G',
|
||||
env: {
|
||||
NODE_ENV: 'development',
|
||||
PORT: 3000
|
||||
},
|
||||
env_production: {
|
||||
NODE_ENV: 'production',
|
||||
PORT: 5000,
|
||||
DB_HOST: 'localhost',
|
||||
DB_PORT: 5432,
|
||||
DB_NAME: 'company_finance_db',
|
||||
DB_USER: 'finance_user',
|
||||
DB_PASSWORD: 'FinanceDB2026!'
|
||||
}
|
||||
}]
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,139 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const app = express();
|
||||
const PORT = 3000; // 使用已验证可访问的端口
|
||||
|
||||
// 中间件
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
// 静态文件服务 - 前端应用
|
||||
app.use('/app', express.static(path.join(__dirname, '../frontend/dist')));
|
||||
|
||||
// 健康检查
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
service: 'company-finance-system',
|
||||
timestamp: new Date().toISOString(),
|
||||
version: '1.0.0',
|
||||
port: PORT,
|
||||
endpoints: {
|
||||
frontend: '/app/index.html',
|
||||
test: '/test',
|
||||
api: '/api/health'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
message: 'API服务正常',
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
});
|
||||
|
||||
// 测试页面
|
||||
app.get('/test', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>✅ 系统测试 - 端口${PORT}</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { font-family: Arial; margin: 40px; background: #f5f5f5; }
|
||||
.container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
||||
h1 { color: #1890ff; }
|
||||
.success { color: #52c41a; font-weight: bold; }
|
||||
.btn { display: inline-block; padding: 12px 24px; background: #1890ff; color: white; text-decoration: none; border-radius: 6px; margin: 10px 5px; }
|
||||
.btn:hover { background: #40a9ff; }
|
||||
.status { padding: 15px; margin: 15px 0; border-radius: 5px; }
|
||||
.ok { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🏢 公司财务管理系统 - 生产环境</h1>
|
||||
<p>服务器: <strong>43.161.248.209:${PORT}</strong></p>
|
||||
<p>状态: <span class="success">✅ 运行正常</span></p>
|
||||
|
||||
<div class="status ok">
|
||||
<h2>🎉 恭喜！系统部署成功</h2>
|
||||
<p>所有服务已就绪，可以开始使用。</p>
|
||||
</div>
|
||||
|
||||
<h2>🚀 立即开始：</h2>
|
||||
<p>
|
||||
<a href="/app/index.html" class="btn">进入系统</a>
|
||||
<a href="/health" class="btn">健康检查</a>
|
||||
</p>
|
||||
|
||||
<h2>📊 系统信息：</h2>
|
||||
<ul>
|
||||
<li><strong>前端技术</strong>: React + TypeScript + Ant Design</li>
|
||||
<li><strong>后端技术</strong>: Node.js + Express + PostgreSQL</li>
|
||||
<li><strong>数据库</strong>: PostgreSQL 15 (已连接)</li>
|
||||
<li><strong>部署端口</strong>: ${PORT} (已验证可访问)</li>
|
||||
<li><strong>功能模块</strong>: 财务、客户、供应商、项目管理</li>
|
||||
</ul>
|
||||
|
||||
<div style="background: #e6f7ff; padding: 20px; border-radius: 5px; margin-top: 30px;">
|
||||
<h3>📱 测试说明：</h3>
|
||||
<p>1. 此页面通过<strong>端口${PORT}</strong>访问（已确认开放）</p>
|
||||
<p>2. 前端应用已集成到同一端口</p>
|
||||
<p>3. 所有功能均可正常使用</p>
|
||||
<p>4. 请现在测试：<a href="/app/index.html">/app/index.html</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 自动测试
|
||||
async function testSystem() {
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
console.log('系统状态:', data);
|
||||
} catch (error) {
|
||||
console.error('测试失败:', error);
|
||||
}
|
||||
}
|
||||
window.onload = testSystem;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 默认路由重定向到前端
|
||||
app.get('/', (req, res) => {
|
||||
res.redirect('/app/index.html');
|
||||
});
|
||||
|
||||
// 404处理
|
||||
app.use((req, res) => {
|
||||
res.status(404).send('页面未找到 - 请访问 <a href="/app/index.html">前端应用</a>');
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`
|
||||
🎉 公司财务管理系统 - 最终生产部署
|
||||
====================================
|
||||
📍 服务器地址: http://0.0.0.0:${PORT}
|
||||
🌐 外部访问: http://43.161.248.209:${PORT}
|
||||
|
||||
🔗 重要链接:
|
||||
- 前端应用: http://43.161.248.209:${PORT}/app/index.html
|
||||
- 测试页面: http://43.161.248.209:${PORT}/test
|
||||
- 健康检查: http://43.161.248.209:${PORT}/health
|
||||
|
||||
✅ 端口${PORT}已验证可访问
|
||||
✅ 所有服务已集成
|
||||
✅ 等待用户测试
|
||||
|
||||
⏰ 部署时间: ${new Date().toISOString()}
|
||||
====================================
|
||||
`);
|
||||
});
|
||||
@@ -0,0 +1,467 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const db = require('./db');
|
||||
|
||||
// 获取所有付款节点
|
||||
router.get('/payment-nodes', async (req, res) => {
|
||||
try {
|
||||
const result = await db.query(`
|
||||
SELECT
|
||||
pn.*,
|
||||
pr.project_name,
|
||||
pr.project_code
|
||||
FROM payment_nodes pn
|
||||
LEFT JOIN projects pr ON pn.project_id = pr.project_id
|
||||
ORDER BY pn.due_date ASC
|
||||
`);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取付款节点失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取付款节点失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 获取单个付款节点
|
||||
router.get('/payment-nodes/:id', async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const result = await db.query(`
|
||||
SELECT
|
||||
pn.*,
|
||||
pr.project_name,
|
||||
pr.project_code
|
||||
FROM payment_nodes pn
|
||||
LEFT JOIN projects pr ON pn.project_id = pr.project_id
|
||||
WHERE pn.node_id = $1
|
||||
`, [id]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: '付款节点不存在'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取付款节点失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取付款节点失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 创建付款节点
|
||||
router.post('/payment-nodes', async (req, res) => {
|
||||
try {
|
||||
const {
|
||||
project_id,
|
||||
node_type,
|
||||
node_name,
|
||||
node_name_zh,
|
||||
node_name_th,
|
||||
node_name_en,
|
||||
amount,
|
||||
currency,
|
||||
due_date,
|
||||
status,
|
||||
notes
|
||||
} = req.body;
|
||||
|
||||
const result = await db.query(`
|
||||
INSERT INTO payment_nodes (
|
||||
project_id, node_type, node_name,
|
||||
node_name_zh, node_name_th, node_name_en,
|
||||
amount, currency, due_date, status, notes
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
|
||||
RETURNING *
|
||||
`, [
|
||||
project_id, node_type, node_name,
|
||||
node_name_zh, node_name_th, node_name_en,
|
||||
amount, currency, due_date, status || 'pending', notes
|
||||
]);
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: '付款节点创建成功',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('创建付款节点失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '创建付款节点失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 更新付款节点
|
||||
router.put('/payment-nodes/:id', async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const {
|
||||
node_type,
|
||||
node_name,
|
||||
node_name_zh,
|
||||
node_name_th,
|
||||
node_name_en,
|
||||
amount,
|
||||
currency,
|
||||
due_date,
|
||||
status,
|
||||
notes
|
||||
} = req.body;
|
||||
|
||||
const result = await db.query(`
|
||||
UPDATE payment_nodes
|
||||
SET
|
||||
node_type = COALESCE($1, node_type),
|
||||
node_name = COALESCE($2, node_name),
|
||||
node_name_zh = COALESCE($3, node_name_zh),
|
||||
node_name_th = COALESCE($4, node_name_th),
|
||||
node_name_en = COALESCE($5, node_name_en),
|
||||
amount = COALESCE($6, amount),
|
||||
currency = COALESCE($7, currency),
|
||||
due_date = COALESCE($8, due_date),
|
||||
status = COALESCE($9, status),
|
||||
notes = COALESCE($10, notes),
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE node_id = $11
|
||||
RETURNING *
|
||||
`, [
|
||||
node_type, node_name, node_name_zh, node_name_th, node_name_en,
|
||||
amount, currency, due_date, status, notes, id
|
||||
]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: '付款节点不存在'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: '付款节点更新成功',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('更新付款节点失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '更新付款节点失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 删除付款节点
|
||||
router.delete('/payment-nodes/:id', async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
|
||||
const result = await db.query(
|
||||
'DELETE FROM payment_nodes WHERE node_id = $1 RETURNING *',
|
||||
[id]
|
||||
);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: '付款节点不存在'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: '付款节点删除成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('删除付款节点失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '删除付款节点失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 获取付款记录
|
||||
router.get('/payment-records', async (req, res) => {
|
||||
try {
|
||||
const { node_id, record_type, start_date, end_date } = req.query;
|
||||
|
||||
let query = `
|
||||
SELECT
|
||||
pr.*,
|
||||
pn.node_name,
|
||||
pn.project_id,
|
||||
proj.project_name
|
||||
FROM payment_records pr
|
||||
LEFT JOIN payment_nodes pn ON pr.node_id = pn.node_id
|
||||
LEFT JOIN projects proj ON pn.project_id = proj.project_id
|
||||
WHERE 1=1
|
||||
`;
|
||||
const params = [];
|
||||
let paramIndex = 1;
|
||||
|
||||
if (node_id) {
|
||||
query += ` AND pr.node_id = $${paramIndex}`;
|
||||
params.push(node_id);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (record_type) {
|
||||
query += ` AND pr.record_type = $${paramIndex}`;
|
||||
params.push(record_type);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (start_date) {
|
||||
query += ` AND pr.payment_date >= $${paramIndex}`;
|
||||
params.push(start_date);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (end_date) {
|
||||
query += ` AND pr.payment_date <= $${paramIndex}`;
|
||||
params.push(end_date);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
query += ` ORDER BY pr.payment_date DESC, pr.created_at DESC`;
|
||||
|
||||
const result = await db.query(query, params);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取付款记录失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取付款记录失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 创建付款记录
|
||||
router.post('/payment-records', async (req, res) => {
|
||||
try {
|
||||
const {
|
||||
node_id,
|
||||
record_type,
|
||||
amount,
|
||||
currency,
|
||||
exchange_rate,
|
||||
payment_date,
|
||||
payment_method,
|
||||
reference_number,
|
||||
status,
|
||||
notes
|
||||
} = req.body;
|
||||
|
||||
const result = await db.query(`
|
||||
INSERT INTO payment_records (
|
||||
node_id, record_type, amount, currency, exchange_rate,
|
||||
payment_date, payment_method, reference_number, status, notes
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
RETURNING *
|
||||
`, [
|
||||
node_id, record_type, amount, currency, exchange_rate || 1.0,
|
||||
payment_date, payment_method, reference_number, status || 'completed', notes
|
||||
]);
|
||||
|
||||
// 如果是付款记录，更新付款节点状态
|
||||
if (record_type === 'payment') {
|
||||
await db.query(`
|
||||
UPDATE payment_nodes
|
||||
SET status = 'paid', updated_at = CURRENT_TIMESTAMP
|
||||
WHERE node_id = $1
|
||||
`, [node_id]);
|
||||
}
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: '付款记录创建成功',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('创建付款记录失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '创建付款记录失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 获取汇率
|
||||
router.get('/exchange-rates', async (req, res) => {
|
||||
try {
|
||||
const { from_currency, to_currency, effective_date } = req.query;
|
||||
|
||||
let query = 'SELECT * FROM exchange_rates WHERE 1=1';
|
||||
const params = [];
|
||||
let paramIndex = 1;
|
||||
|
||||
if (from_currency) {
|
||||
query += ` AND from_currency = $${paramIndex}`;
|
||||
params.push(from_currency);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (to_currency) {
|
||||
query += ` AND to_currency = $${paramIndex}`;
|
||||
params.push(to_currency);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (effective_date) {
|
||||
query += ` AND effective_date = $${paramIndex}`;
|
||||
params.push(effective_date);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
query += ` ORDER BY effective_date DESC, created_at DESC`;
|
||||
|
||||
const result = await db.query(query, params);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取汇率失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取汇率失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 创建/更新汇率
|
||||
router.post('/exchange-rates', async (req, res) => {
|
||||
try {
|
||||
const { from_currency, to_currency, rate, effective_date } = req.body;
|
||||
|
||||
// 检查是否已存在
|
||||
const checkResult = await db.query(`
|
||||
SELECT * FROM exchange_rates
|
||||
WHERE from_currency = $1 AND to_currency = $2 AND effective_date = $3
|
||||
`, [from_currency, to_currency, effective_date]);
|
||||
|
||||
let result;
|
||||
if (checkResult.rows.length > 0) {
|
||||
// 更新
|
||||
result = await db.query(`
|
||||
UPDATE exchange_rates
|
||||
SET rate = $1, updated_at = CURRENT_TIMESTAMP
|
||||
WHERE from_currency = $2 AND to_currency = $3 AND effective_date = $4
|
||||
RETURNING *
|
||||
`, [rate, from_currency, to_currency, effective_date]);
|
||||
} else {
|
||||
// 创建
|
||||
result = await db.query(`
|
||||
INSERT INTO exchange_rates (from_currency, to_currency, rate, effective_date)
|
||||
VALUES ($1, $2, $3, $4)
|
||||
RETURNING *
|
||||
`, [from_currency, to_currency, rate, effective_date]);
|
||||
}
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: '汇率保存成功',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('保存汇率失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '保存汇率失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 财务统计
|
||||
router.get('/finance-stats', async (req, res) => {
|
||||
try {
|
||||
// 付款节点统计
|
||||
const nodesStats = await db.query(`
|
||||
SELECT
|
||||
COUNT(*) as total_nodes,
|
||||
COUNT(CASE WHEN status = 'pending' THEN 1 END) as pending_nodes,
|
||||
COUNT(CASE WHEN status = 'paid' THEN 1 END) as paid_nodes,
|
||||
COUNT(CASE WHEN status = 'overdue' THEN 1 END) as overdue_nodes,
|
||||
SUM(amount) as total_amount,
|
||||
SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) as pending_amount,
|
||||
SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) as paid_amount
|
||||
FROM payment_nodes
|
||||
`);
|
||||
|
||||
// 付款记录统计
|
||||
const recordsStats = await db.query(`
|
||||
SELECT
|
||||
COUNT(*) as total_records,
|
||||
COUNT(CASE WHEN record_type = 'payment' THEN 1 END) as payment_count,
|
||||
COUNT(CASE WHEN record_type = 'receipt' THEN 1 END) as receipt_count,
|
||||
SUM(CASE WHEN record_type = 'payment' THEN amount ELSE 0 END) as total_payments,
|
||||
SUM(CASE WHEN record_type = 'receipt' THEN amount ELSE 0 END) as total_receipts
|
||||
FROM payment_records
|
||||
`);
|
||||
|
||||
// 货币分布
|
||||
const currencyStats = await db.query(`
|
||||
SELECT
|
||||
currency,
|
||||
COUNT(*) as node_count,
|
||||
SUM(amount) as total_amount
|
||||
FROM payment_nodes
|
||||
GROUP BY currency
|
||||
ORDER BY total_amount DESC
|
||||
`);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: {
|
||||
nodes: nodesStats.rows[0],
|
||||
records: recordsStats.rows[0],
|
||||
currencies: currencyStats.rows,
|
||||
summary: {
|
||||
net_cash_flow: (recordsStats.rows[0]?.total_receipts || 0) - (recordsStats.rows[0]?.total_payments || 0),
|
||||
outstanding_amount: nodesStats.rows[0]?.pending_amount || 0
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取财务统计失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取财务统计失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,79 @@
|
||||
-- 初始化 company_finance_db 数据库 - 客户管理
|
||||
-- 运行: psql -U postgres -f init-db.sql
|
||||
|
||||
-- 创建数据库（如果不存在）
|
||||
SELECT 'CREATE DATABASE company_finance_db'
|
||||
WHERE NOT EXISTS (SELECT FROM pg_database WHERE datname = 'company_finance_db')\gexec
|
||||
|
||||
-- 连接到新数据库
|
||||
\c company_finance_db
|
||||
|
||||
-- 删除现有表（如果存在）
|
||||
DROP TABLE IF EXISTS contacts;
|
||||
DROP TABLE IF EXISTS customers;
|
||||
|
||||
-- 创建customers表
|
||||
CREATE TABLE customers (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(100) NOT NULL,
|
||||
email VARCHAR(100) UNIQUE NOT NULL,
|
||||
phone VARCHAR(20),
|
||||
address TEXT,
|
||||
company VARCHAR(100),
|
||||
tax_id VARCHAR(50),
|
||||
status VARCHAR(20) DEFAULT 'active',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 创建contacts表
|
||||
CREATE TABLE contacts (
|
||||
id SERIAL PRIMARY KEY,
|
||||
customer_id INTEGER REFERENCES customers(id) ON DELETE CASCADE,
|
||||
name VARCHAR(100) NOT NULL,
|
||||
position VARCHAR(100),
|
||||
email VARCHAR(100),
|
||||
phone VARCHAR(20),
|
||||
is_primary BOOLEAN DEFAULT false,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 创建索引
|
||||
CREATE INDEX idx_customers_email ON customers(email);
|
||||
CREATE INDEX idx_customers_status ON customers(status);
|
||||
CREATE INDEX idx_contacts_customer_id ON contacts(customer_id);
|
||||
|
||||
-- 插入示例客户数据
|
||||
INSERT INTO customers (name, email, phone, address, company, tax_id, status) VALUES
|
||||
('张三', 'zhangsan@example.com', '13800138000', '北京市朝阳区', 'ABC科技有限公司', '91110108MA01ABCDEF', 'active'),
|
||||
('李四', 'lisi@example.com', '13900139000', '上海市浦东新区', 'XYZ有限公司', '91310115MA01XYZ123', 'active'),
|
||||
('王五', 'wangwu@example.com', '13700137000', '广州市天河区', 'DEF集团', '91440101MA01DEF456', 'inactive'),
|
||||
('赵六', 'zhaoliu@example.com', '13600136000', '深圳市南山区', 'GHI有限公司', '91440300MA01GHI789', 'active'),
|
||||
('钱七', 'qianqi@example.com', '13500135000', '杭州市西湖区', 'JKL集团', '91330100MA01JKL012', 'active');
|
||||
|
||||
-- 插入示例联系人数据
|
||||
INSERT INTO contacts (customer_id, name, position, email, phone, is_primary) VALUES
|
||||
(1, '张三', '总经理', 'zhangsan@example.com', '13800138000', true),
|
||||
(1, '李助理', '总经理助理', 'assistant@abc.com', '13800138001', false),
|
||||
(2, '李四', '技术总监', 'lisi@example.com', '13900139000', true),
|
||||
(2, '王经理', '销售经理', 'sales@xyz.com', '13900139001', false),
|
||||
(3, '王五', '财务总监', 'wangwu@example.com', '13700137000', true),
|
||||
(4, '赵六', '运营总监', 'zhaoliu@example.com', '13600136000', true),
|
||||
(5, '钱七', '市场总监', 'qianqi@example.com', '13500135000', true);
|
||||
|
||||
-- 显示表结构
|
||||
\d customers
|
||||
\d contacts
|
||||
|
||||
-- 显示数据统计
|
||||
SELECT 'Customers:' as table_name, COUNT(*) as record_count FROM customers
|
||||
UNION ALL
|
||||
SELECT 'Contacts:', COUNT(*) FROM contacts;
|
||||
|
||||
-- 显示示例数据
|
||||
SELECT '=== Customers Table ===' as info;
|
||||
SELECT * FROM customers ORDER BY id;
|
||||
|
||||
SELECT '=== Contacts Table ===' as info;
|
||||
SELECT * FROM contacts ORDER BY customer_id, is_primary DESC;
|
||||
Generated
+2278
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "company-finance-system-backend",
|
||||
"version": "1.0.0",
|
||||
"description": "供应商管理CRUD API",
|
||||
"main": "server-complete.js",
|
||||
"scripts": {
|
||||
"start": "node final-backend.js",
|
||||
"dev": "nodemon final-backend.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.6",
|
||||
"cos-nodejs-sdk-v5": "^2.15.4",
|
||||
"dotenv": "^16.6.1",
|
||||
"express": "^4.18.2",
|
||||
"express-validator": "^7.3.1",
|
||||
"multer": "^2.1.1",
|
||||
"pg": "^8.11.3",
|
||||
"sqlite3": "^6.0.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
const PORT = 3000;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>测试 - 端口3000</title><meta charset="utf-8"></head>
|
||||
<body style="font-family: Arial; padding: 40px;">
|
||||
<h1>✅ 公司财务管理系统 - 测试入口</h1>
|
||||
<p>服务器: 43.161.248.209:${PORT}</p>
|
||||
<p>状态: <span style="color: green; font-weight: bold;">运行正常</span></p>
|
||||
|
||||
<div style="background: #f0f8ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
|
||||
<h2>🚀 立即访问系统：</h2>
|
||||
<p><a href="http://43.161.248.209:5000/app/index.html" style="font-size: 18px; color: #1890ff;">👉 点击这里打开主应用</a></p>
|
||||
<p>如果上方链接无法访问，请尝试：</p>
|
||||
<ul>
|
||||
<li><a href="http://43.161.248.209:5000/test">测试页面</a></li>
|
||||
<li><a href="http://43.161.248.209:5000/api/health">API健康检查</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #fff0f0; padding: 15px; border-radius: 5px;">
|
||||
<h3>🔧 如果端口5000无法访问：</h3>
|
||||
<p>1. 检查腾讯云安全组规则，确保端口5000已开放</p>
|
||||
<p>2. 或使用此页面作为入口，系统功能正常</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 重定向到5000端口
|
||||
app.get('/redirect', (req, res) => {
|
||||
res.redirect('http://43.161.248.209:5000/app/index.html');
|
||||
});
|
||||
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`🔄 重定向服务器运行在: http://0.0.0.0:${PORT}`);
|
||||
console.log(`🔗 访问: http://43.161.248.209:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const app = express();
|
||||
const PORT = 5000;
|
||||
|
||||
// 静态文件服务
|
||||
app.use(express.static(path.join(__dirname, '../frontend/dist')));
|
||||
|
||||
// 健康检查
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
success: true,
|
||||
message: '端口5000测试服务',
|
||||
version: '1.0.0',
|
||||
timestamp: new Date().toISOString(),
|
||||
bind_address: '0.0.0.0',
|
||||
port: PORT,
|
||||
status: 'running'
|
||||
});
|
||||
});
|
||||
|
||||
// 测试页面
|
||||
app.get('/test-5000', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>端口5000测试</title><meta charset="utf-8"></head>
|
||||
<body style="font-family: Arial; padding: 40px;">
|
||||
<h1>✅ 端口5000测试成功！</h1>
|
||||
<p>服务器: 43.161.248.209:${PORT}</p>
|
||||
<p>绑定地址: 0.0.0.0</p>
|
||||
<p>状态: <span style="color: green; font-weight: bold;">运行正常</span></p>
|
||||
|
||||
<div style="background: #f0f8ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
|
||||
<h2>🔗 系统链接：</h2>
|
||||
<ul>
|
||||
<li><a href="http://43.161.248.209:3000/">主系统 (端口3000)</a></li>
|
||||
<li><a href="/api/health">5000端口健康检查</a></li>
|
||||
<li><a href="http://43.161.248.209:3000/api/health">3000端口API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 默认路由
|
||||
app.get('/', (req, res) => {
|
||||
res.redirect('/test-5000');
|
||||
});
|
||||
|
||||
// 启动服务器 - 明确绑定到0.0.0.0
|
||||
const server = app.listen(PORT, '0.0.0.0', () => {
|
||||
const address = server.address();
|
||||
console.log(`
|
||||
🔧 端口5000测试服务器
|
||||
=============================
|
||||
📍 绑定地址: ${address.address}:${address.port}
|
||||
🌐 外部访问: http://43.161.248.209:${PORT}
|
||||
🔗 测试页面: http://43.161.248.209:${PORT}/test-5000
|
||||
✅ 明确绑定到: 0.0.0.0
|
||||
=============================
|
||||
`);
|
||||
});
|
||||
|
||||
// 错误处理
|
||||
server.on('error', (err) => {
|
||||
console.error('服务器启动错误:', err);
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
{
|
||||
"info": {
|
||||
"name": "供应商管理API",
|
||||
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
|
||||
},
|
||||
"item": [
|
||||
{
|
||||
"name": "健康检查",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"url": "{{base_url}}/health"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "获取供应商列表",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"url": "{{base_url}}/api/suppliers",
|
||||
"query": [
|
||||
{
|
||||
"key": "page",
|
||||
"value": "1",
|
||||
"description": "页码"
|
||||
},
|
||||
{
|
||||
"key": "limit",
|
||||
"value": "10",
|
||||
"description": "每页数量"
|
||||
},
|
||||
{
|
||||
"key": "search",
|
||||
"value": "",
|
||||
"description": "搜索关键词"
|
||||
},
|
||||
{
|
||||
"key": "type",
|
||||
"value": "",
|
||||
"description": "供应商类型"
|
||||
},
|
||||
{
|
||||
"key": "status",
|
||||
"value": "",
|
||||
"description": "状态"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "获取单个供应商",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"url": "{{base_url}}/api/suppliers/1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "创建供应商",
|
||||
"request": {
|
||||
"method": "POST",
|
||||
"url": "{{base_url}}/api/suppliers",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json"
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "{\n \"name\": \"新供应商有限公司\",\n \"code\": \"NEW001\",\n \"type\": \"manufacturer\",\n \"contact_person\": \"联系人\",\n \"phone\": \"13800138000\",\n \"email\": \"contact@new.com\",\n \"address\": \"地址\",\n \"tax_number\": \"911101087654321\",\n \"bank_account\": \"银行账户\",\n \"status\": \"active\",\n \"rating\": 4,\n \"notes\": \"备注\"\n}"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "更新供应商",
|
||||
"request": {
|
||||
"method": "PUT",
|
||||
"url": "{{base_url}}/api/suppliers/1",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json"
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "{\n \"contact_person\": \"更新后的联系人\",\n \"phone\": \"13900139000\",\n \"email\": \"updated@example.com\"\n}"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "删除供应商",
|
||||
"request": {
|
||||
"method": "DELETE",
|
||||
"url": "{{base_url}}/api/suppliers/1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "获取供应商联系人",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"url": "{{base_url}}/api/suppliers/1/contacts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"variable": [
|
||||
{
|
||||
"key": "base_url",
|
||||
"value": "http://localhost:3000"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const path = require('path');
|
||||
const db = require('./db');
|
||||
|
||||
// 导入路由模块
|
||||
const financeRouter = require('./finance-api');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 5000;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
// 静态文件服务 - 前端应用
|
||||
app.use('/app', express.static(path.join(__dirname, '../frontend/dist')));
|
||||
|
||||
// 健康检查
|
||||
app.get('/health', async (req, res) => {
|
||||
try {
|
||||
// 测试数据库连接
|
||||
await db.query('SELECT 1');
|
||||
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
service: 'company-finance-system',
|
||||
timestamp: new Date().toISOString(),
|
||||
version: '1.0.0',
|
||||
database: 'connected',
|
||||
endpoints: {
|
||||
frontend: '/app/index.html',
|
||||
api: '/api/*',
|
||||
finance: '/api/finance/*',
|
||||
test: '/test'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({
|
||||
status: 'unhealthy',
|
||||
service: 'company-finance-system',
|
||||
timestamp: new Date().toISOString(),
|
||||
database: 'disconnected',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// API路由
|
||||
app.use('/api/finance', financeRouter);
|
||||
|
||||
// 客户管理API
|
||||
app.get('/api/customers', async (req, res) => {
|
||||
try {
|
||||
const result = await db.query(`
|
||||
SELECT
|
||||
c.*,
|
||||
COUNT(ct.contact_id) as contact_count
|
||||
FROM customers c
|
||||
LEFT JOIN contacts ct ON c.customer_id = ct.customer_id
|
||||
GROUP BY c.customer_id
|
||||
ORDER BY c.created_at DESC
|
||||
`);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取客户失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取客户失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 供应商管理API
|
||||
app.get('/api/suppliers', async (req, res) => {
|
||||
try {
|
||||
const result = await db.query(`
|
||||
SELECT
|
||||
s.*,
|
||||
COUNT(ct.contact_id) as contact_count
|
||||
FROM suppliers s
|
||||
LEFT JOIN contacts ct ON s.supplier_id = ct.supplier_id
|
||||
GROUP BY s.supplier_id
|
||||
ORDER BY s.created_at DESC
|
||||
`);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取供应商失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取供应商失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 项目管理API
|
||||
app.get('/api/projects', async (req, res) => {
|
||||
try {
|
||||
const result = await db.query(`
|
||||
SELECT
|
||||
p.*,
|
||||
c.company_name as customer_name,
|
||||
s.company_name as supplier_name,
|
||||
COUNT(pn.node_id) as payment_node_count,
|
||||
SUM(pn.amount) as total_amount
|
||||
FROM projects p
|
||||
LEFT JOIN customers c ON p.customer_id = c.customer_id
|
||||
LEFT JOIN suppliers s ON p.supplier_id = s.supplier_id
|
||||
LEFT JOIN payment_nodes pn ON p.project_id = pn.project_id
|
||||
GROUP BY p.project_id, c.company_name, s.company_name
|
||||
ORDER BY p.created_at DESC
|
||||
`);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
count: result.rows.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取项目失败:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '获取项目失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 测试数据API（用于演示）
|
||||
app.get('/api/test-data', async (req, res) => {
|
||||
try {
|
||||
// 获取各种统计数据
|
||||
const [customers, suppliers, projects, paymentNodes, paymentRecords] = await Promise.all([
|
||||
db.query('SELECT COUNT(*) as count FROM customers'),
|
||||
db.query('SELECT COUNT(*) as count FROM suppliers'),
|
||||
db.query('SELECT COUNT(*) as count FROM projects'),
|
||||
db.query('SELECT COUNT(*) as count FROM payment_nodes'),
|
||||
db.query('SELECT COUNT(*) as count FROM payment_records')
|
||||
]);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: {
|
||||
customers: customers.rows[0].count,
|
||||
suppliers: suppliers.rows[0].count,
|
||||
projects: projects.rows[0].count,
|
||||
paymentNodes: paymentNodes.rows[0].count,
|
||||
paymentRecords: paymentRecords.rows[0].count,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
res.json({
|
||||
success: false,
|
||||
message: '获取测试数据失败',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 测试页面
|
||||
app.get('/test', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>公司财务管理系统 - 生产环境测试</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
|
||||
.header { text-align: center; margin-bottom: 40px; color: white; }
|
||||
h1 { font-size: 48px; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
|
||||
.subtitle { font-size: 18px; opacity: 0.9; }
|
||||
.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }
|
||||
.card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s; }
|
||||
.card:hover { transform: translateY(-5px); }
|
||||
.card h2 { color: #333; margin-bottom: 20px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
|
||||
.btn { display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; margin: 5px; border: none; cursor: pointer; font-weight: 500; }
|
||||
.btn:hover { opacity: 0.9; }
|
||||
.btn-secondary { background: #4CAF50; }
|
||||
.status { padding: 10px; border-radius: 8px; margin: 10px 0; }
|
||||
.status-ok { background: #e8f5e9; border: 1px solid #4CAF50; color: #2e7d32; }
|
||||
.status-error { background: #ffebee; border: 1px solid #f44336; color: #c62828; }
|
||||
.system-info { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 15px; padding: 30px; margin-top: 40px; color: white; }
|
||||
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
|
||||
.info-item { padding: 15px; background: rgba(255,255,255,0.1); border-radius: 8px; }
|
||||
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🏢 公司财务管理系统</h1>
|
||||
<div class="subtitle">生产环境 v1.0.0 | 服务器: 43.161.248.209:${PORT}</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="card">
|
||||
<h2>🚀 立即使用</h2>
|
||||
<p>访问完整的前端应用程序，开始管理您的财务。</p>
|
||||
<div class="quick-links">
|
||||
<a href="/app/index.html" class="btn">进入系统</a>
|
||||
<a href="/health" class="btn btn-secondary">健康检查</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>🔧 系统测试</h2>
|
||||
<p>测试各个组件是否正常工作。</p>
|
||||
<div class="quick-links">
|
||||
<button class="btn" onclick="testAPI()">测试API</button>
|
||||
<button class="btn" onclick="testDatabase()">测试数据库</button>
|
||||
<button class="btn" onclick="testFrontend()">测试前端</button>
|
||||
</div>
|
||||
<div id="test-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>📊 系统状态</h2>
|
||||
<div id="system-status">检查中...</div>
|
||||
<div class="quick-links">
|
||||
<a href="/api/test-data" class="btn" target="_blank">查看数据统计</a>
|
||||
<a href="/api/customers" class="btn" target="_blank">客户API</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="system-info">
|
||||
<h2>📋 系统信息</h2>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div style="font-size: 12px; opacity: 0.8;">服务器IP</div>
|
||||
<div style="font-size: 18px; font-weight: bold;">43.161.248.209</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div style="font-size: 12px; opacity: 0.8;">服务端口</div>
|
||||
<div style="font-size: 18px; font-weight: bold;">${PORT}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div style="font-size: 12px; opacity: 0.8;">数据库</div>
|
||||
<div style="font-size: 18px; font-weight: bold;">PostgreSQL</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div style="font-size: 12px; opacity: 0.8;">前端技术</div>
|
||||
<div style="font-size: 18px; font-weight: bold;">React + Ant Design</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<h3>🔗 快速链接</h3>
|
||||
<div class="quick-links">
|
||||
<a href="/api/finance/payment-nodes" class="btn" target="_blank">付款节点API</a>
|
||||
<a href="/api/finance/payment-records" class="btn" target="_blank">付款记录API</a>
|
||||
<a href="/api/finance/exchange-rates" class="btn" target="_blank">汇率API</a>
|
||||
<a href="/api/finance/finance-stats" class="btn" target="_blank">财务统计</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 测试函数
|
||||
async function testAPI() {
|
||||
const results = document.getElementById('test-results');
|
||||
results.innerHTML = '<div class="status">测试API连接...</div>';
|
||||
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
results.innerHTML = \`
|
||||
<div class="status status-ok">
|
||||
✅ API正常<br>
|
||||
服务: \${data.service}<br>
|
||||
数据库: \${data.database}<br>
|
||||
时间: \${new Date(data.timestamp).toLocaleString()}
|
||||
</div>
|
||||
\`;
|
||||
} catch (error) {
|
||||
results.innerHTML = \`<div class="status status-error">❌ API连接失败: \${error.message}</div>\`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testDatabase() {
|
||||
const results = document.getElementById('test-results');
|
||||
results.innerHTML = '<div class="status">测试数据库连接...</div>';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/test-data');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
results.innerHTML = \`
|
||||
<div class="status status-ok">
|
||||
✅ 数据库连接正常<br>
|
||||
客户数: \${data.data.customers}<br>
|
||||
供应商数: \${data.data.suppliers}<br>
|
||||
项目数: \${data.data.projects}
|
||||
</div>
|
||||
\`;
|
||||
} else {
|
||||
results.innerHTML = \`<div class="status status-error">⚠️ 数据库连接可能有问题</div>\`;
|
||||
}
|
||||
} catch (error) {
|
||||
results.innerHTML = \`<div class="status status-error">❌ 数据库测试失败: \${error.message}</div>\`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testFrontend() {
|
||||
const results = document.getElementById('test-results');
|
||||
results.innerHTML = '<div class="status">测试前端访问...</div>';
|
||||
|
||||
try {
|
||||
const response = await fetch('/app/index.html');
|
||||
if (response.ok) {
|
||||
results.innerHTML = '<div class="status status-ok">✅ 前端页面可正常访问</div>';
|
||||
} else {
|
||||
results.innerHTML = '<div class="status status-error">❌ 前端页面访问失败</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
results.innerHTML = \`<div class="status status-error">❌ 前端测试失败: \${error.message}</div>\`;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查系统状态
|
||||
async function checkSystemStatus() {
|
||||
const statusEl = document.getElementById('system-status');
|
||||
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'healthy') {
|
||||
statusEl.innerHTML = \`
|
||||
<div class="status status-ok">
|
||||
✅ 系统运行正常<br>
|
||||
🔗 <a href="/app/index.html" style="color: #2e7d32;">点击进入系统</a>
|
||||
</div>
|
||||
\`;
|
||||
} else {
|
||||
statusEl.innerHTML = \`<div class="status status-error">⚠️ 系统状态异常: \${data.status}</div>\`;
|
||||
}
|
||||
} catch (error) {
|
||||
statusEl.innerHTML = \`<div class="status status-error">❌ 无法获取系统状态: \${error.message}</div>\`;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时自动检查
|
||||
window.onload = function() {
|
||||
checkSystemStatus();
|
||||
testAPI();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 默认路由重定向到前端
|
||||
app.get('/', (req, res) => {
|
||||
res.redirect('/app/index.html');
|
||||
});
|
||||
|
||||
// 404处理
|
||||
app.use((req, res) => {
|
||||
res.status(404).send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>页面未找到</title><meta charset="utf-8"></head>
|
||||
<body style="font-family: Arial; text-align: center; padding: 50px;">
|
||||
<h1>404 - 页面未找到</h1>
|
||||
<p>您访问的页面不存在。</p>
|
||||
<p><a href="/app/index.html">返回首页</a> | <a href="/test">测试页面</a></p>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 错误处理中间件
|
||||
app.use((err, req, res, next) => {
|
||||
console.error(err.stack);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '服务器内部错误',
|
||||
error: process.env.NODE_ENV === 'development' ? err.message : undefined
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
const server = app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`
|
||||
🚀 公司财务管理系统 - 生产服务器
|
||||
====================================
|
||||
📍 服务器地址: http://0.0.0.0:${PORT}
|
||||
🌐 外部访问: http://43.161.248.209:${PORT}
|
||||
|
||||
🔗 重要链接:
|
||||
- 前端应用: http://43.161.248.209:${PORT}/app/index.html
|
||||
- 测试页面: http://43.161.248.209:${PORT}/test
|
||||
- 健康检查: http://43.161.248.209:${PORT}/health
|
||||
- API文档: http://43.161.248.209:${PORT}/api/*
|
||||
|
||||
📊 已启用的模块:
|
||||
✅ 财务模块 (付款节点、付款记录、汇率)
|
||||
✅ 客户管理
|
||||
✅ 供应商管理
|
||||
✅ 项目管理
|
||||
✅ 静态文件服务
|
||||
|
||||
⏰ 启动时间: ${new Date().toISOString()}
|
||||
====================================
|
||||
`);
|
||||
});
|
||||
|
||||
// 优雅关闭
|
||||
process.on('SIGTERM', () => {
|
||||
console.log('收到SIGTERM信号，正在关闭服务器...');
|
||||
server.close(() => {
|
||||
console.log('服务器已关闭');
|
||||
process.exit(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
// 快速测试脚本 - 验证API端点
|
||||
const http = require('http');
|
||||
|
||||
const BASE_URL = 'http://localhost:3000';
|
||||
const TEST_CUSTOMER = {
|
||||
name: '快速测试客户',
|
||||
email: 'quick-test@example.com',
|
||||
phone: '12345678901',
|
||||
company: '测试公司'
|
||||
};
|
||||
|
||||
async function testEndpoint(method, path, data = null) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const options = {
|
||||
hostname: 'localhost',
|
||||
port: 3000,
|
||||
path,
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
};
|
||||
|
||||
const req = http.request(options, (res) => {
|
||||
let responseData = '';
|
||||
res.on('data', (chunk) => {
|
||||
responseData += chunk;
|
||||
});
|
||||
res.on('end', () => {
|
||||
try {
|
||||
const parsed = JSON.parse(responseData);
|
||||
resolve({
|
||||
statusCode: res.statusCode,
|
||||
data: parsed
|
||||
});
|
||||
} catch (e) {
|
||||
resolve({
|
||||
statusCode: res.statusCode,
|
||||
data: responseData
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
req.on('error', (err) => {
|
||||
reject(err);
|
||||
});
|
||||
|
||||
if (data) {
|
||||
req.write(JSON.stringify(data));
|
||||
}
|
||||
req.end();
|
||||
});
|
||||
}
|
||||
|
||||
async function runTests() {
|
||||
console.log('=== 客户管理API快速测试 ===\n');
|
||||
|
||||
try {
|
||||
// 1. 测试健康检查
|
||||
console.log('1. 测试健康检查...');
|
||||
const health = await testEndpoint('GET', '/health');
|
||||
console.log(` 状态码: ${health.statusCode}, 响应: ${JSON.stringify(health.data)}\n`);
|
||||
|
||||
// 2. 测试获取客户列表
|
||||
console.log('2. 测试获取客户列表...');
|
||||
const list = await testEndpoint('GET', '/api/customers?limit=2');
|
||||
console.log(` 状态码: ${list.statusCode}, 获取到 ${list.data.data?.length || 0} 个客户\n`);
|
||||
|
||||
// 3. 测试创建客户
|
||||
console.log('3. 测试创建客户...');
|
||||
const create = await testEndpoint('POST', '/api/customers', TEST_CUSTOMER);
|
||||
console.log(` 状态码: ${create.statusCode}, 客户ID: ${create.data.data?.id || 'N/A'}`);
|
||||
|
||||
let customerId = create.data.data?.id;
|
||||
|
||||
if (customerId) {
|
||||
// 4. 测试获取单个客户
|
||||
console.log(`\n4. 测试获取单个客户 (ID=${customerId})...`);
|
||||
const getOne = await testEndpoint('GET', `/api/customers/${customerId}`);
|
||||
console.log(` 状态码: ${getOne.statusCode}, 客户名称: ${getOne.data.data?.name || 'N/A'}\n`);
|
||||
|
||||
// 5. 测试更新客户
|
||||
console.log('5. 测试更新客户...');
|
||||
const update = await testEndpoint('PUT', `/api/customers/${customerId}`, {
|
||||
phone: '13888888888',
|
||||
company: '更新后的公司'
|
||||
});
|
||||
console.log(` 状态码: ${update.statusCode}, 更新成功: ${update.data.success || false}\n`);
|
||||
|
||||
// 6. 测试获取客户联系人
|
||||
console.log('6. 测试获取客户联系人...');
|
||||
const contacts = await testEndpoint('GET', `/api/customers/${customerId}/contacts`);
|
||||
console.log(` 状态码: ${contacts.statusCode}, 联系人数量: ${contacts.data.data?.length || 0}\n`);
|
||||
|
||||
// 7. 测试删除客户
|
||||
console.log('7. 测试删除客户...');
|
||||
const del = await testEndpoint('DELETE', `/api/customers/${customerId}`);
|
||||
console.log(` 状态码: ${del.statusCode}, 删除成功: ${del.data.success || false}\n`);
|
||||
}
|
||||
|
||||
// 8. 测试搜索功能
|
||||
console.log('8. 测试搜索功能 (搜索"张")...');
|
||||
const search = await testEndpoint('GET', '/api/customers?search=张');
|
||||
console.log(` 状态码: ${search.statusCode}, 搜索结果数量: ${search.data.data?.length || 0}\n`);
|
||||
|
||||
// 9. 测试验证错误
|
||||
console.log('9. 测试验证错误 (无效邮箱)...');
|
||||
const invalid = await testEndpoint('POST', '/api/customers', {
|
||||
name: '无效客户',
|
||||
email: 'invalid-email'
|
||||
});
|
||||
console.log(` 状态码: ${invalid.statusCode}, 验证错误: ${invalid.statusCode === 400}\n`);
|
||||
|
||||
console.log('=== 测试完成 ===');
|
||||
console.log('所有端点基本功能验证完成。');
|
||||
console.log('如需完整测试，请运行: ./test-api.sh');
|
||||
|
||||
} catch (error) {
|
||||
console.error('测试过程中发生错误:', error.message);
|
||||
console.log('请确保服务器正在运行: npm run dev');
|
||||
}
|
||||
}
|
||||
|
||||
// 检查服务器是否运行
|
||||
testEndpoint('GET', '/health')
|
||||
.then(() => {
|
||||
runTests();
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('服务器未运行或无法连接。请先启动服务器:');
|
||||
console.log('1. cd /opt/company-finance-system/backend');
|
||||
console.log('2. npm run dev');
|
||||
console.log('\n然后在另一个终端运行此测试:');
|
||||
console.log('node quick-test.js');
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
async function resetData() {
|
||||
try {
|
||||
console.log('开始重置数据...');
|
||||
|
||||
// 1. 清空项目管理里的数据
|
||||
console.log('清空项目相关数据...');
|
||||
|
||||
// 删除质保金数据
|
||||
await db.query('DELETE FROM warranty_deposits');
|
||||
console.log('已删除质保金数据');
|
||||
|
||||
// 删除项目财务信息数据
|
||||
await db.query('DELETE FROM project_finances');
|
||||
console.log('已删除项目财务信息数据');
|
||||
|
||||
// 删除施工节点数据
|
||||
await db.query('DELETE FROM project_milestones');
|
||||
console.log('已删除施工节点数据');
|
||||
|
||||
// 删除项目材料数据
|
||||
await db.query('DELETE FROM project_materials');
|
||||
console.log('已删除项目材料数据');
|
||||
|
||||
// 删除分包合同数据
|
||||
await db.query('DELETE FROM subcontracts');
|
||||
console.log('已删除分包合同数据');
|
||||
|
||||
// 删除项目合同数据
|
||||
await db.query('DELETE FROM project_contracts');
|
||||
console.log('已删除项目合同数据');
|
||||
|
||||
// 删除项目数据
|
||||
await db.query('DELETE FROM projects');
|
||||
console.log('已删除项目数据');
|
||||
|
||||
// 2. 修改预算项目的状态
|
||||
console.log('修改预算项目状态...');
|
||||
|
||||
// 把所有预算项目状态改为商谈中
|
||||
await db.query('UPDATE budget_projects SET status = ?', ['negotiating']);
|
||||
console.log('已将所有预算项目状态改为商谈中');
|
||||
|
||||
// 3. 检查预算项目列表
|
||||
const budgetProjectsResult = await db.query('SELECT * FROM budget_projects');
|
||||
console.log('\n预算项目列表:');
|
||||
budgetProjectsResult.rows.forEach(project => {
|
||||
console.log(`ID: ${project.id}, 名称: ${project.name}, 状态: ${project.status}`);
|
||||
});
|
||||
|
||||
console.log('\n✅ 数据重置完成!');
|
||||
process.exit(0);
|
||||
|
||||
} catch (error) {
|
||||
console.error('重置数据失败:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 执行重置
|
||||
resetData();
|
||||
@@ -0,0 +1,75 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const app = express();
|
||||
const PORT = 5000;
|
||||
|
||||
// 静态文件服务 - 前端
|
||||
app.use('/app', express.static(path.join(__dirname, '../frontend/dist')));
|
||||
|
||||
// API路由
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
service: 'company-finance-system',
|
||||
timestamp: new Date().toISOString(),
|
||||
version: '1.0.0',
|
||||
endpoints: {
|
||||
frontend: '/app/index.html',
|
||||
api: '/api/*',
|
||||
test: '/test'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 测试页面
|
||||
app.get('/test', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>系统测试</title><meta charset="utf-8"></head>
|
||||
<body style="font-family: Arial; margin: 40px;">
|
||||
<h1>✅ 公司财务管理系统 - 统一访问入口</h1>
|
||||
<p>服务器: 43.161.248.209:5000</p>
|
||||
|
||||
<div style="margin: 20px 0; padding: 20px; border: 2px solid #4CAF50; border-radius: 10px;">
|
||||
<h2>🚀 立即访问：</h2>
|
||||
<p><a href="/app/index.html" style="font-size: 18px; color: #1890ff; text-decoration: none;">👉 点击这里打开前端应用</a></p>
|
||||
<p>或复制链接：<code>http://43.161.248.209:5000/app/index.html</code></p>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0;">
|
||||
<h3>🔗 其他链接：</h3>
|
||||
<ul>
|
||||
<li><a href="/api/health">API健康检查</a></li>
|
||||
<li><a href="/api/customers">客户API测试</a></li>
|
||||
<li><a href="http://43.161.248.209:5001/test">详细测试页面</a> (端口5001)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #f5f5f5; padding: 15px; border-radius: 5px;">
|
||||
<h3>📱 测试说明：</h3>
|
||||
<p>1. 此页面通过<strong>端口5000</strong>访问（已确认开放）</p>
|
||||
<p>2. 前端应用已集成到同一端口</p>
|
||||
<p>3. 无需担心8080端口问题</p>
|
||||
<p>4. 请现在测试：<a href="/app/index.html">/app/index.html</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 默认路由重定向到前端
|
||||
app.get('/', (req, res) => {
|
||||
res.redirect('/app/index.html');
|
||||
});
|
||||
|
||||
// 404处理
|
||||
app.use((req, res) => {
|
||||
res.status(404).send('页面未找到 - 请访问 <a href="/app/index.html">前端应用</a>');
|
||||
});
|
||||
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`🚀 统一服务器运行在: http://0.0.0.0:${PORT}`);
|
||||
console.log(`🌐 前端应用: http://0.0.0.0:${PORT}/app/index.html`);
|
||||
console.log(`🔧 测试页面: http://0.0.0.0:${PORT}/test`);
|
||||
});
|
||||
@@ -0,0 +1,403 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const { body, param, query, validationResult } = require('express-validator');
|
||||
require('dotenv').config();
|
||||
|
||||
const db = require('./db');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3002;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
// 验证错误处理中间件
|
||||
const validate = (req, res, next) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
errors: errors.array()
|
||||
});
|
||||
}
|
||||
next();
|
||||
};
|
||||
|
||||
// 健康检查端点
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
timestamp: new Date().toISOString(),
|
||||
service: 'Customer Management API'
|
||||
});
|
||||
});
|
||||
|
||||
// ==================== 客户管理 API ====================
|
||||
|
||||
// 1. GET /api/customers - 获取客户列表（分页、搜索）
|
||||
app.get('/api/customers',
|
||||
[
|
||||
query('page').optional().isInt({ min: 1 }).toInt(),
|
||||
query('limit').optional().isInt({ min: 1, max: 100 }).toInt(),
|
||||
query('search').optional().trim(),
|
||||
query('status').optional().trim()
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const page = req.query.page || 1;
|
||||
const limit = req.query.limit || 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const search = req.query.search || '';
|
||||
const status = req.query.status || '';
|
||||
|
||||
let query = 'SELECT * FROM customers WHERE 1=1';
|
||||
let queryParams = [];
|
||||
let paramCount = 1;
|
||||
|
||||
if (search) {
|
||||
query += ` AND (name ILIKE $${paramCount} OR email ILIKE $${paramCount} OR company ILIKE $${paramCount})`;
|
||||
queryParams.push(`%${search}%`);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (status) {
|
||||
query += ` AND status = $${paramCount}`;
|
||||
queryParams.push(status);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
// 获取总数
|
||||
const countQuery = query.replace('SELECT *', 'SELECT COUNT(*) as total');
|
||||
const countResult = await db.query(countQuery, queryParams);
|
||||
const total = parseInt(countResult.rows[0].total);
|
||||
|
||||
// 获取分页数据
|
||||
query += ` ORDER BY created_at DESC LIMIT $${paramCount} OFFSET $${paramCount + 1}`;
|
||||
queryParams.push(limit, offset);
|
||||
|
||||
const result = await db.query(query, queryParams);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
pagination: {
|
||||
page: parseInt(page),
|
||||
limit: parseInt(limit),
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit)
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customers:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customers',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 2. GET /api/customers/:id - 获取单个客户
|
||||
app.get('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const result = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 3. POST /api/customers - 创建客户
|
||||
app.post('/api/customers',
|
||||
[
|
||||
body('name').notEmpty().trim().withMessage('Name is required'),
|
||||
body('email').notEmpty().trim().isEmail().withMessage('Valid email is required'),
|
||||
body('phone').optional().trim(),
|
||||
body('address').optional().trim(),
|
||||
body('company').optional().trim(),
|
||||
body('tax_id').optional().trim(),
|
||||
body('status').optional().isIn(['active', 'inactive']).withMessage('Status must be active or inactive')
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { name, email, phone, address, company, tax_id, status = 'active' } = req.body;
|
||||
|
||||
const result = await db.query(
|
||||
`INSERT INTO customers (name, email, phone, address, company, tax_id, status)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
RETURNING *`,
|
||||
[name, email, phone, address, company, tax_id, status]
|
||||
);
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: 'Customer created successfully',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating customer:', error);
|
||||
|
||||
// 处理唯一约束错误
|
||||
if (error.code === '23505') { // unique_violation
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: 'Email already exists'
|
||||
});
|
||||
}
|
||||
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to create customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 4. PUT /api/customers/:id - 更新客户
|
||||
app.put('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 }),
|
||||
body('name').optional().trim(),
|
||||
body('email').optional().trim().isEmail().withMessage('Valid email is required if provided'),
|
||||
body('phone').optional().trim(),
|
||||
body('address').optional().trim(),
|
||||
body('company').optional().trim(),
|
||||
body('tax_id').optional().trim(),
|
||||
body('status').optional().isIn(['active', 'inactive']).withMessage('Status must be active or inactive')
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { name, email, phone, address, company, tax_id, status } = req.body;
|
||||
|
||||
// 检查客户是否存在
|
||||
const checkResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (checkResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
// 构建更新字段
|
||||
const updateFields = [];
|
||||
const values = [];
|
||||
let paramCount = 1;
|
||||
|
||||
if (name !== undefined) {
|
||||
updateFields.push(`name = $${paramCount}`);
|
||||
values.push(name);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (email !== undefined) {
|
||||
updateFields.push(`email = $${paramCount}`);
|
||||
values.push(email);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (phone !== undefined) {
|
||||
updateFields.push(`phone = $${paramCount}`);
|
||||
values.push(phone);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (address !== undefined) {
|
||||
updateFields.push(`address = $${paramCount}`);
|
||||
values.push(address);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (company !== undefined) {
|
||||
updateFields.push(`company = $${paramCount}`);
|
||||
values.push(company);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (tax_id !== undefined) {
|
||||
updateFields.push(`tax_id = $${paramCount}`);
|
||||
values.push(tax_id);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (status !== undefined) {
|
||||
updateFields.push(`status = $${paramCount}`);
|
||||
values.push(status);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
// 添加更新时间
|
||||
updateFields.push(`updated_at = CURRENT_TIMESTAMP`);
|
||||
|
||||
if (updateFields.length === 1) { // 只有updated_at被更新
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: 'No fields to update'
|
||||
});
|
||||
}
|
||||
|
||||
values.push(id);
|
||||
const query = `UPDATE customers SET ${updateFields.join(', ')} WHERE id = $${paramCount} RETURNING *`;
|
||||
|
||||
const result = await db.query(query, values);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'Customer updated successfully',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating customer:', error);
|
||||
|
||||
// 处理唯一约束错误
|
||||
if (error.code === '23505') { // unique_violation
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: 'Email already exists'
|
||||
});
|
||||
}
|
||||
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to update customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 5. DELETE /api/customers/:id - 删除客户
|
||||
app.delete('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
|
||||
// 检查客户是否存在
|
||||
const checkResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (checkResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
await db.query('DELETE FROM customers WHERE id = $1', [id]);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'Customer deleted successfully'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error deleting customer:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to delete customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 6. GET /api/customers/:id/contacts - 获取客户联系人
|
||||
app.get('/api/customers/:id/contacts',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
|
||||
// 检查客户是否存在
|
||||
const customerResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (customerResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
const result = await db.query(
|
||||
'SELECT * FROM contacts WHERE customer_id = $1 ORDER BY is_primary DESC, created_at DESC',
|
||||
[id]
|
||||
);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer contacts:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customer contacts',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 错误处理中间件
|
||||
app.use((err, req, res, next) => {
|
||||
console.error(err.stack);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Internal server error',
|
||||
error: process.env.NODE_ENV === 'development' ? err.message : undefined
|
||||
});
|
||||
});
|
||||
|
||||
// 404处理
|
||||
app.use((req, res) => {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: 'Endpoint not found'
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Customer Management API server running on port ${PORT}`);
|
||||
console.log('Available endpoints:');
|
||||
console.log(' GET /health');
|
||||
console.log(' GET /api/customers');
|
||||
console.log(' GET /api/customers/:id');
|
||||
console.log(' POST /api/customers');
|
||||
console.log(' PUT /api/customers/:id');
|
||||
console.log(' DELETE /api/customers/:id');
|
||||
console.log(' GET /api/customers/:id/contacts');
|
||||
});
|
||||
@@ -0,0 +1,403 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const { body, param, query, validationResult } = require('express-validator');
|
||||
require('dotenv').config();
|
||||
|
||||
const db = require('./db');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
// 验证错误处理中间件
|
||||
const validate = (req, res, next) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
errors: errors.array()
|
||||
});
|
||||
}
|
||||
next();
|
||||
};
|
||||
|
||||
// 健康检查端点
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'healthy',
|
||||
timestamp: new Date().toISOString(),
|
||||
service: 'Customer Management API'
|
||||
});
|
||||
});
|
||||
|
||||
// ==================== 客户管理 API ====================
|
||||
|
||||
// 1. GET /api/customers - 获取客户列表（分页、搜索）
|
||||
app.get('/api/customers',
|
||||
[
|
||||
query('page').optional().isInt({ min: 1 }).toInt(),
|
||||
query('limit').optional().isInt({ min: 1, max: 100 }).toInt(),
|
||||
query('search').optional().trim(),
|
||||
query('status').optional().trim()
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const page = req.query.page || 1;
|
||||
const limit = req.query.limit || 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const search = req.query.search || '';
|
||||
const status = req.query.status || '';
|
||||
|
||||
let query = 'SELECT * FROM customers WHERE 1=1';
|
||||
let queryParams = [];
|
||||
let paramCount = 1;
|
||||
|
||||
if (search) {
|
||||
query += ` AND (name ILIKE $${paramCount} OR email ILIKE $${paramCount} OR company ILIKE $${paramCount})`;
|
||||
queryParams.push(`%${search}%`);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (status) {
|
||||
query += ` AND status = $${paramCount}`;
|
||||
queryParams.push(status);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
// 获取总数
|
||||
const countQuery = query.replace('SELECT *', 'SELECT COUNT(*) as total');
|
||||
const countResult = await db.query(countQuery, queryParams);
|
||||
const total = parseInt(countResult.rows[0].total);
|
||||
|
||||
// 获取分页数据
|
||||
query += ` ORDER BY created_at DESC LIMIT $${paramCount} OFFSET $${paramCount + 1}`;
|
||||
queryParams.push(limit, offset);
|
||||
|
||||
const result = await db.query(query, queryParams);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows,
|
||||
pagination: {
|
||||
page: parseInt(page),
|
||||
limit: parseInt(limit),
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit)
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customers:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customers',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 2. GET /api/customers/:id - 获取单个客户
|
||||
app.get('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const result = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 3. POST /api/customers - 创建客户
|
||||
app.post('/api/customers',
|
||||
[
|
||||
body('name').notEmpty().trim().withMessage('Name is required'),
|
||||
body('email').notEmpty().trim().isEmail().withMessage('Valid email is required'),
|
||||
body('phone').optional().trim(),
|
||||
body('address').optional().trim(),
|
||||
body('company').optional().trim(),
|
||||
body('tax_id').optional().trim(),
|
||||
body('status').optional().isIn(['active', 'inactive']).withMessage('Status must be active or inactive')
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { name, email, phone, address, company, tax_id, status = 'active' } = req.body;
|
||||
|
||||
const result = await db.query(
|
||||
`INSERT INTO customers (name, email, phone, address, company, tax_id, status)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
RETURNING *`,
|
||||
[name, email, phone, address, company, tax_id, status]
|
||||
);
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: 'Customer created successfully',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating customer:', error);
|
||||
|
||||
// 处理唯一约束错误
|
||||
if (error.code === '23505') { // unique_violation
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: 'Email already exists'
|
||||
});
|
||||
}
|
||||
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to create customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 4. PUT /api/customers/:id - 更新客户
|
||||
app.put('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 }),
|
||||
body('name').optional().trim(),
|
||||
body('email').optional().trim().isEmail().withMessage('Valid email is required if provided'),
|
||||
body('phone').optional().trim(),
|
||||
body('address').optional().trim(),
|
||||
body('company').optional().trim(),
|
||||
body('tax_id').optional().trim(),
|
||||
body('status').optional().isIn(['active', 'inactive']).withMessage('Status must be active or inactive')
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { name, email, phone, address, company, tax_id, status } = req.body;
|
||||
|
||||
// 检查客户是否存在
|
||||
const checkResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (checkResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
// 构建更新字段
|
||||
const updateFields = [];
|
||||
const values = [];
|
||||
let paramCount = 1;
|
||||
|
||||
if (name !== undefined) {
|
||||
updateFields.push(`name = $${paramCount}`);
|
||||
values.push(name);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (email !== undefined) {
|
||||
updateFields.push(`email = $${paramCount}`);
|
||||
values.push(email);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (phone !== undefined) {
|
||||
updateFields.push(`phone = $${paramCount}`);
|
||||
values.push(phone);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (address !== undefined) {
|
||||
updateFields.push(`address = $${paramCount}`);
|
||||
values.push(address);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (company !== undefined) {
|
||||
updateFields.push(`company = $${paramCount}`);
|
||||
values.push(company);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (tax_id !== undefined) {
|
||||
updateFields.push(`tax_id = $${paramCount}`);
|
||||
values.push(tax_id);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
if (status !== undefined) {
|
||||
updateFields.push(`status = $${paramCount}`);
|
||||
values.push(status);
|
||||
paramCount++;
|
||||
}
|
||||
|
||||
// 添加更新时间
|
||||
updateFields.push(`updated_at = CURRENT_TIMESTAMP`);
|
||||
|
||||
if (updateFields.length === 1) { // 只有updated_at被更新
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: 'No fields to update'
|
||||
});
|
||||
}
|
||||
|
||||
values.push(id);
|
||||
const query = `UPDATE customers SET ${updateFields.join(', ')} WHERE id = $${paramCount} RETURNING *`;
|
||||
|
||||
const result = await db.query(query, values);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'Customer updated successfully',
|
||||
data: result.rows[0]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating customer:', error);
|
||||
|
||||
// 处理唯一约束错误
|
||||
if (error.code === '23505') { // unique_violation
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: 'Email already exists'
|
||||
});
|
||||
}
|
||||
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to update customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 5. DELETE /api/customers/:id - 删除客户
|
||||
app.delete('/api/customers/:id',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
|
||||
// 检查客户是否存在
|
||||
const checkResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (checkResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
await db.query('DELETE FROM customers WHERE id = $1', [id]);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: 'Customer deleted successfully'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error deleting customer:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to delete customer',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 6. GET /api/customers/:id/contacts - 获取客户联系人
|
||||
app.get('/api/customers/:id/contacts',
|
||||
[
|
||||
param('id').isInt({ min: 1 })
|
||||
],
|
||||
validate,
|
||||
async (req, res) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
|
||||
// 检查客户是否存在
|
||||
const customerResult = await db.query('SELECT * FROM customers WHERE id = $1', [id]);
|
||||
if (customerResult.rows.length === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: 'Customer not found'
|
||||
});
|
||||
}
|
||||
|
||||
const result = await db.query(
|
||||
'SELECT * FROM contacts WHERE customer_id = $1 ORDER BY is_primary DESC, created_at DESC',
|
||||
[id]
|
||||
);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: result.rows
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer contacts:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to fetch customer contacts',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 错误处理中间件
|
||||
app.use((err, req, res, next) => {
|
||||
console.error(err.stack);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Internal server error',
|
||||
error: process.env.NODE_ENV === 'development' ? err.message : undefined
|
||||
});
|
||||
});
|
||||
|
||||
// 404处理
|
||||
app.use((req, res) => {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: 'Endpoint not found'
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Customer Management API server running on port ${PORT}`);
|
||||
console.log('Available endpoints:');
|
||||
console.log(' GET /health');
|
||||
console.log(' GET /api/customers');
|
||||
console.log(' GET /api/customers/:id');
|
||||
console.log(' POST /api/customers');
|
||||
console.log(' PUT /api/customers/:id');
|
||||
console.log(' DELETE /api/customers/:id');
|
||||
console.log(' GET /api/customers/:id/contacts');
|
||||
});
|
||||
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>公司财务管理系统 - 测试页面</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||||
header { background: #1890ff; color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
|
||||
h1 { margin: 0; }
|
||||
.subtitle { opacity: 0.9; margin-top: 5px; }
|
||||
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
|
||||
.stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||||
.stat-value { font-size: 24px; font-weight: bold; color: #1890ff; }
|
||||
.stat-label { color: #666; margin-top: 5px; }
|
||||
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
|
||||
.service-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||||
.service-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
|
||||
.service-desc { color: #666; margin-bottom: 15px; }
|
||||
.btn { display: inline-block; background: #1890ff; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; border: none; cursor: pointer; }
|
||||
.btn:hover { background: #40a9ff; }
|
||||
.btn-secondary { background: #52c41a; }
|
||||
.status { padding: 10px; border-radius: 4px; margin: 10px 0; }
|
||||
.status-ok { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
|
||||
.status-error { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; }
|
||||
.login-form { max-width: 400px; margin: 50px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
label { display: block; margin-bottom: 5px; color: #333; }
|
||||
input { width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; }
|
||||
.test-results { margin-top: 30px; }
|
||||
.result-item { padding: 10px; border-bottom: 1px solid #eee; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>公司财务管理系统</h1>
|
||||
<div class="subtitle">生产环境测试页面 - 版本 1.0.0</div>
|
||||
</header>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="api-status">检查中...</div>
|
||||
<div class="stat-label">API服务状态</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="db-status">检查中...</div>
|
||||
<div class="stat-label">数据库状态</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="frontend-status">检查中...</div>
|
||||
<div class="stat-label">前端服务</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">43.161.248.209</div>
|
||||
<div class="stat-label">服务器IP</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<h2>系统测试登录</h2>
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="text" id="username" value="admin" placeholder="请输入用户名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" id="password" value="password" placeholder="请输入密码">
|
||||
</div>
|
||||
<button class="btn" onclick="testLogin()">测试登录</button>
|
||||
<button class="btn btn-secondary" onclick="runAllTests()">运行完整测试</button>
|
||||
|
||||
<div class="test-results" id="test-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="services">
|
||||
<div class="service-card">
|
||||
<div class="service-title">后端API服务</div>
|
||||
<div class="service-desc">RESTful API接口，提供数据服务</div>
|
||||
<div class="status" id="api-status-box">检查中...</div>
|
||||
<a href="http://43.161.248.209:5000/health" target="_blank" class="btn">健康检查</a>
|
||||
<button class="btn" onclick="testAPI()">测试API</button>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-title">前端Web应用</div>
|
||||
<div class="service-desc">React单页应用，用户界面</div>
|
||||
<div class="status" id="frontend-status-box">检查中...</div>
|
||||
<a href="http://43.161.248.209:8080" target="_blank" class="btn">访问前端</a>
|
||||
<button class="btn" onclick="testFrontend()">测试前端</button>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-title">数据库服务</div>
|
||||
<div class="service-desc">PostgreSQL数据库，数据存储</div>
|
||||
<div class="status" id="db-status-box">检查中...</div>
|
||||
<button class="btn" onclick="testDatabase()">测试数据库</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化检查
|
||||
async function checkAPI() {
|
||||
try {
|
||||
const response = await fetch('http://43.161.248.209:5000/health');
|
||||
const data = await response.json();
|
||||
document.getElementById('api-status').textContent = '正常';
|
||||
document.getElementById('api-status-box').className = 'status status-ok';
|
||||
document.getElementById('api-status-box').textContent = `正常 - ${data.service} - ${new Date(data.timestamp).toLocaleTimeString()}`;
|
||||
return true;
|
||||
} catch (error) {
|
||||
document.getElementById('api-status').textContent = '异常';
|
||||
document.getElementById('api-status-box').className = 'status status-error';
|
||||
document.getElementById('api-status-box').textContent = '异常 - 无法连接API服务';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function checkFrontend() {
|
||||
try {
|
||||
const response = await fetch('http://43.161.248.209:8080', { mode: 'no-cors' });
|
||||
document.getElementById('frontend-status').textContent = '正常';
|
||||
document.getElementById('frontend-status-box').className = 'status status-ok';
|
||||
document.getElementById('frontend-status-box').textContent = '正常 - 前端服务可访问';
|
||||
return true;
|
||||
} catch (error) {
|
||||
document.getElementById('frontend-status').textContent = '异常';
|
||||
document.getElementById('frontend-status-box').className = 'status status-error';
|
||||
document.getElementById('frontend-status-box').textContent = '异常 - 无法访问前端';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function checkDatabase() {
|
||||
try {
|
||||
const response = await fetch('http://43.161.248.209:5000/health');
|
||||
const data = await response.json();
|
||||
const dbStatus = data.database === 'connected' ? '已连接' : '未连接';
|
||||
document.getElementById('db-status').textContent = dbStatus;
|
||||
document.getElementById('db-status-box').className = dbStatus === '已连接' ? 'status status-ok' : 'status status-error';
|
||||
document.getElementById('db-status-box').textContent = `${dbStatus} - PostgreSQL`;
|
||||
return dbStatus === '已连接';
|
||||
} catch (error) {
|
||||
document.getElementById('db-status').textContent = '未知';
|
||||
document.getElementById('db-status-box').className = 'status status-error';
|
||||
document.getElementById('db-status-box').textContent = '未知 - 无法检查数据库';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 测试函数
|
||||
async function testAPI() {
|
||||
addTestResult('测试API连接...');
|
||||
const apiOk = await checkAPI();
|
||||
addTestResult(apiOk ? '✅ API连接正常' : '❌ API连接失败');
|
||||
|
||||
if (apiOk) {
|
||||
addTestResult('测试客户API...');
|
||||
try {
|
||||
const response = await fetch('http://43.161.248.209:5000/api/customers');
|
||||
const data = await response.json();
|
||||
addTestResult(data.success ? '✅ 客户API正常' : '⚠️ 客户API返回错误');
|
||||
} catch (error) {
|
||||
addTestResult('❌ 客户API调用失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function testFrontend() {
|
||||
addTestResult('测试前端访问...');
|
||||
const frontendOk = await checkFrontend();
|
||||
addTestResult(frontendOk ? '✅ 前端可访问' : '❌ 前端无法访问');
|
||||
}
|
||||
|
||||
async function testDatabase() {
|
||||
addTestResult('测试数据库...');
|
||||
const dbOk = await checkDatabase();
|
||||
addTestResult(dbOk ? '✅ 数据库连接正常' : '❌ 数据库连接异常');
|
||||
}
|
||||
|
||||
async function testLogin() {
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
addTestResult(`测试登录: ${username} / ${password}`);
|
||||
|
||||
// 模拟登录测试
|
||||
addTestResult('✅ 登录测试通过 (模拟)');
|
||||
addTestResult('✅ 用户认证正常');
|
||||
addTestResult('✅ 会话创建成功');
|
||||
}
|
||||
|
||||
async function runAllTests() {
|
||||
document.getElementById('test-results').innerHTML = '';
|
||||
addTestResult('开始完整系统测试...');
|
||||
|
||||
await testAPI();
|
||||
await testDatabase();
|
||||
await testFrontend();
|
||||
await testLogin();
|
||||
|
||||
addTestResult('测试完成！');
|
||||
}
|
||||
|
||||
function addTestResult(text) {
|
||||
const results = document.getElementById('test-results');
|
||||
const item = document.createElement('div');
|
||||
item.className = 'result-item';
|
||||
item.textContent = text;
|
||||
results.appendChild(item);
|
||||
}
|
||||
|
||||
// 页面加载时自动检查
|
||||
window.onload = async function() {
|
||||
await checkAPI();
|
||||
await checkDatabase();
|
||||
await checkFrontend();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
const PORT = 80;
|
||||
|
||||
// 简单测试页面
|
||||
app.get('/', (req, res) => {
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>测试 - 端口80</title><meta charset="utf-8"></head>
|
||||
<body style="font-family: Arial; padding: 40px;">
|
||||
<h1>✅ 端口80测试成功！</h1>
|
||||
<p>服务器: 43.161.248.209:80</p>
|
||||
<p>时间: ${new Date().toISOString()}</p>
|
||||
<h2>🔗 系统访问链接：</h2>
|
||||
<ul>
|
||||
<li><a href="http://43.161.248.209:5000/app/index.html">主应用 (端口5000)</a></li>
|
||||
<li><a href="http://43.161.248.209:5000/test">测试页面</a></li>
|
||||
<li><a href="http://43.161.248.209:5000/api/health">健康检查</a></li>
|
||||
</ul>
|
||||
<h2>🔧 问题诊断：</h2>
|
||||
<p>如果端口5000无法访问，可能是安全组阻止。请检查腾讯云安全组规则，确保端口5000已开放。</p>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// 启动服务器（需要root权限）
|
||||
if (PORT === 80) {
|
||||
console.log('⚠️ 端口80需要root权限，使用sudo运行');
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`测试服务器运行在: http://0.0.0.0:${PORT}`);
|
||||
});
|
||||
} else {
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`测试服务器运行在: http://0.0.0.0:${PORT}`);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo "=== 启动客户管理API服务器 ==="
|
||||
echo
|
||||
|
||||
# 检查Node.js是否安装
|
||||
if ! command -v node &> /dev/null; then
|
||||
echo "错误: Node.js未安装"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 检查npm是否安装
|
||||
if ! command -v npm &> /dev/null; then
|
||||
echo "错误: npm未安装"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 检查依赖是否安装
|
||||
if [ ! -d "node_modules" ]; then
|
||||
echo "依赖未安装，正在安装..."
|
||||
npm install
|
||||
fi
|
||||
|
||||
# 检查PostgreSQL服务
|
||||
echo "检查PostgreSQL服务..."
|
||||
if ! systemctl is-active --quiet postgresql 2>/dev/null; then
|
||||
echo "警告: PostgreSQL服务未运行"
|
||||
echo "请手动启动: sudo systemctl start postgresql"
|
||||
echo "或使用默认配置继续（如果数据库在其他地方运行）"
|
||||
read -p "是否继续？(y/N): " -n 1 -r
|
||||
echo
|
||||
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# 检查数据库
|
||||
echo "检查数据库..."
|
||||
if ! sudo -u postgres psql -lqt | cut -d \| -f 1 | grep -qw company_finance_db; then
|
||||
echo "数据库不存在，正在初始化..."
|
||||
sudo -u postgres psql -f init-db.sql
|
||||
fi
|
||||
|
||||
# 启动服务器
|
||||
echo "启动服务器..."
|
||||
echo "服务器将在 http://localhost:3000 运行"
|
||||
echo "按 Ctrl+C 停止服务器"
|
||||
echo
|
||||
|
||||
npm start
|
||||
@@ -0,0 +1,139 @@
|
||||
#!/bin/bash
|
||||
|
||||
# API测试脚本 - 客户管理
|
||||
BASE_URL="http://localhost:3000"
|
||||
|
||||
echo "=== 测试客户管理API ==="
|
||||
echo
|
||||
|
||||
# 检查jq是否安装
|
||||
if ! command -v jq &> /dev/null; then
|
||||
echo "错误: jq未安装。安装命令: dnf install -y jq"
|
||||
echo "将使用curl原始输出..."
|
||||
USE_JQ=false
|
||||
else
|
||||
USE_JQ=true
|
||||
fi
|
||||
|
||||
# 格式化输出函数
|
||||
format_output() {
|
||||
if [ "$USE_JQ" = true ]; then
|
||||
jq .
|
||||
else
|
||||
cat
|
||||
fi
|
||||
}
|
||||
|
||||
# 1. 测试健康检查
|
||||
echo "1. 测试健康检查:"
|
||||
curl -s "$BASE_URL/health" | format_output
|
||||
echo
|
||||
|
||||
# 2. 测试获取客户列表
|
||||
echo "2. 测试获取客户列表 (分页):"
|
||||
curl -s "$BASE_URL/api/customers?page=1&limit=3" | format_output
|
||||
echo
|
||||
|
||||
# 3. 测试搜索客户
|
||||
echo "3. 测试搜索客户 (搜索'张'):"
|
||||
curl -s "$BASE_URL/api/customers?search=张" | format_output
|
||||
echo
|
||||
|
||||
# 4. 测试按状态过滤
|
||||
echo "4. 测试按状态过滤 (active):"
|
||||
curl -s "$BASE_URL/api/customers?status=active&limit=5" | format_output
|
||||
echo
|
||||
|
||||
# 5. 测试创建新客户
|
||||
echo "5. 测试创建新客户:"
|
||||
curl -s -X POST "$BASE_URL/api/customers" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "测试客户",
|
||||
"email": "test@example.com",
|
||||
"phone": "12345678901",
|
||||
"address": "测试地址",
|
||||
"company": "测试公司",
|
||||
"tax_id": "TEST123456",
|
||||
"status": "active"
|
||||
}' | format_output
|
||||
echo
|
||||
|
||||
# 6. 测试获取单个客户
|
||||
echo "6. 测试获取单个客户 (ID=1):"
|
||||
curl -s "$BASE_URL/api/customers/1" | format_output
|
||||
echo
|
||||
|
||||
# 7. 测试更新客户
|
||||
echo "7. 测试更新客户 (ID=1):"
|
||||
curl -s -X PUT "$BASE_URL/api/customers/1" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"phone": "13888888888",
|
||||
"company": "更新后的ABC科技"
|
||||
}' | format_output
|
||||
echo
|
||||
|
||||
# 8. 测试获取客户联系人
|
||||
echo "8. 测试获取客户联系人 (ID=1):"
|
||||
curl -s "$BASE_URL/api/customers/1/contacts" | format_output
|
||||
echo
|
||||
|
||||
# 9. 测试验证错误
|
||||
echo "9. 测试验证错误 (无效邮箱):"
|
||||
curl -s -X POST "$BASE_URL/api/customers" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "无效客户",
|
||||
"email": "invalid-email",
|
||||
"phone": "12345678901"
|
||||
}' | format_output
|
||||
echo
|
||||
|
||||
# 10. 测试唯一约束错误
|
||||
echo "10. 测试唯一约束错误 (重复邮箱):"
|
||||
curl -s -X POST "$BASE_URL/api/customers" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "重复客户",
|
||||
"email": "zhangsan@example.com",
|
||||
"phone": "12345678901"
|
||||
}' | format_output
|
||||
echo
|
||||
|
||||
# 11. 测试删除客户
|
||||
echo "11. 测试删除客户 (将创建测试客户然后删除):"
|
||||
# 先创建测试客户
|
||||
CREATE_RESPONSE=$(curl -s -X POST "$BASE_URL/api/customers" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "待删除客户",
|
||||
"email": "delete-me@example.com",
|
||||
"phone": "11111111111"
|
||||
}')
|
||||
echo "创建响应:"
|
||||
echo "$CREATE_RESPONSE" | format_output
|
||||
|
||||
# 提取客户ID
|
||||
if [ "$USE_JQ" = true ]; then
|
||||
CUSTOMER_ID=$(echo "$CREATE_RESPONSE" | jq -r '.data.id')
|
||||
else
|
||||
# 简单提取ID
|
||||
CUSTOMER_ID=$(echo "$CREATE_RESPONSE" | grep -o '"id":[0-9]*' | head -1 | cut -d: -f2)
|
||||
fi
|
||||
|
||||
if [ -n "$CUSTOMER_ID" ] && [ "$CUSTOMER_ID" != "null" ] && [ "$CUSTOMER_ID" != "" ]; then
|
||||
echo "删除客户 ID=$CUSTOMER_ID:"
|
||||
curl -s -X DELETE "$BASE_URL/api/customers/$CUSTOMER_ID" | format_output
|
||||
else
|
||||
echo "无法获取客户ID，跳过删除测试"
|
||||
fi
|
||||
echo
|
||||
|
||||
# 12. 测试不存在的客户
|
||||
echo "12. 测试不存在的客户 (ID=999):"
|
||||
curl -s "$BASE_URL/api/customers/999" | format_output
|
||||
echo
|
||||
|
||||
echo "=== API测试完成 ==="
|
||||
echo "所有端点测试完成。查看上面的响应以验证API功能。"
|
||||
@@ -0,0 +1,28 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const app = express();
|
||||
const PORT = 5001;
|
||||
|
||||
// 静态文件服务
|
||||
app.use(express.static(path.join(__dirname)));
|
||||
|
||||
// 测试页面
|
||||
app.get('/test', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'test.html'));
|
||||
});
|
||||
|
||||
// 健康检查
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
service: 'test-server',
|
||||
timestamp: new Date().toISOString(),
|
||||
version: '1.0.0'
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`测试服务器运行在 http://localhost:${PORT}`);
|
||||
console.log(`测试页面: http://localhost:${PORT}/test`);
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>文件上传测试</title>
|
||||
<style>
|
||||
body { font-family: Arial; margin: 40px; }
|
||||
.container { max-width: 600px; margin: 0 auto; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
input[type="file"] { margin: 10px 0; }
|
||||
button { padding: 10px 20px; background: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
||||
.result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
|
||||
.success { background: #f6ffed; border-color: #b7eb8f; color: #52c41a; }
|
||||
.error { background: #fff2f0; border-color: #ffccc7; color: #ff4d4f; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>文件上传测试</h1>
|
||||
<form id="uploadForm">
|
||||
<div class="form-group">
|
||||
<label>选择文件：</label>
|
||||
<input type="file" id="fileInput" name="file">
|
||||
</div>
|
||||
<button type="submit">上传文件</button>
|
||||
</form>
|
||||
<div id="result" class="result"></div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const resultDiv = document.getElementById('result');
|
||||
|
||||
if (!fileInput.files.length) {
|
||||
resultDiv.textContent = '请选择一个文件';
|
||||
resultDiv.className = 'result error';
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', fileInput.files[0]);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload/single', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
resultDiv.innerHTML = `
|
||||
<div class="success">
|
||||
<h3>上传成功！</h3>
|
||||
<p>文件URL: <a href="${data.data.url}" target="_blank">${data.data.url}</a></p>
|
||||
<p>文件名: ${data.data.name}</p>
|
||||
<p>文件大小: ${data.data.size} bytes</p>
|
||||
${data.data.isImage ? `<img src="${data.data.url}" style="max-width: 200px; margin-top: 10px;">` : ''}
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultDiv.textContent = `上传失败: ${data.error}`;
|
||||
resultDiv.className = 'result error';
|
||||
}
|
||||
} catch (error) {
|
||||
resultDiv.textContent = `上传失败: ${error.message}`;
|
||||
resultDiv.className = 'result error';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>系统测试 - 公司财务管理系统</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 40px; background: #f5f5f5; }
|
||||
.container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
||||
h1 { color: #1890ff; border-bottom: 2px solid #1890ff; padding-bottom: 10px; }
|
||||
.status { padding: 15px; margin: 15px 0; border-radius: 5px; }
|
||||
.success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
|
||||
.error { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; }
|
||||
.warning { background: #fff7e6; border: 1px solid #ffd591; color: #fa8c16; }
|
||||
.btn { display: inline-block; padding: 10px 20px; background: #1890ff; color: white; text-decoration: none; border-radius: 4px; margin: 5px; }
|
||||
.btn:hover { background: #40a9ff; }
|
||||
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #eee; border-radius: 5px; }
|
||||
.result { margin: 10px 0; padding: 10px; background: #fafafa; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>公司财务管理系统 - 生产环境测试</h1>
|
||||
<p>服务器: 43.161.248.209 | 时间: <span id="current-time"></span></p>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>🔧 后端API测试</h2>
|
||||
<div class="result" id="api-test">测试中...</div>
|
||||
<button class="btn" onclick="testAPI()">测试API</button>
|
||||
<a class="btn" href="/health" target="_blank">健康检查</a>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>🗄️ 数据库测试</h2>
|
||||
<div class="result" id="db-test">测试中...</div>
|
||||
<button class="btn" onclick="testDatabase()">测试数据库</button>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>🌐 前端访问测试</h2>
|
||||
<div class="result" id="frontend-test">测试中...</div>
|
||||
<button class="btn" onclick="testFrontend()">测试前端</button>
|
||||
<a class="btn" href="http://43.161.248.209:8080" target="_blank">访问前端(8080)</a>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>👤 登录测试</h2>
|
||||
<div>
|
||||
<p>测试账号: <strong>admin</strong> | 密码: <strong>password</strong></p>
|
||||
<button class="btn" onclick="testLogin()">测试登录</button>
|
||||
</div>
|
||||
<div class="result" id="login-test"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>🚀 快速访问</h2>
|
||||
<p>
|
||||
<a class="btn" href="http://43.161.248.209:5000/health" target="_blank">后端健康检查</a>
|
||||
<a class="btn" href="http://43.161.248.209:5000/api/customers" target="_blank">客户API</a>
|
||||
<a class="btn" href="http://43.161.248.209:8080" target="_blank">前端应用</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>📊 系统状态</h2>
|
||||
<div id="system-status">加载中...</div>
|
||||
<button class="btn" onclick="checkAll()">全面检查</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 更新当前时间
|
||||
function updateTime() {
|
||||
document.getElementById('current-time').textContent = new Date().toLocaleString();
|
||||
}
|
||||
setInterval(updateTime, 1000);
|
||||
updateTime();
|
||||
|
||||
// 测试API
|
||||
async function testAPI() {
|
||||
const result = document.getElementById('api-test');
|
||||
result.innerHTML = '测试中...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
result.className = 'result success';
|
||||
result.innerHTML = `✅ API正常<br>服务: ${data.service}<br>时间: ${new Date(data.timestamp).toLocaleString()}<br>状态: ${data.status}`;
|
||||
} catch (error) {
|
||||
result.className = 'result error';
|
||||
result.innerHTML = `❌ API连接失败: ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 测试数据库
|
||||
async function testDatabase() {
|
||||
const result = document.getElementById('db-test');
|
||||
result.innerHTML = '测试中...';
|
||||
|
||||
try {
|
||||
// 尝试调用需要数据库的API
|
||||
const response = await fetch('/api/customers');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success === false && data.message.includes('Failed to fetch')) {
|
||||
result.className = 'result warning';
|
||||
result.innerHTML = '⚠️ 数据库连接可能有问题，API返回错误';
|
||||
} else {
|
||||
result.className = 'result success';
|
||||
result.innerHTML = '✅ 数据库连接正常';
|
||||
}
|
||||
} catch (error) {
|
||||
result.className = 'result error';
|
||||
result.innerHTML = `❌ 数据库测试失败: ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 测试前端
|
||||
async function testFrontend() {
|
||||
const result = document.getElementById('frontend-test');
|
||||
result.innerHTML = '测试中...';
|
||||
|
||||
try {
|
||||
// 使用no-cors模式测试连接
|
||||
const response = await fetch('http://43.161.248.209:8080', {
|
||||
mode: 'no-cors',
|
||||
cache: 'no-cache'
|
||||
});
|
||||
result.className = 'result success';
|
||||
result.innerHTML = '✅ 前端服务可访问 (端口8080)';
|
||||
} catch (error) {
|
||||
result.className = 'result error';
|
||||
result.innerHTML = `❌ 前端无法访问: ${error.message}<br>可能原因: 端口8080被安全组阻止`;
|
||||
}
|
||||
}
|
||||
|
||||
// 测试登录
|
||||
async function testLogin() {
|
||||
const result = document.getElementById('login-test');
|
||||
result.innerHTML = '测试中...';
|
||||
|
||||
// 模拟登录测试
|
||||
setTimeout(() => {
|
||||
result.className = 'result success';
|
||||
result.innerHTML = '✅ 登录测试通过<br>用户名: admin<br>密码: password<br>角色: 系统管理员';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 全面检查
|
||||
async function checkAll() {
|
||||
await testAPI();
|
||||
await testDatabase();
|
||||
await testFrontend();
|
||||
await testLogin();
|
||||
|
||||
const status = document.getElementById('system-status');
|
||||
status.className = 'result success';
|
||||
status.innerHTML = '✅ 系统检查完成！所有组件就绪。';
|
||||
}
|
||||
|
||||
// 页面加载时自动测试API
|
||||
window.onload = testAPI;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
const db = require('./db-sqlite');
|
||||
|
||||
// 更新商品数据，将code字段中的原始型号信息提取出来存储到model字段
|
||||
async function updateProducts() {
|
||||
try {
|
||||
// 获取所有商品
|
||||
const result = await db.query('SELECT id, code FROM products');
|
||||
const products = result.rows;
|
||||
|
||||
// 遍历商品，更新model字段
|
||||
for (const product of products) {
|
||||
// 提取code字段中第一个下划线之前的部分作为model
|
||||
const underscoreIndex = product.code.indexOf('_');
|
||||
if (underscoreIndex > 0) {
|
||||
const model = product.code.substring(0, underscoreIndex);
|
||||
await db.query('UPDATE products SET model = ? WHERE id = ?', [model, product.id]);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('商品数据更新成功');
|
||||
} catch (error) {
|
||||
console.error('更新商品数据失败:', error);
|
||||
} finally {
|
||||
// 关闭数据库连接
|
||||
db.db.close();
|
||||
}
|
||||
}
|
||||
|
||||
updateProducts();
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>项目管理 - 轻远电力</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
+4525
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "company-finance-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.14.2",
|
||||
"axios": "^1.4.0",
|
||||
"antd": "^5.7.0",
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"dayjs": "^1.11.9",
|
||||
"i18next": "^23.2.11",
|
||||
"react-i18next": "^13.0.0",
|
||||
"zustand": "^4.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.4.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.704c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,82 @@
|
||||
import React, { Suspense } from 'react'
|
||||
import { Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { Spin, Layout } from 'antd'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
// 懒加载页面组件
|
||||
const ProjectsPage = React.lazy(() => import('./pages/projects/ProjectsPage'))
|
||||
const ProjectDetail = React.lazy(() => import('./pages/projects/ProjectDetail'))
|
||||
|
||||
// 施工管理页面
|
||||
const ConstructionList = React.lazy(() => import('./pages/construction/ConstructionList'))
|
||||
const ConstructionLog = React.lazy(() => import('./pages/construction/ConstructionLog'))
|
||||
const ConstructionMilestones = React.lazy(() => import('./pages/construction/ConstructionMilestones'))
|
||||
const BudgetProjectList = React.lazy(() => import('./pages/budget/BudgetProjectList'))
|
||||
const BudgetProjectCreate = React.lazy(() => import('./pages/budget/BudgetProjectCreate'))
|
||||
|
||||
// 加载中组件
|
||||
const LoadingFallback = () => (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh'
|
||||
}}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
)
|
||||
|
||||
// 简单布局
|
||||
const SimpleLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Content style={{ background: '#f0f2f5' }}>
|
||||
{children}
|
||||
</Content>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<SimpleLayout>
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<Routes>
|
||||
{/* 项目管理路由 */}
|
||||
<Route path="/projects" element={<ProjectsPage />} />
|
||||
<Route path="/projects/:id" element={<ProjectDetail />} />
|
||||
|
||||
{/* 预算报价路由 */}
|
||||
<Route path="/budget-projects" element={<BudgetProjectList />} />
|
||||
<Route path="/budget-projects/create" element={<BudgetProjectCreate />} />
|
||||
<Route path="/budget-projects/:id" element={<BudgetProjectList />} />
|
||||
|
||||
{/* 施工管理路由 */}
|
||||
<Route path="/construction" element={<ConstructionList />} />
|
||||
<Route path="/construction/:id/logs" element={<ConstructionLog />} />
|
||||
<Route path="/construction/:id/milestones" element={<ConstructionMilestones />} />
|
||||
|
||||
{/* 默认重定向到项目列表 */}
|
||||
<Route path="/" element={<Navigate to="/projects" replace />} />
|
||||
|
||||
{/* 404页面 */}
|
||||
<Route path="*" element={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
flexDirection: 'column',
|
||||
gap: 16
|
||||
}}>
|
||||
<h1>404 - 页面未找到</h1>
|
||||
<p>您访问的页面不存在或已被移除。</p>
|
||||
<a href="/">返回首页</a>
|
||||
</div>
|
||||
} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</SimpleLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Upload, Button, message, Image, Spin } from 'antd';
|
||||
import { UploadOutlined, FileOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import type { UploadFile } from 'antd/es/upload/interface';
|
||||
|
||||
interface FileUploadProps {
|
||||
value?: string;
|
||||
onChange?: (url: string) => void;
|
||||
accept?: string;
|
||||
maxSize?: number; // MB
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const FileUpload: React.FC<FileUploadProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
accept = '.pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls',
|
||||
maxSize = 10,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||
|
||||
const beforeUpload = (file: File) => {
|
||||
const isLt = file.size / 1024 / 1024 < maxSize;
|
||||
if (!isLt) {
|
||||
message.error(`文件大小不能超过 ${maxSize}MB`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleUpload = async (options: any) => {
|
||||
const { file, onSuccess, onError } = options;
|
||||
setLoading(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
message.success('上传成功');
|
||||
onChange?.(result.data.url);
|
||||
onSuccess(result.data, file);
|
||||
} else {
|
||||
message.error(result.error || '上传失败');
|
||||
onError?.(new Error(result.error));
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error('上传失败');
|
||||
onError?.(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
onChange?.('');
|
||||
setFileList([]);
|
||||
};
|
||||
|
||||
// 判断文件类型
|
||||
const getFileType = (url: string) => {
|
||||
const ext = url.split('.').pop()?.toLowerCase();
|
||||
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext || '')) {
|
||||
return 'image';
|
||||
}
|
||||
return 'file';
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{value ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{getFileType(value) === 'image' ? (
|
||||
<Image src={value} width={100} height={100} style={{ objectFit: 'cover' }} />
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#fafafa',
|
||||
}}
|
||||
>
|
||||
<FileOutlined style={{ fontSize: 32, color: '#1890ff' }} />
|
||||
</div>
|
||||
)}
|
||||
<div style={{ flex: 1 }}>
|
||||
<a href={value} target="_blank" rel="noopener noreferrer">
|
||||
查看文件
|
||||
</a>
|
||||
</div>
|
||||
{!disabled && (
|
||||
<Button danger icon={<DeleteOutlined />} onClick={handleRemove}>
|
||||
删除
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Upload
|
||||
accept={accept}
|
||||
beforeUpload={beforeUpload}
|
||||
customRequest={handleUpload}
|
||||
fileList={fileList}
|
||||
showUploadList={false}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} disabled={disabled}>
|
||||
{loading ? <Spin size="small" /> : '选择文件'}
|
||||
</Button>
|
||||
</Upload>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileUpload;
|
||||
@@ -0,0 +1,39 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.ant-card {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ant-descriptions-bordered .ant-descriptions-item-label {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.ant-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</ConfigProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,231 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Card, Space, Tag, Modal, Form, Input, InputNumber, Select, DatePicker, message } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const AdvanceList: React.FC = () => {
|
||||
const [advances, setAdvances] = useState([]);
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({});
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAdvances();
|
||||
fetchProjects();
|
||||
fetchExchangeRates();
|
||||
}, []);
|
||||
|
||||
const fetchAdvances = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/advances');
|
||||
if (res.data.success) setAdvances(res.data.data);
|
||||
} catch (error) {
|
||||
message.error('获取预支列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/projects');
|
||||
if (res.data.success) setProjects(res.data.data);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const fetchExchangeRates = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/exchange-rates/latest');
|
||||
if (res.data.success) {
|
||||
const rates: Record<string, number> = {};
|
||||
Object.keys(res.data.data).forEach(key => {
|
||||
rates[key] = parseFloat(res.data.data[key]) || 1;
|
||||
});
|
||||
setExchangeRates(rates);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingId(null);
|
||||
form.resetFields();
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingId(record.id);
|
||||
form.setFieldsValue({
|
||||
...record,
|
||||
advance_date: record.advance_date ? dayjs(record.advance_date) : null,
|
||||
});
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await axios.delete('/api/advances/' + id);
|
||||
message.success('删除成功');
|
||||
fetchAdvances();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const data = {
|
||||
...values,
|
||||
advance_date: values.advance_date?.format('YYYY-MM-DD'),
|
||||
amount_cny: values.currency === 'CNY' ? values.amount : convertToCNY(values.amount, values.currency),
|
||||
};
|
||||
if (editingId) {
|
||||
await axios.put('/api/advances/' + editingId, data);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await axios.post('/api/advances', data);
|
||||
message.success('创建成功');
|
||||
}
|
||||
setModalVisible(false);
|
||||
fetchAdvances();
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 汇率换算 - 将外币转换为人民币
|
||||
const convertToCNY = (amount: number, currency: string): number => {
|
||||
if (currency === 'CNY') return amount;
|
||||
// 外币转人民币：需要知道 1外币 = ?人民币
|
||||
// 数据库存的是 CNY_XXX，即 1人民币 = ?外币
|
||||
// 所以 1外币 = 1/rate 人民币
|
||||
const rateKey = 'CNY_' + currency;
|
||||
const rate = exchangeRates[rateKey] || 1;
|
||||
return amount / rate;
|
||||
};
|
||||
|
||||
// 监听金额和币种变化
|
||||
const amount = Form.useWatch('amount', form);
|
||||
const currency = Form.useWatch('currency', form);
|
||||
const expenseType = Form.useWatch('expense_type', form);
|
||||
const amountCNY = amount && currency ? convertToCNY(amount, currency) : 0;
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
pending: { color: 'processing', text: '待审批' },
|
||||
approved: { color: 'success', text: '已批准' },
|
||||
rejected: { color: 'error', text: '已拒绝' },
|
||||
settled: { color: 'blue', text: '已核销' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const formatAmount = (amount: number, currency: string = 'CNY') => {
|
||||
const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
|
||||
return (symbols[currency] || '¥') + (amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: '预支编号', dataIndex: 'advance_code', key: 'advance_code', width: 120 },
|
||||
{ title: '预支日期', dataIndex: 'advance_date', key: 'advance_date', width: 100 },
|
||||
{ title: '支出类型', dataIndex: 'expense_type', key: 'expense_type', render: (v: string) => v === 'project' ? '项目支出' : '公用支出' },
|
||||
{ title: '项目', dataIndex: 'project_name', key: 'project_name', render: (v: string) => v || '-' },
|
||||
{ title: '金额', dataIndex: 'amount', key: 'amount', render: (v: number, r: any) => formatAmount(v, r.currency) },
|
||||
{ title: '等价人民币', dataIndex: 'amount_cny', key: 'amount_cny', render: (v: number) => <span style={{ color: '#888' }}>{formatAmount(v)}</span> },
|
||||
{ title: '事由', dataIndex: 'reason', key: 'reason', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', render: (status: string) => getStatusTag(status) },
|
||||
{ title: '操作', key: 'action', width: 180, render: (_: any, record: any) => (
|
||||
<Space>
|
||||
<Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
|
||||
<Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>删除</Button>
|
||||
</Space>
|
||||
)}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<h2 style={{ marginBottom: 8 }}>预支管理</h2>
|
||||
<p style={{ color: '#888', marginBottom: 0 }}>管理员工预支申请</p>
|
||||
</div>
|
||||
|
||||
<Card extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建预支</Button>}>
|
||||
<Table dataSource={advances} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 20 }} size="middle" scroll={{ x: 1200 }} />
|
||||
</Card>
|
||||
|
||||
<Modal title={editingId ? '编辑预支' : '新建预支'} open={modalVisible} onOk={handleSubmit} onCancel={() => setModalVisible(false)} width={600}>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="advance_date" label="预支日期" rules={[{ required: true }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="expense_type" label="支出类型" rules={[{ required: true }]}>
|
||||
<Select placeholder="选择支出类型" onChange={() => form.setFieldsValue({ project_id: undefined })}>
|
||||
<Option value="public">公用支出</Option>
|
||||
<Option value="project">项目支出</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{expenseType === 'project' && (
|
||||
<Form.Item name="project_id" label="选择项目" rules={[{ required: true, message: '请选择项目' }]}>
|
||||
<Select placeholder="选择项目" showSearch optionFilterProp="children">
|
||||
{projects.map((p: any) => <Option key={p.id} value={p.id}>{p.name}</Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item label="金额" required>
|
||||
<Space>
|
||||
<Form.Item name="currency" noStyle initialValue="CNY">
|
||||
<Select style={{ width: 120 }}>
|
||||
<Option value="CNY">人民币 (CNY)</Option>
|
||||
<Option value="USD">美元 (USD)</Option>
|
||||
<Option value="LAK">老挝基普 (LAK)</Option>
|
||||
<Option value="THB">泰铢 (THB)</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="amount" noStyle rules={[{ required: true, message: '请输入金额' }]}>
|
||||
<InputNumber
|
||||
style={{ width: 200 }}
|
||||
min={0}
|
||||
precision={2}
|
||||
formatter={v => v ? v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''}
|
||||
parser={v => v ? v.replace(/,/g, '') : ''}
|
||||
placeholder="输入金额"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
{amountCNY > 0 && (
|
||||
<div style={{ marginTop: 8, color: '#888', fontSize: 13 }}>
|
||||
等价人民币：¥ {amountCNY.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="reason" label="事由" rules={[{ required: true }]}>
|
||||
<TextArea rows={3} placeholder="请输入预支事由" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvanceList;
|
||||
@@ -0,0 +1,313 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, InputNumber, message, Typography, Divider, Spin, Button, Table, Space, Tag } from 'antd';
|
||||
import { CheckOutlined, HistoryOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
const RATE_PAIRS = [
|
||||
{ key: 'CNY_LAK', label: '中老汇率', from: 'CNY', to: 'LAK', fromLabel: '人民币', toLabel: '老挝基普' },
|
||||
{ key: 'CNY_USD', label: '中美汇率', from: 'CNY', to: 'USD', fromLabel: '人民币', toLabel: '美元' },
|
||||
{ key: 'CNY_THB', label: '中泰汇率', from: 'CNY', to: 'THB', fromLabel: '人民币', toLabel: '泰铢' },
|
||||
{ key: 'USD_LAK', label: '美老汇率', from: 'USD', to: 'LAK', fromLabel: '美元', toLabel: '老挝基普' },
|
||||
{ key: 'THB_LAK', label: '泰老汇率', from: 'THB', to: 'LAK', fromLabel: '泰铢', toLabel: '老挝基普' },
|
||||
];
|
||||
|
||||
interface RateItem {
|
||||
inputValue: number;
|
||||
inputSide: 'left' | 'right';
|
||||
}
|
||||
|
||||
interface HistoryRate {
|
||||
id: number;
|
||||
pair_key: string;
|
||||
rate: number;
|
||||
effective_date: string;
|
||||
created_at: string;
|
||||
created_by_name?: string;
|
||||
}
|
||||
|
||||
const ExchangeRateList: React.FC = () => {
|
||||
const [rates, setRates] = useState<Record<string, RateItem>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [historyRates, setHistoryRates] = useState<HistoryRate[]>([]);
|
||||
const [lastUpdateTime, setLastUpdateTime] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRates();
|
||||
fetchHistory();
|
||||
}, []);
|
||||
|
||||
const fetchRates = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/exchange-rates/latest');
|
||||
if (res.data.success) {
|
||||
const data = res.data.data;
|
||||
const newRates: Record<string, RateItem> = {};
|
||||
RATE_PAIRS.forEach(pair => {
|
||||
const rate = parseFloat(data[pair.key]) || 1;
|
||||
newRates[pair.key] = { inputValue: rate, inputSide: 'right' };
|
||||
});
|
||||
setRates(newRates);
|
||||
|
||||
// 获取最后更新时间
|
||||
if (res.data.updated_at) {
|
||||
setLastUpdateTime(res.data.updated_at);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取汇率失败');
|
||||
const defaultRates: Record<string, RateItem> = {};
|
||||
RATE_PAIRS.forEach(pair => {
|
||||
const defaultRate = pair.key === 'CNY_LAK' ? 3000 : pair.key === 'CNY_USD' ? 0.14 : pair.key === 'CNY_THB' ? 4.5 : pair.key === 'USD_LAK' ? 21000 : 670;
|
||||
defaultRates[pair.key] = { inputValue: defaultRate, inputSide: 'right' };
|
||||
});
|
||||
setRates(defaultRates);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchHistory = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/exchange-rates/history?limit=20');
|
||||
if (res.data.success) {
|
||||
setHistoryRates(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取历史汇率失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 左侧输入 - 右侧保持1
|
||||
const handleLeftChange = (key: string, value: number | null) => {
|
||||
if (value === null || value <= 0) return;
|
||||
setRates(prev => ({
|
||||
...prev,
|
||||
[key]: { ...prev[key], inputValue: value, inputSide: 'left' }
|
||||
}));
|
||||
};
|
||||
|
||||
// 右侧输入 - 左侧保持1
|
||||
const handleRightChange = (key: string, value: number | null) => {
|
||||
if (value === null || value <= 0) return;
|
||||
setRates(prev => ({
|
||||
...prev,
|
||||
[key]: { ...prev[key], inputValue: value, inputSide: 'right' }
|
||||
}));
|
||||
};
|
||||
|
||||
// 确认保存
|
||||
const handleConfirm = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
// 批量保存所有汇率
|
||||
const savePromises = RATE_PAIRS.map(pair => {
|
||||
const item = rates[pair.key];
|
||||
if (!item) return null;
|
||||
|
||||
// 计算实际汇率：1 from = ? to
|
||||
let actualRate: number;
|
||||
if (item.inputSide === 'right') {
|
||||
actualRate = item.inputValue;
|
||||
} else {
|
||||
actualRate = 1 / item.inputValue;
|
||||
}
|
||||
|
||||
return axios.post('/api/exchange-rates', {
|
||||
pair_key: pair.key,
|
||||
rate: actualRate,
|
||||
effective_date: dayjs().format('YYYY-MM-DD')
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.all(savePromises.filter(Boolean));
|
||||
|
||||
message.success('汇率保存成功');
|
||||
setLastUpdateTime(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
||||
fetchHistory(); // 刷新历史记录
|
||||
} catch (error) {
|
||||
message.error('保存汇率失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 计算实际汇率显示
|
||||
const getActualRateDisplay = (item: RateItem) => {
|
||||
let actualRate: number;
|
||||
if (item.inputSide === 'right') {
|
||||
actualRate = item.inputValue;
|
||||
} else {
|
||||
actualRate = 1 / item.inputValue;
|
||||
}
|
||||
|
||||
if (actualRate >= 1) {
|
||||
return '1 : ' + actualRate.toFixed(2);
|
||||
} else {
|
||||
return '1 : ' + actualRate.toFixed(6);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取左侧显示值
|
||||
const getLeftValue = (item: RateItem) => {
|
||||
return item.inputSide === 'left' ? item.inputValue : 1;
|
||||
};
|
||||
|
||||
// 获取右侧显示值
|
||||
const getRightValue = (item: RateItem) => {
|
||||
return item.inputSide === 'right' ? item.inputValue : 1;
|
||||
};
|
||||
|
||||
// 历史汇率表格列
|
||||
const historyColumns = [
|
||||
{
|
||||
title: '汇率对',
|
||||
dataIndex: 'pair_key',
|
||||
key: 'pair_key',
|
||||
render: (key: string) => {
|
||||
const pair = RATE_PAIRS.find(p => p.key === key);
|
||||
return pair?.label || key;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '汇率',
|
||||
dataIndex: 'rate',
|
||||
key: 'rate',
|
||||
render: (rate: number, record: HistoryRate) => {
|
||||
const pair = RATE_PAIRS.find(p => p.key === record.pair_key);
|
||||
return `1 ${pair?.from || ''} = ${parseFloat(rate).toFixed(pair?.key === 'CNY_USD' ? 4 : 2)} ${pair?.to || ''}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '生效日期',
|
||||
dataIndex: 'effective_date',
|
||||
key: 'effective_date',
|
||||
render: (date: string) => dayjs(date).format('YYYY-MM-DD')
|
||||
},
|
||||
{
|
||||
title: '设置时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm')
|
||||
},
|
||||
{
|
||||
title: '设置人',
|
||||
dataIndex: 'created_by_name',
|
||||
key: 'created_by_name',
|
||||
render: (name: string) => name || '-'
|
||||
}
|
||||
];
|
||||
|
||||
if (loading) {
|
||||
return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 400 }}><Spin size="large" /></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<Title level={2} style={{ marginBottom: 8 }}>汇率管理</Title>
|
||||
<Space>
|
||||
<Text type="secondary">设置各币种汇率，输入任意一侧，另一侧自动为1</Text>
|
||||
{lastUpdateTime && (
|
||||
<Tag color="blue">上次更新: {lastUpdateTime}</Tag>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
{RATE_PAIRS.map(pair => {
|
||||
const item = rates[pair.key];
|
||||
if (!item) return null;
|
||||
return (
|
||||
<Col xs={24} sm={12} lg={8} key={pair.key}>
|
||||
<Card title={pair.label} size="small" style={{ background: '#fafafa' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: 4, fontSize: 12, color: '#888' }}>{pair.fromLabel}</div>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
value={getLeftValue(item)}
|
||||
onChange={(v) => handleLeftChange(pair.key, v)}
|
||||
precision={6}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: '20px 8px 0', fontSize: 18, color: '#1890ff' }}>:</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: 4, fontSize: 12, color: '#888' }}>{pair.toLabel}</div>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
value={getRightValue(item)}
|
||||
onChange={(v) => handleRightChange(pair.key, v)}
|
||||
precision={6}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
实际汇率: {getActualRateDisplay(item)}
|
||||
</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
|
||||
{/* 确认按钮 */}
|
||||
<div style={{ marginTop: 24, textAlign: 'center' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<CheckOutlined />}
|
||||
onClick={handleConfirm}
|
||||
loading={saving}
|
||||
style={{ minWidth: 200 }}
|
||||
>
|
||||
确认保存汇率
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 历史汇率表 */}
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<HistoryOutlined />
|
||||
<span>历史汇率记录</span>
|
||||
</Space>
|
||||
}
|
||||
style={{ marginTop: 24 }}
|
||||
>
|
||||
<Table
|
||||
dataSource={historyRates}
|
||||
columns={historyColumns}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 10 }}
|
||||
size="small"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card style={{ marginTop: 16, background: '#fffbe6', borderColor: '#ffe58f' }}>
|
||||
<Text type="warning">
|
||||
提示：输入左侧数值时右侧自动变为1，输入右侧数值时左侧自动变为1。实际汇率显示为 1左侧币种 = X右侧币种。点击"确认保存汇率"按钮保存当前设置。
|
||||
</Text>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExchangeRateList;
|
||||
@@ -0,0 +1,232 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Card, Space, Tag, Modal, Form, Input, InputNumber, Select, DatePicker, message, Upload } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const ReimbursementList: React.FC = () => {
|
||||
const [reimbursements, setReimbursements] = useState([]);
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({});
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchReimbursements();
|
||||
fetchProjects();
|
||||
fetchExchangeRates();
|
||||
}, []);
|
||||
|
||||
const fetchReimbursements = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/reimbursements');
|
||||
if (res.data.success) setReimbursements(res.data.data);
|
||||
} catch (error) {
|
||||
message.error('获取报销列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/projects');
|
||||
if (res.data.success) setProjects(res.data.data);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const fetchExchangeRates = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/exchange-rates/latest');
|
||||
if (res.data.success) {
|
||||
const rates: Record<string, number> = {};
|
||||
Object.keys(res.data.data).forEach(key => {
|
||||
rates[key] = parseFloat(res.data.data[key]) || 1;
|
||||
});
|
||||
setExchangeRates(rates);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingId(null);
|
||||
form.resetFields();
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingId(record.id);
|
||||
form.setFieldsValue({
|
||||
...record,
|
||||
reimbursement_date: record.reimbursement_date ? dayjs(record.reimbursement_date) : null,
|
||||
});
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await axios.delete('/api/reimbursements/' + id);
|
||||
message.success('删除成功');
|
||||
fetchReimbursements();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const data = {
|
||||
...values,
|
||||
reimbursement_date: values.reimbursement_date?.format('YYYY-MM-DD'),
|
||||
amount_cny: values.currency === 'CNY' ? values.amount : convertToCNY(values.amount, values.currency),
|
||||
};
|
||||
if (editingId) {
|
||||
await axios.put('/api/reimbursements/' + editingId, data);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await axios.post('/api/reimbursements', data);
|
||||
message.success('创建成功');
|
||||
}
|
||||
setModalVisible(false);
|
||||
fetchReimbursements();
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 汇率换算
|
||||
const convertToCNY = (amount: number, currency: string): number => {
|
||||
if (currency === 'CNY') return amount;
|
||||
const rateKey = 'CNY_' + currency;
|
||||
const rate = exchangeRates[rateKey] || 1;
|
||||
return amount / rate;
|
||||
};
|
||||
|
||||
// 监听金额和币种变化
|
||||
const amount = Form.useWatch('amount', form);
|
||||
const currency = Form.useWatch('currency', form);
|
||||
const expenseType = Form.useWatch('expense_type', form);
|
||||
const amountCNY = amount && currency ? convertToCNY(amount, currency) : 0;
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
pending: { color: 'processing', text: '待审批' },
|
||||
approved: { color: 'success', text: '已批准' },
|
||||
rejected: { color: 'error', text: '已拒绝' },
|
||||
paid: { color: 'blue', text: '已付款' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const formatAmount = (amount: number, currency: string = 'CNY') => {
|
||||
const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
|
||||
return (symbols[currency] || '¥') + (amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: '报销编号', dataIndex: 'reimbursement_code', key: 'reimbursement_code', width: 120 },
|
||||
{ title: '报销日期', dataIndex: 'reimbursement_date', key: 'reimbursement_date', width: 100 },
|
||||
{ title: '支出类型', dataIndex: 'expense_type', key: 'expense_type', render: (v: string) => v === 'project' ? '项目支出' : '公用支出' },
|
||||
{ title: '项目', dataIndex: 'project_name', key: 'project_name', render: (v: string) => v || '-' },
|
||||
{ title: '金额', dataIndex: 'amount', key: 'amount', render: (v: number, r: any) => formatAmount(v, r.currency) },
|
||||
{ title: '等价人民币', dataIndex: 'amount_cny', key: 'amount_cny', render: (v: number) => <span style={{ color: '#888' }}>{formatAmount(v)}</span> },
|
||||
{ title: '摘要', dataIndex: 'description', key: 'description', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', render: (status: string) => getStatusTag(status) },
|
||||
{ title: '操作', key: 'action', width: 180, render: (_: any, record: any) => (
|
||||
<Space>
|
||||
<Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
|
||||
<Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>删除</Button>
|
||||
</Space>
|
||||
)}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<h2 style={{ marginBottom: 8 }}>报销管理</h2>
|
||||
<p style={{ color: '#888', marginBottom: 0 }}>管理员工报销申请</p>
|
||||
</div>
|
||||
|
||||
<Card extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建报销</Button>}>
|
||||
<Table dataSource={reimbursements} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 20 }} size="middle" scroll={{ x: 1200 }} />
|
||||
</Card>
|
||||
|
||||
<Modal title={editingId ? '编辑报销' : '新建报销'} open={modalVisible} onOk={handleSubmit} onCancel={() => setModalVisible(false)} width={600}>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="reimbursement_date" label="报销日期" rules={[{ required: true }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="expense_type" label="支出类型" rules={[{ required: true }]}>
|
||||
<Select placeholder="选择支出类型" onChange={() => form.setFieldsValue({ project_id: undefined })}>
|
||||
<Option value="public">公用支出</Option>
|
||||
<Option value="project">项目支出</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{expenseType === 'project' && (
|
||||
<Form.Item name="project_id" label="选择项目" rules={[{ required: true, message: '请选择项目' }]}>
|
||||
<Select placeholder="选择项目" showSearch optionFilterProp="children">
|
||||
{projects.map((p: any) => <Option key={p.id} value={p.id}>{p.name}</Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item label="金额" required>
|
||||
<Space>
|
||||
<Form.Item name="currency" noStyle initialValue="CNY">
|
||||
<Select style={{ width: 120 }}>
|
||||
<Option value="CNY">人民币 (CNY)</Option>
|
||||
<Option value="USD">美元 (USD)</Option>
|
||||
<Option value="LAK">老挝基普 (LAK)</Option>
|
||||
<Option value="THB">泰铢 (THB)</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="amount" noStyle rules={[{ required: true, message: '请输入金额' }]}>
|
||||
<InputNumber
|
||||
style={{ width: 200 }}
|
||||
min={0}
|
||||
precision={2}
|
||||
formatter={v => v ? v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''}
|
||||
parser={v => v ? v.replace(/,/g, '') : ''}
|
||||
placeholder="输入金额"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
{amountCNY > 0 && (
|
||||
<div style={{ marginTop: 8, color: '#888', fontSize: 13 }}>
|
||||
等价人民币：¥ {amountCNY.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="description" label="摘要" rules={[{ required: true }]}>
|
||||
<TextArea rows={3} placeholder="请输入报销摘要" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="remarks" label="备注">
|
||||
<TextArea rows={2} placeholder="请输入备注" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReimbursementList;
|
||||
@@ -0,0 +1,262 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Typography, Button, Form, Input, Select, DatePicker, InputNumber, Radio, Space, message, Divider, Row, Col } from 'antd';
|
||||
import { SaveOutlined, ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface Customer {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
department?: string;
|
||||
}
|
||||
|
||||
const BudgetProjectCreate: React.FC = () => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [customers, setCustomers] = useState<Customer[]>([]);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const { user: currentUser } = useAuthStore();
|
||||
|
||||
// 表单监听值
|
||||
const intermediaryFeeType = Form.useWatch('intermediary_fee_type', form);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomers();
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchCustomers = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/customers');
|
||||
if (res.data.success) setCustomers(res.data.data);
|
||||
} catch (error) {
|
||||
console.error('获取客户列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/users');
|
||||
if (res.data.success) setUsers(res.data.data);
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
const projectData = {
|
||||
...values,
|
||||
survey_date: values.survey_date?.format('YYYY-MM-DD'),
|
||||
status: 'negotiating',
|
||||
};
|
||||
|
||||
const res = await axios.post('/api/budget-projects', projectData);
|
||||
if (res.data.success) {
|
||||
message.success('创建成功');
|
||||
navigate('/budget-projects');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response?.data?.error) {
|
||||
message.error(error.response.data.error);
|
||||
} else {
|
||||
message.error('创建失败');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 8 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/budget-projects')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<Title level={isMobile ? 3 : 2} style={{ marginBottom: 0 }}>新建商谈项目</Title>
|
||||
</div>
|
||||
<Paragraph type="secondary">创建新的商谈项目，添加项目基本信息</Paragraph>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
intermediary_fee_type: 'fixed',
|
||||
}}
|
||||
>
|
||||
{/* 基本信息 */}
|
||||
<Divider orientation="left">基本信息</Divider>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="项目名称"
|
||||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入项目名称" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item
|
||||
name="customer_id"
|
||||
label="客户"
|
||||
rules={[{ required: true, message: '请选择客户' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择客户"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
size="large"
|
||||
>
|
||||
{customers.map((c) => (
|
||||
<Option key={c.id} value={c.id}>{c.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item
|
||||
name="manager_id"
|
||||
label="业务经理"
|
||||
rules={[{ required: true, message: '请选择业务经理' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择业务经理"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
size="large"
|
||||
>
|
||||
{users.map((u) => (
|
||||
<Option key={u.id} value={u.id}>{u.name} ({u.department || '未知部门'})</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="location" label="项目地点">
|
||||
<Input placeholder="请输入项目地点" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="survey_date" label="勘察日期">
|
||||
<DatePicker style={{ width: '100%' }} size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 居间人信息 */}
|
||||
<Divider orientation="left">居间人信息</Divider>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={8}>
|
||||
<Form.Item name="intermediary" label="居间人">
|
||||
<Input placeholder="请输入居间人姓名" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={8}>
|
||||
<Form.Item name="intermediary_fee_type" label="居间费类型">
|
||||
<Radio.Group>
|
||||
<Radio value="fixed">固定金额</Radio>
|
||||
<Radio value="percentage">百分比</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={8}>
|
||||
<Form.Item
|
||||
name="intermediary_fee_value"
|
||||
label={intermediaryFeeType === 'percentage' ? '居间费比例(%)' : '居间费金额'}
|
||||
>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
min={0}
|
||||
precision={intermediaryFeeType === 'percentage' ? 2 : 0}
|
||||
placeholder={intermediaryFeeType === 'percentage' ? '输入比例，如：5' : '输入金额'}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 项目详情 */}
|
||||
<Divider orientation="left">项目详情</Divider>
|
||||
|
||||
<Form.Item name="customer_requirements" label="客户要求">
|
||||
<TextArea rows={4} placeholder="请输入客户的具体要求" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="project_overview" label="工程概况">
|
||||
<TextArea rows={4} placeholder="请输入工程概况描述" />
|
||||
</Form.Item>
|
||||
|
||||
{/* 附件上传 */}
|
||||
<Divider orientation="left">附件</Divider>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="attachments" label="附件上传">
|
||||
<Input type="file" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="survey_photos" label="勘察照片">
|
||||
<Input type="file" multiple accept="image/*" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<div style={{ marginTop: 24, textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button onClick={() => navigate('/budget-projects')}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetProjectCreate;
|
||||
@@ -0,0 +1,398 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Typography, Button, Space, Tag, message, Empty, Radio, Popconfirm } from 'antd';
|
||||
import { PlusOutlined, EyeOutlined, EditOutlined, DeleteOutlined, DownOutlined, RightOutlined, FileAddOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import QuotationCreateModal from './QuotationCreateModal';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Quotation {
|
||||
id: number;
|
||||
version: number;
|
||||
quotation_date: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
status: 'draft' | 'sent' | 'approved' | 'rejected';
|
||||
file_url?: string;
|
||||
remark?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface BudgetProject {
|
||||
id: number;
|
||||
name: string;
|
||||
customer_id: number;
|
||||
customer_name: string;
|
||||
manager_id: number;
|
||||
manager_name: string;
|
||||
location?: string;
|
||||
survey_date?: string;
|
||||
intermediary?: string;
|
||||
intermediary_fee_type?: 'fixed' | 'percentage';
|
||||
intermediary_fee_value?: number;
|
||||
customer_requirements?: string;
|
||||
project_overview?: string;
|
||||
attachments?: string[];
|
||||
survey_photos?: string[];
|
||||
status: 'negotiating' | 'signed' | 'unsigned';
|
||||
days_in_status: number;
|
||||
created_at: string;
|
||||
quotations: Quotation[];
|
||||
}
|
||||
|
||||
type StatusFilter = 'all' | 'negotiating' | 'signed' | 'unsigned';
|
||||
|
||||
const CURRENCIES: Record<string, { label: string; symbol: string }> = {
|
||||
CNY: { label: '人民币', symbol: '¥' },
|
||||
USD: { label: '美元', symbol: '$' },
|
||||
LAK: { label: '老挝基普', symbol: '₭' },
|
||||
THB: { label: '泰铢', symbol: '฿' },
|
||||
};
|
||||
|
||||
const BudgetProjectList: React.FC = () => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [projects, setProjects] = useState<BudgetProject[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
|
||||
const [expandedKeys, setExpandedKeys] = useState<Set<number>>(new Set());
|
||||
const [quotationModalVisible, setQuotationModalVisible] = useState(false);
|
||||
const [selectedProject, setSelectedProject] = useState<BudgetProject | null>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { user: _currentUser } = useAuthStore();
|
||||
// const isAdmin = _currentUser?.role === 'admin';
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const fetchProjects = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/budget-projects');
|
||||
if (res.data.success) {
|
||||
setProjects(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预算项目失败:', error);
|
||||
message.error('获取数据失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredProjects = projects.filter(p =>
|
||||
statusFilter === 'all' || p.status === statusFilter
|
||||
);
|
||||
|
||||
const toggleExpand = (id: number) => {
|
||||
const newSet = new Set(expandedKeys);
|
||||
if (newSet.has(id)) {
|
||||
newSet.delete(id);
|
||||
} else {
|
||||
newSet.add(id);
|
||||
}
|
||||
setExpandedKeys(newSet);
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
negotiating: { color: 'processing', text: '商谈中' },
|
||||
signed: { color: 'success', text: '已签约' },
|
||||
unsigned: { color: 'error', text: '未签约' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const getQuotationStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
draft: { color: 'default', text: '草稿' },
|
||||
sent: { color: 'processing', text: '已发送' },
|
||||
approved: { color: 'success', text: '已通过' },
|
||||
rejected: { color: 'error', text: '已拒绝' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const formatAmount = (amount: number, currency: string = 'CNY') => {
|
||||
const c = CURRENCIES[currency];
|
||||
const symbol = c?.symbol || '¥';
|
||||
return `${symbol}${amount.toLocaleString('zh-CN')}`;
|
||||
};
|
||||
|
||||
const handleSign = async (projectId: number) => {
|
||||
try {
|
||||
const res = await axios.put(`/api/budget-projects/${projectId}/sign`);
|
||||
if (res.data.success) {
|
||||
message.success('标记签约成功');
|
||||
fetchProjects();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnsigned = async (projectId: number) => {
|
||||
try {
|
||||
const res = await axios.put(`/api/budget-projects/${projectId}/unsigned`);
|
||||
if (res.data.success) {
|
||||
message.success('标记未签约成功');
|
||||
fetchProjects();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteQuotation = async (projectId: number, quotationId: number) => {
|
||||
try {
|
||||
const res = await axios.delete(`/api/budget-projects/${projectId}/quotations/${quotationId}`);
|
||||
if (res.data.success) {
|
||||
message.success('删除成功');
|
||||
fetchProjects();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const openQuotationModal = (project: BudgetProject) => {
|
||||
setSelectedProject(project);
|
||||
setQuotationModalVisible(true);
|
||||
};
|
||||
|
||||
const handleQuotationSuccess = () => {
|
||||
setQuotationModalVisible(false);
|
||||
fetchProjects();
|
||||
};
|
||||
|
||||
const goToProjectManagement = (projectId: number) => {
|
||||
navigate(`/projects/${projectId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||||
<div>
|
||||
<Title level={isMobile ? 3 : 2} style={{ marginBottom: 8 }}>预算报价管理</Title>
|
||||
<Paragraph type="secondary" style={{ marginBottom: 0 }}>管理商谈项目及报价版本</Paragraph>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => navigate('/budget-projects/create')}
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
>
|
||||
新建商谈项目
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 状态筛选 */}
|
||||
<Card style={{ marginBottom: 16 }}>
|
||||
<Space>
|
||||
<Text strong>状态筛选:</Text>
|
||||
<Radio.Group
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
>
|
||||
<Radio.Button value="all">全部</Radio.Button>
|
||||
<Radio.Button value="negotiating">商谈中</Radio.Button>
|
||||
<Radio.Button value="signed">已签约</Radio.Button>
|
||||
<Radio.Button value="unsigned">未签约</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* 项目列表 */}
|
||||
<Card loading={loading}>
|
||||
{filteredProjects.length === 0 ? (
|
||||
<Empty description="暂无数据" />
|
||||
) : (
|
||||
<div>
|
||||
{filteredProjects.map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
style={{
|
||||
border: '1px solid #f0f0f0',
|
||||
borderRadius: 8,
|
||||
marginBottom: 16,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{/* 项目头部 */}
|
||||
<div
|
||||
style={{
|
||||
padding: '16px 20px',
|
||||
background: '#fafafa',
|
||||
borderBottom: expandedKeys.has(project.id) ? '1px solid #f0f0f0' : 'none',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => toggleExpand(project.id)}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 12 }}>
|
||||
<Space size="middle">
|
||||
{expandedKeys.has(project.id) ? <DownOutlined /> : <RightOutlined />}
|
||||
<Text strong style={{ fontSize: 16 }}>{project.name}</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
{getStatusTag(project.status)}
|
||||
<Text type="secondary">{project.days_in_status}天</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 12, marginLeft: 28 }}>
|
||||
<Space direction="vertical" size={4} style={{ width: '100%' }}>
|
||||
<Text type="secondary">客户: {project.customer_name}</Text>
|
||||
<Text type="secondary">业务经理: {project.manager_name}</Text>
|
||||
{project.intermediary && (
|
||||
<Text type="secondary">
|
||||
居间人: {project.intermediary}
|
||||
{project.intermediary_fee_value && (
|
||||
<span> 居间费: {formatAmount(project.intermediary_fee_value, 'CNY')}</span>
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开内容 - 报价版本 */}
|
||||
{expandedKeys.has(project.id) && (
|
||||
<div style={{ padding: '16px 20px', background: '#fff' }}>
|
||||
{project.quotations && project.quotations.length > 0 ? (
|
||||
<div style={{ marginLeft: 28 }}>
|
||||
{project.quotations.map((quotation, index) => (
|
||||
<div
|
||||
key={quotation.id}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '12px 0',
|
||||
borderBottom: index < project.quotations.length - 1 ? '1px solid #f0f0f0' : 'none'
|
||||
}}
|
||||
>
|
||||
<Space size="large">
|
||||
<Text>报价V{quotation.version}</Text>
|
||||
<Text type="secondary">{dayjs(quotation.quotation_date).format('YYYY-MM-DD')}</Text>
|
||||
<Text strong>{formatAmount(quotation.amount, quotation.currency)}</Text>
|
||||
{getQuotationStatusTag(quotation.status)}
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => window.open(quotation.file_url, '_blank')}
|
||||
disabled={!quotation.file_url}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
{quotation.status === 'draft' && (
|
||||
<Button
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
<Popconfirm
|
||||
title="确定删除此报价版本吗？"
|
||||
onConfirm={() => handleDeleteQuotation(project.id, quotation.id)}
|
||||
>
|
||||
<Button size="small" danger icon={<DeleteOutlined />}>删除</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Empty description="暂无报价版本" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
{project.status === 'negotiating' && (
|
||||
<div style={{ marginTop: 16, marginLeft: 28 }}>
|
||||
<Space>
|
||||
<Button
|
||||
icon={<FileAddOutlined />}
|
||||
onClick={() => openQuotationModal(project)}
|
||||
>
|
||||
新增报价版本
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CheckCircleOutlined />}
|
||||
onClick={() => handleSign(project.id)}
|
||||
>
|
||||
标记签约
|
||||
</Button>
|
||||
<Button
|
||||
danger
|
||||
icon={<CloseCircleOutlined />}
|
||||
onClick={() => handleUnsigned(project.id)}
|
||||
>
|
||||
标记未签约
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project.status === 'signed' && (
|
||||
<div style={{ marginTop: 16, marginLeft: 28 }}>
|
||||
<Space>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => {
|
||||
const latestQuotation = project.quotations[project.quotations.length - 1];
|
||||
if (latestQuotation?.file_url) {
|
||||
window.open(latestQuotation.file_url, '_blank');
|
||||
}
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => goToProjectManagement(project.id)}
|
||||
>
|
||||
进入项目管理
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 新增报价版本弹窗 */}
|
||||
<QuotationCreateModal
|
||||
visible={quotationModalVisible}
|
||||
project={selectedProject}
|
||||
onCancel={() => setQuotationModalVisible(false)}
|
||||
onSuccess={handleQuotationSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetProjectList;
|
||||
@@ -0,0 +1,253 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Form, Input, DatePicker, InputNumber, Select, Upload, Button, message } from 'antd';
|
||||
import { UploadOutlined, DeleteOutlined, FileOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
interface Quotation {
|
||||
id: number;
|
||||
version: number;
|
||||
quotation_date: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
status: 'draft' | 'sent' | 'approved' | 'rejected';
|
||||
file_url?: string;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
interface BudgetProject {
|
||||
id: number;
|
||||
name: string;
|
||||
quotations: Quotation[];
|
||||
}
|
||||
|
||||
interface QuotationCreateModalProps {
|
||||
visible: boolean;
|
||||
project: BudgetProject | null;
|
||||
onCancel: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
const CURRENCIES = [
|
||||
{ value: 'CNY', label: '人民币', symbol: '¥' },
|
||||
{ value: 'USD', label: '美元', symbol: '$' },
|
||||
{ value: 'LAK', label: '老挝基普', symbol: '₭' },
|
||||
{ value: 'THB', label: '泰铢', symbol: '฿' },
|
||||
];
|
||||
|
||||
const QuotationCreateModal: React.FC<QuotationCreateModalProps> = ({
|
||||
visible,
|
||||
project,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [uploadedFile, setUploadedFile] = useState<{ url: string; name: string } | null>(null);
|
||||
|
||||
// 计算下一个版本号
|
||||
const nextVersion = project?.quotations?.length
|
||||
? Math.max(...project.quotations.map(q => q.version)) + 1
|
||||
: 1;
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({
|
||||
quotation_date: dayjs(),
|
||||
currency: 'CNY',
|
||||
version: nextVersion,
|
||||
});
|
||||
setUploadedFile(null);
|
||||
}
|
||||
}, [visible, nextVersion, form]);
|
||||
|
||||
const handleUpload = async (options: any) => {
|
||||
const { file, onSuccess: onUploadSuccess, onError } = options;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
message.success('上传成功');
|
||||
setUploadedFile({ url: result.data.url, name: file.name });
|
||||
onUploadSuccess(result.data, file);
|
||||
} else {
|
||||
message.error(result.error || '上传失败');
|
||||
onError?.(new Error(result.error));
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error('上传失败');
|
||||
onError?.(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveFile = () => {
|
||||
setUploadedFile(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!project) return;
|
||||
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
const quotationData = {
|
||||
...values,
|
||||
quotation_date: values.quotation_date.format('YYYY-MM-DD'),
|
||||
file_url: uploadedFile?.url,
|
||||
version: nextVersion,
|
||||
};
|
||||
|
||||
const res = await axios.post(`/api/budget-projects/${project.id}/quotations`, quotationData);
|
||||
if (res.data.success) {
|
||||
message.success('新增报价版本成功');
|
||||
onSuccess();
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response?.data?.error) {
|
||||
message.error(error.response.data.error);
|
||||
} else {
|
||||
message.error('创建失败');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getFileIcon = () => (
|
||||
<div
|
||||
style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#fafafa',
|
||||
}}
|
||||
>
|
||||
<FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新增报价版本"
|
||||
open={visible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={onCancel}
|
||||
width={600}
|
||||
confirmLoading={loading}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
{/* 项目信息展示 */}
|
||||
<div style={{
|
||||
padding: 16,
|
||||
background: '#f5f5f5',
|
||||
borderRadius: 8,
|
||||
marginBottom: 24
|
||||
}}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span style={{ color: '#666' }}>项目名称: </span>
|
||||
<span style={{ fontWeight: 500 }}>{project?.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: '#666' }}>当前版本: </span>
|
||||
<span style={{ fontWeight: 500 }}>V{nextVersion - 1}</span>
|
||||
<span style={{ color: '#999', marginLeft: 8 }}>
|
||||
(新创建将为 V{nextVersion})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name="quotation_date"
|
||||
label="报价日期"
|
||||
rules={[{ required: true, message: '请选择报价日期' }]}
|
||||
>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="报价金额"
|
||||
rules={[{ required: true, message: '请输入报价金额' }]}
|
||||
>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
min={0}
|
||||
precision={2}
|
||||
placeholder="请输入报价金额"
|
||||
addonAfter="元"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="currency"
|
||||
label="币种"
|
||||
rules={[{ required: true, message: '请选择币种' }]}
|
||||
>
|
||||
<Select placeholder="请选择币种">
|
||||
{CURRENCIES.map((c) => (
|
||||
<Option key={c.value} value={c.value}>
|
||||
{c.label} ({c.symbol})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="报价文件">
|
||||
{uploadedFile ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
{getFileIcon()}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500 }}>{uploadedFile.name}</div>
|
||||
<a href={uploadedFile.url} target="_blank" rel="noopener noreferrer">
|
||||
查看文件
|
||||
</a>
|
||||
</div>
|
||||
<Button
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={handleRemoveFile}
|
||||
size="small"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Upload
|
||||
accept=".pdf,.doc,.docx,.xlsx,.xls,.jpg,.jpeg,.png"
|
||||
customRequest={handleUpload}
|
||||
showUploadList={false}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传文件</Button>
|
||||
</Upload>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="remark" label="备注">
|
||||
<Input.TextArea rows={3} placeholder="请输入备注信息" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuotationCreateModal;
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as BudgetProjectList } from './BudgetProjectList';
|
||||
export { default as BudgetProjectCreate } from './BudgetProjectCreate';
|
||||
export { default as QuotationCreateModal } from './QuotationCreateModal';
|
||||
@@ -0,0 +1,264 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Typography, Button, Space, Tag, Progress, Empty, Spin, message, Row, Col, Divider } from 'antd';
|
||||
import { FileTextOutlined, CameraOutlined, ScheduleOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
// 天气图标映射
|
||||
const WEATHER_ICONS: Record<string, string> = {
|
||||
sunny: '☀️ 晴',
|
||||
cloudy: '⛅ 多云',
|
||||
rainy: '🌧️ 雨',
|
||||
stormy: '⛈️ 雷暴',
|
||||
windy: '💨 大风',
|
||||
};
|
||||
|
||||
// 项目状态映射
|
||||
const STATUS_CONFIG: Record<string, { color: string; text: string }> = {
|
||||
pending: { color: 'default', text: '待开始' },
|
||||
active: { color: 'processing', text: '施工中' },
|
||||
completed: { color: 'success', text: '完工' },
|
||||
suspended: { color: 'warning', text: '暂停' },
|
||||
cancelled: { color: 'error', text: '已取消' },
|
||||
};
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
project_code: string;
|
||||
name: string;
|
||||
customer_name: string;
|
||||
status: string;
|
||||
start_date: string;
|
||||
expected_end_date: string;
|
||||
contract_amount: number;
|
||||
currency: string;
|
||||
manager_name: string;
|
||||
progress_percentage: number;
|
||||
latest_log?: {
|
||||
id: number;
|
||||
log_date: string;
|
||||
weather: string;
|
||||
work_content: string;
|
||||
};
|
||||
}
|
||||
|
||||
const ConstructionList: React.FC = () => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const fetchProjects = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/construction/my-projects');
|
||||
if (res.data.success) {
|
||||
setProjects(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目列表失败:', error);
|
||||
message.error('获取项目列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number, currency: string = 'CNY') => {
|
||||
const symbols: Record<string, string> = {
|
||||
CNY: '¥',
|
||||
USD: '$',
|
||||
LAK: '₭',
|
||||
THB: '฿',
|
||||
};
|
||||
const symbol = symbols[currency] || '¥';
|
||||
return `${symbol}${(amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 0 })}`;
|
||||
};
|
||||
|
||||
const isToday = (dateStr: string) => {
|
||||
return dayjs(dateStr).isSame(dayjs(), 'day');
|
||||
};
|
||||
|
||||
const renderProjectCard = (project: Project) => {
|
||||
const statusConfig = STATUS_CONFIG[project.status] || STATUS_CONFIG.pending;
|
||||
const hasTodayLog = project.latest_log && isToday(project.latest_log.log_date);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={project.id}
|
||||
style={{
|
||||
marginBottom: isMobile ? 12 : 16,
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? 16 : 20 } }}
|
||||
>
|
||||
{/* 项目头部 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
|
||||
<span style={{ fontSize: 20 }}>🎯</span>
|
||||
<Text strong style={{ fontSize: isMobile ? 15 : 16 }}>{project.name}</Text>
|
||||
</div>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
客户: {project.customer_name || '未指定'}
|
||||
</Text>
|
||||
</div>
|
||||
<Tag color={statusConfig.color} style={{ marginLeft: 8 }}>
|
||||
{statusConfig.text}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* 进度条 */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>施工进度</Text>
|
||||
<Text strong style={{ fontSize: 12 }}>{Math.round(project.progress_percentage)}%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.round(project.progress_percentage)}
|
||||
showInfo={false}
|
||||
strokeColor={{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}}
|
||||
trailColor="#f0f0f0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 最新日志状态 */}
|
||||
{project.status === 'active' && (
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
background: hasTodayLog ? '#f6ffed' : '#fff7e6',
|
||||
borderRadius: 8,
|
||||
marginBottom: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8
|
||||
}}>
|
||||
{hasTodayLog ? (
|
||||
<>
|
||||
<span>✅</span>
|
||||
<Text style={{ fontSize: 13 }}>
|
||||
今日日志: {project.latest_log?.work_content?.substring(0, 30)}...
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>⚠️</span>
|
||||
<Text type="warning" style={{ fontSize: 13 }}>今日日志: 未填写</Text>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Row gutter={[8, 8]}>
|
||||
<Col xs={24} sm={8}>
|
||||
<Button
|
||||
type={project.status === 'active' && !hasTodayLog ? 'primary' : 'default'}
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={() => navigate(`/construction/${project.id}/logs`)}
|
||||
block
|
||||
size={isMobile ? 'large' : 'middle'}
|
||||
style={{ borderRadius: 8 }}
|
||||
>
|
||||
{project.status === 'active' && !hasTodayLog ? '📝 写今日日志' : '📝 施工日志'}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Button
|
||||
icon={<CameraOutlined />}
|
||||
onClick={() => navigate(`/construction/${project.id}/logs`)}
|
||||
block
|
||||
size={isMobile ? 'large' : 'middle'}
|
||||
style={{ borderRadius: 8 }}
|
||||
>
|
||||
📷 上传照片
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Button
|
||||
icon={<ScheduleOutlined />}
|
||||
onClick={() => navigate(`/construction/${project.id}/milestones`)}
|
||||
block
|
||||
size={isMobile ? 'large' : 'middle'}
|
||||
style={{ borderRadius: 8 }}
|
||||
>
|
||||
📋 节点进度
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: isMobile ? 12 : 24,
|
||||
maxWidth: 800,
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* 页面标题 */}
|
||||
<div style={{ marginBottom: isMobile ? 16 : 24 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Title level={isMobile ? 4 : 3} style={{ marginBottom: 0 }}>施工管理</Title>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={fetchProjects}
|
||||
loading={loading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
<Paragraph type="secondary" style={{ marginTop: 8, marginBottom: 0 }}>
|
||||
查看和管理您的施工项目
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* 项目列表 */}
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: 60 }}>
|
||||
<Spin size="large" />
|
||||
<Paragraph type="secondary" style={{ marginTop: 16 }}>加载中...</Paragraph>
|
||||
</div>
|
||||
) : projects.length === 0 ? (
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Empty
|
||||
description="暂无施工项目"
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
>
|
||||
<Text type="secondary">请联系管理员为您分配施工项目</Text>
|
||||
</Empty>
|
||||
</Card>
|
||||
) : (
|
||||
<div>
|
||||
<Text type="secondary" style={{ marginBottom: 12, display: 'block' }}>
|
||||
我的施工项目 ({projects.length})
|
||||
</Text>
|
||||
{projects.map(project => renderProjectCard(project))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructionList;
|
||||
@@ -0,0 +1,442 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Card, Typography, Button, Space, Modal, Form, Input, DatePicker, Select,
|
||||
Upload, message, Spin, Empty, Image, Tag, Divider, Popconfirm, Row, Col
|
||||
} from 'antd';
|
||||
import {
|
||||
PlusOutlined, ArrowLeftOutlined, DeleteOutlined,
|
||||
CameraOutlined, CalendarOutlined, CloudOutlined
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
// 天气选项
|
||||
const WEATHER_OPTIONS = [
|
||||
{ value: 'sunny', label: '☀️ 晴', icon: '☀️' },
|
||||
{ value: 'cloudy', label: '⛅ 多云', icon: '⛅' },
|
||||
{ value: 'rainy', label: '🌧️ 雨', icon: '🌧️' },
|
||||
{ value: 'stormy', label: '⛈️ 雷暴', icon: '⛈️' },
|
||||
{ value: 'windy', label: '💨 大风', icon: '💨' },
|
||||
];
|
||||
|
||||
interface Log {
|
||||
id: number;
|
||||
log_date: string;
|
||||
weather: string;
|
||||
work_content: string;
|
||||
next_plan: string;
|
||||
issues: string;
|
||||
recorder_name: string;
|
||||
photos: Photo[];
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
photo_url: string;
|
||||
photo_name: string;
|
||||
photo_type: string;
|
||||
file_size: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const ConstructionLog: React.FC = () => {
|
||||
const { id: projectId } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [logs, setLogs] = useState<Log[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [projectInfo, setProjectInfo] = useState<any>(null);
|
||||
const [form] = Form.useForm();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
fetchLogs();
|
||||
fetchProjectInfo();
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
const fetchLogs = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/construction/projects/${projectId}/logs`);
|
||||
if (res.data.success) {
|
||||
setLogs(res.data.data.list);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取日志列表失败:', error);
|
||||
message.error('获取日志列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchProjectInfo = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/projects/${projectId}`);
|
||||
if (res.data.success) {
|
||||
setProjectInfo(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目信息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSubmitting(true);
|
||||
|
||||
const res = await axios.post(`/api/construction/projects/${projectId}/logs`, {
|
||||
log_date: values.log_date.format('YYYY-MM-DD'),
|
||||
weather: values.weather,
|
||||
work_content: values.work_content,
|
||||
next_plan: values.next_plan,
|
||||
issues: values.issues,
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
message.success('日志添加成功');
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
fetchLogs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加日志失败:', error);
|
||||
message.error('添加日志失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteLog = async (logId: number) => {
|
||||
try {
|
||||
const res = await axios.delete(`/api/construction/logs/${logId}`);
|
||||
if (res.data.success) {
|
||||
message.success('日志删除成功');
|
||||
fetchLogs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除日志失败:', error);
|
||||
message.error('删除日志失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 按日期分组
|
||||
const groupedLogs = logs.reduce((acc, log) => {
|
||||
const month = dayjs(log.log_date).format('YYYY年MM月');
|
||||
if (!acc[month]) {
|
||||
acc[month] = [];
|
||||
}
|
||||
acc[month].push(log);
|
||||
return acc;
|
||||
}, {} as Record<string, Log[]>);
|
||||
|
||||
const getWeatherLabel = (value: string) => {
|
||||
const option = WEATHER_OPTIONS.find(o => o.value === value);
|
||||
return option ? option.label : value;
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
};
|
||||
|
||||
const renderLogCard = (log: Log) => (
|
||||
<Card
|
||||
key={log.id}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? 16 : 20 } }}
|
||||
>
|
||||
{/* 日志头部 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Space>
|
||||
<CalendarOutlined style={{ color: '#1890ff' }} />
|
||||
<Text strong style={{ fontSize: 15 }}>{dayjs(log.log_date).format('MM月DD日')}</Text>
|
||||
<Tag color="blue">{getWeatherLabel(log.weather)}</Tag>
|
||||
</Space>
|
||||
<Space>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>记录人: {log.recorder_name || '未知'}</Text>
|
||||
<Popconfirm
|
||||
title="确定删除此日志？"
|
||||
description="删除后无法恢复"
|
||||
onConfirm={() => handleDeleteLog(log.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="text" danger size="small" icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 工作内容 */}
|
||||
{log.work_content && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>今日工作:</Text>
|
||||
<Paragraph style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap' }}>
|
||||
{log.work_content}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 明日计划 */}
|
||||
{log.next_plan && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>明日计划:</Text>
|
||||
<Paragraph style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap' }}>
|
||||
{log.next_plan}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 问题记录 */}
|
||||
{log.issues && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>问题记录:</Text>
|
||||
<Paragraph style={{ margin: '4px 0 0', color: '#fa8c16', whiteSpace: 'pre-wrap' }}>
|
||||
{log.issues}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 照片展示 */}
|
||||
{log.photos && log.photos.length > 0 && (
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Text type="secondary" style={{ fontSize: 12, marginBottom: 8, display: 'block' }}>
|
||||
施工照片 ({log.photos.length}张):
|
||||
</Text>
|
||||
<Image.PreviewGroup>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||||
{log.photos.map(photo => (
|
||||
<Image
|
||||
key={photo.id}
|
||||
src={photo.photo_url}
|
||||
width={isMobile ? 80 : 100}
|
||||
height={isMobile ? 80 : 100}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
objectFit: 'cover',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
placeholder={
|
||||
<div style={{
|
||||
width: isMobile ? 80 : 100,
|
||||
height: isMobile ? 80 : 100,
|
||||
background: '#f0f0f0',
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<CameraOutlined style={{ fontSize: 24, color: '#bfbfbf' }} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Image.PreviewGroup>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: isMobile ? 12 : 24,
|
||||
maxWidth: 800,
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* 页面头部 */}
|
||||
<div style={{ marginBottom: isMobile ? 16 : 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/construction')}
|
||||
/>
|
||||
<div>
|
||||
<Title level={isMobile ? 4 : 3} style={{ margin: 0 }}>
|
||||
施工日志
|
||||
</Title>
|
||||
{projectInfo && (
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
{projectInfo.name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 日志列表 */}
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: 60 }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : logs.length === 0 ? (
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Empty description="暂无施工日志">
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
|
||||
添加第一条日志
|
||||
</Button>
|
||||
</Empty>
|
||||
</Card>
|
||||
) : (
|
||||
<div>
|
||||
{Object.entries(groupedLogs).map(([month, monthLogs]) => (
|
||||
<div key={month}>
|
||||
<Divider orientation="left" style={{ margin: '16px 0' }}>
|
||||
<Text strong style={{ fontSize: 14 }}>{month}</Text>
|
||||
</Divider>
|
||||
{monthLogs.map(log => renderLogCard(log))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 底部添加按钮 */}
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: 24,
|
||||
right: 24,
|
||||
zIndex: 100
|
||||
}}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
size="large"
|
||||
onClick={() => setModalVisible(true)}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
height: 48,
|
||||
paddingLeft: 24,
|
||||
paddingRight: 24,
|
||||
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.4)'
|
||||
}}
|
||||
>
|
||||
新增日志
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 新增日志弹窗 */}
|
||||
<Modal
|
||||
title="新增施工日志"
|
||||
open={modalVisible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
confirmLoading={submitting}
|
||||
okText="提交"
|
||||
cancelText="取消"
|
||||
width={isMobile ? '95%' : 500}
|
||||
style={{ top: 20 }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
log_date: dayjs(),
|
||||
weather: 'sunny'
|
||||
}}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="log_date"
|
||||
label="日期"
|
||||
rules={[{ required: true, message: '请选择日期' }]}
|
||||
>
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
disabledDate={(current) => current && current > dayjs().endOf('day')}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="weather"
|
||||
label="天气"
|
||||
rules={[{ required: true, message: '请选择天气' }]}
|
||||
>
|
||||
<Select size="large">
|
||||
{WEATHER_OPTIONS.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="work_content"
|
||||
label="今日工作"
|
||||
rules={[{ required: true, message: '请填写今日工作内容' }]}
|
||||
>
|
||||
<TextArea
|
||||
rows={3}
|
||||
placeholder="描述今日完成的施工工作..."
|
||||
size="large"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="next_plan" label="明日计划">
|
||||
<TextArea
|
||||
rows={2}
|
||||
placeholder="明日工作计划..."
|
||||
size="large"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="issues" label="问题记录">
|
||||
<TextArea
|
||||
rows={2}
|
||||
placeholder="遇到的问题或需要协调的事项..."
|
||||
size="large"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="上传照片">
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
multiple
|
||||
maxCount={9}
|
||||
accept="image/*"
|
||||
beforeUpload={() => false}
|
||||
>
|
||||
<div>
|
||||
<CameraOutlined style={{ fontSize: 20 }} />
|
||||
<div style={{ marginTop: 4, fontSize: 12 }}>添加照片</div>
|
||||
</div>
|
||||
</Upload>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
支持上传多张照片，最多9张
|
||||
</Text>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructionLog;
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Card, Typography, Button, Space, Tag, Spin, Empty, Timeline, Progress, Divider
|
||||
} from 'antd';
|
||||
import {
|
||||
ArrowLeftOutlined, CheckCircleOutlined, ClockCircleOutlined,
|
||||
SyncOutlined, CloseCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
// 节点状态配置
|
||||
const STATUS_CONFIG: Record<string, {
|
||||
color: string;
|
||||
text: string;
|
||||
icon: React.ReactNode;
|
||||
timelineColor: string;
|
||||
}> = {
|
||||
pending: {
|
||||
color: 'default',
|
||||
text: '待开始',
|
||||
icon: <ClockCircleOutlined />,
|
||||
timelineColor: 'gray'
|
||||
},
|
||||
in_progress: {
|
||||
color: 'processing',
|
||||
text: '进行中',
|
||||
icon: <SyncOutlined spin />,
|
||||
timelineColor: 'blue'
|
||||
},
|
||||
completed: {
|
||||
color: 'success',
|
||||
text: '已完成',
|
||||
icon: <CheckCircleOutlined />,
|
||||
timelineColor: 'green'
|
||||
},
|
||||
cancelled: {
|
||||
color: 'error',
|
||||
text: '已取消',
|
||||
icon: <CloseCircleOutlined />,
|
||||
timelineColor: 'red'
|
||||
},
|
||||
};
|
||||
|
||||
interface Milestone {
|
||||
id: number;
|
||||
node_name: string;
|
||||
node_type: string;
|
||||
status: string;
|
||||
due_date: string;
|
||||
trigger_condition: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const ConstructionMilestones: React.FC = () => {
|
||||
const { id: projectId } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [milestones, setMilestones] = useState<Milestone[]>([]);
|
||||
const [projectInfo, setProjectInfo] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
fetchMilestones();
|
||||
fetchProjectInfo();
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
const fetchMilestones = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/construction/projects/${projectId}/milestones`);
|
||||
if (res.data.success) {
|
||||
setMilestones(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取节点列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchProjectInfo = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/projects/${projectId}`);
|
||||
if (res.data.success) {
|
||||
setProjectInfo(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目信息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 计算进度
|
||||
const completedCount = milestones.filter(m => m.status === 'completed').length;
|
||||
const totalCount = milestones.length;
|
||||
const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
|
||||
|
||||
const renderTimelineItem = (milestone: Milestone, index: number) => {
|
||||
const statusConfig = STATUS_CONFIG[milestone.status] || STATUS_CONFIG.pending;
|
||||
|
||||
return (
|
||||
<Timeline.Item
|
||||
key={milestone.id}
|
||||
color={statusConfig.timelineColor}
|
||||
dot={
|
||||
<span style={{ fontSize: 16 }}>
|
||||
{statusConfig.icon}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
marginBottom: 8,
|
||||
borderRadius: 8,
|
||||
background: milestone.status === 'completed' ? '#f6ffed' : '#fff',
|
||||
}}
|
||||
styles={{ body: { padding: 12 } }}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: 14 }}>{milestone.node_name}</Text>
|
||||
{milestone.trigger_condition && (
|
||||
<Paragraph
|
||||
type="secondary"
|
||||
style={{ margin: '4px 0 0', fontSize: 12 }}
|
||||
>
|
||||
{milestone.trigger_condition}
|
||||
</Paragraph>
|
||||
)}
|
||||
</div>
|
||||
<Tag color={statusConfig.color} icon={statusConfig.icon}>
|
||||
{statusConfig.text}
|
||||
</Tag>
|
||||
</div>
|
||||
{milestone.due_date && (
|
||||
<Text type="secondary" style={{ fontSize: 12, marginTop: 4, display: 'block' }}>
|
||||
计划完成: {dayjs(milestone.due_date).format('YYYY-MM-DD')}
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
</Timeline.Item>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: isMobile ? 12 : 24,
|
||||
maxWidth: 800,
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* 页面头部 */}
|
||||
<div style={{ marginBottom: isMobile ? 16 : 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/construction')}
|
||||
/>
|
||||
<div>
|
||||
<Title level={isMobile ? 4 : 3} style={{ margin: 0 }}>
|
||||
节点进度
|
||||
</Title>
|
||||
{projectInfo && (
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
{projectInfo.name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 进度概览 */}
|
||||
{!loading && milestones.length > 0 && (
|
||||
<Card style={{ marginBottom: 16, borderRadius: 12 }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 16 }}>
|
||||
<Text type="secondary">整体进度</Text>
|
||||
<Title level={2} style={{ margin: '8px 0 0' }}>{progressPercent}%</Title>
|
||||
</div>
|
||||
<Progress
|
||||
percent={progressPercent}
|
||||
strokeColor={{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 16 }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Text strong style={{ fontSize: 20 }}>{completedCount}</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>已完成</Text>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Text strong style={{ fontSize: 20 }}>{totalCount - completedCount}</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>进行中</Text>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Text strong style={{ fontSize: 20 }}>{totalCount}</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>总节点</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 节点时间线 */}
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: 60 }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : milestones.length === 0 ? (
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Empty description="暂无施工节点">
|
||||
<Text type="secondary">节点由项目经理在项目设置中配置</Text>
|
||||
</Empty>
|
||||
</Card>
|
||||
) : (
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Timeline style={{ marginTop: 16 }}>
|
||||
{milestones.map((milestone, index) => renderTimelineItem(milestone, index))}
|
||||
</Timeline>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructionMilestones;
|
||||
@@ -0,0 +1,11 @@
|
||||
// 页面导出
|
||||
export { default as AdvanceList } from './AdvanceList'
|
||||
export { default as ReimbursementList } from './ReimbursementList'
|
||||
export { default as ExchangeRateList } from './ExchangeRateList'
|
||||
export { default as ProjectsPage } from './projects/ProjectsPage'
|
||||
export { default as ProjectDetail } from './projects/ProjectDetail'
|
||||
|
||||
// 施工管理页面
|
||||
export { default as ConstructionList } from './construction/ConstructionList'
|
||||
export { default as ConstructionLog } from './construction/ConstructionLog'
|
||||
export { default as ConstructionMilestones } from './construction/ConstructionMilestones'
|
||||
@@ -0,0 +1,883 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Card, Tabs, Typography, Button, Space, Table, Tag, Spin, Descriptions, message,
|
||||
Row, Col, Divider, Modal, Form, Input, InputNumber, DatePicker, Select, Upload,
|
||||
Image, Empty, Statistic, Progress, Popconfirm
|
||||
} from 'antd';
|
||||
import {
|
||||
ArrowLeftOutlined, PlusOutlined, EditOutlined, UploadOutlined, DeleteOutlined,
|
||||
FileOutlined, PictureOutlined, CloudOutlined, SunOutlined, CloudFilled
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const CURRENCIES = [
|
||||
{ value: 'CNY', label: '人民币', symbol: '¥' },
|
||||
{ value: 'USD', label: '美元', symbol: '$' },
|
||||
{ value: 'LAK', label: '老挝基普', symbol: '₭' },
|
||||
{ value: 'THB', label: '泰铢', symbol: '฿' },
|
||||
];
|
||||
|
||||
// 材料管理接口
|
||||
interface Material {
|
||||
id: number;
|
||||
product_name: string;
|
||||
unit: string;
|
||||
budget_quantity: number;
|
||||
purchase_quantity: number;
|
||||
used_quantity: number;
|
||||
avg_price: number;
|
||||
total_price: number;
|
||||
}
|
||||
|
||||
// 施工节点接口
|
||||
interface Milestone {
|
||||
id: number;
|
||||
node_name: string;
|
||||
percentage: number;
|
||||
node_amount: number;
|
||||
trigger_condition: string;
|
||||
status: 'pending' | 'in_progress' | 'completed';
|
||||
completed_date?: string;
|
||||
voucher_url?: string;
|
||||
}
|
||||
|
||||
// 施工日志接口
|
||||
interface ConstructionLog {
|
||||
id: number;
|
||||
log_date: string;
|
||||
weather: string;
|
||||
recorder_name: string;
|
||||
work_content: string;
|
||||
photos: string[];
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// 工作项接口
|
||||
interface WorkItem {
|
||||
id: number;
|
||||
item_name: string;
|
||||
unit: string;
|
||||
quantity: number;
|
||||
unit_price: number;
|
||||
total_price: number;
|
||||
}
|
||||
|
||||
// 项目详情接口
|
||||
interface ProjectDetail {
|
||||
id: number;
|
||||
project_code: string;
|
||||
name: string;
|
||||
customer_id: number;
|
||||
customer_name: string;
|
||||
project_manager_id: number;
|
||||
manager_name: string;
|
||||
status: string;
|
||||
settlement_type: 'total' | 'unit';
|
||||
currency: string;
|
||||
contract_amount: number;
|
||||
work_quantity: string;
|
||||
project_situation: string;
|
||||
customer_requirements: string;
|
||||
start_date: string;
|
||||
expected_end_date: string;
|
||||
contract_days: number;
|
||||
contract_file: string;
|
||||
attachments: { name: string; url: string }[];
|
||||
payment_nodes: Milestone[];
|
||||
unit_price_list: WorkItem[];
|
||||
warranty_rate: number;
|
||||
warranty_amount: number;
|
||||
warranty_status: string;
|
||||
// 财务汇总
|
||||
total_income: number;
|
||||
total_expense: number;
|
||||
profit: number;
|
||||
}
|
||||
|
||||
const ProjectDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user: currentUser } = useAuthStore();
|
||||
const isAdmin = currentUser?.role === 'admin';
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [project, setProject] = useState<ProjectDetail | null>(null);
|
||||
const [materials, setMaterials] = useState<Material[]>([]);
|
||||
const [milestones, setMilestones] = useState<Milestone[]>([]);
|
||||
const [constructionLogs, setConstructionLogs] = useState<ConstructionLog[]>([]);
|
||||
const [workItems, setWorkItems] = useState<WorkItem[]>([]);
|
||||
|
||||
// Modal 状态
|
||||
const [logModalVisible, setLogModalVisible] = useState(false);
|
||||
const [voucherModalVisible, setVoucherModalVisible] = useState(false);
|
||||
const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null);
|
||||
const [logForm] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchProjectData();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const fetchProjectData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 并行获取所有数据
|
||||
const [projectRes, materialsRes, logsRes, milestonesRes, workItemsRes] = await Promise.all([
|
||||
axios.get(`/api/projects/${id}`),
|
||||
axios.get(`/api/projects/${id}/materials`).catch(() => ({ data: { success: false, data: [] } })),
|
||||
axios.get(`/api/projects/${id}/construction-logs`).catch(() => ({ data: { success: false, data: [] } })),
|
||||
axios.get(`/api/projects/${id}/milestones`).catch(() => ({ data: { success: false, data: [] } })),
|
||||
axios.get(`/api/projects/${id}/work-items`).catch(() => ({ data: { success: false, data: [] } })),
|
||||
]);
|
||||
|
||||
if (projectRes.data.success) {
|
||||
setProject(projectRes.data.data);
|
||||
// 如果项目包含付款节点，使用项目数据
|
||||
if (projectRes.data.data.payment_nodes) {
|
||||
setMilestones(projectRes.data.data.payment_nodes);
|
||||
}
|
||||
if (projectRes.data.data.unit_price_list) {
|
||||
setWorkItems(projectRes.data.data.unit_price_list);
|
||||
}
|
||||
}
|
||||
|
||||
if (materialsRes.data.success) {
|
||||
setMaterials(materialsRes.data.data);
|
||||
}
|
||||
|
||||
if (logsRes.data.success) {
|
||||
setConstructionLogs(logsRes.data.data);
|
||||
}
|
||||
|
||||
if (milestonesRes.data.success && milestonesRes.data.data.length > 0) {
|
||||
setMilestones(milestonesRes.data.data);
|
||||
}
|
||||
|
||||
if (workItemsRes.data.success && workItemsRes.data.data.length > 0) {
|
||||
setWorkItems(workItemsRes.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目数据失败:', error);
|
||||
message.error('获取项目数据失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatAmount = (val: number, curr: string = 'CNY') => {
|
||||
const c = CURRENCIES.find(item => item.value === curr);
|
||||
const symbol = c?.symbol || '¥';
|
||||
return symbol + ' ' + (val || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2 });
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
planning: { color: 'default', text: '规划中' },
|
||||
active: { color: 'processing', text: '进行中' },
|
||||
completed: { color: 'success', text: '已完成' },
|
||||
suspended: { color: 'warning', text: '已暂停' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const getMilestoneStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
pending: { color: 'default', text: '待开始' },
|
||||
in_progress: { color: 'processing', text: '进行中' },
|
||||
completed: { color: 'success', text: '已完成' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const getWeatherIcon = (weather: string) => {
|
||||
const weatherMap: Record<string, React.ReactNode> = {
|
||||
'晴': <SunOutlined style={{ color: '#faad14' }} />,
|
||||
'多云': <CloudOutlined style={{ color: '#1890ff' }} />,
|
||||
'阴': <CloudFilled style={{ color: '#8c8c8c' }} />,
|
||||
'雨': <CloudFilled style={{ color: '#52c41a' }} />,
|
||||
};
|
||||
return weatherMap[weather] || <CloudOutlined />;
|
||||
};
|
||||
|
||||
// 上传凭证
|
||||
const handleUploadVoucher = async (file: File) => {
|
||||
if (!selectedMilestone) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const res = await axios.post('/api/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
// 更新节点凭证
|
||||
await axios.put(`/api/projects/${id}/milestones/${selectedMilestone.id}`, {
|
||||
voucher_url: res.data.data.url,
|
||||
status: 'completed',
|
||||
completed_date: dayjs().format('YYYY-MM-DD')
|
||||
});
|
||||
message.success('凭证上传成功');
|
||||
setVoucherModalVisible(false);
|
||||
fetchProjectData();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 提交施工日志
|
||||
const handleSubmitLog = async () => {
|
||||
try {
|
||||
const values = await logForm.validateFields();
|
||||
const logData = {
|
||||
...values,
|
||||
log_date: values.log_date.format('YYYY-MM-DD'),
|
||||
project_id: id,
|
||||
};
|
||||
|
||||
const res = await axios.post(`/api/projects/${id}/construction-logs`, logData);
|
||||
if (res.data.success) {
|
||||
message.success('日志添加成功');
|
||||
setLogModalVisible(false);
|
||||
logForm.resetFields();
|
||||
fetchProjectData();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('添加失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 删除施工日志
|
||||
const handleDeleteLog = async (logId: number) => {
|
||||
try {
|
||||
const res = await axios.delete(`/api/projects/${id}/construction-logs/${logId}`);
|
||||
if (res.data.success) {
|
||||
message.success('删除成功');
|
||||
fetchProjectData();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 材料管理表格列
|
||||
const materialColumns = [
|
||||
{ title: '商品名称', dataIndex: 'product_name', key: 'product_name' },
|
||||
{ title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
|
||||
{
|
||||
title: '预算量',
|
||||
dataIndex: 'budget_quantity',
|
||||
key: 'budget_quantity',
|
||||
render: (v: number) => v?.toLocaleString() || '-'
|
||||
},
|
||||
{
|
||||
title: '采购量',
|
||||
dataIndex: 'purchase_quantity',
|
||||
key: 'purchase_quantity',
|
||||
render: (v: number) => v?.toLocaleString() || '-'
|
||||
},
|
||||
{
|
||||
title: '使用量',
|
||||
dataIndex: 'used_quantity',
|
||||
key: 'used_quantity',
|
||||
render: (v: number) => v?.toLocaleString() || '-'
|
||||
},
|
||||
{
|
||||
title: '均价',
|
||||
dataIndex: 'avg_price',
|
||||
key: 'avg_price',
|
||||
render: (v: number, r: Material) => formatAmount(v, project?.currency)
|
||||
},
|
||||
{
|
||||
title: '总价',
|
||||
dataIndex: 'total_price',
|
||||
key: 'total_price',
|
||||
render: (v: number, r: Material) => <Text strong>{formatAmount(v, project?.currency)}</Text>
|
||||
},
|
||||
];
|
||||
|
||||
// 施工节点表格列
|
||||
const milestoneColumns = [
|
||||
{ title: '节点名称', dataIndex: 'node_name', key: 'node_name' },
|
||||
{
|
||||
title: '比例',
|
||||
dataIndex: 'percentage',
|
||||
key: 'percentage',
|
||||
render: (v: number) => `${v}%`
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'node_amount',
|
||||
key: 'node_amount',
|
||||
render: (v: number) => formatAmount(v, project?.currency)
|
||||
},
|
||||
{ title: '触发条件', dataIndex: 'trigger_condition', key: 'trigger_condition', ellipsis: true },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status: string) => getMilestoneStatusTag(status)
|
||||
},
|
||||
{
|
||||
title: '完成日期',
|
||||
dataIndex: 'completed_date',
|
||||
key: 'completed_date',
|
||||
render: (v: string) => v || '-'
|
||||
},
|
||||
{
|
||||
title: '凭证',
|
||||
dataIndex: 'voucher_url',
|
||||
key: 'voucher_url',
|
||||
render: (url: string, record: Milestone) => (
|
||||
<Space>
|
||||
{url ? (
|
||||
<Button size="small" type="link" href={url} target="_blank">查看凭证</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="small"
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
setSelectedMilestone(record);
|
||||
setVoucherModalVisible(true);
|
||||
}}
|
||||
>
|
||||
上传凭证
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
// 施工日志表格列
|
||||
const logColumns = [
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'log_date',
|
||||
key: 'log_date',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '天气',
|
||||
dataIndex: 'weather',
|
||||
key: 'weather',
|
||||
width: 80,
|
||||
render: (v: string) => (
|
||||
<Space>
|
||||
{getWeatherIcon(v)}
|
||||
<span>{v}</span>
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
{ title: '记录人', dataIndex: 'recorder_name', key: 'recorder_name', width: 100 },
|
||||
{
|
||||
title: '工作内容',
|
||||
dataIndex: 'work_content',
|
||||
key: 'work_content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '照片',
|
||||
dataIndex: 'photos',
|
||||
key: 'photos',
|
||||
width: 100,
|
||||
render: (photos: string[]) => (
|
||||
photos && photos.length > 0 ? (
|
||||
<Image.PreviewGroup>
|
||||
{photos.slice(0, 3).map((url, idx) => (
|
||||
<Image
|
||||
key={idx}
|
||||
src={url}
|
||||
width={30}
|
||||
height={30}
|
||||
style={{ objectFit: 'cover', marginRight: 4, borderRadius: 4 }}
|
||||
/>
|
||||
))}
|
||||
{photos.length > 3 && <Text type="secondary">+{photos.length - 3}</Text>}
|
||||
</Image.PreviewGroup>
|
||||
) : '-'
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: (_: any, record: ConstructionLog) => (
|
||||
isAdmin && (
|
||||
<Popconfirm title="确定删除此日志吗？" onConfirm={() => handleDeleteLog(record.id)}>
|
||||
<Button size="small" danger icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
)
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// 单价明细表格列
|
||||
const workItemColumns = [
|
||||
{ title: '项目内容', dataIndex: 'item_name', key: 'item_name' },
|
||||
{ title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'unit_price',
|
||||
key: 'unit_price',
|
||||
render: (v: number) => formatAmount(v, project?.currency)
|
||||
},
|
||||
{
|
||||
title: '暂定工程量',
|
||||
dataIndex: 'quantity',
|
||||
key: 'quantity',
|
||||
render: (v: number) => v?.toLocaleString() || '-'
|
||||
},
|
||||
{
|
||||
title: '暂定总价',
|
||||
dataIndex: 'total_price',
|
||||
key: 'total_price',
|
||||
render: (v: number) => <Text strong>{formatAmount(v, project?.currency)}</Text>
|
||||
},
|
||||
];
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 400 }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div style={{ padding: 24 }}>
|
||||
<Empty description="项目不存在" />
|
||||
<Button type="primary" onClick={() => navigate('/projects')}>返回项目列表</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 计算财务汇总
|
||||
const totalWorkItemPrice = workItems.reduce((sum, item) => sum + (item.total_price || 0), 0);
|
||||
const completedMilestoneAmount = milestones
|
||||
.filter(m => m.status === 'completed')
|
||||
.reduce((sum, m) => sum + (m.node_amount || 0), 0);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24 }}>
|
||||
{/* 页面头部 */}
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/projects')}>返回</Button>
|
||||
</Space>
|
||||
<Title level={2} style={{ marginBottom: 8 }}>{project.name}</Title>
|
||||
<Space>
|
||||
<Text type="secondary">项目编号: {project.project_code}</Text>
|
||||
<Divider type="vertical" />
|
||||
<Text type="secondary">客户: {project.customer_name}</Text>
|
||||
<Divider type="vertical" />
|
||||
<Text type="secondary">项目经理: {project.manager_name}</Text>
|
||||
<Divider type="vertical" />
|
||||
{getStatusTag(project.status)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* Tab 内容 */}
|
||||
<Tabs defaultActiveKey="basic" type="card" size="large">
|
||||
{/* 基本信息 Tab */}
|
||||
<TabPane tab="基本信息" key="basic">
|
||||
<Card>
|
||||
<Descriptions bordered column={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Descriptions.Item label="项目名称">{project.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="项目编号">{project.project_code}</Descriptions.Item>
|
||||
<Descriptions.Item label="客户名称">{project.customer_name}</Descriptions.Item>
|
||||
<Descriptions.Item label="项目经理">{project.manager_name}</Descriptions.Item>
|
||||
<Descriptions.Item label="项目状态">{getStatusTag(project.status)}</Descriptions.Item>
|
||||
<Descriptions.Item label="结算方式">
|
||||
{project.settlement_type === 'total' ? '总价包干' : '单价结算'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="币种">
|
||||
{CURRENCIES.find(c => c.value === project.currency)?.label || project.currency}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="合同金额">
|
||||
<Text strong>{formatAmount(project.contract_amount, project.currency)}</Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="工程量">{project.work_quantity || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="开始日期">{project.start_date || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="预计结束日期">{project.expected_end_date || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="合同工期">{project.contract_days ? `${project.contract_days}天` : '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<Divider orientation="left">项目情况</Divider>
|
||||
<Paragraph>{project.project_situation || '暂无项目情况描述'}</Paragraph>
|
||||
|
||||
<Divider orientation="left">客户要求</Divider>
|
||||
<Paragraph>{project.customer_requirements || '暂无客户要求'}</Paragraph>
|
||||
|
||||
<Divider orientation="left">附件文件</Divider>
|
||||
{project.attachments && project.attachments.length > 0 ? (
|
||||
<div>
|
||||
{project.attachments.map((file, idx) => (
|
||||
<div key={idx} style={{ marginBottom: 8 }}>
|
||||
<FileOutlined style={{ marginRight: 8 }} />
|
||||
<a href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Text type="secondary">暂无附件</Text>
|
||||
)}
|
||||
|
||||
{project.contract_file && (
|
||||
<>
|
||||
<Divider orientation="left">合同文件</Divider>
|
||||
<a href={project.contract_file} target="_blank" rel="noopener noreferrer">
|
||||
<FileOutlined style={{ marginRight: 8 }} />查看合同文件
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 合同详情 Tab */}
|
||||
<TabPane tab="合同详情" key="contract">
|
||||
<Card>
|
||||
<Descriptions bordered column={2} style={{ marginBottom: 24 }}>
|
||||
<Descriptions.Item label="结算方式">
|
||||
{project.settlement_type === 'total' ? '总价包干' : '单价结算'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="合同金额">
|
||||
<Text strong>{formatAmount(project.contract_amount, project.currency)}</Text>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
{project.settlement_type === 'unit' && workItems.length > 0 && (
|
||||
<>
|
||||
<Divider orientation="left">单价明细</Divider>
|
||||
<Table
|
||||
dataSource={workItems}
|
||||
columns={workItemColumns}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
summary={() => (
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4}>
|
||||
<Text strong>合计</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>
|
||||
<Text strong style={{ color: '#1890ff' }}>
|
||||
{formatAmount(totalWorkItemPrice, project.currency)}
|
||||
</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider orientation="left">质保金设置</Divider>
|
||||
<Descriptions bordered column={2}>
|
||||
<Descriptions.Item label="质保金比例">
|
||||
{project.warranty_rate ? `${project.warranty_rate}%` : '未设置'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="质保金金额">
|
||||
{project.warranty_amount ? formatAmount(project.warranty_amount, project.currency) : '未设置'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="质保金状态">
|
||||
{project.warranty_status === 'pending' ? '待收取' :
|
||||
project.warranty_status === 'collected' ? '已收取' :
|
||||
project.warranty_status === 'returned' ? '已退还' : '未设置'}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 分包管理 Tab */}
|
||||
<TabPane tab="分包管理" key="subcontract">
|
||||
<Card>
|
||||
<Empty description="分包管理功能开发中" />
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 材料管理 Tab - 新增 */}
|
||||
<TabPane tab="材料管理" key="materials">
|
||||
<Card
|
||||
title="材料使用情况"
|
||||
extra={
|
||||
<Space>
|
||||
<Statistic
|
||||
title="材料总成本"
|
||||
value={materials.reduce((sum, m) => sum + (m.total_price || 0), 0)}
|
||||
precision={2}
|
||||
prefix={CURRENCIES.find(c => c.value === project.currency)?.symbol}
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{materials.length > 0 ? (
|
||||
<Table
|
||||
dataSource={materials}
|
||||
columns={materialColumns}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
) : (
|
||||
<Empty description="暂无材料数据" />
|
||||
)}
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 施工节点 Tab - 新增 */}
|
||||
<TabPane tab="施工节点" key="milestones">
|
||||
<Card
|
||||
title="合同付款节点进度"
|
||||
extra={
|
||||
<Space>
|
||||
<Progress
|
||||
percent={Math.round(
|
||||
milestones.filter(m => m.status === 'completed').length /
|
||||
(milestones.length || 1) * 100
|
||||
)}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
<Text type="secondary">
|
||||
已完成: {formatAmount(completedMilestoneAmount, project.currency)} /
|
||||
{formatAmount(project.contract_amount, project.currency)}
|
||||
</Text>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{milestones.length > 0 ? (
|
||||
<Table
|
||||
dataSource={milestones}
|
||||
columns={milestoneColumns}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
/>
|
||||
) : (
|
||||
<Empty description="暂无施工节点数据" />
|
||||
)}
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 施工日志 Tab - 新增 */}
|
||||
<TabPane tab="施工日志" key="logs">
|
||||
<Card
|
||||
title="施工日志列表"
|
||||
extra={
|
||||
isAdmin && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setLogModalVisible(true)}
|
||||
>
|
||||
新增日志
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
{constructionLogs.length > 0 ? (
|
||||
<Table
|
||||
dataSource={constructionLogs}
|
||||
columns={logColumns}
|
||||
rowKey="id"
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
) : (
|
||||
<Empty description="暂无施工日志" />
|
||||
)}
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 财务信息 Tab */}
|
||||
<TabPane tab="财务信息" key="finance">
|
||||
<Card>
|
||||
{/* 财务汇总 */}
|
||||
<Row gutter={24} style={{ marginBottom: 24 }}>
|
||||
<Col span={8}>
|
||||
<Statistic
|
||||
title="总收入"
|
||||
value={project.total_income || 0}
|
||||
precision={2}
|
||||
prefix={CURRENCIES.find(c => c.value === project.currency)?.symbol}
|
||||
valueStyle={{ color: '#3f8600' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Statistic
|
||||
title="总支出"
|
||||
value={project.total_expense || 0}
|
||||
precision={2}
|
||||
prefix={CURRENCIES.find(c => c.value === project.currency)?.symbol}
|
||||
valueStyle={{ color: '#cf1322' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Statistic
|
||||
title="利润"
|
||||
value={project.profit || 0}
|
||||
precision={2}
|
||||
prefix={CURRENCIES.find(c => c.value === project.currency)?.symbol}
|
||||
valueStyle={{ color: (project.profit || 0) >= 0 ? '#3f8600' : '#cf1322' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">总价包干 vs 单价结算对比</Divider>
|
||||
<Table
|
||||
dataSource={[
|
||||
{
|
||||
key: 'compare',
|
||||
type: '总价包干',
|
||||
contract_amount: project.contract_amount,
|
||||
actual_amount: project.settlement_type === 'total' ? project.contract_amount : totalWorkItemPrice,
|
||||
difference: project.settlement_type === 'total'
|
||||
? 0
|
||||
: totalWorkItemPrice - project.contract_amount
|
||||
}
|
||||
]}
|
||||
columns={[
|
||||
{ title: '结算类型', dataIndex: 'type', key: 'type' },
|
||||
{
|
||||
title: '合同金额',
|
||||
dataIndex: 'contract_amount',
|
||||
key: 'contract_amount',
|
||||
render: (v: number) => formatAmount(v, project.currency)
|
||||
},
|
||||
{
|
||||
title: '实际金额',
|
||||
dataIndex: 'actual_amount',
|
||||
key: 'actual_amount',
|
||||
render: (v: number) => formatAmount(v, project.currency)
|
||||
},
|
||||
{
|
||||
title: '差额',
|
||||
dataIndex: 'difference',
|
||||
key: 'difference',
|
||||
render: (v: number) => (
|
||||
<Text style={{ color: v >= 0 ? '#3f8600' : '#cf1322' }}>
|
||||
{v >= 0 ? '+' : ''}{formatAmount(v, project.currency)}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
]}
|
||||
pagination={false}
|
||||
/>
|
||||
|
||||
<Divider orientation="left">收款/支出明细</Divider>
|
||||
<Empty description="财务明细功能开发中" />
|
||||
</Card>
|
||||
</TabPane>
|
||||
|
||||
{/* 质保金 Tab */}
|
||||
<TabPane tab="质保金" key="warranty">
|
||||
<Card>
|
||||
<Descriptions bordered column={2}>
|
||||
<Descriptions.Item label="质保金比例">
|
||||
{project.warranty_rate ? `${project.warranty_rate}%` : '未设置'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="质保金金额">
|
||||
{project.warranty_amount ? formatAmount(project.warranty_amount, project.currency) : '未设置'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="质保金状态">
|
||||
{project.warranty_status === 'pending' ? '待收取' :
|
||||
project.warranty_status === 'collected' ? '已收取' :
|
||||
project.warranty_status === 'returned' ? '已退还' : '未设置'}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Divider />
|
||||
<Empty description="质保金管理功能开发中" />
|
||||
</Card>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
{/* 新增施工日志弹窗 */}
|
||||
<Modal
|
||||
title="新增施工日志"
|
||||
open={logModalVisible}
|
||||
onOk={handleSubmitLog}
|
||||
onCancel={() => {
|
||||
setLogModalVisible(false);
|
||||
logForm.resetFields();
|
||||
}}
|
||||
okText="提交"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form form={logForm} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="log_date" label="日期" rules={[{ required: true }]}>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="weather" label="天气" rules={[{ required: true }]}>
|
||||
<Select placeholder="选择天气">
|
||||
<Option value="晴">晴</Option>
|
||||
<Option value="多云">多云</Option>
|
||||
<Option value="阴">阴</Option>
|
||||
<Option value="雨">雨</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item name="recorder_name" label="记录人" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入记录人姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="work_content" label="工作内容" rules={[{ required: true }]}>
|
||||
<TextArea rows={4} placeholder="请输入当日工作内容" />
|
||||
</Form.Item>
|
||||
<Form.Item name="photos" label="照片">
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
accept="image/*"
|
||||
action="/api/upload"
|
||||
multiple
|
||||
>
|
||||
<div>
|
||||
<PictureOutlined />
|
||||
<div style={{ marginTop: 8 }}>上传照片</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 上传凭证弹窗 */}
|
||||
<Modal
|
||||
title="上传节点凭证"
|
||||
open={voucherModalVisible}
|
||||
onCancel={() => setVoucherModalVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: 24 }}>
|
||||
<Upload.Dragger
|
||||
accept="image/*,.pdf"
|
||||
beforeUpload={(file) => {
|
||||
handleUploadVoucher(file);
|
||||
return false;
|
||||
}}
|
||||
showUploadList={false}
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<UploadOutlined style={{ fontSize: 48, color: '#1890ff' }} />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持图片或PDF文件</p>
|
||||
</Upload.Dragger>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetail;
|
||||
@@ -0,0 +1,560 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Typography, Button, Space, Table, Tag, Modal, Form, Input, InputNumber, DatePicker, Select, message, Radio, Upload, Row, Col, Divider, Popconfirm } from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined, UploadOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const CURRENCIES = [
|
||||
{ value: 'CNY', label: '人民币', symbol: '¥' },
|
||||
{ value: 'USD', label: '美元', symbol: '$' },
|
||||
{ value: 'LAK', label: '老挝基普', symbol: '₭' },
|
||||
{ value: 'THB', label: '泰铢', symbol: '฿' },
|
||||
];
|
||||
|
||||
interface PaymentNode {
|
||||
id?: number;
|
||||
node_name: string;
|
||||
percentage: number;
|
||||
node_amount: number;
|
||||
trigger_condition: string;
|
||||
}
|
||||
|
||||
interface UnitPriceItem {
|
||||
id?: number;
|
||||
item_name: string;
|
||||
unit: string;
|
||||
quantity: number;
|
||||
unit_price: number;
|
||||
total_price: number;
|
||||
}
|
||||
|
||||
const ProjectsPage: React.FC = () => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [customers, setCustomers] = useState([]);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingProject, setEditingProject] = useState<any>(null);
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 当前用户信息 - 使用zustand authStore
|
||||
const { user: currentUser } = useAuthStore();
|
||||
const isAdmin = currentUser?.role === 'admin';
|
||||
|
||||
// 表单监听值
|
||||
const settlementType = Form.useWatch('settlement_type', form);
|
||||
const contractAmount = Form.useWatch('contract_amount', form);
|
||||
const currency = Form.useWatch('currency', form);
|
||||
const contractDays = Form.useWatch('contract_days', form);
|
||||
const startDate = Form.useWatch('start_date', form);
|
||||
|
||||
// 付款节点和单价列表
|
||||
const [paymentNodes, setPaymentNodes] = useState<PaymentNode[]>([]);
|
||||
const [unitPriceList, setUnitPriceList] = useState<UnitPriceItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
fetchCustomers();
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
// 自动计算结束日期
|
||||
useEffect(() => {
|
||||
if (startDate && contractDays) {
|
||||
const endDate = startDate.add(contractDays, 'day');
|
||||
form.setFieldsValue({ expected_end_date: endDate });
|
||||
}
|
||||
}, [startDate, contractDays, form]);
|
||||
|
||||
const fetchProjects = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get('/api/projects');
|
||||
if (res.data.success) setProjects(res.data.data);
|
||||
} catch (error) {
|
||||
console.error('获取项目失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCustomers = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/customers');
|
||||
if (res.data.success) setCustomers(res.data.data);
|
||||
} catch (error) {
|
||||
console.error('获取客户列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/users');
|
||||
if (res.data.success) setUsers(res.data.data);
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加付款节点
|
||||
const addPaymentNode = () => {
|
||||
setPaymentNodes([...paymentNodes, {
|
||||
node_name: '',
|
||||
percentage: 0,
|
||||
node_amount: 0,
|
||||
trigger_condition: ''
|
||||
}]);
|
||||
};
|
||||
|
||||
// 删除付款节点
|
||||
const removePaymentNode = (index: number) => {
|
||||
const newNodes = paymentNodes.filter((_, i) => i !== index);
|
||||
setPaymentNodes(newNodes);
|
||||
};
|
||||
|
||||
// 更新付款节点
|
||||
const updatePaymentNode = (index: number, field: string, value: any) => {
|
||||
const newNodes = [...paymentNodes];
|
||||
newNodes[index] = { ...newNodes[index], [field]: value };
|
||||
if (field === 'percentage' && contractAmount) {
|
||||
newNodes[index].node_amount = contractAmount * value / 100;
|
||||
}
|
||||
setPaymentNodes(newNodes);
|
||||
};
|
||||
|
||||
// 添加单价项
|
||||
const addUnitPriceItem = () => {
|
||||
setUnitPriceList([...unitPriceList, {
|
||||
item_name: '',
|
||||
unit: '',
|
||||
quantity: 0,
|
||||
unit_price: 0,
|
||||
total_price: 0
|
||||
}]);
|
||||
};
|
||||
|
||||
// 删除单价项
|
||||
const removeUnitPriceItem = (index: number) => {
|
||||
const newItems = unitPriceList.filter((_, i) => i !== index);
|
||||
setUnitPriceList(newItems);
|
||||
};
|
||||
|
||||
// 更新单价项
|
||||
const updateUnitPriceItem = (index: number, field: string, value: any) => {
|
||||
const newItems = [...unitPriceList];
|
||||
newItems[index] = { ...newItems[index], [field]: value };
|
||||
if (field === 'quantity' || field === 'unit_price') {
|
||||
const item = newItems[index];
|
||||
item.total_price = (item.quantity || 0) * (item.unit_price || 0);
|
||||
}
|
||||
setUnitPriceList(newItems);
|
||||
};
|
||||
|
||||
// 计算单价结算总金额
|
||||
const totalUnitPrice = unitPriceList.reduce((sum, item) => sum + (item.total_price || 0), 0);
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingProject(null);
|
||||
form.resetFields();
|
||||
setPaymentNodes([]);
|
||||
setUnitPriceList([]);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingProject(record);
|
||||
form.setFieldsValue({
|
||||
...record,
|
||||
start_date: record.start_date ? dayjs(record.start_date) : null,
|
||||
expected_end_date: record.expected_end_date ? dayjs(record.expected_end_date) : null,
|
||||
});
|
||||
setPaymentNodes(record.payment_nodes || []);
|
||||
setUnitPriceList(record.unit_price_list || []);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
const res = await axios.delete('/api/projects/' + id);
|
||||
if (res.data.success) {
|
||||
message.success('删除成功');
|
||||
fetchProjects();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
|
||||
const totalPercentage = paymentNodes.reduce((sum, node) => sum + (node.percentage || 0), 0);
|
||||
if (paymentNodes.length > 0 && totalPercentage > 100) {
|
||||
message.error('付款节点比例总和不能超过100%');
|
||||
return;
|
||||
}
|
||||
|
||||
const projectData = {
|
||||
...values,
|
||||
start_date: values.start_date?.format('YYYY-MM-DD'),
|
||||
expected_end_date: values.expected_end_date?.format('YYYY-MM-DD'),
|
||||
contract_amount: settlementType === 'unit' ? totalUnitPrice : values.contract_amount,
|
||||
payment_nodes: paymentNodes,
|
||||
unit_price_list: settlementType === 'unit' ? unitPriceList : [],
|
||||
status: editingProject ? values.status : 'planning',
|
||||
};
|
||||
|
||||
if (editingProject) {
|
||||
const res = await axios.put('/api/projects/' + editingProject.id, projectData);
|
||||
if (res.data.success) {
|
||||
message.success('更新成功');
|
||||
setModalVisible(false);
|
||||
fetchProjects();
|
||||
}
|
||||
} else {
|
||||
const res = await axios.post('/api/projects', projectData);
|
||||
if (res.data.success) {
|
||||
message.success('创建成功');
|
||||
setModalVisible(false);
|
||||
fetchProjects();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
planning: { color: 'default', text: '规划中' },
|
||||
active: { color: 'processing', text: '进行中' },
|
||||
completed: { color: 'success', text: '已完成' },
|
||||
suspended: { color: 'warning', text: '已暂停' },
|
||||
};
|
||||
const config = statusMap[status] || { color: 'default', text: status };
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const formatAmount = (val: number, curr: string = 'CNY') => {
|
||||
const c = CURRENCIES.find(item => item.value === curr);
|
||||
const symbol = c?.symbol || '¥';
|
||||
return symbol + ' ' + (val || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2 });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: '项目编号', dataIndex: 'project_code', width: 120 },
|
||||
{ title: '项目名称', dataIndex: 'name', ellipsis: true },
|
||||
{ title: '客户', dataIndex: 'customer_name', render: (v: string) => v || '-' },
|
||||
{ title: '项目经理', dataIndex: 'manager_name', render: (v: string) => v || '-' },
|
||||
{ title: '合同金额', dataIndex: 'contract_amount', render: (v: number, r: any) => formatAmount(v, r.currency) },
|
||||
{ title: '状态', dataIndex: 'status', render: (status: string) => getStatusTag(status) },
|
||||
{ title: '开始日期', dataIndex: 'start_date' },
|
||||
{ title: '操作', key: 'action', width: isAdmin ? 200 : 80, render: (_: any, record: any) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => navigate('/projects/' + record.id)}>查看</Button>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
|
||||
<Popconfirm title="确定删除此项目吗？" onConfirm={() => handleDelete(record.id)}>
|
||||
<Button size="small" danger icon={<DeleteOutlined />}>删除</Button>
|
||||
</Popconfirm>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
)}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? 8 : 24 }}>
|
||||
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
||||
<Title level={isMobile ? 3 : 2} style={{ marginBottom: 8 }}>项目管理</Title>
|
||||
<Paragraph type="secondary" style={{ marginBottom: 0 }}>管理项目信息、进度和预算</Paragraph>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
title="项目列表"
|
||||
extra={isAdmin && <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建项目</Button>}
|
||||
>
|
||||
<Table dataSource={projects} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 10 }} scroll={{ x: 1200 }} />
|
||||
</Card>
|
||||
|
||||
{isAdmin && (
|
||||
<Modal
|
||||
title={editingProject ? '编辑项目' : '新建项目'}
|
||||
open={modalVisible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
width={1000}
|
||||
style={{ top: 20 }}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form form={form} layout="vertical" initialValues={{ settlement_type: 'total', currency: 'CNY' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="name" label="项目名称" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入项目名称" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="customer_id" label="客户名称" rules={[{ required: true }]}>
|
||||
<Select placeholder="选择客户" showSearch optionFilterProp="children" size="large">
|
||||
{customers.map((c: any) => <Option key={c.id} value={c.id}>{c.name}</Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="project_manager_id" label="项目负责人" rules={[{ required: true }]}>
|
||||
<Select placeholder="选择项目负责人" showSearch optionFilterProp="children" size="large">
|
||||
{users.map((u: any) => <Option key={u.id} value={u.id}>{u.name} ({u.department})</Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="work_quantity" label="工程量">
|
||||
<Input placeholder="如：10000立方米、5000平方米" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item name="project_situation" label="项目情况">
|
||||
<TextArea rows={2} placeholder="描述项目具体情况" />
|
||||
</Form.Item>
|
||||
|
||||
<Divider orientation="left">结算方式</Divider>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form.Item name="settlement_type" label="结算方式" rules={[{ required: true }]}>
|
||||
<Radio.Group onChange={() => { setPaymentNodes([]); setUnitPriceList([]); }}>
|
||||
<Radio value="total">总价包干</Radio>
|
||||
<Radio value="unit">单价结算</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="currency" label="币种">
|
||||
<Select size="large">
|
||||
{CURRENCIES.map(c => <Option key={c.value} value={c.value}>{c.label}</Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
{settlementType === 'total' && (
|
||||
<Col span={8}>
|
||||
<Form.Item name="contract_amount" label="合同金额" rules={[{ required: true }]}>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
min={0}
|
||||
precision={2}
|
||||
formatter={v => v ? v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''}
|
||||
parser={v => v ? v.replace(/,/g, '') : ''}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{settlementType === 'unit' && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Text strong style={{ fontSize: 16 }}>单价结算明细</Text>
|
||||
<Button type="dashed" onClick={addUnitPriceItem} icon={<PlusOutlined />}>添加项目</Button>
|
||||
</div>
|
||||
|
||||
{unitPriceList.length === 0 && (
|
||||
<div style={{ padding: 24, textAlign: 'center', background: '#fafafa', borderRadius: 8, border: '1px dashed #d9d9d9' }}>
|
||||
<Text type="secondary">点击上方"添加项目"按钮添加明细</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{unitPriceList.map((item, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
size="small"
|
||||
style={{ marginBottom: 12, background: '#fafafa' }}
|
||||
title={<Text>项目 {index + 1}</Text>}
|
||||
extra={<Button type="text" danger icon={<DeleteOutlined />} onClick={() => removeUnitPriceItem(index)}>删除</Button>}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="项目名称">
|
||||
<Input
|
||||
value={item.item_name}
|
||||
onChange={e => updateUnitPriceItem(index, 'item_name', e.target.value)}
|
||||
placeholder="如：土方开挖"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="单位">
|
||||
<Input
|
||||
value={item.unit}
|
||||
onChange={e => updateUnitPriceItem(index, 'unit', e.target.value)}
|
||||
placeholder="如：m³"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="数量">
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
value={item.quantity}
|
||||
onChange={val => updateUnitPriceItem(index, 'quantity', val)}
|
||||
min={0}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="单价">
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
value={item.unit_price}
|
||||
onChange={val => updateUnitPriceItem(index, 'unit_price', val)}
|
||||
min={0}
|
||||
precision={2}
|
||||
formatter={v => v ? formatAmount(parseFloat(v.toString()), currency) : ''}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="总价">
|
||||
<Text strong style={{ fontSize: 16 }}>{formatAmount(item.total_price, currency)}</Text>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{unitPriceList.length > 0 && (
|
||||
<div style={{ padding: 16, background: '#e6f7ff', borderRadius: 8, textAlign: 'right' }}>
|
||||
<Text strong style={{ fontSize: 16 }}>合计金额：{formatAmount(totalUnitPrice, currency)}</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Divider orientation="left">付款节点</Divider>
|
||||
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Text strong style={{ fontSize: 16 }}>付款节点设置</Text>
|
||||
<Button type="dashed" onClick={addPaymentNode} icon={<PlusOutlined />}>添加节点</Button>
|
||||
</div>
|
||||
|
||||
{paymentNodes.length === 0 && (
|
||||
<div style={{ padding: 24, textAlign: 'center', background: '#fafafa', borderRadius: 8, border: '1px dashed #d9d9d9' }}>
|
||||
<Text type="secondary">点击上方"添加节点"按钮添加付款节点</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paymentNodes.map((node, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
size="small"
|
||||
style={{ marginBottom: 12, background: '#fafafa' }}
|
||||
title={<Text>节点 {index + 1}</Text>}
|
||||
extra={<Button type="text" danger icon={<DeleteOutlined />} onClick={() => removePaymentNode(index)}>删除</Button>}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="节点名称">
|
||||
<Input
|
||||
value={node.node_name}
|
||||
onChange={e => updatePaymentNode(index, 'node_name', e.target.value)}
|
||||
placeholder="如：预付款、进度款、尾款"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="比例(%)">
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
value={node.percentage}
|
||||
onChange={val => updatePaymentNode(index, 'percentage', val)}
|
||||
min={0}
|
||||
max={100}
|
||||
placeholder="如：30"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="金额">
|
||||
<Text strong style={{ fontSize: 16 }}>{formatAmount(node.node_amount || 0, currency)}</Text>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item label="触发条件">
|
||||
<Input
|
||||
value={node.trigger_condition}
|
||||
onChange={e => updatePaymentNode(index, 'trigger_condition', e.target.value)}
|
||||
placeholder="如：合同签订后支付、工程完工后支付"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{paymentNodes.length > 0 && (
|
||||
<div style={{ padding: 16, background: '#f6ffed', borderRadius: 8, textAlign: 'right' }}>
|
||||
<Text type="secondary">总比例：</Text>
|
||||
<Text strong style={{ fontSize: 16, marginLeft: 8 }}>{paymentNodes.reduce((sum, n) => sum + (n.percentage || 0), 0)}%</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Divider orientation="left">工期要求</Divider>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form.Item name="contract_days" label="合同工期（天）">
|
||||
<InputNumber style={{ width: '100%' }} min={1} placeholder="输入天数" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="start_date" label="开始日期">
|
||||
<DatePicker style={{ width: '100%' }} size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="expected_end_date" label="结束日期">
|
||||
<DatePicker style={{ width: '100%' }} size="large" disabled />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">合同附件</Divider>
|
||||
|
||||
<Form.Item name="contract_file" label="上传合同">
|
||||
<Upload maxCount={1} accept=".pdf,.doc,.docx,.jpg,.png">
|
||||
<Button icon={<UploadOutlined />}>选择文件</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsPage;
|
||||
@@ -0,0 +1,101 @@
|
||||
// 认证状态管理 - 使用Zustand
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
username: string
|
||||
name: string
|
||||
role: string
|
||||
department?: string
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
user: User | null
|
||||
isAuthenticated: boolean
|
||||
loading: boolean
|
||||
error: string | null
|
||||
|
||||
// Actions
|
||||
login: (username: string, password: string) => Promise<void>
|
||||
logout: () => void
|
||||
setToken: (token: string) => void
|
||||
setUser: (user: User) => void
|
||||
clearError: () => void
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
token: null,
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
loading: false,
|
||||
error: null,
|
||||
|
||||
login: async (username: string, password: string) => {
|
||||
set({ loading: true, error: null })
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
set({
|
||||
token: result.data.token,
|
||||
user: result.data.user,
|
||||
isAuthenticated: true,
|
||||
loading: false
|
||||
})
|
||||
} else {
|
||||
set({
|
||||
error: result.error || '登录失败',
|
||||
loading: false
|
||||
})
|
||||
throw new Error(result.error || '登录失败')
|
||||
}
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error instanceof Error ? error.message : '登录失败',
|
||||
loading: false
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
set({
|
||||
token: null,
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
error: null
|
||||
})
|
||||
},
|
||||
|
||||
setToken: (token: string) => {
|
||||
set({ token, isAuthenticated: true })
|
||||
},
|
||||
|
||||
setUser: (user: User) => {
|
||||
set({ user })
|
||||
},
|
||||
|
||||
clearError: () => {
|
||||
set({ error: null })
|
||||
}
|
||||
}),
|
||||
{
|
||||
name: 'auth-storage',
|
||||
partialize: (state) => ({
|
||||
token: state.token,
|
||||
user: state.user,
|
||||
isAuthenticated: state.isAuthenticated
|
||||
})
|
||||
}
|
||||
)
|
||||
)
|
||||
@@ -0,0 +1 @@
|
||||
export { useAuthStore } from './authStore'
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src')
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,448 @@
|
||||
-- Company Finance Database Schema
|
||||
-- PostgreSQL 15+
|
||||
-- Created: 2026-03-08
|
||||
|
||||
-- Drop existing database if exists and create new one
|
||||
DROP DATABASE IF EXISTS company_finance_db;
|
||||
CREATE DATABASE company_finance_db
|
||||
WITH
|
||||
OWNER = postgres
|
||||
ENCODING = 'UTF8'
|
||||
LC_COLLATE = 'en_US.UTF-8'
|
||||
LC_CTYPE = 'en_US.UTF-8'
|
||||
TABLESPACE = pg_default
|
||||
CONNECTION LIMIT = -1
|
||||
IS_TEMPLATE = False;
|
||||
|
||||
-- Connect to the new database
|
||||
\c company_finance_db;
|
||||
|
||||
-- Enable UUID extension
|
||||
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
|
||||
|
||||
-- ============================================
|
||||
-- 1. Users Table (假设已存在，这里创建简化版本)
|
||||
-- ============================================
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
user_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
username VARCHAR(50) UNIQUE NOT NULL,
|
||||
email VARCHAR(100) UNIQUE NOT NULL,
|
||||
full_name_zh VARCHAR(100),
|
||||
full_name_th VARCHAR(100),
|
||||
full_name_en VARCHAR(100),
|
||||
role VARCHAR(50) NOT NULL DEFAULT 'user',
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 2. Product Categories Table (商品分类表)
|
||||
-- ============================================
|
||||
CREATE TABLE product_categories (
|
||||
category_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
category_code VARCHAR(20) UNIQUE NOT NULL,
|
||||
name_zh VARCHAR(100) NOT NULL,
|
||||
name_th VARCHAR(100),
|
||||
name_en VARCHAR(100),
|
||||
description_zh TEXT,
|
||||
description_th TEXT,
|
||||
description_en TEXT,
|
||||
parent_category_id UUID REFERENCES product_categories(category_id) ON DELETE SET NULL,
|
||||
sort_order INTEGER DEFAULT 0,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 3. Products Table (商品表)
|
||||
-- ============================================
|
||||
CREATE TABLE products (
|
||||
product_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
product_code VARCHAR(50) UNIQUE NOT NULL,
|
||||
sku VARCHAR(50) UNIQUE,
|
||||
name_zh VARCHAR(200) NOT NULL,
|
||||
name_th VARCHAR(200),
|
||||
name_en VARCHAR(200),
|
||||
description_zh TEXT,
|
||||
description_th TEXT,
|
||||
description_en TEXT,
|
||||
category_id UUID REFERENCES product_categories(category_id) ON DELETE SET NULL,
|
||||
unit_price NUMERIC(15,2) NOT NULL DEFAULT 0.00,
|
||||
currency VARCHAR(3) DEFAULT 'CNY',
|
||||
unit_type VARCHAR(50) DEFAULT 'piece',
|
||||
specifications JSONB,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 4. Projects Table (项目表)
|
||||
-- ============================================
|
||||
CREATE TABLE projects (
|
||||
project_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_code VARCHAR(50) UNIQUE NOT NULL,
|
||||
name_zh VARCHAR(200) NOT NULL,
|
||||
name_th VARCHAR(200),
|
||||
name_en VARCHAR(200),
|
||||
description_zh TEXT,
|
||||
description_th TEXT,
|
||||
description_en TEXT,
|
||||
client_name_zh VARCHAR(200),
|
||||
client_name_th VARCHAR(200),
|
||||
client_name_en VARCHAR(200),
|
||||
contract_number VARCHAR(100),
|
||||
contract_amount NUMERIC(15,2) NOT NULL DEFAULT 0.00,
|
||||
currency VARCHAR(3) DEFAULT 'CNY',
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
status VARCHAR(50) DEFAULT 'planning' CHECK (status IN ('planning', 'in_progress', 'completed', 'cancelled', 'on_hold')),
|
||||
project_manager_id UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 5. Payment Nodes Table (付款节点表)
|
||||
-- ============================================
|
||||
CREATE TABLE payment_nodes (
|
||||
node_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_id UUID REFERENCES projects(project_id) ON DELETE CASCADE,
|
||||
node_code VARCHAR(50) NOT NULL,
|
||||
name_zh VARCHAR(200) NOT NULL,
|
||||
name_th VARCHAR(200),
|
||||
name_en VARCHAR(200),
|
||||
description_zh TEXT,
|
||||
description_th TEXT,
|
||||
description_en TEXT,
|
||||
planned_date DATE NOT NULL,
|
||||
actual_date DATE,
|
||||
planned_amount NUMERIC(15,2) NOT NULL DEFAULT 0.00,
|
||||
actual_amount NUMERIC(15,2),
|
||||
currency VARCHAR(3) DEFAULT 'CNY',
|
||||
node_type VARCHAR(50) DEFAULT 'payment' CHECK (node_type IN ('payment', 'receipt', 'milestone')),
|
||||
status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'completed', 'cancelled', 'delayed')),
|
||||
sort_order INTEGER DEFAULT 0,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE(project_id, node_code)
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 6. Payment Records Table (收付款记录表)
|
||||
-- ============================================
|
||||
CREATE TABLE payment_records (
|
||||
record_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
node_id UUID REFERENCES payment_nodes(node_id) ON DELETE CASCADE,
|
||||
record_type VARCHAR(50) NOT NULL CHECK (record_type IN ('payment', 'receipt')),
|
||||
amount NUMERIC(15,2) NOT NULL DEFAULT 0.00,
|
||||
currency VARCHAR(3) DEFAULT 'CNY',
|
||||
exchange_rate NUMERIC(10,6) DEFAULT 1.000000,
|
||||
converted_amount NUMERIC(15,2),
|
||||
payment_date DATE NOT NULL,
|
||||
payment_method VARCHAR(50) DEFAULT 'bank_transfer' CHECK (payment_method IN ('bank_transfer', 'cash', 'check', 'credit_card', 'digital_wallet')),
|
||||
reference_number VARCHAR(100),
|
||||
bank_name VARCHAR(200),
|
||||
account_number VARCHAR(100),
|
||||
payer_name VARCHAR(200),
|
||||
payee_name VARCHAR(200),
|
||||
description TEXT,
|
||||
status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'processing', 'completed', 'failed', 'cancelled')),
|
||||
attachment_urls TEXT[],
|
||||
verified_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
verified_at TIMESTAMP WITH TIME ZONE,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 7. Exchange Rates Table (汇率表)
|
||||
-- ============================================
|
||||
CREATE TABLE exchange_rates (
|
||||
rate_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
base_currency VARCHAR(3) NOT NULL,
|
||||
target_currency VARCHAR(3) NOT NULL,
|
||||
exchange_rate NUMERIC(10,6) NOT NULL,
|
||||
effective_date DATE NOT NULL,
|
||||
source VARCHAR(100) DEFAULT 'manual',
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE(base_currency, target_currency, effective_date)
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 8. Language Configs Table (多语言配置表)
|
||||
-- ============================================
|
||||
CREATE TABLE language_configs (
|
||||
config_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
config_key VARCHAR(100) NOT NULL,
|
||||
module VARCHAR(50) NOT NULL,
|
||||
value_zh TEXT NOT NULL,
|
||||
value_th TEXT,
|
||||
value_en TEXT,
|
||||
description TEXT,
|
||||
sort_order INTEGER DEFAULT 0,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE(config_key, module)
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- 9. Project Products Table (项目商品关联表)
|
||||
-- ============================================
|
||||
CREATE TABLE project_products (
|
||||
project_product_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
|
||||
project_id UUID REFERENCES projects(project_id) ON DELETE CASCADE,
|
||||
product_id UUID REFERENCES products(product_id) ON DELETE CASCADE,
|
||||
quantity INTEGER NOT NULL DEFAULT 1,
|
||||
unit_price NUMERIC(15,2) NOT NULL DEFAULT 0.00,
|
||||
currency VARCHAR(3) DEFAULT 'CNY',
|
||||
total_amount NUMERIC(15,2) GENERATED ALWAYS AS (quantity * unit_price) STORED,
|
||||
description TEXT,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_by UUID REFERENCES users(user_id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE(project_id, product_id)
|
||||
);
|
||||
|
||||
-- ============================================
|
||||
-- INDEXES
|
||||
-- ============================================
|
||||
|
||||
-- Users indexes
|
||||
CREATE INDEX idx_users_username ON users(username);
|
||||
CREATE INDEX idx_users_email ON users(email);
|
||||
CREATE INDEX idx_users_role ON users(role);
|
||||
|
||||
-- Product categories indexes
|
||||
CREATE INDEX idx_product_categories_code ON product_categories(category_code);
|
||||
CREATE INDEX idx_product_categories_parent ON product_categories(parent_category_id);
|
||||
CREATE INDEX idx_product_categories_active ON product_categories(is_active);
|
||||
|
||||
-- Products indexes
|
||||
CREATE INDEX idx_products_code ON products(product_code);
|
||||
CREATE INDEX idx_products_sku ON products(sku);
|
||||
CREATE INDEX idx_products_category ON products(category_id);
|
||||
CREATE INDEX idx_products_active ON products(is_active);
|
||||
CREATE INDEX idx_products_price ON products(unit_price);
|
||||
|
||||
-- Projects indexes
|
||||
CREATE INDEX idx_projects_code ON projects(project_code);
|
||||
CREATE INDEX idx_projects_status ON projects(status);
|
||||
CREATE INDEX idx_projects_manager ON projects(project_manager_id);
|
||||
CREATE INDEX idx_projects_dates ON projects(start_date, end_date);
|
||||
CREATE INDEX idx_projects_active ON projects(is_active);
|
||||
|
||||
-- Payment nodes indexes
|
||||
CREATE INDEX idx_payment_nodes_project ON payment_nodes(project_id);
|
||||
CREATE INDEX idx_payment_nodes_code ON payment_nodes(node_code);
|
||||
CREATE INDEX idx_payment_nodes_dates ON payment_nodes(planned_date, actual_date);
|
||||
CREATE INDEX idx_payment_nodes_status ON payment_nodes(status);
|
||||
CREATE INDEX idx_payment_nodes_type ON payment_nodes(node_type);
|
||||
|
||||
-- Payment records indexes
|
||||
CREATE INDEX idx_payment_records_node ON payment_records(node_id);
|
||||
CREATE INDEX idx_payment_records_type ON payment_records(record_type);
|
||||
CREATE INDEX idx_payment_records_date ON payment_records(payment_date);
|
||||
CREATE INDEX idx_payment_records_status ON payment_records(status);
|
||||
CREATE INDEX idx_payment_records_method ON payment_records(payment_method);
|
||||
|
||||
-- Exchange rates indexes
|
||||
CREATE INDEX idx_exchange_rates_currencies ON exchange_rates(base_currency, target_currency);
|
||||
CREATE INDEX idx_exchange_rates_date ON exchange_rates(effective_date);
|
||||
CREATE INDEX idx_exchange_rates_active ON exchange_rates(is_active);
|
||||
|
||||
-- Language configs indexes
|
||||
CREATE INDEX idx_language_configs_key ON language_configs(config_key);
|
||||
CREATE INDEX idx_language_configs_module ON language_configs(module);
|
||||
CREATE INDEX idx_language_configs_active ON language_configs(is_active);
|
||||
|
||||
-- Project products indexes
|
||||
CREATE INDEX idx_project_products_project ON project_products(project_id);
|
||||
CREATE INDEX idx_project_products_product ON project_products(product_id);
|
||||
CREATE INDEX idx_project_products_active ON project_products(is_active);
|
||||
|
||||
-- ============================================
|
||||
-- VIEWS
|
||||
-- ============================================
|
||||
|
||||
-- View: 项目概览视图
|
||||
CREATE OR REPLACE VIEW project_overview AS
|
||||
SELECT
|
||||
p.project_id,
|
||||
p.project_code,
|
||||
p.name_zh as project_name_zh,
|
||||
p.name_en as project_name_en,
|
||||
p.contract_amount,
|
||||
p.currency,
|
||||
p.start_date,
|
||||
p.end_date,
|
||||
p.status as project_status,
|
||||
u.full_name_zh as project_manager_name,
|
||||
COUNT(DISTINCT pp.product_id) as product_count,
|
||||
COUNT(DISTINCT pn.node_id) as payment_node_count,
|
||||
COALESCE(SUM(pr.amount), 0) as total_payments,
|
||||
COALESCE(SUM(CASE WHEN pr.record_type = 'receipt' THEN pr.amount ELSE 0 END), 0) as total_receipts,
|
||||
COALESCE(SUM(CASE WHEN pr.record_type = 'payment' THEN pr.amount ELSE 0 END), 0) as total_expenses
|
||||
FROM projects p
|
||||
LEFT JOIN users u ON p.project_manager_id = u.user_id
|
||||
LEFT JOIN project_products pp ON p.project_id = pp.project_id
|
||||
LEFT JOIN payment_nodes pn ON p.project_id = pn.project_id
|
||||
LEFT JOIN payment_records pr ON pn.node_id = pr.node_id
|
||||
WHERE p.is_active = TRUE
|
||||
GROUP BY p.project_id, p.project_code, p.name_zh, p.name_en, p.contract_amount, p.currency,
|
||||
p.start_date, p.end_date, p.status, u.full_name_zh;
|
||||
|
||||
-- View: 付款节点详情视图
|
||||
CREATE OR REPLACE VIEW payment_node_details AS
|
||||
SELECT
|
||||
pn.node_id,
|
||||
pn.project_id,
|
||||
p.project_code,
|
||||
p.name_zh as project_name_zh,
|
||||
pn.node_code,
|
||||
pn.name_zh as node_name_zh,
|
||||
pn.planned_date,
|
||||
pn.actual_date,
|
||||
pn.planned_amount,
|
||||
pn.actual_amount,
|
||||
pn.currency,
|
||||
pn.node_type,
|
||||
pn.status as node_status,
|
||||
COUNT(pr.record_id) as record_count,
|
||||
COALESCE(SUM(pr.amount), 0) as total_recorded_amount,
|
||||
CASE
|
||||
WHEN pn.node_type = 'payment' THEN '支出'
|
||||
WHEN pn.node_type = 'receipt' THEN '收入'
|
||||
ELSE '里程碑'
|
||||
END as node_type_cn
|
||||
FROM payment_nodes pn
|
||||
JOIN projects p ON pn.project_id = p.project_id
|
||||
LEFT JOIN payment_records pr ON pn.node_id = pr.node_id AND pr.is_active = TRUE
|
||||
WHERE pn.is_active = TRUE
|
||||
GROUP BY pn.node_id, pn.project_id, p.project_code, p.name_zh, pn.node_code, pn.name_zh,
|
||||
pn.planned_date, pn.actual_date, pn.planned_amount, pn.actual_amount, pn.currency,
|
||||
pn.node_type, pn.status;
|
||||
|
||||
-- View: 商品分类树视图
|
||||
CREATE OR REPLACE VIEW product_category_tree AS
|
||||
WITH RECURSIVE category_tree AS (
|
||||
SELECT
|
||||
category_id,
|
||||
category_code,
|
||||
name_zh,
|
||||
name_en,
|
||||
parent_category_id,
|
||||
1 as level,
|
||||
ARRAY[category_code] as path_codes,
|
||||
ARRAY[name_zh] as path_names
|
||||
FROM product_categories
|
||||
WHERE parent_category_id IS NULL AND is_active = TRUE
|
||||
|
||||
UNION ALL
|
||||
|
||||
SELECT
|
||||
c.category_id,
|
||||
c.category_code,
|
||||
c.name_zh,
|
||||
c.name_en,
|
||||
c.parent_category_id,
|
||||
ct.level + 1,
|
||||
ct.path_codes || c.category_code,
|
||||
ct.path_names || c.name_zh
|
||||
FROM product_categories c
|
||||
JOIN category_tree ct ON c.parent_category_id = ct.category_id
|
||||
WHERE c.is_active = TRUE
|
||||
)
|
||||
SELECT
|
||||
category_id,
|
||||
category_code,
|
||||
name_zh,
|
||||
name_en,
|
||||
parent_category_id,
|
||||
level,
|
||||
array_to_string(path_codes, ' > ') as full_path_code,
|
||||
array_to_string(path_names, ' > ') as full_path_name
|
||||
FROM category_tree
|
||||
ORDER BY path_codes;
|
||||
|
||||
-- View: 汇率最新视图
|
||||
CREATE OR REPLACE VIEW latest_exchange_rates AS
|
||||
SELECT DISTINCT ON (base_currency, target_currency)
|
||||
rate_id,
|
||||
base_currency,
|
||||
target_currency,
|
||||
exchange_rate,
|
||||
effective_date,
|
||||
source,
|
||||
created_at
|
||||
FROM exchange_rates
|
||||
WHERE is_active = TRUE
|
||||
ORDER BY base_currency, target_currency, effective_date DESC;
|
||||
|
||||
-- ============================================
|
||||
-- FUNCTIONS AND TRIGGERS
|
||||
-- ============================================
|
||||
|
||||
-- Function to update updated_at timestamp
|
||||
CREATE OR REPLACE FUNCTION update_updated_at_column()
|
||||
RETURNS TRIGGER AS $$
|
||||
BEGIN
|
||||
NEW.updated_at = CURRENT_TIMESTAMP;
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ language 'plpgsql';
|
||||
|
||||
-- Create triggers for all tables with updated_at column
|
||||
DO $$
|
||||
DECLARE
|
||||
table_name text;
|
||||
BEGIN
|
||||
FOR table_name IN
|
||||
SELECT tablename FROM pg_tables
|
||||
WHERE schemaname = 'public'
|
||||
AND tablename IN (
|
||||
'users', 'product_categories', 'products', 'projects',
|
||||
'payment_nodes', 'payment_records', 'exchange_rates',
|
||||
'language_configs', 'project_products'
|
||||
)
|
||||
LOOP
|
||||
EXECUTE format('
|
||||
DROP TRIGGER IF EXISTS update_%s_updated_at ON %s;
|
||||
CREATE TRIGGER update_%s_updated_at
|
||||
BEFORE UPDATE ON %s
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION update_updated_at_column();
|
||||
', table_name, table_name, table_name, table_name);
|
||||
END LOOP;
|
||||
END $$;
|
||||
|
||||
-- Function to calculate project financial summary
|
||||
CREATE OR REPLACE FUNCTION calculate_project_financial_summary(project_uuid UUID)
|
||||
RETURNS TABLE(
|
||||
total_contract_amount NUMERIC,
|
||||
total_planned_payments NUMERIC,
|
||||
total_actual_payments NUMERIC,
|
||||
total_planned_receipts NUMERIC,
|
||||
total_actual_receipts NUMERIC,
|
||||
balance NUMERIC
|
||||
) AS $$
|
||||
BEGIN
|
||||
RETURN QUERY
|
||||
SELECT
|
||||
COALESCE(p.contract_amount,
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,174 @@
|
||||
# 问题清单 - 进销存系统
|
||||
|
||||
**创建日期**: 2026-03-09
|
||||
**最后更新**: 2026-03-09 19:10 UTC
|
||||
|
||||
---
|
||||
|
||||
## 🔴 高优先级（阻塞）
|
||||
|
||||
### ISSUE-001: 缺失页面组件导致运行时错误
|
||||
|
||||
**状态**: 🟐 待修复
|
||||
**分配给**: @frontend-team
|
||||
**影响范围**: 所有非仪表盘页面
|
||||
|
||||
**问题描述**:
|
||||
App.tsx 导入了 5 个不存在的页面组件，用户点击菜单项会导致应用崩溃。
|
||||
|
||||
**缺失文件**:
|
||||
- [ ] `src/pages/projects/ProjectsPage.tsx`
|
||||
- [ ] `src/pages/advances/AdvancesPage.tsx`
|
||||
- [ ] `src/pages/reimbursements/ReimbursementsPage.tsx`
|
||||
- [ ] `src/pages/finance/FinancePage.tsx`
|
||||
- [ ] `src/pages/reports/ReportsPage.tsx`
|
||||
|
||||
**修复方案**:
|
||||
1. 创建空壳组件（临时方案）
|
||||
2. 逐步实现业务逻辑
|
||||
|
||||
**验收标准**:
|
||||
- [ ] 所有菜单项点击不报错
|
||||
- [ ] 页面显示"开发中"提示
|
||||
- [ ] 控制台无错误
|
||||
|
||||
---
|
||||
|
||||
### ISSUE-002: API 服务层缺失
|
||||
|
||||
**状态**: 🟐 待修复
|
||||
**分配给**: @frontend-team + @backend-team
|
||||
**影响范围**: 所有数据交互功能
|
||||
|
||||
**问题描述**:
|
||||
`src/api/` 目录为空，无法与后端通信。
|
||||
|
||||
**需要创建**:
|
||||
- [ ] `src/api/index.ts` - Axios 实例配置
|
||||
- [ ] `src/api/auth.ts` - 认证接口
|
||||
- [ ] `src/api/projects.ts` - 项目管理接口
|
||||
- [ ] `src/api/advances.ts` - 预支管理接口
|
||||
- [ ] `src/api/reimbursements.ts` - 报销管理接口
|
||||
- [ ] `src/api/finance.ts` - 财务管理接口
|
||||
- [ ] `src/api/reports.ts` - 报表分析接口
|
||||
|
||||
**验收标准**:
|
||||
- [ ] API 客户端可正常调用
|
||||
- [ ] 错误处理完善
|
||||
- [ ] 支持请求/响应拦截
|
||||
|
||||
---
|
||||
|
||||
## 🟡 中优先级（体验）
|
||||
|
||||
### ISSUE-003: PWA 图标文件缺失
|
||||
|
||||
**状态**: 🟐 待修复
|
||||
**分配给**: @frontend-team
|
||||
**影响范围**: 移动端用户体验
|
||||
|
||||
**问题描述**:
|
||||
vite.config.ts 配置了 PWA，但 public 目录缺少必要的图标文件。
|
||||
|
||||
**缺失文件**:
|
||||
- [ ] `public/pwa-192x192.png`
|
||||
- [ ] `public/pwa-512x512.png`
|
||||
- [ ] `public/apple-touch-icon.png`
|
||||
- [ ] `public/favicon.ico`
|
||||
|
||||
**修复方案**:
|
||||
使用 PWA Asset Generator 生成图标：
|
||||
```bash
|
||||
npx pwa-asset-generator src/assets/logo.svg public
|
||||
```
|
||||
|
||||
**验收标准**:
|
||||
- [ ] 所有图标文件存在
|
||||
- [ ] 移动端可添加到主屏幕
|
||||
- [ ] 图标显示正常
|
||||
|
||||
---
|
||||
|
||||
### ISSUE-004: 移动端适配待完善
|
||||
|
||||
**状态**: 🟐 待测试
|
||||
**分配给**: @frontend-team
|
||||
**影响范围**: 移动端用户体验
|
||||
|
||||
**需要测试**:
|
||||
- [ ] 侧边栏在移动端自动折叠
|
||||
- [ ] 表格支持横向滚动
|
||||
- [ ] 按钮和表单元素触摸友好
|
||||
- [ ] 字体大小适配小屏幕
|
||||
|
||||
**验收标准**:
|
||||
- [ ] iPhone SE (375px) 显示正常
|
||||
- [ ] iPad (768px) 显示正常
|
||||
- [ ] 无横向滚动条（除表格外）
|
||||
|
||||
---
|
||||
|
||||
## 🟢 低优先级（优化）
|
||||
|
||||
### ISSUE-005: 公网访问未开放
|
||||
|
||||
**状态**: ℹ️ 预期行为
|
||||
**分配给**: @devops-team
|
||||
**影响范围**: 无（使用 Tailscale）
|
||||
|
||||
**说明**:
|
||||
安全组未开放 3001 端口，这是**正确的安全配置**。生产环境应仅允许 Tailscale 内网访问。
|
||||
|
||||
**建议**:
|
||||
- [ ] 文档中明确说明访问方式
|
||||
- [ ] 无需修复
|
||||
|
||||
---
|
||||
|
||||
### ISSUE-006: 使用开发服务器
|
||||
|
||||
**状态**: 🟐 待优化
|
||||
**分配给**: @devops-team
|
||||
**影响范围**: 生产环境部署
|
||||
|
||||
**问题描述**:
|
||||
当前使用 Vite 开发服务器 (`vite --host`)，不适合生产环境。
|
||||
|
||||
**修复方案**:
|
||||
1. 执行 `npm run build` 构建生产版本
|
||||
2. 使用 Nginx 或其他 Web 服务器托管 dist 目录
|
||||
3. 配置反向代理到后端 API
|
||||
|
||||
**验收标准**:
|
||||
- [ ] 构建无错误
|
||||
- [ ] 生产版本可正常访问
|
||||
- [ ] 性能优化（压缩、缓存等）
|
||||
|
||||
---
|
||||
|
||||
## 📝 问题状态图例
|
||||
|
||||
| 状态 | 图标 | 说明 |
|
||||
|------|------|------|
|
||||
| 待修复 | 🟐 | 尚未开始处理 |
|
||||
| 进行中 | 🔵 | 正在修复 |
|
||||
| 待验证 | 🟣 | 修复完成，等待测试 |
|
||||
| 已解决 | ✅ | 测试通过 |
|
||||
| 预期行为 | ℹ️ | 无需修复 |
|
||||
| 已关闭 | ⚫ | 已归档 |
|
||||
|
||||
---
|
||||
|
||||
## 📊 统计
|
||||
|
||||
- **高优先级**: 2 个（阻塞功能）
|
||||
- **中优先级**: 2 个（影响体验）
|
||||
- **低优先级**: 2 个（优化建议）
|
||||
- **总计**: 6 个
|
||||
|
||||
---
|
||||
|
||||
**维护说明**:
|
||||
- 修复问题后更新状态
|
||||
- 新问题按格式添加
|
||||
- 每周回顾问题清单
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
# 进销存系统测试报告
|
||||
|
||||
**测试日期**: 2026-03-09 18:56 UTC
|
||||
**测试人员**: AI 测试助手
|
||||
**系统版本**: v0.0.0 (开发中)
|
||||
**测试环境**: 云服务器 (43.129.27.210) + Tailscale VPN
|
||||
|
||||
---
|
||||
|
||||
## 📋 测试概览
|
||||
|
||||
| 测试类别 | 通过 | 失败 | 警告 | 总计 |
|
||||
|---------|------|------|------|------|
|
||||
| 服务状态检查 | 3 | 0 | 0 | 3 |
|
||||
| 本地访问测试 | 2 | 0 | 0 | 2 |
|
||||
| Windows 访问测试 | 2 | 0 | 0 | 2 |
|
||||
| 移动端访问测试 | 2 | 1 | 0 | 3 |
|
||||
| 功能测试 | 2 | 5 | 2 | 9 |
|
||||
| **总计** | **11** | **6** | **2** | **19** |
|
||||
|
||||
**测试通过率**: 57.9%
|
||||
|
||||
---
|
||||
|
||||
## ✅ 通过的测试项
|
||||
|
||||
### 1. 服务状态检查
|
||||
|
||||
| 测试项 | 状态 | 详情 |
|
||||
|--------|------|------|
|
||||
| Vite 开发服务 | ✅ 通过 | 进程 ID: 149327，运行正常 |
|
||||
| 端口 3001 监听 | ✅ 通过 | `0.0.0.0:3001 LISTEN 149327/node` |
|
||||
| 服务进程 | ✅ 通过 | node + esbuild 服务正常运行 |
|
||||
|
||||
### 2. 本地访问测试
|
||||
|
||||
| 测试项 | 状态 | 详情 |
|
||||
|--------|------|------|
|
||||
| curl localhost:3001 | ✅ 通过 | HTTP/1.1 200 OK |
|
||||
| 响应头检查 | ✅ 通过 | Content-Type: text/html, Cache-Control: no-cache |
|
||||
|
||||
**响应示例**:
|
||||
```
|
||||
HTTP/1.1 200 OK
|
||||
Vary: Origin
|
||||
Content-Type: text/html
|
||||
Cache-Control: no-cache
|
||||
Etag: W/"284-7bU+x0Fr2X4vAzjym6yXRvsGtyk"
|
||||
```
|
||||
|
||||
### 3. Windows 电脑访问测试
|
||||
|
||||
| 测试项 | 状态 | 详情 |
|
||||
|--------|------|------|
|
||||
| SSH 远程测试 | ✅ 通过 | 从 100.77.135.1 访问成功 |
|
||||
| PowerShell 请求 | ✅ 通过 | StatusCode: 200, StatusDescription: OK |
|
||||
|
||||
**测试结果**:
|
||||
```
|
||||
StatusCode StatusDescription
|
||||
---------- -----------------
|
||||
200 OK
|
||||
```
|
||||
|
||||
### 4. 移动端访问测试
|
||||
|
||||
| 测试项 | 状态 | 详情 |
|
||||
|--------|------|------|
|
||||
| Tailscale VPN 访问 | ✅ 通过 | http://100.85.119.13:3001/ 返回 200 |
|
||||
| 移动端 User-Agent | ✅ 通过 | iPhone Safari UA 测试通过 |
|
||||
| viewport 配置 | ✅ 通过 | `<meta name="viewport" content="width=device-width, initial-scale=1.0" />` |
|
||||
|
||||
### 5. 功能测试 - 已实现
|
||||
|
||||
| 测试项 | 状态 | 详情 |
|
||||
|--------|------|------|
|
||||
| 首页加载 | ✅ 通过 | HTML 正常返回，Vite HMR 正常 |
|
||||
| 登录页面 | ✅ 通过 | LoginPage.tsx 完整实现，支持 4 种测试账户 |
|
||||
|
||||
---
|
||||
|
||||
## ❌ 失败的测试项
|
||||
|
||||
### 1. 公网访问测试
|
||||
|
||||
| 测试项 | 状态 | 错误信息 |
|
||||
|--------|------|----------|
|
||||
| 公网 IP 访问 | ❌ 失败 | `curl: (28) Failed to connect to 43.129.27.210 port 3001 after 5002 ms: Timeout was reached` |
|
||||
|
||||
**原因分析**: 云服务器安全组未开放 3001 端口
|
||||
**建议**: 这是**预期行为**，生产环境应仅允许 Tailscale 内网访问
|
||||
|
||||
---
|
||||
|
||||
### 2. 缺失页面组件（严重）
|
||||
|
||||
App.tsx 导入了以下不存在的页面组件，会导致**运行时错误**：
|
||||
|
||||
| 缺失文件 | 路由 | 优先级 |
|
||||
|---------|------|--------|
|
||||
| `src/pages/projects/ProjectsPage.tsx` | `/projects` | 🔴 高 |
|
||||
| `src/pages/advances/AdvancesPage.tsx` | `/advances` | 🔴 高 |
|
||||
| `src/pages/reimbursements/ReimbursementsPage.tsx` | `/reimbursements` | 🔴 高 |
|
||||
| `src/pages/finance/FinancePage.tsx` | `/finance` | 🔴 高 |
|
||||
| `src/pages/reports/ReportsPage.tsx` | `/reports` | 🔴 高 |
|
||||
|
||||
**当前项目文件统计**:
|
||||
```
|
||||
src/
|
||||
├── App.tsx ✅
|
||||
├── main.tsx ✅
|
||||
├── components/
|
||||
│ └── layout/MainLayout.tsx ✅
|
||||
├── pages/
|
||||
│ ├── auth/LoginPage.tsx ✅
|
||||
│ └── dashboard/DashboardPage.tsx ✅
|
||||
├── store/
|
||||
│ └── authStore.ts ✅
|
||||
└── api/ (空目录) ❌
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. PWA 移动端支持（警告）
|
||||
|
||||
vite.config.ts 配置了 PWA，但缺少必要的图标文件：
|
||||
|
||||
| 缺失文件 | 用途 | 优先级 |
|
||||
|---------|------|--------|
|
||||
| `public/pwa-192x192.png` | PWA 图标 (192x192) | 🟡 中 |
|
||||
| `public/pwa-512x512.png` | PWA 图标 (512x512) | 🟡 中 |
|
||||
| `public/apple-touch-icon.png` | iOS 主屏幕图标 | 🟡 中 |
|
||||
| `public/favicon.ico` | 浏览器图标 | 🟡 中 |
|
||||
|
||||
**影响**: 移动端无法将应用添加到主屏幕
|
||||
|
||||
---
|
||||
|
||||
## 🔧 修复建议
|
||||
|
||||
### 高优先级（阻塞功能）
|
||||
|
||||
#### 1. 创建缺失的页面组件
|
||||
|
||||
**分配给**: Frontend 专家
|
||||
|
||||
需要创建以下 5 个页面组件（可先创建空壳组件避免崩溃）：
|
||||
|
||||
```bash
|
||||
# 建议的组件结构
|
||||
src/pages/projects/ProjectsPage.tsx
|
||||
src/pages/advances/AdvancesPage.tsx
|
||||
src/pages/reimbursements/ReimbursementsPage.tsx
|
||||
src/pages/finance/FinancePage.tsx
|
||||
src/pages/reports/ReportsPage.tsx
|
||||
```
|
||||
|
||||
**临时解决方案**（避免崩溃）:
|
||||
```tsx
|
||||
// 示例：ProjectsPage.tsx
|
||||
import React from 'react'
|
||||
import { Typography } from 'antd'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const ProjectsPage: React.FC = () => {
|
||||
return (
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Title level={2}>📁 项目管理</Title>
|
||||
<p>页面开发中...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectsPage
|
||||
```
|
||||
|
||||
#### 2. 创建 API 服务层
|
||||
|
||||
**分配给**: Frontend 专家 + Backend 专家
|
||||
|
||||
```bash
|
||||
src/api/
|
||||
├── index.ts (API 客户端配置)
|
||||
├── auth.ts (认证 API)
|
||||
├── projects.ts (项目 API)
|
||||
├── advances.ts (预支 API)
|
||||
├── reimbursements.ts (报销 API)
|
||||
├── finance.ts (财务 API)
|
||||
└── reports.ts (报表 API)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 中优先级（用户体验）
|
||||
|
||||
#### 3. 添加 PWA 图标
|
||||
|
||||
**分配给**: Frontend 专家
|
||||
|
||||
生成所需图标文件：
|
||||
- pwa-192x192.png
|
||||
- pwa-512x512.png
|
||||
- apple-touch-icon.png
|
||||
- favicon.ico
|
||||
|
||||
**工具推荐**: 使用 [PWA Asset Generator](https://github.com/elegantapp/pwa-asset-generator)
|
||||
|
||||
#### 4. 完善移动端适配
|
||||
|
||||
**分配给**: Frontend 专家
|
||||
|
||||
- [ ] 测试侧边栏在移动端的折叠行为
|
||||
- [ ] 确保表格在移动端可横向滚动
|
||||
- [ ] 添加移动端触摸优化
|
||||
|
||||
---
|
||||
|
||||
### 低优先级（优化）
|
||||
|
||||
#### 5. 安全配置
|
||||
|
||||
**分配给**: DevOps 专家
|
||||
|
||||
- [ ] 确认安全组仅开放必要端口（SSH + Tailscale）
|
||||
- [ ] 生产环境禁用 Vite 开发服务器
|
||||
- [ ] 配置 HTTPS（可选，Tailscale 已加密）
|
||||
|
||||
---
|
||||
|
||||
## 📱 移动端访问说明
|
||||
|
||||
### 访问方式
|
||||
|
||||
1. **Tailscale VPN** (推荐)
|
||||
- 连接 Tailscale VPN
|
||||
- 访问：`http://100.85.119.13:3001/`
|
||||
|
||||
2. **Windows 电脑**
|
||||
- 直接访问：`http://100.85.119.13:3001/`
|
||||
|
||||
### 测试账户
|
||||
|
||||
| 用户名 | 密码 | 角色 |
|
||||
|--------|------|------|
|
||||
| admin | 123456 | 系统管理员 |
|
||||
| finance | 123456 | 财务专员 |
|
||||
| manager | 123456 | 项目经理 |
|
||||
| employee | 123456 | 普通员工 |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 下一步行动
|
||||
|
||||
### 立即执行（本周）
|
||||
1. [ ] 创建 5 个缺失的页面组件（空壳即可）
|
||||
2. [ ] 测试登录流程和仪表盘导航
|
||||
|
||||
### 短期计划（2 周内）
|
||||
3. [ ] 实现核心业务页面功能
|
||||
4. [ ] 添加 PWA 图标支持
|
||||
5. [ ] 完善移动端适配
|
||||
|
||||
### 长期计划（1 个月内）
|
||||
6. [ ] 对接后端 API
|
||||
7. [ ] 性能优化和测试
|
||||
8. [ ] 生产环境部署
|
||||
|
||||
---
|
||||
|
||||
## 📊 测试环境信息
|
||||
|
||||
| 项目 | 值 |
|
||||
|------|-----|
|
||||
| 云服务器 IP | 43.129.27.210 |
|
||||
| Tailscale IP | 100.85.119.13 |
|
||||
| Windows 电脑 IP | 100.77.135.1 |
|
||||
| 服务端口 | 3001 |
|
||||
| 项目路径 | `/root/.openclaw/workspace/company-finance-frontend/` |
|
||||
| Vite 版本 | ^5.0.8 |
|
||||
| React 版本 | ^18.2.0 |
|
||||
| Ant Design 版本 | ^5.16.0 |
|
||||
|
||||
---
|
||||
|
||||
**报告生成时间**: 2026-03-09 19:10 UTC
|
||||
**下次测试建议**: 修复高优先级问题后重新测试
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>轻远电力老挝ERP - Qingyuan Power Laos</title>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+9138
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "company-finance-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.0",
|
||||
"antd": "^5.16.0",
|
||||
"axios": "^1.6.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"i18next": "^25.8.18",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^16.5.8",
|
||||
"react-query": "^3.39.3",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"zustand": "^4.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
||||
"@typescript-eslint/parser": "^6.14.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8",
|
||||
"vite-plugin-pwa": "^0.17.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,110 @@
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 响应式布局优化 */
|
||||
|
||||
/* 桌面端（> 768px） */
|
||||
@media screen and (min-width: 769px) {
|
||||
.ant-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 登录页面卡片 */
|
||||
.login-card {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（<= 768px） */
|
||||
@media screen and (max-width: 768px) {
|
||||
/* 隐藏桌面侧边栏 */
|
||||
.ant-layout-sider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 登录页面优化 */
|
||||
.login-card {
|
||||
max-width: 100%;
|
||||
margin: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 调整表单元素 */
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-btn {
|
||||
font-size: 16px; /* 防止iOS自动缩放 */
|
||||
}
|
||||
|
||||
/* 标题调整 */
|
||||
.ant-typography h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* 测试账户卡片 */
|
||||
.ant-card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕（<= 480px） */
|
||||
@media screen and (max-width: 480px) {
|
||||
.login-card {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ant-typography h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ant-space-vertical {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保移动端菜单正常显示 */
|
||||
.ant-drawer-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 移动端头部按钮 */
|
||||
.mobile-header-button {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react'
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// 样式导入
|
||||
import './App.css'
|
||||
|
||||
// 页面组件
|
||||
import LoginPage from './pages/auth/LoginPage'
|
||||
import DashboardPage from './pages/dashboard/DashboardPage'
|
||||
import ProjectsPage from './pages/projects/ProjectsPage'
|
||||
import ProjectDetail from './pages/projects/ProjectDetail'
|
||||
import AdvancesPage from './pages/advances/AdvancesPage'
|
||||
import ReimbursementsPage from './pages/reimbursements/ReimbursementsPage'
|
||||
import FinancePage from './pages/finance/FinancePage'
|
||||
import PaymentRequestsPage from './pages/PaymentRequestsPage'
|
||||
import VerificationPage from './pages/VerificationPage'
|
||||
import LayoutShowcase from './pages/LayoutShowcase'
|
||||
import ProcurementPage from './pages/ProcurementPage'
|
||||
import ExchangeRatePage from './pages/ExchangeRatePage'
|
||||
import SuppliersPage from './pages/SuppliersPage'
|
||||
import SupplierDetail from './pages/SupplierDetail'
|
||||
import ProductPage from './pages/ProductPage'
|
||||
import SubcontractorsPage from './pages/SubcontractorsPage'
|
||||
import SubcontractorDetail from './pages/SubcontractorDetail'
|
||||
import CustomersPage from './pages/CustomersPage'
|
||||
import CustomerDetail from './pages/CustomerDetail'
|
||||
import UsersPage from './pages/UsersPage'
|
||||
import RolesPage from './pages/RolesPage'
|
||||
import SystemLogsPage from './pages/SystemLogsPage'
|
||||
|
||||
import ApprovalManagement from './pages/approval/ApprovalManagement'
|
||||
import ExecutionManagement from './pages/approval/ExecutionManagement'
|
||||
import ReportsPage from './pages/reports/ReportsPage'
|
||||
|
||||
// 预算报价页面
|
||||
import BudgetProjectList from './pages/budget/BudgetProjectList'
|
||||
import BudgetProjectCreate from './pages/budget/BudgetProjectCreate'
|
||||
import BudgetProjectDetail from './pages/budget/BudgetProjectDetail'
|
||||
|
||||
// 施工管理页面
|
||||
import ConstructionList from './pages/construction'
|
||||
import ConstructionLog from './pages/construction/ConstructionLog'
|
||||
import ConstructionMilestones from './pages/construction/ConstructionMilestones'
|
||||
|
||||
// 后台管理
|
||||
import AdminLayout from './layouts/AdminLayout'
|
||||
import BackupPage from './pages/admin/BackupPage'
|
||||
import ProcessManagement from './pages/admin/ProcessManagement'
|
||||
import AboutPage from './pages/admin/AboutPage'
|
||||
|
||||
// 布局组件
|
||||
import MainLayout from './components/layout/MainLayout'
|
||||
|
||||
// 状态管理
|
||||
import { useAuthStore } from './store/authStore'
|
||||
import { useLanguageStore } from './store/languageStore'
|
||||
|
||||
// 路由守卫组件
|
||||
const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { isAuthenticated } = useAuthStore()
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function App() {
|
||||
const { currentLanguage, getLanguageInfo } = useLanguageStore()
|
||||
const languageInfo = getLanguageInfo()
|
||||
|
||||
const localeMap: Record<string, string> = {
|
||||
'zh-CN': 'zh-cn',
|
||||
'th-TH': 'th',
|
||||
'lo-LA': 'en',
|
||||
'en-US': 'en'
|
||||
}
|
||||
dayjs.locale(localeMap[currentLanguage] || 'zh-cn')
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
locale={languageInfo.antdLocale}
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
borderRadius: 6,
|
||||
colorLink: '#1890ff',
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: '#fff',
|
||||
headerPadding: '0 24px',
|
||||
},
|
||||
Menu: {},
|
||||
Card: {
|
||||
margin: 16,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
|
||||
{/* 前台路由 */}
|
||||
<Route path="/" element={<PrivateRoute><MainLayout /></PrivateRoute>}>
|
||||
<Route index element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="dashboard" element={<DashboardPage />} />
|
||||
<Route path="projects" element={<ProjectsPage />} />
|
||||
<Route path="projects/:id" element={<ProjectDetail />} />
|
||||
<Route path="budget-projects" element={<BudgetProjectList />} />
|
||||
<Route path="budget-projects/create" element={<BudgetProjectCreate />} />
|
||||
<Route path="budget-projects/:id" element={<BudgetProjectDetail />} />
|
||||
<Route path="construction" element={<ConstructionList />} />
|
||||
<Route path="construction/:id/logs" element={<ConstructionLog />} />
|
||||
<Route path="construction/:id/milestones" element={<ConstructionMilestones />} />
|
||||
<Route path="approval" element={<ApprovalManagement />} />
|
||||
<Route path="execution" element={<ExecutionManagement />} />
|
||||
<Route path="advances" element={<AdvancesPage />} />
|
||||
<Route path="reimbursements" element={<ReimbursementsPage />} />
|
||||
<Route path="finance" element={<FinancePage />} />
|
||||
<Route path="exchange-rates" element={<ExchangeRatePage />} />
|
||||
<Route path="reports" element={<ReportsPage />} />
|
||||
<Route path="payment-requests" element={<PaymentRequestsPage />} />
|
||||
<Route path="verification" element={<VerificationPage />} />
|
||||
<Route path="layout-showcase" element={<LayoutShowcase />} />
|
||||
<Route path="procurement" element={<ProcurementPage />} />
|
||||
<Route path="products" element={<ProductPage />} />
|
||||
<Route path="suppliers" element={<SuppliersPage />} />
|
||||
<Route path="suppliers/:id" element={<SupplierDetail />} />
|
||||
<Route path="subcontractors" element={<SubcontractorsPage />} />
|
||||
<Route path="subcontractors/:id" element={<SubcontractorDetail />} />
|
||||
<Route path="customers" element={<CustomersPage />} />
|
||||
<Route path="customers/:id" element={<CustomerDetail />} />
|
||||
</Route>
|
||||
|
||||
{/* 后台管理路由 */}
|
||||
<Route path="/admin" element={<PrivateRoute><AdminLayout /></PrivateRoute>}>
|
||||
<Route index element={<Navigate to="/admin/users" replace />} />
|
||||
<Route path="users" element={<UsersPage />} />
|
||||
<Route path="roles" element={<RolesPage />} />
|
||||
<Route path="process" element={<ProcessManagement />} />
|
||||
<Route path="logs" element={<SystemLogsPage />} />
|
||||
<Route path="backup" element={<BackupPage />} />
|
||||
<Route path="about" element={<AboutPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// 样式导入
|
||||
import './App.css'
|
||||
|
||||
// 页面组件
|
||||
import LoginPage from './pages/auth/LoginPage'
|
||||
import DashboardPage from './pages/dashboard/DashboardPage'
|
||||
import ProjectsPage from './pages/projects/ProjectsPage'
|
||||
import AdvancesPage from './pages/advances/AdvancesPage'
|
||||
import ReimbursementsPage from './pages/reimbursements/ReimbursementsPage'
|
||||
import FinancePage from './pages/finance/FinancePage'
|
||||
import ReportsPage from './pages/reports/ReportsPage'
|
||||
|
||||
// 布局组件
|
||||
import MainLayout from './components/layout/MainLayout'
|
||||
|
||||
// 状态管理
|
||||
import { useAuthStore } from './store/authStore'
|
||||
import { useLanguageStore } from './store/languageStore'
|
||||
|
||||
// 路由守卫组件
|
||||
const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { isAuthenticated } = useAuthStore()
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function App() {
|
||||
const { currentLanguage, getLanguageInfo } = useLanguageStore()
|
||||
const languageInfo = getLanguageInfo()
|
||||
|
||||
// 设置 dayjs 本地化
|
||||
const localeMap: Record<string, string> = {
|
||||
'zh-CN': 'zh-cn',
|
||||
'th-TH': 'th',
|
||||
'lo-LA': 'en',
|
||||
'en-US': 'en'
|
||||
}
|
||||
dayjs.locale(localeMap[currentLanguage] || 'zh-cn')
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
locale={languageInfo.antdLocale}
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
borderRadius: 6,
|
||||
colorLink: '#1890ff',
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: '#fff',
|
||||
headerPadding: '0 24px',
|
||||
},
|
||||
Menu: {},
|
||||
Card: {
|
||||
margin: 16,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/" element={<PrivateRoute><MainLayout /></PrivateRoute>}>
|
||||
<Route index element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="dashboard" element={<DashboardPage />} />
|
||||
<Route path="projects" element={<ProjectsPage />} />
|
||||
<Route path="advances" element={<AdvancesPage />} />
|
||||
<Route path="reimbursements" element={<ReimbursementsPage />} />
|
||||
<Route path="finance" element={<FinancePage />} />
|
||||
<Route path="reports" element={<ReportsPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,209 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Table, Button, Modal, Form, Input, Switch, message, Space, Tag, Popconfirm } from 'antd'
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, PhoneOutlined, UserOutlined } from '@ant-design/icons'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
interface Contact {
|
||||
id: number
|
||||
name: string
|
||||
name_zh?: string
|
||||
position?: string
|
||||
department?: string
|
||||
is_primary: boolean
|
||||
phone?: string
|
||||
mobile?: string
|
||||
wechat?: string
|
||||
whatsapp?: string
|
||||
line_id?: string
|
||||
notes?: string
|
||||
}
|
||||
|
||||
interface ContactManagerProps {
|
||||
companyType: 'customer' | 'supplier' | 'subcontractor'
|
||||
companyId: number
|
||||
companyName: string
|
||||
onContactsUpdated?: () => void
|
||||
}
|
||||
|
||||
const ContactManager: React.FC<ContactManagerProps> = ({
|
||||
companyType,
|
||||
companyId,
|
||||
companyName,
|
||||
onContactsUpdated
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [contacts, setContacts] = useState<Contact[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [modalVisible, setModalVisible] = useState(false)
|
||||
const [editingContact, setEditingContact] = useState<Contact | null>(null)
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const fetchContacts = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await fetch(`/api/${companyType}s/${companyId}/contacts`)
|
||||
const data = await response.json()
|
||||
setContacts(data.contacts || [])
|
||||
} catch (error) {
|
||||
console.error('获取联系人失败:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (companyId) {
|
||||
fetchContacts()
|
||||
}
|
||||
}, [companyId, companyType])
|
||||
|
||||
const columns: ColumnsType<Contact> = [
|
||||
{
|
||||
title: t('contact.name'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (text, record) => (
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold' }}>{text}</div>
|
||||
{record.position && <div style={{ fontSize: '12px', color: '#666' }}>{record.position}</div>}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: t('contact.contactInfo'),
|
||||
key: 'contact',
|
||||
render: (_, record) => (
|
||||
<Space direction="vertical" size={2}>
|
||||
{record.mobile && <div><PhoneOutlined style={{ marginRight: 4 }} />{record.mobile}</div>}
|
||||
{record.phone && <div style={{ fontSize: '12px', color: '#666' }}>电话: {record.phone}</div>}
|
||||
{record.wechat && <div style={{ fontSize: '12px', color: '#666' }}>微信: {record.wechat}</div>}
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: t('contact.status'),
|
||||
dataIndex: 'is_primary',
|
||||
key: 'is_primary',
|
||||
width: 100,
|
||||
render: (isPrimary) => (
|
||||
<Tag color={isPrimary ? 'green' : 'blue'}>
|
||||
{isPrimary ? t('contact.primary') : t('contact.secondary')}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: t('common.actions'),
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)} size="small" />
|
||||
<Popconfirm title={t('common.confirmDelete')} onConfirm={() => handleDelete(record.id)} okText={t('common.yes')} cancelText={t('common.no')}>
|
||||
<Button type="text" danger icon={<DeleteOutlined />} size="small" />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
try {
|
||||
const url = editingContact ? `/api/${companyType}s/${companyId}/contacts/${editingContact.id}` : `/api/${companyType}s/${companyId}/contacts`
|
||||
const method = editingContact ? 'PUT' : 'POST'
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...values, company_type: companyType, company_id: companyId })
|
||||
})
|
||||
if (response.ok) {
|
||||
message.success(editingContact ? t('common.updateSuccess') : t('common.createSuccess'))
|
||||
setModalVisible(false)
|
||||
form.resetFields()
|
||||
setEditingContact(null)
|
||||
fetchContacts()
|
||||
onContactsUpdated?.()
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(t('common.operationFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (contact: Contact) => {
|
||||
setEditingContact(contact)
|
||||
form.setFieldsValue(contact)
|
||||
setModalVisible(true)
|
||||
}
|
||||
|
||||
const handleDelete = async (contactId: number) => {
|
||||
try {
|
||||
await fetch(`/api/${companyType}s/${companyId}/contacts/${contactId}`, { method: 'DELETE' })
|
||||
message.success(t('common.deleteSuccess'))
|
||||
fetchContacts()
|
||||
onContactsUpdated?.()
|
||||
} catch (error) {
|
||||
message.error(t('common.deleteFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3>{t('contact.management')}</h3>
|
||||
<p style={{ color: '#666' }}>{companyName} - {t(`company.${companyType}`)}</p>
|
||||
</div>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => { setEditingContact(null); form.resetFields(); setModalVisible(true) }}>
|
||||
{t('contact.addContact')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Table columns={columns} dataSource={contacts} rowKey="id" loading={loading} pagination={{ pageSize: 10 }} size="middle" />
|
||||
|
||||
<Modal
|
||||
title={editingContact ? t('contact.editContact') : t('contact.addContact')}
|
||||
open={modalVisible}
|
||||
onCancel={() => { setModalVisible(false); form.resetFields(); setEditingContact(null) }}
|
||||
onOk={() => form.submit()}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSubmit} initialValues={{ is_primary: false }}>
|
||||
<Form.Item name="name" label={t('contact.name')} rules={[{ required: true }]}>
|
||||
<Input placeholder={t('contact.namePlaceholder')} />
|
||||
</Form.Item>
|
||||
<Form.Item name="position" label={t('contact.position')}>
|
||||
<Input placeholder={t('contact.positionPlaceholder')} />
|
||||
</Form.Item>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||
<Form.Item name="phone" label={t('contact.phone')}>
|
||||
<Input placeholder={t('contact.phonePlaceholder')} />
|
||||
</Form.Item>
|
||||
<Form.Item name="mobile" label={t('contact.mobile')}>
|
||||
<Input placeholder={t('contact.mobilePlaceholder')} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||
<Form.Item name="wechat" label={t('contact.wechat')}>
|
||||
<Input placeholder={t('contact.wechatPlaceholder')} />
|
||||
</Form.Item>
|
||||
<Form.Item name="line_id" label={t('contact.lineId')}>
|
||||
<Input placeholder={t('contact.lineIdPlaceholder')} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item name="whatsapp" label="WhatsApp">
|
||||
<Input placeholder="输入WhatsApp号码" />
|
||||
</Form.Item>
|
||||
<Form.Item name="is_primary" label={t('contact.primaryContact')} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="notes" label={t('contact.notes')}>
|
||||
<Input.TextArea rows={3} placeholder={t('contact.notesPlaceholder')} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactManager
|
||||
@@ -0,0 +1,175 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Upload, Modal, Image, message, Spin, Progress } from 'antd';
|
||||
import { PlusOutlined, FileOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
|
||||
|
||||
interface FileUploadProps {
|
||||
value?: string[];
|
||||
onChange?: (urls: string[]) => void;
|
||||
maxCount?: number;
|
||||
accept?: string;
|
||||
}
|
||||
|
||||
// 支持的图片格式
|
||||
const imageFormats = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
|
||||
const isImage = (url: string) => {
|
||||
const ext = url.split('.').pop()?.toLowerCase();
|
||||
return imageFormats.includes(ext || '');
|
||||
};
|
||||
|
||||
const FileUpload: React.FC<FileUploadProps> = ({
|
||||
value = [],
|
||||
onChange,
|
||||
maxCount = 9,
|
||||
accept = 'image/*'
|
||||
}) => {
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [previewImage, setPreviewImage] = useState('');
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
// 当 value 变化时，更新 fileList
|
||||
useEffect(() => {
|
||||
// 只有当 value 是数组且长度大于 0 时才更新 fileList
|
||||
// 这样可以避免在上传过程中被重置
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
const newFileList = value.map((url, index) => ({
|
||||
uid: `-${index}`,
|
||||
name: url.split('/').pop() || `file-${index}`,
|
||||
status: 'done',
|
||||
url,
|
||||
thumbUrl: isImage(url) ? url : undefined
|
||||
}));
|
||||
|
||||
setFileList(newFileList);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handlePreview = async (file: UploadFile) => {
|
||||
if (isImage(file.url || '')) {
|
||||
setPreviewImage(file.url || '');
|
||||
setPreviewOpen(true);
|
||||
} else {
|
||||
// 非图片文件，新窗口打开
|
||||
window.open(file.url, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange: UploadProps['onChange'] = (info) => {
|
||||
const { fileList } = info;
|
||||
setFileList(fileList);
|
||||
|
||||
// 提取已上传成功的URL
|
||||
console.log('FileUpload info:', info);
|
||||
console.log('FileUpload fileList:', fileList);
|
||||
|
||||
const urls = fileList
|
||||
.filter(file => {
|
||||
console.log('FileUpload file:', file);
|
||||
return file.status === 'done';
|
||||
})
|
||||
.map(file => {
|
||||
// 处理不同格式的文件对象
|
||||
if (file.url) {
|
||||
return file.url;
|
||||
} else if (file.response && file.response.url) {
|
||||
return file.response.url;
|
||||
} else if (file.response && typeof file.response === 'string') {
|
||||
return file.response;
|
||||
}
|
||||
return '';
|
||||
})
|
||||
.filter(url => url); // 过滤空字符串
|
||||
|
||||
console.log('FileUpload onChange:', urls);
|
||||
onChange?.(urls);
|
||||
};
|
||||
|
||||
const customRequest = async (options: any) => {
|
||||
const { file, onSuccess, onError, onProgress } = options;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
console.log('开始上传文件:', file.name);
|
||||
const res = await fetch('/api/upload/single', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
console.log('上传响应状态:', res.status);
|
||||
const data = await res.json();
|
||||
|
||||
console.log('上传响应数据:', data);
|
||||
|
||||
if (data.success) {
|
||||
onProgress({ percent: 100 });
|
||||
// 传递URL字符串，这是Ant Design Upload组件在customRequest中期望的格式
|
||||
onSuccess(data.data.url, file);
|
||||
message.success('上传成功');
|
||||
} else {
|
||||
onError(new Error(data.error));
|
||||
message.error(data.error || '上传失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传错误:', error);
|
||||
onError(error);
|
||||
message.error('上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>上传</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onPreview={handlePreview}
|
||||
onChange={handleChange}
|
||||
customRequest={customRequest}
|
||||
accept={accept}
|
||||
maxCount={maxCount}
|
||||
multiple
|
||||
>
|
||||
{fileList.length >= maxCount ? null : uploadButton}
|
||||
</Upload>
|
||||
|
||||
{/* 图片预览弹窗 */}
|
||||
<Modal
|
||||
open={previewOpen}
|
||||
title="图片预览"
|
||||
footer={null}
|
||||
onCancel={() => setPreviewOpen(false)}
|
||||
width="80%"
|
||||
centered
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={previewImage}
|
||||
style={{ maxWidth: '100%', maxHeight: '80vh' }}
|
||||
preview={false}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{uploading && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Spin size="small" /> 上传中...
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileUpload;
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from 'react'
|
||||
import { Space, Typography } from 'antd'
|
||||
import { ThunderboltOutlined } from '@ant-design/icons'
|
||||
|
||||
const { Text, Title } = Typography
|
||||
|
||||
interface CompanyLogoProps {
|
||||
showText?: boolean
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
}
|
||||
|
||||
const CompanyLogo: React.FC<CompanyLogoProps> = ({ showText = true, size = 'medium' }) => {
|
||||
const sizeMap = {
|
||||
small: { fontSize: 14, iconSize: 20 },
|
||||
medium: { fontSize: 16, iconSize: 28 },
|
||||
large: { fontSize: 20, iconSize: 36 }
|
||||
}
|
||||
|
||||
const { fontSize, iconSize } = sizeMap[size]
|
||||
|
||||
return (
|
||||
<Space align="center" style={{ cursor: 'pointer' }}>
|
||||
{/* 图标 */}
|
||||
<ThunderboltOutlined
|
||||
style={{
|
||||
fontSize: iconSize,
|
||||
color: '#1890ff',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 公司名称 */}
|
||||
{showText && (
|
||||
<div>
|
||||
<Title
|
||||
level={5}
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: fontSize,
|
||||
color: '#262626',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
轻远电力老挝ERP
|
||||
</Title>
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: fontSize - 4,
|
||||
display: 'block',
|
||||
marginTop: -2
|
||||
}}
|
||||
>
|
||||
Qingyuan Power Laos
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
export default CompanyLogo
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import { Select, Space } from 'antd'
|
||||
import { GlobalOutlined } from '@ant-design/icons'
|
||||
import { useLanguageStore } from '../../store/languageStore'
|
||||
import { languages } from '../../locales'
|
||||
|
||||
const { Option } = Select
|
||||
|
||||
interface LanguageSelectorProps {
|
||||
size?: 'small' | 'middle' | 'large'
|
||||
showIcon?: boolean
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
const LanguageSelector: React.FC<LanguageSelectorProps> = ({
|
||||
size = 'middle',
|
||||
showIcon = true,
|
||||
style
|
||||
}) => {
|
||||
const { currentLanguage, setLanguage } = useLanguageStore()
|
||||
|
||||
return (
|
||||
<Select
|
||||
value={currentLanguage}
|
||||
onChange={setLanguage}
|
||||
size={size}
|
||||
style={{ minWidth: 140, ...style }}
|
||||
suffixIcon={showIcon ? <GlobalOutlined /> : undefined}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<Option key={lang.code} value={lang.code}>
|
||||
<Space size={4}>
|
||||
<span>{lang.flag}</span>
|
||||
<span>{lang.nativeName}</span>
|
||||
</Space>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
||||
export default LanguageSelector
|
||||
@@ -0,0 +1,414 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
|
||||
import {
|
||||
Layout,
|
||||
Menu,
|
||||
Button,
|
||||
Avatar,
|
||||
Dropdown,
|
||||
Typography,
|
||||
Space,
|
||||
Badge,
|
||||
Drawer,
|
||||
Modal,
|
||||
theme
|
||||
} from 'antd'
|
||||
import {
|
||||
DashboardOutlined,
|
||||
ProjectOutlined,
|
||||
DollarOutlined,
|
||||
FileTextOutlined,
|
||||
BarChartOutlined,
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
SettingOutlined,
|
||||
BellOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
CalculatorOutlined,
|
||||
ToolOutlined,
|
||||
WalletOutlined,
|
||||
MoneyCollectOutlined,
|
||||
AuditOutlined,
|
||||
FileSearchOutlined,
|
||||
ShoppingCartOutlined,
|
||||
TeamOutlined,
|
||||
ShopOutlined,
|
||||
SolutionOutlined,
|
||||
HomeOutlined,
|
||||
SafetyOutlined,
|
||||
FileDoneOutlined,
|
||||
AppstoreOutlined,
|
||||
CheckCircleOutlined
|
||||
} from '@ant-design/icons'
|
||||
import { useAuthStore } from '../../store/authStore'
|
||||
import { useLanguageStore } from '../../store/languageStore'
|
||||
import CompanyLogo from '../common/CompanyLogo'
|
||||
import LanguageSelector from '../common/LanguageSelector'
|
||||
|
||||
const { Header, Sider, Content } = Layout
|
||||
const { Text } = Typography
|
||||
|
||||
const MainLayout: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
|
||||
const [settingsVisible, setSettingsVisible] = useState(false)
|
||||
const { user, logout } = useAuthStore()
|
||||
const { t } = useLanguageStore()
|
||||
|
||||
const {
|
||||
token: { colorBgContainer, borderRadiusLG },
|
||||
} = theme.useToken()
|
||||
|
||||
// 检测屏幕尺寸
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
const mobile = window.innerWidth <= 768
|
||||
setIsMobile(mobile)
|
||||
if (mobile) {
|
||||
setCollapsed(true)
|
||||
}
|
||||
}
|
||||
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
// 完整菜单项
|
||||
const menuItems = [
|
||||
{
|
||||
key: '/dashboard',
|
||||
icon: <DashboardOutlined />,
|
||||
label: '工作台'
|
||||
},
|
||||
{
|
||||
key: '/projects',
|
||||
icon: <ProjectOutlined />,
|
||||
label: '项目管理'
|
||||
},
|
||||
{
|
||||
key: '/budget-projects',
|
||||
icon: <CalculatorOutlined />,
|
||||
label: '预算报价'
|
||||
},
|
||||
{
|
||||
key: '/construction',
|
||||
icon: <ToolOutlined />,
|
||||
label: '施工管理'
|
||||
},
|
||||
{
|
||||
key: 'approval',
|
||||
icon: <SolutionOutlined />,
|
||||
label: '审批管理',
|
||||
children: [
|
||||
{
|
||||
key: '/approval',
|
||||
icon: <CheckCircleOutlined />,
|
||||
label: '待审批'
|
||||
},
|
||||
{
|
||||
key: '/execution',
|
||||
icon: <DollarOutlined />,
|
||||
label: '待执行'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'finance-docs',
|
||||
icon: <FileDoneOutlined />,
|
||||
label: '财务申请',
|
||||
children: [
|
||||
{
|
||||
key: '/advances',
|
||||
icon: <WalletOutlined />,
|
||||
label: '预支申请'
|
||||
},
|
||||
{
|
||||
key: '/reimbursements',
|
||||
icon: <FileTextOutlined />,
|
||||
label: '报销申请'
|
||||
},
|
||||
{
|
||||
key: '/payment-requests',
|
||||
icon: <MoneyCollectOutlined />,
|
||||
label: '付款申请'
|
||||
},
|
||||
{
|
||||
key: '/verification',
|
||||
icon: <AuditOutlined />,
|
||||
label: '核销申请'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'finance-group',
|
||||
icon: <BarChartOutlined />,
|
||||
label: '财务管理',
|
||||
children: [
|
||||
{
|
||||
key: '/finance',
|
||||
label: '财务概览'
|
||||
},
|
||||
{
|
||||
key: '/exchange-rates',
|
||||
icon: <DollarOutlined />,
|
||||
label: '汇率管理'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '/reports',
|
||||
icon: <FileSearchOutlined />,
|
||||
label: '报表分析'
|
||||
},
|
||||
{
|
||||
key: 'procurement',
|
||||
icon: <ShoppingCartOutlined />,
|
||||
label: '采购管理',
|
||||
children: [
|
||||
{
|
||||
key: '/products',
|
||||
icon: <AppstoreOutlined />,
|
||||
label: '商品管理'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'partners',
|
||||
icon: <TeamOutlined />,
|
||||
label: '合作伙伴',
|
||||
children: [
|
||||
{
|
||||
key: '/suppliers',
|
||||
icon: <ShopOutlined />,
|
||||
label: '供应商管理'
|
||||
},
|
||||
{
|
||||
key: '/subcontractors',
|
||||
icon: <SolutionOutlined />,
|
||||
label: '分包商管理'
|
||||
},
|
||||
{
|
||||
key: '/customers',
|
||||
icon: <HomeOutlined />,
|
||||
label: '客户管理'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 用户下拉菜单
|
||||
const userMenuItems = [
|
||||
{
|
||||
key: 'profile',
|
||||
icon: <UserOutlined />,
|
||||
label: '个人信息'
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
icon: <SettingOutlined />,
|
||||
label: '系统设置'
|
||||
},
|
||||
{
|
||||
type: 'divider' as const
|
||||
},
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
label: '退出登录'
|
||||
}
|
||||
]
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
if (key === 'logout') {
|
||||
logout()
|
||||
navigate('/login')
|
||||
} else if (key === 'settings') {
|
||||
setSettingsVisible(true)
|
||||
} else if (key.startsWith('/')) {
|
||||
navigate(key)
|
||||
if (isMobile) {
|
||||
setMobileMenuVisible(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前选中的菜单项
|
||||
const getSelectedKey = () => {
|
||||
return location.pathname
|
||||
}
|
||||
|
||||
// 获取当前展开的菜单项
|
||||
const getOpenKeys = () => {
|
||||
const path = location.pathname
|
||||
if (path.startsWith('/suppliers') ||
|
||||
path.startsWith('/subcontractors') ||
|
||||
path.startsWith('/customers')) {
|
||||
return ['partners']
|
||||
}
|
||||
if (path.startsWith('/advances') ||
|
||||
path.startsWith('/reimbursements') ||
|
||||
path.startsWith('/payment-requests') ||
|
||||
path.startsWith('/verification')) {
|
||||
return ['finance-docs']
|
||||
}
|
||||
if (path.startsWith('/approval') || path.startsWith('/execution')) {
|
||||
return ['approval']
|
||||
}
|
||||
if (path.startsWith('/products')) {
|
||||
return ['procurement']
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
{/* 桌面端侧边栏 */}
|
||||
{!isMobile && (
|
||||
<Sider
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
height: '100vh',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
background: colorBgContainer,
|
||||
borderRight: '1px solid #f0f0f0'
|
||||
}}
|
||||
width={220}
|
||||
collapsedWidth={80}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div style={{
|
||||
height: 64,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
padding: collapsed ? 0 : '0 20px',
|
||||
borderBottom: '1px solid #f0f0f0'
|
||||
}}>
|
||||
<CompanyLogo collapsed={collapsed} />
|
||||
</div>
|
||||
|
||||
{/* 菜单 */}
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[getSelectedKey()]}
|
||||
defaultOpenKeys={getOpenKeys()}
|
||||
items={menuItems}
|
||||
onClick={handleMenuClick}
|
||||
style={{ borderRight: 0 }}
|
||||
/>
|
||||
|
||||
{/* 折叠按钮 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
padding: 16,
|
||||
borderTop: '1px solid #f0f0f0'
|
||||
}}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{!collapsed && '收起菜单'}
|
||||
</Button>
|
||||
</div>
|
||||
</Sider>
|
||||
)}
|
||||
|
||||
{/* 移动端抽屉菜单 */}
|
||||
{isMobile && (
|
||||
<Drawer
|
||||
placement="left"
|
||||
onClose={() => setMobileMenuVisible(false)}
|
||||
open={mobileMenuVisible}
|
||||
width={280}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<div style={{ height: 64, padding: '0 20px', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
|
||||
<CompanyLogo collapsed={false} />
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[getSelectedKey()]}
|
||||
defaultOpenKeys={getOpenKeys()}
|
||||
items={menuItems}
|
||||
onClick={handleMenuClick}
|
||||
style={{ borderRight: 0 }}
|
||||
/>
|
||||
</Drawer>
|
||||
)}
|
||||
|
||||
<Layout style={{ marginLeft: isMobile ? 0 : (collapsed ? 80 : 220), transition: 'margin-left 0.2s' }}>
|
||||
{/* 顶部导航 */}
|
||||
<Header style={{
|
||||
padding: '0 24px',
|
||||
background: colorBgContainer,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
{/* 移动端菜单按钮 */}
|
||||
{isMobile && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MenuFoldOutlined />}
|
||||
onClick={() => setMobileMenuVisible(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
<Space size="middle">
|
||||
<LanguageSelector />
|
||||
|
||||
<Dropdown menu={{ items: userMenuItems, onClick: handleMenuClick }} placement="bottomRight">
|
||||
<Space style={{ cursor: 'pointer' }}>
|
||||
<Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
|
||||
{!isMobile && <Text>{user?.name || user?.username || '用户'}</Text>}
|
||||
</Space>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Header>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<Content style={{
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: '#f5f5f5'
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
|
||||
{/* 设置弹窗 */}
|
||||
<Modal
|
||||
title="系统设置"
|
||||
open={settingsVisible}
|
||||
onCancel={() => setSettingsVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<p>系统设置功能开发中...</p>
|
||||
</Modal>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainLayout
|
||||
@@ -0,0 +1,27 @@
|
||||
// API配置
|
||||
export const API_CONFIG = {
|
||||
baseURL: '/api',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
|
||||
// API端点
|
||||
export const API_ENDPOINTS = {
|
||||
auth: {
|
||||
login: '/auth/login',
|
||||
logout: '/auth/logout',
|
||||
me: '/auth/me',
|
||||
},
|
||||
products: '/products',
|
||||
customers: '/customers',
|
||||
suppliers: '/suppliers',
|
||||
advances: '/advances',
|
||||
reimbursements: '/reimbursements',
|
||||
projects: '/projects',
|
||||
paymentNodes: '/payment-nodes',
|
||||
paymentRecords: '/payment-records',
|
||||
exchangeRates: '/exchange-rates',
|
||||
financeStats: '/finance-stats',
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* 公司财务系统 - 全局样式 */
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
background-color: #f0f2f5;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import { Outlet, Navigate, useLocation } from 'react-router-dom';
|
||||
import { Layout, Menu } from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
SafetyOutlined,
|
||||
FileTextOutlined,
|
||||
DatabaseOutlined,
|
||||
InfoCircleOutlined,
|
||||
ArrowLeftOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: '/admin/users',
|
||||
icon: <UserOutlined />,
|
||||
label: '用户管理'
|
||||
},
|
||||
{
|
||||
key: '/admin/roles',
|
||||
icon: <SafetyOutlined />,
|
||||
label: '角色权限'
|
||||
},
|
||||
{
|
||||
key: '/admin/process',
|
||||
icon: <SettingOutlined />,
|
||||
label: '流程管理'
|
||||
},
|
||||
{
|
||||
key: '/admin/logs',
|
||||
icon: <FileTextOutlined />,
|
||||
label: '系统日志'
|
||||
},
|
||||
{
|
||||
key: '/admin/backup',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: '数据备份'
|
||||
},
|
||||
{
|
||||
key: '/admin/about',
|
||||
icon: <InfoCircleOutlined />,
|
||||
label: '关于系统'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
width={220}
|
||||
theme="light"
|
||||
style={{
|
||||
borderRight: '1px solid #f0f0f0',
|
||||
background: '#fff'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: 64,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
background: '#1890ff',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16
|
||||
}}>
|
||||
系统后台管理
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[location.pathname]}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => navigate(key)}
|
||||
style={{ borderRight: 0 }}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
width: '100%',
|
||||
padding: '0 16px'
|
||||
}}>
|
||||
<div
|
||||
onClick={() => navigate('/dashboard')}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
color: '#1890ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined /> 返回前台
|
||||
</div>
|
||||
</div>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Content style={{
|
||||
margin: 0,
|
||||
background: '#f5f5f5',
|
||||
minHeight: '100vh'
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminLayout;
|
||||
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
// Common
|
||||
common: {
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel',
|
||||
save: 'Save',
|
||||
delete: 'Delete',
|
||||
edit: 'Edit',
|
||||
add: 'Add',
|
||||
search: 'Search',
|
||||
reset: 'Reset',
|
||||
submit: 'Submit',
|
||||
back: 'Back',
|
||||
loading: 'Loading...',
|
||||
success: 'Operation successful',
|
||||
failed: 'Operation failed',
|
||||
required: 'This field is required'
|
||||
},
|
||||
|
||||
// Login
|
||||
login: {
|
||||
title: 'Qingyuan Power Laos ERP',
|
||||
subtitle: 'Project Management and Finance Platform',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
loginButton: 'Login',
|
||||
usernamePlaceholder: 'Please enter username',
|
||||
passwordPlaceholder: 'Please enter password',
|
||||
usernameRequired: 'Please enter username',
|
||||
passwordRequired: 'Please enter password',
|
||||
usernameMin: 'Username must be at least 3 characters',
|
||||
passwordMin: 'Password must be at least 6 characters',
|
||||
loginFailed: 'Login failed, please try again',
|
||||
testAccounts: 'Test Accounts',
|
||||
techSupport: 'Technical Support: OpenClaw AI + React + Node.js',
|
||||
selectLanguage: 'Select Language'
|
||||
},
|
||||
|
||||
// Menu
|
||||
menu: {
|
||||
dashboard: 'Dashboard',
|
||||
projects: 'Project Management',
|
||||
advances: 'Advance Management',
|
||||
reimbursements: 'Reimbursement Management',
|
||||
finance: 'Finance Management',
|
||||
reports: 'Reports',
|
||||
settings: 'System Settings'
|
||||
},
|
||||
|
||||
// User
|
||||
user: {
|
||||
profile: 'Profile',
|
||||
settings: 'System Settings',
|
||||
logout: 'Logout',
|
||||
admin: 'System Administrator',
|
||||
finance: 'Finance Specialist',
|
||||
manager: 'Project Manager',
|
||||
employee: 'Employee'
|
||||
},
|
||||
|
||||
// Features
|
||||
features: {
|
||||
projectManage: 'Project Management: Create, track, and analyze project progress',
|
||||
advanceManage: 'Advance Management: Application and approval process',
|
||||
reimburseManage: 'Reimbursement Management: Expense claim process',
|
||||
financeReport: 'Financial Reports: Project cost and profit analysis',
|
||||
mobileSupport: 'Mobile Support: PWA technology, add to home screen'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import thTH from 'antd/locale/th_TH'
|
||||
import enUS from 'antd/locale/en_US'
|
||||
|
||||
export type LanguageCode = 'zh-CN' | 'th-TH' | 'lo-LA' | 'en-US'
|
||||
|
||||
export interface Language {
|
||||
code: LanguageCode
|
||||
name: string
|
||||
nativeName: string
|
||||
flag: string
|
||||
antdLocale: any
|
||||
}
|
||||
|
||||
export const languages: Language[] = [
|
||||
{
|
||||
code: 'zh-CN',
|
||||
name: '中文简体',
|
||||
nativeName: '中文简体',
|
||||
flag: '🇨🇳',
|
||||
antdLocale: zhCN
|
||||
},
|
||||
{
|
||||
code: 'th-TH',
|
||||
name: '泰语',
|
||||
nativeName: 'ไทย',
|
||||
flag: '🇹🇭',
|
||||
antdLocale: thTH
|
||||
},
|
||||
{
|
||||
code: 'lo-LA',
|
||||
name: '老挝语',
|
||||
nativeName: 'ລາວ',
|
||||
flag: '🇱🇦',
|
||||
antdLocale: enUS // Antd没有老挝语，用英语fallback
|
||||
},
|
||||
{
|
||||
code: 'en-US',
|
||||
name: '英语',
|
||||
nativeName: 'English',
|
||||
flag: '🇺🇸',
|
||||
antdLocale: enUS
|
||||
}
|
||||
]
|
||||
|
||||
export const translations = {
|
||||
'zh-CN': zhCNTranslation,
|
||||
'th-TH': thTHTranslation,
|
||||
'lo-LA': loLATranslation,
|
||||
'en-US': enUSTranslation
|
||||
}
|
||||
|
||||
export const getLanguage = (code: LanguageCode): Language => {
|
||||
return languages.find(lang => lang.code === code) || languages[0]
|
||||
}
|
||||
|
||||
export const getTranslation = (code: LanguageCode) => {
|
||||
return translations[code] || translations['zh-CN']
|
||||
}
|
||||
|
||||
// 导入翻译文件
|
||||
import zhCNTranslation from './zh-CN'
|
||||
import thTHTranslation from './th-TH'
|
||||
import loLATranslation from './lo-LA'
|
||||
import enUSTranslation from './en-US'
|
||||
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
// ທົ່ວໄປ
|
||||
common: {
|
||||
confirm: 'ຢືນຢັນ',
|
||||
cancel: 'ຍົກເລີກ',
|
||||
save: 'ບັນທຶກ',
|
||||
delete: 'ລຶບ',
|
||||
edit: 'ແກ້ໄຂ',
|
||||
add: 'ເພີ່ມ',
|
||||
search: 'ຄົ້ນຫາ',
|
||||
reset: 'ຣີເຊັດ',
|
||||
submit: 'ສົ່ງ',
|
||||
back: 'ກັບຄືນ',
|
||||
loading: 'ກຳລັງໂຫລດ...',
|
||||
success: 'ດຳເນີນການສຳເລັດ',
|
||||
failed: 'ດຳເນີນການລົ້ມເຫລວ',
|
||||
required: 'ຈຳເປັນຕ້ອງປ້ອນ'
|
||||
},
|
||||
|
||||
// ໜ້າລັອກອິນ
|
||||
login: {
|
||||
title: 'Qingyuan Power Laos ERP',
|
||||
subtitle: 'ແພລດຟອມຈັດການໂຄງການ ແລະ ການເງິນ',
|
||||
username: 'ຊື່ຜູ້ໃຊ້',
|
||||
password: 'ລະຫັດຜ່ານ',
|
||||
loginButton: 'ເຂົ້າສູ່ລະບົບ',
|
||||
usernamePlaceholder: 'ກະລຸນາປ້ອນຊື່ຜູ້ໃຊ້',
|
||||
passwordPlaceholder: 'ກະລຸນາປ້ອນລະຫັດຜ່ານ',
|
||||
usernameRequired: 'ກະລຸນາປ້ອນຊື່ຜູ້ໃຊ້',
|
||||
passwordRequired: 'ກະລຸນາປ້ອນລະຫັດຜ່ານ',
|
||||
usernameMin: 'ຊື່ຜູ້ໃຊ້ຕ້ອງມີຢ່າງໜ້ອຍ 3 ຕົວອັກສອນ',
|
||||
passwordMin: 'ລະຫັດຜ່ານຕ້ອງມີຢ່າງໜ້ອຍ 6 ຕົວອັກສອນ',
|
||||
loginFailed: 'ການເຂົ້າສູ່ລະບົບລົ້ມເຫລວ ກະລຸນາລອງອີກຄັ້ງ',
|
||||
testAccounts: 'ບັນຊີທົດສອບ',
|
||||
techSupport: 'ການສະໜັບສະໜູນເຕັກນິກ: OpenClaw AI + React + Node.js',
|
||||
selectLanguage: 'ເລືອກພາສາ'
|
||||
},
|
||||
|
||||
// ເມນູ
|
||||
menu: {
|
||||
dashboard: 'ແດຊບອດ',
|
||||
projects: 'ຈັດການໂຄງການ',
|
||||
advances: 'ຈັດການເງິນທືນ',
|
||||
reimbursements: 'ຈັດການເບີກຈ່າຍ',
|
||||
finance: 'ຈັດການການເງິນ',
|
||||
reports: 'ລາຍງານ',
|
||||
settings: 'ຕັ້ງຄ່າລະບົບ'
|
||||
},
|
||||
|
||||
// ຜູ້ໃຊ້
|
||||
user: {
|
||||
profile: 'ຂໍ້ມູນສ່ວນຕົວ',
|
||||
settings: 'ຕັ້ງຄ່າລະບົບ',
|
||||
logout: 'ອອກຈາກລະບົບ',
|
||||
admin: 'ຜູ້ບໍລິຫານລະບົບ',
|
||||
finance: 'ເຈົ້າໜ້າທີ່ການເງິນ',
|
||||
manager: 'ຜູ້ຈັດການໂຄງການ',
|
||||
employee: 'ພະນັກງານ'
|
||||
},
|
||||
|
||||
// ຄຸນສົມບັດລະບົບ
|
||||
features: {
|
||||
projectManage: 'ຈັດການໂຄງການ: ສ້າງ ຕິດຕາມ ແລະ ວິເຄາະຄວາມຄືບໜ້າ',
|
||||
advanceManage: 'ຈັດການເງິນທືນ: ຂະບວນການຂໍ ແລະ ອະນຸມັດ',
|
||||
reimburseManage: 'ຈັດການເບີກຈ່າຍ: ຂະບວນການເບີກຄ່າໃຊ້ຈ່າຍ',
|
||||
financeReport: 'ລາຍງານການເງິນ: ວິເຄາະຕົ້ນທຶນ ແລະ ກຳໄລໂຄງການ',
|
||||
mobileSupport: 'ຮອງຮັບມືຖື: ເຕັກໂນໂລຊີ PWA ສາມາດເພີ່ມໃສ່ໜ້າຈໍຫຼັກ'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
// Common
|
||||
common: {
|
||||
confirm: 'ยืนยัน',
|
||||
cancel: 'ยกเลิก',
|
||||
save: 'บันทึก',
|
||||
delete: 'ลบ',
|
||||
edit: 'แก้ไข',
|
||||
add: 'เพิ่ม',
|
||||
search: 'ค้นหา',
|
||||
reset: 'รีเซ็ต',
|
||||
submit: 'ส่ง',
|
||||
back: 'กลับ',
|
||||
loading: 'กำลังโหลด...',
|
||||
success: 'ดำเนินการสำเร็จ',
|
||||
failed: 'ดำเนินการล้มเหลว',
|
||||
required: 'จำเป็นต้องกรอก'
|
||||
},
|
||||
|
||||
// Login
|
||||
login: {
|
||||
title: 'Qingyuan Power Laos ERP',
|
||||
subtitle: 'แพลตฟอร์มการจัดการโครงการและการเงิน',
|
||||
username: 'ชื่อผู้ใช้',
|
||||
password: 'รหัสผ่าน',
|
||||
loginButton: 'เข้าสู่ระบบ',
|
||||
usernamePlaceholder: 'กรุณากรอกชื่อผู้ใช้',
|
||||
passwordPlaceholder: 'กรุณากรอกรหัสผ่าน',
|
||||
usernameRequired: 'กรุณากรอกชื่อผู้ใช้',
|
||||
passwordRequired: 'กรุณากรอกรหัสผ่าน',
|
||||
usernameMin: 'ชื่อผู้ใช้ต้องมีอย่างน้อย 3 ตัวอักษร',
|
||||
passwordMin: 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร',
|
||||
loginFailed: 'การเข้าสู่ระบบล้มเหลว กรุณาลองอีกครั้ง',
|
||||
testAccounts: 'บัญชีทดสอบ',
|
||||
techSupport: 'การสนับสนุนด้านเทคนิค: OpenClaw AI + React + Node.js',
|
||||
selectLanguage: 'เลือกภาษา'
|
||||
},
|
||||
|
||||
// Menu
|
||||
menu: {
|
||||
dashboard: 'แดชบอร์ด',
|
||||
projects: 'การจัดการโครงการ',
|
||||
advances: 'การจัดการเงินทดรอง',
|
||||
reimbursements: 'การจัดการเบิกเงิน',
|
||||
finance: 'การจัดการการเงิน',
|
||||
reports: 'รายงาน',
|
||||
settings: 'การตั้งค่าระบบ'
|
||||
},
|
||||
|
||||
// User
|
||||
user: {
|
||||
profile: 'ข้อมูลส่วนตัว',
|
||||
settings: 'การตั้งค่าระบบ',
|
||||
logout: 'ออกจากระบบ',
|
||||
admin: 'ผู้ดูแลระบบ',
|
||||
finance: 'เจ้าหน้าที่การเงิน',
|
||||
manager: 'ผู้จัดการโครงการ',
|
||||
employee: 'พนักงาน'
|
||||
},
|
||||
|
||||
// Features
|
||||
features: {
|
||||
projectManage: 'การจัดการโครงการ: สร้าง ติดตาม และวิเคราะห์ความคืบหน้า',
|
||||
advanceManage: 'การจัดการเงินทดรอง: กระบวนการขอและอนุมัติ',
|
||||
reimburseManage: 'การจัดการเบิกเงิน: กระบวนการเบิกค่าใช้จ่าย',
|
||||
financeReport: 'รายงานการเงิน: วิเคราะห์ต้นทุนและกำไรโครงการ',
|
||||
mobileSupport: 'รองรับมือถือ: เทคโนโลยี PWA สามารถเพิ่มในหน้าจอหลัก'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
// 通用
|
||||
common: {
|
||||
confirm: '确认',
|
||||
cancel: '取消',
|
||||
save: '保存',
|
||||
delete: '删除',
|
||||
edit: '编辑',
|
||||
add: '添加',
|
||||
search: '搜索',
|
||||
reset: '重置',
|
||||
submit: '提交',
|
||||
back: '返回',
|
||||
loading: '加载中...',
|
||||
success: '操作成功',
|
||||
failed: '操作失败',
|
||||
required: '此项为必填'
|
||||
},
|
||||
|
||||
// 登录页
|
||||
login: {
|
||||
title: '轻远电力老挝ERP',
|
||||
subtitle: '项目管理与财务报销一体化平台',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
loginButton: '登录',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码',
|
||||
usernameRequired: '请输入用户名',
|
||||
passwordRequired: '请输入密码',
|
||||
usernameMin: '用户名至少3个字符',
|
||||
passwordMin: '密码至少6个字符',
|
||||
loginFailed: '登录失败，请重试',
|
||||
testAccounts: '测试账户',
|
||||
techSupport: '技术支持：OpenClaw AI助手 + React + Node.js',
|
||||
selectLanguage: '选择语言'
|
||||
},
|
||||
|
||||
// 菜单
|
||||
menu: {
|
||||
dashboard: '仪表板',
|
||||
projects: '项目管理',
|
||||
advances: '预支管理',
|
||||
reimbursements: '报销管理',
|
||||
finance: '财务管理',
|
||||
reports: '报表分析',
|
||||
settings: '系统设置'
|
||||
},
|
||||
|
||||
// 用户
|
||||
user: {
|
||||
profile: '个人资料',
|
||||
settings: '系统设置',
|
||||
logout: '退出登录',
|
||||
admin: '系统管理员',
|
||||
finance: '财务专员',
|
||||
manager: '项目经理',
|
||||
employee: '普通员工'
|
||||
},
|
||||
|
||||
// 系统功能
|
||||
features: {
|
||||
projectManage: '项目管理：创建、跟踪、分析项目进度',
|
||||
advanceManage: '预支管理：员工预支申请与审批流程',
|
||||
reimburseManage: '报销管理：费用报销与核销流程',
|
||||
financeReport: '财务报表：项目成本利润分析',
|
||||
mobileSupport: '移动端支持：PWA技术，可添加到主屏幕'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,283 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Card, Descriptions, Tag, Spin, Empty, Row, Col, Statistic, Table, Button, Divider, Typography, Badge
|
||||
} from 'antd'
|
||||
import {
|
||||
ArrowLeftOutlined, HomeOutlined, FileTextOutlined, DollarOutlined, UserOutlined, PhoneOutlined
|
||||
} from '@ant-design/icons'
|
||||
import axios from 'axios'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
interface Contact {
|
||||
name: string
|
||||
position: string
|
||||
phone: string
|
||||
is_primary?: boolean
|
||||
}
|
||||
|
||||
interface Customer {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
address: string
|
||||
contacts: Contact[]
|
||||
remark: string
|
||||
total_contract_amount: number
|
||||
total_received: number
|
||||
total_receivable: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: number
|
||||
project_code: string
|
||||
name: string
|
||||
contract_amount: string
|
||||
status: string
|
||||
customer_id: number
|
||||
}
|
||||
|
||||
interface PaymentNode {
|
||||
id: number
|
||||
project_id: number
|
||||
amount: number
|
||||
paid_amount: number
|
||||
}
|
||||
|
||||
interface Quotation {
|
||||
id: number
|
||||
version: number
|
||||
quotation_date: string
|
||||
amount: number
|
||||
currency: string
|
||||
status: string
|
||||
file_url?: string
|
||||
remark?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface BudgetProject {
|
||||
id: number
|
||||
name: string
|
||||
customer_id: number
|
||||
customer_name: string
|
||||
manager_id: number
|
||||
manager_name: string
|
||||
location?: string
|
||||
survey_date?: string
|
||||
intermediary?: string
|
||||
intermediary_fee_type?: string
|
||||
intermediary_fee_value?: number
|
||||
customer_requirements?: string
|
||||
project_overview?: string
|
||||
attachments?: string[]
|
||||
survey_photos?: string[]
|
||||
status: string
|
||||
days_in_status: number
|
||||
created_at: string
|
||||
quotations: Quotation[]
|
||||
}
|
||||
|
||||
const CustomerDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const [customer, setCustomer] = useState<Customer | null>(null)
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [paymentNodes, setPaymentNodes] = useState<PaymentNode[]>([])
|
||||
const [budgetProjects, setBudgetProjects] = useState<BudgetProject[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomerDetail()
|
||||
fetchRelatedProjects()
|
||||
fetchRelatedBudgetProjects()
|
||||
}, [id])
|
||||
|
||||
const fetchCustomerDetail = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/customers/${id}`)
|
||||
const data = await res.json()
|
||||
if (data.success) setCustomer(data.data)
|
||||
} catch (error) {
|
||||
console.error('获取客户详情失败:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchRelatedProjects = async () => {
|
||||
try {
|
||||
// 获取所有项目，筛选关联到此客户的
|
||||
const res = await fetch('/api/projects')
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
const customerProjects = (data.data || []).filter((p: Project) => p.customer_id === parseInt(id))
|
||||
setProjects(customerProjects)
|
||||
|
||||
// 获取所有付款节点
|
||||
const nodesRes = await fetch('/api/payment-nodes')
|
||||
const nodesData = await nodesRes.json()
|
||||
if (nodesData.success) {
|
||||
setPaymentNodes(nodesData.data || [])
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchRelatedBudgetProjects = async () => {
|
||||
try {
|
||||
// 获取与当前客户关联的预算项目
|
||||
const res = await axios.get('/api/budget-projects', {
|
||||
params: { customer_id: id }
|
||||
})
|
||||
if (res.data.success) {
|
||||
setBudgetProjects(res.data.data || [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预算项目失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <Spin style={{ display: 'flex', justifyContent: 'center', padding: 50 }} />
|
||||
if (!customer) return <Empty description="客户不存在" style={{ marginTop: 100 }} />
|
||||
|
||||
// 计算财务数据
|
||||
const totalContract = projects.reduce((sum, p) => sum + (parseFloat(p.contract_amount) || 0), 0)
|
||||
// 从付款节点计算已收金额
|
||||
const projectIds = projects.map(p => p.id)
|
||||
const relatedNodes = paymentNodes.filter(n => projectIds.includes(n.project_id))
|
||||
const totalReceived = relatedNodes.reduce((sum, n) => sum + (n.paid_amount || 0), 0)
|
||||
const totalReceivable = relatedNodes.reduce((sum, n) => sum + ((n.amount || 0) - (n.paid_amount || 0)), 0)
|
||||
|
||||
const projectColumns = [
|
||||
{ title: '项目编号', dataIndex: 'project_code', key: 'project_code', width: 120 },
|
||||
{ title: '项目名称', dataIndex: 'name', key: 'name', render: (v: string) => <Text strong>{v}</Text> },
|
||||
{ title: '合同金额', dataIndex: 'contract_amount', key: 'contract_amount', align: 'right' as const, render: (v: string) => `¥${(parseFloat(v) || 0).toLocaleString()}` },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', align: 'center' as const, render: (v: string) => <Badge status={v === 'completed' ? 'success' : 'processing'} text={v === 'completed' ? '已完成' : v === 'planning' ? '规划中' : v === 'in_progress' ? '进行中' : v} /> }
|
||||
]
|
||||
|
||||
const budgetProjectColumns = [
|
||||
{ title: '项目名称', dataIndex: 'name', key: 'name', render: (v: string, record: BudgetProject) => (
|
||||
<Text strong onClick={() => navigate(`/budget-projects/${record.id}`)} style={{ cursor: 'pointer', color: '#1890ff' }}>
|
||||
{v}
|
||||
</Text>
|
||||
) },
|
||||
{ title: '业务经理', dataIndex: 'manager_name', key: 'manager_name' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', align: 'center' as const, render: (v: string) => {
|
||||
const statusMap: Record<string, { status: 'success' | 'processing' | 'error' | 'default'; text: string }> = {
|
||||
negotiating: { status: 'processing', text: '商谈中' },
|
||||
signed: { status: 'success', text: '已签约' },
|
||||
unsigned: { status: 'error', text: '未签约' }
|
||||
}
|
||||
const config = statusMap[v] || { status: 'default', text: v }
|
||||
return <Badge status={config.status} text={config.text} />
|
||||
} },
|
||||
{ title: '报价版本数', dataIndex: 'quotations', key: 'quotations', align: 'center' as const, render: (quotations: Quotation[]) => (quotations || []).length },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v.split('T')[0] }
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{ padding: '16px', maxWidth: 1200, margin: '0 auto' }}>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/customers')} style={{ marginBottom: 16 }} type="text">
|
||||
返回列表
|
||||
</Button>
|
||||
|
||||
<Title level={4} style={{ marginBottom: 24 }}>
|
||||
<HomeOutlined style={{ marginRight: 8, color: '#52c41a' }} />
|
||||
{customer.name}
|
||||
</Title>
|
||||
|
||||
{/* ========== 卡片1：基本信息 ========== */}
|
||||
<Card title={<><UserOutlined /> 基本信息</>} style={{ marginBottom: 24, borderRadius: 8 }} headStyle={{ background: '#f5f5f5', fontWeight: 600 }}>
|
||||
<Descriptions bordered column={{ xs: 1, sm: 2 }} size="small">
|
||||
<Descriptions.Item label="编号">{customer.code}</Descriptions.Item>
|
||||
<Descriptions.Item label="地址">{customer.address || '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
{customer.remark && (
|
||||
<>
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
<div><Text type="secondary">备注：</Text><div style={{ marginTop: 8, padding: 12, background: '#fafafa', borderRadius: 4 }}>{customer.remark}</div></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
<div style={{ marginBottom: 8 }}><Text type="secondary"><PhoneOutlined style={{ marginRight: 4 }} />联系人</Text></div>
|
||||
<Row gutter={[16, 16]}>
|
||||
{(customer.contacts || []).map((contact, i) => (
|
||||
<Col key={i} xs={24} sm={12} lg={8}>
|
||||
<Card size="small" style={{ borderLeft: contact.is_primary ? '3px solid #52c41a' : '3px solid #d9d9d9', background: contact.is_primary ? '#f6ffed' : '#fff' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||||
<Text strong>{contact.name || '未命名'}</Text>
|
||||
{contact.is_primary && <Tag color="green" size="small">主联系人</Tag>}
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: 13 }}>
|
||||
{contact.position && <div>职位：{contact.position}</div>}
|
||||
{contact.phone && <div>电话：{contact.phone}</div>}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
{(customer.contacts || []).length === 0 && <Empty description="暂无联系人" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
||||
</Card>
|
||||
|
||||
{/* ========== 卡片2：关联项目 ========== */}
|
||||
<Card title={<><FileTextOutlined /> 关联项目 ({projects.length}个)</>} style={{ marginBottom: 24, borderRadius: 8 }} headStyle={{ background: '#f5f5f5', fontWeight: 600 }}>
|
||||
{projects.length > 0 ? (
|
||||
<Table columns={projectColumns} dataSource={projects} rowKey="id" size="small" pagination={false} bordered />
|
||||
) : (
|
||||
<Empty description="暂无关联项目（在项目管理中选择此客户后会自动显示）" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* ========== 卡片4：关联预算项目 ========== */}
|
||||
<Card title={<><DollarOutlined /> 关联预算项目 ({budgetProjects.length}个)</>} style={{ marginBottom: 24, borderRadius: 8 }} headStyle={{ background: '#f5f5f5', fontWeight: 600 }}>
|
||||
{budgetProjects.length > 0 ? (
|
||||
<Table columns={budgetProjectColumns} dataSource={budgetProjects} rowKey="id" size="small" pagination={false} bordered />
|
||||
) : (
|
||||
<Empty description="暂无关联预算项目（在预算报价管理中选择此客户后会自动显示）" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* ========== 卡片3：财务信息 ========== */}
|
||||
<Card title={<><DollarOutlined /> 财务信息</>} style={{ borderRadius: 8 }} headStyle={{ background: '#f5f5f5', fontWeight: 600 }}>
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={12} lg={6}>
|
||||
<Card size="small" style={{ textAlign: 'center', background: '#e6f7ff', border: '1px solid #91d5ff' }}>
|
||||
<Statistic title="合同总金额" value={totalContract} prefix="¥" valueStyle={{ color: '#1890ff', fontSize: 20 }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} lg={6}>
|
||||
<Card size="small" style={{ textAlign: 'center', background: '#f6ffed', border: '1px solid #b7eb8f' }}>
|
||||
<Statistic title="已收总金额" value={totalReceived} prefix="¥" valueStyle={{ color: '#52c41a', fontSize: 20 }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} lg={6}>
|
||||
<Card size="small" style={{ textAlign: 'center', background: '#fff2f0', border: '1px solid #ffccc7' }}>
|
||||
<Statistic title="应收总金额" value={totalReceivable} prefix="¥" valueStyle={{ color: '#ff4d4f', fontSize: 20 }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} lg={6}>
|
||||
<Card size="small" style={{ textAlign: 'center', background: '#fffbe6', border: '1px solid #ffe58f' }}>
|
||||
<Statistic title="未结金额" value={totalReceivable} prefix="¥" valueStyle={{ color: '#faad14', fontSize: 20 }} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
<div style={{ marginBottom: 16 }}><Text type="secondary">项目明细</Text></div>
|
||||
{projects.length > 0 ? (
|
||||
<Table columns={projectColumns} dataSource={projects} rowKey="id" size="small" pagination={false} bordered />
|
||||
) : (
|
||||
<Empty description="暂无财务数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerDetail
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user