fix: 优化组件功能和样式
This commit is contained in:
parent
fd0783a50f
commit
862ac25057
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { onMounted, ref, useAttrs } from 'vue';
|
import { onMounted, ref, useAttrs, watch } from 'vue';
|
||||||
import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
|
import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
|
||||||
import { useBoolean } from '@sa/hooks';
|
import { useBoolean } from '@sa/hooks';
|
||||||
import { fetchGetMenuTreeSelect } from '@/service/api/system';
|
import { fetchGetMenuTreeSelect } from '@/service/api/system';
|
||||||
@ -40,6 +40,7 @@ async function getMenuList() {
|
|||||||
children: data
|
children: data
|
||||||
}
|
}
|
||||||
] as Api.System.MenuList;
|
] as Api.System.MenuList;
|
||||||
|
// 折叠到只显示根节点
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,6 +50,21 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 添加 watch 监听 expandAll 的变化,options有值后,计算expandedKeys
|
||||||
|
watch(
|
||||||
|
[expandAll, options],
|
||||||
|
([newVal]) => {
|
||||||
|
if (newVal) {
|
||||||
|
// 展开所有节点
|
||||||
|
expandedKeys.value = getAllMenuIds(options.value);
|
||||||
|
} else {
|
||||||
|
// 折叠到只显示根节点
|
||||||
|
expandedKeys.value = [0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
function renderPrefix({ option }: { option: TreeOption }) {
|
function renderPrefix({ option }: { option: TreeOption }) {
|
||||||
const renderLocalIcon = String(option.icon).startsWith('icon-');
|
const renderLocalIcon = String(option.icon).startsWith('icon-');
|
||||||
let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
|
let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
|
||||||
@ -62,7 +78,7 @@ function renderPrefix({ option }: { option: TreeOption }) {
|
|||||||
function getAllMenuIds(menu: Api.System.MenuList) {
|
function getAllMenuIds(menu: Api.System.MenuList) {
|
||||||
const menuIds: CommonType.IdType[] = [];
|
const menuIds: CommonType.IdType[] = [];
|
||||||
menu.forEach(item => {
|
menu.forEach(item => {
|
||||||
menuIds.push(item.menuId);
|
menuIds.push(item.id!);
|
||||||
if (item.children) {
|
if (item.children) {
|
||||||
menuIds.push(...getAllMenuIds(item.children));
|
menuIds.push(...getAllMenuIds(item.children));
|
||||||
}
|
}
|
||||||
@ -123,7 +139,6 @@ defineExpose({
|
|||||||
:loading="loading"
|
:loading="loading"
|
||||||
virtual-scroll
|
virtual-scroll
|
||||||
check-strategy="all"
|
check-strategy="all"
|
||||||
:default-expand-all="expandAll"
|
|
||||||
:render-prefix="renderPrefix"
|
:render-prefix="renderPrefix"
|
||||||
v-bind="attrs"
|
v-bind="attrs"
|
||||||
/>
|
/>
|
||||||
|
@ -116,7 +116,7 @@ const { columns, columnChecks, data, getData, loading, searchParams, resetSearch
|
|||||||
<ButtonIcon
|
<ButtonIcon
|
||||||
text
|
text
|
||||||
type="error"
|
type="error"
|
||||||
icon="material-symbols:person-remove-outline-rounded"
|
icon="material-symbols:delete-outline"
|
||||||
class="text-20px"
|
class="text-20px"
|
||||||
tooltipContent="强制下线"
|
tooltipContent="强制下线"
|
||||||
popconfirmContent="确认强制下线吗?"
|
popconfirmContent="确认强制下线吗?"
|
||||||
|
Loading…
Reference in New Issue
Block a user