front/front-vue/src/views/service/financeRecord/detailFinanceRecord.vue

<template>
  <div class="app-container">
    <!-- 添加或修改融资记录对话框 -->
    <span style="float: right; margin-right: 125px;">创建人{{ user }}</span>
        <span style="float: right; margin-right: 125px;">创建时间:{{ time }}</span>
        <span style="float: right; margin-right: 125px;">融资编号:{{ number }}</span>
      <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
        <el-divider content-position="left">融资信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="融信编号" prop="zfrFinanceId" >
              <el-select v-model="form.zfrFinanceId" style="width : 284px" clearable @clear="clearBoth" disabled>
                  <el-option
                    v-for="(item,index) in financeInfList"
                    :key="index"
                    :label="item.zfiNumber"
                    :value="item.zfiId"
                    @click.native="amount(item)"
                  ></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资金额" prop="zfrAmount" >
              <el-input v-model="form.zfrAmount" placeholder="请输入融资金额"  style="width: 284px;" readonly>
              <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资账户" prop="zfrCollectionAccount" v-if="this.form.zfpcrLoantype != '0'" >
              <el-input v-model="form.zfrCollectionAccount" placeholder="请输入融资账户" style="width: 284px;" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="承诺还款日" prop="zfrRepaymentDate"  >
              <el-input v-model="form.zfrRepaymentDate" placeholder="请输入承诺还款日" style="width: 284px;" disabled/> 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资利率" prop="zfrRate" v-if="false" >
              <el-input v-model="form.zfrRate" placeholder="请输入融资利率" style="width: 284px;" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资放款方式" prop="zfpcrLoantype" label-width="90px" v-if="false" >
              <el-input v-model="form.zfpcrLoantype" placeholder="请输入融资账户" style="width: 284px;" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="融资产品" prop="zfiProductId" v-if="false" >
              <el-input v-model="form.zfiProductId" placeholder="请输入融资产品" style="width: 284px;" disabled/> 
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">应收账款</el-divider>
        <span style="float: right; margin-right: 125px;">金额大写：{{ smallToBig(allAmount()) }}</span>
        <span style="float: right; margin-right: 125px;">消费金额：{{ allAmount() }}  元</span>
        <el-table :data="billInfList" >
          <el-table-column label="序号" type="index" width="50" align="center">
            <template slot-scope="scope">
              <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="编号" align="center" prop="zbiNumber" />
          <el-table-column label="账款名称" align="center" prop="zbiName" />
          <el-table-column label="应收企业" align="center" prop="payee" />
          <el-table-column label="应付企业" align="center" prop="payer" />
          <el-table-column label="还款时间" align="center" prop="zbiPayDate" />
          <el-table-column label="金额" align="center" prop="zbiAmount" />
        </el-table>
        <!-- 发票附件 -->
        <el-divider content-position="left">发票附件</el-divider>
          <el-table :data="invoiceFileList" border style="width: 100%">
            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handlePreview(scope.row)"
                  >预览</el-button>
                </template>
            </el-table-column>
          </el-table>
        <!-- 合同附件 -->
        <el-divider content-position="left">合同附件</el-divider>
          <el-table :data="contractFileList" border style="width: 100%">
            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handlePreview(scope.row)"
                  >预览</el-button>
                </template>
            </el-table-column>
          </el-table>
        <!-- 其他附件 -->
        <el-divider content-position="left">其他附件</el-divider>
          <el-table :data="otherFileList" border style="width: 100%">
            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
                <template slot-scope="scope">
                  <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handlePreview(scope.row)"
                  >预览</el-button>
                </template>
            </el-table-column>
          </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
      <!--预览-->
      <el-dialog  :visible.sync="openFile" width="1000px" append-to-body>
        <img :src="wordUrl" v-if="show" width='450px' height='500px'/>
        <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid"/>
      </el-dialog>
  </div>
</template>

