forked from integrated_whb/integrated_whb_vue
66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<el-input
|
||
|
|
v-model="filterText"
|
||
|
|
placeholder="输入关键字进行过滤"
|
||
|
|
class="mb-10"
|
||
|
|
/>
|
||
|
|
<el-tree
|
||
|
|
ref="treeRef"
|
||
|
|
:props="{
|
||
|
|
children: 'nodes',
|
||
|
|
label: 'name',
|
||
|
|
}"
|
||
|
|
node-key="id"
|
||
|
|
accordion
|
||
|
|
:data="treeData"
|
||
|
|
:filter-node-method="fnFilterNode"
|
||
|
|
@node-click="nodeClick"
|
||
|
|
:default-expanded-keys="[electronicFenceAreaId]"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, watch, watchEffect } from "vue";
|
||
|
|
import { layoutFnGetElectronicFenceTree } from "@/assets/js/data_dictionary.js";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "LayoutDepartmentTree",
|
||
|
|
});
|
||
|
|
const props = defineProps({
|
||
|
|
refresh: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
electronicFenceAreaId: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
|
||
|
|
const treeRef = ref(null);
|
||
|
|
const filterText = ref("");
|
||
|
|
const treeData = ref([]);
|
||
|
|
watch(filterText, (val) => {
|
||
|
|
treeRef.value.filter(val);
|
||
|
|
});
|
||
|
|
watchEffect(() => {
|
||
|
|
if (props.refresh) fnGetTreeData();
|
||
|
|
});
|
||
|
|
const fnFilterNode = (value, data) => {
|
||
|
|
if (!value) return true;
|
||
|
|
return data.name.includes(value);
|
||
|
|
};
|
||
|
|
const fnGetTreeData = async () => {
|
||
|
|
const { value } = await layoutFnGetElectronicFenceTree();
|
||
|
|
treeData.value = value;
|
||
|
|
emits("throw-data", value);
|
||
|
|
emits("update:refresh", false);
|
||
|
|
};
|
||
|
|
fnGetTreeData();
|
||
|
|
const nodeClick = (data) => {
|
||
|
|
emits("node-click", data);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|