From a08d84166bee67df6e6436b0258cfa2596bc36f1 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Fri, 26 Apr 2024 16:39:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=A2=9E=E5=8A=A0CURD?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8C=96=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue  | 320 ++++++++++++++++++++++++++
 src/components/PageModal/index.vue    | 128 +++++++++++
 src/components/PageSearch/index.vue   |  97 ++++++++
 src/router/index.ts                   |  17 ++
 src/views/demo/curd/config/add.ts     | 145 ++++++++++++
 src/views/demo/curd/config/content.ts |  95 ++++++++
 src/views/demo/curd/config/edit.ts    | 146 ++++++++++++
 src/views/demo/curd/config/search.ts  |  50 ++++
 src/views/demo/curd/index.vue         | 107 +++++++++
 9 files changed, 1105 insertions(+)
 create mode 100644 src/components/PageContent/index.vue
 create mode 100644 src/components/PageModal/index.vue
 create mode 100644 src/components/PageSearch/index.vue
 create mode 100644 src/views/demo/curd/config/add.ts
 create mode 100644 src/views/demo/curd/config/content.ts
 create mode 100644 src/views/demo/curd/config/edit.ts
 create mode 100644 src/views/demo/curd/config/search.ts
 create mode 100644 src/views/demo/curd/index.vue

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
new file mode 100644
index 00000000..bfe6faae
--- /dev/null
+++ b/src/components/PageContent/index.vue
@@ -0,0 +1,320 @@
+<template>
+  <el-card shadow="never" class="table-container">
+    <template #header>
+      <!-- 表格左上方工具栏 -->
+      <template v-for="item in contentConfig.toolbar" :key="item">
+        <template v-if="typeof item === 'string'">
+          <!-- 刷新 -->
+          <template v-if="item === 'refresh'">
+            <el-button
+              type="info"
+              icon="refresh"
+              @click="handleToolbar(item)"
+            />
+          </template>
+          <!-- 新增 -->
+          <template v-else-if="item === 'add'">
+            <el-button
+              v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+              type="success"
+              icon="plus"
+              @click="handleToolbar(item)"
+            >
+              新增
+            </el-button>
+          </template>
+          <!-- 删除 -->
+          <template v-else-if="item === 'delete'">
+            <el-button
+              v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+              type="danger"
+              icon="delete"
+              :disabled="removeIds.length === 0"
+              @click="handleToolbar(item)"
+            >
+              删除
+            </el-button>
+          </template>
+          <!-- 导出 -->
+          <template v-else-if="item === 'export'">
+            <el-button
+              v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+              type="primary"
+              icon="download"
+              @click="handleToolbar(item)"
+            >
+              导出
+            </el-button>
+          </template>
+        </template>
+        <!-- 其他 -->
+        <template v-else-if="typeof item === 'object'">
+          <template v-if="item.auth">
+            <el-button
+              v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+              :icon="item.icon"
+              type="default"
+              @click="handleToolbar(item.name)"
+            >
+              {{ item.text }}
+            </el-button>
+          </template>
+          <template v-else>
+            <el-button
+              :icon="item.icon"
+              type="default"
+              @click="handleToolbar(item.name)"
+            >
+              {{ item.text }}
+            </el-button>
+          </template>
+        </template>
+      </template>
+    </template>
+    <!-- 列表 -->
+    <el-table
+      v-loading="loading"
+      :data="pageData"
+      :border="true"
+      :highlight-current-row="true"
+      @selection-change="handleSelectionChange"
+    >
+      <template v-for="col in contentConfig.cols" :key="col.prop">
+        <!-- 列操作栏 -->
+        <template v-if="col.templet === 'tool'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              <template v-for="item in col.operat" :key="item">
+                <template v-if="typeof item === 'string'">
+                  <!-- 编辑/删除 -->
+                  <template v-if="item === 'edit' || item === 'delete'">
+                    <el-button
+                      v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                      :type="item === 'edit' ? 'primary' : 'danger'"
+                      :icon="item"
+                      size="small"
+                      link
+                      @click="
+                        handleOperat({
+                          name: item,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ item === "edit" ? "编辑" : "删除" }}
+                    </el-button>
+                  </template>
+                </template>
+                <!-- 其他 -->
+                <template v-else-if="typeof item === 'object'">
+                  <template v-if="item.auth">
+                    <el-button
+                      v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+                      :icon="item.icon"
+                      type="primary"
+                      size="small"
+                      link
+                      @click="
+                        handleOperat({
+                          name: item.name,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ item.text }}
+                    </el-button>
+                  </template>
+                  <template v-else>
+                    <el-button
+                      :icon="item.icon"
+                      type="primary"
+                      size="small"
+                      link
+                      @click="
+                        handleOperat({
+                          name: item.name,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ item.text }}
+                    </el-button>
+                  </template>
+                </template>
+              </template>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 自定义 -->
+        <template v-else-if="col.templet === 'custom'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              <slot
+                :name="col.slotName ?? col.prop"
+                :prop="col.prop"
+                v-bind="scope"
+              ></slot>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 其他 -->
+        <template v-else>
+          <el-table-column v-bind="col" />
+        </template>
+      </template>
+    </el-table>
+    <!-- 分页 -->
+    <pagination
+      v-if="total > 0"
+      v-model:total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="handlePagination"
+    />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+// 定义接收的属性
+interface IOperatData {
+  name: string;
+  row: any;
+  column: any;
+  $index: number;
+}
+const props = defineProps<{
+  contentConfig: {
+    pageName: string;
+    indexAction: (data: any) => Promise<any>;
+    deleteAction: (data: any) => Promise<any>;
+    pk?: string;
+    toolbar: any[];
+    cols: any[];
+  };
+}>();
+// 定义自定义事件
+const emit = defineEmits<{
+  addClick: [];
+  exportClick: [];
+  toolbarClick: [name: string];
+  editClick: [id: number];
+  operatClick: [data: IOperatData];
+}>();
+// 暴露的属性和方法
+defineExpose({ fetchPageData });
+
+// 主键
+const pk = props.contentConfig.pk ?? "id";
+// 加载状态
+const loading = ref(false);
+// 删除ID集合 用于批量删除
+const removeIds = ref([]);
+// 数据总数
+const total = ref(0);
+// 列表数据
+const pageData = ref([]);
+// 每页条数
+const pageSize = 1;
+// 搜索参数
+const queryParams = reactive<any>({
+  pageNum: 1,
+  pageSize: pageSize,
+});
+// 上一次搜索条件
+let lastFormData = {};
+// 获取分页数据
+function fetchPageData(formData: any = {}, isRestart = false) {
+  loading.value = true;
+  lastFormData = formData;
+  if (isRestart) {
+    queryParams.pageNum = 1;
+    queryParams.pageSize = pageSize;
+  }
+  props.contentConfig
+    .indexAction({ ...queryParams, ...formData })
+    .then((res: any) => {
+      total.value = res.total;
+      pageData.value = res.list;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+fetchPageData();
+
+// 行选中
+function handleSelectionChange(selection: any) {
+  removeIds.value = selection.map((item: any) => item[pk]);
+}
+// 刷新
+function handleRefresh() {
+  fetchPageData({}, true);
+}
+// 删除
+function handleDelete(id?: number | string) {
+  const ids = [id || removeIds.value].join(",");
+  if (!ids) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    props.contentConfig.deleteAction(ids).then(() => {
+      ElMessage.success("删除成功");
+      handleRefresh();
+    });
+  });
+}
+// 分页
+function handlePagination() {
+  fetchPageData(lastFormData);
+}
+// 操作栏
+function handleToolbar(name: string) {
+  switch (name) {
+    case "refresh":
+      handleRefresh();
+      break;
+    case "add":
+      emit("addClick");
+      break;
+    case "delete":
+      handleDelete();
+      break;
+    case "export":
+      emit("exportClick");
+      break;
+    default:
+      emit("toolbarClick", name);
+      break;
+  }
+}
+// 操作列
+function handleOperat(data: IOperatData) {
+  switch (data.name) {
+    case "edit":
+      emit("editClick", data.row);
+      break;
+    case "delete":
+      handleDelete(data.row[pk]);
+      break;
+    default:
+      emit("operatClick", data);
+      break;
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/PageModal/index.vue b/src/components/PageModal/index.vue
new file mode 100644
index 00000000..1890af16
--- /dev/null
+++ b/src/components/PageModal/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    v-bind="modalConfig.dialog"
+    @close="closeDialog"
+  >
+    <!-- 表单 -->
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="modalConfig.formRules"
+      label-width="80px"
+    >
+      <template v-for="item in modalConfig.formItems" :key="item.prop">
+        <el-form-item :label="item.label" :prop="item.prop">
+          <!-- Select 选择器 -->
+          <template v-if="item.type === 'select'">
+            <el-select v-model="formData[item.prop]" v-bind="item.attrs">
+              <template v-for="option in item.options" :key="option.value">
+                <el-option :label="option.label" :value="option.value" />
+              </template>
+            </el-select>
+          </template>
+          <!-- Radio 单选框 -->
+          <template v-else-if="item.type === 'radio'">
+            <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
+              <template v-for="option in item.options" :key="option.value">
+                <el-radio :label="option.label" :value="option.value" />
+              </template>
+            </el-radio-group>
+          </template>
+          <!-- TreeSelect 树形选择 -->
+          <template v-else-if="item.type === 'tree-select'">
+            <el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
+          </template>
+          <!-- DatePicker 日期选择器 -->
+          <template v-else-if="item.type === 'date-picker'">
+            <el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
+          </template>
+          <!-- 自定义 -->
+          <template v-else-if="item.type === 'custom'">
+            <slot
+              :name="item.slotName ?? item.prop"
+              :prop="item.prop"
+              v-bind="item.attrs"
+            ></slot>
+          </template>
+          <!-- Input 输入框 -->
+          <template v-else>
+            <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+          </template>
+        </el-form-item>
+      </template>
+    </el-form>
+    <!-- 弹窗底部操作按钮 -->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="closeDialog">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+import type { FormRules, ElForm } from "element-plus";
+
+// 定义接收的属性/自定义事件
+const props = defineProps<{
+  modalConfig: {
+    dialog: any;
+    pageName?: string;
+    formAction: (data: any) => Promise<any>;
+    formItems: Array<{
+      type: string;
+      label: string;
+      prop: string;
+      attrs?: any;
+      initialValue?: any;
+      options?: { label: string; value: any }[];
+      slotName?: string;
+    }>;
+    formRules: FormRules;
+  };
+}>();
+const emit = defineEmits<{
+  submitClick: [];
+}>();
+
+const dialogVisible = ref(false);
+const formRef = ref<InstanceType<typeof ElForm>>();
+const formData = reactive<any>({});
+// 初始化
+function setModalVisible(initData: any = {}) {
+  dialogVisible.value = true;
+  for (const item of props.modalConfig.formItems) {
+    formData[item.prop] = initData[item.prop] ?? item.initialValue ?? "";
+  }
+}
+// 表单提交
+const handleSubmit = useThrottleFn(() => {
+  formRef.value?.validate((valid: any) => {
+    if (valid) {
+      props.modalConfig.formAction(formData).then(() => {
+        ElMessage.success(
+          props.modalConfig.dialog.title
+            ? `${props.modalConfig.dialog.title}成功`
+            : "操作成功"
+        );
+        emit("submitClick");
+        closeDialog();
+      });
+    }
+  });
+}, 3000);
+// 关闭弹窗
+function closeDialog() {
+  dialogVisible.value = false;
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+}
+// 暴露的属性和方法
+defineExpose({ setModalVisible });
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue
new file mode 100644
index 00000000..1010f2b7
--- /dev/null
+++ b/src/components/PageSearch/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <template v-for="item in searchConfig.formItems" :key="item.prop">
+        <el-form-item :label="item.label" :prop="item.prop">
+          <!-- Select 选择器 -->
+          <template v-if="item.type === 'select'">
+            <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
+              <template v-for="option in item.options" :key="option.value">
+                <el-option :label="option.label" :value="option.value" />
+              </template>
+            </el-select>
+          </template>
+          <!-- DatePicker 日期选择器 -->
+          <template v-else-if="item.type === 'date-picker'">
+            <el-date-picker
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+            />
+          </template>
+          <!-- Input 输入框 -->
+          <template v-else>
+            <el-input
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+              @keyup.enter="handleQuery"
+            />
+          </template>
+        </el-form-item>
+      </template>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">
+          <i-ep-search />搜索
+        </el-button>
+        <el-button @click="handleReset"><i-ep-refresh />重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import type { ElForm } from "element-plus";
+
+// 定义接收的属性/自定义事件
+interface IProps {
+  searchConfig: {
+    pageName: string;
+    formItems: Array<{
+      type: string;
+      label: string;
+      prop: string;
+      attrs?: any;
+      initialValue?: any;
+      options?: { label: string; value: any }[];
+    }>;
+  };
+}
+const props = defineProps<IProps>();
+const emit = defineEmits<{
+  queryClick: [queryParams: any];
+  resetClick: [queryParams: any];
+}>();
+// 暴露的属性和方法
+defineExpose({ getQueryParams });
+
+const queryFormRef = ref<InstanceType<typeof ElForm>>();
+// 定义form的数据
+const queryParams = reactive<any>({});
+for (const item of props.searchConfig.formItems) {
+  queryParams[item.prop] = item.initialValue ?? "";
+}
+// 重置操作
+function handleReset() {
+  queryFormRef.value?.resetFields();
+  emit("resetClick", queryParams);
+}
+// 查询操作
+function handleQuery() {
+  emit("queryClick", queryParams);
+}
+// 获取分页数据
+function getQueryParams() {
+  return queryParams;
+}
+</script>
+
+<style lang="scss" scoped>
+.search-container {
+  padding: 18px 0 0 10px;
+  margin-bottom: 10px;
+  background-color: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  box-shadow: var(--el-box-shadow-light);
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index b67fdf5f..671765dd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -54,6 +54,23 @@ export const constantRoutes: RouteRecordRaw[] = [
     ],
   },
 
+  {
+    path: "/curd",
+    component: Layout,
+    meta: {
+      alwaysShow: false,
+    },
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/demo/curd/index.vue"),
+        meta: {
+          title: "增删改查",
+        },
+      },
+    ],
+  },
+
   // 外部链接
   // {
   //   path: "/external-link",
diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts
new file mode 100644
index 00000000..39cc1b6b
--- /dev/null
+++ b/src/views/demo/curd/config/add.ts
@@ -0,0 +1,145 @@
+const modalConfig = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增用户",
+    width: 800,
+    "append-to-body": true,
+  },
+  formAction: function (data: any) {
+    console.log("add", data);
+    return new Promise((resolve, reject) => {
+      resolve("新增成功");
+    });
+  },
+  formItems: [
+    {
+      type: "input",
+      label: "用户名",
+      prop: "username",
+      attrs: {
+        placeholder: "请输入用户名",
+      },
+    },
+    {
+      type: "input",
+      label: "用户昵称",
+      prop: "nickname",
+      attrs: {
+        placeholder: "请输入用户昵称",
+      },
+    },
+    {
+      type: "tree-select",
+      label: "所属部门",
+      prop: "deptId",
+      attrs: {
+        placeholder: "请选择所属部门",
+        data: [
+          {
+            value: 1,
+            label: "有来技术",
+            children: [
+              {
+                value: 2,
+                label: "研发部门",
+              },
+              {
+                value: 3,
+                label: "测试部门",
+              },
+            ],
+          },
+        ],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+    },
+    {
+      type: "select",
+      label: "性别",
+      prop: "gender",
+      attrs: {
+        placeholder: "请选择",
+      },
+      options: [
+        { label: "男", value: 1 },
+        { label: "女", value: 2 },
+        { label: "未知", value: 0 },
+      ],
+    },
+    {
+      type: "select",
+      label: "角色",
+      prop: "roleIds",
+      attrs: {
+        placeholder: "请选择",
+        multiple: true,
+      },
+      options: [
+        { label: "系统管理员", value: 2 },
+        { label: "系统管理员1", value: 4 },
+        { label: "系统管理员2", value: 5 },
+        { label: "系统管理员3", value: 6 },
+        { label: "系统管理员4", value: 7 },
+        { label: "系统管理员5", value: 8 },
+        { label: "系统管理员6", value: 9 },
+        { label: "系统管理员7", value: 10 },
+        { label: "系统管理员8", value: 11 },
+        { label: "访问游客", value: 3 },
+      ],
+    },
+    {
+      type: "input",
+      label: "手机号码",
+      prop: "mobile",
+      attrs: {
+        placeholder: "请输入手机号码",
+        maxlength: 11,
+      },
+    },
+    {
+      type: "input",
+      label: "邮箱",
+      prop: "email",
+      attrs: {
+        placeholder: "请输入邮箱",
+        maxlength: 50,
+      },
+    },
+    {
+      type: "radio",
+      label: "状态",
+      prop: "status",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+  ],
+  formRules: {
+    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+    nickname: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+    email: [
+      {
+        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+        message: "请输入正确的邮箱地址",
+        trigger: "blur",
+      },
+    ],
+    mobile: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+};
+
+export default modalConfig;
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
new file mode 100644
index 00000000..8b538ec4
--- /dev/null
+++ b/src/views/demo/curd/config/content.ts
@@ -0,0 +1,95 @@
+const contentConfig = {
+  pageName: "sys:user",
+  indexAction: function (data: any) {
+    console.log("index", data);
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve({
+          total: 2,
+          list: [
+            {
+              id: 2,
+              username: "admin",
+              nickname: "系统管理员",
+              mobile: "17621210366",
+              genderLabel: "男",
+              avatar:
+                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+              email: null,
+              status: 1,
+              deptName: "有来技术",
+              roleNames: "系统管理员",
+              createTime: "2019-10-10",
+            },
+            {
+              id: 3,
+              username: "test",
+              nickname: "测试小用户",
+              mobile: "17621210366",
+              genderLabel: "男",
+              avatar:
+                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+              email: null,
+              status: 1,
+              deptName: "测试部门",
+              roleNames: "访问游客",
+              createTime: "2021-06-05",
+            },
+          ],
+        });
+      }, 800);
+    });
+  },
+  deleteAction: function (id: string) {
+    console.log("delete", id);
+    return new Promise((resolve, reject) => {
+      resolve("删除成功");
+    });
+  },
+  pk: "id",
+  toolbar: [
+    "refresh",
+    "add",
+    "delete",
+    "export",
+    {
+      name: "upload",
+      icon: "upload",
+      text: "导入",
+    },
+  ],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "编号", align: "center", prop: "id", width: 100 },
+    { label: "用户名", align: "center", prop: "username" },
+    { label: "用户昵称", align: "center", prop: "nickname", width: 120 },
+    { label: "性别", align: "center", prop: "genderLabel", width: 100 },
+    { label: "部门", align: "center", prop: "deptName", width: 120 },
+    { label: "手机号码", align: "center", prop: "mobile", width: 120 },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+    },
+    { label: "创建时间", align: "center", prop: "createTime", width: 180 },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 220,
+      templet: "tool",
+      operat: [
+        {
+          name: "reset_pwd",
+          auth: "reset_pwd",
+          icon: "refresh-left",
+          text: "重置密码",
+        },
+        "edit",
+        "delete",
+      ],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts
new file mode 100644
index 00000000..2463d0d4
--- /dev/null
+++ b/src/views/demo/curd/config/edit.ts
@@ -0,0 +1,146 @@
+const modalConfig = {
+  pageName: "sys:user",
+  dialog: {
+    title: "修改用户",
+    width: 800,
+    "append-to-body": true,
+  },
+  formAction: function (data: any) {
+    console.log("edit", data);
+    return new Promise((resolve, reject) => {
+      resolve("编辑成功");
+    });
+  },
+  formItems: [
+    {
+      type: "input",
+      label: "用户名",
+      prop: "username",
+      attrs: {
+        placeholder: "请输入用户名",
+        readonly: true,
+      },
+    },
+    {
+      type: "input",
+      label: "用户昵称",
+      prop: "nickname",
+      attrs: {
+        placeholder: "请输入用户昵称",
+      },
+    },
+    {
+      type: "tree-select",
+      label: "所属部门",
+      prop: "deptId",
+      attrs: {
+        placeholder: "请选择所属部门",
+        data: [
+          {
+            value: 1,
+            label: "有来技术",
+            children: [
+              {
+                value: 2,
+                label: "研发部门",
+              },
+              {
+                value: 3,
+                label: "测试部门",
+              },
+            ],
+          },
+        ],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+    },
+    {
+      type: "select",
+      label: "性别",
+      prop: "gender",
+      attrs: {
+        placeholder: "请选择",
+      },
+      options: [
+        { label: "男", value: 1 },
+        { label: "女", value: 2 },
+        { label: "未知", value: 0 },
+      ],
+    },
+    {
+      type: "select",
+      label: "角色",
+      prop: "roleIds",
+      attrs: {
+        placeholder: "请选择",
+        multiple: true,
+      },
+      options: [
+        { label: "系统管理员", value: 2 },
+        { label: "系统管理员1", value: 4 },
+        { label: "系统管理员2", value: 5 },
+        { label: "系统管理员3", value: 6 },
+        { label: "系统管理员4", value: 7 },
+        { label: "系统管理员5", value: 8 },
+        { label: "系统管理员6", value: 9 },
+        { label: "系统管理员7", value: 10 },
+        { label: "系统管理员8", value: 11 },
+        { label: "访问游客", value: 3 },
+      ],
+    },
+    {
+      type: "input",
+      label: "手机号码",
+      prop: "mobile",
+      attrs: {
+        placeholder: "请输入手机号码",
+        maxlength: 11,
+      },
+    },
+    {
+      type: "input",
+      label: "邮箱",
+      prop: "email",
+      attrs: {
+        placeholder: "请输入邮箱",
+        maxlength: 50,
+      },
+    },
+    {
+      type: "radio",
+      label: "状态",
+      prop: "status",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+  ],
+  formRules: {
+    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+    nickname: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+    email: [
+      {
+        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+        message: "请输入正确的邮箱地址",
+        trigger: "blur",
+      },
+    ],
+    mobile: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+};
+
+export default modalConfig;
diff --git a/src/views/demo/curd/config/search.ts b/src/views/demo/curd/config/search.ts
new file mode 100644
index 00000000..fa6600e6
--- /dev/null
+++ b/src/views/demo/curd/config/search.ts
@@ -0,0 +1,50 @@
+const searchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "关键字",
+      prop: "keywords",
+      attrs: {
+        placeholder: "用户名/昵称/手机号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "select",
+      label: "状态",
+      prop: "status",
+      attrs: {
+        placeholder: "全部",
+        clearable: true,
+        style: {
+          width: "100px",
+        },
+      },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+    },
+    {
+      type: "date-picker",
+      label: "创建时间",
+      prop: "createAt",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        style: {
+          width: "240px",
+        },
+      },
+    },
+  ],
+};
+
+export default searchConfig;
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
new file mode 100644
index 00000000..f1a84d59
--- /dev/null
+++ b/src/views/demo/curd/index.vue
@@ -0,0 +1,107 @@
+<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"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">{{
+          scope.row[scope.prop] == 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 searchConfig from "./config/search";
+import contentConfig from "./config/content";
+import addModalConfig from "./config/add";
+import editModalConfig from "./config/edit";
+import type PageSearch from "@/components/PageSearch/index.vue";
+import type PageContent from "@/components/PageContent/index.vue";
+import type PageModal from "@/components/PageModal/index.vue";
+
+const searchRef = ref<InstanceType<typeof PageSearch>>();
+const contentRef = ref<InstanceType<typeof PageContent>>();
+const addModalRef = ref<InstanceType<typeof PageModal>>();
+
+// 搜索
+function handleQueryClick(queryParams: any) {
+  contentRef.value?.fetchPageData(queryParams, true);
+}
+// 重置
+function handleResetClick() {
+  contentRef.value?.fetchPageData({}, true);
+}
+// 新增
+function handleAddClick() {
+  console.log("add");
+  //显示添加表单
+  addModalRef.value?.setModalVisible();
+}
+// 导出
+function handleExportClick() {
+  console.log("export", searchRef.value?.getQueryParams());
+}
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+}
+// 编辑
+const editModalRef = ref<InstanceType<typeof PageModal>>();
+function handleEditClick() {
+  //显示编辑表单或者根据id获取数据进行填充
+  editModalRef.value?.setModalVisible({
+    id: 2,
+    username: "admin",
+    nickname: "系统管理员",
+    mobile: "17621210366",
+    gender: 1,
+    avatar:
+      "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+    email: "",
+    status: 1,
+    deptId: 1,
+    roleIds: [2],
+  });
+}
+// 其他操作列
+function handleOperatClick(data: any) {
+  console.log(data.name, data.row);
+}
+// 表单提交
+function handleSubmitClick() {
+  //刷新别表数据
+  console.log("submit");
+  contentRef.value?.fetchPageData({}, true);
+}
+</script>