部门树结构

葵葵籽_

已于 2023-05-10 16:50:11 修改

阅读量79

点赞数

文章标签： javascript vue.js 前端

于 2023-05-10 16:47:44 首次发布

本文链接：https://blog.csdn.net/qq_37187520/article/details/130604542

版权

<template>
<div style="display: flex;justify-items: center;align-items: center;justify-content:flex-start;white-space: nowrap">
<div>
<span style="margin-right:0;min-width:40px">查看部门级别：</span>
<el-select
ref="optionRef"
v-model="divLevel"
placeholder="选择级别"
style="width: 170px;"
@change="handleClassLevel">
<el-option
v-for="item in levelList"
:key="item.value"
:label="item.lable"
:value="item.value"/>
</el-select>
</div>
<div style="margin-left: 3rem">
<span style="margin-right:0;line-height: 40px">部门：</span>
<el-cascader
ref="cascader"
v-model="divisionIds"
:options="ddivisions"
:props="{multiple: true,value: 'level', label: 'className',}"
:collapse-tags="true"
filterable
placeholder="请选择"
style="width:170px"
@change="selectHandle"/>
</div>
</div>
</template>

import { getClassByRoles } from '../../../../api/division'
import { getClassCount } from '../../../../api/dept'

export default {
name: 'DepartmentLevel',
data() {
return {
divLevel: 1, levelList: [], levelName: '',
preSelected: [], // 上次选中的数据
originData: [], // 源数据平铺成一级节点
ddivisions: [],
divisionIds: [],
test: []
}
},
mounted() {
this.getMaxClass()
this.getTagDivisions()
},
methods: {
handleClassLevel() {
this.$nextTick(() => {
// 清空级联选择器选中状态
this.$refs.cascader.$refs.panel.clearCheckedNodes()
// 清除⾼亮
this.$refs.cascader.$refs.panel.activePath = []
})
this.ddivisions = []
const classArr = JSON.parse(localStorage.getItem('classByRoles'))
this.ddivisions = this.getTreeData(classArr, this.divLevel)
this.originData = []
this.getTreeInitialData(JSON.parse(localStorage.getItem('classByRoles')), this.divLevel)
},
// 递归判断列表，把最后层级的children设为undefined
// num 显示的层级
getTreeData(data, num) {
for (let i = 0; i < data.length; i++) {
if (data[i].levelFlag <= num) {
if (data[i].levelFlag === num) {
// children若为空数组，则将children设为undefined
data[i].children = undefined
} else {
// children若不为空数组，则继续递归调用本方法
this.getTreeData(data[i].children, num)
}
}
}
return data
},
getTreeInitialData(data, num) {
const that = this
for (var da of data) {
if (Number(da.levelFlag) === Number(num)) {
that.originData.push(da.level)
}
if (da.level !== '全部' && da.levelFlag && Number(da.levelFlag) !== Number(num)) {
that.getTreeInitialData(da.children, num)
}
}
},
// 最大品类级别
getMaxClass() {
const user = JSON.parse(localStorage.getItem('user'))
const par = { userName: user.username }
getClassCount(par).then(res => {
if (res != null) {
const maxClass = localStorage.getItem('maxClass')
const arr = []
const chinese = ['一', '二', '三', '四', '五', '六', '七']
for (let i = 0; i < maxClass; i++) {
const it = {
value: i + 1,
lable: chinese[i] + '级部门'
}
arr.push(it)
}
if (res === 0) {
arr.shift()
}
this.levelList = arr
this.divLevel = this.levelList[0].value
// this.divLevel = 2
}
})
},
getTagDivisions() {
const that = this
var par = { num: 5, selectRole: localStorage.getItem('selectRole') }
getClassByRoles(par).then(res => {
if (res.content != null) {
res.content[0].children.unshift({ level: '全部', className: '全部' })
localStorage.setItem('classByRoles', JSON.stringify(res.content[0].children))
that.ddivisions = that.getTreeData(res.content[0].children, that.divLevel)
this.selectHandle([['全部']])
that.getTreeInitialData(JSON.parse(localStorage.getItem('classByRoles')), that.divLevel)
}
})
},
judgetAllSelected(node) {
// 判断是否是全部,也就是看已选择的选中中包不包含"全部"
let isAllSelected = false
console.log(node)
for (let i = 0; i < node.length; i++) {
if (node[i][0] === '全部') {
isAllSelected = true
break
}
}
return isAllSelected
},
loopSelectData(list, parentNode = []) {
list.length > 0 && list.forEach(e => {
const pNode = [...parentNode] // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
if (e.children && e.children.length > 0) {
pNode.push(e.level)// 1 11
this.loopSelectData(e.children, pNode)
} else {
if (parentNode.length > 0) {
this.divisionIds.push([...parentNode, e.level])
} else {
this.divisionIds.push([e.level])
}
}
})
},
checkIsAddAllSelected() {
const list = this.ddivisions // 原始数据列表
const origin = this.originData
const now = [...this.divisionIds].filter(item => item[0] !== '全部')
// console.log('origin', origin)
// console.log('now', now)
if (origin.length > now.length) {
// 非全部时, 如果有之前选过全部,要把全部过滤掉
this.divisionIds = this.divisionIds.filter(item => item[0] !== '全部')
} else {
// 当所有的数据都选择时, 要自动把全部勾选上
if (this.divisionIds[0] && this.divisionIds[0][0] !== '全部') {
this.divisionIds = [['全部'], ...this.divisionIds]
}
}
},
async selectHandle(node = []) {
this.divisionIds = []
// 选中的数据格式: [['全部'], ['0'], ['1', '11', '111'], ['2', '21'],...]
const list = this.ddivisions
let current = [] // 获取当前选中的option, 因为element文档中没有获取当前选中的option的方法,所以我通过上一次和本地的选中数据进行对比来获取
if (node.length >= this.preSelected.length) {
const keys = this.preSelected.map(item => JSON.stringify(item))
current = node.filter(item => !keys.includes(JSON.stringify(item)))
console.log('选中某项', current)
} else {
// 取消选中
const keys = node.map(item => JSON.stringify(item))
current = this.preSelected.filter(item => !keys.includes(JSON.stringify(item)))
console.log('取消选中', current)
}
// 根据element的选中数据格式, 每一个选项都是一个列表, 列表第一项为父级value, 第二项为选中的子级value, ...以此类推
const currentValue = current.length > 0 ? current[0][0] || '' : ''
if (currentValue === '全部') {
if (this.judgetAllSelected(node)) {
this.loopSelectData(list)
} else {
this.divisionIds = []
}
} else {
this.divisionIds = node
}
this.checkIsAddAllSelected() // 主要是勾选或取消非“全部”项时，对于全部的逻辑处理
this.preSelected = this.divisionIds // 保存上一次的选择结果
this.changeHandle()
},
changeHandle() {
// 这里是处理成自己需要的数据格式, 需要把全部的这一选项过滤掉
// 原始选择的数据格式[['全部'], ['1', '11'], ['2', '21'],...]
const arr = []
this.divisionIds.forEach((item) => {
if (item[this.divLevel - 1] !== '全部' && typeof (item[this.divLevel - 1]) !== 'undefined') {
arr.push(item[this.divLevel - 1])
}
})
this.$emit('passfunction', arr.toString(), this.divLevel)
console.log('changeHandle: ', arr)
}

}

}
</script>
<style scoped>
.organization{
display: flex;
align-items: center;
font-size: 0.9rem;
}
/deep/.el-cascader__tags {
flex-wrap: nowrap !important;
width: 56%;
}
/deep/ .el-cascader__search-input{
display: none;
}
</style>

