legacy.pda.deploy-review/pages/edit/edit.vue

<template>
  <view class="main">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" :leftWidth=120 :rightWidth=120 :height=100 :width="1200"
			title="调配详情" @clickLeft="handleBack"
		/>
		
		<view class="content">
			<view class="header">
				<view class="ti">
					<view class="left">
						<view class="baracode">
							<w-barcode :options="preseObj"></w-barcode>
							<view class="barnum">{{v.pres_id}}</view>
						</view>
					</view>
					<view class="mid">
						<text class="title">中药处方笺</text>	
					</view>
					<view class="rig"><text class="title">{{v.pres_type}}</text></view>
				</view>
				<view class="patiinfo">
					<view class="r1">
						<view class="row">姓名：{{v.name}}</view>
						<view class="row">性别：{{v.sex}}</view>
						<view class="row">年龄：{{v.age}}岁</view>
						<view class="row">电话：{{v.tel}}</view>
						<view class="row status">当前处方状态：{{v.pres_status}}</view>
					</view>
					<view class="r2">
						<view class="row">就诊科室：{{v.office}}</view>
						<view class="row">临床诊断：{{v.dis_name}}—{{v.sym_name}}</view>
						<view class="row">开方时间：{{v.create_at}}</view>
					</view>
					<view class="r3">联系地址：{{v.addr}}</view>
				</view>
			</view>
			<view class="rp">
				<view class="title">
					<text class="text">Rp:</text>
				</view>
				<view class="lists">
					<view class="item"  v-for="(x, i) in v.rp" :key="i">
						<view class="le tag-view">
							<uni-tag :inverted="!selectRps.includes(x)" :text=x.name+x.num @click="handleGetRps(x)" />
						</view>
						<view class="rig">
							<view class="up"> {{x.tips}}</view>
							<view class="do"> {{x.sign}}</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="js">
						剂数：{{v.pies}}
						<view v-if="v.pies_tips!==''" class="pies_tips">
							({{v.pies_tips}})
						</view>
					</view>
					<view class="js">{{v.med_type}}</view>
					<view class="js">{{v.eat_type}}</view>
					<view class="js">每次{{v.capa}}</view>
					<view class="js">{{v.freque}}</view>
					<view class="freque">{{v.eat_tips}}</view>
				</view>
				<view class="rp-tips">{{v.rp_tips}}</view>
			</view>
			<view class="amountarea">
				<view class="amount">
					<view class="r1">
						<view class="pijw">药品金额：{{v.money.drugs_amount}}</view>
					</view>
					<view class="r2">
						<view class="jyf">煎药费：{{v.money.cook_fee}}</view>
						<view class="psf">配送费：{{v.money.delie_fee}}</view>
					</view>
					<view class="r3">
						总金额：{{v.money.summary}}
						<!-- <view class="zjw"></view> -->
					</view>
				</view>
				<view class="service">
					<view class="kf">开方：{{v.service.extra_doc}}</view>
					<view class="kf">审核：{{v.service.check_doc}}</view>
					<view class="kf">调配：{{v.service.depoly}}</view>
					<view class="kf">复核：{{v.service.review}}</view>
					<view class="kf">浸泡：{{v.service.steep}}</view>
					<view class="kf">煎煮：{{v.service.cook}}</view>
					<view class="kf">打包：{{v.service.pack}}</view>
					<view class="kf">发药：{{v.service.dispen}}</view>
				</view>
			</view>
			<view class="comment">
				<view class="z">注：</view>
				<text>{{v.comment}}</text>
			</view>
		</view>
		<view class="upload">
			<view class="title">上传照片</view>
			<uni-file-picker
				class="plugin"
				v-model="depolyImage"  
				file-mediatype="image"
				mode="grid"
				file-extname="png,jpg"
				:image-styles="depolyImageStyles"
				:limit="3"
				@success="success" 
			/>
		</view>
		
		<view class="cooment">
			<view class="title">备注内容</view>
			<view class="tex">
				<input placeholder="请输入" placeholder-style="font-size: 30px;" height="40px" @input="bindTextInput" class="input"/>
			</view>
		</view>
		<view class="radio">
			<label for="">
				<switch :checked="isPrint" @change="handleChange" /> 上传时直接打印标签
			</label>
		</view>
		<view class="submit">
			<button type="primary" class="bu" @click="handleSubmit">上传</button>
		</view>
		<view class="popup">
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="center" cancelText="不打印" confirmText="打印" title="打印标签" @confirm="dialogConfirm" @close="dialogClose">
					<view class="cotent" id="printMe">
						<view class="title">默默事中医院取药标签打印(门诊)</view>
						<view class="body">
							<view class="lef">
								<view class="baracode">
									<w-barcode class="cav" :options="preseObj"></w-barcode>
									<view class="barnum">NO.{{v.pres_id}}</view>
								</view>
							</view>
							<view class="rig">
								<view class="hz">患者：<view class="bold">{{v.name}}，{{v.sex}}，{{v.age}}岁</view></view>
								<view class="hz">出生日期：<view class="bold">{{v.birth}}</view></view>
							</view>
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
  </view>