<script>
import { getRecord,listBillInf} from "@/api/service/financeRecord/record";
import { listFinanceInf } from "@/api/common/financeInf";
import { getFile } from "@/api/service/credit/credit";
export default {
  name: "financeRecord",
  components: {
  },
  data() {
    return {
      //融资编号
      number: '',
      //创建时间
      time: '',
      //创建人
      user: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 全部融资记录表格数据
      recordList: [],
      //融信编号数据
      financeInfList: [],
      //应收账款
      billInfList: [],
      //合同附件
      contractFileList:[],
      //发票附件
      invoiceFileList:[],
      //其他文件
      otherFileList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: null,
        zfrApproveStt: null,
        zfpcrLoantype: null,
        zfiProductId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        zfrFinanceId: [
          { required: true, message: "融信编号不能为空", trigger: "blur" }
        ],
        zfrAmount: [
          { required: true, message: "融资金额不能为空", trigger: "blur" }
        ],
      },
      openFile:false,
      wordUrl: "",
    };
  },
  created() {
    const zfrId = this.$route.params && this.$route.params.zfrId;
    getRecord(zfrId).then((response) => {
      this.number = response.data.zfrNumber;
      this.time = this.parseTime(new Date(response.data.createTime),'{y}-{m}-{d} {h}:{m}:{s}');
      this.user = response.data.createUser;
      const zfrFinanceId = response.data.zfrFinanceId;
      listFinanceInf(zfrFinanceId).then(response => {
        this.financeInfList = response.data;
      })
      listBillInf(zfrFinanceId).then(response => {
        this.billInfList = response.data;
        this.loading = false;
      }).then(() =>{
        var queryParamsFile = {};
        queryParamsFile.ticketList = this.billInfList;
        getFile(queryParamsFile).then((response) => {
            if(response.data){
                //获取发票文件
                  this.invoiceFileList = response.data.invoiceFileList;
                //获取合同文件
                  this.contractFileList = response.data.contractFileList;
                //获取其他文件
                this.otherFileList = response.data.otherFileList;
            }
        })
      }).then(() =>{ 
        this.form = response.data;
        this.$set(this.form, "zfrRepaymentDate", this.parseTime(new Date(response.data.zfrRepaymentDate),'{y}-{m}-{d}'));
        
      })
    });
    // this.getFinanceInf();
  },
  methods: {
     /** 查询融信编号 */
    getFinanceInf(){
      this.loading = true;
      listFinanceInf().then(response => {
        this.financeInfList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        zfrId: null,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: "00",
        zfrApproveStt: null,
        zfrProfitSpare1: null,
        zfrProfitSpare2: null,
        zfrProfitSpare3: null,
        zfrProfitSpare4: null,
        zfrProfitSpare5: null,
        zfrProfitSpare6: null,
        zfrProfitSpare7: null,
        zfrProfitSpare8: null,
        zfrProfitSpare9: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 全部搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 全部重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //全部 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.zfrId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /* 融信编号赋值融资金额 */
    amount(item) {
      this.$set(this.form, "zfrAmount", item.zfiAmount);
      this.$set(this.form, "zfrRepaymentDate", item.zfiExpireDate);
      this.$set(this.form, "zfrRate", item.zfpcrRate);
      this.$set(this.form, "zfpcrLoantype", item.zfpcrLoantype);
      this.$set(this.form, "zfiProductId", item.zfiProductId);
      if(item.zfiId){
        this.loading = true;
        listBillInf(item.zfiId).then(response => {
        this.billInfList = response.data;
        this.loading = false;
      }).then(() =>{
        var queryParamsFile = {};
            queryParamsFile.ticketList = this.billInfList;
            getFile(queryParamsFile).then((response) => {
                if(response.data){
                    //获取发票文件
                     this.invoiceFileList = response.data.invoiceFileList;
                    //获取合同文件
                     this.contractFileList = response.data.contractFileList;
                    //获取其他文件
                    this.otherFileList = response.data.otherFileList;
                }
            });
      })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          addRecord(this.form).then(response => {
            this.msgSuccess("新增成功");
            loading.close();
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
          }).catch((response) => {
              loading.close();
          });
          
        }
      });
    },
    /* 清空 */
    clearBoth() {
      this.form.zfrAmount = '';
      this.form,zfrRepaymentDate = '';
      this.form.zfrRate = '';
      this.form.zfpcrLoantype = '';
      this.billInfList = [];
      this.contractFileList = [];
      this.invoiceFileList = [];
      this.otherFileList = [];
    },
    //预览
    handlePreview(row) {
      const pfiUrl = row.pfiUrl;
      const pfiFileName = row.pfiFileName;
      if (row.pfiUrl) {
          console.log(pfiFileName.substr(-3));
          if (pfiFileName.substr(-3) == "pdf") {
              this.wordUrl = pfiUrl + "/" + getToken();
              this.show=false;
              this.heid=true;
          } else if (
              pfiFileName.substr(-3) == "jpg" ||
              pfiFileName.substr(-3) == "png" ||
              pfiFileName.substr(-3) == "JPG" ||
              pfiFileName.substr(-3) == "PNG" ||
              pfiFileName.substr(-4) == "jpeg" ||
              pfiFileName.substr(-3) == "JPEG" 
          ) {
              this.wordUrl =
                  pfiUrl +
                  "/" +
                  getToken();
                  this.show=true;
                  this.heid=false;
                    console.log("====>",this.wordUrl);
          } else if (
              pfiFileName.substr(-3) == "doc" ||
              pfiFileName.substr(-3) == "DOC"||
              pfiFileName.substr(-4) == "docx" ||
              pfiFileName.substr(-3) == "DOCX"
          ) {
              this.wordUrl =
                  "https://view.officeapps.live.com/op/view.aspx?src=" +
                  pfiUrl +
                  "/" +
                  getToken() +
                  "/" +
                  pfiFileName;
                  this.show=false;
                  this.heid=true;
                  console.log("====>",this.wordUrl);
          } else {
              this.$message({
                  message: "暂不支持该类型文件预览",
                  type: "warning",
              });
              return;
          }
      }
      this.openFile = true;
    },
    //应收账款合计
    allAmount() {
      var strarr = [0.00];
      for (let i in this.billInfList) {
        strarr.push(this.billInfList[i]["zbiAmount"]);
      }
      return Math.floor(eval(strarr.join("+")) * 100) / 100; //结果
    },
    /* //  将数字金额转换为大写金额 */
    smallToBig(money) {
      //  将数字金额转换为大写金额
      var cnNums = new Array(
        "零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖" ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      var parts; //分离金额后用的数组，预定义
      if (money == "" || money == null || money == undefined) {
        return "零元零角零分";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('sc-service/record/export', {
        ...this.queryParams
      }, `sc-service_record.xlsx`)
    }
  }
};
</script>