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

<template>
  <div class='table-box' ref='popupBaseView'>
    <ProTable
        ref='proTable'
        :columns='columns'
        :request-api='getTableList'
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader='scope'>
        <el-button type='primary' :icon='Download' @click='importClick'>导入</el-button>
        <el-button type='primary' :icon='Upload' @click='exportClick'>导出</el-button>
        <el-button type='primary' :icon='ScaleToOriginal' :disabled='!(scope.selectedList.length > 1)' @click='combineClick'>
          合并
        </el-button>
        <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
          删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation='scope'>
        <el-button type='primary' link :icon='EditPen' @click="openDialog('edit',scope.row)">编辑</el-button>
        <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
        <el-button type='primary' link :icon='List' @click='showDeviceOpen(scope.row)'>设备绑定</el-button>
      </template>
    </ProTable>
  </div>

    <!-- 向计划导入/导出设备对话框 -->
    <PlanPopup :refresh-table='proTable?.getTableList' ref='planPopup'/>
    <!-- 查看误差体系详细信息 -->
    <ErrorStandardDialog :refresh-table='proTable?.getTableList' ref="errorStandardPopup"/>

    <DevTransfer :refresh-table='proTable?.getTableList' ref='devTransferPopup'/>

</template>

<script setup lang='tsx' name='useProTable'>
import ProTable from '@/components/ProTable/index.vue'
import type { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { ScaleToOriginal, CirclePlus, Delete, EditPen, View, Upload, Download, List, Tools } from '@element-plus/icons-vue'
import {getPlanList,deletePlan } from '@/api/plan/plan.ts'
import { computed, onMounted, 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 DevTransfer from './components/devTransfer.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'
import type { ErrorSystem } from '@/api/error/interface'
import ErrorStandardDialog from '@/views/machine/errorSystem/components/errorStandardPopup.vue' // 导入子组件
import TestSourcePopup from '@/views/machine/testSource/components/testSourcePopup.vue' // 导入子组件
import { type TestSource } from '@/api/device/interface/testSource'
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
import { useHandleData } from '@/hooks/useHandleData'

const dictStore = useDictStore()
const openDeviceView = ref()
const openSourceView = ref()
const devTransferVisible = ref(false)
const sourceTransferVisible = ref(false)
// ProTable 实例
const proTable = ref<ProTableInstance>()
const errorStandardPopup = ref()
const planPopup = ref()
const devTransferPopup = ref()
const modeStore = useModeStore();
const fileInput = ref<HTMLInputElement | null>(null) // 声明 fileInput

const getTableList = async(params: any) => {
  let newParams = JSON.parse(JSON.stringify(params))
  const patternId   = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id//获取数据字典中对应的id
  newParams.pattern = patternId

  return getPlanList(newParams)
}


const dataSourceType = computed(() => {
      switch (modeStore.currentMode) {
        case '模拟式':
          return 'Datasource_Simulate'
        case '数字式':
          return 'Datasource_Digital'
        default:
          return 'Datasource_Contrast'
      }
    })

// 表格配置项
const columns = reactive<ColumnProps<Plan.ReqPlan>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '名称',
    width: 220,
    search: { el: 'input' },
  },
  {
    prop: 'sourceName',
    label: '检测源',
    minWidth: 480,
    render: scope => {
      return (
          <div class='flx-flex-start'>
            <el-link type='primary' link onClick={() => showTestSource(scope.row.sourceName)}>
              {scope.row.sourceName}
            </el-link>
            <moreButtons   isShow={isVisible(scope.row)} ></moreButtons>
          </div> 
      )
    },
  },
  {
    prop: 'scriptId',
    label: '检测脚本',
    width: 360,
    render: scope => {
      return (
          <el-link type='primary' link onClick={() => showTestScript(scope.row.scriptId)}>
            {scope.row.scriptName}
          </el-link>
      )
    },
  },
  {
    prop: 'errorSysId',
    label: '误差体系',
    width: 200,
    render: scope => {
      return (
          <el-link type='primary' link onClick={() => showData(scope.row.errorSysId || '')}>
            {scope.row.errorSysName}
          </el-link>
      )
    },
  },
  {
    prop: 'datasourceIds',
    label: '数据源',
    enum: dictStore.getDictData(dataSourceType.value),
    fieldNames: { label: 'name', value: 'value' },
    minWidth: 250,
    render: (scope) => {
      const codes = scope.row.datasourceIds // 获取当前行的 datasourceIds 字段
      if (!codes) {
        return '/'
      }
      // 确保 codes 是一个字符串
      const codeString = Array.isArray(codes) ? codes.join(',') : codes
      const codeArray = codeString.split(',')
      if (codeArray.length > 1) {
        // 查找与每个 code 值匹配的 name，然后拼接成逗号分割的字符串
        const names = codeArray.map(code => {
          const dictItem = dictStore.getDictData(dataSourceType.value).find(item => item.value === code)
          return dictItem ? dictItem.name : '/' // 如果找到匹配的项，返回对应的 name
        })
        return names.join(', ') // 用逗号连接所有的 name
      }
      // 查找单个 code 对应的 name
      const dictItem = dictStore.getDictData(dataSourceType.value).find(item => item.value === codeArray[0])
      return dictItem ? dictItem.name : '/' // 如果找到匹配的项，返回对应的 name
    },
  },
  {
    prop: 'testState',
    label: '检测状态',
    width: 120,
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
    render: scope => {
    return (
      scope.row.testState === 0 ? '未检' : scope.row.testState === 1 ? '检测中' : '检测完成'
    )
  },
  },
  {
    prop: 'reportState',
    label: '检测报告状态',
    width: 120,
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
    render: scope => {
    return (
      scope.row.testState === 0 ? '未生成' : scope.row.testState === 1 ? '部分生成' : '全部生成'
    )
  },
  },
  {
    prop: 'result',
    label: '检测结果',
    width: 120,
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'id' },
    render: scope => {
    return (
      scope.row.testState === 0 ? '不符合' : scope.row.testState === 1 ? '符合' : '/'
    )
  },
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
])



