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>
        <div class='cn-render-buttons'>
          <el-dropdown trigger='click'>
            <el-button link type='primary' class='table-operate'>
              <div class='table-operate-text'>更多</div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :style="{color: 'var(--el-color-danger)'}" :icon='Delete'>
                  删除
                </el-dropdown-item>
                <el-dropdown-item :icon='List' @click='showDeviceOpen(scope.row)'>
                  设备绑定
                </el-dropdown-item>
                <el-dropdown-item :icon='Tools' @click='showtestSourceOpen(scope.row)'>
                  检测源绑定
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </ProTable>

      @update:visible="dialogFormVisible = $event"/>

    <!-- 查看误差体系详细信息 -->
    <ErrorStandardDialog
        :visible='detail_dialogFormVisible'
        :formData='detail_dialogForm'
        :dialogTitle='detail_dialogTitle'
        @update:visible='detail_dialogFormVisible = $event'
    />
  </div>
  <devTransfer
      :dialogVisible=devTransferVisible
      @update:visible='devTransferVisible = $event'
  />
  <sourceTransfer
      :dialogVisible=sourceTransferVisible
      @update:visible='sourceTransferVisible = $event'
  />
  <DeviceOpen :width='viewWidth' :height='viewHeight' ref='openDeviceView' />
  <SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' />
</template>

<script setup lang='tsx' 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, Tools } 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 temp from './components/temp.vue'
import devTransfer from './components/devTransfer.vue'
import sourceTransfer from './components/sourceTransfer.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/ErrorStandardDialog.vue' // 导入子组件

const dictStore = useDictStore()
// 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '自定义'] // 可以根据需要包含的单位
const excludedUnits = ['季度', '年'] // 要排除的单位
const defaultUnits = '日' // 默认的单位
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const openDeviceView = ref()
const openSourceView = ref()
const devTransferVisible = ref(false)
const sourceTransferVisible = ref(false)
// 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 detail_dialogFormVisible = ref(false)
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
  measured: '',//被测量
  deviceLevel: '',//检测装置级别
  measurementType: '',
  condition: '',//测量条件
  maxErrorValue: '',//最大误差
})

// 表格配置项
const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '检测计划名称',
    width: 200,
    search: { el: 'input' },
  },
  {
    prop: 'testSourceName',
    label: '检测源名称',
    width: 300,
    render: scope => {
      return (
          //   <el-button
          //   v-for="(button, index) in scope.row.testSourceList"
          //   :key="index"
          //   @click="handleClick(button)"
          // >
          //   {{ button.text }}
          // </el-button>
          <div class='flx-flex-start'>
            <el-button type='primary' link onClick={() => showData(scope.row.testSourceName)}>
              {scope.row.testSourceName}
            </el-button>
            <temp></temp>
          </div>

      )
    },
  },
  {
    prop: 'script_Id',
    label: '检测脚本',
    width: 300,
    enum: testScriptDataList,
    fieldNames: { label: 'label', value: 'id' },
    render: scope => {
      return (
          <el-button type='primary' link onClick={() => showData(scope.row.script_Id)}>
            {getScriptName(scope.row.script_Id)}
          </el-button>
      )
    },
  },
  {
    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-button type='primary' link onClick={() => showData(errSysName || '')}>
            {errSysName}
          </el-button>
      )
    },
  },
  {
    prop: 'dataSource_Id',
    label: '数据源名称',
    width: 200,
    enum: testSoureDataList,
    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: 250 },
])

function getScriptName(id: string) {
  return testScriptDataList.find(item => item.id == id)?.label
}

function getErrSysName(id: string) {
  return testErrSystDataList.find(item => item.id == id)?.label
}

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

function showData(row: string) {

  detail_dialogTitle.value = row
  detail_dialogFormVisible.value = true // 显示对话框

  // router.push({
  //   path: "/machine/device",
  //   query: { id: row }
  // });
}

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()
      })
}

// 打开编辑对话框
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) => {
  devTransferVisible.value = true
  //openDeviceView.value.open('计划设备列表')
}

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

<style scoped>

</style>