SpringBoot+My BatisPlus+DataTables实现企业车间退货管理（学习企业级开发思想）

最新推荐文章于 2023-07-31 17:13:40 发布

霸道流氓气质

最新推荐文章于 2023-07-31 17:13:40 发布

阅读量638

点赞数

分类专栏： SpringBoot MyBatisPlus 文章标签：退货管理

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93190690

版权

SpringBoot 同时被 2 个专栏收录

200 篇文章 7 订阅

订阅专栏

MyBatisPlus

43 篇文章 6 订阅

订阅专栏

场景

SpringBoot+MyBatisPlus+DataTables

效果

退货列表展示

新建退货单效果

编辑退货单效果

查看详情效果

实现

获取退货页面实现

点击菜单栏跳转到controller的“获取退货页面”的方法。

@Description("获取退货页面")
    @RequestMapping("/refund.html")
    public String doGetListForRefund(){
        return "refund/wmsRefundOrder.html";
    }

此方法会跳转到项目下的template下的refund下的wmsRefundOrder.html

wmsRefundOrder.html

页面使用的是template模板

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
     th:replace="layout/layout(title='退货管理',cssPaths='/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/refund/wmsOrderRefund.js')"><!-- layout文件路径-->
<div th:fragment="content">
    <div class="ibox float-e-margins">
        <div class="ibox ">
            <div class="ibox-title">
                <h5>条件搜素</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <table class="table my-minus-1 mb-minus-1">
                    <tbody>
                    <tr>
                        <td>
                            <div class="row" id="searchCondition">
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label class="col-form-label" for="refundNumber">退货单号</label>
                                        <input type="text" id="refundNumber" name="refundNumber" value="" placeholder="退货单号" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label class="col-form-label" for="businessCode">业务单号</label>
                                        <input type="text" id="businessCode" name="businessCode" value="" placeholder="业务单号" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr class="text-center">
                        <td colspan="4">
                            <button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button>
                            <button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="ibox-content">
            <div class="table-responsive">
                <P>
                    <button id="addBtn" class="btn btn-info " type="button"><i class="fa fa-save"></i> 新增</button>
                    <button id="editBtn" class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
                    <!--<button id="deleteBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 删除</button>-->
                    <button id="generateBtn" class="btn btn-info " type="button"><i class="fa fa-save"></i> 生成出库单</button>
                    <button id="detailsBtn" class="btn btn-info " type="button"><i class="fa fa-save"></i> 查看详情</button>
                    <button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button>
                </P>
                <p>

                </p>
                <table id="example" class="table table-striped table-bordered hover" style="width:100%">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>退货单号</th>
                        <th>退货单名称</th>
                        <th>业务发起方</th>
                        <th>退货单状态</th>
                        <th>退至位置</th>
                        <th>开始时间</th>
                        <th>完成时间</th>
                        <th>出库单号</th>
                        <th>退货原因</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
</html>

注：

需要引入jquery文件以及DataTables等文件。

js代码--wmsOrderRefund.js

上面的html中的table就是用来渲染DataTables的元素。

