wg-basic-doc/docs/code-template/layui-util.md

# layui工具

layui需要引入 **upload** 模块

引入依赖：

css
```html
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
<link rel="stylesheet" href="assets/css/layui-util.css">
```

js
```html
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/js/layui-util.js"></script>
```

初始化

```js
var layuiUtil = new LayuiUtil(layui, Viewer ? Viewer : null);
```

## 表单

### 构建下拉列表

html

```html
<div class="layui-form-item">
    <label class="layui-form-label">最高学历</label>
    <input type="hidden" id="highestEducationName" name="highestEducationName">
    <div class="layui-input-block" id="highestEducationIdBox"></div>
</div>
```

js

```js
layuiUtil.select({
    url: top.restAjax.path('', []),
    domId: 'xxxIdBox',
    name: 'xxxId',
    dataForm: 'dataForm',
    valueKey: 'dataId',
    nameKey: 'dataName',
    onSelect: function(data, option) {
        var optionValue = option.value;
        var optionText = option.innerText;
    }
});
```

### 构建数据字典

js

```js
layuiUtil.selectData({
    parentId: '',
    domId: 'xxxIdBox',
    name: 'xxxId',
    dataForm: 'dataForm',
    onSelect: function(data, option) {
        $('#highestEducationName').val(option.innerText);
    }
});
```

参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|domId|string|加载下拉的div|是|
|name|string|select的ID与NAME属性值|是|
|dataForm|string|表单的lay-filter值|是|
|valueKey|string|接口返回的数据渲染到option的value属性的值|是|
|nameKey|string|接口返回的数据渲染到option的innerText的值|是|
|selectedValue|string|选中的默认值|否|
|onInit|function|渲染时触发回调|否|
|onSelect|function|选择时触发回调|否|

事件

onInit：渲染或更新时触发事件

|名称|类型|描述|
|-|-|-|
|selectedValue|string|选中的默认值，空字符串时，不触发数据加载|

onSelect：选择时触发事件

|名称|类型|描述|
|-|-|-|
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|option|dom|选中的option|


## 下拉联动

### 下拉多级地区联动

> 树形结构，下拉联动需要配合dom实现

html

```html
<div class="layui-row" style="margin-top: 10px;">
    <span class="search-item-key">户籍地</span>
    <div class="layui-inline layui-form search-item ">
        <select id="registerArea0" name="registerArea0" lay-filter="registerArea0Select"></select>
    </div>
    <div class="layui-inline layui-form search-item ">
        <select id="registerArea1" name="registerArea1" lay-filter="registerArea1Select"></select>
    </div>
    <div class="layui-inline layui-form search-item ">
        <select id="registerArea2" name="registerArea2" lay-filter="registerArea2Select"></select>
    </div>
    <div class="layui-inline layui-form search-item ">
        <select id="registerArea3" name="registerArea3" lay-filter="registerArea3Select"></select>
    </div>
    <div class="layui-inline layui-form search-item ">
        <select id="registerArea4" name="registerArea4" lay-filter="registerArea4Select"></select>
    </div>
</div>
```

`<select>` 的 **id**、**name** 需要相同，下标从**0**开始，**lay-filter** 为 **id** 值 + **Select**。
固定写法，下标递增

```js
layuiUtil.selectLinkageArea({
    baseRootId: 0,
    selectId: 'registerArea',
    optionDataKeyArray: ['areaCode'],
    onSelect: function(data, option, index) {
        var value = data.value;
        // 删除元素
        selectedRegisterAreaArray.splice(index, 5 - index);
        if(value) {
            selectedRegisterAreaArray[index] = option.innerText;
        }
    }
});
```

参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|baseRootId|string|第一个下拉框的根节点ID|是|
|selectId|string|select的ID（不包含下标）|是|
|optionDataKeyArray|array|需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标|否|
|onSelect|function|选择事件|是|

事件

onSelect：选择时触发事件

|名称|类型|描述|
|-|-|-|
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|option|dom|选中的option|
|index|number|select下标|



## 上传

### 上传图片

> 已上传头像为例，**avatar** 需要前后一致

html

