完善了router表，前端缺席表格单页化
This commit is contained in:
parent
ba3d2ae9c9
commit
19cb07d9dd
|
|
@ -423,6 +423,7 @@
|
|||
"version": "2.9.1",
|
||||
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.1.tgz",
|
||||
"integrity": "sha512-9Agqf/jt4Ugk7EZ6C5LME71sgkvauPCsnvJN12Xid2XVobjufxMGpRE4L7pS4luJMOmFAH3J0NgYEGZT5r+NDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -64,7 +64,12 @@ const routes = [
|
|||
path: '/studentUpdate',
|
||||
name: '修改学生',
|
||||
component: StudentUpdate
|
||||
}/* ,
|
||||
},
|
||||
{
|
||||
path: '/absentRecord',
|
||||
name: '缺寝记录',
|
||||
component: AbsentRecord
|
||||
}/* ,
|
||||
{
|
||||
path: '/buildingAdd',
|
||||
name: '添加楼宇',
|
||||
|
|
|
|||
|
|
@ -1,138 +1,102 @@
|
|||
<template>
|
||||
<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
|
||||
<div style="margin-top: 60px; margin-left: 80px; border: 0px solid red;">
|
||||
<el-form style="margin-left: -40px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="字段：" prop="key">
|
||||
<el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择字段">
|
||||
<el-select v-model="ruleForm.key" style="width: 160px; float: left" placeholder="请选择字段">
|
||||
<el-option label="楼宇" value="buildingName"></el-option>
|
||||
<el-option label="宿舍" value="dormitoryName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div style="border: 0px solid red;width: 400px;height: 60px;position: relative;top: -64px;left: 270px">
|
||||
<div style="border: 0px solid red; width: 400px; height: 60px; position: relative; top: -64px; left: 270px">
|
||||
<el-form-item label="值：">
|
||||
<el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="submitForm('ruleForm')">搜索</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" style="position: relative; left: 10px;" @click="submitForm('ruleForm')">搜索</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
stripe
|
||||
style="width: 1210px;position: relative;top:-30px">
|
||||
:data="tableData"
|
||||
border
|
||||
stripe
|
||||
style="width: 1210px; position: relative; top: -30px">
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="id"
|
||||
label="ID"
|
||||
width="130">
|
||||
fixed
|
||||
prop="id"
|
||||
label="ID"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="buildingName"
|
||||
label="楼宇"
|
||||
width="180">
|
||||
prop="buildingId"
|
||||
label="楼宇"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dormitoryName"
|
||||
label="宿舍"
|
||||
width="180">
|
||||
prop="dormitoryId"
|
||||
label="宿舍"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="studentName"
|
||||
label="学生"
|
||||
width="180">
|
||||
prop="studentId"
|
||||
label="学生"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reason"
|
||||
label="原因"
|
||||
width="180">
|
||||
prop="reason"
|
||||
label="原因"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dormitoryAdminName"
|
||||
label="宿管"
|
||||
width="180">
|
||||
prop="dormitoryAdminId"
|
||||
label="宿管"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createDate"
|
||||
label="日期"
|
||||
width="180">
|
||||
prop="createDate"
|
||||
label="日期"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination style="margin-top: 20px;float: right"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:current-page.sync="currentPage"
|
||||
@current-change="page">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: null,
|
||||
currentPage: 1,
|
||||
pageSize: 3,
|
||||
total: null,
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
key: '',
|
||||
value: '',
|
||||
ruleForm: {
|
||||
key: '',
|
||||
value: '',
|
||||
ruleForm: {
|
||||
key: '',
|
||||
value: '',
|
||||
page: '',
|
||||
size: 3
|
||||
},
|
||||
rules: {
|
||||
key: [
|
||||
{ required: true, message: '请选择字段', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
submitForm(formName) {
|
||||
const _this = this
|
||||
//让翻页复原
|
||||
_this.currentPage=1
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const _this = this
|
||||
_this.ruleForm.page = _this.currentPage
|
||||
axios.get('http://localhost:8080/absent/search',{params:_this.ruleForm}).then(function (resp) {
|
||||
_this.tableData = resp.data.data.data
|
||||
_this.total = resp.data.data.total
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
value: ''
|
||||
},
|
||||
page(currentPage){
|
||||
const _this = this
|
||||
if(_this.ruleForm.value == ''){
|
||||
axios.get('http://localhost:8080/absent/list/'+currentPage+'/'+_this.pageSize).then(function (resp) {
|
||||
_this.tableData = resp.data.data.data
|
||||
_this.total = resp.data.data.total
|
||||
})
|
||||
} else {
|
||||
_this.ruleForm.page = _this.currentPage
|
||||
axios.get('http://localhost:8080/absent/search',{params:_this.ruleForm}).then(function (resp) {
|
||||
_this.tableData = resp.data.data.data
|
||||
_this.total = resp.data.data.total
|
||||
})
|
||||
}
|
||||
|
||||
rules: {
|
||||
key: [
|
||||
{ required: true, message: '请选择字段', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const _this = this
|
||||
axios.get('http://localhost:8080/absent/list/1/'+_this.pageSize).then(function (resp) {
|
||||
_this.tableData = resp.data.data.data
|
||||
_this.total = resp.data.data.total
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
axios.get('http://localhost:8080/system/absent/search', { params: this.ruleForm })
|
||||
.then(resp => {
|
||||
this.tableData = resp.data.data.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('http://localhost:8080/system/absent/list')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue