yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							{% load staticfiles %}
<!DOCTYPE html>
<html>

<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 href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  <style>
    html,body{
      background: #fff;
    }
    .searchTable {
      position: absolute;
      right: 15px;
      top: 0;
    }

    .searchTable input {
      height: 30px;
      line-height: 33px;
    }

    .addData {
      /* text-align: right; */
    }

    /* 表格样式 */

    .layui-table thead tr {
      /* background-color: #e0f6ea;  */
    }

    .layui-table th,
    .layui-table tr {
      text-align: center;
    }


    .editBtn,
    .delBtn ,
    .blue{
      cursor: pointer;
      margin: 0 5px;
    }
    
    .blue{
      color: #2571b4;
    }

    .green {
      color: #5FB878;
    }

    .red {
      color: #e01515;
    }

    .delBtn:hover {
      color: #e01515;
      text-decoration: underline;
    }

    .editBtn:hover {
      color: #5FB878;
      text-decoration: underline;
    }
  </style>
</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 class="searchTable">
              <div class="layui-inline">
                <input class="layui-input" name="id" id="companyInp" placeholder="请输入设备ID" autocomplete="off">
              </div>
              <button class="btn btn-sm btn-primary" data-type="reload">搜索</button>
            </div>
            <div class="addData">
              <button class="btn btn-sm btn-primary" data-type="reload" onclick="addData()">　新建　</button>
            </div>
          </div>
          <div class="layui-card-body">
            <table class="layui-hide baseTable" id="conpanyList" lay-filter="conpanyList"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 溯源码 -->
  <div class="modal fade" id="TagIconmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" style="width: 350px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="H1">溯源码（此码仅供手机追溯预览）
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row" style="text-align: center;">
                        <img src="{% static '/img/wechatCode.png'%}" id="tagIcon" style="width: 250px" />
                        <input type="hidden" value="" id="hid_Number" name="hid_Number" />
                    </div>
                    
                </div>
                <div class="modal-footer" style="text-align: center;">
                    <button type="button" class="layui-btn layui-btn-primary" data-dismiss="modal" style="width: 100%">
                        关闭
                    </button>

                </div>
            </div>
        </div>
    </div>

  <script type="text/html" id="barDemo">
  <a class="QRcode blue" lay-event="lookQRcode">二维码</a>
  |
  <a class="editBtn green" lay-event="edit">编辑</a>
  |
  <a class="delBtn red"  lay-event="del">删除</a>
  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"></a> -->
</script>

<script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
<script src="{% static '/lib/layui/layui.all.js' %}"></script>


  <script>
    var table, layer;
    layui.use(['table', 'layer'], function () {
      table = layui.table;
      layer = layui.layer;

      var data = [
        {
          "id": '10000',
          "basename": "黄瓜",
          "time": "202001021041",
          "nums": "100",
          "remark": "kg/框",
          "productionTime": "2020-01-02",
          "log": "0",
        },
        {
          "id": '10000',
          "basename": "四季豆（菜豆）",
          "time": "202002111041",
          "nums": "30",
          "remark": "kg/框",
          "productionTime": "2020-01-22",
          "log": "1",
        },
        {
          "id": '10000',
          "basename": "冬瓜",
          "time": "	201910311445",
          "nums": "100",
          "remark": "正常",
          "productionTime": "	2019-10-31",
          "log": "0",
        },
        {
          "id": '10000',
          "basename": "黄瓜",
          "time": "202001021041",
          "nums": "100",
          "remark": "kg/框",
          "productionTime": "2020-01-02",
          "log": "0",
        },
        {
          "id": '10000',
          "basename": "黄心菜",
          "time": "202001021041",
          "nums": "100",
          "remark": "kg/框",
          "productionTime": "2020-01-02",
          "log": "0",
        },
        {
          "id": '10000',
          "basename": "甜瓜",
          "time": "202001021041",
          "nums": "100",
          "remark": "kg/框",
          "productionTime": "2020-01-02",
          "log": "0",
        },
      ];
      // 方法渲染表格
      table.render({
        elem: '#conpanyList'
        // , url: 'list'
        , data: data
        ,skin: 'line' //行边框风格
        ,even: true //开启隔行背景
        , method: 'post' //如果无需自定义HTTP类型，可不加该参数
        , title: '用户数据表'
        , cols: [[
          { type: 'checkbox' }
          , { field: 'basename', title: '产品名称', }
          , { field: 'time', title: '批次', }
          , { field: 'nums', title: '数量', }
          , { field: 'remark', title: '规格', }
          , { field: 'productionTime', title: '生产日期', }
          , { field: 'log', title: '日志记录/条', }
          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200 }
        ]]
        , id: 'tableReload'
        , page: {
          layout: ['prev', 'page', 'next', 'count']
          , groups: 3 //只显示 1 个连续页码
          , first: true //不显示首页
          , last: true //不显示尾页  
          , theme: '#428bca'
        }
      });


      // table.on('checkbox(conpanyList)', function (obj) {
      //   console.log(obj.checked); //当前是否选中状态
      //   console.log(obj.data); //选中行的相关数据
      //   console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
      // });

      //监听行工具事件
      table.on('tool(conpanyList)', function (obj) {
        var data = obj.data;
        console.log(obj)
        id = obj.data.id
        if (obj.event === 'edit') {
          var index = layer.open({
            type: 2,
            title: '添加单位信息',
            shadeClose: false,
            shade: [0.5, '#000'],
            area: ['50%', '60%'],
            content: '/detection_add?id=' + id //iframe的url
          });
        } else if (obj.event === 'del') {
          var userid = [];
          userid.push(id)
          layer.confirm('是否删除“ ' + obj.data.name + ' ”!', {
            title: '删除'
            , icon: 3
            , btn: ['确定', '取消']
          }, function (index, layero) {
            $.ajax({
              url: 'dele',
              type: 'get',
              async: true,
              data: {
                id: JSON.stringify(userid)
              },
              // dataType: 'json',
              success: function (data) {
                if (data == 0) {
                  //执行重载
                  var companyInp = $('#companyInp');
                  table.reload('tableReload', {
                    where: {
                      id: companyInp.val()
                    }
                  }, 'data');
                  //无法关闭这个消息框
                  layer.closeAll('dialog');  //加入这个信息点击确定 会关闭这个消息框
                  layer.msg("删除成功!", { icon: 1, time: 1000 });
                }
              },
              error: function (type) {

              }
            })
          }
          );
        } else if (obj.event === 'lookQRcode') {
          $('#TagIconmodal').modal('show');
        }
      });

      var $ = layui.$, active = {
        reload: function () {
          var companyInp = $('#companyInp');

          //执行重载
          table.reload('tableReload', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            , where: {
              id: companyInp.val()
            }
          }, 'data');
        }
      };
      // 搜索
      $('.searchTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
      $('.searchTable #companyInp').on('keyup', function (event) {
        if (event.keyCode == 13) {
          active.reload()
        }

      });

    });
    function addData() {
      var index = layer.open({
        type: 2,
        title: '添加单位信息',
        shadeClose: false,
        shade: [0.5, '#000'],
        area: ['800px', '50%'],
        content: 'detection_add' //iframe的url
      });
    }
  </script>

</body>

</html>