mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-18 08:12:33 +00:00
perf: 还原收集用户
This commit is contained in:
ibuler
@@ -1,249 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col v-show="iShowTree" :span="iShowTree?4:0">
|
||||
<AutoDataZTree
|
||||
ref="AUtoDataZTree"
|
||||
:setting="treeSetting"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="iShowTree?9:11">
|
||||
<div class="mini">
|
||||
<div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
|
||||
<i v-show="iShowTree" class="fa fa-angle-left fa-x" />
|
||||
<i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
|
||||
</div>
|
||||
</div>
|
||||
<GenericListTable
|
||||
ref="LeftTable"
|
||||
class="asset-table"
|
||||
:header-actions="leftTable.headerActions"
|
||||
:table-config="leftTable.tableConfig"
|
||||
@row-click="leftTable.tableConfig.rowClick"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="iShowTree?11:13">
|
||||
<GenericListTable
|
||||
v-if="!isInit"
|
||||
ref="RightTable"
|
||||
class="asset-user-table"
|
||||
:header-actions="rightTable.headerActions"
|
||||
:table-config="rightTable.tableConfig"
|
||||
/>
|
||||
<div v-else class="noDataR">
|
||||
<div class="hintWrap">
|
||||
<div>{{ $t('accounts.PleaseClickLeftAssetToViewGatheredUser') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<TreeTable :table-config="tableConfig" :tree-setting="treeSetting" :header-actions="headerActions" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GenericListTable from '@/layout/components/GenericListTable'
|
||||
import AutoDataZTree from '@/components/AutoDataZTree/index'
|
||||
import { ChoicesFormatter, DetailFormatter } from '@/components/TableFormatters'
|
||||
|
||||
import TreeTable from '@/components/TreeTable'
|
||||
export default {
|
||||
name: 'AssetAccountList',
|
||||
components: {
|
||||
AutoDataZTree, GenericListTable
|
||||
TreeTable
|
||||
},
|
||||
data() {
|
||||
const vm = this
|
||||
return {
|
||||
isInit: true,
|
||||
clickedRow: {},
|
||||
iShowTree: true,
|
||||
treeSetting: {
|
||||
showMenu: false,
|
||||
showRefresh: false,
|
||||
showAssets: false,
|
||||
url: '',
|
||||
treeUrl: '/api/v1/assets/nodes/children/tree/',
|
||||
callback: {
|
||||
onSelected: function(event, treeNode) {
|
||||
vm.leftTable.tableConfig.url = `/api/v1/assets/assets/?node_id=${treeNode.meta.node.id}`
|
||||
vm.isInit = true
|
||||
showRefresh: true,
|
||||
showAssets: true,
|
||||
url: '/api/v1/assets/gathered-users/',
|
||||
nodeUrl: '/api/v1/assets/nodes/',
|
||||
// ?assets=0不显示资产. =1显示资产
|
||||
treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
|
||||
},
|
||||
tableConfig: {
|
||||
url: '/api/v1/assets/gathered-users/',
|
||||
hasTree: true,
|
||||
columns: [
|
||||
'hostname', 'ip', 'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated'
|
||||
],
|
||||
columnsMeta: {
|
||||
hostname: {
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
ip: {
|
||||
width: 120
|
||||
},
|
||||
username: {
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
present: {
|
||||
width: 80
|
||||
},
|
||||
ip_last_login: {
|
||||
width: 120
|
||||
}
|
||||
}
|
||||
},
|
||||
leftTable: {
|
||||
tableConfig: {
|
||||
url: '/api/v1/assets/assets/',
|
||||
columns: [
|
||||
'hostname', 'ip', 'public_ip', 'admin_user_display',
|
||||
'protocols', 'platform', 'connectivity',
|
||||
'created_by', 'date_created', 'comment', 'org_name'
|
||||
],
|
||||
columnsShow: {
|
||||
min: ['hostname', 'ip', 'platform'],
|
||||
default: ['hostname', 'ip', 'connectivity', 'platform']
|
||||
},
|
||||
columnsMeta: {
|
||||
hostname: {
|
||||
formatter: DetailFormatter,
|
||||
formatterArgs: {
|
||||
route: 'AssetDetail',
|
||||
routeQuery: {
|
||||
activeTab: 'Detail'
|
||||
}
|
||||
},
|
||||
showOverflowTooltip: true
|
||||
headerActions: {
|
||||
hasCreate: false,
|
||||
hasLeftActions: false,
|
||||
hasImport: false,
|
||||
searchConfig: {
|
||||
exclude: ['asset'],
|
||||
options: [
|
||||
{
|
||||
label: this.$t('assets.Hostname'),
|
||||
value: 'asset__hostname'
|
||||
},
|
||||
connectivity: {
|
||||
label: this.$t('assets.Reachable'),
|
||||
formatter: ChoicesFormatter,
|
||||
formatterArgs: {
|
||||
iconChoices: {
|
||||
0: 'fa-times text-danger',
|
||||
1: 'fa-check text-primary',
|
||||
2: 'fa-circle text-warning'
|
||||
},
|
||||
typeChange: function(val) {
|
||||
if (!val) {
|
||||
return 2
|
||||
}
|
||||
return val.status
|
||||
},
|
||||
hasTips: true
|
||||
},
|
||||
width: '90px',
|
||||
align: 'center'
|
||||
{
|
||||
label: 'IP',
|
||||
value: 'asset__ip'
|
||||
}
|
||||
},
|
||||
tableAttrs: {
|
||||
stripe: false, // 斑马纹表格
|
||||
border: true, // 表格边框
|
||||
fit: true, // 宽度自适应,
|
||||
tooltipEffect: 'dark',
|
||||
rowClassName({ row, rowIndex }) {
|
||||
if (row === vm.clickedRow) {
|
||||
return 'row-clicked'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
rowClick: function(row, column, event) {
|
||||
vm.rightTable.tableConfig.url = `/api/v1/assets/gathered-users/?asset_id=${row.id}`
|
||||
vm.clickedRow = row
|
||||
vm.isInit = false
|
||||
}
|
||||
},
|
||||
headerActions: {
|
||||
hasLeftActions: false,
|
||||
hasCreate: false,
|
||||
hasExport: false,
|
||||
hasImport: false,
|
||||
hasBulkDelete: false,
|
||||
hasBulkUpdate: false
|
||||
}
|
||||
},
|
||||
rightTable: {
|
||||
tableConfig: {
|
||||
url: `/api/v1/assets/gathered-users/?asset__hostname=ShowFirstAssetRelated`,
|
||||
columns: [
|
||||
'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated', 'org_name'
|
||||
],
|
||||
columnsShow: {
|
||||
min: ['username'],
|
||||
default: [
|
||||
'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated'
|
||||
]
|
||||
},
|
||||
columnsMeta: {
|
||||
username: {
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
present: {
|
||||
width: 80
|
||||
},
|
||||
ip_last_login: {
|
||||
width: 120
|
||||
}
|
||||
},
|
||||
tableAttrs: {
|
||||
stripe: true, // 斑马纹表格
|
||||
border: true, // 表格边框
|
||||
fit: true, // 宽度自适应,
|
||||
tooltipEffect: 'dark',
|
||||
rowClassName({ row, rowIndex }) {
|
||||
return 'row-background-color'
|
||||
}
|
||||
}
|
||||
},
|
||||
headerActions: {
|
||||
hasLeftActions: false,
|
||||
hasCreate: false,
|
||||
hasExport: true,
|
||||
hasImport: false,
|
||||
hasBulkDelete: false,
|
||||
hasBulkUpdate: false,
|
||||
searchConfig: {
|
||||
exclude: ['asset']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onGatherUserTasks() {
|
||||
this.$router.push({ name: 'GatherUserTaskList' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.asset-table {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& >>> .table-content {
|
||||
margin-left: 21px;
|
||||
}
|
||||
& ::v-deep .el-table__row{
|
||||
height: 40px;
|
||||
& > td{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mini-button{
|
||||
width: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
padding: 9px 0;
|
||||
background-color: #1ab394;
|
||||
border-color: #1ab394;
|
||||
color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
line-height: 1.428;
|
||||
cursor:pointer;
|
||||
}
|
||||
.noDataR{
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-direction: column;
|
||||
.hintWrap{
|
||||
color: #D4D6E6;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.asset-user-table{
|
||||
padding-left: 20px;
|
||||
& ::v-deep .el-table__header-wrapper thead tr{
|
||||
height: 40px;
|
||||
& > th{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user