添加表单验证

This commit is contained in:
RenCheng 2025-04-24 23:05:46 +08:00
parent fc65e1f036
commit b20314e29e
11 changed files with 153 additions and 31 deletions

View File

@ -12,13 +12,30 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="索引名称" :labelCol="labelCol" >
<a-input v-decorator="['indexName']" ></a-input>
<a-input v-decorator="['indexName',{
rules: [
{ required: true, message: '索引名称不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item label="字段" :labelCol="labelCol" >
<a-input v-decorator="['columns']" ></a-input>
<a-input v-decorator="['columns',{
rules: [
{ required: true, message: '字段名称不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item label="索引类型" >
<a-select placeholder="选择索引类型" option-filter-prop="children" size="large" v-decorator="['indexTypeCode', {}]">
<a-select placeholder="选择索引类型" option-filter-prop="children" size="large" v-decorator="['indexTypeCode', {
rules: [
{ required: true, message: '选择索引类型' },
],
validateTrigger: 'change'
}]">
<a-select-option key="0">
普通索引
</a-select-option>

View File

@ -14,19 +14,44 @@
<a-form :form="form" v-if = "models == 1">
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol" label="数据库IP" >
<a-input v-decorator="['ip']" :disabled="testConnBool"></a-input>
<a-input v-decorator="['ip',{
rules: [
{ required: true, message: '数据库IP不能为空' },
{ min: 8, max: 14, message: '长度8-14位' }
],
validateTrigger: 'change'
}]" :disabled="testConnBool"></a-input>
</a-form-item>
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol" label="端口号" >
<a-input v-decorator="['port']" :disabled="testConnBool"></a-input>
<a-input v-decorator="['port',{
rules: [
{ required: true, message: '端口号不能为空' },
{ min: 1, max: 5, message: '长度1-5位' },
{ type: 'number', message: '端口号必须为数字'}
],
validateTrigger: 'change'
}]" :disabled="testConnBool"></a-input>
</a-form-item>
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol" label="用户名" >
<a-input v-decorator="['username']" :disabled="testConnBool"></a-input>
<a-input v-decorator="['username',{
rules: [
{ required: true, message: '用户名不能为空' },
{ min: 1, max: 64, message: '长度1-64位' },
],
validateTrigger: 'change'
}]" :disabled="testConnBool"></a-input>
</a-form-item>
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol" label="密码" >
<a-input-password v-decorator="['password']" :disabled="testConnBool"></a-input-password>
<a-input-password v-decorator="['password',{
rules: [
{ required: true, message: '密码不能为空' },
{ min: 1, max: 15, message: '长度1-15位' },
],
validateTrigger: 'change'
}]" :disabled="testConnBool"></a-input-password>
</a-form-item>
<a-form-item >
<a-button type="primary" @click="testConn" style="width:100%;">测试数据库连接</a-button>

View File

