@arkxos/arkos-system 0.1.0

package/src/business/layout/subsystem/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-dropdown
+    class="dropdown-box"
+    popper-class="popper-box"
+    trigger="click"
+  >
+    <div class="box">
+      <div class="avatar">
+        <cc-icon
+          iconId="0192afa99575010a6e4b"
+          style="font-size: 35px;color: var(--avatar-color);"
+        />
+      </div>
+      <div class="box-info">
+        <div class="user-info">用户：{{ user.name }}</div>
+        <div class="subsystem-info">{{ subsystem.name }}</div>
+      </div>
+      <cc-icon class="box-icon" iconId="0192af1101200108904a" style="font-size: 18px" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="(item, index) in subsystemList"
+          :key="index"
+          @click="clickSubsystem(item)"
+          style="min-width: 180px"
+          :class="item.id === subsystem.id ? 'active' : ''"
+        >{{ item.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import api from '@/http/api';
+import { getSubsystem } from '@/utils/system';
+import { useUserStore } from '@/pinia/modules/user';
+
+const userStore = useUserStore();
+const subsystemList = ref([]);
+const subsystem = ref({});
+const user = computed(() => { return userStore.getUser() || {} });
+
+const clickSubsystem = (subsystem) => {
+  sessionStorage.removeItem('historyList');
+  const basePath = import.meta.env.VITE_WEB_PATH;
+  if (subsystem.type === '1') {
+    window.location.href = basePath + '/admin.html';
+  } else if (subsystem.type === '2') {
+    window.location.href = basePath + '/portal.html';
+  } else {
+    window.location.href = basePath + '/business.html?subsystemId=' + subsystem.id;
+  }
+};
+
+const loadSubsystem = () => {
+  api.post('/business/subsystem/list').then(res => {
+    subsystemList.value = res.data || [];
+  });
+};
+
+const init = () => {
+  loadSubsystem();
+  getSubsystem().then(res => subsystem.value = res);
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped lang="scss">
+.popper-box {
+  :deep(.active) {
+    background-color: #e7e7e7;
+    color: #2989da;
+    font-weight: 700;
+  }
+}
+.box {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  align-items: center;
+  padding: 0 12px 0 15px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+
+  .avatar {
+    margin-right: 15px;
+    background-color: #b8cff1;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .box-info {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .user-info {
+      color: white;
+      font-size: 15px;
+      font-weight: 700;
+      margin-top: 5px;
+    }
+    .subsystem-info {
+      margin-top: 5px;
+      font-size: 13px;
+      color: #dadada;
+    }
+  }
+  .box-icon {
+    margin-left: 15px;
+    justify-content: center;
+    color: white;
+  }
+}
+
+</style>

package/src/business/main.js

@@ -0,0 +1,36 @@
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import { store } from '@/pinia';
+import business from '@/business/components/index';
+import codeless from '@/codeless/components/index';
+import visual from '@/visual/components/index';
+import directives from '@/directives/index';
+import App from './App.vue';
+import router from './router';
+import 'element-plus/dist/index.css';
+import '@/assets/style/global/default.css';
+import '@/assets/style/menu/default.css';
+import '@/assets/style/base.css';
+import '@/assets/style/main.css';
+import '@/assets/style/codeless.css';
+import '@/assets/style/visual.css';
+import '@/assets/style/flow.css';
+import '@/assets/style/business.css';
+import 'default-passive-events';
+import '@/utils/browser';
+
+const app = createApp(App);
+app.config.productionTip = false;
+
+app
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: zhCn })
+  .use(business)
+  .use(codeless)
+  .use(visual)
+  .use(directives)
+  .mount('#app');
+
+export default app;

package/src/business/pinia/menuBadge.js

