feat:page and serch

src/router/index.js

@@ -68,13 +68,6 @@ export const asyncRouterMap = [
         meta: { title: '合同详情', roles: ['admin'] },
         hidden: true
       },
-      {
-        path: 'contracts/addcontract',
-        name: 'addcontract',
-        component: () => import('@/views/contracts/addcontract'),
-        meta: { title: '上传合同', roles: ['admin'] },
-        hidden: true
-      },
       {
         path: 'contracts/addnewbill',
         name: 'addnewbill',

src/views/contracts/index.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="app-container">
     <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
+      <!-- 查询表单 -->
       <div class="grid-content bg-purple">
+        <!-- 合同名称/编号、承兑人名称或出票 -->
+        <!-- item.contractNo === this.search ||
+      // //       item.acceptorName === this.search ||
+      // //       item.drawersName === this.search -->
         <el-input
-          v-model="search"
+          v-model="formData.name"
           placeholder="合同名称/编号、承兑人名称或出票..."
           clearable
           style="width: 100%"
@@ -12,6 +17,7 @@
           <i slot="prefix" class="el-input__icon el-icon-search" />
         </el-input>
       </div>
+      <!-- 合同状态 -->
       <div class="grid-content bg-purple">
         <el-dropdown @command="handleCommand">
           <div class="pulldown">
@@ -23,11 +29,14 @@
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
+            <el-dropdown-item command="全部">全部</el-dropdown-item>
             <el-dropdown-item command="正常">正常</el-dropdown-item>
             <el-dropdown-item command="删除">删除</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
+
+      <!-- 汇票状态 -->
       <div class="grid-content bg-purple">
         <el-dropdown @command="handlehpCommand">
           <div class="pulldown">
@@ -39,11 +48,15 @@
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
-            <el-dropdown-item command="正常">正常</el-dropdown-item>
-            <el-dropdown-item command="删除">删除</el-dropdown-item>
+            <el-dropdown-item command="全部">全部</el-dropdown-item>
+            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
+            <el-dropdown-item command="成功">成功</el-dropdown-item>
+            <el-dropdown-item command="失败">失败</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
+
+      <!-- 审核状态 -->
       <div class="grid-content bg-purple">
         <el-dropdown @command="handleCommandAuditstatus">
           <div class="pulldown">
@@ -55,13 +68,16 @@
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
+            <el-dropdown-item command="全部">全部</el-dropdown-item>
             <el-dropdown-item command="待审核">待审核</el-dropdown-item>
             <el-dropdown-item command="成功">成功</el-dropdown-item>
             <el-dropdown-item command="失败">失败</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-      <!-- <div class="grid-content bg-purple">
+
+      <!-- 日期查询 -->
+      <div class="grid-content bg-purple">
         <div class="block">
           <el-date-picker
             v-model="value2"
@@ -73,9 +89,10 @@
             end-placeholder="结束日期"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd"
+            @change='startEndTime'
           />
         </div>
-      </div> -->
+      </div>
     </el-row>
 
     <el-table
@@ -90,32 +107,86 @@
     >
       <el-table-column align="center" label="" width="55" type="selection" />
       <el-table-column label="合同名称" align="center" prop="name" />
-      <el-table-column label="合同编号" align="center" prop="contractNo" width="155" />
+      <el-table-column
+        label="合同编号"
+        align="center"
+        prop="contractNo"
+        width="155"
+      />
+      <el-table-column label="供应商" align="center" prop="supplierName" />
+
       <el-table-column label="承兑人" align="center" prop="acceptorName" />
       <el-table-column label="出票人" align="center" prop="drawersName" />
       <el-table-column label="汇票状态" align="center" prop="draftStatusText" />
-      <el-table-column label="合同状态" align="center" prop="contractStatusText" />
-      <el-table-column class-name="status-col" label="审核状态" align="center" prop="statusText" />
-      <el-table-column align="center" label="时间" prop="createdAt" width="155" />
-      <el-table-column align="center" prop="created_at" label="操作" width="250">
+      <el-table-column
+        label="合同状态"
+        align="center"
+        prop="contractStatusText"
+      />
+      <el-table-column
+        class-name="status-col"
+        label="审核状态"
+        align="center"
+        prop="statusText"
+      />
+      <el-table-column
+        align="center"
+        label="时间"
+        prop="createdAt"
+        width="155"
+      />
+      <el-table-column
+        align="center"
+        prop="created_at"
+        label="操作"
+        width="250"
+      >
         <template slot-scope="scope">
-          <el-tag type="primary" style="cursor: pointer" @click="tapDetail(scope.row.id)">查看详情</el-tag>
-          <el-tag v-if="checked === 0" type="success" style="cursor: pointer" @click="Ssuccessed(scope.row.id)">
-            审核成功</el-tag>
-          <el-tag v-if="checked === 0" type="danger" style="cursor: pointer" @click="Sfailed(scope.row.id)">审核失败
+          <el-tag
+            type="primary"
+            style="cursor: pointer"
+            @click="tapDetail(scope.row.id)"
+            >查看详情</el-tag
+          >
+          <el-tag
+            v-if="checked === 0"
+            type="success"
+            style="cursor: pointer"
+            @click="Ssuccessed(scope.row.id)"
+          >
+            审核成功</el-tag
+          >
+          <el-tag
+            v-if="checked === 0"
+            type="danger"
+            style="cursor: pointer"
+            @click="Sfailed(scope.row.id)"
+            >审核失败
           </el-tag>
-          <el-tag v-if="checked === 1" type="success" style="cursor: pointer">恢复
+          <el-tag v-if="checked === 1" type="success" style="cursor: pointer"
+            >恢复
           </el-tag>
-          <el-tag v-if="checked === 1" type="danger" style="cursor: pointer">删除</el-tag>
+          <el-tag v-if="checked === 1" type="danger" style="cursor: pointer"
+            >删除</el-tag
+          >
         </template>
       </el-table-column>
     </el-table>
-    <div style="display: flex;justify-content: space-between;">
+    <div style="display: flex; justify-content: space-between">
       <el-row type="flex" justify="space-between">
         <div class="btn" style="display: flex; justify-content: flex-end">
-          <el-button v-permission="['admin']" type="primary" @click="addNewContract">上传合同</el-button>
-          <el-button v-if="checked === 0" type="primary" @click="failed">审核失败</el-button>
-          <el-button v-if="checked === 0" type="primary" @click="successed">审核成功</el-button>
+          <el-button
+            v-permission="['admin']"
+            type="primary"
+            @click="addNewContract"
+            >上传合同</el-button
+          >
+          <el-button v-if="checked === 0" type="primary" @click="failed"
+            >审核失败</el-button
+          >
+          <el-button v-if="checked === 0" type="primary" @click="successed"
+            >审核成功</el-button
+          >
           <el-button type="primary" @click="Exports">批量导出</el-button>
           <el-button type="success" @click="recover">恢复</el-button>
           <el-button type="danger" @click="deleted">删除</el-button>
@@ -125,399 +196,463 @@
         <el-button
           type="primary"
           size="small"
-          style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
+          style="
+            background-color: #d8ab5a;
+            border-color: #d8ab5a;
+            margin: 0 20px;
+          "
           @click="jumpFirstPage"
-        >首页
+          >首页
         </el-button>
         <el-pagination
           ref="pagination"
           background
-          layout="prev, pager, next"
-          :total="list.length"
-          :page-size="10"
+          layout="total,prev, pager, next"
+          :total="total"
+          :page-size="pagesize"
+          :current-page="currentPage"
           prev-text="上一页"
           next-text="下一页"
-          :hide-on-single-page="false"
           @current-change="handleCurrentChange"
         />
         <el-button
           type="primary"
           size="small"
-          style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
+          style="
+            background-color: #d8ab5a;
+            border-color: #d8ab5a;
+            margin: 0 20px;
+          "
           @click="jumpLastPage"
-        >尾页
+          >尾页
         </el-button>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-import {
-  dataConversionUtil
-} from '../../utils/Excel.js'
-import { contractsPageApi } from '@/api/contracts'
+import { dataConversionUtil } from "../../utils/Excel.js";
+import { contractsPageApi } from "@/api/contracts";
 export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
+        published: "success",
+        draft: "gray",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
   },
   data() {
     return {
+      //表单数据
+      formData: {
+        startTime: "",
+        endTime: "",
+        name: "", //合同名称
+        contractNo: "", //合同编码
+        supplierName: "", //供应商
+        acceptorName: "", //承兑人
+        contractStatusText: "", //合同状态
+        contractStatus: "",
+        draftStatus: "",
+        supplierName: "",
+      },
       srcList: [],
       list: [],
+      /* 表格数据 */
       temporaryList: [],
+      /* 总条数 */
+      total: 20,
       listLoading: false,
-      status: '',
-      hpstatus: '',
-      Auditstatus: '',
-      search: '',
+      status: "",
+      hpstatus: "",
+      Auditstatus: "",
+      search: "",
+      /* 当前页数 */
       currentPage: 1,
+      /* 每页显示个数 */
       pagesize: 10,
-      checked: '',
+      checked: "",
       pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }
-        ]
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
-      value2: '',
-      filter: {
-        current: 1,
-        size: 10
-      },
-      pagination: {
-        current: 0,
-        total: 0,
-        pageSize: 10
-      }
-    }
+      value2: "",
+    };
   },
   mounted() {
-    this.checked = this.$store.state.user.checked
-    // this.$request({
-    //   url: '/api/Contract/search',
-    //   method: 'post',
-    //   data: {
-    //     pageIndex: 1,
-    //     pageSize: 100
-    //   }
-    // }).then((res) => {
-    //   console.log(res)
-    //   this.list = res.data.result
-    //   this.getPageData()
-    // })
-    this.loadData()
+    this.checked = this.$store.state.user.checked;
+    this.getData();
   },
   methods: {
-    loadData(filtter = {}) {
-      const params = {
-        ...this.filter,
-        ...filtter
-      }
-      contractsPageApi(params).then(res => {
-        const { data } = res
-        this.filter = params
-        this.temporaryList = data.result
-        this.srcList = data.result
-        this.pagination = {
-          ...this.pagination,
-          current: params.current,
-          pageSize: params.size,
-          total: data.total
-        }
-      })
+    /* ajax发请求获取列表数据 */
+    getData(searchForm = {}) {
+      let params = {
+        pageIndex: this.currentPage,
+        pageSize: this.pagesize,
+      };
+      contractsPageApi({ ...params, ...searchForm }).then((res) => {
+        const { data } = res;
+        this.filter = params;
+        this.temporaryList = data.result;
+        this.srcList = data.result;
+        this.total = res.data.total;
+        console.log(this.temporaryList);
+      });
     },
+
     addNewContract() {
       this.$router.push({
-        path: 'contracts/addcontract'
-      })
+        path: "contracts/addcontract",
+      });
     },
     tapDetail(id) {
-      console.log(id)
+      console.log(id);
       this.$router.push({
-        path: '/detail',
+        path: "/detail",
         query: {
-          id: id
-        }
-      })
+          id: id,
+        },
+      });
     },
     successed() {
       // let successed = this.list.filter(item => item.id === id)
-      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id);
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: ids,
-          operateType: 3
-        }
+          operateType: 3,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
     Ssuccessed(id) {
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: [id],
-          operateType: 3
-        }
+          operateType: 3,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
     failed() {
       // let failed = this.list.filter(item => item.id === id)
-      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id);
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: ids,
-          operateType: 4
-        }
+          operateType: 4,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
     Sfailed(id) {
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: [id],
-          operateType: 4
-        }
+          operateType: 4,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
     recover(id) {
-      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id);
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: ids,
-          operateType: 2
-        }
+          operateType: 2,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
     deleted() {
-      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id);
       this.$request({
-        url: '/api/Contract/manage',
-        method: 'post',
+        url: "/api/Contract/manage",
+        method: "post",
         data: {
           ids: ids,
-          operateType: 1
-        }
+          operateType: 1,
+        },
       }).then((res) => {
         if (res.code === 200) {
           this.$message({
-            type: 'success',
-            message: res.msg
-          })
+            type: "success",
+            message: res.msg,
+          });
         } else {
           this.$message({
-            type: 'danger',
-            message: res.msg
-          })
+            type: "danger",
+            message: res.msg,
+          });
         }