@ -5,7 +5,13 @@
<a-spin :spinning="confirmLoading">
<a-form-model ref="ruleForm" :model="form" :rules="rules">
<a-form-model-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableName">
<a-input v-model="form.tableName" placeholder="请输入"></a-input>
<a-input v-model="form.tableName" placeholder="请输入" v-decorator="['tableName',{
rules: [
{ required: true, message: '表名不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]"></a-input>
</a-form-model-item>
<a-form-model-item label="去重类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duplicationType">
<a-select v-model="form.duplicationType" @change="handleChange">
@ -105,17 +111,16 @@ export default {
this.visible = true;
},
eidt(record, dataType) {
this.form = {
id: null,
tableName: record.tableName,
duplicationType: 1,
judgmentField: null
}
if (record.id) {
queryById({ id: record.id }).then(res => {
if (res.code == 200) this.form = res.result
})
} else {
this.form = {
id: null,
tableName: record.tableName,
duplicationType: 1,
judgmentField: null
}
}
this.getQuerytableColumns(dataType, record.tableName)
this.visible = true;
@ -131,7 +136,6 @@ export default {
console.log('提交', this.form)
if (!this.form.id) {
createRules(this.form).then(res => {
if (res.code === 200) {
this.$notification.success({
@ -150,7 +154,6 @@ export default {
}
})
} else {
updateRules(this.form).then(res => {
if (res.code === 200) {
this.$notification.success({

View File

@ -22,7 +22,13 @@
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="表名">
<a-input placeholder="请输入表名" v-model="queryParam.tableName" allow-clear></a-input>
<a-input placeholder="请输入表名" v-decorator="['tableName',{
rules: [
{ required: true, message: '表名不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" v-model="queryParam.tableName" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">

View File

@ -65,12 +65,14 @@ import SliceUpload from './SliceUpload'
close () {
this.$emit('close');
this.visible = false;
this.$parent.searchgetFileList();
},
handleOk () {
this.$parent.searchgetFileList();
this.close();
},
handleCancel () {
this.$parent.searchgetFileList();
this.close()
},
}

View File

@ -31,7 +31,7 @@
<span style="color:black;" v-if="text === 1">原始库</span>
<span style="color:darkorange;" v-if="text === 2">标准库</span>
<span style="color:#87d068;" v-if="text === 3">专题库</span>
<span style="color:#87d068;" v-if="text === 4">系统库</span>
<span style="color:wheat;" v-if="text === 4">系统库</span>
</template>
<template slot="backupStatus" slot-scope="text">
<span style="color:black;" v-if="text === 0">未启用</span>

View File

@ -12,11 +12,23 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="英文名称" >
<a-input v-decorator="['enName']" ></a-input>
<a-input v-decorator="['enName',{
rules: [
{ required: true, message: '英文名称不能为空' },
{ min: 1, max: 20, message: '长度1-20位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item
label="中文名称">
<a-input v-decorator="['cnName']" ></a-input>
<a-input v-decorator="['cnName',{
rules: [
{ required: true, message: '中文名称不能为空' },
{ min: 1, max: 30, message: '长度1-30位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
</a-form>
</a-spin>

View File

@ -12,11 +12,23 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="型号名称" >
<a-input v-decorator="['name']" ></a-input>
<a-input v-decorator="['name',{
rules: [
{ required: true, message: '型号名称不能为空' },
{ min: 1, max: 30, message: '长度1-30位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item
label="说明">
<a-textarea placeholder="请输入描述" :rows="3" v-decorator="['describe', {}]" />
<a-textarea placeholder="请输入描述" :rows="3" v-decorator="['describe', {
rules: [
{ required: true, message: '说明不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" />
</a-form-item>
</a-form>
</a-spin>

View File

@ -13,12 +13,23 @@
<a-form :form="form">
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol" label="舷号名称" >
<a-input v-decorator="['name']" ></a-input>
<a-input v-decorator="['name',{
rules: [
{ required: true, message: '舷号名称不能为空' },
{ min: 1, max: 30, message: '长度1-30位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item label="选择型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select show-search
placeholder="选择型号"
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['modelId', {}]">
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['modelId', {
rules: [
{ required: true, message: '选择型号' },
],
validateTrigger: 'change'
}]">
<a-select-option v-for="d in treeData" :key="d.id">
{{ d.name }}
</a-select-option>
@ -27,7 +38,13 @@
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
label="说明">
<a-textarea placeholder="请输入描述" :rows="3" v-decorator="['describe', {}]" />
<a-textarea placeholder="请输入描述" :rows="3" v-decorator="['describe', {
rules: [
{ required: true, message: '说明不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" />
</a-form-item>
</a-form>
</a-spin>

View File

@ -12,11 +12,23 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="标签名称" >
<a-input v-decorator="['tagName']" ></a-input>
<a-input v-decorator="['tagName',{
rules: [
{ required: true, message: '标签名称不能为空' },
{ min: 1, max: 30, message: '长度1-30位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
<a-form-item
label="标签说明">
<a-input v-decorator="['tagDescribe']" ></a-input>
<a-input v-decorator="['tagDescribe',{
rules: [
{ required: true, message: '说明不能为空' },
{ min: 1, max: 60, message: '长度1-60位' },
],
validateTrigger: 'change'
}]" ></a-input>
</a-form-item>
</a-form>
</a-spin>

View File

@ -12,12 +12,23 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="任务名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['name']" ></a-input>
<a-input v-decorator="['name',{
rules: [
{ required: true, message: '任务名称不能为空' },
{ min: 0, max: 30, message: '长度0-30位' }
],
validateTrigger: 'blur'
}]" ></a-input>
</a-form-item>
<a-form-item label="选择型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select show-search
placeholder="选择型号"
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['shipModelId', {}]"
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['shipModelId', {
rules: [
{ required: true, message: '必须选择型号' }
],
validateTrigger: 'blur'
}]"
@change="selectModel">
<a-select-option v-for="d in shipMode" :key="d.id">
{{ d.name }}
@ -27,7 +38,12 @@
<a-form-item label="选择舷号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select show-search
placeholder="选择舷号"
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['shipNumId', {}]">
option-filter-prop="children" :filter-option="filterOption" size="large" v-decorator="['shipNumId', {
rules: [
{ required: true, message: '必须选择舷号' }
],
validateTrigger: 'blur'
}]">
<a-select-option v-for="d in shipNum" :key="d.id">
{{ d.name }}
</a-select-option>