wiki-files/wg-basic/page-unit.md

---
title: 页面组件
description: 页面上使用的组件
published: true
date: 2021-10-21T12:05:14.835Z
tags: wg-basic
editor: markdown
dateCreated: 2021-09-08T06:41:19.351Z
---

# 1. 表单下拉列表
```html
<div class="layui-form-item">    
    <label class="layui-form-label">类型</label>    
    <div class="layui-input-block">        
        <select id="type" name="type" lay-filter="typeFilter">            
            <option value="1">舆情收集</option>            
            <option value="2">政法干警监督举报</option>            
            <option value="3">执法、司法监督举报</option>        
        </select>    
    </div>
</div>
```

# 2. 表单下拉联动
```html
<div class="layui-form-item">    
    <label class="layui-form-label">1级区域</label>    
    <div class="layui-input-block layui-form" id="area1SelectTemplateBox" lay-filter="area1SelectTemplateBox"></div>
    <script id="area1SelectTemplate" type="text/html">        
        <select id="area1" name="area1" lay-filter="area1" disabled>            
            <option value="">暂无1级区域</option>            
            {{# for(var i = 0, item; item = d[i++];) { }}            
            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
            {{# } }}        
        </select>    
    </script>
</div>

<div class="layui-form-item">    
    <label class="layui-form-label">2级区域</label>    
    <div class="layui-input-block layui-form" id="area2SelectTemplateBox" lay-filter="area2SelectTemplateBox"></div>    
    <script id="area2SelectTemplate" type="text/html">        
        <select id="area2" name="area2" lay-filter="area2" disabled>            
            <option value="">暂无2级区域</option>            
            {{# for(var i = 0, item; item = d[i++];) { }}            
            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
            {{# } }}        
        </select>    
    </script>
</div>
```
初始化
```javascript
// 统一渲染方法
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
    laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {
        document.getElementById(templateBoxId).innerHTML = html;
    });
    form.render('select', templateBoxId);
    if(callback) {
        callback();
    }
}

// 初始化1级区域下拉选择
function initArea1Select(selectValue) {    
    top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/81583ade-5466-49aa-b7b6-c643c131ea34', []), {
    }, null, function(code, data, args) {        
        initSelectRadioCheckboxTemplate('area1SelectTemplate', 'area1SelectTemplateBox', data, function() {
            var selectObj = {};            
            selectObj['area1'] = selectValue;            
            form.val('dataForm', selectObj);        
        });    
    }, function(code, data) {        
        top.dialog.msg(data.msg);    
    });
}

// 初始化2级区域下拉选择
function initArea2Select(area1, selectValue) {
    if(!area1) {        
        initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', [], function() {
            var selectObj = {};            
            selectObj['area2'] = selectValue;            
            form.val('dataForm', selectObj);        
        });        
        return;    
    }    
    top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/{area1}', [area1]), {
    }, null, function(code, data, args) {
        initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', data, function() {
            var selectObj = {};
            selectObj['area2'] = selectValue;
            form.val('dataForm', selectObj);
        });    
    }, function(code, data) {
        top.dialog.msg(data.msg);    
    });
}
```
赋值初始化
```javascript
initArea1Select(data['area1']);
initArea2Select(data['area1'], data['area2']);
```
联动
```javascript
// area1 选择事件，多级联动继续添加
form.on('select(area1)', function(data) {    
    initArea2Select(data.value);
});
```
# 3. 表单单选
```html
<div class="layui-form-item" pane>    
    <label class="layui-form-label">名称</label>    
    <div class="layui-input-block">        
        <input type="radio" name="isLogOff" value="0" title="否" checked>        
        <input type="radio" name="isLogOff" value="1" title="是">    
    </div>
</div>
```
# 4. 表单多选
```html
<div class="layui-form-item" pane>    
    <label class="layui-form-label">授权模式 *</label>
    <div class="layui-input-block">    
        <input type="checkbox" name="authorizedGrantTypes[authorization_code]" title="授权码模式" checked>    
        <input type="checkbox" name="authorizedGrantTypes[password]" title="密码模式">    
        <input type="checkbox" name="authorizedGrantTypes[client_credentials]" title="客户端模式" checked>    
        <input type="checkbox" name="authorizedGrantTypes[implicit]" title="简单模式">    
        <input type="checkbox" name="authorizedGrantTypes[refresh_token]" title="刷新" checked>
    </div>
</div>
```
处理多选结果
```javascript
var authorizedGrantTypes = top.restAjax.checkBoxToString(formData.field, 'authorizedGrantTypes');
formData.field.authorizedGrantTypes = authorizedGrantTypes;
```
赋值多选结果
```javascript
var authorizedGrantTypes = data.authorizedGrantTypes.split(',');
var formObj = {};
for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];) {    
    formObj['authorizedGrantTypes['+ item +']'] = true;   
    form.val('dataForm', formObj);
}
form.render(null, 'dataForm');
```
# 5. 表单下拉、单选、复选统一处理
```javascript
// 初始化选择框、单选、复选模板
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {   
    laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {       
        document.getElementById(templateBoxId).innerHTML = html;    
    });    
    form.render('select', templateBoxId);    
    if(callback) {
        callback();    
    }
}
```

