This commit is contained in:
=
2026-07-03 17:25:27 +08:00
parent 6380842b34
commit 34627245ac
9 changed files with 503 additions and 25 deletions
@@ -138,6 +138,33 @@
</el-col>
</el-row>
<el-row :gutter="20" type="flex">
<el-col :span="8">
<el-form-item prop="unionYearReserveLimit" label="分工会每年预约次数">
<el-input-number
v-model="formData.unionYearReserveLimit"
:min="1"
:step="1"
:precision="0"
controls-position="right"
style="width: 160px">
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="clubWeekReserveLimit" label="社团每周预约次数">
<el-input-number
v-model="formData.clubWeekReserveLimit"
:min="1"
:step="1"
:precision="0"
controls-position="right"
style="width: 160px">
</el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">场次信息</el-divider>
<div v-if="formData.reserveTimeType === 1">
@@ -339,6 +366,8 @@
state: true,
sexLimit: 0,
termDateRange: [],
unionYearReserveLimit: 2,
clubWeekReserveLimit: 2,
filterHolidays: false,
reserveTimeType: 1,
openHours: [{ startTime: '', endTime: '', timeUnit: 30 }],
@@ -358,6 +387,8 @@
maxNum: [{required: true, message: '必填', trigger: ['blur', 'change']}],
typeId: [{required: true, message: '必填', trigger: ['blur', 'change']}],
sexLimit: [{required: true, message: '必填', trigger: ['blur', 'change']}],
unionYearReserveLimit: [{required: true, type: 'number', min: 1, message: '必填且必须大于0', trigger: ['blur', 'change']}],
clubWeekReserveLimit: [{required: true, type: 'number', min: 1, message: '必填且必须大于0', trigger: ['blur', 'change']}],
filterHolidays: [{required: true, message: '必填', trigger: ['blur', 'change']}],
state: [{required: true, message: '必填', trigger: ['blur', 'change']}],
reserveTimeType: [{required: true, message: '必填', trigger: ['blur', 'change']}],
@@ -687,6 +718,8 @@
state: true,
sexLimit: 0,
termDateRange: [],
unionYearReserveLimit: 2,
clubWeekReserveLimit: 2,
filterHolidays: false,
reserveTimeType: 1,
openHours: [{ startTime: '', endTime: '', timeUnit: 30 }],
@@ -9,9 +9,7 @@ layout("/layouts/platform.html"){
}
.record-batch-empty {
display: inline-block;
width: 16px;
height: 16px;
display: none;
}
.record-batch-child-row {
@@ -31,6 +29,13 @@ layout("/layouts/platform.html"){
height: 1px;
background: #c8d3df;
}
.record-site-name-cell {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
}
</style>
<div id="app" v-cloak>
@@ -113,25 +118,16 @@ layout("/layouts/platform.html"){
<el-card shadow="never">
<table-tool label="申请列表">
<el-button v-if="$auth.hasRole('SYSADMIN')" type="primary" size="small" @click="openBatchOccupyDialog">占用</el-button>
<el-button type="primary" size="small" @click="doExport">导出表格</el-button>
</table-tool>
<el-table
:data="tableData"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
@sort-change="pageOrder"
style="width: 100%">
<el-table-column label="" width="54" align="center" header-align="center">
<template v-slot="{ row }">
<el-button
v-if="row._hasFoldChildren"
class="record-batch-toggle"
type="text"
@click="toggleBatchGroup(row)">
<i :class="row._expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
</el-button>
<span v-else class="record-batch-empty"></span>
</template>
</el-table-column>
<el-table-column v-if="$auth.hasRole('SYSADMIN')" type="selection" width="48" :selectable="canSelectOccupy"></el-table-column>
<el-table-column type="index" width="50" label="序号" :index="indexMethod"></el-table-column>
<el-table-column
v-for="column in tableColumns"
@@ -144,8 +140,18 @@ layout("/layouts/platform.html"){
header-align="center"
show-overflow-tooltip>
<template v-slot="{ row }" v-if="column.prop === 'siteName'">
<span v-if="row._isBatchChild" class="record-batch-child-label">{{ row.siteName }}</span>
<span v-else>{{ row.siteName }}</span>
<span class="record-site-name-cell">
<el-button
v-if="row._hasFoldChildren"
class="record-batch-toggle"
type="text"
@click="toggleBatchGroup(row)">
<i :class="row._expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
</el-button>
<span v-else class="record-batch-empty"></span>
<span v-if="row._isBatchChild" class="record-batch-child-label">{{ row.siteName }}</span>
<span v-else>{{ row.siteName }}</span>
</span>
</template>
<template v-slot="{ row }" v-else-if="column.prop === 'reserveTargetName'">
<span>{{ row.reserveType === 'club' ? (row.clubName || '-') : (row.applyUnionName || '-') }}</span>
@@ -154,7 +160,7 @@ layout("/layouts/platform.html"){
<span>{{ normalizeBatchFlag(row) ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="180">
<el-table-column label="操作" fixed="right" width="150">
<template v-slot="{ row }">
<el-button @click="onView(row)" size="mini" type="primary">查看</el-button>
<el-button @click="onDelete(row.id)" size="mini" type="danger">删除</el-button>
@@ -163,6 +169,32 @@ layout("/layouts/platform.html"){
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</el-card>
<el-dialog title="占用预约" :visible.sync="occupyDialogVisible" width="520px" append-to-body :close-on-click-modal="false">
<el-form label-width="90px">
<el-form-item label="预约信息">
<div v-if="occupyForm.batch">已选择 {{ occupyForm.count }} 条预约</div>
<template v-else>
<div>{{ occupyForm.siteName || '-' }}</div>
<div>{{ occupyForm.applyUserName || '-' }}{{ occupyForm.reserveStartTime }} 至 {{ occupyForm.reserveEndTime }}</div>
</template>
</el-form-item>
<el-form-item label="通知内容" required>
<el-input
type="textarea"
:rows="6"
maxlength="1000"
show-word-limit
v-model="occupyForm.message"
placeholder="请输入发送给预约人的通知内容">
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeOccupyDialog">取消</el-button>
<el-button type="primary" :loading="occupySubmitting" @click="submitOccupy">确定占用</el-button>
</span>
</el-dialog>
</template>
<template #edit>
@@ -195,6 +227,20 @@ layout("/layouts/platform.html"){
siteOptions: [],
rawTableData: [],
expandedBatchKeys: {},
selectedOccupyRows: [],
occupyDialogVisible: false,
occupySubmitting: false,
occupyForm: {
id: '',
ids: '',
batch: false,
count: 0,
siteName: '',
applyUserName: '',
reserveStartTime: '',
reserveEndTime: '',
message: '',
},
tableColumns: [
{ prop: 'siteName', label: '场地名称', sortable: 'custom' },
{ prop: 'applyUserName', label: '预约人', sortable: 'custom' },
@@ -267,6 +313,99 @@ layout("/layouts/platform.html"){
this.$refs.infoRef.onOpen(row)
})
},
canSelectOccupy(row) {
return this.canOccupy(row)
},
handleSelectionChange(rows) {
this.$set(this, 'selectedOccupyRows', rows || [])
},
canOccupy(row) {
if (!row || !row.reserveStartTime) {
return false
}
const currentUserId = (this.$store.state.user && this.$store.state.user.id) || ''
if (row.occupyUserId && row.occupyUserId !== currentUserId) {
return false
}
return Number(row.instanceState) === 20 && this.$moment(row.reserveStartTime).isAfter(this.$moment())
},
buildOccupyMessage(row) {
return '您预约的' + (row.siteName || '场地') + '' + row.reserveStartTime + ' 至 ' + row.reserveEndTime + ')因场地安排需要被占用,请您知悉并重新协调预约时间。'
},
openOccupyDialog(row) {
const occupyForm = {
id: row.id || '',
ids: row.id || '',
batch: false,
count: 1,
siteName: row.siteName || '',
applyUserName: row.applyUserName || '',
reserveStartTime: row.reserveStartTime || '',
reserveEndTime: row.reserveEndTime || '',
message: row.occupyMessage || this.buildOccupyMessage(row),
}
Object.keys(occupyForm).forEach(key => {
this.$set(this.occupyForm, key, occupyForm[key])
})
this.$set(this, 'occupyDialogVisible', true)
},
openBatchOccupyDialog() {
if (!this.selectedOccupyRows || this.selectedOccupyRows.length === 0) {
this.$message.warning('请选择需要占用的预约')
return
}
const ids = this.selectedOccupyRows.map(row => row.id).filter(id => !!id)
if (ids.length === 0) {
this.$message.warning('请选择需要占用的预约')
return
}
const occupyForm = {
id: '',
ids: ids.join(','),
batch: true,
count: ids.length,
siteName: '',
applyUserName: '',
reserveStartTime: '',
reserveEndTime: '',
message: '您预约的场地因场地安排需要被占用,请您知悉并重新协调预约时间。',
}
Object.keys(occupyForm).forEach(key => {
this.$set(this.occupyForm, key, occupyForm[key])
})
this.$set(this, 'occupyDialogVisible', true)
},
closeOccupyDialog() {
this.$set(this, 'occupyDialogVisible', false)
},
async submitOccupy() {
if (!this.occupyForm.message || !this.occupyForm.message.trim()) {
this.$message.warning('请填写通知内容')
return
}
this.$set(this, 'occupySubmitting', true)
try {
const url = this.occupyForm.batch ? '/platform/siteCug/record/occupyBatch' : '/platform/siteCug/record/occupy'
const params = {
message: this.occupyForm.message,
}
if (this.occupyForm.batch) {
this.$set(params, 'ids', this.occupyForm.ids)
} else {
this.$set(params, 'id', this.occupyForm.id)
}
const res = await this.$axios.post(url, params)
if (res.code === 0) {
this.$message.success(res.msg || '占用成功')
this.closeOccupyDialog()
window.location.href = '/platform/siteCug/apply'
} else {
this.$message.warning(res.msg || '占用失败')
}
} finally {
this.$set(this, 'occupySubmitting', false)
}
},
onDelete(id) {
this.$confirm('您确定要删除吗?', '提示', {
confirmButtonText: '确定',
@@ -299,6 +438,7 @@ layout("/layouts/platform.html"){
if (res.code === 0) {
this.rawTableData = Array.isArray(res.data.list) ? res.data.list : []
this.tableData = this.buildTableData(this.rawTableData)
this.$set(this, 'selectedOccupyRows', [])
this.pageForm.totalCount = res.data.totalCount
}
})