ABP v8.x+Vue中编辑Organization时如何传递ID获取OrganizationCenters

1. 移除组件created钩子中的无效调用 #

删除EditOrganization组件created方法里的getCenters调用——此时组件刚创建，弹窗还未显示，organization.id尚未被赋值，调用接口会传空ID：

// 删掉这段无效代码
async created(){
    await this.$store.dispatch({
                    type:'organization/getCenters',
                    data:this.organization.id
                });
}

2. 调整弹窗显示逻辑，在正确时机调用getCenters #

修改visibleChange方法，在弹窗显示且完成organization赋值后，立即请求对应的OrganizationCenter数据：

async visibleChange(value:boolean){
    if(!value){
        this.$emit('input',value);
        // 弹窗关闭时清空Centers数据，避免残留旧数据
        await this.$store.dispatch('organization/clearCenters');
    }else{
        this.organization=Util.extend(true,{},this.$store.state.organization.editOrganization);
        // 此时organization已包含有效ID，调用接口获取关联的Centers
        await this.$store.dispatch({
            type:'organization/getCenters',
            data: this.organization.id
        });
    }
}

3. 修复Vuex中getCenters的参数传递错误 #

当前你的getCenters action错误使用了payload.id，但实际dispatch时传递的是data字段，需要修正参数获取方式：

async getCenters(context:ActionContext<OrganizationState,any>, payload:any){
    console.log('getting organization state center')
    console.log(payload)
    context.state.loading=true;
    // 将payload.id改为payload.data，匹配dispatch时的传参结构
    let reponse=await Ajax.get('/api/services/app/Organizations/GetCenters?organizationId='+payload.data);
    context.state.loading=false;
    let page=reponse.data.result as PageResult<OrganizationCenter>;
    // 新增centerTotalCount字段存储Centers的分页总数，避免覆盖Organization的totalCount
    context.state.centerTotalCount=page.totalCount;
    context.state.centers=page.items;
    return reponse.data.result as OrganizationCenter;
}

4. 完善Vuex状态定义（推荐） #

为了避免Centers的分页总数覆盖Organization的分页数据，修改OrganizationState定义并更新初始化值：

// 扩展状态接口
interface OrganizationState extends ListState<Organization>{
    editOrganization:Organization;
    centers:Array<OrganizationCenter>;
    centerTotalCount:number; // 新增字段，单独存储Centers的分页总数
}

// 更新state初始化
state={
    totalCount:0,
    currentPage:1,
    pageSize:10,
    list: new Array<Organization>(),
    loading:false,
    editOrganization:new Organization(),
    centers: new Array<OrganizationCenter>(),
    centerTotalCount:0 // 初始化Centers分页总数
}

5. 添加清空Centers的mutation和action（可选） #

为了在弹窗关闭时清空Centers数据，添加对应的mutation和action：

// mutations中新增
clearCenters(state:OrganizationState){
    state.centers=[];
    state.centerTotalCount=0;
}

// actions中新增
async clearCenters(context:ActionContext<OrganizationState,any>){
    context.commit('clearCenters');
}

核心逻辑说明 #

弹窗的visibleChange事件会在弹窗显示/隐藏时触发：当弹窗显示（value=true）时，你已经将store中存储的待编辑Organization赋值给了组件的organization变量，此时organization.id是有效的，这时候调用getCenters就能正确传递ID，获取对应组织的中心列表。

内容的提问来源于stack exchange，提问作者marius