Files
admin-sjzx/src/views/pqs/supervise/terminal/components/cycleTab.vue

303 lines
10 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<div>
<TableHeader area ref="TableHeaderRef">
<template #select>
<el-form-item label="终端名称">
<el-input
v-model="tableStore.table.params.name"
clearable
placeholder="请输入终端名称"
></el-input>
</el-form-item>
<el-form-item label="生产厂家">
<el-select
v-model="tableStore.table.params.manufacture"
placeholder="请选择生产厂家"
multiple
collapse-tags
clearable
class="select"
>
<el-option
v-for="item in manufactorList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测结果">
<el-select
v-model="tableStore.table.params.testResults"
placeholder="请选择检测结果"
clearable
class="select"
>
<el-option
v-for="item in testResultsList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary">导出</el-button>
<el-upload
ref="uploadRef"
action=""
accept=".xls"
:on-change="choose"
:show-file-list="false"
:auto-upload="false"
>
<template #trigger>
<el-button
icon="el-icon-Upload"
type="primary"
style="margin-left: 12px; margin-right: 12px"
>
excel导入
</el-button>
</template>
</el-upload>
<el-button icon="el-icon-Upload" type="primary" @click="UploadOriginal">上传检测报告</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<!-- 上传检测报告 -->
<el-dialog
draggable
title="上传检测报告__支持批量上传"
v-model="showBatchUpload"
width="30%"
:before-close="handleClose"
>
<el-upload
multiple
action=""
:auto-upload="false"
:limit="999"
accept=".doc,.docx"
:file-list="fileList"
:on-remove="handleRemove"
:on-change="chooseBatch"
ref="upload"
>
<el-button type="primary" icon="el-icon-Upload">选择文件</el-button>
<span :style="`color:#f58003`">
  (*传入的检测报告文件格式(终端编号-检测报告(yyyy-MM-dd).docx))
</span>
</el-upload>
<template #footer>
<el-button @click="handleClose"> </el-button>
<el-button type="primary" @click="BatchUpload"> </el-button>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DownloadExport, reportDownload, batchTerminal, importReport } from '@/api/process-boot/terminal'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const manufactorList = dictData.getBasicData('Dev_Manufacturers')
const testResultsList = [
{
id: 0,
name: '未展开'
},
{
id: 1,
name: '已展开'
}
]
const TableHeaderRef = ref()
const showBatchUpload = ref(false)
const fileList: any = ref([])
const tableStore = new TableStore({
url: '/process-boot/process/pmsTerminalDetection/getTerminalPage',
publicHeight: 85,
method: 'POST',
column: [
{ field: 'id', title: '终端编号' },
{
field: 'manufacture',
title: '生产厂家',
formatter(row: any) {
return manufactorList.filter(item => item.id == row.cellValue)[0]?.name
}
},
{ field: 'installPlace', title: '安装位置' },
{ field: 'inspectionUnit', title: '送检单位' },
{
field: 'testResults',
title: '检测结果',
render: 'tag',
custom: {
0: 'warning',
1: 'success'
},
replaceValue: {
0: '未展开',
1: '已展开'
}
// formatter(row: any) {
// return row.cellValue == 0 ? '未展开' : '已展开'
// }
},
{ field: 'nextInspectionTime', title: '下次检测时间' },
{
title: '操作',
width: '250',
render: 'buttons',
fixed: 'right',
buttons: [
{
name: 'edit',
title: '下载原始数据报告',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
disabled: row => {
return row.originalReport == null
},
click: row => {
download(row, 0)
}
},
{
name: 'edit',
title: '下载检测报告',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
disabled: row => {
return row.inspectionReport == null
},
click: row => {
download(row, 1)
}
}
]
}
]
})
tableStore.table.params.name = ''
tableStore.table.params.id = dictData.state.area[0].id
tableStore.table.params.testResults = ''
tableStore.table.params.manufacture = []
tableStore.table.params.type = 1
provide('tableStore', tableStore)
// 关闭弹窗查询
const onsubmit = () => {}
// 下载模版
const Export = () => {
DownloadExport().then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '终端入网检测录入模板' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// 下载报告
const download = (row: any, type: number) => {
reportDownload({
id: row.id,
type: type
}).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = type == 1 ? row.inspectionName : row.originalName // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// excel导入
const choose = (e: any) => {
batchTerminal(e.raw).then((res: any) => {
if (res.type == 'application/json') {
ElMessage.success('上传成功,无错误数据!')
tableStore.index()
} else {
ElMessage.warning('上传成功,有错误数据 自动下载 请查看')
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '模板错误信息' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
}
})
}
// 上传原始报告
const UploadOriginal = () => {
showBatchUpload.value = true
}
// 上传
const BatchUpload = () => {
let form = new FormData()
form.append('type', '1')
fileList.value.forEach((item: any) => {
form.append('files', item.raw)
})
importReport(form)
.then((res: any) => {
if (res.type == 'application/json') {
ElMessage.success('上传成功!')
handleClose()
tableStore.index()
} else {
ElMessage.error('上传失败!')
}
})
.catch(response => {
// console.log(response);
})
// fileList.value
}
const chooseBatch = (e: any) => {
fileList.value.push(e)
}
const handleRemove = (e: any) => {
fileList.value = fileList.value.filter((item: any) => item.uid !== e.uid)
}
const handleClose = () => {
fileList.value = []
showBatchUpload.value = false
}
onMounted(() => {
tableStore.index()
})
</script>