161 lines
4.2 KiB
Markdown
161 lines
4.2 KiB
Markdown
这段代码是一个使用装饰器实现的Vue表格组件配置类，主要用于管理系统中的通知（Notice）数据的增删改查操作。以下是对代码的详细分析：
|
||
|
||
### 1. 核心功能
|
||
- **数据展示**：通过装饰器配置表格列和搜索表单
|
||
- **CRUD操作**：实现通知的创建、读取、更新、删除功能
|
||
- **表单验证**：内置字段验证规则
|
||
- **权限控制**：支持动态显示操作按钮
|
||
- **API集成**：与后端接口对接
|
||
|
||
### 2. 主要装饰器解析
|
||
|
||
#### 2.1 字段装饰器
|
||
```typescript
|
||
@tcpd({ "lang": "", "def": "消息", minWidth: 120 })
|
||
@tfcpd({ "lang": "", "def": "消息", fieldType: "string", rule: [{ "type": "require", message: "不能为空" }] })
|
||
message: string = ""
|
||
```
|
||
- `@tcpd`：配置表格列属性
|
||
- minWidth：最小列宽
|
||
- def：列显示名称
|
||
- `@tfcpd`：配置表单字段属性
|
||
- fieldType：字段类型
|
||
- rule：验证规则
|
||
|
||
#### 2.2 方法装饰器
|
||
```typescript
|
||
@tcmd({
|
||
"key": "table:toolbar",
|
||
"value": {
|
||
"type": "添加",
|
||
"priority": 1,
|
||
"es": "onAfter",
|
||
"dialogContent": UmTableForm,
|
||
"dialogTitle": "增加",
|
||
"dialogWidth": 650
|
||
}
|
||
})
|
||
onAdd = async (data: any) => { ... }
|
||
```
|
||
- `@tcmd`：配置表格操作
|
||
- type：操作类型（添加/编辑/删除）
|
||
- dialogContent：使用的表单组件
|
||
- dialogWidth：对话框宽度
|
||
- sort：操作按钮排序
|
||
|
||
### 3. 核心方法说明
|
||
|
||
#### 3.1 数据获取
|
||
```typescript
|
||
@tcmd({ "key": "table:searchFormMethod", "value": { "type": "getList", "es": "onAfter" } })
|
||
getList = async (params: any) => {
|
||
return await api.getNoticeList(params);
|
||
}
|
||
```
|
||
- 通过API获取通知列表
|
||
- 装饰器配置为搜索表单的后置方法
|
||
|
||
#### 3.2 新增操作
|
||
```typescript
|
||
onAdd = async (data: any) => {
|
||
const { code, msg } = await api.addNotice({ ...data, userId: Notice.userId });
|
||
return { code: code === 0 ? 0 : 1, message: msg };
|
||
}
|
||
```
|
||
- 提交新增请求
|
||
- 自动附加用户ID
|
||
- 返回操作结果
|
||
|
||
#### 3.3 编辑操作
|
||
```typescript
|
||
@tcmd({ "value": { "type": "edit", "es": "onBefore", ... } })
|
||
getDetail = async (rowId: number) => {
|
||
const { data } = await api.getNotice({ id: rowId });
|
||
return data;
|
||
}
|
||
|
||
@tcmd({ "value": { "type": "edit", "es": "onAfter", ... } })
|
||
onEdit = async (params: any) => {
|
||
const { code, msg } = await api.updateNotice({ ...params, userId: Notice.userId });
|
||
return { code: code === 0 ? 0 : 1, message: msg };
|
||
}
|
||
```
|
||
- 分两个阶段处理：
|
||
1. getDetail：编辑前获取详情数据
|
||
2. onEdit：提交编辑请求
|
||
|
||
#### 3.4 删除操作
|
||
```typescript
|
||
@tcmd({
|
||
"value": {
|
||
"type": "del",
|
||
"es": "onAfter",
|
||
"dialogContent": "确定要删除该条数据吗？"
|
||
}
|
||
})
|
||
delByIds = async (rowId: number) => {
|
||
const { code, msg } = await api.deleteNotice({ ids: [rowId] });
|
||
return { code: code === 0 ? 0 : 1, message: msg };
|
||
}
|
||
```
|
||
- 删除前弹出确认对话框
|
||
- 支持批量删除（当前实现为单条删除）
|
||
|
||
### 4. 特色功能实现
|
||
|
||
#### 4.1 动态显示控制
|
||
```typescript
|
||
isShow = (rowData: any) => {
|
||
return rowData?.source_add_type == "1";
|
||
}
|
||
```
|
||
- 通过判断数据字段决定是否显示操作按钮
|
||
|
||
#### 4.2 用户上下文
|
||
```typescript
|
||
static userId: any;
|
||
```
|
||
- 通过静态属性存储当前用户ID
|
||
- 在提交操作时自动附加到请求参数
|
||
|
||
### 5. 使用建议
|
||
|
||
1. **用户ID设置**：
|
||
```typescript
|
||
// 在使用前设置当前用户ID
|
||
Notice.userId = store.getters.userId;
|
||
```
|
||
|
||
2. **自定义操作扩展**：
|
||
```typescript
|
||
@tcmd({
|
||
"value": {
|
||
"id": 1,
|
||
"type": "customOperateEvent",
|
||
"title": "详情",
|
||
isShow: (row) => row.status === 1
|
||
}
|
||
})
|
||
customAction = (rowId: number) => {
|
||
router.push(`/detail/${rowId}`);
|
||
}
|
||
```
|
||
|
||
3. **表单验证增强**：
|
||
```typescript
|
||
@tfcpd({
|
||
fieldType: "number",
|
||
rule: [
|
||
{ type: "require", message: "不能为空" },
|
||
{ validator: (v) => v > 0, message: "必须大于0" }
|
||
]
|
||
})
|
||
sort: number = 1;
|
||
```
|
||
|
||
4. **国际化支持**：
|
||
```typescript
|
||
@tcpd({ lang: "notice.message", def: "消息" })
|
||
```
|
||
|
||
该设计通过装饰器实现了高度可配置的表格组件，建议结合具体业务需求扩展装饰器配置，并确保API接口的异常处理完备。 |