xhkjedu
/
xh_web_admin

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>河南星火燎原软件科技有限公司</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../librarys/bootstrap@3.4.1/bootstrap.css" />
    <link rel="stylesheet" href="../css/comm.css" />
    <style>
      body {
        background-color: #fff;
      }
      .user_main {
        margin: 0 auto;
        margin-top: 50px;
        width: 1000px;
      }
      .user_main .table.table-bordered th {
        text-align: center;
        background-color: #f7f7f7;
      }
      .user_main .table.table-bordered td {
        text-align: center;
        background-color: #fff;
      }
      .user_main .table.table-bordered .action_btn {
        margin: 0 10px;
        cursor: pointer;
      }
      .user_main .table.table-bordered .action_show {
        display: block;
      }
      .user_main .table.table-bordered .action_hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="user_main">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>用户姓名</th>
            <th>登录账户</th>
            <th style="width: 110px">手机号</th>
            <th style="width: 70px">状态</th>
            <th>创建人姓名</th>
            <th style="width: 160px">创建时间</th>
            <th style="width: 140px">操作</th>
          </tr>
        </thead>
        <tbody class="userTableBody"></tbody>
      </table>
      <div class="user_page page_box">
        <!-- <div class="page_prev disabled">&lt;</div>
        <div data-page="1" class="page_num selected">1</div>
        <div class="page_num">2</div>
        <div class="page_next">&gt;</div> -->
      </div>
    </div>
    <!-- 修改用户弹窗 -->
    <div
      class="modal fade"
      id="userModifyModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="modifyTitle"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="modifyTitle">修改用户信息</h4>
          </div>
          <div class="modal-body">确定删除选中信息？</div>
          <div class="modal-footer">
            <div type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </div>
            <div type="button" class="btn btn-primary modify_save">保存</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除用户弹窗 -->
    <div
      class="modal fade"
      id="userDelModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="delTitle"
    >
      <div class="modal-dialog tip_modal" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="delTitle">提示</h4>
          </div>
          <div class="modal-body">确定删除选中信息？</div>
          <div class="modal-footer">
            <div type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </div>
            <div type="button" class="btn btn-primary del_save">保存</div>
          </div>
        </div>
      </div>
    </div>
    <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
    <script src="../librarys/bootstrap@3.4.1/bootstrap.js"></script>
    <script src="../utils/index.js"></script>
    <script>
      $(function () {
        if (!$.isLogin()) {
          window.location.href = "/sections/login.html";
          return;
        }
        let userSearch = {
          page: 1,
          size: 10,
          userstate: 1,
          username: "",
          total: 0,
          list: [],
        };
        // 获取用户列表
        function getUserList() {
          $.ajax({
            type: "POST",
            url: $.baseUrl + "user/list",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
              page: userSearch.page,
              size: userSearch.size,
              userstate: userSearch.userstate,
              username: userSearch.username,
            }),
            success: function (data) {
              if (data.code === 0) {
                userSearch.total = data.obj.total;
                userSearch.list = data.obj.list;
                console.log("getUserList", data);
                setTableHtml();
                setPageList();
              } else {
                userSearch.total = 0;
                userSearch.list = [];
                alert(data.msg);
              }
            },
          });
        }
        // 设置页码信息
        function setPageList() {
          let pageBoxHtml =
            '<div class="page_prev ' +
            (userSearch.page === 1 ? "disabled" : "") +
            '">&lt;</div>';
          for (
            let _pageIndex = 0;
            _pageIndex < Math.ceil(userSearch.total / userSearch.size);
            _pageIndex++
          ) {
            pageBoxHtml +=
              '<div data-page="' +
              (_pageIndex + 1) +
              '" class="page_num ' +
              (_pageIndex + 1 === userSearch.page ? "selected" : "") +
              '">' +
              (_pageIndex + 1) +
              "</div>";
          }
          pageBoxHtml +=
            '<div class="page_next ' +
            (userSearch.page === Math.ceil(userSearch.total / userSearch.size)
              ? "disabled"
              : "") +
            '">&gt;</div>';
          if (userSearch.total > 0) {
            $(".user_page.page_box").html(pageBoxHtml);
            $(".user_page.page_box").on("click", ".page_prev", function () {
              if (userSearch.page > 1) {
                userSearch.page--;
              }
            });
            $(".user_page.page_box").on("click", ".page_num", function () {});
            $(".user_page.page_box").on("click", ".page_next", function () {});
          } else {
            $(".user_page.page_box").html("");
          }
        }
        // 设置表格信息
        function setTableHtml() {
          let userTableBodyHtml = "";
          $.each(userSearch.list, function (_userIndex, _userItem) {
            userTableBodyHtml +=
              "<tr><td>" +
              (_userIndex + 1 + (userSearch.page - 1) * userSearch.size) +
              "</td><td>" +
              (_userItem.username ? _userItem.username : "") +
              "</td><td>" +
              _userItem.loginname +
              "</td><td>" +
              (_userItem.userphone ? _userItem.userphone : "") +
              "</td><td>" +
              (_userItem.userstate === 1 ? "正常" : "已删除") +
              "</td><td>" +
              (_userItem.createname ? _userItem.createname : "") +
              "</td><td>" +
              $.dateFormat(_userItem.createtime) +
              '</td><td><div class="' +
              (_userItem.userstate === 1 ? "action_show" : "action_hide") +
              '"><span class="my_theme_color action_btn modify_btn" data-userid="' +
              _userItem.userid +
              '">修改</span><span class="my_theme_color">|</span><span class="del_color action_btn del_btn" data-userid="' +
              _userItem.userid +
              '">删除</span></div></td></tr>';
          });
          $(".userTableBody").html(userTableBodyHtml);
          let modify_userid = null;
          let del_userid = null;
          $(".userTableBody").on("click", ".modify_btn", function () {
            $("#userModifyModal").modal("show");
            modify_userid = $(this).data("userid");
          });
          $("#userModifyModal .modify_save").on("click", function () {
            console.log("modify_userid", modify_userid);
          });
          $(".userTableBody").on("click", ".del_btn", function () {
            $("#userDelModal").modal("show");
            del_userid = $(this).data("userid");
          });
          $("#userDelModal .del_save").on("click", function () {
            $.ajax({
              type: "POST",
              url: $.baseUrl + "user/del",
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                userid: del_userid,
              }),
              success: function (data) {
                $("#userDelModal").modal("hide");
                if (data.code === 0) {
                  getUserList();
                } else {
                  alert(data.msg);
                }
              },
            });
          });
        }
        getUserList();
      });
    </script>
  </body>
</html>