$(document).ready(function() {
    //全局变量定义
    var dataArr = [];
    var data = {};
    var apModelSubmitBt = $("#apModelSubmitBt").ladda();
    // DataTable初始化
    var t = $('#example').DataTable({
        "language": {
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有匹配结果",
            "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "search": "搜索:",
            "searchPlaceholder": "搜索...",
            "url": "",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
            },
            "aria": {
                paginate: {
                    first: '首页',
                    previous: '上页',
                    next: '下页',
                    last: '末页'
                },
                "sortAscending": ": 以升序排列此列",
                "sortDescending": ": 以降序排列此列"
            },
            "decimal": "-",
            "thousands": "."
        },
        "processing": true,
        "searching" : false,
        "serverSide": true,
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": "_all",
        }],
        "dom": '<"top">rt<"bottom"flpi><"clear">',

        columns: [
            { data: 'id' },
            { data: 'refundNumber' },
            { data: 'refundName' },
            { data: 'businessInitiator' },
            { data: 'statusName',
                "orderable" : false},
            { data: 'destination'},
            { data: 'startTime' ,
                render: function (data, type, full, meta) {
                    if (data != null && data != "") {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                    return "未开始";
                }
            },
            {
                data: 'finishTime',
                render: function (data, type, full, meta) {
                    if (data != null && data != "") {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                    return "未完成";
                }
            },
            { data: 'businessCode' ,
                render: function (data, type, full, meta) {
                    if (data != null && data != "") {
                        return data;
                    }
                    return "未生成";
                }},
            { data: 'refundReason' },
            { data: 'remark' }
        ],
        "ajax": function (data, callback, setting) {
            //匹配搜索参数
            $.each(data.columns,function (index,value) {
                // console.log( $("#searchCondition").find('input[type="text"]'))
                $("#searchCondition").find('input[type="text"]').each(function () {
                    if(value.data === $(this).attr('id')){
                        value.search.value = $(this).val();
                    }
                });
            });
            $.ajax({
                type: 'POST',
                url: "/wmsRefundOrder/getRefundList",
                cache: false,  //禁用缓存
                data: JSON.stringify(data),  //传入组装的参数
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    callback(result);
                }

            })
        }
    });
    $('#example tbody').on('click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            //$(this).removeClass('selected');
        }
        else {
            t.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

    t.on( 'draw.dt', function () {
        var PageInfo = $('#example').DataTable().page.info();
        t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    } );

    //刷新按钮点击事件
    $("#searchBtn,#refreshBt").click(function () {
        t.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置
    });

    //重置按钮点击事件
    $("#resetBtn").click(function () {
        $("#searchCondition input").each(function () {
            $(this).val("");
        })
    });

    //添加按钮点击事件
    $("#addBtn").click(function () {
        window.location.href="/wmsRefundOrder/toAddRefundOrder?id=0"
    });



    //生成出货单按钮点击事件
    $("#generateBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首先选择一行数据！',
                confirmButtonColor: "#1ab394",
            })
        }else{
            generateOutOrder(data.id);
        }

    });

    //编辑按钮点击事件
    $("#editBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首先选择一行数据！',
                confirmButtonColor: "#1ab394",
            })
        }else{
            $.post("/wmsRefundOrder/isGenerateOutOrder", {id: data.id}).done(function (res) {
                if (res.status) {
                    window.location.href="/wmsRefundOrder/toAddRefundOrder?id="+data.id;
                } else {
                    Swal.fire(
                        '异常提示!',
                        res.data,
                        'error'
                    )
                }
            }).fail(function (err) {
                Swal.fire(
                    '异常提示',
                    '系统异常，请重试或联系管理员！',
                    'error'
                )
            });
        }

    });

    //查看详情按钮点击事件
    $("#detailsBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首先选择一行数据！',
                confirmButtonColor: "#1ab394",
            })
        }else{
            window.location.href="/wmsRefundOrder/toRefundOrderDetails?id="+data.id;
        }

    });

    //生成出库单按钮点击事件
    $("#deleteBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首选选择一行数据！',
                confirmButtonColor: "#1ab394"
            })
        }else{
            apDelete(data.id);
        }
    });

    //删除退款单方法
    function apDelete(id) {
        Swal.fire({
            title: '确定删除吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }).then(function (result) {
            if (result.value) {
                $.post("/wmsRefundOrder/doDeleteRefundOrder", {id: id}).done(function (res) {
                    if (res.status) {
                        t.ajax.reload(null, false); // 刷新表格数据，分页信息不会重置
                        Swal.fire(
                            '删除成功!',
                            res.data,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            '删除失败!',
                            res.data,
                            'error'
                        )
                    }
                }).fail(function (err) {
                    Swal.fire(
                        '异常提示',
                        '执行删除操作失败',
                        'error'
                    )
                });
            }
        })
    }


    //生成出库单方法
    function generateOutOrder(id) {
        Swal.fire({
            title: '确定生成出库单吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }).then(function (result) {
            if (result.value) {
                $.post("/wmsRefundOrder/doGenerateOutOrder", {id: id}).done(function (res) {
                    if (res.status) {
                        t.ajax.reload(null, false); // 刷新表格数据，分页信息不会重置
                        Swal.fire(
                            '生成出库单成功!',
                            res.data,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            '错误提示!',
                            res.data,
                            'error'
                        )
                    }
                }).fail(function (err) {
                    Swal.fire(
                        '异常提示',
                        '生成出库单操作失败',
                        'error'
                    )
                });
            }
        })
    }

} );

注：

1.对datTables赋值的地方在columns部分。

2.对时间列进行格式化的代码：

