7.23代码

src/store/modules/user.js

@@ -1,104 +1,131 @@
-import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
-import { resetRouter } from '@/router'
+import {
+	login,
+	logout,
+	getInfo
+} from '@/api/user'
+import {
+	getToken,
+	setToken,
+	removeToken
+} from '@/utils/auth'
+import {
+	resetRouter
+} from '@/router'
 
 const getDefaultState = () => {
-  return {
-    token: getToken(),
-    name: '',
-    avatar: '',
-	checked:''
-  }
+	return {
+		token: getToken(),
+		name: '',
+		avatar: '',
+		checked: ''
+	}
 }
 
 const state = getDefaultState()
 
 const mutations = {
-  RESET_STATE: (state) => {
-    Object.assign(state, getDefaultState())
-  },
-  SET_TOKEN: (state, token) => {
-    state.token = token
-  },
-  SET_NAME: (state, name) => {
-    state.name = name
-  },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
-  },
-  getAdmin: (state, data) => {
-    state.checked = data
-  },
+	RESET_STATE: (state) => {
+		Object.assign(state, getDefaultState())
+	},
+	SET_TOKEN: (state, token) => {
+		state.token = token
+	},
+	SET_NAME: (state, name) => {
+		state.name = name
+	},
+	SET_AVATAR: (state, avatar) => {
+		state.avatar = avatar
+	},
+	getAdmin: (state, data) => {
+		state.checked = data
+	},
 }
 
 const actions = {
 	getAdmin: (state, data) => {
-	  state.checked = data
+		state.checked = data
+	},
+	// user login
+	login({
+		commit
+	}, userInfo) {
+		const {
+			username,
+			password,
+			loginType
+		} = userInfo
+		 new Promise((resolve, reject) => {
+			login({
+				account: username.trim(),
+				password: password,
+				loginType: loginType
+			}).then(response => {
+				const {
+					data
+				} = response
+				console.log('2', data)
+				commit('SET_TOKEN', data)
+				setToken(data)
+				resolve()
+			}).catch(error => {
+				reject(error)
+			})
+		})
 	},
-  // user login
-  login({ commit }, userInfo) {
-    const { username, password,loginType } = userInfo
-    return new Promise((resolve, reject) => {
-      login({ account: username.trim(), password: password,loginType:loginType }).then(response => {
-        const { data } = response
-        console.log('2',data)
-        commit('SET_TOKEN', data)
-        setToken(data)
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
 
-  // get user info
-  // getInfo({ commit, state }) {
-  //   return new Promise((resolve, reject) => {
-  //     getInfo(state.token).then(response => {
-  //       const { data } = response
+	// get user info
+	// getInfo({ commit, state }) {
+	//   return new Promise((resolve, reject) => {
+	//     getInfo(state.token).then(response => {
+	//       const { data } = response
 
-  //       if (!data) {
-  //         return reject('Verification failed, please Login again.')
-  //       }
+	//       if (!data) {
+	//         return reject('Verification failed, please Login again.')
+	//       }
 
-  //       const { name, avatar } = data
+	//       const { name, avatar } = data
 
-  //       commit('SET_NAME', name)
-  //       commit('SET_AVATAR', avatar)
-  //       resolve(data)
-  //     }).catch(error => {
-  //       reject(error)
-  //     })
-  //   })
-  // },
+	//       commit('SET_NAME', name)
+	//       commit('SET_AVATAR', avatar)
+	//       resolve(data)
+	//     }).catch(error => {
+	//       reject(error)
+	//     })
+	//   })
+	// },
 
-  // user logout
-  logout({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        removeToken() // must remove  token  first
-        resetRouter()
-        commit('RESET_STATE')
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
+	// user logout
+	logout({
+		commit,
+		state
+	}) {
+		return new Promise((resolve, reject) => {
+			logout(state.token).then(() => {
+				removeToken() // must remove  token  first
+				resetRouter()
+				commit('RESET_STATE')
+				resolve()
+			}).catch(error => {
+				reject(error)
+			})
+		})
+	},
 
-  // remove token
-  resetToken({ commit }) {
-    return new Promise(resolve => {
-      removeToken() // must remove  token  first
-      commit('RESET_STATE')
-      resolve()
-    })
-  }
+	// remove token
+	resetToken({
+		commit
+	}) {
+		return new Promise(resolve => {
+			removeToken() // must remove  token  first
+			commit('RESET_STATE')
+			resolve()
+		})
+	}
 }
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+	namespaced: true,
+	state,
+	mutations,
+	actions
 }

src/utils/request.js

@@ -1,94 +1,107 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import {
+	MessageBox,
+	Message
+} from 'element-ui'
 import store from '@/store'
-import { getToken } from '@/utils/auth'
+import {
+	getToken
+} from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: 'https://ht.9026.com/', // url = base url + request url
-  // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 60000 ,// request timeout
+	baseURL: 'https://ht.9026.com/', // url = base url + request url
+	// withCredentials: true, // send cookies when cross-domain requests
+	timeout: 60000, // request timeout
 
 
 })
 
 // request interceptor
 service.interceptors.request.use(
-  config => {
-    // do something before request is sent
-        config.headers['Content-Type'] = 'application/json'
-				// config.headers['Content-Type']='charset=utf-8'
-		config.headers = {'User-Agent-type': 'apifox/1.0.0 (https://www.apifox.cn)'}
-    if (store.getters.token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
-      let string =getToken()
-      let obj=eval('('+string+')')
-      config.headers['Authorization']=obj.token
-      console.log(obj.token)
-      // config.headers['Authorization'] = getToken()
+	config => {
+		// do something before request is sent
+		config.headers['Content-Type'] = 'application/json'
+		// config.headers['Content-Type']='charset=utf-8'
+		config.headers = {
+			'User-Agent-type': 'apifox/1.0.0 (https://www.apifox.cn)'
+		}
+		let string = getToken()
+		if(string){
+			let obj =JSON.parse(string)
+			console.log(obj.token,'obj')
+			config.headers['Authorization'] = obj.token
+		}
+		if (store.getters.token) {
+			// let each request carry token
+			// ['X-Token'] is a custom headers key
+			// please modify it according to the actual situation
+			let string = getToken()
+			let obj = eval('(' + string + ')')
+			config.headers['Authorization'] = obj.token
+			console.log(obj.token)
+			// config.headers['Authorization'] = getToken()
 
-    }
-    return config
-  },
-  error => {
-    // do something with request error
-    console.log(error) // for debug
-    return Promise.reject(error)
-  }
+		}
+		return config
+	},
+	error => {
+		// do something with request error
+		console.log(error) // for debug
+		return Promise.reject(error)
+	}
 )
 
 // response interceptor
 service.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-  */
+	/**
+	 * If you want to get http information such as headers or status
+	 * Please return  response => response
+	 */
 
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
-  response => {
-    const res = response.data
-    console.log(res)
-    // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 200) {
-      Message({
-        message: res.msg || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
+	/**
+	 * Determine the request status by custom code
+	 * Here is just an example
+	 * You can also judge the status by HTTP Status Code
+	 */
+	response => {
+		const res = response.data
+		console.log(res)
+		// if the custom code is not 20000, it is judged as an error.
+		if (res.code !== 200) {
+			Message({
+				message: res.msg || 'Error',
+				type: 'error',
+				duration: 5 * 1000
+			})
 
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-      //   // to re-login
-      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-      //     confirmButtonText: 'Re-Login',
-      //     cancelButtonText: 'Cancel',
-      //     type: 'warning'
-      //   }).then(() => {
-      //     store.dispatch('user/resetToken').then(() => {
-      //       location.reload()
-      //     })
-      //   })
-      // }
-      return Promise.reject(new Error(res.msg || 'Error'))
-    } else {
-      return res
-    }
-  },
-  error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: error.msg,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
+			// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+			// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+			//   // to re-login
+			//   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+			//     confirmButtonText: 'Re-Login',
+			//     cancelButtonText: 'Cancel',
+			//     type: 'warning'
+			//   }).then(() => {
+			//     store.dispatch('user/resetToken').then(() => {
+			//       location.reload()
+			//     })
+			//   })
+			// }
+			return Promise.reject(new Error(res.msg || 'Error'))
+		} else {
+			return res
+		}
+	},
+	error => {
+		console.log('err' + error) // for debug
+		Message({
+			message: error.msg,
+			type: 'error',
+			duration: 5 * 1000
+		})
+		return Promise.reject(error)
+	}
 )
 
 export default service

src/views/contracts/index.vue

@@ -59,7 +59,7 @@
 			<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">
+						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
 					</el-date-picker>
 				</div>
 			</div>

src/views/contracts/new_file.vue

@@ -1,27 +1,48 @@
 <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;" @input='getContractNo' clearable></el-input>
-				</div>
-				<div>
-					<p>合同编号</p>
-					<el-input v-model='form.contractNo' placeholder="请输入合同编号" style="width: 500px;" disabled></el-input>
-				</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"
+            @input="getContractNo"
+            clearable
+          ></el-input>
+        </div>
+        <div>
+          <p>合同编号</p>
+          <el-input
+            v-model="form.contractNo"
+            placeholder="请输入合同编号"
+            style="width: 500px"
+            disabled
+          ></el-input>
+        </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" :auto-upload="false" :on-change="handlepics">
-					<i slot="default" class="el-icon-plus"></i>
-					<div slot="file" slot-scope="{file}">
-						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-						<!-- <span class="el-upload-list__item-actions">
+      <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"></i>
+          <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>
@@ -33,22 +54,32 @@
 								<i class="el-icon-delete"></i>
 							</span>
 						</span> -->
-					</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">
-					<i slot="default" class="el-icon-plus"></i>
-					<div slot="file" slot-scope="{file}">
-						<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-						<!-- <span class="el-upload-list__item-actions">
+          </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"></i>
+          <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>
@@ -59,363 +90,526 @@
 								<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" ></i>
-					<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.tradePics" alt="">
-				</el-dialog>
-			</div>
-		</el-card>
-	
-		<div class="form" v-for="(item,index) in form.contractDrafts">
-			<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="选择日期">
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item label="出票日期">
-					<el-date-picker v-model="item.acceptDate" type="date" placeholder="选择日期" class="ipwidth">
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item label="承兑日期">
-					<el-date-picker v-model="item.issueDate" type="date" placeholder="选择日期">
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item label="到期日期">
-					<el-date-picker v-model="item.expireDate" type="date" placeholder="选择日期">
-					</el-date-picker>
-				</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="新增出票人" @click.native="addDrawer" value="" style="color: darkorange;"></el-option>
-					    <el-option v-for="item in drawersName" :label="item" :value="item"></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-option>
-					    </el-select>
-				</el-form-item>
-				
-				<el-form-item label="服务费率">
-					<el-input v-model="item.serviceRate" class="ipwidth" placeholder="服务费率"
-						style="width: 220px;" />
-				</el-form-item>
-				<el-form-item label="利率">
-					<el-input v-model="item.interestRate" class="ipwidth" placeholder="利率"
-						style="width: 220px;" />
-				</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" :file-list="fileArr" list-type="picture-card"
-								:show-file-list="true" :auto-upload="false" :before-upload="beforeUpload"
-								:on-change="handlepicUrls">
-								<i class="el-icon-plus"></i>
-							</el-upload>
-							<el-dialog :visible.sync="dialogVisible">
-								<img width="100%" :src="form.contractDrafts.picUrls" alt="">
-							</el-dialog>
-						</div>
-					</el-col>
-					
-				</el-row>
-				
-			</div>
-		</div>
-		
-		<div class="commit">
-			
-			<div class="addnew">
-				<el-button type="primary" @click="adddraft">新增汇票</el-button>
-				<el-button type="primary" @click="deletedraft">删除汇票</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>
+          </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"></i>
+          <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.tradePics" alt="" />
+        </el-dialog>
+      </div>
+    </el-card>
+
+    <div class="form" v-for="(item, index) in form.contractDrafts">
+      <el-button type="primary" @click="deletedraft(index)">删除汇票</el-button>
+      <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="
+              changeE;
+              xpectDiscountDate($event, index);
+            "
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="出票日期">
+          <el-date-picker
+            v-model="item.acceptDate"
+            type="date"
+            placeholder="选择日期"
+            class="ipwidth"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="承兑日期">
+          <el-date-picker
+            v-model="item.issueDate"
+            type="date"
+            placeholder="选择日期"
+            @change="changeIssueDate($event, index)"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="到期日期">
+          <el-date-picker
+            v-model="item.expireDate"
+            type="date"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </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="新增出票人"
+              @click.native="addDrawer"
+              value=""
+              style="color: darkorange"
+            >
+            </el-option>
+            <el-option
+              v-for="item in drawersName"
+              :label="item"
+              :value="item"
+            ></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-option>
+          </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, inde)"
+          />
+        </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"
+                :file-list="fileArr"
+                list-type="picture-card"
+                :show-file-list="true"
+                :auto-upload="false"
+                :before-upload="beforeUpload"
+                :on-change="handlepicUrls"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+              <el-dialog :visible.sync="dialogVisible">
+                <img width="100%" :src="form.contractDrafts.picUrls" alt="" />
+              </el-dialog>
+            </div>
+          </el-col>
+        </el-row>
+      </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: [
-						"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg",
-						"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/ab37cbd176e12cef2f82.jpg"
-					],
-					pics: [
-						"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg",
-						"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/ab37cbd176e12cef2f82.jpg"
-					],
-					tradePics: [
-						"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg"
-					],
-					contractDrafts: [{
-						name: "",
-						draftNo: "HP20220709-0958-02356",
-						acceptorId: '',
-						drawersId: '',
-						money: '',
-						acceptDate: "",
-						loanLimit: "",
-						serviceRate: '',
-						serviceMoney: '',
-						interestRate: '',
-						interest: '',
-						picUrls: [
-							"https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg"
-						],
-						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: [],
+      form: {
+        // 承兑人列表
+        acceptorName: [],
+        // 出票人列表
+        drawersName: [],
+        contractNo: "",
+        supplierId: 2,
+        name: "",
+        invoicePics: [
+          // "https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg",
+          // "https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/ab37cbd176e12cef2f82.jpg"
+        ],
+        pics: [
+          // "https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg",
+          // "https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/ab37cbd176e12cef2f82.jpg"
+        ],
+        tradePics: [
+          // "https:\/\/easygolf.oss-ap-southeast-6.aliyuncs.com\/golf\/2022-03\/18\/88df7532ff7de229b617.jpg"
+        ],
+        contractDrafts: [
+          {
+            name: "",
+            draftNo: "HP20220709-0958-02356",
+            acceptorId: "",
+            drawersId: "",
+            money: "",
+            acceptDate: "",
+            loanLimit: "",
+            serviceRate: "",
+            serviceMoney: "",
+            interestRate: "",
+            interest: "",
+            picUrls: [
+              "https://easygolf.oss-ap-southeast-6.aliyuncs.com/golf/2022-03/18/88df7532ff7de229b617.jpg",
+            ],
+            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);
+            },
+          },
+        ],
+      },
+    };
+  },
 
+  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[0].picUrls.push(file)
+      console.log(this.form.contractDrafts[index].picUrls);
+    },
+    getContractNo() {
+      let 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() {
+      let 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() {
+      console.log(this.form.contractDrafts[0].money);
+      this.form.contractDrafts.push({
+        name: "",
+        draftNo: "HP20220709-0958-02356",
+        acceptorId: "",
+        drawersId: "",
+        money: "",
+        acceptDate: "",
+        loanLimit: "",
+        serviceRate: "",
+        serviceMoney: "",
+        interestRate: "",
+        interest: "",
+        picUrls: [
+          "https://easygolf.oss-ap-southeast-6.aliyuncs.com/golf/2022-03/18/88df7532ff7de229b617.jpg",
+        ],
+        expectDiscountDate: "",
+        issueDate: "",
+        expireDate: "",
+      });
+    },
 
-			}
-		},
-		
-		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(file){
-				// this.form.pics.push(file)
-				console.log(this.form.pics)
-			},
-			handleinvoicePics(file){
-				// this.form.invoicePics.push(file)
-				console.log(this.form.invoicePics)
-			},
-			handletradePics(file){
-				// this.form.tradePics.push(file)
-				console.log(this.form.tradePics)
-			},
-			handlepicUrls(file){
-				// this.form.contractDrafts[0].picUrls.push(file)
-				console.log(this.form.contractDrafts[0].picUrls)
-			},
-			getContractNo(){
-				let 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(){
-				let 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",
-				});
-			},
-			
-		},
-	}
+    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);
+    //   this.form.contractDrafts[index].money = val;
+    },
+    // 利率
+    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;
-	}
-
-	.form {
-		display: flex;
-		justify-content: space-around;
-	}
-
+.contract {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
 
-	.addnew {
-		display: flex;
-		justify-content: flex-end;
-	}
+.form {
+  display: flex;
+  justify-content: space-around;
+}
 
-	.addall {
-		display: flex;
-		justify-content: center;
-	}
+.addnew {
+  display: flex;
+  justify-content: flex-end;
+}
 
-	.commit {
+.addall {
+  display: flex;
+  justify-content: center;
+}
 
-		margin: 20px 0;
-	}
+.commit {
+  margin: 20px 0;
+}
 </style>