添加对 CompilerConfig#compilerBinds 字段的 crud

src/api/devops.js

@@ -168,8 +168,16 @@ export function getCompilerTypes() {
   return get(devopsApi.getCompilerList + '/types')
 }
 
+export function addImageBind(form) {
+  return post(devopsApi.getCompilerList + '/bind/add', form)
+}
+
+export function deleteImageBind(form) {
+  return post(devopsApi.getCompilerList + '/bind/delete', form)
+}
+
 export function getImageBindList(queryInfo) {
-  return get(devopsApi.getCompilerList + '/bind', queryInfo)
+  return get(devopsApi.getCompilerList + '/bind/list', queryInfo)
 }
 
 export function addCompiler(formData) {

src/views/devops/build/Compiler.vue

@@ -45,8 +45,9 @@
             <el-button
               size="mini"
               type="success"
+              icon="el-icon-edit"
               @click="handleShowImage(scope.$index, scope.row)"
-            >查看</el-button>
+            >编辑</el-button>
           </template>
         </el-table-column>
         <el-table-column
@@ -124,6 +125,7 @@
       center
     >
       <template>
+        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAddBind">添加</el-button>
         <el-table
           :data="dockerBinds"
           style="width: 100%"
@@ -136,14 +138,54 @@
             prop="containerPath"
             label="container 路径"
           />
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="danger"
+                @click="onDeleteBind(scope.$index, scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </template>
     </el-dialog>
+    <el-dialog
+      title="添加 docker 目录映射"
+      append-to-body
+      :visible.sync="showAddBindDialog"
+      center
+    >
+      <template>
+        <el-form ref="form" :model="dockerBindForm" 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-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-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAddBind">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { addCompiler, deleteCompiler, getCompilerList, getCompilerTypes, getImageBindList } from '@/api/devops'
+import {
+  addCompiler, addImageBind,
+  deleteCompiler,
+  deleteImageBind,
+  getCompilerList,
+  getCompilerTypes,
+  getImageBindList
+} from '@/api/devops'
 
 export default {
   name: 'Compiler',
@@ -161,7 +203,6 @@ export default {
       dataList: [],
       // **********************************************************************
       showAddDialog: false,
-      showImageDialog: false,
       form: {
         type: 'none',
         name: '',
@@ -171,7 +212,15 @@ export default {
         compilerImage: ''
       },
       compileTypes: [],
-      dockerBinds: []
+      // **********************************************************************
+      showImageDialog: false,
+      showAddBindDialog: false,
+      dockerBinds: [],
+      dockerBindForm: {
+        id: 0,
+        hostPath: '',
+        containerPath: ''
+      }
     }
   },
   created() {
@@ -229,8 +278,12 @@ export default {
       })
     },
     handleShowImage(index, row) {
+      this.dockerBindForm.id = row.id
+      this.getImageBindListWrapper(row.id)
+    },
+    getImageBindListWrapper(id) {
       const queryInfo = {}
-      queryInfo.id = row.id
+      queryInfo.id = id
       getImageBindList(queryInfo).then(resp => {
         if (resp.code === 0) {
           this.dockerBinds = resp.data
@@ -242,6 +295,40 @@ export default {
         this.$message.error(error.message)
       })
     },
+    handleAddBind() {
+      this.showAddBindDialog = true
+    },
+    onAddBind() {
+      addImageBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getImageBindListWrapper(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 = ''
+      })
+    },
+    onDeleteBind(index, row) {
+      this.dockerBindForm.hostPath = row.hostPath
+      this.dockerBindForm.containerPath = row.containerPath
+      deleteImageBind(this.dockerBindForm).then(resp => {
+        if (resp.code === 0) {
+          this.getImageBindListWrapper(this.dockerBindForm.id)
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.dockerBindForm.hostPath = ''
+        this.dockerBindForm.containerPath = ''
+      })
+    },
     handleEdit(index, row) {
       this.$confirm('确定要删除 ' + row.name + '?', '提示', {
         confirmButtonText: '确定',