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

<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/businessInsuranceApplication">新增投保初审</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">
          <el-tab-pane label="投保信息" name="0">
            <div>
              <div class="application-panel" v-loading="loading">
                <!-- 投保信息 -->
                <table border="1">
                  <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="tableData"
                  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-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-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="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">
                  <tr>
                    <td>险种</td>
                    <td>限额名称</td>
                    <td>责任限额/免赔额</td>
                  </tr>
                  <tr>
                    <td colspan="5">{{acceptData.name}}1</td>
                    <td>限额名称</td>
                    <td>责任限额/免赔额</td>
                  </tr>
                </table>
              </div>
              <div class="application-panel" v-loading="loading">
                <!-- 附件信息 -->
              </div>
              <div class="application-panel" v-loading="loading">
                <!-- 推广信息 -->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="流程历史记录" name="20"></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.status}}--投保-人才超市初审</td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="处理类型" prop="processStatus">
                    <el-select v-model="formModel.processStatus"  placeholder="请选择" filterable>
                      <el-option label="通过" value="1"></el-option>
                      <el-option label="退回" value="2"></el-option>
                    </el-select>
                    
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item prop="opinion">
                    <el-input
                      type="textarea"
                      :rows="20"
                      placeholder="请输入内容"
                      v-model="formModel.opinion"
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>下一步骤</td>
                <td>投保-人保专员复审</td>
              </tr>
              <tr>
                <td>
                  <el-button size="mini" type="success" @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 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,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      field: "",
      direction: "",
      pageSizeList: [10, 20, 30],
      multipleSelection: [],
      showModal: false,
      modalTitle: "",
      businessKey: "",
      id: "",
      definitionId: "",
      insureData: "",
      acceptData: "",
      formModel: {}
    };
  },
  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);

      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.tableData = 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 {
          return insuranceApplicationApi.insureDetail(self.id);
        }
      })()
        .then(response => {
          var jsonData = response.data;
          self.loading = false;

          if (jsonData.result) {
            self.insureData = jsonData.data;
            this.definitionId = self.insureData.definitionId;
            this.acceptDetail();
          } 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.id);
            formData.append("processStatus", self.formModel.processStatus);
            formData.append("opinion", self.formModel.opinion);

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

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

              self.$emit("close", true);
            } else {
              self.$message({
                message: jsonData.message + "",
                type: "warning"
              });

              self.$emit("close", false);
            }
          });
        } else {
          this.$emit("error");
        }
      });
    },
    downloadFiles() {
      alert(1);
    }
  },
  async mounted() {
    var self = this;
    self.loading = true;

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