CURD 进阶

CURD 的高阶用法：usePage 核心 API 与自定义扩展。

usePage API

usePage 是 CURD 的核心组合式函数，返回组件 ref 和事件处理方法。

返回值	说明
searchRef	PageSearch 实例引用
contentRef	PageContent 实例引用
addModalRef	新增弹窗实例引用
editModalRef	编辑弹窗实例引用
handleQueryClick	查询：获取筛选条件并刷新列表
handleResetClick	重置：清空条件并刷新列表
handleAddClick	打开新增弹窗
handleEditClick(row, fetchFn?)	打开编辑弹窗并加载数据
handleViewClick(row, fetchFn?)	打开查看弹窗（只读模式）
handleSubmitClick	提交后刷新列表
handleExportClick	根据查询条件导出数据
handleSearchClick	切换搜索区域显隐
handleFilterChange	列筛选变化时刷新列表

const {
  searchRef,
  contentRef,
  addModalRef,
  editModalRef,
  handleQueryClick,
  handleResetClick,
  handleAddClick,
  handleEditClick,
  handleViewClick,
  handleSubmitClick,
  handleExportClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

导入导出

后端导入导出

const contentConfig: IContentConfig = reactive({
  toolbar: ["import", "export"],
  exportAction: UserAPI.export,
  importAction: (file: File) => UserAPI.import("1", file),
  importTemplate: UserAPI.downloadTemplate,
});

前端导入导出

不依赖后端接口，前端直接处理数据：

const contentConfig: IContentConfig = reactive({
  defaultToolbar: ["imports", "exports"],
  importsAction: (data: any[]) => {
    console.log("导入的数据", data);
    return Promise.resolve();
  },
  exportsAction: async (params: any) => {
    const res = await UserAPI.getPage(params);
    return res.list;
  },
});

动态表单

通过 hidden 函数根据表单数据动态显隐表单项：

{
  label: "指定用户",
  prop: "targetUserIds",
  type: "select",
  hidden: (formData) => formData.targetType !== 2,
  attrs: { multiple: true },
}

联动效果

通过 events.onChange 监听变化并联动加载选项：

{
  label: "省份",
  prop: "province",
  type: "select",
  options: provinceArr,
  events: {
    change: (value: any) => {
      formData.city = "";
      loadCities(value);
    },
  },
}

响应式布局

表单项通过 col 属性适配不同屏幕：

{
  label: "用户名",
  prop: "username",
  type: "input",
  col: {
    xs: 24,  // 手机端占满整行
    sm: 12,  // 平板占半行
    md: 8,   // 桌面占三分之一
    lg: 6,   // 大屏占四分之一
  },
}

操作列按钮

条件显示

operat: [
  {
    name: "reset_pwd",
    text: "重置密码",
    attrs: { icon: "refresh-left" },
    show: (row) => row.status === 1,
  },
  "edit",
  "delete",
]

查看/编辑切换

const handleOperateClick = (data: IOperateData) => {
  if (data.name === "detail") {
    editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
    handleViewClick(data.row, () => UserAPI.getFormData(data.row.id));
  } else if (data.name === "edit") {
    editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
    handleEditClick(data.row, () => UserAPI.getFormData(data.row.id));
  }
};

共享选项数据

多个配置共用同一份选项数据：

const deptArr = ref<OptionType[]>([]);
const roleArr = ref<OptionType[]>([]);

onMounted(async () => {
  const [dept, roles] = await Promise.all([
    DeptAPI.getOptions(),
    RoleAPI.getOptions(),
  ]);
  deptArr.value = dept;
  roleArr.value = roles;
});

配置要点

pk 字段用于删除和编辑，必须正确配置；配置对象用 reactive 包裹；按钮权限基于 permPrefix:操作名 格式（如 sys:user:create）。