guns系统前端介绍

guns系统前端介绍

前端项目结构

• guns-base-support/guns-sys/src/main/webapp
• • 扩展插件以及全局js文件
• • 全局html模板
• guns-vip-main/src/main/webapp
• • assets js文件
• • pages html页面文件

页面模板

• guns-base-support/guns-generator/src/main/resources/gunsTemplates

列表

新增

修改

查看

弹层

page

// parent 
func.open({
    height: 800,
    width: '1200px',
    title: '指派商品',
    content: Feng.ctxPath + '/ordersPay/assignOrder?productId=' + productIdArr.join(',') + '&receiverAreaId1=' + receiverAreaId1,
    end: function () {
    // 关闭后回调
    },
    endCallback: function (data) {
         console.log(data, 'endCallback')
                
        }
    })

// child
    admin.putTempData('formOk', true);
    // 每次获取选中值，确认后传递至详情层
    // callback 传递数据
    admin.putTempData('callbackData',selectedGoodsArr)
    //关掉对话框
    admin.closeThisDialog();
// child.html
        <button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>

confirm

    let operation = function () {
        console.log('点击确认')
    };
    Feng.confirm("是否确认关闭此问题?", operation);

msg

layer.msg('请选择四级分类',{icon: 5})

// option:
// icon:1-成功,5-失败
// time:-1 不关闭

工具

请求接口

            // promise
            Utils.requestPromise({
                url: '/ColumnList/getColumn',
                type: "POST",
                data: options
            }).then((response) => {
                layer.closeAll();
                const {code = 200,data = '',message=''} = response;
                if(code === 200) {
                    customTableHeader.cb(data) // 返回已经筛选的字段
                    if(type === 'get'){
                        customTableHeader.renderCustomTableHeaderLayer(data); // 根据已选择的字段,显示弹层
                    }
                }else {
                    layer.msg(message || '获取表头数据失败',{icon:5});
                }
            }).catch((error) => {
                layer.closeAll();
                console.log(error, 'error')
            })
            
            // jquery ajax
            Utils.request({
                    url: Feng.ctxPath + 'passageGoods/batchPush',
                    type: 'POST',
                    data,
                    callback: function (data) {
                        if (data.code === 200) {
                            table.reload(PassageGoods.tableId)
                            layer.msg('操作成功', {
                                icon: 1
                            })
                            return
                        } else {
                            layer.msg(data.message || '操作失败', {
                                icon: 5
                            })
                            return
                        }
                    }
            })
            

多级联动

// html
<div class="layui-input-inline" id="categoryId1" data-update="true" data-request="/category/getCategoryListByCategoryPid" data-params='{"categoryLevels":1,"categoryPid":"","val":"categoryName"}' data-init="true" data-next="categoryId2" data-prev='' data-prop='{"name":"categoryName", "value":"categoryId"}'></div>
<div class="layui-input-inline" id="categoryId2" data-request="/category/getCategoryListByCategoryPid" data-params='{"categoryLevels":2,"categoryPid":"","val":"categoryName"}' data-init="false" data-next="categoryId3" data-prev='["categoryId1"]' data-prop='{"name":"categoryName", "value":"categoryId"}'></div>
<div class="layui-input-inline" id="categoryId3" data-request="/category/getCategoryListByCategoryPid" data-params='{"categoryLevels":3,"categoryPid":"","val":"categoryName"}' data-init="false" data-next="categoryId4" data-prev='["categoryId1","categoryId2"]' data-prop='{"name":"categoryName", "value":"categoryId"}'></div>
<div class="layui-input-inline" id="categoryId4" data-request="/category/getCategoryListByCategoryPid" data-params='{"categoryLevels":4,"categoryPid":"","val":"categoryName"}' data-init="false" data-next="" data-prev='["categoryId1","categoryId2","categoryId3"]' data-prop='{"name":"categoryName", "value":"categoryId"}'></div>

