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

<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#/business/insuranceFirst/listPicc">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">制单</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--
      要resetFields起作用，必须配置:model和prop
    -->
    <el-container>
      <el-aside width="70%">
        <el-tabs type="card" activeName="0" @tab-click="tabsClick">
          <el-tab-pane label="投保信息" name="0">
            <div>
              <div class="application-panel" v-loading="loading">
                <!-- 投保信息 -->
                <table border="1" style="border-collapse:collapse;">
                  <tr>
                    <td colspan="2">投保人名称</td>
                    <td colspan="3">{{insureData.insuredName}}</td>
                    <td>联系电话</td>
                    <td>{{insureData.insuredTel}}</td>
                  </tr>
                  <tr>
                    <td rowspan="5">被保险人信息</td>
                    <td>企业名称</td>
                    <td colspan="3">{{insureData.companyName}}</td>
                    <td>营业性质</td>
                    <td>{{insureData.businessNature}}</td>
                  </tr>
                  <tr>
                    <td>证件类型</td>
                    <td colspan="3">{{insureData.insuredName}}</td>
                    <td>证件号码</td>
                    <td>{{insureData.usccCode}}</td>
                  </tr>
                  <tr>
                    <td>营业范围</td>
                    <td colspan="3">{{insureData.businessScope}}</td>
                    <td>行业类型</td>
                    <td>{{insureData.industryType}}</td>
                  </tr>
                  <tr>
                    <td>雇员人数</td>
                    <td>{{insureData.employeesNumber}}</td>
                    <td>投保人数</td>
                    <td>{{insureData.insuredNumber}}</td>
                    <td>联系电话</td>
                    <td>{{insureData.tel}}</td>
                  </tr>
                  <tr>
                    <td>联系地址</td>
                    <td colspan="3">{{insureData.companyAddress}}</td>
                    <td>邮编</td>
                    <td>{{insureData.postal}}</td>
                  </tr>
                  <tr>
                    <td colspan="2">近三年损失情况（时间、原因、损失金额）</td>
                    <td colspan="5">{{insureData.lossInRecentYears}}</td>
                  </tr>
                </table>
              </div>
              <div class="user-panel" v-loading="loading">
                <!-- 被保险人信息 -->
                <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="100"></el-table-column>
                  <el-table-column prop="cardType" label="证件类型" width="100"></el-table-column>
                  <el-table-column prop="cardNo" label="证件号码" width="100"></el-table-column>
                  <el-table-column prop="status" label="审核状态" width="100"></el-table-column>
                  <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
                  <el-table-column prop="jobName" label="岗位/工种" width="100"></el-table-column>
                  <el-table-column prop="healthStatus" label="健康状况" width="100"></el-table-column>
                  <el-table-column prop="cardFiles" label="身份证正面照" width="120"></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">
                <!-- 承保信息 -->
                <table border="1" style="border-collapse:collapse;">
                  <tr>
                    <td colspan="2">险种</td>
                    <td colspan="2">限额名称</td>
                    <td colspan="2">责任限额/免赔额</td>
                  </tr>
                  <tr>
                    <td rowspan="6" colspan="2">雇主责任险</td>
                    <td colspan="2">限额名称</td>
                    <td colspan="2">责任限额/免赔额</td>
                  </tr>
                  <tr>
                    <td colspan="2">伤亡责任限额</td>
                    <td colspan="2">60万/人</td>
                  </tr>
                  <tr>
                    <td colspan="2">医疗费用限额</td>
                    <td colspan="2">5万/人</td>
                  </tr>
                  <tr>
                    <td colspan="2">每次事故责任限额</td>
                    <td colspan="2">240万/次（按4人计算）</td>
                  </tr>
                  <tr>
                    <td colspan="2">累计责任限额</td>
                    <td colspan="2">1800万/年（按30人计算）</td>
                  </tr>
                  <tr>
                    <td colspan="2">累计法律诉讼费用限额</td>
                    <td colspan="2">2万元/年（赠送）</td>
                  </tr>
                  <tr>
                    <td colspan="2">行业/职业类型</td>
                    <td>收费标准(年)</td>
                    <td>收费标准(月)</td>
                    <td>投保人数</td>
                    <td>保险费</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      一类职业：企业的行管人员
                      （管理人员，财务人员，以及公司行政辅助人员）
                    </td>
                    <td>408元/年/人</td>
                    <td>34元/月/人</td>
                    <td>10</td>
                    <td>4080</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      二类职业：企业的外勤人员
                      （销售人员，项目施工人员，项目服务人员）
                    </td>
                    <td>564/年/人</td>
                    <td>47/月/人</td>
                    <td>10</td>
                    <td>5640</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      三类职业：企业的生产人员
                      （企业司机、流水线工人等）
                    </td>
                    <td>804/年/人</td>
                    <td>67/月/人</td>
                    <td>10</td>
                    <td>8040</td>
                  </tr>
                  <tr>
                    <td colspan="2">保险费合计(人民币)</td>
                    <td colspan="2">(大写)：壹万柒仟柒佰陆拾圆</td>
                    <td colspan="2">(小写)：￥ 17760</td>
                  </tr>
                  <tr>
                    <td colspan="2">保险期间</td>
                    <td colspan="4">自 2020 年 2 月 1 日 零时起 至 2021 年 1 月 31 日 二十四时止。</td>
                  </tr>
                </table>
              </div>
              <div class="application-panel" v-loading="loading">
                <!-- 附件信息 -->
                <!-- <el-table
                  :data="filesData"
                  style="width: 100%"
                  v-loading="loading"
                  stripe
                  @sort-change="sortChange"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column prop="definitionName" label="序号" width="150"></el-table-column>
                  <el-table-column prop="insuredNumber" label="附件类型" width="100"></el-table-column>
                  <el-table-column prop="insuredNumber" label="附件名称" width="100"></el-table-column>
                  <el-table-column prop="insuredNumber" label="操作" width="100"></el-table-column>
                </el-table>-->
              </div>
              <div class="application-panel" v-loading="loading">
                <!-- 推广信息 -->
                <table border="1" style="border-collapse:collapse;">
                  <tr>
                    <td>人员类型</td>
                    <td>姓名</td>
                    <td>联系方式</td>
                    <td>注册账号</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="opinion" label="意见" width="250"></el-table-column>
              <el-table-column prop="status" label="审核步骤" width="100"></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>
      </el-aside>

      <el-container>
        <el-main>
          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
            <table>
              <tr>
                <td>当前步骤</td>
                <td>{{insureData.statusN}}</td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="应收保费">{{insureData.insuranceFee}}</el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="投保人名称">{{insureData.insuredName}}</el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="出账银行">{{insureData.insurancePolicy.issuingBank}}</el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="入账银行">{{insureData.insurancePolicy.accountBank}}</el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="转账单号">{{insureData.insurancePolicy.singlNumber}}</el-form-item>
                </td>
              </tr>
              <!-- <tr>
                <td colspan="2">
                  <el-form-item label="推广员账号" prop="issuingBank">
                    <el-input placeholder="请输入推广员账号" v-model="formModel.issuingBank"></el-input>
                  </el-form-item>
                </td>
              </tr>-->
              <!-- <tr>
                <td colspan="2">
                  <el-form-item label="保险代理人">
                    {{insureData.insurancePolicy.agentId}}
                  </el-form-item>
                </td>
              </tr>-->
              <tr>
                <td colspan="2">
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl()"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :multiple="false"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                    :before-upload="beforeUpload"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td>
                  <el-button
                    size="mini"
                    type="success"
                    disabled="disabled"
                    @click="downloadFiles()"
                  >打包下载申请资料</el-button>
                </td>
                <td>
                  <el-button size="mini" type="primary" @click="saveApproval()">提交</el-button>
                </td>
              </tr>
            </table>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Constant from "@/constant";
