Merge pull request #81 from go-atomci/fix-frontend-load-bug

fix: frontend change activated func to mounted

web/src/components/SvgIcon/index.vue

+<template>
+    <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+    <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+    </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>
\ No newline at end of file

web/src/components/utils/ClusterTab.vue

@@ -49,7 +49,7 @@ export default {
       clusterList: 'getClusterList',
     }),
   },
-  created() {
+  mounted() {
     // 初始化的时候数据如果有，就直接获取，如果没有就通过watch监听获取
     this.getClusterList();
   },

web/src/icons/index.js

+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
\ No newline at end of file

web/src/icons/svg/404.svg

+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file

web/src/icons/svgo.yml

+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
\ No newline at end of file

web/src/layout/components/Navbar.vue

@@ -201,7 +201,7 @@ export default {
       window.location.reload();
     },
     handleSelect(index) {
-      this.defaultActiveIndex = index;
+      // this.defaultActiveIndex = index;
     },
     // 获取详情的地址
     initDetailNav(truePath, origin) {

web/src/main.js

@@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
 import VueClipboard from 'vue-clipboard2';
 import VueResource from 'vue-resource';
 import VueCodeMirror from 'vue-codemirror';
-
+import './icons' 
 import './style';
 import '@/assets/iconfont.css';
 import '@/assets/css/style.css';

web/src/router/index.js

@@ -253,7 +253,7 @@ export default router;
 
 export function getUserSibeBarRoutes(routerPath) {
     let routers = []
-    console.log('current path: ', routerPath)
+    // console.log('current path: ', routerPath)
     if (routerPath.startsWith('/settings/') || routerPath.startsWith('/sysusers') || routerPath.startsWith('/sysroles') || routerPath === '/sysaudit' || routerPath === "/environment" || routerPath === "/node" || routerPath === "/pipelines") {
         routers = asyncRoutes
     } else if (routerPath.startsWith('/project/')) {

web/src/router/modules/projectDetailRouter.js

@@ -17,7 +17,7 @@ export function projectDetailRouter() {
       ]
     },
     {
-      path: '/project/:projectID/detail/app',
+      path: '/project/:projectID/appdetail',
       name: 'projectAppHome',
       component: Layout,
       meta: { title: '应用代码', noCache: true},
@@ -45,7 +45,7 @@ export function projectDetailRouter() {
       ]
     },
     {
-      path: '/project/:projectID/detail/ci',
+      path: '/project/:projectID/cidetail',
       name: 'projectCIHome',
       component: Layout,
       meta: { title: '构建部署', noCache: true },
@@ -73,7 +73,7 @@ export function projectDetailRouter() {
       ]
     },
     {
-      path: '/project/:projectID/detail/service',
+      path: '/project/:projectID/svcdetail',
       name: 'projectServiceHome',
       component: Layout,
       meta: { title: '应用服务', noCache: true },

web/src/views/project/ProjectApp.vue

@@ -84,7 +84,7 @@
         </el-table>
       </template>
       <page-nav ref="pages" :list="listCol" v-on:getlist="getList"></page-nav>
-      <app-arrange ref="appArrange" :envList="envList" :appList="appList"></app-arrange>
+      <app-arrange ref="appArrange" :envList="envStageList" :appList="projectAppList"></app-arrange>
     </div>
   </div>
 </template>
@@ -108,7 +108,8 @@ export default {
         { key: 'path', txt: this.$t('bm.deployCenter.path') },
       ],
       listCol: [],
-      dependList: [],
+      envStageList: [],
+      projectAppList: [],
       filterTxt: '',
       searchVal: '',
       searchType: '',
@@ -156,14 +157,11 @@ export default {
     },
   },
   mounted() {
-    // this.getList();
-  },
-  activated() {
     backend.getProjectEnvsAll(this.projectID, (data) => {
-      this.envList = data
+      this.envStageList = data
     }),
     backend.getAppAll(this.projectID, (data) => {
-      this.appList = data
+      this.projectAppList = data
     }),
     this.getList(true);
   },
@@ -189,14 +187,7 @@ export default {
       }
       backend.getApp(this.projectID, params, (data) => {
         this.$refs.pages.total = data.total;
-        this.listCol = data.item.map((item) => {
-          item.enable_trunk_test = item.enable_trunk_test ? this.$t('bm.other.yes') : this.$t('bm.other.no');
-          return item;
-        });
-        this.dependList = this.listCol.filter((i) => {
-          // return i.app_type;
-          return i.app_type === 'module' || i.app_type === 'open';
-        });
+        this.listCol = data.item
       });
     },
     handleSelectAll(val) {

web/src/views/project/ProjectCICD.vue

@@ -147,7 +147,7 @@
 
       </el-row> -->
       <template>
-        <el-table stripe="true" :data="projectReleaseListData" class="mt16">
+        <el-table stripe :data="projectReleaseListData" class="mt16">
           <el-table-column sortable prop="version_no" min-width="10%" :label="$t('bm.deployCenter.pipelineName')">
             <template slot-scope="scope">
               <el-button type="text" @click="gotoDetail(scope.row.id)">{{scope.row.version_no}}</el-button>
@@ -274,7 +274,7 @@
       ProjectMark,
       ProjectDeploy,
     },
-    activated() {
+    mounted() {
       this.getStageList();
     },
     computed: {

web/src/views/project/ProjectDashboard.vue

@@ -278,11 +278,10 @@
       }),
     },
     components: {},
-    activated() {
+    created() {
       this.getProjectInfo();
       // this.getChartData();
     },
-    created() {},
     mounted() {
       window.addEventListener('resize', () => {
         this.$nextTick(() => {

web/src/views/project/ProjectEnv.vue

@@ -17,7 +17,7 @@
           </el-row>
         </div>
         <template>
-          <el-table :data="dataList">
+          <el-table :data="curList">
             <span slot="empty">
               {{loading?$t('bm.add.dataLoading'):noDataTxt}}
             </span>
@@ -86,9 +86,6 @@ export default {
     CommonDelete,
   },
   mounted() {
-    // this.getList();
-  },
-  activated() {
     this.getAllIntegrateSettings();
     this.getList(true);
   },
@@ -97,10 +94,6 @@ export default {
       loading: 'getLoading',
       projectID: 'projectID',
     }),
-    dataList() {
-      // 强制替换dataList替代listtemplate中的方法
-      return this.curList;
-    },
   },
   methods: {
     goEdit(user) {

web/src/views/project/ProjectPipeline.vue

@@ -89,9 +89,6 @@ export default {
     CommonDelete,
   },
   mounted() {
-    // this.getList();
-  },
-  activated() {
     this.getList(true);
   },
   computed: {

web/src/views/project/Service.vue

@@ -122,26 +122,12 @@ export default {
       return this.curList;
     },
   },
-  activated() {
+  mounted() {
     this.getList();
   },
   watch: {
-    // 如果是从应用编排提交过来则必须重新刷新列表数据
-    $route(to, from) {
-      if (this.$route.query.isRefresh && from.name === 'projectAppDetail') {
-        this.getList(true);
-      }
-    },
   },
   methods: {
-    goDeploy() {
-      this.$router.push({
-        name: 'deployMirror',
-        params: {
-          cluster: this.cluster,
-        },
-      });
-    },
     changeCluster(cluster) {
       if (this.cluster !== cluster) {
         this.cluster = cluster;

web/src/views/project/components/AppArrange.vue

@@ -154,7 +154,6 @@ export default {
       currentImageMappings: [],
       dialogVisible: false,
       appID: 0,
-      appList: [],
       imageTagType: [
         {
           name: '保持不变',

web/src/views/project/detail/PipelineAdd.vue

@@ -182,6 +182,8 @@ export default {
       list: [],
       listData: {},
       initHeight: 100,
+      envList:[],
+      taskList:[]
     };
   },
   components: {
@@ -194,8 +196,7 @@ export default {
     }),
   },
   mounted() {},
-  created() {},
-  activated() {
+  created() {
     backend.getProjectEnvsAll(this.projectID, (data) => {
       this.envList = data
     }),

web/src/views/project/detail/ProjectAppAdd.vue

@@ -222,14 +222,12 @@
     components: {
     },
     created() {},
-    activated() {
+    mounted() {
       backend.getCompileEnvAll((data) => {
-      if(data){
-        this.compileEnvs = data;
-      }
+        if(data){
+          this.compileEnvs = data;
+        }
       });
-    },
-    mounted() {
       this.getRepos();
     },
     methods: {

web/src/views/project/detail/ProjectAppDetail.vue

@@ -159,8 +159,6 @@ export default {
     this.appDetail();
   },
   mounted() {
-  },
-  activated() {
     this.getList();
   },
   methods: {

web/src/views/project/detail/ProjectCIDetail.vue

@@ -68,7 +68,7 @@
           <el-tab-pane label="操作历史" name="history">
             <template>
               <el-table
-                stripe="true"
+                stripe
                 :data="historyData"
                 style="width: 100%">
                 <el-table-column
@@ -310,11 +310,8 @@ export default {
     versionAdd,
     PublishEdit,
   },
-  activated() {
-    this.getVersionInfo();
-  },
   mounted() {
-
+    this.getVersionInfo();
   },
   methods: {
     getVersionInfo() {

web/src/views/project/detail/ServiceDetail.vue

@@ -248,7 +248,7 @@ export default {
     FlowControl,
     CommonDelete
   },
-  activated() {
+  mounted() {
     this.getDetail();
   },
   computed: {

web/src/views/project/dialog/ProjectAppEdit.vue

@@ -94,15 +94,12 @@ export default {
       loading: 'getPopLoading',
     }),
   },
-  activated() {
+  mounted() {
     backend.getCompileEnvAll((data) => {
       if(data){
         this.compileEnvs = data;
       }
     });
-  },
-  mounted() {
-
   },
   methods: {
     handleSelect(index) {

web/src/views/role/UserRole.vue

@@ -110,10 +110,6 @@ export default {
           key: 'description',
           txt: this.$t('bm.serviceM.description'),
         },
-        {
-          key: 'policy',
-          txt: this.$t('bm.add.perPolicy'),
-        },
       ],
       filterTxt: '',
       // TODO: default group use system, tmp

web/src/views/setting/CompileEnv.vue

@@ -43,7 +43,6 @@
         </template>
         <common-delete ref="commonDelete" v-on:getlist="getList"></common-delete>
         <compile-env-create ref="create" v-on:getlist="getList"></compile-env-create>
-        <node-view ref="view"></node-view>
       </div>
     </div>
   </template>
@@ -82,9 +81,6 @@
       PageNav,
     },
     mounted() {
-      this.getList();
-    },
-    activated() {
       this.getList(true);
     },
     computed: {

web/src/views/setting/IntegrateSetting.vue

@@ -94,7 +94,7 @@ export default {
   mounted() {
     // this.getList();
   },
-  activated() {
+  mounted() {
     this.getList(true);
   },
   computed: {

web/src/views/setting/Node.vue

@@ -42,7 +42,6 @@
         </template>
         <common-delete ref="commonDelete" v-on:getlist="getList"></common-delete>
         <node-create ref="create" v-on:getlist="getList"></node-create>
-        <node-view ref="view"></node-view>
       </div>
     </div>
   </template>
@@ -52,7 +51,6 @@
   import ListSearch from '@/components/utils/ListSearch';
   import PageNav from '@/components/utils/PageList';
   import NodeCreate from './dialog/NodeCreate';
-  import NodeView from './dialog/NodeView';
   import CommonDelete from '@/components/utils/Delete';
   import Refresh from '@/components/utils/Refresh';
   import listTemplate from '@/common/listTemplate';
@@ -78,14 +76,10 @@
       ListSearch,
       Refresh,
       NodeCreate,
-      NodeView,
       CommonDelete,
       PageNav,
     },
     mounted() {
-      this.getList();
-    },
-    activated() {
       this.getList(true);
     },
     computed: {

web/src/views/user/UserManage.vue

@@ -95,7 +95,7 @@ export default {
       curList: [],
       searchList: [
         { key: 'name', txt: this.$t('bm.authorManage.userName') },
-        { key: 'user', txt: this.$t('bm.depManage.userAccount') },
+        { key: 'user', txt: '账号' },
         { key: 'create_at', txt: this.$t('bm.serviceM.creationTime') },
       ],
       searchListResource: [