epidemic_apply/pages/apply/apply.vue

<template>
	<view class="content">
		<!-- 自定义导航 -->
		<view class="navbar-box">
			<u-navbar title="申请物资登记" :safeAreaInsetTop="true" @custom-back="leftClick"></u-navbar>
		</view>
		<view class="wrap">
			<u-form :model="form" ref="uForm" label-width="180">
				<view class="title">物资信息</view>
				<u-form-item label="选择物资">
					<view class="u-flex-1" @click="jumpPage('/pages/apply/goods/goods')"></view>
					<u-icon @click="jumpPage('/pages/apply/goods/goods')" name="plus" size="40"></u-icon>
				</u-form-item>
				<view class="datas">
					<view class="datas-item u-flex u-row-between u-border-bottom" v-for="item in form.datas" :key="item.mateId">
						<view class="info u-flex u-row-between u-flex-1">
							<view class="name">{{item.mateName}}</view>
							<view class="u-p-l-10 u-p-r-10">{{filterSpecName(item.specCode)}}*{{filterUnitName(item.unitCode)}}</view>
						</view>
						<view class="number u-flex">
							<u-input v-model="item.askforNum" type="number" :clearable="false" :border="true" />
							<!-- <view class="unitCode">{{filterUnitName(item.unitCode)}}</view> -->
							<u-icon class="u-m-l-10" name="close" @click="removeItem(item.mateId)" color="#f00"></u-icon>
						</view>
					</view>
				</view>
				<view class="title">领取信息</view>
				<u-form-item label="领取方式" prop="storeOutTypeName">
					<u-input @click="oneSelectOpen('getWay')" placeholder="请选择" v-model="form.storeOutTypeName" disabled />
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="派送地址" prop="dispAddress" v-if="form.storeOutType==2">
					<u-input v-model="form.dispAddress" />
				</u-form-item>
				<u-form-item label="预计取货时间" prop="dispTime" v-if="form.storeOutType==1">
					<u-input v-model="form.dispTime" disabled @click="timeShow = true" />
					<u-picker v-model="timeShow" mode="time" :params="timeParams" @confirm="timeConfirm"></u-picker>
				</u-form-item>
				<u-form-item label="联系人姓名" prop="contactPerson">
					<u-input v-model="form.contactPerson" />
				</u-form-item>
				<u-form-item label="联系人电话" prop="contactPhone">
					<u-input v-model="form.contactPhone" maxlength="11" />
				</u-form-item>
			</u-form>
		</view>
		<view class="fixed-button">
			<u-button type="primary" @click="submit">提交申请</u-button>
		</view>
		<!-- 单列下拉选择 -->
		<u-select v-model="selectShow" :list="selectData" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	import {otherApiUrl} from '@/common/apiurl.js';
	export default {
		data() {
			return {
				timeShow:false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
				},
				form: {
				  organId: '',
				  storeOutType: "",
				  storeOutTypeName:'',
				  contactPerson: "",
				  contactPhone: "",
				  dispTime: "",
				  dispAddress: "",
				  datas: []
				},
				rules: {
					datas: [
						{ 
							required: true, 
							message: '请选择物资', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					storeOutTypeName: [
						{ 
							required: true, 
							message: '请选择领取方式', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					dispAddress: [
						{ 
							required: true, 
							message: '请输入派送地址', 
							trigger: ['change','blur'],
						}
					],
					dispTime: [
						{ 
							required: true, 
							message: '请选择取货时间', 
							trigger: ['change','blur'],
						}
					],
					contactPerson: [
						{ 
							required: true, 
							message: '请输入联系人姓名', 
							trigger: ['change','blur'],
						}
					],
					contactPhone: [
						{ 
							required: true, 
							message: '请输入联系人电话', 
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
				},
				selectTag: '',
				selectShow: false,
				listMap: {
					getWay: [],
				},
				selectData: [],
				unitNameList:[],
				specNameList:[],
			}
		},
		onLoad() {
			this.unitNameDict();
			this.paymentList();
			this.form.organId = this.user_info?.id;
			this.specNameDict();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.form.datas = [
			  ...this.applyList
			]
			// console.log('this.form.datas',this.form.datas);			
		},
		computed:{
			filterUnitName(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.unitNameList.length; i++){
						// console.log('value',value);
						// console.log('value',this.unitNameList[i]);
						let item = this.unitNameList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
			filterSpecName(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.specNameList.length; i++){
						// console.log('value',value);
						// console.log('value',this.specNameList[i]);
						let item = this.specNameList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
		},
		methods: {
			leftClick() {
				console.log('1111');
				return
			   let canNavBack = getCurrentPages();
			     if(canNavBack && canNavBack.length>1) {  
			       uni.navigateBack({  
			         delta: 1  
			       });  
			     } else {  
			       history.back();  
			     }
			},
			// 跳转页面
			jumpPage(url) {
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 单列下拉选择框打开事件
			oneSelectOpen(key) {
				this.selectTag = key;
				this.selectData = this.listMap[key];
				// if(key=='actiTypeList'){
				// 	let actiTypeList  = this.listMap.actiTypeList;
				// 	if(!actiTypeList||actiTypeList.length<1){
				// 		this.$refs.uToast.show({
				// 			title: '所选商品(数量)没有活动',
				// 			// type: 'error'
				// 		});
				// 		return
				// 	}
				// }
				this.selectShow = true
			},
			selectConfirm(e) {
				// console.log('selectConfirm',e);
				// console.log('selectTag', this.selectTag);
				switch (this.selectTag) {
				 case 'getWay': //业务员
						console.log('getWay selectConfirm',e);
						this.form.storeOutTypeName = e[0].label;
						this.form.storeOutType = e[0].value;
						break;
					// case 'store': //结账方式
					// 	this.form.storeName = e[0].label;
					// 	this.form.storeId = e[0].value;
					// 	// this.$u.vuex('orderMap.payWay', e[0].value)
					// 	break;
					default:
						// console.log('3', e);
				}
			},
			async unitNameDict() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'goods_unit_name')
				if(code === 200) {
					this.unitNameList = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			async specNameDict() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'goods_spec_name')
				if(code === 200) {
					this.specNameList = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			async paymentList() {
				let { code, data, msg} = await this.$u.get(otherApiUrl.getDict + 'payment')
				if(code === 200) {
					this.listMap.getWay = data.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			submit(){
				console.log('submit',this.form);
				this.$refs.uForm.validate(valid => {
					console.log('validvalid',valid);
					if (valid) {
						if(this.form.datas.length<1){
							uni.showToast({
								title:'请先选择物资',
								icon:'error'
							})
							return
						}
						this.$u.api.applyApi(this.form).then(res=>{
							if(res.code=='200'){
								this.$u.vuex('applyList', [])
								this.$u.route({
									url: 'pages/succeed/succeed',
									params: {
										tip: '申请将在24小时内进行审核,请等待!',
										from:'apply'
									}
								})
							}else{
								uni.showToast({
									title:res.msg,
								})
							}
						});
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});

			},
			timeConfirm(e){
				this.form.dispTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`;
				// console.log('timeConfirm',e);
			},
			filterApplyList(id, list) {
				return list.filter(item => item.mateId != id);
			},
			removeItem(mateId){
				console.log('mateId',mateId);
				console.log('applyList',this.applyList);
				let tempList = this.filterApplyList(mateId,this.applyList);
				this.form.datas = tempList;
				// this.$u.vuex('applyList', tempList)
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	font-size: 30rpx;
	border-left: 2px solid;
	border-color: var(--main-color);
	padding-left: 10rpx;
	color: var(--main-color);
	font-weight: bold;
	margin-bottom: 24rpx;
}
.datas{
	margin-top: 24rpx;
	.datas-item{
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
	}
	.u-input{
		width: 200rpx;
		margin-right: 10rpx;
	}
}
</style>