Warehouse Management System

https://github.com/yeqifu/warehouse
Admin
A warehouse management system with modules for customer, supplier, product, inventory, and sales...
Tokens:30,550
Snippets:131
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Layui Module Initialization and Date Picker Setup

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/salesback/salesbackManager.html

This JavaScript snippet initializes essential Layui modules (jQuery, form, layer, table, laydate) required for the page's functionality. It also configures date pickers for 'startTime' and 'endTime' input fields, enabling users to select specific dates and times for filtering sales return records.

```JavaScript
var tableIns;
layui.use(['jquery', 'form', 'layer', 'table', 'laydate'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;
    var laydate = layui.laydate;

    //初始化时间选择器
    laydate.render({
        elem: '#startTime',
        type: 'datetime'
    });
    laydate.render({
        elem: '#endTime',
        type: 'datetime'
    });
    // ... rest of the Layui code ...
});
```

--------------------------------

### API: Get All Notices

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/index/deskManager.html

Retrieves a paginated list of all announcements or notices available in the system. This API is used to display the latest announcements on the dashboard.

```APIDOC
GET /notice/loadAllNotice

Parameters:
  page: int (query) - The page number for pagination (e.g., 1 for the first page).
  limit: int (query) - The maximum number of items to return per page (e.g., 5).

Response (JSON):
  {
    "count": int,        // Total number of notices available
    "data": [
      {
        "id": int,         // Unique identifier for the notice
        "title": string,   // Title of the announcement
        "createtime": string // Timestamp when the notice was created (e.g., "YYYY-MM-DD HH:MM:SS")
      }
      // ... more notice objects
    ]
  }
```

--------------------------------

### API: Get All Warning Goods

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/index/deskManager.html

Retrieves a paginated list of goods that are currently under inventory warning. This API helps in monitoring stock levels and identifying items that need attention.

```APIDOC
GET /goods/loadAllWarningGoods

Parameters:
  page: int (query) - The page number for pagination (e.g., 1 for the first page).
  limit: int (query) - The maximum number of items to return per page (e.g., 5).

Response (JSON):
  {
    "count": int,        // Total number of warning goods available
    "data": [
      {
        "goodsname": string, // Name of the goods
        "number": int        // Current stock quantity
```

--------------------------------

### Initialize Leader Department Tree and Load Direct Leaders

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/user/userManager.html

Sets up a `dtree` dropdown for selecting a leader's department. When a department is selected, it makes an AJAX GET request to `/user/loadUsersByDeptId` to fetch users within that department, then populates a dropdown (`#mgr`) with these users as potential direct leaders, and re-renders the LayUI form select.

```JavaScript
var leaderdeptTree = dtree.renderSelect({
  elem: "#leaderdeptTree",
  width: "100%",
  dataStyle: "layuiStyle",
  dataFormat: "list",
  response: {message: "msg", statusCode: 0},
  url: "/dept/loadDeptManagerLeftTreeJson"
});

dtree.on("node(leaderdeptTree)", function (obj) {
  var deptId = obj.param.nodeId;
  $.get("/user/loadUsersByDeptId",{deptId:deptId},function (res) {
    var users = res.data;
    var dom_mgr=$("#mgr");
    var html = "<option value=''>请选择直属领导</option>";
    $.each(users,function (index, item) {
      html+="<option value='"+item.id+"'>"+item.name+"</option>";
    });
    dom_mgr.html(html);
    form.render("select");
  })
});
```

--------------------------------

### Get and Display Current System Time in JavaScript

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/static/resources/page/main.html

This JavaScript function `getLangDate` retrieves the current system date and time, formats it, and displays it on the webpage. It includes a helper function `dateFilter` to prepend '0' for single-digit numbers and determines the time of day (morning, afternoon, evening). The display updates every second using `setTimeout`.

```JavaScript
//获取系统时间 var newDate = ''; getLangDate(); //值小于10时，在前面补0 function dateFilter(date){ if(date < 10){return "0"+date;} return date; } function getLangDate(){ var dateObj = new Date(); //表示当前系统时间的Date对象 var year = dateObj.getFullYear(); //当前系统时间的完整年份值 var month = dateObj.getMonth()+1; //当前系统时间的月份值 var date = dateObj.getDate(); //当前系统时间的月份中的日 var day = dateObj.getDay(); //当前系统时间中的星期值 var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串 var hour = dateObj.getHours(); //当前系统时间的小时值 var minute = dateObj.getMinutes(); //当前系统时间的分钟值 var second = dateObj.getSeconds(); //当前系统时间的秒钟值 var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午 newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second); document.getElementById("nowTime").innerHTML = "亲爱的超级管理员，"+timeValue+"好！ 欢迎使用 仓库管理系统。当前时间为： "+newDate+"　"+week; setTimeout("getLangDate()",1000); }
```