-      })
+      });
     },
+    //合同状态查询
     handleCommand(command) {
-      this.status = command
-      if (this.status === '正常' || this.status === '删除') {
-        this.temporaryList = this.srcList.filter(item => item.contractStatusText === this.status)
-      } else {
-        this.temporaryList = this.srcList
+      this.status = command;
+      if (command === "正常") {
+        this.formData.contractStatus = 2;
+      }
+      if (command === "删除") {
+        this.formData.contractStatus = 1;
+      }
+       if (command === "全部") {
+        this.formData.contractStatus = 0;
       }
+      this.currentPage = 1;
+      this.searchForm = { ...this.formData };
+      this.getData(this.searchForm);
     },
+
+    //汇票状态查询
     handlehpCommand(command) {
-      this.hpstatus = command
-      if (this.hpstatus === '正常' || this.hpstatus === '删除') {
-        this.temporaryList = this.srcList.filter(item => item.draftStatusText === this.hpstatus)
-      } else {
-        this.temporaryList = this.srcList
+      this.hpstatus = command;
+      if (command === "全部") {
+        this.formData.draftStatus = 0;
+      }
+      if (command === "待审核") {
+        this.formData.draftStatus = 1;
       }
+      if (command === "成功") {
+        this.formData.draftStatus = 2;
+      }
+      if (command === "失败") {
+        this.formData.draftStatus = 3;
+      }
+      if (command === "删除") {
+        this.formData.draftStatus = 4;
+      }
+      this.currentPage = 1;
+      this.searchForm = { ...this.formData };
+      this.getData(this.searchForm);
     },
+
+    //合同审核状态查询
     handleCommandAuditstatus(command) {
-      this.Auditstatus = command
-      if (this.Auditstatus === '成功' || this.Auditstatus === '失败' || this.Auditstatus === '待审核') {
-        this.temporaryList = this.srcList.filter(item => item.statusText === this.Auditstatus)
-      } else {
-        this.temporaryList = this.srcList
+      this.Auditstatus = command;
+      if (command === "全部") {
+        this.formData.approveStatus = 0;
       }
+      if (command === "待审核") {
+        this.formData.approveStatus = 1;
+      }
+      if (command === "成功") {
+        this.formData.approveStatus = 2;
+      }
+      if (command === "失败") {
+        this.formData.approveStatus = 3;
+      }
+      this.currentPage = 1;
+      this.searchForm = { ...this.formData };
+      this.getData(this.searchForm);
+    },
+
+    //日期审核状态查询
+    startEndTime(){
+      this.formData.startTime = this.value2[0]
+      this.formData.endTime = this.value2[1]
+      this.currentPage = 1;
+      this.searchForm = { ...this.formData };
+      this.getData(this.searchForm);
     },
+    //合同名称/编号/承兑人名称/出票查询
+    Search() {
+       this.currentPage = 1;
+      this.searchForm = { ...this.formData };
+      this.getData(this.searchForm);
+    },
+
     handleSelectionChange(data) {
-      this.multipleSelection = data
-      console.log(this.multipleSelection)
+      this.multipleSelection = data;
+      console.log(this.multipleSelection);
     },
     handleAll(data) {
-      this.multipleSelection = data
-      console.log(this.multipleSelection)
+      this.multipleSelection = data;
+      console.log(this.multipleSelection);
     },
+
+    /* 分页功能，改变当前页 */
     handleCurrentChange(val) {
-      this.currentPage = val
-      this.getPageData()
+      this.currentPage = val;
+      this.getData(this.searchForm);
     },
+
+    /* 分页功能：去首页 */
     jumpFirstPage() {
-      this.$refs.pagination.handleCurrentChange(1)
-      this.$emit('handleCurrentChange', 1)
+      this.$refs.pagination.handleCurrentChange(1);
+      this.$emit("handleCurrentChange", 1);
     },
+
+    /* 分页功能：去尾页 */
     jumpLastPage() {
-      const font = this.$refs.pagination
-      const cpage = Math.ceil(font.total / font.pageSize)
-      font.handleCurrentChange(cpage)
-    },
-    getPageData() {
-      const start = (this.currentPage - 1) * this.pagesize
-      const end = start + this.pagesize
-      this.srcList = this.list.slice(start, end)
-      this.temporaryList = this.srcList
-    },
-    Search() {
-      if (this.search === '') {
-        this.temporaryList = this.srcList
-      } else {
-        this.temporaryList = this.srcList.filter(item => item.name === this.search || item.contractNo === this
-          .search || item.acceptorName === this.search || item.drawersName === this.search)
-      }
+      const font = this.$refs.pagination;
+      const cpage = Math.ceil(font.total / font.pageSize);
+      font.handleCurrentChange(cpage);
     },
+
+ 
+
     Exports() {
       var tableHeader = [
-        ['序号', '合同名称', '合同编号', '承兑人', '出票人', '汇票状态', '合同状态', '审核状态', '时间']
-      ]
-      var dataList = []
+        [
+          "序号",
+          "合同名称",
+          "合同编号",
+          "承兑人",
+          "出票人",
+          "汇票状态",
+          "合同状态",
+          "审核状态",
+          "时间",
+        ],
+      ];
+      var dataList = [];
       this.multipleSelection.forEach((item, index) => {
-        dataList.push([index + 1, item.name, item.contractNo, item.acceptorName, item.drawersName, item
-          .draftStatusText, item.contractStatusText, item.statusText, item.createdAt
-        ])
-      })
-      dataConversionUtil.dataToExcel('合同列表', tableHeader, dataList)
-      this.$message.success('导出成功!')
-    }
-
-  }
-}
+        dataList.push([
+          index + 1,
+          item.name,
+          item.contractNo,
+          item.acceptorName,
+          item.drawersName,
+          item.draftStatusText,
+          item.contractStatusText,
+          item.statusText,
+          item.createdAt,
+        ]);
+      });
+      dataConversionUtil.dataToExcel("合同列表", tableHeader, dataList);
+      this.$message.success("导出成功!");
+    },
+  },
+};
 </script>
 <style lang="scss">
