wxUI/src/views/medical-record/medical-record-history.vue

<template>
	<div class="history">
		<select-patient-date :show-code="false"
												 :days="0"
												 :show-navbar="false"
												 :show-date="false"></select-patient-date>

		<section>
			<section v-for="(item, k) in state.recordList"
							 :key="k"
							 :i="item.setup = getSetup(item)">
				<div class="record_item">
					<div style="height: 50px;margin-right: 40px;padding: 8px 8px 0px;">
						<div style="margin: 5px 0;">
							<span style="color: var(--text-c);">申请时间：</span>{{ dateUto(item.applyTime) }}
						</div>
						<div style="margin: 5px 0;">
							<span style="color: var(--text-c);">申 请 人 ：</span>{{ item.applyName }}
						</div>
					</div>
					<div style="padding: 0 8px 8px;">
						<div><span style="color: var(--text-c);line-height: 20px;">住 院 号 ：</span>{{ item.treatId }}</div>
						<div><span style="color: var(--text-c);line-height: 20px;">联系电话：</span>{{ item.phone}}</div>
						<div><span style="color: var(--text-c);line-height: 20px;">用&emsp;&emsp;途：</span>{{ item.use }}</div>
						<!-- <div><span style="color: var(--text-c);line-height: 20px;">住院科室：</span>{{ item.deptName }}</div> -->
						<!-- <div><span style="color: var(--text-c);line-height: 20px;">获取方式：</span>{{ item.baBorrowGetway === 0?'自提': item.baBorrowGetway === 1?'邮寄': ''}}</div> -->
						<!-- <div><span style="color: var(--text-c);line-height: 20px;">地&emsp;&emsp;址：</span>{{ item.baBorrowAddress }}</div> -->
						<!-- <div><span style="color: var(--text-c);line-height: 20px;">备&emsp;&emsp;注：</span>{{ item.baBorrowNote }}</div> -->
						<!-- <div><span style="color: var(--text-c);line-height: 20px;">页&emsp;&emsp;数：</span>{{ item.pages }}</div> -->
						<!-- <van-steps :active="item.setup">
							<van-step>申请</van-step>
							<van-step>审核</van-step>
							<van-step>复印成功</van-step>
							<van-step>完成</van-step>
						</van-steps> -->
						<div style="display: flex;">
							<span style="color: var(--text-c);line-height: 20px;">图&emsp;&emsp;片：</span>
							<div style="display: flex;flex-direction: row;justify-content: flex-start;color: var(--color-primary);">
								<div v-if="item.idcardFront"
										 style="margin-right: 14px;border-bottom: 1px solid var(--color-primary);"
										 @click="onImagePreview(item.idcardFront)">身份证正面</div>
								<div v-if="item.idcardBack"
										 style="margin-right: 14px;border-bottom: 1px solid var(--color-primary);"
										 @click="onImagePreview(item.idcardBack)">身份证背面</div>
								<div v-if="item.inHospProve"
										 style="border-bottom: 1px solid var(--color-primary);"
										 @click="onImagePreview(item.inHospProve)">住院证明</div>
							</div>
						</div>
					</div>
					<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
						<!-- <div v-if="item.baBorrowIsApproved"
								 style="flex: 1;text-align: center;line-height: 35px;background-color: var(--color-success);color: #fdfdfd;padding: 0 5px 5px;margin-right: 2px;"
								 @click="toPay(item)">
							支&emsp;付
						</div> -->
						<!-- <div style="flex: 1;text-align: center;line-height: 35px;background-color: var(--color-primary);color: #fdfdfd;padding: 0 5px 5px;">
							详&emsp;情
						</div> -->
					</div>

					<!-- <div v-if="item.baBorrowIsApproved === null || item.baBorrowIsApproved === undefined"
							 class="recipe_tag">待审核</div>
					<div v-else-if="item.baBorrowIsApproved"
							 class="recipe_tag"
							 style="background-color: var(--color-primary);color: #fff;">已审核</div>
					<div v-else-if="!item.baBorrowIsApproved"
							 class="recipe_tag"
							 style="background-color: var(--color-danger);color: #fff;">驳 回</div> -->
				</div>
			</section>
		</section>
		<van-popup v-model:show="state.show">
			<div style="width: 82vw;max-height: 80vh;min-height: 300px;background-color: #fff;padding: 5px;">
				<div style="padding: 5px 10px 8px;font-size: 15px;color: var(--text-a);text-align: center;">病案打印详情</div>
				<!-- <div>
					<van-steps :active="state.setup">
						<van-step>申请</van-step>
						<van-step>审核</van-step>
						<van-step>复印成功</van-step>
						<van-step>完成</van-step>
					</van-steps>
				</div> -->

				<div style="display: flex;flex-direction: row; flex-wrap: wrap;justify-content: flex-start;">
					<van-image v-for="(img, index) in state.images"
										 :key="index"
										 :src="'data:image/png;base64,'+img"
										 style="width: 30%;border: 1px solid var(--border-b);margin-right: 5px;"></van-image>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
import { axios } from 'axios'
import { store } from 'vue-helper'
import { format } from '@/utils/date-util.mjs'

export default {
	name: 'history',
	components: {
		'select-patient-date': VueConfig.vueLoader('@/components/patient/select-patient-date.vue')
	},

	setup(props) {
		const state = reactive({
			recordList: [],						// 历史记录
			show: false,							// 详情弹框
			setup: 0,
			images: []
		})

		const patient = ref(null)
		/**
		 * 获取打印申请历史记录
		 */
		function getHistory() {
			patient.value = store.getters.getPatient
			if (!patient.value || (patient.value && !patient.value.patientId)) return vant.Toast.fail('患者参数缺失，无法查询翻拍记录！')
			axios.RGet('wx/record/listByPatientId', {
				patientId: patient.value.patientId,
			}).then(response => {
				if (response.code === 200) {
					state.recordList = response.data
				} else {
					vant.Toast.fial(response.message)
				}
			})
		}
		getHistory()

		function toPay(item) {

		}

		function getSetup(item) {
			if (!item.baBorrowOperDate) return 0
			if (item.baBorrowIsApproved) return 1
			if (item.baBorrowIsPrint) return 2
			if (item.baBorrowIsPay) return 4
		}

		watch(() => store.getters.getPatient, () => {
			getHistory()
		})


		/**
		 * 图片预览
		 * @param {String} img 图片
		 */
		function onImagePreview(img) {
			vant.ImagePreview({
				images: [img.indexOf('data:image/') === -1 ? 'data:image/png;base64,' + img : img],
				closeable: true,
			})
		}

		function dateUto(time) {
			const date = new Date(time)
			return format(date, 'yyyy-MM-dd hh:mm')
		}

		return {
			state,
			toPay,
			getSetup,
			onImagePreview,
			dateUto
		}
	}

}
</script>
<style scoped>
.history {
}
.record_item {
	margin: 5px;
	border: 1px solid var(--border-a);
	border-radius: 5px;
	font-size: 13px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
}
.recipe_tag {
	text-align: center;
	position: absolute;
	background-color: grey;
	color: #fff;
	width: 100px;
	height: 18px;
	line-height: 18px;
	top: 10px;
	right: -30px;
	transform: rotate(45deg);
	font-size: 13px;
}
.history >>> .van-popup--center {
	border-radius: 5px;
}
</style>