mkm/dev_oa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layui升级到2.8.1后，优化系统的右侧弹出层，提高系统整体的操作体验

Browse Source
This commit is contained in:
hdm 2023-04-27 12:11:06 +08:00
parent 0006271540
commit f2eb4570ef
2 changed files with 35 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/static/assets/gougu/css/gougu.css
View File

@ -310,30 +310,7 @@ div.layui-table-main::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0
.editormd{margin-bottom:0!important;}
.CodeMirror-gutters{background-color:#fafafa!important;}
@keyframes layui-rl{
from{transform:translateX(0px);}to{transform:translateX(-100%);}
}
@-webkit-keyframes layui-rl{
from{transform:translateX(0px);}to{transform:translateX(-100%);}
}
.layui-anim {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.layui-anim-rl {
-webkit-animation-name: layui-rl;
animation-name: layui-rl;
}
.layui-layer-admin-right {
box-shadow: 1px 1px 10px rgba(0,0,0,.1);
border-radius: 0!important;
overflow: auto;
}
.layui-anim-rl.layui-layer-iframe{
overflow:initial!important;
}
.layui-layer-gougu-admin {box-shadow: 1px 1px 10px rgba(0,0,0,.1); border-radius: 0!important;overflow:initial!important;}
.express-box { position: fixed; z-index:9999; height:100%; right: -100%; top:0;background-color: #fff;}
.express-box article{width:100%; height:100%; overflow:auto;}
.express-mask{ display: none; position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); }

67
public/static/assets/gougu/module/tool.js
View File

@ -9,47 +9,37 @@ layui.define([], function (exports) {
return false;
}
that.loading = true;
var countWidth = window.innerWidth-(window.innerWidth*0.5)+456;
sideWidth = '80%';
if(window.innerWidth<=1000){
countWidth = 750;
sideWidth = '92%';
}
if (width && width > 0) {
sideWidth = width + 'px';
}
else{
sideWidth = countWidth + 'px';
if(window.innerWidth>1000 && window.innerWidth<=1440){
sideWidth = '88%';
}
layer.open({
type: 2,
title: '',
offset: ['0', '100%'],
skin: 'layui-anim layui-anim-rl layui-layer-admin-right',
title: false,
offset: 'r',
anim: 'slideLeft',
closeBtn: 0,
content: url,
area: [sideWidth, '100%'],
success: function (obj, index) {
var btn = '<div data-index="'+index+'" class="express-close" title="关闭">关闭</div>';
obj.append(btn);
$('body').addClass('right-open');
that.loading = false;
obj.on('click','.express-close', function () {
let op_width = obj.outerWidth();
obj.animate({ left: '+=' + op_width + 'px' }, 200, 'linear', function () {
$('body').removeClass('right-open');
layer.close(index);
if (layui.pageTable) {
layui.pageTable.resize();
}
})
})
$(window).resize(function () {
var resizeWidth = window.innerWidth-(window.innerWidth*0.5)+456;
if(window.innerWidth<=1000){
resizeWidth = 750;
}
obj.width(resizeWidth);
})
skin:'layui-layer-gougu-admin',
end: function(){
$('body').removeClass('right-open');
if (layui.pageTable) {
layui.pageTable.resize();
}
},
success: function (obj, index) {
var btn = '<div data-index="'+index+'" class="express-close" title="关闭">关闭</div>';
obj.append(btn);
$('body').addClass('right-open');
that.loading = false;
obj.on('click','.express-close', function () {
layer.close(index);
})
}
})
},
//右侧ajax请求的方式打开页面参考勾股DEV
@ -281,7 +271,7 @@ layui.define([], function (exports) {
}
}
};
//时间选择快捷操作
$('body').on('click', '.tool-time', function () {
let that = $(this);
let type = that.data('type');
@ -296,6 +286,17 @@ layui.define([], function (exports) {
return false;
});
//搜索表单重置快捷操作
$('body').on('click', '[lay-filter="reset"]', function () {
let that = $(this);
let prev = that.prev();
if (typeof(prev) != "undefined") {
setTimeout(function () {
prev.click();
}, 10)
}
});
$('body').on('click', '.tab-a', function () {
let id = $(this).data('id');
let url = $(this).data('href');