-	.pulldown {
-		width: 185px;
-		height: 40px;
-		border: 1px solid #e8e8e8;
-		border-radius: 10px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 20px;
-		color: #999999;
-	}
+.pulldown {
+  width: 185px;
+  height: 40px;
+  border: 1px solid #e8e8e8;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  color: #999999;
+}
 
-	.pagesip {
-		width: 100%;
-		margin: 20px auto;
-		padding-right: 50px;
-		display: flex;
-		// align-items: center;
-		justify-content: flex-end;
-	}
+.pagesip {
+  width: 100%;
+  margin: 20px auto;
+  padding-right: 50px;
+  display: flex;
+  // align-items: center;
+  justify-content: flex-end;
+}
 
-	.el-pagination.is-background .el-pager li:not(.disabled).active {
-		background-color: #d8ab5a;
-	}
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #d8ab5a;
+}
 
-	.el-col {
-		margin-bottom: 20px;
-	}
-	.btn{
-		padding: 20px;
-	}
+.el-col {
+  margin-bottom: 20px;
+}
+.btn {
+  padding: 20px;
+}
 </style>

src/views/contracts/new_file.vue

@@ -1,466 +1,557 @@
 <template>
-	<div class="app-container">
-		<el-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
-			<div class="contract">
-				<div>
-					<p>合同名称</p>
-					<el-input v-model="form.name" placeholder="请输入合同名称" style="width: 500px" clearable
-						@input="getContractNo" />
-				</div>
-				<div>
-					<p>合同编号</p>
-					<el-input v-model="form.contractNo" placeholder="请输入合同编号" style="width: 500px" disabled />
-				</div>
-			</div>
+  <div class="app-container">
+    <el-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
+      <div class="contract">
+        <div>
+          <p>合同名称</p>
+          <el-input
+            v-model="form.name"
+            placeholder="请输入合同名称"
+            style="width: 500px"
+            clearable
+            @input="getContractNo"
+          />
+        </div>
+        <div>
+          <p>合同编号</p>
+          <el-input
+            v-model="form.contractNo"
+            placeholder="请输入合同编号"
+            style="width: 500px"
+            disabled
+          />
+        </div>
+      </div>
+      <!-- 合同附件图片 -->
+      <div class="titlesa">
+        <span>合同附件</span>
+        <span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
+      </div>
+      <div>
+        <div>
+          <el-upload
+            action="https://ht.9026.com/api/File"
+            list-type="picture-card"
+            :on-success="handlepics"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
 