{ data: 'startTime' ,
                render: function (data, type, full, meta) {
                    if (data != null && data != "") {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                    return "未开始";
                }
            },

3.通过ajax请求数据，通过请求 url: "/wmsRefundOrder/getRefundList",定位到后台controller。

后台Controller代码

@Description("获取退货单列表接口")
    @ResponseBody
    @RequestMapping(value = "/getRefundList")
    public DataTablesResultJsonVO getRefundList(@RequestBody DataTablesJsonVO vo) {
        DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();

        try {
            String keyHump= vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();
            String keyLine = StringUtil.humpToLine(keyHump);
            String sortStr = vo.getOrder().get(0).getDir();
            long currentPage = vo.getStart()/vo.getLength()+1;
            Page<WmsRefundOrder> refundOrderPage = new Page<WmsRefundOrder>(currentPage, 1000);
            if("asc".equals(sortStr)){
                refundOrderPage.setAsc("wro." + keyLine);
            }else{
                refundOrderPage.setDesc("wro." + keyLine);
            }
            IPage<WmsRefundOrderVO> page = refundOrderService.pageRefundOrder(refundOrderPage, vo);
            dataTablesResultJsonVO.setData(page.getRecords());
            dataTablesResultJsonVO.setDraw(vo.getDraw());
            dataTablesResultJsonVO.setError("error");
            dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());
            dataTablesResultJsonVO.setRecordsTotal(page.getSize());
            Log.getInst(this).debug("getRefundList test:"+vo.getColumns().get(0).getSearch());
            return dataTablesResultJsonVO;
        } catch (Exception ex){
            dataTablesResultJsonVO.setData(new ArrayList<WmsRefundOrder>());
            dataTablesResultJsonVO.setDraw(vo.getDraw());
            dataTablesResultJsonVO.setError("error");
            dataTablesResultJsonVO.setRecordsFiltered(0L);
            dataTablesResultJsonVO.setRecordsTotal(0L);
            Log.getInst(this).debug("getRefundList test:"+vo.getColumns().get(0).getSearch());
            return dataTablesResultJsonVO;
        }

    }

注：

一些封装的实体类用来存取dataTables的一些参数，主要看用来查找数据的部分

Service层代码

IPage<WmsRefundOrderVO> pageRefundOrder(Page page, DataTablesJsonVO vo);

ServiceImpl代码

public IPage<WmsRefundOrderVO> pageRefundOrder(Page page , DataTablesJsonVO vo) {
        WmsRefundOrder refundOrder = new WmsRefundOrder();
        List<DataTablesColumnsJsonVO> dataTablesColumnsJsonVOList= vo.getColumns();
        for (DataTablesColumnsJsonVO d : dataTablesColumnsJsonVOList) {
            if("refundNumber".equals(d.getData()))
                refundOrder.setRefundNumber(d.getSearch().getValue());
            if("businessCode".equals(d.getData()))
                refundOrder.setBusinessCode(d.getSearch().getValue());
        }
        return baseMapper.pageRefundOrder(page,refundOrder);
    }

mapper层代码

IPage<WmsRefundOrderVO> pageRefundOrder( Page page,@Param("refundOrder") WmsRefundOrder refundOrder);

xml代码

 <!--获取退货订单分页数据-->
    <select id="pageRefundOrder" parameterType="com.ws.bus.sys.entity.WmsRefundOrder" resultMap="wmsRefundOrderVOMap">
        SELECT wro.*,code.code_name status_name
        FROM wms_refund_order wro
         JOIN sys_code code on code.code_type= 'refund_order_status' and wro.status= code.code_value and code.is_delete = 0
        WHERE wro.deleted_flag = 0
        <if test="refundOrder != null and refundOrder.refundNumber != null and '' != refundOrder.refundNumber">
            and wro.refund_number like CONCAT('%',#{refundOrder.refundNumber},'%')
        </if>
        <if test="refundOrder != null and refundOrder.businessCode != null and '' != refundOrder.businessCode">
            and wro.business_code like CONCAT('%',#{refundOrder.businessCode},'%')
        </if>
    </select>

新增与编辑功能实现

技术实现参照

SpringBoot+Jquery+DataTables实现select改变数据联动加载（前后端全流程）:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93052702

新增与编辑实现

页面新增与编辑按钮代码

 <button id="addBtn" class="btn btn-info " type="button"><i class="fa fa-save"></i> 新增</button>

<button id="editBtn" class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>

点击事件

 //添加按钮点击事件
    $("#addBtn").click(function () {
        window.location.href="/wmsRefundOrder/toAddRefundOrder?id=0"
    });

点击新增按钮页面跳转到href属性对应的地址，传递参数id，值为0，目的是为了在与编辑共用一个页面时能够区分。

 //编辑按钮点击事件
    $("#editBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首先选择一行数据！',
                confirmButtonColor: "#1ab394",
            })
        }else{
            $.post("/wmsRefundOrder/isGenerateOutOrder", {id: data.id}).done(function (res) {
                if (res.status) {
                    window.location.href="/wmsRefundOrder/toAddRefundOrder?id="+data.id;
                } else {
                    Swal.fire(
                        '异常提示!',
                        res.data,
                        'error'
                    )
                }
            }).fail(function (err) {
                Swal.fire(
                    '异常提示',
                    '系统异常，请重试或联系管理员！',
                    'error'
                )
            });
        }

    });