--------------------------------

### Initialize Customer Select Dropdown (JavaScript)

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/sales/salesManager.html

This function fetches customer data from the server via an AJAX GET request and populates a dropdown list. It supports pre-selecting a customer if a 'customerid' is provided and re-renders the select element using a form rendering library.

```JavaScript
function initCustomerSelect(customerid) {
    $.get("/customer/loadAllCustomerForSelect", function (res) {
        var data = res.data;
        var dom = $("#customerid");
        var html = '<option value="0">请选择客户</option>';
        $.each(data, function (index, item) {
            html += '<option value="' + item.id + '">' + item.customername + '</option>';
        });
        dom.html(html);
        //如果customerid有值就进行反选
        if (customerid != undefined) {
            dom.val(customerid);
        }
        //重新渲染下拉列表
        form.render("select");
    });
};
```

--------------------------------

### Populate Customer Selection Dropdown

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/salesback/salesbackManager.html

This snippet fetches all customer data from the '/customer/loadAllCustomerForSelect' API endpoint via an AJAX GET request. It then dynamically populates the 'select_customerid' dropdown list with customer names and their corresponding IDs, ensuring that the 'Please select customer' option is also available. Finally, it re-renders the Layui form select component to apply the new options.

```JavaScript
$.get("/customer/loadAllCustomerForSelect",function (res) {
    var data = res.data;
    var dom = $("#select_customerid");
    var html = '<option value="0">请选择客户</option>';
    $.each(data,function (index, item) {
        html += '<option value="'+item.id+'">'+item.customername+'</option>';
    })
    dom.html(html);
    //重新渲染下拉列表
    form.render("select");
});
```

--------------------------------

### Get and Display Current System Date and Time in JavaScript

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/index/deskManager.html

This JavaScript code defines functions to retrieve the current system date and time, format it, and display it on the page. It includes a greeting to the logged-in user and continuously updates the time every second using `setTimeout`.

```JavaScript
//获取当前登陆人 var currentUserName='[[${session.user.name}]]';
//获取系统时间 var newDate = '';
getLangDate();
//值小于10时，在前面补0
function dateFilter(date){
  if(date < 10){return "0"+date;}
  return date;
}
function getLangDate(){
  var dateObj = new Date(); //表示当前系统时间的Date对象
  var year = dateObj.getFullYear(); //当前系统时间的完整年份值
  var month = dateObj.getMonth()+1; //当前系统时间的月份值
  var date = dateObj.getDate(); //当前系统时间的月份中的日
  var day = dateObj.getDay(); //当前系统时间中的星期值
  var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
  var hour = dateObj.getHours(); //当前系统时间的小时值
  var minute = dateObj.getMinutes(); //当前系统时间的分钟值
  var second = dateObj.getSeconds(); //当前系统时间的秒钟值
  var timeValue = "" +((hour >= 12) ? (hour >= 18) ? " 晚上" : " 下午" : " 上午" ); //当前时间属于上午、晚上还是下午
  newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
  document.getElementById("nowTime").innerHTML = "亲爱的，"+currentUserName+" "+timeValue+"好！ 欢迎使用 仓库管理系统。当前时间为： "+newDate+"　"+week;
  setTimeout("getLangDate()",1000);
}
```

--------------------------------

### Populate Goods Selection Dropdown

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/salesback/salesbackManager.html

This snippet fetches all goods data from the '/goods/loadAllGoodsForSelect' API endpoint via an AJAX GET request. It dynamically populates the 'select_goodsid' dropdown list with goods names, sizes, and provider names, allowing users to select specific goods. After populating, it re-renders the Layui form select component to display the updated options.

```JavaScript
$.get("/goods/loadAllGoodsForSelect",function (res) {
    var data = res.data;
    var dom = $("#select_goodsid");
    var html = '<option value="0">请选择商品</option>';
    $.each(data,function (index, item) {
        html += '<option value="'+item.id+'">'+item.goodsname+'-['+item.size+']-'+'['+item.providername+']'+'</option>';
    });
    dom.html(html);
    //重新渲染下拉列表
    form.render("select");
});
```

