加油站OA管理系统

已于 2022-10-08 20:56:28 修改
阅读量504 收藏 3
点赞数
分类专栏： c# 文章标签： 服务器 asp.net .net
于 2022-10-08 20:51:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59534628/article/details/127214710
版权

项目搭建

1.打开vs点击文件-新建项目

1beb26027e974fdbadbe4276c6a5ccd0.png

 

点击Visual c# 选择ASP.NET Web应用程序（.NET Framework）

71a74ae435234a688a3159bb26b34e58.png

 点击MVC然后确定1561bf5608ec4eaeb5ae0823e6b80f90.png

2.连接数据库

03ef38ae8b5b4ab5bde526affa628a63.png

 右键点击添加-新建项34be4835896d4080bbcb9ee84887ccea.png

a62167144b694ae4bbca7c2b78480ec1.png

2950c338c8f84fababc27dc13f2c89fa.png

0b052945ee8e4d3b86faa7f11bc60df7.png

 ae5a72e23d024e319fd9dd2c0b689dd0.png

 02be13f50a48487083bdc0b025f463da.png

 cd3192e6626644619a76bc0692fe6312.png

 e424efaa659145ac96e56a0b7721735d.png

3.layui模块引入

首先在layui官网下载我们layui的源码 gitee官网下载地址 layui官网下载地址

将下载好的layui加入我们的项目中，一般放在conten文件下

在有要使用layui的页面引入layui.js以及layui的css文件

登录模块

逻辑流程

用户在登录界面输入用户名和密码跳转到对应的Controller的方法体中。

在方法体中接受用户提交过来的用户名密码。

用拿到的用户名和密码去数据库中匹配查找相应的对象，如果查找匹配到了说明用户名和密码都正确。

密码用户名正确我们就保存该用户session并跳转到相应的界面，如果错误那么就登录失败我们给用户返回相应页面并给予提示。

核心代码：

前端

@model OA.Models.Staff
@{
    Layout = null;
}

<!DOCTYPE html>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
	
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/layui.js"></script>
<style type="text/css">
	.div-position{
	 position:relative;
	}
	.i-position{
		position:absolute;
        left:0;
        z-index:5;
        margin:10px;
        font-size:20px;
        color:darkblue;
	}
</style>
   
</head>

<body>
    <form class="layui-form" action="~/Home/Login" method="post" style="margin:0 auto; width:400px;height:200px;margin-top:80px">
        <div style="text-align:center " class=""><h1>OA管理系统</h1></div><br />
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline  div-position" id="inputdiv">

                <i class="layui-icon layui-icon-username i-position"></i>

                <input id="yi" type="text" name="No" required lay-verify="required" placeholder="请输入标题" style="padding-left:30px; width:200px" autocomplete="off" class="layui-input ">

                @Html.ValidationMessageFor(u => u.No)

            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline  div-position" id="inputdiv">
                <i class="layui-icon layui-icon-password i-position"></i>
                <input type="password" id="yi" name="Password" required lay-verify="required" placeholder="请输入密码" style="padding-left:30px;width:200px" autocomplete="off" class="layui-input">
            @Html.ValidationMessageFor(u=>u.Password)
            </div>
            
        </div>
		<div style="width: 300px;text-align: right; height: 30px;">
			<a href="#">忘记密码？</a>
		</div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                @Html.ValidationSummary(true)
            </div>
        </div>
    </form>


   
</body>
</html>

后端代码

 //登录页面
        public ActionResult Login()
        {
            return View();
        }
        //登录
        [HttpPost]    // [HttpPost]//只允许post请求进来
        public ActionResult Login(Staff u)
        {
            if (ModelState.IsValid && MvUser(u.Password, u.No))
            {
                return Content("<script>alert('登陆成功');window.location.href='Index'</script>");
            }


            ModelState.AddModelError("", "账号或密码错误");

            return View();
        }

        private bool MvUser(string password, string No)
        {
            var u = (from p in db.Staff where p.Password == password && p.No == No select p).FirstOrDefault();
            if (u == null)
            {
                return false;
            }
            else
            {
                Session["ST"] = u;
                Session["Name"] = u.Name;
                Session["No"] = u.No;
                Session["Id"] = u.Id;
                Session["staff"] = u;
                FormsAuthentication.SetAuthCookie(No, false);
                return true;
            }

        }

