perf: 增加card列表示例

Author: greper

src/router/modules/crud.ts

@@ -958,6 +958,15 @@ const advancedRoutes = {
       path: 'custom-layout',
       component: () => import('@/views/crud/advanced/custom-layout/index.vue'),
     },
+    {
+      meta: {
+        title: '列表以card方式显示',
+        keepAlive: true,
+      },
+      name: 'AdvancedCard',
+      path: 'card',
+      component: () => import('@/views/crud/advanced/card/index.vue'),
+    },
   ],
 };
 

src/views/crud/advanced/card/api.ts

@@ -0,0 +1,44 @@
+import { requestForMock } from '@/utils/http/service';
+const request = (req: any) => {
+  return requestForMock(req);
+};
+const apiPrefix = '/mock/AdvancedCard';
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + '/page',
+    method: 'get',
+    data: query,
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + '/add',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + '/update',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + '/delete',
+    method: 'post',
+    params: { id },
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + '/get',
+    method: 'get',
+    params: { id },
+  });
+}

src/views/crud/advanced/card/crud.tsx

@@ -0,0 +1,71 @@
+import * as api from './api';
+import {
+  AddReq,
+  CreateCrudOptionsProps,
+  CreateCrudOptionsRet,
+  DelReq,
+  EditReq,
+  UserPageQuery,
+  UserPageRes,
+} from '@fast-crud/fast-crud';
+
+export default async function ({
+  crudExpose,
+}: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    if (form.id == null) {
+      form.id = row.id;
+    }
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      rowHandle: {
+        align: 'center',
+      },
+      table: {
+        show: false,
+      },
+      toolbar: {
+        compact: false,
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          type: 'number',
+          column: {
+            width: 50,
+          },
+          form: {
+            show: false,
+          },
+        },
+        title: {
+          title: '标题',
+          type: 'text',
+        },
+        content: {
+          title: '内容',
+          type: 'text',
+        },
+      },
+    },
+  };
+}

src/views/crud/advanced/card/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding">
+    <n-row
+      v-if="crudBinding?.data?.length > 0"
+      gutter="10"
+      style="height: 100%; width: 100%; overflow: auto"
+    >
+      <n-col
+        v-for="(item, index) of crudBinding.data"
+        :key="item.id"
+        :span="6"
+        style="margin-bottom: 10px"
+      >
+        <n-card :title="item.title">
+          {{ item.content }}
+          <template #header-extra> 操作 </template>
+          <template #action>
+            <div style="display: flex; justify-content: space-evenly">
+              <fs-icon icon="ion:eye-outline" @click="openView({ index: index, row: item })" />
+              <fs-icon icon="ion:create-outline" @click="openEdit({ index: index, row: item })" />
+              <fs-icon icon="ion:trash-outline" @click="doRemove({ index: index, row: item })" />
+            </div>
+          </template>
+        </n-card>
+      </n-col>
+    </n-row>
+  </fs-crud>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { useFsAsync, useFsRef } from '@fast-crud/fast-crud';
+  import createCrudOptions from './crud';
+
+  const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
+  // 页面打开后获取列表数据
+  onMounted(async () => {
+    await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+    await crudExpose.doRefresh();
+  });
+
+  function openView(opts: any) {
+    crudExpose.openView(opts);
+  }
+  function openEdit(opts: any) {
+    crudExpose.openEdit(opts);
+  }
+  function doRemove(opts: any) {
+    crudExpose.doRemove(opts);
+  }
+</script>

src/views/crud/advanced/card/mock.ts

@@ -0,0 +1,27 @@
+// @ts-ignore
+import mockUtil from '/src/mock/base';
+import _ from 'lodash-es';
+const options: any = {
+  name: 'AdvancedCard',
+  idGenerator: 0,
+};
+const list = [
+  {
+    title: 'fast-crud怎么样',
+    content: '很好用',
+  },
+  {
+    title: '大环境不好呀',
+    content: '好好学习提升自己吧',
+  },
+  {
+    title: 'Certd是什么',
+    content: 'Certd是一款开源的证书全自动管理系统',
+  },
+];
+
+options.list = list;
+options.copyTimes = 100;
+const mock = mockUtil.buildMock(options);
+
+export default mock;