|
|
@@ -1,47 +1,121 @@
|
|
|
<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-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 flex a-c j-s">
|
|
|
+ <div>
|
|
|
+ <img :src="queryOrders.logoImg" class="align" alt style="width: 28px; height: 28px;vertical-align: middle" />
|
|
|
+ <span>{{ queryOrders.inscompany }}-报价单</span>
|
|
|
+ </div>
|
|
|
+ <span style="margin-right: 30px;">{{ queryOrders.orderno }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="tableInfo">
|
|
|
+ <div class="header">车辆信息</div>
|
|
|
+ <el-descriptions :column="3" border>
|
|
|
+ <el-descriptions-item label="车牌号">{{
|
|
|
+ queryOrders.carinfo.licenseNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="车架号">{{ queryOrders.carinfo.vinNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发动机号">{{ queryOrders.carinfo.engineNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="座位数">
|
|
|
+ {{ queryOrders.carinfo.seatCount }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="车型" :span="2">{{ queryOrders.carinfo.modelcname }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="注册日期" :span="1.5">{{ queryOrders.carinfo.registerDate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="发证日期" :span="1.5">{{ queryOrders.carinfo.issueDate }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="tableInfo">
|
|
|
+ <div class="header">投被保人信息</div>
|
|
|
+ <el-descriptions :column="3" border>
|
|
|
+ <el-descriptions-item label="车主姓名">{{
|
|
|
+ queryOrders.ownerinfo.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="投保人姓名">{{ queryOrders.applyinfo.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="被保人姓名">{{ queryOrders.insureinfo.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="车主身份证号">
|
|
|
+ {{ queryOrders.ownerinfo.identifyNumber}}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="投保人身份证号">{{ queryOrders.applyinfo.identifyNumber }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="被保人身份证号">{{ queryOrders.insureinfo.identifyNumber }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="tableInfo">
|
|
|
+ <div class="header">投保信息</div>
|
|
|
+ <el-descriptions :column="2" border>
|
|
|
+ <el-descriptions-item v-if="queryOrders.jqstartdate && queryOrders.jqenddate" label="交强险起保日期">{{
|
|
|
+ queryOrders.jqstartdate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="queryOrders.jqstartdate && queryOrders.jqenddate" label="交强险终保日期">{{
|
|
|
+ queryOrders.jqenddate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="queryOrders.systartdate && queryOrders.syenddate" label="商业险起保日期">{{
|
|
|
+ queryOrders.systartdate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="queryOrders.systartdate && queryOrders.syenddate" label="商业险终保日期">
|
|
|
+ {{ queryOrders.syenddate }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="tableInfo">
|
|
|
+ <div class="header flex a-c j-start">
|
|
|
+ <span>车辆信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="content flex a-c f-wrap">
|
|
|
+ <div class="flex a-c">
|
|
|
+ <div class="textBlock flex j-c a-c">车牌号</div>
|
|
|
+ <div class="dataBlock flex j-c a-c"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex a-c">
|
|
|
+ <div class="textBlock flex j-c a-c">车架号</div>
|
|
|
+ <div class="dataBlock flex j-c a-c">{{ queryOrders.carinfo.vinNo }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex a-c">
|
|
|
+ <div class="textBlock flex j-c a-c">发动机号</div>
|
|
|
+ <div class="dataBlock flex j-c a-c">{{ queryOrders.carinfo.engineNo }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex a-c">
|
|
|
+ <div class="textBlock flex j-c a-c" >座位数</div>
|
|
|
+ <div class="dataBlock flex j-c a-c">{{ queryOrders.carinfo.seatCount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex a-c">
|
|
|
+ <div class="textBlock flex j-c a-c">车型</div>
|
|
|
+ <div class="dataBlock flex j-c a-c">{{ queryOrders.carinfo.modelcname }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- <div class="vehicle">
|
|
|
+ <li>
|
|
|
+ <span>订单号:</span>
|
|
|
+ </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 : '-'
|
|
|
@@ -54,57 +128,99 @@
|
|
|
<span style="color:#D42426">¥{{ queryOrders.sumpremium }}</span>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions> -->
|
|
|
- <el-table :data="allProducts" stripe border :span-method="objectSpanMethod"
|
|
|
- :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff' }" style="width: 100%">
|
|
|
- <el-table-column width="100" prop="label" align="center" label="产品类型">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column width="450" prop="name" align="center" label="险别/名称">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="amount" 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">
|
|
|
- {{ scope.row.label=='商业险'?scope.row.coveragePremium:scope.row.label=='驾意险'?scope.row.premium!=0?scope.row.premium:'-':'-' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="totalPremium" label="总计(元)">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span style="color:#D42426;font-weight: bold;">{{ scope.row.totalPremium }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="payable_amount">
|
|
|
- <h3>
|
|
|
- <span v-if="queryOrders.jqpremium">交强险:{{ queryOrders.jqpremium + '元' }}</span>
|
|
|
- <span v-if="queryOrders.sypremium">车辆商业险:{{ queryOrders.sypremium + '元' }}</span>
|
|
|
- <span v-if="queryOrders.jypremium">驾意险:{{ queryOrders.jypremium + '元' }}</span>
|
|
|
- <span v-if="queryOrders.taxamount">车船税:{{ queryOrders.taxamount + '元' }}</span>
|
|
|
- </h3>
|
|
|
- <h2>
|
|
|
- <span v-if="queryOrders.sumpremium">应缴金额:<b style="color:#D42426;font-size:26px">{{ queryOrders.sumpremium }}</b> <span style="color:#D42426;font-size:20px">元</span></span>
|
|
|
- </h2>
|
|
|
+ <el-table :data="allProducts" stripe border :span-method="objectSpanMethod"
|
|
|
+ :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff' }" style="width: 100%">
|
|
|
+ <el-table-column width="100" prop="label" align="center" label="产品类型">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="450" prop="name" align="center" label="险别/名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="amount" 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>
|
|
|
- <!-- <el-table v-if="queryOrders.jqInsuranceType && queryOrders.jqInsuranceType.length > 0"
|
|
|
+ <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">
|
|
|
+ {{
|
|
|
+ scope.row.label == '商业险' ? scope.row.coveragePremium : '-'
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="totalPremium" label="总计(元)">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="color:#D42426;font-weight: bold;font-size: 16px;">{{ scope.row.totalPremium }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="jyProducts" stripe border :span-method="objectSpanMethod1"
|
|
|
+ :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff' }" style="width: 100%;margin-top:20px;">
|
|
|
+ <el-table-column width="100" prop="label" align="center" label="驾意险名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="450" prop="name" align="center" label="保险责任">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="amount" label="保额"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="premium" label="保费(元)">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.premium && scope.row.premium != 0 ? scope.row.premium : '-'
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="each" label="每份">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="totalPremium" label="总计(元)">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="color:#D42426;font-weight: bold;font-size: 16px;">{{ queryOrders.jypremium /
|
|
|
+ (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
|
|
|
+ }}/每份</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="tableInfo" style="margin-top:20px;">
|
|
|
+ <el-descriptions direction="vertical" :column="5" border>
|
|
|
+ <el-descriptions-item label="驾意险名称" label-class-name="my-label">{{ queryOrders.jyName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="座位数" label-class-name="my-label">{{ queryOrders.carinfo.seatCount
|
|
|
+ }}座</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="份数" label-class-name="my-label">{{ queryOrders.jyQuantity ? queryOrders.jyQuantity : 1
|
|
|
+ }}份</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="每份" label-class-name="my-label">{{ queryOrders.jypremium /
|
|
|
+ (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
|
|
|
+ }}/每份
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="合计(元)" label-class-name="my-label" content-class-name="my-content">合计:{{
|
|
|
+ queryOrders.jypremium }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="payable_amount">
|
|
|
+ <h3>
|
|
|
+ <span v-if="queryOrders.jqpremium">交强险:{{ queryOrders.jqpremium + '元' }}</span>
|
|
|
+ <span v-if="queryOrders.sypremium">车辆商业险:{{ queryOrders.sypremium + '元' }}</span>
|
|
|
+ <span v-if="queryOrders.jypremium">驾意险:{{ queryOrders.jypremium + '元' }}</span>
|
|
|
+ <span v-if="queryOrders.taxamount">车船税:{{ queryOrders.taxamount + '元' }}</span>
|
|
|
+ </h3>
|
|
|
+ <h2>
|
|
|
+ <span v-if="queryOrders.sumpremium">应缴金额:<b style="color:#D42426;font-size:26px">{{ queryOrders.sumpremium
|
|
|
+ }}</b> <span style="color:#D42426;font-size:20px">元</span></span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <!-- <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="交强险名称">
|
|
|
@@ -173,185 +289,264 @@
|
|
|
</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;allProducts=[]">关闭</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
+ <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; allProducts = []">关闭</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"),
|
|
|
- allProducts: []
|
|
|
- }
|
|
|
- },
|
|
|
+ name: "quotationDialog",
|
|
|
+ props: {
|
|
|
+ queryOrders: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ logoImg: '',
|
|
|
+ userId: Cookies.get("user"),
|
|
|
+ allProducts: [],
|
|
|
+ jyProducts: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- created() {
|
|
|
+ created() {
|
|
|
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setBackupVisible: function (backupVisible) {
|
|
|
+ this.dialogVisible = backupVisible
|
|
|
+ this.queryOrders.ownerinfo.identifyNumber=this.queryOrders.ownerinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.ownerinfo.identifyNumber.slice(14,18);
|
|
|
+ this.queryOrders.applyinfo.identifyNumber=this.queryOrders.applyinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.applyinfo.identifyNumber.slice(14,18);
|
|
|
+ this.queryOrders.insureinfo.identifyNumber=this.queryOrders.insureinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.insureinfo.identifyNumber.slice(14,18);
|
|
|
+ let data = JSON.parse(JSON.stringify(this.queryOrders))
|
|
|
+ data.jqInsuranceType.forEach(e => { e.label = '交强险'; e.totalPremium = data.jqpremium });
|
|
|
+ if ((data.kindinfo && data.kindinfo.length > 0) || (data.accidentInfo && data.accidentInfo.length > 0)) {
|
|
|
+ data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo.forEach(el => { el.label = '商业险', el.name = el.kindName; el.totalPremium = data.sypremium }) : data.kindinfo
|
|
|
+ data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo.forEach(e => { e.label = '驾意险'; e.totalPremium = data.jypremium; e.each = "每份" }) : data.accidentInfo
|
|
|
+ this.allProducts = data.jqInsuranceType.concat(data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo : [])
|
|
|
+ this.jyProducts = data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo : [];
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.allProducts = data.jqInsuranceType
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- setBackupVisible: function (backupVisible) {
|
|
|
- this.dialogVisible = backupVisible
|
|
|
- let data = JSON.parse(JSON.stringify(this.queryOrders))
|
|
|
- data.jqInsuranceType.forEach(e => {e.label = '交强险';e.totalPremium=data.jqpremium});
|
|
|
- if((data.kindinfo && data.kindinfo.length > 0) || (data.accidentInfo && data.accidentInfo.length > 0)){
|
|
|
- data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo.forEach(el => {el.label = '商业险', el.name = el.kindName;el.totalPremium=data.sypremium}) : data.kindinfo
|
|
|
- data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo.forEach(e => {e.label = '驾意险';e.totalPremium=data.jypremium}) : data.accidentInfo
|
|
|
- this.allProducts =data.jqInsuranceType.concat(data.kindinfo && data.kindinfo.length > 0?data.kindinfo:[],data.accidentInfo && data.accidentInfo.length > 0? data.accidentInfo:[])
|
|
|
-
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0) { // 假设我们要合并第三列(类型列)
|
|
|
+ const rows = this.allProducts;
|
|
|
+ let prevRow = rows[rowIndex - 1];
|
|
|
+ if (prevRow && row.label === prevRow.label) {
|
|
|
+ return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
+ } else {
|
|
|
+ let rowspan = 1;
|
|
|
+ for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
+ if (rows[i].label === row.label) {
|
|
|
+ rowspan++;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
}
|
|
|
- else{
|
|
|
- this.allProducts=data.jqInsuranceType
|
|
|
+ }
|
|
|
+ return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (columnIndex === 4) { // 假设我们要合并第三列(类型列)
|
|
|
+ const rows = this.allProducts;
|
|
|
+ let prevRow = rows[rowIndex - 1];
|
|
|
+ if (prevRow && row.totalPremium === prevRow.totalPremium) {
|
|
|
+ return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
+ } else {
|
|
|
+ let rowspan = 1;
|
|
|
+ for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
+ if (rows[i].totalPremium === row.totalPremium) {
|
|
|
+ rowspan++;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0) { // 假设我们要合并第三列(类型列)
|
|
|
+ const rows = this.jyProducts;
|
|
|
+ let prevRow = rows[rowIndex - 1];
|
|
|
+ if (prevRow && row.label === prevRow.label) {
|
|
|
+ return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
+ } else {
|
|
|
+ let rowspan = 1;
|
|
|
+ for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
+ if (rows[i].label === row.label) {
|
|
|
+ rowspan++;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
}
|
|
|
- },
|
|
|
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
- if (columnIndex === 0) { // 假设我们要合并第三列(类型列)
|
|
|
- const rows = this.allProducts;
|
|
|
- let prevRow = rows[rowIndex - 1];
|
|
|
- if (prevRow && row.label === prevRow.label) {
|
|
|
- return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
- } else {
|
|
|
- let rowspan = 1;
|
|
|
- for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
- if (rows[i].label === row.label) {
|
|
|
- rowspan++;
|
|
|
- } else {
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
- }
|
|
|
+ }
|
|
|
+ return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (columnIndex === 4) { // 假设我们要合并第三列(类型列)
|
|
|
+ const rows = this.jyProducts;
|
|
|
+ let prevRow = rows[rowIndex - 1];
|
|
|
+ if (prevRow && row.each === prevRow.each) {
|
|
|
+ return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
+ } else {
|
|
|
+ let rowspan = 1;
|
|
|
+ for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
+ if (rows[i].each === row.each) {
|
|
|
+ rowspan++;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
}
|
|
|
- if (columnIndex === 4) { // 假设我们要合并第三列(类型列)
|
|
|
- const rows = this.allProducts;
|
|
|
- let prevRow = rows[rowIndex - 1];
|
|
|
- if (prevRow && row.totalPremium === prevRow.totalPremium) {
|
|
|
- return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
- } else {
|
|
|
- let rowspan = 1;
|
|
|
- for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
- if (rows[i].totalPremium === row.totalPremium) {
|
|
|
- rowspan++;
|
|
|
- } else {
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
- }
|
|
|
+ }
|
|
|
+ return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (columnIndex === 5) { // 假设我们要合并第三列(类型列)
|
|
|
+ const rows = this.jyProducts;
|
|
|
+ let prevRow = rows[rowIndex - 1];
|
|
|
+ if (prevRow && row.totalPremium === prevRow.totalPremium) {
|
|
|
+ return [1, 0]; // 上一行与当前行相同,合并当前单元格
|
|
|
+ } else {
|
|
|
+ let rowspan = 1;
|
|
|
+ for (let i = rowIndex + 1; i < rows.length; i++) {
|
|
|
+ if (rows[i].totalPremium === row.totalPremium) {
|
|
|
+ rowspan++;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
- // 截图粘贴
|
|
|
- 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);
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
+ }
|
|
|
+ return [rowspan, 1]; // 返回行合并数目和列合并数目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 截图粘贴
|
|
|
+ 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">
|
|
|
+.tableInfo {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ background: #FFD6D7;
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 18px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #000;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.vehicle {
|
|
|
- li {
|
|
|
- width: 33%;
|
|
|
- padding-top: 13px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+ li {
|
|
|
+ width: 33%;
|
|
|
+ padding-top: 13px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- color: #868B98;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ color: #868B98;
|
|
|
+ }
|
|
|
|
|
|
- margin: 10px 0 20px 0
|
|
|
+ margin: 10px 0 20px 0
|
|
|
}
|
|
|
|
|
|
.dialog-footer {
|
|
|
- button {
|
|
|
- width: 96px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ button {
|
|
|
+ width: 96px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.quotation-title {
|
|
|
- color: var(--themeColor);
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
+ color: var(--themeColor);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
-.payable_amount{
|
|
|
- margin-top: 15px;
|
|
|
- text-align: right;
|
|
|
- padding: 5px 10px 0 0;
|
|
|
- background: rgba(212,36,38,0.06);
|
|
|
- border-bottom: 4px #D42426 solid;
|
|
|
- h3>span{
|
|
|
- margin-left: 50px;
|
|
|
- }
|
|
|
+
|
|
|
+.payable_amount {
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: right;
|
|
|
+ padding: 5px 10px 0 0;
|
|
|
+ background: rgba(212, 36, 38, 0.06);
|
|
|
+ border-bottom: 4px #D42426 solid;
|
|
|
+
|
|
|
+ h3>span {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
/deep/ {
|
|
|
- .el-dialog__header {
|
|
|
- padding: 0;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .el-dialog__body {
|
|
|
- padding: 0;
|
|
|
- border-bottom: 1px solid #EEF1F6
|
|
|
- }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: 1px solid #EEF1F6
|
|
|
+ }
|
|
|
|
|
|
- .el-descriptions__body {
|
|
|
- padding: 0
|
|
|
- }
|
|
|
+ .el-descriptions-item__label.is-bordered-label {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .el-descriptions .is-bordered .el-descriptions-item__cell {
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #000;
|
|
|
+ }
|
|
|
|
|
|
- .el-descriptions-item__content {
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
+ .el-descriptions-row {
|
|
|
+ .my-label {
|
|
|
+ background: #FFD6D7;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- .el-descriptions-item__label.is-bordered-label {
|
|
|
- background: var(--themeColor);
|
|
|
- color: #fff;
|
|
|
+ .my-content {
|
|
|
+ color: #D42426;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|