被检设备PTCT

frontend/src/views/machine/device/components/monitorPopup.vue

@@ -32,25 +32,45 @@
                         />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="PT变比" prop="pt">
-                    <el-select v-model="formContent.pt" clearable placeholder="请选择PT变比" filterable allow-create>
-                        <el-option
-                            v-for="item in selectOptions['pt']"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
+                    <el-form-item label="PT变比" required>
+                    <div class="ratio-input-group">
+                        <el-form-item prop="ptPrimary" class="ratio-form-item">
+                            <el-input 
+                                v-model="ptPrimary" 
+                                placeholder="一次侧"
+                                @input="handlePtInput"
+                            />
+                        </el-form-item>
+                        <span class="colon">:</span>
+                        <el-form-item prop="ptSecondary" class="ratio-form-item">
+                            <el-input 
+                                v-model="ptSecondary" 
+                                placeholder="二次侧"
+                                @input="handlePtInput"
+                            />
+                        </el-form-item>
+                    </div>
                 </el-form-item>
-                <el-form-item label="CT变比" prop="ct">
-                    <el-select v-model="formContent.ct" clearable placeholder="请选择CT变比" filterable allow-create>
-                        <el-option
-                            v-for="item in selectOptions['ct']"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
+                
+                <!-- 修改CT变比部分 -->
+                <el-form-item label="CT变比" required>
+                    <div class="ratio-input-group">
+                        <el-form-item prop="ctPrimary" class="ratio-form-item">
+                            <el-input 
+                                v-model="ctPrimary" 
+                                placeholder="一次侧"
+                                @input="handleCtInput"
+                            />
+                        </el-form-item>
+                        <span class="colon">:</span>
+                        <el-form-item prop="ctSecondary" class="ratio-form-item">
+                            <el-input 
+                                v-model="ctSecondary" 
+                                placeholder="二次侧"
+                                @input="handleCtInput"
+                            />
+                        </el-form-item>
+                    </div>
                 </el-form-item>
                 <el-form-item label="接线方式" prop="connection">
                     <el-select v-model="formContent.connection" clearable placeholder="请选择接线方式">
@@ -94,7 +114,7 @@
 
 <script lang="ts" setup>
 import { ElMessage, type FormItemRule } from 'element-plus'
-import { computed, ref, Ref } from 'vue'
+import { computed, ref, Ref, watch } from 'vue'
 import { type Monitor } from '@/api/device/interface/monitor'
 import { dialogMiddle } from '@/utils/elementBind'
 import { useDictStore } from '@/stores/modules/dict'
@@ -106,6 +126,13 @@ const lineNum = ref<{ id: number; name: string }[]>([])
 const originalNum = ref<number | null>(null) // 存储编辑前的 num 值
 const monitorTable = ref<any[]>()
 const selectOptions = ref<Record<string, Device.SelectOption[]>>({})
+
+// 新增用于PT/CT变比的临时字段
+const ptPrimary = ref<string>('')
+const ptSecondary = ref<string>('')
+const ctPrimary = ref<string>('')
+const ctSecondary = ref<string>('')
+
 // 定义弹出组件元信息
 const dialogFormRef = ref()
 function useMetaInfo() {
@@ -160,25 +187,85 @@ const close = () => {
 const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
     name: [{ required: true, message: '监测点名称必填！', trigger: 'blur' }],
     num: [{ required: true, message: '线路号必选', trigger: 'change' }],
-    pt: [
-        { required: true, message: 'PT变比必选！', trigger: 'blur' },
-        { pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'PT变比格式应为 n:n 形式，例如 1:1', trigger: 'change' }
-    ],
-    ct: [
-        { required: true, message: 'CT变比必选！', trigger: 'blur' },
-        { pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'CT变比格式应为 n:n 形式，例如 1:1', trigger: 'change' }
-    ],
     connection: [{ required: true, message: '接线方式必选！', trigger: 'change' }],
     busbar: [{ required: true, message: '所属母线必选！', trigger: 'change' }],
     // harmSysId : [{ required: true, message: '谐波系统检测点id必填！', trigger: 'blur' }],
     checkFlag: [{ required: true, message: '是否参与检测必选！', trigger: 'change' }]
 })
 
+// 处理PT输入变化并更新formContent中的值
+const handlePtInput = () => {
+    if (ptPrimary.value && ptSecondary.value) {
+        formContent.value.pt = `${ptPrimary.value}:${ptSecondary.value}`
+    } else {
+        formContent.value.pt = ''
+    }
+}
+
+// 处理CT输入变化并更新formContent中的值
+const handleCtInput = () => {
+    if (ctPrimary.value && ctSecondary.value) {
+        formContent.value.ct = `${ctPrimary.value}:${ctSecondary.value}`
+    } else {
+        formContent.value.ct = ''
+    }
+}
+
+
+// 添加一个用于手动验证的引用
+const extraFormRules = ref({
+  ptPrimary: [
+    { required: true, message: 'PT变比一次侧必填！', trigger: 'blur' },
+    { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
+  ],
+  ptSecondary: [
+    { required: true, message: 'PT变比二次侧必填！', trigger: 'blur' },
+    { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
+  ],
+  ctPrimary: [
+    { required: true, message: 'CT变比一次侧必填！', trigger: 'blur' },
+    { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
+  ],
+  ctSecondary: [
+    { required: true, message: 'CT变比二次侧必填！', trigger: 'blur' },
+    { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
+  ]
+})
+
 // 保存数据
 const save = () => {
     try {
         dialogFormRef.value?.validate(async (valid: boolean) => {
             if (valid) {
+                // 手动验证额外的字段
+                        let extraValid = true;
+                        const fieldsToValidate = ['ptPrimary', 'ptSecondary', 'ctPrimary', 'ctSecondary'];
+                        
+                        for (const field of fieldsToValidate) {
+                        const value = eval(field); // 获取对应字段的值
+                        const rules = extraFormRules.value[field];
+                        
+                        for (const rule of rules) {
+                            if (rule.required && !value.value) {
+                            ElMessage.error({ message: rule.message as string });
+                            extraValid = false;
+                            break;
+                            }
+                            
+                            if (rule.pattern && value.value && !rule.pattern.test(value.value)) {
+                            ElMessage.error({ message: rule.message as string });
+                            extraValid = false;
+                            break;
+                            }
+                        }
+                        
+                        if (!extraValid) break;
+                        }
+                        
+                        if (!extraValid) {
+                        return;
+                        }
+
                 // 校验名称是否重复
                 const isNameDuplicate = monitorTable.value.some(
                     item => item.name === formContent.value.name && item.id !== formContent.value.id
@@ -230,6 +317,20 @@ const open = async (sign: string, data: Monitor.ResPqMon, device: Device.ResPqDe
     if (sign == 'edit') {
         formContent.value = { ...data }
         originalNum.value = data.num // 记录原始线路号
+
+        // 解析PT变比
+        if (data.pt) {
+            const [primary, secondary] = data.pt.split(':')
+            ptPrimary.value = primary
+            ptSecondary.value = secondary
+        }
+        
+        // 解析CT变比
+        if (data.ct) {
+            const [primary, secondary] = data.ct.split(':')
+            ctPrimary.value = primary
+            ctSecondary.value = secondary
+        }
     } else {
         resetFormContent()
         originalNum.value = null
@@ -261,4 +362,20 @@ const handleMonNumChange = (value: string) => {
 defineExpose({ open })
 </script>
 
-<style scoped></style>
+<style scoped>
+.ratio-input-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ratio-form-item {
+  flex: 1;
+  margin-bottom: 0 !important;
+}
+
+.colon {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>