update views/devops/docker

src/router/background_devops.js

@@ -20,8 +20,9 @@ const RepoAuth = () => import('views/devops/build/RepoAuth')
 const Compiler = () => import('views/devops/build/Compiler')
 const Packer = () => import('views/devops/build/Packer')
 // docker
-const Docker = () => import('views/devops/docker/Docker')
 const DockerRegistry = () => import('views/devops/docker/DockerRegistry')
+const DockerImage = () => import('views/devops/docker/DockerImage')
+const Docker = () => import('views/devops/docker/Docker')
 // app
 const AppConfig = () => import('views/devops/app/AppConfig')
 const BuildDeploy = () => import('views/devops/app/BuildDeploy')
@@ -120,14 +121,6 @@ export default {
       component: { render: (e) => e('router-view') },
       meta: { needAuth: true, roles: ['devops_admin'] },
       children: [
-        {
-          path: '/bg/docker/container',
-          name: 'Docker',
-          title: 'Docker 容器',
-          icon: 'el-icon-user-solid',
-          component: Docker,
-          meta: { needAuth: true, roles: ['devops_admin'] }
-        },
         {
           path: '/bg/docker/registry',
           name: 'DockerRegistry',
@@ -135,6 +128,22 @@ export default {
           icon: 'el-icon-user-solid',
           component: DockerRegistry,
           meta: { needAuth: true, roles: ['devops_admin'] }
+        },
+        {
+          path: '/bg/docker/image',
+          name: 'DockerImage',
+          title: 'Docker 镜像',
+          icon: 'el-icon-user-solid',
+          component: DockerImage,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        },
+        {
+          path: '/bg/docker/container',
+          name: 'Docker',
+          title: 'Docker 容器',
+          icon: 'el-icon-user-solid',
+          component: Docker,
+          meta: { needAuth: true, roles: ['devops_admin'] }
         }
       ]
     },

src/views/devops/docker/DockerImage.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>构建依赖的 docker 镜像</h3>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="imageList"
+        border
+        height="480"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="repoTag"
+          label="镜像"
+        />
+        <el-table-column
+          prop="stage"
+          label="依赖阶段"
+        />
+        <el-table-column
+          prop="used"
+          label="使用量"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              style="margin: 5px"
+              size="mini"
+            >
+              <span>{{ scope.row.list.length }}</span>
+            </el-tag>
+            <el-button
+              style="margin: 5px"
+              size="mini"
+              type="success"
+              @click="handleShowApps(scope.$index, scope.row)"
+            >查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-main>
+
+    <el-dialog
+      title="依赖镜像的编译器或应用"
+      append-to-body
+      :visible.sync="showAppDialog"
+      center
+    >
+      <template>
+        <div v-for="(item, index) in appList" :key="index">
+          <el-col :md="4">
+            <el-tag style="margin: 5px">{{ item }}</el-tag>
+          </el-col>
+        </div>
+      </template>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { getDockerfileImageList } from '@/api/devops'
+
+export default {
+  name: 'DockerImage',
+  data() {
+    return {
+      showImageDialog: false,
+      imageList: [],
+      showAppDialog: false,
+      appList: []
+    }
+  },
+  created() {
+    document.title = 'docker 镜像列表'
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getDockerfileImageList().then(resp => {
+        if (resp.code === 0) {
+          this.imageList = resp.data
+          this.showImageDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleShowAdd() {
+      this.showAddDialog = true
+    },
+    handleShowApps(index, row) {
+      this.appList = row.list
+      this.showAppDialog = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/devops/docker/DockerRegistry.vue

@@ -4,7 +4,6 @@
       <h3>docker 仓库列表</h3>
       <el-row style="margin-top: 10px">
         <el-button type="success" size="mini" icon="el-icon-plus" @click="handleShowAdd">添加</el-button>
-        <el-button type="warning" size="mini" icon="el-icon-info" @click="handleShowImage">Dockerfile 镜像</el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -76,64 +75,11 @@
         </el-form>
       </template>
     </el-dialog>
-    <el-dialog
-      title="Dockerfile 中使用的镜像"
-      append-to-body
-      :visible.sync="showImageDialog"
-      center
-    >
-      <template>
-        <el-table
-          :data="imageList"
-          border
-          height="480"
-          style="width: 100%"
-        >
-          <el-table-column
-            prop="repoTag"
-            label="镜像"
-          />
-          <el-table-column
-            prop="used"
-            label="使用量"
-          >
-            <template slot-scope="scope">
-              <el-tag
-                style="margin: 5px"
-                size="mini"
-              >
-                <span>{{ scope.row.appList.length }}</span>
-              </el-tag>
-              <el-button
-                style="margin: 5px"
-                size="mini"
-                type="success"
-                @click="handleShowApps(scope.$index, scope.row)"
-              >查看应用</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </template>
-    </el-dialog>
-    <el-dialog
-      title="使用镜像的应用列表"
-      append-to-body
-      :visible.sync="showAppDialog"
-      center
-    >
-      <template>
-        <div v-for="(item, index) in appList" :key="index">
-          <el-col :md="4">
-            <el-tag style="margin: 5px">{{ item }}</el-tag>
-          </el-col>
-        </div>
-      </template>
-    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { addDockerRegistry, deleteDockerRegistry, getDockerfileImageList, getDockerRegistryList } from '@/api/devops'
+import { addDockerRegistry, deleteDockerRegistry, getDockerRegistryList } from '@/api/devops'
 
 export default {
   name: 'DockerRegistry',
@@ -155,12 +101,7 @@ export default {
         registryUrl: '',
         username: '',
         password: ''
-      },
-      // **********************************************************************
-      showImageDialog: false,
-      imageList: [],
-      showAppDialog: false,
-      appList: []
+      }
     }
   },
   created() {
@@ -225,22 +166,6 @@ export default {
           message: '已取消'
         })
       })
-    },
-    handleShowImage() {
-      getDockerfileImageList().then(resp => {
-        if (resp.code === 0) {
-          this.imageList = resp.data
-          this.showImageDialog = true
-        } else {
-          this.$message.error(resp.msg)
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      })
-    },
-    handleShowApps(index, row) {
-      this.appList = row.appList
-      this.showAppDialog = true
     }
   }
 }