import insuranceApplicationApi from "@/api/business/insuranceApplication";
import approvalApi from "@/api/business/approval";
import { getToken } from "@/utils/auth"; // get token from cookie

import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

export default {
  data() {
    var self = this;
    var token = getToken;
    return {
      queryModel: {
        id: ""
      },
      ruleValidate: {},
      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: "",
        accountBank: "",
        issuingBank: "",
        singlNumber: ""
      },
      recordData: [],
      pageIndexRecord: 1,
      pageSizeRecord: 10,
      totalPagesRecord: 0,
      totalElementsRecord: 0,
      filesData: [],
      fileList: [],
      myHeaders: { Authorization: token }
    };
  },
  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;
      (function() {
        if (self.id.length == 0) {
          self.$message.error("没有传递ID");
        } else {
          var formData = new FormData();
          formData.append("id", self.id);
          formData.append("no", "0");
          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;
            this.acceptDetail();
            this.changePage(1);
          } 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);

      (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 + "");
        });
    },
    saveApproval() {
      var self = this;

      this.$refs["form"].validate(valid => {
        if (valid) {
          var self = this;
          var formModel = this.formModel;
          (function() {
            var formData = new FormData();

            formData.append("applicationId", self.id);
            formData.append("policyId", self.policyId);
            formData.append("processStatus", "正常");
            formData.append("opinion", self.formModel.opinion);

            return approvalApi.issued(formData);
          })().then(function(response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.$message({
                message: "保存成功!",
                type: "success"
              });

              self.$router.push("/business/insuranceFirst/listPicc");
            } else {
              self.$message({
                message: jsonData.message + "",
                type: "warning"
              });

              self.$emit("close", false);
            }
          });
        } else {
          this.$emit("error");
        }
      });
    },
    downloadFiles() {
    
    
    },
    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.data;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + ""); 
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadUrl: function() {
      var url = Constant.serverUrl + "/base/attachment/upload";
      return url;
    },
    beforeUpload(file) {
      var self = this;

      self.loading = true;

      const IMG_ALLOWD = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png'];
      //const isLt2M = file.size / 1024 / 1024 < 2;
      if (IMG_ALLOWD.indexOf(file.type) === -1) {
        this.$message.error("上传文件只能为图片格式!");
        self.loading = false;
        return false;
      } else {
        var formData = new FormData();
        formData.append("uploadFile", file);
        formData.append("fileName", "");
        formData.append("subFolder", "issued");

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

            var jsonData = response.data.data;

            self.fileUrl = jsonData.data;
          })
          .catch(error => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      }
    }
  },
  async mounted() {
    var self = this;
    self.loading = true;

    self.id = this.$route.query.id;
    this.insureDetail();
    //this.attachmentList();
  }
};
</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;
}
</style>