From 85e1d826d34c6d18e244d169ce90ffb4746d6d17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?=
 <615206459@qq.com>
Date: Thu, 13 Mar 2025 15:08:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E8=BD=AC=E6=A0=91?=
 =?UTF-8?q?=E5=BD=A2=E8=A1=A8=E6=A0=BC=20=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/crud/components/form/required.vue   |  3 +-
 .../crud/components/table/plugin/row-edit.vue |  2 +-
 .../crud/components/table/plugin/to-tree.vue  | 87 +++++++++++++++++++
 src/modules/demo/views/crud/index.vue         |  3 +-
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/demo/views/crud/components/table/plugin/to-tree.vue

diff --git a/src/modules/demo/views/crud/components/form/required.vue b/src/modules/demo/views/crud/components/form/required.vue
index d40bc4c..7de191f 100644
--- a/src/modules/demo/views/crud/components/form/required.vue
+++ b/src/modules/demo/views/crud/components/form/required.vue
@@ -2,7 +2,7 @@
 	<div class="scope">
 		<div class="h">
 			<el-tag size="small" effect="dark" disable-transitions>required</el-tag>
-			<span>必填项配置</span>
+			<span>必填项配置、动态设置</span>
 		</div>
 
 		<div class="c">
@@ -71,6 +71,7 @@ function open() {
 					name: 'el-switch',
 					props: {
 						onChange(val) {
+							// 【很重要】动态设置
 							Form.value.setData('nickname', { required: val });
 
 							// 如果不必填，可以加一步骤清空校验
diff --git a/src/modules/demo/views/crud/components/table/plugin/row-edit.vue b/src/modules/demo/views/crud/components/table/plugin/row-edit.vue
index cfa7cbe..de8c2d0 100644
--- a/src/modules/demo/views/crud/components/table/plugin/row-edit.vue
+++ b/src/modules/demo/views/crud/components/table/plugin/row-edit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="scope">
 		<div class="h">
-			<el-tag size="small" effect="dark" disable-transitions>row-edit</el-tag>
+			<el-tag size="small" effect="dark" disable-transitions>rowEdit</el-tag>
 			<span>行编辑</span>
 		</div>
 
diff --git a/src/modules/demo/views/crud/components/table/plugin/to-tree.vue b/src/modules/demo/views/crud/components/table/plugin/to-tree.vue
new file mode 100644
index 0000000..d2c58be
--- /dev/null
+++ b/src/modules/demo/views/crud/components/table/plugin/to-tree.vue
@@ -0,0 +1,87 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>toTree</el-tag>
+			<span>转树形表格</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['table/plugin/to-tree.vue']" />
+
+			<!-- 自定义表格组件 -->
+			<cl-dialog v-model="visible" title="转树形表格" width="80%">
+				<cl-crud ref="Crud">
+					<cl-row>
+						<cl-table ref="Table" />
+					</cl-row>
+
+					<cl-row>
+						<cl-flex1 />
+						<cl-pagination />
+					</cl-row>
+				</cl-crud>
+			</cl-dialog>
+		</div>
+
+		<div class="f">
+			<span class="date">2025-03-13</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useCrud, useTable } from '@cool-vue/crud';
+import { ref } from 'vue';
+import { useCool } from '/@/cool';
+import { Plugins } from '/#/crud';
+
+const { service } = useCool();
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		// 【很重要】必须包含 parentId 字段，否则无法转树形表格。如：
+		service: service.base.sys.menu
+	},
+	app => {
+		app.refresh();
+	}
+);
+
+// cl-table 配置
+const Table = useTable({
+	autoHeight: false,
+	contextMenu: ['refresh'],
+
+	columns: [
+		{
+			label: '节点名称',
+			prop: 'name',
+			minWidth: 140,
+			align: 'left',
+			headerAlign: 'center'
+		},
+		{
+			label: '路由',
+			prop: 'router',
+			minWidth: 140
+		},
+		{
+			label: '创建时间',
+			prop: 'createTime',
+			minWidth: 170,
+			sortable: 'desc'
+		}
+	],
+
+	//【很重要】配置插件
+	plugins: [Plugins.Table.toTree()]
+});
+
+const visible = ref(false);
+
+function open() {
+	visible.value = true;
+}
+</script>
diff --git a/src/modules/demo/views/crud/index.vue b/src/modules/demo/views/crud/index.vue
index 86cf1c2..a7a712d 100644
--- a/src/modules/demo/views/crud/index.vue
+++ b/src/modules/demo/views/crud/index.vue
@@ -82,6 +82,7 @@ import TableColumnCustom from './components/table/column-custom.vue';
 import TableComponent from './components/table/component/index.vue';
 import TablePluginBase from './components/table/plugin/base.vue';
 import TablePluginRowEdit from './components/table/plugin/row-edit.vue';
+import TablePluginToTree from './components/table/plugin/to-tree.vue';
 
 import UpsertBase from './components/upsert/base.vue';
 import UpsertEvent from './components/upsert/event.vue';
@@ -145,7 +146,7 @@ const list = [
 			},
 			{
 				label: '插件',
-				children: [TablePluginBase, TablePluginRowEdit]
+				children: [TablePluginBase, TablePluginRowEdit, TablePluginToTree]
 			}
 		]
 	},