CURD 概览

配置化的增删改查方案，通过声明式配置快速搭建「搜索 + 表格 + 弹窗表单」页面。在线演示

模块

模块	说明	文档
PageSearch	搜索表单，提供条件筛选	查看
PageContent	数据表格，展示列表数据	查看
PageModal	弹窗表单，处理新增和编辑	查看
usePage	组合式函数，统一管理状态和事件	查看

使用方式

<template>
  <div class="app-container">
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />

    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @add-click="handleAddClick"
      @operate-click="handleOperateClick"
    >
      <template #status="scope">
        <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
          {{ scope.row.status == 1 ? "启用" : "禁用" }}
        </el-tag>
      </template>
    </page-content>

    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick" />
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick" />
  </div>
</template>

<script setup lang="ts">
import UserAPI from "@/api/system/user";
import type {
  IContentConfig,
  IModalConfig,
  IOperateData,
  ISearchConfig,
} from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";

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

const handleOperateClick = (data: IOperateData) => {
  switch (data.name) {
    case "view":
      handleViewClick(data.row);
      break;
    case "edit":
      handleEditClick(data.row);
      break;
  }
};

const searchConfig: ISearchConfig = { /* ... */ };
const contentConfig: IContentConfig = { /* ... */ };
const addModalConfig: IModalConfig = { /* ... */ };
const editModalConfig: IModalConfig = { /* ... */ };
</script>