@tongfun/tf-widget 0.1.8-beta → 0.1.9

package/package/tf-layout/README.md

@@ -1,2 +1,69 @@
-# tongfun
-## 砼方微前端布局组件(内部使用), 子应用菜单、标签导航组件
+# Layout 组件 
+
+## 参数
+
+1. 菜单参数 (**:menusInfo**)
+
+```	javascript
+	{
+        path: '' // 路由path,
+        icon: '' // 菜单图标,
+        name: '' // 路由name,
+        title: '菜单名字',
+        childNode: [
+            {
+                path: '' // 路由path,
+                icon: '' // 菜单图标,
+                name: '' // 路由name,
+                title: '菜单名字',
+            }
+        ]
+    }
+```
+
+2. 三级缓存数组，通过事件@setThirdCache传递
+3. 例子：
+
+```javascript
+<template>
+  <TfLayout
+    :menus-info="menuInfo"
+    @setThirdCache="setThirdCache"
+  />
+</template>
+<script>
+export default {
+  name: 'Layout',
+
+  data() {
+    return {
+      menuInfo: this.$store.getters.menuInfo
+    }
+  },
+  methods: {
+    setThirdCache(value) {
+      this.$store.commit('routeCaching/setThirdCache', value)
+    }
+  }
+}
+</script>
+```
+
+4. 小标签栏禁止关闭
+
+   需要在路由的meta属性新增 **defaultRoute: true**
+
+```javascript
+	// 例子：
+	{
+        path: '/',
+        component: () => import('@/views/home/tenan-management-home'),
+        name: 'TenantManagementHome',
+        icon: 'home',
+        meta: {
+                    title: '主页',
+                    defaultRoute: true
+              }
+  	},
+```
+

package/package/tf-layout/src/components/tf-labelbar.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="tf-labelbar">
+    <div class="close-menu">
+      <div
+        :class="coloseMenu ? 'open-menu-icon': 'close-menu-icon'"
+        src=""
+        alt=""
+        title="隐藏列表"
+        @click="changeMenuState"
+      />
+    </div>
     <ul ref="labelMenu">
       <li
         v-for="tagItem in tagList"
@@ -11,13 +20,13 @@
         <span>{{ tagItem.title }}</span>
         <i
           v-show="!tagItem.notCloseTag"
-          class="el-icon-close icon"
+          class="el-icon-close close-icon"
           @click.stop="closeTag(tagItem)"
         />
       </li>
     </ul>
     <div
-      class="image left"
+      class="scrollbar-icon left"
       @click="handleScroll('left')"
     />
     <el-dropdown
@@ -48,7 +57,7 @@
       </el-dropdown-menu>
     </el-dropdown>
     <div
-      class="image right"
+      class="scrollbar-icon right"
       @click="handleScroll('right')"
     />
     <TfRightMenu
