This commit is contained in:
parent
285ac3e0ed
commit
f90f0152fe
4
apps/web-antd/src/api/common.d.ts
vendored
4
apps/web-antd/src/api/common.d.ts
vendored
@ -48,4 +48,8 @@ export interface TreeNode<T = any> {
|
|||||||
ParentCode: T;
|
ParentCode: T;
|
||||||
label: string;
|
label: string;
|
||||||
children: TreeNode<T>;
|
children: TreeNode<T>;
|
||||||
|
|
||||||
|
title?: string;
|
||||||
|
key?:any
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
import { useBeforeCloseDiff } from '#/utils/popup';
|
import { useBeforeCloseDiff } from '#/utils/popup';
|
||||||
import type { TransferProps, TreeProps } from 'ant-design-vue';
|
import type { TreeProps } from 'ant-design-vue';
|
||||||
import { Switch, Transfer, Tree } from 'ant-design-vue';
|
import { Switch, Transfer, Tree } from 'ant-design-vue';
|
||||||
import { queryTree } from '#/api/sis/accessControl';
|
import { queryTree } from '#/api/sis/accessControl';
|
||||||
import type { TreeNode } from '#/api/common';
|
import type { TreeNode } from '#/api/common';
|
||||||
@ -51,14 +51,29 @@ async function handleClosed() {
|
|||||||
const checked = ref(false);
|
const checked = ref(false);
|
||||||
const targetKeys = ref<string[]>([]);
|
const targetKeys = ref<string[]>([]);
|
||||||
const dataSource = ref<TreeNode[]>([]);
|
const dataSource = ref<TreeNode[]>([]);
|
||||||
|
const treeData = ref<TreeNode[]>([]);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
queryAcTree();
|
queryAcTree();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function handleTreeData(treeData: TreeNode[], datasource: TreeNode[]) {
|
||||||
|
treeData.forEach((item) => {
|
||||||
|
item.title = item.label;
|
||||||
|
item.key = item.code;
|
||||||
|
datasource.push(item);
|
||||||
|
if (item.children) {
|
||||||
|
handleTreeData(item.children, datasource);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function queryAcTree() {
|
function queryAcTree() {
|
||||||
queryTree().then((res = []) => {
|
queryTree().then((res = []) => {
|
||||||
dataSource.value = res;
|
const datasource: TreeNode[] = [];
|
||||||
|
handleTreeData(res, datasource);
|
||||||
|
dataSource.value = datasource;
|
||||||
|
treeData.value = res;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,8 +106,6 @@ function isChecked(
|
|||||||
class="tree-transfer h-[400px]"
|
class="tree-transfer h-[400px]"
|
||||||
:data-source="dataSource"
|
:data-source="dataSource"
|
||||||
:render="(item) => item.title"
|
:render="(item) => item.title"
|
||||||
:show-select-all="true"
|
|
||||||
:showSearch="true"
|
|
||||||
>
|
>
|
||||||
<template #children="{ direction, selectedKeys, onItemSelect }">
|
<template #children="{ direction, selectedKeys, onItemSelect }">
|
||||||
<Tree
|
<Tree
|
||||||
@ -100,9 +113,10 @@ function isChecked(
|
|||||||
block-node
|
block-node
|
||||||
checkable
|
checkable
|
||||||
check-strictly
|
check-strictly
|
||||||
|
:show-line="true"
|
||||||
default-expand-all
|
default-expand-all
|
||||||
:checked-keys="[...selectedKeys, ...targetKeys]"
|
:checked-keys="[...selectedKeys, ...targetKeys]"
|
||||||
:tree-data="dataSource"
|
:tree-data="treeData"
|
||||||
@check="
|
@check="
|
||||||
(_, props) => {
|
(_, props) => {
|
||||||
onChecked(
|
onChecked(
|
||||||
|
Loading…
Reference in New Issue
Block a user