vue + element-ui +.net + EF 列表页面，从前端到后台。。

跑不起来的，太多封装，没有写在这里。。用于参考下。。。

效果展示

html

代码展示

<div class="query"> <div> <label>创建时间：</label> <el-date-picker v-model="query.creationTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd 00:00:00"></el-date-picker> </div> <div> <label>班级：</label> <xz-student-cascader @change="handleChange"></xz-student-cascader> </div> <div> <label>关键字：</label> <el-input v-model="query.keyword" placeholder="可输入：学生姓名、学生手机号、班级、监护人" class="keyword"></el-input> <el-button type="primary" @click="tapQuery()">查询</el-button> <el-button type="primary" @click="xqShow1 = true">添加学生</el-button> <el-button type="warning" @click="addBaoXian">购买书包</el-button> </div> </div> <yz-table ref="yzTable" :height="`calc(100vh - 205px)`" apiUrl="/school/StudentManager/Getlist"> <el-table-column type="selection" width="50" fixed="left" align="center"></el-table-column> <el-table-column prop="type" label="来源" align="center"> <template slot-scope="{row}"> <el-tag v-if="row.type == 1">社会</el-tag> <el-tag type="warning" v-if="row.type == 2">学校</el-tag> </template> </el-table-column> <el-table-column prop="no" label="学生号" min-width="110px" align="center"></el-table-column> <el-table-column label="姓名" align="center" min-width="120px"> <template slot-scope="{row}"> <a class="a" style="color: #0074D9;" @click="open(row.id)">{{row.name}}</a> </template> </el-table-column> <el-table-column prop="sex" label="性别" align="center"> <template slot-scope="{row}"> <el-tag v-if="row.sex == 1">男</el-tag> <el-tag type="warning" v-if="row.sex == 2">女</el-tag> <el-tag type="info" v-if="row.sex == 0">-</el-tag> </template> </el-table-column> <el-table-column prop="age" label="年龄" align="center"></el-table-column> <el-table-column prop="idCard" label="身份证号" min-width="180px" align="center" show-overflow-tooltip></el-table-column> <el-table-column prop="phoneNumber" label="手机号码" min-width="150px" align="center"></el-table-column> <el-table-column prop="classTeacher" label="班主任姓名" min-width="130px" align="center" show-overflow-tooltip></el-table-column> <el-table-column prop="className" label="所在班级" min-width="180px" align="center"></el-table-column> <el-table-column prop="gradeName" label="年级" align="center"></el-table-column> <el-table-column prop="updateTime" label="最近更新时间" align="center" min-width="160px"></el-table-column> <el-table-column prop="creationTime" label="创建时间" align="center" min-width="160px"></el-table-column> <el-table-column label="状态" width="130" align="center"> <template slot-scope="{row}"> <el-tag type="success" v-if="row.status==1">启用</el-tag> <el-tag type="danger" v-else>禁用</el-tag> </template> </el-table-column> <el-table-column label="操作" width="190"> <template slot-scope="{row}"> <el-button @click="edit(row.id)" type="text" v-if="row.type == 2" size="small">编辑</el-button> <el-button @click="onDelete(row)" v-if="row.type == 2" type="text" size="small">删除</el-button> <el-button @click="onEnable(row)" v-if="row.type == 2" type="text" size="small">{{row.status == 1 ? '禁用':'启用'}}</el-button> <el-button type="text" size="small" @click="open(row.id)">查看</el-button> </template> </el-table-column> </yz-table>

vue

