84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<!-- 部门树 -->
|
||
<template>
|
||
<el-card shadow="never">
|
||
<el-input v-model="deptName" placeholder="部门名称" clearable @input="deptNameInput">
|
||
<template #prefix>
|
||
<el-icon><Search /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
|
||
<el-tree
|
||
ref="deptTreeRef"
|
||
class="mt-2"
|
||
:data="deptList"
|
||
:props="{ children: 'children', label: 'name', disabled: '' }"
|
||
node-key="id"
|
||
highlight-current
|
||
:current-node-key="deptList?.length ? deptList[0].id : ''"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="handleFilter"
|
||
default-expand-all
|
||
@node-click="handleNodeClick"
|
||
/>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { UserDepartment } from "@/api/calibration/department";
|
||
import { throttle } from "@/utils/auxiliaryFunction";
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: [String, Number],
|
||
default: undefined,
|
||
},
|
||
});
|
||
|
||
const deptList = ref<any[]>(); // 部门列表
|
||
const deptTreeRef = ref(); // 部门树
|
||
const deptName = ref(""); // 部门名称
|
||
|
||
const emits = defineEmits(["node-click", "update:modelValue"]);
|
||
|
||
const deptId = useVModel(props, "modelValue", emits);
|
||
|
||
// watchEffect(
|
||
// () => {
|
||
// deptTreeRef.value.filter(deptName.value);
|
||
// },
|
||
// {
|
||
// flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
|
||
// }
|
||
// );
|
||
|
||
const deptNameInput = throttle((value: string) => {
|
||
DepartmentList(value);
|
||
}, 300);
|
||
/**
|
||
* 部门筛选
|
||
*/
|
||
function handleFilter(value: string, data: any) {
|
||
if (!value) {
|
||
return true;
|
||
}
|
||
return data.label.indexOf(value) !== -1;
|
||
}
|
||
|
||
/** 部门树节点 Click */
|
||
function handleNodeClick(data: { [key: string]: any }) {
|
||
deptId.value = data.name;
|
||
emits("node-click");
|
||
}
|
||
const DepartmentList = (name: string = "") => {
|
||
UserDepartment(name).then((res: any) => {
|
||
deptList.value = res.data;
|
||
if (deptList.value && deptList.value.length > 0) {
|
||
deptId.value = deptList.value[0].name;
|
||
}
|
||
});
|
||
};
|
||
|
||
onBeforeMount(() => {
|
||
DepartmentList();
|
||
});
|
||
</script>
|