From 0a563deb11623486ae12a97a06c9b23f0390f047 Mon Sep 17 00:00:00 2001
From: pycook <pycook@126.com>
Date: Mon, 25 Nov 2019 19:23:51 +0800
Subject: [PATCH] UI: relation type define [done]

---
 api/lib/cmdb/preference.py                    |   7 +-
 ui/src/api/cmdb/CITypeRelation.js             |   8 -
 ui/src/api/cmdb/relationType.js               |  31 ++
 ui/src/config/router.config.js                |  60 +++-
 .../{ => model_config}/attributes/index.vue   |   0
 .../attributes/module/attributeForm.vue       |   0
 .../attributes/module/const.js                |   0
 .../ci_type/attributesTable.vue               |   4 +-
 .../{ => model_config}/ci_type/checkTable.vue |   0
 .../ci_type/defaultShowTable.vue              |   0
 .../{ => model_config}/ci_type/detail.vue     |   0
 .../cmdb/{ => model_config}/ci_type/group.vue |   0
 .../cmdb/{ => model_config}/ci_type/list.vue  |   0
 .../ci_type/relationTable.vue                 |   3 +-
 .../preference_relation/index.vue             |   6 +
 .../cmdb/model_config/relation_type/index.vue | 280 ++++++++++++++++++
 .../relation_type/module/relationTypeForm.vue | 196 ++++++++++++
 ui/src/views/cmdb/relation_views/index.vue    | 248 ++++++++++++++++
 18 files changed, 814 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/api/cmdb/relationType.js
 rename ui/src/views/cmdb/{ => model_config}/attributes/index.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/attributes/module/attributeForm.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/attributes/module/const.js (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/attributesTable.vue (98%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/checkTable.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/defaultShowTable.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/detail.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/group.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/list.vue (100%)
 rename ui/src/views/cmdb/{ => model_config}/ci_type/relationTable.vue (98%)
 create mode 100644 ui/src/views/cmdb/model_config/preference_relation/index.vue
 create mode 100644 ui/src/views/cmdb/model_config/relation_type/index.vue
 create mode 100644 ui/src/views/cmdb/model_config/relation_type/module/relationTypeForm.vue
 create mode 100644 ui/src/views/cmdb/relation_views/index.vue

diff --git a/api/lib/cmdb/preference.py b/api/lib/cmdb/preference.py
index a897252..91d0970 100644
--- a/api/lib/cmdb/preference.py
+++ b/api/lib/cmdb/preference.py
@@ -119,11 +119,12 @@ class PreferenceManager(object):
 
         id2type = dict()
         for view_name in result:
-            result[view_name] = toposort.toposort_flatten(
-                {i['child_id']: {i['parent_id']} for i in result[view_name]})
             for i in result[view_name]:
                 id2type[i['parent_id']] = None
-                id2type[i['child']] = None
+                id2type[i['child_id']] = None
+
+            result[view_name] = toposort.toposort_flatten(
+                {i['child_id']: {i['parent_id']} for i in result[view_name]})
 
         for type_id in id2type:
             id2type[type_id] = CITypeCache.get(type_id).to_dict()
diff --git a/ui/src/api/cmdb/CITypeRelation.js b/ui/src/api/cmdb/CITypeRelation.js
index 8305c6a..8bb934c 100644
--- a/ui/src/api/cmdb/CITypeRelation.js
+++ b/ui/src/api/cmdb/CITypeRelation.js
@@ -15,14 +15,6 @@ export function getCITypeParent (CITypeID) {
   })
 }
 