--------------------------------

### Initialize Layui Data Table for Goods Management

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/goods/goodsManager.html

Initializes a Layui data table (`#goodsTable`) to display product information. It fetches data from `/goods/loadAllGoods`, defines columns for various product attributes, and includes a toolbar for actions. The `done` callback handles pagination adjustments to prevent empty pages.

```JavaScript
//提升数据表格的作用域，因为底下还有一个reloadTable方法
var tableIns;
layui.use(['jquery', 'form', 'layer', 'table','upload'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;
    var upload = layui.upload;

    //初始化表格 加载数据
    tableIns = table.render({
        elem: "#goodsTable",
        title: "商品数据表格",
        url: "/goods/loadAllGoods",
        toolbar: "#goodsToolBar",
        page: true,
        height: "full-180",
        cols: [
            [
                {field: 'id', title: 'ID', align: 'center',width:'50'},
                {field: 'goodsname', title: '商品名称', align: 'center',width:'150'},
                {field: 'providername', title: '供应商', align: 'center',width:'150'},
                {field: 'produceplace', title: '商品产地', align: 'center',width:'150'},
                {field: 'description', title: '商品描述', align: 'center',width:'150'},
                {field: 'price', title: '销售价格', align: 'center',width:'90'},
                {field: 'number', title: '数量', align: 'center',width:'90'},
                {field: 'dangernum', title: '库存预警值', align: 'center',width:'100'},
                {field: 'goodsimg', title: '商品图片', align: 'center',width:'150', templet:function(d){ return '<img width=40 height=40 src=/file/showImageByPath?path='+d.goodsimg+ ' />'; }},
                {field: 'size', title: '规格', align: 'center',width:'120'},
                {field: 'goodspackage', title: '包装', align: 'center',width:'120'},
                {field: 'productcode', title: '生产批号', align: 'center',width:'130'},
                {field: 'promitcode', title: '批准文号', align: 'center',width:'130'},
                {field: 'available', title: '是否可用', align: 'center',width:'100',templet:function (d) { return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>'; }},
                {fixed: 'right', title: '操作', toolbar: '#goodsRowBar', align: 'center',width:'180'}
            ]
        ],
        done: function (data, curr, count) {
            //不是第一页时，如果当前返回的数据为0那么就返回上一页
            if (data.data.length == 0 && curr != 1) {
                tableIns.reload({
                    page: { curr: curr - 1 }
                })
            }
        }
    });
```

--------------------------------

### API: Load All Providers for Select (GET)

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/outport/outportManager.html

API endpoint to retrieve a list of all providers. This endpoint is typically used to populate a dropdown selection field, providing provider IDs and names.

```APIDOC
GET /provider/loadAllProviderForSelect

Response (JSON):
  code (int): Status code (e.g., 200 for success).
  msg (string): Message.
  data (array): List of provider objects.
    - id (int)
    - providername (string)
```

--------------------------------

### Layui Framework Initialization and Dashboard Interactions

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/static/resources/page/main.html

This JavaScript snippet initializes the Layui framework modules (form, element, layer, jquery) for a dashboard interface. It handles displaying the last login time, adds hover animations to panel icons, manages tab additions, and fetches and displays a list of latest articles from a JSON file using jQuery's AJAX capabilities.

```JavaScript
layui.use(['form','element','layer','jquery'],function(){ var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, element = layui.element; $ = layui.jquery; //上次登录时间【此处应该从接口获取，实际使用中请自行更换】 $(".loginTime").html(newDate.split("日")[0]+"日</br>"+newDate.split("日")[1]); //icon动画 $(".panel a").hover(function(){ $(this).find(".layui-anim").addClass("layui-anim-scaleSpring"); },function(){ $(this).find(".layui-anim").removeClass("layui-anim-scaleSpring"); }) $(".panel a").click(function(){ parent.addTab($(this)); }) //最新文章列表 $.get("../json/newsList.json",function(data){ var hotNewsHtml = ''; for(var i=0;i<5;i++){ hotNewsHtml += '<tr>' +'<td align="left"><a href="javascript:;"> '+data.data[i].newsName+'</a></td>' +'<td>'+data.data[i].newsTime.substring(0,10)+'</td>' +'</tr>'; } $(".hot_news").html(hotNewsHtml); $(".userAll span").text(data.length); }) })
```

--------------------------------

### API: Load All Outport Records (GET)

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/outport/outportManager.html

