159 lines
3.3 KiB
Vue
159 lines
3.3 KiB
Vue
<template>
|
|
<div class="departmentTree-box" :style="{ width: width, height: '100%' }">
|
|
<div class="depar_hear">
|
|
<el-input
|
|
v-model="listQuery.deptname"
|
|
v-if="filterable"
|
|
clearable
|
|
:debounce="500"
|
|
@input="filterTextChange"
|
|
placeholder="请输入筛选条件"
|
|
/>
|
|
</div>
|
|
<div class="depar_foot">
|
|
<el-tree
|
|
ref="treeRef"
|
|
class="filter-tree"
|
|
:props="endProps"
|
|
lazy
|
|
:load="loadNode"
|
|
@node-click="nodeClick"
|
|
:filter-node-method="filterNode"
|
|
:data="treeData"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { debounce } from "lodash";
|
|
import { getItem } from "@/utils/storage";
|
|
import { COMPONENT_WIDTH } from "@/constant";
|
|
import { ref, defineProps, defineEmits, watch, computed, onMounted } from "vue";
|
|
import { selectDeptPage, getAllChildDeptList } from "@/api/user-manage";
|
|
const props = defineProps({
|
|
//获取组件传值
|
|
placeholder: {
|
|
default: "请选择",
|
|
type: String
|
|
},
|
|
multiple: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
filterable: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
modelValue: {
|
|
type: Number
|
|
},
|
|
width: {
|
|
default: COMPONENT_WIDTH,
|
|
type: String
|
|
},
|
|
isBmId:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
});
|
|
const listQuery = ref({
|
|
deptname: "",
|
|
deptcode: "",
|
|
parentid: ""
|
|
});
|
|
const treeRef = ref(null);
|
|
const node_had = ref([]);
|
|
const resolve_had = ref([]);
|
|
//防抖处理
|
|
const filterTextChange = debounce(inputChange, 500);
|
|
onMounted(() => {});
|
|
//获取部门数据
|
|
function getTreeData() {
|
|
selectDeptPage(listQuery.value).then((res) => {
|
|
for (let i = 0; i < res.length; i++) {
|
|
res[i].leaf = !res[i].hasChildren;
|
|
}
|
|
treeData.value = res;
|
|
});
|
|
}
|
|
//搜索查询
|
|
function inputChange(e) {
|
|
selectDeptPage(listQuery.value).then((res) => {
|
|
treeData.value = res;
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => listQuery.value.deptname,
|
|
(val) => {
|
|
treeRef.value.filter("tree", val);
|
|
}
|
|
);
|
|
const endProps = {
|
|
children: "childDeptList",
|
|
value: "id",
|
|
label: "orgName",
|
|
isLeaf: "leaf"
|
|
};
|
|
const treeData = ref([]);
|
|
//懒加载方法
|
|
async function loadNode(node, resolve) {
|
|
listQuery.value.parentid = node.data.id;
|
|
if (node.level === 0) {
|
|
node_had.value = node;
|
|
resolve_had.value = resolve;
|
|
getTreeData();
|
|
}
|
|
if (node.level >= 1) {
|
|
selectDeptPage(listQuery.value).then((res) => {
|
|
for (let i = 0; i < res.length; i++) {
|
|
res[i].leaf = !res[i].hasChildren;
|
|
}
|
|
resolve(res);
|
|
});
|
|
}
|
|
}
|
|
const filterNode = (value, data) => {
|
|
if (!value) return true;
|
|
return data.orgName.includes(value);
|
|
};
|
|
|
|
const nodeClick = (node) => {
|
|
if(props.isBmId){
|
|
emits("update:modelValue", node.id);
|
|
}else{
|
|
emits("update:modelValue", node.orgCode);
|
|
}
|
|
};
|
|
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
const handleChange = (e) => {
|
|
if (props.multiple === true) {
|
|
const data = e.map((item) => {
|
|
return item[item.length - 1];
|
|
});
|
|
emits("update:modelValue", data);
|
|
} else {
|
|
const data = e[0];
|
|
emits("update:modelValue", data);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.depar_hear {
|
|
height: 32px;
|
|
}
|
|
.depar_foot {
|
|
height: calc(100% - 32px);
|
|
overflow: auto;
|
|
width: 280px;
|
|
width: 100%;
|
|
min-width: 300px;
|
|
}
|
|
.departmentTree-box {
|
|
overflow: auto;
|
|
}
|
|
</style>
|