756 lines
42 KiB
HTML
756 lines
42 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;
|
||
}
|
||
|
||
|
||
/**
|
||
预约成功
|
||
*/
|
||
.green {
|
||
color: #FFFFFF;
|
||
background-color: #369a5f;
|
||
border: 1px solid #257e4a;
|
||
}
|
||
|
||
/**
|
||
无预约人
|
||
*/
|
||
.yellow {
|
||
color: #FFFFFF;
|
||
background-color: #f3b20f;
|
||
border: 1px solid #af7d00;
|
||
}
|
||
|
||
/**
|
||
有预约人了但是没分配咨询师
|
||
*/
|
||
.red {
|
||
color: #FFFFFF;
|
||
background-color: #ea5454;
|
||
border: 1px solid #b11616;
|
||
}
|
||
|
||
.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 class="btn-group tool-button mt5">-->
|
||
<!-- <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="pull-right offscreen-right mt5">-->
|
||
<!-- <el-button type="primary">-->
|
||
<!-- <i class="ti-plus"></i>-->
|
||
<!-- 设置预约时间段-->
|
||
<!-- </el-button>-->
|
||
<!-- </div>-->
|
||
<!-- </el-card>-->
|
||
|
||
<el-card shadow="never">
|
||
<div>
|
||
<vi-title2 title="是否开启短信通知：">
|
||
<template #func>
|
||
<el-switch v-model="isSendMsg" active-text="是" inactive-text="否"
|
||
@change="msgChange"></el-switch>
|
||
<span style="margin-left: 10px; font-size: 14px; color: #c33714;">（注：开启则表示每天九点系统会自动给当天预约了心理咨询的老师发送短信通知）</span>
|
||
</template>
|
||
</vi-title2>
|
||
</div>
|
||
<div id="psychology-calendar"></div>
|
||
</el-card>
|
||
</guava>
|
||
|
||
<el-dialog :visible.sync="dateDialogVisible" width="30%" title="新增预约时间段" :close-on-click-modal="false"
|
||
@closed="addClose">
|
||
<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
|
||
<el-form-item label="开始时间" prop="startTime">
|
||
<el-date-picker
|
||
readonly
|
||
style="width: 100%"
|
||
v-model="formData.startTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
placeholder="选择日期时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="结束时间" prop="endTime">
|
||
<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-form-item label="咨询师" prop="doctorUser">
|
||
<el-select
|
||
v-model="formData.doctorUser"
|
||
filterable
|
||
remote
|
||
style="width: 100%"
|
||
reserve-keyword
|
||
placeholder="请输入关键词"
|
||
:remote-method="selectQueryDoctorUser">
|
||
<el-option
|
||
v-for="item in doctorUserList"
|
||
:key="item.id"
|
||
:label="item.mobile ? item.doctorUserName + '（' + item.mobile + '）' : item.doctorUserName + '（暂无手机号）'"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="咨询方式" prop="askType">
|
||
<el-select
|
||
v-model="formData.askType"
|
||
filterable multiple
|
||
style="width: 100%"
|
||
placeholder="请选择咨询方式">
|
||
<el-option v-for="item in askTypeList" :key="item.code" :label="item.name"
|
||
:value="item.code"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item class="text-center">
|
||
<el-button @click="doCancel">取消</el-button>
|
||
<el-button type="primary" @click="doAdd">添加</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
|
||
<el-dialog :visible.sync="appointmentDialogVisible" width="60%" title="预约信息" :close-on-click-modal="false">
|
||
<el-form :model="formData" ref="ruleForm" label-width="100px">
|
||
<vi-title title="预约时间段"></vi-title>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker
|
||
readonly style="width: 100%"
|
||
v-model="formData.startTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
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.appointmentUser">
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="formData.appointmentUserName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="工号">
|
||
<el-input v-model="formData.appointmentLoginName" 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 v-model="formData.appointmentUnitName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="手机号">
|
||
<el-input v-model="formData.appointmentMobile" 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 v-model="formData.appointmentAskTypeValue" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="预约人备注">
|
||
<el-input v-model="formData.appointmentUserNote" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
<template v-else>
|
||
<div class="text-center m20">
|
||
<svg t="1639556622680" class="icon" viewBox="0 0 1658 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2268" width="200" height="200">
|
||
<path d="M116.303139 786.479504c0 112.412717 308.981404 203.530494 690.447511 203.735253 381.466107 0 690.857029-91.117776 691.061788-203.530494v-0.204759c0-112.412717-309.186163-203.530494-690.65227-203.530494-381.466107-0.204759-690.857029 90.913017-690.857029 203.530494z"
|
||
fill="#EDE6D6" p-id="2269"></path>
|
||
<path d="M0 706.418716c0 12.080784 26.004399 21.909218 58.15157 21.909218s58.15157-9.828434 58.151569-21.909218c0-12.080784-26.004399-21.909218-58.151569-21.909218S0 694.542691 0 706.418716z m1512.35033 123.674465c0 15.971206 32.556689 29.075785 72.689462 29.075785s72.689462-12.89982 72.689462-29.075785c0-15.971206-32.556689-29.075785-72.689462-29.075784s-72.689462 12.89982-72.689462 29.075784z"
|
||
fill="#EFEAD5" p-id="2270"></path>
|
||
<path d="M247.144171 227.896821v535.240152c0 17.814037 14.128374 33.170966 33.990002 37.061387l524.797441 103.40332V290.34833c-372.456709-47.29934-558.787443-68.184763-558.787443-62.451509z"
|
||
fill="#FBE8D7" p-id="2271"></path>
|
||
<path d="M1358.576285 227.896821v535.240152c0 17.609278-14.128374 32.966207-33.785243 37.061387l-519.064187 103.608079-5.938013-613.458109c372.661468-47.29934 558.787443-68.184763 558.787443-62.451509z"
|
||
fill="#E8C3A0" p-id="2272"></path>
|
||
<path d="M101.765247 426.308338l148.245551-211.925615 556.125575 67.980004-129.612478 253.082184-574.758648-109.136573z"
|
||
fill="#FEF6EF" p-id="2273"></path>
|
||
<path d="M793.236553 278.472306L929.606079 532.987802l572.711058-116.917416-137.188563-203.735253L799.379324 278.472306h-6.142771z"
|
||
fill="#F9DBC0" p-id="2274"></path>
|
||
<path d="M750.237153 159.09778h-32.556689c-44.023195 0-79.65127-35.628074-79.65127-79.651269C638.029194 35.628074 673.657269 0 717.680464 0h363.242551c44.023195 0 79.65127 35.628074 79.65127 79.65127s-35.628074 79.65127-79.65127 79.651269H827.226555"
|
||
fill="#2878FF" opacity=".5" p-id="2275"></path>
|
||
<path d="M739.384923 108.727055c-15.971206 0.204759-29.280544-12.490302-29.690062-28.461508s12.490302-29.280544 28.461508-29.690062c15.971206-0.204759 29.280544 12.490302 29.485303 28.666267 0.409518 15.971206-12.285543 29.075785-28.256749 29.485303z m159.916817 0c-15.971206 0.204759-29.280544-12.490302-29.690062-28.461508s12.490302-29.280544 28.461507-29.690062c15.971206-0.204759 29.280544 12.490302 29.485303 28.666267 0.409518 15.971206-12.285543 29.075785-28.256748 29.485303z m159.916816 0c-15.971206 0-29.075785-13.104579-29.075785-29.075785s13.104579-29.075785 29.075785-29.075785c15.971206 0 29.075785 13.104579 29.075785 29.075785 0 15.971206-13.104579 29.075785-29.075785 29.075785z"
|
||
fill="#FFFFFF" p-id="2276"></path>
|
||
<path d="M1042.428314 486.302739l2.661868-11.466506s-18.837832-15.561688-17.609278-33.170966c1.433313-17.609278 12.89982-28.256749 12.89982-28.256749h35.013797l-5.323735 59.380124 0.614277 10.033194-28.256749 3.480903z m43.20416 508.416717l0.614277 8.804639h12.080783l-2.04759-11.466507-10.64747 2.661868z"
|
||
fill="#F6D0C3" p-id="2277"></path>
|
||
<path d="M1058.604279 1011.714457s1.433313-8.804639 7.371326-9.418916c5.323735-0.614277 26.413917 0.614277 32.351929 1.433313 0.614277 0 2.04759 0.614277 2.047591 2.047591v6.757048c0 1.433313-0.614277 2.04759-2.047591 2.047591H1058.604279v-2.866627z"
|
||
fill="#333333" p-id="2278"></path>
|
||
<path d="M1021.542891 1004.138372l0.614278 8.804639h11.466506l-1.433313-11.466506-10.647471 2.661867z"
|
||
fill="#F6D0C3" p-id="2279"></path>
|
||
<path d="M994.514697 1021.133373s1.433313-8.804639 7.371326-9.418916c5.323735-0.614277 26.413917 0.614277 32.351929 1.433313 0.614277 0 2.04759 0.614277 2.047591 2.047591v6.757049c0 1.433313-0.614277 2.04759-2.047591 2.04759h-39.928014v-2.866627z m89.889222-25.594881h13.514097l5.323736-143.126574c0-7.371326 1.433313-14.128374 2.661867-20.885423 6.757049-27.642472 21.704459-106.679464 17.609278-142.512298l-12.080783-20.885423-74.327535 4.095181s9.418916 87.022595 20.271146 121.422116c2.04759 6.757049 4.095181 13.514097 4.709458 20.271146l22.318736 181.621275z"
|
||
fill="#333333" p-id="2280"></path>
|
||
<path d="M982.433913 663.214557l37.061388 342.971406h14.94741l7.371326-140.464707c0.614277-8.190362 2.04759-16.380724 4.095181-24.366327 8.190362-31.123375 30.304339-108.112777 28.256749-154.593081l-91.732054-23.547291z"
|
||
fill="#3A3A3A" p-id="2281"></path>
|
||
<path d="M1144.39832 557.354129s12.080784 39.108978 10.85223 55.284943c-1.433313 14.128374-10.033193 51.394521-33.170966 56.103979l-0.614277-87.841631 21.704459-22.933014 1.228554-0.614277z m-180.802239 2.661868s-12.080784 39.108978-10.85223 55.284943c1.433313 14.128374 10.033193 51.394521 33.170966 56.103979l0.614277-87.841632-21.704459-22.933013-1.228554-0.614277z m74.122775-128.998201s6.142771-6.142771 10.85223-4.095181c5.323735 2.04759 6.142771 12.89982 3.276145 27.028195-2.661868 14.128374-15.561688-9.418916-15.561688-9.418916l1.433313-13.514098z"
|
||
fill="#F6D0C3" p-id="2282"></path>
|
||
<path d="M1043.861628 427.741652c-4.095181 0.614277-8.804639-0.614277-11.466507-4.095181-4.095181-5.323735-8.804639-13.514097-4.095181-19.656869 7.371326-10.033193 27.642472-17.609278 45.866027-7.371326 18.223555 10.033193 20.271146 33.170966 20.271146 33.170966s-1.433313 41.770846-25.594881 41.770846h-6.142772c-2.661868 0-5.323735-2.04759-6.142771-4.095181-3.276145-8.804639-4.709458-18.223555-4.095181-27.642471v-6.142772c-0.614277-5.938012-4.504699-6.757049-8.59988-5.938012z"
|
||
fill="#333333" p-id="2283"></path>
|
||
<path d="M1146.445911 557.968406c-16.995001-35.013797-46.480304-59.175365-60.813437-69.413317-3.890422-3.071386-6.961808-4.914217-8.190362-5.528494-4.709458-2.04759-27.642472 0-37.061388 2.04759-1.842831 0.409518-4.914217 2.25235-8.804639 4.709458-14.742651 8.59988-52.623075 33.170966-70.846631 70.846631l22.318736 36.447111 0.204759-0.20476-0.819036 73.918017c0 4.095181 2.04759 8.190362 5.323735 8.804639 71.665667 34.39952 121.422116 16.790242 134.321936 10.852229 2.04759-0.614277 4.095181-2.661868 4.095181-4.709458 3.685663-24.571086 3.071386-62.45151 1.023795-95.008198l19.247351-32.761448z"
|
||
fill="#2878FF" p-id="2284"></path>
|
||
<path d="M250.010798 214.382723l466.85063 71.05139v-118.760248l-4.29994-0.409518z"
|
||
fill="#E0BC9C" p-id="2285"></path>
|
||
<path d="M785.865227 289.119776l579.468106-76.784643L712.561488 166.264347V284.615077l73.303739 4.504699z"
|
||
fill="#FBECDA" p-id="2286"></path>
|
||
</svg>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="formData.doctorUser">
|
||
<vi-title title="咨询师信息"></vi-title>
|
||
<template>
|
||
<el-form-item label="咨询师">
|
||
<el-select
|
||
v-model="formData.doctorUser" style="width: 100%"
|
||
filterable disabled
|
||
remote
|
||
reserve-keyword
|
||
placeholder="请输入关键词"
|
||
:remote-method="selectQueryDoctorUser">
|
||
<el-option
|
||
v-for="item in doctorUserList"
|
||
:key="item.id"
|
||
:label="item.mobile ? item.doctorUserName + '（' + item.mobile + '）' : item.doctorUserName + '（暂无手机号）'"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</template>
|
||
<el-form-item label="咨询方式">
|
||
<el-select
|
||
v-model="formData.askType" style="width: 100%"
|
||
filterable multiple
|
||
placeholder="请选择咨询方式">
|
||
<el-option v-for="item in askTypeList" :key="item.code" :label="item.name"
|
||
:value="item.code"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</template>
|
||
|
||
<template v-if="formData.appointmentUser && !formData.doctorUser">
|
||
<vi-title title="分配咨询师"></vi-title>
|
||
<template>
|
||
<el-form :model="formData" label-width="100px">
|
||
<el-form-item label="咨询师">
|
||
<el-select
|
||
v-model="formData.doctorUser"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
placeholder="请输入关键词"
|
||
:remote-method="selectQueryDoctorUser">
|
||
<el-option
|
||
v-for="item in doctorUserList"
|
||
:key="item.id"
|
||
:label="item.mobile ? item.doctorUserName + '（' + item.mobile + '）' : item.doctorUserName + '（暂无手机号）'"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</template>
|
||
|
||
</el-form>
|
||
<el-row class="text-center">
|
||
<el-button @click="appointmentDialogVisible = false">关闭</el-button>
|
||
<el-button type="danger" @click="doDelete">删除</el-button>
|
||
<el-button type="primary" @click="updateType">确定</el-button>
|
||
</el-row>
|
||
</el-dialog>
|
||
|
||
<el-dialog :visible.sync="setDoctorDialogVisible" width="40%" title="预约信息" :close-on-click-modal="false">
|
||
<el-form :model="formData" ref="ruleForm" label-width="100px">
|
||
<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"
|
||
placeholder="选择日期时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker
|
||
readonly
|
||
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>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="formData.appointmentUserName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="工号">
|
||
<el-input v-model="formData.appointmentLoginName" 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 v-model="formData.appointmentUnitName" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="手机号">
|
||
<el-input v-model="formData.appointmentMobile" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="预约人备注">
|
||
<el-input type="textarea" :row="2" v-model="formData.appointmentUserNote" readonly></el-input>
|
||
</el-form-item>
|
||
|
||
<vi-title title="安排咨询师"></vi-title>
|
||
<el-form :model="formData" label-width="100px">
|
||
<el-form-item label="咨询师">
|
||
<el-select
|
||
v-model="formData.doctorUser"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
placeholder="请输入关键词"
|
||
:remote-method="selectQueryDoctorUser">
|
||
<el-option
|
||
v-for="item in doctorUserList"
|
||
:key="item.id"
|
||
:label="item.mobile ? item.doctorUserName + '（' + item.mobile + '）' : item.doctorUserName + '（暂无手机号）'"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</el-form>
|
||
<el-row class="text-center">
|
||
<el-button @click="setDoctorDialogVisible = false">关闭</el-button>
|
||
<el-button type="primary" @click="doSetDoctor">确定</el-button>
|
||
</el-row>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
let calendar = null
|
||
let $calendar = $('#psychology-calendar')
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
isSendMsg: false,
|
||
dateDialogVisible: false,
|
||
appointmentDialogVisible: false,
|
||
setDoctorDialogVisible: false,
|
||
selectData: {},
|
||
events: [],
|
||
doctorUserList: [],
|
||
calendarHeight: 0,
|
||
askTypeList: [],
|
||
rules: {
|
||
startTime: [{required: true, message: '请选择开始时间', trigger: ['change', 'blur']}],
|
||
endTime: [{required: true, message: '请选择结束时间', trigger: ['change', 'blur']}],
|
||
doctorUser: [{required: true, message: '请选择咨询师', trigger: ['change', 'blur']}],
|
||
askType: [{type: 'array', required: true, message: '请选择咨询方式', trigger: 'change'}],
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
async updateType() {
|
||
const confirm = await this.$confirm('这将清空预约人已选择的咨询方式，您确定要修改咨询方式吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
dangerouslyUseHTMLString: true,
|
||
type: 'warning'
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const resp = await $.post(loc() + '/updateType', {
|
||
id: this.formData.id,
|
||
askType: JSON.stringify(this.formData.askType)
|
||
})
|
||
if (resp.code === 0) {
|
||
await this.getData()
|
||
this.appointmentDialogVisible = false
|
||
this.notifySuccess(resp.msg)
|
||
}
|
||
}
|
||
},
|
||
//搜索咨询师
|
||
async selectQueryDoctorUser(keyWord) {
|
||
const resp = await $.get(loc() + '/selectQueryDoctorUser', {
|
||
keyWord,
|
||
startTimeTs: this.formData.startTimeTs,
|
||
endTimeTs: this.formData.endTimeTs,
|
||
})
|
||
this.doctorUserList = resp.data
|
||
},
|
||
addClose() {
|
||
if (this.$refs["ruleForm"]) {
|
||
this.$refs["ruleForm"].resetFields()
|
||
}
|
||
},
|
||
//获取预约数据
|
||
async getData() {
|
||
if (!calendar) {
|
||
return
|
||
}
|
||
|
||
const view = calendar.fullCalendar('getView')
|
||
//这里取时间戳
|
||
const startTimeTs = moment(moment(view.start._i).format('YYYY-MM-DD') + ' 00:00:00').unix()
|
||
const endTimeTs = view.end._i
|
||
const resp = await $.get(loc() + '/getAppointmentInfo', {startTimeTs, endTimeTs})
|
||
let events = []
|
||
if (resp.code === 0) {
|
||
resp.data.forEach(v => {
|
||
let className = ''
|
||
if (!v.appointmentUser) {
|
||
className = ''
|
||
} else if (v.appointmentUser && !v.doctorUser) {
|
||
className = 'red'
|
||
} else if (v.appointmentUser && v.doctorUser) {
|
||
className = 'green'
|
||
}
|
||
events.push({
|
||
id: v.id,
|
||
title: v.doctorUserName,
|
||
start: v.startTime,
|
||
end: v.endTime,
|
||
className: className,
|
||
o: v
|
||
})
|
||
this.events = events
|
||
})
|
||
}
|
||
|
||
calendar.fullCalendar('removeEvents', () => true)
|
||
calendar.fullCalendar('addEventSource', events, true)
|
||
},
|
||
doCancel() {
|
||
this.dateDialogVisible = false
|
||
calendar.fullCalendar('unselect');
|
||
},
|
||
async doAdd() {
|
||
if (Date.parse(this.formData.startTime) < new Date().getTime()) {
|
||
this.notifyWarning('预约时间不能小于当前时间，请重新设置！')
|
||
this.dateDialogVisible = false
|
||
calendar.fullCalendar('unselect');
|
||
return
|
||
}
|
||
/*if(this.formData.doctorUser === '' || this.formData.doctorUser === undefined) {
|
||
this.notifyWarning('请设置咨询师！')
|
||
return
|
||
}*/
|
||
this.$refs["ruleForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
calendar.fullCalendar('unselect')
|
||
this.formData.askType = JSON.stringify(this.formData.askType)
|
||
const resp = await $.post(loc() + '/doAdd', this.formData)
|
||
if (resp.code === 0) {
|
||
this.notifySuccess(resp.msg)
|
||
await this.getData()
|
||
} else if (resp.code === 1) {
|
||
this.notifyWarning(resp.msg)
|
||
}
|
||
this.dateDialogVisible = false
|
||
this.setDoctorDialogVisible = false
|
||
}
|
||
})
|
||
},
|
||
async doDelete() {
|
||
/*if (this.formData.appointmentUser) {
|
||
this.notifyWarning('该时间段已有预约人，不能进行删除！')
|
||
return
|
||
}*/
|
||
let msg = '确定删除吗?'
|
||
if (this.formData.appointmentUser) {
|
||
msg = "<span style='color: red'>该时间段已有预约人</span>，确定要删除吗？"
|
||
}
|
||
const confirm = await this.$confirm(msg, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
dangerouslyUseHTMLString: true,
|
||
type: 'warning'
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const resp = await $.post(loc() + '/doDelete', {id: this.formData.id})
|
||
if (resp.code === 0) {
|
||
await this.getData()
|
||
this.appointmentDialogVisible = false
|
||
this.notifySuccess(resp.msg)
|
||
}
|
||
}
|
||
},
|
||
async doSetDoctor() {
|
||
if (!this.formData.doctorUser) {
|
||
this.notifyWarning('请先分配心理咨询师')
|
||
return
|
||
}
|
||
const {id, doctorUser} = this.formData
|
||
const resp = await $.post(loc() + '/doSetDoctor', {
|
||
id, doctorUser
|
||
})
|
||
if (resp.code === 0) {
|
||
await this.getData()
|
||
this.setDoctorDialogVisible = false
|
||
this.notifySuccess(resp.msg)
|
||
}
|
||
},
|
||
initCalendar() {
|
||
const that = this
|
||
const today = moment().format('YYYY-MM-DD')
|
||
if (calendar) {
|
||
return
|
||
}
|
||
calendar = $('#psychology-calendar').fullCalendar({
|
||
header: { //设置日历头部信息，false，则不显示头部信息。包括left，center,right左中右三个位置
|
||
left: 'prev,next, today', //上一个、下一个、今天
|
||
center: 'title', //标题
|
||
right: 'month,agendaWeek,agendaDay,listMonth' //月、周、日、日程列表
|
||
},
|
||
locale: 'zh-cn', //?没用？
|
||
timeFormat: 'HH:mm', //日程事件的时间格式
|
||
|
||
buttonText: { //各按钮的显示文本信息
|
||
today: '今天',
|
||
month: '月',
|
||
agendaWeek: '周',
|
||
agendaDay: '日',
|
||
listMonth: '日程',
|
||
},
|
||
slotMinTime: '11:00:00',
|
||
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: today, //默认显示那一天的日期视图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) => {
|
||
if (event.o.doctorUser) {
|
||
this.doctorUserList = [{
|
||
id: event.o.doctorUser,
|
||
doctorUserName: event.o.doctorUserName,
|
||
mobile: event.o.doctorMobile,
|
||
}]
|
||
this.appointmentDialogVisible = true
|
||
} else {
|
||
this.setDoctorDialogVisible = true
|
||
this.doctorUserList = []
|
||
}
|
||
if (this.$refs["ruleForm"]) {
|
||
this.$refs["ruleForm"].resetFields()
|
||
}
|
||
this.$forceUpdate()
|
||
//
|
||
// if (event.o.appointmentUser && !event.o.doctorUser) {
|
||
// this.setDoctorDialogVisible = true
|
||
// this.doctorUserList = []
|
||
// } else if (event.o.appointmentUser && event.o.doctorUser) {
|
||
// this.setDoctorDialogVisible = true
|
||
// this.doctorUserList = [{
|
||
// id: event.o.doctorUser,
|
||
// doctorUserName: event.o.doctorUserName
|
||
// }]
|
||
// } else if (!event.o.appointmentUser) {
|
||
// this.appointmentDialogVisible = true
|
||
// }
|
||
that.formData = JSON.parse(JSON.stringify(event.o))
|
||
that.formData.askType = that.formData.askType ? JSON.parse(that.formData.askType) : []
|
||
if (this.formData.appointmentAskTypeValue) {
|
||
const type = this.askTypeList.find(o => o.code === this.formData.appointmentAskTypeValue + '')
|
||
this.formData.appointmentAskTypeValue = type ? type.name : '暂无'
|
||
} else {
|
||
this.formData.appointmentAskTypeValue = '暂无'
|
||
}
|
||
},
|
||
selectable: true, //是否允许通过单击或拖动选择日历中的对象，包括天和时间
|
||
unselectAuto: false, //当点击页面日历以外的位置时，是否自动取消当前的选中状态。
|
||
selectHelper: true, //当点击或拖动选择时间时，是否预先画出“日程区块”的样式显示默认加载的提示信息，该属性只在周/天视图里可用
|
||
selectMirror: true, //镜像
|
||
selectOverlap: false, //是否允许选择被事件占用的时间段，默认true可占用时间段
|
||
select: (start, end, allDay) => { //点击空白区域/选择区域内容触发
|
||
if (calendar.fullCalendar('getView').name === 'month') {
|
||
return
|
||
}
|
||
|
||
const startTime = $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm:ss")
|
||
const endTime = $.fullCalendar.formatDate(end, "YYYY-MM-DD HH:mm:ss")
|
||
|
||
if (new Date().getTime() > Date.parse(endTime)) {
|
||
that.$message.warning('该时段不可设置')
|
||
calendar.fullCalendar('unselect');
|
||
return
|
||
}
|
||
|
||
that.formData = {}
|
||
that.$set(that.formData, 'startTime', startTime)
|
||
that.$set(that.formData, 'endTime', endTime)
|
||
that.$set(that.formData, 'doctorUser', '')
|
||
that.$set(that.formData, 'askType', [])
|
||
that.dateDialogVisible = true
|
||
that.selectData = {start, end, allDay}
|
||
if (this.$refs["ruleForm"]) {
|
||
this.$refs["ruleForm"].resetFields()
|
||
}
|
||
this.$forceUpdate()
|
||
},
|
||
lazyFetching: false, //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
|
||
defaultTimedEventDuration: "01:00:00", //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00
|
||
defaultAllDayEventDuration: {days: 1}, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
|
||
});
|
||
},
|
||
async getIsSendMsg() {
|
||
const resp = await $.post('/platform/legalAid/appointmentSet/getIsSendMsg')
|
||
this.isSendMsg = resp.data
|
||
},
|
||
async msgChange(val) {
|
||
const resp = await $.post('/platform/legalAid/appointmentSet/msgChange', {isSend: val})
|
||
if (resp.code === 0) {
|
||
this.$notify.success({title: '提示', message: resp.msg})
|
||
} else {
|
||
this.$notify.warning({title: '警告', message: resp.msg})
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.calendarHeight = window.innerHeight - 50 - 60
|
||
}, 100)
|
||
},
|
||
async created() {
|
||
await this.getIsSendMsg()
|
||
this.askTypeList = await getDictOptions("psychology_asktype")
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
$('#psychology-calendar').fullCalendar('destroy');
|
||
calendar = null
|
||
this.initCalendar()
|
||
this.getData()
|
||
}, 100)
|
||
});
|
||
await this.selectQueryDoctorUser(null);
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<!--#
|
||
}
|
||
#-->
|