# 6. viewer，具体是用参考官方API
```html
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
new Viewer(document.getElementById('boxId'), {navbar: true});
</script>
```

# 7. 列表按钮
```javascript
// 单按钮
templet: function(item) {
    return '<button type="button" class="layui-btn layui-btn-sm" lay-event="resetPasswordEvent"><i class="fa fa-key"></i> 重置密码</button>';
}
// 按钮组
templet: function(item) {
    return '<div class="layui-btn-group">'+
      '<button type="button" class="layui-btn layui-btn-sm" lay-event="resetPasswordEvent"><i class="fa fa-key"></i> 重置密码</button>'+
      '</div>';
}
// 事件处理
table.on('tool(dataTable)', function(obj) {
    var layEvent = obj.event;
    var data = obj.data;
    if(layEvent === 'resetPasswordEvent') {
        top.dialog.open({
            url: top.restAjax.path('route/system/user/update-rest-password.html?userId={userId}', [data.userId]),
            title: '【'+ data.userName +'】重置密码',
            width: '320px',
            height: '280px',
            onClose: function() {
                reloadTable();
            }
        });
    }
});
```

# 8. 选择人员（表格）
```javascript

```
# 9. 文件上传（图片示例）
依赖
```html
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
```

表单代码
```html
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">厂区大门</label>
    <div class="layui-input-block">
        <input type="hidden" id="factoryGate" name="factoryGate">
        <div class="layui-btn-container" id="factoryGateFileBox" style="border: 1px solid #e6e6e6;"></div>
        <script id="factoryGateFileDownload" type="text/html">
            {{# var fileName = 'factoryGate'; }}
            {{# if(d[fileName].length > 0) { }}
            {{#    var files = d[fileName];}}
            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
            <div class="upload-image-box">
                <span class="upload-image-span">
                    <img src="route/file/downloadfile/true/{{item.fileId}}" align="加载失败">
                </span>
                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="factoryGateRemoveFile">
                    <i class="fa fa-trash-o"></i>
                </a>
            </div>
            {{#    } }}
            {{# } }}
            {{# if(d[fileName].length < 9) { }}
            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
                <a href="javascript:void(0);" lay-form-button data-explain="厂区大门" data-name="factoryGate" lay-filter="factoryGateUploadFile">
                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
                </a>
            </div>
            {{# } }}
        </script>
    </div>
</div>
```