数据

"content": [
{
"level": "0",
"flevel": "-1",
"levelFlag": 0,
"sku": null,
"className": "全部",
"stateFlag": 0,
"children": [
{
"level": "001",
"flevel": "0",
"levelFlag": 1,
"sku": 8618,
"className": "生鲜日配",
"stateFlag": 0,
"children": [
{
"level": "00101",
"flevel": "001",
"levelFlag": 2,
"sku": 539,
"className": "蔬菜",
"stateFlag": 0,
"children": [
{
"level": "0010101",
"flevel": "00101",
"levelFlag": 3,
"sku": 96,
"className": "根茎类",
"stateFlag": 0,
"children": [
{
"level": "001010101",
"flevel": "0010101",
"levelFlag": 4,
"sku": 66,
"className": "根菜类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010101",
"label": "根菜类"
},
{
"level": "001010102",
"flevel": "0010101",
"levelFlag": 4,
"sku": 30,
"className": "茎菜类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010102",
"label": "茎菜类"
}
],
"childrenNum": null,
"id": "0010101",
"label": "根茎类"
},
{
"level": "0010102",
"flevel": "00101",
"levelFlag": 3,
"sku": 86,
"className": "叶菜类",
"stateFlag": 0,
"children": [
{
"level": "001010201",
"flevel": "0010102",
"levelFlag": 4,
"sku": 78,
"className": "绿叶菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010201",
"label": "绿叶菜"
},
{
"level": "001010202",
"flevel": "0010102",
"levelFlag": 4,
"sku": 8,
"className": "结球叶菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010202",
"label": "结球叶菜"
},
{
"level": "001010203",
"flevel": "0010102",
"levelFlag": 4,
"sku": 0,
"className": "绿叶菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010203",
"label": "绿叶菜"
}
],
"childrenNum": null,
"id": "0010102",
"label": "叶菜类"
},
{
"level": "0010103",
"flevel": "00101",
"levelFlag": 3,
"sku": 10,
"className": "花菜类",
"stateFlag": 0,
"children": [
{
"level": "001010301",
"flevel": "0010103",
"levelFlag": 4,
"sku": 10,
"className": "花菜类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010301",
"label": "花菜类"
}
],
"childrenNum": null,
"id": "0010103",
"label": "花菜类"
},
{
"level": "0010104",
"flevel": "00101",
"levelFlag": 3,
"sku": 160,
"className": "果菜类",
"stateFlag": 0,
"children": [
{
"level": "001010401",
"flevel": "0010104",
"levelFlag": 4,
"sku": 64,
"className": "茄果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010401",
"label": "茄果类"
},
{
"level": "001010402",
"flevel": "0010104",
"levelFlag": 4,
"sku": 41,
"className": "荚果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010402",
"label": "荚果类"
},
{
"level": "001010403",
"flevel": "0010104",
"levelFlag": 4,
"sku": 55,
"className": "瓠果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010403",
"label": "瓠果类"
},
{
"level": "001010404",
"flevel": "0010104",
"levelFlag": 4,
"sku": 0,
"className": "凉薯",
"stateFlag": 0,
"childrenNum": null,
"id": "001010404",
"label": "凉薯"
}
],
"childrenNum": null,
"id": "0010104",
"label": "果菜类"
},
{
"level": "0010105",
"flevel": "00101",
"levelFlag": 3,
"sku": 42,
"className": "菌菇类",
"stateFlag": 0,
"children": [
{
"level": "001010501",
"flevel": "0010105",
"levelFlag": 4,
"sku": 39,
"className": "菇类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010501",
"label": "菇类"
},
{
"level": "001010502",
"flevel": "0010105",
"levelFlag": 4,
"sku": 3,
"className": "菌类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010502",
"label": "菌类"
}
],
"childrenNum": null,
"id": "0010105",
"label": "菌菇类"
},
{
"level": "0010106",
"flevel": "00101",
"levelFlag": 3,
"sku": 16,
"className": "水生类",
"stateFlag": 0,
"children": [
{
"level": "001010601",
"flevel": "0010106",
"levelFlag": 4,
"sku": 16,
"className": "水生类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010601",
"label": "水生类"
},
{
"level": "001010602",
"flevel": "0010106",
"levelFlag": 4,
"sku": 0,
"className": "花菜类",
"stateFlag": 0,
"childrenNum": null,
"id": "001010602",
"label": "花菜类"
}
],
"childrenNum": null,
"id": "0010106",
"label": "水生类"
},
{
"level": "0010107",
"flevel": "00101",
"levelFlag": 3,
"sku": 23,
"className": "调味类",
"stateFlag": 0,
"children": [
{
"level": "001010701",
"flevel": "0010107",
"levelFlag": 4,
"sku": 23,
"className": "调味菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010701",
"label": "调味菜"
}
],
"childrenNum": null,
"id": "0010107",
"label": "调味类"
},
{
"level": "0010108",
"flevel": "00101",
"levelFlag": 3,
"sku": 24,
"className": "精品蔬菜",
"stateFlag": 0,
"children": [
{
"level": "001010801",
"flevel": "0010108",
"levelFlag": 4,
"sku": 2,
"className": "有机蔬菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010801",
"label": "有机蔬菜"
},
{
"level": "001010802",
"flevel": "0010108",
"levelFlag": 4,
"sku": 22,
"className": "净菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010802",
"label": "净菜"
},
{
"level": "001010803",
"flevel": "0010108",
"levelFlag": 4,
"sku": 0,
"className": "蔬菜礼盒",
"stateFlag": 0,
"childrenNum": null,
"id": "001010803",
"label": "蔬菜礼盒"
}
],
"childrenNum": null,
"id": "0010108",
"label": "精品蔬菜"
},
{
"level": "0010109",
"flevel": "00101",
"levelFlag": 3,
"sku": 82,
"className": "散装酱菜",
"stateFlag": 0,
"children": [
{
"level": "001010901",
"flevel": "0010109",
"levelFlag": 4,
"sku": 82,
"className": "散装酱菜",
"stateFlag": 0,
"childrenNum": null,
"id": "001010901",
"label": "散装酱菜"
}
],
"childrenNum": null,
"id": "0010109",
"label": "散装酱菜"
}
],
"childrenNum": null,
"id": "00101",
"label": "蔬菜"
},
{
"level": "00102",
"flevel": "001",
"levelFlag": 2,
"sku": 715,
"className": "水果",
"stateFlag": 0,
"children": [
{
"level": "0010201",
"flevel": "00102",
"levelFlag": 3,
"sku": 124,
"className": "柑橘柚类",
"stateFlag": 0,
"children": [
{
"level": "001020101",
"flevel": "0010201",
"levelFlag": 4,
"sku": 30,
"className": "橙类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020101",
"label": "橙类"
},
{
"level": "001020102",
"flevel": "0010201",
"levelFlag": 4,
"sku": 56,
"className": "桔类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020102",
"label": "桔类"
},
{
"level": "001020103",
"flevel": "0010201",
"levelFlag": 4,
"sku": 38,
"className": "柚类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020103",
"label": "柚类"
}
],
"childrenNum": null,
"id": "0010201",
"label": "柑橘柚类"
},
{
"level": "0010202",
"flevel": "00102",
"levelFlag": 3,
"sku": 78,
"className": "瓜类",
"stateFlag": 0,
"children": [
{
"level": "001020201",
"flevel": "0010202",
"levelFlag": 4,
"sku": 35,
"className": "西瓜",
"stateFlag": 0,
"childrenNum": null,
"id": "001020201",
"label": "西瓜"
},
{
"level": "001020202",
"flevel": "0010202",
"levelFlag": 4,
"sku": 43,
"className": "蜜瓜",
"stateFlag": 0,
"childrenNum": null,
"id": "001020202",
"label": "蜜瓜"
}
],
"childrenNum": null,
"id": "0010202",
"label": "瓜类"
},
{
"level": "0010203",
"flevel": "00102",
"levelFlag": 3,
"sku": 90,
"className": "核果类",
"stateFlag": 0,
"children": [
{
"level": "001020301",
"flevel": "0010203",
"levelFlag": 4,
"sku": 90,
"className": "核果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020301",
"label": "核果类"
},
{
"level": "001020302",
"flevel": "0010203",
"levelFlag": 4,
"sku": 0,
"className": "银宝台湾烤肠",
"stateFlag": 0,
"childrenNum": null,
"id": "001020302",
"label": "银宝台湾烤肠"
}
],
"childrenNum": null,
"id": "0010203",
"label": "核果类"
},
{
"level": "0010204",
"flevel": "00102",
"levelFlag": 3,
"sku": 122,
"className": "浆果类",
"stateFlag": 0,
"children": [
{
"level": "001020401",
"flevel": "0010204",
"levelFlag": 4,
"sku": 83,
"className": "有籽浆果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020401",
"label": "有籽浆果"
},
{
"level": "001020402",
"flevel": "0010204",
"levelFlag": 4,
"sku": 39,
"className": "无籽浆果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020402",
"label": "无籽浆果"
}
],
"childrenNum": null,
"id": "0010204",
"label": "浆果类"
},
{
"level": "0010205",
"flevel": "00102",
"levelFlag": 3,
"sku": 112,
"className": "仁果类",
"stateFlag": 0,
"children": [
{
"level": "001020501",
"flevel": "0010205",
"levelFlag": 4,
"sku": 67,
"className": "苹果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020501",
"label": "苹果类"
},
{
"level": "001020502",
"flevel": "0010205",
"levelFlag": 4,
"sku": 37,
"className": "梨类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020502",
"label": "梨类"
},
{
"level": "001020503",
"flevel": "0010205",
"levelFlag": 4,
"sku": 8,
"className": "其他仁果类",
"stateFlag": 0,
"childrenNum": null,
"id": "001020503",
"label": "其他仁果类"
}
],
"childrenNum": null,
"id": "0010205",
"label": "仁果类"
},
{
"level": "0010206",
"flevel": "00102",
"levelFlag": 3,
"sku": 107,
"className": "热带水果",
"stateFlag": 0,
"children": [
{
"level": "001020601",
"flevel": "0010206",
"levelFlag": 4,
"sku": 49,
"className": "有核热带水果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020601",
"label": "有核热带水果"
},
{
"level": "001020602",
"flevel": "0010206",
"levelFlag": 4,
"sku": 58,
"className": "无核热带水果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020602",
"label": "无核热带水果"
}
],
"childrenNum": null,
"id": "0010206",
"label": "热带水果"
},
{
"level": "0010207",
"flevel": "00102",
"levelFlag": 3,
"sku": 42,
"className": "进口水果",
"stateFlag": 0,
"children": [
{
"level": "001020701",
"flevel": "0010207",
"levelFlag": 4,
"sku": 42,
"className": "进口水果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020701",
"label": "进口水果"
},
{
"level": "001020702",
"flevel": "0010207",
"levelFlag": 4,
"sku": 0,
"className": "台湾水果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020702",
"label": "台湾水果"
}
],
"childrenNum": null,
"id": "0010207",
"label": "进口水果"
},
{
"level": "0010208",
"flevel": "00102",
"levelFlag": 3,
"sku": 40,
"className": "盒装水果",
"stateFlag": 0,
"children": [
{
"level": "001020801",
"flevel": "0010208",
"levelFlag": 4,
"sku": 34,
"className": "果篮、礼篮",
"stateFlag": 0,
"childrenNum": null,
"id": "001020801",
"label": "果篮、礼篮"
},
{
"level": "001020802",
"flevel": "0010208",
"levelFlag": 4,
"sku": 6,
"className": "加工水果",
"stateFlag": 0,
"childrenNum": null,
"id": "001020802",
"label": "加工水果"
}
],
"childrenNum": null,
"id": "0010208",
"label": "盒装水果"
}
],
"childrenNum": null,
"id": "00102",
"label": "水果"
},

葵葵籽_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
部门树结构

res.content[0].children.unshift({ level: '全部', className: '全部' })// 选中的数据格式: [['全部'], ['0'], ['1', '11', '111'], ['2', '21'],...]== '全部') {const chinese = ['一', '二', '三', '四', '五', '六', '七']// 原始选择的数据格式[['全部'], ['1', '11'], ['2', '21'],...]
复制链接

扫一扫