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

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