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 ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
import {useDictStore} from '@/stores/modules/dict'
import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev} from '@/api/device/device/index.ts'
import {ElMessageBox} from 'element-plus'
import {onBeforeMount, reactive, ref} from 'vue'
import {useAppSceneStore, useModeStore} 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(exportPqDev, '被检设备导出数据', {...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: downloadTemplate,
      importApi: importPqDev,
      // 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>