个人信息查询

用户登录成功后点击个人资料查询按钮，返回查询资料的弹框，并通过ViewBag查找当前用户登录对象，将当前用户的原始信息返回给弹框页面展示

后端代码

//查看个人信息
        public ActionResult show()
        {
            var id = Session["Id"];
            ViewBag.s = db.Staff.Find(id);
            return View();
        }

前端代码

<body>
    <div style="width:350px;margin:0 auto">
        <table border="1"   cellspacing="0" >
            <tr>
                <td>主键:</td>
                <td>@ViewBag.s.Id</td>
               
            </tr>
            <tr>
                <td>员工编号:</td>
                <td>@ViewBag.s.No</td>
            </tr>
            <tr>
                <td>员工姓名</td>
                <td>@ViewBag.s.Name</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>@(ViewBag.s.Sex==true?'男':'女')</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>@ViewBag.s.BirthDay</td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td>@ViewBag.s.NativePlace</td>
            </tr>
            <tr>
                <td>现在居住地址</td>
                <td>@ViewBag.s.Address</td>
            </tr>
            <tr>
                <td>系统登录密码</td>
                <td>@ViewBag.s.Password</td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td>@ViewBag.s.Email</td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td>@ViewBag.s.Tel</td>
            </tr>
            <tr>
                <td>工作状态</td>
                <td>@ViewBag.s.Status</td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td>@ViewBag.s.CreateTime</td>
            </tr>
            <tr>
                <td>修改时间</td>
                <td>@ViewBag.s.UpdateTime</td>
            </tr>
            <tr>
                <td>职位ID</td>
                <td>@ViewBag.s.JobId</td>
            </tr>
            <tr>
                <td>所属机构ID</td>
                <td>@ViewBag.s.OrgID</td>
            </tr>
            <tr>
                <td>是否HSE管理人员组</td>
                <td>@(ViewBag.s.IsHSEGroup==true?'是':'否')</td>
            </tr>

        </table>
    </div>
</body>

弹框代码

 //个人信息查询
        function show() {
            layer.open({
                type: 2,
                content: "/Home/show",
                area: ['460px', '330px'],
                title: "个人信息"
            });
            layer.close();
        }

修改密码

在弹出的模态框中要有当前用户的个人信息，修改后将数据提交到后端

后端接收修改后的信息，并根据id查找到要修改的对象，将查找的对象字段用接收到的信息进行赋值修改

后端代码

  //修改
        public ActionResult UpdatePwds()
        {
            return View();
        }
        public ActionResult UpdatePwd(string oldPwd, string newPwd)
        {
            var result = "";
            var Id = Session["Id"];
            Staff staff = db.Staff.Find(Id);
            if (oldPwd != staff.Password)
            {
                result = "你输入都原始密码错误";
            }
            else
            {
                staff.Password = newPwd;
                int changes = db.SaveChanges();
                if (changes > 0)
                {
                    result = "密码修改成功";
                }
                else
                {
                    result = "密码修改失败";
                }

            }
            return Content(result);

        }

前端代码


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UpdatePwds</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Content/layui/layui.js"></script>
</head>
<body>
    <div id="updatePwd">
        <form class="layui-form" action="#">
            <div class="layui-form-item" style="width: 350px; margin: 10px auto;">
                <label class="layui-form-label">用户名/工号</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入用户名/工号"
                           autocomplete="off" class="layui-input" value="@Session["No"]" readonly="readonly">
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                <label class="layui-form-label">原始密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="oldPwd" required lay-verify="required" placeholder="请输入原始密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="newPwd" required lay-verify="required" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="conPwd" required lay-verify="required" placeholder="请输入确认密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto;">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="UpdatePwd" lay-filter="UpdatePwd">
                        保存
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //提交
        form.on('submit(UpdatePwd)', function (data) {
            layer.msg(JSON.stringify(data.field)); //data.field表单提交数据
            //判断二次输入的密码是否一致
            if (data.field.newPwd != data.field.conPwd) {
                layer.alert("二次输入的密码不一致");
                return false;
            }
            $.ajax({
                type: "post",
                url: "/Home/UpdatePwd",
                async: true,
                data: {
                    oldPwd: data.field.oldPwd,
                    newPwd: data.field.newPwd
                },
                success: function (data) { //data请求成功后台返回的数据
                    layer.alert(data);
                    if (data == "密码修改成功") {
                        layer.close();//关闭指定的模态框
                    }
                }
            });
            return false;
        });
    });
