Reviewed-on: http://git.picaiba.com/mt-fe-group/cnbmai-ui/pulls/6develop
@@ -1,6 +1,6 @@ | |||
{ | |||
"name": "code-brick-zj", | |||
"version": "0.1.0", | |||
"version": "1.0.2", | |||
"private": false, | |||
"description": "组件封装", | |||
"main": "index.js" | |||
@@ -54,6 +54,18 @@ | |||
<div class="content unicode" style="display: block;"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">downward</div> | |||
<div class="code-name">&#xe604;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">upward</div> | |||
<div class="code-name">&#xe605;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">detail</div> | |||
@@ -90,12 +102,12 @@ | |||
<pre><code class="language-css" | |||
>@font-face { | |||
font-family: 'iconfont'; | |||
src: url('iconfont.eot?t=1670833747896'); /* IE9 */ | |||
src: url('iconfont.eot?t=1670833747896#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAACOgAAAOEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDDAqFLIQ+ATYCJAMQCwoABCAFhGcHQBuuBxEVnK3Ifhw4bsPKemuJufIlJ6qEJtJ/DgLK2Waz25KLIeL68gZe14KfiOD6U5E2QABZ5KNTuwgOKAujXT79x/1YSS7XBUAFLGCF+j/HTJeEH0SWWbjW+YAG1mlRhHuzvBKkO5ZXHqRr/nkXBGBQTxtapy69BuHMGr9oDiUovFoBZaiYNX3qeHTJR42ECnQEXuhEhViPB7RQ7SywLr29eEODdNDwSLxl+k3pPInjz8VzKX1BH+Rd4hoEuLMGeAAJ1DqZUAwblw9A5vZaJEafXFGFtFYIeC6DQZ6LGH/uf3kg0JAgvHh0C2MbOSQ8FyGNlKFhGpghMQrS3ZigAzbwFviHxyxFPbxoePJhhM2p74R/ShGj1BLHHwa+cDNvIFIIN2JY/cEW+6LTA5mxbkyGPy1K0864xM0NZKP5th8+aTj+00d3Co+769gZ0w6Eh/vCwgzLvzsrDuXbcmDRbfflJooxkZnZ0YUmhaVlRMTEFp3rzxFSvSrLIN7hWVMN4V5WHX4RDH+WL9vMH8h1c+a4ucumZYM13fJfVqNmd7Bza9EXm0040ctGslkoaKHSkko12tRfWSTvrYTSCbfKxMXVqixFkwecCiUbOAXKrb53spxT7uS91RhnrNU85OXaAmtfhjQv2ObQk4JOifhbJRy2qL0kNKm+ETp5xRAlz7RrBjNsg5Xf6hrSi1HpUVtwriiOm5j5z/8Ma1W5YeUaNKZVmE1xtsJe7VpawqqBra0muTlJA/SjjHp0DWoSpR9RDThSuSHz8LaS67TrELwmc2VNCD6UybL8//EZPrmfmozN2+qbbioAHhyOuJLqgtcU8AB0NBD4v4ExCphX2QZQqo8cEv8wwVDeuFUDDF8NQawu4P4azILgYBDoFCxBIw8lQaJTAamwNcCDSQPwotMaDGrqPN2koHlIhAoBqliFQJBPNmg4HACJkM8HqbBf8CjiB175/MEwJHsxU5XUllAwapBv8GooJmBx2ugJ7T0J6rLckGaPTdBWTdN1xIK0xJD5YTtmA4aGDAe+HaY0wEhDQMWVYx77ujZ9V6nUkBdbBAkMaUB6A54yKEycn+v3d4Ksu0QgIPImJTPFkcZBq9IAkEd6AeU8yTKzB6vDmAEMQs4MHKQUJcs+AGN/uwAprOJmWEe92s9noPRqf2a+vHWAwVtSpQkplPDgHbLwaTNZey59EjIuFg==') format('woff2'), | |||
url('iconfont.woff?t=1670833747896') format('woff'), | |||
url('iconfont.ttf?t=1670833747896') format('truetype'), | |||
url('iconfont.svg?t=1670833747896#iconfont') format('svg'); | |||
src: url('iconfont.eot?t=1689233106339'); /* IE9 */ | |||
src: url('iconfont.eot?t=1689233106339#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARgAAsAAAAACcAAAAQUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKAqGSIUsATYCJAMYCw4ABCAFhGcHVBtUCMiuMG7hiaIkox1FaBhxvd1fpwAN4YKo1v7tWTr8hBRkBQgO7yqKUJKPUKzDjkixjn7/q0vlANCkEHCJtsMvx2eQn04h5rHEE8593TK2y1SC5nbvNG5gqgZBNEWTqFUQLGVFNnVu1TjyMm3SafEsC3y0myW12KdEh2x+deP/zzHTJeG3AVBm4lrnAxpQN0US7s3ijuSE6Jbh1UGv08cgQEivMg5z6m49Qj77TVxDEZww6gXicNkviSbkxgswNeGCj+CgMw1yFRpAnUNegSv+8+UfU/igsBpjnRV3rRV9+Su8Fk1Agv6CW4eAeyvAAhronJlI1tcrVnIMHZ0cCcsUTrRTnQ0CP50B4KfgEub9Lw80BougQBwGI8bYJU4LPwUbBw0/HXAw8NORUM90wsT9JeIMFACux9QckHyQ9FDYTobcGi+FLSjwMxDe3L5s+w9THFYeEs8H303FWMnZ1JuBWFgNPh3bd5wOvJmKI9aTqXeD8eJ66HnfnV1dJPE8cy4EgqT+s/SbdSWbp9Pn24NbZ1MnGw7CDbvT6+lL1CXVh++hcH56umDT9vOviL/grQ6srHjE57uLHdQn+dtO9x2v94WN6+eXm0HWlZOzta3tUDp1JWjymsiD8r0ViWGkC+n4GeH5aODSM+9COnilpdfdZsRIvMerLmS0uICTplrOnb99LT3NkJNeajPfpDznblq6bXH8efBjlPIUxhQcX+U0qEdt4bjxy6rMdOkbEn0/3mlvrXZL60ysxdwcn/qKLJ/82pnzGS61z5rBeGmrxf33ZXN/IBWUvb8KSvnttbwwq+YTkweZHue0M0+c0ssZGY/Rs+aVF8+3GaW07CkvLC/KcBvP8c2uGpsdm0THlazwlPE22Kdi9ZK4Hdsmtw9eHVQwPjG0p33Q7tGMJ6TUJ2VK1MMw6ftI6qPPtruCvEPmLZqiHcj1Aw3Rup/sdzj+lt/w3f5TrAHgx++nD7A+8xaD4CL8m60Q+KWYO7CgUY3gTFl+OwUBHKteh00BoWmGDIYm301frAJwKAg+BTEoPCpA41OPNNh2sET0g8NnCkI61M6PKKBzREwANBtGIOS6BEU2D0CT6xvSYP+Apdg/cOT6DyErI68W0RzbqhmYOFixuRNLFqoRi839Zh+A2KqYWJH1CTC7hM04My0j664HDVgXY+xtYhbnBBNGVVzH7geKQrHOqA0sPK2Fc70oPZ2UPSTNQlVUjQEmHLDCzDphEgtKQ9zCPP16DwBRK4UJAyKfyBg7jaeaxzKlyQAg6xkaKO9M2tu1EWXhOEL3IxhKhdWpMqCYDgrTy7vZAAsuTUsLm65IOlWIQBlp47PUS9wAhBgHOFGixYgVJx7+dtqutZuY1eXTvXYncJOkOF1Wicd+CnBACA==') format('woff2'), | |||
url('iconfont.woff?t=1689233106339') format('woff'), | |||
url('iconfont.ttf?t=1689233106339') format('truetype'), | |||
url('iconfont.svg?t=1689233106339#iconfont') format('svg'); | |||
} | |||
</code></pre> | |||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> | |||
@@ -121,6 +133,24 @@ | |||
<div class="content font-class"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-downward"></span> | |||
<div class="name"> | |||
downward | |||
</div> | |||
<div class="code-name">.icon-downward | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-upward"></span> | |||
<div class="name"> | |||
upward | |||
</div> | |||
<div class="code-name">.icon-upward | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-detail"></span> | |||
<div class="name"> | |||
@@ -175,6 +205,22 @@ | |||
<div class="content symbol"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-downward"></use> | |||
</svg> | |||
<div class="name">downward</div> | |||
<div class="code-name">#icon-downward</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-upward"></use> | |||
</svg> | |||
<div class="name">upward</div> | |||
<div class="code-name">#icon-upward</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-detail"></use> | |||
@@ -1,11 +1,11 @@ | |||
@font-face { | |||
font-family: "iconfont"; /* Project id 3821755 */ | |||
src: url('iconfont.eot?t=1670833747896'); /* IE9 */ | |||
src: url('iconfont.eot?t=1670833747896#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAACOgAAAOEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDDAqFLIQ+ATYCJAMQCwoABCAFhGcHQBuuBxEVnK3Ifhw4bsPKemuJufIlJ6qEJtJ/DgLK2Waz25KLIeL68gZe14KfiOD6U5E2QABZ5KNTuwgOKAujXT79x/1YSS7XBUAFLGCF+j/HTJeEH0SWWbjW+YAG1mlRhHuzvBKkO5ZXHqRr/nkXBGBQTxtapy69BuHMGr9oDiUovFoBZaiYNX3qeHTJR42ECnQEXuhEhViPB7RQ7SywLr29eEODdNDwSLxl+k3pPInjz8VzKX1BH+Rd4hoEuLMGeAAJ1DqZUAwblw9A5vZaJEafXFGFtFYIeC6DQZ6LGH/uf3kg0JAgvHh0C2MbOSQ8FyGNlKFhGpghMQrS3ZigAzbwFviHxyxFPbxoePJhhM2p74R/ShGj1BLHHwa+cDNvIFIIN2JY/cEW+6LTA5mxbkyGPy1K0864xM0NZKP5th8+aTj+00d3Co+769gZ0w6Eh/vCwgzLvzsrDuXbcmDRbfflJooxkZnZ0YUmhaVlRMTEFp3rzxFSvSrLIN7hWVMN4V5WHX4RDH+WL9vMH8h1c+a4ucumZYM13fJfVqNmd7Bza9EXm0040ctGslkoaKHSkko12tRfWSTvrYTSCbfKxMXVqixFkwecCiUbOAXKrb53spxT7uS91RhnrNU85OXaAmtfhjQv2ObQk4JOifhbJRy2qL0kNKm+ETp5xRAlz7RrBjNsg5Xf6hrSi1HpUVtwriiOm5j5z/8Ma1W5YeUaNKZVmE1xtsJe7VpawqqBra0muTlJA/SjjHp0DWoSpR9RDThSuSHz8LaS67TrELwmc2VNCD6UybL8//EZPrmfmozN2+qbbioAHhyOuJLqgtcU8AB0NBD4v4ExCphX2QZQqo8cEv8wwVDeuFUDDF8NQawu4P4azILgYBDoFCxBIw8lQaJTAamwNcCDSQPwotMaDGrqPN2koHlIhAoBqliFQJBPNmg4HACJkM8HqbBf8CjiB175/MEwJHsxU5XUllAwapBv8GooJmBx2ugJ7T0J6rLckGaPTdBWTdN1xIK0xJD5YTtmA4aGDAe+HaY0wEhDQMWVYx77ujZ9V6nUkBdbBAkMaUB6A54yKEycn+v3d4Ksu0QgIPImJTPFkcZBq9IAkEd6AeU8yTKzB6vDmAEMQs4MHKQUJcs+AGN/uwAprOJmWEe92s9noPRqf2a+vHWAwVtSpQkplPDgHbLwaTNZey59EjIuFg==') format('woff2'), | |||
url('iconfont.woff?t=1670833747896') format('woff'), | |||
url('iconfont.ttf?t=1670833747896') format('truetype'), | |||
url('iconfont.svg?t=1670833747896#iconfont') format('svg'); | |||
src: url('iconfont.eot?t=1689233106339'); /* IE9 */ | |||
src: url('iconfont.eot?t=1689233106339#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARgAAsAAAAACcAAAAQUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKAqGSIUsATYCJAMYCw4ABCAFhGcHVBtUCMiuMG7hiaIkox1FaBhxvd1fpwAN4YKo1v7tWTr8hBRkBQgO7yqKUJKPUKzDjkixjn7/q0vlANCkEHCJtsMvx2eQn04h5rHEE8593TK2y1SC5nbvNG5gqgZBNEWTqFUQLGVFNnVu1TjyMm3SafEsC3y0myW12KdEh2x+deP/zzHTJeG3AVBm4lrnAxpQN0US7s3ijuSE6Jbh1UGv08cgQEivMg5z6m49Qj77TVxDEZww6gXicNkviSbkxgswNeGCj+CgMw1yFRpAnUNegSv+8+UfU/igsBpjnRV3rRV9+Su8Fk1Agv6CW4eAeyvAAhronJlI1tcrVnIMHZ0cCcsUTrRTnQ0CP50B4KfgEub9Lw80BougQBwGI8bYJU4LPwUbBw0/HXAw8NORUM90wsT9JeIMFACux9QckHyQ9FDYTobcGi+FLSjwMxDe3L5s+w9THFYeEs8H303FWMnZ1JuBWFgNPh3bd5wOvJmKI9aTqXeD8eJ66HnfnV1dJPE8cy4EgqT+s/SbdSWbp9Pn24NbZ1MnGw7CDbvT6+lL1CXVh++hcH56umDT9vOviL/grQ6srHjE57uLHdQn+dtO9x2v94WN6+eXm0HWlZOzta3tUDp1JWjymsiD8r0ViWGkC+n4GeH5aODSM+9COnilpdfdZsRIvMerLmS0uICTplrOnb99LT3NkJNeajPfpDznblq6bXH8efBjlPIUxhQcX+U0qEdt4bjxy6rMdOkbEn0/3mlvrXZL60ysxdwcn/qKLJ/82pnzGS61z5rBeGmrxf33ZXN/IBWUvb8KSvnttbwwq+YTkweZHue0M0+c0ssZGY/Rs+aVF8+3GaW07CkvLC/KcBvP8c2uGpsdm0THlazwlPE22Kdi9ZK4Hdsmtw9eHVQwPjG0p33Q7tGMJ6TUJ2VK1MMw6ftI6qPPtruCvEPmLZqiHcj1Aw3Rup/sdzj+lt/w3f5TrAHgx++nD7A+8xaD4CL8m60Q+KWYO7CgUY3gTFl+OwUBHKteh00BoWmGDIYm301frAJwKAg+BTEoPCpA41OPNNh2sET0g8NnCkI61M6PKKBzREwANBtGIOS6BEU2D0CT6xvSYP+Apdg/cOT6DyErI68W0RzbqhmYOFixuRNLFqoRi839Zh+A2KqYWJH1CTC7hM04My0j664HDVgXY+xtYhbnBBNGVVzH7geKQrHOqA0sPK2Fc70oPZ2UPSTNQlVUjQEmHLDCzDphEgtKQ9zCPP16DwBRK4UJAyKfyBg7jaeaxzKlyQAg6xkaKO9M2tu1EWXhOEL3IxhKhdWpMqCYDgrTy7vZAAsuTUsLm65IOlWIQBlp47PUS9wAhBgHOFGixYgVJx7+dtqutZuY1eXTvXYncJOkOF1Wicd+CnBACA==') format('woff2'), | |||
url('iconfont.woff?t=1689233106339') format('woff'), | |||
url('iconfont.ttf?t=1689233106339') format('truetype'), | |||
url('iconfont.svg?t=1689233106339#iconfont') format('svg'); | |||
} | |||
.iconfont { | |||
@@ -16,6 +16,14 @@ | |||
-moz-osx-font-smoothing: grayscale; | |||
} | |||
.icon-downward:before { | |||
content: "\e604"; | |||
} | |||
.icon-upward:before { | |||
content: "\e605"; | |||
} | |||
.icon-detail:before { | |||
content: "\e601"; | |||
} | |||
@@ -5,6 +5,20 @@ | |||
"css_prefix_text": "icon-", | |||
"description": "封装的组件中的icon", | |||
"glyphs": [ | |||
{ | |||
"icon_id": "36426261", | |||
"name": "downward", | |||
"font_class": "downward", | |||
"unicode": "e604", | |||
"unicode_decimal": 58884 | |||
}, | |||
{ | |||
"icon_id": "36426301", | |||
"name": "upward", | |||
"font_class": "upward", | |||
"unicode": "e605", | |||
"unicode_decimal": 58885 | |||
}, | |||
{ | |||
"icon_id": "33347867", | |||
"name": "detail", | |||
@@ -14,6 +14,10 @@ | |||
/> | |||
<missing-glyph /> | |||
<glyph glyph-name="downward" unicode="" d="M556.942222 144.099556l363.064889 401.806222c24.860444 21.617778 24.860444 56.263111 0 77.880889a68.437333 68.437333 0 0 1-44.942222 16.156444c-16.896 0-33.052444-5.859556-44.885333-16.156444L512 260.949333l-318.236444 362.951111a68.437333 68.437333 0 0 1-44.942223 16.099556c-16.896 0-33.109333-5.802667-44.942222-16.156444-24.746667-21.617778-24.746667-56.206222 0-77.824l363.121778-401.749334c5.973333-5.290667 13.141333-9.443556 21.048889-12.231111 23.722667-8.305778 51.029333-3.527111 68.892444 12.060445z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="upward" unicode="" d="M556.942222 623.900444l363.064889-401.806222c24.860444-21.617778 24.860444-56.263111 0-77.880889a68.437333 68.437333 0 0 0-44.942222-16.156444c-16.896 0-33.052444 5.859556-44.885333 16.156444L512 507.050667l-318.236444-362.951111a68.437333 68.437333 0 0 0-44.942223-16.099556c-16.896 0-33.109333 5.802667-44.942222 16.156444-24.746667 21.617778-24.746667 56.206222 0 77.824L467.057778 623.729778c5.973333 5.290667 13.141333 9.443556 21.048889 12.231111 23.722667 8.305778 51.029333 3.527111 68.892444-12.060445z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="detail" unicode="" d="M902.428444 705.251556H332.401778a7.964444 7.964444 0 0 1-7.793778-8.021334v-56.206222a7.964444 7.964444 0 0 1 7.793778-8.078222h570.026666A7.964444 7.964444 0 0 1 910.222222 641.024v56.206222a7.964444 7.964444 0 0 1-7.793778 8.021334z m0-285.127112H332.401778a7.964444 7.964444 0 0 1-7.793778-7.964444v-56.32a7.964444 7.964444 0 0 1 7.793778-7.964444h570.026666a7.964444 7.964444 0 0 1 7.793778 7.964444v56.32a7.964444 7.964444 0 0 1-7.793778 7.964444z m0-285.070222H332.401778a7.964444 7.964444 0 0 1-7.793778-8.078222v-56.206222a7.964444 7.964444 0 0 1 7.793778-8.021334h570.026666a7.964444 7.964444 0 0 1 7.793778 8.021334v56.206222a7.964444 7.964444 0 0 1-7.793778 8.078222zM113.777778 669.127111c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0 56.547556 56.547556 0 0 1 27.306666 48.696889 56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0A56.547556 56.547556 0 0 1 113.777778 669.127111zM113.777778 384c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0A56.547556 56.547556 0 0 1 223.061333 384a56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0A56.547556 56.547556 0 0 1 113.777778 384z m0-285.127111c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0 56.547556 56.547556 0 0 1 27.306666 48.696889 56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0 56.547556 56.547556 0 0 1-27.363555-48.696889z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="edit" unicode="" d="M873.016889 395.264a32.824889 32.824889 0 0 0 65.649778 0v-273.806222a164.124444 164.124444 0 0 0-164.124445-164.124445h-525.084444A164.124444 164.124444 0 0 0 85.333333 121.457778v525.084444A164.124444 164.124444 0 0 0 249.457778 810.666667h312.32a32.824889 32.824889 0 1 0 0-65.649778h-312.32a98.417778 98.417778 0 0 1-98.474667-98.417778v-525.141333c0-54.385778 44.088889-98.474667 98.417778-98.474667h525.141333a98.417778 98.417778 0 0 1 98.474667 98.417778V395.320889z m-14.222222 362.097778a32.824889 32.824889 0 0 0 48.014222-44.771556L548.750222 328.533333a32.824889 32.824889 0 1 0-48.014222 44.771556l358.115556 384.056889z" horiz-adv-x="1024" /> | |||
@@ -1,114 +1,122 @@ | |||
<template> | |||
<el-form | |||
:inline="true" | |||
ref="searchBarForm" | |||
:model="formInline" | |||
class="searchBar" | |||
> | |||
<span class="blue-block" v-if="removeBlue ? false : true"></span> | |||
<template v-for="item in formConfig"> | |||
<el-form-item | |||
v-if="item.type !== ''" | |||
:key="item.param" | |||
:label="item.label ? item.label : ''" | |||
:required="item.required ? item.required : false" | |||
:style="{ float: item.float ? item.float : 'left' }" | |||
> | |||
<el-input | |||
v-if="item.type === 'input'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
clearable | |||
:disabled="item.disabled ? item.disabled : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.placeholder ? item.placeholder : ''" | |||
/> | |||
<el-select | |||
v-if="item.type === 'select'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
:filterable="item.filterable ? item.filterable : false" | |||
:multiple="item.multiple ? item.multiple : false" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.label" | |||
@change=" | |||
item.onchange | |||
? $emit('select-changed', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
> | |||
<el-option | |||
v-for="(sub, i) in item.selectOptions" | |||
:key="i" | |||
:label="item.labelField ? sub[item.labelField] : sub['name']" | |||
:value="item.valueField ? sub[item.valueField] : sub['id']" | |||
/> | |||
</el-select> | |||
<el-date-picker | |||
v-if="item.type === 'datePicker'" | |||
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }"> | |||
<el-form | |||
:inline="true" | |||
ref="searchBarForm" | |||
:model="formInline" | |||
class="searchBar" | |||
> | |||
<span class="blue-block" v-if="removeBlue ? false : true"></span> | |||
<template v-for="item in formConfig"> | |||
<el-form-item | |||
v-if="item.type !== ''" | |||
:key="item.param" | |||
:size="item.size ? item.size : 'small'" | |||
v-model="formInline[item.param]" | |||
:type="item.dateType" | |||
:format="item.format ? item.format : 'yyyy-MM-dd'" | |||
:value-format="item.valueFormat ? item.valueFormat : null" | |||
:default-time="item.defaultTime || null" | |||
:range-separator="item.rangeSeparator || null" | |||
:start-placeholder="item.startPlaceholder || null" | |||
:end-placeholder="item.endPlaceholder || null" | |||
:placeholder="item.placeholder" | |||
:picker-options="item.pickerOptions ? item.pickerOptions : null" | |||
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:340px' : (item.dateType === 'daterange' ? 'width:220px' : 'width:140px'))" | |||
/> | |||
<el-autocomplete | |||
v-if="item.type === 'autocomplete'" | |||
v-model="formInline[item.param]" | |||
:value-key="item.valueKey ? item.valueKey : 'value'" | |||
:fetch-suggestions="item.querySearch" | |||
:placeholder="item.placeholder" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
filterable | |||
/> | |||
<el-cascader | |||
v-if="item.type === 'cascader'" | |||
v-model="formInline[item.param]" | |||
:options="item.selectOptions" | |||
:props="item.cascaderProps" | |||
:clearable="item.clearable === false ? false : true" | |||
:show-all-levels="item.showAllLevels === false ? false : true" | |||
:collapse-tags="item.collapseTags === true ? true : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
@change=" | |||
item.onChange | |||
? $emit('cascader-change', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
></el-cascader> | |||
<el-button | |||
v-if="item.type === 'button'" | |||
:type="item.color" | |||
:size="item.size ? item.size : 'small'" | |||
:plain="item.plain ? item.plain : false" | |||
:round="item.round ? item.round : false" | |||
@click="headBtnClick(item.name)" | |||
>{{ item.btnName }}</el-button | |||
:label="item.label ? item.label : ''" | |||
:required="item.required ? item.required : false" | |||
> | |||
<span v-if="item.type === 'separate'" class="separateStyle"></span> | |||
<!-- 可用于显示其他按钮 --> | |||
<el-input | |||
v-if="item.type === 'input'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
clearable | |||
:disabled="item.disabled ? item.disabled : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.placeholder ? item.placeholder : ''" | |||
/> | |||
<el-select | |||
v-if="item.type === 'select'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
:filterable="item.filterable ? item.filterable : false" | |||
:multiple="item.multiple ? item.multiple : false" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.label" | |||
@change=" | |||
item.onchange | |||
? $emit('select-changed', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
> | |||
<el-option | |||
v-for="(sub, i) in item.selectOptions" | |||
:key="i" | |||
:label="item.labelField ? sub[item.labelField] : sub['name']" | |||
:value="item.valueField ? sub[item.valueField] : sub['id']" | |||
/> | |||
</el-select> | |||
<el-date-picker | |||
v-if="item.type === 'datePicker'" | |||
:key="item.param" | |||
:size="item.size ? item.size : 'small'" | |||
v-model="formInline[item.param]" | |||
:type="item.dateType" | |||
:format="item.format ? item.format : 'yyyy-MM-dd'" | |||
:value-format="item.valueFormat ? item.valueFormat : null" | |||
:default-time="item.defaultTime || null" | |||
:range-separator="item.rangeSeparator || null" | |||
:start-placeholder="item.startPlaceholder || null" | |||
:end-placeholder="item.endPlaceholder || null" | |||
:placeholder="item.placeholder" | |||
:picker-options="item.pickerOptions ? item.pickerOptions : null" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:340px' : (item.dateType === 'daterange' ? 'width:220px' : 'width:140px'))" | |||
/> | |||
<el-autocomplete | |||
v-if="item.type === 'autocomplete'" | |||
v-model="formInline[item.param]" | |||
:value-key="item.valueKey ? item.valueKey : 'value'" | |||
:size="item.size ? item.size : 'small'" | |||
:fetch-suggestions="item.querySearch" | |||
:placeholder="item.placeholder" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
filterable | |||
/> | |||
<el-cascader | |||
v-if="item.type === 'cascader'" | |||
v-model="formInline[item.param]" | |||
:options="item.selectOptions" | |||
:props="item.cascaderProps" | |||
:size="item.size ? item.size : 'small'" | |||
:clearable="item.clearable === false ? false : true" | |||
:show-all-levels="item.showAllLevels === false ? false : true" | |||
:collapse-tags="item.collapseTags === true ? true : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
@change=" | |||
item.onChange | |||
? $emit('cascader-change', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
></el-cascader> | |||
<el-button | |||
v-if="item.type === 'button'" | |||
:type="item.color" | |||
:size="item.size ? item.size : 'small'" | |||
:plain="item.plain ? item.plain : false" | |||
:round="item.round ? item.round : false" | |||
@click="headBtnClick(item.name)" | |||
>{{ item.btnName }}</el-button | |||
> | |||
<span v-if="item.type === 'separate'" class="separateStyle"></span> | |||
<!-- 可用于显示其他按钮 --> | |||
</el-form-item> | |||
</template> | |||
<el-form-item> | |||
<slot></slot> | |||
</el-form-item> | |||
</template> | |||
<el-form-item> | |||
<slot></slot> | |||
</el-form-item> | |||
</el-form> | |||
</el-form> | |||
<span v-if="isFold" class="foldClass" @click='switchMode'> | |||
{{ isExpand ? '收起' : '展开' }} | |||
<i class="iconfont" :class="isExpand ? 'icon-upward' : 'icon-downward'"></i> | |||
</span> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
@@ -123,6 +131,10 @@ export default { | |||
removeBlue: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
isFold: {// 多行模式(默认否) | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
@@ -144,7 +156,8 @@ export default { | |||
return { | |||
formInline, | |||
formConfig, | |||
hasExtraOptions | |||
hasExtraOptions, | |||
isExpand: false // 是否展开(默认否) | |||
} | |||
}, | |||
watch: { | |||
@@ -228,11 +241,34 @@ export default { | |||
} | |||
} | |||
this.formInline = formInline | |||
}, | |||
switchMode() {// 展开和收起切换 | |||
this.isExpand = !this.isExpand | |||
const element = this.$refs.searchBarRef | |||
if (this.isExpand) { | |||
element.classList.remove('divHeight') | |||
} else { | |||
element.classList.add('divHeight') | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<style> | |||
.searchBarBox { | |||
width: 100%; | |||
position: relative; | |||
margin-bottom: 8px; | |||
} | |||
.searchBarBox::after { | |||
content: ""; | |||
display: block; | |||
clear: both; | |||
} | |||
.divHeight { | |||
height: 45px; | |||
overflow: hidden; | |||
} | |||
.searchBar .blue-block { | |||
display: inline-block; | |||
float: left; | |||
@@ -244,7 +280,7 @@ export default { | |||
margin-top: 12px; | |||
} | |||
.searchBar .el-form-item { | |||
margin-bottom: 10px; | |||
margin-bottom: 4px; | |||
} | |||
.searchBar .el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
@@ -265,4 +301,15 @@ export default { | |||
background: #E8E8E8; | |||
vertical-align: middle; | |||
} | |||
.searchBarBox .foldClass { | |||
position: absolute; | |||
top: 14px; | |||
right: 0; | |||
cursor: pointer; | |||
font-size: 12px; | |||
color:#0B58FF; | |||
} | |||
.searchBarBox .foldClass .iconfont { | |||
font-size: 14px; | |||
} | |||
</style> |