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

1、新增tab页面切换效果，增强页面体验

Browse Source 
2、修复报销时报销时间自动转格式的问题
This commit is contained in:
HDM58\hdm58 2023-08-25 17:38:25 +08:00
parent 09d0b83934
commit bc8f9f4976
4 changed files with 83 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/finance/controller/Api.php
View File

@ -51,7 +51,7 @@ class Api extends BaseController
//发送消息通知
$detail = Expense::where(['id' => $param['id']])->find();
$msg=[
'create_time'=>date('Y-m-d H:i:s',(int)$detail['create_time']),
'create_time'=>$detail['create_time'],
'title'=>'报销',
'action_id'=>$detail['id']
];

4
app/home/view/index/index.html
View File

@ -140,7 +140,7 @@
<!-- 主体内容 -->
<div class="layui-body" id="GouguAppBody">
<div class="gg-tab-page layui-show" id="tabItem0">
<iframe id="0" data-frameid="0" title="勾股OA" name="myiframe" src="{:url('/home/index/main')}" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
<iframe id="0" data-frameid="0" title="勾股OA" name="myiframe" src="{:url('/home/index/main')}" frameborder="0" data-timestamp="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
</div>
</div>
<!-- 辅助元素，用于移动设备下遮罩 -->
@ -170,7 +170,7 @@
}
}
}
admin.loading();
$('.layui-side-scroll').hover(function(){
$(this).removeClass('no-scroll');
},function(){

57
public/static/assets/gougu/css/layout.css
View File

@ -22,6 +22,48 @@
.gg-layout .layui-logo,
.gg-layout .layui-logo a {color: #f1f1f1; text-align:center;}
/** tab过场动画 **/
.tab-loading{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 666666; display: block; width: 100%; height: 100%; background-color: #fafafa;}
.tab-loader {position: absolute;top: calc(50% - 1.6em);left: calc(50% - 1.6em); width: 3.2em; height: 3.2em; transform: rotate(165deg);}
.tab-loader:before,.tab-loader:after {content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0.6em; height: 0.6em; border-radius: 0.3em; transform: translate(-50%, -50%);}
.tab-loader:before { animation: before 2s infinite;}
.tab-loader:after {animation: after 2s infinite;}
@keyframes before {
0% {
width: 0.6em;
box-shadow: 1.6em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
}
35% {
width: 3.2em;
box-shadow: 0 -0.6em rgba(225, 20, 98, 0.88), 0 0.6em rgba(111, 202, 220, 0.88);
}
70% {
width: 0.6em;
box-shadow: -1em -0.6em rgba(225, 20, 98, 0.88), 1.6em 0.6em rgba(111, 202, 220, 0.88);
}
100% {
box-shadow: 1em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
}
}
@keyframes after {
0% {
height: 0.6em;
box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
}
35% {
height: 3.2em;
box-shadow: 0.6em 0 rgba(61, 184, 143, 0.88), -0.6em 0 rgba(233, 169, 32, 0.88);
}
70% {
height: 0.6em;
box-shadow: 0.6em -1.6em rgba(61, 184, 143, 0.88), -0.6em 1.6em rgba(233, 169, 32, 0.88);
}
100% {
box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
}
}
.layui-side-menu {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);background-color: #001529; color: #fff}
.layui-side-menu .layui-side-scroll {width: 100%;}
.layui-side-menu .layui-side-scroll.no-scroll{overflow-y:hidden;}
@ -66,7 +108,6 @@
.layui-side-white .layui-nav-tree .layui-nav-child dd a:hover{background-color:#ffffff;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-bar{background-color: #187FDD;width:3px;left:inherit;right:0}
.layui-side-blue{background-color:#192A5E; color: #C5C9D2}
.layui-side-blue .layui-logo {background-color: #122150;border-bottom: 1px solid #122150;}
.layui-side-blue .layui-nav .layui-nav-item a{color: #C5C9D2}
@ -199,18 +240,4 @@
}
.side-spread-sm .gg-body-shade {
display: block;
}
.gg-tab-page.layui-show {animation:moveTop .4s;-webkit-animation:moveTop .4s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}
@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}

46
public/static/assets/gougu/module/admin.js
View File

@ -1,11 +1,31 @@
layui.define(['element'], function (exports) {
var element = layui.element;
var tab = {
/*新增一个Tab页面
* @id，tab页面唯一标识，可是标签中data-id的属性值
* @url,tab页面地址
* @name,tab页面标题，
*/
// tab动画加载效果
loading: function() {
let load = '<div class="tab-loading"><div class="tab-loader"></div></div>';
let $iframe = $('#GouguAppBody').find('.gg-tab-page.layui-show iframe');
if (!$iframe.next().length) {
$iframe.parent().append(load);
let tabLoad = $iframe.parent().find('.tab-loading');
let tab_timestamp = $iframe.data('timestamp');
let timestamp = new Date().getTime();
//console.log(tab_timestamp);
if(timestamp-tab_timestamp<666){
$iframe.on('load', function() {
tabLoad.fadeOut(666, function() {
tabLoad.remove();
});
})
}
else{
tabLoad.fadeOut(666, function() {
tabLoad.remove();
});
}
}
},
//历史tab预加载
tabTem: function (id, url, title) {
element.tabAdd('gg-admin-tab', {
id: id,
@ -14,8 +34,13 @@ layui.define(['element'], function (exports) {
});
$('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '" data-url="' + url + '"></div>');
},
/*新增一个Tab页面
* @id，tab页面唯一标识，可是标签中data-id的属性值
* @url,tab页面地址
* @name,tab页面标题，
*/
tabAdd: function (id, url, title) {
var thetabs = $('#pageTabUl').find('li');
let thetabs = $('#pageTabUl').find('li');
if (thetabs.length > 12) {
layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
}
@ -28,7 +53,9 @@ layui.define(['element'], function (exports) {
url:url,
title: '<span class="gg-tab-active"></span>' + title
});
$('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '"><iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
// 获取当前时间戳（毫秒数）
let timestamp = new Date().getTime();
$('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem'+id+'" data-id="'+id +'"><iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
this.tabChange(id);
},
//从子页面打开新的Tab页面，防止id重复，使用时间戳作为唯一标识
@ -190,7 +217,9 @@ layui.define(['element'], function (exports) {
let id = thisPage.data('id');
let url = thisPage.data('url');
if(thisPage.find('iframe').length==0){
thisPage.html('<iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
// 获取当前时间戳（毫秒数）
let timestamp = new Date().getTime();
thisPage.html('<iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
}
tab.tabFollow(id);
$('#GouguAppBody').find('.gg-tab-page').removeClass('layui-show');
@ -198,6 +227,7 @@ layui.define(['element'], function (exports) {
if(data.index==0){
tab.refresh(0);
}
tab.loading();
tab.tabRoll("auto", data.index);
tab.tabCookie();
});