</template>

<script>
  export default {
    name: ''
  }
</script>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { selectOrderDetail } from "@/static/api.js"
import { onLoad } from '@dcloudio/uni-app'

const preseId = ref(11220822134401)
const preseObj = ref({
		code: '11220822134401',
		color:['#000'], // 条形码的颜色
		bgColor: '#FFFFFF', // 背景色
		width: 200, // 宽度
		height: 50 // 高度
})

const {proxy} = getCurrentInstance()

const depolyImageStyles = ref({
	width:200,
	height:200,
	border:{
		color:"#cfcfcf",
		width:1,
		style:'dashed',
		radius:'2px'
	}
})

const depolyImage = ref([])
const barOpations = ref({
	height: 80,
	displayValue: false
})

const selectRps = ref([])

const isPrint = ref(true)

const success = ()=>{
	console.log('uni-file-picker',depolyImage.value)
}

const bindTextInput = (e)=>{
	console.log(e.detail.value)
}
const v=ref({
	pres_id:11220822134401,
	pres_type:'普通处方',
	name:'李某',
	sex:'男',
	age:35,
	tel:'13888888888',
	pres_status: '发药',
	office:'中医内科',
	dis_name:'胃脘痛病',
	sym_name:'脾胃虚寒证',
	create_at:'2023-06-01 15:58',
	addr:'浙江省某某事某某去某某事中医院门诊楼三楼302是',
	rp:[
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'先煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'先煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'先煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'先煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'包煎',sign:'医生签名'},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'先煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'包煎',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''},
		{name:'车前子',num:'6g',tips:'',sign:''}
	],
	pies:3,
	pies_tips:'待见',
	med_type:'汤剂',
	eat_type:'煎服',
	capa:'200ml',
	freque:'一日三次',
	eat_tips:'饭后服',
	rp_tips:'注意多休息，饮食清单。',
	money:{
		drugs_amount: 187.00,
		cook_fee:30.00,
		delie_fee:10.00,
		summary: 227.00,
	},
	service:{
		extra_doc:'A医生',
		check_doc:'B医生',
		depoly:'调陪人',
		review:'复核人',
		steep:'浸泡',
		cook:'煎煮人',
		pack:'大宝人',
		dispen:'发药人',
	},
	comment:'1、本处方当日有效\n  2、取药时请您当面核对。。。。 \n  3、延长处方用量时间原油：慢性病 其他老年病 外地 其他'
})
onMounted(() => {

})


onLoad(async() => {
	const params = {
		token: token,
		data: {
			id: userId,
		}
	}
	const {data:res } = selectOrderDetail(params)
})

const handleGetRps = (v)=>{
	console.log('handleGetRps', v)
	if(!selectRps.value.includes(v)) {
		selectRps.value.push(v)
	} else {
		selectRps.value.splice(selectRps.value.indexOf(v), 1)
	}
}

const handleChange = ()=>{
	isPrint.value = !isPrint.value
	console.log('handleChange', isPrint.value)
}

const handleBack =()=>{
	uni.navigateBack({
		delta: 1
	})
}