<script> import studentApi from "../../api/student.js" export default { components: { }, name: "", data() { return { options : [], query: { keyword: "", time: null }, addDialog: false, titlename: "", rows: [], entity: { }, bxConfig: [], student: [], form : {}, }; }, methods: { //删除 async onEnable(row){ this.$confirm('确定删除该学生吗？删除之后将不可找回').then(async () => { var res = await studentApi.delete([row.id]); if (res.success){ this.$message.success("操作成功"); this.tapQuery(); }else{ this.$message.error(res.msg); } }); }, //禁用，启用 async onEnable(row){ this.$confirm(row.status == 1? "确定禁用该学生吗？禁用之后将不可投保、报案等操作" : '确定启用该学生吗？').then(async () => { var res = await studentApi.enable(row.id); if (res.success){ this.$message.success("操作成功"); row.status == row.status == 1? -1 : 1; }else{ this.$message.error(res.msg); } }); }, //关键字查询 tapQuery() { this.$refs.yzTable.query({ SearchKeywords: this.query.keyword, StartTime: this.query.time ? this.query.time[0] : '', EndTime: this.query.time ? this.query.time[1] : '', classId : this.query.classId, }); } }, async mounted() { } }; </script> <style scoped> @import "../../assets/css/base.css"; </style>

Api

import axios from './http'; var apis = { /** * 获取信息 */ getInfo : function(id){ return axios.get("/school/StudentManager/GetInfo?id="+id); }, /** * 删除 */ delete : function(ids){ return axios.post("/school/StudentManager/delete",ids); }, /** * 修改与新增 */ addOrEdit : function(data){ return axios.post("/school/StudentManager/addOrEdit",data); }, /** * 启用或禁用，自动判断学生状态 */ enable : function(id){ return axios.post("/school/StudentManager/enable?id="+id); }, }; export default apis;

StudentManagerController 控制器

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using AgileObjects.AgileMapper.Extensions; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using XP.Api.SchoolController.Dto; using XP.Core.Exceptions; using XP.Core.Extensions; using XP.Core.Requests; using XP.Core.Results; using XP.EFCore; using XP.Models.Base; namespace XP.Api.SchoolController { /// <summary> /// 学生管理 /// </summary> public class StudentManagerController : XpControllerBase { /// <summary> /// 上下文 /// </summary> /// <param name="db"></param> public StudentManagerController(XPContext db) : base(db) { } /// <summary> /// 删除 /// </summary> /// <param name="ids"></param> /// <returns></returns> [HttpPost] public async Task Delete(Guid[] ids) { var list = _db.StudentInfos.Where(x => ids.Contains(x.id) && x.schoolId == this.getCurrOrgId && x.type == 2); foreach (var item in list) { item.isDeleted = true; } await _db.SaveChangesAsync(); } /// <summary> /// 启用/禁用 /// </summary> /// <returns></returns> [HttpPost] public async Task Enable(Guid id) { var list = _db.StudentInfos.Where(x => id == x.id && x.schoolId == this.getCurrOrgId && x.type == 2); foreach (var item in list) { item.status = item.status == 1 ? -1 : 1; } await _db.SaveChangesAsync(); } /// <summary> /// 列表数据 /// </summary> /// <param name="input"></param> /// <returns></returns> [HttpPost] public PageResult<object> Getlist(StudentListRp input) { var user = this.getTokenUser(); input.SearchFileds = "name,className,phoneNumber,guardianName"; var list = _db.StudentInfos.Where(x => x.schoolId == this.getCurrOrgId).WhereIf(user.roles.bitwise(new int[] { 2, 8 }), x => user.classIds.Any(c => c == x.classId)).Select(x => new { x.age, x.gradeName, x.guardianContact, x.guardianName, x.guardianRelation, x.id, x.name, x.no, x.phoneNumber, x.regionCode, x.sex, }).GetListPage(input, out var total); var result = new PageResult<object>() { Rows = list, Total = total, Limit = input.Limit, Page = input.Page, }; return result; } /// <summary> /// 查看一条数据的详情 /// </summary> /// <param name="ids"></param> /// <returns></returns> [HttpGet] public async Task<object> GetInfo(Guid id) { var entity = await _db.StudentInfos.Where(x => x.id == id && x.schoolId == this.getCurrOrgId).Select(x => new { x.age, x.gradeName, x.guardianContact, x.guardianName, x.guardianRelation, x.id, x.name, x.no, x.phoneNumber, x.regionCode, x.sex, }).FirstOrDefaultAsync(); return entity; } } /// <summary> /// 新增/修改 /// </summary> /// <param name="input"></param> /// <returns></returns> [HttpPost] public async Task AddOrEdit( StudentInfoDto input) { if (input.id ==Guid.Empty ||input.id==null) { var entity = input.Map().ToANew<StudentInfo>(); entity.id = Guid.NewGuid(); _db.StudentInfos.Add(entity); } else { var entity = _db.StudentInfos.FirstOrDefault(x => x.id == input.id); if(entity !=null) { if (entity.isLock) { throw new XpErrorException("已经锁定，不可修改"); } input.Map().Over(entity, x => x.Ignore()); } } await _db.SaveChangesAsync(); } }

EF上下文

namespace XP.EFCore { /// <summary> /// 上下文 /// </summary> public partial class XPContext : DbContext { #region 学校相关 /// <summary> /// 学校班级 /// </summary> public DbSet<SchoolClass> StudentInfo{ get; set; } /// <summary>

表名：StudentInfos，详细字段不做编写