473 lines
16 KiB
Markdown
473 lines
16 KiB
Markdown
---
|
||
title: 页面组件
|
||
description: 页面上使用的组件
|
||
published: true
|
||
date: 2021-10-21T08:08:00.658Z
|
||
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
|
||
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 = [];
|
||
}
|
||
});
|
||
```
|
||
# 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',
|
||
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">
|
||
</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参数集合对象
|
||
```javascript
|
||
var params = top.restAjax.params(window.location.href);
|
||
var xxx = params.xxx;
|
||
``` |