[JavaScript知识库]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
        }
    });
}