This commit is contained in:
ibuler 2022-04-28 15:52:10 +08:00
parent bd935e9dc2
commit 29e51e92a4
4 changed files with 262 additions and 298 deletions

View File

@ -724,6 +724,8 @@
"CreateReplayStorage": "创建录像存储",
"Dashboard": "仪表盘",
"DatabaseApp": "数据库",
"RemoteApps": "远程应用",
"Clouds": "云设施",
"DatabaseAppCreate": "创建数据库应用",
"DatabaseAppDetail": "数据库详情",
"DatabaseAppPermission": "数据库授权",

View File

@ -45,111 +45,6 @@ export default [
}
]
},
{
path: 'hosts',
component: empty,
redirect: '',
meta: { title: i18n.t('route.AssetList'), permissions: ['assets.view_asset'] },
children: [
{
path: '',
name: 'HostList',
component: () => import('@/views/assets/Host/HostList.vue'),
meta: { title: i18n.t('route.HostList') }
},
{
path: 'create',
name: 'HostCreate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.HostCreate') }
},
{
path: ':id',
name: 'HostDetail',
component: () => import('@/views/assets/Asset/AssetDetail'),
hidden: true,
meta: { title: i18n.t('route.HostDetail') }
},
{
path: ':id/update',
name: 'HostUpdate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.HostUpdate') }
}
]
},
{
path: 'devices',
component: empty,
redirect: '',
meta: { title: i18n.t('route.NetworkDevices'), permissions: ['assets.view_asset'] },
children: [
{
path: '',
name: 'DeviceList',
component: () => import('@/views/assets/Asset/AssetList.vue'),
meta: { title: i18n.t('route.NetworkDevices'), permissions: [] }
},
{
path: 'create',
name: 'DeviceCreate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.DeviceCreate') }
},
{
path: ':id',
name: 'DeviceDetail',
component: () => import('@/views/assets/Asset/AssetDetail'),
hidden: true,
meta: { title: i18n.t('route.DeviceDetail') }
},
{
path: ':id/update',
name: 'DeviceUpdate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.DeviceUpdate') }
}
]
},
{
path: 'databases',
component: empty,
redirect: '',
meta: { title: i18n.t('route.Databases'), permissions: [] },
children: [
{
path: '',
name: 'DatabaseList',
component: () => import('@/views/assets/Asset/AssetList.vue'),
meta: { title: i18n.t('route.Databases'), permissions: [] }
},
{
path: 'create',
name: 'DatabaseCreate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.DatabaseCreate') }
},
{
path: ':id',
name: 'AssetDetail',
component: () => import('@/views/assets/Asset/AssetDetail'),
hidden: true,
meta: { title: i18n.t('route.AssetDetail') }
},
{
path: ':id/update',
name: 'AssetUpdate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.AssetUpdate') }
}
]
},
{
path: 'domains',
component: empty,

View File

@ -1,51 +1,23 @@
<template>
<div>
<GenericTreeListPage ref="TreeList" :table-config="tableConfig" :help-message="helpMessage" :header-actions="headerActions" :tree-setting="treeSetting">
<div slot="rMenu">
<!-- <li class="divider" />-->
<li id="m_add_asset_to_node" v-perms="'assets.add_assettonode'" class="rmenu" tabindex="-1" @click="rMenuAddAssetToNode">
<i class="fa fa-clone" /> {{ this.$t('tree.AddAssetToNode') }}
</li>
<li id="m_move_asset_to_node" v-perms="'assets.move_assettonode'" class="rmenu" tabindex="-1" @click="rMenuMoveAssetToNode">
<i class="fa fa-scissors" /> {{ this.$t('tree.MoveAssetToNode') }}
</li>
<li v-if="$hasPerm('assets.move_assettonode | assets.add_assettonode')" class="divider" />
<li id="m_update_node_asset_hardware_info" v-perms="'assets.refresh_assethardwareinfo'" class="rmenu" tabindex="-1" @click="rMenuUpdateNodeAssetHardwareInfo">
<i class="fa fa-refresh" /> {{ this.$t('tree.UpdateNodeAssetHardwareInfo') }}
</li>
<li id="m_test_node_asset_connectivity" v-perms="'assets.test_assetconnectivity'" class="rmenu" tabindex="-1" @click="rMenuTestNodeAssetConnectivity">
<i class="fa fa-link" /> {{ this.$t('tree.TestNodeAssetConnectivity') }}
</li>
<li v-if="$hasPerm('assets.add_assettonode | assets.test_assetconnectivity')" class="divider" />
<li id="m_show_asset_only_current_node" class="rmenu" tabindex="-1" @click="rMenuShowAssetOnlyCurrentNode">
<i class="fa fa-indent" /> {{ this.$t('tree.ShowAssetOnlyCurrentNode') }}
</li>
<li id="m_show_asset_all_children_node" class="rmenu" tabindex="-1" @click="rMenuShowAssetAllChildrenNode">
<i class="fa fa-align-justify" /> {{ this.$t('tree.ShowAssetAllChildrenNode') }}
</li>
<li class="divider" />
<li id="m_check_assets_amount" v-perms="'assets.change_node'" class="rmenu" tabindex="-1" @click="rCheckAssetsAmount">
<i class="fa fa-clone" /> {{ this.$t('tree.CheckAssetsAmount') }}
</li>
<li id="m_show_node_info" class="rmenu" tabindex="-1" @click="rMenuShowNodeInfo">
<i class="fa fa-info-circle" /> {{ this.$t('tree.ShowNodeInfo') }}
</li>
</div>
<GenericTreeListPage
ref="TreeList"
:table-config="tableConfig"
:help-message="helpMessage"
:header-actions="headerActions"
:tree-setting="treeSetting"
>
<TreeMenu
slot="rMenu"
:tree="treeRef"
@showAll="showAll"
/>
</GenericTreeListPage>
<Dialog width="30%" :title="this.$t('assets.NodeInformation')" :visible.sync="nodeInfoDialogSetting.dialogVisible" :show-cancel="false" :show-confirm="false">
<el-row v-for="item in nodeInfoDialogSetting.items" :key="'card-' + item.key" :gutter="10" class="item">
<el-col :md="6" :sm="24"><div class="item-label"><label>{{ item.label }}: </label></div></el-col>
<el-col :md="18" :sm="24"><div class="item-text">{{ item.value }}</div></el-col>
</el-row>
</Dialog>
<AssetBulkUpdateDialog
:visible.sync="updateSelectedDialogSetting.visible"
v-bind="updateSelectedDialogSetting"
/>
<NodeAssetsUpdateDialog
:visible.sync="nodeAssetsUpdateDialog.visible"
v-bind="nodeAssetsUpdateDialog"
/>
</div>
</template>
@ -53,23 +25,21 @@
import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
import { DetailFormatter, ActionsFormatter, TagsFormatter } from '@/components/TableFormatters'
import $ from '@/utils/jquery-vendor'
import Dialog from '@/components/Dialog'
import { mapGetters } from 'vuex'
import { connectivityMeta } from '@/components/AccountListTable/const'
import { openTaskPage } from '@/utils/jms'
import AssetBulkUpdateDialog from './AssetBulkUpdateDialog'
import NodeAssetsUpdateDialog from './NodeAssetsUpdateDialog'
import TreeMenu from './TreeMenu'
export default {
components: {
GenericTreeListPage,
Dialog,
AssetBulkUpdateDialog,
NodeAssetsUpdateDialog
TreeMenu
},
data() {
const vm = this
return {
treeRef: null,
treeSetting: {
showMenu: true,
showRefresh: true,
@ -151,7 +121,10 @@ export default {
type: 'primary',
can: vm.$hasPerm('assets.refresh_assethardwareinfo'),
callback: function({ cellValue, tableData, row }) {
return this.$router.push({ name: 'AssetMoreInformationEdit', params: { id: row.id }})
return this.$router.push({
name: 'AssetMoreInformationEdit',
params: { id: row.id }
})
}
}
]
@ -222,8 +195,8 @@ export default {
title: this.$t('common.updateSelected'),
can: ({ selectedRows }) => {
return selectedRows.length > 0 &&
!vm.currentOrgIsRoot &&
vm.$hasPerm('assets.change_asset')
!vm.currentOrgIsRoot &&
vm.$hasPerm('assets.change_asset')
},
callback: ({ selectedRows }) => {
vm.updateSelectedDialogSetting.selectedRows = selectedRows
@ -238,8 +211,8 @@ export default {
return false
}
return selectedRows.length > 0 &&
!vm.currentOrgIsRoot &&
vm.$hasPerm('assets.change_node')
!vm.currentOrgIsRoot &&
vm.$hasPerm('assets.change_node')
},
callback: function({ selectedRows, reloadTable }) {
const assetsId = []
@ -262,18 +235,9 @@ export default {
]
},
helpMessage: this.$t('assets.AssetListHelpMessage'),
nodeInfoDialogSetting: {
dialogVisible: false,
items: []
},
updateSelectedDialogSetting: {
visible: false,
selectedRows: []
},
nodeAssetsUpdateDialog: {
visible: false,
action: 'add',
selectNode: null
}
}
},
@ -286,6 +250,7 @@ export default {
this.treeSetting.showCreate = this.$hasPerm('assets.add_node')
this.treeSetting.showUpdate = this.$hasPerm('assets.change_node')
this.treeSetting.showDelete = this.$hasPerm('assets.delete_node')
this.treeRef = this.$refs.TreeList
},
methods: {
decorateRMenu() {
@ -298,145 +263,18 @@ export default {
$('#m_show_asset_only_current_node').css('color', '#606266')
}
},
hideRMenu() {
this.$refs.TreeList.hideRMenu()
},
getSelectedNodes() {
return this.$refs.TreeList.getSelectedNodes()
},
rMenuAddAssetToNode() {
this.nodeAssetsUpdateDialog.visible = true
this.nodeAssetsUpdateDialog.action = 'add'
this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
},
rMenuMoveAssetToNode() {
this.nodeAssetsUpdateDialog.visible = true
this.nodeAssetsUpdateDialog.action = 'move'
this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
},
rMenuUpdateNodeAssetHardwareInfo: function() {
this.hideRMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.post(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/tasks/`,
{ 'action': 'refresh' }
).then((res) => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
},
rMenuTestNodeAssetConnectivity: function() {
this.hideRMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.post(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/tasks/`,
{ 'action': 'test' }
).then((res) => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
},
rMenuShowAssetOnlyCurrentNode: function() {
this.hideRMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$cookie.set('show_current_asset', '1', 1)
showAll({ node, showCurrentAsset }) {
this.$cookie.set('show_current_asset', showCurrentAsset, 1)
this.decorateRMenu()
const url = `${this.treeSetting.url}?node_id=${currentNode.meta.data.id}&show_current_asset=1`
const url = `${this.treeSetting.url}?node_id=${node.meta.data.id}&show_current_asset=${showCurrentAsset}`
this.$refs.TreeList.$refs.TreeTable.handleUrlChange(url)
},
rMenuShowAssetAllChildrenNode: function() {
this.hideRMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$cookie.set('show_current_asset', '0', 1)
this.decorateRMenu()
const url = `${this.treeSetting.url}?node_id=${currentNode.meta.data.id}&show_current_asset=0`
this.$refs.TreeList.$refs.TreeTable.handleUrlChange(url)
},
rMenuShowNodeInfo: function() {
this.hideRMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.get(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/`
).then(res => {
this.nodeInfoDialogSetting.dialogVisible = true
this.nodeInfoDialogSetting.items = [
{ key: 'id', label: 'ID', value: res.id },
{ key: 'name', label: this.$t('assets.Name'), value: res.name },
{ key: 'fullName', label: this.$t('assets.FullName'), value: res.full_value }
]
}).catch(error => {
this.$message.error(this.$t('common.ErrorMsg' + ' ' + error))
})
},
rCheckAssetsAmount: function() {
this.$axios.post(
`/api/v1/assets/nodes/check_assets_amount_task/`
).then(res => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
}
}
}
</script>
<style lang="scss" scoped>
.rmenu {
font-size: 12px;
padding: 0 16px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 24px;
line-height: 24px;
box-sizing: border-box;
cursor: pointer;
}
.rmenu > a:hover, .dropdown-menu > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.rmenu:hover{
background-color: #f5f7fa;
}
.divider{
margin: 1px 0;
list-style: none outside none;
background-color: #e5e5e5;
height: 1px
}
.asset-select-dialog >>> .transition-box:first-child {
background-color: #f3f3f3 ;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.asset-select-dialog >>> .transition-box:first-child {
background-color: #f3f3f3;
}
</style>

View File

@ -0,0 +1,229 @@
<template>
<div>
<li id="m_add_asset_to_node" v-perms="'assets.add_assettonode'" class="rmenu" tabindex="-1" @click="rMenuAddAssetToNode">
<i class="fa fa-clone" /> {{ this.$t('tree.AddAssetToNode') }}
</li>
<li id="m_move_asset_to_node" v-perms="'assets.move_assettonode'" class="rmenu" tabindex="-1" @click="rMenuMoveAssetToNode">
<i class="fa fa-scissors" /> {{ this.$t('tree.MoveAssetToNode') }}
</li>
<li v-if="$hasPerm('assets.move_assettonode | assets.add_assettonode')" class="divider" />
<li id="m_update_node_asset_hardware_info" v-perms="'assets.refresh_assethardwareinfo'" class="rmenu" tabindex="-1" @click="rMenuUpdateNodeAssetHardwareInfo">
<i class="fa fa-refresh" /> {{ this.$t('tree.UpdateNodeAssetHardwareInfo') }}
</li>
<li id="m_test_node_asset_connectivity" v-perms="'assets.test_assetconnectivity'" class="rmenu" tabindex="-1" @click="rMenuTestNodeAssetConnectivity">
<i class="fa fa-link" /> {{ this.$t('tree.TestNodeAssetConnectivity') }}
</li>
<li v-if="$hasPerm('assets.add_assettonode | assets.test_assetconnectivity')" class="divider" />
<li id="m_show_asset_only_current_node" class="rmenu" tabindex="-1" @click="rMenuShowAssetOnlyCurrentNode">
<i class="fa fa-indent" /> {{ this.$t('tree.ShowAssetOnlyCurrentNode') }}
</li>
<li id="m_show_asset_all_children_node" class="rmenu" tabindex="-1" @click="rMenuShowAssetAllChildrenNode">
<i class="fa fa-align-justify" /> {{ this.$t('tree.ShowAssetAllChildrenNode') }}
</li>
<li class="divider" />
<li id="m_check_assets_amount" v-perms="'assets.change_node'" class="rmenu" tabindex="-1" @click="rCheckAssetsAmount">
<i class="fa fa-clone" /> {{ this.$t('tree.CheckAssetsAmount') }}
</li>
<li id="m_show_node_info" class="rmenu" tabindex="-1" @click="rMenuShowNodeInfo">
<i class="fa fa-info-circle" /> {{ this.$t('tree.ShowNodeInfo') }}
</li>
<NodeAssetsUpdateDialog
:visible.sync="nodeAssetsUpdateDialog.visible"
v-bind="nodeAssetsUpdateDialog"
/>
<Dialog
width="50%"
:title="this.$t('assets.NodeInformation')"
:visible.sync="nodeInfoDialogSetting.dialogVisible"
:show-cancel="false"
:show-confirm="false"
>
<el-row
v-for="item in nodeInfoDialogSetting.items"
:key="'card-' + item.key"
:gutter="10"
class="item"
>
<el-col :md="6" :sm="24">
<div class="item-label"><label>{{ item.label }}: </label></div>
</el-col>
<el-col :md="18" :sm="24">
<div class="item-text">{{ item.value }}</div>
</el-col>
</el-row>
</Dialog>
</div>
</template>
<script>
import { openTaskPage } from '@/utils/jms'
import NodeAssetsUpdateDialog from './NodeAssetsUpdateDialog'
import Dialog from '@/components/Dialog'
export default {
name: 'TreeMenu',
components: {
NodeAssetsUpdateDialog,
Dialog
},
props: {
tree: {
type: Object,
require: true
}
},
data() {
return {
nodeAssetsUpdateDialog: {
visible: false,
action: 'add',
selectNode: null
},
nodeInfoDialogSetting: {
dialogVisible: false,
items: []
}
}
},
methods: {
rMenuAddAssetToNode() {
this.nodeAssetsUpdateDialog.visible = true
this.nodeAssetsUpdateDialog.action = 'add'
this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
},
rMenuMoveAssetToNode() {
this.nodeAssetsUpdateDialog.visible = true
this.nodeAssetsUpdateDialog.action = 'move'
this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
},
rMenuUpdateNodeAssetHardwareInfo() {
this.hideMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.post(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/tasks/`,
{ 'action': 'refresh' }
).then((res) => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
},
rMenuTestNodeAssetConnectivity() {
this.hideMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.post(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/tasks/`,
{ 'action': 'test' }
).then((res) => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
},
rMenuShowAssetOnlyCurrentNode() {
this.hideMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$emit('showAll', { node: currentNode, showCurrentAsset: 1 })
},
rMenuShowAssetAllChildrenNode() {
this.hideMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$emit('showAll', { node: currentNode, showCurrentAsset: 0 })
},
rMenuShowNodeInfo() {
this.hideMenu()
const currentNode = this.getSelectedNodes()[0]
if (!currentNode) {
return
}
this.$axios.get(
`/api/v1/assets/nodes/${currentNode.meta.data.id}/`
).then(res => {
this.nodeInfoDialogSetting.dialogVisible = true
this.nodeInfoDialogSetting.items = [
{ key: 'id', label: 'ID', value: res.id },
{ key: 'name', label: this.$t('assets.Name'), value: res.name },
{ key: 'fullName', label: this.$t('assets.FullName'), value: res.full_value }
]
}).catch(error => {
this.$message.error(this.$t('common.ErrorMsg' + ' ' + error))
})
},
rCheckAssetsAmount() {
this.$axios.post(
`/api/v1/assets/nodes/check_assets_amount_task/`
).then(res => {
openTaskPage(res['task'])
}).catch(error => {
this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
})
},
hideMenu() {
console.log('Tree: ', this.tree)
this.tree.hideRMenu()
},
getSelectedNodes() {
return this.tree.getSelectedNodes()
}
}
}
</script>
<style lang="scss" scoped>
.rmenu {
font-size: 12px;
padding: 0 16px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 24px;
line-height: 24px;
box-sizing: border-box;
cursor: pointer;
}
div.rMenu li {
margin: 6px 0;
cursor: pointer;
list-style: none outside none;
}
.rmenu > a:hover, .dropdown-menu > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.rmenu:hover {
background-color: #f5f7fa;
}
.divider {
margin: 1px 0;
list-style: none outside none;
background-color: #e5e5e5;
height: 1px
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
</style>