pqs-9100_client/frontend/src/views/machine/device/components/monitorTab.vue

<!-- components/MonitorPointTable.vue -->
<template>
      <div class='table-box'>
        <ProTable
          ref='proTable'
          :pagination="false"
          :toolButton="false"
          :columns='columns'
          :data="tableData"
          :style="{ height: tableHeight + 'px',overflow:'hidden'}"
        >
          <!-- 表格 header 按钮 -->
          <template #tableHeader='scope'>
            <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="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'/>
  </template>
  
  <script setup lang="ts">
    import { ref, defineProps, reactive, watch } from 'vue';
    import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
    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<{
    DevFormContent:Device.ResPqDev,
    tableHeight?: number, // 接收外部传入的高度
    selectOptions: Record<string, Device.SelectOption[]>,
  }>();

 // 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: 'busbar',
    label: '所属母线',
    width: 200,
  },
  {
    prop: 'num',
    label: '线路号',
    width: 200,
  },
  {
    prop: 'pt',
    label: 'PT变比',
    width: 110,
  },
  {
    prop: 'ct',
    label: 'CT变比',
    width: 130,
  },
  {
    prop: 'connection',
    label: '接线方式',
    enum: dictStore.getDictData('Dev_Connect'),
    fieldNames: {label: 'name', value: 'id'},
    width: 130,
  },
  {
    prop: 'statInterval',
    label: '统计间隔',
    width: 130,
  },
  {
    prop: 'checkFlag',
    label: '是否参与检测',
    render: (scope: any) => {
      return scope.row.checkFlag === 1 ? '是' : '否'
    },
    width: 130,
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])


const emit = defineEmits(['get-parameter'])

const getParameter = (data: Monitor.ResPqMon) => {
  console.log('data', data)
  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,props.selectOptions)
  }
  
  
  // 批量删除监测点台账
  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()
      emit('get-parameter', tableData.value)
      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()
         emit('get-parameter', tableData.value)
      ElMessage({
        type: "success",
        message: `删除监测点成功!`
      });
  });
}


watch(
  () => props.DevFormContent.monitorList,
  (newVal) => {
    tableData.value = newVal|| []
  },
  { immediate: true }
)

  </script>