alhj/pages/alldeatil/addbill.vue

<template>
	<view class="content">

		<view v-for="(item,index) in form.contractDrafts" :key="index">
			<view class="addtitle flex6">
				<text class="ty">汇票{{index+1}}</text>
				<text class="tde" @click="deleBill(index)">删除</text>
			</view>
			<view class="listitem">
				<text class="lys">汇票名称</text>
				<view class="inbox">
					<input type="text" v-model="item.name" placeholder="请输入汇票的名称" placeholder-style="color:#BEBDBB" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">汇票号码</text>
				<view class="inbox">
					<input type="text" v-model="item.draftNo" placeholder="请输入汇票的号码"
						placeholder-style="color:#BEBDBB" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">兑换人</text>
				<view class="chosbox">
					<uni-data-select v-model="item.acceptor" :localdata="range1" @change="changeacPerson"
						:showas="false" :plname="'搜索兑换人名称'"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">出票人</text>
				<view class="chosbox">
					<uni-data-select v-model="item.drawers" :localdata="range2" @change="changedrPerson"
						:plname="'搜索出票人名称'"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">金额</text>
				<view class="inbox">
					<input type="digit" v-model="item.money" placeholder="请输入汇票的金额" placeholder-style="color:#BEBDBB"
						@blur="getMoney" @input="getMoneyIndex(index)" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">承兑日期</text>
				<view class="calender" @click="openTime(index,1)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.acceptDate}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">出票日期</text>
				<view class="calender" @click="openTime(index,2)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.issueDate}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">汇票到期日</text>
				<view class="calender" @click="openTime(index,3)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.expireDate}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">预计贴现日</text>
				<view class="calender" @click="openTime(index,4)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.expectDiscountDate}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">最高贷款额度</text>
				<view class="inbox">

					<input type="text" v-model="item.loanLimit" placeholder="自动计算得出" placeholder-style="color:#1F242A"
						disabled="true" />
				</view>
			</view>
			<view class="flex4">
				<view class="listitem">
					<text class="lys">服务费率</text>
					<view class="inbox">
						<input type="digit" v-model="item.serviceRate" placeholder="显示对于费率"
							placeholder-style="color:#BEBDBB" @blur="getserviceRate"
							@input="getserviceRateIndex(index)" />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">服务费</text>
					<view class="inbox">
						<input type="text" v-model="item.serviceMoney" placeholder="自动计算得出"
							placeholder-style="color:#BEBDBB" disabled="true" />
					</view>

				</view>
			</view>
			<view class="flex4">
				<view class="listitem">
					<text class="lys">利率</text>
					<view class="inbox">
						<input type="digit" v-model="item.interestRate" placeholder="显示对于利率"
							placeholder-style="color:#BEBDBB" @blur="getinterestRate"
							@input="getinterestRateIndex(index)" />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">利息</text>
					<view class="inbox">
						<input type="text" v-model="item.interest" placeholder="自动计算得出"
							placeholder-style="color:#BEBDBB" disabled="true" />
					</view>
				</view>
			</view>
			<view class="listitem">
				<view class="" style="display: flex;align-content: center;">
					<text class="lys">上传附件</text>
					<text
						style="font-size: 24rpx; color:#D05C39;padding-top: 45rpx;padding-left: 20rpx;">*支持上传pdf、jpg/jpeg、png格式</text>
				</view>

				<view class="inbox" style="border: none;padding-bottom: 0;" @click="checkIndex(index)">
					<u-upload :fileList="item.picUrling" @afterRead="afterRead" @delete="deletePic" :name="index+4"
						multiple :maxCount="10" width="100" height="100"></u-upload>
				</view>
			</view>
		</view>
		<view class="addnewbill" @click="addNewBill">
			+ 新增汇票
		</view>
		<view class="safebt"></view>
		<view class="newbill flex1">
			<view class="newbillbtn">
				<text>确认上传</text>
			</view>

		</view>
		<u-datetime-picker :show="dateshow" mode="date" @confirm="confirm" @cancel="closeDate" v-model="start">
		</u-datetime-picker>
	</view>
</template>

