picc-admin-portal/src/views/business/insuranceFirst-firstDetails.vue

<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>
<template>
  <el-dialog
    :visible.sync="showDialog"
    title="查看投保单"
    :modal-append-to-body="false"
    style="text-align:left;"
    @close="closeDialog"
    width="80%"
  >
    <el-tabs type="card" activeName="0" @tab-click="tabsClick">
      <el-tab-pane label="投保信息" name="0">
        <table border="1" style="border-collapse:collapse;">
          <tr>
            <td colspan="2" class="table-bak">投保单号</td>
            <td>{{insureData.policyNo}}</td>
            <td class="table-bak">投保人名称</td>
            <td>{{insureData.insuredName}}</td>
            <td class="table-bak">联系电话</td>
            <td>{{insureData.insuredTel}}</td>
          </tr>
          <tr>
            <td rowspan="5" class="table-bak" width="10%">被保险人信息</td>
            <td width="90" class="table-bak">企业名称</td>
            <td colspan="3">{{insureData.companyName}}</td>
            <td class="table-bak">营业性质</td>
            <td>{{insureData.businessNatureN}}</td>
          </tr>
          <tr>
            <td class="table-bak">证件类型</td>
            <td colspan="3">统一社会信用代码</td>
            <td class="table-bak">证件号码</td>
            <td>{{insureData.usccCode}}</td>
          </tr>
          <tr>
            <td class="table-bak">营业范围</td>
            <td colspan="3">{{insureData.businessScope}}</td>
            <td class="table-bak">行业类型</td>
            <td>{{insureData.industryType}}</td>
          </tr>
          <tr>
            <td class="table-bak">雇员人数</td>
            <td width="110">{{insureData.employeesNumber}}</td>
            <td width="90" class="table-bak">投保人数</td>
            <td width="110">{{insureData.insuredNumber}}</td>
            <td class="table-bak">联系电话</td>
            <td>{{insureData.tel}}</td>
          </tr>
          <tr>
            <td class="table-bak">联系地址</td>
            <td colspan="3">{{insureData.companyAddress}}</td>
            <td class="table-bak">邮编</td>
            <td>{{insureData.postal}}</td>
          </tr>
          <tr>
            <td colspan="2" class="table-bak">近三年损失情况（时间、原因、损失金额）</td>
            <td colspan="5">{{insureData.lossInRecentYears}}</td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane label="被保险人信息" name="10">
        <el-table
          :data="memberData"
          style="width: 100%"
          v-loading="loading"
          stripe
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
          :row-class-name="memberRowClassName"
        >
          <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
          <el-table-column prop="companyMember.cardTypeN" label="证件类型" width="100"></el-table-column>
          <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
          <el-table-column prop="statusN" label="审核状态" width="100"></el-table-column>
          <el-table-column prop="companyMember.sex" label="性别" width="80">
            <template slot-scope="{row}">{{row.companyMember.sex ? "男" : "女"}}</template>
          </el-table-column>
          <el-table-column prop="companyMember.age" label="年龄" width="100"></el-table-column>
          <el-table-column prop="companyMember.jobName" label="岗位/工种" width="200"></el-table-column>
          <el-table-column prop="companyMember.healthStatus" label="健康状况" width="100"></el-table-column>
          <el-table-column prop="companyMember.cardFiles" label="身份证" width="120">
            <template slot-scope="{row}">
              <template v-for="url in splitSep(row.companyMember.cardFiles,'|')">
                <a :href="url" target="_blank" :key="url">
                  <el-avatar
                    size="small"
                    :src="url+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
                    :key="row.id"
                  ></el-avatar>
                </a>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="pageIndex"
          :total="totalElements"
          :page-sizes="pageSizeList"
          @current-change="changePage"
          @size-change="pageSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="承保信息" name="20">
        <table border="1" style="border-collapse:collapse;width:100%">
          <tr>
            <td width="100" class="table-bak">险种</td>
            <td colspan="6" class="table-bak">限额名称</td>
            <td colspan="3" class="table-bak">责任限额/免赔额</td>
          </tr>
          <tr>
            <td rowspan="100">{{insureData.definitionName}}</td>
          </tr>
          <tr v-for="(acceot,index) in acceptData.insuranceDefinitionLimitList" :key="index">
            <td colspan="6">{{ acceot.name }}</td>
            <td colspan="2">
              {{ acceot.limit }}
              {{ acceot.unit }}
            </td>
          </tr>
        </table>
        <table border="1" style="border-collapse:collapse;width:100%">
          <tr>
            <td colspan="2" class="table-bak">行业/职业类型</td>
            <td class="table-bak">收费标准(年)</td>
            <td class="table-bak">收费标准(月)</td>
            <td class="table-bak">投保人数</td>
            <td class="table-bak">保险费</td>
          </tr>
          <tr v-for="(job,index) in acceptData.jobsList" :key="index">
            <td colspan="2">
              <p>{{ job.name }}</p>
              ({{job.content}})
            </td>
            <td>{{ job.chargesY }}元/年/人</td>
            <td>{{ job.charges }}元/月/人</td>
            <td>{{ job.number }}</td>
            <td>{{ job.money }}</td>
          </tr>
          <tr>
            <td colspan="2" class="table-bak">保险费合计(人民币)</td>
            <td colspan="2">(大写)：{{acceptData.cnMontrayUnit}}</td>
            <td colspan="2">(小写)：￥ {{acceptData.totalAmount}}</td>
          </tr>
          <tr>
            <td colspan="2" class="table-bak">保险期间</td>
            <td colspan="4">自 {{insureData.startTime}} 零时起 至 {{insureData.endTime}} 二十四时止。</td>
          </tr>
          <tr>
            <td class="table-bak">出账银行</td>
            <td>{{insureData.insurancePolicy.issuingBank}}</td>
            <td class="table-bak">入账银行</td>
            <td>{{insureData.insurancePolicy.accountBank}}</td>
            <td class="table-bak">转账单号</td>
            <td>{{insureData.insurancePolicy.singlNumber}}</td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane label="附件信息" name="30">
        <el-table :data="filesData" style="width: 100%" v-loading="loading" stripe>
          <el-table-column prop="index" label="序号" width="80"></el-table-column>
          <!-- <el-table-column prop="insuredNumber" label="附件类型" width="150"></el-table-column> -->
          <el-table-column prop="name" label="附件名称" width="500px"></el-table-column>
          <el-table-column prop="file" label="操作" width="80">
            <template slot-scope="scope">
              <a :href="scope.row.url" target="_blank">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="推广信息" name="40">
        <table border="1" style="border-collapse:collapse;width:60%">
          <tr>
            <td class="table-bak" width="180">人员类型</td>
            <td class="table-bak">姓名</td>
            <td class="table-bak">联系方式</td>
            <td class="table-bak">注册账号</td>
          </tr>
          <tr>
            <td>社会推广员</td>
            <td>{{promote.promoterName}}</td>
            <td>{{promote.promoterPhone}}</td>
            <td>{{promote.promoter}}</td>
          </tr>
          <tr>
            <td>保险代理人</td>
            <td>{{promote.agentName}}</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane label="流程历史记录" name="50">
        <el-table :data="recordData" style="width: 100%" v-loading="loading" stripe>
          <el-table-column label="序号" type="index" width="100" align="center">
            <template slot-scope="scope">
              <span>{{(pageIndexRecord - 1) * pageSizeRecord + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="processStatus" label="审核状态" width="100"></el-table-column>
          <el-table-column prop="statusN" label="审核步骤" width="100"></el-table-column>
          <el-table-column prop="opinion" label="意见" width="500"></el-table-column>
          <el-table-column prop="createTime" label="操作时间" width="150"></el-table-column>
        </el-table>

        <el-pagination
          :current-page.sync="pageIndexRecord"
          :total="totalElementsRecord"
          :page-sizes="pageSizeList"
          @current-change="changePageRecord"
          @size-change="pageSizeChangeRecord"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import insuranceApplicationApi from "@/api/business/insuranceApplication";
import approvalApi from "@/api/business/approval";

export default {
  props: ["id"],
  data() {
    return {
      formModel: {},
      showDialog: true,
      loading: false,
      submitting: false,
      pageIndex: 1,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      field: "",
      direction: "",
      pageSizeList: [10, 20, 30],
      multipleSelection: [],
      definitionId: "",
      policyId: "",
      insureData: {
        insurancePolicy: {}
      },
      acceptData: [],
      recordData: [],
      queryResult: [],
      memberData: [],
      pageIndexRecord: 1,
      pageSizeRecord: 10,
      totalPagesRecord: 0,
      totalElementsRecord: 0,
      filesData: [],
      insuranceAgentlist: "",
      promote: []
    };
  },
  methods: {
    memberRowClassName({row, rowIndex}) {
      if (row.replaceMemberId!=null && row.replaceMemberId.length>0) {
        return 'warning-row';
      }

      return '';
    },
    splitSep(arrStr, sep) {
      if (arrStr == null || arrStr.length == 0) {
        return [];
      } else {
        return arrStr.split(sep);
      }
    },
    closeDialog() {
      this.$emit("close", false);
    },
    tabsClick(tab, event) {
      if (tab.name == "10") {
        this.changePage(1);
      } else if (tab.name == "20") {
        this.acceptDetail();
      } else if (tab.name == "30") {
        this.attachmentList();
      } else if (tab.name == "40") {
        this.loadPromoterAndAgent();
      } else if (tab.name == "50") {
        this.changePageRecord(1);
      }
    },
    changePage(pageIndex) {
      var self = this;

      self.loading = true;

      self.pageIndex = pageIndex;
      var formData = new FormData();

      formData.append("pageIndex", self.pageIndex);
      formData.append("pageSize", self.pageSize);

      formData.append("applicationId", self.id);
      formData.append("policyId", self.policyId);

      approvalApi
        .pageList(formData)
        .then(function(response) {
          self.loading = false;
          var jsonData = response.data.data;
          self.memberData = jsonData.data;
          self.totalPages = jsonData.totalPages;
          self.totalElements = jsonData.recordsTotal;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + "");
        });
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    sortChange(data) {
      this.field = data.column.field;
      this.direction = data.order;

      this.changePage(this.pageIndex);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    insureDetail() {
      var self = this;
      (function() {
        if (self.id.length == 0) {
          self.$message.error("没有传递ID");
        } else {
          var formData = new FormData();
          formData.append("applicationId", self.id);
          // formData.append("no", "1");
          return insuranceApplicationApi.insureDetail(formData);
        }
      })()
        .then(response => {
          var jsonData = response.data;
          self.loading = false;
          if (jsonData.result) {
            self.insureData = jsonData.data;
            this.definitionId = self.insureData.definitionId;
            this.policyId = self.insureData.insurancePolicy.id;
          } else {
            self.$message.error(jsonData.message + "");
          }
        })
        .catch(error => {
          self.$message.error(error + "");
        });
    },
    acceptDetail(definitionId) {
      var self = this;

      var formData = new FormData();
      formData.append("definitionId", self.definitionId);
      formData.append("applicationId", self.id);
      formData.append("policyId", self.policyId);

      (function() {
        if (self.definitionId.length == 0) {
          self.$message.error("没有险种");
        } else {
          return insuranceApplicationApi.acceptDetail(formData);
        }
      })()
        .then(response => {
          var jsonData = response.data;
          self.loading = false;

          if (jsonData.result) {
            self.acceptData = jsonData.data;
          } else {
            self.$message.error(jsonData.message + "");
          }
        })
        .catch(error => {
          self.$message.error(error + "");
        });
    },
    attachmentList() {
      var self = this;

      self.loading = true;

      var formData = new FormData();

      formData.append("applicationId", self.id);
      formData.append("policyId", self.policyId);
      formData.append("id", self.policyId);
      approvalApi
        .attachmentList(formData)
        .then(function(response) {
          self.loading = false;

          var jsonData = response.data.data;
          self.filesData = jsonData;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + "");
        });
    },
    loadPromoterAndAgent() {
      var self = this;

      self.loading = true;

      var formData = new FormData();

      formData.append("applicationId", self.id);
      formData.append("policyId", self.policyId);
      formData.append("id", self.policyId);

      approvalApi
        .getPromoterAndAgent(formData)
        .then(function(response) {
          self.loading = false;

          var jsonData = response.data.data;
          self.promote = jsonData;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + "");
        });
    },
    changePageRecord(pageIndexRecord) {
      var self = this;

      self.loading = true;

      self.pageIndexRecord = pageIndexRecord;
      var formData = new FormData();

      formData.append("pageIndex", self.pageIndexRecord);
      formData.append("pageSize", self.pageSizeRecord);

      formData.append("applicationId", self.id);
      formData.append("policyId", self.policyId);

      if (this.field != null) {
        formData.append("field", this.field);
      }

      if (this.direction != null) {
        formData.append("direction", this.direction);
      }

      approvalApi
        .policyRecordPageList(formData)
        .then(function(response) {
          self.loading = false;

          var jsonData = response.data.data;

          self.recordData = jsonData.data;
          self.totalPagesRecord = jsonData.totalPages;
          self.totalElementsRecord = jsonData.recordsTotal;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + "");
        });
    },
    pageSizeChangeRecord(pageSize) {
      this.pageSize = pageSize;
    },
    sortChangeRecord(data) {
      this.field = data.column.field;
      this.direction = data.order;

      this.changePageRecord(this.pageIndex);
    },
    handleSelectionChangeRecord(val) {
      this.multipleSelection = val;
    }
  },
  async mounted() {
    var self = this;
    self.loading = true;
    this.insureDetail();
  }
};
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}

.application-panel td,
.accept-panel td {
  padding: 10px 0;
  font-size: 14px;
  border: 1px solid #efefef;
}

.el-tabs.el-tabs--card.el-tabs--top {
  padding: 20px;
}

.table-bak {
  background: #f6f6f6;
}

.el-tab-pane .title-von {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
}

.el-tab-pane h4 {
  margin: 0;
  border-left: 2px solid red;
  padding-left: 10px;
}

.user-panel,
.application-panel,
.accept-panel {
  margin-bottom: 20px;
}

.el-pagination {
  padding: 10px 15px;
}

.accept-panel td p {
  font-weight: bold;
  margin: 0;
}

.application-panel table {
  width: 100%;
}

.el-container {
  border-left: 1px solid #efefef;
}

.el-form td {
  font-size: 14px;
}
</style>