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

<template>
  <div class='table-box' ref='popupBaseView'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :request-api='getTableList'
    >
      <!-- :requestApi="getRoleList" -->
      <!-- 表格 header 按钮 -->
      <template #tableHeader='scope'>
        <el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
        <el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')"
                   v-if='modeStore.currentMode != "比对式"'>导入
        </el-button>
        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')"
                   v-if='modeStore.currentMode === "比对式"'>导入
        </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'
                   @click="openDialog('edit', scope.row)">编辑
        </el-button>
        <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
        </el-button>
      </template>

    </ProTable>
  </div>
  <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup' />
  <ImportExcel ref='deviceImportExcel' />
</template>

<script setup lang='tsx' name='useRole'>
import TimeControl from '@/components/TimeControl/index.vue'
import { type Device } from '@/api/device/interface/device.ts'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import {
  getPqDevList,
  deletePqDev,
  getPqDev,
  exportCNDev,
  downloadCNDevTemplate,
  importCNDev,
} from '@/api/device/device/index.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onBeforeMount, reactive, ref } from 'vue'
import { useModeStore, useAppSceneStore } from '@/stores/modules/mode'

defineOptions({
  name: 'device',
})
const modeStore = useModeStore()
const dictStore = useDictStore()
const appSceneStore = useAppSceneStore()
// ProTable 实例
const proTable = ref<ProTableInstance>()
const devicePopup = ref()
const boundPqDevList = ref<Device.ReqPqDevParams[]>([])//根据检测计划id查询出所有已绑定的设备
// 存储设备类型选项
const devTypeOptions = ref<Device.ResDev[]>([])

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


// 表格配置项
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '名称',
    search: { el: 'input' },
    // isShow: appSceneStore.currentScene != '1',
    // ...(appSceneStore.currentScene != '1' ? {
    //   search: { el: 'input' },
    // } : {}),
    minWidth: 200,
  },
  {
    prop: 'devType',
    label: '设备类型',
    minWidth: 200,
    render: (scope) => {
      // 查找设备类型名称
      const name = devTypeOptions.value.find(option => option.id === scope.row.devType)
      return <span>{name?.name}</span>
    },
  },
  {
    prop: 'createDate',
    label: '出厂日期',
    minWidth: 200,
    isShow: appSceneStore.currentScene === '0',
    ...(appSceneStore.currentScene === '0' ? {
      search: {
        render: () => {
          return (
            <div class='flx-flex-start'>
              <TimeControl
                default={'月'}
                onUpdate-dates={handleDateChange}
              />
            </div>
          )
        },
      },
    } : {}),
    // search: {
    //   span: 2,
    //   render: () => {
    //     return (
    //       <div class='flx-flex-start'>
    //         <TimeControl
    //           default={'月'}
    //           onUpdate-dates={handleDateChange}
    //         />
    //       </div>
    //     )
    //   },
    // },
  },
  {
    prop: 'devChns',
    label: '通道数',
    minWidth: 110,

  },
  {
    prop: 'devVolt',
    label: '额定电压（V）',
    minWidth: 130,

  },
  {
    prop: 'devCurr',
    label: '额定电流（A）',
    minWidth: 130,

  },
  {
    prop: 'manufacturer',
    label: '设备厂家',
    enum: dictStore.getDictData('Dev_Manufacturers'),
    isShow: appSceneStore.currentScene != '1',
    ...(appSceneStore.currentScene != '1' ? {
      search: { el: 'select', props: { filterable: true }, order: 1 },
      fieldNames: { label: 'name', value: 'id' },
    } : {}),
    minWidth: 200,
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 200,
    render: scope => {
      if (scope.row.createTime) {
      const date = new Date(scope.row.createTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    return '';
    }
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])


// 处理日期变化的回调函数
const startDate = ref('')
const endDate = ref('')
const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
  startDate.value = startDateTemp
  endDate.value = endDateTemp
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
  devicePopup.value?.open(titleType, row, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
}


// 批量删除设备
const batchDelete = async (id: string[]) => {
  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
  await useHandleData(deletePqDev, { 'ids': id, 'pattern': patternId }, '删除所选设备')
  
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 删除设备
const handleDelete = async (params: Device.ResPqDev) => {
  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
  await useHandleData(deletePqDev, { 'ids': [params.id], 'pattern': patternId }, `删除【${params.name}】设备`)
  proTable.value?.getTableList()
  
}

// 导出设备
const downloadFile = async () => {
  // 获取当前的搜索参数
  const searchParam = proTable.value?.searchParam || {}

  // 将开始时间和结束时间添加到搜索参数中
  searchParam.searchBeginTime = startDate.value
  searchParam.searchEndTime = endDate.value

  ElMessageBox.confirm('确认导出被检设备?', '温馨提示', { type: 'warning' }).then(() => {
    const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
    useDownload(exportCNDev, '被检设备导出数据', { ...proTable.value?.searchParam, pattern: patternId }, false, '.xlsx')
  })
}

//导入设备
const deviceImportExcel = ref<InstanceType<typeof ImportExcel> | null>(null)

const importFile = async (pattern: string) => {

  if (pattern === '比对式') {
    // const params = {
    //     title: '被检设备',
    //     showCover: false,
    //     tempApi: downloadTemplate,
    //     importApi: importPqDev,
    //     getTableList: proTable.value?.getTableList,
    // }
    // deviceImportExcel.value?.acceptParams(params)
  } else {
    const params = {
      title: '被检设备',
      showCover: false,
      patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id,
      tempApi: downloadCNDevTemplate,
      importApi: importCNDev,
      // importApi: modeStore.currentMode === "比对式"? importContrastPqDev: importCNDev,
      getTableList: proTable.value?.getTableList,
    }
    deviceImportExcel.value?.acceptParams(params)
  }

}

onBeforeMount(async () => {
  const response = await getPqDev()
  devTypeOptions.value = (response.data as Device.ResDev[]).map(item => ({
    id: item.id,
    name: item.name,
    icd: item.icd,
    power: item.power,
    devVolt: item.devVolt,
    devCurr: item.devCurr,
    devChns: item.devChns,
  }))
})
</script>