pqs-9100_client/frontend/src/views/plan/planList/index.vue

<template>
  <div class='table-box' ref='popupBaseView'>
   <ProTable
     ref='proTable'
     :columns='columns'
     :data='planData'
   >
     <!-- 表格 header 按钮 -->
     <template #tableHeader='scope'>
          <el-button type='primary' :icon='Download' >导入</el-button>
          <el-button type='primary' :icon='CirclePlus' >合并</el-button>
          <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
           批量删除
         </el-button>
     </template>
      <!-- 表格操作 -->
      <template #operation='scope'>
         <el-button type='primary' link :icon='View'  @click="handleRowClick(scope.row)">查看</el-button>
         <el-button type='primary' link :icon='Upload'>导出</el-button>
         <el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
         <el-button type='primary' link :icon='Delete' >删除</el-button>
         <el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">设备</el-button>
       </template>
   </ProTable>

      <!-- 新增/编辑误差体系对话框 -->
      <PlanDialog     
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
       :is-read-only="isReadOnly"
      @update:visible="dialogFormVisible = $event"
    />

 </div>
 <open :width='viewWidth' :height='viewHeight' ref='openView' />
</template>

<script setup lang="ts" name='useProTable'>
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View,Upload,Download,List} from '@element-plus/icons-vue'
import planDataList from '@/api/plan/planData'
import { reactive,ref } from 'vue'
import type { Plan } from '@/api/plan/interface'
import PlanDialog from "@/views/plan/planList/components/PlanDialog.vue"; // 导入子组件
import Open from '@/views/plan/planList/components/PlanOpen.vue'
import { useViewSize } from '@/hooks/useViewSize'

const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const openView = ref()
const planData = planDataList
const dialogFormVisible = ref(false)
const dialogTitle = ref('')
const isReadOnly = ref(false)
const dialogForm = ref<Plan.PlanList>({
                              id: '',
                              name: '',
                              pattern:'',
                              father_Plan_Id:'',
                              dataSource_Id:'',
                              script_Id:'',
                              error_Sys_Id:'',
                              test_State: '',
                              report_State: '',
                              state:0,
                              result:'',
                             
                         
});


// 表格配置项
const columns = reactive<ColumnProps<Plan.PlanList>[]>([
 { type: 'selection', fixed: 'left', width: 70 },
 {
   prop: 'name',
   label: '检测计划名称',
   width: 200,
 },
 {
   prop: 'dataSource_Id',
   label: '数据源名称',
   width: 200,
 },
 {
   prop: 'script_Id',
   label: '检测脚本',
   width: 300,
 },
 {
   prop: 'error_Sys_Id',
   label: '误差体系',
   width: 200,
 },
 {
   prop: 'test_State',
   label: '检测状态',
   width: 100,
   search: { el: 'select', props: { filterable: true } },
 },
 {
   prop: 'report_State',
   label: '检测报告状态',
   width: 150,
   search: { el: 'select', props: { filterable: true } },
 },
 {
   prop: 'result',
   label: '检测结果',
   width: 100,
   search: { el: 'select', props: { filterable: true } },
 },
 {
   prop: 'father_Plan_Id',
   label: '父节点',
   width: 200,
 },
 { prop: 'operation', label: '操作', fixed: 'right' ,width: 350, },
])

// 打开编辑对话框
const openEditDialog = (planSystem: Plan.PlanList) => {
  dialogForm.value = {...planSystem};
  dialogTitle.value = '编辑检测计划';
  isReadOnly.value = false;
  dialogFormVisible.value = true; // 打开对话框
};

const openAddDialog = () => {
  dialogForm.value = {
      id: '',
      name: '',
      pattern:'',
      father_Plan_Id:'',
      dataSource_Id:'',
      script_Id:'',
      error_Sys_Id:'',
      test_State: '',
      report_State: '',
      state:0,
      result:'',                        
  };
  dialogTitle.value = '新增检测计划';
  isReadOnly.value = false;
  dialogFormVisible.value = true; // 打开对话框
};

const handleRowClick = (planSystem: Plan.PlanList) =>{
  dialogForm.value = {...planSystem};
  dialogTitle.value = '查看检测计划';
  isReadOnly.value = true;
  dialogFormVisible.value = true; // 打开对话框
}

const showDeviceOpen = (planSystem: Plan.PlanList) => {
  openView.value.open('设备列表')
}
</script>

<style scoped>

</style>