Skip to content

Commit

Permalink
feat:ci detail share (#403)
Browse files Browse the repository at this point in the history
  • Loading branch information
wang-liang0615 authored Feb 27, 2024
1 parent ef1d0c3 commit f010b96
Show file tree
Hide file tree
Showing 13 changed files with 257 additions and 61 deletions.
13 changes: 10 additions & 3 deletions cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default {
selectedRowKeys: {
type: Array,
default: () => [],
}
},
},
data() {
return {
Expand Down Expand Up @@ -179,7 +179,12 @@ export default {
this.fuzzySearch = ''
},
},
inject: ['setPreferenceSearchCurrent'],
inject: {
setPreferenceSearchCurrent: {
from: 'setPreferenceSearchCurrent',
default: null,
},
},
mounted() {
if (this.type === 'resourceSearch') {
this.getCITypeGroups()
Expand Down Expand Up @@ -234,7 +239,9 @@ export default {
}
},
emitRefresh() {
this.setPreferenceSearchCurrent(null)
if (this.setPreferenceSearchCurrent) {
this.setPreferenceSearchCurrent(null)
}
this.$nextTick(() => {
this.$emit('refresh', true)
})
Expand Down
3 changes: 3 additions & 0 deletions cmdb-ui/src/modules/cmdb/lang/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const cmdb_en = {
operationHistory: 'Operation Audit',
relationType: 'Relation Type',
ad: 'AutoDiscovery',
cidetail: 'CI Detail'
},
ciType: {
ciType: 'CIType',
Expand Down Expand Up @@ -467,6 +468,8 @@ const cmdb_en = {
tips10: 'Other attributes of the CIType are computed using expressions\n\nA code snippet computes the returned value.',
newUpdateField: 'Add a Attribute',
attributeSettings: 'Attribute Settings',
share: 'Share',
noPermission: 'No Permission'
},
serviceTree: {
deleteNode: 'Delete Node',
Expand Down
3 changes: 3 additions & 0 deletions cmdb-ui/src/modules/cmdb/lang/zh.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const cmdb_zh = {
operationHistory: '操作审计',
relationType: '关系类型',
ad: '自动发现',
cidetail: 'CI 详情'
},
ciType: {
ciType: '模型',
Expand Down Expand Up @@ -466,6 +467,8 @@ const cmdb_zh = {
tips10: '模型的其他属性通过表达式的方式计算出来\n\n一个代码片段计算返回的值',
newUpdateField: '新增修改字段',
attributeSettings: '字段设置',
share: '分享',
noPermission: '暂无权限'
},
serviceTree: {
deleteNode: '删除节点',
Expand Down
7 changes: 7 additions & 0 deletions cmdb-ui/src/modules/cmdb/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,13 @@ const genCmdbRoutes = async () => {
meta: { title: 'cmdb.menu.adCIs', icon: 'ops-cmdb-adc', selectedIcon: 'ops-cmdb-adc-selected', keepAlive: false },
component: () => import('../views/discoveryCI/index.vue')
},
{
path: `/cmdb/cidetail/:typeId/:ciId`,
name: 'cmdb_ci_detail',
hidden: true,
meta: { title: 'cmdb.menu.cidetail', keepAlive: false },
component: () => import('../views/ci/ciDetailPage.vue')
},
{
path: '/cmdb/disabled2',
name: 'cmdb_disabled2',
Expand Down
71 changes: 71 additions & 0 deletions cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div>
<div class="ci-detail-header">{{ this.type.name }}</div>
<div class="ci-detail-page">
<CiDetailTab ref="ciDetailTab" :typeId="typeId" />
</div>
</div>
</template>

<script>
import CiDetailTab from './modules/ciDetailTab.vue'
import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
import { getCIType } from '@/modules/cmdb/api/CIType'

export default {
name: 'CiDetailPage',
components: { CiDetailTab },
data() {
return {
typeId: Number(this.$route.params.typeId),
type: {},
attrList: [],
attributes: {},
}
},
provide() {
return {
attrList: () => {
return this.attrList
},
attributes: () => {
return this.attributes
},
}
},
mounted() {
const { ciId = undefined } = this.$route.params
if (ciId) {
this.$refs.ciDetailTab.create(Number(ciId))
}
getCIType(this.typeId).then((res) => {
this.type = res.ci_types[0]
})
this.getAttributeList()
},
methods: {
async getAttributeList() {
await getCITypeAttributesById(this.typeId).then((res) => {
this.attrList = res.attributes
this.attributes = res
})
},
},
}
</script>

<style lang="less" scoped>
@import '~@/style/static.less';

.ci-detail-header {
border-left: 3px solid @primary-color;
padding-left: 10px;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
}
.ci-detail-page {
background-color: #fff;
height: calc(100vh - 122px);
}
</style>
6 changes: 3 additions & 3 deletions cmdb-ui/src/modules/cmdb/views/ci/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
</div>
</SearchForm>
<CiDetail ref="detail" :typeId="typeId" />
<CiDetailDrawer ref="detail" :typeId="typeId" />
<ops-table
:id="`cmdb-ci-${typeId}`"
border
Expand Down Expand Up @@ -297,7 +297,7 @@ import router, { resetRouter } from '@/router'

import SearchForm from '../../components/searchForm/SearchForm.vue'
import CreateInstanceForm from './modules/CreateInstanceForm'
import CiDetail from './modules/CiDetail'
import CiDetailDrawer from './modules/ciDetailDrawer.vue'
import EditAttrsPopover from './modules/editAttrsPopover'
import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
Expand All @@ -320,7 +320,7 @@ export default {
components: {
SearchForm,
CreateInstanceForm,
CiDetail,
CiDetailDrawer,
JsonEditor,
PasswordField,
EditAttrsPopover,
Expand Down
50 changes: 50 additions & 0 deletions cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailDrawer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<CustomDrawer
width="80%"
placement="left"
@close="
() => {
visible = false
}
"
:visible="visible"
:hasTitle="false"
:hasFooter="false"
:bodyStyle="{ padding: 0, height: '100vh' }"
destroyOnClose
>
<CiDetailTab ref="ciDetailTab" :typeId="typeId" :treeViewsLevels="treeViewsLevels" />
</CustomDrawer>
</template>

<script>
import CiDetailTab from './ciDetailTab.vue'
export default {
name: 'CiDetailDrawer',
components: { CiDetailTab },
props: {
typeId: {
type: Number,
required: false,
default: null,
},
treeViewsLevels: {
type: Array,
default: () => [],
},
},
data() {
return {
visible: false,
}
},
methods: {
create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
this.visible = true
this.$nextTick(() => {
this.$refs.ciDetailTab.create(ciId, activeTabKey, ciDetailRelationKey)
})
},
},
}
</script>
13 changes: 11 additions & 2 deletions cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@
class="ops-stripe-table"
>
<template #operation_default="{ row }">
<a-popconfirm arrowPointAtCenter :title="$t('cmdb.ci.confirmDeleteRelation')" @confirm="deleteRelation(row._id, ciId)">
<a-popconfirm
arrowPointAtCenter
:title="$t('cmdb.ci.confirmDeleteRelation')"
@confirm="deleteRelation(row._id, ciId)"
>
<a
:disabled="!canEdit[parent.id]"
:style="{
Expand Down Expand Up @@ -82,7 +86,11 @@
class="ops-stripe-table"
>
<template #operation_default="{ row }">
<a-popconfirm arrowPointAtCenter :title="$t('cmdb.ci.confirmDeleteRelation')" @confirm="deleteRelation(ciId, row._id)">
<a-popconfirm
arrowPointAtCenter
:title="$t('cmdb.ci.confirmDeleteRelation')"
@confirm="deleteRelation(ciId, row._id)"
>
<a
:disabled="!canEdit[child.id]"
:style="{
Expand Down Expand Up @@ -416,6 +424,7 @@ export default {

<style lang="less" scoped>
.ci-detail-relation {
height: 100%;
.ci-detail-relation-table-title {
font-size: 16px;
font-weight: 700;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
id="ci-detail-relation-topo"
class="ci-detail-relation-topo"
:style="{ width: '100%', marginTop: '20px', height: 'calc(100vh - 136px)' }"
:style="{ width: '100%', marginTop: '20px', height: 'calc(100% - 44px)' }"
></div>
</template>

Expand Down
Loading

0 comments on commit f010b96

Please sign in to comment.