点击编辑按钮后获取选中一行的记录的id，作为参数一起传递到后台Controller方法。

后台Controller获取新增和编辑界面

@Description("获取新增或者编辑界面")
    @RequestMapping("/toAddRefundOrder")
    public String toAddRefundOrder( int id, Model model){
        if ( id != 0){
            //如果是编辑操作，查询出当前退货单
            WmsRefundOrder refundOrder = refundOrderService.getById(id);
            model.addAttribute("refundOrder",refundOrder);
        }
        return "refund/addRefundOrder.html";
    }

接受到传递的id参数，如果id为空则是新增，如果不为0则是编辑。

如果是编辑则根据接受的id查询数据库中要编辑的实体，并通过model传递到新增和编辑页面。

新增和编辑页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
     th:replace="layout/layout(title='领料单',cssPaths='/public/css/plugins/select2/select2.min.css,/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/refund/addOrderRefund.js')">
<!-- layout文件路径-->
<div th:fragment="content">
    <div class="ibox float-e-margins">
        <form id="refundOrderAdd" role="form" action="">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="/wmsRefundOrder/refund.html"><i class=" mr_05em"></i> 返回上一页</a><br>
                    <h5>退货单信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" id="headData">
                    <table class="table my-minus-1 mb-minus-1">
                        <tbody>
                        <tr>
                            <td>
                                <input type="hidden" id="refundOrderId" name="id" th:value="${refundOrder == null?'':refundOrder.id}"/>
                                <input type="hidden" name="refundNumber" th:value="${refundOrder == null?'':refundOrder.refundNumber}"/>
                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货单名称</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control"
                                                   th:value="${refundOrder == null?'':refundOrder.refundName}"
                                                    name="refundName">
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货发起方</label>
                                        <div class="col-sm-10">
                                        <select class="form-control" name="businessInitiator"  id= "businessInitiator" th:attr="disabled=${refundOrder != null?'disabled':'false'}" >
                                            <option  id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option>
                                            <option  id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '清洁车间仓库'}" value="清洁车间仓库"><span th:text="清洁车间仓库"></span></option>
                                            <option  id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '正极车间仓库'}" value="正极车间仓库"><span th:text="正极车间仓库"></span></option>
                                            <option  id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '负极车间仓库'}" value="负极车间仓库"><span th:text="负极车间仓库"></span></option>
                                            <option value="" disabled th:selected="${refundOrder == null || refundOrder.businessInitiator == null}" hidden>选择退货发起方</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货目的地</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="destination" id="destination"
                                                   th:value="${refundOrder == null?'':refundOrder.destination}"      readonly>
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货原因</label>
                                        <div class="col-sm-10">
                                            <input class="form-control"
                                                   th:value="${refundOrder == null?'':refundOrder.refundReason}"
                                                   name="refundReason">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-12">
                                        <label class="col-sm-1 col-form-label">备注</label>
                                        <div class="col-sm-11">
                                        <textarea type="text" class="form-control" name="remark"
                                                  th:text="${refundOrder == null?'':refundOrder.remark}"> </textarea>
                                        </div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox-content">
                <h5>请选择要退货的不良品（可多选）</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered hover" style="width:100%">
                        <thead>
                        <tr>
                            <th><input type="checkbox" class="checkall" /></th>
                            <th>货位编号</th>
                            <th>货位类型</th>
                            <th>物料类型</th>
                            <th>物料状态</th>
                            <th>所在货架</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <P>
                <button id="saveBtn" class="btn btn-info " type="submit"><i class="fa fa-save"></i>保存 </button>
            </P>
        </form>
    </div>

