feat(接口白名单): ✨ 接口白名单crud，基本功能完成

web/src/utils/service.ts

@@ -1,120 +1,124 @@
-import axios from "axios";
+import axios from 'axios';
-import { get } from "lodash-es";
+import { get } from 'lodash-es';
 // @ts-ignore
-import { errorLog, errorCreate } from "./tools.ts";
+import { errorLog, errorCreate } from './tools.ts';
 // import { env } from "/src/utils/util.env";
 // import { useUserStore } from "../store/modules/user";
 import { Local, Session } from '/@/utils/storage';
-import qs from "qs";
+import qs from 'qs';
 /**
  * @description 创建请求实例
  */
 function createService() {
-  // 创建一个 axios 实例
+	// 创建一个 axios 实例
-  const service = axios.create({
+	const service = axios.create({
-    timeout: 20000,
+		timeout: 20000,
-      paramsSerializer: {
+		paramsSerializer: {
-        serialize(params) {
+			serialize(params) {
-          return qs.stringify(params, { allowDots: true });
+				return qs.stringify(params, { allowDots: true });
-        },
+			},
-      },
+		},
-  });
+	});
-  // 请求拦截
+	// 请求拦截
-  service.interceptors.request.use(
+	service.interceptors.request.use(
-    (config) => config,
+		(config) => config,
-    (error) => {
+		(error) => {
-      // 发送失败
+			// 发送失败
-      console.log(error);
+			console.log(error);
-      return Promise.reject(error);
+			return Promise.reject(error);
-    }
+		}
-  );
+	);
-  // 响应拦截
+	// 响应拦截
-  service.interceptors.response.use(
+	service.interceptors.response.use(
-    (response) => {
+		(response) => {
-      if (response.config.responseType === "blob") {
+			if (response.config.responseType === 'blob') {
-        return response;
+				return response;
-      }
+			}
-      // dataAxios 是 axios 返回数据中的 data
+			// dataAxios 是 axios 返回数据中的 data
-      const dataAxios = response.data;
+			const dataAxios = response.data;
-      // 这个状态码是和后端约定的
+			// 这个状态码是和后端约定的
-      const { code } = dataAxios;
+			const { code } = dataAxios;
-      // 根据 code 进行判断
+			// swagger判断
-      if (code === undefined) {
+			if (dataAxios.swagger != undefined) {
-        // 如果没有 code 代表这不是项目后端开发的接口
+				return dataAxios;
-        errorCreate(`非标准返回：${dataAxios}， ${response.config.url}`,false);
+			}
-        return dataAxios;
+			// 根据 code 进行判断
-      } else {
+			if (code === undefined) {
-        // 有 code 代表这是一个后端接口 可以进行进一步的判断
+				// 如果没有 code 代表这不是项目后端开发的接口
-        switch (code) {
+				errorCreate(`非标准返回：${dataAxios}， ${response.config.url}`, false);
-          case 401:
+				return dataAxios;
-            Local.clear();
+			} else {
-            Session.clear();
+				// 有 code 代表这是一个后端接口 可以进行进一步的判断
-            window.location.reload();
+				switch (code) {
-            dataAxios.msg = "登录授权过期，请重新登录";
+					case 401:
-            errorCreate(`${dataAxios.msg}: ${response.config.url}`);
+						Local.clear();
-            break
+						Session.clear();
-          case 2000:
+						window.location.reload();
-            // @ts-ignore
+						dataAxios.msg = '登录授权过期，请重新登录';
-            if (response.config.unpack === false) {
+						errorCreate(`${dataAxios.msg}: ${response.config.url}`);
-              //如果不需要解包
+						break;
-              return dataAxios;
+					case 2000:
-            }
+						// @ts-ignore
-            return dataAxios;
+						if (response.config.unpack === false) {
-          default:
+							//如果不需要解包
-            // 不是正确的 code
+							return dataAxios;
-            errorCreate(`${dataAxios.msg}: ${response.config.url}`);
+						}
-            return dataAxios;
+						return dataAxios;
-        }
+					default:
-      }
+						// 不是正确的 code
-    },
+						errorCreate(`${dataAxios.msg}: ${response.config.url}`);
-    (error) => {
+						return dataAxios;
-      const status = get(error, "response.status");
+				}
-      switch (status) {
+			}
-        case 400:
+		},
-          error.message = "请求错误";
+		(error) => {
-          break;
+			const status = get(error, 'response.status');
-        case 401:
+			switch (status) {
-          error.message = "未授权，请登录";
+				case 400:
-          break;
+					error.message = '请求错误';
-        case 403:
+					break;
-          error.message = "拒绝访问";
+				case 401:
-          break;
+					error.message = '未授权，请登录';
-        case 404:
+					break;
-          error.message = `请求地址出错: ${error.response.config.url}`;
+				case 403:
-          break;
+					error.message = '拒绝访问';
-        case 408:
+					break;
-          error.message = "请求超时";
+				case 404:
-          break;
+					error.message = `请求地址出错: ${error.response.config.url}`;
-        case 500:
+					break;
-          error.message = "服务器内部错误";
+				case 408:
-          break;
+					error.message = '请求超时';
-        case 501:
+					break;
-          error.message = "服务未实现";
+				case 500:
-          break;
+					error.message = '服务器内部错误';
-        case 502:
+					break;
-          error.message = "网关错误";
+				case 501:
-          break;
+					error.message = '服务未实现';
-        case 503:
+					break;
-          error.message = "服务不可用";
+				case 502:
-          break;
+					error.message = '网关错误';
-        case 504:
+					break;
-          error.message = "网关超时";
+				case 503:
-          break;
+					error.message = '服务不可用';
-        case 505:
+					break;
-          error.message = "HTTP版本不受支持";
+				case 504:
-          break;
+					error.message = '网关超时';
-        default:
+					break;
-          break;
+				case 505:
-      }
+					error.message = 'HTTP版本不受支持';
-      errorLog(error);
+					break;
-      if (status === 401) {
+				default:
-        // const userStore = useUserStore();
+					break;
-        // userStore.logout();
+			}
-      }
+			errorLog(error);
-      return Promise.reject(error);
+			if (status === 401) {
-    }
+				// const userStore = useUserStore();
-  );
+				// userStore.logout();
-  return service;
+			}
+			return Promise.reject(error);
+		}
+	);
+	return service;
 }
 
 /**
@@ -122,24 +126,24 @@ function createService() {
  * @param {Object} service axios 实例
  */
 function createRequestFunction(service: any) {
-  return function (config: any) {
+	return function (config: any) {
-    const configDefault = {
+		const configDefault = {
-      headers: {
+			headers: {
-        "Content-Type": get(config, "headers.Content-Type", "application/json")
+				'Content-Type': get(config, 'headers.Content-Type', 'application/json'),
-      },
+			},
-      timeout: 5000,
+			timeout: 5000,
-      baseURL: import.meta.env.VITE_API_URL as any,
+			baseURL: import.meta.env.VITE_API_URL as any,
-      data: {}
+			data: {},
-    };
+		};
 
-    // const token = userStore.getToken;
+		// const token = userStore.getToken;
-    const token = Session.get('token')
+		const token = Session.get('token');
-    if (token != null) {
+		if (token != null) {
-      // @ts-ignore
+			// @ts-ignore
-      configDefault.headers.Authorization = 'JWT ' + token;
+			configDefault.headers.Authorization = 'JWT ' + token;
-    }
+		}
-    return service(Object.assign(configDefault, config));
+		return service(Object.assign(configDefault, config));
-  };
+	};
 }
 
 // 用于真实网络请求的实例和请求方法
