tqApp-webView/pagesMine/testPage/index.vue

<template>
	<view class="page-container">
		<web-view
		    src="https://tq.5000v.com:8025/enterprises/">
		</web-view>
	</view>
</template>

<script>
import {userProfile} from '@/api/common/user.js'
import {addMaterialApply,queryOneById,queryMaterialList} from '@/api/system/material.js'
import {clearProps,copyProps} from '@/utils/gdtq.js'
import {isEmpty} from 'lodash'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					outflowUserId: "",
					outflowUser: "",		
					deptId: "",
					deptName: "",
					outflowType: "",
					outflowTypeName: "",
					backDate: "",
					remark: "",
				
					// materialId: "",
					// materialName: "",
					
					outList: [
						/* {
							materialId: 1,
							materialName: 'testest',
							amountTotal: 0,
							num: ''
						} */
					],
				  }
			},
			rules: {
				
				'form.outflowType': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.backDate': {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				'form.outList': {
					type: 'array',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},	
			},
			
			/* 物品数组校验规则 start */
			outListRules: {
				
				num: [
					{
						type: 'number' ,
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
					{
						pattern: /^[1-9]\d*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入大于0的正整数',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
			},
			
			materialList: [],
			userInfo: null,
		}
	},
	onLoad({id}) {
		// console.log(id,'id')
		this.queryMaterialListData()
		if(id) {
			this.getInfo(id)
		} else {
			this.getUserInfo()
		}
		
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {	
		this.resetRules()
	},
	methods: {
		
		resetRules() {
			this.$refs.uForm.setRules(this.rules)		
			
			for (let i in this.model.form.outList) {
				this.$refs.outListRef[i].setRules(this.outListRules);
			}
			
		},
		
		async queryMaterialListData() {
			let {code,data} = await queryMaterialList({})
			if(code == 0) {
				this.materialList = data.map((e) => {
					return {
						...e,
						tip: `(可用库存${e.amountTotal})`,
						disabled: !(e.amountTotal>0)
					}
				})
			}
		},
		async getInfo(id) {
			let {code,data} = await queryOneById({id})
			if(code == 0) {
				copyProps(this.model.form,data)
			}
		},
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				this.model.form.outflowUserId = res.data.userId
				this.model.form.outflowUser = res.data.nickName
	
				this.model.form.deptId = res.data.deptId
				this.model.form.deptName = res.data.deptName
			})
		},
		// 提交
		async handleSubmit() {
			
			for (let i in this.model.form.outList) {
				this.$refs.outListRef[i].validate(valid => {
					if (!valid) return
				})
			}
			  this.$refs.uForm.validate().then(async res => {
				  
					  
					  for (let i in this.model.form.outList) {
					  		await this.$refs.outListRef[i].validate()						
					  }
				  
					  let ajaxData = {
						  ...this.model.form,
					  }

					  let { data, code,msg } = await addMaterialApply(ajaxData) 
					  
					  if (code == 0) {
							
							uni.showModal({
								title: '提示',
								content: `提交成功~`,
								showCancel:false,
								confirmText: '好的',
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({url: '/pages/index/index'})
									}
								}
							})
							
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		handleClear() {
			
			clearProps(this.model.form,['outflowUserId','outflowUser','deptId','deptName'])
		},
		updateMeterial(data) {
			// console.log(data,'data')
			if(!isEmpty(data)) {
				this.model.form.outList = data.map((e) => {
					return {
						materialId: e.materialId,
						materialName: e.materialName,
						amountTotal: e.amountTotal,
						num: ''
					}
				})
			} else {
				this.model.form.outList = []
			}
			this.model.form.materialId = data.materialId
			this.model.form.materialName = data.materialName
			
			this.$refs.uForm.validateField('form.outList')
			
			this.$nextTick(() => {
				this.resetRules()
			})
		},
		deleteItem(index) {
			this.model.form.outList.splice(index, 1)
			this.$nextTick(() => {
				this.resetRules()
			})
		},
		handleNumChange(row,index) {
		    if(row.materialId) {
		        if(row.num > row.amountTotal) {
		            this.$modal.msg(`已超过可用申领数${row.amountTotal}`)
		            // row.num = row.amountTotal
	
		        }
		    } else {
		        this.$modal.msg('请先选择物品')
		        row.num = ''
		    }
		   
		}
	}
}
</script>

<style lang="scss" scoped>
	.disflex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.disflex-right {
		display: flex;
		justify-content: right;
		align-items: center;
	}
.page-container {
	
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	// padding-bottom: 60rpx;
	
	.box {
		margin: 20rpx;
		border-radius: 10rpx;
		background: #fff;
	}
	.page-body {
		padding-bottom: 120rpx;
	}
	.page-footer {
		padding: 0rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>