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="dotClickfun">
							<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-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		quickBilling
	} from '@/api/views/sale/index.js'
	import {
		queryBrand
	} 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 {
				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: {
			// 出库明细删除
			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>