搜索框时间选择器添加change事件

index.js

@@ -4,6 +4,7 @@ import Pagination from './src/components/Pagination/index.vue'
 import BaseTable from './src/components/BaseTable/index.vue'
 import InputArea from './src/components/BaseTable/subcomponents/InputArea.vue'
 import MethodBtn from './src/components/BaseTable/subcomponents/MethodBtn.vue'
+import SplitPane from './src/components/SplitPane/index.vue'
 
 let ModuleObj = {
   SearchBar,
@@ -11,7 +12,8 @@ let ModuleObj = {
   Pagination,
   BaseTable,
   InputArea,
-  MethodBtn
+  MethodBtn,
+  SplitPane
 }
 let MyModule = {}
 MyModule.install = (Vue) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-brick-zj",
-  "version": "0.0.3",
+  "version": "1.1.1",
   "private": false,
   "description": "组件封装",
   "main": "index.js"

src/assets/iconfont/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">downward</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">upward</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe601;</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>

src/assets/iconfont/iconfont.css

@@ -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";
 }

src/assets/iconfont/iconfont.json

@@ -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",

src/assets/iconfont/iconfont.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="downward" unicode="&#58884;" 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="&#58885;" 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="&#58881;" 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="&#58882;" 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" />

src/components/BaseDialog/index.vue

