7.30新增合同重构

src/api/contracts.js

@@ -14,3 +14,24 @@ export function contractsManageApi(data) {
     data
   })
 }
+export function drawerSearchApi(data) {
+  return request({
+    url: '/api/Drawer/search',
+    method: 'post',
+    data
+  })
+}
+export function acceptorSearchApi(data) {
+  return request({
+    url: '/api/Acceptor/search',
+    method: 'post',
+    data
+  })
+}
+export function contractSubmitApi(data) {
+  return request({
+    url: '/api/Contract',
+    method: 'post',
+    data
+  })
+}

src/components/AcceptorSelect/AcceptorSelect.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-select
+    :value="value"
+    filterable
+    remote
+    placeholder="请输入关键词"
+    :loading="loading"
+    :remote-method="remoteMethod"
+    clearable
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import { acceptorSearchApi } from '@/api/contracts'
+export default {
+  name: 'AcceptorSelect',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      filter: {
+        pageIndex: 1,
+        pageSize: 100
+      },
+      options: [],
+      loading: false
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    loadData(filter = {}) {
+      const params = {
+        ...this.filter,
+        ...filter
+      }
+      this.loading = true
+      acceptorSearchApi(params).then(res => {
+        const result = res.data.result
+        this.options = result
+        this.loading = false
+      }).catch(err => {
+        console.log(err)
+        this.loading = false
+      })
+    },
+    remoteMethod(query) {
+      this.loadData({ name: query })
+    },
+    onChange(value) {
+      this.emitInput(value)
+    },
+    emitInput(value) {
+      const exist = this.options.find((o) => o.id === value)
+      this.$emit('input', value)
+      this.$emit('change', value, exist)
+    }
+  }
+}
+</script>