-			<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" :auto-upload="false"
-					:on-change="handlepics" :file-list="form.pics">
-					<i slot="default" class="el-icon-plus" />
-					<div slot="file" slot-scope="{ file }">
-						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="form.pics" />
+          </el-dialog>
+        </div>
+      </div>
+      <!-- 发票附件图片 -->
+      <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="handleinvoicePics"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
 
-					</div>
-				</el-upload>
-				<el-dialog :visible.sync="dialogVisible">
-					<img width="100%" :src="form.pics" alt="">
-				</el-dialog>
-			</div>
-			<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" :auto-upload="false"
-					:on-change="handleinvoicePics" :file-list="form.invoicePics">
-					<i slot="default" class="el-icon-plus" />
-					<div slot="file" slot-scope="{ file }">
-						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-						<!-- <span class="el-upload-list__item-actions">
-							<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
-								<i class="el-icon-zoom-in"></i>
-							</span>
-							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
-								<i class="el-icon-download"></i>
-							</span>
-							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
-								<i class="el-icon-delete"></i>
-							</span>
-						</span> -->
-					</div>
-				</el-upload>
-				<el-dialog :visible.sync="dialogVisible">
-					<img width="100%" :src="form.invoicePics" alt="">
-				</el-dialog>
-			</div>
-			<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" :auto-upload="false"
-					:on-change="handletradePics" :file-list="form.tradePics">
-					<i slot="default" class="el-icon-plus" />
-					<div slot="file" slot-scope="{ file }">
-						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-						<span class="el-upload-list__item-actions">
-							<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
-								<i class="el-icon-zoom-in" />
-							</span>
-							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
-								<i class="el-icon-download" />
-							</span>
-							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
-								<i class="el-icon-delete" />
-							</span>
-						</span>
-					</div>
-				</el-upload>
-				<el-dialog :visible.sync="dialogVisible">
-					<img width="100%" :src="form.tradePics" alt="">
-				</el-dialog>
-			</div>
-		</el-card>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="form.invoicePics" />
+          </el-dialog>
+      </div>
+	   <!-- 贸易附件图片 -->
+      <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="handletradePics"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="form.tradePics" />
+          </el-dialog>
+      </div>
+    </el-card>
 
