bzdadmin
/
ColdP_server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
							<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link rel="bookmark" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/static/layui/css/modules/laydate/default/laydate.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <!--    <script src="/static/lib/layui/lay/modules/laydate.js"/>-->
    <script src="/static/lib/layui/lay/modules/layer.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <style>
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
               <a><cite>设备管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input id="deviceName" type="text" name="Name"
                                   placeholder="用户名称"
                                   autocomplete="off" class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search"
                                    onclick="getDeviceDataList(1)">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search"
                                    onclick="showAddUserForm()">
                                <i class="layui-icon">&#xe615;</i>添加用户
                            </button>
                        </div>
                    </div>
                </div>
                <!--数据列表部分-->
                <div class="layui-card-body " style="min-height: 400px">
                    <table class="layui-table" lay-size="lg">
                        <colgroup>
                            <!--                            <col width="20">-->
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <!--                        <th>选择</th>-->
                        <th>用户名</th>
                        <th>用户账号</th>
                        <th>公司</th>
                        <th>用户状态</th>
                        <th>操作</th>
                        </thead>
                        <tbody id="tableBody">

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

                <div class="layui-card-body ">
                    <div class="page">
                        <div id="pageTool">
                            <!--上一页-->
                        </div>
                    </div>
                </div>
                <!--分页、选择区域 start-->
                <!-- 分页、选择区域 end -->
            </div>
        </div>
    </div>
</div>

