fix(components): 修复部门选择组件非树结构,默认展开失败问题
This commit is contained in:
parent
aeb736ebf1
commit
da1c16e023
@ -2,7 +2,7 @@
|
|||||||
import { useAttrs } from 'vue';
|
import { useAttrs } from 'vue';
|
||||||
import type { TreeSelectProps } from 'naive-ui';
|
import type { TreeSelectProps } from 'naive-ui';
|
||||||
import { useLoading } from '@sa/hooks';
|
import { useLoading } from '@sa/hooks';
|
||||||
import { fetchGetDeptSelect } from '@/service/api/system';
|
import { fetchGetDeptTree } from '@/service/api/system';
|
||||||
|
|
||||||
defineOptions({ name: 'DeptTreeSelect' });
|
defineOptions({ name: 'DeptTreeSelect' });
|
||||||
|
|
||||||
@ -13,16 +13,21 @@ interface Props {
|
|||||||
defineProps<Props>();
|
defineProps<Props>();
|
||||||
|
|
||||||
const value = defineModel<CommonType.IdType | null>('value', { required: false });
|
const value = defineModel<CommonType.IdType | null>('value', { required: false });
|
||||||
const options = defineModel<Api.System.Dept[]>('options', { required: false, default: [] });
|
const options = defineModel<Api.Common.CommonTreeRecord>('options', { required: false, default: [] });
|
||||||
|
const expandedKeys = defineModel<CommonType.IdType[]>('expandedKeys', { required: false, default: [] });
|
||||||
|
|
||||||
const attrs: TreeSelectProps = useAttrs();
|
const attrs: TreeSelectProps = useAttrs();
|
||||||
const { loading, startLoading, endLoading } = useLoading();
|
const { loading, startLoading, endLoading } = useLoading();
|
||||||
|
|
||||||
async function getDeptList() {
|
async function getDeptList() {
|
||||||
startLoading();
|
startLoading();
|
||||||
const { error, data } = await fetchGetDeptSelect();
|
const { error, data } = await fetchGetDeptTree();
|
||||||
if (error) return;
|
if (error) return;
|
||||||
options.value = data;
|
options.value = data;
|
||||||
|
// 设置默认展开的节点
|
||||||
|
if (data?.length && !expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [data[0].id];
|
||||||
|
}
|
||||||
endLoading();
|
endLoading();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -32,13 +37,13 @@ getDeptList();
|
|||||||
<template>
|
<template>
|
||||||
<NTreeSelect
|
<NTreeSelect
|
||||||
v-model:value="value"
|
v-model:value="value"
|
||||||
|
v-model:expanded-keys="expandedKeys"
|
||||||
filterable
|
filterable
|
||||||
class="h-full"
|
class="h-full"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
key-field="deptId"
|
key-field="id"
|
||||||
label-field="deptName"
|
label-field="label"
|
||||||
:options="options"
|
:options="options as []"
|
||||||
:default-expanded-keys="[0]"
|
|
||||||
v-bind="attrs"
|
v-bind="attrs"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -149,7 +149,6 @@ defineExpose({
|
|||||||
<NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
|
<NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
|
||||||
</div>
|
</div>
|
||||||
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
|
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
|
||||||
{{ checkedKeys }}
|
|
||||||
<NTree
|
<NTree
|
||||||
ref="menuTreeRef"
|
ref="menuTreeRef"
|
||||||
v-model:checked-keys="checkedKeys"
|
v-model:checked-keys="checkedKeys"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user