API endpoint to retrieve all outport (return) records. This endpoint is used by the Layui data table to populate its rows and supports pagination and filtering via query parameters.

```APIDOC
GET /outport/loadAllOutport

Parameters:
  page (int, optional): Current page number for pagination.
  limit (int, optional): Number of records per page.
  startTime (datetime, optional): Filter records from this start time.
  endTime (datetime, optional): Filter records up to this end time.
  providerid (int, optional): Filter by provider ID.
  goodsid (int, optional): Filter by goods ID.

Response (JSON):
  code (int): Status code (e.g., 0 for success, 200 for success in this context).
  msg (string): Message.
  count (int): Total number of records.
  data (array): List of outport record objects.
    - id (int)
    - providername (string)
    - goodsname (string)
    - paytype (string)
    - outputtime (string)
    - operateperson (string)
    - number (int)
    - outportprice (float)
    - remark (string)
    - size (string)
```

--------------------------------

### Layui Module Initialization and Department Table Render

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/dept/deptRight.html

Initializes Layui modules including jQuery, form, layer, table, and a custom dtree extension. It then renders a data table for departments, configuring columns, pagination, toolbar, and data loading from `/dept/loadAllDept`.

```JavaScript
//提升数据表格的作用域，因为底下还有一个reloadTable方法
var tableIns; 
layui.extend({
    dtree: '/resources/layui_ext/dtree/dtree'
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit','dtree'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;
    var dtree = layui.dtree;

    //初始化表格 加载数据
    tableIns = table.render({
        elem: "#deptTable",
        title: "部门数据表格",
        url: "/dept/loadAllDept",
        toolbar: "#deptToolBar",
        page: true,
        height: "full-180",
        cols: [
            [
                {field: 'id', title: 'ID', align: 'center',width:'50'},
                {field: 'pid', title: '父级部门ID', align: 'center',width:'100'},
                {field: 'name', title: '部门名称', align: 'center',width:'150'},
                {field: 'remark', title: '部门备注', align: 'center',width:'150'},
                {field: 'address', title: '部门地址', align: 'center',width:'100'},
                {field: 'available', title: '是否可用', align: 'center',width:'100',templet:function (d) {
                    return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>';
                }},
                {field: 'open', title: '是否展开', align: 'center',width:'100',templet:function (d) {
                    return d.open==1?'<font color="blue">展开</font>':'<font color="red">不展开</font>';
                }},
                {field: 'ordernum', title: '排序码', align: 'center',width:'80'},
                {field: 'createtime', title: '部门创建时间', align: 'center',width:'160'},
                {fixed: 'right', title: '操作', toolbar: '#deptRowBar', align: 'center',width:'180'}
            ]
        ],
        done: function (data, curr, count) {
            //不是第一页时，如果当前返回的数据为0那么就返回上一页
            if (data.data.length == 0 && curr != 1) {
                tableIns.reload({
                    page: {
                        curr: curr - 1
                    }
                })
            }
        }
    });
```

--------------------------------

### Listen for Provider Select Change Event

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/inport/inportManager.html

Monitors changes in the 'providerid' dropdown within the form. This snippet shows the start of a function that would typically trigger further actions, such as dynamically loading goods based on the selected provider.

```JavaScript
//监听供应商的下拉列表的事件
form.on('select(providerid)',function (data) {
    var providerid = data.value
```

--------------------------------

### Initialize LayUI Role Data Table

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/role/roleManager.html

This code initializes the main role data table using LayUI's table module. It configures the table with a title, data URL, toolbar, pagination, and defines columns for ID, name, remark, availability (with custom template for display), creation time, and operations. It also includes a 'done' callback to handle pagination adjustments if the current page becomes empty.

```JavaScript
var tableIns = table.render({
  elem: "#roleTable",
  title: "角色数据表格",
  url: "/role/loadAllRole",
  toolbar: "#roleToolBar",
  page: true,
  height: "full-190",
  cols: [
    [
      {field: 'id', title: 'ID', align: 'center'},
      {field: 'name', title: '角色名称', align: 'center'},
      {field: 'remark', title: '角色备注', align: 'center'},
      {field: 'available', title: '是否可用', align: 'center',templet:function (d) { return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>'; }},
      {field: 'createtime', title: '创建时间', align: 'center'},
      {fixed: 'right', title: '操作', toolbar: '#roleRowBar', align: 'center',width:280}
    ]
  ],
  done:function (data, curr, count) {
    //不是第一页时，如果当前返回的数据为0那么就返回上一页
    if(data.data.length==0&&curr!=1){
      tableIns.reload({
        page:{
          curr:curr-1
        }
      })
    }
  }
});
```

