这段代码是一个使用装饰器实现的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接口的异常处理完备。