flx：新增批量打印
This commit is contained in:
parent
7c186cbdb5
commit
15e80902b6
@ -89,11 +89,16 @@
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="isAddPoint(3)">新增</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="bulkPrint()">批量打印</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="tableData" @cell-click="previewDetail" ref="multipleTable" class="tables"
|
||||
max-height="590px">
|
||||
max-height="590px" @selection-change="handleSelectionChangeTable">
|
||||
<el-table-column align="center" type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="commonDiseasePhenomena" label="设备名称">
|
||||
@ -161,7 +166,8 @@
|
||||
</div>
|
||||
<!-- 添加卡片弹框 -->
|
||||
<el-dialog :destroy-on-close="true" :modal-append-to-body="false" :title="cardDialogTitle"
|
||||
:visible.sync="cardDialog" :width="isAdd == 1 || isAdd == 2 ? '600px' : '1100px'" :before-close="handleClose">
|
||||
:visible.sync="cardDialog" :width="isAdd == 1 || isAdd == 2 ? '600px' : '1100px'"
|
||||
:before-close="handleClose">
|
||||
<div class="dialog_content">
|
||||
<el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="170px"
|
||||
class="dialogFormBox">
|
||||
@ -308,6 +314,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 添加卡片弹框 -->
|
||||
<el-dialog :destroy-on-close="true" :modal-append-to-body="false" title="" :visible.sync="cardDialog2"
|
||||
width="900px">
|
||||
<div class="dialog_content">
|
||||
<div class="percentage_title">
|
||||
{{ this.percentageTitle }}
|
||||
</div>
|
||||
<el-progress :percentage="percentage"></el-progress>
|
||||
<!-- <div class="dialog-footer">
|
||||
<el-button type="primary" icon="el-icon-circle-check" @click="getProgress" size="medium">{{
|
||||
$t("message.personnelPosition.determine") }}
|
||||
</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
<div style="height: 100%" v-else>
|
||||
@ -320,61 +341,61 @@
|
||||
<div class="info-content">
|
||||
<div style="width: 75%">
|
||||
<div class="info-title">
|
||||
<div>
|
||||
{{ workDetail.equipmentName }}
|
||||
<div>
|
||||
{{ workDetail.equipmentName }}
|
||||
</div>
|
||||
<div class="info-title_right" v-if="workDetail.isSpecial == 1">
|
||||
特种设备
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-title_right" v-if="workDetail.isSpecial == 1">
|
||||
特种设备
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="form-box" :model="workDetail">
|
||||
<el-form-item label="规格型号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.specificationModel }}
|
||||
</el-form-item>
|
||||
<el-form-item label="项目设备编号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.projectEquipmentNumber ? workDetail.projectEquipmentNumber : '--' }}
|
||||
</el-form-item>
|
||||
<el-form-item label="设备管理员：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentManagerName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="进场经办人：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.onSiteHandlerName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="实际进场时间：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.actualOnSiteDate }}
|
||||
</el-form-item>
|
||||
<el-form-item label="出厂日期：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.shipmentDate }}
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" :label-width="formLabelWidthDetail">
|
||||
<span style="color:#EA3941;">{{ workDetail.status }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂商：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.manufacturer }}
|
||||
</el-form-item>
|
||||
<el-form-item label="所属单位：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentSourceUnit }}
|
||||
<!-- <el-tooltip class="item" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" effect="dark" :content="workDetail.jobContent"
|
||||
<el-form class="form-box" :model="workDetail">
|
||||
<el-form-item label="规格型号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.specificationModel }}
|
||||
</el-form-item>
|
||||
<el-form-item label="项目设备编号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.projectEquipmentNumber ? workDetail.projectEquipmentNumber : '--' }}
|
||||
</el-form-item>
|
||||
<el-form-item label="设备管理员：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentManagerName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="进场经办人：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.onSiteHandlerName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="实际进场时间：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.actualOnSiteDate }}
|
||||
</el-form-item>
|
||||
<el-form-item label="出厂日期：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.shipmentDate }}
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" :label-width="formLabelWidthDetail">
|
||||
<span style="color:#EA3941;">{{ workDetail.status }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂商：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.manufacturer }}
|
||||
</el-form-item>
|
||||
<el-form-item label="所属单位：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentSourceUnit }}
|
||||
<!-- <el-tooltip class="item" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" effect="dark" :content="workDetail.jobContent"
|
||||
placement="top-start">
|
||||
<div>{{ workDetail.jobContent }}</div>
|
||||
</el-tooltip> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="安装拆除单位：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.installationRemovalUnit }}
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="使用装置：" :label-width="formLabelWidthDetail">
|
||||
</el-form-item>
|
||||
<el-form-item label="安装拆除单位：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.installationRemovalUnit }}
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="使用装置：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.deviceUsed }}
|
||||
</el-form-item> -->
|
||||
<el-form-item label="设备位置：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentLocation }}
|
||||
</el-form-item>
|
||||
<el-form-item label="产权编号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.ownershipNumber }}
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.serviceLife }}
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="现场作业环境：" :label-width="formLabelWidthDetail">
|
||||
<el-form-item label="设备位置：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.equipmentLocation }}
|
||||
</el-form-item>
|
||||
<el-form-item label="产权编号：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.ownershipNumber }}
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限：" :label-width="formLabelWidthDetail">
|
||||
{{ workDetail.serviceLife }}
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="现场作业环境：" :label-width="formLabelWidthDetail">
|
||||
<div class="img-show">
|
||||
<el-image v-for="(item, index) in workDetail.fieldWorkingEnvironment" :key="index"
|
||||
style="width: 100px; height: 100px; margin-right: 10px;margin-bottom: 10px"
|
||||
@ -382,13 +403,36 @@
|
||||
</el-image>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center; width: 25%">
|
||||
<div
|
||||
style="display: flex;flex-direction: column;justify-content: center;align-items: center; width: 25%">
|
||||
<div ref="qrCodeDiv" id="qrCodeDiv">
|
||||
<img width="200" height="200" :src="$store.state.FILEURL + workDetail.qrCode" alt="">
|
||||
</div>
|
||||
<div style="display: none" id="qrCode" ref="qrCodeDiv1"></div>
|
||||
<!-- <div style="display: none" class="equipment_bg_img">
|
||||
<div class="equipment_box">
|
||||
<div>
|
||||
{{ workDetail.equipmentName ? workDetail.equipmentName : '--' }}
|
||||
</div>
|
||||
<div>
|
||||
{{ workDetail.projectEquipmentNumber ? workDetail.projectEquipmentNumber : '--' }}
|
||||
</div>
|
||||
<div>
|
||||
{{ workDetail.specificationModel ? workDetail.specificationModel : '--' }}
|
||||
</div>
|
||||
<div>
|
||||
{{ workDetail.equipmentSourceUnit ? workDetail.equipmentSourceUnit : '--' }}
|
||||
</div>
|
||||
<div>
|
||||
{{ workDetail.equipmentLocation ? workDetail.equipmentLocation : '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="qrCode" ref="qrCodeDiv1"></div>
|
||||
</div> -->
|
||||
<div style="display: none" id="qrCodeDiv2">
|
||||
<img width="100%" height="400" :src="equipmentBgImg" alt="">
|
||||
</div>
|
||||
<el-button style="margin-top: 20px" type="primary" @click="printBtn()" size="medium">打印方案二维码
|
||||
</el-button>
|
||||
</div>
|
||||
@ -417,6 +461,8 @@ import {
|
||||
|
||||
getConstructionEquipmentByIdApi,
|
||||
getConstructionEquipmentFileListApi,
|
||||
|
||||
downloadConstructionEquipmentCheckFileApi,
|
||||
} from '@/assets/js/api/buildEquipToolManage'
|
||||
import { getWorkerInfoList } from '@/assets/js/api/laborPerson.js'
|
||||
import { isJSON } from "@/util/nowDate/index";
|
||||
@ -428,6 +474,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
percentage: 0,
|
||||
percentageTitle: "正在下载中，请稍后",
|
||||
cardDialog2: false,
|
||||
|
||||
formLabelWidthDetail: "140px",
|
||||
styleType: 1,
|
||||
classificationName: '',
|
||||
@ -530,6 +580,8 @@ export default {
|
||||
dialogTitle: '',
|
||||
isEdit: false,
|
||||
dialogFormVisible: true,
|
||||
downloadPicInfoList: [],
|
||||
equipmentBgImg: "",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -544,19 +596,74 @@ export default {
|
||||
this.getDutyPerson();
|
||||
},
|
||||
methods: {
|
||||
getProgress(rowUrl) {
|
||||
//进度条恢复为 0
|
||||
this.percentage = 0;
|
||||
//发起请求
|
||||
this.$http({
|
||||
//下载文件的远端地址。
|
||||
url: rowUrl,
|
||||
//请求方式 get post。
|
||||
method: "get",
|
||||
//设置返回数据类型为base64的数据，这样才可以被new Blob() 解析。
|
||||
responseType: "blob",
|
||||
//请求参数 get-->params post-->data 。
|
||||
params: {},
|
||||
//xml返回数据的钩子函数，可以用来获取数据的进度 具体可查看axios的官网
|
||||
onDownloadProgress: (progressEvent) => {
|
||||
//progressEvent.loaded 下载文件的当前大小
|
||||
//progressEvent.total 下载文件的总大小 如果后端没有返回 请让他加上！
|
||||
let progressBar = Math.round(progressEvent.loaded / progressEvent.total * 100);
|
||||
//接收进度为99%的时候需要留一点前端编译的时间
|
||||
if (progressBar >= 99) {
|
||||
this.percentage = 99;
|
||||
this.percentageTitle = '下载完成，文件正在编译。';
|
||||
} else {
|
||||
this.percentage = progressBar;
|
||||
this.percentageTitle = '正在下载，请耐心等待...';
|
||||
}
|
||||
}
|
||||
}).then(res => {
|
||||
//当前定义res.message 出现的时候说明后端文件返回出现了问题 不然应该直接是个文件流
|
||||
if (res.status != 200) {
|
||||
this.percentageTitle = '下载失败，请重试。';
|
||||
return
|
||||
}
|
||||
console.log(res.data)
|
||||
// return;
|
||||
// 创建一个下载链接
|
||||
const url = window.URL.createObjectURL(res.data);
|
||||
// 创建一个<a>元素
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "施工设备机具二维码"; // 指定下载文件的文件名
|
||||
// 模拟点击下载链接
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
// 释放URL对象
|
||||
window.URL.revokeObjectURL(url);
|
||||
this.percentageTitle = '下载完成';
|
||||
//编译文件完成后，进度条展示为100%100
|
||||
this.percentage = 100;
|
||||
})
|
||||
},
|
||||
printBtn() {
|
||||
// setTimeout(() => {
|
||||
// console.log(this.$refs["qrCodeDiv"].innerHTML)
|
||||
// },100)
|
||||
// qrCode
|
||||
setTimeout(() => {
|
||||
let printDemo = this.$refs["qrCodeDiv1"].innerHTML;
|
||||
console.log(printDemo, oldStr);
|
||||
window.document.body.innerHTML = printDemo;
|
||||
//没有图片直接打印
|
||||
window.print();
|
||||
window.location.reload();
|
||||
}, 100);
|
||||
const printContentHtml = document.getElementById("qrCodeDiv2").innerHTML;
|
||||
// console.log(printContentHtml);
|
||||
const iframe = document.createElement("iframe");
|
||||
// iframe.setAttribute(
|
||||
// "style",
|
||||
// "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
|
||||
// );
|
||||
document.body.appendChild(iframe);
|
||||
iframe.contentDocument.write(printContentHtml);
|
||||
iframe.contentDocument.close();
|
||||
iframe.onload = function(){ //解决图片显示不了的问题
|
||||
iframe.contentWindow.print();
|
||||
document.body.removeChild(iframe);
|
||||
};
|
||||
|
||||
},
|
||||
//生成 二维码
|
||||
bindQRCode(id) {
|
||||
@ -571,13 +678,40 @@ export default {
|
||||
// `${httpUrl}/doc/h5Entry/index.html?userId=${userId}&projectSn=${projectSn}`
|
||||
new QRCode(this.$refs.qrCodeDiv1, {
|
||||
text: `/pages/projectEnd/buildEquipToolManage/equipmentManage/detail?id=${id}`,
|
||||
width: 200,
|
||||
height: 200,
|
||||
width: 120,
|
||||
height: 120,
|
||||
colorDark: "#333333", //二维码颜色
|
||||
colorLight: "#ffffff", //二维码背景色
|
||||
correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
|
||||
});
|
||||
},
|
||||
// 批量打印
|
||||
bulkPrint() {
|
||||
downloadConstructionEquipmentCheckFile(1)
|
||||
},
|
||||
downloadConstructionEquipmentCheckFile(type) {
|
||||
const ids = type == 1 ? this.downloadPicInfoList.map((item) => item.id).join(",") : this.detailId;
|
||||
downloadConstructionEquipmentCheckFileApi({
|
||||
projectSn: this.projectSn,
|
||||
ids: ids,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const url = res.result.file.includes("http://") ? res.result.file : this.$store.state.FILEURL + res.result.file;
|
||||
if (type == 1) {
|
||||
this.getProgress(url);
|
||||
this.cardDialog2 = true;
|
||||
} else {
|
||||
this.equipmentBgImg = url;
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectionChangeTable(selection) {
|
||||
this.downloadPicInfoList = selection;
|
||||
console.log(selection);
|
||||
},
|
||||
//获取左侧---列表信息
|
||||
getDangerTypeRecordList() {
|
||||
console.log(22)
|
||||
@ -588,7 +722,17 @@ export default {
|
||||
getConstructionEquipmentCategoryTreeApi(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
if (res.result.length > 0) {
|
||||
this.listData = res.result
|
||||
if (this.classificationName) {
|
||||
this.listData = res.result;
|
||||
this.getCheckedNode(this.listData[0]);
|
||||
} else {
|
||||
this.listData = [{
|
||||
id: "",
|
||||
children: [],
|
||||
classificationName: "全部",
|
||||
}, ...res.result];
|
||||
this.getCheckedNode(this.listData[0]);
|
||||
}
|
||||
} else {
|
||||
this.listData = []
|
||||
}
|
||||
@ -698,7 +842,7 @@ export default {
|
||||
originName: item.fileList[0].name,
|
||||
fileUrl: item.fileList[0].url,
|
||||
};
|
||||
if(item.constructionEquipmentToolId){
|
||||
if (item.constructionEquipmentToolId) {
|
||||
obj.constructionEquipmentToolId = item.constructionEquipmentToolId;
|
||||
obj.id = item.id;
|
||||
}
|
||||
@ -738,7 +882,7 @@ export default {
|
||||
this.$t("message.personnelPosition.add_success")
|
||||
); //添加成功！
|
||||
});
|
||||
}
|
||||
}
|
||||
// else if (this.isAdd == 4) {
|
||||
// editConstructionEquipmentApi(result).then((res) => {
|
||||
// this.cardDialog = false;
|
||||
@ -987,12 +1131,12 @@ export default {
|
||||
...val,
|
||||
...res.result,
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.bindQRCode(val.id);
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// this.bindQRCode(val.id);
|
||||
// })
|
||||
}
|
||||
});
|
||||
|
||||
this.downloadConstructionEquipmentCheckFile(2);
|
||||
this.isSuperDanger = val.issuperdanger;
|
||||
},
|
||||
},
|
||||
@ -1008,9 +1152,71 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.percentage_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.equipment_bg_img {
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
background-image: url("~@/assets/images/equipment_bg_img.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
.equipment_box {
|
||||
// position: absolute;
|
||||
// top: 29%;
|
||||
// left: 23%;
|
||||
width: 40%;
|
||||
font-size: 12px;
|
||||
color: #2E4070;
|
||||
|
||||
// line-height: 29px;
|
||||
>div:nth-child(1) {
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
>div:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
>div:nth-child(3) {
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
>div:nth-child(4) {
|
||||
position: absolute;
|
||||
top: 72%;
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
>div:nth-child(5) {
|
||||
position: absolute;
|
||||
top: 85%;
|
||||
left: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
#qrCode {
|
||||
position: absolute;
|
||||
right: 8%;
|
||||
bottom: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1238,4 +1444,5 @@ export default {
|
||||
|
||||
.el-button--text {
|
||||
padding-right: 10px;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user