160 lines
3.7 KiB
Vue
160 lines
3.7 KiB
Vue
<template>
|
|
<div class="el-tree-select">
|
|
<el-tree-select
|
|
v-model="state.selectIdList"
|
|
id="tree-option"
|
|
ref="selectTree"
|
|
:accordion="true"
|
|
:data="state.options"
|
|
:props="state.objMap"
|
|
:node-key="state.objMap.value"
|
|
:expand-on-click-node="true"
|
|
:default-expanded-keys="defaultExpandedKey"
|
|
:filter-node-method="filterNode"
|
|
@node-click="handleNodeClick"
|
|
@check="handleCheck"
|
|
@visible-change="(e) => e && getOptions()"
|
|
clearable
|
|
highlight-current
|
|
default-expand-all
|
|
show-checkbox
|
|
collapse-tags
|
|
multiple
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="TreeMultipleSelect">
|
|
import { deptTree } from "/@/api/admin/dept"
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const selectIdList = defineModel()
|
|
|
|
const state = reactive({
|
|
objMap: {
|
|
value: "id",
|
|
label: "name",
|
|
children: "children",
|
|
},
|
|
selectIdList: selectIdList,
|
|
loading: false,
|
|
options: [],
|
|
checkedTreeNodes: [],
|
|
})
|
|
|
|
watch(
|
|
selectIdList,
|
|
(newVal, oldValue) => {
|
|
if (newVal == oldValue) return
|
|
state.selectIdList = newVal
|
|
getOptions()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
const emit = defineEmits(["update:value"])
|
|
|
|
const valueTitle = ref("")
|
|
const defaultExpandedKey = ref([])
|
|
|
|
/**
|
|
* 初始化下拉菜单选择器的默认值，并设置默认选中和默认展开。
|
|
*/
|
|
function initHandle() {
|
|
nextTick(() => {
|
|
const selectedValue = selectIdList.value
|
|
if (selectedValue !== null && typeof selectedValue !== "undefined") {
|
|
const node = proxy.$refs.selectTree.getNode(selectedValue)
|
|
if (node) {
|
|
valueTitle.value = node.data[state.objMap.label]
|
|
proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
|
|
defaultExpandedKey.value = [selectedValue] // 设置默认展开
|
|
}
|
|
} else {
|
|
clearHandle()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击某一节点时触发的事件，更新当前的选中值和展开状态。
|
|
* @param {Object} node - 被点击的节点对象
|
|
*/
|
|
function handleNodeClick(node) {
|
|
valueTitle.value = node[state.objMap.label]
|
|
selectIdList.value = node[state.objMap.value]
|
|
defaultExpandedKey.value = []
|
|
proxy.$refs.treeSelect.blur()
|
|
selectFilterData("")
|
|
}
|
|
|
|
/**
|
|
* 勾选树节点时
|
|
*/
|
|
const handleCheck = (data, checkStatus) => {
|
|
const { checkedNodes } = checkStatus
|
|
state.checkedTreeNodes = checkedNodes
|
|
if (state.checkedTreeNodes.length > 0) {
|
|
state.switch = false
|
|
}
|
|
let deptIds = []
|
|
if (state.checkedTreeNodes && state.checkedTreeNodes.length) {
|
|
deptIds = state.checkedTreeNodes.map((v) => v[state.objMap.value])
|
|
}
|
|
state.selectIdList = deptIds
|
|
}
|
|
|
|
/**
|
|
* 搜索过滤函数，根据输入的值来过滤显示的节点。
|
|
* @param {String} val - 输入框内的搜索关键字
|
|
*/
|
|
function selectFilterData(val) {
|
|
proxy.$refs.selectTree.filter(val)
|
|
}
|
|
|
|
/**
|
|
* 根据输入的值来判断节点是否需要显示。
|
|
* @param {String} value - 输入框内的搜索关键字
|
|
* @param {Object} data - 当前处理的节点数据
|
|
* @returns {Boolean} - 是否需要显示此节点
|
|
*/
|
|
function filterNode(value, data) {
|
|
if (!value) return true
|
|
return data[state.objMap["label"]].indexOf(value) !== -1
|
|
}
|
|
/**
|
|
* 清空当前的选中状态，并重置展开状态。
|
|
*/
|
|
function clearHandle() {
|
|
valueTitle.value = ""
|
|
valueId.value = ""
|
|
defaultExpandedKey.value = []
|
|
clearSelected()
|
|
}
|
|
/**
|
|
* 删除所有选中状态的节点。
|
|
*/
|
|
function clearSelected() {
|
|
const allNode = document.querySelectorAll("#tree-option .el-tree-node")
|
|
allNode.forEach((element) => element.classList.remove("is-current"))
|
|
}
|
|
|
|
/**
|
|
* 获取数据
|
|
*/
|
|
async function getOptions() {
|
|
try {
|
|
state.loading = true
|
|
const _pa = {}
|
|
const { data } = await deptTree(_pa)
|
|
state.options = data
|
|
} finally {
|
|
setTimeout(() => (state.loading = false), 500)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "/@/assets/styles/variables.module.scss";
|
|
</style>
|