<!--接口附表参数--> <el-divider content-position="left">接口参数信息</el-divider> <el-row> <el-button style="margin:2% 3%;" type="primary" plain icon="el-icon-plus" size="mini" @click="addFrame" >新增</el-button> <div v-for="(item,index) in form.dataForm"> <el-row> <el-col :span="10"> <el-form-item label="中文名" :prop="`dataForm.${index}.csmc`" :rules="rules.csmc"> <el-input v-model="item.csmc" placeholder="请输入中文名" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="参数类型" :prop="`dataForm.${index}.cslx`" :rules="rules.cslx" > <el-select v-model="item.cslx" placeholder="请选择参数类型" clearable size="small" style="width: 100%"> <el-option v-for="dict in cslxOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> </el-select> </el-form-item> </el-col> <el-col :span="2"> <el-button style="margin-left: 25%;margin-top: 4%" type="danger" plain icon="el-icon-delete" size="mini" @click="deletecsjh(index)" >删除</el-button> </el-col> </el-row> <el-row> <el-col :span="10"> <el-form-item label="参数名" :prop="`dataForm.${index}.csbm`" :rules="rules.csbm"> <el-input v-model="item.csbm" placeholder="请输入参数名" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="参数值" :prop="`dataForm.${index}.csz`" :rules="rules.csz"> <el-input v-model="item.csz" placeholder="请输入参数值" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="10"> <el-form-item label="是否必填"> <el-radio-group v-model="item.sfbt"> <el-radio :label=0>必填</el-radio> <el-radio :label=1>不必填</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </div> </el-row>
data() { return {
// 表单参数 form: { dataForm: [], }, // 表单校验 rules: { cslx:[ { required: true, message: "参数类型不能为空", trigger: "change" } ], csmc:[ { required: true, message: "中文名不能为空", trigger: "change" } ], csbm:[ { required:true,pattern:/(^_([a-zA-Z0-9]_?)*$)|(^[a-zA-Z](_?[a-zA-Z0-9])*_?$)/, message: '格式不正确;提示:【首位可以是字母以及下划线。首位之后可以是字母,数字以及下划线。下划线后不能接下划线】', trigger: 'blur' } // { required: true, message: "参数名不能为空", trigger: "change" } ], csz:[ { required: true, message: "参数值不能为空", trigger: "change" } ], sjylx: [ { required: true, message: "数据源类型不能为空", trigger: "change" } ], sjy: [ { required: true, message: "数据源不能为空", trigger: "change" } ], jkmc: [ { required: true, message: "接口名称不能为空", trigger: "blur" } ], jkdz: [ { required: true, message: "接口地址不能为空", trigger: "blur" },{validator:validateIP, trigger: "blur"} ], },
}
}
methods: {
//添加 addFrame() { var list = { csbm: null, csmc: null, cslx: null, csz:null, sfbt: 1, }; this.form.dataForm.push(list); }, //删除 deletecsjh(index){ this.form.dataForm.splice(index,1) },
}