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>{{ item.baBorrowOperDate }}
						</div>
						<div style="margin: 5px 0;">
							<span style="color: var(--text-c);">申 请 人 ：</span>{{ item.baBorrowApplyName }}
						</div>
					</div>
					<div style="padding: 0 8px 8px;">
						<div><span style="color: var(--text-c);line-height: 20px;">住 院 号 ：</span>{{ item.zyNum }}</div>
						<div><span style="color: var(--text-c);line-height: 20px;">用&emsp;&emsp;途：</span>{{ item.baBorrowUsetoName }}</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;">联系电话：</span>{{ item.baBorrowPhone}}</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>
					<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;"
								 @click="onOpenDetail(item)">
							详&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>
		</van-popup>
	</div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-helper'
import { axios } from 'axios'
import { store } from 'vue-helper'


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
		}) 

		const mockData = [
			{
				id: 1,
				ipsId: '123456789',
				dx: '高血压',
				ptId: '11111111',
				ptName: '张三',
				deptId: '0032',
				deptName: '心血管医学中心',
				ptIdcId: '111111111111111111',
				phone: '15977775551',
				applyerName: '',
				applyerRel: '',
				applyerRelId: '',
				ptIdcImg1: '',
				ptIdcImg2: '',
				applyerIdcImg1: '',
				applyerIdcImg2: '',
				agreementLetterImg: '',
				applyTime: '2023-06-01 12:12:00',
				useway: '自用留存',
				usewayId: 123,
				getWay: '邮寄',
				address: '云南省昆明市五华区荷塘月色8栋2单元102室',
				expressInfo: '',
				stateId: null,
				noReviewNote: '',
				pages: 15,
				isPay: 0,
				isPrint: 0,
				statusId: null,
				statusDate: null,
				statusNote: ''
			}
		] 

		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/xbd/getMRHistory', {
				patientId: patient.value.patientId,
			}).then(response => {
				if (response.code === 200) {
					state.recordList = response.data
				}
			})
		}
		getHistory()

		function onOpenDetail(item) {
			// state.show = true
		}

		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()
		})

		return {
			state,
			onOpenDetail,
			toPay,
			getSetup
		}
	}

}
</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>