同事的代码?\:
{
"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": "叶菜类"
},
],
"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": "橙类"
}
],
"childrenNum": null,
"id": "0010201",
"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": "热带水果"
},
],
"childrenNum": null,
"id": "00102",
"label": "水果"
},
],
"childrenNum": 15,
"id": "001",
"label": "生鲜日配"
},
{
"level": "002",
"flevel": "0",
"levelFlag": 1,
"sku": 2027,
"className": "粮油调味",
"stateFlag": 0,
"children": [
{
"level": "00201",
"flevel": "002",
"levelFlag": 2,
"sku": 625,
"className": "粮油",
"stateFlag": 0,
"children": [
{
"level": "0020101",
"flevel": "00201",
"levelFlag": 3,
"sku": 120,
"className": "米",
"stateFlag": 0,
"children": [
{
"level": "002010101",
"flevel": "0020101",
"levelFlag": 4,
"sku": 66,
"className": "散称米",
"stateFlag": 0,
"childrenNum": null,
"id": "002010101",
"label": "散称米"
},
{
"level": "002010102",
"flevel": "0020101",
"levelFlag": 4,
"sku": 54,
"className": "包装米",
"stateFlag": 0,
"childrenNum": null,
"id": "002010102",
"label": "包装米"
}
],
"childrenNum": null,
"id": "0020101",
"label": "米"
},
],
"childrenNum": null,
"id": "00201",
"label": "粮油"
},
{
"level": "00202",
"flevel": "002",
"levelFlag": 2,
"sku": 1402,
"className": "调味品",
"stateFlag": 0,
"children": [
{
"level": "0020201",
"flevel": "00202",
"levelFlag": 3,
"sku": 36,
"className": "盐",
"stateFlag": 0,
"children": [
{
"level": "002020101",
"flevel": "0020201",
"levelFlag": 4,
"sku": 35,
"className": "盐",
"stateFlag": 0,
"childrenNum": null,
"id": "002020101",
"label": "盐"
},
{
"level": "002020102",
"flevel": "0020201",
"levelFlag": 4,
"sku": 1,
"className": "特色盐",
"stateFlag": 0,
"childrenNum": null,
"id": "002020102",
"label": "特色盐"
}
],
"childrenNum": null,
"id": "0020201",
"label": "盐"
},
{
"level": "0020202",
"flevel": "00202",
"levelFlag": 3,
"sku": 155,
"className": "酱油",
"stateFlag": 0,
"children": [
{
"level": "002020201",
"flevel": "0020202",
"levelFlag": 4,
"sku": 52,
"className": "味极鲜酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020201",
"label": "味极鲜酱油"
},
{
"level": "002020202",
"flevel": "0020202",
"levelFlag": 4,
"sku": 29,
"className": "黄豆酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020202",
"label": "黄豆酱油"
},
{
"level": "002020203",
"flevel": "0020202",
"levelFlag": 4,
"sku": 43,
"className": "生抽酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020203",
"label": "生抽酱油"
},
{
"level": "002020204",
"flevel": "0020202",
"levelFlag": 4,
"sku": 24,
"className": "老抽酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020204",
"label": "老抽酱油"
},
{
"level": "002020205",
"flevel": "0020202",
"levelFlag": 4,
"sku": 3,
"className": "有机酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020205",
"label": "有机酱油"
},
{
"level": "002020206",
"flevel": "0020202",
"levelFlag": 4,
"sku": 0,
"className": "营养酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020206",
"label": "营养酱油"
},
{
"level": "002020207",
"flevel": "0020202",
"levelFlag": 4,
"sku": 1,
"className": "儿童酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020207",
"label": "儿童酱油"
},
{
"level": "002020208",
"flevel": "0020202",
"levelFlag": 4,
"sku": 3,
"className": "其它酱油",
"stateFlag": 0,
"childrenNum": null,
"id": "002020208",
"label": "其它酱油"
}
],
"childrenNum": null,
"id": "0020202",
"label": "酱油"
},
],
"childrenNum": null,
"id": "00202",
"label": "调味品"
}
],
"childrenNum": 2,
"id": "002",
"label": "粮油调味"
},
],
"childrenNum": null,
"id": "0",
"label": "全部"
}
],
"totalElements"= 2429
}<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>
<script>
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>
5450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
