From fb1cbb3b1008b8bff9a9bf4e455a5c779308049e Mon Sep 17 00:00:00 2001 From: Jmysy <854085467@qq.com> Date: Sun, 26 Apr 2020 23:16:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89=E4=B8=8B?= =?UTF-8?q?=E6=8B=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Pear Admin v 2.0/admin/css/pearNotice.css | 12 +- Pear Admin v 2.0/admin/css/pearSelect.css | 174 ++ Pear Admin v 2.0/admin/data/menu.json | 9 + .../layui/lay/extends/formSelects-v4.js | 1740 +++++++++++++++++ .../component/layui/lay/extends/pearAdmin.js | 2 +- Pear Admin v 2.0/component/layui/layui.js | 1 + Pear Admin v 2.0/index.html | 14 +- .../view/common/basic/formSelects.html | 119 ++ 8 files changed, 2059 insertions(+), 12 deletions(-) create mode 100644 Pear Admin v 2.0/admin/css/pearSelect.css create mode 100644 Pear Admin v 2.0/component/layui/lay/extends/formSelects-v4.js create mode 100644 Pear Admin v 2.0/view/common/basic/formSelects.html diff --git a/Pear Admin v 2.0/admin/css/pearNotice.css b/Pear Admin v 2.0/admin/css/pearNotice.css index 7eded50..9d72758 100644 --- a/Pear Admin v 2.0/admin/css/pearNotice.css +++ b/Pear Admin v 2.0/admin/css/pearNotice.css @@ -33,4 +33,14 @@ .pear-notice *::-webkit-scrollbar-track{background: white;border-radius:2px;} .pear-notice *::-webkit-scrollbar-thumb{background: #E6E6E6;border-radius:2px;} .pear-notice *::-webkit-scrollbar-thumb:hover{background: #E6E6E6;} -.pear-notice *::-webkit-scrollbar-corner{background: #f6f6f6;} \ No newline at end of file +.pear-notice *::-webkit-scrollbar-corner{background: #f6f6f6;} + + +.layer-anim-right { + -webkit-animation: am-horizontal-roll_show .6s ease-out; + animation: am-horizontal-roll_show .6s ease-out; +} + +.layui-layer-dialog .layui-layer-content{ + padding: 0px!important; +} \ No newline at end of file diff --git a/Pear Admin v 2.0/admin/css/pearSelect.css b/Pear Admin v 2.0/admin/css/pearSelect.css new file mode 100644 index 0000000..d7d6981 --- /dev/null +++ b/Pear Admin v 2.0/admin/css/pearSelect.css @@ -0,0 +1,174 @@ +/* formSelects多选css */ +select[xm-select]{display: none !important;} +.xm-select-parent * {margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; box-sizing: initial;} +.xm-select-parent {text-align: left;} +.xm-select-parent select {display: none;} +.xm-select-parent .xm-select-title {position: relative;min-height: 36px;} +.xm-select-parent .xm-input {cursor: pointer;border-radius: 2px;border-width: 1px;border-style: solid;border-color: #E6E6E6;display: block;width: 100%;box-sizing: border-box;background-color: #FFF;height: 36px;line-height: 1.3;padding-left: 10px;outline: 0} +.xm-select-parent .xm-select-sj {display: inline-block;width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;position: absolute;right: 10px;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #C2C2C2;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s} +.xm-select-parent .xm-form-selected .xm-select-sj {margin-top: -9px;transform: rotate(180deg)} +.xm-select-parent .xm-form-select dl {display: none;position: absolute;left: 0;top: 42px;padding: 5px 0;z-index: 999;min-width: 100%;border: 1px solid #d2d2d2;max-height: 300px;overflow-y: auto;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12);box-sizing: border-box;animation-fill-mode: both;-webkit-animation-name: layui-upbit;animation-name: layui-upbit;-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both} +@-webkit-keyframes layui-upbit { + from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3} + to {-webkit-transform: translate3d(0, 0, 0);opacity: 1} +} +@keyframes layui-upbit { + from {transform: translate3d(0, 30px, 0);opacity: .3} + to {transform: translate3d(0, 0, 0);opacity: 1} +} +.xm-select-parent .xm-form-selected dl {display: block} +.xm-select-parent .xm-form-select dl dd,.xm-select-parent .xm-form-select dl dt {padding: 0 10px;line-height: 36px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} +.xm-select-parent .xm-form-select dl dd {cursor: pointer;height: 36px;} +.xm-select-parent .xm-form-select dl dd:hover {background-color: #f2f2f2} +.xm-select-parent .xm-form-select dl dt {font-size: 12px;color: #999} +.layui-select-disabled .xm-dis-disabled {border-color: #eee!important} +.xm-select-parent .xm-form-select dl .xm-select-tips {padding-left: 10px!important;color: #999;font-size: 14px} +.xm-unselect {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none} + +.xm-form-checkbox {position: relative;display: block;vertical-align: middle;cursor: pointer;font-size: 0;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;height: auto!important;line-height: normal!important;border: none!important;margin-right: 0;padding-right: 0;background: 0 0;} +.xm-form-checkbox > i {color: #FFF; font-size: 16px; width: 16px; height: 16px; position: absolute; top: 9px; border: 1px solid #5FB878; border-radius: 3px; z-index: 2;} +.xm-form-checkbox:hover > i {border-color: #5FB878;} +.xm-form-checkbox > span{display: block;position: relative;padding: 0 15px 0 30px;height: 100%;font-size: 14px;border-radius: 2px 0 0 2px;background-color: #d2d2d2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: 0 0;color: #666;line-height: 36px;} + +.xm-select-parent dl{width: 100%;} +.xm-select-parent dl dd{position: relative;} +.xm-select-parent dl dd > i:not(.icon-sousuo){position: absolute; right: 10px; top: 0; color: #AAAAAA;} +.xm-select-parent dl dd.xm-select-this div i {border: none; color: #009688; font-size: 18px;} +.xm-select-parent dl dd.xm-select-this div i:after{content: '\e613';} +.xm-select-parent dl dd.xm-dis-disabled div i {border-color: #C2C2C2;} +.xm-select-parent dl dd.xm-dis-disabled.xm-select-this div i {color: #C2C2C2;} +.xm-select-radio div.xm-form-checkbox > i {border-radius: 20px;} +.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{content: '\e62b';} + +.xm-dis-disabled,.xm-dis-disabled:hover {cursor: not-allowed!important} +.xm-form-select dl dd.xm-dis-disabled {background-color: #fff!important} +.xm-form-select dl dd.xm-dis-disabled span {color: #C2C2C2} +.xm-form-select dl dd.xm-dis-disabled .xm-icon-yes {border-color: #C2C2C2} +.xm-select-parent {position: relative;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none} +.xm-select-parent .xm-select {line-height: normal;height: auto;padding: 4px 10px 1px 10px;overflow: hidden;min-height: 36px;left: 0;z-index: 99;position: absolute;background: 0 0;padding-right: 20px} +.xm-select-parent .xm-select:hover {border-color: #C0C4CC} +.xm-select-parent .xm-select .xm-select-label {display: inline-block;margin: 0;vertical-align: middle} +.xm-select-parent .xm-select-title div.xm-select-label>span {position: relative;padding: 2px 5px;background-color: #009688;border-radius: 2px;color: #FFF;display: inline-block;line-height: 18px;height: 18px;margin: 2px 5px 2px 0;cursor: initial;user-select: none;font-size: 14px;padding-right: 25px;-webkit-user-select: none;} +.xm-select-parent .xm-select-title div.xm-select-label>span i {position: absolute; margin-left: 8px; font-size: 12px; cursor: pointer; line-height: 20px;} +.xm-select-parent .xm-select .xm-select-input {border: none;height: 28px;background-color: transparent;padding: 0;vertical-align: middle;display: inline-block;width: 50px} +.xm-select-parent .xm-select--suffix input {border: none} +.xm-form-selected .xm-select,.xm-form-selected .xm-select:hover {border-color: #009688!important} +.xm-select--suffix+div {position: absolute;top: 0;left: 0;bottom: 0;right: 0} +.xm-select-dis .xm-select--suffix+div {z-index: 100;cursor: no-drop!important;opacity: .2;background-color: #FFF;} +.xm-select-disabled,.xm-select-disabled:hover {color: #d2d2d2!important;cursor: not-allowed!important;background-color: #fff} +.xm-select-none {display: none;margin: 5px 0;text-align: center;} +.xm-select-none:hover {background-color: #FFF!important} +.xm-select-empty {display: block} +.xm-span-hide {display: none!important;} +.layui-form-pane .xm-select,.layui-form-pane .xm-select:hover {border: none!important;top: 0px} +.layui-form-pane .xm-select-title {border: 1px solid #e6e6e6!important} +.xm-select-hide {display: none !important;} +div[xm-hg] .xm-select-label{white-space: nowrap; overflow: hidden; position: absolute; right: 30px; left: 0; padding-left: 10px;} + +/* 颜色相关 */ +div[xm-select-skin] .xm-select-title div.xm-select-label>span {border: 1px solid #009688} +div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover {opacity: .8;filter: alpha(opacity=80);cursor: pointer} +div[xm-select-skin=default] .xm-select-title div.xm-select-label>span {background-color: #F0F2F5;color: #909399;border: 1px solid #F0F2F5} +div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i {color: #C0C4CC} +div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i:before {content: '\e60b'; font-size: 16px; margin-left: -3px;} +div[xm-select-skin=default] dl dd:not(.xm-dis-disabled) i {border-color: #5FB878} +div[xm-select-skin=default] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #5FB878} +div[xm-select-skin=default].xm-form-selected .xm-select,div[xm-select-skin=default].xm-form-selected .xm-select:hover {border-color: #C0C4CC!important} +div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {background-color: #009688;color: #FFF;border: 1px solid #009688} +div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {background-color: #009688; color: #FFF} +div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {border-color: #009688} +div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #009688} +div[xm-select-skin=primary].xm-form-selected .xm-select,div[xm-select-skin=primary].xm-form-selected .xm-select:hover {border-color: #009688!important} +div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {background-color: #1E9FFF;color: #FFF;border: 1px solid #1E9FFF} +div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {background-color: #1E9FFF;color: #FFF} +div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i {border-color: #1E9FFF} +div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #1E9FFF} +div[xm-select-skin=normal].xm-form-selected .xm-select,div[xm-select-skin=normal].xm-form-selected .xm-select:hover {border-color: #1E9FFF!important} +div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span {background-color: #FFB800;color: #FFF;border: 1px solid #FFB800} +div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i {background-color: #FFB800;color: #FFF} +div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i {border-color: #FFB800} +div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FFB800} +div[xm-select-skin=warm].xm-form-selected .xm-select,div[xm-select-skin=warm].xm-form-selected .xm-select:hover {border-color: #FFB800!important} +div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span {background-color: #FF5722;color: #FFF;border: 1px solid #FF5722} +div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i {background-color: #FF5722;color: #FFF} +div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i {border-color: #FF5722} +div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FF5722} +div[xm-select-skin=danger].xm-form-selected .xm-select,div[xm-select-skin=danger].xm-form-selected .xm-select:hover {border-color: #FF5722!important} + + +/* 多选联动 */ +.xm-select-parent .layui-form-danger+.xm-select-title .xm-select {border-color: #FF5722 !important;} +.xm-select-linkage li {padding: 10px 0px;cursor: pointer;} +.xm-select-linkage li span {padding-left: 20px;padding-right: 30px;display: inline-block;height: 20px;overflow: hidden;text-overflow: ellipsis;} +.xm-select-linkage li.xm-select-this span {border-left: 5px solid #009688;color: #009688;padding-left: 15px;} +.xm-select-linkage-group {position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;} +.xm-select-linkage-group li:hover {border-left: 1px solid #009688;} +.xm-select-linkage-group li:hover span {padding-left: 19px;} +.xm-select-linkage-group li.xm-select-this:hover span {padding-left: 15px;border-left-width: 4px;} +.xm-select-linkage-group:nth-child(4n+1){background-color: #EFEFEF; left: 0;} +.xm-select-linkage-group:nth-child(4n+1) li.xm-select-active{background-color: #F5F5F5;} +.xm-select-linkage-group:nth-child(4n+2){background-color: #F5F5F5; left: 100px;} +.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FAFAFA;} +.xm-select-linkage-group:nth-child(4n+3){background-color: #FAFAFA; left: 200px;} +.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FFFFFF;} +.xm-select-linkage-group:nth-child(4n+4){background-color: #FFFFFF; left: 300px;} +.xm-select-linkage-group:nth-child(4n+4) li.xm-select-active{background-color: #EFEFEF;} +.xm-select-linkage li{list-style: none;} +.xm-select-linkage-hide {display: none;} +.xm-select-linkage-show {display: block;} + +div[xm-select-skin='default'] .xm-select-linkage li.xm-select-this span {border-left-color: #5FB878;color: #5FB878;} +div[xm-select-skin='default'] .xm-select-linkage-group li:hover {border-left-color: #5FB878;} +div[xm-select-skin='primary'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;} +div[xm-select-skin='primary'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;} +div[xm-select-skin='normal'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;} +div[xm-select-skin='normal'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;} +div[xm-select-skin='warm'] .xm-select-linkage li.xm-select-this span {border-left-color: #FFB800;color: #FFB800;} +div[xm-select-skin='warm'] .xm-select-linkage-group li:hover {border-left-color: #FFB800;} +div[xm-select-skin='danger'] .xm-select-linkage li.xm-select-this span {border-left-color: #FF5722;color: #FF5722;} +div[xm-select-skin='danger'] .xm-select-linkage-group li:hover {border-left-color: #FF5722;} + + +/* 快捷操作 */ +.xm-select-tips[style]:hover{background-color: #FFF!important;} +.xm-select-parent dd > .xm-cz{position: absolute; top: 0px; right: 10px;} +.xm-select-parent dd > .xm-cz-group{margin-right: 30px; border-right: 2px solid #ddd; height: 16px; margin-top: 10px; line-height: 16px; overflow: hidden;} +.xm-select-parent dd > .xm-cz-group .xm-cz{display: inline-block; margin-right: 30px;} +.xm-select-parent dd > .xm-cz-group .xm-cz i{margin-right: 10px;} +.xm-select-parent dd > .xm-cz-group[show='name'] .xm-cz i{display: none;} +.xm-select-parent dd > .xm-cz-group[show='icon'] .xm-cz span{display: none;} +.xm-select-parent dd .xm-cz:hover{color: #009688;} +div[xm-select-skin='default'] dd .xm-cz:hover{color: #C0C4CC;} +div[xm-select-skin='primary'] dd .xm-cz:hover{color: #009688;} +div[xm-select-skin='normal'] dd .xm-cz:hover{color: #1E9FFF;} +div[xm-select-skin='warm'] dd .xm-cz:hover{color: #FFB800;} +div[xm-select-skin='danger'] dd .xm-cz:hover{color: #FF5722;} + + +/* 下拉里面的搜索 */ +.xm-select-tips .xm-input{border: none; border-bottom: 1px solid #E6E6E6; padding-left: 27px;} +.xm-select-tips .icon-sousuo{position: absolute;} +.xm-select-tips.xm-dl-input{display: none;} +div[xm-select-search-type="1"] .xm-select-tips.xm-dl-input{display: block;} +div[xm-select-search-type="1"] .xm-select .xm-select-input{display: none !important;} + +/* 阿里巴巴矢量图标库 */ +@font-face {font-family: "xm-iconfont"; + src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); /* IE9*/ + src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), + url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); /* iOS 4.1- */ +} +.xm-iconfont {font-family:"xm-iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} +.icon-quanxuan:before { content: "\e62c"; } +.icon-caidan:before { content: "\e610"; } +.icon-fanxuan:before { content: "\e837"; } +.icon-pifu:before { content: "\e668"; } +.icon-qingkong:before { content: "\e63e"; } +.icon-sousuo:before { content: "\e600"; } +.icon-danx:before { content: "\e62b"; } +.icon-duox:before { content: "\e613"; } +.icon-close:before { content: "\e601"; } +.icon-expand:before { content: "\e641"; } + diff --git a/Pear Admin v 2.0/admin/data/menu.json b/Pear Admin v 2.0/admin/data/menu.json index f32e091..4420a51 100644 --- a/Pear Admin v 2.0/admin/data/menu.json +++ b/Pear Admin v 2.0/admin/data/menu.json @@ -92,6 +92,15 @@ "openType": "_iframe", "href": "view/common/basic/form.html", "spread": true + }, + { + "id": 213, + "title": "多选下拉", + "icon": "layui-icon layui-icon-face-smile", + "type": 1, + "openType": "_iframe", + "href": "view/common/basic/formSelects.html", + "spread": true } ] }, diff --git a/Pear Admin v 2.0/component/layui/lay/extends/formSelects-v4.js b/Pear Admin v 2.0/component/layui/lay/extends/formSelects-v4.js new file mode 100644 index 0000000..31b438c --- /dev/null +++ b/Pear Admin v 2.0/component/layui/lay/extends/formSelects-v4.js @@ -0,0 +1,1740 @@ +/** + * name: formSelects + * 基于Layui Select多选 + * version: 4.0.0.0910 + * http://sun.faysunshine.com/layui/formSelects-v4/dist/formSelects-v4.js + */ +(function(layui, window, factory) { + if(typeof exports === 'object') { // 支持 CommonJS + module.exports = factory(); + } else if(typeof define === 'function' && define.amd) { // 支持 AMD + define(factory); + } else if(window.layui && layui.define) { //layui加载 + layui.define(['jquery'], function(exports) { + exports('formSelects', factory()); + }); + } else { + window.formSelects = factory(); + } +})(typeof layui == 'undefined' ? null : layui, window, function() { + let v = '4.0.0.0910', + NAME = 'xm-select', + PNAME = 'xm-select-parent', + INPUT = 'xm-select-input', + TDIV = 'xm-select--suffix', + THIS = 'xm-select-this', + LABEL = 'xm-select-label', + SEARCH = 'xm-select-search', + SEARCH_TYPE = 'xm-select-search-type', + SHOW_COUNT = 'xm-select-show-count', + CREATE = 'xm-select-create', + CREATE_LONG = 'xm-select-create-long', + MAX = 'xm-select-max', + SKIN = 'xm-select-skin', + DIRECTION = "xm-select-direction", + HEIGHT = 'xm-select-height', + DISABLED = 'xm-dis-disabled', + DIS = 'xm-select-dis', + TEMP = 'xm-select-temp', + RADIO = 'xm-select-radio', + LINKAGE= 'xm-select-linkage', + DL = 'xm-select-dl', + DD_HIDE = 'xm-select-hide', + HIDE_INPUT = 'xm-hide-input', + SANJIAO = 'xm-select-sj', + ICON_CLOSE = 'xm-icon-close', + FORM_TITLE = 'xm-select-title', + FORM_SELECT = 'xm-form-select', + FORM_SELECTED = 'xm-form-selected', + FORM_NONE = 'xm-select-none', + FORM_EMPTY = 'xm-select-empty', + FORM_INPUT = 'xm-input', + FORM_DL_INPUT = 'xm-dl-input', + FORM_SELECT_TIPS = 'xm-select-tips', + CHECKBOX_YES = 'xm-iconfont', + FORM_TEAM_PID = 'XM_PID_VALUE', + CZ = 'xm-cz', + CZ_GROUP = 'xm-cz-group', + TIPS = '请选择', + data = {}, + events = { + on: {}, + endOn: {}, + filter: {}, + maxTips: {}, + opened: {}, + closed: {} + }, + ajax = { + type: 'get', + header: { + + }, + first: true, + data: {}, + searchUrl: '', + searchName: 'keyword', + searchVal: null, + keyName: 'name', + keyVal: 'value', + keySel: 'selected', + keyDis: 'disabled', + keyChildren: 'children', + dataType: '', + delay: 500, + beforeSuccess: null, + success: null, + error: null, + beforeSearch: null, + response: { + statusCode: 0, + statusName: 'code', + msgName: 'msg', + dataName: 'data' + }, + tree: { + nextClick: function(id, item, callback){ + callback([]); + }, + folderChoose: true, + lazy: true + } + }, + quickBtns = [ + {icon: 'xm-iconfont icon-quanxuan', name: '全选', click: function(id, cm){ + cm.selectAll(id, true, true); + }}, + {icon: 'xm-iconfont icon-qingkong', name: '清空', click: function(id, cm){ + cm.removeAll(id, true, true); + }}, + {icon: 'xm-iconfont icon-fanxuan', name: '反选', click: function(id, cm){ + cm.reverse(id, true, true); + }}, + {icon: 'xm-iconfont icon-pifu', name: '换肤', click: function(id, cm){ + cm.skin(id); + }} + ], + $ = window.$ || (window.layui && window.layui.jquery), + $win = $(window), + ajaxs = {}, + fsConfig = {}, + fsConfigs = {}, + FormSelects = function(options) { + this.config = { + name: null, //xm-select="xxx" + max: null, + maxTips: (id, vals, val, max) => { + let ipt = $(`[xid="${this.config.name}"]`).prev().find(`.${NAME}`); + if(ipt.parents('.layui-form-item[pane]').length) { + ipt = ipt.parents('.layui-form-item[pane]'); + } + ipt.attr('style', 'border-color: red !important'); + setTimeout(() => { + ipt.removeAttr('style'); + }, 300); + }, + init: null, //初始化的选择值, + on: null, //select值发生变化 + opened: null, + closed: null, + filter: (id, inputVal, val, isDisabled) => { + return val.name.indexOf(inputVal) == -1; + }, + clearid: -1, + direction: 'auto', + height: null, + isEmpty: false, + btns: [quickBtns[0], quickBtns[1], quickBtns[2]], + searchType: 0, + create: (id, name) => { + return Date.now(); + }, + template: (id, item) => { + return item.name; + }, + showCount: 0, + isCreate: false, + placeholder: TIPS, + clearInput: false, + }; + this.select = null; + this.values = []; + $.extend(this.config, options, { + searchUrl: options.isSearch ? options.searchUrl : null, + placeholder: options.optionsFirst ? ( + options.optionsFirst.value ? TIPS : (options.optionsFirst.innerHTML || TIPS) + ) : TIPS, + btns: options.radio ? [quickBtns[1]] : [quickBtns[0], quickBtns[1], quickBtns[2]], + }, fsConfigs[options.name] || fsConfig); + if(isNaN(this.config.showCount) || this.config.showCount <= 0) { + this.config.showCount = 19921012; + } + }; + + //一些简单的处理方法 + let Common = function(){ + this.appender(); + this.on(); + this.onreset(); + }; + + Common.prototype.appender = function(){//针对IE做的一些拓展 + //拓展Array map方法 + if(!Array.prototype.map){Array.prototype.map=function(i,h){var b,a,c,e=Object(this),f=e.length>>>0;if(h){b=h}a=new Array(f);c=0;while(c>>0;if(typeof g!=="function"){throw new TypeError(g+" is not a function")}if(arguments.length>1){d=b}c=0;while(c>>0;if(typeof b!=="function"){throw new TypeError()}var e=[];var d=arguments[1];for(var c=0;c { + let othis = $(select), + id = othis.attr(NAME), + hasLayuiRender = othis.next(`.layui-form-select`), + hasRender = othis.next(`.${PNAME}`), + options = { + name: id, + disabled: select.disabled, + max: othis.attr(MAX) - 0, + isSearch: othis.attr(SEARCH) != undefined, + searchUrl: othis.attr(SEARCH), + isCreate: othis.attr(CREATE) != undefined, + radio: othis.attr(RADIO) != undefined, + skin: othis.attr(SKIN), + direction: othis.attr(DIRECTION), + optionsFirst: select.options[0], + height: othis.attr(HEIGHT), + formname: othis.attr('name') || othis.attr('_name'), + layverify: othis.attr('lay-verify') || othis.attr('_lay-verify'), + layverType: othis.attr('lay-verType'), + searchType: othis.attr(SEARCH_TYPE) == 'dl' ? 1 : 0, + showCount: othis.attr(SHOW_COUNT) - 0, + }, + value = othis.find('option[selected]').toArray().map((option) => {//获取已选中的数据 + return { + name: option.innerHTML, + value: option.value, + } + }), + fs = new FormSelects(options); + + fs.values = value; + + if(fs.config.init) { + fs.values = fs.config.init.map(item => { + if(typeof item == 'object') { + return item; + } + return { + name: othis.find(`option[value="${item}"]`).text(), + value: item + } + }).filter(item => { + return item.name; + }); + fs.config.init = fs.values.concat([]); + }else{ + fs.config.init = value.concat([]); + } + + !fs.values && (fs.values = []); + + data[id] = fs; + + //先取消layui对select的渲染 + hasLayuiRender[0] && hasLayuiRender.remove(); + hasRender[0] && hasRender.remove(); + + //构造渲染div + let dinfo = this.renderSelect(id, fs.config.placeholder, select); + let heightStyle = !fs.config.height || fs.config.height == 'auto' ? '' : `xm-hg style="height: 34px;"`; + let inputHtml = [ + `
`, + ``, + `
` + ]; + let reElem = + $(`
+ +
+
+ ${inputHtml.join('')} + +
+
+ +
+
+
+
${dinfo}
+
`); + + var $parent = $(`
`); + $parent.append(reElem) + othis.after($parent); + othis.attr('lay-ignore', ''); + othis.removeAttr('name') && othis.attr('_name', fs.config.formname); + othis.removeAttr('lay-verify') && othis.attr('_lay-verify', fs.config.layverify); + + //如果可搜索, 加上事件 + if(fs.config.isSearch){ + ajaxs[id] = $.extend({}, ajax, {searchUrl: fs.config.searchUrl}, ajaxs[id]); + $(document).on('input', `div.${PNAME}[FS_ID="${id}"] .${INPUT}`, (e) => { + this.search(id, e, fs.config.searchUrl); + }); + if(fs.config.searchUrl){//触发第一次请求事件 + this.triggerSearch(reElem, true); + } + }else{//隐藏第二个dl + reElem.find(`dl dd.${FORM_DL_INPUT}`).css('display', 'none'); + } + }); + } + + Common.prototype.search = function(id, e, searchUrl, call){ + let input; + if(call){ + input = call; + }else{ + input = e.target; + let keyCode = e.keyCode; + if(keyCode === 9 || keyCode === 13 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) { + return false; + } + } + let inputValue = $.trim(input.value); + //过滤一下tips + this.changePlaceHolder($(input)); + + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + searchUrl = ajaxConfig.searchUrl || searchUrl; + let fs = data[id], + isCreate = fs.config.isCreate, + reElem = $(`dl[xid="${id}"]`).parents(`.${FORM_SELECT}`); + //如果开启了远程搜索 + if(searchUrl){ + if(ajaxConfig.searchVal){ + inputValue = ajaxConfig.searchVal; + ajaxConfig.searchVal = ''; + } + if(!ajaxConfig.beforeSearch || (ajaxConfig.beforeSearch && ajaxConfig.beforeSearch instanceof Function && ajaxConfig.beforeSearch(id, searchUrl, inputValue))){ + let delay = ajaxConfig.delay; + if(ajaxConfig.first){ + ajaxConfig.first = false; + delay = 10; + } + clearTimeout(fs.clearid); + fs.clearid = setTimeout(() => { + reElem.find(`dl > *:not(.${FORM_SELECT_TIPS})`).remove(); + reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('请求中'); + this.ajax(id, searchUrl, inputValue, false, null, true); + }, delay); + } + }else{ + reElem.find(`dl .${DD_HIDE}`).removeClass(DD_HIDE); + //遍历选项, 选择可以显示的值 + reElem.find(`dl dd:not(.${FORM_SELECT_TIPS})`).each((idx, item) => { + let _item = $(item); + let searchFun = events.filter[id] || data[id].config.filter; + if(searchFun && searchFun(id, inputValue, this.getItem(id, _item), _item.hasClass(DISABLED)) == true){ + _item.addClass(DD_HIDE); + } + }); + //控制分组名称 + reElem.find('dl dt').each((index, item) => { + if(!$(item).nextUntil('dt', `:not(.${DD_HIDE})`).length) { + $(item).addClass(DD_HIDE); + } + }); + //动态创建 + this.create(id, isCreate, inputValue); + let shows = reElem.find(`dl dd:not(.${FORM_SELECT_TIPS}):not(.${DD_HIDE})`); + if(!shows.length){ + reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('无匹配项'); + }else{ + reElem.find(`dd.${FORM_NONE}`).removeClass(FORM_EMPTY); + } + } + } + + Common.prototype.isArray = function(obj){ + return Object.prototype.toString.call(obj) == "[object Array]"; + } + + Common.prototype.triggerSearch = function(div, isCall){ + (div ? [div] : $(`.${FORM_SELECT}`).toArray()).forEach((reElem, index) => { + reElem = $(reElem); + let id = reElem.find('dl').attr('xid') + if((id && data[id] && data[id].config.isEmpty) || isCall){ + this.search(id, null, null, data[id].config.searchType == 0 ? reElem.find(`.${LABEL} .${INPUT}`) : reElem.find(`dl .${FORM_DL_INPUT} .${INPUT}`)); + } + }); + } + + Common.prototype.clearInput = function(id){ + let div = $(`.${PNAME}[fs_id="${id}"]`); + let input = data[id].config.searchType == 0 ? div.find(`.${LABEL} .${INPUT}`) : div.find(`dl .${FORM_DL_INPUT} .${INPUT}`); + input.val(''); + } + + Common.prototype.ajax = function(id, searchUrl, inputValue, isLinkage, linkageWidth, isSearch, successCallback, isReplace){ + let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`); + if(!reElem[0] || !searchUrl){ + return ; + } + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + let ajaxData = $.extend(true, {}, ajaxConfig.data); + ajaxData[ajaxConfig.searchName] = inputValue; + //是否需要对ajax添加随机时间 + //ajaxData['_'] = Date.now(); + $.ajax({ + type: ajaxConfig.type, + headers: ajaxConfig.header, + url: searchUrl, + data: ajaxConfig.dataType == 'json' ? JSON.stringify(ajaxData) : ajaxData, + success: (res) => { + if(typeof res == 'string'){ + res = JSON.parse(res); + } + ajaxConfig.beforeSuccess && ajaxConfig.beforeSuccess instanceof Function && (res = ajaxConfig.beforeSuccess(id, searchUrl, inputValue, res)); + if(this.isArray(res)){ + let newRes = {}; + newRes[ajaxConfig.response.statusName] = ajaxConfig.response.statusCode; + newRes[ajaxConfig.response.msgName] = ""; + newRes[ajaxConfig.response.dataName] = res; + res = newRes; + } + if(res[ajaxConfig.response.statusName] != ajaxConfig.response.statusCode) { + reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text(res[ajaxConfig.response.msgName]); + }else{ + reElem.find(`dd.${FORM_NONE}`).removeClass(FORM_EMPTY); + this.renderData(id, res[ajaxConfig.response.dataName], isLinkage, linkageWidth, isSearch, isReplace); + data[id].config.isEmpty = res[ajaxConfig.response.dataName].length == 0; + } + successCallback && successCallback(id); + ajaxConfig.success && ajaxConfig.success instanceof Function && ajaxConfig.success(id, searchUrl, inputValue, res); + }, + error: (err) => { + reElem.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS})`).remove(); + reElem.find(`dd.${FORM_NONE}`).addClass(FORM_EMPTY).text('服务异常'); + ajaxConfig.error && ajaxConfig.error instanceof Function && ajaxConfig.error(id, searchUrl, inputValue, err); + } + }); + } + + Common.prototype.renderData = function(id, dataArr, linkage, linkageWidth, isSearch, isReplace){ + if(linkage){//渲染多级联动 + this.renderLinkage(id, dataArr, linkageWidth); + return; + } + if(isReplace){ + this.renderReplace(id, dataArr); + return; + } + + let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`); + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + let pcInput = reElem.find(`.${TDIV} input`); + + dataArr = this.exchangeData(id, dataArr); + let values = []; + reElem.find('dl').html(this.renderSelect(id, pcInput.attr('placeholder') || pcInput.attr('back'), dataArr.map((item) => { + let itemVal = $.extend({}, item, { + innerHTML: item[ajaxConfig.keyName], + value: item[ajaxConfig.keyVal], + sel: item[ajaxConfig.keySel], + disabled: item[ajaxConfig.keyDis], + type: item.type, + name: item[ajaxConfig.keyName] + }); + if(itemVal.sel){ + values.push(itemVal); + } + return itemVal; + }))); + + let label = reElem.find(`.${LABEL}`); + let dl = reElem.find('dl[xid]'); + if(isSearch){//如果是远程搜索, 这里需要判重 + let oldVal = data[id].values; + oldVal.forEach((item, index) => { + dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS); + }); + values.forEach((item, index) => { + if(this.indexOf(oldVal, item) == -1){ + this.addLabel(id, label, item); + dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS); + oldVal.push(item); + } + }); + }else{ + values.forEach((item, index) => { + this.addLabel(id, label, item); + dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS); + }); + data[id].values = values; + } + this.commonHandler(id, label); + } + + Common.prototype.renderLinkage = function(id, dataArr, linkageWidth){ + let result = [], + index = 0, + temp = {"0": dataArr}, + ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + db[id] = {}; + do{ + let group = result[index ++] = [], + _temp = temp; + temp = {}; + $.each(_temp, (pid, arr) => { + $.each(arr, (idx, item) => { + let val = { + pid: pid, + name: item[ajaxConfig.keyName], + value: item[ajaxConfig.keyVal], + }; + db[id][val.value] = $.extend(item, val); + group.push(val); + let children = item[ajaxConfig.keyChildren]; + if(children && children.length){ + temp[val.value] = children; + } + }); + }); + }while(Object.getOwnPropertyNames(temp).length); + + let reElem = $(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`); + let html = ['
']; + + $.each(result, (idx, arr) => { + let groupDiv = [`
`]; + $.each(arr, (idx2, item) => { + let span = `
  • ${item.name}
    • `; + groupDiv.push(span); + }); + groupDiv.push(`
    `); + html = html.concat(groupDiv); + }); + html.push('
    '); + html.push('
    '); + reElem.find('dl').html(html.join('')); + reElem.find(`.${INPUT}`).css('display', 'none');//联动暂时不支持搜索 + } + + Common.prototype.renderReplace = function(id, dataArr){ + let dl = $(`.${PNAME} dl[xid="${id}"]`); + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + + dataArr = this.exchangeData(id, dataArr); + db[id] = dataArr; + + let html = dataArr.map((item) => { + let itemVal = $.extend({}, item, { + innerHTML: item[ajaxConfig.keyName], + value: item[ajaxConfig.keyVal], + sel: item[ajaxConfig.keySel], + disabled: item[ajaxConfig.keyDis], + type: item.type, + name: item[ajaxConfig.keyName] + }); + return this.createDD(id, itemVal); + }).join(''); + + dl.find(`dd:not(.${FORM_SELECT_TIPS}),dt:not([style])`).remove(); + dl.find(`dt[style]`).after($(html)); + } + + Common.prototype.exchangeData = function(id, arr){//这里处理树形结构 + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + let childrenName = ajaxConfig['keyChildren']; + let disabledName = ajaxConfig['keyDis']; + db[id] = {}; + let result = this.getChildrenList(arr, childrenName, disabledName, [], false); + return result; + } + + Common.prototype.getChildrenList = function(arr, childrenName, disabledName, pid, disabled){ + let result = [], offset = 0; + for(let a = 0; a < arr.length; a ++){ + let item = arr[a]; + if(item.type && item.type == 'optgroup'){ + result.push(item); + continue; + }else{ + offset ++; + } + let parentIds = pid.concat([]); + parentIds.push(`${offset - 1}_E`); + item[FORM_TEAM_PID] = JSON.stringify(parentIds); + item[disabledName] = item[disabledName] || disabled; + result.push(item); + let child = item[childrenName]; + if(child && common.isArray(child) && child.length){ + item['XM_TREE_FOLDER'] = true; + let pidArr = parentIds.concat([]); + let childResult = this.getChildrenList(child, childrenName, disabledName, pidArr, item[disabledName]); + result = result.concat(childResult); + } + } + return result; + } + + Common.prototype.create = function(id, isCreate, inputValue){ + if(isCreate && inputValue){ + let fs = data[id], + dl = $(`[xid="${id}"]`), + tips= dl.find(`dd.${FORM_SELECT_TIPS}.${FORM_DL_INPUT}`), + tdd = null, + temp = dl.find(`dd.${TEMP}`); + dl.find(`dd:not(.${FORM_SELECT_TIPS}):not(.${TEMP})`).each((index, item) => { + if(inputValue == $(item).find('span').attr('name')){ + tdd = item; + } + }); + if(!tdd){//如果不存在, 则创建 + let val = fs.config.create(id, inputValue); + if(temp[0]){ + temp.attr('lay-value', val); + temp.find('span').text(inputValue); + temp.find('span').attr("name", inputValue); + temp.removeClass(DD_HIDE); + }else{ + tips.after($(this.createDD(id, { + name: inputValue, + innerHTML: inputValue, + value: val + }, `${TEMP} ${CREATE_LONG}`))); + } + } + }else{ + $(`[xid=${id}] dd.${TEMP}`).remove(); + } + } + + Common.prototype.createDD = function(id, item, clz){ + let ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax; + let name = $.trim(item.innerHTML); + db[id][item.value] = $(item).is('option') ? (item = function(){ + let resultItem = {}; + resultItem[ajaxConfig.keyName] = name; + resultItem[ajaxConfig.keyVal] = item.value; + resultItem[ajaxConfig.keyDis] = item.disabled; + return resultItem; + }()) : item; + let template = data[id].config.template(id, item); + let pid = item[FORM_TEAM_PID]; + pid ? (pid = JSON.parse(pid)) : (pid = [-1]); + let attr = pid[0] == -1 ? '' : `tree-id="${pid.join('-')}" tree-folder="${!!item['XM_TREE_FOLDER']}"`; + return `
    +
    + + ${template} +
    +
    `; + } + + Common.prototype.createQuickBtn = function(obj, right){ + return `
    ${obj.name}
    ` + } + + Common.prototype.renderBtns = function(id, show, right){ + let quickBtn = []; + let dl = $(`dl[xid="${id}"]`); + quickBtn.push(`
    `); + $.each(data[id].config.btns, (index, item) => { + quickBtn.push(this.createQuickBtn(item, right)); + }); + quickBtn.push(`
    `); + quickBtn.push(this.createQuickBtn({icon: 'xm-iconfont icon-caidan', name: ''})); + return quickBtn.join(''); + } + + Common.prototype.renderSelect = function(id, tips, select){ + db[id] = {}; + let arr = []; + if(data[id].config.btns.length){ + setTimeout(() => { + let dl = $(`dl[xid="${id}"]`); + dl.parents(`.${FORM_SELECT}`).attr(SEARCH_TYPE, data[id].config.searchType); + dl.find(`.${CZ_GROUP}`).css('max-width', `${dl.prev().width() - 54}px`); + }, 10) + arr.push([ + `
    `, + this.renderBtns(id, null, '30px'), + `
    `, + `
    `, + ``, + ``, + `
    ` + ].join('')); + }else{ + arr.push(`
    ${tips}
    `); + } + if(this.isArray(select)){ + $(select).each((index, item) => { + if(item){ + if(item.type && item.type === 'optgroup') { + arr.push(`
    ${item.name}
    `); + } else { + arr.push(this.createDD(id, item)); + } + } + }); + }else{ + $(select).find('*').each((index, item) => { + if(item.tagName.toLowerCase() == 'option' && index == 0 && !item.value){ + return ; + } + if(item.tagName.toLowerCase() === 'optgroup') { + arr.push(`
    ${item.label}
    `); + } else { + arr.push(this.createDD(id, item)); + } + }); + } + arr.push('
    '); + arr.push(`
    没有选项
    `); + return arr.join(''); + } + + Common.prototype.on = function(){//事件绑定 + this.one(); + + $(document).on('click', (e) => { + if(!$(e.target).parents(`.${FORM_TITLE}`)[0]){//清空input中的值 + $(`.${PNAME} dl .${DD_HIDE}`).removeClass(DD_HIDE); + $(`.${PNAME} dl dd.${FORM_EMPTY}`).removeClass(FORM_EMPTY); + $(`.${PNAME} dl dd.${TEMP}`).remove(); + $.each(data, (key, fs) => { + this.clearInput(key); + if(!fs.values.length){ + this.changePlaceHolder($(`div[FS_ID="${key}"] .${LABEL}`)); + } + }); + } + $(`.${PNAME} .${FORM_SELECTED}`).each((index, item) => { + this.changeShow($(item).find(`.${FORM_TITLE}`), false); + }) ; + }); + } + + Common.prototype.calcLabelLeft = function(label, w, call){ + let pos = this.getPosition(label[0]); + pos.y = pos.x + label[0].clientWidth; + let left = label[0].offsetLeft; + if(!label.find('span').length){ + left = 0; + }else if(call){//校正归位 + let span = label.find('span:last'); + span.css('display') == 'none' ? (span = span.prev()[0]) : (span = span[0]); + let spos = this.getPosition(span); + spos.y = spos.x + span.clientWidth; + + if(spos.y > pos.y){ + left = left - (spos.y - pos.y) - 5; + }else{ + left = 0; + } + }else{ + if(w < 0){ + let span = label.find(':last'); + span.css('display') == 'none' ? (span = span.prev()[0]) : (span = span[0]); + let spos = this.getPosition(span); + spos.y = spos.x + span.clientWidth; + if(spos.y > pos.y){ + left -= 10; + } + }else{ + if(left < 0){ + left += 10; + } + if(left > 0){ + left = 0; + } + } + } + label.css('left', left + 'px'); + } + + Common.prototype.one = function(target){//一次性事件绑定 + $(target ? target : document).off('click', `.${FORM_TITLE}`).on('click', `.${FORM_TITLE}`, (e) => { + let othis = $(e.target), + title = othis.is(FORM_TITLE) ? othis : othis.parents(`.${FORM_TITLE}`), + dl = title.next(), + id = dl.attr('xid'); + + //清空非本select的input val + $(`dl[xid]`).not(dl).each((index, item) => { + this.clearInput($(item).attr('xid')); + }); + $(`dl[xid]`).not(dl).find(`dd.${DD_HIDE}`).removeClass(DD_HIDE); + + //如果是disabled select + if(title.hasClass(DIS)){ + return false; + } + //如果点击的是右边的三角或者只读的input + if(othis.is(`.${SANJIAO}`) || othis.is(`.${INPUT}[readonly]`)){ + this.changeShow(title, !title.parents(`.${FORM_SELECT}`).hasClass(FORM_SELECTED)); + return false; + } + //如果点击的是input的右边, focus一下 + if(title.find(`.${INPUT}:not(readonly)`)[0]){ + let input = title.find(`.${INPUT}`), + epos = {x: e.pageX, y: e.pageY}, + pos = this.getPosition(title[0]), + width = title.width(); + while(epos.x > pos.x){ + if($(document.elementFromPoint(epos.x, epos.y)).is(input)){ + input.focus(); + this.changeShow(title, true); + return false; + } + epos.x -= 50; + } + } + + //如果点击的是可搜索的input + if(othis.is(`.${INPUT}`)){ + this.changeShow(title, true); + return false; + } + //如果点击的是x按钮 + if(othis.is(`i[fsw="${NAME}"]`)){ + let val = this.getItem(id, othis), + dd = dl.find(`dd[lay-value='${val.value}']`); + if(dd.hasClass(DISABLED)){//如果是disabled状态, 不可选, 不可删 + return false; + } + this.handlerLabel(id, dd, false, val); + return false; + } + + this.changeShow(title, !title.parents(`.${FORM_SELECT}`).hasClass(FORM_SELECTED)); + return false; + }); + $(target ? target : document).off('click', `dl.${DL}`).on('click', `dl.${DL}`, (e) => { + let othis = $(e.target); + if(othis.is(`.${LINKAGE}`) || othis.parents(`.${LINKAGE}`)[0]){//linkage的处理 + othis = othis.is('li') ? othis : othis.parents('li[xm-value]'); + let group = othis.parents('.xm-select-linkage-group'), + id = othis.parents('dl').attr('xid'); + if(!id){ + return false; + } + //激活li + group.find('.xm-select-active').removeClass('xm-select-active'); + othis.addClass('xm-select-active'); + //激活下一个group, 激活前显示对应数据 + group.nextAll('.xm-select-linkage-group').addClass('xm-select-linkage-hide'); + let nextGroup = group.next('.xm-select-linkage-group'); + nextGroup.find('li').addClass('xm-select-linkage-hide'); + nextGroup.find(`li[pid="${othis.attr('xm-value')}"]`).removeClass('xm-select-linkage-hide'); + //如果没有下一个group, 或没有对应的值 + if(!nextGroup[0] || nextGroup.find(`li:not(.xm-select-linkage-hide)`).length == 0){ + let vals = [], + index = 0, + isAdd = !othis.hasClass('xm-select-this'); + if(data[id].config.radio){ + othis.parents('.xm-select-linkage').find('.xm-select-this').removeClass('xm-select-this'); + } + do{ + vals[index ++] = { + name: othis.find('span').text(), + value: othis.attr('xm-value') + } + othis = othis.parents('.xm-select-linkage-group').prev().find(`li[xm-value="${othis.attr('pid')}"]`); + }while(othis.length); + vals.reverse(); + let val = { + name: vals.map((item) => { + return item.name; + }).join('/'), + value: vals.map((item) => { + return item.value; + }).join('/'), + } + this.handlerLabel(id, null, isAdd, val); + }else{ + nextGroup.removeClass('xm-select-linkage-hide'); + } + return false; + } + + if(othis.is('dl')){ + return false; + } + + if(othis.is('dt')){ + othis.nextUntil(`dt`).each((index, item) => { + item = $(item); + if(item.hasClass(DISABLED) || item.hasClass(THIS)){ + + }else{ + item.find('i:not(.icon-expand)').click(); + } + }); + return false; + } + let dd = othis.is('dd') ? othis : othis.parents('dd'); + let id = dd.parent('dl').attr('xid'); + + if(dd.hasClass(DISABLED)){//被禁用选项的处理 + return false; + } + + //菜单功效 + if(othis.is('i.icon-caidan')){ + let opens = [], closes = []; + othis.parents('dl').find('dd[tree-folder="true"]').each((index, item) => { + $(item).attr('xm-tree-hidn') == undefined ? opens.push(item) : closes.push(item); + }); + let arr = closes.length ? closes : opens; + arr.forEach(item => item.click()); + return false; + } + //树状结构的选择 + let treeId = dd.attr('tree-id'); + if(treeId){ + //忽略右边的图标 + if(othis.is('i:not(.icon-expand)')){ + this.handlerLabel(id, dd, !dd.hasClass(THIS)); + return false; + } + let ajaxConfig = ajaxs[id] || ajax; + let treeConfig = ajaxConfig.tree; + let childrens = dd.nextAll(`dd[tree-id^="${treeId}"]`); + if(childrens && childrens.length){ + let len = childrens[0].clientHeight; + len ? ( + this.addTreeHeight(dd, len), + len = 0 + ) : ( + len = dd.attr('xm-tree-hidn') || 36, + dd.removeAttr('xm-tree-hidn'), + dd.find('>i').remove(), + (childrens = childrens.filter((index, item) => $(item).attr('tree-id').split('-').length - 1 == treeId.split('-').length)) + ); + childrens.animate({ + height: len + }, 150) + return false; + }else{ + if(treeConfig.nextClick && treeConfig.nextClick instanceof Function){ + treeConfig.nextClick(id, this.getItem(id, dd), (res) => { + if(!res || !res.length){ + this.handlerLabel(id, dd, !dd.hasClass(THIS)); + }else{ + dd.attr('tree-folder', 'true'); + let ddChilds = []; + res.forEach((item, idx) => { + item.innerHTML = item[ajaxConfig.keyName]; + item[FORM_TEAM_PID] = JSON.stringify(treeId.split('-').concat([idx])); + ddChilds.push(this.createDD(id, item)); + db[id][item[ajaxConfig.keyVal]] = item; + }); + dd.after(ddChilds.join('')); + } + }); + return false; + } + } + } + + if(dd.hasClass(FORM_SELECT_TIPS)){//tips的处理 + let btn = othis.is(`.${CZ}`) ? othis : othis.parents(`.${CZ}`); + if(!btn[0]){ + return false; + } + let method = btn.attr('method'); + let obj = data[id].config.btns.filter(bean => bean.name == method)[0]; + obj && obj.click && obj.click instanceof Function && obj.click(id, this); + return false; + } + this.handlerLabel(id, dd, !dd.hasClass(THIS)); + return false; + }); + } + + Common.prototype.addTreeHeight = function(dd, len){ + let treeId = dd.attr('tree-id'); + let childrens = dd.nextAll(`dd[tree-id^="${treeId}"]`); + if(childrens.length){ + dd.append(''); + dd.attr('xm-tree-hidn', len); + childrens.each((index, item) => { + let that = $(item); + this.addTreeHeight(that, len); + }) + } + } + + let db = {}; + Common.prototype.getItem = function(id, value){ + if(value instanceof $){ + if(value.is(`i[fsw="${NAME}"]`)){ + let span = value.parent(); + return db[id][value] || { + name: span.find('font').text(), + value: span.attr('value') + } + } + let val = value.attr('lay-value'); + return !db[id][val] ? (db[id][val] = { + name: value.find('span[name]').attr('name'), + value: val + }) : db[id][val]; + }else if(typeof(value) == 'string' && value.indexOf('/') != -1){ + return db[id][value] || { + name: this.valToName(id, value), + value: value + } + } + return db[id][value]; + } + + Common.prototype.linkageAdd = function(id, val){ + let dl = $(`dl[xid="${id}"]`); + dl.find('.xm-select-active').removeClass('xm-select-active'); + let vs = val.value.split('/'); + let pid, li, index = 0; + let lis = []; + do{ + pid = vs[index]; + li = dl.find(`.xm-select-linkage-group${index + 1} li[xm-value="${pid}"]`); + li[0] && lis.push(li); + index ++; + }while(li.length && pid != undefined); + if(lis.length == vs.length){ + $.each(lis, (idx, item) => { + item.addClass('xm-select-this'); + }); + } + } + + Common.prototype.linkageDel = function(id, val){ + let dl = $(`dl[xid="${id}"]`); + let vs = val.value.split('/'); + let pid, li, index = vs.length - 1; + do{ + pid = vs[index]; + li = dl.find(`.xm-select-linkage-group${index + 1} li[xm-value="${pid}"]`); + if(!li.parent().next().find(`li[pid=${pid}].xm-select-this`).length){ + li.removeClass('xm-select-this'); + } + index --; + }while(li.length && pid != undefined); + } + + Common.prototype.valToName = function(id, val){ + let dl = $(`dl[xid="${id}"]`); + let vs = (val + "").split('/'); + if(!vs.length){ + return null; + } + let names = []; + $.each(vs, (idx, item) => { + let name = dl.find(`.xm-select-linkage-group${idx + 1} li[xm-value="${item}"] span`).text(); + names.push(name); + }); + return names.length == vs.length ? names.join('/') : null; + } + + Common.prototype.commonHandler = function(key, label){ + if(!label || !label[0]){ + return ; + } + this.checkHideSpan(key, label); + //计算input的提示语 + this.changePlaceHolder(label); + //计算高度 + this.retop(label.parents(`.${FORM_SELECT}`)); + this.calcLabelLeft(label, 0, true); + //表单默认值 + this.setHidnVal(key, label); + //title值 + label.parents(`.${FORM_TITLE} .${NAME}`).attr('title', data[key].values.map((val) => { + return val.name; + }).join(',')); + } + + Common.prototype.initVal = function(id){ + let target = {}; + if(id){ + target[id] = data[id]; + }else{ + target = data; + } + $.each(target, (key, val) => { + let values = val.values, + div = $(`dl[xid="${key}"]`).parent(), + label = div.find(`.${LABEL}`), + dl = div.find('dl'); + dl.find(`dd.${THIS}`).removeClass(THIS); + + let _vals = values.concat([]); + _vals.concat([]).forEach((item, index) => { + this.addLabel(key, label, item); + dl.find(`dd[lay-value="${item.value}"]`).addClass(THIS); + }); + if(val.config.radio){ + _vals.length && values.push(_vals[_vals.length - 1]); + } + this.commonHandler(key, label); + }); + } + + Common.prototype.setHidnVal = function(key, label) { + if(!label || !label[0]) { + return; + } + label.parents(`.${PNAME}`).find(`.${HIDE_INPUT}`).val(data[key].values.map((val) => { + return val.value; + }).join(',')); + } + + Common.prototype.handlerLabel = function(id, dd, isAdd, oval, notOn){ + let div = $(`[xid="${id}"]`).prev().find(`.${LABEL}`), + val = dd && this.getItem(id, dd), + vals = data[id].values, + on = data[id].config.on || events.on[id], + endOn = data[id].config.endOn || events.endOn[id]; + if(oval){ + val = oval; + } + let fs = data[id]; + if(isAdd && fs.config.max && fs.values.length >= fs.config.max){ + let maxTipsFun = events.maxTips[id] || data[id].config.maxTips; + maxTipsFun && maxTipsFun(id, vals.concat([]), val, fs.config.max); + return ; + } + if(!notOn){ + if(on && on instanceof Function && on(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED)) == false) { + return ; + } + } + let dl = $(`dl[xid="${id}"]`); + isAdd ? ( + (dd && dd[0] ? ( + dd.addClass(THIS), + dd.removeClass(TEMP) + ) : ( + dl.find('.xm-select-linkage')[0] && this.linkageAdd(id, val) + )), + this.addLabel(id, div, val), + vals.push(val) + ) : ( + (dd && dd[0] ? ( + dd.removeClass(THIS) + ) : ( + dl.find('.xm-select-linkage')[0] && this.linkageDel(id, val) + )), + this.delLabel(id, div, val), + this.remove(vals, val) + ); + if(!div[0]) return ; + //单选选完后直接关闭选择域 + if(fs.config.radio){ + this.changeShow(div, false); + } + //移除表单验证的红色边框 + div.parents(`.${FORM_TITLE}`).prev().removeClass('layui-form-danger'); + + //清空搜索值 + fs.config.clearInput && this.clearInput(id); + + this.commonHandler(id, div); + + !notOn && endOn && endOn instanceof Function && endOn(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED)); + } + + Common.prototype.addLabel = function(id, div, val){ + if(!val) return ; + let tips = `fsw="${NAME}"`; + let [$label, $close] = [ + $(`${val.name}`), + $(``) + ]; + $label.append($close); + //如果是radio模式 + let fs = data[id]; + if(fs.config.radio){ + fs.values.length = 0; + $(`dl[xid="${id}"]`).find(`dd.${THIS}:not([lay-value="${val.value}"])`).removeClass(THIS); + div.find('span').remove(); + } + //如果是固定高度 + div.find('input').css('width', '50px'); + div.find('input').before($label); + } + + Common.prototype.delLabel = function(id, div, val){ + if(!val) return ; + div.find(`span[value="${val.value}"]:first`).remove(); + } + + Common.prototype.checkHideSpan = function(id, div){ + let parentHeight = div.parents(`.${NAME}`)[0].offsetHeight + 5; + div.find('span.xm-span-hide').removeClass('xm-span-hide'); + div.find('span[style]').remove(); + + let count = data[id].config.showCount; + div.find('span').each((index, item) => { + if(index >= count){ + $(item).addClass('xm-span-hide'); + } + }); + + let prefix = div.find(`span:eq(${count})`); + prefix[0] && prefix.before($(` + ${div.find('span').length - count}`)) + } + + Common.prototype.retop = function(div){//计算dl显示的位置 + let dl = div.find('dl'), + top = div.offset().top + div.outerHeight() + 5 - $win.scrollTop(), + dlHeight = dl.outerHeight(); + let up = div.hasClass('layui-form-selectup') || dl.css('top').indexOf('-') != -1 || (top + dlHeight > $win.height() && top >= dlHeight); + div = div.find(`.${NAME}`); + + let fs = data[dl.attr('xid')]; + let base = dl.parents('.layui-form-pane')[0] && dl.prev()[0].clientHeight > 38 ? 14 : 10; + if((fs && fs.config.direction == 'up') || up){ + up = true; + if((fs && fs.config.direction == 'down')){ + up = false; + } + } + let reHeight = div[0].offsetTop + div.height() + base; + if(up) { + dl.css({ + top: 'auto', + bottom: reHeight + 3 + 'px', + }); + } else { + dl.css({ + top: reHeight + 'px', + bottom: 'auto' + }); + } + } + + Common.prototype.changeShow = function(children, isShow){//显示于隐藏 + $('.layui-form-selected').removeClass('layui-form-selected'); + let top = children.parents(`.${FORM_SELECT}`), + realShow = top.hasClass(FORM_SELECTED), + id = top.find('dl').attr('xid'); + $(`.${PNAME} .${FORM_SELECT}`).not(top).removeClass(FORM_SELECTED); + if(isShow){ + this.retop(top); + top.addClass(FORM_SELECTED); + top.find(`.${INPUT}`).focus(); + if(!top.find(`dl dd[lay-value]:not(.${FORM_SELECT_TIPS})`).length){ + top.find(`dl .${FORM_NONE}`).addClass(FORM_EMPTY); + } + }else{ + top.removeClass(FORM_SELECTED); + this.clearInput(id); + top.find(`dl .${FORM_EMPTY}`).removeClass(FORM_EMPTY); + top.find(`dl dd.${DD_HIDE}`).removeClass(DD_HIDE); + top.find(`dl dd.${TEMP}`).remove(); + //计算ajax数据是否为空, 然后重新请求数据 + if(id && data[id] && data[id].config.isEmpty){ + this.triggerSearch(top); + } + this.changePlaceHolder(top.find(`.${LABEL}`)); + } + if(isShow != realShow){ + let openFun = data[id].config.opened || events.opened[id]; + isShow && openFun && openFun instanceof Function && openFun(id); + let closeFun = data[id].config.closed || events.closed[id]; + !isShow && closeFun && closeFun instanceof Function && closeFun(id); + } + } + + Common.prototype.changePlaceHolder = function(div){//显示于隐藏提示语 + //调整pane模式下的高度 + let title = div.parents(`.${FORM_TITLE}`); + title[0] || (title = div.parents(`dl`).prev()); + if(!title[0]){ + return ; + } + + let id = div.parents(`.${PNAME}`).find(`dl[xid]`).attr('xid'); + if(data[id] && data[id].config.height){//既然固定高度了, 那就看着办吧 + + }else{ + let height = title.find(`.${NAME}`)[0].clientHeight; + title.css('height' , (height > 36 ? height + 4 : height) + 'px'); + //如果是layui pane模式, 处理label的高度 + let label = title.parents(`.${PNAME}`).parent().prev(); + if(label.is('.layui-form-label') && title.parents('.layui-form-pane')[0]){ + height = height > 36 ? height + 4 : height; + title.css('height' , height + 'px'); + label.css({ + height: height + 2 + 'px', + lineHeight: (height - 18) + 'px' + }) + } + } + + let input = title.find(`.${TDIV} input`), + isShow = !div.find('span:last')[0] && !title.find(`.${INPUT}`).val(); + if(isShow){ + let ph = input.attr('back'); + input.removeAttr('back'); + input.attr('placeholder', ph); + }else{ + let ph = input.attr('placeholder'); + input.removeAttr('placeholder'); + input.attr('back', ph) + } + } + + Common.prototype.indexOf = function(arr, val){ + for(let i = 0; i < arr.length; i++) { + if(arr[i].value == val || arr[i].value == (val ? val.value : val) || arr[i] == val || JSON.stringify(arr[i]) == JSON.stringify(val)) { + return i; + } + } + return -1; + } + + Common.prototype.remove = function(arr, val){ + let idx = this.indexOf(arr, val ? val.value : val); + if(idx > -1) { + arr.splice(idx, 1); + return true; + } + return false; + } + + Common.prototype.selectAll = function(id, isOn, skipDis){ + let dl = $(`[xid="${id}"]`); + if(!dl[0]){ + return ; + } + if(dl.find('.xm-select-linkage')[0]){ + return ; + } + dl.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS}):not(.${THIS})${skipDis ? ':not(.'+DISABLED+')' :''}`).each((index, item) => { + item = $(item); + let val = this.getItem(id, item); + this.handlerLabel(id, dl.find(`dd[lay-value="${val.value}"]`), true, val, !isOn); + }); + } + + Common.prototype.removeAll = function(id, isOn, skipDis){ + let dl = $(`[xid="${id}"]`); + if(!dl[0]){ + return ; + } + if(dl.find('.xm-select-linkage')[0]){//针对多级联动的处理 + data[id].values.concat([]).forEach((item, idx) => { + let vs = item.value.split('/'); + let pid, li, index = 0; + do{ + pid = vs[index ++]; + li = dl.find(`.xm-select-linkage-group${index}:not(.xm-select-linkage-hide) li[xm-value="${pid}"]`); + li.click(); + }while(li.length && pid != undefined); + }); + return ; + } + data[id].values.concat([]).forEach((item, index) => { + if(skipDis && dl.find(`dd[lay-value="${item.value}"]`).hasClass(DISABLED)){ + + }else{ + this.handlerLabel(id, dl.find(`dd[lay-value="${item.value}"]`), false, item, !isOn); + } + }); + } + + Common.prototype.reverse = function(id, isOn, skipDis){ + let dl = $(`[xid="${id}"]`); + if(!dl[0]){ + return ; + } + if(dl.find('.xm-select-linkage')[0]){ + return ; + } + dl.find(`dd[lay-value]:not(.${FORM_SELECT_TIPS})${skipDis ? ':not(.'+DISABLED+')' :''}`).each((index, item) => { + item = $(item); + let val = this.getItem(id, item); + this.handlerLabel(id, dl.find(`dd[lay-value="${val.value}"]`), !item.hasClass(THIS), val, !isOn); + }); + } + + Common.prototype.skin = function(id){ + let skins = ['default' ,'primary', 'normal', 'warm', 'danger']; + let skin = skins[Math.floor(Math.random() * skins.length)]; + $(`dl[xid="${id}"]`).parents(`.${PNAME}`).find(`.${FORM_SELECT}`).attr('xm-select-skin', skin); + this.check(id) && this.commonHandler(id, $(`dl[xid="${id}"]`).parents(`.${PNAME}`).find(`.${LABEL}`)); + } + + Common.prototype.getPosition = function(e){ + let x = 0, y = 0; + while (e != null) { + x += e.offsetLeft; + y += e.offsetTop; + e = e.offsetParent; + } + return { x: x, y: y }; + }; + + Common.prototype.onreset = function(){//监听reset按钮, 然后重置多选 + $(document).on('click', '[type=reset]', (e) => { + $(e.target).parents('form').find(`.${PNAME} dl[xid]`).each((index, item) => { + let id = item.getAttribute('xid'), + dl = $(item), + dd, + temp = {}; + common.removeAll(id); + data[id].config.init.forEach((val, idx) => { + if(val && (!temp[val] || data[id].config.repeat) && (dd = dl.find(`dd[lay-value="${val.value}"]`))[0]){ + common.handlerLabel(id, dd, true); + temp[val] = 1; + } + }); + }) + }); + } + + Common.prototype.bindEvent = function(name, id, fun){ + if(id && id instanceof Function){ + fun = id; + id = null; + } + if(fun && fun instanceof Function){ + if(!id){ + $.each(data, (id, val) => { + data[id] ? (data[id].config[name] = fun) : (events[name][id] = fun) + }) + }else{ + data[id] ? (data[id].config[name] = fun, delete events[name][id]) : (events[name][id] = fun) + } + } + } + + Common.prototype.check = function(id, notAutoRender){ + if($(`dl[xid="${id}"]`).length) { + return true; + }else if($(`select[xm-select="${id}"]`).length){ + if(!notAutoRender){ + this.render(id, $(`select[xm-select="${id}"]`)); + return true; + } + }else{ + delete data[id]; + return false; + } + } + + Common.prototype.render = function(id, select){ + common.init(select); + common.one($(`dl[xid="${id}"]`).parents(`.${PNAME}`)); + common.initVal(id); + } + + Common.prototype.log = function(obj){ + console.log(obj); + } + + let Select4 = function(){ + this.v = v; + this.render(); + }; + let common = new Common(); + + Select4.prototype.value = function(id, type, isAppend){ + if(typeof id != 'string'){ + return []; + } + let fs = data[id]; + if(!common.check(id)){ + return []; + } + if(typeof type == 'string' || type == undefined){ + let arr = fs.values.concat([]) || []; + if(type == 'val') { + return arr.map((val) => { + return val.value; + }); + } + if(type == 'valStr') { + return arr.map((val) => { + return val.value; + }).join(','); + } + if(type == 'name') { + return arr.map((val) => { + return val.name; + }); + } + if(type == 'nameStr') { + return arr.map((val) => { + return val.name; + }).join(','); + } + return arr; + } + if(common.isArray(type)) { + let dl = $(`[xid="${id}"]`), + temp = {}, + dd, + isAdd = true; + if(isAppend == false){//删除传入的数组 + isAdd = false; + }else if(isAppend == true){//追加模式 + isAdd = true; + }else{//删除原有的数据 + common.removeAll(id); + } + if(isAdd){ + fs.values.forEach((val, index) => { + temp[val.value] = 1; + }); + } + type.forEach((val, index) => { + if(val && (!temp[val] || fs.config.repeat)){ + if((dd = dl.find(`dd[lay-value="${val}"]`))[0]){ + common.handlerLabel(id, dd, isAdd, null, true); + temp[val] = 1; + }else{ + let name = common.valToName(id, val); + if(name){ + common.handlerLabel(id, dd, isAdd, common.getItem(id, val), true); + temp[val] = 1; + } + } + } + }); + } + } + + Select4.prototype.on = function(id, fun, isEnd) { + common.bindEvent(isEnd ? 'endOn' : 'on', id, fun); + return this; + } + + Select4.prototype.filter = function(id, fun){ + common.bindEvent('filter', id, fun); + return this; + } + + Select4.prototype.maxTips = function(id, fun){ + common.bindEvent('maxTips', id, fun); + return this; + } + + Select4.prototype.opened = function(id, fun){ + common.bindEvent('opened', id, fun); + return this; + } + + Select4.prototype.closed = function(id, fun){ + common.bindEvent('closed', id, fun); + return this; + } + + Select4.prototype.config = function(id, config, isJson){ + if(id && typeof id == 'object'){ + isJson = config == true; + config = id; + id = null; + } + if(config && typeof config== 'object'){ + if(isJson){ + config.header || (config.header = {}); + config.header['Content-Type'] = 'application/json; charset=UTF-8'; + config.dataType = 'json'; + } + id ? ( + ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, config), !common.check(id) && this.render(id), + data[id] && config.direction && (data[id].config.direction = config.direction), + data[id] && config.clearInput && (data[id].config.clearInput = true), + config.searchUrl && data[id] && common.triggerSearch($(`.${PNAME} dl[xid="${id}"]`).parents(`.${FORM_SELECT}`), true) + ) : ( + $.extend(true, ajax, config), + $.each(ajaxs, (key, item) => { + $.extend(true, item, config) + }) + ); + } + return this; + } + + Select4.prototype.render = function(id, options){ + if(id && typeof id == 'object'){ + options = id; + id = null; + } + let config = options ? { + init: options.init, + disabled: options.disabled, + max: options.max, + isSearch: options.isSearch, + searchUrl: options.searchUrl, + isCreate: options.isCreate, + radio: options.radio, + skin: options.skin, + direction: options.direction, + height: options.height, + formname: options.formname, + layverify: options.layverify, + layverType: options.layverType, + showCount: options.showCount, + placeholder: options.placeholder, + create: options.create, + filter: options.filter, + maxTips: options.maxTips, + on: options.on, + on: options.on, + opened: options.opened, + closed: options.closed, + template: options.template, + clearInput: options.clearInput, + } : {}; + + options && options.searchType != undefined && (config.searchType = options.searchType == 'dl' ? 1 : 0); + + if(id){ + fsConfigs[id] = {}; + $.extend(fsConfigs[id], data[id] ? data[id].config : {}, config); + }else{ + $.extend(fsConfig, config); + } + + ($(`select[${NAME}="${id}"]`)[0] ? $(`select[${NAME}="${id}"]`) : $(`select[${NAME}]`)).each((index, select) => { + let sid = select.getAttribute(NAME); + common.render(sid, select); + setTimeout(() => common.setHidnVal(sid, $(`select[xm-select="${sid}"] + div.${PNAME} .${LABEL}`)), 10); + }); + return this; + } + + Select4.prototype.disabled = function(id){ + let target = {}; + id ? (common.check(id) && (target[id] = data[id])) : (target = data); + + $.each(target, (key, val) => { + $(`dl[xid="${key}"]`).prev().addClass(DIS); + }); + return this; + } + + Select4.prototype.undisabled = function(id){ + let target = {}; + id ? (common.check(id) && (target[id] = data[id])) : (target = data); + + $.each(target, (key, val) => { + $(`dl[xid="${key}"]`).prev().removeClass(DIS); + }); + return this; + } + + Select4.prototype.data = function(id, type, config){ + if(!id || !type || !config){ + common.log(`id: ${id} param error !!!`) + return this; + } + if(!common.check(id)){ + common.log(`id: ${id} not render !!!`) + return this; + } + this.value(id, []); + this.config(id, config); + if(type == 'local'){ + common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100'); + }else if(type == 'server'){ + common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100'); + } + return this; + } + + Select4.prototype.btns = function(id, btns, config){ + if(id && common.isArray(id)){ + btns = id; + id = null; + } + if(!btns || !common.isArray(btns)) { + return this; + }; + let target = {}; + id ? (common.check(id) && (target[id] = data[id])) : (target = data); + + btns = btns.map((obj) => { + if(typeof obj == 'string'){ + if(obj == 'select'){ + return quickBtns[0]; + } + if(obj == 'remove'){ + return quickBtns[1]; + } + if(obj == 'reverse'){ + return quickBtns[2]; + } + if(obj == 'skin'){ + return quickBtns[3]; + } + } + return obj; + }); + + $.each(target, (key, val) => { + val.config.btns = btns; + let dd = $(`dl[xid="${key}"]`).find(`.${FORM_SELECT_TIPS}:first`); + if(btns.length){ + let show = config && config.show && (config.show == 'name' || config.show == 'icon') ? config.show : ''; + let html = common.renderBtns(key, show, config && config.space ? config.space : '30px'); + dd.html(html); + }else{ + let pcInput = dd.parents(`.${FORM_SELECT}`).find(`.${TDIV} input`); + let html = pcInput.attr('placeholder') || pcInput.attr('back'); + dd.html(html); + dd.removeAttr('style'); + } + }); + + return this; + } + + Select4.prototype.search = function(id, val){ + if(id && common.check(id)){ + ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, { + first: true, + searchVal: val + }); + common.triggerSearch($(`dl[xid="${id}"]`).parents(`.${FORM_SELECT}`), true); + } + return this; + } + + Select4.prototype.replace = function(id, type, config){ + if(!id || !type || !config){ + common.log(`id: ${id} param error !!!`) + return this; + } + if(!common.check(id, true)){ + common.log(`id: ${id} not render !!!`) + return this; + } + let oldVals = this.value(id, 'val'); + this.value(id, []); + this.config(id, config); + if(type == 'local'){ + common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, true); + this.value(id, oldVals, true); + }else if(type == 'server'){ + common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, (id) => { + this.value(id, oldVals, true); + }, true); + } + } + + return new Select4(); +}); \ No newline at end of file diff --git a/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js b/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js index 7a7e6a0..6879fac 100644 --- a/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js +++ b/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js @@ -35,7 +35,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear theme: option.theme, height: '100%', control: option.control ? 'control' : false, // control - defaultMenu: 0, + defaultMenu: 1, defaultOpen: 0, //默认打开菜单 accordion: true, url: option.data, //数据地址 diff --git a/Pear Admin v 2.0/component/layui/layui.js b/Pear Admin v 2.0/component/layui/layui.js index 76feb78..2225dda 100644 --- a/Pear Admin v 2.0/component/layui/layui.js +++ b/Pear Admin v 2.0/component/layui/layui.js @@ -57,6 +57,7 @@ pearNotice:"extends/pearNotice", echarts:"extends/echarts", echartsTheme:"extends/echartsTheme", + formSelects:'extends/formSelects-v4', treetable:"extends/treetable", "layui.all": "../layui.all" }; diff --git a/Pear Admin v 2.0/index.html b/Pear Admin v 2.0/index.html index 4e27100..153c458 100644 --- a/Pear Admin v 2.0/index.html +++ b/Pear Admin v 2.0/index.html @@ -73,7 +73,7 @@
    -
    系统 初始化...
    +
    系统初始化...
    @@ -84,9 +84,6 @@ var pearTab = layui.pearTab; var pearNotice = layui.pearNotice; - /** - * 框架初始化配置 - * */ var config = { keepLoad: 1200, // 主 页 加 载 过 度 时 长 可为 false muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭 @@ -98,14 +95,11 @@ /** 框架初始化 */ } }; - - /** - * 框架初始化 - * */ + pearAdmin.render(config); - + /** - * 消息组件初始化 + * 消 息 初 始 化 * */ pearNotice.render({ elem: 'headerNotice', diff --git a/Pear Admin v 2.0/view/common/basic/formSelects.html b/Pear Admin v 2.0/view/common/basic/formSelects.html new file mode 100644 index 0000000..97306cf --- /dev/null +++ b/Pear Admin v 2.0/view/common/basic/formSelects.html @@ -0,0 +1,119 @@ + + + + + 多选下拉 + + + + + + +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    + +
    + + +
    +
    + + + + +