|
|
@@ -0,0 +1,335 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-header height="220">
|
|
|
+ <el-row style="margin-top: 5px">
|
|
|
+ <h3>阿里云 OSS bucket 列表</h3>
|
|
|
+ <el-button type="text" style="margin-left: 5px" @click="handleAdd">添加</el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <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>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @prev-click="handleCurrentChange"
|
|
|
+ @next-click="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ <!-- 修改所属环境对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showEditEnvDialog"
|
|
|
+ width="30%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>修改机器所属环境</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateEnv">更新</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-select v-model="form.env" placeholder="设置环境">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in envList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ title="机器中部署的应用"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showUsageDialog"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <el-table
|
|
|
+ :data="machineUsedList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="label"
|
|
|
+ label="应用 ID"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="value"
|
|
|
+ label="应用名"
|
|
|
+ />
|
|
|
+ </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,
|
|
|
+ getAliyunOss,
|
|
|
+ getEnvList,
|
|
|
+ getMachineUsedList,
|
|
|
+ updateMachineEnv
|
|
|
+} from '@/api/devops'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AliyunOss',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryInfo: {
|
|
|
+ pn: 1,
|
|
|
+ env: null
|
|
|
+ },
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ nextId: 0,
|
|
|
+ // **********************************************************************
|
|
|
+ showEditEnvDialog: false,
|
|
|
+ form: {
|
|
|
+ machineId: null,
|
|
|
+ env: null
|
|
|
+ },
|
|
|
+ envList: [],
|
|
|
+ showUsageDialog: false,
|
|
|
+ machineUsedList: [],
|
|
|
+ // **********************************************************************
|
|
|
+ aliyunOssList: [],
|
|
|
+ showAddDialog: false,
|
|
|
+ addForm: {
|
|
|
+ machineId: null,
|
|
|
+ env: 'prod'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ getEnvList().then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.queryInfo.env = resp.data.userEnv
|
|
|
+ this.envList = resp.data.envList
|
|
|
+
|
|
|
+ const env = this.$route.query.env
|
|
|
+ if (env !== undefined && env !== null) {
|
|
|
+ this.queryInfo.env = env
|
|
|
+ }
|
|
|
+ const pageNumber = this.$route.query.pn
|
|
|
+ if (pageNumber !== undefined && pageNumber !== null) {
|
|
|
+ this.currentPage = parseInt(pageNumber)
|
|
|
+ this.queryInfo.pn = parseInt(pageNumber)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+ } else {
|
|
|
+ this.$message.error(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+
|
|
|
+ document.title = '阿里云 OSS bucket 列表'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(pageNumber) {
|
|
|
+ this.queryInfo.pn = pageNumber
|
|
|
+ this.$router.push({
|
|
|
+ path: '/bg/machine/host',
|
|
|
+ query: this.queryInfo
|
|
|
+ })
|
|
|
+ this.getData()
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.aliyunOssList = []
|
|
|
+ getAliyunOss().then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.aliyunOssList = resp.data
|
|
|
+ } else {
|
|
|
+ this.$message.error(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEditEnv(index, row) {
|
|
|
+ this.form.machineId = row.machineId
|
|
|
+ this.form.env = this.queryInfo.env
|
|
|
+ this.showEditEnvDialog = true
|
|
|
+ },
|
|
|
+ onUpdateEnv() {
|
|
|
+ this.showEditEnvDialog = false
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('machineId', this.form.machineId)
|
|
|
+ formData.append('env', this.form.env)
|
|
|
+ updateMachineEnv(formData).then(resp => {
|
|
|
+ this.getData()
|
|
|
+ this.$message.info(resp.msg)
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMachineUsage(index, row) {
|
|
|
+ this.form.machineId = row.machineId
|
|
|
+ getMachineUsedList(row.machineId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.showUsageDialog = true
|
|
|
+ this.machineUsedList = resp.data
|
|
|
+ } else {
|
|
|
+ this.$message.error(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelectChange() {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.queryInfo.pn = 1
|
|
|
+ this.$router.push({
|
|
|
+ path: '/bg/machine/host',
|
|
|
+ query: this.queryInfo
|
|
|
+ })
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ this.$confirm('确定要删除 ' + row.machineIpv4 + '?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('machineId', row.machineId)
|
|
|
+ deleteMachine(formData).then(resp => {
|
|
|
+ this.$message.info(resp.msg)
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleGetAliyunOss() {
|
|
|
+ getAliyunOss().then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.aliyunOssList = resp.data
|
|
|
+ } 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|
