123 lines
4.2 KiB
Vue
123 lines
4.2 KiB
Vue
<template>
|
||
<a-card class="markdown-body">
|
||
<h3>1. 预约列表</h3>
|
||
<p><img
|
||
src='./img/预约管理0.png'
|
||
alt='预约管理0' referrerPolicy='no-referrer'/></p>
|
||
<p>该页面显示所有的预约记录</p>
|
||
<ol start=''>
|
||
<li><p>筛选</p>
|
||
<ol start=''>
|
||
<li>按照日期筛选<img
|
||
src='./img/预约管理1.png'
|
||
alt='预约管理1' referrerPolicy='no-referrer'/></li>
|
||
<li>按照预约开始结束时间筛选<img
|
||
src='./img/预约管理2.png'
|
||
alt='预约管理2' referrerPolicy='no-referrer'/></li>
|
||
<li>按照房间筛选<img
|
||
src='./img/预约管理3.png'
|
||
alt='预约管理3' referrerPolicy='no-referrer'/></li>
|
||
<li>按照状态筛选<img
|
||
src='./img/预约管理4.png'
|
||
alt='预约管理4' referrerPolicy='no-referrer'/></li>
|
||
|
||
</ol>
|
||
</li>
|
||
<li><p>排序<img
|
||
src='./img/预约管理5.png'
|
||
alt='预约管理5' referrerPolicy='no-referrer'/></p>
|
||
</li>
|
||
<li><p>按照预约ID、用户名、房间名、日期模糊搜索。</p>
|
||
</li>
|
||
<li><p>点击<code>重置</code>将所有筛选、排序、搜索条件清空。</p>
|
||
</li>
|
||
<li><p>点击<code>新建预约</code>，跳转到新建预约界面。</p>
|
||
</li>
|
||
<li><p>点击列表中<code>编辑</code>，跳转到该条预约的详情页面。</p>
|
||
</li>
|
||
|
||
</ol>
|
||
<h3>2. 预约详情</h3>
|
||
<p><img
|
||
src='./img/预约管理6.png'
|
||
alt='预约管理6' referrerPolicy='no-referrer'/></p>
|
||
<p><img
|
||
src='./img/预约管理7.png'
|
||
alt='预约管理7' referrerPolicy='no-referrer'/></p>
|
||
<ol start=''>
|
||
<li><p>预约信息</p>
|
||
<p>显示该条预约的详细信息。</p>
|
||
<blockquote><p>预约状态</p>
|
||
<ol start=''>
|
||
<li>正在申请</li>
|
||
|
||
</ol>
|
||
<p>预约申请已经提交到系统，但是系统还未确定是否有效。</p>
|
||
<ol start='2'>
|
||
<li>申请成功</li>
|
||
|
||
</ol>
|
||
<p>预约申请有效。</p>
|
||
<ol start='3'>
|
||
<li>申请失败</li>
|
||
|
||
</ol>
|
||
<p>预约申请与其他申请在时间上冲突，系统判定无效。（有消息队列确保申请顺序，<a href=''>FIFO</a>）</p>
|
||
<ol start='4'>
|
||
<li>被取消</li>
|
||
|
||
</ol>
|
||
<p>该预约申请被人为取消。</p>
|
||
</blockquote>
|
||
</li>
|
||
<li><p>取消预约</p>
|
||
</li>
|
||
|
||
</ol>
|
||
<p>填写取消原因，点击<code>取消预约</code>即可。</p>
|
||
<p><code>取消人</code>是当前登录用户。</p>
|
||
<p>该过程不可逆！！！</p>
|
||
<p><img
|
||
src='./img/预约管理8.png'
|
||
alt='预约管理8' referrerPolicy='no-referrer'/></p>
|
||
<h3>3. 新建预约</h3>
|
||
<p><img
|
||
src='./img/预约管理9.png'
|
||
alt='预约管理9' referrerPolicy='no-referrer'/></p>
|
||
<p>该界面主要用于教师选择多个座位给自己的学生。该座位可以由教师或者其学生签到签离。</p>
|
||
<ol start=''>
|
||
<li><p>房间</p>
|
||
<p>选择指定的房间。</p>
|
||
</li>
|
||
<li><p>日期</p>
|
||
<p>选择预约日期。受到设置中<code>提前预约时间</code>的限制。</p>
|
||
</li>
|
||
<li><p>开始时间</p>
|
||
<p>选择开始时间。受到设置中<code>开始时间</code>的限制。</p>
|
||
</li>
|
||
<li><p>结束时间</p>
|
||
<p>选择结束时间。受到设置中<code>结束时间</code>的限制。</p>
|
||
</li>
|
||
<li><p>座位</p>
|
||
<p>选择房间、日期、开始时间、结束时间后，会自动显示对应的座位状态。</p>
|
||
<p>白色方框是可选座位；红色方框是改时间端这个座位有占用的情况，所以不可选；蓝色方框是已选则的座位。</p>
|
||
<p>可以多选。</p>
|
||
</li>
|
||
<li><p>预约人</p>
|
||
<p>可以通过搜索关键字选择用户，但用户角色只能是教师。<img
|
||
src='./img/预约管理10.png'
|
||
alt='预约管理10' referrerPolicy='no-referrer'/></p>
|
||
</li>
|
||
</ol>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Booking'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import "css/markdown.css";
|
||
</style> |