--------------------------------

### API: Load All Goods for Select (GET)

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/outport/outportManager.html

API endpoint to retrieve a list of all goods. This endpoint is typically used to populate a dropdown selection field, providing goods details like ID, name, size, and associated provider name.

```APIDOC
GET /goods/loadAllGoodsForSelect

Response (JSON):
  code (int): Status code (e.g., 200 for success).
  msg (string): Message.
  data (array): List of goods objects.
    - id (int)
    - goodsname (string)
    - size (string)
    - providername (string)
```

--------------------------------

### Initialize layui bodyTab Module

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/static/resources/page/doc/bodyTabDoc.html

Demonstrates how to load and initialize the 'bodyTab' module within a layui application. This snippet shows the basic structure for using layui's module system to access the 'bodyTab' functionality.

```JavaScript
layui.use('bodyTab', function(){
  layui.bodyTab(options);
});
```

--------------------------------

### Implement Layui File Upload for Product Images

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/goods/goodsManager.html

Configures Layui's upload module to handle image uploads. It targets elements with class `thumbBox`, sends files to `/file/uploadFile`, and on success, updates the image preview (`.thumbImg`) and sets the hidden input field (`#goodsimg`) with the returned file path.

```JavaScript
//文件上传
upload.render({
    elem: '.thumbBox',
    url: '/file/uploadFile',
    acceptMime:'image/*',
    field:'mf',
    method : "post",
    done: function(res, index, upload){
        var path=res.path;
        $('.thumbImg').attr('src','/file/showImageByPath?path='+path);
        $('.thumbBox').css("background","#fff");
        //给隐藏域赋值
        $("#goodsimg").val(path);
    }
});
```

--------------------------------

### Initialize Layui Data Table for Permissions

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/permission/permissionRight.html

This code initializes a Layui data table ('permissionTable') to display permission data. It configures the table with a title, URL for data loading, toolbar, pagination, height, and column definitions, including custom templates for 'available' and 'open' fields. It also includes a 'done' callback to handle empty data sets by reverting to the previous page.

```JavaScript
tableIns = table.render({
  elem: "#permissionTable",
  title: "权限数据表格",
  url: "/permission/loadAllPermission",
  toolbar: "#permissionToolBar",
  page: true,
  height: "full-130",
  cols: [
    [
      {field: 'id', title: 'ID', align: 'center',width:'80'},
      {field: 'pid', title: '父级权限ID', align: 'center',width:'100'},
      {field: 'title', title: '权限名称', align: 'center',width:'150'},
      {field: 'percode', title: '权限编码', align: 'center',width:'230'},
      {field: 'available', title: '是否可用', align: 'center',width:'100',templet:function (d) { return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>'; }},
      {field: 'open', title: '是否展开', align: 'center',width:'100',templet:function (d) { return d.open==1?'<font color="blue">展开</font>':'<font color="red">不展开</font>'; }},
      {field: 'ordernum', title: '排序码', align: 'center',width:'100'},
      {fixed: 'right', title: '操作', toolbar: '#permissionRowBar', align: 'center',width:'220'}
    ]
  ],
  done: function (data, curr, count) {
    if (data.data.length == 0 && curr != 1) {
      tableIns.reload({
        page: {
          curr: curr - 1
        }
      })
    }
  }
});
```

--------------------------------

### Convert Username to Pinyin on Blur

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/user/userManager.html

Listens for the `blur` event on the username input field (`#username`). When the user leaves the field, it sends an AJAX GET request to `/user/changeChineseToPinyin` with the entered username and populates the login name field (`#loginname`) with the returned Pinyin value.

```JavaScript
$("#username").on("blur",function () {
  var username = $(this).val();
  $.get("/user/changeChineseToPinyin",{username:username},function (res) {
    $("#loginname").val(res.value);
  })
});
```

--------------------------------

### Initialize Layui DTree Menu and Handle Node Clicks

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/permission/permissionLeft.html

This snippet initializes a dtree instance, configuring it to load menu data from `/permission/loadPermissionManagerLeftTreeJson`. It uses `layuiStyle` and `list` data formats. A node click listener is attached to update a table in the parent window by passing the clicked node's ID.

