zhangqi
/
acupuncture_admin
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

增加出诊日历模块

pull/15/head
zq 1 month ago
parent
9f857d6602
commit
d51aaa3791
1 changed files with 709 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 664
      src/views/HosInformation.vue

664
src/views/HosInformation.vue
View File

@ -153,7 +153,8 @@
<el-form>
<div class="mb32 flex gap12">
<span class="littleTitle">线上收款</span>
<GuipSwitch :value="onLinePay" ref="hasOnlinePayRef" :active-value="1" :inactive-value="0" :disabled="!wxpayList.length" @change="onLineChange"></GuipSwitch>
<GuipSwitch :value="onLinePay" ref="hasOnlinePayRef" :active-value="1" :inactive-value="0"
:disabled="!wxpayList.length" @change="onLineChange"></GuipSwitch>
<span v-if="!onLinePay" class="tipInfo">未绑定微信收款方式，无法开启线上收款</span>
<span v-if="!onLinePay == 1"> {{ onLinePay == 1 ? '开启' : '' }}</span>
</div>
@ -196,8 +197,7 @@
<p>{{ item.appid }}</p>
</div>
<div class="right">
<img v-if="item.is_bind"
src="@/assets/drop-selected.svg" alt="">
<img v-if="item.is_bind" src="@/assets/drop-selected.svg" alt="">
</div>
</div>
</template>
@ -218,7 +218,8 @@
<CustomDropdown slot="formDom" width="100%" :options="alipayList"
:options_null="!alipayList.length" @change="changeSelectAlipay">
<template #trigger>
<span v-if="selectAlipay && (selectAlipay.company_short_name || selectAlipay.appid)">{{
<span
v-if="selectAlipay && (selectAlipay.company_short_name || selectAlipay.appid)">{{
selectAlipay.company_short_name }} {{ selectAlipay.appid }}</span>
<span v-else-if="alipayList.length === 0">非必须绑定项</span>
<span v-else>未绑定支付宝收款</span>
@ -244,8 +245,7 @@
<p>{{ item.appid }}</p>
</div>
<div class="right">
<img v-if="item.is_bind"
src="@/assets/drop-selected.svg" alt="">
<img v-if="item.is_bind" src="@/assets/drop-selected.svg" alt="">
</div>
</div>
</template>
@ -259,7 +259,8 @@
<el-form>
<div class="mb32 flex gap12">
<span class="littleTitle">收挂号费</span>
<GuipSwitch :value="hasVisitFee" ref="hasVisitFeeRef" :active-value="1" :inactive-value="0" @change="onVisitFeeChange"></GuipSwitch>
<GuipSwitch :value="hasVisitFee" ref="hasVisitFeeRef" :active-value="1" :inactive-value="0"
@change="onVisitFeeChange"></GuipSwitch>
<span class="desc">患者在小程序预约时，{{ hasVisitFee == 1 ? '' : '不' }}需缴纳挂号费</span>
</div>
<div class="bidwrap-item">
@ -277,8 +278,7 @@
</div>
<div class="flex" v-else>
<span :class="'notSet'">未设置</span>
<GuipButton type="system"
:btnstyle="{ width: '126px', height: '38px' }"
<GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
@click="showDialog('register')">立即设置</GuipButton>
</div>
</div>
@ -286,7 +286,8 @@
<div class="bidwrap-item-top flex">
<div class="top-right column">
<p>免挂号费规则</p>
<p class="desc" v-if="againVisitFreeDays && hasAgainVisitFreeDays">患者{{againVisitFreeDays}}天内再次就诊、患者有剩余治疗项目，免收挂号费</p>
<p class="desc" v-if="againVisitFreeDays && hasAgainVisitFreeDays">
患者{{ againVisitFreeDays }}天内再次就诊、患者有剩余治疗项目，免收挂号费</p>
</div>
</div>
<div class="flex" v-if="hasFreeRegisterRule">
@ -296,8 +297,7 @@
</div>
<div class="flex" v-else>
<span :class="'notSet'">未设置</span>
<GuipButton type="system"
:btnstyle="{ width: '126px', height: '38px' }"
<GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
@click="showDialog('registerRule')">立即设置</GuipButton>
</div>
</div>
@ -305,6 +305,107 @@
</el-form>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage9">
<div class="littleTitle mb12">出诊日历预览</div>
<PromptText text='不同色块代表不同的医院，点击日期，可临时调整当天出诊时间。' :type="1" class="mb24" />
<div class="custom-calendar-header">
<div class="header-left">
<span class="month-text">{{ formatMonth(currentDay) }}</span>
<span v-if="isCurrentMonth(currentDay)" class="current-month-badge">（本月）</span>
<span class="header-tip">1年内有28天出诊医院重合，请检查——点击可查看</span>
</div>
<div class="header-right">
<el-button-group>
<el-button size="mini" @click="goToday">今天</el-button>
<el-button size="mini" @click="prevMonth">上个月</el-button>
<el-button size="mini" @click="nextMonth">下个月</el-button>
</el-button-group>
</div>
</div>
<div class="flex hosColorType" v-if="hosList.length > 1">
<div class="flex gap12" v-for="(item, index) in hosList" :key="index">
<span class="color-tag" :style="{ backgroundColor: colorPalette[index] }"></span>
<span>{{ item.hospital_name }}</span>
</div>
</div>
<div class="calendar-container">
<el-calendar v-model="currentDay" :first-day-of-week="7">
<!-- 不生效呢 先注释了 -->
<!-- <template slot="header" slot-scope="{ date }">
<div class="custom-header">
<div class="header-left">
<span class="month-text">{{ formatMonth(date) }}111</span>
<span v-if="isCurrentMonth(date)" class="current-month-badge">本月</span>
</div>
<div class="header-right">
<el-button-group>
<el-button size="mini" @click="goToday">今天</el-button>
<el-button size="mini" @click="prevMonth">上个00月</el-button>
<el-button size="mini" @click="nextMonth">下个月</el-button>
</el-button-group>
</div>
</div>
</template> -->
<template slot="dateCell" slot-scope="{date, data}">
<el-tooltip placement="bottom" :disabled="hosList.length == 1" v-if="getDateSchedule(data.day)"
popper-class="schedule-tooltip">
<!-- getDateCellClass 控制单独医院 的类名-->
<div class="calendar-date" :class="hosList.length == 1 ? getDateCellClass(data.day) : ''">
<div class="date-header flex-between">
<div class="flex">
<span class="date-text">{{ getDayNumber(data.day) }}</span>
<span v-if="isToday(data.day)" class="today-badge">今</span>
</div>
<div class="adjust" v-if="true">临时调整</div>
</div>
<!-- 医院排班信息 -->
<div class="schedule-content">
<template>
<!-- 动态渲染班次类型 -->
<div v-for="(shiftType, key) in plantype" :key="key">
<div v-if="key !== '0' && getDateSchedule(data.day)[key]"
class="schedule-item">
<span class="shift-type">{{ shiftType }}</span>
<div class="hospital-tags" v-if="hosList.length > 1">
<span v-for="hospital in getDateSchedule(data.day)[key]"
:key="hospital.hid" class="color-tag"
:style="{ backgroundColor: getHospitalColor(hospital.hid, date) }"></span>
</div>
</div>
</div>
</template>
</div>
</div>
<div slot="content" class="tooltip-content">
<!-- v-if="key !== '0' && getDateSchedule(data.day)[key] && getDateSchedule(data.day)[key].length > 0" -->
<div v-for="(shiftType, key) in plantype" :key="key">
<div v-for="hospital in getDateSchedule(data.day)[key]" :key="hospital.hid"
class="hospital-item">
<div class="hospital-info">
<span class="color-tag tooltip-tag"
:style="{ backgroundColor: getHospitalColor(hospital.hid) }"></span>
<span class="hospital-name">{{ hospital.hospital_name }}</span>
</div>
<div class="work-time">{{ hospital.workTime }}</div>
</div>
</div>
</div>
</el-tooltip>
<div v-else class="calendar-date">
<div class="date-header">
<div class="flex gap12">
<span class="date-text">{{ getDayNumber(data.day) }}</span>
<span v-if="isToday(data.day)" class="today-badge">今</span>
</div>
</div>
</div>
</template>
</el-calendar>
</div>
</div>
<!-- <p class="pageTitle bold">项目管理</p> -->
<div class="siteMessage flex-common mt12" id="siteMessage4">
<el-form>
@ -337,7 +438,8 @@
@click="selectTag('all')">
全部分类</div>
<div :class="['tab-item point', projectSearchId == item.id ? 'active' : '']"
@click="selectTag(item)" v-for="item in projectTagData" :key="item.name">{{ item.name }}
@click="selectTag(item)" v-for="item in projectTagData" :key="item.name">{{
item.name }}
</div>
</div>
</div>
@ -458,20 +560,26 @@
</div>
<GuipDialog :dialogVisible="registrationVisible" title="设置挂号费金额" :show-close-button="false" width="599px"
:show-cancel-button="true" @confirm="handleRegisterConfirm('registerMoney')" @cancel="handleregisterCancel" ref="visitFee">
:show-cancel-button="true" @confirm="handleRegisterConfirm('registerMoney')" @cancel="handleregisterCancel"
ref="visitFee">
<el-form>
<GuipInput v-model="registerMoney" ref="registerMoney" class="registerMoney" placeholder="请输入" unit="元/人"></GuipInput>
<GuipInput v-model="registerMoney" ref="registerMoney" class="registerMoney" placeholder="请输入"
unit="元/人">
</GuipInput>
</el-form>
</GuipDialog>
<!-- freeRegVisible -->
<GuipDialog :dialogVisible="freeRegVisible" title="免挂号费规则" :show-close-button="false" width="599px"
:show-cancel-button="true" @confirm="handleRegisterConfirm('freeRegVisible')" @cancel="handleregisterCancel" >
:show-cancel-button="true" @confirm="handleRegisterConfirm('freeRegVisible')"
@cancel="handleregisterCancel">
<p class="freeDesc">若勾选多个规则，满足其一即免挂号费</p>
<el-form class="freeWrap">
<div class="flex gap8 mb24 mt24">
<el-checkbox v-model="hasAgainVisitFreeDays" :true-label="1" :false-label="0"></el-checkbox>
患者
<GuipInput v-model="againVisitFreeDays" type="number" width="92px" placeholder="请输入"></GuipInput>天内再次就诊，免挂号费
<GuipInput v-model="againVisitFreeDays" type="number" width="92px" placeholder="请输入">
</GuipInput>
天内再次就诊，免挂号费
</div>
<p class="flex gap8">
<el-checkbox v-model="hasRemainVisitFree" :true-label="1" :false-label="0"></el-checkbox>
@ -502,6 +610,7 @@
</template>
<script>
import GuipFormItem from '@/components/GuipFormItem.vue';
import PromptText from '@/components/PromptText.vue';
import BatchProject from '@/components/BatchProject.vue';
import store from '@/store';
import GuipButton from '@/components/GuipButton.vue';
@ -519,6 +628,100 @@ import { mapState } from 'vuex';
import { Object } from 'core-js';
const PAY_TYPE_WEIXIN = 2; // 微信
const PAY_TYPE_ALIPAY = 3; // 支付宝
// 查看多医院的效果 把hosList 和 calendarList 注释了的放开
// 医院信息
const hosList = [
{
hid: 4,
hospital_name: "北京中医药大学国医堂22",
},
// {
// hid: 5,
// hospital_name: "北京中医药国医堂",
// },
// {
// hid: 6,
// hospital_name: "北京国医堂22",
// },
];
// 医院排班信息
const calendarList = {
'2025-11-06': {
// 0: [
// {
// hid: 5,
// hospital_name: "北京中医药",
// },
// {
// hid: 6,
// hospital_name: "北京中医堂22",
// },
// ],
3: [
{
hid: 4,
hospital_name: "北京中医药大学国医堂22",
workTime: '8:00-17:00 (全天班)'
}
],
},
'2025-11-07': {
// 1: [
// {
// hid: 5,
// hospital_name: "北京中医药",
// workTime: '8:00-12:00 (上午班)'
// },
// {
// hid: 6,
// hospital_name: "北京中医堂22",
// workTime: '8:00-12:00 (上午班)'
// },
// ],
2: [
{
hid: 4,
hospital_name: "北京中医药大学国医堂22",
workTime: '14:00-17:00 (下午班)'
}
],
},
'2025-11-08': {
2: [
// {
// hid: 5,
// hospital_name: "北京中医药",
// workTime: '8:00-12:00 (上午班)'
// },
{
hid: 4,
hospital_name: "北京中医药大学国医堂22",
workTime: '8:00-12:00 (上午班)'
},
],
// 1: [
// {
// hid: 6,
// hospital_name: "北京中医堂22",
// workTime: '14:00-17:00 (下午班)'
// },
// ],
},
'2025-11-09': {
// 3: [
// {
// hid: 5,
// hospital_name: "北京中医药",
// workTime: '8:00-17:00 (全天班)'
// }
// ],
},
}
export default {
// 站点设置
name: '',
@ -537,9 +740,12 @@ export default {
GuipTextarea,
GroupFormBtns,
addPay,
PromptText
},
data() {
return {
hosList: [],//医院信息
currentDay: new Date(),
depart_id: false,
doctor_id: false,
dialogType: '1',
@ -698,13 +904,41 @@ export default {
hasAgainVisitFreeDays: 0,
againVisitFreeDays: 0,
hasRemainVisitFree: 0,
colorPalette: ['#39D067', '#FD7B13', '#3D47FC', '#9B59B6', '#E74C3C', '#F39C12'],
singleColor: {
1: '#ECF5FF',
2: '#FFFAF0',
3: '#EFFFE0',
},
singleTextColor: {
0: '303133',
1: '#409EFF',
2: '#FB832D',
3: '#00C261',
},
currentDayColor: '#F6F7FA',
plantype: {
0: '停诊',
1: '上午班',
2: '下午班',
3: '全天班',
},
weekDaysDesc: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
hosLength: 0
}
},
created() {
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'hosMenuData');
//!!!!! 假的假的 整个假数据
this.hosList = hosList
this.hosLength = hosList.length
},
async mounted() {
// 重写日历周期标题
this.overrideWeekTitles();
const { depart_id, doctor_id } = this.$route.query; // 获取 doctorId 参数
if (doctor_id) this.doctor_id = doctor_id;
if (doctor_id && depart_id) {
@ -738,14 +972,108 @@ export default {
}
},
computed: {
// 生成医院颜色映射对象
hospitalColorMap() {
const colorMap = {};
this.hosList.forEach((hospital, index) => {
colorMap[hospital.hid] = this.colorPalette[index % this.colorPalette.length];
});
return colorMap;
},
selectedCount() {
return this.selectedRows.length;
},
...mapState(['hosMenuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
methods: {
goToWxPay(){
this.$router.push(`/weChatPayment?doctor_id=${this.doctor_id}&depart_id=${this.depart_id}`);
// getDateCellStyle(dateString) {
// const schedule = this.getDateSchedule(dateString);
// if (!schedule) return {};
// for (const key in schedule) {
// if (key !== '0' && schedule[key] && schedule[key].length > 0) {
// return {
// backgroundColor: this.singleColor[key] || '#FFFFFF',
// color:this.singleTextColor[key] || '#303133'
// };
// }
// }
// return {};
// },
isCurrentMonth(date) {
const current = new Date();
const target = new Date(date);
return current.getFullYear() === target.getFullYear() &&
current.getMonth() === target.getMonth();
},
prevMonth() {
const date = new Date(this.currentDay);
date.setMonth(date.getMonth() - 1);
this.currentDay = date;
},
nextMonth() {
const date = new Date(this.currentDay);
date.setMonth(date.getMonth() + 1);
this.currentDay = date;
},
goToday() {
console.log(this.hospitalColorMap, 'hospitalColorMap==');
this.currentDay = new Date();
},
getDateCellClass(dateString) {
const schedule = this.getDateSchedule(dateString);
if (!schedule) return '';
for (const key in schedule) {
if (key !== '0' && schedule[key] && schedule[key].length > 0) {
return `shift-type-${key}`;
}
}
return '';
},
formatMonth(date) {
const d = new Date(date);
const year = d.getFullYear();
const month = d.getMonth() + 1;
return `${year}年${month}月`;
},
overrideWeekTitles() {
this.$nextTick(() => {
const weekHeaders = document.querySelectorAll('.el-calendar-table thead th');
if (weekHeaders.length === 7) {
weekHeaders.forEach((th, index) => {
th.textContent = this.weekDaysDesc[index];
});
}
});
},
// 判断是否为今天
isToday(dateString) {
const today = new Date();
const date = new Date(dateString);
return today.toDateString() === date.toDateString();
},
// 获取指定日期的排班信息
getDateSchedule(dateString) {
return calendarList[dateString];
},
getDayNumber(dateString) {
const date = new Date(dateString);
return date.getDate();
},
// 获取医院对应的颜色
getHospitalColor(hid) {
return this.hospitalColorMap[hid] || '#CCCCCC';
},
// goToWxPay(){
// this.$router.push(`/weChatPayment?doctor_id=${this.doctor_id}&depart_id=${this.depart_id}`);
// },
goToAddPay() {
this.$router.push(`/paymentMethod?doctor_id=${this.doctor_id}&depart_id=${this.depart_id}`);
},
showDialog(type) {
if (type == 'register') {
@ -948,6 +1276,7 @@ export default {
handleEvent(data) {
this.isShowAddPay = data
},
handleSearch() {
if (this.hospitalSearchFlag) return
this.hospitalSearchFlag = true
@ -1494,6 +1823,9 @@ export default {
},
confirmClick(type) {
console.log(type, '确认');
},
isHoliday(date) {
console.log(date, '====---00');
}
}
@ -1504,16 +1836,20 @@ export default {
letter-spacing: 0.08em;
color: #626573;
}
.freeDesc {
color: #8A9099;
}
.el-form-item {
margin-bottom: 0;
}
.requireImg {
width: 8px;
height: 8px;
}
.notSet,
.yesSet {
margin-right: 12px;
@ -1523,6 +1859,7 @@ export default {
.yesSet {
color: #00C261;
}
.desc {
font-size: 12px;
font-weight: normal;
@ -1530,25 +1867,312 @@ export default {
letter-spacing: 0.08em;
color: #6B7280;
}
.calendar-container {
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.calendar-date {
text-align: left;
height: 100%;
padding: 8px;
box-sizing: border-box;
}
.tooltip-content {
.hospital-item {
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
color: #fff;
gap: 4px;
letter-spacing: 0.08em;
}
.hospital-info {
display: flex;
align-items: center;
gap: 4px;
}
.tooltip-tag {
width: 14px;
height: 14px;
border-radius: 3px;
}
.hospital-name {
font-size: 12px;
color: #fff;
font-weight: 500;
}
.work-time {
font-size: 12px;
color: #fff;
white-space: nowrap;
}
}
.custom-calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
margin-bottom: 10px;
.header-left {
display: flex;
align-items: center;
gap: 10px;
color: #303133;
font-size: 14px;
font-weight: bold;
.header-tip {
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #FF4D4F;
}
}
.header-right {
display: flex;
gap: 10px;
.el-button {
color: #606266;
width: auto;
/* height: 24px; */
line-height: 20px;
height: auto;
padding: 2px 12px;
box-sizing: border-box;
font-weight: 500;
background: transparent !important;
border: 1px solid #DCDFE6 !important;
font-size: 12px;
&:hover {
color: #409eff !important;
border-color: #c6e2ff !important;
background-color: #ecf5ff !important;
}
}
}
}
.hosColorType {
gap: 24px;
padding-bottom: 18px;
// box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.15);
}
/* 隐藏默认的日历头部 */
:deep(.el-calendar__header) {
display: none !important;
}
:deep(.el-calendar__body) {
padding: 0;
}
.date-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
// color: #303133;
.adjust {
width: 63px;
height: 17px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 6px;
box-sizing: border-box;
border-radius: 2px;
background: #FFF1F0;
box-sizing: border-box;
border: 1px solid #FFA39E;
font-size: 12px;
font-weight: normal;
line-height: 13px;
text-align: center;
color: #FF4D4F;
}
}
.date-content {
width: 100%;
height: 100%;
}
.date-text {
font-size: 14px;
font-weight: normal;
}
.today-badge {
background-color: #409EFF;
color: white;
width: 18px;
height: 18px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.08em;
border-radius: 3px;
background: linear-gradient(316deg, #FF4143 4%, #FF768B 93%);
}
.schedule-content {
font-size: 12px;
}
.schedule-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.shift-type {
color: #626573;
margin-right: 6px;
white-space: nowrap;
}
.hospital-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.color-tag {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* 如果需要调整文字颜色 */
.shift-type-1 {
background-color: #ECF5FF !important;
.date-text,
.shift-type {
color: #409EFF;
}
}
.shift-type-2 {
background-color: #FFFAF0 !important;
.date-text,
.shift-type {
color: #FB832D;
}
}
.shift-type-3 {
background-color: #EFFFE0 !important;
.date-text,
.shift-type {
color: #00C261;
}
}
/* Element UI Calendar 样式调整 */
:deep(.el-calendar-table .el-calendar-day) {
height: 100px;
padding: 0;
}
:deep(.el-calendar-table thead th) {
height: 48px;
box-sizing: border-box;
padding: 12px 8px;
text-align: left;
color: #303133;
}
:deep(.el-calendar-table td) {
border-color: #E4E7ED;
vertical-align: top;
}
:deep(.el-calendar-table .el-calendar-day:hover) {
background-color: #f5f7fa;
}
:deep(.el-calendar-table td.is-selected) {
background-color: transparent;
}
:deep(.el-calendar-table td.is-today) {
color: #303133;
}
:deep(.el-calendar__header .el-calendar__title) {
color: #303133;
font-weight: bold;
}
:deep(.el-calendar__header .el-button) {
color: #606266;
width: auto;
/* height: 24px; */
line-height: 20px;
height: auto;
padding: 2px 12px;
box-sizing: border-box;
font-weight: 500;
background: transparent !important;
border: 1px solid #DCDFE6 !important;
&:hover {
color: #409eff !important;
border-color: #c6e2ff !important;
background-color: #ecf5ff !important;
}
}
.bidwrap-item {
padding: 24px 14px;
box-sizing: border-box;
background: #FAFAFA;
.biditemMast {
background: #fff;
padding: 24px 16px;
border-radius: 8px;
background: #FFFFFF;
align-items: flex-start;
.bidwrap-item-top {
.top-right {
p {
margin-top: 10px;
color: #1E2226;
}
.desc {
color: #6B7280;
}
a {
text-decoration: none;
color: #006AFF;
@ -1566,6 +2190,7 @@ export default {
}
}
}
.el-autocomplete-noloading {
display: none !important;
}
@ -1579,6 +2204,7 @@ export default {
#siteMessage4 ::v-deep .el-form-item {
margin-bottom: 0 !important;
}
.tipInfo {
font-family: Microsoft YaHei UI;
font-size: 12px;

Write Preview
Loading…
Cancel
Save