|
|
@@ -3,11 +3,123 @@ import { computed, onMounted, onUnmounted, watch, ref } from "vue";
|
|
|
import { useRouter } from 'vue-router';
|
|
|
const router = useRouter();
|
|
|
|
|
|
+let state = ref({
|
|
|
+ organizationList: [],
|
|
|
+ userListParams: {
|
|
|
+ keyword: '',
|
|
|
+ page: 1,
|
|
|
+ limit: 5,
|
|
|
+ },
|
|
|
+ userList: [],
|
|
|
+ userTotal: 0,
|
|
|
+ showDialog: false,
|
|
|
+ ids: [],
|
|
|
+ showDel: false,
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="ManageUser">
|
|
|
- 账号管理
|
|
|
+
|
|
|
+ <div class="content commonsScrollbar">
|
|
|
+ <div class="contentTitle">
|
|
|
+ <div class="contentTitle-line"></div>
|
|
|
+ <div class="contentTitle-text">学生管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="contentRow">
|
|
|
+ <div class="rowLeft">
|
|
|
+ <div class="rowSelect">
|
|
|
+ <el-select
|
|
|
+ v-model="state.userListParams.orgId"
|
|
|
+ clearable
|
|
|
+ placeholder="全部班级"
|
|
|
+ size="large"
|
|
|
+ style="width: 15rem"
|
|
|
+ @change="classChange"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1" @click="btnAddStudent(ruleFormRef)">
|
|
|
+ <img src="./assets/img/manageUser/add.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">添加学生</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn2">
|
|
|
+ <img src="./assets/img/manageUser/download.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text2">模板下载</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1">
|
|
|
+ <img src="./assets/img/manageUser/import.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">批量导入</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1">
|
|
|
+ <img src="./assets/img/manageUser/export.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">批量导出</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn3" @click="btnShowDel">
|
|
|
+ <img src="./assets/img/manageUser/delete.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text3">批量删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rowRight">
|
|
|
+ <el-input
|
|
|
+ v-model="state.userListParams.keyword"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ clearable
|
|
|
+ style="width: 17rem; height: 3rem"
|
|
|
+ placeholder="搜索学生姓名/学号"
|
|
|
+ @clear="btnSearchName"
|
|
|
+ />
|
|
|
+ <div class="rowSearch" @click="btnSearchName">搜索</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contentTable">
|
|
|
+ <el-table :data="state.userList" style="width: 100%" @selection-change="selectionChange">
|
|
|
+ <el-table-column align="center" type="selection" width="110" />
|
|
|
+ <el-table-column prop="name" label="姓名/学号" />
|
|
|
+ <el-table-column prop="name" label="学校" />
|
|
|
+ <el-table-column prop="orgName" label="班级" />
|
|
|
+ <el-table-column prop="orgName" label="加入时间" />
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="btnDetail(scope.row)">详情</el-button>
|
|
|
+ <el-popconfirm :title="`你确定删除${scope.row.name}吗?`" @confirm="btnDel(scope.row)">
|
|
|
+ <template #reference>
|
|
|
+ <el-button link type="danger" style="margin-left: 3rem">移除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- <el-pagination
|
|
|
+ class="classPagination"
|
|
|
+ v-model:current-page="state.userListParams.page"
|
|
|
+ v-model:page-size="state.userListParams.limit"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ background
|
|
|
+ :layout="config.layout.shrink ? 'prev, next, jumper' : ' ->, total,prev, pager, next, jumper'"
|
|
|
+ :total="state.userTotal"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination> -->
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ class="classPagination"
|
|
|
+ v-model:current-page="state.userListParams.page"
|
|
|
+ v-model:page-size="state.userListParams.limit"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ background
|
|
|
+ :layout="'prev, next, jumper'"
|
|
|
+ :total="state.userTotal"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