```JavaScript
var menuTree; layui.extend({
    dtree: '/resources/layui_ext/dtree/dtree'
}).use(['dtree','layer','jquery'], function(){
    var dtree = layui.dtree;
    var layer = layui.layer;
    var $ = layui.jquery;

    // Initialize tree
    menuTree = dtree.render({
        elem: "#menuTree",
        dataStyle: "layuiStyle", // Use layui style data format
        dataFormat: "list", // Configure data style as list
        response:{message:"msg",statusCode:0}, // Modify response data definition
        url: "/permission/loadPermissionManagerLeftTreeJson" // Use url to load (can coexist with data loading)
    });

    // Bind node click
    dtree.on("node('menuTree')" ,function(obj){
        //layer.msg(JSON.stringify(obj.param));
        // Pass tree node id to reloadTable method
        window.parent.right.reloadTable(obj.param.nodeId);
    });
});
```

--------------------------------

### Initialize Layui Data Table for Sales Returns

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/salesback/salesbackManager.html

This snippet initializes a Layui data table to display sales return records. It fetches data from the '/salesback/loadAllSalesback' API endpoint, enables pagination, and defines columns for various sales return attributes such as ID, customer, goods, payment type, return time, operator, quantity, price, remark, and size, along with an 'Operate' column for actions.

```JavaScript
tableIns = table.render({
    elem: "#salesbackTable",
    title: "进货数据表格",
    url: "/salesback/loadAllSalesback",
    toolbar: true,
    page: true,
    height: "full-180",
    cols: [
        [
            {field: 'id', title: 'ID', align: 'center'},
            {field: 'customername', title: '客户', align: 'center',width:'130'},
            {field: 'goodsname', title: '商品名称', align: 'center',width:'150'},
            {field: 'paytype', title: '支付类型', align: 'center',width:'90'},
            {field: 'salesbacktime', title: '退货时间', align: 'center',width:'170'},
            {field: 'operateperson', title: '操作员', align: 'center',width:'130'},
            {field: 'number', title: '退货数量', align: 'center',width:'100'},
            {field: 'salebackprice', title: '退货价格', align: 'center',width:'120'},
            {field: 'remark', title: '备注', align: 'center',width:'130'},
            {field: 'size', title: '商品规格', align: 'center',width:'100'},
            {fixed: 'right', title: '操作', toolbar: '#salesbackRowBar', align: 'center',width:'130'}
        ]
    ],
    done: function (data, curr, count) {
        //不是第一页时，如果当前返回的数据为0那么就返回上一页
        if (data.data.length == 0 && curr != 1) {
            tableIns.reload({
                page: {
                    curr: curr - 1
                }
            })
        }
    }
});
```

--------------------------------

### Initialize Layui Data Table for Supplier Management

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/business/provider/providerManager.html

This snippet initializes a Layui data table (`#providerTable`) to display supplier information. It configures the table with a data URL (`/provider/loadAllProvider`), pagination, a toolbar, and defines columns including checkboxes, IDs, supplier details, and action buttons. It also includes a `done` callback to handle pagination edge cases, ensuring the table reloads to the previous page if the current page becomes empty.

```JavaScript
var tableIns; 
layui.use(['jquery', 'form', 'layer', 'table'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;

    tableIns = table.render({
        elem: "#providerTable",
        title: "供应商数据表格",
        url: "/provider/loadAllProvider",
        toolbar: "#providerToolBar",
        page: true,
        height: "full-180",
        cols: [
            [
                {type:'checkbox',fixed:'left'},
                {field: 'id', title: 'ID', align: 'center',width:'50'},
                {field: 'providername', title: '供应商名称', align: 'center',width:'100'},
                {field: 'address', title: '供应商地址', align: 'center',width:'150'},
                {field: 'telephone', title: '供应商电话', align: 'center',width:'140'},
                {field: 'zip', title: '邮编', align: 'center',width:'90'},
                {field: 'connectionperson', title: '联系人', align: 'center',width:'130'},
                {field: 'phone', title: '联系人电话', align: 'center',width:'130'},
                {field: 'bank', title: '开户银行', align: 'center',width:'100'},
                {field: 'account', title: '银行账号', align: 'center',width:'160'},
                {field: 'email', title: '邮箱', align: 'center',width:'200'},
                {field: 'fax', title: '传真', align: 'center',width:'100'},
                {field: 'available', title: '是否可用', align: 'center',width:'100',templet:function (d) {
                    return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>';
                }},
                {fixed: 'right', title: '操作', toolbar: '#providerRowBar', align: 'center',width:'180'}
            ]
        ],
        done: function (data, curr, count) {
            if (data.data.length == 0 && curr != 1) {
                tableIns.reload({
                    page: {
                        curr: curr - 1
                    }
                })
            }
        }
    });
})
```