-export function getRelationTypes (CITypeID, parameter) {
-  return axios({
-    url: '/v0.1/relation_types',
-    method: 'get',
-    params: parameter
-  })
-}
-
 export function createRelation (parentId, childrenId, relationTypeId) {
   return axios({
     url: `/v0.1/ci_type_relations/${parentId}/${childrenId}`,
diff --git a/ui/src/api/cmdb/relationType.js b/ui/src/api/cmdb/relationType.js
new file mode 100644
index 0000000..831b0ae
--- /dev/null
+++ b/ui/src/api/cmdb/relationType.js
@@ -0,0 +1,31 @@
+import { axios } from '@/utils/request'
+
+export function getRelationTypes () {
+  return axios({
+    url: '/v0.1/relation_types',
+    method: 'GET'
+  })
+}
+
+export function addRelationType (payload) {
+  return axios({
+    url: `/v0.1/relation_types`,
+    method: 'POST',
+    data: payload
+  })
+}
+
+export function updateRelationType (rtId, payload) {
+  return axios({
+    url: `/v0.1/relation_types/${rtId}`,
+    method: 'PUT',
+    data: payload
+  })
+}
+
+export function deleteRelationType (rtId) {
+  return axios({
+    url: `/v0.1/relation_types/${rtId}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/config/router.config.js b/ui/src/config/router.config.js
index b41bf9b..72a8829 100644
--- a/ui/src/config/router.config.js
+++ b/ui/src/config/router.config.js
@@ -12,7 +12,23 @@ const cmdbRouter = [
     name: 'cmdb_preference',
     meta: { title: '我的订阅', icon: 'book', keepAlive: true }
   },
-  // views
+  // relation views
+  {
+    path: '/relation_views',
+    component: () => import('@/views/cmdb/relation_views'),
+    name: 'cmdb_relation_views',
+    meta: { title: '关系视图', icon: 'link', keepAlive: true },
+    hideChildrenInMenu: true,
+    children: [
+      {
+        path: '/relation_views/:id',
+        name: 'cmdb_relation_views_item',
+        component: () => import('@/views/cmdb/relation_views'),
+        meta: { title: '关系视图', keepAlive: true },
+        hidden: true
+      }]
+  },
+  // tree views
   {
     path: '/tree_views',
     component: () => import('@/views/cmdb/tree_views'),
@@ -36,33 +52,47 @@ const cmdbRouter = [
     meta: { 'title': '批量导入', icon: 'upload', keepAlive: true }
   },
   {
-    path: '/ci_types',
+    path: '/config//ci_types',
     name: 'cmdb_ci_type',
     component: RouteView,
-    redirect: '/ci_type',
+    redirect: '/ci_types',
     meta: { title: '模型配置', icon: 'setting', permission: ['admin'] },
     children: [
       {
-        path: '/ci_types',
+        path: '/config/ci_types',
         name: 'ci_type',
-        hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
-        component: () => import('@/views/cmdb/ci_type/list'),
-        meta: { title: '模型定义', keepAlive: true }
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/model_config/ci_type/list'),
+        meta: { title: '模型管理', keepAlive: true }
       },
       {
-        path: '/ci_types/:CITypeName/detail/:CITypeId',
+        path: '/config/ci_types/:CITypeName/detail/:CITypeId',
         name: 'ci_type_detail',
-        hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
-        component: () => import('@/views/cmdb/ci_type/detail'),
-        meta: { title: '模型配置', keepAlive: true, hidden: true },
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/model_config/ci_type/detail'),
+        meta: { title: '模型管理', keepAlive: true, hidden: true },
         hidden: true
       },
       {
-        path: '/attributes',
+        path: '/config/attributes',
         name: 'attributes',
-        hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
-        component: () => import('@/views/cmdb/attributes/index'),
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/model_config/attributes/index'),
         meta: { title: '属性库', keepAlive: true }
+      },
+      {
+        path: '/config/relation_type',
+        name: 'relation_type',
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/model_config/relation_type/index'),
+        meta: { title: '关系类型', keepAlive: true }
+      },
+      {
+        path: '/config/preference_relation',
+        name: 'preference_relation',
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/model_config/preference_relation/index'),
+        meta: { title: '关系视图配置', keepAlive: true }
       }
     ]
   },
@@ -128,7 +158,7 @@ export const generatorDynamicRouter = () => {
           component: () => import(`@/views/cmdb/ci/index`),
           name: `cmdb_${item.id}`,
           meta: { title: item.alias, icon: 'table', keepAlive: true, typeId: item.id },
-          hideChildrenInMenu: true // 强制显示 MenuItem 而不是 SubMenu
+          hideChildrenInMenu: true
         })
       }
 
diff --git a/ui/src/views/cmdb/attributes/index.vue b/ui/src/views/cmdb/model_config/attributes/index.vue
similarity index 100%
rename from ui/src/views/cmdb/attributes/index.vue
rename to ui/src/views/cmdb/model_config/attributes/index.vue
diff --git a/ui/src/views/cmdb/attributes/module/attributeForm.vue b/ui/src/views/cmdb/model_config/attributes/module/attributeForm.vue
similarity index 100%
rename from ui/src/views/cmdb/attributes/module/attributeForm.vue
rename to ui/src/views/cmdb/model_config/attributes/module/attributeForm.vue
diff --git a/ui/src/views/cmdb/attributes/module/const.js b/ui/src/views/cmdb/model_config/attributes/module/const.js
similarity index 100%
rename from ui/src/views/cmdb/attributes/module/const.js
rename to ui/src/views/cmdb/model_config/attributes/module/const.js
diff --git a/ui/src/views/cmdb/ci_type/attributesTable.vue b/ui/src/views/cmdb/model_config/ci_type/attributesTable.vue
similarity index 98%
rename from ui/src/views/cmdb/ci_type/attributesTable.vue
rename to ui/src/views/cmdb/model_config/ci_type/attributesTable.vue
index f0c4e5c..2e484f3 100644
--- a/ui/src/views/cmdb/ci_type/attributesTable.vue
+++ b/ui/src/views/cmdb/model_config/ci_type/attributesTable.vue
@@ -143,8 +143,8 @@ import {
 } from '@/api/cmdb/CITypeAttr'
 import { STable } from '@/components'
 import { mixin, mixinDevice } from '@/utils/mixin'
-import AttributeForm from '@/views/cmdb/attributes/module/attributeForm'
-import { valueTypeMap } from '@/views/cmdb/attributes/module/const'
+import AttributeForm from '@/views/cmdb/model_config/attributes/module/attributeForm'
+import { valueTypeMap } from '@/views/cmdb/model_config/attributes/module/const'
 
 export default {
   name: 'AttributesTable',
diff --git a/ui/src/views/cmdb/ci_type/checkTable.vue b/ui/src/views/cmdb/model_config/ci_type/checkTable.vue
similarity index 100%
rename from ui/src/views/cmdb/ci_type/checkTable.vue
rename to ui/src/views/cmdb/model_config/ci_type/checkTable.vue
diff --git a/ui/src/views/cmdb/ci_type/defaultShowTable.vue b/ui/src/views/cmdb/model_config/ci_type/defaultShowTable.vue
similarity index 100%
rename from ui/src/views/cmdb/ci_type/defaultShowTable.vue
rename to ui/src/views/cmdb/model_config/ci_type/defaultShowTable.vue
diff --git a/ui/src/views/cmdb/ci_type/detail.vue b/ui/src/views/cmdb/model_config/ci_type/detail.vue
similarity index 100%
rename from ui/src/views/cmdb/ci_type/detail.vue
rename to ui/src/views/cmdb/model_config/ci_type/detail.vue
diff --git a/ui/src/views/cmdb/ci_type/group.vue b/ui/src/views/cmdb/model_config/ci_type/group.vue
similarity index 100%
rename from ui/src/views/cmdb/ci_type/group.vue
rename to ui/src/views/cmdb/model_config/ci_type/group.vue
diff --git a/ui/src/views/cmdb/ci_type/list.vue b/ui/src/views/cmdb/model_config/ci_type/list.vue
similarity index 100%
rename from ui/src/views/cmdb/ci_type/list.vue
rename to ui/src/views/cmdb/model_config/ci_type/list.vue
diff --git a/ui/src/views/cmdb/ci_type/relationTable.vue b/ui/src/views/cmdb/model_config/ci_type/relationTable.vue
similarity index 98%
rename from ui/src/views/cmdb/ci_type/relationTable.vue
rename to ui/src/views/cmdb/model_config/ci_type/relationTable.vue
index da5835a..451593f 100644
--- a/ui/src/views/cmdb/ci_type/relationTable.vue
+++ b/ui/src/views/cmdb/model_config/ci_type/relationTable.vue
@@ -103,7 +103,8 @@
 </template>
 
 <script>
-import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/api/cmdb/CITypeRelation'
+import { createRelation, deleteRelation, getCITypeChildren } from '@/api/cmdb/CITypeRelation'
+import { getRelationTypes } from '@/api/cmdb/relationType'
 import { getCITypes } from '@/api/cmdb/CIType'
 
 import { STable } from '@/components'
diff --git a/ui/src/views/cmdb/model_config/preference_relation/index.vue b/ui/src/views/cmdb/model_config/preference_relation/index.vue
new file mode 100644
index 0000000..5679305
--- /dev/null
+++ b/ui/src/views/cmdb/model_config/preference_relation/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {}
+</script>
diff --git a/ui/src/views/cmdb/model_config/relation_type/index.vue b/ui/src/views/cmdb/model_config/relation_type/index.vue
new file mode 100644
index 0000000..5e2681b
--- /dev/null
+++ b/ui/src/views/cmdb/model_config/relation_type/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      :showPagination="false"
+      :pageSize="25"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="description" slot-scope="text">{{ text }}</template>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <relation-type-form ref="relationTypeForm" :handleOk="handleOk"> </relation-type-form>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import RelationTypeForm from './module/relationTypeForm'
+import { getRelationTypes, deleteRelationType } from '@/api/cmdb/relationType'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    RelationTypeForm
+  },
+  data () {
+    return {
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增关系类型',
+
+      formLayout: 'vertical',
+
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        name: ''
+      },
+      columns: [
+        {
+          width: 150,
+          title: '类型名',
+          dataIndex: 'name',
+          sorter: false,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          width: 150,
+          title: '操作',
+          key: 'operation',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        return getRelationTypes()
+          .then(res => {
+            const result = {}
+            result.data = res
+            console.log('loadData.res', result)
+            return result
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      console.log(record)
+      this.$refs.relationTypeForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteRelationType(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.relationTypeForm.handleCreate()
+    },
+
+    deleteRelationType (id) {
+      deleteRelationType(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  // .fold {
+  //   width: calc(100% - 216px);
+  //   display: inline-block
+  // }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/model_config/relation_type/module/relationTypeForm.vue b/ui/src/views/cmdb/model_config/relation_type/module/relationTypeForm.vue
new file mode 100644
index 0000000..9c3f479
--- /dev/null
+++ b/ui/src/views/cmdb/model_config/relation_type/module/relationTypeForm.vue
@@ -0,0 +1,196 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="类型名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addRelationType, updateRelationType } from '@/api/cmdb/relationType'
+
+export default {
+  name: 'RelationTypeForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增关系类型',
+      drawerVisible: false,
+      formLayout: 'vertical'
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateResourceType(values.id, values)
+          } else {
+            this.createResourceType(values)
+          }
+        }
+      })
+    },
+    updateResourceType (id, data) {
+      updateRelationType(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResourceType (data) {
+      addRelationType(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/relation_views/index.vue b/ui/src/views/cmdb/relation_views/index.vue
new file mode 100644
index 0000000..69c92c6
--- /dev/null
+++ b/ui/src/views/cmdb/relation_views/index.vue
@@ -0,0 +1,248 @@
+<template>
+  <a-card :bordered="false">
+    <a-menu v-model="current" mode="horizontal" v-if="ciTypes.length">
+      <a-menu-item :key="ciType.id" v-for="ciType in ciTypes">
+        <router-link
+          :to="{name: 'cmdb_tree_views_item', params: {typeId: ciType.id}}"
+        >{{ ciType.alias || ciTypes.name }}</router-link>
+      </a-menu-item>
+    </a-menu>
+    <a-alert message="请先到 我的订阅 页面完成订阅!" banner v-else></a-alert>
+    <div style="clear: both; margin-top: 20px"></div>
+    <template>
+      <a-row :gutter="8">
+        <a-col :span="5">
+          <a-tree showLine :loadData="onLoadData" @select="onSelect" :treeData="treeData"></a-tree>
+        </a-col>
+        <a-col :span="19">
+          <s-table
+            v-if="ciTypes.length"
+            bordered
+            ref="table"
+            size="middle"
+            rowKey="ci_id"
+            :columns="columns"
+            :data="loadInstances"
+            :scroll="{ x: scrollX, y: scrollY }"
+            :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+            :pageSize="25"
+            showPagination="auto"
+          ></s-table>
+        </a-col>
+      </a-row>
+    </template>
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+
+import { getSubscribeTreeView, getSubscribeAttributes } from '@/api/cmdb/preference'
+import { searchCI } from '@/api/cmdb/ci'
+export default {
+  components: { STable },
+  data () {
+    return {
+      treeData: [],
+      triggerSelect: false,
+      treeNode: null,
+      ciTypes: [],
+      levels: [],
+      typeId: null,
+      current: [],
+      instanceList: [],
+      treeKeys: [],
+      columns: [],
+      pageSizeOptions: ['10', '25', '50', '100'],
+      loading: false,
+      scrollX: 0,
+      scrollY: 0,
+
+      loadInstances: parameter => {
+        const params = parameter || {}
+        // const params = Object.assign(parameter, this.$refs.search.queryParam)
+        let q = `q=_type:${this.typeId}`
+        Object.keys(params).forEach(key => {
+          if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
+            if (typeof params[key] === 'object' && params[key].length > 1) {
+              q += `,${key}:(${params[key].join(';')})`
+            } else if (params[key]) {
+              q += `,${key}:${params[key]}`
+            }
+
+            if (typeof params[key] === 'string') {
+              q += '*'
+            }
+          }
+        })
+
+        if (this.treeKeys.length > 0) {
+          this.treeKeys.forEach((item, idx) => {
+            q += `,${this.levels[idx].name}:${item}`
+          })
+        }
+
+        if (this.levels.length > this.treeKeys.length) {
+          q += `&facet=${this.levels[this.treeKeys.length].name}`
+        }
+
+        if ('pageNo' in params) {
+          q += `&page=${params['pageNo']}&count=${params['pageSize']}`
+        }
+
+        if ('sortField' in params) {
+          let order = ''
+          if (params['sortOrder'] !== 'ascend') {
+            order = '-'
+          }
+          q += `&sort=${order}${params['sortField']}`
+        }
+
+        return searchCI(q).then(res => {
+          const result = {}
+          result.pageNo = res.page
+          result.pageSize = res.total
+          result.totalCount = res.numfound
+          result.totalPage = Math.ceil(res.numfound / (params.pageSize || 25))
+          result.data = Object.assign([], res.result)
+          result.data.forEach((item, index) => (item.key = item.ci_id))
+          setTimeout(() => {
+            this.setColumnWidth()
+          }, 200)
+
+          if (Object.values(res.facet).length) {
+            this.wrapTreeData(res.facet)
+          }
+
+          return result
+        })
+      }
+    }
+  },
+
+  created () {
+    this.getCITypes()
+  },
+
+  inject: ['reload'],
+  watch: {
+    '$route.path': function (newPath, oldPath) {
+      this.typeId = this.$route.params.typeId
+      this.getCITypes()
+      this.reload()
+    }
+  },
+
+  methods: {
+    onSelect (keys) {
+      this.triggerSelect = true
+      if (keys.length) {
+        this.treeKeys = keys[0].split('-').filter(item => item !== '')
+      }
+
+      this.$refs.table.refresh(true)
+    },
+    wrapTreeData (facet) {
+      if (this.triggerSelect) {
+        return
+      }
+      const treeData = []
+      Object.values(facet)[0].forEach(item => {
+        treeData.push({
+          title: `${item[0]} (${item[1]})`,
+          key: this.treeKeys.join('-') + '-' + item[0],
+          isLeaf: this.levels.length - 1 === this.treeKeys.length
+        })
+      })
+      if (this.treeNode === null) {
+        this.treeData = treeData
+      } else {
+        this.treeNode.dataRef.children = treeData
+        this.treeData = [...this.treeData]
+      }
+    },
+    setColumnWidth () {
+      let rows = []
+      try {
+        rows = document.querySelector('.ant-table-body').childNodes[0].childNodes[2].childNodes[0].childNodes
+      } catch (e) {
+        rows = document.querySelector('.ant-table-body').childNodes[0].childNodes[1].childNodes[0].childNodes
+      }
+      let scrollX = 0
+
+      const columns = Object.assign([], this.columns)
+      for (let i = 0; i < rows.length; i++) {
+        columns[i].width = rows[i].offsetWidth < 80 ? 80 : rows[i].offsetWidth
+        scrollX += columns[i].width
+      }
+      this.columns = columns
+
+      this.scrollX = scrollX
+      this.scrollY = window.innerHeight - this.$refs.table.$el.offsetTop - 300
+    },
+
+    onLoadData (treeNode) {
+      this.triggerSelect = false
+      return new Promise(resolve => {
+        if (treeNode.dataRef.children) {
+          resolve()
+          return
+        }
+        this.treeKeys = treeNode.eventKey.split('-').filter(item => item !== '')
+        this.treeNode = treeNode
+        this.$refs.table.refresh(true)
+        resolve()
+      })
+    },
+
+    getCITypes () {
+      getSubscribeTreeView().then(res => {
+        this.ciTypes = res
+        if (this.ciTypes.length) {
+          this.typeId = this.$route.params.typeId || this.ciTypes[0].id
+          this.current = [this.typeId]
+          this.loadColumns()
+          this.levels = res.find(item => item.id === this.typeId).levels
+          this.$refs.table && this.$refs.table.refresh(true)
+        }
+      })
+    },
+    loadColumns () {
+      getSubscribeAttributes(this.typeId).then(res => {
+        const prefAttrList = res.attributes
+
+        const columns = []
+        prefAttrList.forEach((item, index) => {
+          const col = {}
+          col.title = item.alias
+          col.dataIndex = item.name
+          if (index !== prefAttrList.length - 1) {
+            col.width = 80
+          }
+          if (item.is_sortable) {
+            col.sorter = true
+          }
+          if (item.is_choice) {
+            const filters = []
+            item.choice_value.forEach(item => filters.push({ text: item, value: item }))
+            col.filters = filters
+          }
+          col.scopedSlots = { customRender: item.name }
+          columns.push(col)
+        })
+
+        this.columns = columns
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ant-menu-horizontal {
+  border-bottom: 1px solid #ebedf0 !important;
+}
+.ant-menu-horizontal {
+  border-bottom: 1px solid #ebedf0 !important;
+}
+</style>