标准设备，比对模式被检设备

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

@@ -4,75 +4,189 @@
       <div class='table-box' ref='popupBaseView'>
         <ProTable
           ref='proTable'
+          :pagination="false"
+          :toolButton="false"
           :columns='columns'
-          :style="{ height: '326px',maxHeight: '400px',overflow:'hidden'}"
+          :data="tableData"
+          :style="{ height: '375px',maxHeight: '400px',overflow:'hidden'}"
         >
           <!-- 表格 header 按钮 -->
           <template #tableHeader='scope'>
-            <el-button type='primary' :icon='CirclePlus'>新增</el-button>
-            <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>删除</el-button>
+            <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')" :disabled="props.DevFormContent.importFlag == 1">新增</el-button>
+            <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                     @click='batchDelete(scope.selectedListIds)'>
+            删除
+          </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 #operation="scope">
+            <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false' :disabled="props.DevFormContent.importFlag == 1"
+                     @click="openDialog('edit', scope.row)">编辑
+            </el-button>
+            <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)' >删除
+            </el-button>
           </template>
         </ProTable>
       </div>
+       <MonitorPopup @getParameter="getParameter" ref='monitorPopup'/>
     </el-tab-pane>
   </template>
   
   <script setup lang="ts">
-    import { ref, defineProps, reactive } from 'vue';
+    import { ref, defineProps, reactive, watch } 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 { CirclePlus, Delete, EditPen, MessageBox } from '@element-plus/icons-vue';
+
+    import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
+    import { ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
     import { type Monitor } from '@/api/device/interface/monitor'
+    import { useDictStore } from '@/stores/modules/dict';
+    import { useHandleData } from '@/hooks/useHandleData';
+    import { Device } from '@/api/device/interface/device';
+    import { ElMessage, ElMessageBox } from 'element-plus';
 
   // 定义 props
-const props = defineProps<{
-  MonIsShow: boolean;
-}>();
+  const props = defineProps<{
+    MonIsShow: boolean;
+    DevFormContent:Device.ResPqDev
+  }>();
 
+ // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+  const dictStore = useDictStore()
+  const monitorPopup = ref()
+  const tableData = ref<any[]>([])
+  const title_Type = ref('add')
 
   // 表格配置项
 const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
   { type: 'index', fixed: 'left', width: 70, label: '序号' },
+   {
+    prop: 'name',
+    label: '名称',
+    width: 200,
+  },
   {
-    prop: '',
+    prop: 'busbar',
     label: '所属母线',
     width: 200,
   },
   {
-    prop: '',
-    label: '被检通道',
+    prop: 'num',
+    label: '线路号',
     width: 200,
   },
   {
-    prop: '',
+    prop: 'pt',
     label: 'PT变比',
     width: 110,
   },
   {
-    prop: '',
+    prop: 'ct',
     label: 'CT变比',
     width: 130,
   },
   {
-    prop: '',
+    prop: 'connection',
     label: '接线方式',
+    enum: dictStore.getDictData('Dev_Connect'),
+    fieldNames: {label: 'name', value: 'id'},
     width: 130,
-
   },
   {
-    prop: '',
-    label: '谐波系统监测点ID',
-    minWidth: 250,
+    prop: 'statInterval',
+    label: '统计间隔',
+    width: 130,
   },
   { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
 ])
+
+
+const emit = defineEmits(['get-parameter'])
+
+const getParameter = (data: Monitor.ResPqMon) => {
+  if (title_Type.value === 'edit') {
+    // 编辑：替换已有的数据
+    const index = tableData.value.findIndex(item => item.id === data.id)
+    if (index > -1) {
+      tableData.value = [
+        ...tableData.value.slice(0, index),
+        data,
+        ...tableData.value.slice(index + 1)
+      ]
+    }
+  } else {
+    // 新增：追加数据
+    tableData.value = [...tableData.value, data]
+    
+  }
+
+  emit('get-parameter', tableData.value)
+}
+
+
+ // 打开 drawer(新增、编辑)
+  const openDialog =  (titleType: string, row: Partial<Monitor.ResPqMon> = {}) => {
+      if(props.DevFormContent.devType == '' || props.DevFormContent.devType == undefined){
+            ElMessageBox.confirm(
+                  '请先选择被检设备类型',
+                  '提示',
+                  {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                  },
+            )
+            return
+      }
+       title_Type.value = titleType
+       monitorPopup.value?.open(titleType, row,props.DevFormContent,tableData.value)
+  }
+  
+  
+  // 批量删除监测点台账
+  const batchDelete =  (ids: string[]) => {
+      ElMessageBox.confirm(`是否批量删除监测点?`, "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        draggable: true
+      }).then(async () => {
+        tableData.value = tableData.value.filter(item => !ids.includes(item.id));
+        proTable.value?.clearSelection()
+
+      ElMessage({
+        type: "success",
+        message: `批量删除监测点成功!`
+      });
+  });
+    
+  }
+  
+  // 删除监测点台账
+const handleDelete =  (id: string) => {
+    ElMessageBox.confirm(`是否删除监测点?`, "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        draggable: true
+      }).then(async () => {
+         tableData.value = tableData.value.filter(item => item.id !== id)
+         proTable.value?.clearSelection()
+      ElMessage({
+        type: "success",
+        message: `删除监测点成功!`
+      });
+  });
+}
+
+
+watch(
+  () => props.DevFormContent.monitorList,
+  (newVal) => {
+    tableData.value = newVal|| []
+  },
+  { immediate: true }
+)
+
   </script>