This commit is contained in:
wanggeng 2022-08-15 15:17:10 +08:00
parent 8a1664ebf6
commit 01328e7121
137 changed files with 2258 additions and 146 deletions

View File

@ -34,9 +34,11 @@ module.exports = {
children: [
'/code-template/area-select',
'/code-template/excel-upload',
'/code-template/layui-input-tree',
'/code-template/select',
'/code-template/list-select',
'/code-template/layui-util'
'/code-template/layui-util',
'/code-template/user-select',
],
}
]

20
docs/.vuepress/dist/404.html vendored Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/6.19a486e1.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/2.3324ea8d.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/" class="router-link-active">
Take me home.
</a></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/6.19a486e1.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

After

Width:  |  Height:  |  Size: 216 B

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{432:function(t,s,e){"use strict";e.r(s);var n=e(62),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"后端规范"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#后端规范"}},[this._v("#")]),this._v(" 后端规范")])])}),[],!1,null,null,null);s.default=r.exports}}]);

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{388:function(t,e,n){},415:function(t,e,n){"use strict";n(388)},433:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(415),n(62)),p=Object(r.a)(i,void 0,void 0,!1,null,"75bf6e19",null);e.default=p.exports}}]);

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{389:function(t,e,c){},416:function(t,e,c){"use strict";c(389)},420:function(t,e,c){"use strict";c.r(e);var n={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},a=(c(416),c(62)),i=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"05cc8c14",null);e.default=i.exports}}]);

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{390:function(e,t,a){},417:function(e,t,a){"use strict";a(390)},421:function(e,t,a){"use strict";a.r(t);a(90),a(41),a(10),a(120),a(121);var o={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},c=(a(417),a(62)),n=Object(c.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){return a("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"65dbc432",null);t.default=n.exports}}]);

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{419:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(62),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{422:function(t,e,n){"use strict";n.r(e);var s=n(62),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>地区选择 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/8.7dc718e0.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" aria-current="page" class="active sidebar-link">地区选择</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/area-select.html#表单" class="sidebar-link">表单</a></li><li class="sidebar-sub-header"><a href="/code-template/area-select.html#列表代码" class="sidebar-link">列表代码</a></li><li class="sidebar-sub-header"><a href="/code-template/area-select.html#事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传(导入)</a></li><li><a href="/code-template/select.html" class="sidebar-link">下拉选择</a></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" class="sidebar-link">layui工具</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="地区选择"><a href="#地区选择" class="header-anchor">#</a> 地区选择</h1> <blockquote><p>注意匹配ID</p></blockquote> <h2 id="表单"><a href="#表单" class="header-anchor">#</a> 表单</h2> <p>css</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.select-area</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.select-area #areaName</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 64%<span class="token punctuation">}</span>
<span class="token selector">.select-area .select-btn</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 36%<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.select-area .select-btn button</span> <span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> 38px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div><p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label layui-form-label-up<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选择地区<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block layui-input-block-down select-area<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaCode<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaCode<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择地区<span class="token punctuation">&quot;</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>255<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-group select-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaSelectBtn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm layui-btn-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择区域<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-circle-thin<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaCleanBtn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm layui-btn-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>删除区域<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-times-circle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="列表代码"><a href="#列表代码" class="header-anchor">#</a> 列表代码</h2> <p>css</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.table-select-area</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.table-select-area #areaName</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 64%<span class="token punctuation">}</span>
<span class="token selector">.table-select-area .select-btn</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 36%<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-inline table-select-area<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaCode<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input search-item search-item-width-300<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择地区<span class="token punctuation">&quot;</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-group select-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaSelectBtn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm layui-btn-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择区域<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-circle-thin<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>areaCleanBtn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm layui-btn-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>删除区域<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-times-circle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaSelectBtn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'选择地区'</span><span class="token punctuation">,</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'route/area/get-select?areaName={areaName}'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token function">encodeURI</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'600px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'225px'</span><span class="token punctuation">,</span>
<span class="token function-variable function">onClose</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> selectedAreaArray <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>selectedAreaArray<span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>selectedAreaArray<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> areaCode <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> areaName <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
areaCode <span class="token operator">=</span> selectedAreaArray<span class="token punctuation">[</span>selectedAreaArray<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>areaCode<span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> item<span class="token punctuation">;</span> item <span class="token operator">=</span> selectedAreaArray<span class="token punctuation">[</span>i<span class="token operator">++</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>areaName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
areaName <span class="token operator">+=</span> <span class="token string">' / '</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
areaName <span class="token operator">+=</span> item<span class="token punctuation">.</span>areaName<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaCode'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>areaCode<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>areaName<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaCleanBtn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaCode'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#areaName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/service/oa/app.html" class="prev">
APP业务
</a></span> <span class="next"><a href="/code-template/excel-upload.html">
EasyExcel 上传(导入)
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/8.7dc718e0.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>EasyExcel 上传(导入) | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/9.07f1828d.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" aria-current="page" class="active sidebar-link">EasyExcel 上传(导入)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#excel实体类" class="sidebar-link">Excel实体类</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#错误试题类" class="sidebar-link">错误试题类</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#监听器" class="sidebar-link">监听器</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#导入代码" class="sidebar-link">导入代码</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#controller-层" class="sidebar-link">controller 层</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#service-层" class="sidebar-link">service 层</a></li></ul></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#模板下载接口" class="sidebar-link">模板下载接口</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#列表导入按钮" class="sidebar-link">列表导入按钮</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#列表导入事件" class="sidebar-link">列表导入事件</a></li><li class="sidebar-sub-header"><a href="/code-template/excel-upload.html#导入页面代码" class="sidebar-link">导入页面代码</a></li></ul></li><li><a href="/code-template/select.html" class="sidebar-link">下拉选择</a></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" class="sidebar-link">layui工具</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="easyexcel-上传-导入"><a href="#easyexcel-上传-导入" class="header-anchor">#</a> EasyExcel 上传(导入)</h1> <p>以人口Population导入为例</p> <ol><li><p>包含 <strong>Excel实体类</strong><strong>错误实体类</strong><strong>导入监听器</strong>,其中 <strong>错误实体类</strong> 非必须。</p></li> <li><p>如果不需要返回错误,可忽略输出错误文件的代码。</p></li></ol> <h2 id="excel实体类"><a href="#excel实体类" class="header-anchor">#</a> Excel实体类</h2> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">import</span> <span class="token import"><span class="token namespace">com<span class="token punctuation">.</span>alibaba<span class="token punctuation">.</span>excel<span class="token punctuation">.</span>annotation<span class="token punctuation">.</span></span><span class="token class-name">ExcelProperty</span></span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">PopulationExcel</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> name<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> idCard<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> areaCode<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> homeAddress<span class="token punctuation">;</span>
<span class="token comment">// get set</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="错误试题类"><a href="#错误试题类" class="header-anchor">#</a> 错误试题类</h2> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">import</span> <span class="token import"><span class="token namespace">com<span class="token punctuation">.</span>alibaba<span class="token punctuation">.</span>excel<span class="token punctuation">.</span>annotation<span class="token punctuation">.</span></span><span class="token class-name">ExcelProperty</span></span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">PopulationExcelError</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> name<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> idCard<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> areaCode<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> homeAddress<span class="token punctuation">;</span>
<span class="token annotation punctuation">@ExcelProperty</span><span class="token punctuation">(</span>index <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> reason<span class="token punctuation">;</span>
<span class="token comment">// get set</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="监听器"><a href="#监听器" class="header-anchor">#</a> 监听器</h2> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">import</span> <span class="token import"><span class="token namespace">com<span class="token punctuation">.</span>alibaba<span class="token punctuation">.</span>excel<span class="token punctuation">.</span>context<span class="token punctuation">.</span></span><span class="token class-name">AnalysisContext</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">com<span class="token punctuation">.</span>alibaba<span class="token punctuation">.</span>excel<span class="token punctuation">.</span>event<span class="token punctuation">.</span></span><span class="token class-name">AnalysisEventListener</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">ArrayList</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">List</span></span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">PopulationExcelListener</span> <span class="token keyword">extends</span> <span class="token class-name">AnalysisEventListener</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcel</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">Integer</span> MAX_READ_COUNT <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcel</span><span class="token punctuation">&gt;</span></span> populationExcels <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">invoke</span><span class="token punctuation">(</span><span class="token class-name">PopulationExcel</span> populationExcel<span class="token punctuation">,</span> <span class="token class-name">AnalysisContext</span> analysisContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>populationExcels<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> MAX_READ_COUNT<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 超过读取最大量,执行保存,</span>
<span class="token function">handle</span><span class="token punctuation">(</span>populationExcels<span class="token punctuation">)</span><span class="token punctuation">;</span>
populationExcels<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 未达到读取最大量,继续读取</span>
populationExcels<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>populationExcel<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">doAfterAllAnalysed</span><span class="token punctuation">(</span><span class="token class-name">AnalysisContext</span> analysisContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">handle</span><span class="token punctuation">(</span>populationExcels<span class="token punctuation">)</span><span class="token punctuation">;</span>
populationExcels<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 处理
*
* @param rows
*/</span>
<span class="token keyword">public</span> <span class="token keyword">abstract</span> <span class="token keyword">void</span> <span class="token function">handle</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcel</span><span class="token punctuation">&gt;</span></span> rows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="导入代码"><a href="#导入代码" class="header-anchor">#</a> 导入代码</h2> <h3 id="controller-层"><a href="#controller-层" class="header-anchor">#</a> controller 层</h3> <div class="language-java extra-class"><pre class="language-java"><code><span class="token annotation punctuation">@ApiOperation</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token string">&quot;试题Excel&quot;</span><span class="token punctuation">,</span> notes <span class="token operator">=</span> <span class="token string">&quot;试题Excel接口&quot;</span><span class="token punctuation">)</span>
<span class="token annotation punctuation">@ApiImplicitParams</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token annotation punctuation">@ApiImplicitParam</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">&quot;excel&quot;</span><span class="token punctuation">,</span> value <span class="token operator">=</span> <span class="token string">&quot;文件名称&quot;</span><span class="token punctuation">,</span> paramType <span class="token operator">=</span> <span class="token string">&quot;form&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token annotation punctuation">@ApiResponses</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token annotation punctuation">@ApiResponse</span><span class="token punctuation">(</span>code <span class="token operator">=</span> <span class="token number">400</span><span class="token punctuation">,</span> message <span class="token operator">=</span> <span class="token string">&quot;请求失败&quot;</span><span class="token punctuation">,</span> response <span class="token operator">=</span> <span class="token class-name">ErrorResult</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token annotation punctuation">@PostMapping</span><span class="token punctuation">(</span><span class="token string">&quot;import-excel&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token class-name">UploadExcelResultDTO</span> <span class="token function">importExcel</span><span class="token punctuation">(</span><span class="token class-name">MultipartFile</span> excel<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name">Objects</span><span class="token punctuation">.</span><span class="token function">isNull</span><span class="token punctuation">(</span>excel<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">ParamsException</span><span class="token punctuation">(</span><span class="token string">&quot;Excel不能为空&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 判断后缀</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>excel<span class="token punctuation">.</span><span class="token function">getOriginalFilename</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token class-name">IFileConstant</span><span class="token punctuation">.</span>EXCEL_SUFFIX_XLS<span class="token punctuation">)</span>
<span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>excel<span class="token punctuation">.</span><span class="token function">getOriginalFilename</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token class-name">IFileConstant</span><span class="token punctuation">.</span>EXCEL_SUFFIX_XLSX<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">ParamsException</span><span class="token punctuation">(</span><span class="token string">&quot;文件格式为Excel&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> populationService<span class="token punctuation">.</span><span class="token function">importExcel</span><span class="token punctuation">(</span>excel<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="service-层"><a href="#service-层" class="header-anchor">#</a> service 层</h3> <div class="language-java extra-class"><pre class="language-java"><code><span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UploadExcelResultDTO</span> <span class="token function">importExcel</span><span class="token punctuation">(</span><span class="token class-name">MultipartFile</span> excel<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
<span class="token comment">// 要输出的错误内容</span>
<span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcelError</span><span class="token punctuation">&gt;</span></span> populationExcelErrors <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">long</span> startTime <span class="token operator">=</span> <span class="token class-name">System</span><span class="token punctuation">.</span><span class="token function">currentTimeMillis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 读取 Excel</span>
<span class="token class-name">EasyExcel</span><span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>excel<span class="token punctuation">.</span><span class="token function">getInputStream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">PopulationExcel</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">PopulationExcelListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">handle</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcel</span><span class="token punctuation">&gt;</span></span> populationExcels<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 这里处理数据,一般是入库</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">headRowNumber</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sheet</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">doRead</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">long</span> endTime <span class="token operator">=</span> <span class="token class-name">System</span><span class="token punctuation">.</span><span class="token function">currentTimeMillis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 生成的错误文件ID下载时使用</span>
<span class="token class-name">String</span> excelFileId <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>populationExcelErrors<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
excelFileId <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AbstractErrorExcelHandler</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">PopulationExcelError</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span>fileService<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">List</span><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span><span class="token punctuation">&gt;</span></span> <span class="token function">excelHeaderNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 构建错误 Excel 标题,与错误类对应</span>
<span class="token keyword">return</span> <span class="token function">simpleExcelHeader</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">{</span><span class="token string">&quot;序号&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;姓名&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;身份证&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;错误原因&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">saveErrorExcel</span><span class="token punctuation">(</span>populationExcelErrors<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 返回实体类,</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">UploadExcelResultDTO</span><span class="token punctuation">(</span>populationExcelErrors<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> endTime <span class="token operator">-</span> startTime<span class="token punctuation">,</span> excelFileId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="模板下载接口"><a href="#模板下载接口" class="header-anchor">#</a> 模板下载接口</h2> <div class="language-java extra-class"><pre class="language-java"><code><span class="token annotation punctuation">@GetMapping</span><span class="token punctuation">(</span><span class="token string">&quot;upload/upload-excel-template&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">excelTemplate</span><span class="token punctuation">(</span><span class="token class-name">HttpServletResponse</span> response<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
<span class="token class-name">InputStream</span> inputStream <span class="token operator">=</span> <span class="token class-name">PopulationRouteController</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">.</span><span class="token function">getClassLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getResourceAsStream</span><span class="token punctuation">(</span><span class="token string">&quot;templates/population/upload/upload-excel-template.xls&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">RequestUtil</span><span class="token punctuation">.</span><span class="token function">download</span><span class="token punctuation">(</span>response<span class="token punctuation">,</span> inputStream<span class="token punctuation">,</span> <span class="token string">&quot;人口导入模板.xls&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="列表导入按钮"><a href="#列表导入按钮" class="header-anchor">#</a> 列表导入按钮</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadExcel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-lg fa-cloud-upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> 导入数据
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="列表导入事件"><a href="#列表导入事件" class="header-anchor">#</a> 列表导入事件</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'#uploadExcel'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'route/population/upload/upload-excel'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'导入人口数据'</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'196px'</span><span class="token punctuation">,</span>
<span class="token function-variable function">onClose</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">reloadTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="导入页面代码"><a href="#导入页面代码" class="header-anchor">#</a> 导入页面代码</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>th</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.thymeleaf.org<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>base</span> <span class="token attr-name"><span class="token namespace">th:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>${#request.getContextPath() + <span class="token punctuation">'</span>/<span class="token punctuation">'</span>}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge,chrome=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/fonts/font-awesome/css/font-awesome.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/css/layui.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/style/admin.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-anim layui-anim-fadein<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card-body<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-elem-quote<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>下载“下载模板”整理数据点击“导入数据”上传格式为xls或xlsx<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>blockquote</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>downloadFile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'route/population/upload/upload-excel-template'</span><span class="token punctuation">,</span> <span class="token string">'downloadTarget'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-lg fa-cloud-download<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> 下载模板
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadExcel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-lg fa-cloud-upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> 导入数据
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> none</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>downloadTarget<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/layui.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
layui<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'assets/layuiadmin/'</span> <span class="token comment">//静态资源所在路径</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token string">'lib/index'</span> <span class="token comment">//主入口模块</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">,</span> <span class="token string">'upload'</span><span class="token punctuation">,</span> <span class="token string">'common'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> $ <span class="token operator">=</span> layui<span class="token punctuation">.</span>$<span class="token punctuation">;</span>
<span class="token keyword">var</span> form <span class="token operator">=</span> layui<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
<span class="token keyword">var</span> common <span class="token operator">=</span> layui<span class="token punctuation">.</span>common<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">getFrameIndex</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 初始化Excel上传</span>
<span class="token keyword">function</span> <span class="token function">initExcelUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Excel上传</span>
<span class="token keyword">var</span> uploadLoading<span class="token punctuation">;</span>
layui<span class="token punctuation">.</span>upload<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">elem</span><span class="token operator">:</span> <span class="token string">'#uploadExcel'</span><span class="token punctuation">,</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'api/population/import-excel'</span><span class="token punctuation">,</span>
<span class="token literal-property property">accept</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
<span class="token literal-property property">exts</span><span class="token operator">:</span> <span class="token string">'xls|xlsx'</span><span class="token punctuation">,</span>
<span class="token literal-property property">field</span><span class="token operator">:</span> <span class="token string">'excel'</span><span class="token punctuation">,</span>
<span class="token function-variable function">before</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
uploadLoading <span class="token operator">=</span> layer<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span><span class="token string">'正在上传,请稍后...'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">shade</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">done</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
layer<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>uploadLoading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>failedCount <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
layer<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">closeBtn</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">shadeClose</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">skin</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'&lt;div style=&quot;padding: 15px;&quot;&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div&gt;失败数量:'</span><span class="token operator">+</span> data<span class="token punctuation">.</span>failedCount <span class="token operator">+</span><span class="token string">'&lt;/div&gt;&lt;br/&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div&gt;&lt;a class=&quot;error-excel&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;window.open(\'route/file/download/false/'</span><span class="token operator">+</span> data<span class="token punctuation">.</span>errorExcel <span class="token operator">+</span><span class="token string">'\');&quot; target=&quot;downloadTarget&quot;&gt;点击下载错误信息&lt;/a&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;/div&gt;'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
layer<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span><span class="token string">'导入成功'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
layer<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>uploadLoading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>data <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">initExcelUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.close'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/code-template/area-select.html" class="prev">
地区选择
</a></span> <span class="next"><a href="/code-template/select.html">
下拉选择
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/9.07f1828d.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>layui工具 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/10.1698a97b.js" as="script"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传(导入)</a></li><li><a href="/code-template/select.html" class="sidebar-link">下拉选择</a></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" aria-current="page" class="active sidebar-link">layui工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#表单" class="sidebar-link">表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#构建下拉列表" class="sidebar-link">构建下拉列表</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#构建数据字典" class="sidebar-link">构建数据字典</a></li></ul></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传" class="sidebar-link">上传</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传图片" class="sidebar-link">上传图片</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传视频" class="sidebar-link">上传视频</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传音频" class="sidebar-link">上传音频</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传附件" class="sidebar-link">上传附件</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="layui工具"><a href="#layui工具" class="header-anchor">#</a> layui工具</h1> <p>layui需要引入 <strong>upload</strong> 模块</p> <p>引入依赖:</p> <p>css</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/js/vendor/viewer/viewer.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/css/layui-util.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/js/vendor/viewer/viewer.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/js/layui-util.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>初始化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> layuiUtil <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LayuiUtil</span><span class="token punctuation">(</span>layui<span class="token punctuation">,</span> Viewer <span class="token operator">?</span> Viewer <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="表单"><a href="#表单" class="header-anchor">#</a> 表单</h2> <h3 id="构建下拉列表"><a href="#构建下拉列表" class="header-anchor">#</a> 构建下拉列表</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>最高学历<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>highestEducationName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>highestEducationName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>highestEducationIdBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">domId</span><span class="token operator">:</span> <span class="token string">'xxxIdBox'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xxxId'</span><span class="token punctuation">,</span>
<span class="token literal-property property">dataForm</span><span class="token operator">:</span> <span class="token string">'dataForm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">valueKey</span><span class="token operator">:</span> <span class="token string">'dataId'</span><span class="token punctuation">,</span>
<span class="token literal-property property">nameKey</span><span class="token operator">:</span> <span class="token string">'dataName'</span><span class="token punctuation">,</span>
<span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> option</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> optionValue <span class="token operator">=</span> option<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">var</span> optionText <span class="token operator">=</span> option<span class="token punctuation">.</span>innerText<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="构建数据字典"><a href="#构建数据字典" class="header-anchor">#</a> 构建数据字典</h3> <p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">selectData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">parentId</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token literal-property property">domId</span><span class="token operator">:</span> <span class="token string">'xxxIdBox'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xxxId'</span><span class="token punctuation">,</span>
<span class="token literal-property property">dataForm</span><span class="token operator">:</span> <span class="token string">'dataForm'</span><span class="token punctuation">,</span>
<span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> option</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#highestEducationName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>option<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th></tr></thead> <tbody><tr><td>url</td> <td>string</td> <td>请求地址</td> <td></td></tr> <tr><td>domId</td> <td>string</td> <td>加载下拉的div</td> <td></td></tr> <tr><td>name</td> <td>string</td> <td>select的ID与NAME属性值</td> <td></td></tr> <tr><td>dataForm</td> <td>string</td> <td>表单的lay-filter值</td> <td></td></tr> <tr><td>valueKey</td> <td>string</td> <td>接口返回的数据渲染到option的value属性的值</td> <td></td></tr> <tr><td>nameKey</td> <td>string</td> <td>接口返回的数据渲染到option的innerText的值</td> <td></td></tr> <tr><td>selectedValue</td> <td>string</td> <td>选中的默认值</td> <td></td></tr> <tr><td>onInit</td> <td>function</td> <td>渲染时触发回调</td> <td></td></tr> <tr><td>onSelect</td> <td>function</td> <td>选择时触发回调</td> <td></td></tr></tbody></table> <p>事件</p> <p>onInit渲染或更新时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>selectedValue</td> <td>string</td> <td>选中的默认值,空字符串时,不触发数据加载</td></tr></tbody></table> <p>onSelect选择时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>data</td> <td>obj</td> <td>选择的option数据包含原始DOM美化后的DOM选中的值</td></tr> <tr><td>option</td> <td>dom</td> <td>选中的option</td></tr></tbody></table> <h2 id="上传"><a href="#上传" class="header-anchor">#</a> 上传</h2> <h3 id="上传图片"><a href="#上传图片" class="header-anchor">#</a> 上传图片</h3> <blockquote><p>已上传头像为例,<strong>avatar</strong> 需要前后一致</p></blockquote> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatarBox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>头像<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-upload-file-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatarUploadBtn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传头像<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-image-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-container<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatarFileBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td></td> <td>9</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td></td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示(不能上报、删除)</td> <td></td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td></td> <td>'jpg', 'png', 'gif', 'bmp', 'jpeg'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td></td> <td>'image/*'</td></tr></tbody></table> <p>事件</p> <p>onInit渲染或更新时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>selectedValue</td> <td>string</td> <td>选中的默认值,空字符串时,不触发数据加载</td></tr></tbody></table> <p>onSelect选择时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>data</td> <td>obj</td> <td>选择的option数据包含原始DOM美化后的DOM选中的值</td></tr> <tr><td>option</td> <td>dom</td> <td>选中的option</td></tr></tbody></table> <h3 id="上传视频"><a href="#上传视频" class="header-anchor">#</a> 上传视频</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>videoBox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>视频<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-upload-file-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>videoUploadBtn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传视频<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-image-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-container<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>videoFileBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadVideo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'video'</span><span class="token punctuation">,</span>
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td></td> <td>1</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td></td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示(不能上报、删除)</td> <td></td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td></td> <td>'mp4'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td></td> <td>'video/mp4'</td></tr></tbody></table> <h3 id="上传音频"><a href="#上传音频" class="header-anchor">#</a> 上传音频</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audioBox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>音频<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-upload-file-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audioUploadBtn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传音频<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-image-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-container<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audioFileBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadAudio</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'audio'</span><span class="token punctuation">,</span>
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td></td> <td>1</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td></td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示(不能上报、删除)</td> <td></td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td></td> <td>'wav', 'mp3'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td></td> <td>'audio/wav', 'audio/mp3'</td></tr></tbody></table> <h3 id="上传附件"><a href="#上传附件" class="header-anchor">#</a> 上传附件</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileBox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>附件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-upload-file-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileUploadBtn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上传附件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-image-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hidden<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn-container<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fileFileBox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token function-variable function">onFileClick</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">fileId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td></td> <td>9</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td></td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示(不能上报、删除)</td> <td></td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td></td> <td>'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td></td> <td>'application/pdf'等</td></tr> <tr><td>onFileClick</td> <td>function</td> <td>文件点击事件</td> <td></td> <td>下载文件</td></tr></tbody></table> <p>事件</p> <p>onFileClick文件点击事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>fileId</td> <td>string</td> <td>点击的文件ID</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/code-template/list-select.html" class="prev">
列表选择
</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/10.1698a97b.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>列表选择 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/11.24b85a91.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传(导入)</a></li><li><a href="/code-template/select.html" class="sidebar-link">下拉选择</a></li><li><a href="/code-template/list-select.html" aria-current="page" class="active sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" class="sidebar-link">layui工具</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="列表选择"><a href="#列表选择" class="header-anchor">#</a> 列表选择</h1> <blockquote><p>以用户选择为例</p></blockquote> <ol><li>页面通过弹窗打开</li> <li>页面支持单选与多选</li> <li>页面关闭后返回选择结果</li></ol> <p>完整选择页面代码代码</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>th</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.thymeleaf.org<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>base</span> <span class="token attr-name"><span class="token namespace">th:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>${#request.getContextPath() + <span class="token punctuation">'</span>/<span class="token punctuation">'</span>}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge,chrome=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/fonts/font-awesome/css/font-awesome.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/js/vendor/viewer/viewer.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/css/layui.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/style/admin.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-anim layui-anim-fadein<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-col-md12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card-body<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test-table-reload-btn<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-inline<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>keywords<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input search-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>输入用户名、昵称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fa fa-lg fa-search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span> 搜索
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 确定按钮 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-sm layui-btn-normal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 确定按钮 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-hide<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataTable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataTable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/layui.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name"><span class="token namespace">th:</span>inline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
layui<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'assets/layuiadmin/'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token string">'lib/index'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">,</span> <span class="token string">'table'</span><span class="token punctuation">,</span> <span class="token string">'laydate'</span><span class="token punctuation">,</span> <span class="token string">'upload'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> $ <span class="token operator">=</span> layui<span class="token punctuation">.</span>$<span class="token punctuation">;</span>
<span class="token keyword">var</span> $win <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> table <span class="token operator">=</span> layui<span class="token punctuation">.</span>table<span class="token punctuation">;</span>
<span class="token keyword">var</span> admin <span class="token operator">=</span> layui<span class="token punctuation">.</span>admin<span class="token punctuation">;</span>
<span class="token keyword">var</span> layer <span class="token operator">=</span> layui<span class="token punctuation">.</span>layer<span class="token punctuation">;</span>
<span class="token keyword">var</span> laydate <span class="token operator">=</span> layui<span class="token punctuation">.</span>laydate<span class="token punctuation">;</span>
<span class="token keyword">var</span> selectType <span class="token operator">=</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">params</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">.</span>selectType<span class="token punctuation">;</span>
selectType <span class="token operator">=</span> selectType <span class="token operator">?</span> selectType <span class="token operator">:</span> <span class="token string">'radio'</span><span class="token punctuation">;</span>
<span class="token comment">// 已经选择的列表</span>
<span class="token keyword">var</span> selectedIdArray <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>selectedIdArray <span class="token operator">?</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>selectedIdArray <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 将新的选择列表置空</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>newSelectedArray <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token comment">// 正在选择</span>
<span class="token keyword">var</span> selectMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> tableData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> tableUrl <span class="token operator">=</span> <span class="token string">'api/teacher/listpage-user-unselected'</span><span class="token punctuation">;</span>
<span class="token comment">// 初始化已选择的列表</span>
<span class="token keyword">function</span> <span class="token function">initSelectMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> item<span class="token punctuation">;</span> item <span class="token operator">=</span> selectedIdArray<span class="token punctuation">[</span>i<span class="token operator">++</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
selectMap<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">userId</span><span class="token operator">:</span> item
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">initSelectMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 初始化表格</span>
<span class="token keyword">function</span> <span class="token function">initTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 设置选择类型</span>
$<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>table<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">checkName</span><span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
table<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">elem</span><span class="token operator">:</span> <span class="token string">'#dataTable'</span><span class="token punctuation">,</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'dataTable'</span><span class="token punctuation">,</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span>tableUrl<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> admin<span class="token punctuation">.</span><span class="token function">screen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'100%'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> $win<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60</span><span class="token punctuation">,</span>
<span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token literal-property property">limits</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">toolbar</span><span class="token operator">:</span> <span class="token string">'#headerToolBar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">pageName</span><span class="token operator">:</span> <span class="token string">'page'</span><span class="token punctuation">,</span>
<span class="token literal-property property">limitName</span><span class="token operator">:</span> <span class="token string">'rows'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">cols</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> selectType<span class="token punctuation">,</span> <span class="token literal-property property">fixed</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">field</span><span class="token operator">:</span><span class="token string">'rowNum'</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">80</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'序号'</span><span class="token punctuation">,</span> <span class="token literal-property property">fixed</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span><span class="token string">'center'</span><span class="token punctuation">,</span> <span class="token literal-property property">templet</span><span class="token operator">:</span> <span class="token string">'&lt;span&gt;{{d.LAY_INDEX}}&lt;/span&gt;'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">field</span><span class="token operator">:</span><span class="token string">'userUsername'</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">140</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'用户名'</span><span class="token punctuation">,</span> <span class="token literal-property property">sort</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span><span class="token string">'center'</span><span class="token punctuation">,</span>
<span class="token function-variable function">templet</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">rowData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'&lt;a href=&quot;javascript:void(0);&quot; lay-event=&quot;userUsernameEvent&quot;&gt;'</span><span class="token operator">+</span> rowData<span class="token punctuation">.</span>userUsername <span class="token operator">+</span><span class="token string">'&lt;/a&gt;'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">field</span><span class="token operator">:</span><span class="token string">'userName'</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">140</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'昵称'</span><span class="token punctuation">,</span> <span class="token literal-property property">sort</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span><span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function-variable function">parseData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 默认勾选</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> item<span class="token punctuation">;</span> item <span class="token operator">=</span> data<span class="token punctuation">.</span>rows<span class="token punctuation">[</span>i<span class="token operator">++</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>selectMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>userId<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
item<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token comment">// 重新赋值:在打开界面后直接确定关闭页面时回显正常</span>
selectMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>userId<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
item<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
tableData <span class="token operator">=</span> data<span class="token punctuation">.</span>rows<span class="token punctuation">;</span>
<span class="token comment">// 默认勾选</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token string-property property">'code'</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string-property property">'msg'</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token string-property property">'count'</span><span class="token operator">:</span> data<span class="token punctuation">.</span>total<span class="token punctuation">,</span>
<span class="token string-property property">'data'</span><span class="token operator">:</span> data<span class="token punctuation">.</span>rows
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 重载表格</span>
<span class="token keyword">function</span> <span class="token function">reloadTable</span><span class="token punctuation">(</span><span class="token parameter">currentPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
table<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token string">'dataTable'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span>tableUrl<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">where</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">keywords</span><span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#keywords'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">curr</span><span class="token operator">:</span> currentPage
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">initTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 关闭</span>
<span class="token keyword">function</span> <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">getFrameIndex</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 清空选择
*/</span>
<span class="token keyword">function</span> <span class="token function">clearSelect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
selectMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 添加选择
* @param item
*/</span>
<span class="token keyword">function</span> <span class="token function">addSelect</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
selectMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>userId<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 删除选择
* @param item
*/</span>
<span class="token keyword">function</span> <span class="token function">removeSelect</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">delete</span> selectMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>userId<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 勾选事件</span>
table<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'checkbox(dataTable)'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'all'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 添加全部</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> item<span class="token punctuation">;</span> item <span class="token operator">=</span> tableData<span class="token punctuation">[</span>i<span class="token operator">++</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">addSelect</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除全部</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> item<span class="token punctuation">;</span> item <span class="token operator">=</span> tableData<span class="token punctuation">[</span>i<span class="token operator">++</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">removeSelect</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">addSelect</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">removeSelect</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 勾选事件</span>
table<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'radio(dataTable)'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">clearSelect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">addSelect</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 事件 - 确定</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'#confirm'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>newSelectedArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> key <span class="token keyword">in</span> selectMap<span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>newSelectedArray<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>selectMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 事件 - 搜索</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'#search'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">reloadTable</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>打开页面</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 已经选择的ID列表</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>selectedIdArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userId'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// 打开页面,指定选择框类型</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'route/teacher/list-user-unselected?selectType=radio'</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'选择用户'</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'1000px'</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'500px'</span><span class="token punctuation">,</span>
<span class="token function-variable function">onClose</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 获取选择后的列表</span>
<span class="token keyword">var</span> newSelectedArray <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span>dialogData<span class="token punctuation">.</span>newSelectedArray<span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>newSelectedArray <span class="token operator">&amp;&amp;</span> newSelectedArray<span class="token punctuation">.</span>length <span class="token operator">!=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 处理选择结果</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userId'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>newSelectedArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#userName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>newSelectedArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>userName<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/code-template/select.html" class="prev">
下拉选择
</a></span> <span class="next"><a href="/code-template/layui-util.html">
layui工具
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/11.24b85a91.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>单选 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/12.194e06f2.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>代码模板</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="单选"><a href="#单选" class="header-anchor">#</a> 单选</h1> <h2 id="静态单选"><a href="#静态单选" class="header-anchor">#</a> 静态单选</h2> <p>表单</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">pane</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>单选框<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/12.194e06f2.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>下拉选择 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/13.128ee0cc.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传(导入)</a></li><li><a href="/code-template/select.html" aria-current="page" class="active sidebar-link">下拉选择</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/select.html#静态选择" class="sidebar-link">静态选择</a></li><li class="sidebar-sub-header"><a href="/code-template/select.html#基于jquery的动态选择" class="sidebar-link">基于JQuery的动态选择</a></li></ul></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" class="sidebar-link">layui工具</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="下拉选择"><a href="#下拉选择" class="header-anchor">#</a> 下拉选择</h1> <h2 id="静态选择"><a href="#静态选择" class="header-anchor">#</a> 静态选择</h2> <p>表单</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectorSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选择类型<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>类型1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>类型2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>列表</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-inline layui-form search-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>typeFilter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选择类型<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>类型1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>type2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>类型2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="基于jquery的动态选择"><a href="#基于jquery的动态选择" class="header-anchor">#</a> 基于JQuery的动态选择</h2> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectorSelect<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>js</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 初始化</span>
<span class="token keyword">function</span> <span class="token function">initSelect</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#selector'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;option value=&quot;&quot;&gt;请选择&lt;/option&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#selector'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;option value=&quot;+ item.dataName +&quot; '</span><span class="token operator">+</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'selected'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">'&gt;'</span><span class="token operator">+</span> item<span class="token punctuation">.</span>dataName <span class="token operator">+</span><span class="token string">'&lt;/option&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 渲染表单下拉框</span>
form<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'dataForm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
callback <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/code-template/excel-upload.html" class="prev">
EasyExcel 上传(导入)
</a></span> <span class="next"><a href="/code-template/list-select.html">
列表选择
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/13.128ee0cc.js" defer></script>
</body>
</html>

22
docs/.vuepress/dist/index.html vendored Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/7.9efeaebf.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="active sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>代码模板</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/service/oa/backend.html">
后台业务
</a>
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/7.9efeaebf.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,424 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>用户拓展 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/14.931aed60.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>代码模板</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="用户拓展"><a href="#用户拓展" class="header-anchor">#</a> 用户拓展</h1> <p>在用户现有字段基础上,自定义 <strong>拓展属性字段</strong>,新增拓展表,通过 <strong>user_id</strong> 字段关联用户。</p> <h2 id="创建实体类"><a href="#创建实体类" class="header-anchor">#</a> 创建实体类</h2> <p>实体类继承自 <code>ink.wgink.pojo.dtos.user.UserDTO</code></p> <div class="language-java extra-class"><pre class="language-java"><code>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>pojo<span class="token punctuation">.</span>dtos<span class="token punctuation">.</span>user<span class="token punctuation">.</span></span><span class="token class-name">UserDTO</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">io<span class="token punctuation">.</span>swagger<span class="token punctuation">.</span>annotations<span class="token punctuation">.</span></span><span class="token class-name">ApiModel</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">io<span class="token punctuation">.</span>swagger<span class="token punctuation">.</span>annotations<span class="token punctuation">.</span></span><span class="token class-name">ApiModelProperty</span></span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UserExpandDTO</span> <span class="token keyword">extends</span> <span class="token class-name">UserDTO</span> <span class="token punctuation">{</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> userExpandId<span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> title<span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> company<span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token class-name">String</span> summary<span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandDTO</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandDTO</span><span class="token punctuation">(</span><span class="token class-name">UserDTO</span> userDTO<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">setUserDTO</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setUserDTO</span><span class="token punctuation">(</span><span class="token class-name">UserDTO</span> userDTO<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserId</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserUsername</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserUsername</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserName</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserAvatar</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserAvatar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserEmail</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserLatitude</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserLatitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserExpiredDate</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserExpiredDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserLongitude</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserLongitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserPhone</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserPhone</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserState</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserType</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setUserUKey</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getUserUKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setDepartmentIds</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getDepartmentIds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setDepartmentNames</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getDepartmentNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setPositionIds</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getPositionIds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setPositionNames</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getPositionNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setRoleIds</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getRoleIds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setRoleNames</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getRoleNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setGmtCreate</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getGmtCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setLastLoginAddress</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getLastLoginAddress</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setLastLoginTime</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getLastLoginTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">setLoginType</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">.</span><span class="token function">getLoginType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="新建接口"><a href="#新建接口" class="header-anchor">#</a> 新建接口</h2> <p>实现或继承接口 <code>ink.wgink.interfaces.user.IUserExpandBaseService&lt;UserExpandDTO extends UserDTO&gt;</code></p> <p>可以直接实现,也可以通过接口继承</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>interfaces<span class="token punctuation">.</span>user<span class="token punctuation">.</span></span><span class="token class-name">IUserExpandBaseService</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">List</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Map</span></span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">interface</span> <span class="token class-name">IUserExpandService</span> <span class="token keyword">extends</span> <span class="token class-name">IUserExpandBaseService</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span>
<span class="token comment">/**
* 修改
*
* @param userId 用户ID
* @param userExpandVO 拓展属性
*/</span>
<span class="token keyword">void</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/**
* 修改
*
* @param token
* @param userExpandVO
* @throws Exception
*/</span>
<span class="token keyword">void</span> <span class="token function">updateByToken</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">Exception</span><span class="token punctuation">;</span>
<span class="token comment">/**
* 用户拓展详情
*
* @param params
* @return
*/</span>
<span class="token class-name">UserExpandPO</span> <span class="token function">getPO</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/**
* 用户拓展详情
*
* @param userId
* @return
*/</span>
<span class="token class-name">UserExpandPO</span> <span class="token function">getPO</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/**
* 用户拓展列表
*
* @param params
* @return
*/</span>
<span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandPO</span><span class="token punctuation">&gt;</span></span> <span class="token function">listPO</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/**
* 详情
*
* @param token
* @return
*/</span>
<span class="token class-name">UserExpandDTO</span> <span class="token function">getByToken</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">Exception</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="实现接口"><a href="#实现接口" class="header-anchor">#</a> 实现接口</h2> <p>当方法 <code>getRoute</code> 有返回值时,用户列表中会出现 <kbd>拓展属性</kbd> 按钮,用户通过点击按钮打开拓展属性的编辑页面。在编辑页面打开时,在 <code>window.location.href</code> 上会携带 <code>userId</code> 字段。</p> <p>为了保证唯一,在提交时,需判断用户是否已经有值。如果有值则修改,反之新增。</p> <p>示例代码中,没有完善的方法可根据情况自行处理。</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>interfaces<span class="token punctuation">.</span>user<span class="token punctuation">.</span></span><span class="token class-name">IUserBaseService</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>pojo<span class="token punctuation">.</span></span><span class="token class-name">ListPage</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>pojo<span class="token punctuation">.</span>dtos<span class="token punctuation">.</span>user<span class="token punctuation">.</span></span><span class="token class-name">UserDTO</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>pojo<span class="token punctuation">.</span>result<span class="token punctuation">.</span></span><span class="token class-name">SuccessResultList</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">ink<span class="token punctuation">.</span>wgink<span class="token punctuation">.</span>util<span class="token punctuation">.</span>map<span class="token punctuation">.</span></span><span class="token class-name">HashMapUtil</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">org<span class="token punctuation">.</span>apache<span class="token punctuation">.</span>commons<span class="token punctuation">.</span>lang3<span class="token punctuation">.</span></span><span class="token class-name">StringUtils</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>beans<span class="token punctuation">.</span>factory<span class="token punctuation">.</span>annotation<span class="token punctuation">.</span></span><span class="token class-name">Autowired</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>stereotype<span class="token punctuation">.</span></span><span class="token class-name">Service</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">List</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Map</span></span><span class="token punctuation">;</span>
<span class="token annotation punctuation">@Service</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UserExpandServiceImpl</span> <span class="token keyword">implements</span> <span class="token class-name">IUserExpandService</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> <span class="token class-name">IUserExpandDao</span> userExpandDao<span class="token punctuation">;</span>
<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> <span class="token class-name">IUserBaseService</span> userBaseService<span class="token punctuation">;</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">UserExpandPO</span> userExpandPO <span class="token operator">=</span> <span class="token function">getPO</span><span class="token punctuation">(</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>userExpandPO <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">updateInfo</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> userId<span class="token punctuation">,</span> userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">saveInfo</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> userId<span class="token punctuation">,</span> userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">updateByToken</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">Exception</span> <span class="token punctuation">{</span>
<span class="token class-name">String</span> userId <span class="token operator">=</span> securityComponent<span class="token punctuation">.</span><span class="token function">getAppTokenUser</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">UserExpandPO</span> userExpandPO <span class="token operator">=</span> <span class="token function">getPO</span><span class="token punctuation">(</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>userExpandPO <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">updateInfo</span><span class="token punctuation">(</span>token<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">saveInfo</span><span class="token punctuation">(</span>token<span class="token punctuation">,</span> userId<span class="token punctuation">,</span> userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 保存
*
* @param token
* @param userId
* @param userExpandVO
*/</span>
<span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">saveInfo</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">,</span> <span class="token class-name">String</span> userId<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params <span class="token operator">=</span> <span class="token class-name">HashMapUtil</span><span class="token punctuation">.</span><span class="token function">beanToMap</span><span class="token punctuation">(</span>userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
params<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">&quot;userId&quot;</span><span class="token punctuation">,</span> userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name">StringUtils</span><span class="token punctuation">.</span><span class="token function">isNotBlank</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">setAppSaveInfo</span><span class="token punctuation">(</span>token<span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">setSaveInfo</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
userExpandDao<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
* 修改
*
* @param token
* @param userId
* @param userExpandVO
*/</span>
<span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">updateInfo</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">,</span> <span class="token class-name">String</span> userId<span class="token punctuation">,</span> <span class="token class-name">UserExpandVO</span> userExpandVO<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params <span class="token operator">=</span> <span class="token class-name">HashMapUtil</span><span class="token punctuation">.</span><span class="token function">beanToMap</span><span class="token punctuation">(</span>userExpandVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
params<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">&quot;userId&quot;</span><span class="token punctuation">,</span> userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name">StringUtils</span><span class="token punctuation">.</span><span class="token function">isNotBlank</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">setAppUpdateInfo</span><span class="token punctuation">(</span>token<span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">setUpdateInfo</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
userExpandDao<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandPO</span> <span class="token function">getPO</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> userExpandDao<span class="token punctuation">.</span><span class="token function">getPO</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandPO</span> <span class="token function">getPO</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params <span class="token operator">=</span> <span class="token function">getHashMap</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
params<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">&quot;userId&quot;</span><span class="token punctuation">,</span> userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token function">getPO</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandPO</span><span class="token punctuation">&gt;</span></span> <span class="token function">listPO</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> userExpandDao<span class="token punctuation">.</span><span class="token function">listPO</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandDTO</span> <span class="token function">getByToken</span><span class="token punctuation">(</span><span class="token class-name">String</span> token<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">Exception</span> <span class="token punctuation">{</span>
<span class="token class-name">String</span> userId <span class="token operator">=</span> securityComponent<span class="token punctuation">.</span><span class="token function">getAppTokenUser</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token function">get</span><span class="token punctuation">(</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 编辑页面的路径,只有详情页</span>
<span class="token keyword">return</span> <span class="token string">&quot;route/userexpand/get.html&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">private</span> <span class="token class-name">UserExpandDTO</span> <span class="token function">getDTO</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> userExpandDao<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">private</span> <span class="token class-name">UserExpandDTO</span> <span class="token function">getDTO</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params <span class="token operator">=</span> <span class="token function">getHashMap</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
params<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">&quot;userId&quot;</span><span class="token punctuation">,</span> userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token function">getDTO</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandDTO</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token class-name">String</span> userId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">UserDTO</span> userDTO <span class="token operator">=</span> userBaseService<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>userDTO <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">UserExpandDTO</span> userExpandDTO <span class="token operator">=</span> <span class="token function">getDTO</span><span class="token punctuation">(</span>userId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>userExpandDTO <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">UserExpandDTO</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
userExpandDTO<span class="token punctuation">.</span><span class="token function">setUserDTO</span><span class="token punctuation">(</span>userDTO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> userExpandDTO<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">UserExpandDTO</span> <span class="token function">getByUsername</span><span class="token punctuation">(</span><span class="token class-name">String</span> username<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span></span> <span class="token function">listByUserIds</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> userIds<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span></span> <span class="token function">listByUsernames</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> usernames<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span></span> <span class="token function">list</span><span class="token punctuation">(</span><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">&gt;</span></span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">SuccessResultList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">List</span><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span><span class="token punctuation">&gt;</span></span> <span class="token function">listPage</span><span class="token punctuation">(</span><span class="token class-name">ListPage</span> page<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">SuccessResultList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">List</span><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span><span class="token punctuation">&gt;</span></span> <span class="token function">listPageByIds</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> userIds<span class="token punctuation">,</span> <span class="token class-name">ListPage</span> page<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">SuccessResultList</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">List</span><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span><span class="token punctuation">&gt;</span></span> <span class="token function">listPageByExcludeIds</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> excludeUserIds<span class="token punctuation">,</span> <span class="token class-name">ListPage</span> page<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">countDateRange</span><span class="token punctuation">(</span><span class="token class-name">String</span> startDate<span class="token punctuation">,</span> <span class="token class-name">String</span> endDate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">UserExpandDTO</span><span class="token punctuation">&gt;</span></span> <span class="token function">listByKeywords</span><span class="token punctuation">(</span><span class="token class-name">String</span> keywords<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="页面"><a href="#页面" class="header-anchor">#</a> 页面</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge,chrome=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/fonts/font-awesome/css/font-awesome.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/css/layui.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/style/admin.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>all<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-anim layui-anim-fadein<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-card-body<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form layui-form-pane<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataForm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>职称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-verify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>required<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入职称<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>单位<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>company<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-verify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>required<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入单位<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item layui-form-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>简介<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>summary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入简介<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-textarea<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-form-item layui-layout-admin<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-input-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-footer<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">lay-submit</span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submitForm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layui-btn layui-btn-primary close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>返回上级<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>assets/layuiadmin/layui/layui.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
layui<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'assets/layuiadmin/'</span> <span class="token comment">//静态资源所在路径</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token string">'lib/index'</span> <span class="token comment">//主入口模块</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">,</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token string">'laydate'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> $ <span class="token operator">=</span> layui<span class="token punctuation">.</span>$<span class="token punctuation">;</span>
<span class="token keyword">var</span> laydate <span class="token operator">=</span> layui<span class="token punctuation">.</span>laydate<span class="token punctuation">;</span>
<span class="token keyword">var</span> form <span class="token operator">=</span> layui<span class="token punctuation">.</span>form<span class="token punctuation">;</span>
<span class="token keyword">var</span> userId <span class="token operator">=</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">params</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">.</span>userId<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>layer<span class="token punctuation">.</span><span class="token function">getFrameIndex</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">initDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token function">initDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 初始化</span>
<span class="token keyword">function</span> <span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> loadLayerIndex<span class="token punctuation">;</span>
top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'api/user-expand/get/{userId}'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>userId<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
form<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token string">'dataForm'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> data<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
<span class="token literal-property property">company</span><span class="token operator">:</span> data<span class="token punctuation">.</span>company<span class="token punctuation">,</span>
<span class="token literal-property property">summary</span><span class="token operator">:</span> data<span class="token punctuation">.</span>summary
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'dataForm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
loadLayerIndex <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>loading<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">shade</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>loadLayerIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">initData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 提交表单</span>
form<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit(submitForm)'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">formData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>commit<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> loadLayerIndex<span class="token punctuation">;</span>
top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'api/user-expand/update/{userId}'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>userId<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> formData<span class="token punctuation">.</span>field<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> layerIndex <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>commitSuccess<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">btn</span><span class="token operator">:</span> <span class="token punctuation">[</span>top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>button<span class="token punctuation">.</span>yes<span class="token punctuation">,</span> top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>button<span class="token punctuation">.</span>no<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">shade</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
<span class="token function-variable function">yes</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">btn2</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
loadLayerIndex <span class="token operator">=</span> top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>dataMessage<span class="token punctuation">.</span>committing<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">shade</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>loadLayerIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.close'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">closeBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/14.931aed60.js" defer></script>
</body>
</html>

128
docs/.vuepress/dist/service/oa/app.html vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>后端规范 | WGINK</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/17.1ade9db3.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>代码模板</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="后端规范"><a href="#后端规范" class="header-anchor">#</a> 后端规范</h1></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/17.1ade9db3.js" defer></script>
</body>
</html>

View File

@ -0,0 +1,173 @@
# 输入框树形选择
layui需要引入 **ztree** 模块
js
```html
<script src="assets/js/common/layui-input-tree.js"></script>
```
初始化
```js
var layuiInputTree = new LayuiInputTree(layui);
```
···
## 渲染
### 单选
html
```html
<div class="layui-input-block">
<input type="hidden" id="roleId">
<input type="text" id="roleName" class="layui-input" placeholder="勾选角色">
</div>
```
js
```js
layuiInputTree.initSelect({
id: 'roleName',
url: 'api/role/listztree',
key: {
id: 'roleId',
name: 'roleName',
title: 'roleName',
pId: 'roleParentId',
checked: 'checked',
children: 'subs',
isParent: 'isParent',
isHidden: 'isHidden',
url: 'url',
},
defaultParams: {id: '123123'},
selectedData: {id: '', name: ''}
onConfirm: function(zTree, selectedNode) {
if(!selectedNode) {
$('#roleId').val('');
return;
}
$('#roleId').val(selectedNode.id);
},
onClear: function(zTree) {}
})
```
参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|id|string|触发选择的input输入框ID|是|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点idname:名称title:标题pId:上级IDchecked:是否选中isParent:是否父节点isHidden是否隐藏url:节点链接。以上属性均为非必填|否|
|defaultParams|obj|请求默认携带的参数|否|
|getSelectedData|function|返回已经选择的数据|否|
|onConfirm|function|点击确定按钮后触发|否|
|onClear|function|点击清除按钮后触发|否|
方法
getSelectedData返回ztree回显时的数据
事件
onConfirm树形列表点击确定按钮后触发
|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|
|selectedNode|obj|选择的节点|
onClear树形列表点击清空按钮后触发
|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|
### 多选
html
```html
<div class="layui-input-block">
<input type="hidden" id="roleIds">
<input type="text" id="roleNames" class="layui-input" placeholder="勾选角色">
</div>
```
js
```js
var selectedRoles = [{id:'', name:''}]
layuiInputTree.initMultiSelect({
id: 'roleNames',
url: 'api/role/listztree',
key: {
id: 'roleId',
name: 'roleName',
title: 'roleName',
pId: 'roleParentId',
checked: 'checked',
children: 'subs',
isParent: 'isParent',
isHidden: 'isHidden',
url: 'url',
},
checkboxType: {Y: '', N: ''},
defaultParams: {id: '123123'},
getSelectedDatas: function() {
return [{id:'', name:''}]
},
onConfirm: function (zTree, selectedNodes) {
// 将返回结果保存,回显时用
if (selectedNodes.length == 0) {
$('#roleIds').val('');
return;
}
var roleIds = '';
$.each(selectedNodes, function (index, item) {
if (roleIds != '') {
roleIds += ',';
}
roleIds += item.id;
})
$('#roleIds').val(roleIds);
}
})
```
参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|id|string|触发选择的input输入框ID|是|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点idname:名称title:标题pId:上级IDchecked:是否选中isParent:是否父节点isHidden是否隐藏url:节点链接。以上属性均为非必填|否|
|checkboxType|obj|复选框类型Y 属性定义 checkbox 被勾选后的情况N 属性定义 checkbox 取消勾选后的情况;"p" 表示作会影响父级节点;"s" 表示操作会影响子级节点。默认均为"ps"|否|
|defaultParams|obj|请求默认携带的参数|否|
|getSelectedDatas|function|返回已经选择的数据列表|否|
|onConfirm|function|点击确定按钮后触发|否|
|onClear|function|点击清除按钮后触发|否|
方法
getSelectedDatas返回ztree回显时的数据列表
事件
onConfirm树形列表点击确定按钮后触发
|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|
|selectedNodes|array|触发选择的节点列表|
onClear树形列表点击清空按钮后触发
|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|

View File

@ -1,18 +1,25 @@
# layui工具
layui需要引入 **upload** 模块
引入依赖:
1. `<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">`
2. `<script src="assets/js/vendor/viewer/viewer.min.js"></script>`
3. `<link rel="stylesheet" href="assets/css/layui-util.css">`
4. `<script src="assets/js/layui-util.js"></script>`
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);
var layuiUtil = new LayuiUtil(layui, Viewer ? Viewer : null);
```
## 表单
@ -34,8 +41,8 @@ js
```js
layuiUtil.select({
url: top.restAjax.path('', []),
domId: '#highestEducationIdBox',
name: 'highestEducationId',
domId: 'xxxIdBox',
name: 'xxxId',
dataForm: 'dataForm',
valueKey: 'dataId',
nameKey: 'dataName',
@ -46,6 +53,22 @@ layuiUtil.select({
});
```
### 构建数据字典
js
```js
layuiUtil.selectData({
parentId: '',
domId: 'xxxIdBox',
name: 'xxxId',
dataForm: 'dataForm',
onSelect: function(data, option) {
$('#highestEducationName').val(option.innerText);
}
});
```
参数
|名称|类型|描述|是否必填|
|-|-|-|-|
@ -74,6 +97,75 @@ 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下标|
## 上传
### 上传图片
@ -104,3 +196,145 @@ layuiUtil.initUploadImage({
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|

View File

@ -32,34 +32,13 @@
<div class="layui-inline">
<input type="text" id="keywords" class="layui-input search-item" placeholder="输入用户名、昵称">
</div>
最后登录
<div class="layui-inline">
<input type="text" id="startTime" class="layui-input search-item search-item-width-100" placeholder="开始时间" readonly>
</div>
<div class="layui-inline">
<input type="text" id="endTime" class="layui-input search-item search-item-width-100" placeholder="结束时间" readonly>
</div>
<div class="layui-inline layui-form search-item">
<select id="userType" name="userType" lay-filter="typeFilter">
<option value="">选择类型</option>
<option value="1">系统用户</option>
<option value="2">普通用户</option>
<option value="3">公共用户</option>
</select>
</div>
<div class="layui-inline layui-form search-item">
<select id="userState" name="userState" lay-filter="typeFilter">
<option value="">选择类型</option>
<option value="0">正常</option>
<option value="1">锁定</option>
<option value="-1">未审核</option>
<option value="-2">审核不通过</option>
</select>
</div>
<button type="button" id="search" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-search"></i> 搜索
</button>
<!-- 确定按钮 -->
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="confirm" style="float:right;">确定</button>
<!-- 确定按钮 -->
</div>
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
</div>
@ -85,25 +64,26 @@
// 已经选择的列表
var selectedIdArray = top.dialog.dialogData.selectedIdArray ? top.dialog.dialogData.selectedIdArray : [];
// 将新的选择列表置空
var newSelectedArray = top.dialog.dialogData.newSelectedArray = [];
// 正在选择的用户
var selectUserMap = {};
top.dialog.dialogData.newSelectedArray = null;
// 正在选择
var selectMap = {};
var tableData = [];
var tableUrl = 'api/teacher/listpage-user-unselected';
// 初始化已选择的列表
function initSelectUserMap() {
function initSelectMap() {
for(var i = 0, item; item = selectedIdArray[i++];) {
selectUserMap[item] = {
selectMap[item] = {
userId: item
}
}
}
initSelectUserMap();
initSelectMap();
// 初始化表格
function initTable() {
// 设置选择类型
$.extend(table, {config: {checkName: 'checked'}});
table.render({
elem: '#dataTable',
@ -128,83 +108,22 @@
}
},
{field:'userName', width:140, title: '昵称', sort: true, align:'center'},
{field:'userType', width:90, title: '类型', sort: true, align:'center',
templet: function(item) {
if(item.userType == 1) {
return '<span class="layui-badge layui-bg-green">系统用户</span>';
} else if(item.userType == 2) {
return '<span class="layui-badge layui-bg-orange">普通用户</span>';
} else if(item.userType == 3) {
return '<span class="layui-badge layui-bg-gray">公共用户</span>';
}
return '<span class="layui-badge">类型错误</span>';
}
},
{field:'userState', width:80, title: '状态', sort: true, align:'center',
templet: function(item) {
var value;
switch (item.userState) {
case 1:
value = '<span class="layui-badge layui-bg-blue">锁定</span>';
break;
case -1:
value = '<span class="layui-badge layui-bg-gray">未审核</span>';
break;
case -2:
value = '<span class="layui-badge">审核不通过</span>';
break;
default:
value = '<span class="layui-badge layui-bg-green">正常</span>';
}
return value;
}
},
{field:'userPhone', width:140, title: '手机', sort: true, align:'center',
templet: function(item) {
if(!item.userPhone) {
return '-';
}
return item.userPhone;
}
},
{field:'userEmail', width: 160, title: '邮箱', sort: true, align:'center',
templet: function(item) {
if(!item.userEmail) {
return '-';
}
return item.userEmail;
}
},
{field:'userExpiredDate', width:180, title: '账号过期时间', align:'center',
templet: function(item) {
if(!item.userExpiredDate) {
return '-';
}
return item.userExpiredDate;
}
},
{field:'gmtCreate', width:180, title: '创建时间', align:'center',
templet: function(item) {
if(!item.gmtCreate) {
return '-';
}
return item.gmtCreate;
}
},
]
],
page: true,
parseData: function(data) {
// 默认勾选
for(var i = 0, item; item = data.rows[i++];) {
if(selectUserMap[item.userId]) {
if(selectMap[item.userId]) {
item.checked = true;
// 重新赋值:在打开界面后直接确定关闭页面时回显正常
selectUserMap[item.userId] = item;
selectMap[item.userId] = item;
} else {
item.checked = false;
}
}
tableData = data.rows;
// 默认勾选
return {
'code': 0,
@ -221,53 +140,40 @@
url: top.restAjax.path(tableUrl, []),
where: {
keywords: $('#keywords').val(),
startTime: $('#startTime').val(),
endTime: $('#endTime').val(),
userType: $('#userType').val(),
userState: $('#userState').val()
},
page: {
curr: currentPage
},
height: $win.height() - 90,
});
}
// 初始化日期
function initDate() {
// 日期选择
laydate.render({
elem: '#startTime',
format: 'yyyy-MM-dd'
});
laydate.render({
elem: '#endTime',
format: 'yyyy-MM-dd'
});
}
initTable();
initDate();
/**
* 清空选择的用户
*/
function clearSelect() {
selectUserMap = {};
// 关闭
function close() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
/**
* 添加选择的用户
* 清空选择
*/
function clearSelect() {
selectMap = {};
}
/**
* 添加选择
* @param item
*/
function addSelect(item) {
selectUserMap[item.userId] = item;
selectMap[item.userId] = item;
}
/**
* 删除选择的用户
* 删除选择
* @param item
*/
function removeSelect(item) {
delete selectUserMap[item.userId];
delete selectMap[item.userId];
}
// 勾选事件
@ -299,23 +205,19 @@
addSelect(obj.data);
});
// 关闭
function close() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
// 事件 - 确定
$(document).on('click', '#confirm', function() {
top.dialog.dialogData.newSelectedArray = [];
for(var key in selectMap) {
top.dialog.dialogData.newSelectedArray.push(selectMap[key]);
}
close();
});
// 事件 - 搜索
$(document).on('click', '#search', function() {
reloadTable(1);
});
// 事件 - 搜索
$(document).on('click', '#confirm', function() {
for(var key in selectUserMap) {
newSelectedArray.push(selectUserMap[key]);
}
close();
});
});
</script>
</body>
@ -336,7 +238,7 @@ top.dialog.open({
onClose: function() {
// 获取选择后的列表
var newSelectedArray = top.dialog.dialogData.newSelectedArray;
if(newSelectedArray.length != 0) {
if(newSelectedArray && newSelectedArray.length != 0) {
// 处理选择结果
$('#userId').val(newSelectedArray[0].userId);
$('#userName').val(newSelectedArray[0].userName);

View File

@ -0,0 +1,26 @@
# 用户选择
## 综合选择
```js
top.dialog.dialogData.selectedIdArray = ['627da8c0-3c75-4bf9-abc7-85a6f1c18ae9', 'fe594537-bb9d-4d4f-b5d6-c68b099eec58']
top.dialog.open({
url: top.restAjax.path('route/core/manage/list-department-user-select', []),
title: '用户选择',
width: '800px',
height: '500px',
onClose: function() {
var newSelectedArray = top.dialog.dialogData.newSelectedArray;
if(!newSelectedArray) {
return;
}
// 处理
console.log(newSelectedArray);
}
})
```
说明
`top.dialog.dialogData.selectedIdArray`回显的用户ID列表可以为null或[]
`top.dialog.dialogData.newSelectedArray`新选择的用户列表当没有任何操作时返回null。

View File

@ -0,0 +1,151 @@
# 页面变量
## confirmAssignees
确认代理人列表
根据流程图,动态生成按钮,每一个按钮都有对应的候选人列表
> 注意:在绘制流程时,如果**代理人类型**选择的是**表单**,页面中的变量 **confirmAssignees.assignees** 为空数组,需要由页面动态处理候选人。
格式如下
```json
[{
"assignees": [{
"avatar": "",
"userId": "044aa7ae-27f4-41d3-a084-145c501193eb",
"userName": "王XX",
"userUsername": "17777811733"
}, {
"avatar": "",
"userId": "5279a10e-24c3-45ee-896c-38763a6282f9",
"userName": "周X",
"userUsername": "13314888608"
}, {
"avatar": "",
"userId": "9a7e9804-bd5d-4b0d-b0f3-f8989fb7ea4a",
"userName": "董X",
"userUsername": "19847345521"
}],
"btnExc": "",
"btnText": "送周杰",
"nextEndEvent": false,
"nodeType": "multiple",
"assigneeType": "appoint",
"formAssigneeField": "abc"
}]
```
说明
|名称|类型|说明|参数值|
|-|-|-|-|
|btnExc|string|按钮执行条件||
|btnText|string|按钮名称||
|nextEndEvent|boolean|下个节点是否是结束节点||
|nodeType|string|节点类型|single:单选multiple:多选|
|assigneeType|string|代理人类型|appoint:指定auto:自动form:表单|
|formAssigneeField|string|表单代理人字段assigneeType为form时有效||
|assignees|string|代理人列表||
|assignees.avatar|string|代理人头像||
|assignees.userId|string|代理人用户ID||
|assignees.userName|string|代理人名称||
|assignees.userUsername|string|代理人用户名||
## fields
表单字段
- 用于描述表单中的字段类型相关js会根据类型自动处理表单中字段状态可见、不可见、可写、不可写等
- 根据流程绘制时确定。
- 数量与表单字段一致。
格式如下
```json
[{
"autoBackFill": "currentUserName",
"editHistory": "noRecord",
"fieldName": "bt",
"isEditable": 1,
"isVisible": 1
}, {
"autoBackFill": "noBackFill",
"editHistory": "noRecord",
"fieldName": "qp",
"isEditable": 0,
"isVisible": 1
}, {
"autoBackFill": "noBackFill",
"editHistory": "noRecord",
"fieldName": "hq",
"isEditable": 0,
"isVisible": 1
}]
```
说明
|名称|类型|说明|参数值|
|-|-|-|-|
|autoBackFill|string|自动回填|noBackFill:不回填currentUserName:当前用户昵称currentUserDepartment:当前用户部门,当有多个时,页面会处理成下拉|
|editHistory|string|编辑历史|noRecord:不记录latest:最新(签批)all:全部(会签)|
|fieldName|string|字段名称||
|isEditable|int|是否可编辑|0:不可编辑1:可编辑|
|isVisible|int|是否可见|0:不可见1:可见|
## formButton
表单按钮
显示或隐藏按钮,根据表单绘制时确定
格式如下
```json
{
"btnAttachment": 1,
"btnCc": 1,
"btnForcedEnd": 0,
"btnGoBack": 0,
"btnPrint": 0,
"btnTransfer": 0,
"goBackUserTasks": []
}
```
说明
|名称|类型|说明|参数值|
|-|-|-|-|
|btnAttachment|int|附件|0:不显示1:显示|
|btnCc|int|抄送|0:不显示1:显示|
|btnForcedEnd|int|强制结束|0:不显示1:显示|
|btnPrint|int|打印|0:不显示1:显示|
|btnTransfer|int|转交|0:不显示1:显示|
|btnGoBack|int|回退,发起时没有回退|0:不显示1:显示|
|goBackUserTasks|array|可以回退的用户任务列表,回退按钮显示时有效||
## currentUser
当前用户
格式如下
```json
{
"departments": [],
"userId": "1",
"userName": "超级管理员"
}
```
说明
|名称|类型|说明|参数值|
|-|-|-|-|
|userId|string|用户ID||
|userName|string|用户昵称||
|departments|array|部门列表||

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{389:function(t,e,c){},416:function(t,e,c){\"use strict\";c(389)},420:function(t,e,c){\"use strict\";c.r(e);var n={name:\"CodeBlock\",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},a=(c(416),c(62)),i=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)(\"div\",{staticClass:\"theme-code-block\",class:{\"theme-code-block__active\":this.active}},[this._t(\"default\")],2)}),[],!1,null,\"05cc8c14\",null);e.default=i.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{388:function(t,e,n){},415:function(t,e,n){\"use strict\";n(388)},433:function(t,e,n){\"use strict\";n.r(e);var i={functional:!0,props:{type:{type:String,default:\"tip\"},text:String,vertical:{type:String,default:\"top\"}},render:function(t,e){var n=e.props,i=e.slots;return t(\"span\",{class:[\"badge\",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(415),n(62)),p=Object(r.a)(i,void 0,void 0,!1,null,\"75bf6e19\",null);e.default=p.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{390:function(t,e,c){},417:function(t,e,c){\"use strict\";c(390)},421:function(t,e,c){\"use strict\";c.r(e);var n={name:\"CodeBlock\",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},a=(c(417),c(62)),i=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)(\"div\",{staticClass:\"theme-code-block\",class:{\"theme-code-block__active\":this.active}},[this._t(\"default\")],2)}),[],!1,null,\"05cc8c14\",null);e.default=i.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{390:function(e,t,a){},417:function(e,t,a){\"use strict\";a(390)},421:function(e,t,a){\"use strict\";a.r(t);a(90),a(41),a(10),a(120),a(121);var o={name:\"CodeGroup\",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return\"\"===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove(\"theme-code-block__active\")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add(\"theme-code-block__active\")}}},c=(a(417),a(62)),n=Object(c.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a(\"ClientOnly\",[a(\"div\",{staticClass:\"theme-code-group\"},[a(\"div\",{staticClass:\"theme-code-group__nav\"},[a(\"ul\",{staticClass:\"theme-code-group__ul\"},e._l(e.codeTabs,(function(t,o){return a(\"li\",{key:t.title,staticClass:\"theme-code-group__li\"},[a(\"button\",{staticClass:\"theme-code-group__nav-tab\",class:{\"theme-code-group__nav-tab-active\":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v(\"\\n \"+e._s(t.title)+\"\\n \")])])})),0)]),e._v(\" \"),e._t(\"default\"),e._v(\" \"),e.codeTabs.length<1?a(\"pre\",{staticClass:\"pre-blank\"},[e._v(\"// Make sure to add code blocks to your code group\")]):e._e()],2)])}),[],!1,null,\"65dbc432\",null);t.default=n.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{419:function(t,e,s){\"use strict\";s.r(e);var n=[\"There's nothing here.\",\"How did we get here?\",\"That's a Four-Oh-Four.\",\"Looks like we've got some broken links.\"],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(62),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"theme-container\"},[e(\"div\",{staticClass:\"theme-default-content\"},[e(\"h1\",[this._v(\"404\")]),this._v(\" \"),e(\"blockquote\",[this._v(this._s(this.getMsg()))]),this._v(\" \"),e(\"RouterLink\",{attrs:{to:\"/\"}},[this._v(\"\\n Take me home.\\n \")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{389:function(e,t,a){},416:function(e,t,a){\"use strict\";a(389)},420:function(e,t,a){\"use strict\";a.r(t);a(90),a(41),a(10),a(120),a(121);var o={name:\"CodeGroup\",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return\"\"===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove(\"theme-code-block__active\")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add(\"theme-code-block__active\")}}},c=(a(416),a(62)),n=Object(c.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a(\"ClientOnly\",[a(\"div\",{staticClass:\"theme-code-group\"},[a(\"div\",{staticClass:\"theme-code-group__nav\"},[a(\"ul\",{staticClass:\"theme-code-group__ul\"},e._l(e.codeTabs,(function(t,o){return a(\"li\",{key:t.title,staticClass:\"theme-code-group__li\"},[a(\"button\",{staticClass:\"theme-code-group__nav-tab\",class:{\"theme-code-group__nav-tab-active\":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v(\"\\n \"+e._s(t.title)+\"\\n \")])])})),0)]),e._v(\" \"),e._t(\"default\"),e._v(\" \"),e.codeTabs.length<1?a(\"pre\",{staticClass:\"pre-blank\"},[e._v(\"// Make sure to add code blocks to your code group\")]):e._e()],2)])}),[],!1,null,\"65dbc432\",null);t.default=n.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{388:function(t,e,c){},415:function(t,e,c){\"use strict\";c(388)},420:function(t,e,c){\"use strict\";c.r(e);var n={name:\"CodeBlock\",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},a=(c(415),c(62)),i=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)(\"div\",{staticClass:\"theme-code-block\",class:{\"theme-code-block__active\":this.active}},[this._t(\"default\")],2)}),[],!1,null,\"05cc8c14\",null);e.default=i.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{389:function(t,e,n){},416:function(t,e,n){\"use strict\";n(389)},433:function(t,e,n){\"use strict\";n.r(e);var i={functional:!0,props:{type:{type:String,default:\"tip\"},text:String,vertical:{type:String,default:\"top\"}},render:function(t,e){var n=e.props,i=e.slots;return t(\"span\",{class:[\"badge\",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(416),n(62)),p=Object(r.a)(i,void 0,void 0,!1,null,\"75bf6e19\",null);e.default=p.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{422:function(t,e,n){\"use strict\";n.r(e);var s=n(62),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)(\"ContentSlotsDistributor\",{attrs:{\"slot-key\":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{431:function(t,s,e){\"use strict\";e.r(s);var n=e(62),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s(\"ContentSlotsDistributor\",{attrs:{\"slot-key\":this.$parent.slotKey}},[s(\"h1\",{attrs:{id:\"后端规范\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#后端规范\"}},[this._v(\"#\")]),this._v(\" 后端规范\")])])}),[],!1,null,null,null);s.default=r.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);","extractedComments":[]}

View File

@ -0,0 +1 @@
{"code":"(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{432:function(t,s,e){\"use strict\";e.r(s);var n=e(62),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s(\"ContentSlotsDistributor\",{attrs:{\"slot-key\":this.$parent.slotKey}},[s(\"h1\",{attrs:{id:\"后端规范\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#后端规范\"}},[this._v(\"#\")]),this._v(\" 后端规范\")])])}),[],!1,null,null,null);s.default=r.exports}}]);","extractedComments":[]}

View File

@ -0,0 +1,2 @@
30ed45cff4b5af90106f46ff9d8dbbddb6abce27 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"635bbe6d929331114cb970fa16d9ac31\"}","integrity":"sha512-l95zt204HZU+l6eydAk3KXQ4qdNL0bS/zdpZZJgzw7TTQlCRDmymSRegwTIRwllhS6VR4+8x1vZgYLWL1ub68A==","time":1654850814970,"size":557}

View File

@ -0,0 +1,2 @@
fd2c26ca521e7cd90a3bf089a58d5d3922089651 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"8f4f5899da0675a44dc6e77681561a50\"}","integrity":"sha512-whO2AaLeYlnVFypiMaqPa3eVtatCW6+lguYaBqgx+ovyxVaJ7NCIP80oIrU4DseED8qu0VEwmUB7vb/VfCEJUA==","time":1654850995041,"size":7378}

View File

@ -0,0 +1,2 @@
c1c8d7022fdf277148e3e8d6f3888be2224d8900 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"c87cbf128b866f4fe9c2686f71cece8d\"}","integrity":"sha512-Lccoy44ALVQm6NJm2zioFjXOSkHRi0jFKXbkYiWiiQByvZCgVDAWYzg1p6iWDG1LLmChwN0qgWPLk6VGXFiA+Q==","time":1654849811916,"size":7378}

View File

@ -0,0 +1,2 @@
818a778e4c44251ae62d02ffbb3827cc2f3871a5 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"f1eac01dbd782e4da93d75753b81880f\"}","integrity":"sha512-ocbodW3DwvsBV0c+58rmNqBi1OVUVaZh7xpzpL6fZqdzRBgCYhERJXPplN9XCcc5B2hGoszQj2xOPygbidyazw==","time":1654849811693,"size":346}

View File

@ -0,0 +1,2 @@
a3c6995f1ef0256f1dd2f6c0e18f9087bc9fa8c4 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"912fb995a8d8ec9f88ffffe5a30c47ef\"}","integrity":"sha512-TC1e6MT0pnDQtJ7jyFsjKJEN04dEVjlr4hoK1iPqiBRTJ6EF1vSV2vVGvJZ+8OP5v5lnfMwgEPgCq/F0RPz8oQ==","time":1654850651976,"size":100424}

View File

@ -0,0 +1,2 @@
9ab83d068359a70ac24e9662cb528fc9d5e2266b {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"28d2a5f6b61c71e5f0940bec63c3913f\"}","integrity":"sha512-KLduiZIEvKV3uZuNJKehlqExXNmWbyzbnaTCTt96v0UTJM+0Y2Hjbc8Pnl662NB+sMwGgn8QSQAyGnkrrOPGAQ==","time":1654849811689,"size":557}

View File

@ -0,0 +1,2 @@
640be03d6aed9a90f2e846a108760d79dc3976dc {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"cc0bbe49a26f0218f2bdd15e7b634f56\"}","integrity":"sha512-SqHWrNqvxHT03GSBLMZ+byarTU/mE5tlEgUBOpw/+Eevfv+4m1dHYIfBK5yq9FCLMEjAEtq9Zo832pCQGvwewg==","time":1654849812493,"size":71773}

View File

@ -0,0 +1,2 @@
003088c0904632697a61dcb3971df06a0c80e354 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"0f0aef1d8ba2f344c2942a811ceab8be\"}","integrity":"sha512-ZTVunSyfpPV6PFjyf3hug5Nb7i27fB0UyvdqDaTOnndqJBkBdJfAhpDMu3Lb+FeU0OpetZAIcbYfBcuye+yTwg==","time":1654849811749,"size":1920}

View File

@ -0,0 +1,2 @@
417d3f383df84310c227e8a433504dc3d8af8df0 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"ebb7c5090c144a26e57bc3518831e4c3\"}","integrity":"sha512-RVB1ei2lNHvrm0z+epdPBEIA2PG9/EbD/k0TY4goc1pUCbUM1V2+EhoWnOyVfzRGeQTfVdvTAnB1/+AprkV+Nw==","time":1654849813071,"size":106847}

View File

@ -0,0 +1,2 @@
1b5c983954b1fbc0520af36edf8918148b7114ee {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"dd6fb8e90d12c01cfacd57c666299cfb\"}","integrity":"sha512-X04Pj675P1GH1oqW3FAQywClXy/mP3+8UicF7e+PT96g2szJjc8eg671HDWyHUxI/41wJQG6P/0etIXMBZjhYQ==","time":1654849812835,"size":167815}

View File

@ -0,0 +1,2 @@
f1e8d294914ab9b9e317245c3d7594e3f08d9f1c {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"aeca5dbb015866875c57fc8a2c27ad19\"}","integrity":"sha512-AyHbizqR53g8snt/XCloNAeS0fwiTz23x4A+1+q7iBG2vF3tuCcC848q690tnUcn4wmezmvUE9W/QDgfWRrGFQ==","time":1654850995834,"size":167815}

View File

@ -0,0 +1,2 @@
11f7e863c5e043678394d78d1b64fec4d1630632 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"ac37f7172cb334b6174350ec767728ac\"}","integrity":"sha512-igV2KEcKB5xJfxigxvitGYkV2FSrUCP41Hgt6VCwpytIXFozRcejKDMcbCD3ntAXI7G64UqCRTx0C5bs1prhWg==","time":1654850653928,"size":216278}

View File

@ -0,0 +1,2 @@
d3f834ca7fe538299549dbff628064bef03e3ca4 {"key":"{\"terser\":\"4.8.0\",\"node_version\":\"v14.17.0\",\"terser-webpack-plugin\":\"1.4.5\",\"terser-webpack-plugin-options\":{\"test\":new RegExp(\"\\\\.m?js(\\\\?.*)?$\", \"i\"),\"chunkFilter\":() => true,\"warningsFilter\":() => true,\"extractComments\":false,\"sourceMap\":false,\"cache\":true,\"cacheKeys\":defaultCacheKeys => defaultCacheKeys,\"parallel\":true,\"include\":undefined,\"exclude\":undefined,\"minify\":undefined,\"terserOptions\":{\"output\":{\"comments\":new RegExp(\"^\\\\**!|@preserve|@license|@cc_on\", \"i\")}}},\"hash\":\"deb656c2f934acb56cd1408ed76016d2\"}","integrity":"sha512-G4/t8MnLxVDaS9BmrrvVgUPLchcdJJ3Pi9g8GpbUt/X3m/8Q85HUFxqjfrHxDv37Gnn3frsFo2v+EHgtAgCT2Q==","time":1654850995444,"size":47571}

Some files were not shown because too many files have changed in this diff Show More