feat(后端控制路由): ✨ 添加消息中心页面组件🏷

web/src/views/system/messageCenter/api.ts

@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/dept/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        data: query,
+    });
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}

web/src/views/system/messageCenter/crud.tsx

@@ -0,0 +1,51 @@
+import * as api from "./api";
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud";
+import { request } from "/@/utils/service";
+import { dictionary } from "/@/utils/dictionary";
+interface CreateCrudOptionsTypes {
+    crudOptions: CrudOptions;
+}
+
+export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
+    const pageRequest = async (query: PageQuery) => {
+        return await api.GetList(query);
+    };
+    const editRequest = async ({ form, row }: EditReq) => {
+        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
+            },
+            columns: {
+                _index: {
+                    title: '序号',
+                    form: { show: false },
+                    column: {
+                        //type: 'index',
+                        align: 'center',
+                        width: '70px',
+                        columnSetDisabled: true, //禁止在列设置中选择
+                        formatter: (context) => {
+                            //计算序号,你可以自定义计算规则，此处为翻页累加
+                            let index = context.index ?? 1;
+                            let pagination = crudExpose.crudBinding.value.pagination;
+                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+                        },
+                    },
+                },
+            }
+        },
+    }
+}

web/src/views/system/messageCenter/index.vue

@@ -0,0 +1,26 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
+</script>