parts_shop_ui_LT/pages/views/warehouseDelivery/salesOrderDetails.vue

<template>
	<view style="padding-top: 1rpx;">
		<u--form labelPosition="left" :labelStyle="{color: '#fd4b09'}" :model="form" ref="form" labelWidth="150rpx"
			style="margin-top: 10rpx;padding-bottom: 130rpx;">
			<view style="width: calc(96%);margin: 0 auto;background-color: #fff;border-radius: 20rpx;">
				<u-cell-group :border="false">
					<u-cell :border="false" center title="订货信息" arrow-direction="down">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
					</u-cell>
				</u-cell-group>
				<view style="padding: 0 10rpx;">
					<u-form-item label="客户名称" prop="cname" borderBottom @click="selectCustomer">
						<u-input v-model="form.corpsName" inputAlign="right" border="none" placeholder="请选择" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="订货日期" prop="cname" borderBottom
						@click="filterAll(['businesDate','businesDate'])">
						<u-input v-model="form.businesDate" inputAlign="right" border="none" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="送货日期" prop="cname" borderBottom
						@click="filterAll(['requiredDeliveryDate','requiredDeliveryDate'])">
						<u-input v-model="form.requiredDeliveryDate" placeholder="请选择" inputAlign="right" border="none" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="销售单号" prop="cname" borderBottom>
						<u-input v-model="form.sysNo" border="none" inputAlign="right" placeholder="请输入" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="参考号" prop="cname" borderBottom>
						<u-input v-model="form.billNo" border="none" inputAlign="right" placeholder="请输入" :disabled="form.status != 6"
							disabledColor="#ffffff" />
					</u-form-item>
				</view>
			</view>
			<view
				style="width: calc(96%);margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<u-cell-group :border="false">
					<u-cell :border="false" center>
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
						<view slot="title">
							<view style="display: flex;">
								<view>产品列表({{form.orderItemsList.length}})</view>
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<view style="padding: 0 10rpx;">
					<u-cell v-for="(item,index) in form.orderItemsList" :key="index">
						<view slot="label">
							<u-row>
								<u-col span="2.9">
									<u--image :showLoading="true"
										:src="item.url?item.url:'https://td.echepei.com/file/applets/resources/parts/images/404.png'"
										width="80px" height="80px" radius="10">
									</u--image>
								</u-col>
								<u-col span="9.1">
									<view
										style="font-size: 36rpx;width: 530rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
										{{item.cname}}
									</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="color: #707070;">数量:{{item.storageInQuantity?parseFloat(item.storageInQuantity):''}}</view>
										<view v-if="form.confirmStatus == 0" style="color: #707070; color: red;"
											@click="deleteProduct(index)">
											<u-button type="error" size="mini" text="删除"></u-button>
										</view>
									</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="color: #fd4b09;">批次号：</view>
										<u-input v-model="form.orderItemsList[index].lotNo" border="none" inputAlign="right" placeholder="请输入" :disabled="form.status != 6"
											disabledColor="#ffffff" />
									</view>
								</u-col>
							</u-row>
						</view>
					</u-cell>
				</view>
			</view>
			<view
				style="width: calc(96%);margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
				<u-cell-group :border="false">
					<u-cell :border="false" center title="图片信息" arrow-direction="down">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
						<view slot="value">
							<view v-if="form.status == 2" @click.stop="saveAttachment"
								style="padding: 2rpx 20rpx;border:1rpx solid #FD4B09;border-radius: 100rpx;color: #FD4B09;">
								保存
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<view style="padding: 0 10rpx;">
					<u-upload :fileList="fileList1" :disabled="!(form.status == 2)" :deletable="form.status == 2" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
				</view>
			</view>
		</u--form>
		<view style="width: 100%;position: fixed;bottom: 0;background-color: #fff;border-top: 1rpx solid #ccc;" v-if="form.status == 2">
			<view style="width: 100%;display: flex;font-size: 24rpx;height: 80rpx;">
				<view @click="conserve"
					style="width: 100%;background-color: #FD4B09;display: grid;justify-items: center;height: 100%;">
					<u-icon name="checkmark" color="#fff"></u-icon>
					<view style="color: #fff;">确认发货</view>
				</view>
				<!-- <view
					style="width: 20%;display: grid;justify-items: center;padding: 10rpx 0;border-right: 1rpx solid #ccc;"
					@click="deleteDoc">
					<u-icon name="trash"></u-icon>
					<view>删除</view>
				</view>
				<view @click="copyDocument" style="width: 20%;display: grid;justify-items: center;">
					<u-icon name="file-text"></u-icon>
					<view>复制新增</view>
				</view>
				<view @click="conserve" v-if="form.confirmStatus == 0"
					style="width: 30%;background-color: #5ac725;display: grid;justify-items: center;">
					<u-icon name="edit-pen" color="#fff"></u-icon>
					<view style="color: #fff;">保存</view>
				</view>
				<view v-if="form.confirmStatus == 0" @click="submit(0)"
					style="width: 30%;background-color: #fd4b09;display: grid;justify-items: center;">
					<u-icon name="checkmark" color="#fff"></u-icon>
					<view style="color: #fff;">提交</view>
				</view>
				<view v-if="form.confirmStatus == 1" @click="submit(1)"
					style="width: 20%;background-color: #fd4b09;display: grid;justify-items: center;">
					<u-icon name="close" color="#fff"></u-icon>
					<view style="color: #fff;">撤销提交</view>
				</view> -->
			</view>
		</view>
		<u-datetime-picker :show="timeOpen" v-model="datetime" mode="date" @cancel="timeOpen = false"
			@confirm="confirmTiem"></u-datetime-picker>
		<u-picker :show="showOpen" :columns="columns" keyName="dictValue" @cancel="showOpen = false"
			@confirm="showPicker"></u-picker>
	</view>