-		<div v-for="(item, index) in form.contractDrafts" class="form">
-			<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>
+    <div
+      v-for="(item, index) in form.contractDrafts"
+      class="form"
+      :key="item.id"
+    >
+      <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="选择日期" @change="
+        <el-form-item label="预计贴现日">
+          <el-date-picker
+            v-model="item.expectDiscountDate"
+            type="date"
+            placeholder="选择日期"
+            @change="
               changeE;
               xpectDiscountDate($event, index);
-            " />
-				</el-form-item>
-				<el-form-item label="出票日期">
-					<el-date-picker v-model="item.acceptDate" type="date" placeholder="选择日期" class="ipwidth" />
-				</el-form-item>
-				<el-form-item label="承兑日期">
-					<el-date-picker v-model="item.issueDate" type="date" placeholder="选择日期"
-						@change="changeIssueDate($event, index)" />
-				</el-form-item>
-				<el-form-item label="到期日期">
-					<el-date-picker v-model="item.expireDate" type="date" placeholder="选择日期" />
-				</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"
-						@change="computed" />
-				</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
+            "
+          />
+        </el-form-item>
+        <el-form-item label="出票日期">
+          <el-date-picker
+            v-model="item.acceptDate"
+            type="date"
+            placeholder="选择日期"
+            class="ipwidth"
+          />
+        </el-form-item>
+        <el-form-item label="承兑日期">
+          <el-date-picker
+            v-model="item.issueDate"
+            type="date"
+            placeholder="选择日期"
+            @change="changeIssueDate($event, index)"
+          />
+        </el-form-item>
+        <el-form-item label="到期日期">
+          <el-date-picker
+            v-model="item.expireDate"
+            type="date"
+            placeholder="选择日期"
+          />
+        </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"
+            @change="computed"
+          />
+        </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"
               :label="item"
               :value="item"
             /> -->
