feat: 获取部署实例list完成，部署实例详情页面框架搭建完成

src/api/deployment.js

@@ -1,3 +1,5 @@
 import axios from "@/util/request.js"
 
 export const getTotalDeployments = config => axios.get('/api/deployment/pages', config);
+export const getDeploymentsByCurrentAndSize = config => axios.get('/api/deployment/page', config);
+export const getOwnerInfo = config => axios.get('/api/deployment/owner/namespace', config);

src/assets/css/common.css

@@ -1,6 +1,6 @@
 .title {
   height: 30px;
   line-height: 30px;
-  font-size: 25px;
+  font-size: 30px;
   font-weight: bold;
 }

src/components/DeploymentDetail.vue

@@ -1,8 +1,27 @@
 <template>
   <div>
-    <div class="title">部署详情</div>
-    <el-button type="text" @click="$router.push({path: '/'})">←返回上一页</el-button>
-    {{id}}
+    <div class="title">部署实例详情
+      <el-button type="text" @click="$router.push({path: '/'})" style="vertical-align: middle">←返回上一页</el-button>
+    </div>
+    <!-- {{namespace}}:{{deployName}} -->
+    <div class="wrapper">
+      <div class="common">
+        <div class="inner-title">所属者信息</div>
+      </div>
+      <div class="common">
+        <div class="inner-title">容器信息</div>
+        {{namespace}}-----{{deployName}}
+      </div>
+      <div class="common">
+        <div class="inner-title">容器状态</div>
+      </div>
+      <div class="common">
+        <div class="inner-title">pod状态</div>
+      </div>
+      <div class="common">
+        <div class="inner-title">限额配置</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,12 +29,53 @@
 export default {
   name: 'DeploymentDetail',
   computed: {
-    id() {
-      return this.$route.query.id;
+    namespace() {
+      return this.$route.query.namespace;
+    },
+    deployName() {
+      return this.$route.query.deployName;
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.wrapper {
+  /* 声明一个容器 */
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr;
+  grid-template-areas: 'a b c c'
+                       'a b c c'
+                       'd d c c'
+                       'd d e e';
+  height: 85vh;
+  grid-gap: 12px;
+}
+.common {
+  border-radius: 5px;
+  background-color: #9fb2da;
+}
+.wrapper div:nth-child(1) {
+  grid-area: a;
+}
+.wrapper div:nth-child(2) {
+  grid-area: b;
+}
+.wrapper div:nth-child(3) {
+  grid-area: c;
+}
+.wrapper div:nth-child(4) {
+  grid-area: d;
+}
+.wrapper div:nth-child(5) {
+  grid-area: e;
+}
+.inner-title {
+  margin-top: 4px;
+  color: #000;
+  font-size: 16px;
+  text-align: center;
+  font-weight: bold;
+}
 </style>

src/util/request.js

@@ -95,7 +95,7 @@ _axios.interceptors.request.use(
     if (!token) {
       return Promise.reject({message:'未登录', hidden: true});
     }
-    // config.headers.Authorization = localStorage.getItem('token');
+    config.headers.Authorization = localStorage.getItem('token');
     return config;
   },
   (error) =>

src/views/DeploymentManage.vue

@@ -1,33 +1,147 @@
 <template>
   <div>
     <div class="title">部署管理</div>
+    <div class="body">
+      <el-table
+        :data="deployments"
+        :height="'70vh'"
+        :header-cell-style="{'text-align':'center'}"
+        :cell-style="{'text-align':'center', 'cursor': 'pointer'}"
+        :default-sort = "{prop: 'deployedTime', order: 'descending'}"
+        @row-click="viewDetails">
+        <el-table-column
+          prop="id"
+          label="ID"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="pipelineId"
+          label="流水线ID"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          label="namespace"
+          width="auto">
+          <template slot-scope="scope">
+            <el-tag>{{ scope.row.namespace }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="deployName"
+          width="auto">
+          <template slot-scope="scope">
+            <el-tag type="success">{{ scope.row.deployName }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="deployedTime"
+          label="部署时间"
+          width="250"
+          sortable>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="footer">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20]"
+        :page-size="pageSize"
+        layout="sizes, prev, pager, next"
+        :total="totalItems">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
 <script>
-import { getTotalDeployments } from '@/api/deployment'
+import { getTotalDeployments,
+         getDeploymentsByCurrentAndSize} from '@/api/deployment'
 export default {
   name: 'DeploymentManage',
   data() {
-    return {}
+    return {
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage: 1,
+      deployments: []
+    }
   },
-  mounted() {
-    const config = {
-      params: {
-        pageSize: 20
-      }
+  computed: {
+    totalItems() {
+      return this.pageSize * this.pageTotal
     }
-    getTotalDeployments(config).then(res => {
-      console.log(res);
-    })
-    .catch(err => {
-      console.log(err);
-    })
+  },
+  async mounted() {
+    await this.getTotalPages(this.pageSize);
+    await this.getDataByCurrentAndPageSize(this.currentPage, this.pageSize);
   },
   methods: {
+    getTotalPages(pageSize) {
+      const config = {
+        params: {
+          pageSize: pageSize
+        }
+      };
+      getTotalDeployments(config).then(res => {
+        this.pageTotal = res.data.data;
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    getDataByCurrentAndPageSize(current, pageSize) {
+      const config = {
+        params: {
+          pageNo: current - 1,
+          pageSize: pageSize
+        }
+      };
+      getDeploymentsByCurrentAndSize(config).then(res => {
+        this.deployments = res.data.data;
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    // 切换每页大小
+    async handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      await this.getTotalPages(this.pageSize);
+      await this.getDataByCurrentAndPageSize(this.currentPage, this.pageSize);
+    },
+    // 切换页数
+    async handleCurrentChange(val) {
+      this.currentPage = val;
+      await this.getDataByCurrentAndPageSize(this.currentPage, this.pageSize);
+    },
+    // 查看详情
+    viewDetails(row) {
+      console.log(row, row.deployName, row.namespace);
+      this.$router.push({
+        path: '/deploymentDetail',
+        query: {
+          namespace: row.namespace,
+          deployName: row.deployName
+        }
+      })
+    }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.body {
+  width: 80%;
+  height: 70vh;
+  margin: 0 auto;
+}
+.footer {
+  width: 80%;
+  margin: 0 auto;
+}
+.el-pagination {
+  text-align: center;
+}
 </style>