批次管理系统 - 寒衣列表 - 常规

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>批次管理 - 寒衣列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">批次管理</div>
        <div class="layui-card-body">
          <!--这是搜索-->
          <div class="layui-form" action="">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">批次名称</label>
                <div class="layui-input-inline">
                  <input type="text" id="querySn" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">困难等级</label>
                <div class="layui-input-inline">
                  <select name="interest" id="queryLeavel" lay-filter="aihao">
                    <option value="">所有</option>
                    <option value="一般困难">一般困难</option>
                    <option value="特殊困难">特殊困难</option>
                    <option value="不困难">不困难</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <button class="layui-btn" id="queryBtn2">查询</button>
              </div>
              <div class="layui-inline">
                <button class="layui-btn" id="addBtn" lay-event="add">添加批次</button>
              </div>
            </div>
          </div>
          <!--这就是表格-->
          <div class="layui-fluid" id="LAY-component-grid-speed-dial">
            <div class="layui-row layui-col-space1">
              <div id="grid-container" class="layui-container"></div>
            </div>
          </div>
          <div id="demo-laypage-all"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'form','laydate','laypage','element','grid'], function(){
    var admin = layui.admin,
            $ = layui.$,
            form = layui.form
            ,table = layui.table,
            admin = layui.admin,
            grid = layui.grid,
            laypage = layui.laypage,
            element = layui.element;

    element.render('breadcrumb', 'breadcrumb');

    //监听窗口尺寸改变事件，控制宽度相同
    admin.resize(function(){
      var cardBody = $('#LAY-component-grid-speed-dial .layui-card-body');
      cardBody.height(cardBody.width())
    });

    $.ajax({
      url: '/product/proList2',
      type: 'post',
      dataType: 'json',
      success: function(data){
        // 动态生成html代码
        var html = '';
        for(var i = 0; i < data.length; i++){
          var item = data[i];
          html += '<div class="layui-col-md4">';
          html += '<div class="layui-card">';
          html += '<div class="layui-card-header">' + item.gender + '</div>'; // 商品标题
          html += '<div class="layui-card-body">';
          html += '<img src="' + item.path + '" class="layui-col-md6">'; // 商品图片
          html += '<div class="layui-col-md6">';
          html += '<p>' + item.productNumber + '</p>'; // 商品简介
          html += '</div>';
          html += '</div>';
          html += '</div>';
          html += '</div>';
        }

        // 将生成的html代码添加到grid布局的容器中
        $('#grid-container').html(html);
        
        // 渲染动态生成的html代码
        form.render();
      }
    });

    // 初始化grid布局
    grid.init(options);

    laypage.render({
      elem: 'demo-laypage-all', // 元素 id
      count: 100,
      layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
      jump: function(obj){
        obj.href("/")
      }
    });

    // 查询
    $("#queryBtn2").click(function () {
      console.info($("#queryLeavel").val())
      table.reload('test-table-toolbar', {
        url: '/batchSetting/listBatch'
        ,where: {
          name: $("#queryName").val(),
          difficultyLevel: $("#queryLeavel").val()
        } //设定异步数据接口的额外参数
      });

    })

    $("#dell").click(function () {
      layui.alert("${message}")
    })
    // 点击编辑
    function editEvent(data) {
      // 给弹框内容赋值
      $("#editId").val(data.id)
      $("#editBatchName").val(data.name)
      var appliTime1 = data.applicationStartDate;
      var appliTime2 = data.applicationEndDate;
      var appliTime = appliTime1.concat(" - ", appliTime2);
      var regTime1 = data.registerStartDate;
      var regTime2 = data.registerEndDate;
      var regTime = regTime1.concat(" - ", regTime2);
      $("#test-laydate-range-date3").val(appliTime)
      $("#test-laydate-range-date4").val(regTime)
      $("#editLeavel").val(data.difficultyLevel)

      form.render('select');
      // 打开弹框
      layer.open({
        type: 1,
        area: '500px',
        title: '编辑批次',
        content: $("#editBatchDialog")
      })
    }

    // 点击提交-添加批次
    $('#subBtn2').click(function () {
      var appliTime = $("#test-laydate-range-date").val().split(' - ');
      var regTime = $("#test-laydate-range-date2").val().split(' - ');
      $.ajax({
        type: 'post',
        url: '/batchSetting/addBatch',
        data: {
          name:  $("#addBatchName").val(),
          applicationStartDate:appliTime[0],
          applicationEndDate: appliTime[1],
          registerStartDate: regTime[0],
          registerEndDate: regTime[1],
          difficultyLevel: $("#addleavel").val(),
        },
        success: function (res) {
          if(res.data == true){
            layer.msg('编辑成功', {
              icon: 1,
              time: 1500
            }, function () {
              // 重新刷新表格
              table.reload('test-table-toolbar', {
                url: '/batchSetting/listBatch'
                ,where: {} //设定异步数据接口的额外参数
              });
              // 关闭弹框
              layer.closeAll()
            });
          }
        }
      })
    })

    // 点击提交-修改批次
    $('#subBtn3').click(function () {
      var appliTime02 = $("#test-laydate-range-date3").val().split(' - ');
      var regTime02 = $("#test-laydate-range-date4").val().split(' - ');
      $.ajax({
        type: 'post',
        url: '/batchSetting/update',
        data: {
          id: $("#editId").val(),
          name:  $("#editBatchName").val(),
          applicationStartDate:appliTime02[0],
          applicationEndDate: appliTime02[1],
          registerStartDate: regTime02[0],
          registerEndDate: regTime02[1],
          difficultyLevel: $("#editLeavel").val(),
        },
        success: function (res) {
          if(res.data == true){
            layer.msg('编辑成功', {
              icon: 1,
              time: 1500
            }, function () {
              // 重新刷新表格
              table.reload('test-table-toolbar', {
                url: '/batchSetting/listBatch'
                ,where: {} //设定异步数据接口的额外参数
              });
              // 关闭弹框
              layer.closeAll()
            });
          }
        }
      })
    })

    // 点击取消
    $("#cancelBtn").click(function () {
      layer.closeAll()
    })
  });
</script>
</body>
</html>