区分 test dev 环境

src/api/docker.js

@@ -56,6 +56,14 @@ export function createEnv(data) {
   })
 }
 
+export function getGroup(query) {
+  return request({
+    url: '/env/get_group',
+    method: 'get',
+    params: query
+  })
+}
+
 export function fetchKubernetesList() {
   return request({
     url: '/k8s/namespace',

src/router/index.js

@@ -115,7 +115,7 @@ export default new Router({
 
 export const asyncRouterMap = [
   {
-    path: '',
+    path: '/indexlist',
     component: Layout,
     redirect: 'indexlist',
     meta: {
@@ -124,7 +124,7 @@ export const asyncRouterMap = [
     },
     children: [
       {
-        path: '/indexlist',
+        path: 'list',
         component: () => import('@/views/index/index'),
         name: 'indexList',
         meta: { title: 'indexList' }

src/router/modules/docker.js

@@ -12,10 +12,16 @@ const dockersRouter = {
   },
   children: [
     {
-      path: 'runingEnv',
-      component: () => import('@/views/docker/runingEnv'),
-      name: 'RuningEnv',
-      meta: { title: 'runingEnv', noCache: true }
+      path: 'runingEnvTest',
+      component: () => import('@/views/docker/runingEnvTest'),
+      name: 'RuningEnvTest',
+      meta: { title: '测试环境', noCache: true, roles: ['test'] }
+    },
+    {
+      path: 'runingEnvDev',
+      component: () => import('@/views/docker/runingEnvDev'),
+      name: 'RuningEnvDev',
+      meta: { title: '开发环境', noCache: true, roles: ['dev'] }
     },
     // {
     //   path: 'hangUpEnv',

src/views/docker/createEnv.vue

 <template>
   <div class="app-container">
-    <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
+    <el-form label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
       <el-alert
         type="warning"
         style="margin-bottom: 20px; font-size: 14px;"
@@ -13,17 +13,24 @@
       </el-alert>
 
       <el-form-item label="Namespace名称">
-        <el-input v-model="namespace" placeholder="请输入"/>
+        <el-input v-model="namespace" placeholder="请输入，必输"/>
       </el-form-item>
+
+      <el-form-item label="环境归属" >
+        <el-select v-model="group" style="width:100%" placeholder="请输入，必选">
+          <el-option v-for="item in groups" :value="item" :key="item" />
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="选择模板" >
         <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="useTemplate">
           <el-option v-for="item in templates" :value="item.name" :key="item.name" />
         </el-select>
       </el-form-item>
+
       <el-form-item v-for="(ns, index) in repoNamespaces" :label="ns.type | upper" :key="index">
         <el-card>
           <el-button
-            v-loading="loading"
             v-for="item in ns.repos"
             :key="item.domain"
             :type="dependant[ns.type] && dependant[ns.type].find(sys => sys.appname === item.appname) ? 'success' : ''"
@@ -34,12 +41,12 @@
         </el-card>
       </el-form-item>
     </el-form>
-    <el-button v-permission="['admin']" :disabled="loading" style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
+    <el-button v-permission="['admin']" style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
   </div>
 </template>
 
 <script>
-import { getBaseRepos, getAllEnvTemplate, createEnv } from '@/api/docker'
+import { getBaseRepos, getAllEnvTemplate, createEnv, getGroup } from '@/api/docker'
 import permission from '@/directive/permission/index.js' // 权限判断指令
 
 export default {
@@ -59,20 +66,27 @@ export default {
       repoNamespaces: [],
       currentTemplate: '',
       templates: {},
-      loading: true
+      groups: [],
+      group: ''
     }
   },
 
   created() {
     this.getAllRepos()
     this.getAllEnvTemplate()
+    this.getGroup()
   },
 
   methods: {
+    getGroup() {
+      getGroup().then(res => {
+        this.groups = res.data
+      })
+    },
+
     getAllRepos() {
       getBaseRepos().then(res => {
         this.repoNamespaces = res.data.filter(item => item.type === 'base')
-        this.loading = false
       })
     },
 
@@ -112,6 +126,7 @@ export default {
     createData() {
       const param = {
         namespace: this.namespace,
+        description: this.group,
         dependant: {
           base: this.dependant.base
         }

src/views/docker/runingEnv.vue → src/views/docker/runingEnvDev.vue

@@ -81,7 +81,7 @@ export default {
       fetchKubernetesList().then(res => {
         const exculde = ['default', 'kube-system']
         this.tableData = res.data.namespaces.filter((item) => {
-          if (!exculde.includes(item.name)) {
+          if (!exculde.includes(item.name) && item.description === 'dev') {
             return item
           }
         })

src/views/docker/runingEnvTest.vue

+<template>
+  <div>
+    <div class="shadow-content">
+      <p class="warn-content">
+        <svg-icon icon-class="list"/>
+        运行环境列表
+      </p>
+      <el-table
+        :data="tableData"
+        :header-cell-style="{background:'#F3F4F7',color:'#555'}"
+        size="medium"
+        align="center"
+        style="width: 100%">
+        <el-table-column
+          :index="indexMethod"
+          type="index"/>
+        <el-table-column
+          prop="name"
+          label="名称"
+          width="100">
+          <template slot-scope="scope">
+            <span class="link-type" @click="handleDetail(scope.row.name)">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createdAt"
+          label="创建时间"
+          width="160"/>
+        <el-table-column
+          prop="status"
+          label="运行状态"
+          width="100">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatStatus }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="operation"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="syncMySQL(scope.row.name)">同步线上MySQL</el-button>
+            <el-button size="mini" type="primary" @click="syncMQ(scope.row.name)">同步线上MQ</el-button>
+            <el-button size="mini" type="primary" @click="deploy(scope.row.name)">部署应用服务</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { fetchKubernetesList } from '@/api/docker'
+
+export default {
+  data() {
+    return {
+      name: 'hello',
+      tableData: []
+    }
+  },
+  created() {
+    this.fetchK8sList()
+  },
+  methods: {
+    syncMySQL(namespace) {
+      this.$router.push({
+        path: '/dbsync',
+        query: { namespace: namespace }
+      })
+    },
+    syncMQ(namespace) {
+      this.$router.push({
+        path: `/dockers/syncMq/${namespace}`
+      })
+    },
+    deploy(namespace) {
+      this.$router.push({
+        path: `/dockers/deployEnv/${namespace}`
+      })
+    },
+    fetchK8sList() {
+      fetchKubernetesList().then(res => {
+        const exculde = ['default', 'kube-system']
+        this.tableData = res.data.namespaces.filter((item) => {
+          if (!exculde.includes(item.name) && item.description !== 'dev') {
+            return item
+          }
+        })
+      })
+    },
+    indexMethod(index) {
+      return index + 1
+    },
+    handleDetail(namespace) {
+      this.$router.push({
+        path: `/dockers/runingEnv/${namespace}`
+      })
+    },
+    handleEdit() {
+      console.log(1)
+    },
+    handleDelete() {
+      console.log(2)
+    }
+  }
+}
+</script>