yiliangyiyun-app/pages/reimbursement/request_funds.vue

<template>
	<view class="content">
		<view class='wrap'>
			<view class="xinxi" v-if="reType == 2 || expensesType == '2'" style="font-size: 28rpx; ">请款信息</view>
			<view class="xinxi" v-if="reType == 1 || expensesType == '1'" style="font-size: 28rpx; ">收款信息</view>
			<view class="c-row">
				<view class="title">用途</view>
				<view class="con-list">
					<view @click='show=true'>{{detailData.purpose}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
					<u-picker :range="purposeList" range-key="purpose" @confirm='ltCheck($event)' v-model="show"
						mode="selector">
					</u-picker>
				</view>
			</view>
			<view class="c-row" v-if="detailData.purpose == '库点费用'">
				<view class="title">仓库名称</view>
				<view class="con-list">
					<view @click='selectWare()'>{{detailData.warehouseName?detailData.warehouseName:"请选择仓库名称"}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
				</view>
			</view>
			<view class="c-row" v-if="detailData.purpose == '库点费用'&&reType == 2">
				<view class="title">仓储费</view>
				<view class="con-list">
					<view @click='show3=true'>{{detailData.flag}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
				</view>
			</view>
			<u-picker :range="typeList1" range-key="value" @confirm='typeCheck1($event)' v-model="show3"
				mode="selector">
			</u-picker>
			<view class="c-row" v-if="detailData.purpose == '库点费用'">
				<view class="title">类型</view>
				<view class="con-list">
					<view @click='show2=true'>{{detailData.wareExpenseType?detailData.wareExpenseType:"请选择类型"}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
				</view>
			</view>
			<u-picker :range="typeList" range-key="value" @confirm='typeCheck($event)' v-model="show2"
				mode="selector">
			</u-picker>
			<view class="c-row" v-if="detailData.purpose == '合同费用'">
				<view class="title">合同编号</view>
				<view class="con-list">
					<view @click='selectCon'>{{detailData.contractNo?detailData.contractNo:"请选择合同编号"}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
				</view>
			</view>
			<view class="c-row">
				<view class="title">费用名称</view>
				<view class="con-list">
					<input v-model='detailData.expenseName' placeholder="输入费用名称,1-15个字"></input>
				</view>
			</view>
			<view v-if="reType == 2 || expensesType == '2'" class="c-row">
				<view class="title">付款方名头</view>
				<view class="con-list">
					<input v-model='detailData.payerHeader' maxlength='25' placeholder="输入付款方名头"></input>
				</view>
			</view>
			<view v-show="reType == 2&&detailData.purpose=='经营性费用' || expensesType == '2'&&detailData.purpose=='经营性费用'" class="c-row">
				<view class="title">所属名头</view>
				<view class="con-list">
					<view @click='show1=true'>{{detailData.belongName?detailData.belongName:"请选择所属名头"}}
						<u-icon name="arrow-right" color=""></u-icon>
					</view>
				</view>
			</view>
			<u-picker :range="namelist" range-key="name" @confirm='confirmname($event)' v-model="show1"
				mode="selector">
			</u-picker>
			<view class="c-row">
				<view class="title">金额（元）</view>
				<view class="con-list">
					<input type='digit' v-if="reType == '2' || expensesType == '2'" v-model='detailData.amountMoney'
						placeholder="输入请款金额"></input>
					<input type='digit' v-if="reType == '1' || expensesType == '1'" v-model='detailData.amountMoney'
						placeholder="输入收款金额"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="left">备注</view>
			</view>
			<view style='position:relative;' class="wrap no-boder">
				<u-input class='textarea' v-model="detailData.remark" :type="typeRemark" :border="border"
					placeholder="选填,不超过150字" :height="height" :auto-height="autoHeight" maxlength="150" />
				<view class="remark">
					{{detailData.remark?detailData.remark.length:'0'}}/150个字
				</view>
			</view>
			<view class="c-row">
				<view class="title">附件（选填）</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for='(item,index) in imglist2' v-if="imglist2 && imglist2.length > 0"
					style="position: relative;margin-left: 20rpx;">
					<view class="delete_img" @click="deleteImg(index)">X</view>
					<image :src="item.appendixPath" mode="" style="width: 100px;height: 100px;"></image>
				</view>
				<view class="biankuang" @click="uploadClick" v-if="imglist2.length < 30">
					<view class="tubiao">
						<image class="upload" src="../../static/img/oa_office/upload.png" mode="">
						</image>
						<view class="" style="color:#8c8f98;">
							选择图片
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="reType == 2 || expensesType == '2'" class='wrap margin-bottom'>
			<view class="xinxi"  style="font-size: 28rpx; ">收款账户信息</view>
			<view class="c-row">
				<view class="title">收款方</view>
				<view class="con-list">
					<input v-model='detailData.payee' placeholder="输入收款方"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">账户</view>
				<view class="con-list">
					<input v-model='detailData.accountNumber' placeholder="输入账户"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">开户行</view>
				<view class="con-list">
					<input v-model='detailData.bank' placeholder="输入开户行"></input>
				</view>
			</view>
			<view class="c-row">
				<view class="title">开户支行</view>
				<view class="con-list">
					<input v-model='detailData.bankBranch' placeholder="输入开户支行"></input>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="bottom-btn">
			<view @click="submit()" class="btn">提交</view>
		</view>
	</view>
</template>

<script>
	import * as config from '../../config'
	export default {
		data() {
			return {
				show: false,
				show2:false,
				showWare: false,
				detailData: {
					flag:'否',
					purpose: '库点费用',
					remark: "",
					wareExpenseType:'杂费',
					warehouseName: '选择仓库',
					expenseName: '',
					amountMoney: '',
					expensesPurpose: '3',
					expensesType: '',
					// contractId: '',
					fieldName: '',
					identification: '1',
					costType: '3',
					agent: '',
					totalDistribution: '0',
				},
				fileList1: [],
				show1:false,
				warehouseType: '1',
				typeRemark: 'textarea',
				border: true,
				show3:false,
				imglist: [], //存
				imglist2: [], //展示
				height: 150,
				autoHeight: true,
				purposeList: [{
						purpose: "合同费用"
					},
					{
						purpose: "库点费用"
					},
					{
						purpose: "经营性费用"
					},
				],
				typeList1:[
					{value: "是"},
					{value: "否"},
				],
				typeList:[
					{value: "杂费"},
					{value: "电费"},
					{value: "煤费"},
					{value: "人工费"},
				],
				namelist:[
					{name: "黑龙江中天昊元贸易有限公司"},
					{name: "中天昊元-建发合营"},
					{name: "中天昊元-六水香合营"},
					{name: "中天昊元-昊友合营"},
					{name: "黑龙江中天昊元贸易有限公司辽宁分公司"},
					{name: "黑龙江众利合粮食贸易有限公司"},
					{name: "黑龙江欣洋粮食贸易有限公司"},
					{name: "黑龙江启兴粮食贸易有限公司"},
					{name: "黑龙江鑫满仓粮食贸易有限公司"},
					{name: "黑龙江谷香粮食贸易有限公司"},
					{name: "黑龙江益储益运粮食贸易有限公司"},
					{name: "黑龙江海天粮食农业发展有限公司"},
					{name: "黑龙江中天绿粮供应链管理有限公司"},
					{name: "中天昊元（海南）国际贸易有限公司"},
					{name: "克东县嘉达建筑装潢有限责任公司"},
					{name: "克东县金博粮食有限公司"},
					{name: "克东县安正商贸有限公司"},
					{name: "克东县万祥农业科技开发有限公司"},
					{name: "克东县万润运输有限公司"},
					{name: "黑龙江大金仓农业科技有限公司"},
					{name: "克东县华祥通讯管线工程有限公司"},
					{name: "黑龙江峰海粮食贸易有限公司(季度报 增值税季度）"},
					{name: "黑龙江鑫宝仓粮食贸易有限公司"},
					{name: "黑龙江中仓粮食贸易有限公司"},
					{name: "黑龙江晟鸿泰粮食贸易有限公司"},
					{name: "黑龙江新粮仓粮食贸易有限公司"},
					{name: "齐齐哈尔米林设备制造有限公司"},
				],
				reType: "",
				flag: "",
				warehouseInfo: {},
				contractNoInfo: {},
			}
		},
		onLoad(options) {
			this.reType = options.reType
			this.expensesType = options.expensesType
			if(this.reType==2||this.expensesType==2){
				uni.setNavigationBarTitle({
						title: '请款'
					});
			}
			this.id = options.id
			if (this.id) {
				this.getRequest()
			} else {
				return
			}
		},
		onShow() {
			this.warehouseInfo = uni.getStorageSync('theWarehouse');
			if (this.warehouseInfo && this.detailData.purpose == "库点费用") {
				this.detailData.warehouseName = this.warehouseInfo.warehouseName
				this.$forceUpdate()
			}
			this.contractNoInfo = uni.getStorageSync('reContractNo');
			if (this.contractNoInfo && this.detailData.purpose == "合同费用") {
				this.detailData.contractId = this.contractNoInfo.id
				this.detailData.contractNo = this.contractNoInfo.contractNo
				this.$api.doRequest('get', 'customerInfo/getPayeeInfo', {
					contractNo: this.detailData.contractNo
				}).then(res => {
					this.detailData.payee=res.customerType=="企业客户"?res.compName:res.customerName
					this.detailData.accountNumber=res.bankCard
					this.detailData.bank=res.bankDeposit
					this.detailData.bankBranch=res.bankDepositBranch
					this.$forceUpdate()
				})
				
			}
		},
		watch: {
			imglist: {
				handler: function() {
					this.$api.doRequest('get', 'appendix/query/getFileList', {
						appendixIds: this.imglist.toString()
					}).then(res => {
						this.imglist2 = res.data.data
					})
				},
				deep: true
			}
		},
		methods: {
			typeCheck(e){
				this.detailData.wareExpenseType=this.typeList[e[0]].value
			},
			typeCheck1(e){
				this.detailData.flag=this.typeList1[e[0]].value
			},
			afterRead(e) {
				console.log(e)
			},
			async uploadClick() {
				let baseUrlNew = config.def().baseUrlNew
				let pcUserInfo = uni.getStorageSync('pcUserInfo')
				console.log('baseUrlNew',baseUrlNew)
				if(!pcUserInfo){
					uni.showToast({
						title:"登录已失效，请重新登录"
					})
					return 
				}
				uni.chooseImage({
					count:10,
					success: (chooseImageRes) => {
						console.log('chooseImageRes',chooseImageRes)
						let files = []
						for (let item of chooseImageRes.tempFiles) {
							files.push({
								name: 'fileName',
								url : item.path
							});
						}
						console.log(files)
						for (let i = 0; i < files.length; i++) {
							uni.uploadFile({
							url: baseUrlNew + 'appendix/api/uploadFiles',
							// url: baseUrlNew+'appendix/api/uploadFiles', //仅为示例，非真实的接口地址
							// files: files[i],
							filePath:files[i].url,
							name:files[i].name,
							formData: {
								// fileName: chooseImageRes.tempFiles[0],
								companyId: pcUserInfo.compId,
								modelId: '',
								vesselId: '',
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data))
								var data = JSON.parse(uploadFileRes.data).data
								data.compId = pcUserInfo.compId
								this.$api.doRequest('post', '/appendix/api/saveFilesApp', {
									newAppendixs: [data],
									oldAppendixIds: ""
								}).then(res => {
									this.imglist.push(res.data.data[0])
									console.log(res)
								})
								console.log(uploadFileRes.data);
							},
							fail(res) {
								
								console.log(res);
							}
						});
						}
						
					}
				});
			},
			deleteImg(index) {
				this.imglist.splice(index, 1)
			},
			calculate() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.left')
				console.log(query)
			},
			ltCheck(e) {
				this.detailData.purpose = this.purposeList[e[0]].purpose
				if (this.detailData.purpose == "合同费用") {
					this.detailData.expensesPurpose = "1"
					delete this.detailData.warehouseName

				} else if (this.detailData.purpose == "库点费用") {
					this.detailData.expensesPurpose = "3"
					delete this.detailData.contractNo

				} else {
					this.detailData.expensesPurpose = "5"
					delete this.detailData.warehouseName
					delete this.detailData.contractNo
					if(this.reType == 2){
						this.show1 = true
					}
					
				}
				console.log(this.detailData)
			},
			confirmname(e) {
				this.detailData.belongName = this.namelist[e[0]].name
			},
			selectCon() {
				uni.navigateTo({
					url: '/pages/reimbursement/selectContract'
				})
			},
			selectWare() {
				uni.navigateTo({
					url: '/pages/reimbursement/selectWarehouse?warehouseType=1'
				})
			},
			submit() {
				if (!this.detailData.purpose) {
					this.$api.msg('用途不能为空')
					return
				}
				if (!this.detailData.warehouseName && this.detailData.purpose == '库点费用') {
					this.$api.msg('请选择仓库名称')
					return
				}
				if (!this.detailData.contractNo && this.detailData.purpose == '合同费用') {
					this.$api.msg('请选择合同编号')
					return
				}
				if (this.expensesType == '2') {
					if(!this.detailData.payerHeader){
						this.$api.msg('付款方不能为空')
						return
					}
				}
				if (!this.detailData.amountMoney) {
					this.$api.msg('金额不能为空')
					return
				}
				var that = this
				var title
				var theInterface
				if (that.expensesType == '1') {
					title = "确定提交收款信息？"
				} else {
					title = "确定提交请款信息？"
				}
				if (that.id) {
					theInterface = '/expenseInfo/editInfo'
					that.detailData.id = that.id
				} else {
					theInterface = '/expenseInfo/api/addInfo'
				}
				uni.showModal({
					content: title,
					showCancel: true,
					confirmText: '提交',
					success: function(res) {
						if (res.confirm) {
							that.detailData.compId = uni.getStorageSync('pcUserInfo').compId
							that.detailData.agent = uni.getStorageSync('userInfo').userName
							that.detailData.identification = that.detailData.identification
							that.detailData.costType = that.detailData.costType
							that.detailData.expensesType = that.reType
							that.detailData.fieldName = uni.getStorageSync('userInfo').userName
							that.detailData.totalDistribution = that.detailData.totalDistribution
							if (that.imglist.length > 0) {
								that.detailData.addressUrl = that.imglist.toString()
							}
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							that.$api.doRequest('post', theInterface, that.detailData)
								.then(res => {
									if (res.data.code == 200) {
										uni.hideLoading()
										that.$api.msg('提交成功')
										uni.navigateBack({
											delta: 1
										});
									} else {
										that.$api.msg(res.data.message)
									}
								})
						}
					}
				})
			},
			//获取信息
			getRequest() {
				this.$api.doRequest('get', '/expenseInfo/ExpenseInfo', {
					id: this.id,
				}).then(res => {
					if (res.data.code == 200) {
						this.detailData = res.data.data
						this.imglist = this.detailData.addressUrl.split(',')
					}
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.delete_img {
		position: absolute;
		z-index: 100;
		left: 84px;
		color: #ffffff;
		font-size: 28rpx;
		border: 1px;
		border-radius: 5rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #ff0000;
		text-align: center;
	}

	.title_b {
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
		font-size: 18px;
		font-weight: 550;
	}

	.xinxi {
		padding: 20rpx 30rpx;
	}

	.tubiao {
		margin: 0 auto;
		text-align: center;
		margin-top: 35rpx;
	}

	.biankuang {
		border: 1px dashed #AFB3BF;
		border-radius: 10rpx;
		width: 200rpx;
		height: 200rpx;
		margin-left: 20rpx;
	}

	.upload {
		width: 80rpx;
		height: 80rpx;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		flex: 1;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		color: #303133;
		line-height: 20px;
		text-align: right;
		padding-right: 10px;
		justify-content: space-between;
	}

	.wrap {
		padding-bottom: 10px;
		font-size: 14px;
		background: #fff;
		margin: 10px;
		border-radius: 10px;

		input {
			font-size: 14px;
		}

		>.title {
			padding: 10px 16px;
		}

	}

	.buns_item {
		display: flex;
		padding: 80rpx 0 50rpx 0;
		justify-content: space-around;
	}

	.but_css {
		background: #22C572;
		width: 40%;
		padding: 20rpx;
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
	}

	/deep/.u-radio-group {
		flex-direction: row-reverse;
	}

	.no-boder {
		border: 0;
	}

	.textarea {
		background: #F9F9FA;
		border: 1px solid #EEEEEE;
	}

	.remark {
		position: absolute;
		right: 10px;
		bottom: 20px;
		color: #AFB3BF;
	}

	.submit {
		width: 100%;
		background: #2c8ac5;
		border-radius: 10rpx;
	}

	.bottom-btn {
		padding: 30rpx;
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		z-index: 9999;
	}

	.content {
		overflow: hidden;
	}

	.btn {
		border-radius: 50rpx;
		padding: 20rpx 0;
		background: #22C572;
		color: #fff;
		font-size: 32rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	.margin-bottom{
		margin-bottom:84px;
	}
</style>