feat:http数据集参数添加校验

main
liu.shiyi 2 years ago
parent 8047055b0c
commit 99b611e7e8

@ -9,142 +9,104 @@
:before-close="handleClose"
class="bs-dialog-wrap bs-el-dialog"
>
<div class="bs-table-box">
<el-table
ref="singleTable"
:data="params"
:border="true"
align="center"
class="bs-el-table"
>
<el-empty slot="empty" />
<el-table-column
prop="name"
label="参数名称"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
class="bs-el-input"
placeholder="请输入名称"
clearable
readonly
@change="checkParamsName(scope.row)"
/>
</template>
</el-table-column>
<!-- <el-table-column
prop="type"
label="参数类型"
<el-form
ref="form"
:model="form"
:rules="formRules"
>
<div class="bs-table-box">
<el-table
ref="singleTable"
:data="form.params"
:border="true"
align="center"
width="200"
filterable
class="bs-el-table"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.type"
popper-class="bs-el-select"
class="bs-el-select"
placeholder="请选择"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.value"
:value="item.value"
<el-empty slot="empty" />
<el-table-column
prop="name"
label="参数名称"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
class="bs-el-input"
placeholder="请输入名称"
clearable
readonly
@change="checkParamsName(scope.row)"
/>
</el-select>
</template>
</el-table-column> -->
<el-table-column
prop="require"
label="是否必填"
align="center"
width="200"
filterable
>
<template slot-scope="scope">
<el-radio-group
v-model="scope.row.require"
:disabled="isUpdate"
>
<el-radio :label="1">
</el-radio>
<el-radio :label="0">
</el-radio>
</el-radio-group>
</template>
</el-table-column>
<el-table-column
prop="value"
label="参数值"
align="center"
>
<template slot-scope="scope">
<el-date-picker
v-if="scope.row.type === 'Date'"
v-model="scope.row.value"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
/>
<el-input
v-else
v-model="scope.row.value"
class="bs-el-input"
clearable
placeholder="请输入值"
/>
</template>
</el-table-column>
<el-table-column
prop="remark"
label="备注"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.remark"
clearable
class="bs-el-input"
placeholder="请输入备注"
rows="2"
:readonly="isUpdate"
maxlength="200"
/>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- label="操作"-->
<!-- width="105"-->
<!-- align="center"-->
<!-- >-->
<!-- <template slot="header">-->
<!-- <el-button-->
<!-- icon="el-icon-plus"-->
<!-- type="text"-->
<!-- class="no-border"-->
<!-- @click="addParam"-->
<!-- >-->
<!-- 添加-->
<!-- </el-button>-->
<!-- </template>-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- type="text"-->
<!-- style="color: #e47470;"-->
<!-- class="no-border"-->
<!-- @click="delRow(scope.$index)"-->
<!-- >-->
<!-- 删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</template>
</el-table-column>
<el-table-column
prop="require"
label="是否必填"
align="center"
width="200"
filterable
>
<template slot-scope="scope">
<el-radio-group
v-model="scope.row.require"
:disabled="isUpdate"
>
<el-radio :label="1">
</el-radio>
<el-radio :label="0">
</el-radio>
</el-radio-group>
</template>
</el-table-column>
<el-table-column
prop="value"
label="参数值"
align="center"
>
<template slot-scope="scope">
<el-date-picker
v-if="scope.row.type === 'Date'"
v-model="scope.row.value"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
/>
<el-form-item
v-else
:prop="'params.' + scope.$index + '.value'"
:rules="scope.row.require ?formRules.value:null"
>
<el-input
v-model="scope.row.value"
class="bs-el-input"
clearable
placeholder="请输入值"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="remark"
label="备注"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.remark"
clearable
class="bs-el-input"
placeholder="请输入备注"
rows="2"
:readonly="isUpdate"
maxlength="200"
/>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
<span
slot="footer"
class="dialog-footer"
@ -182,18 +144,23 @@ export default {
},
data () {
return {
params: [],
isUpdate: false,
dialogVisible: false
dialogVisible: false,
form: {
params: []
},
formRules: {
value: [{ required: true, message: '参数值不能为空', trigger: 'blur' }]
}
}
},
methods: {
open (isUpdate = false) {
this.$emit('getPramsList')
if (isUpdate) {
this.params = this.newParamsList
this.form.params = this.newParamsList
} else {
this.params = cloneDeep(this.paramsList)
this.form.params = cloneDeep(this.paramsList)
}
this.isUpdate = isUpdate
this.dialogVisible = true
@ -205,7 +172,7 @@ export default {
this.dialogVisible = false
},
checkParamsName (value) {
const checkList = this.params.filter(item => item.fieldName === value.name)
const checkList = this.form.params.filter(item => item.fieldName === value.name)
if (checkList.length) {
this.$message.warning('参数名称不可以与字段名相同!')
value.name = ''
@ -215,14 +182,18 @@ export default {
this.dialogVisible = false
},
confirm () {
if (!this.isUpdate) {
this.$emit('saveParams', cloneDeep(this.params))
} else {
console.log(this.params)
this.$emit('saveNewParams', cloneDeep(this.params))
}
this.$emit('getData')
this.dialogVisible = false
this.$refs.form.validate((valid) => {
if (valid) {
if (!this.isUpdate) {
this.$emit('saveParams', cloneDeep(this.form.params))
} else {
console.log(this.form.params)
this.$emit('saveNewParams', cloneDeep(this.form.params))
}
this.$emit('getData')
this.dialogVisible = false
}
})
}
}
}

Loading…
Cancel
Save