devopsapp/src/views/devops/docker/DockerRegistry.vue

<template>
  <el-container>
    <el-header height="220">
      <h3>docker 仓库列表</h3>
      <el-row style="margin-top: 10px">
        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleShowAdd">添加</el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        :data="dataList"
        border
        height="480"
        style="width: 100%"
      >
        <el-table-column
          prop="registryUrl"
          label="仓库地址"
        />
        <el-table-column
          prop="registryNamespace"
          label="命名空间"
        />
        <el-table-column
          prop="repoAuthName"
          label="仓库认证名"
        />
        <el-table-column
          prop="useCount"
          label="使用量"
        >
          <template slot-scope="scope">
            <el-tag disable-transitions>
              <span>{{ scope.row.useCount }}</span>
            </el-tag>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              type="success"
              @click="handleUsage(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleEdit(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
      title="添加 docker 仓库"
      append-to-body
      :visible.sync="showAddDialog"
      center
    >
      <registry-add-card
          @close="showAddDialog = false"
          @success="onAddSuccess"
      />
    </el-dialog>
  </el-container>
</template>

<script>
import RegistryAddCard from '@/components/card/RegistryAddCard.vue'
import {
  deleteDockerRegistry,
  getDockerRegistryList,
} from '@/api/devops'

export default {
  name: 'DockerRegistry',
  components: {
    RegistryAddCard
  },
  data() {
    return {
      queryInfo: {
        scope: null,
        pn: 1
      },
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      showAddDialog: false
    }
  },
  created() {
    document.title = 'docker 仓库列表'
    this.getData()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      this.dataList = []
      getDockerRegistryList(this.currentPage).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleShowAdd() {
      this.showAddDialog = true
    },
    onAddSuccess() {
      this.showAddDialog = false
    },
    handleEdit(index, row) {
      this.$confirm('确定要删除 ' + row.registryUrl + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const formData = new FormData()
        formData.append('id', row.id)
        deleteDockerRegistry(formData).then(resp => {
          this.$message.info(resp.msg)
          this.getData()
        }).catch(error => {
          this.$message.error(error.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleUsage(row) {
      this.$message.info('handleUsage')
    }
  }
}
</script>

<style>
</style>