js代码
```js
var viewerObj = {};

function refreshDownloadTemplet(fileName, file) {
    var dataRander = {};
    dataRander[fileName] = file;

    laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
        document.getElementById(fileName +'FileBox').innerHTML = html;
    });
}

// 初始化文件列表
function initFileList(fileName, ids, callback) {
    var dataForm = {};
    dataForm[fileName] = ids;
    form.val('dataForm', dataForm);

    if(!ids) {
        refreshDownloadTemplet(fileName, []);
        if(callback) {
            callback(fileName, []);
        }
        return;
    }

    top.restAjax.get(top.restAjax.path('api/file/listfilebyfileid', []), {
        ids: ids
    }, null, function(code, data) {
        refreshDownloadTemplet(fileName, data);
        if(callback) {
            callback(fileName, data);
        }
    }, function(code, data) {
        top.dialog.msg(data.msg);
    });
}

function initFactoryGateUploadFile() {
    var files = $('#factoryGate').val();
    initFileList('factoryGate', files, function(fileName) {
        var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
        viewerObj[fileName] = viewer;
    });

    form.on('button(factoryGateUploadFile)', function(obj) {
        var name = this.dataset.name;
        var explain = this.dataset.explain;
        top.dialog.file({
            type: 'image',
            title: '上传'+ explain,
            width: '400px',
            height: '420px',
            maxFileCount: '1',
            onClose: function() {
                var uploadFileArray = top.dialog.dialogData.uploadFileArray;
                if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
                    var files = $('#'+ name).val();
                    for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
                        if(files.length > 0) {
                            files += ',';
                        }
                        files += file.data;
                    }
                    initFileList(name, files, function(fileName) {
                        viewerObj[fileName].update();
                    });
                }
            }
        });
    });

    form.on('button(factoryGateRemoveFile)', function(obj) {
        var name = this.dataset.name;
        var id = this.dataset.id;
        var files = $('#'+ name).val().replace(id, '');
        files = files.replace(/\,+/g, ',');
        if(files.charAt(0) == ',') {
            files = files.substring(1);
        }
        if(files.charAt(files.length - 1) == ',') {
            files = files.substring(0, files.length - 1);
        }
        initFileList(name, files, function(fileName) {
            viewerObj[fileName].update();
        });
    });
}
```

代码以厂区图片为例，实际只需要替换对应的内容即可：模板名称、模板BOX名称

# 10. 选择用户
```javascript
top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
top.dialog.open({
  url: top.restAjax.path('route/department/user/select-user', []),
  title: '选择用户',
  width: '500px',
  height: '500px',
  closeBtn: 0,
  onClose: function() {
    var selectedUsers = top.dialog.dialogData.selectedDepartmentUsers;
    // 这里写处理逻辑
    if(selectedUsers && selectedUsers.length > 0) {}
  }
})
```
说明：
1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
2. 返回的列表中可以获取：userId，userName

# 11. 选择地区
```html
<div class="layui-form-item">
  <label class="layui-form-label layui-form-label-up">选择地区</label>
  <div class="layui-input-block layui-input-block-down">
    <input type="hidden" id="areaCode" name="areaCode">
    <input type="text" id="areaName" name="areaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required"  style="cursor:pointer;">
  </div>
</div>
```
```javascript
top.dialog.open({
  title: '选择地区',
  url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#areaName').val())]),
  width: '600px',
  height: '225px',
  onClose: function() {
    var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
    var areaCode = '';
    var areaName = '';
    if(selectedAreaArray.length > 0) {
      areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
      for(var i = 0, item; item = selectedAreaArray[i++];) {
        if(areaName) {
          areaName += ',';
        }
        areaName += item.areaName;
      }
    }
    $('#areaCode').val(areaCode);
    $('#areaName').val(areaName);
  }
})
```
说明：
1. 打开页面时的参数 **areaName** 用于回显，可以不传。
2. 返回的列表中可以获取：areaId，areaName，areaCode

# 12.列表下拉选择

位置：`<div class="test-table-reload-btn"></div>` 里

引入：`var form = layui.form`