</script>

弹框代码

 //修改密码模态框
        function ModifyPassword() {
            index = layer.open({
                type: 2,
                content: "/Home/UpdatePwds",
                area: ['460px', '330px'],
                title: "修改密码"
            });
            layer.close();
        }

退出

点击退出按钮后，自动退出当前登录用户，回到登录界面

后端代码

 //退出
        public ActionResult Logon()
        {
            Session.Abandon();
            FormsAuthentication.SignOut();
            return RedirectToAction("Login");

        }

职位管理模块

展示所有职位

逻辑流程

用户点击职位管理，跳转相应页面。

页面中的js代码请求对应controllers的方法体并返回数据。

在对应的表中查出所有的职位信息，并将数据整理按照前端要求返回。

后端代码

 OSMSEntities db = new OSMSEntities();
        // GET: Job
        public ActionResult JobView()
        {
            return View();
        }
        /// <summary>
        /// 分页
        /// </summary>
        /// <returns></returns>
        public ActionResult Index(string name ,int page,int limit,string Code)
        {
            using (OSMSEntities db = new OSMSEntities())
            {
                //var jobList = from a in db.Job
                //           select a;
                //if (!string.IsNullOrEmpty(name) ||!string.IsNullOrEmpty(Code))//筛选
                //{
                //    jobList = jobList.Where(x => x.Name.Contains(name) && x.Code.Contains(Code));
                //}

               List<Job> jobList = db.Job.ToList();//查询所有数据
                if ((name != null && name.Trim() != "") && (Code != null && Code.Trim() != ""))
                {
                    jobList = jobList.Where(j => j.Name.Equals(name) && j.Code.Equals(Code)).ToList();
                }
                else if (name != null && name.Trim() != "")
                {
                    jobList = jobList.Where(j => j.Name.Equals(name)).ToList();
                }
                else if (Code != null && Code.Trim() != "")
                {
                    jobList = jobList.Where(j => j.Code.Equals(Code)).ToList();
                }

                //分页
                //每页10 1页 1-10条 2页 11到20条 3页 21到30条 skip跳过数据的条数，take获取数据的条数
                List<Job> pageJob = jobList.OrderBy(j => j.Id).Skip(limit * (page - 1)).Take(limit).ToList();
                
                //创建一个Json对象
                var jsonData = new
                {
                    code = 0,
                    msg = "",
                    count = jobList.Count(),//总数据条数
                    data=pageJob,//返回的数据

                };
                return Json(jsonData,JsonRequestBehavior.AllowGet);
            }
          
        }

前端代码

  <!--头部工具栏-->
    <div>
        <script type="text/html" id="barDemo">
            <div>
                职位名称：
                <input type="text" name="name" id="name" style="width:200px;" value="" required lay-verify="required" placeholder="请输入职位名称" autocomplete="off" class="layui-input layui-input-inline">
                职位代码：
                <input type="text" name="Code" id="Code" style="width:200px;" value="" required lay-verify="required" placeholder="请输入职位代码" autocomplete="off" class="layui-input layui-input-inline">
                <div class="layui-btn-group">
                    <button class="layui-btn" onclick="Search();" lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i></button>
                    <button class="layui-btn  layui-btn-normal" onclick="AddEdit();" lay-event="add">
                        <i class="layui-icon layui-icon-addition"></i>
                        添加
                    </button>
                </div>
            </div>
        </script>
 <!--表格-->
        <table id="demo" lay-filter="test"></table>
