905 lines
32 KiB
Vue
905 lines
32 KiB
Vue
<template>
|
||
<div class="student-manage-wrap">
|
||
<!-- 左侧树形区域 固定高度滚动 -->
|
||
<div class="left-tree-box">
|
||
<my-tree :treeData="treeData" :selectId="selectnodeid" @on-tree-click="treeLink"></my-tree>
|
||
</div>
|
||
|
||
<!-- 右侧主体区域 -->
|
||
<div class="right-main-box">
|
||
<!-- 顶部按钮+搜索栏 -->
|
||
<div class="top-bar">
|
||
|
||
<div class="search-wrap" style="width: 100%;">
|
||
<div class="btn-left-group fl">
|
||
<Button type="primary" @click="openAddStudent">添加学生</Button>
|
||
<Button type="success" style="margin-left:8px" @click="openImportModal">学生导入</Button>
|
||
<Button type="success" style="margin-left:8px" @click="openStuIdImportModal">学号导入</Button>
|
||
<Button type="primary" style="margin-left:8px" @click="batchTransferStudent">转出学生</Button>
|
||
<Button type="primary" style="margin-left:8px" @click="openMoveClassModal">学生调班</Button>
|
||
<Button type="error" style="margin-left:8px" @click="openChangeStatusModal">学生异动</Button>
|
||
</div>
|
||
<Input
|
||
class="fr"
|
||
v-model="searchKey"
|
||
placeholder="姓名，身份证，账号"
|
||
search
|
||
style="width:300px"
|
||
@on-search="handleSearch"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格容器：自适应剩余高度滚动 -->
|
||
<div class="table-scroll-wrap">
|
||
<Table
|
||
border
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
:height="useTableHeight()+22"
|
||
@on-selection-change="selectionChange"
|
||
></Table>
|
||
</div>
|
||
|
||
<!-- 左下角批量删除 + 底部分页固定 -->
|
||
<div class="bottom-bar">
|
||
<Button type="error" @click="batchDelete">删除</Button>
|
||
<div class="page-right">
|
||
<span style="margin-right:12px">共 {{ total }} 条</span>
|
||
<Page
|
||
:current.sync="pageNum"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
:page-size-opts="[10,20,40,50]"
|
||
show-sizer
|
||
@on-change="pageChange"
|
||
@on-page-size-change="sizeChange"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗1：添加学生 -->
|
||
<Modal v-model="addModalVisible" title="添加学生" width="560">
|
||
<Form ref="addForm" :model="addForm" :rules="formRules" label-width="90">
|
||
<FormItem label="年级" prop="grade">
|
||
<Select v-model="addForm.grade" style="width:100%" @on-change="getschclassselect">
|
||
<Option v-for="item in gradeselectlist" :key="item.id" :value="item.id+''">{{ item.name }}</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem label="班级" prop="classId">
|
||
<Select v-model="addForm.classId" style="width:100%">
|
||
<Option v-for="item in schclassselectlist" :key="item.id" :value="item.id+''">{{ item.name }}</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem label="学生姓名" prop="name">
|
||
<Input v-model="addForm.name" placeholder="请输入学生姓名"></Input>
|
||
</FormItem>
|
||
<FormItem label="学号">
|
||
<Input v-model="addForm.stuClassNo" placeholder="请输入当前学号"></Input>
|
||
</FormItem>
|
||
<FormItem label="身份证号">
|
||
<Input v-model="addForm.idCard" placeholder="请输入身份证号"></Input>
|
||
</FormItem>
|
||
<FormItem label="账号" prop="account">
|
||
<Input v-model="addForm.account" placeholder="请输入账号"></Input>
|
||
</FormItem>
|
||
<FormItem label="密码" prop="pwd">
|
||
<Input v-model="addForm.pwd" type="password" placeholder="请输入密码"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="addModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="submitAddStudent">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗2：编辑学生 -->
|
||
<Modal v-model="editModalVisible" title="编辑学生" width="560">
|
||
<Form ref="editForm" :model="editForm" :rules="formRules" label-width="90">
|
||
<FormItem label="当前年级" prop="grade">
|
||
<Select disabled v-model="editForm.grade" style="width:100%" @on-change="getschclassselect">
|
||
<Option v-for="item in gradeselectlist" :key="item.id" :value="item.id+''">{{ item.name }}</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem label="当前班级" prop="classId">
|
||
<Select disabled v-model="editForm.classId" style="width:100%">
|
||
<Option v-for="item in schclassselectlist" :key="item.id" :value="item.id+''">{{ item.name }}</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem label="学生姓名" prop="name">
|
||
<Input v-model="editForm.name"></Input>
|
||
</FormItem>
|
||
<FormItem label="学号">
|
||
<Input v-model="editForm.stuClassNo"></Input>
|
||
</FormItem>
|
||
<FormItem label="身份证号">
|
||
<Input v-model="editForm.idCard"></Input>
|
||
</FormItem>
|
||
<FormItem label="账号" prop="account">
|
||
<Input v-model="editForm.account"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="editModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="submitEditStudent">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗3：学生信息导入 -->
|
||
<Modal v-model="importModalVisible" title="学生信息导入" width="520">
|
||
<!-- <div style="padding:10px 0;">
|
||
<div style="display:flex;align-items:center;">
|
||
<Upload action="" :before-upload="beforeFileUpload">
|
||
<Button>选择要上传的文件</Button>
|
||
</Upload>
|
||
<a href="javascript:;" style="margin-left:20px;color:#2d7ff9" @click="downloadStuTemplate">点击链接下载[用户导入模板.xls]</a>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="importModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="confirmImport">确定</Button>
|
||
</div> -->
|
||
<div class="main-contents">
|
||
<Form ref="UpParmas.datapre" :model="UpParmas.datapre" :label-width="100" inline>
|
||
<FormItem label="Excel上传:" style="margin-bottom:10px;width:100%;">
|
||
<i-input type="text" style="width:90%;" v-model="UpParmas.fileName" class="import-input" placeholder="未选中任何文件.." readonly></i-input>
|
||
<Upload class="fr btn"
|
||
:action="UpParmas.actionUrl"
|
||
:data="UpParmas.datapre"
|
||
:show-upload-list="false"
|
||
:headers="uploadHeader"
|
||
accept=".xls,.xlsx"
|
||
:before-upload="handleUpload"
|
||
:on-success="importFile"
|
||
>
|
||
<i-button icon="md-add"></i-button>
|
||
</Upload>
|
||
</FormItem>
|
||
<FormItem v-if="UpParmas.fileName" style="margin-bottom:10px">
|
||
<div v-if="UpParmas.listData.code!=0" style="color:red">导入失败，请修改Excel文件中相关数据后再重新上传！</div>
|
||
<div v-if="UpParmas.listData.code==0" style="color:green">导入成功！</div>
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<Alert show-icon>
|
||
操作说明：
|
||
<Icon type="ios-bulb-outline" slot="icon" size="20"></Icon>
|
||
<template slot="desc" style="font-size: 12px;">
|
||
请先上传EXCEL文件，若成功则显示导入成功数据，否则显示错误的数据及错误原因;<br>
|
||
EXCEL文件的格式()：工作表(WorkSheet)的名称应设为缺省的[Sheet1]；<br>
|
||
<a @click="MoBanExceldaochu" style="font-size:12px;">点击链接下载[学生信息导入模板.xls]</a>
|
||
</template>
|
||
</Alert>
|
||
|
||
<Table :columns="UpParmas.columns" :data="UpParmas.listData.data" v-if="UpParmas.listData.data"></Table>
|
||
</div>
|
||
<Spin fix v-if="spinShow">
|
||
<Icon type="ios-loading" size=30 class="demo-spin-icon-load"></Icon>
|
||
<div>上传中...</div>
|
||
</Spin>
|
||
<div slot="footer">
|
||
<i-Button @click="UpfileModalcloseclick" style="margin-left: 8px">关闭</i-Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗4：学号导入 -->
|
||
<Modal v-model="stuIdImportModalVisible" title="学生学号导入" width="520">
|
||
<div class="main-contents">
|
||
<Form ref="UpParmas2.datapre" :model="UpParmas2.datapre" :label-width="100" inline>
|
||
<FormItem label="Excel上传:" style="margin-bottom:10px;width:100%;">
|
||
<i-input type="text" style="width:90%;" v-model="UpParmas2.fileName" class="import-input" placeholder="未选中任何文件.." readonly></i-input>
|
||
<Upload class="fr btn"
|
||
:action="UpParmas2.actionUrl"
|
||
:data="UpParmas2.datapre"
|
||
:show-upload-list="false"
|
||
:headers="uploadHeader"
|
||
accept=".xls,.xlsx"
|
||
:before-upload="handleUpload2"
|
||
:on-success="importFile2"
|
||
>
|
||
<i-button icon="md-add"></i-button>
|
||
</Upload>
|
||
</FormItem>
|
||
<FormItem v-if="UpParmas2.fileName" style="margin-bottom:10px">
|
||
<div v-if="UpParmas2.listData.code!=0" style="color:red">导入失败，请修改Excel文件中相关数据后再重新上传！</div>
|
||
<div v-if="UpParmas2.listData.code==0" style="color:green">导入成功！</div>
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<Alert show-icon>
|
||
操作说明：
|
||
<Icon type="ios-bulb-outline" slot="icon" size="20"></Icon>
|
||
<template slot="desc" style="font-size: 12px;">
|
||
请先上传EXCEL文件，若成功则显示导入成功数据，否则显示错误的数据及错误原因;<br>
|
||
EXCEL文件的格式()：工作表(WorkSheet)的名称应设为缺省的[Sheet1]；<br>
|
||
<a @click="MoBanExceldaochu2" style="font-size:12px;">点击链接下载[学生学号信息导入模板.xls]</a>
|
||
</template>
|
||
</Alert>
|
||
|
||
<Table :columns="UpParmas2.columns" :data="UpParmas2.listData.data" v-if="UpParmas2.listData.data"></Table>
|
||
</div>
|
||
<Spin fix v-if="spinShow">
|
||
<Icon type="ios-loading" size=30 class="demo-spin-icon-load"></Icon>
|
||
<div>上传中...</div>
|
||
</Spin>
|
||
<div slot="footer">
|
||
<i-Button @click="UpfileModalcloseclick2" style="margin-left: 8px">关闭</i-Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗5：学生调班 -->
|
||
<Modal v-model="moveClassModalVisible" title="学生调班" width="500">
|
||
<div style="padding:10px 0;">
|
||
<div style="margin-bottom:16px;display:flex;align-items:center;">
|
||
<span style="width:90px;">当前班级</span>
|
||
<Input v-model="currentSelectClass" disabled style="flex:1;"></Input>
|
||
</div>
|
||
<div>
|
||
<span style="width:90px;display:inline-block;margin-bottom:10px;">目标班级</span>
|
||
<div class="class-btn-wrap">
|
||
<Button
|
||
v-for="item in filterschclassselectlist"
|
||
:key="item.id"
|
||
:type="targetClass===item.id?'primary':'default'"
|
||
style="margin:6px"
|
||
@click="targetClass=item.id"
|
||
size="small"
|
||
>{{ item.name }}</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="moveClassModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="submitMoveClass">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗6：学生异动 -->
|
||
<Modal v-model="changeStatusModalVisible" title="学生异动" width="520">
|
||
<div style="padding:10px 0;">
|
||
<div style="margin-bottom:16px;display:flex;align-items:center;">
|
||
<span style="width:90px;">当前学生</span>
|
||
<Input v-model="currentStuName" disabled style="flex:1;"></Input>
|
||
</div>
|
||
<div>
|
||
<span style="width:90px;display:inline-block;margin-bottom:10px;">异动情况</span>
|
||
<div class="status-btn-wrap">
|
||
<Button
|
||
v-for="item in studentabnormallist"
|
||
:key="item.id"
|
||
:type="selectedStatus===item.id?'primary':'default'"
|
||
style="margin:6px"
|
||
@click="selectedStatus=item.id"
|
||
size="small"
|
||
>{{ item.name }}</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="changeStatusModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="submitChangeStatus">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗7：转出学生弹窗 -->
|
||
<Modal v-model="transferStudentModal" title="转出学生" width="420">
|
||
<p>确认将选中学生做转出操作？</p>
|
||
<div slot="footer" align="right">
|
||
<Button @click="transferStudentModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmTransferStudent">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import myTree from "../../components/my_tree";
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: 'StudentManage',
|
||
components: { myTree },
|
||
data() {
|
||
return {
|
||
// 左侧树形数据
|
||
treeData: [],
|
||
selectnodeid:'',
|
||
schsystemId:'',
|
||
gradeId:'',
|
||
classId:'',
|
||
gradeselectlist:[],
|
||
classOptionList: [],
|
||
|
||
// 搜索
|
||
searchKey: '',
|
||
|
||
// 分页
|
||
pageNum: 1,
|
||
pageSize: 40,
|
||
total: 0,
|
||
selectedRows: [],
|
||
|
||
// 表格列配置
|
||
tableColumns: [],
|
||
tableData: [],
|
||
spinShow:false,
|
||
UpParmas:{
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
actionUrl:APIConfig.BschClassSystem.importStudents,
|
||
columns:[
|
||
{
|
||
title: '行号',
|
||
key: 'rows',
|
||
align: 'center',
|
||
width:'80'
|
||
},
|
||
{
|
||
title: '内容',
|
||
key: 'columnValue',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '错误详情',
|
||
key: 'errorMsg',
|
||
align: 'center',
|
||
}
|
||
],
|
||
},
|
||
UpParmas2:{
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
actionUrl:APIConfig.BschClassSystem.importStudentClassNo,
|
||
columns:[
|
||
{
|
||
title: '行号',
|
||
key: 'rows',
|
||
align: 'center',
|
||
width:'80'
|
||
},
|
||
{
|
||
title: '内容',
|
||
key: 'columnValue',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '错误详情',
|
||
key: 'errorMsg',
|
||
align: 'center',
|
||
}
|
||
],
|
||
},
|
||
|
||
// 弹窗开关
|
||
addModalVisible: false,
|
||
editModalVisible: false,
|
||
importModalVisible: false,
|
||
stuIdImportModalVisible: false,
|
||
moveClassModalVisible: false,
|
||
changeStatusModalVisible: false,
|
||
transferStudentModal:false,
|
||
|
||
// 新增学生表单
|
||
addForm: { grade:'', classId:'', name:'', stuClassNo:'', idCard:'', account:'', pwd:'' },
|
||
// 编辑学生表单
|
||
editForm: { grade:'', classId:'', name:'', stuClassNo:'', idCard:'', account:'', id:null,stuId:0,status:0 },
|
||
|
||
// 调班弹窗
|
||
currentSelectClass: '',
|
||
targetClass: '',
|
||
// 异动弹窗
|
||
currentStuName: '',
|
||
selectedStatus: 0,
|
||
studentabnormallist: [],
|
||
formRules: {
|
||
grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
|
||
classId: [{ required: true, message: '请选择班级', trigger: 'change' }],
|
||
name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
|
||
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||
pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||
}
|
||
}
|
||
},
|
||
mixins: [self_viewport],
|
||
computed: {
|
||
uploadHeader() { //附件上传header
|
||
let config = {};
|
||
if (localStorage.getItem("currentRole")) {
|
||
let currentRole = localStorage.getItem("currentRole");
|
||
config["currentRole"] = currentRole;
|
||
}
|
||
return config;
|
||
},
|
||
},
|
||
created() {
|
||
this.getgradeselect();
|
||
this.getClassTree();
|
||
this.initTableColumn()
|
||
},
|
||
methods: {
|
||
//获取年级下拉
|
||
getgradeselect:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getgradeselect, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.gradeselectlist=resp.data;
|
||
}
|
||
});
|
||
},
|
||
//获取班级下拉
|
||
getschclassselect:function(){
|
||
const _this = this;
|
||
var item={
|
||
gradeId:_this.gradeId
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getschclassselect, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.schclassselectlist=resp.data;
|
||
}
|
||
});
|
||
},
|
||
//获取学生状态列表
|
||
getstudentabnormal:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getstudentabnormal, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.studentabnormallist=resp.data;
|
||
}
|
||
});
|
||
},
|
||
//获取班级树
|
||
getClassTree:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getClassTree, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.treeData=resp.data;
|
||
if(resp.data.children.length>0){
|
||
// 起始节点为 data
|
||
const pathArr = _this.getFirstPath(resp.data);
|
||
_this.schsystemId=pathArr[pathArr.length-1].schsystemId;
|
||
_this.gradeId=pathArr[pathArr.length-1].gradeId+'';
|
||
_this.classId=pathArr[pathArr.length-1].classId+'';
|
||
_this.selectnodeid=pathArr[pathArr.length-1].id;
|
||
_this.getschclassselect();
|
||
_this.loadData();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取最后一级的map
|
||
getFirstPath(rootNode) {
|
||
const path = [];
|
||
let cur = rootNode;
|
||
while (cur) {
|
||
// 存入当前层级关键信息
|
||
path.push({
|
||
id: cur.id,
|
||
name: cur.name,
|
||
type: cur.type,
|
||
schsystemId:cur.schsystemId,
|
||
gradeId:cur.gradeId,
|
||
classId:cur.classId,
|
||
});
|
||
// 有子节点就取第一个，没有就终止
|
||
if (cur.children && cur.children.length > 0) {
|
||
cur = cur.children[0];
|
||
} else {
|
||
cur = null;
|
||
}
|
||
}
|
||
return path;
|
||
},
|
||
// 初始化表格列 配置式columns
|
||
initTableColumn() {
|
||
this.tableColumns = [
|
||
{type: 'selection',width: 55,align: 'center'},
|
||
{ title: '姓名', key: 'name', align: 'center' },
|
||
{ title: '用户名', key: 'account', align: 'center' },
|
||
{ title: '学号', key: 'stuClassNo', align: 'center', width: 140 },
|
||
{ title: '身份证', key: 'idCard', align: 'center' },
|
||
{ title: '班级', key: 'className', align: 'center' },
|
||
{ title: '状态', key: 'statusName', align: 'center', width: 90 },
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
width: 80,
|
||
render: (h, params) => {
|
||
return h('Button', {
|
||
props: { type: 'text', icon: 'md-create', size: 'large' },
|
||
on: { click: () => this.openEditStudent(params.row) }
|
||
})
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
// 树形选中切换
|
||
treeLink(treeNode) {
|
||
this.schsystemId=treeNode.schsystemId;
|
||
this.gradeId=treeNode.gradeId?treeNode.gradeId+'':'';
|
||
this.classId=treeNode.classId?treeNode.classId+'':'';
|
||
this.selectnodeid=treeNode.id;
|
||
this.pageNum = 1
|
||
this.loadData()
|
||
},
|
||
|
||
// 多选行回调
|
||
selectionChange(rows) {
|
||
this.selectedRows = rows
|
||
},
|
||
|
||
// 加载列表数据
|
||
loadData() {
|
||
const _this = this;
|
||
var item = {
|
||
schsystemId:_this.schsystemId,
|
||
gradeId:_this.gradeId,
|
||
classId:_this.classId,
|
||
keyword:_this.searchKey,
|
||
page:_this.pageNum-1,
|
||
size:_this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getstudentsearch, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.tableData = resp.data.content;
|
||
_this.total=resp.data.total;
|
||
} else {
|
||
_this.tableData = [];
|
||
}
|
||
});
|
||
},
|
||
|
||
// 搜索
|
||
handleSearch() {
|
||
this.pageNum = 1;
|
||
this.loadData();
|
||
},
|
||
|
||
// 分页切换
|
||
pageChange(p) {
|
||
this.pageNum = p
|
||
this.loadData()
|
||
},
|
||
sizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.loadData()
|
||
},
|
||
|
||
// 新增学生
|
||
openAddStudent() {
|
||
this.addModalVisible = true;
|
||
this.addForm = { grade:this.gradeId+'', classId:this.classId+'', name:'', stuClassNo:'', idCard:'', account:'', pwd:'' }
|
||
},
|
||
submitAddStudent() {
|
||
this.$refs.addForm.validate(valid => {
|
||
if (!valid) return;
|
||
// 新增
|
||
const newItem = {
|
||
classId:this.addForm.classId,
|
||
name:this.addForm.name,
|
||
stuClassNo:this.addForm.stuClassNo,
|
||
idCard:this.addForm.idCard,
|
||
account:this.addForm.account,
|
||
pwd:this.addForm.pwd,
|
||
stuId:0,
|
||
status:0
|
||
}
|
||
const url = APIConfig.BschClassSystem.studentsave;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("新增学生成功！");
|
||
this.addModalVisible = false
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
// 编辑学生
|
||
openEditStudent(row) {
|
||
this.editModalVisible = true
|
||
this.editForm = {
|
||
id: row.id,
|
||
grade:row.gradeId+'',
|
||
classId: row.classId+'',
|
||
name: row.name,
|
||
stuId: row.stuId,
|
||
idCard: row.idCard,
|
||
stuClassNo:row.stuClassNo,
|
||
account: row.account,
|
||
status:row.status
|
||
}
|
||
},
|
||
submitEditStudent() {
|
||
this.$refs.editForm.validate(valid => {
|
||
if (!valid) return;
|
||
// 编辑
|
||
const newItem = {
|
||
id: this.editForm.id,
|
||
classId:this.editForm.classId,
|
||
name:this.editForm.name,
|
||
stuClassNo:this.editForm.stuClassNo,
|
||
idCard:this.editForm.idCard,
|
||
account:this.editForm.account,
|
||
stuId:this.editForm.stuId,
|
||
status:this.editForm.status
|
||
}
|
||
const url = APIConfig.BschClassSystem.studentsave;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("编辑保存成功！");
|
||
this.editModalVisible = false
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
// 批量删除
|
||
batchDelete() {
|
||
if (!this.selectedRows.length) {
|
||
return this.$Message.warning('请先勾选学生')
|
||
}
|
||
this.$Modal.confirm({
|
||
title: '提示',
|
||
content: '确定删除选中学生？删除不可恢复',
|
||
onOk: () => {
|
||
let idlist=this.selectedRows.map(a=>a.id);
|
||
const url = APIConfig.BschClassSystem.studentdelete+idlist.join(',');
|
||
this.$api.post(url,{}, resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("删除成功！");
|
||
this.selectedRows = []
|
||
this.loadData()
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 学生导入
|
||
openImportModal() { this.importModalVisible = true },
|
||
//导入成功返回
|
||
importFile(response, file, fileList){
|
||
const _this=this;
|
||
console.log(response);
|
||
console.log(file);
|
||
_this.spinShow=false;
|
||
_this.UpParmas.fileName=file.name;
|
||
_this.UpParmas.listData=response;
|
||
if(response.code==0)
|
||
{
|
||
_this.$Message.info('导入成功！');
|
||
_this.loadData()
|
||
}else{
|
||
_this.$Message.info(response.Message);
|
||
}
|
||
},
|
||
//附件上传之前的方法
|
||
handleUpload:function(file){
|
||
const _this=this;
|
||
_this.spinShow=true;
|
||
},
|
||
MoBanExceldaochu() {
|
||
var _this = this;
|
||
if (localStorage.getItem("currentRole")) {
|
||
let currentRole = localStorage.getItem("currentRole");
|
||
let { schId, roleId, userId, childId } = JSON.parse(decodeURIComponent(currentRole));
|
||
var url=APIConfig.BschClassSystem.studentdownloadTemplate+'?schId='+schId;
|
||
window.location.href=url;
|
||
}else{
|
||
this.$Message.info('获取不了学校！');
|
||
}
|
||
},
|
||
//附件上传模态框关闭事件
|
||
UpfileModalcloseclick:function(){
|
||
this.importModalVisible=false;
|
||
this.UpParmas={
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
}
|
||
},
|
||
//按照学生学号导入
|
||
openStuIdImportModal() { this.stuIdImportModalVisible = true },
|
||
//导入成功返回
|
||
importFil2(response, file, fileList){
|
||
const _this=this;
|
||
console.log(response);
|
||
console.log(file);
|
||
_this.spinShow=false;
|
||
_this.UpParmas2.fileName=file.name;
|
||
_this.UpParmas2.listData=response;
|
||
if(response.code==0)
|
||
{
|
||
_this.$Message.info('导入成功！');
|
||
_this.loadData()
|
||
}else{
|
||
_this.$Message.info(response.Message);
|
||
}
|
||
},
|
||
//附件上传之前的方法
|
||
handleUpload2:function(file){
|
||
const _this=this;
|
||
_this.spinShow=true;
|
||
},
|
||
MoBanExceldaochu2() {
|
||
var _this = this;
|
||
if (localStorage.getItem("currentRole")) {
|
||
let currentRole = localStorage.getItem("currentRole");
|
||
let { schId, roleId, userId, childId } = JSON.parse(decodeURIComponent(currentRole));
|
||
var url=APIConfig.BschClassSystem.studentClassNoTemplate+'?schId='+schId;
|
||
window.location.href=url;
|
||
}else{
|
||
this.$Message.info('获取不了学校！');
|
||
}
|
||
},
|
||
//附件上传模态框关闭事件
|
||
UpfileModalcloseclick2:function(){
|
||
this.stuIdImportModalVisible=false;
|
||
this.UpParmas2={
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
}
|
||
},
|
||
//学生转出
|
||
batchTransferStudent(){
|
||
if (!this.selectedRows.length) return this.$Message.warning('请勾选学生');
|
||
this.transferStudentModal = true
|
||
},
|
||
//转出事件
|
||
confirmTransferStudent() {
|
||
const idlist = this.selectedRows.map(i => i.id);
|
||
const url = APIConfig.BschClassSystem.studenttransferOut+idlist.join(',');
|
||
this.$api.post(url,{}, resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("转出操作完成！");
|
||
this.selectedRows = [];
|
||
this.transferStudentModal = false;
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
// 学生调班
|
||
openMoveClassModal() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请勾选学生');
|
||
this.moveClassModalVisible = true;
|
||
this.currentSelectClass = this.selectedRows[0].className;
|
||
this.filterschclassselectlist=this.schclassselectlist.filter(item => item.id != this.classId);
|
||
this.targetClass = '';
|
||
},
|
||
submitMoveClass() {
|
||
if (!this.targetClass) return this.$Message.warning('请选择目标班级')
|
||
const newItem = {
|
||
transferClassId: this.targetClass,
|
||
stuIds:this.selectedRows.map(a=>a.id)
|
||
}
|
||
const url = APIConfig.BschClassSystem.studenttransferClass;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("调班成功！");
|
||
this.moveClassModalVisible = false
|
||
this.selectedRows = []
|
||
this.loadData()
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 学生异动
|
||
openChangeStatusModal() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请勾选学生');
|
||
this.changeStatusModalVisible = true;
|
||
this.currentStuName = this.selectedRows[0].name;
|
||
this.getstudentabnormal();
|
||
this.selectedStatus = 0;
|
||
},
|
||
submitChangeStatus() {
|
||
const newItem = {
|
||
abnormalStatus: this.selectedStatus,
|
||
stuIds:this.selectedRows.map(a=>a.id)
|
||
}
|
||
const url = APIConfig.BschClassSystem.studentsetAbnormalStatus;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success('异动状态修改完成');
|
||
this.changeStatusModalVisible = false;
|
||
this.selectedRows = [];
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.student-manage-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
gap: 16px;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
}
|
||
/* 左侧树固定高度 */
|
||
.left-tree-box {
|
||
width: 260px;
|
||
border: 1px solid #e6e6e6;
|
||
overflow-y: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
/* 右侧整体弹性布局 */
|
||
.right-main-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
/* 顶部栏 */
|
||
.top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
margin-bottom: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
.btn-left-group {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/* 表格自适应滚动容器 */
|
||
.table-scroll-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.table-scroll-wrap >>> .ivu-table {
|
||
height: 100%;
|
||
}
|
||
/* 底部栏：分页固定底部 */
|
||
.bottom-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/* 调班、异动弹窗按钮排版 */
|
||
.class-btn-wrap, .status-btn-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style>
|
||
<style>
|
||
.ivu-alert-desc{
|
||
font-size: 12px;
|
||
}
|
||
</style> |