supervise/yxt-supervise-cyf/yxt-supervise-cyf-uniapp/pages/business/inventoryRegistration.vue

<template>
	<view class="app-container">
		<view style="display: flex;flex-direction: column;background-color: #fff;padding-bottom: 50px;">

			<view class="item">
				<text class="item_text" style="margin-left: -9px;">油罐编号：</text>
				<uni-data-select style="flex-grow: 1;" v-model="formobj.tankName" :localdata="tankList"
					@change="tankChange"></uni-data-select>
			</view>
			<view class="item">
				<text class="item_text">油罐高度：</text>
				<input v-model="formobj.height" placeholder="" type="number" @input="input" class="item_input"
					clearable />
			</view>
			<view class="item">
				<text class="item_text" style="margin-right:21px;">登记材料：</text>
				<view style="flex: 1;">
					<text class="text_upload" @click="uploadImage">上传</text>
				</view>
			</view>
			<scroll-view style="width: 100%;white-space: nowrap; overflow: hidden;" scroll-x="true">
				<view style="margin-top: 15px;display: inline-block;flex-direction: row; justify-content: center;">
					<view v-for="(item,index) in formobj.crudeOilRecordFile" :key="index"
						style="display: inline-block;">
						<view
							style="margin-left: 20rpx;margin-right: 20rpx;display: flex;flex-direction: row; justify-content: center;">
							<image :src="item" style="width: 180rpx;height: 160rpx;z-index: 1;" mode="aspectFill"
								@click="showImage(index)">
							</image>
							<image src="../../static/icon_delete.png"
								style="margin-left: -33rpx;margin-top: 5rpx;width: 30rpx;height: 30rpx;z-index: 2;"
								@click="deleteItem(item)">
							</image>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				uploadAction: config.baseUrl + "/file/upload",
				tankLists: [],
				tankList: [],
				formobj: {
					tankName: "",
					tankSid: "",
					height: "",
					crudeOilRecordFile: [],
				}
			}
		},

		onLoad() {
			this.initData()
		},
		methods: {
			input(e) {
				//正则表达试
				e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
				console.log(e)
				//重新赋值给input
				this.$nextTick(() => {
					this.formobj.height = e.detail.value
				})
			},
			uploadImage() {
				let that = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							that.aaa(tempFilePaths[i])
						}
					}
				});
			},
			aaa(path) {

				uni.uploadFile({
					url: this.uploadAction, //服务器地址
					fileType: "image", //ZFB必填,不然报错
					filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
					name: 'file',
					success: (uploadFileRes) => {

						let imgData = JSON.parse(uploadFileRes.data)
						console.log(imgData);
						console.log(imgData.data.fullUrl);

						this.formobj.crudeOilRecordFile.push(imgData.data.fullUrl)

					}
				});
			},
			showImage(index) {
				uni.previewImage({
					current: index,
					urls: this.formobj.crudeOilRecordFile
				});
			},
			deleteItem(item) {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除图片吗？',
					success(res) {
						if (res.confirm) {
							_this.formobj.crudeOilRecordFile.splice(_this.formobj.crudeOilRecordFile.indexOf(
								item), 1)
						}
					}
				});

			},
			onNavigationBarButtonTap(e) {
				console.log(e)

				if (e.index === 0) {
					console.log("crudeinventorySave>>>", this.formobj);
					this.$api.crudeinventorySave(this.formobj).then(res => {
						console.log("crudeinventorySave>>>", res);
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
					})

				} else {
					uni.showToast({
						title: "正在完善中。。。",
						icon: "none"
					})
				}


			},
			tankChange(e) {
				console.log('e>>>>>', e);
				const choose = this.tankLists.filter((item) => item.sid === e)
				console.log(">>>>>>>>>getType", choose[0])
				this.formobj.tankSid = choose[0].sid
				this.formobj.tankName = choose[0].number
				this.formobj.flowmeterName = choose[0].flowmeterName

				console.log(">>>>>>>>>tankSid", this.formobj.tankSid)
				console.log(">>>>>>>>>tankName", this.formobj.tankName)
				// this.queryParams.type = e
			},
			initData() {
				// 获取油罐类型 数据字典
				this.$api.tankinfoList().then(res => {
					console.log("tankinfoList>>>", res);
					// this.resinfo = res
					this.tankLists = res
					this.tankList = []
					for (var i = 0; i < this.tankLists.length; i++) {
						let item = {
							"value": this.tankLists[i].sid,
							"text": this.tankLists[i].number
						}
						this.tankList.push(item)
					}
				})


			},

		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #fff;
		padding-top: 10px;
		height: 100% !important;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15px;
		margin-right: 10px;

		.item_text {
			flex: 0.6;
			font-size: 18px;
			text-align: right;
		}

		.item_input {
			flex: 1;
			font-size: 16px;
			height: 40px;
			border-radius: 4px;
			border: 1px solid #e5e5e5;
			padding-left: 10px;
			padding-right: 10px;

		}

		.text_upload {
			font-size: 16px;
			height: 40px;
			border-radius: 5px;
			color: #fff;
			padding: 2px 15px;
			background: #018AD2;
		}

		.item_left_input {
			width: 20%;
		}

		.item_left_text {
			height: 30px;
			margin-left: 20px;
			line-height: 30px;
			color: #018AD2;
			padding: 0px 15px;
			border: 1.5px solid #018AD2;
			border-radius: 5px;

		}

		.item_right {
			flex: 1;
			justify-items: center;

			.item_right_list_text {
				font-size: 16px;
			}

			.item_right_list_delect {
				color: #5E94FF;
				margin-left: 20px;
				font-size: 16px;
				text-decoration: underline;
			}
		}

	}
</style>