chore(地区管理): 🚸 地区管理改树形

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

@@ -6,7 +6,7 @@ export function GetList(query: PageQuery) {
     return request({
         url: apiPrefix,
         method: 'get',
-        data: query,
+        params: query,
     });
 }
 export function GetObj(id: InfoReq) {

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

@@ -20,6 +20,18 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 	const addRequest = async ({ form }: AddReq) => {
 		return await api.AddObj(form);
 	};
+
+	/**
+	 * 懒加载
+	 * @param row
+	 * @returns {Promise<unknown>}
+	 */
+	const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
+		api.GetList({ pcode: tree.code }).then((res: any) => {
+			resolve(res.data);
+		});
+	};
+
 	return {
 		crudOptions: {
 			request: {
@@ -28,47 +40,50 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			pagination: {
+				show: false,
+			},
+			table: {
+				rowKey: 'id',
+				lazy: true,
+				load: loadContentMethod,
+				treeProps: { children: 'children', hasChildren: 'hasChild' },
+			},
 			columns: {
 				_index: {
 					title: '序号',
 					form: { show: false },
 					column: {
-						//type: 'index',
+						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;
-						},
-					},
-				},
-				pcode: {
-					title: '父级地区',
-					show: false,
-					search: {
-						show: true,
-					},
-					type: 'dict-tree',
-					form: {
-						component: {
-							showAllLevels: false, // 仅显示最后一级
-							props: {
-								elProps: {
-									clearable: true,
-									showAllLevels: false, // 仅显示最后一级
-									props: {
-										checkStrictly: true, // 可以不需要选到最后一级
-										emitPath: false,
-										clearable: true,
-									},
-								},
-							},
-						},
 					},
 				},
+				// pcode: {
+				// 	title: '父级地区',
+				// 	show: false,
+				// 	search: {
+				// 		show: true,
+				// 	},
+				// 	type: 'dict-tree',
+				// 	form: {
+				// 		component: {
+				// 			showAllLevels: false, // 仅显示最后一级
+				// 			props: {
+				// 				elProps: {
+				// 					clearable: true,
+				// 					showAllLevels: false, // 仅显示最后一级
+				// 					props: {
+				// 						checkStrictly: true, // 可以不需要选到最后一级
+				// 						emitPath: false,
+				// 						clearable: true,
+				// 					},
+				// 				},
+				// 			},
+				// 		},
+				// 	},
+				// },
 				name: {
 					title: '名称',
 					search: {