first commit
This commit is contained in:
@@ -0,0 +1,375 @@
|
||||
<!--#
|
||||
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
|
||||
var 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.notifySuccess(resp.msg)
|
||||
this.appointmentDialogVisible = false
|
||||
await this.getData()
|
||||
} else if (resp.code === 1) {
|
||||
this.notifyError(resp.msg)
|
||||
} else if (resp.code === 2) {
|
||||
this.notifyWarning(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>
|
||||
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user