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="../librarys/bootstrapValidator@0.5.3/bootstrapValidator.css"
    />
    <link rel="stylesheet" href="../css/comm.css" />
    <link rel="stylesheet" href="../css/header.css" />
    <style>
      body {
        background-color: #fff;
      }
      .user_main {
        margin: 20px auto;
        width: 1000px;
      }
      .user_main .header_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .header_left .user_radio {
        cursor: pointer;
      }
      .header_left #searchscname {
        display: inline-block;
        margin-left: 16px;
        width: 240px;
      }
      .header_left .searchBtn {
        margin-left: 16px;
      }
      .user_main .table.table-bordered th {
        text-align: center;
        background-color: #f7f7f7;
      }
      .user_main .table.table-bordered td {
        text-align: center;
        background-color: #fff;
        line-height: 40px;
      }
      .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;
      }
      .ser_img {
        width: 40px;
        height: 40px;
        cursor: pointer;
      }
      .showimgurl,
      .showimgurl img {
        width: 100%;
        height: 100%;
      }
      #uploadFile {
        display: inline-block;
      }
      .upimg {
        width: 180px;
        height: 180px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      .upimg img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="top_header_root" data-header_page="service">
      <div class="header_html_root">
        <div class="header_html_item" data-url="index">用户信息</div>
        <div class="header_html_item" data-url="history">发展历程</div>
        <div class="header_html_item" data-url="service">服务案例</div>
        <div class="header_html_item" data-url="school">学校图标</div>
        <div class="header_html_item" data-url="trial">申请试用</div>
        <div class="header_html_item" data-url="news">新闻资讯</div>
        <div class="header_html_item" data-url="log">登录日志</div>
      </div>
    </div>
    <div class="user_main">
      <div class="header_box">
        <div class="header_left">
          <div class="radio-inline">
            <input
              id="s_1"
              class="user_radio"
              name="user_radio"
              type="radio"
              value="1"
            />
            <label for="s_1" class="user_radio">中文</label>
          </div>
          <div class="radio-inline">
            <input
              id="s_2"
              class="user_radio"
              name="user_radio"
              type="radio"
              value="2"
            />
            <label for="s_2" class="user_radio">英文</label>
          </div>
          <input
            type="text"
            id="searchscname"
            class="form-control"
            placeholder="请输入服务名称"
          />
          <div type="button" class="btn btn-primary searchBtn">搜索</div>
        </div>
        <div type="button" class="btn btn-primary user_add_btn">添加</div>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th style="width: 60px">序号</th>
            <th>服务名称</th>
            <th style="width: 140px">服务地址</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="showImg"
      tabindex="-1"
      role="dialog"
      aria-labelledby="imgTitle"
    >
      <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="imgTitle">查看图片</h4>
          </div>
          <div class="modal-body">
            <div class="showimgurl"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加用户弹窗 -->
    <div
      class="modal fade"
      id="userAddModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="AddTitle"
    >
      <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="AddTitle">添加服务案例</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id="UserAddForm">
              <div class="form-group">
                <label for="scnameInput" class="col-sm-2 control-label"
                  >服务名称</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="scnameInput"
                    name="scname"
                    placeholder="请输入服务名称"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="scorderInput" class="col-sm-2 control-label"
                  >排序</label
                >
                <div class="col-sm-10">
                  <input
                    type="number"
                    class="form-control"
                    id="scorderInput"
                    name="scorder"
                    placeholder="请输入排序"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="loginnameInput" class="col-sm-2 control-label"
                  >上传图片</label
                >
                <div class="col-sm-10">
                  <div class="upimg addimg"></div>
                  <input type="file" id="uploadFile" />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <div
              type="button"
              class="btn btn-default add_cancel"
              data-dismiss="modal"
            >
              取消
            </div>
            <div type="button" class="btn btn-primary add_save">确定</div>
          </div>
        </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">
            <form class="form-horizontal" id="userModifyForm">
              <div class="form-group">
                <label for="m_scnameInput" class="col-sm-2 control-label"
                  >服务名称</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="m_scnameInput"
                    name="scname"
                    placeholder="请输入服务名称"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="m_loginnameInput" class="col-sm-2 control-label"
                  >登录账号</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="m_loginnameInput"
                    name="loginname"
                    placeholder="请输入登录账号"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="m_loginpwdInput" class="col-sm-2 control-label"
                  >登录密码</label
                >
                <div class="col-sm-10">
                  <input
                    type="password"
                    class="form-control"
                    id="m_loginpwdInput"
                    name="loginpwd"
                    placeholder="请输入登录密码"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="m_userphoneInput" class="col-sm-2 control-label"
                  >手机号</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    id="m_userphoneInput"
                    name="userphone"
                    placeholder="请输入手机号"
                  />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <div
              type="button"
              class="btn btn-default mo_cancel"
              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 del_cancel"
              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="../librarys/bootstrapValidator@0.5.3/bootstrapValidator.js"></script>
    <script src="../utils/index.js"></script>
    <script>
      $(function () {
        let page_url = $(".top_header_root").data("header_page");
        //导航跳转
        $(
          '.header_html_root .header_html_item[data-url="' + page_url + '"]'
        ).addClass("selected");
        $(".header_html_root").on("click", ".header_html_item", function () {
          let _url = $(this).data("url");
          if (_url === "index") {
            window.location.href = "/index.html";
          } else {
            window.location.href = "/sections/" + _url + ".html";
          }
        });
        //检测登录
        if (!$.isLogin()) {
          window.location.href = "/sections/login.html";
          return;
        }
        let Search = {
          page: Number($.getQueryletiable("page")) || 1,
          size: 10,
          ltype: Number($.getQueryletiable("ltype")) || 1,
          scname: $.getQueryletiable("scname") || "",
          total: 0,
          list: [],
          scpic: "",
          scorder: 0,
          createid: 0
        };
        //默认中英文单选框 1
        $('.header_left input:radio[name="user_radio"]').each(function (
          _index,
          radioItem
        ) {
          if (Number($(radioItem).val()) === Search.ltype) {
            $(radioItem).attr("checked", true);
          } else {
            $(radioItem).attr("checked", false);
          }
        });
        // 获取用户列表
        function getUserList() {
          $.ajax({
            type: "POST",
            url: $.baseUrl + "sc/list",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
              page: Search.page,
              size: Search.size,
              ltype: Search.ltype,
              scname: Search.scname
            }),
            success: function (data) {
              if (data.code === 0) {
                Search.total = data.obj.total;
                Search.list = data.obj.list;
                Search.scorder = data.obj.total;
                console.log(Search);
                setTableHtml();
                setPageList();
              } else {
                Search.total = 0;
                Search.list = [];
                alert(data.msg);
              }
            }
          });
        }
        // 设置页码信息
        function setPageList() {
          let pageBoxHtml =
            '<div class="page_prev ' +
            (Search.page === 1 ? "disabled" : "") +
            '">&lt;</div>';
          for (
            let _pageIndex = 0;
            _pageIndex < Math.ceil(Search.total / Search.size);
            _pageIndex++
          ) {
            pageBoxHtml +=
              '<div data-page="' +
              (_pageIndex + 1) +
              '" class="page_num ' +
              (_pageIndex + 1 === Search.page ? "selected" : "") +
              '">' +
              (_pageIndex + 1) +
              "</div>";
          }
          pageBoxHtml +=
            '<div class="page_next ' +
            (Search.page === Math.ceil(Search.total / Search.size)
              ? "disabled"
              : "") +
            '">&gt;</div>';
          if (Search.total > 0) {
            $(".user_page.page_box").html(pageBoxHtml);
            $(".user_page.page_box").on("click", ".page_prev", function () {
              if (Search.page > 1) {
                Search.page--;
                window.location.href =
                  "/index.html?page=" +
                  Search.page +
                  "&ltype=" +
                  Search.ltype +
                  "&scname=" +
                  Search.scname;
              }
            });
            $(".user_page.page_box").on("click", ".page_num", function () {
              Search.page = $(this).data("page");
              window.location.href =
                "/index.html?page=" +
                Search.page +
                "&ltype=" +
                Search.ltype +
                "&scname=" +
                Search.scname;
            });
            $(".user_page.page_box").on("click", ".page_next", function () {
              if (Search.page < Math.ceil(Search.total / Search.size)) {
                Search.page++;
                window.location.href =
                  "/index.html?page=" +
                  Search.page +
                  "&ltype=" +
                  Search.ltype +
                  "&scname=" +
                  Search.scname;
              }
            });
          } else {
            $(".user_page.page_box").html("");
          }
        }
        // 设置表格信息
        function setTableHtml() {
          let userTableBodyHtml = "";
          $.each(Search.list, function (_userIndex, _userItem) {
            userTableBodyHtml +=
              "<tr><td>" +
              (_userIndex + 1 + (Search.page - 1) * Search.size) +
              "</td><td>" +
              (_userItem.scname ? _userItem.scname : "") +
              "</td><td><img class='ser_img' src='" +
              (_userItem.scpic ? $.showImageUrl + _userItem.scpic : "") +
              "' data-img='" +
              (_userItem.scpic ? $.showImageUrl + _userItem.scpic : "") +
              "' data-title='" +
              (_userItem.scname ? _userItem.scname : "") +
              "'></td><td>" +
              (_userItem.createname ? _userItem.createname : "") +
              "</td><td>" +
              $.dateFormat(_userItem.createtime) +
              '</td><td><div class="' +
              (_userItem.ltype === 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>';
          });
          //点击图片放大 ser_img
          $(".userTableBody").on("click", ".ser_img", function () {
            let _url = $(this).data("img");
            let title = $(this).data("title");
            if (_url) {
              $("#showImg").modal("show");
              $(".showimgurl").html("<img src='" + _url + "'>");
            }
            if (title) {
              $("#imgTitle").text(title);
            }
          });
          $(".userTableBody").html(userTableBodyHtml);
          let del_userid = null;
          //删除弹窗
          $(".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) {
                  window.location.href =
                    "/index.html?page=" +
                    Search.page +
                    "&ltype=" +
                    Search.ltype +
                    "&scname=" +
                    Search.scname;
                } else {
                  alert(data.msg);
                }
              }
            });
          });
        }
        //添加弹窗
        $(".user_main .header_box .user_add_btn").click(function () {
          $("#userAddModal").modal("show");
          Search.scorder++;
          $("#scorderInput").val(Search.scorder);
        });
        //获取图片地址
        $("#uploadFile").on("change", function () {
          let file = this.files[0]; //这是我们上传的文件
          let size = file.size / 1024 / 1024;
          let str = file.name.split(".");
          let suffix = str[str.length - 1];
          if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
            alert("请上传png、jpg、jpeg类型的文件");
            return false;
          }
          if (size > 10) {
            alert("图片太大，不能超过10M！");
            return false;
          }
          const form = new FormData();
          form.append("file", file);
          form.append("savefolder", "servicecase");
          $.ajax({
            type: "POST",
            url: $.baseUrl + "file/upload",
            contentType: false,
            processData: false,
            data: form,
            success: function (data) {
              if (data.code === 0) {
                Search.scpic = data.obj;
                $(".addimg").html("<img src='" + $.showImageUrl + scpic + "'>");
              } else {
                alert(data.msg);
              }
            }
          });
        });
        //添加 取消add_cancel
        $(".add_cancel").on("click", function () {
          console.log(1);
        });
        //确定添加
        $("#userAddModal .add_save").on("click", function () {
          // 添加表单验证
          $("#UserAddForm").bootstrapValidator({
            // 默认的提示消息
            message: "请输入内容",
            // 表单框里右侧的icon
            feedbackIcons: {
              valid: "glyphicon glyphicon-ok",
              invalid: "glyphicon glyphicon-remove",
              validating: "glyphicon glyphicon-refresh"
            },
            fields: {
              scname: {
                validators: {
                  notEmpty: {
                    message: "请输入服务名称"
                  }
                }
              },
              scorder: {
                validators: {
                  notEmpty: {
                    message: "请输入排序"
                  }
                }
              }
            }
          });
          //先校验，在调是否通过校验的方法
          $("#UserAddForm").data("bootstrapValidator").validate();
          //校验表单是否通过
          let flag = $("#UserAddForm").data("bootstrapValidator").isValid();
          if (!Search.scpic) {
            //请上传图片
            alert("请上传图片!");
            return;
          }
          if (flag) {
            let _url = $.baseUrl + "sc/save";
            $.ajax({
              type: "POST",
              url: _url,
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                scname: Search.scname,
                scpic: Search.scpic,
                ltype: Search.ltype,
                createid: $.userInfo.userid,
                scorder: Search.scorder
              }),
              success: function (data) {
                if (data.code === 0) {
                  window.location.href =
                    "/sections/service.html?page=" +
                    Search.page +
                    "&ltype=" +
                    Search.ltype +
                    "&scname=" +
                    Search.scname;
                } else {
                  alert(data.msg);
                }
              }
            });
          }
        });
        let modify_userid = null;
        //修改
        $(".userTableBody").on("click", ".modify_btn", function () {
          modify_userid = $(this).data("userid");
          $("#userModifyModal").modal("show");
          $.each(Search.list, function (_index, _userItem) {
            if (_userItem.userid === modify_userid) {
              console.log("modify_userid", _userItem);
              $("#userModifyForm #m_scnameInput").val(_userItem.scname);
              $("#userModifyForm #m_loginnameInput").val(_userItem.loginname);
              $("#userModifyForm #m_loginpwdInput").val(_userItem.loginpwd);
              $("#userModifyForm #m_userphoneInput").val(_userItem.userphone);
            }
          });
        });
        //确定修改
        $("#userModifyModal .modify_save").on("click", function () {
          // 添加表单验证
          $("#userModifyForm").bootstrapValidator({
            // 默认的提示消息
            message: "请输入内容",
            // 表单框里右侧的icon
            feedbackIcons: {
              valid: "glyphicon glyphicon-ok",
              invalid: "glyphicon glyphicon-remove",
              validating: "glyphicon glyphicon-refresh"
            },
            fields: {
              scname: {
                validators: {
                  notEmpty: {
                    message: "请输入用户姓名"
                  }
                }
              },
              loginname: {
                validators: {
                  notEmpty: {
                    message: "请输入登录账号"
                  },
                  stringLength: {
                    //长度限制
                    min: 4,
                    max: 18,
                    message: "登录账号长度必须在4~18个字符之间"
                  }
                }
              },
              loginpwd: {
                validators: {
                  notEmpty: {
                    message: "请输入登录密码"
                  },
                  stringLength: {
                    //长度限制
                    min: 6,
                    max: 16,
                    message: "登录密码长度必须在6~16个字符之间"
                  }
                }
              },
              userphone: {
                validators: {
                  // notEmpty: {
                  //   message: "请输入手机号",
                  // },
                  regexp: {
                    regexp: /^1\d{10}$/,
                    message: "请输入正确的11位手机号"
                  }
                }
              }
            }
          });
          //先校验，在调是否通过校验的方法
          $("#userModifyForm").data("bootstrapValidator").validate();
          //校验表单是否通过
          let flag = $("#userModifyForm").data("bootstrapValidator").isValid();
          if (flag) {
            let _url = $.baseUrl + "user/update";
            $.ajax({
              type: "POST",
              url: _url,
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                scname: $("#userModifyForm #m_scnameInput").val(),
                loginname: $("#userModifyForm #m_loginnameInput").val(),
                loginpwd: $("#userModifyForm #m_loginpwdInput").val(),
                userid: modify_userid,
                userphone: $("#userModifyForm #m_userphoneInput").val()
              }),
              success: function (data) {
                if (data.code === 0) {
                  window.location.href =
                    "/index.html?page=" +
                    Search.page +
                    "&ltype=" +
                    Search.ltype +
                    "&scname=" +
                    Search.scname;
                } else {
                  alert(data.msg);
                }
              }
            });
          }
        });
        //切换中英文
        $(".header_left").on(
          "click",
          'input:radio[name="user_radio"]',
          function () {
            window.location.href =
              "/sections/service.html?page=" +
              Search.page +
              "&ltype=" +
              $('.header_left input:radio[name="user_radio"]:checked').val() +
              "&scname=" +
              Search.scname;
          }
        );
        $("#searchscname").val(Search.scname);
        $("#searchscname").on("change", function () {
          Search.scname = $(this).val();
        });
        //搜索
        $(".header_left .searchBtn").click(function () {
          window.location.href =
            "/sections/service.html?page=" +
            Search.page +
            "&ltype=" +
            Search.ltype +
            "&scname=" +
            Search.scname;
        });
        getUserList();
      });
    </script>
  </body>
</html>