423 lines
23 KiB
HTML
423 lines
23 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
<style>
|
||
.el-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.remindTextArea textarea {
|
||
resize: none;
|
||
}
|
||
|
||
.remindClass {
|
||
width: 100%;
|
||
white-space: break-spaces;
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
background-color: white;
|
||
max-height: 600px;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.el-divider {
|
||
background-color: #1867b0;
|
||
}
|
||
|
||
.el-divider__text {
|
||
color: #1867b0;
|
||
}
|
||
</style>
|
||
<div id="app" v-cloak>
|
||
<guava ref="guava">
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<h3 style="color: #1867b0">场地预约</h3>
|
||
</template>
|
||
|
||
<template>
|
||
<el-divider content-position="left">申请信息填写</el-divider>
|
||
<el-form :model="formData" :rules="formRules" label-width="120px" ref="addForm">
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<el-col :span="12">
|
||
<el-form-item label="预约人" prop="reserve_person_username">
|
||
<el-input readonly placeholder="预约人"
|
||
v-model="formData.reserve_person_username"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="预约人工号" prop="reserve_person_loginname">
|
||
<el-input readonly placeholder="预约人工号"
|
||
v-model="formData.reserve_person_loginname"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<el-col :span="12">
|
||
<el-form-item label="预约人性别" prop="reserve_person_sex">
|
||
<el-input readonly placeholder="预约人性别"
|
||
v-model="formData.reserve_person_sex"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话" prop="reserve_person_phone">
|
||
<el-input readonly placeholder="联系电话"
|
||
v-model="formData.reserve_person_phone"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<el-col :span="12">
|
||
<el-form-item label="申请部门" prop="reserve_person_unit">
|
||
<el-select disabled
|
||
placeholder="申请部门"
|
||
v-model="formData.reserve_person_unit">
|
||
<el-option :label="item.name"
|
||
:value="item.id"
|
||
v-for="item in units">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="申请工会" prop="reserve_person_unionname">
|
||
<el-input readonly placeholder="申请工会"
|
||
v-model="formData.reserve_person_unionname"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<el-col :span="12">
|
||
<el-form-item label="预约场地" prop="site_id">
|
||
<el-select clearable @change="siteChange"
|
||
filterable placeholder="请选择预约场地"
|
||
v-model="formData.site_id">
|
||
<el-option :key="item.id" :label="item.name"
|
||
:value="item.id"
|
||
v-for="item in siteInfoList">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div style="margin-top: 10px">
|
||
<span style="color: red">提示:选择不同的预约场地，可以查看不同场地的申请情况!</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<el-col :span="12">
|
||
<el-form-item label="预约开始时间" prop="reserve_start_time">
|
||
<el-date-picker style="width: 100%"
|
||
type="datetime"
|
||
:picker-options="pickerOptions"
|
||
placeholder="请选择预约开始时间"
|
||
@focus="timeEditable"
|
||
:editable="false"
|
||
v-model="formData.reserve_start_time"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
value-format="yyyy-MM-dd HH:mm:ss">
|
||
</el-date-picker>
|
||
<!-- <span class="text-danger">由于2024年3月14，15两日开展教代会会议故无法申请该两天的场地。</span>-->
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="预约结束时间" prop="reserve_end_time">
|
||
<el-date-picker style="width: 100%"
|
||
type="datetime"
|
||
:editable="false"
|
||
@focus="timeEditable"
|
||
placeholder="请选择预约结束时间"
|
||
:picker-options="pickerOptions"
|
||
v-model="formData.reserve_end_time"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
value-format="yyyy-MM-dd HH:mm:ss">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <el-form-item label="预约活动项目" prop="reserve_activity">-->
|
||
<!-- <el-input placeholder="请填写预约活动项目" maxlength="100"-->
|
||
<!-- v-model="formData.reserve_activity"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
<el-col :span="12">
|
||
<el-form-item label="预约事由" prop="reserve_cause">
|
||
<el-input placeholder="请填写预约事由" maxlength="100"
|
||
v-model="formData.reserve_cause"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="参加人数" prop="reserve_join_user_num">
|
||
<el-input placeholder="请填写参加人数"
|
||
v-model="formData.reserve_join_user_num"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" type="flex">
|
||
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <el-form-item label="场地需求" prop="reserve_demand">-->
|
||
<!-- <el-input placeholder="请填写场地需求" maxlength="100"-->
|
||
<!-- v-model="formData.reserve_demand"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<el-divider content-position="left">场地预约申请情况</el-divider>
|
||
|
||
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;padding: 20px" row-key="id"
|
||
@sort-change="pageOrder" v-loading="tableLoading" :size="tableSize"
|
||
empty-text="该场地暂无预约"
|
||
border
|
||
class="vi-table">
|
||
<el-table-column align="center" header-align="center" type="index"
|
||
:index="indexMethod" label="序号"
|
||
width="80px"></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
header-align="center"
|
||
v-for="column in tableColumns"
|
||
:key="column.prop"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
:sortable="column.sortable"
|
||
show-overflow-tooltip>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div style="float: right;margin: 20px 0">
|
||
<el-button type="primary" @click="doSubmit()">提 交</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
</el-card>
|
||
</template>
|
||
</guava>
|
||
|
||
<el-dialog :close-on-click-modal="false" :visible.sync="writeRemindDialog" top="50px" width="60%"
|
||
append-to-body>
|
||
<div style="padding: 0 20px">
|
||
<h4>职工之家场地预约</h4>
|
||
<h4>主管部门：校工会</h4>
|
||
<h3 style="text-align: center">欢迎使用《职工之家场地预约申请流程》服务！</h3>
|
||
<h4 style="font-weight: bold">流程说明：</h4>
|
||
<h4 style="font-weight: bold">一、为提高职工之家场地使用效率，充分保障我校相关活动正常有序开展，特制订本管理规定。</h4>
|
||
<h4 style="font-weight: bold">二、职工之家场地是服务于学校及各部门教职工重大会议及重要文化活动的重要场所，由校工会遵循“申请与统筹协调”相结合的原则统一调度与管理。</h4>
|
||
<h4 style="font-weight: bold">三、场地管理</h4>
|
||
<div style="padding-left: 30px;">
|
||
<h4>1.校工会现有场地3个，位于校工会一层。其中多功能厅座位80个，党员之家会议室座位20个，研讨室座位12个。</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>
|
||
</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>
|
||
<h4 style="font-weight: bold">六、本管理规定的解释权归校工会。</h4>
|
||
<h4 style="font-weight: bold">七、相关事项联系方式：</h4>
|
||
<div style="padding-left: 30px;">
|
||
<h4>多功能厅、研讨室使用咨询——校工会办公室</h4>
|
||
<h4>联系电话：84755127</h4>
|
||
<h4>党员之家会议室使用咨询——党委组织部、综合考核办公室</h4>
|
||
<h4>联系电话：84755117 </h4>
|
||
</div>
|
||
<br/>
|
||
</div>
|
||
<!-- <div v-html="config.writeRemind"></div>-->
|
||
<div class="text-center" slot="footer">
|
||
<el-button @click="writeRemindDialog = false" type="primary">开始办理</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<script>
|
||
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
|
||
const validateEndTime = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请选择结束时间'))
|
||
}
|
||
if (this.formData.reserve_start_time) {
|
||
//判断是否跨天预约
|
||
const startTime = this.formData.reserve_start_time.substr(0, 10);
|
||
const endTime = value.substr(0, 10);
|
||
if (endTime > startTime) {
|
||
callback(new Error('预约仅限当天时间段，请勿跨天预约!'))
|
||
}
|
||
if (Date.parse(value) <= Date.parse(this.formData.reserve_start_time)) {
|
||
callback(new Error('结束时间必须大于开始时间'))
|
||
}
|
||
}
|
||
callback()
|
||
}
|
||
return {
|
||
writeRemindDialog: false,
|
||
units: [],
|
||
siteInfoList: [],
|
||
formData: {},
|
||
tableData: [],
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
// const twoDaysLater = new Date(); // 获取当前日期
|
||
// const day = time.getDay();
|
||
// twoDaysLater.setDate(twoDaysLater.getDate());
|
||
// // return time.getTime() < twoDaysLater.getTime() || [0, 6].includes(day)
|
||
// return time.getTime() <= twoDaysLater.getTime() || [0, 6].includes(day)
|
||
|
||
const today = new Date();
|
||
today.setHours(0,0,0,0);
|
||
const day = time.getDay()
|
||
const year = time.getFullYear();
|
||
const month = time.getMonth();
|
||
const date = time.getDate();
|
||
|
||
if (time.getTime() < today.getTime()){
|
||
return true;
|
||
}
|
||
|
||
if (year === 2024 && month === 3 && date === 28){
|
||
return false;
|
||
}
|
||
|
||
if (year === 2024 && month === 4 && date === 11){
|
||
return false;
|
||
}
|
||
|
||
if ([0,6].includes(day)){
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
},
|
||
selectableRange: '08:30:00 - 17:00:00',
|
||
},
|
||
tableColumns: [
|
||
{label: '场地名称', prop: 'sitename'},
|
||
{label: '开始时间', prop: 'reserve_start_time'},
|
||
{label: '结束时间', prop: 'reserve_end_time'},
|
||
{label: '预约人姓名', prop: 'reserve_person_username'},
|
||
{label: '预约人部门', prop: 'reserve_person_unitname'},
|
||
{label: '联系电话', prop: 'reserve_person_phone'},
|
||
{label: '预约事由', prop: 'reserve_cause'},
|
||
],
|
||
formRules: {
|
||
reserve_start_time: [{required: true, message: '请选择开始时间', trigger: ['change', 'blur']}],
|
||
site_id: [{required: true, message: '请选择预约场地', trigger: ['change', 'blur']}],
|
||
// reserve_activity: [{required: true, message: '请选填写活动项目', trigger: ['change', 'blur']}],
|
||
reserve_cause: [{required: true, message: '请选填写预约事由', trigger: ['change', 'blur']}],
|
||
reserve_join_user_num: [{required: true, message: '请选填写参加人数', trigger: ['change', 'blur']}],
|
||
// reserve_demand: [{required: true, message: '请填写场地需求', trigger: ['change', 'blur']}],
|
||
reserve_end_time: [{required: true, validator: validateEndTime, trigger: ['change', 'blur']}],
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
timeEditable() {//组件禁止组件里面的input输入值
|
||
this.$nextTick(() => {
|
||
let els = document.querySelectorAll('.el-date-picker__editor-wrap input');
|
||
for (var i = 0; i <= els.length - 1; i++) {
|
||
els[i].setAttribute('readonly', 'readonly');
|
||
}
|
||
})
|
||
},
|
||
async findAllOpenSite() {
|
||
const resp = await $.get("/platform/activity/site/apply/getAllSite")
|
||
if (resp.code === 0) {
|
||
this.siteInfoList = resp.data
|
||
}
|
||
},
|
||
async siteChange() {
|
||
const resp = await $.get('/platform/activity/site/apply/siteChange', {siteId: this.formData.site_id})
|
||
console.log(resp)
|
||
if (resp.code === 0) {
|
||
this.tableData = resp.data
|
||
}
|
||
},
|
||
async doSubmit() {
|
||
const res = await $.get('/platform/activity/site/apply/checkApplyTime', {
|
||
time: this.formData.reserve_start_time,
|
||
endTime: this.formData.reserve_end_time,
|
||
siteId: this.formData.site_id
|
||
})
|
||
if (res.code === 1) {
|
||
this.$notify.warning(res.msg)
|
||
this.formData.reserve_start_time = ''
|
||
this.formData.reserve_end_time = ''
|
||
return
|
||
}
|
||
const valid = await this.$refs['addForm'].validate()
|
||
if (!valid) return
|
||
|
||
const {site_id, reserve_start_time, reserve_end_time} = this.formData
|
||
const siteInfo = this.siteInfoList.find(v => v.id == site_id)
|
||
|
||
const confirm = await this.$confirm('您确定要提交【' + siteInfo.name + '】\n，时间为：' + reserve_start_time + "\n至\n" + reserve_end_time + '\n的预约吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const resp = await $.post('/platform/activity/site/apply/insert', {"siteReserve": JSON.stringify(this.formData)})
|
||
if (resp.code === 0) {
|
||
this.$notify.success(resp.msg);
|
||
setTimeout(() => {
|
||
window.location.href = '/platform/activity/site/reserve'
|
||
}, 500)
|
||
} else {
|
||
this.$notify.error(resp.msg);
|
||
}
|
||
}
|
||
},
|
||
async initData() {
|
||
const {data} = await $.get(loc() + '/applyUserInfo')
|
||
this.$set(this.formData, 'reserve_person_id', data.reserve_person_id)
|
||
this.$set(this.formData, 'reserve_person_username', data.reserve_person_username)
|
||
this.$set(this.formData, 'reserve_person_loginname', data.reserve_person_loginname)
|
||
this.$set(this.formData, 'reserve_person_sex', data.reserve_person_sex)
|
||
this.$set(this.formData, 'reserve_person_phone', data.reserve_person_phone)
|
||
this.$set(this.formData, 'reserve_person_unitname', data.reserve_person_unitname)
|
||
this.$set(this.formData, 'reserve_person_unionname', data.reserve_person_unionname)
|
||
this.$set(this.formData, 'reserve_person_unionid', data.reserve_person_unionid)
|
||
this.$set(this.formData, 'reserve_person_unit', '${@shiro.getPrincipalProperty("unit").getId()}')
|
||
this.writeRemindDialog = true
|
||
}
|
||
},
|
||
async created() {
|
||
this.units = await getUnits();
|
||
await this.findAllOpenSite();
|
||
this.initData();
|
||
}
|
||
})
|
||
</script>
|
||
<!--#
|
||
}
|
||
#-->
|