vue弹框初始时查询状态并显示,对接后端的查询接口

实现目标:在已完成添加到右端的接口的前提下,若将数据添加至右边,再次点击该弹框时,已添加到右边的数据显示。若没有添加至右边的数据,默认全都显示在左侧。

实现效果:

后端swagger:

实现方法:

在vue文件点击弹窗的按钮处调用接口:

async filesBatchAuth() {
      this.authDialogTitle = "授权";
      this.isBatchAuth = true;

      let cameraId = []; 
      this.multipleSelection.forEach((item) => {
        cameraId.push(item.cameraIndexCode);
      });
      // 用户组(用户)数据拼接--查询展示
      let groupFormQuery = cameraId.join(",");

      // 用户组(用户)初始查询
      
      let resB = await selectUserByCode(groupFormQuery);

       if (resB.data.data.length > 0) {
        this.initGroupIds = resB.data.data;
        this.initAuthState = "1";
        this.$refs.cdMSetAuthDialog.dialogVisible = true;
      } else {
        this.initGroupIds = [];
        this.initAuthState = "0";
        this.$refs.cdMSetAuthDialog.dialogVisible = true;
      }
    },

initGroupIds为弹窗页面传递过来的参数:用户或用户组的id,initAuthState为弹窗传递过来的参数:表示初始弹窗时选定的哪个选项(0,1,2)。将后端传递来的参数写入用户或用户组的数组中,在点击出现弹窗的按钮时,该弹窗会初始化,这样就实现了查询。

api的js文件中:

// 展示
export function selectUserByCode(param) {
    return request({
        url: "/xxxxx/selectUserByCode",
        method: "get",
        params: {
            cameraIndexCodes: param
        }
    });
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值