第一次提交
This commit is contained in:
131
jeecgboot-vue3/src/views/demo/tree/ActionTree.vue
Normal file
131
jeecgboot-vue3/src/views/demo/tree/ActionTree.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<PageWrapper title="Tree函数操作示例" contentBackground contentClass="p-4">
|
||||
<div class="mb-4">
|
||||
<a-button @click="expandAll(true)" class="mr-2"> 展开全部 </a-button>
|
||||
<a-button @click="expandAll(false)" class="mr-2"> 折叠全部 </a-button>
|
||||
<a-button @click="checkAll(true)" class="mr-2"> 全选 </a-button>
|
||||
<a-button @click="checkAll(false)" class="mr-2"> 全不选 </a-button>
|
||||
<a-button @click="handleLevel(2)" class="mr-2"> 显示到第2级 </a-button>
|
||||
<a-button @click="handleLevel(1)" class="mr-2"> 显示到第1级 </a-button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<a-button @click="handleSetCheckData" class="mr-2"> 设置勾选数据 </a-button>
|
||||
<a-button @click="handleGetCheckData" class="mr-2"> 获取勾选数据 </a-button>
|
||||
<a-button @click="handleSetSelectData" class="mr-2"> 设置选中数据 </a-button>
|
||||
<a-button @click="handleGetSelectData" class="mr-2"> 获取选中数据 </a-button>
|
||||
|
||||
<a-button @click="handleSetExpandData" class="mr-2"> 设置展开数据 </a-button>
|
||||
<a-button @click="handleGetExpandData" class="mr-2"> 获取展开数据 </a-button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<a-button @click="appendNodeByKey(null)" class="mr-2"> 添加根节点 </a-button>
|
||||
<a-button @click="appendNodeByKey('2-2')" class="mr-2"> 添加在parent3内添加节点 </a-button>
|
||||
<a-button @click="deleteNodeByKey('2-2')" class="mr-2"> 删除parent3节点 </a-button>
|
||||
<a-button @click="updateNodeByKey('1-1')" class="mr-2"> 更新parent2节点 </a-button>
|
||||
</div>
|
||||
<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';
|
||||
import { treeData } from './data';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTree, PageWrapper },
|
||||
setup() {
|
||||
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 handleLevel(level: number) {
|
||||
getTree().filterByLevel(level);
|
||||
}
|
||||
|
||||
function handleSetCheckData() {
|
||||
getTree().setCheckedKeys(['0-0']);
|
||||
}
|
||||
|
||||
function handleGetCheckData() {
|
||||
const keys = getTree().getCheckedKeys();
|
||||
createMessage.success(JSON.stringify(keys));
|
||||
}
|
||||
|
||||
function handleSetSelectData() {
|
||||
getTree().setSelectedKeys(['0-0']);
|
||||
}
|
||||
|
||||
function handleGetSelectData() {
|
||||
const keys = getTree().getSelectedKeys();
|
||||
createMessage.success(JSON.stringify(keys));
|
||||
}
|
||||
|
||||
function handleSetExpandData() {
|
||||
getTree().setExpandedKeys(['0-0']);
|
||||
}
|
||||
|
||||
function handleGetExpandData() {
|
||||
const keys = getTree().getExpandedKeys();
|
||||
createMessage.success(JSON.stringify(keys));
|
||||
}
|
||||
|
||||
function checkAll(checkAll: boolean) {
|
||||
getTree().checkAll(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 deleteNodeByKey(key: string) {
|
||||
getTree().deleteNodeByKey(key);
|
||||
}
|
||||
|
||||
function updateNodeByKey(key: string) {
|
||||
getTree().updateNodeByKey(key, {
|
||||
title: 'parent2-new',
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
treeData,
|
||||
treeRef,
|
||||
handleLevel,
|
||||
handleSetCheckData,
|
||||
handleGetCheckData,
|
||||
handleSetSelectData,
|
||||
handleGetSelectData,
|
||||
handleSetExpandData,
|
||||
handleGetExpandData,
|
||||
appendNodeByKey,
|
||||
deleteNodeByKey,
|
||||
updateNodeByKey,
|
||||
checkAll,
|
||||
expandAll,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
83
jeecgboot-vue3/src/views/demo/tree/EditTree.vue
Normal file
83
jeecgboot-vue3/src/views/demo/tree/EditTree.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<PageWrapper title="Tree函数操作示例">
|
||||
<div class="flex">
|
||||
<BasicTree
|
||||
class="w-1/3"
|
||||
title="右侧操作按钮/自定义图标"
|
||||
helpMessage="帮助信息"
|
||||
:treeData="treeData"
|
||||
:actionList="actionList"
|
||||
:renderIcon="createIcon"
|
||||
/>
|
||||
<BasicTree class="w-1/3 mx-4" title="右键菜单" :treeData="treeData" :beforeRightClick="getRightMenuList" />
|
||||
<BasicTree class="w-1/3" title="工具栏使用" toolbar checkable search :treeData="treeData" :beforeRightClick="getRightMenuList" />
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h } from 'vue';
|
||||
import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index';
|
||||
import { treeData } from './data';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTree, PageWrapper },
|
||||
setup() {
|
||||
function handlePlus(node: any) {
|
||||
console.log(node);
|
||||
}
|
||||
|
||||
function getRightMenuList(node: any): ContextMenuItem[] {
|
||||
return [
|
||||
{
|
||||
label: '新增',
|
||||
handler: () => {
|
||||
console.log('点击了新增', node);
|
||||
},
|
||||
icon: 'bi:plus',
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
handler: () => {
|
||||
console.log('点击了删除', node);
|
||||
},
|
||||
icon: 'bx:bxs-folder-open',
|
||||
},
|
||||
];
|
||||
}
|
||||
const actionList: ActionItem[] = [
|
||||
{
|
||||
// show:()=>boolean;
|
||||
render: (node) => {
|
||||
return h(PlusOutlined, {
|
||||
class: 'ml-2',
|
||||
onClick: () => {
|
||||
handlePlus(node);
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
render: () => {
|
||||
return h(DeleteOutlined);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
function createIcon({ level }) {
|
||||
if (level === 1) {
|
||||
return 'ion:git-compare-outline';
|
||||
}
|
||||
if (level === 2) {
|
||||
return 'ion:home';
|
||||
}
|
||||
if (level === 3) {
|
||||
return 'ion:airplane';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
return { treeData, actionList, getRightMenuList, createIcon };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
35
jeecgboot-vue3/src/views/demo/tree/data.ts
Normal file
35
jeecgboot-vue3/src/views/demo/tree/data.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { TreeItem } from '/@/components/Tree/index';
|
||||
|
||||
export const treeData: TreeItem[] = [
|
||||
{
|
||||
title: 'parent ',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{ title: 'leaf', key: '0-0-0' },
|
||||
{
|
||||
title: 'leaf',
|
||||
key: '0-0-1',
|
||||
children: [
|
||||
{ title: 'leaf', key: '0-0-0-0', children: [{ title: 'leaf', key: '0-0-0-0-1' }] },
|
||||
{ title: 'leaf', key: '0-0-0-1' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 2',
|
||||
key: '1-1',
|
||||
children: [
|
||||
{ title: 'leaf', key: '1-1-0' },
|
||||
{ title: 'leaf', key: '1-1-1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 3',
|
||||
key: '2-2',
|
||||
children: [
|
||||
{ title: 'leaf', key: '2-2-0' },
|
||||
{ title: 'leaf', key: '2-2-1' },
|
||||
],
|
||||
},
|
||||
];
|
||||
128
jeecgboot-vue3/src/views/demo/tree/index.vue
Normal file
128
jeecgboot-vue3/src/views/demo/tree/index.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<PageWrapper title="Tree基础示例">
|
||||
<Row :gutter="[16, 16]">
|
||||
<Col :span="8">
|
||||
<BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1" />
|
||||
</Col>
|
||||
<Col :span="8">
|
||||
<BasicTree title="可勾选，默认全部展开" :treeData="treeData" :checkable="true" defaultExpandAll @check="handleCheck" />
|
||||
</Col>
|
||||
<Col :span="8">
|
||||
<BasicTree title="指定默认展开/勾选示例" :treeData="treeData" :checkable="true" :expandedKeys="['0-0']" :checkedKeys="['0-0']" />
|
||||
</Col>
|
||||
<Col :span="8">
|
||||
<BasicTree title="懒加载异步树" ref="asyncTreeRef" :treeData="tree" :load-data="onLoadData" />
|
||||
</Col>
|
||||
<Col :span="8">
|
||||
<Card title="异步数据，默认展开">
|
||||
<template #extra>
|
||||
<a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
|
||||
</template>
|
||||
<Spin :spinning="treeLoading">
|
||||
<BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
|
||||
</Spin>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col :span="8">
|
||||
<Card title="BasicTree内置加载">
|
||||
<template #extra>
|
||||
<a-button @click="loadTreeData2" :loading="treeLoading">请求数据</a-button>
|
||||
</template>
|
||||
<BasicTree ref="loadTreeRef" :treeData="tree2" :loading="treeLoading" />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, nextTick, ref, unref } from 'vue';
|
||||
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
|
||||
import { treeData } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { Card, Row, Col, Spin } from 'ant-design-vue';
|
||||
import { cloneDeep, uniq } from 'lodash-es';
|
||||
import { isArray } from '/@/utils/is';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'system-testtree',
|
||||
components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
|
||||
setup() {
|
||||
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const loadTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const tree2 = ref<TreeItem[]>([]);
|
||||
const treeLoading = ref(false);
|
||||
|
||||
function handleCheck(checkedKeys, e) {
|
||||
console.log('onChecked', checkedKeys, e);
|
||||
}
|
||||
|
||||
function loadTreeData() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
console.log(unref(asyncExpandTreeRef));
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
function loadTreeData2() {
|
||||
treeLoading.value = true;
|
||||
// 以下是模拟异步获取数据
|
||||
setTimeout(() => {
|
||||
// 设置数据源
|
||||
tree2.value = cloneDeep(treeData);
|
||||
treeLoading.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
const tree = ref([
|
||||
{
|
||||
title: 'parent ',
|
||||
key: '0-0',
|
||||
},
|
||||
]);
|
||||
|
||||
function onLoadData(treeNode) {
|
||||
return new Promise((resolve: (value?: unknown) => void) => {
|
||||
if (isArray(treeNode.children) && treeNode.children.length > 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
|
||||
if (asyncTreeAction) {
|
||||
const nodeChildren = [
|
||||
{ title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
|
||||
{ title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
|
||||
];
|
||||
asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
|
||||
asyncTreeAction.setExpandedKeys(uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]));
|
||||
}
|
||||
|
||||
resolve();
|
||||
return;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
return {
|
||||
treeData,
|
||||
handleCheck,
|
||||
tree,
|
||||
onLoadData,
|
||||
asyncTreeRef,
|
||||
asyncExpandTreeRef,
|
||||
loadTreeRef,
|
||||
tree2,
|
||||
loadTreeData,
|
||||
treeLoading,
|
||||
loadTreeData2,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user