You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
JDAirPort.Ems.UI/README-清空功能快速应用.md

149 lines
4.6 KiB
Markdown

# 一键全部清空功能 - 超简化版本
## 🎯 设计理念
**后端只有一个通用接口**,通过业务模块标识匹配表名,前端配置极简。
## 🔧 后端架构(已完成)
### 核心组件
-`CommonClearController` - 通用清空控制器
-`CommonClearService` - 通用清空服务
-`CommonClearMapper` - 通用清空数据访问层
### 安全措施
1. **白名单机制** - 只允许清空预定义的表
2. **表名验证** - 正则校验防止SQL注入
3. **权限检查** - 动态权限验证
4. **SQL关键字过滤** - 防止恶意攻击
5. **长度限制** - 表名长度控制
6. **操作日志** - 完整的审计日志
## 🚀 前端快速集成3步完成
### 步骤1添加按钮导入按钮后
```vue
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
@click="handleClearAll"
v-hasPermi="['你的权限:remove']"
>一键全部清空</el-button>
</el-col>
```
### 步骤2导入mixin
```javascript
import clearAllMixin from "@/mixins/clearAllMixin";
export default {
name: "YourComponent",
mixins: [clearAllMixin],
// ... 其他代码
}
```
### 步骤3配置模块信息created钩子中
```javascript
created() {
// 其他代码...
// 配置清空功能仅需3个参数
this.clearAllConfig = {
moduleKey: '模块标识', // 见下方支持的模块列表
entityName: '显示名称', // 如:'日常故障记录'
permission: '权限标识' // 如:'ems/info:dailyFaultRecord:remove'
};
}
```
## 📋 支持的模块列表(后端已配置)
| 模块标识 | 实体名称 | 权限标识 |
|---------|---------|---------|
| `dailyFaultRecord` | 日常故障记录 | `ems/info:dailyFaultRecord:remove` |
| `faultHandlingRecord` | 故障处置记录 | `ems/info:faultHandlingRecord:remove` |
| `plcBufferBatteryLifecycle` | PLC缓冲电池生命周期 | `ems/info:plcBufferBatteryLifecycle:remove` |
| `securityDoorBatteryLifecycle` | 安全门电池生命周期 | `ems/info:securityDoorBatteryLifecycle:remove` |
| `upsBatteryLifecycle` | UPS电池生命周期 | `ems/info:upsBatteryLifecycle:remove` |
| `sparePartsInventory` | 备件库记录 | `ems/info:sparePartsInventory:remove` |
| `sparePartsUsageRecord` | 备件领用记录 | `ems/info:sparePartsUsageRecord:remove` |
| `sparePartsRegistration` | 废旧备件登记 | `ems/info:sparePartsRegistration:remove` |
| `supervisionChecklist` | 监督检查清单 | `ems/info:supervisionChecklist:remove` |
| `sparePartsInventoryCheck` | 备件盘点记录 | `ems/info:sparePartsInventoryCheck:remove` |
## 💡 实际应用示例
### 日常故障记录页面(已完成)
```vue
<!-- 1. 添加按钮 -->
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete"
size="mini" @click="handleClearAll"
v-hasPermi="['ems/info:dailyFaultRecord:remove']">
一键全部清空
</el-button>
</el-col>
<script>
// 2. 导入mixin
import clearAllMixin from "@/mixins/clearAllMixin";
export default {
mixins: [clearAllMixin],
created() {
// 3. 配置模块
this.clearAllConfig = {
moduleKey: 'dailyFaultRecord',
entityName: '日常故障记录',
permission: 'ems/info:dailyFaultRecord:remove'
};
}
}
</script>
```
### 故障处置记录页面(示例)
```javascript
// 只需要修改配置
this.clearAllConfig = {
moduleKey: 'faultHandlingRecord',
entityName: '故障处置记录',
permission: 'ems/info:faultHandlingRecord:remove'
};
```
## ⚡ 添加新模块支持
如需要支持新模块,只需要在后端 `CommonClearController` 的白名单中添加:
```java
put("新模块标识", new TableInfo("数据库表名", "显示名称", "权限标识"));
```
## 🛡️ 安全特性
1. **三次确认机制** - 确保用户真的要执行操作
2. **白名单限制** - 只能清空预定义的表
3. **权限验证** - 检查用户权限
4. **SQL安全** - 防止注入攻击
5. **操作审计** - 记录所有操作日志
## 📈 开发效率对比
| 方案 | 后端代码量 | 前端集成步骤 | 新增模块成本 |
|-----|-----------|-------------|-------------|
| 原方案 | 每模块5个文件 | 8步 | 高 |
| **新方案** | **1个通用接口** | **3步** | **极低** |
## 🎉 总结
- **后端**:一次开发,永久使用
- **前端**:复制粘贴,秒级集成
- **维护**:集中管理,安全可控
- **扩展**:新增模块只需添加一行配置
现在为任何页面添加清空功能只需要3步2分钟搞定