feat(projects): integration fast-crud

src/views/crud/demo/api.ts

@@ -0,0 +1,37 @@
+import { mockRequest } from '@/service/request';
+
+const request = mockRequest;
+const apiPrefix = '/crud/demo';
+
+function resHandle(res: any) {
+  return res.data;
+}
+export async function GetList(query: any) {
+  const res = await request.post(`${apiPrefix}/page`, query);
+  return resHandle(res);
+}
+
+export async function AddObj(obj: any) {
+  const res = await request.post(`${apiPrefix}/add`, obj);
+  return resHandle(res);
+}
+
+export async function UpdateObj(obj: any) {
+  const res = await request.post(`${apiPrefix}/update`, obj);
+  return resHandle(res);
+}
+
+export async function DelObj(id: number) {
+  const res = await request.post(`${apiPrefix}/delete`, { id });
+  return resHandle(res);
+}
+
+export async function GetObj(id: number) {
+  const res = await request.get(`${apiPrefix}/info`, { params: { id } });
+  return resHandle(res);
+}
+
+export async function BatchDelete(ids: number[]) {
+  const res = await request.post(`${apiPrefix}/batchDelete`, { ids });
+  return resHandle(res);
+}

src/views/crud/demo/crud.tsx

@@ -0,0 +1,114 @@
+import type { AddReq, CreateCrudOptionsRet, DelReq, EditReq } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import dayjs from 'dayjs';
+import * as api from './api';
+
+export default function createCrudOptions(): CreateCrudOptionsRet {
+  const pageRequest = async (query: any) => {
+    return api.GetList(query);
+  };
+  const editRequest = async (ctx: EditReq) => {
+    const { form, row } = ctx;
+    form.id = row.id;
+    return api.UpdateObj(form);
+  };
+  const delRequest = async (ctx: DelReq) => {
+    const { row } = ctx;
+    return api.DelObj(row.id);
+  };
+
+  const addRequest = async (req: AddReq) => {
+    const { form } = req;
+    return api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      container: {
+        is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          key: 'id',
+          type: 'number',
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        datetime: {
+          title: '时间',
+          type: 'datetime',
+          // naive 默认仅支持数字类型时间戳作为日期输入与输出
+          // 字符串类型的时间需要转换格式
+          valueBuilder(context) {
+            const { value, row, key } = context;
+            if (value) {
+              // naive 默认仅支持时间戳作为日期输入与输出
+              row[key] = dayjs(value).valueOf();
+            }
+          },
+          valueResolve(context) {
+            const { value, form, key } = context;
+            if (value) {
+              form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+            }
+          }
+        },
+        select: {
+          title: '状态',
+          search: { show: true },
+          type: 'dict-select',
+          dict: dict({
+            url: '/mock/crud/demo/dict'
+          })
+        },
+        text: {
+          title: '文本',
+          type: 'text',
+          search: { show: true }
+        },
+        copyable: {
+          title: '可复制',
+          type: ['text', 'copyable'],
+          search: { show: true }
+        },
+        avatar: {
+          title: '头像裁剪',
+          type: 'cropper-uploader'
+        },
+        upload: {
+          title: '文件上传',
+          type: 'file-uploader'
+        },
+        richtext: {
+          title: '富文本',
+          type: 'editor-wang5',
+          column: {
+            // cell中不显示
+            show: false
+          },
+          form: {
+            col: {
+              // 横跨两列
+              span: 24
+            },
+            component: {
+              style: {
+                height: '300px'
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/views/crud/demo/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="h-full">
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+export default defineComponent({
+  name: 'ComponentCrud',
+  setup() {
+    const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

src/views/crud/doc/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-full">
+    <iframe class="wh-full" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const src = ref('http://fast-crud.docmirror.cn/');
+</script>
+
+<style scoped></style>

src/views/crud/header_group/api.ts

@@ -0,0 +1,37 @@
+import { mockRequest } from '@/service/request';
+
+const request = mockRequest;
+const apiPrefix = '/crud/header-group';
+
+function resHandle(res: any) {
+  return res.data;
+}
+export async function GetList(query: any) {
+  const res = await request.post(`${apiPrefix}/page`, query);
+  return resHandle(res);
+}
+
+export async function AddObj(obj: any) {
+  const res = await request.post(`${apiPrefix}/add`, obj);
+  return resHandle(res);
+}
+
+export async function UpdateObj(obj: any) {
+  const res = await request.post(`${apiPrefix}/update`, obj);
+  return resHandle(res);
+}
+
+export async function DelObj(id: number) {
+  const res = await request.post(`${apiPrefix}/delete`, { id });
+  return resHandle(res);
+}
+
+export async function GetObj(id: number) {
+  const res = await request.get(`${apiPrefix}/info`, { params: { id } });
+  return resHandle(res);
+}
+
+export async function BatchDelete(ids: number[]) {
+  const res = await request.post(`${apiPrefix}/batchDelete`, { ids });
+  return resHandle(res);
+}

src/views/crud/header_group/crud.tsx

@@ -0,0 +1,102 @@
+import type { CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import * as api from './api';
+
+export default function createCrudOptions(): CreateCrudOptionsRet {
+  const pageRequest = async (query: any) => {
+    return api.GetList(query);
+  };
+  const editRequest = async (ctx: { form: any; row: any }) => {
+    const { form, row } = ctx;
+    form.id = row.id;
+    return api.UpdateObj(form);
+  };
+  const delRequest = async (ctx: { row: any }) => {
+    const { row } = ctx;
+    return api.DelObj(row.id);
+  };
+
+  const addRequest = async (ctx: { form: any }) => {
+    const { form } = ctx;
+    return api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      container: {
+        // is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      form: {
+        layout: 'flex',
+        labelWidth: '100px' // 表单label宽度
+      },
+      table: { size: 'small' },
+      columns: {
+        id: {
+          title: 'ID',
+          key: 'id',
+          type: 'number',
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        user: {
+          title: '用户信息',
+          children: {
+            name: {
+              title: '姓名',
+              type: 'text'
+            },
+            age: {
+              title: '年龄',
+              type: 'number'
+            }
+          }
+        },
+        address: {
+          title: '地址',
+          children: {
+            area: {
+              title: '地区',
+              children: {
+                province: {
+                  title: '省',
+                  search: { show: true },
+                  type: 'dict-select',
+                  dict: dict({
+                    data: [
+                      { value: '广东省', label: '广东省' },
+                      { value: '浙江省', label: '浙江省' }
+                    ]
+                  })
+                },
+                city: {
+                  title: '市',
+                  search: { show: true },
+                  type: 'text'
+                },
+                county: {
+                  title: '区',
+                  search: { show: true },
+                  type: 'text'
+                }
+              }
+            },
+            street: {
+              title: '街道',
+              type: 'text'
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/views/crud/header_group/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="h-full fs-page-header-group">
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+export default defineComponent({
+  name: 'CrudHeaderGroup',
+  setup() {
+    const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
+<style lang="scss">
+.fs-page-header-group {
+}
+</style>

src/views/crud/source/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-full">
+    <iframe class="wh-full" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const src = ref('https://github.com/fast-crud/fast-crud');
+</script>
+
+<style scoped></style>

src/views/index.ts

@@ -16,6 +16,10 @@ export const views: Record<
   component_button: () => import('./component/button/index.vue'),
   component_card: () => import('./component/card/index.vue'),
   component_table: () => import('./component/table/index.vue'),
+  crud_demo: () => import('./crud/demo/index.vue'),
+  crud_doc: () => import('./crud/doc/index.vue'),
+  crud_header_group: () => import('./crud/header_group/index.vue'),
+  crud_source: () => import('./crud/source/index.vue'),
   dashboard_analysis: () => import('./dashboard/analysis/index.vue'),
   dashboard_workbench: () => import('./dashboard/workbench/index.vue'),
   document_naive: () => import('./document/naive/index.vue'),