@@ -149,4 +153,3 @@ export const request = createRequestFunction(service);
 // 用于模拟网络请求的实例和请求方法
 export const serviceForMock = createService();
 export const requestForMock = createRequestFunction(serviceForMock);
-

web/src/views/system/apiWhiteList/curd.tsx

@@ -1,222 +0,0 @@
-import { CrudExpose, CrudOptions, AddReq, DelReq, EditReq, dict } from '@fast-crud/fast-crud';
-import _ from 'lodash-es';
-import {h} from 'vue';
-import {tabBarProps} from "element-plus";
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
-
-//此处为crudOptions配置
-export const createCrudOptions = function ({crudExpose}: {crudExpose: CrudExpose}): CreateCrudOptionsTypes {
-	//本地模拟后台crud接口方法 ----开始
-	const records = [
-		{
-			id: 1,
-			modifier_name: '超级管理员',
-			creator_name: '超级管理员',
-			create_datetime: '2022-05-24 13:43:21',
-			update_datetime: '2022-05-31 02:09:01',
-			description: 'null1111111',
-			modifier: '1',
-			dept_belong_id: '1',
-			url: '/api/system/dept_lazy_tree/',
-			method: 0,
-			enable_datasource: true,
-			creator: 1,
-		},
-		{
-			id: 2,
-			modifier_name: '超级管理员',
-			creator_name: '超级管理员',
-			create_datetime: '2022-05-24 13:43:21',
-			update_datetime: '2022-05-31 02:09:01',
-			description: 'null22222',
-			modifier: '1',
-			dept_belong_id: '1',
-			url: '/api/system/dept_lazy_tree/',
-			method: 3,
-			enable_datasource: false,
-			creator: 1,
-		},
-	];
-	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,
-			},
-			rowHandle: {
-				buttons: {
-					view: { show: false },
-				},
-			},
-			form: {
-				labelWidth: '120px',
-				wrapper: {
-					is: 'el-dialog',
-					width: '600px',
-				},
-			},
-			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;
-						},
-					},
-				},
-				search: {
-					title: '关键词',
-					column: { show: false },
-					type: 'text',
-					search: { show: true },
-					form: {
-						show: false,
-						component: {
-							placeholder: '输入关键词搜索',
-						},
-					},
-				},
-				id: {
-					title: 'ID',
-					type: 'text',
-					column: { show: false },
-					search: { show: false },
-					form: { show: false },
-				},
-				method: {
-					title: '请求方式',
-					type: 'dict-select',
-					search: { show: true },
-					dict: dict({
-						data: [
-							{
-								label: 'GET',
-								value: 0,
-								color: null,
-							},
-							{
-								label: 'POST',
-								value: 1,
-								color: null,
-							},
-							{
-								label: 'PUT',
-								value: 2,
-								color: null,
-							},
-							{
-								label: 'DELETE',
-								value: 3,
-								color: null,
-							},
-						],
-					}),
-					form: {
-						component: {
-							maxlength: 20,
-						},
-					},
-					column: {
-						sortable: true,
-					},
-				},
-				url: {
-					title: '接口地址',
-					type: 'text',
-					search: { show: false },
-					form: {
-						col: { span: 24 },
-						helper: {
-							render() {
-								return <el-tag>请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/</el-tag>
-							},
-						},
-						component: {
-							maxlength: 20,
-						},
-					},
-					column: {
-						sortable: true,
-					},
-				},
-				enable_datasource: {
-					title: '数据权限认证',
-					search: { show: true },
-					type: 'dict-radio',
-					dict: dict({
-						data: [
-							{
-								label: '启用',
-								value: true,
-								color: 'success',
-							},
-							{
-								label: '禁用',
-								value: false,
-								color: 'danger',
-							},
-						],
-					}),
-					form: {
-						component: {
-							maxlength: 20,
-						},
-					},
-				},
-				description: {
-					title: '备注',
-					type: 'textarea',
-					search: { show: false },
-					form: {
-						col: { span: 24 },
-						component: {
-							maxlength: 200,
-						},
-					},
-				},
-			},
-		},
-	};
-};

