gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 上滑二级列表样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-04-14 18:35:42 +08:00
parent a79237653d
commit 9683eda3a9
14 changed files with 450 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -1,15 +1,24 @@
/*列表table通用样式*/
.list-page {
background-color: white;
background-color: #f6f6f6;
height: 100%;
.main-list {
background-color: white;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
z-index: 0;
}
.main-container {
padding: 10px;
height: 100%;
background-color: #f6f6f6;
&>div {
background-color: white;
}
}
.main-list.main-list-with-sub {
height: 50%;
}
@@ -27,10 +36,19 @@
justify-content: space-between;
padding: 14px 20px;
.top-tool-main-right {
&.top-tools--sub {
align-items: center;
padding: 0 70px 0 15px;
height: 44px;
background-color: white;
border: 1px solid #E6EAED;
box-sizing: border-box;
}
.top-tool-right {
display: flex;
}
.top-tool-main-left {
.top-tool-left {
display: flex;
}
.top-tool-btn-group {
@@ -80,13 +98,87 @@
position: relative;
}
}
.top-tools--sub {
.top-tool-left {
height: 100%;
}
.sub-list-title {
width: 200px;
line-height: 40px;
font-size: 16px;
color: #202F3F;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.sub-list-tabs {
height: 100%;
display: flex;
align-items: center;
.sub-list-tab {
height: 100%;
width: 120px;
color: #666666;
font-size: 14px;
text-align: center;
box-sizing: border-box;
line-height: 40px;
&.sub-list-tab--active {
border-bottom: 2px solid $--theme-color;
color: #FA901C;
}
}
}
}
/* 上滑resize工具条 */
.sub-list-resize, .sub-list-resize-copy {
display: flex;
align-items: center;
justify-content: center;
height: 9px;
width: 100%;
box-shadow: inset 0 1px 0 0 #BEBEBE;
background-color: #e6eaed;
position: absolute;
z-index: 1;
box-sizing: border-box;
user-select: none;
color: #5f6368;
cursor: ns-resize;
}
.sub-list-window-control {
display: flex;
align-items: center;
margin-left: 14px;
position: absolute;
right: 0;
height: 44px;
z-index: 2;
.window-control-btn {
cursor: pointer;
margin-right: 20px;
}
.window-control-btn>i {
color: #999999;
font-size: 14px;
transition: all .2s;
}
.window-control-btn>i:hover {
color: $--theme-color;
}
}
/* 上滑resize工具条--end */
.nz-table2 {
position: relative;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
flex: auto;
height: calc(100% - 58px);
.el-table {
position: absolute;
@@ -224,9 +316,9 @@
/* end--覆盖el-table边框、gutter等样式 */
.pagination-bottom {
position: absolute;
bottom: 0;
bottom: 8px;
height: 48px;
width: 100%;
width: calc(100% - 20px);
}
}
.operation-dropdown-text {

153
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -523,42 +523,6 @@ li{
}
/* end--nz-tab组件*/
/* begin--二级页面tab*/
.sub-list-tabs {
margin-top: 0 !important;
position: relative;
height: 100%;
background-color: #f5f7fa;
}
.sub-list-tab {
width: 100px;
font-size: 14px;
color: #909399;
height: calc(100% - 2px);
padding-left: 20px;
line-height: 27px;
display: inline-block;
cursor: pointer;
}
.sub-list-tab:hover {
color: $global-text-color-active;
}
.sub-list-tab-active {
color: $global-text-color-active;
background-color: white;
border-top: solid 2px $global-text-color-active;
}
.sub-list-tab-title {
font-size: 14px;
color: #666666;
padding: 0 8px;
height: 100%;
display: inline-block;
background-color: #eeeeee;
line-height: 30px;
}
/* end--二级页面tab*/
/* end--通用*/
/* begin--左侧列表*/
@@ -738,123 +702,6 @@ li{
}*/
/* end--顶部工具栏*/
/* begin--二级顶部工具栏*/
.sub-top-tools {
display: flex;
height: 32px;
align-items: center;
justify-content: space-between;
border-top: 1px solid #DCDFE6;
border-bottom: 1px solid #E4E7ED;
margin: 0 -6px;
padding-right: 80px;
background-color: $content-right-background-color;
margin-bottom: 10px;
}
.sub-top-tools>div {
margin-top: 2px;
}
.sub-top-tools .top-tool-search {
width: 260px;
margin: -1px 0 0 0;
.select_input input {
background-color: white;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.sub-top-tool-right {
display: flex;
align-content: center;
}
.has-sub-popper {
color: $danger-color;
}
.sub-box {
height: 50%;
position: relative;
}
.sub-list {
height: calc(100% - 9px);
position: absolute;
width: 100%;
z-index: 1;
top: 9px;
}
.main-and-sub-transition {
transition: .4s height;
}
.resize-modal {
width: 100%;
opacity: 0.6;
background-color: #f5f9ff;
border: 1px solid #a7d0f7;
box-sizing: border-box;
position: fixed;
margin: 0 -6px;
cursor: ns-resize;
display: none;
z-index: 20;
vertical-align: bottom;
bottom: 0;
}
.sub-list-resize, .sub-list-resize-copy {
border-top: 1px solid #aaa;
background-color: #eaeaea;
height: 9px;
margin-left: -6px;
width: calc(100% + 12px);
position: absolute;
z-index: 1;
box-sizing: border-box;
user-select: none;
color: #5f6368;
display: flex;
align-items: center;
justify-content: center;
cursor: ns-resize;
}
.sub-list-resize-copy {
border-top: 1px solid #a7d0f7;
margin-left: 0;
width: calc(100% - 198px);
}
.sub-list-window-control {
display: flex;
align-items: center;
margin-left: 14px;
position: absolute;
right: 0;
top: 5px;
z-index: 2;
}
.window-control-btn {
cursor: pointer;
width: 29px;
text-align: center;
}
.window-control-btn>i {
color: #909399;
font-size: 19px;
}
.window-control-btn>i:hover {
color: $global-text-color-active;
}
.pagination-top {
transition: .2s transform;
}
.pagination-top-show {
transform: translateX(0);
}
.pagination-top-hide {
transform: translateX(150%);
}
/* end--二级顶部工具栏*/
/* start--内容*/
.nz-table {
border: none;

26
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -11,12 +11,13 @@
<!--退出全屏-->
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen" :id="from+'-bottom-exit-full'"><i class="nz-icon nz-icon-exit-full-screen" ></i></div>
<!--全屏-->
<div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen" :id="from+'-bottom-full'"><i class="el-icon-full-screen"></i></div>
<div v-if="!isFullScreen" :id="from+'-bottom-full'" class="window-control-btn" @click="fullScreen"><i class="nz-icon nz-icon-full-screen"></i></div>
<!--关闭-->
<div class="window-control-btn" @click="closeSubList" :id="from+'-bottom-close'"><i class="nz-icon nz-icon-close"></i></div>
</div>
<!------TAB区------>
<div class="sub-list__tabs">
<!--机柜-->
<cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
<!--告警信息-->
@@ -27,8 +28,8 @@
<endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
<!-- model-panel/asset-detail/project-overview的panel-->
<panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :from="from" :obj="obj"
@changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
<panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"
:obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>
<!--terminal-log的记录和回放-->
<terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmd'" ref="reminalLogCMDTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-cmd-tab>
@@ -37,8 +38,9 @@
<terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitor'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
<!--user列表的两个日志-->
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" @changeTab="changeTab"></operation-log-tab>
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-tab>
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
</div>
</div>
</div>
</template>
@@ -84,7 +86,19 @@ export default {
},
data () {
return {
fromRoute: fromRoute
fromRoute: fromRoute,
tabs: {
user: {
operationLog: [
{ prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: true },
{ prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: false }
],
terminalLog: [
{ prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: false },
{ prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: true }
]
}
}
}
},
methods: {

187
nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<div>
<div class="top-tools top-tools--sub">
<div class="top-tool-left">
<div class="sub-list-title">Name：<slot name="title"></slot></div>
<div class="sub-list-tabs">
<div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
</div>
</div>
<div class="top-tool-right">
<div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
<search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
</div>
<slot name="top-tool-right"></slot>
<button v-if="layout.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn margin-r-20"
type="button" @click="tools.showCustomTableTitle = true">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
ref="customTableTitle"
:custom-table-title="customTableTitle"
:original-table-title="tableTitle"
:tableId="tableId"
@close="tools.showCustomTableTitle = false"
@update="updateCustomTableTitle"
></element-set>
</transition>
<div class="sub-container">
<div class="nz-table2">
<slot></slot>
</div>
<div class="pagination-bottom">
<slot name="pagination"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'nzBottomDataList',
props: {
from: {
type: String,
default: ''
},
tableTitle: {
type: Array
},
customTableTitle: {
type: Array
},
layout: {
type: Array,
default () { return [] }
},
searchMsg: {
type: Object
},
tableId: {
type: String,
default: ''
},
tabs: {
type: Array
}
},
data () {
return {
tools: {
toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
tableHover: false, // 控制滚动条和top按钮同时出现
showCustomTableTitle: false // 自定义列弹框是否显示
}
}
},
methods: {
updateCustomTableTitle (custom) {
this.$emit('update:customTableTitle', custom)
},
search (searchObj) {
this.$emit('search', searchObj)
},
// 切换tab
changeTab (tab) {
this.$emit('changeTab', tab)
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/tableCommon.scss';
/* begin--二级顶部工具栏*/
.sub-top-tools {
display: flex;
height: 32px;
align-items: center;
justify-content: space-between;
border-top: 1px solid #DCDFE6;
border-bottom: 1px solid #E4E7ED;
margin: 0 -6px;
padding-right: 80px;
background-color: $content-right-background-color;
margin-bottom: 10px;
}
.sub-top-tools>div {
margin-top: 2px;
}
.sub-top-tools .top-tool-search {
width: 260px;
margin: -1px 0 0 0;
.select_input input {
background-color: white;
}
}
.sub-container {
padding: 10px;
height: 100%;
background-color: #f6f6f6;
&>div {
background-color: white;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.sub-top-tool-right {
display: flex;
align-content: center;
}
.has-sub-popper {
color: $danger-color;
}
.sub-box {
height: 50%;
position: relative;
}
.sub-list {
height: calc(100% - 9px);
position: absolute;
width: 100%;
z-index: 1;
top: 9px;
.sub-list__tabs {
height: 100%;
background-color: white;
&>div {
height: 100%;
background-color: #f6f6f6;
.nz-table2 {
height: calc(100% - 92px);
padding: 20px 20px 0;
}
}
}
}
.main-and-sub-transition {
transition: .4s height;
}
.resize-modal {
width: calc(100% - 240px);
opacity: 0.6;
background-color: #f5f9ff;
border: 1px solid #a7d0f7;
box-sizing: border-box;
position: fixed;
cursor: ns-resize;
display: none;
z-index: 20;
vertical-align: bottom;
bottom: 0;
}
/* end--二级顶部工具栏*/
</style>

52
nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
View File

@@ -1,39 +1,43 @@
<template>
<div style="height: 100%">
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">{{obj.id}}</div><div
id="endpoint-tab-change-panel" class="sub-list-tab sub-list-tab-active">{{$t("config.operationlog.operationlog")}}</div><div
id="endpoint-tab-change-alertmsg" class="sub-list-tab" @click="changeTab('terminalLogTab')">{{$t("config.terminallog.terminallog")}}</div>
</div>
<div class="top-tool-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
</div>
</div>
</div>
<nz-bottom-data-list
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:layout="['searchInput', 'elementSet']"
:search-msg="searchMsg"
:tabs="tabs"
@changeTab="changeTab"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot>
<operation-log-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="subTableHeight"
:table-data="tableData"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"></operation-log-table>
</div>
</template>
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-bottom-data-list>
</template>
<script>
import dataListMixin from '@/components/common/mixin/dataList'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import operationLogTable from '@/components/common/table/settings/operationLogTable'
export default {
name: 'operationLogTab',
mixins: [dataListMixin],
mixins: [dataListMixin, subDataListMixin],
components: {
nzBottomDataList,
operationLogTable
},
data () {
@@ -66,14 +70,7 @@ export default {
}
}
},
props: {
obj: Object // 关联的实体对象
},
methods: {
// 切换tab
changeTab (tab) {
this.$emit('changeTab', tab)
},
messageStyle (e) {
if (e.column.label === this.$t('config.operationlog.state')) {
if (e.row.state === 'success') {
@@ -101,15 +98,6 @@ export default {
}
}
})
},
formatUsername (row) {
if (row.username) {
return row.username
} else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
return JSON.parse(row.params).username
} else {
return '-'
}
}
}
}

252
nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
View File

@@ -1,177 +1,51 @@
<template>
<div style="height: 100%">
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">{{obj.id}}</div><div
id="endpoint-tab-change-panel" class="sub-list-tab" @click="changeTab('operationLogTab')">{{$t("config.operationlog.operationlog")}}</div><div
id="endpoint-tab-change-alertmsg" class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.terminallog")}}</div>
</div>
<div class="top-tool-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
</div>
</div>
</div>
<el-table
id="terminal-log-list-table"
<nz-bottom-data-list
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:layout="['searchInput', 'elementSet']"
:search-msg="searchMsg"
:tabs="tabs"
@changeTab="changeTab"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot>
<terminal-log-table
ref="dataTable"
v-loading="tools.loading"
:data="tableData"
:height="mainTableHeight"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection)=>{batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span>
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</span>
:api="url"
:custom-table-title="tools.customTableTitle"
:height="subTableHeight"
:now-time="nowTime"
:table-data="tableData"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"></terminal-log-table>
</template>
<template slot-scope="scope" :column="item">
<span v-if="item.prop === 'time'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="item.prop === 'status'">
<span>{{getStatusText(scope.row.status)}}</span>
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
<template v-else-if="item.prop === 'uuid'">
<span>{{scope.row.uuid.substring(0, 8).toUpperCase()}}</span>
</template>
<template v-else-if="item.prop === 'remote'">
<span>{{getRemoteText(scope.row)}}</span>
</template>
<template v-else-if="item.prop === 'duration'">
<el-tooltip :disabled="!scope.row.status" effect="light" placement="right">
<div slot="content">
{{$t('config.terminallog.endTime')}}<br/>
{{scope.row.endTime}}
</div>
<span>{{getDuration(scope.row)}}</span>
</el-tooltip>
</template>
<template v-else-if="item.prop === 'authType'">
<span v-if="scope.row.authType == 1">{{$t('config.terminallog.password')}}</span>
<span v-else-if="scope.row.authType == 2">{{$t('config.terminallog.key')}}</span>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<template v-if="scope.row.status == 0">
<button :title="$t('config.terminallog.monitor.monitor')" class="table-operation-item" @click="$refs.dataList.showBottomBox('monitor', scope.row)"><i class="nz-icon nz-icon-JC"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['shutdown', scope.row]"><i class="nz-icon nz-icon-ZD"></i><span class="operation-dropdown-text">Kill</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<template v-else>
<button class="table-operation-item" @click="$refs.dataList.showBottomBox('cmd', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['record', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('config.terminallog.record.record')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</div>
</el-table-column>
</el-table>
</div>
</nz-bottom-data-list>
</template>
<script>
import tableMixin from '@/components/common/mixin/dataList'
import { terminalLog } from '@/components/common/js/constants'
import { calcDurationByStringTimeB } from '@/components/common/js/tools'
import dataListMixin from '@/components/common/mixin/dataList'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import terminalLogTable from '@/components/common/table/settings/terminalLogTable'
export default {
name: 'terminalLogTab',
mixins: [tableMixin],
mixins: [dataListMixin, subDataListMixin],
components: {
nzBottomDataList,
terminalLogTable
},
data () {
return {
url: 'terminal/session',
tableId: 'terminalLogTable', // 需要分页的table的id，用于记录每页数量
tableTitle: [
{
label: this.$t('config.terminallog.id'),
prop: 'id',
show: true,
width: 80
}, {
label: 'Session ID',
prop: 'uuid',
show: true
}, {
label: 'Username',
prop: 'username',
show: true
},
{
label: this.$t('config.terminallog.source'),
prop: 'remoteAddr',
show: true
},
{
label: this.$t('config.terminallog.remote'),
prop: 'remote',
show: true
},
{
label: this.$t('config.terminallog.protocol'),
prop: 'protocol',
show: true
},
{
label: this.$t('config.terminallog.startTime'),
prop: 'startTime',
show: true
},
{
label: this.$t('config.terminallog.duration'),
prop: 'duration',
show: true
},
{
label: 'AuthType',
prop: 'authType',
show: false
},
{
label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
prop: 'status',
show: true,
width: 100
}
],
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
@@ -193,52 +67,14 @@ export default {
nowTime: ''
}
},
computed: {
getStatusText () {
return function (status) {
return terminalLog.status[status]
}
},
getRemoteText () {
return function (record) {
return `${record.loginUser}@${record.host}:${record.port}`
}
},
getDuration () {
return function (record) {
if (record.endTime) {
return calcDurationByStringTimeB(record.startTime, record.endTime)
}
return calcDurationByStringTimeB(record.startTime, this.nowTime)
}
}
},
props: {
obj: Object // 关联的实体对象
},
methods: {
// 切换tab
changeTab (tab) {
this.$emit('changeTab', tab)
},
tableOperation ([command, row]) {
switch (command) {
case 'shutdown': {
this.shutdown(row)
break
}
default:
this.$refs.dataList.showBottomBox(command, row)
break
}
},
getTableData () {
const params = {
...this.searchLabel,
pageNo: this.pageObj.pageNo,
pageSize: this.pageObj.pageSize
}
this.$get('terminal/session', params).then(response => {
this.$get(this.url, params).then(response => {
this.tools.loading = false
if (response.code === 200) {
this.tableData = response.data.list
@@ -246,7 +82,7 @@ export default {
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
@@ -269,22 +105,6 @@ export default {
}
})
})
},
messageStyle (e) {
if (e.column.label == this.$t('config.terminallog.status')) {
if (e.row.status == '0') {
return 'success'
} else if (e.row.status == '1') {
return 'warning'
} else if (e.row.status == '2') {
return 'suspended'
} else if (e.row.status == '3') {
return 'danger'
} else if (e.row.status == '4') {
return 'danger'
}
}
return ''
}
}
}

19
nezha-fronted/src/components/common/elementSet.vue
View File

@@ -20,17 +20,17 @@
</div>
</div>
<div class="custom-bottom-btns">
<button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" :id="id+'-element-set-none'">
<button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button>
<button v-if="!isCancel" type="button" @click="batchHandler(true)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" :id="id+'-element-set-all'">
<button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="batchHandler(true)">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button>
<div>
<button type="button" @click="esc" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" :id="id+'-element-set-esc'">
<button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="esc">
<span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
</button>
<button type="button" @click="save" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" :id="id+'-element-set-save'">
<button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" @click="save">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
</div>
@@ -43,9 +43,8 @@ export default {
props: {
customTableTitle: Array, // 自定义的title
originalTableTitle: Array, // 原始title
path: String,
allowedAll: { default: false },
id: { type: String, default: 'table' }
tableId: String,
allowedAll: { default: false }
},
data () {
return {
@@ -53,7 +52,7 @@ export default {
}
},
created () {
const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
if (localStorageTitle) {
for (const title of this.originalTableTitle) {
for (const lsTitle of localStorageTitle) {
@@ -62,7 +61,7 @@ export default {
}
}
}
localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path, JSON.stringify(localStorageTitle))
localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
}
},
watch: {
@@ -103,7 +102,7 @@ export default {
save () {
this.$emit('update', this.custom)
localStorage.setItem(
'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + ((typeof this.path !== 'undefined') ? this.path : this.$route.path),
'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId,
JSON.stringify(this.custom)
)
this.esc()

6
nezha-fronted/src/components/common/js/tools.js
View File

@@ -135,7 +135,7 @@ export const bottomBoxWindow = {
const mainListDom = document.querySelector('.main-list') // 主列表
const subBoxDom = document.querySelector('.sub-box') // 副列表
const subListDom = document.querySelector('.sub-list') // 副列表
const contentRightDom = document.querySelector('.content-right') // 右侧内容区
const contentRightDom = document.querySelector('.list-page') // 右侧内容区
const resizeBarHeight = 9 // resize横条高度
const minHeight = 15 // 主、副列表最小高度限制为15
const contentHideHeight = 100 // 主、副列表高度低于100时隐藏内容
@@ -205,7 +205,7 @@ export const bottomBoxWindow = {
},
exitFullScreen (vm) {
window.resizing = true
const contentRightDom = document.querySelector('.content-right') // 右侧内容区
const contentRightDom = document.querySelector('.list-page') // 右侧内容区
const contentRightHeight = contentRightDom.offsetHeight// 可视高度
// 主列表
document.querySelector('.main-list-with-sub').style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)'
@@ -225,7 +225,7 @@ export const bottomBoxWindow = {
},
fullScreen (vm) {
window.resizing = true
const contentRightDom = document.querySelector('.content-right') // 右侧内容区
const contentRightDom = document.querySelector('.list-page') // 右侧内容区
const contentRightHeight = contentRightDom.offsetHeight// 可视高度
vm.bottomBox.isFullScreen = true
// 主列表

4
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -202,8 +202,8 @@ export default {
if (pageSize && pageSize !== 'undefined') {
this.pageObj.pageSize = pageSize
}
this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
: this.$refs.dataTable.tableTitle
this.getTableData()
},

19
nezha-fronted/src/components/common/mixin/subDataList.js Normal file
View File

@@ -0,0 +1,19 @@
export default {
props: {
obj: Object, // 关联的实体对象
tabs: {
type: Array
}
},
data () {
return {
subTableHeight: this.$tableHeight.openSubList.subList
}
},
methods: {
// 切换tab
changeTab (tab) {
this.$emit('changeTab', tab)
}
}
}

22
nezha-fronted/src/components/common/table/nzDataList.vue
View File

@@ -4,11 +4,12 @@
<div :class="{'main-list-with-sub': bottomBox.showSubList}" class="main-list">
<!-- 顶部工具栏 -->
<div class="main-modal"></div>
<div class="main-container">
<div v-show="bottomBox.mainResizeShow" class="top-tools">
<div class="top-tool-main-left" style="width: 300px">
<div class="top-tool-left" style="width: 300px">
<slot name="top-tool-left"></slot>
</div>
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-main-right">
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
<div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
<search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
</div>
@@ -19,13 +20,20 @@
</button>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>
<!-- <div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
</div>
<div v-show="bottomBox.mainResizeShow" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div v-show="bottomBox.mainResizeShow" class="pagination-bottom">
<slot name="pagination"></slot>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
id="account-list"
:tableId="tableId"
ref="customTableTitle"
:custom-table-title="customTableTitle"
:original-table-title="tableTitle"
@@ -33,12 +41,6 @@
@update="updateCustomTableTitle"
></element-set>
</transition>
<div v-show="bottomBox.mainResizeShow" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div class="pagination-bottom">
<slot name="pagination"></slot>
</div>
</div>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList"

3
nezha-fronted/src/components/common/table/settings/operationLogTable.vue
View File

@@ -126,6 +126,9 @@ export default {
return '-'
}
}
},
mounted () {
console.info(this.customTableTitle)
}
}
</script>

1
nezha-fronted/src/components/layout/container.vue
View File

@@ -16,7 +16,6 @@ export default {
<style lang="scss">
.container {
padding: 10px;
box-sizing: border-box;
height: calc(100% - 50px);
background-color: #f6f6f6;

2
nezha-fronted/src/main.js
View File

@@ -54,7 +54,7 @@ Vue.prototype.$tableHeight = { // 列表页表格的高度
normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
openSubList: { // 打开二级列表后的高度
mainList: 'calc(100% - 60px)',
subList: 'calc(100% - 86px)',
subList: 'calc(100% - 38px)',
toTopBtnTop: 'calc(50% - 11px)'
},
toTopBtnTop: 'calc(100% - 73px)',