init

src/components/App/index.js

+import AppHeader from "./AppHeader";
+import SubHeader from "./SubHeader";
+import BreadCrumb from "./BreadCrumb";
+import Empty from "./Empty";
+import SideBar from "./SideBar";
+import Table from "./Table";
+import ImgUploader from "./ImgUploader";
+export { AppHeader, SubHeader, BreadCrumb, Empty, SideBar, Table, ImgUploader };

src/components/Layout/InnerView/index.vue

+<template>
+  <div class="inner-view">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "InnerView"
+};
+</script>
+<style lang="scss" scoped>
+.inner-view {
+  width: 100%;
+  height: 100%;
+  // overflow: hidden;
+  position: relative;
+}
+</style>

src/components/Layout/PaddingView/index.vue

+<template>
+  <div class="padding-view">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "InnerView"
+};
+</script>
+<style lang="scss" scoped>
+.padding-view {
+  width: 100%;
+  height: 100%;
+  // overflow: hidden;
+  position: relative;
+  padding: 32px 44px;
+}
+</style>

src/components/Layout/RouteView/index.vue

+<template>
+  <div class="route-view">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped>
+.route-view {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  // padding: 12px;
+  padding-top: 0;
+  overflow: hidden;
+  position: relative;
+  // background: #f2f2f2;
+}
+</style>

src/components/Layout/ScrollView/index.vue

+<template>
+  <div class="ScrollView">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped>
+.ScrollView {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  // padding: 12px;
+  padding-top: 0;
+  // overflow: hidden;
+  position: relative;
+  // background: #f2f2f2;
+}
+</style>

src/components/Layout/index.js

+import RouteView from "./RouteView";
+import InnerView from "./InnerView";
+import PaddingView from "./PaddingView";
+
+export { RouteView, InnerView ,PaddingView};

src/config/index.js

+export const appName = "";

src/directives/el-table/adaptive.js

+import {
+  addResizeListener,
+  removeResizeListener
+} from "element-ui/src/utils/resize-event";
+
+/**
+ * How to use
+ * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
+ * el-table height is must be set
+ * bottomOffset: 30(default)   // The height of the table from the bottom of the page.
+ */
+
+const doResize = (el, binding, vnode) => {
+  const { componentInstance: $table } = vnode;
+
+  const { value } = binding;
+
+  if (!$table.height) {
+    throw new Error(`el-$table must set the height. Such as height='100px'`);
+  }
+  const bottomOffset = (value && value.bottomOffset) || 30;
+
+  if (!$table) return;
+
+  const height =
+    window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
+  $table.layout.setHeight(height);
+  $table.doLayout();
+};
+
+export default {
+  bind(el, binding, vnode) {
+    el.resizeListener = () => {
+      doResize(el, binding, vnode);
+    };
+    // parameter 1 is must be "Element" type
+    addResizeListener(el, el.resizeListener);
+  },
+  inserted(el, binding, vnode) {
+    doResize(el, binding, vnode);
+  },
+  unbind(el) {
+    removeResizeListener(el, el.resizeListener);
+  }
+};

src/directives/el-table/index.js

+import adaptive from "./adaptive";
+
+const install = function(Vue) {
+  Vue.directive("el-height-adaptive-table", adaptive);
+};
+
+if (window.Vue) {
+  window["el-height-adaptive-table"] = adaptive;
+  Vue.use(install); // eslint-disable-line
+}
+
+adaptive.install = install;
+export default adaptive;

src/directives/index.js

+import Vue from "vue";
+
+Vue.use(Vue => {
+  (requireContext => {
+    const arr = requireContext.keys().map(requireContext);
+    (arr || []).forEach(directive => {
+      directive =
+        directive.__esModule && directive.default
+          ? directive.default
+          : directive;
+      Object.keys(directive).forEach(key => {
+        Vue.directive(key, directive[key]);
+      });
+    });
+  })(require.context("./", true, /^\.\/.*\/index\.js$/));
+});

src/filters/index.js

+import Vue from "vue";
+
+Vue.use(Vue => {
+  (requireContext => {
+    const arr = requireContext.keys().map(requireContext);
+    (arr || []).forEach(filter => {
+      filter = filter.__esModule && filter.default ? filter.default : filter;
+      Object.keys(filter).forEach(key => {
+        Vue.filter(key, filter[key]);
+      });
+    });
+  })(require.context("./", true, /^\.\/.*\/index\.js$/));
+});

src/main.js