</template>

<script>
	import {
		quickBilling
	} from '@/api/views/sale/index.js'
	import {
		typeSave,
		removeFile,
		submitApp,
		remind,
		confirm,
		revoke,
		removeItem,
		removeId,
		copyOrder,
		collectPayment,
		saveAtta,
		confirmReceipt
	} from '@/api/views/sale/salesOrderDetails.js'
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	import {
		dateFormat
	} from '@/common/dateFormat'
	export default {
		data() {
			return {
				form: {
					orderItemsList: []
				},
				datetime: Number(new Date()),
				timeOpen: false,
				fileList1: [],
				screen: [],
				showOpen: false,
				columns: [],
				amountNumber: {
					deliveryAll: 0,
					cost: 0,
					grossProfit: 0,
					delivery: 0,
					saleAll: 0,
					amount: 0
				}
			}
		},
		onLoad(data) {
			this.refresh(data.id)
		},
		methods: {
			receipt() {
				let this_ = this
				if (this_.fileList1.length == 0) return uni.showToast({
					icon: "none",
					title: '请完善图片信息',
					mask: true
				});
				uni.showModal({
					title: '提示',
					content: "是否确认发货",
					success: function(rest) {
						if (rest.confirm == true) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							confirmReceipt({
								id: this_.form.id,
								billStatus: 2
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: '发货成功',
									mask: true
								});
								setTimeout(function() {
									// uni.hideLoading();
									this_.refresh(this_.form.id)
								}, 1000);
							}).catch(() => {
								uni.hideLoading();
							})
						}
					}
				})
			},
			newCompany() {
				uni.$u.route('/pages/views/product/createCompany', {
					code: "account",
					title: "收款账户"
				});
			},
			calculationContract() {
				let data = {
					purchaseAmount: this.form.purchaseAmount ? Number(this.form.purchaseAmount) : 0,
					thisUsedProfit: this.form.thisUsedProfit ? Number(this.form.thisUsedProfit) : 0
				}
				this.form.orderAmount = data.purchaseAmount - data.thisUsedProfit
			},
			getMap() {
				let this_ = this
				uni.chooseLocation({
					success: function(res) {
						this_.$set(this_.form, "arrivalAddress", res.address)
					}
				});
			},
			copyDocument() {
				let form = {
					...this.form,
					orderFilesList: this.fileList1
				}
				if (form.orderFilesList.length > 0) {
					form.orderFilesList.forEach(item => delete item.status)
				}
				let this_ = this
				uni.showModal({
					title: '提示',
					content: "是否确认复制新增",
					success: function(rest) {
						if (rest.confirm == true) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							copyOrder(form).then(res => {
								uni.hideLoading();
								uni.showToast({
									icon: "none",
									title: '复制新增成功',
									mask: true
								});
								this_.form = res.data
								this_.fileList1 = res.data.orderFilesList
								this_.amountNumber = {
									deliveryAll: 0, //送货总数量
									cost: 0, //成本
									grossProfit: 0, //毛利
									delivery: 0, //送货
									saleAll: 0, //销售数量
									amount: 0
								}
								for (let item of this_.form.orderItemsList) {
									this_.amountNumber.saleAll += Number(item.storageInQuantity)
									this_.amountNumber.cost += Number(item.storageInQuantity) * Number(
										item.purchasePrice)
									this_.amountNumber.delivery += Number(item.actualQuantity)
									this_.amountNumber.deliveryAll += Number(item.actualQuantity)
									this_.amountNumber.amount += Number(item.amount)
									this_.amountNumber.grossProfit += Number(item.amount) - (item
										.purchasePrice ? Number(item.storageInQuantity) * Number(
											item.purchasePrice) : 0)
								}
								this.form.purchaseAmount = this.amountNumber.amount
							})
						}
					}
				})
			},
			deleteDoc() {
				if (this.form.id) {
					let this_ = this
					if (this_.form.confirmStatus == 1) {
						return uni.showToast({
							icon: "none",
							title: '禁止删除',
							mask: true
						});
					}
					uni.showModal({
						title: '提示',
						content: "是否确认删除",
						success: function(rest) {
							if (rest.confirm == true) {
								removeId({
									id: this_.form.id
								}).then(res => {
									uni.showToast({
										icon: "none",
										title: '删除成功',
										mask: true
									});
									setTimeout(function() {
										uni.navigateBack()
									}, 1000);
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '未保存',
						mask: true
					});
				}
			},
			deleteProduct(index) {
				let this_ = this
				if (this_.form.orderItemsList[index].id) {
					uni.showModal({
						title: '提示',
						content: "是否确认删除",
						success: function(rest) {
							if (rest.confirm == true) {
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								removeItem({
									itemId: this_.form.orderItemsList[index].id
								}).then(res => {
									uni.hideLoading();
									uni.showToast({
										icon: "none",
										title: '删除成功',
										mask: true
									});
									this_.form.orderItemsList.splice(index, 1)
								}).catch(err => {
									uni.hideLoading();
								})
							}
						}
					})
				} else {
					this_.form.orderItemsList.splice(index, 1)
				}
			},
			//时间确认选择
			confirmTiem(e) {
				this.form[this.screen[1]] = dateFormat(new Date(e.value), "YYYY-MM-DD HH:mm:ss")
				this.timeOpen = false
			},
			// 下拉选择
			showPicker(e) {
				this.form[this.screen[1]] = e.value[0].dictValue
				this.showOpen = false
			},
			//集合筛选条件
			filterAll(screen) {
				if (screen[1] !== "requiredDeliveryDate") return uni.showToast({
					icon: "none",
					title: '禁止操作',
					mask: true
				});
				if (this.form.status != 6) return uni.showToast({
					icon: "none",
					title: '禁止操作',
					mask: true
				});
				this.screen = screen
				switch (screen[1]) {
					case "businesDate":
						this.timeOpen = true
						break;
					case "requiredDeliveryDate":
						this.timeOpen = true
						break;
					case "advanceCollectionDate":
						this.timeOpen = true
						break;
					case "account":
						this.$u.api.getWorkDicts('account').then(res => {
							this.columns = [res.data]
							this.showOpen = true
						})
						break;
					case "settlmentAmount":
						uni.$u.route('/pages/views/salesSlip/collectionList', this.form);
						break;
				}
			},
			refresh(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				typeSave({
					id: id
				}).then(res => {
					this.form = res.data
					this.fileList1 = res.data.orderFilesList
					this.amountNumber = {
						deliveryAll: 0, //送货总数量
						cost: 0, //成本
						grossProfit: 0, //毛利
						delivery: 0, //送货
						saleAll: 0, //销售数量
						amount: 0
					}
					for (let item of this.form.orderItemsList) {
						this.amountNumber.saleAll += Number(item.storageInQuantity)
						this.amountNumber.cost += Number(item.storageInQuantity) * Number(item.purchasePrice)
						this.amountNumber.delivery += Number(item.actualQuantity)
						this.amountNumber.deliveryAll += Number(item.actualQuantity)
						this.amountNumber.amount += Number(item.amount)
						this.amountNumber.grossProfit += Number(item.amount) - (item.purchasePrice ? Number(item
							.storageInQuantity) * Number(item.purchasePrice) : 0)
					}
					this.form.purchaseAmount = this.amountNumber.amount
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				})
			},
			//确认收款
			confirmReceipt() {
				let this_ = this
				let form = {
					...this_.form,
					orderFilesList: this_.fileList1
				}
				if (form.orderFilesList.length > 0) {
					form.orderFilesList.forEach(item => delete item.status)
				}
				if (!form.currentAmount) {
					return uni.showToast({
						icon: "none",
						title: '本次收款金额不能为空',
						mask: true,
						duration: 2000
					});
				}
				if (!form.account) {
					return uni.showToast({
						icon: "none",
						title: '未选择收款账户',
						mask: true,
						duration: 2000
					});
				}
				uni.showModal({
					title: '是否确认收款',
					content: '本次收款金额' + form.currentAmount,
					success: function(rest) {
						if (rest.confirm == true) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							collectPayment(form).then(res => {
								uni.showToast({
									icon: "none",
									title: '收款成功',
									mask: true,
									duration: 2000
								});
								setTimeout(function() {
									uni.hideLoading();
									this_.refresh(res.data.id)
								}, 1000);
							})
						}
					}
				})
			},
			//保存附件
			saveAttachment() {
				let form = {
					pid: this.form.id,
					orderFilesList: this.fileList1
				}
				if (form.orderFilesList.length > 0) {
					form.orderFilesList.forEach(item => delete item.status)
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				saveAtta(form).then(res => {
					uni.showToast({
						icon: "none",
						title: '保存成功',
						mask: true
					});
					let _this = this
					setTimeout(function() {
						uni.hideLoading();
						_this.refresh(res.data.id)
					}, 1000);
				})
			},
			//保存
			conserve() {
				let form = {
					...this.form,
					billStatus:2,
					orderFilesList: this.fileList1
				}
				if (form.orderFilesList.length > 0) {
					form.orderFilesList.forEach(item => delete item.status)
				}
				uni.showLoading({
					title: '发货中',
					mask: true
				});
				quickBilling(form).then(res => {
					uni.showToast({
						icon: "none",
						title: '发货成功',
						mask: true
					});
					let _this = this
					setTimeout(function() {
						uni.hideLoading();
						_this.refresh(res.data.id)
					}, 1000);
				})
			},
			//提交
			submit(type) {
				let form = {
					...this.form,
					orderFilesList: this.fileList1
				}
				let this_ = this
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				if (type == 0) {
					remind(form).then(res => {
						uni.hideLoading();
						if (res.data) {
							uni.showModal({
								title: '提示',
								content: res.data,
								success: function(rest) {
									if (rest.confirm == true) {
										uni.showLoading({
											title: '提交中',
											mask: true
										});
										confirm(form).then(resth => {
											uni.showToast({
												icon: "none",
												title: '提交成功',
												mask: true
											});
											setTimeout(function() {
												// uni.hideLoading();
												this_.refresh(resth.data.id)
											}, 1000);
										})
									}
								}
							})
						} else {
							uni.showLoading({
								title: '提交中',
								mask: true
							});
							confirm(form).then(rest => {
								uni.showToast({
									icon: "none",
									title: '提交成功',
									mask: true
								});
								setTimeout(function() {
									uni.hideLoading();
									this_.refresh(rest.data.id)
								}, 1000);
							})
						}
					})
				} else if (type == 1) {
					revoke(form).then(res => {
						uni.showToast({
							icon: "none",
							title: '撤销成功',
							mask: true
						});
						setTimeout(function() {
							uni.hideLoading();
							this_.refresh(res.data.id)
						}, 1000);
					})
				}
			},
			//客户选择返回触发
			otherFun(customer) {
				this.form.corpsName = customer.cname
				this.form.corpId = customer.id
			},
			selectProduct() {
				if (this.form.confirmStatus == 0) {
					this.$u.route('/pages/views/salesSlip/selectProduct', this.form);
				}
			},
			//商品选择返回
			getProduct(dataList) {
				for (let item of dataList) {
					this.form.orderItemsList.push({
						...item
					})
				}
				this.amountNumber = {
					deliveryAll: 0, //送货总数量
					cost: 0, //成本
					grossProfit: 0, //毛利
					delivery: 0, //送货
					saleAll: 0, //销售数量
					amount: 0
				}
				for (let item of this.form.orderItemsList) {
					this.amountNumber.saleAll += Number(item.storageInQuantity)
					this.amountNumber.cost += Number(item.storageInQuantity) * Number(item.purchasePrice)
					this.amountNumber.delivery += Number(item.actualQuantity)
					this.amountNumber.deliveryAll += item.actualQuantity ? Number(item.actualQuantity) : 0
					this.amountNumber.amount += Number(item.amount)
					this.amountNumber.grossProfit += Number(item.amount) - (item.purchasePrice ? Number(item
						.storageInQuantity) * Number(item.purchasePrice) : 0)
				}
				this.form.purchaseAmount = this.amountNumber.amount
			},
			selectCustomer() {
				this.$u.route('/pages/views/salesSlip/selectCustomer', {
					corpType: 'KH'
				});
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				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',
						sort: this.fileList1.length,
						fileName: JSON.parse(result).data.originalName,
						url: JSON.parse(result).data.link
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' +
								clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			// 删除图片
			deletePic(event) {
				let this_ = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: function(rest) {
						if (rest.confirm == true) {
							if (this_[`fileList${event.name}`][event.index].id) {
								removeFile({
									ids: this_[`fileList${event.name}`][event.index].id
								}).then(res => {
									this_[`fileList${event.name}`].splice(event.index, 1)
								})
							} else {
								this_[`fileList${event.name}`].splice(event.index, 1)
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-cell__body {
		padding: 20rpx 10rpx;
	}
</style>