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' @click="importClick">导入</el-button>
          <el-button type='primary' :icon='CirclePlus' :disabled='!(scope.selectedList.length > 1)' @click="combineClick">合并</el-button>
          <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
           批量删除
         </el-button>
         <input type="file" style="display: none" ref="fileInput" @change="handleFiles">
     </template>
      <!-- 表格操作 -->
      <template #operation='scope'>
         <!-- <el-button type='primary' link :icon='View'  @click="handleRowClick(scope.row)">查看</el-button> -->
         <el-button type='primary' link :icon='Upload' @click="exportClick">导出</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>
         <el-button type='primary' link :icon='List' @click="showtestSourceOpen(scope.row)">所属检测源</el-button>
       </template>
   </ProTable>

      <!-- 向计划导入/导出设备对话框 -->
      <planPopup     
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
       :is-read-only="isReadOnly"
      @update:visible="dialogFormVisible = $event"
    />

 </div>
 <DeviceOpen :width='viewWidth' :height='viewHeight' ref='openDeviceView' />
 <SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' />
</template>

<script setup lang="ts" name='useProTable'>
import ProTable from '@/components/ProTable/index.vue'
import TimeControl from '@/components/TimeControl/index.vue'
import type { ProTableInstance,ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View,Upload,Download,List} from '@element-plus/icons-vue'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
import { reactive,ref } from 'vue'
import type { Plan } from '@/api/plan/interface'
import planPopup from "@/views/plan/planList/components/planPopup.vue"; // 导入子组件
import DeviceOpen from '@/views/plan/planList/components/devPopup.vue'
import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue'
import { useViewSize } from '@/hooks/useViewSize'
import { useRouter } from "vue-router";
import { useDictStore } from '@/stores/modules/dict'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const dictStore = useDictStore()
// 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
const excludedUnits = ['季度','年']; // 要排除的单位
const defaultUnits = '日'; // 默认的单位
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const openDeviceView = ref()
const openSourceView = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
// const planData = planData
const dialogFormVisible = ref(false)
const dialogTitle = ref('')
const isReadOnly = ref(false)
const router = useRouter();
const dialogForm = ref<Plan.PlanBO>({
                              id: '' ,
                              name: '',
                              pattern:'',
                              father_Plan_Id:'',
                              dataSource_Id:'',
                              script_Id:'',
                              error_Sys_Id:'',
                              test_State: '',
                              report_State: '',
                              result:'',
                             
                         
});


// 表格配置项
const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
 { type: 'selection', fixed: 'left', width: 70 },
 {
   prop: 'name',
   label: '检测计划名称',
   width: 200,
 },
 {
   prop: 'dataSource_Id',
   label: '数据源名称',
   width: 200,
   enum: testSoureDataList,
   fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'script_Id',
   label: '检测脚本',
   width: 300,
   enum: testScriptDataList,
   fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'error_Sys_Id',
   label: '误差体系',
   width: 200,
   enum: testErrSystDataList,
   fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'test_State',
   label: '检测状态',
   width: 100,
   enum: dictTestState,
  //  enum: dictStore.getDictData('planTestState'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'report_State',
   label: '检测报告状态',
   width: 150,
   enum: dictReportState,
  //  enum: dictStore.getDictData('planReportState'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'result',
   label: '检测结果',
   width: 100,
   enum: dictResult,
  //  enum: dictStore.getDictData('planResult'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
 },
 {
   prop: 'father_Plan_Id',
   label: '父节点',
   width: 200,
   enum: testFatherPlanList,
   fieldNames: { label: 'label', value: 'id' },
 },
  //  {
  //   prop: 'create_Time',
  //   label: '记录时间',
  //   minWidth: 180,
  //   search: {
  //     span: 2,
  //     render: () => {
  //       return (
  //         <div class='flx-flex-start'>
  //         </div>
  //       )
  //     },
  //   },
  // },
 { prop: 'operation', label: '操作', fixed: 'right' ,width: 450, },
])


const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput
  function openFileDialog() {
  if (fileInput.value) {
    fileInput.value.click();
  }
}

function handleFiles(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = target.files;
  if (files && files.length > 0) {
    // 处理文件
    console.log(files);
    ElMessageBox.confirm(
    '导入的数据与当前数据有冲突，请选择以哪个数据为主进行覆盖',
    '数据冲突',
    {
      distinguishCancelAndClose: true,
      confirmButtonText: '以导入数据为主覆盖',
      cancelButtonText: '以当前数据为主覆盖',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'info',
        message: '以导入数据为主完成数据覆盖',
      })
    })
    .catch((action: Action) => {
      ElMessage({
        type: 'info',
        message:
          action === 'cancel'
            ? '以当前数据为主完成数据覆盖'
            : '取消本次导入操作',
      })
    })
  }
}
// 点击导入按钮
const importClick = () => {
  openFileDialog()
}
// 点击导出按钮
const exportClick = () => {
  openFileDialog()
}

// 点击合并按钮
const combineClick = () => {
  ElMessageBox.prompt(
    '请输入合并后的计划名称',
    '检测计划合并',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
    }
  )
    .then(({ value }) => {
      console.log(`合并后的计划名为:`,value)
      proTable.value?.clearSelection()
      proTable.value?.getTableList()
    })
}

// 打开编辑对话框
const openEditDialog = (planSystem: Plan.PlanBO) => {
  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: '',
      result:'',                        
  };
  dialogTitle.value = '新增检测计划';
  isReadOnly.value = false;
  dialogFormVisible.value = true; // 打开对话框
};

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

const showDeviceOpen = (planSystem: Plan.PlanBO) => {
  openDeviceView.value.open('计划设备列表')
}

const showtestSourceOpen=(planSystem: Plan.PlanBO)=>{
  openSourceView.value.open('计划检测源列表')
  // router.push({
  //   path: "/machine/testSource",
  // });
}
</script>

<style scoped>

</style>