--------------------------------

### LayUI Module Loading and Date/Time Picker Initialization

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/role/roleManager.html

This snippet demonstrates how to extend LayUI with custom modules (like dtree) and load essential LayUI modules (jQuery, form, layer, laydate, table, dtree). It also initializes two date/time pickers for 'startTime' and 'endTime' input fields.

```JavaScript
layui.extend({ dtree: '/resources/layui_ext/dtree/dtree' }).use(['jquery', 'form', 'layer', 'laydate', 'table','dtree'], function () {
  var $ = layui.jquery;
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var table = layui.table;
  var dtree = layui.dtree;

  //初始化时间选择器
  laydate.render({
    elem: "#startTime",
    type: "datetime"
  });
  laydate.render({
    elem: "#endTime",
    type: "datetime"
  });
  // ... rest of the code ...
});
```

--------------------------------

### Initialize Layui dtree Menu and Handle Node Clicks

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/menu/menuLeft.html

This JavaScript snippet initializes a dtree component within a Layui application. It configures the tree to load data from `/menu/loadMenuManagerLeftTreeJson` and uses a custom response format. A node click listener is attached to update a table in the parent window, passing the clicked node's ID.

```JavaScript
var menuTree;
layui.extend({
  dtree: '/resources/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
}).use(['dtree','layer','jquery'], function(){
  var dtree = layui.dtree;
  var layer = layui.layer;
  var $ = layui.jquery;

  // 初始化树
  menuTree = dtree.render({
    elem: "#menuTree",
    dataStyle: "layuiStyle", //使用layui风格的数据格式
    dataFormat: "list", //配置data的风格为list
    response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
    url: "/menu/loadMenuManagerLeftTreeJson" // 使用url加载（可与data加载同时存在）
  });

  // 绑定节点点击
  dtree.on("node('menuTree')" ,function(obj){
    //layer.msg(JSON.stringify(obj.param)); //将树节点的id传到reloadTable方法中
    window.parent.right.reloadTable(obj.param.nodeId);
  });
});
```

--------------------------------

### layui.bodyTab(options) Configuration Parameters

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/static/resources/page/doc/bodyTabDoc.html

Details the configurable options for the 'bodyTab' module's initialization. These parameters allow customization of tab behavior, such as the maximum number of open tabs and the filter for tab management.

```APIDOC
layui.bodyTab(options) Parameters:
  openTabNum:
    Type: string
    Default: undefined
    Description: Sets the maximum number of windows that can be opened. Default is unlimited. Example: "10" for 10 windows.
  tabFilter:
    Type: string
    Default: bodyTab
    Description: The filter for adding windows. This is optional if the default index.html source code is not modified. If modified, it's required and should match the lay-filter value of the <ul> element (e.g., <ul class="tab" lay-filter="bodyTab"></ul>).
  url:
    Type: object
    Default: undefined
    Description: Required. The interface path to get menu data. Must return menu information in the specified JSON format.
```

--------------------------------

### Initialize Layui Data Table for Menu Management

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/menu/menuRight.html

This code initializes a Layui data table ('#menuTable') to display menu information. It configures the table with a title, data URL ('/menu/loadAllMenu'), toolbar, pagination, and defines columns for menu ID, parent ID, title, URL, icon, availability, expand status, order number, target, and operations. It also includes a 'done' callback to handle pagination logic for empty results.

