mt-qj-wms-ui/src/views/main-sidebar.vue

<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="task">
          <template slot="title">
            <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title"
              >任务管理</span
            >
          </template>
          <el-menu-item
            index="orderProcess"
            @click="$router.push({ name: 'orderAuto' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">自动任务</span>
          </el-menu-item>
          <el-menu-item
            index="orderProcess"
            @click="$router.push({ name: 'orderProcess' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">订单加工</span>
          </el-menu-item>
          <el-menu-item
            index="exWarehouse"
            @click="$router.push({ name: 'exWarehouse' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">货物出库</span>
          </el-menu-item>
          <!-- <el-menu-item
            index="addProcess"
            @click="$router.push({ name: 'addProcess' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">追加加工</span>
          </el-menu-item> -->
        </el-submenu>
        <!-- <el-submenu index="demo">
          <template slot="title">
            <icon-svg
              name="shoucang"
              class="site-sidebar__menu-icon"
            ></icon-svg>
            <span>demo</span>
          </template>
          <el-menu-item
            index="demo-echarts"
            @click="$router.push({ name: 'demo-echarts' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item
            index="demo-ueditor"
            @click="$router.push({ name: 'demo-ueditor' })"
          >
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu> -->
        <el-submenu index="basic">
          <template slot="title">
            <icon-svg name="bianji" class="site-sidebar__menu-icon"></icon-svg>
            <span>基础信息</span>
          </template>
          <el-menu-item
            index="cache"
            @click="$router.push({ name: 'basic-cache' })"
          >
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">缓存区信息</span>
          </el-menu-item>
          <el-menu-item
            index="processInfo"
            @click="$router.push({ name: 'basic-processInfo' })"
          >
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">工艺信息</span>
          </el-menu-item>
          <el-menu-item
            index="equipmentInfo"
            @click="$router.push({ name: 'basic-equipmentInfo' })"
          >
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">设备基础信息</span>
          </el-menu-item>
          <el-menu-item
            index="carInfo"
            @click="$router.push({ name: 'basic-carInfo' })"
          >
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">车辆信息</span>
          </el-menu-item>
          <el-menu-item
            index="alarmInfo"
            @click="$router.push({ name: 'basic-alarmInfo' })"
          >
            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">报警基础信息</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="order">
          <template slot="title">
            <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
            <span>订单加工管理</span>
          </template>
          <el-menu-item
            index="current-order"
            @click="$router.push({ name: 'order-current-order' })"
          >
            <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">当前订单列表</span>
          </el-menu-item>
          <el-menu-item
            index="current-task"
            @click="$router.push({ name: 'order-current-task' })"
          >
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">当前执行任务</span>
          </el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="energy">
          <template slot="title">
            <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
            <span>能源管理</span>
          </template>
          <el-menu-item
            index="electric"
            @click="$router.push({ name: 'energy-electric' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用电能源分析</span>
          </el-menu-item>
          <el-menu-item
            index="kiln-electric"
            @click="$router.push({ name: 'energy-kiln-electric' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">窑炉用电分析</span>
          </el-menu-item>
          <el-submenu index="kiln-gas">
            <template slot="title">
              <icon-svg
                name="config"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span>窑炉用气分析</span>
            </template>
            <el-menu-item
              index="sulfur-dioxide"
              @click="$router.push({ name: 'energy-sulfur-dioxide' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">二氧化硫流量分析</span>
            </el-menu-item>
            <el-menu-item
              index="methanol"
              @click="$router.push({ name: 'energy-methanol' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">甲醇流量分析</span>
            </el-menu-item>
            <el-menu-item
              index="propane"
              @click="$router.push({ name: 'energy-propane' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">丙烷流量分析</span>
            </el-menu-item>
            <el-menu-item
              index="ammonia"
              @click="$router.push({ name: 'energy-ammonia' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">氨气流量分析</span>
            </el-menu-item>
            <el-menu-item
              index="nitrogen"
              @click="$router.push({ name: 'energy-nitrogen' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">氮气流量分析</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            index="electric-acquisition"
            @click="$router.push({ name: 'energy-electric-acquisition' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">电能采集数据</span>
          </el-menu-item>
          <el-menu-item
            index="gas-acquisition"
            @click="$router.push({ name: 'energy-gas-acquisition' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用气采集数据</span>
          </el-menu-item>
          <el-menu-item
            index="temperature-acquisition"
            @click="$router.push({ name: 'energy-temperature-acquisition' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">温度采集数据</span>
          </el-menu-item>
          <el-submenu index="temperature">
            <template slot="title">
              <icon-svg
                name="config"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span>温度分析</span>
            </template>
            <el-menu-item
              index="process-temperature"
              @click="$router.push({ name: 'energy-process-temperature' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">窑炉加工温度</span>
            </el-menu-item>
            <el-menu-item
              index="sump-temperature"
              @click="$router.push({ name: 'energy-sump-temperature' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">油槽温度</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="gas">
            <template slot="title">
              <icon-svg
                name="config"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span>用气分析</span>
            </template>
            <el-menu-item
              index="ammonia-analysis"
              @click="$router.push({ name: 'energy-ammonia-analysis' })"
            >
              <icon-svg
                name="tubiao"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span slot="title">使用氮气分析</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            index="kiln-speed"
            @click="$router.push({ name: 'energy-kiln-speed' })"
          >
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">窑炉速度参数</span>
          </el-menu-item>
        </el-submenu> -->
        <el-submenu index="report">
          <template slot="title">
            <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
            <span>报表统计</span>
          </template>
          <el-submenu index="alarm">
            <template slot="title">
              <icon-svg
                name="config"
                class="site-sidebar__menu-icon"
              ></icon-svg>
              <span>报警信息</span>
            </template>
            <el-menu-item
              index="kiln-alarm"
              @click="$router.push({ name: 'report-kiln-alarm' })"
            >
              <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">窑炉报警</span>
            </el-menu-item>
            <el-menu-item
              index="car-alarm"
              @click="$router.push({ name: 'report-car-alarm' })"
            >
              <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">车辆运行报警</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            index="order-history"
            @click="$router.push({ name: 'report-order-history' })"
          >
            <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">订单历史列表</span>
          </el-menu-item>
          <el-menu-item
            index="task-history"
            @click="$router.push({ name: 'report-task-history' })"
          >
            <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">执行任务历史列表</span>
          </el-menu-item>
        </el-submenu>
        <!-- <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        >
        </sub-menu> -->
      </el-menu>
    </div>
  </aside>
</template>

<script>
// import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      dynamicMenuRoutes: []
    }
  },
  // components: {
  //   SubMenu
  // },
  computed: {
    sidebarLayoutSkin: {
      get () {
        return this.$store.state.common.sidebarLayoutSkin
      }
    },
    sidebarFold: {
      get () {
        return this.$store.state.common.sidebarFold
      }
    },
    menuList: {
      get () {
        return this.$store.state.common.menuList
      },
      set (val) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    menuActiveName: {
      get () {
        return this.$store.state.common.menuActiveName
      },
      set (val) {
        this.$store.commit('common/updateMenuActiveName', val)
      }
    },
    mainTabs: {
      get () {
        return this.$store.state.common.mainTabs
      },
      set (val) {
        this.$store.commit('common/updateMainTabs', val)
      }
    },
    mainTabsActiveName: {
      get () {
        return this.$store.state.common.mainTabsActiveName
      },
      set (val) {
        this.$store.commit('common/updateMainTabsActiveName', val)
      }
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem('dynamicMenuRoutes') || '[]'
    )
    this.routeHandle(this.$route)
  },
  methods: {
    // 路由操作
    routeHandle (route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              item => item.name === route.name
            )[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>