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.
73 lines
1.8 KiB
73 lines
1.8 KiB
<!--
|
|
* 部门 树形选择框
|
|
|
|
* @Author: 1024创新实验室-主任：卓大
|
|
* @Date: 2022-09-12 23:05:43
|
|
* @Wechat: zhuda1024
|
|
* @Email: lab1024@163.com
|
|
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
|
*
|
|
-->
|
|
<template>
|
|
<a-tree-select
|
|
:value="props.value"
|
|
:treeData="treeData"
|
|
:fieldNames="{ label: 'departmentName', key: 'departmentId', value: 'departmentId' }"
|
|
show-search
|
|
style="width: 100%"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
placeholder="请选择部门"
|
|
allow-clear
|
|
tree-default-expand-all
|
|
:multiple="props.multiple"
|
|
:filterTreeNode="filterTreeNode"
|
|
@change="onChange"
|
|
/>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import _ from 'lodash';
|
|
import { departmentApi } from '/@/api/system/department-api';
|
|
|
|
const props = defineProps({
|
|
// 绑定值
|
|
value: Number,
|
|
// 单选多选
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:value']);
|
|
|
|
let treeData = ref([]);
|
|
onMounted(queryDepartmentTree);
|
|
|
|
async function queryDepartmentTree() {
|
|
let res = await departmentApi.queryDepartmentTree();
|
|
treeData.value = res.data;
|
|
}
|
|
|
|
function onChange(e) {
|
|
emit('update:value', e);
|
|
}
|
|
|
|
// 自定义筛选函数，支持汉字模糊匹配
|
|
function filterTreeNode(inputValue, treeNode) {
|
|
// 获取节点的部门名称
|
|
const departmentName = treeNode.departmentName || '';
|
|
|
|
// 如果输入为空，显示所有节点
|
|
if (!inputValue) {
|
|
return true;
|
|
}
|
|
|
|
// 支持汉字模糊匹配：检查部门名称是否包含输入的文字
|
|
return departmentName.includes(inputValue);
|
|
}
|
|
|
|
defineExpose({
|
|
queryDepartmentTree,
|
|
});
|
|
</script>
|
|
|