@@ -66,34 +66,32 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.baseDialog {
-  .el-dialog__header {
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.85);
-    font-weight: 500;
-    padding: 13px 24px;
-    border-bottom: 1px solid #e9e9e9;
-    .titleStyle::before{
-      content: '';
-      display: inline-block;
-      width: 4px;
-      height: 16px;
-      background-color: #0B58FF;
-      border-radius: 1px;
-      margin-right: 8px;
-      position: relative;
-      top: 2px;
-    }
-  }
-  .el-dialog__body {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-  .btnTextStyle {
-    letter-spacing:6px;
-    padding: 9px 10px 9px 16px;
-    font-size: 14px;
-  }
+<style>
+.baseDialog .el-dialog__header {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  padding: 13px 24px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.baseDialog .el-dialog__header .titleStyle::before{
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8px;
+  position: relative;
+  top: 2px;
+}
+.baseDialog .el-dialog__body {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.baseDialog .btnTextStyle {
+  letter-spacing:6px;
+  padding: 9px 10px 9px 16px;
+  font-size: 14px;
 }
 </style>

src/components/BaseTable/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="baseTable">
     <el-table
+      :ref="id"
       :data="renderData"
       v-bind="$attrs"
+      :border="cancelBorder ? false : true"
       @current-change="currentChange"
       @selection-change="handleSelectionChange"
       style="width: 100%"
@@ -23,7 +25,7 @@
         prop="_pageIndex"
         :width="pageWidth"
         align="center"
-        fixed
+        :fixed="cancelPageFixed ? false : true"
       >
         <template slot="header">
           <el-popover placement="bottom-start" width="300" trigger="click">
@@ -115,6 +117,14 @@ export default {
     }
   },
   props: {
+    cancelBorder: {
+      type: Boolean,
+      default: false
+    },
+    cancelPageFixed: {
+      type: Boolean,
+      default: false
+    },
     tableData: {
       type: Array,
       required: true,
@@ -128,6 +138,11 @@ export default {
         return []
       }
     },
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    },
     page: {
       type: Number,
       required: false,
@@ -189,49 +204,54 @@ export default {
     },
     emitButtonClick() {
       this.$emit('emitButtonClick')
+    },
+    setCurrent(name, index) {
+      let _this = this
+      let obj = _this.$refs[name].data[index]
+      _this.$refs[name].setCurrentRow(obj)
+    },
+    doLayout(name) {
+      this.$refs[name].doLayout()
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-.baseTable {
-  .show-col-btn {
-    margin-right: 5px;
-    line-height: inherit;
-    cursor: pointer;
-  }
-  .el-icon-refresh {
-    cursor: pointer;
-  }
+<style scoped>
+.baseTable .show-col-btn {
+  margin-right: 5px;
+  line-height: inherit;
+  cursor: pointer;
+}
+.baseTable .el-icon-refresh {
+  cursor: pointer;
 }
 </style>
-<style lang="scss">
-.baseTable {
-  .el-table__body tr.current-row>td.el-table__cell {
-      background-color: #EAF1FC;
-  }
-  .el-table .el-table__cell {
-    padding: 0;
-    height: 35px;
-  }
-  .addButton {
-    width: 100%;
-    height: 35px;
-    border-top: none;
-    color: #0b58ff;
-    border-color: #ebeef5;
-    border-radius: 0;
-  }
-  .addButton:hover {
-    color: #0b58ff;
-    border-color: #ebeef5;
-    background-color: #fff;
-  }
-  .addButton:focus {
-    border-color: #ebeef5;
-    background-color: #fff;
-  }
+<style>
+.baseTable .el-table__body tr.current-row>td.el-table__cell {
+    background-color: #EAF1FC;
 }
+.baseTable .el-table .el-table__cell {
+  padding: 0;
+  height: 35px;
+}
+.baseTable .addButton {
+  width: 100%;
+  height: 35px;
+  border-top: none;
+  color: #0b58ff;
+  border-color: #ebeef5;
+  border-radius: 0;
+}
+.baseTable .addButton:hover {
+  color: #0b58ff;
+  border-color: #ebeef5;
+  background-color: #fff;
+}
+.baseTable .addButton:focus {
+  border-color: #ebeef5;
+  background-color: #fff;
+}
+
 .el-tooltip__popper.is-dark {
   background: rgba(0, 0, 0, 0.6) !important;
 }

src/components/BaseTable/subcomponents/InputArea.vue

@@ -28,7 +28,7 @@ export default {
   }
 }
 </script>
-<style lang="css">
+<style>
 .tableInner .el-input__inner {
   border: none;
   padding: 0;

src/components/BaseTable/subcomponents/MethodBtn.vue

@@ -12,53 +12,55 @@
           style="margin: 0 4px; font-size: 18px; color: #e5e7eb"
           >|</span
         >
-        <el-button
-          :disabled="
-            item.showParam ? !showFilter(item.showParam, scope.row) : false
-          "
-          type="text"
-          style="margin: 5px 0; padding: 0"
-          @click="
-            clickButton({
-              data: scope.row,
-              type: item.type
-            })
-          "
-        >
-          <span
-            v-if="
-              item.type === 'delete' ||
-              item.type === 'edit' ||
-              item.type === 'detail'
+        <el-tooltip :disabled="item.showTip?false:true" :content="item.showTip" placement="top">
+          <el-button
+            :disabled="
+              item.showParam ? !showFilter(item.showParam, scope.row) : false
             "
-            class="iconfont"
-            :class="
-              item.type === 'delete'
-                ? 'icon-delete' +
-                  (item.showParam
-                    ? !showFilter(item.showParam, scope.row)
-                      ? ''
-                      : ' delete-color'
-                    : ' delete-color')
-                : item.type === 'edit'
-                ? 'icon-edit' +
-                  (item.showParam
-                    ? !showFilter(item.showParam, scope.row)
-                      ? ''
-                      : ' primary-color'
-                    : ' primary-color')
-                : item.type === 'detail'
-                ? 'icon-detail' +
-                  (item.showParam
-                    ? !showFilter(item.showParam, scope.row)
-                      ? ''
-                      : ' primary-color'
-                    : ' primary-color')
-                : ''
+            type="text"
+            style="margin: 5px 0; padding: 0"
+            @click="
+              clickButton({
+                data: scope.row,
+                type: item.type
+              })
             "
-          ></span>
-          <span v-else>{{ item.btnName }}</span>
-        </el-button>
+          >
+            <span
+              v-if="
+                item.type === 'delete' ||
+                item.type === 'edit' ||
+                item.type === 'detail'
+              "
+              class="iconfont"
+              :class="
+                item.type === 'delete'
+                  ? 'icon-delete' +
+                    (item.showParam
+                      ? !showFilter(item.showParam, scope.row)
+                        ? ''
+                        : ' delete-color'
+                      : ' delete-color')
+                  : item.type === 'edit'
+                  ? 'icon-edit' +
+                    (item.showParam
+                      ? !showFilter(item.showParam, scope.row)
+                        ? ''
+                        : ' primary-color'
+                      : ' primary-color')
+                  : item.type === 'detail'
+                  ? 'icon-detail' +
+                    (item.showParam
+                      ? !showFilter(item.showParam, scope.row)
+                        ? ''
+                        : ' primary-color'
+                      : ' primary-color')
+                  : ''
+              "
+            ></span>
+            <span v-else>{{ item.btnName }}</span>
+          </el-button>
+        </el-tooltip>
       </span>
     </template>
   </el-table-column>

src/components/Pagination/index.vue

@@ -77,28 +77,26 @@ export default {
   text-align: right;
 }
 </style>
-<style lang='scss'>
-.pagination-container {
-  .el-pagination {
-    position: relative;
-  }
+<style>
+.pagination-container .el-pagination {
+  position: relative;
+}
 
-  .el-pagination__jump {
-    margin-left: 125px;
-  }
+.pagination-container .el-pagination__jump {
+  margin-left: 125px;
+}
 
-  .el-pagination__sizes {
-    position: absolute;
-    right: 100px;
-  }
+.pagination-container .el-pagination__sizes {
+  position: absolute;
+  right: 100px;
+}
 
-  .el-pager li.active {
-    background-color: #0b58ff;
-    color: #fff;
-  }
+.pagination-container .el-pager li.active {
+  background-color: #0b58ff;
+  color: #fff;
+}
 
-  .el-input--mini .el-input__inner {
-    height: 22px;
-  }
+.pagination-container .el-input--mini .el-input__inner {
+  height: 22px;
 }
 </style>

src/components/SearchBar/SearchBar.vue

@@ -1,178 +1,212 @@
 <template>
-  <el-form
-    :inline="true"
-    ref="searchBarForm" 
-    :model="formInline"
-    class="searchBar"
+  <div
+    class="searchBarBox"
+    ref="searchBarRef"
+    :style="{ paddingRight: isFold ? '55px' : '0px' }"
   >
-    <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'"
+    <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"
         >
-        <!-- 可用于显示其他按钮 -->
+          <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"
+            :collapse-tags="item.collapseTags ? item.collapseTags : false"
+            :multiple-limit="item.multipleLimit ? item.multipleLimit : 0"
+            :clearable="item.clearable === false ? false : true"
+            :style="item.width ? 'width:' + item.width + 'px' : 'width:200px'"
+            :placeholder="item.placeholder ? item.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:350px'
+                : item.dateType === 'daterange'
+                ? 'width:252px'
+                : item.dateType === 'datetime'
+                ? 'width:200px'
+                : 'width:148px'
+            "
+            @change="
+              item.onchange
+                ? $emit('datepicker-change', {
+                    param: item.param,
+                    value: formInline[item.param],
+                  })
+                : null
+            "
+          />
+          <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>
+  </div>
 </template>
 <script>
 export default {
-  name: 'SearchBar',
+  name: "SearchBar",
   props: {
     formConfigs: {
       type: Array,
       default: () => {
-        return []
-      }
+        return [];
+      },
     },
     removeBlue: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    isFold: {
+      // 多行模式（默认否）
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
-    const formInline = {}
-    const formConfig = this.formConfigs
-    let hasExtraOptions = false
+    const formInline = {};
+    const formConfig = this.formConfigs;
+    let hasExtraOptions = false;
     for (const obj of formConfig) {
-      if (obj.type !== 'button') {
+      if (obj.type !== "button") {
         if (obj.defaultSelect === false || obj.defaultSelect === 0) {
-          formInline[obj.param] = obj.defaultSelect
+          formInline[obj.param] = obj.defaultSelect;
         } else {
-          formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
+          formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
         }
       }
       if (obj.extraOptions) {
-        hasExtraOptions = true
+        hasExtraOptions = true;
       }
     }
     return {
       formInline,
       formConfig,
-      hasExtraOptions
-    }
+      hasExtraOptions,
+    };
   },
   watch: {
     formConfig: {
       handler() {
         for (const obj of this.formConfig) {
           if (obj.defaultSelect) {
-            this.formInline[obj.param] = obj.defaultSelect
+            this.formInline[obj.param] = obj.defaultSelect;
           } else if (obj.defaultSelect === null) {
             // 需要手动从外部清除选项缓存的情况，确保在外部配置项中可直接设置null
-            this.formInline[obj.param] = ''
+            this.formInline[obj.param] = "";
           }
         }
       },
       deep: true,
-      immediate: true
+      immediate: true,
     },
     formInline: {
       handler: function () {
-        this.$forceUpdate()
+        this.$forceUpdate();
       },
       deep: true,
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      this.init()
-    })
+      this.init();
+    });
   },
   methods: {
     init() {
@@ -184,75 +218,94 @@ export default {
             this.$watch(
               `formInline.${obj.param}`,
               function (newVal) {
-                let deleteCount = 0
+                let deleteCount = 0;
                 if (obj.index + 1 < this.formConfig.length) {
                   // 如果obj不是最后一个配置
-                  const nextConfig = this.formConfig[obj.index + 1]
+                  const nextConfig = this.formConfig[obj.index + 1];
                   if (nextConfig.parent && nextConfig.parent === obj.param)
-                    deleteCount = 1
+                    deleteCount = 1;
                 }
                 const currentConfig = Object.assign(
                   {},
                   obj.extraOptions[newVal]
-                )
+                );
                 this.formConfig.splice(
                   obj.index + 1,
                   deleteCount,
                   currentConfig
-                )
+                );
                 // 修改 formInline
-                this.$set(this.formInline, currentConfig.param, '')
+                this.$set(this.formInline, currentConfig.param, "");
               },
               { immediate: true }
-            )
+            );
           }
         }
       }
     },
     headBtnClick(btnName) {
-      this.formInline.btnName = btnName
-      this.$emit('headBtnClick', this.formInline)
+      this.formInline.btnName = btnName;
+      this.$emit("headBtnClick", this.formInline);
     },
     resetForm() {
-      this.$refs.searchBarForm.resetFields()
-      const formInline = {}
-      const formConfig = this.formConfigs
+      this.$refs.searchBarForm.resetFields();
+      const formInline = {};
+      const formConfig = this.formConfigs;
       for (const obj of formConfig) {
-        if (obj.type !== 'button') {
+        if (obj.type !== "button") {
           if (obj.defaultSelect === false || obj.defaultSelect === 0) {
-            formInline[obj.param] = obj.defaultSelect
+            formInline[obj.param] = obj.defaultSelect;
           } else {
-            formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
+            formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
           }
         }
       }
-      this.formInline = formInline
-    }
-  }
-}
+      this.formInline = formInline;
+    },
+  },
+};
 </script>
