汇票组件

src/components/BillForm/BillForm.vue

@@ -0,0 +1,418 @@
+<template>
+  <div>
+    <div
+    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">
+            <el-input
+              v-model="item.name"
+              class="ipwidth"
+              placeholder="请填写"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 汇票号码 -->
+        <el-col :span="colSpan">
+          <el-form-item label="汇票号码"
+          prop="draftNo">
+            <el-input
+              v-model="item.draftNo"
+              class="ipwidth"
+              placeholder="请填写汇票号码"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 出票人 -->
+        <el-col :span="colSpan">
+          <el-form-item label="出票人"
+          prop="drawersId">
+            <DrawerSelect v-model="item.drawersId" />
+            <i class="el-icon-circle-plus-outline" style="font-size:20px;cursor: pointer;"
+            @click="addDrawer" />
+          </el-form-item>
+        </el-col>
+        <!-- 预计贴现日 -->
+        <el-col :span="colSpan">
+          <el-form-item label="预计贴现日"
+          prop="expectDiscountDate">
+            <el-date-picker
+              v-model="item.expectDiscountDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              :picker-options="pickerStart(index)"
+              @change="inputMoney(index)"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 金额 -->
+        <el-col :span="colSpan">
+          <el-form-item label="金额"
+          prop="money">
+            <el-input
+              v-model="item.money"
+              class="ipwidth"
+              placeholder="请填写金额"
+              clearable
+              @input="inputMoney(index)"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 承兑人 -->
+        <el-col :span="colSpan">
+          <el-form-item label="承兑人"
+          prop="acceptorName">
+            <AcceptorSelect
+              v-model="item.acceptorName"
+              @change="(...args)=> changeAcceptorName(...args, index)"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 承兑日期 -->
+        <el-col :span="colSpan">
+          <el-form-item label="承兑日期"
+          prop="issueDate"
+          >
+            <el-date-picker
+              v-model="item.issueDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              :picker-options="pickerEnd(index)"
+              :disabled="!item.expectDiscountDate"
+              @change="inputMoney(index)"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 服务费 -->
+        <el-col :span="colSpan">
+          <el-form-item label="服务费"
+          prop="serviceMoney"
+          >
+            <el-input
+              v-model="item.serviceMoney"
+              class="ipwidth"
+              placeholder="计算得出服务费"
+              clearable
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 服务费率 -->
+        <el-col :span="colSpan">
+          <el-form-item label="服务费率"
+          prop="serviceRate"
+          >
+            <el-input
+              v-model="item.serviceRate"
+              class="ipwidth"
+              placeholder="服务费率"
+              clearable
+              disabled
+            >
+             <template slot="append">%</template>
+           </el-input>
+          </el-form-item>
+        </el-col>
+        <!-- 出票日期 -->
+        <el-col :span="colSpan">
+          <el-form-item label="出票日期"
+          prop="acceptDate"
+          >
+            <el-date-picker
+              v-model="item.acceptDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 最高贷款额度 -->
+        <el-col :span="colSpan">
+          <el-form-item label="最高贷款额度"
+          prop="loanLimit"
+          >
+            <el-input
+              v-model="item.loanLimit"
+              class="ipwidth"
+              clearable
+              placeholder="计算得出最高贷款额度"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 利率 -->
+        <el-col :span="colSpan">
+          <el-form-item label="利率"
+          prop="interestRate"
+          >
+            <el-input
+              v-model="item.interestRate"
+              clearable
+              class="ipwidth"
+              placeholder="利率"
+              disabled
+            >
+              <template slot="append">%</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <!-- 到期日期 -->
+        <el-col :span="colSpan">
+          <el-form-item label="到期日期"
+          prop="expireDate"
+          >
+            <el-date-picker
+              v-model="item.expireDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 利息 -->
+        <el-col :span="colSpan">
+          <el-form-item label="利息"
+          prop="interest"
+          >
+            <el-input
+              v-model="item.interest"
+              class="ipwidth"
+              placeholder="计算得出利息"
+              clearable
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 利率 -->
+        <el-col :span="colSpan">
+          <el-form-item label="附件"
+          prop="picUrls"
+          >
+            <FileUpload
+            v-model="item.picUrls"
+            accept=".jpg, .jpeg, .png, .pdf"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 删除汇票 -->
+        <el-col :span="24" style="text-align:right">
+          <el-button
+            type="primary"
+            @click="onDelete(index)"
+          >删除汇票</el-button>
+        </el-col>
+
+      </el-row>
+    </el-form>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
+import DrawerSelect from '@/components/DrawerSelect/DrawerSelect.vue'
+import AcceptorSelect from '@/components/AcceptorSelect/AcceptorSelect.vue'
+export default {
+  name: 'BillForm',
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    }
+  },
+  components: {
+    DrawerSelect,
+    AcceptorSelect
+  },
+  data() {
+    return {
+      colSpan: 8,
+      contractDrafts: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入', trigger: 'change' }
+        ],
+        draftNo: [
+          { required: true, message: '请输入', trigger: 'change' }
+        ],
+        drawersId: [
+          { required: true, message: '请输入', trigger: 'change' }
+        ],
+        expectDiscountDate: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        money: [
+          { required: true, message: '请输入', trigger: 'change' }
+        ],
+        acceptorName: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        issueDate: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        acceptDate: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        expireDate: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        picUrls: [
+          { trigger: ['change', 'input'], validator: this.validatePicUrls }
+        ]
+      }
+    }
+  },
+  watch:{
+    value(val, old) {
+      console.log('billform=', val)
+      if(val){
+        this.contractDrafts = val
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    addDrawer() {
+      this.$router.push({
+        path: '/form/addTicketdrawer'
+      })
+    },
+    onDelete(index) {
+      const contractDraftsLength = this.contractDrafts.length
+      if (contractDraftsLength > 1) {
+        this.contractDrafts.splice(index, 1)
+        this.emitInput()
+      } else {
+        this.$message.error('默认汇票禁止删除')
+      }
+    },
+    changeAcceptorName(value, exist, index) {
+      if (exist) {
+        const { id, interest, serviceRate } = exist
+        this.contractDrafts[index].acceptorId = id
+        this.contractDrafts[index].interestRate = interest
+        this.contractDrafts[index].serviceRate = serviceRate
+        this.inputMoney(index)
+      }
+    },
+    // 计算金额
+    inputMoney(index) {
+      this.getloanLimt(index)
+      this.getSerMoney(index)
+      this.getInterMoney(index)
+      this.emitInput()
+    },
+    /* 计算最高贷款额度 */
+    getloanLimt(index) {
+      const {
+        money,
+        serviceRate,
+        interestRate,
+        expectDiscountDate,
+        issueDate
+      } = this.contractDrafts[index]
+      this.contractDrafts[index].loanLimit = maxLoanAmount(
+        money,
+        serviceRate,
+        interestRate,
+        expectDiscountDate,
+        issueDate
+      )
+    },
+    /* 计算服务费 */
+    getSerMoney(index) {
+      const {
+        loanLimit,
+        serviceRate,
+        expectDiscountDate,
+        issueDate
+      } = this.contractDrafts[index]
+      this.contractDrafts[index].serviceMoney = serviceCharge(
+        loanLimit,
+        serviceRate,
+        expectDiscountDate,
+        issueDate
+      )
+    },
+    /* 利息*/
+    getInterMoney(index) {
+      const {
+        loanLimit,
+        interestRate,
+        expectDiscountDate,
+        issueDate
+      } = this.contractDrafts[index]
+      this.contractDrafts[index].interest = interest(
+        loanLimit,
+        interestRate,
+        expectDiscountDate,
+        issueDate
+      )
+    },
+    // 预计贴现日
+    pickerStart(index) {
+      const that = this
+      return {
+        disabledDate(time) {
+          if (that.contractDrafts[index].issueDate) { // 如果结束时间不为空，则小于结束时间
+            return new Date(that.contractDrafts[index].issueDate).getTime() < time.getTime()
+          }
+        }
+      }
+    },
+    // 承兑日期
+    pickerEnd(index) {
+      const that = this
+      return {
+        disabledDate(time) {
+          if (that.contractDrafts[index].expectDiscountDate) { // 如果开始时间不为空，则结束时间大于开始时间
+            return new Date(that.contractDrafts[index].expectDiscountDate).getTime() > time.getTime()
+          }
+        }
+      }
+    },
+    validatePicUrls(rule, value, callback) {
+      debugger
+      console.log(Object.keys(value).length, value)
+      if (value && Object.keys(value).length > 0) {
+        callback()
+        return
+      }
+      callback('请选择')
+    },
+    emitInput() {
+      this.$emit('input', this.contractDrafts)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+  margin-top: 15px;
+  .el-input,.el-select {
+    width: 220px;
+    text-align: left;
+  }
+  .form-container-items {
+    margin: 20px 0;
+    border: 1px solid #c0c0c0;
+    padding: 30px 10px 10px 10px;
+    border-radius: 10px;
+  }
+}
+</style>

src/components/upload/FileShow.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <template v-for="(item, index) in files">
+      <a v-if="isPDF(item)" :key="index" :href="item" target="_blank">
+        <img style="width: 100px; height: 100px" :src="pdf">
+      </a>
+      <el-image
+        v-else
+        :key="index"
+        style="width: 100px; height: 100px"
+        :src="item"
+        :preview-src-list="files"
+      />
+    </template>
+
+  </div>
+</template>
+
+<script>
+
+import logo from '@/assets/pdf.png'
+
+export default {
+  name: 'FileShow',
+  props: {
+    files: {
+      type: [String, Array],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      pdf: logo,
+    }
+  },
+  methods: {
+    // 判断是否pdf
+    isPDF(url) {
+      if(!url){
+        return false
+      }
+      const fileType = ['pdf']
+      const index = url.lastIndexOf('.')
+      const type = url.substr(index + 1)
+      return fileType.indexOf(type) > -1
+    }
+  },
+}
+</script>

src/main.js

@@ -17,9 +17,11 @@ import '@/icons' // icon
 import '@/permission' // permission control
 import Upload from '@/components/upload/upload.vue'
 import FileUpload from '@/components/upload/FileUpload.vue'
+import FileShow from '@/components/upload/FileShow.vue'
 //Vue.component('TableWrapper', TableWrapper)
 Vue.component('Upload', Upload)
-Vue.component('FileUpload', FileUpload)
+Vue.component('FileUpload', FileUpload) // 图片/pdf 添加和编辑
+Vue.component('FileShow', FileShow) // 仅查看 图片/pdf
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/contracts/billDetail.vue

@@ -3,7 +3,6 @@
 
     <el-descriptions title="汇票详情" :column="3" border style="margin: 20px;">
       <el-descriptions-item label="汇票名">{{
-
         list[0].name
       }}</el-descriptions-item>
       <el-descriptions-item label="汇票号码">{{
@@ -50,10 +49,8 @@
       }}</el-descriptions-item>
 
       <el-descriptions-item label="发票附件">
-        <el-image
-          style="width: 100px; height: 100px"
-          :src="list[0].picList"
-          :preview-src-list="list[0].picList"
+        <FileShow
+        :files="list[0].picList"
         />
       </el-descriptions-item>
       <el-descriptions-item label="审核状态">{{
@@ -63,51 +60,53 @@
         list[0].feedback
       }}</el-descriptions-item>
       <el-descriptions-item  label="反馈截图">
-        <el-image
-          style="width: 100px; height: 100px"
-          :src="list[0].feedbackPicList"
-  
+        <FileShow
+        :files="list[0].feedbackPicList"
         />
       </el-descriptions-item>
     </el-descriptions>
 
-    <el-input
-      v-permission="['admin']"
-      v-model="feed.feedback"
-      type="textarea"
-      placeholder="请输入审核反馈内容"
-      style="width: 200px"
-    />
-    
-    <el-row v-permission="['admin']">
-      <el-col style="margin: 0 auto">
-        <div class="titlesa">
+    <el-row v-permission="['admin']" style="margin:20px">
+      <el-col>
+        <div class="titlesa" style="padding:10px">
+          <span>审核反馈</span>
+        </div>
+        <div>
+          <el-input
+            v-model="feed.feedback"
+            type="textarea"
+            placeholder="请输入审核反馈内容"
+            style="width: 200px"
+          />
+        </div>
+      </el-col>
+      <el-col>
+        <div class="titlesa" style="padding:10px">
           <span>上传反馈截图</span>
         </div>
         <div>
-          <el-upload
-            action="https://ht.9026.com/api/File"
-            list-type="picture-card"
-            :on-success="handleFeedbackPicList"
-          >
-            <i class="el-icon-plus" />
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="feed.feedbackPicList" />
-          </el-dialog>
+          <FileUpload
+          v-model="feed.feedbackPicList"
+          accept=".jpg, .jpeg, .png, .pdf"
+          />
         </div>
       </el-col>
     </el-row>
 
     <div class="btn">
-      <el-button v-permission="['admin']" type="success" @click="success"
+      <el-button
+      v-permission="['admin']"
+      type="success" @click="success"
         >审核成功</el-button
       >
-      <el-button v-permission="['admin']" type="danger" @click="failed"
+      <el-button
+      v-permission="['admin']"
+      type="danger" @click="failed"
         >审核失败</el-button
       >
       <el-button type="primary" @click="back">返回</el-button>
     </div>
+
   </div>
 </template>
 
@@ -119,8 +118,6 @@ export default {
       role: "",
       list: [],
       checked: "",
-      /* 审核反馈和审核截图的数据 */
-      feedbackPicListArray: [],
       feed: {
         feedback: "",
         feedbackPicList: [],
@@ -135,14 +132,6 @@ export default {
     this.getData();
   },
   methods: {
-
-    /* 反馈图片图片上传成功 */
-    handleFeedbackPicList(res){
-      //解构
-      const { file } = res.data;
-      this.feedbackPicListArray.push(file);
-      this.feed.feedbackPicList = this.feedbackPicListArray;
-    },
     getData() {
       const id = this.$route.query.id;
       this.$request({
@@ -155,8 +144,6 @@ export default {
     },
 
     success() {
-        /* 反馈图片赋值 */
-      this.feed.feedbackPicList = this.picList;
       /* 合同id赋值 */
       this.feed.id = this.$route.query.id;
       this.feed.approveStatus = 1;
@@ -181,8 +168,6 @@ export default {
       });
     },
     failed() {
-        /* 反馈图片赋值 */
-      this.feed.feedbackPicList = this.picList;
       /* 合同id赋值 */
       this.feed.id = this.$route.query.id;
       this.feed.approveStatus = 2;

src/views/contracts/detail.vue

@@ -16,30 +16,9 @@
             <span class="titlename">合同附件</span>
             <div style="display: flex">
               <div class="imgbox">
-                <template v-for="(item, index) in picList">
-                  <el-image
-                    v-if="isPDF(item)"
-                    :key="index"
-                    style="width: 100px; height: 100px"
-                    :src="item"
-                    :preview-src-list="picList"
-                  />
-                  <a v-else :key="index" :href="item" target="_blank">
-                    <img style="width: 100px; height: 100px" :src="pdf">
-                  </a>
-                </template>
-                <!-- <el-image
-                  v-for="(item) in picList"
-                  :key="item.id"
-                  style="width: 100px; height: 100px"
-                  :src="item"
+                <FileShow
+                :files="contract.picList"
                 />
-                <img
-                  v-for="(item) in picList"
-                  :key="item.id"
-                  style="width: 100px; height: 100px"
-                  :src="item"
-                /> -->
               </div>
             </div>
           </div>
@@ -47,24 +26,9 @@
             <span class="titlename">发票附件</span>
             <div style="display: flex">
               <div class="imgbox">
-                <template v-for="(item, index) in invoicePicList">
-                  <el-image
-                    v-if="isPDF(item)"
-                    :key="index"
-                    style="width: 100px; height: 100px"
-                    :src="item"
-                    :preview-src-list="invoicePicList"
-                  />
-                  <a v-else :key="index" :href="item" target="_blank">
-                    <img style="width: 100px; height: 100px" :src="pdf">
-                  </a>
-                </template>
-                <!-- <el-image
-                  v-for="(item) in invoicePicList"
-                  :key="item.id"
-                  style="width: 100px; height: 100px"
-                  :src="item"
-                /> -->
+                <FileShow
+                :files="contract.invoicePicList"
+                />
               </div>
             </div>
           </div>
@@ -76,24 +40,9 @@
             <span class="titlename">贸易合同</span>
             <div style="display: flex">
               <div class="imgbox">
-                <template v-for="(item, index) in tradePicList">
-                  <el-image
-                    v-if="isPDF(item)"
-                    :key="index"
-                    style="width: 100px; height: 100px"
-                    :src="item"
-                    :preview-src-list="tradePicList"
-                  />
-                  <a v-else :key="index" :href="item" target="_blank">
-                    <img style="width: 100px; height: 100px" :src="pdf">
-                  </a>
-                </template>
-                <!-- <el-image
-                  v-for="(item) in tradePicList"
-                  :key="item.id"
-                  style="width: 100px; height: 100px"
-                  :src="item"
-                /> -->
+                <FileShow
+                :files="contract.tradePicList"
+                />
               </div>
             </div>
           </div>
@@ -116,7 +65,8 @@
               <el-form ref="form" :model="feed" label-width="0px">
                 <span class="sah">审核反馈：</span>
                 <el-form-item label="">
-                  <el-input v-model="feed.feedback" type="textarea" />
+                  <el-input v-if="role === 1" v-model="feed.feedback" type="textarea" />
+                  <div v-else>{{ feed.feedback }}</div>
                 </el-form-item>
               </el-form>
             </el-col>
@@ -124,17 +74,15 @@
               <span class="sah">审核截图：</span>
               <div style="display: flex; justify-content: flex-end">
                 <div class="imgbox">
-                  <el-upload
-                    action="https://ht.9026.com/api/File"
-                    list-type="picture-card"
-                    :on-success="handleFeedbackPicList"
-                  >
-                    <!-- <img v-if="feed.feedbackPicList" :src="feed.feedbackPicList" class="avatar"> -->
-                    <i class="el-icon-plus" />
-                  </el-upload>
-                  <el-dialog :visible.sync="dialogVisible">
-                    <img width="100%" :src="feed.feedbackPicList">
-                  </el-dialog>
+                  <FileUpload
+                  v-if="role === 1"
+                  v-model="feed.feedbackPicList"
+                  accept=".jpg, .jpeg, .png, .pdf"
+                  />
+                  <FileShow
+                  v-else
+                  :files="feed.feedbackPicList"
+                  />
                 </div>
               </div>
             </el-col>
@@ -306,7 +254,6 @@ export default {
       invoicePicList: [],
       picList: [],
       tradePicList: [],
-      feedbackPicListArray: [],
       pdf: logo,
       /* 审核反馈和审核截图的数据 */
       feed: {
@@ -430,15 +377,6 @@ export default {
       }
     },
 
-    /* 反馈图片图片上传成功 */
-
-    handleFeedbackPicList(res) {
-      // 解构
-      const { file } = res.data
-      this.feedbackPicListArray.push(file)
-      this.feed.feedbackPicList = this.feedbackPicListArray
-    },
-
     /* 审核成功发送请求  */
     success() {
       /* 反馈图片赋值 */

src/views/contracts/new_file.vue

@@ -57,216 +57,39 @@
         />
       </div>
 
-      <el-form ref="form" :model="form" label-width="110px" label-position="right" class="form-container">
-        <el-row
-          v-for="(item, index) in form.contractDrafts"
-          :key="index"
-          class="form-container-items"
-        >
-          <!-- 汇票名称 -->
-          <el-col :span="colSpan">
-            <el-form-item label="汇票名称" :prop="`contractDrafts.${index}.name`" :rules="rules.name">
-              <el-input
-                v-model="item.name"
-                class="ipwidth"
-                placeholder="请填写"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 汇票号码 -->
-          <el-col :span="colSpan">
-            <el-form-item label="汇票号码" :prop="`contractDrafts.${index}.draftNo`" :rules="rules.draftNo">
-              <el-input
-                v-model="item.draftNo"
-                class="ipwidth"
-                placeholder="请填写汇票号码"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 出票人 -->
-          <el-col :span="colSpan">
-            <el-form-item label="出票人" :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" />
-            </el-form-item>
-          </el-col>
-          <!-- 预计贴现日 -->
-          <el-col :span="colSpan">
-            <el-form-item label="预计贴现日" :prop="`contractDrafts.${index}.expectDiscountDate`" :rules="rules.expectDiscountDate">
-              <el-date-picker
-                v-model="item.expectDiscountDate"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-                :picker-options="pickerStart(index)"
-                @change="inputMoney(index)"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 金额 -->
-          <el-col :span="colSpan">
-            <el-form-item label="金额" :prop="`contractDrafts.${index}.money`" :rules="rules.money">
-              <el-input
-                v-model="item.money"
-                class="ipwidth"
-                placeholder="请填写金额"
-                clearable
-                @input="inputMoney(index)"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 承兑人 -->
-          <el-col :span="colSpan">
-            <el-form-item label="承兑人" :prop="`contractDrafts.${index}.acceptorName`" :rules="rules.acceptorName">
-              <AcceptorSelect
-                v-model="item.acceptorName"
-                @change="(...args)=> changeAcceptorName(...args, index)"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 承兑日期 -->
-          <el-col :span="colSpan">
-            <el-form-item label="承兑日期" :prop="`contractDrafts.${index}.issueDate`" :rules="rules.issueDate">
-              <el-date-picker
-                v-model="item.issueDate"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-                :picker-options="pickerEnd(index)"
-                :disabled="!item.expectDiscountDate"
-                @change="inputMoney(index)"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 服务费 -->
-          <el-col :span="colSpan">
-            <el-form-item label="服务费" :prop="`contractDrafts.${index}.serviceMoney`" :rules="rules.serviceMoney">
-              <el-input
-                v-model="item.serviceMoney"
-                class="ipwidth"
-                placeholder="计算得出服务费"
-                clearable
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 服务费率 -->
-          <el-col :span="colSpan">
-            <el-form-item label="服务费率" :prop="`contractDrafts.${index}.serviceRate`" :rules="rules.serviceRate">
-              <el-input
-                v-model="item.serviceRate"
-                class="ipwidth"
-                placeholder="服务费率"
-                clearable
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 出票日期 -->
-          <el-col :span="colSpan">
-            <el-form-item label="出票日期" :prop="`contractDrafts.${index}.acceptDate`" :rules="rules.acceptDate">
-              <el-date-picker
-                v-model="item.acceptDate"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 最高贷款额度 -->
-          <el-col :span="colSpan">
-            <el-form-item label="最高贷款额度" :prop="`contractDrafts.${index}.loanLimit`" :rules="rules.loanLimit">
-              <el-input
-                v-model="item.loanLimit"
-                class="ipwidth"
-                clearable
-                placeholder="计算得出最高贷款额度"
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 利率 -->
-          <el-col :span="colSpan">
-            <el-form-item label="利率" :prop="`contractDrafts.${index}.interestRate`" :rules="rules.interestRate">
-              <el-input
-                v-model="item.interestRate"
-                clearable
-                class="ipwidth"
-                placeholder="利率"
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 到期日期 -->
-          <el-col :span="colSpan">
-            <el-form-item label="到期日期" :prop="`contractDrafts.${index}.expireDate`" :rules="rules.expireDate">
-              <el-date-picker
-                v-model="item.expireDate"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 利息 -->
-          <el-col :span="colSpan">
-            <el-form-item label="利息" :prop="`contractDrafts.${index}.interest`" :rules="rules.interest">
-              <el-input
-                v-model="item.interest"
-                class="ipwidth"
-                placeholder="计算得出利息"
-                clearable
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <!-- 利率 -->
-          <el-col :span="colSpan">
-            <el-form-item label="附件" :prop="`contractDrafts.${index}.picUrls`" :rules="rules.picUrls">
-              <Upload v-model="item.picUrls" />
-            </el-form-item>
-          </el-col>
-          <!-- 删除汇票 -->
-          <el-col :span="24" style="text-align:right">
-            <el-button
-              type="primary"
-              @click="onDelete(index)"
-            >删除汇票</el-button>
-          </el-col>
-        </el-row>
-        <!-- 新增汇票 -->
-        <div class="commit">
-          <div class="addnew">
-            <el-button type="primary" @click.stop="onAdd">新增汇票</el-button>
-          </div>
-          <div class="addall">
-            <el-button
-              type="warning"
-              style="width: 180px; height: 45px; font-size: 16px"
-              @click="onSubmit"
-            >确认上传
-            </el-button>
-          </div>
+      <!-- 汇票编辑 -->
+      <BillForm
+      v-model="form.contractDrafts"
+      />
+
+      <!-- 新增汇票 -->
+      <div class="commit">
+        <div class="addnew">
+          <el-button type="primary" @click.stop="onAdd">新增汇票</el-button>
+        </div>
+        <div class="addall">
+          <el-button
+            type="warning"
+            style="width: 180px; height: 45px; font-size: 16px"
+            @click="onSubmit"
+          >确认上传
+          </el-button>
         </div>
-      </el-form>
+      </div>
+
     </el-card>
   </div>
 </template>
 <script>
 import { contractSubmitApi, contractsPageApi, contractsDetailApi } from '@/api/contracts'
-import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
-import DrawerSelect from '@/components/DrawerSelect/DrawerSelect.vue'
-import AcceptorSelect from '@/components/AcceptorSelect/AcceptorSelect.vue'
+import BillForm from '@/components/BillForm/BillForm.vue'
+
 export default {
   components: {
-    DrawerSelect,
-    AcceptorSelect
+    BillForm
   },
   data() {
     return {
-      colSpan: 8,
       contractList: [],
       form: {
         name: '', // 合同名称
@@ -276,8 +99,7 @@ export default {
         tradePics: [], // 贸易合同
         supplierId: 2, // 不知道干啥的
         /* 汇票的数据 */
-        contractDrafts: [
-          {
+        contractDrafts: [{
             name: '', // 汇票名称
             draftNo: '', // 汇票号码
             acceptorId: '', // 承兑人id
@@ -296,61 +118,11 @@ export default {
             // limitTime: '', //
             // acceptDateTime: '', //
             // expectDiscountDateTime: ''//
-          }
-        ]
+          }]
       },
-      rules: {
-        name: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        draftNo: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        drawersId: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        expectDiscountDate: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        money: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        acceptorName: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        issueDate: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        serviceMoney: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        serviceRate: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        acceptDate: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        loanLimit: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        interestRate: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        expireDate: [
-          { required: true, message: '请选择', trigger: 'change' }
-        ],
-        interest: [
-          { required: true, message: '请输入', trigger: 'change' }
-        ],
-        picUrls: [
-          { trigger: ['change', 'input'], validator: this.validatePicUrls }
-        ]
-      }
     }
   },
   mounted() {
-    // this.loadData()
-
     // 编辑获取详情
     this.getDetail()
   },
@@ -371,14 +143,6 @@ export default {
         this.form.contractDrafts = res.data.contractDraft.result
       });
     },
-    loadData() {
-      contractsPageApi({
-        pageIndex: 1,
-        pageSize: 100
-      }).then((res) => {
-        this.contractList = res.data.result
-      })
-    },
     getContractNo() {
       const temporaryList = this.contractList.filter(
         (item) => item.name === this.form.name
@@ -408,19 +172,6 @@ export default {
         expireDate: '' // 到期日期
       })
     },
-    addDrawer() {
-      this.$router.push({
-        path: '/form/addTicketdrawer'
-      })
-    },
-    onDelete(index) {
-      const contractDraftsLength = this.form.contractDrafts.length
-      if (contractDraftsLength > 1) {
-        this.form.contractDrafts.splice(index, 1)
-      } else {
-        this.$message.error('默认汇票禁止删除')
-      }
-    },
     onSubmit(o) {
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -439,105 +190,13 @@ export default {
         }
       })
     },
-    changeAcceptorName(value, exist, index) {
-      if (exist) {
-        const { id, interest, serviceRate } = exist
-        this.form.contractDrafts[index].acceptorId = id
-        this.form.contractDrafts[index].interestRate = interest
-        this.form.contractDrafts[index].serviceRate = serviceRate
-        this.inputMoney(index)
-      }
-    },
-    // 计算金额
-    inputMoney(index) {
-      this.getloanLimt(index)
-      this.getSerMoney(index)
-      this.getInterMoney(index)
-    },
-    /* 计算最高贷款额度 */
-    getloanLimt(index) {
-      const {
-        money,
-        serviceRate,
-        interestRate,
-        expectDiscountDate,
-        issueDate
-      } = this.form.contractDrafts[index]
-      this.form.contractDrafts[index].loanLimit = maxLoanAmount(
-        money,
-        serviceRate,
-        interestRate,
-        expectDiscountDate,
-        issueDate
-      )
-    },
-    /* 计算服务费 */
-    getSerMoney(index) {
-      const {
-        loanLimit,
-        serviceRate,
-        expectDiscountDate,
-        issueDate
-      } = this.form.contractDrafts[index]
-      this.form.contractDrafts[index].serviceMoney = serviceCharge(
-        loanLimit,
-        serviceRate,
-        expectDiscountDate,
-        issueDate
-      )
-    },
-    /* 利息*/
-    getInterMoney(index) {
-      const {
-        loanLimit,
-        interestRate,
-        expectDiscountDate,
-        issueDate
-      } = this.form.contractDrafts[index]
-      this.form.contractDrafts[index].interest = interest(
-        loanLimit,
-        interestRate,
-        expectDiscountDate,
-        issueDate
-      )
-    },
     onBack() {
       this.$router.go(-1)
-    },
-    // 预计贴现日
-    pickerStart(index) {
-      const that = this
-      return {
-        disabledDate(time) {
-          if (that.form.contractDrafts[index].issueDate) { // 如果结束时间不为空，则小于结束时间
-            return new Date(that.form.contractDrafts[index].issueDate).getTime() < time.getTime()
-          }
-        }
-      }
-    },
-    // 承兑日期
-    pickerEnd(index) {
-      const that = this
-      return {
-        disabledDate(time) {
-          if (that.form.contractDrafts[index].expectDiscountDate) { // 如果开始时间不为空，则结束时间大于开始时间
-            return new Date(that.form.contractDrafts[index].expectDiscountDate).getTime() > time.getTime()
-          }
-        }
-      }
-    },
-    validatePicUrls(rule, value, callback) {
-      debugger
-      console.log(Object.keys(value).length, value)
-      if (value && Object.keys(value).length > 0) {
-        callback()
-        return
-      }
-      callback('请选择')
     }
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .box-card {
   padding: 20px 10px;
@@ -549,19 +208,7 @@ export default {
     margin-top: 20px;
   }
 }
-.form-container {
-  margin-top: 15px;
-  .el-input,.el-select {
-    width: 220px;
-    text-align: left;
-  }
-  .form-container-items {
-    margin: 20px 0;
-    border: 1px solid #c0c0c0;
-    padding: 30px 10px 0 10px;
-    border-radius: 10px;
-  }
-}
+
 .commit {
   text-align: center;
   .addnew {