@@ -71,6 +80,7 @@ export default {
   },
   data () {
     return {
+      coloseMenu: false,
       activePath: '/',
       tagList: [],
       rightMenuLeft: 0,
@@ -89,8 +99,8 @@ export default {
             name,
             params,
             query,
-            defaultRouter: meta.defaultRouter,
-            notCloseTag: meta.notCloseTag,
+            defaultRoute: meta.defaultRoute,
+            notCloseTag: meta.defaultRoute,
             title: meta.title,
             replace: meta.replace
           }
@@ -99,7 +109,7 @@ export default {
             this.$emit('setCache', cacheArr)
             obj.cacheArr = cacheArr
           }
-          if (obj.defaultRouter) {
+          if (obj.defaultRoute) {
             if (!this.checkMenu(obj.path)) this.tagList.unshift(obj)
           } else {
             if (!this.checkMenu(obj.path)) this.tagList.push(obj)
@@ -118,6 +128,10 @@ export default {
     }, false)
   },
   methods: {
+    changeMenuState () {
+      this.coloseMenu = !this.coloseMenu
+      this.$emit('changeMenuState', this.coloseMenu)
+    },
     /**
      * @description tag右键点击事件
      */
@@ -231,98 +245,97 @@ export default {
   width: 100%;
   height: 40px;
   position: relative;
-  ul {
+  box-sizing: border-box;
+  padding: 0 73px;
+  .close-menu {
+    cursor: pointer;
     position: absolute;
-    left: 35px;
-    top: 0;
-    bottom: 0;
-    right: 55px;
-    padding: 0 10px;
+    left:0;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
+   .close-menu-icon {
+      height: 15px;
+      width: 15px;
+      background: #99999a;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAdpJREFUOE+Nkz1rFUEUht8zs0kstBArBUst9C8oEv/DvYg7V+9soZWVJhoxsCJ+YCspFLyzYecSkosgElNYqAg22hhFwUII4g+wEnFn58jG3Xh39wpOM5/nmcN73kNB395l0Ns8CUforEmMujnGx6SzsXuS2n4hosduEF5E/CJAPOt27su91Klmpt0+UfcQxwJx7Ks3JKJ0UzA9dUZdrQHO3Z/Cg/OZjIZ9MBuAo9z0TDNLEtp+EIx1l6iFHUAVrO1ZAAmAXm6Ubf5eZNEGFKfxrJPRMASzBdOZPAlTdNamMepkNX1agO1H3V9SWwUgBXAqN2q1GTS+b2QQC7l1qAviFSZc8j5bwnSwF1nmMLWLkf2k7eBq7YIffwDAhjPqMvTKQYn8K4CiEsW8v1w3k2AAAuB3LQ3E1rd5IrrJxPMSeMaQe8j7v6UtUUwsHOh7HVCqL6J0kZjmBPHxbNDb/H8NCsCBw1xUIdD2BgPXSNAJ9zB8hQsbM9j3JsPHI4Sjn7iaJ/ugdGCg7S0GFsjjmFtWr//lg/cCWG85sYL07W0mXCGik25w+iXi61SzchANP4P9E2d6c/VeYEJnJIrmCqL0jmfKvFGLLStLbR8x4bkfqKWJ3dhonqagvwFo3iEkt6LFjgAAAABJRU5ErkJggg==);
+      &:hover {
+        background: #07579a;
+      }
+    }
+    .open-menu-icon {
+      height: 15px;
+      width: 15px;
+      background: #99999a;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAbRJREFUOE+dk7FP21AQxr/PzyZCsLQjXWFhQR0qVQyoLFXF2JIsicBxVHWooHSsOtRbxUAlRKWqgDDItiDAP8AEqBPs/RM6FykTxO9dFSd2lKSkUt/47u6n7+67I4Y+YTtMydOKxwonJW274QshdzsJnXAWrEbrAj7UQfk10r+iySH+uQ1/PlFeWIKw3gvwfQv+J7GX41mxcAFwfwCSAarRIoCjXkBLSArxjeOFM0Z4DWJX71Xe5kr8C5UqaAPqTAv6389pGyelO6d2+NgYfQViJ4c8+G1h+02zCxg+RRRq4WQivKYgTILKO/S2UCfceGpE6ULK0Va3JWVE4DhNJA0lmIXwgOSXpOF8aKnLFahq9AvAxD+E3AAyCrBgwTxtBktXyo2LoBwTSwePgMIYLN31OqNpZcMkDWuEC4R8F5gNM37zEVurt8oLX0F4OuhCnxTHjZ4Yyg8RfjP7lfdtN0q6Cxjigu2Gz4Q8B/hVB+WVtDhz4V4FnT2wa/GcGLkkuJkE5bWBPfgrICv2ouciOBsobt1EZqMbvwSlbwb5oUSfxcKY3qus3nsLuQv/e41ePC8i238Ap2nyLhWRefAAAAAASUVORK5CYII=);
+      &:hover {
+        background: #07579a;
+      }
+    }
+  }
+
+  ul {
+    height: 100%;
+    width: 100%;
+    padding: 0;
     margin: 0;
     display: flex;
     align-items: flex-end;
     justify-content: left;
     list-style: none;
-    overflow-y: none;
+    overflow-y: hidden;
     overflow-x: auto;
     &::-webkit-scrollbar {
       display: none;
+      height:0;
     }
-
     li {
-      margin: 0;
-      padding: 0;
+      padding: 0 30px;
+      font-size: 14px;
+      color: #515a6e;
       height: 35px;
-      min-width: 84px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
+      margin: 10px -19px 0 0;
       cursor: pointer;
-      box-sizing: border-box;
-      padding: 0 28px 0 15px;
+      display: flex;
       white-space: nowrap;
-      .icon {
+      align-items: center;
+      justify-content: center;
+      box-sizing: content-box;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
+      mask-repeat: no-repeat;
+      mask-size: 95% 100%;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+      .close-icon {
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+        margin-left: 8px;
         width: 0;
-        height: 12px;
-        position: absolute;
-        right: 24px;
-        transform: translateY(-45%);
-        top: 50%;
         overflow: hidden;
-        transition: all 0.3s;
         &:hover {
-          background: #9e9e9e;
-          color: white;
           border-radius: 50%;
+          background: #666666;
+          color: white;
         }
       }
-      &::before {
-        content: "";
-        height: 100%;
-        width: 0;
-        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAeCAYAAACyqDnLAAAAAXNSR0IArs4c6QAAA8BJREFUaEPtmk+IFEcUxr+vZzZZe3ZDdux1JWqCCZu4CsE/EJCQUxLJSTCRXLysQnIKGAI5SA7xkpBDvAge4kUEUTxoEA+yIRIIYclBQ9gIIjGLl4DJ9I7gTo+76vQLr2Zq0zPbM9ujt+2qy0xP/WnqN1+996peET2KiHhaTTIO52WCBRyC4B0BXgbwXK++q6BuAcDfIH5ljNPlEq4qBxEpkGx0mx+7VShMHeDePXm+8Qy+AnAIwCAAUcarAFh/UyB+8mJ8Wh7ijIgUST5OGyAVjIUZ3pct8HAJxKsA4gRMo9wcFBWPzls56ZwXhTg46vNcN6UuA2phVh/Ii3GMnwG8BOARgGIulfm/alSRhaYFxP61Pi+kQU0DSpISRvIDgHdbMAdyoMYsU1TbqVCrjQLeGBvkX1aAtnMbUEs8rMkkiFMA9F9RZbrSrtQiiLOBzwNdgYqIUab2CyO5BmBXy37kxV5mFY11yo+9GDvKw7yRhLqkUPtjJZKdBK5nHT2n7ZorV3AkGOI3Sa+fBGpCgUokHxP4zi33nlKxtvRyUOLepHNaDrQmx0h85oD2BKqhlEfg97KPnWoqrclcBjSMRJ3RpAOaCehs1cfWcXIxDajZUoWRXASwzwHtCdQ6porU8croKOfTgJqtZliXHyF4G4C1Ezn1OxmAEvONGONjQ/ynDah90M9qHb8JsN2FTBmAapwe4/VgmDdtlGRsqAV6V6RUrOMWgA0O6IoL0yx7z8Nb5TX8xXp6C9Qs97m6bBQxQP3cniqtyHGpQdMkEu8HPr/vBGoc0lxddotgOvuYuW7ZDO6Jw4HP4za4two1Qf1cXT4UwXnnkDIJxZ5znAhK/CQVaCWSowS+dCFTJqA2CpoKSnyv0yl1xqAuZFqZqd0tzd73sW0zuWCcu/Xwf4o8OxLhDxDjzsOvTDPhtB/GBWxbN8jbRqVL6Y55mYCHmdb5Zz7zRpk4tjUyKzlxgl9UoMYhJQ6V3XLPDtY4JhLfrvX5uWG5dEpflzMQHHAOKTvNRDQ0HZT4pjGf2r21Q7oJYJOzn30BtaZxoeBhYmQN7xigczXZI8SUg9kXTNu4aSIFk8EQTzeBRnJSgI9cQP8UQIGLQYkf8N+arPdockgvJJL6TzRyR6fVdLvEJC+7FK3TRGa14GEXw5ocAfG1W+5PpSEbGX3BSiRXALxGYhGCAbbuLcV6Q6I9J6+K0yS/LZ4kntn8nkw5dz7bft1+T85Ix0m+q9/Z6gR1J9NPUaWl3VfScdIuhzWk9Q7qfS9iEIIb/wHQ08swGxvGXQAAAABJRU5ErkJggg==);
-        mask-repeat: no-repeat;
-        mask-size: 100% 100%;
-        position: absolute;
-        left: 0%;
-        right: 0;
-        transform: translateX(-50%);
-        transition: all 0.3s;
-      }
       &:hover {
-        .icon {
-          right: 12px;
-          width: 12px;
-        }
-        &::before {
-          left: 50%;
-          width: 120%;
-          z-index: -1;
-          background: #eeeeee;
+        background: #dee1e6;
+        .close-icon {
+          width: 14px;
         }
       }
-    }
+  }
     .active-tag {
-      color: #0c4c8e;
-      &::before {
-        left: 50%;
-        width: 120%;
-        z-index: -1;
-        background: #ecf5ff;
-      }
-      .icon {
-        right: 12px;
-        width: 12px;
-      }
-      &:hover {
-        &::before {
-          background: #ecf5ff !important;
-        }
+      padding: 0 20px !important;
+      color: #0361A4 !important;
+      background: #ECF5FF !important;
+      .close-icon {
+        min-width: 14px;
       }
     }
   }
-  .image {
+  .scrollbar-icon {
     cursor: pointer;
     width: 13px;
     height: 13px;
@@ -335,25 +348,27 @@ export default {
   }
   .left {
     background: #99999a;
-    left: 10px;
+    left: 55px;
     mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAA9RJREFUSEuVl0tvG2UUhp/zeRIXaMFiEaEsyq1NU0oJKVBaxEVtWqCoRVzELyB2HEXiByAkAgsuldhESmJHsiIlexawoC0qioAFFWUFCJVFEWJFEBtEAh6Pv4NOPBMcx5fxSN7NO8/3nffcLKR8VFUqlcr+KIqOOOe0Vqv9MDMz81tKOaYvlUp3ZzKZw977WyStsFKp7KvVauMi8hiw6Zxby+fzP/Wjr9frx1T1GJBNBZ6fn98bBMHDwCvA08BN7/3C9PT0Whpwk/5V4KRpeoKXl5f3hGH4AHABeBk4CnwnIm8XCoXPeoFb9AYeAWpdwSaqVquHgAkRMZGFaQ9wXVXfLBaLn3cDt9E/CgRA1BEcn/Sgqp4VkbPACSBnIFX9AninWCx+2QncRR8Cf7cFJycVkVOqekFExoE7AAfUgSvAe1NTU1+3A/fQ/wv8uQtsoiiKRur1+pmWm2qcExFg3l5sB06h3wR+3wFuOulpVT0f39TCa+9tg1X1koh8mICtRkVEU+p3gufm5rLZbHbEPAWeFZHHE09bwhmJyBUR+SCfz3+VQPvQ/wP8sXXjDp4kN2210UJt2bztcZ/6BnhhYeG+gYGBIe+9NYZTzdnbIWO3PLYb53K5a+vr67kgCEZE5KmU+ga4VCq97py7x3tvyTQaZ2+7bG/2+NNMJnPROfdjFEVjqvqCQXvok3s0wEtLS4vAqKo+GRd3p9JsBn+sqh9ls9lfwjA8JyJ54Dgw2KuTAQ1wuVyuiMghVbUeanWaGhwEwa/ee6vzvKo+AmT6Ab8B3Bv7cz+wt4O4uY4/sToeHBy8EYbhcRE5r6rm8YEu+p2hLpfLo977u5xzp4FnAOtS+7qcfDu5VPVb59ydURQd7kPfCLXV4erq6q2bm5sPicgZ4BzwYBf4rnJaWVm5rQ/9/3VstzPxxsaGbReWoROAzd92Yd9qIKr6vnWupIH0od8JNrgNbOfcWCaTmVDV54EjwO2tnatTy0ypt5bZ6FzNj604YRiaZ88BFvrE81RDIoV+95BIDmBhq1arR+MJZaFv9rwuIpeTULdLwh56C/XusdgM7+C53fyqc+5dGxKdsr+L51Xgr66rT+KZc84m1ovxvhWo6jfAW8Vi8Wq3htFGPxa/X+257MWeWam9ZL+4SVyLl73LvTpVi96Wxf3WNnuC7cPlctnWHpvPrwFPAD8Dc4VCYc0WgF7wFr19p/uWmXzQanVxcTHnnDPRSRHZcM5dmpyc/D4NuFkvIidUdTDVje0As7Ozbnh4+ID33oaBF5HrhULhZhpwoh8aGjoYBMG4/YX5D8BcMmEDOwIbAAAAAElFTkSuQmCC);
     mask-size: 100% 100%;
     mask-repeat: no-repeat;
   }
   .right {
     background: #99999a;
-    right: 35px;
+    right: 55px;
     mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAA25JREFUSEuVls9rXFUUx7/fO3mDojAhZGFwIYgbFXUj4kJqpQqtC5dxHUiYRDCL7NRSWsG/IS/PB6Vr20ijNNL0h0mlPzQNRVyIyZgWF1FrWhV1kpl59ytH3pNxmJk73uXjfu/nnXO+95zLOI7fdM7VW63WNzMzM9skhcBK0/Qx7/1z3nuWSqWvJycnb4d0jOP4KMm6pKsjIyM3x8fHGyFQkiRPSzpEskzyi0qlshHSGegagCbJz7IsO1Mqlb6vVqvNfrA4jg3yFoBHSH7aarUWQzouLCz8mh+6Lum09/7y6Ojodr8/TJLkiKQTAJ4iedV7vxjSGagOoAzgDwDXASw659YqlUqtFyxJklcBfCDpBQC/AbgR0hnINj4IIAJwj+QVScskL0va7pbGJElelvQ+gAN5NoI6A90H8FAOMsf9AuCapCXn3JXh4eHbnZEZCMBxSQcBFC7tqzPQLoCH8/SZiAB+NDdJWsmybLUotCSajfOIrEYGtNVXZxs6QYXZMgC7JM0gZ9thtqEjonaD9tT1AhXiXUlrAM63uyqO4wMkjwN4pcc1+I+uXC7fDYG8RQbgJoAl7/3y9PT0nTRNX/LeHwNg7uu2/tFJ2iD5MclaCFQcYnfNDHJqaGhopdlsPumcew/AkUAXMUevkdwcBFQU2lx1kmRKcsR7/w6AN/qACt2OpDv/B3Sf5ElJHwKoAHh3QNDPAH4YBGQ/bV3jKwCnoig612g0nnDOHZX0eiB1f+YtKpg6C9/qcwvAJwCWd3Z2tsbGxl4keUzSaz1A/+pIngUQNIN1Det/5wFcLJfLmxMTE3sD2LvQrQC44L3/qVfqzJ73LBIbA5Iu7e/vfzc7O7sfuLA9db1a0N3czhecc5eiKKpZJEULmp+fP+icswvb2YK66ooW1N5U7Ztd0C+tJpJWG41GzSIpIF0iKmzcVVfUsHNMWOGv27S13O7t7W0V6WovepcxEdS1D76/cgsvkfw8iqJvLV3dXNUx+H4vWlQ/XTGPSpJuOefOZFl2sV6v1+bm5mzydl1xHB92zp2Q9KylmeRiSGegdQCt3MIftburD+iQc+5tSY9KOkfydEhnIJv9dZumURTd6JWuAmqmSNP0Ge/9YZIPAFgdRGfPrQl7QALYmJqa2gw9BA2UJMnjkp4H4ACsV6vVrZDubzHWkATwr3pxAAAAAElFTkSuQmCC);
     mask-size: 100% 100%;
     mask-repeat: no-repeat;
   }
   .right-menu {
+    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
+    justify-content: center;
     cursor: pointer;
-    width: 14px;
+    width: 40px;
     height: 100%;
     position: absolute;
     top: 0;
-    right: 10px;
+    right: 0px;
     display: flex;
     align-items: center;
   }

package/package/tf-layout/src/components/tf-menu.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="tf-menu" :style="{ width: isCollapse ? '64px' : '175px' }">
+  <div
+    v-show="!menuState"
+    class="tf-menu"
+    :style="{ width: isCollapse ? '64px' : '175px' }"
+  >
     <el-scrollbar class="tf-menu-scroll">
       <el-menu
         :collapse="isCollapse"
@@ -11,7 +15,7 @@
         :router="true"
         :style="{ width: isCollapse ? '64px' : '175px' }"
       >
-        <template v-for="firstMenuItem in menuInfo">
+        <template v-for="firstMenuItem in menusInfo">
           <el-submenu
             v-if="firstMenuItem.childNode"
             :key="firstMenuItem.path"
@@ -22,7 +26,7 @@
                 :icon-class="firstMenuItem.icon"
                 style="height: 15px; width: 15px; margin-right: 10px"
               />
-              <span>{{ firstMenuItem.moduleName }}</span>
+              <span>{{ firstMenuItem.title }}</span>
             </template>
             <el-menu-item
               v-for="secondMenuItem in firstMenuItem.childNode"
@@ -33,7 +37,7 @@
                 :icon-class="firstMenuItem.icon"
                 style="height: 15px; width: 15px; margin-right: 10px"
               />
-              <span>{{ secondMenuItem.moduleName }}</span>
+              <span>{{ secondMenuItem.title }}</span>
             </el-menu-item>
           </el-submenu>
           <el-menu-item
@@ -45,7 +49,7 @@
               :icon-class="firstMenuItem.icon"
               style="height: 15px; width: 15px; margin-right: 10px"
             />
-            <span slot="title">{{ firstMenuItem.moduleName }}</span>
+            <span slot="title">{{ firstMenuItem.title }}</span>
           </el-menu-item>
         </template>
       </el-menu>
@@ -58,7 +62,7 @@
       <img
         src="data:image/png;base64,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"
         alt=""
-      />
+      >
     </div>
   </div>
 </template>
@@ -67,11 +71,15 @@
 export default {
   name: 'TfMenu',
   props: {
-    menuInfo: {
+    menusInfo: {
       type: Array,
       default: function () {
         return []
       }
+    },
+    menuState: {
+      default: false,
+      type: Boolean
     }
   },
   data () {
@@ -108,6 +116,7 @@ export default {
       }
     }
     .el-submenu .el-menu-item {
+
       transition: width 0.3s;
       height: 40px;
       width: 175px;
@@ -115,12 +124,16 @@ export default {
     .el-menu-item,
     .el-submenu__title {
       transition: width 0.3s !important;
-
+      display:flex;
+      align-items: center;
       height: 40px;
       line-height: 40px;
       &:hover {
         background: #0361a4 !important;
       }
+      span {
+        margin-left: 5px;
+      }
     }
     .is-active {
       transition: width 0.3s !important;

package/package/tf-layout/src/tf-layout.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="tf-layout">
-    <TfMenu :menu-info="menuInfo" />
+    <TfMenu
+      :menus-info="menusInfo"
+      :menu-state="menuState"
+    />
     <div class="tf-layout-subject">
-      <TfLaberBar @setCache="setCache" @deleteCache="deleteCache" />
+      <TfLaberBar
+        @setCache="setCache"
+        @changeMenuState="changeMenuState"
+        @deleteCache="deleteCache"
+      />
       <div class="tf-layout-subject-content">
         <keep-alive :include="secondCacheArray">
           <router-view />
@@ -22,7 +29,7 @@ export default {
     TfLaberBar
   },
   props: {
-    menuInfo: {
+    menusInfo: {
       type: Array,
       default: function () {
         return []
@@ -31,12 +38,16 @@ export default {
   },
   data () {
     return {
+      menuState: false,
       cacheMap: new Map(),
       secondCacheArray: [],
       thirdCacheArr: []
     }
   },
   methods: {
+    changeMenuState(state) {
+      this.menuState = state
+    },
     setCache (value) {
       this.cacheMap.set(value[2] || value[1], value[1])
       this.initCacheArr()
@@ -62,7 +73,6 @@ export default {
     deleteCache (value) {
       if (Array.isArray(value)) {
         value.forEach((item) => {
-          console.log(item)
           this.cacheMap.delete(item[2] || item[1])
           this.thirdCacheArr.splice(
             this.thirdCacheArr.indexOf(item[2] || item[1]),
@@ -74,7 +84,6 @@ export default {
               1
             )
           }
-          console.log(this.cacheMap.get(item[2] || item[1]))
         })
         this.$emit('setSecondCache', this.secondCacheArray)
         this.$emit('setThirdCache', this.thirdCacheArr)
@@ -91,9 +100,11 @@ export default {
   display: flex;
   .tf-layout-subject {
     flex: 1;
-    height: 100%;
-    width: 100vw;
+    height: 94.82vh;
+    width: 100%;
+    overflow: hidden;
     .tf-layout-subject-content {
+      width: 100%;
       height: calc(100% - 35px);
       background: rgb(241, 241, 241);
       box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongfun/tf-widget",
-  "version": "0.1.8-beta",
+  "version": "0.1.9",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,
@@ -20,8 +20,10 @@
     "js-base64": "^3.6.0",
     "less": "^4.1.0",
     "less-loader": "^7.2.1",
+    "sortablejs": "^1.13.0",
     "vue": "^2.6.11",
-    "sortablejs": "^1.13.0"
+    "vue2-datepicker": "^3.10.4",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/api/file-enclosure.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request.js'
+
+/**
+ * 删除附件
+ * @param {id} 删除附件的id
+ */
+export function delAttachment (id) {
+  return request({
+    url: `/api/file/attachment/?ids[]=${id}`,
+    method: 'delete'
+  })
+}
+
+/**
+ * 下载附件
+ * @param {id} 下载附件的id
+ */
+
+// 根据id下载附件
+export function download (id) {
+  return request({
+    url: `/api/file/attachment/download/${id}`,
+    method: 'get',
+    responseType: 'arraybuffer'
+  })
+}

package/src/api/push-down.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询所有下推的单据
+export function findBillExchangeRouterVO (params) {
+  return request({
+    url: '/api/report/billExchange/findBillExchangeRouterVO',
+    method: 'get',
+    params
+  })
+}
+
+// 下推时获取数据
+export function getDataWhenAdd (params) {
+  return request({
+    url: '/api/report/billExchange/doExchange',
+    method: 'Get',
+    params
+  })
+}