```JavaScript
tableIns = table.render({
    elem: "#menuTable",
    title: "菜单数据表格",
    url: "/menu/loadAllMenu",
    toolbar: "#menuToolBar",
    page: true,
    height: "full-130",
    cols: [
        [
            {field: 'id', title: 'ID', align: 'center',width:'80'},
            {field: 'pid', title: '父级菜单ID', align: 'center',width:'100'},
            {field: 'title', title: '菜单名称', align: 'center',width:'150'},
            {field: 'href', title: '菜单地址', align: 'center',width:'200'},
            {field: 'icon', title: '菜单图标', align: 'center',width:'90',templet:function (d) { return '<font class="layui-icon">'+d.icon+'</font>'; }},
            {field: 'available', title: '是否可用', align: 'center',width:'100',templet:function (d) { return d.available==1?'<font color="blue">可用</font>':'<font color="red">不可用</font>'; }},
            {field: 'open', title: '是否展开', align: 'center',width:'100',templet:function (d) { return d.open==1?'<font color="blue">展开</font>':'<font color="red">不展开</font>'; }},
            {field: 'ordernum', title: '排序码', align: 'center',width:'80'},
            {field: 'target', title: 'TARGET', align: 'center',width:'80',hide:true},
            {fixed: 'right', title: '操作', toolbar: '#menuRowBar', align: 'center',width:'180'}
        ]
    ],
    done: function (data, curr, count) {
        //不是第一页时，如果当前返回的数据为0那么就返回上一页
        if (data.data.length == 0 && curr != 1) {
            tableIns.reload({
                page: {
                    curr: curr - 1
                }
            })
        }
    }
});
```

--------------------------------

### Initialize LayUI Modules and Render User Data Table

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/user/userManager.html

Initializes essential LayUI modules like 'jquery', 'form', 'layer', 'laydate', 'table', and 'dtree'. It then renders a data table ('#userTable') to display user information, configuring columns, data source ('/user/loadAllUser'), toolbar, and pagination.

```JavaScript
var tableIns;
layui.extend({
    dtree: '/resources/layui_ext/dtree/dtree'
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit', 'dtree','laydate'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;
    var dtree = layui.dtree;
    var laydate = layui.laydate;

    //初始化时间选择器
    laydate.render({
        elem: "#hiredate",
        type: "datetime"
    });

    //初始化表格 加载数据
    tableIns = table.render({
        elem: "#userTable",
        title: "部门数据表格",
        url: "/user/loadAllUser",
        toolbar: "#userToolBar",
        page: true,
        height: "full-180",
        cols: [
            [
                {field: 'id', title: 'ID', align: 'center', width: '50'},
                {field: 'name', title: '用户名', align: 'center', width: '130'},
                {field: 'loginname', title: '登陆名称', align: 'center', width: '130'},
                {field: 'deptname', title: '所属部门', align: 'center', width: '130'},
                {field: 'leadername', title: '直属领导', align: 'center', width: '120'},
                {field: 'remark', title: '用户备注', align: 'center', width: '120'},
                {field: 'address', title: '用户地址', align: 'center', width: '100'},
                {field: 'hiredate', title: '入职时间', align: 'center', width: '160'},
                {field: 'imgpath', title: '用户头像', align: 'center', width: '160', templet:function(d){ return '<img width=40 height=40 src=/file/showImageByPath?path='+d.imgpath+ ' />'; }},
                { field: 'sex', title: '是否可用', align: 'center', width: '100', templet: function (d) { return d.sex == 1 ? '<font color="blue">男</font>' : '<font color="red">女</font>'; } },
                { field: 'available', title: '是否可用', align: 'center', width: '100', templet: function (d) { return d.available == 1 ? '<font color="blue">可用</font>' : '<font color="red">不可用</font>'; } },
                {field: 'ordernum', title: '排序码', align: 'center', width: '80'},
                {fixed: 'right', title: '操作', toolbar: '#userRowBar', align: 'center', width: '330'}
            ]
        ],
        done: function (data, curr, count) {
            //不是第一页时，如果当前返回的数据为0那么就返回上一页
            if (data.data.length == 0 && curr != 1) {
                tableIns.reload({
                    page: {
                        curr: curr - 1
                    }
                })
            }
        }
    });
```

--------------------------------

### Initialize User Role Table

Source: https://github.com/yeqifu/warehouse/blob/master/src/main/resources/templates/system/user/userManager.html

Initializes a LayUI `table` to display roles associated with a specific user. It fetches role data from `/user/initRoleByUserId`, passing the user's ID as a parameter, and defines the table columns for ID, role name, and role remark, with a checkbox for selection.

```JavaScript
var roleTableIns; //初始化角色列表
function initRoleTable(data) {
  console.log(data);
  roleTableIns = table.render({
    elem:'#roleTable',
    url:'/user/initRoleByUserId',
    where:{
      id:data.id
    },
    cols:[
      [
        {type:'checkbox',align:'center'},
        {field:'id',title:'ID',align:'center'},
        {field:'name',title:'角色名称',align:'center'},
        {field:'remark',title:'角色备注',align:'center'}
      ]
    ]
  });
}
```
Tokens:
Raw