</div>
</html>

注：

1.面上方通过thymeleaf模板控制页面数据的显示，如果有值则为编辑则显示相应的值，如果是新增则值我I空则显示为空，通过：

th:value="${refundOrder == null?'':refundOrder.id}"

这种选择表达式实现。

2.退货发起方中通过是否给select添加select属性来区分添加与编辑，

如果是新增则值 refundOrder为空，则渲染为disabled="disabled",如果不为空则是编辑，但是不能再更改此select的

内容，会被渲染成disabled="false",则此select不可选。

通过：

<select class="form-control" name="businessInitiator"  id= "businessInitiator" th:attr="disabled= ${refundOrder!= null?'disabled':'false'}" >

实现。

3.通过设值select的默认选项，让其进行新增和编辑时必须触发select事件进而触发数据联动，但是这个默认选项的值不能作为选项，通过：

<option value= "" disabledth:selected= "${refundOrder= = null || refundOrder.businessInitiator == null}" hidden>选择退货发起方</option>

实现。

新增和编辑的js代码

$(document).ready(function() {
    //获取下拉框的值，判断是否为空，不为空则是编辑，那么就要初始化dataTables
    var selected = $("#businessInitiator option:selected").val();
    if(selected!=""){
        var t = $('#example').DataTable({
            "language": {
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "searchPlaceholder": "搜索...",
                "url": "",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                },
                "aria": {
                    paginate: {
                        first: '首页',
                        previous: '上页',
                        next: '下页',
                        last: '末页'
                    },
                    "sortAscending": ": 以升序排列此列",
                    "sortDescending": ": 以降序排列此列"
                },
                "decimal": "-",
                "thousands": "."
            },
            "processing": true,
            "searching" : false,
            "pageLength": 100,
            "serverSide": true,
            "columnDefs": [ {
                "searchable": false,
                "orderable": false,
                "targets": "_all",
            }],
            "dom": '<"top">rt<"bottom"flpi><"clear">',

            columns: [
                { data: 'id' ,
                    "orderable" : false},
                { data: 'goodsLocationNumber' },
                { data: 'locationTypeName' ,
                    "orderable" : false},
                { data: 'saveMaterialTypeName' ,
                    "orderable" : false},
                { data: 'materielStatusName',
                    "orderable" : false},
                { data: 'shelveName' ,
                    "orderable" : false},
                { data: 'remark',
                    "orderable" : false }
            ],columnDefs: [{
                //   指定第1列，从0开始，0表示第一列，1表示第二列……
                "targets": 0,
                "bSortable": false,
                "render": function(data, type, row, meta) {
                    if (row.isSelected == 1){
                        return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
                    }
                    return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
                }
            }],
            "ajax": function (data, callback, setting) {
                data.editActionId = $("#refundOrderId").val();
                data.selected=selected;
                $.ajax({
                    type: 'POST',
                    url: "/busGoodsLocation/getRejectsLocationsList",
                    cache: false,  //禁用缓存
                    //async: true,
                    data: JSON.stringify(data),  //传入组装的参数
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        callback(result);
                    }
                })
            }
        });
    }

    //选择退货方后退货目的地绑定联动
    $("#businessInitiator").bind("change", function () {
        //获取选中的option的value值
        var selected = $("#businessInitiator option:selected").val();
        //获取退货目的地Input对象
        var destination = $("#destination");
        switch (selected){
            case '原料立库':
                destination.val("原料立库退货点")
                break;
            case '清洁车间仓库':
                destination.val("清洁车间退货点")
                break;
            case '正极车间仓库':
                destination.val("正极车间退货点")
                break;
            case '负极车间仓库':
                destination.val("负极车间退货点")
                break;
            default:
                destination.val("其它退货点")
        }
        //退货目的地联动完成
        // DataTable初始化
        $("#example").dataTable().fnDestroy();//还原初始化了datatable
        var t = $('#example').DataTable({
            "language": {
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "searchPlaceholder": "搜索...",
                "url": "",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                },
                "aria": {
                    paginate: {
                        first: '首页',
                        previous: '上页',
                        next: '下页',
                        last: '末页'
                    },
                    "sortAscending": ": 以升序排列此列",
                    "sortDescending": ": 以降序排列此列"
                },
                "decimal": "-",
                "thousands": "."
            },
            "processing": true,
            "searching" : false,
            "pageLength": 100,
            "serverSide": true,
            "columnDefs": [ {
                "searchable": false,
                "orderable": false,
                "targets": "_all",
            }],
            "dom": '<"top">rt<"bottom"flpi><"clear">',

            columns: [
                { data: 'id' ,
                    "orderable" : false},
                { data: 'goodsLocationNumber' },
                { data: 'locationTypeName' ,
                    "orderable" : false},
                { data: 'saveMaterialTypeName' ,
                    "orderable" : false},
                { data: 'materielStatusName',
                    "orderable" : false},
                { data: 'shelveName' ,
                    "orderable" : false},
                { data: 'remark',
                    "orderable" : false }
            ],columnDefs: [{
                //   指定第1列，从0开始，0表示第一列，1表示第二列……
                "targets": 0,
                "bSortable": false,
                "render": function(data, type, row, meta) {
                    if (row.isSelected == 1){
                        return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
                    }
                    return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
                }
            }],
            "ajax": function (data, callback, setting) {
                data.editActionId = $("#refundOrderId").val();
                data.selected=selected;
                $.ajax({
                    type: 'POST',
                    url: "/busGoodsLocation/getRejectsLocationsList",
                    cache: false,  //禁用缓存
                    //async: true,
                    data: JSON.stringify(data),  //传入组装的参数
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        callback(result);
                    }
                })
            }
        });
    });



    $(".checkall").click(function () {
        var check = $(this).prop("checked");
        $(".checkchild").prop("checked", check);

    });
    if ($("#refundOrderId").val() != null && $("#refundOrderId").val() != "")
    {
        initAddOrEditFormValidate("editAction");
    }else {
        initAddOrEditFormValidate("addAction");
    }

});

