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
@@ -23,6 +24,7 @@ dateCreated: 2021-09-08T06:41:19.351Z ``` # 2. 表单下拉联动 + ```html
@@ -50,7 +52,9 @@ dateCreated: 2021-09-08T06:41:19.351Z
``` + 初始化 + ```javascript // 统一渲染方法 function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) { @@ -99,19 +103,25 @@ function initArea2Select(area1, selectValue) { }); } ``` + 赋值初始化 + ```javascript initArea1Select(data['area1']); initArea2Select(data['area1'], data['area2']); ``` + 联动 + ```javascript // area1 选择事件,多级联动继续添加 form.on('select(area1)', function(data) { initArea2Select(data.value); }); ``` + # 3. 表单单选 + ```html
@@ -121,7 +131,9 @@ form.on('select(area1)', function(data) {
``` + # 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