feat: 应用列表

src/api/app-controls.js

+import getFetch from './get-fetch';
+
+const api = {
+  getAppList: '/application-list', // 获取应用列表
+  getAppDetail: '/application-detail', // 获取应用详情
+};
+
+export default getFetch(api, '/hb-manage-web');

src/router/routes.js

@@ -153,6 +153,24 @@ export const routes = [
     ]
   },
   {
+    path: '/app-controls',
+    meta: { title: '工作台' },
+    redirect: '/app-list',
+    component: _import('app-controls', 'index'),
+    children: [
+      {
+        path: '/app-list',
+        meta: { title: '服务应用' },
+        component: _import('app-controls', 'app-list')
+      },
+      {
+        path: '/app-detail',
+        meta: { title: '服务应用详情' },
+        component: _import('app-controls', 'app-detail')
+      }
+    ]
+  },
+  {
     // 企业应用
     path: '/apps',
     name: '企业应用',

src/views/app-controls/app-detail.vue

+<template>
+  <div>应用详情</div>
+</template>
+
+<script>
+export default {
+  name: 'AppDetail'
+};
+</script>

src/views/app-controls/app-list.vue

+<template>
+  <div class="app-list">
+    <h3 class="page-title">好办应用</h3>
+    <div>
+      <div class="app-item" v-for="el in appList" :key="el.applicationId">
+        <el-dropdown class="app-item-menu">
+          <i class="iconfont icongengduo1 menu-icon"></i>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="toAppDetail(el)">应用详情</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <div :class="['app-logo', {'no-logo': !el.applicationLogo}]">
+          <img v-if="!!el.applicationLogo" :src="el.applicationLogo" alt="">
+        </div>
+        <div class="app-info">
+          <p class="app-name">{{ el.applicationName }}</p>
+          <p class="to-buy" @click="toBuy">去订购&nbsp;<i class="iconfont iconjiantouxiangyou"></i></p>
+        </div>
+        <span class="out-time-tip">已过期</span>
+      </div>
+      <div class="to-app-center" @click="toAppCenter">
+        前往服务市场&nbsp;<i class="iconfont iconjiantouxiangyou"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import fetch from '@/api/app-controls';
+const { getAppList } = fetch;
+export default {
+  name: 'AppList',
+  data() {
+    return {
+      appList: []
+    };
+  },
+  created() {
+    this.getAppList();
+  },
+  methods: {
+    getAppList() {
+      getAppList().then(res => {
+        this.appList = res.result || [];
+      });
+    },
+    toAppDetail(appData) {
+      const { applicationId } = appData || {};
+      this.$router.push(`/app-detail?appId=${applicationId}`);
+    },
+    toBuy() {
+      alert('暂无跳转链接');
+    },
+    toAppCenter() {
+      alert('暂无跳转链接');
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.app-list {
+  padding: 20px 30px;
+  min-height: 100%;
+  background-color: #fff;
+  .page-title {
+    margin-bottom: 18px;
+    font-size: 16px;
+    font-weight: 700;
+    color: @gray01;
+    line-height: 22px;
+  }
+  .app-item {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    float: left;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    padding: 10px;
+    width: 172px;
+    height: 67px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    border: 1px solid #E4E7ED;
+    user-select: none;
+    &:hover {
+      box-shadow: 0px 2px 7px 0px rgba(122, 138, 203, 0.2);
+      .app-item-menu {
+        opacity: 1;
+      }
+    }
+    .app-item-menu {
+      position: absolute;
+      top: 2px;
+      right: 10px;
+      z-index: 1;
+      padding: 0 2px;
+      opacity: 0;
+      border-radius: 2px;
+      &:hover {
+        background: #F0F5FF;
+        .menu-icon {
+          color: @blue;
+        }
+      }
+      .menu-icon {
+        color: #909399;
+        cursor: pointer;
+      }
+    }
+    .out-time-tip {
+      position: absolute;
+      right: 0;
+      bottom: 5px;
+      z-index: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 49px;
+      height: 17px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #F5222D;
+      background: rgba(245, 34, 45, 0.09);
+      border-radius: 100px 0px 0px 100px;
+    }
+    .app-logo {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      margin-right: 10px;
+      width: 46px;
+      height: 46px;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+      &.no-logo {
+        background: #E4E7ED;
+      }
+    }
+    .app-info {
+      width: calc(100% - 50px);
+      .app-name {
+        width: 100%;
+        font-size: 14px;
+        font-weight: 400;
+        color: @gray01;
+        line-height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .to-buy {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 400;
+        color: @blue;
+        line-height: 17px;
+      }
+    }
+  }
+  .to-app-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    width: 172px;
+    height: 67px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #C0C4CC;
+    border-radius: 4px;
+    border: 1px dashed #E4E7ED;
+    user-select: none;
+    cursor: pointer;
+    &:hover {
+      color: @blue;
+      border-color: @blue;
+    }
+  }
+}
+</style>

src/views/app-controls/index.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2018-10-10 14:44:45
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-08-18 18:10:09
+ -->
+<template>
+  <div class="review-wrap">
+    <!-- 公共头部菜单 -->
+    <vue-office-header :project-name="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView" @leftData="leftData"> </vue-office-header>
+    <div class="setting-wrap__body">
+      <div id="content" class="content">
+        <div class="content-body">
+          <div class="content-body-inner flex border-box">
+            <div class="apps-content-left w-157" style="min-height: calc(100vh - 86px);">
+              <common-detail-left :tab-list-data="tabListData" :active-sel-tab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
+            </div>
+            <div class="apps-content-right border-box">
+              <transition name="fade" mode="out-in">
+                <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab"></router-view>
+              </transition>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import vueOfficeHeader from '@/components/vue-office-header.vue';
+import commonDetailLeft from '@/components/app/app-detail-left.vue';
+import fetch from '@/api/menu-auth.js';
+const { getRoleMenu } = fetch;
+export default {
+  name: 'ReviewCenter',
+  components: {
+    vueOfficeHeader,
+    commonDetailLeft
+  },
+  data() {
+    return {
+      projectName: 'haoban-manage-web', // 当前项目名
+      collapseFlag: false, // 折叠参数
+      activeSelTab: '1',
+      activeTab: '1',
+
+      tabListData: [
+        /* {
+          tabId: '1',
+          tabName: '待审核',
+          menuCode: 'unreview',
+          icon: 'icondaishenhe_orange'
+        },
+        {
+          tabId: '2',
+          tabName: '已审核',
+          menuCode: 'reviewed',
+          icon: 'iconrenwu1'
+        } */
+      ]
+    };
+  },
+  methods: {
+    /**
+     * 路由跳转
+     *  @param {String} path
+     */
+    changeRoute(path) {
+      this.$router.push(path);
+    },
+    /**
+     * 选择后返回menuUrl，做各路由判断
+     *  @param {Object} item
+     */
+    setSelectTab(item) {
+      const that = this;
+      that.activeTab = item.menuUrl;
+      if (item.target == 1) {
+        if (item.menuUrl.indexOf('http') != -1) {
+          window.open(item.menuUrl);
+        }else {
+          window.open(`/haoban-4/#${item.menuUrl}`);
+        }
+      }else {
+        that.$router.push(item.menuUrl);
+      }
+    },
+
+    /**
+     * 各路由返回 menuUrl
+     *  @param {String} menuUrl
+     */
+    showTab(menuUrl) {
+      const that = this;
+      that.activeTab = menuUrl;
+      that.activeSelTab = menuUrl;
+      that.tabListData.forEach(ele => {
+        if (ele.menuUrl == menuUrl) {
+          ele.onlyIconActive = false;
+        }
+        if (!!ele.children) {
+          ele.children.forEach(el => {
+            if (el.menuUrl == menuUrl) {
+              ele.onlyIconActive = true;
+            }
+            if (!!el.children) {
+              el.children.forEach(item => {
+                if (item.menuUrl == menuUrl) {
+                  ele.onlyIconActive = true;
+                }
+              });
+            }
+          });
+        }
+      });
+    },
+    // 处理路由跳转
+    toRouterView(val) {
+      const that = this;
+      // 模拟检查数据,有两个参数
+      /* {
+       name:,
+       path:
+      }*/
+      that.$router.push({
+        path: val.path
+      });
+    },
+
+    // 折叠事件
+    collapseTag(val) {
+      const that = this;
+      that.collapseFlag = val;
+    },
+    /**
+     * 获取左侧数据
+     *  @param {Array} arr
+     **/
+    leftData(arr) {
+      const that = this;
+      arr[0].children.forEach((ele, i) =>{
+        ele.tabId =  i + 1;
+        ele.tabName =  ele.menuName;
+        if (!!ele.children && ele.children.length) {
+          that.setChildData(ele, i + 1);
+        }
+      });
+      that.tabListData = arr[0].children;
+    },
+    setChildData(ele, pid) {
+      const that = this;
+      ele.children.forEach((ele, i) =>{
+        ele.tabId =  pid + '-' + (i + 1);
+        ele.tabName =  ele.menuName;
+        if (!!ele.children && ele.children.length) {
+          that.setChildData(ele, pid + '-' + (i + 1));
+        }
+      });
+    },
+    getData() {
+      const that = this;
+      const para = {};
+      getRoleMenu(para)
+        .then(res => {
+          if (res.code == '0000') {
+            const arr = res.result.map(ele => ele.menuCode);
+            let newData = [];
+            that.tabListData.forEach(ele => {
+              if (arr.includes(ele.menuCode)) {
+                newData.push(ele);
+              }
+            });
+            that.tabListData = newData;
+          }
+        })
+        .catch(function(error) {
+
+        });
+    }
+  }
+};
+</script>
+<style lang="less">
+.review-wrap {
+  background-color: #f0f2f5;
+}
+.setting-wrap__body {
+  .content {
+    padding-top: 46px;
+    /* height: calc(100% - 64px);
+    overflow-y: auto;*/
+    min-width: 1400px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .content-body {
+      .content-body-inner {
+        padding: 20px;
+        min-height: calc(100% - 86px);
+      }
+      .apps-content-left {
+        min-width: 157px;
+        // height: 100%;
+        background: #fff;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+      .apps-content-right {
+        width: calc(100% - 157px);
+        padding-left: 10px;
+        background: #f0f2f5;
+      }
+
+      .common-set-wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+
+        .right-content {
+          /*width: 100%;*/
+          min-height: calc(100% - 86px);
+
+          .right-box {
+            background: #fff;
+            padding: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.el-table__body-wrapper .el-table__empty-block {
+  height: 256px;
+}
+
+.el-table__empty-text {
+  width: auto;
+  margin-bottom: 0px;
+}
+</style>