vue批量删除验证弹出框等多选框
分类： vue 专栏： vue 标签： vue表格多选删除批量操作 vue常用功能
2023-01-31 10:30:43 884浏览
vue批量删除验证弹出框等多选框
<template>
<div class="about">
<v-header />
<v-sidebar />
<div class="content-box" >
<div class="content">
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-s-home"></i>学生管理
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
姓名：<el-input v-model="query.stuName" style="width:10rem" @keyup.native="searchF"/>
学号：<el-input v-model="query.stuNum" style="width:10rem" @keyup.native="searchF"/>
<el-button type="primary" icon="el-icon-plus" @click="importExcel">导入excel</el-button>
<el-button type="success" icon="el-icon-plus" @click="handleAdd">添加</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDeletePL">批量删除</el-button>
</div>
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="stuNum" label="学号" width="100px" fixed="left"></el-table-column>
<el-table-column prop="stuName" label="姓名" fixed="left"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="borth" label="出生日期" width="170px"></el-table-column>
<el-table-column prop="idcars" label="身份证" width="170px"></el-table-column>
<el-table-column prop="phone" label="手机号" width="120px"></el-table-column>
<el-table-column prop="collegeName" label="学院" width="170px"></el-table-column>
<el-table-column prop="major" label="专业" width="170px"></el-table-column>
<el-table-column prop="className" label="班级" width="170px"></el-table-column>
<el-table-column prop="schoolTime" label="入学时间" width="170px"></el-table-column>
<el-table-column prop="cts" label="添加时间" width="170px"></el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="160">
<template #default="scope">
<el-button type="text" icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" icon="el-icon-delete" class="red"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNo"
:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<el-dialog width="700px" :visible.sync="dialogImportExcel" >
<div slot="title" class="header-title" >
<span class="header-title-span"><i class="el-icon-edit"></i>导入Excel</span>
</div>
<el-form >
<el-form-item label="上传Excel" prop="fileName">
<el-upload
class="avatar-uploader"
drag
:before-upload="beforeUploadFile"
:show-file-list="false"
:action=FILE_ACTION
:on-success="handleFileSuccess"
accept=".xlsx,.xls"
:multiple="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>excel模板如下：</p>
<img src="../../assets/img/stu_excel.jpg" style="width: 100%">
</el-form-item>
</el-form>
</el-dialog>
<!-- 添加或者编辑弹出框 -->
<el-dialog title="添加或编辑" :visible.sync="editVisible" >
<el-form
label-width="120px"
:model="studentForm"
:rules="formRule"
ref="studentForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="学号" prop="stuNum">
<el-input v-model="studentForm.stuNum"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="stuName">
<el-input v-model="studentForm.stuName"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio v-model="studentForm.sex" label="男">男</el-radio>
<el-radio v-model="studentForm.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="生日" prop="borth">
<el-input v-model="studentForm.borth" type="date"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="studentForm.phone" ></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证" prop="idcars">
<el-input v-model="studentForm.idcars" ></el-input>
</el-form-item>
<el-form-item label="学院" prop="collegeId">
<el-select v-model="studentForm.collegeId" placeholder="请选择">
<el-option
v-for="item in collegeList"
:key="item.id"
:label="item.cname"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="专业" prop="major">
<el-input v-model="studentForm.major" ></el-input>
</el-form-item>
<el-form-item label="班级" prop="className">
<el-input v-model="studentForm.className" ></el-input>
</el-form-item>
<el-form-item label="入学时间" prop="schoolTime">
<el-input v-model="studentForm.schoolTime" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</div>
</div>
</template>
<script>
import vHeader from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import {admin_student,delete_student,add_student,admin_college,delpl_student} from '../../api';
export default {
name: "student",
components: {
vHeader,
vSidebar,
},
data() {
const isMobilePhoneNumber = (rule, str, callback) => {
let reg = /^1[34578][0-9]{9}$/;
if (reg.test(str)) {
callback();
} else {
callback(new Error("请输入正确手机号码"));
}
};
const isIdCard = (rule, str, callback) => {
let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (reg.test(str)) {
callback();
} else {
callback("请输入正确的身份证号码")
}
};
return {
role:'',
lander:{},
FILE_ACTION:'',
dialogImportExcel: false,
tableData: [],
collegeList:[],
query :{
pageNo: 1,
pageSize: 10,
stuName:'',
stuNum:'',
},
pageTotal: 0,
editVisible:false,
studentForm :{
id :'',
stuName : '',
stuNum: '',
sex: '',
phone: '',
collegeId: '',
major: '',
borth:'',
schoolTime:'',
className:'',
idcars:'',
},
formRule: {
stuName: [{required: true, message: '不能为空', trigger: 'blur'}],
stuNum: [{required: true, message: '不能为空', trigger: 'blur'}],
sex: [{required: true, message: '不能为空', trigger: 'blur'}],
phone: [
{required: true, message: '不能为空', trigger: 'blur'},
{validator: isMobilePhoneNumber, message: "格式错误", trigger: "blur"},
],
collegeId: [{required: true, message: '不能为空', trigger: 'blur'}],
major: [{required: true, message: '不能为空', trigger: 'blur'}],
borth: [{required: true, message: '不能为空', trigger: 'blur'}],
schoolTime: [{required: true, message: '不能为空', trigger: 'blur'}],
className: [{required: true, message: '不能为空', trigger: 'blur'}],
idcars: [
{required: true, message: '不能为空', trigger: 'blur'},
{validator: isIdCard, message: "格式错误", trigger: "blur"},
],
},
multipleSelection: [],
};
},
methods:{
handleDeletePL(){
if( this.multipleSelection.length==0){
this.$message.error("请选择数据");return;
}
let ids='';
for(let i=0;i< this.multipleSelection.length;i++){
ids+=this.multipleSelection[i].id+",";
}
this.$confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(() => {
delpl_student({ids:ids}).then((res) => {
if( res.data.code ==200){
this.$message({
type: 'success',
message: '已删除'
});
}else{
this.$notify({
title: '提示',
message: res.data.msg,
duration: 0
});
}
this.getPage();
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
console.log( this.multipleSelection );
},
//弹出添加操作弹框
handleAdd(){
this.studentForm={}
this.editVisible = true;
},
//弹出修改操作弹框
handleEdit (index, row) {
this.studentForm.id = row.id;
this.studentForm.stuName = row.stuName;
this.studentForm.stuNum = row.stuNum;
this.studentForm.sex = row.sex;
this.studentForm.phone = row.phone;
this.studentForm.collegeId = row.collegeId;
this.studentForm.major = row.major;
this.studentForm.borth = row.borth;
this.studentForm.schoolTime = row.schoolTime;
this.studentForm.className = row.className;
this.studentForm.idcars = row.idcars;
this.editVisible = true;
},
//保存操作
saveEdit(){
this.$refs.studentForm.validate(valid => {
//表单验证失败
if (!valid) {
//提示语
this.$message.error("请按提示填写表单");
this.editVisible = true;
return false;
} else {
add_student(this.studentForm).then((res) => {
if( res.data.code ==200){
this.editVisible = false;
if(this.studentForm.id==undefined||this.studentForm.id==null){
this.query.pageNo=1;
this.query.cname='';
}
this.getPage();
}else{
this.$message.error(res.data.msg);
}
})
}
})
},
beforeUploadFile(){
this.loading = this.$loading({
lock: true,
text: "上传中，请稍等,,,,",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
});
},
handleFileSuccess(res) {
this.loading.close();
console.log(res)
if( res.code==200){
this.dialogImportExcel=false;
this.$message({
message:'上传成功',
type: 'success'
});
this.query.pageNo=1;
this.query.stuName='';
this.query.stuNum='';
this.getPage();
}else{
this.$notify({
title: '提示',
message: res.msg,
duration: 0
});
}
},
importExcel(){
this.dialogImportExcel=true;
},
// 分页导航
handlePageChange (val) {
this.query.pageNo = val;
this.searchF();
},
//删除操作
handleDelete(index,row){
this.studentForm.id=row.id
// 二次确认删除
this.$confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(() => {
delete_student(this.studentForm).then((res) => {
if( res.data.code ==200){
this.$message({
type: 'success',
message: '已删除'
});
this.tableData.splice(index, 1);
}else{
this.$notify({
title: '提示',
message: res.data.msg,
duration: 0
});
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//获取列表数据
getPage(){
let obj=this.query;
if(this.role=='coun'){
obj.counId=this.lander.id;
}
admin_student(obj).then((res) => {
this.tableData = res.data.obj.list
this.pageTotal = res.data.obj.total//该页总共多少条记录
})
},
searchF(){
this.getPage();
},
//获取列表数据
getCollegeList(){
admin_college({}).then((res) => {
this.collegeList = res.data.obj.list
})
},
},
mounted() {
this.role=localStorage.loginRole;
this.lander = JSON.parse(localStorage.loginUser);
//去后端查询所有的公告给tableData赋值
this.getPage();
this.getCollegeList();
this.FILE_ACTION=process.env.VUE_APP_API_ROOT+'common/upfile/importStudentsExcel';
}
}
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
.header-title{border-bottom: 1px dotted #409EFF;padding-bottom: 10px; }
.header-title-span{border:1px dotted #409EFF;color:#409EFF;padding: 10px;border-radius: 10px;}
</style>
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
他的专栏
java 
vue 
springboot 
Mysql 
ssm 
小程序 
uniapp 
js和jquery 他感兴趣的技术
