alhj-admin/src/views/contracts/addnewbill_bak.vue

<template>
  <div class="app-container">
    <!-- 汇票模块 -->
    <div
      v-for="(item, index) in form.contractDrafts"
      :key="item.id"
      class="form"
      style="margin: 20px;border: 1px solid #c0c0c0;padding: 10px;border-radius: 10px;"
    >

      <!-- 汇票名称 -->
      <el-form ref="form" :model="item" label-width="90px">

        <el-form-item label="汇票名称">
          <el-input
            v-model="item.name"
            class="ipwidth"
            placeholder="请填写汇票名称"
            style="width: 220px"
          />
        </el-form-item>
        <!-- 预计贴现日 -->
        <el-form-item label="预计贴现日">
          <el-date-picker
            v-model="item.expectDiscountDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="inputMoney(index, 4)"
            @input="inputMoney(index)"
          />
        </el-form-item>
        <!-- 出票日期 -->
        <el-form-item label="出票日期">
          <el-date-picker
            v-model="item.acceptDate"
            type="date"
            placeholder="选择日期"
            class="ipwidth"
            @change="change(index, 2)"
          />
        </el-form-item>
        <!-- 承兑日期 -->
        <el-form-item label="承兑日期">
          <el-date-picker
            v-model="item.issueDate"
            type="date"
            placeholder="选择日期"
            default-value
            value-format="yyyy-MM-dd"
            @change="inputMoney(index, 1)"
            @input="inputMoney(index)"
          />
        </el-form-item>
        <!-- 到期日期 -->
        <el-form-item label="到期日期">
          <el-date-picker
            v-model="item.expireDate"
            type="date"
            placeholder="选择日期"
            @change="change(index, 3)"
          />
        </el-form-item>
      </el-form>
      <!-- 汇票号码 -->
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="汇票号码">
          <el-input
            v-model="item.draftNo"
            class="ipwidth"
            placeholder="请填写汇票号码"
            style="width: 220px"
          />
        </el-form-item>

        <!-- 金额 -->
        <el-form-item label="金额">
          <el-input
            v-model="item.money"
            class="ipwidth"
            placeholder="请填写金额"
            style="width: 220px"
            @blur="getMoney(index)"
            @input="inputMoney(index)"
          />
        </el-form-item>
        <!-- 服务费 -->
        <el-form-item label="服务费">
          <el-input
            v-model="item.serviceMoney"
            class="ipwidth"
            placeholder="计算得出服务费"
            style="width: 220px"
          />
        </el-form-item>
        <!-- 最高贷款额度 -->
        <el-form-item label="最高贷款额度">
          <el-input
            v-model="item.loanLimit"
            class="ipwidth"
            placeholder="计算得出最高贷款额度"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="利息">
          <el-input
            v-model="item.interest"
            class="ipwidth"
            placeholder="计算得出利息"
            style="width: 220px"
          />
        </el-form-item>
      </el-form>
      <!-- 出票人 -->
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="出票人">
          <el-select v-model="form.drawersName" placeholder="请选择出票人">
            <el-option
              label="新增出票人"
              value=""
              style="color: darkorange"
              @click.native="addDrawer"
            />
            <el-option
              v-for="item in drawersName"
              :key="item.id"
              :label="item"
              :value="item"
			   @click.native="getdrawersId(index,item)"
            />
          </el-select>
        </el-form-item>
        <!-- 承兑人 -->
        <el-form-item label="承兑人">
          <el-select v-model="form.acceptorName" filterable placeholder="请选择承兑人">
            <el-option
              v-for="val in acceptorName"
              :key="val"
              :label="val"
              :value="val"
              @click.native="getRate(index)"
            />
          </el-select>
        </el-form-item>
        <!-- 服务费率 -->

        <el-form-item label="服务费率">
          <el-input
            v-model="item.serviceRate"
            class="ipwidth"
            placeholder="服务费率"
            style="width: 220px"
            @input="inputMoney(index)"
          />
        </el-form-item>
        <!-- 利率 -->
        <el-form-item label="利率">
          <el-input
            v-model="item.interestRate"
            class="ipwidth"
            placeholder="利率"
            style="width: 220px"
            @input="inputMoney(index)"
          />
        </el-form-item>
      </el-form>
      <!-- 汇票附件上传 -->
      <div>
        <el-row>
          <el-col style="margin: 0 auto">
            <div class="titlesa">
              <span>附件</span>
              <span
                style="color: #d05c39"
              >*支持上传pdf、jpg/jpeg、png格式</span>
            </div>
            <div>
              <el-upload
                action="https://ht.9026.com/api/File"
                list-type="picture-card"
                :on-success="handlepicUrls"
              >
                <i class="el-icon-plus" />
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="form.contractDrafts[0].picUrls"
                  alt=""
                >
              </el-dialog>
            </div>
          </el-col>
        </el-row>

        <!-- 删除汇票 -->
        <el-button
          type="primary"
          style="width: 100px; height: 50px; margin-top: 50px"
          @click="deletedraft(index)"
        >删除汇票</el-button>
      </div>
    </div>
    <!-- 新增汇票 -->
    <div class="commit">
      <div class="addnew">
        <el-button type="primary" @click="adddraft">新增汇票</el-button>
      </div>
      <div class="addall">
        <el-button
          type="warning"
          style="width: 180px; height: 45px; font-size: 16px"
          @click="onSubmit"
        >确认上传
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      drawersList: [],
      acceptorList: [],
      contractList: [],
      filesArray: [], // 汇票图片上传数组
      file: '',
      form: {
        // 承兑人列表
        acceptorName: [],
        // 出票人列表
        drawersName: [],
        /* 汇票的数据 */
        contractDrafts: [
          {
            name: '',
            draftNo: '',
            acceptorId: '',
            drawersId: '',
            money: '',
            acceptDate: '',
            loanLimit: '',
            serviceRate: '',
            serviceMoney: '',
            interestRate: '',
            interest: '',
            picUrls: [],
            expectDiscountDate: '',
            issueDate: '',
            expireDate:'',
            acceptDateTime: '',
            expectDiscountDateTime: '',
			contractId:59,
			limitTime:''
          }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  mounted() {
	// 获取合同id
	const id = this.$route.query.id
	
    this.$request({
      url: '/api/Acceptor/search',
      method: 'post',
      data: {
        pageIndex: 1,
        pageSize: 100
      }
    }).then((res) => {
      this.acceptorList = res.data.result
      this.acceptorName = Array.from(this.acceptorList, ({ name }) => name)
    })
    this.$request({
      url: '/api/Drawer/search',
      method: 'post',
      data: {
        pageIndex: 1,
        pageSize: 100
      }
    }).then((res) => {
      this.drawersList = res.data.result
      this.drawersName = Array.from(this.drawersList, ({ name }) => name)
      // 去除重复的出票人
      for (var i = 0; i < this.drawersName.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < this.drawersName.length; j++) {
          // 再次遍历数组
          if (this.drawersName[i] === this.drawersName[j]) {
            // 判断连个值是否相等
            this.drawersName.splice(j, 1) // 相等删除后者
            j--
          }
        }
      }
    })
    /* 调用获取当前的时间 */
    this.loadTime()
  },
  methods: {
    inputMoney(index) {
      const { money, serviceRate, interestRate, expectDiscountDate, issueDate } = this.form.contractDrafts[index]
      this.form.contractDrafts[index].loanLimit = maxLoanAmount(money, serviceRate, interestRate, expectDiscountDate, issueDate)
    },
    /* 确实上传按钮 */
    onSubmit() {
      this.$request({
        url: 'api/Contract/addContractDraft',
        method: 'post',
        data: this.form.contractDrafts
      }).then((res) => {
        console.log(res)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
		this.$router.go(-1)
      })
    },

    /* 默认时间 */
    loadTime() {
      const myDate = new Date()
      const wk = parseInt(Date.now() / 100000).toFixed(0) * 100000
      const yy = String(myDate.getFullYear())
      // let mm = myDate.getMonth() + 1
      const mm = String(
        myDate.getMonth() + 1 < 10
          ? '0' + (myDate.getMonth() + 1)
          : myDate.getMonth() + 1
      )
      const dd = String(
        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
      )
      const nowDate = yy + '-' + mm + '-' + dd
      this.form.contractDrafts.forEach((item) => {
        item.acceptDate = nowDate
        item.issueDate = nowDate
        item.expireDate = nowDate
        item.expectDiscountDate = nowDate
        item.expectDiscountDateTime = wk
        item.acceptDateTime = wk
        const nTime = item.acceptDateTime - item.expectDiscountDateTime
        item.limitTime = Math.floor(nTime / 86400000)
      })
    },


    /* 上传图片到浏览器成功回调 */
    handlepicUrls(res) {
      // 解构
      const { file } = res.data
      this.filesArray.push(file)
      this.form.contractDrafts[0].picUrls = this.filesArray
    },

    /* 获取服务率和利率,承兑人id */
    getRate(index) {
      const list = this.acceptorList.filter(
        (item) => item.name === this.form.acceptorName
      )
		console.log(list)
	  this.form.contractDrafts[index].acceptorId=list[index].id
      this.form.contractDrafts[index].interestRate = list[index].interest
      this.form.contractDrafts[index].serviceRate = list[index].serviceRate
    },
	// 获取出票人id
	getdrawersId(index,name){
		const drawers=this.drawersList.filter((item)=>item.name===name)
		console.log(drawers)
		this.form.contractDrafts[index].drawersId=drawers[index].id
		console.log(drawers[index].id)
	},
    addDrawer() {
      this.$router.push({
        path: '/form/addTicketdrawer'
      })
    },
    // 新增汇票
    adddraft() {
      this.form.contractDrafts.push({
        name: '',
        draftNo: '',
        acceptorId: '',
        drawersId: '',
        money: '',
        acceptDate: '',
        loanLimit: '',
        serviceRate: '',
        serviceMoney: '',
        interestRate: '',
        interest: '',
        picUrls: [],
        expectDiscountDate: '',
        issueDate: '',
        expireDate: '',
        limitTime: ''
      })
	  
    },
    // 删除汇票
    deletedraft(index) {
      const contractDraftsLength = this.form.contractDrafts.length
      if (contractDraftsLength > 1) {
        this.form.contractDrafts.splice(index, 1)
      } else {
        this.$message.error('至少一个')
      }
    },

    /* 计算时间段 */
    change(e, number) {},

    /* 获取金额 */
    getMoney(index) {
      this.getloanLimt(index)
      this.getSerMoney(index)
      this.getInterMoney(index)
    },
    /* 计算最高贷款额度 */
    getloanLimt(i) {
      if (
        this.form.contractDrafts[i].money &&
        this.form.contractDrafts[i].serviceRate &&
        this.form.contractDrafts[i].interestRate
      ) {
        this.form.contractDrafts[i].loanLimit = (
          ((this.form.contractDrafts[i].money /
            (this.form.contractDrafts[i].serviceRate +
              this.form.contractDrafts[i].interestRate)) *
            this.form.contractDrafts[i].limitTime) /
            360 +
          1
        ).toFixed(2)
      }
    },
    /* 计算服务费 */
    getSerMoney(i) {
      if (
        this.form.contractDrafts[i].money &&
        this.form.contractDrafts[i].serviceRate &&
        this.form.contractDrafts[i].interestRate
      ) {
        this.form.contractDrafts[i].serviceMoney = (
          ((((this.form.contractDrafts[i].money /
            (this.form.contractDrafts[i].serviceRate +
              this.form.contractDrafts[i].interestRate)) *
            this.form.contractDrafts[i].limitTime) /
            360 +
            1) *
            this.form.contractDrafts[i].serviceRate *
            this.form.contractDrafts[i].limitTime) /
          360
        ).toFixed(2)
      }
    },
    /* 利息*/
    getInterMoney(i) {
      if (
        this.form.contractDrafts[i].money &&
        this.form.contractDrafts[i].serviceRate &&
        this.form.contractDrafts[i].interestRate
      ) {
        this.form.contractDrafts[i].interest = (
          ((((this.form.contractDrafts[i].money /
            (this.form.contractDrafts[i].serviceRate +
              this.form.contractDrafts[i].interestRate)) *
            this.form.contractDrafts[i].limitTime) /
            360 +
            1) *
            this.form.contractDrafts[i].interestRate *
            this.form.contractDrafts[i].limitTime) /
          360
        ).toFixed(2)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contract {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form {
  display: flex;
  justify-content: space-around;
}

.addnew {
  display: flex;
  justify-content: flex-end;
}

.addall {
  display: flex;
  justify-content: center;
}

.commit {
  margin: 20px 0;
}
</style>