vue-insagent-pc/src/views/Letter/Wallet/AutoInsuranceDetails.vue

<!-- 模板区域 -->
<template>
  <div class="p-1">
    <!-- 模板内容 -->
    <el-form ref="queryFormRef" :model="queryForm" label-width="120px" class="queryform">
      <el-row>
        <el-col :span="6">
          <el-form-item label="任务号">
            <el-input size="small" v-model="queryForm.orderNo" placeholder="请输入任务号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单号">
            <el-input size="small" v-model="queryForm.subOrderNo" placeholder="请输入订单号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险公司">
            <el-select size="small" v-model="queryForm.companyId" placeholder="请选择保险公司" style="width: 100%"  filterable  clearable>
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in ompanyqueryList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投保险种">
            <el-select size="small" v-model="queryForm.productId" placeholder="请选择投保险种" style="width: 100%" filterable clearable>
              <el-option :label="item.dictTag" :value="item.dictValue" v-for="(item, index) in productsTypeoptions"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input size="small" v-model="queryForm.licenseNo" placeholder="请输入车牌号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号">
            <el-input size="small" v-model="queryForm.frameNo" placeholder="请输入车架号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发动机号">
            <el-input size="small" v-model="queryForm.engineNo" placeholder="请输入发动机号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交强保单号">
            <el-input size="small" v-model="queryForm.jqapplyno" placeholder="请输入交强保单号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商业保单号">
            <el-input size="small" v-model="queryForm.syapplyno" placeholder="请输入交强保单号"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="代理人工号">
            <el-input size="small" v-model="queryForm.userDLId" placeholder="请输入录入人"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="代理人姓名">
            <el-input size="small" v-model="queryForm.userDLName" placeholder="请输入代理人姓名"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被保险人">
            <el-input size="small" v-model="queryForm.insuredName" placeholder="请输入被保险人姓名"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签单日期">
            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="dateTime" style="width: 100%"  clearable
              @change="dataTmeChange" type="daterange" align="left" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核状态">
            <el-radio-group size="small" v-model="queryForm.auditstatus" style="width: 100%"  clearable>
              <el-radio label="">全部</el-radio>
              <el-radio label="1">已审核</el-radio>
              <el-radio label="0">未审核</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="8" class="flex j-end">
          <el-button size="small" type="primary" style="background-color: #2D4D89;border-color:#2D4D89;" @click="exportDetails">导出</el-button>
          <el-button size="small" type="primary"  @click="autoInsuranceFindPage">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <kt-common-table :tableHeights="560" :SerialShow="false" :operationWidth="150" :showOperation="true"
      :showBatchDelete="false" :showBatchSettled="false" :showBatchPrint="false" :data="autoInsuranceResult"
      :columns="autoInsuranceColumns" @findPage="autoInsuranceFindPage" button2Name="详情" button2Type="text"
      :button2style="{ color: '#2D4D89' }" button2Background="#E6A23C" @handleButton2="autoInsurancedetails"
      button2Icon="">
    </kt-common-table>
    <detailsDialog ref="detailsDialog" :orderInfo.sync="orderInfo" :Feepermissions="false"></detailsDialog>
  </div>
</template>

