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="180rpx"
			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 leftIcon="account" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="业务对象" prop="cname" borderBottom>
						<u-input v-model="form.customerName" inputAlign="right" border="none" placeholder="请填写业务对象"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="account" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }" label="仓库"
						prop="home" borderBottom @click="filterAll(['storageName', 'storageId'])">
						<u-input v-model="form.storageName" placeholder="请选择仓库" inputAlign="right" border="none"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="account" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }" label="库管"
						prop="cname" borderBottom @click="filterAll(['stockClerkIdName', 'stockClerkId'])">
						<u-input v-model="form.stockClerkName" inputAlign="right" border="none" disabled
							disabledColor="#ffffff" />
					</u-form-item>

					<u-form-item leftIcon="calendar" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="业务日期" prop="cname" borderBottom>
						<u-input v-model="form.businesDate" inputAlign="right" border="none" 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
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="来源单号" prop="cname" borderBottom>
						<u-input v-model="form.ordNo" border="none" inputAlign="right"
						 placeholder="请输入来源单号" disabled
							disabledColor="#ffffff" />
					</u-form-item> -->
					<u-form-item leftIcon="car" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }" label="配送方式"
						prop="cname" borderBottom @click="filterAll(['shipType', 'shipType'])">
						<u-input v-model="form.shipType" inputAlign="right" border="none" placeholder="请选择配送方式" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="home" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }" label="物流公司"
						prop="cname" borderBottoms @click="filterAll(['logisticsCorpName', 'logisticsCorpId'])">
						<u-input v-model="form.logisticsCorpName" inputAlign="right" border="none" placeholder="请选择物流公司"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="file-text" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="物流单号" prop="cname" borderBottom>
						<u-input v-model="form.expressNo" inputAlign="right" border="none" placeholder="请输入物流单号"
							:disabled="form.statusName == '已出库'" disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="edit-pen" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="订单数量" prop="cname" borderBottom>
						<u-input v-model="form.goodsTotalNum" border="none" inputAlign="right" placeholder="请输入订单数量"
							disabled disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="edit-pen" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="出库数量" prop="cname" borderBottom>
						<u-input v-model="form.sendTotalNum" border="none" inputAlign="right" placeholder="0" disabled
							disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item leftIcon="file-text" :leftIconStyle="{ color: '#FD4B09', fontSize: '40rpx' }"
						label="备注" prop="cname" borderBottom>
						<u--textarea v-model="form.remarks" height="40" :disabled="form.statusName == '已出库'"
							border="none" placeholder="请输入备注"></u--textarea>
					</u-form-item>
				</view>
			</view>
			<view style="width: calc(96%);margin: 0 auto;
				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.shipItemsList.length }})</view>
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<view style="font-size: 30rpx;">
					<view v-for="(item, index) in form.shipItemsList" :key="index" @click="tanchufun(item, index)"
						style="padding: 20rpx; background-color: #fff;margin-bottom: 20rpx;
					border-radius: 12rpx;">
						<view style="display: flex;align-items: center;justify-content: space-between;
						margin-bottom: 20rpx;">
							<text style="color: #FD4B09;font-size: 32rpx">序号{{ index + 1 }}</text>
							<view style="color: #fff;font-size: 30rpx;
								background: #FD4B09;padding: 10rpx;border-radius: 10rpx;" @click.stop="shipItemsDelfun(index, item.id)">
								删除
							</view>
						</view>
						<view>
							<view>{{ item.goodsName }}</view>
							<!-- <view>轮胎编码:{{item.goodsNo}}</view> -->
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view>品牌:{{ item.brandName }}</view>
								<view>规格:{{ item.propertyName }}</view>
							</view>
							<view>花纹:{{ item.pattern }}</view>
							<!-- <view>轮胎描述:{{item.goodsDescription}}</view> -->
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view>批次号:{{ item.dot }}</view>
								<view>单位:{{ item.units }}</view>
							</view>
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view>出库数量:{{ item.goodsNum }}</view>
								<view>实际数量:{{ item.sendNum }}</view>
							</view>
						</view>
					</view>
				</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 :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;display: flex;">
			<view style="width: 48%;;margin: 20rpx auto;">
				<u-button v-if="form.statusName == '待出库' || form.statusName == '撤销出库'" @click="shipSubmitfun(true)"
					type="success" color="#67C23A" shape="circle" text="出库完成"></u-button>
				<u-button v-if="form.statusName == '已出库'" @click="shipRevokeOutboundCompletedfun()" type="success"
					color="#E6A23C" shape="circle" text="撤销出库"></u-button>
			</view>
			<view style="width: 48%;;margin: 20rpx auto;">
				<u-button @click="shipSubmitfun(false)" type="success" color="#fd4b09" shape="circle"
					text="保存数据"></u-button>
			</view>
		</view>


		<!-- 弹窗数据 -->
		<u-popup :show="popupShow" @close="popupShow = false" :closeable="true" mode="center"
			customStyle="width: 90%;margin: 0 auto;">
			<view style="padding: 40rpx 25rpx;box-sizing: border-box;">
				<view style="text-align: center;margin: 10rpx 0;">
					<view style="font-size: 36rpx;word-break:break-all;">
						{{ popupForm.cname }}
					</view>
				</view>
				<view style="width: 96%;margin: 0 auto;clear: both;">
					<u-cell-group>
						<u-cell title="商品名称">
							<view slot="value">
								{{ popupForm.goodsName ? popupForm.goodsName : '--' }}
							</view>
						</u-cell>
						<!-- <u-cell title="轮胎编码">
							<view slot="value">
								{{popupForm.goodsNo?popupForm.goodsNo:'--'}}
							</view>
						</u-cell> -->
						<u-cell title="花纹">
							<view slot="value">
								{{ popupForm.pattern ? popupForm.pattern : '--' }}
							</view>
						</u-cell>
						<!-- <u-cell title="轮胎描述">
							<view slot="value">
								{{popupForm.goodsDescription?popupForm.goodsDescription:'--'}}
							</view>
						</u-cell> -->
						<u-cell title="品牌">
							<view slot="value">
								{{ popupForm.brandName ? popupForm.brandName : '--' }}
							</view>
						</u-cell>
						<u-cell title="规格">
							<view slot="value">
								{{ popupForm.propertyName ? popupForm.propertyName : '--' }}
							</view>
						</u-cell>
						<u-cell title="批次号(DOT)" @click="getDot(popupForm)" :disabled="form.statusName == '已出库'">
							<view slot="value">
								{{ popupForm.dot ? popupForm.dot : '--' }}
							</view>
						</u-cell>
						<u-cell title="单位">
							<view slot="value">
								{{ popupForm.units ? popupForm.units : '--' }}
							</view>
						</u-cell>
						<u-cell title="出库数量">
							<view slot="value">
								{{ popupForm.goodsNum ? popupForm.goodsNum : 0 }}
							</view>
						</u-cell>
						<u-cell title="实际数量">
							<view slot="value">
								<u-number-box v-model="popupForm.sendNum" :min="0" :disabled="form.statusName == '已出库'">
								</u-number-box>
							</view>
						</u-cell>
						<u-cell title="备注">
							<view slot="value">
								<u--textarea style="width: 400rpx;" height="40" v-model="popupForm.remarks"
									:disabled="form.statusName == '已出库'" border="none"
									placeholder="请输入备注"></u--textarea>
							</view>
						</u-cell>

					</u-cell-group>
				</view>

				<view style="margin-top: 40rpx;text-align: center;
				font-size: 32rpx;">
					<view style="display: flex; color: #fff;justify-content: space-around;">
						<view style="color: #FD4B09; border: 1rpx solid #FD4B09;
						width: 200rpx; height: 80rpx; 
						line-height: 80rpx; border-radius: 12rpx;" @click="popupShow = false">取消</view>
						<view
							style="background-color: #FF6F3B; width: 200rpx; height: 80rpx; line-height: 80rpx; border-radius: 12rpx;"
							@click="popupConserve()">保存</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker :show="showOpen" :columns="columns" :keyName="keyName" @cancel="showOpen = false"
			@confirm="showPicker"></u-picker>
		<u-picker :show="dotShow" :columns="dotist" keyName="dot" @cancel="dotShow = false;dotist=[]"
			@confirm="dotPicker"></u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		quickBilling
	} from '@/api/views/sale/index.js'
	import {
		queryBrand,
		dotList
	} from '@/api/views/stock/index.js'
	import {
		storageDescListAll,
		stockClerkList
	} from '@/api/OutboundTask/index.js'
	import {
		shipDetail,
		removeFile,
		confirm,
		confirmReceipt,
		shipSubmit,
		shipItemsUpdate,
		shipOutboundCompleted,
		shipRevokeOutboundCompleted
	} 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 {
				dotShow: false,
				dotist: [],
				form: {
					shipItemsList: []
				},
				// 附件
				fileList1: [],
				// 集合传的数据
				screen: [],
				// 单列的弹窗
				showOpen: false,
				columns: [],
				keyName: '',
				// 库管请求到的数据
				stockClerkData: [],
				// 发货仓库请求到的数据
				storageDescData: [],
				// 物流配送方式请求到的数据
				selectData: [],
				// 物流公司请求的数据
				logisticsCorpData: [],
				// 明细弹窗暂存的数据
				popupForm: {},
				popupIndex: 0,
				popupShow: false,


			}
		},
		onLoad(data) {
			this.stockClerkListfun()
			this.storageDescListAllfun()
			// 获取物流配送方式数据
			this.queryBrandfun()
			this.HYqueryBrandfun()
			this.shipDetailfun(data.id)
		},
		methods: {
			getDot(row) {
				this.dotShow = true
				dotList({
					storageId: this.form.storageId,
					goodsId: row.goodsId
				}).then(res => {
					this.dotist = [res.data]
				})
			},
			dotPicker(e) {
				console.log(e)
				this.dotShow=false
				this.dotist=[]
				this.popupForm.dot=e.value[0].dot
			},
			// 出库明细删除
			shipItemsDelfun(index, id) {
				if (this.form.statusName == '已出库') return
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: (rest) => {
						if (rest.confirm == true) {
							if (id) {
								shipItemsUpdate({
									id: id
								}).then(res => {
									this.form.shipItemsList.splice(index, 1)
									uni.showToast({
										icon: "none",
										title: '删除成功',
										mask: true
									});
								})
							} else {
								this.form.shipItemsList.splice(index, 1)
							}
						}
					}
				})
			},
			// 保存数据 false 普通保存 true 出库任务和保存
			shipSubmitfun(type) {
				if (!this.form.storageId) {
					return uni.showToast({
						title: '仓库不能为空',
						icon: 'none',
						mask: true
					});
				}
				if (!this.form.stockClerkId) {
					return uni.showToast({
						title: '库管不能为空',
						icon: 'none',
						mask: true
					});
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				shipSubmit({
					...this.form,
					bizTypeName: "FHGD",
					filesList: this.fileList1
				}).then(res => {
					if (type) {
						this.shipOutboundCompletedfun()
					} else {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: '保存成功',
							mask: true
						});
						this.shipDetailfun(res.data.id)
					}
				})
			},

			// 出库完成接口
			shipOutboundCompletedfun() {
				shipOutboundCompleted({
					...this.form,
					bizTypeName: "FHGD",
					filesList: this.fileList1
				}).then(res => {
					uni.hideLoading();
					// uni.showToast({
					// 	icon: "none",
					// 	title: '出库成功',
					// 	mask: true
					// });
					this.$refs.uToast.show({
						type: 'success',
						message: "出库成功",
					})
					this.shipDetailfun(res.data.id, true)
				})
			},
			// 撤销出库接口
			shipRevokeOutboundCompletedfun() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				shipRevokeOutboundCompleted({
					...this.form,
					bizTypeName: "FHGD",
					filesList: this.fileList1
				}).then(res => {
					// uni.showToast({
					// 	icon: "none",
					// 	title: '撤销出库成功',
					// 	mask: true
					// });
					uni.hideLoading();
					this.$refs.uToast.show({
						type: 'success',
						message: "撤销出库成功",
					})
					this.shipDetailfun(res.data.id, true)
				})
			},
			// 修改弹窗打开
			tanchufun(item, index) {
				this.popupForm = item
				this.popupIndex = index
				this.popupShow = true
			},
			//修改弹窗点击保存事件
			popupConserve() {
				if (this.popupForm.sendNum <= 0 || this.popupForm.sendNum > this.popupForm.goodsNum) {
					return uni.showToast({
						title: '实际数量不能为零或大于出库数量',
						icon: 'none',
						mask: true
					});
				}
				this.form.shipItemsList[this.popupIndex] = this.popupForm
				this.popupShow = false
			},
			// 获取业务员数据
			stockClerkListfun() {
				stockClerkList().then(res => {
					this.stockClerkData = res.data
				})
			},
			// 获取发货仓库数据
			storageDescListAllfun() {
				storageDescListAll().then(res => {
					this.storageDescData = res.data
				})
			},
			// 获取物流配送方式数据
			queryBrandfun() {
				queryBrand({
					code: 'deliveryMethod'
				}).then(res => {
					this.selectData = res.data
				})
			},
			// 获取货运公司数据
			HYqueryBrandfun() {
				queryBrand({
					code: 'tyre_express_company'
				}).then(res => {
					this.logisticsCorpData = res.data
				})
			},

			deleteProduct(index) {
				let this_ = this
				this_.form.shipItemsList.splice(index, 1)
			},
			// 下拉选择
			showPicker(e) {
				if (this.screen[1] == "storageId") {
					this.form.storageId = e.value[0].id
					this.form.storageName = e.value[0].cname
					this.showOpen = false
				} else if (this.screen[1] == "stockClerkId") {
					this.form.stockClerkId = e.value[0].id
					this.form.stockClerkName = e.value[0].name
					this.showOpen = false
				} else if (this.screen[1] == "shipType") {
					this.form.shipType = e.value[0].dictValue
					this.showOpen = false
				} else if (this.screen[1] == "logisticsCorpId") {
					this.form.logisticsCorpName = e.value[0].dictValue
					this.form.logisticsCorpId = e.value[0].dictKey
					this.showOpen = false
				}



			},
			//集合筛选条件
			filterAll(screen) {
				if (this.form.statusName == '已出库') return
				this.screen = screen
				switch (screen[1]) {
					case "storageId":
						this.columns = [this.storageDescData]
						this.keyName = 'cname'
						this.showOpen = true
						break;
					case "stockClerkId":
						this.columns = [this.stockClerkData]
						this.keyName = 'name'
						this.showOpen = true
						break;
					case "shipType":
						this.columns = [this.selectData]
						this.keyName = 'dictValue'
						this.showOpen = true
						break;
					case "logisticsCorpId":
						this.columns = [this.logisticsCorpData]
						this.keyName = 'dictValue'
						this.showOpen = true
						break;
				}
			},
			// 详情接口
			shipDetailfun(id, type) {
				if (!type) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
				}
				shipDetail({
					id: id
				}).then(res => {
					this.form = res.data
					this.fileList1 = res.data.filesList
					uni.hideLoading();
				})
			},


			// 新增图片
			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,
					})
				})
				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, {
						fileName: JSON.parse(result).data.originalName,
						url: JSON.parse(result).data.link
					}))
					console.log(this[`fileList${event.name}`], 416);
					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>