作者:黄倩婧  历史版本:1  最后编辑:黄倩婧  更新时间:2025-07-08 15:41

适用版本:v3.6.0+;

业务场景描述:

1、有一个为产品信息表;
2、菜单中配置参数,数据模板通过获取该参数进行过滤,显示过滤后的数据。

数据模板管理配置步骤:

1、登录系统,选择【表单管理】-【数据模板管理】,点击“添加/编辑”按钮,进入模板设计页面,如下图:

2、修改“初始化是否查询”为否

3、设置过滤条件

4、设置模板脚本

Object.assign(JTemplate, {
    // URL参数
    query: {},
    //加载事件
    onLoad: function(template) {
        this.parseQuery(template)
        console.log('query => ', this.query)
        console.log('template => ', template)
        console.log('template.$route => ', template.$route)
        // 获取URL参数
        const query = this.query
        // 获取过滤条件
        const condition = template.template?.filter_conditions[0]
        console.log('condition => ', condition)
        if (condition) {
            // 处理过滤条件根据URL参数填充
            const rules = condition.filter?.rules || []
            rules.forEach(rule => {
                const key = rule.desc
                console.log('key => ', key)
                if (key && query[key]) {
                    // url中找到对应的参数进行赋值
                    rule.value = query[key]
                    console.log('query[key] => ', query[key])
                }
                console.log('rule => ', rule)
            })
        }
        template.search()
    },
    // 解析参数
    parseQuery(template) {
        const defaultUrl = template.$route.meta?.defaultUrl || ''
        console.log('defaultUrl => ', defaultUrl)
        const query = defaultUrl.split('?') || []
        if (query.length > 1) {
            const params = query[1].split('&') || []
            for (const param of params) {
                const arr = param.split('=') || []
                if (arr.length > 1) {
                    this.query[arr[0]] = arr[1]
                }
            }
        }
    }
});

5、添加为菜单资源

菜单管理配置步骤:

1、修改默认URL,加上参数

查看配置效果

点击进入菜单页面,根据参数进行过滤数据