<!--单元格工具栏-->
    <script type="text/html" id="tooEventDemo">
        {{# if(d.IsDel == false){}}
        <a class="layui-btn layui-btn-xs"  lay-event="edit">编辑</a>
        {{# }}}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <!-- 支持任意的 laytpl 语法，如： -->


    </script>


<script>

    function Search() {
        //表格数据重载方法
        tableIndex.reload({
            where: {
                name: $("#name").val(),
                Code: $("#Code").val(),
            },
            //where : { Code: $("#Code").val() },
            //设定异步数据接口的额外参数
            page:
            {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

   
</script>

js代码

layui.use('table', function () {
    var table = layui.table;
    tableIndex = table.render({
        elem: '#demo'
        , height: 400
        , toolbar: '#barDemo'

        , url: '/Job/Index' //数据接口
        , page: true //开启分页
        , limit: 10
        , limits: [5, 10, 15, 20]
        , cols: [[ //表头
            { field: 'Id', title: 'ID', width: "33%", sort: true, fixed: 'left' }
            , {
                field: 'Name', title: '职位名称', width: '33%', templet: function (d) {
                    if (d.IsDel == true) {
                        return "<span style='color:red;'>" + d.Name + "</span>";
                    } else {
                        return d.Name;
                    }
                }
            }
            , { field: 'Code', title: '职位代码', width: "33%", templet: "<div><a href='#' class='layui-table-link'>{{=d.Code}}</a></div>" }
            , {
                field: 'UpdateTime', title: '修改时间', width: "33%", templet: function
                    (d) {
                    return ChangeDateFormat(d.UpdateTime);
                }
            },
            {
                field: 'CreateTime', title: '创建时间', width: "33%", templet: function
                    (d) {
                    return ChangeDateFormat(d.CreateTime);
                }
            },
            { title: '操作', width: '20%', fixed: 'right', templet: '#tooEventDemo' }
        ]]
    });


//添加
//修改
//删除






//日期格式转换
    function ChangeDateFormat(time) {
        if (time != null) {
            var date = new Date(parseInt(time.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
        return "";
    }





});

添加职位

逻辑流程

用户点击添加职位，返回弹框页面。

用户输入要添加的职位信息点击提交给后端

后端接收到用户提交的信息用接收到的用户信息创建生成对应表的对象

将生成的对象进行添加

添加完成后进行保存操作

后端代码

 //添加
        public ActionResult AddJob()
        {
            Job job = new Job();
            job.Id = Guid.NewGuid();
            job.Name = Request["Name"];
            job.Code = Request["Code"];
            job.CreateTime = DateTime.Now;
            job.IsDel = false;
            db.Job.Add(job);
            if (db.SaveChanges()>0)
            {
                return Content("<script>alert('添加成功!');window.location.href='JobView';</script>");
            }
            else
            {
                return Content("添加失败");
            }
        }

前端代码

 <!--添加-->
    <div style="display:none" id="AddJob">

        <form class="layui-form" action="/Job/AddJob" method="post">
            <div>
                <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                    <label class="layui-form-label">职位名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                    <label class="layui-form-label">职位代码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Code" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="width: 350px; margin: 10px auto;">
                    <div class="layui-input-block">

                        <button type="submit" class="layui-btn" onclick="AddEdit()" lay-submit="UpdatePwd" lay-filter="UpdatePwd">
                            保存
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

弹出框代码

<script>
        //添加
        function AddEdit() {
            layer.open({
                title: '添加职位',
                type: 1,
                area: ['450px', '300px'],
                content: $("#AddJob").html()

            });
        }
      
       
       
    </script>

js代码

 //触发头部工具事件

    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'AddJob':
                layer.msg('添加');
                //添加
                layur.use('form', function (data) {
                    var form = layui.form;
                    $.ajax({
                        type: "post",
                        url: "/Job/AddJob",
                        async: true,
                        data: {
                            Name: data.field.Name,
                            Code: data.field.Code
                        },
                        success: function (data) { //data请求成功后台返回的数据
                            layer.alert(data);
                            if (data == "添加成功") {
                                layer.close();//关闭指定的模态框
                            }
                        }
                    });
                });

                break;


        };
    });

修改职位信息

逻辑流程

用户点击要修改的职位修改按钮，返回修改职位的弹框，并通过id查找当前用户要修改的职位对象，将当前职位原始信息返回给弹框页面展示

在展示原始职位信息的表单弹框页进行修改并将修改后的信息提交到后端。

后端接收修改后的信息，并根据id查找到要修改的对象，将查找的对象字段用接收到的信息进行赋值修改。

保存修改操作

 

后端代码

 //编辑
        public ActionResult Detail(Guid jobId)
        {
            Job job = db.Job.Find(jobId);
            return View(job);
        }
        [HttpPost]
        public ActionResult UpdateJob(Job job)
        {
            job保存的是页面传过来的数据
            Job job1 = db.Job.Find(job.Id);//通过id查询需要修改的数据
            job1.Name = job.Name;//重新给职位赋值
            job1.Code = job.Code;
            job1.UpdateTime = job.UpdateTime;
            if (db.SaveChanges()>0)
            {
                return Content("success");
            }
            else
            {
                return Content("error");
            }


        }

前端代码


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Detail</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Content/layui/layui.js"></script>
</head>
<body>
    <div id="updatePwd">
        <form class="layui-form" action="#">
            <div class="layui-form-item" style="width: 350px; margin: 10px auto;">
                <label class="layui-form-label">职位名称：</label>
                <div class="layui-input-inline">
                    <input type="text"  name="Id" value="@Model.Id" style="display:none" />
                    <input type="text" name="Name" required lay-verify="required" 
                           autocomplete="off" class="layui-input" value="@Model.Name" >
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto; ">
                <label class="layui-form-label">职位编号：</label>
                <div class="layui-input-inline">
                    <input type="password" name="Code" required lay-verify="required" value="@Model.Code"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="width: 350px; margin: 10px auto;">
                <div class="layui-input-block">
                    <button  class="layui-btn" lay-submit  lay-filter="UpdatePwd">
                        保存
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(UpdatePwd)', function (data) {
            $.ajax({
                type: "post",
                data: data.field,//将表单数据发送给后台
                url: "/Job/UpdateJob",
                asycn: true,
                success: function (data) {
                    if (data == 'success') {//修改成功
                        //关闭模态框，刷新页面数据
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        
                    }
                }

            });
            return false;
        });
    });
</script>

<script src="~/Content/Job.js"></script>

js代码

 //触发单元格事件
    table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if (layEvent === 'detail') { //查看
            //do somehing
        } else if (layEvent === 'del') { //删除
            layer.confirm('确定删除吗？' + data.Name, function (Index) {
                obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存

                //写后台删除
                $.ajax({
                    type: "get",
                    url: "/Job/Del?jobId=" + data.Id,
                    async: true,
                    success: function (data) {
                        if (data == 'success') {
                            layer.alert("删除成功！");
                            table.reloadData('demo', {//id是table的Id
                                scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                            });

                        }
                    }
                });


            });

        }
        else if (layEvent === 'edit') { //编辑
               index= layer.open({
                    title: '修改职位',
                    type: 2,
                   area: ['450px', '300px'],
                   content: '/Job/Detail?jobId=' + data.Id,
                    end: function () {
                        table.reloadData('demo', {//id是table的Id
                            scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                        });
                    }
                });
            
        }
      
    });

删除职位

逻辑流程

用户点击要删除的职位按钮，弹出确认要删除的弹框

如果用户点击确认那么就将要删除的职位id发送给后端，如果点击取消关闭弹框即可

后端接收到后在数据中去相应的表中查找要删除的对象

找到要删除的对象后用remove的方法将对象删除

保存删除操作，重定向到原路由

后端代码

 //删除
        public ActionResult Del(Guid jobId)
        {
            using (OSMSEntities db = new OSMSEntities())
            {
                Job job = db.Job.Find(jobId);
                db.Job.Remove(job);
                if (db.SaveChanges()>0)
                {
                    return Content("success");
                }
                else
                {
                    return Content("erro");
                }
            }
        }

js代码

 table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if (layEvent === 'detail') { //查看
            //do somehing
        } else if (layEvent === 'del') { //删除
            layer.confirm('确定删除吗？' + data.Name, function (Index) {
                obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存

                //写后台删除
                $.ajax({
                    type: "get",
                    url: "/Job/Del?jobId=" + data.Id,
                    async: true,
                    success: function (data) {
                        if (data == 'success') {
                            layer.alert("删除成功！");
                            table.reloadData('demo', {//id是table的Id
                                scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                            });

                        }
                    }
                });


            });

        }
//编辑
//日期转换


});

 

 

 

