简单案例

作者:唐亚峰 | battcn

字数统计:558 字

增删改查

WEMIRR-PLATFORM 项目与 fast-crud 深度集成合作，大大降低了前端小伙伴入门门槛，只需要简单的配置就可以实现精美的表单和表格

下面通过一个小 DEMO 来给大家讲解如何在3分钟内快速上手开发自己的分页+增删改查

前端实现

参考下面模板,创建index.vue 和 crud.tsx 模板，然后重点是调整 crud.tsx 模板部分

index.vue

<script lang="ts" setup name="DemoPage">
import { onMounted } from 'vue';

import { useFs } from '@fast-crud/fast-crud';

import createCrudOptions from './crud';

// 通过context传递到crud.tsx中
const { crudBinding, crudRef, crudExpose } = useFs({
  createCrudOptions,
  // 设置权限前缀,当然也可以给按钮单独设置
  context: { permission: 'sys:demo' },
});

// 页面打开后获取列表数据
onMounted(async () => {
  await crudExpose.doRefresh();
});
</script>

<template>
  <fs-page class="page-layout-card">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </fs-page>
</template>

crud.tsx

import type { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq } from '@fast-crud/fast-crud';

import { dict, utils } from '@fast-crud/fast-crud';
import { defHttp } from '#/api/request';

export default function crud(
  props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  utils.logger.debug('crud props', props);
  return {
    crudOptions: {
      request: {
        pageRequest: async (query: any) => {
          return await defHttp.get(`/iam/demo/page`, { params: query });
        },
        addRequest: async ({ form }: AddReq) => {
          return await defHttp.post(`/iam/demo/create`, form);
        },
        editRequest: async ({ form }: EditReq) => {
          return await defHttp.put(`/iam/demo/${form.id}/modify`, form);
        },
        delRequest: async ({ row }: DelReq) => {
          return await defHttp.delete(`/iam/demo/${row.id}`);
        },
      },
      columns: {
        id: {
          title: 'ID',
          type: 'text',
          form: { show: false },
          column: { show: false },
        },
        title: {
          title: '名称',
          type: 'text',
          column: { width: 150 },
          search: { show: true },
          form: {
            rules: [
              { required: true, message: '岗位名称不能为空' },
              { min: 1, max: 30, message: '长度在 1 到 30 个字符' },
            ],
          },
        },
        status: {
          title: '状态',
          type: 'dict-radio',
          column: { width: 100, align: 'center' },
          search: { show: true },
          addForm: {
            value: 1,
          },
          dict: dict({
            data: [
              { value: true, label: '启用', color: 'success' },
              { value: false, label: '禁用', color: 'error' },
            ],
          }),
        },
        description: {
          title: '描述',
          search: { show: false },
          type: ['textarea'],
          form: {
            col: { span: 24 },
          },
          column: { width: 220, ellipsis: true },
        },
        createdTime: {
          title: '创建时间',
          type: ['datetime', 'wp-readonly-time'],
        },
      },
    },
  };
}

后端实现

后端同学只要写好响应的增删改查方法即可，这里就不在过多赘述了

@GetMapping
@Operation(summary = "接口名称 - [Levin] - [DONE]")
public IPage<分页返回实体> query(PageRequest request) {
    return service.page(request.buildPage(), Wraps.<数据库实体>lbQ()
                    .eq(数据库实体::getSysOrgId, orgId).orderByAsc(数据库实体::getSort))
            .convert(x -> BeanUtil.toBean(x, 分页返回实体.class));
}