@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import api from '@/http/api';
+import emitter from '@/utils/bus';
+
+export const useMenuBadgeStore = defineStore('menuBadge', () => {
+  const badgeScriptId = ref(null);
+  const loading = ref(false);
+  const loaded = ref(false);
+  const menuBadges = ref({});
+
+  const initMenuBadge = async(scriptId) => {
+    if (scriptId) {
+      badgeScriptId.value = scriptId;
+      await getMenuBadges();
+    }
+  };
+
+  const getMenuBadges = async() => {
+    if (!badgeScriptId.value) return {};
+
+    if (loaded.value) {
+      return menuBadges.value || {};
+    }
+
+    if (loading.value) {
+      await sleep(100);
+      return await getMenuBadges();
+    }
+
+    loading.value = true;
+    try {
+      const res = await api.runScript(badgeScriptId.value);
+      menuBadges.value = res.data || {};
+      loading.value = false;
+      loaded.value = true;
+
+      emitter.off('menu.data.change', clearMenuBadges);
+      emitter.on('menu.data.change', clearMenuBadges);
+      return menuBadges.value;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const clearMenuBadges = (menuId) => {
+    if (menuBadges.value[menuId]) {
+      menuBadges.value = {};
+      loaded.value = false;
+    }
+  };
+
+  const sleep = async (d) => {
+    return new Promise((resolve) => setTimeout(resolve, d))
+  };
+
+  return { getMenuBadges, initMenuBadge };
+});

package/src/business/pinia/router.js

@@ -0,0 +1,190 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+import { ElMessage } from 'element-plus';
+
+const components = import.meta.glob(['@/business/!(components)/**/*.vue', '@/business/!(components)/*.vue', '@/flow/*.vue']);
+const baseRoutes = [{
+  name: 'layout',
+  path: '/layout/index',
+  text: 'layout',
+  component: () => import('@/business/layout/index.vue'),
+  children: []
+}, {
+  name: 'notfound',
+  path: '/:pathMatch(.*)',
+  text: '访问地址不存在',
+  meta: {
+    title: '访问地址不存在',
+  },
+  component: () => import('@/error/404.vue')
+}];
+
+const getComponent = async(compName, path) => {
+  const keys = Object.keys(components);
+  const matchKeys = keys.filter((key) => {
+    return key.replace('/src/business', '').replace('/src', '').replace('.vue', '') === path;
+  });
+
+  const component = components[matchKeys[0]];
+  return !component
+    ? null
+    : await component().then(comp => ({
+      ...comp.default,
+      name: compName
+    }));
+};
+
+const formatRoute = async(routes, routeMap, routerList) => {
+  for (const item of routes) {
+    item.name = item.name || item.id;
+    item.meta = item.meta || {};
+
+    if (item.data && item.data.type === '页面' && item.data.pageId) {
+      item.path = '/home/' + item.name + '/' + item.data.pageId;
+      item.component = await getComponent(item.name, '/home/index');
+    } else if (item.data && item.data.type === '外链') {
+      item.path = '/link/' + item.name;
+      item.component = item.data.linkOpenMode === '1' ? await getComponent(item.name, '/iframe/index') : null;
+    } else if (item.data && item.data.type === '流程' && item.data.flowId) {
+      item.path = '/flow/' + item.name + '/' + item.data.flowId;
+      item.component = await getComponent(item.name, '/flow/start');
+    } else if (!item.component && item.path) {
+      item.component = await getComponent(item.name, item.path);
+    }
+
+    item.path = item.path || '';
+    item.meta.keepAlive = (typeof item.keepAlive !== 'undefined')
+      ? item.keepAlive
+      : ((typeof item.meta.keepAlive === 'undefined') ? true : item.meta.keepAlive);
+    item.meta.title = item.text;
+    item.meta.icon = item.data && item.data.icon;
+    item.meta.buttons = ((item.data && item.data.privileges) || []);
+    item.meta.defaultShow = item.data?.defaultShow;
+    item.meta.hidden = item.hidden;
+    item.meta.url = item.data && item.data.url;
+
+    if (item.id) {
+      routeMap[item.id] = item;
+    }
+
+    if (item.children && item.children.length > 0) {
+      await formatRoute(item.children, routeMap, routerList);
+
+      item.children = item.children.filter(ch => !ch.data || ch.data.type !== '2');
+      if ((item.children.length === 0 ||
+            item.children.every(ch => typeof ch.data === 'undefined' || ch.data == null || ch.data.type === '权限')) &&
+          ((item.hidden !== true && item.href && item.data && item.data.url && item.data.type !== '权限') ||
+              (item.data && item.data.type === '页面'))) {
+        routerList.push({ label: item.text, value: item.id });
+      }
+    } else {
+      if ((item.hidden !== true && item.href && item.data && item.data.url && item.data.type !== '权限') ||
+          (item.data && item.data.type === '页面')) {
+        routerList.push({ label: item.text, value: item.id });
+      }
+
+      delete item.children;
+    }
+  }
+};
+
+export const useRouterStore = defineStore('router', () => {
+  const routes = ref([]);
+  const routeMap = ref({});
+  const routerList = ref([]);
+  const isInit = ref(false);
+
+  const initRouter = async(router, subsystemId) => {
+    if (isInit.value) {
+      return false;
+    }
+
+    router.getRoutes().forEach(item => {
+      item.name && router.removeRoute(item.name);
+    });
+
+    const res = await api.post('/business/menu/tree/' + subsystemId);
+    if (res.code === '500') {
+      ElMessage.error(res.message);
+      setTimeout(() => {
+        window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html';
+      }, 1000);
+      return;
+    }
+
+    const menuTree = res.data && res.data.children || [];
+    if (menuTree.length === 0) {
+      ElMessage.error('此子系统未配置菜单！');
+      setTimeout(() => {
+        window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html?stop=1';
+      }, 1000);
+      return;
+    }
+
+    const routeList = tool.deepClone(baseRoutes) || [];
+    routeList[0].children.push(...menuTree);
+    await formatRoute(routeList, routeMap.value, routerList.value);
+    routeList.forEach(route => router.addRoute(route));
+    routes.value = routeList;
+    isInit.value = true;
+    return true;
+  };
+
+  const getDefaultRoute = (routeList) => {
+    if (!routeList || routeList.length === 0) {
+      return null;
+    }
+
+    for (const route of routeList) {
+      if (route.meta && route.meta.defaultShow === '1') {
+        return route;
+      }
+
+      const temp = getDefaultRoute(route.children);
+      if (temp) {
+        return temp;
+      }
+    }
+
+    return null;
+  };
+
+  const getFirstRoute = (routeList) => {
+    if (!routeList || routeList.length === 0) {
+      return null;
+    }
+
+    for (const route of routeList) {
+      if ((route.href || route.path) && route.name !== 'layout') {
+        return route;
+      }
+
+      const temp = getFirstRoute(route.children);
+      if (temp) {
+        return temp;
+      }
+    }
+
+    return null;
+  };
+
+  const getShowRoute = () => {
+    const route = getDefaultRoute(routes.value);
+    return route || getFirstRoute(routes.value);
+  };
+
+  const getRouteData = (id) => {
+    return routeMap.value[id];
+  };
+
+  return {
+    routes,
+    routeMap,
+    routerList,
+    initRouter,
+    getShowRoute,
+    getRouteData,
+  };
+});

package/src/business/router.js

@@ -0,0 +1,98 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { useUserStore } from '@/pinia/modules/user';
+import { useRouterStore } from '@/business/pinia/router';
+import { useNProgress } from '@/utils/progress';
+
+const { start, done } = useNProgress();
+const routes = [{
+  name: 'notfound',
+  path: '/:pathMatch(.*)',
+  text: '访问地址不存在',
+  meta: {
+    title: '访问地址不存在',
+  },
+  component: () => import('@/error/404.vue')
+}];
+
+const urlParams = new URLSearchParams(window.location.search);
+const subsystemId = urlParams.get('subsystemId');
+
+if (!subsystemId) {
+  window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html';
+}
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.VITE_WEB_PATH || '/'),
+  routes
+});
+
+let isInitRouter = false;
+
+const initRouter = async(userStore) => {
+  await userStore.initUserInfo();
+  const routerStore = useRouterStore();
+  await routerStore.initRouter(router, subsystemId);
+};
+
+const handleKeepAlive = async(to) => {
+  if (to.matched.some(item => item.meta.keepAlive)) {
+    if (to.matched && to.matched.length > 2) {
+      for (let i = 1; i < to.matched.length; i++) {
+        const element = to.matched[i - 1];
+        if (element.name === 'layout') {
+          to.matched.splice(i, 1);
+          await handleKeepAlive(to);
+        }
+        if (typeof element.components.default === 'function') {
+          await element.components.default();
+          await handleKeepAlive(to);
+        }
+      }
+    }
+  }
+};
+
+router.beforeEach(async(to) => {
+  start();
+  const userStore = useUserStore();
+  const routerStore = useRouterStore();
+  to.meta.matched = [...to.matched];
+  await handleKeepAlive(to);
+
+  if (userStore.getToken()) {
+    if (!isInitRouter) {
+      isInitRouter = true;
+      await initRouter(userStore);
+      if (userStore.getToken()) {
+        if (to.path === '/') {
+          const route = routerStore.getShowRoute();
+          return { name: route ? route.name : 'notfound' };
+        } else {
+          await router.push({ path: to.path });
+        }
+      } else {
+        window.location.href = import.meta.env.VITE_WEB_PATH || '/';
+        return true;
+      }
+    } else {
+      if (to.matched.length) {
+        return true;
+      } else {
+        return { name: 'notfound' };
+      }
+    }
+  } else {
+    window.location.href = import.meta.env.VITE_WEB_PATH || '/';
+    return true;
+  }
+});
+
+router.afterEach(() => {
+  done();
+});
+
+router.onError(() => {
+  done();
+});
+
+export default router;

