test-scheduler/ui/src/components/env_component/api_param.vue

   1 <template>
   2     <div class="row">
   3          <div class="form-group">
   4             <label class="col-lg-3 control-label">Params</label>
   5             <div class="col-lg-2">
   6                 <button type="button" class="btn btn-primary btn-sm" v-on:click="addNewParam()">New</button>
   7             </div>
   8          </div>
   9          <div class="form-group">
  10             <div class="col-lg-offset-2 col-lg-8">
  11                 <div class="table-responsive">
  12                  <table class="table table-bordered text-center">
  13                     <thead>
  14                         <tr>
  15                             <th>name</th>
  16                             <th class="text-center">description</th>
  17                             <th class="text-center">operation</th>
  18                         </tr>
  19                     </thead>
  20                     <tbody>
  21                         <tr v-for="param in params">
  22                             <td><input type="text" class="form-control text-center" style="border: 0px" v-model="param['name']"></td>
  23                             <td><input type="text" class="form-control text-center" style="border: 0px" v-bind:title="param['description']" v-model="param['description']"></td>
  24                             <td>
  25                                 <button type="button" class="btn btn-white" v-on:click="deleteParam(param['name'])">
  26                                     <i class="fa fa-trash"></i>
  27                                 </button>
  28                             </td>
  29                         </tr>
  30                     </tbody>
  31                  </table>
  32                 </div>
  33              </div>
  34           </div>
  35      </div>
  36 </template>
  37 <script>
  38 export default {
  39     props: ["params"],
  40     data: function() {
  41         return {
  42             paramArr: this.params
  43         }
  44     },
  45     watch: {
  46         paramArr: function(){
  47             this.$emit("params", this.paramArr);
  48         }
  49     },
  50     methods: {
  51         addNewParam: function() {
  52             this.params.push({'name': '', 'description': ''});
  53         },
  54         deleteParam: function(paramName) {
  55             for(var i = 0;i < this.params.length; i++) {
  56                 if(paramName == this.params[i]['name']) {
  57                     this.params.splice(i, 1);
  58                 }
  59             }
  60         }
  61     }
  62 }
  63 </script>