vue-insagent-pc/src/views/Core/components/quotationDialogPro.vue

<template>
     <el-dialog
      :visible.sync="dialogVisible"
      width="1080px"
      class="quotation_style"
    >
        <div id="pdfContentsDiv" style="padding: 25px;">
            <div slot="title" class="dialog-title quotation-title">
                <img
                :src="queryOrders.logoImg"
                class="align"
                alt
                style="width: 28px; height: 28px;vertical-align: middle;"
            />
                <span style="color:#000">{{queryOrders.inscompany}}-报价单</span>
            </div>
            <div style="border: 1px solid #000000;margin:10px 0">
                <div  class="quotation_title">
                    <div style="font-weight: 500;font-size: 24px;margin-bottom:5px">{{queryOrders.inscompany}}报价单</div>
                    <div>报价时间:{{ queryOrders.createtime }}</div>
                </div>
            <div class="vehicle">
                <li>
                    <span>订单号：</span>{{ queryOrders.orderno }}
                </li>
                <li>
                    <span>车型：</span>{{ queryOrders.carinfo.modelcname  }}
                </li>
                <li>
                    <span>车牌号：</span>{{ queryOrders.carinfo.licenseNo }}
                </li>
                <li>
                    <span>车主姓名：</span>{{ queryOrders.ownerinfo.name }}
                </li>
                <li>
                    <span>投保人姓名：</span>{{ queryOrders.applyinfo.name }}
                </li>
                <li>
                    <span>被保人姓名：</span>{{ queryOrders.insureinfo.name }}
                </li>
                <li>
                    <span>发动机号：</span>{{ queryOrders.carinfo.engineNo }}
                </li>
                <li>
                    <span>车架号：</span>{{ queryOrders.carinfo.vinNo }}
                </li>
                <li>
                    <span>座位数：</span>{{ queryOrders.carinfo.seatCount }}
                </li>
               
                <li style="width: 100%;">
                    <span>车辆交强险保险期间：</span>{{ queryOrders.jqstartdate }} 至 {{ queryOrders.jqenddate }}
                </li>
                <li style="width: 100%;" v-if="queryOrders.systartdate &&queryOrders.syenddate">
                    <span>车辆商业险保险期间：</span>{{ queryOrders.systartdate }} 至 {{ queryOrders.syenddate }}
                </li>
            </div>
            <div class="quotation-style tax-arrears" v-if="queryOrders.kindinfo && queryOrders.kindinfo.length>0">
                <b>商业险险别</b>
                <b>保额（元）</b>
                <b style=" border-right:0">保费（元）</b>
                <div v-for="(kindinfoitem, kindinfoindex) in queryOrders.kindinfo"
                    :key="kindinfoindex">
                    <span >{{ kindinfoitem.kindName }}</span>
                    <span
                v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)"
                >{{ kindinfoitem.unitAmount }}</span
              >
              <span
                v-else-if="
                  ['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)
                "
              >
                {{ kindinfoitem.deductibleRate }}
              </span>
              <span v-else>{{ kindinfoitem.amount }}</span>
              <span >{{ kindinfoitem.coveragePremium ?kindinfoitem.coveragePremium :'-' }}</span>
                </div>
            </div>
            <div v-else style="height: 1px;width:100%;background:#000"></div>
            <div  class="money_style">
                <div v-if="queryOrders.sypremium">车辆商业险：<span>￥{{ queryOrders.sypremium }}</span></div>
                <div v-if="queryOrders.jqpremium">交强险：<span>￥{{ queryOrders.jqpremium }}</span></div>
                <div v-if="queryOrders.taxamount">车船税：<span>￥{{ queryOrders.taxamount }}</span></div>
                <div v-if="queryOrders.jypremium">驾意险：<span>￥{{ queryOrders.jypremium }}</span></div>
                <div style="font-weight: bold;">应缴金额：<span>￥{{ queryOrders.sumpremium }}</span></div>
            </div>
        </div>
        <div >注：本报价单仅供参考，最终以出单价格为准。</div>

    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="blue_color" size="small" @click="copybjd()">截图</el-button>
        <el-button size="small" class="blueplain_color"  @click="dialogVisible = false">关闭</el-button>
    </span>
    </el-dialog>
</template>
<script>
import html2Canvas from "html2canvas";

export default {
  name: "quotationDialog",
    props:{
        queryOrders:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            dialogVisible:false,
            logoImg:''
        }
    },
    created(){
    },
    methods:{
        setBackupVisible: function (backupVisible) {
            this.dialogVisible = backupVisible
        },
        // 截图粘贴
    copybjd() {
      html2Canvas(document.getElementById("pdfContentsDiv"), {
        allowTaint: true,
        taintTest: false,
        // useCORS: true
      }).then(function (canvas) {
        let base64Data = "";
        base64Data = canvas.toDataURL("image/png", 1);
        const date = new Date();
        const saveInfo = {
          download: date.getTime() + `.png`,
          href: base64Data,
        };
        const element = document.createElement("a");
        element.style.display = "none";
        for (const key in saveInfo) {
          element.setAttribute(key, saveInfo[key]);
        }
        document.body.appendChild(element);
        element.click();
        setTimeout(() => {
          document.body.removeChild(element);
        }, 300);
      });
    },
    }
}
</script>
<style scoped lang="scss">
.vehicle{
    li{
        width: 49%;
        padding-top: 13px;
        display: inline-block;
    }
    span{
       color: #868B98 ;
    }
    margin: 10px 0 20px 5px
}
.dialog-footer{
    button{
        width: 96px;
        text-align: center;
    }
}
.quotation-title{
    color: var(--themeColor);
    font-weight: bold;
    font-size: 16px;
}
.quotation_title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #000000;
}
.tax-arrears{
    b,span{
        width: 33.3%;
    }
}
.quotation-style{
    font-size: 0;
    b{
        font-size: 14px;
        border-top: 1px solid #000 ;
    }
    b,span{
        display: inline-block;
        box-sizing: border-box;
        width: 33.3%;
        text-align: center;
        line-height: 40px;
        border-bottom: 1px solid #000 ;
        border-right: 1px solid #000 ;
        font-size: 14px;
    }
    span:last-child{
        border-right:0;
        // border-bottom: 1px solid #000 ;
    }
}
.blue_color{
  color: #fff;
  background: #2D4D89;
  border: 1px solid #2D4D89;
}
.blueplain_color{
  color: #2D4D89;
  background: #EAEDF1;
  border: 1px solid #EAEDF1;
}
.money_style{
    text-align: right ;
    div{
        line-height: 30px;
    }
    span{
        display: inline-block;
        width: 100px;
        text-align: left;
    }
}
/deep/ {
    .el-dialog__header{
        padding: 0 ;

    }
    .el-dialog__body{
        padding: 0;
        border-bottom: 1px solid #EEF1F6
    }
     .el-descriptions__body{
        padding:0
     }
    .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell{
        text-align: center;
    }
    .el-descriptions-item__content{
        color: #333333 ;
        font-weight: bold;
    }
    .el-descriptions-item__label.is-bordered-label{
        background: var(--themeColor);
        color: #fff;
    }

}
</style>