Files
hzdyjs/docs/原型文件/学工/心理咨询/02-心理咨询预约管理.html
T
2025-07-24 10:18:35 +08:00

946 lines
37 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心理咨询预约管理 - 杭州第一技师学院</title>
<!-- Element Plus 图标字体 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f5f5f5;
color: #606266;
font-size: 14px;
line-height: 1.5;
}
.p-2 {
padding: 8px;
}
.page-container {
padding: 8px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-10px {
margin-bottom: 10px;
}
/* 卡片样式 */
.el-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 10px;
}
.el-card.hover {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-card-body {
padding: 20px;
}
.el-card-header {
padding: 18px 20px;
border-bottom: 1px solid #ebeef5;
background-color: #fafafa;
}
/* 表单样式 */
.el-form {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.el-form-item {
display: flex;
flex-direction: column;
margin-bottom: 18px;
min-width: 200px;
}
.el-form-item label {
font-size: 14px;
color: #606266;
line-height: 1.5;
padding: 0 12px 0 0;
box-sizing: border-box;
margin-bottom: 5px;
font-weight: 400;
}
.el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 100%;
}
.el-input input {
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
outline: none;
padding: 0 11px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
.el-input input:focus {
border-color: #409eff;
outline: none;
}
.el-select {
display: inline-block;
position: relative;
width: 100%;
}
.el-select select {
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
outline: none;
padding: 0 11px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
.el-select select:focus {
border-color: #409eff;
outline: none;
}
/* 按钮样式 */
.el-button {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 400;
padding: 8px 15px;
font-size: 14px;
border-radius: 6px;
text-decoration: none;
margin-right: 8px;
min-height: 32px;
}
.el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.el-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.el-button--primary.is-plain {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
.el-button--primary.is-plain:hover {
background: #409eff;
border-color: #409eff;
color: #fff;
}
/* 搜索和重置按钮样式 */
.el-button {
font-size: 14px;
padding: 8px 15px;
border-radius: 4px;
}
.el-button:disabled {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
.el-button i {
margin-right: 5px;
}
/* 表格样式 */
.el-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #fff;
font-size: 14px;
color: #606266;
margin-bottom: 0;
}
.el-table th,
.el-table td {
padding: 12px 0;
min-width: 0;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
border-bottom: 1px solid #ebeef5;
}
.el-table th {
background-color: #fafafa;
color: #909399;
font-weight: 500;
border-bottom: 1px solid #ebeef5;
}
.el-table tr:hover {
background-color: #f5f7fa;
}
.el-table--border {
border: 1px solid #ebeef5;
}
.el-table--border th,
.el-table--border td {
border-right: 1px solid #ebeef5;
padding-left: 10px;
padding-right: 10px;
}
.el-table-column--selection {
width: 55px;
text-align: center;
}
/* 状态标签 */
.el-tag {
background-color: #ecf5ff;
border: 1px solid #d9ecff;
color: #409eff;
display: inline-block;
height: 32px;
padding: 0 10px;
line-height: 30px;
font-size: 12px;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
}
.el-tag--success {
background-color: #f0f9ff;
border-color: #e1f3d8;
color: #67c23a;
}
.el-tag--warning {
background-color: #fdf6ec;
border-color: #faecd8;
color: #e6a23c;
}
.el-tag--danger {
background-color: #fef0f0;
border-color: #fde2e2;
color: #f56c6c;
}
.el-tag--info {
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
}
/* 分页样式 */
.pagination-container {
display: flex;
justify-content: flex-end;
padding: 16px 20px 0 0;
background-color: #fff;
margin-top: 0px;
}
.el-pagination {
white-space: nowrap;
padding: 2px 5px;
color: #303133;
font-weight: 700;
}
.el-pagination button {
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
vertical-align: top;
box-sizing: border-box;
background: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 4px;
text-align: center;
margin: 0 5px;
cursor: pointer;
color: #606266;
transition: all 0.3s;
}
.el-pagination button:hover {
color: #409eff;
}
/* 操作按钮 */
.el-button--text {
border-color: transparent;
color: #606266;
background: transparent;
padding: 4px 8px;
margin-right: 4px;
border-radius: 4px;
min-height: 28px;
width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.el-button--text:hover {
background-color: #f5f7fa;
border-color: transparent;
}
.el-button--text.el-button--primary {
color: #409eff;
}
.el-button--text.el-button--primary:hover {
color: #409eff;
background-color: #ecf5ff;
}
.el-button--text.el-button--danger {
color: #f56c6c;
}
.el-button--text.el-button--danger:hover {
color: #f56c6c;
background-color: #fef0f0;
}
.el-button--text.el-button--info {
color: #909399;
}
.el-button--text.el-button--info:hover {
color: #909399;
background-color: #f4f4f5;
}
/* 工具提示 */
.el-tooltip {
display: inline-block;
}
/* 行和列布局 */
.el-row {
display: flex;
flex-wrap: wrap;
}
.el-col {
flex: 0 0 auto;
}
.el-col-1-5 {
width: 12.5%;
}
.mb8 {
margin-bottom: 8px;
}
/* Element Plus 图标样式 */
.el-icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
fill: currentColor;
margin-right: 6px;
}
/* 操作按钮图标样式 */
.el-button--text .el-icon {
margin-right: 0;
font-size: 16px;
}
/* 图标样式 */
.icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
vertical-align: middle;
}
/* 模态框样式 */
.el-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
align-items: center;
justify-content: center;
}
.el-dialog__wrapper {
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
}
.el-dialog__header {
padding: 20px 20px 10px;
border-bottom: 1px solid #ebeef5;
}
.el-dialog__title {
line-height: 24px;
font-size: 18px;
color: #303133;
}
.el-dialog__body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
}
.el-dialog__footer {
padding: 10px 20px 20px;
text-align: right;
border-top: 1px solid #ebeef5;
}
.el-dialog__close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 16px;
color: #909399;
}
.el-dialog__close:hover {
color: #409eff;
}
/* 表单行样式 */
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-row .el-form-item {
flex: 1;
}
/* 表格单元格样式 */
.el-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 右侧工具栏 */
.right-toolbar {
float: right;
}
.toolbar-item {
display: inline-block;
margin-left: 10px;
cursor: pointer;
color: #606266;
font-size: 16px;
}
.toolbar-item:hover {
color: #409eff;
}
/* 表格卡片布局 */
.table-card {
margin-top: 0;
}
.table-card .el-card-body {
padding: 0px 20px 20px 20px !important;
}
/* 移除按钮栏底部边框 */
.el-card-header {
border-bottom: none !important;
}
/* 表格横向滚动容器 */
.table-container {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}
.table-container::-webkit-scrollbar {
height: 8px;
}
.table-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
</style>
</head>
<body>
<div class="p-2 page-container">
<!-- 搜索动画过渡 -->
<transition name="search-animate">
<!-- 搜索区域 -->
<div class="mb-10px">
<div class="el-card hover" style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);">
<div class="el-card-body">
<form class="el-form" label-width="100px">
<div class="el-form-item">
<label>学生姓名</label>
<div class="el-input">
<input type="text" placeholder="请输入学生姓名" />
</div>
</div>
<div class="el-form-item">
<label>学号</label>
<div class="el-input">
<input type="text" placeholder="请输入学号" />
</div>
</div>
<div class="el-form-item">
<label>专业</label>
<div class="el-input">
<input type="text" placeholder="请输入专业" />
</div>
</div>
<div class="el-form-item">
<label>班级</label>
<div class="el-input">
<input type="text" placeholder="请输入班级" />
</div>
</div>
<div class="el-form-item">
<label>咨询师</label>
<div class="el-select">
<select>
<option value="">请选择咨询师</option>
<option value="1">张心理老师</option>
<option value="2">李心理老师</option>
<option value="3">王心理老师</option>
</select>
</div>
</div>
<div class="el-form-item">
<label>预约状态</label>
<div class="el-select">
<select>
<option value="">请选择预约状态</option>
<option value="pending">待处理</option>
<option value="confirmed">已确认</option>
<option value="completed">已完成</option>
<option value="cancelled">已取消</option>
<option value="no_show">未到访</option>
</select>
</div>
</div>
<div class="el-form-item">
<label>预约日期</label>
<div class="el-input">
<input type="date" />
</div>
</div>
<div class="el-form-item">
<label></label>
<div>
<button type="button" class="el-button el-button--primary">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
搜索
</button>
<button type="button" class="el-button">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64H800a32 32 0 0 1 32 32v145.28a32 32 0 1 1-64 0v-46.848zM276.288 295.616A384 384 0 0 1 896 512h-64a320 320 0 0 0-555.712-216.448H369.28a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V182.272a32 32 0 1 1 64 0v113.344z"></path></svg>
重置
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</transition>
<!-- 表格区域 -->
<div class="el-card">
<div class="el-card-header">
<div class="el-row mb8">
<div class="el-col el-col-1-5">
<button class="el-button el-button--primary is-plain">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
新增
</button>
</div>
<div class="el-col el-col-1-5">
<button class="el-button" disabled>
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>
修改
</button>
</div>
<div class="el-col el-col-1-5">
<button class="el-button">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"></path></svg>
删除
</button>
</div>
<div class="el-col el-col-1-5">
<button class="el-button">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M336 176h352a48 48 0 0 1 48 48v224a48 48 0 0 1-48 48H336a48 48 0 0 1-48-48V224a48 48 0 0 1 48-48zm368 96a16 16 0 0 0-16-16H336a16 16 0 0 0-16 16v224a16 16 0 0 0 16 16h352a16 16 0 0 0 16-16V272z"></path><path d="M112 80h192v48a112 112 0 0 0 112 112h192a112 112 0 0 0 112-112V80h192a32 32 0 1 1 0 64H112a32 32 0 0 1 0-64zm0 144h192v176a144 144 0 0 0 144 144h128a144 144 0 0 0 144-144V224h192a32 32 0 1 1 0 64H112a32 32 0 0 1 0-64zm688 0v176a144 144 0 0 1-144 144H368a144 144 0 0 1-144-144V224h576z"></path></svg>
导出
</button>
</div>
<div class="right-toolbar">
<span class="toolbar-item" onclick="toggleSearch()">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
</span>
<span class="toolbar-item" onclick="refreshTable()">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64H800a32 32 0 0 1 32 32v145.28a32 32 0 1 1-64 0v-46.848zM276.288 295.616A384 384 0 0 1 896 512h-64a320 320 0 0 0-555.712-216.448H369.28a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V182.272a32 32 0 1 1 64 0v113.344z"></path></svg>
</span>
</div>
</div>
</div>
<div class="table-container">
<table class="el-table el-table--border" style="margin-bottom: 0; min-width: 1400px;">
<thead>
<tr>
<th class="el-table-column--selection">
<input type="checkbox" />
</th>
<th style="min-width: 80px;">学生姓名</th>
<th style="min-width: 100px;">学号</th>
<th style="min-width: 120px;">手机号</th>
<th style="min-width: 140px;">专业</th>
<th style="min-width: 80px;">班级</th>
<th style="min-width: 100px;">咨询师</th>
<th style="min-width: 100px;">预约日期</th>
<th style="min-width: 140px;">预约时段</th>
<th style="min-width: 80px;">预约状态</th>
<th style="min-width: 80px;">到访情况</th>
<th style="min-width: 140px;">申请时间</th>
<th style="min-width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="el-table-column--selection">
<input type="checkbox" />
</td>
<td>张三</td>
<td>2024001</td>
<td>13800138001</td>
<td>计算机应用技术</td>
<td>2024-1班</td>
<td>张心理老师</td>
<td>2025-01-10</td>
<td>上午 09:00-11:00</td>
<td><span class="el-tag el-tag--warning">待处理</span></td>
<td>-</td>
<td>2025-01-08 14:30</td>
<td>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--info" title="查看">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></svg>
</button>
</div>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--primary" title="处理">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>
</button>
</div>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--danger" title="取消">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"></path></svg>
</button>
</div>
</td>
</tr>
<tr>
<td class="el-table-column--selection">
<input type="checkbox" />
</td>
<td>李四</td>
<td>2024002</td>
<td>13800138002</td>
<td>电子商务</td>
<td>2024-2班</td>
<td>李心理老师</td>
<td>2025-01-11</td>
<td>下午 14:00-17:00</td>
<td><span class="el-tag el-tag--success">已确认</span></td>
<td>-</td>
<td>2025-01-07 16:20</td>
<td>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--info" title="查看">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></svg>
</button>
</div>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--primary" title="记录">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>
</button>
</div>
</td>
</tr>
<tr>
<td class="el-table-column--selection">
<input type="checkbox" />
</td>
<td>王五</td>
<td>2024003</td>
<td>13800138003</td>
<td>机械制造与自动化</td>
<td>2024-3班</td>
<td>王心理老师</td>
<td>2025-01-08</td>
<td>上午 09:00-11:00</td>
<td><span class="el-tag el-tag--success">已完成</span></td>
<td><span class="el-tag el-tag--success">已到访</span></td>
<td>2025-01-06 10:15</td>
<td>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--info" title="查看">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></svg>
</button>
</div>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--primary" title="编辑记录">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>
</button>
</div>
</td>
</tr>
<tr>
<td class="el-table-column--selection">
<input type="checkbox" />
</td>
<td>赵六</td>
<td>2024004</td>
<td>13800138004</td>
<td>汽车检测与维修</td>
<td>2024-1班</td>
<td>张心理老师</td>
<td>2025-01-07</td>
<td>下午 14:00-17:00</td>
<td><span class="el-tag el-tag--info">已完成</span></td>
<td><span class="el-tag el-tag--danger">未到访</span></td>
<td>2025-01-05 09:30</td>
<td>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--info" title="查看">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></svg>
</button>
</div>
<div class="el-tooltip">
<button class="el-button el-button--text el-button--primary" title="重新预约">
<svg class="el-icon" viewBox="0 0 1024 1024"><path d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64H800a32 32 0 0 1 32 32v145.28a32 32 0 1 1-64 0v-46.848zM276.288 295.616A384 384 0 0 1 896 512h-64a320 320 0 0 0-555.712-216.448H369.28a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V182.272a32 32 0 1 1 64 0v113.344z"></path></svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-container">
<div class="el-pagination">
<button>上一页</button>
<span style="margin: 0 10px; color: #606266;">第 1 页,共 5 页</span>
<button>下一页</button>
</div>
</div>
</div>
</div>
<!-- 处理预约模态框 -->
<div id="processModal" class="el-dialog">
<div class="el-dialog__wrapper">
<div class="el-dialog__header">
<h3 class="el-dialog__title">处理预约申请</h3>
<span class="el-dialog__close" onclick="closeProcessModal()">&times;</span>
</div>
<div class="el-dialog__body">
<div class="form-row">
<div class="el-form-item">
<label>学生姓名</label>
<div class="el-input">
<input type="text" value="张三" readonly />
</div>
</div>
<div class="el-form-item">
<label>预约时间</label>
<div class="el-input">
<input type="text" value="2025-01-10 09:00-11:00" readonly />
</div>
</div>
</div>
<div class="form-row">
<div class="el-form-item">
<label>处理结果</label>
<div class="el-select">
<select>
<option value="confirmed">确认预约</option>
<option value="rejected">拒绝预约</option>
</select>
</div>
</div>
<div class="el-form-item">
<label>咨询师</label>
<div class="el-select">
<select>
<option value="1">张心理老师</option>
<option value="2">李心理老师</option>
<option value="3">王心理老师</option>
</select>
</div>
</div>
</div>
<div class="el-form-item">
<label>备注</label>
<div class="el-input">
<textarea style="width: 100%; height: 80px; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; resize: vertical;" placeholder="请输入处理备注"></textarea>
</div>
</div>
</div>
<div class="el-dialog__footer">
<button class="el-button" onclick="closeProcessModal()">取消</button>
<button class="el-button el-button--primary" onclick="submitProcess()">确定</button>
</div>
</div>
</div>
<script>
// 切换搜索区域显示
function toggleSearch() {
const searchArea = document.querySelector('.mb-10');
searchArea.style.display = searchArea.style.display === 'none' ? 'block' : 'none';
}
// 刷新表格
function refreshTable() {
alert('刷新表格数据');
}
// 打开处理模态框
function openProcessModal() {
document.getElementById('processModal').style.display = 'flex';
}
// 关闭处理模态框
function closeProcessModal() {
document.getElementById('processModal').style.display = 'none';
}
// 提交处理结果
function submitProcess() {
alert('处理结果已提交');
closeProcessModal();
}
// 点击模态框外部关闭
window.onclick = function(event) {
const modal = document.getElementById('processModal');
if (event.target === modal) {
closeProcessModal();
}
}
</script>
</body>
</html>