字典列表添加无限级

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "5.6.1",
+	"version": "5.6.2",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",

src/modules/dict/views/list.vue

@@ -11,8 +11,6 @@
 					<cl-refresh-btn />
 					<!-- 新增按钮 -->
 					<cl-add-btn :disabled="!group" />
-					<!-- 删除按钮 -->
-					<cl-multi-delete-btn />
 					<cl-flex1 />
 					<!-- 关键字搜索 -->
 					<cl-search-key />
@@ -26,13 +24,13 @@
 							prop: 'orderNum',
 							order: 'ascending'
 						}"
+						row-key="id"
+						@row-click="onRowClick"
 					/>
 				</el-row>
 
 				<el-row>
 					<cl-flex1 />
-					<!-- 分页控件 -->
-					<cl-pagination />
 				</el-row>
 
 				<!-- 新增、编辑 -->
@@ -47,6 +45,8 @@ import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
 import Group from "../components/group.vue";
 import { computed, provide, ref } from "vue";
+import { deepTree } from "/@/cool/utils";
+import { cloneDeep } from "lodash-es";
 
 const { service, named } = useCool();
 
@@ -60,16 +60,47 @@ const title = computed(() => {
 	return group.value ? `字典列表（${group.value.name}）` : "字典列表";
 });
 
+// 列表
+const list = ref<DictInfoEntity[]>([]);
+
 // cl-upsert 配置
 const Upsert = useUpsert({
 	dialog: {
 		width: "600px"
 	},
 	props: {
-		labelWidth: "60px"
+		labelWidth: "100px"
 	},
 	items: [
-		{ label: "名称", prop: "name", required: true, component: { name: "el-input" } },
+		{
+			label: "上级节点",
+			prop: "parentId",
+			component: {
+				name: "el-tree-select",
+				props: {
+					data: computed(() => {
+						const id = Upsert.value?.getForm("id");
+
+						return deepTree(
+							cloneDeep(list.value.filter((e) => (id ? e.id != id : true)))
+						);
+					}),
+					props: {
+						label: "name",
+						value: "id"
+					},
+					filterable: true,
+					"default-expand-all": true,
+					"check-strictly": true
+				}
+			}
+		},
+		{
+			label: "名称",
+			prop: "name",
+			required: true,
+			component: { name: "el-input" }
+		},
 		{
 			label: "排序",
 			prop: "orderNum",
@@ -92,20 +123,61 @@ const Upsert = useUpsert({
 
 // cl-table 配置
 const Table = useTable({
+	contextMenu: [
+		"refresh",
+		(row) => {
+			return {
+				label: "新增",
+				hidden: !service.dict.info._permission?.add,
+				callback(done) {
+					append(row);
+					done();
+				}
+			};
+		},
+		"edit",
+		"delete",
+		"order-asc",
+		"order-desc"
+	],
 	columns: [
-		{ type: "selection" },
+		{ label: "名称", prop: "name", align: "left" },
-		{ label: "名称", prop: "name" },
 		{ label: "排序", prop: "orderNum", sortable: "custom" },
 		{ label: "备注", prop: "remark", showOverflowTooltip: true },
 		{ label: "创建时间", prop: "createTime", sortable: "custom" },
 		{ label: "更新时间", prop: "updateTime", sortable: "custom" },
-		{ type: "op", buttons: ["edit", "delete"] }
+		{
+			type: "op",
+			width: 250,
+			buttons: [
+				service.dict.info._permission?.add && {
+					label: "新增",
+					type: "success",
+					onClick({ scope }) {
+						append(scope.row);
+					}
+				},
+				"edit",
+				"delete"
+			]
+		}
 	]
 });
 
 // cl-crud 配置
 const Crud = useCrud({
-	service: service.dict.info
+	service: service.dict.info,
+	onRefresh(params, { render }) {
+		service.dict.info
+			.list({
+				typeId: group.value.id,
+				...params
+			})
+			.then((res) => {
+				list.value = cloneDeep(res);
+				render(deepTree(res));
+			});
+	}
 });
 
 // 刷新
@@ -118,6 +190,21 @@ function setGroup(data: any) {
 	group.value = data;
 }
 
+// 行点击展开
+function onRowClick(row: any, column: any) {
+	if (column?.property && row.children) {
+		Table.value?.toggleRowExpansion(row);
+	}
+}
+
+// 追加子集
+function append(row: any) {
+	Crud.value?.rowAppend({
+		parentId: row.id,
+		orderNum: 1
+	});
+}
+
 provide("dict", {
 	group,
 	refresh,