<template>
|
<div class="paiban">
|
<van-nav-bar
|
title=""
|
left-text="返回"
|
left-arrow
|
@click="fanhui"
|
/>
|
<div>
|
<van-calendar
|
color="#769AFF"
|
:min-date="minDate"
|
@month-show="monthShow"
|
:poppable="false"
|
:show-confirm="false"
|
@select="selectData"
|
:formatter="formatter"
|
:show-title="false"
|
:style="{ height: '400px' }"
|
/>
|
</div>
|
<div class="listdiv" v-for="(item,index) in selectDate" :key="index">
|
<div class="listrow" v-if="item.code !== ''">
|
<van-row class="rowhand">
|
<van-col span="18">
|
<van-icon style="color: #00f;" name="bell" />
|
{{item.y}}年{{item.m}}月{{item.d}}日
|
</van-col>
|
<van-col span="6">
|
<div>
|
<div class="sqtb" v-if="item.timeSlot === 0">
|
上午
|
</div>
|
<div class="sqtb" v-if="item.timeSlot === 1">
|
下午
|
</div>
|
<div class="sqtb" v-if="item.timeSlot === 2">
|
晚上
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<van-row v-if="item.code !== ''">
|
<div class="info"></div>
|
<van-row class="lable">
|
<van-col span="12">机号</van-col>
|
<van-col span="12">透析模式</van-col>
|
</van-row>
|
<van-row class="value">
|
<van-col span="12">{{item.deviceGroupName}} {{item.deviceName}}</van-col>
|
<van-col span="12">{{item.type}}</van-col>
|
</van-row>
|
</van-row>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { Calendar as vanCalendar } from 'vant'
|
import { ref,onMounted } from 'vue'
|
import {useRouter} from 'vue-router'
|
import {ajaxPost} from '@/utils/axios'
|
import { userInfoStore } from '@/stores/userInfo'
|
const router=useRouter()
|
const userInfo = userInfoStore()
|
const day=new Date()
|
const Year = day.getFullYear()
|
const minDate=ref( new Date(Date.parse(Year+'-01-01'.replace(/-/g, '/'))))
|
const selectDate=ref([{y:2000,m:1,d:1,type:'',code:'',id:0,deviceGroupName:'',scheduleDay:'',deviceName:'',timeSlot:1}])
|
const fanhui=()=>{
|
router.go(-1)
|
}
|
const selectData=(data:any)=>{
|
console.log(data)
|
}
|
const getPaiban=(date:Date)=>{
|
console.log(date)
|
const y=date.getFullYear()
|
const m= date.getMonth()+1
|
console.log('年='+y+'月='+m)
|
const pagedata={
|
patientCode:userInfo.patient.patientInfo.code,
|
year:y,
|
month:m,
|
}
|
ajaxPost('/hemo/med/schedule/listMonthSchedulesByPat',pagedata).then((re:any)=>{
|
console.log(re)
|
re.forEach((element:any) => {
|
const dey=element.scheduleDay.split('-')
|
// 不能添加重复的
|
const x=selectDate.value.findIndex(e=>{return e.code===element.code})
|
if (x===-1){
|
selectDate.value.push({
|
y:Number(dey[0]),
|
m:Number(dey[1]),
|
d:Number(dey[2].substring(0,2)),
|
type:element.patientVsHemoMedSchemeName,
|
deviceGroupName:element.deviceGroupName,
|
deviceName:element.deviceNo,
|
timeSlot:element.timeSlot,
|
code:element.code,
|
scheduleDay:element.scheduleDay,
|
id:element.id,
|
透析单状态:element.透析单状态,
|
|
})
|
}
|
|
})
|
selectDate.value= selectDate.value.sort((a,b)=>new Date(b.scheduleDay)-new Date(a.scheduleDay))
|
// return new Date(b.scheduleDay) - new Date(a.scheduleDay));
|
// })
|
console.log(selectDate.value)
|
})
|
}
|
const monthShow=(month:any)=>{
|
console.log(month)
|
getPaiban(month.date)
|
}
|
const formatter=(day:any)=>{
|
const year=day.date.getFullYear()
|
const month = day.date.getMonth() + 1
|
const date = day.date.getDate()
|
const index= selectDate.value.findIndex(el=>{return el.y===year&&el.m===month&&el.d===date})
|
if (index>0){
|
console.log(day)
|
if (selectDate.value[index].透析单状态){
|
day.type='start'
|
} else {
|
day.type='end'
|
}
|
day.text=selectDate.value[index].type
|
if (selectDate.value[index].timeSlot===0){
|
day.bottomInfo='上午'
|
}
|
else if (selectDate.value[index].timeSlot===1){
|
day.bottomInfo='上午'
|
}
|
else {
|
day.bottomInfo='晚上'
|
}
|
}
|
return day
|
}
|
onMounted(()=>{
|
console.log('页面初始化')
|
const day=new Date()
|
const Year = day.getFullYear()
|
console.log(Year)
|
// 只能选取当年的
|
minDate.value=new Date(Date.parse(`${Year}-01-01`.replace(/-/g, '/')))
|
})
|
</script>
|
<style scoped lang="scss">
|
.paibanclass {
|
background: rgb(201, 110, 19);
|
color: rgb(41, 41, 200);
|
}
|
|
.paiban {
|
background-color: #f6faff;
|
padding: 0;
|
}
|
|
.listdiv {
|
margin-top: 20px;
|
|
.listrow {
|
margin-top: 10px;
|
width: 94%;
|
margin-left: 3%;
|
height: 129px;
|
background: #fff;
|
box-shadow: 0 2px 4px 0 rgba(70, 150, 249, 0.1);
|
border-radius: 8px;
|
|
.rowhand {
|
padding-top: 20px;
|
padding-left: 4px;
|
height: 20px;
|
font-size: 14px;
|
font-family: Arial, sans-serif;
|
font-weight: 500;
|
color: #333;
|
line-height: 20px;
|
letter-spacing: 1px;
|
|
.sqtb {
|
color: #4696f9;
|
|
// background: #4696F9;
|
height: 18px;
|
line-height: 18px;
|
border: #4696f9 1px solid;
|
width: 60px;
|
text-align: center;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
}
|
|
.info {
|
margin-top: 10px;
|
width: 90%;
|
margin-left: 5%;
|
height: 1px;
|
background: #f1f1f2;
|
margin-bottom: 10px;
|
}
|
|
.lable {
|
width: 90%;
|
margin-left: 5%;
|
height: 17px;
|
font-size: 12px;
|
font-family: Arial, sans-serif;
|
font-weight: 400;
|
color: #aaa;
|
line-height: 17px;
|
}
|
|
.value {
|
margin-top: 20px;
|
width: 90%;
|
margin-left: 5%;
|
height: 18px;
|
font-size: 13px;
|
font-family: Arial, sans-serif;
|
font-weight: 500;
|
color: #333;
|
line-height: 18px;
|
}
|
}
|
}
|
|
.fanhui {
|
// padding-top: 20px;
|
width: 100%;
|
background: #4696f9;
|
text-align: center;
|
border-radius: 5px;
|
color: #fff;
|
height: 36px;
|
line-height: 36px;
|
}
|
|
</style>
|