<script>
    //数据表格
    let pageInfo = null
    let currentPage = 1

    function getDeviceDataList(currentPage) {
        // 显示加载页面
        layui.layer.load();
        let searchDeviceName = $('#deviceName').val()
        let searchDeviceClass = $('#searchClass').val()
        console.log(searchDeviceName, searchDeviceClass)
        let formData = new FormData();
        formData.set('page', currentPage)
        formData.set('T_name', searchDeviceName)
        $.ajax({
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            url: "/User/list?search=",
            success: function (result) {
                pageInfo = result
                let b = $('#tableBody')
                b.html("")
                if (result.list != null) {
                    layui.layer.closeAll("loading");
                    for (let v of result.list) {
                        let buttonHtml = '';
                        if (v.T_State === 1) {
                            buttonHtml = `<button onclick="updateUserState('${v.T_State}', '${v.Id}', 0)" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-green">启用</button>`;
                        } else if (v.T_State === 0) {
                            buttonHtml = `<button onclick="updateUserState('${v.T_State}', '${v.Id}', 1)" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-red">禁用</button>`;
                        }
                        let isTrueStyle = v.Is_true === 1 ? 'style="background-color: #00FF97FF;"' : '';
                        b.append(`<tr ${isTrueStyle}>
                            <td>${v.T_name}</td>
                            <td>${v.T_user}</td>
                            <td>${v.T_Company}【${v.T_pid}】</td>
                            <td>
                                ${buttonHtml}
                            </td>
                            <td>
                               <button onclick="DeleteUser('${v.Id}')" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-red">删除</button>
                            </td>
                        </tr>
                        `)
                    }
                } else {
                    b.append(`<tr>
                        <td colspan="5" rowspan="10" style="height: 590px;text-align: center">没有设备数据！</td>
                    </tr>`)

                }
                //渲染分页
                $('#pageTool').html('')
                if (!pageInfo.previousPage) {
                    $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage - 1})">上一页</button>`)

                } else {
                    $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-disabled layui-btn-sm" onclick="getDeviceDataList(${pageInfo.currentPage - 1})">上一页</button>`)

                }

                //页码
                let start, end
                start = pageInfo.currentPage - 2 <= 0 ? 1 : pageInfo.currentPage - 2
                end = pageInfo.currentPage + 2 >= pageInfo.totalPage ? pageInfo.totalPage : pageInfo.currentPage + 2
                end = end + (Math.abs(end - start)) >= pageInfo.totalPage ? pageInfo.totalPage : end + (Math.abs(end - start))
                start = start - (Math.abs(end - start)) <= 0 ? 1 : start - (Math.abs(end - start))
                for (; start <= end; start++) {
                    if (pageInfo.currentPage == start) {
                        $('#pageTool').append(`<button class="layui-btn layui-btn-disabled layui-btn-primary layui-btn-sm" onclick="getDeviceDataList(${start})">${start}</button>`)

                    } else {
                        $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="getDeviceDataList(${start})">${start}</button>`)

                    }
                }

                if (!pageInfo.nextPage) {
                    $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage + 1})">下一页</button>`)

                } else {
                    $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-disabled layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage + 1})">下一页</button>`)

                }

            }
        })
    }

    $(function () {
        getDeviceDataList(1) //获取数据列表
    })

    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;

        window.showAddUserForm = function () { // 将 showAddUserForm 定义在 window 对象上
            layer.open({
                type: 1,
                title: '添加用户',
                area: ['500px', '400px'],
                content: ` <form class="layui-form" action="" style="margin: 20px;" lay-filter="formDemo">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="T_name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="T_user" required lay-verify="required" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="T_pass" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">公司</label>
                        <div class="layui-input-block">
                            <select id="companySelect" name="T_pid" lay-verify="required" lay-search>
                                <option value="">请选择公司</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否管理员</label>
                        <div class="layui-input-block">
                            <input type="radio" name="noCompany" value="0" title="无公司" lay-filter="noCompany">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
                        </div>
                    </div>
                </form>
            `,
                success: function (layero, index) {
                    $.ajax({
                        type: "GET",
                        url: "/company/list",
                        success: function (result) {
                            let companySelect = $('#companySelect');
                            result.Data.forEach(function (company) {
                                companySelect.append(`<option value="${company.Id}">${company.T_name}</option>`);
                            });
                            form.render('select'); // 重新渲染select元素
                            form.render('radio'); // 重新渲染radio元素
                        }
                    });
                }
            });
        }
        form.on('submit(formDemo)', function (data) {
            console.log(data.field);
            // 封装成 JSON 对象并打印
            const jsonData = JSON.stringify(data.field);
            $.ajax({
                type: "POST",
                url: "/User/add",
                data: jsonData,
                contentType: "application/json",
                success: function (result) {
                    if (result.Code === 200) {
                        layui.layer.msg('添加成功');
                        getDeviceDataList(currentPage);
                        // 添加成功后关闭弹窗
                        layer.closeAll();
                    } else {
                        layui.layer.msg(result.Msg);
                    }
                },
                error: function () {
                    layui.layer.msg('添加失败');
                }
            });
            return false; // 阻止表单跳转
        });
        // 添加 radio 监听事件
        form.on('radio(noCompany)', function (data) {
            if (data.value === '0') {
                $('#companySelect').removeAttr('lay-verify');
            } else {
                $('#companySelect').attr('lay-verify', 'required');
            }
            form.render('select'); // 重新渲染select元素
        });
    });

    // 新增函数 updateUserState
    function updateUserState(uuid, id, newState) {
        const params = {
            T_State: newState,
            Id: id
        };
        $.ajax({
            type: "GET",
            url: "/User/update",
            data: params,
            success: function (result) {
                if (result.Code === 200) {
                    layui.layer.msg('更新成功');
                    getDeviceDataList(currentPage); // 重新加载数据列表
                } else {
                    layui.layer.msg(result.Msg);
                }

            },
            error: function () {
                layui.layer.msg('更新失败');
            }
        });
    }

    function DeleteUser(id) {
        layui.layer.confirm('确定要删除该用户吗？', {
            btn: ['是', '否'] // 按钮
        }, function (index) {
            // 用户点击是
            const params = {
                Id: id
            };

            $.ajax({
                type: "GET",
                url: "/User/delete",
                data: params,
                success: function (result) {
                    if (result.Code === 200) {
                        layui.layer.msg('更新成功');
                        getDeviceDataList(currentPage); // 重新加载数据列表
                    } else {
                        layui.layer.msg(result.Msg);
                    }
                },
                error: function () {
                    layui.layer.msg('更新失败');
                }
            });
            layui.layer.close(index);
        }, function (index) {
            // 用户点击否
            layui.layer.close(index);
        });
    }
</script>
</body>

</html>