Compiler.vue 页面使用分步表单添加编译器配置

src/api/devops.js

@@ -201,22 +201,26 @@ export function getCompilerTypes() {
   return get(devopsApi.getCompilerList + '/types')
 }
 
-export function getCompilerVersion(id) {
-  return get(devopsApi.getCompilerList + '/version?id=' + id)
-}
-
-export function addImageBind(form) {
+export function addContainerBind(form) {
   return post(devopsApi.getCompilerList + '/bind/add', form)
 }
 
-export function deleteImageBind(form) {
+export function deleteContainerBind(form) {
   return post(devopsApi.getCompilerList + '/bind/delete', form)
 }
 
-export function getImageBindList(queryInfo) {
+export function getContainerBindList(queryInfo) {
   return get(devopsApi.getCompilerList + '/bind/list', queryInfo)
 }
 
+export function getContainerEnvList(queryInfo) {
+  return get(devopsApi.getCompilerList + '/env/list', queryInfo)
+}
+
+export function getArgList(queryInfo) {
+  return get(devopsApi.getCompilerList + '/arg/list', queryInfo)
+}
+
 export function addCompiler(formData) {
   return postForm(devopsApi.getCompilerList, formData)
 }

src/views/devops/build/Compiler.vue

@@ -30,7 +30,7 @@
               size="mini"
               type="success"
               icon="el-icon-edit"
-              @click="handleShowImage(scope.$index, scope.row)"
+              @click="handleShowArg(scope.row)"
             >编辑</el-button>
           </template>
         </el-table-column>
@@ -43,7 +43,7 @@
               size="mini"
               type="success"
               icon="el-icon-edit"
-              @click="handleShowImage(scope.$index, scope.row)"
+              @click="handleShowBind(scope.row)"
             >编辑</el-button>
           </template>
         </el-table-column>
@@ -56,7 +56,7 @@
               size="mini"
               type="success"
               icon="el-icon-edit"
-              @click="handleShowImage(scope.$index, scope.row)"
+              @click="handleShowEnv(scope.row)"
             >编辑</el-button>
           </template>
         </el-table-column>
@@ -74,7 +74,7 @@
             <el-button
               size="mini"
               type="danger"
-              @click="handleEdit(scope.$index, scope.row)"
+              @click="handleEdit(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
@@ -106,7 +106,7 @@
             <el-step title="编写编译脚本" icon="el-icon-edit" />
           </el-steps>
 
-          <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+          <el-form ref="form" :model="form" :rules="dynamicRules" label-width="130px">
             <div v-show="active === 0">
               <el-form-item label="编译类型" prop="type">
                 <el-select v-model="form.type" placeholder="请选择编译类型" style="width: 100%">
@@ -119,33 +119,28 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="配置名称" prop="name">
-                <el-input v-model="form.name" placeholder="例如：Dotnet8-Standard-Build" />
+                <el-input v-model="form.name" placeholder="例如 mvn-build" />
               </el-form-item>
             </div>
 
             <div v-show="active === 1">
+              <el-form-item v-if="form.type === 'dockerBuild'" label="提示">
+                <el-input value="dockerBuild 类型可能还需要设置 dockerfile 中的参数变量" readonly />
+              </el-form-item>
               <el-form-item v-if="form.type === 'dockerRun'" label="编译镜像" prop="compilerImage">
-                <el-input v-model="form.compilerImage" placeholder="e.g. mcr.microsoft.com/dotnet/sdk:8.0" />
+                <el-input v-model="form.compilerImage" placeholder="例如 amazoncorretto:17.0.16-al2-native-jdk" />
                 <div class="form-tip">该镜像将作为构建时的 Runtime 容器</div>
-              </el-form-item>
-              <el-form-item v-if="form.type === 'shell'" label="编译主目录" prop="homePath">
-                <el-input v-model="form.homePath" placeholder="例如：/src 或 /app" />
-              </el-form-item>
-              <el-form-item v-if="form.type !== 'dockerBuild'" label="编译器版本命令" prop="versionCmd">
-                <el-input
-                  v-model="form.versionCmd"
-                  type="textarea"
-                  :autosize="{ minRows: 2 }"
-                  placeholder="例如：dotnet --version"
-                />
+                <div class="form-tip">dockerRun 类型可能还需要设置容器的环境变量和映射目录</div>
               </el-form-item>
               <el-form-item v-if="form.type !== 'dockerBuild'" label="编译命令" prop="compileCmd">
                 <el-input
                   v-model="form.compileCmd"
                   type="textarea"
                   :autosize="{ minRows: 4 }"
-                  placeholder="例如：dotnet publish -c Release -o ./publish"
+                  placeholder="例如 mvn clean package -Dmaven.test.skip"
                 />
+                <div class="form-tip">shell 类型需要使用绝对路径</div>
+                <div class="form-tip">dockerRun 类型直接使用相应命令即可</div>
               </el-form-item>
             </div>
 
@@ -158,17 +153,124 @@
         </div>
       </template>
     </el-dialog>
-    <!-- 查看 docker 目录映射对话框 -->
+    <!-- dockerfile 变量 -->
+    <el-dialog
+        title="dockerfile 变量"
+        append-to-body
+        :visible.sync="showArgDialog"
+        center
+    >
+      <template>
+        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAddArg">添加</el-button>
+        <el-table
+            :data="dockerfileArgs"
+            style="width: 100%"
+        >
+          <el-table-column
+              prop="argName"
+              label="变量名"
+          />
+          <el-table-column
+              prop="argValue"
+              label="变量值"
+          />
+          <el-table-column
+              fixed="right"
+              label="操作"
+              width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                  size="mini"
+                  type="danger"
+                  @click="onDeleteArg(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
+    <el-dialog
+        title="添加 dockerfile 变量"
+        append-to-body
+        :visible.sync="showAddArgDialog"
+        center
+    >
+      <template>
+        <el-form ref="form" :model="dockerfileArgForm" label-width="80px">
+          <el-form-item label="变量名" style="width: 70%; padding-right: 2px">
+            <el-input v-model="dockerfileArgForm.argName" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item label="变量值" style="width: 70%; padding-right: 2px">
+            <el-input v-model="dockerfileArgForm.argValue" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAddArg">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
+    <!-- 容器环境变量 -->
+    <el-dialog
+        title="容器环境变量"
+        append-to-body
+        :visible.sync="showEnvDialog"
+        center
+    >
+      <template>
+        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAddEnv">添加</el-button>
+        <el-table
+            :data="containerEnvs"
+            style="width: 100%"
+        >
+          <el-table-column
+              prop="env"
+              label="环境变量"
+          />
+          <el-table-column
+              fixed="right"
+              label="操作"
+              width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                  size="mini"
+                  type="danger"
+                  @click="onDeleteEnv(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-dialog>
     <el-dialog
-      title="docker 目录映射"
+        title="添加容器环境变量"
+        append-to-body
+        :visible.sync="showAddEnvDialog"
+        center
+    >
+      <template>
+        <el-form ref="form" :model="containerEnvForm" label-width="80px">
+          <el-form-item label="容器环境变量" style="width: 70%; padding-right: 2px">
+            <el-input v-model="containerEnvForm.env" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAddEnv">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
+    <!-- 容器目录映射 -->
+    <el-dialog
+      title="容器目录映射"
       append-to-body
-      :visible.sync="showImageDialog"
+      :visible.sync="showBindDialog"
       center
     >
       <template>
         <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAddBind">添加</el-button>
         <el-table
-          :data="dockerBinds"
+          :data="containerBinds"
           style="width: 100%"
         >
           <el-table-column
@@ -188,7 +290,7 @@
               <el-button
                 size="mini"
                 type="danger"
-                @click="onDeleteBind(scope.$index, scope.row)"
+                @click="onDeleteBind(scope.row)"
               >删除</el-button>
             </template>
           </el-table-column>
@@ -196,18 +298,18 @@
       </template>
     </el-dialog>
     <el-dialog
-      title="添加 docker 目录映射"
+      title="添加容器目录映射"
       append-to-body
       :visible.sync="showAddBindDialog"
       center
     >
       <template>
-        <el-form ref="form" :model="dockerBindForm" label-width="80px">
+        <el-form ref="form" :model="containerBindForm" label-width="80px">
           <el-form-item label="host 目录" style="width: 70%; padding-right: 2px">
-            <el-input v-model="dockerBindForm.hostPath" style="width: 70%; padding-right: 2px" />
+            <el-input v-model="containerBindForm.hostPath" style="width: 70%; padding-right: 2px" />
           </el-form-item>
           <el-form-item label="container 目录" style="width: 70%; padding-right: 2px">
-            <el-input v-model="dockerBindForm.containerPath" style="width: 70%; padding-right: 2px" />
+            <el-input v-model="containerBindForm.containerPath" style="width: 70%; padding-right: 2px" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onAddBind">确定</el-button>
@@ -215,27 +317,17 @@
         </el-form>
       </template>
     </el-dialog>
-    <el-dialog
-      :title="title"
-      append-to-body
-      :visible.sync="showVersionDialog"
-      center
-    >
-      <template>
-        <span v-html="versionResult" />
-      </template>
-    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import {
-  addCompiler, addImageBind,
+  addCompiler, addContainerBind,
   deleteCompiler,
-  deleteImageBind,
+  deleteContainerBind, getArgList,
   getCompilerList,
-  getCompilerTypes, getCompilerVersion,
-  getImageBindList
+  getCompilerTypes,
+  getContainerBindList, getContainerEnvList
 } from '@/api/devops'
 
 export default {
@@ -254,37 +346,57 @@ export default {
       dataList: [],
       // **********************************************************************
       active: 0,
-      rules: {
-        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
-        name: [{ required: true, message: '请输入配置名字', trigger: 'blur' }],
-        compilerImage: [{ required: true, message: '必须指定编译镜像', trigger: 'blur' }],
-        homePath: [{ required: true, message: '主目录不能为空', trigger: 'blur' }],
-        compileCmd: [{ required: true, message: '编译命令是核心，必须填写', trigger: 'blur' }]
-      },
       // **********************************************************************
       showAddDialog: false,
       form: {
         type: '',
         name: '',
-        homePath: '',
         compileCmd: '',
-        versionCmd: '',
         compilerImage: ''
       },
       compileTypes: [],
       // **********************************************************************
-      showImageDialog: false,
+      showArgDialog: false,
+      showAddArgDialog: false,
+      dockerfileArgs: [],
+      dockerfileArgForm: {
+        id: 0,
+        argName: '',
+        argValue: ''
+      },
+      // **********************************************************************
+      showEnvDialog: false,
+      showAddEnvDialog: false,
+      containerEnvs: [],
+      containerEnvForm: {
+        id: 0,
+        env: ''
+      },
+      // **********************************************************************
+      showBindDialog: false,
       showAddBindDialog: false,
-      dockerBinds: [],
-      dockerBindForm: {
+      containerBinds: [],
+      containerBindForm: {
         id: 0,
         hostPath: '',
         containerPath: ''
-      },
-      // **********************************************************************
-      showVersionDialog: false,
-      versionResult: '',
-      title: '编译器版本信息'
+      }
+    }
+  },
+  computed: {
+    dynamicRules() {
+      const baseRules = {
+        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+      };
+      // 根据选择的类型增加特定规则
+      if (this.form.type === 'dockerRun') {
+        baseRules.compilerImage = [{ required: true, message: 'dockerRun 类型必须指定编译使用的镜像', trigger: 'blur' }];
+      }
+      if (this.form.type === 'shell' || this.form.type === 'dockerRun') {
+        baseRules.compileCmd = [{ required: true, message: 'shell 和 dockerRun 类型必须填写编译命令', trigger: 'blur' }];
+      }
+      return baseRules;
     }
   },
   created() {
@@ -328,9 +440,7 @@ export default {
       const formData = new FormData()
       formData.append('type', this.form.type)
       formData.append('name', this.form.name)
-      formData.append('homePath', this.form.homePath)
       formData.append('compileCmd', this.form.compileCmd)
-      formData.append('versionCmd', this.form.versionCmd)
       formData.append('compilerImage', this.form.compilerImage)
       addCompiler(formData).then(resp => {
         this.$message.info(resp.msg)
@@ -374,30 +484,121 @@ export default {
         }
       })
     },
-    handleGetVersion(index, row) {
-      getCompilerVersion(row.id).then(resp => {
+    // **********************************************************************
+    handleShowArg(row) {
+      this.getArgListWrapper(row.id)
+    },
+    getArgListWrapper(id) {
+      const queryInfo = {}
+      queryInfo.id = id
+      getArgList(queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.dockerfileArgs = resp.data
+          this.showArgDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAddArg() {
+      this.showAddArgDialog = true
+    },
+    onAddArg() {
+      addContainerBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getArgListWrapper(this.dockerBindForm.id)
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showAddBindDialog = false
+        this.dockerBindForm.hostPath = ''
+        this.dockerBindForm.containerPath = ''
+      })
+    },
+    onDeleteArg(row) {
+      this.dockerBindForm.hostPath = row.hostPath
+      this.dockerBindForm.containerPath = row.containerPath
+      deleteContainerBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getArgListWrapper(this.dockerBindForm.id)
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.dockerBindForm.hostPath = ''
+        this.dockerBindForm.containerPath = ''
+      })
+    },
+    // **********************************************************************
+    handleShowEnv(row) {
+      this.getEnvListWrapper(row.id)
+    },
+    getEnvListWrapper(id) {
+      const queryInfo = {}
+      queryInfo.id = id
+      getContainerEnvList(queryInfo).then(resp => {
         if (resp.code === 0) {
-          this.versionResult = resp.data
-          this.title = row.name + ' 版本信息'
-          this.showVersionDialog = true
+          this.containerEnvs = resp.data
+          this.showEnvDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAddEnv() {
+      this.showAddEnvDialog = true
+    },
+    onAddEnv() {
+      addContainerBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getEnvListWrapper(this.dockerBindForm.id)
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showAddBindDialog = false
+        this.dockerBindForm.hostPath = ''
+        this.dockerBindForm.containerPath = ''
+      })
+    },
+    onDeleteEnv(row) {
+      this.dockerBindForm.hostPath = row.hostPath
+      this.dockerBindForm.containerPath = row.containerPath
+      deleteContainerBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getEnvListWrapper(this.dockerBindForm.id)
         } else {
           this.$message.warning(resp.msg)
         }
       }).catch(error => {
         this.$message.error(error.message)
+      }).finally(() => {
+        this.dockerBindForm.hostPath = ''
+        this.dockerBindForm.containerPath = ''
       })
     },
-    handleShowImage(index, row) {
-      this.dockerBindForm.id = row.id
-      this.getImageBindListWrapper(row.id)
+    // **********************************************************************
+    handleShowBind(row) {
+      this.getBindListWrapper(row.id)
     },
-    getImageBindListWrapper(id) {
+    getBindListWrapper(id) {
       const queryInfo = {}
       queryInfo.id = id
-      getImageBindList(queryInfo).then(resp => {
+      getContainerBindList(queryInfo).then(resp => {
         if (resp.code === 0) {
-          this.dockerBinds = resp.data
-          this.showImageDialog = true
+          this.containerBinds = resp.data
+          this.showBindDialog = true
         } else {
           this.$message.error(resp.msg)
         }
@@ -409,9 +610,9 @@ export default {
       this.showAddBindDialog = true
     },
     onAddBind() {
-      addImageBind(this.dockerBindForm).then(resp => {
+      addContainerBind(this.dockerBindForm).then(resp => {
         if (resp.code === 0) {
-          this.getImageBindListWrapper(this.dockerBindForm.id)
+          this.getBindListWrapper(this.dockerBindForm.id)
         } else {
           this.$message.warning(resp.msg)
         }
@@ -423,12 +624,12 @@ export default {
         this.dockerBindForm.containerPath = ''
       })
     },
-    onDeleteBind(index, row) {
+    onDeleteBind(row) {
       this.dockerBindForm.hostPath = row.hostPath
       this.dockerBindForm.containerPath = row.containerPath
-      deleteImageBind(this.dockerBindForm).then(resp => {
+      deleteContainerBind(this.dockerBindForm).then(resp => {
         if (resp.code === 0) {
-          this.getImageBindListWrapper(this.dockerBindForm.id)
+          this.getBindListWrapper(this.dockerBindForm.id)
         } else {
           this.$message.warning(resp.msg)
         }
@@ -439,10 +640,11 @@ export default {
         this.dockerBindForm.containerPath = ''
       })
     },
+    // **********************************************************************
     handleDetail(row) {
       this.$message.info('get ' + row.name + ' detail')
     },
-    handleEdit(index, row) {
+    handleEdit(row) {
       this.$confirm('确定要删除 ' + row.name + '?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',