vue批量删除验证弹出框等多选框
分类: vue 专栏: vue 标签: vue表格多选删除批量操作 vue常用功能
2023-01-31 10:30:43 342浏览
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)展开评论
暂无评论,快来写一下吧
展开评论
他的专栏
他感兴趣的技术