Training/plus-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize: 优化学生页面

Browse Source
This commit is contained in:
yangheqi
2025-08-08 09:39:51 +08:00
parent af8a2d1c98
commit a005b26bd7
1 changed files with 196 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

381
src/views/school/student/index.vue
View File

@@ -1,238 +1,249 @@
<template> <template>
<div> <div>
<div class="card" style="margin-bottom: 5px"> <el-row :gutter="20">
<el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input> <el-col :lg="24" :xs="24">
<el-button type="primary" @click="load"> 查询</el-button> <transition :enter-active-class="animate.searchAnimate.enter" :leave-active-class="animate.searchAnimate.leave">
<el-button type="warning" @click="reset"> 重置</el-button> <div v-show="showSearch" class="mb-[10px]">
</div> <el-card shadow="hover">
<div class="card" style="margin-bottom: 5px"> <el-form ref="queryFormRef" :model="data" :inline="true">
<el-button type="primary" @click = handleAdd> 新增</el-button> <el-form-item label="学生姓名">
<el-button type="danger" @click = delBatch> 批量删除</el-button> <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
</div> </el-form-item>
<div class="card" style="margin-bottom: 5px"> </el-form>
<el-table :data="data.tableData" stripe @selection-change="handleSelectionChange"> </el-card>
<el-table-column type="selection" width="55" /> </div>
<el-table-column label="账号" prop="username" /> </transition>
<el-table-column label="头像">
<template #default="scope"> <el-card shadow="hover">
<img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="display: block; width: 40px; height: 40px; border-radius: 50%" /> <template #header>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" plain @click="handleAdd"> 新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain @click="delBatch"> 批量删除</el-button>
</el-col>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="load"></right-toolbar>
</el-row>
</template> </template>
</el-table-column> <el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
<el-table-column label="名称" prop="name" /> <el-table-column type="selection" width="55" />
<el-table-column label="性别" prop="sex" /> <el-table-column v-if="columns[0].visible" label="账号" prop="username" />
<el-table-column label="班级" prop="cls" /> <el-table-column v-if="columns[1].visible" label="头像" prop="avatar">
<el-table-column label="年龄" prop="age" /> <template #default="scope">
<el-table-column label="操作" width="120"> <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="display: block; width: 40px; height: 40px; border-radius: 50%" />
<template #default="scope"> </template>
<el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button> </el-table-column>
<el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button> <el-table-column v-if="columns[2].visible" label="名称" prop="name" />
</template> <el-table-column v-if="columns[3].visible" label="性别" prop="sex" />
</el-table-column> <el-table-column v-if="columns[4].visible" label="班级" prop="cls" />
</el-table> <el-table-column v-if="columns[5].visible" label="年龄" prop="age" />
<div style="margin-top: 18px"> <el-table-column v-if="columns[6].visible" label="操作" width="120">
<el-pagination <template #default="scope">
@size-change="load" <el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button>
@current-change="load" <el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button>
v-model:current-page="data.pageNum" </template>
v-model:page-size="data.pageSize" </el-table-column>
:page-sizes="[5, 10, 15, 20]" </el-table>
background <pagination v-show="data.total > 0" v-model:page="data.pageNum" v-model:limit="data.pageSize" :total="data.total" @pagination="load" />
layout="total, sizes, prev, pager, next, jumper" </el-card>
:total="data.total" </el-col>
/> <el-dialog title="学生信息 " v-model="data.formVisible" width="500" destory-on-close>
<el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding-right: 40px; padding-top: 20px">
<el-form-item label="账号" prop="username">
<el-input :disabled="data.form.id" v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
</el-form-item>
</div> <el-form-item label="班级">
</div> <el-select style="width: 100%" v-model="data.form.clsId">
<el-dialog title="学生信息 " v-model="data.formVisible" width="500" destory-on-close> <el-option v-for="item in data.clsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
<el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding-right: 40px ;padding-top: 20px"> </el-select>
<el-form-item label="账号" prop="username"> </el-form-item>
<el-input :disabled="data.form.id" v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
</el-form-item>
<el-form-item label="班级"> <el-form-item label="名称" prop="name">
<el-select style="width: 100%" v-model="data.form.clsId"> <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
<el-option v-for="item in data.clsList" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-form-item>
</el-select> <el-form-item label="性别">
</el-form-item> <el-radio-group v-model="data.form.sex">
<el-radio value="男" label="男"></el-radio>
<el-radio value="女" label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="data.form.sex">
<el-radio value="男" label="男"></el-radio>
<el-radio value="女" label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-upload
class="avatar-uploader"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
<el-form-item label="头像">
<el-upload <el-upload
action="http://localhost:8080/vue/public/upload" class="avatar-uploader"
list-type="picture" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:show-file-list="false"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
> >
<el-button type="primary">上传头像</el-button> <img v-if="imageUrl" :src="imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload> </el-upload>
</el-form-item>
<el-form-item label="头像">
<el-upload action="http://localhost:8080/vue/public/upload" list-type="picture" :on-success="handleAvatarSuccess">
<el-button type="primary">上传头像</el-button>
</el-upload>
</el-form-item>
<el-form-item label="年龄"> <el-form-item label="年龄">
<el-input-number style="width: 200px" :min="18" v-model="data.form.age" autocomplete="off" placeholder="请选择年龄" /> <el-input-number style="width: 200px" :min="18" v-model="data.form.age" autocomplete="off" placeholder="请选择年龄" />
</el-form-item> </el-form-item>
</el-form>
<template #footer>
</el-form> <div class="dialog-footer">
<template #footer> <el-button @click="data.formVisible = false">取 消</el-button>
<div class="dialog-footer"> <el-button type="primary" @click="save">保 存</el-button>
<el-button @click="data.formVisible = false">取 消</el-button> </div>
<el-button type="primary" @click="save">保 存</el-button> </template>
</div> </el-dialog>
</template> </el-row>
</el-dialog>
</div> </div>
</template> </template>
<script setup>
import {reactive,ref} from "vue";
import {Edit, Delete, Search} from "@element-plus/icons-vue";
import request from "@/utils/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
request.get('/student/selectAll').then(res =>{ <script setup lang="ts">
data.clsList = res.data import { reactive, ref } from 'vue';
}) import { Delete, Edit } from '@element-plus/icons-vue';
import request from '@/utils/utils/request.js';
import { ElMessage, ElMessageBox } from 'element-plus';
const data =reactive({ const showSearch = ref(true);
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `账号`, visible: true, children: [] },
{ key: 1, label: `头像`, visible: true, children: [] },
{ key: 2, label: `名称`, visible: true, children: [] },
{ key: 3, label: `性别`, visible: true, children: [] },
{ key: 4, label: `班级`, visible: true, children: [] },
{ key: 5, label: `年龄`, visible: true, children: [] },
{ key: 6, label: `操作`, visible: true, children: [] }
]);
const data = reactive({
name: null, name: null,
tableData: [], tableData: [],
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
formVisible:false, formVisible: false,
form:{}, form: {},
clsList:[], clsList: [],
rules:{ rules: {
username:[ username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
{required:true,message:'请输入账号',trigger:'blur'} name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
],
name:[
{required:true,message:'请输入名称',trigger:'blur'}
],
} }
}) });
const handleAvatarSuccess = (res) => { const handleAvatarSuccess = (res) => {
data.form.avatar = res.data data.form.avatar = res.data;
} };
const formRef =ref() const formRef = ref();
const load = () =>{ const load = () => {
request.get('/student/selectAll',{ request
params:{ .get('/student/selectAll', {
pageNum: data.pageNum, params: {
pageSize: data.pageSize, pageNum: data.pageNum,
name:data.name, pageSize: data.pageSize,
} name: data.name
}).then(res =>{ }
data.tableData = res.data; })
.then((res) => {
}) data.tableData = res.data;
} });
};
load(); load();
const reset =()=>{ const reset = () => {
data.name = null; data.name = null;
load(); load();
} };
const handleAdd = ()=> { const handleAdd = () => {
data.formVisible = true data.formVisible = true;
data.form = {} data.form = {};
} };
const save = () => { const save = () => {
formRef.value.validate((valid) => { formRef.value.validate((valid) => {
if (valid) { if (valid) {
data.form.id ? update() : add() data.form.id ? update() : add();
} }
}) });
} };
const add = () => { const add = () => {
request.post('/student/add', data.form).then(res => { request.post('/student/add', data.form).then((res) => {
if (res.code === '200') { if (res.code === '200') {
data.formVisible = false data.formVisible = false;
ElMessage.success('操作成功') ElMessage.success('操作成功');
load() //新增后要重新加载新增的数据 load(); //新增后要重新加载新增的数据
} else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg);
} }
}) });
} };
const update = () => { const update = () => {
request.put('/student/update', data.form).then(res => { request.put('/student/update', data.form).then((res) => {
if (res.code === '200') { if (res.code === '200') {
data.formVisible = false data.formVisible = false;
ElMessage.success('操作成功') ElMessage.success('操作成功');
load() //更新后要重新加载新增的数据 load(); //更新后要重新加载新增的数据
} else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg);
} }
}) });
} };
const handleUpdate = (row) => { const handleUpdate = (row) => {
data.form = JSON.parse(JSON.stringify(row)) //深拷贝一个新对象 用于编辑 data.form = JSON.parse(JSON.stringify(row)); //深拷贝一个新对象 用于编辑
data.formVisible = true data.formVisible = true;
} };
const del = (id) => { const del = (id) => {
ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？", '删除确认', { type: 'warning' }).then(() => { ElMessageBox.confirm('删除数据之后无法恢复，您确定要删除这个数据吗？', '删除确认', { type: 'warning' })
request.delete('/student/deleteById/' + id).then(res => { .then(() => {
if (res.code === '200') { request.delete('/student/deleteById/' + id).then((res) => {
ElMessage.success('操作成功') if (res.code === '200') {
load() //删除 后要重新加载新增的数据 ElMessage.success('操作成功');
} else { load(); //删除 后要重新加载新增的数据
ElMessage.error(res.msg) } else {
} ElMessage.error(res.msg);
}
});
}) })
}).catch(() => { .catch(() => {
// 用户点击取消时可以添加提示（可选） // 用户点击取消时可以添加提示（可选）
ElMessage.info('已取消删除'); ElMessage.info('已取消删除');
}) });
} };
const handleSelectionChange = (rows) => { // 返回所有选中的行对象数组 const handleSelectionChange = (rows) => {
// 返回所有选中的行对象数组
// 从选中的行数组里面取出所有行的id组成一个新的数组 // 从选中的行数组里面取出所有行的id组成一个新的数组
data.ids = rows.map(row => row.id) data.ids = rows.map((row) => row.id);
console.log(data.ids) console.log(data.ids);
} };
const delBatch = () => { const delBatch = () => {
if (data.ids.length === 0) { if (data.ids.length === 0) {
ElMessage.warning("请选择数据") ElMessage.warning('请选择数据');
return return;
} }
ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？", '删除确认', { type: 'warning' }).then(() => { ElMessageBox.confirm('删除数据之后无法恢复，您确定要删除这个数据吗？', '删除确认', { type: 'warning' })
request.delete('/student/deleteBatch', { data: data.ids }).then(res => { .then(() => {
if (res.code === '200') { request.delete('/student/deleteBatch', { data: data.ids }).then((res) => {
ElMessage.success('操作成功') if (res.code === '200') {
load() //删除 后要重新加载新增的数据 ElMessage.success('操作成功');
} else { load(); //删除 后要重新加载新增的数据
ElMessage.error(res.msg) } else {
} ElMessage.error(res.msg);
}
});
}) })
}).catch(() => { .catch(() => {
// 用户点击取消时可以添加提示（可选） // 用户点击取消时可以添加提示（可选）
ElMessage.info('已取消删除'); ElMessage.info('已取消删除');
}) });
} };
</script> </script>