-					</el-select>
-				</el-form-item>
-				<el-form-item label="承兑人">
-					<el-select v-model="form.acceptorName" placeholder="请选择承兑人">
-						<!-- <el-option
+          </el-select>
+        </el-form-item>
+        <el-form-item label="承兑人">
+          <el-select v-model="form.acceptorName" placeholder="请选择承兑人">
+            <!-- <el-option
               v-for="val in acceptorName"
               :label="val"
               :value="val"
               @click.native="getRate"
             /> -->
-					</el-select>
-				</el-form-item>
+          </el-select>
+        </el-form-item>
 
-				<el-form-item label="服务费率">
-					<el-input v-model="item.serviceRate" class="ipwidth" placeholder="服务费率" style="width: 220px"
-						@input="inputServiceRate($event, index)" />
-				</el-form-item>
-				<el-form-item label="利率">
-					<el-input v-model="item.interestRate" class="ipwidth" placeholder="利率" style="width: 220px"
-						@input="inputInterestRate($event, 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 accept=".pdf, .jpg, .jpeg, .png" action="https://ht.9026.com/api/File"
-								list-type="picture-card" :show-file-list="true" :auto-upload="false"
-								:before-upload="beforeUpload" :on-change="handlepicUrls(file,fileList,index)"
-								:file-list="form.contractDrafts[index].picUrls"> -->
-							<el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false"
-								:on-change="handlepicUrls(file,fileList,index)" :file-list="form.contractDrafts[index].picUrls">
-								<i class="el-icon-plus" />
-							</el-upload>
-							<el-dialog :visible.sync="dialogVisible">
-								<img width="100%" :src="form.contractDrafts[index].picUrls" alt="">
-							</el-dialog>
-						</div>
-					</el-col>
-				</el-row>
-				<el-button type="primary" @click="deletedraft(index)"
-					style="width: 100px;height: 50px;margin-top: 50px;">删除汇票</el-button>
-			</div>
+        <el-form-item label="服务费率">
+          <el-input
+            v-model="item.serviceRate"
+            class="ipwidth"
+            placeholder="服务费率"
+            style="width: 220px"
+            @input="inputServiceRate($event, index)"
+          />
+        </el-form-item>
+        <el-form-item label="利率">
+          <el-input
+            v-model="item.interestRate"
+            class="ipwidth"
+            placeholder="利率"
+            style="width: 220px"
+            @input="inputInterestRate($event, 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"></i>
+              </el-upload>
 
-		</div>
+              <el-dialog :visible.sync="dialogVisible">
+                <img
+                  width="100%"
+                  :src="form.contractDrafts[0].picUrls"
+                  alt=""
+                />
+              </el-dialog>
+            </div>
+          </el-col>
+        </el-row>
 
