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

50
frontend/src/views/machine/errorSystem/index.vue
View File

@@ -50,32 +50,36 @@ import { reactive,ref } from 'vue'
import type { ErrorSystem } from '@/api/error/interface'
import ErrorSystemDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
let multipleSelection = ref<string[]>([])
const errorData = errorDataList.errordata
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增误差体系')
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
publishTime: '',
year:'',
level:'',
state: '',
id: '',
name: '',
standard_Name:'',
standard_Time:'',
dev_Level:'',
enable:1,
state:1,
});
const detail_dialogFormVisible = ref(false)
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
const detail_dialogForm = ref<ErrorSystem.ErrorSystemDetail>({
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
measured: '',//被测量
deviceLevel: '',//检测装置级别
measurementType:'',
condition: '',//测量条件
maxErrorValue: '',//最大误差
});
// 表格配置项
const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
const columns = ref<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{
prop: 'id',
@@ -85,28 +89,29 @@ const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
{
prop: 'name',
label: '误差体系名称',
},
{
prop: 'year',
prop: 'Standard_Name',
label: '参照标准名称',
},
{
prop: 'standard_Time',
label: '标准实施年份',
width: 200,
search: { el: 'input' },
},
{
prop: 'level',
prop: 'dev_Level',
label: '适用设备等级',
width: 200,
width: 120,
search: { el: 'select', props: { filterable: true } },
},
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 400, },
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 300,},
])
// 打开编辑对话框
const openEditDialog = (errorSystem: ErrorSystem.ErrorSystemList) => {
errorSystem.publishTime ='2024'
errorSystem.state = '启用';
errorSystem.standard_Time ='2024'
dialogForm.value = {...errorSystem};
dialogTitle.value = '编辑误差体系';
dialogFormVisible.value = true; // 打开对话框
@@ -114,12 +119,13 @@ const openEditDialog = (errorSystem: ErrorSystem.ErrorSystemList) => {
const openAddDialog = () => {
dialogForm.value = {
id: '',
name: '',
publishTime: '',
year: '',
level: '',
state: '',
id: '',
name: '',
standard_Name:'',
standard_Time:'',
dev_Level:'',
enable:1,
state:1,
};
dialogTitle.value = '新增误差体系';
dialogFormVisible.value = true; // 打开对话框