layui 笔记
大约 13 分钟
layui 笔记
只是个人笔记，有需要的小伙伴可以看一下哦！
前段扩展包
【xm-select】layui下拉多选: xm-select
Layui单页面多个时间选择异常
<input type="text" name="addr" value="" class="layui-input" placeholder="输入上课地点" autocomplete="off" lay-verify="required" lay-reqText="时间不能为空" id="sk_time">
laydate.render({
elem: '#sk_time' //指定元素
,type: 'datetime'
,range: true
,trigger:'click'
});
layui加载扩展方式
layui.extend({'fileManager': 'pathTo/fileManager'});
layui-table操作
第二页删除
done: function(res, curr, count) {
if (res.data.length == 0) {
if(curr!=1) {
table.reload('Bargain_list', {
page: {
curr: curr - 1 //重新从第 1 页开始
}
});
}
}
}
点击事件
<table
id="Event-activity-list"
lay-filter="Event-activity-list"
></table>
<script type="text/html" id="table-event-list">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
</script>
- lay-filter : 过滤字段
- lay-event : 触发事件
加载数据+搜索
table.render({
elem: '#recycle-event-manage'
,url: "ApiUrl" //模拟接口
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'id', width: 80, title: 'ID', sort: true}
,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
]]
,page: true
,limit: 15
,height: 'full-220' //不加此字段，表单不会显示出来
,text: {
none:'数据为空消息提示！'
}
,id: 'dataTable' //重载表单的id属性
,var $ = layui.$, active = {
reload: function(){
var keywords = $('#keywords')
,datebt=$('#datebt')
//执行重载
table.reload('dataTable', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
keywords: keywords.val(),
datebt:datebt.val(),
}
}, 'data');
//重载后再次加载add事件del事件
$('#keywords').val(keywords.val());
$('#datebt').val(datebt.val());
//日期范围
laydate.render({
elem: '#datebt'
,range: true
});
}
};
$('.search-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
表格内容监听事件
// <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
// filter: 监听表格的lay-filter
table.on('tool(filter)'),function(obj){
//当前表单行的所有数据
var data = obj.data;
switch(.obj.event){
case "lay-event": // lay-event="" 表单这个字段的值
// do something
layer.open({
type: 2
,title: '编辑用户'
,content: "editEvent?id="+data.id
,maxmin: true
,area: ['650px', '800px']
,btn: ['确定', '取消']
,yes: function(index, layero){
var iframeWindow = window['layui-layer-iframe'+ index]
,submitID = 'Event-edit-submit' //弹出层提交表单的 lay-filter 值
,submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
var field = data.field; //获取提交的字段
//提交 Ajax 成功后，静态更新表格中的数据
//$.ajax({});
axios.post('/admin/event/editEvent',field).then(res =>{
console.log(res); //注释
if (res.data.code == 0){
layer.msg(res.data.msg);
table.reload('Event-activity-list'); //表单数据刷新
layer.close(index); //关闭弹层
}
});
});
submit.trigger('click');
}
//成功打开弹窗之后的回调
,success: function(layero, index){
// console.log(layero)
}
});
return false;//一定要写 return 不然会接续执行下面的方法
}
};
刷新当前表格
table.reload('#bm-table-list'); //表单数据刷新
- 选择器是 table节点的 id
打开弹窗
layer.open({
type: 2,
title: '关联表单字段',
area: ['600px', '570px'],
content: ['{{url("admin/form/ckbm/add")}}?form_type=1', 'yes'],
skin: 'layui-layer-molv',
btn: ['添加', '取消'],
btnAlign: 'c',
yes: function(index, layero){
var submit = layero.find('iframe').contents().find("#submit");// #subBtn为页面层提交按钮ID
submit.click();// 触发提交监听
return false;
},
btn2:function (index) {
layer.close(index);
}
});
图片弹窗
$("#form-ewm").click(function (){
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: `<img src="orangbus.png"></img>`
});
});
重载表单数据
table.reload("dataTable"); //dataTable 是由表单渲染里面的id属性设置的
关闭弹窗表格重载
parent.layui.table.reload('dataTable',{page:{curr:1}});
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
跳转新tab
top.layui.index.openTabsPage("{:url('StudentYear/index')}?type=5", "新tab名字");
表格快捷编辑
table.on('edit(dataTable)', function(obj){ //注：edit是固定事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
setField(obj.data.id, obj.field, obj.value);
});
// 该方法放在layui初始化之外
function setField(id, dataname, datavalue) {
// 加载层
var loading = layer.msg('处理中，请稍后...', {
icon: 16,
shade: 0.2
});
var $ = layui.jquery;
$.ajax({
url: "{{ route('setField') }}",
type: 'POST',
dataType: 'json',
data: {
id : id,
dataname : dataname,
datavalue : datavalue,
_token: '{{ @csrf_token() }}'
},
success: function (data) {
layer.close(loading);
if (data.code == 1) {
layer.msg(data.msg, {
time: 1500
},function(){
window.location.reload();
});
} else {
layer.alert(data.msg, {
icon: 2
},function(){
window.location.reload();
});
}
}
});
}
表格状态快捷修改
<script type="text/html" id="userStatus">
<input type="checkbox" lay-filter="ckState" value="@{{d.id}}" lay-skin="switch"
lay-text="启用|禁止" @{{d.status==0?'checked':''}}/>
</script>
// 监听状态开关切换事件
form.on('switch(ckState)', function (data) {
var checked = data.elem.checked ? 0 : 1;
var id = data.value;
setStatus(id, checked);
});
// 该方法放在layui初始化之外
// 设置显示状态
function setStatus(id, status) {
// 加载层
var loading = layer.msg('处理中，请稍后...', {
icon: 16,
shade: 0.2
});
var $ = layui.jquery;
$.ajax({
url: "{:url('admin/form/data/setStatus')}",
type: 'POST',
dataType: 'json',
data: {
id : id,
status : status,
_token: '{{ @csrf_token() }}'
},
success: function (data) {
layer.close(loading);
if (data.code == 1) {
layer.msg(data.msg, {
time: 1500
},function(){
window.location.reload();
});
} else {
layer.alert(data.msg, {
icon: 2
},function(){
window.location.reload();
});
}
}
});
}
自定义表单验证
/* 自定义验证规则 */
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,content: function(value){
layedit.sync(editIndex);
}
});
按钮事件触发
<button class="layui-btn" id="refresh-bm-table" lay-filter="refresh-bm-table" data-type="refreshBmTable">我是一个普通的点击按钮</button>
- data-type : 触发事件名
var active = {
refreshBmTable: function () {
layer.msg("refresh");
table.reload('#bm-table-list'); //表单数据刷新
}
}
//当前页面按钮事件
$('.layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
打开新标签
top.layui.index.openTabsPage('{:url(add)}?id='+id,title)
弹窗表单
layer.open({
type: 2
,title: '编辑活动'
,content: "editEvent?id="+data.id
,maxmin: true
,area: ['900px', '800px']
,btn: ['确定修改', '取消']
,yes: function(index, layero){
var iframeWindow = window['layui-layer-iframe'+ index]
,submitID = 'Event-edit-submit'
,submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
var field = data.field; //获取提交的字段
//提交 Ajax 成功后，静态更新表格中的数据
//$.ajax({});
$.ajax({
type: "post",
url: 'editEvent',
data: field,
dateType: 'JSON',
success:function (res) {
if (res.code == 0){
layer.msg(res.msg);
table.reload('Event-activity-list'); //数据刷新
layer.close(index); //关闭弹层
}
},
error:function () {
layer.alert("修改失败，可咨询技术服务！");
}
});
});
submit.trigger('click');
}
//成功打开弹窗之后的回调
,success: function(layero, index){
// console.log(layero,"123456")
}
});
// =================
layer.open({
type: 2,
title: '编辑-' + data.name,
area: ['600px', '700px'],
content: ['{:url("edit")}?id=' + data.id, data.name],
skin: 'layui-layer-molv',
btn: ['确认', '取消'],
btnAlign: 'c',
yes: function (index, layero) {
var submit = layero.find('iframe').contents().find("#submit");// #subBtn为页面层提交按钮ID
submit.click();// 触发提交监听
return false;
},
btn2: function (index, layero) {
layer.close(index);
}
});
关闭当前标签
var topLayui = parent === self ? layui : top.layui;
topLayui.admin.events.closeThisTabs();
关闭当前标签并刷新
Users::where("id",$uid)->inc("money2",(int)$amount)->update();
layui点击事件取值
date-type="add" data-id="value"
var id = $(this).data('id');
Layui图片上传
<div class="layui-form-item">
<label class="layui-form-label">专题图片：</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm" id="pic-upload"><i class="layui-icon"></i>上传图片</button>
<a class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-hide" id="pic-clear">ဆ清除</a>
<div class="layui-upload-list">
<img class="layui-upload layui-hide" id="uploadView" src="" style="width: 200px;height: 200px;">
<input type="hidden" name="pic" id="pic" value="">
<button class="layui-btn layui-btn-sm layui-btn-danger layui-hide" id="pic-reload-upload">重新上传</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">成功图片：</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm" id="pic-upload-success"><i class="layui-icon"></i>上传图片</button>
<a class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-hide" id="pic-clear-success">ဆ清除</a>
<div class="layui-upload-list">
<img class="layui-upload layui-hide" id="uploadView-success" src="" style="width: 200px;height: 200px;">
<input type="hidden" name="success_pic" id="pic-success" value="">
<button class="layui-btn layui-btn-sm layui-btn-danger layui-hide" id="pic-reload-upload-success">重新上传</button>
</div>
</div>
</div>
var uploadInst = upload.render({
elem: '#pic-upload'
,url: '{{ route("upload") }}' //改成您自己的上传接口
,headers: {}
,accept: 'images' //images（图片）、file（所有文件）、video（视频）、audio（音频）
,size: 0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
,done: function(res){
if (res.code !== 200) return layer.msg(res.msg ? res.msg : '上传失败');
layer.msg(res.msg ? res.msg : '上传成功');
//添加图片地址
let pic = $("#pic");//图片地址
let picView= $("#uploadView"); //显示图片
let picClear = $("#pic-clear"); //显示清除按钮
pic.attr("value",res.imageUrl);
picView.removeClass('layui-hide').attr('src', res.imageUrl);
//显示清除按钮
picClear.removeClass("layui-hide");
picView.css("display",'block')
}
,error: function(){
$(".pic-reload-upload").show();
}
});
//重新上传
$(".pic-reload-upload").click(function (){
uploadInst.upload();
$(".pic-reload-upload").hide();
return false;
});
// 清除已上传图片
$("#pic-clear").click(function () {
$(this).hide();
$("#uploadView").attr("src","").hide();
$("#pic").attr("value","");
});
layui放大图片
function bigImage(url) {
//图片放大
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: "<img src='"+url+"' style='width:400px ;height:auto'>"
});
}
最后一页批量删除
done: function(res, curr, count) {
if (res.data.length == 0) {
if(curr!=1) {
table.reload('kuaiji-list', {
page: {
curr: curr - 1 //重新从第 1 页开始
}
});
}
}
}
按钮时间监听
#html
lay-filter="type"
form.on('radio(type)',function (data) {
switch (data.value) {
case '1':
$("input[name='content']").attr('value',{$data.jifen});
break;
case '2':
$("input[name='content']").attr('value',{$data.money});
break;
case '2':
$("input[name='content']").attr('value',{$data.gift});
break;
}
});
layui - select二级联动
<div class="layui-form-item">
<label class="layui-form-label">二级联动：</label>
<div class="layui-input-inline">
<select name="level1" lay-filter="level1" id="level1" lay-search>
<option value="">一级</option>
</select>
</div>
<div class="layui-input-inline">
<select name="level2" lay-filter="level2" id="level2" lay-search>
<option value="">二级</option>
</select>
</div>
</div>
form.on('select(level1)',function (data) {
console.log(data.value)
let selectData = {
type: 1,
val: data.value
};
console.log(selectData);
$.ajax({
type: "post",
url: '{:url("query")}',
data: selectData,
dateType: 'JSON',
success:function (res) {
if (res.status == 0){
let optionVal = "";
$.each(res.data,function (i,item) {
optionVal += `<option value="${item.name}">${item.name}</option>`
$("#level2").html(optionVal);
form.render('select');
});
}
},
error:function () {
layer.alert("false");
}
});
});
Layui 默认时间戳
首先把戳转化为日期格式在进行赋值就可以
$data["kk_time"] = date('Y-m-d H:i:s', (int)$data['kk_time']); // 2020-06-19 11:28:40
laydate.render({
elem: '#kk-time'
,type: 'datetime'
,trigger:'click'
,value: new Date('{:isset($data.kk_time)?$data.kk_time:""}')
});
快捷修改
/**
* 名单快捷修改
*/
public function setField(Request $request)
{
// 获取用户提交的数据
$data = $request->param();
// 取出数据
$id = $data['id'];
$fieldname = $data['dataname'];
$fieldvalue = $data['datavalue'];
try {
Cate::where('id', $id)
->data([$fieldname=>$fieldvalue])
->update();
} catch (\Exception $e) {
return error($e->getMessage());
}
return success('修改成功');
}
table.on('edit(dataTable)', function (obj) { //注：edit是固定事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
setField(obj.data.id, obj.field, obj.value);
});
function setField(id, dataname, datavalue) {
// 加载层
var loading = layer.msg('处理中，请稍后...', {
icon: 16,
shade: 0.2
});
var $ = layui.jquery;
$.ajax({
url: "{:url('setField')}",
type: 'POST',
dataType: 'json',
data: {
id : id,
dataname : dataname,
datavalue : datavalue
},
success: function (res) {
layer.close(loading);
let {code,msg} = res;
if (code == 1) {
layer.msg(msg, {
time: 1500
},function(){
// window.location.reload();
});
} else {
layer.alert(msg, {
icon: 2
},function(){
window.location.reload();
});
}
}
});
}
layui获取select下面的option自定义值
<select name="cate_id" id="cate_id" lay-filter="cate_id">
<option value="">请选择文章分类</option>
<option value="" article-type="1">111</option>
<option value="" article-type="2">222</option>
</select>
// 获取：article-type的值
form.on('select(cate_id)', function (obj) {
let type = $(obj.elem).find("option:selected").attr("article-type");
console.log(type);
})
layui表格模板
{extend name="Layout/Base"}
{block name="content"}
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<!--表格-->
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
<!--表头-->
<script type="text/html" id="tableHeader" lay-filter="tableHeader">
<div class="layui-row layui-col-space10">
<div class="layui-col-lg2 layui-col-md2">
<div class="layui-block">
<input class="layui-input" name="keywords" id="keywords" value="" autocomplete="on" placeholder="请输入关键字">
</div>
</div>
<div class="layui-col-lg2 layui-col-md2">
<div class="layui-block">
<select name="cate" lay-search>
<option value="">分类不限</option>
<option value="0">普通</option>
<option value="1">vip</option>
</select>
</div>
</div>
<div class="layui-col-lg2 layui-col-md2">
<lable class="layui-lable">表格标签:</lable>
<div class="layui-inline">
<input type="text" name="other" id="other" class="layui-input">
</div>
</div>
<div class="layui-col-lg2 layui-col-md2">
<div class="layui-block">
<input type="text" class="layui-input" id="datebt" placeholder="请选择一个时间范围">
</div>
</div>
<div class="layui-col-lg4 layui-col-md4">
<div class="layui-btn-container">
<button class="layui-btn search-btn" id="search-btn" data-type="reload"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-normal" lay-event="add">添加</button>
<button class="layui-btn layui-btn-danger" lay-event="batchDel">删除</button>
</div>
</div>
</div>
</script>
<!--行内元素操作-->
<script type="text/html" id="toolBar" lay-filter="toolBar">
<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-xs" lay-event="detail">详情</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</script>
<!--行内事件-->
<script type="text/html" id="status" lay-filter="status">
<input type="checkbox" lay-filter="ckState" value="@{{d.status}}" lay-skin="switch"
lay-text="启用|禁止" @{{d.sex==0 ? 'checked':''}}/>
</script>
</div>
</div>
</div>
</div>
</div>
{/block}
{block name="js"}
<script>
layui.use(['form','table','laydate',"jquery"], function () {
var form = layui.form
,$ = layui.jquery
,laydate = layui.laydate
, table = layui.table;
//表格渲染
table.render({
elem: '#dataTable'
, url: '/index/index/list'
, toolbar: '#tableHeader' //指定表头
, title: '用户数据表'
, limit: 15 // 美业显示条数
, page: true
, text: { // 指定无数据或数据异常时的提示文本
none: '暂无相关数据' //默认：无数据。
}
, id: 'dataTable' //重载表格的时候需要用到
, cols: [[
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: 'ID', width: 80, fixed: 'left', sort: true,}
, {field: 'username', title: '用户名', edit: 'text'}
, {field: 'experience', title: '积分', sort: true}
, {field: 'status', title: '状态', toolbar: '#status'}
, {field: 'logins', title: '登入次数',}
, {field: '#',align:'center', title: '操作',width: 160,toolbar: '#toolBar'}
]],done() {
var $ = layui.$, active = {
reload: function () {
var keywords = $('#keywords')
, datebt = $('#datebt')
//执行重载
table.reload('dataTable', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
keywords: keywords.val(),
datebt: datebt.val(),
}
}, 'data');
//重载后再次加载add事件del事件
$('#keywords').val(keywords.val());
$('#datebt').val(datebt.val());
}
};
$('.search-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
}
});
//头工具栏事件
table.on('toolbar(dataTable)', function (obj) {
let data = obj.data;
switch (obj.event) {
case "add":
console.log(obj)
break;
case 'batchDel':
let checkData = table.checkStatus(obj.config.id).data;
if (checkData.length === 0) return layer.msg('请先选择数据');
let ids = [];
checkData.map(item =>{ ids.push(item.id)}) //循环得到id数组
$.ajax({
url: "{:url('batchDel')}",
type: 'POST',
dataType: 'json',
data: {ids},
success: function (res) {
layer.close(loading);
if (res.code == 200) {
layer.msg(res.msg, {time: 1500});
} else {
layer.alert(res.msg, {icon: 2});
}
window.location.reload();
}
});
break;
};
});
// 行内事件监听
table.on('tool(dataTable)', function (obj) {
let data = obj.data;
switch (obj.event) {
case "edit":
console.log(obj)
layer.open({
type: 2,
title: '分享配置',
area: ['700px', '600px'],
content: ['{:url("setting")}', 'yes'],
skin: 'layui-layer-molv',
btn: ['确定', '取消'],
btnAlign: 'c',
yes: function (index, layero) {
var submit = layero.find('iframe').contents().find("#submit");// #subBtn为页面层提交按钮ID
submit.click();// 触发提交监听
return false;
},
btn2: function (index, layero) {
layer.close(index);
}
});
break;
case "detail":
top.layui.index.openTabsPage("http://doc.orange.cn", "OrangBus");
break;
case 'del':
// obj.del();
let id = data.id;
alert(id);
break;
};
});
//时间选择
laydate.render({
elem: '#datebt'
,range: true
,type: "date"
,target: true
});
//快捷编辑
table.on('edit(dataTable)', function(obj){ //注：edit是固定事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
console.log(obj.data.id, obj.field, obj.value,obj);
// setField(obj.data.id, obj.field, obj.value);
});
// 监听状态开关切换事件
form.on('switch(ckState)', function (data) {
let checked = data.elem.checked ? 0 : 1;
let id = data.value;
setStatus(id, checked);
});
function setStatus(id,status) {
// 加载层
let loading = layer.msg('处理中，请稍后...', {icon: 16, shade: 0.2});
$.ajax({
url: "{:url('admin/form/data/setStatus')}",
type: 'POST',
dataType: 'json',
data: {
id : id,
status : status,
_token: '{{ @csrf_token() }}'
},
success: function (data) {
layer.close(loading);
if (data.code == 200) {
layer.msg(data.msg, {time: 1500});
} else {
layer.alert(data.msg, {icon: 2},function(){
window.location.reload();
});
}
}
});
}
});
</script>
{/block}
图片放大
<a href="javascript:void(0);" onclick=viewImage("/static/images/default.png")><image style="max-width:30px;max-height:30px;" src="/static/images/default.png"/></a>
搜索
layui.form.on('submit(user-search)', function (data) {
layui.table.reload('userTable', {
where: data.field
, page: {
curr: 1 //重新从第 1 页开始
},
method:'POST'
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
layui表单换行显示
<style>
.layui-form-label{
text-align: left;
float: none;
width: 100%;
}
.layui-input-block{
margin-left: 14px;
}
.layui-input-inline{
margin-left: 10px;
}
</style>
页面弹窗接受数据
接受弹窗回传参数
window.callback=function (data,type){
console.log(data,type);
}
传递参数给父级页面
var getCourse = window.iframeWindow || parent;
getCourse.callback(newData,type);//回调方法:传递给页面的参数
var index1 = parent.layer.getFrameIndex(window.name);
parent.layer.close(index1);//关闭当前页
});
ayui中table表格内容过多自动换行
.layui-table-cell {
font-size:14px;
padding:0 5px;
height:auto;
overflow:visible;
text-overflow:inherit;
white-space:normal;
word-break: break-all;
}
layuimin
弹窗关闭
var content = miniPage.getHrefContent("{{ route("admin.add") }}");
layer.open({
type: 1,
title: '添加',
area: ['600px', '600px'],
content: content,
skin: 'layui-layer-molv',
btn: ['确定', '取消'],
btnAlign: 'c',
yes: function (index, layero) {
var submit = layero.contents().find("#submit");// #subBtn为页面层提交按钮ID
submit.click();// 触发提交监听
return false;
},
btn2: function (index) {
layer.close(index);
}
});
<div class="layuimini-main">
<div class="layui-form">
<input type="hidden" name="id" value="{{ $data->id ?? 0 }}">
<div class="layui-form-item">
<label class="layui-form-label required">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名"
value="{{ $data->name ?? '' }}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="无需修改留空即可" value="{{ $data->password ?? '' }}"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">手机</label>
<div class="layui-input-block">
<input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"
value="{{ $data->phone ?? '' }}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" placeholder="请输入邮箱" value="{{ $data->email ??'' }}"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="启用"
@if(empty($data) || $data->status == 1) checked @endif>
<input type="radio" name="status" value="0" title="禁用"
@if(!empty($data) && $data->status == 0) checked @endif>
</div>
</div>
<div class="layui-form-item layui-hide">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" id="submit" lay-submit lay-filter="submit">确认</button>
</div>
</div>
</div>
</div>
<script>
layui.use(['form', 'table', 'jquery'], function () {
var form = layui.form,
layer = layui.layer,
table = layui.table,
$ = layui.jquery;
form.render();
//监听提交
form.on('submit(submit)', function (data) {
let param = data.field;
axios.post("{{ route("admin.store") }}", param).then(res => {
if (res.code === 200) {
layer.msg(res.msg, {time: 1000}, function () {
parent.layui.table.reload('dataTable', {page: {curr: 1}});
var index = layer.index; //获取窗口索引
parent.layer.close(index);
});
} else {
layer.alert(res.msg);
}
});
return false;
});
});
</script>