3 Star 15 Fork 8

code2roc / FastExecutor

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Index.cshtml 22.21 KB
Copy Edit Web IDE Raw Blame History
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
@Scripts.Render("~/Resource/js/fe.head.js")
</head>
<style>
.el-header {
height: 80px !important;
}
.head_content {
background: #102238;
display: flex;
align-items: center;
height: 80px;
}
.head_info {
width: 550px;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center
}
.systemname {
color: white;
font-size: 24px;
}
.head_menu {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%
}
.head_menuitem {
background-color: #304156;
height: 30px;
width: 80px;
cursor: pointer;
color: rgb(191, 203, 217);
;
font-size: 16px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 5px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px
}
.head_menuitem:hover {
background-color: rgba(84, 168, 254, 0.5);
}
.head_other {
width: 300px;
}
.head_other_container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.username {
color: white;
margin-left: 10px
}
.userheadimg {
width: 40px;
height: 40px;
border-radius: 20px;
}
.el-popover {
padding: 0 !important;
border: none !important;
color: white !important;
}
.personinfo {
width: 300px;
height: 200px;
background: rgb(48, 65, 86);
}
.person_base {
width: 300px;
height: 80px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.person_modify {
width: 300px;
height: 60px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.person_modify_label {
width: 100px;
cursor: pointer;
font-size: 15px;
}
.person_modify_icon {
padding-right: 5px;
font-size: 15px;
}
.person_userheadimg {
width: 60px;
height: 60px;
padding-left: 10px;
padding-right: 20px;
}
.person_username {
color: white;
font-size: 18px;
}
.leftmenu {
height: 100%;
background-color: rgb(48, 65, 86);
overflow-x: hidden
}
.menucointer {
width: 160px;
padding: 0;
margin: 0;
list-style: none;
text-align: left;
}
.menu {
width: 160px;
text-align: left;
}
.menumain {
width: 160px;
text-align: left;
height: 56px;
cursor: pointer;
line-height: 56px;
color: rgb(191, 203, 217);
background-color: rgb(48, 65, 86);
}
.menumain:hover {
width: 160px;
text-align: left;
height: 56px;
cursor: pointer;
line-height: 56px;
color: rgb(191, 203, 217);
background-color: #263445 !important;
}
.submenuitemcointer {
padding: 0;
margin: 0;
width: 160px;
text-align: left;
list-style: none;
}
.submenu {
width: 160px;
text-align: left;
height: 56px;
cursor: pointer;
line-height: 56px;
background-color: #1f2d3d;
}
.submenu:hover {
width: 160px;
text-align: left;
height: 56px;
cursor: pointer;
line-height: 56px;
background-color: #001528 !important;
}
.menutext {
margin-left: 15px;
color: rgb(191, 203, 217);
font-size: 14px;
}
.subenutext {
margin-left: 25px;
color: rgb(191, 203, 217);
font-size: 14px;
}
.menumainarrow {
margin-left: 50px;
font-size: 10px
}
.tabhead {
background-color: white;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
}
.tabtitlecontainer {
height: 40px;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #d8dce5;
}
.tabmain {
height: 40px;
width: auto;
line-height: 36px;
overflow: scroll;
float: left;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
.tabop {
height: 40px;
width: 100px;
display: flex;
align-items: center;
margin-left: 10px;
}
.tabtitle {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
position: relative;
cursor: pointer;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
}
.tabtitle:hover {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
position: relative;
cursor: pointer;
background-color: #42b983;
color: #fff;
border-color: #42b983;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
}
.active {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
position: relative;
cursor: pointer;
background-color: #42b983;
color: #fff;
border-color: #42b983;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
}
.active::before {
content: "";
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
</style>
<body>
<div id="app" v-cloak>
<el-container>
<el-header style="margin: 0;padding: 0">
<div class="head_content">
<div class="head_info">
<img style="width:70px;height: 70px;" src="../../Resource/images/logo.png">
<span class="systemname">@ViewData["SystemName"]</span>
</div>
<div class="head_menu">
<div class="head_menuitem" v-for="menu in topMenuList" v-on:click="bindLeftMenu(menu.id)">
<span>{{menu.label}}</span>
</div>
</div>
<div class="head_other">
<div class="head_other_container">
<el-popover placement="bottom" trigger="hover">
<div class="personinfo">
<div class="person_base">
<img class="person_userheadimg" :src="userImageUrl">
<span class="person_username">{{userName}}</span>
</div>
<div class="person_modify">
<i class="el-icon-user person_modify_icon"></i>
<span class="person_modify_label" v-on:click="modifyUserInfo">个人信息</span>
<i class="el-icon-s-tools person_modify_icon"></i>
<span class="person_modify_label" v-on:click="modifyPWD">修改密码</span>
</div>
<div class="person_modify">
<el-button type="primary" style="width:280px" v-on:click="loginOut">退出系统
</el-button>
</div>
</div>
<img class="userheadimg" slot="reference" :src="userImageUrl">
</el-popover>
<span class="username">你好! {{userName}}</span>
</div>
</div>
</div>
</el-header>
<el-main>
<el-container>
<el-aside style="width:160px" v-show="showleft">
<div class="leftmenu" :style="{height:leftmenuheight+'px'}">
<ul class="menucointer" v-for="menu in leftMenuList">
<li class="menumain" v-on:click="menuClick(menu)">
<span class="menutext">{{menu.label}}</span>
<i v-if="menu.hasChildren" :menuiconid="menu.id"
class="menumainarrow el-icon-arrow-down"></i>
</li>
<li v-if="menu.hasChildren" class="menu" :id="menu.id" style="display: none">
<ul class="submenuitemcointer" v-if="menu.hasChildren">
<li class="submenu" v-for="submenu in menu.children"
v-on:click="addTab(submenu)">
<span class="subenutext">{{submenu.label}}</span>
</li>
</ul>
</li>
</ul>
</div>
</el-aside>
<el-main>
<el-container>
<el-header class="tabhead">
<div class="tabtitlecontainer">
<div class="tabop">
<div v-on:click="changeTab(mainMenu)"
:class="mainMenu.id==activeTabID?'tabtitle active':'tabtitle'"
:title="mainMenu.label">
<span v-text="mainMenu.label"></span>
<span v-on:click="refreshTab(mainMenu)"
class="el-icon-refresh-right"></span>
<span v-if="mainMenu.candelete" v-on:click="closeTab(mainMenu)"
class="el-icon-close"></span>
</div>
</div>
<div class="tabmain" id="tabmain">
<div v-for="tab in tabList" v-on:click="changeTab(tab)"
:class="tab.id==activeTabID?'tabtitle active':'tabtitle'" :title="tab.label">
<span v-if="tab.label.length<=4">{{tab.label}}</span>
<span v-else>{{tab.label.substr(0,4)}}....</span>
<span v-on:click="refreshTab(tab)" class="el-icon-refresh-right"></span>
<span v-if="tab.candelete" v-on:click="closeTab(tab)"
class="el-icon-close"></span>
</div>
</div>
<div class="tabop">
<span v-on:click="closeAllTab" style="cursor: pointer;" class="el-icon-close"
title="关闭所有"></span>
</div>
</div>
</el-header>
<el-main>
<div class="tabcontentcontainer">
<iframe v-show="mainMenu.id==activeTabID" :src="mainMenu.arttibutes.moduleurl"
:id="mainMenu.id" style="width:100%;border-width:0;vertical-align: bottom "
:style="{height:frameHeight+'px'}"></iframe>
<iframe v-for="tab in tabList" v-show="tab.id==activeTabID"
:src="tab.arttibutes.moduleurl" :id="tab.id"
style="width:100%;border-width:0;vertical-align: bottom "
:style="{height:frameHeight+'px'}"></iframe>
</div>
</el-main>
</el-container>
</el-main>
</el-container>
</el-main>
</el-container>
</div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
</html>
<script>
var menuUrl = GetRootPath() + "Frame/Module/GetMainPageMenu";
var userHomeInfoUrl = GetRootPath() + "Frame/User/GetHomeInfo";
var settingUrl = GetRootPath() + "Frame/Home/GetSettingInfo";
var defaultUserImgUrl = GetRootPath() + 'Resource/images/person.png'
var loginOutUrl = GetRootPath() + "Frame/Auth/LoginOut";
var pageData = {
leftmenuheight: 0,
showleft: false,
topMenuList: [],
leftMenuList: [],
tabList: [],
existTabGuidList: [],
activeTabID: '',
frameHeight: 0,
userImageUrl: defaultUserImgUrl,
userName: '',
userGuid: '',
mainMenu: {
arttibutes: {}
},
};
new Vue({
el: '#app',
data: pageData,
mounted: function () {
pageData.leftmenuheight = document.body.clientHeight - 80
pageData.frameHeight = document.body.clientHeight - 80 - 41
bindTopMenu();
bindUserInfo();
this.bindSetting();
},
methods: {
menuClick: function (menu) {
var menuid = menu.id;
if (menu.hasChildren) {
$("#" + menuid).slideToggle();
$("i[menuiconid='" + menuid + "']").toggleClass("el-icon-arrow-down");
$("i[menuiconid='" + menuid + "']").toggleClass("el-icon-arrow-up");
} else {
this.addTab(menu)
}
},
bindLeftMenu: function (ParentModuleGuid) {
pageData.showleft = true;
var data = {
Modle: "Left",
ParentModuleGuid: ParentModuleGuid
}
JsonAjaxPost(menuUrl, JSON.stringify(data), function (data, status) {
Vue.set(pageData, "leftMenuList", data.tree);
})
},
addTab(menu) {
if (menu.arttibutes.moduleurl) {
if (menu.arttibutes.moduleurl.indexOf(GetRootPath()) < 0) {
menu.arttibutes.moduleurl = GetRootPath() + menu.arttibutes.moduleurl;
}
if (pageData.existTabGuidList.indexOf(menu.id) < 0) {
pageData.existTabGuidList.push(menu.id);
pageData.activeTabID = menu.id;
menu.candelete = true;
pageData.tabList.push(menu);
} else {
pageData.activeTabID = menu.id;
}
} else {
OpenAlert('提示', '该菜单未配置模块地址!')
}
this.bindTabMouseScrollEvent();
this.scrollRightTab();
},
changeTab(menu) {
pageData.activeTabID = menu.id;
//这里判断是因为tab的点击事件在删除事件之前触发
if (pageData.existTabGuidList.indexOf(pageData.activeTabID) < 0) {
pageData.activeTabID = pageData.existTabGuidList[pageData.existTabGuidList.length - 1];
}
},
refreshTab(menu) {
if (pageData.activeTabID == menu.id) {
document.getElementById(menu.id).src = menu.arttibutes.moduleurl;
}
},
closeTab(menu) {
for (var i = 0; i < pageData.existTabGuidList.length; i++) {
if (pageData.existTabGuidList[i] == menu.id) {
pageData.existTabGuidList.splice(i, 1);
break;
}
}
for (var i = 0; i < pageData.tabList.length; i++) {
if (pageData.tabList[i].id == menu.id) {
pageData.tabList.splice(i, 1);
break;
}
}
if (pageData.existTabGuidList.length > 0) {
//如果删除一个tab,并且这个tab不存在了,则默认active的tab为最后一个
if (pageData.existTabGuidList.indexOf(pageData.activeTabID) < 0) {
pageData.activeTabID = pageData.existTabGuidList[pageData.existTabGuidList.length - 1];
}
}
},
modifyUserInfo: function () {
OpenTopDialog('useredit', '修改个人信息', 'Frame/User/Modify?RowGuid=' + pageData.userGuid, 600,
800,
bindUserInfo)
},
modifyPWD: function () {
OpenTopDialog('modifypwd', '修改密码', 'Frame/User/ModifyPWD', 600,
800,
bindUserInfo)
},
loginOut: function () {
var data = {}
JsonAjaxPost(loginOutUrl, JSON.stringify(data), function (data, status) {
if (data.code == 0) {
var returnurl = data.returnurl;
window.location.href = returnurl;
}
})
},
bindSetting: function () {
var data = {}
JsonAjaxPost(settingUrl, JSON.stringify(data), function (data, status) {
if (data.code == 0) {
var defaultmainindex = data.defaultmainindex;
if (defaultmainindex != "") {
pageData.mainMenu.arttibutes.moduleurl = GetRootPath() +
defaultmainindex;
pageData.mainMenu.id = "mainindex";
pageData.mainMenu.candelete = false;
pageData.mainMenu.label = "主页"
pageData.activeTabID = pageData.mainMenu.id;
pageData.existTabGuidList = ["mainindex"]
}
}
})
},
closeAllTab: function () {
pageData.tabList = [];
pageData.existTabGuidList = ["mainindex"]
this.bindSetting();
this.bindTabMouseScrollEvent();
},
bindTabMouseScrollEvent() {
this.$nextTick(function () {
$(".tabmain").each(function (index, element) {
element.onwheel = function (event) {
var table = $("#tabmain");
var right = table[0].scrollWidth-$(element).width();
//table[0].scrollWidth为div包含滚动部分的全部宽度,$(element).width()为div的宽度,计算可得知滚动部分长度
//table.scrollLeft()为div已经滚动了多少,相比较就可以判断div是否滚动完毕
if (table.scrollLeft() < right && event.deltaY > 0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() + 100);
table.scrollLeft(left)
}
if (table.scrollLeft() > 0 && event.deltaY < 0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() - 100);
table.scrollLeft(left)
}
}
})
})
},
scrollRightTab() {
this.$nextTick(function () {
var tabobj = $("#tabmain");
tabobj.scrollLeft(1000)
})
}
}
})
function bindTopMenu() {
var data = {
Modle: "Top"
}
JsonAjaxPost(menuUrl, JSON.stringify(data), function (data, status) {
Vue.set(pageData, "topMenuList", data.tree);
})
}
function bindUserInfo() {
var data = {
}
JsonAjaxPost(userHomeInfoUrl, JSON.stringify(data), function (data, status) {
if (data.code == 0) {
Vue.set(pageData, "userName", data.DisplayName);
Vue.set(pageData, "userGuid", data.UserGuid);
if (data.ExistHeadImg) {
Vue.set(pageData, "userImageUrl", GetRootPath() + "Frame/Attach/ReadFile?RowGuid=" + data
.AttachGuid);
}
}
})
}
</script>

Comment ( 0 )

Sign in for post a comment

C#
1
https://gitee.com/grassprogramming/FastExecutor.git
git@gitee.com:grassprogramming/FastExecutor.git
grassprogramming
FastExecutor
FastExecutor
master

Search

105716 1d94204e 1850385 105716 2d26be5c 1850385