emergencyManagement/packageA/pages/goods/components/CreateBound.vue

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="85%" :maskClick='true'>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-section :title="'新增物资：' + (type==='in'?'入库':'出库')" type="line"></uni-section>
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form">					
					<view class="inbound" v-if="type==='in'">
						<uni-forms-item label="入库人员" name="accountId" required>
							<uni-data-select  v-model="form.accountId" :localdata="userList" placeholder="请选择入库人员" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="入库类型" name="inboundType" required>
							<uni-data-select  v-model="form.inboundType" :localdata="inboundTypeList" placeholder="请选择入库类型" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="物资种类" name="goodsCatId" required>
							<uni-data-select v-model="form.goodsCatId" :localdata="goodsCats" placeholder="请选择物资种类" :clear="false"></uni-data-select>
						</uni-forms-item>	
						<uni-forms-item label="物资数量" label-position="left" required>
							<uni-easyinput v-model="form.qty" placeholder="请输入物资数量" :clearable="false" />
						</uni-forms-item>						
						<uni-forms-item label="物资编号" >
							<uni-easyinput v-model="form.goodsNo" placeholder="请输入物资编号" :clearable="false" />
						</uni-forms-item>													
						<uni-forms-item label="存放位置" name="inboundLocation">
							<uni-easyinput v-model="form.inboundLocation" placeholder="请输入存放位置" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label="物资名称" >
							<uni-easyinput v-model="form.goodsTitle"  ></uni-easyinput>
						</uni-forms-item>		
						<uni-forms-item label="生产日期">
							<uni-datetime-picker type="date" v-model="form.goodsPdDate" />
						</uni-forms-item>
						<uni-forms-item label="过期时间">
							<uni-datetime-picker type="date" v-model="form.goodsExpDate"/>
						</uni-forms-item>
						<uni-forms-item label="物资说明">
							<uni-easyinput type="textarea" :maxlength="1000" v-model="form.goodsDesc" placeholder="请输入物资说明" autoHeight ></uni-easyinput>
							<view class="word-limit">{{form.goodsDesc.length||0}}/1000</view>
						</uni-forms-item>
					</view>
					<view class="outbound" v-if="type==='out'">
						<uni-card margin="10px 0">
							<uni-list>
								<uni-list-item  title="物资种类" >
									<template v-slot:footer><uni-tag  :text="form.goodsCatTitle" type="success"></uni-tag></template>
								</uni-list-item>
								<uni-list-item  title="库存数量" >
									<template v-slot:footer><uni-tag  :text="`${form.qty}`" type="primary"></uni-tag></template>
								</uni-list-item>
							</uni-list>
						</uni-card>
						<uni-forms-item label="出库类型" name="outboundType" v-if="type==='out'" required>
							<uni-data-select  v-model="form.outboundType" :localdata="outboundTypeList" placeholder="请选择出库类型" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="出库人员" name="accountId" required>
							<uni-data-select  v-model="form.accountId" :localdata="userList" placeholder="请选择出库人员" :clear="false"></uni-data-select>
						</uni-forms-item>						
						<uni-forms-item label="物资名称" label-position="left" required>
							<uni-easyinput v-model="form.goodsTitle" placeholder="请输物资名称" :clearable="false" />
						</uni-forms-item>	
						<uni-forms-item label="出库数量" label-position="left" required>
							<uni-easyinput v-model="form.qty" placeholder="请输出库数量" :clearable="false" />
						</uni-forms-item>	
						<uni-forms-item label="出库地点">
							<uni-easyinput type="textarea" :maxlength="100"
							 v-model="form.outboundLocation" autoHeight 
							placeholder="请输入出库地点"></uni-easyinput>
							<view class="word-limit">{{form.outboundLocation.length||0}}/100</view>
						</uni-forms-item>
					</view>
					<uni-forms-item label="备注">
						<uni-easyinput type="textarea" :maxlength="500"
						 v-model="form.remark" autoHeight 
						placeholder="请输入备注"></uni-easyinput>
						<view class="word-limit">{{form.remark.length||0}}/500</view>
					</uni-forms-item>
				</uni-forms>
				<view class="handle-container">
					<button class="save" type="primary" @click="onSubmit">保存</button>
					<button class="cancel" type="default" @click="close">取消</button>
				</view>
			</view>	
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import goodsApi from '@/api/goods.js'	
	import { parseTime } from '@/libs'
	export default{
		name:"CreateBound",
		computed:{
			ocId(){
				let accountInfo=uni.getStorageSync('accountInfo')
				if(!accountInfo)return undefined
				return accountInfo.ocId
			},
			goodsCats(){
				let goodsCats=this.cats
				if(!goodsCats)return []
				return goodsCats.map(item=>{
					return{
						value:item.goodsCatId,
						text:item.goodsCatTitle
					}
				})
			},
			userList(){
				let groupUser=uni.getStorageSync('groupUser')
				let userList=[]
				groupUser.map((item,index)=>{
					userList.push({...item,value:`root-${index+1}`,text:item.name,disable:true})
					if(Array.isArray(item.children)&&item.children.length>0){
						userList=userList.concat(item.children.map(item=>{return{...item,value:item.accountId,text:item.accountName}}))
					}			
				})
				return userList
			}						
		},
		props:{
			cats:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				type:undefined,
				rules:{
					accountId:{
						rules:[
							{
								required: true,
								errorMessage:this.type==='in'?'入库人员':'出库人员'
							}					
						],
						validateTrigger:'submit'
					},
					intboundType:{
						rules:[
							{
								required: true,
								errorMessage:"请选择入库类型"
							}					
						],
						validateTrigger:'submit'
					},
					outboundType:{
						rules:[
							{
								required: true,
								errorMessage:"请选择出库类型"
							}					
						],
						validateTrigger:'submit'
					},				
					goodsCatId:{
						rules:[
							{
								required: true,
								errorMessage: '请选择物资种类',
							}
						],
						validateTrigger:'submit'
					},
				},
				inboundTypeList:[
					{ value: 1, text: '正常入库' },
					{ value: 2, text: '报溢' },
				],
				outboundTypeList:[
					{ value: 1, text: '正常出库' },
					{ value: 2, text: '报损' },
					{ value: 3, text: '过期' },		
				],
				form:{
					groupId: undefined,
					groupName: undefined,
					inboundId: 0,
					inboundType: 1,
					inboundTime: '',
					inboundLocation: '',
					accountId: "",
					accountName:"",
					goodsType: "",
					goodsCatId: 1,
					goodsCatTitle: '',
					qty: 1,
					goodsNo: '',
					goodsTitle: '',
					goodsPdDate: '',
					goodsExpDate: '',
					goodsDesc: '',
					remark: '',
					//out
					outboundId: 0,
					outboundType: 1,
					outboundTime: '',
					outboundLocation: ''
				}
			}
		},
		methods:{
			resetForm(){
				this.form={
					groupId: undefined,
					groupName: undefined,
					inboundId: 0,
					inboundType: 1,
					inboundTime: '',
					inboundLocation: '',
					accountId: "",
					accountName:"",
					goodsType: "",
					goodsCatId: 1,
					goodsCatTitle: '',
					qty: 1,
					goodsNo: '',
					goodsTitle: '',
					goodsPdDate: '',
					goodsExpDate: '',
					goodsDesc: '',
					remark: '',
					//out
					outboundId: 0,
					outboundType: 1,
					outboundTime: '',
					outboundLocation: ''
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let submitFx=this.type==='in'?goodsApi.createInbound:goodsApi.createOutbound
					let user=this.userList.find(item=>this.form.accountId===item.accountId)
					let goodsCat=this.goodsCats.find(item=>this.form.goodsCatId===item.value)
					let params={
						accountId: user.accountId,
						accountName: user.accountName,
						positionId: user.positionId,
						positionName: user.positionName,
						ocId:this.ocId,					
						goodsType: this.form.goodsType,
						goodsCatId: goodsCat.value,
						goodsCatTitle:goodsCat.text,
						qty: this.form.qty,
						remark: this.form.remark
					}
					if(this.type==='in'){
						params={...params,
							goodsNo:this.form.goodsNo,
							goodsTitle: this.form.goodsTitle,
							goodsPdDate:this.form.goodsPdDate,
							goodsExpDate: this.form.goodsExpDate,
							goodsDesc: this.form.goodsDesc,
							inboundId: this.form.inboundId,
							inboundType: this.form.inboundType,
							inboundTime: this.form.inboundTime,
							inboundLocation: this.form.inboundLocation,
						}
					}else{
						params={...params,
							outboundId: this.form.outboundId,
							outboundType: this.form.outboundType,
							outboundTime: this.form.outboundTime,
							outboundLocation: this.form.outboundLocation,
						}
					}
					submitFx(params).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success',this.type==='in'?1:2)
						this.close();
					})

				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			show({type,item}){
				this.resetForm()
				this.form={...this.form,...item}
				this.type=type
				this.$refs.drawer.open()
			},
			close(){
				this.$refs.drawer.close()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scroll-view {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.form-wrap{
			padding:40rpx 20rpx;
			.handle-container{
				display: flex;
				justify-content: center;
				align-items: center;
				button{
					width: 160rpx;
					padding: 20rpx 16rpx;
					line-height: 1;
					font-size: 28rpx;
					&.save{
						background-color: #007aff;
					}
				}
			}
			.word-limit{
				text-align: right;
				padding: 10rpx 0;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>