<!-- 行为区域 -->
<script>
import detailsDialog from "@/views/Core/components/detailsDialog.vue";
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import Cookies from "js-cookie";
export default {
  components: {
    KtCommonTable,
    detailsDialog
  },
  // 数据存放区域
  data() {
    return {
      orderInfo: {
        //选中的订单
        ownerinfo: {},
        carinfo: {},
        applyinfo: {},
        insureinfo: {},
        kindinfo: [],
        riskinfo: [],
        ownerinfo: {},
        orderCommissionVo: {},
        extendInfo: {}
      },
      dateTime: [],
      queryForm: {
        orderNo: "",//任务号
        subOrderNo: "",//订单号
        companyId: "",//保险公司
        productId: "",//投保险种
        licenseNo: "",//车牌号
        frameNo: "",//车架号
        engineNo: "",//发动机号
        jqapplyno: "",//保单号
        syapplyno: "",//保单号
        userDLId: "",//代理人工号
        userDLName: "",//代理人姓名
        insuredName: "",//被保险人
        startDate: "",
        endDate: "",
        auditstatus: "",//审核状态
        userId: '',
      },
      pageRequest: {
        pageNum: 1,
        pageSize: 20,
      },
      ompanyqueryList: [],
      productsTypeoptions: [],
      autoInsuranceResult: [],
      autoInsuranceColumns: [
        { prop: "userId", label: "工号", minWidth: 160 },
        { prop: "orderNo", label: "任务号", minWidth: 160,  },
        { prop: "subOrderNo", label: "订单号", minWidth: 160, },
        { prop: "companyName", label: "投保公司", minWidth: 160 },

        
        { prop: "userName", label: "姓名", minWidth: 160 },
        { prop: "signingTime", label: "签单时间", minWidth: 160 },
        { prop: "licenseNo", label: "车牌号", minWidth: 160 },
        { prop: "insuredName", label: "被保险人", minWidth: 160 },
        { prop: "jqapplyno", label: "交强保单号", minWidth: 160 },
        { prop: "syapplyno", label: "商业保单号", minWidth: 160 },
        { prop: "amount", label: "交易金额", minWidth: 160, formatter: this.amountFormatter },
        { prop: "auditTime", label: "审核时间", minWidth: 160 },
        { prop: "auditstatus", label: "审核状态", minWidth: 160 ,formatter: this.validIndFormatter,},
      ],
      feeView:null,
    }
  },
  // 生命周期函数
  created() {
    this.queryForm.userId = Cookies.get("user");
    this.CompanyList();
    this.getDicType("productsType"); //车船税类型
    this.$api.user.sysMenuRecordAdd(2,3).then((res) => {
      });
  },
  // 方法函数
  methods: {
    amountFormatter(row, column){
      let amount = row.amount;
      if(this.feeView){
        return amount;
      }else{
        return "￥"+amount;
      }
    },
    validIndFormatter(row, column) {
      let auditstatus = row.auditstatus;
      if (auditstatus == '已审核') {
        return <span style="background:linear-gradient( 180deg, #66CDBB 0%, #33A08D 100%); borderRadius: 4px;padding:4px 10px;color:#fff">已审核</span>
      } else {
        return <span style="background:#A6A6A6; borderRadius: 4px;padding:4px 10px;color:#fff">未审核</span>
      }
    },
    exportDetails() {
      this.$api.letter.exportMyInsuranceByUserId(this.queryForm).then((res) => {
        if (res.code == '200') {
          let url = process.env.BASE_URL + res.msg; // 3.创建一个临时的url指向blob对象
          let a = document.createElement("a");
          a.href = url;
          a.download = "导出文件.xlsx";
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    autoInsurancedetails({ row, column }) {
      for (let i = 0; i < this.global.insureList.length; i++) {
        this.global.insureList[i].coveragePremium = "";
        this.global.insureList[i].amount = 0;
      }
      let params = {
        companyId: row.subOrderNo
      };
      this.$api.letter.getByCompanyId(params).then(res => {
        if (res.code == 200) {
          this.licenseNo = res.data.licenseno; //车牌号
          this.inscompany = res.data.inscompany; //保险公司
          if (res.data.accidentInfo) {
            res.data.accidentInfo.constructor === Object
              ? [res.data.accidentInfo]
              : res.data.accidentInfo;
          }
          Object.assign(this.orderInfo, res.data);
          if (this.orderInfo.riskinfo && this.orderInfo.riskinfo.length > 0) {
            for (let i = 0; i < this.orderInfo.riskinfo.length; i++) {
              if (this.orderInfo.riskinfo[i].riskCode == "0510") {
                for (let j = 0; j < this.orderInfo.kindinfo.length; j++) {
                  for (let m = 0; m < this.global.insureList.length; m++) {
                    if (
                      this.orderInfo.kindinfo[j].kindCode ==
                      this.global.insureList[m].kindCode
                    ) {
                      this.global.insureList[
                        m
                      ].coveragePremium = this.orderInfo.kindinfo[
                        j
                      ].coveragePremium;
                      if (this.orderInfo.kindinfo[j].kindCode == "B") {
                        this.global.insureList[9].amtList[0].value = this.orderInfo.kindinfo[
                          j
                        ].amount;
                      }
                      if (this.orderInfo.kindinfo[j].kindCode == "A") {
                        this.global.insureList[m].amount = "1";
                      } else if (this.global.insureList[m].kindCode == "D4") {
                        this.global.insureList[
                          m
                        ].amount = this.orderInfo.kindinfo[j].unitAmount;
                      } else if (
                        this.global.insureList[m].isMainRisk ||
                        this.global.insureList[m].kindCode == "BD" ||
                        this.global.insureList[m].kindCode == "L"
                      ) {
                        this.global.insureList[
                          m
                        ].amount = this.orderInfo.kindinfo[j].amount;
                      } else {
                        this.global.insureList[
                          m
                        ].amount = this.orderInfo.kindinfo[j].deductibleRate;
                      }
                    }
                  }
                }
              }
            }
          }
          this.$refs.detailsDialog.setBackupVisible(true);
        } else {
          this.$message.error("订单获取失败");
        }
      });
    },
    dataTmeChange(val) {
      if (val) {
        this.queryForm.startDate = val[0];
        this.queryForm.endDate = val[1];
      } else {
        this.queryForm.startDate = "";
        this.queryForm.endDate = "";
      }
    },
    autoInsuranceFindPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      } else {
        this.pageRequest.pageNum = 1;
        this.pageRequest.pageSize = 20;
      }
      this.$api.letter
        .findMyInsuranceByUserId({ ...this.pageRequest, ...this.queryForm })
        .then((res) => {
          this.autoInsuranceResult = res.data;
          this.feeView=res.data.feeView;
        });
    },
    CompanyList() {
      this.$api.letter.gainTopList().then((res) => {
        this.ompanyqueryList = res.data;
      })
    },
    getDicType(type) {
      this.$api.insCompany.dicType(type).then(res => {
        if (res.code == 200) {
          this[type + "options"] = res.data.ddList;
        }
      });
    },
  },
  // 计算属性
  computed: {
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
/deep/ {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2D4D89;
  }

  .el-form-item {
    margin-bottom: 8px;
  }
}
</style>