+import Vue from "vue";
+import Element from "element-ui";
+
+import "./filters";
+import "./directives";
+import App from "./App.vue";
+import store from "./store";
+import router from "./router";
+import "./assets/css/app.scss";
+import "./mock/index.js";
+import plugins from "./plugins";
+import * as utils from "./utils"; //
+import echarts from "./utils/echarts"; // npm install echarts --save
+
+// require("./mock");
+
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import updateLocale from "dayjs/plugin/updateLocale";
+
+dayjs.locale("zh-cn");
+dayjs.extend(updateLocale);
+dayjs.updateLocale("zh-cn", {
+  weekdays: [
+    "星期天",
+    "星期一",
+    "星期二",
+    "星期三",
+    "星期四",
+    "星期五",
+    "星期六",
+  ],
+});
+
+Vue.prototype.$utils = utils;
+Vue.prototype.$echarts = echarts;
+Vue.use(plugins);
+Vue.use(Element);
+Vue.config.productionTip = false;
+
+new Vue({
+  store,
+  router,
+  render: (h) => h(App),
+}).$mount("#app");

src/mock/index.js

+const Mock = require("mockjs");
+let services = require.context("./services/", true, /\.js$/); //引入services内所有js
+services.keys().forEach((key) => {
+  services(key); //生成modal
+});
+
+Mock.setup({
+  timeout: 200, // setter delay time
+});

src/mock/services/test.js

+import Mock from "mockjs";
+Mock.mock("/mock/tagCloudData", "get", {
+  status: "0",
+  msg: "访问成功",
+  data: {},
+  errCode: null,
+  errMsg: null,
+});

src/mock/util.js

+const responseBody = {
+  body: "",
+  cause: null,
+  state: true,
+  timestamp: 0,
+  message: "SUCCESS",
+};
+//模拟接口返回
+export const builder = (data, message, code = 0, headers = {}) => {
+  responseBody.body = data;
+  if (message !== undefined && message !== null) {
+    responseBody.message = message;
+  }
+  if (code !== undefined && code !== 0) {
+    responseBody.code = code;
+    responseBody._status = code;
+  }
+  if (
+    headers !== null &&
+    typeof headers === "object" &&
+    Object.keys(headers).length > 0
+  ) {
+    responseBody._headers = headers;
+  }
+  responseBody.timestamp = new Date().getTime();
+  return responseBody;
+};

src/plugins/index.js

+// import dayjs from 'dayjs';
+
+import Table from "@/components/App/Table";
+import PaddingView from "@/components/Layout/PaddingView";
+import InnerView from "@/components/Layout/InnerView";
+// import TableView from "@/components/Layout/TableView";
+import ScrollView from "@/components/Layout/ScrollView";
+// import PubCard from "@/components/App/PubCard";
+// import AlarmNum from "@/components/App/AlarmNum";
+import BackTitle from "@/components/App/BackTitle";
+
+// import CardView from '@/components/Layout/CardView';
+// import RouteView from '@/components/Layout/RouteView';
+
+/* eslint-disable no-new */
+// export const buildQuery = (data) => qs.stringify(data);
+
+export default {
+  install(app) {
+    // app.config.globalProperties.$filters = {
+    //   formatDate(value = Date.now(), reg = 'YYYY-MM-DD HH:mm:ss') {
+    //     return dayjs(value).format(reg);
+    //   },
+    // };
+    /**
+     * 注册全局通用组件
+     */
+    app.component("PaddingView", PaddingView);
+    app.component("InnerView", InnerView);
+    // app.component("TableView", TableView);
+    app.component("ScrollView", ScrollView);
+
+    app.component("pub-table", Table);
+    app.component("BackTitle", BackTitle);
+    // app.component("PubCard", PubCard);
+    // app.component("AlarmNum", AlarmNum);
+
+    // app.component('CardView', CardView);
+    // app.component('RouteView', RouteView);
+  },
+};

src/router/index.js

