631 lines
14 KiB
Vue
631 lines
14 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>
|
||
|
||
<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" style="display: flex;align-items: center;gap: 10rpx;">
|
||
<text class="weekday-text">{{ getWeekdayText(selectedWeekday) }}</text>
|
||
<text class="time-text">{{ getTimePeriodText(selectedTimePeriod) }}</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="notice-row">
|
||
<view class="name">门诊地点：</view>
|
||
<view class="value">
|
||
<text class="value-text">{{ selectedLocation.hospital_name }};</text>
|
||
<text class="value-text">{{ selectedLocation.office_name }};</text>
|
||
<text class="value-text">{{ selectedLocation.location }};</text>
|
||
<text class="value-text">
|
||
{{ getTypeText(selectedLocation.type) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</unidialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||
import unidialog from '@/components/dialog/dialog.vue'
|
||
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 noticeVisible=ref(false)
|
||
const noticeConfirm = () => {
|
||
noticeVisible.value = false
|
||
submit()
|
||
}
|
||
// 响应式数据
|
||
const selectedWeekday = ref(null)
|
||
const selectedTimePeriod = ref('')
|
||
const selectedLocation = ref({})
|
||
const getTypeText = (type) => {
|
||
const map = { 1: '普通门诊', 2: '专家门诊', 3: '特需门诊', 4: '专科/专病门诊' }
|
||
return map[type] || '普通门诊'
|
||
}
|
||
const getWeekdayText = (weekday) => {
|
||
const map = { 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', 7: '周日' }
|
||
return map[weekday]
|
||
}
|
||
const getTimePeriodText = (timePeriod) => {
|
||
const map = { a: '上午', b: '下午', c: '晚上', d: '全天' }
|
||
return map[timePeriod]
|
||
}
|
||
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;
|
||
for(let i=0;i<workPlaceList.value.length;i++){
|
||
if(workPlaceList.value[i].uuid == selectedLocation.value.uuid){
|
||
chooseLocation(workPlaceList.value[i]);
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
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.uuid
|
||
})
|
||
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: 'none'
|
||
})
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
const selectTimePeriod = (period) => {
|
||
selectedTimePeriod.value = period
|
||
}
|
||
|
||
const chooseLocation = (item) => {
|
||
console.log(item)
|
||
selectedLocation.value = item
|
||
}
|
||
const getType=(type)=>{
|
||
const map = { 1: 'a', 2: 'b', 3: 'c', 4: 'd' }
|
||
return map[type]
|
||
}
|
||
const submit=()=>{
|
||
if(uuid.value){
|
||
updateOutPatient()
|
||
}else{
|
||
addOutPatient()
|
||
}
|
||
}
|
||
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
|
||
}
|
||
|
||
noticeVisible.value = true
|
||
}
|
||
|
||
onLoad((options)=>{
|
||
console.log(options)
|
||
uuid.value = options.uuid;
|
||
selectedWeekday.value = options.week;
|
||
selectedLocation.value.uuid = options.workplace_uuid;
|
||
selectedTimePeriod.value =options.type;
|
||
|
||
if(uuid.value){
|
||
title.value = '编辑门诊安排'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.value .weekday-text{
|
||
color:red
|
||
}
|
||
.value .time-text{
|
||
color:red;
|
||
margin-left: 10rpx;
|
||
}
|
||
.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;
|
||
}
|
||
.notice-row{
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.name{
|
||
width: 160rpx;
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
.value{
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 34rpx;
|
||
color: #8B2316;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav-right {
|
||
width: 60rpx;
|
||
}
|
||
|
||
/* 主内容区域 */
|
||
.content-area {
|
||
margin-top: calc(var(--status-bar-height) + 44px);
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|