feat:ci detail share (#403)

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() {
+      if (this.setPreferenceSearchCurrent) {
         this.setPreferenceSearchCurrent(null)
+      }
       this.$nextTick(() => {
         this.$emit('refresh', true)
       })

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',

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: '删除节点',

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',

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>

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,

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>

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;

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>
 

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue

@@ -1,23 +1,13 @@
 <template>
-  <CustomDrawer
+  <div :style="{ height: '100%' }">
-    width="80%"
+    <a-tabs v-if="hasPermission" class="ci-detail-tab" v-model="activeTabKey" @change="changeTab">
-    placement="left"
+      <a @click="shareCi" slot="tabBarExtraContent" :style="{ marginRight: '24px' }">
-    @close="
+        <a-icon type="share-alt" />
-      () => {
+        {{ $t('cmdb.ci.share') }}
-        visible = false
+      </a>
-      }
-    "
-    :visible="visible"
-    :hasTitle="false"
-    :hasFooter="false"
-    :bodyStyle="{ padding: 0, height: '100vh' }"
-    wrapClassName="ci-detail"
-    destroyOnClose
-  >
-    <a-tabs v-model="activeTabKey" @change="changeTab">
       <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') {
+    async create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
-      this.visible = true
       this.activeTabKey = activeTabKey
       if (activeTabKey === 'tab_2') {
         this.$nextTick(() => {
@@ -167,12 +178,14 @@ export default {
         })
       }
       this.ciId = ciId
+      await this.getCI()
+      if (this.hasPermission) {
         this.getAttributes()
-      this.getCI()
         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() {
+    async getCI() {
-      getCIById(this.ciId)
+      await getCIById(this.ciId)
         .then((res) => {
-          // this.ci = res.ci
+          if (res.result.length) {
             this.ci = res.result[0]
+          } else {
+            this.hasPermission = false
+          }
         })
         .catch((e) => {})
     },
@@ -270,10 +286,14 @@ export default {
       // 修改的字段为树形视图订阅的字段 则全部reload
       setTimeout(() => {
         if (_find) {
+          if (this.reload) {
             this.reload()
+          }
         } else {
+          if (this.handleSearch) {
             this.handleSearch()
           }
+        }
       }, 500)
     },
     mergeRowMethod({ row, _rowIndex, column, visibleData }) {
@@ -303,23 +323,49 @@ export default {
       // 修改的字段为树形视图订阅的字段 则全部reload
       setTimeout(() => {
         if (_find) {
+          if (this.reload) {
             this.reload()
+          }
         } else {
+          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 {

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')">

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,

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,