package/src/choose/App.vue

@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="choose-subsystem"
+    :style="{backgroundImage: 'url(' + bgImgUrl + ')'}"
+  >
+    <div class="logout">
+      <div class="logout-text" @click="userStore.logout()">退出</div>
+    </div>
+    <div class="logo">
+      <img class="logo-img" :src="logoImgUrl" alt="" />
+    </div>
+    <div class="subsystem-list">
+      <div
+        class="subsystem-item"
+        v-for="subsystem in subsystemList"
+        :key="subsystem.id"
+      >
+        <el-badge
+          :value="subsystem.badgeNumber || 0"
+          :show-zero="false"
+        >
+          <img
+            v-if="subsystem.iconId"
+            class="subsystem-item-img"
+            :src="imageUrl + subsystem.iconId"
+            @click="gotoSubsystem(subsystem)"
+            @error="subsystem.iconId = ''"
+            :alt="subsystem.name"
+          />
+          <div
+            v-else
+            class="subsystem-item-box"
+            @click="gotoSubsystem(subsystem)"
+          >
+            <div class="subsystem-item-name">{{subsystem.name}}</div>
+          </div>
+        </el-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import api from '@/http/api';
+import { onMounted, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getSetting } from '@/utils/system';
+import defaultBgImg from '@/assets/images/background.jpg';
+import { useUserStore } from '@/pinia/modules/user';
+import loading from '@/utils/loading';
+
+const userStore = useUserStore();
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+const subsystemList = ref([]);
+const bgImgUrl = ref('');
+const logoImgUrl = ref('');
+
+const loadSetting = async() => {
+  await getSetting().then(setting => {
+    if (setting) {
+      bgImgUrl.value = !setting.homeBgImageId ? defaultBgImg : imageUrl.value + setting.homeBgImageId;
+      logoImgUrl.value = !setting.homeLogoImageId ? logoImgUrl.value : imageUrl.value + setting.homeLogoImageId;
+      document.title = (setting.webTitle || '系统选择').split('<br/>')[0];
+
+      if (setting.chooseCss) {
+        const style = document.createElement('style');
+        style.textContent = setting.chooseCss;
+        document.head.appendChild(style);
+      }
+    }
+  });
+};
+
+const loadSubsystem = async() => {
+  await api.post('/business/subsystem/list').then(res => {
+    if (res.code === '1') {
+      subsystemList.value = res.data || [];
+    }
+
+    const stop = new URLSearchParams(window.location.search).get('stop');
+    if (subsystemList.value.length === 1 && !stop) {
+      gotoSubsystem(subsystemList.value[0]);
+    } else if (subsystemList.value.length === 0) {
+      ElMessage.error('未配置权限，请与管理员联系！');
+    } else if (!stop) {
+      const find = subsystemList.value.find(item => item.defaultShow === '1');
+      if (find) {
+        gotoSubsystem(find);
+      }
+    } else {
+      subsystemList.value.forEach(subsystem => {
+        if (subsystem.badgeScriptId) {
+          api.runScript(subsystem.badgeScriptId, subsystem).then(res => {
+            subsystem.badgeNumber = res.data && res.data['totalNumber'] || 0;
+          })
+        }
+      });
+    }
+  });
+};
+
+const gotoSubsystem = async(subsystem) => {
+  sessionStorage.removeItem('historyList');
+  const basePath = import.meta.env.VITE_WEB_PATH;
+  if (subsystem.type === '1') {
+    window.location.href = basePath + '/admin.html';
+  } else if (subsystem.type === '2') {
+    window.location.href = basePath + '/portal.html';
+  } else {
+    window.location.href = basePath + '/business.html?subsystemId=' + subsystem.id;
+  }
+};
+
+onMounted(async() => {
+  loading.showLoading('数据加载中...');
+  const user = await userStore.initUserInfo();
+  if (!user) {
+    window.location.href = import.meta.env.VITE_WEB_PATH || '/';
+    return;
+  }
+
+  await loadSetting();
+  await loadSubsystem();
+  loading.hideLoading();
+});
+</script>
+
+<style lang="scss">
+.choose-subsystem {
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+}
+.subsystem-item .el-badge__content {
+  margin-top: 25px!important;
+  margin-right: 25px!important;
+  font-size: 16px;
+}
+.choose-subsystem .logout {
+  height: 50px;
+  line-height: 50px;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.choose-subsystem .logout .logout-text {
+  padding: 0 20px;
+  text-align: right;
+  font-size: 18px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.choose-subsystem .subsystem-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15vh;
+  flex-wrap: wrap;
+
+  .subsystem-item-img {
+    width: 150px;
+    height: 150px;
+    margin: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+  }
+  .subsystem-item-img:hover {
+    transform: scale(1.2);
+  }
+
+  .subsystem-item-box {
+    margin: 20px;
+    width: 150px;
+    height: 100px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 900;
+    background-color: #00ccff;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    .subsystem-item-name {
+      font-size: 20px;
+      color: #ffffff;
+    }
+  }
+  .subsystem-item-box:hover {
+    transform: scale(1.2);
+  }
+}
+.choose-subsystem .logo {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+</style>