AppConfig.vue 中添加新的 AppConfig 时, 若 RepoAuthConfig 不存在则在新的 dialog 中添加

src/views/devops/app/AppConfig.vue

@@ -309,9 +309,37 @@
                 <el-input v-model="appForm.repoBranch"></el-input>
               </el-form-item>
               <el-form-item label="仓库认证" prop="repoAuthConfigId">
-                <el-select v-model="appForm.repoAuthConfigId" placeholder="选择认证">
-                  <el-option v-for="item in repoAuthList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
+                <div style="display: flex; align-items: center;">
+                  <el-select
+                      v-model="appForm.repoAuthConfigId"
+                      placeholder="选择认证"
+                      style="flex: 1; margin-right: 10px;"
+                      clearable
+                  >
+                    <el-option
+                        v-for="item in repoAuthList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+
+                    <div slot="empty" style="text-align: center; padding: 10px 0;">
+                      <p style="margin-bottom: 10px; color: #909399; font-size: 12px;">暂无认证配置</p>
+                      <el-button type="text" size="mini" icon="el-icon-plus" @click="showAddRepoAuthDialog = true">
+                        立即添加
+                      </el-button>
+                    </div>
+                  </el-select>
+
+                  <el-button
+                      type="primary"
+                      icon="el-icon-plus"
+                      circle
+                      size="mini"
+                      @click="showAddRepoAuthDialog = true"
+                      title="添加新认证"
+                  ></el-button>
+                </div>
               </el-form-item>
             </div>
 
@@ -464,6 +492,20 @@
         </el-form>
       </template>
     </el-dialog>
+    <el-dialog title="添加仓库认证" :visible.sync="showAddRepoAuthDialog" width="400px" append-to-body>
+      <el-form :model="repoAuthForm" label-width="80px">
+        <el-form-item label="认证名称">
+          <el-input v-model="repoAuthForm.label" placeholder="如：GitLab-SSH"></el-input>
+        </el-form-item>
+        <el-form-item label="私钥/密码">
+          <el-input v-model="repoAuthForm.value" type="password"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="showAddRepoAuthDialog = false">取消</el-button>
+        <el-button type="primary" @click="handleAddRepoAuth">确定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -524,6 +566,12 @@ export default {
         dockerfile: [{ required: true, message: '请填写 Dockerfile', trigger: 'blur' }],
       },
       // **********************************************************************
+      showAddRepoAuthDialog: false,
+      repoAuthForm: {
+        appId: '',
+        domain: ''
+      },
+      // **********************************************************************
       showBindDomainDialog: false,
       domainList: [],
       showElInput: false,
@@ -968,6 +1016,9 @@ export default {
           message: '已取消'
         })
       })
+    },
+    handleAddRepoAuth() {
+      this.$message.info('add repoauth')
     }
   }
 }