parent
94ab5b1396
commit
9d7d0451f1
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 124 KiB |
@ -0,0 +1,251 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<!-- 设置点名时间卡片 -->
|
||||||
|
<el-card class="time-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<el-icon><Timer /></el-icon>
|
||||||
|
<span>设置点名时间</span>
|
||||||
|
</div>
|
||||||
|
<div class="time-picker">
|
||||||
|
<el-time-select
|
||||||
|
v-model="selectedTime"
|
||||||
|
start="18:00"
|
||||||
|
step="00:15"
|
||||||
|
end="23:00"
|
||||||
|
placeholder="选择点名时间"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="saveTime">保存设置</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 学生名单表格卡片 -->
|
||||||
|
<el-card class="table-card">
|
||||||
|
<div class="search-area">
|
||||||
|
<el-input
|
||||||
|
v-model="searchText"
|
||||||
|
placeholder="搜索姓名或宿舍号"
|
||||||
|
prefix-icon="Search"
|
||||||
|
clearable
|
||||||
|
@input="handleSearch"
|
||||||
|
style="width: 300px"
|
||||||
|
/>
|
||||||
|
<el-switch
|
||||||
|
v-model="showUnmarkedFirst"
|
||||||
|
active-text="未点名优先显示"
|
||||||
|
@change="handleSortChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="filteredTableData"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="headerStyle"
|
||||||
|
stripe
|
||||||
|
>
|
||||||
|
<el-table-column prop="name" label="学生姓名" width="180" />
|
||||||
|
<el-table-column prop="dormitory" label="宿舍号" width="180" />
|
||||||
|
<el-table-column prop="isPresent" label="是否参加晚点">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="scope.row.isPresent ? 'success' : 'danger'">
|
||||||
|
{{ scope.row.isPresent ? '已参加' : '未参加' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "callInfo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedTime: '',
|
||||||
|
searchText: '',
|
||||||
|
showUnmarkedFirst: false,
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
dormitory: '101',
|
||||||
|
isPresent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
dormitory: '102',
|
||||||
|
isPresent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '王五',
|
||||||
|
dormitory: '103',
|
||||||
|
isPresent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '赵六',
|
||||||
|
dormitory: '104',
|
||||||
|
isPresent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '孙七',
|
||||||
|
dormitory: '105',
|
||||||
|
isPresent: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
filteredTableData: [
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
dormitory: '101',
|
||||||
|
isPresent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
dormitory: '102',
|
||||||
|
isPresent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '王五',
|
||||||
|
dormitory: '103',
|
||||||
|
isPresent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '赵六',
|
||||||
|
dormitory: '104',
|
||||||
|
isPresent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '孙七',
|
||||||
|
dormitory: '105',
|
||||||
|
isPresent: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getStudentList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 保存点名时间
|
||||||
|
saveTime() {
|
||||||
|
if (!this.selectedTime) {
|
||||||
|
this.$message.warning('请选择点名时间');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
request.post('/api/setCallTime', {
|
||||||
|
callTime: this.selectedTime
|
||||||
|
}).then(res => {
|
||||||
|
this.$message.success('设置成功');
|
||||||
|
}).catch(err => {
|
||||||
|
this.$message.error('设置失败');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取学生列表
|
||||||
|
getStudentList() {
|
||||||
|
request.get('/api/studentList').then(res => {
|
||||||
|
this.tableData = res.data;
|
||||||
|
this.handleSearch();
|
||||||
|
}).catch(err => {
|
||||||
|
this.$message.error('获取数据失败');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 搜索功能
|
||||||
|
handleSearch() {
|
||||||
|
if (!this.searchText) {
|
||||||
|
this.filteredTableData = [...this.tableData];
|
||||||
|
} else {
|
||||||
|
this.filteredTableData = this.tableData.filter(item => {
|
||||||
|
return item.name.includes(this.searchText) ||
|
||||||
|
item.dormitory.includes(this.searchText);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (this.showUnmarkedFirst) {
|
||||||
|
this.handleSortChange();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 未点名优先排序
|
||||||
|
handleSortChange() {
|
||||||
|
if (this.showUnmarkedFirst) {
|
||||||
|
this.filteredTableData.sort((a, b) => {
|
||||||
|
return a.isPresent - b.isPresent;
|
||||||
|
});
|
||||||
|
}else {
|
||||||
|
this.filteredTableData = [...this.tableData];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 表头样式
|
||||||
|
headerStyle() {
|
||||||
|
return {
|
||||||
|
background: '#f0f6ff',
|
||||||
|
color: '#1e3a8a',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.main-container {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1e3a8a;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header .el-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-picker {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card) {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-button--primary) {
|
||||||
|
background-color: #1e3a8a;
|
||||||
|
border-color: #1e3a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-button--primary:hover) {
|
||||||
|
background-color: #2563eb;
|
||||||
|
border-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tag) {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
发布水电费
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "feeInfo",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.getPrice();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue