548 lines
11 KiB
Vue
548 lines
11 KiB
Vue
<template>
|
|
<view class="add-schedule-page">
|
|
<!-- 导航栏 -->
|
|
<navBar :title="title" />
|
|
|
|
<!-- 主内容区域 -->
|
|
<view class="content-area">
|
|
<!-- 门诊时间选择 -->
|
|
<view class="form-section">
|
|
<view class="section-title">
|
|
<text class="title-text">门诊时间</text>
|
|
<text class="required-mark">*</text>
|
|
</view>
|
|
|
|
<!-- 星期选择 -->
|
|
<view class="weekday-selection">
|
|
<view class="weekday-row">
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 1 }"
|
|
@click="selectWeekday(1)"
|
|
>
|
|
<text class="weekday-text">周一</text>
|
|
</view>
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 2 }"
|
|
@click="selectWeekday(2)"
|
|
>
|
|
<text class="weekday-text">周二</text>
|
|
</view>
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 3 }"
|
|
@click="selectWeekday(3)"
|
|
>
|
|
<text class="weekday-text">周三</text>
|
|
</view>
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 4 }"
|
|
@click="selectWeekday(4)"
|
|
>
|
|
<text class="weekday-text">周四</text>
|
|
</view>
|
|
</view>
|
|
<view class="weekday-row">
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 5 }"
|
|
@click="selectWeekday(5)"
|
|
>
|
|
<text class="weekday-text">周五</text>
|
|
</view>
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday == 6 }"
|
|
@click="selectWeekday(6)"
|
|
>
|
|
<text class="weekday-text">周六</text>
|
|
</view>
|
|
<view
|
|
class="weekday-btn"
|
|
:class="{ active: selectedWeekday== 7 }"
|
|
@click="selectWeekday(7)"
|
|
>
|
|
<text class="weekday-text">周日</text>
|
|
</view>
|
|
<view class="weekday-btn empty"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间段选择 -->
|
|
<view class="time-period-selection">
|
|
<view
|
|
class="time-btn"
|
|
:class="{ active: selectedTimePeriod === 'a' }"
|
|
@click="selectTimePeriod('a')"
|
|
>
|
|
<text class="time-text">上午</text>
|
|
</view>
|
|
<view
|
|
class="time-btn"
|
|
:class="{ active: selectedTimePeriod === 'b' }"
|
|
@click="selectTimePeriod('b')"
|
|
>
|
|
<text class="time-text">下午</text>
|
|
</view>
|
|
<view
|
|
class="time-btn"
|
|
:class="{ active: selectedTimePeriod === 'c' }"
|
|
@click="selectTimePeriod('c')"
|
|
>
|
|
<text class="time-text">晚上</text>
|
|
</view>
|
|
<view
|
|
class="time-btn"
|
|
:class="{ active: selectedTimePeriod === 'd' }"
|
|
@click="selectTimePeriod('d')"
|
|
>
|
|
<text class="time-text">全天</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门诊地点选择 -->
|
|
<view class="form-section form-site">
|
|
<view class="section-title">
|
|
<text class="title-text">门诊地点</text>
|
|
<text class="required-mark">*</text>
|
|
</view>
|
|
|
|
<view class="location-card"
|
|
v-for="item in workPlaceList"
|
|
:key="item.uuid"
|
|
:class="{ active:selectedLocation.uuid === item.uuid }"
|
|
@click="chooseLocation(item)">
|
|
<view class="location-content">
|
|
<text class="hospital-name">{{ item.hospital_name }}</text>
|
|
<text class="office-number">{{ item.office_name }}</text>
|
|
<view class="location-bottom">
|
|
<text class="location-text">{{ item.location }}</text>
|
|
<view class="clinic-type-tag">
|
|
{{ getTypeText(item.type) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="check-icon">✓</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部确定按钮 -->
|
|
<view class="bottom-actions">
|
|
<view class="confirm-btn" @click="confirmPublish">
|
|
<text class="btn-text">{{ uuid? '确定修改' : '确定发布' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|
import api from "@/api/api.js";
|
|
import navTo from '@/utils/navTo'
|
|
import navBar from '@/components/navBar/navBar.vue'
|
|
const title = ref('增加门诊安排')
|
|
const uuid=ref('')
|
|
// 响应式数据
|
|
const selectedWeekday = ref(null)
|
|
const selectedTimePeriod = ref('')
|
|
const selectedLocation = ref({})
|
|
const getTypeText = (type) => {
|
|
const map = { 1: '普通门诊', 2: '专家门诊', 3: '特需门诊', 4: '专科/专病门诊' }
|
|
return map[type] || '普通门诊'
|
|
}
|
|
onShow(()=>{
|
|
listWorkPlace()
|
|
})
|
|
// 方法
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
const workPlaceList=ref([])
|
|
const listWorkPlace=async()=>{
|
|
const res = await api.listWorkPlace()
|
|
if(res.code == 200){
|
|
workPlaceList.value = res.data
|
|
|
|
}
|
|
}
|
|
const selectWeekday = (weekday) => {
|
|
selectedWeekday.value = weekday
|
|
}
|
|
const addOutPatient=async()=>{
|
|
const res = await api.addOutPatient({
|
|
week: selectedWeekday.value,
|
|
day: selectedTimePeriod.value,
|
|
note:'',
|
|
type:1,
|
|
workplace_uuid: selectedLocation.value.uuid
|
|
})
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '发布成功',
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack()
|
|
|
|
}
|
|
}
|
|
const updateOutPatient=async()=>{
|
|
const res = await api.updateOutPatient({
|
|
uuid: uuid.value,
|
|
note:'',
|
|
type:1,
|
|
week: selectedWeekday.value,
|
|
day: selectedTimePeriod.value,
|
|
workplace_uuid: selectedLocation.value
|
|
})
|
|
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
const selectTimePeriod = (period) => {
|
|
selectedTimePeriod.value = period
|
|
}
|
|
|
|
const chooseLocation = (item) => {
|
|
selectedLocation.value = item
|
|
}
|
|
const getType=(type)=>{
|
|
const map = { 1: 'a', 2: 'b', 3: 'c', 4: 'd' }
|
|
return map[type]
|
|
}
|
|
const confirmPublish = () => {
|
|
if (!selectedWeekday.value) {
|
|
uni.showToast({
|
|
title: '请选择门诊时间',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!selectedTimePeriod.value) {
|
|
uni.showToast({
|
|
title: '请选择时间段',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!selectedLocation.value) {
|
|
uni.showToast({
|
|
title: '请选择门诊地点',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(uuid.value){
|
|
updateOutPatient()
|
|
}else{
|
|
addOutPatient()
|
|
}
|
|
}
|
|
|
|
onLoad((options)=>{
|
|
console.log(options)
|
|
uuid.value = options.uuid;
|
|
selectedWeekday.value = options.week;
|
|
selectedLocation.value.uuid = options.workplace_uuid;
|
|
selectedTimePeriod.value = getType(options.type);
|
|
if(uuid.value){
|
|
title.value = '编辑门诊安排'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.add-schedule-page {
|
|
min-height: 100vh;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* 状态栏样式 */
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.status-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.network-speed {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.network-type {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.wifi-icon, .battery-icon {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.battery {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
/* 导航栏样式 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.nav-left {
|
|
width: 60rpx;
|
|
}
|
|
|
|
.back-arrow {
|
|
font-size: 50rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 34rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-right {
|
|
width: 60rpx;
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.content-area {
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
/* 表单区域 */
|
|
.form-section {
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.form-site{
|
|
margin-bottom: 120rpx;
|
|
}
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 32rpx;
|
|
color: #8B2316;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.required-mark {
|
|
color: #8B2316;
|
|
font-size: 32rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
/* 星期选择样式 */
|
|
|
|
.weekday-row {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.weekday-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border: 2rpx solid #ddd;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.weekday-btn.active {
|
|
border-color: #8B2316;
|
|
background: url('@/static/addoutpa_true.png') no-repeat right bottom;
|
|
background-size:39rpx 39rpx;
|
|
//
|
|
|
|
}
|
|
|
|
.weekday-btn.empty {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.weekday-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.weekday-btn.active .weekday-text {
|
|
color:#8B2316;
|
|
}
|
|
|
|
/* 时间段选择样式 */
|
|
.time-period-selection {
|
|
padding-top: 20rpx;
|
|
display: flex;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.time-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border: 2rpx solid #ddd;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.time-btn.active {
|
|
border-color: #8B2316;
|
|
background: url('@/static/addoutpa_true.png') no-repeat right bottom;
|
|
background-size:39rpx 39rpx;
|
|
}
|
|
|
|
.time-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.time-btn.active .time-text {
|
|
color:#8B2316;
|
|
}
|
|
|
|
/* 门诊地点选择样式 */
|
|
.location-card {
|
|
border: 2rpx solid #999;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
position: relative;
|
|
min-height: 200rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
}
|
|
.location-card.active{
|
|
border: 2rpx solid #8B2316;
|
|
background: url('@/static/addoutpa_true.png') no-repeat right bottom;
|
|
background-size:77rpx 77rpx;
|
|
}
|
|
.location-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.hospital-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.office-number {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.location-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.location-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.clinic-type-tag {
|
|
border: 2rpx solid #8B2316;
|
|
border-radius: 20rpx;
|
|
padding: 2rpx 16rpx;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
font-size: 24rpx;
|
|
color: #8B2316;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.check-icon {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #8B2316;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 底部按钮样式 */
|
|
.bottom-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #8B2316;
|
|
border-radius: 12rpx;
|
|
padding: 25rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-text {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|