修改汇票

src/api/contracts.js

@@ -1,5 +1,21 @@
 import request from '@/utils/request'
 
+// 保存汇票
+export function contractDraftSubmitApi(data) {
+  return request({
+    url: '/api/Contract/addContractDraft',
+    method: 'post',
+    data
+  })
+}
+// 获取汇票详情
+export function contractsDraftDetailApi(id) {
+  return request({
+    url: '/api/Contract/contractDraft/' + id,
+    method: 'get'
+  })
+}
+
 // 获取合同详情
 export function contractsDetailApi(id) {
   return request({

src/components/BillForm/BillForm.vue

@@ -4,12 +4,13 @@
     v-for="(item, index) in contractDrafts"
     :key="index"
     >
-    <el-form ref="form" :model="item" :rules="rules" label-width="110px" label-position="right" class="form-container">
+
       <el-row class="form-container-items">
         <!-- 汇票名称 -->
         <el-col :span="colSpan">
           <el-form-item label="汇票名称"
-          prop="name">
+          :prop="'contractDrafts.' + index + '.name'"
+          :rules="rules.name">
             <el-input
               v-model="item.name"
               class="ipwidth"
@@ -21,7 +22,8 @@
         <!-- 汇票号码 -->
         <el-col :span="colSpan">
           <el-form-item label="汇票号码"
-          prop="draftNo">
+          :prop="'contractDrafts.' + index + '.draftNo'"
+          :rules="rules.draftNo">
             <el-input
               v-model="item.draftNo"
               class="ipwidth"
@@ -33,7 +35,8 @@
         <!-- 出票人 -->
         <el-col :span="colSpan">
           <el-form-item label="出票人"
-          prop="drawersId">
+          :prop="'contractDrafts.' + index + '.drawersId'"
+          :rules="rules.drawersId">
             <DrawerSelect v-model="item.drawersId" />
             <i class="el-icon-circle-plus-outline" style="font-size:20px;cursor: pointer;"
             @click="addDrawer" />
@@ -42,7 +45,8 @@
         <!-- 预计贴现日 -->
         <el-col :span="colSpan">
           <el-form-item label="预计贴现日"
-          prop="expectDiscountDate">
+          :prop="'contractDrafts.' + index + '.expectDiscountDate'"
+          :rules="rules.expectDiscountDate">
             <el-date-picker
               v-model="item.expectDiscountDate"
               type="date"
@@ -56,7 +60,8 @@
         <!-- 金额 -->
         <el-col :span="colSpan">
           <el-form-item label="金额"
-          prop="money">
+          :prop="'contractDrafts.' + index + '.money'"
+          :rules="rules.money">
             <el-input
               v-model="item.money"
               class="ipwidth"
@@ -69,7 +74,8 @@
         <!-- 承兑人 -->
         <el-col :span="colSpan">
           <el-form-item label="承兑人"
-          prop="acceptorName">
+          :prop="'contractDrafts.' + index + '.acceptorName'"
+          :rules="rules.acceptorName">
             <AcceptorSelect
               v-model="item.acceptorName"
               @change="(...args)=> changeAcceptorName(...args, index)"
@@ -79,8 +85,8 @@
         <!-- 承兑日期 -->
         <el-col :span="colSpan">
           <el-form-item label="承兑日期"
-          prop="issueDate"
-          >
+          :prop="'contractDrafts.' + index + '.issueDate'"
+          :rules="rules.issueDate">
             <el-date-picker
               v-model="item.issueDate"
               type="date"
@@ -125,8 +131,8 @@
         <!-- 出票日期 -->
         <el-col :span="colSpan">
           <el-form-item label="出票日期"
-          prop="acceptDate"
-          >
+          :prop="'contractDrafts.' + index + '.acceptDate'"
+          :rules="rules.acceptDate">
             <el-date-picker
               v-model="item.acceptDate"
               type="date"
@@ -168,8 +174,8 @@
         <!-- 到期日期 -->
         <el-col :span="colSpan">
           <el-form-item label="到期日期"
-          prop="expireDate"
-          >
+          :prop="'contractDrafts.' + index + '.expireDate'"
+          :rules="rules.expireDate">
             <el-date-picker
               v-model="item.expireDate"
               type="date"
@@ -195,8 +201,7 @@
         <!-- 利率 -->
         <el-col :span="colSpan">
           <el-form-item label="附件"
-          prop="picUrls"
-          >
+          :prop="'contractDrafts.' + index + '.picUrls'">
             <FileUpload
             v-model="item.picUrls"
             accept=".jpg, .jpeg, .png, .pdf"
@@ -212,7 +217,7 @@
         </el-col>
 
       </el-row>
-    </el-form>
+
   </div>
 
   </div>
@@ -242,35 +247,35 @@ export default {
       contractDrafts: [],
       rules: {
         name: [
-          { required: true, message: '请输入', trigger: 'change' }
+          { required: true, message: '请输入', trigger: 'blur' }
         ],
         draftNo: [
-          { required: true, message: '请输入', trigger: 'change' }
+          { required: true, message: '请输入', trigger: 'blur' }
         ],
         drawersId: [
           { required: true, message: '请输入', trigger: 'change' }
         ],
         expectDiscountDate: [
-          { required: true, message: '请选择', trigger: 'change' }
+          { required: true, message: '请选择', trigger: 'blur' }
         ],
         money: [
-          { required: true, message: '请输入', trigger: 'change' }
+          { required: true, message: '请输入', trigger: 'blur' }
         ],
         acceptorName: [
           { required: true, message: '请选择', trigger: 'change' }
         ],
         issueDate: [
-          { required: true, message: '请选择', trigger: 'change' }
+          { required: true, message: '请选择', trigger: 'blur' }
         ],
         acceptDate: [
-          { required: true, message: '请选择', trigger: 'change' }
+          { required: true, message: '请选择', trigger: 'blur' }
         ],
         expireDate: [
-          { required: true, message: '请选择', trigger: 'change' }
+          { required: true, message: '请选择', trigger: 'blur' }
         ],
-        picUrls: [
+        /*picUrls: [
           { trigger: ['change', 'input'], validator: this.validatePicUrls }
-        ]
+        ]*/
       }
     }
   },
@@ -283,7 +288,7 @@ export default {
     }
   },
   mounted() {
-
+    //this.$set(this.contractDrafts, 'picUrls', this.contractDrafts.picList)
   },
   methods: {
     addDrawer() {
@@ -386,7 +391,7 @@ export default {
       }
     },
     validatePicUrls(rule, value, callback) {
-      debugger
+      //debugger
       console.log(Object.keys(value).length, value)
       if (value && Object.keys(value).length > 0) {
         callback()

src/views/contracts/addnewbill.vue

@@ -1,544 +1,126 @@
 <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-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
 
-      <!-- 汇票名称 -->
-      <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 ref="form" :model="form" label-width="110px" label-position="right" class="form-container">
+        <BillForm
+        v-model="form.contractDrafts"
+        />
       </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 class="commit">
+        <div class="addall">
+          <el-button
+            type="warning"
+            style="width: 180px; height: 45px; font-size: 16px"
+            @click="onSubmit"
+          >确认上传
+          </el-button>
+        </div>
       </div>
-      <div class="addall">
-        <el-button
-          type="warning"
-          style="width: 180px; height: 45px; font-size: 16px"
-          @click="onSubmit"
-        >确认上传
-        </el-button>
-      </div>
-    </div>
+
+    </el-card>
   </div>
 </template>
-
 <script>
-import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
+import { contractDraftSubmitApi, contractsDraftDetailApi } from '@/api/contracts'
+import BillForm from '@/components/BillForm/BillForm.vue'
+
 export default {
+  components: {
+    BillForm
+  },
   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:''
-          }
-        ]
+        contractDrafts: []
       },
-      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()
+    // 编辑获取详情
+    this.getDetail()
   },
   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('至少一个')
+    getDetail() {
+      const id = this.$route.query.id
+      if(!id){
+        // 合同ID 没有汇票id 新增汇票
+        this.form.contractDrafts.push({
+            name: '', // 汇票名称
+            draftNo: '', // 汇票号码
+            acceptorId: '', // 承兑人id
+            drawersId: '', // 出票人
+            money: '', // 金额
+            acceptDate: '', // 出票日期
+            loanLimit: '', // 最高贷款额度
+            serviceRate: '', // 服务费率
+            serviceMoney: '', // 服务费
+            interestRate: '', // 利率
+            interest: '', // 利息
+            picUrls: [], // 汇票名称
+            expectDiscountDate: '', // 预计贴现日
+            issueDate: '', // 承兑日期
+            expireDate: '', // 到期日期
+            contractId:this.$route.query.cid,
+            // limitTime: '', //
+            // acceptDateTime: '', //
+            // expectDiscountDateTime: ''//
+          })
+
+          return
       }
-    },
-
-    /* 计算时间段 */
-    change(e, number) {},
 
-    /* 获取金额 */
-    getMoney(index) {
-      this.getloanLimt(index)
-      this.getSerMoney(index)
-      this.getInterMoney(index)
+      // 有汇票ID 修改汇票
+      contractsDraftDetailApi(id).then((res) => {
+        this.form.contractDrafts = [res.data]
+      });
     },
-    /* 计算最高贷款额度 */
-    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)
-      }
+    onSubmit(o) {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          contractDraftSubmitApi(this.form.contractDrafts).then(res => {
+            if (res.code === 200) {
+              // this.onBack()
+              this.$message({
+                type: 'success',
+                message: res.msg
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
     },
-    /* 利息*/
-    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)
-      }
+    onBack() {
+      this.$router.go(-1)
     }
   }
 }
 </script>
 
-<style lang="scss">
-.contract {
-  display: flex;
-  justify-content: space-between;
+<style lang="scss" scoped>
+.box-card {
+  padding: 20px 10px;
   margin-bottom: 20px;
-}
-
-.form {
-  display: flex;
-  justify-content: space-around;
-}
-
-.addnew {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.addall {
-  display: flex;
-  justify-content: center;
+  .titlesa {
+    margin-bottom: 10px;
+  }
+  .titlesa~.titlesa{
+    margin-top: 20px;
+  }
 }
 
 .commit {
-  margin: 20px 0;
+  text-align: center;
+  .addnew {
+    text-align: right;
+    margin-right: 10px;
+  }
 }
 </style>

src/views/contracts/addnewbill_bak.vue

@@ -0,0 +1,544 @@
+<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">
+.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>

src/views/contracts/detail.vue

@@ -173,6 +173,12 @@
               style="cursor: pointer; margin-right: 15px"
               @click="tapDetail(scope.row.id)"
             >查看详情</el-tag>
+            <el-tag
+              v-if="scope.row.status == 2"
+              type="success"
+              style="cursor: pointer; margin-right: 15px"
+              @click="addNewBill(scope.row.id)"
+            >重新提交</el-tag>
             <el-tag
               v-if="scope.row.draftStatus == 1"
               type="success"
@@ -190,7 +196,7 @@
       </el-table>
 
       <div class="pagesip">
-        <el-button v-if="role === 2" type="primary" @click="addNewBill">
+        <el-button v-if="role === 2" type="primary" @click="addNewBill('')">
           新增汇票</el-button>
         <el-button
           type="success"
@@ -294,12 +300,13 @@ export default {
       const type = url.substr(index + 1)
       return fileType.indexOf(type) === -1
     },
-    addNewBill() {
-      const id = this.$route.query.id
+    addNewBill(id) {
+      const cid = this.$route.query.id
       this.$router.push({
         name: 'addnewbill',
         query: {
-          id: id
+          cid: cid,
+          id: id,
         }
       })
     },

src/views/contracts/new_file.vue

@@ -57,10 +57,12 @@
         />
       </div>
 
-      <!-- 汇票编辑 -->
-      <BillForm
-      v-model="form.contractDrafts"
-      />
+      <el-form ref="form" :model="form" label-width="110px" label-position="right" class="form-container">
+        <!-- 汇票编辑 -->
+        <BillForm
+        v-model="form.contractDrafts"
+        />
+      </el-form>
 
       <!-- 新增汇票 -->
       <div class="commit">