接口白名单路由添加

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

@@ -0,0 +1,92 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding" />
+	</fs-page>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud, CrudOptions, AddReq, DelReq, EditReq } from '@fast-crud/fast-crud';
+import _ from 'lodash-es';
+
+interface CreateCrudOptionsTypes {
+	crudOptions: CrudOptions;
+}
+
+//此处为crudOptions配置
+const createCrudOptions = function (prop?: CrudOptions): CreateCrudOptionsTypes {
+	//本地模拟后台crud接口方法 ----开始
+	const records = [{ id: 1, name: 'Hello World' }];
+	const pageRequest = async (query: any) => {
+		return {
+			records,
+			currentPage: 1,
+			pageSize: 20,
+			total: records.length,
+		};
+	};
+	const editRequest = async (req: EditReq) => {
+		const target = _.find(records, (item) => {
+			return req.row.id === item.id;
+		});
+		_.merge(target, req.form);
+		return target;
+	};
+	const delRequest = async (req: DelReq) => {
+		_.remove(records, (item) => {
+			return item.id === req.row.id;
+		});
+	};
+
+	const addRequest = async (req: AddReq) => {
+		const maxRecord = _.maxBy(records, (item) => {
+			return item.id;
+		});
+		req.form.id = (maxRecord?.id || 0) + 1;
+		records.push(req.form);
+		return req.form;
+	};
+	//本地模拟后台crud接口方法 ----结束
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			columns: {
+				name: {
+					title: '姓名',
+					type: 'text',
+					search: { show: true },
+					form: {
+						component: {
+							maxlength: 20,
+						},
+					},
+				},
+			},
+		},
+	};
+};
+
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { expose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ expose });
+// 初始化crud配置
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+const { resetCrudOptions } = useCrud({ expose, crudOptions });
+// 你可以调用此方法，重新初始化crud配置
+// resetCrudOptions(options)
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	expose.doRefresh();
+});
+</script>