报价单修改

src/views/Core/components/quotationDialog.vue

@@ -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: 18px;">{{ 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%">
+        <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: 18px;">{{ queryOrders.jypremium /
+            (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
+          }}/每份31232</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,261 @@
                     </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
+      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>

src/views/Core/components/quotationDialogPro.vue

@@ -1,25 +1,65 @@
 <template>
-     <el-dialog
-      :visible.sync="dialogVisible"
-      width="1080px"
-      class="quotation_style"
-    >
-        <div id="pdfContentsDiv" style="padding: 25px;">
-            <div slot="title" class="dialog-title quotation-title">
-                <img
-                :src="queryOrders.logoImg"
-                class="align"
-                alt
-                style="width: 28px; height: 28px;vertical-align: middle;"
-            />
-                <span style="color:#000">{{queryOrders.inscompany}}-报价单</span>
-            </div>
-            <div style="border: 1px solid #000000;margin:10px 0">
-                <div  class="quotation_title">
-                    <div style="font-weight: 500;font-size: 24px;margin-bottom:5px">{{queryOrders.inscompany}}报价单</div>
-                    <div>报价时间:{{ queryOrders.createtime }}</div>
-                </div>
-            <div class="vehicle">
+  <el-dialog :visible.sync="dialogVisible" width="1080px" class="quotation_style">
+    <div id="pdfContentsDiv" style="padding: 25px;">
+      <div slot="title" class="dialog-title quotation-title">
+        <img :src="queryOrders.logoImg" class="align" alt style="width: 28px; height: 28px;vertical-align: middle;" />
+        <span style="color:#000">{{ queryOrders.inscompany }}-报价单</span>
+      </div>
+      <div style="border: 1px solid #000000;margin:10px 0">
+        <div class="quotation_title">
+          <div style="font-weight: 500;font-size: 24px;margin-bottom:5px">{{ queryOrders.inscompany }}报价单</div>
+          <div class="flex j-s a-c" style="padding:0 20px">
+            <div>订单号:{{ queryOrders.orderno }}</div>
+            <div>报价时间:{{ queryOrders.createtime }}</div>
+          </div>
+        </div>
+        <div style="margin:16px 0">
+          <div class="tableInfo flex ">
+            <div class="header flex a-c j-c">车辆信息</div>
+            <el-descriptions :column="3" border style="width: calc(100% - 100px);">
+              <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 flex ">
+            <div class="header flex a-c j-c">投被保人信息</div>
+            <el-descriptions :column="3" border style="width: calc(100% - 100px);">
+              <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 flex ">
+            <div class="header flex a-c j-c">投保信息</div>
+            <el-descriptions :column="2" border style="width: calc(100% - 100px);">
+              <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>
+
+        <!-- <div class="vehicle">
                 <li>
                     <span>订单号：</span>{{ queryOrders.orderno }}
                 </li>
@@ -47,15 +87,15 @@
                 <li>
                     <span>座位数：</span>{{ queryOrders.carinfo.seatCount }}
                 </li>
-               
+
                 <li style="width: 100%;">
                     <span>车辆交强险保险期间：</span>{{ queryOrders.jqstartdate }} 至 {{ queryOrders.jqenddate }}
                 </li>
                 <li style="width: 100%;" v-if="queryOrders.systartdate &&queryOrders.syenddate">
                     <span>车辆商业险保险期间：</span>{{ queryOrders.systartdate }} 至 {{ queryOrders.syenddate }}
                 </li>
-            </div>
-            <!-- <div class="quotation-style tax-arrears" v-if="queryOrders.kindinfo && queryOrders.kindinfo.length>0">
+            </div> -->
+        <!-- <div class="quotation-style tax-arrears" v-if="queryOrders.kindinfo && queryOrders.kindinfo.length>0">
                 <b>商业险险别</b>
                 <b>保额（元）</b>
                 <b style=" border-right:0">保费（元）</b>
@@ -85,138 +125,235 @@
                 <div v-if="queryOrders.jypremium">驾意险：<span>￥{{ queryOrders.jypremium }}</span></div>
                 <div style="font-weight: bold;">应缴金额：<span>￥{{ queryOrders.sumpremium }}</span></div>
             </div> -->
