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/bootstrap@3.4.1/bootstrap-datepicker.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;
      }
      .history_main {
        margin: 20px auto;
        width: 1000px;
      }
      .history_main .header_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .header_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .header_left #dhyearPicker {
        margin-right: 16px;
      }
      .history_radio {
        cursor: pointer;
      }
      .header_left .searchBtn {
        margin-left: 16px;
      }
      .history_main .table.table-bordered th {
        text-align: center;
        background-color: #f7f7f7;
      }
      .history_main .table.table-bordered td {
        text-align: center;
        background-color: #fff;
      }
      .history_main .table.table-bordered .action_btn {
        margin: 0 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="top_header_root" data-header_page="history">
      <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="history_main">
      <div class="header_box">
        <div class="header_left">
          <div class="input-group date" id="dhyearPicker">
            <input type="text" class="form-control" name="dhyear" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
          <div class="radio-inline">
            <input
              id="s_0"
              class="history_radio"
              name="history_type"
              type="radio"
              value="1"
            />
            <label for="s_0" class="history_radio">中文</label>
          </div>
          <div class="radio-inline">
            <input
              id="s_1"
              class="history_radio"
              name="history_type"
              type="radio"
              value="2"
            />
            <label for="s_1" class="history_radio">英文</label>
          </div>
          <div type="button" class="btn btn-primary searchBtn">搜索</div>
        </div>
        <div type="button" class="btn btn-primary history_add_btn">添加</div>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th style="width: 60px">序号</th>
            <th style="width: 80px">年份</th>
            <th style="width: 80px">月份</th>
            <th style="width: 80px">类型</th>
            <th>内容</th>
            <th style="width: 100px">创建人</th>
            <th style="width: 160px">创建时间</th>
            <th style="width: 140px">操作</th>
          </tr>
        </thead>
        <tbody class="historyTableBody"></tbody>
      </table>
      <div class="history_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="historyAddModal"
      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="historyAddForm">
              <div class="form-group">
                <label class="col-sm-2 control-label">类型</label>
                <div class="col-sm-10">
                  <div class="radio-inline">
                    <input
                      id="add_0"
                      class="history_radio"
                      name="history_ltype"
                      type="radio"
                      value="1"
                      checked
                    />
                    <label for="add_0" class="history_radio">中文</label>
                  </div>
                  <div class="radio-inline">
                    <input
                      id="add_1"
                      class="history_radio"
                      name="history_ltype"
                      type="radio"
                      value="2"
                    />
                    <label for="add_1" class="history_radio">英文</label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="addDhyearPicker" class="col-sm-2 control-label"
                  >日期</label
                >
                <div class="col-sm-10">
                  <div class="input-group date" id="addDhyearPicker">
                    <input
                      type="text"
                      class="form-control"
                      name="history_dhyear"
                    />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="contentInput" class="col-sm-2 control-label"
                  >内容</label
                >
                <div class="col-sm-10">
                  <textarea
                    type="text"
                    class="form-control"
                    id="contentInput"
                    name="history_content"
                    placeholder="请输入内容"
                  ></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <div type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </div>
            <div type="button" class="btn btn-primary add_save">确定</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改发展历程 -->
    <div
      class="modal fade"
      id="historyModifyModal"
      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="historyModifyForm">
              <div class="form-group">
                <label class="col-sm-2 control-label">类型</label>
                <div class="col-sm-10">
                  <div class="radio-inline">
                    <input
                      id="modify_0"
                      class="history_radio"
                      name="m_history_ltype"
                      type="radio"
                      value="1"
                      checked
                    />
                    <label for="modify_0" class="history_radio">中文</label>
                  </div>
                  <div class="radio-inline">
                    <input
                      id="modify_1"
                      class="history_radio"
                      name="m_history_ltype"
                      type="radio"
                      value="2"
                    />
                    <label for="modify_1" class="history_radio">英文</label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="modifyDhyearPicker" class="col-sm-2 control-label"
                  >日期</label
                >
                <div class="col-sm-10">
                  <div class="input-group date" id="modifyDhyearPicker">
                    <input
                      type="text"
                      class="form-control"
                      name="m_history_dhyear"
                    />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="m_contentInput" class="col-sm-2 control-label"
                  >内容</label
                >
                <div class="col-sm-10">
                  <textarea
                    type="text"
                    class="form-control"
                    id="m_contentInput"
                    name="m_history_content"
                    placeholder="请输入内容"
                  ></textarea>
                </div>
              </div>
            </form>
          </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="historyDelModal"
      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="../librarys/bootstrap@3.4.1/bootstrap-datepicker.js"></script>
    <script src="../librarys/bootstrap@3.4.1/bootstrap-datepicker.zh-CN.min.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 historySearch = {
          page: Number($.getQueryletiable("page")) || 1,
          size: 10,
          dhyear:
            $.getQueryletiable("dhyear") || new Date().getFullYear().toString(),
          ltype: Number($.getQueryletiable("ltype")) || 1,
          total: 0,
          list: [],
        };
        $(".header_left #dhyearPicker")
          .datepicker({
            autoclose: true,
            startView: 2,
            maxViewMode: 2,
            minViewMode: 2,
            format: "yyyy",
            language: "zh-CN",
          })
          .datepicker("setDate", String(historySearch.dhyear));
        $(".header_left #dhyearPicker input[name='dhyear']").on(
          "change",
          function () {
            historySearch.dhyear = $(this).val();
            window.location.href =
              "/sections/history.html?page=" +
              historySearch.page +
              "&dhyear=" +
              historySearch.dhyear +
              "&ltype=" +
              historySearch.ltype;
          }
        );
        $(".header_left input[name='history_type']").each(function (
          _index,
          _typeItem
        ) {
          if (Number($(_typeItem).val()) === historySearch.ltype) {
            $(_typeItem).attr("checked", true);
          } else {
            $(_typeItem).attr("checked", false);
          }
        });
        $(".header_left").on(
          "click",
          'input:radio[name="history_type"]',
          function () {
            window.location.href =
              "/sections/history.html?page=" +
              historySearch.page +
              "&dhyear=" +
              historySearch.dhyear +
              "&ltype=" +
              $('.header_left input:radio[name="history_type"]:checked').val();
          }
        );
        $(".header_left .searchBtn").click(function () {
          window.location.href =
            "/sections/history.html?page=" +
            historySearch.page +
            "&dhyear=" +
            historySearch.dhyear +
            "&ltype=" +
            historySearch.ltype;
        });
        $(".history_main .header_box .history_add_btn").click(function () {
          $("#historyAddModal").modal("show");
          $("#historyAddModal #addDhyearPicker")
            .datepicker({
              autoclose: true,
              startView: 1,
              maxViewMode: 2,
              minViewMode: 1,
              format: "yyyy-mm",
              language: "zh-CN",
            })
            .datepicker("setDate", "now");
        });
        $("#historyAddModal .add_save").on("click", function () {
          // 添加表单验证
          $("#historyAddForm").bootstrapValidator({
            // 默认的提示消息
            message: "请输入内容",
            // 表单框里右侧的icon
            // feedbackIcons: {
            //   valid: "glyphicon glyphicon-ok",
            //   invalid: "glyphicon glyphicon-remove",
            //   validating: "glyphicon glyphicon-refresh",
            // },
            fields: {
              history_ltype: {
                validators: {
                  notEmpty: {
                    message: "请选择类型",
                  },
                },
              },
              history_dhyear: {
                validators: {
                  notEmpty: {
                    format: "YYYY-MM",
                    message: "请选择日期",
                  },
                },
              },
              history_content: {
                validators: {
                  notEmpty: {
                    message: "请输入内容",
                  },
                },
              },
            },
          });
          //先校验，在调是否通过校验的方法
          $("#historyAddForm").data("bootstrapValidator").validate();
          //校验表单是否通过
          let flag = $("#historyAddForm").data("bootstrapValidator").isValid();
          if (flag) {
            let _url = $.baseUrl + "dh/save";
            let _dhyear = $("#historyAddForm input[name='history_dhyear']").val();
            let _dhmonth = _dhyear && _dhyear.split("-")[1];
            $.ajax({
              type: "POST",
              url: _url,
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                dhyear: _dhyear && _dhyear.split("-")[0],
                dhmonth: Number(_dhmonth) + "月",
                content: $(
                  "#historyAddForm textarea[name='history_content']"
                ).val(),
                ltype: $(
                  "#historyAddForm input[name='history_ltype']:checked"
                ).val(),
                createid: $.userInfo.userid,
              }),
              success: function (data) {
                if (data.code === 0) {
                  window.location.href =
                    "/sections/history.html?page=1&dhyear=" +
                    historySearch.dhyear +
                    "&ltype=" +
                    historySearch.ltype;
                } else {
                  alert(data.msg);
                }
              },
            });
          }
        });
        let modify_dhid = null;
        $(".historyTableBody").on("click", ".modify_btn", function () {
          modify_dhid = $(this).data("dhid");
          $("#historyModifyModal").modal("show");
          $.each(historySearch.list, function (_index, _historyItem) {
            if (_historyItem.dhid === modify_dhid) {
              $("#historyModifyForm input[name='m_history_ltype'][value='" + _historyItem.ltype + "']").attr("checked", true);
              let _monthStr = _historyItem.dhyear && _historyItem.dhmonth ? _historyItem.dhmonth.split("月")[0] : "";
              $("#historyModifyModal #modifyDhyearPicker")
              .datepicker({
                autoclose: true,
                startView: 1,
                maxViewMode: 2,
                minViewMode: 1,
                format: "yyyy-mm",
                language: "zh-CN",
              })
              .datepicker("setDate", _monthStr ? _historyItem.dhyear + "-" + (Number(_monthStr) < 9 ? "0" + _monthStr : _monthStr) : "now");
              $("#historyModifyForm textarea[name='m_history_content']").val(_historyItem.content);
            }
          });
        });
        $("#historyModifyModal .modify_save").on("click", function () {
          // 添加表单验证
          $("#historyModifyForm").bootstrapValidator({
            // 默认的提示消息
            message: "请输入内容",
            // 表单框里右侧的icon
            // feedbackIcons: {
            //   valid: "glyphicon glyphicon-ok",
            //   invalid: "glyphicon glyphicon-remove",
            //   validating: "glyphicon glyphicon-refresh",
            // },
            fields: {
              history_ltype: {
                validators: {
                  notEmpty: {
                    message: "请选择类型",
                  },
                },
              },
              history_dhyear: {
                validators: {
                  notEmpty: {
                    format: "YYYY-MM",
                    message: "请选择日期",
                  },
                },
              },
              history_content: {
                validators: {
                  notEmpty: {
                    message: "请输入内容",
                  },
                },
              },
            },
          });
          //先校验，在调是否通过校验的方法
          $("#historyModifyForm").data("bootstrapValidator").validate();
          //校验表单是否通过
          let flag = $("#historyModifyForm").data("bootstrapValidator").isValid();
          if (flag) {
            let _url = $.baseUrl + "dh/update";
            let _dhyear = $("#historyModifyForm input[name='m_history_dhyear']").val();
            let _dhmonth = _dhyear && _dhyear.split("-")[1];
            $.ajax({
              type: "POST",
              url: _url,
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                dhid: modify_dhid,
                dhyear: _dhyear && _dhyear.split("-")[0],
                dhmonth: Number(_dhmonth) + "月",
                content: $(
                  "#historyModifyForm textarea[name='m_history_content']"
                ).val(),
                ltype: $(
                  "#historyModifyForm input[name='m_history_ltype']:checked"
                ).val(),
              }),
              success: function (data) {
                if (data.code === 0) {
                  window.location.href =
                    "/sections/history.html?page=1&dhyear=" +
                    historySearch.dhyear +
                    "&ltype=" +
                    historySearch.ltype;
                } else {
                  alert(data.msg);
                }
              },
            });
          }
        });
        // 获取用户列表
        function getHistoryList() {
          $.ajax({
            type: "POST",
            url: $.baseUrl + "dh/list",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
              page: historySearch.page,
              size: historySearch.size,
              dhyear: historySearch.dhyear,
              ltype: historySearch.ltype,
            }),
            success: function (data) {
              if (data.code === 0) {
                historySearch.total = data.obj.total;
                historySearch.list = data.obj.list;
                setTableHtml();
                setPageList();
              } else {
                historySearch.total = 0;
                historySearch.list = [];
                alert(data.msg);
              }
            },
          });
        }
        // 设置表格信息
        function setTableHtml() {
          let historyTableBodyHtml = "";
          $.each(historySearch.list, function (_historyIndex, _historyItem) {
            historyTableBodyHtml +=
              "<tr><td>" +
              (_historyIndex +
                1 +
                (historySearch.page - 1) * historySearch.size) +
              "</td><td>" +
              (_historyItem.dhyear ? _historyItem.dhyear : "") +
              "</td><td>" +
              (_historyItem.dhmonth ? _historyItem.dhmonth : "") +
              "</td><td>" +
              (_historyItem.ltype === 1 ? "中文" : "英文") +
              "</td><td>" +
              (_historyItem.content ? _historyItem.content : "") +
              "</td><td>" +
              (_historyItem.createname ? _historyItem.createname : "") +
              "</td><td>" +
              $.dateFormat(_historyItem.createtime) +
              '</td><td><span class="my_theme_color action_btn modify_btn" data-dhid="' +
              _historyItem.dhid +
              '">修改</span><span class="my_theme_color">|</span><span class="del_color action_btn del_btn" data-dhid="' +
              _historyItem.dhid +
              '">删除</span></td></tr>';
          });
          $(".historyTableBody").html(historyTableBodyHtml);
          let del_dhid = null;
          $(".historyTableBody").on("click", ".del_btn", function () {
            $("#historyDelModal").modal("show");
            del_dhid = $(this).data("dhid");
          });
          $("#historyDelModal .del_save").on("click", function () {
            $.ajax({
              type: "POST",
              url: $.baseUrl + "dh/remove",
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({
                dhid: del_dhid,
              }),
              success: function (data) {
                $("#historyDelModal").modal("hide");
                if (data.code === 0) {
                  window.location.href =
                    "/sections/history.html?page=" +
                    historySearch.page +
                    "&dhyear=" +
                    historySearch.dhyear +
                    "&ltype=" +
                    historySearch.ltype;
                } else {
                  alert(data.msg);
                }
              },
            });
          });
        }
        // 设置页码信息
        function setPageList() {
          let pageBoxHtml =
            '<div class="page_prev ' +
            (historySearch.page === 1 ? "disabled" : "") +
            '">&lt;</div>';
          for (
            let _pageIndex = 0;
            _pageIndex < Math.ceil(historySearch.total / historySearch.size);
            _pageIndex++
          ) {
            pageBoxHtml +=
              '<div data-page="' +
              (_pageIndex + 1) +
              '" class="page_num ' +
              (_pageIndex + 1 === historySearch.page ? "selected" : "") +
              '">' +
              (_pageIndex + 1) +
              "</div>";
          }
          pageBoxHtml +=
            '<div class="page_next ' +
            (historySearch.page ===
            Math.ceil(historySearch.total / historySearch.size)
              ? "disabled"
              : "") +
            '">&gt;</div>';
          if (historySearch.total > 0) {
            $(".history_page.page_box").html(pageBoxHtml);
            $(".history_page.page_box").on("click", ".page_prev", function () {
              if (historySearch.page > 1) {
                historySearch.page--;
                window.location.href =
                  "/sections/history.html?page=" +
                  historySearch.page +
                  "&dhyear=" +
                  historySearch.dhyear +
                  "&ltype=" +
                  historySearch.ltype;
              }
            });
            $(".history_page.page_box").on("click", ".page_num", function () {
              historySearch.page = $(this).data("page");
              window.location.href =
                "/sections/history.html?page=" +
                historySearch.page +
                "&dhyear=" +
                historySearch.dhyear +
                "&ltype=" +
                historySearch.ltype;
            });
            $(".history_page.page_box").on("click", ".page_next", function () {
              if (
                historySearch.page <
                Math.ceil(historySearch.total / historySearch.size)
              ) {
                historySearch.page++;
                window.location.href =
                  "/sections/history.html?page=" +
                  historySearch.page +
                  "&dhyear=" +
                  historySearch.dhyear +
                  "&ltype=" +
                  historySearch.ltype;
              }
            });
          } else {
            $(".history_page.page_box").html("");
          }
        }
        getHistoryList();
      });
    </script>
  </body>
</html>