<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>操作员维护</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <!-- 引入组件库 -->
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/lay/xmSelect/xm-select.js}"></script>
    <script th:src="@{/js/common.js}"></script>

    <style>
        body {
            background: #f2f2f2
        }

        #boxDiv {
            background: #ffffff
        }

        #titleDiv {
            overflow: visible;
        }

        .content {
            padding: 0 8px;
        }

        .tableTitle {
            height: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .tableTitle > * {
            height: 20px;
            line-height: 20px;
            display: inline-block;
            margin-right: 5px;
        }

        .tableName {
            border-left: 3px solid #0000FF;
            padding-left: 5px;
            font-size: 16px;
            font-weight: bold;
        }

        .selectDate {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65)
        }
    </style>
</head>
<body class="layui-layout-body">
<div id="boxDiv" style="left:8px;right: 8px;bottom:8px;top:8px;position:absolute;">
    <div class="toolbar" id="titleDiv">
        <div style="display: inline-block;">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" style="width: 240px;" id="likeFiled"
                               placeholder="请输入名称或操作员号">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="search" id="search" onclick="search()"><i
                    class="layui-icon layui-icon-search"></i>查询
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="add"><i class="layui-icon"></i>添加
            </button>
        </div>
    </div>
    <div class="content">
        <div class="tableTitle">
            <span class="tableName">操作员</span>
            <span class="selectDate">&nbsp;</span>
        </div>
        <table id="demo" lay-filter="test"></table>
    </div>

</div>
<!-- 表格操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 增加 -->
<div id="addOperator" style="display:none;">
    <form style="margin-top:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">操作员号:</label>
            <div class="layui-input-block">
                <input type="text" id="addHisOperCode" required lay-verify="required" autocomplete="off"
                       placeholder="请输入操作员号" class="layui-input formWidthTwo">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称:</label>
            <div class="layui-input-block">
                <input type="text" id="addUserName" required lay-verify="required" autocomplete="off"
                       placeholder="请输入名称" class="layui-input formWidthTwo">
            </div>
        </div>
    </form>
</div>

<!--修改-->
<div id="modifyOperator" style="display:none;">
    <form style="margin-top:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">序号:</label>
            <div class="layui-input-block">
                <input type="text" id="modifyId" required disabled="disabled" autocomplete="off"
                       class="layui-input formWidthTwo">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作员号:</label>
            <div class="layui-input-block">
                <input type="text" id="modifyHisOperCode" required lay-verify="required" autocomplete="off"
                       placeholder="请输入操作员号" class="layui-input formWidthTwo">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称:</label>
            <div class="layui-input-block">
                <input type="text" id="modifyUserName" required lay-verify="required" autocomplete="off"
                       placeholder="请输入名称" class="layui-input formWidthTwo">
            </div>
        </div>
    </form>
</div>
</body>
<script th:inline="javascript">
    let layer, laydate, table, tree, form;

    layui.use(['element', 'table', 'laydate', 'layer', 'form', 'tree'], function () {
        layer = layui.layer;
        table = layui.table;
        laydate = layui.laydate;
        tree = layui.tree;
        form = layui.form;

        //表格加载
        table.render({
            elem: '#demo',
            height: 'full-' + ($(".toolbar").height() + 60),
            title: '操作员',
            page: true,//开启分页
            limit: 20,
            limits: [20, 30, 50],
            //toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
            defaultToolbar: [],
            id: 'test',
            //skin:'line',
            even: 'true',
            //size:'lg', 默认普通尺寸 sm 小 lg 大
            cols: [
                [
                    // {type: 'numbers', title: '序号', width: 50},
                    {field: 'HISOPER_ID', align: 'center', title: '序号', sort: false},
                    {field: 'HISOPERCODE', align: 'center', title: '操作员号', sort: false},
                    {field: 'USER_NAME', align: 'center', title: '操作员名称', sort: false},
                    {field: 'MODIFY_TIME', align: 'center', title: '修改时间', sort: false},
                    {title: '操作', align: 'center', width: 150, toolbar: '#barDemo'}
                ]
            ],
            data: []
        });


        //时间控件
        laydate.render({
            elem: '#searchDate'
            , type: 'date'
            , range: '~'
        });

        //新增
        $("#add").on('click', function () {
            $("#addHisOperCode").val("");
            $('#addUserName').val("");

            layer.open({
                type: 1,
                title: "新增操作员",
                shade: 0,
                area: ['400px', '240px'],
                offset: 'auto',
                content: $("#addOperator"),
                btn: ['保存', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    let hisOperCode = $("#addHisOperCode").val();
                    let userName = $("#addUserName").val();

                    if (hisOperCode === undefined || hisOperCode === '') {
                        layer.msg('操作员号不能为空', {
                            time: 500
                        });
                        return;
                    }

                    let param = {};
                    param.hisOperCode = hisOperCode;
                    param.userName = userName;

                    let url = "/operator/addOperator";
                    AjaxPostJson(url, param, function (data) {
                        if (data.errCode === '0') {
                            layer.alert("添加成功");
                            layer.close(index);
                            let curr = $(".layui-laypage-em").next().html();
                            search(curr);
                        } else {
                            layer.alert(data.errMsg);
                        }
                    });
                },
                btn2: function () {
                }
            });
        });

        //修改、删除
        let selectData;
        table.on('tool(test)', function (obj) {
            selectData = obj.data;
            let data = obj.data;

            if (obj.event === 'edit') {
                $("#modifyHisOperCode").val(data.HISOPERCODE);
                $('#modifyUserName').val(data.USER_NAME);
                $('#modifyId').val(data.HISOPER_ID);

                layer.open({
                    type: 1,
                    title: "修改信息",
                    shade: 0,
                    area: ['400px', '280px'],
                    offset: 'auto',
                    content: $("#modifyOperator"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        let hisOperCode = $("#modifyHisOperCode").val();
                        let userName = $("#modifyUserName").val();
                        let hisoperId = $("#modifyId").val();

                        let param = {};
                        param.hisOperCode = hisOperCode;
                        param.userName = userName;
                        param.hisoperId = hisoperId;

                        let url = "/operator/modifyOperator";
                        AjaxPostJson(url, param, function (data) {
                            if (data.errCode === '0') {
                                layer.alert("修改成功");
                                layer.close(index);
                                let curr = $(".layui-laypage-em").next().html();
                                search(curr);
                            } else {
                                layer.alert(data.errMsg);
                            }
                        });
                    },
                    btn2: function () {
                    }
                });
            } else if (obj.event === 'del') {

                layer.confirm('确定删除么？', {
                        title: '删除'
                    }, function (index) {
                        let url = "/operator/deleteOperator";
                        let param = {};
                        param.hisoperId = data.HISOPER_ID;

                        AjaxPostJson(url, param, function (data) {
                            if (data.errCode === '0') {
                                layer.alert("删除成功");
                                layer.close(index);
                                let curr = $(".layui-laypage-em").next().html();
                                search(curr);
                            } else {
                                layer.alert(data.errMsg);
                            }
                        });
                    }
                );
            }
        });


        search();
    });

    //查询
    function search(num) {
        num = num === null ? 1 : num;
        let url = "/operator/findOperator";
        let param = {};

        param.likeFiled = $("#likeFiled").val();
        param.is_active = '1';
        table.reload('test', {
            method: 'get',
            url: url,
            where: param,
            page: {
                curr: num
            }
        });

    }


</script>
</html>