funjia-admin-viewmodel-template/doc.md

这段代码是一个使用装饰器实现的Vue表格组件配置类，主要用于管理系统中的通知（Notice）数据的增删改查操作。以下是对代码的详细分析：

1. 核心功能

• 数据展示：通过装饰器配置表格列和搜索表单
• CRUD操作：实现通知的创建、读取、更新、删除功能
• 表单验证：内置字段验证规则
• 权限控制：支持动态显示操作按钮
• API集成：与后端接口对接

2. 主要装饰器解析

2.1 字段装饰器

@tcpd({ "lang": "", "def": "消息", minWidth: 120 })
@tfcpd({ "lang": "", "def": "消息", fieldType: "string", rule: [{ "type": "require", message: "不能为空" }] })
message: string = ""

• @tcpd：配置表格列属性
  • minWidth：最小列宽
  • def：列显示名称
• @tfcpd：配置表单字段属性
  • fieldType：字段类型
  • rule：验证规则

2.2 方法装饰器

@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 数据获取

@tcmd({ "key": "table:searchFormMethod", "value": { "type": "getList", "es": "onAfter" } })
getList = async (params: any) => {
    return await api.getNoticeList(params);
}

• 通过API获取通知列表
• 装饰器配置为搜索表单的后置方法

3.2 新增操作

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 编辑操作

@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 删除操作

@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 动态显示控制

isShow = (rowData: any) => {
    return rowData?.source_add_type == "1";
}

• 通过判断数据字段决定是否显示操作按钮

4.2 用户上下文

static userId: any;

• 通过静态属性存储当前用户ID
• 在提交操作时自动附加到请求参数

5. 使用建议

1. 用户ID设置：

// 在使用前设置当前用户ID
Notice.userId = store.getters.userId;

2. 自定义操作扩展：

@tcmd({
    "value": {
        "id": 1,
        "type": "customOperateEvent",
        "title": "详情",
        isShow: (row) => row.status === 1
    }
})
customAction = (rowId: number) => {
    router.push(`/detail/${rowId}`);
}

3. 表单验证增强：

@tfcpd({
    fieldType: "number",
    rule: [
        { type: "require", message: "不能为空" },
        { validator: (v) => v > 0, message: "必须大于0" }
    ]
})
sort: number = 1;

4. 国际化支持：

@tcpd({ lang: "notice.message", def: "消息" })

该设计通过装饰器实现了高度可配置的表格组件，建议结合具体业务需求扩展装饰器配置，并确保API接口的异常处理完备。