1. 固定
```html
<div class="layui-inline layui-form search-item">
  <select id="type" name="type" lay-filter="typeFilter">
    <option value="">选择类型</option>
    <option value="type1">类型1</option>
  </select>
</div>
```

2. 动态

引入：`var laytpl = layui.laytpl`

```html
<div class="layui-inline layui-form search-item search-item-width-100">
  <div class="layui-form" id="questionTypeSelectTemplateBox" lay-filter="questionTypeSelectTemplateBox"></div>
  <script id="questionTypeSelectTemplate" type="text/html">
    <select id="questionType" name="questionType" lay-filter="questionType">
      <option value="">选择试题类型</option>
      {{# for(var i = 0, item; item = d[i++];) { }}
      <option value="{{item.dataId}}">{{item.dataName}}</option>
      {{# } }}
    </select>
  </script>
</div>
```
```javascript
function initQuestionTypeSelect() {
  top.restAjax.get(top.restAjax.path('api/data/listbyparentid/a7d1ab3d-fbd2-48ca-bfb8-353cad9f3eba', []), {}, null, function(code, data, args) {
    laytpl(document.getElementById('questionTypeSelectTemplate').innerHTML).render(data, function(html) {
      document.getElementById('questionTypeSelectTemplateBox').innerHTML = html;
    });
    form.render('select', 'questionTypeSelectTemplateBox');
  }, function(code, data) {
    top.dialog.msg(data.msg);
  });
}
```
3. 下拉选择事件
```javascript
form.on('select(typeFilter)', function(data) {
  $('#choiceType').val('')
  form.render('select');
  if(data.value === 'type1') {
  } else {
  }
});
```
# 13.url中query参数集合对象
```javascript
var params = top.restAjax.params(window.location.href);
var xxx = params.xxx;
```

# 14.列表选择
> 这里只是示例，具体的参数、变量需根据实际情况修改
{.is-warning}

