picc-admin-portal/src/views/business/insurancePolicy-leftTab.vue

<template>
  <el-tabs type="card" activeName="0" @tab-click="tabsClick">
    <el-tab-pane label="投保信息" name="0">
      <div>
        <div class="application-panel" v-loading="loading">
          <!-- 投保信息 -->
          <div class="title-von">
            <h4>投保信息</h4>
          </div>
          <table border="1" style="border-collapse:collapse;width: 100%;">
            <tr>
              <td colspan="2" class="table-bak">投保人名称</td>
              <td colspan="3">{{insureData.insuredName}}</td>
              <td width="90" class="table-bak">联系电话</td>
              <td>{{insureData.insuredTel}}</td>
            </tr>
            <tr>
              <td rowspan="5" width="25" class="table-bak">被保险人信息</td>
              <td width="90" class="table-bak">企业名称</td>
              <td colspan="3">{{insureData.companyName}}</td>
              <td class="table-bak">营业性质</td>
              <td>{{insureData.businessNature}}</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>
        </div>
        <div class="user-panel" v-loading="loading">
          <!-- 被保险人信息 -->
          <div class="title-von">
            <h4>被保险人信息</h4>
          </div>
          <el-table
            :data="memberData"
            style="width: 100%"
            v-loading="loading"
            stripe
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="companyMember.name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="companyMember.cardType" label="证件类型" width="100"></el-table-column>
            <el-table-column prop="companyMember.cardNo" label="证件号码" width="200"></el-table-column>
            <el-table-column prop="companyMember.status" 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="80"></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="scope">
                <a :href="scope.row.companyMember.cardFiles" target="_blank">
                  <el-avatar
                    size="small"
                    :src="scope.row.companyMember.cardFiles+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
                  ></el-avatar>
                </a>
              </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>
        </div>
        <div class="accept-panel" v-loading="loading">
          <!-- 承保信息 -->
          <div class="title-von">
            <h4>承保信息</h4>
          </div>
          <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>
          </table>
        </div>
        <div class="application-panel" v-loading="loading">
          <!-- 附件信息 -->
          <div class="title-von">
            <h4>附件信息</h4>
          </div>
          <el-table
            :data="filesData"
            style="width: 100%"
            v-loading="loading"
            stripe
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
          >
            <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.file" target="_blank">下载</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="application-panel" v-loading="loading">
          <!-- 推广信息 -->
          <div class="title-von">
            <h4>推广信息</h4>
          </div>
          <table border="1" style="border-collapse:collapse;">
            <tr>
              <td class="table-bak">人员类型</td>
              <td class="table-bak">姓名</td>
              <td class="table-bak">联系方式</td>
              <td class="table-bak">注册账号</td>
            </tr>
            <tr>
              <td>社会推广员</td>
              <td>赵磊</td>
              <td>18600001111</td>
              <td>zhaolei001</td>
            </tr>
            <tr>
              <td>保险代理人</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="流程历史记录" name="20">
      <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-tab-pane label="流程图" name="30"></el-tab-pane>
  </el-tabs>
</template>
<script>
import Constant from "@/constant";
import insuranceApplicationApi from "@/api/business/insuranceApplication";
import approvalApi from "@/api/business/approval";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

export default {
  data() {
    var self = this;

    return {
      queryModel: {
        id: ""
      },
      ruleValidate: {
        processStatus: [
          {
            required: true,
            message: "请选择处理类型",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      memberData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      field: "",
      direction: "",
      pageSizeList: [10, 20, 30],
      multipleSelection: [],
      showModal: false,
      modalTitle: "",
      businessKey: "",
      id: "",
      definitionId: "",
      policyId: "",
      insureData: "",
      acceptData: [],
      formModel: {
        processStatus: "",
        opinion: ""
      },
      recordData: [],
      pageIndexRecord: 1,
      pageSizeRecord: 10,
      totalPagesRecord: 0,
      totalElementsRecord: 0,
      filesData: [],
      insuranceAgentlist: ""
    };
  },
  methods: {
    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);

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

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

      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;
      self.definitionId = self.id;
      (function() {
        if (self.id.length == 0) {
          self.$message.error("没有传递ID");
        } else {
          var formData = new FormData();
          formData.append("id", 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.acceptDetail();
            this.changePage(1);
            this.attachmentList();
          } else {
            self.$message.error(jsonData.message + "");
          }
        })
        .catch(error => {
          self.$message.error(error + "");
        });
    },
    acceptDetail() {
      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 approvalApi.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 + "");
        });
    },
    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;
    },
    tabsClick(tab, event) {
      if (tab.name == "20") {
        this.changePageRecord(1);
      }
    },
    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 + "");
        });
    }
  },
  async mounted() {
    var self = this;
    //self.loading = true;

    self.id = this.$route.query.id;
    self.policyId = this.$route.query.policyId;
    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>