function childClick(thisCheck) {
    var allCheck = true;
    $(".checkchild").each(function () {
        if ($(this).prop("checked") == false) {
            allCheck = false;
        }
    });
    if (allCheck == true) {
        $(".checkall").prop("checked", true);
    } else {
        $(".checkall").prop("checked", false);
    }

}

// 初始化权限验证
function initAddOrEditFormValidate(op) {
    // 权限添加form提交操作
    $("#refundOrderAdd").validate({
        rules: {
            refundName: {
                required: true
            },
            businessInitiator: {
                required: true
            },
            destination: {
                required: true
            }
        },
        messages: {
            refundName: {
                required: "请输入退货单名称"
            },
            businessInitiator: {
                required: "请选择退货发起方"
            }
        },
        submitHandler:function(form){
            //判断时候有不良品选中
            var someCheck = false;
            $(".checkchild").each(function () {
                if ($(this).prop("checked") == true) {
                    someCheck = true;
                }
            });
            if (someCheck == false) {
                swal({
                    type: 'fail',
                    title: '失败提示:',
                    text: '请务必选中一项不良品进行退货',
                    confirmButtonColor: "#1ab394"
                });
                return;
            }

            var formData = $("#refundOrderAdd").serialize();

            var idStr = [];
            $(".checkchild:checked").each(function () {
                idStr.push($(this).val());
            });
            formData += "&idStr=" +idStr;
            formData += "&op=" +op;
            //formData += "&refundId=" + $("#refundOrderId").val();

            console.log(formData);
            $.post("/wmsRefundOrder/doSaveRefundOrder", formData).done(function (res) {
                if(res.status){
                    swal({
                        type: 'success',
                        title: '成功提示:',
                        text: res.data,
                        confirmButtonColor: "#1ab394",
                    }).then(function () {
                        window.location.href="/wmsRefundOrder/refund.html"
                    })
                }else{
                    swal({
                        type: 'fail',
                        title: '失败提示:',
                        text: res.data,
                        confirmButtonColor: "#1ab394",
                    })
                }
            }).fail(function (err) {
                swal({
                    type: 'fail',
                    title: '失败提示:',
                    text: '退货单接口调用失败！',
                    confirmButtonColor: "#1ab394",
                })
            });
        }
    });
}

注：

