diff --git a/cmdb-ui/src/modules/cmdb/api/CIType.js b/cmdb-ui/src/modules/cmdb/api/CIType.js
index a2c54f2..d7d6631 100644
--- a/cmdb-ui/src/modules/cmdb/api/CIType.js
+++ b/cmdb-ui/src/modules/cmdb/api/CIType.js
@@ -1,207 +1,215 @@
-import { axios } from '@/utils/request'
-
-/**
- * 获取 所有的 ci_types
- * @param parameter
- * @returns {AxiosPromise}
- */
-export function getCITypes(parameter) {
-  return axios({
-    url: '/v0.1/ci_types',
-    method: 'GET',
-    params: parameter
-  })
-}
-
-/**
- * 获取 某个 ci_types
- * @param CITypeName
- * @param parameter
- * @returns {AxiosPromise}
- */
-export function getCIType(CITypeName, parameter) {
-  return axios({
-    url: `/v0.1/ci_types/${CITypeName}`,
-    method: 'GET',
-    params: parameter
-  })
-}
-
-/**
- * 创建 ci_type
- * @param data
- * @returns {AxiosPromise}
- */
-export function createCIType(data) {
-  return axios({
-    url: '/v0.1/ci_types',
-    method: 'POST',
-    data: data
-  })
-}
-
-/**
- * 更新 ci_type
- * @param CITypeId
- * @param data
- * @returns {AxiosPromise}
- */
-export function updateCIType(CITypeId, data) {
-  return axios({
-    url: `/v0.1/ci_types/${CITypeId}`,
-    method: 'PUT',
-    data: data
-  })
-}
-
-/**
- * 删除 ci_type
- * @param CITypeId
- * @returns {AxiosPromise}
- */
-export function deleteCIType(CITypeId) {
-  return axios({
-    url: `/v0.1/ci_types/${CITypeId}`,
-    method: 'DELETE'
-  })
-}
-
-/**
- * 获取 某个 ci_type 的分组
- * @param CITypeId
- * @param data
- * @returns {AxiosPromise}
- */
-export function getCITypeGroupById(CITypeId, data) {
-  return axios({
-    url: `/v0.1/ci_types/${CITypeId}/attribute_groups`,
-    method: 'GET',
-    params: data
-  })
-}
-
-/**
- * 保存 某个 ci_type 的分组
- * @param CITypeId
- * @param data
- * @returns {AxiosPromise}
- */
-export function createCITypeGroupById(CITypeId, data) {
-  return axios({
-    url: `/v0.1/ci_types/${CITypeId}/attribute_groups`,
-    method: 'POST',
-    data: data
-  })
-}
-
-/**
- * 修改 某个 ci_type 的分组
- * @param groupId
- * @param data
- * @returns {AxiosPromise}
- */
-export function updateCITypeGroupById(groupId, data) {
-  return axios({
-    url: `/v0.1/ci_types/attribute_groups/${groupId}`,
-    method: 'PUT',
-    data: data
-  })
-}
-
-/**
- * 删除 某个 ci_type 的分组
- * @param groupId
- * @param data
- * @returns {AxiosPromise}
- */
-export function deleteCITypeGroupById(groupId, data) {
-  return axios({
-    url: `/v0.1/ci_types/attribute_groups/${groupId}`,
-    method: 'delete',
-    data: data
-  })
-}
-
-export function getUniqueConstraintList(type_id) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/unique_constraint`,
-    method: 'get',
-  })
-}
-
-export function addUniqueConstraint(type_id, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/unique_constraint`,
-    method: 'post',
-    data: data
-  })
-}
-
-export function updateUniqueConstraint(type_id, id, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/unique_constraint/${id}`,
-    method: 'put',
-    data: data
-  })
-}
-
-export function deleteUniqueConstraint(type_id, id) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/unique_constraint/${id}`,
-    method: 'delete',
-  })
-}
-
-export function getTriggerList(type_id) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/triggers`,
-    method: 'get',
-  })
-}
-
-export function addTrigger(type_id, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/triggers`,
-    method: 'post',
-    data: data
-  })
-}
-
-export function updateTrigger(type_id, id, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/triggers/${id}`,
-    method: 'put',
-    data: data
-  })
-}
-
-export function deleteTrigger(type_id, id) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/triggers/${id}`,
-    method: 'delete',
-  })
-}
-
-// CMDB的模型和实例的授权接口
-export function grantCiType(type_id, rid, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/roles/${rid}/grant`,
-    method: 'post',
-    data
-  })
-}
-// CMDB的模型和实例的删除授权接口
-export function revokeCiType(type_id, rid, data) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/roles/${rid}/revoke`,
-    method: 'post',
-    data
-  })
-}
-// CMDB的模型和实例的过滤的权限
-export function ciTypeFilterPermissions(type_id) {
-  return axios({
-    url: `/v0.1/ci_types/${type_id}/filters/permissions`,
-    method: 'get',
-  })
-}
+import { axios } from '@/utils/request'
+
+/**
+ * 获取 所有的 ci_types
+ * @param parameter
+ * @returns {AxiosPromise}
+ */
+export function getCITypes(parameter) {
+  return axios({
+    url: '/v0.1/ci_types',
+    method: 'GET',
+    params: parameter
+  })
+}
+
+/**
+ * 获取 某个 ci_types
+ * @param CITypeName
+ * @param parameter
+ * @returns {AxiosPromise}
+ */
+export function getCIType(CITypeName, parameter) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeName}`,
+    method: 'GET',
+    params: parameter
+  })
+}
+
+/**
+ * 创建 ci_type
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function createCIType(data) {
+  return axios({
+    url: '/v0.1/ci_types',
+    method: 'POST',
+    data: data
+  })
+}
+
+/**
+ * 更新 ci_type
+ * @param CITypeId
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function updateCIType(CITypeId, data) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}`,
+    method: 'PUT',
+    data: data
+  })
+}
+
+/**
+ * 删除 ci_type
+ * @param CITypeId
+ * @returns {AxiosPromise}
+ */
+export function deleteCIType(CITypeId) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}`,
+    method: 'DELETE'
+  })
+}
+
+/**
+ * 获取 某个 ci_type 的分组
+ * @param CITypeId
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function getCITypeGroupById(CITypeId, data) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}/attribute_groups`,
+    method: 'GET',
+    params: data
+  })
+}
+
+/**
+ * 保存 某个 ci_type 的分组
+ * @param CITypeId
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function createCITypeGroupById(CITypeId, data) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}/attribute_groups`,
+    method: 'POST',
+    data: data
+  })
+}
+
+/**
+ * 修改 某个 ci_type 的分组
+ * @param groupId
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function updateCITypeGroupById(groupId, data) {
+  return axios({
+    url: `/v0.1/ci_types/attribute_groups/${groupId}`,
+    method: 'PUT',
+    data: data
+  })
+}
+
+/**
+ * 删除 某个 ci_type 的分组
+ * @param groupId
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function deleteCITypeGroupById(groupId, data) {
+  return axios({
+    url: `/v0.1/ci_types/attribute_groups/${groupId}`,
+    method: 'delete',
+    data: data
+  })
+}
+
+export function getUniqueConstraintList(type_id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/unique_constraint`,
+    method: 'get',
+  })
+}
+
+export function addUniqueConstraint(type_id, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/unique_constraint`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateUniqueConstraint(type_id, id, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/unique_constraint/${id}`,
+    method: 'put',
+    data: data
+  })
+}
+
+export function deleteUniqueConstraint(type_id, id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/unique_constraint/${id}`,
+    method: 'delete',
+  })
+}
+
+export function getTriggerList(type_id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/triggers`,
+    method: 'get',
+  })
+}
+
+export function addTrigger(type_id, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/triggers`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateTrigger(type_id, id, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/triggers/${id}`,
+    method: 'put',
+    data: data
+  })
+}
+
+export function deleteTrigger(type_id, id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/triggers/${id}`,
+    method: 'delete',
+  })
+}
+
+// CMDB的模型和实例的授权接口
+export function grantCiType(type_id, rid, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/roles/${rid}/grant`,
+    method: 'post',
+    data
+  })
+}
+// CMDB的模型和实例的删除授权接口
+export function revokeCiType(type_id, rid, data) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/roles/${rid}/revoke`,
+    method: 'post',
+    data
+  })
+}
+// CMDB的模型和实例的过滤的权限
+export function ciTypeFilterPermissions(type_id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/filters/permissions`,
+    method: 'get',
+  })
+}
+
+export function getAllDagsName(params) {
+  return axios({
+      url: '/v1/dag/all_names',
+      method: 'GET',
+      params: params
+  })
+}
diff --git a/cmdb-ui/src/modules/cmdb/api/history.js b/cmdb-ui/src/modules/cmdb/api/history.js
index 8566fa6..ae8a099 100644
--- a/cmdb-ui/src/modules/cmdb/api/history.js
+++ b/cmdb-ui/src/modules/cmdb/api/history.js
@@ -1,40 +1,56 @@
-import { axios } from '@/utils/request'
-
-export function getCIHistory (ciId) {
-  return axios({
-    url: `/v0.1/history/ci/${ciId}`,
-    method: 'GET'
-  })
-}
-
-export function getCIHistoryTable (params) {
-  return axios({
-    url: `/v0.1/history/records/attribute`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getRelationTable (params) {
-  return axios({
-    url: `/v0.1/history/records/relation`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getCITypesTable (params) {
-  return axios({
-    url: `/v0.1/history/ci_types`,
-    method: 'GET',
-    params: params
-  })
-}
-
-export function getUsers (params) {
-  return axios({
-    url: `/v1/acl/users/employee`,
-    method: 'GET',
-    params: params
-  })
-}
+import { axios } from '@/utils/request'
+
+export function getCIHistory(ciId) {
+  return axios({
+    url: `/v0.1/history/ci/${ciId}`,
+    method: 'GET'
+  })
+}
+
+export function getCIHistoryTable(params) {
+  return axios({
+    url: `/v0.1/history/records/attribute`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getRelationTable(params) {
+  return axios({
+    url: `/v0.1/history/records/relation`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getCITypesTable(params) {
+  return axios({
+    url: `/v0.1/history/ci_types`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getUsers(params) {
+  return axios({
+    url: `/v1/acl/users/employee`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getCiTriggers(params) {
+  return axios({
+    url: `/v0.1/history/ci_triggers`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function getCiTriggersByCiId(ci_id, params) {
+  return axios({
+    url: `/v0.1/history/ci_triggers/${ci_id}`,
+    method: 'GET',
+    params
+  })
+}
diff --git a/cmdb-ui/src/modules/cmdb/components/noticeContent/index.js b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.js
new file mode 100644
index 0000000..926d0db
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.js
@@ -0,0 +1,2 @@
+import NoticeContent from './index.vue'
+export default NoticeContent
diff --git a/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue
new file mode 100644
index 0000000..977ff31
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="notice-content">
+    <div class="notice-content-main">
+      <Toolbar
+        :editor="editor"
+        :defaultConfig="{
+          excludeKeys: [
+            'emotion',
+            'group-image',
+            'group-video',
+            'insertTable',
+            'codeBlock',
+            'blockquote',
+            'fullScreen',
+          ],
+        }"
+        mode="default"
+      />
+      <Editor class="notice-content-editor" :defaultConfig="editorConfig" mode="simple" @onCreated="onCreated" />
+      <div class="notice-content-sidebar">
+        <template v-if="needOld">
+          <div class="notice-content-sidebar-divider">变更前</div>
+          <div
+            @dblclick="dblclickSidebar(`old_${attr.name}`, attr.alias || attr.name)"
+            class="notice-content-sidebar-item"
+            v-for="attr in attrList"
+            :key="`old_${attr.id}`"
+            :title="attr.alias || attr.name"
+          >
+            {{ attr.alias || attr.name }}
+          </div>
+          <div class="notice-content-sidebar-divider">变更后</div>
+        </template>
+        <div
+          @dblclick="dblclickSidebar(attr.name, attr.alias || attr.name)"
+          class="notice-content-sidebar-item"
+          v-for="attr in attrList"
+          :key="attr.id"
+          :title="attr.alias || attr.name"
+        >
+          {{ attr.alias || attr.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+export default {
+  name: 'NoticeContent',
+  components: { Editor, Toolbar },
+  props: {
+    attrList: {
+      type: Array,
+      default: () => [],
+    },
+    needOld: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      editor: null,
+      editorConfig: { placeholder: '请输入通知内容', readOnly: this.readOnly },
+      content: '',
+      defaultParams: [],
+      value2LabelMap: {},
+    }
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    getContent() {
+      const html = _.cloneDeep(this.editor.getHtml())
+      const _html = html.replace(
+        /<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline.*?<\/span>/gm,
+        (value) => {
+          const _match = value.match(/(?<=data-attachmentValue=").*?(?=")/)
+          return `{{${_match}}}`
+        }
+      )
+      return { body_html: html, body: _html }
+    },
+    setContent(html) {
+      this.editor.setHtml(html)
+    },
+    dblclickSidebar(value, label) {
+      if (!this.readOnly) {
+        this.editor.restoreSelection()
+
+        const node = {
+          type: 'attachment',
+          attachmentValue: value,
+          attachmentLabel: `${label}`,
+          children: [{ text: '' }],
+        }
+        this.editor.insertNode(node)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+.notice-content {
+  width: 100%;
+  & &-main {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    position: relative;
+    .notice-content-editor {
+      height: 300px;
+      width: 75%;
+      border: 1px solid #e4e7ed;
+      border-top: none;
+      overflow: hidden;
+    }
+    .notice-content-sidebar {
+      width: 25%;
+      position: absolute;
+      height: 300px;
+      bottom: 0;
+      left: 0;
+      border: 1px solid #e4e7ed;
+      border-top: none;
+      border-right: none;
+      overflow: auto;
+      .notice-content-sidebar-divider {
+        position: sticky;
+        top: 0;
+        margin: 0;
+        font-size: 12px;
+        color: #afafaf;
+        background-color: #fff;
+        line-height: 20px;
+        padding-left: 12px;
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          border-top: 1px solid #d1d1d1;
+          top: 50%;
+          transition: translateY(-50%);
+        }
+        &::before {
+          left: 3px;
+          width: 5px;
+        }
+        &::after {
+          right: 3px;
+          width: 78px;
+        }
+      }
+      .notice-content-sidebar-item:first-child {
+        margin-top: 10px;
+      }
+      .notice-content-sidebar-item {
+        line-height: 1.5;
+        padding: 4px 12px;
+        cursor: pointer;
+        user-select: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        &:hover {
+          background-color: #custom_colors[color_2];
+          color: #custom_colors[color_1];
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="less">
+@import '~@/style/static.less';
+
+.notice-content {
+  .w-e-bar {
+    background-color: #custom_colors[color_2];
+  }
+  .w-e-text-placeholder {
+    line-height: 1.5;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
new file mode 100644
index 0000000..3afb659
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="authorization-wrapper">
+    <div class="authorization-header">
+      <a-space>
+        <span>Authorization Type</span>
+        <a-select size="small" v-model="authorizationType" style="width: 200px" :showSearch="true">
+          <a-select-option value="none">
+            None
+          </a-select-option>
+          <a-select-option value="BasicAuth">
+            Basic Auth
+          </a-select-option>
+          <a-select-option value="Bearer">
+            Bearer
+          </a-select-option>
+          <a-select-option value="APIKey">
+            APIKey
+          </a-select-option>
+          <a-select-option value="OAuth2.0">
+            OAuth2.0
+          </a-select-option>
+        </a-select>
+      </a-space>
+    </div>
+    <div style="margin-top:10px">
+      <table v-if="authorizationType === 'BasicAuth'">
+        <tr>
+          <td><a-input class="authorization-input" v-model="BasicAuth.username" placeholder="用户名" /></td>
+        </tr>
+        <tr>
+          <td><a-input class="authorization-input" v-model="BasicAuth.password" placeholder="密码" /></td>
+        </tr>
+      </table>
+
+      <table v-else-if="authorizationType === 'Bearer'">
+        <tr>
+          <td><a-input class="authorization-input" v-model="Bearer.token" placeholder="token" /></td>
+        </tr>
+      </table>
+
+      <table v-else-if="authorizationType === 'APIKey'">
+        <tr>
+          <td><a-input class="authorization-input" v-model="APIKey.key" placeholder="key" /></td>
+        </tr>
+        <tr>
+          <td><a-input class="authorization-input" v-model="APIKey.value" placeholder="value" /></td>
+        </tr>
+      </table>
+
+      <table v-else-if="authorizationType === 'OAuth2.0'">
+        <tr>
+          <td><a-input class="authorization-input" v-model="OAuth2.client_id" placeholder="client_id" /></td>
+        </tr>
+        <tr>
+          <td>
+            <a-input class="authorization-input" v-model="OAuth2.client_secret" placeholder="client_secret" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a-input
+              class="authorization-input"
+              v-model="OAuth2.authorization_base_url"
+              placeholder="authorization_base_url"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a-input class="authorization-input" v-model="OAuth2.token_url" placeholder="token_url" />
+          </td>
+        </tr>
+        <tr>
+          <td><a-input class="authorization-input" v-model="OAuth2.redirect_url" placeholder="redirect_url" /></td>
+        </tr>
+        <tr>
+          <td>
+            <a-input class="authorization-input" v-model="OAuth2.scope" placeholder="scope" />
+          </td>
+        </tr>
+      </table>
+
+      <a-empty
+        v-else
+        :image-style="{
+          height: '60px',
+        }"
+      >
+        <img slot="image" :src="require('@/assets/data_empty.png')" />
+        <span slot="description"> 暂无请求认证 </span>
+      </a-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Authorization',
+  data() {
+    return {
+      authorizationType: 'none',
+      BasicAuth: {
+        username: '',
+        password: '',
+      },
+      Bearer: {
+        token: '',
+      },
+      APIKey: {
+        key: '',
+        value: '',
+      },
+      OAuth2: {
+        client_id: '',
+        client_secret: '',
+        authorization_base_url: '',
+        token_url: '',
+        redirect_url: '',
+        scope: '',
+      },
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.authorization-wrapper {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  table,
+  td,
+  th {
+    border: 1px solid #f3f4f6;
+  }
+  .authorization-input {
+    border: none;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/body.vue b/cmdb-ui/src/modules/cmdb/components/webhook/body.vue
new file mode 100644
index 0000000..a30b1ce
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/body.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="body-wrapper">
+    <div class="body-header">
+      <!-- <a-space>
+        <span>Content Type</span>
+        <a-select size="small" v-model="contentType" style="width: 200px" :showSearch="true">
+          <a-select-option value="none">
+            None
+          </a-select-option>
+          <a-select-opt-group v-for="item in segmentedContentTypes" :key="item.title" :label="item.title">
+            <a-select-option v-for="ele in item.contentTypes" :key="ele" :value="ele">
+              {{ ele }}
+            </a-select-option>
+          </a-select-opt-group>
+        </a-select>
+      </a-space> -->
+    </div>
+    <div style="margin-top:10px">
+      <vue-json-editor v-model="jsonData" :showBtns="false" :mode="'text'" />
+      <!-- <a-empty
+        v-else
+        :image-style="{
+          height: '60px',
+        }"
+      >
+        <img slot="image" :src="require('@/assets/data_empty.png')" />
+        <span slot="description"> 暂无请求体 </span>
+      </a-empty> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import vueJsonEditor from 'vue-json-editor'
+
+export default {
+  name: 'Body',
+  components: { vueJsonEditor },
+  data() {
+    const segmentedContentTypes = [
+      {
+        title: 'text',
+        contentTypes: [
+          'application/json',
+          'application/ld+json',
+          'application/hal+json',
+          'application/vnd.api+json',
+          'application/xml',
+        ],
+      },
+      {
+        title: 'structured',
+        contentTypes: ['application/x-www-form-urlencoded', 'multipart/form-data'],
+      },
+      {
+        title: 'others',
+        contentTypes: ['text/html', 'text/plain'],
+      },
+    ]
+    return {
+      segmentedContentTypes,
+    //   contentType: 'none',
+      jsonData: {},
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped></style>
+<style lang="less">
+.body-wrapper {
+  div.jsoneditor-menu {
+    display: none;
+  }
+  div.jsoneditor {
+    border-color: #f3f4f6;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/header.vue b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
new file mode 100644
index 0000000..d039016
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="headers-header">
+      <span>请求参数</span>
+      <a-space>
+        <a-tooltip title="清空">
+          <ops-icon
+            type="icon-xianxing-delete"
+            @click="
+              () => {
+                headers = [
+                  {
+                    id: uuidv4(),
+                    key: '',
+                    value: '',
+                  },
+                ]
+              }
+            "
+          />
+        </a-tooltip>
+        <a-tooltip title="新增">
+          <a-icon type="plus" @click="add" />
+        </a-tooltip>
+      </a-space>
+    </div>
+    <div class="headers-box">
+      <table>
+        <tr v-for="(item, index) in headers" :key="item.id">
+          <td><a-input class="headers-input" v-model="item.key" :placeholder="`参数${index + 1}`" /></td>
+          <td><a-input class="headers-input" v-model="item.value" :placeholder="`值${index + 1}`" /></td>
+          <td>
+            <a style="color:red">
+              <ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
+            </a>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+
+export default {
+  name: 'Header',
+  data() {
+    return {
+      headers: [
+        {
+          id: uuidv4(),
+          key: '',
+          value: '',
+        },
+      ],
+    }
+  },
+  methods: {
+    uuidv4,
+    add() {
+      this.headers.push({
+        id: uuidv4(),
+        key: '',
+        value: '',
+      })
+    },
+    deleteParam(index) {
+      this.headers.splice(index, 1)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.headers-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  i {
+    cursor: pointer;
+  }
+}
+.headers-box {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  table,
+  td,
+  th {
+    border: 1px solid #f3f4f6;
+  }
+  .headers-input {
+    border: none;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/index.js b/cmdb-ui/src/modules/cmdb/components/webhook/index.js
new file mode 100644
index 0000000..dea91c2
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/index.js
@@ -0,0 +1,2 @@
+import Webhook from './index.vue'
+export default Webhook
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/index.vue b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
new file mode 100644
index 0000000..e1d625c
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <treeselect
+        :disable-branch-nodes="true"
+        class="custom-treeselect custom-treeselect-bgcAndBorder"
+        :style="{
+          '--custom-height': '30px',
+          lineHeight: '30px',
+          '--custom-bg-color': '#fff',
+          '--custom-border': '1px solid #d9d9d9',
+          display: 'inline-block',
+          width: '100px',
+        }"
+        v-model="method"
+        :multiple="false"
+        :clearable="false"
+        searchable
+        :options="methodList"
+        value-consists-of="LEAF_PRIORITY"
+        placeholder="请选择方式"
+      >
+      </treeselect>
+      <a-input :style="{ display: 'inline-block', width: 'calc(100% - 100px)' }" v-model="url" />
+    </a-input-group>
+    <a-tabs>
+      <a-tab-pane key="Parameters" tab="Parameters">
+        <Parameters ref="Parameters" />
+      </a-tab-pane>
+      <a-tab-pane key="Body" tab="Body" force-render>
+        <Body ref="Body" />
+      </a-tab-pane>
+      <a-tab-pane key="Headers" tab="Headers" force-render>
+        <Header ref="Header" />
+      </a-tab-pane>
+      <a-tab-pane key="Authorization" tab="Authorization" force-render>
+        <Authorization ref="Authorization" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
+import Parameters from './paramaters.vue'
+import Body from './body.vue'
+import Header from './header.vue'
+import Authorization from './authorization.vue'
+export default {
+  name: 'Webhook',
+  components: { Parameters, Body, Header, Authorization },
+  data() {
+    const methodList = [
+      {
+        id: 'GET',
+        label: 'GET',
+      },
+      {
+        id: 'POST',
+        label: 'POST',
+      },
+      {
+        id: 'PUT',
+        label: 'PUT',
+      },
+      {
+        id: 'DELETE',
+        label: 'DELETE',
+      },
+    ]
+    return {
+      methodList,
+      method: 'GET',
+      url: '',
+    }
+  },
+  methods: {
+    getParams() {
+      const parameters = {}
+      this.$refs.Parameters.parameters.forEach((item) => {
+        parameters[item.key] = item.value
+      })
+      const body = this.$refs.Body.jsonData
+      const headers = {}
+      this.$refs.Header.headers.forEach((item) => {
+        headers[item.key] = item.value
+      })
+      let authorization = {}
+      const type = this.$refs.Authorization.authorizationType
+      if (type !== 'none') {
+        if (type === 'OAuth2.0') {
+          authorization = { ...this.$refs.Authorization['OAuth2'], type }
+        } else {
+          authorization = { ...this.$refs.Authorization[type], type }
+        }
+      }
+      const { method, url } = this
+      return { method, url, parameters, body, headers, authorization }
+    },
+    setParams(params) {
+      console.log(2222, params)
+      const { method, url, parameters, body, headers, authorization = {} } = params ?? {}
+      this.method = method
+      this.url = url
+      this.$refs.Parameters.parameters =
+        Object.keys(parameters).map((key) => {
+          return {
+            id: uuidv4(),
+            key: key,
+            value: parameters[key],
+          }
+        }) || []
+      this.$refs.Body.jsonData = body
+      this.$refs.Header.headers =
+        Object.keys(headers).map((key) => {
+          return {
+            id: uuidv4(),
+            key: key,
+            value: headers[key],
+          }
+        }) || []
+      const { type = 'none' } = authorization
+      console.log(type)
+      this.$refs.Authorization.authorizationType = type
+      if (type !== 'none') {
+        const _authorization = _.cloneDeep(authorization)
+        delete _authorization.type
+        if (type === 'OAuth2.0') {
+          this.$refs.Authorization.OAuth2 = _authorization
+        } else {
+          this.$refs.Authorization[type] = _authorization
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue b/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
new file mode 100644
index 0000000..93238e3
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div class="parameters-header">
+      <span>请求参数</span>
+      <a-space>
+        <a-tooltip title="清空">
+          <ops-icon
+            type="icon-xianxing-delete"
+            @click="
+              () => {
+                parameters = []
+              }
+            "
+          />
+        </a-tooltip>
+        <a-tooltip title="新增">
+          <a-icon type="plus" @click="add" />
+        </a-tooltip>
+      </a-space>
+    </div>
+    <div class="parameters-box" v-if="parameters && parameters.length">
+      <table>
+        <tr v-for="(item, index) in parameters" :key="item.id">
+          <td><a-input class="parameters-input" v-model="item.key" :placeholder="`参数${index + 1}`" /></td>
+          <td><a-input class="parameters-input" v-model="item.value" :placeholder="`值${index + 1}`" /></td>
+          <td>
+            <a style="color:red">
+              <ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
+            </a>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <a-empty
+      v-else
+      :image-style="{
+        height: '60px',
+      }"
+    >
+      <img slot="image" :src="require('@/assets/data_empty.png')" />
+      <span slot="description"> 暂无请求参数 </span>
+      <a-button @click="add" type="primary" size="small" icon="plus" class="ops-button-primary">
+        添加
+      </a-button>
+    </a-empty>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+
+export default {
+  name: 'Parameters',
+  data() {
+    return {
+      parameters: [],
+    }
+  },
+  methods: {
+    add() {
+      this.parameters.push({
+        id: uuidv4(),
+        key: '',
+        value: '',
+      })
+    },
+    deleteParam(index) {
+      this.parameters.splice(index, 1)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.parameters-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  i {
+    cursor: pointer;
+  }
+}
+.parameters-box {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  table,
+  td,
+  th {
+    border: 1px solid #f3f4f6;
+  }
+  .parameters-input {
+    border: none;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
index 303cbb4..006d3b0 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
@@ -1,319 +1,327 @@
-<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">
-      <a-tab-pane key="tab_1">
-        <span slot="tab"><a-icon type="book" />属性</span>
-        <div :style="{ maxHeight: `${windowHeight - 44}px`, overflow: 'auto', padding: '24px' }" class="ci-detail-attr">
-          <el-descriptions
-            :title="group.name || '其他'"
-            :key="group.name"
-            v-for="group in attributeGroups"
-            border
-            :column="3"
-          >
-            <el-descriptions-item
-              :label="`${attr.alias || attr.name}`"
-              :key="attr.name"
-              v-for="attr in group.attributes"
-            >
-              <CiDetailAttrContent :ci="ci" :attr="attr" @refresh="refresh" />
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="tab_2">
-        <span slot="tab"><a-icon type="branches" />关系</span>
-        <div :style="{ 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" />操作历史</span>
-        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
-          <vxe-table
-            ref="xTable"
-            :data="ciHistory"
-            size="small"
-            :max-height="`${windowHeight - 94}px`"
-            :span-method="mergeRowMethod"
-            border
-            :scroll-y="{ enabled: false }"
-            class="ops-stripe-table"
-          >
-            <vxe-table-column sortable field="created_at" title="时间"></vxe-table-column>
-            <vxe-table-column
-              field="username"
-              title="用户"
-              :filters="[]"
-              :filter-method="filterUsernameMethod"
-            ></vxe-table-column>
-            <vxe-table-column
-              field="operate_type"
-              :filters="[
-                { value: 0, label: '新增' },
-                { value: 1, label: '删除' },
-                { value: 3, label: '修改' },
-              ]"
-              :filter-method="filterOperateMethod"
-              title="操作"
-            >
-              <template #default="{ row }">
-                {{ operateTypeMap[row.operate_type] }}
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="attr_alias"
-              title="属性"
-              :filters="[]"
-              :filter-method="filterAttrMethod"
-            ></vxe-table-column>
-            <vxe-table-column field="old" title="旧"></vxe-table-column>
-            <vxe-table-column field="new" title="新"></vxe-table-column>
-          </vxe-table>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-  </CustomDrawer>
-</template>
-
-<script>
-import { Descriptions, DescriptionsItem } from 'element-ui'
-import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
-import { getCIHistory } from '@/modules/cmdb/api/history'
-import { getCIById } from '@/modules/cmdb/api/ci'
-import CiDetailAttrContent from './ciDetailAttrContent.vue'
-import CiDetailRelation from './ciDetailRelation.vue'
-
-export default {
-  components: {
-    ElDescriptions: Descriptions,
-    ElDescriptionsItem: DescriptionsItem,
-    CiDetailAttrContent,
-    CiDetailRelation,
-  },
-  props: {
-    typeId: {
-      type: Number,
-      required: true,
-    },
-    treeViewsLevels: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    const operateTypeMap = {
-      0: '新增',
-      1: '删除',
-      2: '修改',
-    }
-    return {
-      operateTypeMap,
-      visible: false,
-      ci: {},
-      attributeGroups: [],
-      activeTabKey: 'tab_1',
-      rowSpanMap: {},
-      ciHistory: [],
-      ciId: null,
-      ci_types: [],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  provide() {
-    return {
-      ci_types: () => {
-        return this.ci_types
-      },
-    }
-  },
-  inject: ['reload', 'handleSearch', 'attrList'],
-  methods: {
-    create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
-      this.visible = true
-      this.activeTabKey = activeTabKey
-      if (activeTabKey === 'tab_2') {
-        this.$nextTick(() => {
-          this.$refs.ciDetailRelation.activeKey = ciDetailRelationKey
-        })
-      }
-      this.ciId = ciId
-      this.getAttributes()
-      this.getCI()
-      this.getCIHistory()
-      getCITypes().then((res) => {
-        this.ci_types = res.ci_types
-      })
-    },
-    getAttributes() {
-      getCITypeGroupById(this.typeId, { need_other: 1 })
-        .then((res) => {
-          this.attributeGroups = res
-        })
-        .catch((e) => {})
-    },
-    getCI() {
-      getCIById(this.ciId)
-        .then((res) => {
-          // this.ci = res.ci
-          this.ci = res.result[0]
-        })
-        .catch((e) => {})
-    },
-
-    getCIHistory() {
-      getCIHistory(this.ciId)
-        .then((res) => {
-          this.ciHistory = res
-
-          const rowSpanMap = {}
-          let startIndex = 0
-          let startCount = 1
-          res.forEach((item, index) => {
-            if (index === 0) {
-              return
-            }
-            if (res[index].record_id === res[startIndex].record_id) {
-              startCount += 1
-              rowSpanMap[index] = 0
-              if (index === res.length - 1) {
-                rowSpanMap[startIndex] = startCount
-              }
-            } else {
-              rowSpanMap[startIndex] = startCount
-              startIndex = index
-              startCount = 1
-              if (index === res.length - 1) {
-                rowSpanMap[index] = 1
-              }
-            }
-          })
-          this.rowSpanMap = rowSpanMap
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-    changeTab(key) {
-      this.activeTabKey = key
-      if (key === 'tab_3') {
-        this.$nextTick(() => {
-          const $table = this.$refs.xTable
-          if ($table) {
-            const usernameColumn = $table.getColumnByField('username')
-            const attrColumn = $table.getColumnByField('attr_alias')
-            if (usernameColumn) {
-              const usernameList = [...new Set(this.ciHistory.map((item) => item.username))]
-              $table.setFilter(
-                usernameColumn,
-                usernameList.map((item) => {
-                  return {
-                    value: item,
-                    label: item,
-                  }
-                })
-              )
-            }
-            if (attrColumn) {
-              $table.setFilter(
-                attrColumn,
-                this.attrList().map((attr) => {
-                  return { value: attr.alias || attr.name, label: attr.alias || attr.name }
-                })
-              )
-            }
-          }
-        })
-      }
-    },
-    filterUsernameMethod({ value, row, column }) {
-      return row.username === value
-    },
-    filterOperateMethod({ value, row, column }) {
-      return Number(row.operate_type) === Number(value)
-    },
-    filterAttrMethod({ value, row, column }) {
-      return row.attr_alias === value
-    },
-    refresh(editAttrName) {
-      this.getCI()
-      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
-      // 修改的字段为树形视图订阅的字段 则全部reload
-      setTimeout(() => {
-        if (_find) {
-          this.reload()
-        } else {
-          this.handleSearch()
-        }
-      }, 500)
-    },
-    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
-      const fields = ['created_at', 'username']
-      const cellValue = row[column.property]
-      if (cellValue && fields.includes(column.property)) {
-        const prevRow = visibleData[_rowIndex - 1]
-        let nextRow = visibleData[_rowIndex + 1]
-        if (prevRow && prevRow[column.property] === cellValue) {
-          return { rowspan: 0, colspan: 0 }
-        } else {
-          let countRowspan = 1
-          while (nextRow && nextRow[column.property] === cellValue) {
-            nextRow = visibleData[++countRowspan + _rowIndex]
-          }
-          if (countRowspan > 1) {
-            return { rowspan: countRowspan, colspan: 1 }
-          }
-        }
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped></style>
-<style lang="less">
-.ci-detail {
-  .ant-tabs-bar {
-    margin: 0;
-  }
-  .ci-detail-attr {
-    .el-descriptions-item__content {
-      cursor: default;
-      &:hover a {
-        opacity: 1 !important;
-      }
-    }
-    .el-descriptions:first-child > .el-descriptions__header {
-      margin-top: 0;
-    }
-    .el-descriptions__header {
-      margin-bottom: 5px;
-      margin-top: 20px;
-    }
-    .ant-form-item {
-      margin-bottom: 0;
-    }
-    .ant-form-item-control {
-      line-height: 19px;
-    }
-  }
-}
-</style>
+<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">
+      <a-tab-pane key="tab_1">
+        <span slot="tab"><a-icon type="book" />属性</span>
+        <div :style="{ maxHeight: `${windowHeight - 44}px`, overflow: 'auto', padding: '24px' }" class="ci-detail-attr">
+          <el-descriptions
+            :title="group.name || '其他'"
+            :key="group.name"
+            v-for="group in attributeGroups"
+            border
+            :column="3"
+          >
+            <el-descriptions-item
+              :label="`${attr.alias || attr.name}`"
+              :key="attr.name"
+              v-for="attr in group.attributes"
+            >
+              <CiDetailAttrContent :ci="ci" :attr="attr" @refresh="refresh" />
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_2">
+        <span slot="tab"><a-icon type="branches" />关系</span>
+        <div :style="{ 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" />操作历史</span>
+        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
+          <vxe-table
+            ref="xTable"
+            :data="ciHistory"
+            size="small"
+            :max-height="`${windowHeight - 94}px`"
+            :span-method="mergeRowMethod"
+            border
+            :scroll-y="{ enabled: false }"
+            class="ops-stripe-table"
+          >
+            <vxe-table-column sortable field="created_at" title="时间"></vxe-table-column>
+            <vxe-table-column
+              field="username"
+              title="用户"
+              :filters="[]"
+              :filter-method="filterUsernameMethod"
+            ></vxe-table-column>
+            <vxe-table-column
+              field="operate_type"
+              :filters="[
+                { value: 0, label: '新增' },
+                { value: 1, label: '删除' },
+                { value: 3, label: '修改' },
+              ]"
+              :filter-method="filterOperateMethod"
+              title="操作"
+            >
+              <template #default="{ row }">
+                {{ operateTypeMap[row.operate_type] }}
+              </template>
+            </vxe-table-column>
+            <vxe-table-column
+              field="attr_alias"
+              title="属性"
+              :filters="[]"
+              :filter-method="filterAttrMethod"
+            ></vxe-table-column>
+            <vxe-table-column field="old" title="旧"></vxe-table-column>
+            <vxe-table-column field="new" title="新"></vxe-table-column>
+          </vxe-table>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_4">
+        <span slot="tab"><ops-icon type="itsm_auto_trigger" />触发历史</span>
+        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
+          <TriggerTable :ci_id="ci._id" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </CustomDrawer>
+</template>
+
+<script>
+import { Descriptions, DescriptionsItem } from 'element-ui'
+import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
+import { getCIHistory } from '@/modules/cmdb/api/history'
+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 {
+  components: {
+    ElDescriptions: Descriptions,
+    ElDescriptionsItem: DescriptionsItem,
+    CiDetailAttrContent,
+    CiDetailRelation,
+    TriggerTable,
+  },
+  props: {
+    typeId: {
+      type: Number,
+      required: true,
+    },
+    treeViewsLevels: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    const operateTypeMap = {
+      0: '新增',
+      1: '删除',
+      2: '修改',
+    }
+    return {
+      operateTypeMap,
+      visible: false,
+      ci: {},
+      attributeGroups: [],
+      activeTabKey: 'tab_1',
+      rowSpanMap: {},
+      ciHistory: [],
+      ciId: null,
+      ci_types: [],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return {
+      ci_types: () => {
+        return this.ci_types
+      },
+    }
+  },
+  inject: ['reload', 'handleSearch', 'attrList'],
+  methods: {
+    create(ciId, activeTabKey = 'tab_1', ciDetailRelationKey = '1') {
+      this.visible = true
+      this.activeTabKey = activeTabKey
+      if (activeTabKey === 'tab_2') {
+        this.$nextTick(() => {
+          this.$refs.ciDetailRelation.activeKey = ciDetailRelationKey
+        })
+      }
+      this.ciId = ciId
+      this.getAttributes()
+      this.getCI()
+      this.getCIHistory()
+      getCITypes().then((res) => {
+        this.ci_types = res.ci_types
+      })
+    },
+    getAttributes() {
+      getCITypeGroupById(this.typeId, { need_other: 1 })
+        .then((res) => {
+          this.attributeGroups = res
+        })
+        .catch((e) => {})
+    },
+    getCI() {
+      getCIById(this.ciId)
+        .then((res) => {
+          // this.ci = res.ci
+          this.ci = res.result[0]
+        })
+        .catch((e) => {})
+    },
+
+    getCIHistory() {
+      getCIHistory(this.ciId)
+        .then((res) => {
+          this.ciHistory = res
+
+          const rowSpanMap = {}
+          let startIndex = 0
+          let startCount = 1
+          res.forEach((item, index) => {
+            if (index === 0) {
+              return
+            }
+            if (res[index].record_id === res[startIndex].record_id) {
+              startCount += 1
+              rowSpanMap[index] = 0
+              if (index === res.length - 1) {
+                rowSpanMap[startIndex] = startCount
+              }
+            } else {
+              rowSpanMap[startIndex] = startCount
+              startIndex = index
+              startCount = 1
+              if (index === res.length - 1) {
+                rowSpanMap[index] = 1
+              }
+            }
+          })
+          this.rowSpanMap = rowSpanMap
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    },
+    changeTab(key) {
+      this.activeTabKey = key
+      if (key === 'tab_3') {
+        this.$nextTick(() => {
+          const $table = this.$refs.xTable
+          if ($table) {
+            const usernameColumn = $table.getColumnByField('username')
+            const attrColumn = $table.getColumnByField('attr_alias')
+            if (usernameColumn) {
+              const usernameList = [...new Set(this.ciHistory.map((item) => item.username))]
+              $table.setFilter(
+                usernameColumn,
+                usernameList.map((item) => {
+                  return {
+                    value: item,
+                    label: item,
+                  }
+                })
+              )
+            }
+            if (attrColumn) {
+              $table.setFilter(
+                attrColumn,
+                this.attrList().map((attr) => {
+                  return { value: attr.alias || attr.name, label: attr.alias || attr.name }
+                })
+              )
+            }
+          }
+        })
+      }
+    },
+    filterUsernameMethod({ value, row, column }) {
+      return row.username === value
+    },
+    filterOperateMethod({ value, row, column }) {
+      return Number(row.operate_type) === Number(value)
+    },
+    filterAttrMethod({ value, row, column }) {
+      return row.attr_alias === value
+    },
+    refresh(editAttrName) {
+      this.getCI()
+      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
+      // 修改的字段为树形视图订阅的字段 则全部reload
+      setTimeout(() => {
+        if (_find) {
+          this.reload()
+        } else {
+          this.handleSearch()
+        }
+      }, 500)
+    },
+    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
+      const fields = ['created_at', 'username']
+      const cellValue = row[column.property]
+      if (cellValue && fields.includes(column.property)) {
+        const prevRow = visibleData[_rowIndex - 1]
+        let nextRow = visibleData[_rowIndex + 1]
+        if (prevRow && prevRow[column.property] === cellValue) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let countRowspan = 1
+          while (nextRow && nextRow[column.property] === cellValue) {
+            nextRow = visibleData[++countRowspan + _rowIndex]
+          }
+          if (countRowspan > 1) {
+            return { rowspan: countRowspan, colspan: 1 }
+          }
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped></style>
+<style lang="less">
+.ci-detail {
+  .ant-tabs-bar {
+    margin: 0;
+  }
+  .ci-detail-attr {
+    .el-descriptions-item__content {
+      cursor: default;
+      &:hover a {
+        opacity: 1 !important;
+      }
+    }
+    .el-descriptions:first-child > .el-descriptions__header {
+      margin-top: 0;
+    }
+    .el-descriptions__header {
+      margin-bottom: 5px;
+      margin-top: 20px;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+    .ant-form-item-control {
+      line-height: 19px;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
index 5c84d13..9fe6e4c 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
@@ -1,197 +1,575 @@
-<template>
-  <a-modal :title="title" :visible="visible" @cancel="handleCancel" @ok="handleOk">
-    <a-space slot="footer">
-      <a-button type="primary" ghost @click="handleCancel">取消</a-button>
-      <a-button v-if="triggerId" type="danger" @click="handleDetele">删除</a-button>
-      <a-button @click="handleOk" type="primary">确定</a-button>
-    </a-space>
-    <a-form-model ref="triggerForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-      <a-form-model-item label="属性" prop="attr_id" :hidden="!isCreateFromTriggerTable || triggerId">
-        <a-select v-model="form.attr_id">
-          <a-select-option v-for="attr in canAddTriggerAttr" :key="attr.id" :value="attr.id">{{
-            attr.alias || attr.name
-          }}</a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="主题" prop="subject">
-        <a-input v-model="form.subject" />
-      </a-form-model-item>
-      <a-form-model-item label="内容" prop="body">
-        <a-textarea v-model="form.body" :rows="3" />
-      </a-form-model-item>
-      <a-form-model-item label="微信通知" prop="wx_to">
-        <a-select
-          mode="tags"
-          v-model="form.wx_to"
-          placeholder="选择微信通知人"
-          showSearch
-          :filter-option="false"
-          @search="filterChange"
-        >
-          <a-select-option v-for="item in filterWxUsers" :value="item['wx_id']" :key="item.id">
-            <span>{{ item['nickname'] }}</span>
-            <a-divider type="vertical" />
-            <span>{{ item['wx_id'].length > 12 ? item['wx_id'].slice(0, 10) + '...' : item['wx_id'] }}</span>
-          </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="邮箱通知" prop="mail_to">
-        <a-textarea v-model="form.mail_to" :rows="3" placeholder="多个邮箱用逗号分隔" />
-      </a-form-model-item>
-      <a-form-model-item label="提前" prop="before_days">
-        <a-input-number v-model="form.before_days" :min="0" />
-        天
-      </a-form-model-item>
-      <a-form-model-item label="发送时间" prop="notify_at">
-        <a-time-picker v-model="form.notify_at" format="HH:mm" valueFormat="HH:mm" />
-      </a-form-model-item>
-    </a-form-model>
-  </a-modal>
-</template>
-
-<script>
-import { getWX } from '../../api/perm'
-import { addTrigger, updateTrigger, deleteTrigger } from '../../api/CIType'
-export default {
-  name: 'TriggerForm',
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      visible: false,
-      form: { attr_id: '', subject: '', body: '', wx_to: [], mail_to: '', before_days: 0, notify_at: '08:00' },
-      rules: {
-        attr_id: [{ required: true, message: '请选择属性' }],
-        subject: [{ required: true, message: '请填写主题' }],
-        body: [{ required: true, message: '请填写内容' }],
-      },
-      WxUsers: [],
-      filterValue: '',
-      triggerId: null,
-      attr_id: null,
-      canAddTriggerAttr: [],
-      isCreateFromTriggerTable: false,
-      title: '新增触发器',
-    }
-  },
-  computed: {
-    filterWxUsers() {
-      if (!this.filterValue) {
-        return this.WxUsers
-      }
-      return this.WxUsers.filter(
-        (user) =>
-          user.nickname.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0 ||
-          user.username.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0
-      )
-    },
-  },
-  inject: {
-    refresh: {
-      from: 'refresh',
-      default: null,
-    },
-  },
-  methods: {
-    createFromTriggerTable(canAddTriggerAttr) {
-      this.visible = true
-      this.getWxList()
-      this.canAddTriggerAttr = canAddTriggerAttr
-      this.triggerId = null
-      this.isCreateFromTriggerTable = true
-      this.title = '新增触发器'
-      this.form = {
-        attr_id: '',
-        subject: '',
-        body: '',
-        wx_to: [],
-        mail_to: '',
-        before_days: 0,
-        notify_at: '08:00',
-      }
-    },
-    open(property) {
-      this.visible = true
-      this.getWxList()
-      if (property.has_trigger) {
-        this.triggerId = property.trigger.id
-        this.title = `编辑触发器 ${property.alias || property.name}`
-        this.form = {
-          ...property.trigger.notify,
-          attr_id: property.id,
-          mail_to: property.trigger.notify.mail_to ? property.trigger.notify.mail_to.join(',') : '',
-        }
-      } else {
-        this.title = `新增触发器 ${property.alias || property.name}`
-        this.triggerId = null
-        this.form = {
-          attr_id: property.id,
-          subject: '',
-          body: '',
-          wx_to: [],
-          mail_to: '',
-          before_days: 0,
-          notify_at: '08:00',
-        }
-      }
-    },
-    handleCancel() {
-      this.$refs.triggerForm.clearValidate()
-      this.$refs.triggerForm.resetFields()
-      this.filterValue = ''
-      this.visible = false
-    },
-    getWxList() {
-      getWX().then((res) => {
-        this.WxUsers = res.filter((item) => item.wx_id)
-      })
-    },
-    filterChange(value) {
-      this.filterValue = value
-    },
-    handleOk() {
-      this.$refs.triggerForm.validate(async (valid) => {
-        if (valid) {
-          const { mail_to, attr_id } = this.form
-          const params = {
-            attr_id,
-            notify: { ...this.form, mail_to: mail_to ? mail_to.split(',') : undefined },
-          }
-          delete params.notify.attr_id
-          if (this.triggerId) {
-            await updateTrigger(this.CITypeId, this.triggerId, params)
-          } else {
-            await addTrigger(this.CITypeId, params)
-          }
-          this.handleCancel()
-          if (this.refresh) {
-            this.refresh()
-          }
-        }
-      })
-    },
-    handleDetele() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除该触发器吗?',
-        onOk() {
-          deleteTrigger(that.CITypeId, that.triggerId).then(() => {
-            that.$message.success('删除成功！')
-            that.handleCancel()
-            if (that.refresh) {
-              that.refresh()
-            }
-          })
-        },
-      })
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <CustomDrawer
+    wrapClassName="trigger-form"
+    :width="700"
+    :title="title"
+    :visible="visible"
+    @close="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="custom-drawer-bottom-action">
+      <a-button type="primary" ghost @click="handleCancel">取消</a-button>
+      <a-button v-if="triggerId" type="danger" @click="handleDetele">删除</a-button>
+      <a-button @click="handleOk" type="primary">确定</a-button>
+    </div>
+    <a-form-model ref="triggerForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
+      <p><strong>基本信息</strong></p>
+      <a-form-model-item label="名称" prop="name">
+        <a-input v-model="form.name" placeholder="请输入名称" />
+      </a-form-model-item>
+      <a-form-model-item label="类型">
+        <a-radio-group v-model="category">
+          <a-radio-button :value="1">
+            数据变更
+          </a-radio-button>
+          <a-radio-button :value="2">
+            日期属性
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="description">
+        <a-input v-model="form.description" placeholder="请输入备注" />
+      </a-form-model-item>
+      <a-form-model-item label="开启" prop="enable">
+        <a-switch v-model="form.enable" />
+      </a-form-model-item>
+      <template v-if="category === 1">
+        <p><strong>触发条件</strong></p>
+        <a-form-model-item label="事件" prop="action">
+          <a-radio-group v-model="form.action">
+            <a-radio value="0">
+              新增实例
+            </a-radio>
+            <a-radio value="1">
+              删除实例
+            </a-radio>
+            <a-radio value="2">
+              实例变更
+            </a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item v-if="form.action === '2'" label="属性" prop="attr_ids">
+          <a-select v-model="form.attr_ids" show-search mode="multiple" placeholder="请选择属性（多选）">
+            <a-select-option v-for="attr in attrList" :key="attr.id" :value="attr.id">{{
+              attr.alias || attr.name
+            }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="筛选" class="trigger-form-filter">
+          <FilterComp
+            ref="filterComp"
+            :isDropdown="false"
+            :canSearchPreferenceAttrList="attrList"
+            @setExpFromFilter="setExpFromFilter"
+            :expression="filterExp ? `q=${filterExp}` : ''"
+          />
+        </a-form-model-item>
+      </template>
+    </a-form-model>
+    <template v-if="category === 2">
+      <p><strong>触发条件</strong></p>
+      <a-form-model
+        ref="dateForm"
+        :model="dateForm"
+        :rules="dateFormRules"
+        :label-col="{ span: 3 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <a-form-model-item label="属性" prop="attr_id">
+          <a-select v-model="dateForm.attr_id" placeholder="请选择属性（单选）">
+            <a-select-option v-for="attr in canAddTriggerAttr" :key="attr.id" :value="attr.id">{{
+              attr.alias || attr.name
+            }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="筛选" class="trigger-form-filter">
+          <FilterComp
+            ref="filterComp"
+            :isDropdown="false"
+            :canSearchPreferenceAttrList="attrList"
+            @setExpFromFilter="setExpFromFilter"
+            :expression="filterExp ? `q=${filterExp}` : ''"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="提前" prop="before_days">
+          <a-input-number v-model="dateForm.before_days" :min="0" />
+          天
+        </a-form-model-item>
+        <a-form-model-item label="发送时间" prop="notify_at">
+          <a-time-picker v-model="dateForm.notify_at" format="HH:mm" valueFormat="HH:mm" />
+        </a-form-model-item>
+      </a-form-model>
+    </template>
+    <p><strong>触发动作</strong></p>
+    <a-radio-group
+      v-model="triggerAction"
+      :style="{ width: '100%', display: 'flex', justifyContent: 'space-around', marginBottom: '10px' }"
+    >
+      <a-radio value="1">
+        通知
+      </a-radio>
+      <a-radio value="2">
+        Webhook
+      </a-radio>
+      <!-- <a-radio value="3">
+        DAG
+      </a-radio> -->
+    </a-radio-group>
+    <a-form-model
+      ref="notifiesForm"
+      :model="notifies"
+      :rules="notifiesRules"
+      :label-col="{ span: 3 }"
+      :wrapper-col="{ span: 18 }"
+      v-if="triggerAction === '1'"
+    >
+      <a-form-model-item label=" " :colon="false">
+        <span class="trigger-tips">{{ tips }}</span>
+      </a-form-model-item>
+      <a-form-model-item label="收件人" prop="employee_ids" class="trigger-form-employee">
+        <EmployeeTreeSelect multiple v-model="notifies.employee_ids" />
+        <div class="trigger-form-custom-email">
+          <a-textarea
+            v-if="showCustomEmail"
+            v-model="notifies.custom_email"
+            placeholder="请输入邮箱，多个邮箱用;分隔"
+            :rows="1"
+          />
+          <a-button
+            @click="
+              () => {
+                showCustomEmail = !showCustomEmail
+              }
+            "
+            type="primary"
+            size="small"
+            class="ops-button-primary"
+          >{{ `${showCustomEmail ? '删除' : '添加'}自定义收件人` }}</a-button
+          >
+        </div>
+      </a-form-model-item>
+      <a-form-model-item label="通知标题" prop="subject">
+        <a-input v-model="notifies.subject" placeholder="请输入通知标题" />
+      </a-form-model-item>
+      <a-form-model-item label="内容" prop="body" :wrapper-col="{ span: 21 }">
+        <NoticeContent :needOld="category === 1 && form.action === '2'" :attrList="attrList" ref="noticeContent" />
+      </a-form-model-item>
+      <a-form-model-item label="通知方式" prop="method">
+        <a-checkbox-group v-model="notifies.method">
+          <a-checkbox value="wechatApp">
+            微信
+          </a-checkbox>
+          <a-checkbox value="email">
+            邮件
+          </a-checkbox>
+        </a-checkbox-group>
+      </a-form-model-item>
+    </a-form-model>
+    <div class="auto-complete-wrapper" v-if="triggerAction === '3'">
+      <a-input
+        id="auto-complete-wrapper-input"
+        ref="input"
+        v-model="searchValue"
+        @focus="focusOnInput"
+        @blur="handleBlurInput"
+        allowClear
+      >
+      </a-input>
+      <div id="auto-complete-wrapper-popover" class="auto-complete-wrapper-popover" v-if="isShow">
+        <div
+          class="auto-complete-wrapper-popover-item"
+          @click="handleClickSelect(item)"
+          v-for="item in filterList"
+          :key="item.id"
+          :title="item.label"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <Webhook ref="webhook" style="margin-top:10px" v-if="triggerAction === '2'" />
+  </CustomDrawer>
+</template>
+
+<script>
+import _ from 'lodash'
+import { getWX } from '../../api/perm'
+import { addTrigger, updateTrigger, deleteTrigger, getAllDagsName } from '../../api/CIType'
+import FilterComp from '@/components/CMDBFilterComp'
+import EmployeeTreeSelect from '@/views/setting/components/employeeTreeSelect.vue'
+import Webhook from '../../components/webhook'
+import NoticeContent from '../../components/noticeContent'
+import { getNoticeByEmployeeIds } from '@/api/employee'
+
+export default {
+  name: 'TriggerForm',
+  components: { FilterComp, Webhook, EmployeeTreeSelect, NoticeContent },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    const defaultForm = {
+      name: '',
+      description: '',
+      enable: true,
+      action: '0',
+      attr_ids: [],
+    }
+    const defaultDateForm = {
+      attr_id: undefined,
+      before_days: 0,
+      notify_at: '08:00',
+    }
+    const defaultNotify = {
+      employee_ids: undefined,
+      custom_email: '',
+      subject: '',
+      body: '',
+      method: ['wechatApp'],
+    }
+    return {
+      defaultForm,
+      defaultDateForm,
+      defaultNotify,
+      tips: '标题、内容可以引用该模型的属性值，引用方法为: {{ attr_name }}',
+      visible: false,
+      category: 1,
+      form: _.cloneDeep(defaultForm),
+      rules: {
+        name: [{ required: true, message: '请填写名称' }],
+      },
+      dateForm: _.cloneDeep(defaultDateForm),
+      dateFormRules: {
+        attr_id: [{ required: true, message: '请选择属性' }],
+      },
+      notifies: _.cloneDeep(defaultNotify),
+      notifiesRules: {},
+      WxUsers: [],
+      filterValue: '',
+      triggerId: null,
+      title: '新增触发器',
+      attrList: [],
+      filterExp: '',
+      triggerAction: '1',
+      searchValue: '',
+      dags: [],
+      isShow: false,
+      dag_id: null,
+      showCustomEmail: false,
+    }
+  },
+  computed: {
+    filterWxUsers() {
+      if (!this.filterValue) {
+        return this.WxUsers
+      }
+      return this.WxUsers.filter(
+        (user) =>
+          user.nickname.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0 ||
+          user.username.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0
+      )
+    },
+    canAddTriggerAttr() {
+      return this.attrList.filter((attr) => attr.value_type === '3' || attr.value_type === '4')
+    },
+    filterList() {
+      if (this.searchValue) {
+        return this.dags.filter((item) => item.label.toLowerCase().includes(this.searchValue.toLowerCase()))
+      }
+      return this.dags
+    },
+  },
+  inject: {
+    refresh: {
+      from: 'refresh',
+      default: null,
+    },
+  },
+  mounted() {},
+  methods: {
+    async getDags() {
+      await getAllDagsName().then((res) => {
+        this.dags = res.map((dag) => ({ id: dag[1], label: dag[0] }))
+      })
+    },
+    createFromTriggerTable(attrList) {
+      this.visible = true
+      this.getWxList()
+      this.getDags()
+      this.attrList = attrList
+      this.triggerId = null
+      this.title = '新增触发器'
+      this.form = _.cloneDeep(this.defaultForm)
+      this.dateForm = _.cloneDeep(this.defaultDateForm)
+      this.notifies = _.cloneDeep(this.defaultNotify)
+      this.category = 1
+      this.triggerAction = '1'
+      this.filterExp = ''
+      this.$nextTick(() => {
+        this.$refs.filterComp.visibleChange(true, false)
+        setTimeout(() => {
+          this.$refs.noticeContent.setContent('')
+        }, 100)
+      })
+    },
+    async open(property, attrList) {
+      this.visible = true
+      this.getWxList()
+      await this.getDags()
+      this.attrList = attrList
+      if (property.has_trigger) {
+        this.triggerId = property.trigger.id
+        this.title = `编辑触发器 ${property.alias || property.name}`
+        const { name, description, enable, action = '0', attr_ids, filter = '' } = property?.trigger?.option ?? {}
+        this.filterExp = filter
+        this.$nextTick(() => {
+          this.$refs.filterComp.visibleChange(true, false)
+        })
+        this.form = { name, description, enable, action, attr_ids }
+        const { attr_id } = property?.trigger ?? {}
+        if (attr_id) {
+          this.category = 2
+          const { before_days, notify_at } = property?.trigger?.option?.notifies ?? {}
+          this.dateForm = {
+            attr_id,
+            before_days,
+            notify_at,
+          }
+        } else {
+          this.category = 1
+        }
+        const { notifies = undefined, webhooks = undefined, dag_id = undefined } = property?.trigger?.option ?? {}
+        if (webhooks) {
+          this.triggerAction = '2'
+          this.$nextTick(() => {
+            this.$refs.webhook.setParams(webhooks)
+          })
+        } else if (dag_id) {
+          this.triggerAction = '3'
+          this.dag_id = dag_id
+          const _find = this.dags.find((item) => item.id === dag_id)
+          this.searchValue = _find?.label
+        } else if (notifies) {
+          this.triggerAction = '1'
+          const { tos = [], subject = '', body_html = '', method = ['wechatApp'] } =
+            property?.trigger?.option?.notifies ?? {}
+          const employee_ids = property?.trigger?.option?.employee_ids ?? undefined
+          const custom_email =
+            tos
+              .filter((t) => !t.employee_id)
+              .map((t) => t.email)
+              .join(';') ?? ''
+
+          if (custom_email) {
+            this.showCustomEmail = true
+          }
+          if (body_html) {
+            setTimeout(() => {
+              this.$refs.noticeContent.setContent(body_html)
+            }, 100)
+          }
+          this.notifies = { employee_ids, custom_email, subject, method }
+        }
+      } else {
+        this.title = `新增触发器 ${property.alias || property.name}`
+        this.triggerId = null
+        this.form = _.cloneDeep(this.defaultForm)
+      }
+    },
+    handleCancel() {
+      this.$refs.triggerForm.clearValidate()
+      this.$refs.triggerForm.resetFields()
+      this.filterValue = ''
+      this.form = _.cloneDeep(this.defaultForm)
+      this.dateForm = _.cloneDeep(this.defaultDateForm)
+      this.notifies = _.cloneDeep(this.defaultNotify)
+      this.category = 1
+      this.triggerAction = '1'
+      this.filterExp = ''
+      this.visible = false
+    },
+    getWxList() {
+      getWX().then((res) => {
+        this.WxUsers = res.filter((item) => item.wx_id)
+      })
+    },
+    filterChange(value) {
+      this.filterValue = value
+    },
+    handleOk() {
+      this.$refs.triggerForm.validate(async (valid) => {
+        if (valid) {
+          this.$refs.filterComp.handleSubmit()
+          const { name, description, enable, action, attr_ids } = this.form
+          const params = {
+            attr_id: '',
+            option: {
+              filter: this.filterExp,
+              name,
+              description,
+              enable,
+            },
+          }
+          switch (this.triggerAction) {
+            case '1':
+              const { employee_ids, custom_email, subject, method } = this.notifies
+              const { body, body_html } = this.$refs.noticeContent.getContent()
+              let tos = []
+              if (employee_ids && employee_ids.length) {
+                await getNoticeByEmployeeIds({ employee_ids: employee_ids.map((item) => item.split('-')[1]) }).then(
+                  (res) => {
+                    tos = tos.concat(res)
+                  }
+                )
+                params.option.employee_ids = employee_ids
+              }
+              if (this.showCustomEmail) {
+                custom_email.split(';').forEach((email) => {
+                  tos.push({ email })
+                })
+              }
+              if (this.category === 2) {
+                const { before_days, notify_at } = this.dateForm
+                params.option.notifies = { tos, subject, body, body_html, method, before_days, notify_at }
+              } else {
+                params.option.notifies = { tos, subject, body, body_html, method }
+              }
+              break
+            case '2':
+              const webhooks = this.$refs.webhook.getParams()
+              params.option.webhooks = webhooks
+              break
+            case '3':
+              params.option.dag_id = this.dag_id
+              break
+          }
+          if (this.category === 1) {
+            params.option.action = action
+            if (action === '2') {
+              params.option.attr_ids = attr_ids
+            }
+          }
+          if (this.category === 2) {
+            this.$refs.dateForm.validate((valid) => {
+              if (valid) {
+                const { attr_id, before_days, notify_at } = this.dateForm
+                params.attr_id = attr_id
+                params.option.notifies = { ..._.cloneDeep(params.option.notifies), before_days, notify_at }
+              } else {
+                throw Error()
+              }
+            })
+          }
+          if (this.triggerId) {
+            await updateTrigger(this.CITypeId, this.triggerId, params)
+          } else {
+            await addTrigger(this.CITypeId, params)
+          }
+          this.handleCancel()
+          if (this.refresh) {
+            this.refresh()
+          }
+        }
+      })
+    },
+    handleDetele() {
+      const that = this
+      this.$confirm({
+        title: '警告',
+        content: '确认删除该触发器吗?',
+        onOk() {
+          deleteTrigger(that.CITypeId, that.triggerId).then(() => {
+            that.$message.success('删除成功！')
+            that.handleCancel()
+            if (that.refresh) {
+              that.refresh()
+            }
+          })
+        },
+      })
+    },
+    setExpFromFilter(filterExp) {
+      if (filterExp) {
+        this.filterExp = `${filterExp}`
+      } else {
+        this.filterExp = ''
+      }
+    },
+    handleBlurInput() {
+      setTimeout(() => {
+        this.isShow = false
+      }, 100)
+    },
+    focusOnInput() {
+      this.isShow = true
+    },
+    handleClickSelect(item) {
+      this.searchValue = item.label
+      this.dag_id = item.id
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.trigger-form {
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
+  .trigger-form-employee,
+  .trigger-form-filter {
+    .ant-form-item-control {
+      line-height: 24px;
+    }
+  }
+  .trigger-form-filter {
+    .table-filter-add {
+      line-height: 40px;
+    }
+  }
+}
+</style>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+
+.auto-complete-wrapper {
+  position: relative;
+  margin-left: 25px;
+  width: 250px;
+  margin-top: 20px;
+  .auto-complete-wrapper-popover {
+    position: fixed;
+    width: 250px;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #fff;
+    z-index: 10;
+    box-shadow: 0 2px 8px #00000026;
+    .auto-complete-wrapper-popover-item {
+      .ops_popover_item();
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.trigger-form-custom-email {
+  margin-top: 10px;
+  text-align: right;
+}
+
+.trigger-tips {
+  border: 1px solid #d4380d;
+  background-color: #fff2e8;
+  padding: 2px 10px;
+  border-radius: 4px;
+  color: #d4380d;
+  line-height: 1.5;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
index 0bbc0a1..c67ed1c 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
@@ -1,144 +1,172 @@
-<template>
-  <div class="ci-types-triggers">
-    <div style="margin-bottom: 10px">
-      <a-button
-        type="primary"
-        @click="handleAddTrigger"
-        size="small"
-        class="ops-button-primary"
-        icon="plus"
-      >新增触发器</a-button
-      >
-      <span class="trigger-tips">{{ tips }}</span>
-    </div>
-    <vxe-table
-      stripe
-      :data="tableData"
-      size="small"
-      show-overflow
-      highlight-hover-row
-      keep-source
-      :max-height="windowHeight - 180"
-      class="ops-stripe-table"
-    >
-      <vxe-column field="attr_name" title="属性名"></vxe-column>
-      <vxe-column field="notify.subject" title="主题"></vxe-column>
-      <vxe-column field="notify.body" title="内容"></vxe-column>
-      <vxe-column field="notify.wx_to" title="微信通知">
-        <template #default="{ row }">
-          <span v-for="(person, index) in row.notify.wx_to" :key="person + index">[{{ person }}]</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="notify.mail_to" title="邮件通知">
-        <template #default="{ row }">
-          <span v-for="(email, index) in row.notify.mail_to" :key="email + index">[{{ email }}]</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="notify.before_days" title="提前">
-        <template #default="{ row }">
-          <span v-if="row.notify.before_days">{{ row.notify.before_days }}天</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="notify.notify_at" title="发送时间"></vxe-column>
-      <vxe-column field="operation" title="操作" width="200px" align="center">
-        <template #default="{ row }">
-          <a-space>
-            <a @click="handleEdit(row)"><a-icon type="edit"/></a>
-            <a style="color:red;" @click="handleDetele(row.id)"><a-icon type="delete"/></a>
-          </a-space>
-        </template>
-      </vxe-column>
-    </vxe-table>
-    <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
-  </div>
-</template>
-
-<script>
-import { getTriggerList, deleteTrigger } from '../../api/CIType'
-import { getCITypeAttributesById } from '../../api/CITypeAttr'
-import TriggerForm from './triggerForm.vue'
-export default {
-  name: 'TriggerTable',
-  components: { TriggerForm },
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      tips: '主题、内容、微信通知和邮件通知都可以引用该模型的属性值，引用方法为: {{ attr_name }}',
-      tableData: [],
-      attrList: [],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    canAddTriggerAttr() {
-      return this.attrList.filter((attr) => attr.value_type === '3' || attr.value_type === '4')
-    },
-  },
-  provide() {
-    return { refresh: this.getTableData }
-  },
-  mounted() {},
-  methods: {
-    async getTableData() {
-      const [triggerList, attrList] = await Promise.all([
-        getTriggerList(this.CITypeId),
-        getCITypeAttributesById(this.CITypeId),
-      ])
-      triggerList.forEach((trigger) => {
-        const _find = attrList.attributes.find((attr) => attr.id === trigger.attr_id)
-        if (_find) {
-          trigger.attr_name = _find.alias || _find.name
-        }
-      })
-      this.tableData = triggerList
-      this.attrList = attrList.attributes
-    },
-    handleAddTrigger() {
-      this.$refs.triggerForm.createFromTriggerTable(this.canAddTriggerAttr)
-    },
-    handleDetele(id) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除该触发器吗?',
-        onOk() {
-          deleteTrigger(that.CITypeId, id).then(() => {
-            that.$message.success('删除成功！')
-            that.getTableData()
-          })
-        },
-      })
-    },
-    handleEdit(row) {
-      const _find = this.attrList.find((attr) => attr.id === row.attr_id)
-      this.$refs.triggerForm.open({
-        id: row.attr_id,
-        alias: _find ? _find.alias || _find.name : '',
-        trigger: { id: row.id, notify: row.notify },
-        has_trigger: true,
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.ci-types-triggers {
-  padding: 16px 24px 24px;
-  .trigger-tips {
-    border: 1px solid #d4380d;
-    background-color: #fff2e8;
-    padding: 2px 10px;
-    border-radius: 4px;
-    color: #d4380d;
-    float: right;
-  }
-}
-</style>
+<template>
+  <div class="ci-types-triggers">
+    <div style="margin-bottom: 10px">
+      <a-button
+        type="primary"
+        @click="handleAddTrigger"
+        size="small"
+        class="ops-button-primary"
+        icon="plus"
+      >新增触发器</a-button
+      >
+    </div>
+    <vxe-table
+      stripe
+      :data="tableData"
+      size="small"
+      show-overflow
+      highlight-hover-row
+      keep-source
+      :max-height="windowHeight - 180"
+      class="ops-stripe-table"
+    >
+      <vxe-column field="option.name" title="名称"></vxe-column>
+      <vxe-column field="option.description" title="备注"></vxe-column>
+      <vxe-column field="type" title="类型">
+        <template #default="{ row }">
+          <span v-if="row.attr_id">日期属性</span>
+          <span v-else>数据变更</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="option.enable" title="开启">
+        <template #default="{ row }">
+          <a-switch :checked="row.option.enable" @click="changeEnable(row)"></a-switch>
+        </template>
+      </vxe-column>
+
+      <!-- <vxe-column field="attr_name" title="属性名"></vxe-column>
+      <vxe-column field="option.subject" title="主题"></vxe-column>
+      <vxe-column field="option.body" title="内容"></vxe-column>
+      <vxe-column field="option.wx_to" title="微信通知">
+        <template #default="{ row }">
+          <span v-for="(person, index) in row.option.wx_to" :key="person + index">[{{ person }}]</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="option.mail_to" title="邮件通知">
+        <template #default="{ row }">
+          <span v-for="(email, index) in row.option.mail_to" :key="email + index">[{{ email }}]</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="option.before_days" title="提前">
+        <template #default="{ row }">
+          <span v-if="row.option.before_days">{{ row.option.before_days }}天</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="option.notify_at" title="发送时间"></vxe-column> -->
+      <vxe-column field="operation" title="操作" width="80px" align="center">
+        <template #default="{ row }">
+          <a-space>
+            <a @click="handleEdit(row)"><a-icon type="edit"/></a>
+            <a style="color:red;" @click="handleDetele(row.id)"><a-icon type="delete"/></a>
+          </a-space>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { getTriggerList, deleteTrigger, updateTrigger } from '../../api/CIType'
+import { getCITypeAttributesById } from '../../api/CITypeAttr'
+import TriggerForm from './triggerForm.vue'
+import { getAllDepAndEmployee } from '@/api/company'
+
+export default {
+  name: 'TriggerTable',
+  components: { TriggerForm },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      attrList: [],
+      allTreeDepAndEmp: [],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return {
+      refresh: this.getTableData,
+      provide_allTreeDepAndEmp: () => {
+        return this.allTreeDepAndEmp
+      },
+    }
+  },
+  mounted() {
+    this.getAllDepAndEmployee()
+  },
+  methods: {
+    getAllDepAndEmployee() {
+      getAllDepAndEmployee({ block: 0 }).then((res) => {
+        this.allTreeDepAndEmp = res
+      })
+    },
+    async getTableData() {
+      const [triggerList, attrList] = await Promise.all([
+        getTriggerList(this.CITypeId),
+        getCITypeAttributesById(this.CITypeId),
+      ])
+      triggerList.forEach((trigger) => {
+        const _find = attrList.attributes.find((attr) => attr.id === trigger.attr_id)
+        if (_find) {
+          trigger.attr_name = _find.alias || _find.name
+        }
+      })
+      this.tableData = triggerList
+      this.attrList = attrList.attributes
+    },
+    handleAddTrigger() {
+      this.$refs.triggerForm.createFromTriggerTable(this.attrList)
+    },
+    handleDetele(id) {
+      const that = this
+      this.$confirm({
+        title: '警告',
+        content: '确认删除该触发器吗?',
+        onOk() {
+          deleteTrigger(that.CITypeId, id).then(() => {
+            that.$message.success('删除成功！')
+            that.getTableData()
+          })
+        },
+      })
+    },
+    handleEdit(row) {
+      this.$refs.triggerForm.open(
+        {
+          id: row.attr_id,
+          alias: row?.option?.name ?? '',
+          trigger: { id: row.id, attr_id: row.attr_id, option: row.option },
+          has_trigger: true,
+        },
+        this.attrList
+      )
+    },
+    changeEnable(row) {
+      const _row = _.cloneDeep(row)
+      delete _row.id
+      const enable = row?.option?.enable ?? true
+      _row.option.enable = !enable
+      updateTrigger(this.CITypeId, row.id, _row).then(() => {
+        this.getTableData()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ci-types-triggers {
+  padding: 16px 24px 24px;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
index 6b6ed63..d81a97c 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
@@ -1,38 +1,43 @@
-<template>
-  <div>
-    <a-card :bordered="false">
-      <a-tabs default-active-key="1">
-        <a-tab-pane key="1" tab="CI变更">
-          <ci-table></ci-table>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="关系变更">
-          <relation-table></relation-table>
-        </a-tab-pane>
-        <a-tab-pane key="3" tab="模型变更">
-          <type-table></type-table>
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-  </div>
-</template>
-
-<script>
-import CiTable from './modules/ciTable.vue'
-import RelationTable from './modules/relation.vue'
-import TypeTable from './modules/typeTable.vue'
-export default {
-  name: 'Index',
-  data() {
-    return {
-      userList: []
-    }
-  },
-  components: {
-    CiTable,
-    RelationTable,
-    TypeTable
-  }
-}
-</script>
-
-<style></style>
+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="CI变更">
+          <ci-table></ci-table>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="关系变更">
+          <relation-table></relation-table>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="模型变更">
+          <type-table></type-table>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="触发历史">
+          <TriggerTable></TriggerTable>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import CiTable from './modules/ciTable.vue'
+import RelationTable from './modules/relation.vue'
+import TypeTable from './modules/typeTable.vue'
+import TriggerTable from './modules/triggerTable.vue'
+export default {
+  name: 'OperationHistory',
+  components: {
+    CiTable,
+    RelationTable,
+    TypeTable,
+    TriggerTable,
+  },
+  data() {
+    return {
+      userList: [],
+    }
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
index 5745baf..76e2fed 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
@@ -1,420 +1,421 @@
-<template>
-  <div>
-    <search-form
-      ref="child"
-      :attrList="ciTableAttrList"
-      @expandChange="handleExpandChange"
-      @search="handleSearch"
-      @searchFormReset="searchFormReset"
-      @searchFormChange="searchFormChange"
-    ></search-form>
-    <vxe-table
-      ref="xTable"
-      row-id="_XID"
-      :loading="loading"
-      border
-      size="small"
-      show-overflow="tooltip"
-      show-header-overflow="tooltip"
-      resizable
-      :data="tableData"
-      :max-height="`${windowHeight - windowHeightMinus}px`"
-      :span-method="mergeRowMethod"
-      :scroll-y="{enabled: false}"
-    >
-      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
-      <vxe-column field="user" width="100px" title="用户">
-        <template #header="{ column }">
-          <span>{{ column.title }}</span>
-          <a-popover trigger="click" placement="bottom">
-            <a-icon class="filter" type="filter" theme="filled"/>
-            <a slot="content">
-              <a-input placeholder="输入筛选用户名" size="small" v-model="queryParams.username" style="width: 200px" allowClear/>
-              <a-button type="link" class="filterButton" @click="filterUser">筛选</a-button>
-              <a-button type="link" class="filterResetButton" @click="filterUserReset">重置</a-button>
-            </a>
-          </a-popover>
-        </template>
-      </vxe-column>
-      <vxe-column field="type_id" width="100px" title="模型"></vxe-column>
-      <vxe-column field="operate_type" width="89px" title="操作">
-        <template #header="{ column }">
-          <span>{{ column.title }}</span>
-          <a-popover trigger="click" placement="bottom">
-            <a-icon class="filter" type="filter" theme="filled"/>
-            <a slot="content">
-              <a-select
-                v-model="queryParams.operate_type"
-                placeholder="选择筛选操作"
-                show-search
-                style="width: 200px"
-                :filter-option="filterOption"
-                allowClear
-              >
-                <a-select-option
-                  :value="Object.values(choice)[0]"
-                  :key="index"
-                  v-for="(choice, index) in ciTableAttrList[4].choice_value"
-                >
-                  {{ Object.keys(choice)[0] }}
-                </a-select-option
-                >
-              </a-select>
-              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
-              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
-            </a>
-          </a-popover>
-        </template>
-        <template #default="{ row }">
-          <a-tag color="green" v-if="row.operate_type === '新增' ">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="orange" v-else-if="row.operate_type === '修改' ">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="red" v-else>
-            {{ row.operate_type }}
-          </a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="attr_alias" title="属性"></vxe-column>
-      <vxe-column field="old" title="旧"></vxe-column>
-      <vxe-column field="new" title="新"></vxe-column>
-    </vxe-table>
-    <pager
-      :current-page.sync="queryParams.page"
-      :page-size.sync="queryParams.page_size"
-      :page-sizes="[50,100,200]"
-      :total="total"
-      :isLoading="loading"
-      @change="onChange"
-      @showSizeChange="onShowSizeChange"
-    ></pager>
-  </div>
-</template>
-<script>
-import Pager from './pager.vue'
-import SearchForm from './searchForm.vue'
-import { getCIHistoryTable, getUsers } from '@/modules/cmdb/api/history'
-import { getCITypes } from '@/modules/cmdb/api/CIType'
-import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-export default {
-  name: 'CiTable',
-  components: { SearchForm, Pager },
-  data() {
-    return {
-      typeId: undefined,
-      operateTypeMap: new Map([
-        ['0', '新增'],
-        ['1', '删除'],
-        ['2', '修改'],
-      ]),
-      loading: true,
-      typeList: null,
-      userList: [],
-      tableData: [],
-      total: 0,
-      isExpand: false,
-      queryParams: {
-        page: 1,
-        page_size: 50,
-      },
-      ciTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3'
-        },
-        {
-          alias: '用户',
-          is_choice: true,
-          name: 'username',
-          value_type: '2',
-          choice_value: []
-        },
-        {
-          alias: '模型',
-          is_choice: true,
-          name: 'type_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '属性',
-          is_choice: true,
-          name: 'attr_id',
-          value_type: '2',
-          choice_value: []
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [
-            { '新增': 0 },
-            { '删除': 1 },
-            { '修改': 2 },
-          ]
-        },
-        {
-          alias: 'CI_ID',
-          is_choice: false,
-          name: 'ci_id',
-          value_type: '2'
-        }
-      ],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    windowHeightMinus() {
-      return this.isExpand ? 396 : 331
-    }
-  },
-  async created() {
-    this.$watch(
-      function () {
-        return this.ciTableAttrList[3].choice_value
-      },
-      function () {
-        delete this.$refs.child.queryParams.attr_id
-      }
-    )
-    await Promise.all([
-      this.getUserList(),
-      this.getTypes()
-    ])
-    await this.getTable(this.queryParams)
-  },
-  updated() {
-    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
-  },
-  methods: {
-    // 获取表格数据
-    async getTable(queryParams) {
-      try {
-        this.loading = true
-        const res = await getCIHistoryTable(queryParams)
-        const tempArr = []
-        res.records.forEach(item => {
-          item[0].type_id = this.handleTypeId(item[0].type_id)
-          item[1].forEach((subItem) => {
-            subItem.operate_type = this.handleOperateType(subItem.operate_type)
-            const tempObj = Object.assign(subItem, item[0])
-            tempArr.push(tempObj)
-          })
-        })
-        this.tableData = tempArr
-        this.total = res.total
-      } finally {
-        this.loading = false
-      }
-    },
-    // 获取用户列表
-    async getUserList() {
-      const res = await getUsers()
-      this.userList = res.map(x => {
-        const username = x.nickname
-        const obj = {
-          [username]: username
-        }
-        return obj
-      })
-      this.ciTableAttrList[1].choice_value = this.userList
-    },
-    // 获取模型
-    async getTypes() {
-      const res = await getCITypes()
-      const typesArr = []
-      const typesMap = new Map()
-      res.ci_types.forEach(item => {
-        const tempObj = {}
-        tempObj[item.alias] = item.id
-        if (item.alias) {
-          typesArr.push(tempObj)
-          typesMap.set(item.id, item.alias)
-        }
-      })
-      this.typeList = typesMap
-      this.ciTableAttrList[2].choice_value = typesArr
-    },
-    // 获取模型对应属性
-    async getAttrs(type_id) {
-      if (!type_id) {
-        this.ciTableAttrList[3].choice_value = []
-        return
-      }
-      const res = await getCITypeAttributesById(type_id)
-      const attrsArr = []
-      res.attributes.forEach(item => {
-        const tempObj = {}
-        tempObj[item.alias] = item.id
-        if (item.alias) {
-          attrsArr.push(tempObj)
-        }
-      })
-      this.ciTableAttrList[3].choice_value = attrsArr
-    },
-    onShowSizeChange(size) {
-      this.queryParams.page_size = size
-      this.queryParams.page = 1
-      this.getTable(this.queryParams)
-    },
-    onChange(pageNum) {
-      this.queryParams.page = pageNum
-      this.getTable(this.queryParams)
-    },
-    handleExpandChange(expand) {
-      this.isExpand = expand
-    },
-    // 处理查询
-    handleSearch(queryParams) {
-      this.queryParams = queryParams
-      this.getTable(this.queryParams)
-    },
-    // 重置表单
-    searchFormReset() {
-      this.queryParams = {
-        page: 1,
-        page_size: 50,
-        start: '',
-        end: '',
-        username: '',
-        ci_id: undefined,
-        attr_id: undefined,
-        operate_type: undefined
-      }
-      // 将属性options重置
-      this.ciTableAttrList[3].choice_value = []
-      this.getTable(this.queryParams)
-    },
-    // 转换operate_type
-    handleOperateType(operate_type) {
-      return this.operateTypeMap.get(operate_type)
-    },
-    // 转换type_id
-    handleTypeId(type_id) {
-      return this.typeList.get(type_id) ? this.typeList.get(type_id) : type_id
-    },
-    // 表单改变，重新获取属性列表
-    searchFormChange(queryParams) {
-      if (this.typeId !== queryParams.type_id) {
-        this.typeId = queryParams.type_id
-        this.getAttrs(queryParams.type_id)
-      }
-      if (queryParams.type_id === undefined) {
-        this.typeId = undefined
-        this.$refs.child.queryParams.attr_id = undefined
-      }
-    },
-    // 合并表格
-    mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
-      const fields = ['created_at', 'user', 'type_id']
-      // 单元格值 = 行[列.属性] 确定一格
-      const cellValue = row[column.property]
-      const created_at = row['created_at']
-      // 如果单元格值不为空且作用域包含当前列
-      if (column.property === 'created_at') {
-        if (cellValue && fields.includes(column.property)) {
-          // 前一行
-          const prevRow = visibleData[_rowIndex - 1]
-          // 下一行
-          let nextRow = visibleData[_rowIndex + 1]
-          // 如果前一行不为空且前一行单元格的值与cellValue相同
-          if (prevRow && prevRow[column.property] === cellValue) {
-            return { rowspan: 0, colspan: 0 }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue) {
-              nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-              return { rowspan: countRowspan, colspan: 1 }
-            }
-          }
-        }
-      } else if (column.property === 'user') {
-        if (cellValue && fields.includes(column.property)) {
-          // 前一行
-          const prevRow = visibleData[_rowIndex - 1]
-          // 下一行
-          let nextRow = visibleData[_rowIndex + 1]
-          // 如果前一行不为空且前一行单元格的值与cellValue相同
-          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
-            return { rowspan: 0, colspan: 0 }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
-              nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-              return { rowspan: countRowspan, colspan: 1 }
-            }
-          }
-        }
-      } else if (column.property === 'type_id') {
-        if (cellValue && fields.includes(column.property)) {
-          // 前一行
-          const prevRow = visibleData[_rowIndex - 1]
-          // 下一行
-          let nextRow = visibleData[_rowIndex + 1]
-          // 如果前一行不为空且前一行单元格的值与cellValue相同
-          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
-            return { rowspan: 0, colspan: 0 }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
-              nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-              return { rowspan: countRowspan, colspan: 1 }
-            }
-          }
-        }
-      }
-    },
-    filterUser() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.getTable(this.queryParams)
-    },
-    filterUserReset() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.queryParams.username = ''
-      this.getTable(this.queryParams)
-    },
-    filterOperate() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.getTable(this.queryParams)
-    },
-    filterOperateReset() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.queryParams.operate_type = undefined
-      this.getTable(this.queryParams)
-    },
-    filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.indexOf(input) >= 0
-      )
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.filter{
-  margin-left: 10px;
-  color: #c0c4cc;
-  cursor: pointer;
-  &:hover{
-    color: #606266;
-  }
-}
-</style>
+<template>
+  <div>
+    <search-form
+      ref="child"
+      :attrList="ciTableAttrList"
+      @expandChange="handleExpandChange"
+      @search="handleSearch"
+      @searchFormReset="searchFormReset"
+      @searchFormChange="searchFormChange"
+    ></search-form>
+    <vxe-table
+      ref="xTable"
+      row-id="_XID"
+      :loading="loading"
+      border
+      size="small"
+      show-overflow="tooltip"
+      show-header-overflow="tooltip"
+      resizable
+      :data="tableData"
+      :max-height="`${windowHeight - windowHeightMinus}px`"
+      :span-method="mergeRowMethod"
+      :scroll-y="{enabled: false}"
+      class="ops-unstripe-table"
+    >
+      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
+      <vxe-column field="user" width="100px" title="用户">
+        <template #header="{ column }">
+          <span>{{ column.title }}</span>
+          <a-popover trigger="click" placement="bottom">
+            <a-icon class="filter" type="filter" theme="filled"/>
+            <a slot="content">
+              <a-input placeholder="输入筛选用户名" size="small" v-model="queryParams.username" style="width: 200px" allowClear/>
+              <a-button type="link" class="filterButton" @click="filterUser">筛选</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterUserReset">重置</a-button>
+            </a>
+          </a-popover>
+        </template>
+      </vxe-column>
+      <vxe-column field="type_id" width="100px" title="模型"></vxe-column>
+      <vxe-column field="operate_type" width="89px" title="操作">
+        <template #header="{ column }">
+          <span>{{ column.title }}</span>
+          <a-popover trigger="click" placement="bottom">
+            <a-icon class="filter" type="filter" theme="filled"/>
+            <a slot="content">
+              <a-select
+                v-model="queryParams.operate_type"
+                placeholder="选择筛选操作"
+                show-search
+                style="width: 200px"
+                :filter-option="filterOption"
+                allowClear
+              >
+                <a-select-option
+                  :value="Object.values(choice)[0]"
+                  :key="index"
+                  v-for="(choice, index) in ciTableAttrList[4].choice_value"
+                >
+                  {{ Object.keys(choice)[0] }}
+                </a-select-option
+                >
+              </a-select>
+              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type === '新增' ">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type === '修改' ">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="red" v-else>
+            {{ row.operate_type }}
+          </a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="attr_alias" title="属性"></vxe-column>
+      <vxe-column field="old" title="旧"></vxe-column>
+      <vxe-column field="new" title="新"></vxe-column>
+    </vxe-table>
+    <pager
+      :current-page.sync="queryParams.page"
+      :page-size.sync="queryParams.page_size"
+      :page-sizes="[50,100,200]"
+      :total="total"
+      :isLoading="loading"
+      @change="onChange"
+      @showSizeChange="onShowSizeChange"
+    ></pager>
+  </div>
+</template>
+<script>
+import Pager from './pager.vue'
+import SearchForm from './searchForm.vue'
+import { getCIHistoryTable, getUsers } from '@/modules/cmdb/api/history'
+import { getCITypes } from '@/modules/cmdb/api/CIType'
+import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+export default {
+  name: 'CiTable',
+  components: { SearchForm, Pager },
+  data() {
+    return {
+      typeId: undefined,
+      operateTypeMap: new Map([
+        ['0', '新增'],
+        ['1', '删除'],
+        ['2', '修改'],
+      ]),
+      loading: true,
+      typeList: null,
+      userList: [],
+      tableData: [],
+      total: 0,
+      isExpand: false,
+      queryParams: {
+        page: 1,
+        page_size: 50,
+      },
+      ciTableAttrList: [
+        {
+          alias: '日期',
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3'
+        },
+        {
+          alias: '用户',
+          is_choice: true,
+          name: 'username',
+          value_type: '2',
+          choice_value: []
+        },
+        {
+          alias: '模型',
+          is_choice: true,
+          name: 'type_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: '属性',
+          is_choice: true,
+          name: 'attr_id',
+          value_type: '2',
+          choice_value: []
+        },
+        {
+          alias: '操作',
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [
+            { '新增': 0 },
+            { '删除': 1 },
+            { '修改': 2 },
+          ]
+        },
+        {
+          alias: 'CI_ID',
+          is_choice: false,
+          name: 'ci_id',
+          value_type: '2'
+        }
+      ],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 331
+    }
+  },
+  async created() {
+    this.$watch(
+      function () {
+        return this.ciTableAttrList[3].choice_value
+      },
+      function () {
+        delete this.$refs.child.queryParams.attr_id
+      }
+    )
+    await Promise.all([
+      this.getUserList(),
+      this.getTypes()
+    ])
+    await this.getTable(this.queryParams)
+  },
+  updated() {
+    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
+  },
+  methods: {
+    // 获取表格数据
+    async getTable(queryParams) {
+      try {
+        this.loading = true
+        const res = await getCIHistoryTable(queryParams)
+        const tempArr = []
+        res.records.forEach(item => {
+          item[0].type_id = this.handleTypeId(item[0].type_id)
+          item[1].forEach((subItem) => {
+            subItem.operate_type = this.handleOperateType(subItem.operate_type)
+            const tempObj = Object.assign(subItem, item[0])
+            tempArr.push(tempObj)
+          })
+        })
+        this.tableData = tempArr
+        this.total = res.total
+      } finally {
+        this.loading = false
+      }
+    },
+    // 获取用户列表
+    async getUserList() {
+      const res = await getUsers()
+      this.userList = res.map(x => {
+        const username = x.nickname
+        const obj = {
+          [username]: username
+        }
+        return obj
+      })
+      this.ciTableAttrList[1].choice_value = this.userList
+    },
+    // 获取模型
+    async getTypes() {
+      const res = await getCITypes()
+      const typesArr = []
+      const typesMap = new Map()
+      res.ci_types.forEach(item => {
+        const tempObj = {}
+        tempObj[item.alias] = item.id
+        if (item.alias) {
+          typesArr.push(tempObj)
+          typesMap.set(item.id, item.alias)
+        }
+      })
+      this.typeList = typesMap
+      this.ciTableAttrList[2].choice_value = typesArr
+    },
+    // 获取模型对应属性
+    async getAttrs(type_id) {
+      if (!type_id) {
+        this.ciTableAttrList[3].choice_value = []
+        return
+      }
+      const res = await getCITypeAttributesById(type_id)
+      const attrsArr = []
+      res.attributes.forEach(item => {
+        const tempObj = {}
+        tempObj[item.alias] = item.id
+        if (item.alias) {
+          attrsArr.push(tempObj)
+        }
+      })
+      this.ciTableAttrList[3].choice_value = attrsArr
+    },
+    onShowSizeChange(size) {
+      this.queryParams.page_size = size
+      this.queryParams.page = 1
+      this.getTable(this.queryParams)
+    },
+    onChange(pageNum) {
+      this.queryParams.page = pageNum
+      this.getTable(this.queryParams)
+    },
+    handleExpandChange(expand) {
+      this.isExpand = expand
+    },
+    // 处理查询
+    handleSearch(queryParams) {
+      this.queryParams = queryParams
+      this.getTable(this.queryParams)
+    },
+    // 重置表单
+    searchFormReset() {
+      this.queryParams = {
+        page: 1,
+        page_size: 50,
+        start: '',
+        end: '',
+        username: '',
+        ci_id: undefined,
+        attr_id: undefined,
+        operate_type: undefined
+      }
+      // 将属性options重置
+      this.ciTableAttrList[3].choice_value = []
+      this.getTable(this.queryParams)
+    },
+    // 转换operate_type
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    // 转换type_id
+    handleTypeId(type_id) {
+      return this.typeList.get(type_id) ? this.typeList.get(type_id) : type_id
+    },
+    // 表单改变，重新获取属性列表
+    searchFormChange(queryParams) {
+      if (this.typeId !== queryParams.type_id) {
+        this.typeId = queryParams.type_id
+        this.getAttrs(queryParams.type_id)
+      }
+      if (queryParams.type_id === undefined) {
+        this.typeId = undefined
+        this.$refs.child.queryParams.attr_id = undefined
+      }
+    },
+    // 合并表格
+    mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
+      const fields = ['created_at', 'user', 'type_id']
+      // 单元格值 = 行[列.属性] 确定一格
+      const cellValue = row[column.property]
+      const created_at = row['created_at']
+      // 如果单元格值不为空且作用域包含当前列
+      if (column.property === 'created_at') {
+        if (cellValue && fields.includes(column.property)) {
+          // 前一行
+          const prevRow = visibleData[_rowIndex - 1]
+          // 下一行
+          let nextRow = visibleData[_rowIndex + 1]
+          // 如果前一行不为空且前一行单元格的值与cellValue相同
+          if (prevRow && prevRow[column.property] === cellValue) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      } else if (column.property === 'user') {
+        if (cellValue && fields.includes(column.property)) {
+          // 前一行
+          const prevRow = visibleData[_rowIndex - 1]
+          // 下一行
+          let nextRow = visibleData[_rowIndex + 1]
+          // 如果前一行不为空且前一行单元格的值与cellValue相同
+          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      } else if (column.property === 'type_id') {
+        if (cellValue && fields.includes(column.property)) {
+          // 前一行
+          const prevRow = visibleData[_rowIndex - 1]
+          // 下一行
+          let nextRow = visibleData[_rowIndex + 1]
+          // 如果前一行不为空且前一行单元格的值与cellValue相同
+          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      }
+    },
+    filterUser() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.getTable(this.queryParams)
+    },
+    filterUserReset() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.queryParams.username = ''
+      this.getTable(this.queryParams)
+    },
+    filterOperate() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.getTable(this.queryParams)
+    },
+    filterOperateReset() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.queryParams.operate_type = undefined
+      this.getTable(this.queryParams)
+    },
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.indexOf(input) >= 0
+      )
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.filter{
+  margin-left: 10px;
+  color: #c0c4cc;
+  cursor: pointer;
+  &:hover{
+    color: #606266;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
index 0b7352a..266c9db 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
@@ -1,116 +1,116 @@
-<template>
-  <div>
-    <a-row class="row" type="flex" justify="end">
-      <a-col>
-        <a-space align="end">
-          <a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
-          <a-button class="page-button" size="small" >{{ currentPage }}</a-button>
-          <a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
-          <a-dropdown class="dropdown" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
-            <a-menu slot="overlay">
-              <a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
-                {{ size }}条/页
-              </a-menu-item>
-            </a-menu>
-            <a-button size="small"> {{ pageSize }}条/页 <a-icon type="down" /> </a-button>
-          </a-dropdown>
-        </a-space>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-export default {
-    props: {
-        currentPage: {
-            type: Number,
-            required: true
-        },
-        pageSize: {
-            type: Number,
-            required: true
-        },
-        pageSizes: {
-            type: Array,
-            required: true
-        },
-        total: {
-            type: Number,
-            required: true
-        },
-        isLoading: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            dropdownIsDisabled: false,
-            prevIsDisabled: true,
-        }
-    },
-    computed: {
-        nextIsDisabled() {
-            return this.isLoading || this.total < this.pageSize
-        }
-    },
-    watch: {
-        isLoading: {
-            immediate: true,
-            handler: function (val) {
-                if (val === true) {
-                    this.dropdownIsDisabled = true
-                    this.prevIsDisabled = true
-                } else {
-                    this.dropdownIsDisabled = false
-                    if (this.currentPage === 1) {
-                        this.prevIsDisabled = true
-                    } else {
-                        this.prevIsDisabled = false
-                    }
-                }
-            }
-        },
-        currentPage: {
-            immediate: true,
-            handler: function (val) {
-                if (val === 1) {
-                    this.prevIsDisabled = true
-                }
-            }
-        }
-    },
-    methods: {
-        handleItemClick(size) {
-            this.$emit('showSizeChange', size)
-        },
-        nextPage() {
-            const pageNum = this.currentPage + 1
-            this.$emit('change', pageNum)
-        },
-        prevPage() {
-            const pageNum = this.currentPage - 1
-            this.$emit('change', pageNum)
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.row{
-    margin-top: 5px;
-    .left-button{
-        padding: 0;
-        width: 24px;
-    }
-    .right-button{
-        padding: 0;
-        width: 24px;
-    }
-    .page-button{
-        padding: 0;
-        width: 24px;
-    }
-}
-</style>
+<template>
+  <div>
+    <a-row class="row" type="flex" justify="end">
+      <a-col>
+        <a-space align="end">
+          <a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
+          <a-button class="page-button" size="small" >{{ currentPage }}</a-button>
+          <a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
+          <a-dropdown class="dropdown" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
+            <a-menu slot="overlay">
+              <a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
+                {{ size }}条/页
+              </a-menu-item>
+            </a-menu>
+            <a-button size="small"> {{ pageSize }}条/页 <a-icon type="down" /> </a-button>
+          </a-dropdown>
+        </a-space>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        currentPage: {
+            type: Number,
+            required: true
+        },
+        pageSize: {
+            type: Number,
+            required: true
+        },
+        pageSizes: {
+            type: Array,
+            required: true
+        },
+        total: {
+            type: Number,
+            required: true
+        },
+        isLoading: {
+            type: Boolean,
+            required: false
+        }
+    },
+    data() {
+        return {
+            dropdownIsDisabled: false,
+            prevIsDisabled: true,
+        }
+    },
+    computed: {
+        nextIsDisabled() {
+            return this.isLoading || this.total < this.pageSize
+        }
+    },
+    watch: {
+        isLoading: {
+            immediate: true,
+            handler: function (val) {
+                if (val === true) {
+                    this.dropdownIsDisabled = true
+                    this.prevIsDisabled = true
+                } else {
+                    this.dropdownIsDisabled = false
+                    if (this.currentPage === 1) {
+                        this.prevIsDisabled = true
+                    } else {
+                        this.prevIsDisabled = false
+                    }
+                }
+            }
+        },
+        currentPage: {
+            immediate: true,
+            handler: function (val) {
+                if (val === 1) {
+                    this.prevIsDisabled = true
+                }
+            }
+        }
+    },
+    methods: {
+        handleItemClick(size) {
+            this.$emit('showSizeChange', size)
+        },
+        nextPage() {
+            const pageNum = this.currentPage + 1
+            this.$emit('change', pageNum)
+        },
+        prevPage() {
+            const pageNum = this.currentPage - 1
+            this.$emit('change', pageNum)
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.row{
+    margin-top: 5px;
+    .left-button{
+        padding: 0;
+        width: 24px;
+    }
+    .right-button{
+        padding: 0;
+        width: 24px;
+    }
+    .page-button{
+        padding: 0;
+        width: 24px;
+    }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
index bb8eadb..d177ca1 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
@@ -1,403 +1,404 @@
-<template>
-  <div>
-    <search-form
-      :attrList="relationTableAttrList"
-      @expandChange="handleExpandChange"
-      @search="handleSearch"
-      @searchFormReset="searchFormReset"
-    ></search-form>
-    <vxe-table
-      ref="xTable"
-      :loading="loading"
-      border
-      size="small"
-      show-overflow="tooltip"
-      show-header-overflow="tooltip"
-      resizable
-      :data="tableData"
-      :max-height="`${windowHeight - windowHeightMinus}px`"
-      row-id="_XID"
-      :scroll-y="{ enabled: false }"
-      :span-method="mergeRowMethod"
-    >
-      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
-      <vxe-column field="user" width="100px" title="用户">
-        <template #header="{ column }">
-          <span>{{ column.title }}</span>
-          <a-popover trigger="click" placement="bottom">
-            <a-icon class="filter" type="filter" theme="filled" />
-            <a slot="content">
-              <a-input
-                placeholder="输入筛选用户名"
-                size="small"
-                v-model="queryParams.username"
-                style="width: 200px"
-                allowClear
-              />
-              <a-button type="link" class="filterButton" @click="filterUser">筛选</a-button>
-              <a-button type="link" class="filterResetButton" @click="filterUserReset">重置</a-button>
-            </a>
-          </a-popover>
-        </template>
-      </vxe-column>
-      <vxe-column field="operate_type" width="89px" title="操作">
-        <template #header="{ column }">
-          <span>{{ column.title }}</span>
-          <a-popover trigger="click" placement="bottom">
-            <a-icon class="filter" type="filter" theme="filled" />
-            <a slot="content">
-              <a-select
-                v-model="queryParams.operate_type"
-                placeholder="选择筛选操作"
-                show-search
-                style="width: 200px"
-                :filter-option="filterOption"
-                allowClear
-              >
-                <a-select-option
-                  :value="Object.values(choice)[0]"
-                  :key="index"
-                  v-for="(choice, index) in relationTableAttrList[4].choice_value"
-                >
-                  {{ Object.keys(choice)[0] }}
-                </a-select-option>
-              </a-select>
-              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
-              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
-            </a>
-          </a-popover>
-        </template>
-        <template #default="{ row }">
-          <a-tag color="green" v-if="row.operate_type.includes('新增')">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="orange" v-else-if="row.operate_type.includes('修改')">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="red" v-else>
-            {{ row.operate_type }}
-          </a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="changeDescription" title="描述">
-        <template #default="{ row }">
-          <a-tag v-if="row && row.first">
-            {{
-              `${row.first.ci_type_alias}${
-                row.first.unique_alias && row.first[row.first.unique]
-                  ? `（${row.first.unique_alias}：${row.first[row.first.unique]}）`
-                  : ''
-              }`
-            }}
-          </a-tag>
-          <a-tag v-if="row.changeDescription === '没有修改'">
-            {{ row.relation_type_id }}
-          </a-tag>
-          <template v-else-if="row.operate_type.includes('修改')">
-            <a-tag :key="index" color="orange" v-for="(tag, index) in row.changeArr">
-              {{ tag }}
-            </a-tag>
-          </template>
-          <a-tag color="green" v-else-if="row.operate_type.includes('新增')" :style="{ fontWeight: 'bolder' }">
-            {{ row.relation_type_id }}
-          </a-tag>
-          <a-tag color="red" v-else-if="row.operate_type.includes('删除')">
-            {{ row.relation_type_id }}
-          </a-tag>
-          <a-tag v-if="row && row.second">
-            {{
-              `${row.second.ci_type_alias}${
-                row.second.unique_alias && row.second[row.second.unique]
-                  ? `（${row.second.unique_alias}：${row.second[row.second.unique]}）`
-                  : ''
-              }`
-            }}
-          </a-tag>
-        </template>
-      </vxe-column>
-    </vxe-table>
-    <pager
-      :current-page.sync="queryParams.page"
-      :page-size.sync="queryParams.page_size"
-      :page-sizes="[50, 100, 200]"
-      :total="total"
-      :isLoading="loading"
-      @change="onChange"
-      @showSizeChange="onShowSizeChange"
-    ></pager>
-  </div>
-</template>
-
-<script>
-import SearchForm from './searchForm'
-import Pager from './pager.vue'
-import { getCITypes } from '@/modules/cmdb/api/CIType'
-import { getRelationTable, getUsers } from '@/modules/cmdb/api/history'
-import { getRelationTypes } from '@/modules/cmdb/api/relationType'
-export default {
-  name: 'RelationTable',
-  components: { SearchForm, Pager },
-  data() {
-    return {
-      visible: false,
-      loading: true,
-      isExpand: false,
-      tableData: [],
-      relationTypeList: null,
-      total: 0,
-      userList: [],
-      operateTypeMap: new Map([
-        ['0', '新增'],
-        ['1', '删除'],
-        ['2', '修改'],
-      ]),
-      queryParams: {
-        page: 1,
-        page_size: 50,
-        start: '',
-        end: '',
-        username: '',
-        first_ci_id: undefined,
-        second_ci_id: undefined,
-        operate_type: undefined,
-      },
-      relationTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '用户',
-          is_choice: true,
-          name: 'username',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: 'FirstCI_ID',
-          is_choice: false,
-          name: 'first_ci_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: 'SecondCI_ID',
-          is_choice: false,
-          name: 'second_ci_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 新增: 0 }, { 删除: 1 }, { 修改: 2 }],
-        },
-      ],
-    }
-  },
-  async created() {
-    await Promise.all([
-      this.getRelationTypes(),
-      this.getUserList(),
-      this.getTypes(),
-    ])
-    await this.getTable(this.queryParams)
-  },
-  updated() {
-    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    windowHeightMinus() {
-      return this.isExpand ? 396 : 331
-    },
-  },
-  methods: {
-    // 获取表格数据
-    async getTable(queryParams) {
-      try {
-        this.loading = true
-        const res = await getRelationTable(queryParams)
-        const tempArr = []
-        res.records.forEach((item) => {
-          item[1].forEach((subItem) => {
-            subItem.operate_type = this.handleOperateType(subItem.operate_type)
-            subItem.relation_type_id = this.handleRelationType(subItem.relation_type_id)
-            subItem.first = res.cis[String(subItem.first_ci_id)]
-            subItem.second = res.cis[String(subItem.second_ci_id)]
-            const tempObj = Object.assign(subItem, item[0])
-            tempArr.push(tempObj)
-          })
-        })
-        this.total = res.total
-        this.tableData = tempArr
-      } finally {
-        this.loading = false
-      }
-    },
-    // 获取用户列表
-    async getUserList() {
-      const res = await getUsers()
-      this.userList = res.map((x) => {
-        const username = x.nickname
-        const obj = {
-          [username]: username,
-        }
-        return obj
-      })
-      this.relationTableAttrList[1].choice_value = this.userList
-    },
-    // 获取模型
-    async getTypes() {
-      const res = await getCITypes()
-      const typesArr = []
-      res.ci_types.forEach((item) => {
-        const tempObj = {}
-        tempObj[item.alias] = item.id
-        if (item.alias) {
-          typesArr.push(tempObj)
-        }
-      })
-      this.relationTableAttrList[2].choice_value = typesArr
-      this.relationTableAttrList[3].choice_value = typesArr
-    },
-    // 获取关系
-    async getRelationTypes() {
-      const res = await getRelationTypes()
-      const relationTypeMap = new Map()
-      res.forEach((item) => {
-        relationTypeMap.set(item.id, item.name)
-      })
-      this.relationTypeList = relationTypeMap
-    },
-    onShowSizeChange(size) {
-      this.queryParams.page_size = size
-      this.queryParams.page = 1
-      this.getTable(this.queryParams)
-    },
-    onChange(pageNum) {
-      this.queryParams.page = pageNum
-      this.getTable(this.queryParams)
-    },
-    handleExpandChange(expand) {
-      this.isExpand = expand
-    },
-    // 处理查询
-    handleSearch(queryParams) {
-      this.queryParams = queryParams
-      this.getTable(queryParams)
-    },
-    // 重置表单
-    searchFormReset() {
-      this.queryParams = {
-        page: 1,
-        page_size: 50,
-        start: '',
-        end: '',
-        username: '',
-        first_ci_id: undefined,
-        second_ci_id: undefined,
-        operate_type: undefined,
-      }
-      this.getTable(this.queryParams)
-    },
-    // 转换operate_type
-    handleOperateType(operate_type) {
-      return this.operateTypeMap.get(operate_type)
-    },
-    // 转换relation_type_id
-    handleRelationType(relation_type_id) {
-      return this.relationTypeList.get(relation_type_id)
-    },
-    // 合并表格
-    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
-      const fields = ['created_at', 'user']
-      // 单元格值 = 行[列.属性] 确定一格
-      const cellValue = row[column.property]
-      const created_at = row['created_at']
-      // 如果单元格值不为空且作用域包含当前列
-      if (column.property === 'created_at') {
-        if (cellValue && fields.includes(column.property)) {
-          // 前一行
-          const prevRow = visibleData[_rowIndex - 1]
-          // 下一行
-          let nextRow = visibleData[_rowIndex + 1]
-          // 如果前一行不为空且前一行单元格的值与cellValue相同
-          if (prevRow && prevRow[column.property] === cellValue) {
-            return { rowspan: 0, colspan: 0 }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue) {
-              nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-              return { rowspan: countRowspan, colspan: 1 }
-            }
-          }
-        }
-      } else if (column.property === 'user') {
-        if (cellValue && fields.includes(column.property)) {
-          // 前一行
-          const prevRow = visibleData[_rowIndex - 1]
-          // 下一行
-          let nextRow = visibleData[_rowIndex + 1]
-          // 如果前一行不为空且前一行单元格的值与cellValue相同
-          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
-            return { rowspan: 0, colspan: 0 }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
-              nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-              return { rowspan: countRowspan, colspan: 1 }
-            }
-          }
-        }
-      }
-    },
-    filterUser() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.getTable(this.queryParams)
-    },
-    filterUserReset() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.queryParams.username = ''
-      this.getTable(this.queryParams)
-    },
-    filterOperate() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.getTable(this.queryParams)
-    },
-    filterOperateReset() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.queryParams.operate_type = undefined
-      this.getTable(this.queryParams)
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.indexOf(input) >= 0
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.filter {
-  margin-left: 10px;
-  color: #c0c4cc;
-  cursor: pointer;
-  &:hover {
-    color: #606266;
-  }
-}
-</style>
+<template>
+  <div>
+    <search-form
+      :attrList="relationTableAttrList"
+      @expandChange="handleExpandChange"
+      @search="handleSearch"
+      @searchFormReset="searchFormReset"
+    ></search-form>
+    <vxe-table
+      ref="xTable"
+      :loading="loading"
+      size="small"
+      show-overflow="tooltip"
+      show-header-overflow="tooltip"
+      resizable
+      :data="tableData"
+      :max-height="`${windowHeight - windowHeightMinus}px`"
+      row-id="_XID"
+      :scroll-y="{ enabled: false }"
+      :span-method="mergeRowMethod"
+      stripe
+      class="ops-stripe-table"
+    >
+      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
+      <vxe-column field="user" width="100px" title="用户">
+        <template #header="{ column }">
+          <span>{{ column.title }}</span>
+          <a-popover trigger="click" placement="bottom">
+            <a-icon class="filter" type="filter" theme="filled" />
+            <a slot="content">
+              <a-input
+                placeholder="输入筛选用户名"
+                size="small"
+                v-model="queryParams.username"
+                style="width: 200px"
+                allowClear
+              />
+              <a-button type="link" class="filterButton" @click="filterUser">筛选</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterUserReset">重置</a-button>
+            </a>
+          </a-popover>
+        </template>
+      </vxe-column>
+      <vxe-column field="operate_type" width="89px" title="操作">
+        <template #header="{ column }">
+          <span>{{ column.title }}</span>
+          <a-popover trigger="click" placement="bottom">
+            <a-icon class="filter" type="filter" theme="filled" />
+            <a slot="content">
+              <a-select
+                v-model="queryParams.operate_type"
+                placeholder="选择筛选操作"
+                show-search
+                style="width: 200px"
+                :filter-option="filterOption"
+                allowClear
+              >
+                <a-select-option
+                  :value="Object.values(choice)[0]"
+                  :key="index"
+                  v-for="(choice, index) in relationTableAttrList[4].choice_value"
+                >
+                  {{ Object.keys(choice)[0] }}
+                </a-select-option>
+              </a-select>
+              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type.includes('新增')">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type.includes('修改')">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="red" v-else>
+            {{ row.operate_type }}
+          </a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="changeDescription" title="描述">
+        <template #default="{ row }">
+          <a-tag v-if="row && row.first">
+            {{
+              `${row.first.ci_type_alias}${
+                row.first.unique_alias && row.first[row.first.unique]
+                  ? `（${row.first.unique_alias}：${row.first[row.first.unique]}）`
+                  : ''
+              }`
+            }}
+          </a-tag>
+          <a-tag v-if="row.changeDescription === '没有修改'">
+            {{ row.relation_type_id }}
+          </a-tag>
+          <template v-else-if="row.operate_type.includes('修改')">
+            <a-tag :key="index" color="orange" v-for="(tag, index) in row.changeArr">
+              {{ tag }}
+            </a-tag>
+          </template>
+          <a-tag color="green" v-else-if="row.operate_type.includes('新增')" :style="{ fontWeight: 'bolder' }">
+            {{ row.relation_type_id }}
+          </a-tag>
+          <a-tag color="red" v-else-if="row.operate_type.includes('删除')">
+            {{ row.relation_type_id }}
+          </a-tag>
+          <a-tag v-if="row && row.second">
+            {{
+              `${row.second.ci_type_alias}${
+                row.second.unique_alias && row.second[row.second.unique]
+                  ? `（${row.second.unique_alias}：${row.second[row.second.unique]}）`
+                  : ''
+              }`
+            }}
+          </a-tag>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <pager
+      :current-page.sync="queryParams.page"
+      :page-size.sync="queryParams.page_size"
+      :page-sizes="[50, 100, 200]"
+      :total="total"
+      :isLoading="loading"
+      @change="onChange"
+      @showSizeChange="onShowSizeChange"
+    ></pager>
+  </div>
+</template>
+
+<script>
+import SearchForm from './searchForm'
+import Pager from './pager.vue'
+import { getCITypes } from '@/modules/cmdb/api/CIType'
+import { getRelationTable, getUsers } from '@/modules/cmdb/api/history'
+import { getRelationTypes } from '@/modules/cmdb/api/relationType'
+export default {
+  name: 'RelationTable',
+  components: { SearchForm, Pager },
+  data() {
+    return {
+      visible: false,
+      loading: true,
+      isExpand: false,
+      tableData: [],
+      relationTypeList: null,
+      total: 0,
+      userList: [],
+      operateTypeMap: new Map([
+        ['0', '新增'],
+        ['1', '删除'],
+        ['2', '修改'],
+      ]),
+      queryParams: {
+        page: 1,
+        page_size: 50,
+        start: '',
+        end: '',
+        username: '',
+        first_ci_id: undefined,
+        second_ci_id: undefined,
+        operate_type: undefined,
+      },
+      relationTableAttrList: [
+        {
+          alias: '日期',
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: '用户',
+          is_choice: true,
+          name: 'username',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: 'FirstCI_ID',
+          is_choice: false,
+          name: 'first_ci_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: 'SecondCI_ID',
+          is_choice: false,
+          name: 'second_ci_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: '操作',
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ 新增: 0 }, { 删除: 1 }, { 修改: 2 }],
+        },
+      ],
+    }
+  },
+  async created() {
+    await Promise.all([
+      this.getRelationTypes(),
+      this.getUserList(),
+      this.getTypes(),
+    ])
+    await this.getTable(this.queryParams)
+  },
+  updated() {
+    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 331
+    },
+  },
+  methods: {
+    // 获取表格数据
+    async getTable(queryParams) {
+      try {
+        this.loading = true
+        const res = await getRelationTable(queryParams)
+        const tempArr = []
+        res.records.forEach((item) => {
+          item[1].forEach((subItem) => {
+            subItem.operate_type = this.handleOperateType(subItem.operate_type)
+            subItem.relation_type_id = this.handleRelationType(subItem.relation_type_id)
+            subItem.first = res.cis[String(subItem.first_ci_id)]
+            subItem.second = res.cis[String(subItem.second_ci_id)]
+            const tempObj = Object.assign(subItem, item[0])
+            tempArr.push(tempObj)
+          })
+        })
+        this.total = res.total
+        this.tableData = tempArr
+      } finally {
+        this.loading = false
+      }
+    },
+    // 获取用户列表
+    async getUserList() {
+      const res = await getUsers()
+      this.userList = res.map((x) => {
+        const username = x.nickname
+        const obj = {
+          [username]: username,
+        }
+        return obj
+      })
+      this.relationTableAttrList[1].choice_value = this.userList
+    },
+    // 获取模型
+    async getTypes() {
+      const res = await getCITypes()
+      const typesArr = []
+      res.ci_types.forEach((item) => {
+        const tempObj = {}
+        tempObj[item.alias] = item.id
+        if (item.alias) {
+          typesArr.push(tempObj)
+        }
+      })
+      this.relationTableAttrList[2].choice_value = typesArr
+      this.relationTableAttrList[3].choice_value = typesArr
+    },
+    // 获取关系
+    async getRelationTypes() {
+      const res = await getRelationTypes()
+      const relationTypeMap = new Map()
+      res.forEach((item) => {
+        relationTypeMap.set(item.id, item.name)
+      })
+      this.relationTypeList = relationTypeMap
+    },
+    onShowSizeChange(size) {
+      this.queryParams.page_size = size
+      this.queryParams.page = 1
+      this.getTable(this.queryParams)
+    },
+    onChange(pageNum) {
+      this.queryParams.page = pageNum
+      this.getTable(this.queryParams)
+    },
+    handleExpandChange(expand) {
+      this.isExpand = expand
+    },
+    // 处理查询
+    handleSearch(queryParams) {
+      this.queryParams = queryParams
+      this.getTable(queryParams)
+    },
+    // 重置表单
+    searchFormReset() {
+      this.queryParams = {
+        page: 1,
+        page_size: 50,
+        start: '',
+        end: '',
+        username: '',
+        first_ci_id: undefined,
+        second_ci_id: undefined,
+        operate_type: undefined,
+      }
+      this.getTable(this.queryParams)
+    },
+    // 转换operate_type
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    // 转换relation_type_id
+    handleRelationType(relation_type_id) {
+      return this.relationTypeList.get(relation_type_id)
+    },
+    // 合并表格
+    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
+      const fields = ['created_at', 'user']
+      // 单元格值 = 行[列.属性] 确定一格
+      const cellValue = row[column.property]
+      const created_at = row['created_at']
+      // 如果单元格值不为空且作用域包含当前列
+      if (column.property === 'created_at') {
+        if (cellValue && fields.includes(column.property)) {
+          // 前一行
+          const prevRow = visibleData[_rowIndex - 1]
+          // 下一行
+          let nextRow = visibleData[_rowIndex + 1]
+          // 如果前一行不为空且前一行单元格的值与cellValue相同
+          if (prevRow && prevRow[column.property] === cellValue) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      } else if (column.property === 'user') {
+        if (cellValue && fields.includes(column.property)) {
+          // 前一行
+          const prevRow = visibleData[_rowIndex - 1]
+          // 下一行
+          let nextRow = visibleData[_rowIndex + 1]
+          // 如果前一行不为空且前一行单元格的值与cellValue相同
+          if (prevRow && prevRow[column.property] === cellValue && prevRow['created_at'] === created_at) {
+            return { rowspan: 0, colspan: 0 }
+          } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.property] === cellValue && nextRow['created_at'] === created_at) {
+              nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+              return { rowspan: countRowspan, colspan: 1 }
+            }
+          }
+        }
+      }
+    },
+    filterUser() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.getTable(this.queryParams)
+    },
+    filterUserReset() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.queryParams.username = ''
+      this.getTable(this.queryParams)
+    },
+    filterOperate() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.getTable(this.queryParams)
+    },
+    filterOperateReset() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.queryParams.operate_type = undefined
+      this.getTable(this.queryParams)
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.indexOf(input) >= 0
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.filter {
+  margin-left: 10px;
+  color: #c0c4cc;
+  cursor: pointer;
+  &:hover {
+    color: #606266;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
index a76820b..2491035 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
@@ -1,191 +1,191 @@
-<template>
-  <div>
-    <a-form :colon="false">
-      <a-row :gutter="24">
-        <a-col
-          :sm="24"
-          :md="12"
-          :lg="12"
-          :xl="8"
-          v-for="attr in attrList.slice(0,3)"
-          :key="attr.name"
-        >
-          <a-form-item
-            :label="attr.alias || attr.name "
-            :labelCol="{span:4}"
-            :wrapperCol="{span:20}"
-            labelAlign="right"
-          >
-            <a-select
-              v-model="queryParams[attr.name]"
-              placeholder="请选择"
-              v-if="attr.is_choice"
-              show-search
-              :filter-option="filterOption"
-              allowClear
-            >
-              <a-select-option
-                :value="Object.values(choice)[0]"
-                v-for="(choice, index) in attr.choice_value"
-                :key="'Search_' + attr.name + index"
-              >
-                {{ Object.keys(choice)[0] }}
-              </a-select-option>
-            </a-select>
-            <a-range-picker
-              v-model="date"
-              @change="onChange"
-              :style="{width:'100%'}"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              :show-time="{
-                hideDisabledOptions: true,
-                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-              }"
-              v-else-if="valueTypeMap[attr.value_type] == 'date' || valueTypeMap[attr.value_type] == 'datetime'"
-            />
-            <a-input v-model="queryParams[attr.name]" style="width: 100%" allowClear v-else />
-          </a-form-item>
-        </a-col>
-
-        <template v-if="expand && attrList.length >= 4">
-          <a-col
-            :sm="24"
-            :md="12"
-            :lg="8"
-            :xl="8"
-            :key="'expand_' + item.name"
-            v-for="item in attrList.slice(3)"
-          >
-            <a-form-item
-              :label="item.alias || item.name"
-              :label-col="{ span: 4 }"
-              :wrapper-col="{ span: 20 }"
-              labelAlign="right"
-            >
-              <a-select
-                v-model="queryParams[item.name]"
-                placeholder="请选择"
-                v-if="item.is_choice"
-                show-search
-                :filter-option="filterOption"
-                allowClear
-              >
-                <a-select-option
-                  :value="Object.values(choice)[0]"
-                  :key="'Search_' + item.name + index"
-                  v-for="(choice, index) in item.choice_value"
-                >
-                  {{ Object.keys(choice)[0] }}
-                </a-select-option
-                >
-              </a-select>
-              <a-range-picker
-                :style="{width:'100%'}"
-                @change="onChange"
-                format="YYYY-MM-DD HH:mm"
-                :placeholder="['开始时间', '结束时间']"
-                v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
-                :show-time="{
-                  hideDisabledOptions: true,
-                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-                }"
-              />
-              <a-input v-model="queryParams[item.name]" style="width: 100%" allowClear v-else/>
-            </a-form-item>
-          </a-col>
-        </template>
-      </a-row>
-      <a-row>
-        <a-col :span="24" :style="{ textAlign: 'right' , marginBottom: '10px' }">
-          <a-button type="primary" html-type="submit" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-            重置
-          </a-button>
-          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle" v-if="attrList.length >= 4">
-            {{ expand?'隐藏':'展开' }} <a-icon :type="expand ? 'up' : 'down'" />
-          </a>
-        </a-col>
-      </a-row>
-    </a-form>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { valueTypeMap } from '../../../utils/const'
-export default {
-  name: 'SearchForm',
-  props: {
-    attrList: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      valueTypeMap,
-      expand: false,
-      queryParams: {
-        page: 1,
-        page_size: 50
-      },
-      date: undefined
-    }
-  },
-  watch: {
-    queryParams: {
-      deep: true,
-      handler: function (val) {
-        this.preProcessData()
-        this.$emit('searchFormChange', val)
-      }
-    },
-  },
-  methods: {
-    moment,
-    handleSearch() {
-      this.queryParams.page = 1
-      this.$emit('search', this.queryParams)
-    },
-
-    handleReset() {
-      this.queryParams = {
-        page: 1,
-        page_size: 50
-      }
-      this.date = undefined
-      this.$emit('searchFormReset')
-    },
-
-    toggle() {
-      this.expand = !this.expand
-      this.$emit('expandChange', this.expand)
-    },
-
-    onChange(date, dateString) {
-      this.queryParams.start = dateString[0]
-      this.queryParams.end = dateString[1]
-    },
-    filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.indexOf(input) >= 0
-      )
-    },
-    preProcessData() {
-      Object.keys(this.queryParams).forEach(item => {
-        if (this.queryParams[item] === '' || this.queryParams[item] === undefined) {
-          delete this.queryParams[item]
-        }
-      })
-      return this.queryParams
-    },
-  },
-}
-</script>
-
-<style>
-
-</style>
+<template>
+  <div>
+    <a-form :colon="false">
+      <a-row :gutter="24">
+        <a-col
+          :sm="24"
+          :md="12"
+          :lg="12"
+          :xl="8"
+          v-for="attr in attrList.slice(0,3)"
+          :key="attr.name"
+        >
+          <a-form-item
+            :label="attr.alias || attr.name "
+            :labelCol="{span:4}"
+            :wrapperCol="{span:20}"
+            labelAlign="right"
+          >
+            <a-select
+              v-model="queryParams[attr.name]"
+              placeholder="请选择"
+              v-if="attr.is_choice"
+              show-search
+              :filter-option="filterOption"
+              allowClear
+            >
+              <a-select-option
+                :value="Object.values(choice)[0]"
+                v-for="(choice, index) in attr.choice_value"
+                :key="'Search_' + attr.name + index"
+              >
+                {{ Object.keys(choice)[0] }}
+              </a-select-option>
+            </a-select>
+            <a-range-picker
+              v-model="date"
+              @change="onChange"
+              :style="{width:'100%'}"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              :show-time="{
+                hideDisabledOptions: true,
+                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+              }"
+              v-else-if="valueTypeMap[attr.value_type] == 'date' || valueTypeMap[attr.value_type] == 'datetime'"
+            />
+            <a-input v-model="queryParams[attr.name]" style="width: 100%" allowClear v-else />
+          </a-form-item>
+        </a-col>
+
+        <template v-if="expand && attrList.length >= 4">
+          <a-col
+            :sm="24"
+            :md="12"
+            :lg="8"
+            :xl="8"
+            :key="'expand_' + item.name"
+            v-for="item in attrList.slice(3)"
+          >
+            <a-form-item
+              :label="item.alias || item.name"
+              :label-col="{ span: 4 }"
+              :wrapper-col="{ span: 20 }"
+              labelAlign="right"
+            >
+              <a-select
+                v-model="queryParams[item.name]"
+                placeholder="请选择"
+                v-if="item.is_choice"
+                show-search
+                :filter-option="filterOption"
+                allowClear
+              >
+                <a-select-option
+                  :value="Object.values(choice)[0]"
+                  :key="'Search_' + item.name + index"
+                  v-for="(choice, index) in item.choice_value"
+                >
+                  {{ Object.keys(choice)[0] }}
+                </a-select-option
+                >
+              </a-select>
+              <a-range-picker
+                :style="{width:'100%'}"
+                @change="onChange"
+                format="YYYY-MM-DD HH:mm"
+                :placeholder="['开始时间', '结束时间']"
+                v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
+                :show-time="{
+                  hideDisabledOptions: true,
+                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                }"
+              />
+              <a-input v-model="queryParams[item.name]" style="width: 100%" allowClear v-else/>
+            </a-form-item>
+          </a-col>
+        </template>
+      </a-row>
+      <a-row>
+        <a-col :span="24" :style="{ textAlign: 'right' , marginBottom: '10px' }">
+          <a-button type="primary" html-type="submit" @click="handleSearch">
+            查询
+          </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+            重置
+          </a-button>
+          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle" v-if="attrList.length >= 4">
+            {{ expand?'隐藏':'展开' }} <a-icon :type="expand ? 'up' : 'down'" />
+          </a>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { valueTypeMap } from '../../../utils/const'
+export default {
+  name: 'SearchForm',
+  props: {
+    attrList: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      valueTypeMap,
+      expand: false,
+      queryParams: {
+        page: 1,
+        page_size: 50
+      },
+      date: undefined
+    }
+  },
+  watch: {
+    queryParams: {
+      deep: true,
+      handler: function (val) {
+        this.preProcessData()
+        this.$emit('searchFormChange', val)
+      }
+    },
+  },
+  methods: {
+    moment,
+    handleSearch() {
+      this.queryParams.page = 1
+      this.$emit('search', this.queryParams)
+    },
+
+    handleReset() {
+      this.queryParams = {
+        page: 1,
+        page_size: 50
+      }
+      this.date = undefined
+      this.$emit('searchFormReset')
+    },
+
+    toggle() {
+      this.expand = !this.expand
+      this.$emit('expandChange', this.expand)
+    },
+
+    onChange(date, dateString) {
+      this.queryParams.start = dateString[0]
+      this.queryParams.end = dateString[1]
+    },
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.indexOf(input) >= 0
+      )
+    },
+    preProcessData() {
+      Object.keys(this.queryParams).forEach(item => {
+        if (this.queryParams[item] === '' || this.queryParams[item] === undefined) {
+          delete this.queryParams[item]
+        }
+      })
+      return this.queryParams
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
new file mode 100644
index 0000000..bddc78d
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <vxe-table
+      show-overflow
+      show-header-overflow
+      stripe
+      size="small"
+      class="ops-stripe-table"
+      :data="tableData"
+      v-bind="ci_id ? { maxHeight: `${windowHeight - 94}px` } : { height: `${windowHeight - 225}px` }"
+    >
+      <vxe-column field="trigger_name" title="触发器名称"> </vxe-column>
+      <vxe-column field="type" title="类型">
+        <template #default="{ row }">
+          <span v-if="row.trigger && row.trigger.attr_id">日期属性</span>
+          <span v-else-if="row.trigger && !row.trigger.attr_id">数据变更</span>
+        </template>
+      </vxe-column>
+      <vxe-column title="事件">
+        <template #default="{ row }">
+          <span v-if="row.operate_type === '0'">新增实例</span>
+          <span v-else-if="row.operate_type === '1'">删除实例</span>
+          <span v-else-if="row.operate_type === '2'">实例变更</span>
+        </template>
+      </vxe-column>
+      <vxe-column title="动作">
+        <template #default="{ row }">
+          <span v-if="row.webhook">Webhook</span>
+          <span v-else-if="row.notify">通知</span>
+        </template>
+      </vxe-column>
+      <vxe-column title="触发时间">
+        <template #default="{row}">
+          {{ row.updated_at || row.created_at }}
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <div :style="{ textAlign: 'right' }" v-if="!ci_id">
+      <a-pagination
+        size="small"
+        show-size-changer
+        show-quick-jumper
+        :page-size-options="pageSizeOptions"
+        :current="tablePage.currentPage"
+        :total="tablePage.totalResult"
+        :show-total="(total, range) => `共 ${total} 条记录`"
+        :page-size="tablePage.pageSize"
+        :default-current="1"
+        @change="pageOrSizeChange"
+        @showSizeChange="pageOrSizeChange"
+      >
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCiTriggers, getCiTriggersByCiId } from '../../../api/history'
+export default {
+  name: 'TriggerTable',
+  props: {
+    ci_id: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      tablePage: {
+        currentPage: 1,
+        pageSize: 50,
+        totalResult: 0,
+      },
+      pageSizeOptions: ['50', '100', '200'],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  mounted() {
+    this.updateTableData()
+  },
+  methods: {
+    updateTableData(currentPage = 1, pageSize = this.tablePage.pageSize) {
+      const params = { page: currentPage, page_size: pageSize }
+      if (this.ci_id) {
+        getCiTriggersByCiId(this.ci_id, params).then((res) => {
+          this.tableData = res.items.map((item) => {
+            return {
+              ...item,
+              trigger: res.id2trigger[item.trigger_id],
+            }
+          })
+        })
+      } else {
+        getCiTriggers(params).then((res) => {
+          this.tableData = res?.result || []
+          this.tablePage = {
+            ...this.tablePage,
+            currentPage: res.page,
+            pageSize: res.page_size,
+            totalResult: res.numfound,
+          }
+        })
+      }
+    },
+    pageOrSizeChange(currentPage, pageSize) {
+      this.updateTableData(currentPage, pageSize)
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
index 6bc8e13..d743c2d 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
@@ -1,477 +1,478 @@
-<template>
-  <div>
-    <search-form
-      :attrList="typeTableAttrList"
-      @expandChange="handleExpandChange"
-      @search="handleSearch"
-      @searchFormReset="searchFormReset"
-    ></search-form>
-    <vxe-table
-      ref="xTable"
-      :loading="loading"
-      border
-      resizable
-      :data="tableData"
-      :max-height="`${windowHeight - windowHeightMinus}px`"
-      row-id="_XID"
-      size="small"
-      :row-config="{isHover: true}"
-    >
-      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
-      <vxe-column field="user" width="116px" title="用户"></vxe-column>
-      <vxe-column field="operate_type" width="135px" title="操作">
-        <template #header="{ column }">
-          <span>{{ column.title }}</span>
-          <a-popover trigger="click" placement="bottom">
-            <a-icon class="filter" type="filter" theme="filled" />
-            <a slot="content">
-              <a-select
-                v-model="queryParams.operate_type"
-                placeholder="选择筛选操作"
-                show-search
-                style="width: 200px"
-                :filter-option="filterOption"
-                allowClear
-              >
-                <a-select-option
-                  :value="Object.values(choice)[0]"
-                  :key="index"
-                  v-for="(choice, index) in typeTableAttrList[1].choice_value"
-                >
-                  {{ Object.keys(choice)[0] }}
-                </a-select-option>
-              </a-select>
-              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
-              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
-            </a>
-          </a-popover>
-        </template>
-        <template #default="{ row }">
-          <a-tag color="green" v-if="row.operate_type.includes('新增')">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="orange" v-else-if="row.operate_type.includes('修改')">
-            {{ row.operate_type }}
-          </a-tag>
-          <a-tag color="red" v-else>
-            {{ row.operate_type }}
-          </a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="type_id" title="模型" width="150px">
-        <template #default="{ row }">
-          {{ row.operate_type === '删除模型' ? row.change.alias : row.type_id }}
-        </template>
-      </vxe-column>
-      <vxe-column field="changeDescription" title="描述">
-        <template #default="{ row }">
-          <p style="color:rgba(0, 0, 0, 0.65);" v-if="row.changeDescription === '没有修改'">
-            {{ row.changeDescription }}
-          </p>
-          <template v-else-if="row.operate_type.includes('修改')">
-            <p :key="index" style="color:#fa8c16;" v-for="(tag, index) in row.changeArr">
-              {{ tag }}
-            </p>
-          </template>
-          <p class="more-tag" style="color:#52c41a;" v-else-if="row.operate_type.includes('新增')">
-            {{ row.changeDescription }}
-          </p>
-          <p style="color:#f5222d;" v-else-if="row.operate_type.includes('删除')">
-            {{ row.changeDescription }}
-          </p>
-        </template>
-      </vxe-column>
-    </vxe-table>
-    <a-row class="row" type="flex" justify="end">
-      <a-col>
-        <a-pagination
-          size="small"
-          v-model="current"
-          :page-size-options="pageSizeOptions"
-          :total="numfound"
-          show-size-changer
-          :page-size="pageSize"
-          @change="onChange"
-          @showSizeChange="onShowSizeChange"
-          :show-total="(total) => `共 ${total} 条记录`"
-        >
-        </a-pagination>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import SearchForm from './searchForm'
-import { getCITypesTable, getUsers } from '@/modules/cmdb/api/history'
-import { getCITypes } from '@/modules/cmdb/api/CIType'
-import { getRelationTypes } from '@/modules/cmdb/api/relationType'
-export default {
-  name: 'TypeTable',
-  components: { SearchForm },
-  data() {
-    return {
-      loading: true,
-      relationTypeList: null,
-      operateTypeMap: new Map([
-        ['0', '新增模型'],
-        ['1', '修改模型'],
-        ['2', '删除模型'],
-        ['3', '新增属性'],
-        ['4', '修改属性'],
-        ['5', '删除属性'],
-        ['6', '新增触发器'],
-        ['7', '修改触发器'],
-        ['8', '删除触发器'],
-        ['9', '新增联合唯一'],
-        ['10', '修改联合唯一'],
-        ['11', '删除联合唯一'],
-        ['12', '新增关系'],
-        ['13', '删除关系'],
-      ]),
-      typeList: null,
-      userList: [],
-      typeTableAttrList: [
-        {
-          alias: '模型',
-          is_choice: true,
-          name: 'type_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [
-            { 新增模型: 0 },
-            { 修改模型: 1 },
-            { 删除模型: 2 },
-            { 新增属性: 3 },
-            { 修改属性: 4 },
-            { 删除属性: 5 },
-            { 新增触发器: 6 },
-            { 修改触发器: 7 },
-            { 删除触发器: 8 },
-            { 新增联合唯一: 9 },
-            { 修改联合唯一: 10 },
-            { 删除联合唯一: 11 },
-            { 新增关系: 12 },
-            { 删除关系: 13 },
-          ],
-        },
-      ],
-      pageSizeOptions: ['50', '100', '200'],
-      isExpand: false,
-      current: 1,
-      pageSize: 50,
-      total: 0,
-      numfound: 0,
-      tableData: [],
-      queryParams: {
-        page: 1,
-        page_size: 50,
-        type_id: undefined,
-        operate_type: undefined,
-      },
-    }
-  },
-  async created() {
-    await Promise.all([
-      this.getRelationTypes(),
-      this.getTypes(),
-      this.getUserList(),
-    ])
-    await this.getTable(this.queryParams)
-  },
-  updated() {
-    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    windowHeightMinus() {
-      return this.isExpand ? 396 : 331
-    },
-  },
-  watch: {
-    current(val) {
-      this.queryParams.page = val
-    },
-    pageSize(val) {
-      this.queryParams.page_size = val
-    },
-  },
-  methods: {
-    // 获取表格数据
-    async getTable(queryParams) {
-      try {
-        this.loading = true
-        const res = await getCITypesTable(queryParams)
-        res.result.forEach((item) => {
-          this.handleChangeDescription(item, item.operate_type)
-          item.operate_type = this.handleOperateType(item.operate_type)
-          item.type_id = this.handleTypeId(item.type_id)
-          item.uid = this.handleUID(item.uid)
-        })
-        this.tableData = res.result
-        this.pageSize = res.page_size
-        this.current = res.page
-        this.numfound = res.numfound
-        this.total = res.total
-        console.log(this.tableData)
-      } finally {
-        this.loading = false
-      }
-    },
-    // 获取模型
-    async getTypes() {
-      const res = await getCITypes()
-      const typesArr = []
-      const typesMap = new Map()
-      res.ci_types.forEach((item) => {
-        const tempObj = {}
-        tempObj[item.alias] = item.id
-        if (item.alias) {
-          typesMap.set(item.id, item.alias)
-          typesArr.push(tempObj)
-        }
-      })
-      this.typeList = typesMap
-      // 设置模型options选项
-      this.typeTableAttrList[0].choice_value = typesArr
-    },
-    // 获取用户列表
-    async getUserList() {
-      const res = await getUsers()
-      const userListMap = new Map()
-      res.forEach((item) => {
-        userListMap.set(item.uid, item.nickname)
-      })
-      this.userList = userListMap
-    },
-    // 获取关系
-    async getRelationTypes() {
-      const res = await getRelationTypes()
-      const relationTypeMap = new Map()
-      res.forEach((item) => {
-        relationTypeMap.set(item.id, item.name)
-      })
-      this.relationTypeList = relationTypeMap
-    },
-    onChange(current) {
-      this.current = current
-      this.getTable(this.queryParams)
-    },
-    onShowSizeChange(current, size) {
-      this.current = 1
-      this.pageSize = size
-      this.getTable(this.queryParams)
-    },
-    handleExpandChange(expand) {
-      this.isExpand = expand
-    },
-    // 处理查询
-    handleSearch(queryParams) {
-      this.current = 1
-      this.queryParams = queryParams
-      this.getTable(this.queryParams)
-    },
-    // 重置表单
-    searchFormReset() {
-      this.queryParams = {
-        page: 1,
-        page_size: 50,
-        type_id: undefined,
-        operate_type: undefined,
-      }
-      this.getTable(this.queryParams)
-    },
-    // 转换operate_type
-    handleOperateType(operate_type) {
-      return this.operateTypeMap.get(operate_type)
-    },
-    // 转换type_id
-    handleTypeId(type_id) {
-      return this.typeList.get(type_id) ? this.typeList.get(type_id) : type_id
-    },
-    // 转换uid
-    handleUID(uid) {
-      return this.userList.get(uid)
-    },
-    // 转换relation_type_id
-    handleRelationType(relation_type_id) {
-      return this.relationTypeList.get(relation_type_id)
-    },
-    // 处理改变描述
-    handleChangeDescription(item, operate_type) {
-      switch (operate_type) {
-        // 新增模型
-        case '0': {
-          item.changeDescription = '新增模型：' + item.change.alias
-          break
-        }
-        // 修改模型
-        case '1': {
-          item.changeArr = []
-          for (const key in item.change.old) {
-            const newVal = item.change.new[key]
-            const oldVal = item.change.old[key]
-            if (!_.isEqual(newVal, oldVal) && key !== 'updated_at') {
-              if (oldVal === null) {
-                const str = ` [ ${key} : 改为 ${newVal || '""'} ] `
-                item.changeDescription += str
-                item.changeArr.push(str)
-              } else {
-                const str = ` [ ${key} : 由 ${oldVal || '""'} 改为 ${newVal || '""'} ] `
-                item.changeDescription += ` [ ${key} : 由 ${oldVal || '""'} 改为 ${newVal || '""'} ] `
-                item.changeArr.push(str)
-              }
-            }
-          }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
-          break
-        }
-        // 删除模型
-        case '2': {
-          item.changeDescription = `删除模型：${item.change.alias}`
-          break
-        }
-        // 新增属性
-        case '3': {
-          item.changeDescription = `属性名：${item.change.alias}`
-          break
-        }
-        // 修改属性
-        case '4': {
-          item.changeArr = []
-          for (const key in item.change.old) {
-            if (!_.isEqual(item.change.new[key], item.change.old[key]) && key !== 'updated_at') {
-              let newStr = item.change.new[key]
-              let oldStr = item.change.old[key]
-              if (key === 'choice_value') {
-                newStr = newStr ? newStr.map((item) => item[0]).join(',') : ''
-                oldStr = oldStr ? oldStr.map((item) => item[0]).join(',') : ''
-              }
-              if (Object.prototype.toString.call(newStr) === '[object Object]') {
-                newStr = JSON.stringify(newStr)
-              }
-              if (Object.prototype.toString.call(oldStr) === '[object Object]') {
-                oldStr = JSON.stringify(oldStr)
-              }
-              const str = `${key} : ${oldStr ? `由 ${oldStr || '""'} ` : ''} 改为 ${newStr || '""'}`
-              item.changeDescription += ` [ ${str} ] `
-              item.changeArr.push(str)
-            }
-          }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
-          break
-        }
-        // 删除属性
-        case '5': {
-          item.changeDescription = `删除：${item.change.alias}`
-          break
-        }
-        // 新增触发器
-        case '6': {
-          item.changeDescription = `属性ID：${item.change.attr_id}，提前：${item.change.notify.before_days}天，主题：${item.change.notify.subject}\n内容：${item.change.notify.body}\n通知时间：${item.change.notify.notify_at}`
-          break
-        }
-        // 修改触发器
-        case '7': {
-          item.changeArr = []
-          for (const key in item.change.old.notify) {
-            const newVal = item.change.new.notify[key]
-            const oldVal = item.change.old.notify[key]
-            if (!_.isEqual(newVal, oldVal) && key !== 'updated_at') {
-              const str = ` [ ${key} : 由 ${oldVal} 改为 ${newVal} ] `
-              item.changeDescription += str
-              item.changeArr.push(str)
-            }
-          }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
-          break
-        }
-        // 删除触发器
-        case '8': {
-          item.changeDescription = `属性ID：${item.change.attr_id}，提前：${item.change.notify.before_days}天，主题：${item.change.notify.subject}\n内容：${item.change.notify.body}\n通知时间：${item.change.notify.notify_at}`
-          break
-        }
-        // 新增联合唯一
-        case '9': {
-          item.changeDescription = `属性id：[${item.change.attr_ids}]`
-          break
-        }
-        // 修改联合唯一
-        case '10': {
-          item.changeArr = []
-          const oldVal = item.change.old.attr_ids
-          const newVal = item.change.new.attr_ids
-          const str = `属性id：[${oldVal}] -> [${newVal}]`
-          item.changeDescription = str
-          item.changeArr.push(str)
-          break
-        }
-        // 删除联合唯一
-        case '11': {
-          item.changeDescription = `属性id：[${item.change.attr_ids}]`
-          break
-        }
-        // 新增关系
-        case '12': {
-          item.changeDescription = `新增：${item.change.parent.alias} -> ${this.handleRelationType(
-            item.change.relation_type_id
-          )} -> ${item.change.child.alias}`
-          break
-        }
-        // 删除关系
-        case '13': {
-          item.changeDescription = `删除：${item.change.parent_id.alias} -> ${this.handleRelationType(
-            item.change.relation_type_id
-          )} -> ${item.change.child.alias}`
-          break
-        }
-      }
-    },
-    filterOperate() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.getTable(this.queryParams)
-    },
-    filterOperateReset() {
-      this.queryParams.page = 1
-      this.queryParams.page_size = 50
-      this.queryParams.operate_type = undefined
-      this.getTable(this.queryParams)
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.indexOf(input) >= 0
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.row {
-  margin-top: 5px;
-}
-.filter {
-  margin-left: 10px;
-  color: #c0c4cc;
-  cursor: pointer;
-  &:hover {
-    color: #606266;
-  }
-}
-.more-tag {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow:ellipsis;
-}
-p {
-  margin-bottom: 0;
-}
-</style>
+<template>
+  <div>
+    <search-form
+      :attrList="typeTableAttrList"
+      @expandChange="handleExpandChange"
+      @search="handleSearch"
+      @searchFormReset="searchFormReset"
+    ></search-form>
+    <vxe-table
+      ref="xTable"
+      :loading="loading"
+      resizable
+      :data="tableData"
+      :max-height="`${windowHeight - windowHeightMinus}px`"
+      row-id="_XID"
+      size="small"
+      :row-config="{isHover: true}"
+      stripe
+      class="ops-stripe-table"
+    >
+      <vxe-column field="created_at" width="159px" title="操作时间"></vxe-column>
+      <vxe-column field="user" width="116px" title="用户"></vxe-column>
+      <vxe-column field="operate_type" width="135px" title="操作">
+        <template #header="{ column }">
+          <span>{{ column.title }}</span>
+          <a-popover trigger="click" placement="bottom">
+            <a-icon class="filter" type="filter" theme="filled" />
+            <a slot="content">
+              <a-select
+                v-model="queryParams.operate_type"
+                placeholder="选择筛选操作"
+                show-search
+                style="width: 200px"
+                :filter-option="filterOption"
+                allowClear
+              >
+                <a-select-option
+                  :value="Object.values(choice)[0]"
+                  :key="index"
+                  v-for="(choice, index) in typeTableAttrList[1].choice_value"
+                >
+                  {{ Object.keys(choice)[0] }}
+                </a-select-option>
+              </a-select>
+              <a-button type="link" class="filterButton" @click="filterOperate">筛选</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">重置</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type.includes('新增')">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type.includes('修改')">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="red" v-else>
+            {{ row.operate_type }}
+          </a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="type_id" title="模型" width="150px">
+        <template #default="{ row }">
+          {{ row.operate_type === '删除模型' ? row.change.alias : row.type_id}}
+        </template>
+      </vxe-column>
+      <vxe-column field="changeDescription" title="描述">
+        <template #default="{ row }">
+          <p style="color:rgba(0, 0, 0, 0.65);" v-if="row.changeDescription === '没有修改'">
+            {{ row.changeDescription }}
+          </p>
+          <template v-else-if="row.operate_type.includes('修改')">
+            <p :key="index" style="color:#fa8c16;" v-for="(tag, index) in row.changeArr">
+              {{ tag }}
+            </p>
+          </template>
+          <p class="more-tag" style="color:#52c41a;" v-else-if="row.operate_type.includes('新增')">
+            {{ row.changeDescription }}
+          </p>
+          <p style="color:#f5222d;" v-else-if="row.operate_type.includes('删除')">
+            {{ row.changeDescription }}
+          </p>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <a-row class="row" type="flex" justify="end">
+      <a-col>
+        <a-pagination
+          size="small"
+          v-model="current"
+          :page-size-options="pageSizeOptions"
+          :total="numfound"
+          show-size-changer
+          :page-size="pageSize"
+          @change="onChange"
+          @showSizeChange="onShowSizeChange"
+          :show-total="(total) => `共 ${total} 条记录`"
+        >
+        </a-pagination>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import SearchForm from './searchForm'
+import { getCITypesTable, getUsers } from '@/modules/cmdb/api/history'
+import { getCITypes } from '@/modules/cmdb/api/CIType'
+import { getRelationTypes } from '@/modules/cmdb/api/relationType'
+export default {
+  name: 'TypeTable',
+  components: { SearchForm },
+  data() {
+    return {
+      loading: true,
+      relationTypeList: null,
+      operateTypeMap: new Map([
+        ['0', '新增模型'],
+        ['1', '修改模型'],
+        ['2', '删除模型'],
+        ['3', '新增属性'],
+        ['4', '修改属性'],
+        ['5', '删除属性'],
+        ['6', '新增触发器'],
+        ['7', '修改触发器'],
+        ['8', '删除触发器'],
+        ['9', '新增联合唯一'],
+        ['10', '修改联合唯一'],
+        ['11', '删除联合唯一'],
+        ['12', '新增关系'],
+        ['13', '删除关系'],
+      ]),
+      typeList: null,
+      userList: [],
+      typeTableAttrList: [
+        {
+          alias: '模型',
+          is_choice: true,
+          name: 'type_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: '操作',
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [
+            { 新增模型: 0 },
+            { 修改模型: 1 },
+            { 删除模型: 2 },
+            { 新增属性: 3 },
+            { 修改属性: 4 },
+            { 删除属性: 5 },
+            { 新增触发器: 6 },
+            { 修改触发器: 7 },
+            { 删除触发器: 8 },
+            { 新增联合唯一: 9 },
+            { 修改联合唯一: 10 },
+            { 删除联合唯一: 11 },
+            { 新增关系: 12 },
+            { 删除关系: 13 },
+          ],
+        },
+      ],
+      pageSizeOptions: ['50', '100', '200'],
+      isExpand: false,
+      current: 1,
+      pageSize: 50,
+      total: 0,
+      numfound: 0,
+      tableData: [],
+      queryParams: {
+        page: 1,
+        page_size: 50,
+        type_id: undefined,
+        operate_type: undefined,
+      },
+    }
+  },
+  async created() {
+    await Promise.all([
+      this.getRelationTypes(),
+      this.getTypes(),
+      this.getUserList(),
+    ])
+    await this.getTable(this.queryParams)
+  },
+  updated() {
+    this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 335
+    },
+  },
+  watch: {
+    current(val) {
+      this.queryParams.page = val
+    },
+    pageSize(val) {
+      this.queryParams.page_size = val
+    },
+  },
+  methods: {
+    // 获取表格数据
+    async getTable(queryParams) {
+      try {
+        this.loading = true
+        const res = await getCITypesTable(queryParams)
+        res.result.forEach((item) => {
+          this.handleChangeDescription(item, item.operate_type)
+          item.operate_type = this.handleOperateType(item.operate_type)
+          item.type_id = this.handleTypeId(item.type_id)
+          item.uid = this.handleUID(item.uid)
+        })
+        this.tableData = res.result
+        this.pageSize = res.page_size
+        this.current = res.page
+        this.numfound = res.numfound
+        this.total = res.total
+        console.log(this.tableData)
+      } finally {
+        this.loading = false
+      }
+    },
+    // 获取模型
+    async getTypes() {
+      const res = await getCITypes()
+      const typesArr = []
+      const typesMap = new Map()
+      res.ci_types.forEach((item) => {
+        const tempObj = {}
+        tempObj[item.alias] = item.id
+        if (item.alias) {
+          typesMap.set(item.id, item.alias)
+          typesArr.push(tempObj)
+        }
+      })
+      this.typeList = typesMap
+      // 设置模型options选项
+      this.typeTableAttrList[0].choice_value = typesArr
+    },
+    // 获取用户列表
+    async getUserList() {
+      const res = await getUsers()
+      const userListMap = new Map()
+      res.forEach((item) => {
+        userListMap.set(item.uid, item.nickname)
+      })
+      this.userList = userListMap
+    },
+    // 获取关系
+    async getRelationTypes() {
+      const res = await getRelationTypes()
+      const relationTypeMap = new Map()
+      res.forEach((item) => {
+        relationTypeMap.set(item.id, item.name)
+      })
+      this.relationTypeList = relationTypeMap
+    },
+    onChange(current) {
+      this.current = current
+      this.getTable(this.queryParams)
+    },
+    onShowSizeChange(current, size) {
+      this.current = 1
+      this.pageSize = size
+      this.getTable(this.queryParams)
+    },
+    handleExpandChange(expand) {
+      this.isExpand = expand
+    },
+    // 处理查询
+    handleSearch(queryParams) {
+      this.current = 1
+      this.queryParams = queryParams
+      this.getTable(this.queryParams)
+    },
+    // 重置表单
+    searchFormReset() {
+      this.queryParams = {
+        page: 1,
+        page_size: 50,
+        type_id: undefined,
+        operate_type: undefined,
+      }
+      this.getTable(this.queryParams)
+    },
+    // 转换operate_type
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    // 转换type_id
+    handleTypeId(type_id) {
+      return this.typeList.get(type_id) ? this.typeList.get(type_id) : type_id
+    },
+    // 转换uid
+    handleUID(uid) {
+      return this.userList.get(uid)
+    },
+    // 转换relation_type_id
+    handleRelationType(relation_type_id) {
+      return this.relationTypeList.get(relation_type_id)
+    },
+    // 处理改变描述
+    handleChangeDescription(item, operate_type) {
+      switch (operate_type) {
+        // 新增模型
+        case '0': {
+          item.changeDescription = '新增模型：' + item.change.alias
+          break
+        }
+        // 修改模型
+        case '1': {
+          item.changeArr = []
+          for (const key in item.change.old) {
+            const newVal = item.change.new[key]
+            const oldVal = item.change.old[key]
+            if (!_.isEqual(newVal, oldVal) && key !== 'updated_at') {
+              if (oldVal === null) {
+                const str = ` [ ${key} : 改为 ${newVal || '""'} ] `
+                item.changeDescription += str
+                item.changeArr.push(str)
+              } else {
+                const str = ` [ ${key} : 由 ${oldVal || '""'} 改为 ${newVal || '""'} ] `
+                item.changeDescription += ` [ ${key} : 由 ${oldVal || '""'} 改为 ${newVal || '""'} ] `
+                item.changeArr.push(str)
+              }
+            }
+          }
+          if (!item.changeDescription) item.changeDescription = '没有修改'
+          break
+        }
+        // 删除模型
+        case '2': {
+          item.changeDescription = `删除模型：${item.change.alias}`
+          break
+        }
+        // 新增属性
+        case '3': {
+          item.changeDescription = `属性名：${item.change.alias}`
+          break
+        }
+        // 修改属性
+        case '4': {
+          item.changeArr = []
+          for (const key in item.change.old) {
+            if (!_.isEqual(item.change.new[key], item.change.old[key]) && key !== 'updated_at') {
+              let newStr = item.change.new[key]
+              let oldStr = item.change.old[key]
+              if (key === 'choice_value') {
+                newStr = newStr ? newStr.map((item) => item[0]).join(',') : ''
+                oldStr = oldStr ? oldStr.map((item) => item[0]).join(',') : ''
+              }
+              if (Object.prototype.toString.call(newStr) === '[object Object]') {
+                newStr = JSON.stringify(newStr)
+              }
+              if (Object.prototype.toString.call(oldStr) === '[object Object]') {
+                oldStr = JSON.stringify(oldStr)
+              }
+              const str = `${key} : ${oldStr ? `由 ${oldStr || '""'} ` : ''} 改为 ${newStr || '""'}`
+              item.changeDescription += ` [ ${str} ] `
+              item.changeArr.push(str)
+            }
+          }
+          if (!item.changeDescription) item.changeDescription = '没有修改'
+          break
+        }
+        // 删除属性
+        case '5': {
+          item.changeDescription = `删除：${item.change.alias}`
+          break
+        }
+        // 新增触发器
+        case '6': {
+          item.changeDescription = `属性ID：${item.change.attr_id}，提前：${item.change.option.before_days}天，主题：${item.change.option.subject}\n内容：${item.change.option.body}\n通知时间：${item.change.option.notify_at}`
+          break
+        }
+        // 修改触发器
+        case '7': {
+          item.changeArr = []
+          for (const key in item.change.old.option) {
+            const newVal = item.change.new.option[key]
+            const oldVal = item.change.old.option[key]
+            if (!_.isEqual(newVal, oldVal) && key !== 'updated_at') {
+              const str = ` [ ${key} : 由 ${oldVal} 改为 ${newVal} ] `
+              item.changeDescription += str
+              item.changeArr.push(str)
+            }
+          }
+          if (!item.changeDescription) item.changeDescription = '没有修改'
+          break
+        }
+        // 删除触发器
+        case '8': {
+          item.changeDescription = `属性ID：${item.change.attr_id}，提前：${item.change.option.before_days}天，主题：${item.change.option.subject}\n内容：${item.change.option.body}\n通知时间：${item.change.option.notify_at}`
+          break
+        }
+        // 新增联合唯一
+        case '9': {
+          item.changeDescription = `属性id：[${item.change.attr_ids}]`
+          break
+        }
+        // 修改联合唯一
+        case '10': {
+          item.changeArr = []
+          const oldVal = item.change.old.attr_ids
+          const newVal = item.change.new.attr_ids
+          const str = `属性id：[${oldVal}] -> [${newVal}]`
+          item.changeDescription = str
+          item.changeArr.push(str)
+          break
+        }
+        // 删除联合唯一
+        case '11': {
+          item.changeDescription = `属性id：[${item.change.attr_ids}]`
+          break
+        }
+        // 新增关系
+        case '12': {
+          item.changeDescription = `新增：${item.change.parent.alias} -> ${this.handleRelationType(
+            item.change.relation_type_id
+          )} -> ${item.change.child.alias}`
+          break
+        }
+        // 删除关系
+        case '13': {
+          item.changeDescription = `删除：${item.change.parent_id.alias} -> ${this.handleRelationType(
+            item.change.relation_type_id
+          )} -> ${item.change.child.alias}`
+          break
+        }
+      }
+    },
+    filterOperate() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.getTable(this.queryParams)
+    },
+    filterOperateReset() {
+      this.queryParams.page = 1
+      this.queryParams.page_size = 50
+      this.queryParams.operate_type = undefined
+      this.getTable(this.queryParams)
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.indexOf(input) >= 0
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.row {
+  margin-top: 5px;
+}
+.filter {
+  margin-left: 10px;
+  color: #c0c4cc;
+  cursor: pointer;
+  &:hover {
+    color: #606266;
+  }
+}
+.more-tag {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow:ellipsis;
+}
+p {
+  margin-bottom: 0;
+}
+</style>