样式调整
This commit is contained in:
GYYM
200
frontend/src/views/home/components/matchPopup.vue
Normal file
200
frontend/src/views/home/components/matchPopup.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<!-- 基础信息弹出框 -->
|
||||
<el-dialog :model-value="visible" title="被检监测点匹配" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
|
||||
<div>
|
||||
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
|
||||
<el-form-item label="监测点名称：" :label-width="100">
|
||||
<el-tree-select v-model="value" :data="sourcesList" style="width: 240px" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :disabled="isReadOnly">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import{ElMessage, FormInstance,FormItemRule}from'element-plus'
|
||||
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
|
||||
import { dialogSmall} from '@/utils/elementBind'
|
||||
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,sourceDataList,deviceDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
|
||||
|
||||
const value = ref()
|
||||
|
||||
const sourcesList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '高精度设备-PQV520-1',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
value: '1-1',
|
||||
label: '监测点1',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
value: '1-2',
|
||||
label: '监测点2',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '高精度设备-PQV520-2',
|
||||
children: [
|
||||
{
|
||||
value: '2-1',
|
||||
label: '监测点1',
|
||||
},
|
||||
{
|
||||
value: '2-2',
|
||||
label: '监测点2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '高精度设备-PQV520-3',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
value: '3-1',
|
||||
label: '监测点1',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
value: '3-2',
|
||||
label: '监测点2',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '高精度设备-PQV520-4',
|
||||
children: [
|
||||
{
|
||||
value: '4-1',
|
||||
label: '监测点1',
|
||||
},
|
||||
{
|
||||
value: '4-2',
|
||||
label: '监测点2',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
dialogTitle: string;
|
||||
isReadOnly: boolean,
|
||||
formData: {
|
||||
id:string;
|
||||
name: string;
|
||||
pattern: string; //模式，字典表（数字、模拟、比对）
|
||||
father_Plan_Id: string; //父计划ID
|
||||
source_Id: string;//检测源ID
|
||||
dataSource_Id: string; //数据源ID
|
||||
script_Id: string; //检测脚本ID
|
||||
error_Sys_Id: string;//误差体系ID
|
||||
device_Id: string;//被检设备ID
|
||||
test_State: string; //检测状态
|
||||
report_State: string; //报告生成状态
|
||||
result: string;//检测结果
|
||||
state: number; //状态
|
||||
|
||||
};
|
||||
}>();
|
||||
|
||||
const fatherPlanList = [
|
||||
{ label: '/', value: 'type0' },
|
||||
{ label: '检测计划1', value: 'type1' },
|
||||
{ label: '检测计划2', value: 'type2' },
|
||||
{ label: '检测计划3', value: 'type3' },
|
||||
{ label: '检测计划4', value: 'type4' },
|
||||
];
|
||||
|
||||
const sourceList = [
|
||||
{ label: '分钟统计数据最大值', value: 'type0' },
|
||||
{ label: '分钟统计数据最大值', value: 'type1' },
|
||||
{ label: '分钟统计数据CP95值', value: 'type2' },
|
||||
];
|
||||
|
||||
const scriptList = [
|
||||
{ label: '/', value: 'type0' },
|
||||
{ label: '国网入网检测脚本（单影响量-模拟式）', value: 'type1' },
|
||||
{ label: '国网入网检测脚本（Q/GDW 10650.4 - 2021) 数字式', value: 'type1' },
|
||||
];
|
||||
|
||||
const errorList = [
|
||||
{ label: 'Q/GDW 1650.2- 2016', value: 'type0' },
|
||||
{ label: 'Q/GDW 10650.2 - 2021', value: 'type1' },
|
||||
];
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'submit', data: any): void;
|
||||
}>();
|
||||
|
||||
// 定义规则
|
||||
const formRuleRef = ref<FormInstance>()
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
|
||||
source_Id: [{ required: true, message: '检测源必选！', trigger: 'blur' }],
|
||||
dataSource_Id: [{ required: true, message: '数据源必选！', trigger: 'blur' }],
|
||||
script_Id: [{ required: true, message: '检测脚本必选！', trigger: 'blur' }],
|
||||
error_Sys_Id: [{ required: true, message: '误差体系必选！', trigger: 'blur' }],
|
||||
// name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
|
||||
// father_Plan_Id: [{ required: true, message: '参照标准名称必填！', trigger: 'change' }],
|
||||
|
||||
});
|
||||
|
||||
const handleCancel = () => {
|
||||
//重置表单内容
|
||||
//取消表单校验状态
|
||||
formRuleRef.value && formRuleRef.value.resetFields()
|
||||
emit('update:visible', false); // 关闭对话框
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
|
||||
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
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
// 这里可以重置表单数据，如果需要的话
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user