vue+elementUI 表单验证校验
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 数据录入</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="">
<el-form ref="formData" :model="formData" :rules="rules">
<el-form-item required label="数据版本" prop="version" label-width="80px">
<el-input v-model="formData.version" ref="version" style="max-width: 215px;"></el-input>
</el-form-item>
<el-form-item label="重要模型" label-width="80px">
<el-select v-model="pageDataValue" @change='selectPageType'>
<el-option v-for="item in pageData" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-row :gutter="20">
<el-col :span="16" v-for="(dataType, index) in formData.selectPageData" :key="index">
<el-card shadow="hover" style="margin-top: 10px;background-color: #F2F6FC;">
<div style="line-height: 32px;color: #606266;font-size: 16px;font-weight: 600;">
{{dataType.label}}
</div>
<el-form :model="formData.selectPageData[index]" inline ref="formDataDetail">
<el-col v-for="(item1, index1) in dataType.item" :key="index1">
<div style="line-height: 32px;color: #606266;">{{item1.value}}</div>
<el-col :span="12">
<el-form-item label="准确率" size="small"
:prop="'item['+index1+'].correctRate'"
:rules="[{required: true,message:'只能输入数字'}]">
<el-input v-model="dataType.item[index1].correctRate"
type="number"
οnkeypress="return(/[\d]/g.test(String.fromCharCode(event.keyCode)))">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="召回率" size="small" :prop="'item['+index1+'].recallRate'"
:rules="[{required: true,message:'只能输入数字'}]">
<el-input v-model.number="dataType.item[index1].recallRate"></el-input>
</el-form-item>
</el-col>
</el-col>
</el-form>
</el-card>
</el-col>
</el-row>
<el-form-item style="margin-top: 10px;">
<el-button type="primary" @click="addPageData('formData')">新增数据</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import interfaceURL from '../common/interface';
import utils from '../common/utils';
import bus from '../common/bus';
export default {
name: 'dataEntry',
data: function () {
return {
pageDataValue: "pg_worth_data",
pageData: [
{
value: 'pg_worth_data',
label: '页面价值（低质）',
item: [
{
key: "cont_deadlink",
value: "内容死链",
correctRate: "",
recallRate: ""
},
{
key: "rt_deadlink",
value: "跳转死链",
correctRate: "",
recallRate: ""
},
{
key: "kw_pileup",
value: "关键词堆砌",
correctRate: "",
recallRate: ""
},
{
key: "lk_pileup",
value: "链接堆砌",
correctRate: "",
recallRate: ""
},
{
key: "sp_search",
value: "空搜索页",
correctRate: "",
recallRate: ""
},
{
key: "sp_page",
value: "空页面",
correctRate: "",
recallRate: ""
},
{
key: "qu_nonan",
value: "有无问答页",
correctRate: "",
recallRate: ""
},
{
key: "pro_non",
value: "商品卖完页",
correctRate: "",
recallRate: ""
},
]
},
{
value: 'element_data',
label: '元素提取/元素识别',
item: [
{
key: "cont",
value: "content",
correctRate: "",
recallRate: ""
},
{
key: "refer",
value: "refer",
correctRate: "",
recallRate: ""
},
{
key: "title",
value: "title",
correctRate: "",
recallRate: ""
},
{
key: "retitle",
value: "真实标题",
correctRate: "",
recallRate: ""
},
{
key: "pub_time",
value: "article-info/publish time",
correctRate: "",
recallRate: ""
},
{
key: "myops",
value: "myops",
correctRate: "",
recallRate: ""
},
{
key: "pg_turn",
value: "翻页",
correctRate: "",
recallRate: ""
},
{
key: "header",
value: "导航",
correctRate: "",
recallRate: ""
},
{
key: "footer",
value: "版权信息",
correctRate: "",
recallRate: ""
},
{
key: "footer",
value: "其他边框",
correctRate: "",
recallRate: ""
},
{
key: "share",
value: "分享块",
correctRate: "",
recallRate: ""
},
{
key: "video",
value: "视频块",
correctRate: "",
recallRate: ""
},
{
key: "link",
value: "链接块",
correctRate: "",
recallRate: ""
},
{
key: "comment",
value: "评论块",
correctRate: "",
recallRate: ""
},
]
},
{
value: 'classify_data',
label: '页面结构分类',
item: [
{
key: "article",
value: "文章页",
correctRate: "",
recallRate: ""
},
{
key: "news",
value: "新闻内容页",
correctRate: "",
recallRate: ""
},
{
key: "novel",
value: "小说内容页",
correctRate: "",
recallRate: ""
},
{
key: "blog",
value: "博客内容页",
correctRate: "",
recallRate: ""
},
{
key: "introduction",
value: "介绍页",
correctRate: "",
recallRate: ""
},
{
key: "index",
value: "索引页",
correctRate: "",
recallRate: ""
},
{
key: "qaanswer",
value: "问答页",
correctRate: "",
recallRate: ""
},
{
key: "baike",
value: "百科页",
correctRate: "",
recallRate: ""
},
{
key: "image",
value: "图片页",
correctRate: "",
recallRate: ""
},
{
key: "video",
value: "视频页",
correctRate: "",
recallRate: ""
},
{
key: "high_video",
value: "高质量视频",
correctRate: "",
recallRate: ""
},
{
key: "product_detail",
value: "商品详情页",
correctRate: "",
recallRate: ""
},
{
key: "download",
value: "下载页",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'content_data',
label: '正文提取',
item: [
{
key: "content_data",
value: "正文文字提取",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'image_data',
label: '图文提取',
item: [
{
key: "image_data",
value: "图文提取",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'sugges_data',
label: '搜索引擎',
item: [
{
key: "sugges_data",
value: "搜索引擎",
correctRate: "",
recallRate: ""
}
]
}
],
formData: {
version: "",
selectPageData: [
{
value: 'pg_worth_data',
label: '页面价值（低质）',
item: [
{
key: "cont_deadlink",
value: "内容死链",
correctRate: "",
recallRate: ""
},
{
key: "rt_deadlink",
value: "跳转死链",
correctRate: "",
recallRate: ""
},
{
key: "kw_pileup",
value: "关键词堆砌",
correctRate: "",
recallRate: ""
},
{
key: "lk_pileup",
value: "链接堆砌",
correctRate: "",
recallRate: ""
},
{
key: "sp_search",
value: "空搜索页",
correctRate: "",
recallRate: ""
},
{
key: "sp_page",
value: "空页面",
correctRate: "",
recallRate: ""
},
{
key: "qu_nonan",
value: "有无问答页",
correctRate: "",
recallRate: ""
},
{
key: "pro_non",
value: "商品卖完页",
correctRate: "",
recallRate: ""
},
]
}
],
},
rules: {
version: [
{required: true, message: '不能为空'}
]
},
}
},
methods: {
addPageData(value) {
this.$refs[value].validate((valid) => {
if (valid) {
this.$refs[value].resetFields();
const lang = localStorage.getItem("locale") ? localStorage.getItem("locale") : 'en';
let formData = this.formData.selectPageData;
let newForm = {};
let create_time = utils.timeToDateAndTime();
// 使用this.formData.version取不到绑定的值
let version = this.$refs.version.value;
newForm.lang = lang;
newForm.create_time = create_time;
newForm.version = version;
newForm.pageData = JSON.parse(JSON.stringify(formData));
let url = "";
switch (this.pageDataValue) {
case 'pg_worth_data':
url = interfaceURL.addPgworthData;
break;
case 'element_data':
url = interfaceURL.addElementData;
break;
case 'classify_data':
url = interfaceURL.addClassifyData;
break;
case 'content_data':
url = interfaceURL.addContentData;
break;
case 'image_data':
url = interfaceURL.addImageData;
break;
case 'sugges_data':
url = interfaceURL.addSuggesData;
break;
default:
break;
}
this.$axios({
method: "POST",
url: url,
data: newForm
}).then(res => {
this.$message.success('提交成功！');
// window.location.reload();
}).catch(error => {
this.$message({
showClose: true,
message: '网络正忙，保存失败！',
type: 'error'
});
});
} else {
this.$message.error("请输入数据版本信息！");
return false;
}
});
},
selectPageType(val) {
this.pageDataValue = val;
for (let i = 0; i < this.pageData.length; i++) {
if (val === this.pageData[i].value) {
let obj = JSON.parse(JSON.stringify(this.pageData[i]));
this.formData.selectPageData[0] = this.pageData[i];
}
}
console.log(this.formData.selectPageData)
console.log(this.pageData)
},
}
}
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