```html
<div id="avatarBox" class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <button type="button" class="layui-btn layui-upload-file-btn" id="avatarUploadBtn">上传头像</button>
    <div class="upload-image-box">
        <input type="hidden" id="avatar" name="avatar">
        <div class="layui-btn-container" id="avatarFileBox"></div>
    </div>
</div>
```

js

```js
layuiUtil.initUploadImage({
    fieldName: 'avatar',
    maxCount: 6,
    isShow: false,
    allowExts: [],
    acceptMime: []
})
```

参数
|名称|类型|描述|是否必填|默认|
|-|-|-|-|-|
|maxCount|int|最大数量|否|9|
|fieldName|string|字段名称|是||
|isShow|boolean|是否展示（不能上报、删除）|是||
|allowExts|array|允许的后缀|否|'jpg', 'png', 'gif', 'bmp', 'jpeg'|
|acceptMime|array|文件选择支持的类型|否|'image/*'|

事件

onInit：渲染或更新时触发事件

|名称|类型|描述|
|-|-|-|
|selectedValue|string|选中的默认值，空字符串时，不触发数据加载|

onSelect：选择时触发事件

|名称|类型|描述|
|-|-|-|
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|option|dom|选中的option|

### 上传视频

html

```html
<div id="videoBox" class="layui-form-item">
    <label class="layui-form-label">视频</label>
    <button type="button" class="layui-btn layui-upload-file-btn" id="videoUploadBtn">上传视频</button>
    <div class="upload-image-box">
        <input type="hidden" id="video" name="video">
        <div class="layui-btn-container" id="videoFileBox"></div>
    </div>
</div>
```

js

```js
layuiUtil.initUploadVideo({
    fieldName: 'video',
    maxCount: 1,
    isShow: false,
    allowExts: [],
    acceptMime: []
})
```

参数
|名称|类型|描述|是否必填|默认|
|-|-|-|-|-|
|maxCount|int|最大数量|否|1|
|fieldName|string|字段名称|是||
|isShow|boolean|是否展示（不能上报、删除）|是||
|allowExts|array|允许的后缀|否|'mp4'|
|acceptMime|array|文件选择支持的类型|否|'video/mp4'|

### 上传音频

html

```html
<div id="audioBox" class="layui-form-item">
    <label class="layui-form-label">音频</label>
    <button type="button" class="layui-btn layui-upload-file-btn" id="audioUploadBtn">上传音频</button>
    <div class="upload-image-box">
        <input type="hidden" id="audio" name="audio">
        <div class="layui-btn-container" id="audioFileBox"></div>
    </div>
</div>
```

js

```js
layuiUtil.initUploadAudio({
    fieldName: 'audio',
    maxCount: 1,
    isShow: false,
    allowExts: [],
    acceptMime: []
})
```

参数
|名称|类型|描述|是否必填|默认|
|-|-|-|-|-|
|maxCount|int|最大数量|否|1|
|fieldName|string|字段名称|是||
|isShow|boolean|是否展示（不能上报、删除）|是||
|allowExts|array|允许的后缀|否|'wav', 'mp3'|
|acceptMime|array|文件选择支持的类型|否|'audio/wav', 'audio/mp3'|

### 上传附件

html

```html
<div id="fileBox" class="layui-form-item">
    <label class="layui-form-label">附件</label>
    <button type="button" class="layui-btn layui-upload-file-btn" id="fileUploadBtn">上传附件</button>
    <div class="upload-image-box">
        <input type="hidden" id="file" name="file">
        <div class="layui-btn-container" id="fileFileBox"></div>
    </div>
</div>
```

js

```js
layuiUtil.initUploadFile({
    fieldName: 'file',
    maxCount: 3,
    isShow: false,
    allowExts: [],
    acceptMime: [],
    onFileClick: function(fileId) {}
})
```

参数
|名称|类型|描述|是否必填|默认|
|-|-|-|-|-|
|maxCount|int|最大数量|否|9|
|fieldName|string|字段名称|是||
|isShow|boolean|是否展示（不能上报、删除）|是||
|allowExts|array|允许的后缀|否|'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'|
|acceptMime|array|文件选择支持的类型|否|'application/pdf'等|
|onFileClick|function|文件点击事件|否|下载文件|

事件

onFileClick：文件点击事件

|名称|类型|描述|
|-|-|-|
|fileId|string|点击的文件ID|