376 lines
18 KiB
HTML
376 lines
18 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<link rel="stylesheet" href="${base!}/assets/platform/plugins/jqFullCalendar/css/fullcalendar.css">
|
||
<script src="${base!}/assets/platform/plugins/jqFullCalendar/js/fullcalendar.min.js"></script>
|
||
<script src="${base!}/assets/platform/plugins/jqFullCalendar/js/moment.min.js"></script>
|
||
|
||
<style>
|
||
#calendar {
|
||
max-width: 1200px;
|
||
margin: 20px auto 0;
|
||
}
|
||
|
||
.fc-toolbar {
|
||
display: block !important;
|
||
visibility: unset !important;
|
||
}
|
||
|
||
.gray {
|
||
color: #FFFFFF;
|
||
background-color: #7f8481;
|
||
border: 1px solid #c6cbc8;
|
||
}
|
||
|
||
.el-textarea__inner {
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.green {
|
||
color: #FFFFFF;
|
||
background-color: #369a5f;
|
||
border: 1px solid #257e4a;
|
||
}
|
||
|
||
.fc-time-grid-event.fc-short .fc-time:before {
|
||
content: none;
|
||
}
|
||
|
||
.fc-time-grid-event.fc-short .fc-time span {
|
||
display: block;
|
||
}
|
||
|
||
.fc-ltr .fc-time-grid .fc-event-container {
|
||
margin: 0;
|
||
}
|
||
|
||
.el-row--flex.is-justify-space-between {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava>
|
||
<el-card shadow="never">
|
||
<div id="psychology-calendar"></div>
|
||
</el-card>
|
||
</guava>
|
||
|
||
<el-dialog :visible.sync="appointmentDialogVisible" width="60%" title="预约信息" :close-on-click-modal="false"
|
||
top="50px">
|
||
<el-form :model="formData" ref="ruleForm" label-width="120px" :rules="rules">
|
||
<vi-title title="预约时间段"></vi-title>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker
|
||
readonly
|
||
v-model="formData.startTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
style="width: 100%"
|
||
placeholder="选择日期时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker
|
||
readonly style="width: 100%"
|
||
v-model="formData.endTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
placeholder="选择日期时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<vi-title title="咨询师信息"></vi-title>
|
||
<template v-if="formData.doctorUser">
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="姓名">
|
||
<el-input :value="formData.doctorUserName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="性别">
|
||
<el-input :value="formData.doctorSex" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="单位">
|
||
<el-input :value="formData.doctorUnitName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="电话">
|
||
<el-input :value="formData.doctorMobile" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
<template v-else>
|
||
..
|
||
</template>
|
||
|
||
<vi-title title="预约人信息"></vi-title>
|
||
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="姓名">
|
||
<el-input value="${@shiro.getPrincipalProperty('username')}" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="工号">
|
||
<el-input value="${@shiro.getPrincipalProperty('loginname')}" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="单位">
|
||
<el-input value="${@shiro.getPrincipalProperty('unit').getName()}" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="手机号">
|
||
<el-input value="${@shiro.getPrincipalProperty('mobile')}" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="预约咨询方式" prop="appointmentAskTypeValue">
|
||
<el-select
|
||
v-model="formData.appointmentAskTypeValue"
|
||
filterable
|
||
style="width: 100%"
|
||
placeholder="请选择咨询方式">
|
||
<el-option v-for="item in askTypeArray" :key="item.code" :label="item.name"
|
||
:value="item.code"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="预约备注">
|
||
<el-input type="textarea" :row="3" v-model="formData.appointmentUserNote"
|
||
placeholder="请输入预约备注事项"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-form>
|
||
<el-row class="text-center">
|
||
<el-button @click="appointmentDialogVisible = false">关闭</el-button>
|
||
<el-button type="primary" @click="doAdd">确定</el-button>
|
||
</el-row>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<script>
|
||
let calendar = null
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
askTypeList: [],
|
||
askTypeArray: [],
|
||
events: [],
|
||
appointmentDialogVisible: false,
|
||
calendarHeight: 0,
|
||
rules: {
|
||
appointmentAskTypeValue: [{required: true, message: '请选择咨询方式', trigger: ['change']}],
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
initCalendar() {
|
||
const that = this
|
||
if (calendar) {
|
||
return
|
||
}
|
||
calendar = $('#psychology-calendar').fullCalendar({
|
||
header: { //设置日历头部信息，false，则不显示头部信息。包括left，center,right左中右三个位置
|
||
left: 'prev,next, today', //上一个、下一个、今天
|
||
center: 'title', //标题
|
||
right: 'month,agendaWeek,agendaDay' //月、周、日、日程列表
|
||
},
|
||
locale: 'zh-cn', //?没用？
|
||
timeFormat: 'HH:mm', //日程事件的时间格式
|
||
|
||
buttonText: { //各按钮的显示文本信息
|
||
today: '今天',
|
||
month: '月',
|
||
agendaWeek: '周',
|
||
agendaDay: '日',
|
||
listMonth: '日程',
|
||
},
|
||
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份全称
|
||
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份简写
|
||
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周全称
|
||
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周简写
|
||
noEventsMessage: "当月无数据", //listview视图下，无数据提示
|
||
allDayText: "全天", //自定义全天视图的名称
|
||
allDaySlot: false, //是否在周日历上方显示全天
|
||
allDayDefault: false, //是否为全天日程事件，显示这一天中所做的事情
|
||
slotDuration: "00:30:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）
|
||
slotLabelFormat: "H(:mm)a", //日期视图左边那一列显示的每一格日期时间格式
|
||
slotLabelInterval: "01:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)
|
||
snapDuration: "01:00:00", //其实就是动态创建一个日程时，默认创建多长的时间块
|
||
firstDay: 1, //一周中显示的第一天是哪天，周日是0，周一是1，类推
|
||
hiddenDays: [], //隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
|
||
weekends: true, //是否显示周六和周日，设为false则不显示周六和周日。默认值为true
|
||
weekMode: 'fixed', //月视图里显示周的模式，因每月周数不同月视图高度不定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
|
||
weekNumbers: false, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
|
||
weekNumberCalculation: 'iso', //周次的显示格式。
|
||
height: that.calendarHeight, //设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
|
||
// contentHeight: 600, //设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
|
||
handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。
|
||
defaultView: 'agendaWeek', //初始化时默认视图，默认是月month，agendaWeek是周，agendaDay是当天
|
||
slotEventOverlap: false, //事件是否可以重叠覆盖
|
||
defaultDate: moment().format('YYYY-MM-DD'), //默认显示那一天的日期视图getDates(true)2020-05-10
|
||
nowIndicator: false, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
|
||
eventLimit: 2, //数据条数太多时，限制显示条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
|
||
eventLimitText: "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
|
||
dayPopoverFormat: "YYYY年M月d日预约信息", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
|
||
render: (view) => { //method,绑定日历到id上。$('#id').fullCalendar('render');
|
||
},
|
||
viewRender: (view) => {
|
||
that.getData()
|
||
},
|
||
eventRender: (info) => {
|
||
// $(info.el).html(info.event.title);
|
||
},
|
||
//日历数据源
|
||
events: that.events,
|
||
eventClick: (event, jsEvent) => {
|
||
this.askTypeArray = []
|
||
if (event.o.appointmentUser) {
|
||
return
|
||
}
|
||
if (new Date().getTime() > event.o.startTimeTs) {
|
||
return
|
||
}
|
||
this.appointmentDialogVisible = true
|
||
that.formData = event.o
|
||
if (event.askTypeList) {
|
||
const array = JSON.parse(event.askTypeList)
|
||
this.askTypeList.map(o => {
|
||
if (array.includes(o.code)) {
|
||
this.askTypeArray.push(o)
|
||
}
|
||
})
|
||
}
|
||
if (this.askTypeArray && this.askTypeArray.length === 1) {
|
||
that.$set(that.formData, 'appointmentAskTypeValue', this.askTypeArray[0].code)
|
||
}
|
||
},
|
||
selectable: false, //是否允许通过单击或拖动选择日历中的对象，包括天和时间
|
||
selectMirror: true, //镜像
|
||
lazyFetching: false, //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
|
||
defaultTimedEventDuration: "01:00:00", //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00
|
||
defaultAllDayEventDuration: {days: 1}, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
|
||
});
|
||
},
|
||
//获取预约数据
|
||
async getData() {
|
||
if (!calendar) {
|
||
return
|
||
}
|
||
const view = calendar.fullCalendar('getView')
|
||
//这里取时间戳
|
||
const startTimeTs = view.start._i
|
||
const endTimeTs = view.end._i
|
||
const resp = await $.get('/platform/legalAid/appointmentSet/getAppointmentInfo', {
|
||
startTimeTs,
|
||
endTimeTs
|
||
})
|
||
let events = []
|
||
if (resp.code === 0) {
|
||
const userId = "${@shiro.getPrincipalProperty('id')}";
|
||
resp.data.forEach(v => {
|
||
let className = ''
|
||
let title = ''
|
||
if (new Date().getTime() > v.startTimeTs) {
|
||
className = 'gray'
|
||
title = '不可预约'
|
||
} else {
|
||
if (!v.appointmentUser) {
|
||
className = 'green'
|
||
title = '可预约'
|
||
} else if (v.appointmentUser === userId) {
|
||
className = 'blue'
|
||
title = '我已预约'
|
||
} else {
|
||
className = 'gray'
|
||
title = '不可预约'
|
||
}
|
||
}
|
||
events.push({
|
||
id: v.id,
|
||
title: title,
|
||
start: v.startTime,
|
||
end: v.endTime,
|
||
className: className,
|
||
o: v,
|
||
askTypeList: v.askType,
|
||
})
|
||
})
|
||
}
|
||
calendar.fullCalendar('removeEvents', () => true)
|
||
calendar.fullCalendar('addEventSource', events, true);
|
||
},
|
||
//预约
|
||
async doAdd() {
|
||
this.$refs["ruleForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
const params = {
|
||
appointmentUserNote: this.formData.appointmentUserNote,
|
||
id: this.formData.id,
|
||
appointmentAskTypeValue: this.formData.appointmentAskTypeValue
|
||
}
|
||
const resp = await $.post(loc() + '/doApply', params)
|
||
if (resp.code === 0) {
|
||
this.$message.success(resp.msg)
|
||
this.appointmentDialogVisible = false
|
||
await this.getData()
|
||
} else if (resp.code === 1) {
|
||
this.notifyError(resp.msg)
|
||
} else if (resp.code === 2) {
|
||
this.$message.warning(resp.msg)
|
||
await this.getData()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.calendarHeight = window.innerHeight - 50 - 60
|
||
}, 100)
|
||
},
|
||
async created() {
|
||
this.askTypeList = await getDictOptions("psychology_asktype")
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.initCalendar()
|
||
this.getData()
|
||
}, 100)
|
||
})
|
||
},
|
||
})
|
||
</script>
|
||
|
||
|
||
<!--#
|
||
}
|
||
#-->
|