传值
后台需要接受的参数是数组格式
但是 Cascader点击事件返回的参数是id名的数组,无法获取label值,所以需要获取节点this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels,就可以获取到。
需要做出的效果图是这样的,所以我还需要获取层级字符串。我们二三级表单是通过动态加载获取的
获取到的this.$refs.cascaderAddr.getCheckedNodes()其中path和 pathLabels分别对应id和名字,我需要将键值对拼接一起,变成后端想要的格式。 在联级选择的点击事件中写。this.form.contentVOs就是我们最后想要的
因为选择一个人就会再输入一次区和部门的信息,所以需要数组去重
//数组去重
unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].contentCode === arr[j].contentCode) {
// 如果第一个等于第二个,splice方法删除第二个
arr.splice(j, 1)
j--
}
}
}
return arr
},
// 获取部门及人员选择信息
cascaderFun(a) {
this.selectPeopleList = this.$refs.cascaderAddr.getCheckedNodes()
let obj = {}
console.log('this.selectPeopleList', this.selectPeopleList)
this.selectPeopleList.map(i => {
// 人员部门键值对匹配组成对象
i.path.map((j, jIndex) => {
i.pathLabels.map((k, kIndex) => {
if (jIndex === kIndex) {
obj = { contentCode: j, contentName: k,
choiceType: kIndex + 1,
courseId: this.classInfo.id ? this.classInfo.id : null }
this.form.contentVOs.push(obj)
}
})
})
})
},
反显
需要的样式
下面的文字显示就需要自己去拼了,上面展示了后台返回的格式,返回数据有个字段是choicType,1:区,2:部门,3:人,4:职务。所以我需要在这些返回值中选择出1,2,3的类型将信息拼接起来,所以我该怎么将这些拼接一起呢。在获取人员列表的信息时,人员信息有区和部门的信息。所以我只需要获取个人信息就可以啦
只要将deptName和userRealName拼接到一起就可以啦。但是我需要
用二级的数据去获取个人信息 -> 提取出返回值是3的id数组 -> 判断返回的数据是否有数组中的值,有进行拼接 -> 反显
res.data.contentVOs.map(i => {
if (i.choiceType === 3) {
arr.push(i.contentCode)
}
})
res.data.contentVOs.map(i => {
if (i.choiceType === 4) {
this.selectPostList.push(i)
}
if (i.choiceType === 2) {
userGetDeptId(i.contentCode).then(res => {
res.data.map(j => {
console.log(j, arr, arr.includes(String(j.userId)))
if (arr.includes(String(j.userId))) {
console.log('数据', j)
const str = j.deptName + '/' + j.userRealName
this.reverseDsiplay.push(str)
console.log('显示', j.deptName + '/' + j.userRealName, this.reverseDsiplay)
}
})
})
}
})
完整代码
<el-form-item v-if="form.learnersType === 1" label="" prop="students">
<el-cascader
ref="cascaderAddr"
v-model.trim="form.selectDepartment"
collapse-tags
style="width: 35%"
:options="deptList"
:props="deptProps"
:placeholder="reverseDsiplay.length>0?'已选择人员':'按部门及人员选择'"
:check-strictly="true"
@change="cascaderFun"
/>
<div v-if="selectPeopleList.length>0||reverseDsiplay.length>0" class="select-people">
<div class="select-title">
<span>已选择</span>
<span @click="eliminateDepartment">清空</span>
</div>
<div class="select-content">
<div v-for="(item,index) in selectPeopleList" :key="index" class="people">{{ item.pathLabels.join('/') }}</div>
</div>
<div v-if="selectPeopleList.length===0" class="select-content">
<div v-for="(item,index) in reverseDsiplay" :key="index" class="people">{{ item }}</div>
</div>
</div>
</el-form-item>
unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].contentCode === arr[j].contentCode) {
// 如果第一个等于第二个,splice方法删除第二个
arr.splice(j, 1)
j--
}
}
}
return arr
},
// 获取部门及人员选择信息
cascaderFun(a) {
this.selectPeopleList = this.$refs.cascaderAddr.getCheckedNodes()
let obj = {}
console.log('this.selectPeopleList', this.selectPeopleList)
this.selectPeopleList.map(i => {
// 人员部门键值对匹配组成对象
i.path.map((j, jIndex) => {
i.pathLabels.map((k, kIndex) => {
if (jIndex === kIndex) {
obj = { contentCode: j, contentName: k,
choiceType: kIndex + 1,
courseId: this.classInfo.id ? this.classInfo.id : null }
this.form.contentVOs.push(obj)
}
})
})
})
},
res.data.contentVOs.map(i => {
if (i.choiceType === 3) {
arr.push(i.contentCode)
}
})
res.data.contentVOs.map(i => {
if (i.choiceType === 4) {
this.selectPostList.push(i)
}
if (i.choiceType === 2) {
userGetDeptId(i.contentCode).then(res => {
res.data.map(j => {
console.log(j, arr, arr.includes(String(j.userId)))
if (arr.includes(String(j.userId))) {
console.log('数据', j)
const str = j.deptName + '/' + j.userRealName
this.reverseDsiplay.push(str)
console.log('显示', j.deptName + '/' + j.userRealName, this.reverseDsiplay)
}
})
})
}
})