报价单

src/views/Core/components/quotationDialog.vue

@@ -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;
     }
   }
 }