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

<template>
  <el-dialog :visible.sync="dialogVisible" width="1080px" class="quotation_style">
    <div id="pdfContentsDiv" style="padding: 25px;height: auto;" v-watermark='userId'>
      <div slot="title" class="dialog-title quotation-title 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 : '-'
                }}</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="保额">
          <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:#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">
            {{
              scope.row.premium && scope.row.premium != 0 ? scope.row.premium : '-'
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="each" label="每份">
        </el-table-column>
        <el-table-column align="center" prop="totalPremium" label="总计（元）">
          <template slot-scope="scope">
            <span style="color:#D42426;font-weight: bold;font-size: 16px;">{{ queryOrders.jypremium /
            (queryOrders.jyQuantity ? queryOrders.jyQuantity : 1)
          }}/每份</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="tableInfo" style="margin-top:20px;" 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 /
            (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="交强险名称">
                    <template slot-scope="scope">
                        <span style="color: #D42426;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" align="center" label="保险金额">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.amount ? scope.row.amount : '-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="queryOrders.kindinfo && queryOrders.kindinfo.length > 0" :data="queryOrders.kindinfo" stripe
                border :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column prop="kindName" align="center" label="商业险险别">
                    <template slot-scope="scope">
                        <span style="color: #D42426;">{{ scope.row.kindName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="保险金额">
                    <template slot-scope="scope">
                        <div v-if="['D4', 'SY_FJ_YBW2'].includes(scope.row.kindCode)">
                            <span>{{ scope.row.unitAmount }}</span>/<span>{{ queryOrders.carinfo.seatCount - 1 }}座</span>
                        </div>
                        <div v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(
                            scope.row.kindCode
                        )
                            ">
                            <span>{{ scope.row.deductibleRate }}</span>
                        </div>
                        <div v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(
                            scope.row.kindCode
                        )
                            ">
                            <span>{{ scope.row.serviceTimes }}/次</span>
                        </div>
                        <div v-else>
                            <span>{{ scope.row.amount }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="coveragePremium" label="保费">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.coveragePremium }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="queryOrders.accidentInfo && queryOrders.accidentInfo.length > 0" :data="queryOrders.accidentInfo"
                stripe border :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '500', color: '#333333' }"
                style="width: 100%">
                <el-table-column prop="name" align="center" label="驾意险名称">
                    <template slot-scope="scope">
                        <span style="color: #D42426;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" align="center" label="保险金额">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.amount ? scope.row.amount : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="premium" label="保费">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.premium ? scope.row.premium : '-' }}</span>
                    </template>
                </el-table-column>
            </el-table> -->
      <div style="margin: 10px 0;">报价时间：{{ queryOrders.createtime }}</div>
      <div>注：本报价单仅供参考，最终以出单价格为准。</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="copybjd()">截图</el-button>
      <el-button size="small" type="primary" plain @click="dialogVisible = false; 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: [],
      jyProducts: [],
    }
  },

  created() {

  },
  methods: {
    setBackupVisible: function (backupVisible) {
      this.dialogVisible = backupVisible
      this.queryOrders.ownerinfo.identifyNumber=this.queryOrders.ownerinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.ownerinfo.identifyNumber.slice(14,18);
      this.queryOrders.applyinfo.identifyNumber=this.queryOrders.applyinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.applyinfo.identifyNumber.slice(14,18);
      this.queryOrders.insureinfo.identifyNumber=this.queryOrders.insureinfo.identifyNumber.slice(0,4)+'******'+this.queryOrders.insureinfo.identifyNumber.slice(14,18);
      let data = JSON.parse(JSON.stringify(this.queryOrders))
      data.jqInsuranceType.forEach(e => { e.label = '交强险'; e.totalPremium = data.jqpremium });
      if ((data.kindinfo && data.kindinfo.length > 0) || (data.accidentInfo && data.accidentInfo.length > 0)) {
        data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo.forEach(el => { el.label = '商业险', el.name = el.kindName; el.totalPremium = data.sypremium }) : data.kindinfo
        data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo.forEach(e => { e.label = '驾意险'; e.totalPremium = data.jypremium; e.each = "每份" }) : data.accidentInfo
        this.allProducts = data.jqInsuranceType.concat(data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo : [])
        this.jyProducts = data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo : [];
      }
      else {
        this.allProducts = data.jqInsuranceType
      }
    },
    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]; // 返回行合并数目和列合并数目
        }
      }
      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;
            }
          }
          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;
            }
          }
          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,
        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: 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;
  }
}

.vehicle {
  li {
    width: 33%;
    padding-top: 13px;
    display: inline-block;
  }

  span {
    color: #868B98;
  }

  margin: 10px 0 20px 0
}

.dialog-footer {
  button {
    width: 96px;
    text-align: center;
  }
}

.quotation-title {
  color: var(--themeColor);
  font-weight: bold;
  font-size: 16px;
}

.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-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: #FFD6D7;
      color: #000;
      font-weight: bold;
    }

    .my-content {
      color: #D42426;
      font-weight: bold;
    }
  }
}
</style>