|
|
|
|
@ -1,63 +1,184 @@ |
|
|
|
|
<script setup> |
|
|
|
|
import { Search, Edit, Delete } from '@element-plus/icons-vue' |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
const tableData = [ |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-03', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Home', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-02', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Office', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-04', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Home', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-01', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Office', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-01', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Office', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
date: '2016-05-01', |
|
|
|
|
name: 'Tom', |
|
|
|
|
state: 'California', |
|
|
|
|
city: 'Los Angeles', |
|
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
|
zip: 'CA 90036', |
|
|
|
|
tag: 'Office', |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
|
import { |
|
|
|
|
stuListService, |
|
|
|
|
stuPageService, |
|
|
|
|
delStuListService, |
|
|
|
|
reStuPassService, |
|
|
|
|
changeStaService, |
|
|
|
|
} from '@/api/user/stud' |
|
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
|
import useUserStore from '@/store/modules/user' |
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
// console.log(userStore.data.id, 'icon') //用户信息 |
|
|
|
|
const formLabelWidth = '60px' |
|
|
|
|
const tableData = ref([]) |
|
|
|
|
//是否是第一次加载 |
|
|
|
|
const isFirstLoad = ref(true) |
|
|
|
|
const params = ref({ |
|
|
|
|
page: 1, |
|
|
|
|
pagesize: 3, |
|
|
|
|
id: userStore.data.id, |
|
|
|
|
name: '', |
|
|
|
|
number: '', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
//获取学生 |
|
|
|
|
const getData = async () => { |
|
|
|
|
loading.value = true |
|
|
|
|
await stuPageService(params.value).then((res) => { |
|
|
|
|
tableData.value = res.data.Records |
|
|
|
|
// console.log(tableData.value, 'params') |
|
|
|
|
loading.value = false |
|
|
|
|
console.log(res.data, 'res.data') |
|
|
|
|
isFirstLoad.value = false |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//学生 |
|
|
|
|
// const getData = async () => { |
|
|
|
|
// // id.value = userStore.data.id |
|
|
|
|
// // console.log(id.value, 'id.value') |
|
|
|
|
// stuListService(2).then((res) => { |
|
|
|
|
// tableData.value = res.data |
|
|
|
|
// console.log(res.data, 'res.data') |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
// 页面条数变化 |
|
|
|
|
const onSizeChange = (size) => { |
|
|
|
|
//页面条数变化了，原本正在访问的页面变化，重新从第一页渲染即可 |
|
|
|
|
loading.value = true |
|
|
|
|
params.value.page = 1 |
|
|
|
|
params.value.pagesize = size |
|
|
|
|
//基于最新的页面渲染数据 |
|
|
|
|
getData() |
|
|
|
|
loading.value = false |
|
|
|
|
} |
|
|
|
|
// 当前页条数变化 |
|
|
|
|
const onCurrentChange = (page) => { |
|
|
|
|
params.value.page = page |
|
|
|
|
getData() |
|
|
|
|
} |
|
|
|
|
//重置 |
|
|
|
|
const onReset = () => { |
|
|
|
|
params.value.page = 1 |
|
|
|
|
getData() |
|
|
|
|
} |
|
|
|
|
//搜索 |
|
|
|
|
const onSearch = () => { |
|
|
|
|
params.value.pagenum = 1 |
|
|
|
|
// getArticleService() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loading = ref(false) |
|
|
|
|
//编辑 |
|
|
|
|
const drawer = ref(false) |
|
|
|
|
//修改行 |
|
|
|
|
const editTable = (row) => { |
|
|
|
|
drawer.value = true |
|
|
|
|
console.log(row) |
|
|
|
|
} |
|
|
|
|
//删除行 |
|
|
|
|
const delTable = async (row) => { |
|
|
|
|
console.log(row.userId, 'delrow') |
|
|
|
|
await ElMessageBox.confirm('您确定删除这条学生信息吗', '温馨提示', { |
|
|
|
|
confirmButtonText: '确认', |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
}) |
|
|
|
|
await delStuListService(row.userId).then(() => { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: '删除成功', |
|
|
|
|
type: 'success', |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
getData() |
|
|
|
|
} |
|
|
|
|
//批量删除 |
|
|
|
|
const selectedIds = ref([]) |
|
|
|
|
function handleSelectionChange(selection) { |
|
|
|
|
selectedIds.value = selection.map((row) => row.userId) |
|
|
|
|
console.log(selectedIds.value, 'selectedIds.value') |
|
|
|
|
} |
|
|
|
|
const onDel = async () => { |
|
|
|
|
await ElMessageBox.confirm('您确定删除这些学生信息吗', '温馨提示', { |
|
|
|
|
confirmButtonText: '确认', |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
}) |
|
|
|
|
await delStuListService(selectedIds.value).then(() => { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: '删除成功', |
|
|
|
|
type: 'success', |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
getData() |
|
|
|
|
} |
|
|
|
|
//重置学生密码 |
|
|
|
|
const onResetPass = async () => { |
|
|
|
|
await ElMessageBox.confirm('您确定重置这些学生密码吗', '温馨提示', { |
|
|
|
|
confirmButtonText: '确认', |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
}) |
|
|
|
|
await reStuPassService(selectedIds.value).then(() => { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: '重置成功', |
|
|
|
|
type: 'success', |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
getData() |
|
|
|
|
} |
|
|
|
|
//状态 |
|
|
|
|
const status = ref() |
|
|
|
|
async function handleStatusChange(row) { |
|
|
|
|
status.value = row.status |
|
|
|
|
// console.log(status.value, 'status') |
|
|
|
|
// console.log(`状态更改: ${row.status}`) |
|
|
|
|
// if (!isFirstLoad.value) { |
|
|
|
|
// await changeStaService(status.value, row.userId).then(() => { |
|
|
|
|
// ElMessage({ |
|
|
|
|
// message: '状态更改成功', |
|
|
|
|
// type: 'success', |
|
|
|
|
// }) |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
// getData() |
|
|
|
|
} |
|
|
|
|
//学号查询 |
|
|
|
|
const studentId = ref() |
|
|
|
|
const searchNumber = async () => { |
|
|
|
|
params.value.number = studentId.value |
|
|
|
|
console.log(params.value.number, 'params.value.number') |
|
|
|
|
await stuPageService(params.value).then((res) => { |
|
|
|
|
params.value.page = 1 |
|
|
|
|
console.log(res, 'change') |
|
|
|
|
}) |
|
|
|
|
// getData() |
|
|
|
|
} |
|
|
|
|
//查询 |
|
|
|
|
const studentName = ref() |
|
|
|
|
const searchInfo = async () => { |
|
|
|
|
params.value.name = studentName.value |
|
|
|
|
console.log(params.value.name, 'params.value.number') |
|
|
|
|
await stuPageService(params.value).then((res) => { |
|
|
|
|
params.value.page = 1 |
|
|
|
|
console.log(res, 'change') |
|
|
|
|
}) |
|
|
|
|
// getData() |
|
|
|
|
} |
|
|
|
|
function clearInput() { |
|
|
|
|
studentId.value = '' |
|
|
|
|
} |
|
|
|
|
function clearInput1() { |
|
|
|
|
studentName.value = '' |
|
|
|
|
} |
|
|
|
|
const changeStatus = async (row) => {} |
|
|
|
|
onMounted(() => { |
|
|
|
|
getData() |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
<page-container title="文章分类"> |
|
|
|
|
@ -65,21 +186,43 @@ const loading = ref(false) |
|
|
|
|
<template #header> |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<span>学生信息</span> |
|
|
|
|
<el-button type="primary">重置密码</el-button> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" @click="onResetPass">重置密码</el-button> |
|
|
|
|
<el-button type="danger" @click="onDel">批量删除</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div class="content"> |
|
|
|
|
<el-form style="display: flex"> |
|
|
|
|
<el-form-item style="width: 250px"> |
|
|
|
|
<el-input class="input_search"></el-input> |
|
|
|
|
<!-- <p>学号</p> --> |
|
|
|
|
<el-input |
|
|
|
|
class="input_search" |
|
|
|
|
v-model="studentId" |
|
|
|
|
@blur="clearInput" |
|
|
|
|
></el-input> |
|
|
|
|
<el-icon><Search /></el-icon> |
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
<el-button class="btn_search" @click="searchNumber"> |
|
|
|
|
学号搜索 |
|
|
|
|
</el-button> |
|
|
|
|
<el-form-item style="width: 250px; margin-left: 30px"> |
|
|
|
|
<el-input |
|
|
|
|
class="input_search" |
|
|
|
|
@blur="clearInput1" |
|
|
|
|
v-model="studentName" |
|
|
|
|
></el-input> |
|
|
|
|
<el-icon><Search /></el-icon> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-button class="btn_search">搜索</el-button> |
|
|
|
|
<el-button class="btn_search" @click="searchInfo">搜索</el-button> |
|
|
|
|
<el-button type="primary" @click="onReset">重置</el-button> |
|
|
|
|
</el-form> |
|
|
|
|
<el-table |
|
|
|
|
class="tableBox" |
|
|
|
|
:data="tableData" |
|
|
|
|
v-loading="loading" |
|
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
|
:header-cell-style="{ |
|
|
|
|
background: '#FAFAFA', |
|
|
|
|
color: '#666', |
|
|
|
|
@ -103,21 +246,47 @@ const loading = ref(false) |
|
|
|
|
style="width: 100%" |
|
|
|
|
> |
|
|
|
|
<el-table-column type="selection" width="55" height="100" /> |
|
|
|
|
<el-table-column prop="date" label="日期" /> |
|
|
|
|
<el-table-column prop="icon" label="头像"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<img |
|
|
|
|
:src="scope.row.icon" |
|
|
|
|
alt="头像" |
|
|
|
|
width="40" |
|
|
|
|
height="40" |
|
|
|
|
class="rounded-circle" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" label="姓名" /> |
|
|
|
|
<el-table-column prop="state" label="状态" /> |
|
|
|
|
<el-table-column prop="city" label="City" width="300" /> |
|
|
|
|
<el-table-column prop="address" label="Address" /> |
|
|
|
|
<el-table-column prop="zip" label="Zip" /> |
|
|
|
|
<el-table-column prop="number" label="学号" width="120" /> |
|
|
|
|
<el-table-column prop="sex" label="性别" /> |
|
|
|
|
<el-table-column prop="username" label="用户名" /> |
|
|
|
|
<el-table-column prop="nickName" label="昵称" /> |
|
|
|
|
<el-table-column prop="phone" label="手机号" width="120" /> |
|
|
|
|
<el-table-column prop="major" label="专业" /> |
|
|
|
|
<el-table-column prop="yearAge" label="年级" /> |
|
|
|
|
<!-- <el-table-column prop="className" label="班级" /> --> |
|
|
|
|
<el-table-column prop="createTime" label="创建时间" width="200" /> |
|
|
|
|
<el-table-column prop="status" label="状态"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<el-switch |
|
|
|
|
v-model="scope.row.status" |
|
|
|
|
active-value="1" |
|
|
|
|
inactive-value="0" |
|
|
|
|
@change="handleStatusChange(scope.row)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column fixed="right" label="操作" min-width="125"> |
|
|
|
|
<template #default> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
size="small" |
|
|
|
|
:icon="Edit" |
|
|
|
|
circle |
|
|
|
|
plain |
|
|
|
|
@click="handleClick" |
|
|
|
|
@click="editTable(row)" |
|
|
|
|
></el-button> |
|
|
|
|
<el-button |
|
|
|
|
:icon="Delete" |
|
|
|
|
@ -125,6 +294,7 @@ const loading = ref(false) |
|
|
|
|
size="small" |
|
|
|
|
circle |
|
|
|
|
plain |
|
|
|
|
@click="delTable(row)" |
|
|
|
|
></el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
@ -132,47 +302,82 @@ const loading = ref(false) |
|
|
|
|
<el-empty description="没有数据" /> |
|
|
|
|
</template> |
|
|
|
|
</el-table> |
|
|
|
|
|
|
|
|
|
<!-- <el-table :data="tableData" style="width: 100%"> |
|
|
|
|
<el-table-column type="selection" width="65" /> |
|
|
|
|
<el-table-column prop="cate_name" label="分类名称" /> |
|
|
|
|
<el-table-column prop="cate_alias" label="分类别名" /> |
|
|
|
|
<el-table-column prop="address" label="操作"> |
|
|
|
|
<template #default="{ row, $index }"> |
|
|
|
|
<el-button |
|
|
|
|
@click="onEditChannel(row, $index)" |
|
|
|
|
:icon="Edit" |
|
|
|
|
type="primary" |
|
|
|
|
circle |
|
|
|
|
plain |
|
|
|
|
></el-button> |
|
|
|
|
<el-button |
|
|
|
|
@click="onDelChannel(row)" |
|
|
|
|
:icon="Delete" |
|
|
|
|
type="danger" |
|
|
|
|
circle |
|
|
|
|
plain |
|
|
|
|
></el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<template #empty> |
|
|
|
|
<el-empty description="没有数据" /> |
|
|
|
|
</template> |
|
|
|
|
</el-table> --> |
|
|
|
|
<el-pagination |
|
|
|
|
v-model:current-page="currentPage4" |
|
|
|
|
v-model:page-size="pageSize4" |
|
|
|
|
:page-sizes="[10, 20, 30, 40]" |
|
|
|
|
v-model:current-page="params.page" |
|
|
|
|
v-model:page-size="params.pagesize" |
|
|
|
|
:page-sizes="[3, 5, 7, 10]" |
|
|
|
|
:size="small" |
|
|
|
|
:disabled="disabled" |
|
|
|
|
:background="background" |
|
|
|
|
:background="true" |
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
|
:total="40" |
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
:total="10" |
|
|
|
|
@size-change="onSizeChange" |
|
|
|
|
@current-change="onCurrentChange" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<el-drawer v-model="drawer" title="编辑信息" style=""> |
|
|
|
|
<el-form :model="tableData" :rules="rules" ref="formRef"> |
|
|
|
|
<el-form-item label="头像" prop="icon"> |
|
|
|
|
<el-upload |
|
|
|
|
v-model="tableData.icon" |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
:http-request="upload" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
> |
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|
|
|
|
<template #tip> |
|
|
|
|
<div class="el-upload__tip"> |
|
|
|
|
图片文件要为jpg/png格式，小于500kb |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="姓名" prop="name"> |
|
|
|
|
<el-input v-model="tableData.name" placeholder="请输入姓名" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="学号" prop="number"> |
|
|
|
|
<el-input v-model="tableData.number" placeholder="请输入学号" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="性别" prop="sex"> |
|
|
|
|
<el-radio-group v-model="tableData.sex"> |
|
|
|
|
<el-radio value="1">男</el-radio> |
|
|
|
|
<el-radio value="2">女</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="姓名" prop="username"> |
|
|
|
|
<el-input v-model="tableData.username" placeholder="请输入姓名" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="用户名" prop="nickName"> |
|
|
|
|
<el-input v-model="tableData.nickName" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="昵称" prop="nickName"> |
|
|
|
|
<el-input v-model="tableData.nickName" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="手机号" prop="phone"> |
|
|
|
|
<el-input v-model="tableData.phone" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="专业" prop="major"> |
|
|
|
|
<el-input v-model="tableData.major" placeholder="请输入专业" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="年级" prop="yearAge"> |
|
|
|
|
<el-input v-model="tableData.yearAge" placeholder="请输入年级" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="创建时间" prop="createTime"> |
|
|
|
|
<el-input v-model="tableData.createTime" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="状态" prop="status"> |
|
|
|
|
<el-switch |
|
|
|
|
v-model="tableData.status" |
|
|
|
|
inline-prompt |
|
|
|
|
active-text="启用" |
|
|
|
|
inactive-text="禁用" |
|
|
|
|
/> |
|
|
|
|
<!-- <el-input v-model="tableData.status" placeholder="请输入姓名" /> --> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-drawer> |
|
|
|
|
</page-container> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -223,6 +428,9 @@ const loading = ref(false) |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #af4141; |
|
|
|
|
} |
|
|
|
|
.rounded-circle { |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
::v-deep.el-table td.el-table__cell div { |
|
|
|
|
// margin-left: -6px; |
|
|
|
|
// width: 170px; |
|
|
|
|
@ -238,4 +446,31 @@ const loading = ref(false) |
|
|
|
|
justify-content: end; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
.avatar-uploader { |
|
|
|
|
:deep() { |
|
|
|
|
.avatar { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
.el-upload { |
|
|
|
|
border: 1px dashed var(--el-border-color); |
|
|
|
|
border-radius: 6px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
transition: var(--el-transition-duration-fast); |
|
|
|
|
} |
|
|
|
|
.el-upload:hover { |
|
|
|
|
border-color: var(--el-color-primary); |
|
|
|
|
} |
|
|
|
|
.el-icon.avatar-uploader-icon { |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #8c939d; |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
