946 lines
37 KiB
HTML
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()">×</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> |