c-zhangr1/UNION_NSI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
c-zhangr1
2026-09-08 19:49:21 +08:00
commit ebffbab428
7320 changed files with 1477614 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
target/classes/views/mobile/activity/site/reserve.html
+467
View File
@@ -0,0 +1,467 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
.my_calendar {
width: 100%;
height: 100px;
background-color: #0e78c5;
display: flex;
align-items: center;
color: white;
}
.day {
background-color: #14497e;
display: inline-block;
text-align: center;
padding: 5px 6px;
line-height: 22px;
border-radius: 4px;
margin-right: 6px;
font-size: 14px;
}
.time {
width: 72%;
text-align: center;
}
.state {
width: 80px;
height: 36px;
text-align: center;
background-color: #f2f2f2;
border-radius: 2px;
color: #929292;
}
.container {
padding: 10px 0px;
background-color: white;
width: 95%;
margin: 0 auto;
border-radius: 6px;
margin-top: 10px;
}
tr {
line-height: 36px;
}
.van-action-sheet__content {
padding: 10px;
font-size: 15px;
}
.title {
margin: 10px 0px;
color: grey;
}
.top-calendar {
height: 70px;
max-height: 70px;
position: sticky;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
background-color: #0e78c5;
}
.calendar-left {
width: calc(100% - 20px);
overflow-x: auto;
display: flex;
height: 90%;
}
.calendar-left-day {
min-width: 65px;
height: 100%;
margin: 0 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FFF;
}
.left-day-active {
background-color: #0000cc;
}
.day-info-month {
}
.day-info-week {
margin-bottom: 5px;
}
.calendar-right {
width: 30px;
max-width: 30px;
text-align: center;
height: 60%;
border-left: 1px solid #fff3f3;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
}
.top_pop .van-popup {
top: 46px;
}
.van-action-sheet {
max-height: 90%;
}
</style>
<div id="app" v-cloak>
<!--top栏-->
<van-nav-bar
:title="site.name"
left-arrow
placeholder
fixed
@click-left="history.go(-1)"
safe-area-inset-top
></van-nav-bar>
<div class="top-calendar">
<div class="calendar-left">
<div class="calendar-left-day" :class="moment(item).unix() == selectDate.unix() ? 'left-day-active':''"
@click="dayClick(item)"
v-for="item in weekList">
<div class="day-info-week">
{{getWeekTextByDate(item)}}
</div>
<div class="day-info-month">
{{moment(item).format('MM-DD')}}
</div>
</div>
</div>
<div class="calendar-right">
<van-icon size="16" color="white" name="arrow-down" @click="calendarVisible=true"></van-icon>
<van-calendar class="top_pop" v-model="calendarVisible" color="#246fb4" position="top" @confirm="onConfirm"
:default-date="selectDate.toDate()"
:formatter="calendarFormatter"
title="选择开始日期"></van-calendar>
</div>
</div>
<div class="container">
<table>
<tr v-for="item in timeData">
<td class="time">{{item.start_time + '-' + item.end_time}}</td>
<td>
<div v-if="isCanRe(item)===3" class="state" style="background-color: #0e78c5;color: #fff3f3">
已预约
</div>
<div v-if="isCanRe(item) === 2" class="state" style="background-color: #fff4f2; color: #cc5a45">约满
</div>
<div @click="chooseTime(item)" v-if="isCanRe(item) === 1" class="state"
style="background-color: #e8ffef; color: #52986a">
<span v-if="!times.map(o => o.fullDay).includes(selectDate.format('YYYY-MM-DD') + ' ' + item.start_time + '-' + item.end_time)">可预约</span>
<span v-else>
<van-icon name="passed" size="26" style="line-height: 36px;position: unset"></van-icon>
</span>
</div>
<div v-if="isCanRe(item) === 0" class="state">已过期</div>
</td>
</tr>
</table>
</div>
<div style="position: fixed; bottom: 0; width: 100%">
<van-button @click="reserve" type="primary" color="#246fb4" style="width: 100%">确定预约</van-button>
</div>
<van-action-sheet v-model="show" title="确认预约信息">
<van-form @submit="reserveDo">
<van-cell title="预约人">{{person}}</van-cell>
<van-cell title="性别">${@shiro.getPrincipalProperty('sex')}</van-cell>
<van-cell title="工号">${@shiro.getPrincipalProperty('loginname')}</van-cell>
<van-cell title="所属单位">{{unit}}</van-cell>
<van-cell title="联系电话">{{phone}}</van-cell>
<van-cell title="预约时间">
<div v-for="time in times">
<van-tag closeable size="medium" type="primary" @close="close(time.fullDay)">
{{time.fullDay}}
</van-tag>
</div>
</van-cell>
<van-cell title="预约地点">{{site.name}}</van-cell>
<van-field
v-model="message"
rows="1"
autosize
label="预约事由"
type="textarea"
maxlength="50"
required
placeholder="请输入预约事由"
show-word-limit
:rules="[{required:true,message:'请填写预约事由'}]"
></van-field>
<van-field
v-model="joinUser"
rows="2"
autosize
label="参加人员"
type="textarea"
maxlength="50"
placeholder="请输入参加人员"
show-word-limit
></van-field>
</van-form>
<div style="margin: 20px 0px; display: flex; justify-content: space-between;padding: 0px 22px;">
<van-button @click="message = '';show = false" color="#246fb4" style="width: 47%" size="small" plain
type="info">关闭
</van-button>
<van-button @click="reserveDo" color="#246fb4" style="width: 47%" size="small" type="info">确认</van-button>
</div>
</van-action-sheet>
</div>
<script>
moment.locale('zh_cn');
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
<!--# include("/platform/activity/includeJs/activityUtil.js"){} #-->
const siteTypeUtil = new typeUtil()
var vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
person: "${@shiro.getPrincipalProperty('username')}",
unit: "${@shiro.getPrincipalProperty('unit').getName()}",
phone: "${@shiro.getPrincipalProperty('mobile')}",
message: '',
show: false,
site_id: '',
site: {},
timeData: [],
times: [],
weekList: [],
joinUser: '',
calendarVisible: false,
selectDate: null,
//已经预约的记录
alreadyReserveRecord: [],
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',],
}
},
computed: {
getWeekTextByDate() {
return (date) => {
const weekNum = moment(date).day()
switch (weekNum) {
case 0:
return '周日'
case 1:
return '周一'
case 2:
return '周二'
case 3:
return '周三'
case 4:
return '周四'
case 5:
return '周五'
case 6:
return '周六'
}
}
},
calendarFormatter() {
return (day) => {
// 休息日不能选择
if (this.site.workday === true) {
let week = day.date.getDay()
if (week === 0 || week === 6) {
day.type = 'disabled'
}
}
return day
}
}
},
methods: {
close(f) {
if (this.times.length === 1) {
vant.Toast('必须保留一个时间段')
return
}
const index = this.times.findIndex(v => v.fullDay === f)
this.times.splice(index, 1)
},
onConfirm(date) {
this.selectDate = moment(date)
this.setWeekList(this.selectDate)
this.calendarVisible = false
},
//这里要排除掉休息日
setWeekList(startDate) {
const wk = []
wk.push(moment(startDate))
let count = 1
while (wk.length < 7) {
const addDate = moment(startDate).add(count, 'd')
//这里不是休息日才能加到数组里
if (addDate.day() !== 0 && addDate.day() !== 6 && !this.holidays.includes(moment(addDate).format('YYYY-MM-DD'))) {
wk.push(addDate)
}
count++
}
this.weekList = wk
},
dayClick(date) {
this.selectDate = date
this.getReserve()
},
reserve() {
if (this.times.length === 0) {
vant.Toast('请选择要预约的时段')
return
}
this.show = true
},
async reserveDo() {
// const resp = await $.post('/mobile/activity/site/info/reserveDo', {
// siteId: this.site_id,
// times: JSON.stringify(this.times),
// message: this.message,
// joinUser: this.joinUser,
// })
// if (resp.code === 0) {
// vant.Toast('预约成功')
// if (resp.code === 0) {
// this.show = false
// this.times = []
// this.message = null
// await this.getMyReservation()
// await this.getReserve()
// await this.onLoad()
// }
// } else {
// vant.Toast('预约失败')
// }
},
chooseTime(item) {
const cloneItem = clone(item)
const map = this.times.map(o => o.fullDay)
const index = map.indexOf(this.selectDate.format('YYYY-MM-DD') + ' ' + cloneItem.start_time + '-' + cloneItem.end_time)
if (index > -1) {
this.times.splice(index, 1)
} else {
cloneItem.day = this.selectDate.format('YYYY-MM-DD')
cloneItem.fullDay = cloneItem.day + ' ' + cloneItem.start_time + '-' + cloneItem.end_time
this.times.push(cloneItem)
}
},
isCanRe(item) {
const now = new Date()
const end = moment().format('YYYY-MM-DD') + ' ' + item.end_time + ':00'
const itemFullTime = this.selectDate.format('YYYY-MM-DD') + " " + item.start_time + "-" + item.end_time
if (this.alreadyReserveRecord.includes(itemFullTime)) {
return 3
}
if (now.getTime() >= new Date(end).getTime() && this.selectDate.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
return 0
} else {
if (this.site.multiple) {
return 1
} else {
return item.hasReserve === true ? 2 : 1
}
}
},
async onLoad() {
this.loading = true
$.post('/mobile/activity/site/info/getDetail', {id: this.site_id}).then(res => {
if (res.code === 0) {
this.site = res.data
}
this.loading = false
})
},
async getReserve() {
const resp = await $.post('/mobile/activity/site/info/getReserve', {
siteId: this.site_id,
day: moment(this.selectDate).format('YYYY-MM-DD'),
})
if (resp.code === 0) {
resp.data.forEach(item => {
item.isClick = true
})
this.timeData = resp.data
}
},
async getMyReservation() {
const resp = await $.post('/mobile/activity/site/info/getMyReservation', {
site_id: this.site_id
})
if (resp.code === 0) {
this.alreadyReserveRecord = resp.data.map(v => v.reserve_day + " " + v.start_time + "-" + v.end_time)
}
},
//获取最新的一个工作日设为当前时间
getLatestWorkDay() {
//1.首先判断今天是不是工作日
const weekNum = moment().day()
let selectDate = null
if (weekNum === 0) {
//周日
selectDate = moment().add(1, 'd')
} else if (weekNum === 6) {
//周六
selectDate = moment().add(2, 'd')
} else {
selectDate = moment()
}
return selectDate
}
},
async created() {
this.site_id = getQueryString('id')
this.selectDate = this.getLatestWorkDay()
this.setWeekList(this.selectDate)
await this.getReserve()
await this.onLoad()
await this.getMyReservation()
}
})
</script>
<!--#
}
#-->