224 lines
7.7 KiB
HTML
224 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Tlias智能学习辅助系统</title>
|
||
<style>
|
||
/* 导航栏样式 */
|
||
.navbar {
|
||
background-color: #b5b3b3; /* 灰色背景 */
|
||
|
||
display: flex; /* flex弹性布局 */
|
||
justify-content: space-between; /* 左右对齐 */
|
||
|
||
padding: 10px; /* 内边距 */
|
||
align-items: center; /* 垂直居中 */
|
||
}
|
||
.navbar h1 {
|
||
margin: 0; /* 移除默认的上下外边距 */
|
||
font-weight: bold; /* 加粗 */
|
||
color: white;
|
||
/* 设置字体为楷体 */
|
||
font-family: "楷体";
|
||
}
|
||
.navbar a {
|
||
color: white; /* 链接颜色为白色 */
|
||
text-decoration: none; /* 移除下划线 */
|
||
}
|
||
|
||
/* 搜索表单样式 */
|
||
.search-form {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
gap: 10px; /* 控件之间的间距 */
|
||
margin: 20px 0;
|
||
}
|
||
.search-form input[type="text"], .search-form select {
|
||
padding: 5px; /* 输入框内边距 */
|
||
width: 260px; /* 宽度 */
|
||
}
|
||
.search-form button {
|
||
padding: 5px 15px; /* 按钮内边距 */
|
||
}
|
||
|
||
/* 表格样式 */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
th, td {
|
||
border: 1px solid #ddd; /* 边框 */
|
||
padding: 8px; /* 单元格内边距 */
|
||
text-align: center; /* 左对齐 */
|
||
}
|
||
th {
|
||
background-color: #f2f2f2;
|
||
font-weight: bold;
|
||
}
|
||
.avatar {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
/* 页脚样式 */
|
||
.footer {
|
||
background-color: #b5b3b3; /* 灰色背景 */
|
||
color: white; /* 白色文字 */
|
||
text-align: center; /* 居中文本 */
|
||
padding: 10px 0; /* 上下内边距 */
|
||
margin-top: 30px;
|
||
}
|
||
|
||
#container {
|
||
width: 80%; /* 宽度为80% */
|
||
margin: 0 auto; /* 水平居中 */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<!-- 顶部导航栏 -->
|
||
<div class="navbar">
|
||
<h1>Tlias智能学习辅助系统</h1>
|
||
<a href="#">退出登录</a>
|
||
</div>
|
||
|
||
<!-- 搜索表单区域 -->
|
||
<form class="search-form">
|
||
<label for="name">姓名：</label>
|
||
<input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">
|
||
|
||
<label for="gender">性别：</label>
|
||
<select id="gender" name="gender" v-model="searchForm.gender">
|
||
<option value=""></option>
|
||
<option value="1">男</option>
|
||
<option value="2">女</option>
|
||
</select>
|
||
|
||
<label for="position">职位：</label>
|
||
<select id="position" name="position" v-model="searchForm.job">
|
||
<option value=""></option>
|
||
<option value="1">班主任</option>
|
||
<option value="2">讲师</option>
|
||
<option value="3">学工主管</option>
|
||
<option value="4">教研主管</option>
|
||
<option value="5">咨询师</option>
|
||
</select>
|
||
|
||
<button type="button" v-on:click="search">查询</button>
|
||
<button type="button" @click="clear">清空</button>
|
||
</form>
|
||
|
||
|
||
<!-- 表格展示区 -->
|
||
<table>
|
||
<!-- 表头 -->
|
||
<thead>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>姓名</th>
|
||
<th>性别</th>
|
||
<th>头像</th>
|
||
<th>职位</th>
|
||
<th>入职日期</th>
|
||
<th>最后操作时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<!-- 表格主体内容 -->
|
||
<tbody>
|
||
<tr v-for="(e, index) in empList" :key="e.id">
|
||
<td>{{index + 1}}</td>
|
||
<td>{{e.name}}</td>
|
||
<td>{{e.gender == 1?'男' : '女'}}</td>
|
||
|
||
<!-- 插值表达式是不能出现在标签内部 -->
|
||
<td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>
|
||
|
||
<!-- v-if: 控制元素的显示与隐藏 -->
|
||
<td>
|
||
<span v-if="e.job == 1">班主任</span>
|
||
<span v-else-if="e.job == 2">讲师</span>
|
||
<span v-else-if="e.job == 3">学工主管</span>
|
||
<span v-else-if="e.job == 4">教研主管</span>
|
||
<span v-else-if="e.job == 5">咨询师</span>
|
||
<span v-else>其他</span>
|
||
</td>
|
||
|
||
<!-- v-show: 控制元素的显示与隐藏 -->
|
||
<!-- <td>
|
||
<span v-show="e.job == 1">班主任</span>
|
||
<span v-show="e.job == 2">讲师</span>
|
||
<span v-show="e.job == 3">学工主管</span>
|
||
<span v-show="e.job == 4">教研主管</span>
|
||
<span v-show="e.job == 5">咨询师</span>
|
||
</td> -->
|
||
|
||
<td>{{e.entrydate}}</td>
|
||
<td>{{e.updatetime}}</td>
|
||
<td class="action-buttons">
|
||
<button type="button">编辑</button>
|
||
<button type="button">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- 页脚版权区域 -->
|
||
<footer class="footer">
|
||
<p>江苏传智播客教育科技股份有限公司</p>
|
||
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="js/axios.js"></script>
|
||
<script type="module">
|
||
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
|
||
|
||
createApp({
|
||
data() {
|
||
return {
|
||
searchForm: { //封装用户输入的查询条件
|
||
name: '',
|
||
gender: '',
|
||
job: ''
|
||
},
|
||
empList: []
|
||
}
|
||
},
|
||
//方法
|
||
methods: {
|
||
async search(){
|
||
// axios.get('https://web-server.itheima.net/emps/list?name='+this.searchForm.name+'&gender='+this.searchForm.gender+'&job='+this.searchForm.job).then((result) => {
|
||
// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {
|
||
// this.empList = result.data.data;
|
||
// }).catch((err) => {
|
||
// console.log(err);
|
||
// });
|
||
let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
|
||
this.empList = result.data.data;
|
||
|
||
},
|
||
clear(){
|
||
//清空表单项数据
|
||
this.searchForm = {name:'', gender:'', job:''}
|
||
this.search()
|
||
},
|
||
// 钩子函数
|
||
async mounted(){
|
||
//页面加载完成之后，发送ajax请求，获取数据
|
||
await this.search()
|
||
}
|
||
},
|
||
//钩子函数
|
||
mounted(){
|
||
//页面加载完成之后，发送ajax请求，获取数据
|
||
this.search()
|
||
}
|
||
}).mount('#container')
|
||
</script>
|
||
|
||
</body>
|
||
</html> |