@控制eb表单按钮显示(请求拦截方式)

业务需求

用户想通过目前eb提供的按钮权限配置项外的方式,根据实际业务逻辑控制表单按钮显示

实现方式

给当前表单所有按钮开启所有人权限,ecode使用 axios.interceptors 对eb的 /api/ebuilder/form/data/getFormButtons 接口返回数据进行拦截处理,在拦截到数据后请求自行编写的业务按钮过滤逻辑接口,该接口需要返回当前用户不能进行操作的按钮id,遍历拦截的按钮数据,将用户不能操作的按钮清除,再返回给前端组件渲染,达到根据业务控制按钮显示的目的

具体示例代码:

// 按钮拦截
axios.interceptors.request.use(
	req=>{
        if(req.url.includes('/api/ebuilder/form/data/getFormButtons')) {
            window.sessionStorage.setItem('governTaskDataId',req.data.dataId);
        }
        return req;
    }, // 对发起的请求进行处理,方法写在{}中,req是请求参数
	err=>{
        return Promise.reject(err);
    }, // 出现请求错误时进行的处理
);

axios.interceptors.response.use(
    function (response) {
        // 响应状态码为 2xx 时触发成功的回调,形参中的 response 是“成功的结果”
        let buttonData = {};
        if (
            response.status === 200 &&
            response.config.url.includes('/api/ebuilder/form/data/getFormButtons') 
        ) {
            let formId = window.ebdFormSdk && window.ebdFormSdk.getObjId();
            let dataId = window.sessionStorage.getItem('governTaskDataId');
            if (!formId || !dataId) return response;
            var oldButtonMap = new Map();
            let newButtonArray = new Array();
            response.data.data.forEach((item,index) => {
                oldButtonMap.set(item.id,item);
            });
            return new Promise(function (resolve, reject) {
                weappUtils.request({
                        url: '/api/government/base/getCurrentUserCannotOperateButtonId?dataId='+dataId+"&formId="+formId,
                        method: 'post',
                }).then((res) => {
                    if (res.status && Object.keys(res.data).length > 0 && res.data.isGovernApp) {
                        res.buttonIdSet = res.data?.buttonIdSet.map((item) => {
                            if(oldButtonMap.has(item) > 0) {
                                oldButtonMap.delete(item);
                            }
                        });
                    
                        for(let item of oldButtonMap.entries()){
                            newButtonArray.push(item[1]);
                        }
                        response.data.data = newButtonArray;
                        console.log(response);
                        resolve({
                            ...response,
                        });
                    } 
                    else {
                        resolve({
                            ...response,
                        });
                    }
                }).catch(()=> {
                    resolve({
                        ...response,
                    });
                });
            });
            // return response;
        }else {
            return response;
        }
    },
    function (error) {
        // console.log(error)
        // 响应状态码不是 2xx 时触发失败的回调,形参中的 error 是“失败的结果”

        return Promise.reject(error);
    },
);

更多推荐