@arkxos/arkos-system 0.1.0

package/src/business/layout/index.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="cc-layout-container">
+    <div class="cc-main-header">
+      <div
+        v-if="calcMenuPos === 'left'"
+        class="cc-main-header-left"
+      >
+        <cc-icon
+          v-if="isCollapse"
+          iconId="018dca908e7b276cf646"
+          @click="triggerCollapse"
+          title="展开菜单"
+        />
+        <cc-icon
+          v-else
+          iconId="018dca908e7ba0558bac"
+          @click="triggerCollapse"
+          title="隐藏菜单"
+        />
+      </div>
+      <div class="cc-main-header-menu-nav">
+        <div
+          v-for="(item, index) in matched.slice(1, matched.length)"
+          :key="item.path"
+          class="cc-main-header-menu-nav-item"
+        >
+          <span v-if="index > 0">/</span>
+          {{ getPageTitle(item.meta.title, route) }}
+        </div>
+      </div>
+      <div class="cc-main-header-title">
+        <div class="text" v-if="pageTopContent">{{pageTopContent}}</div>
+        <img class="image" v-if="pageTopImageId" :src="pageTopImageId" alt="" />
+      </div>
+      <div class="cc-main-header-right">
+        <bc-subsystem />
+        <bc-search />
+        <bc-message />
+        <bc-full-screen />
+        <bc-home />
+        <bc-personnel />
+      </div>
+    </div>
+    <div class="cc-layout-main">
+      <div
+        v-if="!isCollapse && calcMenuPos === 'left'"
+        ref="layoutAside"
+        class="cc-layout-aside"
+        :style="{width: calcMenuWidth()}"
+        v-drag
+      >
+        <bc-aside class="aside" />
+      </div>
+      <div class="cc-layout-right">
+        <bc-header v-if="calcMenuPos === 'top'" />
+        <bc-history v-if="calcMenuTab" />
+        <router-view v-slot="{ Component }">
+          <div class="cc-layout-main-router">
+            <keep-alive :include="includes" :max="20">
+              <component v-if="showRouterView" :is="Component" :key="$route.name"></component>
+            </keep-alive>
+          </div>
+        </router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import BcAside from '@/business/layout/aside/index.vue';
+import BcHistory from '@/business/layout/aside/history/history.vue';
+import BcPersonnel from '@/business/layout/personnel/index.vue';
+import BcFullScreen from '@/business/layout/fullscreen/index.vue';
+import BcHome from '@/business/layout/home/index.vue';
+import BcSearch from '@/business/layout/search/index.vue';
+import BcMessage from '@/business/layout/message/index.vue';
+import BcSubsystem from '@/business/layout/subsystem/index.vue';
+import BcHeader from '@/business/layout/header/index.vue';
+import emitter from '@/utils/bus';
+import { computed, ref, onMounted, nextTick, onUnmounted, provide } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getPageTitle } from '@/utils/page';
+import { useUserStore } from '@/pinia/modules/user';
+import { useSubsystemStore } from '@/pinia/modules/subsystem';
+import { useKeepAlive } from '@/pinia/modules/keepAlive';
+import api from '@/http/api';
+import { getSubsystem } from '@/utils/system';
+
+const pageTopContent = ref('');
+const pageTopImageId = ref('');
+const showMenuTab = ref('0');
+
+const router = useRouter();
+const route = useRoute();
+const keepAlive = useKeepAlive();
+const showRouterView = ref(true);
+const collapseWidth = ref('');
+const isCollapse = ref(false);
+
+const userStore = useUserStore();
+const user = computed(() => { return userStore.getUser() || {} });
+const subsystemStore = useSubsystemStore();
+const subsystem = computed(() => { return subsystemStore.getInfo() || {} });
+const matched = computed(() => route.meta.matched);
+const intervalRefresh = ref(-1);
+const layoutAside = ref();
+
+provide('refreshPage', (compName) => {
+  keepAlive.delItem(compName);
+  showRouterView.value = false;
+  nextTick(() => {
+    keepAlive.addItem(compName);
+    showRouterView.value = true;
+  });
+});
+
+onMounted(() => {
+  emitter.on('reload', reload);
+  if (userStore.loadingInstance) {
+    userStore.loadingInstance.close();
+  }
+});
+
+const reloadFlag = ref(true);
+let reloadTimer = null;
+const reload = async() => {
+  if (reloadTimer) {
+    window.clearTimeout(reloadTimer);
+  }
+  reloadTimer = window.setTimeout(async() => {
+    if (route.meta.keepAlive) {
+      reloadFlag.value = false;
+      await nextTick();
+      reloadFlag.value = true;
+    } else {
+      const title = route.meta.title;
+      await router.push({ name: 'reload', params: { title } });
+    }
+  }, 400);
+};
+
+const triggerCollapse = () => {
+  if (!isCollapse.value) {
+    if (layoutAside.value && layoutAside.value.style) {
+      collapseWidth.value = layoutAside.value.style.width;
+      layoutAside.value.style.width = '0px';
+    }
+    isCollapse.value = !isCollapse.value;
+  } else {
+    isCollapse.value = !isCollapse.value;
+    nextTick(() => {
+      if (layoutAside.value && layoutAside.value.style) {
+        layoutAside.value.style.width = collapseWidth.value;
+      }
+    });
+  }
+};
+
+const includes = computed(() => {
+  return keepAlive.includes;
+});
+
+const refresh = () => {
+  api.post('/refresh').then(() => {});
+};
+
+const calcMenuPos = computed(() => {
+  let data = null;
+  if (user.value && user.value.theme && user.value.theme.startsWith('[')) {
+    const themeList = JSON.parse(user.value.theme);
+    data = themeList.find(item => item.subsystemId === subsystem.value.id);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  return data?.menuPos || 'left';
+});
+
+const calcMenuTab = computed(() => {
+  let data = null;
+  if (user.value && user.value.theme && user.value.theme.startsWith('[')) {
+    const themeList = JSON.parse(user.value.theme);
+    data = themeList.find(item => item.subsystemId === subsystem.value.id);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  return data ? data.showMenuTab === '1' : showMenuTab.value === '1';
+});
+
+const calcMenuWidth = () => {
+  return (subsystem.value.menuWidth || 250) + 'px'
+};
+
+onMounted(() => {
+  intervalRefresh.value = setInterval(refresh, 60000);
+  getSubsystem().then(subsystem => {
+    showMenuTab.value = subsystem.showMenuTab || '0';
+    if (subsystem.pageTopType === '文字') {
+      pageTopContent.value = subsystem.pageTopContent || '';
+      pageTopImageId.value = '';
+    } else if (subsystem.pageTopType === '图片') {
+      pageTopContent.value = '';
+      pageTopImageId.value = subsystem.pageTopImageId ? import.meta.env.VITE_IMAGE_PATH + subsystem.pageTopImageId : '';
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (intervalRefresh.value !== null) {
+    clearInterval(intervalRefresh.value);
+    intervalRefresh.value = null;
+  }
+});
+</script>
+
+<style lang="scss">
+.cc-layout-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.cc-main-header {
+  padding: 0 16px;
+  height: 50px;
+  background: var(--page-header);
+  color: white;
+  display: flex;
+  flex-direction: row;
+  .cc-main-header-left {
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+  }
+  .cc-main-header-menu-nav {
+    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .cc-main-header-menu-nav-item {
+      font-size: 16px;
+      color: rgba($color: white, $alpha: 0.8);
+      > span {
+        padding: 0 5px 0 10px;
+      }
+    }
+    .cc-main-header-menu-nav-item:last-child {
+      color: white;
+    }
+  }
+  .cc-main-header-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    .text {
+      font-size: 25px!important;
+    }
+    .image {
+      max-height: 50px;
+    }
+  }
+  .cc-main-header-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+    font-size: 18px;
+    > div {
+      margin-left: 15px;
+    }
+    img {
+      vertical-align: middle;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+    }
+  }
+}
+.cc-layout-main {
+  height: 1px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  .cc-layout-aside {
+    -webkit-transition: width .2s;
+    transition: width .2s;
+    z-index: 1001;
+    overflow: hidden;
+    .aside {
+      background-color: var(--menu-background);
+    }
+    .el-menu {
+      background-color: var(--menu-background);
+      border-right: none;
+    }
+    .el-menu-vertical>li ul {
+      background-color: var(--menu-item-background);
+    }
+    .el-sub-menu__title, .el-menu-item, .sub-menu-item {
+      height: 50px!important;
+      line-height: 50px!important;
+    }
+  }
+  .cc-layout-right {
+    width: 1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    .cc-layout-main-router {
+      height: 1px;
+      flex-grow: 1;
+      padding: 10px;
+      background-color: #f0f2f5;
+      .cc-page:has(>.el-tabs) {
+        padding-top: 0;
+      }
+    }
+    .business-page-container:has(>.vc-page) {
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+    .cc-layout-main-router:has(.business-page-container>.vc-page) {
+      padding-right: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,250 @@
+<template>
+  <div @click="showMessage">
+    <el-badge
+      :hidden="messageCount <= 0"
+      :value="messageCount"
+      :max="99"
+      class="message"
+    >
+      <cc-icon iconId="018ece4f72bdf88934c2" title="消息" />
+    </el-badge>
+  </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    :width="dialogWidth"
+    style="height: 80vh"
+    append-to-body
+    destroy-on-close
+    draggable
+    :close-on-click-modal="false"
+    :fullscreen="dialogFullscreen"
+    class="cc-page-comp-dialog padding-10"
+  >
+    <template #header>
+      <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
+        <div class="title">{{dialogTitle}}</div>
+        <div class="button">
+          <cc-icon
+            v-if="!dialogFullscreen"
+            iconId="018dca8cad1b28075ecd"
+            @click="dialogFullscreen=true"
+            title="最大化"
+          />
+          <cc-icon
+            v-if="dialogFullscreen"
+            iconId="018dca8cad1b9b03c47f"
+            @click="dialogFullscreen=false"
+            title="缩小"
+          />
+        </div>
+      </div>
+    </template>
+    <bc-table
+      ref="dataTable"
+      pkName="id"
+      class="cc-grow-height"
+      dataUrl="/business/queryMessagePage"
+      :filters="filters"
+      :filterFields="filterFields"
+      :columns="columns"
+      @handleCellOperator="handleCellOperator"
+    ></bc-table>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible = false"
+      >关闭</el-button>
+    </template>
+  </el-dialog>
+
+  <!--查看界面-->
+  <el-dialog
+    v-model="viewVisible"
+    :title="viewOperator"
+    :width="dialogWidth"
+    style="height: 80vh"
+    :close-on-click-modal="false"
+    append-to-body
+    destroy-on-close
+    draggable
+    class="cc-page-comp-dialog padding-10"
+    :fullscreen="viewFullscreen"
+  >
+    <template #header>
+      <div class="header" @dblclick="viewFullscreen=!viewFullscreen">
+        <div class="title">{{viewOperator}}</div>
+        <div class="button">
+          <cc-icon
+            v-if="!viewFullscreen"
+            iconId="018dca8cad1b28075ecd"
+            @click="viewFullscreen=true"
+            title="最大化"
+          />
+          <cc-icon
+            v-if="viewFullscreen"
+            iconId="018dca8cad1b9b03c47f"
+            @click="viewFullscreen=false"
+            title="缩小"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="dialog-box">
+      <div class="title-line">
+        <div class="title">标题</div>
+        <div class="content">{{formData.title}}</div>
+      </div>
+      <div class="content-line">
+        <div class="title">内容</div>
+        <div class="content html-box">{{formData.content}}</div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="viewVisible = false"
+      >关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, } from 'vue';
+import emitter from '@/utils/bus';
+import { useUserStore } from '@/pinia/modules/user';
+import api from '@/http/api';
+
+const userStore = useUserStore();
+const messageCount = ref(0);
+const urlParams = new URLSearchParams(window.location.search);
+const subsystemId = urlParams.get('subsystemId');
+
+const dialogVisible = ref(false);
+const dialogWidth = ref('900px');
+const dialogTitle = ref('消息查看');
+const dialogFullscreen = ref(false);
+const viewOperator = ref('');
+
+const viewVisible = ref(false);
+const viewForm = ref();
+const formData = ref();
+const viewFullscreen = ref(false);
+
+const filters = ref({
+  name: '',
+  systemId: subsystemId
+});
+const filterFields = ref([
+  { prop: 'title', label: '标题' },
+  { prop: 'type', label: '类型', type: 'dict-select', dictCode: 'dictMessageType' },
+  { prop: 'ifRead', label: '是否已读', type: 'dict-select', dictCode: 'dictYesNo' },
+]);
+const columns = ref([
+  { prop: 'title', label: '标题', minWidth: 200, align: 'left', click: true },
+  { prop: 'type', label: '类型', width: 100, type: 'dict-select', dictCode: 'dictMessageType' },
+  { prop: 'ifRead', label: '是否已读', width: 100, type: 'dict-select', dictCode: 'dictYesNo' },
+  { prop: 'readTime', label: '查看时间', width: 160, type: 'datetime' },
+  { prop: 'createTime', label: '创建时间', width: 160, type: 'datetime' },
+]);
+
+const queryMessage = () => {
+  api.post('/business/queryUnreadCount', { systemId: subsystemId }).then(res => {
+    messageCount.value = res.data || 0;
+  });
+};
+
+const showMessage = () => {
+  dialogVisible.value = true;
+};
+
+const handleCellOperator = (property, value, row) => {
+  formData.value = Object.assign({}, row);
+  viewVisible.value = true;
+  viewOperator.value = '查看详情';
+  nextTick(() => {
+    viewForm.value && viewForm.value.clearValidate();
+  });
+
+  if (!row.ifRead || row.ifRead !== '1') {
+    api.post('/business/updateRead', { id: row.id }).then(res => {
+      if (res.code === '1') {
+        row.ifRead = '1';
+        row.readTime = res.data.readTime || '';
+        queryMessage();
+      }
+    });
+  }
+};
+
+onMounted(async() => {
+  queryMessage();
+
+  const user = await userStore.initUserInfo();
+  emitter.off('message.send.all.all', queryMessage);
+  emitter.off('message.send.all.' + user.id, queryMessage);
+  emitter.off('message.send.' + subsystemId + '.all', queryMessage);
+  emitter.off('message.send.' + subsystemId + '.' + user.id, queryMessage);
+
+  emitter.on('message.send.all.all', queryMessage);
+  emitter.on('message.send.all.' + user.id, queryMessage);
+  emitter.on('message.send.' + subsystemId + '.all', queryMessage);
+  emitter.on('message.send.' + subsystemId + '.' + user.id, queryMessage);
+});
+
+onUnmounted(async() => {
+  const user = await userStore.initUserInfo();
+  emitter.off('message.send.all.all', queryMessage);
+  emitter.off('message.send.all.' + user.id, queryMessage);
+  emitter.off('message.send.' + subsystemId + '.all', queryMessage);
+  emitter.off('message.send.' + subsystemId + '.' + user.id, queryMessage);
+});
+</script>
+
+<style scoped>
+.message {
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+}
+.dialog-box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-right: 80px;
+  overflow: hidden;
+  .title-line, .content-line {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+    .title {
+      width: 100px;
+      flex-shrink: 0;
+      text-align: right;
+      padding-right: 10px;
+    }
+    .content {
+      border: 1px solid #DCDFE6;
+      background: #F5F7FA;
+      padding: 1px 10px;
+      border-radius: 4px;
+      width: 100%;
+    }
+  }
+  .title-line {
+    height: 35px;
+    line-height: 35px;
+  }
+  .content-line {
+    height: 1px;
+    flex-grow: 1;
+  }
+}
+.html-box {
+  overflow: auto;
+  padding: 8px 10px!important;
+}
+</style>