319 lines
9.8 KiB
Vue
319 lines
9.8 KiB
Vue
<template>
|
||
<view class="stop-page" :class="{ 'picker-open': !showBottom }">
|
||
<navBar :title="title" />
|
||
|
||
<view class="content-area">
|
||
<!-- 停诊原因 -->
|
||
<view class="form-section">
|
||
<view class="section-title">
|
||
<text class="title-text">停诊原因</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="reason-row">
|
||
<view class="reason-btn" :class="{active: reason===1}" @click="selectReason(1)">出差</view>
|
||
<view class="reason-btn" :class="{active: reason===2}" @click="selectReason(2)">休假</view>
|
||
<view class="reason-btn" :class="{active: reason===3}" @click="selectReason(3)">临时安排</view>
|
||
<view class="reason-btn" :class="{active: reason===4}" @click="selectReason(4)">其他</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 停诊时间 -->
|
||
<view class="form-section">
|
||
<view class="section-head">
|
||
<view class="section-title">
|
||
<text class="title-text">停诊时间</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="add-more" @click="addRange">+ 再次添加</view>
|
||
</view>
|
||
|
||
<view class="range-list" v-if="reason!=3">
|
||
<view class="range-row" v-for="(item,idx) in ranges" :key="idx">
|
||
<uni-datetime-picker type="daterange" value="item" :start="start" @change="(e)=>handleChange(e,idx)" @show="closeBottom" @close="openBottom" @maskClick="openBottom"/>
|
||
<uni-icons type="minus" size="30" color="#8B2316" @click="removeRange(idx)" v-if="idx > 0"></uni-icons>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="range-list" v-if="reason==3">
|
||
<view class="range-row" v-for="(item,idx) in ranges" :key="idx">
|
||
<uni-datetime-picker type="date" value="item[0]" :start="start" @change="(e)=>handleChangeDate(e,idx)" @show="closeBottom" @close="openBottom" @maskClick="openBottom"/>
|
||
<view class="rowbox">
|
||
<uni-data-select v-model="item[1]" placeholder="请选择时段" :localdata="rangeData" @change="(e)=>changeRangeData(e,idx)"></uni-data-select>
|
||
</view>
|
||
<uni-icons type="minus" size="30" color="#8B2316" @click="removeRange(idx)" v-if="idx > 0"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
<view class="form-section">
|
||
<view class="section-title"><text class="title-text">备注</text></view>
|
||
<view class="remark-box">
|
||
<textarea v-model="remark" class="remark" maxlength="300" :placeholder="remarkPh" :adjust-position="false"/>
|
||
<!-- <view class="voice-btn" @click="recordVoice">🎤</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-actions" v-if="showBottom">
|
||
<view class="confirm-btn" @click="submit">
|
||
<text class="btn-text">确定发布</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<unidialog
|
||
:visible="noticeVisible"
|
||
:title="'公告内容'"
|
||
:cancelText="'返回修改'"
|
||
:confirmText="'确认发布'"
|
||
|
||
@close="noticeVisible=false"
|
||
@confirm="noticeConfirm"
|
||
>
|
||
<template v-slot:content>
|
||
<view class="ppt-content">
|
||
<view class="notice-row">
|
||
<view class="name">停诊原因：</view>
|
||
<view class="value" v-if="reason==1">出差</view>
|
||
<view class="value" v-if="reason==2">休假</view>
|
||
<view class="value" v-if="reason==3">临时安排</view>
|
||
<view class="value" v-if="reason==4">其他</view>
|
||
</view>
|
||
<view class="notice-row">
|
||
<view class="name">停诊时间：</view>
|
||
<view class="value">
|
||
<view class="value-item" v-for="(item,idx) in ranges" :key="idx">
|
||
<view class="value-item-date">{{ item[0] }}</view>
|
||
<view class="value-item-separator" >{{ reason==3?' ':'至' }}</view>
|
||
<view class="value-item-time">{{ item[1] }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notice-row" v-if="remark">
|
||
<view class="name">备注：</view>
|
||
<view class="value">{{ remark }}</view>
|
||
</view>
|
||
<view class="tip">
|
||
<view class="name"></view>
|
||
<view class="value">{{date}}由医生本人发布</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</unidialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import unidialog from '@/components/dialog/dialog.vue'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
|
||
import dayjs from 'dayjs'
|
||
import api from '@/api/api'
|
||
const noticeVisible = ref(false)
|
||
const date = ref(dayjs().format('YYYY年MM月DD日'))
|
||
const removeRange = (idx) => {
|
||
ranges.value.splice(idx,1)
|
||
}
|
||
const noticeConfirm = () => {
|
||
noticeVisible.value = false
|
||
addStopPatient()
|
||
}
|
||
const showBottom = ref(true)
|
||
const title = ref('发布停诊')
|
||
const reason = ref(1)
|
||
const ranges = ref([{}])
|
||
const remark = ref('')
|
||
const remarkPh = '您可以在这里填写想告诉患者的停诊补充信息，最多填写300个字哦~'
|
||
const start = ref(new Date().getTime())
|
||
const end = ref( Date.now()+10*365*24*3600*1000)
|
||
const selectReason = (val) => {
|
||
reason.value = val;
|
||
if(val==3){
|
||
ranges.value=[{}];
|
||
}
|
||
}
|
||
const addRange = () => { ranges.value.push([]) }
|
||
const rangeData=ref([{text:'上午',value:'上午'},{text:'下午',value:'下午'},{text:'晚上',value:'晚上'},{text:'全天',value:'全天'}])
|
||
|
||
|
||
const closeBottom = () => {
|
||
showBottom.value = false
|
||
}
|
||
const openBottom = () => {
|
||
showBottom.value = true
|
||
}
|
||
const handleChange = (e,idx) => {
|
||
console.log(e)
|
||
ranges.value[idx] =e;
|
||
openBottom();
|
||
console.log(showBottom.value)
|
||
}
|
||
const handleChangeDate = (e,idx) => {
|
||
console.log(e)
|
||
ranges.value[idx][0] =e;
|
||
openBottom();
|
||
console.log(showBottom.value)
|
||
}
|
||
const changeRangeData = (e,idx) => {
|
||
console.log(e)
|
||
ranges.value[idx][1] =e;
|
||
|
||
}
|
||
const addStopPatient = async () => {
|
||
let date_arr=[]
|
||
ranges.value.forEach(item=>{
|
||
date_arr.push({
|
||
param1:item[0],
|
||
param2:item[1]
|
||
})
|
||
})
|
||
//console.log(date_arr)
|
||
const res = await api.addStopPatient({
|
||
type: reason.value,
|
||
date_list: date_arr,
|
||
note: remark.value
|
||
})
|
||
if(res.code==200){
|
||
uni.$emit('updateOutPatient')
|
||
uni.showToast({ title: '发布成功', icon: 'none' })
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
|
||
const recordVoice = () => {
|
||
uni.showToast({ title: '语音录入（示意）', icon: 'none' })
|
||
}
|
||
|
||
const submit = () => {
|
||
|
||
let invalid=ranges.value.some(r => !r[0] || !r[1])
|
||
if (invalid) {
|
||
if(reason.value==3){
|
||
uni.showToast({ title: '请选择停诊时间或者时间段', icon: 'none' })
|
||
return
|
||
}else{
|
||
uni.showToast({ title: '请选择停诊起止时间', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
}
|
||
//addStopPatient()
|
||
noticeVisible.value = true
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.range-list{
|
||
position: relative;
|
||
z-index:99;
|
||
:deep(.uni-date-btn--ok){
|
||
position: relative;
|
||
z-index:9999;
|
||
}
|
||
}
|
||
.ppt-content{
|
||
|
||
.tip{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top:50rpx;
|
||
text-align: right;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
.name{
|
||
width: 160rpx;
|
||
text-align: right;
|
||
}
|
||
.value{
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
|
||
}
|
||
}
|
||
.notice-row{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
.value-item-separator{
|
||
min-width: 20rpx;
|
||
}
|
||
.name{
|
||
width: 160rpx;
|
||
text-align: right;
|
||
}
|
||
.value{
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
.value-item{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
}
|
||
.rowbox{
|
||
flex:1;
|
||
margin-left: 30rpx;
|
||
}
|
||
.stop-page {
|
||
min-height: 100vh; background: #fff;
|
||
:deep(.uni-date){
|
||
position: relative;
|
||
z-index:99;
|
||
}
|
||
/* iOS 端日期弹层容易被滚动容器裁切，强制提高层级并贴底展示 */
|
||
:deep(.uni-calendar__mask){
|
||
z-index: 9998 !important;
|
||
}
|
||
:deep(.uni-calendar--fixed){
|
||
z-index: 9999 !important;
|
||
bottom: 0 !important;
|
||
}
|
||
:deep(.uni-date-btn--ok){
|
||
position: relative;
|
||
z-index: 10000 !important;
|
||
}
|
||
}
|
||
.content-area {
|
||
position: fixed;
|
||
overflow-y: scroll;
|
||
padding: 30rpx;
|
||
width: 100%;
|
||
z-index:2;
|
||
box-sizing: border-box;
|
||
top: calc(var(--status-bar-height) + 44px);
|
||
bottom:152rpx;
|
||
}
|
||
.stop-page.picker-open .content-area{
|
||
overflow: visible;
|
||
}
|
||
|
||
.form-section { margin-bottom: 40rpx; }
|
||
.section-head { display: flex; justify-content: space-between; align-items: center; }
|
||
.section-title { display: flex; align-items: center; margin-bottom: 20rpx; }
|
||
.title-text { font-size: 32rpx; color: #8B2316; }
|
||
.required { color: #8B2316; margin-left: 6rpx; font-size: 28rpx; }
|
||
|
||
.reason-row { display: flex; flex-wrap: wrap; justify-content: space-between;}
|
||
.reason-btn { width:150rpx; text-align: center; height: 80rpx; line-height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; color: #666; }
|
||
.reason-btn.active { border-color: #8B2316; color: #8B2316; background: url('@/static/addoutpa_true.png') right bottom/39rpx 39rpx no-repeat; }
|
||
|
||
.add-more { color: #8B2316; font-size: 28rpx; }
|
||
.range-row { display: flex; align-items: center; margin-bottom: 20rpx; }
|
||
.date-input { flex: 1; height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; display: flex; align-items: center; padding: 0 24rpx; color: #333; }
|
||
.placeholder { color: #999; }
|
||
.to-text { color: #666; }
|
||
|
||
.remark-box { position: relative; }
|
||
.remark {box-sizing: border-box; width: 100%; min-height: 220rpx; background: #f2f2f2; border-radius: 10rpx; padding: 20rpx; color: #333; }
|
||
.voice-btn { position: absolute; right: 20rpx; bottom: 20rpx; width: 88rpx; height: 88rpx; border-radius: 50%; background: #8B2316; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40rpx; }
|
||
|
||
.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 30rpx; border-top: 1rpx solid #eee; z-index:1;}
|
||
.confirm-btn { background: #8B2316; border-radius: 12rpx; padding: 24rpx 0; text-align: center; }
|
||
.btn-text { color: #fff; font-size: 32rpx; }
|
||
</style>
|
||
|