微调

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

@@ -201,28 +201,9 @@
                     </el-form>            
                 </div>  
             </el-tab-pane>
-            <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
+
-                <div class='table-box' ref='popupBaseView'>
+            <!-- 监测点台账信息 tab pane -->
-                    <ProTable
+            <MonitorTable :MonIsShow="MonIsShow"/>
-                        ref='proTable'
-                        :columns='columns'
-                       
-                    >
-                    <!-- 表格 header 按钮 -->
-                    <template #tableHeader='scope'>
-                        <el-button type='primary' :icon='CirclePlus' >新增</el-button>
-                        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>批量删除</el-button>
-                    </template>
-                    <!-- 表格操作 -->
-                    <template #operation>
-                        <el-button type='primary' link :icon='EditPen'>复制</el-button>
-                        <el-button type='primary' link :icon='EditPen'>编辑</el-button>
-                        <el-button type='primary' link :icon='Delete'>删除</el-button>
-                    </template>
-                    </ProTable>
-                </div>
-            </el-tab-pane>
-   
         </el-tabs>
         <template #footer>
             <div >
@@ -245,9 +226,7 @@ import { useDictStore } from '@/stores/modules/dict'
 import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
 // 使用 dayjs 库格式化
 import dayjs from 'dayjs'
-import { getPqMonList } from '@/api/device/monitor'
+import MonitorTable from '@/views/machine/device/components/monitorTab.vue';
-import { type ColumnProps } from '@/components/ProTable/interface'
-import { type Monitor } from '@/api/device/interface/monitor'
 
 const MonIsShow = ref(false)
 const DevIsShow = ref(false)
@@ -452,41 +431,5 @@ const props = defineProps<{
 
 
 
-// 表格配置项
-const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: '',
-    label: '所属母线',
-    width: 200,
-  },
-  {
-    prop: '',
-    label: '被检通道',
-    width: 200,
-  },
-  {
-    prop: '',
-    label: 'PT变比',
-    width: 110,
-  },
-  {
-    prop: '',
-    label: 'CT变比',
-    width: 130,
-  },
-  {
-    prop: '',
-    label: '接线方式',
-    width: 130,
 
-  },
-  {
-    prop: '',
-    label: '谐波系统监测点ID',
-    minWidth: 250,
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
-])
 </script>

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

@@ -0,0 +1,75 @@
+<!-- components/MonitorPointTable.vue -->
+<template>
+    <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
+      <div class='table-box' ref='popupBaseView'>
+        <ProTable
+          ref='proTable'
+          :columns='columns'
+        >
+          <!-- 表格 header 按钮 -->
+          <template #tableHeader='scope'>
+            <el-button type='primary' :icon='CirclePlus'>新增</el-button>
+            <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>批量删除</el-button>
+          </template>
+          <!-- 表格操作 -->
+          <template #operation>
+            <el-button type='primary' link :icon='EditPen'>复制</el-button>
+            <el-button type='primary' link :icon='EditPen'>编辑</el-button>
+            <el-button type='primary' link :icon='Delete'>删除</el-button>
+          </template>
+        </ProTable>
+      </div>
+    </el-tab-pane>
+  </template>
+  
+  <script setup lang="ts">
+    import { ref, defineProps, reactive } from 'vue';
+    import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
+    import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue';
+    import { getPqMonList } from '@/api/device/monitor'
+    import { type ColumnProps } from '@/components/ProTable/interface'
+    import { type Monitor } from '@/api/device/interface/monitor'
+  const props = defineProps({
+    MonIsShow: Boolean,
+  });
+
+
+  // 表格配置项
+const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: '',
+    label: '所属母线',
+    width: 200,
+  },
+  {
+    prop: '',
+    label: '被检通道',
+    width: 200,
+  },
+  {
+    prop: '',
+    label: 'PT变比',
+    width: 110,
+  },
+  {
+    prop: '',
+    label: 'CT变比',
+    width: 130,
+  },
+  {
+    prop: '',
+    label: '接线方式',
+    width: 130,
+
+  },
+  {
+    prop: '',
+    label: '谐波系统监测点ID',
+    minWidth: 250,
+  },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
+])
+  </script>
+