271 lines
9.3 KiB
Vue
271 lines
9.3 KiB
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,getPqDevById} 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,
|
||
|
||
},
|
||
{
|
||
prop: 'createDate',
|
||
label: modeStore.currentMode === '比对式' ? '投运日期' : '出厂日期',
|
||
minWidth: 200,
|
||
isShow: appSceneStore.currentScene === '0',
|
||
// ...(appSceneStore.currentScene === '0' ? {
|
||
// search: {
|
||
// render: () => {
|
||
// return (
|
||
// <div class='flx-flex-start'>
|
||
// <TimeControl
|
||
// default={'月'}
|
||
// onUpdate-dates={handleDateChange}
|
||
// />
|
||
// </div>
|
||
// )
|
||
// },
|
||
// },
|
||
// } : {}),
|
||
},
|
||
{
|
||
prop: 'devChns',
|
||
label: '通道数',
|
||
minWidth: 110,
|
||
isShow: modeStore.currentMode != '比对式',
|
||
},
|
||
{
|
||
prop: 'devVolt',
|
||
label: '额定电压（V）',
|
||
minWidth: 130,
|
||
isShow: modeStore.currentMode != '比对式',
|
||
},
|
||
{
|
||
prop: 'devCurr',
|
||
label: '额定电流（A）',
|
||
minWidth: 130,
|
||
isShow: modeStore.currentMode != '比对式',
|
||
},
|
||
{
|
||
prop: 'ip',
|
||
label: 'IP',
|
||
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: 'gdName',
|
||
label: '供电公司',
|
||
isShow: modeStore.currentMode === '比对式',
|
||
search: {el: 'input'},
|
||
minWidth: 200,
|
||
},
|
||
{
|
||
prop: 'subName',
|
||
label: '变电站',
|
||
isShow: modeStore.currentMode === '比对式',
|
||
search: {el: 'input'},
|
||
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 = async (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
|
||
if(titleType === 'add'){
|
||
devicePopup.value?.open(titleType, row, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
|
||
}else{
|
||
row = await getPqDevById(row)
|
||
devicePopup.value?.open(titleType, row.data, 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) => {
|
||
const params = {
|
||
title: '被检设备',
|
||
showCover: false,
|
||
patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id,
|
||
planId: null,
|
||
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>
|
||
|