carbasics2023_web_pad_v4/src/views/before/UploadCT.vue

<!--
 * @desc: 院前CT
 * @Author: gaowenya
 * @Date: 2023-07-24 16:58
 * @LastEditors: 
 * @LastEditTime: 
-->
<template>
	<div class="upload-informed-container">
		<div class="upload-container">
			<div class="info">上传院前CT图片</div>
			<div class="upload-list">
				<div class="upload-list-item" v-for="(item, index) in fileList" :key="index"
					@click="handlePreview(item)">
					<div class="img">
						<img :src="item" alt="" />
					</div>
					<div class="delete" @click="del(index)">
						<a-icon type="close-circle" theme="twoTone" />
					</div>
				</div>
				<div class="plus" v-if="fileList.length < 5" @click="openCamera">
					<a-icon type="plus" />
				</div>
			</div>
		</div>
		<a-button :disabled="writeAble" class="common-button" type="primary" size="large" shape="round" @click="onSubmit">提交</a-button>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>

<script>
	import {
		uploadBase64
	} from 'api';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				previewVisible: false,
				previewImage: '',
				fileList: [],
			};
		},
		computed: {
			...mapState('patient', ['patientData', 'writeAble']),
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				//TODU
				const {
					recordValDict
				} = vm.patientData;
				if (recordValDict) {
					vm.$nextTick(() => {
						vm.echo(recordValDict);
					});
				}
			});
		},
		methods: {
			echo(data) {
				if (data['JMRS-YQ-CT']) {
					const {
						answer
					} = data['JMRS-YQ-CT'][0];
					this.fileList = answer;
				}
			},
			del(index) {
				if(this.writeAble) {
					this.$message.success('患者已审核，内容不可更改')
					return
				}
				this.fileList.splice(index, 1);
			},
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(path) {
				this.previewImage = path;
				this.previewVisible = true;
			},
			openCamera() {
				if(this.writeAble) {
					this.$message.success('患者已审核，内容不可更改')
					return
				}
				const cmr = plus.camera.getCamera();
				const res = cmr.supportedImageResolutions[0];
				const fmt = cmr.supportedImageFormats[0];
				cmr.captureImage(
					(path) => {
						plus.io.resolveLocalFileSystemURL(
							path,
							(entry) => {
								//压缩图片
								this.compressImage(entry.toLocalURL(), entry.name);
							},
							(e) => {
								plus.nativeUI.toast(
									'读取拍照文件错误：' + e.message
								);
							}
						);
					},
					(error) => {
						// alert("Capture image failed: " + error.message);
					}, {
						resolution: res,
						format: fmt,
						filter: 'image',
					}
				);
			},
			//压缩图片
			compressImage(url, filename) {
				var name = '_doc/upload/' + filename;
				plus.zip.compressImage({
						src: url, //src: (String 类型 )压缩转换原始图片的路径
						dst: name, //压缩转换目标图片的路径
						quality: 90, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
						overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
						width: '250',
						height: '320',
					},
					(zip) => {
						//页面显示图片
						this.showPics(zip.target, name);
					},
					(error) => {
						plus.nativeUI.toast('压缩图片失败，请稍候再试');
					}
				);
			},
			//显示图片
			showPics(url, name) {
				let _this = this;
				//根据路径读取到文件
				plus.io.resolveLocalFileSystemURL(url, (entry) => {
					entry.file((file) => {
						var fileReader = new plus.io.FileReader();
						fileReader.readAsDataURL(file);
						fileReader.onloadend = (e) => {
							var picUrl = e.target.result.toString();
							this.uploadBase64(picUrl, file.name);
						};
					});
				});
			},
			// 上传成功回
			async uploadBase64(base64, fileName) {
				if (!base64) return '您还未选择图片';
				let res = await uploadBase64({
					base64,
					fileName,
				});
				const {
					realPath,
					code,
					msg
				} = res;
				if (code === 200) {
					this.fileList.push(realPath);
				} else {
					this.$message.error(res.msg);
				}
			},
			async onSubmit(e) {
				e.preventDefault();
				let codeAndAnswerList = [];
				codeAndAnswerList.push({
					questionCode: 'JMRS-YQ-CT',
					answer: this.fileList,
					time: '',
				});
				await this.home.updateAidCode({
					codeAndAnswerList,
				});
			},
		},
	};
</script>
<style lang="less">
	.upload-informed-container {
		flex: 1;
		padding-top: 36px;
		display: flex;
		flex-direction: column;

		.upload-container {
			flex: 1;

			.info {
				font-size: 18px;
				font-family: Source Han Sans CN, Source Han Sans CN-Bold;
				font-weight: 700;
				text-align: left;
				margin-bottom: 20px;
				color: #393d4e;
			}

			.plus {
				width: 180px;
				height: 180px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #ffffff;
				border: 2px dashed #a3acbf;
				border-radius: 12px;
				font-size: 40px;
				color: #a3acbf;
			}

			.upload-list {
				display: flex;
				flex-wrap: wrap;

				.upload-list-item {
					width: 180px;
					margin-right: 3%;
					margin-bottom: 10px;
					height: 180px;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					.img{
						width: 180px;
						height: 180px;
						overflow: hidden;
						border-radius: 12px;
						background: #f2f2f2;
						img{
							width: 100%;
							height: auto;
						}
					}
					.delete {
						position: absolute;
						right: -5px;
						top: -10px;

						.anticon {
							font-size: 26px;
						}
					}
				}
			}
		}
	}

	/* you can make up upload button and sample style by using stylesheets */
	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}
</style>