1.页面加载完成之后，获取下拉框的值，判断是否为空，不空则是编辑，所以要初始化dataTables

2.下拉框选择完成之后，要联动一个input框的值，还要刷新dadtaTables的值，因为在同一个页面不能多次初始化dataTables所以要使用 $("#example").dataTable().fnDestroy();//还原初始化了datatable。

dataTables请求数据的后台方法

@Description("根据条件获取不良品货位列表")
    @RequestMapping(value = "/getRejectsLocationsList", method = RequestMethod.POST)
    @ResponseBody
    public DataTablesResultJsonVO getRejectsLocationsList(@RequestBody DataTablesJsonVOExt vo) {
        DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();
        try {
            String keyHump = vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();
            String keyLine = StringUtil.humpToLine(keyHump);
            String sortStr = vo.getOrder().get(0).getDir();
            long currentPage = vo.getStart() / vo.getLength() + 1;
            Page<WmsRefundOrder> refundOrderPage = new Page<WmsRefundOrder>(currentPage, 100);
            if ("asc".equals(sortStr)) {
                refundOrderPage.setAsc("location." + keyLine);
            } else {
                refundOrderPage.setDesc("location." + keyLine);
            }
            IPage<BusGoodsLocationVO> page = null;
            //接收车间仓库参数，进行参数赋值
            String warehourse = vo.getSelected();
            //仓库车间赋值
            String wareNum="A";
            switch (warehourse){
                case "原料立库":
                    wareNum="A";
                    break;
                case "清洁车间仓库":
                    wareNum="B";
                    break;
                case "正极车间仓库":
                    wareNum="C";
                    break;
                case "负极车间仓库":
                    wareNum="D";
                    break;
            }
            //当编辑操作id存在时，表明是编辑操作
            if (vo.getEditActionId() != null && vo.getEditActionId() != 0) {
                page = locationService.pageRejectsLocations(refundOrderPage, vo, 1,wareNum);

                //查询出当前退货单下的所有明细
                QueryWrapper<WmsRefundOrderDetails> refundOrderDetailsQueryWrapper = new QueryWrapper<>();
                refundOrderDetailsQueryWrapper.eq("refund_id", vo.getEditActionId()).eq("deleted_flag", "0");
                List<WmsRefundOrderDetails> refundOrderDetails = refundOrderDetailsService.list(refundOrderDetailsQueryWrapper);
                for (BusGoodsLocationVO locationVO : page.getRecords()) {
                    for (WmsRefundOrderDetails details : refundOrderDetails) {
                        if (details.getGoodsLocationId().equals(locationVO.getId())) {
                            locationVO.setIsSelected(1);
                            break;
                        }
                    }
                }
                //删除非此退货单对应的货位
                for (BusGoodsLocationVO locationVO : page.getRecords()) {
                    if (locationVO.getRefundOrderFlag() == 1 && locationVO.getIsSelected() == 0) {
                        page.getRecords().remove(locationVO);
                    }
                }
            } else {
                page = locationService.pageRejectsLocations(refundOrderPage, vo, 0,wareNum);
            }
            dataTablesResultJsonVO.setData(page.getRecords());
            dataTablesResultJsonVO.setDraw(vo.getDraw());
            dataTablesResultJsonVO.setError("error");
            dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());
            dataTablesResultJsonVO.setRecordsTotal(page.getSize());
            Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
            return dataTablesResultJsonVO;
        } catch (Exception ex) {
            dataTablesResultJsonVO.setData(new ArrayList<WmsRefundOrder>());
            dataTablesResultJsonVO.setDraw(vo.getDraw());
            dataTablesResultJsonVO.setError("error");
            dataTablesResultJsonVO.setRecordsFiltered(0L);
            dataTablesResultJsonVO.setRecordsTotal(0L);
            Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
            return dataTablesResultJsonVO;
        }

    }

查看详情功能实现

html页面代码

<button id="detailsBtn" class="btn btn-info " type="button"><i class="fa fa-save"></i> 查看详情</button>

点击事件

 //查看详情按钮点击事件
    $("#detailsBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首先选择一行数据！',
                confirmButtonColor: "#1ab394",
            })
        }else{
           window.location.href="/wmsRefundOrder/toRefundOrderDetails?id="+data.id;
        }

    });

获取选中记录的id属性并传递到后台方法

后台查看详情对应的方法

