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

<template>
  <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>
        <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 ">
          <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-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-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">
          <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-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-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">
          <span class="title">保险期限</span>
          <div class="line"></div>
        </div>
        <div style="margin-top: 6px;">投保明细</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="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 :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>
      <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">
            <span style="font-weight: bold;color: #333;"> {{
              queryOrders.jyName
            }}</span>
          </template>
        </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">
            {{
              scope.row.amount && scope.row.amount != 0 ? scope.row.amount : '-'
            }}
          </template>
        </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="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)
          }}/每份</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>
          <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>
      <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"),
      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
      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))
      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.syProducts = data.kindinfo && data.kindinfo.length > 0 ? data.kindinfo : [];
        this.jyProducts = data.accidentInfo && data.accidentInfo.length > 0 ? data.accidentInfo : [];
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 假设我们要合并第三列（类型列）
        const rows = this.syProducts;
        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.syProducts;
        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]; // 返回行合并数目和列合并数目
        }
      }
    },
    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"), {
        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: 6px;

  .header {
    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;

    }
  }
}

.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;
  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--border .el-table__cell,
  // .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  //   border-right: 1px solid #000;
  // }




  .jqProductsClass {
    .el-table--border,
 .el-table--border,
  .el-table--group {
    border: 1px solid #000;
    border-right: none;
  }
  }


  .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 :not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 2px;
  }

  .el-descriptions-row {
    .my-label {
      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: #333;
    }
  }
}
</style>