-		<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>
+        <!-- 删除汇票 -->
+        <el-button
+          type="primary"
+          @click="deletedraft(index)"
+          style="width: 100px; height: 50px; margin-top: 50px"
+          >删除汇票</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>
-	export default {
-		data() {
-			return {
-				dialogVisible: false,
-				disabled: false,
-				drawersList: [],
-				acceptorList: [],
-				contractList: [],
-				form: {
-					// 承兑人列表
-					acceptorName: [],
-					// 出票人列表
-					drawersName: [],
-					contractNo: '',
-					supplierId: 2,
-					name: '',
-					invoicePics: [],
-					pics: [],
-					tradePics: [],
-					contractDrafts: [{
-						name: '',
-						draftNo: '',
-						acceptorId: '',
-						drawersId: '',
-						money: '',
-						acceptDate: '',
-						loanLimit: '',
-						serviceRate: '',
-						serviceMoney: '',
-						interestRate: '',
-						interest: '',
-						picUrls:[],
-						expectDiscountDate: '',
-						issueDate: '',
-						expireDate: ''
-					}]
-				},
-				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)
-							}
-						}
-					]
-				}
-			}
-		},
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      disabled: false,
+      drawersList: [],
+      acceptorList: [],
+      contractList: [],
+      filesArray: [], //汇票图片上传数组
+      picsArray: [],//合同图片上传数组
+	  invoicePicsArray:[],//发票图片上传数组
+	  tradePicsArray:[],//贸易图片上传数组
+      file: "",
+      form: {
+        // 承兑人列表
+        acceptorName: [1],
+        // 出票人列表
+        drawersName: [1],
+        contractNo: "",
+        supplierId: 2,
+        name: "",
+        invoicePics: [],
+        pics: [],
+        tradePics: [],
+        contractDrafts: [
+          {
+            name: "1",
+            draftNo: "1",
+            acceptorId: "1",
+            drawersId: "1",
+            money: "1",
+            acceptDate: "1",
+            loanLimit: "1",
+            serviceRate: "1",
+            serviceMoney: "1",
+            interestRate: "1",
+            interest: "1",
+            picUrls: [],
+            expectDiscountDate: "1",
+            issueDate: "1",
+            expireDate: "1",
+          },
+        ],
+      },
+      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() {
+    this.$request({
+      url: "/api/Contract/search",
+      method: "post",
+      data: {
+        pageIndex: 1,
+        pageSize: 100,
+      },
+    }).then((res) => {
+      this.contractList = res.data.result;
+    });
+    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);
+      // console.log(this.acceptorName)
+      // 去除重复的承兑人
+      //  for (var i = 0; i < this.acceptorName.length; i++) {    // 首次遍历数组
+      //         for (var j = i + 1; j < this.acceptorName.length; j++) {   // 再次遍历数组
+      //             if (this.acceptorName[i] === this.acceptorName[j]) {          // 判断连个值是否相等
+      //                 this.acceptorName.splice(j, 1);           // 相等删除后者
+      //                 j--;
+      //             }
+      //         }
+      //     }
+      // console.log(this.acceptorName)
+    });
+    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--;
+          }
+        }
+      }
+      // console.log(this.drawersName)
+    });
+  },
+  methods: {
+    /* 确实上传按钮 */
+    onSubmit() {
+      this.$request({
+        url: "/api/Contract",
+        method: "post",
+        data: this.form,
+      }).then((res) => {
+        console.log(res);
+        this.$message({
+          message: "上传成功",
+          type: "success",
+        });
+      });
+    },
+    /* 合同附件上传 */
+    handlepics(res) {
+      //解构
+      let { file } = res.data;
+      this.picsArray.push(file);
+      this.form.pics = this.picsArray;
+    },
+	/* 发票附件上传 */
+    handleinvoicePics(res) {
+       let { file } = res.data;
+      this.invoicePicsArray.push(file);
+      this.form.invoicePics = this.invoicePicsArray;
+    },
+	/* 贸易附件上传 */
+    handletradePics(res) {
+	   let { file } = res.data;
+      this.tradePicsArray.push(file);
+      this.form.tradePics =  this.tradePicsArray;
+    },
+
+    /* 上传图片到浏览器成功回调 */
+
+    handlepicUrls(res) {
+      //解构
+      let { file } = res.data;
+      this.filesArray.push(file);
+      this.form.contractDrafts[0].picUrls = this.filesArray;
+    },
 
-		mounted() {
-			this.$request({
-				url: '/api/Contract/search',
-				method: 'post',
-				data: {
-					pageIndex: 1,
-					pageSize: 100
-				}
-			}).then((res) => {
-				this.contractList = res.data.result
-			})
-			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)
-				console.log(this.acceptorName)
-				// 去除重复的承兑人
-				//  for (var i = 0; i < this.acceptorName.length; i++) {    // 首次遍历数组
-				//         for (var j = i + 1; j < this.acceptorName.length; j++) {   // 再次遍历数组
-				//             if (this.acceptorName[i] === this.acceptorName[j]) {          // 判断连个值是否相等
-				//                 this.acceptorName.splice(j, 1);           // 相等删除后者
-				//                 j--;
-				//             }
-				//         }
-				//     }
-				// console.log(this.acceptorName)
-			})
-			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--
-						}
-					}
-				}
-				console.log(this.drawersName)
-			})
-		},
-		methods: {
-			onSubmit() {
-				console.log(this.form)
-				// this.$request({
-				// 	url: '/api/Contract',
-				// 	method: 'post',
-				// 	data: this.form
-				// }).then((res) => {
-				// 	console.log(res)
-				// 	this.$message({
-				// 		message:'上传成功',
-				// 		type:'success'
-				// 	})
-				// })
-			},
-			handlepics(file, fileList) {
-				console.log(file, fileList)
-				// this.form.pics.push(file)
-				this.form.pics = fileList
-				console.log(this.form.pics)
-			},
-			handleinvoicePics(file, fileList) {
-				// this.form.invoicePics.push(file)
-				this.form.invoicePics = fileList
-				console.log(this.form.invoicePics)
-			},
-			handletradePics(file, fileList) {
-				// this.form.tradePics.push(file)
-				this.form.tradePics = fileList
-				console.log(this.form.tradePics)
-			},
-			handlepicUrls(file, fileList, index) {
-				this.form.contractDrafts[index].picUrls = fileList
-				console.log(this.form.contractDrafts[index])
-			},
-			getContractNo() {
-				const temporaryList = this.contractList.filter(
-					(item) => item.name === this.form.name
-				)
-				if (this.form.name === '' || temporaryList === '') {
-					this.form.contractNo = ''
-				} else {
-					this.form.contractNo = temporaryList[0].contractNo
-				}
-			},
-			getRate() {
-				const list = this.acceptorList.filter(
-					(item) => item.name === this.form.acceptorName
-				)
-				this.form.contractDrafts[0].interestRate = list[0].interest
-				this.form.contractDrafts[0].serviceRate = list[0].serviceRate
-			},
-			computed() {
-				console.log(this.form.contractDrafts[0].money)
-			},
-			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: ''
-				})
-			},
+    getContractNo() {
+      const temporaryList = this.contractList.filter(
+        (item) => item.name === this.form.name
+      );
+      if (this.form.name === "" || temporaryList === "") {
+        this.form.contractNo = "";
+      } else {
+        this.form.contractNo = temporaryList[0].contractNo;
+      }
+    },
+    getRate() {
+      const list = this.acceptorList.filter(
+        (item) => item.name === this.form.acceptorName
+      );
+      this.form.contractDrafts[0].interestRate = list[0].interest;
+      this.form.contractDrafts[0].serviceRate = list[0].serviceRate;
+    },
+    computed() {
+      console.log(this.form.contractDrafts[0].money);
+    },
+    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: "",
+      });
+    },
 
