jonhon-mes-PDA/pages/sanitation/bsTower.vue

<template>
	<ifrm ref="ifrm">
		<!-- 酸雾塔-->
		<uni-forms ref="form" err-show-type="toast">
			<uni-forms-item>
				<input type="text" v-model="code" @confirm="epDosingRecConfirm" class="uni-input-border"
					placeholder="编码" />
			</uni-forms-item>
		</uni-forms>
		<t-table>
			<t-tr>
				<t-td>编码</t-td>
				<t-td>{{ epDosingRec.btCode }}</t-td>
			</t-tr>
			<t-tr>
				<t-td>名称</t-td>
				<t-td>{{ epDosingRec.device }}</t-td>
			</t-tr>
			<t-tr>
				<t-td>药品名称</t-td>
				<t-td>{{ epDosingRec.drug }}</t-td>
			</t-tr>
			<t-tr>
				<t-td>剂量</t-td>
				<t-td><input type="number" v-model="epDosingRec.dose" /></t-td>
			</t-tr>
		</t-table>
		<view style="font-size: 36rpx">备注：</view>
		<uni-forms ref="form" err-show-type="toast">
			<uni-forms-item>
				<uni-easyinput type="textarea" autoHeight v-model="epDosingRec.memo" placeholder="请输入备注">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<!-- <view class="photoTitleSize">{{uploader.length}}/9</view>
        <view class="showImage">
            <view v-for="(item, i) in uploader" :key="i" class="showImage-for">
                <view class="view-image">
                    <image :src="item.imageUrl" @tap="previewImage(i)" />
                </view>
                <view class="view-icon">
                    <uni-icons type='trash' size="14" color='gray' @click="removeScene(item, i)"></uni-icons>
                </view>
            </view>
            <view class="view-center" v-if="uploader.length < 9">
                <image src="../../static/images/photo.png" @click="chooseImage()"></image>
            </view>
        </view> -->
		<!-- :disabled="!(Object.keys(epDosingRec).length > 2)" -->
		<view class="buttonBox">
			<button class="button" :disabled="!(Object.keys(this.epDosingRec).length > 0)" type="primary"
				@click="submitClick">
				提交
			</button>
		</view>
	</ifrm>
</template>

<script>
	import ifrm from "@/pages/index/ifrm";
	import tTable from "@/components/t-table/t-table.vue";
	import tTh from "@/components/t-table/t-th.vue";
	import tTr from "@/components/t-table/t-tr.vue";
	import tTd from "@/components/t-table/t-td.vue";
	import scan from "../../mixin/scan.js";
	export default {
		mixins: [scan],
		components: {
			ifrm,
			tTable,
			tTh,
			tTr,
			tTd,
		},
		data() {
			return {
				code: "",
				epDosingRec: {},
				uploader: [],
			};
		},
		methods: {
			chooseImage: async function() {
				if (!this.epDosingRec.dorId) {
					return uni.showToast({
						title: "请先查询巡检点",
						icon: "none",
					});
				}
				uni.chooseImage({
					// sourceType: ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					count: 9,
					success: (res) => {
						uni.showLoading({
							title: "上传中，请稍候",
						});
						var tempFilePaths = res.tempFilePaths;
						for (var i = 0; i < tempFilePaths.length; i++) {
							const file = res.tempFiles[i];
							this.$uploadUtil
								.upload(
									file, {
										theId: this.epDosingRec.dorId,
										theTag: "EpDosingRec",
										subTag: "appDoc",
									},
									tempFilePaths[i]
								)
								.then((upId) => {
									uni.hideLoading();
									//展示图片
									this.uploader.push({
										upId: upId,
										imageUrl: file.path,
									});
								});
						}
					},
					complete() {
						uni.hideLoading();
					},
				});
			},
			previewImage: function(index) {
				var imags = [];
				this.uploader.forEach((item) => {
					imags.push(item.imageUrl);
				});
				uni.previewImage({
					current: index,
					urls: imags,
				});
			},

			removeScene(item, i) {
				//删除现场图片
				this.uploader.splice(i, 1);
				// //删除附件记录
				this.$uploadUtil.asyncDelete(item.upId).then((data) => {
					uni.showToast({
						title: "删除成功",
						icon: "none",
					});
				});
				// this.upIdList.splice(this.upIdList.findIndex((upId) => (upId === item.upId)), 1);
			},

			getBarCode(code) {
				this.getData(code);
			},
			epDosingRecConfirm(e) {
				this.getBarCode(e.target.value);
			},
			getData(code) {
				this.epDosingRecValue = code;
				this.$u.api.epDosingRecByCode(code).then((res) => {
					if (res.data == null) {
						return uni.showToast({
							icon: "none",
							title: "此酸雾塔置暂无任务",
						});
					}
					this.epDosingRecValue = "";
					this.epDosingRec = res.data;
					uni.showToast({
						title: "数据获取成功",
					});
				});
			},
			submitClick() {
				this.$u.api.saveEpDosingRec(this.epDosingRec).then((data) => {
					uni.showToast({
						title: "保存成功",
					});
					this.epDosingRecValue = "";
					this.epDosingRec = {
						dose: null,
						memo: "",
					};
					this.uploader = [];
				});
			},
		},
		onNavigationBarButtonTap(btn) {
			this.$refs.ifrm.topMenuClick(btn);
		},
		onShow() {},
	};
</script>

<style scoped lang="less">
	.uni-forms-item {
		margin-bottom: 6px !important;
	}

	.photoTitleSize {
		color: #a1a1a1;
		text-align: right;
		margin-right: 30rpx;
		margin-top: -30rpx;
	}

	.showImage {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: -20rpx;

		.showImage-for {
			display: flex;
			flex-direction: column;
			width: 200rpx;
			margin-left: 30rpx;
			height: 260rpx;

			.view-icon {
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: -10rpx;
			}

			image {
				border-width: 2rpx;
				border-color: rgb(229, 229, 229);
				border-style: solid;
				border-radius: 20rpx;
				width: 190rpx;
				height: 190rpx;
			}
		}
	}

	.view-center {
		margin: 0rpx 25rpx;

		image {
			border-width: 2rpx;
			border-color: rgb(229, 229, 229);
			border-style: solid;
			border-radius: 20rpx;
			width: 190rpx;
			height: 190rpx;
		}
	}
</style>