// // 表格配置项
// const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
//   { type: 'selection', fixed: 'left', width: 70 },
//   { type: 'index', fixed: 'left', width: 70, label: '序号' },
//   {
//     prop: 'name',
//     label: '名称',
//     width: 220,
//     search: { el: 'input' },
//   },
//   {
//     prop: 'testSourceName',
//     label: '检测源',
//     width: 375,
//     render: scope => {
//       return (
//           <div class='flx-flex-start'>
//             <el-link type='primary' link onClick={() => showTestSource(scope.row.testSourceName)}>
//               {scope.row.testSourceName}
//             </el-link>
//             <moreButtons isShow={isVisible(scope.row)} ></moreButtons>
//           </div> 
//       )
//     },
//   },
//   {
//     prop: 'script_Id',
//     label: '检测脚本',
//     width: 360,
//     enum: testScriptDataList,
//     fieldNames: { label: 'label', value: 'id' },
//     render: scope => {
//       return (
//           <el-link type='primary' link onClick={() => showTestScript(scope.row.script_Id)}>
//             {getScriptName(scope.row.script_Id)}
//           </el-link>
//       )
//     },
//   },
//   {
//     prop: 'error_Sys_Id',
//     label: '误差体系',
//     width: 200,
//     enum: testErrSystDataList,
//     fieldNames: { label: 'label', value: 'id' },
//     render: scope => {
//       const errSysName = getErrSysName(scope.row.error_Sys_Id)
//       return (
//           <el-link type='primary' link onClick={() => showData(errSysName || '')}>
//             {errSysName}
//           </el-link>
//       )
//     },
//   },
//   {
//     prop: 'dataSource_Ids',
//     label: '数据源',
//     width: 120,
//     // enum: testSoureDataList,
//     // fieldNames: { label: 'label', value: 'id' },
//   },
//   {
//     prop: 'test_State',
//     label: '检测状态',
//     width: 120,
//     enum: dictTestState,
//     //  enum: dictStore.getDictData('planTestState'),
//     search: { el: 'select', props: { filterable: true } },
//     fieldNames: { label: 'label', value: 'id' },
//   },
//   {
//     prop: 'report_State',
//     label: '检测报告状态',
//     width: 120,
//     enum: dictReportState,
//     //  enum: dictStore.getDictData('planReportState'),
//     search: { el: 'select', props: { filterable: true } },
//     fieldNames: { label: 'label', value: 'id' },
//   },
//   {
//     prop: 'result',
//     label: '检测结果',
//     width: 120,
//     enum: dictResult,
//     //  enum: dictStore.getDictData('planResult'),
//     search: { el: 'select', props: { filterable: true } },
//     fieldNames: { label: 'label', value: 'id' },
//   },
//   { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
// ])


function openFileDialog() {
  if (fileInput.value) {
    fileInput.value.click()
  }
}


function isVisible(row: Plan.ReqPlan) {
    if(!row.hasOwnProperty('sourceName') || !Array.isArray(row.sourceName)){
      return false
    }
    else if(row.sourceName.length <= 1){
      return false
    }
    else{
      return true
    }
      
    
}


function showData(row: string) {
  errorStandardPopup.value?.open(row, row)
}

function showTestSource(row: string) {
  
}

function showTestScript(row: string) {
  
}


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: '确定',
        cancelButtonText: '取消',
      },
  )
      .then(({ value }) => {
       // console.log(`合并后的计划名为:`, value)
        proTable.value?.clearSelection()
        proTable.value?.getTableList()
      })
}



    
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Plan.ReqPlan> = {}) => {

  planPopup.value?.open(titleType, row,modeStore.currentMode)
}

// 删除检测计划
const handleDelete = async (params: Plan.ReqPlanParams) => {
  await useHandleData(deletePlan, [params.id], `删除【${params.name}】检测计划`)
  proTable.value?.getTableList()
}

const showDeviceOpen = (row: Partial<Plan.ReqPlan> = {}) => {
  devTransferPopup.value.open(row)
}

</script>

<style scoped>

</style>