pqs-9100_client/frontend/src/views/home/components/matchPopup.vue

<template>
    <!-- 基础信息弹出框 -->
  <el-dialog :model-value="visible" title="被检监测点匹配" v-bind="dialogSmall"  @close="handleCancel"  width="500" draggable>
     <div>
       <el-form :model="formData" ref='formRuleRef' :rules='rules' change-event="selectChange">
         <el-form-item label="监测点名称：" :label-width="100">
            <el-tree-select v-model="value1" :data="sourcesList" style="width: 240px" />
        </el-form-item>
        <el-form-item label="监测点名称：" :label-width="100">
            <el-tree-select v-model="value2" :data="sourcesList" style="width: 240px" />
        </el-form-item>
        <el-form-item label="监测点名称：" :label-width="100">
            <el-tree-select v-model="value3" :data="sourcesList" style="width: 240px" />
        </el-form-item>
        <el-form-item label="监测点名称：" :label-width="100">
            <el-tree-select v-model="value4" :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">确 定</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 selectChange = (val: any) => {
    console.log(val)
  }
const value1 = ref()
const value2 = ref()
const value3 = ref()
const value4 = ref()

const sourcesList = [
  {
    value: '1',
    label: '高精度设备-PQV520-1',
    disabled: false,
    children: [
      {
        value: '1-1',
        label: '监测点1',
        disabled: false,
      },
      {
        value: '1-2',
        label: '监测点2',
        disabled: false,
      },
    ],
  },
  {
    value: '2',
    label: '高精度设备-PQV520-2',
    disabled: false,
    children: [
      {
        value: '2-1',
        label: '监测点1',
        disabled: false,
      },
      {
        value: '2-2',
        label: '监测点2',
        disabled: false,
      },
    ],
  },
  {
    value: '3',
    label: '高精度设备-PQV520-3',
    disabled: false,
    children: [
      {
        value: '3-1',
        label: '监测点1',
        disabled: false,
      },
      {
        value: '3-2',
        label: '监测点2',
        disabled: false,
      },
    ],
  },
  {
    value: '4',
    label: '高精度设备-PQV520-4',
    disabled: false,
    children: [
      {
        value: '4-1',
        label: '监测点1',
        disabled: false,
      },
      {
        value: '4-2',
        label: '监测点2',
        disabled: false,
      },
    ],
  },
]

   const props = defineProps<{
     visible: boolean;
   }>();
 
   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>