picc-admin-portal/src/views/business/insuranceFirst-transfer.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%">
        <leftTab></leftTab>
      </el-aside>
      <el-container>
        <el-main>
          <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'80px'">
            <table>
              <tr>
                <td>当前步骤</td>
                <td>{{insureData.statusN}}</td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="处理类型" prop="processStatus">
                    <el-select v-model="formModel.processStatus" placeholder="请选择" filterable>
                      <el-option label="通过" value="正常"></el-option>
                      <el-option label="退回" value="回退"></el-option>
                    </el-select>
                  </el-form-item>
                </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="出账银行" prop="issuingBank">
                    <el-input placeholder="请输入出账银行" v-model="formModel.issuingBank"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="入账银行" prop="accountBank">
                    <el-input placeholder="请输入入账银行" v-model="formModel.accountBank"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="转账单号" prop="singlNumber">
                    <el-input placeholder="请输入转账单号" v-model="formModel.singlNumber"></el-input>
                  </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="保险代理人" prop="agentId">
                    <el-input placeholder="请输入保险代理人" v-model="formModel.agentId"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item prop="opinion">
                    <el-input
                      type="textarea"
                      :rows="8"
                      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 leftTab from "./insuranceFirst-leftTab.vue";

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

export default {
  components: {
    leftTab: leftTab
  },
  data() {
    var self = this;

    return {
      queryModel: {
        id: ""
      },
      ruleValidate: {
        // issuingBank: [
        //   {
        //     required: true,
        //     message: "请填写出账银行",
        //     trigger: "blur"
        //   }
        // ],
        // accountBank: [
        //   {
        //     required: true,
        //     message: "请填写入账银行",
        //     trigger: "blur"
        //   }
        // ],
        // singlNumber: [
        //   {
        //     required: true,
        //     message: "请填写转账单号",
        //     trigger: "blur"
        //   }
        // ],
        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: "",
        accountBank: "",
        issuingBank: "",
        singlNumber: ""
      },
      recordData: [],
      pageIndexRecord: 1,
      pageSizeRecord: 10,
      totalPagesRecord: 0,
      totalElementsRecord: 0,
      filesData: [],
      insuranceAgentlist: ""
    };
  },
  methods: {
    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;
          } 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", self.formModel.processStatus);
            formData.append("opinion", self.formModel.opinion);

            formData.append("accountBank", self.formModel.accountBank);
            formData.append("issuingBank", self.formModel.issuingBank);
            formData.append("singlNumber", self.formModel.singlNumber);

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

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

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

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

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