devopsapp/src/components/card/AliyunAddCard.vue

<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="仓库认证" prop="repoAuthName">
        <el-row :gutter="10">
          <el-col :span="14">
            <el-select
              v-model="form.repoAuthName"
              placeholder="请选择仓库认证"
              style="width: 100%"
              :disabled="repoAuthNames.length === 0"
            >
              <el-option
                v-for="(item, index) in repoAuthNames"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button
              type="text"
              icon="el-icon-plus"
              @click="handleAddRepoAuth"
            >
              {{ repoAuthNames.length === 0 ? '暂无数据，去添加' : '新增认证' }}
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="OSS 地址">
        <el-input v-model="form.endpoint" style="width: 70%" placeholder="e.g. registry.cn-hangzhou.aliyuncs.com" />
      </el-form-item>
      <el-form-item label="OSS 名字">
        <el-input v-model="form.name" style="width: 70%" placeholder="e.g. reghao/" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddOss">确定</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="添加仓库认证"
      :visible.sync="showAddRepoAuthDialog"
      width="650px"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <repo-auth-add-card
        @close="showAddRepoAuthDialog = false"
        @success="handleAddRepoAuthSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
import RepoAuthAddCard from "@/components/card/RepoAuthAddCard.vue";
import {addAliyunKey, getRepoAuthNames} from "@/api/devops";

export default {
  name: 'AliyunAddCard',
  components: {RepoAuthAddCard},
  data() {
    return {
      loading: false,
      active: 0,
      repoAuthNames: [],
      form: {
        repoAuthName: '',
        endpoint: '',
        name: ''
      },
      showAddRepoAuthDialog: false
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 1. 初始化数据：从后端获取下拉框选项
    async initData() {
      this.loading = true
      try {
        // 这里替换为你真实的 API 调用
        const [resp] = await Promise.all([getRepoAuthNames()])
        this.repoAuthNames = resp.data
      } catch (error) {
        this.$message.error('获取配置选项失败')
      } finally {
        this.loading = false
      }
    },
    async onAddOss() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addAliyunKey(this.form).then(resp => {
            if (resp.code === 0) {
              this.$emit('success', resp)
            } else {
              this.$message.warning(resp.msg)
              this.$emit('fail', resp)
            }
          }).catch(error => {
            this.$message.error(error.message)
            this.$emit('error', error)
          })
        } else {
          return false
        }
      })
    },
    async handleAddRepoAuth() {
      this.showAddRepoAuthDialog = true
    },
    handleAddRepoAuthSuccess() {
      this.showAddRepoAuthDialog = false
      getRepoAuthNames().then(resp => {
        if (resp.code === 0) {
          this.repoAuthNames = resp.data
        } else {
          this.$message.info(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style scoped>
.repo-auth-container {
  padding: 10px 20px;
}
.step-content {
  min-height: 240px;
  margin-top: 20px;
}
.dialog-footer {
  text-align: right;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #f2f6fc;
}
.none-tip {
  padding-top: 40px;
}

::v-deep .el-textarea__inner {
  font-family: 'Fira Code', 'Courier New', monospace;
  background-color: #fcfcfc;
  font-size: 13px;
}
</style>