From b19d937fd8f1f0ff8b27b660966e3a4495b1d5ef Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 04 七月 2024 11:29:30 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/tree/ActionTree.vue | 168 +++++++++++++++++++++++++-------------------------------
1 files changed, 75 insertions(+), 93 deletions(-)
diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue
index 613000e..5cf469e 100644
--- a/src/views/demo/tree/ActionTree.vue
+++ b/src/views/demo/tree/ActionTree.vue
@@ -14,7 +14,7 @@
<a-button @click="handleSetSelectData" class="mr-2"> 璁剧疆閫変腑鏁版嵁 </a-button>
<a-button @click="handleGetSelectData" class="mr-2"> 鑾峰彇閫変腑鏁版嵁 </a-button>
<a-button @click="handleGetSelectNode" class="mr-2"> 鑾峰彇閫変腑鑺傜偣 </a-button>
-
+ <a-button @click="handleGetTreeData" class="mr-2"> 鑾峰彇Tree鏁版嵁 </a-button>
<a-button @click="handleSetExpandData" class="mr-2"> 璁剧疆灞曞紑鏁版嵁 </a-button>
<a-button @click="handleGetExpandData" class="mr-2"> 鑾峰彇灞曞紑鏁版嵁 </a-button>
</div>
@@ -27,113 +27,95 @@
<BasicTree :treeData="treeData" title="鍑芥暟鎿嶄綔" ref="treeRef" :checkable="true" />
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref, unref } from 'vue';
- import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+<script lang="ts" setup>
+ import { ref, unref } from 'vue';
+ import { BasicTree, TreeActionType } from '@/components/Tree';
import { treeData } from './data';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { PageWrapper } from '/@/components/Page';
+ import { useMessage } from '@/hooks/web/useMessage';
+ import { PageWrapper } from '@/components/Page';
+ import { type Nullable } from '@vben/types';
- export default defineComponent({
- components: { BasicTree, PageWrapper },
- setup() {
- const treeRef = ref<Nullable<TreeActionType>>(null);
- const { createMessage } = useMessage();
+ const treeRef = ref<Nullable<TreeActionType>>(null);
+ const { createMessage } = useMessage();
- function getTree() {
- const tree = unref(treeRef);
- if (!tree) {
- throw new Error('tree is null!');
- }
- return tree;
- }
+ function getTree() {
+ const tree = unref(treeRef);
+ if (!tree) {
+ throw new Error('tree is null!');
+ }
+ return tree;
+ }
- function handleLevel(level: number) {
- getTree().filterByLevel(level);
- }
+ function handleLevel(level: number) {
+ getTree().filterByLevel(level);
+ }
- function handleSetCheckData() {
- getTree().setCheckedKeys(['0-0']);
- }
+ function handleSetCheckData() {
+ getTree().setCheckedKeys(['0-0']);
+ }
- function handleGetCheckData() {
- const keys = getTree().getCheckedKeys();
- createMessage.success(JSON.stringify(keys));
- }
+ function handleGetCheckData() {
+ const keys = getTree().getCheckedKeys();
+ createMessage.success(JSON.stringify(keys));
+ }
- function handleSetSelectData() {
- getTree().setSelectedKeys(['0-0']);
- }
+ function handleSetSelectData() {
+ getTree().setSelectedKeys(['0-0']);
+ }
- function handleGetSelectData() {
- const keys = getTree().getSelectedKeys();
- createMessage.success(JSON.stringify(keys));
- }
+ function handleGetSelectData() {
+ const keys = getTree().getSelectedKeys();
+ createMessage.success(JSON.stringify(keys));
+ }
- function handleGetSelectNode() {
- const keys = getTree().getSelectedKeys();
- const node = getTree().getSelectedNode(keys[0]);
- createMessage.success(node !== null ? JSON.stringify(node) : null);
- }
+ function handleGetSelectNode() {
+ const keys = getTree().getSelectedKeys();
+ const node = getTree().getSelectedNode(keys[0]);
+ createMessage.success(node !== null ? JSON.stringify(node) : null);
+ }
- function handleSetExpandData() {
- getTree().setExpandedKeys(['0-0']);
- }
+ function handleSetExpandData() {
+ getTree().setExpandedKeys(['0-0']);
+ }
- function handleGetExpandData() {
- const keys = getTree().getExpandedKeys();
- createMessage.success(JSON.stringify(keys));
- }
+ function handleGetExpandData() {
+ const keys = getTree().getExpandedKeys();
+ createMessage.success(JSON.stringify(keys));
+ }
- function checkAll(checkAll: boolean) {
- getTree().checkAll(checkAll);
- }
+ function checkAll(checkAll: boolean) {
+ getTree().checkAll(checkAll);
+ }
- function expandAll(checkAll: boolean) {
- getTree().expandAll(checkAll);
- }
+ function expandAll(checkAll: boolean) {
+ getTree().expandAll(checkAll);
+ }
- function appendNodeByKey(parentKey: string | null = null) {
- getTree().insertNodeByKey({
- parentKey: parentKey,
- node: {
- title: '鏂板鑺傜偣',
- key: '2-2-2',
- },
- // 寰�鍚庢彃鍏�
- push: 'push',
- // 寰�鍓嶆彃鍏�
- // push:'unshift'
- });
- }
+ function appendNodeByKey(parentKey: string | null = null) {
+ getTree().insertNodeByKey({
+ parentKey: parentKey,
+ node: {
+ title: '鏂板鑺傜偣',
+ key: '2-2-2',
+ },
+ // 寰�鍚庢彃鍏�
+ push: 'push',
+ // 寰�鍓嶆彃鍏�
+ // push:'unshift'
+ });
+ }
- function deleteNodeByKey(key: string) {
- getTree().deleteNodeByKey(key);
- }
+ function deleteNodeByKey(key: string) {
+ getTree().deleteNodeByKey(key);
+ }
- function updateNodeByKey(key: string) {
- getTree().updateNodeByKey(key, {
- title: 'parent2-new',
- });
- }
+ function updateNodeByKey(key: string) {
+ getTree().updateNodeByKey(key, {
+ title: 'parent2-new',
+ });
+ }
- return {
- treeData,
- treeRef,
- handleLevel,
- handleSetCheckData,
- handleGetCheckData,
- handleSetSelectData,
- handleGetSelectData,
- handleSetExpandData,
- handleGetExpandData,
- handleGetSelectNode,
- appendNodeByKey,
- deleteNodeByKey,
- updateNodeByKey,
- checkAll,
- expandAll,
- };
- },
- });
+ function handleGetTreeData() {
+ createMessage.success(JSON.stringify(getTree().getTreeData()));
+ }
</script>
--
Gitblit v1.9.3