MachineHost.vue 中添加对阿里云 OSS bucket 的管理

src/api/devops.js

@@ -66,6 +66,14 @@ export function getMachineUsedList(machineId) {
   return get(devopsApi.getMachineList + '/app?machineId=' + machineId)
 }
 
+export function getAliyunOss() {
+  return get(devopsApi.getMachineList + '/oss/list')
+}
+
+export function addAliyunOss(payload) {
+  return postForm(devopsApi.getMachineList + '/oss/add', payload)
+}
+
 export function updateMachineEnv(payload) {
   return postForm(devopsApi.getMachineList + '/env', payload)
 }

src/views/devops/machine/MachineHost.vue

@@ -1,7 +1,8 @@
 <template>
   <el-container>
-    <el-header>
+    <el-header height="220">
       <el-row style="margin-top: 5px">
+        <h3>机器列表</h3>
         <el-select
           v-model="queryInfo.env"
           placeholder="查询条件"
@@ -15,6 +16,7 @@
             :value="item.value"
           />
         </el-select>
+        <el-button type="text" style="margin-left: 5px" @click="handleGetAliyunOss">阿里云OSS</el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -169,13 +171,105 @@
         </el-table>
       </template>
     </el-dialog>
+    <el-dialog
+      title="阿里云 OSS bucket 列表"
+      append-to-body
+      :visible.sync="showAliyunOssDialog"
+      width="50%"
+      center
+    >
+      <template>
+        <el-button type="text" style="margin-left: 5px" @click="handleAdd">添加</el-button>
+        <el-table
+          :data="aliyunOssList"
+          border
+          height="480"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="machineId"
+            label="机器 ID"
+          />
+          <el-table-column
+            prop="used"
+            label="使用量"
+          >
+            <template slot-scope="scope">
+              <el-tag disable-transitions>
+                <span>{{ scope.row.used }}</span>
+              </el-tag>
+              <el-button
+                style="margin-top: 5px; margin-left: 5px"
+                size="mini"
+                type="success"
+                @click="handleMachineUsage(scope.$index, scope.row)"
+              >查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="env"
+            label="所属环境"
+          >
+            <template slot-scope="scope">
+              <el-tag style="margin: 5px">{{ scope.row.env }}</el-tag>
+              <el-button
+                size="mini"
+                type="success"
+                @click="handleEditEnv(scope.$index, scope.row)"
+              >设置</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="180"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
+    <el-dialog
+      title="添加阿里云 OSS bucket"
+      append-to-body
+      :visible.sync="showAddDialog"
+      width="50%"
+      center
+    >
+      <template>
+        <el-form :model="addForm" label-width="80px">
+          <el-form-item label="bucket 名字" style="width: 70%; padding-right: 2px">
+            <el-input v-model="addForm.machineId" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item label="所属环境">
+            <el-select v-model="addForm.env" placeholder="选择所属环境">
+              <el-option
+                v-for="(item, index) in envList"
+                :key="index"
+                :label="item.label"
+                :value="item.label"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAdd">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import {
+  addAliyunOss,
   deleteMachine,
-  deprecateMachine,
+  deprecateMachine, getAliyunOss,
   getEnvList,
   getMachineList,
   getMachineUsedList,
@@ -205,7 +299,15 @@ export default {
       },
       envList: [],
       showUsageDialog: false,
-      machineUsedList: []
+      machineUsedList: [],
+      // **********************************************************************
+      showAliyunOssDialog: false,
+      aliyunOssList: [],
+      showAddDialog: false,
+      addForm: {
+        machineId: null,
+        env: 'prod'
+      }
     }
   },
   created() {
@@ -327,6 +429,34 @@ export default {
           message: '已取消'
         })
       })
+    },
+    handleGetAliyunOss() {
+      getAliyunOss().then(resp => {
+        if (resp.code === 0) {
+          this.aliyunOssList = resp.data
+          this.showAliyunOssDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAdd() {
+      this.showAddDialog = true
+    },
+    onAdd() {
+      const formData = new FormData()
+      formData.append('machineId', this.addForm.machineId)
+      formData.append('env', this.addForm.env)
+      addAliyunOss(formData).then(resp => {
+        this.$message.info(resp.msg)
+        this.handleGetAliyunOss()
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showAddDialog = false
+      })
     }
   }
 }