feat: 策略算法模块 新增算法快表格操作，回显校验

src/views/algorithm/piece/index.vue

@@ -101,16 +101,74 @@
     />
 
     <!-- 添加或修改策略算法块对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="算法块名" prop="pieceName">
           <el-input v-model="form.pieceName" placeholder="请输入算法块名" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input v-model="form.sort" placeholder="请输入排序" />
+          <el-input-number v-model="form.sort" :min="0" :max="100"></el-input-number>
         </el-form-item>
-        <el-form-item label="算法块对应Class" prop="clazz">
-          <el-input v-model="form.clazz" placeholder="请输入算法块对应Class" />
+          <el-form-item label="算法块" prop="variables">
+            <el-table v-loading="loading" :data="form.variables" >
+              <el-table-column label="参数名称" align="center" prop="variableName"> 
+                <template slot-scope="scope">
+                  <div v-if="!scope.row.isEdit">{{ scope.row.variableName }}</div>
+                  <div v-else>
+                    <el-input v-model="scope.row.variableName"></el-input>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数唯一标识" align="center" prop="variableKey" >
+                <template slot-scope="scope">
+                  <div v-if="!scope.row.isEdit">{{ scope.row.variableKey }}</div>
+                  <div v-else>
+                    <el-input v-model="scope.row.variableKey"></el-input>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数类型" align="center" prop="variableType" >
+                <template slot-scope="scope">
+                  <el-select :disabled="!scope.row.isEdit"  v-model="scope.row.variableType" placeholder="请选择">
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="!scope.row.isEdit"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    @click="handleAlgUpdate(scope.row)"
+                    v-hasPermi="['system:base:edit']"
+                  >修改</el-button>
+                  <el-button
+                    v-if="scope.row.isEdit"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    @click="handleAlgSave(scope.row)"
+                    v-hasPermi="['system:base:edit']"
+                  >保存</el-button>
+                  <el-button
+                    v-if="scope.row.isEdit"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    @click="handleAlgDelete(scope.$index,scope.row)"
+                    v-hasPermi="['system:base:remove']"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-button style="width: 100%;" type="primary" plain @click="algAdd">+新增算法块</el-button>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -161,7 +219,17 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      options:[
+        {
+          label:'文本',
+          value:'text',
+        },
+        {
+          label:'数值',
+          value:'int',
+        },
+      ]
     };
   },
   created() {
@@ -194,7 +262,8 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null,
-        remark: null
+        remark: null,
+        variables:[]
       };
       this.resetForm("form");
     },
@@ -226,30 +295,42 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getBase(id).then(response => {
-        this.form = response.data;
+          var arr =[]
+          this.form =JSON.parse(JSON.stringify(response.data)) 
+          arr = response.data.variables
+          this.form.variables=[]
+          arr.forEach(item => {
+            item.isEdit=false
+            this.form.variables.push(item)
+          });
         this.open = true;
         this.title = "修改策略算法块";
       });
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateBase(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addBase(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+      if(this.checkFrom(this.form.variables)){
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateBase(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addBase(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
           }
-        }
-      });
+        });
+      }else{
+        this.$message.error('请保存表格内容');
+      }
+     
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -266,7 +347,34 @@ export default {
       this.download('system/base/export', {
         ...this.queryParams
       }, `base_${new Date().getTime()}.xlsx`)
-    }
+    },
+    //表格内校验
+    checkFrom(data){
+      var state=true
+      data.forEach(item=>{
+        if(item.isEdit){
+          state = false
+        }
+      })
+      return state
+    },
+    handleAlgUpdate(row) {
+        row.isEdit=true
+      },
+      handleAlgSave(row) {
+        row.isEdit=false
+      },
+      handleAlgDelete(index,row) {
+        this.form.variables.splice(index, 1)
+      },
+      algAdd(){
+        this.form.variables.push({
+          variableKey:'',
+          variableType:'',
+          variableName:'',
+          isEdit:true,
+        })
+      },
   }
 };
 </script>