src/components/DrawerSelect/DrawerSelect.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-select
+    :value="value"
+    filterable
+    remote
+    placeholder="请输入关键词"
+    :loading="loading"
+    :remote-method="remoteMethod"
+    clearable
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import { drawerSearchApi } from '@/api/contracts'
+export default {
+  name: 'DrawerSelect',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      filter: {
+        pageIndex: 1,
+        pageSize: 100
+      },
+      options: [],
+      loading: false
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    loadData(filter = {}) {
+      const params = {
+        ...this.filter,
+        ...filter
+      }
+      this.loading = true
+      drawerSearchApi(params).then(res => {
+        const result = res.data.result
+        this.options = result
+        this.loading = false
+      }).catch(err => {
+        console.log(err)
+        this.loading = false
+      })
+    },
+    remoteMethod(query) {
+      this.loadData({ name: query })
+    },
+    onChange(value) {
+      this.emitInput(value)
+    },
+    emitInput(value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>

src/components/upload/upload.vue

@@ -4,11 +4,61 @@
       :action="url"
       list-type="picture-card"
       :on-success="handleImageSuccess"
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
+      :file-list="fileList"
+      :limit="limit"
+      :accept="accept"
+      :headers="headers"
+      :before-upload="beforeUpload"
+      multiple
     >
-      <i class="el-icon-plus" />
+      <i slot="default" class="el-icon-plus" />
+      <div slot="file" slot-scope="{ file }">
+        <div class="text-center p-2">
+          <img
+            class="el-upload-list__item-thumbnail"
+            :src="isPDF(file) ? files(file) : pdfImg"
+          >
+          <!-- 成功状态 -->
+          <span
+            v-if="file.status === 'success'"
+            class="el-upload-list__item-actions"
+          >
+            <span
+              v-if="preview"
+              class="el-upload-list__item-preview"
+              @click="handlePreview(file)"
+            >
+              <i class="el-icon-zoom-in" />
+            </span>
+            <span
+              v-if="download"
+              class="el-upload-list__item-delete"
+              @click="handleDownload(file)"
+            >
+              <i class="el-icon-download" />
+            </span>
+            <span
+              v-if="deleted"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+            >
+              <i class="el-icon-delete" />
+            </span>
+          </span>
+          <!-- 失败状态 -->
+          <span
+            v-else
+            :class="[
+              uploading ? 'uploading' : '',
+              'el-upload-list__item-actions',
+            ]"
+          >
+            <i class="el-icon-loading" /><i style="font-size: 14px">上传中</i>
+          </span>
+        </div>
+      </div>
     </el-upload>
+    <!-- 预览图片 -->
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
@@ -16,28 +66,72 @@
 </template>
 
 <script>
+import pdf from '@/assets/pdf.png'
 export default {
   name: 'Upload',
   props: {
     value: {
-      type: [String, Array],
+      type: [String, Array, Object],
       default: ''
     },
+    // 接口地址
     url: {
       type: String,
       default: 'https://ht.9026.com/api/File'
+    },
+    // 设置上传的请求头部
+    headers: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 上传文件大小限制， 默认 50M，单位M
+    size: {
+      type: [Number, String],
+      default: 50
+    },
+    // 文件上传格式， 默认jpeg, png,jpg
+    accept: {
+      type: String,
+      default: '.jpg,.jpeg,.png,.pdf'
+    },
+    // 是否显示删除操作按钮
+    deleted: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示预览操作按钮
+    preview: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示下载操作按钮
+    download: {
+      type: Boolean,
+      default: true
+    },
+    // 上传文件个数限制，默认0 不限制
+    limit: {
+      type: [Number, String],
+      default: 0
     }
   },
   data() {
     return {
-      dialogVisible: false,
-      dialogImageUrl: '',
-      fileList: []
+      pdfImg: pdf, // pdf图片
+      dialogVisible: false, // 是否显示预览
+      dialogImageUrl: '', // 预览图片地址
+      fileList: [], // 默认文件列表
+      hideUpload: false, // 超出限制掩藏上传按钮
+      uploading: false // 是否上传中,上传时隐藏上传按钮
     }
   },
   methods: {
     emitInput() {
-      this.$emit('input', this.fileList)
+      this.$emit('input', this.fileList.map(o => {
+        return o.response.data.file
+      }))
     },
     // 查看图片
     handlePictureCardPreview(file) {
@@ -45,21 +139,80 @@ export default {
       this.dialogVisible = true
     },
     // 文件上传成功
-    handleImageSuccess(res) {
+    handleImageSuccess(res, file) {
       if (res.code === 200) {
-        this.fileList.push(res.data.file)
+        this.fileList.push(file)
         this.emitInput()
       } else {
         this.$message.error('文件上传失败')
       }
     },
     // 删除文件
-    handleRemove(file, fileList) {
-      this.fileList = fileList.map(o => {
-        return o.response.data.file
+    handleRemove(file) {
+      this.$confirm(`确认删除 ${file.name} 文件?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
+        this.emitInput()
       })
-      this.emitInput()
+    },
+    files(file) {
+      if (!file.response) return
+      return file.response.data.file
+    },
+    isPDF(file) {
+      const { name } = file
+      const fileType = ['pdf']
+      const index = name.lastIndexOf('.')
+      const type = name.substr(index + 1)
+      return fileType.indexOf(type) === -1
+    },
+    // 图片预览
+    handlePreview(file) {
+      window.open(file.url, '_blank')
+      /*
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      */
+    },
+    // 下载
+    handleDownload(file) {
+      window.open(file.url, '_blank')
+      /* const a = document.createElement('a')
+      a.href = file.url
+      a.click() // 模拟点击事件，实现图片文件的同源下载
+      */
+    },
+    // 上传前文件大小判断
+    beforeUpload(file) {
+      const { size } = this
+      const overSize = size > 0 && file.size < 1024 * 1024 * size
+      if (!overSize) this.$message.error(`上传文件大小不能超过 ${size}MB!`)
+      this.uploading = overSize // 是否上传中
+      return overSize
+    },
+    // 上传出错返回
+    handleError(event, file, fileList) {
+      console.log(event, file, fileList, 'error')
+      this.$message.error('服务出错，上传失败！')
     }
   }
 }
 </script>
+<style scoped>
+.text-center {
+  text-align: center;
+}
+/*添加、删除文件时去掉动画过渡*/
+.el-upload-list__item {
+  transition: none !important;
+}
+.el-upload-list--picture-card .el-upload-list__item {
+    background-color: inherit;
+    border: none;
+    width: 158px;
+    height: 208px;
+}
+</style>

src/main.js

@@ -15,9 +15,7 @@ import locale from 'element-ui/lib/locale/lang/zh-CN'
 import '@/directives'
 import '@/icons' // icon
 import '@/permission' // permission control
-import TableWrapper from '@/components/TableWrapper/TableWrapper.vue'
 import Upload from '@/components/upload/upload.vue'
-Vue.component('TableWrapper', TableWrapper)
 Vue.component('Upload', Upload)
 /**
  * If you don't want to use mock-server

src/router/index.js

@@ -46,17 +46,7 @@ export const asyncRouterMap = [{
 		redirect: {
 			name: 'contracts'
 		},
-		children: [{
-				path: 'list',
-				name: 'contracts-list',
-				component: () => import('@/views/contracts/list'),
-				meta: {
-					title: '合同列表',
-					icon: 'el-icon-s-order',
-					roles: ['admin', 'salesman', 'supplier']
-				},
-				hidden: true
-			},
+		children: [
 			{
 				path: 'contracts',
 				name: 'contracts',
@@ -180,7 +170,7 @@ export const asyncRouterMap = [{
 				component: () => import('@/views/form/addTicketdrawer'),
 				meta: {
 					title: '新增出票人',
-					roles: ['admin', 'salesman', ]
+					roles: ['admin', 'salesman', 'supplier']
 				},
 				hidden: true
 			},
@@ -369,4 +359,4 @@ export function resetRouter() {
 	router.matcher = newRouter.matcher // reset router
 }
 
-export default router
+export default router

src/views/contracts/components/ListFilterForm.vue

@@ -1,139 +0,0 @@
-<template>
-  <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
-    <div class="grid-content bg-purple">
-      <el-input
-        v-model="form.name"
-        placeholder="合同名称/编号、承兑人名称或出票..."
-        clearable
-        style="width: 100%"
-        @change="handleFilter"
-      >
-        <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">
-          <span v-if="!status" class="el-dropdown-link"> 合同状态 </span>
-          <span v-if="status" class="el-dropdown-link">
-            {{ status }}
-          </span>
-          <i class="el-icon-arrow-down el-icon--right" />
-        </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-menu>
-      </el-dropdown>
-    </div>
-    <div class="grid-content bg-purple">
-      <el-dropdown @command="handlehpCommand">
-        <div class="pulldown">
-          <span v-if="!hpstatus" class="el-dropdown-link"> 汇票状态 </span>
-          <span v-if="hpstatus" class="el-dropdown-link">
-            {{ hpstatus }}
-          </span>
-          <i class="el-icon-arrow-down el-icon--right" />
-        </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-menu>
-      </el-dropdown>
-    </div>
-    <div class="grid-content bg-purple">
-      <el-dropdown @command="handleCommandAuditstatus">
-        <div class="pulldown">
-          <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
-          <span v-if="Auditstatus" class="el-dropdown-link">
-            {{ Auditstatus }}
-          </span>
-          <i class="el-icon-arrow-down el-icon--right" />
-        </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">
-      <div class="block">
-        <el-date-picker
-          v-model="value2"
-          type="daterange"
-          align="right"
-          unlink-panels
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd"
-          @change="handleFilter"
-        />
-      </div>
-    </div>
-  </el-row>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        startTime: '',
-        endTime: '',
-        name: '',
-        contractStatus: 0,
-        draftStatus: '',
-        supplierName: ''
-      },
-      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])
-          }
-        }
-        ]
-      }
-    }
-  },
-  methods: {
-    handleFilter() {
-      this.$emit('filter', {
-        ...this.form,
-        pageIndex: 1
-      })
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

src/views/contracts/components/ListTable.vue

@@ -1,99 +0,0 @@
-<template>
-  <TableWrapper
-    :loading="loading"
-    :pagination="pagination"
-    @change="onChange"
-  >
-    <el-table
-      :data="data"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-      @select="onSelectChange"
-      @select-all="onSelectChange"
-    >
-      <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="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">
-        <template slot-scope="scope">
-          <div class="result-table-btns">
-            <!-- <el-button
-              type="primary"
-              @click="$emit('onShow', scope.row)"
-            >详情</el-button>
-            <el-button
-              type="primary"
-              @click="$emit('onEdit', scope.row)"
-            >修改</el-button>
-            <el-button
-              type="primary"
-              @click="$emit('onDelete', scope.row)"
-            >删除</el-button> -->
-            <el-tag class="table-btn" type="primary" style="cursor: pointer" @click="$emit('onShow', scope.row)">详情</el-tag>
-            <el-tag class="table-btn" type="success" style="cursor: pointer" @click="$emit('onEdit', scope.row)">修改</el-tag>
-            <el-tag class="table-btn" type="danger" style="cursor: pointer" @click="$emit('onDelete', scope.row)">删除</el-tag>
-            <el-tag class="table-btn" type="primary" style="cursor: pointer" @click="$emit('onAudit', scope.row)">审核</el-tag>
-          </div>
-          <!-- <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>
-          <el-tag v-if="checked === 1" type="danger" style="cursor: pointer">删除</el-tag> -->
-        </template>
-      </el-table-column>
-    </el-table>
-  </TableWrapper>
-</template>
-
-<script>
-
-export default {
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    pagination: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    loading: {
-      type: Boolean,
-      default() {
-        return false
-      }
-    }
-  },
-  methods: {
-    onChange(pagination) {
-      this.$emit('filter', {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize
-      })
-    },
-    onSelectChange(rows, currentRow) {
-      this.$emit('update:selectedRows', rows)
-    }
-  }
-}
-</script>
-<style scoped>
-.table-btn +.table-btn{
-  margin-left: 5px;
-}
-</style>

src/views/contracts/list.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <div class="result-filter">
-      <ListFilterForm @filter="onFilter" />
-    </div>
-    <!-- 表格内容 -->
-    <div class="result-table">
-      <!-- 表格按钮 -->
-      <div class="result-table-btns">
-        <el-button
-          type="primary"
-          @click="onAdd"
-        >新增</el-button>
-      </div>
-      <!-- 表格 -->
-      <ListTable
-        :loading="loading"
-        :data="tableData"
-        :pagination="pagination"
-        :selected-rows.sync="selectedRows"
-        @filter="onFilter"
-        @onShow="onShow"
-        @onEdit="onEdit"
-        @onDelete="onDelete"
-        @onAudit="onAudit"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { contractsPageApi, contractsManageApi } from '@/api/contracts'
-import ListTable from './components/ListTable.vue'
-import ListFilterForm from './components/ListFilterForm.vue'
-export default {
-  components: {
-    ListTable,
-    ListFilterForm
-  },
-  data() {
-    return {
-      tableData: [],
-      pagination: {
-        pageIndex: 0,
-        total: 0,
-        pageSize: 10
-      },
-      filter: {
-        pageIndex: 1,
-        pageSize: 10
-      },
-      selectedRows: [],
-      loading: false
-    }
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    onFilter(filter = {}) {
-      this.loadData(filter)
-    },
-    loadData(filtter = {}) {
-      const params = {
-        ...this.filter,
-        ...filtter
-      }
-      this.loading = true
-      contractsPageApi(params).then(res => {
-        const { data } = res
-        this.filter = params
-        this.tableData = data.result
-        this.pagination = {
-          ...this.pagination,
-          pageIndex: params.pageIndex,
-          pageSize: params.pageSize,
-          total: data.total
-        }
-        this.loading = false
-      }).catch(err => {
-        this.loading = false
-        console.log(err)
-      })
-    },
-    // 添加
-    onAdd() {
-      console.log('onAdd')
-    },
-    // 详情
-    onShow(row) {
-      console.log(row)
-    },
-    // 修改
-    onEdit(row) {
-      console.log(row)
-    },
-    // 删除
-    onDelete(row) {
-      console.log(row)
-    },
-    // 审核
-    onAudit(row) {
-      console.log(row)
-      const params = {
-        id: [row.id],
-        operateType: 3
-      }
-      this.loading = true
-      contractsManageApi(params).then(res => {
-        this.loading = false
-        this.$message({
-          type: 'success',
-          message: res.msg
-        })
-      }).catch(err => {
-        this.loading = false
-        console.log(err)
-        this.$message({
-          type: 'danger',
-          message: err.msg
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.result-table{
-  background-color: #ffffff;
-}
-.result-table-btns{
-  text-align: right;
-  margin-bottom: 15px;
-}
-</style>

src/views/contracts/new_file copy.vue

@@ -0,0 +1,724 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" style="">
+      <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>
+          <Upload v-model="form.pics" />
+          <!-- <el-upload
+            action="https://ht.9026.com/api/File"
+            list-type="picture-card"
+            :on-success="handlepics"
+          >
+            <i class="el-icon-plus" />
+          </el-upload>
+
+          <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>
+        <Upload v-model="form.invoicePics" />
+        <!-- <el-upload
+          action="https://ht.9026.com/api/File"
+          list-type="picture-card"
+          :on-success="handleinvoicePics"
+        >
+          <i class="el-icon-plus" />
+        </el-upload>
+        <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>
+        <Upload v-model="form.tradePics" />
+        <!-- <el-upload
+          action="https://ht.9026.com/api/File"
+          list-type="picture-card"
+          :on-success="handletradePics"
+        >
+          <i class="el-icon-plus" />
+        </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"
+      :key="item.id"
+      class="form"
+      style="
+        margin: 20px;
+        border: 1px solid #c0c0c0;
+        padding: 10px;
+        border-radius: 10px;
+      "
+    >
+      <!-- 汇票名称 -->
+      <el-form ref="form" :model="item" label-width="90px">
+        <el-form-item label="汇票名称">
+          <el-input
+            v-model="item.name"
+            class="ipwidth"
+            placeholder="请填写汇票名称"
+            style="width: 220px"
+          />
+        </el-form-item>
+        <!-- 预计贴现日 -->
+        <el-form-item label="预计贴现日">
+          <el-date-picker
+            v-model="item.expectDiscountDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            @change="inputMoney(index, 4)"
+          />
+        </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="选择日期"
+            default-value
+            value-format="yyyy-MM-dd"
+            @change="inputMoney(index, 1)"
+          />
+        </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"
+            @blur="getMoney(index)"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+        <!-- 服务费 -->
+        <el-form-item label="服务费">
+          <el-input
+            v-model="item.serviceMoney"
+            class="ipwidth"
+            placeholder="计算得出服务费"
+            style="width: 220px"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+        <!-- 最高贷款额度 -->
+        <el-form-item label="最高贷款额度">
+          <el-input
+            v-model="item.loanLimit"
+            class="ipwidth"
+            placeholder="计算得出最高贷款额度"
+            style="width: 220px"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+
+        <el-form-item label="利息">
+          <el-input
+            v-model="item.interest"
+            class="ipwidth"
+            placeholder="计算得出利息"
+            style="width: 220px"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+      </el-form>
+      <!-- 出票人 -->
+      <el-form ref="form" :model="form" label-width="90px">
+        <el-form-item label="出票人">
+          <el-select
+            v-model="form.drawersName"
+            filterable
+            placeholder="请选择出票人"
+          >
+            <el-option
+              label="新增出票人"
+              value=""
+              style="color: darkorange"
+              @click.native="addDrawer"
+            />
+            <el-option
+              v-for="item in drawersName"
+              :key="item.id"
+              :label="item"
+              :value="item"
+              @click.native="getdrawersId(index, item)"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 承兑人 -->
+        <el-form-item label="承兑人">
+          <el-select
+            v-model="form.acceptorName"
+            filterable
+            placeholder="请选择承兑人"
+          >
+            <el-option
+              v-for="val in acceptorName"
+              :key="val"
+              :label="val"
+              :value="val"
+              @click.native="getRate(index)"
+            />
+          </el-select>
+        </el-form-item>
+
+        <!-- 服务费率 -->
+
+        <el-form-item label="服务费率">
+          <el-input
+            v-model="item.serviceRate"
+            class="ipwidth"
+            placeholder="服务费率"
+            style="width: 220px"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+        <!-- 利率 -->
+        <el-form-item label="利率">
+          <el-input
+            v-model="item.interestRate"
+            class="ipwidth"
+            placeholder="利率"
+            style="width: 220px"
+            @input="inputMoney(index)"
+          />
+        </el-form-item>
+      </el-form>
+      <!-- 汇票附件上传 -->
+      <div>
+        <el-row>
+          <el-col style="margin: 0 auto">
+            <div class="titlesa">
+              <span>附件</span>
+              <span
+                style="color: #d05c39"
+              >*支持上传pdf、jpg/jpeg、png格式</span>
+            </div>
+            <div>
+              <el-upload
+                action="https://ht.9026.com/api/File"
+                list-type="picture-card"
+                :on-success="handlepicUrls"
+              >
+                <i class="el-icon-plus" />
+              </el-upload>
+
+              <el-dialog :visible.sync="dialogVisible">
+                <img
+                  width="100%"
+                  :src="form.contractDrafts[0].picUrls"
+                  alt=""
+                >
+              </el-dialog>
+            </div>
+          </el-col>
+        </el-row>
+
+        <!-- 删除汇票 -->
+        <el-button
+          type="primary"
+          style="width: 100px; height: 50px; margin-top: 50px"
+          @click="deletedraft(index)"
+        >删除汇票</el-button>
+      </div>
+    </div>
+    <!-- 新增汇票 -->
+    <div class="commit">
+      <div class="addnew">
+        <el-button type="primary" @click="adddraft">新增汇票</el-button>
+      </div>
+      <div class="addall">
+        <el-button
+          type="warning"
+          style="width: 180px; height: 45px; font-size: 16px"
+          @click="onSubmit"
+        >确认上传
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      disabled: false,
+      drawersList: [],
+      acceptorList: [],
+      contractList: [],
+      filesArray: [], // 汇票图片上传数组
+      picsArray: [], // 合同图片上传数组
+      invoicePicsArray: [], // 发票图片上传数组
+      tradePicsArray: [], // 贸易图片上传数组
+      file: '',
+      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: '',
+            limitTime: '',
+            acceptDateTime: '',
+            expectDiscountDateTime: ''
+          }
+        ]
+      },
+      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)
+    })
+    this.$request({
+      url: '/api/Drawer/search',
+      method: 'post',
+      data: {
+        pageIndex: 1,
+        pageSize: 100
+      }
+    }).then((res) => {
+      this.drawersList = res.data.result
+      this.drawersName = Array.from(this.drawersList, ({ name }) => name)
+      // 去除重复的出票人
+      for (var i = 0; i < this.drawersName.length; i++) {
+        // 首次遍历数组
+        for (var j = i + 1; j < this.drawersName.length; j++) {
+          // 再次遍历数组
+          if (this.drawersName[i] === this.drawersName[j]) {
+            // 判断连个值是否相等
+            this.drawersName.splice(j, 1) // 相等删除后者
+            j--
+          }
+        }
+      }
+    })
+    /* 调用获取当前的时间 */
+    this.loadTime()
+  },
+  methods: {
+    inputMoney(index) {
+      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
+      )
+    },
+    onSubmit() {
+      this.$request({
+        url: '/api/Contract',
+        method: 'post',
+        data: this.form
+      }).then((res) => {
+        console.log(res)
+        this.$message({
+          message: '上传成功',
+          type: 'success'
+        })
+      })
+    },
+
+    /* 默认时间 */
+    loadTime() {
+      const myDate = new Date()
+      const wk = parseInt(Date.now() / 100000).toFixed(0) * 100000
+      const yy = String(myDate.getFullYear())
+      // let mm = myDate.getMonth() + 1
+      const mm = String(
+        myDate.getMonth() + 1 < 10
+          ? '0' + (myDate.getMonth() + 1)
+          : myDate.getMonth() + 1
+      )
+      const dd = String(
+        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
+      )
+      const nowDate = yy + '-' + mm + '-' + dd
+      this.form.contractDrafts.forEach((item) => {
+        item.acceptDate = nowDate
+        item.issueDate = nowDate
+        item.expireDate = nowDate
+        item.expectDiscountDate = nowDate
+        item.expectDiscountDateTime = wk
+        item.acceptDateTime = wk
+        const nTime = item.acceptDateTime - item.expectDiscountDateTime
+        item.limitTime = Math.floor(nTime / 86400000)
+      })
+    },
+
+    /* 合同附件上传 */
+    handlepics(res) {
+      // 解构
+      const { file } = res.data
+      this.picsArray.push(file)
+      this.form.pics = this.picsArray
+    },
+    /* 发票附件上传 */
+    handleinvoicePics(res) {
+      const { file } = res.data
+      this.invoicePicsArray.push(file)
+      this.form.invoicePics = this.invoicePicsArray
+    },
+    /* 贸易附件上传 */
+    handletradePics(res) {
+      const { file } = res.data
+      this.tradePicsArray.push(file)
+      this.form.tradePics = this.tradePicsArray
+    },
+
+    /* 上传图片到浏览器成功回调 */
+    handlepicUrls(res) {
+      // 解构
+      const { file } = res.data
+      this.filesArray.push(file)
+      this.form.contractDrafts[0].picUrls = this.filesArray
+    },
+    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
+      }
+    },
+
+    /* 获取服务率和利率,承兑人id */
+    getRate(index) {
+      const list = this.acceptorList.filter(
+        (item) => item.name === this.form.acceptorName
+      )
+      console.log(list)
+      this.form.contractDrafts[index].acceptorId = list[index].id
+      this.form.contractDrafts[index].interestRate = list[index].interest
+      this.form.contractDrafts[index].serviceRate = list[index].serviceRate
+    },
+    // 获取出票人id
+    getdrawersId(index, name) {
+      const drawers = this.drawersList.filter((item) => item.name === name)
+      console.log(drawers)
+      this.form.contractDrafts[index].drawersId = drawers[index].id
+      console.log(drawers[index].id)
+    },
+    addDrawer() {
+      this.$router.push({
+        path: '/form/addTicketdrawer'
+      })
+    },
+    // 新增汇票
+    adddraft() {
+      this.form.contractDrafts.push({
+        name: '',
+        draftNo: '',
+        acceptorId: '',
+        drawersId: '',
+        money: '',
+        acceptDate: '',
+        loanLimit: '',
+        serviceRate: '',
+        serviceMoney: '',
+        interestRate: '',
+        interest: '',
+        picUrls: [],
+        expectDiscountDate: '',
+        issueDate: '',
+        expireDate: '',
+        limitTime: ''
+      })
+    },
+    // 删除汇票
+    deletedraft(index) {
+      const contractDraftsLength = this.form.contractDrafts.length
+      if (contractDraftsLength > 1) {
+        this.form.contractDrafts.splice(index, 1)
+      } else {
+        this.$message.error('至少一个')
+      }
+    },
+
+    /* 计算时间段 */
+    change(e, number) {}
+
+    // /* 获取金额 */
+    // getMoney(index) {
+    //   this.getloanLimt(index)
+    //   this.getSerMoney(index)
+    //   this.getInterMoney(index)
+    // }
+    // /* 计算最高贷款额度 */
+    // getloanLimt(i) {
+    //   if (
+    //     this.form.contractDrafts[i].money &&
+    //     this.form.contractDrafts[i].serviceRate &&
+    //     this.form.contractDrafts[i].interestRate
+    //   ) {
+    //     this.form.contractDrafts[i].loanLimit = (
+    //       ((this.form.contractDrafts[i].money /
+    //         (this.form.contractDrafts[i].serviceRate +
+    //           this.form.contractDrafts[i].interestRate)) *
+    //         this.form.contractDrafts[i].limitTime) /
+    //         360 +
+    //       1
+    //     ).toFixed(2)
+    //   }
+    // },
+    // /* 计算服务费 */
+    // getSerMoney(i) {
+    //   if (
+    //     this.form.contractDrafts[i].money &&
+    //     this.form.contractDrafts[i].serviceRate &&
+    //     this.form.contractDrafts[i].interestRate
+    //   ) {
+    //     this.form.contractDrafts[i].serviceMoney = (
+    //       ((((this.form.contractDrafts[i].money /
+    //         (this.form.contractDrafts[i].serviceRate +
+    //           this.form.contractDrafts[i].interestRate)) *
+    //         this.form.contractDrafts[i].limitTime) /
+    //         360 +
+    //         1) *
+    //         this.form.contractDrafts[i].serviceRate *
+    //         this.form.contractDrafts[i].limitTime) /
+    //       360
+    //     ).toFixed(2)
+    //   }
+    // },
+    // /* 利息*/
+    // getInterMoney(i) {
+    //   if (
+    //     this.form.contractDrafts[i].money &&
+    //     this.form.contractDrafts[i].serviceRate &&
+    //     this.form.contractDrafts[i].interestRate
+    //   ) {
+    //     this.form.contractDrafts[i].interest = (
+    //       ((((this.form.contractDrafts[i].money /
+    //         (this.form.contractDrafts[i].serviceRate +
+    //           this.form.contractDrafts[i].interestRate)) *
+    //         this.form.contractDrafts[i].limitTime) /
+    //         360 +
+    //         1) *
+    //         this.form.contractDrafts[i].interestRate *
+    //         this.form.contractDrafts[i].limitTime) /
+    //       360
+    //     ).toFixed(2)
+    //   }
+    // }
+  }
+}
+</script>
+
+<style lang="scss">
+.contract {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.form {
+  display: flex;
+  justify-content: space-around;
+}
+
+.addnew {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.addall {
+  display: flex;
+  justify-content: center;
+}
+
+.commit {
+  margin: 20px 0;
+}
+</style>

src/views/contracts/new_file.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
     <el-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
-      <div class="contract">
-        <div>
+      <el-row class="contract">
+        <el-col :span="12">
           <p>合同名称</p>
           <el-input
             v-model="form.name"
             placeholder="请输入合同名称"
             style="width: 500px"
             clearable
-            @input="getContractNo"
+            @change="getContractNo"
           />
-        </div>
-        <div>
+        </el-col>
+        <el-col :span="12">
           <p>合同编号</p>
           <el-input
             v-model="form.contractNo"
@@ -20,28 +20,15 @@
             style="width: 500px"
             disabled
           />
-        </div>
-      </div>
+        </el-col>
+      </el-row>
       <!-- 合同附件图片 -->
       <div class="titlesa">
         <span>合同附件</span>
-        <span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
+        <span style="color: #d05c39"> *支持上传pdf、jpg/jpeg、png格式</span>
       </div>
       <div>
-        <div>
-          <Upload v-model="form.pics" />
-          <!-- <el-upload
-            action="https://ht.9026.com/api/File"
-            list-type="picture-card"
-            :on-success="handlepics"
-          >
-            <i class="el-icon-plus" />
-          </el-upload>
-
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="form.pics">
-          </el-dialog> -->
-        </div>
+        <Upload v-model="form.pics" />
       </div>
       <!-- 发票附件图片 -->
       <div class="titlesa">
@@ -50,16 +37,6 @@
       </div>
       <div>
         <Upload v-model="form.invoicePics" />
-        <!-- <el-upload
-          action="https://ht.9026.com/api/File"
-          list-type="picture-card"
-          :on-success="handleinvoicePics"
-        >
-          <i class="el-icon-plus" />
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="form.invoicePics">
-        </el-dialog> -->
       </div>
       <!-- 贸易附件图片 -->
       <div class="titlesa">
@@ -68,380 +45,381 @@
       </div>
       <div>
         <Upload v-model="form.tradePics" />
-        <!-- <el-upload
-          action="https://ht.9026.com/api/File"
-          list-type="picture-card"
-          :on-success="handletradePics"
-        >
-          <i class="el-icon-plus" />
-        </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"
-      :key="item.id"
-      class="form"
-      style="
-        margin: 20px;
-        border: 1px solid #c0c0c0;
-        padding: 10px;
-        border-radius: 10px;
-      "
-    >
-      <!-- 汇票名称 -->
-      <el-form ref="form" :model="item" label-width="90px">
-        <el-form-item label="汇票名称">
-          <el-input
-            v-model="item.name"
-            class="ipwidth"
-            placeholder="请填写汇票名称"
-            style="width: 220px"
-          />
-        </el-form-item>
-        <!-- 预计贴现日 -->
-        <el-form-item label="预计贴现日">
-          <el-date-picker
-            v-model="item.expectDiscountDate"
-            type="date"
-            placeholder="选择日期"
-            value-format="yyyy-MM-dd"
-            @change="inputMoney(index, 4)"
-          />
-        </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="选择日期"
-            default-value
-            value-format="yyyy-MM-dd"
-            @change="inputMoney(index, 1)"
-          />
-        </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"
-            @blur="getMoney(index)"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-        <!-- 服务费 -->
-        <el-form-item label="服务费">
-          <el-input
-            v-model="item.serviceMoney"
-            class="ipwidth"
-            placeholder="计算得出服务费"
-            style="width: 220px"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-        <!-- 最高贷款额度 -->
-        <el-form-item label="最高贷款额度">
-          <el-input
-            v-model="item.loanLimit"
-            class="ipwidth"
-            placeholder="计算得出最高贷款额度"
-            style="width: 220px"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-
-        <el-form-item label="利息">
-          <el-input
-            v-model="item.interest"
-            class="ipwidth"
-            placeholder="计算得出利息"
-            style="width: 220px"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-      </el-form>
-      <!-- 出票人 -->
-      <el-form ref="form" :model="form" label-width="90px">
-        <el-form-item label="出票人">
-          <el-select
-            v-model="form.drawersName"
-            filterable
-            placeholder="请选择出票人"
-          >
-            <el-option
-              label="新增出票人"
-              value=""
-              style="color: darkorange"
-              @click.native="addDrawer"
-            />
-            <el-option
-              v-for="item in drawersName"
-              :key="item.id"
-              :label="item"
-              :value="item"
-              @click.native="getdrawersId(index, item)"
-            />
-          </el-select>
-        </el-form-item>
-        <!-- 承兑人 -->
-        <el-form-item label="承兑人">
-          <el-select
-            v-model="form.acceptorName"
-            filterable
-            placeholder="请选择承兑人"
-          >
-            <el-option
-              v-for="val in acceptorName"
-              :key="val"
-              :label="val"
-              :value="val"
-              @click.native="getRate(index)"
-            />
-          </el-select>
-        </el-form-item>
-
-        <!-- 服务费率 -->
-
-        <el-form-item label="服务费率">
-          <el-input
-            v-model="item.serviceRate"
-            class="ipwidth"
-            placeholder="服务费率"
-            style="width: 220px"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-        <!-- 利率 -->
-        <el-form-item label="利率">
-          <el-input
-            v-model="item.interestRate"
-            class="ipwidth"
-            placeholder="利率"
-            style="width: 220px"
-            @input="inputMoney(index)"
-          />
-        </el-form-item>
-      </el-form>
-      <!-- 汇票附件上传 -->
-      <div>
-        <el-row>
-          <el-col style="margin: 0 auto">
-            <div class="titlesa">
-              <span>附件</span>
-              <span
-                style="color: #d05c39"
-              >*支持上传pdf、jpg/jpeg、png格式</span>
-            </div>
-            <div>
-              <el-upload
-                action="https://ht.9026.com/api/File"
-                list-type="picture-card"
-                :on-success="handlepicUrls"
-              >
-                <i class="el-icon-plus" />
-              </el-upload>
-
-              <el-dialog :visible.sync="dialogVisible">
-                <img
-                  width="100%"
-                  :src="form.contractDrafts[0].picUrls"
-                  alt=""
-                >
-              </el-dialog>
-            </div>
+      <el-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>
-
-        <!-- 删除汇票 -->
-        <el-button
-          type="primary"
-          style="width: 100px; height: 50px; margin-top: 50px"
-          @click="deletedraft(index)"
-        >删除汇票</el-button>
-      </div>
-    </div>
-    <!-- 新增汇票 -->
-    <div class="commit">
-      <div class="addnew">
-        <el-button type="primary" @click="adddraft">新增汇票</el-button>
-      </div>
-      <div class="addall">
-        <el-button
-          type="warning"
-          style="width: 180px; height: 45px; font-size: 16px"
-          @click="onSubmit"
-        >确认上传
-        </el-button>
-      </div>
-    </div>
+        <!-- 新增汇票 -->
+        <div 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>
+        </div>
+      </el-form>
+    </el-card>
   </div>
 </template>
-
 <script>
+import { contractSubmitApi, contractsPageApi } from '@/api/contracts'
 import { maxLoanAmount, serviceCharge, interest } from '@/utils/calc'
+import DrawerSelect from '@/components/DrawerSelect/DrawerSelect.vue'
+import AcceptorSelect from '@/components/AcceptorSelect/AcceptorSelect.vue'
 export default {
+  components: {
+    DrawerSelect,
+    AcceptorSelect
+  },
   data() {
     return {
-      dialogVisible: false,
-      disabled: false,
-      drawersList: [],
-      acceptorList: [],
+      colSpan: 8,
       contractList: [],
-      filesArray: [], // 汇票图片上传数组
-      picsArray: [], // 合同图片上传数组
-      invoicePicsArray: [], // 发票图片上传数组
-      tradePicsArray: [], // 贸易图片上传数组
-      file: '',
       form: {
-        // 承兑人列表
-        acceptorName: [],
-        // 出票人列表
-        drawersName: [],
-        contractNo: '',
-        supplierId: 2,
-        name: '',
-        invoicePics: [],
-        pics: [],
-        tradePics: [],
+        name: '', // 合同名称
+        contractNo: '', // 合同编号
+        pics: [], // 合同附件
+        invoicePics: [], // 发票附件
+        tradePics: [], // 贸易合同
+        supplierId: 2, // 不知道干啥的
         /* 汇票的数据 */
         contractDrafts: [
           {
-            name: '',
-            draftNo: '',
-            acceptorId: '',
-            drawersId: '',
-            money: '',
-            acceptDate: '',
-            loanLimit: '',
-            serviceRate: '',
-            serviceMoney: '',
-            interestRate: '',
-            interest: '',
-            picUrls: [],
-            expectDiscountDate: '',
-            issueDate: '',
-            expireDate: '',
-            limitTime: '',
-            acceptDateTime: '',
-            expectDiscountDateTime: ''
+            name: '', // 汇票名称
+            draftNo: '', // 汇票号码
+            acceptorId: '', // 承兑人id
+            drawersId: '', // 出票人
+            money: '', // 金额
+            acceptDate: '', // 出票日期
+            loanLimit: '', // 最高贷款额度
+            serviceRate: '', // 服务费率
+            serviceMoney: '', // 服务费
+            interestRate: '', // 利率
+            interest: '', // 利息
+            picUrls: [], // 汇票名称
+            expectDiscountDate: '', // 预计贴现日
+            issueDate: '', // 承兑日期
+            expireDate: '' // 到期日期
+            // limitTime: '', //
+            // acceptDateTime: '', //
+            // expectDiscountDateTime: ''//
           }
         ]
       },
-      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)
-            }
-          }
+      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.$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: {
+    // this.loadData()
+  },
+  methods: {
+    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
+      )
+      if (this.form.name === '' || temporaryList === '') {
+        this.form.contractNo = ''
+      } else {
+        this.form.contractNo = temporaryList[0].contractNo
       }
-    }).then((res) => {
-      this.acceptorList = res.data.result
-      this.acceptorName = Array.from(this.acceptorList, ({ name }) => name)
-    })
-    this.$request({
-      url: '/api/Drawer/search',
-      method: 'post',
-      data: {
-        pageIndex: 1,
-        pageSize: 100
+    },
+    onAdd() {
+      this.form.contractDrafts.push({
+        name: '', // 汇票名称
+        draftNo: '', // 汇票号码
+        acceptorId: '', // 承兑人id
+        drawersId: '', // 出票人
+        money: '', // 金额
+        acceptDate: '', // 出票日期
+        loanLimit: '', // 最高贷款额度
+        serviceRate: '', // 服务费率
+        serviceMoney: '', // 服务费
+        interestRate: '', // 利率
+        interest: '', // 利息
+        picUrls: [], // 汇票名称
+        expectDiscountDate: '', // 预计贴现日
+        issueDate: '', // 承兑日期
+        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('默认汇票禁止删除')
       }
-    }).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--
-          }
+    },
+    onSubmit(o) {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          contractSubmitApi(this.form).then(res => {
+            if (res.code === 200) {
+              // this.onBack()
+              this.$message({
+                type: 'success',
+                message: res.msg
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
         }
+      })
+    },
+    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)
       }
-    })
-    /* 调用获取当前的时间 */
-    this.loadTime()
-  },
-  methods: {
+    },
+    // 计算金额
     inputMoney(index) {
       this.getloanLimt(index)
       this.getSerMoney(index)
@@ -464,7 +442,7 @@ export default {
         issueDate
       )
     },
-    // /* 计算服务费 */
+    /* 计算服务费 */
     getSerMoney(index) {
       const {
         loanLimit,
@@ -494,231 +472,72 @@ export default {
         issueDate
       )
     },
-    onSubmit() {
-      this.$request({
-        url: '/api/Contract',
-        method: 'post',
-        data: this.form
-      }).then((res) => {
-        console.log(res)
-        this.$message({
-          message: '上传成功',
-          type: 'success'
-        })
-      })
-    },
-
-    /* 默认时间 */
-    loadTime() {
-      const myDate = new Date()
-      const wk = parseInt(Date.now() / 100000).toFixed(0) * 100000
-      const yy = String(myDate.getFullYear())
-      // let mm = myDate.getMonth() + 1
-      const mm = String(
-        myDate.getMonth() + 1 < 10
-          ? '0' + (myDate.getMonth() + 1)
-          : myDate.getMonth() + 1
-      )
-      const dd = String(
-        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
-      )
-      const nowDate = yy + '-' + mm + '-' + dd
-      this.form.contractDrafts.forEach((item) => {
-        item.acceptDate = nowDate
-        item.issueDate = nowDate
-        item.expireDate = nowDate
-        item.expectDiscountDate = nowDate
-        item.expectDiscountDateTime = wk
-        item.acceptDateTime = wk
-        const nTime = item.acceptDateTime - item.expectDiscountDateTime
-        item.limitTime = Math.floor(nTime / 86400000)
-      })
+    onBack() {
+      this.$router.go(-1)
     },
-
-    /* 合同附件上传 */
-    handlepics(res) {
-      // 解构
-      const { file } = res.data
-      this.picsArray.push(file)
-      this.form.pics = this.picsArray
-    },
-    /* 发票附件上传 */
-    handleinvoicePics(res) {
-      const { file } = res.data
-      this.invoicePicsArray.push(file)
-      this.form.invoicePics = this.invoicePicsArray
-    },
-    /* 贸易附件上传 */
-    handletradePics(res) {
-      const { file } = res.data
-      this.tradePicsArray.push(file)
-      this.form.tradePics = this.tradePicsArray
-    },
-
-    /* 上传图片到浏览器成功回调 */
-    handlepicUrls(res) {
-      // 解构
-      const { file } = res.data
-      this.filesArray.push(file)
-      this.form.contractDrafts[0].picUrls = this.filesArray
-    },
-    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
+    // 预计贴现日
+    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()
+          }
+        }
       }
     },
-
-    /* 获取服务率和利率,承兑人id */
-    getRate(index) {
-      const list = this.acceptorList.filter(
-        (item) => item.name === this.form.acceptorName
-      )
-      console.log(list)
-      this.form.contractDrafts[index].acceptorId = list[index].id
-      this.form.contractDrafts[index].interestRate = list[index].interest
-      this.form.contractDrafts[index].serviceRate = list[index].serviceRate
-    },
-    // 获取出票人id
-    getdrawersId(index, name) {
-      const drawers = this.drawersList.filter((item) => item.name === name)
-      console.log(drawers)
-      this.form.contractDrafts[index].drawersId = drawers[index].id
-      console.log(drawers[index].id)
-    },
-    addDrawer() {
-      this.$router.push({
-        path: '/form/addTicketdrawer'
-      })
-    },
-    // 新增汇票
-    adddraft() {
-      this.form.contractDrafts.push({
-        name: '',
-        draftNo: '',
-        acceptorId: '',
-        drawersId: '',
-        money: '',
-        acceptDate: '',
-        loanLimit: '',
-        serviceRate: '',
-        serviceMoney: '',
-        interestRate: '',
-        interest: '',
-        picUrls: [],
-        expectDiscountDate: '',
-        issueDate: '',
-        expireDate: '',
-        limitTime: ''
-      })
-    },
-    // 删除汇票
-    deletedraft(index) {
-      const contractDraftsLength = this.form.contractDrafts.length
-      if (contractDraftsLength > 1) {
-        this.form.contractDrafts.splice(index, 1)
-      } else {
-        this.$message.error('至少一个')
+    // 承兑日期
+    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()
+          }
+        }
       }
     },
-
-    /* 计算时间段 */
-    change(e, number) {}
-
-    // /* 获取金额 */
-    // getMoney(index) {
-    //   this.getloanLimt(index)
-    //   this.getSerMoney(index)
-    //   this.getInterMoney(index)
-    // }
-    // /* 计算最高贷款额度 */
-    // getloanLimt(i) {
-    //   if (
-    //     this.form.contractDrafts[i].money &&
-    //     this.form.contractDrafts[i].serviceRate &&
-    //     this.form.contractDrafts[i].interestRate
-    //   ) {
-    //     this.form.contractDrafts[i].loanLimit = (
-    //       ((this.form.contractDrafts[i].money /
-    //         (this.form.contractDrafts[i].serviceRate +
-    //           this.form.contractDrafts[i].interestRate)) *
-    //         this.form.contractDrafts[i].limitTime) /
-    //         360 +
-    //       1
-    //     ).toFixed(2)
-    //   }
-    // },
-    // /* 计算服务费 */
-    // getSerMoney(i) {
-    //   if (
-    //     this.form.contractDrafts[i].money &&
-    //     this.form.contractDrafts[i].serviceRate &&
-    //     this.form.contractDrafts[i].interestRate
-    //   ) {
-    //     this.form.contractDrafts[i].serviceMoney = (
-    //       ((((this.form.contractDrafts[i].money /
-    //         (this.form.contractDrafts[i].serviceRate +
-    //           this.form.contractDrafts[i].interestRate)) *
-    //         this.form.contractDrafts[i].limitTime) /
-    //         360 +
-    //         1) *
-    //         this.form.contractDrafts[i].serviceRate *
-    //         this.form.contractDrafts[i].limitTime) /
-    //       360
-    //     ).toFixed(2)
-    //   }
-    // },
-    // /* 利息*/
-    // getInterMoney(i) {
-    //   if (
-    //     this.form.contractDrafts[i].money &&
-    //     this.form.contractDrafts[i].serviceRate &&
-    //     this.form.contractDrafts[i].interestRate
-    //   ) {
-    //     this.form.contractDrafts[i].interest = (
-    //       ((((this.form.contractDrafts[i].money /
-    //         (this.form.contractDrafts[i].serviceRate +
-    //           this.form.contractDrafts[i].interestRate)) *
-    //         this.form.contractDrafts[i].limitTime) /
-    //         360 +
-    //         1) *
-    //         this.form.contractDrafts[i].interestRate *
-    //         this.form.contractDrafts[i].limitTime) /
-    //       360
-    //     ).toFixed(2)
-    //   }
-    // }
+    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">
-.contract {
-  display: flex;
-  justify-content: space-between;
+<style lang="scss" scoped>
+.box-card {
+  padding: 20px 10px;
   margin-bottom: 20px;
+  .titlesa {
+    margin-bottom: 10px;
+  }
+  .titlesa~.titlesa{
+    margin-top: 20px;
+  }
 }
-
-.form {
-  display: flex;
-  justify-content: space-around;
-}
-
-.addnew {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.addall {
-  display: flex;
-  justify-content: center;
+.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 {
-  margin: 20px 0;
+  text-align: center;
+  .addnew {
+    text-align: right;
+    margin-right: 10px;
+  }
 }
 </style>