vue-apps/com.actionsoft.apps.coe.pal/src/views/manage/Manage.vue

<template>
  <el-container :style="{'border': '1px solid #eee', 'width': '100%', 'height': '100%'}" id="manage">
    <el-aside id="menu" width="200px">
      <el-menu :default-openeds="defaultOpendMenu"
               @open="setDefaultOpenMenu"
               @close="removeDefaultOpenMenu">
        <template v-if="!isSecAdminUser">
          <el-menu-item id="workspaceManage" index="workspaceManage" @click="goTo('workspaceManage')">
            <i class="iconfont icon-zichanliebiao icon"></i>
            <span slot="title">资产库管理</span>
          </el-menu-item>
          <el-menu-item index="cooperationManage" v-if="isCooperationActive" @click="goTo('cooperationManage')">
            <i class="iconfont icon-icon-test icon"></i>
            <span slot="title">小组管理</span>
          </el-menu-item>
        </template>


        <el-submenu index="org">
          <template slot="title">
            <i class="iconfont icon-zuzhi icon"></i>
            <span>组织管理</span>
          </template>
          <el-menu-item index="palUser" @click="goTo('palUser')">PAL用户</el-menu-item>
          <el-menu-item v-if="!isSecAdminUser" index="bpmOrg" @click="goTo('bpmOrg')">BPM平台组织架构</el-menu-item>
        </el-submenu>
        <template v-if="!isSecAdminUser">
          <el-submenu index="publisher" v-if="isPublishActive">
            <template slot="title">
              <i class="iconfont icon-liuchengmenhu icon"></i>
              <span>门户设置</span>
            </template>
            <el-menu-item index="themeStyle" @click="goTo('themeStyle')">主题风格</el-menu-item>
            <el-menu-item index="commonRepository" @click="goTo('commonRepository')">常用流程</el-menu-item>
            <el-menu-item index="userGroup" @click="goTo('userGroup')">浏览用户</el-menu-item>
          </el-submenu>
          <el-submenu index="mappingmanagement" v-if="isMappingmanageActive">
            <template slot="title">
              <i class="iconfont icon-guanlian icon"></i>
              <span>关联管理</span>
            </template>
            <el-menu-item index="correlated" @click="goTo('correlated')">已关联流程</el-menu-item>
            <el-menu-item index="palNotCorrelated" @click="goTo('palNotCorrelated')">PAL未关联流程</el-menu-item>
            <el-menu-item index="bpmNotCorrelated" @click="goTo('bpmNotCorrelated')">BPM未关联流程</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <router-view :key="this.$route.path"></router-view>
  </el-container>
</template>

<script>
  import WorkspaceManage from "../workspace/WorkspaceManage";
  import User from "../user/User";
  import BPMOrg from "../user/BPMOrg";
  import awsuiAxios from "../../awsuiAxios";
  import MappingManagement from "../mappingManagement/MappingManagement";
  export default {
    name: "Manage",
    components: {WorkspaceManage, User, BPMOrg, MappingManagement},
    data() {
      return {
        defaultOpendMenu: [],
        isPublishActive: false,
        isCooperationActive: false,
        isMappingmanageActive: false,
        isSecAdminUser: isSecAdminUser
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {// 初始化侧边栏数据项
        const that = this;
        const data = {
          url:'jd',
          data:{
            cmd : 'com.actionsoft.apps.coe.pal_pl_manage_app_data'
          }
        };
        awsuiAxios.post(data).then(function (ro) {
          if (ro.result == 'ok') {
            let data = ro.data;
            that.isPublishActive = data.isPublishActive;
            that.isCooperationActive = data.isCooperationActive;
            that.isMappingmanageActive = data.isMappingmanageActive;
            // 默认激活第一个资产库管理
            document.getElementById("workspaceManage").click();
          }
        }).catch(error=>{
          console.log(error);
        })
      },
      goTo(path) {
        this.saveAccessOpLog(path);
        if (path == 'workspaceManage') {
          this.$router.push({path: 'workspaceManage'});
        } else if (path == 'cooperationManage') {
          this.$router.push({path: 'cooperationUpdate'});
        } else if (path == 'palUser') {
          this.$router.push({path: 'palUser'})
        } else if (path == 'bpmOrg') {
          this.$router.push({path: 'bpmOrg'});
        } else if (path == 'correlated' || path == 'palNotCorrelated' || path == 'bpmNotCorrelated') {
          this.$router.push({name: 'mappingManagement_' + path, params: {'dataType': path}});
        } else if (path == 'themeStyle') {
          this.$router.push({path: 'themeStyle'});
        } else if (path == 'commonRepository') {
          this.$router.push({path: 'commonRepository'});
        } else if (path == 'userGroup') {
          this.$router.push({path: 'userGroup'});
        }
      },
      setDefaultOpenMenu(index, path) {// 展开菜单之后设置默认展开，防止点击其他菜单此菜单被自动关闭
        if (this.defaultOpendMenu.indexOf(index) == -1) {
          this.defaultOpendMenu.push(index);
        }
      },
      saveAccessOpLog(path) {// 记录访问各模块的审计日志
        const that = this;
        const data = {
          url:'jd',
          data:{
            cmd : 'com.actionsoft.apps.coe.pal_access_log_save',
            moduleCategory: path
          }
        };
        awsuiAxios.post(data).then(function (ro) {
          if (ro.result == 'ok') {

          }
        }).catch(error=>{
          console.log(error);
        })
      },
      removeDefaultOpenMenu(index, path) {//
        if (this.defaultOpendMenu.indexOf(index) != -1) {// 关闭菜单之后去除默认展开
          this.defaultOpendMenu.splice(this.defaultOpendMenu.indexOf(index), 1);
        }
      }
    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }

  #menu .el-menu{
    border-right: 0px solid #e6e6e6;
  }
  #manage #menu {
    border-right: 1px solid #e6e6e6;
  }
  .icon {
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
</style>