antanklayout_vue2 0.0.213 → 1.0.0

package/README.md

@@ -1,2 +1,124 @@
-#tickethtml
-#seatstatus  1 正常   3 锁定  6 维修
+# antanklayout
+
+> 
+This component is only used in ANTANK SaaS, which will solve the scheduling problem between multiple systems and is suitable for the VUE2 environment
+
+It is done in three steps: 
+1) 安装组件（install the component）
+
+## Installation
+```bash
+
+npm i antanklayout_vue2
+
+```
+
+## Usage
+2) 引入组件（introduce the component）
+
+Ingest styles globally
+main.ts
+```
+import 'antanklayout_vue2/dist/antanklayout_vue2.css'
+
+```
+
+创建导入组件的页面（Create a Vue page "layout" layout.vue）
+
+```
+<template>
+  <Antanklayout>
+    <transition appear name="fade-transform" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <router-view :key="key" />
+      </keep-alive>
+    </transition>
+  </Antanklayout>
+</template>
+<script>
+import Vue from 'vue'
+import antanklayout from "antanklayout_vue2"
+Vue.component('Antanklayout', antanklayout.Antanklayout)
+export default {
+  name: 'Layout',
+  components: {
+    Antanklayout:antanklayout.Antanklayout
+  },
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
+
+
+```
+3) 动态路由（adjust the routing）
+
+
+```
+第一种方法
+const DynameicMenuList = []
+//路由扁平化处理
+const getFlatMenuList = (menuList) => {
+  return menuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
+}
+//过滤和动态添加路由
+const setDynameicMenuListPath = (menuList) => {
+  for (const item of getFlatMenuList(menuList)) {
+    item.children && delete item.children
+    if (item.component && typeof item.component == 'string') {
+      if (item.component == 'Layout') {
+        item.component = Layout
+      } else if (item.component == 'SeatMenu') {
+        item.component = Layout
+      } else if (item.component == 'AsideMenu') {
+        item.component = Layout
+      } else if (item.component == 'AppMain') {
+        item.component = Layout
+      } else if (item.component == 'MainContent') {
+        item.component = Layout
+      }
+    }
+
+    if(item.path && !item.redirect){
+      DynameicMenuList.push({
+        path: "/layout",
+        name: "layout",
+        component: Layout,
+        redirect: item.path,
+        children:[
+          item
+        ]
+      })
+    }
+  }
+}
+setDynameicMenuListPath(venue.venue)//动态添加路由
+
+const createRouter = () => new Router({
+    mode: 'hash',
+    scrollBehavior: () => ({ y: 0 }),
+    routes: [...DynameicMenuList,
+    {
+        path: '/',//开始进入系统
+        redirect: HOME_URL
+    },
+    {
+        path: "/layout",//调度当前系统的路由
+        name: "layout",
+        component: () => import("layout.vue"),//先前创建的页面
+        children: []
+    }]
+})
+
+
+第二种方法，手动在路由表中把所有子路由的父级指向layout，然后正常添加路由即可
+
+```