You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

64 lines
1.6 KiB

<script lang="ts" setup>
2 years ago
import { onMounted, ref } from 'vue'
import type { EventDataNode } from 'ant-design-vue/es/tree'
import { BasicTree } from '@/components/Tree'
import { lazyGetDeptList } from '@/api/system/dept'
import type { Department, LazyGetDeptListParams } from '@/api/system/dept/types'
2 years ago
defineOptions({ name: 'SystemDeptTree' })
defineProps<{ dept?: string }>()
const emit = defineEmits(['update:dept'])
const departmentList = ref<Department[]>([])
2 years ago
async function requestDeptList(params?: LazyGetDeptListParams) {
return lazyGetDeptList(params)
.then((res) => {
return res.map((item) => {
return {
...item,
isLeaf: !item.hasChildren,
}
})
})
2 years ago
}
const basicTreeRef = ref<InstanceType<typeof BasicTree>>()
async function onLoadDeptList(treeNode: EventDataNode) {
try {
return await requestDeptList({ parentId: treeNode.id })
}
catch {
}
2 years ago
}
onMounted(() => {
requestDeptList()
.then((res) => {
departmentList.value = res
})
2 years ago
})
function onSelect(value: string[]) {
emit('update:dept', value[0] || '')
}
2 years ago
</script>
<template>
<div class="box-border h-full py-12px pl-12px" v-bind="$attrs">
<BasicTree
ref="basicTreeRef"
title="部门列表"
:click-row-to-expand="false"
:tree-data="departmentList"
:field-names="{ key: 'id', title: 'deptName' }"
:load-data="onLoadDeptList"
@select="onSelect"
>
<template #icon>
<span class="i-ant-design:deployment-unit-outlined" />
</template>
</BasicTree>
</div>
</template>