feat(active): add active detail

src/router/views/index.js

@@ -19,4 +19,14 @@ export default [{
         component: () =>
             import ( /* webpackChunkName: "views" */ '@/views/crud/index')
     }]
+}, {
+    path: '/activti',
+    component: Layout,
+    redirect: '/activti/detail',
+    children: [{
+        path: 'detail/:id',
+        component: () =>
+            import ( /* webpackChunkName: "views" */ '@/views/admin/activiti/detail')
+    }]
+
 }]

src/styles/common.scss

@@ -194,6 +194,14 @@ table {
     top: 0;
 }
 
+.iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
 .text-white {
     color: #fff;
 }
@@ -227,6 +235,7 @@ table {
 }
 
 .app-container {
+    height: 100%;
     padding: 20px;
     box-sizing: border-box;
 }

src/views/admin/activiti/detail.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="app-container pull-auto">
+    <basic-container>
+      <div class="header">
+        <p class="header__title">{{name}}</p>
+        <el-button class="header__btn"
+                   type="primary"
+                   @click="breaks">关闭返回列表</el-button>
+      </div>
+    </basic-container>
+
+    <el-scrollbar class="main">
+      <iframe class="iframe"
+              :src="src"></iframe>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      id: '',
+      name: ''
+    }
+  },
+  created () {
+    this.id = this.$route.params.id
+    this.name = this.$route.query.name
+  },
+  computed: {
+    src () {
+      return `${this.actUrl}${this.id}`;
+    }
+  },
+  methods: {
+    breaks () {
+      this.$router.$avueRouter.closeTag();
+      this.$router.push({ path: '/activti/activiti' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  &__title {
+    font-size: 22px;
+  }
+  &__btn {
+    position: absolute;
+    right: 10px;
+  }
+}
+.main {
+  margin: 0 auto;
+  width: 99%;
+  height: calc(100% - 100px);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+</style>

src/views/admin/activiti/index.vue

@@ -98,12 +98,12 @@ export default {
     },
     handleView (row, index) {
       const name = `模型id为${row.id}的${row.name}流程图`,
-        src = `${this.actUrl}${row.id}`;
+        src = `/activti/detail/${row.id}`;
       this.$router.push({
-        path: this.$router.$avueRouter.getPath({
-          name: name,
-          src: src
-        })
+        path: src,
+        query: {
+          name: name
+        }
       })
     },
     handleDel (row, index) {