vue每次点击弹框重新加载子组件
需求：每次点击重新加载子组件，传入参数，进行选人的校验
父组件
使用v-if="showIntercomGroup"控制，每次打开弹框都重新加载组件
<div v-if="showIntercomGroup">
<el-dialog title="选择 " class="el-dialogStyle" :visible.sync="showIntercomGroup"
width="70%"
center
top="6vh"
>
<IntercomGroup style="z-index: 999999" :FleetId="scsFleetId" :userId="user.userId" :courentType="type" @changeShow="handleChildClose" @childConfirm="childHandleConfirm(arguments)" ref="addOrUpdateRef">IntercomGroup>
el-dialog>
div>
子组件
<TabPane label="群组" icon="ios-people">
<div class="tree-self">
<el-tree
check-strictly
:load="loadGroupChildren"
show-checkbox
highlight-current
lazy
node-key="id"
:props="defaultProps"
:filter-node-method="filterNode"
ref="grouptree"
@check-change="handleCheckChange"
>
<span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
<span v-if="data.type===0"><img src="@/assets/images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{
{ node.label }}span>
<span v-if="data.type===1"><img src="@/assets/images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{
{ node.label }}span>
<span v-if="data.type===3"><img src="@/assets/images/mapicon/tree_group.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{
{ node.label }}span>
<span v-if="data.type===2"><img src="@/assets/images/mapicon/tree_sub.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{
{ node.label }}span>
span>
el-tree>
div>
TabPane>
通过this.courentType判断是父组件传过来的选择类型，从而进行数据筛选，例如添加会话成员就不允许选择群组
export default {
name: 'IntercomGroup',
props: {
msg: String,
states: Boolean,
addOrUpdateVisible: {
type: Boolean,
default: false
},
courentType: String,
FleetId: Number,
userId: Number
},
data () {
const data = [
{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}]
}]
}, {
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}]
}]
}
]
return {
showMenu:false,
saveDatas:[],//保存坐席集团数据
defaultProps: {
label: 'name',
isLeaf: 'isLeaf'
},
SystemAddressBookdefaultProps: {
label: 'name',
isLeaf: 'isLeaf'
},
agentDefaultProps: {
label: 'name',
isLeaf: 'isLeaf'
},
money: '',
isShowTree: true,
//弹框
IntercomGroup: false,
IntercomGroup2: false,
data: JSON.parse(JSON.stringify(data)),
tableData: [{
key: 1,
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
chooseDatas: [
{
extnum: "5206",
id: 1022,
name: "dwinner",
number: "dwinner",
type: 5
}, {
System_type_num: "110",
extnum: "3003",
id: 1603013,
name: "1603013",
number: "1603013",
type: 5
},
],
type: ''
}
},
watch: {
// 监听 addOrUpdateVisible 改变
addOrUpdateVisible (oldVal, newVal) {
this.IntercomGroup = this.addOrUpdateVisible
},
},
methods: {
//群组节点数据
loadGroupChildren: function (node, resolve) {
if (node.data) {
this.getGroupChild(node.data.id, node.data.type, resolve)
} else {
setTimeout(() => {
this.getGroupChild(this.FleetId, 0, resolve)
}, 0)
}
},
getGroupChild (id, type, resolve) {
CommonChooseDialogApi.getGroup({
parentId: id,
type: type,
user: 0,
managePriv: '0'
})
.then((res)=> {
if (this.courentType !=''||this.courentType != 'undefined'){
switch (this.courentType) {
case 'messagesAddMerber': //针对消息模块-会话添加成员过滤群组
console.log("会话添加成员过滤群组");
if(res.success){
var childNodes = [];
var changeData = [];
if (res.obj && res.obj.length>0) {
changeData = res.obj;
for(var i=0;i<changeData.length;i++){
if(changeData[i].type ==2){
changeData[i].isLeaf=true;
}
if (changeData[i].type ==1 ||changeData[i].type ==3 ){
changeData[i].disabled=true;
}
}
childNodes = changeData;
}else {
/* var node = this.$refs.grouptree.getNode(id);
node.loading = false;
return*/
}
resolve(childNodes);
}
break
case 'intercomBoxEntrancePocAdd': //针对对讲模块-过滤集团、话机
if(res.success){
var childNodes = [];
var changeData = [];
if (res.obj && res.obj.length>0) {
changeData = res.obj;
for(var i=0;i<changeData.length;i++){
if(changeData[i].type ==2){
changeData[i].isLeaf=true;
}
if (changeData[i].type ==1 ||changeData[i].System_type_num =='102'){
changeData[i].disabled=true;
}
}
childNodes = changeData;
}else {
/* var node = this.$refs.grouptree.getNode(id);
node.loading = false;
return*/
}
resolve(childNodes);
}
break
case 'messagesAddConversationRecord': //针对消息添加会话处理
if(res.success){
var childNodes = [];
var changeData = [];
if (res.obj && res.obj.length>0) {
changeData = res.obj;
for(var i=0;i<changeData.length;i++){
if(changeData[i].type ==2){
changeData[i].isLeaf=true;
}
if (changeData[i].type ==1 ||changeData[i].System_type_num =='102'){
changeData[i].disabled=true;
}
}
childNodes = changeData;
}else {
/* var node = this.$refs.grouptree.getNode(id);
node.loading = false;
return*/
}
resolve(childNodes);
}
break
default:
if(res.success){
var childNodes = [];
var changeData = [];
if (res.obj && res.obj.length>0) {
changeData = res.obj;
for(var i=0;i<changeData.length;i++){
if(changeData[i].type ==2){
changeData[i].isLeaf=true;
}
if (changeData[i].type ==1){
changeData[i].disabled=true;
}
}
childNodes = changeData;
}else {
var node = this.$refs.grouptree.getNode(id);
node.loading = false;
return
}
resolve(childNodes);
}
}
}else {
if(res.success){
var childNodes = [];
var changeData = [];
if (res.obj && res.obj.length>0) {
changeData = res.obj;
for(var i=0;i<changeData.length;i++){
if(changeData[i].type ==2){
changeData[i].isLeaf=true;
}
if (changeData[i].type ==1){
changeData[i].disabled=true;
}
}
childNodes = changeData;
}else {
/* var node = this.$refs.grouptree.getNode(id);
node.loading = false;
return*/
}
resolve(childNodes);
}
}
})
.catch(function (error) {
console.log(error)
})
},
handleCheckChange:function(data, checked, indeterminate) {
console.log(data);
// if( data.type === 2 && checked ){
if(checked ){
var nodeObj={
};
nodeObj.id=data.id;
nodeObj.type=data.type;
nodeObj.extnum = data.extnum;
nodeObj.number = data.number;
nodeObj.systemNumber = data.System_type_num;
if(data.name.length>10){
nodeObj.name=data.name.substring(0,10)+'...';
}else{
nodeObj.name=data.name;
}
var length=false;
for(var i=0;i<this.chooseDatas.length;i++){
if(data.id === this.chooseDatas[i].id){
length=true;
}
}
if(!length){
this.chooseDatas.push(nodeObj);
}
// }else if(data.type === 2 && !checked ){
}else if(!checked ){
for(var i=0;i<this.chooseDatas.length;i++){
if(data.id ===this.chooseDatas[i].id){
this.chooseDatas.splice(i,1);
}
}
}
},
deleteMember (id) {
for(var i=0;i<this.chooseDatas.length;i++){
if(id === this.chooseDatas[i].subId){
this.chooseDatas.splice(i,1);
var node = this.$refs.grouptree.getNode(id);
node.checked = false;
}
}
},
}
子组件确认提交
//确定提交，调用父组件方法，传递数据
handleConfirm () {
this.$emit('childConfirm', this.chooseDatas, this.courentType)
this.IntercomGroup = false
this.chooseDatas = []
this.money = ''
},
父组件监听确认，拿到数据
// 监听 子组件点击确定提交后触发，由子组件调用
childHandleConfirm(data) {
let choosedDatas = data[0]; //已经选择的array数据
let type = data[1]; //当前需要处理的type
if (type) {
switch (type) {
case 'intercomBoxEntrancePocAdd': //对讲入口，添加对讲
this.startPocAdd(choosedDatas);
break;
case 'messagesAddMerber': //处理添加会话成员
this.addGroupMember(choosedDatas);
break;
case 'messagesAddConversationRecord': //处理添加会话
this.addConversationRecord(choosedDatas);
break;
}
}
}
效果
