fix:将部门管理中的树形结构改为受控的模式,不在是点一个而全部展开或者收缩
This commit is contained in:
parent
8c202c45dc
commit
9741192bee
|
@ -70,6 +70,6 @@ declare global {
|
|||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
|
|
@ -9,13 +9,15 @@
|
|||
<GiTable
|
||||
v-show="viewType === 'table'"
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
row-key="deptId"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="false"
|
||||
:disabled-column-keys="['name']"
|
||||
:expanded-keys="expandedKeys"
|
||||
@expand="onExpand"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #expand-icon="{ expanded }">
|
||||
|
@ -109,9 +111,10 @@ const {
|
|||
} = useTable<DeptResp>(() => getDeptTree(queryForm), {
|
||||
immediate: true,
|
||||
onSuccess: () => {
|
||||
nextTick(() => {
|
||||
tableRef.value?.tableRef?.expandAll(true)
|
||||
})
|
||||
// nextTick(() => {
|
||||
// tableRef.value?.tableRef?.expandAll(true)
|
||||
// })
|
||||
// 移除自动全部展开,保持默认折叠
|
||||
},
|
||||
})
|
||||
// 查看视图类型
|
||||
|
@ -124,6 +127,8 @@ const menus = [
|
|||
]
|
||||
// 所有节点展开状态
|
||||
const nodeExpandAll = ref<boolean>(true)
|
||||
// 表格视图展开的节点
|
||||
const expandedKeys = ref<string[]>([])
|
||||
// 过滤树
|
||||
const searchData = (name: string) => {
|
||||
const loop = (data: DeptResp[]) => {
|
||||
|
@ -204,6 +209,17 @@ const handleAdd = (record: DeptResp) => {
|
|||
const onUpdate = (record: DeptResp) => {
|
||||
DeptAddModalRef.value?.onUpdate(record.deptId)
|
||||
}
|
||||
|
||||
const onExpand = (expanded: boolean, record: DeptResp) => {
|
||||
const key = record.deptId
|
||||
if (expanded) {
|
||||
if (!expandedKeys.value.includes(key)) {
|
||||
expandedKeys.value.push(key)
|
||||
}
|
||||
} else {
|
||||
expandedKeys.value = expandedKeys.value.filter(k => k !== key)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<h1>这个暂时写不了,角色管理采用菜单权限的设置</h1>
|
||||
<GiPageLayout :header-style="{ padding: 0, borderBottom: 'none' }">
|
||||
<template #left>
|
||||
<RoleTree @node-click="handleSelectRole" />
|
||||
|
|
Loading…
Reference in New Issue