@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/layui/layui.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<style>
body {
padding: 10px 20px 20px 20px;
width: 97%
}
.but {
margin-top: -5px
}
.editInfo {
display: none;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field">
<legend>
<span class="layui-breadcrumb">
<a href="">基本信息管理</a>
<a href="/UserManagem/Index" >员工管理</a>
</span>
</legend>
<div class="layui-field-box">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="width: 60px;">员工账号</label>
<div class="layui-input-block">
<input type="text" name="code" id="code" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 60px;">员工姓名</label>
<div class="layui-input-inline">
<input type="text" name="name" id="name" autocomplete="off" class="layui-input">
</div>
</div>
<button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button>
<button type="button" class="layui-btn layui-bg-blue but" onclick="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-export"></i>导出</button>
<button type="button" class="layui-btn but" id="searchButton"><i class="layui-icon layui-icon-upload"></i>导入文件</button>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field">
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del"><i class="layui-icon layui-icon-clear"></i>删除</a>
</div>
<!-- 在视图中添加以下隐藏表单 -->
<div class="editInfo" style="padding:15px;">
<form class="layui-form" id="editForm">
<input type="hidden" name="ID" id="ID">
<div class="layui-form-item">
<label class="layui-form-label">员工账号</label>
<div class="layui-input-block">
<input type="text" name="UserCode" required lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">员工姓名</label>
<div class="layui-input-block">
<input type="text" name="UserName" required lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="Sex" value="true" title="男" checked>
<input type="radio" name="Sex" value="false" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input type="text" name="BirthDay" id="BirthDay" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="Email" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="Tel" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" name="Address" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="Status" lay-skin="switch" lay-text="离职|在职">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</script>
</fieldset>
<script>
var tableIns;
var form;
var isEdit;
layui.use(['table', 'form',], function () {
var table = layui.table;
form = layui.form; // 修正:移除重复的var声明
// 创建渲染实例
tableIns = table.render({
elem: '#test',
url: '/UserManagem/GetList',
page: true,
cols: [[
{ type: 'checkbox', width: '5%', title: '' },
{ type: 'numbers', width: '5%', title: '序号' },
{ field: 'UserCode', width: '8%', title: '员工账号' },
{ field: 'UserName', width: '8%', title: '员工姓名' },
{
field: 'Sex', width: '8%', title: '性别', templet: function (d) {
return d.Sex ? "男" : "女"; // 修正:使用大写的Sex
}
},
{
field: 'BirthDay', width: '8%', title: '出生日期', templet: function (d) {
return convertJsonDate(d.BirthDay);
}
},
{
field: 'BirthDay', width: '8%', title: '年龄', templet: function (d) {
return calculateAge(d.BirthDay);
}
},
{
field: 'Status', width: '8%', title: '是否离职', templet: function (d) {
return d.Status ? "离职" : "在职";
}
},
{ field: 'Email', width: '8%', title: '邮箱' },
{ field: 'Tel', width: '8%', title: '电话' },
{
field: 'CreateDate', width: '8%', title: '创建时间', templet: function (d) {
return convertJsonDate(d.CreateDate);
}
},
{ field: 'Address', width: '8%', title: '员工住址' },
{ title: '操作', width: '10.5%', templet: '#toolDemo' }
]],
done: function (res, curr, count) {
// 数据渲染完成后的回调
if (res.code !== 0) { // 假设0是成功状态码
layer.msg('数据加载失败: ' + res.msg, { icon: 5 });
}
},
error: function () {
// 请求错误的回调
layer.msg('网络请求错误,请检查接口', { icon: 5 });
}
});
//编辑,删除
table.on('tool(test)', function (obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
var field = obj.field; // 得到字段
var value = obj.value; // 得到修改后的值
var data = obj.data; // 得到所在行所有键值
// console.log(obj)
if (obj.event === 'edit') {
//编辑
//修改编辑职位
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: '编辑职位',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: $(".editInfo").html()
});
//赋值
form.val('demo-val-filter', {
"jobname": data.JobName,
"jobcode": data.JobCode,
"ID": data.ID
});
} else {
layer.confirm('真的删除员工 [' + data.UserCode + '] 么', function (index) {
obj.del(); // 删除对应行(tr)的DOM结构
layer.close(index);
// 向服务端发送删除指令
$.ajax({
url: '/UserManagem/DelInfo',
type: 'post',
data: { id: data.ID },
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 6, time: 1500 }, function () {
Search();
})
} else {
layer.msg(res.msg, { icon: 5, time: 1500 })
}
}
})
});
}
});
});
// 处理日期格式函数
function convertJsonDate(jsonDate) {
if (!jsonDate) return '';
try {
// 提取时间戳
const timestamp = parseInt(jsonDate.match(/\d+/)[0]);
// 创建 Date 对象
const date = new Date(timestamp);
// 获取年、月、日
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
// 返回格式化后的日期
return `${year}-${month}-${day}`;
} catch (e) {
console.error('日期格式化错误:', e);
return jsonDate;
}
}
//表单提交事件,新增和编辑
form.on('submit(demo1)', function (data) {
var field = data.field; // 获取表单字段值
$.ajax({
url: '/UserManagem/Add',
type: 'post',
data: field,
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 6, time: 3000 }, function () {
layer.closeAll(); // 关闭所有类型的层
Search();
});
} else {
layer.msg(res.msg, { icon: 5, time: 2000 });
}
}
})
})
//重载,模糊查询
function Search() {
var nameVal = $('input[name="name"]').val().trim();
var codeVal = $('input[name="code"]').val().trim();
// 完整重载 - 所有属性属性(options)均可参与到重载中
tableIns.reload({
where: { // 传递数据异步请求时携带的字段
name: nameVal,
code: codeVal
},
height: 500 // 重设高度
});
}
// 处理日期格式函数
function convertJsonDate(jsonDate) {
// 提取时间戳
const timestamp = parseInt(jsonDate.match(/\d+/)[0]);
// 创建 Date 对象
const date = new Date(timestamp);
// 获取年、月、日
const year = date.getUTCFullYear();
const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
const day = date.getUTCDate().toString().padStart(2, '0');
// 返回格式化后的日期
return `${year}-${month}-${day}`;
}
//新增职位
function Add() {
// 在此处输入 layer 的任意代码
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: '新建职位',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: $(".editInfo").html()
});
}
function calculateAge(jsonBirthDate) {
if (!jsonBirthDate) return '';
try {
// 先转换为日期格式
const birthDate = convertJsonDateToDate(jsonBirthDate);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
} catch (e) {
console.error('年龄计算错误:', e);
return '';
}
}
// 辅助函数:将JSON日期转换为Date对象
function convertJsonDateToDate(jsonDate) {
const timestamp = parseInt(jsonDate.match(/\d+/)[0]);
return new Date(timestamp);
}
</script>
</body>
</html>
实现男女动态选择
最新发布