-			deletedraft(index) {
-				const contractDraftsLength = this.form.contractDrafts.length
-				if (contractDraftsLength > 1) {
-					this.form.contractDrafts.splice(index, 1)
-				} else {
-					this.$message.error('至少一个')
-				}
-				console.log(this.form.contractDrafts[0].money)
-			},
-			// 服务费率
-			inputServiceRate(val, index) {
-				console.log(val, index)
-			},
-			// 利率
-			inputInterestRate(val, index) {
-				console.log(val, index)
-			},
-			// 预计贴现日
-			changeExpectDiscountDate(val, index) {
-				console.log(val, index)
-			},
-			// 承兑日期
-			changeIssueDate(val, index) {
-				console.log(val, index)
-			}
-		}
-	}
+    //删除汇票
+    deletedraft(index) {
+      const contractDraftsLength = this.form.contractDrafts.length;
+      if (contractDraftsLength > 1) {
+        this.form.contractDrafts.splice(index, 1);
+      } else {
+        this.$message.error("至少一个");
+      }
+    },
+    // 服务费率
+    inputServiceRate(val, index) {
+      console.log(val, index);
+    },
+    // 利率
+    inputInterestRate(val, index) {
+      console.log(val, index);
+    },
+    // 预计贴现日
+    changeExpectDiscountDate(val, index) {
+      console.log(val, index);
+    },
+    // 承兑日期
+    changeIssueDate(val, index) {
+      console.log(val, index);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-	.contract {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 20px;
-	}
+.contract {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
 
-	.form {
-		display: flex;
-		justify-content: space-around;
-	}
+.form {
+  display: flex;
+  justify-content: space-around;
+}
 
-	.addnew {
-		display: flex;
-		justify-content: flex-end;
-	}
+.addnew {
+  display: flex;
+  justify-content: flex-end;
+}
 
-	.addall {
-		display: flex;
-		justify-content: center;
-	}
+.addall {
+  display: flex;
+  justify-content: center;
+}
 
-	.commit {
-		margin: 20px 0;
-	}
+.commit {
+  margin: 20px 0;
+}
 </style>