1005 lines
48 KiB
HTML
1005 lines
48 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
<style xmlns="">
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.e-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-divider--horizontal {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.v-tab .el-card__header {
|
||
padding: 10px 15px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reserve_btn {
|
||
font-size: 16px;
|
||
float: right;
|
||
padding: 3px 0
|
||
}
|
||
|
||
.is-selected {
|
||
color: #1989FA;
|
||
}
|
||
|
||
.div-Calendar {
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
}
|
||
|
||
.el-carousel__button {
|
||
background-color: #c0c4cc;
|
||
}
|
||
|
||
.el-carousel__container {
|
||
height: 260px;
|
||
}
|
||
|
||
.el-button--mini.is-circle {
|
||
padding: 5px;
|
||
font-size: 1px;
|
||
}
|
||
|
||
.slider {
|
||
position: relative;
|
||
}
|
||
|
||
.cover {
|
||
position: absolute;
|
||
height: 6px;
|
||
background-color: #409EFF;
|
||
margin: 16px 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.cover2 {
|
||
position: absolute;
|
||
height: 6px;
|
||
background-color: #E4E7ED;
|
||
margin: 16px 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.el-slider__marks-text {
|
||
margin-top: 10px !important;
|
||
}
|
||
|
||
.el-slider__stop {
|
||
z-index: 1001;
|
||
}
|
||
|
||
.el-slider__bar {
|
||
z-index: 1000;
|
||
}
|
||
|
||
.el-slider__marks-text {
|
||
min-width: 40px !important;
|
||
}
|
||
|
||
.el-slider__button-wrapper {
|
||
display: none !important;
|
||
}
|
||
|
||
.textDia h2 {
|
||
text-align: center;
|
||
}
|
||
|
||
.textDia h4 {
|
||
line-height: 26px;
|
||
}
|
||
|
||
.textDia .el-dialog__header {
|
||
display: none;
|
||
}
|
||
|
||
.textDia .el-dialog__body {
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
</style>
|
||
<div id="app" v-cloak>
|
||
<guava ref="guava">
|
||
<template>
|
||
<el-card shadow="never">
|
||
<div class="btn-group tool-button">
|
||
<el-select v-model="pageForm.siteType" placeholder="场地类型" clearable
|
||
style="width: 200px;">
|
||
<el-option v-for="item in activityTypeList" :label="item.text" :value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="btn-group tool-button">
|
||
<span style="border: 1px grey solid; margin: 0px 10px;"></span>
|
||
</div>
|
||
|
||
<div class="btn-group tool-button">
|
||
<el-date-picker
|
||
v-model="pageForm.time" placeholder="选择月"
|
||
type="month" value-format="yyyy-MM">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="btn-group tool-button">
|
||
<el-input placeholder="请输入内容" clearable v-model="pageForm.searchKeyword"
|
||
@keyup.enter.native="doSearch">
|
||
<el-select v-model="pageForm.searchName" slot="prepend" placeholder="查询类型"
|
||
style="width: 105px;">
|
||
<el-option label="场地名称" value="asi.name"></el-option>
|
||
<el-option label="预约人" value="asr.reserve_person"></el-option>
|
||
</el-select>
|
||
</el-input>
|
||
</div>
|
||
<div class="btn-group tool-button">
|
||
<el-button type="primary" icon="el-icon-search" @click="doSearch"></el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-row class="el-table-container">
|
||
|
||
<el-carousel :interval="5000" arrow="always" style="margin: 10px auto;">
|
||
<el-carousel-item v-for="index in Math.ceil(siteList.length/4)" :key="index">
|
||
<el-row :gutter="20">
|
||
<el-col v-for="item in siteList.slice((index-1)*4,index*4)" :span="6">
|
||
<el-card class="box-card" style="border-radius: 10px">
|
||
<div slot="header" class="clearfix" style="font-size: 16px;padding: 5px 0">
|
||
<span>{{item.name}}</span>
|
||
<el-button @click="textDia(item)" class="reserve_btn" type="text">预 约
|
||
</el-button>
|
||
</div>
|
||
<div @click="siteChange(item.id)">
|
||
<div class="text e-item">
|
||
<span style="color: gray">场地地址：</span>
|
||
{{item.address}}
|
||
</div>
|
||
<div class="text e-item">
|
||
<span style="color: gray">联系人：</span>
|
||
{{(item.unitname ? item.unitname : '') + ' ' + item.contact_person}}
|
||
</div>
|
||
<div class="text e-item">
|
||
<span style="color: gray">联系方式：</span>
|
||
{{item.contact_phone}}
|
||
</div>
|
||
<!--<div class="text e-item">
|
||
<span style="color: gray">已预约人数：</span>
|
||
<i class="el-icon-user el-icon--left"></i>{{item.count}}
|
||
</div>-->
|
||
|
||
<div class="text item">
|
||
<span style="color: gray">开放时间：</span>
|
||
<span v-if="item.open_hours && item.open_hours.length === 1">
|
||
<span v-if="item.workday === true" style="color: gray">工作日</span>
|
||
<span>{{item.open_hours[0].start_time + ' - ' + item.open_hours[0].end_time}}</span>
|
||
</span>
|
||
<el-tooltip class="item"
|
||
effect="dark" placement="right"
|
||
v-if="item.open_hours && item.open_hours.length > 1">
|
||
<el-link :underline="false" type="primary">
|
||
<span v-if="item.workday === true" style="color: gray">工作日</span>
|
||
<i class="el-icon-view el-icon--left"></i>
|
||
{{item.open_hours.length}}
|
||
</el-link>
|
||
<div slot="content">
|
||
<div v-if="item.open_hours" v-for="hour in item.open_hours">
|
||
{{hour.start_time}} - {{hour.end_time}}
|
||
<el-divider></el-divider>
|
||
</div>
|
||
<div v-else>暂无开放场次</div>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
|
||
<el-row class="v-tab">
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span>预约列表</span>
|
||
<el-button @click="siteChange()" size="mini" style="float: right" type="primary">全 部
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-table :data="tableData" row-key="id"
|
||
v-loading="tableLoading">
|
||
<el-table-column align="center" header-align="center" label="序号" type="index">
|
||
<template scope="scope">
|
||
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}} </span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="场地名称"
|
||
prop="site_name"></el-table-column>
|
||
<el-table-column align="center" sortable header-align="center" label="预约人"
|
||
prop="reserve_person"></el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="所属单位"
|
||
prop="reserve_person_unit"></el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="预约天数"
|
||
prop="days"></el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="预约日期"
|
||
prop="concat_day"></el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="开始时间"
|
||
prop="start_time">
|
||
<template slot-scope="{row}">
|
||
<span>{{row.start_time}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" sortable show-overflow-tooltip header-align="center"
|
||
label="结束时间"
|
||
prop="end_time">
|
||
<template slot-scope="{row}">
|
||
<span>{{row.end_time}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="联系方式"
|
||
prop="reserve_person_phone"></el-table-column>
|
||
<el-table-column align="center" show-overflow-tooltip header-align="center" label="预约事由"
|
||
prop="reserve_cause"></el-table-column>
|
||
<el-table-column align="center" show-overflow-tooltip="true" header-align="center" sortable
|
||
label="预约状态" prop="state_name">
|
||
<template slot-scope="{row}">
|
||
<!--<span :style="'color:'+row.state_color">{{row.state_name}}</span>-->
|
||
<span v-if="[0].includes(row.stateaudittype)" style="color: #e6a23c">{{row.state_name}}</span>
|
||
<span v-if="row.stateaudittype==3" style="color: #67c23a">{{row.state_name}}</span>
|
||
<span v-if="row.stateaudittype==1" style="color: #f56c6c">{{row.state_name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="操作" fixed="right"
|
||
width="200px">
|
||
<template scope="scope">
|
||
<!--<el-button @click="() => {dropdownCommand({type:'view',data:scope.row})}" size="mini">查看</el-button>
|
||
<el-button type="danger" @click="() => {dropdownCommand({type:'delete',data:scope.row})}" size="mini">删除</el-button>-->
|
||
|
||
<el-dropdown @command="dropdownCommand">
|
||
<el-button size="mini">
|
||
<i class="ti-settings"></i>
|
||
<span class="ti-angle-down"></span>
|
||
</el-button>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item :command="{type:'view',data:scope.row}">
|
||
查看
|
||
</el-dropdown-item>
|
||
<el-dropdown-item
|
||
:command="{type:'backOption',data:scope.row}"
|
||
v-if="scope.row.reserve_person_id === '${@shiro.getPrincipalProperty('id')}'">
|
||
反馈意见
|
||
</el-dropdown-item>
|
||
<!--# if(@shiro.hasRole('sysadmin')){ #-->
|
||
<el-dropdown-item
|
||
:command="{type:'delete',data:scope.row}">
|
||
删除
|
||
</el-dropdown-item>
|
||
<!--# } #-->
|
||
|
||
<el-dropdown-item
|
||
v-if="scope.row.reserve_person_id === '${@shiro.getPrincipalProperty('id')}'"
|
||
:command="{type:'cancel',data:scope.row}">
|
||
撤销预约
|
||
</el-dropdown-item>
|
||
|
||
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
<el-row class="el-pagination-container">
|
||
<el-pagination
|
||
@size-change="pageSizeChange"
|
||
@current-change="pageNumberChange"
|
||
:current-page="pageForm.pageNumber"
|
||
:page-sizes="[10, 20, 30, 50]"
|
||
:page-size="pageForm.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="pageForm.totalCount">
|
||
</el-pagination>
|
||
</el-row>
|
||
</el-card>
|
||
</el-row>
|
||
|
||
</el-row>
|
||
</template>
|
||
|
||
<template #edit>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12" :offset="6" style="text-align: center">
|
||
<div style="font-size: large;color: #303133">
|
||
您正在预约【<span style="color: #409EFF">{{infoViewData.name}}</span>】活动场地
|
||
</div>
|
||
<div style="color:#909399;">
|
||
开放时间段为：<span v-for="(item,index) in infoViewData.open_hours" style="color: #303133">
|
||
<span v-if="infoViewData.workday === true && index === 0">工作日</span>
|
||
【{{item.start_time}} - {{item.end_time}}】
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-calendar v-model="reserve_time">
|
||
<template slot="dateCell" slot-scope="{date, data}">
|
||
<div class="div-Calendar" @click="pushDay(data)">
|
||
<p :style="dayArray.includes(data.day) ? 'color: #246fb4' : ''">
|
||
{{ data.day.split('-').slice(1).join('-') }} {{ dayArray.includes(data.day) ? '√' : ''}}
|
||
</p>
|
||
<div v-for="item in reserveViewData"
|
||
v-if="${@shiro.hasRole('sysadmin')||@shiro.hasRole('xghng')||@shiro.hasRole('A06')}">
|
||
<div v-if="data.day.toString()==item.reserve_day"
|
||
:style="{backgroundColor:([0].includes(item.stateaudittype)?'#FAECD9':item.reserve_state==30?'#E0F4D9':'#FEE2E2')}">
|
||
<el-row :gutter="20" style="line-height: 30px;margin-bottom: 10px;">
|
||
<el-col :span="4">
|
||
<el-button v-if="[0].includes(item.stateaudittype)" type="warning"
|
||
size="mini" circle>待
|
||
</el-button>
|
||
<el-button v-if="item.stateaudittype==3" type="success" size="mini" circle>通
|
||
</el-button>
|
||
<el-button v-if="item.stateaudittype==1" type="danger" size="mini" circle>拒
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="20" style="font-size: 10px"><b>{{item.reserve_person}}</b>：{{item.start_time}}-{{item.end_time}}
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-calendar>
|
||
<div style="text-align: right">
|
||
<el-button @click="openAdd" type="primary">下一步</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<template #view>
|
||
<reserve-info ref="reserve"></reserve-info>
|
||
</template>
|
||
</guava>
|
||
|
||
<el-dialog title="新增场地预约" class="dia" :close-on-click-modal="false" @open="diaOpen" @close="diaClose"
|
||
:visible.sync="addDialogVisible" custom-class="ViewDialogClass" width="70%">
|
||
|
||
<vi-title :title="'您已选择的预约日期为：'+ dayArray.toString()" style="margin-left: 48px"></vi-title>
|
||
|
||
<el-form :model="formData" ref="addForm" :rules="formRules" size="small" label-position="right"
|
||
label-width="100px">
|
||
<el-form-item label="预约人" prop="reserve_person">
|
||
<el-select disabled allow-create style="width: 100%" v-model="formData.reserve_person" filterable remote
|
||
value-key="id" reserve-keyword placeholder="请输入关键词" @change="userChange"
|
||
:remote-method="remoteMethod" :loading="loading">
|
||
<el-option v-for="item in restaurants" :key="item.id" :label="item.username"
|
||
:value="item"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="性别" prop="sex">
|
||
<el-input readonly v-model="formData.sex" maxlength="100"
|
||
placeholder="请输入性别"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="工号" prop="loginname">
|
||
<el-input readonly v-model="formData.loginname" maxlength="100"
|
||
placeholder="请输入工号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所属单位" prop="reserve_person_unit">
|
||
<el-input readonly v-model="formData.reserve_person_unit" maxlength="100"
|
||
placeholder="请输入所属单位"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="reserve_person_phone">
|
||
<el-input maxlength="11" placeholder="请输入联系电话"
|
||
v-model="formData.reserve_person_phone"></el-input>
|
||
</el-form-item>
|
||
|
||
<!--<el-form-item label="可选时间段">
|
||
<div class="slider">
|
||
<div class="cover" v-for="se in optional"
|
||
:style="'width:'+getWidth(se[0],se[1])+'px;left:' +getLeft(se[0])+'px'"></div>
|
||
|
||
<div class="cover2" v-for="se in selected" v-if="!infoViewData.multiple"
|
||
:style="'width:'+getWidth(se[0],se[1])+'px;left:' +getLeft(se[0])+'px'"></div>
|
||
|
||
<el-slider
|
||
disabled
|
||
v-model="value"
|
||
range
|
||
show-stops
|
||
:format-tooltip="formatTooltip"
|
||
:marks="marks"
|
||
:min="min"
|
||
:step="step"
|
||
:max="max">
|
||
</el-slider>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label=" ">
|
||
<div style="display: flex;align-items: center">提示：
|
||
<i class="fa fa-circle ml5" style="color: #409EFF"></i>  可选时段    
|
||
<i class="fa fa-circle ml5" style="color: #E4E7ED"></i>  已选/未开放时段
|
||
</div>
|
||
</el-form-item>-->
|
||
|
||
<el-form-item label="预约时间" prop="time">
|
||
<el-select v-model="formData.time" style="width: 100%" filterable @change="timeChange"
|
||
placeholder="请选择预约时间">
|
||
<el-option v-for="item in infoViewData.open_hours"
|
||
:label="item.disabled ? item.start_time + ' - ' + item.end_time + '（已约满）' : item.start_time + ' - ' + item.end_time"
|
||
:disabled="item.disabled"
|
||
:value="item.start_time + '-' + item.end_time"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!--<el-form-item label="预约时间" prop="start_time">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-time-select
|
||
style="width: 95%;float: left"
|
||
placeholder="起始时间"
|
||
:clearable="false"
|
||
v-model="formData.start_time"
|
||
:picker-options="{start: infoViewData.open_hours?infoViewData.open_hours[0].start_time:'',step: '00:30',
|
||
end:infoViewData.open_hours?infoViewData.open_hours[infoViewData.open_hours.length-1].end_time:''}">
|
||
</el-time-select>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-time-select
|
||
style="width: 95%;float: right"
|
||
placeholder="结束时间"
|
||
:clearable="false"
|
||
@change="selectEnd()"
|
||
v-model="formData.end_time"
|
||
:picker-options="{start: addMinute(formData.start_time?formData.start_time:'',30),step: '00:30',
|
||
end:infoViewData.open_hours?infoViewData.open_hours[infoViewData.open_hours.length-1].end_time:''}">
|
||
</el-time-select>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>-->
|
||
|
||
<el-form-item label="预约事由" prop="reserve_cause">
|
||
<el-input maxlength="1000" placeholder="请输入预约事由" autosize v-model="formData.reserve_cause"
|
||
type="textarea" :autosize="{ minRows: 4, maxRows: 6}"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="closeAdd">取 消</el-button>
|
||
<el-button type="primary" :disabled="subDis" @click="doAdd">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-dialog :visible.sync="drawer" class="textDia" top="3%">
|
||
<h2>爱心母婴室管理规定</h2>
|
||
<h4 style="font-weight: bold">一、基本原则</h4>
|
||
<div style="padding-left: 30px;">
|
||
<h4>1.使用对象：有哺乳需求的本校在职女教职工。</h4>
|
||
<h4>2.开放时间：工作日8:00--17:30。</h4>
|
||
<h4>3.使用制度：实行预约登记制。凡有哺乳需求的女教职工提前向校工会提出使用申请，经审核通过并开通权限后即可使用。</h4>
|
||
<h4>4.日常管理：由校工会负责。</h4>
|
||
</div>
|
||
<h4 style="font-weight: bold">二、管理人员</h4>
|
||
<div style="padding-left: 30px;">
|
||
<h4>1.负责爱心母婴室使用登记管理。</h4>
|
||
<h4>2.定期保养设备，确保正常使用。</h4>
|
||
<h4>3.保持室内整洁、卫生安全，做好保洁消毒记录。</h4>
|
||
<h4>4.定期收集意见和建议，不断改进服务。</h4>
|
||
</div>
|
||
<h4 style="font-weight: bold">三、使用人员</h4>
|
||
<div style="padding-left: 30px;">
|
||
<h4>1.遵守学校安全管理制度和爱心母婴室管理规定。</h4>
|
||
<h4>2.严禁吸烟，安全使用电器，爱护公物，损坏赔偿。</h4>
|
||
<h4>3.保持室内卫生清洁，勿大声喧哗，不影响楼内工作秩序。</h4>
|
||
<h4>4.妥善保管自带物品，冰存的母乳须贴上姓名标签并及时取走。</h4>
|
||
<h4>5.不得擅自携他人入内，不做和哺乳无关事宜，使用完毕及时离开。</h4>
|
||
<h4>6.欢迎在《爱心母婴室使用意见簿》上留下您宝贵的意见和建议。</h4>
|
||
</div>
|
||
<br/>
|
||
<h4>联系人：曾钰媛梦 84894774、15850692181</h4>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="openReserve(textData)">已知晓并遵守</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<script>
|
||
<!--# include("/platform/activity/includeJs/activityUtil.js"){} #-->
|
||
const activityUtil = new typeUtil()
|
||
const HOUR1 = 60 * 60 * 1000
|
||
const HOUR8 = HOUR1 * 8
|
||
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
activityTypeList: [],
|
||
textData: {},
|
||
drawer: false,
|
||
step: 0.5,
|
||
max: 24,
|
||
min: 0,
|
||
slider_width: 0,
|
||
single_width: 0,
|
||
marks: {},
|
||
//本次选择
|
||
value: [0, 0],
|
||
//已选
|
||
selected: [],
|
||
//可选
|
||
optional: [],
|
||
siteList: [],
|
||
restaurants: [],
|
||
reserve_time: '',
|
||
infoViewData: {},
|
||
reserveViewData: {},
|
||
tableLoading: false,
|
||
addDialogVisible: false,
|
||
subDis: false,
|
||
loading: false,
|
||
tableData: [],
|
||
formData: {
|
||
open_hours: [{}],
|
||
start_time: '',
|
||
end_time: '',
|
||
reserve_person_phone: '',
|
||
reserve_cause: '',
|
||
time: '',
|
||
sex: "${@shiro.getPrincipalProperty('sex')}",
|
||
loginname: "${@shiro.getPrincipalProperty('loginname')}"
|
||
},
|
||
pageForm: {
|
||
searchName: "asr.reserve_person",
|
||
searchKeyword: "",
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
pageOrderName: "",
|
||
pageOrderBy: "",
|
||
time: ''
|
||
},
|
||
userid: '',
|
||
formRules: {
|
||
reserve_person: [{required: true, message: '请填写预约人', trigger: ['blur', 'change']}],
|
||
reserve_person_unit: [{required: true, message: '请填写单位', trigger: ['blur', 'change']}],
|
||
reserve_person_phone: [{required: true, message: '请填写联系方式', trigger: ['blur', 'change']}],
|
||
start_time: [{required: true, message: '请选择预约时间', trigger: ['blur', 'change']}],
|
||
time: [{required: true, message: '请选择预约时间', trigger: ['blur', 'change']}],
|
||
/*reserve_cause: [{required: true, message: '请选择预约事由', trigger: ['blur', 'change']}],*/
|
||
},
|
||
dayArray: [],
|
||
holidays: ['2022-06-03', '2022-06-04', '2022-06-05', '2022-09-10', '2022-09-11', '2022-09-12',
|
||
'2022-10-01', '2022-10-02', '2022-10-03', '2022-10-04', '2022-10-05', '2022-10-06', '2022-10-07',],
|
||
}
|
||
},
|
||
components: {
|
||
'guava': httpVueLoader('/components/plugins/Guava.vue'),
|
||
'reserve-info': httpVueLoader('/components/activity/site/ReserveInfo.vue'),
|
||
},
|
||
methods: {
|
||
diaOpen() {
|
||
if (this.infoViewData.multiple === true ||
|
||
(this.infoViewData.open_hours.length === 1 && this.infoViewData.open_hours[0].disabled !== true)) {
|
||
this.formData.time = this.infoViewData.open_hours[0].start_time + '-' + this.infoViewData.open_hours[0].end_time
|
||
this.formData.start_time = this.infoViewData.open_hours[0].start_time
|
||
this.formData.end_time = this.infoViewData.open_hours[0].end_time
|
||
}
|
||
},
|
||
diaClose() {
|
||
this.formData.time = ''
|
||
this.formData.start_time = ''
|
||
this.formData.end_time = ''
|
||
},
|
||
timeChange(o) {
|
||
this.formData.start_time = o.split('-')[0]
|
||
this.formData.end_time = o.split('-')[1]
|
||
},
|
||
dropdownCommand(command) {
|
||
const {type, data} = command
|
||
if (type === 'view') {
|
||
this.userid = data.reserve_person_id;
|
||
this.openView(data)
|
||
} else if (type === 'delete') {
|
||
this.doDelete(data.id, 1)
|
||
} else if (type === 'cancel') {
|
||
this.doDelete(data.id, 2)
|
||
} else if (type === 'backOption') {
|
||
this.backOption(data)
|
||
}
|
||
},
|
||
backOption(row) {
|
||
this.$prompt('请填写反馈意见', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputValidator: (value) => {
|
||
if (value === null) {
|
||
return '反馈意见不能为空'
|
||
}
|
||
}
|
||
}).then(async ({value}) => {
|
||
const res = await $.post('/mobile/activity/site/info/backOption', {
|
||
id: row.id,
|
||
option: value
|
||
})
|
||
if (res.code === 0) {
|
||
await this.doSearch()
|
||
this.$notify.success({title: '提示', message: '操作成功!'});
|
||
} else {
|
||
this.$notify.warning({title: '警告', message: '操作失败！'});
|
||
}
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
addMinute(val, minute) {
|
||
if (val) {
|
||
return moment("1970-01-01 " + val).add(minute, 'm').format("HH:mm");
|
||
}
|
||
},
|
||
flushSliderWidth() {
|
||
this.slider_width = document.getElementsByClassName("slider")[0].clientWidth
|
||
this.single_width = this.slider_width / (this.max - this.min)
|
||
},
|
||
getWidth(before, end) {
|
||
return this.single_width * (end - before) - 6
|
||
},
|
||
getLeft(num) {
|
||
return this.single_width * (num - this.min) + 3
|
||
},
|
||
getMarks() {
|
||
for (let i = this.min; i < this.max; i++) {
|
||
this.marks[i] = moment(i * HOUR1 - HOUR8).format('HH:mm')
|
||
}
|
||
this.marks[this.max] = moment(this.max * HOUR1 - HOUR8).format('HH:mm')
|
||
},
|
||
//验证是否可行
|
||
verification(val) {
|
||
const before = val[0]
|
||
const end = val[1]
|
||
|
||
//是否在可选范围内
|
||
const optionalFlag = this.optional.some(v => before >= v[0] && end <= v[1])
|
||
|
||
//是否没有被选
|
||
const noSelectedFlag = !this.selected.some(v => {
|
||
return (before >= v[0] && before <= v[1]) || (end >= v[0] && end <= v[1]) || (before <= v[0] && end >= v[1])
|
||
})
|
||
|
||
return optionalFlag && noSelectedFlag
|
||
},
|
||
formatTooltip(val) {
|
||
return moment(val * HOUR1 - HOUR8).format('HH:mm')
|
||
},
|
||
async selectEnd() {
|
||
const {reserve_day, start_time, end_time, site_id} = this.formData
|
||
const {open_hours} = this.infoViewData
|
||
let mySelectStartTime = reserve_day + " " + start_time;
|
||
|
||
//判断预约时间是否在小于当前时间 若小于提示用户选择错误
|
||
if (mySelectStartTime < moment().format("YYYY-MM-DD HH:mm:ss")) {
|
||
this.$notify.warning({title: '警告', message: '您选中的预约时间已超过当前时间，请重新选择!'});
|
||
this.$set(this.formData, 'start_time', '')
|
||
this.$set(this.formData, 'end_time', '')
|
||
return;
|
||
}
|
||
|
||
//判断预约时间是否已被预约 若已预约提示用户选择错误
|
||
if (await this.checkReserve(reserve_day, start_time, end_time, site_id) > 0) {
|
||
this.$notify.warning({title: '警告', message: '该时段已被预约，请重新选择!'});
|
||
this.$set(this.formData, 'start_time', '')
|
||
this.$set(this.formData, 'end_time', '')
|
||
return
|
||
}
|
||
|
||
//判断预约时间是否开放 若未开放提示用户选择错误
|
||
if (!open_hours.some(v => start_time >= v.start_time && end_time <= v.end_time)) {
|
||
this.$notify.warning({title: '警告', message: '您选中预约时间暂未开放，请重新选择!'});
|
||
this.$set(this.formData, 'start_time', '')
|
||
this.$set(this.formData, 'end_time', '')
|
||
}
|
||
},
|
||
async siteChange(id) {
|
||
this.pageForm.siteId = id
|
||
this.pageData()
|
||
},
|
||
userChange(data) {
|
||
this.$set(this.formData, "reserve_person", data.username ? data.username : data)
|
||
this.$set(this.formData, "reserve_person_unit", data.unit_name)
|
||
this.$set(this.formData, "reserve_person_phone", data.mobile ? data.mobile : '')
|
||
},
|
||
remoteMethod(keywords) {
|
||
$.post(location.href + "/findUser", {keywords: keywords}, (res) => {
|
||
const {code, data, msg} = res
|
||
if (code === 0) {
|
||
this.restaurants = data;
|
||
} else {
|
||
this.restaurants = [];
|
||
this.$message.error(msg);
|
||
}
|
||
this.loading = false;
|
||
})
|
||
},
|
||
closeAdd() {
|
||
this.addDialogVisible = false
|
||
this.formData.end_time = ''
|
||
},
|
||
textDia(data) {
|
||
this.textData = data
|
||
this.dayArray = []
|
||
/*if (data.typeid === 1) {
|
||
if("${@shiro.getPrincipalProperty('sex')}" == '女'){
|
||
this.drawer = true
|
||
} else {
|
||
this.$notify.warning({title: '警告', message: '抱歉，该场地仅限女性会员预约'});
|
||
return
|
||
}
|
||
} else {
|
||
this.openReserve(data)
|
||
}*/
|
||
if (data.sexlimit === 1 || data.sexlimit === 2) {
|
||
const sex = data.sexlimit === 1 ? '男' : '女'
|
||
if ("${@shiro.getPrincipalProperty('sex')}" === sex) {
|
||
this.openReserve(data)
|
||
} else {
|
||
this.$notify.warning({title: '警告', message: '抱歉，该场地仅限' + sex + '性会员预约'});
|
||
}
|
||
} else {
|
||
this.openReserve(data)
|
||
}
|
||
},
|
||
pushDay(data) {
|
||
const d = new Date(data.day).getDay()
|
||
if (this.textData.workday === true && (d === 0 || d === 6 || this.holidays.includes(data.day))) {
|
||
this.$notify.warning({title: '警告', message: '抱歉，该场地只能预约工作日'});
|
||
return
|
||
}
|
||
if (data.day < moment(new Date()).format('YYYY-MM-DD')) {
|
||
this.$notify.warning({title: '警告', message: '你选择的日期已过'});
|
||
return
|
||
}
|
||
if (this.dayArray.includes(data.day)) {
|
||
this.dayArray.splice(this.dayArray.indexOf(data.day), 1)
|
||
} else {
|
||
this.dayArray.push(data.day)
|
||
this.dayArray.sort()
|
||
}
|
||
},
|
||
async openAdd() {
|
||
|
||
//查询用户点击的这一天已经被预约的时间段
|
||
/*if(this.textData.multiple === false) {
|
||
const da = await this.findReserveInfoByClickDay(this.textData.id, data.day)
|
||
const daMap = da.map(o => o.start_time + '-' + o.end_time)
|
||
this.infoViewData.open_hours.forEach(item => {
|
||
const str = item.start_time + '-' + item.end_time
|
||
if (daMap.includes(str)) {
|
||
item.disabled = true
|
||
} else {
|
||
item.disabled = false
|
||
}
|
||
})
|
||
}*/
|
||
if (this.dayArray && this.dayArray.length === 0) {
|
||
this.$notify.warning({title: '警告', message: '请选择预约日期！'});
|
||
return
|
||
}
|
||
|
||
//this.$set(this.formData, "reserve_day", data.day)
|
||
this.$set(this.formData, "reserve_person", '${@shiro.getPrincipalProperty("username")}')
|
||
this.$set(this.formData, "reserve_person_unit", '${@shiro.getPrincipalProperty("unit").getName()}')
|
||
this.$set(this.formData, "reserve_person_phone", '${@shiro.getPrincipalProperty("mobile")}')
|
||
|
||
/*this.reserveViewData.filter(v => {
|
||
if (v.reserve_day === data.day) {
|
||
let start = this.transNum(v.start_time)
|
||
let end = this.transNum(v.end_time)
|
||
this.selected.push([start, end])
|
||
}
|
||
})*/
|
||
|
||
const {open_hours} = this.infoViewData
|
||
|
||
open_hours.sort((a, b) => this.transNum(a.start_time) - this.transNum(b.start_time))
|
||
|
||
this.min = this.transNum(open_hours[0].start_time)
|
||
this.min = this.min % 1 === 0 ? this.min : this.min - 0.5
|
||
this.max = this.transNum(open_hours[open_hours.length - 1].end_time)
|
||
this.max = this.max % 1 === 0 ? this.max : this.max + 0.5
|
||
|
||
this.optional = open_hours.map(v => [this.transNum(v.start_time), this.transNum(v.end_time)])
|
||
|
||
if (this.$refs['addForm']) {
|
||
this.$refs['addForm'].resetFields()
|
||
}
|
||
|
||
this.addDialogVisible = true
|
||
|
||
this.$nextTick(() => {
|
||
|
||
this.flushSliderWidth()
|
||
$(window).resize(() => {
|
||
vue.flushSliderWidth()
|
||
})
|
||
})
|
||
|
||
},
|
||
async doDelete(id, op) {
|
||
if (op === 2) {
|
||
const res = await $.post(location.href + "/isCanRollBack", {id: id});
|
||
if (res === true) {
|
||
this.$notify.warning({title: '警告', message: '此预约状态下不能进行撤回操作！'});
|
||
return
|
||
}
|
||
}
|
||
let text = op === 1 ? '删除' : '撤销'
|
||
this.$confirm("您确定要" + text + "此预约吗?", '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: (a, b) => {
|
||
if ("confirm" === a) {
|
||
$.post(location.href + "/doDelete", {id, op}, (data) => {
|
||
if (data.code === 0) {
|
||
this.$message.success(data.msg)
|
||
this.pageData();
|
||
} else {
|
||
this.$message.warning(data.msg)
|
||
}
|
||
}, "json");
|
||
}
|
||
}
|
||
});
|
||
},
|
||
transNum(hm) {
|
||
return (moment("1970-01-01 " + hm).valueOf() + HOUR8) / HOUR1
|
||
},
|
||
async doAdd() {
|
||
if (!this.formData.time) {
|
||
this.$notify.warning({title: '警告', message: '未选择预约时间！'});
|
||
return
|
||
}
|
||
const s = this.formData.time.split('-')[0]
|
||
const e = this.formData.time.split('-')[1]
|
||
const t = this.infoViewData.open_hours.find(x => {
|
||
return x.start_time === s && x.end_time === e
|
||
})
|
||
if (t && t.disabled === true) {
|
||
this.$notify.warning({title: '警告', message: '该时间段已约满！'});
|
||
return
|
||
}
|
||
if (moment().unix() >= moment(this.formData.reserve_day + ' ' + e + ':00').unix()) {
|
||
this.$notify.warning({title: '警告', message: '您预约的时间段已过！'});
|
||
return
|
||
}
|
||
this.$refs["addForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
this.subDis = true
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '正在提交...',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
|
||
const {code, msg} = await $.post(location.href + "/doAdd", {
|
||
data: JSON.stringify(this.formData),
|
||
days: JSON.stringify(this.dayArray)
|
||
})
|
||
if (code === 0) {
|
||
this.addDialogVisible = false
|
||
this.$message.success(msg);
|
||
this.pageData()
|
||
this.$refs.guava.index()
|
||
} else {
|
||
this.$notify.warning({title: '警告', message: msg});
|
||
}
|
||
loading.close()
|
||
this.subDis = false
|
||
}
|
||
});
|
||
},
|
||
openView(row) {
|
||
this.$refs.guava.view()
|
||
const role = "${@shiro.hasRole('sysadmin')||@shiro.hasRole('xghng')||@shiro.hasRole('A06')}"
|
||
this.$refs.reserve.role = role
|
||
const backOptionShow = "${@shiro.getPrincipalProperty('id')}" === this.userid
|
||
this.$refs.reserve.backOptionShow = (role || backOptionShow)
|
||
this.$refs.reserve.openView(row.id)
|
||
},
|
||
async openReserve(data) {
|
||
this.drawer = false
|
||
data.open_hours = site.reverseRankingDate(data.open_hours)
|
||
this.reserveViewData = await this.findReserveInfo(data.id)
|
||
this.reserveViewData.forEach(item => {
|
||
item.index = 0
|
||
})
|
||
this.formData.site_id = data.id
|
||
this.infoViewData = data
|
||
this.$refs.guava.edit()
|
||
},
|
||
async doSearch() {
|
||
this.pageForm.pageNumber = 1
|
||
this.pageData()
|
||
this.siteList = await this.findAllOpenSite()
|
||
},
|
||
pageOrder(column) {
|
||
this.pageForm.pageOrderName = column.prop;
|
||
this.pageForm.pageOrderBy = column.order;
|
||
this.pageData();
|
||
},
|
||
pageNumberChange(val) {
|
||
this.pageForm.pageNumber = val;
|
||
this.pageData();
|
||
},
|
||
pageSizeChange(val) {
|
||
this.pageForm.pageSize = val;
|
||
this.pageData();
|
||
},
|
||
pageData() {
|
||
sublime.showLoadingbar();
|
||
this.tableLoading = true
|
||
$.post(location.href + "/pageData", this.pageForm, (res) => {
|
||
const {code, data, msg} = res
|
||
sublime.closeLoadingbar();
|
||
this.tableLoading = false
|
||
if (code === 0) {
|
||
this.tableData = data.list;
|
||
this.pageForm.totalCount = data.totalCount;
|
||
} else {
|
||
this.$message.error(msg);
|
||
}
|
||
}, "json");
|
||
},
|
||
async findReserveInfo(siteId) {
|
||
const {data} = await $.get("/platform/activity/site/reserve/findReserveInfo", {siteId})
|
||
return data;
|
||
},
|
||
async findReserveInfoByClickDay(siteId, day) {
|
||
const {data} = await $.get("/platform/activity/site/reserve/findReserveInfo", {
|
||
siteId: siteId,
|
||
day: day
|
||
})
|
||
return data;
|
||
},
|
||
async findOneSite(id) {
|
||
const {data} = await $.get("/platform/activity/site/mange/findOneSite", {id: id})
|
||
return data
|
||
},
|
||
async checkReserve(reserve_day, start_time, end_time, site_id) {
|
||
const {data} = await $.get("/platform/activity/site/reserve/checkReserve", {
|
||
reserve_day,
|
||
start_time,
|
||
end_time,
|
||
site_id
|
||
})
|
||
return data
|
||
},
|
||
async findAllOpenSite(siteId) {
|
||
const {data} = await $.get("/platform/activity/site/reserve/findAllOpenSite", {
|
||
time: this.pageForm.time,
|
||
siteId: siteId,
|
||
siteType: this.pageForm.siteType,
|
||
})
|
||
for (let i = 0; i < data.length; i++) {
|
||
data[i].open_hours = JSON.parse(data[i].open_hours)
|
||
data[i].open_hours = site.reverseRankingDate(data[i].open_hours)
|
||
}
|
||
return data
|
||
},
|
||
},
|
||
async created() {
|
||
this.activityTypeList = await activityUtil.getAllType()
|
||
this.siteList = await this.findAllOpenSite()
|
||
this.pageData();
|
||
this.getMarks();
|
||
}
|
||
})
|
||
</script>
|
||
<!--#
|
||
}
|
||
#-->
|