373 lines
13 KiB
Vue
373 lines
13 KiB
Vue
<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-Plus" type="primary" @click="add">新增</el-button>
|
||
|
||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||
<el-button icon="el-icon-Download" type="primary" @click="Export">下载模板</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" />
|
||
<!-- 新增 -->
|
||
<newlyIncreased ref="addRef" @onsubmit="tableStore.index()" />
|
||
<!-- 上传原始报告 -->
|
||
<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`"> (*传入的原始数据文件格式(终端编号-原始数据报告.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 newlyIncreased from './add.vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import {
|
||
DownloadExport,
|
||
reportDownload,
|
||
batchTerminal,
|
||
delTerminal,
|
||
getTerminalPage,
|
||
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 fileList: any = ref([])
|
||
const TableHeaderRef = ref()
|
||
const addRef = ref()
|
||
const showBatchUpload = ref(false)
|
||
const tableRef = ref()
|
||
|
||
const ruleFormRef = ref()
|
||
const tableStore = new TableStore({
|
||
url: '/process-boot/process/pmsTerminalDetection/getTerminalPage',
|
||
publicHeight: 85,
|
||
method: 'POST',
|
||
column: [
|
||
// { width: '60', type: 'checkbox' },
|
||
|
||
{ field: 'orgName', title: '所属单位' },
|
||
{ field: 'id', title: '终端编号' },
|
||
{ field: 'name', 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: '已展开'
|
||
}
|
||
},
|
||
{ field: 'inspectionTime', title: '检测时间' },
|
||
{ field: 'nextInspectionTime', title: '下次检测时间' },
|
||
{
|
||
title: '操作',
|
||
width: '250',
|
||
render: 'buttons',
|
||
fixed: 'right',
|
||
buttons: [
|
||
{
|
||
name: 'edit',
|
||
title: '编辑',
|
||
type: 'primary',
|
||
icon: 'el-icon-EditPen',
|
||
render: 'basicButton',
|
||
click: row => {
|
||
addRef.value.open({
|
||
title: '编辑',
|
||
row: row
|
||
})
|
||
}
|
||
},
|
||
{
|
||
title: '删除',
|
||
type: 'danger',
|
||
icon: 'el-icon-Delete',
|
||
render: 'confirmButton',
|
||
popconfirm: {
|
||
confirmButtonText: '确认',
|
||
cancelButtonText: '取消',
|
||
confirmButtonType: 'danger',
|
||
title: '确定删除吗?'
|
||
},
|
||
click: row => {
|
||
delTerminal([row.id]).then(() => {
|
||
ElMessage.success('删除成功')
|
||
tableStore.index()
|
||
})
|
||
}
|
||
},
|
||
{
|
||
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 = 0
|
||
|
||
provide('tableStore', tableStore)
|
||
|
||
const add = () => {
|
||
addRef.value.open({
|
||
title: '新增'
|
||
})
|
||
}
|
||
|
||
// 下载模版
|
||
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 exportEvent = () => {
|
||
let form = JSON.parse(JSON.stringify(tableStore.table.params))
|
||
form.pageNum = 1
|
||
form.pageSize = tableStore.table.total
|
||
getTerminalPage(form).then(res => {
|
||
tableRef.value.getRef().exportData({
|
||
filename: '终端入网检测', // 文件名字
|
||
sheetName: 'Sheet1',
|
||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||
useStyle: true,
|
||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||
columnFilterMethod: function (column: any) {
|
||
return !(column.$columnIndex === 0)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// 上传原始报告
|
||
const UploadOriginal = () => {
|
||
showBatchUpload.value = true
|
||
}
|
||
// 上传
|
||
const BatchUpload = () => {
|
||
let form = new FormData()
|
||
form.append('type', '0')
|
||
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>
|