+import Vue from "vue";
+import VueRouter from "vue-router";
+import store from "@/store";
+
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(() => {});
+};
+
+Vue.use(VueRouter);
+
+const recursion = function(paths, root, requireContext) {
+  const dirs = paths.map((item) => item.split("/")[0]);
+  const sets = Array.from(new Set(dirs));
+  const router = sets.map((it) => {
+    const reg = new RegExp("^" + it + "/");
+    const _paths = paths
+      .filter((item) => item !== it)
+      .filter((item) => reg.test(item))
+      .map((item) => item.substring(it.length + 1));
+    const component = requireContext(root + it + "/index.vue").default;
+    const children = recursion(_paths, root + it + "/", requireContext);
+    const routerItem = {
+      path: it,
+      children,
+      component,
+      name: component.name || it,
+      meta: component.meta || {},
+      redirect: component.meta?.redirect,
+    };
+    if (!routerItem.children.length) delete routerItem.children;
+    if (!routerItem.redirect === undefined) delete routerItem.redirect;
+    return routerItem;
+  });
+  return router;
+};
+
+const genRouter = function(requireContext) {
+  // 不读取components文件夹下的文件
+  const paths = requireContext
+    .keys()
+    .map((item) => item.slice(2, -10))
+    .filter((item) => !/components/.test(item));
+  const router = recursion(paths, "./", requireContext).map((item) => ({
+    ...item,
+    path: "/" + item.path,
+  }));
+  return router;
+};
+
+const mapSort = function(menus) {
+  console.log(menus);
+  //递归，对路由进行排序，添加name和icon
+  const _menus = menus
+    .sort((a, b) => {
+      return a.meta.sort - b.meta.sort;
+    })
+    .filter((item) => !item.meta.hideMenu);
+
+  _menus.forEach((element) => {
+    if (element.children && element.children.length) {
+      element.children = element.children.filter((item) => !item.meta.hideMenu);
+      if (element.children.length) {
+        element.children = mapSort(element.children);
+      } else {
+        delete element.children;
+      }
+    }
+  });
+  return _menus;
+};
+const routes = [
+  {
+    path: "",
+    redirect: "/index",
+  },
+  {
+    path: "/login",
+    component: () =>
+      import(/* webpackChunkName: "accout" */ "@/views/login.vue"),
+    // redirect: "/index"
+  },
+];
+
+const requireContext = require.context(
+  "@/views/",
+  true,
+  /^\.\/.*\/index\.vue$/
+);
+
+const asyncRoutes = genRouter(requireContext); //
+const asyncRoutesSort = mapSort(asyncRoutes); //筛选排序后的路由
+
+const router = new VueRouter({
+  routes: routes,
+  base: process.env.BASE_URL,
+});
+
+router.beforeEach((to, from, next) => {
+  // console.log(to, from);
+  if (to.meta.keepAlive) {
+    store.dispatch("app/addCacheRoutes", to.name);
+  }
+  next();
+});
+
+router.addRoutes(asyncRoutes);
+console.log(router);
+export default router;
+export { asyncRoutes, asyncRoutesSort };
+
+// this.$store.dispatch("app/removeCacheRoutes", findItem.parent.name);

src/store/app/index.js

+export default {
+  namespaced: true,
+  state: {
+
+    cacheRoutes: [], // 当前缓存的路由
+  },
+  actions: {
+
+    //添加缓存路由
+    addCacheRoutes({
+      state,
+      commit
+    }, paylod) {
+      if (!state.cacheRoutes.includes(paylod)) {
+        state.cacheRoutes.push(paylod);
+        commit("SET_CACHE_ROUTES", state.cacheRoutes);
+      }
+    },
+    //删除需要缓存的路由
+    removeCacheRoutes({
+      state,
+      commit
+    }, paylod) {
+      const data = state.cacheRoutes.filter(item => item !== paylod);
+      commit("SET_CACHE_ROUTES", data);
+    },
+  },
+  mutations: {
+
+    //设置缓存路由
+    SET_CACHE_ROUTES(state, data = []) {
+      state.cacheRoutes = data;
+    },
+  }
+};
\ No newline at end of file

src/store/index.js

+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+const modules = {};
+const requireContext = require.context("./", true, /^\.\/.*\/index\.js$/);
+requireContext.keys().forEach(key => {
+  const _module = requireContext(key);
+  modules[key.slice(2, -9)] =
+    _module.__esModule && _module.default ? _module.default : _module;
+});
+
+export default new Vuex.Store({
+  state: {},
+  actions: {},
+  mutations: {},
+  modules: modules
+});

src/store/tabledata/index.js

+import testCardPhoto from "@/assets/img/test-card-photo.png";
+export default {
+  namespaced: true,
+  state: {
+    //我的证照列表数据
+    photo: [
+      {
+        id: 1,
+        name: "电子社保卡",
+        pic: testCardPhoto,
+        picList: [testCardPhoto],
+        time: "2023-01-13",
+      },
+    ],
+  },
+  actions: {
+    //修改列表数据
+    changeTableData({ commit }, paylod) {
+      const { field, data } = paylod;
+      console.log(field, data);
+      commit("SET_TABLE_DATA", { field, data });
+    },
+  },
+  mutations: {
+    //设置缓存路由
+    SET_TABLE_DATA(state, { field, data = [] }) {
+      state[field] = data;
+    },
+  },
+};