-<style lang="scss">
-.searchBar {
-  .blue-block {
-    float: left;
-    display: inline-block;
-    width: 4px;
-    height: 16px;
-    background-color: #0B58FF;
-    border-radius: 1px;
-    margin-right: 8px;
-    margin-top: 12px;
-  }
-  .el-form-item {
-    margin-bottom: 10px;
-  }
-  .el-date-editor .el-range__icon {
-    font-size: 16px;
-    color:#0B58FF;
-  }
-  .el-input__prefix .el-icon-date {
-    font-size: 16px;
-    color:#0B58FF;
-  }
+<style>
+.searchBarBox {
+  width: 100%;
+  position: relative;
+  margin-bottom: 8px;
+}
+.searchBarBox::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.searchBar .blue-block {
+  display: inline-block;
+  float: left;
+  width: 4px;
+  height: 16px;
+  background-color: #0b58ff;
+  border-radius: 1px;
+  margin-right: 8px;
+  margin-top: 12px;
+}
+.searchBar .el-form-item {
+  margin-bottom: 4px;
+}
+.searchBar .el-date-editor .el-range__icon {
+  font-size: 16px;
+  color: #0b58ff;
+}
+.searchBar .el-input__prefix .el-icon-date {
+  font-size: 16px;
+  color: #0b58ff;
+}
+.searchBar .el-input__prefix .el-icon-time {
+  font-size: 16px;
+  color: #0b58ff;
+}
+.searchBar .separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #e8e8e8;
+  vertical-align: middle;
 }
 </style>