@Description("获取退货单详情界面")
    @RequestMapping("/toRefundOrderDetails")
    public String toRefundOrderDetails(int id, Model model){
        //根据前端传来的退货单Id，查出退货单详情
        WmsRefundOrderVO refundOrder = refundOrderService.getRefundOrderById(id);
        QueryWrapper<WmsRefundOrderDetails> detailsQueryWrapper = new QueryWrapper<>();
        detailsQueryWrapper.eq("refund_id",refundOrder.getId()).eq("deleted_flag","0");
        List<WmsRefundOrderDetails> orderDetails =  refundOrderDetailsService.list(detailsQueryWrapper);

        model.addAttribute("orderDetails", orderDetails);
        model.addAttribute("refundOrder", refundOrder);
        return "refund/refundOrderDetails.html";
    }

详情页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      th:replace="layout/layout(title='领料单',cssPaths='/public/css/plugins/select2/select2.min.css,/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/refund/orderRefunddetails.js')">
<!-- layout文件路径-->
<div th:fragment="content">
    <div class="ibox float-e-margins">
        <form id="refundOrderAdd" role="form" action="">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="/wmsRefundOrder/refund.html"><i class=" mr_05em"></i> 返回上一页</a><br>
                    <h5>退货单信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" id="headData">
                    <table class="table my-minus-1 mb-minus-1">
                        <tbody>
                        <tr>
                            <td>
                                <input type="hidden" id="refundOrderId" name="id" th:value="${refundOrder == null?'':refundOrder.id}"/>
                                <input type="hidden" name="refundNumber" th:value="${refundOrder == null?'':refundOrder.refundNumber}"/>
                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货单号</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.refundNumber}"
                                                   name="refundNumber">
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货单名称</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.refundName}"
                                                   name="refundName">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货发起方</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.businessInitiator}"
                                                   name="businessInitiator">
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货目的地</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="destination" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.destination}">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退款单状态</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.statusName}"
                                                   name="statusName">
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">退货原因</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" readonly
                                                   th:value="${refundOrder == null?'':refundOrder.refundReason}"
                                                   name="refundReason">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">业务单类型</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" readonly
                                                   th:value="${refundOrder.businessType == null?'无':refundOrder.businessType}"
                                                   name="businessType">
                                        </div>
                                    </div>
                                    <div class="form-group row col-md-6">
                                        <label class="col-sm-2 col-form-label">业务单号</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" readonly
                                                   th:value="${refundOrder.businessCode == null?'无':refundOrder.businessCode}"
                                                   name="businessCode">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group row col-md-12">
                                        <label class="col-sm-1 col-form-label">备注</label>
                                        <div class="col-sm-11">
                                        <textarea type="text" class="form-control" name="remark" readonly
                                                  th:text="${refundOrder == null?'':refundOrder.remark}"> </textarea>
                                        </div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ibox-content">
                <h4>退货单详情列表</h4>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered hover" style="width:100%">
                        <thead>
                        <tr>
                            <th>详情ID</th>
                            <th>货位编号</th>
                            <th>货位名称</th>
                            <th>物料名称</th>
                            <th>物料类型</th>
                            <th>所在货架</th>
                            <th>物料批次</th>
                            <th>供应商批次</th>
                            <th>数量</th>
                            <th>单位</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="detail:${orderDetails}">
                            <td th:text="${detail.id}"></td>
                            <td th:text="${detail.goodsLocationNumber}"></td>
                            <td th:text="${detail.goodsLocationName}"></td>
                            <td th:text="${detail.materielName}"></td>
                            <td th:text="${detail.materielTypeName}"></td>
                            <td th:text="${detail.shelvesNumber}"></td>
                            <td th:text="${detail.batch}"></td>
                            <td th:text="${detail.supplierBatch}"></td>
                            <td th:text="${detail.num}"></td>
                            <td th:text="${detail.untiy}"></td>
                            <td th:text="${detail.remark}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

</div>
</html>

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot+My BatisPlus+DataTables实现企业车间退货管理（学习企业级开发思想）

场景SpringBoot+MyBatisPlus+DataTables效果退货列表展示新建退货单效果编辑退货单效果查看详情效果实现获取退货页面实现点击菜单栏跳转到controller的“获取退货页面”的方法。@Description("获取退货页面") @RequestMapping("/refund.html") publ...
复制链接

扫一扫