//js
 // 创建分类四级联动;
    function updateCategory(selector, dom,change) {
        let param = {}
        param = dom.attr('data-params') || ''; // 请求参数
        param = param && param.length > 0 ? JSON.parse(param) : ''; // 请求参数处理
        if (change && change.length > 0) {
            param.categoryPid = change[0].categoryId
        }
        Utils.request({
            url: '/category/getCategoryListByCategoryPid',
            data: {
                categoryPid: param.categoryPid,
                categoryName: param.categoryName || '',
                categoryLevels:param.categoryLevels
            },
            callback: function (res) {
                if (res.code === 200) {
                    let list = res.data || [];
                    selector.update({
                        data: list
                    })
                    // console.log(selector.options.show,'show')
                    selector.options.show = function () {
                        console.log('xxxxxxxx')
                    }
                    return
                } else {
                    layer.msg(res.message || '获取数据失败', {
                        icon: 5
                    })
                    selector.update({
                        data: []
                    })
                    return
                }
            }
        })
    }
    // 上级赋值 
    function prevCategory(selector,prev,change) {  
        let params = {};
        if (change && change.length > 0) {
            params.categoryId = change[0].categoryId
        }
        Utils.request({
            url: '/store/addCategory',
            type: 'POST',
            data: params,
            callback:function (res) {  
                if(res.code === 200){
                    prev.forEach(function(item,index) {
                        selector[`selector_${index}`].setValue([
                            {
                                categoryName:res.data[`categoryName${index+1}`],
                                categoryId:res.data[item]
                            }
                        ])
                    })
                }else if(res.code !== 500){
                    layer.msg(data.message || '操作失败',{ icon: 5})
                    return
                }else{
                    layer.msg('获取数据失败', { icon: 5 })
                    return
                }
            }
        })
    }
    let selectorObj = Utils.renderTSelect([
        '#categoryId1',
        '#categoryId2',
        '#categoryId3',
        '#categoryId4',
    ], updateCategory,prevCategory,isCategoryExit)
    var categoryId1Dom = selectorObj.selector_0;
    var categoryId2Dom = selectorObj.selector_1;
    var categoryId3Dom = selectorObj.selector_2;
    var categoryId4Dom = selectorObj.selector_3;
    
    // 赋值
    categoryId1Dom.update({
            data: [
                {
                    categoryName: updateObj.categoryName1, categoryId: updateObj.categoryId1, selected: true
                }
            ]
        })
    // 获取值
    categoryId1Dom.getValue('valueStr')
    categoryId1Dom.getValue('name')[0]

下拉搜索

<div class="layui-input-inline" id="brandId" data-request_content='json' data-request="/brand/searchByKeyword" data-params='{"keyword":"","val":"keyword"}' data-init="true" data-next="" data-prop='{"name":"brandNameCn", "value":"brandId"}'></div>

let brandIdObj = Utils.renderTSelect([
        '#brandId',
    ])
    var brandIdDom = brandIdObj.selector_0;
    // 赋值
    brandIdDom.setValue([
            {
                brandNameCn: updateObj.brandName,
                brandId: updateObj.brandId,
            }
        ])
    // 获取值
    brandIdDom.getValue('valueStr')
    brandIdDom.getValue('name')[0]

上传文件

            upload.render({
            elem: '#mainPic',
            url: '/system/upload/oss',
            data: {
                type: 2
            },
            size:1024*2,
            done: function (res) {
                if (res.code === 0) {
                   console.log('上传成功')
                } else 
                    layer.msg(res.message || '上传失败', { icon: 5 })
                }
            }
        });

表格渲染

        // 直接请求接口
        var tableResult = table.render({
            elem: '#' + Store.tableId,
            url: Feng.ctxPath + '/store/list',
            page: true,
            limit:20,
            height: "full-180",
            cellMinWidth: 100,
            cols: Store.initColumn()
        });
        // 静态数据加载
        var tableResult = table.render({
            elem: '#' + Store.tableId
            page: true,
            limit:20,
            height: "full-180",
            cellMinWidth: 100,
            cols: Store.initColumn(),
            data:data
        });
        // 刷新
        table.reload(Store.tableId, {
            where: queryData, 
            page: {curr: curPage}
        });