Compare commits
3 Commits
880861801d
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| a44551fcfd | |||
| a005b26bd7 | |||
|
af8a2d1c98 |
48
src/utils/utils/request.js
Normal file
48
src/utils/utils/request.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import { getLanguage } from '@/lang/index.js';
|
||||||
|
import { getToken } from '@/utils/auth.js';
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: 'http://localhost:8888',
|
||||||
|
timeout: 30000, // 后台接口超时时间
|
||||||
|
headers: {
|
||||||
|
"Content-Language": getLanguage(),
|
||||||
|
Authorization: 'Bearer ' + getToken(),
|
||||||
|
clientid: import.meta.env.VITE_APP_CLIENT_ID
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// request 拦截器
|
||||||
|
// 可以自请求发送前对请求做一些处理
|
||||||
|
request.interceptors.request.use(config => {
|
||||||
|
config.headers['Content-Type'] = 'application/json;charset=utf-8';
|
||||||
|
return config
|
||||||
|
}, error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
});
|
||||||
|
|
||||||
|
// response 拦截器
|
||||||
|
// 可以在接口响应后统一处理结果
|
||||||
|
request.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
let res = response.data;
|
||||||
|
// 兼容服务端返回的字符串数据
|
||||||
|
if (typeof res === 'string') {
|
||||||
|
res = res ? JSON.parse(res) : res
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
if (error.response.status === 404) {
|
||||||
|
ElMessage.error('未找到请求接口')
|
||||||
|
} else if (error.response.status === 500) {
|
||||||
|
ElMessage.error('系统异常，请查看后端控制台报错')
|
||||||
|
} else {
|
||||||
|
console.error(error.message)
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default request
|
||||||
173
src/views/school/cls/index.vue
Normal file
173
src/views/school/cls/index.vue
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card" style="margin-bottom: 5px">
|
||||||
|
<el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
|
||||||
|
<el-button type="primary" @click="load"> 查询</el-button>
|
||||||
|
<el-button type="warning" @click="reset"> 重置</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="margin-bottom: 5px">
|
||||||
|
<el-button type="primary" @click = handleAdd> 新增</el-button>
|
||||||
|
<el-button type="danger" @click = delBatch> 批量删除</el-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card" style="margin-bottom: 5px">
|
||||||
|
<el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="名称" prop="name" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button>
|
||||||
|
<el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div style="margin-top: 18px">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="load"
|
||||||
|
@current-change="load"
|
||||||
|
v-model:current-page="data.pageNum"
|
||||||
|
v-model:page-size="data.pageSize"
|
||||||
|
:page-sizes="[5, 10, 15, 20]"
|
||||||
|
background
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="data.total"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="name">
|
||||||
|
<el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="data.formVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="save">保 存</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</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";
|
||||||
|
|
||||||
|
|
||||||
|
const data =reactive({
|
||||||
|
name: null,
|
||||||
|
tableData: [],
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
formVisible:false,
|
||||||
|
form:{},
|
||||||
|
description:{},
|
||||||
|
rules:{
|
||||||
|
name:[
|
||||||
|
{required:true,message:'请输入名称',trigger:'blur'}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRef =ref()
|
||||||
|
const load = () =>{
|
||||||
|
request.post('/cls/selectAll', {
|
||||||
|
|
||||||
|
}).then(res =>{
|
||||||
|
data.tableData = res.data;
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
load();
|
||||||
|
const reset =()=>{
|
||||||
|
data.name = null;
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
const handleAdd = ()=>{
|
||||||
|
data.formVisible = true
|
||||||
|
data.form ={}
|
||||||
|
}
|
||||||
|
const save = ()=>{
|
||||||
|
formRef.value.validate((valid) => {
|
||||||
|
if (valid){
|
||||||
|
data.form.id ? update() : add()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const add =()=>{
|
||||||
|
request.post('/cls/add',data.form).then(res =>{
|
||||||
|
if (res.code === '200'){
|
||||||
|
data.formVisible= false
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
load() //新增后要重新加载新增的数据
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const update =()=>{
|
||||||
|
request.put('/cls/update',data.form).then(res =>{
|
||||||
|
if (res.code === '200'){
|
||||||
|
data.formVisible= false
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
load() //更新后要重新加载新增的数据
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleUpdate = (row)=>{
|
||||||
|
data.form = JSON.parse(JSON.stringify(row)) //深拷贝一个新对象 用于编辑
|
||||||
|
data.formVisible = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const del = (id)=>{
|
||||||
|
ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？",'删除确认',{type:'warning'}).then(()=>{
|
||||||
|
request.delete('/cls/deleteById/'+id).then(res=>{
|
||||||
|
if (res.code === '200'){
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
load() //删除 后要重新加载新增的数据
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
// 用户点击取消时可以添加提示（可选）
|
||||||
|
ElMessage.info('已取消删除');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSelectionChange = (rows) => { // 返回所有选中的行对象数组
|
||||||
|
// 从选中的行数组里面取出所有行的id组成一个新的数组
|
||||||
|
data.ids = rows.map(row => row.id)
|
||||||
|
console.log(data.ids)
|
||||||
|
}
|
||||||
|
|
||||||
|
const delBatch=()=>{
|
||||||
|
if (data.ids.length ===0){
|
||||||
|
ElMessage.warning("请选择数据")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？",'删除确认',{type:'warning'}).then(()=>{
|
||||||
|
request.delete('/cls/deleteBatch',{data: data.ids }).then(res=>{
|
||||||
|
if (res.code === '200'){
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
load() //删除 后要重新加载新增的数据
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
// 用户点击取消时可以添加提示（可选）
|
||||||
|
ElMessage.info('已取消删除');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,238 +1,253 @@
|
|||||||
<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()
|
request.post('/cls/selectAll', {}).then((res) => {
|
||||||
const load = () =>{
|
data.clsList = res.data;
|
||||||
request.get('/student/selectAll',{
|
});
|
||||||
params:{
|
|
||||||
pageNum: data.pageNum,
|
|
||||||
pageSize: data.pageSize,
|
|
||||||
name:data.name,
|
|
||||||
}
|
|
||||||
}).then(res =>{
|
|
||||||
data.tableData = res.data;
|
|
||||||
|
|
||||||
})
|
const formRef = ref();
|
||||||
}
|
const load = () => {
|
||||||
|
request
|
||||||
|
.get('/student/selectAll', {
|
||||||
|
params: {
|
||||||
|
pageNum: data.pageNum,
|
||||||
|
pageSize: data.pageSize,
|
||||||
|
name: data.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.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>
|
||||||
|
|||||||
Reference in New Issue
Block a user