<script>
	let that
	import {
		mainUrl
	} from '@/http/baseUrl.js';
	import calllips from "@/componet/calllips/calllips.vue"
	export default {
		components: {
			calllips
		},
		data() {
			return {

				editall: false,
				quan: false,
				dateshow: false,
				opdanum: '',
				state: '',
				index: 0,
				start: Number(new Date()),
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				allindex: 0,
				form: {
					name: '',
					supplierId: '',
					invoicePics: [],
					pics: [],
					tradePics: [],
					contractDrafts: [{
						name: '',
						draftNo: '',
						acceptor: '',
						acceptorId: '',
						drawersId: '',
						drawers: '',
						money: '',
						acceptDate: '',
						issueDate: '',
						expireDate: '',
						loanLimit: '',
						expectDiscountDate: '',
						picUrls: [],
						picUrling: [],
						serviceRate: '',
						interestRate: '',
						interest: '',
						serviceMoney: '',
						limitTime: 0,
						expectDiscountDateTime: 0,
						expectDiscountDate: 0
					}, ],
				},

				range1: [],
				range2: [],
				myindex: 0,
				sindex: 0,
				rindex: 0
			}
		},
		onLoad() {
			that = this
			if(o.obj){
				this.form.contractDrafts=JSON.parse(o.obj)
			}
			this.init()
			this.form.supplierId = uni.getStorageSync('supplierId')
			// console.log(this.form.supplierId,778)
			this.loadTime()

		},
		onshow(){
			
		},
		methods: {
			loadTime() {
				let myDate = new Date()
				// let wk = Date.parse(new Date());
				let wk = myDate.getTime()
				console.log(wk)
				let yy = String(myDate.getFullYear())
				// let mm = myDate.getMonth() + 1
				let mm = String(myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1)
				let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
				let 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.issueDateTime = wk
					let nTime = item.expectDiscountDateTime - item.issueDateTime
					item.limitTime = Math.floor(nTime / 86400000) + 1;
				})
			},
			init() {
				// 承兑人列表
				uni.$u.http.post('/api/Acceptor/search', {

				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.range1 = res.result
					// for(let i in this.range1){

					// }
					this.range1.forEach((item, index) => {
						this.range1[index].value = index
						this.range1[index].text = item.name
					})
				}).catch((err) => {})
				// 出票人列表
				uni.$u.http.post('/api/Drawer/search', {

				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.range2 = res.result
					this.range2.forEach((item, index) => {
						this.range2[index].value = index
						this.range2[index].text = item.name
					})
				}).catch((err) => {})
			},
			deleBill(index){
				uni.showModal({
					title:"提示",
					content:"是否确认删除?",
					success:(res)=>{
						if (res.confirm) {
							that.form.contractDrafts.splice(index,1)
						}
						
					}
				})
				
			},
			getinterestRateIndex(index) {
				this.rindex = index
			},
			getinterestRate(event) {
				this.form.contractDrafts[this.rindex].interestRate = Number(event.detail.value)
				this.getloanLimt(this.rindex)
				this.getInterMoney(this.rindex)
				this.getSerMoney(this.rindex)
			},
			getserviceRateIndex(index) {
				this.sindex = index
			},
			getserviceRate(event) {
				this.form.contractDrafts[this.sindex].serviceRate = Number(event.detail.value)
				this.getloanLimt(this.sindex)
				this.getInterMoney(this.sindex)
				this.getSerMoney(this.sindex)
			},
			getMoneyIndex(index) {
				this.myindex = index
			},
			getMoney(event) {
				this.form.contractDrafts[this.myindex].money = Number(event.detail.value)
				this.getloanLimt(this.myindex)
				this.getSerMoney(this.myindex)
				this.getInterMoney(this.myindex)
			},
			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)
				}

			},
			upAll() {
				uni.showModal({
					title: '提示',
					content: '是否上传合同？',
					success: function(res) {
						if (res.confirm) {
							let form = that.form
			
							form.contractDrafts.forEach(i => {
								if (i.name.length == 0) {
									that.$toast('请输入汇票名称')
									return
								}
								if (i.draftNo.length == 0) {
									that.$toast('请输入汇票号码')
									return
								}
								if (i.acceptor.length == 0) {
									that.$toast('请选择承兑人')
									return
								}
								if (i.drawers.length == 0) {
									that.$toast('请选择出票人')
									return
								}
								if (i.money.length == 0) {
									that.$toast('请输入金额')
									return
								}
								
								if (i.serviceRate.length == 0) {
									that.$toast('请输入服务费率')
									return
								}
								if (i.interestRate.length == 0) {
									that.$toast('请输入利率')
									return
								}
								if (i.picUrls.length == 0) {
									that.$toast('请上传附件')
									return
								}

							})
							that.range2.forEach(item => {
								form.contractDrafts.forEach(i => {
									if (that.range2[i.drawers].name == item.name) {
										i.drawersId = item.id
									}
								})
							})
							that.range1.forEach(item => {
								form.contractDrafts.forEach(i => {
									if (that.range1[i.acceptor].name == item.name) {
										i.acceptorId = item.id
									}
								})
							})
							form.contractDrafts.forEach(item=>{
								item.picUrling.forEach(i=>{
									item.picUrls.push(i.url)
								})
							})
							uni.showLoading()
							uni.$u.http.post('/api/Contract/addContractDraft', form.contractDrafts, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								that.$toast("合同上传成功")
							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
								console.log(err)
							})
						} else if (res.cancel) {}
					}
				});

			},
			addNewBill() {
				let form = [{
					name: '',
					draftNo: '',
					acceptor: '',
					acceptorId: '',
					drawersId: '',
					drawers: '',
					money: '',
					acceptDate: '',
					issueDate: '',
					expireDate: '',
					loanLimit: '',
					expectDiscountDate: '',
					picUrls: [],
					picUrling: [],
					serviceRate: '',
					interestRate: '',
					interest: '',
					serviceMoney: '',
					limitTime: 0,
					expectDiscountDateTime: 0,
					expectDiscountDate: 0
				}]
				let myDate = new Date()
				// let wk = Date.parse(new Date());
				let wk = myDate.getTime()
				console.log(wk)
				let yy = String(myDate.getFullYear())
				// let mm = myDate.getMonth() + 1
				let mm = String(myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1)
				let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
				let nowDate = yy + '-' + mm + '-' + dd
				form.forEach(item => {
					item.acceptDate = nowDate
					item.issueDate = nowDate
					item.expireDate = nowDate
					item.expectDiscountDate = nowDate
					item.expectDiscountDateTime = wk
					item.issueDateTime = wk
					let nTime = item.expectDiscountDateTime - item.issueDateTime
					item.limitTime = Math.floor(nTime / 86400000) + 1;
				})
				this.form.contractDrafts.push(form[0])
			},
			changeacPerson(e) {
				this.acceptor = e
			},
			changedrPerson(e) {
				this.drawers = e
			},
			openTime(index, value) {
				this.dateshow = true
				this.index = index
				this.opdanum = value
			},
			closeDate() {
				this.dateshow = false
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let form = this.form.contractDrafts
				if (this.opdanum == 1) {
					form[this.index].acceptDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 2) {
					form[this.index].issueDateTime = e.value
					form[this.index].issueDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 3) {
					form[this.index].expireDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 4) {
					form[this.index].expectDiscountDateTime = e.value
					let nTime = form[this.index].expectDiscountDateTime - form[this.index].issueDateTime
					form[this.index].limitTime = Math.floor(nTime / 86400000) + 1;
					form[this.index].expectDiscountDate = timeFormat(e.value, 'yyyy-mm-dd')
				}
				// console.log(this.index, this.opdanum)
				this.dateshow = false
			},
			change(e) {
				console.log("e:", e);
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			checkIndex(index) {
				this.allindex = index
				console.log(index)
			},
			// 删除图片
			deletePic(event) {
				if (event.name == 4) {
					this.form.contractDrafts[this.allindex].picUrling.splice(event.index, 1)
				} else {
					this[`fileList${event.name}`].splice(event.index, 1)
				}

			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

				if (event.name >= 4) {
					let lists = [].concat(event.file)
					let icurls = this.form.contractDrafts[this.allindex].picUrling
					let fileListLen = icurls.length
					lists.map((item) => {
						icurls.push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let obj = {

						}
						console.log(result)
						let item = icurls[fileListLen]
						icurls.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))

						fileListLen++
					}


				} else {
					let lists = [].concat(event.file)
					let fileListLen = this[`fileList${event.name}`].length
					lists.map((item) => {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}


				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: mainUrl + '/api/File', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'File',
						header: {
							"User-Agent": "apifox/1.0.0 (https://www.apifox.cn)"
						},
						formData: {
							File: JSON.stringify(url),
						},
						success: (res) => {
							console.log(res)
							let request = JSON.parse(res.data)
							setTimeout(() => {
								resolve(request.data.file)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>


<style lang="scss">
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.addtitle {
		font-weight: 600;
		padding-top: 58rpx;
		font-size: 36rpx;

		.ty {
			color: #D8AB5A;
		}

		.tde {
			color: #D05C39;
		}
	}

	.listitem {
		.lys {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			padding-top: 40rpx;
			padding-bottom: 30rpx;
		}

		.inbox {
			padding-bottom: 20rpx;
			width: 100%;
			font-size: 30rpx;
			border-bottom: 1rpx solid #E8E8E8;
		}

		.chosbox {
			border-radius: 20rpx;
			// border: 1rpx solid #BEBDBB;
		}

		.calender {
			border-radius: 20rpx;
			width: 690rpx;
			height: 80rpx;
			border-radius: 20rpx;
			border: 1rpx solid #BEBDBB;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			font-size: 32rpx;
			box-sizing: border-box;

			.canicon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.addnewbill {
		width: 200rpx;
		height: 78rpx;
		border-radius: 45rpx;
		border: 1rpx solid #E8E8E8;
		line-height: 78rpx;
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 200rpx;
	}
</style>