feat: 策略算法模块新增算法快表格操作，回显校验 (ccf68a8a) · Commits · AI算法平台 / RuoYi-Vue-ui · GitLab

src/views/algorithm/piece/index.vue

+133 −25

Original line number	Diff line number	Diff line
		@@ -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,13 +295,21 @@ 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() {
		if(this.checkFrom(this.form.variables)){
		this.$refs["form"].validate(valid => {
		if (valid) {
		if (this.form.id != null) {
		@@ -250,6 +327,10 @@ export default {
		}
		}
		});
		}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>