班级的查找
This commit is contained in:
Asriya
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>
|
||||
Reference in New Issue
Block a user