parts_shop_ui_LT/pages/views/purchase/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>
						<u-input v-model="form.arrivalAddress" inputAlign="right" border="none" placeholder="请选择"
							:disabled="form.confirmStatus == 1" disabledColor="#ffffff">
							<template slot="suffix">
								<u-icon name="map" color="#fd4b09" @tap="getMap"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item label="采购日期" prop="cname" borderBottom
						@click="filterAll(['businesDate','businesDate'])">
						<u-input v-model="form.businesDate" inputAlign="right" border="none" placeholder="请选择" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="收货日期" prop="cname" borderBottom
						@click="filterAll(['requiredDeliveryDate','requiredDeliveryDate'])">
						<u-input v-model="form.requiredDeliveryDate" inputAlign="right" border="none" placeholder="请选择"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="计划付款日期" labelWidth="190rpx" prop="cname" borderBottom
						@click="filterAll(['advanceCollectionDate','advanceCollectionDate'])">
						<u-input v-model="form.advanceCollectionDate" inputAlign="right" border="none" placeholder="请选择"
							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>
				</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 @click="selectProduct">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
						<view slot="title">
							<view style="display: flex;">
								<view>产品列表({{form.orderItemsList.length}})</view>
								<u-icon v-if="form.confirmStatus == 0" name="plus-circle" color="#fd4b09" size="18"
									style="margin-left: 20rpx;"></u-icon>
							</view>
						</view>
						<view slot="value">
							<view style="font-size: 14rpx;">总金额￥<view
									style="display: initial;font-size: 28rpx;font-weight: bold">{{amountNumber.amount}}
								</view>
							</view>
						</view>
						<u-icon slot="right-icon" name="arrow-right"></u-icon>
					</u-cell>
				</u-cell-group>
				<view style="padding: 0 10rpx;">
					<view
						style="display: flex;font-size: 12rpx;text-align: center;padding: 10rpx 0;border-top: 1rpx solid #ccc;">
						<view>
							<view>采购总数量</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.saleAll}}</view>
						</view>
						<view style="margin: 0 50rpx;">|</view>
						<view>
							<view>收货总数量</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.deliveryAll}}</view>
						</view>
						<view style="margin: 0 50rpx;">|</view>
						<view>
							<view>总数</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.saleAll}}</view>
						</view>
					</view>
					<view
						style="display: flex;font-size: 12rpx;text-align: center;padding: 10rpx 0;border-top: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;">
						<view>
							<view>成本</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.cost}}</view>
						</view>
						<view style="margin: 0 50rpx;">|</view>
						<view>
							<view>毛利</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.grossProfit}}</view>
						</view>
						<view style="margin: 0 50rpx;">|</view>
						<view>
							<view>收货</view>
							<view style="font-size: 16rpx;font-weight: bold;">{{amountNumber.delivery}}</view>
						</view>
					</view>
					<u-cell v-for="(item,index) in form.orderItemsList" :key="index">
						<view slot="label">
							<!-- customStyle="margin-bottom: 10px" -->
							<u-row>
								<u-col span="2.9">
									<u--image :showLoading="true"
										:src="item.url?item.url:'../../../static/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.price}}</view>
										<view style="color: #707070;">数量:{{item.storageInQuantity}}</view>
									</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="color: #707070;">金额:￥{{item.amount}}</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>
								</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>
					</u-cell>
				</u-cell-group>
				<view style="padding: 0 10rpx;">
					<u-form-item label="订单金额" prop="mailbox" borderBottom>
						<u-input v-model="form.purchaseAmount" inputAlign="right" border="none" placeholder="请输入"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="优惠金额" prop="mailbox" borderBottom>
						<u-input v-model="form.thisUsedProfit" inputAlign="right" border="none" placeholder="请输入"
							:disabled="form.confirmStatus == 1" disabledColor="#ffffff" @change="calculationContract"/>
					</u-form-item>
					<u-form-item label="合同金额" prop="mailbox" borderBottom>
						<u-input v-model="form.orderAmount" inputAlign="right" border="none" placeholder="请输入" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="已付金额" @click="filterAll(['settlmentAmount','settlmentAmount'])" prop="mailbox"
						borderBottom>
						<u-input v-model="form.settlmentAmount" inputAlign="right" border="none" placeholder="请输入"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="本次付款" prop="mailbox" borderBottom>
						<u-input type="number" clearable v-model="form.currentAmount" inputAlign="right" border="none" placeholder="请输入"
							:disabled="form.confirmStatus == 0" disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="付款账户" prop="mailbox" borderBottom @click="filterAll(['account','account'])">
						<u-input v-model="form.account" inputAlign="right" border="none" placeholder="请选择" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="付款单号" prop="mailbox" borderBottom>
						<u-input v-model="form.receiptNo" inputAlign="right" border="none" placeholder="请输入" disabled
							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 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-upload :disabled="form.confirmStatus == 1" :fileList="fileList1" @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;">
			<view style="width: 100%;display: flex;font-size: 24rpx;">
				<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 @click="confirmReceipt" v-if="form.confirmStatus == 1"
					style="width: 40%;background-color: #5ac725;display: grid;justify-items: center;">
					<u-icon name="checkmark" 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 {
		typeSave,
		removeFile,
		submitApp,
		remind,
		confirm,
		revoke,
		removeItem,
		removeId,
		copyOrder,
		collectPayment
	} 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: {
			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, "detailedAddress", 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) * item.purchasePrice ? Number(item
										.purchasePrice) : 0
									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
					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[e.indexs[0]].dictValue
				this.showOpen = false
			},
			//集合筛选条件
			filterAll(screen) {
				if (screen[1] == "account") {
					if (this.form.confirmStatus == 0) {
						return uni.showToast({
							icon: "none",
							title: '禁止操作',
							mask: true
						});
					}
				} else {
					if(screen[1] !== "settlmentAmount"){
						if (this.form.confirmStatus == 1) {
							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/purchase/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) * item.purchasePrice ? Number(item
							.purchasePrice) : 0
						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
					uni.hideLoading();
				})
			},
			//确认收款
			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)
								}, 2000);
							})
						}
					}
				})
			},
			//保存
			conserve() {
				let form = {
					...this.form,
					orderFilesList: this.fileList1
				}
				if (form.orderFilesList.length > 0) {
					form.orderFilesList.forEach(item => delete item.status)
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				submitApp(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/purchase/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) * item.purchasePrice ? Number(item
						.purchasePrice) : 0
					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/purchase/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>