飞鹰@四海
关注
专栏目录
加油站管理系统
MGY13716966788的专栏
08-25 2598
加油站管理系统   方案介绍   伴随着社会的发展规模的不断扩大，对石油产品的需求的迅速增加，石油物流的工作量越来越大，对物流的要求也越高，如何有序的、高效的进行物流管理成为目前所面临的问题。同时如何防止在运输过程中出现盗油的现象，成为管理的一个难题。另外，由于加油站属于石油石化系统，是易燃易爆有毒的危险行业，因此要求巡检产品必须是通过石化防爆认证的；巡检产品应该是感应式的，这样才能有效的
【开源】加油站管理系统 JAVA+Vue.js+SpringBoot+MySQL
最新发布
as230627的博客
05-27 1432
Vue.js+SpringBoot前后端分离新手入门项目《加油站管理系统》，包括论坛模块、加油站模块、汽油模块、加油模块和部门角色菜单模块
加油站管理系统（gasSystem）
09-06
属于桌面应用型软件，运用java核心知识结合GUI完成，功能分类清晰，适合Java初学者的学习探究，也可以在此基础上进行快速的二次开发
VC加油站管理系统（源码）
05-04
VC加油站管理系统（源码）
加油站管理系统|基于Springboot+Vue实现加油站加油管理系统
znzbs的博客
08-26 2449
本项目使用Springboot+Vue进行前后端分离开发实现，完成了一个加油站加油的管理系统平台。系统完全模拟了真实的加油站管理系统的业务模式，实现了前端用户在线注册登录，在线充值，选择加油枪口进行模拟加油，同时用户也可以申请成为会员，享受加油站加油的优惠政策，在用户的个人中心处可以查看和修改个人的信息，在线充值和查看充值记录、加油记录等。
OA系统+手机版源码t源代码
12-06
本程序结合了OA办公系统+HR人力资源管理系统+CRM客户关系管理系统集合而成。我们把程序设计信息化应用分为三个方面的内容：通用办公应用、业务管理和决策支持。采用现代最新技术，建立一种新概念的、开放的现代管理...
仿通达OA系统ERPASP.NET.rar
12-17
开发人员既可全面了解OA系统所涉及的业务，也能对本身技术提升有所助益，同时减轻了团队开发压力，节约了开发成本； 4、采用B/S架构，用户通过浏览器即能进行联网访问办公。 二、功能介绍 1、个人办公 a、...
VS2010开发的图形化工作流OA
11-02
车辆管理 车辆信息、使用、维修、保险、加油等 图书管理 图书信息、借阅、归还等 档案卷库 各类档案分卷库保存、销毁 考试管理 在线考试、可分题库、题目类型、试卷制定、自动评分等 学习管理 在线学习、学习心得、...
通达OA用户操作手册（二）
weixin_30740295的博客
12-13 6625
4.3 业务流程平台 业务流程平台的详细使用介绍，详见《Office Anywhere2017 业务流程平台使用详解》，此处不再赘言。 4.4 工作流 工作流的详细使用介绍见《Office Anywhere2017 工作流使用详解》。 4.4.1 新建工作 图 4.4-1 进入【工作流】-【新建工作】，将鼠标放在需要新建的流程后面即可看到【快速新建】和【新建向导】两个按钮，单击进入...
加油站管理系统有哪些？
nakesofr的博客
10-06 590
且纳客网络还荣获“双软认证企业”和“国家级高新技术企业”双重技术认证，是一家专业的软件开发公司。1、 是否能管理会员信息，会员的数据是否可以进行详细按照等级进行划分，加油站管理者如何打开系统可以一目了然知道哪些客户应该如何进行客勤关系的维护。随着油站数量每日都在与日递增，加油站管理系统的数量也是同比增加，对比市面上那么多的加油站管理系统，如何找到选择一款合适自己的加油站管理系统呢？2、 是否可以进行油品，油枪详细管理，系统是否可以针对每个不同营销的油枪进行管理，可以让每个不同油品在消费的时候进行特定打折。
【毕业设计】基于STM32的自动加油站加油系统 -物联网 单片机 嵌入式
m0_71572576的博客
08-06 1684
🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题目缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享优质毕业设计项目，今天要分享的是🚩基于STM32的自动加油站加油系统🥇学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：4分创新点：4分🧿自主视觉无人加油站物联网系统，可自动识别油箱口，移动油管加油。...
加油站管理系统前五排行榜
nakesofr的博客
10-07 2467
国内加油站管理系统品牌繁多，其中SaaS架构开发的收银系统就不下于30个。下面我们就市场上比较知名的加油站管理进行汇总对比，为大家汇总了5款口碑不错的加油站管理系统。
[附源码]Python计算机毕业设计SSM加油站管理信息系统（程序+LW)
Python、JAVA毕设程序源码
12-07 416
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;
计算机毕设（附源码）JAVA-SSM加油站管理信息系统
计算机程序_设计
10-31 715
销售信息管理：在销售信息管理页面，可以对订单编号、石油名称、石油类型、油价、升量、订单金额、订单时间、用户账号、用户姓名、是否支付等内容，进行详情、修改、删除等操作，如下图。销售信息管理，在销售信息管理页面可以查看订单编号、石油名称、石油类型、油价、升量、订单金额、订单时间、用户账号、用户姓名、是否支付等信息，进行详情操作，如图4-6所示。石油信息管理：在石油信息管理页面，可以查看石油名称、石油类型、油价、升量等内容，并进行详情、销售、入库、修改、删除等操作，如下图。查看源码目录中是否包含pom.xml；
基于JAVAWEB的石油物资管理系统
m0_73268882的博客
12-18 163
模块划分：公告类型、公告信息、仓库信息、物资类型、物资信息、供应商信息、采购信息、物资调拨、物资申请、物资报废。3、管理供应商信息，对物资进行采购。2、仓库信息、物资类型、物资信息。1、管理公告类型、公告信息。5、审核物资使用申请。
开源OA：手把手教你搭建OA办公系统（2）建立用户与组织关系
liyi_hz2008的博客
04-20 824
总体概述： 本篇讲述初次使用开源OA项目——O2OA如何创建OA办公系统中的组织架构、人员信息，组织职务信息，群组信息等内容。 组织架构：一个组织整体的结构。 群组管理：具有相同特征的人群的集合。 角色管理：主要对OA功能模块权限进行配置管理；OA系统内置的一些模块角色。 个人管理：OA办公系统下个人帐号的管理。 人员导入：通过xsl文件对组织管理中的数据包括组织架构、个人信息、群组信息等，进行导出导入操作，实现OA系统软件中人员数据的备份和人员数据快速初始化。 一、如何创建OA办公系统中
JAVA 油站管理系统_加油站管理系统
weixin_28853079的博客
02-24 1052
【泛普软件加油站综合管理系统基本介绍】加油站管理系统(综合管理版)是一款综合型的加油站管理软件，包括油品管理，商品管理，其它管理，报表管理，基本信息管理，系统管理等子模块.其图形化操作、导航式界面依然延续着系列软件的传统特色，为众多用户提供了直观而快捷的操作模式。软件界面设计简洁、美观、人性化的操作流程，使普通用户不需培训也能很快掌握软件操作使用方法。对计算机配置要求低，是加油站进行信息化管理的强...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞鹰@四海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值