#
luxiaotao1123
2024-02-01 528d0da19f5fc3f5c78af3c99a1f2cfa914a27dd
zy-asrs-wms/src/main/webapp/views/host/host.html
@@ -1,55 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>仓库管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/cool.css" media="all">
    <link rel="stylesheet" href="../../static/css/common.css" media="all">
    <link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 查看详情弹窗样式 */
        .paper-info-group {
            padding: 15px 25px;
        }
        .paper-info-group h3 {
            font-weight: bold;
            color: #000000;
            padding-bottom: 8px;
        }
        .paper-info-group p {
            color: #666;
            padding-bottom: 12px;
            font-size: 16px;
        }
        .paper-info-group .paper-info-group-imgs {
            padding-top: 5px;
        }
        .paper-info-group .paper-info-group-imgs img {
            margin-right: 15px;
            margin-bottom: 15px;
            cursor: zoom-in;
        }
        .paper-info-group .paper-info-group-imgs img:last-child {
            margin-right: 0;
        }
        /* 日期组件不显示秒 */
        .laydate-time-list li:last-child {
            display: none;
        }
        .laydate-time-list li {
            width: 50% !important;
        }
        .laydate-time-list ol li {
            padding-left: 55px !important;
            width: 100% !important;
        }
    </style>
</head>
<body>
<!-- 搜索栏 -->
<div id="search-box" class="layui-form layui-card-header">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="id" placeholder="编号" autocomplete="off">
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <button id="eDialogAddBtn" class="layui-btn">添加仓库</button>
        </div>
    </div>
    <!-- 待添加 -->
    <div id="data-search-btn" class="layui-btn-container layui-form-item">
        <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">搜索</button>
        <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">重置</button>
    <div class="layui-card">
        <div class="layui-card-header">仓库 - 数据列表</div>
        <div class="layui-card-body">
            <table id="hostTable" lay-filter="hostTable"></table>
        </div>
    </div>
</div>
<!-- 表格 -->
<table class="layui-hide" id="host" lay-filter="host"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button>
        <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button>
    </div>
<script type="text/html" id="editDialog">
    <form id="detail" lay-filter="detail" class="layui-form model-form layui-row">
        <input name="id" type="hidden"/>
        <div class="layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">仓库名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="name" placeholder="请输入仓库名称" lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="memo" placeholder="请输入备注"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="editSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a>
<!-- 表格操作列 -->
<script type="text/html" id="eDialogTbBar">
    <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/host/host.js" charset="utf-8"></script>
<script>
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).use(['table','laydate', 'form', 'util', 'admin'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
<iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe>
        // 添加
        $('#eDialogAddBtn').click(function () {
            showEditModel();
        });
        // 渲染表格
        var insTb = table.render({
            elem: '#hostTable',
            headers: {token: localStorage.getItem('token')},
            url: baseUrl+'/host/list/auth',
            page: true,
            limit: 16,
            limits: [16, 30, 50, 100, 200, 500],
            cellMinWidth: 50,
            cols: [[
                {field: 'id', title: '#'}
                // ,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80}
                ,{field: 'name', align: 'center',title: '仓库名称'}
                // ,{field: 'flag', align: 'center',title: '标识'}
                // ,{field: 'createTime$', align: 'center',title: '添加时间'}
                // ,{field: 'status$', align: 'center',title: '状态'}
                // ,{field: 'createTime$', align: 'center',title: '添加时间'}
                // ,{field: 'createBy$', align: 'center',title: '添加人员'}
                ,{field: 'updateTime$', align: 'center',title: '修改时间'}
                ,{field: 'updateBy$', align: 'center',title: '修改人员'}
                ,{field: 'memo', align: 'center',title: '备注'}
                ,{align: 'center', toolbar: '#eDialogTbBar', title: '操作', minWidth: 80}
            ]],
            request: {
                pageName: 'curr',
                pageSize: 'limit'
            },
            parseData: function (res) {
                return {
                    'code': res.code,
                    'msg': res.msg,
                    'count': res.data.total,
                    'data': res.data.records
                }
            },
            response: {
                statusCode: 200
            },
            size: 'lg'
        });
        // 工具条点击事件
        table.on('tool(hostTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                var ids = [data.id];
                doDel({ids: ids});
            } else if (obj.event === 'edit') {
                showEditModel(data);
            }
        });
        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.open({
                type: 1,
                title: (mData ? '修改' : '添加') + '项目',
                area: '500px',
                content: $('#editDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('detail', mData);
                    // 表单提交事件
                    form.on('submit(editSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        $.ajax({
                            url: baseUrl+"/host/"+(mData?'update':'add')+"/auth",
                            headers: {'token': localStorage.getItem('token')},
                            data: data.field,
                            method: 'POST',
                            success: function (res) {
                                layer.close(loadIndex);
                                if (res.code === 200){
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    $(".layui-laypage-btn")[0].click();
                                } else if (res.code === 403){
                                    top.location.href = baseUrl+"/";
                                }else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    })
                }
            });
        }
        function doDel(obj) {
            layer.confirm('确定删除数据吗?', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.ajax({
                    url: baseUrl+"/host/delete/auth",
                    headers: {'token': localStorage.getItem('token')},
                    data: {ids: obj.ids},
                    method: 'POST',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200){
                            layer.msg(res.msg, {icon: 1});
                            $(".layui-laypage-btn")[0].click();
                        } else if (res.code === 403){
                            top.location.href = baseUrl+"/";
                        }else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>