|
|
|
@ -61,25 +61,81 @@ |
|
|
|
<el-card class="reservation-card"> |
|
|
|
<div slot="header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> |
|
|
|
<span>临时闭馆设置</span> |
|
|
|
<el-button size="mini" @click="closedDialogVisible = true"> |
|
|
|
<div> |
|
|
|
<el-button size="mini" @click="handleAdd"> |
|
|
|
<i class="iconfont icon-xinzeng" /> |
|
|
|
新增 |
|
|
|
</el-button> |
|
|
|
<el-button size="mini" :disabled="!selectedRow" @click="handleEdit"> |
|
|
|
<i class="iconfont icon-bianji" /> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 查询条件区域 --> |
|
|
|
<div style="padding:12px 20px;display:flex;gap:12px;align-items:center"> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchDateRange" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
style="width:260px" |
|
|
|
/> |
|
|
|
<el-input |
|
|
|
v-model="query" |
|
|
|
placeholder="输入关键字搜索" |
|
|
|
clearable |
|
|
|
style="width:240px" |
|
|
|
@clear="resetSearch" |
|
|
|
@keyup.enter.native="handleSearch" |
|
|
|
/> |
|
|
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
|
|
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetSearch">重置</el-button> |
|
|
|
</div> |
|
|
|
<div style="padding: 20px;"> |
|
|
|
<el-table ref="table" v-loading="closedLoading" highlight-current-row style="width: 100%;" height="calc(100vh - 234px)" :data="closedTableData"> |
|
|
|
<el-table-column prop="closeTime" label="闭馆日期" width="160px"> |
|
|
|
<div style="padding: 0 20px 10px;"> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="closedLoading" |
|
|
|
highlight-current-row |
|
|
|
style="width: 100%;" |
|
|
|
height="calc(100vh - 360px)" |
|
|
|
:data="closedTableData" |
|
|
|
@selection-change="selectionChangeHandler" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
@row-dblclick="handleDbClick" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" /> |
|
|
|
<el-table-column prop="closureStartDate" label="闭馆开始时间" width="160px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.closureStartDate | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="closureEndDate" label="闭馆结束时间" width="160px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.closeTime | parseTime }}</div> |
|
|
|
<div>{{ scope.row.closureEndDate | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="phone" label="闭馆公告" /> |
|
|
|
<el-table-column prop="title" label="闭馆标题" width="200" show-overflow-tooltip /> |
|
|
|
<el-table-column prop="content" label="闭馆公告" show-overflow-tooltip /> |
|
|
|
</el-table> |
|
|
|
<!-- 分页组件 --> |
|
|
|
<el-pagination |
|
|
|
:page-size.sync="pageSize" |
|
|
|
:total="total" |
|
|
|
:current-page.sync="page" |
|
|
|
style="margin-top: 8px;" |
|
|
|
:page-sizes="[10, 20, 30, 40]" |
|
|
|
layout="total, sizes, prev, pager, next" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
title="新增临时闭馆" |
|
|
|
:title="dialogTitle" |
|
|
|
class="closed-dialog" |
|
|
|
:visible.sync="closedDialogVisible" |
|
|
|
width="600px" |
|
|
|
@ -91,25 +147,36 @@ |
|
|
|
<el-form-item label="闭馆日期" prop="closeTime"> |
|
|
|
<el-date-picker |
|
|
|
v-model="closedForm.closeTime" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="datetimerange" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
:default-time="['00:00:00', '23:59:59']" |
|
|
|
:disabled="dialogMode === 'view'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="闭馆标题" prop="title"> |
|
|
|
<el-input |
|
|
|
v-model="closedForm.title" |
|
|
|
type="text" |
|
|
|
placeholder="请输入闭馆标题" |
|
|
|
style="width: 480px;" |
|
|
|
:disabled="dialogMode === 'view'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="闭馆公告" prop="reason"> |
|
|
|
<el-form-item label="闭馆公告" prop="content"> |
|
|
|
<el-input |
|
|
|
v-model="closedForm.reason" |
|
|
|
v-model="closedForm.content" |
|
|
|
type="textarea" |
|
|
|
:rows="5" |
|
|
|
placeholder="请输入闭馆公告" |
|
|
|
style="width: 480px;" |
|
|
|
:disabled="dialogMode === 'view'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px;"> |
|
|
|
<el-button @click="beforeClose">取消</el-button> |
|
|
|
<el-button type="primary" @click="confirmAdd">确认</el-button> |
|
|
|
<el-button v-if="dialogMode !== 'view'" type="primary" @click="confirmAdd">确认</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
@ -117,8 +184,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchInitLibraryReservationSettings, FetchSaveLibraryReservationSettings } from '@/api/weixin' |
|
|
|
import { FetchInitLibraryReservationSettings, FetchSaveLibraryReservationSettings, FetchEditClosureNotice, FetchInitClosureNotice } from '@/api/weixin' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { parseTime } from '@/utils/index' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Reservation', |
|
|
|
@ -140,14 +208,27 @@ export default { |
|
|
|
closedTableData: [], |
|
|
|
closedLoading: false, |
|
|
|
closedDialogVisible: false, |
|
|
|
dialogMode: 'add', // add / edit / view |
|
|
|
dialogTitle: '新增临时闭馆', |
|
|
|
selectedRow: null, // 当前选中行 |
|
|
|
closedForm: { |
|
|
|
id: null, |
|
|
|
closeTime: '', |
|
|
|
reason: '' |
|
|
|
content: '', |
|
|
|
title: '' |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
closeTime: [{ required: true, message: '请选择闭馆日期', trigger: 'blur' }], |
|
|
|
reason: [{ required: true, message: '请输入闭馆公告', trigger: 'blur' }] |
|
|
|
} |
|
|
|
closeTime: [{ required: true, message: '请选择闭馆日期', trigger: 'change' }], |
|
|
|
title: [{ required: true, message: '请输入闭馆标题', trigger: 'blur' }], |
|
|
|
content: [{ required: true, message: '请输入闭馆公告内容', trigger: 'blur' }] |
|
|
|
}, |
|
|
|
page: 1, |
|
|
|
pageSize: 10, |
|
|
|
total: 0, |
|
|
|
searchDateRange: [], // [start,end] |
|
|
|
startTime: '', |
|
|
|
endTime: '', |
|
|
|
query: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -158,9 +239,10 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initReservationSettings() |
|
|
|
this.initClosureNotice() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 【新增】页面展示格式化：内部存 HH:mm:ss，页面显示 HH:mm |
|
|
|
// 页面展示格式化：内部存 HH:mm:ss，页面显示 HH:mm |
|
|
|
formatTimeDisplay(timeStr) { |
|
|
|
if (timeStr === '全天') return '全天' |
|
|
|
// "08:30:00 - 12:00:00" → "08:30 - 12:00" |
|
|
|
@ -327,11 +409,152 @@ export default { |
|
|
|
this.$message.info(`${day.name}已勾选，未设置时段保存将默认为全天`) |
|
|
|
} |
|
|
|
}, |
|
|
|
confirmAdd() { |
|
|
|
this.$refs.closedForm.validate((valid) => { |
|
|
|
|
|
|
|
// 临时闭馆列表 |
|
|
|
async initClosureNotice() { |
|
|
|
this.closedLoading = true |
|
|
|
const params = { |
|
|
|
page: this.page - 1, |
|
|
|
pageSize: this.pageSize, |
|
|
|
startTime: this.startTime, |
|
|
|
endTime: this.endTime, |
|
|
|
query: this.query |
|
|
|
} |
|
|
|
try { |
|
|
|
const res = await FetchInitClosureNotice(params) |
|
|
|
console.log('FetchInitClosureNotice', res) |
|
|
|
if (res.content) { |
|
|
|
this.closedTableData = res.content |
|
|
|
this.total = res.totalElements |
|
|
|
} else { |
|
|
|
this.closedTableData = res || [] |
|
|
|
this.total = res.length || 0 |
|
|
|
} |
|
|
|
// 清空表格选中 |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
this.selectedRow = null |
|
|
|
} catch (e) { |
|
|
|
console.error(e) |
|
|
|
} finally { |
|
|
|
this.closedLoading = false |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 查询按钮 |
|
|
|
handleSearch() { |
|
|
|
if (this.searchDateRange?.length === 2) { |
|
|
|
this.startTime = this.searchDateRange[0] + ' 00:00:00' |
|
|
|
this.endTime = this.searchDateRange[1] + ' 23:59:59' |
|
|
|
} else { |
|
|
|
this.startTime = '' |
|
|
|
this.endTime = '' |
|
|
|
} |
|
|
|
this.page = 1 |
|
|
|
this.initClosureNotice() |
|
|
|
}, |
|
|
|
// 重置查询 |
|
|
|
resetSearch() { |
|
|
|
this.searchDateRange = [] |
|
|
|
this.startTime = '' |
|
|
|
this.endTime = '' |
|
|
|
this.query = '' |
|
|
|
this.page = 1 |
|
|
|
this.initClosureNotice() |
|
|
|
}, |
|
|
|
// 每页条数改变 |
|
|
|
handleSizeChange(val) { |
|
|
|
this.pageSize = val |
|
|
|
this.page = 1 |
|
|
|
this.initClosureNotice() |
|
|
|
}, |
|
|
|
// 页码改变 |
|
|
|
handleCurrentChange(val) { |
|
|
|
this.page = val |
|
|
|
this.initClosureNotice() |
|
|
|
}, |
|
|
|
|
|
|
|
// ========表格事件======== |
|
|
|
selectionChangeHandler(rows) { |
|
|
|
if (rows.length === 1) { |
|
|
|
this.selectedRow = rows[0] |
|
|
|
} else { |
|
|
|
this.selectedRow = null |
|
|
|
} |
|
|
|
}, |
|
|
|
clickRowHandler(row) { |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row, true) |
|
|
|
}, |
|
|
|
handleDbClick(row) { |
|
|
|
// 双击查看详情 |
|
|
|
this.openDialog('view', row) |
|
|
|
}, |
|
|
|
|
|
|
|
// ========弹窗操作======== |
|
|
|
handleAdd() { |
|
|
|
this.openDialog('add') |
|
|
|
}, |
|
|
|
handleEdit() { |
|
|
|
if (!this.selectedRow) { |
|
|
|
this.$message.warning('请先选择一条记录') |
|
|
|
return |
|
|
|
} |
|
|
|
this.openDialog('edit', this.selectedRow) |
|
|
|
}, |
|
|
|
|
|
|
|
openDialog(mode, row = null) { |
|
|
|
this.dialogMode = mode |
|
|
|
if (mode === 'add') { |
|
|
|
this.dialogTitle = '新增临时闭馆' |
|
|
|
this.closedForm.id = null |
|
|
|
this.closedForm.closeTime = '' |
|
|
|
this.closedForm.title = '' |
|
|
|
this.closedForm.content = '' |
|
|
|
} else { |
|
|
|
if (mode === 'edit') { |
|
|
|
this.dialogTitle = '编辑临时闭馆' |
|
|
|
} else if (mode === 'view') { |
|
|
|
this.dialogTitle = '查看临时闭馆' |
|
|
|
} |
|
|
|
// 回显数据 |
|
|
|
this.closedForm.id = row.id |
|
|
|
// 后端返回时间字符串直接赋值给datetimerange |
|
|
|
this.closedForm.closeTime = [row.closureStartDate, row.closureEndDate] |
|
|
|
this.closedForm.title = row.title |
|
|
|
this.closedForm.content = row.content |
|
|
|
} |
|
|
|
this.closedDialogVisible = true |
|
|
|
}, |
|
|
|
|
|
|
|
// 新增/编辑闭馆 |
|
|
|
async confirmAdd() { |
|
|
|
this.$refs.closedForm.validate(async(valid) => { |
|
|
|
if (valid) { |
|
|
|
console.log(this.closedForm) |
|
|
|
const [startDt, endDt] = this.closedForm.closeTime |
|
|
|
const params = { |
|
|
|
libcode: this.user.fonds.fondsNo, |
|
|
|
id: this.closedForm.id, // 编辑有id，新增null |
|
|
|
closureStartDate: parseTime(startDt), |
|
|
|
closureEndDate: parseTime(endDt), |
|
|
|
title: this.closedForm.title, |
|
|
|
content: this.closedForm.content |
|
|
|
} |
|
|
|
console.log('FetchEditClosureNotice', params) |
|
|
|
try { |
|
|
|
const res = await FetchEditClosureNotice(params) |
|
|
|
console.log('FetchEditClosureNotice res', res) |
|
|
|
if (res) { |
|
|
|
this.$message.success('保存成功') |
|
|
|
this.closedDialogVisible = false |
|
|
|
this.initClosureNotice() |
|
|
|
} else { |
|
|
|
this.$message.error(res.msg || '保存失败') |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
console.error(err) |
|
|
|
this.$message.error('保存异常，请重试') |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.log('校验失败') |
|
|
|
} |
|
|
|
|
