src/main/resources/templates/receipt/receiptContainerHeader/receiptContainerHeader.html

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-info">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#tabHeader" data-toggle="tab">主表</a></li>
                <li><a href="#tabDetail" data-toggle="tab">明细</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="tabHeader">
                    <div class="col-sm-12 select-info">
                        <form id="receiptContainerHeader-form" autocomplete="off">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <label>入库单编码：</label>
                                        <input name="receiptCode" placeholder="请输入入库单编码" type="text"/>
                                    </li>
                                    <li>
                                        <label>载具编码：</label>
                                        <input name="containerCode" placeholder="请输入载具编码" type="text"/>
                                    </li>
                                    <li>
                                        <label>盛具编码：</label>
                                        <input name="vehicleCode" placeholder="请输入盛具编码" type="text"/>
                                    </li>
                                    <li>
                                        <label>库位编号：</label>
                                        <input name="toLocation" placeholder="请输入库位编码" type="text"/>
                                    </li>
                                    <li>
                                        <label>入库站台：</label>
                                        <input name="port" placeholder="请输入入库站台" type="text"/>
                                    </li>
                                    <li>
                                        <label>任务类型：</label>
                                        <select name="taskType" th:with="type=${@dict.getType('receiptTaskType')}">
                                            <option value="">所有</option>
                                            <option th:each="e : ${type}" th:text="${e['dictLabel']}"
                                                    th:value="${e['dictValue']}">
                                            </option>
                                        </select>
                                    </li>
                                    <li>
                                        <label>任务状态：</label>
                                        <select name="Status"
                                                th:with="firstStatus=${@dict.getType('receiptContainerHeaderStatus')}">
                                            <option value="">所有</option>
                                            <option th:each="e : ${firstStatus}" th:text="${e['dictLabel']}"
                                                    th:value="${e['dictValue']}">
                                            </option>
                                        </select>
                                    </li>
                                    <li class="select-time">
                                        <label>创建时间： </label>
                                        <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                               name="createdBegin"/>
                                        <span>-</span>
                                        <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                               name="createdEnd"/>
                                    </li>
                                    <li style="float: right; margin-right: 45px">
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()">
                                            <i class="fa fa-search"></i>&nbsp;搜索
                                        </a>
                                        <a class="btn btn-warning btn-rounded btn-sm"
                                           onclick="$.form.reset('receiptContainerHeader-form')">
                                            <i class="fa fa-refresh"></i>&nbsp;重置
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-12 select-table">
                        <table id="bootstrap-table" data-mobile-responsive="true"
                               class="table table-bordered table-hover">
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="tabDetail">
                    <table id="bootstrap-table1" data-mobile-responsive="true"
                           class="table table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let createTaskFlag = [[${@permission.hasPermi('receipt:receiptContainer:add')}]];
    let removeFlag = [[${@permission.hasPermi('receipt:receiptContainer:remove')}]];
    let prefix = ctx + "receipt/receiptContainerHeader";
    let detailPrefix = ctx + "receipt/receiptContainerDetail";
    let taskType = [[${@dict.getType('taskType')}]];
    let receiptContainerHeaderStatus = [[${@dict.getType('receiptContainerHeaderStatus')}]]
    let inventoryStatus = [[${@dict.getType('inventorySts')}]];
    let supplier = [[${@SupplierService.getCode()}]];
    let yesOrNo = [[${@dict.getType('yes_or_no')}]];
    let station = [[${@stationService.getCode()}]];
    let S_headerId;
    $(function () {
        let options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            sortName: "created",
            sortOrder: "desc",
            modalName: "入库组盘头",
            search: false,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'receiptCode',
                    title: '入库单编码'
                },
                {
                    field: 'containerCode',
                    title: '载具编码'
                },
                {
                    field: 'vehicleCode',
                    title: '盛具编码'
                },
                {
                    field: 'toLocation',
                    title: '库位编码'
                },
                {
                    field: 'taskType',
                    title: '任务类型',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(taskType, value);
                    },
                },
                {
                    field: 'status',
                    title: '任务状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(receiptContainerHeaderStatus, value);
                    },
                },
                {
                    field: 'port',
                    title: '来源站台',
                    formatter: function (value, row, index) {
                        let actions = [];
                        $.each(station, function (index, dict) {
                            if (dict.code === value) {
                                actions.push(dict.name);
                                return false;
                            }
                        });
                        return actions.join('');
                    }
                },
                {
                    field: 'orderCode',
                    title: '所属工单号',
                },
                {
                    field: 'orderNumber',
                    title: '所属生产令号',
                },
                {
                    field: 'batchNumber',
                    title: '所属生产批号',
                },
                {
                    field: 'created',
                    title: '创建时间',
                },
                {
                    field: 'createdBy',
                    title: '创建人'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        let actions = [];
                        actions.push('<a class="btn btn-info btn-xs " href="#" onclick="detail(\'' + row.id + '\')"><i class="fa fa-list-ul"></i>明细</a> ');
                        if (row.status < 10) {
                            // if (row.taskType === 200) {
                            //     actions.push('<a class="btn btn-success btn-xs ' + createTaskFlag + '" href="#" onclick="chooseStation(\'' + row.id + '\')"><i class="fa fa-edit"></i>生成任务</a> ');
                            // } else {
                            // JSON.stringify()将对象转化成JSON字符串；.replace(/""/g,"’")将JSON字符串中的双引号转化成单引号
                            let rowStr = JSON.stringify(row).replace(/""/g, "'")
                            actions.push(`<a class='btn btn-success btn-xs ${createTaskFlag}' href='#' onclick='createTask(${rowStr})'><i class='fa fa-edit'></i>生成任务</a> `);
                            // }
                        }
                        if (row.status === 0) {
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>取消组盘</a> ');
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
    $("#bootstrap-table1").bootstrapTable({
        sortable: true, //排序
        showRefresh: false, //刷新
        showToggle: false, //视图切换
        clickToSelect: true,
        showColumns: false, //列选择
        showExport: false, //导出
        exportDataType: "all",  //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
        modalName: "入库明细",
        iconSize: "outline",
        toolbar: "#toolbar1",
        contentType: "application/x-www-form-urlencoded",
        columns: [
            {
                field: 'receiptCode',
                title: '入库单编码'
            },
            {
                field: 'materialCode',
                title: '物料编码'
            },
            {
                field: 'materialName',
                title: '物料名称'
            },
            {
                field: 'flowCode',
                title: '工序号'
            },
            {
                field: 'materialSpec',
                title: '物料规格'
            },
            {
                field: 'materialUnit',
                title: '物料单位'
            },
            {
                field: 'description',
                title: '物料描述'
            },
            /*{
                field: 'weight',
                title: '药量(g)',
                align: 'center',
            },
            {
                field: 'high',
                title: '高度(cm)'
            },*/
            {
                field: 'solidifyTime',
                title: '固化时间(h)'
            },
            {
                field: 'tracingNo',
                title: '追溯码'
            },
            {
                field: 'supplierCode',
                title: '供应商',
                visible: true,
                formatter: function (value, row, index) {
                    let actions = [];
                    $.each(supplier, function (index, item) {
                        if (item.code === value) {
                            actions.push("<span class='badge badge-info'>" + item.name + "</span>");
                            return false;
                        }
                    });
                    return actions.join('');
                },
            },
            {
                field: 'supplierBatch',
                title: '供应商批次码'
            },
            {
                field: 'supplierTracingNo',
                title: '供应商SN码',
            },
            {
                field: 'inventorySts',
                title: '物料状态',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(inventoryStatus, value);
                }
            },
            {
                field: 'locationNoX',
                title: 'x'
            },
            {
                field: 'locationNoY',
                title: 'y'
            },
            {
                field: 'firstFlag',
                title: '是否首件/批',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(yesOrNo, value);
                }
            },
            {
                field: 'qty',
                title: '组盘数量'
            },
            {
                field: 'created',
                title: '创建时间'
            },
            {
                field: 'createdBy',
                title: '创建用户'
            },
        ]
    });
    function createtable(url, headerId) {
        $("#myTab li").removeClass("active");
        $(".tab-pane").removeClass("in active");
        $("#myTab li:eq(1)").addClass("active");
        $("#tabDetail").addClass("in active");
        $.ajax({
            url: url,
            type: 'post',
            data: {
                headerId: headerId
            },
            success: function (value) {
                $("#bootstrap-table1").bootstrapTable('load', value.data);
            }
        })
    }
    /*入库单列表-详细*/
    function detail(headerId) {
        let url = detailPrefix + "/list/" + headerId;
        // createMenuItem(url, "入库组盘明细");
        S_headerId = headerId;
        createtable(url, S_headerId);
    }
    /* 单个删除组盘明细 */
    function remove(id) {
        $.modal.confirm("确定删除该条明细信息吗？", function () {
            let url = detailPrefix + "/remove";
            let data = {"id": id};
            $.operate.post(url, data);
            createtable(url, S_headerId);
        });
    }
    /* 批量删除组盘 */
    function batchRemoveHead() {
        let rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length === 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要撤销选中的" + rows.length + "条组盘吗?", function () {
            let url = prefix + "/remove";
            let ids = "";
            for (let i = 0; i < rows.length; i++) {
                ids = ids + rows[i].id + ","
            }
            let data = {"ids": ids.substring(0, ids.length - 1)};
            $.operate.post(url, data);
            // submit(url, "post", "json", data);
        });
    }
    /*function chooseStation(id) {
        let url = ctx + "receipt/receiptContainerHeader/chooseStation" + "/" + id;
        $.modal.open("选择站台", url);
    }*/
    function createTaskNew(receiptContainerHeaderId) {
        let url = ctx + "receipt/receiptContainerHeader/createTaskNew" + "/" + receiptContainerHeaderId;
        $.modal.open("创建入库任务", url);
    }
    /* 单个生成任务 */
    function createTask(row) {
        if (row.containerCode.substring(0, 5) === "ZJ-02") {
            createTaskNew(row.id)
        } else {
            let url = prefix + "/createTask";
            let data = {"ids": row.id};
            $.operate.post(url, data);
        }
    }
    function position(id) {
        let url = prefix + "/position/";
        let data = {"ids": id};
        $.operate.post(url, data);
    }
</script>
</body>
</html>