flx：新增批量打印

src/views/projectFront/buildEquipToolManage/equipmentManage.vue

@@ -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>
+                                <div>
-                                {{ workDetail.equipmentName }}
+                                    {{ 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">
+                            <el-form class="form-box" :model="workDetail">
-                                特种设备
+                                <el-form-item label="规格型号：" :label-width="formLabelWidthDetail">
-                            </div>
+                                    {{ workDetail.specificationModel }}
-                        </div>
+                                </el-form-item>
-                        <el-form class="form-box" :model="workDetail">
+                                <el-form-item label="项目设备编号：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="规格型号：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.projectEquipmentNumber ? workDetail.projectEquipmentNumber : '--' }}
-                                {{ workDetail.specificationModel }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="设备管理员：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="项目设备编号：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.equipmentManagerName }}
-                                {{ workDetail.projectEquipmentNumber ? workDetail.projectEquipmentNumber : '--' }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="进场经办人：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="设备管理员：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.onSiteHandlerName }}
-                                {{ workDetail.equipmentManagerName }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="实际进场时间：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="进场经办人：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.actualOnSiteDate }}
-                                {{ workDetail.onSiteHandlerName }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="出厂日期：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="实际进场时间：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.shipmentDate }}
-                                {{ workDetail.actualOnSiteDate }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="状态：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="出厂日期：" :label-width="formLabelWidthDetail">
+                                    <span style="color:#EA3941;">{{ workDetail.status }}</span>
-                               {{ workDetail.shipmentDate }}
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="生产厂商：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="状态：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.manufacturer }}
-                                <span style="color:#EA3941;">{{ workDetail.status }}</span>
+                                </el-form-item>
-                            </el-form-item>
+                                <el-form-item label="所属单位：" :label-width="formLabelWidthDetail">
-                            <el-form-item label="生产厂商：" :label-width="formLabelWidthDetail">
+                                    {{ workDetail.equipmentSourceUnit }}
-                                {{ workDetail.manufacturer }}
+                                    <!-- <el-tooltip class="item" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" effect="dark" :content="workDetail.jobContent"
-                            </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>
-                            <el-form-item label="安装拆除单位：" :label-width="formLabelWidthDetail">
+                                <el-form-item label="安装拆除单位：" :label-width="formLabelWidthDetail">
-                                {{ workDetail.installationRemovalUnit }}
+                                    {{ workDetail.installationRemovalUnit }}
-                            </el-form-item>
+                                </el-form-item>
-                            <!-- <el-form-item label="使用装置：" :label-width="formLabelWidthDetail">
+                                <!-- <el-form-item label="使用装置：" :label-width="formLabelWidthDetail">
                                 {{ workDetail.deviceUsed }}
                             </el-form-item> -->
-                            <el-form-item label="设备位置：" :label-width="formLabelWidthDetail">
+                                <el-form-item label="设备位置：" :label-width="formLabelWidthDetail">
-                                {{ workDetail.equipmentLocation }}
+                                    {{ workDetail.equipmentLocation }}
-                            </el-form-item>
+                                </el-form-item>
-                            <el-form-item label="产权编号：" :label-width="formLabelWidthDetail">
+                                <el-form-item label="产权编号：" :label-width="formLabelWidthDetail">
-                                {{ workDetail.ownershipNumber }}
+                                    {{ workDetail.ownershipNumber }}
-                            </el-form-item>
+                                </el-form-item>
-                            <el-form-item label="使用年限：" :label-width="formLabelWidthDetail">
+                                <el-form-item label="使用年限：" :label-width="formLabelWidthDetail">
-                                {{ workDetail.serviceLife }}
+                                    {{ workDetail.serviceLife }}
-                            </el-form-item>
+                                </el-form-item>
-                            <!-- <el-form-item label="现场作业环境：" :label-width="formLabelWidthDetail">
+                                <!-- <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(() => {
+            const printContentHtml = document.getElementById("qrCodeDiv2").innerHTML;
-            //     console.log(this.$refs["qrCodeDiv"].innerHTML)
+            // console.log(printContentHtml);
-            // },100)
+            const iframe = document.createElement("iframe");
-            // qrCode
+            // iframe.setAttribute(
-            setTimeout(() => {
+            //     "style",
-                let printDemo = this.$refs["qrCodeDiv1"].innerHTML;
+            //     "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
-                console.log(printDemo, oldStr);
+            // );
-                window.document.body.innerHTML = printDemo;
+            document.body.appendChild(iframe);
-                //没有图片直接打印
+            iframe.contentDocument.write(printContentHtml);
-                window.print();
+            iframe.contentDocument.close();
-                window.location.reload();
+            iframe.onload = function(){ //解决图片显示不了的问题
-            }, 100);
+                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,
+                width: 120,
-                height: 200,
+                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;
                             }
@@ -987,12 +1131,12 @@ export default {
                         ...val,
                         ...res.result,
                     };
-                    this.$nextTick(() => {
+                    // this.$nextTick(() => {
-                        this.bindQRCode(val.id);
+                    //     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>