diff --git a/wg-basic/page-unit.md b/wg-basic/page-unit.md
index 1607b19..1b95541 100644
--- a/wg-basic/page-unit.md
+++ b/wg-basic/page-unit.md
@@ -2,13 +2,14 @@
title: 页面组件
description: 页面上使用的组件
published: true
-date: 2021-11-01T03:38:24.581Z
+date: 2021-11-11T07:02:04.098Z
tags: wg-basic
editor: markdown
dateCreated: 2021-09-08T06:41:19.351Z
---
# 1. 表单下拉列表
+
```html
```
+
# 4. 表单多选
+
```html
@@ -134,12 +146,16 @@ form.on('select(area1)', function(data) {
```
+
处理多选结果
+
```javascript
var authorizedGrantTypes = top.restAjax.checkBoxToString(formData.field, 'authorizedGrantTypes');
formData.field.authorizedGrantTypes = authorizedGrantTypes;
```
+
赋值多选结果
+
```javascript
var authorizedGrantTypes = data.authorizedGrantTypes.split(',');
var formObj = {};
@@ -149,7 +165,9 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
}
form.render(null, 'dataForm');
```
+
# 5. 表单下拉、单选、复选统一处理
+
```javascript
// 初始化选择框、单选、复选模板
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
@@ -164,6 +182,7 @@ function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callba
```
# 6. viewer,具体是用参考官方API
+
```html
@@ -173,6 +192,7 @@ new Viewer(document.getElementById('boxId'), {navbar: true});
```
# 7. 列表按钮
+
```javascript
// 单按钮
templet: function(item) {
@@ -203,17 +223,22 @@ table.on('tool(dataTable)', function(obj) {
```
# 8. 选择人员(表格)
+
```javascript
```
+
# 9. 文件上传(图片示例)
+
依赖
+
```html
```
表单代码
+
```html
@@ -248,6 +273,7 @@ table.on('tool(dataTable)', function(obj) {
```
js代码
+
```js
var viewerObj = {};
@@ -341,6 +367,7 @@ function initFactoryGateUploadFile() {
代码以厂区图片为例,实际只需要替换对应的内容即可:模板名称、模板BOX名称
使用layui
+
```js
// 初始化健康码图片上传
function initHealthCodeUploadFile() {
@@ -396,6 +423,7 @@ function initHealthCodeUploadFile() {
```
# 10. 选择用户
+
```javascript
top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
top.dialog.open({
@@ -411,11 +439,13 @@ top.dialog.open({
}
})
```
+
说明:
1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
2. 返回的列表中可以获取:userId,userName
# 11. 选择地区
+
```html
@@ -425,6 +455,7 @@ top.dialog.open({
```
+
```javascript
top.dialog.open({
title: '选择地区',
@@ -449,6 +480,7 @@ top.dialog.open({
}
})
```
+
说明:
1. 打开页面时的参数 **areaName** 用于回显,可以不传。
2. 返回的列表中可以获取:areaId,areaName,areaCode
@@ -460,6 +492,7 @@ top.dialog.open({
引入:`var form = layui.form`
1. 固定
+
```html
```
+
```javascript
function initQuestionTypeSelect() {
top.restAjax.get(top.restAjax.path('api/data/listbyparentid/a7d1ab3d-fbd2-48ca-bfb8-353cad9f3eba', []), {}, null, function(code, data, args) {
@@ -499,6 +533,7 @@ function initQuestionTypeSelect() {
}
```
3. 下拉选择事件
+
```javascript
form.on('select(typeFilter)', function(data) {
$('#choiceType').val('')
@@ -508,17 +543,21 @@ form.on('select(typeFilter)', function(data) {
}
});
```
+
# 13.url中query参数集合对象
+
```javascript
var params = top.restAjax.params(window.location.href);
var xxx = params.xxx;
```
# 14.列表选择
+
> 这里只是示例,具体的参数、变量需根据实际情况修改
{.is-warning}
html:列表页面
+
```html
@@ -535,6 +574,7 @@ html:列表页面
```
+
```javascript
layui.config({
base: 'assets/layuiadmin/'
@@ -734,7 +774,9 @@ layui.config({
});
});
```
+
调用方式:其他页面
+
```javascript
// 这里的列表数据格式根据实际情况变化
top.dialog.dialogData.oldSelectedUserList = [{userId:''}];