master

分支 (1)

管理

管理

master

use-of-layui-data-table
/
templateManager.js

layui.use(['form', 'table', 'upload', 'laydate'], function () {
  var form = layui.form,
    table = layui.table,
    upload = layui.upload,
    laydate = layui.laydate;

  form.render();

  let editConfirmTemplateId = ""; //模板确认更新时，需要传递的id


  //编辑时候模板的表格
  let editTableInts = table.render({
    elem: '#operationTemplateTable',
    id: 'operationTemplateTable',
    data: [],
    height: 150,
    cols: [
      [{
        field: 'index',
        title: '序号',
        align: 'center'
      }, {
        field: 'name',
        title: '模板列名(中文)',
        align: 'center',
        edit: 'text'
      }, {
        field: 'field',
        title: '模板列名(英文)',
        align: 'center',
        edit: 'text'
      }, {
        field: 'maxLength',
        title: '最大长度',
        align: 'center',
        edit: 'text'
      }, {
        field: 'minLength',
        title: '最小长度',
        align: 'center',
        edit: 'text'
      }, {
        field: 'notNull',
        title: '是否限制长度',
        align: 'center',
        templet: function (d) {//添加switch开关
          if (d.notNull) {
            return `<input type="checkbox" id="editSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch" checked>`
          } else {
            return `<input type="checkbox" id="editSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch">`
          }

        }
      }, {
        title: '删除',
        align: 'center',
        templet: function (d) {
          return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>';
        }
      }]
    ],

  })

  //列表的表格

  let tableIns = table.render({
    elem: '#dataTable',
    height: 500,
    url: containercode_url + "/template/list",
    parseData: function (res) { //res 即为原始返回的数据
      return {
        "code": res.errorCode, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.data.total, //解析数据长度
        "data": res.data.list //解析数据列表
      };
    },
    response: {
      statusCode: 200 //成功的状态码，默认：0
      ,
    },
    where: {

    },
    headers: { accessKey: localStorage.getItem('userToken') },
    contentType: 'application/json',
    cols: [
      [{
        type: 'checkbox',
        align: 'center'
      }, {
        type: 'numbers',
        title: '序号',
        align: 'center'
      }, {
        field: 'templateName',
        title: '模板ID',
        align: 'center'
      }, {
        field: 'templateTitle',
        title: '模板名称',
        align: 'center'
      }, {
        field: 'templateDescribe',
        title: '模板描述',
        align: 'center'
      }, {
        field: 'addTime',
        title: '添加时间',
        align: 'center'
      }, {
        title: '操作',
        align: 'center',
        templet: function (d) {
          return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
            '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>' +
            '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>' +
            '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="exportTemplate">导出模板</a>' +
            '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="apiTest">api示例</a>';
        }
      }]
    ],
    method: 'post' //如果无需自定义HTTP类型，可不加该参数
    ,
    request: { //如果无需自定义请求参数，可不加该参数
      pageName: 'pageIndex', //页码的参数名称，默认：page
      limitName: 'pageSize' //每页数据量的参数名，默认：limit
    },

    page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      groups: 3 //只显示 1 个连续页码
      ,
      first: '首页' //首页
      ,
      last: '尾页' //尾页
      ,
      limits: [5, 10, 15, 20, 30, 50] //返回条数
      ,
      limit: 10
    },
    loading: true //点击分页时跳转的进度条
    ,
    text: {
      none: '无数据'
    },
    done: function (res, curr, count) {
      console.log('表格数据', res);
      if (res.success == false && res.message.indexOf("Session") != "-1") {
        layer.confirm('Session已失效，请重新登录！', {
          title: '登录',
          shade: [1.0, '#fff'],
          skin: 'layui-layer-lan',
          btn: ['去登陆'] //按钮
        }, function () {
          if ($.parseJSON(localStorage.getItem('userInfo')).userType.indexOf("ADMIN") != "-1") {
            //跳转回管理员登录页
            // parent.location.href = "admin-login.html";
            parent.location.href = "../login.html";
          } else {
            //跳转回用户登录页
            parent.location.href = "../login.html";
          }
        }, function () { });
      }
    }
  });


  //树状组件 (无连接线风格)
  // tree.render({
  //   elem: '#apiCont'
  //   , data: data1
  //   , showLine: false  //是否开启连接线
  // });

  //触发行单击事件


  form.on('switch(isSwitch)', function (data) {
    // console.log('switch', data);
    var state1 = data.elem.checked ? true : false; //获取开关状态
    // console.log(data.elem.id);
    // console.log('state1', state1);
    let activeRow = data.value;
    // console.log('activeRow', activeRow)
    let tableBak = [];
    let dataBak = [];

    if (data.elem.id == 'editSwitch') {
      layui.table.cache.operationTemplateTable[activeRow - 1].notNull = state1;
      tableBak = layui.table.cache.operationTemplateTable;
      tableBak.forEach(item => {
        delete item.LAY_TABLE_INDEX
      })


      for (let i = 0; i < tableBak.length; i++) {
        dataBak.push(tableBak[i]);
      }


      layui.table.reload('operationTemplateTable', {
        data: dataBak
      });

    } else {//addSwitch
      layui.table.cache.templateTable[activeRow - 1].notNull = state1;
      tableBak = layui.table.cache.templateTable;
      tableBak.forEach(item => {
        delete item.LAY_TABLE_INDEX
      })


      for (let i = 0; i < tableBak.length; i++) {
        dataBak.push(tableBak[i]);
      }


      layui.table.reload('templateTable', {
        data: dataBak
      });

    }
  });


  //新增弹框中的表格

  table.on('tool(templateTable)', function (obj) {
    console.log('来了老弟');
    let data = obj.data; //获得当前行数据
    let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    if (layEvent === 'delete') {
      layer.confirm('确定要删除吗？', {
        title: '删除',
        skin: 'layui-layer-lan',
        btn: ['删除', '取消']
      }, function () {
        //执行删除函数
        deleteData(data.id);
      }, function () { });
    }
  })

  //编辑弹框中的表格
  table.on('tool(operationTemplateTable)', function (obj) {
    // console.log(obj);
    let data = obj.data; //获得当前行数据
    // console.log(data);
    let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    if (layEvent === 'delete') {
      layer.confirm('确定要删除吗？', {
        title: '删除',
        skin: 'layui-layer-lan',
        btn: ['删除', '取消']
      }, function (index) {
        //执行删除函数
        operateDelData(data, index);
      }, function () { });
    }
  })

  //点击工具栏(列表显示的表格)
  table.on('tool(dataTable)', function (obj) {
    // console.log('obj', obj);
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if (layEvent === 'delete') { //删除
      layer.confirm('确定要删除吗？', {
        title: '删除',
        skin: 'layui-layer-lan',
        btn: ['删除', '取消']
      }, function () {
        //执行删除函数
        deleteData(data.id);
      }, function () { });
    } else if (layEvent === 'edit') { //编辑
      layer.open({
        type: 1,
        shade: false,
        area: ['800px', 'auto'],
        title: '编辑',
        content: $('#operation_context'),
        cancel: function () {
          $('#operation_context').hide();
        },
        success: function (layero, index) {
          //调取数据回显接口
          let url = containercode_url + "/template/selectTemplate";

          function editCallBack (res) {
            if (res.success) {
              editConfirmTemplateId = res.data.id;
              console.log(res.data.templateInfo);
              //回显数据
              $("#operation_context").find(".templateName").val(res.data.templateName);
              $("#operation_context").find(".templateTitle").val(res.data.templateTitle);
              $("#operation_context").find(".templateDescribe").val(res.data.templateDescribe);
              //重载表格(刷新)
              table.reload('operationTemplateTable', {
                // data: [{ "field": "b", "index": 1, "maxLength": 2, "minLength": 0, "name": "j", "notNull": true }]
                data: JSON.parse(res.data.templateInfo)
              });
              //刷新表单渲染
              form.render();
            } else {
              layer.alert(res.message, {
                icon: 2,
                title: language.language1
              });
            }
          }
          myAjax(url, {
            "templateName": data.templateName //模板名称
          }, editCallBack);
        }
      });
    } else if (layEvent === 'apiTest') { //api示例
      layer.open({
        type: 1, //基本层类型 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        shade: false,
        area: ['800px', '711px'],
        title: 'api示例',
        content: $('#apiTest_context'),
        cancel: function () {
          $('#apiTest_context').hide();
        },
        success: function (layero, index) {
          //调取数据回显接口
          let url = containercode_url + "/template/getTemplateFormat";
          function apiTestCallBack (res) {
            if (res.success) {
              // $("#apiTest_context").find(".apiCont").html(JSON.stringify(res.data));
              $('#json-renderer').jsonViewer(res.data, { collapsed: false, withQuotes: true, withLinks: false });
              //刷新表单渲染
              // form.render();
            } else {
              layer.alert(res.message, {
                icon: 2,
                title: language.language1
              });
            }
          }
          myAjax(url, {
            "contentType": data.templateName, //子系统类型(对应模板名称TemplateName)
          }, apiTestCallBack);
        }
      });
    } else if (layEvent === 'detail') { //详情
      console.log('data.templateName', data.templateName);
      layer.open({
        type: 1, //基本层类型 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        shade: false,
        area: ['800px', '711px'],
        title: '详情',
        content: $('#detail_context'),
        cancel: function () {
          $('#detail_context').hide();
        },
        success: function (layero, index) {

          table.render({
            elem: '#detailTemplateTable',
            id: 'detailTemplateTable',
            data: [],
            height: 150,
            cols: [
              [{
                field: 'index',
                title: '序号',
                align: 'center'
              }, {
                field: 'name',
                title: '模板列名(中文)',
                align: 'center',
                edit: 'text'
              }, {
                field: 'field',
                title: '模板列名(英文)',
                align: 'center',
                edit: 'text'
              }, {
                field: 'maxLength',
                title: '最大长度',
                align: 'center',
                edit: 'text'
              }, {
                field: 'minLength',
                title: '最小长度',
                align: 'center',
                edit: 'text'
              }, {
                field: 'notNull',
                title: '是否限制长度',
                align: 'center',
                templet: function (d) {//添加switch开关
                  if (d.notNull) {
                    return `<input type="checkbox" id="addSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch" checked>`
                  } else {
                    return `<input type="checkbox" id="addSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch">`
                  }

                }
              }]
            ],
          })

          //调取数据回显接口
          let url = containercode_url + "/template/selectTemplate";
          function detailCallBack (res) {
            console.log(res.data.templateInfo);
            if (res.success) {
              //回显数据
              $("#detail_context").find(".templateName").val(res.data.templateName);
              $("#detail_context").find(".templateTitle").val(res.data.templateTitle);
              $("#detail_context").find(".templateDescribe").val(res.data.templateDescribe);
              //重载表格(刷新)
              table.reload('detailTemplateTable', {
                data: JSON.parse(res.data.templateInfo)
                // data: [{ "field": "gg", "index": 1, "maxLength": 5, "minLength": 2, "name": "ff", "notNull": false }]
              });
              //刷新表单渲染
              form.render();
            } else {
              layer.alert(res.message, {
                icon: 2,
                title: language.language1
              });
            }
          }
          myAjax(url, {
            "templateName": data.templateName //模板名称
          }, detailCallBack);
        }
      });
    } else if (layEvent === 'exportTemplate') { //导出模板
      //导出为 csv 文件
      console.log('表格的配置', tableIns.config);
      table.exportFile(editTableInts.config.id, tableIns.config.cols); //data 为该实例中的任意数量的数据
    }
  });

  table.on('edit(templateTable)', function (obj) {
    console.log(obj);
  });


  //表格搜索
  $("#searchBtn").click(function () {
    table.reload('dataTable', {
      where: {
        "searchParam": $("#boxNo").val()
      }
    });
  });

  $("#boxNo").change(function () {
    // console.log($("#boxNo").val());
    if ($("#boxNo").val() == '') {
      tableIns.reload({
        url: containercode_url + "/template/list",
        parseData: function (res) { //res 即为原始返回的数据
          return {
            "code": res.errorCode, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.data.total, //解析数据长度
            "data": res.data.list //解析数据列表
          };
        },
        response: {
          statusCode: 200 //成功的状态码，默认：0
          ,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        },
        method: 'post' //如果无需自定义HTTP类型，可不加该参数
        ,
        request: { //如果无需自定义请求参数，可不加该参数
          pageName: 'pageIndex', //页码的参数名称，默认：page
          limitName: 'pageSize' //每页数据量的参数名，默认：limit
        },
      });
    }
  });

  //导出集装箱列表
  $("#exportBtn").click(function () {
    var beginTime = $("#time").val() != "" ? locationTimeChangeUtcTime($("#time").val().split(" - ")[0]) : "";
    var endTime = $("#time").val() != "" ? locationTimeChangeUtcTime($("#time").val().split(" - ")[1]) : "";

    layer.msg(
      '正在导出，请稍等..', {
      icon: 1,
      time: 3000,
      shade: 0,
      end: function () {
        //导出
        location.href = containercode_url + "/opertion/downOperationList?language=" + language.langType +
          "&userToken=" + localStorage.getItem('userToken') + "&boxNo=" + $.trim($("#boxNo").val()) +
          "&boxModel=" + $("#boxModel").val() + "&boxSize=" + $("#boxSize").val() + "&beginTime=" + beginTime +
          "&endTime=" + endTime;
      }
    });
  });


  //批量删除
  $("#batchDelete").click(function () {
    //获取选中行的数据
    var checkStatus = table.checkStatus('dataTable');
    if (checkStatus.data.length == 0) {
      layer.alert('至少选中一条数据！', {
        icon: 0,
        title: language.language1
      });
    } else {
      layer.confirm('确定要删除吗？', {
        title: '删除',
        skin: 'layui-layer-lan',
        btn: ['删除', '取消']
      }, function () {
        var idList = [];
        for (var i = 0; i < checkStatus.data.length; i++) {
          idList.push(checkStatus.data[i]["id"]);
        }
        //执行删除函数
        deleteData(idList);
      }, function () { });
    }
  });

  //列表删除
  function deleteData (templateId) {
    let url = containercode_url + "/template/deleteTemplete";

    function delCallBack (res) {
      if (res.success) {
        layer.msg('删除成功！', {
          icon: 1,
          time: 500,
          shade: 0,
          end: function () {
            //表格重载
            table.reload('dataTable', {});
          }
        });
      } else {
        layer.alert(res.message, {
          icon: 2,
          title: language.language1
        });
      }
    }
    myAjax(url, {
      "id": templateId, //模板id
      // "userName": JSON.parse(localStorage.getItem("userInfo"))['userName'] //用户名
      "userId": $.parseJSON(localStorage.getItem('userInfo')).id //用户id
    }, delCallBack);
  }

  // 编辑列表删除
  function operateDelData (data, idx) {
    // console.log(data);
    let templateInfo = [];
    let newTemplateInfo = [];
    templateInfo = layui.table.cache.operationTemplateTable;
    // console.log(templateInfo);
    newTemplateInfo = templateInfo.filter(item => {
      return item.index !== data.index
    })
    newTemplateInfo.forEach(item => {
      delete item.LAY_TABLE_INDEX
    })
    console.log('newTemplateInfo', newTemplateInfo);
    table.reload('operationTemplateTable', {
      data: newTemplateInfo
    })

    layer.close(idx);

  }

  //增加一行
  function addrow (ints) {
    let index = 2;
    let dataBak = [];
    let tableBak = [];
    if (ints == 'operationTemplateTable') {
      tableBak = layui.table.cache.operationTemplateTable;
    } else if (ints == 'templateTable') {
      tableBak = layui.table.cache.templateTable;
    }

    for (let i = 0; i < tableBak.length; i++) {
      dataBak.push(tableBak[i]);
      index = i + 2;
      console.log('index', index);
    }

    console.log('index', index);

    dataBak.push(
      {
        index,
        name: '',
        field: '',
        minLength: '', //字段最小长度
        maxLength: '', //字段最大长度
        notNull: true //值为false时，长度大小不受限制 notNull决定了switch开关的闭合状态
      }
    )
    layui.table.reload(ints, {
      data: dataBak
    });

    console.log('layui.table.cache.templateTable', layui.table.cache.templateTable);

  }


  //编辑--保存
  $("#updateSave").click(function () {

    // if ($("#operation_context").find(".operationType").val() == '' ||
    //   $("#operation_context").find(".operationType").val() == null) {
    //   layer.msg('请选择操作类型！', {
    //     icon: 0
    //   });
    //   return false;
    // }


    // if ($.trim($("#operation_context").find(".operationContext").val()) == '') {
    //   layer.msg('请填写操作内容！', {
    //     icon: 0
    //   });
    //   return false;
    // }

    let templateInfo = [];
    templateInfo = layui.table.cache.operationTemplateTable;
    // console.log(templateInfo);
    templateInfo.forEach(item => {
      delete item.LAY_TABLE_INDEX
    })

    let url = containercode_url + "/template/updateTemplate";

    function confirmEditCallBack (res) {
      if (res.success) {
        layer.msg('修改成功！', {
          icon: 1,
          time: 500,
          shade: 0,
          end: function () {
            layer.closeAll();
            $('#operation_context').hide();
            // parent.location.reload();
            table.reload('dataTable', {});
            // table.reload('operationTemplateTable', {
            //   data: templateInfo
            // });
          }
        });
      } else {
        layer.alert(res.message, {
          icon: 2,
          title: language.language1
        });
      }
    }
    myAjax(url, {
      "id": editConfirmTemplateId, //模板id
      "templateInfo": templateInfo, //模板详细字段信息{json格式字符串}
      "templateName": $("#operation_context").find(".templateName").val(), //模板名称
      "templateDescribe": $("#operation_context").find(".templateDescribe").val(), //模板描述
      "templateTitle": $("#operation_context").find(".templateTitle").val(), //模板中文名称
      "userId": $.parseJSON(localStorage.getItem('userInfo')).id
      // "userName": JSON.parse(localStorage.getItem("userInfo"))['userName'] //用户名（暂时用来做权限控制）
    }, confirmEditCallBack);
  });

  //点击新增(弹出框出来)
  $("#addData").click(function () {
    layer.open({
      type: 1, //基本层类型 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
      shade: false,
      area: ['800px', '711px'],
      title: '新增模板',
      content: $('#addData_context'),
      cancel: function () {
        $('#addData_context').hide();
        //清空表单数据
        $("#addData_context")[0].reset();
        form.render();
      },
      success: function (layero, index) {
        //新增时候模板的表格
        table.render({
          elem: '#templateTable',
          data: [{
            index: 1,
            name: '',
            field: '',
            maxLength: '',
            minLength: '',
            notNull: true
          }],
          height: 150,
          cols: [
            [{
              field: 'index',
              title: '序号',
              align: 'center'
            }, {
              field: 'name',
              title: '模板列名(中文)',
              align: 'center',
              edit: 'text'
            }, {
              field: 'field',
              title: '模板列名(英文)',
              align: 'center',
              edit: 'text'
            }, {
              field: 'maxLength',
              title: '最大长度',
              align: 'center',
              edit: 'text'
            }, {
              field: 'minLength',
              title: '最小长度',
              align: 'center',
              edit: 'text'
            }, {
              field: 'notNull',
              title: '是否限制长度',
              align: 'center',
              templet: function (d) {//添加switch开关
                if (d.notNull) {
                  return `<input type="checkbox" id="addSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch" checked>`
                } else {
                  return `<input type="checkbox" id="addSwitch" name="yyy" value= "${d.index}" lay-skin="switch" lay-text="ON|OFF" lay-filter="isSwitch">`
                }

              }
            }, {
              title: '操作',
              align: 'center',
              templet: function (d) {
                return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>'
              }
            }]
          ],
        })
      },
    });
  });

  //新增--保存
  $("#addSave").click(function () {
    let templateInfo = [];
    templateInfo = layui.table.cache.templateTable;
    templateInfo.forEach(item => {
      delete item.LAY_TABLE_INDEX
    })
    let url = containercode_url + "/template/uploadTemplate";
    function addSaveCallBack (res) {
      // console.log('新增返回的响应', res)
      if (res.success) {
        layer.msg('新增成功！', {
          icon: 1,
          time: 400,//弹窗关闭的时长
          shade: 0,
          end: function () {
            layer.closeAll();
            $('#addData_context').hide();
            //清空表单数据
            $("#addData_context")[0].reset();
            form.render();
            //重载表格(刷新)
            table.reload('dataTable', {});
          }
        });
      } else {
        layer.alert(res.message, {
          icon: 2,
          title: language.language1
        });
      }
    }
    myAjax(url, {
      "templateInfo": templateInfo, //模板详细字段信息{json格式字符串}
      "templateName": $("#addData_context").find(".templateName").val(), //模板名称
      "templateDescribe": $("#addData_context").find(".templateDescribe").val(), //模板描述
      "templateTitle": $("#addData_context").find(".templateTitle").val() //模板中文名称
    }, addSaveCallBack);
  });

  //新增一行
  $("#addRow").click(function () {
    addrow('templateTable');
  })

  $("#editAddRow").click(function () {
    addrow('operationTemplateTable');
  })


})