cxw-010203

3 years ago · ad5521a2f7
commit ad5521a2f7
32 changed files with 9972 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
+# ansu-business
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,48 @@
+{
+  "name": "ansu-business",
+  "version": "0.1.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.24.0",
+    "core-js": "^3.6.5",
+    "less": "^4.1.2",
+    "less-loader": "5.0.0",
+    "nprogress": "^0.2.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,44 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-18 17:15:53
+ * @LastEditTime: 2021-11-18 17:41:13
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/App.vue
+-->
+<template>
+   <a-config-provider :locale="locale">
+        <div id="app">
+            <router-view></router-view>
+        </div>
+    </a-config-provider>
+</template>
+
+<script>
+import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+export default {
+  name: 'App',
+   data() {
+        return {
+            locale: zhCN
+        };
+    },
+}
+</script>
+
+<style>
+html,
+body {
+    width: 100%;
+    height: 100%;
+    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
+    font-size: 62.5%;
+}
+#app {
+    width: 100%;
+    height: 100%;
+    min-width: 1200px;
+    min-height: 760px;
+    overflow: auto;
+}
+</style>
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,25 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:15:53
+ * @LastEditTime: 2021-11-22 15:40:15
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/main.js
+ */
+import Vue from 'vue'
+import App from './App.vue'
+import './styles/index.less';
+import mixins from "@/mixins"
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+Vue.use(Antd);
+Vue.use(mixins);
+import store from "@/store";
+import router from "@/permission";
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+  router,
+  store
+}).$mount('#app')
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@ -0,0 +1,22 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-22 15:34:24
+ * @LastEditTime: 2021-11-22 15:48:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/mixins/index.js
+ */
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+    install(Vue) {
+        Vue.mixin({
+            computed: {
+                ...mapGetters(['getSelectedKeys', 'getOpenKeys'])
+            },
+            methods: {
+                ...mapActions(['setSelectedKeys', 'setOpenKeys'])
+            }
+        })
+    }
+}
--- a/src/permission.js
+++ b/src/permission.js
@ -0,0 +1,22 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:34:50
+ * @LastEditTime: 2021-11-18 17:37:15
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/permission.js
+ */
+import NProgress from "nprogress"
+import "nprogress/nprogress.css"
+import router from "@/router"
+
+router.beforeEach((to, from, next) => {
+    NProgress.start()
+    next();
+})
+
+router.afterEach(() => {
+    NProgress.done()
+})
+
+export default router
--- a/src/request/index.js
+++ b/src/request/index.js
@ -0,0 +1,87 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-13 09:28:02
+ * @LastEditTime: 2021-11-11 10:45:00
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/request/index.js
+ */
+import axios from 'axios';
+import qs from 'qs';
+import router from "@/permission"
+import { message} from 'ant-design-vue'
+function filterRequestData(obj) {
+    let o = {};
+    for(let key in obj) {
+        let b1 = obj[key] === 0;
+        let b2 = obj[key] === false;
+        if(obj[key] || b1 || b2) {
+            o[key] = obj[key]
+        }
+    }
+    return o;
+}
+//创建axios的实例
+const httpService = axios.create({
+    baseURL: 'http://cloud.sws010.com',// TODO:具体的配置可以根据项目情况而来
+    timeout: 5000
+})
+
+//axios的拦截--request
+httpService.interceptors.request.use(config => {
+    // 请求成功处理
+    // if(localStorage.getItem('token')){//判断浏览器中的cookie中是否存在项目的token
+    //     config.headers.token = localStorage.getItem('token')
+    // }
+    const rqParams = filterRequestData(config.params);
+    const rqData = filterRequestData(config.data);
+    // post 'Content-Type' === 'application/x-www-form-urlencoded'
+    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+    if(config.method === 'post') {
+        config.data = qs.stringify(rqData);
+    } else {
+        config.data = rqData;
+        config.params = rqParams;
+    }
+    return config;
+},err => {
+    Promise.reject(err);// 请求错误处理
+})
+
+//4、axios的拦截--response
+httpService.interceptors.response.use(response => {
+	// TODO:具体的code对应的处理可继续添加修改
+    let data = null;
+    let data1 = null;
+    let msg = '';
+    let res = response.data;
+    let totalNum = 0;
+    if(res.Code == 1){
+        data = res.Data || [];
+        data1 = res.Data1 || [];
+        msg = res.Msg || "";
+        totalNum = res.totalNum || 0;
+        return {data,data1, msg, totalNum};
+    } else {
+        msg = res.Msg || "";
+        message.error(msg);
+        return Promise.reject(new Error(msg))
+    }
+},err => {
+	// TODO:具体的code对应的处理可继续添加修改
+    if(err.response.Code === 301){
+         //登录过期跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 ---主页(index) 或者 退出到登录前的浏览的页面
+        //这样登录页面登录接口成功之后可以进行跳转 主页(index) 或者 退出到登录前的页面： let path = this.$route.query.redirect || '/index.js';   this.$router.push(path);
+        setTimeout(() => {
+          router.replace({
+            path: '/login',
+            query: {
+              redirect: router.currentRoute.fullPath
+            }
+          });
+        }, 1000);
+    }
+    return Promise.reject(err);
+})
+
+export default httpService
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,87 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:30:38
+ * @LastEditTime: 2021-11-23 18:03:43
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/router/index.js
+ */
+import Vue from 'vue'
+import Router from "vue-router"
+const originalPush = Router.prototype.push
+
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+Vue.use(Router);
+
+import Layout from "@/views/Layout"
+const router = [
+    {
+        path: "/",
+        name: "Layout",
+        title: "外框",
+        component: Layout,
+        redirect: '/forecastShipping',
+        meta: {title: '首页'},
+        children: [
+            {
+                path: '/forecastShipping',
+                name: "ForecastShipping",
+                title: "预报寄件",
+                hide: false,
+                icon: 'container',
+                component: resolve => require(['@/views/ForecastShipping'], resolve),
+                meta: {title: '预报寄件'}
+            },
+            {
+                path: '/waybill',
+                name: "Waybill",
+                title: "运单管理",
+                icon: 'database',
+                hide: false,
+                component: resolve => require(['@/views/Waybill'], resolve),
+                meta: {title: '运单管理'}
+            },
+            {
+                path: '/billing',
+                name: "Billing",
+                title: "账单管理",
+                icon: 'profile',
+                hide: false,
+                component: resolve => require(['@/views/Billing'], resolve),
+                meta: {title: '账单管理'},
+                children: [
+                    {
+                        path: '/billing/_details',
+                        name: "Billing_details",
+                        title: "账单管理-详情",
+                        icon: 'profile', 
+                        hide: true,
+                        component: resolve => require(['@/views/Billing/_details'], resolve),
+                        meta: {title: '账单管理-详情'},
+                    }
+                ]
+            },
+            {
+                path: '/mySettings',
+                name: "MySettings",
+                title: "我的设置",
+                hide: false,
+                icon: 'setting',
+                component: resolve => require(['@/views/MySettings'], resolve),
+                meta: {title: '我的设置'}
+            }
+        ]
+    },
+    {
+        path: "/login",
+        name: "Login",
+        title: "登录", 
+        component: resolve => require(['@/views/Login'], resolve)
+    }
+]
+
+export default new Router({
+    routes: router
+})
--- a/src/store/actions.js
+++ b/src/store/actions.js
@ -0,0 +1,18 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:22:21
+ * @LastEditTime: 2021-11-22 15:45:24
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/store/actions.js
+ */
+const actions = {
+    setSelectedKeys: ({commit}, log) => {
+        commit('setSelectedKeys', log)
+    },
+    setOpenKeys: ({commit}, log) => {
+        commit('setOpenKeys', log)
+    },
+}
+
+export default actions
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -0,0 +1,18 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:23:13
+ * @LastEditTime: 2021-11-22 15:46:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/store/getters.js
+ */
+const getters = {
+    getSelectedKeys(state) {
+        return state.selectedKeys
+    },
+    getOpenKeys(state) {
+        return state.openKeys
+    }
+}
+
+export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,23 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 13:43:03
+ * @LastEditTime: 2021-10-12 13:48:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/store/index.js
+ */
+import Vue from "vue";
+import Vuex from "vuex";
+Vue.use(Vuex);
+
+import actions from "./actions";
+import mutations from "./mutations";
+import getters from "./getters";
+import state from "./state";
+ const store = new Vuex.Store({
+    state,
+    actions,
+    mutations,
+    getters
+})
+export default store
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@ -0,0 +1,22 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:21:16
+ * @LastEditTime: 2021-11-22 15:45:53
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/store/mutations.js
+ */
+const mutations = {
+    setSelectedKeys: (state, log) => {
+        state.selectedKeys = log;
+        let str = JSON.stringify(log);
+        sessionStorage.setItem('selectedKeys', str);
+    },
+    setOpenKeys: (state, log) => {
+        state.openKeys = log;
+        let str = JSON.stringify(log);
+        sessionStorage.setItem('openKeys', str);
+    },
+}
+
+export default mutations
--- a/src/store/state.js
+++ b/src/store/state.js
@ -0,0 +1,13 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-18 17:21:01
+ * @LastEditTime: 2021-11-22 15:44:58
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/store/state.js
+ */
+const state = {
+    selectedKeys: JSON.parse(sessionStorage.getItem('selectedKeys')) || ['/'],
+    openKeys: JSON.parse(sessionStorage.getItem('openKeys')) || []
+}
+export default state
--- a/src/styles/antd.less
+++ b/src/styles/antd.less
@ -0,0 +1,33 @@
+.ant-layout {
+    width: 100% !important;
+    height: 100% !important;
+}
+.ant-layout-sider-children {
+    background-color: #2a334f;
+}
+.ant-layout-header {
+    display: flex !important;
+    justify-content: space-between !important;
+    line-height: 1 !important;
+}
+.ant-menu {
+    background: #2a334f !important; 
+}
+.ant-menu-inline {
+    border-right: 1px solid transparent !important;
+}
+.ant-menu-inline > .ant-menu-item {
+    color: #fff;
+}
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+    color: #1990fe;
+}
+.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+    color: #fff;
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
+    background-image: linear-gradient(to right, rgba(247, 249, 251, 1), rgba(247, 249, 251, 1)) !important;
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
+    background-image: linear-gradient(to right, rgba(247, 249, 251, 1), rgba(247, 249, 251, 1)) !important;
+}
--- a/src/styles/index.less
+++ b/src/styles/index.less
@ -0,0 +1 @@
+@import "./antd.less";
--- a/src/views/Billing/_details/index.vue
+++ b/src/views/Billing/_details/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-23 10:27:56
+ * @LastEditTime: 2021-11-23 10:30:58
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Billing/_details/index.vue
+-->
+<template>
+    <div>
+        444444
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Billing_details"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/Billing/index.vue
+++ b/src/views/Billing/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 15:56:04
+ * @LastEditTime: 2021-11-22 17:14:10
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Waybill/index.vue
+-->
+<template>
+    <div>
+        44444
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Billing"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/ForecastShipping/index.vue
+++ b/src/views/ForecastShipping/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 15:56:04
+ * @LastEditTime: 2021-11-22 17:00:21
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Waybill/index.vue
+-->
+<template>
+    <div>
+        11111
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ForecastShipping"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/Layout/index.vue
+++ b/src/views/Layout/index.vue
@ -0,0 +1,170 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-18 17:27:08
+ * @LastEditTime: 2021-11-24 10:22:05
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Layout/index.vue
+-->
+<template>
+    <a-layout id="components-layout-demo-custom-trigger">
+        <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
+            <div class="logo"><img class="m1" src="../../assets/images/logo.png" /><span class="s1" v-if="!collapsed">安速货运</span></div>
+            <yMenu :csd="collapsed"></yMenu>
+        </a-layout-sider>
+        <a-layout>
+            <a-layout-header style="background: #fff; padding: 0; height: 42px">
+                <div class="h-d1">
+                    <div v-for="(item,index) in menuTags" :key="index" :class="tagActive === index ? 'h-d1-item h-d1-item-active' : 'h-d1-item'" @click="handlerTags(index)"><span class="s1">{{item.label}}</span></div>
+                </div>
+                <div class="h-d2">
+                    <a-icon class="h-d2-c" style="color: #e27473" type="logout" />
+                    <a-icon class="h-d2-c" style="color: #b7b7b7" type="question-circle" />
+                    <a-icon class="h-d2-c" type="alert" />
+                    <a-icon class="h-d2-c" style="color: #979a96;margin-right: 7px;" type="user" />
+                    <span class="h-d2-s">阿丽灬</span>
+                </div>
+            </a-layout-header>
+            <div class="l-h-d1">
+                <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
+                <a-breadcrumb>
+                    <a-breadcrumb-item v-for="(item,index) in tags" :key="index"><a class="abt" @click="handlerBread(item)">{{item.meta.title}}</a></a-breadcrumb-item>
+                </a-breadcrumb>
+            </div>
+            <a-layout-content :style="{ margin: '10px', padding: '13px', background: '#fff'}">
+                <router-view></router-view>
+            </a-layout-content>
+        </a-layout>
+    </a-layout>
+</template>
+<script>
+import yMenu from "./yMenu";
+export default {
+    components: {
+        yMenu,
+    },
+    watch: {
+        $route: {
+            handler(val) {
+                this.tags = val.matched;
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            collapsed: false,
+            tagActive: 0,
+            menuTags: [
+                {
+                    label: "基础功能",
+                    value: "a"
+                },
+                {
+                    label: "缴费管理",
+                    value: "b"
+                },
+                {
+                    label: "智慧商城",
+                    value: "c"
+                },
+                {
+                    label: "运营管理",
+                    value: "d"
+                },
+                {
+                    label: "设置",
+                    value: "e"
+                }
+            ],
+        };
+    },
+    methods: {
+        handlerBread(row) {
+            let path = row.fullPath || "/";
+            this.$router.push(path);
+        },
+        handlerTags(n) {
+            this.tagActive = n;
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+#components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+    color: #1890ff;
+}
+
+#components-layout-demo-custom-trigger .logo {
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .m1 {
+        width: 74px;
+    }
+    .s1 {
+        display: block;
+        font-size: 16px;
+        margin-left: 10px;
+        font-weight: 500;
+    }
+}
+.h-d1 {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    line-height: 1;
+    .h-d1-item {
+        width: 102px;
+        height: 100%;
+        text-align: center;
+        line-height: 42px;
+        cursor: pointer;
+        .s1 {
+            display: inline-block;
+            height: 100%;
+            border-bottom: 2px solid transparent;
+        }
+    }
+    .h-d1-item-active {
+        .s1 {
+             border-bottom: 2px solid #5679b1;
+        }
+       
+    }
+}
+.h-d2 {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .h-d2-c {
+        display: inline-block;
+        margin-left: 24px;
+        font-size: 16px;
+        font-weight: 500;
+        cursor: pointer;
+    }
+    .h-d2-s {
+        display: inline-block;
+        margin-right: 24px;
+    }
+}
+
+.l-h-d1 {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+}
+.abt {
+    cursor: pointer;
+}
+</style>
--- a/src/views/Layout/ost.js
+++ b/src/views/Layout/ost.js
@ -0,0 +1,47 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-22 11:18:57
+ * @LastEditTime: 2021-11-22 15:04:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Layout/ost.js
+ */
+
+export default [
+    {
+        key: '1',
+        title: '信息管理',
+        path: '/info',
+    },
+    {
+        key: '2',
+        title: '用户管理',
+        path: '/user',
+        children: [
+            { 
+                key: '2.1',
+                title: '后台用户',
+                path: '/adminUser',
+                children: [
+                    { 
+                        key: '2.1.1',
+                        title: '新增用户',
+                        path: '/addAdminUser',
+                        children: [
+                            {
+                                key: '2.1.1。1',
+                                title: '用户xx',
+                                path: '/addAdminUserXX',
+                            }
+                        ]
+                    }
+                ]
+            },
+            { 
+                key: '2.2',
+                title: '前台用户',
+                path: '/frontUser',
+            }
+        ]
+    },
+]
--- a/src/views/Layout/yMenu/index.vue
+++ b/src/views/Layout/yMenu/index.vue
@ -0,0 +1,152 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 11:22:06
+ * @LastEditTime: 2021-11-23 11:18:57
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Layout/yMenu/index.vue
+-->
+<template>
+    <a-menu :defaultSelectedKeys="defaultSelectedKeys" :selectedKeys="selectedKeys" mode="inline" :open-keys.sync="openKeys"  :inline-collapsed="collapsed" @click="menuClick" @select="handlerSelect" @openChange="handlerOpen">
+        <template v-for="item in list">
+            <sub-menu v-if="item.children && item.children.length > 0 && !item.hide" :key="item.path" :menu-info="item" />
+            <a-menu-item v-else-if="!item.hide" :key="item.path">
+                <a-icon v-if="item.icon" :type="item.icon" />
+                <span>{{ item.title }}</span>
+            </a-menu-item>
+        </template>
+    </a-menu>
+</template>
+
+<script>
+import ost from "../ost";
+import { Menu } from 'ant-design-vue';
+const SubMenu = {
+  template: `
+      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
+        <span slot="title">
+          <a-icon v-if="menuInfo.icon" :type="menuInfo.icon" /><span>{{ menuInfo.title }}</span>
+        </span>
+        <template v-for="item in menuInfo.children">
+          <a-menu-item v-if="!item.children && !item.hide" :key="item.path">
+            <a-icon v-if="item.icon" :type="item.icon" />
+            <span>{{ item.title }}</span>
+          </a-menu-item>
+          <sub-menu v-if="item.children && item.children.length > 0" :key="item.path" :menu-info="item" />
+        </template>
+      </a-sub-menu>
+    `,
+  name: 'SubMenu',
+  // must add isSubMenu: true 此项必须被定义
+  isSubMenu: true,
+  props: {
+    // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件
+    ...Menu.SubMenu.props,
+    // Cannot overlap with properties within Menu.SubMenu.props
+    menuInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+export default {
+    name: "yMenu",
+    props: {
+        csd: {
+            type: Boolean,
+            default: false,
+            indexPath: 0
+        }
+    },
+    watch: {
+       csd: {
+           handler(val) {
+               this.collapsed = val
+           },
+           immediate: true
+       },
+       $route: {
+            handler(val) {
+                let secPath = [val.path];
+                this.selectedKeys = secPath;
+                this.setSelectedKeys(secPath);
+            },
+            immediate: true,
+        },
+
+    },
+     components: {
+        'sub-menu': SubMenu,
+    },
+    data() {
+        return {
+            list: ost,
+            collapsed: false,
+            openKeys: [],
+            selectedKeys: [],
+            defaultSelectedKeys: []
+        };
+    },
+    created() {
+        this.openKeys = this.getOpenKeys;
+        this.defaultSelectedKeys = this.getSelectedKeys;
+        this.initMenu();
+    },
+    methods: {
+        handlerSelect({selectedKeys}) {
+            this.selectedKeys = selectedKeys;
+            this.setSelectedKeys(selectedKeys);
+            
+        },
+        handlerOpen(val) {
+            this.setOpenKeys(val);
+        },
+        menuClick({key}) {
+            this.$router.push(key)
+        },
+        initMenu() {
+            let routes = this.$router.options.routes || [];
+            let farr = routes.filter(ele => {
+                return ele.name === 'Layout'
+            });
+            let arr = farr[0].children || [];
+            let menus = [];
+            this.routerToMenu(arr, menus);
+            this.list = menus;
+        },
+        // 递归数据
+        routerToMenu(arr = [], menus) {
+            for(let i = 0; i < arr.length; i++) {
+                this.indexPath++
+                if(!arr[i].children && !arr[i].hide) {
+                    let obj = {
+                        key: this.indexPath,
+                        title: arr[i].title,
+                        path: arr[i].path,
+                        hide: arr[i].hide,
+                        icon: arr[i].icon || ''
+                    }
+                    menus.push(obj)
+                } 
+                if(arr[i].children) {
+                    let obj = {
+                        key: this.indexPath,
+                        title: arr[i].title,
+                        path: arr[i].path,
+                        hide: arr[i].hide || false,
+                        icon: arr[i].icon || '',
+                        children: []
+                    }
+                    menus.push(obj);
+                    this.routerToMenu(arr[i].children, obj.children)
+                }
+            }
+            
+        }
+        
+    }
+};
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 16:20:34
+ * @LastEditTime: 2021-11-22 16:20:34
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Login/index.vue
+-->
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Login"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/MySettings/index.vue
+++ b/src/views/MySettings/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 15:56:04
+ * @LastEditTime: 2021-11-22 17:13:55
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Waybill/index.vue
+-->
+<template>
+    <div>
+        2222
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MySettings"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/Waybill/index.vue
+++ b/src/views/Waybill/index.vue
@ -0,0 +1,23 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-22 15:56:04
+ * @LastEditTime: 2021-11-22 17:14:00
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/src/views/Waybill/index.vue
+-->
+<template>
+    <div>
+33333
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Waybill"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,15 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-22 14:33:50
+ * @LastEditTime: 2021-11-22 14:34:52
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /ansu-business/vue.config.js
+ */
+module.exports = {
+    // ...
+    runtimeCompiler: true,
+    
+   
+    // ...
+  };
--- a/yarn.lock
+++ b/yarn.lock