用户选择树形输入组件

代码事例

<template>
	<p>单选</p>
	<UserTreeSelect v-model="model.single" style="width: 220px;" :extra-options="extraOptions" placeholder="请选择" @init="initUser"/>
	<p>多选</p>
	<UserTreeSelect v-model="model.multiple" style="width: 220px;" :apiParams="apiParams" multiple placeholder="请选择" />
    <p>回显</p>
	<UserTreeSelect v-model="model.multiple" style="width: 220px;" multiple placeholder="请选择" />
    <p>禁用状态<code>disabled</code></p>
	<UserTreeSelect v-model="model.multiple" style="width: 220px;" multiple disabled placeholder="请选择" />
	<p>数据模型</p>
	<fk-row>
		<JsonViewer :data="model" />
	</fk-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UserTreeSelect, TreeLike } from '@erp/biz';
const model = ref({
	single: 24,
	multiple: [],
});

const apiParams = ref({})

const extraOptions = ref([
    {
        label: '张三',
        value: 24
    }
]);

setTimeout(() => {
    model.value.multiple = [1, 2, 3];
    model.value.single = 9999;
    extraOptions.value = [
        {
            label: '李四',
            value: 9999
        }
    ]
});

setTimeout(() => {
    apiParams.value = {
        department_ids: [4],
    }
}, 3000)

function depthTraversal<T extends TreeLike>(list: T[], callback: (item: T) => void) {
	list.forEach(item => {
		if (item.admin_user) {
            depthTraversal(item.admin_user, callback);
		}
		callback && callback(item);
	});
}
const valueKeyMap = new Map();
const initUser = (userList) => {
    depthTraversal(userList, el => {
        if (!el.admin_user) {
            valueKeyMap.set(el.id, el.name);
        }
    });
    console.log(valueKeyMap, userList);
}

</script>

API

<user-tree-select> Props

参数名	描述	类型	默认值
placeholder	提示文字	string	-
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
allow-clear	是否允许清空输入框	boolean	false
model-value (v-model) (必填)	绑定值	union	-
api-url	获取用户的接口地址 默认为 /crm/directorList	string	'/crm/directorList'