lh-mobile/pages/tag/sampleTag.vue

<template>
	<view class="bg">
		<cu-custom bgColor="bg-luohu" :isBack="true">
			<block slot="backview">返回</block>
			<block slot="content">样品标签</block>
		</cu-custom>

		<view ref="qrcode" id="box" class="tagBoss">
			<view v-for="(item1,index1) in list" :key="index1">
				<view v-for="(item2,index2) in parseInt(item1.num)" :key="index2">
					<view class="All" style="font-family:sans-serif">
						<view class="tagBox">
							<view class="lh">
								<view class="lhLeft">样品名称：</view>
								<view>{{item1.name}}</view>
							</view>
							<view class="lh">
								<view class="lhLeft">样品编号：</view>
								<view>{{item1.serial}}</view>
							</view>
							<view class="lh">
								<view class="lhLeft">样品类型：</view>
								<view>{{item1.type}}</view>
							</view>
							<view class="lh">
								<view class="lhLeft">存储条件：</view>
								<view>{{item1.condition}}</view>
							</view>
							<view class="lh">
								<view class="lhLeft">样品数量：</view>
								<view>{{index2+1}}/{{item1.num}}支</view>
							</view>
							<view class="lh">
								<view class="lhLeft">收样时间：</view>
								<view>{{item1.shou_yang_ri_qi_}}</view>
							</view>
							<view class="lh">
								<view class="lhLeft">流转状态：</view>
								<view>▢待检，▢已检，▢留样</view>
							</view>

							<view>
								<vue-barcode :value="item1.serial" :width="1.5" :height="15" :margin="0" :displayValue="false"></vue-barcode>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-button type="primary" class="btn" @click="downloadImage()" style="margin: 20rpx;" v-if="imgSrc != ''">下载
		</u-button>

	</view>
</template>

<script>
	import html2canvas from "html2canvas";
	import VueBarcode from 'vue-barcode';
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	export default {
		components: {
			VueBarcode
		},
		data() {
			return {
				value: '',
				id: '',
				list: [],
				imgSrc: '',
				userid: '',
				time: ''
			}
		},
		created() {
			this.getInit()
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getLook(options.id)
			}
		},
		methods: {
			getInit() {
				let info = uni.getStorageSync(USER_INFO);
				if (info.employee.id) {
					this.userid = info.employee.id || ''
				}
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 19)
				this.time = time
			},
			getLook(id) {
				let sql =
					`select a.*,b.shou_yang_ri_qi_ from t_lhypb a left join t_lhypdjb b on b.yang_ben_bian_hao = a.yang_pin_bian_hao where a.id_ = '${id}' order by a.yang_pin_bian_hao asc`
				let requestData = this.$sig(sql)


				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const data = res.data.variables.data
						let list = []
						data.forEach(item => {
							if (item.yang_pin_lei_xing != '' && parseInt(item.shu_liang_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_xing,
									num: item.shu_liang_,
									condition: item.yang_ben_yun_shu_,
									shou_yang_ri_qi_: item.shou_yang_ri_qi_
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_er_ != '' && parseInt(item.shu_liang_er_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_er_,
									num: item.shu_liang_er_,
									condition: item.yang_pin_yun_shu_,
									shou_yang_ri_qi_: item.shou_yang_ri_qi_
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_san_ != '' && parseInt(item.shu_liang_san_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_san_,
									num: item.shu_liang_san_,
									condition: item.yang_pin_yun_san,
									shou_yang_ri_qi_: item.shou_yang_ri_qi_
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_si_ != '' && parseInt(item.shu_liang_si_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_si_,
									num: item.shu_liang_si_,
									condition: item.yang_pin_yun_si_,
									shou_yang_ri_qi_: item.shou_yang_ri_qi_
								}
								list.push(obj)
							}

						})
						this.list = list

						if (list.length > 0) {
							this.$nextTick(() => {
								this.getBtn()
							})
						}

					}
				})
			},
			getBtn() {
				// document.getElementById("qrcode").appendChild(canvas);
				//点击生成canvas转换成base64的图片
				var width = document.getElementById('box').offsetWidth,
					height = document.getElementById('box').offsetHeight,
					scale = window.devicePixelRatio; //放大倍数
				html2canvas(document.getElementById('box'), {}).then(canvas => {
					const dataURL = canvas.toDataURL()
					this.imgSrc = dataURL
					uni.showToast({
						title: '标签图片已生成,可以下载',
						icon: 'none',
						duration: 2000
					})

				});
			},
			getAction() {
				let data = ['下载']
				uni.showActionSheet({
					itemList: data,
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.downloadImage()
								break;
								// case 1:
								// 	this.getSave()
								// 	break;
						}
					},
					fail: function(res) {}
				});
			},
			downloadImage() {
				// const dataURL = canvas.toDataURL('image/png')
				const creatDom = document.createElement('a')
				document.body.appendChild(creatDom)
				creatDom.href = this.imgSrc
				creatDom.download = this.time + '样品标签图片'
				creatDom.click()
			},
			getSave() {
				let pp = {
					paramWhere: [{
						id_: this.id
					}],
					tableName: "t_lhwtsqb",
					paramCond: {
						biao_qian_tu_pian: this.imgSrc,
						update_time_: this.time,
						update_by_: this.userid
					}
				}
				let data = this.$sig(pp)

				this.$http.post("ibps/business/v3/sys/universal/updateDatasContextTable", data).then(res => {
					if (res.data.state == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000
						})
						this.$emit('saveSuccees')

					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'none',
							duration: 2000
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {}

	.tagBoss {
		width: 1920rpx;
		padding: 10rpx;
	}

	.tagBox {
		width: 237px;
		// height: 136px;
		border: 1rpx solid #000000;
		padding: 8rpx;
		margin: 30rpx 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.la {
		display: flex;
	}

	.lh {
		font-size: 24rpx;
		display: flex;

		.lhLeft {
			min-width: 60px;
		}

	}

	/deep/ uni-mask .uni-actionsheet__mask {
		z-index: 900
	}
</style>