web/src/views/system/whiteList/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/api_white_list/';
+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/whiteList/crud.tsx

@@ -0,0 +1,184 @@
+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;
+						},
+					},
+				},
+				search: {
+					title: '关键词',
+					column: {
+						show: false,
+					},
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入关键词',
+						},
+					},
+					form: {
+						show: false,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+				},
+				method: {
+					title: '请求方式',
+					sortable: true,
+					search: {
+						disabled: false,
+					},
+					type: 'dict-select',
+					dict: dict({
+						data: [
+							{
+								label: 'GET',
+								value: 0,
+							},
+							{
+								label: 'POST',
+								value: 1,
+							},
+							{
+								label: 'PUT',
+								value: 2,
+							},
+							{
+								label: 'DELETE',
+								value: 3,
+							},
+						],
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 12,
+						},
+						itemProps: {
+							class: { yxtInput: true },
+						},
+					},
+				},
+				url: {
+					title: '接口地址',
+					sortable: true,
+					search: {
+						disabled: true,
+					},
+					type: 'dict-select',
+					dict: dict({
+						async getData(dict: any) {
+							return request('/swagger.json').then((ret: any) => {
+								const res = Object.keys(ret.paths);
+								const data = [];
+								for (const item of res) {
+									const obj = { label: '', value: '' };
+									obj.label = item;
+									obj.value = item;
+									data.push(obj);
+								}
+								return data;
+							});
+						},
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 24,
+							props: {
+								elProps: {
+									allowCreate: true,
+									filterable: true,
+									clearable: true,
+								},
+							},
+						},
+						itemProps: {
+							class: { yxtInput: true },
+						},
+						helper: {
+							render(h) {
+								return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
+							},
+						},
+					},
+				},
+				enable_datasource: {
+					title: '数据权限认证',
+					search: {
+						disabled: false,
+					},
+					width: 150,
+					type: 'dict-radio',
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
+					form: {
+						value: true,
+						component: {
+							span: 12,
+						},
+					},
+				},
+			},
+		},
+	};
+};

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

@@ -1,18 +1,13 @@
 <template>
 	<fs-page>
-		<fs-crud ref="crudRef" v-bind="crudBinding">
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-			<template #cell_url="scope">
-				<el-tag size="small">{{ scope.row.url }}</el-tag>
-			</template>
-		</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 './curd';
+import { createCrudOptions } from './crud';
-
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -23,8 +18,6 @@ const { crudExpose } = useExpose({ crudRef, crudBinding });
 const { crudOptions } = createCrudOptions({ crudExpose });
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-// 你可以调用此方法，重新初始化crud配置
-// resetCrudOptions(options)
 
 // 页面打开后获取列表数据
 onMounted(() => {