-            <el-table :data="allProducts" stripe border :span-method="objectSpanMethod"
-                :header-cell-style="{ background: 'rgba(45,77,137,0.1) ', fontWeight: 'bold', color: '#333333' }" 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:'-' }}
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" prop="totalPremium" label="总计（元）">
-                    <template slot-scope="scope">
-                        <span style="color:#2D4D89 ;font-weight: bold;">{{ scope.row.totalPremium }}</span>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div class="payable_amount">
-                <h3>
-                    <span v-if="queryOrders.sypremium">车辆商业险：{{ '￥'+ queryOrders.sypremium  }}</span>
-                    <span v-if="queryOrders.jqpremium">交强险：{{ '￥'+  queryOrders.jqpremium }}</span>
-                    <span v-if="queryOrders.taxamount">车船税：{{ '￥'+  queryOrders.taxamount  }}</span>
-                    <span v-if="queryOrders.jypremium">驾意险：{{'￥'+   queryOrders.jypremium }}</span>
-                </h3>
-                <h2>
-                    <span v-if="queryOrders.sumpremium">应缴金额：<span style="color:#2D4D89;font-size:20px">￥</span><b style="color:#2D4D89 ;font-size:26px">{{  queryOrders.sumpremium }}</b> </span>
-                </h2>
-            </div>
+        <el-table :data="allProducts" stripe border :span-method="objectSpanMethod"
+          :header-cell-style="{ background: 'rgba(45,77,137,0.1) ', fontWeight: 'bold', color: '#333333' }"
+          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 : '-'
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="totalPremium" label="总计（元）">
+            <template slot-scope="scope">
+              <span style="color:#2D4D89 ;font-weight: bold;font-size: 18px;">{{ scope.row.totalPremium }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-table :data="jyProducts" stripe border :span-method="objectSpanMethod1"
+        :header-cell-style="{ background: 'rgba(45,77,137,0.1) ', fontWeight: 'bold', color: '#333333' }" 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="保额"></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:#2D4D89;font-weight: bold;font-size: 18px;">{{ queryOrders.jypremium /
+            (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
+          }}/每份</span>
+          </template>
+        </el-table-column>
+      </el-table>
+        <div class="tableInfo">
+          <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.sypremium">车辆商业险：{{ '￥' + queryOrders.sypremium }}</span>
+            <span v-if="queryOrders.jqpremium">交强险：{{ '￥' + queryOrders.jqpremium }}</span>
+            <span v-if="queryOrders.taxamount">车船税：{{ '￥' + queryOrders.taxamount }}</span>
+            <span v-if="queryOrders.jypremium">驾意险：{{ '￥' + queryOrders.jypremium }}</span>
+          </h3>
+          <h2>
+            <span v-if="queryOrders.sumpremium">应缴金额：<span style="color:#2D4D89;font-size:20px">￥</span><b
+                style="color:#2D4D89 ;font-size:26px">{{ queryOrders.sumpremium }}</b> </span>
+          </h2>
         </div>
-        <div >注：本报价单仅供参考，最终以出单价格为准。</div>
+      </div>
+      <div>注：本报价单仅供参考，最终以出单价格为准。</div>
 
     </div>
     <span slot="footer" class="dialog-footer">
-        <el-button type="primary" class="blue_color" size="small" @click="copybjd()">截图</el-button>
-        <el-button size="small" class="blueplain_color"  @click="dialogVisible = false">关闭</el-button>
+      <el-button type="primary" class="blue_color" size="small" @click="copybjd()">截图</el-button>
+      <el-button size="small" class="blueplain_color" @click="dialogVisible = false">关闭</el-button>
     </span>
-    </el-dialog>
+  </el-dialog>
 </template>
 <script>
 import html2Canvas from "html2canvas";
 
 export default {
   name: "quotationDialog",
-    props:{
-        queryOrders:{
-            type:Object,
-            default:{}
-        }
+  props: {
+    queryOrders: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      logoImg: '',
+      allProducts: [],
+      jyProducts: [],
+    }
+  },
+  created() {
+  },
+  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; 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
+      }
     },
-    data(){
-        return{
-            dialogVisible:false,
-            logoImg:'',
-            allProducts:[]
+    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]; // 返回行合并数目和列合并数目
         }
-    },
-    created(){
-    },
-    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:[])
-
+      }
+      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;
             }
-            else{
-                this.allProducts=data.jqInsuranceType
+          }
+          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;
             }
-        },
-        // 截图粘贴
+          }
+          return [rowspan, 1]; // 返回行合并数目和列合并数目
+        }
+      }
+    },
+    // 截图粘贴
     copybjd() {
       html2Canvas(document.getElementById("pdfContentsDiv"), {
         allowTaint: true,
@@ -242,116 +379,179 @@ export default {
         }, 300);
       });
     },
-    }
+  }
 }
 </script>
 <style scoped lang="scss">
