|
|
@@ -1,181 +1,170 @@
|
|
|
<template>
|
|
|
- <el-dialog :visible.sync="dialogVisible" width="1080px" class="quotation_style">
|
|
|
+ <el-dialog :visible.sync="dialogVisible" width="1080px" class="quotation_style" top="1vh">
|
|
|
<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 class="flex a-start" style="color: #333333;font-weight: 500;"
|
|
|
+ v-if="queryOrders.jqapplyno && queryOrders.syapplyno">
|
|
|
+ <span>投保单号：</span>
|
|
|
+ <div class="flex f-c ">
|
|
|
+ <span style="margin-right: 20px;" v-if="queryOrders.jqapplyno">{{ queryOrders.jqapplyno
|
|
|
+ }}（交强）</span>
|
|
|
+ <span style="margin-right: 20px;" v-if="queryOrders.syapplyno">{{ queryOrders.syapplyno
|
|
|
+ }}（商业）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="tableInfo">
|
|
|
- <div class="header">车辆信息</div>
|
|
|
- <el-descriptions :column="3" border>
|
|
|
- <el-descriptions-item label="车牌号">{{
|
|
|
+ <div class="header ">
|
|
|
+ <span class="title">车辆信息</span>
|
|
|
+ <div class="line"></div>
|
|
|
+ <span style="position: absolute;color: #333333;top: 0;right: 0;">{{ queryOrders.orderno }}</span>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="3" style="margin-top: 6px;">
|
|
|
+ <el-descriptions-item label-class-name="my-label" content-class-name="my-content" 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="座位数">
|
|
|
+ <el-descriptions-item label-class-name="my-label1" content-class-name="my-content" label="车架号">{{
|
|
|
+ queryOrders.carinfo.vinNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label2" content-class-name="my-content" label="发动机号">{{
|
|
|
+ queryOrders.carinfo.engineNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="注册日期">{{
|
|
|
+ queryOrders.carinfo.registerDate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label1" content-class-name="my-content" label="发证日期">{{
|
|
|
+ queryOrders.carinfo.issueDate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label2" content-class-name="my-content" label="车辆用途">
|
|
|
+ {{ queryOrders.carinfo.vehicleUse }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label" content-class-name="my-content" 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-item label-class-name="my-label1" content-class-name="my-content" label="车型">{{
|
|
|
+ queryOrders.carinfo.modelcname }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</div>
|
|
|
<div class="tableInfo">
|
|
|
- <div class="header">投被保人信息</div>
|
|
|
- <el-descriptions :column="3" border>
|
|
|
- <el-descriptions-item label="车主姓名">{{
|
|
|
+ <div class="header">
|
|
|
+ <span class="title">投被保人信息</span>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="3" style="margin-top: 6px;">
|
|
|
+ <el-descriptions-item label-class-name="my-label" content-class-name="my-content" 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 label-class-name="my-label1" content-class-name="my-content" label="投保人姓名">{{
|
|
|
+ queryOrders.applyinfo.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label2" content-class-name="my-content" label="被保人姓名">{{
|
|
|
+ queryOrders.insureinfo.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label" content-class-name="my-content" 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-item label-class-name="my-label1" content-class-name="my-content" label="投保人身份证号">{{
|
|
|
+ queryOrders.applyinfo.identifyNumber }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label-class-name="my-label2" content-class-name="my-content" 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 }}
|
|
|
+ <div class="header">
|
|
|
+ <span class="title">投保信息</span>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="2" style="margin-top: 6px;">
|
|
|
+ <el-descriptions-item v-if="queryOrders.jqstartdate && queryOrders.jqenddate" label-class-name="my-label"
|
|
|
+ content-class-name="my-content" label="车辆交强险保险期间">{{
|
|
|
+ queryOrders.jqstartdate }}至{{ queryOrders.jqenddate }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="queryOrders.systartdate && queryOrders.syenddate" label-class-name="my-label3"
|
|
|
+ content-class-name="my-content" label="车辆商业险保险期间">
|
|
|
+ {{ queryOrders.systartdate }}至{{ queryOrders.syenddate }}
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <div class="tableInfo">
|
|
|
- <div class="header flex a-c j-start">
|
|
|
- <span>车辆信息</span>
|
|
|
+ <div class="flex j-s a-start">
|
|
|
+ <div :style="{ width: jqWidth }" v-if="queryOrders.jqstartdate">
|
|
|
+ <el-table :data="jqProducts" stripe border :cell-style="{ padding: '4px 0' }" style="border-right: none !important;"
|
|
|
+ :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff', padding: '4px 0' }">
|
|
|
+ <el-table-column width="100" prop="label" align="center" label="产品类型">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="font-weight: bold;color: #333;">{{ scope.row.label }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" align="center" label="保险产品">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="100" prop="totalPremium" align="center" 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>
|
|
|
</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 :style="{ width: syWidth, height: '100%' }" v-if="queryOrders.systartdate">
|
|
|
+ <el-table :data="syProducts" stripe border :span-method="objectSpanMethod" :cell-style="{ padding: '4px 0' }"
|
|
|
+ :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff', padding: '4px 0' }">
|
|
|
+ <el-table-column width="100" prop="label" align="center" label="产品类型">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="font-weight: bold;color: #333;">{{ scope.row.label }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" align="center" label="险种">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="90" 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 " width="100" prop="coveragePremium" label="保费（元）">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.label == '商业险' ? scope.row.coveragePremium : '-'
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="100" 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>
|
|
|
</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 : '-'
|
|
|
- }}</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 :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="保额">
|
|
|
+ </div>
|
|
|
+ <el-table v-if="jyProducts.length > 0" :data="jyProducts" stripe border :span-method="objectSpanMethod1"
|
|
|
+ :cell-style="{ padding: '4px 0' }"
|
|
|
+ :header-cell-style="{ background: '#D42426 ', fontWeight: '500', color: '#fff', padding: '4px 0' }"
|
|
|
+ style="width: 100%;margin-top:10px;">
|
|
|
+ <el-table-column width="140" prop="label" 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>
|
|
|
+ <span style="font-weight: bold;color: #333;"> {{
|
|
|
+ queryOrders.jyName
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center" prop="coveragePremium" label="保费（元）">
|
|
|
+ <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">
|
|
|
{{
|
|
|
- scope.row.label == '商业险' ? scope.row.coveragePremium : '-'
|
|
|
+ scope.row.amount && scope.row.amount != 0 ? scope.row.amount : '-'
|
|
|
}}
|
|
|
</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 v-if="jyProducts.length>0" :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">
|
|
|
{{
|
|
|
@@ -188,25 +177,34 @@
|
|
|
<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>
|
|
|
+ (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
|
|
|
+ }}/每份</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <div class="tableInfo" style="margin-top:20px;" v-if="queryOrders.jyName">
|
|
|
- <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 /
|
|
|
+ <div class="flex a-c j-s" v-if="queryOrders.jyName" style="margin-top: 10px;color:#333;font-size: 16px;">
|
|
|
+ <span>{{ queryOrders.jyName }}</span>
|
|
|
+ <div>
|
|
|
+ <span style="color: #868B98;">座位数：</span>
|
|
|
+ <span>{{ queryOrders.carinfo.seatCount }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span style="color: #868B98;">每份：</span>
|
|
|
+ <span>{{ 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>
|
|
|
+ }}/每份</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span style="color: #868B98;">份数：</span>
|
|
|
+ <span>{{ queryOrders.jyQuantity ? queryOrders.jyQuantity
|
|
|
+ : 1
|
|
|
+ }}份</span>
|
|
|
+ </div>
|
|
|
+ <div style="color: #D42426;font-size: 18px; font-weight: bold;">
|
|
|
+ <span>合计：</span>
|
|
|
+ <span>{{
|
|
|
+ queryOrders.jypremium }}元</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="payable_amount">
|
|
|
<h3>
|
|
|
@@ -220,75 +218,6 @@
|
|
|
}}</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="交强险名称">
|
|
|
- <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>
|
|
|
@@ -315,35 +244,77 @@ export default {
|
|
|
dialogVisible: false,
|
|
|
logoImg: '',
|
|
|
userId: Cookies.get("user"),
|
|
|
- allProducts: [],
|
|
|
+ jqProducts: [{
|
|
|
+ label: "交强险",
|
|
|
+ }],
|
|
|
+ syProducts: [],
|
|
|
jyProducts: [],
|
|
|
+ outOfBusinessVehicleUseoptions: [],
|
|
|
+ businessVehicleUseoptions: [],
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getDicType("businessVehicleUse"); //（车辆用途）营业
|
|
|
+ this.getDicType("outOfBusinessVehicleUse"); //（车辆用途）非营业
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ jqWidth() {
|
|
|
+ // 根据 v-if 的条件返回不同的宽度
|
|
|
+ return this.queryOrders.jqstartdate && this.queryOrders.systartdate ? '30%' : '100%';
|
|
|
+ },
|
|
|
+ syWidth() {
|
|
|
+ // 根据 v-if 的条件返回不同的宽度
|
|
|
+ return this.queryOrders.jqstartdate && this.queryOrders.systartdate ? '70%' : '100%';
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ spanMethod({ columnIndex }) {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ return [1, 2]; // 合并列
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDicType(type) {
|
|
|
+ this.$api.insCompany.dicType(type).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this[type + "options"] = res.data.ddList;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
setBackupVisible: function (backupVisible) {
|
|
|
+ this.jyProducts=[];
|
|
|
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);
|
|
|
+ if (
|
|
|
+ (this.queryOrders.carinfo.carnature &&
|
|
|
+ this.queryOrders.carinfo.carnature == "02") ||
|
|
|
+ this.queryOrders.carinfo.carnature == "非营业"
|
|
|
+ ) {
|
|
|
+ this.queryOrders.carinfo.vehicleUse = this.capTypedictTag(
|
|
|
+ this.queryOrders.carinfo.vehicleUse,
|
|
|
+ this.outOfBusinessVehicleUseoptions
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.queryOrders.carinfo.vehicleUse = this.capTypedictTag(
|
|
|
+ this.queryOrders.carinfo.vehicleUse,
|
|
|
+ this.businessVehicleUseoptions
|
|
|
+ );
|
|
|
+ }
|
|
|
+ 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.jqpremium) {
|
|
|
+ this.jqProducts.forEach(e => { e.name = '交通事故强制责任险'; 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.syProducts = data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo : [];
|
|
|
this.jyProducts = data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo : [];
|
|
|
}
|
|
|
- else {
|
|
|
- this.allProducts = data.jqInsuranceType
|
|
|
- }
|
|
|
},
|
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
if (columnIndex === 0) { // 假设我们要合并第三列（类型列）
|
|
|
- const rows = this.allProducts;
|
|
|
+ const rows = this.syProducts;
|
|
|
let prevRow = rows[rowIndex - 1];
|
|
|
if (prevRow && row.label === prevRow.label) {
|
|
|
return [1, 0]; // 上一行与当前行相同，合并当前单元格
|
|
|
@@ -360,7 +331,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
if (columnIndex === 4) { // 假设我们要合并第三列（类型列）
|
|
|
- const rows = this.allProducts;
|
|
|
+ const rows = this.syProducts;
|
|
|
let prevRow = rows[rowIndex - 1];
|
|
|
if (prevRow && row.totalPremium === prevRow.totalPremium) {
|
|
|
return [1, 0]; // 上一行与当前行相同，合并当前单元格
|
|
|
@@ -430,6 +401,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ capTypedictTag(val, option) {
|
|
|
+ if (option.find((item) => item.dictValue == val)) {
|
|
|
+ return option.find((item) => item.dictValue == val).dictTag;
|
|
|
+ } else {
|
|
|
+ return "-";
|
|
|
+ }
|
|
|
+ },
|
|
|
// 截图粘贴
|
|
|
copybjd() {
|
|
|
html2Canvas(document.getElementById("pdfContentsDiv"), {
|
|
|
@@ -462,17 +440,26 @@ export default {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.tableInfo {
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
|
.header {
|
|
|
- background: rgba(212,36,38,0.06);
|
|
|
- color: #000;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- padding: 18px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #000;
|
|
|
- border-bottom: none;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ background: #D42426;
|
|
|
+ border-radius: 2px 2px 0px 0px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 2px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: #D42426;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -509,28 +496,36 @@ export default {
|
|
|
padding: 5px 10px 0 0;
|
|
|
background: rgba(212, 36, 38, 0.06);
|
|
|
border-bottom: 4px #D42426 solid;
|
|
|
-
|
|
|
+ color: #333333;
|
|
|
h3>span {
|
|
|
margin-left: 50px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ {
|
|
|
- .el-table td.el-table__cell,
|
|
|
- .el-table th.el-table__cell.is-leaf {
|
|
|
- border-bottom: 1px solid #000;
|
|
|
- }
|
|
|
+ // .el-table td.el-table__cell,
|
|
|
+ // .el-table th.el-table__cell.is-leaf {
|
|
|
+ // border-bottom: 1px solid #000;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-table--border .el-table__cell,
|
|
|
+ // .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
|
|
+ // border-right: 1px solid #000;
|
|
|
+ // }
|
|
|
+
|
|
|
|
|
|
- .el-table--border .el-table__cell,
|
|
|
- .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
|
|
- border-right: 1px solid #000;
|
|
|
- }
|
|
|
|
|
|
- .el-table--border,
|
|
|
+
|
|
|
+ .jqProductsClass {
|
|
|
+ .el-table--border,
|
|
|
+ .el-table--border,
|
|
|
.el-table--group {
|
|
|
border: 1px solid #000;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+
|
|
|
.el-dialog__header {
|
|
|
padding: 0;
|
|
|
|
|
|
@@ -551,16 +546,28 @@ export default {
|
|
|
border: 1px solid #000;
|
|
|
}
|
|
|
|
|
|
+ .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
.el-descriptions-row {
|
|
|
.my-label {
|
|
|
- background: #FFD6D7;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
+ color: #868B98;
|
|
|
+ }
|
|
|
+ .my-label1 {
|
|
|
+ color: #868B98;
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ .my-label2 {
|
|
|
+ color: #868B98;
|
|
|
+ margin-left: 100px;
|
|
|
+ }
|
|
|
+ .my-label3 {
|
|
|
+ color: #868B98;
|
|
|
+ margin-left: 80px;
|
|
|
}
|
|
|
-
|
|
|
.my-content {
|
|
|
- color: #D42426;
|
|
|
- font-weight: bold;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