const handleSubmit = ()=>{
	if(!isPrint){
		// 直接调用接口，然后打印
		print("#printMe")
		console.log('直接调用接口，然后打印')
	} else {
		// 弹窗提醒
		// console.log("handleSubmit proxy.$refs.alertDialog",proxy.$refs.alertDialog)
		proxy.$refs.alertDialog.open('center')
	}
}

const dialogConfirm = ()=>{
	console.log('dialogConfirm直接调用接口，然后打印')
	print("#printMe")
}
const dialogClose = ()=>{
	console.log('dialogClose直接调用接口，不打印')
}

</script>

<style lang="scss">
.main {
	display: flex;
	flex-direction:column;
	justify-content:flex-start;
	// height: 2000px;
	width: 1200px;
	.content{
		margin: 10px;
		background-color: #fff;
		flex-direction:column;
		align-items: center;
		.header{
			display: flex;
			flex-direction:column;
			margin:16px 16px 0;
			.ti{
				display: flex;
				flex-direction:row;
				justify-content: space-between;
				.left{
					align-items: flex-start;
					.baracode{
						display: flex;
						flex-direction:column;
						width: 320px;
						// align-items: center;
						.barnum{
							width:320px;
							font-size: 40px;
							display: flex;
							justify-content:center;
							align-items: center;
							letter-spacing: 0.1em;
						}
					}
				}
				.mid{
					align-items: flex-start;
					justify-content:center;
					width:320px;
					display: flex;
					.title{
						font-size: 40px;
						margin-top: 20px;
						font-weight: 800;
					}
				}
				.rig{
					align-items: flex-start;
					justify-content:flex-end;
					width:320px;
					display: flex;
					.title{
						font-size: 26px;
						width: 60px;
						font-weight: 300;
					}
				}
			}
			.patiinfo{
				display: flex;
				flex-direction:column;
				margin-top: 5px;
				padding-bottom: 10px;
				border-bottom: 1px solid #000;
				.r1{
					display: flex;
					flex-direction:row;
					height: 50px;
					.row{
						font-size: 28px;
						font-weight: 400;
						margin-right: 30px;
					}
					.status{
						background-color: #cfcfcf;
					}
				}
				.r2{
					display: flex;
					flex-direction:row;
					margin-top: 5px;
					height: 50px;
					.row{
						font-size: 28px;
						font-weight: 400;
						margin-right: 20px;
					}
				}
				.r3{
					display: flex;
					flex-direction:row;
					height: 50px;
					margin-top: 5px;
					font-size: 28px;
					font-weight: 400;
				}
			}
		}
		.rp{
			display: flex;
			flex-direction:column;
			margin:0 16px 0;
			border-bottom: 1px solid #000;
			.title{
				font-size: 40px;
			}
			.lists{
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content:flex-start;
				align-content:flex-start;
				margin-left:80px;
				// width: 1000px;
				// height: 1800px;
				.item{
					display: flex;
					justify-content:center;
					align-items: center;
					height:80px;
					width: 220px;
					margin-right: 40px;
					// flex-basis: 25%;
					.le{
						display: flex;
						// width: 160px;
						font-size: 28px;
						
					}
					.tag-view:deep(.uni-tag){
						display: flex;
						justify-content:center;
						align-items: center;
						font-size: 20px;
						height: 40px;
						width: 100px;
						padding: 6px 20px;
					}
					.rig{
						display: flex;
						flex-direction:column;
						margin-left: 10px;
						.up{
							width: 80px;
							height: 22px;
						}
						.do{
							width: 80px;
							height: 22px;
						}
					}
				}
			}
			.footer{
				margin: 20px 0 0 80px;
				display: flex;
				font-size: 25px;
				.js{
					display: flex;
					margin-right: 100px;
					.pies_tips{}
				}
				.freque{}
			}
			.rp-tips{
				display: flex;
				justify-content:flex-end;
				font-size: 25px;
			}
		}
		.amountarea{
			display: flex;
			margin: 10px 16px 0;
			padding-bottom: 10px;
			border-bottom: 1px solid #000;
			.amount{
				display: flex;
				flex-direction:column;
				.r1{
					border: 1px solid #000;
					font-size: 30px;
					width: 400px;
					display: flex;
					justify-content:center;
					align-items: center;
					height: 50px;
				}
				.r2{
					display: flex;
					justify-content:center;
					align-items: center;
					font-size: 30px;
					height: 50px;
					width: 400px;
					border-left: 1px solid #000;
					border-right: 1px solid #000;
					.jyf{
						
						width: 200px;
						display: flex;
						justify-content:center;
						align-items: center;
					}
					.psf{
						border-left: 1px solid #000;
						width: 201px;
						display: flex;
						justify-content:center;
						align-items: center;
					}
				}
				.r3{
					display: flex;
					justify-content:center;
					align-items: center;
					height: 50px;
					font-size: 30px;
					border: 1px solid #000;
				}
			}
			.service{
				display: flex;
				flex-wrap: wrap;
				margin-left: 50px;
				.kf{
					font-size: 30px;
					margin-right: 55px;
				}
			}
		}
		.comment{
			margin: 10px 16px 10px;
			font-size: 30px;
			line-height: 50px;
			display: flex;
		}
	}
	.upload{
		margin: 0 10px 10px;
		background-color: #fff;
		flex-direction:column;
		align-items: center;
		padding: 20px;
	
		.title{
			font-size: 40px;
			margin-bottom:20px;
		}
		.plugin{
			// margin-left: 20px;
		}
	}
	.cooment{
		margin: 0 10px 10px 10px;
		background-color: #fff;
		flex-direction:column;
		align-items: center;
		padding: 20px;
		.title{
			font-size: 40px;
			margin-bottom:20px;
		}
		.tex{
			display: flex;
			justify-content:flex-start;
			align-items: center;
			margin-bottom:20px;
			border: 1px solid #cfcfcf;
			height: 60px;
			.input{
				height: 30px;
				font-size: 30px;
				padding-left: 10px;
			}
		}
	}
	.radio{
		display: flex;
		margin: 0 10px 10px 10px;
		// background-color: #fff;
		flex-direction:column;
		// align-items: center;
		font-size: 20px!important;
	}
	.submit{
		display: flex;
		margin: 40px 10px;
		// background-color: #fff;
		align-items: center;
		
		.bu{
			display: flex;
			justify-content:center;
			align-items: center;
			height: 60px;
			width: 600px;
			font-size: 30px;
		}
	}
	
	:deep(.uni-popup-dialog){
		width: 800px;
		height: 500px;
		display: flex;
		flex-direction: column;
		background-color: #e1e3e9;
		// justify-content:center;
		// align-items: center;
		.uni-dialog-title-text{
			display: flex;
			font-size: 30px;
			padding-top: 20px;
		}
		.uni-dialog-content{
			display: flex;
			margin: 20px 40px;
			background-color: #fff;
			.cotent{
				display: flex;
				flex-direction: column;
				.title{
					font-size: 30px;
					font-weight: 500;
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content:center;
				}
				.body{
					display: flex;
					// flex-direction: column;
					justify-content:center;
					.lef{
						display: flex;
						flex-direction: column;
						width: 320px;
						justify-content:center;
						.baracode{
							display: flex;
							flex-direction:column;
							width: 320px;
							.cav{
								width:320px;
								
							}
							.barnum{
								width:320px;
								font-size: 28px;
								display: flex;
								justify-content:center;
								align-items: center;
								letter-spacing: 0.1em;
							}
						}
					}
					.rig{
						display: flex;
						flex-direction: column;
						width: 340px;
						margin-left: 30px;
						.hz{
							display: flex;
							margin-bottom: 10px;
							font-size: 28px;
						}
						.bold{
							font-weight: 500;
						}
					}
				}
			}
		}
		.uni-dialog-button-group{
			display: flex;
			margin-top: 20px;
			border: 0;
			.uni-dialog-button{
				display: flex;
				height: 78px;
				width: 100px!important;
				border: 1px solid #000;
				margin:0 40px;
				border-radius: 4px;
				.uni-dialog-button-text{
					font-size: 32px;
				}
			}
			.uni-border-left{
				height: 80px;
				width: 100px;
				border: 1px solid #007aff;
				background-color: #007aff;
				border: 1px solid #007aff;
				.uni-dialog-button-text{
					font-size: 32px;
					color: #fff;
				}
			}
		}
	}
}


</style>