refactor: ♻️ 更新优化精简fast-crud结构

web/src/views/system/dictionary/subDict/api.ts

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

web/src/views/system/dictionary/subDict/crud.tsx

@@ -1,14 +1,9 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
-import { watch } from 'vue';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -60,7 +55,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
+							let pagination = crudExpose!.crudBinding.value.pagination;
 							// @ts-ignore
 							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
 						},

web/src/views/system/dictionary/subDict/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-drawer size="70%"   v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
+	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
 		<fs-page>
 			<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
 		</fs-page>
@@ -7,27 +7,17 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, defineProps, computed, watch} from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { ElMessageBox } from 'element-plus';
-// 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 });
 
 //抽屉是否显示
 const drawer = ref(false);
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
-
 	ElMessageBox.confirm('您确定要关闭?', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
@@ -40,11 +30,13 @@ const handleClose = (done: () => void) => {
 			// catch error
 		});
 };
-const {setSearchFormData,doRefresh} = crudExpose
-defineExpose({ drawer,setSearchFormData,doRefresh });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+const { setSearchFormData, doRefresh } = crudExpose;
+
+defineExpose({ drawer, setSearchFormData, doRefresh });
 // 页面打开后获取列表数据
 onMounted(() => {
-  // console.log(48,currentRow)
 	crudExpose.doRefresh();
 });
 </script>