html：列表页面
```html
<div class="layui-card">
  <div class="layui-card-body">
    <div class="test-table-reload-btn">
      <div class="layui-inline">
        <input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
      </div>
      <button type="button" id="search" class="layui-btn layui-btn-sm">
        <i class="fa fa-lg fa-search"></i> 搜索
      </button>
      <button type="button" id="confirm" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right;">确定</button>
    </div>
  </div>
  <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
</div>
```
```javascript
layui.config({
  base: 'assets/layuiadmin/'
}).extend({
  index: 'lib/index'
}).use(['index',  'table', 'laydate', 'common'], function() {
  var $ = layui.$;
  var $win = $(window);
  var table = layui.table;
  var admin = layui.admin;
  var common = layui.common;
  var selectType = top.restAjax.params(window.location.href).selectType;
  selectType = selectType ? selectType : 'radio'
  var tableUrl = 'api/user/listpageusersimple';
  var oldSelectedUserList = top.dialog.dialogData.oldSelectedUserList;
  // 清空上次选择
  top.dialog.dialogData.newSelectedUserList = [];
  var newSelectedUserList = [];
  var tableData = [];

  // 初始化选择列表
  function initNewSelectedUserList() {
    if(oldSelectedUserList.length == 0) {
      return;
    }
    for(var i = 0, item; item = oldSelectedUserList[i++];) {
      newSelectedUserList.push(item);
    }
  }
  initNewSelectedUserList();

  // 初始化表格
  function initTable() {
    $.extend(table, {config: {checkName: 'checked'}});
    table.render({
      elem: '#dataTable',
      id: 'dataTable',
      url: top.restAjax.path(tableUrl, []),
      width: admin.screen() > 1 ? '100%' : '',
      height: $win.height() - 50,
      limit: 20,
      limits: [20, 40, 60, 80, 100, 200],
      request: {
        pageName: 'page',
        limitName: 'rows'
      },
      cols: [
        [
          {type: selectType, fixed: 'left'},
          {field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
          {field: 'userUsername', width: 150, title: '用户名', align:'center',
           templet: function(row) {
             var rowData = row[this.field];
             if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
               return '-';
             }
             return rowData;
           }
          },
          {field: 'userName', width: 150, title: '昵称', align:'center',
           templet: function(row) {
             var rowData = row[this.field];
             if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
               return '-';
             }
             return rowData;
           }
          },
          {field: 'userPhone', width: 220, title: '用户手机', align:'center',
           templet: function(row) {
             var rowData = row[this.field];
             if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
               return '-';
             }
             return rowData;
           }
          },
          {field: 'userEmail', width: 220, title: '用户邮箱', align:'center',
           templet: function(row) {
             var rowData = row[this.field];
             if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
               return '-';
             }
             return rowData;
           }
          }
        ]
      ],
      page: true,
      parseData: function(data) {
        for(var i = 0, item; item = data.rows[i++];) {
          if(!newSelectedUserList) {
            item.checked = false;
            continue;
          }
          var isSelected = false;
          for(var j = 0, jItem; jItem = newSelectedUserList[j++];) {
            if(item.userId === jItem.userId) {
              isSelected = true;
              break;
            }
          }
          if(isSelected) {
            item.checked = true;
          } else {
            item.checked = false;
          }
        }
        tableData = data.rows;

        return {
          'code': 0,
          'msg': '',
          'count': data.total,
          'data': data.rows
        };
      }
    });
  }

  // 重载表格
  function reloadTable(currentPage) {
    table.reload('dataTable', {
      url: top.restAjax.path(tableUrl, []),
      where: {
        keywords: $('#keywords').val(),
      },
      page: {
        curr: currentPage
      },
      height: $win.height() - 50,
    });
  }
  initTable();

  function isUserSelected(userId) {
    for(var i = 0, item; item = newSelectedUserList[i++];) {
      if(userId == item.userId) {
        return true;
      }
    }
    return false;
  }

  function addUserSelected(userItem) {
    if(isUserSelected(userItem.userId)) {
      return;
    }
    newSelectedUserList.push({
      userId: userItem.userId,
      userUsername: userItem.userUsername,
      userName: userItem.userName,
      userPhone: userItem.userPhone,
      userEmail: userItem.userEmail
    })
  }

  function removeUserSelected(userItem) {
    for(var i = 0, item; item = newSelectedUserList[i++];) {
      if(userItem.userId == item.userId) {
        newSelectedUserList.splice(--i, 1);
        i--;
        return;
      }
    }
  }

  table.on('checkbox(dataTable)', function(obj) {
    if(obj.type === 'all') {
      if(obj.checked) {
        // 添加全部
        for(var i = 0, item; item = tableData[i++];) {
          addUserSelected(item);
        }
      } else {
        // 删除全部
        for(var i = 0, item; item = tableData[i++];) {
          removeUserSelected(item);
        }
      }
    } else {
      if(obj.checked) {
        addUserSelected(obj.data);
      } else {
        removeUserSelected(obj.data);
      }
    }
  });

  table.on('radio(dataTable)', function(obj) {
    newSelectedUserList.splice(0, newSelectedUserList.length);
    addUserSelected(obj.data);
  });
  $(document).on('click', '#search', function() {
    reloadTable(1);
  });
  $(document).on('click', '#confirm', function() {
    top.dialog.dialogData.newSelectedUserList = newSelectedUserList;
    top.dialog.closeBox();
  });
});
```
调用方式：其他页面
```javascript
// 这里的列表数据格式根据实际情况变化
top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
top.dialog.open({
    url: 'route/common/listselectuser?selectType=checkbox(radio)',
    title: '选择用户',
    width: '1000px',
    height: '500px',
    onClose: function() {
        var newSelectedUserList = top.dialog.dialogData.newSelectedUserList;
        if(newSelectedUserList.length != 0) {
             // newSelectedUserList[0].userId;
             // newSelectedUserList[0].userName;
        }
        top.dialog.dialogData.oldSelectedUserList = [];    
    }
});
```