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

<template>
     <el-dialog
      :visible.sync="dialogVisible"
      width="1080px"
      class="quotation_style"
    >
        <div id="pdfContentsDiv" style="padding: 25px;height: auto;" v-watermark='userId'>
            <div slot="title" class="dialog-title quotation-title">
                <img
            :src="queryOrders.logoImg"
            class="align"
            alt
            style="width: 28px; height: 28px;vertical-align: middle"
          />
                <span>{{queryOrders.inscompany}}-报价单</span>
            </div>
            <div class="vehicle">
                <li>
                    <span>订单号：</span>{{ queryOrders.orderno }}
                </li>
                <li>
                    <span>发动机号：</span>{{ queryOrders.carinfo.engineNo }}
                </li>
                <li>
                    <span>车主姓名：</span>{{ queryOrders.ownerinfo.name }}
                </li>
                <li>
                    <span>车牌号：</span>{{ queryOrders.carinfo.licenseNo }}
                </li>
                <li>
                    <span>车架号：</span>{{ queryOrders.carinfo.vinNo }}
                </li>
                <li>
                    <span>投保人姓名：</span>{{ queryOrders.applyinfo.name }}
                </li>
                <li>
                    <span>车型：</span>{{ queryOrders.carinfo.modelcname  }}
                </li>
                <li>
                    <span>座位数：</span>{{ queryOrders.carinfo.seatCount }}
                </li>
                <li>
                    <span>被保人姓名：</span>{{ queryOrders.insureinfo.name }}
                </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>
            <el-descriptions  :column="5" border direction="vertical">
                <el-descriptions-item label="交强险" >{{ queryOrders.jqpremium?'￥'+queryOrders.jqpremium:'-' }}</el-descriptions-item>
                <el-descriptions-item label="车船税" >{{ queryOrders.taxamount?'￥'+ queryOrders.taxamount:'-' }}</el-descriptions-item>
                <el-descriptions-item label="车辆商业险" >{{ queryOrders.sypremium?'￥'+ queryOrders.sypremium:'-' }}</el-descriptions-item>
                <el-descriptions-item label="驾意险" >{{ queryOrders.jypremium?'￥'+ queryOrders.jypremium:'-' }}</el-descriptions-item>
                <el-descriptions-item label="应缴金额" >
                    <span style="color:#D42426">￥{{ queryOrders.sumpremium }}</span>
                </el-descriptions-item>
            </el-descriptions>
            <el-table
                v-if="queryOrders.jqInsuranceType && queryOrders.jqInsuranceType.length>0"
                :data="queryOrders.jqInsuranceType"
                stripe
                border
                :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column
                prop="name"
                align="center"
                label="交强险名称">
                <template  slot-scope="scope">
                    <span style="color: #D42426;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="amount"
                align="center"
                label="保险金额">
                <template  slot-scope="scope">
                        <span >￥{{ scope.row.amount ?scope.row.amount:'-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                v-if="queryOrders.kindinfo && queryOrders.kindinfo.length>0"
                :data="queryOrders.kindinfo"
                stripe
                border
                :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column
                prop="kindName"
                align="center"
                label="商业险险别">
                <template  slot-scope="scope">
                    <span style="color: #D42426;">{{ scope.row.kindName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                align="center"
                label="保险金额">
                <template  slot-scope="scope">
                    <div
                    v-if="['D4', 'SY_FJ_YBW2'].includes(scope.row.kindCode)"
                  >
                    <span>{{ scope.row.unitAmount }}</span
                    >/<span>{{ queryOrders.carinfo.seatCount - 1 }}座</span>
                  </div>
                  <div
                    v-else-if="
                      ['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(
                        scope.row.kindCode
                      )
                    "
                  >
                    <span>{{ scope.row.deductibleRate }}</span>
                  </div>
                  <div
                    v-else-if="
                      ['TY1', 'TY2', 'TY3', 'TY4'].includes(
                        scope.row.kindCode
                      )
                    "
                  >
                    <span>{{ scope.row.serviceTimes }}/次</span>
                  </div>
                  <div v-else>
                    <span>{{ scope.row.amount }}</span>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="coveragePremium"
                label="保费">
                    <template  slot-scope="scope">
                        <span >￥{{ scope.row.coveragePremium }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                v-if="queryOrders.accidentInfo && queryOrders.accidentInfo.length>0"
                :data="queryOrders.accidentInfo"
                stripe
                border
                :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column
                prop="name"
                align="center"
                label="驾意险名称">
                <template  slot-scope="scope">
                    <span style="color: #D42426;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="amount"
                align="center"
                label="保险金额">
                <template  slot-scope="scope">
                        <span >￥{{ scope.row.amount ?scope.row.amount:'-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="premium"
                label="保费">
                    <template  slot-scope="scope">
                        <span >￥{{ scope.row.premium?scope.row.premium:'-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px 0;">报价时间：{{ queryOrders.createtime }}</div>
            <div>注：本报价单仅供参考，最终以出单价格为准。</div>
        </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="copybjd()">截图</el-button>
        <el-button size="small" type="primary" plain @click="dialogVisible = false">关闭</el-button>
    </span>
    </el-dialog>
</template>
<script>
import html2Canvas from "html2canvas";
import Cookies from "js-cookie";

export default {
  name: "quotationDialog",
    props:{
        queryOrders:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            dialogVisible:false,
            logoImg:'',
            userId:Cookies.get("user")
        }
    },
    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: 33%;
        padding-top: 13px;
        display: inline-block;
    }
    span{
       color: #868B98 ;
    }
    margin: 10px 0 20px 0
}
.dialog-footer{
    button{
        width: 96px;
        text-align: center;
    }
}
.quotation-title{
    color: var(--themeColor);
    font-weight: bold;
    font-size: 16px;
}
/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>