src/components/SplitPane/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div ref="outerWrapper" :class="wrapperClasses">
+    <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+      <div
+        :style="{ right: `${anotherOffset}%` }"
+        class="left-pane"
+        :class="paneClasses"
+      >
+        <slot name="left" />
+      </div>
+      <div
+        :class="`${prefix}-trigger-con`"
+        :style="{ left: `${offset}%` }"
+        @mousedown="handleMousedown"
+      >
+        <slot name="trigger">
+          <trigger-pane mode="vertical" />
+        </slot>
+      </div>
+      <div
+        :style="{ left: `${offset}%` }"
+        class="right-pane"
+        :class="paneClasses"
+      >
+        <slot name="right" />
+      </div>
+    </div>
+    <div v-else :class="`${prefix}-vertical`">
+      <div
+        :style="{ bottom: `${anotherOffset}%` }"
+        class="top-pane"
+        :class="paneClasses"
+      >
+        <slot name="top" />
+      </div>
+      <div
+        :class="`${prefix}-trigger-con`"
+        :style="{ top: `${offset}%` }"
+        @mousedown="handleMousedown"
+      >
+        <slot name="trigger">
+          <trigger-pane mode="horizontal" />
+        </slot>
+      </div>
+      <div
+        :style="{ top: `${offset}%` }"
+        class="bottom-pane"
+        :class="paneClasses"
+      >
+        <slot name="bottom" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { oneOf, on, off } from './utils'
+import TriggerPane from './triggerPane.vue'
+export default {
+  name: 'SplitPane',
+  components: {
+    TriggerPane
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator(value) {
+        return oneOf(value, ['horizontal', 'vertical'])
+      },
+      default: 'horizontal'
+    },
+    min: {
+      type: [Number, String],
+      default: '40px'
+    },
+    max: {
+      type: [Number, String],
+      default: '40px'
+    }
+  },
+  /**
+   * Events
+   * @on-move-start
+   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+   * @on-move-end
+   */
+  data() {
+    return {
+      prefix: 'zj-split',
+      offset: 0,
+      oldOffset: 0,
+      isMoving: false,
+      computedMin: 0,
+      computedMax: 0,
+      currentValue: 0.5
+    }
+  },
+  computed: {
+    wrapperClasses() {
+      return [`${this.prefix}-wrapper`, this.isMoving ? 'no-select' : '']
+    },
+    paneClasses() {
+      return [
+        `${this.prefix}-pane`,
+        {
+          [`${this.prefix}-pane-moving`]: this.isMoving
+        }
+      ]
+    },
+    isHorizontal() {
+      return this.mode === 'horizontal'
+    },
+    anotherOffset() {
+      return 100 - this.offset
+    },
+    valueIsPx() {
+      return typeof this.value === 'string'
+    },
+    offsetSize() {
+      return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+    }
+  },
+  methods: {
+    px2percent(numerator, denominator) {
+      return parseFloat(numerator) / parseFloat(denominator)
+    },
+    getComputedThresholdValue(type) {
+      let size = this.$refs.outerWrapper[this.offsetSize]
+      if (this.valueIsPx)
+        return typeof this[type] === 'string' ? this[type] : size * this[type]
+      else
+        return typeof this[type] === 'string'
+          ? this.px2percent(this[type], size)
+          : this[type]
+    },
+    getMin(value1, value2) {
+      if (this.valueIsPx)
+        return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+      else return Math.min(value1, value2)
+    },
+    getMax(value1, value2) {
+      if (this.valueIsPx)
+        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+      else return Math.max(value1, value2)
+    },
+    getAnotherOffset(value) {
+      let res = 0
+      if (this.valueIsPx)
+        res = `${
+          this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)
+        }px`
+      else res = 1 - value
+      return res
+    },
+    handleMove(e) {
+      let pageOffset = this.isHorizontal ? e.pageX : e.pageY
+      let offset = pageOffset - this.initOffset
+      let outerWidth = this.$refs.outerWrapper[this.offsetSize]
+      let value = this.valueIsPx
+        ? `${parseFloat(this.oldOffset) + offset}px`
+        : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
+      let anotherValue = this.getAnotherOffset(value)
+      if (parseFloat(value) <= parseFloat(this.computedMin))
+        value = this.getMax(value, this.computedMin)
+      if (parseFloat(anotherValue) <= parseFloat(this.computedMax))
+        value = this.getAnotherOffset(
+          this.getMax(anotherValue, this.computedMax)
+        )
+      e.atMin = this.value === this.computedMin
+      e.atMax = this.valueIsPx
+        ? this.getAnotherOffset(this.value) === this.computedMax
+        : this.getAnotherOffset(this.value).toFixed(5) ===
+          this.computedMax.toFixed(5)
+      this.$emit('input', value)
+      this.$emit('on-moving', e)
+    },
+    handleUp() {
+      this.isMoving = false
+      off(document, 'mousemove', this.handleMove)
+      off(document, 'mouseup', this.handleUp)
+      this.$emit('on-move-end')
+    },
+    handleMousedown(e) {
+      this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+      this.oldOffset = this.value
+      this.isMoving = true
+      on(document, 'mousemove', this.handleMove)
+      on(document, 'mouseup', this.handleUp)
+      this.$emit('on-move-start')
+    },
+    computeOffset() {
+      this.$nextTick(() => {
+        this.computedMin = this.getComputedThresholdValue('min')
+        this.computedMax = this.getComputedThresholdValue('max')
+        this.offset =
+          ((this.valueIsPx
+            ? this.px2percent(
+                this.value,
+                this.$refs.outerWrapper[this.offsetSize]
+              )
+            : this.value) *
+            10000) /
+          100
+      })
+    }
+  },
+  watch: {
+    value(val) {
+      if (val !== this.currentValue) {
+        this.currentValue = val
+        this.computeOffset()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.computeOffset()
+    })
+
+    on(window, 'resize', this.computeOffset)
+  },
+  beforeDestroy() {
+    off(window, 'resize', this.computeOffset)
+  }
+}
+</script>
+<style>
+.zj-split-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.zj-split-pane {
+  position: absolute;
+}
+.zj-split-pane.left-pane,
+.zj-split-pane.right-pane {
+  top: 0;
+  bottom: 0;
+}
+.zj-split-pane.left-pane {
+  left: 0;
+}
+.zj-split-pane.right-pane {
+  right: 0;
+}
+.zj-split-pane.top-pane,
+.zj-split-pane.bottom-pane {
+  left: 0;
+  right: 0;
+}
+.zj-split-pane.top-pane {
+  top: 0;
+}
+.zj-split-pane.bottom-pane {
+  bottom: 0;
+}
+.zj-split-pane-moving {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* 开始 */
+/* .zj-split-trigger {
+  border: 1px solid #dcdee2;
+} */
+.zj-split-trigger-con {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+.zj-split-trigger-bar-con {
+  position: absolute;
+  overflow: hidden;
+}
+.zj-split-trigger-bar-con.vertical {
+  top: 50%;
+  height: 32px;
+  transform: translate(0, -50%);
+}
+.zj-split-trigger-bar-con.horizontal {
+  left: 50%;
+  height: 16px;
+  text-align: center;
+  width: 32px;
+  transform: translate(-50%, 0);
+}
+.zj-split-trigger-vertical {
+  width: 16px;
+  height: 100%;
+  background-color: #f2f4f9;
+  border-top: none;
+  border-bottom: none;
+  cursor: col-resize;
+}
+.zj-split-trigger-vertical .zj-split-trigger-bar {
+  width: 16px;
+}
+.zj-split-trigger-horizontal {
+  height: 16px;
+  width: 100%;
+  background-color: #f2f4f9;
+  border-left: none;
+  border-right: none;
+  cursor: row-resize;
+}
+.zj-split-trigger-horizontal .zj-split-trigger-bar {
+  width: 16px;
+  transform: rotate(90deg);
+  position: relative;
+  bottom: 8px;
+}
+.zj-split-horizontal > .zj-split-trigger-con {
+  top: 50%;
+  height: 100%;
+  width: 0;
+}
+.zj-split-vertical > .zj-split-trigger-con {
+  left: 50%;
+  height: 0;
+  width: 100%;
+}
+.zj-split .no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/components/SplitPane/triggerPane.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="classes">
+    <div :class="barConClasses">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAAAXNSR0IArs4c6QAAAjNJREFUaEPtWEFLG1EQfs9Eo4kUjJYieMklFKL0IlZX3JAiTcgmOaSJB09e+yd67rmnHorHHowJqMmaihddWS3kGigEqojQENqUEtKs2fBe2dSXowyPhWXh5TYw8+183+w3WQYjh3/Y4ecjcANF9WqBEHPNatiDUSerbFRZ86ra8HVJM8PiucDCUSwWMiDkwA0UyloeIbJngWKEGrlUNMwecHB69axv3DdZ7MdT84qyMoofa8Q9DZQqWoJQ8sFiQzG6ySvR14xZ6fTrLDGMSxb7AgEpHVv+aesIIGA8OeAR8IBDakQDYAWKZW2TIPr+v6z0Np+KZpnE1aoe7AwGJyz2TPri2c2Xv2wdgdgDh1/OQqaJXg1lHcN/3iTlfSaxrutTP9rmNovng+OfJUnq2ToCCBhPDvgl5AGH1LinAesfb2CYSxYrgsjffCqqM4b1en3i23VbZvHzUPA8Eon0bVVA2LB4fJEhhHx6+CD5nlPkVSaxqp4/7VJUH21Cr2cxG19v2ToCCBhPjntcwMMOUuMeBYqVM5lS/O6B1V0uJe8whuWyNmMgWmDxtNe7lUhIbVsVEHugVNHCFKP08HsIod+55MYuk/ioVvP3W723oxF4nnyMx190bR0BBIwnxz0u4GEHqREKgBUQ9wHHN6G4D0A8zZMDdgEPOKTGPQ2I+4Dje0DcByCW4slxjw3FfcBxG4r7AI/FIDXusSGEDU8OWAFxH3B8D4j7AM8bDqkBuwACxpPzDwGD3FDyRWhbAAAAAElFTkSuQmCC"
+        alt=""
+        :class="`${prefix}-bar`"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'triggerPane',
+  props: {
+    mode: String
+  },
+  data() {
+    return {
+      prefix: 'zj-split-trigger',
+      initOffset: 0
+    }
+  },
+  computed: {
+    isVertical() {
+      return this.mode === 'vertical'
+    },
+    classes() {
+      return [
+        this.prefix,
+        this.isVertical
+          ? `${this.prefix}-vertical`
+          : `${this.prefix}-horizontal`
+      ]
+    },
+    barConClasses() {
+      return [
+        `${this.prefix}-bar-con`,
+        this.isVertical ? 'vertical' : 'horizontal'
+      ]
+    }
+  }
+}
+</script>

src/components/SplitPane/utils.js

@@ -0,0 +1,45 @@
+import Vue from 'vue'
+const isServer = Vue.prototype.$isServer
+// 判断参数是否是其中之一
+export function oneOf(value, validList) {
+  for (let i = 0; i < validList.length; i++) {
+    if (value === validList[i]) {
+      return true
+    }
+  }
+  return false
+}
+
+/* istanbul ignore next */
+export const on = (function () {
+  if (!isServer && document.addEventListener) {
+    return function (element, event, handler, useCapture = false) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, useCapture)
+      }
+    }
+  } else {
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler)
+      }
+    }
+  }
+})()
+
+/* istanbul ignore next */
+export const off = (function () {
+  if (!isServer && document.removeEventListener) {
+    return function (element, event, handler, useCapture = false) {
+      if (element && event) {
+        element.removeEventListener(event, handler, useCapture)
+      }
+    }
+  } else {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler)
+      }
+    }
+  }
+})()