123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452 |
- <!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"></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"></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.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.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>
- <button onclick="showEditUserForm('${v.Id}')" class="layui-btn layui-btn-normal layui-btn-sm">编辑</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);
- const jsonData = JSON.stringify(data.field);
- let url = "/User/add";
- let method = "POST";
- if (data.field.Id) { // 检查是否存在Id字段
- url = "/User/updateUser";
- method = "POST";
- }
- $.ajax({
- type: method,
- url: url,
- 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元素
- });
- window.showEditUserForm = function (userId) {
- layui.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 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 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" lay-affix="eye" name="T_pass" 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-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>
- <input type="hidden" name="Id" id="userIdInput">
- </form>
- `,
- success: function (layero, index) {
- $.ajax({
- type: "GET",
- url: "/User/detail?Id=" + userId,
- success: function (result) {
- let user = result.Data;
- console.log("================", user)
- $('#companySelect').append(`<option value="${user.T_pid}">${user.T_pid}</option>`); // 修改此处显示公司名称
- $('input[name="T_name"]').val(user.T_name);
- $('input[name="T_user"]').val(user.T_user);
- $('input[name="T_pass"]').val('');
- $('#userIdInput').val(user.Id); // 设置Id字段
- form.render('select'); // 重新渲染select元素
- form.render('radio'); // 重新渲染radio元素
- }
- });
- $.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元素
- }
- });
- }
- });
- }
- // 添加 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>
|