-.vehicle{
-    li{
-        width: 49%;
-        padding-top: 13px;
-        display: inline-block;
-    }
-    span{
-       color: #868B98 ;
-    }
-    margin: 10px 0 20px 5px
-}
-.dialog-footer{
-    button{
-        width: 96px;
-        text-align: center;
-    }
-}
-.quotation-title{
-    color: var(--themeColor);
-    font-weight: bold;
+.tableInfo {
+  .header {
+    width: 100px;
+    background: #EAEDF3;
+    color: #000;
+    padding: 0 18px;
+    box-sizing: border-box;
+    text-align: center;
     font-size: 16px;
+    font-weight: bold;
+    border: 1px solid #000;
+    border-left: none;
+    border-right: none;
+  }
 }
-.quotation_title{
+
+.vehicle {
+  li {
+    width: 49%;
+    padding-top: 13px;
+    display: inline-block;
+  }
+
+  span {
+    color: #868B98;
+  }
+
+  margin: 10px 0 20px 5px
+}
+
+.dialog-footer {
+  button {
+    width: 96px;
     text-align: center;
-    padding: 10px 0;
-    border-bottom: 1px solid #000000;
+  }
 }
-.tax-arrears{
-    b,span{
-        width: 33.3%;
-    }
+
+.quotation-title {
+  color: var(--themeColor);
+  font-weight: bold;
+  font-size: 16px;
 }
-.quotation-style{
-    font-size: 0;
-    b{
-        font-size: 14px;
-        border-top: 1px solid #000 ;
-    }
-    b,span{
-        display: inline-block;
-        box-sizing: border-box;
-        width: 33.3%;
-        text-align: center;
-        line-height: 40px;
-        border-bottom: 1px solid #000 ;
-        border-right: 1px solid #000 ;
-        font-size: 14px;
-    }
-    span:last-child{
-        border-right:0;
-        // border-bottom: 1px solid #000 ;
-    }
+
+.quotation_title {
+  text-align: center;
+  padding: 10px 0;
+  color: #000;
+  border-bottom: 1px solid #000000;
+}
+
+.tax-arrears {
+
+  b,
+  span {
+    width: 33.3%;
+  }
 }
-.blue_color{
+
+.quotation-style {
+  font-size: 0;
+
+  b {
+    font-size: 14px;
+    border-top: 1px solid #000;
+  }
+
+  b,
+  span {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 33.3%;
+    text-align: center;
+    line-height: 40px;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+    font-size: 14px;
+  }
+
+  span:last-child {
+    border-right: 0;
+    // border-bottom: 1px solid #000 ;
+  }
+}
+
+.blue_color {
   color: #fff;
   background: #2D4D89;
   border: 1px solid #2D4D89;
 }
-.blueplain_color{
+
+.blueplain_color {
   color: #2D4D89;
   background: #EAEDF1;
   border: 1px solid #EAEDF1;
 }
-.money_style{
-    text-align: right ;
-    div{
-        line-height: 30px;
-    }
-    span{
-        display: inline-block;
-        width: 100px;
-        text-align: left;
-    }
+
+.money_style {
+  text-align: right;
+
+  div {
+    line-height: 30px;
+  }
+
+  span {
+    display: inline-block;
+    width: 100px;
+    text-align: left;
+  }
 }
-.payable_amount{
-    margin-top: 15px;
-    text-align: right;
-    padding-right: 10px;
-    // padding: 5px 10px 0 0;
-    h3>span{
-        margin-left: 50px;
-    }
+
+.payable_amount {
+  margin-top: 15px;
+  text-align: right;
+  padding-right: 10px;
+
+  // padding: 5px 10px 0 0;
+  h3>span {
+    margin-left: 50px;
+  }
 }
+
 /deep/ {
-    .el-dialog__header{
-        padding: 0 ;
+  .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--group {
+    border-top: 1px solid #000;
+  }
+
+  .el-dialog__header {
+    padding: 0;
+
+  }
+
+  .el-dialog__body {
+    padding: 0;
+    border-bottom: 1px solid #EEF1F6
+  }
+
+  .el-descriptions-item__label.is-bordered-label {
+    color: #000;
+    font-weight: bold;
+  }
+
+  .el-descriptions .is-bordered .el-descriptions-item__cell {
+    text-align: center;
+    border: 1px solid #000;
+  }
+
+  .el-descriptions-row {
+    .my-label {
+      background: #EAEDF3;
+      color: #000;
+      font-weight: bold;
     }
-    .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;
+
+    .my-content {
+      color: #2D4D89;
+      font-weight: bold;
+      font-size: 18px;
     }
+  }
 
-}
-</style>
+}</style>