ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表单验证

Browse Source
This commit is contained in:
sjl
2024-10-30 15:19:47 +08:00
parent f9bb15ad24
commit 0c2f59a0a7
21 changed files with 736 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/views/machine/errorSystem/components/ErrorStandardDialog.vue
View File

@@ -21,7 +21,7 @@
const errorData = errorDataList.errordetail
// 表格配置项
const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemDetail>[]>([
const columns = reactive<ColumnProps<ErrorSystem.Error_detail>[]>([
{
prop: 'measured',
label: '被测量',
@@ -46,8 +46,8 @@ const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemDetail>[]>([
interface SpanMethodProps {
row: ErrorSystem.ErrorSystemDetail
column: TableColumnCtx<ErrorSystem.ErrorSystemDetail>
row: ErrorSystem.Error_detail
column: TableColumnCtx<ErrorSystem.Error_detail>
rowIndex: number
columnIndex: number
}

80
frontend/src/views/machine/errorSystem/components/ErrorSystemDialog.vue
View File

@@ -3,41 +3,37 @@
<el-tabs type="border-card">
<el-tab-pane label="基础信息">
<div class="form-grid">
<el-form :model="formData" >
<el-row :gutter="160" >
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
<el-row :gutter="120" >
<el-col :span="9">
<el-form-item label="误差体系名称" prop="name">
<el-input v-model='formData.name' placeholder="标准号+年份+设备等级"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布时间" prop="publishTime">
<el-input v-model="formData.publishTime" />
<el-form-item label="参照标准名称" prop="standard_Name">
<el-input v-model='formData.standard_Name'/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="上传误差体系截图" prop="screenshot">
<el-button :icon="FolderOpened" type="primary"></el-button>
<el-form-item label="发布时间" prop="standard_Time">
<el-input v-model="formData.standard_Time" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="160" >
<el-row :gutter="120" >
<el-col :span="9">
<el-form-item label="适用设备等级" prop="level">
<el-select v-model='formData.level' placeholder="请选择设备等级">
<el-form-item label="适用设备等级" prop="dev_Level">
<el-select v-model='formData.dev_Level' placeholder="请选择设备等级">
<el-option label="A级" value="A级" />
<el-option label="S级" value="S级" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实施时间" prop="year">
<el-input v-model='formData.year'/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="状态" prop="state">
<el-select v-model='formData.state' placeholder="请选择状态">
<el-form-item label="状态" prop="enable">
<el-select v-model='formData.enable' placeholder="请选择状态">
<el-option label="启用" value="启用" />
<el-option label="停用" value="停用" />
</el-select>
@@ -148,7 +144,8 @@
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import { defineProps, defineEmits, reactive,watch,ref } from 'vue';
import{ElMessage, FormInstance,FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
@@ -157,15 +154,28 @@
dialogTitle: string;
formData: {
id:string;
name: string;
publishTime:string;
year: string;
level: string;
state: string;
id: string;//误差体系表Id
name: string;//误差体系名称
standard_Name:string;//参照标准名称
standard_Time:string;//标准推行时间
dev_Level:string;//使用设备等级
enable:number;//状态：0-不启用 1-启用
state:number;//0-删除 1-正常
};
}>();
// 定义规则
const formRuleRef = ref<FormInstance>()
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
standard_Name: [{ required: true, message: '参照标准名称必填！', trigger: 'blur' }],
standard_Time: [{ required: true, message: '标准推行时间必填！', trigger: 'blur' }],
dev_Level:[{ required: true, message: '请选择一项设备等级', trigger: 'change' },],
enable:[{ required: true, message: '请选择一项状态', trigger: 'change '},]
});
let multipleSelection = ref<number[]>([])
const errorTypeOptions = [
{ label: '绝对值-标称值', value: 'type1' },
@@ -254,12 +264,32 @@ const typeList = [
}>();
const handleCancel = () => {
//重置表单内容
//取消表单校验状态
formRuleRef.value && formRuleRef.value.resetFields()
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
//ElMessage.info('业务数据提交')
try {
formRuleRef.value?.validate((valid: boolean) => {
if (valid)
{
// 将表单数据转为json,发送到后端
let confirmFormData = JSON.parse(JSON.stringify(props.formData));
console.log(confirmFormData)
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
}
else
{
ElMessage.error('表单验证失败！')
}
})
} catch (error) {
console.error('验证过程中发生错误', error)
}
};
// 当 props.visible 改变时，更新 formData