feat:ci detail share (#403)

2024-02-27 16:13:28 +08:00 · 2024-02-27 16:13:28 +08:00 · f010b9625e
parent ef1d0c34cf
commit f010b9625e
13 changed files with 257 additions and 61 deletions
--- a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
@ -145,7 +145,7 @@ export default {
    selectedRowKeys: {
      type: Array,
      default: () => [],
-    }
+    },
  },
  data() {
    return {
@ -179,7 +179,12 @@ export default {
      this.fuzzySearch = ''
    },
  },
-  inject: ['setPreferenceSearchCurrent'],
+  inject: {
+    setPreferenceSearchCurrent: {
+      from: 'setPreferenceSearchCurrent',
+      default: null,
+    },
+  },
  mounted() {
    if (this.type === 'resourceSearch') {
      this.getCITypeGroups()
@ -234,7 +239,9 @@ export default {
      }
    },
    emitRefresh() {
-      this.setPreferenceSearchCurrent(null)
+      if (this.setPreferenceSearchCurrent) {
+        this.setPreferenceSearchCurrent(null)
+      }
      this.$nextTick(() => {
        this.$emit('refresh', true)
      })
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@ -19,6 +19,7 @@ const cmdb_en = {
        operationHistory: 'Operation Audit',
        relationType: 'Relation Type',
        ad: 'AutoDiscovery',
+        cidetail: 'CI Detail'
    },
    ciType: {
        ciType: 'CIType',
@ -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',
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@ -19,6 +19,7 @@ const cmdb_zh = {
        operationHistory: '操作审计',
        relationType: '关系类型',
        ad: '自动发现',
+        cidetail: 'CI 详情'
    },
    ciType: {
        ciType: '模型',
@ -466,6 +467,8 @@ const cmdb_zh = {
        tips10: '模型的其他属性通过表达式的方式计算出来\n\n一个代码片段计算返回的值',
        newUpdateField: '新增修改字段',
        attributeSettings: '字段设置',
+        share: '分享',
+        noPermission: '暂无权限'
    },
    serviceTree: {
        deleteNode: '删除节点',
--- a/cmdb-ui/src/modules/cmdb/router/index.js
+++ b/cmdb-ui/src/modules/cmdb/router/index.js
@ -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',
--- a/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
@ -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>
--- a/cmdb-ui/src/modules/cmdb/views/ci/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/index.vue
@ -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
@ -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'
@ -320,7 +320,7 @@ export default {
  components: {
    SearchForm,
    CreateInstanceForm,
-    CiDetail,
+    CiDetailDrawer,
    JsonEditor,
    PasswordField,
    EditAttrsPopover,
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailDrawer.vue
@ -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>
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
@ -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="{
@ -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="{
@ -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;
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue
@ -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>

--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
@ -1,23 +1,13 @@
 <template>
-  <CustomDrawer
-    width="80%"
-    placement="left"
-    @close="
-      () => {
-        visible = false
-      }
-    "
-    :visible="visible"
-    :hasTitle="false"
-    :hasFooter="false"
-    :bodyStyle="{ padding: 0, height: '100vh' }"
-    wrapClassName="ci-detail"
-    destroyOnClose
-  >
-    <a-tabs v-model="activeTabKey" @change="changeTab">
+  <div :style="{ height: '100%' }">
+    <a-tabs v-if="hasPermission" class="ci-detail-tab" v-model="activeTabKey" @change="changeTab">
+      <a @click="shareCi" slot="tabBarExtraContent" :style="{ marginRight: '24px' }">
+        <a-icon type="share-alt" />
+        {{ $t('cmdb.ci.share') }}
+      </a>
      <a-tab-pane key="tab_1">
        <span slot="tab"><a-icon type="book" />{{ $t('cmdb.attribute') }}</span>
-        <div :style="{ maxHeight: `${windowHeight - 44}px`, overflow: 'auto', padding: '24px' }" class="ci-detail-attr">
+        <div class="ci-detail-attr">
          <el-descriptions
            :title="group.name || $t('other')"
            :key="group.name"
@ -37,18 +27,18 @@
      </a-tab-pane>
      <a-tab-pane key="tab_2">
        <span slot="tab"><a-icon type="branches" />{{ $t('cmdb.relation') }}</span>
-        <div :style="{ padding: '24px' }">
+        <div :style="{ height: '100%', padding: '24px' }">
          <CiDetailRelation ref="ciDetailRelation" :ciId="ciId" :typeId="typeId" :ci="ci" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="tab_3">
        <span slot="tab"><a-icon type="clock-circle" />{{ $t('cmdb.ci.history') }}</span>
-        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
+        <div :style="{ padding: '24px', height: '100%' }">
          <vxe-table
            ref="xTable"
            :data="ciHistory"
            size="small"
-            :max-height="`${windowHeight - 94}px`"
+            height="auto"
            :span-method="mergeRowMethod"
            border
            :scroll-y="{ enabled: false }"
@ -88,12 +78,22 @@
      </a-tab-pane>
      <a-tab-pane key="tab_4">
        <span slot="tab"><ops-icon type="itsm_auto_trigger" />{{ $t('cmdb.history.triggerHistory') }}</span>
-        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
+        <div :style="{ padding: '24px', height: '100%' }">
          <TriggerTable :ci_id="ci._id" />
        </div>
      </a-tab-pane>
    </a-tabs>
-  </CustomDrawer>
+    <a-empty
+      v-else
+      :image-style="{
+        height: '100px',
+      }"
+      :style="{ paddingTop: '20%' }"
+    >
+      <img slot="image" :src="require('@/assets/data_empty.png')" />
+      <span slot="description"> {{ $t('cmdb.ci.noPermission') }} </span>
+    </a-empty>
+  </div>
 </template>

 <script>
@ -105,8 +105,8 @@ import { getCIById } from '@/modules/cmdb/api/ci'
 import CiDetailAttrContent from './ciDetailAttrContent.vue'
 import CiDetailRelation from './ciDetailRelation.vue'
 import TriggerTable from '../../operation_history/modules/triggerTable.vue'
-
 export default {
+  name: 'CiDetailTab',
  components: {
    ElDescriptions: Descriptions,
    ElDescriptionsItem: DescriptionsItem,
@ -126,7 +126,6 @@ export default {
  },
  data() {
    return {
-      visible: false,
      ci: {},
      attributeGroups: [],
      activeTabKey: 'tab_1',
@ -134,13 +133,13 @@ export default {
      ciHistory: [],
      ciId: null,
      ci_types: [],
+      hasPermission: true,
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowHeight
    },
-
    operateTypeMap() {
      return {
        0: this.$t('new'),
@ -156,10 +155,22 @@ export default {
      },
    }
  },
-  inject: ['reload', 'handleSearch', 'attrList'],
+  inject: {
+    reload: {
+      from: 'reload',
+      default: null,
+    },
+    handleSearch: {
+      from: 'handleSearch',
+      default: null,
+    },
+    attrList: {
+      from: 'attrList',
+      default: () => [],
+    },
+  },
  methods: {
-    create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
-      this.visible = true
+    async create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
      this.activeTabKey = activeTabKey
      if (activeTabKey === 'tab_2') {
        this.$nextTick(() => {
@ -167,12 +178,14 @@ export default {
        })
      }
      this.ciId = ciId
-      this.getAttributes()
-      this.getCI()
-      this.getCIHistory()
-      getCITypes().then((res) => {
-        this.ci_types = res.ci_types
-      })
+      await this.getCI()
+      if (this.hasPermission) {
+        this.getAttributes()
+        this.getCIHistory()
+        getCITypes().then((res) => {
+          this.ci_types = res.ci_types
+        })
+      }
    },
    getAttributes() {
      getCITypeGroupById(this.typeId, { need_other: 1 })
@ -181,11 +194,14 @@ export default {
        })
        .catch((e) => {})
    },
-    getCI() {
-      getCIById(this.ciId)
+    async getCI() {
+      await getCIById(this.ciId)
        .then((res) => {
-          // this.ci = res.ci
-          this.ci = res.result[0]
+          if (res.result.length) {
+            this.ci = res.result[0]
+          } else {
+            this.hasPermission = false
+          }
        })
        .catch((e) => {})
    },
@ -270,9 +286,13 @@ export default {
      // 修改的字段为树形视图订阅的字段 则全部reload
      setTimeout(() => {
        if (_find) {
-          this.reload()
+          if (this.reload) {
+            this.reload()
+          }
        } else {
-          this.handleSearch()
+          if (this.handleSearch) {
+            this.handleSearch()
+          }
        }
      }, 500)
    },
@ -303,23 +323,49 @@ export default {
      // 修改的字段为树形视图订阅的字段 则全部reload
      setTimeout(() => {
        if (_find) {
-          this.reload()
+          if (this.reload) {
+            this.reload()
+          }
        } else {
-          this.handleSearch()
+          if (this.handleSearch) {
+            this.handleSearch()
+          }
        }
      }, 500)
    },
+    shareCi() {
+      const text = `${document.location.host}/cmdb/cidetail/${this.typeId}/${this.ciId}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    },
  },
 }
 </script>

-<style lang="less" scoped></style>
 <style lang="less">
-.ci-detail {
+.ci-detail-tab {
+  height: 100%;
+  .ant-tabs-content {
+    height: calc(100% - 45px);
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  }
  .ant-tabs-bar {
    margin: 0;
  }
+  .ant-tabs-extra-content {
+    line-height: 44px;
+  }
  .ci-detail-attr {
+    height: 100%;
+    overflow: auto;
+    padding: 24px;
    .el-descriptions-item__content {
      cursor: default;
      &:hover a {
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :style="{ height: '100%' }">
    <vxe-table
      show-overflow
      show-header-overflow
@ -7,7 +7,7 @@
      size="small"
      class="ops-stripe-table"
      :data="tableData"
-      v-bind="ci_id ? { maxHeight: `${windowHeight - 94}px` } : { height: `${windowHeight - 225}px` }"
+      v-bind="ci_id ? { height: 'auto' } : { height: `${windowHeight - 225}px` }"
    >
      <vxe-column field="trigger_name" :title="$t('cmdb.history.triggerName')"> </vxe-column>
      <vxe-column field="type" :title="$t('type')">
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
@ -316,7 +316,7 @@
    <!-- <GrantDrawer ref="grantDrawer" resourceTypeName="RelationView" app_id="cmdb" /> -->
    <CMDBGrant ref="cmdbGrant" resourceType="RelationView" app_id="cmdb" />

-    <ci-detail ref="detail" :typeId="Number(currentTypeId[0])" />
+    <CiDetailDrawer ref="detail" :typeId="Number(currentTypeId[0])" />
    <create-instance-form
      ref="create"
      :typeIdFromRelation="Number(currentTypeId[0])"
@ -354,7 +354,7 @@ import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
 import { searchResourceType } from '@/modules/acl/api/resource'
 import SplitPane from '@/components/SplitPane'
 import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
-import CiDetail from '../ci/modules/CiDetail'
+import CiDetailDrawer from '../ci/modules/ciDetailDrawer.vue'
 import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
 import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
 import BatchDownload from '../../components/batchDownload/batchDownload.vue'
@ -375,7 +375,7 @@ export default {
    SplitPane,
    ElTree: Tree,
    EditAttrsPopover,
-    CiDetail,
+    CiDetailDrawer,
    CreateInstanceForm,
    JsonEditor,
    BatchDownload,
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
@ -371,7 +371,7 @@
        }
      "
    />
-    <ci-detail ref="detail" :typeId="Number(typeId)" :treeViewsLevels="treeViewsLevels" />
+    <CiDetailDrawer ref="detail" :typeId="Number(typeId)" :treeViewsLevels="treeViewsLevels" />
    <create-instance-form
      ref="create"
      :typeIdFromRelation="Number(typeId)"
@ -404,7 +404,7 @@ import PasswordField from '../../components/passwordField/index.vue'
 import SplitPane from '@/components/SplitPane'
 import TreeViewsNode from './modules/treeViewsNode.vue'
 import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
-import CiDetail from '../ci/modules/CiDetail'
+import CiDetailDrawer from '../ci/modules/ciDetailDrawer.vue'
 import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
 import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
 import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
@ -424,7 +424,7 @@ export default {
    SplitPane,
    TreeViewsNode,
    EditAttrsPopover,
-    CiDetail,
+    CiDetailDrawer,
    CreateInstanceForm,
    JsonEditor,
    BatchDownload,