From e429ad59fff4bf7c231d9e4e70bb184089c01e53 Mon Sep 17 00:00:00 2001
From: wang-liang0615 <53748875+wang-liang0615@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:53:07 +0800
Subject: [PATCH] feat(ui):i18n (#347)

* feat(acl-ui):i18n

* feat(base-ui):i18n

* feat(cmdb-ui):i18n
---
 cmdb-ui/src/App.vue                           |   20 +-
 .../components/CMDBFilterComp/constants.js    |   56 +-
 .../components/CMDBFilterComp/expression.vue  |  625 ++--
 .../src/components/CMDBFilterComp/index.vue   |  586 ++--
 .../components/CustomIconSelect/constants.js  |   10 +-
 .../src/components/CustomIconSelect/index.vue |   37 +-
 .../src/components/EmployeeTransfer/index.vue |   39 +-
 cmdb-ui/src/components/Menu/menu.js           |    7 +-
 cmdb-ui/src/components/OpsTable/index.vue     |    6 +-
 cmdb-ui/src/components/RoleTransfer/index.vue |    6 +-
 cmdb-ui/src/components/tools/UserMenu.vue     |   39 +-
 cmdb-ui/src/core/use.js                       |    8 +-
 cmdb-ui/src/guard.js                          |    3 +-
 cmdb-ui/src/lang/en.js                        |  140 +
 cmdb-ui/src/lang/index.js                     |   18 +
 cmdb-ui/src/lang/zh.js                        |  140 +
 cmdb-ui/src/main.js                           |    2 +
 cmdb-ui/src/modules/acl/lang/en.js            |  125 +
 cmdb-ui/src/modules/acl/lang/zh.js            |  125 +
 cmdb-ui/src/modules/acl/router/index.js       |   20 +-
 cmdb-ui/src/modules/acl/views/apps.vue        |    8 +-
 cmdb-ui/src/modules/acl/views/history.vue     |   10 +-
 .../src/modules/acl/views/module/appForm.vue  |   27 +-
 .../src/modules/acl/views/module/pager.vue    |    4 +-
 .../acl/views/module/permCollectForm.vue      |   88 +-
 .../acl/views/module/permissionForm.vue       |   37 +-
 .../views/module/permissionHistoryTable.vue   |  114 +-
 .../acl/views/module/resourceBatchPerm.vue    |   44 +-
 .../modules/acl/views/module/resourceForm.vue |   35 +-
 .../acl/views/module/resourceGroupMember.vue  |    2 +-
 .../acl/views/module/resourceGroupModal.vue   |    6 +-
 .../acl/views/module/resourceHistoryTable.vue |  100 +-
 .../acl/views/module/resourcePermForm.vue     |   84 +-
 .../views/module/resourcePermManageForm.vue   |   52 +-
 .../acl/views/module/resourceTypeForm.vue     |   31 +-
 .../views/module/resourceTypeHistoryTable.vue |   98 +-
 .../acl/views/module/resourceUserForm.vue     |  112 +-
 .../src/modules/acl/views/module/roleForm.vue |   46 +-
 .../acl/views/module/roleHistoryTable.vue     |   82 +-
 .../modules/acl/views/module/searchForm.vue   |   13 +-
 .../modules/acl/views/module/triggerForm.vue  |   36 +-
 .../acl/views/module/triggerHistoryTable.vue  |  122 +-
 .../acl/views/module/triggerPattern.vue       |   10 +-
 .../src/modules/acl/views/module/userForm.vue |   56 +-
 .../acl/views/module/usersUnderRoleForm.vue   |   26 +-
 .../acl/views/operation_history/index.vue     |   10 +-
 .../modules/permissionTable.vue               |   46 +-
 .../modules/resourceHistoryTable.vue          |  118 +-
 .../modules/resourceTypeHistoryTable.vue      |  130 +-
 .../modules/roleHistoryTable.vue              |   84 +-
 .../modules/triggerHistoryTable.vue           |  145 +-
 .../src/modules/acl/views/resource_types.vue  |   53 +-
 cmdb-ui/src/modules/acl/views/resources.vue   |   73 +-
 cmdb-ui/src/modules/acl/views/roles.vue       |   92 +-
 cmdb-ui/src/modules/acl/views/secretKey.vue   |   12 +-
 cmdb-ui/src/modules/acl/views/trigger.vue     |   77 +-
 cmdb-ui/src/modules/acl/views/users.vue       |  400 +--
 .../modules/cmdb/assets/dashboard_empty.png   |  Bin 87434 -> 30278 bytes
 .../modules/cmdb/assets/preference_card.png   |  Bin 9258 -> 146181 bytes
 .../cmdb/components/JsonEditor/jsonEditor.vue |    2 +-
 .../components/attributesTransfer/index.vue   |   27 +-
 .../batchDownload/batchDownload.vue           |   76 +-
 .../cmdb/components/cmdbGrant/ciTypeGrant.vue |   18 +-
 .../cmdb/components/cmdbGrant/constants.js    |   24 +-
 .../cmdb/components/cmdbGrant/grantComp.vue   |   14 +-
 .../cmdb/components/cmdbGrant/grantModal.vue  |    4 +-
 .../components/cmdbGrant/readGrantModal.vue   |   20 +-
 .../cmdbGrant/relationViewGrant.vue           |    8 +-
 .../cmdbGrant/typeRelationGrant.vue           |    8 +-
 .../cmdb/components/colorPicker/index.vue     |    2 +-
 .../cmdb/components/httpSnmpAD/index.vue      |   40 +-
 .../cmdb/components/noticeContent/index.vue   |  398 +--
 .../preferenceSearch/preferenceSearch.vue     |    8 +-
 .../cmdb/components/searchForm/SearchForm.vue |   20 +-
 .../subscribeSetting/subscribeSetting.vue     |   26 +-
 .../cmdb/components/webhook/authorization.vue |  288 +-
 .../cmdb/components/webhook/header.vue        |  202 +-
 .../modules/cmdb/components/webhook/index.vue |  294 +-
 .../cmdb/components/webhook/paramaters.vue    |  200 +-
 cmdb-ui/src/modules/cmdb/lang/en.js           |  483 +++
 cmdb-ui/src/modules/cmdb/lang/zh.js           |  482 +++
 cmdb-ui/src/modules/cmdb/router/index.js      |   42 +-
 cmdb-ui/src/modules/cmdb/utils/const.js       |   60 +-
 .../src/modules/cmdb/views/batch/index.vue    |   12 +-
 .../cmdb/views/batch/modules/CiTypeChoice.vue |   14 +-
 .../views/batch/modules/UploadFileForm.vue    |    4 +-
 .../cmdb/views/batch/modules/UploadResult.vue |   12 +-
 cmdb-ui/src/modules/cmdb/views/ci/index.vue   | 1981 +++++------
 .../views/ci/modules/BatchUpdateRelation.vue  |    2 +-
 .../cmdb/views/ci/modules/CiDetail.vue        |  686 ++--
 .../views/ci/modules/CreateInstanceForm.vue   |  774 ++---
 .../cmdb/views/ci/modules/MetadataDrawer.vue  |  453 +--
 .../views/ci/modules/ciDetailAttrContent.vue  |  636 ++--
 .../views/ci/modules/ciDetailRelation.vue     |   16 +-
 .../ci/modules/ciDetailRelationTopo/index.vue |  336 +-
 .../ci/modules/ciDetailRelationTopo/node.js   |  113 +-
 .../ci/modules/createInstanceFormByGroup.vue  |   16 +-
 .../cmdb/views/ci/modules/editAttrsDrawer.vue |   15 +-
 .../views/ci/modules/editAttrsPopover.vue     |    4 +-
 .../modules/cmdb/views/ci_types/adModal.vue   |    8 +-
 .../modules/cmdb/views/ci_types/attrAD.vue    |   12 +-
 .../cmdb/views/ci_types/attrADTabpane.vue     |  794 ++---
 .../cmdb/views/ci_types/attributeCard.vue     |  560 +--
 .../cmdb/views/ci_types/attributeEditForm.vue | 1432 ++++----
 .../cmdb/views/ci_types/attributeStore.vue    |   10 +-
 .../cmdb/views/ci_types/attributesTable.vue   | 1138 +++----
 .../cmdb/views/ci_types/ceateNewAttribute.vue | 1116 +++---
 .../cmdb/views/ci_types/ciTypedetail.vue      |   12 +-
 .../cmdb/views/ci_types/computedArea.vue      |  180 +-
 .../src/modules/cmdb/views/ci_types/index.vue | 1892 ++++++-----
 .../views/ci_types/newCiTypeAttrModal.vue     |   16 +-
 .../cmdb/views/ci_types/preValueArea.vue      |  844 ++---
 .../cmdb/views/ci_types/preValueTag.vue       |   17 +-
 .../cmdb/views/ci_types/relationAD.vue        |   20 +-
 .../cmdb/views/ci_types/relationTable.vue     |   69 +-
 .../cmdb/views/ci_types/triggerForm.vue       | 1327 ++++----
 .../cmdb/views/ci_types/triggerTable.vue      |  298 +-
 .../cmdb/views/ci_types/uniqueConstraint.vue  |   24 +-
 .../cmdb/views/custom_dashboard/chart.vue     |    2 +-
 .../cmdb/views/custom_dashboard/chartForm.vue | 1564 ++++-----
 .../views/custom_dashboard/chartOptions.js    |   12 +-
 .../cmdb/views/custom_dashboard/constant.js   |   10 +-
 .../views/custom_dashboard/customLayout.vue   |    8 +-
 .../cmdb/views/discovery/discoveryCard.vue    |    4 +-
 .../cmdb/views/discovery/editDrawer.vue       |  642 ++--
 .../modules/cmdb/views/discovery/index.vue    |   35 +-
 .../modules/cmdb/views/discoveryCI/index.vue  |   48 +-
 .../cmdb/views/model_relation/index.vue       |  100 +-
 .../modules/modelRelationTable.vue            |   34 +-
 .../cmdb/views/operation_history/index.vue    |   86 +-
 .../operation_history/modules/ciTable.vue     |  828 +++--
 .../views/operation_history/modules/pager.vue |  232 +-
 .../operation_history/modules/relation.vue    |  799 +++--
 .../operation_history/modules/searchForm.vue  |  386 +--
 .../modules/triggerTable.vue                  |  246 +-
 .../operation_history/modules/typeTable.vue   |  962 +++---
 .../modules/cmdb/views/preference/index.vue   |   60 +-
 .../cmdb/views/preference_relation/index.vue  |   24 +-
 .../modules/RelationViewForm.vue              |   13 +-
 .../cmdb/views/relation_type/index.vue        |   19 +-
 .../cmdb/views/relation_views/index.vue       | 3027 +++++++++--------
 .../relation_views/modules/AddTableModal.vue  |   30 +-
 .../relation_views/modules/ContextMenu.vue    |    4 +-
 .../cmdb/views/resource_search/index.vue      | 1071 +++---
 .../modules/cmdb/views/tree_views/index.vue   | 2672 ++++++++-------
 cmdb-ui/src/router/config.js                  |   19 +-
 cmdb-ui/src/store/index.js                    |    5 +
 cmdb-ui/src/views/setting/auth/cas.vue        |   44 +-
 cmdb-ui/src/views/setting/auth/common.vue     |    6 +-
 cmdb-ui/src/views/setting/auth/index.vue      |   39 +-
 cmdb-ui/src/views/setting/auth/ldap.vue       |   34 +-
 cmdb-ui/src/views/setting/auth/loginModal.vue |   60 +-
 cmdb-ui/src/views/setting/auth/oauth2.vue     |   44 +-
 .../src/views/setting/companyInfo/index.vue   |  763 ++---
 .../setting/companyStructure/BatchModal.vue   |   44 +-
 .../setting/companyStructure/BatchUpload.vue  |   95 +-
 .../companyStructure/DepartmentModal.vue      |   26 +-
 .../companyStructure/EmployeeModal.vue        |  589 ++--
 .../views/setting/companyStructure/index.vue  |  443 +--
 .../views/setting/components/EditImage.vue    |   21 +-
 .../views/setting/components/SearchForm.vue   |    2 +-
 .../components/departmentTreeSelect.vue       |   22 +-
 .../setting/components/employeeTable.vue      |  395 ++-
 .../setting/components/employeeTreeSelect.vue |   43 +-
 .../setting/components/relateEmployee.vue     |    2 +-
 .../components/settingFilterComp/constants.js |   20 +-
 .../components/settingFilterComp/index.vue    |   16 +-
 cmdb-ui/src/views/setting/lang/en.js          |  443 +++
 cmdb-ui/src/views/setting/lang/zh.js          |  442 +++
 cmdb-ui/src/views/setting/notice/bot.vue      |  228 +-
 cmdb-ui/src/views/setting/notice/dingding.vue |  302 +-
 .../src/views/setting/notice/email/index.less |   34 +-
 .../src/views/setting/notice/email/index.vue  |   66 +-
 .../views/setting/notice/email/receive.vue    |  392 +--
 .../src/views/setting/notice/email/send.vue   |  340 +-
 cmdb-ui/src/views/setting/notice/feishu.vue   |  262 +-
 cmdb-ui/src/views/setting/notice/wx.vue       |  287 +-
 cmdb-ui/src/views/setting/person/index.vue    |  830 ++---
 178 files changed, 21927 insertions(+), 19433 deletions(-)
 create mode 100644 cmdb-ui/src/lang/en.js
 create mode 100644 cmdb-ui/src/lang/index.js
 create mode 100644 cmdb-ui/src/lang/zh.js
 create mode 100644 cmdb-ui/src/modules/acl/lang/en.js
 create mode 100644 cmdb-ui/src/modules/acl/lang/zh.js
 create mode 100644 cmdb-ui/src/modules/cmdb/lang/en.js
 create mode 100644 cmdb-ui/src/modules/cmdb/lang/zh.js
 create mode 100644 cmdb-ui/src/views/setting/lang/en.js
 create mode 100644 cmdb-ui/src/views/setting/lang/zh.js

diff --git a/cmdb-ui/src/App.vue b/cmdb-ui/src/App.vue
index 21a0c08..2ee1de5 100644
--- a/cmdb-ui/src/App.vue
+++ b/cmdb-ui/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-config-provider :locale="locale">
+  <a-config-provider :locale="antdLocale">
     <div id="app" :class="{ 'ops-fullscreen': isOpsFullScreen, 'ops-only-topmenu': isOpsOnlyTopMenu }">
       <router-view v-if="alive" />
     </div>
@@ -7,8 +7,9 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapState, mapActions, mapMutations } from 'vuex'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import enUS from 'ant-design-vue/lib/locale-provider/en_US'
 import { AppDeviceEnquire } from '@/utils/mixin'
 import { debounce } from './utils/util'
 
@@ -24,20 +25,28 @@ export default {
   },
   data() {
     return {
-      locale: zhCN,
       alive: true,
       timer: null,
     }
   },
   computed: {
+    ...mapState(['locale']),
+    antdLocale() {
+      if (this.locale === 'zh') {
+        return zhCN
+      }
+      return enUS
+    },
     isOpsFullScreen() {
-      return this.$route.name === 'cmdb_screen'
+      return ['cmdb_screen'].includes(this.$route.name)
     },
     isOpsOnlyTopMenu() {
-      return ['fullscreen_index', 'setting_person'].includes(this.$route.name)
+      return ['fullscreen_index', 'setting_person', 'notice_center'].includes(this.$route.name)
     },
   },
   created() {
+    this.SET_LOCALE(localStorage.getItem('ops_locale') || 'zh')
+    this.$i18n.locale = localStorage.getItem('ops_locale') || 'zh'
     this.timer = setInterval(() => {
       this.setTime(new Date().getTime())
     }, 1000)
@@ -184,6 +193,7 @@ export default {
   },
   methods: {
     ...mapActions(['setTime']),
+    ...mapMutations(['SET_LOCALE']),
     reload() {
       this.alive = false
       this.$nextTick(() => {
diff --git a/cmdb-ui/src/components/CMDBFilterComp/constants.js b/cmdb-ui/src/components/CMDBFilterComp/constants.js
index 3c92d68..90fbfa3 100644
--- a/cmdb-ui/src/components/CMDBFilterComp/constants.js
+++ b/cmdb-ui/src/components/CMDBFilterComp/constants.js
@@ -1,29 +1,37 @@
-export const ruleTypeList = [
-    { value: 'and', label: '与' },
-    { value: 'or', label: '或' },
-    // { value: 'not', label: '非' },
-]
+import i18n from '@/lang'
 
-export const expList = [
-    { value: 'is', label: '等于' },
-    { value: '~is', label: '不等于' },
-    { value: 'contain', label: '包含' },
-    { value: '~contain', label: '不包含' },
-    { value: 'start_with', label: '以...开始' },
-    { value: '~start_with', label: '不以...开始' },
-    { value: 'end_with', label: '以...结束' },
-    { value: '~end_with', label: '不以...结束' },
-    { value: '~value', label: '为空' }, // 为空的定义有点绕
-    { value: 'value', label: '不为空' },
-]
+export const ruleTypeList = () => {
+    return [
+        { value: 'and', label: i18n.t('cmdbFilterComp.and') },
+        { value: 'or', label: i18n.t('cmdbFilterComp.or') },
+        // { value: 'not', label: '非' },
+    ]
+}
 
-export const advancedExpList = [
-    { value: 'in', label: 'in查询' },
-    { value: '~in', label: '非in查询' },
-    { value: 'range', label: '范围' },
-    { value: '~range', label: '范围外' },
-    { value: 'compare', label: '比较' },
-]
+export const expList = () => {
+    return [
+        { value: 'is', label: i18n.t('cmdbFilterComp.is') },
+        { value: '~is', label: i18n.t('cmdbFilterComp.~is') },
+        { value: 'contain', label: i18n.t('cmdbFilterComp.contain') },
+        { value: '~contain', label: i18n.t('cmdbFilterComp.~contain') },
+        { value: 'start_with', label: i18n.t('cmdbFilterComp.start_with') },
+        { value: '~start_with', label: i18n.t('cmdbFilterComp.~start_with') },
+        { value: 'end_with', label: i18n.t('cmdbFilterComp.end_with') },
+        { value: '~end_with', label: i18n.t('cmdbFilterComp.~end_with') },
+        { value: '~value', label: i18n.t('cmdbFilterComp.~value') }, // 为空的定义有点绕
+        { value: 'value', label: i18n.t('cmdbFilterComp.value') },
+    ]
+}
+
+export const advancedExpList = () => {
+    return [
+        { value: 'in', label: i18n.t('cmdbFilterComp.in') },
+        { value: '~in', label: i18n.t('cmdbFilterComp.~in') },
+        { value: 'range', label: i18n.t('cmdbFilterComp.range') },
+        { value: '~range', label: i18n.t('cmdbFilterComp.~range') },
+        { value: 'compare', label: i18n.t('cmdbFilterComp.compare') },
+    ]
+}
 
 export const compareTypeList = [
     { value: '1', label: '>' },
diff --git a/cmdb-ui/src/components/CMDBFilterComp/expression.vue b/cmdb-ui/src/components/CMDBFilterComp/expression.vue
index f091476..28ccf37 100644
--- a/cmdb-ui/src/components/CMDBFilterComp/expression.vue
+++ b/cmdb-ui/src/components/CMDBFilterComp/expression.vue
@@ -1,293 +1,332 @@
-<template>
-  <div>
-    <a-space :style="{ display: 'flex', marginBottom: '10px' }" v-for="(item, index) in ruleList" :key="item.id">
-      <div :style="{ width: '50px', height: '24px', position: 'relative' }">
-        <treeselect
-          v-if="index"
-          class="custom-treeselect"
-          :style="{ width: '50px', '--custom-height': '24px', position: 'absolute', top: '-17px', left: 0 }"
-          v-model="item.type"
-          :multiple="false"
-          :clearable="false"
-          searchable
-          :options="ruleTypeList"
-          :normalizer="
-            (node) => {
-              return {
-                id: node.value,
-                label: node.label,
-                children: node.children,
-              }
-            }
-          "
-        >
-        </treeselect>
-      </div>
-      <treeselect
-        class="custom-treeselect"
-        :style="{ width: '130px', '--custom-height': '24px' }"
-        v-model="item.property"
-        :multiple="false"
-        :clearable="false"
-        searchable
-        :options="canSearchPreferenceAttrList"
-        :normalizer="
-          (node) => {
-            return {
-              id: node.name,
-              label: node.alias || node.name,
-              children: node.children,
-            }
-          }
-        "
-        appendToBody
-        :zIndex="1050"
-      >
-        <div
-          :title="node.label"
-          slot="option-label"
-          slot-scope="{ node }"
-          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-        >
-          <ValueTypeMapIcon :attr="node.raw" />
-          {{ node.label }}
-        </div>
-        <div
-          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-          slot="value-label"
-          slot-scope="{ node }"
-        >
-          <ValueTypeMapIcon :attr="node.raw" /> {{ node.label }}
-        </div>
-      </treeselect>
-      <treeselect
-        class="custom-treeselect"
-        :style="{ width: '100px', '--custom-height': '24px' }"
-        v-model="item.exp"
-        :multiple="false"
-        :clearable="false"
-        searchable
-        :options="[...getExpListByProperty(item.property), ...advancedExpList]"
-        :normalizer="
-          (node) => {
-            return {
-              id: node.value,
-              label: node.label,
-              children: node.children,
-            }
-          }
-        "
-        @select="(value) => handleChangeExp(value, item, index)"
-        appendToBody
-        :zIndex="1050"
-      >
-      </treeselect>
-      <treeselect
-        class="custom-treeselect"
-        :style="{ width: '175px', '--custom-height': '24px' }"
-        v-model="item.value"
-        :multiple="false"
-        :clearable="false"
-        searchable
-        v-if="isChoiceByProperty(item.property) && (item.exp === 'is' || item.exp === '~is')"
-        :options="getChoiceValueByProperty(item.property)"
-        placeholder="请选择"
-        :normalizer="
-          (node) => {
-            return {
-              id: node[0],
-              label: node[0],
-              children: node.children,
-            }
-          }
-        "
-        appendToBody
-        :zIndex="1050"
-      >
-        <div
-          :title="node.label"
-          slot="option-label"
-          slot-scope="{ node }"
-          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-        >
-          {{ node.label }}
-        </div>
-      </treeselect>
-      <a-input-group
-        size="small"
-        compact
-        v-else-if="item.exp === 'range' || item.exp === '~range'"
-        :style="{ width: '175px' }"
-      >
-        <a-input class="ops-input" size="small" v-model="item.min" :style="{ width: '78px' }" placeholder="最小值" />
-        ~
-        <a-input class="ops-input" size="small" v-model="item.max" :style="{ width: '78px' }" placeholder="最大值" />
-      </a-input-group>
-      <a-input-group size="small" compact v-else-if="item.exp === 'compare'" :style="{ width: '175px' }">
-        <treeselect
-          class="custom-treeselect"
-          :style="{ width: '60px', '--custom-height': '24px' }"
-          v-model="item.compareType"
-          :multiple="false"
-          :clearable="false"
-          searchable
-          :options="compareTypeList"
-          :normalizer="
-            (node) => {
-              return {
-                id: node.value,
-                label: node.label,
-                children: node.children,
-              }
-            }
-          "
-          appendToBody
-          :zIndex="1050"
-        >
-        </treeselect>
-        <a-input class="ops-input" v-model="item.value" size="small" style="width: 113px" />
-      </a-input-group>
-      <a-input
-        v-else-if="item.exp !== 'value' && item.exp !== '~value'"
-        size="small"
-        v-model="item.value"
-        :placeholder="item.exp === 'in' || item.exp === '~in' ? '以 ; 分隔' : ''"
-        class="ops-input"
-      ></a-input>
-      <div v-else :style="{ width: '175px' }"></div>
-      <a-tooltip title="复制">
-        <a class="operation" @click="handleCopyRule(item)"><ops-icon type="icon-xianxing-copy"/></a>
-      </a-tooltip>
-      <a-tooltip title="删除">
-        <a class="operation" @click="handleDeleteRule(item)"><ops-icon type="icon-xianxing-delete"/></a>
-      </a-tooltip>
-    </a-space>
-    <div class="table-filter-add">
-      <a @click="handleAddRule">+ 新增</a>
-    </div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import { v4 as uuidv4 } from 'uuid'
-import { ruleTypeList, expList, advancedExpList, compareTypeList } from './constants'
-import ValueTypeMapIcon from '../CMDBValueTypeMapIcon'
-
-export default {
-  name: 'Expression',
-  components: { ValueTypeMapIcon },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    canSearchPreferenceAttrList: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      ruleTypeList,
-      expList,
-      advancedExpList,
-      compareTypeList,
-    }
-  },
-  computed: {
-    ruleList: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('change', val)
-        return val
-      },
-    },
-  },
-  methods: {
-    getExpListByProperty(property) {
-      if (property) {
-        const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
-        if (_find && ['0', '1', '3', '4', '5'].includes(_find.value_type)) {
-          return [
-            { value: 'is', label: '等于' },
-            { value: '~is', label: '不等于' },
-            { value: '~value', label: '为空' }, // 为空的定义有点绕
-            { value: 'value', label: '不为空' },
-          ]
-        }
-        return this.expList
-      }
-      return this.expList
-    },
-    isChoiceByProperty(property) {
-      const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
-      if (_find) {
-        return _find.is_choice
-      }
-      return false
-    },
-    handleAddRule() {
-      this.ruleList.push({
-        id: uuidv4(),
-        type: 'and',
-        property: this.canSearchPreferenceAttrList[0]?.name,
-        exp: 'is',
-        value: null,
-      })
-      this.$emit('change', this.ruleList)
-    },
-    handleCopyRule(item) {
-      this.ruleList.push({ ...item, id: uuidv4() })
-      this.$emit('change', this.ruleList)
-    },
-    handleDeleteRule(item) {
-      const idx = this.ruleList.findIndex((r) => r.id === item.id)
-      if (idx > -1) {
-        this.ruleList.splice(idx, 1)
-      }
-      this.$emit('change', this.ruleList)
-    },
-    getChoiceValueByProperty(property) {
-      const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
-      if (_find) {
-        return _find.choice_value
-      }
-      return []
-    },
-    handleChangeExp({ value }, item, index) {
-      const _ruleList = _.cloneDeep(this.ruleList)
-      if (value === 'range') {
-        _ruleList[index] = {
-          ..._ruleList[index],
-          min: '',
-          max: '',
-          exp: value,
-        }
-      } else if (value === 'compare') {
-        _ruleList[index] = {
-          ..._ruleList[index],
-          compareType: '1',
-          exp: value,
-        }
-      } else {
-        _ruleList[index] = {
-          ..._ruleList[index],
-          exp: value,
-        }
-      }
-      this.ruleList = _ruleList
-      this.$emit('change', this.ruleList)
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <div>
+    <a-space :style="{ display: 'flex', marginBottom: '10px' }" v-for="(item, index) in ruleList" :key="item.id">
+      <div :style="{ width: '70px', height: '24px', position: 'relative' }">
+        <treeselect
+          v-if="index"
+          class="custom-treeselect"
+          :style="{ width: '70px', '--custom-height': '24px', position: 'absolute', top: '-17px', left: 0 }"
+          v-model="item.type"
+          :multiple="false"
+          :clearable="false"
+          searchable
+          :options="ruleTypeList"
+          :normalizer="
+            (node) => {
+              return {
+                id: node.value,
+                label: node.label,
+                children: node.children,
+              }
+            }
+          "
+        >
+        </treeselect>
+      </div>
+      <treeselect
+        class="custom-treeselect"
+        :style="{ width: '130px', '--custom-height': '24px' }"
+        v-model="item.property"
+        :multiple="false"
+        :clearable="false"
+        searchable
+        :options="canSearchPreferenceAttrList"
+        :normalizer="
+          (node) => {
+            return {
+              id: node.name,
+              label: node.alias || node.name,
+              children: node.children,
+            }
+          }
+        "
+        appendToBody
+        :zIndex="1050"
+      >
+        <div
+          :title="node.label"
+          slot="option-label"
+          slot-scope="{ node }"
+          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+        >
+          <ValueTypeMapIcon :attr="node.raw" />
+          {{ node.label }}
+        </div>
+        <div
+          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+          slot="value-label"
+          slot-scope="{ node }"
+        >
+          <ValueTypeMapIcon :attr="node.raw" /> {{ node.label }}
+        </div>
+      </treeselect>
+      <treeselect
+        class="custom-treeselect"
+        :style="{ width: '100px', '--custom-height': '24px' }"
+        v-model="item.exp"
+        :multiple="false"
+        :clearable="false"
+        searchable
+        :options="[...getExpListByProperty(item.property), ...advancedExpList]"
+        :normalizer="
+          (node) => {
+            return {
+              id: node.value,
+              label: node.label,
+              children: node.children,
+            }
+          }
+        "
+        @select="(value) => handleChangeExp(value, item, index)"
+        appendToBody
+        :zIndex="1050"
+      >
+      </treeselect>
+      <treeselect
+        class="custom-treeselect"
+        :style="{ width: '175px', '--custom-height': '24px' }"
+        v-model="item.value"
+        :multiple="false"
+        :clearable="false"
+        searchable
+        v-if="isChoiceByProperty(item.property) && (item.exp === 'is' || item.exp === '~is')"
+        :options="getChoiceValueByProperty(item.property)"
+        :placeholder="$t('placeholder2')"
+        :normalizer="
+          (node) => {
+            return {
+              id: node[0],
+              label: node[0],
+              children: node.children,
+            }
+          }
+        "
+        appendToBody
+        :zIndex="1050"
+      >
+        <div
+          :title="node.label"
+          slot="option-label"
+          slot-scope="{ node }"
+          :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+        >
+          {{ node.label }}
+        </div>
+      </treeselect>
+      <a-input-group
+        size="small"
+        compact
+        v-else-if="item.exp === 'range' || item.exp === '~range'"
+        :style="{ width: '175px' }"
+      >
+        <a-input
+          class="ops-input"
+          size="small"
+          v-model="item.min"
+          :style="{ width: '78px' }"
+          :placeholder="$t('min')"
+        />
+        ~
+        <a-input
+          class="ops-input"
+          size="small"
+          v-model="item.max"
+          :style="{ width: '78px' }"
+          :placeholder="$t('max')"
+        />
+      </a-input-group>
+      <a-input-group size="small" compact v-else-if="item.exp === 'compare'" :style="{ width: '175px' }">
+        <treeselect
+          class="custom-treeselect"
+          :style="{ width: '60px', '--custom-height': '24px' }"
+          v-model="item.compareType"
+          :multiple="false"
+          :clearable="false"
+          searchable
+          :options="compareTypeList"
+          :normalizer="
+            (node) => {
+              return {
+                id: node.value,
+                label: node.label,
+                children: node.children,
+              }
+            }
+          "
+          appendToBody
+          :zIndex="1050"
+        >
+        </treeselect>
+        <a-input class="ops-input" v-model="item.value" size="small" style="width: 113px" />
+      </a-input-group>
+      <a-input
+        v-else-if="item.exp !== 'value' && item.exp !== '~value'"
+        size="small"
+        v-model="item.value"
+        :placeholder="item.exp === 'in' || item.exp === '~in' ? $t('cmdbFilterComp.split', { separator: ';' }) : ''"
+        class="ops-input"
+        :style="{ width: '175px' }"
+      ></a-input>
+      <div v-else :style="{ width: '175px' }"></div>
+      <a-tooltip :title="$t('copy')">
+        <a class="operation" @click="handleCopyRule(item)"><ops-icon type="icon-xianxing-copy"/></a>
+      </a-tooltip>
+      <a-tooltip :title="$t('delete')">
+        <a class="operation" @click="handleDeleteRule(item)"><ops-icon type="icon-xianxing-delete"/></a>
+      </a-tooltip>
+      <a-tooltip :title="$t('cmdbFilterComp.addHere')" :needAddHere="needAddHere">
+        <a class="operation" @click="handleAddRuleAt(item)"><a-icon type="plus-circle"/></a>
+      </a-tooltip>
+    </a-space>
+    <div class="table-filter-add">
+      <a @click="handleAddRule">+ {{ $t('new') }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
+import { ruleTypeList, expList, advancedExpList, compareTypeList } from './constants'
+import ValueTypeMapIcon from '../CMDBValueTypeMapIcon'
+
+export default {
+  name: 'Expression',
+  components: { ValueTypeMapIcon },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    canSearchPreferenceAttrList: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    needAddHere: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      compareTypeList,
+    }
+  },
+  computed: {
+    ruleList: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('change', val)
+        return val
+      },
+    },
+    ruleTypeList() {
+      return ruleTypeList()
+    },
+    expList() {
+      return expList()
+    },
+    advancedExpList() {
+      return advancedExpList()
+    },
+  },
+  methods: {
+    getExpListByProperty(property) {
+      if (property) {
+        const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
+        if (_find && ['0', '1', '3', '4', '5'].includes(_find.value_type)) {
+          return [
+            { value: 'is', label: this.$t('cmdbFilterComp.is') },
+            { value: '~is', label: this.$t('cmdbFilterComp.~is') },
+            { value: '~value', label: this.$t('cmdbFilterComp.~value') }, // 为空的定义有点绕
+            { value: 'value', label: this.$t('cmdbFilterComp.value') },
+          ]
+        }
+        return this.expList
+      }
+      return this.expList
+    },
+    isChoiceByProperty(property) {
+      const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
+      if (_find) {
+        return _find.is_choice
+      }
+      return false
+    },
+    handleAddRule() {
+      this.ruleList.push({
+        id: uuidv4(),
+        type: 'and',
+        property: this.canSearchPreferenceAttrList[0]?.name,
+        exp: 'is',
+        value: null,
+      })
+      this.$emit('change', this.ruleList)
+    },
+    handleCopyRule(item) {
+      this.ruleList.push({ ...item, id: uuidv4() })
+      this.$emit('change', this.ruleList)
+    },
+    handleDeleteRule(item) {
+      const idx = this.ruleList.findIndex((r) => r.id === item.id)
+      if (idx > -1) {
+        this.ruleList.splice(idx, 1)
+      }
+      this.$emit('change', this.ruleList)
+    },
+    handleAddRuleAt(item) {
+      const idx = this.ruleList.findIndex((r) => r.id === item.id)
+      if (idx > -1) {
+        this.ruleList.splice(idx, 0, {
+          id: uuidv4(),
+          type: 'and',
+          property: this.canSearchPreferenceAttrList[0]?.name,
+          exp: 'is',
+          value: null,
+        })
+      }
+      this.$emit('change', this.ruleList)
+    },
+    getChoiceValueByProperty(property) {
+      const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
+      if (_find) {
+        return _find.choice_value
+      }
+      return []
+    },
+    handleChangeExp({ value }, item, index) {
+      const _ruleList = _.cloneDeep(this.ruleList)
+      if (value === 'range') {
+        _ruleList[index] = {
+          ..._ruleList[index],
+          min: '',
+          max: '',
+          exp: value,
+        }
+      } else if (value === 'compare') {
+        _ruleList[index] = {
+          ..._ruleList[index],
+          compareType: '1',
+          exp: value,
+        }
+      } else {
+        _ruleList[index] = {
+          ..._ruleList[index],
+          exp: value,
+        }
+      }
+      this.ruleList = _ruleList
+      this.$emit('change', this.ruleList)
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/components/CMDBFilterComp/index.vue b/cmdb-ui/src/components/CMDBFilterComp/index.vue
index 05f171f..acd28a9 100644
--- a/cmdb-ui/src/components/CMDBFilterComp/index.vue
+++ b/cmdb-ui/src/components/CMDBFilterComp/index.vue
@@ -1,290 +1,296 @@
-<template>
-  <div>
-    <a-popover
-      v-if="isDropdown"
-      v-model="visible"
-      trigger="click"
-      :placement="placement"
-      overlayClassName="table-filter"
-      @visibleChange="visibleChange"
-    >
-      <slot name="popover_item">
-        <a-button type="primary" ghost>条件过滤<a-icon type="filter"/></a-button>
-      </slot>
-      <template slot="content">
-        <Expression
-          v-model="ruleList"
-          :canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
-        />
-        <a-divider :style="{ margin: '10px 0' }" />
-        <div style="width:534px">
-          <a-space :style="{ display: 'flex', justifyContent: 'flex-end' }">
-            <a-button type="primary" size="small" @click="handleSubmit">确定</a-button>
-            <a-button size="small" @click="handleClear">清空</a-button>
-          </a-space>
-        </div>
-      </template>
-    </a-popover>
-    <Expression
-      v-else
-      v-model="ruleList"
-      :canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
-    />
-  </div>
-</template>
-
-<script>
-import { v4 as uuidv4 } from 'uuid'
-import Expression from './expression.vue'
-import { advancedExpList, compareTypeList } from './constants'
-
-export default {
-  name: 'FilterComp',
-  components: { Expression },
-  props: {
-    canSearchPreferenceAttrList: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    expression: {
-      type: String,
-      default: '',
-    },
-    regQ: {
-      type: String,
-      default: '(?<=q=).+(?=&)|(?<=q=).+$',
-    },
-    placement: {
-      type: String,
-      default: 'bottomRight',
-    },
-    isDropdown: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      advancedExpList,
-      compareTypeList,
-      visible: false,
-      ruleList: [],
-      filterExp: '',
-    }
-  },
-
-  methods: {
-    visibleChange(open, isInitOne = true) {
-      // isInitOne  初始化exp为空时，ruleList是否默认给一条
-      //   const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-      const exp = this.expression.match(new RegExp(this.regQ, 'g'))
-        ? this.expression.match(new RegExp(this.regQ, 'g'))[0]
-        : null
-      if (open && exp) {
-        const expArray = exp.split(',').map((item) => {
-          let has_not = ''
-          const key = item.split(':')[0]
-          const val = item
-            .split(':')
-            .slice(1)
-            .join(':')
-          let type, property, exp, value, min, max, compareType
-          if (key.includes('-')) {
-            type = 'or'
-            if (key.includes('~')) {
-              property = key.substring(2)
-              has_not = '~'
-            } else {
-              property = key.substring(1)
-            }
-          } else {
-            type = 'and'
-            if (key.includes('~')) {
-              property = key.substring(1)
-              has_not = '~'
-            } else {
-              property = key
-            }
-          }
-
-          const in_reg = /(?<=\().+(?=\))/g
-          const range_reg = /(?<=\[).+(?=\])/g
-          const compare_reg = /(?<=>=|<=|>(?!=)|<(?!=)).+/
-          if (val === '*') {
-            exp = has_not + 'value'
-            value = ''
-          } else if (in_reg.test(val)) {
-            exp = has_not + 'in'
-            value = val.match(in_reg)[0]
-          } else if (range_reg.test(val)) {
-            exp = has_not + 'range'
-            value = val.match(range_reg)[0]
-            min = value.split('_TO_')[0]
-            max = value.split('_TO_')[1]
-          } else if (compare_reg.test(val)) {
-            exp = has_not + 'compare'
-            value = val.match(compare_reg)[0]
-            const _compareType = val.substring(0, val.match(compare_reg)['index'])
-            const idx = compareTypeList.findIndex((item) => item.label === _compareType)
-            compareType = compareTypeList[idx].value
-          } else if (!val.includes('*')) {
-            exp = has_not + 'is'
-            value = val
-          } else {
-            const resList = [
-              ['contain', /(?<=\*).*(?=\*)/g],
-              ['end_with', /(?<=\*).+/g],
-              ['start_with', /.+(?=\*)/g],
-            ]
-            for (let i = 0; i < 3; i++) {
-              const reg = resList[i]
-              if (reg[1].test(val)) {
-                exp = has_not + reg[0]
-                value = val.match(reg[1])[0]
-                break
-              }
-            }
-          }
-          return {
-            id: uuidv4(),
-            type,
-            property,
-            exp,
-            value,
-            min,
-            max,
-            compareType,
-          }
-        })
-        this.ruleList = [...expArray]
-      } else if (open) {
-        const _canSearchPreferenceAttrList = this.canSearchPreferenceAttrList.filter((attr) => !attr.is_password)
-        this.ruleList = isInitOne
-          ? [
-              {
-                id: uuidv4(),
-                type: 'and',
-                property:
-                  _canSearchPreferenceAttrList && _canSearchPreferenceAttrList.length
-                    ? _canSearchPreferenceAttrList[0].name
-                    : undefined,
-                exp: 'is',
-                value: null,
-              },
-            ]
-          : []
-      }
-    },
-    handleClear() {
-      this.ruleList = [
-        {
-          id: uuidv4(),
-          type: 'and',
-          property: this.canSearchPreferenceAttrList[0].name,
-          exp: 'is',
-          value: null,
-        },
-      ]
-      this.filterExp = ''
-      this.visible = false
-      this.$emit('setExpFromFilter', this.filterExp)
-    },
-    handleSubmit() {
-      if (this.ruleList && this.ruleList.length) {
-        this.ruleList[0].type = 'and' // 增删后，以防万一第一个不是and
-        this.filterExp = ''
-        const expList = this.ruleList.map((rule) => {
-          let singleRuleExp = ''
-          let _exp = rule.exp
-          if (rule.type === 'or') {
-            singleRuleExp += '-'
-          }
-          if (rule.exp.includes('~')) {
-            singleRuleExp += '~'
-            _exp = rule.exp.split('~')[1]
-          }
-          singleRuleExp += `${rule.property}:`
-          if (_exp === 'is') {
-            singleRuleExp += `${rule.value ?? ''}`
-          }
-          if (_exp === 'contain') {
-            singleRuleExp += `*${rule.value ?? ''}*`
-          }
-          if (_exp === 'start_with') {
-            singleRuleExp += `${rule.value ?? ''}*`
-          }
-          if (_exp === 'end_with') {
-            singleRuleExp += `*${rule.value ?? ''}`
-          }
-          if (_exp === 'value') {
-            singleRuleExp += `*`
-          }
-          if (_exp === 'in') {
-            singleRuleExp += `(${rule.value ?? ''})`
-          }
-          if (_exp === 'range') {
-            singleRuleExp += `[${rule.min}_TO_${rule.max}]`
-          }
-          if (_exp === 'compare') {
-            const idx = compareTypeList.findIndex((item) => item.value === rule.compareType)
-            singleRuleExp += `${compareTypeList[idx].label}${rule.value ?? ''}`
-          }
-          return singleRuleExp
-        })
-        this.filterExp = expList.join(',')
-        this.$emit('setExpFromFilter', this.filterExp)
-      } else {
-        this.$emit('setExpFromFilter', '')
-      }
-      this.visible = false
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.table-filter {
-  .table-filter-add {
-    margin-top: 10px;
-    & > a {
-      padding: 2px 8px;
-      &:hover {
-        background-color: #f0faff;
-        border-radius: 5px;
-      }
-    }
-  }
-  .table-filter-extra-icon {
-    padding: 0px 2px;
-    &:hover {
-      display: inline-block;
-      border-radius: 5px;
-      background-color: #f0faff;
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.table-filter-extra-operation {
-  .ant-popover-inner-content {
-    padding: 3px 4px;
-    .operation {
-      cursor: pointer;
-      width: 90px;
-      height: 30px;
-      line-height: 30px;
-      padding: 3px 4px;
-      border-radius: 5px;
-      transition: all 0.3s;
-      &:hover {
-        background-color: #f0faff;
-      }
-      > .anticon {
-        margin-right: 10px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <a-popover
+      v-if="isDropdown"
+      v-model="visible"
+      trigger="click"
+      :placement="placement"
+      overlayClassName="table-filter"
+      @visibleChange="visibleChange"
+    >
+      <slot name="popover_item">
+        <a-button type="primary" ghost>{{ $t('cmdbFilterComp.conditionFilter') }}<a-icon type="filter"/></a-button>
+      </slot>
+      <template slot="content">
+        <Expression
+          :needAddHere="needAddHere"
+          v-model="ruleList"
+          :canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
+        />
+        <a-divider :style="{ margin: '10px 0' }" />
+        <div style="width:554px">
+          <a-space :style="{ display: 'flex', justifyContent: 'flex-end' }">
+            <a-button type="primary" size="small" @click="handleSubmit">{{ $t('confirm') }}</a-button>
+            <a-button size="small" @click="handleClear">{{ $t('clear') }}</a-button>
+          </a-space>
+        </div>
+      </template>
+    </a-popover>
+    <Expression
+      :needAddHere="needAddHere"
+      v-else
+      v-model="ruleList"
+      :canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
+    />
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import Expression from './expression.vue'
+import { advancedExpList, compareTypeList } from './constants'
+
+export default {
+  name: 'FilterComp',
+  components: { Expression },
+  props: {
+    canSearchPreferenceAttrList: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    expression: {
+      type: String,
+      default: '',
+    },
+    regQ: {
+      type: String,
+      default: '(?<=q=).+(?=&)|(?<=q=).+$',
+    },
+    placement: {
+      type: String,
+      default: 'bottomRight',
+    },
+    isDropdown: {
+      type: Boolean,
+      default: true,
+    },
+    needAddHere: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      advancedExpList,
+      compareTypeList,
+      visible: false,
+      ruleList: [],
+      filterExp: '',
+    }
+  },
+
+  methods: {
+    visibleChange(open, isInitOne = true) {
+      // isInitOne  初始化exp为空时，ruleList是否默认给一条
+      //   const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+      const exp = this.expression.match(new RegExp(this.regQ, 'g'))
+        ? this.expression.match(new RegExp(this.regQ, 'g'))[0]
+        : null
+      if (open && exp) {
+        const expArray = exp.split(',').map((item) => {
+          let has_not = ''
+          const key = item.split(':')[0]
+          const val = item
+            .split(':')
+            .slice(1)
+            .join(':')
+          let type, property, exp, value, min, max, compareType
+          if (key.includes('-')) {
+            type = 'or'
+            if (key.includes('~')) {
+              property = key.substring(2)
+              has_not = '~'
+            } else {
+              property = key.substring(1)
+            }
+          } else {
+            type = 'and'
+            if (key.includes('~')) {
+              property = key.substring(1)
+              has_not = '~'
+            } else {
+              property = key
+            }
+          }
+
+          const in_reg = /(?<=\().+(?=\))/g
+          const range_reg = /(?<=\[).+(?=\])/g
+          const compare_reg = /(?<=>=|<=|>(?!=)|<(?!=)).+/
+          if (val === '*') {
+            exp = has_not + 'value'
+            value = ''
+          } else if (in_reg.test(val)) {
+            exp = has_not + 'in'
+            value = val.match(in_reg)[0]
+          } else if (range_reg.test(val)) {
+            exp = has_not + 'range'
+            value = val.match(range_reg)[0]
+            min = value.split('_TO_')[0]
+            max = value.split('_TO_')[1]
+          } else if (compare_reg.test(val)) {
+            exp = has_not + 'compare'
+            value = val.match(compare_reg)[0]
+            const _compareType = val.substring(0, val.match(compare_reg)['index'])
+            const idx = compareTypeList.findIndex((item) => item.label === _compareType)
+            compareType = compareTypeList[idx].value
+          } else if (!val.includes('*')) {
+            exp = has_not + 'is'
+            value = val
+          } else {
+            const resList = [
+              ['contain', /(?<=\*).*(?=\*)/g],
+              ['end_with', /(?<=\*).+/g],
+              ['start_with', /.+(?=\*)/g],
+            ]
+            for (let i = 0; i < 3; i++) {
+              const reg = resList[i]
+              if (reg[1].test(val)) {
+                exp = has_not + reg[0]
+                value = val.match(reg[1])[0]
+                break
+              }
+            }
+          }
+          return {
+            id: uuidv4(),
+            type,
+            property,
+            exp,
+            value,
+            min,
+            max,
+            compareType,
+          }
+        })
+        this.ruleList = [...expArray]
+      } else if (open) {
+        const _canSearchPreferenceAttrList = this.canSearchPreferenceAttrList.filter((attr) => !attr.is_password)
+        this.ruleList = isInitOne
+          ? [
+              {
+                id: uuidv4(),
+                type: 'and',
+                property:
+                  _canSearchPreferenceAttrList && _canSearchPreferenceAttrList.length
+                    ? _canSearchPreferenceAttrList[0].name
+                    : undefined,
+                exp: 'is',
+                value: null,
+              },
+            ]
+          : []
+      }
+    },
+    handleClear() {
+      this.ruleList = [
+        {
+          id: uuidv4(),
+          type: 'and',
+          property: this.canSearchPreferenceAttrList[0].name,
+          exp: 'is',
+          value: null,
+        },
+      ]
+      this.filterExp = ''
+      this.visible = false
+      this.$emit('setExpFromFilter', this.filterExp)
+    },
+    handleSubmit() {
+      if (this.ruleList && this.ruleList.length) {
+        this.ruleList[0].type = 'and' // 增删后，以防万一第一个不是and
+        this.filterExp = ''
+        const expList = this.ruleList.map((rule) => {
+          let singleRuleExp = ''
+          let _exp = rule.exp
+          if (rule.type === 'or') {
+            singleRuleExp += '-'
+          }
+          if (rule.exp.includes('~')) {
+            singleRuleExp += '~'
+            _exp = rule.exp.split('~')[1]
+          }
+          singleRuleExp += `${rule.property}:`
+          if (_exp === 'is') {
+            singleRuleExp += `${rule.value ?? ''}`
+          }
+          if (_exp === 'contain') {
+            singleRuleExp += `*${rule.value ?? ''}*`
+          }
+          if (_exp === 'start_with') {
+            singleRuleExp += `${rule.value ?? ''}*`
+          }
+          if (_exp === 'end_with') {
+            singleRuleExp += `*${rule.value ?? ''}`
+          }
+          if (_exp === 'value') {
+            singleRuleExp += `*`
+          }
+          if (_exp === 'in') {
+            singleRuleExp += `(${rule.value ?? ''})`
+          }
+          if (_exp === 'range') {
+            singleRuleExp += `[${rule.min}_TO_${rule.max}]`
+          }
+          if (_exp === 'compare') {
+            const idx = compareTypeList.findIndex((item) => item.value === rule.compareType)
+            singleRuleExp += `${compareTypeList[idx].label}${rule.value ?? ''}`
+          }
+          return singleRuleExp
+        })
+        this.filterExp = expList.join(',')
+        this.$emit('setExpFromFilter', this.filterExp)
+      } else {
+        this.$emit('setExpFromFilter', '')
+      }
+      this.visible = false
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.table-filter {
+  .table-filter-add {
+    margin-top: 10px;
+    & > a {
+      padding: 2px 8px;
+      &:hover {
+        background-color: #f0faff;
+        border-radius: 5px;
+      }
+    }
+  }
+  .table-filter-extra-icon {
+    padding: 0px 2px;
+    &:hover {
+      display: inline-block;
+      border-radius: 5px;
+      background-color: #f0faff;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.table-filter-extra-operation {
+  .ant-popover-inner-content {
+    padding: 3px 4px;
+    .operation {
+      cursor: pointer;
+      width: 90px;
+      height: 30px;
+      line-height: 30px;
+      padding: 3px 4px;
+      border-radius: 5px;
+      transition: all 0.3s;
+      &:hover {
+        background-color: #f0faff;
+      }
+      > .anticon {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/components/CustomIconSelect/constants.js b/cmdb-ui/src/components/CustomIconSelect/constants.js
index 587436f..cb49c52 100644
--- a/cmdb-ui/src/components/CustomIconSelect/constants.js
+++ b/cmdb-ui/src/components/CustomIconSelect/constants.js
@@ -1,8 +1,10 @@
-export const iconTypeList = [
+import i18n from '@/lang'
+
+export const iconTypeList = () => [
   // { value: '0', label: '常用' },
-  { value: '1', label: '线性' },
-  { value: '2', label: '实底' },
-  { value: '3', label: '多色' }
+  { value: '1', label: i18n.t('customIconSelect.outlined') },
+  { value: '2', label: i18n.t('customIconSelect.filled') },
+  { value: '3', label: i18n.t('customIconSelect.multicolor') }
 ]
 
 export const commonIconList = ['changyong-ubuntu',
diff --git a/cmdb-ui/src/components/CustomIconSelect/index.vue b/cmdb-ui/src/components/CustomIconSelect/index.vue
index dceaa8f..b056614 100644
--- a/cmdb-ui/src/components/CustomIconSelect/index.vue
+++ b/cmdb-ui/src/components/CustomIconSelect/index.vue
@@ -16,7 +16,7 @@
           {{ item.label }}
         </div>
         <div :class="`${currentIconType === '4' ? 'selected' : ''}`" @click="handleChangeIconType('4')">
-          自定义
+          {{ this.$t('customIconSelect.custom') }}
         </div>
         <a-upload
           slot="description"
@@ -26,7 +26,7 @@
           accept=".svg,.png,.jpg,.jpeg"
           v-if="currentIconType === '4'"
         >
-          <a-button icon="plus" size="small" type="primary">添加</a-button>
+          <a-button icon="plus" size="small" type="primary">{{ $t('add') }}</a-button>
         </a-upload>
       </div>
       <div class="custom-icon-select-popover-content">
@@ -55,11 +55,11 @@
               @click="clickCustomIcon(icon)"
             >
               <div class="custom-icon-select-popover-content-img-box">
-                <img :src="`/api/common-setting/v1/file/${icon.data.url}`" />
+                <img v-if="icon.data && icon.data.url" :src="`/api/common-setting/v1/file/${icon.data.url}`" />
                 <a-popconfirm
                   overlayClassName="custom-icon-select-confirm-popover"
                   :getPopupContainer="(trigger) => trigger.parentNode"
-                  title="确认删除？"
+                  :title="$t('confirmDelete')"
                   @confirm="(e) => deleteIcon(e, icon)"
                   @cancel="
                     (e) => {
@@ -102,27 +102,27 @@
       </template>
       <a-form class="custom-icon-select-form" :form="form" v-show="currentIconType === '4' && formVisible">
         <a-form-item
-          label="名称"
+          :label="$t('name')"
           :labelCol="{ span: 4 }"
           :wrapperCol="{ span: 16 }"
         ><a-input
-          v-decorator="['name', { rules: [{ required: true, message: '请输入名称' }] }]"
+          v-decorator="['name', { rules: [{ required: true, message: $t('placeholder1') }] }]"
         /></a-form-item>
-        <a-form-item label="预览" :labelCol="{ span: 4 }">
+        <a-form-item :label="$t('customIconSelect.preview')" :labelCol="{ span: 4 }">
           <div class="custom-icon-select-form-img">
             <img :src="formImg" />
           </div>
         </a-form-item>
         <a-form-item label=" " :colon="false" :labelCol="{ span: 16 }">
           <a-space>
-            <a-button size="small" @click="handleCancel">取消</a-button>
-            <a-button size="small" type="primary" @click="handleOk">确定</a-button>
+            <a-button size="small" @click="handleCancel">{{ $t('cancel') }}</a-button>
+            <a-button size="small" type="primary" @click="handleOk">{{ $t('confirm') }}</a-button>
           </a-space>
         </a-form-item>
       </a-form>
     </div>
 
-    <div class="custom-icon-select-block" id="custom-icon-select-block" @click="showSelect">
+    <div class="custom-icon-select-block" :id="`custom-icon-select-block-${uuid}`" @click="showSelect">
       <img v-if="value.id && value.url" :src="`/api/common-setting/v1/file/${value.url}`" />
       <ops-icon
         v-else
@@ -134,6 +134,7 @@
 </template>
 
 <script>
+import { v4 as uuidv4 } from 'uuid'
 import { ColorPicker } from 'element-ui'
 import {
   iconTypeList,
@@ -166,7 +167,6 @@ export default {
   data() {
     return {
       form: this.$form.createForm(this),
-      iconTypeList,
       commonIconList,
       linearIconList,
       fillIconList,
@@ -177,6 +177,7 @@ export default {
       formVisible: false,
       formImg: null,
       file: null,
+      uuid: uuidv4(),
     }
   },
   computed: {
@@ -200,6 +201,9 @@ export default {
       const splitFileName = this.file.name.split('.')
       return splitFileName.splice(0, splitFileName.length - 1).join('')
     },
+    iconTypeList() {
+      return iconTypeList()
+    },
   },
   mounted() {
     document.addEventListener('click', this.eventListener)
@@ -217,7 +221,7 @@ export default {
     eventListener(e) {
       if (this.visible) {
         const dom = document.getElementById(`custom-icon-select-popover`)
-        const dom_icon = document.getElementById(`custom-icon-select-block`)
+        const dom_icon = document.getElementById(`custom-icon-select-block-${this.uuid}`)
         e.stopPropagation()
         e.preventDefault()
         if (dom) {
@@ -249,12 +253,11 @@ export default {
           color: '',
         })
       } else {
-        this.$emit('change', { name: icon.data.name, id: icon.id, url: icon.data.url })
+        this.$emit('change', { name: icon.data.name, id: icon.id, url: icon?.data?.url })
       }
     },
     showSelect() {
       this.visible = true
-      console.log(this.value)
       if (!this.value.name) {
         this.currentIconType = '3'
         return
@@ -278,7 +281,7 @@ export default {
     beforeUpload(file) {
       const isLt2M = file.size / 1024 / 1024 < 2
       if (!isLt2M) {
-        this.$message.error('图片大小不可超过2MB!')
+        this.$message.error(this.$t('customIconSelect.sizeLimit'))
         return false
       }
 
@@ -306,7 +309,7 @@ export default {
         this.form.validateFields((err, values) => {
           if (!err) {
             addFileData('ops-custom-icon', { data: { name: values.name, url: res.file_name } }).then(() => {
-              this.$message.success('上传成功！')
+              this.$message.success(this.$t('uploadSuccess'))
               this.handleCancel()
               this.getFileData()
             })
@@ -318,7 +321,7 @@ export default {
       e.stopPropagation()
       e.preventDefault()
       deleteFileData('ops-custom-icon', icon.id).then(() => {
-        this.$message.success('删除成功！')
+        this.$message.success(this.$t('deleteSuccess'))
         this.handleCancel()
         this.getFileData()
       })
diff --git a/cmdb-ui/src/components/EmployeeTransfer/index.vue b/cmdb-ui/src/components/EmployeeTransfer/index.vue
index bdc8742..c09580f 100644
--- a/cmdb-ui/src/components/EmployeeTransfer/index.vue
+++ b/cmdb-ui/src/components/EmployeeTransfer/index.vue
@@ -6,17 +6,17 @@
         :flat="true"
         :multiple="true"
         :options="employeeTreeSelectOption"
-        placeholder="请输入搜索内容"
+        :placeholder="$t('placeholderSearch')"
         v-model="treeValue"
         :max-height="height - 50"
         noChildrenText="空"
         noOptionsText="空"
         :clearable="false"
         :always-open="true"
-        :default-expand-level="1"
+        :default-expand-level="showInternship ? 0 : 1"
         :class="{ 'employee-transfer': true, 'employee-transfer-has-input': !!inputValue }"
         @search-change="changeInputValue"
-        noResultsText="暂无数据"
+        :noResultsText="$t('noData')"
         openDirection="below"
       >
       </treeselect>
@@ -85,6 +85,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showInternship: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -99,13 +103,22 @@ export default {
   },
   computed: {
     employeeTreeSelectOption() {
-      return formatOption(
+      const formatOptions = formatOption(
         this.allTreeDepAndEmp,
         2,
         this.isDisabledAllCompany,
         this.uniqueKey || 'department_id',
         this.uniqueKey || 'employee_id'
       )
+      if (this.showInternship) {
+        formatOptions.push(
+          ...[
+            { id: -2, label: '全职' },
+            { id: -3, label: '实习生' },
+          ]
+        )
+      }
+      return formatOptions
     },
     allTreeDepAndEmp() {
       if (this.getDataBySelf) {
@@ -148,11 +161,15 @@ export default {
       const department = []
       const user = []
       this.rightData.forEach((item) => {
-        const _split = item.split('-')
-        if (_split[0] === 'department') {
-          department.push(Number(_split[1]))
+        if (item === -2 || item === -3) {
+          department.push(item)
         } else {
-          user.push(Number(_split[1]))
+          const _split = item.split('-')
+          if (_split[0] === 'department') {
+            department.push(Number(_split[1]))
+          } else {
+            user.push(Number(_split[1]))
+          }
         }
       })
       const _idx = department.findIndex((item) => item === 0)
@@ -191,6 +208,12 @@ export default {
       }
     },
     getLabel(id) {
+      if (id === -2) {
+        return '全职'
+      }
+      if (id === -3) {
+        return '实习生'
+      }
       const _split = id.split('-')
       const type = _split[0]
       const _id = Number(_split[1])
diff --git a/cmdb-ui/src/components/Menu/menu.js b/cmdb-ui/src/components/Menu/menu.js
index b2b8a66..2efc86b 100644
--- a/cmdb-ui/src/components/Menu/menu.js
+++ b/cmdb-ui/src/components/Menu/menu.js
@@ -161,6 +161,9 @@ export default {
       }
       return null
     },
+    renderI18n(title) {
+      return this.$t(`${title}`)
+    },
     renderMenuItem(menu) {
       const isShowDot = menu.path.substr(0, 22) === '/cmdb/instances/types/'
       const isShowGrant = menu.path.substr(0, 20) === '/cmdb/relationviews/'
@@ -183,7 +186,7 @@ export default {
           <tag {...{ props, attrs }}>
             {this.renderIcon({ icon: menu.meta.icon, customIcon: menu.meta.customIcon, name: menu.meta.name, typeId: menu.meta.typeId, routeName: menu.name, selectedIcon: menu.meta.selectedIcon, })}
             <span>
-              <span class={menu.meta.title.length > 10 ? 'scroll' : ''}>{menu.meta.title}</span>
+              <span class={this.renderI18n(menu.meta.title).length > 10 ? 'scroll' : ''}>{this.renderI18n(menu.meta.title)}</span>
               {isShowDot &&
                 <a-popover
                   overlayClassName="custom-menu-extra-submenu"
@@ -217,7 +220,7 @@ export default {
         <SubMenu {...{ key: menu.path }}>
           <span slot="title">
             {this.renderIcon({ icon: menu.meta.icon, selectedIcon: menu.meta.selectedIcon, routeName: menu.name })}
-            <span>{menu.meta.title}</span>
+            <span>{this.renderI18n(menu.meta.title)}</span>
           </span>
           {itemArr}
         </SubMenu>
diff --git a/cmdb-ui/src/components/OpsTable/index.vue b/cmdb-ui/src/components/OpsTable/index.vue
index 924e957..ee359c3 100644
--- a/cmdb-ui/src/components/OpsTable/index.vue
+++ b/cmdb-ui/src/components/OpsTable/index.vue
@@ -3,9 +3,9 @@
     <slot></slot>
     <template #empty>
       <slot name="empty">
-        <div>
-          <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
-          <div>暂无数据</div>
+        <div :style="{ paddingTop: '10px' }">
+          <img :style="{ width: '100px', height: '90px' }" :src="require('@/assets/data_empty.png')" />
+          <div>{{ $t('noData') }}</div>
         </div>
       </slot>
     </template>
diff --git a/cmdb-ui/src/components/RoleTransfer/index.vue b/cmdb-ui/src/components/RoleTransfer/index.vue
index d08bf62..93c2680 100644
--- a/cmdb-ui/src/components/RoleTransfer/index.vue
+++ b/cmdb-ui/src/components/RoleTransfer/index.vue
@@ -3,12 +3,12 @@
     <a-switch
       class="role-transfer-switch"
       v-model="isUserRole"
-      checked-children="用户"
-      un-checked-children="虚拟"
+      :checked-children="$t('user')"
+      :un-checked-children="$t('visual')"
       @change="loadRoles"
     />
     <div class="role-transfer-left">
-      <a-input placeholder="请输入搜索内容" v-model="searchValue" />
+      <a-input :placeholder="$t('placeholderSearch')" v-model="searchValue" />
       <div v-for="item in filterAllRoles" :key="item.id" @click="handleSelectedLeft(item.id)">
         <a-checkbox :checked="selectedLeft.includes(item.id)" />
         <div :title="item.name" class="role-transfer-left-role">{{ item.name }}</div>
diff --git a/cmdb-ui/src/components/tools/UserMenu.vue b/cmdb-ui/src/components/tools/UserMenu.vue
index 0ea42a7..74bf2ec 100644
--- a/cmdb-ui/src/components/tools/UserMenu.vue
+++ b/cmdb-ui/src/components/tools/UserMenu.vue
@@ -10,9 +10,10 @@
       >
         <a-icon type="setting" />
       </span>
+      <span class="locale" @click="changeLang">{{ locale === 'zh' ? 'English' : '中文' }}</span>
       <a-popover
         trigger="click"
-        :overlayStyle="{ width: '120px' }"
+        :overlayStyle="{ width: '150px' }"
         placement="bottomRight"
         overlayClassName="custom-user"
       >
@@ -20,12 +21,12 @@
           <router-link :to="{ name: 'setting_person' }" :style="{ color: '#000000a6' }">
             <div class="custom-user-item">
               <a-icon type="user" :style="{ marginRight: '10px' }" />
-              <span>个人中心</span>
+              <span>{{ $t('topMenu.personalCenter') }}</span>
             </div>
           </router-link>
           <div @click="handleLogout" class="custom-user-item">
             <a-icon type="logout" :style="{ marginRight: '10px' }" />
-            <span>退出登录</span>
+            <span>{{ $t('topMenu.logout') }}</span>
           </div>
         </template>
         <span class="action ant-dropdown-link user-dropdown-menu">
@@ -44,8 +45,9 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
 import DocumentLink from './DocumentLink.vue'
-import { mapState, mapActions, mapGetters } from 'vuex'
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
 
 export default {
   name: 'UserMenu',
@@ -53,21 +55,24 @@ export default {
     DocumentLink,
   },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', 'locale']),
     hasBackendPermission() {
-      return this.user?.roles?.permissions.includes('acl_admin', 'backend_admin') || false
+      return this.user?.detailPermissions?.backend?.length
     },
   },
   methods: {
     ...mapActions(['Logout']),
     ...mapGetters(['nickname', 'avatar']),
+    ...mapMutations(['SET_LOCALE']),
     handleLogout() {
       const that = this
 
       this.$confirm({
         title: '提示',
-        content: '确认注销登录 ?',
+        content: '真的要注销登录吗 ?',
         onOk() {
+          // localStorage.removeItem('ops_cityps_currentId')
+          localStorage.clear()
           return that.Logout()
         },
         onCancel() {},
@@ -76,9 +81,22 @@ export default {
     handleClick() {
       this.$router.push('/setting')
     },
+    changeLang() {
+      if (this.locale === 'zh') {
+        this.SET_LOCALE('en')
+        this.$i18n.locale = 'en'
+      } else {
+        this.SET_LOCALE('zh')
+        this.$i18n.locale = 'zh'
+      }
+      this.$nextTick(() => {
+        setDocumentTitle(`${this.$t(this.$route.meta.title)} - ${domTitle}`)
+      })
+    },
   },
 }
 </script>
+
 <style lang="less">
 @import '~@/style/static.less';
 .color {
@@ -98,4 +116,11 @@ export default {
     color: #000000a6;
   }
 }
+
+.locale {
+  cursor: pointer;
+  &:hover {
+    color: #custom_colors[color_1];
+  }
+}
 </style>
diff --git a/cmdb-ui/src/core/use.js b/cmdb-ui/src/core/use.js
index e91306e..283889a 100644
--- a/cmdb-ui/src/core/use.js
+++ b/cmdb-ui/src/core/use.js
@@ -38,11 +38,18 @@ import CardTitle from '@/components/CardTitle'
 import ElementUI from 'element-ui'
 import Treeselect from '@riophae/vue-treeselect'
 import OpsTable from '@/components/OpsTable'
+import VueI18n from 'vue-i18n'
+import i18n from '@/lang'
 
 Vue.config.productionTip = false
 Vue.prototype.$bus = EventBus
+
+VXETable.setup({
+  i18n: (key, args) => i18n.t(key, args)
+})
 Vue.use(VXETable)
 VXETable.use(VXETablePluginExportXLSX)
+Vue.use(VueI18n)
 
 Vue.config.productionTip = false
 
@@ -75,4 +82,3 @@ Vue.component('CustomRadio', CustomRadio)
 Vue.component('CardTitle', CardTitle)
 Vue.component('Treeselect', Treeselect)
 Vue.component('OpsTable', OpsTable)
-
diff --git a/cmdb-ui/src/guard.js b/cmdb-ui/src/guard.js
index 4627b92..5a70c30 100644
--- a/cmdb-ui/src/guard.js
+++ b/cmdb-ui/src/guard.js
@@ -7,6 +7,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { setDocumentTitle, domTitle } from '@/utils/domUtil'
 import { ACCESS_TOKEN } from './store/global/mutation-types'
+import i18n from '@/lang'
 
 NProgress.configure({ showSpinner: false })
 
@@ -17,7 +18,7 @@ const whitePath = ['/user/login', '/user/logout', '/user/register', '/api/sso/lo
 //  登录页面处理处理 是否使用单点登录
 router.beforeEach(async (to, from, next) => {
   NProgress.start() // start progress bar
-  to.meta && (!!to.meta.title && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
+  to.meta && (!!to.meta.title && setDocumentTitle(`${i18n.t(to.meta.title)} - ${domTitle}`))
 
   const authed = store.state.authed
   const auth_type = localStorage.getItem('ops_auth_type')
diff --git a/cmdb-ui/src/lang/en.js b/cmdb-ui/src/lang/en.js
new file mode 100644
index 0000000..41a9dc7
--- /dev/null
+++ b/cmdb-ui/src/lang/en.js
@@ -0,0 +1,140 @@
+import cmdb_en from '@/modules/cmdb/lang/en.js'
+import cs_en from '../views/setting/lang/en.js'
+import acl_en from '@/modules/acl/lang/en.js'
+
+export default {
+    screen: 'Big Screen',
+    dashboard: 'Dashboard',
+    admin: 'Admin',
+    user: 'User',
+    role: 'Role',
+    operation: 'Operation',
+    login: 'Login',
+    refresh: 'Refresh',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    create: 'Create',
+    edit: 'Edit',
+    deleting: 'Deleting',
+    deletingTip: 'Deleting, total of {total}, {successNum} succeeded, {errorNum} failed',
+    grant: 'Grant',
+    login_at: 'Login At',
+    logout_at: 'Logout At',
+    createSuccess: 'Create Success',
+    editSuccess: 'edit Success',
+    warning: 'Warning',
+    export: 'Export',
+    placeholderSearch: 'Please Search',
+    success: 'Success',
+    fail: 'Fail',
+    browser: 'Browser',
+    status: 'Status',
+    type: 'Type',
+    description: 'Description',
+    new: 'New',
+    add: 'Add',
+    define: 'Define',
+    update: 'Update',
+    clear: 'Clear',
+    delete: 'Delete',
+    copy: 'Copy',
+    created_at: 'Created At',
+    updated_at: 'Updated At',
+    placeholder1: 'Please Input',
+    placeholder2: 'Please Select',
+    confirmDelete: 'Confirm delete?',
+    confirmDelete2: 'Confirm delete [{name}]?',
+    query: 'Query',
+    search: 'Search',
+    hide: 'Hide',
+    expand: 'Expand',
+    save: 'Save',
+    submit: 'Submit',
+    upload: 'Import',
+    download: 'Export',
+    name: 'Name',
+    alias: 'Alias',
+    desc: 'Description',
+    other: 'Other',
+    icon: 'Icon',
+    addSuccess: 'Added successfully',
+    uploadSuccess: 'Import successfully',
+    saveSuccess: 'Save successfully',
+    copySuccess: 'Copy successfully',
+    updateSuccess: 'Updated successfully',
+    deleteSuccess: 'Deleted successfully',
+    operateSuccess: 'The operation was successful',
+    noPermission: 'No Permission',
+    noData: 'No Data',
+    seconds: 'Seconds',
+    createdAt: 'Created At',
+    updatedAt: 'Updated At',
+    deletedAt: 'Deleted At',
+    required: 'required',
+    email: 'Email',
+    wechat: 'Wechat',
+    dingding: 'DingTalk',
+    feishu: 'Feishu',
+    bot: 'Robot',
+    checkAll: 'Select All',
+    loading: 'Loading...',
+    view: 'View',
+    reset: 'Reset',
+    yes: 'Yes',
+    no: 'No',
+    all: 'All',
+    selectRows: 'Selected: {rows} items',
+    itemsPerPage: '/page',
+    '星期一': 'Monday',
+    '星期二': 'Tuesday',
+    '星期三': 'Wednesday',
+    '星期四': 'Thursday',
+    '星期五': 'Friday',
+    '星期六': 'Saturday',
+    '星期日': 'Sunday',
+    hour: 'hour',
+    'items/page': '{items} items/page',
+    max: 'Max',
+    min: 'Min',
+    visual: 'Visual',
+    pagination: {
+        total: '{range0}-{range1} of {total} items'
+    },
+    topMenu: {
+        personalCenter: 'Personal Center',
+        logout: 'logout',
+    },
+    cmdbFilterComp: {
+        conditionFilter: 'Conditional filtering',
+        and: 'and',
+        or: 'or',
+        is: 'equal',
+        '~is': 'not equal',
+        contain: 'contain',
+        '~contain': 'not contain',
+        start_with: 'start_with',
+        '~start_with': 'not start_with',
+        end_with: 'end_with',
+        '~end_with': 'not end_with',
+        '~value': 'null',
+        value: 'not null',
+        in: 'in',
+        '~in': 'not in',
+        range: 'range',
+        '~range': 'out of range',
+        compare: 'compare',
+        addHere: 'Add Here',
+        split: 'split by {separator}'
+    },
+    customIconSelect: {
+        outlined: 'Outlined',
+        filled: 'Filled',
+        multicolor: 'Multicolor',
+        custom: 'Custom',
+        preview: 'Preview',
+        sizeLimit: 'The image size cannot exceed 2MB!'
+    },
+    cmdb: cmdb_en,
+    cs: cs_en,
+    acl: acl_en,
+}
diff --git a/cmdb-ui/src/lang/index.js b/cmdb-ui/src/lang/index.js
new file mode 100644
index 0000000..d8ece0e
--- /dev/null
+++ b/cmdb-ui/src/lang/index.js
@@ -0,0 +1,18 @@
+import VueI18n from 'vue-i18n'
+import zh from './zh'
+import en from './en'
+import Vue from 'vue'
+import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
+import enUS from 'vxe-table/lib/locale/lang/en-US'
+
+Vue.use(VueI18n)
+const i18n = new VueI18n({
+    locale: 'zh', // 初始化中文
+    messages: {
+        'zh': { ...zh, ...zhCN },
+        'en': { ...en, ...enUS },
+    },
+    silentTranslationWarn: true
+})
+
+export default i18n
diff --git a/cmdb-ui/src/lang/zh.js b/cmdb-ui/src/lang/zh.js
new file mode 100644
index 0000000..a474d03
--- /dev/null
+++ b/cmdb-ui/src/lang/zh.js
@@ -0,0 +1,140 @@
+import cmdb_zh from '@/modules/cmdb/lang/zh.js'
+import cs_zh from '../views/setting/lang/zh.js'
+import acl_zh from '@/modules/acl/lang/zh.js'
+
+export default {
+    screen: '大屏',
+    dashboard: '仪表盘',
+    admin: '管理员',
+    user: '用户',
+    role: '角色',
+    operation: '操作',
+    login: '登录',
+    refresh: '刷新',
+    cancel: '取消',
+    confirm: '确定',
+    create: '创建',
+    edit: '编辑',
+    deleting: '正在删除',
+    deletingTip: '正在删除，共{total}个，成功{successNum}个，失败{errorNum}个',
+    grant: '授权',
+    login_at: '登录时间',
+    logout_at: '登出时间',
+    createSuccess: '创建成功',
+    editSuccess: '修改成功',
+    warning: '警告',
+    export: '导出',
+    placeholderSearch: '请查找',
+    success: '成功',
+    fail: '失败',
+    browser: '浏览器',
+    status: '状态',
+    type: '类型',
+    description: '描述',
+    new: '新增',
+    add: '添加',
+    define: '定义',
+    update: '修改',
+    clear: '清空',
+    delete: '删除',
+    copy: '复制',
+    created_at: '创建日期',
+    updated_at: '更新日期',
+    placeholder1: '请输入',
+    placeholder2: '请选择',
+    confirmDelete: '确认删除？',
+    confirmDelete2: '确认删除【{name}】?',
+    query: '查询',
+    search: '搜索',
+    hide: '隐藏',
+    expand: '展开',
+    save: '保存',
+    submit: '提交',
+    upload: '导入',
+    download: '导出',
+    name: '名称',
+    alias: '别名',
+    desc: '描述',
+    other: '其他',
+    icon: '图标',
+    addSuccess: '新增成功',
+    uploadSuccess: '导入成功',
+    saveSuccess: '保存成功',
+    copySuccess: '复制成功',
+    updateSuccess: '更新成功',
+    deleteSuccess: '删除成功',
+    operateSuccess: '操作成功',
+    noPermission: '权限不足',
+    noData: '暂无数据',
+    seconds: '秒',
+    createdAt: '创建时间',
+    updatedAt: '更新时间',
+    deletedAt: '删除时间',
+    required: '必须',
+    email: '邮件',
+    wechat: '企业微信',
+    dingding: '钉钉',
+    feishu: '飞书',
+    bot: '机器人',
+    checkAll: '全选',
+    loading: '加载中...',
+    view: '查看',
+    reset: '重置',
+    yes: '是',
+    no: '否',
+    all: '全部',
+    selectRows: '选取：{rows} 项',
+    itemsPerPage: '/页',
+    '星期一': '星期一',
+    '星期二': '星期二',
+    '星期三': '星期三',
+    '星期四': '星期四',
+    '星期五': '星期五',
+    '星期六': '星期六',
+    '星期日': '星期日',
+    hour: '小时',
+    'items/page': '{items} 条/页',
+    max: '最大值',
+    min: '最小值',
+    visual: '虚拟',
+    pagination: {
+        total: '当前展示 {range0}-{range1} 条数据， 共 {total} 条'
+    },
+    topMenu: {
+        personalCenter: '个人中心',
+        logout: '退出登录',
+    },
+    cmdbFilterComp: {
+        conditionFilter: '条件过滤',
+        and: '与',
+        or: '或',
+        is: '等于',
+        '~is': '不等于',
+        contain: '包含',
+        '~contain': '不包含',
+        start_with: '以...开始',
+        '~start_with': '不以...开始',
+        end_with: '以...结束',
+        '~end_with': '不以...结束',
+        '~value': '为空',
+        value: '不为空',
+        in: 'in查询',
+        '~in': '非in查询',
+        range: '范围',
+        '~range': '范围外',
+        compare: '比较',
+        addHere: '在此处添加',
+        split: '以 {separator} 分隔'
+    },
+    customIconSelect: {
+        outlined: '线框',
+        filled: '实底',
+        multicolor: '多色',
+        custom: '自定义',
+        preview: '预览',
+        sizeLimit: '图片大小不可超过2MB！'
+    },
+    cmdb: cmdb_zh,
+    cs: cs_zh,
+    acl: acl_zh,
+}
diff --git a/cmdb-ui/src/main.js b/cmdb-ui/src/main.js
index 0413916..aa7bc8a 100644
--- a/cmdb-ui/src/main.js
+++ b/cmdb-ui/src/main.js
@@ -10,6 +10,7 @@ import './guard' // guard permission control
 import './utils/filter' // global filter
 import Setting from './config/setting'
 import { Icon } from 'ant-design-vue'
+import i18n from './lang'
 
 import iconFont from '../public/iconfont/iconfont'
 
@@ -22,6 +23,7 @@ async function start() {
   const _vue = new Vue({
     router,
     store,
+    i18n,
     created: bootstrap,
     render: h => h(App)
   }).$mount('#app')
diff --git a/cmdb-ui/src/modules/acl/lang/en.js b/cmdb-ui/src/modules/acl/lang/en.js
new file mode 100644
index 0000000..ddde5a8
--- /dev/null
+++ b/cmdb-ui/src/modules/acl/lang/en.js
@@ -0,0 +1,125 @@
+const acl_en = {
+    date: 'Date',
+    operator: 'Operator',
+    resource: 'Resource',
+    resourceType: 'Resource Type',
+    addResourceType: 'Add Resource Type',
+    app: 'App',
+    operateTime: 'Operate Time',
+    permission: 'Permission',
+    permission_placeholder: 'please select permission',
+    permissionList: 'Permission List',
+    summaryPermissions: 'Summary of permissions',
+    source: 'Source',
+    username: 'Username',
+    username_placeholder: 'please input username',
+    userList: 'User List',
+    groupUser: 'Group User',
+    addUser: 'Add User',
+    subordinateUsers: 'Subordinate Users',
+    nickname: 'Nickname',
+    nickname_placeholder: 'please input nickname',
+    password: 'Password',
+    password_placeholder: 'please input password',
+    department: 'Department',
+    group: 'Group',
+    email: 'Email',
+    email_placeholder: 'please input email',
+    mobile: 'Mobile',
+    isBlock: 'Is Block',
+    block: 'Block',
+    joined_at: 'Joined At',
+    role: 'Role',
+    role_placeholder1: 'please input role',
+    role_placeholder2: 'please select role',
+    role_placeholder3: 'please select a role name, multiple choices are allowed',
+    allRole: 'All Roles',
+    visualRole: 'Virtual Role',
+    addVisualRole: 'Add Virtual Role',
+    inheritedFrom: 'Inherited from',
+    heir: 'Inherit Roles',
+    permissionChange: 'Permissions',
+    roleChange: 'Roles',
+    resourceChange: 'Resources',
+    resourceTypeChange: 'Resource Type',
+    trigger: 'Triggers',
+    triggerNameInput: 'Please enter trigger name',
+    triggerChange: 'Triggers',
+    roleManage: 'Roles',
+    userManage: 'Users',
+    appManage: 'Applications',
+    resourceManage: 'Resources',
+    history: 'Audits',
+    userSecret: 'Secrets',
+    none: 'none',
+    danger: 'Dangerous',
+    confirmDeleteApp: 'Are you sure you want to delete this app?',
+    revoke: 'Revoke',
+    convenient: 'Quick Grant',
+    group2: 'Group',
+    groupName: 'Group Name',
+    resourceName: 'Resource Name',
+    creator: 'Creator',
+    member: 'Members',
+    viewAuth: 'view Auth',
+    addTypeTips: 'There is no type information yet, please add the resource type first!',
+    addResource: 'Add Resource',
+    resourceList: 'Resource List',
+    confirmResetSecret: 'Are you sure you want to reset the user secrets?',
+    addTrigger: 'Add Trigger',
+    deleteTrigger: 'Delete Trigger',
+    applyTrigger: 'Apply Trigger',
+    cancelTrigger: 'Cancel Trigger',
+    enable: 'Enable',
+    disable: 'Disable',
+    viewMatchResult: 'View regular matching results',
+    confirmDeleteTrigger: 'Are you sure you want to delete this trigger?',
+    ruleApply: 'Apply',
+    triggerTip1: 'Are you sure you want to apply this trigger?',
+    triggerTip2: 'Cancel applying this trigger?',
+    appNameInput: 'Please enter an application name',
+    descInput: 'Please enter a description',
+    addApp: 'Add',
+    updateApp: 'Update',
+    cancel: 'Cancel',
+    typeName: 'Name',
+    typeNameInput: 'Please enter a type name',
+    resourceNameInput: 'Please enter resource name',
+    pressEnter: 'Press Enter to confirm filtering',
+    groupMember: 'Group Members:',
+    isGroup: 'Group?',
+    errorTips: 'Error message',
+    roleList: 'Role List',
+    virtual: 'Virtual',
+    resourceBatchTips: 'Please enter the resource name, separated by newlines',
+    memberManage: 'Members: ',
+    newResource: 'New Resource: ',
+    deleteResource: 'Delete Resource: ',
+    deleteResourceType: 'Delete Resource Type: ',
+    noChange: 'No change',
+    batchOperate: 'Batch Operations',
+    batchGrant: 'Batch Grant',
+    batchRevoke: 'Batch Revoke',
+    editPerm: 'Add authorization: ',
+    permInput: 'Please enter permission name',
+    resourceTypeName: 'Resource Type Name',
+    selectedParents: 'Optionally inherit roles',
+    isAppAdmin: 'is app admin',
+    addRole: 'Add Role',
+    roleRelation: 'Role Relation',
+    roleRelationAdd: 'Add Role Relation',
+    roleRelationDelete: 'Delete Role Relation',
+    role2: 'Role',
+    admin: 'Admin',
+    involvingRP: 'Involving resources and permissions',
+    startAt: 'Start Time',
+    endAt: 'End Time',
+    triggerTips1: 'Priority regular pattern (secondary wildcard)',
+    pleaseSelectType: 'Please select resource type',
+    apply: 'Apply',
+    mobileTips: 'Please enter the correct phone number',
+    remove: 'Remove',
+    deleteUserConfirm: 'Are you sure you want to remove this user?',
+    copyResource: 'Copy resource name'
+}
+export default acl_en
diff --git a/cmdb-ui/src/modules/acl/lang/zh.js b/cmdb-ui/src/modules/acl/lang/zh.js
new file mode 100644
index 0000000..626911f
--- /dev/null
+++ b/cmdb-ui/src/modules/acl/lang/zh.js
@@ -0,0 +1,125 @@
+const acl_zh = {
+    date: '日期',
+    operator: '操作员',
+    resource: '资源',
+    resourceType: '资源类型',
+    addResourceType: '新增资源类型',
+    app: '应用',
+    operateTime: '操作时间',
+    permission: '权限',
+    permission_placeholder: '请选择权限',
+    permissionList: '权限列表',
+    summaryPermissions: '权限汇总',
+    source: '来源',
+    username: '用户名',
+    username_placeholder: '请输入用户名',
+    userList: '用户列表',
+    groupUser: '组用户',
+    addUser: '新增用户',
+    subordinateUsers: '下属用户',
+    nickname: '中文名',
+    nickname_placeholder: '请输入中文名',
+    password: '密码',
+    password_placeholder: '请输入密码',
+    department: '部门',
+    group: '小组',
+    email: '邮箱',
+    email_placeholder: '请输入邮箱',
+    mobile: '手机号',
+    isBlock: '是否锁定',
+    block: '锁定',
+    joined_at: '加入时间',
+    role: '角色名',
+    role_placeholder1: '请输入角色名',
+    role_placeholder2: '请选择角色名称',
+    role_placeholder3: '请选择角色名称，可多选',
+    allRole: '所有角色',
+    visualRole: '虚拟角色',
+    addVisualRole: '新增虚拟角色',
+    inheritedFrom: '继承自',
+    heir: '继承者',
+    permissionChange: '权限变更',
+    roleChange: '角色变更',
+    resourceChange: '资源变更',
+    resourceTypeChange: '资源类型变更',
+    trigger: '触发器',
+    triggerNameInput: '请输入触发器名',
+    triggerChange: '触发器变更',
+    roleManage: '角色管理',
+    userManage: '用户管理',
+    appManage: '应用管理',
+    resourceManage: '资源管理',
+    history: '操作审计',
+    userSecret: '用户密钥',
+    none: '无',
+    danger: '危险操作',
+    confirmDeleteApp: '确定要删除该App吗？',
+    revoke: '权限回收',
+    convenient: '便捷授权',
+    group2: '组',
+    groupName: '资源组名',
+    resourceName: '资源名',
+    creator: '创建者',
+    member: '成员',
+    viewAuth: '查看授权',
+    addTypeTips: '暂无类型信息，请先添加资源类型!',
+    addResource: '新增资源',
+    resourceList: '资源列表',
+    confirmResetSecret: '确定重置用户密钥？',
+    addTrigger: '新增触发器',
+    deleteTrigger: '删除触发器',
+    applyTrigger: '应用触发器',
+    cancelTrigger: '取消触发器',
+    enable: '启用',
+    disable: '禁用',
+    viewMatchResult: '查看正则匹配结果',
+    confirmDeleteTrigger: '确认删除该触发器吗？',
+    ruleApply: '规则应用',
+    triggerTip1: '是否确定应用该触发器？',
+    triggerTip2: '是否取消应用该触发器？',
+    appNameInput: '请输入应用名称',
+    descInput: '请输入描述',
+    addApp: '创建应用',
+    updateApp: '更新应用',
+    cancel: '撤销',
+    typeName: '类型名',
+    typeNameInput: '请输入类型名',
+    resourceNameInput: '请输入资源名',
+    pressEnter: '按回车确认筛选',
+    groupMember: '组成员：',
+    isGroup: '是否组',
+    errorTips: '错误提示',
+    roleList: '角色列表',
+    virtual: '虚拟',
+    resourceBatchTips: '请输入资源名，换行分隔',
+    memberManage: '成员管理：',
+    newResource: '新建资源：',
+    deleteResource: '删除资源：',
+    deleteResourceType: '删除资源类型：',
+    noChange: '没有修改',
+    batchOperate: '批量操作',
+    batchGrant: '批量授权',
+    batchRevoke: '批量权限回收',
+    editPerm: '添加授权：',
+    permInput: '请输入权限名',
+    resourceTypeName: '资源类型名',
+    selectedParents: '可选择继承角色',
+    isAppAdmin: '是否应用管理员',
+    addRole: '新增角色',
+    roleRelation: '角色关系',
+    roleRelationAdd: '添加角色关系',
+    roleRelationDelete: '删除角色关系',
+    role2: '角色',
+    admin: '管理员',
+    involvingRP: '涉及资源及权限',
+    startAt: '开始时间',
+    endAt: '结束时间',
+    triggerTips1: '优先正则模式（次通配符）',
+    pleaseSelectType: '请选择资源类型',
+    apply: '应用',
+    mobileTips: '请输入正确的手机号码',
+    remove: '移除',
+    deleteUserConfirm: '是否确定要移除该用户',
+    copyResource: '复制资源名'
+}
+export default acl_zh
diff --git a/cmdb-ui/src/modules/acl/router/index.js b/cmdb-ui/src/modules/acl/router/index.js
index c047a16..7e125ce 100644
--- a/cmdb-ui/src/modules/acl/router/index.js
+++ b/cmdb-ui/src/modules/acl/router/index.js
@@ -12,35 +12,35 @@ const genAppRoute = ({ name }) => {
         name: `${name}_roles_acl`,
         hideChildrenInMenu: true,
         component: () => import('../views/roles'),
-        meta: { title: '角色管理', icon: 'team', keepAlive: true }
+        meta: { title: 'acl.roleManage', icon: 'team', keepAlive: true }
       },
       {
         path: `/acl/${name}/resources`,
         name: `${name}_resources_acl`,
         hideChildrenInMenu: true,
         component: () => import('../views/resources'),
-        meta: { title: '资源管理', icon: 'credit-card', keepAlive: false }
+        meta: { title: 'acl.resourceManage', icon: 'credit-card', keepAlive: false }
       },
       {
         path: `/acl/${name}/resource_types`,
         name: `${name}_resource_types_acl`,
         hideChildrenInMenu: true,
         component: () => import('../views/resource_types'),
-        meta: { title: '资源类型', icon: 'file-text', keepAlive: true }
+        meta: { title: 'acl.resourceType', icon: 'file-text', keepAlive: true }
       },
       {
         path: `/acl/${name}/trigger`,
         name: `${name}_trigger_acl`,
         hideChildrenInMenu: true,
         component: () => import('../views/trigger'),
-        meta: { title: '触发器', icon: 'clock-circle', keepAlive: true }
+        meta: { title: 'acl.trigger', icon: 'clock-circle', keepAlive: true }
       },
       {
         path: `/acl/${name}/history`,
         name: `${name}_history_acl`,
         hideChildrenInMenu: true,
         component: () => import('../views/history'),
-        meta: { title: '操作审计', icon: 'search', keepAlive: false }
+        meta: { title: 'acl.history', icon: 'search', keepAlive: false }
       }
     ]
   }
@@ -59,31 +59,31 @@ const genAclRoutes = async () => {
         path: `/acl/secret_key`,
         name: 'acl_secret_key',
         component: () => import('../views/secretKey'),
-        meta: { title: '用户密钥', icon: 'key' }
+        meta: { title: 'acl.userSecret', icon: 'key' }
       },
       {
         path: `/acl/operate_history`,
         name: 'acl_operate_history',
         component: () => import('../views/operation_history/index.vue'),
-        meta: { title: '操作审计', icon: 'search', permission: ['acl_admin'] },
+        meta: { title: 'acl.history', icon: 'search', permission: ['acl_admin'] }
       },
       {
         path: `/acl/user`,
         name: 'acl_user',
         component: () => import('../views/users'),
-        meta: { title: '用户管理', icon: 'user', permission: ['acl_admin'] }
+        meta: { title: 'acl.userManage', icon: 'user', permission: ['acl_admin'] }
       },
       {
         path: `/acl/roles`,
         name: `acl_roles`,
         component: () => import('../views/roles'),
-        meta: { title: '角色管理', icon: 'team', keepAlive: true, permission: ['acl_admin'] }
+        meta: { title: 'acl.roleManage', icon: 'team', keepAlive: true, permission: ['acl_admin'] }
       },
       {
         path: `/acl/apps`,
         name: 'acl_apps',
         component: () => import('../views/apps'),
-        meta: { title: '应用管理', icon: 'appstore', permission: ['acl_admin'] }
+        meta: { title: 'acl.appManage', icon: 'appstore', permission: ['acl_admin'] }
       }
     ]
   }
diff --git a/cmdb-ui/src/modules/acl/views/apps.vue b/cmdb-ui/src/modules/acl/views/apps.vue
index b6f7b34..ff7cf89 100644
--- a/cmdb-ui/src/modules/acl/views/apps.vue
+++ b/cmdb-ui/src/modules/acl/views/apps.vue
@@ -11,7 +11,7 @@
         :xs="24">
         <a-card>
           <a-card-meta :title="app.name">
-            <div slot="description" :title="app.description || ''">{{ app.description || '无' }}</div>
+            <div slot="description" :title="app.description || ''">{{ app.description || $t('none') }}</div>
             <a-avatar style="background-color: #5dc2f1" slot="avatar">{{ app.name[0].toUpperCase() }}</a-avatar>
           </a-card-meta>
           <template slot="actions">
@@ -65,11 +65,11 @@ export default {
     handleDeleteApp(app) {
       const that = this
       this.$confirm({
-        title: '危险操作',
-        content: '确定要删除该App吗？',
+        title: that.$t('danger'),
+        content: that.$t('confirmDeleteApp'),
         onOk() {
           deleteApp(app.id).then((res) => {
-            that.$message.success(`删除成功：${app.name}`)
+            that.$message.success(that.$t('deleteSuccess'))
             that.loadApps()
           })
         },
diff --git a/cmdb-ui/src/modules/acl/views/history.vue b/cmdb-ui/src/modules/acl/views/history.vue
index 5c047a9..be77b2e 100644
--- a/cmdb-ui/src/modules/acl/views/history.vue
+++ b/cmdb-ui/src/modules/acl/views/history.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="acl-history">
     <a-tabs default-active-key="1">
-      <a-tab-pane key="1" tab="权限变更">
+      <a-tab-pane key="1" :tab="$t('acl.permissionChange')">
         <permisson-history-table
           v-if="isloaded"
           :allResourceTypes="allResourceTypes"
@@ -17,7 +17,7 @@
           @resourceClear="resourceClear"
         ></permisson-history-table>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="角色变更">
+      <a-tab-pane key="2" :tab="$t('acl.roleChange')">
         <role-history-table
           v-if="isloaded"
           :allUsers="allUsers"
@@ -26,7 +26,7 @@
           :allUsersMap="allUsersMap"
         ></role-history-table>
       </a-tab-pane>
-      <a-tab-pane key="3" tab="资源变更">
+      <a-tab-pane key="3" :tab="$t('acl.resourceChange')">
         <resource-history-table
           v-if="isloaded"
           :allResources="allResources"
@@ -41,7 +41,7 @@
           @resourceClear="resourceClear"
         ></resource-history-table>
       </a-tab-pane>
-      <a-tab-pane key="4" tab="资源类型变更">
+      <a-tab-pane key="4" :tab="$t('acl.resourceTypeChange')">
         <resource-type-history-table
           v-if="isloaded"
           :allResourceTypes="allResourceTypes"
@@ -52,7 +52,7 @@
           :allResourceTypesMap="allResourceTypesMap"
         ></resource-type-history-table>
       </a-tab-pane>
-      <a-tab-pane key="5" tab="触发器变更">
+      <a-tab-pane key="5" :tab="$t('acl.triggerChange')">
         <trigger-history-table
           v-if="isloaded"
           :allTriggers="allTriggers"
diff --git a/cmdb-ui/src/modules/acl/views/module/appForm.vue b/cmdb-ui/src/modules/acl/views/module/appForm.vue
index 92ce2bc..b3d13ed 100644
--- a/cmdb-ui/src/modules/acl/views/module/appForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/appForm.vue
@@ -1,11 +1,12 @@
 <template>
   <CustomDrawer @close="handleClose" width="500" :title="title" :visible="visible" :closable="false">
     <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-      <a-form-item label="应用名称">
-        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入应用名称' }] }]"> </a-input>
+      <a-form-item :label="$t('acl.app')">
+        <a-input v-decorator="['name', { rules: [{ required: true, message: $t('acl.appNameInput') }] }]"> </a-input>
       </a-form-item>
-      <a-form-item label="描述">
-        <a-input v-decorator="['description', { rules: [{ required: true, message: '请输入描述' }] }]"> </a-input>
+      <a-form-item :label="$t('desc')">
+        <a-input v-decorator="['description', { rules: [{ required: true, message: $t('acl.descInput') }] }]">
+        </a-input>
       </a-form-item>
       <a-form-item label="AppId">
         <a-input v-decorator="['app_id', { rules: [{ required: false }] }]" :disabled="mode === 'update'"> </a-input>
@@ -19,8 +20,8 @@
       </a-form-item>
     </a-form>
     <div class="custom-drawer-bottom-action">
-      <a-button @click="handleClose">取消</a-button>
-      <a-button @click="handleSubmit" type="primary">提交</a-button>
+      <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
+      <a-button @click="handleSubmit" type="primary">{{ $t('submit') }}</a-button>
     </div>
   </CustomDrawer>
 </template>
@@ -32,10 +33,14 @@ export default {
   data() {
     return {
       visible: false,
-      title: '创建应用',
       mode: 'create',
     }
   },
+  computed: {
+    title() {
+      return this.$t('acl.addApp')
+    },
+  },
   beforeCreate() {
     this.form = this.$form.createForm(this)
   },
@@ -43,7 +48,7 @@ export default {
     handleEdit(ele) {
       this.visible = true
       if (ele) {
-        this.title = '修改应用'
+        this.title = this.$t('updateApp')
         this.mode = 'update'
         console.log(ele)
         const { name, description } = ele
@@ -55,7 +60,7 @@ export default {
         })
       } else {
         this.mode = 'create'
-        this.title = '创建应用'
+        this.title = this.$t('acl.addApp')
       }
     },
     handleClose() {
@@ -69,11 +74,11 @@ export default {
         }
         if (values.id) {
           await updateApp(values.id, values).then((res) => {
-            this.$message.success('修改成功！')
+            this.$message.success(this.$t('updateSuccess'))
           })
         } else {
           await addApp(values).then((res) => {
-            this.$message.success('创建成功!')
+            this.$message.success(this.$t('addSuccess'))
           })
         }
         this.handleClose()
diff --git a/cmdb-ui/src/modules/acl/views/module/pager.vue b/cmdb-ui/src/modules/acl/views/module/pager.vue
index 7f03b3a..e1d83d6 100644
--- a/cmdb-ui/src/modules/acl/views/module/pager.vue
+++ b/cmdb-ui/src/modules/acl/views/module/pager.vue
@@ -9,10 +9,10 @@
           <a-dropdown class="dropdown" size="small" 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 }}条/页
+                {{ size }}{{ $t('itemsPerPage') }}
               </a-menu-item>
             </a-menu>
-            <a-button size="small"> {{ pageSize }}条/页 <a-icon type="down" /> </a-button>
+            <a-button size="small"> {{ pageSize }}{{ $t('itemsPerPage') }}<a-icon type="down" /> </a-button>
           </a-dropdown>
         </a-space>
       </a-col>
diff --git a/cmdb-ui/src/modules/acl/views/module/permCollectForm.vue b/cmdb-ui/src/modules/acl/views/module/permCollectForm.vue
index a7005e9..2bbaa64 100644
--- a/cmdb-ui/src/modules/acl/views/module/permCollectForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permCollectForm.vue
@@ -1,6 +1,6 @@
 <template>
   <CustomDrawer
-    :title="`权限汇总: ${user.nickname}`"
+    :title="`${$t('acl.summaryPermissions')}: ${user.nickname}`"
     :visible="visible"
     placement="left"
     width="100%"
@@ -24,7 +24,7 @@
               <vxe-table :max-height="`${windowHeight - 230}px`" :data="resources" ref="rTable">
                 <vxe-column
                   field="name"
-                  title="资源名"
+                  :title="$t('acl.resourceName')"
                   width="30%"
                   :filters="[{ data: '' }]"
                   :filter-method="filterNameMethod"
@@ -39,62 +39,17 @@
                         v-model="option.data"
                         @input="$panel.changeOption($event, !!option.data, option)"
                         @keyup.enter="$panel.confirmFilter()"
-                        placeholder="按回车确认筛选"
+                        :placeholder="$t('acl.pressEnter')"
                       />
                     </template>
                   </template>
                 </vxe-column>
-                <vxe-column field="permissions" title="权限列表" width="70%">
+                <vxe-column field="permissions" :title="$t('acl.permissionList')" width="70%">
                   <template #default="{row}">
                     <a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
                   </template>
                 </vxe-column>
               </vxe-table>
-              <!-- <a-table
-                :columns="tableColumns"
-                :dataSource="resources"
-                :rowKey="record=>record.id"
-                :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录` }"
-                showPagination="auto"
-                ref="rTable"
-                size="middle">
-                <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
-                  <a-input
-                    v-ant-ref="c => searchInput = c"
-                    :placeholder="` ${column.title}`"
-                    :value="selectedKeys[0]"
-                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-                    @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
-                    style="width: 188px; margin-bottom: 8px; display: block;"
-                  />
-                  <a-button
-                    type="primary"
-                    @click="() => handleSearch(selectedKeys, confirm, column)"
-                    icon="search"
-                    size="small"
-                    style="width: 90px; margin-right: 8px"
-                  >搜索</a-button>
-                  <a-button
-                    @click="() => handleReset(clearFilters, column)"
-                    size="small"
-                    style="width: 90px"
-                  >重置</a-button>
-                </div>
-                <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
-
-                <template slot="nameSearchRender" slot-scope="text">
-                  <span v-if="columnSearchText.name">
-                    <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
-                      <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
-                      <template v-else>{{ fragment }}</template>
-                    </template>
-                  </span>
-                  <template v-else>{{ text }}</template>
-                </template>
-                <template slot="permissions" slot-scope="record">
-                  <a-tag color="cyan" v-for="(r, index) in record" :key="index">{{ r }}</a-tag>
-                </template>
-              </a-table> -->
             </a-spin>
           </a-tab-pane>
         </a-tabs>
@@ -122,33 +77,6 @@ export default {
       resourceTypes: [],
       resourceTypePerms: [],
       resources: [],
-      // tableColumns: [
-      //   {
-      //     title: '资源名',
-      //     dataIndex: 'name',
-      //     sorter: false,
-      //     width: 150,
-      //     // scopedSlots: {
-      //     //   customRender: 'nameSearchRender',
-      //     //   filterDropdown: 'filterDropdown',
-      //     //   filterIcon: 'filterIcon'
-      //     // },
-      //     // onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
-      //     // onFilterDropdownVisibleChange: (visible) => {
-      //     //   if (visible) {
-      //     //     setTimeout(() => {
-      //     //       this.searchInput.focus()
-      //     //     }, 0)
-      //     //   }
-      //     // }
-      //   },
-      //   {
-      //     title: '权限列表',
-      //     dataIndex: 'permissions',
-      //     width: 300,
-      //     scopedSlots: { customRender: 'permissions' },
-      //   },
-      // ],
       columnSearchText: {
         name: '',
       },
@@ -156,14 +84,14 @@ export default {
   },
   computed: {
     ...mapState({
-      windowHeight: state => state.windowHeight,
+      windowHeight: (state) => state.windowHeight,
     }),
     displayApps() {
       const roles = this.$store.state.user.roles.permissions
       if (roles.includes('acl_admin')) {
         return this.apps
       }
-      return this.apps.filter(item => {
+      return this.apps.filter((item) => {
         if (roles.includes(`${item.name}_admin`)) {
           return true
         }
@@ -192,7 +120,7 @@ export default {
     },
     async loadRoles(_appId) {
       const res = await searchRole({ app_id: _appId, page_size: 9999, is_all: true })
-      this.roles = res.roles.filter(item => item.uid)
+      this.roles = res.roles.filter((item) => item.uid)
     },
     async handleSwitchApp(appId) {
       this.currentAppId = appId
@@ -218,7 +146,7 @@ export default {
     },
     async loadResource() {
       this.spinning = true
-      const fil = this.roles.filter(role => role.uid === this.user.uid)
+      const fil = this.roles.filter((role) => role.uid === this.user.uid)
       if (!fil[0]) {
         return
       }
diff --git a/cmdb-ui/src/modules/acl/views/module/permissionForm.vue b/cmdb-ui/src/modules/acl/views/module/permissionForm.vue
index 59eb25a..8768117 100644
--- a/cmdb-ui/src/modules/acl/views/module/permissionForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permissionForm.vue
@@ -1,29 +1,33 @@
 <template>
   <CustomDrawer
     :closable="false"
-    :title="drawerTitle"
+    :title="$t('acl.addReourceType')"
     :visible="drawerVisible"
     @close="onClose"
     placement="right"
     width="30%"
   >
     <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="类型名">
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('acl.typeName')">
         <a-input
           name="name"
           placeholder=""
-          v-decorator="['name', { rules: [{ required: true, message: '请输入资源名' }] }]"
+          v-decorator="['name', { rules: [{ required: true, message: $t('acl.resourceNameInput') }] }]"
         />
       </a-form-item>
 
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="描述">
-        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('desc')">
+        <a-textarea :placeholder="$t('acl.descInput')" name="description" :rows="4" />
       </a-form-item>
 
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="权限">
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        :label="$t('acl.permission')"
+      >
         <div :style="{ borderBottom: '1px solid #E9E9E9' }">
           <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
-            全选
+            {{ $t('checkAll') }}
           </a-checkbox>
         </div>
         <br />
@@ -35,8 +39,8 @@
       </a-form-item>
 
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -49,7 +53,6 @@ export default {
   name: 'ResourceForm',
   data() {
     return {
-      drawerTitle: '新增资源类型',
       drawerVisible: false,
       formLayout: 'vertical',
       perms: ['1'],
@@ -142,8 +145,8 @@ export default {
       })
     },
     updateResourceType(id, data) {
-      updateResourceTypeById(id, data).then(res => {
-        this.$message.success(`更新成功`)
+      updateResourceTypeById(id, data).then((res) => {
+        this.$message.success(this.$t('updateSuccess'))
         this.handleOk()
         this.onClose()
       })
@@ -151,18 +154,12 @@ export default {
     },
 
     createResourceType(data) {
-      addResourceType(data).then(res => {
-        this.$message.success(`添加成功`)
+      addResourceType(data).then((res) => {
+        this.$message.success(this.$t('addSuccess'))
         this.handleOk()
         this.onClose()
       })
-      // .catch(err => this.requestFailed(err))
     },
-
-    // requestFailed (err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // }
   },
   watch: {},
   props: {
diff --git a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
index 2e4e561..2828ece 100644
--- a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
@@ -21,22 +21,22 @@
       :height="`${windowHeight - windowHeightMinus}px`"
       :scroll-y="{ enabled: false }"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')">
         <template #default="{ row }">
           <span>{{ row.deleted_at || row.updated_at || row.created_at }}</span>
         </template>
       </vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="row.operate_type === 'grant' ? 'green' : 'red'">{{
             operateTypeMap.get(row.operate_type)
           }}</a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="rid" title="用户"></vxe-column>
-      <vxe-column field="resource_type_id" title="资源类型"></vxe-column>
-      <vxe-column field="resources" title="资源">
+      <vxe-column field="rid" :title="$t('user')"></vxe-column>
+      <vxe-column field="resource_type_id" :title="$t('acl.resourceType')"></vxe-column>
+      <vxe-column field="resources" :title="$t('acl.resource')">
         <template #default="{ row }">
           <template v-if="row.resource_ids.length > 0">
             <a-tooltip placement="top">
@@ -55,14 +55,14 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column title="权限">
+      <vxe-column :title="$t('acl.permission')">
         <template #default="{ row }">
           <a-tag v-for="(perm, index) in row.permission_ids" :key="'perms_' + perm + index">
             {{ perm }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -122,10 +122,6 @@ export default {
       loading: true,
       app_id: this.$route.name.split('_')[0],
       tableData: [],
-      operateTypeMap: new Map([
-        ['grant', '授权'],
-        ['revoke', '撤销'],
-      ]),
       queryParams: {
         page: 1,
         page_size: 50,
@@ -133,49 +129,6 @@ export default {
         start: '',
         end: '',
       },
-      permissionTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: this.allUsers,
-        },
-        {
-          alias: '用户',
-          is_choice: true,
-          name: 'rid',
-          value_type: '2',
-          choice_value: this.allRoles,
-        },
-        {
-          alias: '资源类型',
-          is_choice: true,
-          name: 'resource_type_id',
-          value_type: '2',
-          choice_value: this.allResourceTypes,
-        },
-        {
-          alias: '资源',
-          is_choice: true,
-          name: 'resource_id',
-          value_type: '2',
-          choice_value: this.allResources,
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 授权: 'grant' }, { 撤销: 'revoke' }],
-        },
-      ],
     }
   },
   async created() {
@@ -198,6 +151,12 @@ export default {
     },
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['grant', this.$t('grant')],
+        ['revoke', this.$t('acl.cancel')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -207,6 +166,51 @@ export default {
     tableDataLength() {
       return this.tableData.length
     },
+    permissionTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: this.allUsers,
+        },
+        {
+          alias: this.$t('user'),
+          is_choice: true,
+          name: 'rid',
+          value_type: '2',
+          choice_value: this.allRoles,
+        },
+        {
+          alias: this.$t('acl.resourceType'),
+          is_choice: true,
+          name: 'resource_type_id',
+          value_type: '2',
+          choice_value: this.allResourceTypes,
+        },
+        {
+          alias: this.$t('acl.resource'),
+          is_choice: true,
+          name: 'resource_id',
+          value_type: '2',
+          choice_value: this.allResources,
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('grant')]: 'grant' }, { [this.$t('acl.cancel')]: 'revoke' }],
+        },
+      ]
+    },
   },
   methods: {
     // 获取数据
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceBatchPerm.vue b/cmdb-ui/src/modules/acl/views/module/resourceBatchPerm.vue
index 7911f69..4d677ab 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceBatchPerm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceBatchPerm.vue
@@ -1,6 +1,6 @@
 <template>
   <CustomDrawer
-    title="便捷授权"
+    :title="$t('acl.convenient')"
     width="500px"
     :maskClosable="false"
     :closable="true"
@@ -10,12 +10,12 @@
     <a-form :form="form">
       <a-form-item>
         <div slot="label" style="display: inline-block">
-          <span>角色列表</span>
+          <span>{{ $t('acl.roleList') }}</span>
           <a-divider type="vertical" />
           <a-switch
             style="display: inline-block"
-            checked-children="用户"
-            un-checked-children="虚拟"
+            :checked-children="$t('user')"
+            :un-checked-children="$t('acl.virtual')"
             @change="handleRoleTypeChange"
             v-model="roleType"
           />
@@ -23,37 +23,37 @@
         <el-select
           :style="{ width: '100%' }"
           size="small"
-          v-decorator="['roleIdList', { rules: [{ required: true, message: '请选择角色名称' }] }]"
+          v-decorator="['roleIdList', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
           multiple
           filterable
-          placeholder="请选择角色名称，可多选！"
+          :placeholder="$t('acl.role_placeholder3')"
         >
           <el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
         </el-select>
       </a-form-item>
 
-      <a-form-item label="权限列表">
+      <a-form-item :label="$t('acl.permissionList')">
         <el-select
           :style="{ width: '100%' }"
           size="small"
           name="permName"
-          v-decorator="['permName', { rules: [{ required: true, message: '请选择权限' }] }]"
+          v-decorator="['permName', { rules: [{ required: true, message: this.$t('acl.permission_placeholder') }] }]"
           multiple
-          placeholder="请选择权限，可多选！"
+          :placeholder="this.$t('acl.permission_placeholder')"
         >
           <el-option v-for="perm in allPerms" :key="perm.name" :value="perm.name" :label="perm.name"></el-option>
         </el-select>
       </a-form-item>
-      <a-form-item label="资源名">
+      <a-form-item :label="$t('acl.resourceName')">
         <a-textarea
-          v-decorator="['resource_names', { rules: [{ required: true, message: '请输入资源名，换行分隔' }] }]"
+          v-decorator="['resource_names', { rules: [{ required: true, message: $t('acl.resourceBatchTips') }] }]"
           :autoSize="{ minRows: 4 }"
-          placeholder="请输入资源名，换行分隔"
+          :placeholder="$t('acl.resourceBatchTips')"
         />
       </a-form-item>
       <div class="custom-drawer-bottom-action">
-        <a-button @click="handleRevoke" type="danger" ghost>权限回收</a-button>
-        <a-button @click="handleSubmit" type="primary">授权</a-button>
+        <a-button @click="handleRevoke" type="danger" ghost>{{ $t('acl.revoke') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('grant') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -98,12 +98,12 @@ export default {
       this.loadRoles(Number(target))
     },
     loadRoles(isUserRole) {
-      searchRole({ page_size: 9999, app_id: this.$route.name.split('_')[0], user_role: isUserRole }).then(res => {
+      searchRole({ page_size: 9999, app_id: this.$route.name.split('_')[0], user_role: isUserRole }).then((res) => {
         this.allRoles = res.roles
       })
     },
     loadPerm(resourceTypeId) {
-      getResourceTypePerms(resourceTypeId).then(res => {
+      getResourceTypePerms(resourceTypeId).then((res) => {
         this.allPerms = res
       })
     },
@@ -111,13 +111,13 @@ export default {
       this.form.validateFields((err, values) => {
         if (!err) {
           console.log(values)
-          values.roleIdList.forEach(roleId => {
+          values.roleIdList.forEach((roleId) => {
             setBatchRoleResourceByResourceName(roleId, {
               resource_names: values.resource_names.split('\n'),
               perms: values.permName,
               resource_type_id: this.resource_type_id,
-            }).then(res => {
-              this.$message.success('授权成功')
+            }).then((res) => {
+              this.$message.success(this.$t('operateSuccess'))
               this.form.resetFields()
             })
           })
@@ -128,13 +128,13 @@ export default {
       this.form.validateFields((err, values) => {
         if (!err) {
           console.log(values)
-          values.roleIdList.forEach(roleId => {
+          values.roleIdList.forEach((roleId) => {
             setBatchRoleResourceRevokeByResourceName(roleId, {
               resource_names: values.resource_names.split('\n'),
               perms: values.permName,
               resource_type_id: this.resource_type_id,
-            }).then(res => {
-              this.$message.success('权限回收成功')
+            }).then((res) => {
+              this.$message.success(this.$t('operateSuccess'))
               this.form.resetFields()
             })
           })
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
index cb53d2e..f9a9e71 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
@@ -8,27 +8,27 @@
     width="30%"
   >
     <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-      <a-form-item label="资源名">
+      <a-form-item :label="$t('acl.resourceName')">
         <a-input
           name="name"
           placeholder=""
-          v-decorator="['name', { rules: [{ required: true, message: '请输入资源名' }] }]"
+          v-decorator="['name', { rules: [{ required: true, message: $t('acl.resourceNameInput') }] }]"
         />
       </a-form-item>
 
-      <a-form-item label="资源类型">
+      <a-form-item :label="$t('acl.resourceType')">
         <a-select v-model="selectedTypeId">
           <a-select-option v-for="type in allTypes" :key="type.id">{{ type.name }}</a-select-option>
         </a-select>
       </a-form-item>
 
-      <a-form-item label="是否组">
+      <a-form-item :label="$t('acl.isGroup')">
         <a-radio-group v-model="isGroup">
           <a-radio :value="true">
-            是
+            {{ $t('yes') }}
           </a-radio>
           <a-radio :value="false">
-            否
+            {{ $t('no') }}
           </a-radio>
         </a-radio-group>
       </a-form-item>
@@ -36,8 +36,8 @@
         <a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
       </a-form-item>
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -52,7 +52,6 @@ export default {
   name: 'ResourceForm',
   data() {
     return {
-      drawerTitle: '新增资源',
       drawerVisible: false,
       allTypes: [],
       isGroup: false,
@@ -68,7 +67,11 @@ export default {
     this.getAllResourceTypes()
   },
 
-  computed: {},
+  computed: {
+    drawerTitle() {
+      return this.$t('acl.addResource')
+    },
+  },
   mounted() {},
   methods: {
     getAllResourceTypes() {
@@ -95,7 +98,7 @@ export default {
           values.type_id = this.selectedTypeId
           values.app_id = this.$route.name.split('_')[0]
           if (values.id) {
-            this.$message.error('错误提示')
+            this.$message.error(this.$t('acl.errorTips'))
           } else {
             this.createResource(values)
           }
@@ -105,23 +108,17 @@ export default {
     createResource(data) {
       if (!this.isGroup) {
         addResource(data).then((res) => {
-          this.$message.success(`添加成功`)
+          this.$message.success(this.$t('addSuccess'))
           this.onClose()
         })
         // .catch(err => this.requestFailed(err))
       } else {
         addResourceGroup(data).then((res) => {
-          this.$message.success(`添加成功`)
+          this.$message.success(this.$t('addSuccess'))
           this.onClose()
         })
-        // .catch(err => this.requestFailed(err))
       }
     },
-
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
   },
   watch: {
     '$route.name': function(newValue, oldValue) {
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceGroupMember.vue b/cmdb-ui/src/modules/acl/views/module/resourceGroupMember.vue
index 0cca1c3..5660a30 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceGroupMember.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceGroupMember.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model="visible" :title="`组成员：${editRecord.name}`" :width="800" :footer="null">
+  <a-modal v-model="visible" :title="`${$t('acl.groupMember')}${editRecord.name}`" :width="800" :footer="null">
     <div :style="{ maxHeight: '500px', overflow: 'auto' }">
       <a-tag :style="{ marginBottom: '5px' }" v-for="mem in members" :key="mem.name">
         {{ mem.name }}
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceGroupModal.vue b/cmdb-ui/src/modules/acl/views/module/resourceGroupModal.vue
index 8fd7307..62fbf7a 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceGroupModal.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceGroupModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model="visible" :title="`成员管理：${editRecord.name}`" @ok="handleSubmit" :width="690">
+  <a-modal v-model="visible" :title="`${$t('acl.memberManage')}${editRecord.name}`" @ok="handleSubmit" :width="690">
     <!-- <CustomTransfer
       ref="customTransfer"
       :show-search="true"
@@ -26,7 +26,7 @@
       @selectChange="selectChange"
       :selectedKeys="selectedKeys"
     >
-      <span slot="notFoundContent">暂无数据</span>
+      <span slot="notFoundContent">{{ $t('noData') }}</span>
       <template slot="children" slot-scope="{ props: { direction, filteredItems } }">
         <div class="ant-transfer-list-content" v-if="direction === 'right'">
           <div
@@ -104,7 +104,7 @@ export default {
       })
       updateResourceGroup(this.editRecord['id'], { items: items.join(',') }).then(() => {
         this.visible = false
-        this.$message.success('更新成功！')
+        this.$message.success(this.$t('updateSuccess'))
       })
       // .catch(err => this.$httpError(err))
     },
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
index a0b4d9c..56dbe64 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
@@ -4,7 +4,7 @@
       ref="child"
       :attrList="resourceTableAttrList"
       :hasSwitch="true"
-      switchValue="组"
+      :switchValue="$t('acl.group2')"
       @onSwitchChange="onSwitchChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
@@ -22,30 +22,30 @@
       resizable
       :height="`${windowHeight - 310}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="link_id" title="资源名">
+      <vxe-column field="link_id" :title="$t('acl.resourceName')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.description }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -99,40 +99,6 @@ export default {
       checked: false,
       tableData: [],
       app_id: this.$route.name.split('_')[0],
-      resourceTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: this.allUsers,
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
-        },
-        {
-          alias: '资源名',
-          is_choice: true,
-          name: 'link_id',
-          value_type: '2',
-          choice_value: this.allResources,
-        },
-      ],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['update', 'orange'],
@@ -170,9 +136,47 @@ export default {
     windowHeight() {
       return this.$store.state.windowHeight
     },
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+      ])
+    },
     tableDataLength() {
       return this.tableData.length
     },
+    resourceTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: this.allUsers,
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
+        },
+        {
+          alias: this.$t('acl.resourceName'),
+          is_choice: true,
+          name: 'link_id',
+          value_type: '2',
+          choice_value: this.allResources,
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -280,7 +284,7 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          item.description = `新建资源：${item.current.name}`
+          item.description = `${this.$t('acl.newResource')}${item.current.name}`
           break
         }
         case 'update': {
@@ -290,9 +294,9 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                item.description += ` 【 ${key} : 改为 ${newVal} 】 `
+                item.description += ` 【 ${key} : -> ${newVal} 】 `
               } else {
-                item.description += ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
+                item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
           }
@@ -300,18 +304,18 @@ export default {
           const currentResource_ids = item.currentResource_ids
           if (!_.isEqual(originResource_ids, currentResource_ids)) {
             if (originResource_ids.length === 0) {
-              const str = ` 【 resource_ids : 新增 ${currentResource_ids} 】 `
+              const str = ` 【 resource_ids : ${this.$t('new')} ${currentResource_ids} 】 `
               item.description += str
             } else {
-              const str = ` 【 resource_ids : 由 ${originResource_ids} 改为 ${currentResource_ids} 】 `
+              const str = ` 【 resource_ids : ${originResource_ids} -> ${currentResource_ids} 】 `
               item.description += str
             }
           }
-          if (!item.description) item.description = '没有修改'
+          if (!item.description) item.description = this.$t('acl.noChange')
           break
         }
         case 'delete': {
-          item.description = `删除资源：${item.origin.name}`
+          item.description = `${this.$t('acl.deleteResource')}${item.origin.name}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue b/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
index 543ea78..2ac0824 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
@@ -17,7 +17,7 @@
     >
       <vxe-column
         field="name"
-        title="角色名"
+        :title="$t('acl.role')"
         width="20%"
         :filters="[{ data: '' }]"
         :filter-method="filterNameMethod"
@@ -32,19 +32,19 @@
               v-model="option.data"
               @input="$panel.changeOption($event, !!option.data, option)"
               @keyup.enter="$panel.confirmFilter()"
-              placeholder="按回车确认筛选"
+              :placeholder="$t('acl.pressEnter')"
             />
           </template>
         </template>
       </vxe-column>
-      <vxe-column field="users" title="下属用户" width="35%">
+      <vxe-column field="users" :title="$t('acl.subordinateUsers')" width="35%">
         <template #default="{row}">
           <a-tag color="green" v-for="user in row.users" :key="user.nickname">
             {{ user.nickname }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="perms" title="权限列表" width="35%">
+      <vxe-column field="perms" :title="$t('acl.permissionList')" width="35%">
         <template #default="{row}">
           <a-tag
             closable
@@ -57,43 +57,18 @@
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="operate" title="批量操作">
+      <vxe-column field="operate" :title="$t('batchOperate')">
         <template #default="{row}">
           <a-button size="small" type="danger" @click="handleClearAll(row)">
-            清空
+            {{ $t('clear') }}
           </a-button>
         </template>
       </vxe-column>
       <template slot="empty">
         <img :src="require(`@/assets/data_empty.png`)" />
-        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">{{ $t('noData') }}</p>
       </template>
     </vxe-table>
-    <!-- <a-table
-      :columns="columns"
-      :dataSource="resPerms"
-      :rowKey="record => record.name"
-      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录` }"
-      showPagination="auto"
-      ref="rTable"
-      size="middle"
-    >
-      <div slot="perms" slot-scope="text">
-        <a-tag closable color="cyan" v-for="perm in text" :key="perm.name" @close="deletePerm(perm.rid, perm.name)">
-          {{ perm.name }}
-        </a-tag>
-      </div>
-      <div slot="users" slot-scope="text">
-        <a-tag color="green" v-for="user in text" :key="user.nickname">
-          {{ user.nickname }}
-        </a-tag>
-      </div>
-      <div slot="operate" slot-scope="text">
-        <a-button size="small" type="danger" @click="handleClearAll(text)">
-          清空
-        </a-button>
-      </div>
-    </a-table> -->
   </CustomDrawer>
 </template>
 <script>
@@ -112,40 +87,11 @@ export default {
   data() {
     return {
       isGroup: false,
-      drawerTitle: '权限列表',
       drawerVisible: false,
       record: null,
       allPerms: [],
       resPerms: [],
       roleID: null,
-      // columns: [
-      //   {
-      //     title: '角色名',
-      //     dataIndex: 'name',
-      //     sorter: false,
-      //     width: 50,
-      //   },
-      //   {
-      //     title: '下属用户',
-      //     dataIndex: 'users',
-      //     sorter: false,
-      //     width: 150,
-      //     scopedSlots: { customRender: 'users' },
-      //   },
-      //   {
-      //     title: '权限列表',
-      //     dataIndex: 'perms',
-      //     sorter: false,
-      //     width: 150,
-      //     scopedSlots: { customRender: 'perms' },
-      //   },
-      //   {
-      //     title: '批量操作',
-      //     sorter: false,
-      //     width: 50,
-      //     scopedSlots: { customRender: 'operate' },
-      //   },
-      // ],
       childrenDrawer: false,
       allRoles: [],
     }
@@ -154,6 +100,9 @@ export default {
     ...mapState({
       windowHeight: (state) => state.windowHeight,
     }),
+    drawerTitle() {
+      return this.$t('acl.permissionList')
+    }
   },
   beforeCreate() {
     this.form = this.$form.createForm(this)
@@ -175,7 +124,7 @@ export default {
           perms: [],
           app_id: this.$route.name.split('_')[0],
         }).then((res) => {
-          this.$message.success('删除成功')
+          this.$message.success(this.$t('deleteSuccess'))
           this.$nextTick(() => {
             this.getResPerms(this.record.id)
           })
@@ -185,7 +134,7 @@ export default {
           perms: [],
           app_id: this.$route.name.split('_')[0],
         }).then((res) => {
-          this.$message.success('删除成功')
+          this.$message.success(this.$t('deleteSuccess'))
           // for (let i = 0; i < this.resPerms.length; i++) {
           //   if (this.resPerms[i].name === text.name) {
           //     this.resPerms[i].perms = []
@@ -227,7 +176,7 @@ export default {
           perms: [permName],
           app_id: this.$route.name.split('_')[0],
         }).then((res) => {
-          this.$message.success(`删除成功`)
+          this.$message.success(this.$t('deleteSuccess'))
         })
         // .catch(err => this.requestFailed(err))
       } else {
@@ -235,18 +184,13 @@ export default {
           perms: [permName],
           app_id: this.$route.name.split('_')[0],
         }).then((res) => {
-          this.$message.success(`删除成功`)
+          this.$message.success(this.$t('deleteSuccess'))
         })
-        // .catch(err => this.requestFailed(err))
       }
     },
     handleCancel(e) {
       this.drawerVisible = false
     },
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
     filterNameMethod({ option, row }) {
       return row.name.toLowerCase().includes(option.data.toLowerCase())
     },
diff --git a/cmdb-ui/src/modules/acl/views/module/resourcePermManageForm.vue b/cmdb-ui/src/modules/acl/views/module/resourcePermManageForm.vue
index 7fc4e34..b3bf4d1 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourcePermManageForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourcePermManageForm.vue
@@ -3,42 +3,42 @@
     <a-form :form="form">
       <a-form-item>
         <div slot="label" style="display: inline-block">
-          <span>角色列表</span>
+          <span>{{ $t('acl.roleList') }}</span>
           <a-divider type="vertical" />
           <a-switch
             style="display: inline-block"
-            checked-children="用户"
-            un-checked-children="虚拟"
+            :checked-children="$t('user')"
+            :un-checked-children="$t('acl.virtual')"
             @change="handleRoleTypeChange"
           />
         </div>
         <el-select
           :style="{ width: '100%' }"
           size="small"
-          v-decorator="['roleIdList', { rules: [{ required: true, message: '请选择角色名称' }] }]"
+          v-decorator="['roleIdList', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
           multiple
           filterable
-          placeholder="请选择角色名称，可多选！"
+          :placeholder="$t('acl.role_placeholder3')"
         >
           <el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
         </el-select>
       </a-form-item>
 
-      <a-form-item label="权限列表">
+      <a-form-item :label="$t('acl.permissionList')">
         <el-select
           :style="{ width: '100%' }"
           size="small"
           name="permName"
-          v-decorator="['permName', { rules: [{ required: true, message: '请选择权限' }] }]"
+          v-decorator="['permName', { rules: [{ required: true, message: $t('acl.permission_placeholder') }] }]"
           multiple
-          placeholder="请选择权限，可多选！"
+          :placeholder="$t('acl.permission_placeholder') "
         >
           <el-option v-for="perm in allPerms" :key="perm.name" :value="perm.name" :label="perm.name"></el-option>
         </el-select>
       </a-form-item>
       <div class="custom-drawer-bottom-action">
-        <a-button @click="closeForm">取消</a-button>
-        <a-button @click="handleSubmit" type="primary" :loading="loading">确定</a-button>
+        <a-button @click="closeForm">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="loading">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -117,16 +117,12 @@ export default {
       this.type = type
       if (Array.isArray(record)) {
         this.loadPerm(record[0]['resource_type_id'])
-        this.title = `${type === 'grant' ? '批量授权' : '批量权限回收'}`
+        this.title = `${type === 'grant' ? this.$t('acl.batchGrant') : this.$t('acl.batchRevoke')}`
       } else {
-        this.title = `添加授权：${record.name}`
+        this.title = `${this.$t('acl.editPerm')}${record.name}`
         this.loadPerm(record['resource_type_id'])
       }
     },
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
     handleSubmit(e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
@@ -136,16 +132,10 @@ export default {
             this.loading = true
             if (!this.isGroup) {
               if (Array.isArray(this.instance)) {
-                // const promises = this.instance.map(item => {
-                //   return setRoleResourcePerm(roleId, item.id, params)
-                // })
-                // Promise.all(promises).then(() => {
-                //   this.$message.success('添加授权成功')
-                // })
                 if (this.type === 'grant') {
                   setBatchRoleResourcePerm(roleId, { ...params, resource_ids: this.instance.map((a) => a.id) })
                     .then((res) => {
-                      this.$message.success('添加授权成功')
+                      this.$message.success(this.$t('operateSuccess'))
                     })
                     .finally(() => {
                       this.loading = false
@@ -153,7 +143,7 @@ export default {
                 } else {
                   setBatchRoleResourceRevoke(roleId, { ...params, resource_ids: this.instance.map((a) => a.id) })
                     .then((res) => {
-                      this.$message.success('批量权限回收成功')
+                      this.$message.success(this.$t('operateSuccess'))
                     })
                     .finally(() => {
                       this.loading = false
@@ -162,7 +152,7 @@ export default {
               } else {
                 setRoleResourcePerm(roleId, this.instance.id, params)
                   .then((res) => {
-                    this.$message.success('添加授权成功')
+                    this.$message.success(this.$t('operateSuccess'))
                   })
                   .finally(() => {
                     this.loading = false
@@ -170,16 +160,10 @@ export default {
               }
             } else {
               if (Array.isArray(this.instance)) {
-                // const promises = this.instance.map(item => {
-                //   return setRoleResourceGroupPerm(roleId, item.id, params)
-                // })
-                // Promise.all(promises).then(() => {
-                //   this.$message.success('添加授权成功')
-                // })
                 if (this.type === 'grant') {
                   setBatchRoleResourceGroupPerm(roleId, { ...params, group_ids: this.instance.map((a) => a.id) })
                     .then((res) => {
-                      this.$message.success('添加授权成功')
+                      this.$message.success(this.$t('operateSuccess'))
                     })
                     .finally(() => {
                       this.loading = false
@@ -190,7 +174,7 @@ export default {
                     group_ids: this.instance.map((a) => a.id),
                   })
                     .then((res) => {
-                      this.$message.success('批量权限回收成功')
+                      this.$message.success(this.$t('operateSuccess'))
                     })
                     .finally(() => {
                       this.loading = false
@@ -199,7 +183,7 @@ export default {
               } else {
                 setRoleResourceGroupPerm(roleId, this.instance.id, params)
                   .then((res) => {
-                    this.$message.success('添加授权成功')
+                    this.$message.success(this.$t('operateSuccess'))
                   })
                   .finally(() => {
                     this.loading = false
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
index 62b49f8..e704a5f 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
@@ -1,32 +1,32 @@
 <template>
   <CustomDrawer
     :closable="false"
-    :title="drawerTitle"
+    :title="$t('acl.addReourceType')"
     :visible="drawerVisible"
     @close="onClose"
     placement="right"
     width="500px"
   >
     <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-      <a-form-item label="类型名">
+      <a-form-item :label="$t('acl.typeName')">
         <a-input
           name="name"
-          placeholder="类型名称"
-          v-decorator="['name', { rules: [{ required: true, message: '请输入类型名' }] }]"
+          :placeholder="$t('acl.typeName')"
+          v-decorator="['name', { rules: [{ required: true, message: $t('acl.typeNameInput') }] }]"
         />
       </a-form-item>
 
-      <a-form-item label="描述">
+      <a-form-item :label="$t('desc')">
         <a-textarea
-          placeholder="请输入描述信息..."
+          :placeholder="$t('acl.descInput')"
           name="description"
           :rows="4"
           v-decorator="['description', { rules: [] }]"
         />
       </a-form-item>
 
-      <a-form-item label="权限">
-        <a-select mode="tags" v-model="perms" style="width: 100%" placeholder="请输入权限名..."> </a-select>
+      <a-form-item :label="$t('acl.permission')">
+        <a-select mode="tags" v-model="perms" style="width: 100%" :placeholder="$t('acl.permInput')"> </a-select>
       </a-form-item>
 
       <a-form-item>
@@ -34,8 +34,8 @@
       </a-form-item>
 
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -48,7 +48,6 @@ export default {
   name: 'ResourceForm',
   data() {
     return {
-      drawerTitle: '新增资源类型',
       drawerVisible: false,
       perms: [],
     }
@@ -104,7 +103,7 @@ export default {
     },
     updateResourceType(id, data) {
       updateResourceTypeById(id, data).then((res) => {
-        this.$message.success(`更新成功`)
+        this.$message.success(this.$t('updateSuccess'))
         this.handleOk()
         this.onClose()
       })
@@ -113,17 +112,11 @@ export default {
 
     createResourceType(data) {
       addResourceType(data).then((res) => {
-        this.$message.success(`添加成功`)
+        this.$message.success(this.$t('addSuccess'))
         this.handleOk()
         this.onClose()
       })
-      // .catch(err => this.requestFailed(err))
     },
-
-    // requestFailed (err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // }
   },
   watch: {},
   props: {
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
index 773a2cf..635c1e7 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
@@ -16,30 +16,30 @@
       :loading="loading"
       :height="`${windowHeight - 310}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="link_id" title="资源类型名">
+      <vxe-column field="link_id" :title="$t('acl.resourceTypeName')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.changeDescription }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -93,40 +93,6 @@ export default {
       checked: false,
       tableData: [],
       app_id: this.$route.name.split('_')[0],
-      resourceTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: this.allUsers,
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
-        },
-        {
-          alias: '资源类型',
-          is_choice: true,
-          name: 'link_id',
-          value_type: '2',
-          choice_value: this.allResourceTypes,
-        },
-      ],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['update', 'orange'],
@@ -155,12 +121,50 @@ export default {
     },
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
     tableDataLength() {
       return this.tableData.length
     },
+    resourceTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: this.allUsers,
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
+        },
+        {
+          alias: this.$t('acl.resourceType'),
+          is_choice: true,
+          name: 'link_id',
+          value_type: '2',
+          choice_value: this.allResourceTypes,
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -236,7 +240,9 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          item.changeDescription = `新增资源类型：${item.current.name}\n描述：${item.current.description}\n权限：${item.extra.permission_ids.current}`
+          item.changeDescription = `${this.$t('acl.addReourceType')}：${item.current.name}\n${this.$t('desc')}：${
+            item.current.description
+          }\n${this.$t('acl.permission')}: ${item.extra.permission_ids.current}`
           break
         }
         case 'update': {
@@ -246,10 +252,10 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null || oldVal === '') {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 \n`
+                const str = ` 【 ${key} : -> ${newVal} 】 \n`
                 item.changeDescription += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 \n`
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 \n`
                 item.changeDescription += str
               }
             }
@@ -257,13 +263,13 @@ export default {
           const currentPerms = item.extra.permission_ids.current
           const originPerms = item.extra.permission_ids.origin
           if (!_.isEqual(currentPerms, originPerms)) {
-            item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
+            item.changeDescription += ` 【 permission_ids : ${originPerms} -> ${currentPerms} 】 `
           }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
+          if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
           break
         }
         case 'delete': {
-          item.changeDescription = `删除资源类型：${item.origin.name}\n描述：${item.origin.description}\n权限：${item.extra.permission_ids.origin}`
+          item.changeDescription = `${this.$t('acl.deleteResourceType')}${item.origin.name}\n${this.$t('desc')}: ${item.origin.description}\n${this.$t('acl.permission')}: ${item.extra.permission_ids.origin}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
index c3dec53..eeb6efe 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
@@ -2,12 +2,12 @@
   <CustomDrawer
     width="800px"
     placement="left"
-    title="资源列表"
+    :title="$t('acl.resourceList')"
     @close="handleCancel"
     :visible="visible"
     :hasFooter="false"
   >
-    <a-form-item label="资源类型" :label-col="{ span: 2 }" :wrapper-col="{ span: 14 }">
+    <a-form-item :label="$t('acl.resourceType')" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
       <a-select v-model="typeSelected" style="width:100%" @change="refresh">
         <a-select-option v-for="type in resourceTypes" :value="type.id" :key="type.id">{{ type.name }}</a-select-option>
       </a-select>
@@ -22,7 +22,7 @@
     >
       <vxe-column
         field="name"
-        title="资源名"
+        :title="$t('acl.resourceName')"
         width="30%"
         :filters="[{ data: '' }]"
         :filter-method="filterNameMethod"
@@ -30,7 +30,7 @@
       >
         <template #header="{ column }">
           <span>{{ column.title }}</span>
-          <a-tooltip title="复制资源名">
+          <a-tooltip :title="$t('acl.copyResource')">
             <a-icon @click="copyResourceName" class="resource-user-form-copy" theme="filled" type="copy" />
           </a-tooltip>
         </template>
@@ -48,7 +48,7 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column field="permissions" title="权限列表" width="70%">
+      <vxe-column field="permissions" :title="$t('acl.permissionList')" width="70%">
         <template #default="{row}">
           <a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
         </template>
@@ -58,69 +58,6 @@
         <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
       </template>
     </vxe-table>
-    <!-- <a-table
-      :columns="columns"
-      :dataSource="records"
-      :rowKey="record => record.id"
-      :pagination="false"
-      ref="rTable"
-      size="middle"
-      :scroll="{ y: 300 }"
-    > -->
-    <!-- <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
-          <a-input
-            v-ant-ref="c => searchInput = c"
-            :placeholder="` ${column.title}`"
-            :value="selectedKeys[0]"
-            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-            @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
-            style="width: 188px; margin-bottom: 8px; display: block;"
-          />
-          <a-button
-            type="primary"
-            @click="() => handleSearch(selectedKeys, confirm, column)"
-            icon="search"
-            size="small"
-            style="width: 90px; margin-right: 8px"
-          >搜索</a-button>
-          <a-button
-            @click="() => handleReset(clearFilters, column)"
-            size="small"
-            style="width: 90px"
-          >重置</a-button>
-        </div>
-        <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
-
-        <template slot="nameSearchRender" slot-scope="text">
-          <span v-if="columnSearchText.name">
-            <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
-              <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
-              <template v-else>{{ fragment }}</template>
-            </template>
-          </span>
-          <template v-else>{{ text }}</template>
-        </template> -->
-    <!-- <template slot="permissions" slot-scope="record">
-        <a-tag color="cyan" v-for="(r, index) in record" :key="index">{{ r }}</a-tag>
-      </template>
-    </a-table> -->
-    <!-- <div
-      :style="{
-        position: 'absolute',
-        left: 0,
-        bottom: 0,
-        width: '100%',
-        borderTop: '1px solid #e9e9e9',
-        padding: '10px 16px',
-        background: '#fff',
-        textAlign: 'right',
-      }"
-    >
-      <a-button :style="{marginRight: '8px'}" @click="handleCancel">
-        取消
-      </a-button>
-      <a-button @click="handleOk" type="primary">确定</a-button>
-    </div> -->
   </CustomDrawer>
 </template>
 <script>
@@ -141,33 +78,6 @@ export default {
         name: '',
       },
       filterName: '',
-      // columns: [
-      //   {
-      //     title: '资源名',
-      //     field: 'name',
-      //     sorter: false,
-      //     width: '30%',
-      //     // scopedSlots: {
-      //     //   customRender: 'nameSearchRender',
-      //     //   filterDropdown: 'filterDropdown',
-      //     //   filterIcon: 'filterIcon'
-      //     // },
-      //     // onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
-      //     // onFilterDropdownVisibleChange: (visible) => {
-      //     //   if (visible) {
-      //     //     setTimeout(() => {
-      //     //       this.searchInput.focus()
-      //     //     }, 0)
-      //     //   }
-      //     // }
-      //   },
-      //   {
-      //     title: '权限列表',
-      //     field: 'permissions',
-      //     width: '70%',
-      //     slots: { default: 'permissions_default' },
-      //   },
-      // ],
     }
   },
   computed: {
@@ -184,14 +94,6 @@ export default {
       this.rid = record.id
       this.refresh()
     },
-    // handleSearch(selectedKeys, confirm, column) {
-    //   confirm()
-    //   this.columnSearchText[column.dataIndex] = selectedKeys[0]
-    // },
-    // handleReset(clearFilters, column) {
-    //   clearFilters()
-    //   this.columnSearchText[column.dataIndex] = ''
-    // },
     loadResourceTypes() {
       this.resourceTypes = []
       const appId = this.$route.name.split('_')[0]
@@ -204,7 +106,6 @@ export default {
           this.typeSelected = null
         }
       })
-      // .catch(err => this.$httpError(err))
     },
     handleOk() {
       this.visible = false
@@ -217,7 +118,6 @@ export default {
         }).then(res => {
           this.records = res.resources
         })
-        // .catch(err=>this.$httpError(err))
       }
     },
     handleCancel() {
@@ -238,7 +138,7 @@ export default {
         .join('\n')
 
       this.copy(val, () => {
-        this.$message.success('复制成功')
+        this.$message.success(this.$t('copySuccess'))
       })
     },
     copy(value, cb) {
diff --git a/cmdb-ui/src/modules/acl/views/module/roleForm.vue b/cmdb-ui/src/modules/acl/views/module/roleForm.vue
index 4c6a19e..7565055 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleForm.vue
@@ -8,40 +8,29 @@
     width="500px"
   >
     <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
-      <a-form-item label="角色名">
+      <a-form-item :label="$t('acl.role')">
         <a-input
           name="name"
-          placeholder="角色名"
-          v-decorator="['name', { rules: [{ required: true, message: '请输入角色名' }] }]"
+          :placeholder="$t('acl.role_placeholder1')"
+          v-decorator="['name', { rules: [{ required: true, message: $t('acl.role_placeholder1') }] }]"
         />
       </a-form-item>
-      <a-form-item v-if="$route.name.split('_')[0] !== 'acl'" label="密码">
-        <a-input name="password" placeholder="密码" v-decorator="['password', { rules: [{ required: false }] }]" />
+      <a-form-item v-if="$route.name.split('_')[0] !== 'acl'" :label="$t('acl.password')">
+        <a-input name="password" :placeholder="$t('acl.password')" v-decorator="['password', { rules: [{ required: false }] }]" />
       </a-form-item>
-      <!-- <a-form-item label="继承自">
-        <a-select
-          showSearch
-          v-model="selectedParents"
-          :filterOption="false"
-          placeholder="可选择继承角色"
-          mode="multiple"
-        >
-          <a-select-option v-for="role in scrollData" :key="role.id">{{ role.name }}</a-select-option>
-        </a-select>
-      </a-form-item> -->
-      <a-form-item label="继承自">
+      <a-form-item :label="$t('acl.inheritedFrom')">
         <el-select
           :style="{ width: '100%' }"
           size="small"
           v-model="selectedParents"
           multiple
           filterable
-          placeholder="可选择继承角色"
+          :placeholder="$t('acl.selectedParents')"
         >
           <el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
         </el-select>
       </a-form-item>
-      <a-form-item label="是否应用管理员">
+      <a-form-item :label="$t('acl.isAppAdmin')">
         <a-switch
           @change="onChange"
           name="is_app_admin"
@@ -53,8 +42,8 @@
       </a-form-item>
 
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -93,7 +82,7 @@ export default {
     //   return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     // },
     handleCreate() {
-      this.drawerTitle = '新增角色'
+      this.drawerTitle = this.$t('acl.addRole')
       this.drawerVisible = true
     },
     onClose() {
@@ -107,7 +96,7 @@ export default {
     },
 
     handleEdit(record) {
-      this.drawerTitle = `编辑：${record.name}`
+      this.drawerTitle = `${this.$t('edit')}: ${record.name}`
       this.drawerVisible = true
       this.current_id = record.id
       const _parents = this.id2parents[record.id]
@@ -142,7 +131,7 @@ export default {
     updateRole(id, data) {
       this.updateParents(id)
       updateRoleById(id, { ...data, app_id: this.$route.name.split('_')[0] }).then((res) => {
-        this.$message.success(`更新成功`)
+        this.$message.success(this.$t('updateSuccess'))
         this.handleOk()
         this.onClose()
       })
@@ -151,7 +140,7 @@ export default {
 
     createRole(data) {
       addRole({ ...data, app_id: this.$route.name.split('_')[0] }).then((res) => {
-        this.$message.success(`添加成功`)
+        this.$message.success(this.$t('addSuccess'))
         this.updateParents(res.id)
         this.handleOk()
         this.onClose()
@@ -171,16 +160,9 @@ export default {
             child_ids: [id],
             app_id: this.$route.name.split('_')[0],
           })
-          // addParentRole(id, item, { app_id: this.$route.name.split('_')[0] })
-          // .catch(err => this.requestFailed(err))
         }
       })
     },
-    // requestFailed(err) {
-    //   console.log(err)
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
   },
   watch: {},
   props: {
diff --git a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
index 10e9468..aecf2b4 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
@@ -4,7 +4,7 @@
       ref="child"
       :attrList="roleTableAttrList"
       :hasSwitch="true"
-      switchValue="角色关系"
+      :switchValue="$t('acl.roleRelation')"
       @onSwitchChange="onSwitchChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
@@ -19,16 +19,16 @@
       resizable
       :height="`${windowHeight - 310}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" title="操作员" width="130px"></vxe-column>
-      <vxe-column field="operate_type" title="操作" width="112px">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" :title="$t('acl.operator')" width="130px"></vxe-column>
+      <vxe-column field="operate_type" :title="$t('operation')" width="112px">
         <template #default="{ row }">
           <template>
             <a-tag :color="handleTagColor(row.operate_type)">{{ operateTypeMap.get(row.operate_type) }}</a-tag>
           </template>
         </template>
       </vxe-column>
-      <vxe-column :title="checked ? '角色' : '角色'">
+      <vxe-column :title="checked ? $t('acl.role2') : $t('acl.role2')">
         <template #default="{ row }">
           <template v-if="!checked">
             <a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
@@ -40,7 +40,7 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column :title="checked ? '继承自' : '管理员'" :width="checked ? '350px' : '80px'">
+      <vxe-column :title="checked ? $t('acl.inheritedFrom') : $t('acl.admin')" :width="checked ? '350px' : '80px'">
         <template #default="{ row }">
           <template v-if="!checked">
             <a-icon type="check" v-if="row.current.is_app_admin" />
@@ -52,14 +52,14 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column title="描述" v-if="!checked">
+      <vxe-column :title="$t('desc')" v-if="!checked">
         <template #default="{ row }">
           <p>
             {{ row.description }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" title="来源" width="100px"></vxe-column>
+      <vxe-column field="source" :title="$t('acl.source')" width="100px"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -105,13 +105,6 @@ export default {
       checked: false,
       tableData: [],
       app_id: this.$route.name.split('_')[0],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['delete', '删除'],
-        ['update', '修改'],
-        ['role_relation_add', '添加角色关系'],
-        ['role_relation_delete', '删除角色关系'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['delete', 'red'],
@@ -127,42 +120,53 @@ export default {
         start: '',
         end: '',
       },
-      roleTableAttrList: [
+    }
+  },
+  computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+        ['role_relation_add', this.$t('acl.roleRelationAdd')],
+        ['role_relation_delete', this.$t('acl.roleRelationDelete')],
+      ])
+    },
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    tableDataLength() {
+      return this.tableData.length
+    },
+    roleTableAttrList() {
+      return [
         {
-          alias: '日期',
+          alias: this.$t('acl.date'),
           is_choice: false,
           name: 'datetime',
           value_type: '3',
         },
         {
-          alias: '操作员',
+          alias: this.$t('acl.operator'),
           is_choice: true,
           name: 'operate_uid',
           value_type: '2',
           choice_value: this.allUsers,
         },
         {
-          alias: '操作',
+          alias: this.$t('operation'),
           is_choice: true,
           name: 'operate_type',
           value_type: '2',
           choice_value: [
-            { 新建: 'create' },
-            { 修改: 'update' },
-            { 删除: 'delete' },
-            { 添加角色关系: 'role_relation_add' },
-            { 删除角色关系: 'role_relation_delete' },
+            { [this.$t('create')]: 'create' },
+            { [this.$t('update')]: 'update' },
+            { [this.$t('delete')]: 'delete' },
+            { [this.$t('acl.roleRelationAdd')]: 'role_relation_add' },
+            { [this.$t('acl.roleRelationDelete')]: 'role_relation_delete' },
           ],
         },
-      ],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    tableDataLength() {
-      return this.tableData.length
+      ]
     },
   },
   async created() {
@@ -273,7 +277,7 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          item.description = `新建角色：${item.current.name}`
+          item.description = `${this.$t('acl.addRole')}${item.current.name}`
           break
         }
         case 'update': {
@@ -283,15 +287,15 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.description += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
-                item.description += str
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
+                item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
           }
-          if (!item.description) item.description = '没有修改'
+          if (!item.description) item.description = this.$t('acl.noChange')
           break
         }
         case 'delete': {
@@ -321,7 +325,7 @@ export default {
           resourceMap.forEach((value, key) => {
             permsArr.push(`${id2resources[key].name}：${value}`)
           })
-          item.description = `继承者：${child_ids}\n继承自：${parent_ids}\n涉及资源及权限：\n${permsArr.join(`\n`)}`
+          item.description = `${this.$t('acl.heir')}：${child_ids}\n${this.$t('acl.inheritedFrom')}：${parent_ids}\n${this.$t('acl.involvingRP')}：\n${permsArr.join(`\n`)}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/module/searchForm.vue b/cmdb-ui/src/modules/acl/views/module/searchForm.vue
index c00509e..b055926 100644
--- a/cmdb-ui/src/modules/acl/views/module/searchForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/searchForm.vue
@@ -19,7 +19,7 @@
               @popupScroll="loadMoreData(attr.name, $event)"
               @search="(value) => fetchData(value, attr.name)"
               v-model="queryParams[attr.name]"
-              placeholder="请选择"
+              :placeholder="$t('placeholder2')"
               v-if="attr.is_choice"
               show-search
               :filter-option="filterOption"
@@ -38,7 +38,6 @@
               @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')],
@@ -67,7 +66,7 @@
                 @popupScroll="loadMoreData(item.name, $event)"
                 @search="(value) => fetchData(value, item.name)"
                 v-model="queryParams[item.name]"
-                placeholder="请选择"
+                :placeholder="$t('placeholder2')"
                 v-if="item.is_choice"
                 show-search
                 :filter-option="filterOption"
@@ -85,7 +84,7 @@
                 :style="{ width: '100%' }"
                 @change="onChange"
                 format="YYYY-MM-DD HH:mm"
-                :placeholder="['开始时间', '结束时间']"
+                :placeholder="[$t('acl.startAt'), $t('acl.endAt')]"
                 v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
                 :show-time="{
                   hideDisabledOptions: true,
@@ -107,13 +106,13 @@
             v-model="checked"
           />
           <a-button :style="{ marginLeft: '8px' }" type="primary" html-type="submit" @click="handleSearch">
-            查询
+            {{ $t('query') }}
           </a-button>
           <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-            重置
+            {{ $t('reset') }}
           </a-button>
           <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle" v-if="attrList.length >= 5">
-            {{ expand ? '隐藏' : '展开' }} <a-icon :type="expand ? 'up' : 'down'" />
+            {{ expand ? $t('expand') : $t('expand') }} <a-icon :type="expand ? 'up' : 'down'" />
           </a>
         </a-col>
       </a-row>
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerForm.vue b/cmdb-ui/src/modules/acl/views/module/triggerForm.vue
index 560f8fa..eb422b8 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerForm.vue
@@ -2,30 +2,30 @@
   <CustomDrawer
     @close="handleClose"
     width="500"
-    :title="`${triggerId ? '修改' : '新建'}触发器`"
+    :title="`${triggerId ? $t('update') : $t('create')}${$t('acl.trigger')}`"
     :visible="visible"
     :maskClosable="false"
   >
     <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
-      <a-form-item label="触发器名">
-        <a-input size="large" v-decorator="['name', { rules: [{ required: true, message: '请输入触发器名' }] }]">
+      <a-form-item :label="$t('name')">
+        <a-input size="large" v-decorator="['name', { rules: [{ required: true, message: $t('acl.triggerNameInput') }] }]">
         </a-input>
       </a-form-item>
-      <a-form-item label="资源名">
-        <a-input size="large" v-decorator="['wildcard']" placeholder="优先正则模式（次通配符）"> </a-input>
+      <a-form-item :label="$t('acl.resourceName')">
+        <a-input size="large" v-decorator="['wildcard']" :placeholder="$t('acl.triggerTips1')"> </a-input>
       </a-form-item>
-      <a-form-item label="创建人">
+      <a-form-item :label="$t('acl.creator')">
         <el-select :style="{ width: '100%' }" filterable multiple v-decorator="['uid']">
           <template v-for="role in roles">
             <el-option v-if="role.uid" :key="role.id" :value="role.uid" :label="role.name">{{ role.name }}</el-option>
           </template>
         </el-select>
       </a-form-item>
-      <a-form-item label="资源类型">
+      <a-form-item :label="$t('acl.resourceType')">
         <el-select
           :style="{ width: '100%' }"
           @change="handleRTChange"
-          v-decorator="['resource_type_id', { rules: [{ required: true, message: '请选择资源类型' }] }]"
+          v-decorator="['resource_type_id', { rules: [{ required: true, message: $t('acl.pleaseSelectType') }] }]"
         >
           <el-option
             v-for="resourceType in resourceTypeList"
@@ -34,25 +34,25 @@
             :label="resourceType.name"
           ></el-option>
         </el-select>
-        <a-tooltip title="查看正则匹配结果">
+        <a-tooltip :title="$t('acl.viewMatchResult')">
           <a class="trigger-form-pattern" @click="handlePattern"><a-icon type="eye"/></a>
         </a-tooltip>
       </a-form-item>
-      <a-form-item label="角色">
+      <a-form-item :label="$t('acl.role2')">
         <el-select
           :style="{ width: '100%' }"
           filterable
           multiple
-          v-decorator="['roles', { rules: [{ required: true, message: '请选择角色' }] }]"
+          v-decorator="['roles', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
         >
           <el-option v-for="role in roles" :key="role.id" :value="role.id" :label="role.name"></el-option>
         </el-select>
       </a-form-item>
-      <a-form-item label="权限">
+      <a-form-item :label="$t('acl.permission')">
         <el-select
           :style="{ width: '100%' }"
           multiple
-          v-decorator="['permissions', { rules: [{ required: true, message: '请选择权限' }] }]"
+          v-decorator="['permissions', { rules: [{ required: true, message: $t('acl.permission_placeholder') }] }]"
         >
           <el-option
             v-for="perm in selectResourceTypePerms"
@@ -62,13 +62,13 @@
           ></el-option>
         </el-select>
       </a-form-item>
-      <a-form-item label="启用/禁用">
+      <a-form-item :label="$t('acl.enable')/$t('acl.disable')">
         <a-switch v-decorator="['enabled', { rules: [], valuePropName: 'checked', initialValue: true }]" />
       </a-form-item>
     </a-form>
     <div class="custom-drawer-bottom-action">
-      <a-button @click="handleClose">取消</a-button>
-      <a-button @click="handleSubmit" type="primary">提交</a-button>
+      <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
+      <a-button @click="handleSubmit" type="primary">{{ $t('submit') }}</a-button>
     </div>
     <TriggerPattern ref="triggerPattern" :roles="roles" />
   </CustomDrawer>
@@ -159,13 +159,13 @@ export default {
         if (this.triggerId) {
           updateTrigger(this.triggerId, { ...values, app_id: this.app_id }).then((res) => {
             this.visible = false
-            this.$message.success('修改成功！')
+            this.$message.success(this.$t('updateSuccess'))
             this.$emit('refresh')
           })
         } else {
           addTrigger({ ...values, app_id: this.app_id }).then((res) => {
             this.visible = false
-            this.$message.success('创建成功!')
+            this.$message.success(this.$t('addSuccess'))
             this.$emit('refresh')
           })
         }
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
index 0c2bbcf..1fa3e6b 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
@@ -16,23 +16,23 @@
       resizable
       :height="`${windowHeight - 310}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="trigger_id" width="250px" title="触发器">
+      <vxe-column field="trigger_id" width="250px" :title="$t('acl.trigger')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.changeDescription }}
@@ -95,13 +95,6 @@ export default {
       app_id: this.$route.name.split('_')[0],
       loading: true,
       tableData: [],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-        ['trigger_apply', '应用'],
-        ['trigger_cancel', '取消'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['delete', 'red'],
@@ -109,41 +102,6 @@ export default {
         ['trigger_apply', 'green'],
         ['trigger_cancel', 'red'],
       ]),
-      triggerTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: this.allUsers,
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [
-            { 新建: 'create' },
-            { 修改: 'update' },
-            { 删除: 'delete' },
-            { 应用: 'trigger_apply' },
-            { 取消: 'trigger_cancel' },
-          ],
-        },
-        {
-          alias: '触发器',
-          is_choice: true,
-          name: 'trigger_id',
-          value_type: '2',
-          choice_value: this.allTriggers,
-        },
-      ],
       queryParams: {
         page: 1,
         page_size: 50,
@@ -164,12 +122,58 @@ export default {
     },
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+        ['trigger_apply', this.$t('acl.apply')],
+        ['trigger_cancel', this.$t('cancel')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
     tableDataLength() {
       return this.tableData.length
     },
+    triggerTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: this.allUsers,
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [
+            { [this.$t('create')]: 'create' },
+            { [this.$t('update')]: 'update' },
+            { [this.$t('delete')]: 'delete' },
+            { [this.$t('acl.apply')]: 'trigger_apply' },
+            { [this.$t('cancel')]: 'trigger_cancel' },
+          ],
+        },
+        {
+          alias: this.$t('acl.trigger'),
+          is_choice: true,
+          name: 'trigger_id',
+          value_type: '2',
+          choice_value: this.allTriggers,
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -220,9 +224,9 @@ export default {
           const str = item.current.roles
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
-          item.changeDescription = `新增触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
+          item.changeDescription = `${this.$t('acl.addTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
             item.current.resource_type_id
-          )}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
+          )}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
             item.current.enabled
           }`
           break
@@ -234,24 +238,24 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.changeDescription += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
-                item.changeDescription += str
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
+                item.changeDescription += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
           }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
+          if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
           break
         }
         case 'delete': {
           const str = item.origin.roles
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
-          item.changeDescription = `删除触发器：${item.origin.name}\n资源类型：${this.allResourceTypesMap.get(
+          item.changeDescription = `${this.$t('acl.deleteTrigger')}: ${item.origin.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
             item.origin.resource_type_id
-          )}，资源名：${item.origin.wildcard}，角色：[${newStr}]\n权限：${item.origin.permissions}\n状态：${
+          )}，this.$t('acl.resourceName')：${item.origin.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.origin.permissions}\n${this.$t('status')}: ${
             item.origin.enabled
           }`
           break
@@ -260,9 +264,9 @@ export default {
           const str = item.current.roles
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
-          item.changeDescription = `应用触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
+          item.changeDescription = `${this.$t('acl.applyTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
             item.current.resource_type_id
-          )}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
+          )}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
             item.current.enabled
           }`
           break
@@ -271,9 +275,9 @@ export default {
           const str = item.current.roles
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
-          item.changeDescription = `取消触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
+          item.changeDescription = `${this.$t('acl.cancelTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
             item.current.resource_type_id
-          )}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
+          )}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
             item.current.enabled
           }`
           break
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue b/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
index a606168..5d75a16 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
@@ -1,7 +1,7 @@
 <template>
   <CustomDrawer
     :hasFooter="false"
-    title="正则匹配结果"
+    :title="$t('acl.viewMatchResult')"
     :visible="patternVisible"
     width="500"
     @close="
@@ -16,16 +16,16 @@
       class="ops-stripe-table"
       :data="tableData"
       :max-height="`${windowHeight - 110}px`">
-      <vxe-table-column field="name" title="资源名"></vxe-table-column>
-      <vxe-table-column field="uid" title="创建人">
+      <vxe-table-column field="name" :title="$t('acl.resourceName')"></vxe-table-column>
+      <vxe-table-column field="uid" :title="$t('acl.creator')">
         <template #default="{row}">
           {{ getRoleName(row.uid) }}
         </template>
       </vxe-table-column>
-      <vxe-table-column field="created_at" title="创建时间"></vxe-table-column>
+      <vxe-table-column field="created_at" :title="$t('created_at')"></vxe-table-column>
       <template slot="empty">
         <img :src="require(`@/assets/data_empty.png`)" />
-        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">{{ $t('noData') }}</p>
       </template>
     </vxe-table>
   </CustomDrawer>
diff --git a/cmdb-ui/src/modules/acl/views/module/userForm.vue b/cmdb-ui/src/modules/acl/views/module/userForm.vue
index 66ff2c7..5f5546b 100644
--- a/cmdb-ui/src/modules/acl/views/module/userForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/userForm.vue
@@ -8,33 +8,38 @@
     width="500px"
   >
     <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-      <a-form-item label="用户名(英文)">
+      <a-form-item :label="$t('acl.username')">
         <a-input
           name="username"
-          placeholder="英文名"
-          v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
+          :placeholder="$t('acl.username_placeholder')"
+          v-decorator="['username', { rules: [{ required: true, message: $t('acl.username_placeholder') }] }]"
         />
       </a-form-item>
-      <a-form-item label="中文名">
-        <a-input name="nickname" v-decorator="['nickname', { rules: [] }]" />
+      <a-form-item :label="$t('acl.nickname')">
+        <a-input
+          name="nickname"
+          :placeholder="$t('acl.nickname_placeholder')"
+          v-decorator="['nickname', { rules: [] }]"
+        />
       </a-form-item>
-      <a-form-item label="密码">
+      <a-form-item :label="$t('acl.password')">
         <a-input
           type="password"
           name="password"
-          v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
+          :placeholder="$t('acl.password_placeholder')"
+          v-decorator="['password', { rules: [{ required: true, message: $t('acl.password_placeholder') }] }]"
         />
       </a-form-item>
 
-      <a-form-item label="部门">
+      <a-form-item :label="$t('acl.department')">
         <a-input name="department" v-decorator="['department', { rules: [] }]" />
       </a-form-item>
 
-      <a-form-item label="小组">
+      <a-form-item :label="$t('acl.group')">
         <a-input name="catalog" v-decorator="['catalog', { rules: [] }]" />
       </a-form-item>
 
-      <a-form-item label="邮箱">
+      <a-form-item :label="$t('acl.email')">
         <a-input
           name="email"
           v-decorator="[
@@ -43,11 +48,11 @@
               rules: [
                 {
                   type: 'email',
-                  message: '请输入正确的邮箱！',
+                  message: $t('acl.email_placeholder'),
                 },
                 {
                   required: true,
-                  message: '请输入邮箱',
+                  message: $t('acl.email_placeholder'),
                 },
               ],
             },
@@ -55,14 +60,14 @@
         />
       </a-form-item>
 
-      <a-form-item label="手机号码">
+      <a-form-item :label="$t('acl.mobile')">
         <a-input
           name="mobile"
-          v-decorator="['mobile', { rules: [{ message: '请输入正确的手机号码', pattern: /^1\d{10}$/ }] }]"
+          v-decorator="['mobile', { rules: [{ message: $t('acl.mobileTips'), pattern: /^1\d{10}$/ }] }]"
         />
       </a-form-item>
 
-      <a-form-item label="是否锁定">
+      <a-form-item :label="$t('acl.isBlock')">
         <a-switch @change="onChange" name="block" v-decorator="['block', { rules: [], valuePropName: 'checked' }]" />
       </a-form-item>
 
@@ -71,8 +76,8 @@
       </a-form-item>
 
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -85,7 +90,6 @@ export default {
   name: 'AttributeForm',
   data() {
     return {
-      drawerTitle: '新增用户',
       drawerVisible: false,
     }
   },
@@ -94,7 +98,11 @@ export default {
     this.form = this.$form.createForm(this)
   },
 
-  computed: {},
+  computed: {
+    drawerTitle() {
+      return this.$t('acl.addUser')
+    },
+  },
   mounted() {},
   methods: {
     handleCreate() {
@@ -142,7 +150,7 @@ export default {
     },
     updateUser(attrId, data) {
       updateUserById(attrId, data).then((res) => {
-        this.$message.success(`更新成功`)
+        this.$message.success(this.$t('updateSuccess'))
         this.handleOk()
         this.onClose()
       })
@@ -151,17 +159,11 @@ export default {
 
     createUser(data) {
       addUser(data).then((res) => {
-        this.$message.success(`添加成功`)
+        this.$message.success(this.$t('addSuccess'))
         this.handleOk()
         this.onClose()
       })
-      // .catch(err => this.requestFailed(err))
     },
-
-    // requestFailed (err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // }
   },
   watch: {},
   props: {
diff --git a/cmdb-ui/src/modules/acl/views/module/usersUnderRoleForm.vue b/cmdb-ui/src/modules/acl/views/module/usersUnderRoleForm.vue
index 8d53f6d..daa81ad 100644
--- a/cmdb-ui/src/modules/acl/views/module/usersUnderRoleForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/usersUnderRoleForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <CustomDrawer :closable="true" :visible="visible" width="500px" @close="handleClose" title="组用户">
-    <a-form-item label="添加用户" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+  <CustomDrawer :closable="true" :visible="visible" width="500px" @close="handleClose" :title="$t('acl.groupUser')">
+    <a-form-item :label="$t('acl.addUser')" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
       <a-row>
         <a-col span="15">
           <el-select v-model="selectedChildrenRole" multiple collapse-tags size="small" filterable>
@@ -14,14 +14,14 @@
           </el-select>
         </a-col>
         <a-col span="5" offset="1">
-          <a-button style="display: inline-block" @click="handleAddRole">确定</a-button>
+          <a-button style="display: inline-block" @click="handleAddRole">{{ $t('confirm') }}</a-button>
         </a-col>
       </a-row>
     </a-form-item>
     <a-card>
       <a-row :gutter="24" v-for="(record, index) in records" :key="record.id" :style="{ marginBottom: '5px' }">
         <a-col :span="20">{{ index + 1 }}、{{ record.nickname }}</a-col>
-        <a-col :span="4"><a-button type="danger" size="small" @click="handleRevokeUser(record)">移除</a-button></a-col>
+        <a-col :span="4"><a-button type="danger" size="small" @click="handleRevokeUser(record)">{{ $t('acl.remove') }}</a-button></a-col>
       </a-row>
     </a-card>
   </CustomDrawer>
@@ -63,34 +63,22 @@ export default {
       this.visible = true
       this.loadRecords(roleId)
     },
-    // filterOption(input, option) {
-    //   return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    // },
     async handleAddRole() {
-      // await this.selectedChildrenRole.forEach(item => {
-      //   addParentRole(item, this.roleId, { app_id: this.$route.name.split('_')[0] }).then(res => {
-      //     this.$message.success('添加成功')
-      //   })
-      //   // .catch(err=>{
-      //   //   this.$httpError(err)
-      //   // })
-
-      // })
       await addBatchParentRole(this.roleId, {
         child_ids: this.selectedChildrenRole,
         app_id: this.$route.name.split('_')[0],
       })
       this.loadRecords(this.roleId)
-      this.$message.success('添加完成')
+      this.$message.success(this.$t('addSuccess'))
       this.selectedChildrenRole = []
     },
     handleRevokeUser(record) {
       const that = this
       this.$confirm({
-        content: '是否确定要移除该用户',
+        content: that.$t('acl.deleteUserConfirm'),
         onOk() {
           delParentRole(record.role.id, that.roleId, { app_id: that.$route.name.split('_')[0] }).then((res) => {
-            that.$message.success('删除成功！')
+            that.$message.success(that.$t('deleteSuccess'))
             that.loadRecords(that.roleId)
           })
           // .catch(err=>that.$httpError(err))
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/index.vue b/cmdb-ui/src/modules/acl/views/operation_history/index.vue
index 66ae9d2..342a14c 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/index.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="acl-operation-history">
     <a-tabs default-active-key="1">
-      <a-tab-pane key="1" tab="权限变更">
+      <a-tab-pane key="1" :tab="$t('acl.permissionChange')">
         <permisson-table></permisson-table>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="角色变更">
+      <a-tab-pane key="2" :tab="$t('acl.roleChange')">
         <role-history-table></role-history-table>
       </a-tab-pane>
-      <a-tab-pane key="3" tab="资源变更">
+      <a-tab-pane key="3" :tab="$t('acl.resourceChange')">
         <resource-history-table></resource-history-table>
       </a-tab-pane>
-      <a-tab-pane key="4" tab="资源类型变更">
+      <a-tab-pane key="4" :tab="$t('acl.resourceTypeChange')">
         <resource-type-history-table></resource-type-history-table>
       </a-tab-pane>
-      <a-tab-pane key="5" tab="触发器变更">
+      <a-tab-pane key="5" :tab="$t('acl.triggerChange')">
         <trigger-history-table></trigger-history-table>
       </a-tab-pane>
     </a-tabs>
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
index 83d52c8..2c927c0 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
@@ -22,22 +22,22 @@
       :height="`${windowHeight - windowHeightMinus}px`"
       :scroll-y="{ enabled: false }"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')">
         <template #default="{ row }">
           <span>{{ row.deleted_at || row.updated_at || row.created_at }}</span>
         </template>
       </vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="row.operate_type === 'grant' ? 'green' : 'red'">{{
             operateTypeMap.get(row.operate_type)
           }}</a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="rid" title="用户"></vxe-column>
-      <vxe-column field="resource_type_id" title="资源类型"></vxe-column>
-      <vxe-column field="resources" title="资源">
+      <vxe-column field="rid" :title="$t('user')"></vxe-column>
+      <vxe-column field="resource_type_id" :title="$t('acl.resourceType')"></vxe-column>
+      <vxe-column field="resources" :title="$t('acl.resource')">
         <template #default="{ row }">
           <template v-if="row.resource_ids.length > 0">
             <a-tooltip placement="top">
@@ -56,14 +56,14 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column title="权限">
+      <vxe-column :title="$t('acl.permission')">
         <template #default="{ row }">
           <a-tag v-for="(perm, index) in row.permission_ids" :key="'perms_' + perm + index">
             {{ perm }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -108,10 +108,6 @@ export default {
       allRolesMap: new Map(),
       allUsersMap: new Map(),
       allResourceTypesMap: new Map(),
-      operateTypeMap: new Map([
-        ['grant', '授权'],
-        ['revoke', '撤销'],
-      ]),
       queryParams: {
         page: 1,
         page_size: 50,
@@ -120,57 +116,63 @@ export default {
       },
       permissionTableAttrList: [
         {
-          alias: '日期',
+          alias: this.$t('acl.date'),
           is_choice: false,
           name: 'datetime',
           value_type: '3',
         },
         {
-          alias: '应用',
+          alias: this.$t('acl.app'),
           is_choice: true,
           name: 'app_id',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '操作员',
+          alias: this.$t('acl.operator'),
           is_choice: true,
           name: 'operate_uid',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '用户',
+          alias: this.$t('user'),
           is_choice: true,
           name: 'rid',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '资源类型',
+          alias: this.$t('acl.resourceType'),
           is_choice: true,
           name: 'resource_type_id',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '资源',
+          alias: this.$t('acl.resource'),
           is_choice: true,
           name: 'resource_id',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '操作',
+          alias: this.$t('operation'),
           is_choice: true,
           name: 'operate_type',
           value_type: '2',
-          choice_value: [{ 授权: 'grant' }, { 撤销: 'revoke' }],
+          choice_value: [{ [this.$t('grant')]: 'grant' }, { [this.$t('acl.cancel')]: 'revoke' }],
         },
       ],
     }
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['grant', this.$t('grant')],
+        ['revoke', this.$t('acl.cancel')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -183,10 +185,10 @@ export default {
   },
   async created() {
     this.$watch(
-      function() {
+      function () {
         return this.permissionTableAttrList[3].choice_value
       },
-      function() {
+      function () {
         delete this.$refs.child.queryParams.rid
         delete this.$refs.child.queryParams.resource_type_id
         delete this.$refs.child.queryParams.resource_id
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
index 18e182b..6078f82 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
@@ -4,7 +4,7 @@
       ref="child"
       :attrList="resourceTableAttrList"
       :hasSwitch="true"
-      switchValue="组"
+      :switchValue="$t('acl.group2')"
       @onSwitchChange="onSwitchChange"
       @expandChange="handleExpandChange"
       @search="handleSearch"
@@ -24,30 +24,30 @@
       :data="tableData"
       :height="`${windowHeight - windowHeightMinus}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="link_id" title="资源名">
+      <vxe-column field="link_id" :title="$t('acl.resouceName')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.description }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -87,47 +87,6 @@ export default {
       allApps: [],
       allUsersMap: new Map(),
       allResourcesMap: new Map(),
-      resourceTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '应用',
-          is_choice: true,
-          name: 'app_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '资源名',
-          is_choice: true,
-          name: 'link_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
-        },
-      ],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['update', 'orange'],
@@ -144,10 +103,10 @@ export default {
   },
   async created() {
     this.$watch(
-      function() {
+      function () {
         return this.resourceTableAttrList[3].choice_value
       },
-      function() {
+      function () {
         delete this.$refs.child.queryParams.link_id
       }
     )
@@ -158,6 +117,13 @@ export default {
     this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -167,6 +133,44 @@ export default {
     tableDataLength() {
       return this.tableData.length
     },
+    resourceTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.app'),
+          is_choice: true,
+          name: 'app_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.resourceName'),
+          is_choice: true,
+          name: 'link_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -347,7 +351,7 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          item.description = `新建资源：${item.current.name}`
+          item.description = `${this.$t('acl.newResource')}${item.current.name}`
           break
         }
         case 'update': {
@@ -357,10 +361,10 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.description += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
                 item.description += str
               }
             }
@@ -369,18 +373,18 @@ export default {
           const currentResource_ids = item.currentResource_ids
           if (!_.isEqual(originResource_ids, currentResource_ids)) {
             if (originResource_ids.length === 0) {
-              const str = ` 【 resource_ids : 新增 ${currentResource_ids} 】 `
+              const str = ` 【 resource_ids : ${this.$t('new')} ${currentResource_ids} 】 `
               item.description += str
             } else {
-              const str = ` 【 resource_ids : 由 ${originResource_ids} 改为 ${currentResource_ids} 】 `
+              const str = ` 【 resource_ids : ${originResource_ids} -> ${currentResource_ids} 】 `
               item.description += str
             }
           }
-          if (!item.description) item.description = '没有修改'
+          if (!item.description) item.description = this.$t('acl.noChange')
           break
         }
         case 'delete': {
-          item.description = `删除资源：${item.origin.name}`
+          item.description = `${this.$t('acl.deleteResource')}${item.origin.name}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
index 67a812c..357a6d1 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
@@ -18,30 +18,30 @@
       :loading="loading"
       :height="`${windowHeight - windowHeightMinus}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="link_id" width="159px" title="资源类型名">
+      <vxe-column field="link_id" width="159px" :title="$t('acl.resourceTypeName')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.changeDescription }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -78,47 +78,6 @@ export default {
       allApps: [],
       allUsersMap: new Map(),
       allResourcesMap: new Map(),
-      resourceTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '应用',
-          is_choice: true,
-          name: 'app_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '资源类型',
-          is_choice: true,
-          name: 'link_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
-        },
-      ],
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['update', 'orange'],
@@ -135,10 +94,10 @@ export default {
   },
   async created() {
     this.$watch(
-      function() {
+      function () {
         return this.resourceTableAttrList[3].choice_value
       },
-      function() {
+      function () {
         delete this.$refs.child.queryParams.link_id
       }
     )
@@ -149,6 +108,13 @@ export default {
     this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -158,6 +124,44 @@ export default {
     tableDataLength() {
       return this.tableData.length
     },
+    resourceTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.app'),
+          is_choice: true,
+          name: 'app_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.resourceType'),
+          is_choice: true,
+          name: 'link_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -283,10 +287,12 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          const description = item.current?.description === undefined ? '无' : item.current?.description
+          const description = item.current?.description === undefined ? this.$t('acl.none') : item.current?.description
           const permission =
-            item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current
-          item.changeDescription = `新增资源类型：${item.current.name}\n描述：${description}\n权限：${permission}`
+            item.extra.permission_ids?.current === undefined ? this.$t('acl.none') : item.extra.permission_ids?.current
+          item.changeDescription = `${this.$t('acl.addReourceType')}：${item.current.name}\n${this.$t(
+            'desc'
+          )}：${description}\n${this.$t('acl.permission')}：${permission}`
           break
         }
         case 'update': {
@@ -296,27 +302,29 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null || oldVal === '') {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 \n`
+                const str = ` 【 ${key} : -> ${newVal} 】 \n`
                 item.changeDescription += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 \n`
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 \n`
                 item.changeDescription += str
               }
             }
           }
           const currentPerms =
-            item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current
-          const originPerms = item.extra.permission_ids?.origin === undefined ? '无' : item.extra.permission_ids?.origin
+            item.extra.permission_ids?.current === undefined ? this.$t('acl.none') : item.extra.permission_ids?.current
+          const originPerms = item.extra.permission_ids?.origin === undefined ? this.$t('acl.none') : item.extra.permission_ids?.origin
           if (!_.isEqual(currentPerms, originPerms)) {
-            item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
+            item.changeDescription += ` 【 permission_ids : ${originPerms} -> ${currentPerms} 】 `
           }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
+          if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
           break
         }
         case 'delete': {
-          const description = item.origin?.description === undefined ? '无' : item.origin?.description
-          const permission = item.extra.permission_ids?.origin === undefined ? '无' : item.extra.permission_ids?.origin
-          item.changeDescription = `删除资源类型：${item.origin.name}\n描述：${description}\n权限：${permission}`
+          const description = item.origin?.description === undefined ? this.$t('acl.none') : item.origin?.description
+          const permission = item.extra.permission_ids?.origin === undefined ? this.$t('acl.none') : item.extra.permission_ids?.origin
+          item.changeDescription = `${this.$t('acl.deleteResourceType')}: ${item.origin.name}\n${this.$t(
+            'desc'
+          )}：${description}\n${this.$t('acl.permission')}: ${permission}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
index 4d9f3f5..0a25b3f 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
@@ -4,7 +4,7 @@
       ref="child"
       :attrList="roleTableAttrList"
       :hasSwitch="true"
-      switchValue="角色关系"
+      :switchValue="$t('acl.roleRelation')"
       @onSwitchChange="onSwitchChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
@@ -19,16 +19,16 @@
       :loading="loading"
       :height="`${windowHeight - 310}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="112px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="112px" :title="$t('operation')">
         <template #default="{ row }">
           <template>
             <a-tag :color="handleTagColor(row.operate_type)">{{ operateTypeMap.get(row.operate_type) }}</a-tag>
           </template>
         </template>
       </vxe-column>
-      <vxe-column :title="checked ? '角色' : '角色'">
+      <vxe-column :title="checked ? $t('acl.role2') : $t('acl.role2')">
         <template #default="{ row }">
           <template v-if="!checked">
             <a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
@@ -40,7 +40,7 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column :title="checked ? '继承自' : '管理员'" :width="checked ? '350px' : '80px'">
+      <vxe-column :title="checked ? $t('acl.inheritedFrom') : $t('acl.admin')" :width="checked ? '350px' : '80px'">
         <template #default="{ row }">
           <template v-if="!checked">
             <a-icon type="check" v-if="row.current.is_app_admin" />
@@ -52,14 +52,14 @@
           </template>
         </template>
       </vxe-column>
-      <vxe-column title="描述" v-if="!checked">
+      <vxe-column :title="$t('desc')" v-if="!checked">
         <template #default="{ row }">
           <p>
             {{ row.description }}
           </p>
         </template>
       </vxe-column>
-      <vxe-column field="source" width="100px" title="来源"></vxe-column>
+      <vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
@@ -94,13 +94,6 @@ export default {
       allRoles: [],
       allRolesMap: new Map(),
       allUsersMap: new Map(),
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['delete', '删除'],
-        ['update', '修改'],
-        ['role_relation_add', '添加角色关系'],
-        ['role_relation_delete', '删除角色关系'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['delete', 'red'],
@@ -115,49 +108,60 @@ export default {
         start: '',
         end: '',
       },
-      roleTableAttrList: [
+    }
+  },
+  computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+        ['role_relation_add', this.$t('acl.roleRelationAdd')],
+        ['role_relation_delete', this.$t('acl.roleRelationDelete')],
+      ])
+    },
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    tableDataLength() {
+      return this.tableData.length
+    },
+    roleTableAttrList() {
+      return [
         {
-          alias: '日期',
+          alias: this.$t('acl.date'),
           is_choice: false,
           name: 'datetime',
           value_type: '3',
         },
         {
-          alias: '应用',
+          alias: this.$t('acl.app'),
           is_choice: true,
           name: 'app_id',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '操作员',
+          alias: this.$t('acl.operator'),
           is_choice: true,
           name: 'operate_uid',
           value_type: '2',
           choice_value: [],
         },
         {
-          alias: '操作',
+          alias: this.$t('operation'),
           is_choice: true,
           name: 'operate_type',
           value_type: '2',
           choice_value: [
-            { 新建: 'create' },
-            { 修改: 'update' },
-            { 删除: 'delete' },
-            { 添加角色关系: 'role_relation_add' },
-            { 删除角色关系: 'role_relation_delete' },
+            { [this.$t('create')]: 'create' },
+            { [this.$t('update')]: 'update' },
+            { [this.$t('delete')]: 'delete' },
+            { [this.$t('acl.roleRelationAdd')]: 'role_relation_add' },
+            { [this.$t('acl.roleRelationDelete')]: 'role_relation_delete' },
           ],
         },
-      ],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    tableDataLength() {
-      return this.tableData.length
+      ]
     },
   },
   async created() {
@@ -277,7 +281,7 @@ export default {
       switch (operate_type) {
         // create
         case 'create': {
-          item.description = `新建角色：${item.current.name}`
+          item.description = `${this.$t('acl.addRole')}${item.current.name}`
           break
         }
         case 'update': {
@@ -287,15 +291,15 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.description += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
-                item.description += str
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
+                item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
               }
             }
           }
-          if (!item.description) item.description = '没有修改'
+          if (!item.description) item.description = this.$t('acl.noChange')
           break
         }
         case 'delete': {
@@ -325,7 +329,7 @@ export default {
           resourceMap.forEach((value, key) => {
             permsArr.push(`${id2resources[key].name}：${value}`)
           })
-          item.description = `继承者：${child_ids}\n继承自：${parent_ids}\n涉及资源及权限：\n${permsArr.join(`\n`)}`
+          item.description = `${this.$t('acl.heir')}：${child_ids}\n${this.$t('acl.inheritedFrom')}：${parent_ids}\n${this.$t('acl.involvingRP')}：\n${permsArr.join(`\n`)}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
index 3ff9ac9..ab163a7 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
@@ -18,23 +18,23 @@
       :loading="loading"
       :height="`${windowHeight - windowHeightMinus}px`"
     >
-      <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
-      <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
-      <vxe-column field="operate_type" width="80px" title="操作">
+      <vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
+      <vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
+      <vxe-column field="operate_type" width="100px" :title="$t('operation')">
         <template #default="{ row }">
           <a-tag :color="handleTagColor(row.operate_type)">
             {{ operateTypeMap.get(row.operate_type) }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="trigger_id" width="250px" title="触发器">
+      <vxe-column field="trigger_id" width="250px" :title="$t('acl.trigger')">
         <template #default="{ row }">
           <span>
             {{ row.current.name || row.origin.name }}
           </span>
         </template>
       </vxe-column>
-      <vxe-column title="描述">
+      <vxe-column :title="$t('desc')">
         <template #default="{ row }">
           <p>
             {{ row.changeDescription }}
@@ -64,6 +64,7 @@ import { getTriggers } from '@/modules/acl/api/trigger'
 import { searchUser } from '@/modules/acl/api/user'
 import { searchApp } from '@/modules/acl/api/app'
 export default {
+  name: 'TriggerHistoryTable',
   components: { SearchForm, Pager },
   data() {
     return {
@@ -82,13 +83,6 @@ export default {
       allResourceTypesMap: new Map(),
       allResourcesMap: new Map(),
       allTriggersMap: new Map(),
-      operateTypeMap: new Map([
-        ['create', '新建'],
-        ['update', '修改'],
-        ['delete', '删除'],
-        ['trigger_apply', '应用'],
-        ['trigger_cancel', '取消'],
-      ]),
       colorMap: new Map([
         ['create', 'green'],
         ['delete', 'red'],
@@ -96,48 +90,6 @@ export default {
         ['trigger_apply', 'green'],
         ['trigger_cancel', 'red'],
       ]),
-      triggerTableAttrList: [
-        {
-          alias: '日期',
-          is_choice: false,
-          name: 'datetime',
-          value_type: '3',
-        },
-        {
-          alias: '应用',
-          is_choice: true,
-          name: 'app_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作员',
-          is_choice: true,
-          name: 'operate_uid',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '触发器',
-          is_choice: true,
-          name: 'trigger_id',
-          value_type: '2',
-          choice_value: [],
-        },
-        {
-          alias: '操作',
-          is_choice: true,
-          name: 'operate_type',
-          value_type: '2',
-          choice_value: [
-            { 新建: 'create' },
-            { 修改: 'update' },
-            { 删除: 'delete' },
-            { 应用: 'trigger_apply' },
-            { 取消: 'trigger_cancel' },
-          ],
-        },
-      ],
       queryParams: {
         page: 1,
         page_size: 50,
@@ -162,6 +114,15 @@ export default {
     this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
   },
   computed: {
+    operateTypeMap() {
+      return new Map([
+        ['create', this.$t('create')],
+        ['update', this.$t('update')],
+        ['delete', this.$t('delete')],
+        ['trigger_apply', this.$t('acl.apply')],
+        ['trigger_cancel', this.$t('cancel')],
+      ])
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -171,6 +132,50 @@ export default {
     tableDataLength() {
       return this.tableData.length
     },
+    triggerTableAttrList() {
+      return [
+        {
+          alias: this.$t('acl.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('acl.app'),
+          is_choice: true,
+          name: 'app_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.operator'),
+          is_choice: true,
+          name: 'operate_uid',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('acl.trigger'),
+          is_choice: true,
+          name: 'trigger_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [
+            { [this.$t('create')]: 'create' },
+            { [this.$t('update')]: 'update' },
+            { [this.$t('delete')]: 'delete' },
+            { [this.$t('acl.apply')]: 'trigger_apply' },
+            { [this.$t('cancel')]: 'trigger_cancel' },
+          ],
+        },
+      ]
+    },
   },
   methods: {
     async getTable(queryParams) {
@@ -270,9 +275,11 @@ export default {
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => id2roles[i].name).join('，')
           const { name, resource_type_id, wildcard, permissions, enabled } = item.current
-          item.changeDescription = `新增触发器：${name}\n资源类型：${
+          item.changeDescription = `${this.$t('acl.addTrigger')}:${name}\n${this.$t('acl.resourceType')}: ${
             id2resource_types[resource_type_id].name
-          }，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
+          }，this.$t('acl.resourceName')：${wildcard || ''}，${this.$t(
+            'acl.role2'
+          )}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
           break
         }
         case 'update': {
@@ -282,15 +289,15 @@ export default {
             const oldVal = item.origin[key]
             if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
               if (oldVal === null) {
-                const str = ` 【 ${key} : 改为 ${newVal} 】 `
+                const str = ` 【 ${key} : -> ${newVal} 】 `
                 item.changeDescription += str
               } else {
-                const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
-                item.changeDescription += str
+                const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
+                item.changeDescription += ` 【 ${key} :${oldVal} -> ${newVal} 】 `
               }
             }
           }
-          if (!item.changeDescription) item.changeDescription = '没有修改'
+          if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
           break
         }
         case 'delete': {
@@ -298,9 +305,11 @@ export default {
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => id2roles[i].name).join('，')
           const { name, resource_type_id, wildcard, permissions, enabled } = item.origin
-          item.changeDescription = `删除触发器：${name}\n资源类型：${
+          item.changeDescription = `${this.$t('acl.deleteTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
             id2resource_types[resource_type_id].name
-          }，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
+          }，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
+            'acl.role2'
+          )}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
           break
         }
         case 'trigger_apply': {
@@ -308,9 +317,11 @@ export default {
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => id2roles[i].name).join('，')
           const { name, resource_type_id, wildcard, permissions, enabled } = item.current
-          item.changeDescription = `应用触发器：${name}\n资源类型：${
+          item.changeDescription = `${this.$t('acl.applyTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
             id2resource_types[resource_type_id].name
-          }，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
+          }，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
+            'acl.role2'
+          )}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
           break
         }
         case 'trigger_cancel': {
@@ -318,9 +329,11 @@ export default {
           const newArr = str.slice(1, str.length - 1).split(', ')
           const newStr = newArr.map((i) => id2roles[i].name).join('，')
           const { name, resource_type_id, wildcard, permissions, enabled } = item.current
-          item.changeDescription = `取消触发器：${name}\n资源类型：${
+          item.changeDescription = `${this.$t('acl.cancelTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
             id2resource_types[resource_type_id].name
-          }，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
+          }，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
+            'acl.role2'
+          )}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
           break
         }
       }
diff --git a/cmdb-ui/src/modules/acl/views/resource_types.vue b/cmdb-ui/src/modules/acl/views/resource_types.vue
index 5cce622..37c8991 100644
--- a/cmdb-ui/src/modules/acl/views/resource_types.vue
+++ b/cmdb-ui/src/modules/acl/views/resource_types.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="acl-resource-types">
     <div class="acl-resource-types-header">
-      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem">{{ btnName }}</a-button>
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem">{{
+        $t('acl.addReourceType')
+      }}</a-button>
       <a-input-search
         class="ops-input"
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
-        placeholder="搜索 | 资源类型名"
+        :placeholder="`${$t('search')} | ${$t('acl.resourceType')}`"
         v-model="searchName"
         allowClear
         @search="
@@ -28,28 +30,28 @@
         <!-- 1 -->
         <vxe-table-column
           field="name"
-          title="资源类型名"
+          :title="$t('acl.resoureType')"
           :min-width="175"
           fixed="left"
           show-overflow
         ></vxe-table-column>
 
         <!-- 2 -->
-        <vxe-table-column field="description" title="描述" :min-width="175"></vxe-table-column>
+        <vxe-table-column field="description" :title="$t('desc')" :min-width="175"></vxe-table-column>
 
         <!-- 3 -->
-        <vxe-table-column field="id" title="权限" :min-width="300">
+        <vxe-table-column field="id" :title="$t('acl.permission')" :min-width="300">
           <template #default="{ row }">
             <a-tag color="cyan" v-for="perm in id2perms[row.id]" :key="perm.id">{{ perm.name }}</a-tag>
           </template>
         </vxe-table-column>
 
         <!-- 4 -->
-        <vxe-table-column field="action" title="操作" :width="100" fixed="right">
+        <vxe-table-column field="action" :title="$t('operation')" :width="100" fixed="right">
           <template #default="{ row }">
             <a @click="handleEdit(row)"><a-icon type="edit"/></a>
             <a-divider type="vertical" />
-            <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" okText="是" cancelText="否">
+            <a-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(row)">
               <a style="color: red"><a-icon type="delete"/></a>
             </a-popconfirm>
           </template>
@@ -87,42 +89,12 @@ export default {
       loading: false,
       groups: [],
       id2perms: {},
-      btnName: '新增资源类型',
       pageSizeOptions: [10, 25, 50, 100],
       tablePage: {
         total: 0,
         currentPage: 1,
         pageSize: 50,
       },
-      tableColumns: [
-        {
-          title: '资源类型名',
-          field: 'name',
-          minWidth: '175px',
-          fixed: 'left',
-          showOverflow: 'tooltip',
-        },
-        {
-          title: '描述',
-          field: 'description',
-          minWidth: '175px',
-        },
-        {
-          title: '权限',
-          field: 'id',
-          minWidth: '300px',
-          slots: {
-            default: 'id_default',
-          },
-        },
-        {
-          title: '操作',
-          field: 'action',
-          minWidth: '175px',
-          slots: { default: 'action_default' },
-          fixed: 'right',
-        },
-      ],
       searchName: '',
     }
   },
@@ -200,15 +172,10 @@ export default {
     },
     deleteResourceType(id) {
       deleteResourceTypeById(id).then((res) => {
-        this.$message.success(`删除成功`)
+        this.$message.success(this.$t('deleteSuccess'))
         this.handleOk()
       })
-      // .catch(err => this.requestFailed(err))
     },
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
     handlePageChange({ currentPage, pageSize }) {
       this.tablePage.currentPage = currentPage
       this.tablePage.pageSize = pageSize
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index cfbb504..75f5d18 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -6,10 +6,10 @@
       </a-tabs>
       <div class="acl-resources-header">
         <a-space>
-          <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
+          <a-button @click="handleCreate" type="primary">{{ $t('acl.addResource') }}</a-button>
           <a-input-search
             class="ops-input"
-            placeholder="搜索 | 资源名"
+            :placeholder="`${$t('search')} | ${$t('acl.resource')}`"
             v-model="searchName"
             @search="
               () => {
@@ -20,10 +20,10 @@
           ></a-input-search>
 
           <div v-if="!!selectedRows.length" class="ops-list-batch-action">
-            <span @click="handleBatchPerm">授权</span>
+            <span @click="handleBatchPerm">{{ $t('grant') }}</span>
             <a-divider type="vertical" />
-            <span @click="handleBatchRevoke">权限回收</span>
-            <span>选取: {{ selectedRows.length }} 项</span>
+            <span @click="handleBatchRevoke">{{ $t('acl.revoke') }}</span>
+            <span>{{ $t('selectRows', { rows: selectedRows.length }) }}</span>
           </div>
         </a-space>
 
@@ -36,7 +36,7 @@
                 $refs.resourceBatchPerm.open(currentType.id)
               }
             "
-          >便捷授权</a-button
+          >{{ $t('acl.convenient') }}</a-button
           >
           <a-switch
             v-model="isGroup"
@@ -50,7 +50,7 @@
                 $refs.xTable && $refs.xTable.getVxetableRef().clearCheckboxReserve()
               }
             "
-            un-checked-children="组"
+            :un-checked-children="$t('acl.group2')"
           ></a-switch>
         </a-space>
       </div>
@@ -62,62 +62,63 @@
           :data="tableData"
           highlight-hover-row
           :height="`${windowHeight - 250}px`"
-          :checkbox-config="{ reserve: true }"
+          :checkbox-config="{ reserve: true, highlight: true, range: true }"
           @checkbox-change="changeCheckbox"
           @checkbox-all="changeCheckbox"
+          @checkbox-range-end="onSelectRangeEnd"
           ref="xTable"
           row-id="id"
           show-overflow
           resizable
         >
           <!-- 1 -->
-          <vxe-table-column type="checkbox" fixed="left" :width="45"></vxe-table-column>
+          <vxe-table-column type="checkbox" fixed="left" :width="60"></vxe-table-column>
 
           <!-- 2 -->
 
-          <vxe-table-column field="name" title="资源名" :min-widh="150" fixed="left" show-overflow>
-            <template #title="{ row }">
-              {{ row.isGroup ? '资源组名' : '资源名' }}
+          <vxe-table-column field="name" :title="$t('acl.resourceName')" :min-widh="150" fixed="left" show-overflow>
+            <template #title="{row}">
+              {{ row.isGroup ? $t('acl.groupName') : $t('acl.resourceName') }}
             </template>
           </vxe-table-column>
 
           <!-- 3 -->
-          <vxe-table-column field="user" title="创建者" :min-widh="100"> </vxe-table-column>
+          <vxe-table-column field="user" :title="$t('acl.creator')" :min-widh="100"> </vxe-table-column>
 
           <!-- 4 -->
-          <vxe-table-column field="created_at" title="创建时间" :min-widh="220" align="center"> </vxe-table-column>
+          <vxe-table-column field="created_at" :title="$t('created_at')" :min-widh="220" align="center"> </vxe-table-column>
 
           <!-- 5 -->
-          <vxe-table-column field="updated_at" title="最后修改时间" :min-widh="220" fixed="center"> </vxe-table-column>
+          <vxe-table-column field="updated_at" :title="$t('updated_at')" :min-widh="220" fixed="center"> </vxe-table-column>
 
           <!-- 6 -->
 
           <vxe-table-column
             field="action"
-            title="操作"
+            :title="$t('operation')"
             :min-widh="200"
             fixed="right"
             align="center"
             show-overflow>
-            <template #default="{ row }">
+            <template #default="{row}">
               <span v-show="isGroup">
-                <a @click="handleDisplayMember(row)">成员</a>
+                <a @click="handleDisplayMember(row)">{{ $t('acl.member') }}</a>
                 <a-divider type="vertical" />
-                <a @click="handleGroupEdit(row)">编辑</a>
+                <a @click="handleGroupEdit(row)">{{ $t('edit') }}</a>
                 <a-divider type="vertical" />
               </span>
-              <a-tooltip title="查看授权">
-                <a @click="handlePerm(row)"><a-icon type="eye" /></a>
+              <a-tooltip :title="$t('acl.viewAuth')">
+                <a @click="handlePerm(row)"><a-icon type="eye"/></a>
               </a-tooltip>
               <a-divider type="vertical" />
-              <a-tooltip title="授权">
+              <a-tooltip :title="$t('grant')">
                 <a :style="{ color: '#4bbb13' }" @click="handlePermManage(row)">
                   <a-icon type="usergroup-add" />
                 </a>
               </a-tooltip>
               <a-divider type="vertical" />
-              <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
-                <a style="color: red"><a-icon type="delete" /></a>
+              <a-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(row)" @cancel="cancel" :okText="$t('yes')" :cancelText="$t('no')">
+                <a style="color: red"><a-icon type="delete"/></a>
               </a-popconfirm>
             </template>
           </vxe-table-column>
@@ -135,9 +136,9 @@
         </vxe-pager>
       </a-spin>
     </div>
-    <div v-else style="text-align: center; margin-top: 20%">
-      <a-icon style="font-size: 50px; margin-bottom: 20px; color: orange" type="info-circle" />
-      <h3>暂无类型信息，请先添加资源类型！</h3>
+    <div v-else style="text-align: center;margin-top:20%">
+      <a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
+      <h3>{{ $t('acl.addTypeTips') }}</h3>
     </div>
     <resourceForm ref="resourceForm" @fresh="handleOk"> </resourceForm>
     <resourcePermForm ref="resourcePermForm"> </resourcePermForm>
@@ -187,7 +188,6 @@ export default {
         pageSize: 50,
       },
       tableData: [],
-      btnName: '新增资源',
       isGroup: false,
       allResourceTypes: [],
       currentType: { id: 0 },
@@ -196,7 +196,6 @@ export default {
       selectedRows: [],
     }
   },
-
   beforeCreate() {
     this.form = this.$form.createForm(this)
   },
@@ -281,22 +280,16 @@ export default {
     deleteResource(id) {
       if (!this.isGroup) {
         deleteResourceById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
-          this.$message.success(`删除成功`)
+          this.$message.success(this.$t('deleteSuccess'))
           this.handleOk()
         })
-        // .catch(err => this.requestFailed(err))
       } else {
         deleteResourceGroup(id).then((res) => {
-          this.$message.success(`删除成功`)
+          this.$message.success(this.$t('deleteSuccess'))
           this.handleOk()
         })
-        // .catch(err => this.requestFailed(err))
       }
     },
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
     cancel() {},
     handlePageChange({ currentPage, pageSize }) {
       this.tablePage.currentPage = currentPage
@@ -309,6 +302,10 @@ export default {
         .getVxetableRef()
         .getCheckboxRecords()
         .concat(this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords())
+        console.log(this.selectedRows)
+    },
+    onSelectRangeEnd({ records }) {
+      this.selectedRows = records
     },
     handleBatchPerm() {
       this.$refs['resourcePermManageForm'].editPerm(this.selectedRows, this.isGroup)
@@ -322,7 +319,7 @@ export default {
     },
   },
   watch: {
-    '$route.name': function (newName, oldName) {
+    '$route.name': function(newName, oldName) {
       this.isGroup = false
       this.tablePage = {
         total: 0,
diff --git a/cmdb-ui/src/modules/acl/views/roles.vue b/cmdb-ui/src/modules/acl/views/roles.vue
index c6f4a70..3604f34 100644
--- a/cmdb-ui/src/modules/acl/views/roles.vue
+++ b/cmdb-ui/src/modules/acl/views/roles.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="acl-roles">
     <div class="acl-roles-header">
-      <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
+      <a-button @click="handleCreate" type="primary">{{ $t('acl.addVisualRole') }}</a-button>
       <a-input-search
         class="ops-input"
         allowClear
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
-        placeholder="搜索 | 角色名"
+        :placeholder="`${$t('search')} | ${$t('acl.role')}`"
         v-model="searchName"
         @search="
           () => {
@@ -15,7 +15,7 @@
           }
         "
       ></a-input-search>
-      <a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox>
+      <a-checkbox :checked="is_all" @click="handleClickBoxChange">{{ $t('acl.allRole') }}</a-checkbox>
     </div>
     <a-spin :spinning="loading">
       <ops-table
@@ -31,22 +31,23 @@
       >
         <vxe-table-column
           field="name"
-          title="角色名"
+          :title="$t('acl.role')"
           :min-width="150"
           align="left"
           fixed="left"
           sortable
-          show-overflow>
+          show-overflow
+        >
         </vxe-table-column>
 
         <!-- 2 -->
-        <vxe-table-column field="is_app_admin" title="管理员" :min-width="100" align="center">
+        <vxe-table-column field="is_app_admin" :title="$t('admin')" :min-width="100" align="center">
           <template #default="{row}">
             <a-icon type="check" v-if="row.is_app_admin" />
           </template>
         </vxe-table-column>
 
-        <vxe-table-column field="id" title="继承自" :min-width="150">
+        <vxe-table-column field="id" :title="$t('acl.inheritedFrom')" :min-width="150">
           <template #default="{row}">
             <a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
           </template>
@@ -54,12 +55,12 @@
 
         <vxe-table-column
           field="uid"
-          title="虚拟角色"
-          :width="100"
+          :title="$t('acl.visualRole')"
+          :width="120"
           align="center"
           :filters="[
-            { label: '是', value: 1 },
-            { label: '否', value: 0 },
+            { label: $t('yes'), value: 1 },
+            { label: $t('no'), value: 0 },
           ]"
           :filterMultiple="false"
           :filter-method="
@@ -69,14 +70,14 @@
           "
         >
           <template #default="{row}">
-            {{ row.uid ? '否' : '是' }}
+            {{ row.uid ? $t('no') : $t('yes') }}
           </template>
         </vxe-table-column>
 
-        <vxe-table-column field="action" title="操作" :width="120" fixed="right">
+        <vxe-table-column field="action" :title="$t('operation')" :width="120" fixed="right">
           <template #default="{row}">
             <a-space>
-              <a-tooltip title="资源列表">
+              <a-tooltip :title="$t('acl.resourceList')">
                 <a
                   v-if="$route.name !== 'acl_roles'"
                   @click="handleDisplayUserResource(row)"
@@ -85,12 +86,18 @@
                 /></a>
               </a-tooltip>
               <a-tooltip
-                title="用户列表"
+                :title="$t('acl.userList')"
                 v-if="!row.uid"
               ><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
               ></a-tooltip>
               <a @click="handleEdit(row)"><a-icon type="edit"/></a>
-              <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
+              <a-popconfirm
+                :title="$t('confirmDelete')"
+                @confirm="handleDelete(row)"
+                @cancel="cancel"
+                :okText="$t('yes')"
+                :cancelText="$t('no')"
+              >
                 <a style="color: red"><a-icon type="delete"/></a>
               </a-popconfirm>
             </a-space>
@@ -138,52 +145,6 @@ export default {
         currentPage: 1,
         pageSize: 50,
       },
-      tableColumns: [
-        {
-          title: '角色名',
-          field: 'name',
-          sortable: true,
-          minWidth: '150px',
-          fixed: 'left',
-          showOverflow: 'tooltip',
-        },
-        {
-          title: '管理员',
-          field: 'is_app_admin',
-          minWidth: '100px',
-          align: 'center',
-          slots: { default: 'is_app_admin_default' },
-        },
-        {
-          title: '继承自',
-          field: 'id',
-          minWidth: '150px',
-          slots: { default: 'inherit_default' },
-        },
-        {
-          title: '虚拟角色',
-          field: 'uid',
-          minWidth: '100px',
-          align: 'center',
-          filters: [
-            { label: '是', value: 1 },
-            { label: '否', value: 0 },
-          ],
-          filterMultiple: false,
-          filterMethod: ({ value, row }) => {
-            return value === !row.uid
-          },
-          slots: { default: 'isVisualRole_default' },
-        },
-        {
-          title: '操作',
-          minWidth: '280px',
-          field: 'action',
-          fixed: 'right',
-          slots: { default: 'action_default' },
-        },
-      ],
-      btnName: '新增虚拟角色',
       is_all: this.$route.name === 'acl_roles',
       tableData: [],
       allRoles: [],
@@ -286,15 +247,10 @@ export default {
 
     deleteRole(id) {
       deleteRoleById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
-        this.$message.success(`删除成功`)
+        this.$message.success(this.$t('deleteSuccess'))
         this.handleOk()
       })
-      // .catch(err => this.requestFailed(err))
     },
-    // requestFailed(err) {
-    //   const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
-    //   this.$message.error(`${msg}`)
-    // },
     cancel(e) {
       return false
     },
diff --git a/cmdb-ui/src/modules/acl/views/secretKey.vue b/cmdb-ui/src/modules/acl/views/secretKey.vue
index 7268b1e..548ead3 100644
--- a/cmdb-ui/src/modules/acl/views/secretKey.vue
+++ b/cmdb-ui/src/modules/acl/views/secretKey.vue
@@ -15,9 +15,9 @@
       </a-form-model-item>
       <a-form-model-item label=" " :colon="false">
         <a-space>
-          <a-button type="primary" @click="changeVisible">{{ !visible ? '查看' : '隐藏' }}</a-button>
-          <a-button type="danger" ghost @click="handleSumbit">重置</a-button>
-          <!-- <a-button @click="handleCancel">取消</a-button> -->
+          <a-button type="primary" @click="changeVisible">{{ !visible ? $t('view') : $t('hide') }}</a-button>
+          <a-button type="danger" ghost @click="handleSumbit">{{ $t('reset') }}</a-button>
+          <!-- <a-button @click="handleCancel">{{ $t('cancel') }}</a-button> -->
         </a-space>
       </a-form-model-item>
     </a-form-model>
@@ -62,13 +62,13 @@ export default {
     handleSumbit() {
       const that = this
       this.$confirm({
-        title: '重置',
-        content: '确定重置用户密钥？',
+        title: that.$t('reset'),
+        content: that.$t('acl.confirmResetSecret'),
         onOk() {
           that.$refs.secretKeyForm.validate((valid) => {
             if (valid) {
               updateSecret().then((res) => {
-                that.$message.success('重置成功')
+                that.$message.success(that.$t('operateSuccess'))
                 const { key, secret } = res
                 that.form = { key, secret }
               })
diff --git a/cmdb-ui/src/modules/acl/views/trigger.vue b/cmdb-ui/src/modules/acl/views/trigger.vue
index c18624f..8724ff3 100644
--- a/cmdb-ui/src/modules/acl/views/trigger.vue
+++ b/cmdb-ui/src/modules/acl/views/trigger.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="acl-trigger">
     <div class="acl-trigger-header">
-      <a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
+      <a-button type="primary" @click="handleCreateTrigger">{{ $t('acl.addTrigger') }}</a-button>
       <a-input-search
         class="ops-input"
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
-        placeholder="搜索 | 名称"
+        :placeholder="`${$t('search')} | ${$t('name')}`"
         v-model="searchName"
         allowClear
         @search="filter"
@@ -46,18 +46,18 @@
         <a-tag v-for="(p, index) in row.permissions" :key="index">{{ p }}</a-tag>
       </template>
       <template #enabled_default="{row}">
-        <a-tag v-if="row.enabled" color="#2db7f5">启用</a-tag>
-        <a-tag v-else color="grey">禁用</a-tag>
+        <a-tag v-if="row.enabled" color="#2db7f5">{{ $t('acl.enable') }}</a-tag>
+        <a-tag v-else color="grey">{{ $t('acl.disable') }}</a-tag>
       </template>
       <template #action_default="{row}">
         <a-space>
-          <a-tooltip title="应用">
+          <a-tooltip :title="$t('acl.apply')">
             <a @click="handleApplyTrigger(row)" :style="{ color: '#0f9d58' }"><a-icon type="appstore"/></a>
           </a-tooltip>
-          <a-tooltip title="取消">
+          <a-tooltip :title="$t('cancel')">
             <a @click="handleCancelTrigger(row)" :style="{ color: 'orange' }"><a-icon type="stop"/></a>
           </a-tooltip>
-          <a-tooltip title="查看正则匹配结果">
+          <a-tooltip :title="$t('acl.viewMatchResult')">
             <a @click="handlePattern(row)" :style="{ color: 'purple' }"><a-icon type="eye"/></a>
           </a-tooltip>
           <a @click="handleEditTrigger(row)"><a-icon type="edit"/></a>
@@ -67,7 +67,7 @@
       <template slot="empty">
         <div>
           <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
-          <div>暂无数据</div>
+          <div>{{ $t('noData') }}</div>
         </div>
       </template>
     </vxe-grid>
@@ -102,9 +102,19 @@ export default {
       triggers: [],
       id2parents: [],
       id2perms: {},
-      tableColumns: [
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    app_id() {
+      return this.$route.name.split('_')[0]
+    },
+    tableColumns() {
+      return [
         {
-          title: '名称',
+          title: this.$t('name'),
           field: 'name',
           sortable: true,
           minWidth: '150px',
@@ -112,7 +122,7 @@ export default {
           showOverflow: 'tooltip',
         },
         {
-          title: '资源名',
+          title: this.$t('acl.resource'),
           field: 'wildcard',
           minWidth: '250px',
           showOverflow: 'tooltip',
@@ -121,15 +131,15 @@ export default {
           },
         },
         {
-          title: '资源类型',
+          title: this.$t('acl.resourceType'),
           field: 'resource_type_id',
-          minWidth: '100px',
+          minWidth: '120px',
           slots: {
             default: 'resourceTypeRender_default',
           },
         },
         {
-          title: '创建人',
+          title: this.$t('acl.creator'),
           field: 'users',
           minWidth: '150px',
           showOverflow: 'tooltip',
@@ -138,7 +148,7 @@ export default {
           },
         },
         {
-          title: '角色',
+          title: this.$t('acl.allRole'),
           field: 'roles',
           minWidth: '150px',
           slots: {
@@ -172,7 +182,7 @@ export default {
           },
         },
         {
-          title: '权限',
+          title: this.$t('acl.permission'),
           field: 'permissions',
           minWidth: '250px',
           slots: {
@@ -180,7 +190,7 @@ export default {
           },
         },
         {
-          title: '状态',
+          title: this.$t('status'),
           field: 'enabled',
           minWidth: '100px',
           slots: {
@@ -188,7 +198,7 @@ export default {
           },
         },
         {
-          title: '操作',
+          title: this.$t('operation'),
           field: 'action',
           width: '120px',
           fixed: 'right',
@@ -196,8 +206,8 @@ export default {
             default: 'action_default',
           },
         },
-      ],
-    }
+      ]
+    },
   },
   created() {
     this.loadRoles()
@@ -206,15 +216,6 @@ export default {
   beforeMount() {
     this.loadTriggers()
   },
-
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    app_id() {
-      return this.$route.name.split('_')[0]
-    },
-  },
   methods: {
     loadTriggers() {
       this.searchName = ''
@@ -244,11 +245,11 @@ export default {
     handleDeleteTrigger(record) {
       const that = this
       this.$confirm({
-        title: '删除',
-        content: '确认删除该触发器吗？',
+        title: that.$t('warning'),
+        content: that.$t('acl.confirmDeleteTrigger'),
         onOk() {
           deleteTrigger(record.id).then((res) => {
-            that.$message.success('删除成功')
+            that.$message.success(that.$t('deleteSuccess'))
             that.loadTriggers()
           })
           // .catch(err => that.$httpError(err))
@@ -258,11 +259,11 @@ export default {
     handleApplyTrigger(record) {
       const that = this
       this.$confirm({
-        title: '规则应用',
-        content: '是否确定应用该触发器？',
+        title: that.$t('acl.ruleApply'),
+        content: that.$t('acl.triggerTip1'),
         onOk() {
           applyTrigger(record.id).then((res) => {
-            that.$message.success('提交成功!')
+            that.$message.success(that.$t('operateSuccess'))
           })
           // .catch(err => that.$httpError(err))
         },
@@ -271,11 +272,11 @@ export default {
     handleCancelTrigger(record) {
       const that = this
       this.$confirm({
-        title: '规则应用',
-        content: '是否取消应用该触发器?',
+        title: that.$t('acl.ruleApply'),
+        content: that.$t('acl.triggerTip2'),
         onOk() {
           cancelTrigger(record.id).then((res) => {
-            that.$message.success('提交成功！')
+            that.$message.success(that.$t('operateSuccess'))
           })
           // .catch(err => that.$httpError(err))
         },
diff --git a/cmdb-ui/src/modules/acl/views/users.vue b/cmdb-ui/src/modules/acl/views/users.vue
index ffc050b..9e688af 100644
--- a/cmdb-ui/src/modules/acl/views/users.vue
+++ b/cmdb-ui/src/modules/acl/views/users.vue
@@ -1,198 +1,202 @@
-<template>
-  <div class="acl-users">
-    <div class="acl-users-header">
-      <a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button>
-      <a-input-search
-        class="ops-input"
-        allowClear
-        :style="{ display: 'inline', marginLeft: '10px' }"
-        placeholder="搜索 | 用户名、中文名"
-        v-model="searchName"
-      ></a-input-search>
-    </div>
-    <a-spin :spinning="loading">
-      <vxe-grid
-        stripe
-        class="ops-stripe-table"
-        :columns="tableColumns"
-        :data="tableData"
-        show-overflow
-        highlight-hover-row
-        :height="`${windowHeight - 165}px`"
-        size="small"
-      >
-        <template #block_default="{row}">
-          <a-icon type="lock" v-if="row.block" />
-        </template>
-        <template #action_default="{row}">
-          <a-space>
-            <a :disabled="isAclAdmin ? false : true" @click="handleEdit(row)">
-              <a-icon type="edit" />
-            </a>
-            <a-tooltip title="权限汇总">
-              <a @click="handlePermCollect(row)"><a-icon type="solution"/></a>
-            </a-tooltip>
-            <a-popconfirm :title="`确认删除【${row.nickname || row.username}】？`" @confirm="deleteUser(row.uid)">
-              <a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
-            </a-popconfirm>
-          </a-space>
-        </template>
-      </vxe-grid>
-    </a-spin>
-    <userForm ref="userForm" :handleOk="handleOk"> </userForm>
-    <perm-collect-form ref="permCollectForm"></perm-collect-form>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import userForm from './module/userForm'
-import PermCollectForm from './module/permCollectForm'
-import { deleteUserById, searchUser, getOnDutyUser } from '@/modules/acl/api/user'
-
-export default {
-  name: 'Users',
-  components: {
-    userForm,
-    PermCollectForm,
-  },
-  data() {
-    return {
-      loading: false,
-      tableColumns: [
-        {
-          title: '用户名',
-          field: 'username',
-          sortable: true,
-          minWidth: '100px',
-          fixed: 'left',
-        },
-        {
-          title: '中文名',
-          field: 'nickname',
-          minWidth: '100px',
-        },
-        {
-          title: '加入时间',
-          field: 'date_joined',
-          minWidth: '160px',
-          align: 'center',
-          sortable: true,
-        },
-        {
-          title: '锁定',
-          field: 'block',
-          width: '150px',
-          align: 'center',
-          slots: {
-            default: 'block_default',
-          },
-        },
-        {
-          title: '操作',
-          field: 'action',
-          width: '150px',
-          fixed: 'right',
-          align: 'center',
-          slots: {
-            default: 'action_default',
-          },
-        },
-      ],
-      onDutuUids: [],
-      btnName: '新增用户',
-      allUsers: [],
-      tableData: [],
-      searchName: '',
-    }
-  },
-  beforeCreate() {
-    this.form = this.$form.createForm(this)
-  },
-  async beforeMount() {
-    this.loading = true
-    await this.getOnDutyUser()
-    this.search()
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isAclAdmin: function() {
-      if (this.$store.state.user.roles.permissions.filter((item) => item === 'acl_admin').length > 0) {
-        return true
-      } else {
-        return false
-      }
-    },
-  },
-  watch: {
-    searchName: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (newVal) {
-          this.tableData = this.allUsers.filter(
-            (item) =>
-              (item.username && item.username.toLowerCase().includes(newVal.toLowerCase())) ||
-              (item.nickname && item.nickname.toLowerCase().includes(newVal.toLowerCase()))
-          )
-        } else {
-          this.tableData = this.allUsers
-        }
-      },
-    },
-  },
-  mounted() {},
-  inject: ['reload'],
-
-  methods: {
-    async getOnDutyUser() {
-      await getOnDutyUser().then((res) => {
-        this.onDutuUids = res.map((i) => i.uid)
-      })
-    },
-    search() {
-      searchUser({ page_size: 10000 }).then((res) => {
-        const ret = res.users.filter((u) => this.onDutuUids.includes(u.uid))
-        this.allUsers = ret
-        this.tableData = ret
-        this.loading = false
-      })
-    },
-    handlePermCollect(record) {
-      this.$refs['permCollectForm'].collect(record)
-    },
-    handleEdit(record) {
-      this.$refs.userForm.handleEdit(record)
-    },
-    async handleOk() {
-      this.searchName = ''
-      await this.getOnDutyUser()
-      this.search()
-    },
-    handleCreate() {
-      this.$refs.userForm.handleCreate()
-    },
-    deleteUser(uid) {
-      deleteUserById(uid).then((res) => {
-        this.$message.success(`删除成功！`)
-        this.handleOk()
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.acl-users {
-  border-radius: 15px;
-  background-color: #fff;
-  height: calc(100vh - 64px);
-  margin-bottom: -24px;
-  padding: 24px;
-  .acl-users-header {
-    display: inline-flex;
-    margin-bottom: 15px;
-  }
-}
-</style>
+<template>
+  <div class="acl-users">
+    <div class="acl-users-header">
+      <a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button>
+      <a-input-search
+        class="ops-input"
+        allowClear
+        :style="{ width: '300px', display: 'inline', marginLeft: '10px' }"
+        :placeholder="`${$t('search')} | ${$t('acl.nickname')} 、 ${$t('acl.username')}`"
+        v-model="searchName"
+      ></a-input-search>
+    </div>
+    <a-spin :spinning="loading">
+      <vxe-grid
+        stripe
+        class="ops-stripe-table"
+        :columns="tableColumns"
+        :data="tableData"
+        show-overflow
+        highlight-hover-row
+        :height="`${windowHeight - 165}px`"
+        size="small"
+      >
+        <template #block_default="{row}">
+          <a-icon type="lock" v-if="row.block" />
+        </template>
+        <template #action_default="{row}">
+          <a-space>
+            <a :disabled="isAclAdmin ? false : true" @click="handleEdit(row)">
+              <a-icon type="edit" />
+            </a>
+            <a-tooltip :title="$t('acl.summaryPermissions')">
+              <a @click="handlePermCollect(row)"><a-icon type="solution"/></a>
+            </a-tooltip>
+            <a-popconfirm :title="$t('confirmDelete')" @confirm="deleteUser(row.uid)">
+              <a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </vxe-grid>
+    </a-spin>
+    <userForm ref="userForm" :handleOk="handleOk"> </userForm>
+    <perm-collect-form ref="permCollectForm"></perm-collect-form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import userForm from './module/userForm'
+import PermCollectForm from './module/permCollectForm'
+import { deleteUserById, searchUser, getOnDutyUser } from '@/modules/acl/api/user'
+
+export default {
+  name: 'Users',
+  components: {
+    userForm,
+    PermCollectForm,
+  },
+  data() {
+    return {
+      loading: false,
+      onDutuUids: [],
+      allUsers: [],
+      tableData: [],
+      searchName: '',
+    }
+  },
+  beforeCreate() {
+    this.form = this.$form.createForm(this)
+  },
+  async beforeMount() {
+    this.loading = true
+    await this.getOnDutyUser()
+    this.search()
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isAclAdmin: function() {
+      if (this.$store.state.user.roles.permissions.filter((item) => item === 'acl_admin').length > 0) {
+        return true
+      } else {
+        return false
+      }
+    },
+    tableColumns() {
+      return [
+        {
+          title: this.$t('acl.username'),
+          field: 'username',
+          sortable: true,
+          minWidth: '100px',
+          fixed: 'left',
+        },
+        {
+          title: this.$t('acl.nickname'),
+          field: 'nickname',
+          minWidth: '100px',
+        },
+        {
+          title: this.$t('acl.joined_at'),
+          field: 'date_joined',
+          minWidth: '160px',
+          align: 'center',
+          sortable: true,
+        },
+        {
+          title: this.$t('acl.block'),
+          field: 'block',
+          width: '150px',
+          align: 'center',
+          slots: {
+            default: 'block_default',
+          },
+        },
+        {
+          title: this.$t('operation'),
+          field: 'action',
+          width: '150px',
+          fixed: 'right',
+          align: 'center',
+          slots: {
+            default: 'action_default',
+          },
+        },
+      ]
+    },
+    btnName() {
+      return this.$t('acl.addUser')
+    },
+  },
+  watch: {
+    searchName: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.tableData = this.allUsers.filter(
+            (item) =>
+              (item.username && item.username.toLowerCase().includes(newVal.toLowerCase())) ||
+              (item.nickname && item.nickname.toLowerCase().includes(newVal.toLowerCase()))
+          )
+        } else {
+          this.tableData = this.allUsers
+        }
+      },
+    },
+  },
+  mounted() {},
+  inject: ['reload'],
+
+  methods: {
+    async getOnDutyUser() {
+      await getOnDutyUser().then((res) => {
+        this.onDutuUids = res.map((i) => i.uid)
+      })
+    },
+    search() {
+      searchUser({ page_size: 10000 }).then((res) => {
+        const ret = res.users.filter((u) => this.onDutuUids.includes(u.uid))
+        this.allUsers = ret
+        this.tableData = ret
+        this.loading = false
+      })
+    },
+    handlePermCollect(record) {
+      this.$refs['permCollectForm'].collect(record)
+    },
+    handleEdit(record) {
+      this.$refs.userForm.handleEdit(record)
+    },
+    async handleOk() {
+      this.searchName = ''
+      await this.getOnDutyUser()
+      this.search()
+    },
+    handleCreate() {
+      this.$refs.userForm.handleCreate()
+    },
+    deleteUser(uid) {
+      deleteUserById(uid).then((res) => {
+        this.$message.success(this.$t('deleteSuccess'))
+        this.handleOk()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.acl-users {
+  border-radius: 15px;
+  background-color: #fff;
+  height: calc(100vh - 64px);
+  margin-bottom: -24px;
+  padding: 24px;
+  .acl-users-header {
+    display: inline-flex;
+    margin-bottom: 15px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/assets/dashboard_empty.png b/cmdb-ui/src/modules/cmdb/assets/dashboard_empty.png
index 59cf19c9701e222cd337f22fadbd0a1bb4d0ee4d..8c0f04e8982404ec2ba80912b964ef0e6c53138a 100644
GIT binary patch
literal 30278
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
N9~nQadGPGb{{iwn+aCY`

literal 87434
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
Ydi9C=gQ(Y`7osc3smd0;eD~@90o+R4$N&HU

diff --git a/cmdb-ui/src/modules/cmdb/assets/preference_card.png b/cmdb-ui/src/modules/cmdb/assets/preference_card.png
index 100af6c3afba9ab8f4c45c16c78f6a7a00883aa4..6ff82e0ef9ec7f549a7be7e052fdcbe2d9c6c8ab 100644
GIT binary patch
literal 146181
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
Kspcv_^Zh@Vw4BcX

literal 9258
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

diff --git a/cmdb-ui/src/modules/cmdb/components/JsonEditor/jsonEditor.vue b/cmdb-ui/src/modules/cmdb/components/JsonEditor/jsonEditor.vue
index 2cb4151..eb98a6d 100644
--- a/cmdb-ui/src/modules/cmdb/components/JsonEditor/jsonEditor.vue
+++ b/cmdb-ui/src/modules/cmdb/components/JsonEditor/jsonEditor.vue
@@ -63,7 +63,7 @@ export default {
         updateCI(this.row.ci_id || this.row._id, {
           [`${this.column.property}`]: this.default_value_json_right ? this.jsonData : {},
         }).then(() => {
-          this.$message.success('保存成功！')
+          this.$message.success(this.$t('saveSuccess'))
           this.handleCancel()
           this.$emit('jsonEditorOk', this.row, this.column, this.default_value_json_right ? this.jsonData : {})
         })
diff --git a/cmdb-ui/src/modules/cmdb/components/attributesTransfer/index.vue b/cmdb-ui/src/modules/cmdb/components/attributesTransfer/index.vue
index a6722f5..fb24579 100644
--- a/cmdb-ui/src/modules/cmdb/components/attributesTransfer/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/attributesTransfer/index.vue
@@ -7,7 +7,7 @@
         width: '200px',
         height: `${height}px`,
       }"
-      :titles="['未选属性', '已选属性']"
+      :titles="[$t('cmdb.components.unselectAttributes'), $t('cmdb.components.selectAttributes')]"
       :render="(item) => item.title"
       :targetKeys="targetKeys"
       @change="handleChange"
@@ -16,7 +16,7 @@
       :filterOption="filterOption"
       class="cmdb-transfer"
     >
-      <span slot="notFoundContent">暂无数据</span>
+      <span slot="notFoundContent">{{ $t('noData') }}</span>
       <template slot="children" slot-scope="{ props: { direction, filteredItems } }">
         <div class="ant-transfer-list-content" v-if="direction === 'right'">
           <draggable :value="targetKeys" animation="300" @end="dragEnd" :disabled="!isSortable">
@@ -27,10 +27,11 @@
               :style="{ height: '38px' }"
             >
               <li
-                :class="{
-                  'ant-transfer-list-content-item': true,
-                  'ant-transfer-list-content-item-selected': selectedKeys.includes(item.key),
-                }"
+                :class="
+                  `ant-transfer-list-content-item ${
+                    selectedKeys.includes(item.key) ? 'ant-transfer-list-content-item-selected' : ''
+                  }`
+                "
                 @click="setSelectedKeys(item)"
               >
                 <OpsMoveIcon class="move-icon" />
@@ -62,9 +63,11 @@
             :style="{ height: '38px' }"
           >
             <li
-              :class="`ant-transfer-list-content-item ${
-                selectedKeys.includes(item.key) ? 'ant-transfer-list-content-item-selected' : ''
-              }`"
+              :class="
+                `ant-transfer-list-content-item ${
+                  selectedKeys.includes(item.key) ? 'ant-transfer-list-content-item-selected' : ''
+                }`
+              "
               @click="setSelectedKeys(item)"
             >
               <div class="ant-transfer-list-content-item-text" style="display: inline">
@@ -83,7 +86,7 @@
       </template>
     </a-transfer>
     <div v-if="hasFooter" :style="{ marginTop: '5px', height: '20px' }">
-      <a-button :style="{ float: 'right' }" size="small" @click="handleSubmit" type="primary">确定</a-button>
+      <a-button :style="{ float: 'right' }" size="small" @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
     </div>
   </div>
 </template>
@@ -110,12 +113,12 @@ export default {
       default: true,
     },
     isSortable: {
-      // 右侧是否可排序
+      // Is the right side sortable?
       type: Boolean,
       default: true,
     },
     isFixable: {
-      // 右侧是否可固定
+      // Can the right side be fixed?
       type: Boolean,
       default: true,
     },
diff --git a/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue b/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
index 6cfecf6..7314db0 100644
--- a/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
+++ b/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
@@ -1,21 +1,30 @@
 <template>
-  <a-modal :visible="visible" title="导出数据" @cancel="handleCancel" okText="导出" @ok="handleOk">
+  <a-modal
+    :visible="visible"
+    :title="$t('cmdb.components.downloadCI')"
+    @cancel="handleCancel"
+    @ok="handleOk"
+    width="700px"
+  >
     <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
-      <a-form-item label="文件名">
+      <a-form-item :label="$t('cmdb.components.filename')">
         <a-input
-          placeholder="请输入文件名"
-          v-decorator="['filename', { rules: [{ required: true, message: '请输入文件名' }] }]"
+          :placeholder="$t('cmdb.components.filenameInputTips')"
+          v-decorator="['filename', { rules: [{ required: true, message: $t('cmdb.components.filenameInputTips') }] }]"
         />
       </a-form-item>
-      <a-form-item label="保存类型">
+      <a-form-item :label="$t('cmdb.components.saveType')">
         <a-select
-          placeholder="请选择保存类型"
-          v-decorator="['type', { rules: [{ required: true, message: '请选择保存类型' }], initialValue: 'xlsx' }]"
+          :placeholder="$t('cmdb.components.saveTypeTips')"
+          v-decorator="[
+            'type',
+            { rules: [{ required: true, message: $t('cmdb.components.saveTypeTips') }], initialValue: 'xlsx' },
+          ]"
         >
           <a-select-option v-for="item in typeList" :key="item.id" :values="item.id">{{ item.label }}</a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item label="选择字段">
+      <a-form-item :label="$t('cmdb.ciType.selectAttributes')">
         <div
           :style="{
             paddingLeft: '26px',
@@ -29,7 +38,7 @@
             :checked="checkAll"
             @change="onCheckAllChange"
             :style="{ marginRight: '10px' }"
-          />全选
+          />{{ $t('checkAll') }}
         </div>
         <div
           :style="{
@@ -76,30 +85,7 @@ export default {
     },
   },
   data() {
-    const typeList = [
-      {
-        id: 'xlsx',
-        label: 'Excel工作簿(*.xlsx)',
-      },
-      {
-        id: 'csv',
-        label: 'CSV(逗号分隔)(*.csv)',
-      },
-      {
-        id: 'html',
-        label: '网页(*.html)',
-      },
-      {
-        id: 'xml',
-        label: 'XML数据(*.xml)',
-      },
-      {
-        id: 'txt',
-        label: '文本文件(制表符分隔)(*.txt)',
-      },
-    ]
     return {
-      typeList,
       visible: false,
       form: this.$form.createForm(this),
       preferenceAttrList: [],
@@ -109,6 +95,32 @@ export default {
       defaultChecked: [],
     }
   },
+  computed: {
+    typeList() {
+      return [
+        {
+          id: 'xlsx',
+          label: this.$t('cmdb.components.xlsx'),
+        },
+        {
+          id: 'csv',
+          label: this.$t('cmdb.components.csv'),
+        },
+        {
+          id: 'html',
+          label: this.$t('cmdb.components.html'),
+        },
+        {
+          id: 'xml',
+          label: this.$t('cmdb.components.xml'),
+        },
+        {
+          id: 'txt',
+          label: this.$t('cmdb.components.txt'),
+        },
+      ]
+    },
+  },
   methods: {
     ...mapMutations('cmdbStore', ['SET_IS_TABLE_LOADING']),
     open({ preferenceAttrList, ciTypeName = undefined }) {
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
index 37c1efa..d37b5a9 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
@@ -25,17 +25,17 @@
       </vxe-column>
       <template #empty>
         <div v-if="loading()" style="height: 200px; line-height: 200px;color:#2F54EB">
-          <a-icon type="loading" /> 加载中...
+          <a-icon type="loading" /> {{ $t('loading') }}
         </div>
         <div v-else>
           <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
-          <div>暂无数据</div>
+          <div>{{ $t('noData') }}</div>
         </div>
       </template>
     </vxe-table>
     <a-space>
-      <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <span class="grant-button" @click="grantRole">授权角色</span>
+      <span class="grant-button" @click="grantDepart">{{ $t('cmdb.components.grantUser') }}</span>
+      <span class="grant-button" @click="grantRole">{{ $t('cmdb.components.grantRole') }}</span>
     </a-space>
   </div>
 </template>
@@ -95,10 +95,8 @@ export default {
       }
       return (this.windowHeight - 104) / 2 - 116
     },
-  },
-  data() {
-    return {
-      permMap,
+    permMap() {
+      return permMap()
     }
   },
   methods: {
@@ -131,8 +129,8 @@ export default {
       } else {
         const that = this
         this.$confirm({
-          title: '警告',
-          content: `确认删除 【${row.name}】 的 【授权】 权限？`,
+          title: that.$t('warning'),
+          content: that.$t('cmdb.components.confirmRevoke', { name: `${row.name}` }),
           onOk() {
             that.handleChange({ target: { checked: false } }, col, row)
             const _idx = that.tableData.findIndex((item) => item.rid === row.rid)
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/constants.js b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/constants.js
index 709501c..631e5da 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/constants.js
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/constants.js
@@ -1,11 +1,15 @@
-export const permMap = {
-    read: '查看',
-    add: '新增',
-    create: '新增',
-    update: '修改',
-    delete: '删除',
-    config: '配置',
-    grant: '授权',
-    'read_attr': '查看字段',
-    'read_ci': '查看实例'
+import i18n from '@/lang'
+
+export const permMap = () => {
+    return {
+        read: i18n.t('view'),
+        add: i18n.t('new'),
+        create: i18n.t('new'),
+        update: i18n.t('update'),
+        delete: i18n.t('delete'),
+        config: i18n.t('cmdb.components.config'),
+        grant: i18n.t('grant'),
+        'read_attr': i18n.t('cmdb.components.readAttribute'),
+        'read_ci': i18n.t('cmdb.components.readCI')
+    }
 }
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
index 3634695..e9f2756 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cmdb-grant" :style="{ maxHeight: `${windowHeight - 104}px` }">
     <template v-if="cmdbGrantType.includes('ci_type')">
-      <div class="cmdb-grant-title">模型权限</div>
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciTypeGrant') }}</div>
       <CiTypeGrant
         :CITypeId="CITypeId"
         :tableData="tableData"
@@ -18,7 +18,7 @@
         cmdbGrantType.includes('ci_type,ci') || (cmdbGrantType.includes('ci') && !cmdbGrantType.includes('ci_type'))
       "
     >
-      <div class="cmdb-grant-title">实例权限</div>
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciGrant') }}</div>
       <CiTypeGrant
         :CITypeId="CITypeId"
         :tableData="tableData"
@@ -32,7 +32,7 @@
       />
     </template>
     <template v-if="cmdbGrantType.includes('type_relation')">
-      <div class="cmdb-grant-title">关系权限</div>
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.relationGrant') }}</div>
       <TypeRelationGrant
         :typeRelationIds="typeRelationIds"
         :tableData="tableData"
@@ -45,7 +45,7 @@
       />
     </template>
     <template v-if="cmdbGrantType.includes('relation_view')">
-      <div class="cmdb-grant-title">{{ resourceTypeName }}权限</div>
+      <div class="cmdb-grant-title">{{ resourceTypeName }}{{ $t('cmdb.components.perm') }}</div>
       <RelationViewGrant
         :resourceTypeName="resourceTypeName"
         :tableData="tableData"
@@ -116,7 +116,7 @@ export default {
       attrGroup: [],
       filerPerimissions: {},
       loading: false,
-      addedRids: [], // 本次新增的rid
+      addedRids: [], // added rid this time
     }
   },
   computed: {
@@ -203,12 +203,12 @@ export default {
       this.tableData = perms
       this.loading = false
     },
-    // 授权common-setting中的部门  从中拿到roleid
+    // Grant the department in common-setting and get the roleid from it
     grantDepart(grantType) {
       this.$refs.grantModal.open('depart')
       this.grantType = grantType
     },
-    // 授权最古老的角色权限
+    // Grant the oldest role permissions
     grantRole(grantType) {
       this.$refs.grantModal.open('role')
       this.grantType = grantType
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
index 994f12b..5f3f8e7 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
@@ -26,9 +26,9 @@ export default {
   computed: {
     title() {
       if (this.type === 'depart') {
-        return '授权用户/部门'
+        return this.$t('cmdb.components.grantUser')
       }
-      return '授权角色'
+      return this.$t('cmdb.components.grantRole')
     },
   },
   methods: {
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/readGrantModal.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/readGrantModal.vue
index 14f2824..e3b5e6d 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/readGrantModal.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/readGrantModal.vue
@@ -2,9 +2,9 @@
   <a-modal :width="680" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
     <CustomRadio
       :radioList="[
-        { value: 1, label: '全部' },
-        { value: 2, label: '自定义', layout: 'vertical' },
-        { value: 3, label: '无' },
+        { value: 1, label: $t('cmdb.components.all') },
+        { value: 2, label: $t('cmdb.components.customize'), layout: 'vertical' },
+        { value: 3, label: $t('cmdb.components.none') },
       ]"
       v-model="radioValue"
     >
@@ -16,7 +16,7 @@
           :clearable="true"
           searchable
           :options="attrGroup"
-          placeholder="请选择属性字段"
+          :placeholder="$t('cmdb.ciType.selectAttributes')"
           value-consists-of="LEAF_PRIORITY"
           :limit="10"
           :limitText="(count) => `+ ${count}`"
@@ -24,8 +24,8 @@
             (node) => {
               return {
                 id: node.name || -1,
-                label: node.alias || node.name || '其他',
-                title: node.alias || node.name || '其他',
+                label: node.alias || node.name || $t('other'),
+                title: node.alias || node.name || $t('other'),
                 children: node.attributes,
               }
             }
@@ -42,7 +42,7 @@
           :wrapperCol="{ span: 10 }"
           ref="form"
         >
-          <a-form-model-item label="名称" prop="name">
+          <a-form-model-item :label="$t('name')" prop="name">
             <a-input v-model="form.name" />
           </a-form-model-item>
           <FilterComp
@@ -99,16 +99,16 @@ export default {
         name: '',
       },
       rules: {
-        name: [{ required: true, message: '请输入自定义筛选条件名' }],
+        name: [{ required: true, message: this.$t('cmdb.components.customizeFilterName') }],
       },
     }
   },
   computed: {
     title() {
       if (this.colType === 'read_attr') {
-        return '字段权限'
+        return this.$t('cmdb.components.attributeGrant')
       }
-      return '实例权限'
+      return this.$t('cmdb.components.ciGrant')
     },
     attrGroup() {
       return this.provide_attrGroup()
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
index 92e4bd5..395315c 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
@@ -17,8 +17,8 @@
       </vxe-column>
     </vxe-table>
     <a-space>
-      <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <span class="grant-button" @click="grantRole">授权角色</span>
+      <span class="grant-button" @click="grantDepart">{{ $t('cmdb.components.grantUser') }}</span>
+      <span class="grant-button" @click="grantRole">{{ $t('cmdb.components.grantRole') }}</span>
     </a-space>
   </div>
 </template>
@@ -51,7 +51,6 @@ export default {
   },
   data() {
     return {
-      permMap,
       columns: ['read', 'grant'],
     }
   },
@@ -65,6 +64,9 @@ export default {
       }
       return (this.windowHeight - 104) / 2 - 116
     },
+    permMap() {
+      return permMap()
+    }
   },
   methods: {
     getCurrentRowStyle,
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
index f4b41e2..120e2a4 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
@@ -17,8 +17,8 @@
       </vxe-column>
     </vxe-table>
     <a-space>
-      <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <span class="grant-button" @click="grantRole">授权角色</span>
+      <span class="grant-button" @click="grantDepart">{{ $t('cmdb.components.grantUser') }}</span>
+      <span class="grant-button" @click="grantRole">{{ $t('cmdb.components.grantRole') }}</span>
     </a-space>
   </div>
 </template>
@@ -51,7 +51,6 @@ export default {
   },
   data() {
     return {
-      permMap,
       columns: ['create', 'grant', 'delete'],
     }
   },
@@ -65,6 +64,9 @@ export default {
       }
       return (this.windowHeight - 104) / 2 - 116
     },
+    permMap() {
+      return permMap()
+    }
   },
   methods: {
     getCurrentRowStyle,
diff --git a/cmdb-ui/src/modules/cmdb/components/colorPicker/index.vue b/cmdb-ui/src/modules/cmdb/components/colorPicker/index.vue
index 4ac895a..18d1afc 100644
--- a/cmdb-ui/src/modules/cmdb/components/colorPicker/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/colorPicker/index.vue
@@ -132,7 +132,7 @@ export default {
       } else if (color.indexOf('rgb') !== -1) {
         hsvObj = this.rgbToHSV(color)
       } else {
-        throw new Error('初始化颜色格式错误，使用#fff或rgb格式')
+        throw new Error(this.$t('cmdb.components.colorPickerError'))
         // this.$message.error('颜色格式错误，使用16进制格式')
       }
       if (hsvObj) {
diff --git a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
index b10ea7c..a369162 100644
--- a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
@@ -15,19 +15,19 @@
       :edit-config="isEdit ? { trigger: 'click', mode: 'cell' } : {}"
     >
       <template v-if="isEdit">
-        <vxe-colgroup title="自动发现">
-          <vxe-column field="name" title="名称" width="100"> </vxe-column>
-          <vxe-column field="type" title="类型" width="80"> </vxe-column>
-          <vxe-column field="example" title="示例值">
+        <vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
+          <vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
+          <vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
+          <vxe-column field="example" :title="$t('cmdb.components.example')">
             <template #default="{row}">
               <span v-if="row.type === 'json'">{{ JSON.stringify(row.example) }}</span>
               <span v-else>{{ row.example }}</span>
             </template>
           </vxe-column>
-          <vxe-column field="desc" title="描述"> </vxe-column>
+          <vxe-column field="desc" :title="$t('desc')"> </vxe-column>
         </vxe-colgroup>
-        <vxe-colgroup title="模型属性">
-          <vxe-column field="attr" title="名称" :edit-render="{}">
+        <vxe-colgroup :title="$t('cmdb.ciType.attributes')">
+          <vxe-column field="attr" :title="$t('name')" :edit-render="{}">
             <template #default="{row}">
               {{ row.attr }}
             </template>
@@ -45,15 +45,15 @@
         </vxe-colgroup>
       </template>
       <template v-else>
-        <vxe-column field="name" title="名称" width="100"> </vxe-column>
-        <vxe-column field="type" title="类型" width="80"> </vxe-column>
-        <vxe-column field="example" title="示例值">
+        <vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
+        <vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
+        <vxe-column field="example" :title="$t('cmdb.components.example')">
           <template #default="{row}">
             <span v-if="row.type === 'object'">{{ JSON.stringify(row.example) }}</span>
             <span v-else>{{ row.example }}</span>
           </template>
         </vxe-column>
-        <vxe-column field="desc" title="描述"> </vxe-column>
+        <vxe-column field="desc" :title="$t('desc')"> </vxe-column>
       </template>
     </vxe-table>
   </div>
@@ -61,12 +61,6 @@
 
 <script>
 import { getHttpCategories, getHttpAttributes, getSnmpAttributes } from '../../api/discovery'
-const httpMap = {
-  阿里云: { name: 'aliyun' },
-  腾讯云: { name: 'tencentcloud' },
-  华为云: { name: 'huaweicloud' },
-  AWS: { name: 'aws' },
-}
 export default {
   name: 'HttpSnmpAD',
   props: {
@@ -107,13 +101,21 @@ export default {
       const { ruleType, ruleName } = this
       return { ruleType, ruleName }
     },
+    httpMap() {
+      return {
+        [this.$t('cmdb.components.aliyun')]: { name: 'aliyun' },
+        [this.$t('cmdb.components.tencentcloud')]: { name: 'tencentcloud' },
+        [this.$t('cmdb.components.huaweicloud')]: { name: 'huaweicloud' },
+        AWS: { name: 'aws' },
+      }
+    },
   },
   watch: {
     currentCate: {
       immediate: true,
       handler(newVal) {
         if (newVal) {
-          getHttpAttributes(httpMap[`${this.ruleName}`].name, { category: newVal }).then((res) => {
+          getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { category: newVal }).then((res) => {
             if (this.isEdit) {
               this.formatTableData(res)
             } else {
@@ -139,7 +141,7 @@ export default {
             })
           }
           if (ruleType === 'http' && ruleName) {
-            getHttpCategories(httpMap[`${this.ruleName}`].name).then((res) => {
+            getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
               this.categories = res
               if (res && res.length) {
                 this.currentCate = res[0]
diff --git a/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue
index 6e92809..b360ac1 100644
--- a/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/noticeContent/index.vue
@@ -1,199 +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-void="") (data-w-e-is-inline|data-w-e-is-inline="").*?<\/span>/gm,
-        (value) => {
-          const _match = value.match(/(?<=data-attachment(V|v)alue=").*?(?=")/)
-          return `{{${_match[0]}}}`
-        }
-      )
-      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>
+<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">{{ $t('cmdb.components.beforeChange') }}</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">{{ $t('cmdb.components.afterChange') }}</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: this.$t('cmdb.components.noticeContentTips'), readOnly: this.readOnly },
+      content: '',
+      defaultParams: [],
+      value2LabelMap: {},
+    }
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // When the component is destroyed, destroy the editor in time
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // Be sure to use Object.seal(), otherwise an error will be reported
+    },
+    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-void="") (data-w-e-is-inline|data-w-e-is-inline="").*?<\/span>/gm,
+        (value) => {
+          const _match = value.match(/(?<=data-attachment(V|v)alue=").*?(?=")/)
+          return `{{${_match[0]}}}`
+        }
+      )
+      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/preferenceSearch/preferenceSearch.vue b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
index 18d525e..b1f439e 100644
--- a/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
+++ b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
@@ -11,7 +11,7 @@
         @blur="handleInputConfirm"
         @keyup.enter="handleInputConfirm"
       />
-      <a-button v-else type="primary" size="small" ghost @click="showInput">保存筛选条件</a-button>
+      <a-button v-else type="primary" size="small" ghost @click="showInput">{{ $t('cmdb.components.saveQuery') }}</a-button>
     </span>
     <template v-for="(item, index) in preferenceSearchList.slice(0, 3)">
       <span
@@ -26,7 +26,7 @@
         <a-tooltip :title="item.name">
           <span @click="clickPreferenceSearch(item)">{{ `${item.name.slice(0, 6)}...` }}</span>
         </a-tooltip>
-        <a-popconfirm title="确认删除？" @confirm="deletePreferenceSearch(item)">
+        <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="deletePreferenceSearch(item)">
           <a-icon type="close" />
         </a-popconfirm>
       </span>
@@ -40,7 +40,7 @@
         }"
       >
         <span @click="clickPreferenceSearch(item)">{{ item.name }}</span>
-        <a-popconfirm title="确认删除？" @confirm="deletePreferenceSearch(item)">
+        <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="deletePreferenceSearch(item)">
           <a-icon type="close" />
         </a-popconfirm>
       </span>
@@ -73,7 +73,7 @@
             {{ item.name }}
           </div>
           <a-popconfirm
-            title="确认删除？"
+            :title="$t('cmdb.ciType.confirmDelete2')"
             :getPopupContainer="(trigger) => trigger.parentElement"
             placement="left"
             @confirm="
diff --git a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
index 6723960..dcb6ef4 100644
--- a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
@@ -15,7 +15,7 @@
             :limit="1"
             :limitText="(count) => `+ ${count}`"
             value-consists-of="LEAF_PRIORITY"
-            placeholder="模型"
+            :placeholder="$t('cmdb.ciType.ciType')"
             @close="closeCiTypeGroup"
             @open="openCiTypeGroup"
             @input="inputCiTypeGroup"
@@ -23,8 +23,8 @@
               (node) => {
                 return {
                   id: node.id || -1,
-                  label: node.alias || node.name || '其他',
-                  title: node.alias || node.name || '其他',
+                  label: node.alias || node.name || $t('other'),
+                  title: node.alias || node.name || $t('other'),
                   children: node.ci_types,
                 }
               }
@@ -42,7 +42,7 @@
           <a-input
             v-model="fuzzySearch"
             :style="{ display: 'inline-block', width: '244px' }"
-            placeholder="请查找"
+            :placeholder="$t('cmdb.components.pleaseSearch')"
             @pressEnter="emitRefresh"
             class="ops-input ops-input-radius"
           >
@@ -54,7 +54,7 @@
             />
             <a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px' }">
               <template slot="title">
-                1、json属性不能搜索<br />2、搜索内容包括逗号，则需转义 \,<br />3、只搜索索引属性，非索引属性使用条件过滤
+                {{ $t('cmdb.components.ciSearchTips') }}
               </template>
               <a><a-icon type="question-circle"/></a>
             </a-tooltip>
@@ -68,7 +68,7 @@
           >
             <div slot="popover_item" class="search-form-bar-filter">
               <a-icon class="search-form-bar-filter-icon" type="filter" />
-              条件过滤
+              {{ $t('cmdb.components.conditionFilter') }}
               <a-icon class="search-form-bar-filter-icon" type="down" />
             </div>
           </FilterComp>
@@ -97,8 +97,8 @@
         </a-space>
       </div>
       <a-space>
-        <a-button @click="reset" size="small">重置</a-button>
-        <a-tooltip title="属性说明" v-if="type === 'relationView'">
+        <a-button @click="reset" size="small">{{ $t('reset') }}</a-button>
+        <a-tooltip :title="$t('cmdb.components.attributeDesc')" v-if="type === 'relationView'">
           <a
             @click="
               () => {
@@ -149,7 +149,7 @@ export default {
   },
   data() {
     return {
-      // 高级搜索 展开/关闭
+      // Advanced Search Expand/Close
       advanced: false,
       queryParam: {},
       isFocusExpression: false,
@@ -163,7 +163,7 @@ export default {
 
   computed: {
     placeholder() {
-      return this.isFocusExpression ? '例：q=hostname:*0.0.0.0*' : '表达式'
+      return this.isFocusExpression ? this.$t('cmdb.components.ciSearchTips2') : this.$t('cmdb.ciType.expr')
     },
     width() {
       return '200px'
diff --git a/cmdb-ui/src/modules/cmdb/components/subscribeSetting/subscribeSetting.vue b/cmdb-ui/src/modules/cmdb/components/subscribeSetting/subscribeSetting.vue
index e354e0f..301315d 100644
--- a/cmdb-ui/src/modules/cmdb/components/subscribeSetting/subscribeSetting.vue
+++ b/cmdb-ui/src/modules/cmdb/components/subscribeSetting/subscribeSetting.vue
@@ -11,13 +11,13 @@
   >
     <a-tabs v-model="activeKey">
       <a-tab-pane key="1">
-        <span slot="tab"><ops-icon type="cmdb-ci" />资源数据</span>
+        <span slot="tab"><ops-icon type="cmdb-ci" />{{ $t('cmdb.menu.ciTable') }}</span>
         <div class="cmdb-subscribe-drawer-container" :style="{ height: `${windowHeight - 60}px` }">
           <div class="cmdb-subscribe-drawer-container-title">
-            <span>订阅模型：{{ ciType.alias || ciType.name }}</span>
+            <span>{{ $t('cmdb.components.subCIType') }}: {{ ciType.alias || ciType.name }}</span>
             <span :style="{ fontWeight: 500, color: instanceSubscribed ? 'green' : 'red' }">{{
-              `（${instanceSubscribed ? '已' : '未'}订阅）`
-            }}</span>
+              `（${instanceSubscribed ? $t('cmdb.components.already') : $t('cmdb.components.not')}`
+            }}{{ $t('cmdb.components.sub') }})</span>
           </div>
           <template>
             <AttributesTransfer
@@ -31,22 +31,22 @@
               :height="windowHeight - 170"
             />
             <div class="custom-drawer-bottom-action">
-              <a-button @click="subInstanceSubmit" type="primary">订阅</a-button>
+              <a-button @click="subInstanceSubmit" type="primary">{{ $t('cmdb.preference.sub') }}</a-button>
             </div>
           </template>
         </div>
       </a-tab-pane>
       <a-tab-pane key="2" force-render>
-        <span slot="tab"><ops-icon type="cmdb-tree" />资源层级</span>
+        <span slot="tab"><ops-icon type="cmdb-tree" />{{ $t('cmdb.menu.ciTree') }}</span>
         <div class="cmdb-subscribe-drawer-container" :style="{ height: `${windowHeight - 60}px` }">
           <div class="cmdb-subscribe-drawer-container-title">
-            <span>订阅模型：{{ ciType.alias || ciType.name }}</span>
+            <span>{{ $t('cmdb.components.subCIType') }}: {{ ciType.alias || ciType.name }}</span>
             <span :style="{ fontWeight: 500, color: treeSubscribed ? 'green' : 'red' }">{{
-              `（${treeSubscribed ? '已' : '未'}订阅）`
-            }}</span>
+              `（${treeSubscribed ? $t('cmdb.components.already') : $t('cmdb.components.not')}`
+            }}{{ $t('cmdb.components.sub') }})</span>
           </div>
           <div class="cmdb-subscribe-drawer-tree-header" :style="{ maxHeight: `${(windowHeight - 170) / 3 - 20}px` }">
-            <span v-if="!treeViews.length">请在下方进行选择</span>
+            <span v-if="!treeViews.length">{{ $t('cmdb.components.selectBelow') }}</span>
             <div
               class="cmdb-subscribe-drawer-tree-header-selected"
               :style="{ marginLeft: `${18 * index}px` }"
@@ -70,7 +70,7 @@
             </div>
           </div>
           <div class="custom-drawer-bottom-action">
-            <a-button @click="subTreeSubmit" type="primary">订阅</a-button>
+            <a-button @click="subTreeSubmit" type="primary">{{ $t('cmdb.preference.sub') }}</a-button>
           </div>
         </div>
       </a-tab-pane>
@@ -179,7 +179,7 @@ export default {
     },
     subTreeSubmit() {
       subscribeTreeView(this.ciType.type_id, this.treeViews).then((res) => {
-        this.$message.success('订阅成功')
+        this.$message.success(this.$t('cmdb.components.subSuccess'))
         if (this.treeViews.length > 0) {
           this.treeSubscribed = true
         } else {
@@ -194,7 +194,7 @@ export default {
           return [item, !!this.fixedList.includes(item)]
         })
       ).then((res) => {
-        this.$message.success('订阅成功')
+        this.$message.success(this.$t('cmdb.components.subSuccess'))
         this.resetRoute()
         if (this.selectedAttrList.length > 0) {
           this.instanceSubscribed = true
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
index 3afb659..67e0ad8 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
@@ -1,144 +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>
+<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="$t('cmdb.ciType.username')" /></td>
+        </tr>
+        <tr>
+          <td><a-input class="authorization-input" v-model="BasicAuth.password" :placeholder="$t('cmdb.ciType.password')" /></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"> {{ $t('cmdb.components.noAuthRequest') }} </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/header.vue b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
index d039016..486f4d7 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
@@ -1,101 +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>
+<template>
+  <div>
+    <div class="headers-header">
+      <span>{{ $t('cmdb.components.requestParam') }}</span>
+      <a-space>
+        <a-tooltip :title="$t('cmdb.components.clear')">
+          <ops-icon
+            type="icon-xianxing-delete"
+            @click="
+              () => {
+                headers = [
+                  {
+                    id: uuidv4(),
+                    key: '',
+                    value: '',
+                  },
+                ]
+              }
+            "
+          />
+        </a-tooltip>
+        <a-tooltip :title="$t('new')">
+          <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="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
+          <td><a-input class="headers-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${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.vue b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
index 036b495..52b460e 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
@@ -1,147 +1,147 @@
-<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
-      })
-      let body = this.$refs.Body.jsonData
-      try {
-        JSON.parse(body)
-        body = JSON.parse(body)
-      } catch {}
-      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) {
-      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],
-          }
-        }) || []
-      if (body && Object.prototype.toString.call(body) === '[object Object]') {
-        this.$refs.Body.jsonData = JSON.stringify(body)
-      } else {
-        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>
+<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="$t('cmdb.components.selectMethods')"
+      >
+      </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
+      })
+      let body = this.$refs.Body.jsonData
+      try {
+        JSON.parse(body)
+        body = JSON.parse(body)
+      } catch {}
+      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) {
+      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],
+          }
+        }) || []
+      if (body && Object.prototype.toString.call(body) === '[object Object]') {
+        this.$refs.Body.jsonData = JSON.stringify(body)
+      } else {
+        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
index 93238e3..a5e7fc5 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
@@ -1,100 +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>
+<template>
+  <div>
+    <div class="parameters-header">
+      <span>{{ $t('cmdb.components.requestParam') }}</span>
+      <a-space>
+        <a-tooltip :title="$t('cmdb.components.clear')">
+          <ops-icon
+            type="icon-xianxing-delete"
+            @click="
+              () => {
+                parameters = []
+              }
+            "
+          />
+        </a-tooltip>
+        <a-tooltip :title="$t('new')">
+          <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="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
+          <td><a-input class="parameters-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${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"> {{ $t('cmdb.components.noParamRequest') }} </span>
+      <a-button @click="add" type="primary" size="small" icon="plus" class="ops-button-primary">
+        {{ $t('add') }}
+      </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/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
new file mode 100644
index 0000000..c022a84
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -0,0 +1,483 @@
+const cmdb_en = {
+    relation: 'Relation',
+    attribute: 'Attributes',
+    menu: {
+        views: 'Views',
+        config: 'Configuration',
+        backend: 'Management',
+        ciTable: 'Resource Views',
+        ciTree: 'Tree Views',
+        ciSearch: 'Search',
+        adCIs: 'AutoDiscovery Pool',
+        preference: 'Preference',
+        batchUpload: 'Batch Import',
+        citypeManage: 'Modeling',
+        backendManage: 'Backend',
+        customDashboard: 'Custom Dashboard',
+        serviceTreeDefine: 'Service Tree',
+        citypeRelation: 'CIType Relation',
+        operationHistory: 'Operation Audit',
+        relationType: 'Relation Type',
+        ad: 'AutoDiscovery',
+    },
+    ciType: {
+        ciType: 'CIType',
+        attributes: 'Attributes',
+        relation: 'Relation',
+        trigger: 'Triggers',
+        attributeAD: 'Attributes AutoDiscovery',
+        relationAD: 'Relation AutoDiscovery',
+        grant: 'Grant',
+        addGroup: 'New Group',
+        editGroup: 'Edit Group',
+        group: 'Group',
+        attributeLibray: 'Attribute Library',
+        addCITypeInGroup: 'Add a new CIType to the group',
+        addCIType: 'Add CIType',
+        editGroupName: 'Edit group name',
+        deleteGroup: 'Delete this group',
+        CITypeName: 'Name(English)',
+        English: 'English',
+        inputAttributeName: 'Please enter the attribute name',
+        attributeNameTips: 'It cannot start with a number, it can be English numbers and underscores (_)',
+        editCIType: 'Edit CIType',
+        defaultSort: 'Default sort',
+        selectDefaultOrderAttr: 'Select default sorting attributes',
+        asec: 'Forward order',
+        desc: 'Reverse order',
+        uniqueKey: 'Uniquely Identifies',
+        uniqueKeySelect: 'Please select a unique identifier',
+        notfound: 'Can\'t find what you want?',
+        cannotDeleteGroupTips: 'There is data under this group and cannot be deleted!',
+        confirmDeleteGroup: 'Are you sure you want to delete group [{groupName}]?',
+        confirmDeleteCIType: 'Are you sure you want to delete model [{typeName}]?',
+        uploading: 'Uploading',
+        uploadFailed: 'Upload failed, please try again later',
+        addPlugin: 'New plugin',
+        deletePlugin: 'Delete plugin',
+        confirmDeleteADT: 'Do you confirm to delete [{pluginName}]',
+        attributeMap: 'Attribute mapping',
+        autoDiscovery: 'AutoDiscovery',
+        node: 'Node',
+        adExecConfig: 'Execute configuration',
+        adExecTarget: 'Execute targets',
+        oneagentIdTips: 'Please enter the hexadecimal OneAgent ID starting with 0x',
+        selectFromCMDBTips: 'Select from CMDB ',
+        adAutoInLib: 'Save as CI auto',
+        adInterval: 'Collection frequency',
+        byInterval: 'by interval',
+        allNodes: 'All nodes',
+        specifyNodes: 'Specify Node',
+        specifyNodesTips: 'Please fill in the specify node!',
+        username: 'Username',
+        password: 'Password',
+        link: 'Link',
+        list: 'List',
+        listTips: 'The value of the field is one or more, and the type of the value returned by the interface is list.',
+        computeForAllCITips: 'All CI trigger computes',
+        confirmcomputeForAllCITips: 'Confirm triggering computes for all CIs?',
+        isUnique: 'Is it unique',
+        unique: 'Unique',
+        isChoice: 'Choiced',
+        defaultShow: 'Default Display',
+        defaultShowTips: 'The CI instance table displays this field by default',
+        isSortable: 'Sortable',
+        isIndex: 'Indexed',
+        index: 'Index',
+        indexTips: 'Fields can be used for retrieval to speed up queries',
+        confirmDelete: 'Confirm to delete [{name}]?',
+        confirmDelete2: 'Confirm to delete?',
+        computeSuccess: 'Triggered successfully!',
+        basicConfig: 'Basic Settings',
+        AttributeName: 'Name(English)',
+        DataType: 'Data Type',
+        defaultValue: 'Default value',
+        autoIncID: 'Auto-increment ID',
+        customTime: 'Custom time',
+        advancedSettings: 'Advanced Settings',
+        font: 'Font',
+        color: 'Color',
+        choiceValue: 'Predefined value',
+        computedAttribute: 'Computed Attribute',
+        computedAttributeTips: 'The value of this attribute is calculated through an expression constructed from other attributes of the CIType or by executing a piece of code. The reference method of the attribute is: {{ attribute name }}',
+        addAttribute: 'New attribute',
+        existedAttributes: 'Already have attributes',
+        editAttribute: 'Edit attribute',
+        addAttributeTips1: 'If sorting is selected, it must also be selected!',
+        uniqueConstraint: 'Unique Constraint',
+        up: 'Move up',
+        down: 'Move down',
+        selectAttribute: 'Select Attribute',
+        groupExisted: 'Group name already exists',
+        attributeSortedTips: 'Attributes in other groups cannot be sorted. If you need to sort, please drag them to a custom group first!',
+        buildinAttribute: 'built-in attributes',
+        expr: 'Expression',
+        code: 'Code',
+        apply: 'apply',
+        continueAdd: 'Keep adding',
+        filter: 'Filter',
+        choiceOther: 'Other CIType Attributes',
+        choiceWebhookTips: 'The returned results are filtered by fields, and the hierarchical nesting is separated by ##, such as k1##k2. The web request returns {k1: [{k2: 1}, {k2: 2}]}, and the parsing result is [1, 2 ]',
+        selectCIType: 'Please select a CMDB CIType',
+        selectCITypeAttributes: 'Please select CIType attributes',
+        selectAttributes: 'Please select attributes',
+        choiceScriptDemo: 'class ChoiceValue(object):\n    @staticmethod\n    def values():\n        """\n        Execution entry, returns predefined value\n        :return: Returns a list, the type of the value is the same as the type of the attribute\n        For example:\n        return ["online", "offline"]\n        """\n        return []',
+        valueExisted: 'The current value already exists!',
+        addRelation: 'Add Relation',
+        sourceCIType: 'Source CIType',
+        sourceCITypeTips: 'Please select Source CIType',
+        dstCIType: 'Target CIType',
+        dstCITypeTips: 'Please select target CIType',
+        relationType: 'Relation Type',
+        relationTypeTips: 'Please select relation type',
+        isParent: 'is parent',
+        relationConstraint: 'Constraints',
+        relationConstraintTips: 'please select a relationship constraint',
+        one2Many: 'One to Many',
+        one2One: 'One to One',
+        many2Many: 'Many to Many',
+        basicInfo: 'Basic Information',
+        nameInputTips: 'Please enter name',
+        triggerDataChange: 'Data changes',
+        triggerDate: 'Date attribute',
+        triggerEnable: 'Turn on',
+        descInput: 'Please enter remarks',
+        triggerCondition: 'Triggering conditions',
+        addInstance: 'Add new instance',
+        deleteInstance: 'Delete instance',
+        changeInstance: 'Instance changes',
+        selectMutipleAttributes: 'Please select attributes (multiple selections)',
+        selectSingleAttribute: 'Please select an attribute (single choice)',
+        beforeDays: 'ahead of time',
+        days: 'Days',
+        notifyAt: 'Send time',
+        notify: 'Notify',
+        triggerAction: 'Trigger action',
+        receivers: 'Recipients',
+        emailTips: 'Please enter your email address, separate multiple email addresses with ;',
+        customEmail: 'Custom recipients',
+        notifySubject: 'Notification title',
+        notifySubjectTips: 'Please enter notification title',
+        notifyContent: 'Content',
+        notifyMethod: 'Notify methods',
+        botSelect: 'Please select a robot',
+        refAttributeTips: 'The title and content can reference the attribute value of the CIType. The reference method is: {{ attr_name }}',
+        webhookRefAttributeTips: 'Request parameters can reference the attribute value of the model. The reference method is: {{ attr_name }}',
+        newTrigger: 'Add trigger',
+        editTriggerTitle: 'Edit trigger {name}',
+        newTriggerTitle: 'Add trigger {name}',
+        confirmDeleteTrigger: 'Are you sure to delete this trigger?',
+        int: 'Integer',
+        float: 'Float',
+        text: 'Text',
+        datetime: 'DateTime',
+        date: 'Date',
+        time: 'Time',
+        json: 'JSON',
+        event: 'Event'
+    },
+    components: {
+        unselectAttributes: 'Unselected',
+        selectAttributes: 'Selected',
+        downloadCI: 'Export data',
+        filename: 'Filename',
+        filenameInputTips: 'Please enter filename',
+        saveType: 'Save type',
+        saveTypeTips: 'Please select save type',
+        xlsx: 'Excel workbook (*.xlsx)',
+        csv: 'CSV (comma separated) (*.csv)',
+        html: 'Web page (*.html)',
+        xml: 'XML data (*.xml)',
+        txt: 'Text file (tab delimited) (*.txt)',
+        grantUser: 'Grant User/Department',
+        grantRole: 'Grant Role',
+        confirmRevoke: 'Confirm to delete the [Authorization] permission of [{name}]?',
+        readAttribute: 'View Attributes',
+        readCI: 'View CIs',
+        config: 'Configuration',
+        ciTypeGrant: 'Grant CIType',
+        ciGrant: 'Grant CI',
+        attributeGrant: 'Grant Attribute',
+        relationGrant: 'Grant Relation',
+        perm: 'Permissions',
+        all: 'All',
+        customize: 'Customize',
+        none: 'None',
+        customizeFilterName: 'Please enter a custom filter name',
+        colorPickerError: 'Initialization color format error, use #fff or rgb format',
+        example: 'Example value',
+        aliyun: 'aliyun',
+        tencentcloud: 'Tencent Cloud',
+        huaweicloud: 'Huawei Cloud',
+        beforeChange: 'Before change',
+        afterChange: 'After change',
+        noticeContentTips: 'Please enter notification content',
+        saveQuery: 'Save Filters',
+        pleaseSearch: 'Please search',
+        conditionFilter: 'Conditional filtering',
+        attributeDesc: 'Attribute Description',
+        ciSearchTips: '1. JSON attributes cannot be searched<br />2. If the search content includes commas, they need to be escaped,<br />3. Only index attributes are searched, non-index attributes use conditional filtering',
+        ciSearchTips2: 'For example: q=hostname:*0.0.0.0*',
+        subCIType: 'Subscription CIType',
+        already: 'already',
+        not: 'not',
+        sub: 'subscription',
+        selectBelow: 'Please select below',
+        subSuccess: 'Subscription successful',
+        selectMethods: 'Please select a method',
+        noAuthRequest: 'No certification requested yet',
+        noParamRequest: 'No parameter certification yet',
+        requestParam: 'Request parameters',
+        param: 'Parameter{param}',
+        value: 'Value{value}',
+        clear: 'Clear',
+    },
+    batch: {
+        downloadFailed: 'Download failed',
+        unselectCIType: 'No CIType selected yet',
+        pleaseUploadFile: 'Please upload files',
+        batchUploadCanceled: 'Batch upload canceled',
+        selectCITypeTips: 'Please select CIType',
+        downloadTemplate: 'Download Template',
+        drawTips: 'Click or drag files here to upload!',
+        supportFileTypes: 'Supported file types: xls, xlsx',
+        uploadResult: 'Upload results',
+        total: 'total',
+        successItems: 'items, succeeded',
+        failedItems: 'items, failed',
+        items: 'items',
+        errorTips: 'Error message',
+        requestFailedTips: 'An error occurred with the request, please try again later',
+        requestSuccessTips: 'Upload completed',
+    },
+    preference: {
+        mySub: 'My Subscription',
+        sub: 'Subscribe',
+        cancelSub: 'Unsubscribe',
+        editSub: 'Edit subscription',
+        peopleSub: ' people subscribed',
+        noSub: 'No subscribed',
+        cancelSubSuccess: 'Unsubscribe successfully',
+        confirmcancelSub: 'Are you sure to cancel your subscription?',
+        confirmcancelSub2: 'Are you sure you want to unsubscribe {name}?',
+        of: 'of',
+        hoursAgo: 'hours ago',
+        daysAgo: 'days ago',
+        monthsAgo: 'month ago',
+        yearsAgo: 'years ago',
+        just: 'just now',
+    },
+    custom_dashboard: {
+        charts: 'Chart',
+        newChart: 'Add Chart',
+        editChart: 'Edit Chart',
+        title: 'Title',
+        titleTips: 'Please enter a chart title',
+        calcIndicators: 'Counter',
+        dimensions: 'Dimensions',
+        selectDimensions: 'Please select a dimension',
+        quantity: 'Quantity',
+        childCIType: 'Relational CIType',
+        level: 'Level',
+        levelTips: 'Please enter the relationship level',
+        preview: 'Preview',
+        showIcon: 'Display icon',
+        chartType: 'Chart Type',
+        dataFilter: 'Data Filtering',
+        format: 'Formats',
+        fontColor: 'Font Color',
+        backgroundColor: 'Background',
+        chartColor: 'Chart Color',
+        chartLength: 'Length',
+        barType: 'Bar Type',
+        stackedBar: 'Stacked Bar',
+        multipleSeriesBar: 'Multiple Series Bar ',
+        axis: 'Axis',
+        direction: 'Direction',
+        lowerShadow: 'Lower Shadow',
+        count: 'Indicator',
+        bar: 'Bar',
+        line: 'Line',
+        pie: 'Pie',
+        table: 'Table',
+        default: 'default',
+        relation: 'Relation',
+        noCustomDashboard: 'The administrator has not customized the dashboard yet',
+    },
+    preference_relation: {
+        newServiceTree: 'Add ServiceTree',
+        serviceTreeName: 'Name',
+        public: 'Public',
+        saveLayout: 'Save Layout',
+        childNodesNotFound: 'There are no child nodes and no business relationship can be formed. Please select again!',
+        tips1: 'Cannot form a view with the currently selected node, please select again!',
+        tips2: 'Please enter the new serviceTree name!',
+        tips3: 'Please select at least two nodes!',
+    },
+    history: {
+        ciChange: 'CI',
+        relationChange: 'Relation',
+        ciTypeChange: 'CIType',
+        triggerHistory: 'Triggers',
+        opreateTime: 'Operate Time',
+        user: 'User',
+        userTips: 'Enter filter username',
+        filter: 'Search',
+        filterOperate: 'fitler operation',
+        attribute: 'Attribute',
+        old: 'Old',
+        new: 'New',
+        noUpdate: 'No update',
+        itemsPerPage: '/page',
+        triggerName: 'Name',
+        event: 'Event',
+        action: 'Actoin',
+        status: 'Status',
+        done: 'Done',
+        undone: 'Undone',
+        triggerTime: 'Trigger Time',
+        totalItems: '{total} records in total',
+        pleaseSelect: 'Please select',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        deleteCIType: 'Delete CIType',
+        addCIType: 'Add CIType',
+        updateCIType: 'Update CIType',
+        addAttribute: 'Add Attribute',
+        updateAttribute: 'Update Attribute',
+        deleteAttribute: 'Delete Attribute',
+        addTrigger: 'Add Trigger',
+        updateTrigger: 'Update Trigger',
+        deleteTrigger: 'Delete Trigger',
+        addUniqueConstraint: 'Add Unique Constraint',
+        updateUniqueConstraint: 'Update Unique Constraint',
+        deleteUniqueConstraint: 'Delete Unique Constraint',
+        addRelation: 'Add Relation',
+        deleteRelation: 'Delete Relation',
+        noModifications: 'No Modifications',
+        attr: 'attribute',
+        attrId: 'attribute id',
+        changeDescription: 'attribute id: {attr_id}, {before_days} day(s) in advance, Subject: {subject}\nContent: {body}\nNotify At: {notify_at}'
+    },
+    relation_type: {
+        addRelationType: 'New',
+        nameTips: 'Please enter a type name',
+    },
+    ad: {
+        upload: 'Import',
+        download: 'Export',
+        accpet: 'Accept',
+        accpetBy: 'Accept By',
+        acceptTime: 'Accept Time',
+        confirmAccept: 'Confirm Accept?',
+        accpetSuccess: 'Accept successfully',
+        isAccpet: 'Is accept',
+        deleteADC: 'Confirm to delete this data?',
+        batchDelete: 'Confirm to delete this data?',
+        agent: 'Built-in & Plug-ins',
+        snmp: 'Network Devices',
+        http: 'Public Clouds',
+        rule: 'AutoDiscovery Rules',
+        timeout: 'Timeout error',
+        mode: 'Mode',
+        collectSettings: 'Collection Settings',
+        updateFields: 'Update Field',
+        pluginScript: `# -*- coding:utf-8 -*-
+
+        import json
+        
+        
+        class AutoDiscovery(object):
+        
+            @property
+            def unique_key(self):
+                """
+        
+                :return: Returns the name of a unique attribute
+                """
+                return
+        
+            @staticmethod
+            def attributes():
+                """
+                Define attribute fields
+                :return: Returns a list of attribute fields. The list items are (name, type, description). The name must be in English.
+                type: String Integer Float Date DateTime Time JSON
+                For example:
+                return [
+                    ("ci_type", "String", "CIType name"),
+                    ("private_ip", "String", "Internal IP, multiple values separated by commas")
+                ]
+                """
+                return []
+        
+            @staticmethod
+            def run():
+                """
+                Execution entry, returns collected attribute values
+                :return: 
+                Returns a list, the list item is a dictionary, the dictionary key is the attribute name, and the value is the attribute value
+                For example:
+                return [dict(ci_type="server", private_ip="192.168.1.1")]
+                """
+                return []
+        
+        
+        if __name__ == "__main__":
+            result = AutoDiscovery().run()
+            if isinstance(result, list):
+                print("AutoDiscovery::Result::{}".format(json.dumps(result)))
+            else:
+                print("ERROR: The collection return must be a list")
+        `,
+        server: 'Server',
+        vserver: 'VServer',
+        nic: 'NIC',
+        disk: 'harddisk',
+    },
+    ci: {
+        attributeDesc: 'Attribute Description',
+        selectRows: 'Select: {rows} items',
+        addRelation: 'Add Relation',
+        all: 'All',
+        batchUpdate: 'Batch Update',
+        batchUpdateConfirm: 'Are you sure you want to make batch updates?',
+        batchUpdateInProgress: 'Currently being updated in batches',
+        batchUpdateInProgress2: 'Updating in batches, {total} in total, {successNum} successful, {errorNum} failed',
+        batchDeleting: 'Deleting...',
+        batchDeleting2: 'Deleting {total} items in total, {successNum} items successful, {errorNum} items failed',
+        copyFailed: 'Copy failed',
+        noLevel: 'No hierarchical relationship!',
+        batchAddRelation: 'Batch Add Relation',
+        history: 'History',
+        topo: 'Topology',
+        table: 'Table',
+        m2mTips: 'The current CIType relationship is many-to-many, please go to the SerivceTree(relation view) to add or delete',
+        confirmDeleteRelation: 'Confirm to delete the relationship?',
+        tips1: 'Use commas to separate multiple values',
+        tips2: 'The field can be modified as needed. When the value is empty, the field will be left empty.',
+        tips3: 'Please select the fields that need to be modified',
+        tips4: 'At least one field must be selected',
+        tips5: 'Search name | alias',
+        tips6: 'Speed ​​up retrieval, full-text search possible, no need to use conditional filtering\n\n json currently does not support indexing \n\nText characters longer than 190 cannot be indexed',
+        tips7: 'The form of expression is a drop-down box, and the value must be in the predefined value',
+        tips8: 'Multiple values, such as intranet IP',
+        tips9: 'For front-end only',
+        tips10: 'Other attributes of the CIType are computed using expressions\n\nA code snippet computes the returned value.',
+        newUpdateField: 'Add a Attribute',
+        attributeSettings: 'Attribute Settings',
+    },
+    serviceTree: {
+        deleteNode: 'Delete Node',
+        tips1: 'For example: q=os_version:centos&sort=os_version',
+        tips2: 'Expression search',
+        alert1: 'The administrator has not configured the ServiceTree(relation view), or you do not have permission to access it!',
+        copyFailed: 'Copy failed',
+        deleteRelationConfirm: 'Confirm to remove selected {name} from current relationship?',
+    },
+    tree: {
+        tips1: 'Please go to Preference page first to complete your subscription!',
+        subSettings: 'Settings',
+    }
+}
+export default cmdb_en
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
new file mode 100644
index 0000000..5b448c6
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -0,0 +1,482 @@
+const cmdb_zh = {
+    relation: '关系',
+    attribute: '属性',
+    menu: {
+        views: '视图',
+        config: '配置',
+        backend: '管理端',
+        ciTable: '资源数据',
+        ciTree: '资源层级',
+        ciSearch: '资源搜索',
+        adCIs: '自动发现池',
+        preference: '我的订阅',
+        batchUpload: '批量导入',
+        citypeManage: '模型配置',
+        backendManage: '后台管理',
+        customDashboard: '定制仪表盘',
+        serviceTreeDefine: '服务树定义',
+        citypeRelation: '模型关系',
+        operationHistory: '操作审计',
+        relationType: '关系类型',
+        ad: '自动发现',
+    },
+    ciType: {
+        ciType: '模型',
+        attributes: '模型属性',
+        relation: '模型关联',
+        trigger: '触发器',
+        attributeAD: '属性自动发现',
+        relationAD: '关系自动发现',
+        grant: '权限配置',
+        addGroup: '新增分组',
+        editGroup: '修改分组',
+        group: '分组',
+        attributeLibray: '属性库',
+        addCITypeInGroup: '在该组中新增CI模型',
+        addCIType: '新增CI模型',
+        editGroupName: '编辑组名称',
+        deleteGroup: '删除该组',
+        CITypeName: '模型名(英文)',
+        English: '英文',
+        inputAttributeName: '请输入属性名',
+        attributeNameTips: '不能以数字开头，可以是英文 数字以及下划线 (_)',
+        editCIType: '编辑模型',
+        defaultSort: '默认排序',
+        selectDefaultOrderAttr: '选择默认排序属性',
+        asec: '正序',
+        desc: '倒序',
+        uniqueKey: '唯一标识',
+        uniqueKeySelect: '请选择唯一标识',
+        notfound: '找不到想要的?',
+        cannotDeleteGroupTips: '该分组下有数据, 不能删除!',
+        confirmDeleteGroup: '确定要删除分组 【{groupName}】 吗？',
+        confirmDeleteCIType: '确定要删除模型 【{typeName}】 吗？',
+        uploading: '正在导入中',
+        uploadFailed: '导入失败，请稍后重试',
+        addPlugin: '新建plugin',
+        deletePlugin: '删除plugin',
+        confirmDeleteADT: '确认删除 【{pluginName}】',
+        attributeMap: '字段映射',
+        autoDiscovery: '自动发现',
+        node: '节点',
+        adExecConfig: '执行配置',
+        adExecTarget: '执行机器',
+        oneagentIdTips: '请输入以0x开头的16进制OneAgent ID',
+        selectFromCMDBTips: '从CMDB中选择 ',
+        adAutoInLib: '自动入库',
+        adInterval: '采集频率',
+        byInterval: '按间隔',
+        allNodes: '所有节点',
+        specifyNodes: '指定节点',
+        specifyNodesTips: '请填写指定节点！',
+        username: '用户名',
+        password: '密码',
+        link: '链接',
+        list: '多值',
+        listTips: '字段的值是1个或者多个，接口返回的值的类型是list',
+        computeForAllCITips: '所有CI触发计算',
+        confirmcomputeForAllCITips: '确认触发所有CI的计算？',
+        isUnique: '是否唯一',
+        unique: '唯一',
+        isChoice: '是否选择',
+        defaultShow: '默认显示',
+        defaultShowTips: 'CI实例表格默认展示该字段',
+        isSortable: '可排序',
+        isIndex: '是否索引',
+        index: '索引',
+        indexTips: '字段可被用于检索，加速查询',
+        confirmDelete: '确认删除【{name}】?',
+        confirmDelete2: '确认删除?',
+        computeSuccess: '触发成功！',
+        basicConfig: '基础设置',
+        AttributeName: '属性名(英文)',
+        DataType: '数据类型',
+        defaultValue: '默认值',
+        autoIncID: '自增ID',
+        customTime: '自定义时间',
+        advancedSettings: '高级设置',
+        font: '字体',
+        color: '颜色',
+        choiceValue: '预定义值',
+        computedAttribute: '计算属性',
+        computedAttributeTips: '该属性的值是通过模型的其它属性构建的表达式或者执行一段代码的方式计算而来，属性的引用方法为: {{ 属性名 }}',
+        addAttribute: '新增属性',
+        existedAttributes: '已有属性',
+        editAttribute: '编辑属性',
+        addAttributeTips1: '选中排序，则必须也要选中！',
+        uniqueConstraint: '唯一校验',
+        up: '上移',
+        down: '下移',
+        selectAttribute: '添加属性',
+        groupExisted: '分组名称已存在',
+        attributeSortedTips: '其他分组中的属性不能进行排序，如需排序请先拖至自定义的分组！',
+        buildinAttribute: '内置字段',
+        expr: '表达式',
+        code: '代码',
+        apply: '应用',
+        continueAdd: '继续添加',
+        filter: '过滤',
+        choiceOther: '其他模型属性',
+        choiceWebhookTips: '返回的结果按字段来过滤，层级嵌套用##分隔，比如k1##k2，web请求返回{k1: [{k2: 1}, {k2: 2}]}, 解析结果为[1, 2]',
+        selectCIType: '请选择CMDB模型',
+        selectCITypeAttributes: '请选择模型属性',
+        selectAttributes: '请选择属性',
+        choiceScriptDemo: 'class ChoiceValue(object):\n    @staticmethod\n    def values():\n        """\n        执行入口, 返回预定义值\n        :return: 返回一个列表, 值的类型同属性的类型\n        例如:\n        return ["在线", "下线"]\n        """\n        return []',
+        valueExisted: '当前值已存在！',
+        addRelation: '新增关系',
+        sourceCIType: '源模型',
+        sourceCITypeTips: '请选择源模型',
+        dstCIType: '目标模型名',
+        dstCITypeTips: '请选择目标模型',
+        relationType: '关联类型',
+        relationTypeTips: '请选择关联类型',
+        isParent: '被',
+        relationConstraint: '关系约束',
+        relationConstraintTips: '请选择关系约束',
+        one2Many: '一对多',
+        one2One: '一对一',
+        many2Many: '多对多',
+        basicInfo: '基本信息',
+        nameInputTips: '请输入名称',
+        triggerDataChange: '数据变更',
+        triggerDate: '日期属性',
+        triggerEnable: '开启',
+        descInput: '请输入备注',
+        triggerCondition: '触发条件',
+        addInstance: '新增实例',
+        deleteInstance: '删除实例',
+        changeInstance: '实例变更',
+        selectMutipleAttributes: '请选择属性（多选）',
+        selectSingleAttribute: '请选择属性（单选）',
+        beforeDays: '提前',
+        days: '天',
+        notifyAt: '发送时间',
+        notify: '通知',
+        triggerAction: '触发动作',
+        receivers: '收件人',
+        emailTips: '请输入邮箱，多个邮箱用;分隔',
+        customEmail: '自定义收件人',
+        notifySubject: '通知标题',
+        notifySubjectTips: '请输入通知标题',
+        notifyContent: '内容',
+        notifyMethod: '通知方式',
+        botSelect: '请选择机器人',
+        refAttributeTips: '标题、内容可以引用该模型的属性值，引用方法为: {{ attr_name }}',
+        webhookRefAttributeTips: '请求参数可以引用该模型的属性值，引用方法为: {{ attr_name }}',
+        newTrigger: '新增触发器',
+        editTriggerTitle: '编辑触发器 {name}',
+        newTriggerTitle: '新增触发器 {name}',
+        confirmDeleteTrigger: '确认删除该触发器吗?',
+        int: '整数',
+        float: '浮点数',
+        text: '文本',
+        datetime: '日期时间',
+        date: '日期',
+        time: '时间',
+        json: 'JSON',
+        event: '事件'
+    },
+    components: {
+        unselectAttributes: '未选属性',
+        selectAttributes: '已选属性',
+        downloadCI: '导出数据',
+        filename: '文件名',
+        filenameInputTips: '请输入文件名',
+        saveType: '保存类型',
+        saveTypeTips: '请选择保存类型',
+        xlsx: 'Excel工作簿(*.xlsx)',
+        csv: 'CSV(逗号分隔)(*.csv)',
+        html: '网页(*.html)',
+        xml: 'XML数据(*.xml)',
+        txt: '文本文件(制表符分隔)(*.txt)',
+        grantUser: '授权用户/部门',
+        grantRole: '授权角色',
+        confirmRevoke: '确认删除 【{name}】 的 【授权】 权限？',
+        readAttribute: '查看字段',
+        readCI: '查看实例',
+        config: '配置',
+        ciTypeGrant: '模型权限',
+        ciGrant: '实例权限',
+        attributeGrant: '字段权限',
+        relationGrant: '关系权限',
+        perm: '权限',
+        all: '全部',
+        customize: '自定义',
+        none: '无',
+        customizeFilterName: '请输入自定义筛选条件名',
+        colorPickerError: '初始化颜色格式错误，使用#fff或rgb格式',
+        example: '示例值',
+        aliyun: '阿里云',
+        tencentcloud: '腾讯云',
+        huaweicloud: '华为云',
+        beforeChange: '变更前',
+        afterChange: '变更后',
+        noticeContentTips: '请输入通知内容',
+        saveQuery: '保存筛选条件',
+        pleaseSearch: '请查找',
+        conditionFilter: '条件过滤',
+        attributeDesc: '属性说明',
+        ciSearchTips: '1. json属性不能搜索<br />2. 搜索内容包括逗号, 则需转义 ,<br />3. 只搜索索引属性, 非索引属性使用条件过滤',
+        ciSearchTips2: '例: q=hostname:*0.0.0.0*',
+        subCIType: '订阅模型',
+        already: '已',
+        not: '未',
+        sub: '订阅',
+        selectBelow: '请在下方进行选择',
+        subSuccess: '订阅成功',
+        selectMethods: '请选择方式',
+        noAuthRequest: '暂无请求认证',
+        noParamRequest: '暂无参数认证',
+        requestParam: '请求参数',
+        param: '参数{param}',
+        value: '值{value}',
+        clear: '清空',
+    },
+    batch: {
+        downloadFailed: '失败下载',
+        unselectCIType: '尚未选择模板类型',
+        pleaseUploadFile: '请上传文件',
+        batchUploadCanceled: '批量上传已取消',
+        selectCITypeTips: '请选择模板类型',
+        downloadTemplate: '下载模板',
+        drawTips: '点击或拖拽文件至此上传！',
+        supportFileTypes: '支持文件类型：xls，xlsx',
+        uploadResult: '上传结果',
+        total: '共',
+        successItems: '条，已成功',
+        failedItems: '条，失败',
+        items: '条',
+        errorTips: '错误信息',
+        requestFailedTips: '请求出现错误，请稍后再试',
+        requestSuccessTips: '批量上传已完成',
+    },
+    preference: {
+        mySub: '我的订阅',
+        sub: '订阅',
+        cancelSub: '取消订阅',
+        editSub: '编辑订阅',
+        peopleSub: '位同事已订阅',
+        noSub: '暂无同事订阅',
+        cancelSubSuccess: '取消订阅成功',
+        confirmcancelSub: '确认取消订阅',
+        confirmcancelSub2: '确认取消订阅 {name} 吗?',
+        of: '的',
+        hoursAgo: '小时前',
+        daysAgo: '天前',
+        monthsAgo: '月前',
+        yearsAgo: '年前',
+        just: '刚刚',
+    },
+    custom_dashboard: {
+        charts: '图表',
+        newChart: '新增图表',
+        editChart: '编辑图表',
+        title: '标题',
+        titleTips: '请输入图表标题',
+        calcIndicators: '计算指标',
+        dimensions: '维度',
+        selectDimensions: '请选择维度',
+        quantity: '数量',
+        childCIType: '关系模型',
+        level: '层级',
+        levelTips: '请输入关系层级',
+        preview: '预览',
+        showIcon: '是否显示icon',
+        chartType: '图表类型',
+        dataFilter: '数据筛选',
+        format: '格式',
+        fontColor: '字体颜色',
+        backgroundColor: '背景颜色',
+        chartColor: '图表颜色',
+        chartLength: '图表长度',
+        barType: '柱状图类型',
+        stackedBar: '堆积柱状图',
+        multipleSeriesBar: '多系列柱状图',
+        axis: '轴',
+        direction: '方向',
+        lowerShadow: '下方阴影',
+        count: '指标',
+        bar: '柱状图',
+        line: '折线图',
+        pie: '饼状图',
+        table: '表格',
+        default: '默认',
+        relation: '关系',
+        noCustomDashboard: '管理员暂未定制仪表盘',
+    },
+    preference_relation: {
+        newServiceTree: '新增服务树',
+        serviceTreeName: '服务树名',
+        public: '公开',
+        saveLayout: '保存布局',
+        childNodesNotFound: '不存在子节点，不能形成业务关系，请重新选择！',
+        tips1: '不能与当前选中节点形成视图，请重新选择！',
+        tips2: '请输入新增服务树名！',
+        tips3: '请选择至少两个节点！',
+    },
+    history: {
+        ciChange: 'CI变更',
+        relationChange: '关系变更',
+        ciTypeChange: '模型变更',
+        triggerHistory: '触发历史',
+        opreateTime: '操作时间',
+        user: '用户',
+        userTips: '输入筛选用户名',
+        filter: '筛选',
+        filterOperate: '筛选操作',
+        attribute: '属性',
+        old: '旧',
+        new: '新',
+        noUpdate: '没有修改',
+        itemsPerPage: '/页',
+        triggerName: '触发器名称',
+        event: '事件',
+        action: '动作',
+        status: '状态',
+        done: '已完成',
+        undone: '未完成',
+        triggerTime: '触发时间',
+        totalItems: '共 {total} 条记录',
+        pleaseSelect: '请选择',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        deleteCIType: '删除模型',
+        addCIType: '新增模型',
+        updateCIType: '修改模型',
+        addAttribute: '新增属性',
+        updateAttribute: '修改属性',
+        deleteAttribute: '删除属性',
+        addTrigger: '新增触发器',
+        updateTrigger: '修改触发器',
+        deleteTrigger: '删除触发器',
+        addUniqueConstraint: '新增联合唯一',
+        updateUniqueConstraint: '修改联合唯一',
+        deleteUniqueConstraint: '删除联合唯一',
+        addRelation: '新增关系',
+        deleteRelation: '删除关系',
+        noModifications: '没有修改',
+        attr: '属性名',
+        attrId: '属性ID',
+        changeDescription: '属性ID：{attr_id}，提前：{before_days}天，主题：{subject}\n内容：{body}\n通知时间：{notify_at}'
+    },
+    relation_type: {
+        addRelationType: '新增关系类型',
+        nameTips: '请输入类型名',
+    },
+    ad: {
+        upload: '规则导入',
+        download: '规则导出',
+        accpet: '入库',
+        accpetBy: '入库人',
+        acceptTime: '入库时间',
+        confirmAccept: '确认入库？',
+        accpetSuccess: '入库成功',
+        isAccpet: '是否入库',
+        deleteADC: '确认删除该条数据？',
+        batchDelete: '确认删除这些数据？',
+        agent: '内置 & 插件',
+        snmp: '网络设备',
+        http: '公有云资源',
+        rule: '自动发现规则',
+        timeout: '超时错误',
+        mode: '模式',
+        collectSettings: '采集设置',
+        updateFields: '更新字段',
+        pluginScript: `# -*- coding:utf-8 -*-
+
+        import json
+        
+        
+        class AutoDiscovery(object):
+        
+            @property
+            def unique_key(self):
+                """
+        
+                :return: 返回唯一属性的名字
+                """
+                return
+        
+            @staticmethod
+            def attributes():
+                """
+                定义属性字段
+                :return: 返回属性字段列表, 列表项是(名称, 类型, 描述), 名称必须是英文
+                类型: String Integer Float Date DateTime Time JSON
+                例如:
+                return [
+                    ("ci_type", "String", "模型名称"),
+                    ("private_ip", "String", "内网IP, 多值逗号分隔")
+                ]
+                """
+                return []
+        
+            @staticmethod
+            def run():
+                """
+                执行入口, 返回采集的属性值
+                :return: 返回一个列表, 列表项是字典, 字典key是属性名称, value是属性值
+                例如:
+                return [dict(ci_type="server", private_ip="192.168.1.1")]
+                """
+                return []
+        
+        
+        if __name__ == "__main__":
+            result = AutoDiscovery().run()
+            if isinstance(result, list):
+                print("AutoDiscovery::Result::{}".format(json.dumps(result)))
+            else:
+                print("ERROR: 采集返回必须是列表")
+        `,
+        server: '物理机',
+        vserver: '虚拟机',
+        nic: '网卡',
+        disk: '硬盘',
+    },
+    ci: {
+        attributeDesc: '属性说明',
+        selectRows: '选取：{rows} 项',
+        addRelation: '添加关系',
+        all: '全部',
+        batchUpdate: '批量修改',
+        batchUpdateConfirm: '确认要批量修改吗？',
+        batchUpdateInProgress: '正在批量修改',
+        batchUpdateInProgress2: '正在批量修改，共{total}个，成功{successNum}个，失败{errorNum}个',
+        batchDeleting: '正在删除...',
+        batchDeleting2: '正在删除，共{total}个，成功{successNum}个，失败{errorNum}个',
+        copyFailed: '复制失败！',
+        noLevel: '无层级关系！',
+        batchAddRelation: '批量添加关系',
+        history: '操作历史',
+        topo: '拓扑',
+        table: '表格',
+        m2mTips: '当前模型关系为多对多，请前往关系视图进行增删操作',
+        confirmDeleteRelation: '确认删除关系？',
+        tips1: '多个值使用,分割',
+        tips2: '可根据需要修改字段，当值为 空 时，则该字段 置空',
+        tips3: '请选择需要修改的字段',
+        tips4: '必须至少选择一个字段',
+        tips5: '搜索 名称 | 别名',
+        tips6: '加快检索, 可以全文搜索, 无需使用条件过滤\n\n json目前不支持建索引 \n\n文本字符长度超过190不能建索引',
+        tips7: '表现形式是下拉框, 值必须在预定义值里',
+        tips8: '多值, 比如内网IP',
+        tips9: '仅针对前端',
+        tips10: '模型的其他属性通过表达式的方式计算出来\n\n一个代码片段计算返回的值',
+        newUpdateField: '新增修改字段',
+        attributeSettings: '字段设置',
+    },
+    serviceTree: {
+        deleteNode: '删除节点',
+        tips1: '例：q=os_version:centos&sort=os_version',
+        tips2: '表达式搜索',
+        alert1: '管理员 还未配置业务关系, 或者你无权限访问!',
+        copyFailed: '复制失败',
+        deleteRelationConfirm: '确认将选中的 {name} 从当前关系中删除？',
+    },
+    tree: {
+        tips1: '请先到 我的订阅 页面完成订阅!',
+        subSettings: '订阅设置',
+    }
+}
+export default cmdb_zh
diff --git a/cmdb-ui/src/modules/cmdb/router/index.js b/cmdb-ui/src/modules/cmdb/router/index.js
index 8bb1365..eaadc4b 100644
--- a/cmdb-ui/src/modules/cmdb/router/index.js
+++ b/cmdb-ui/src/modules/cmdb/router/index.js
@@ -13,19 +13,19 @@ const genCmdbRoutes = async () => {
       {
         path: '/cmdb/dashboard',
         name: 'cmdb_dashboard',
-        meta: { title: '仪表盘', icon: 'ops-cmdb-dashboard', selectedIcon: 'ops-cmdb-dashboard-selected', keepAlive: false },
+        meta: { title: 'dashboard', icon: 'ops-cmdb-dashboard', selectedIcon: 'ops-cmdb-dashboard-selected', keepAlive: false },
         component: () => import('../views/dashboard/index_v2.vue')
       },
       {
         path: '/cmdb/disabled1',
         name: 'cmdb_disabled1',
-        meta: { title: '视图', disabled: true },
+        meta: { title: 'cmdb.menu.views', disabled: true },
       },
       {
         path: '/cmdb/resourceviews',
         name: 'cmdb_resource_views',
         component: RouteView,
-        meta: { title: '资源数据', icon: 'ops-cmdb-resource', selectedIcon: 'ops-cmdb-resource-selected', keepAlive: true },
+        meta: { title: 'cmdb.menu.ciTable', icon: 'ops-cmdb-resource', selectedIcon: 'ops-cmdb-resource-selected', keepAlive: true },
         hideChildrenInMenu: false,
         children: []
       },
@@ -33,108 +33,108 @@ const genCmdbRoutes = async () => {
         path: '/cmdb/tree_views',
         component: () => import('../views/tree_views'),
         name: 'cmdb_tree_views',
-        meta: { title: '资源层级', icon: 'ops-cmdb-tree', selectedIcon: 'ops-cmdb-tree-selected', keepAlive: false },
+        meta: { title: 'cmdb.menu.ciTree', icon: 'ops-cmdb-tree', selectedIcon: 'ops-cmdb-tree-selected', keepAlive: false },
         hideChildrenInMenu: true,
         children: [
           {
             path: '/cmdb/tree_views/:typeId',
             name: 'cmdb_tree_views_item',
             component: () => import('../views/tree_views'),
-            meta: { title: '资源层级', keepAlive: false },
+            meta: { title: 'cmdb.menu.ciTree', keepAlive: false },
             hidden: true
           }]
       },
       {
         path: '/cmdb/resourcesearch',
         name: 'cmdb_resource_search',
-        meta: { title: '资源搜索', icon: 'ops-cmdb-search', selectedIcon: 'ops-cmdb-search-selected', keepAlive: false },
+        meta: { title: 'cmdb.menu.ciSearch', icon: 'ops-cmdb-search', selectedIcon: 'ops-cmdb-search-selected', keepAlive: false },
         component: () => import('../views/resource_search/index.vue')
       },
       {
         path: '/cmdb/adc',
         name: 'cmdb_auto_discovery_ci',
-        meta: { title: '自动发现池', icon: 'ops-cmdb-adc', selectedIcon: 'ops-cmdb-adc-selected', keepAlive: false },
+        meta: { title: 'cmdb.menu.adCIs', icon: 'ops-cmdb-adc', selectedIcon: 'ops-cmdb-adc-selected', keepAlive: false },
         component: () => import('../views/discoveryCI/index.vue')
       },
       {
         path: '/cmdb/disabled2',
         name: 'cmdb_disabled2',
-        meta: { title: '配置', disabled: true, },
+        meta: { title: 'cmdb.menu.config', disabled: true, },
       },
       {
         path: '/cmdb/preference',
         component: () => import('../views/preference/index'),
         name: 'cmdb_preference',
-        meta: { title: '我的订阅', icon: 'ops-cmdb-preference', selectedIcon: 'ops-cmdb-preference-selected', keepAlive: false }
+        meta: { title: 'cmdb.menu.preference', icon: 'ops-cmdb-preference', selectedIcon: 'ops-cmdb-preference-selected', keepAlive: false }
       },
       {
         path: '/cmdb/batch',
         component: () => import('../views/batch'),
         name: 'cmdb_batch',
-        meta: { 'title': '批量导入', icon: 'ops-cmdb-batch', selectedIcon: 'ops-cmdb-batch-selected', keepAlive: false }
+        meta: { 'title': 'cmdb.menu.batchUpload', icon: 'ops-cmdb-batch', selectedIcon: 'ops-cmdb-batch-selected', keepAlive: false }
       },
       {
         path: '/cmdb/ci_types',
         name: 'ci_type',
         component: () => import('../views/ci_types/index'),
-        meta: { title: '模型配置', icon: 'ops-cmdb-citype', selectedIcon: 'ops-cmdb-citype-selected', keepAlive: false, permission: ['cmdb_admin', 'admin'] }
+        meta: { title: 'cmdb.menu.citypeManage', icon: 'ops-cmdb-citype', selectedIcon: 'ops-cmdb-citype-selected', keepAlive: false, permission: ['cmdb_admin', 'admin'] }
       },
       {
         path: '/cmdb/disabled3',
         name: 'cmdb_disabled3',
-        meta: { title: '管理端', disabled: true, permission: ['cmdb_admin', 'OneOPS_Application_Admin', 'admin'], },
+        meta: { title: 'cmdb.menu.backend', disabled: true, permission: ['cmdb_admin', 'OneOPS_Application_Admin', 'admin'], },
       },
       {
         path: '/cmdb/citypes',
         name: 'cmdb_ci_type',
         component: RouteView,
         redirect: '/cmdb/ci_type',
-        meta: { title: '后台管理', icon: 'setting', permission: ['cmdb_admin', 'OneOPS_Application_Admin', 'admin'], },
+        meta: { title: 'cmdb.menu.backendManage', icon: 'setting', permission: ['cmdb_admin', 'OneOPS_Application_Admin', 'admin'], },
         children: [
           {
             path: '/cmdb/customdashboard',
             name: 'cmdb_custom_dashboard',
             component: () => import('../views/custom_dashboard/index'),
-            meta: { title: '定制仪表盘', keepAlive: false, icon: 'ops-cmdb-customdashboard', selectedIcon: 'ops-cmdb-customdashboard-selected' }
+            meta: { title: 'cmdb.menu.customDashboard', keepAlive: false, icon: 'ops-cmdb-customdashboard', selectedIcon: 'ops-cmdb-customdashboard-selected' }
           },
           {
             path: '/cmdb/preferencerelation',
             name: 'preference_relation',
             component: () => import('../views/preference_relation/index'),
-            meta: { title: '业务关系定义', keepAlive: false, icon: 'ops-cmdb-preferencerelation', selectedIcon: 'ops-cmdb-preferencerelation-selected' }
+            meta: { title: 'cmdb.menu.serviceTreeDefine', keepAlive: false, icon: 'ops-cmdb-preferencerelation', selectedIcon: 'ops-cmdb-preferencerelation-selected' }
           },
           {
             path: '/cmdb/modelrelation',
             name: 'model_relation',
             hideChildrenInMenu: true,
             component: () => import('../views/model_relation/index'),
-            meta: { title: '模型关系', keepAlive: false, icon: 'ops-cmdb-modelrelation', selectedIcon: 'ops-cmdb-modelrelation-selected' }
+            meta: { title: 'cmdb.menu.citypeRelation', keepAlive: false, icon: 'ops-cmdb-modelrelation', selectedIcon: 'ops-cmdb-modelrelation-selected' }
           },
           {
             path: '/cmdb/operationhistory',
             name: 'operation_history',
             hideChildrenInMenu: true,
             component: () => import('../views/operation_history/index'),
-            meta: { title: '操作审计', keepAlive: false, icon: 'ops-cmdb-operation', selectedIcon: 'ops-cmdb-operation-selected' }
+            meta: { title: 'cmdb.menu.operationHistory', keepAlive: false, icon: 'ops-cmdb-operation', selectedIcon: 'ops-cmdb-operation-selected' }
           },
           {
             path: '/cmdb/relationtype',
             name: 'relation_type',
             hideChildrenInMenu: true,
             component: () => import('../views/relation_type/index'),
-            meta: { title: '关系类型', keepAlive: false, icon: 'ops-cmdb-relationtype', selectedIcon: 'ops-cmdb-relationtype-selected' }
+            meta: { title: 'cmdb.menu.relationType', keepAlive: false, icon: 'ops-cmdb-relationtype', selectedIcon: 'ops-cmdb-relationtype-selected' }
           },
           {
             path: '/cmdb/discovery',
             name: 'discovery',
             component: () => import('../views/discovery/index'),
-            meta: { title: '自动发现', keepAlive: false, icon: 'ops-cmdb-adr', selectedIcon: 'ops-cmdb-adr-selected' }
+            meta: { title: 'cmdb.menu.ad', keepAlive: false, icon: 'ops-cmdb-adr', selectedIcon: 'ops-cmdb-adr-selected' }
           },
         ]
       }
     ]
   }
-  // 动态添加订阅的条目及业务关系
+  // Dynamically add subscription items and business relationships
   const [preference, relation] = await Promise.all([getPreference(), getRelationView()])
 
   preference.forEach(item => {
@@ -143,7 +143,7 @@ const genCmdbRoutes = async () => {
       component: () => import(`../views/ci/index`),
       name: `cmdb_${item.id}`,
       meta: { title: item.alias, keepAlive: false, typeId: item.id, name: item.name, customIcon: item.icon },
-      // hideChildrenInMenu: true // 强制显示 MenuItem 而不是 SubMenu
+      // hideChildrenInMenu: true // Force display of MenuItem instead of SubMenu
     })
   })
   const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
diff --git a/cmdb-ui/src/modules/cmdb/utils/const.js b/cmdb-ui/src/modules/cmdb/utils/const.js
index 326690e..10e6fd5 100644
--- a/cmdb-ui/src/modules/cmdb/utils/const.js
+++ b/cmdb-ui/src/modules/cmdb/utils/const.js
@@ -1,28 +1,32 @@
-export const valueTypeMap = {
-  '0': '整数',
-  '1': '浮点数',
-  '2': '文本',
-  '3': '日期时间',
-  '4': '日期',
-  '5': '时间',
-  '6': 'JSON',
-  '7': '密码',
-  '8': '链接'
-}
-
-export const defautValueColor = [
-  { value: '#d9d9d9' },
-  { value: '#ffccc7' },
-  { value: '#ffd8bf' },
-  { value: '#ffe7ba' },
-  { value: '#fff1b8' },
-  { value: '#f4ffb8' },
-  { value: '#d9f7be' },
-  { value: '#b5f5ec' },
-  { value: '#bae7ff' },
-  { value: '#d6e4ff' },
-  { value: '#efdbff' },
-  { value: '#ffd6e7' },
-]
-
-export const defaultBGColors = ['#ffccc7', '#ffd8bf', '#ffe7ba', '#fff1b8', '#d9f7be', '#b5f5ec', '#bae7ff', '#d6e4ff', '#efdbff', '#ffd6e7']
+import i18n from '@/lang'
+
+export const valueTypeMap = () => {
+  return {
+    '0': i18n.t('cmdb.ciType.int'),
+    '1': i18n.t('cmdb.ciType.float'),
+    '2': i18n.t('cmdb.ciType.text'),
+    '3': i18n.t('cmdb.ciType.datetime'),
+    '4': i18n.t('cmdb.ciType.date'),
+    '5': i18n.t('cmdb.ciType.time'),
+    '6': 'JSON',
+    '7': i18n.t('cmdb.ciType.password'),
+    '8': i18n.t('cmdb.ciType.link')
+  }
+}
+
+export const defautValueColor = [
+  { value: '#d9d9d9' },
+  { value: '#ffccc7' },
+  { value: '#ffd8bf' },
+  { value: '#ffe7ba' },
+  { value: '#fff1b8' },
+  { value: '#f4ffb8' },
+  { value: '#d9f7be' },
+  { value: '#b5f5ec' },
+  { value: '#bae7ff' },
+  { value: '#d6e4ff' },
+  { value: '#efdbff' },
+  { value: '#ffd6e7' },
+]
+
+export const defaultBGColors = ['#ffccc7', '#ffd8bf', '#ffe7ba', '#fff1b8', '#d9f7be', '#b5f5ec', '#bae7ff', '#d6e4ff', '#efdbff', '#ffd6e7']
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/index.vue b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
index d9f8a4a..17eb136 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
@@ -16,9 +16,9 @@
         <CiUploadTable :ciTypeAttrs="ciTypeAttrs" ref="ciUploadTable" :uploadData="uploadData"></CiUploadTable>
         <div class="cmdb-batch-upload-action">
           <a-space size="large">
-            <a-button type="primary" ghost @click="handleCancel">取消</a-button>
-            <a-button @click="handleUpload" type="primary">上传</a-button>
-            <a-button v-if="hasError && !isUploading" @click="downloadError" type="primary">失败下载</a-button>
+            <a-button type="primary" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
+            <a-button @click="handleUpload" type="primary">{{ $t('upload') }}</a-button>
+            <a-button v-if="hasError && !isUploading" @click="downloadError" type="primary">{{ $t('cmdb.batch.downloadFailed') }}</a-button>
           </a-space>
         </div>
       </a-col>
@@ -109,7 +109,7 @@ export default {
     },
     handleUpload() {
       if (!this.ciType) {
-        this.$message.error('尚未选择模板类型')
+        this.$message.error(this.$t('cmdb.batch.unselectCIType'))
         return
       }
       if (this.uploadData && this.uploadData.length > 0) {
@@ -118,7 +118,7 @@ export default {
           this.$refs.uploadResult.upload2Server()
         })
       } else {
-        this.$message.error('请上传文件')
+        this.$message.error(this.$t('cmdb.batch.pleaseUploadFile'))
       }
     },
     handleCancel() {
@@ -127,7 +127,7 @@ export default {
         this.$refs.ciTypeChoice.selectNum = null
         this.hasError = false
       } else {
-        this.$message.warning('批量上传已取消')
+        this.$message.warning(this.$t('cmdb.batch.batchUploadCanceled'))
         this.isUploading = false
       }
     },
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
index 219947a..59c837c 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
@@ -1,9 +1,9 @@
 <template>
   <a-space>
-    <span>模板类型：</span>
+    <span>{{ $t('cmdb.ciType.ciType') }}: </span>
     <a-select
       showSearch
-      placeholder="请选择模板类型"
+      :placeholder="$t('cmdb.batch.selectCITypeTips')"
       @change="selectCiType"
       :style="{ width: '300px' }"
       class="ops-select"
@@ -20,7 +20,7 @@
       type="primary"
       class="ops-button-primary"
       icon="download"
-    >下载模板</a-button
+    >{{ $t('cmdb.batch.downloadTemplate') }}</a-button
     >
     <a-modal
       :bodyStyle="{ paddingTop: 0 }"
@@ -31,14 +31,14 @@
       @ok="handleOk"
       wrapClassName="ci-type-choice-modal"
     >
-      <a-divider orientation="left">模型属性</a-divider>
+      <a-divider orientation="left">{{ $t('cmdb.ciType.attributes') }}</a-divider>
       <a-checkbox
         @change="changeCheckAll"
         :style="{ marginBottom: '20px' }"
         :indeterminate="indeterminate"
         :checked="checkAll"
       >
-        全选
+        {{ $t('checkAll') }}
       </a-checkbox>
       <br />
       <a-checkbox-group style="width:100%" v-model="checkedAttrs">
@@ -52,7 +52,7 @@
         </a-row>
       </a-checkbox-group>
       <template v-if="parentsType && parentsType.length">
-        <a-divider orientation="left">模型关联</a-divider>
+        <a-divider orientation="left">{{ $t('cmdb.ciType.relation') }}</a-divider>
         <a-row :gutter="[24, 24]" align="top" type="flex">
           <a-col :style="{ display: 'inline-flex' }" :span="12" v-for="item in parentsType" :key="item.id">
             <a-checkbox @click="clickParent(item)" :checked="checkedParents.includes(item.alias || item.name)">
@@ -150,7 +150,7 @@ export default {
   },
   methods: {
     selectCiType(el) {
-      // 当选择好模板类型时的回调函数
+      // Callback function when a template type is selected
       getCITypeAttributesById(el).then((res) => {
         this.$emit('getCiTypeAttr', res)
         this.selectCiTypeAttrList = res
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
index bac1322..d18a048 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
@@ -10,8 +10,8 @@
       :disabled="!ciType || isUploading"
     >
       <img :style="{ width: '80px', height: '80px' }" src="@/assets/file_upload.png" />
-      <p class="ant-upload-text">点击或拖拽文件至此上传！</p>
-      <p class="ant-upload-hint">支持文件类型：xls，xlsx</p>
+      <p class="ant-upload-text">{{ $t('cmdb.batch.drawTips') }}</p>
+      <p class="ant-upload-hint">{{ $t('cmdb.batch.supportFileTypes') }}</p>
     </a-upload-dragger>
     <div v-for="item in fileList" :key="item.name" class="cmdb-batch-upload-dragger-file">
       <span><a-icon type="file" :style="{ color: '#2F54EB', marginRight: '5px' }" />{{ item.name }}</span>
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
index 55c3b54..1ccab2c 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="cmdb-batch-upload-result" v-if="visible">
-    <h3 class="cmdb-batch-upload-result-title">上传结果</h3>
+    <h3 class="cmdb-batch-upload-result-title">{{ $t('cmdb.batch.uploadResult') }}</h3>
     <div class="cmdb-batch-upload-result-content">
       <h4>
-        共&nbsp;<span style="color: blue">{{ total }}</span> 条，已成功
-        <span style="color: lightgreen">{{ success }}</span> 条，失败 <span style="color: red">{{ errorNum }} </span>条
+        {{ $t('cmdb.batch.total') }}&nbsp;<span style="color: blue">{{ total }}</span> {{ $t('cmdb.batch.successItems') }}
+        <span style="color: lightgreen">{{ success }}</span> {{ $t('cmdb.batch.failedItems') }} <span style="color: red">{{ errorNum }} </span>{{ $t('cmdb.batch.items') }}
       </h4>
       <div>
-        <span>错误信息：</span>
+        <span>{{ $t('cmdb.batch.errorTips') }}: </span>
         <ol>
           <li :key="item + index" v-for="(item, index) in errorItems">{{ item }}</li>
         </ol>
@@ -71,7 +71,7 @@ export default {
                 if (r.status === 'fulfilled') {
                   this.success += 1
                 } else {
-                  this.errorItems.push(r?.reason?.response?.data.message ?? '请求出现错误，请稍后再试')
+                  this.errorItems.push(r?.reason?.response?.data.message ?? this.$t('cmdb.batch.requestFailedTips'))
                   this.errorNum += 1
                   this.$emit('uploadResultError', 6 * i + j)
                 }
@@ -86,7 +86,7 @@ export default {
       }
       if (this.isUploading) {
         this.$emit('uploadResultDone')
-        this.$message.success('批量上传已完成')
+        this.$message.success(this.$t('cmdb.batch.requestSuccessTips'))
       }
     },
   },
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/index.vue b/cmdb-ui/src/modules/cmdb/views/ci/index.vue
index 8a484a5..46bc6fb 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/index.vue
@@ -1,954 +1,1027 @@
-<template>
-  <div id="ciIndex" class="cmdb-ci">
-    <div class="cmdb-views-header">
-      <span>
-        <span class="cmdb-views-header-title">{{ $route.meta.title || $route.meta.name }}</span>
-        <span
-          @click="
-            () => {
-              $refs.metadataDrawer.open(typeId)
-            }
-          "
-          class="cmdb-views-header-metadata"
-        >
-          <a-icon type="info-circle" />属性说明
-        </span>
-      </span>
-      <a-space>
-        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')">
-          新建
-        </a-button>
-        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">授权</a-button>
-        <a-popconfirm
-          :title="`确认取消订阅 ${this.$route.meta.title || this.$route.meta.name} 吗？`"
-          ok-text="确认"
-          cancel-text="取消"
-          @confirm="unsubscribe"
-          placement="bottomRight"
-        >
-          <a-button size="small" icon="star" type="primary" ghost>取消订阅</a-button>
-        </a-popconfirm>
-      </a-space>
-    </div>
-    <div class="cmdb-ci-main">
-      <a-spin :tip="loadTip" :spinning="loading">
-        <SearchForm
-          ref="search"
-          @refresh="handleSearch"
-          :preferenceAttrList="preferenceAttrList"
-          :typeId="typeId"
-          :selectedRowKeys="selectedRowKeys"
-          @copyExpression="copyExpression"
-        >
-          <PreferenceSearch
-            ref="preferenceSearch"
-            v-show="!selectedRowKeys.length"
-            @getQAndSort="getQAndSort"
-            @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-          />
-          <div class="ops-list-batch-action" v-show="!!selectedRowKeys.length">
-            <span @click="$refs.create.handleOpen(true, 'update')">修改</span>
-            <a-divider type="vertical" />
-            <span @click="openBatchDownload">下载</span>
-            <a-divider type="vertical" />
-            <span @click="batchDelete">删除</span>
-            <span>选取：{{ selectedRowKeys.length }} 项</span>
-          </div>
-        </SearchForm>
-        <CiDetail ref="detail" :typeId="typeId" />
-        <ops-table
-          :id="`cmdb-ci-${typeId}`"
-          border
-          keep-source
-          show-overflow
-          resizable
-          ref="xTable"
-          size="small"
-          :row-config="{ useKey: true, keyField: '_id' }"
-          :height="tableHeight"
-          show-header-overflow
-          highlight-hover-row
-          :data="instanceList"
-          @checkbox-change="onSelectChange"
-          @checkbox-all="onSelectChange"
-          @checkbox-range-end="onSelectRangeEnd"
-          :checkbox-config="{ reserve: true, highlight: true, range: true }"
-          @edit-closed="handleEditClose"
-          @edit-actived="handleEditActived"
-          :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
-          :sort-config="{ remote: true, trigger: 'cell' }"
-          @sort-change="handleSortCol"
-          :row-key="true"
-          :column-key="true"
-          :cell-style="getCellStyle"
-          :scroll-y="{ enabled: true, gt: 20 }"
-          :scroll-x="{ enabled: true, gt: 0 }"
-          class="ops-unstripe-table"
-          :style="{ margin: '0 -12px' }"
-          :custom-config="{ storage: true }"
-        >
-          <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
-          <vxe-table-column
-            v-for="(col, index) in columns"
-            :key="`${col.field}_${index}`"
-            :title="col.title"
-            :field="col.field"
-            :width="col.width"
-            :sortable="col.sortable"
-            :edit-render="getColumnsEditRender(col)"
-            :cell-type="col.value_type === '2' ? 'string' : 'auto'"
-            :fixed="col.is_fixed ? 'left' : ''"
-          >
-            <!-- <template #edit="{row}"><a-input v-model="row[col.field]"></a-input></template> -->
-            <template #header>
-              <span class="vxe-handle">
-                <OpsMoveIcon
-                  style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
-                />
-                <span>{{ col.title }}</span>
-              </span>
-            </template>
-            <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
-              <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
-              <a-select
-                :getPopupContainer="(trigger) => trigger.parentElement"
-                :style="{ width: '100%', height: '32px' }"
-                v-model="row[col.field]"
-                placeholder="请选择"
-                v-if="col.is_choice"
-                :showArrow="false"
-                :mode="col.is_list ? 'multiple' : 'default'"
-                class="ci-table-edit-select"
-                allowClear
-              >
-                <a-select-option
-                  :value="choice[0]"
-                  :key="'edit_' + col.field + idx"
-                  v-for="(choice, idx) in col.filters"
-                >
-                  <span
-                    :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
-                  >
-                    <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
-                      <img
-                        v-if="choice[1].icon.id && choice[1].icon.url"
-                        :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
-                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                      />
-                      <ops-icon
-                        v-else
-                        :style="{ color: choice[1].icon.color, marginRight: '5px' }"
-                        :type="choice[1].icon.name"
-                      />
-                    </template>
-                    {{ choice[0] }}
-                  </span>
-                </a-select-option>
-              </a-select>
-              <a-select
-                :getPopupContainer="(trigger) => trigger.parentElement"
-                :style="{ width: '100%', height: '32px' }"
-                v-model="row[col.field]"
-                placeholder="请选择"
-                v-else-if="col.is_list"
-                :showArrow="false"
-                mode="tags"
-                class="ci-table-edit-select"
-                allowClear
-              >
-              </a-select>
-            </template>
-            <template
-              v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
-              #default="{ row }"
-            >
-              <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
-              <a
-                v-else-if="col.is_link && row[col.field]"
-                :href="
-                  row[col.field].startsWith('http') || row[col.field].startsWith('https')
-                    ? `${row[col.field]}`
-                    : `http://${row[col.field]}`
-                "
-                target="_blank"
-              >{{ row[col.field] }}</a
-              >
-              <PasswordField
-                v-else-if="col.is_password && row[col.field]"
-                :ci_id="row._id"
-                :attr_id="col.attr_id"
-              ></PasswordField>
-              <template v-else-if="col.is_choice">
-                <template v-if="col.is_list">
-                  <span
-                    v-for="value in row[col.field]"
-                    :key="value"
-                    :style="{
-                      borderRadius: '4px',
-                      padding: '1px 5px',
-                      margin: '2px',
-                      ...getChoiceValueStyle(col, value),
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                    }"
-                  >
-                    <img
-                      v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
-                      :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
-                      :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                    />
-                    <ops-icon
-                      v-else
-                      :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
-                      :type="getChoiceValueIcon(col, value).name"
-                    />{{ value }}
-                  </span>
-                </template>
-                <span
-                  v-else
-                  :style="{
-                    borderRadius: '4px',
-                    padding: '1px 5px',
-                    margin: '2px 0',
-                    ...getChoiceValueStyle(col, row[col.field]),
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                  }"
-                >
-                  <img
-                    v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
-                    :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
-                    :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                  />
-                  <ops-icon
-                    v-else
-                    :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
-                    :type="getChoiceValueIcon(col, row[col.field]).name"
-                  />
-                  {{ row[col.field] }}
-                </span>
-              </template>
-            </template>
-          </vxe-table-column>
-          <vxe-column align="left" field="operate" fixed="right" width="80">
-            <template #header>
-              <span>操作</span>
-              <EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" />
-              <!-- <a-icon class="operation-icon" type="control" /> -->
-            </template>
-            <template #default="{ row }">
-              <a-space>
-                <a @click="$refs.detail.create(row.ci_id || row._id)">
-                  <a-icon type="unordered-list" />
-                </a>
-                <a-tooltip title="添加关系">
-                  <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
-                    <a-icon type="retweet" />
-                  </a>
-                </a-tooltip>
-                <a @click="deleteCI(row)" :style="{ color: 'red' }">
-                  <a-icon type="delete" />
-                </a>
-              </a-space>
-            </template>
-          </vxe-column>
-          <template #empty>
-            <div v-if="loading" style="height: 200px; line-height: 200px">加载中...</div>
-            <div v-else>
-              <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-              <div>暂无数据</div>
-            </div>
-          </template>
-        </ops-table>
-        <div :style="{ textAlign: 'right', marginTop: '4px' }">
-          <a-pagination
-            :showSizeChanger="true"
-            :current="currentPage"
-            size="small"
-            :total="totalNumber"
-            show-quick-jumper
-            :page-size="pageSize"
-            :page-size-options="pageSizeOptions"
-            @showSizeChange="onShowSizeChange"
-            :show-total="(total, range) => `当前${range[0]}-${range[1]} 共 ${total}条记录`"
-            @change="
-              (page) => {
-                currentPage = page
-              }
-            "
-          >
-            <template slot="buildOptionText" slot-scope="props">
-              <span v-if="props.value !== '100000'">{{ props.value }}条/页</span>
-              <span v-if="props.value === '100000'">全部</span>
-            </template>
-          </a-pagination>
-        </div>
-        <create-instance-form ref="create" @reload="reloadData" @submit="batchUpdate" />
-        <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
-        <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
-        <MetadataDrawer ref="metadataDrawer" />
-        <CMDBGrant ref="cmdbGrant" resourceTypeName="CIType" app_id="cmdb" />
-      </a-spin>
-    </div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import Sortable from 'sortablejs'
-import store from '@/store'
-import router, { resetRouter } from '@/router'
-
-import SearchForm from '../../components/searchForm/SearchForm.vue'
-import CreateInstanceForm from './modules/CreateInstanceForm'
-import CiDetail from './modules/CiDetail'
-import EditAttrsPopover from './modules/editAttrsPopover'
-import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
-import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
-import { getSubscribeAttributes, subscribeCIType, subscribeTreeView } from '@/modules/cmdb/api/preference'
-import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
-import { searchResourceType } from '@/modules/acl/api/resource'
-import { getCITableColumns } from '../../utils/helper'
-import { intersection } from '@/utils/functions/set'
-import PasswordField from '../../components/passwordField/index.vue'
-import BatchDownload from '../../components/batchDownload/batchDownload.vue'
-import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
-import MetadataDrawer from './modules/MetadataDrawer.vue'
-import CMDBGrant from '../../components/cmdbGrant'
-import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
-import { getAttrPassword } from '../../api/CITypeAttr'
-
-export default {
-  name: 'InstanceList',
-  components: {
-    SearchForm,
-    CreateInstanceForm,
-    CiDetail,
-    JsonEditor,
-    PasswordField,
-    EditAttrsPopover,
-    BatchDownload,
-    PreferenceSearch,
-    MetadataDrawer,
-    CMDBGrant,
-    OpsMoveIcon,
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    isCheckboxFixed() {
-      const idx = this.columns.findIndex((item) => item.is_fixed)
-      return idx > -1
-    },
-    tableHeight() {
-      // if (this.selectedRowKeys && this.selectedRowKeys.length) {
-      //   return this.windowHeight - 246
-      // }
-      return this.windowHeight - 210
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-      loading: false,
-      currentPage: 1,
-      pageSizeOptions: ['50', '100', '200', '100000'],
-      pageSize: 50,
-      totalNumber: 0,
-      loadTip: '',
-      form: this.$form.createForm(this),
-      typeId: this.$router.currentRoute.meta.typeId,
-      preferenceAttrList: [],
-
-      instanceList: [],
-      // 表头
-      columns: [],
-      // custom table alert & rowSelection
-      selectedRowKeys: [],
-      // 对照是否编辑
-      initialInstanceList: [],
-      sortByTable: undefined,
-      isEditActive: false,
-      attrList: [],
-      attributes: {},
-      // 表格拖拽的参数
-      tableDragClassName: [],
-
-      resource_type: {},
-
-      initialPasswordValue: {},
-      passwordValue: {},
-      lastEditCiId: null,
-      isContinueCloseEdit: true,
-    }
-  },
-  watch: {
-    '$route.path': function(newPath, oldPath) {
-      this.reloadBoard()
-    },
-    currentPage: function(newVal, oldVal) {
-      this.loadTableData(this.sortByTable)
-    },
-  },
-  async created() {
-    await this.getAttributeList()
-    await this.loadPreferenceAttrList()
-    await this.loadTableData()
-    localStorage.setItem('ops_ci_typeid', this.typeId)
-  },
-
-  provide() {
-    return {
-      handleSearch: this.handleSearch,
-      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
-      attrList: () => {
-        return this.attrList
-      },
-      attributes: () => {
-        return this.attributes
-      },
-      filterCompPreferenceSearch: () => {
-        return { type_id: this.typeId }
-      },
-      resource_type: () => {
-        return this.resource_type
-      },
-    }
-  },
-  inject: ['reloadBoard'],
-  mounted() {
-    setTimeout(() => {
-      this.columnDrop()
-    }, 1000)
-  },
-  beforeDestroy() {
-    if (this.sortable) {
-      this.sortable.destroy()
-    }
-  },
-  methods: {
-    async getAttributeList() {
-      await getCITypeAttributesById(this.typeId).then((res) => {
-        this.attrList = res.attributes
-        this.attributes = res
-      })
-    },
-    handleSearch() {
-      this.$refs.xTable.getVxetableRef().clearSort()
-      this.sortByTable = undefined
-      this.$nextTick(() => {
-        if (this.currentPage === 1) {
-          this.reloadData()
-        } else {
-          this.currentPage = 1
-        }
-      })
-    },
-    async loadTableData(sortByTable = undefined) {
-      try {
-        this.loading = true
-        // 若模糊搜索可以 queryParam相关后期可删除
-        const fuzzySearch = this.$refs['search'].fuzzySearch
-        const expression = this.$refs['search'].expression || ''
-        const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-        const regSort = /(?<=sort=).+/g
-
-        const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-        // 如果是表格点击的排序 以表格为准
-        let sort
-        if (sortByTable) {
-          sort = sortByTable
-        } else {
-          sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
-        }
-        const res = await searchCI({
-          q: `_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`,
-          // q: `${this.mergeQ(queryParams)}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`,
-          count: this.pageSize,
-          page: this.currentPage,
-          sort,
-        })
-        this.totalNumber = res['numfound']
-        this.columns = this.getColumns(res.result, this.preferenceAttrList)
-        this.columns.forEach((col) => {
-          if (col.is_password) {
-            this.initialPasswordValue[col.field] = ''
-            this.passwordValue[col.field] = ''
-          }
-        })
-        const jsonAttrList = this.attrList.filter((attr) => attr.value_type === '6')
-        this.instanceList = res['result'].map((item) => {
-          jsonAttrList.forEach(
-            (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
-          )
-          return { ..._.cloneDeep(item) }
-        })
-        this.initialInstanceList = _.cloneDeep(this.instanceList)
-        this.$nextTick(() => {
-          // this.setSelectRows()
-          this.$refs.xTable.getVxetableRef().refreshColumn()
-        })
-      } finally {
-        this.loading = false
-      }
-    },
-    getColumns(data, attrList) {
-      const width = document.getElementById('ciIndex').clientWidth - 50
-      return getCITableColumns(data, attrList, width)
-    },
-    setSelectRows() {
-      const cached = new Set(this.selectedRowKeys)
-      const loaded = new Set(this.instanceList.map((i) => i.ci_id || i._id))
-
-      const inter = Array.from(intersection(cached, loaded))
-
-      if (inter.length === this.instanceList.length) {
-        this.$refs['xTable'].getVxetableRef().setAllCheckboxRow(true)
-      } else {
-        const rows = []
-        inter.forEach((rid) => {
-          rows.push(this.$refs['xTable'].getVxetableRef().getRowById(rid))
-        })
-        this.$refs['xTable'].getVxetableRef().setCheckboxRow(rows, true)
-      }
-    },
-    async loadPreferenceAttrList() {
-      const subscribed = await getSubscribeAttributes(this.typeId)
-      this.preferenceAttrList = subscribed.attributes // 已经订阅的全部列
-    },
-
-    onSelectChange() {
-      const xTable = this.$refs.xTable.getVxetableRef()
-      const records = [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()]
-      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
-    },
-    onSelectRangeEnd({ records }) {
-      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
-    },
-    reloadData() {
-      this.loadTableData()
-    },
-
-    handleEditClose({ row, rowIndex, column }) {
-      if (!this.isContinueCloseEdit) {
-        return
-      }
-      const $table = this.$refs['xTable'].getVxetableRef()
-      const data = {}
-      this.columns.forEach((item) => {
-        if (!(item.field in this.initialPasswordValue) && !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) {
-          data[item.field] = row[item.field] ?? null
-        }
-      })
-      Object.keys(this.initialPasswordValue).forEach((key) => {
-        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
-          data[key] = this.passwordValue[key]
-          row[key] = this.passwordValue[key]
-        }
-      })
-      this.isEditActive = false
-      this.lastEditCiId = null
-      if (JSON.stringify(data) !== '{}') {
-        updateCI(row.ci_id || row._id, data)
-          .then(() => {
-            this.$message.success('保存成功！')
-            $table.reloadRow(row, null)
-            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
-            _initialInstanceList[rowIndex] = {
-              ..._initialInstanceList[rowIndex],
-              ...data,
-            }
-            this.initialInstanceList = _initialInstanceList
-          })
-          .catch((err) => {
-            console.log(err)
-            $table.revertData(row)
-          })
-      }
-      this.columns.forEach((col) => {
-        if (col.is_password) {
-          this.initialPasswordValue[col.field] = ''
-          this.passwordValue[col.field] = ''
-        }
-      })
-    },
-
-    async openBatchDownload() {
-      this.$refs.batchDownload.open({
-        preferenceAttrList: this.preferenceAttrList,
-        ciTypeName: this.$route.meta.title || this.$route.meta.name,
-      })
-    },
-    batchDownload({ filename, type, checkedKeys }) {
-      const jsonAttrList = []
-      checkedKeys.forEach((key) => {
-        const _find = this.attrList.find((attr) => attr.name === key)
-        if (_find && _find.value_type === '6') jsonAttrList.push(key)
-      })
-      const data = _.cloneDeep([
-        ...this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords(),
-        ...this.$refs.xTable.getVxetableRef().getCheckboxRecords(true),
-      ])
-      this.$refs.xTable.getVxetableRef().exportData({
-        filename,
-        type,
-        columnFilterMethod({ column }) {
-          return checkedKeys.includes(column.property)
-        },
-        data: [
-          ...data.map((item) => {
-            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
-            return { ...item }
-          }),
-        ],
-      })
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-    },
-    batchUpdate(values) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认要批量修改吗？',
-        async onOk() {
-          that.batchUpdateAsync(values)
-        },
-      })
-    },
-    async batchUpdateAsync(values) {
-      let successNum = 0
-      let errorNum = 0
-      this.loading = true
-      this.loadTip = `正在批量修改...`
-      const payload = {}
-      Object.keys(values).forEach((key) => {
-        if (values[key] || values[key] === 0) {
-          payload[key] = values[key]
-        }
-        // 字段值支持置空
-        // 目前存在字段值不支持置空，由后端返回
-        if (values[key] === undefined || values[key] === null) {
-          payload[key] = null
-        }
-      })
-      this.$refs.create.visible = false
-      for (let i = 0; i < this.selectedRowKeys.length; i++) {
-        await updateCI(this.selectedRowKeys[i], payload, false)
-          .then(() => {
-            successNum += 1
-          })
-          .catch(() => {
-            errorNum += 1
-          })
-          .finally(() => {
-            this.loadTip = `正在批量修改，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
-          })
-      }
-      this.loading = false
-      this.loadTip = ''
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      this.reloadData()
-    },
-    batchDelete() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          that.batchDeleteAsync()
-        },
-      })
-    },
-    async batchDeleteAsync() {
-      let successNum = 0
-      let errorNum = 0
-      this.loading = true
-      this.loadTip = `正在删除...`
-      const floor = Math.ceil(this.selectedRowKeys.length / 6)
-      for (let i = 0; i < floor; i++) {
-        const itemList = this.selectedRowKeys.slice(6 * i, 6 * i + 6)
-        const promises = itemList.map((x) => deleteCI(x, false))
-        await Promise.allSettled(promises)
-          .then((res) => {
-            res.forEach((r) => {
-              if (r.status === 'fulfilled') {
-                successNum += 1
-              } else {
-                errorNum += 1
-              }
-            })
-          })
-          .finally(() => {
-            this.loadTip = `正在删除，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
-          })
-      }
-      this.loading = false
-      this.loadTip = ''
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      this.$nextTick(() => {
-        if (this.currentPage === 1) {
-          this.loadTableData()
-        } else {
-          this.currentPage = 1
-        }
-      })
-    },
-    deleteCI(record) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          deleteCI(record.ci_id || record._id).then((res) => {
-            // that.$refs.table.refresh(true)
-            that.$message.success('删除成功！')
-            that.reloadData()
-          })
-        },
-      })
-    },
-    async refreshAfterEditAttrs() {
-      await this.loadPreferenceAttrList()
-      await this.loadTableData()
-    },
-    getColumnsEditRender(col) {
-      const _editRender = {
-        ...col.editRender,
-      }
-      if (col.value_type === '6') {
-        _editRender.events = { focus: this.handleFocusJson }
-      }
-      return _editRender
-    },
-    handleFocusJson({ column, row }) {
-      this.$refs.jsonEditor.open(column, row)
-    },
-    jsonEditorOk(row, column, jsonData) {
-      // 后端写数据有快慢，不拉接口直接修改table的数据
-      // this.reloadData()
-      this.instanceList.forEach((item) => {
-        if (item._id === row._id) {
-          item[column.property] = JSON.stringify(jsonData)
-        }
-      })
-      this.$refs.xTable.getVxetableRef().refreshColumn()
-    },
-    onShowSizeChange(current, pageSize) {
-      this.pageSize = pageSize
-      if (this.currentPage === 1) {
-        this.reloadData()
-      } else {
-        this.currentPage = 1
-      }
-    },
-    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
-      let sortByTable
-      if (order === 'asc') {
-        sortByTable = property
-      } else if (order === 'desc') {
-        sortByTable = `-${property}`
-      }
-      this.sortByTable = sortByTable
-      this.$nextTick(() => {
-        if (this.currentPage === 1) {
-          this.loadTableData(sortByTable)
-        } else {
-          this.currentPage = 1
-        }
-      })
-    },
-    columnDrop() {
-      this.$nextTick(() => {
-        const xTable = this.$refs.xTable.getVxetableRef()
-        this.sortable = Sortable.create(
-          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
-          {
-            handle: '.vxe-handle',
-            onChoose: () => {
-              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
-              const classNameList = []
-              header.childNodes.forEach((item) => {
-                classNameList.push(item.classList[1])
-              })
-              this.tableDragClassName = classNameList
-            },
-            onEnd: (params) => {
-              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
-              const { newIndex, oldIndex, from, to } = params
-              // 从tableDragClassName拿到colid
-              const fromColid = this.tableDragClassName[oldIndex]
-              const toColid = this.tableDragClassName[newIndex]
-              const fromColumn = xTable.getColumnById(fromColid)
-              const toColumn = xTable.getColumnById(toColid)
-              const fromIndex = xTable.getColumnIndex(fromColumn)
-              const toIndex = xTable.getColumnIndex(toColumn)
-              const tableColumn = xTable.getColumns()
-              const currRow = tableColumn.splice(fromIndex, 1)[0]
-              tableColumn.splice(toIndex, 0, currRow)
-              xTable.loadColumn(tableColumn)
-            },
-          }
-        )
-      })
-    },
-    getChoiceValueStyle(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.style || {}
-      }
-      return {}
-    },
-    getChoiceValueIcon(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.icon || {}
-      }
-      return {}
-    },
-    handleEditActived() {
-      this.isEditActive = true
-      const passwordCol = this.columns.filter((col) => col.is_password)
-      this.$nextTick(() => {
-        const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
-        const { row, column } = editRecord
-        if (passwordCol.length && this.lastEditCiId !== row._id) {
-          this.$nextTick(async () => {
-            for (let i = 0; i < passwordCol.length; i++) {
-              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
-                this.initialPasswordValue[passwordCol[i].field] = res.value
-                this.passwordValue[passwordCol[i].field] = res.value
-              })
-            }
-            this.isContinueCloseEdit = false
-            await this.$refs.xTable.getVxetableRef().clearEdit()
-            this.isContinueCloseEdit = true
-            this.$nextTick(() => {
-              this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
-            })
-          })
-        }
-        this.lastEditCiId = row._id
-      })
-    },
-    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
-      const { property } = column
-      const _find = this.preferenceAttrList.find((attr) => attr.name === property)
-      if (
-        _find &&
-        _find.option &&
-        _find.option.fontOptions &&
-        row[`${property}`] !== undefined &&
-        row[`${property}`] !== null
-      ) {
-        return { ..._find.option.fontOptions }
-      }
-    },
-    getQAndSort() {
-      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
-      const expression = this.$refs['search'].expression || ''
-      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
-    },
-    setParamsFromPreferenceSearch(item) {
-      const { fuzzySearch, expression } = item.option
-      this.$refs.search.fuzzySearch = fuzzySearch
-      this.$refs.search.expression = expression
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      this.$refs.xTable.getVxetableRef().clearSort()
-      this.sortByTable = undefined
-      this.$nextTick(() => {
-        if (this.currentPage === 1) {
-          this.loadTableData()
-        } else {
-          this.currentPage = 1
-        }
-      })
-    },
-    setPreferenceSearchCurrent(id = null) {
-      this.$refs.preferenceSearch.currentPreferenceSearch = id
-    },
-    copyExpression() {
-      const expression = this.$refs['search'].expression || ''
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      const text = `q=_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
-      this.$copyText(text)
-        .then(() => {
-          this.$message.success('复制成功！')
-        })
-        .catch(() => {
-          this.$message.error('复制失败！')
-        })
-    },
-    unsubscribe(ciType, type = 'all') {
-      const promises = [subscribeCIType(this.typeId, ''), subscribeTreeView(this.typeId, '')]
-      Promise.all(promises).then(() => {
-        const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
-        if (Number(ciType) === Number(lastTypeId)) {
-          localStorage.setItem('ops_ci_typeid', '')
-        }
-        this.$message.success('取消订阅成功')
-        this.resetRoute()
-        this.$router.push('/cmdb/preference')
-      })
-    },
-    resetRoute() {
-      resetRouter()
-      const roles = store.getters.roles
-      store.dispatch('GenerateRoutes', { roles }, { root: true }).then(() => {
-        router.addRoutes(store.getters.appRoutes)
-      })
-    },
-    handlePerm() {
-      roleHasPermissionToGrant({
-        app_id: 'cmdb',
-        resource_type_name: 'CIType',
-        perm: 'grant',
-        resource_name: this.$route.meta.name,
-      }).then((res) => {
-        if (res.result) {
-          searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
-            this.resource_type = { groups: res.groups, id2perms: res.id2perms }
-            this.$nextTick(() => {
-              this.$refs.cmdbGrant.open({
-                name: this.$route.meta.name,
-                cmdbGrantType: 'ci',
-                CITypeId: this.typeId,
-              })
-            })
-          })
-        } else {
-          this.$message.error('权限不足！')
-        }
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less">
-@import '../index.less';
-</style>
-
-<style lang="less" scoped>
-@import '~@/style/static.less';
-.cmdb-ci {
-  margin-bottom: -24px;
-  .cmdb-ci-main {
-    background-color: #fff;
-    border-radius: 15px;
-    padding: 12px;
-  }
-}
-</style>
+<template>
+  <div id="ciIndex" class="cmdb-ci">
+    <div class="cmdb-views-header">
+      <span>
+        <span class="cmdb-views-header-title">{{ $route.meta.title || $route.meta.name }}</span>
+        <span
+          @click="
+            () => {
+              $refs.metadataDrawer.open(typeId)
+            }
+          "
+          class="cmdb-views-header-metadata"
+        >
+          <a-icon type="info-circle" />{{ $t('cmdb.ci.attributeDesc') }}
+        </span>
+      </span>
+      <a-space>
+        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')">
+          {{ $t('create') }}
+        </a-button>
+        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">{{ $t('grant') }}</a-button>
+        <a-popconfirm
+          :title="
+            $t('cmdb.preference.confirmcancelSub2', { name: `${this.$route.meta.title || this.$route.meta.name}` })
+          "
+          :ok-text="$t('confirm')"
+          :cancel-text="$t('cancel')"
+          @confirm="unsubscribe"
+          placement="bottomRight"
+        >
+          <a-button size="small" icon="star" type="primary" ghost>{{ $t('cmdb.preference.cancelSub') }}</a-button>
+        </a-popconfirm>
+      </a-space>
+    </div>
+    <div class="cmdb-ci-main">
+      <a-spin :tip="loadTip" :spinning="loading">
+        <SearchForm
+          ref="search"
+          @refresh="handleSearch"
+          :preferenceAttrList="preferenceAttrList"
+          :typeId="typeId"
+          :selectedRowKeys="selectedRowKeys"
+          @copyExpression="copyExpression"
+        >
+          <PreferenceSearch
+            ref="preferenceSearch"
+            v-show="!selectedRowKeys.length"
+            @getQAndSort="getQAndSort"
+            @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+          />
+          <div class="ops-list-batch-action" v-show="!!selectedRowKeys.length">
+            <span @click="$refs.create.handleOpen(true, 'update')">{{ $t('update') }}</span>
+            <a-divider type="vertical" />
+            <span @click="openBatchDownload">{{ $t('download') }}</span>
+            <a-divider type="vertical" />
+            <span @click="batchDelete">{{ $t('delete') }}</span>
+            <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
+          </div>
+        </SearchForm>
+        <CiDetail ref="detail" :typeId="typeId" />
+        <ops-table
+          :id="`cmdb-ci-${typeId}`"
+          border
+          keep-source
+          show-overflow
+          resizable
+          ref="xTable"
+          size="small"
+          :row-config="{ useKey: true, keyField: '_id' }"
+          :height="tableHeight"
+          show-header-overflow
+          highlight-hover-row
+          :data="instanceList"
+          @checkbox-change="onSelectChange"
+          @checkbox-all="onSelectChange"
+          @checkbox-range-end="onSelectRangeEnd"
+          :checkbox-config="{ reserve: true, highlight: true, range: true }"
+          @edit-closed="handleEditClose"
+          @edit-actived="handleEditActived"
+          :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
+          :sort-config="{ remote: true, trigger: 'cell' }"
+          @sort-change="handleSortCol"
+          :row-key="true"
+          :column-key="true"
+          :cell-style="getCellStyle"
+          :scroll-y="{ enabled: true, gt: 20 }"
+          :scroll-x="{ enabled: true, gt: 0 }"
+          class="ops-unstripe-table"
+          :style="{ margin: '0 -12px' }"
+          :custom-config="{ storage: true }"
+        >
+          <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
+          <vxe-table-column
+            v-for="(col, index) in columns"
+            :key="`${col.field}_${index}`"
+            :title="col.title"
+            :field="col.field"
+            :width="col.width"
+            :sortable="col.sortable"
+            :edit-render="getColumnsEditRender(col)"
+            :cell-type="col.value_type === '2' ? 'string' : 'auto'"
+            :fixed="col.is_fixed ? 'left' : ''"
+          >
+            <!-- <template #edit="{row}"><a-input v-model="row[col.field]"></a-input></template> -->
+            <template #header>
+              <span class="vxe-handle">
+                <OpsMoveIcon
+                  style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
+                />
+                <span>{{ col.title }}</span>
+              </span>
+            </template>
+            <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
+              <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
+              <a-select
+                :getPopupContainer="(trigger) => trigger.parentElement"
+                :style="{ width: '100%', height: '32px' }"
+                v-model="row[col.field]"
+                :v-bind="$t('placeholder2')"
+                v-if="col.is_choice"
+                :showArrow="false"
+                :mode="col.is_list ? 'multiple' : 'default'"
+                class="ci-table-edit-select"
+                allowClear
+              >
+                <a-select-option
+                  :value="choice[0]"
+                  :key="'edit_' + col.field + idx"
+                  v-for="(choice, idx) in col.filters"
+                >
+                  <span
+                    :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
+                  >
+                    <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
+                      <img
+                        v-if="choice[1].icon.id && choice[1].icon.url"
+                        :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
+                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                      />
+                      <ops-icon
+                        v-else
+                        :style="{ color: choice[1].icon.color, marginRight: '5px' }"
+                        :type="choice[1].icon.name"
+                      />
+                    </template>
+                    {{ choice[0] }}
+                  </span>
+                </a-select-option>
+              </a-select>
+              <a-select
+                :getPopupContainer="(trigger) => trigger.parentElement"
+                :style="{ width: '100%', height: '32px' }"
+                v-model="row[col.field]"
+                :placeholder="$t('placeholder2')"
+                v-else-if="col.is_list"
+                :showArrow="false"
+                mode="tags"
+                class="ci-table-edit-select"
+                allowClear
+              >
+              </a-select>
+            </template>
+            <template
+              v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
+              #default="{ row }"
+            >
+              <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
+              <a
+                v-else-if="col.is_link && row[col.field]"
+                :href="
+                  row[col.field].startsWith('http') || row[col.field].startsWith('https')
+                    ? `${row[col.field]}`
+                    : `http://${row[col.field]}`
+                "
+                target="_blank"
+              >{{ row[col.field] }}</a
+              >
+              <PasswordField
+                v-else-if="col.is_password && row[col.field]"
+                :ci_id="row._id"
+                :attr_id="col.attr_id"
+              ></PasswordField>
+              <template v-else-if="col.is_choice">
+                <template v-if="col.is_list">
+                  <span
+                    v-for="value in row[col.field]"
+                    :key="value"
+                    :style="{
+                      borderRadius: '4px',
+                      padding: '1px 5px',
+                      margin: '2px',
+                      ...getChoiceValueStyle(col, value),
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                    }"
+                  >
+                    <img
+                      v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
+                      :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
+                      :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                    />
+                    <ops-icon
+                      v-else
+                      :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
+                      :type="getChoiceValueIcon(col, value).name"
+                    />{{ value }}
+                  </span>
+                </template>
+                <span
+                  v-else
+                  :style="{
+                    borderRadius: '4px',
+                    padding: '1px 5px',
+                    margin: '2px 0',
+                    ...getChoiceValueStyle(col, row[col.field]),
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                >
+                  <img
+                    v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
+                    :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
+                    :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                  />
+                  <ops-icon
+                    v-else
+                    :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
+                    :type="getChoiceValueIcon(col, row[col.field]).name"
+                  />
+                  {{ row[col.field] }}
+                </span>
+              </template>
+            </template>
+          </vxe-table-column>
+          <vxe-column align="left" field="operate" fixed="right" width="120">
+            <template #header>
+              <span>{{ $t('operation') }}</span>
+              <EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" />
+              <!-- <a-icon class="operation-icon" type="control" /> -->
+            </template>
+            <template #default="{ row }">
+              <a-space>
+                <a @click="$refs.detail.create(row.ci_id || row._id)">
+                  <a-icon type="unordered-list" />
+                </a>
+                <a-tooltip :title="$t('cmdb.ci.addRelation')">
+                  <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
+                    <a-icon type="retweet" />
+                  </a>
+                </a-tooltip>
+                <a @click="deleteCI(row)" :style="{ color: 'red' }">
+                  <a-icon type="delete" />
+                </a>
+              </a-space>
+            </template>
+          </vxe-column>
+          <template #empty>
+            <div v-if="loading" style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
+            <div v-else>
+              <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
+              <div>{{ $t('noData') }}</div>
+            </div>
+          </template>
+        </ops-table>
+        <div :style="{ textAlign: 'right', marginTop: '4px' }">
+          <a-pagination
+            :showSizeChanger="true"
+            :current="currentPage"
+            size="small"
+            :total="totalNumber"
+            show-quick-jumper
+            :page-size="pageSize"
+            :page-size-options="pageSizeOptions"
+            @showSizeChange="onShowSizeChange"
+            :show-total="
+              (total, range) =>
+                $t('pagination.total', {
+                  range0: range[0],
+                  range1: range[1],
+                  total,
+                })
+            "
+            @change="
+              (page) => {
+                currentPage = page
+              }
+            "
+          >
+            <template slot="buildOptionText" slot-scope="props">
+              <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
+              <span v-if="props.value === '100000'">{{ $t('cmdb.ci.all') }}</span>
+            </template>
+          </a-pagination>
+        </div>
+        <create-instance-form ref="create" @reload="reloadData" @submit="batchUpdate" />
+        <!-- <EditAttrsDrawer ref="editAttrsDrawer" @refresh="refreshAfterEditAttrs" /> -->
+        <!-- <batch-update-relation :typeId="typeId" ref="batchUpdateRelation" @submit="batchUpdateRelation" /> -->
+        <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
+        <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
+        <MetadataDrawer ref="metadataDrawer" />
+        <CMDBGrant ref="cmdbGrant" resourceTypeName="CIType" app_id="cmdb" />
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Sortable from 'sortablejs'
+import store from '@/store'
+import router, { resetRouter } from '@/router'
+
+import SearchForm from '../../components/searchForm/SearchForm.vue'
+import CreateInstanceForm from './modules/CreateInstanceForm'
+import CiDetail from './modules/CiDetail'
+import EditAttrsPopover from './modules/editAttrsPopover'
+import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
+import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
+import { getSubscribeAttributes, subscribeCIType, subscribeTreeView } from '@/modules/cmdb/api/preference'
+import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
+import { searchResourceType } from '@/modules/acl/api/resource'
+import { getCITableColumns } from '../../utils/helper'
+import { intersection } from '@/utils/functions/set'
+import PasswordField from '../../components/passwordField/index.vue'
+import BatchDownload from '../../components/batchDownload/batchDownload.vue'
+import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
+import MetadataDrawer from './modules/MetadataDrawer.vue'
+import CMDBGrant from '../../components/cmdbGrant'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
+import { getAttrPassword } from '../../api/CITypeAttr'
+
+export default {
+  name: 'InstanceList',
+  components: {
+    SearchForm,
+    CreateInstanceForm,
+    CiDetail,
+    JsonEditor,
+    PasswordField,
+    EditAttrsPopover,
+    BatchDownload,
+    PreferenceSearch,
+    MetadataDrawer,
+    CMDBGrant,
+    OpsMoveIcon,
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    isCheckboxFixed() {
+      const idx = this.columns.findIndex((item) => item.is_fixed)
+      return idx > -1
+    },
+    tableHeight() {
+      // if (this.selectedRowKeys && this.selectedRowKeys.length) {
+      //   return this.windowHeight - 246
+      // }
+      return this.windowHeight - 210
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      loading: false,
+      currentPage: 1,
+      pageSizeOptions: ['50', '100', '200', '100000'],
+      pageSize: 50,
+      totalNumber: 0,
+      loadTip: '',
+      form: this.$form.createForm(this),
+      typeId: this.$router.currentRoute.meta.typeId,
+      preferenceAttrList: [],
+
+      instanceList: [],
+      columns: [],
+      // custom table alert & rowSelection
+      selectedRowKeys: [],
+      // Check whether to edit
+      initialInstanceList: [],
+      sortByTable: undefined,
+      isEditActive: false,
+      attrList: [],
+      attributes: {},
+      // Table drag parameters
+      tableDragClassName: [],
+
+      resource_type: {},
+
+      initialPasswordValue: {},
+      passwordValue: {},
+      lastEditCiId: null,
+      isContinueCloseEdit: true,
+    }
+  },
+  watch: {
+    '$route.path': function(newPath, oldPath) {
+      this.reloadBoard()
+    },
+    currentPage: function(newVal, oldVal) {
+      this.loadTableData(this.sortByTable)
+    },
+  },
+  async created() {
+    await this.getAttributeList()
+    await this.loadPreferenceAttrList()
+    await this.loadTableData()
+    localStorage.setItem('ops_ci_typeid', this.typeId)
+  },
+
+  provide() {
+    return {
+      handleSearch: this.handleSearch,
+      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
+      attrList: () => {
+        return this.attrList
+      },
+      attributes: () => {
+        return this.attributes
+      },
+      filterCompPreferenceSearch: () => {
+        return { type_id: this.typeId }
+      },
+      resource_type: () => {
+        return this.resource_type
+      },
+    }
+  },
+  inject: ['reloadBoard'],
+  mounted() {
+    // window.onkeypress = (e) => {
+    //   this.handleKeyPress(e)
+    // }
+    setTimeout(() => {
+      this.columnDrop()
+    }, 1000)
+  },
+  beforeDestroy() {
+    // window.onkeypress = null
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+  },
+  methods: {
+    async getAttributeList() {
+      await getCITypeAttributesById(this.typeId).then((res) => {
+        this.attrList = res.attributes
+        this.attributes = res
+      })
+    },
+    handleSearch() {
+      this.$refs.xTable.getVxetableRef().clearSort()
+      this.sortByTable = undefined
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.reloadData()
+        } else {
+          this.currentPage = 1
+        }
+      })
+    },
+    async loadTableData(sortByTable = undefined) {
+      try {
+        this.loading = true
+        // If fuzzy search is possible, queryParam can be deleted later.
+        // const queryParams = this.$refs['search'].queryParam || {}
+        const fuzzySearch = this.$refs['search'].fuzzySearch
+        const expression = this.$refs['search'].expression || ''
+        const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+        const regSort = /(?<=sort=).+/g
+
+        const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+        // if (exp) {
+        //   exp = exp.replace(/(\:)/g, '$1*')
+        //   exp = exp.replace(/(\,)/g, '*$1')
+        // }
+        // If the sorting is done by clicking on the table, the table will prevail.
+        let sort
+        if (sortByTable) {
+          sort = sortByTable
+        } else {
+          sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
+        }
+        const res = await searchCI({
+          q: `_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`,
+          // q: `${this.mergeQ(queryParams)}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`,
+          count: this.pageSize,
+          page: this.currentPage,
+          sort,
+        })
+        this.totalNumber = res['numfound']
+        this.columns = this.getColumns(res.result, this.preferenceAttrList)
+        this.columns.forEach((col) => {
+          if (col.is_password) {
+            this.initialPasswordValue[col.field] = ''
+            this.passwordValue[col.field] = ''
+          }
+        })
+        const jsonAttrList = this.attrList.filter((attr) => attr.value_type === '6')
+        this.instanceList = res['result'].map((item) => {
+          jsonAttrList.forEach(
+            (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
+          )
+          return { ..._.cloneDeep(item) }
+        })
+        this.initialInstanceList = _.cloneDeep(this.instanceList)
+        this.$nextTick(() => {
+          // this.setSelectRows()
+          this.$refs.xTable.getVxetableRef().refreshColumn()
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    getColumns(data, attrList) {
+      const width = document.getElementById('ciIndex').clientWidth - 50
+      return getCITableColumns(data, attrList, width)
+    },
+    setSelectRows() {
+      const cached = new Set(this.selectedRowKeys)
+      const loaded = new Set(this.instanceList.map((i) => i.ci_id || i._id))
+
+      const inter = Array.from(intersection(cached, loaded))
+
+      if (inter.length === this.instanceList.length) {
+        this.$refs['xTable'].getVxetableRef().setAllCheckboxRow(true)
+      } else {
+        const rows = []
+        inter.forEach((rid) => {
+          rows.push(this.$refs['xTable'].getVxetableRef().getRowById(rid))
+        })
+        this.$refs['xTable'].getVxetableRef().setCheckboxRow(rows, true)
+      }
+    },
+    // mergeQ(params) {
+    //   let q = `_type:${this.typeId}`
+    //   Object.keys(params).forEach((key) => {
+    //     if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
+    //       if (typeof params[key] === 'object' && params[key] && params[key].length > 1) {
+    //         q += `,${key}:(${params[key].join(';')})`
+    //       } else if (params[key]) {
+    //         q += `,${key}:*${params[key]}*`
+    //       }
+    //     }
+    //   })
+    //   return q
+    // },
+
+    async loadPreferenceAttrList() {
+      const subscribed = await getSubscribeAttributes(this.typeId)
+      this.preferenceAttrList = subscribed.attributes // All columns that have been subscribed
+    },
+
+    onSelectChange() {
+      // const current = records.map((i) => i.ci_id || i._id)
+
+      // const cached = new Set(this.selectedRowKeys)
+      // if (checked) {
+      //   current.forEach((i) => {
+      //     cached.add(i)
+      //   })
+      // } else {
+      //   if (row) {
+      //     cached.delete(row.ci_id || row._id)
+      //   } else {
+      //     this.instanceList.map((row) => {
+      //       cached.delete(row.ci_id || row._id)
+      //     })
+      //   }
+      // }
+      const xTable = this.$refs.xTable.getVxetableRef()
+      const records = [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()]
+      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
+    },
+    onSelectRangeEnd({ records }) {
+      // const current = records.map((i) => i.ci_id || i._id)
+      // const cached = new Set(this.selectedRowKeys)
+      // current.forEach((i) => {
+      //   cached.add(i)
+      // })
+      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
+
+      // this.setSelectRows()
+    },
+    reloadData() {
+      this.loadTableData()
+    },
+
+    handleEditClose({ row, rowIndex, column }) {
+      if (!this.isContinueCloseEdit) {
+        return
+      }
+      const $table = this.$refs['xTable'].getVxetableRef()
+      const data = {}
+      this.columns.forEach((item) => {
+        if (
+          !(item.field in this.initialPasswordValue) &&
+          !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])
+        ) {
+          data[item.field] = row[item.field] ?? null
+        }
+      })
+      Object.keys(this.initialPasswordValue).forEach((key) => {
+        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
+          data[key] = this.passwordValue[key]
+          row[key] = this.passwordValue[key]
+        }
+      })
+      this.isEditActive = false
+      this.lastEditCiId = null
+      if (JSON.stringify(data) !== '{}') {
+        updateCI(row.ci_id || row._id, data)
+          .then(() => {
+            this.$message.success(this.$t('saveSuccess'))
+            $table.reloadRow(row, null)
+            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
+            _initialInstanceList[rowIndex] = {
+              ..._initialInstanceList[rowIndex],
+              ...data,
+            }
+            this.initialInstanceList = _initialInstanceList
+          })
+          .catch((err) => {
+            console.log(err)
+            $table.revertData(row)
+          })
+      }
+      this.columns.forEach((col) => {
+        if (col.is_password) {
+          this.initialPasswordValue[col.field] = ''
+          this.passwordValue[col.field] = ''
+        }
+      })
+    },
+
+    async openBatchDownload() {
+      this.$refs.batchDownload.open({
+        preferenceAttrList: this.preferenceAttrList,
+        ciTypeName: this.$route.meta.title || this.$route.meta.name,
+      })
+    },
+    batchDownload({ filename, type, checkedKeys }) {
+      const jsonAttrList = []
+      checkedKeys.forEach((key) => {
+        const _find = this.attrList.find((attr) => attr.name === key)
+        if (_find && _find.value_type === '6') jsonAttrList.push(key)
+      })
+      const data = _.cloneDeep([
+        ...this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords(),
+        ...this.$refs.xTable.getVxetableRef().getCheckboxRecords(true),
+      ])
+      this.$refs.xTable.getVxetableRef().exportData({
+        filename,
+        type,
+        columnFilterMethod({ column }) {
+          return checkedKeys.includes(column.property)
+        },
+        data: [
+          ...data.map((item) => {
+            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
+            return { ...item }
+          }),
+        ],
+      })
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+    },
+    batchUpdate(values) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ci.batchUpdateConfirm'),
+        async onOk() {
+          that.batchUpdateAsync(values)
+        },
+      })
+    },
+    async batchUpdateAsync(values) {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = this.$t('cmdb.ci.batchUpdateInProgress') + '...'
+      const payload = {}
+      Object.keys(values).forEach((key) => {
+        if (values[key] || values[key] === 0) {
+          payload[key] = values[key]
+        }
+        // Field values support blanking
+        // There are currently field values that do not support blanking and will be returned by the backend.
+        if (values[key] === undefined || values[key] === null) {
+          payload[key] = null
+        }
+      })
+      this.$refs.create.visible = false
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await updateCI(this.selectedRowKeys[i], payload, false)
+          .then(() => {
+            successNum += 1
+          })
+          .catch(() => {
+            errorNum += 1
+          })
+          .finally(() => {
+            this.loadTip = this.$t('cmdb.ci.batchUpdateInProgress2', {
+              total: this.selectedRowKeys.length,
+              successNum: successNum,
+              errorNum: errorNum,
+            })
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.reloadData()
+    },
+    batchDelete() {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          that.batchDeleteAsync()
+        },
+      })
+    },
+    async batchDeleteAsync() {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = this.$t('cmdb.ci.batchDeleting')
+      const floor = Math.ceil(this.selectedRowKeys.length / 6)
+      for (let i = 0; i < floor; i++) {
+        const itemList = this.selectedRowKeys.slice(6 * i, 6 * i + 6)
+        const promises = itemList.map((x) => deleteCI(x, false))
+        await Promise.allSettled(promises)
+          .then((res) => {
+            res.forEach((r) => {
+              if (r.status === 'fulfilled') {
+                successNum += 1
+              } else {
+                errorNum += 1
+              }
+            })
+          })
+          .finally(() => {
+            this.loadTip = this.$t('cmdb.ci.batchDeleting2', {
+              total: this.selectedRowKeys.length,
+              successNum: successNum,
+              errorNum: errorNum,
+            })
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.loadTableData()
+        } else {
+          this.currentPage = 1
+        }
+      })
+    },
+    deleteCI(record) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          deleteCI(record.ci_id || record._id).then((res) => {
+            // that.$refs.table.refresh(true)
+            that.$message.success(that.$t('deleteSuccess'))
+            that.reloadData()
+          })
+        },
+      })
+    },
+    async refreshAfterEditAttrs() {
+      await this.loadPreferenceAttrList()
+      await this.loadTableData()
+    },
+    getColumnsEditRender(col) {
+      const _editRender = {
+        ...col.editRender,
+      }
+      if (col.value_type === '6') {
+        _editRender.events = { focus: this.handleFocusJson }
+      }
+      return _editRender
+    },
+    handleFocusJson({ column, row }) {
+      this.$refs.jsonEditor.open(column, row)
+    },
+    jsonEditorOk(row, column, jsonData) {
+      // The backend writes data at different speeds. You can modify the table data directly without pulling the interface.
+      // this.reloadData()
+      this.instanceList.forEach((item) => {
+        if (item._id === row._id) {
+          item[column.property] = JSON.stringify(jsonData)
+        }
+      })
+      this.$refs.xTable.getVxetableRef().refreshColumn()
+    },
+    onShowSizeChange(current, pageSize) {
+      this.pageSize = pageSize
+      if (this.currentPage === 1) {
+        this.reloadData()
+      } else {
+        this.currentPage = 1
+      }
+      setTimeout(() => {
+        // this.setSelectRows()
+      }, 500)
+    },
+    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
+      let sortByTable
+      if (order === 'asc') {
+        sortByTable = property
+      } else if (order === 'desc') {
+        sortByTable = `-${property}`
+      }
+      this.sortByTable = sortByTable
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.loadTableData(sortByTable)
+        } else {
+          this.currentPage = 1
+        }
+      })
+    },
+    columnDrop() {
+      this.$nextTick(() => {
+        const xTable = this.$refs.xTable.getVxetableRef()
+        this.sortable = Sortable.create(
+          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
+          {
+            handle: '.vxe-handle',
+            onChoose: () => {
+              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
+              const classNameList = []
+              header.childNodes.forEach((item) => {
+                classNameList.push(item.classList[1])
+              })
+              this.tableDragClassName = classNameList
+            },
+            onEnd: (params) => {
+              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
+              const { newIndex, oldIndex } = params
+              // 从tableDragClassName拿到colid
+              const fromColid = this.tableDragClassName[oldIndex]
+              const toColid = this.tableDragClassName[newIndex]
+              const fromColumn = xTable.getColumnById(fromColid)
+              const toColumn = xTable.getColumnById(toColid)
+              const fromIndex = xTable.getColumnIndex(fromColumn)
+              const toIndex = xTable.getColumnIndex(toColumn)
+              const tableColumn = xTable.getColumns()
+              const currRow = tableColumn.splice(fromIndex, 1)[0]
+              tableColumn.splice(toIndex, 0, currRow)
+              xTable.loadColumn(tableColumn)
+            },
+          }
+        )
+      })
+    },
+    // tableFilterChangeEvent({ column, property, values, datas, filterList, $event }) {
+    //   console.log(111)
+    // },
+    getChoiceValueStyle(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.style || {}
+      }
+      return {}
+    },
+    getChoiceValueIcon(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.icon || {}
+      }
+      return {}
+    },
+    handleEditActived() {
+      this.isEditActive = true
+      const passwordCol = this.columns.filter((col) => col.is_password)
+      this.$nextTick(() => {
+        const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
+        const { row, column } = editRecord
+        if (passwordCol.length && this.lastEditCiId !== row._id) {
+          this.$nextTick(async () => {
+            for (let i = 0; i < passwordCol.length; i++) {
+              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
+                this.initialPasswordValue[passwordCol[i].field] = res.value
+                this.passwordValue[passwordCol[i].field] = res.value
+              })
+            }
+            this.isContinueCloseEdit = false
+            await this.$refs.xTable.getVxetableRef().clearEdit()
+            this.isContinueCloseEdit = true
+            this.$nextTick(() => {
+              this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
+            })
+          })
+        }
+        this.lastEditCiId = row._id
+      })
+    },
+    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
+      const { property } = column
+      const _find = this.preferenceAttrList.find((attr) => attr.name === property)
+      if (
+        _find &&
+        _find.option &&
+        _find.option.fontOptions &&
+        row[`${property}`] !== undefined &&
+        row[`${property}`] !== null
+      ) {
+        return { ..._find.option.fontOptions }
+      }
+    },
+    getQAndSort() {
+      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
+      const expression = this.$refs['search'].expression || ''
+      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
+    },
+    setParamsFromPreferenceSearch(item) {
+      const { fuzzySearch, expression } = item.option
+      this.$refs.search.fuzzySearch = fuzzySearch
+      this.$refs.search.expression = expression
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.$refs.xTable.getVxetableRef().clearSort()
+      this.sortByTable = undefined
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.loadTableData()
+        } else {
+          this.currentPage = 1
+        }
+      })
+    },
+    setPreferenceSearchCurrent(id = null) {
+      this.$refs.preferenceSearch.currentPreferenceSearch = id
+    },
+    copyExpression() {
+      const expression = this.$refs['search'].expression || ''
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      const text = `q=_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    },
+    unsubscribe(ciType, type = 'all') {
+      const promises = [subscribeCIType(this.typeId, ''), subscribeTreeView(this.typeId, '')]
+      Promise.all(promises).then(() => {
+        const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
+        if (Number(ciType) === Number(lastTypeId)) {
+          localStorage.setItem('ops_ci_typeid', '')
+        }
+        this.$message.success(this.$t('cmdb.preference.cancelSubSuccess'))
+        this.resetRoute()
+        this.$router.push('/cmdb/preference')
+      })
+    },
+    resetRoute() {
+      resetRouter()
+      const roles = store.getters.roles
+      store.dispatch('GenerateRoutes', { roles }, { root: true }).then(() => {
+        router.addRoutes(store.getters.appRoutes)
+      })
+    },
+    handlePerm() {
+      roleHasPermissionToGrant({
+        app_id: 'cmdb',
+        resource_type_name: 'CIType',
+        perm: 'grant',
+        resource_name: this.$route.meta.name,
+      }).then((res) => {
+        if (res.result) {
+          searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
+            this.resource_type = { groups: res.groups, id2perms: res.id2perms }
+            this.$nextTick(() => {
+              this.$refs.cmdbGrant.open({
+                name: this.$route.meta.name,
+                cmdbGrantType: 'ci',
+                CITypeId: this.typeId,
+              })
+            })
+          })
+        } else {
+          this.$message.error(this.$t('noPermission'))
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import '../index.less';
+</style>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+.cmdb-ci {
+  margin-bottom: -24px;
+  .cmdb-ci-main {
+    background-color: #fff;
+    border-radius: 15px;
+    padding: 12px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/BatchUpdateRelation.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/BatchUpdateRelation.vue
index c066801..429feae 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/BatchUpdateRelation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/BatchUpdateRelation.vue
@@ -1,6 +1,6 @@
 <template>
   <a-drawer
-    title="批量添加关系"
+    :title="$t('cmdb.ci.batchAddRelation')"
     width="50%"
     @close="() => { visible = false; $emit('refresh', true) }"
     :visible="visible"
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 c9abc1f..87cce17 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
@@ -1,342 +1,344 @@
-<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" @updateCIByself="updateCIByself" />
-            </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 _ from 'lodash'
-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 cellValue1 = row['created_at']
-      const cellValue2 = row['username']
-      if (cellValue1 && cellValue2 && fields.includes(column.property)) {
-        const prevRow = visibleData[_rowIndex - 1]
-        let nextRow = visibleData[_rowIndex + 1]
-        if (prevRow && prevRow['created_at'] === cellValue1 && prevRow['username'] === cellValue2) {
-          return { rowspan: 0, colspan: 0 }
-        } else {
-          let countRowspan = 1
-          while (nextRow && nextRow['created_at'] === cellValue1 && nextRow['username'] === cellValue2) {
-            nextRow = visibleData[++countRowspan + _rowIndex]
-          }
-          if (countRowspan > 1) {
-            return { rowspan: countRowspan, colspan: 1 }
-          }
-        }
-      }
-    },
-    updateCIByself(params, editAttrName) {
-      const _ci = { ..._.cloneDeep(this.ci), ...params }
-      this.ci = _ci
-      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
-      // 修改的字段为树形视图订阅的字段 则全部reload
-      setTimeout(() => {
-        if (_find) {
-          this.reload()
-        } else {
-          this.handleSearch()
-        }
-      }, 500)
-    },
-  },
-}
-</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" />{{ $t('cmdb.attribute') }}</span>
+        <div :style="{ maxHeight: `${windowHeight - 44}px`, overflow: 'auto', padding: '24px' }" class="ci-detail-attr">
+          <el-descriptions
+            :title="group.name || $t('other')"
+            :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" @updateCIByself="updateCIByself" />
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_2">
+        <span slot="tab"><a-icon type="branches" />{{ $t('cmdb.relation') }}</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" />{{ $t('cmdb.ci.history') }}</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="$t('created_at')"></vxe-table-column>
+            <vxe-table-column
+              field="username"
+              :title="$t('user')"
+              :filters="[]"
+              :filter-method="filterUsernameMethod"
+            ></vxe-table-column>
+            <vxe-table-column
+              field="operate_type"
+              :filters="[
+                { value: 0, label: $t('new') },
+                { value: 1, label: $t('delete') },
+                { value: 3, label: $t('update') },
+              ]"
+              :filter-method="filterOperateMethod"
+              :title="$t('operation')"
+            >
+              <template #default="{ row }">
+                {{ operateTypeMap[row.operate_type] }}
+              </template>
+            </vxe-table-column>
+            <vxe-table-column
+              field="attr_alias"
+              :title="$t('cmdb.attribute')"
+              :filters="[]"
+              :filter-method="filterAttrMethod"
+            ></vxe-table-column>
+            <vxe-table-column field="old" :title="$t('cmdb.history.old')"></vxe-table-column>
+            <vxe-table-column field="new" :title="$t('cmdb.history.new')"></vxe-table-column>
+          </vxe-table>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="tab_4">
+        <span slot="tab"><ops-icon type="itsm_auto_trigger" />{{ $t('cmdb.history.triggerHistory') }}</span>
+        <div :style="{ padding: '24px', height: 'calc(100vh - 44px)' }">
+          <TriggerTable :ci_id="ci._id" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </CustomDrawer>
+</template>
+
+<script>
+import _ from 'lodash'
+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() {
+    return {
+      visible: false,
+      ci: {},
+      attributeGroups: [],
+      activeTabKey: 'tab_1',
+      rowSpanMap: {},
+      ciHistory: [],
+      ciId: null,
+      ci_types: [],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+
+    operateTypeMap() {
+      return {
+        0: this.$t('new'),
+        1: this.$t('delete'),
+        2: this.$t('update'),
+      }
+    },
+  },
+  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 cellValue1 = row['created_at']
+      const cellValue2 = row['username']
+      if (cellValue1 && cellValue2 && fields.includes(column.property)) {
+        const prevRow = visibleData[_rowIndex - 1]
+        let nextRow = visibleData[_rowIndex + 1]
+        if (prevRow && prevRow['created_at'] === cellValue1 && prevRow['username'] === cellValue2) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let countRowspan = 1
+          while (nextRow && nextRow['created_at'] === cellValue1 && nextRow['username'] === cellValue2) {
+            nextRow = visibleData[++countRowspan + _rowIndex]
+          }
+          if (countRowspan > 1) {
+            return { rowspan: countRowspan, colspan: 1 }
+          }
+        }
+      }
+    },
+    updateCIByself(params, editAttrName) {
+      const _ci = { ..._.cloneDeep(this.ci), ...params }
+      this.ci = _ci
+      const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
+      // 修改的字段为树形视图订阅的字段 则全部reload
+      setTimeout(() => {
+        if (_find) {
+          this.reload()
+        } else {
+          this.handleSearch()
+        }
+      }, 500)
+    },
+  },
+}
+</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/modules/CreateInstanceForm.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
index ffadaa2..49fe39b 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
@@ -1,386 +1,388 @@
-<template>
-  <CustomDrawer
-    :title="title + CIType.alias"
-    width="800"
-    @close="handleClose"
-    :maskClosable="false"
-    :visible="visible"
-    wrapClassName="create-instance-form"
-    :bodyStyle="{ paddingTop: 0 }"
-    :headerStyle="{ borderBottom: 'none' }"
-  >
-    <div class="custom-drawer-bottom-action">
-      <a-button @click="handleClose">取消</a-button>
-      <a-button type="primary" @click="createInstance">提交</a-button>
-    </div>
-    <template v-if="action === 'create'">
-      <template v-for="group in attributesByGroup">
-        <CreateInstanceFormByGroup
-          :ref="`createInstanceFormByGroup_${group.id}`"
-          :key="group.id || group.name"
-          :group="group"
-          @handleFocusInput="handleFocusInput"
-          :attributeList="attributeList"
-        />
-      </template>
-      <template v-if="parentsType && parentsType.length">
-        <a-divider style="font-size:14px;margin:14px 0;font-weight:700;">模型关系</a-divider>
-        <a-form>
-          <a-row :gutter="24" align="top" type="flex">
-            <a-col :span="12" v-for="item in parentsType" :key="item.id">
-              <a-form-item :label="item.alias || item.name" :colon="false">
-                <a-input-group compact style="width: 100%">
-                  <a-select v-model="parentsForm[item.name].attr">
-                    <a-select-option
-                      :title="attr.alias || attr.name"
-                      v-for="attr in item.attributes"
-                      :key="attr.name"
-                      :value="attr.name"
-                    >
-                      {{ attr.alias || attr.name }}
-                    </a-select-option>
-                  </a-select>
-                  <a-input placeholder="多个值使用,分割" v-model="parentsForm[item.name].value" style="width: 50%" />
-                </a-input-group>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </template>
-    </template>
-    <template v-if="action === 'update'">
-      <a-form :form="form">
-        <p>可根据需要修改字段，当值为<strong>空</strong>时，则该字段<strong>置空</strong></p>
-        <a-row :gutter="24" v-for="list in batchUpdateLists" :key="list.name">
-          <a-col :span="11">
-            <a-form-item>
-              <el-select showSearch size="small" filterable v-model="list.name" placeholder="请选择需要修改的字段">
-                <el-option
-                  v-for="attr in attributeList"
-                  :key="attr.name"
-                  :value="attr.name"
-                  :disabled="batchUpdateLists.findIndex((item) => item.name === attr.name) > -1"
-                  :label="attr.alias || attr.name"
-                >
-                </el-option>
-              </el-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="11">
-            <a-form-item>
-              <a-select
-                :style="{ width: '100%' }"
-                v-decorator="[list.name, { rules: [{ required: false }] }]"
-                placeholder="请选择"
-                v-if="getFieldType(list.name).split('%%')[0] === 'select'"
-                :mode="getFieldType(list.name).split('%%')[1] === 'multiple' ? 'multiple' : 'default'"
-                showSearch
-                allowClear
-              >
-                <a-select-option
-                  :value="choice[0]"
-                  :key="'New_' + choice + choice_idx"
-                  v-for="(choice, choice_idx) in getSelectFieldOptions(list.name)"
-                >
-                  <span :style="choice[1] ? choice[1].style || {} : {}">
-                    <ops-icon
-                      :style="{ color: choice[1].icon.color }"
-                      v-if="choice[1] && choice[1].icon && choice[1].icon.name"
-                      :type="choice[1].icon.name"
-                    />
-                    {{ choice[0] }}
-                  </span>
-                </a-select-option>
-              </a-select>
-              <a-input-number
-                v-decorator="[list.name, { rules: [{ required: false }] }]"
-                style="width: 100%"
-                v-if="getFieldType(list.name) === 'input_number'"
-              />
-              <a-date-picker
-                v-decorator="[list.name, { rules: [{ required: false }] }]"
-                style="width: 100%"
-                :format="getFieldType(list.name) == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-                v-if="getFieldType(list.name) === 'date' || getFieldType(list.name) === 'datetime'"
-                :showTime="getFieldType(list.name) === 'date' ? false : { format: 'HH:mm:ss' }"
-              />
-              <a-input
-                v-if="getFieldType(list.name) === 'input'"
-                @focus="(e) => handleFocusInput(e, list)"
-                v-decorator="[list.name, { rules: [{ required: false }] }]"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="2">
-            <a-form-item>
-              <a :style="{ color: 'red', marginTop: '2px' }" @click="handleDelete(list.name)">
-                <a-icon type="delete" />
-              </a>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-button type="primary" ghost icon="plus" @click="handleAdd">新增修改字段</a-button>
-      </a-form>
-    </template>
-    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
-  </CustomDrawer>
-</template>
-
-<script>
-import _ from 'lodash'
-import moment from 'moment'
-import { Select, Option } from 'element-ui'
-import { getCIType, getCITypeGroupById } from '@/modules/cmdb/api/CIType'
-import { addCI } from '@/modules/cmdb/api/ci'
-import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
-import { valueTypeMap } from '../../../utils/const'
-import CreateInstanceFormByGroup from './createInstanceFormByGroup.vue'
-import { getCITypeParent, getCanEditByParentIdChildId } from '@/modules/cmdb/api/CITypeRelation'
-
-export default {
-  name: 'CreateInstanceForm',
-  components: {
-    ElSelect: Select,
-    ElOption: Option,
-    JsonEditor,
-    CreateInstanceFormByGroup,
-  },
-  props: {
-    typeIdFromRelation: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      valueTypeMap,
-      action: '',
-      form: this.$form.createForm(this),
-      visible: false,
-      attributeList: [],
-
-      CIType: {},
-
-      batchUpdateLists: [],
-      editAttr: null,
-      attributesByGroup: [],
-      parentsType: [],
-      parentsForm: {},
-      canEdit: {},
-    }
-  },
-  computed: {
-    title() {
-      return this.action === 'create' ? '创建 ' : '批量修改 '
-    },
-    typeId() {
-      if (this.typeIdFromRelation) {
-        return this.typeIdFromRelation
-      }
-      return this.$router.currentRoute.meta.typeId
-    },
-  },
-  provide() {
-    return {
-      getFieldType: this.getFieldType,
-    }
-  },
-  inject: ['attrList'],
-  methods: {
-    moment,
-    async getCIType() {
-      await getCIType(this.typeId).then((res) => {
-        this.CIType = res.ci_types[0]
-      })
-    },
-    async getAttributeList() {
-      const _attrList = this.attrList()
-      this.attributeList = _attrList.sort((x, y) => y.is_required - x.is_required)
-      await getCITypeGroupById(this.typeId).then((res1) => {
-        const _attributesByGroup = res1.map((g) => {
-          g.attributes = g.attributes.filter((attr) => !attr.is_computed)
-          return g
-        })
-        const attrHasGroupIds = []
-        res1.forEach((g) => {
-          const id = g.attributes.map((attr) => attr.id)
-          attrHasGroupIds.push(...id)
-        })
-        const otherGroupAttr = this.attributeList.filter(
-          (attr) => !attrHasGroupIds.includes(attr.id) && !attr.is_computed
-        )
-        if (otherGroupAttr.length) {
-          _attributesByGroup.push({ id: -1, name: '其他', attributes: otherGroupAttr })
-        }
-        this.attributesByGroup = _attributesByGroup
-      })
-    },
-    createInstance() {
-      const _this = this
-      if (_this.action === 'update') {
-        this.form.validateFields((err, values) => {
-          if (err) {
-            return
-          }
-          Object.keys(values).forEach((k) => {
-            const _tempFind = this.attributeList.find((item) => item.name === k)
-            if (
-              _tempFind.value_type === '3' &&
-              values[k] &&
-              Object.prototype.toString.call(values[k]) === '[object Object]'
-            ) {
-              values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
-            }
-            if (
-              _tempFind.value_type === '4' &&
-              values[k] &&
-              Object.prototype.toString.call(values[k]) === '[object Object]'
-            ) {
-              values[k] = values[k].format('YYYY-MM-DD')
-            }
-            if (_tempFind.value_type === '6') {
-              values[k] = values[k] ? JSON.parse(values[k]) : undefined
-            }
-          })
-
-          _this.$emit('submit', values)
-        })
-      } else {
-        let values = {}
-        for (let i = 0; i < this.attributesByGroup.length; i++) {
-          const data = this.$refs[`createInstanceFormByGroup_${this.attributesByGroup[i].id}`][0].getData()
-          if (data === 'error') {
-            return
-          }
-          values = { ...values, ...data }
-        }
-
-        Object.keys(values).forEach((k) => {
-          const _tempFind = this.attributeList.find((item) => item.name === k)
-          if (
-            _tempFind.value_type === '3' &&
-            values[k] &&
-            Object.prototype.toString.call(values[k]) === '[object Object]'
-          ) {
-            values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
-          }
-          if (
-            _tempFind.value_type === '4' &&
-            values[k] &&
-            Object.prototype.toString.call(values[k]) === '[object Object]'
-          ) {
-            values[k] = values[k].format('YYYY-MM-DD')
-          }
-          if (_tempFind.value_type === '6') {
-            values[k] = values[k] ? JSON.parse(values[k]) : undefined
-          }
-        })
-        values.ci_type = _this.typeId
-        console.log(this.parentsForm)
-        Object.keys(this.parentsForm).forEach((type) => {
-          if (this.parentsForm[type].value) {
-            values[`$${type}.${this.parentsForm[type].attr}`] = this.parentsForm[type].value
-          }
-        })
-        addCI(values).then((res) => {
-          _this.$message.success('新增成功!')
-          _this.visible = false
-          _this.$emit('reload', { ci_id: res.ci_id })
-        })
-      }
-    },
-    handleClose() {
-      this.visible = false
-    },
-    handleOpen(visible, action) {
-      this.visible = visible
-      this.action = action
-      this.$nextTick(() => {
-        this.form.resetFields()
-        Promise.all([this.getCIType(), this.getAttributeList()]).then(() => {
-          this.batchUpdateLists = [{ name: this.attributeList[0].name }]
-        })
-        if (action === 'create') {
-          getCITypeParent(this.typeId).then(async (res) => {
-            for (let i = 0; i < res.parents.length; i++) {
-              await getCanEditByParentIdChildId(res.parents[i].id, this.typeId).then((p_res) => {
-                this.canEdit = {
-                  ..._.cloneDeep(this.canEdit),
-                  [res.parents[i].id]: p_res.result,
-                }
-              })
-            }
-            this.parentsType = res.parents.filter((parent) => this.canEdit[parent.id])
-            const _parentsForm = {}
-            res.parents.forEach((item) => {
-              const _find = item.attributes.find((attr) => attr.id === item.unique_id)
-              _parentsForm[item.name] = { attr: _find.name, value: '' }
-            })
-            this.parentsForm = _parentsForm
-          })
-        }
-      })
-    },
-    getFieldType(name) {
-      const _find = this.attributeList.find((item) => item.name === name)
-      if (_find) {
-        if (_find.is_choice) {
-          if (_find.is_list) {
-            return 'select%%multiple'
-          }
-          return 'select'
-        } else if (_find.value_type === '0' || _find.value_type === '1') {
-          return 'input_number'
-        } else if (_find.value_type === '4' || _find.value_type === '3') {
-          return valueTypeMap[_find.value_type]
-        } else {
-          return 'input'
-        }
-      }
-      return 'input'
-    },
-    getSelectFieldOptions(name) {
-      const _find = this.attributeList.find((item) => item.name === name)
-      if (_find) {
-        return _find.choice_value
-      }
-      return []
-    },
-    handleAdd() {
-      this.batchUpdateLists.push({ name: undefined })
-    },
-    handleDelete(name) {
-      const _idx = this.batchUpdateLists.findIndex((item) => item.name === name)
-      if (_idx > -1) {
-        this.batchUpdateLists.splice(_idx, 1)
-      }
-    },
-    handleFocusInput(e, attr) {
-      console.log(attr)
-      const _tempFind = this.attributeList.find((item) => item.name === attr.name)
-      if (_tempFind.value_type === '6') {
-        this.editAttr = attr
-        e.srcElement.blur()
-        const jsonData = this.form.getFieldValue(attr.name)
-        this.$refs.jsonEditor.open(null, null, jsonData ? JSON.parse(jsonData) : {})
-      } else {
-        this.editAttr = null
-      }
-    },
-    jsonEditorOk(jsonData) {
-      this.form.setFieldsValue({ [this.editAttr.name]: JSON.stringify(jsonData) })
-    },
-  },
-}
-</script>
-<style lang="less">
-.create-instance-form {
-  .ant-form-item {
-    margin-bottom: 5px;
-  }
-  .ant-drawer-body {
-    overflow-y: auto;
-    max-height: calc(100vh - 110px);
-  }
-}
-</style>
+<template>
+  <CustomDrawer
+    :title="title + CIType.alias"
+    width="800"
+    @close="handleClose"
+    :maskClosable="false"
+    :visible="visible"
+    wrapClassName="create-instance-form"
+    :bodyStyle="{ paddingTop: 0 }"
+    :headerStyle="{ borderBottom: 'none' }"
+  >
+    <div class="custom-drawer-bottom-action">
+      <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
+      <a-button type="primary" @click="createInstance">{{ $t('submit') }}</a-button>
+    </div>
+    <template v-if="action === 'create'">
+      <template v-for="group in attributesByGroup">
+        <CreateInstanceFormByGroup
+          :ref="`createInstanceFormByGroup_${group.id}`"
+          :key="group.id || group.name"
+          :group="group"
+          @handleFocusInput="handleFocusInput"
+          :attributeList="attributeList"
+        />
+      </template>
+      <template v-if="parentsType && parentsType.length">
+        <a-divider style="font-size:14px;margin:14px 0;font-weight:700;">{{ $t('cmdb.menu.citypeRelation') }}</a-divider>
+        <a-form>
+          <a-row :gutter="24" align="top" type="flex">
+            <a-col :span="12" v-for="item in parentsType" :key="item.id">
+              <a-form-item :label="item.alias || item.name" :colon="false">
+                <a-input-group compact style="width: 100%">
+                  <a-select v-model="parentsForm[item.name].attr">
+                    <a-select-option
+                      :title="attr.alias || attr.name"
+                      v-for="attr in item.attributes"
+                      :key="attr.name"
+                      :value="attr.name"
+                    >
+                      {{ attr.alias || attr.name }}
+                    </a-select-option>
+                  </a-select>
+                  <a-input :placeholder="$t('cmdb.ci.tips1')" v-model="parentsForm[item.name].value" style="width: 50%" />
+                </a-input-group>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </template>
+    <template v-if="action === 'update'">
+      <a-form :form="form">
+        <p>{{ $t('cmdb.ci.tips2') }}</p>
+        <a-row :gutter="24" v-for="list in batchUpdateLists" :key="list.name">
+          <a-col :span="11">
+            <a-form-item>
+              <el-select showSearch size="small" filterable v-model="list.name" :placeholder="$t('cmdb.ci.tips3')">
+                <el-option
+                  v-for="attr in attributeList"
+                  :key="attr.name"
+                  :value="attr.name"
+                  :disabled="batchUpdateLists.findIndex((item) => item.name === attr.name) > -1"
+                  :label="attr.alias || attr.name"
+                >
+                </el-option>
+              </el-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="11">
+            <a-form-item>
+              <a-select
+                :style="{ width: '100%' }"
+                v-decorator="[list.name, { rules: [{ required: false }] }]"
+                :placeholder="$t('placeholder2')"
+                v-if="getFieldType(list.name).split('%%')[0] === 'select'"
+                :mode="getFieldType(list.name).split('%%')[1] === 'multiple' ? 'multiple' : 'default'"
+                showSearch
+                allowClear
+              >
+                <a-select-option
+                  :value="choice[0]"
+                  :key="'New_' + choice + choice_idx"
+                  v-for="(choice, choice_idx) in getSelectFieldOptions(list.name)"
+                >
+                  <span :style="choice[1] ? choice[1].style || {} : {}">
+                    <ops-icon
+                      :style="{ color: choice[1].icon.color }"
+                      v-if="choice[1] && choice[1].icon && choice[1].icon.name"
+                      :type="choice[1].icon.name"
+                    />
+                    {{ choice[0] }}
+                  </span>
+                </a-select-option>
+              </a-select>
+              <a-input-number
+                v-decorator="[list.name, { rules: [{ required: false }] }]"
+                style="width: 100%"
+                v-if="getFieldType(list.name) === 'input_number'"
+              />
+              <a-date-picker
+                v-decorator="[list.name, { rules: [{ required: false }] }]"
+                style="width: 100%"
+                :format="getFieldType(list.name) == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                v-if="getFieldType(list.name) === 'date' || getFieldType(list.name) === 'datetime'"
+                :showTime="getFieldType(list.name) === 'date' ? false : { format: 'HH:mm:ss' }"
+              />
+              <a-input
+                v-if="getFieldType(list.name) === 'input'"
+                @focus="(e) => handleFocusInput(e, list)"
+                v-decorator="[list.name, { rules: [{ required: false }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="2">
+            <a-form-item>
+              <a :style="{ color: 'red', marginTop: '2px' }" @click="handleDelete(list.name)">
+                <a-icon type="delete" />
+              </a>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-button type="primary" ghost icon="plus" @click="handleAdd">{{ $t('cmdb.ci.newUpdateField') }}</a-button>
+      </a-form>
+    </template>
+    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
+  </CustomDrawer>
+</template>
+
+<script>
+import _ from 'lodash'
+import moment from 'moment'
+import { Select, Option } from 'element-ui'
+import { getCIType, getCITypeGroupById } from '@/modules/cmdb/api/CIType'
+import { addCI } from '@/modules/cmdb/api/ci'
+import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
+import { valueTypeMap } from '../../../utils/const'
+import CreateInstanceFormByGroup from './createInstanceFormByGroup.vue'
+import { getCITypeParent, getCanEditByParentIdChildId } from '@/modules/cmdb/api/CITypeRelation'
+
+export default {
+  name: 'CreateInstanceForm',
+  components: {
+    ElSelect: Select,
+    ElOption: Option,
+    JsonEditor,
+    CreateInstanceFormByGroup,
+  },
+  props: {
+    typeIdFromRelation: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      action: '',
+      form: this.$form.createForm(this),
+      visible: false,
+      attributeList: [],
+
+      CIType: {},
+
+      batchUpdateLists: [],
+      editAttr: null,
+      attributesByGroup: [],
+      parentsType: [],
+      parentsForm: {},
+      canEdit: {},
+    }
+  },
+  computed: {
+    title() {
+      return this.action === 'create' ? this.$t('create') + ' ' : this.$t('cmdb.ci.batchUpdate') + ' '
+    },
+    typeId() {
+      if (this.typeIdFromRelation) {
+        return this.typeIdFromRelation
+      }
+      return this.$router.currentRoute.meta.typeId
+    },
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+  },
+  provide() {
+    return {
+      getFieldType: this.getFieldType,
+    }
+  },
+  inject: ['attrList'],
+  methods: {
+    moment,
+    async getCIType() {
+      await getCIType(this.typeId).then((res) => {
+        this.CIType = res.ci_types[0]
+      })
+    },
+    async getAttributeList() {
+      const _attrList = this.attrList()
+      this.attributeList = _attrList.sort((x, y) => y.is_required - x.is_required)
+      await getCITypeGroupById(this.typeId).then((res1) => {
+        const _attributesByGroup = res1.map((g) => {
+          g.attributes = g.attributes.filter((attr) => !attr.is_computed)
+          return g
+        })
+        const attrHasGroupIds = []
+        res1.forEach((g) => {
+          const id = g.attributes.map((attr) => attr.id)
+          attrHasGroupIds.push(...id)
+        })
+        const otherGroupAttr = this.attributeList.filter(
+          (attr) => !attrHasGroupIds.includes(attr.id) && !attr.is_computed
+        )
+        if (otherGroupAttr.length) {
+          _attributesByGroup.push({ id: -1, name: this.$t('other'), attributes: otherGroupAttr })
+        }
+        this.attributesByGroup = _attributesByGroup
+      })
+    },
+    createInstance() {
+      const _this = this
+      if (_this.action === 'update') {
+        this.form.validateFields((err, values) => {
+          if (err) {
+            return
+          }
+          Object.keys(values).forEach((k) => {
+            const _tempFind = this.attributeList.find((item) => item.name === k)
+            if (
+              _tempFind.value_type === '3' &&
+              values[k] &&
+              Object.prototype.toString.call(values[k]) === '[object Object]'
+            ) {
+              values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
+            }
+            if (
+              _tempFind.value_type === '4' &&
+              values[k] &&
+              Object.prototype.toString.call(values[k]) === '[object Object]'
+            ) {
+              values[k] = values[k].format('YYYY-MM-DD')
+            }
+            if (_tempFind.value_type === '6') {
+              values[k] = values[k] ? JSON.parse(values[k]) : undefined
+            }
+          })
+
+          _this.$emit('submit', values)
+        })
+      } else {
+        let values = {}
+        for (let i = 0; i < this.attributesByGroup.length; i++) {
+          const data = this.$refs[`createInstanceFormByGroup_${this.attributesByGroup[i].id}`][0].getData()
+          if (data === 'error') {
+            return
+          }
+          values = { ...values, ...data }
+        }
+
+        Object.keys(values).forEach((k) => {
+          const _tempFind = this.attributeList.find((item) => item.name === k)
+          if (
+            _tempFind.value_type === '3' &&
+            values[k] &&
+            Object.prototype.toString.call(values[k]) === '[object Object]'
+          ) {
+            values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
+          }
+          if (
+            _tempFind.value_type === '4' &&
+            values[k] &&
+            Object.prototype.toString.call(values[k]) === '[object Object]'
+          ) {
+            values[k] = values[k].format('YYYY-MM-DD')
+          }
+          if (_tempFind.value_type === '6') {
+            values[k] = values[k] ? JSON.parse(values[k]) : undefined
+          }
+        })
+        values.ci_type = _this.typeId
+        console.log(this.parentsForm)
+        Object.keys(this.parentsForm).forEach((type) => {
+          if (this.parentsForm[type].value) {
+            values[`$${type}.${this.parentsForm[type].attr}`] = this.parentsForm[type].value
+          }
+        })
+        addCI(values).then((res) => {
+          _this.$message.success(this.$t('addSuccess'))
+          _this.visible = false
+          _this.$emit('reload', { ci_id: res.ci_id })
+        })
+      }
+    },
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(visible, action) {
+      this.visible = visible
+      this.action = action
+      this.$nextTick(() => {
+        this.form.resetFields()
+        Promise.all([this.getCIType(), this.getAttributeList()]).then(() => {
+          this.batchUpdateLists = [{ name: this.attributeList[0].name }]
+        })
+        if (action === 'create') {
+          getCITypeParent(this.typeId).then(async (res) => {
+            for (let i = 0; i < res.parents.length; i++) {
+              await getCanEditByParentIdChildId(res.parents[i].id, this.typeId).then((p_res) => {
+                this.canEdit = {
+                  ..._.cloneDeep(this.canEdit),
+                  [res.parents[i].id]: p_res.result,
+                }
+              })
+            }
+            this.parentsType = res.parents.filter((parent) => this.canEdit[parent.id])
+            const _parentsForm = {}
+            res.parents.forEach((item) => {
+              const _find = item.attributes.find((attr) => attr.id === item.unique_id)
+              _parentsForm[item.name] = { attr: _find.name, value: '' }
+            })
+            this.parentsForm = _parentsForm
+          })
+        }
+      })
+    },
+    getFieldType(name) {
+      const _find = this.attributeList.find((item) => item.name === name)
+      if (_find) {
+        if (_find.is_choice) {
+          if (_find.is_list) {
+            return 'select%%multiple'
+          }
+          return 'select'
+        } else if (_find.value_type === '0' || _find.value_type === '1') {
+          return 'input_number'
+        } else if (_find.value_type === '4' || _find.value_type === '3') {
+          return this.valueTypeMap[_find.value_type]
+        } else {
+          return 'input'
+        }
+      }
+      return 'input'
+    },
+    getSelectFieldOptions(name) {
+      const _find = this.attributeList.find((item) => item.name === name)
+      if (_find) {
+        return _find.choice_value
+      }
+      return []
+    },
+    handleAdd() {
+      this.batchUpdateLists.push({ name: undefined })
+    },
+    handleDelete(name) {
+      const _idx = this.batchUpdateLists.findIndex((item) => item.name === name)
+      if (_idx > -1) {
+        this.batchUpdateLists.splice(_idx, 1)
+      }
+    },
+    handleFocusInput(e, attr) {
+      console.log(attr)
+      const _tempFind = this.attributeList.find((item) => item.name === attr.name)
+      if (_tempFind.value_type === '6') {
+        this.editAttr = attr
+        e.srcElement.blur()
+        const jsonData = this.form.getFieldValue(attr.name)
+        this.$refs.jsonEditor.open(null, null, jsonData ? JSON.parse(jsonData) : {})
+      } else {
+        this.editAttr = null
+      }
+    },
+    jsonEditorOk(jsonData) {
+      this.form.setFieldsValue({ [this.editAttr.name]: JSON.stringify(jsonData) })
+    },
+  },
+}
+</script>
+<style lang="less">
+.create-instance-form {
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
+  .ant-drawer-body {
+    overflow-y: auto;
+    max-height: calc(100vh - 110px);
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
index 4597ac1..42cbdc8 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
@@ -1,225 +1,228 @@
-<template>
-  <CustomDrawer
-    :visible="visible"
-    :hasFooter="false"
-    @close="
-      () => {
-        visible = false
-      }
-    "
-    title="属性说明"
-    width="72%"
-    :bodyStyle="{ height: '100vh' }"
-  >
-    <vxe-toolbar>
-      <template #buttons>
-        <a-input
-          v-model="searchKey"
-          :style="{ display: 'inline-block', width: '244px' }"
-          class="ops-input ops-input-radius"
-          type="search"
-          placeholder="搜索 名称 | 别名"
-          @keyup="searchAttributes"
-        >
-          <a-icon type="search" slot="suffix" />
-        </a-input>
-      </template>
-    </vxe-toolbar>
-
-    <a-spin :spinning="loading">
-      <vxe-table
-        resizable
-        border
-        size="mini"
-        :height="windowHeight - 160"
-        :data="list"
-        :scroll-x="{ enabled: true, gt: 0 }"
-        show-overflow
-        show-header-overflow
-        align="center"
-        highlight-hover-row
-        class="ops-stripe-table"
-      >
-        <vxe-column
-          v-for="(column, index) in columns"
-          :field="column.field"
-          :title="column.title"
-          :min-width="column.width"
-          :align="column.align"
-          :key="column.field"
-          :fixed="index < 3 ? 'left' : ''"
-          :sortable="index < 3 ? true : false"
-          :title-help="column.help !== null ? { message: column.help } : null"
-          :filters="
-            index < 2
-              ? null
-              : index === 2
-                ? valueTypeFilters
-                : [
-                  { label: '是', value: true },
-                  { label: '否', value: false },
-                ]
-          "
-          type="html"
-        >
-          <template #default="{ row }">
-            <span v-if="column.field !== 'name' && column.field !== 'alias' && column.field !== 'value_type'">
-              <a-icon :style="{ color: '#1fb51f' }" type="check" v-if="row[column.field]" />
-            </span>
-            <span v-else-if="column.field === 'value_type'" v-html="valueTypeMap[row.value_type]"> </span>
-            <span v-else v-html="row[column.field]"> </span>
-          </template>
-        </vxe-column>
-      </vxe-table>
-    </a-spin>
-  </CustomDrawer>
-</template>
-
-<script>
-import XEUtils from 'xe-utils'
-import { getCITypeAttributesByName } from '@/modules/cmdb/api/CITypeAttr'
-import { valueTypeMap } from '@/modules/cmdb/utils/const'
-export default {
-  name: 'MetadataDrawer',
-  data() {
-    const columns = [
-      {
-        field: 'name',
-        title: '名称',
-        width: 150,
-        align: 'left',
-        help: null,
-      },
-      {
-        field: 'alias',
-        title: '别名',
-        width: 150,
-        align: 'left',
-        help: null,
-      },
-      {
-        field: 'value_type',
-        title: '类型',
-        width: 100,
-        align: 'left',
-        help: null,
-      },
-      {
-        field: 'is_index',
-        title: '是否索引',
-        width: 110,
-        help: '加快检索, 可以全文搜索, 无需使用条件过滤\n\n json目前不支持建索引 \n\n文本字符长度超过190不能建索引',
-      },
-      {
-        field: 'default_show',
-        title: '默认显示',
-        width: 110,
-        help: '订阅CI，默认显示在table里的属性',
-      },
-      {
-        field: 'is_unique',
-        title: '是否唯一',
-        width: 110,
-        help: null,
-      },
-      {
-        field: 'is_choice',
-        title: '是否选择',
-        width: 110,
-        help: '表现形式是下拉框, 值必须在预定义值里',
-      },
-      {
-        field: 'is_list',
-        title: '是否列表',
-        width: 110,
-        help: '多值, 比如内网IP',
-      },
-      {
-        field: 'is_sortable',
-        title: '可排序',
-        width: 100,
-        help: '仅针对前端',
-      },
-      {
-        field: 'is_computed',
-        title: '计算属性',
-        width: 110,
-        help: '模型的其他属性通过表达式的方式计算出来\n\n一个代码片段计算返回的值',
-      },
-    ]
-    return {
-      columns,
-      visible: false,
-      list: [],
-      tableData: [],
-      loading: false,
-      valueTypeMap,
-      valueTypeFilters: [],
-      searchKey: '',
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  created: function() {
-    this.valueTypeFilters = Object.keys(this.valueTypeMap).map((key) => {
-      return { label: this.valueTypeMap[key], value: key }
-    })
-  },
-  methods: {
-    open(typeId) {
-      this.visible = true
-      this.typeId = typeId
-      this.getAttrs()
-    },
-    async getAttrs() {
-      this.loading = true
-      const { attributes = [] } = await getCITypeAttributesByName(this.typeId)
-      this.tableData = attributes.map((attr) => {
-        if (attr.is_password) {
-          attr.value_type = '7'
-        }
-        if (attr.is_link) {
-          attr.value_type = '8'
-        }
-        return attr
-      })
-      this.loading = false
-      this.searchAttributes()
-    },
-    searchAttributes() {
-      const filterName = XEUtils.toValueString(this.searchKey)
-        .trim()
-        .toLowerCase()
-      if (filterName) {
-        const filterRE = new RegExp(filterName, 'gi')
-        const searchProps = ['name', 'alias', 'value_type']
-        const rest = this.tableData.filter((item) =>
-          searchProps.some(
-            (key) =>
-              XEUtils.toValueString(item[key])
-                .toLowerCase()
-                .indexOf(filterName) > -1
-          )
-        )
-        this.list = rest.map((row) => {
-          const item = Object.assign({}, row)
-          searchProps.forEach((key) => {
-            item[key] = XEUtils.toValueString(item[key]).replace(
-              filterRE,
-              (match) => `<span style='background: yellow'>${match}</span>`
-            )
-          })
-          return item
-        })
-      } else {
-        this.list = this.tableData
-      }
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <CustomDrawer
+    :visible="visible"
+    :hasFooter="false"
+    @close="
+      () => {
+        visible = false
+      }
+    "
+    :title="$t('cmdb.ci.attributeDesc')"
+    width="72%"
+    :bodyStyle="{ height: '100vh' }"
+  >
+    <vxe-toolbar>
+      <template #buttons>
+        <a-input
+          v-model="searchKey"
+          :style="{ display: 'inline-block', width: '244px' }"
+          class="ops-input ops-input-radius"
+          type="search"
+          :placeholder="$t('cmdb.ci.tips5')"
+          @keyup="searchAttributes"
+        >
+          <a-icon type="search" slot="suffix" />
+        </a-input>
+      </template>
+    </vxe-toolbar>
+
+    <a-spin :spinning="loading">
+      <vxe-table
+        resizable
+        border
+        size="mini"
+        :height="windowHeight - 160"
+        :data="list"
+        :scroll-x="{ enabled: true, gt: 0 }"
+        show-overflow
+        show-header-overflow
+        align="center"
+        highlight-hover-row
+        class="ops-stripe-table"
+      >
+        <vxe-column
+          v-for="(column, index) in columns"
+          :field="column.field"
+          :title="column.title"
+          :min-width="column.width"
+          :align="column.align"
+          :key="column.field"
+          :fixed="index < 3 ? 'left' : ''"
+          :sortable="index < 3 ? true : false"
+          :title-help="column.help !== null ? { message: column.help } : null"
+          :filters="
+            index < 2
+              ? null
+              : index === 2
+                ? valueTypeFilters
+                : [
+                  { label: $t('yes'), value: true },
+                  { label: $t('no'), value: false },
+                ]
+          "
+          type="html"
+        >
+          <template #default="{ row }">
+            <span v-if="column.field !== 'name' && column.field !== 'alias' && column.field !== 'value_type'">
+              <a-icon :style="{ color: '#1fb51f' }" type="check" v-if="row[column.field]" />
+            </span>
+            <span v-else-if="column.field === 'value_type'" v-html="valueTypeMap[row.value_type]"> </span>
+            <span v-else v-html="row[column.field]"> </span>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </a-spin>
+  </CustomDrawer>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import { getCITypeAttributesByName } from '@/modules/cmdb/api/CITypeAttr'
+import { valueTypeMap } from '@/modules/cmdb/utils/const'
+export default {
+  name: 'MetadataDrawer',
+  data() {
+    return {
+      visible: false,
+      list: [],
+      tableData: [],
+      loading: false,
+      valueTypeFilters: [],
+      searchKey: '',
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+    columns() {
+      return [
+        {
+          field: 'name',
+          title: this.$t('name'),
+          width: 150,
+          align: 'left',
+          help: null,
+        },
+        {
+          field: 'alias',
+          title: this.$t('alias'),
+          width: 150,
+          align: 'left',
+          help: null,
+        },
+        {
+          field: 'value_type',
+          title: this.$t('type'),
+          width: 100,
+          align: 'left',
+          help: null,
+        },
+        {
+          field: 'is_index',
+          title: this.$t('cmdb.ciType.isIndex'),
+          width: 110,
+          help: this.$t('cmdb.ci.tips6'),
+        },
+        {
+          field: 'default_show',
+          title: this.$t('cmdb.ciType.defaultShow'),
+          width: 110,
+          help: this.$t('cmdb.ciType.defaultShowTips'),
+        },
+        {
+          field: 'is_unique',
+          title: this.$t('cmdb.ciType.isUnique'),
+          width: 110,
+          help: null,
+        },
+        {
+          field: 'is_choice',
+          title: this.$t('cmdb.ciType.isChoice'),
+          width: 110,
+          help: this.$t('cmdb.ci.tips7'),
+        },
+        {
+          field: 'is_list',
+          title: this.$t('cmdb.ciType.list'),
+          width: 110,
+          help: this.$t('cmdb.ci.tips8'),
+        },
+        {
+          field: 'is_sortable',
+          title: this.$t('cmdb.ciType.isSortable'),
+          width: 100,
+          help: this.$t('cmdb.ci.tips9'),
+        },
+        {
+          field: 'is_computed',
+          title: this.$t('cmdb.ciType.computedAttribute'),
+          width: 110,
+          help: this.$t('cmdb.ci.tips10'),
+        },
+      ]
+    },
+  },
+  created: function() {
+    this.valueTypeFilters = Object.keys(this.valueTypeMap).map((key) => {
+      return { label: this.valueTypeMap[key], value: key }
+    })
+  },
+  methods: {
+    open(typeId) {
+      this.visible = true
+      this.typeId = typeId
+      this.getAttrs()
+    },
+    async getAttrs() {
+      this.loading = true
+      const { attributes = [] } = await getCITypeAttributesByName(this.typeId)
+      this.tableData = attributes.map((attr) => {
+        if (attr.is_password) {
+          attr.value_type = '7'
+        }
+        if (attr.is_link) {
+          attr.value_type = '8'
+        }
+        return attr
+      })
+      this.loading = false
+      this.searchAttributes()
+    },
+    searchAttributes() {
+      const filterName = XEUtils.toValueString(this.searchKey)
+        .trim()
+        .toLowerCase()
+      if (filterName) {
+        const filterRE = new RegExp(filterName, 'gi')
+        const searchProps = ['name', 'alias', 'value_type']
+        const rest = this.tableData.filter((item) =>
+          searchProps.some(
+            (key) =>
+              XEUtils.toValueString(item[key])
+                .toLowerCase()
+                .indexOf(filterName) > -1
+          )
+        )
+        this.list = rest.map((row) => {
+          const item = Object.assign({}, row)
+          searchProps.forEach((key) => {
+            item[key] = XEUtils.toValueString(item[key]).replace(
+              filterRE,
+              (match) => `<span style='background: yellow'>${match}</span>`
+            )
+          })
+          return item
+        })
+      } else {
+        this.list = this.tableData
+      }
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue
index 8b0e905..55ad9f4 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue
@@ -1,318 +1,318 @@
-<template>
-  <span :id="`ci-detail-attr-${attr.name}`">
-    <span v-if="!isEdit || attr.value_type === '6'">
-      <PasswordField
-        :style="{ display: 'inline-block' }"
-        v-if="attr.is_password && ci[attr.name]"
-        :ci_id="ci._id"
-        :attr_id="attr.id"
-      ></PasswordField>
-      <template v-else-if="attr.value_type === '6'">{{ JSON.stringify(ci[attr.name] || {}) }}</template>
-      <template v-else-if="attr.is_choice">
-        <template v-if="attr.is_list">
-          <span
-            v-for="value in ci[attr.name]"
-            :key="value"
-            :style="{
-              borderRadius: '4px',
-              padding: '1px 5px',
-              margin: '2px',
-              ...getChoiceValueStyle(attr, value),
-              display: 'inline-flex',
-              alignItems: 'center',
-            }"
-          >
-            <img
-              v-if="getChoiceValueIcon(attr, value).id && getChoiceValueIcon(attr, value).url"
-              :src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, value).url}`"
-              :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-            />
-            <ops-icon
-              v-else
-              :style="{ color: getChoiceValueIcon(attr, value).color, marginRight: '5px' }"
-              :type="getChoiceValueIcon(attr, value).name"
-            />
-            {{ value }}</span
-          >
-        </template>
-        <span
-          v-else
-          :style="{
-            borderRadius: '4px',
-            padding: '1px 5px',
-            margin: '2px 0',
-            ...getChoiceValueStyle(attr, ci[attr.name]),
-            display: 'inline-flex',
-            alignItems: 'center',
-          }"
-        >
-          <img
-            v-if="getChoiceValueIcon(attr, ci[attr.name]).id && getChoiceValueIcon(attr, ci[attr.name]).url"
-            :src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, ci[attr.name]).url}`"
-            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-          />
-          <ops-icon
-            v-else
-            :style="{ color: getChoiceValueIcon(attr, ci[attr.name]).color, marginRight: '5px' }"
-            :type="getChoiceValueIcon(attr, ci[attr.name]).name"
-          />
-          {{ ci[attr.name] }}
-        </span>
-      </template>
-      <template v-else-if="attr.is_list">
-        <span> {{ ci[attr.name].join(',') }}</span>
-      </template>
-      <template v-else>{{ getName(ci[attr.name]) }}</template>
-    </span>
-    <template v-else>
-      <a-form :form="form">
-        <a-form-item label="" :colon="false">
-          <a-select
-            :style="{ width: '100%' }"
-            v-decorator="[
-              attr.name,
-              {
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            placeholder="请选择"
-            v-if="attr.is_choice"
-            :mode="attr.is_list ? 'multiple' : 'default'"
-            showSearch
-            allowClear
-            size="small"
-            :getPopupContainer="(trigger) => trigger.parentElement"
-          >
-            <a-select-option
-              :value="choice[0]"
-              :key="'New_' + attr.name + choice_idx"
-              v-for="(choice, choice_idx) in attr.choice_value"
-            >
-              <span :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }">
-                <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
-                  <img
-                    v-if="choice[1].icon.id && choice[1].icon.url"
-                    :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
-                    :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                  />
-                  <ops-icon
-                    v-else
-                    :style="{ color: choice[1].icon.color, marginRight: '5px' }"
-                    :type="choice[1].icon.name"
-                  />
-                </template>
-                {{ choice[0] }}
-              </span>
-            </a-select-option>
-          </a-select>
-          <a-select
-            :style="{ width: '100%' }"
-            v-decorator="[
-              attr.name,
-              {
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            placeholder="请选择"
-            v-else-if="attr.is_list"
-            mode="tags"
-            showSearch
-            allowClear
-            size="small"
-            :getPopupContainer="(trigger) => trigger.parentElement"
-          >
-          </a-select>
-          <a-input-number
-            size="small"
-            v-decorator="[
-              attr.name,
-              {
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            style="width: 100%"
-            v-else-if="attr.value_type === '0' || attr.value_type === '1'"
-          />
-          <a-date-picker
-            size="small"
-            v-decorator="[
-              attr.name,
-              {
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            style="width: 100%"
-            :format="attr.value_type === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-            :valueFormat="attr.value_type === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-            v-else-if="attr.value_type === '4' || attr.value_type === '3'"
-            :showTime="attr.value_type === '4' ? false : { format: 'HH:mm:ss' }"
-          />
-          <!-- <a-input
-            size="small"
-            @focus="(e) => handleFocusInput(e, attr)"
-            v-decorator="[
-              attr.name,
-              {
-                validateTrigger: ['submit'],
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            style="width: 100%"
-            v-else-if="attr.value_type === '6'"
-          /> -->
-          <a-input
-            size="small"
-            v-decorator="[
-              attr.name,
-              {
-                validateTrigger: ['submit'],
-                rules: [{ required: attr.is_required }],
-              },
-            ]"
-            style="width: 100%"
-            v-else
-          />
-        </a-form-item>
-      </a-form>
-    </template>
-    <a v-if="!isEdit && !attr.is_computed" @click="handleEdit" :style="{ opacity: 0 }"><a-icon type="edit"/></a>
-    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
-  </span>
-</template>
-
-<script>
-import _ from 'lodash'
-import moment from 'moment'
-import { updateCI } from '@/modules/cmdb/api/ci'
-import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
-import PasswordField from '../../../components/passwordField/index.vue'
-import { getAttrPassword } from '../../../api/CITypeAttr'
-
-export default {
-  name: 'CiDetailAttrContent',
-  components: { JsonEditor, PasswordField },
-  props: {
-    ci: {
-      type: Object,
-      default: () => {},
-    },
-    attr: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      isEdit: false,
-      form: this.$form.createForm(this, this.attr.name),
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.eventListener)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.eventListener)
-  },
-  methods: {
-    moment,
-    eventListener(e) {
-      const datePickerContainer = document.getElementsByClassName('ant-calendar-picker-container')
-      if (this.isEdit && !datePickerContainer.length) {
-        const dom = document.getElementById(`ci-detail-attr-${this.attr.name}`)
-        e.stopPropagation()
-        e.preventDefault()
-        if (dom) {
-          const isSelf = dom.contains(e.target)
-          if (!isSelf) {
-            this.handleCloseEdit()
-          }
-        }
-      }
-    },
-    handleEdit(e) {
-      e.stopPropagation()
-      e.preventDefault()
-      if (this.attr.value_type === '6') {
-        const jsonData = this.ci[this.attr.name]
-        this.$refs.jsonEditor.open(null, null, jsonData || {})
-        return
-      }
-      this.isEdit = true
-      this.$nextTick(async () => {
-        if (this.attr.is_list && !this.attr.is_choice) {
-          this.form.setFieldsValue({
-            [`${this.attr.name}`]: this.ci[this.attr.name] || null,
-          })
-          return
-        }
-        if (this.attr.is_password) {
-          await getAttrPassword(this.ci._id, this.attr.id).then((res) => {
-            this.form.setFieldsValue({
-              [`${this.attr.name}`]: res.value ?? null,
-            })
-          })
-          return
-        }
-        this.form.setFieldsValue({
-          [`${this.attr.name}`]: this.ci[this.attr.name] ?? null,
-        })
-      })
-    },
-    async handleCloseEdit() {
-      const newData = this.form.getFieldValue(this.attr.name)
-      if (!_.isEqual(this.ci[this.attr.name], newData)) {
-        await updateCI(this.ci._id, { [`${this.attr.name}`]: newData })
-          .then(() => {
-            this.$message.success('更新成功！')
-            this.$emit('updateCIByself', { [`${this.attr.name}`]: newData }, this.attr.name)
-          })
-          .catch(() => {
-            this.$emit('refresh', this.attr.name)
-          })
-      }
-      this.isEdit = false
-    },
-    // handleFocusInput(e, attr) {
-    //   console.log('focus')
-    //   if (this.attr.value_type === '6') {
-    //     e.preventDefault()
-    //     e.stopPropagation()
-    //     // e.srcElement.blur()
-    //     const jsonData = this.form.getFieldValue(attr.name)
-    //     this.$refs.jsonEditor.open(null, null, jsonData ? JSON.parse(jsonData) : {})
-    //   }
-    // },
-    jsonEditorOk(jsonData) {
-      if (!_.isEqual(this.ci[this.attr.name], jsonData)) {
-        updateCI(this.ci._id, { [`${this.attr.name}`]: jsonData })
-          .then(() => {
-            this.$message.success('更新成功！')
-            this.$emit('updateCIByself', { [`${this.attr.name}`]: jsonData }, this.attr.name)
-          })
-          .catch(() => {
-            this.$emit('refresh', this.attr.name)
-          })
-      }
-    },
-    getChoiceValueStyle(col, colValue) {
-      const _find = col.choice_value.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.style || {}
-      }
-      return {}
-    },
-    getChoiceValueIcon(col, colValue) {
-      const _find = col.choice_value.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.icon || {}
-      }
-      return {}
-    },
-    getName(name) {
-      return name ?? ''
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <span :id="`ci-detail-attr-${attr.name}`">
+    <span v-if="!isEdit || attr.value_type === '6'">
+      <PasswordField
+        :style="{ display: 'inline-block' }"
+        v-if="attr.is_password && ci[attr.name]"
+        :ci_id="ci._id"
+        :attr_id="attr.id"
+      ></PasswordField>
+      <template v-else-if="attr.value_type === '6'">{{ JSON.stringify(ci[attr.name] || {}) }}</template>
+      <template v-else-if="attr.is_choice">
+        <template v-if="attr.is_list">
+          <span
+            v-for="value in ci[attr.name]"
+            :key="value"
+            :style="{
+              borderRadius: '4px',
+              padding: '1px 5px',
+              margin: '2px',
+              ...getChoiceValueStyle(attr, value),
+              display: 'inline-flex',
+              alignItems: 'center',
+            }"
+          >
+            <img
+              v-if="getChoiceValueIcon(attr, value).id && getChoiceValueIcon(attr, value).url"
+              :src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, value).url}`"
+              :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+            />
+            <ops-icon
+              v-else
+              :style="{ color: getChoiceValueIcon(attr, value).color, marginRight: '5px' }"
+              :type="getChoiceValueIcon(attr, value).name"
+            />
+            {{ value }}</span
+          >
+        </template>
+        <span
+          v-else
+          :style="{
+            borderRadius: '4px',
+            padding: '1px 5px',
+            margin: '2px 0',
+            ...getChoiceValueStyle(attr, ci[attr.name]),
+            display: 'inline-flex',
+            alignItems: 'center',
+          }"
+        >
+          <img
+            v-if="getChoiceValueIcon(attr, ci[attr.name]).id && getChoiceValueIcon(attr, ci[attr.name]).url"
+            :src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, ci[attr.name]).url}`"
+            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+          />
+          <ops-icon
+            v-else
+            :style="{ color: getChoiceValueIcon(attr, ci[attr.name]).color, marginRight: '5px' }"
+            :type="getChoiceValueIcon(attr, ci[attr.name]).name"
+          />
+          {{ ci[attr.name] }}
+        </span>
+      </template>
+      <template v-else-if="attr.is_list">
+        <span> {{ ci[attr.name].join(',') }}</span>
+      </template>
+      <template v-else>{{ getName(ci[attr.name]) }}</template>
+    </span>
+    <template v-else>
+      <a-form :form="form">
+        <a-form-item label="" :colon="false">
+          <a-select
+            :style="{ width: '100%' }"
+            v-decorator="[
+              attr.name,
+              {
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            :placeholder="$t('placeholder2')"
+            v-if="attr.is_choice"
+            :mode="attr.is_list ? 'multiple' : 'default'"
+            showSearch
+            allowClear
+            size="small"
+            :getPopupContainer="(trigger) => trigger.parentElement"
+          >
+            <a-select-option
+              :value="choice[0]"
+              :key="'New_' + attr.name + choice_idx"
+              v-for="(choice, choice_idx) in attr.choice_value"
+            >
+              <span :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }">
+                <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
+                  <img
+                    v-if="choice[1].icon.id && choice[1].icon.url"
+                    :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
+                    :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                  />
+                  <ops-icon
+                    v-else
+                    :style="{ color: choice[1].icon.color, marginRight: '5px' }"
+                    :type="choice[1].icon.name"
+                  />
+                </template>
+                {{ choice[0] }}
+              </span>
+            </a-select-option>
+          </a-select>
+          <a-select
+            :style="{ width: '100%' }"
+            v-decorator="[
+              attr.name,
+              {
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            :placeholder="$t('placeholder2')"
+            v-else-if="attr.is_list"
+            mode="tags"
+            showSearch
+            allowClear
+            size="small"
+            :getPopupContainer="(trigger) => trigger.parentElement"
+          >
+          </a-select>
+          <a-input-number
+            size="small"
+            v-decorator="[
+              attr.name,
+              {
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            style="width: 100%"
+            v-else-if="attr.value_type === '0' || attr.value_type === '1'"
+          />
+          <a-date-picker
+            size="small"
+            v-decorator="[
+              attr.name,
+              {
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            style="width: 100%"
+            :format="attr.value_type === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+            :valueFormat="attr.value_type === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+            v-else-if="attr.value_type === '4' || attr.value_type === '3'"
+            :showTime="attr.value_type === '4' ? false : { format: 'HH:mm:ss' }"
+          />
+          <!-- <a-input
+            size="small"
+            @focus="(e) => handleFocusInput(e, attr)"
+            v-decorator="[
+              attr.name,
+              {
+                validateTrigger: ['submit'],
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            style="width: 100%"
+            v-else-if="attr.value_type === '6'"
+          /> -->
+          <a-input
+            size="small"
+            v-decorator="[
+              attr.name,
+              {
+                validateTrigger: ['submit'],
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            style="width: 100%"
+            v-else
+          />
+        </a-form-item>
+      </a-form>
+    </template>
+    <a v-if="!isEdit && !attr.is_computed" @click="handleEdit" :style="{ opacity: 0 }"><a-icon type="edit"/></a>
+    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
+  </span>
+</template>
+
+<script>
+import _ from 'lodash'
+import moment from 'moment'
+import { updateCI } from '@/modules/cmdb/api/ci'
+import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
+import PasswordField from '../../../components/passwordField/index.vue'
+import { getAttrPassword } from '../../../api/CITypeAttr'
+
+export default {
+  name: 'CiDetailAttrContent',
+  components: { JsonEditor, PasswordField },
+  props: {
+    ci: {
+      type: Object,
+      default: () => {},
+    },
+    attr: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isEdit: false,
+      form: this.$form.createForm(this, this.attr.name),
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.eventListener)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.eventListener)
+  },
+  methods: {
+    moment,
+    eventListener(e) {
+      const datePickerContainer = document.getElementsByClassName('ant-calendar-picker-container')
+      if (this.isEdit && !datePickerContainer.length) {
+        const dom = document.getElementById(`ci-detail-attr-${this.attr.name}`)
+        e.stopPropagation()
+        e.preventDefault()
+        if (dom) {
+          const isSelf = dom.contains(e.target)
+          if (!isSelf) {
+            this.handleCloseEdit()
+          }
+        }
+      }
+    },
+    handleEdit(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (this.attr.value_type === '6') {
+        const jsonData = this.ci[this.attr.name]
+        this.$refs.jsonEditor.open(null, null, jsonData || {})
+        return
+      }
+      this.isEdit = true
+      this.$nextTick(async () => {
+        if (this.attr.is_list && !this.attr.is_choice) {
+          this.form.setFieldsValue({
+            [`${this.attr.name}`]: this.ci[this.attr.name] || null,
+          })
+          return
+        }
+        if (this.attr.is_password) {
+          await getAttrPassword(this.ci._id, this.attr.id).then((res) => {
+            this.form.setFieldsValue({
+              [`${this.attr.name}`]: res.value ?? null,
+            })
+          })
+          return
+        }
+        this.form.setFieldsValue({
+          [`${this.attr.name}`]: this.ci[this.attr.name] ?? null,
+        })
+      })
+    },
+    async handleCloseEdit() {
+      const newData = this.form.getFieldValue(this.attr.name)
+      if (!_.isEqual(this.ci[this.attr.name], newData)) {
+        await updateCI(this.ci._id, { [`${this.attr.name}`]: newData })
+          .then(() => {
+            this.$message.success(this.$t('updateSuccess'))
+            this.$emit('updateCIByself', { [`${this.attr.name}`]: newData }, this.attr.name)
+          })
+          .catch(() => {
+            this.$emit('refresh', this.attr.name)
+          })
+      }
+      this.isEdit = false
+    },
+    // handleFocusInput(e, attr) {
+    //   console.log('focus')
+    //   if (this.attr.value_type === '6') {
+    //     e.preventDefault()
+    //     e.stopPropagation()
+    //     // e.srcElement.blur()
+    //     const jsonData = this.form.getFieldValue(attr.name)
+    //     this.$refs.jsonEditor.open(null, null, jsonData ? JSON.parse(jsonData) : {})
+    //   }
+    // },
+    jsonEditorOk(jsonData) {
+      if (!_.isEqual(this.ci[this.attr.name], jsonData)) {
+        updateCI(this.ci._id, { [`${this.attr.name}`]: jsonData })
+          .then(() => {
+            this.$message.success(this.$t('updateSuccess'))
+            this.$emit('updateCIByself', { [`${this.attr.name}`]: jsonData }, this.attr.name)
+          })
+          .catch(() => {
+            this.$emit('refresh', this.attr.name)
+          })
+      }
+    },
+    getChoiceValueStyle(col, colValue) {
+      const _find = col.choice_value.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.style || {}
+      }
+      return {}
+    },
+    getChoiceValueIcon(col, colValue) {
+      const _find = col.choice_value.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.icon || {}
+      }
+      return {}
+    },
+    getName(name) {
+      return name ?? ''
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
index f89028c..44d0251 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelation.vue
@@ -2,10 +2,10 @@
   <div class="ci-detail-relation">
     <a-radio-group v-model="activeKey" size="small" @change="handleChangeActiveKey">
       <a-radio-button value="1">
-        拓扑
+        {{ $t('cmdb.ci.topo') }}
       </a-radio-button>
       <a-radio-button value="2">
-        表格
+        {{ $t('cmdb.ci.table') }}
       </a-radio-button>
     </a-radio-group>
     <CiDetailRelationTopo ref="ciDetailRelationTopo" v-if="activeKey === '1'" />
@@ -24,7 +24,7 @@
             ><a-icon
               type="plus-square"
             /></a>
-            <span v-if="!canEdit[parent.id]">（当前模型关系为多对多，请前往关系视图进行增删操作）</span>
+            <span v-if="!canEdit[parent.id]">（{{ $t('cmdb.ci.m2mTips') }}）</span>
           </div>
           <vxe-grid
             v-if="firstCIs[parent.name]"
@@ -39,7 +39,7 @@
             class="ops-stripe-table"
           >
             <template #operation_default="{ row }">
-              <a-popconfirm arrowPointAtCenter title="确认删除关系？" @confirm="deleteRelation(row._id, ciId)">
+              <a-popconfirm arrowPointAtCenter :title="$t('cmdb.ci.confirmDeleteRelation')" @confirm="deleteRelation(row._id, ciId)">
                 <a
                   :disabled="!canEdit[parent.id]"
                   :style="{
@@ -68,7 +68,7 @@
             ><a-icon
               type="plus-square"
             /></a>
-            <span v-if="!canEdit[child.id]">（当前模型关系为多对多，请前往关系视图进行增删操作）</span>
+            <span v-if="!canEdit[child.id]">（{{ $t('cmdb.ci.m2mTips') }}）</span>
           </div>
           <vxe-grid
             v-if="secondCIs[child.name]"
@@ -82,7 +82,7 @@
             class="ops-stripe-table"
           >
             <template #operation_default="{ row }">
-              <a-popconfirm arrowPointAtCenter title="确认删除关系？" @confirm="deleteRelation(ciId, row._id)">
+              <a-popconfirm arrowPointAtCenter :title="$t('cmdb.ci.confirmDeleteRelation')" @confirm="deleteRelation(ciId, row._id)">
                 <a
                   :disabled="!canEdit[child.id]"
                   :style="{
@@ -338,7 +338,7 @@ export default {
         firstCIColumns[item.id].push({
           key: 'p_operation',
           field: 'operation',
-          title: '操作',
+          title: this.$t('operation'),
           width: '60px',
           fixed: 'right',
           slots: {
@@ -379,7 +379,7 @@ export default {
         secondCIColumns[item.id].push({
           key: 'c_operation',
           field: 'operation',
-          title: '操作',
+          title: this.$t('operation'),
           width: '60px',
           fixed: 'right',
           slots: {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue
index 679d79a..8d019f4 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/index.vue
@@ -1,168 +1,168 @@
-<template>
-  <div
-    id="ci-detail-relation-topo"
-    class="ci-detail-relation-topo"
-    :style="{ width: '100%', marginTop: '20px', height: 'calc(100vh - 136px)' }"
-  ></div>
-</template>
-
-<script>
-import _ from 'lodash'
-import { TreeCanvas } from 'butterfly-dag'
-import { searchCIRelation } from '@/modules/cmdb/api/CIRelation'
-import Node from './node.js'
-
-import 'butterfly-dag/dist/index.css'
-import './index.less'
-
-export default {
-  name: 'CiDetailRelationTopo',
-  data() {
-    return {
-      topoData: {},
-      exsited_ci: [],
-    }
-  },
-  inject: ['ci_types'],
-  mounted() {},
-  methods: {
-    init() {
-      const root = document.getElementById('ci-detail-relation-topo')
-      this.canvas = new TreeCanvas({
-        root: root,
-        disLinkable: false, // 可删除连线
-        linkable: false, // 可连线
-        draggable: true, // 可拖动
-        zoomable: true, // 可放大
-        moveable: true, // 可平移
-        theme: {
-          edge: {
-            shapeType: 'AdvancedBezier',
-            arrow: true,
-            arrowPosition: 1,
-          },
-        },
-        layout: {
-          type: 'mindmap',
-          options: {
-            direction: 'H',
-            getSide(d) {
-              return d.data.side || 'right'
-            },
-            getHeight(d) {
-              return 10
-            },
-            getWidth(d) {
-              return 40
-            },
-            getHGap(d) {
-              return 80
-            },
-            getVGap(d) {
-              return 40
-            },
-          },
-        },
-      })
-      this.canvas.setZoomable(true, true)
-      this.canvas.on('events', ({ type, data }) => {
-        const sourceNode = data?.id || null
-        if (type === 'custom:clickLeft') {
-          searchCIRelation(`root_id=${Number(sourceNode)}&&level=1&&reverse=1&&count=10000`).then((res) => {
-            this.redrawData(res, sourceNode, 'left')
-          })
-        }
-        if (type === 'custom:clickRight') {
-          searchCIRelation(`root_id=${Number(sourceNode)}&&level=1&&reverse=0&&count=10000`).then((res) => {
-            this.redrawData(res, sourceNode, 'right')
-          })
-        }
-      })
-    },
-    setTopoData(data) {
-      this.canvas = null
-      this.init()
-      this.topoData = _.cloneDeep(data)
-      this.canvas.draw(data, {}, () => {
-        this.canvas.focusCenterWithAnimate()
-      })
-    },
-    redrawData(res, sourceNode, side) {
-      const newNodes = []
-      const newEdges = []
-      if (!res.result.length) {
-        this.$message.info('无层级关系！')
-        return
-      }
-      const ci_types_list = this.ci_types()
-      res.result.forEach((r) => {
-        if (!this.exsited_ci.includes(r._id)) {
-          const _findCiType = ci_types_list.find((item) => item.id === r._type)
-          newNodes.push({
-            id: `${r._id}`,
-            Class: Node,
-            title: r.ci_type_alias || r.ci_type,
-            name: r.ci_type,
-            side: side,
-            unique_alias: r.unique_alias,
-            unique_name: r.unique,
-            unique_value: r[r.unique],
-            children: [],
-            icon: _findCiType?.icon || '',
-            endpoints: [
-              {
-                id: 'left',
-                orientation: [-1, 0],
-                pos: [0, 0.5],
-              },
-              {
-                id: 'right',
-                orientation: [1, 0],
-                pos: [0, 0.5],
-              },
-            ],
-          })
-        }
-        newEdges.push({
-          id: `${r._id}`,
-          source: 'right',
-          target: 'left',
-          sourceNode: side === 'right' ? sourceNode : `${r._id}`,
-          targetNode: side === 'right' ? `${r._id}` : sourceNode,
-          type: 'endpoint',
-        })
-      })
-      const { nodes, edges } = this.canvas.getDataMap()
-      // 删除原节点和边
-      this.canvas.removeNodes(nodes.map((node) => node.id))
-      this.canvas.removeEdges(edges)
-
-      const _topoData = _.cloneDeep(this.topoData)
-      _topoData.edges.push(...newEdges)
-      let result
-      const getTreeItem = (data, id) => {
-        for (let i = 0; i < data.length; i++) {
-          if (data[i].id === id) {
-            result = data[i] // 结果赋值
-            result.edges = _topoData.edges
-            break
-          } else {
-            if (data[i].children && data[i].children.length) {
-              getTreeItem(data[i].children, id)
-            }
-          }
-        }
-      }
-
-      getTreeItem(_topoData.nodes.children, sourceNode)
-      result.children.push(...newNodes)
-
-      this.topoData = _topoData
-      this.canvas.draw(_topoData, {}, () => {})
-      this.exsited_ci = [...new Set([...this.exsited_ci, ...res.result.map((r) => r._id)])]
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <div
+    id="ci-detail-relation-topo"
+    class="ci-detail-relation-topo"
+    :style="{ width: '100%', marginTop: '20px', height: 'calc(100vh - 136px)' }"
+  ></div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { TreeCanvas } from 'butterfly-dag'
+import { searchCIRelation } from '@/modules/cmdb/api/CIRelation'
+import Node from './node.js'
+
+import 'butterfly-dag/dist/index.css'
+import './index.less'
+
+export default {
+  name: 'CiDetailRelationTopo',
+  data() {
+    return {
+      topoData: {},
+      exsited_ci: [],
+    }
+  },
+  inject: ['ci_types'],
+  mounted() {},
+  methods: {
+    init() {
+      const root = document.getElementById('ci-detail-relation-topo')
+      this.canvas = new TreeCanvas({
+        root: root,
+        disLinkable: false, // 可删除连线
+        linkable: false, // 可连线
+        draggable: true, // 可拖动
+        zoomable: true, // 可放大
+        moveable: true, // 可平移
+        theme: {
+          edge: {
+            shapeType: 'AdvancedBezier',
+            arrow: true,
+            arrowPosition: 1,
+          },
+        },
+        layout: {
+          type: 'mindmap',
+          options: {
+            direction: 'H',
+            getSide(d) {
+              return d.data.side || 'right'
+            },
+            getHeight(d) {
+              return 10
+            },
+            getWidth(d) {
+              return 40
+            },
+            getHGap(d) {
+              return 80
+            },
+            getVGap(d) {
+              return 40
+            },
+          },
+        },
+      })
+      this.canvas.setZoomable(true, true)
+      this.canvas.on('events', ({ type, data }) => {
+        const sourceNode = data?.id || null
+        if (type === 'custom:clickLeft') {
+          searchCIRelation(`root_id=${Number(sourceNode)}&&level=1&&reverse=1&&count=10000`).then((res) => {
+            this.redrawData(res, sourceNode, 'left')
+          })
+        }
+        if (type === 'custom:clickRight') {
+          searchCIRelation(`root_id=${Number(sourceNode)}&&level=1&&reverse=0&&count=10000`).then((res) => {
+            this.redrawData(res, sourceNode, 'right')
+          })
+        }
+      })
+    },
+    setTopoData(data) {
+      this.canvas = null
+      this.init()
+      this.topoData = _.cloneDeep(data)
+      this.canvas.draw(data, {}, () => {
+        this.canvas.focusCenterWithAnimate()
+      })
+    },
+    redrawData(res, sourceNode, side) {
+      const newNodes = []
+      const newEdges = []
+      if (!res.result.length) {
+        this.$message.info(this.$t('cmdb.ci.noLevel'))
+        return
+      }
+      const ci_types_list = this.ci_types()
+      res.result.forEach((r) => {
+        if (!this.exsited_ci.includes(r._id)) {
+          const _findCiType = ci_types_list.find((item) => item.id === r._type)
+          newNodes.push({
+            id: `${r._id}`,
+            Class: Node,
+            title: r.ci_type_alias || r.ci_type,
+            name: r.ci_type,
+            side: side,
+            unique_alias: r.unique_alias,
+            unique_name: r.unique,
+            unique_value: r[r.unique],
+            children: [],
+            icon: _findCiType?.icon || '',
+            endpoints: [
+              {
+                id: 'left',
+                orientation: [-1, 0],
+                pos: [0, 0.5],
+              },
+              {
+                id: 'right',
+                orientation: [1, 0],
+                pos: [0, 0.5],
+              },
+            ],
+          })
+        }
+        newEdges.push({
+          id: `${r._id}`,
+          source: 'right',
+          target: 'left',
+          sourceNode: side === 'right' ? sourceNode : `${r._id}`,
+          targetNode: side === 'right' ? `${r._id}` : sourceNode,
+          type: 'endpoint',
+        })
+      })
+      const { nodes, edges } = this.canvas.getDataMap()
+      // 删除原节点和边
+      this.canvas.removeNodes(nodes.map((node) => node.id))
+      this.canvas.removeEdges(edges)
+
+      const _topoData = _.cloneDeep(this.topoData)
+      _topoData.edges.push(...newEdges)
+      let result
+      const getTreeItem = (data, id) => {
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].id === id) {
+            result = data[i] // 结果赋值
+            result.edges = _topoData.edges
+            break
+          } else {
+            if (data[i].children && data[i].children.length) {
+              getTreeItem(data[i].children, id)
+            }
+          }
+        }
+      }
+
+      getTreeItem(_topoData.nodes.children, sourceNode)
+      result.children.push(...newNodes)
+
+      this.topoData = _topoData
+      this.canvas.draw(_topoData, {}, () => {})
+      this.exsited_ci = [...new Set([...this.exsited_ci, ...res.result.map((r) => r._id)])]
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/node.js b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/node.js
index af8cd49..3680d6b 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/node.js
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelationTopo/node.js
@@ -1,56 +1,57 @@
-/* eslint-disable no-useless-constructor */
-import { TreeNode } from 'butterfly-dag'
-
-import $ from 'jquery'
-
-class BaseNode extends TreeNode {
-    constructor(opts) {
-        super(opts)
-    }
-
-    draw = (opts) => {
-        const container = $(`<div class="${opts.id.startsWith('Root') ? 'root' : ''} ci-detail-relation-topo-node"></div>`)
-            .css('top', opts.top)
-            .css('left', opts.left)
-            .attr('id', opts.id)
-        let icon
-        if (opts.options.icon) {
-            if (opts.options.icon.split('$$')[2]) {
-                icon = $(`<img style="max-width:16px;max-height:16px;" src="/api/common-setting/v1/file/${opts.options.icon.split('$$')[3]}" />`)
-            } else {
-                icon = $(`<svg class="icon" style="color:${opts.options.icon.split('$$')[1]}" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use data-v-5bd421da="" xlink:href="#${opts.options.icon.split('$$')[0]}"></use></svg>`)
-            }
-        } else {
-            icon = $(`<span class="icon icon-default">${opts.options.name[0].toUpperCase()}</span>`)
-        }
-
-        const titleContent = $(`<div title=${opts.options.title} class="title">${opts.options.title}</div>`)
-        const uniqueDom = $(`<div class="unique">${opts.options.unique_alias || opts.options.unique_name}：${opts.options.unique_value}<div>`)
-        container.append(icon)
-        container.append(titleContent)
-        container.append(uniqueDom)
-
-        if (opts.options.side && (!opts.options.children.length && !(opts.options.edges && opts.options.edges.length && opts.options.edges.find(e => e.source === opts.options.side && e.sourceNode === opts.options.id)))) {
-            const addIcon = $(`<i aria-label="图标: plus-square" class="anticon anticon-plus-square add-icon-${opts.options.side}"><svg viewBox="64 64 896 896" data-icon="plus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i>`)
-            container.append(addIcon)
-            addIcon.on('click', () => {
-                if (opts.options.side === 'left') {
-                    this.emit('events', {
-                        type: 'custom:clickLeft',
-                        data: { ...this }
-                    })
-                }
-                if (opts.options.side === 'right') {
-                    this.emit('events', {
-                        type: 'custom:clickRight',
-                        data: { ...this }
-                    })
-                }
-            })
-        }
-
-        return container[0]
-    }
-}
-
-export default BaseNode
+/* eslint-disable no-useless-constructor */
+import { TreeNode } from 'butterfly-dag'
+import i18n from '@/lang'
+
+import $ from 'jquery'
+
+class BaseNode extends TreeNode {
+    constructor(opts) {
+        super(opts)
+    }
+
+    draw = (opts) => {
+        const container = $(`<div class="${opts.id.startsWith('Root') ? 'root' : ''} ci-detail-relation-topo-node"></div>`)
+            .css('top', opts.top)
+            .css('left', opts.left)
+            .attr('id', opts.id)
+        let icon
+        if (opts.options.icon) {
+            if (opts.options.icon.split('$$')[2]) {
+                icon = $(`<img style="max-width:16px;max-height:16px;" src="/api/common-setting/v1/file/${opts.options.icon.split('$$')[3]}" />`)
+            } else {
+                icon = $(`<svg class="icon" style="color:${opts.options.icon.split('$$')[1]}" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use data-v-5bd421da="" xlink:href="#${opts.options.icon.split('$$')[0]}"></use></svg>`)
+            }
+        } else {
+            icon = $(`<span class="icon icon-default">${opts.options.name[0].toUpperCase()}</span>`)
+        }
+
+        const titleContent = $(`<div title=${opts.options.title} class="title">${opts.options.title}</div>`)
+        const uniqueDom = $(`<div class="unique">${opts.options.unique_alias || opts.options.unique_name}：${opts.options.unique_value}<div>`)
+        container.append(icon)
+        container.append(titleContent)
+        container.append(uniqueDom)
+
+        if (opts.options.side && (!opts.options.children.length && !(opts.options.edges && opts.options.edges.length && opts.options.edges.find(e => e.source === opts.options.side && e.sourceNode === opts.options.id)))) {
+            const addIcon = $(`<i aria-label="${i18n.t('icon')}: plus-square" class="anticon anticon-plus-square add-icon-${opts.options.side}"><svg viewBox="64 64 896 896" data-icon="plus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i>`)
+            container.append(addIcon)
+            addIcon.on('click', () => {
+                if (opts.options.side === 'left') {
+                    this.emit('events', {
+                        type: 'custom:clickLeft',
+                        data: { ...this }
+                    })
+                }
+                if (opts.options.side === 'right') {
+                    this.emit('events', {
+                        type: 'custom:clickRight',
+                        data: { ...this }
+                    })
+                }
+            })
+        }
+
+        return container[0]
+    }
+}
+
+export default BaseNode
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue
index ba51a5a..ed8e2c4 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <a-form :form="form">
-    <a-divider style="font-size: 14px; margin: 14px 0; font-weight: 700">{{ group.name || '其他' }}</a-divider>
+    <a-divider style="font-size:14px;margin:14px 0;font-weight:700;">{{ group.name || $t('other') }}</a-divider>
     <a-row :gutter="24" align="top" type="flex">
       <a-col
         :span="12"
@@ -21,11 +21,11 @@
             v-decorator="[
               attr.name,
               {
-                rules: [{ required: attr.is_required, message: `请选择${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder2') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? attr.default.default : attr.is_list ? [] : null,
               },
             ]"
-            placeholder="请选择"
+            :placeholder="$t('placeholder2')"
             v-if="attr.is_choice"
             :mode="attr.is_list ? 'multiple' : 'default'"
             showSearch
@@ -60,7 +60,7 @@
             v-decorator="[
               attr.name,
               {
-                rules: [{ required: attr.is_required, message: `请选择${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder2') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? attr.default.default : attr.is_list ? [] : null,
               },
             ]"
@@ -70,7 +70,7 @@
             v-decorator="[
               attr.name,
               {
-                rules: [{ required: attr.is_required, message: `请输入${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder1') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? attr.default.default : null,
               },
             ]"
@@ -81,7 +81,7 @@
             v-decorator="[
               attr.name,
               {
-                rules: [{ required: attr.is_required, message: `请选择${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder2') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? moment(attr.default.default) : null,
               },
             ]"
@@ -96,7 +96,7 @@
               attr.name,
               {
                 validateTrigger: ['submit'],
-                rules: [{ required: attr.is_required, message: `请输入${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder1') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? JSON.stringify(attr.default.default) : '',
               },
             ]"
@@ -109,7 +109,7 @@
               attr.name,
               {
                 validateTrigger: ['submit'],
-                rules: [{ required: attr.is_required, message: `请输入${attr.alias || attr.name}` }],
+                rules: [{ required: attr.is_required, message: $t('placeholder1') + `${attr.alias || attr.name}` }],
                 initialValue: attr.default && attr.default.default ? attr.default.default : null,
               },
             ]"
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsDrawer.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsDrawer.vue
index 2c1c4b0..712a016 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsDrawer.vue
@@ -7,7 +7,7 @@
         visible = false
       }
     "
-    title="字段设置"
+    :title="$t('cmdb.ci.attributeSettings')"
   >
     <CustomTransfer
       ref="customTransfer"
@@ -17,16 +17,16 @@
         width: '230px',
         height: '500px',
       }"
-      :titles="['未选属性', '已选属性']"
+      :titles="[$t('cmdb.components.unselectAttributes'), $t('cmdb.components.selectAttributes')]"
       :render="item => item.title"
       :targetKeys="selectedAttrList"
       @change="handleChange"
       @selectChange="selectChange"
     >
-      <span slot="notFoundContent">没数据</span>
+      <span slot="notFoundContent">{{ $t('noData') }}</span>
     </CustomTransfer>
     <div class="custom-drawer-bottom-action">
-      <a-button @click="handleSubmit" type="primary">确定</a-button>
+      <a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
     </div>
   </CustomDrawer>
 </template>
@@ -79,16 +79,17 @@ export default {
       this.selectedAttrList = targetKeys
     },
     handleSubmit() {
+      const that = this
       if (this.selectedAttrList.length) {
         subscribeCIType(this.typeId, this.selectedAttrList).then(res => {
-          this.$message.success('订阅成功！')
+          this.$message.success(this.$t('cmdb.components.subSuccess'))
           this.visible = false
           this.$emit('refresh')
         })
       } else {
         this.$confirm({
-          title: '警告',
-          content: '必须至少选择一个字段',
+          title: that.$t('warning'),
+          content: that.$t('cmdb.ci.tips4'),
         })
       }
     },
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
index 45bb789..4766add 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/editAttrsPopover.vue
@@ -75,12 +75,12 @@ export default {
             return [item, !!this.fixedList.includes(item)]
           })
         ).then((res) => {
-          this.$message.success('订阅成功！')
+          this.$message.success(this.$t('cmdb.components.subSuccess'))
           this.visible = false
           this.$emit('refresh')
         })
       } else {
-        this.$message.error('请至少选择一个字段！')
+        this.$message.error(this.$t('cmdb.ci.tips4'))
       }
     },
     setTargetKeys(targetKeys) {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/adModal.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/adModal.vue
index 0f071fc..ff049d8 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/adModal.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/adModal.vue
@@ -3,9 +3,9 @@
     <Discovery :isSelected="true" :style="{ maxHeight: '75vh', overflow: 'auto' }" />
     <template #footer>
       <a-space>
-        <a-button @click="handleCancel">取消</a-button>
-        <a-button type="primary" @click="handleOK">确认</a-button>
-        <a-button type="primary" @click="addPlugin">新建plugin</a-button>
+        <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
+        <a-button type="primary" @click="handleOK">{{ $t('confirm') }}</a-button>
+        <a-button type="primary" @click="addPlugin">{{ $t('cmdb.ciType.addPlugin') }}</a-button>
       </a-space>
     </template>
   </a-modal>
@@ -55,7 +55,7 @@ export default {
         await Promise.all(promises)
           .then((res) => {
             this.getCITypeDiscovery(res[0].id)
-            this.$message.success('添加成功')
+            this.$message.success(this.$t('addSuccess'))
           })
           .catch(() => {
             this.getCITypeDiscovery()
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
index 1e705ac..ea79501 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
@@ -29,7 +29,7 @@
           slot="tabBarExtraContent"
           :style="{ cursor: 'pointer' }"
         >
-          <ops-icon type="icon-xianxing-tianjia" :style="{ color: '#2F54EB' }" /><a>添加</a>
+          <ops-icon type="icon-xianxing-tianjia" :style="{ color: '#2F54EB' }" /><a>{{ $t('add') }}</a>
         </a-space>
       </a-tabs>
     </div>
@@ -40,7 +40,7 @@
       }"
     >
       <img slot="image" :src="require('@/assets/data_empty.png')" />
-      <span slot="description"> 暂无数据 </span>
+      <span slot="description"> {{ $t('noData') }} </span>
       <a-button
         @click="
           () => {
@@ -52,7 +52,7 @@
         icon="plus"
         class="ops-button-primary"
       >
-        添加
+        {{ $t('add') }}
       </a-button>
     </a-empty>
     <ADModal ref="adModal" :CITypeId="CITypeId" @addPlugin="openEditDrawer(null, 'add', 'agent')" />
@@ -158,10 +158,10 @@ export default {
       e.stopPropagation()
       const that = this
       this.$confirm({
-        title: `确认删除 【${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}】`,
+        title: that.$t('cmdb.ciType.confirmDeleteADT', { pluginName: `${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}` }),
         content: (h) => (
           <div>
-            <a-checkbox v-model={that.deletePlugin}>删除插件</a-checkbox>
+            <a-checkbox v-model={that.deletePlugin}>{that.$t('cmdb.ciType.deletePlugin')}</a-checkbox>
           </div>
         ),
         onOk() {
@@ -169,7 +169,7 @@ export default {
             if (that.currentTab === item.id) {
               that.currentTab = ''
             }
-            that.$message.success('删除成功！')
+            that.$message.success(that.$t('deleteSuccess'))
             that.getCITypeDiscovery()
             if (that.deletePlugin) {
               await deleteDiscovery(item.adr_id).finally(() => {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
index 7a2659c..3fa87c6 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
@@ -1,396 +1,398 @@
-<template>
-  <div :style="{ height: `${windowHeight - 156}px`, overflow: 'auto', position: 'relative' }">
-    <a
-      v-if="!adrIsInner"
-      :style="{ position: 'absolute', right: 0, top: 0 }"
-      @click="
-        () => {
-          $emit('openEditDrawer', currentAdr, 'edit', 'agent')
-        }
-      "
-    >
-      <a-space>
-        <ops-icon type="icon-xianxing-edit" />
-        <span>编辑</span>
-      </a-space>
-    </a>
-    <div>别名：<a-input v-model="alias" style="width:200px;" /></div>
-    <div class="attr-ad-header">字段映射</div>
-    <vxe-table
-      v-if="adrType === 'agent'"
-      ref="xTable"
-      :edit-config="{ trigger: 'click', mode: 'cell' }"
-      size="mini"
-      stripe
-      class="ops-stripe-table"
-      :data="tableData"
-      :style="{ width: '700px', marginBottom: '20px' }"
-    >
-      <vxe-colgroup title="自动发现">
-        <vxe-column field="name" title="名称"> </vxe-column>
-        <vxe-column field="type" title="类型"> </vxe-column>
-        <vxe-column field="desc" title="描述"> </vxe-column>
-      </vxe-colgroup>
-      <vxe-colgroup title="模型属性">
-        <vxe-column field="attr" title="名称" :edit-render="{}">
-          <template #default="{row}">
-            {{ row.attr }}
-          </template>
-          <template #edit="{ row }">
-            <vxe-select
-              filterable
-              clearable
-              v-model="row.attr"
-              type="text"
-              :options="ciTypeAttributes"
-              transfer
-            ></vxe-select>
-          </template>
-        </vxe-column>
-      </vxe-colgroup>
-    </vxe-table>
-    <HttpSnmpAD
-      v-else
-      :isEdit="true"
-      ref="httpSnmpAd"
-      :ruleType="adrType"
-      :ruleName="adrName"
-      :ciTypeAttributes="ciTypeAttributes"
-      :adCITypeList="adCITypeList"
-      :currentTab="adr_id"
-      :style="{ marginBottom: '20px' }"
-    />
-    <a-form-model
-      v-if="adrType === 'http'"
-      :model="form2"
-      :labelCol="{ span: 2 }"
-      :wrapperCol="{ span: 8 }"
-      :style="{ margin: '20px 0' }"
-    >
-      <a-form-model-item label="key">
-        <a-input-password v-model="form2.key" />
-      </a-form-model-item>
-      <a-form-model-item label="secret">
-        <a-input-password v-model="form2.secret" />
-      </a-form-model-item>
-    </a-form-model>
-    <a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form">
-      <a-col :span="24">
-        <a-form-item label="节点" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
-          <MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" />
-        </a-form-item>
-      </a-col>
-    </a-form>
-    <div class="attr-ad-header">执行配置</div>
-    <a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
-      <a-form-model-item label="执行机器">
-        <CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
-          <a-input
-            :style="{ width: '300px' }"
-            placeholder="请输入以0x开头的16进制OneAgent ID"
-            v-show="agent_type === 'agent_id'"
-            slot="extra_agent_id"
-            v-model="form.agent_id"
-          />
-          <a-input
-            :style="{ width: '300px' }"
-            v-show="agent_type === 'query_expr'"
-            slot="extra_query_expr"
-            placeholder="从CMDB选择"
-            v-model="form.query_expr"
-          >
-            <a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a>
-          </a-input>
-        </CustomRadio>
-      </a-form-model-item>
-      <a-form-model-item label="自动入库">
-        <a-switch v-model="form.auto_accept" />
-      </a-form-model-item>
-    </a-form-model>
-    <div class="attr-ad-header">采集频率</div>
-    <CustomRadio :radioList="radioList" v-model="interval">
-      <span v-show="interval === 'interval'" slot="extra_interval">
-        <a-input-number v-model="intervalValue" :min="1" /> 秒
-      </span>
-    </CustomRadio>
-
-    <div class="attr-ad-footer">
-      <a-button type="primary" @click="handleSave">保存</a-button>
-    </div>
-    <CMDBExprDrawer ref="cmdbDrawer" @copySuccess="copySuccess" />
-  </div>
-</template>
-
-<script>
-import { v4 as uuidv4 } from 'uuid'
-import { mapState } from 'vuex'
-import Vcrontab from '@/components/Crontab'
-import { putCITypeDiscovery } from '../../api/discovery'
-import HttpSnmpAD from '../../components/httpSnmpAD'
-import CMDBExprDrawer from '@/components/CMDBExprDrawer'
-import MonitorNodeSetting from '@/components/MonitorNodeSetting'
-
-export default {
-  name: 'AttrADTabpane',
-  components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
-  props: {
-    adr_id: {
-      type: Number,
-      default: 0,
-    },
-    adrList: {
-      type: Array,
-      default: () => {},
-    },
-    adCITypeList: {
-      type: Array,
-      default: () => {},
-    },
-    currentAdt: {
-      type: Object,
-      default: () => {},
-    },
-    currentAdr: {
-      type: Object,
-      default: () => {},
-    },
-    ciTypeAttributes: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    const radioList = [
-      { value: 'interval', label: '按间隔' },
-    ]
-    return {
-      radioList,
-      tableData: [],
-      form: {
-        agent_id: '',
-        auto_accept: false,
-        query_expr: '',
-      },
-      form2: {
-        key: '',
-        secret: '',
-      },
-      interval: 'interval', // interval  cron
-      cron: '',
-      intervalValue: 3,
-      agent_type: 'agent_id',
-      nodes: [
-        {
-          id: uuidv4(),
-          ip: '',
-          community: '',
-          version: '',
-        },
-      ],
-      form3: this.$form.createForm(this, { name: 'snmp_form' }),
-      alias: '',
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-      userRoles: (state) => state.user.roles,
-    }),
-    adrType() {
-      return this.currentAdr.type
-    },
-    adrName() {
-      return this.currentAdr.name
-    },
-    adrIsInner() {
-      return this.currentAdr.is_inner
-    },
-    agentTypeRadioList() {
-      const { permissions = [] } = this.userRoles
-      if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType !== 'http') {
-        return [
-          { value: 'all', label: '所有节点' },
-          { value: 'agent_id', label: '指定节点' },
-          { value: 'query_expr', label: '从CMDB中选择 ' },
-        ]
-      }
-      return [
-        { value: 'agent_id', label: '指定节点' },
-        { value: 'query_expr', label: '从CMDB中选择 ' },
-      ]
-    },
-  },
-  mounted() {},
-  methods: {
-    init() {
-      const _find = this.adrList.find((item) => Number(item.id) === Number(this.adr_id))
-      const _findADT = this.adCITypeList.find((item) => Number(item.id) === Number(this.currentAdt.id))
-      this.alias = _findADT?.extra_option?.alias ?? ''
-      if (this.adrType === 'http') {
-        const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
-        this.form2 = {
-          key,
-          secret,
-        }
-        this.$refs.httpSnmpAd.setCurrentCate(category)
-      }
-      if (this.adrType === 'snmp') {
-        this.nodes = _findADT?.extra_option?.nodes ?? [
-          {
-            id: uuidv4(),
-            ip: '',
-            community: '',
-            version: '',
-          },
-        ]
-        this.$nextTick(() => {
-          this.$refs.monitorNodeSetting.initNodesFunc()
-          this.$nextTick(() => {
-            this.$refs.monitorNodeSetting.setNodeField()
-          })
-        })
-      }
-      if (this.adrType === 'agent') {
-        this.tableData = (_find?.attributes || []).map((item) => {
-          if (_findADT.attributes) {
-            return {
-              ...item,
-              attr: _findADT.attributes[`${item.name}`],
-            }
-          } else {
-            const _find = this.ciTypeAttributes.find((ele) => ele.name === item.name)
-            if (_find) {
-              return {
-                ...item,
-                attr: _find.name,
-              }
-            }
-            return item
-          }
-        })
-      }
-      this.form = {
-        auto_accept: _findADT?.auto_accept || false,
-        agent_id: _findADT.agent_id || '',
-        query_expr: _findADT.query_expr || '',
-      }
-      if (_findADT.query_expr) {
-        this.agent_type = 'query_expr'
-      } else if (_findADT.agent_id) {
-        this.agent_type = 'agent_id'
-      } else {
-        this.agent_type = this.agentTypeRadioList[0].value
-      }
-      if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) {
-        this.interval = 'interval'
-        this.intervalValue = _findADT.interval || ''
-      } else {
-        this.interval = 'cron'
-        this.cron = `0 ${_findADT.cron}`
-      }
-    },
-    getAttrNameByAttrName(attrName) {
-      const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
-      return _find?.alias || _find?.name || ''
-    },
-    crontabFill(cron) {
-      this.cron = cron
-    },
-    handleSave() {
-      const { currentAdt, alias } = this
-      let params
-      if (this.adrType === 'http') {
-        params = {
-          extra_option: {
-            ...this.form2,
-            category: this.$refs.httpSnmpAd.currentCate,
-          },
-        }
-      }
-      if (this.adrType === 'snmp') {
-        params = {
-          extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
-        }
-      }
-      if (this.adrType === 'agent') {
-        const $table = this.$refs.xTable
-        const { fullData: _tableData } = $table.getTableData()
-        const attributes = {}
-        _tableData.forEach((td) => {
-          if (td.attr) {
-            attributes[`${td.name}`] = td.attr
-          }
-        })
-        params = {
-          ...params,
-          attributes,
-        }
-      } else {
-        const _tableData = this.$refs.httpSnmpAd.getTableData()
-        const attributes = {}
-        _tableData.forEach((td) => {
-          if (td.attr) {
-            attributes[`${td.name}`] = td.attr
-          }
-        })
-        params = {
-          ...params,
-          attributes,
-        }
-      }
-      if (this.interval === 'cron') {
-        this.$refs.cronTab.submitFill()
-      }
-      params = {
-        ...params,
-        ...this.form,
-        type_id: this.CITypeId,
-        adr_id: currentAdt.adr_id,
-        interval: this.interval === 'interval' ? this.intervalValue : null,
-        cron: this.interval === 'cron' ? this.cron : null,
-      }
-      if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
-        params.query_expr = ''
-        if (this.agent_type === 'agent_id' && !params.agent_id) {
-          this.$message.error('请填写指定节点！')
-          return
-        }
-      }
-      if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
-        params.agent_id = ''
-        if (this.agent_type === 'query_expr' && !params.query_expr) {
-          this.$message.error('请从cmdb中选择！')
-          return
-        }
-      }
-      if (params.extra_option) {
-        params.extra_option.alias = alias
-      } else {
-        params.extra_option = {}
-        params.extra_option.alias = alias
-      }
-      putCITypeDiscovery(currentAdt.id, params).then((res) => {
-        this.$message.success('保存成功')
-        this.$emit('handleSave')
-      })
-    },
-    handleOpenCmdb() {
-      this.$refs.cmdbDrawer.open()
-    },
-    copySuccess(text) {
-      this.form = {
-        ...this.form,
-        query_expr: `${text}`,
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less">
-.attr-ad-snmp-form {
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
+<template>
+  <div :style="{ height: `${windowHeight - 156}px`, overflow: 'auto', position: 'relative' }">
+    <a
+      v-if="!adrIsInner"
+      :style="{ position: 'absolute', right: 0, top: 0 }"
+      @click="
+        () => {
+          $emit('openEditDrawer', currentAdr, 'edit', 'agent')
+        }
+      "
+    >
+      <a-space>
+        <ops-icon type="icon-xianxing-edit" />
+        <span>{{ $t('edit') }}</span>
+      </a-space>
+    </a>
+    <div>{{ $t('alias') }}：<a-input v-model="alias" style="width:200px;" /></div>
+    <div class="attr-ad-header">{{ $t('cmdb.ciType.attributeMap') }}</div>
+    <vxe-table
+      v-if="adrType === 'agent'"
+      ref="xTable"
+      :edit-config="{ trigger: 'click', mode: 'cell' }"
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :data="tableData"
+      :style="{ width: '700px', marginBottom: '20px' }"
+    >
+      <vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
+        <vxe-column field="name" :title="$t('name')"> </vxe-column>
+        <vxe-column field="type" :title="$t('type')"> </vxe-column>
+        <vxe-column field="desc" :title="$t('desc')"> </vxe-column>
+      </vxe-colgroup>
+      <vxe-colgroup :title="$t('cmdb.ciType.attributes')">
+        <vxe-column field="attr" :title="$t('name')" :edit-render="{}">
+          <template #default="{row}">
+            {{ row.attr }}
+          </template>
+          <template #edit="{ row }">
+            <vxe-select
+              filterable
+              clearable
+              v-model="row.attr"
+              type="text"
+              :options="ciTypeAttributes"
+              transfer
+            ></vxe-select>
+          </template>
+        </vxe-column>
+      </vxe-colgroup>
+    </vxe-table>
+    <HttpSnmpAD
+      v-else
+      :isEdit="true"
+      ref="httpSnmpAd"
+      :ruleType="adrType"
+      :ruleName="adrName"
+      :ciTypeAttributes="ciTypeAttributes"
+      :adCITypeList="adCITypeList"
+      :currentTab="adr_id"
+      :style="{ marginBottom: '20px' }"
+    />
+    <a-form-model
+      v-if="adrType === 'http'"
+      :model="form2"
+      :labelCol="{ span: 2 }"
+      :wrapperCol="{ span: 8 }"
+      :style="{ margin: '20px 0' }"
+    >
+      <a-form-model-item label="key">
+        <a-input-password v-model="form2.key" />
+      </a-form-model-item>
+      <a-form-model-item label="secret">
+        <a-input-password v-model="form2.secret" />
+      </a-form-model-item>
+    </a-form-model>
+    <a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form">
+      <a-col :span="24">
+        <a-form-item :label="$t('cmdb.ciType.node')" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
+          <MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" />
+        </a-form-item>
+      </a-col>
+    </a-form>
+    <div class="attr-ad-header">{{ $t('cmdb.ciType.adExecConfig') }}</div>
+    <a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
+      <a-form-model-item :label="$t('cmdb.ciType.adExecTarget')">
+        <CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
+          <a-input
+            :style="{ width: '300px' }"
+            :placeholder="$t('cmdb.ciType.oneagentIdTips')"
+            v-show="agent_type === 'agent_id'"
+            slot="extra_agent_id"
+            v-model="form.agent_id"
+          />
+          <a-input
+            :style="{ width: '300px' }"
+            v-show="agent_type === 'query_expr'"
+            slot="extra_query_expr"
+            :placeholder="$t('cmdb.ciType.selectFromCMDBTips')"
+            v-model="form.query_expr"
+          >
+            <a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a>
+          </a-input>
+        </CustomRadio>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.ciType.adAutoInLib')">
+        <a-switch v-model="form.auto_accept" />
+      </a-form-model-item>
+    </a-form-model>
+    <div class="attr-ad-header">{{ $t('cmdb.ciType.adInterval') }}</div>
+    <CustomRadio :radioList="radioList" v-model="interval">
+      <span v-show="interval === 'interval'" slot="extra_interval">
+        <a-input-number v-model="intervalValue" :min="1" /> {{ $t('seconds') }}
+      </span>
+    </CustomRadio>
+
+    <div class="attr-ad-footer">
+      <a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
+    </div>
+    <CMDBExprDrawer ref="cmdbDrawer" @copySuccess="copySuccess" />
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import { mapState } from 'vuex'
+import Vcrontab from '@/components/Crontab'
+import { putCITypeDiscovery } from '../../api/discovery'
+import HttpSnmpAD from '../../components/httpSnmpAD'
+import CMDBExprDrawer from '@/components/CMDBExprDrawer'
+import MonitorNodeSetting from '@/components/MonitorNodeSetting'
+
+export default {
+  name: 'AttrADTabpane',
+  components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
+  props: {
+    adr_id: {
+      type: Number,
+      default: 0,
+    },
+    adrList: {
+      type: Array,
+      default: () => {},
+    },
+    adCITypeList: {
+      type: Array,
+      default: () => {},
+    },
+    currentAdt: {
+      type: Object,
+      default: () => {},
+    },
+    currentAdr: {
+      type: Object,
+      default: () => {},
+    },
+    ciTypeAttributes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      form: {
+        agent_id: '',
+        auto_accept: false,
+        query_expr: '',
+      },
+      form2: {
+        key: '',
+        secret: '',
+      },
+      interval: 'interval', // interval  cron
+      cron: '',
+      intervalValue: 3,
+      agent_type: 'agent_id',
+      nodes: [
+        {
+          id: uuidv4(),
+          ip: '',
+          community: '',
+          version: '',
+        },
+      ],
+      form3: this.$form.createForm(this, { name: 'snmp_form' }),
+      alias: '',
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+      userRoles: (state) => state.user.roles,
+    }),
+    adrType() {
+      return this.currentAdr.type
+    },
+    adrName() {
+      return this.currentAdr.name
+    },
+    adrIsInner() {
+      return this.currentAdr.is_inner
+    },
+    agentTypeRadioList() {
+      const { permissions = [] } = this.userRoles
+      if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType !== 'http') {
+        return [
+          { value: 'all', label: this.$t('cmdb.ciType.allNodes') },
+          { value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
+          { value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
+        ]
+      }
+      return [
+        { value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
+        { value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
+      ]
+    },
+    radioList() {
+      return [
+        { value: 'interval', label: this.$t('cmdb.ciType.byInterval') },
+        // { value: 'cron', label: '按cron', layout: 'vertical' },
+      ]
+    },
+  },
+  mounted() {},
+  methods: {
+    init() {
+      const _find = this.adrList.find((item) => Number(item.id) === Number(this.adr_id))
+      const _findADT = this.adCITypeList.find((item) => Number(item.id) === Number(this.currentAdt.id))
+      this.alias = _findADT?.extra_option?.alias ?? ''
+      if (this.adrType === 'http') {
+        const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
+        this.form2 = {
+          key,
+          secret,
+        }
+        this.$refs.httpSnmpAd.setCurrentCate(category)
+      }
+      if (this.adrType === 'snmp') {
+        this.nodes = _findADT?.extra_option?.nodes ?? [
+          {
+            id: uuidv4(),
+            ip: '',
+            community: '',
+            version: '',
+          },
+        ]
+        this.$nextTick(() => {
+          this.$refs.monitorNodeSetting.initNodesFunc()
+          this.$nextTick(() => {
+            this.$refs.monitorNodeSetting.setNodeField()
+          })
+        })
+      }
+      if (this.adrType === 'agent') {
+        this.tableData = (_find?.attributes || []).map((item) => {
+          if (_findADT.attributes) {
+            return {
+              ...item,
+              attr: _findADT.attributes[`${item.name}`],
+            }
+          } else {
+            const _find = this.ciTypeAttributes.find((ele) => ele.name === item.name)
+            if (_find) {
+              return {
+                ...item,
+                attr: _find.name,
+              }
+            }
+            return item
+          }
+        })
+      }
+      this.form = {
+        auto_accept: _findADT?.auto_accept || false,
+        agent_id: _findADT.agent_id || '',
+        query_expr: _findADT.query_expr || '',
+      }
+      if (_findADT.query_expr) {
+        this.agent_type = 'query_expr'
+      } else if (_findADT.agent_id) {
+        this.agent_type = 'agent_id'
+      } else {
+        this.agent_type = this.agentTypeRadioList[0].value
+      }
+      if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) {
+        this.interval = 'interval'
+        this.intervalValue = _findADT.interval || ''
+      } else {
+        this.interval = 'cron'
+        this.cron = `0 ${_findADT.cron}`
+      }
+    },
+    getAttrNameByAttrName(attrName) {
+      const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
+      return _find?.alias || _find?.name || ''
+    },
+    crontabFill(cron) {
+      this.cron = cron
+    },
+    handleSave() {
+      const { currentAdt, alias } = this
+      let params
+      if (this.adrType === 'http') {
+        params = {
+          extra_option: {
+            ...this.form2,
+            category: this.$refs.httpSnmpAd.currentCate,
+          },
+        }
+      }
+      if (this.adrType === 'snmp') {
+        params = {
+          extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
+        }
+      }
+      if (this.adrType === 'agent') {
+        const $table = this.$refs.xTable
+        const { fullData: _tableData } = $table.getTableData()
+        const attributes = {}
+        _tableData.forEach((td) => {
+          if (td.attr) {
+            attributes[`${td.name}`] = td.attr
+          }
+        })
+        params = {
+          ...params,
+          attributes,
+        }
+      } else {
+        const _tableData = this.$refs.httpSnmpAd.getTableData()
+        const attributes = {}
+        _tableData.forEach((td) => {
+          if (td.attr) {
+            attributes[`${td.name}`] = td.attr
+          }
+        })
+        params = {
+          ...params,
+          attributes,
+        }
+      }
+      if (this.interval === 'cron') {
+        this.$refs.cronTab.submitFill()
+      }
+      params = {
+        ...params,
+        ...this.form,
+        type_id: this.CITypeId,
+        adr_id: currentAdt.adr_id,
+        interval: this.interval === 'interval' ? this.intervalValue : null,
+        cron: this.interval === 'cron' ? this.cron : null,
+      }
+      if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
+        params.query_expr = ''
+        if (this.agent_type === 'agent_id' && !params.agent_id) {
+          this.$message.error(this.$t('cmdb.ciType.specifyNodesTips'))
+          return
+        }
+      }
+      if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
+        params.agent_id = ''
+        if (this.agent_type === 'query_expr' && !params.query_expr) {
+          this.$message.error(this.$t('cmdb.ciType.selectFromCMDBTips'))
+          return
+        }
+      }
+      if (params.extra_option) {
+        params.extra_option.alias = alias
+      } else {
+        params.extra_option = {}
+        params.extra_option.alias = alias
+      }
+      putCITypeDiscovery(currentAdt.id, params).then((res) => {
+        this.$message.success(this.$t('saveSuccess'))
+        this.$emit('handleSave')
+      })
+    },
+    handleOpenCmdb() {
+      this.$refs.cmdbDrawer.open()
+    },
+    copySuccess(text) {
+      this.form = {
+        ...this.form,
+        query_expr: `${text}`,
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.attr-ad-snmp-form {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
index 6c9bd78..3d2d425 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
@@ -1,278 +1,282 @@
-<template>
-  <div class="attribute-card">
-    <div class="attribute-card-content">
-      <div class="attribute-card-value-type-icon handle" :style="{ ...getPropertyStyle(property) }">
-        <ValueTypeIcon :attr="property" />
-      </div>
-      <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
-        <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
-          {{ property.alias || property.name }}
-        </div>
-        <div v-if="property.is_password" class="attribute-card_value-type">密码</div>
-        <div v-else-if="property.is_link" class="attribute-card_value-type">链接</div>
-        <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
-      </div>
-      <div
-        class="attribute-card-trigger"
-        v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
-      >
-        <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
-      </div>
-    </div>
-    <div class="attribute-card-footer">
-      <a-popover
-        trigger="click"
-        :arrowPointAtCenter="true"
-        placement="bottom"
-        overlayClassName="attribute-card-footer-popover"
-      >
-        <div slot="content">
-          <h3 :style="{ textAlign: 'center', paddingTop: '0.5em' }">
-            <span>{{ property.alias }}({{ property.name }})</span>
-          </h3>
-          <a-descriptions layout="horizontal" bordered size="small" :column="2">
-            <a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label">
-              <components
-                :is="`ops_${item.property}`"
-                v-if="property[item.property]"
-                :style="{ width: '1em', height: '1em' }"
-              />
-              <ops-icon v-else :type="`ops-${item.property}-disabled`" />
-            </a-descriptions-item>
-            <a-descriptions-item label></a-descriptions-item>
-          </a-descriptions>
-        </div>
-        <a-space :style="{ cursor: 'pointer' }">
-          <components
-            v-for="item in propertyList.filter((p) => property[p.property])"
-            :key="item.property"
-            :is="`ops_${item.property}`"
-          />
-        </a-space>
-      </a-popover>
-
-      <a-space class="attribute-card-operation">
-        <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
-        <a-tooltip title="所有CI触发计算">
-          <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
-        </a-tooltip>
-        <a style="color:red;"><a-icon type="delete" @click="handleDelete"/></a>
-      </a-space>
-    </div>
-    <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
-  </div>
-</template>
-
-<script>
-import { deleteCITypeAttributesById, deleteAttributesById, calcComputedAttribute } from '@/modules/cmdb/api/CITypeAttr'
-import ValueTypeIcon from '@/components/CMDBValueTypeMapIcon'
-import {
-  ops_default_show,
-  ops_is_choice,
-  ops_is_index,
-  ops_is_link,
-  ops_is_password,
-  ops_is_sortable,
-  ops_is_unique,
-} from '@/core/icons'
-import { valueTypeMap } from '../../utils/const'
-import { getPropertyStyle } from '../../utils/helper'
-import TriggerForm from './triggerForm.vue'
-export default {
-  name: 'AttributeCard',
-  components: {
-    ValueTypeIcon,
-    TriggerForm,
-    ops_default_show,
-    ops_is_choice,
-    ops_is_index,
-    ops_is_link,
-    ops_is_password,
-    ops_is_sortable,
-    ops_is_unique,
-  },
-  props: {
-    property: {
-      type: Object,
-      default: () => {},
-    },
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-    isStore: {
-      type: Boolean,
-      default: false,
-    },
-    attributes: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    const propertyList = [
-      {
-        label: '是否唯一',
-        property: 'is_unique',
-      },
-      {
-        label: '是否选择',
-        property: 'is_choice',
-      },
-      {
-        label: '默认显示',
-        property: 'default_show',
-      },
-      {
-        label: '可排序',
-        property: 'is_sortable',
-      },
-      {
-        label: '是否索引',
-        property: 'is_index',
-      },
-    ]
-    return {
-      valueTypeMap,
-      propertyList,
-    }
-  },
-  methods: {
-    getPropertyStyle,
-    handleEdit() {
-      this.$emit('edit')
-    },
-    handleDelete() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确认删除 【${that.property.alias || that.property.name}】？`,
-        onOk() {
-          if (that.isStore) {
-            deleteAttributesById(that.property.id).then(() => {
-              that.$message.success('删除成功！')
-              that.$emit('ok')
-            })
-          } else {
-            deleteCITypeAttributesById(that.CITypeId, { attr_id: [that.property.id] }).then(() => {
-              that.$message.success('删除成功！')
-              that.$emit('ok')
-            })
-          }
-        },
-        onCancel() {},
-      })
-    },
-    openTrigger() {
-      this.$refs.triggerForm.open(this.property, this.attributes)
-    },
-    handleCalcComputed() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确认触发所有CI的计算？`,
-        onOk() {
-          calcComputedAttribute(that.property.id).then(() => {
-            that.$message.success('触发成功！')
-          })
-        },
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.attribute-card {
-  width: 182px;
-  height: 80px;
-  background: #f8faff;
-  border-radius: 5px;
-  position: relative;
-  margin-bottom: 16px;
-  transition: all 0.3s;
-  &:hover {
-    box-shadow: 0 4px 12px #4e5ea066;
-    .attribute-card-operation {
-      visibility: visible !important;
-    }
-  }
-  .attribute-card-content {
-    height: 50px;
-    display: inline-flex;
-    align-items: center;
-    padding: 8px;
-    width: 100%;
-    .attribute-card-value-type-icon {
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-      cursor: move;
-      background: #ffffff !important;
-      box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-    }
-    .attribute-card-content-inner {
-      padding-left: 12px;
-      font-weight: 400;
-      font-size: 12px;
-      width: 120px;
-      position: relative;
-      .attribute-card-name {
-        width: 100%;
-        color: rgba(0, 0, 0, 0.8);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .attribute-card-name-default-show {
-        color: #2f54eb;
-      }
-      .attribute-card_value-type {
-        font-size: 10px;
-        color: rgba(0, 0, 0, 0.35);
-      }
-    }
-    .attribute-card-name-required::before {
-      content: '*';
-      width: 5px;
-      color: red;
-      position: absolute;
-      left: 3px;
-    }
-    .attribute-card-trigger {
-      position: absolute;
-      right: 8px;
-      top: 8px;
-    }
-  }
-  .attribute-card-footer {
-    width: 182px;
-    height: 30px;
-    padding: 0 8px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(180deg, #96abd6 0%, #ecf2ff 0.01%, #ffffff 143.33%);
-    border-radius: 0px 0px 5px 5px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    .attribute-card-operation {
-      visibility: hidden;
-    }
-  }
-}
-</style>
-<style lang="less">
-.attribute-card-footer-popover {
-  .ant-popover-inner-content {
-    padding: 0;
-  }
-  .ant-descriptions-bordered .ant-descriptions-item-label {
-    background-color: #f8faff;
-  }
-}
-</style>
+<template>
+  <div class="attribute-card">
+    <div class="attribute-card-content">
+      <div class="attribute-card-value-type-icon handle" :style="{ ...getPropertyStyle(property) }">
+        <ValueTypeIcon :attr="property" />
+      </div>
+      <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
+        <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
+          {{ property.alias || property.name }}
+        </div>
+        <div v-if="property.is_password" class="attribute-card_value-type">{{ $t('cmdb.ciType.password') }}</div>
+        <div v-else-if="property.is_link" class="attribute-card_value-type">{{ $t('cmdb.ciType.link') }}</div>
+        <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
+      </div>
+      <div
+        class="attribute-card-trigger"
+        v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
+      >
+        <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
+      </div>
+    </div>
+    <div class="attribute-card-footer">
+      <a-popover
+        trigger="click"
+        :arrowPointAtCenter="true"
+        placement="bottom"
+        overlayClassName="attribute-card-footer-popover"
+      >
+        <div slot="content">
+          <h3 :style="{ textAlign: 'center', paddingTop: '0.5em' }">
+            <span>{{ property.alias }}({{ property.name }})</span>
+          </h3>
+          <a-descriptions layout="horizontal" bordered size="small" :column="2">
+            <a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label">
+              <components
+                :is="`ops_${item.property}`"
+                v-if="property[item.property]"
+                :style="{ width: '1em', height: '1em' }"
+              />
+              <ops-icon v-else :type="`ops-${item.property}-disabled`" />
+            </a-descriptions-item>
+            <a-descriptions-item label></a-descriptions-item>
+          </a-descriptions>
+        </div>
+        <a-space :style="{ cursor: 'pointer' }">
+          <components
+            v-for="item in propertyList.filter((p) => property[p.property])"
+            :key="item.property"
+            :is="`ops_${item.property}`"
+          />
+        </a-space>
+      </a-popover>
+
+      <a-space class="attribute-card-operation">
+        <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
+        <a-tooltip :title="$t('cmdb.ciType.computeForAllCITips')">
+          <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
+        </a-tooltip>
+        <a style="color:red;"><a-icon type="delete" @click="handleDelete"/></a>
+      </a-space>
+    </div>
+    <TriggerForm ref="triggerForm" :CITypeId="CITypeId" />
+  </div>
+</template>
+
+<script>
+import { deleteCITypeAttributesById, deleteAttributesById, calcComputedAttribute } from '@/modules/cmdb/api/CITypeAttr'
+import ValueTypeIcon from '@/components/CMDBValueTypeMapIcon'
+import {
+  ops_default_show,
+  ops_is_choice,
+  ops_is_index,
+  ops_is_link,
+  ops_is_password,
+  ops_is_sortable,
+  ops_is_unique,
+} from '@/core/icons'
+import { valueTypeMap } from '../../utils/const'
+import { getPropertyStyle } from '../../utils/helper'
+import TriggerForm from './triggerForm.vue'
+export default {
+  name: 'AttributeCard',
+  components: {
+    ValueTypeIcon,
+    TriggerForm,
+    ops_default_show,
+    ops_is_choice,
+    ops_is_index,
+    ops_is_link,
+    ops_is_password,
+    ops_is_sortable,
+    ops_is_unique,
+  },
+  props: {
+    property: {
+      type: Object,
+      default: () => {},
+    },
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+    isStore: {
+      type: Boolean,
+      default: false,
+    },
+    attributes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+    propertyList() {
+      return [
+        {
+          label: this.$t('cmdb.ciType.isUnique'),
+          property: 'is_unique',
+        },
+        {
+          label: this.$t('cmdb.ciType.isChoice'),
+          property: 'is_choice',
+        },
+        {
+          label: this.$t('cmdb.ciType.defaultShow'),
+          property: 'default_show',
+        },
+        {
+          label: this.$t('cmdb.ciType.isSortable'),
+          property: 'is_sortable',
+        },
+        {
+          label: this.$t('cmdb.ciType.isIndex'),
+          property: 'is_index',
+        },
+      ]
+    },
+  },
+  methods: {
+    getPropertyStyle,
+    handleEdit() {
+      this.$emit('edit')
+    },
+    handleDelete() {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDelete', { name: `${that.property.alias || that.property.name}` }),
+        onOk() {
+          if (that.isStore) {
+            deleteAttributesById(that.property.id).then(() => {
+              that.$message.success(that.$t('deleteSuccess'))
+              that.$emit('ok')
+            })
+          } else {
+            deleteCITypeAttributesById(that.CITypeId, { attr_id: [that.property.id] }).then(() => {
+              that.$message.success(that.$t('deleteSuccess'))
+              that.$emit('ok')
+            })
+          }
+        },
+        onCancel() {},
+      })
+    },
+    openTrigger() {
+      this.$refs.triggerForm.open(this.property, this.attributes)
+    },
+    handleCalcComputed() {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmcomputeForAllCITips'),
+        onOk() {
+          calcComputedAttribute(that.property.id).then(() => {
+            that.$message.success(that.$t('cmdb.ciType.computeSuccess'))
+          })
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.attribute-card {
+  width: 182px;
+  height: 80px;
+  background: #f8faff;
+  border-radius: 5px;
+  position: relative;
+  margin-bottom: 16px;
+  transition: all 0.3s;
+  &:hover {
+    box-shadow: 0 4px 12px #4e5ea066;
+    .attribute-card-operation {
+      visibility: visible !important;
+    }
+  }
+  .attribute-card-content {
+    height: 50px;
+    display: inline-flex;
+    align-items: center;
+    padding: 8px;
+    width: 100%;
+    .attribute-card-value-type-icon {
+      width: 32px;
+      height: 32px;
+      font-size: 12px;
+      cursor: move;
+      background: #ffffff !important;
+      box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
+      border-radius: 2px;
+      text-align: center;
+      line-height: 32px;
+    }
+    .attribute-card-content-inner {
+      padding-left: 12px;
+      font-weight: 400;
+      font-size: 12px;
+      width: 120px;
+      position: relative;
+      .attribute-card-name {
+        width: 100%;
+        color: rgba(0, 0, 0, 0.8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .attribute-card-name-default-show {
+        color: #2f54eb;
+      }
+      .attribute-card_value-type {
+        font-size: 10px;
+        color: rgba(0, 0, 0, 0.35);
+      }
+    }
+    .attribute-card-name-required::before {
+      content: '*';
+      width: 5px;
+      color: red;
+      position: absolute;
+      left: 3px;
+    }
+    .attribute-card-trigger {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+    }
+  }
+  .attribute-card-footer {
+    width: 182px;
+    height: 30px;
+    padding: 0 8px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(180deg, #96abd6 0%, #ecf2ff 0.01%, #ffffff 143.33%);
+    border-radius: 0px 0px 5px 5px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    .attribute-card-operation {
+      visibility: hidden;
+    }
+  }
+}
+</style>
+<style lang="less">
+.attribute-card-footer-popover {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+  .ant-descriptions-bordered .ant-descriptions-item-label {
+    background-color: #f8faff;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue
index c650e91..7db4c35 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue
@@ -1,715 +1,717 @@
-<template>
-  <CustomDrawer
-    :closable="true"
-    :title="drawerTitle"
-    :visible="drawerVisible"
-    @close="onClose"
-    placement="right"
-    width="800"
-    :bodyStyle="{ paddingTop: 0 }"
-    :headerStyle="{ borderBottom: 'none' }"
-    wrapClassName="attribute-edit-form"
-  >
-    <a-form :form="form" :layout="formLayout">
-      <a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider>
-      <a-col :span="12">
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="属性名(英文)">
-          <a-input
-            :disabled="true"
-            name="name"
-            placeholder="英文"
-            v-decorator="[
-              'name',
-              {
-                rules: [
-                  { required: true, message: '请输入属性名' },
-                  {
-                    message: '不能以数字开头，可以是英文 数字以及下划线 (_)',
-                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
-                  },
-                ],
-              },
-            ]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col
-        :span="12"
-      ><a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="别名">
-        <a-input name="alias" v-decorator="['alias', { rules: [] }]" /> </a-form-item
-      ></a-col>
-      <a-col
-        :span="12"
-      ><a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="数据类型">
-        <a-select
-          :disabled="true"
-          name="value_type"
-          style="width: 100%"
-          v-decorator="['value_type', { rules: [{ required: true }] }]"
-          @change="handleChangeValueType"
-        >
-          <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">{{ value }}</a-select-option>
-        </a-select>
-      </a-form-item></a-col
-      >
-      <a-col :span="currentValueType === '6' ? 24 : 12">
-        <a-form-item
-          :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
-          :wrapper-col="{ span: currentValueType === '6' ? 18 : 12 }"
-          label="默认值"
-        >
-          <template>
-            <a-select
-              v-if="form.getFieldValue('is_list')"
-              mode="tags"
-              :style="{ width: '100%' }"
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-select>
-            <a-select
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-              mode="tags"
-              v-else-if="currentValueType === '0'"
-              @select="selectIntDefaultValue"
-            >
-              <a-select-option key="$auto_inc_id">
-                自增ID
-              </a-select-option>
-            </a-select>
-            <a-input-number
-              style="width: 100%"
-              v-else-if="currentValueType === '1'"
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-input-number>
-            <a-input
-              style="width: 100%"
-              v-else-if="
-                currentValueType === '2' ||
-                  currentValueType === '5' ||
-                  currentValueType === '7' ||
-                  currentValueType === '8'
-              "
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-input>
-            <a-select
-              allowClear
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-              v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
-              @select="changeDefaultForDatetime"
-            >
-              <a-select-option key="$created_at">
-                创建时间
-              </a-select-option>
-              <a-select-option key="$updated_at">
-                更新时间
-              </a-select-option>
-              <a-select-option key="$custom_time">
-                自定义时间
-              </a-select-option>
-            </a-select>
-            <template v-else-if="currentValueType === '4' || currentValueType === '3'">
-              <a-date-picker
-                style="width: 100%"
-                v-decorator="['default_value', { rules: [{ required: false }] }]"
-                :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-                :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
-              />
-              <a-dropdown
-                :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
-                :trigger="['click']"
-                v-if="currentValueType === '3'"
-              >
-                <a><a-icon type="down" /> </a>
-                <a-menu slot="overlay" @click="onClick">
-                  <a-menu-item key="$created_at">
-                    <a>创建时间</a>
-                  </a-menu-item>
-                  <a-menu-item key="$updated_at">
-                    <a>更新时间</a>
-                  </a-menu-item>
-                </a-menu>
-              </a-dropdown>
-            </template>
-            <vue-json-editor
-              v-else-if="currentValueType === '6'"
-              :style="{ '--custom-height': `${200}px` }"
-              v-model="default_value_json"
-              :showBtns="false"
-              :mode="'code'"
-              lang="zh"
-              @json-change="onJsonChange"
-              @has-error="onJsonError"
-            />
-          </template>
-        </a-form-item>
-      </a-col>
-
-      <a-col :span="6">
-        <a-form-item
-          :label-col="horizontalFormItemLayout.labelCol"
-          :wrapper-col="horizontalFormItemLayout.wrapperCol"
-          label="必须"
-        >
-          <a-switch
-            @change="(checked) => onChange(checked, 'is_required')"
-            name="is_required"
-            v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-        <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一">
-          <a-switch
-            :disabled="isShowComputedArea"
-            @change="onChange"
-            name="is_unique"
-            v-decorator="['is_unique', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col :span="currentValueType === '2' ? 6 : 0" v-if="currentValueType !== '6'">
-        <a-form-item
-          :hidden="currentValueType === '2' ? false : true"
-          :label-col="horizontalFormItemLayout.labelCol"
-          :wrapper-col="horizontalFormItemLayout.wrapperCol"
-        >
-          <template slot="label">
-            <span
-              style="position:relative;white-space:pre;"
-            >{{ `索引` }}
-              <a-tooltip title="字段可被用于检索，加速查询">
-                <a-icon
-                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                  type="question-circle"
-                  theme="filled"
-                  @click="
-                    (e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                    }
-                  "
-                />
-              </a-tooltip>
-            </span>
-          </template>
-          <a-switch
-            :disabled="isShowComputedArea"
-            @change="onChange"
-            name="is_index"
-            v-decorator="['is_index', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col :span="6">
-        <a-form-item
-          :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
-          :wrapper-col="horizontalFormItemLayout.wrapperCol"
-        >
-          <template slot="label">
-            <span
-              style="position:relative;white-space:pre;"
-            >{{ `显示` }}
-              <a-tooltip title="CI实例表格默认展示该字段">
-                <a-icon
-                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                  type="question-circle"
-                  theme="filled"
-                  @click="
-                    (e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                    }
-                  "
-                />
-              </a-tooltip>
-            </span>
-          </template>
-          <a-switch
-            @change="onChange"
-            name="default_show"
-            v-decorator="['default_show', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-        <a-form-item
-          :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
-          :wrapper-col="horizontalFormItemLayout.wrapperCol"
-          label="排序"
-        >
-          <a-switch
-            :disabled="isShowComputedArea"
-            @change="(checked) => onChange(checked, 'is_sortable')"
-            name="is_sortable"
-            v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-
-      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-        <a-form-item
-          :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
-          :wrapper-col="horizontalFormItemLayout.wrapperCol"
-        >
-          <template slot="label">
-            <span
-              style="position:relative;white-space:pre;"
-            >{{ `多值` }}
-              <a-tooltip title="字段的值是1个或者多个，接口返回的值的类型是list">
-                <a-icon
-                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                  type="question-circle"
-                  theme="filled"
-                  @click="
-                    (e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                    }
-                  "
-                />
-              </a-tooltip>
-            </span>
-          </template>
-          <a-switch
-            :disabled="true || isShowComputedArea"
-            @change="(checked) => onChange(checked, 'is_list')"
-            name="is_list"
-            v-decorator="['is_list', { rules: [], valuePropName: 'checked' }]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider>
-      <a-row>
-        <a-col :span="24">
-          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="字体">
-            <FontArea ref="fontArea" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
-          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值">
-            <PreValueArea
-              v-if="drawerVisible"
-              :canDefineScript="canDefineScript"
-              ref="preValueArea"
-              :disabled="isShowComputedArea"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
-          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-            <template slot="label">
-              <span
-                style="position:relative;white-space:pre;"
-              >{{ `计算属性` }}
-                <a-tooltip
-                  :title="
-                    `该属性的值是通过模型的其它属性构建的表达式或者执行一段代码的方式计算而来，属性的引用方法为: {{ 属性名 }}`
-                  "
-                >
-                  <a-icon
-                    style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                    type="question-circle"
-                    theme="filled"
-                    @click="
-                      (e) => {
-                        e.stopPropagation()
-                        e.preventDefault()
-                      }
-                    "
-                  />
-                </a-tooltip>
-              </span>
-            </template>
-            <a-switch
-              :disabled="!canDefineComputed"
-              @change="(checked) => onChange(checked, 'is_computed')"
-              name="is_computed"
-              v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
-            />
-            <ComputedArea
-              showCalcComputed
-              ref="computedArea"
-              v-show="isShowComputedArea"
-              @handleCalcComputed="handleCalcComputed"
-              :canDefineComputed="canDefineComputed"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-form-item>
-        <a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
-      </a-form-item>
-      <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit(false)" type="primary">确定</a-button>
-      </div>
-    </a-form>
-  </CustomDrawer>
-</template>
-
-<script>
-import _ from 'lodash'
-import moment from 'moment'
-import vueJsonEditor from 'vue-json-editor'
-import {
-  updateAttributeById,
-  updateCITypeAttributesById,
-  canDefineComputed,
-  calcComputedAttribute,
-} from '@/modules/cmdb/api/CITypeAttr'
-import { valueTypeMap } from '../../utils/const'
-import ComputedArea from './computedArea.vue'
-import PreValueArea from './preValueArea.vue'
-import FontArea from './fontArea.vue'
-
-export default {
-  name: 'AttributeEditForm',
-  components: { ComputedArea, PreValueArea, vueJsonEditor, FontArea },
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-    CITypeName: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      valueTypeMap,
-      drawerTitle: '新增属性',
-      drawerVisible: false,
-
-      formLayout: 'horizontal',
-
-      record: {},
-
-      currentValueType: '0',
-      default_value_json: {},
-      default_value_json_right: true, // 当前json是否正确
-
-      canDefineComputed: false,
-      isShowComputedArea: false,
-
-      defaultForDatetime: '',
-    }
-  },
-
-  beforeCreate() {
-    this.form = this.$form.createForm(this)
-  },
-
-  computed: {
-    formItemLayout() {
-      const { formLayout } = this
-      return formLayout === 'horizontal'
-        ? {
-            labelCol: { span: 8 },
-            wrapperCol: { span: 12 },
-          }
-        : {}
-    },
-
-    horizontalFormItemLayout() {
-      return {
-        labelCol: { span: 16 },
-        wrapperCol: { span: 4 },
-      }
-    },
-    canDefineScript() {
-      return this.canDefineComputed
-    },
-  },
-  mounted() {},
-  methods: {
-    async handleCreate() {
-      try {
-        await canDefineComputed()
-        this.canDefineComputed = true
-      } catch {
-        this.canDefineComputed = false
-      }
-
-      this.drawerTitle = '新增属性'
-      this.drawerVisible = true
-    },
-    onClose() {
-      this.form.resetFields()
-      this.drawerVisible = false
-    },
-    onChange(checked, property) {
-      if (property === 'is_computed') {
-        this.isShowComputedArea = checked
-        if (checked) {
-          this.form.setFieldsValue({
-            is_list: false,
-            is_unique: false,
-            is_sortable: false,
-          })
-          if (this.currentValueType === '2') {
-            this.form.setFieldsValue({
-              is_index: true,
-            })
-          }
-        }
-      }
-      if (property === 'is_list') {
-        this.form.setFieldsValue({
-          default_value: checked ? [] : '',
-        })
-      }
-      if (checked && property === 'is_sortable') {
-        this.$message.warning('选中排序，则必须也要选中！')
-        this.form.setFieldsValue({
-          is_required: true,
-        })
-      }
-      if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
-        this.$message.warning('选中排序，则必须也要选中！')
-        this.$nextTick(() => {
-          this.form.setFieldsValue({
-            is_required: true,
-          })
-        })
-      }
-    },
-
-    async handleEdit(record, attributes) {
-      try {
-        await canDefineComputed()
-        this.canDefineComputed = true
-      } catch {
-        this.canDefineComputed = false
-      }
-      const _record = _.cloneDeep(record)
-      if (_record.is_password) {
-        _record.value_type = '7'
-      }
-      if (_record.is_link) {
-        _record.value_type = '8'
-      }
-      this.drawerTitle = '编辑属性'
-      this.drawerVisible = true
-      this.record = _record
-      this.currentValueType = _record.value_type
-      this.$nextTick(() => {
-        this.form.setFieldsValue({
-          id: _record.id,
-          alias: _record.alias,
-          name: _record.name,
-          value_type: _record.value_type,
-          is_required: _record.is_required,
-          default_show: _record.default_show,
-        })
-        if (!['6', '7'].includes(_record.value_type)) {
-          this.form.setFieldsValue({
-            is_list: _record.is_list,
-            is_unique: _record.is_unique,
-            is_index: _record.is_index,
-            is_sortable: _record.is_sortable,
-            is_computed: _record.is_computed,
-          })
-        }
-        console.log(_record)
-        if (_record.default) {
-          this.$nextTick(() => {
-            if (_record.value_type === '0') {
-              this.form.setFieldsValue({
-                default_value: _record.default.default ? [_record.default.default] : [],
-              })
-            } else if (_record.value_type === '6') {
-              this.default_value_json = _record?.default?.default || null
-            } else if (_record.value_type === '3' || _record.value_type === '4') {
-              if (_record?.default?.default === '$created_at' || _record?.default?.default === '$updated_at') {
-                this.defaultForDatetime = _record.default.default
-                this.form.setFieldsValue({
-                  default_value: _record?.default?.default,
-                })
-              } else {
-                this.defaultForDatetime = '$custom_time'
-                this.form.setFieldsValue({
-                  default_value: _record.default && _record.default.default ? moment(_record.default.default) : null,
-                })
-              }
-            } else {
-              this.$nextTick(() => {
-                this.form.setFieldsValue({
-                  default_value: _record.default && _record.default.default ? _record.default.default : null,
-                })
-              })
-            }
-          })
-        } else {
-          this.default_value_json = {}
-          if (_record.value_type === '0') {
-            this.form.setFieldsValue({
-              default_value: [],
-            })
-          } else if (_record.value_type !== '6') {
-            this.form.setFieldsValue({
-              default_value: null,
-            })
-          }
-        }
-        this.isShowComputedArea = _record.is_computed
-        if (_record.is_computed) {
-          this.$nextTick(() => {
-            this.$refs.computedArea.setData({
-              compute_expr: _record.compute_expr,
-              compute_script: _record.compute_script,
-            })
-          })
-        }
-        const _find = attributes.find((item) => item.id === _record.id)
-        if (!['6', '7'].includes(_record.value_type)) {
-          this.$refs.preValueArea.setData({
-            choice_value: (_find || {}).choice_value || [],
-            choice_web_hook: _record.choice_web_hook,
-            choice_other: _record.choice_other || undefined,
-          })
-        }
-        this.$refs.fontArea.setData({
-          fontOptions: _find?.option?.fontOptions || {},
-        })
-      })
-    },
-
-    async handleSubmit(isCalcComputed = false) {
-      await this.form.validateFields(async (err, values) => {
-        if (!err) {
-          console.log('Received values of form: ', values)
-
-          if (this.record.is_required !== values.is_required || this.record.default_show !== values.default_show) {
-            console.log('changed is_required')
-            await updateCITypeAttributesById(this.CITypeId, {
-              attributes: [
-                { attr_id: this.record.id, is_required: values.is_required, default_show: values.default_show },
-              ],
-            })
-          }
-
-          delete values['default_show']
-          delete values['is_required']
-          const { default_value } = values
-          if (values.value_type === '0' && default_value) {
-            values.default = { default: default_value[0] || null }
-          } else if (values.value_type === '6') {
-            if (this.default_value_json_right) {
-              values.default = { default: this.default_value_json }
-            } else {
-              values.default = { default: null }
-            }
-          } else if (default_value || default_value === 0) {
-            if (values.value_type === '3') {
-              if (default_value === '$created_at' || default_value === '$updated_at') {
-                values.default = { default: default_value }
-              } else {
-                values.default = { default: moment(default_value).format('YYYY-MM-DD HH:mm:ss') }
-              }
-            } else if (values.value_type === '4') {
-              values.default = { default: moment(default_value).format('YYYY-MM-DD') }
-            } else {
-              values.default = { default: default_value }
-            }
-          } else {
-            values.default = { default: null }
-          }
-
-          delete values.default_value
-          if (values.is_computed) {
-            const computedAreaData = this.$refs.computedArea.getData()
-            values = { ...values, ...computedAreaData }
-          } else {
-            // 如果是非计算属性，就看看有没有预定义值
-            if (!['6', '7'].includes(values.value_type)) {
-              const preValueAreaData = this.$refs.preValueArea.getData()
-              values = { ...values, ...preValueAreaData }
-            }
-          }
-          const fontOptions = this.$refs.fontArea.getData()
-          if (values.value_type === '7') {
-            values.value_type = '2'
-            values.is_password = true
-          }
-          if (values.value_type === '8') {
-            values.value_type = '2'
-            values.is_link = true
-          }
-          if (values.id) {
-            await this.updateAttribute(values.id, { ...values, option: { fontOptions } }, isCalcComputed)
-          } else {
-            // this.createAttribute(values)
-          }
-        }
-      })
-    },
-    async updateAttribute(attrId, data, isCalcComputed = false) {
-      await updateAttributeById(attrId, data)
-      if (isCalcComputed) {
-        await calcComputedAttribute(attrId)
-      }
-      this.$message.success(`更新成功`)
-      this.handleOk()
-      this.onClose()
-    },
-    handleOk() {
-      this.$emit('ok')
-    },
-    handleChangeValueType(value) {
-      this.currentValueType = value
-      this.$nextTick(() => {
-        this.form.setFieldsValue({
-          default_value: this.form.getFieldValue('is_list') ? [] : null,
-        })
-      })
-    },
-    onJsonChange(value) {
-      this.default_value_json_right = true
-    },
-    onJsonError() {
-      this.default_value_json_right = false
-    },
-    selectIntDefaultValue(value) {
-      this.form.setFieldsValue({
-        default_value: [value],
-      })
-    },
-    changeDefaultForDatetime(value) {
-      this.defaultForDatetime = value
-      if (value === '$custom_time') {
-        this.form.setFieldsValue({
-          default_value: undefined,
-        })
-      }
-    },
-    onClick({ key }) {
-      console.log(key)
-      this.defaultForDatetime = key
-      this.form.setFieldsValue({
-        default_value: key,
-      })
-    },
-    async handleCalcComputed() {
-      await this.handleSubmit(true)
-    },
-  },
-  watch: {},
-}
-</script>
-
-<style lang="less" scoped></style>
-<style lang="less">
-.attribute-edit-form {
-  .jsoneditor-outer {
-    height: var(--custom-height) !important;
-    border: 1px solid #2f54eb;
-  }
-  div.jsoneditor-menu {
-    background-color: #2f54eb;
-  }
-}
-</style>
+<template>
+  <CustomDrawer
+    :closable="true"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="800"
+    :bodyStyle="{ paddingTop: 0 }"
+    :headerStyle="{ borderBottom: 'none' }"
+    wrapClassName="attribute-edit-form"
+  >
+    <a-form :form="form" :layout="formLayout">
+      <a-divider style="font-size:14px;margin-top:6px;">{{ $t('cmdb.ciType.basicConfig') }}</a-divider>
+      <a-col :span="12">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('cmdb.ciType.AttributeName')">
+          <a-input
+            :disabled="true"
+            name="name"
+            :placeholder="$t('cmdb.ciType.English')"
+            v-decorator="[
+              'name',
+              {
+                rules: [
+                  { required: true, message: $t('cmdb.ciType.inputAttributeName') },
+                  {
+                    message: $t('cmdb.ciType.attributeNameTips'),
+                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
+                  },
+                ],
+              },
+            ]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        :span="12"
+      ><a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('alias')">
+        <a-input name="alias" v-decorator="['alias', { rules: [] }]" /> </a-form-item
+      ></a-col>
+      <a-col
+        :span="12"
+      ><a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('cmdb.ciType.DataType')">
+        <a-select
+          :disabled="true"
+          name="value_type"
+          style="width: 100%"
+          v-decorator="['value_type', { rules: [{ required: true }] }]"
+          @change="handleChangeValueType"
+        >
+          <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">{{ value }}</a-select-option>
+        </a-select>
+      </a-form-item></a-col
+      >
+      <a-col :span="currentValueType === '6' ? 24 : 12">
+        <a-form-item
+          :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
+          :wrapper-col="{ span: currentValueType === '6' ? 18 : 12 }"
+          :label="$t('cmdb.ciType.defaultValue')"
+        >
+          <template>
+            <a-select
+              v-if="form.getFieldValue('is_list')"
+              mode="tags"
+              :style="{ width: '100%' }"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-select>
+            <a-select
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              mode="tags"
+              v-else-if="currentValueType === '0'"
+              @select="selectIntDefaultValue"
+            >
+              <a-select-option key="$auto_inc_id">
+                {{ $t('cmdb.ciType.autoIncID') }}
+              </a-select-option>
+            </a-select>
+            <a-input-number
+              style="width: 100%"
+              v-else-if="currentValueType === '1'"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input-number>
+            <a-input
+              style="width: 100%"
+              v-else-if="
+                currentValueType === '2' ||
+                  currentValueType === '5' ||
+                  currentValueType === '7' ||
+                  currentValueType === '8'
+              "
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input>
+            <a-select
+              allowClear
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
+              @select="changeDefaultForDatetime"
+            >
+              <a-select-option key="$created_at">
+                {{ $t('createdAt') }}
+              </a-select-option>
+              <a-select-option key="$updated_at">
+                {{ $t('updatedAt') }}
+              </a-select-option>
+              <a-select-option key="$custom_time">
+                {{ $t('cmdb.ciType.customTime') }}
+              </a-select-option>
+            </a-select>
+            <template v-else-if="currentValueType === '4' || currentValueType === '3'">
+              <a-date-picker
+                style="width: 100%"
+                v-decorator="['default_value', { rules: [{ required: false }] }]"
+                :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
+              />
+              <a-dropdown
+                :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
+                :trigger="['click']"
+                v-if="currentValueType === '3'"
+              >
+                <a><a-icon type="down" /> </a>
+                <a-menu slot="overlay" @click="onClick">
+                  <a-menu-item key="$created_at">
+                    <a>{{ $t('createdAt') }}</a>
+                  </a-menu-item>
+                  <a-menu-item key="$updated_at">
+                    <a>{{ $t('updatedAt') }}</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+            <vue-json-editor
+              v-else-if="currentValueType === '6'"
+              :style="{ '--custom-height': `${200}px` }"
+              v-model="default_value_json"
+              :showBtns="false"
+              :mode="'code'"
+              lang="zh"
+              @json-change="onJsonChange"
+              @has-error="onJsonError"
+            />
+          </template>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="6">
+        <a-form-item
+          :label-col="horizontalFormItemLayout.labelCol"
+          :wrapper-col="horizontalFormItemLayout.wrapperCol"
+          :label="$t('required')"
+        >
+          <a-switch
+            @change="(checked) => onChange(checked, 'is_required')"
+            name="is_required"
+            v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+        <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" :label="$t('cmdb.ciType.unique')">
+          <a-switch
+            :disabled="isShowComputedArea"
+            @change="onChange"
+            name="is_unique"
+            v-decorator="['is_unique', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="currentValueType === '2' ? 6 : 0" v-if="currentValueType !== '6'">
+        <a-form-item
+          :hidden="currentValueType === '2' ? false : true"
+          :label-col="horizontalFormItemLayout.labelCol"
+          :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        >
+          <template slot="label">
+            <span
+              style="position:relative;white-space:pre;"
+            >{{ $t('cmdb.ciType.index') }}
+              <a-tooltip :title="$t('cmdb.ciType.indexTips')">
+                <a-icon
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                  type="question-circle"
+                  theme="filled"
+                  @click="
+                    (e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                    }
+                  "
+                />
+              </a-tooltip>
+            </span>
+          </template>
+          <a-switch
+            :disabled="isShowComputedArea"
+            @change="onChange"
+            name="is_index"
+            v-decorator="['is_index', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="6">
+        <a-form-item
+          :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
+          :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        >
+          <template slot="label">
+            <span
+              style="position:relative;white-space:pre;"
+            >{{ $t('cmdb.ciType.defaultShow') }}
+              <a-tooltip :title="$t('cmdb.ciType.defaultShowTips')">
+                <a-icon
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                  type="question-circle"
+                  theme="filled"
+                  @click="
+                    (e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                    }
+                  "
+                />
+              </a-tooltip>
+            </span>
+          </template>
+          <a-switch
+            @change="onChange"
+            name="default_show"
+            v-decorator="['default_show', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+        <a-form-item
+          :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
+          :wrapper-col="horizontalFormItemLayout.wrapperCol"
+          :label="$t('cmdb.ciType.isSortable')"
+        >
+          <a-switch
+            :disabled="isShowComputedArea"
+            @change="(checked) => onChange(checked, 'is_sortable')"
+            name="is_sortable"
+            v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+        <a-form-item
+          :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
+          :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        >
+          <template slot="label">
+            <span
+              style="position:relative;white-space:pre;"
+            >{{ $t('cmdb.ciType.list') }}
+              <a-tooltip :title="$t('cmdb.ciType.listTips')">
+                <a-icon
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                  type="question-circle"
+                  theme="filled"
+                  @click="
+                    (e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                    }
+                  "
+                />
+              </a-tooltip>
+            </span>
+          </template>
+          <a-switch
+            :disabled="true || isShowComputedArea"
+            @change="(checked) => onChange(checked, 'is_list')"
+            name="is_list"
+            v-decorator="['is_list', { rules: [], valuePropName: 'checked' }]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-divider style="font-size:14px;margin-top:6px;">{{ $t('cmdb.ciType.advancedSettings') }}</a-divider>
+      <a-row>
+        <a-col :span="24">
+          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :label="$t('cmdb.ciType.font')">
+            <FontArea ref="fontArea" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
+          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :label="$t('cmdb.ciType.choiceValue')">
+            <PreValueArea
+              v-if="drawerVisible"
+              :canDefineScript="canDefineScript"
+              ref="preValueArea"
+              :disabled="isShowComputedArea"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
+          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+            <template slot="label">
+              <span
+                style="position:relative;white-space:pre;"
+              >{{ $t('cmdb.ciType.computedAttribute') }}
+                <a-tooltip
+                  :title="
+                    $t('cmdb.ciType.computedAttributeTips')
+                  "
+                >
+                  <a-icon
+                    style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                    type="question-circle"
+                    theme="filled"
+                    @click="
+                      (e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
+                      }
+                    "
+                  />
+                </a-tooltip>
+              </span>
+            </template>
+            <a-switch
+              :disabled="!canDefineComputed"
+              @change="(checked) => onChange(checked, 'is_computed')"
+              name="is_computed"
+              v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
+            />
+            <ComputedArea
+              showCalcComputed
+              ref="computedArea"
+              v-show="isShowComputedArea"
+              @handleCalcComputed="handleCalcComputed"
+              :canDefineComputed="canDefineComputed"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item>
+        <a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
+      </a-form-item>
+      <div class="custom-drawer-bottom-action">
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit(false)" type="primary">{{ $t('confirm') }}</a-button>
+      </div>
+    </a-form>
+  </CustomDrawer>
+</template>
+
+<script>
+import _ from 'lodash'
+import moment from 'moment'
+import vueJsonEditor from 'vue-json-editor'
+import {
+  updateAttributeById,
+  updateCITypeAttributesById,
+  canDefineComputed,
+  calcComputedAttribute,
+} from '@/modules/cmdb/api/CITypeAttr'
+import { valueTypeMap } from '../../utils/const'
+import ComputedArea from './computedArea.vue'
+import PreValueArea from './preValueArea.vue'
+import FontArea from './fontArea.vue'
+
+export default {
+  name: 'AttributeEditForm',
+  components: { ComputedArea, PreValueArea, vueJsonEditor, FontArea },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+    CITypeName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      drawerTitle: this.$t('cmdb.ciType.addAttribute'),
+      drawerVisible: false,
+
+      formLayout: 'horizontal',
+
+      record: {},
+
+      currentValueType: '0',
+      default_value_json: {},
+      default_value_json_right: true, // Is the current json correct?
+
+      canDefineComputed: false,
+      isShowComputedArea: false,
+
+      defaultForDatetime: '',
+    }
+  },
+
+  beforeCreate() {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+    formItemLayout() {
+      const { formLayout } = this
+      return formLayout === 'horizontal'
+        ? {
+            labelCol: { span: 8 },
+            wrapperCol: { span: 12 },
+          }
+        : {}
+    },
+
+    horizontalFormItemLayout() {
+      return {
+        labelCol: { span: 16 },
+        wrapperCol: { span: 4 },
+      }
+    },
+    canDefineScript() {
+      return this.canDefineComputed
+    },
+  },
+  mounted() {},
+  methods: {
+    async handleCreate() {
+      try {
+        await canDefineComputed()
+        this.canDefineComputed = true
+      } catch {
+        this.canDefineComputed = false
+      }
+
+      this.drawerTitle = this.$t('cmdb.ciType.addAttribute')
+      this.drawerVisible = true
+    },
+    onClose() {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange(checked, property) {
+      if (property === 'is_computed') {
+        this.isShowComputedArea = checked
+        if (checked) {
+          this.form.setFieldsValue({
+            is_list: false,
+            is_unique: false,
+            is_sortable: false,
+          })
+          if (this.currentValueType === '2') {
+            this.form.setFieldsValue({
+              is_index: true,
+            })
+          }
+        }
+      }
+      if (property === 'is_list') {
+        this.form.setFieldsValue({
+          default_value: checked ? [] : '',
+        })
+      }
+      if (checked && property === 'is_sortable') {
+        this.$message.warning(this.$t('cmdb.ciType.addAttributeTips1'))
+        this.form.setFieldsValue({
+          is_required: true,
+        })
+      }
+      if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
+        this.$message.warning(this.$t('cmdb.ciType.addAttributeTips1'))
+        this.$nextTick(() => {
+          this.form.setFieldsValue({
+            is_required: true,
+          })
+        })
+      }
+    },
+
+    async handleEdit(record, attributes) {
+      try {
+        await canDefineComputed()
+        this.canDefineComputed = true
+      } catch {
+        this.canDefineComputed = false
+      }
+      const _record = _.cloneDeep(record)
+      if (_record.is_password) {
+        _record.value_type = '7'
+      }
+      if (_record.is_link) {
+        _record.value_type = '8'
+      }
+      this.drawerTitle = this.$t('cmdb.ciType.editAttribute')
+      this.drawerVisible = true
+      this.record = _record
+      this.currentValueType = _record.value_type
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: _record.id,
+          alias: _record.alias,
+          name: _record.name,
+          value_type: _record.value_type,
+          is_required: _record.is_required,
+          default_show: _record.default_show,
+        })
+        if (!['6', '7'].includes(_record.value_type)) {
+          this.form.setFieldsValue({
+            is_list: _record.is_list,
+            is_unique: _record.is_unique,
+            is_index: _record.is_index,
+            is_sortable: _record.is_sortable,
+            is_computed: _record.is_computed,
+          })
+        }
+        console.log(_record)
+        if (_record.default) {
+          this.$nextTick(() => {
+            if (_record.value_type === '0') {
+              this.form.setFieldsValue({
+                default_value: _record.default.default ? [_record.default.default] : [],
+              })
+            } else if (_record.value_type === '6') {
+              this.default_value_json = _record?.default?.default || null
+            } else if (_record.value_type === '3' || _record.value_type === '4') {
+              if (_record?.default?.default === '$created_at' || _record?.default?.default === '$updated_at') {
+                this.defaultForDatetime = _record.default.default
+                this.form.setFieldsValue({
+                  default_value: _record?.default?.default,
+                })
+              } else {
+                this.defaultForDatetime = '$custom_time'
+                this.form.setFieldsValue({
+                  default_value: _record.default && _record.default.default ? moment(_record.default.default) : null,
+                })
+              }
+            } else {
+              this.$nextTick(() => {
+                this.form.setFieldsValue({
+                  default_value: _record.default && _record.default.default ? _record.default.default : null,
+                })
+              })
+            }
+          })
+        } else {
+          this.default_value_json = {}
+          if (_record.value_type === '0') {
+            this.form.setFieldsValue({
+              default_value: [],
+            })
+          } else if (_record.value_type !== '6') {
+            this.form.setFieldsValue({
+              default_value: null,
+            })
+          }
+        }
+        this.isShowComputedArea = _record.is_computed
+        if (_record.is_computed) {
+          this.$nextTick(() => {
+            this.$refs.computedArea.setData({
+              compute_expr: _record.compute_expr,
+              compute_script: _record.compute_script,
+            })
+          })
+        }
+        const _find = attributes.find((item) => item.id === _record.id)
+        if (!['6', '7'].includes(_record.value_type)) {
+          this.$refs.preValueArea.setData({
+            choice_value: (_find || {}).choice_value || [],
+            choice_web_hook: _record.choice_web_hook,
+            choice_other: _record.choice_other || undefined,
+          })
+        }
+        this.$refs.fontArea.setData({
+          fontOptions: _find?.option?.fontOptions || {},
+        })
+      })
+    },
+
+    async handleSubmit(isCalcComputed = false) {
+      await this.form.validateFields(async (err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (this.record.is_required !== values.is_required || this.record.default_show !== values.default_show) {
+            console.log('changed is_required')
+            await updateCITypeAttributesById(this.CITypeId, {
+              attributes: [
+                { attr_id: this.record.id, is_required: values.is_required, default_show: values.default_show },
+              ],
+            })
+          }
+
+          delete values['default_show']
+          delete values['is_required']
+          const { default_value } = values
+          if (values.value_type === '0' && default_value) {
+            values.default = { default: default_value[0] || null }
+          } else if (values.value_type === '6') {
+            if (this.default_value_json_right) {
+              values.default = { default: this.default_value_json }
+            } else {
+              values.default = { default: null }
+            }
+          } else if (default_value || default_value === 0) {
+            if (values.value_type === '3') {
+              if (default_value === '$created_at' || default_value === '$updated_at') {
+                values.default = { default: default_value }
+              } else {
+                values.default = { default: moment(default_value).format('YYYY-MM-DD HH:mm:ss') }
+              }
+            } else if (values.value_type === '4') {
+              values.default = { default: moment(default_value).format('YYYY-MM-DD') }
+            } else {
+              values.default = { default: default_value }
+            }
+          } else {
+            values.default = { default: null }
+          }
+
+          delete values.default_value
+          if (values.is_computed) {
+            const computedAreaData = this.$refs.computedArea.getData()
+            values = { ...values, ...computedAreaData }
+          } else {
+            // If it is a non-computed attribute, check to see if there is a predefined value
+            if (!['6', '7'].includes(values.value_type)) {
+              const preValueAreaData = this.$refs.preValueArea.getData()
+              values = { ...values, ...preValueAreaData }
+            }
+          }
+          const fontOptions = this.$refs.fontArea.getData()
+          if (values.value_type === '7') {
+            values.value_type = '2'
+            values.is_password = true
+          }
+          if (values.value_type === '8') {
+            values.value_type = '2'
+            values.is_link = true
+          }
+          if (values.id) {
+            await this.updateAttribute(values.id, { ...values, option: { fontOptions } }, isCalcComputed)
+          } else {
+            // this.createAttribute(values)
+          }
+        }
+      })
+    },
+    async updateAttribute(attrId, data, isCalcComputed = false) {
+      await updateAttributeById(attrId, data)
+      if (isCalcComputed) {
+        await calcComputedAttribute(attrId)
+      }
+      this.$message.success(this.$t('updateSuccess'))
+      this.handleOk()
+      this.onClose()
+    },
+    handleOk() {
+      this.$emit('ok')
+    },
+    handleChangeValueType(value) {
+      this.currentValueType = value
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          default_value: this.form.getFieldValue('is_list') ? [] : null,
+        })
+      })
+    },
+    onJsonChange(value) {
+      this.default_value_json_right = true
+    },
+    onJsonError() {
+      this.default_value_json_right = false
+    },
+    selectIntDefaultValue(value) {
+      this.form.setFieldsValue({
+        default_value: [value],
+      })
+    },
+    changeDefaultForDatetime(value) {
+      this.defaultForDatetime = value
+      if (value === '$custom_time') {
+        this.form.setFieldsValue({
+          default_value: undefined,
+        })
+      }
+    },
+    onClick({ key }) {
+      console.log(key)
+      this.defaultForDatetime = key
+      this.form.setFieldsValue({
+        default_value: key,
+      })
+    },
+    async handleCalcComputed() {
+      await this.handleSubmit(true)
+    },
+  },
+  watch: {},
+}
+</script>
+
+<style lang="less" scoped></style>
+<style lang="less">
+.attribute-edit-form {
+  .jsoneditor-outer {
+    height: var(--custom-height) !important;
+    border: 1px solid #2f54eb;
+  }
+  div.jsoneditor-menu {
+    background-color: #2f54eb;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
index 0c28b7b..f8b2876 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeStore.vue
@@ -2,15 +2,15 @@
   <a-modal wrapClassName="attrbute-store-wrapper" width="80%" :visible="visible" @cancel="handleCancel">
     <template slot="title">
       <div class="attrbute-store-header">
-        <span>属性库</span>
+        <span>{{ $t('cmdb.ciType.attributeLibray') }}</span>
         <div class="attrbute-store-search">
           <a-input-group compact>
             <a-select class="attrbute-store-search-select" v-model="searchKey">
               <a-select-option value="alias">
-                别名
+                {{ $t('alias') }}
               </a-select-option>
               <a-select-option value="name">
-                名称
+                {{ $t('name') }}
               </a-select-option>
             </a-select>
             <a-input
@@ -53,7 +53,7 @@
       </a-row>
       <a-empty v-else>
         <img slot="image" :src="require('@/assets/data_empty.png')" />
-        <span slot="description"> 暂无数据 </span>
+        <span slot="description"> {{ $t('noData') }} </span>
       </a-empty>
     </a-spin>
     <template slot="footer">
@@ -63,7 +63,7 @@
         show-quick-jumper
         :current="tablePage.currentPage"
         :total="tablePage.totalResult"
-        :show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
+        :show-total="(total, range) => $t('pagination.total', { total: total, range0: range[0], range1: range[1] })"
         :page-size="tablePage.pageSize"
         :default-current="1"
         @change="pageOrSizeChange"
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
index aca98d2..e8c2f01 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
@@ -1,569 +1,569 @@
-<template>
-  <div>
-    <a-modal v-model="addGroupModal" title="新增分组" @cancel="handleCancelCreateGroup" @ok="handleCreateGroup">
-      <span>
-        <a-form-item label="名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-          <a-input type="text" v-model.trim="newGroupName" />
-        </a-form-item>
-      </span>
-    </a-modal>
-    <div class="ci-types-attributes" :style="{ maxHeight: `${windowHeight - 104}px` }">
-      <a-space style="margin-bottom: 10px">
-        <a-button
-          type="primary"
-          @click="handleAddGroup"
-          size="small"
-          class="ops-button-primary"
-          icon="plus"
-        >分组</a-button
-        >
-        <a-button
-          type="primary"
-          @click="handleOpenUniqueConstraint"
-          size="small"
-          class="ops-button-primary"
-        >唯一校验</a-button
-        >
-      </a-space>
-      <div :key="CITypeGroup.id" v-for="(CITypeGroup, index) in CITypeGroups">
-        <div>
-          <div
-            :style="{ height: '32px', lineHeight: '32px', display: 'inline-block', fontSize: '14px' }"
-            v-if="!CITypeGroup.editable"
-          >
-            <span style="font-weight:700">{{ CITypeGroup.name }}</span>
-            <span style="color: #c3cdd7;margin:0 5px;">({{ CITypeGroup.attributes.length }})</span>
-            <a @click="handleEditGroupName(index, CITypeGroup)">
-              <a-icon type="edit" />
-            </a>
-          </div>
-          <template v-else>
-            <span>
-              <a-input
-                type="text"
-                style="width: 200px;margin-right:10px;"
-                ref="editGroupInput"
-                v-model.trim="CITypeGroup.name"
-              />
-              <a @click="handleSaveGroupName(index, CITypeGroup)" style="margin-right: 0.5rem">保存</a>
-              <a @click="handleCancelGroupName(index, CITypeGroup)">取消</a>
-            </span>
-          </template>
-          <a-space style="float: right">
-            <a-tooltip v-if="index">
-              <template slot="title">上移</template>
-              <a><a-icon type="arrow-up" v-if="index" @click="handleMoveGroup(index, index - 1)"/></a>
-            </a-tooltip>
-
-            <a-tooltip v-if="index !== CITypeGroups.length - 1">
-              <template slot="title">下移</template>
-              <a
-              ><a-icon
-                type="arrow-down"
-                v-if="index !== CITypeGroups.length - 1"
-                @click="handleMoveGroup(index, index + 1)"
-              /></a>
-            </a-tooltip>
-
-            <a-tooltip>
-              <template slot="title">添加属性</template>
-              <a><a-icon type="plus" @click="handleAddGroupAttr(index)"/></a>
-            </a-tooltip>
-            <a-tooltip>
-              <template slot="title">删除分组</template>
-              <a style="color:red;"><a-icon type="delete" @click="handleDeleteGroup(CITypeGroup)"/></a>
-            </a-tooltip>
-          </a-space>
-        </div>
-        <div class="ci-types-attributes-wrapper">
-          <draggable
-            v-model="CITypeGroup.attributes"
-            group="properties"
-            @start="drag = true"
-            @change="
-              (e) => {
-                handleChange(e, CITypeGroup.id)
-              }
-            "
-            :filter="'.filter-empty'"
-            :animation="300"
-            tag="div"
-            style="width: 100%; display: flex;flex-flow: wrap"
-            handle=".handle"
-          >
-            <AttributeCard
-              v-for="item in CITypeGroup.attributes"
-              :key="item.id"
-              @edit="handleEditProperty(item)"
-              :property="item"
-              @ok="handleOk"
-              :CITypeId="CITypeId"
-              :attributes="attributes"
-            />
-            <i></i> <i></i> <i></i> <i></i> <i></i>
-          </draggable>
-        </div>
-      </div>
-      <div>
-        <div :style="{ height: '32px', lineHeight: '32px', display: 'inline-block', fontSize: '14px' }">
-          <span style="font-weight:700">其他</span>
-          <span style="color: #c3cdd7;margin-left:5px;">({{ otherGroupAttributes.length }})</span>
-        </div>
-        <div style="float: right">
-          <a-tooltip>
-            <template slot="title">添加属性</template>
-            <a @click="handleAddGroupAttr(undefined)"><a-icon type="plus"/></a>
-          </a-tooltip>
-        </div>
-      </div>
-
-      <div class="ci-types-attributes-wrapper">
-        <draggable
-          v-model="otherGroupAttributes"
-          group="properties"
-          @start="drag = true"
-          @change="
-            (e) => {
-              handleChange(e, -1)
-            }
-          "
-          :animation="300"
-          style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap"
-          handle=".handle"
-        >
-          <AttributeCard
-            v-for="item in otherGroupAttributes"
-            :key="item.id"
-            @edit="handleEditProperty(item)"
-            :property="item"
-            @ok="handleOk"
-            :CITypeId="CITypeId"
-            :attributes="attributes"
-          />
-          <i></i> <i></i> <i></i> <i></i> <i></i>
-        </draggable>
-      </div>
-    </div>
-    <attribute-edit-form
-      ref="attributeEditForm"
-      :CITypeId="CITypeId"
-      :CITypeName="CITypeName"
-      @ok="handleOk"
-    ></attribute-edit-form>
-    <new-ci-type-attr-modal
-      ref="newCiTypeAttrModal"
-      :CITypeId="CITypeId"
-      :linked-ids="linkedIds"
-      @ok="handleOk"
-    ></new-ci-type-attr-modal>
-    <UniqueConstraint ref="uniqueConstraint" :CITypeId="CITypeId" />
-  </div>
-</template>
-
-<script>
-import {
-  deleteCITypeGroupById,
-  getCITypeGroupById,
-  createCITypeGroupById,
-  updateCITypeGroupById,
-  getTriggerList,
-} from '@/modules/cmdb/api/CIType'
-import {
-  getCITypeAttributesById,
-  updateCITypeAttributesById,
-  transferCITypeAttrIndex,
-  transferCITypeGroupIndex,
-} from '@/modules/cmdb/api/CITypeAttr'
-import draggable from 'vuedraggable'
-import AttributeCard from './attributeCard.vue'
-import AttributeEditForm from './attributeEditForm.vue'
-import NewCiTypeAttrModal from './newCiTypeAttrModal.vue'
-import UniqueConstraint from './uniqueConstraint.vue'
-
-export default {
-  name: 'AttributesTable',
-  components: {
-    draggable,
-    AttributeCard,
-    AttributeEditForm,
-    NewCiTypeAttrModal,
-    UniqueConstraint,
-  },
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-    CITypeName: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      form: this.$form.createForm(this),
-      CITypeGroups: [],
-      addRemoveGroupFlag: {},
-      attributes: [],
-      otherGroupAttributes: [],
-      addGroupModal: false,
-      newGroupName: '',
-    }
-  },
-  computed: {
-    linkedIds() {
-      return this.attributes.map((i) => i.id)
-    },
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  provide() {
-    return { refresh: this.getCITypeGroupData }
-  },
-  beforeCreate() {},
-  created() {},
-  mounted() {
-    this.getCITypeGroupData()
-  },
-  methods: {
-    handleEditProperty(property) {
-      this.$refs.attributeEditForm.handleEdit(property, this.attributes)
-    },
-    handleOk() {
-      this.getCITypeGroupData()
-    },
-    setOtherGroupAttributes() {
-      const orderMap = this.attributes.reduce(function(map, obj) {
-        map[obj.id] = obj.order
-        return map
-      }, {})
-
-      const inGroupAttrKeys = this.CITypeGroups.filter((x) => x.attributes && x.attributes.length > 0)
-        .map((x) => x.attributes)
-        .flat()
-        .map((x) => x.id)
-
-      this.CITypeGroups.forEach((group) => {
-        group.attributes.forEach((attribute) => {
-          attribute.order = orderMap[attribute.id]
-          attribute.originOrder = attribute.order
-          attribute.originGroupName = group.name
-        })
-        group.originCount = group.attributes.length
-        group.editable = false
-        group.originOrder = group.order
-        group.originName = group.name
-      })
-
-      this.otherGroupAttributes = this.attributes
-        .filter((x) => !inGroupAttrKeys.includes(x.id))
-        .sort((a, b) => a.order - b.order)
-      this.attributes = this.attributes.sort((a, b) => a.order - b.order)
-      this.CITypeGroups = this.CITypeGroups.sort((a, b) => a.order - b.order)
-      this.otherGroupAttributes.forEach((attribute) => {
-        attribute.originOrder = attribute.order
-      })
-
-      // console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes)
-    },
-    getCITypeGroupData() {
-      const promises = [
-        getCITypeAttributesById(this.CITypeId),
-        getCITypeGroupById(this.CITypeId),
-        getTriggerList(this.CITypeId),
-      ]
-      Promise.all(promises).then((values) => {
-        console.log(values)
-        this.attributes = values[0].attributes
-        const temp = {}
-        this.attributes.forEach((attr) => {
-          temp[attr.id] = attr
-        })
-        this.CITypeGroups = values[1]
-        this.CITypeGroups.forEach((g) => {
-          g.attributes.forEach((a) => {
-            a.is_required = (temp[a.id] && temp[a.id].is_required) || false
-            a.default_show = (temp[a.id] && temp[a.id].default_show) || false
-            const idx = values[2].findIndex((item) => item.attr_id === a.id)
-            a.has_trigger = idx > -1
-            if (idx > -1) {
-              a.trigger = values[2][idx]
-            }
-          })
-        })
-        this.setOtherGroupAttributes()
-      })
-    },
-
-    handleEditGroupName(index, CITypeGroup) {
-      CITypeGroup.editable = true
-      this.$set(this.CITypeGroups, index, CITypeGroup)
-    },
-    handleSaveGroupName(index, CITypeGroup) {
-      if (CITypeGroup.name === CITypeGroup.originName) {
-        this.handleCancelGroupName(index, CITypeGroup)
-      } else if (this.CITypeGroups.map((x) => x.originName).includes(CITypeGroup.name)) {
-        this.$message.error('分组名称已存在')
-      } else {
-        updateCITypeGroupById(CITypeGroup.id, {
-          name: CITypeGroup.name,
-          attributes: CITypeGroup.attributes.map((x) => x.id),
-          order: CITypeGroup.order,
-        }).then((res) => {
-          CITypeGroup.editable = false
-          this.$set(this.CITypeGroups, index, CITypeGroup)
-          this.$message.success('修改成功')
-        })
-      }
-    },
-    handleCancelGroupName(index, CITypeGroup) {
-      CITypeGroup.editable = false
-      CITypeGroup.name = CITypeGroup.originName
-      this.$set(this.CITypeGroups, index, CITypeGroup)
-    },
-
-    handleCancel(CITypeGroup) {
-      CITypeGroup.editable = false
-    },
-    handleAddGroup() {
-      this.addGroupModal = true
-    },
-    handleCreateGroup() {
-      const groupOrders = this.CITypeGroups.map((x) => x.order)
-
-      const maxGroupOrder = Math.max(groupOrders.length, groupOrders.length ? Math.max(...groupOrders) : 0)
-
-      console.log('groupOrder', groupOrders, 'maxOrder', maxGroupOrder)
-      createCITypeGroupById(this.CITypeId, { name: this.newGroupName, order: maxGroupOrder + 1 }).then((res) => {
-        this.addGroupModal = false
-        this.newGroupName = ''
-        this.getCITypeGroupData()
-      })
-    },
-    handleCancelCreateGroup() {
-      this.addGroupModal = false
-      this.newGroupName = ''
-    },
-
-    handleMoveGroup(beforeIndex, afterIndex) {
-      const fromGroupId = this.CITypeGroups[beforeIndex].id
-      const toGroupId = this.CITypeGroups[afterIndex].id
-      transferCITypeGroupIndex(this.CITypeId, { from: fromGroupId, to: toGroupId }).then((res) => {
-        this.$message.success('操作成功')
-        const beforeGroup = this.CITypeGroups[beforeIndex]
-        this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex]
-
-        this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex])
-        this.$set(this.CITypeGroups, afterIndex, beforeGroup)
-      })
-    },
-    handleAddGroupAttr(index) {
-      let group = null
-      if (index === 0 || index) {
-        group = this.CITypeGroups[index]
-        console.log(group)
-      }
-      this.$refs.newCiTypeAttrModal.handleEdit(group)
-    },
-
-    handleSubmit(e) {
-      e.preventDefault()
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          // eslint-disable-next-line no-console
-          console.log('Received values of form: ', values)
-
-          this.CITypeGroups.forEach((group) => {
-            if (group.id === values.groupId) {
-              group.attributes = this.attributes.filter((x) => values.checkedAttributes.includes(x.id))
-            } else {
-              group.attributes = group.attributes.filter((x) => !values.checkedAttributes.includes(x.id))
-            }
-          })
-
-          this.otherGroupAttributes.forEach((attributes) => {
-            if (values.groupId === null) {
-              this.otherGroupAttributes = this.otherGroupAttributes.filter((x) =>
-                values.checkedAttributes.includes(x.id)
-              )
-            } else {
-              this.otherGroupAttributes = this.otherGroupAttributes.filter(
-                (x) => !values.checkedAttributes.includes(x.id)
-              )
-            }
-          })
-
-          console.log('add group attribute', this.otherGroupAttributes, this.CITypeGroups)
-          this.updatePropertyIndex()
-        }
-      })
-    },
-
-    handleDeleteGroup(group) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确定要删除分组 【${group.name}】 吗？`,
-        onOk() {
-          deleteCITypeGroupById(group.id).then((res) => {
-            that.CITypeGroups = that.CITypeGroups.filter((g) => g.id !== group.id)
-            that.updatePropertyIndex()
-          })
-        },
-      })
-    },
-    handleChange(e, group) {
-      console.log('changess')
-      if (e.hasOwnProperty('moved') && e.moved.oldIndex !== e.moved.newIndex) {
-        if (group === -1) {
-          this.$message.error('其他分组中的属性不能进行排序，如需排序请先拖至自定义的分组！')
-        } else {
-          transferCITypeAttrIndex(this.CITypeId, {
-            from: { attr_id: e.moved.element.id, group_id: group > -1 ? group : null },
-            to: { order: e.moved.newIndex, group_id: group > -1 ? group : null },
-          })
-            .then((res) => this.$message.success('保存成功'))
-            .catch(() => {
-              this.abortDraggable()
-            })
-        }
-      }
-
-      if (e.hasOwnProperty('added')) {
-        this.addRemoveGroupFlag = { to: { group_id: group > -1 ? group : null, order: e.added.newIndex }, inited: true }
-      }
-
-      if (e.hasOwnProperty('removed')) {
-        this.$nextTick(() => {
-          transferCITypeAttrIndex(this.CITypeId, {
-            from: { attr_id: e.removed.element.id, group_id: group > -1 ? group : null },
-            to: { group_id: this.addRemoveGroupFlag.to.group_id, order: this.addRemoveGroupFlag.to.order },
-          })
-            .then((res) => this.$message.success('保存成功'))
-            .catch(() => {
-              this.abortDraggable()
-            })
-            .finally(() => {
-              this.addRemoveGroupFlag = {}
-            })
-        })
-      }
-    },
-    abortDraggable() {
-      this.$nextTick(() => {
-        this.$router.push({ name: 'ci_type' })
-      })
-    },
-    updatePropertyIndex() {
-      const attributes = [] // 全部属性
-      let attributeOrder = 0 // 属性组
-      let groupOrder = 0 // 组排序
-      const promises = []
-
-      this.CITypeGroups.forEach((group) => {
-        const groupName = group.name
-
-        let groupAttributes = []
-        let groupUpdate = false
-        group.order = groupOrder
-
-        group.attributes.forEach((attribute) => {
-          groupAttributes.push(attribute.id)
-
-          if (attribute.originGroupName !== group.name || attribute.originOrder !== attributeOrder) {
-            attributes.push({ attr_id: attribute.id, order: attributeOrder })
-            groupUpdate = true
-          }
-          attributeOrder++
-        })
-
-        groupAttributes = new Set(groupAttributes)
-        if (group.originCount !== groupAttributes.size || groupUpdate || group.originOrder !== group.order) {
-          promises.push(
-            updateCITypeGroupById(group.id, { name: groupName, attributes: [...groupAttributes], order: groupOrder })
-          )
-        }
-        groupOrder++
-      })
-
-      this.otherGroupAttributes.forEach((attribute) => {
-        if (attribute.originOrder !== attributeOrder) {
-          console.log(
-            'this attribute:',
-            attribute.name,
-            'old order',
-            attribute.originOrder,
-            'new order',
-            attributeOrder
-          )
-          attributes.push({ attr_id: attribute.id, order: attributeOrder })
-        }
-
-        attributeOrder++
-      })
-
-      if (attributes && attributes.length > 0) {
-        promises.unshift(updateCITypeAttributesById(this.CITypeId, { attributes: attributes }))
-      }
-
-      const that = this
-      Promise.all(promises).then((values) => {
-        that.$message.success(`修改成功`)
-        that.getCITypeGroupData()
-        that.modalVisible = false
-      })
-    },
-    handleOpenUniqueConstraint() {
-      this.$refs.uniqueConstraint.open(this.attributes)
-    },
-  },
-  watch: {},
-}
-</script>
-
-<style lang="less" scoped>
-.fold {
-  width: calc(100% - 216px);
-  display: inline-block;
-}
-
-.ci-types-attributes {
-  padding: 16px 24px 24px;
-  overflow-y: auto;
-  .property-item-empty {
-    color: #40a9ff;
-    width: calc(100% - 20px);
-    margin: 5px;
-    border: 1px dotted #d9d9d9;
-    border-radius: 2px;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-    height: 60px;
-    line-height: 60px;
-    transition: all 0.3s;
-    &:hover {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-  }
-  .ci-types-attributes-wrapper > div {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    min-height: 20px;
-    > i {
-      width: 182px;
-    }
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .fold {
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <div>
+    <a-modal v-model="addGroupModal" :title="$t('cmdb.ciType.addGroup')" @cancel="handleCancelCreateGroup" @ok="handleCreateGroup">
+      <span>
+        <a-form-item :label="$t('name')" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+          <a-input type="text" v-model.trim="newGroupName" />
+        </a-form-item>
+      </span>
+    </a-modal>
+    <div class="ci-types-attributes" :style="{ maxHeight: `${windowHeight - 104}px` }">
+      <a-space style="margin-bottom: 10px">
+        <a-button
+          type="primary"
+          @click="handleAddGroup"
+          size="small"
+          class="ops-button-primary"
+          icon="plus"
+        >{{ $t('cmdb.ciType.group') }}</a-button
+        >
+        <a-button
+          type="primary"
+          @click="handleOpenUniqueConstraint"
+          size="small"
+          class="ops-button-primary"
+        >{{ $t('cmdb.ciType.uniqueConstraint') }}</a-button
+        >
+      </a-space>
+      <div :key="CITypeGroup.id" v-for="(CITypeGroup, index) in CITypeGroups">
+        <div>
+          <div
+            :style="{ height: '32px', lineHeight: '32px', display: 'inline-block', fontSize: '14px' }"
+            v-if="!CITypeGroup.editable"
+          >
+            <span style="font-weight:700">{{ CITypeGroup.name }}</span>
+            <span style="color: #c3cdd7;margin:0 5px;">({{ CITypeGroup.attributes.length }})</span>
+            <a @click="handleEditGroupName(index, CITypeGroup)">
+              <a-icon type="edit" />
+            </a>
+          </div>
+          <template v-else>
+            <span>
+              <a-input
+                type="text"
+                style="width: 200px;margin-right:10px;"
+                ref="editGroupInput"
+                v-model.trim="CITypeGroup.name"
+              />
+              <a @click="handleSaveGroupName(index, CITypeGroup)" style="margin-right: 0.5rem">{{ $t('save') }}</a>
+              <a @click="handleCancelGroupName(index, CITypeGroup)">{{ $t('cancel') }}</a>
+            </span>
+          </template>
+          <a-space style="float: right">
+            <a-tooltip v-if="index">
+              <template slot="title">{{ $t('cmdb.ciType.up') }}</template>
+              <a><a-icon type="arrow-up" v-if="index" @click="handleMoveGroup(index, index - 1)"/></a>
+            </a-tooltip>
+
+            <a-tooltip v-if="index !== CITypeGroups.length - 1">
+              <template slot="title">{{ $t('cmdb.ciType.up') }}</template>
+              <a
+              ><a-icon
+                type="arrow-down"
+                v-if="index !== CITypeGroups.length - 1"
+                @click="handleMoveGroup(index, index + 1)"
+              /></a>
+            </a-tooltip>
+
+            <a-tooltip>
+              <template slot="title">{{ $t('cmdb.ciType.selectAttribute') }}</template>
+              <a><a-icon type="plus" @click="handleAddGroupAttr(index)"/></a>
+            </a-tooltip>
+            <a-tooltip>
+              <template slot="title">{{ $t('cmdb.ciType.deleteGroup') }}</template>
+              <a style="color:red;"><a-icon type="delete" @click="handleDeleteGroup(CITypeGroup)"/></a>
+            </a-tooltip>
+          </a-space>
+        </div>
+        <div class="ci-types-attributes-wrapper">
+          <draggable
+            v-model="CITypeGroup.attributes"
+            group="properties"
+            @start="drag = true"
+            @change="
+              (e) => {
+                handleChange(e, CITypeGroup.id)
+              }
+            "
+            :filter="'.filter-empty'"
+            :animation="300"
+            tag="div"
+            style="width: 100%; display: flex;flex-flow: wrap"
+            handle=".handle"
+          >
+            <AttributeCard
+              v-for="item in CITypeGroup.attributes"
+              :key="item.id"
+              @edit="handleEditProperty(item)"
+              :property="item"
+              @ok="handleOk"
+              :CITypeId="CITypeId"
+              :attributes="attributes"
+            />
+            <i></i> <i></i> <i></i> <i></i> <i></i>
+          </draggable>
+        </div>
+      </div>
+      <div>
+        <div :style="{ height: '32px', lineHeight: '32px', display: 'inline-block', fontSize: '14px' }">
+          <span style="font-weight:700">{{ $t('other') }}</span>
+          <span style="color: #c3cdd7;margin-left:5px;">({{ otherGroupAttributes.length }})</span>
+        </div>
+        <div style="float: right">
+          <a-tooltip>
+            <template slot="title">{{ $t('cmdb.ciType.selectAttribute') }}</template>
+            <a @click="handleAddGroupAttr(undefined)"><a-icon type="plus"/></a>
+          </a-tooltip>
+        </div>
+      </div>
+
+      <div class="ci-types-attributes-wrapper">
+        <draggable
+          v-model="otherGroupAttributes"
+          group="properties"
+          @start="drag = true"
+          @change="
+            (e) => {
+              handleChange(e, -1)
+            }
+          "
+          :animation="300"
+          style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap"
+          handle=".handle"
+        >
+          <AttributeCard
+            v-for="item in otherGroupAttributes"
+            :key="item.id"
+            @edit="handleEditProperty(item)"
+            :property="item"
+            @ok="handleOk"
+            :CITypeId="CITypeId"
+            :attributes="attributes"
+          />
+          <i></i> <i></i> <i></i> <i></i> <i></i>
+        </draggable>
+      </div>
+    </div>
+    <attribute-edit-form
+      ref="attributeEditForm"
+      :CITypeId="CITypeId"
+      :CITypeName="CITypeName"
+      @ok="handleOk"
+    ></attribute-edit-form>
+    <new-ci-type-attr-modal
+      ref="newCiTypeAttrModal"
+      :CITypeId="CITypeId"
+      :linked-ids="linkedIds"
+      @ok="handleOk"
+    ></new-ci-type-attr-modal>
+    <UniqueConstraint ref="uniqueConstraint" :CITypeId="CITypeId" />
+  </div>
+</template>
+
+<script>
+import {
+  deleteCITypeGroupById,
+  getCITypeGroupById,
+  createCITypeGroupById,
+  updateCITypeGroupById,
+  getTriggerList,
+} from '@/modules/cmdb/api/CIType'
+import {
+  getCITypeAttributesById,
+  updateCITypeAttributesById,
+  transferCITypeAttrIndex,
+  transferCITypeGroupIndex,
+} from '@/modules/cmdb/api/CITypeAttr'
+import draggable from 'vuedraggable'
+import AttributeCard from './attributeCard.vue'
+import AttributeEditForm from './attributeEditForm.vue'
+import NewCiTypeAttrModal from './newCiTypeAttrModal.vue'
+import UniqueConstraint from './uniqueConstraint.vue'
+
+export default {
+  name: 'AttributesTable',
+  components: {
+    draggable,
+    AttributeCard,
+    AttributeEditForm,
+    NewCiTypeAttrModal,
+    UniqueConstraint,
+  },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+    CITypeName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      CITypeGroups: [],
+      addRemoveGroupFlag: {},
+      attributes: [],
+      otherGroupAttributes: [],
+      addGroupModal: false,
+      newGroupName: '',
+    }
+  },
+  computed: {
+    linkedIds() {
+      return this.attributes.map((i) => i.id)
+    },
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return { refresh: this.getCITypeGroupData }
+  },
+  beforeCreate() {},
+  created() {},
+  mounted() {
+    this.getCITypeGroupData()
+  },
+  methods: {
+    handleEditProperty(property) {
+      this.$refs.attributeEditForm.handleEdit(property, this.attributes)
+    },
+    handleOk() {
+      this.getCITypeGroupData()
+    },
+    setOtherGroupAttributes() {
+      const orderMap = this.attributes.reduce(function(map, obj) {
+        map[obj.id] = obj.order
+        return map
+      }, {})
+
+      const inGroupAttrKeys = this.CITypeGroups.filter((x) => x.attributes && x.attributes.length > 0)
+        .map((x) => x.attributes)
+        .flat()
+        .map((x) => x.id)
+
+      this.CITypeGroups.forEach((group) => {
+        group.attributes.forEach((attribute) => {
+          attribute.order = orderMap[attribute.id]
+          attribute.originOrder = attribute.order
+          attribute.originGroupName = group.name
+        })
+        group.originCount = group.attributes.length
+        group.editable = false
+        group.originOrder = group.order
+        group.originName = group.name
+      })
+
+      this.otherGroupAttributes = this.attributes
+        .filter((x) => !inGroupAttrKeys.includes(x.id))
+        .sort((a, b) => a.order - b.order)
+      this.attributes = this.attributes.sort((a, b) => a.order - b.order)
+      this.CITypeGroups = this.CITypeGroups.sort((a, b) => a.order - b.order)
+      this.otherGroupAttributes.forEach((attribute) => {
+        attribute.originOrder = attribute.order
+      })
+
+      // console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes)
+    },
+    getCITypeGroupData() {
+      const promises = [
+        getCITypeAttributesById(this.CITypeId),
+        getCITypeGroupById(this.CITypeId),
+        getTriggerList(this.CITypeId),
+      ]
+      Promise.all(promises).then((values) => {
+        console.log(values)
+        this.attributes = values[0].attributes
+        const temp = {}
+        this.attributes.forEach((attr) => {
+          temp[attr.id] = attr
+        })
+        this.CITypeGroups = values[1]
+        this.CITypeGroups.forEach((g) => {
+          g.attributes.forEach((a) => {
+            a.is_required = (temp[a.id] && temp[a.id].is_required) || false
+            a.default_show = (temp[a.id] && temp[a.id].default_show) || false
+            const idx = values[2].findIndex((item) => item.attr_id === a.id)
+            a.has_trigger = idx > -1
+            if (idx > -1) {
+              a.trigger = values[2][idx]
+            }
+          })
+        })
+        this.setOtherGroupAttributes()
+      })
+    },
+
+    handleEditGroupName(index, CITypeGroup) {
+      CITypeGroup.editable = true
+      this.$set(this.CITypeGroups, index, CITypeGroup)
+    },
+    handleSaveGroupName(index, CITypeGroup) {
+      if (CITypeGroup.name === CITypeGroup.originName) {
+        this.handleCancelGroupName(index, CITypeGroup)
+      } else if (this.CITypeGroups.map((x) => x.originName).includes(CITypeGroup.name)) {
+        this.$message.error(this.$t('cmdb.ciType.groupExisted'))
+      } else {
+        updateCITypeGroupById(CITypeGroup.id, {
+          name: CITypeGroup.name,
+          attributes: CITypeGroup.attributes.map((x) => x.id),
+          order: CITypeGroup.order,
+        }).then((res) => {
+          CITypeGroup.editable = false
+          this.$set(this.CITypeGroups, index, CITypeGroup)
+          this.$message.success(this.$t('updateSuccess'))
+        })
+      }
+    },
+    handleCancelGroupName(index, CITypeGroup) {
+      CITypeGroup.editable = false
+      CITypeGroup.name = CITypeGroup.originName
+      this.$set(this.CITypeGroups, index, CITypeGroup)
+    },
+
+    handleCancel(CITypeGroup) {
+      CITypeGroup.editable = false
+    },
+    handleAddGroup() {
+      this.addGroupModal = true
+    },
+    handleCreateGroup() {
+      const groupOrders = this.CITypeGroups.map((x) => x.order)
+
+      const maxGroupOrder = Math.max(groupOrders.length, groupOrders.length ? Math.max(...groupOrders) : 0)
+
+      console.log('groupOrder', groupOrders, 'maxOrder', maxGroupOrder)
+      createCITypeGroupById(this.CITypeId, { name: this.newGroupName, order: maxGroupOrder + 1 }).then((res) => {
+        this.addGroupModal = false
+        this.newGroupName = ''
+        this.getCITypeGroupData()
+      })
+    },
+    handleCancelCreateGroup() {
+      this.addGroupModal = false
+      this.newGroupName = ''
+    },
+
+    handleMoveGroup(beforeIndex, afterIndex) {
+      const fromGroupId = this.CITypeGroups[beforeIndex].id
+      const toGroupId = this.CITypeGroups[afterIndex].id
+      transferCITypeGroupIndex(this.CITypeId, { from: fromGroupId, to: toGroupId }).then((res) => {
+        this.$message.success(this.$t('operateSuccess'))
+        const beforeGroup = this.CITypeGroups[beforeIndex]
+        this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex]
+
+        this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex])
+        this.$set(this.CITypeGroups, afterIndex, beforeGroup)
+      })
+    },
+    handleAddGroupAttr(index) {
+      let group = null
+      if (index === 0 || index) {
+        group = this.CITypeGroups[index]
+        console.log(group)
+      }
+      this.$refs.newCiTypeAttrModal.handleEdit(group)
+    },
+
+    handleSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          // eslint-disable-next-line no-console
+          console.log('Received values of form: ', values)
+
+          this.CITypeGroups.forEach((group) => {
+            if (group.id === values.groupId) {
+              group.attributes = this.attributes.filter((x) => values.checkedAttributes.includes(x.id))
+            } else {
+              group.attributes = group.attributes.filter((x) => !values.checkedAttributes.includes(x.id))
+            }
+          })
+
+          this.otherGroupAttributes.forEach((attributes) => {
+            if (values.groupId === null) {
+              this.otherGroupAttributes = this.otherGroupAttributes.filter((x) =>
+                values.checkedAttributes.includes(x.id)
+              )
+            } else {
+              this.otherGroupAttributes = this.otherGroupAttributes.filter(
+                (x) => !values.checkedAttributes.includes(x.id)
+              )
+            }
+          })
+
+          console.log('add group attribute', this.otherGroupAttributes, this.CITypeGroups)
+          this.updatePropertyIndex()
+        }
+      })
+    },
+
+    handleDeleteGroup(group) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDeleteGroup', { groupName: `${group.name}` }),
+        onOk() {
+          deleteCITypeGroupById(group.id).then((res) => {
+            that.CITypeGroups = that.CITypeGroups.filter((g) => g.id !== group.id)
+            that.updatePropertyIndex()
+          })
+        },
+      })
+    },
+    handleChange(e, group) {
+      console.log('changess')
+      if (e.hasOwnProperty('moved') && e.moved.oldIndex !== e.moved.newIndex) {
+        if (group === -1) {
+          this.$message.error(this.$t('cmdb.ciType.attributeSortedTips'))
+        } else {
+          transferCITypeAttrIndex(this.CITypeId, {
+            from: { attr_id: e.moved.element.id, group_id: group > -1 ? group : null },
+            to: { order: e.moved.newIndex, group_id: group > -1 ? group : null },
+          })
+            .then((res) => this.$message.success(this.$t('updateSuccess')))
+            .catch(() => {
+              this.abortDraggable()
+            })
+        }
+      }
+
+      if (e.hasOwnProperty('added')) {
+        this.addRemoveGroupFlag = { to: { group_id: group > -1 ? group : null, order: e.added.newIndex }, inited: true }
+      }
+
+      if (e.hasOwnProperty('removed')) {
+        this.$nextTick(() => {
+          transferCITypeAttrIndex(this.CITypeId, {
+            from: { attr_id: e.removed.element.id, group_id: group > -1 ? group : null },
+            to: { group_id: this.addRemoveGroupFlag.to.group_id, order: this.addRemoveGroupFlag.to.order },
+          })
+            .then((res) => this.$message.success(this.$t('saveSuccess')))
+            .catch(() => {
+              this.abortDraggable()
+            })
+            .finally(() => {
+              this.addRemoveGroupFlag = {}
+            })
+        })
+      }
+    },
+    abortDraggable() {
+      this.$nextTick(() => {
+        this.$router.push({ name: 'ci_type' })
+      })
+    },
+    updatePropertyIndex() {
+      const attributes = [] // All attributes
+      let attributeOrder = 0 // attribute group
+      let groupOrder = 0 // group sort
+      const promises = []
+
+      this.CITypeGroups.forEach((group) => {
+        const groupName = group.name
+
+        let groupAttributes = []
+        let groupUpdate = false
+        group.order = groupOrder
+
+        group.attributes.forEach((attribute) => {
+          groupAttributes.push(attribute.id)
+
+          if (attribute.originGroupName !== group.name || attribute.originOrder !== attributeOrder) {
+            attributes.push({ attr_id: attribute.id, order: attributeOrder })
+            groupUpdate = true
+          }
+          attributeOrder++
+        })
+
+        groupAttributes = new Set(groupAttributes)
+        if (group.originCount !== groupAttributes.size || groupUpdate || group.originOrder !== group.order) {
+          promises.push(
+            updateCITypeGroupById(group.id, { name: groupName, attributes: [...groupAttributes], order: groupOrder })
+          )
+        }
+        groupOrder++
+      })
+
+      this.otherGroupAttributes.forEach((attribute) => {
+        if (attribute.originOrder !== attributeOrder) {
+          console.log(
+            'this attribute:',
+            attribute.name,
+            'old order',
+            attribute.originOrder,
+            'new order',
+            attributeOrder
+          )
+          attributes.push({ attr_id: attribute.id, order: attributeOrder })
+        }
+
+        attributeOrder++
+      })
+
+      if (attributes && attributes.length > 0) {
+        promises.unshift(updateCITypeAttributesById(this.CITypeId, { attributes: attributes }))
+      }
+
+      const that = this
+      Promise.all(promises).then((values) => {
+        that.$message.success(that.$t('updateSuccess'))
+        that.getCITypeGroupData()
+        that.modalVisible = false
+      })
+    },
+    handleOpenUniqueConstraint() {
+      this.$refs.uniqueConstraint.open(this.attributes)
+    },
+  },
+  watch: {},
+}
+</script>
+
+<style lang="less" scoped>
+.fold {
+  width: calc(100% - 216px);
+  display: inline-block;
+}
+
+.ci-types-attributes {
+  padding: 16px 24px 24px;
+  overflow-y: auto;
+  .property-item-empty {
+    color: #40a9ff;
+    width: calc(100% - 20px);
+    margin: 5px;
+    border: 1px dotted #d9d9d9;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    height: 60px;
+    line-height: 60px;
+    transition: all 0.3s;
+    &:hover {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+  }
+  .ci-types-attributes-wrapper > div {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    min-height: 20px;
+    > i {
+      width: 182px;
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .fold {
+    width: 100%;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
index e6b9448..b042c75 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
@@ -1,557 +1,559 @@
-<template>
-  <a-form
-    :form="form"
-    class="create-new-attribute"
-    :label-col="formItemLayout.labelCol"
-    :wrapper-col="formItemLayout.wrapperCol"
-  >
-    <a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider>
-    <a-row>
-      <a-col :span="12">
-        <a-form-item label="属性名(英文)">
-          <a-input
-            name="name"
-            placeholder="英文"
-            v-decorator="[
-              'name',
-              {
-                rules: [
-                  { required: true, message: '请输入属性名' },
-                  {
-                    message: '不能以数字开头，可以是英文 数字以及下划线 (_)',
-                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
-                  },
-                  { message: '内置字段', pattern: RegExp('^(?!(id|_id|ci_id|type|_type|ci_type)$).*$') },
-                ],
-              },
-            ]"
-          />
-        </a-form-item>
-      </a-col>
-      <a-col :span="12">
-        <a-form-item label="别名">
-          <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="12">
-        <a-form-item label="数据类型">
-          <a-select
-            name="value_type"
-            style="width: 100%"
-            v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]"
-            @change="handleChangeValueType"
-          >
-            <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">
-              {{ value }}
-              <span class="value-type-des" v-if="key === '3'">yyyy-mm-dd HH:MM:SS</span>
-              <span class="value-type-des" v-if="key === '4'">yyyy-mm-dd</span>
-              <span class="value-type-des" v-if="key === '5'">HH:MM:SS</span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-      <a-col :span="currentValueType === '6' ? 24 : 12">
-        <a-form-item
-          :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
-          :wrapper-col="{ span: currentValueType === '6' ? 18 : 15 }"
-          label="默认值"
-        >
-          <template>
-            <a-select
-              v-if="form.getFieldValue('is_list')"
-              mode="tags"
-              :style="{ width: '100%' }"
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-select>
-            <a-input-number
-              style="width: 100%"
-              v-else-if="currentValueType === '1'"
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-input-number>
-            <a-select
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-              mode="tags"
-              v-else-if="currentValueType === '0'"
-              @select="selectIntDefaultValue"
-            >
-              <a-select-option key="$auto_inc_id">
-                自增ID
-              </a-select-option>
-            </a-select>
-            <a-input
-              style="width: 100%"
-              v-else-if="
-                currentValueType === '2' ||
-                  currentValueType === '5' ||
-                  currentValueType === '7' ||
-                  currentValueType === '8'
-              "
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-            >
-            </a-input>
-            <a-select
-              allowClear
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-              v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
-              @select="changeDefaultForDatetime"
-            >
-              <a-select-option key="$created_at">
-                创建时间
-              </a-select-option>
-              <a-select-option key="$updated_at">
-                更新时间
-              </a-select-option>
-              <a-select-option key="$custom_time">
-                自定义时间
-              </a-select-option>
-            </a-select>
-            <template v-else-if="currentValueType === '4' || currentValueType === '3'">
-              <a-date-picker
-                style="width: 100%"
-                v-decorator="['default_value', { rules: [{ required: false }] }]"
-                :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-                :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
-              />
-              <a-dropdown
-                :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
-                :trigger="['click']"
-                v-if="currentValueType === '3'"
-              >
-                <a><a-icon type="down" /> </a>
-                <a-menu slot="overlay" @click="onClick">
-                  <a-menu-item key="$created_at">
-                    <a>创建时间</a>
-                  </a-menu-item>
-                  <a-menu-item key="$updated_at">
-                    <a>更新时间</a>
-                  </a-menu-item>
-                </a-menu>
-              </a-dropdown>
-            </template>
-
-            <vue-json-editor
-              v-else-if="currentValueType === '6'"
-              :style="{ '--custom-height': `${200}px` }"
-              v-model="default_value_json"
-              :showBtns="false"
-              :mode="'code'"
-              lang="zh"
-              @json-change="onJsonChange"
-              @has-error="onJsonError"
-            />
-          </template>
-        </a-form-item>
-      </a-col>
-    </a-row>
-
-    <a-col :span="6">
-      <a-form-item
-        :label-col="horizontalFormItemLayout.labelCol"
-        :wrapper-col="horizontalFormItemLayout.wrapperCol"
-        label="必须"
-      >
-        <a-switch
-          @change="(checked) => onChange(checked, 'is_required')"
-          name="is_required"
-          v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-      <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一">
-        <a-switch
-          :disabled="isShowComputedArea"
-          @change="onChange"
-          name="is_unique"
-          v-decorator="['is_unique', { rules: [], valuePropName: 'checked' }]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span="6" v-if="currentValueType === '2'">
-      <a-form-item :label-col="horizontalFormItemLayout.labelCol" :wrapper-col="horizontalFormItemLayout.wrapperCol">
-        <template slot="label">
-          <span
-            style="position:relative;white-space:pre;"
-          >{{ `索引` }}
-            <a-tooltip title="字段可被用于检索，加速查询">
-              <a-icon
-                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                type="question-circle"
-                theme="filled"
-                @click="
-                  (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                  }
-                "
-              />
-            </a-tooltip>
-          </span>
-        </template>
-        <a-switch
-          :disabled="isShowComputedArea"
-          @change="onChange"
-          name="is_index"
-          v-decorator="['is_index', { rules: [], valuePropName: 'checked', initialValue: true }]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span="6">
-      <a-form-item
-        :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
-        :wrapper-col="horizontalFormItemLayout.wrapperCol"
-      >
-        <template slot="label">
-          <span
-            style="position:relative;white-space:pre;"
-          >{{ `显示` }}
-            <a-tooltip title="CI实例表格默认展示该字段">
-              <a-icon
-                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                type="question-circle"
-                theme="filled"
-                @click="
-                  (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                  }
-                "
-              />
-            </a-tooltip>
-          </span>
-        </template>
-        <a-switch
-          @change="onChange"
-          name="default_show"
-          v-decorator="['default_show', { rules: [], valuePropName: 'checked' }]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-      <a-form-item
-        :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
-        :wrapper-col="horizontalFormItemLayout.wrapperCol"
-        label="排序"
-      >
-        <a-switch
-          :disabled="isShowComputedArea"
-          @change="(checked) => onChange(checked, 'is_sortable')"
-          name="is_sortable"
-          v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
-        />
-      </a-form-item>
-    </a-col>
-
-    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
-      <a-form-item
-        :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
-        :wrapper-col="horizontalFormItemLayout.wrapperCol"
-      >
-        <template slot="label">
-          <span
-            style="position:relative;white-space:pre;"
-          >{{ `多值` }}
-            <a-tooltip title="字段的值是1个或者多个，接口返回的值的类型是list">
-              <a-icon
-                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                type="question-circle"
-                theme="filled"
-                @click="
-                  (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                  }
-                "
-              />
-            </a-tooltip>
-          </span>
-        </template>
-        <a-switch
-          :disabled="isShowComputedArea"
-          @change="(checked) => onChange(checked, 'is_list')"
-          name="is_list"
-          v-decorator="['is_list', { rules: [], valuePropName: 'checked' }]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider>
-    <a-row>
-      <a-col :span="24">
-        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="字体">
-          <FontArea ref="fontArea" />
-        </a-form-item>
-      </a-col>
-      <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
-        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值">
-          <PreValueArea ref="preValueArea" :canDefineScript="canDefineScript" :disabled="isShowComputedArea" />
-        </a-form-item>
-      </a-col>
-      <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
-        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-          <template slot="label">
-            <span
-              style="position:relative;white-space:pre;"
-            >{{ `计算属性` }}
-              <a-tooltip
-                :title="
-                  `该属性的值是通过模型的其它属性构建的表达式或者执行一段代码的方式计算而来，属性的引用方法为: {{ 属性名 }}`
-                "
-              >
-                <a-icon
-                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                  type="question-circle"
-                  theme="filled"
-                  @click="
-                    (e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                    }
-                  "
-                />
-              </a-tooltip>
-            </span>
-          </template>
-          <a-switch
-            :disabled="!canDefineComputed"
-            @change="(checked) => onChange(checked, 'is_computed')"
-            name="is_computed"
-            v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
-          />
-          <ComputedArea ref="computedArea" v-if="isShowComputedArea" :canDefineComputed="canDefineComputed" />
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-form-item v-if="hasFooter" :wrapper-col="{ offset: 18 }">
-      <a-button type="primary" @click="handleSubmit">新增</a-button>
-      <a-divider type="vertical" />
-      <a-button @click="handleClose">取消</a-button>
-    </a-form-item>
-  </a-form>
-</template>
-<script>
-import moment from 'moment'
-import vueJsonEditor from 'vue-json-editor'
-import { createAttribute, canDefineComputed } from '@/modules/cmdb/api/CITypeAttr'
-import { valueTypeMap } from '../../utils/const'
-import ComputedArea from './computedArea.vue'
-import PreValueArea from './preValueArea.vue'
-import FontArea from './fontArea.vue'
-
-export default {
-  name: 'CreateNewAttribute',
-  components: {
-    ComputedArea,
-    PreValueArea,
-    vueJsonEditor,
-    FontArea,
-  },
-  props: {
-    hasFooter: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      valueTypeMap,
-      formItemLayout: {
-        labelCol: { span: 8 },
-        wrapperCol: { span: 15 },
-      },
-      horizontalFormItemLayout: {
-        labelCol: { span: 16 },
-        wrapperCol: { span: 4 },
-      },
-      form: this.$form.createForm(this),
-      currentValueType: '2',
-      default_value_json: {},
-      default_value_json_right: true, // 当前json是否正确
-
-      canDefineComputed: false,
-      isShowComputedArea: false,
-
-      defaultForDatetime: '',
-    }
-  },
-  computed: {
-    canDefineScript() {
-      return this.canDefineComputed
-    },
-  },
-  methods: {
-    handleSubmit(isCloseModal = true) {
-      this.form.validateFields(async (err, values) => {
-        if (!err) {
-          if (values.choice_value) {
-            values.choice_value = values.choice_value.split('\n')
-          }
-
-          console.log(values)
-          const { is_required, default_show, default_value } = values
-          const data = { is_required, default_show }
-          delete values.is_required
-          delete values.default_show
-          if (values.value_type === '0' && default_value && default_value.length) {
-            values.default = { default: default_value[0] }
-          } else if (values.value_type === '6') {
-            if (this.default_value_json_right) {
-              values.default = { default: this.default_value_json }
-            } else {
-              values.default = { default: null }
-            }
-          } else if (default_value || default_value === 0) {
-            if (values.value_type === '3') {
-              if (default_value === '$created_at' || default_value === '$updated_at') {
-                values.default = { default: default_value }
-              } else {
-                values.default = { default: moment(default_value).format('YYYY-MM-DD HH:mm:ss') }
-              }
-            } else if (values.value_type === '4') {
-              values.default = { default: moment(default_value).format('YYYY-MM-DD') }
-            } else {
-              values.default = { default: default_value }
-            }
-          } else {
-            values.default = { default: null }
-          }
-          delete values.default_value
-          if (values.is_computed) {
-            const computedAreaData = this.$refs.computedArea.getData()
-            values = { ...values, ...computedAreaData }
-          } else {
-            // 如果是非计算属性，就看看有没有预定义值
-            if (!['6', '7'].includes(values.value_type)) {
-              const preValueAreaData = this.$refs.preValueArea.getData()
-              values = { ...values, ...preValueAreaData }
-            }
-          }
-          const fontOptions = this.$refs.fontArea.getData()
-
-          // is_index进行操作，除了文本   索引隐藏掉  文本  索引默认是true
-          // 框里的5种类型  is_index=true
-          // json类型、密码、链接  is_index=false
-          if (['6', '7', '8'].includes(values.value_type)) {
-            values.is_index = false
-          } else if (values.value_type !== '2') {
-            values.is_index = true
-          }
-          if (values.value_type === '7') {
-            values.value_type = '2'
-            values.is_password = true
-          }
-          if (values.value_type === '8') {
-            values.value_type = '2'
-            values.is_link = true
-          }
-          const { attr_id } = await createAttribute({ ...values, option: { fontOptions } })
-
-          this.form.resetFields()
-          this.currentValueType = '2'
-          if (!['6'].includes(values.value_type) && !values.is_password) {
-            this.$refs.preValueArea.valueList = []
-          }
-          this.$emit('done', attr_id, data, isCloseModal)
-        } else {
-          throw new Error()
-        }
-      })
-    },
-    handleClose() {
-      this.$emit('cancel')
-    },
-    async checkCanDefineComputed() {
-      try {
-        await canDefineComputed()
-        this.canDefineComputed = true
-      } catch {
-        this.canDefineComputed = false
-      }
-    },
-    handleChangeValueType(value) {
-      this.currentValueType = value
-      this.$nextTick(() => {
-        this.form.setFieldsValue({
-          default_value: this.form.getFieldValue('is_list') || value === '0' ? [] : null,
-        })
-      })
-    },
-    onChange(checked, property) {
-      if (property === 'is_computed') {
-        this.isShowComputedArea = checked
-        if (checked) {
-          this.form.setFieldsValue({
-            is_list: false,
-            is_unique: false,
-            is_index: false,
-            is_sortable: false,
-          })
-        }
-      }
-      if (property === 'is_list') {
-        this.form.setFieldsValue({
-          default_value: checked ? [] : '',
-        })
-      }
-      if (checked && property === 'is_sortable') {
-        this.$message.warning('选中排序，则必须也要选中！')
-        this.form.setFieldsValue({
-          is_required: true,
-        })
-      }
-      if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
-        this.$message.warning('选中排序，则必须也要选中！')
-        this.$nextTick(() => {
-          this.form.setFieldsValue({
-            is_required: true,
-          })
-        })
-      }
-    },
-    onJsonChange(value) {
-      this.default_value_json_right = true
-    },
-    onJsonError() {
-      this.default_value_json_right = false
-    },
-    selectIntDefaultValue(value) {
-      this.form.setFieldsValue({
-        default_value: [value],
-      })
-    },
-    changeDefaultForDatetime(value) {
-      this.defaultForDatetime = value
-      if (value === '$custom_time') {
-        this.form.setFieldsValue({
-          default_value: undefined,
-        })
-      }
-    },
-    onClick({ key }) {
-      console.log(key)
-      this.defaultForDatetime = key
-      this.form.setFieldsValue({
-        default_value: key,
-      })
-    },
-  },
-}
-</script>
-<style lang="less">
-.create-new-attribute {
-  .jsoneditor-outer {
-    height: var(--custom-height) !important;
-    border: 1px solid #2f54eb;
-  }
-  div.jsoneditor-menu {
-    background-color: #2f54eb;
-  }
-}
-.value-type-des {
-  font-size: 10px;
-  color: #a9a9a9;
-}
-</style>
+<template>
+  <a-form
+    :form="form"
+    class="create-new-attribute"
+    :label-col="formItemLayout.labelCol"
+    :wrapper-col="formItemLayout.wrapperCol"
+  >
+    <a-divider style="font-size:14px;margin-top:6px;">{{ $t('cmdb.ciType.basicConfig') }}</a-divider>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item :label="$t('cmdb.ciType.AttributeName')">
+          <a-input
+            name="name"
+            :placeholder="$t('cmdb.ciType.English')"
+            v-decorator="[
+              'name',
+              {
+                rules: [
+                  { required: true, message: $t('cmdb.ciType.inputAttributeName') },
+                  {
+                    message: $t('cmdb.ciType.attributeNameTips'),
+                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
+                  },
+                  { message: $t('cmdb.ciType.buildinAttribute'), pattern: RegExp('^(?!(id|_id|ci_id|type|_type|ci_type)$).*$') },
+                ],
+              },
+            ]"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item :label="$t('alias')">
+          <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item :label="$t('cmdb.ciType.DataType')">
+          <a-select
+            name="value_type"
+            style="width: 100%"
+            v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]"
+            @change="handleChangeValueType"
+          >
+            <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">
+              {{ value }}
+              <span class="value-type-des" v-if="key === '3'">yyyy-mm-dd HH:MM:SS</span>
+              <span class="value-type-des" v-if="key === '4'">yyyy-mm-dd</span>
+              <span class="value-type-des" v-if="key === '5'">HH:MM:SS</span>
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :span="currentValueType === '6' ? 24 : 12">
+        <a-form-item
+          :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
+          :wrapper-col="{ span: currentValueType === '6' ? 18 : 15 }"
+          :label="$t('cmdb.ciType.defaultValue')"
+        >
+          <template>
+            <a-select
+              v-if="form.getFieldValue('is_list')"
+              mode="tags"
+              :style="{ width: '100%' }"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-select>
+            <a-input-number
+              style="width: 100%"
+              v-else-if="currentValueType === '1'"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input-number>
+            <a-select
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              mode="tags"
+              v-else-if="currentValueType === '0'"
+              @select="selectIntDefaultValue"
+            >
+              <a-select-option key="$auto_inc_id">
+                {{ $t('cmdb.ciType.autoIncID') }}
+              </a-select-option>
+            </a-select>
+            <a-input
+              style="width: 100%"
+              v-else-if="
+                currentValueType === '2' ||
+                  currentValueType === '5' ||
+                  currentValueType === '7' ||
+                  currentValueType === '8'
+              "
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input>
+            <a-select
+              allowClear
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
+              @select="changeDefaultForDatetime"
+            >
+              <a-select-option key="$created_at">
+                {{ $t('createdAt') }}
+              </a-select-option>
+              <a-select-option key="$updated_at">
+                {{ $t('updatedAt') }}
+              </a-select-option>
+              <a-select-option key="$custom_time">
+                {{ $t('cmdb.ciType.customTime') }}
+              </a-select-option>
+            </a-select>
+            <template v-else-if="currentValueType === '4' || currentValueType === '3'">
+              <a-date-picker
+                style="width: 100%"
+                v-decorator="['default_value', { rules: [{ required: false }] }]"
+                :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
+              />
+              <a-dropdown
+                :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
+                :trigger="['click']"
+                v-if="currentValueType === '3'"
+              >
+                <a><a-icon type="down" /> </a>
+                <a-menu slot="overlay" @click="onClick">
+                  <a-menu-item key="$created_at">
+                    <a>{{ $t('createdAt') }}</a>
+                  </a-menu-item>
+                  <a-menu-item key="$updated_at">
+                    <a>{{ $t('updatedAt') }}</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+
+            <vue-json-editor
+              v-else-if="currentValueType === '6'"
+              :style="{ '--custom-height': `${200}px` }"
+              v-model="default_value_json"
+              :showBtns="false"
+              :mode="'code'"
+              lang="zh"
+              @json-change="onJsonChange"
+              @has-error="onJsonError"
+            />
+          </template>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-col :span="6">
+      <a-form-item
+        :label-col="horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        :label="$t('required')"
+      >
+        <a-switch
+          @change="(checked) => onChange(checked, 'is_required')"
+          name="is_required"
+          v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+      <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" :label="$t('cmdb.ciType.unique')">
+        <a-switch
+          :disabled="isShowComputedArea"
+          @change="onChange"
+          name="is_unique"
+          v-decorator="['is_unique', { rules: [], valuePropName: 'checked' }]"
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span="6" v-if="currentValueType === '2'">
+      <a-form-item :label-col="horizontalFormItemLayout.labelCol" :wrapper-col="horizontalFormItemLayout.wrapperCol">
+        <template slot="label">
+          <span
+            style="position:relative;white-space:pre;"
+          >{{ $t('cmdb.ciType.index') }}
+            <a-tooltip :title="$t('cmdb.ciType.indexTips')">
+              <a-icon
+                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                type="question-circle"
+                theme="filled"
+                @click="
+                  (e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                  }
+                "
+              />
+            </a-tooltip>
+          </span>
+        </template>
+        <a-switch
+          :disabled="isShowComputedArea"
+          @change="onChange"
+          name="is_index"
+          v-decorator="['is_index', { rules: [], valuePropName: 'checked', initialValue: true }]"
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span="6">
+      <a-form-item
+        :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+      >
+        <template slot="label">
+          <span
+            style="position:relative;white-space:pre;"
+          >{{ $t('cmdb.ciType.defaultShow') }}
+            <a-tooltip :title="$t('cmdb.ciType.defaultShowTips')">
+              <a-icon
+                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                type="question-circle"
+                theme="filled"
+                @click="
+                  (e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                  }
+                "
+              />
+            </a-tooltip>
+          </span>
+        </template>
+        <a-switch
+          @change="onChange"
+          name="default_show"
+          v-decorator="['default_show', { rules: [], valuePropName: 'checked' }]"
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+      <a-form-item
+        :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        :label="$t('cmdb.ciType.isSortable')"
+      >
+        <a-switch
+          :disabled="isShowComputedArea"
+          @change="(checked) => onChange(checked, 'is_sortable')"
+          name="is_sortable"
+          v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
+        />
+      </a-form-item>
+    </a-col>
+
+    <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
+      <a-form-item
+        :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+      >
+        <template slot="label">
+          <span
+            style="position:relative;white-space:pre;"
+          >{{ $t('cmdb.ciType.list') }}
+            <a-tooltip :title="$t('cmdb.ciType.listTips')">
+              <a-icon
+                style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                type="question-circle"
+                theme="filled"
+                @click="
+                  (e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                  }
+                "
+              />
+            </a-tooltip>
+          </span>
+        </template>
+        <a-switch
+          :disabled="isShowComputedArea"
+          @change="(checked) => onChange(checked, 'is_list')"
+          name="is_list"
+          v-decorator="['is_list', { rules: [], valuePropName: 'checked' }]"
+        />
+      </a-form-item>
+    </a-col>
+    <a-divider style="font-size:14px;margin-top:6px;">{{ $t('cmdb.ciType.advancedSettings') }}</a-divider>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :label="$t('cmdb.ciType.font')">
+          <FontArea ref="fontArea" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
+        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :label="$t('cmdb.ciType.choiceValue')">
+          <PreValueArea ref="preValueArea" :canDefineScript="canDefineScript" :disabled="isShowComputedArea" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
+        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+          <template slot="label">
+            <span
+              style="position:relative;white-space:pre;"
+            >{{ $t('cmdb.ciType.computedAttribute') }}
+              <a-tooltip
+                :title="
+                  $t('cmdb.ciType.computedAttributeTips')
+                "
+              >
+                <a-icon
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                  type="question-circle"
+                  theme="filled"
+                  @click="
+                    (e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                    }
+                  "
+                />
+              </a-tooltip>
+            </span>
+          </template>
+          <a-switch
+            :disabled="!canDefineComputed"
+            @change="(checked) => onChange(checked, 'is_computed')"
+            name="is_computed"
+            v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
+          />
+          <ComputedArea ref="computedArea" v-if="isShowComputedArea" :canDefineComputed="canDefineComputed" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="hasFooter" :wrapper-col="{ offset: 18 }">
+      <a-button type="primary" @click="handleSubmit">{{ $t('new') }}</a-button>
+      <a-divider type="vertical" />
+      <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script>
+import moment from 'moment'
+import vueJsonEditor from 'vue-json-editor'
+import { createAttribute, canDefineComputed } from '@/modules/cmdb/api/CITypeAttr'
+import { valueTypeMap } from '../../utils/const'
+import ComputedArea from './computedArea.vue'
+import PreValueArea from './preValueArea.vue'
+import FontArea from './fontArea.vue'
+
+export default {
+  name: 'CreateNewAttribute',
+  components: {
+    ComputedArea,
+    PreValueArea,
+    vueJsonEditor,
+    FontArea,
+  },
+  props: {
+    hasFooter: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      formItemLayout: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 15 },
+      },
+      horizontalFormItemLayout: {
+        labelCol: { span: 16 },
+        wrapperCol: { span: 4 },
+      },
+      form: this.$form.createForm(this),
+      currentValueType: '2',
+      default_value_json: {},
+      default_value_json_right: true, // Is the current json correct?
+
+      canDefineComputed: false,
+      isShowComputedArea: false,
+
+      defaultForDatetime: '',
+    }
+  },
+  computed: {
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+    canDefineScript() {
+      return this.canDefineComputed
+    },
+  },
+  methods: {
+    handleSubmit(isCloseModal = true) {
+      this.form.validateFields(async (err, values) => {
+        if (!err) {
+          if (values.choice_value) {
+            values.choice_value = values.choice_value.split('\n')
+          }
+
+          console.log(values)
+          const { is_required, default_show, default_value } = values
+          const data = { is_required, default_show }
+          delete values.is_required
+          delete values.default_show
+          if (values.value_type === '0' && default_value && default_value.length) {
+            values.default = { default: default_value[0] }
+          } else if (values.value_type === '6') {
+            if (this.default_value_json_right) {
+              values.default = { default: this.default_value_json }
+            } else {
+              values.default = { default: null }
+            }
+          } else if (default_value || default_value === 0) {
+            if (values.value_type === '3') {
+              if (default_value === '$created_at' || default_value === '$updated_at') {
+                values.default = { default: default_value }
+              } else {
+                values.default = { default: moment(default_value).format('YYYY-MM-DD HH:mm:ss') }
+              }
+            } else if (values.value_type === '4') {
+              values.default = { default: moment(default_value).format('YYYY-MM-DD') }
+            } else {
+              values.default = { default: default_value }
+            }
+          } else {
+            values.default = { default: null }
+          }
+          delete values.default_value
+          if (values.is_computed) {
+            const computedAreaData = this.$refs.computedArea.getData()
+            values = { ...values, ...computedAreaData }
+          } else {
+            // If it is a non-computed attribute, check to see if there is a predefined value
+            if (!['6', '7'].includes(values.value_type)) {
+              const preValueAreaData = this.$refs.preValueArea.getData()
+              values = { ...values, ...preValueAreaData }
+            }
+          }
+          const fontOptions = this.$refs.fontArea.getData()
+
+          // is_index: except for text, the index is hidden, text index default is true
+          // 5 types in the box,  is_index=true
+          // json, password, link  is_index=false
+          if (['6', '7', '8'].includes(values.value_type)) {
+            values.is_index = false
+          } else if (values.value_type !== '2') {
+            values.is_index = true
+          }
+          if (values.value_type === '7') {
+            values.value_type = '2'
+            values.is_password = true
+          }
+          if (values.value_type === '8') {
+            values.value_type = '2'
+            values.is_link = true
+          }
+          const { attr_id } = await createAttribute({ ...values, option: { fontOptions } })
+
+          this.form.resetFields()
+          this.currentValueType = '2'
+          if (!['6'].includes(values.value_type) && !values.is_password) {
+            this.$refs.preValueArea.valueList = []
+          }
+          this.$emit('done', attr_id, data, isCloseModal)
+        } else {
+          throw new Error()
+        }
+      })
+    },
+    handleClose() {
+      this.$emit('cancel')
+    },
+    async checkCanDefineComputed() {
+      try {
+        await canDefineComputed()
+        this.canDefineComputed = true
+      } catch {
+        this.canDefineComputed = false
+      }
+    },
+    handleChangeValueType(value) {
+      this.currentValueType = value
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          default_value: this.form.getFieldValue('is_list') || value === '0' ? [] : null,
+        })
+      })
+    },
+    onChange(checked, property) {
+      if (property === 'is_computed') {
+        this.isShowComputedArea = checked
+        if (checked) {
+          this.form.setFieldsValue({
+            is_list: false,
+            is_unique: false,
+            is_index: false,
+            is_sortable: false,
+          })
+        }
+      }
+      if (property === 'is_list') {
+        this.form.setFieldsValue({
+          default_value: checked ? [] : '',
+        })
+      }
+      if (checked && property === 'is_sortable') {
+        this.$message.warning(this.$t('cmdb.ciType.addAttributeTips1'))
+        this.form.setFieldsValue({
+          is_required: true,
+        })
+      }
+      if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
+        this.$message.warning(this.$t('cmdb.ciType.addAttributeTips1'))
+        this.$nextTick(() => {
+          this.form.setFieldsValue({
+            is_required: true,
+          })
+        })
+      }
+    },
+    onJsonChange(value) {
+      this.default_value_json_right = true
+    },
+    onJsonError() {
+      this.default_value_json_right = false
+    },
+    selectIntDefaultValue(value) {
+      this.form.setFieldsValue({
+        default_value: [value],
+      })
+    },
+    changeDefaultForDatetime(value) {
+      this.defaultForDatetime = value
+      if (value === '$custom_time') {
+        this.form.setFieldsValue({
+          default_value: undefined,
+        })
+      }
+    },
+    onClick({ key }) {
+      console.log(key)
+      this.defaultForDatetime = key
+      this.form.setFieldsValue({
+        default_value: key,
+      })
+    },
+  },
+}
+</script>
+<style lang="less">
+.create-new-attribute {
+  .jsoneditor-outer {
+    height: var(--custom-height) !important;
+    border: 1px solid #2f54eb;
+  }
+  div.jsoneditor-menu {
+    background-color: #2f54eb;
+  }
+}
+.value-type-des {
+  font-size: 10px;
+  color: #a9a9a9;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
index a128029..9d52aad 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
@@ -1,22 +1,22 @@
 <template>
   <a-card :bordered="false" :bodyStyle="{ padding: '0' }">
     <a-tabs :activeKey="activeKey" @change="changeTab" class="ops-tab" type="card">
-      <a-tab-pane key="1" tab="模型属性">
+      <a-tab-pane key="1" :tab="$t('cmdb.ciType.attributes')">
         <AttributesTable ref="attributesTable" :CITypeId="CITypeId" :CITypeName="CITypeName"></AttributesTable>
       </a-tab-pane>
-      <a-tab-pane forceRender key="2" tab="模型关联">
+      <a-tab-pane forceRender key="2" :tab="$t('cmdb.ciType.relation')">
         <RelationTable :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
       </a-tab-pane>
-      <a-tab-pane key="3" tab="触发器">
+      <a-tab-pane key="3" :tab="$t('cmdb.ciType.trigger')">
         <TriggerTable ref="triggerTable" :CITypeId="CITypeId"></TriggerTable>
       </a-tab-pane>
-      <a-tab-pane key="4" tab="属性自动发现">
+      <a-tab-pane key="4" :tab="$t('cmdb.ciType.attributeAD')">
         <AttrAD :CITypeId="CITypeId"></AttrAD>
       </a-tab-pane>
-      <a-tab-pane key="5" tab="关系自动发现">
+      <a-tab-pane key="5" :tab="$t('cmdb.ciType.relationAD')">
         <RelationAD :CITypeId="CITypeId"></RelationAD>
       </a-tab-pane>
-      <a-tab-pane key="6" tab="权限设置">
+      <a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
         <GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
       </a-tab-pane>
     </a-tabs>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/computedArea.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/computedArea.vue
index 483a599..1d43814 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/computedArea.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/computedArea.vue
@@ -1,90 +1,90 @@
-<template>
-  <a-tabs v-model="activeKey" size="small" :tabBarStyle="{ borderBottom: 'none' }">
-    <a-tab-pane key="expr" :disabled="!canDefineComputed">
-      <span style="font-size:12px;" slot="tab">表达式</span>
-      <a-textarea v-model="compute_expr" :placeholder="`{{a}}+{{b}}`" :rows="2" :disabled="!canDefineComputed" />
-    </a-tab-pane>
-    <a-tab-pane key="script" :disabled="!canDefineComputed">
-      <span style="font-size:12px;" slot="tab">代码</span>
-      <codemirror style="z-index: 9999" :options="cmOptions" v-model="compute_script"></codemirror>
-    </a-tab-pane>
-    <template slot="tabBarExtraContent" v-if="showCalcComputed">
-      <a-button type="primary" size="small" @click="handleCalcComputed">
-        应用
-      </a-button>
-      <a-tooltip title="所有CI触发计算">
-        <a-icon type="question-circle" style="margin-left:5px" />
-      </a-tooltip>
-    </template>
-  </a-tabs>
-</template>
-
-<script>
-import { codemirror } from 'vue-codemirror'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/monokai.css'
-
-require('codemirror/mode/python/python.js')
-export default {
-  name: 'ComputedArea',
-  components: { codemirror },
-  props: {
-    canDefineComputed: {
-      type: Boolean,
-      default: true,
-    },
-    showCalcComputed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      activeKey: 'expr', // expr script
-      compute_expr: '',
-      compute_script: 'def computed(): \n    return',
-      cmOptions: {
-        lineNumbers: true,
-        mode: 'python',
-        height: '200px',
-        theme: 'monokai',
-        tabSize: 4,
-        lineWrapping: true,
-        readOnly: !this.canDefineComputed,
-      },
-    }
-  },
-  methods: {
-    getData() {
-      const { activeKey, compute_expr, compute_script } = this
-      if (activeKey === 'expr') {
-        return { compute_expr, compute_script: null }
-      } else if (activeKey === 'script') {
-        return { compute_script, compute_expr: null }
-      }
-    },
-    setData(data) {
-      const { compute_expr, compute_script } = data
-      this.compute_expr = compute_expr
-      this.compute_script = compute_script || 'def computed(): \n    return'
-      if (compute_script) {
-        this.activeKey = 'script'
-      } else {
-        this.activeKey = 'expr'
-      }
-    },
-    handleCalcComputed() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确认触发将保存当前配置及触发所有CI的计算？`,
-        onOk() {
-          that.$emit('handleCalcComputed')
-        },
-      })
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <a-tabs v-model="activeKey" size="small" :tabBarStyle="{ borderBottom: 'none' }">
+    <a-tab-pane key="expr" :disabled="!canDefineComputed">
+      <span style="font-size:12px;" slot="tab">{{ $t('cmdb.ciType.expr') }}</span>
+      <a-textarea v-model="compute_expr" :placeholder="`{{a}}+{{b}}`" :rows="2" :disabled="!canDefineComputed" />
+    </a-tab-pane>
+    <a-tab-pane key="script" :disabled="!canDefineComputed">
+      <span style="font-size:12px;" slot="tab">{{ $t('cmdb.ciType.code') }}</span>
+      <codemirror style="z-index: 9999" :options="cmOptions" v-model="compute_script"></codemirror>
+    </a-tab-pane>
+    <template slot="tabBarExtraContent" v-if="showCalcComputed">
+      <a-button type="primary" size="small" @click="handleCalcComputed">
+        {{ $t('cmdb.ciType.apply') }}
+      </a-button>
+      <a-tooltip :title="$t('cmdb.ciType.computeForAllCITips')">
+        <a-icon type="question-circle" style="margin-left:5px" />
+      </a-tooltip>
+    </template>
+  </a-tabs>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/monokai.css'
+
+require('codemirror/mode/python/python.js')
+export default {
+  name: 'ComputedArea',
+  components: { codemirror },
+  props: {
+    canDefineComputed: {
+      type: Boolean,
+      default: true,
+    },
+    showCalcComputed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeKey: 'expr', // expr script
+      compute_expr: '',
+      compute_script: 'def computed(): \n    return',
+      cmOptions: {
+        lineNumbers: true,
+        mode: 'python',
+        height: '200px',
+        theme: 'monokai',
+        tabSize: 4,
+        lineWrapping: true,
+        readOnly: !this.canDefineComputed,
+      },
+    }
+  },
+  methods: {
+    getData() {
+      const { activeKey, compute_expr, compute_script } = this
+      if (activeKey === 'expr') {
+        return { compute_expr, compute_script: null }
+      } else if (activeKey === 'script') {
+        return { compute_script, compute_expr: null }
+      }
+    },
+    setData(data) {
+      const { compute_expr, compute_script } = data
+      this.compute_expr = compute_expr
+      this.compute_script = compute_script || 'def computed(): \n    return'
+      if (compute_script) {
+        this.activeKey = 'script'
+      } else {
+        this.activeKey = 'expr'
+      }
+    },
+    handleCalcComputed() {
+      const that = this
+      this.$confirm({
+        title: this.$t('warning'),
+        content: this.$t('cmdb.ciType.confirmcomputeForAllCITips'),
+        onOk() {
+          that.$emit('handleCalcComputed')
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
index c54faad..d9051da 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
@@ -1,940 +1,952 @@
-<template>
-  <div class="ci-types-wrap" :style="{ height: `${windowHeight - 66}px` }">
-    <div v-if="!CITypeGroups.length" class="ci-types-empty">
-      <a-empty :image="emptyImage" description=""></a-empty>
-      <a-button icon="plus" size="small" type="primary" @click="handleClickAddGroup">新增分组</a-button>
-    </div>
-    <SplitPane
-      v-else
-      :min="280"
-      :max="500"
-      :paneLengthPixel.sync="paneLengthPixel"
-      appName="cmdb-ci-types"
-      triggerColor="#F0F5FF"
-      :triggerLength="18"
-    >
-      <template #one>
-        <div class="ci-types-left">
-          <div class="ci-types-left-title">
-            <a-button
-              :disabled="!permissions.includes('admin') && !permissions.includes('cmdb_admin')"
-              type="primary"
-              size="small"
-              icon="plus"
-              @click="handleClickAddGroup"
-              class="ops-button-primary"
-            >分组</a-button
-            >
-            <a-space>
-              <a
-                @click="
-                  () => {
-                    $refs.attributeStore.open()
-                  }
-                "
-              >属性库</a
-              >
-              <a-dropdown v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')">
-                <a><ops-icon type="ops-menu"/></a>
-                <a-menu slot="overlay">
-                  <a-menu-item key="0">
-                    <a-upload
-                      name="file"
-                      accept=".json"
-                      :showUploadList="false"
-                      style="display: inline-block"
-                      action="/api/v0.1/ci_types/template/import/file"
-                      @change="changeUploadFile"
-                    >
-                      <a><a-icon type="upload"/></a><a> 导入</a>
-                    </a-upload>
-                  </a-menu-item>
-                  <a-menu-item key="1">
-                    <a-space>
-                      <a href="/api/v0.1/ci_types/template/export/file"><a-icon type="download" /> 导出</a>
-                    </a-space>
-                  </a-menu-item>
-                </a-menu>
-              </a-dropdown>
-            </a-space>
-          </div>
-          <draggable class="ci-types-left-content" :list="CITypeGroups" @end="handleChangeGroups" filter=".undraggable">
-            <div v-for="g in CITypeGroups" :key="g.id || g.name">
-              <div
-                :class="
-                  `${currentGId === g.id && !currentCId ? 'selected' : ''} ci-types-left-group ${
-                    g.id === -1 ? 'undraggable' : ''
-                  }`
-                "
-                @click="handleClickGroup(g.id)"
-              >
-                <div>
-                  <OpsMoveIcon
-                    style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 10px"
-                  />
-                  <span style="font-weight:700">{{ g.name || '其他' }}</span>
-                  <span :style="{ color: '#c3cdd7' }">({{ g.ci_types.length }})</span>
-                </div>
-                <a-space>
-                  <a-tooltip>
-                    <template slot="title">在该组中新增CI模型</template>
-                    <a><a-icon type="plus" @click="handleCreate(g)"/></a>
-                  </a-tooltip>
-                  <template v-if="g.id !== -1">
-                    <a-tooltip>
-                      <template slot="title">编辑组名称</template>
-                      <a><a-icon type="edit" @click="handleEditGroup(g)"/></a>
-                    </a-tooltip>
-                    <a-tooltip>
-                      <template slot="title">删除该组</template>
-                      <a style="color: red"><a-icon type="delete" @click="handleDeleteGroup(g)"/></a>
-                    </a-tooltip>
-                  </template>
-                </a-space>
-              </div>
-              <draggable
-                v-model="g.ci_types"
-                group="ciType"
-                :animation="100"
-                @start="start(g)"
-                @end="end(g)"
-                @add="add(g)"
-              >
-                <div
-                  v-for="ci in g.ci_types"
-                  :key="ci.id"
-                  :class="`${currentCId === ci.id ? 'selected' : ''} ci-types-left-detail`"
-                  @click="handleClickCIType(g.id, ci.id, ci.name)"
-                >
-                  <div>
-                    <OpsMoveIcon
-                      style="width: 17px; height: 17px; display: none; position: absolute; left: 15px; top: 5px"
-                    />
-                    <span class="ci-types-left-detail-icon">
-                      <template v-if="ci.icon">
-                        <img
-                          v-if="ci.icon.split('$$')[2]"
-                          :src="`/api/common-setting/v1/file/${ci.icon.split('$$')[3]}`"
-                        />
-                        <ops-icon
-                          v-else
-                          :style="{
-                            color: ci.icon.split('$$')[1],
-                            fontSize: '14px',
-                          }"
-                          :type="ci.icon.split('$$')[0]"
-                        />
-                      </template>
-                      <span :style="{ color: '#2f54eb' }" v-else>{{ ci.name[0].toUpperCase() }}</span>
-                    </span>
-                  </div>
-                  <span class="ci-types-left-detail-title">{{ ci.alias || ci.name }}</span>
-                  <a-space class="ci-types-left-detail-action">
-                    <a><a-icon type="user-add" @click="(e) => handlePerm(e, ci)"/></a>
-                    <a><a-icon type="edit" @click="(e) => handleEdit(e, ci)"/></a>
-                    <a
-                      v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')"
-                      @click="(e) => handleDownloadCiType(e, ci)"
-                    ><a-icon
-                      type="download"
-                    /></a>
-                    <a style="color: red" @click="(e) => handleDelete(e, ci)"><a-icon type="delete"/></a>
-                  </a-space>
-                </div>
-              </draggable>
-            </div>
-          </draggable>
-        </div>
-      </template>
-      <template #two>
-        <div class="ci-types-right">
-          <CITypeDetail v-if="currentCId" :CITypeId="currentCId" :CITypeName="currentCName" />
-          <div v-else class="ci-types-right-empty">
-            <a-empty :image="emptyImage" description=""></a-empty>
-            <a-button icon="plus" size="small" type="primary" @click="handleCreateCiFromEmpty">新增CI模型</a-button>
-          </div>
-        </div>
-      </template>
-    </SplitPane>
-    <a-modal v-model="modalVisible" :title="modalTitle" @ok="handleSubmitEditGroup">
-      <a-form-item label="名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
-        <a-input v-model="editingInput" />
-      </a-form-item>
-    </a-modal>
-    <CustomDrawer
-      :closable="false"
-      :title="drawerTitle"
-      :visible="drawerVisible"
-      @close="onClose"
-      placement="right"
-      width="820px"
-      :destroyOnClose="true"
-    >
-      <a-form
-        :form="form"
-        :layout="formLayout"
-        :label-col="formItemLayout.labelCol"
-        :wrapper-col="formItemLayout.wrapperCol"
-      >
-        <a-form-item label="模型名(英文)">
-          <a-input
-            name="name"
-            placeholder="英文"
-            v-decorator="[
-              'name',
-              {
-                rules: [
-                  { required: true, message: '请输入属性名' },
-                  {
-                    message: '不能以数字开头，可以是英文 数字以及下划线 (_)',
-                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
-                  },
-                ],
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item label="别名">
-          <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
-        </a-form-item>
-        <a-form-item label="图标">
-          <IconArea class="ci_types-icon-area" ref="iconArea" />
-        </a-form-item>
-        <a-form-item label="默认排序" v-if="drawerTitle === '编辑模型'">
-          <el-select
-            size="small"
-            filterable
-            clearable
-            v-decorator="['default_order_attr', { rules: [{ required: false, message: '请选择默认排序字段' }] }]"
-          >
-            <el-option
-              :key="item.name"
-              :value="item.name"
-              v-for="item in orderSelectionOptions"
-              :label="item.alias || item.name"
-            >
-              <span> {{ item.alias || item.name }}</span>
-              <span :title="item.name" style="font-size:10px;color:#afafaf;"> {{ item.name }}</span>
-            </el-option>
-            <a-divider :style="{ margin: '5px 0' }" />
-            <div :style="{ textAlign: 'right' }">
-              <a-radio-group v-model="default_order_asc">
-                <a-radio value="1">
-                  正序
-                </a-radio>
-                <a-radio value="2">
-                  倒序
-                </a-radio>
-              </a-radio-group>
-            </div>
-          </el-select>
-        </a-form-item>
-        <a-form-item label="唯一标识">
-          <el-select
-            size="small"
-            filterable
-            optionFilterProp="children"
-            name="unique_key"
-            :filter-method="filterOption"
-            v-decorator="['unique_key', { rules: [{ required: true, message: '请选择唯一标识' }] }]"
-          >
-            <el-option
-              :key="item.id"
-              :value="item.id"
-              v-for="item in filterAttributes"
-              :label="item.alias || item.name"
-            >
-              <span> {{ item.alias || item.name }}</span>
-              <span :title="item.name" style="font-size:10px;color:#afafaf;"> {{ item.name }}</span>
-            </el-option>
-          </el-select>
-          <a-divider type="vertical" />
-          <a @click="handleCreatNewAttr">找不到想要的?</a>
-        </a-form-item>
-        <div v-if="newAttrAreaVisible" :style="{ padding: '15px 8px 0 8px', backgroundColor: '#fafafa' }">
-          <create-new-attribute
-            ref="createNewAttribute"
-            @done="handleCreateNewAttrDone"
-            @cancel="newAttrAreaVisible = false"
-          ></create-new-attribute>
-        </div>
-        <a-form-item>
-          <a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
-        </a-form-item>
-        <div class="custom-drawer-bottom-action">
-          <a-button @click="handleSubmit" :loading="loading" type="primary" style="margin-right: 1rem">确定</a-button>
-          <a-button @click="onClose">取消</a-button>
-        </div>
-      </a-form>
-    </CustomDrawer>
-    <CMDBGrant ref="cmdbGrant" resourceType="CIType" app_id="cmdb" />
-    <AttributeStore ref="attributeStore" />
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import router, { resetRouter } from '@/router'
-import store from '@/store'
-import draggable from 'vuedraggable'
-import { Select, Option } from 'element-ui'
-import { createCIType, updateCIType, deleteCIType } from '@/modules/cmdb/api/CIType'
-import {
-  getCITypeGroupsConfig,
-  postCITypeGroup,
-  putCITypeGroupByGId,
-  deleteCITypeGroup,
-  putCITypeGroups,
-} from '@/modules/cmdb/api/ciTypeGroup'
-import { searchAttributes, getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-import CreateNewAttribute from './ceateNewAttribute.vue'
-import CITypeDetail from './ciTypedetail.vue'
-import emptyImage from '@/assets/data_empty.png'
-import { searchResourceType } from '@/modules/acl/api/resource'
-import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
-import IconArea from './iconArea.vue'
-import SplitPane from '@/components/SplitPane'
-import CMDBGrant from '../../components/cmdbGrant'
-import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
-import AttributeStore from './attributeStore.vue'
-import { getAllDepAndEmployee } from '@/api/company'
-
-export default {
-  name: 'CITypes',
-  components: {
-    draggable,
-    CreateNewAttribute,
-    CITypeDetail,
-    CMDBGrant,
-    ElSelect: Select,
-    ElOption: Option,
-    IconArea,
-    SplitPane,
-    OpsMoveIcon,
-    AttributeStore,
-  },
-  inject: ['reload'],
-  data() {
-    return {
-      emptyImage,
-      modalTitle: '新增分组',
-      modalVisible: false,
-      editingGroup: null,
-      editingInput: '',
-
-      CITypeGroups: [],
-      allAttributes: [],
-      currentId: null,
-
-      form: this.$form.createForm(this),
-      drawerVisible: false,
-      drawerTitle: '',
-      selectGroup: {}, // 在当前group下新增ci type
-
-      formLayout: 'horizontal',
-      newAttrAreaVisible: false,
-
-      resource_type: {},
-
-      paneLengthPixel: 280,
-      loading: false,
-
-      startId: null,
-      startGroup: null,
-      endId: null,
-      addId: null,
-
-      filterInput: '',
-
-      orderSelectionOptions: [],
-      default_order_asc: '1',
-
-      allTreeDepAndEmp: [],
-    }
-  },
-  computed: {
-    formItemLayout() {
-      const { formLayout } = this
-      return formLayout === 'horizontal'
-        ? {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 16 },
-          }
-        : {}
-    },
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    permissions() {
-      return this.$store.state.user?.roles?.permissions || []
-    },
-    currentGId() {
-      if (this.currentId) {
-        return Number(this.currentId.split('%')[0])
-      }
-      return null
-    },
-    currentCId() {
-      if (this.currentId) {
-        if (this.currentId.split('%')[1] !== 'null') {
-          return Number(this.currentId.split('%')[1])
-        }
-        return null
-      }
-      return null
-    },
-    currentCName() {
-      if (this.currentId) {
-        console.log(this.currentId)
-        if (this.currentId.split('%')[2] !== 'null') {
-          return this.currentId.split('%')[2]
-        }
-        return null
-      }
-      return null
-    },
-    filterAttributes() {
-      // 唯一标识 排除掉choice password 计算属性  json
-      const _attributes = this.allAttributes.filter(
-        (item) => !item.is_choice && !item.is_computed && !['6', '7'].includes(item.value_type)
-      )
-      if (this.filterInput) {
-        return _attributes.filter(
-          (item) =>
-            item.name.toLowerCase().includes(this.filterInput.toLowerCase()) ||
-            item.alias.toLowerCase().includes(this.filterInput.toLowerCase())
-        )
-      }
-      return _attributes
-    },
-  },
-  provide() {
-    return {
-      resource_type: () => {
-        return this.resource_type
-      },
-      provide_allTreeDepAndEmp: () => {
-        return this.allTreeDepAndEmp
-      },
-    }
-  },
-  mounted() {
-    this.getAllDepAndEmployee()
-    const _currentId = localStorage.getItem('ops_cityps_currentId')
-    if (_currentId) {
-      this.currentId = _currentId
-    }
-    searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
-      this.resource_type = { groups: res.groups, id2perms: res.id2perms }
-    })
-    this.loadCITypes(!_currentId)
-    this.getAttributes()
-  },
-  methods: {
-    getAllDepAndEmployee() {
-      getAllDepAndEmployee({ block: 0 }).then((res) => {
-        this.allTreeDepAndEmp = res
-      })
-    },
-    async loadCITypes(isResetCurrentId = false) {
-      const groups = await getCITypeGroupsConfig({ need_other: true })
-      let alreadyReset = false
-      if (isResetCurrentId) {
-        this.currentId = null
-      }
-      this.$nextTick(() => {
-        groups.forEach((g) => {
-          if (!g.id) {
-            // 给未分组增加一个假的id
-            g.id = -1
-          }
-          if (isResetCurrentId && !alreadyReset && g.ci_types && g.ci_types.length) {
-            this.currentId = `${g.id}%${g.ci_types[0].id}%${g.ci_types[0].name}`
-            alreadyReset = true
-          }
-          if (!g.ci_types) {
-            g.ci_types = []
-          }
-        })
-        this.CITypeGroups = groups
-        localStorage.setItem('ops_cityps_currentId', this.currentId)
-      })
-    },
-    getAttributes() {
-      searchAttributes({ page_size: 10000 }).then((res) => {
-        this.allAttributes = res.attributes
-      })
-    },
-    handleClickAddGroup() {
-      this.editingGroup = {}
-      this.editingInput = ''
-      this.modalTitle = '新增分组'
-      this.modalVisible = true
-    },
-    async handleSubmitEditGroup() {
-      if (this.editingGroup && this.editingGroup.id && this.editingGroup.id !== -1) {
-        await putCITypeGroupByGId(this.editingGroup.id, {
-          name: this.editingInput,
-          type_ids: this.editingGroup.ci_types.map((i) => i.id),
-        })
-        this.$message.success('更新成功!')
-      } else {
-        const { id } = await postCITypeGroup({ name: this.editingInput })
-        this.currentId = `${id}%null%null`
-        this.$message.success('新增成功!')
-      }
-      this.modalVisible = false
-      localStorage.setItem('ops_cityps_currentId', this.currentId)
-      this.loadCITypes()
-    },
-    handleClickGroup(gId) {
-      this.currentId = null
-      this.$nextTick(() => {
-        this.currentId = `${gId}%null%null`
-        localStorage.setItem('ops_cityps_currentId', this.currentId)
-      })
-    },
-    handleClickCIType(gId, cId, cName) {
-      this.currentId = null
-      this.$nextTick(() => {
-        this.currentId = `${gId}%${cId}%${cName}`
-        localStorage.setItem('ops_cityps_currentId', this.currentId)
-      })
-    },
-    handleCreate(g) {
-      this.drawerTitle = '新增模型'
-      this.drawerVisible = true
-      this.selectGroup = g
-      this.$nextTick(() => {
-        this.$refs.iconArea.setIcon()
-      })
-    },
-    handleCreateCiFromEmpty() {
-      this.drawerTitle = '新增模型'
-      this.drawerVisible = true
-      const _find = this.CITypeGroups.find((item) => item.id === this.currentGId)
-      this.selectGroup = _find
-      this.$nextTick(() => {
-        this.$refs.iconArea.setIcon()
-      })
-    },
-    handleEditGroup(g) {
-      this.editingGroup = g
-      this.editingInput = g.name
-      this.modalTitle = '修改分组'
-      this.modalVisible = true
-    },
-    async handleDeleteGroup(g) {
-      if (g.ci_types && g.ci_types.length > 0) {
-        this.$message.error('该分组下有数据, 不能删除！')
-        return
-      }
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确定要删除分组 【${g.name}】 吗？`,
-        onOk() {
-          deleteCITypeGroup(g.id).then((res) => {
-            that.$message.info(`删除成功！`)
-            that.loadCITypes(true)
-          })
-        },
-      })
-    },
-    onClose() {
-      this.form.resetFields()
-      this.drawerVisible = false
-    },
-    handleCreateNewAttrDone() {
-      this.getAttributes()
-      this.newAttrAreaVisible = false
-    },
-    filterOption(input) {
-      this.filterInput = input
-    },
-    async handleSubmit(e) {
-      e.preventDefault()
-      this.form.validateFields(async (err, values) => {
-        if (!err) {
-          this.loading = true
-          if (values.default_order_attr && this.default_order_asc === '2') {
-            values.default_order_attr = `-${values.default_order_attr}`
-          }
-          const _icon = this.$refs.iconArea.getIcon()
-          const icon =
-            _icon && _icon.name ? `${_icon.name}$$${_icon.color || ''}$$${_icon.id || ''}$$${_icon.url || ''}` : ''
-          if (values.id) {
-            await this.updateCIType(values.id, {
-              ...values,
-              icon,
-            })
-          } else {
-            await this.createCIType({ ...values, icon })
-          }
-        }
-      })
-    },
-    start(g) {
-      console.log('start', g)
-      this.startId = g.id
-      this.startGroup = _.cloneDeep(g)
-    },
-    end(g) {
-      console.log('end', g)
-      this.endId = g.id
-      if (this.startId === g.id && g.id !== -1 && this.addId !== -1) {
-        // 通过一个group内部换位置
-        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
-          .then(() => {
-            this.$message.success('保存成功!')
-          })
-          .catch(() => {
-            this.loadCITypes(!this.currentId)
-          })
-          .finally(() => {
-            this.startId = null
-            this.endId = null
-            this.addId = null
-          })
-      }
-      if (this.startId === g.id && g.id !== -1 && this.addId === -1) {
-        // 从一个group换到其他
-        const changedCiTypes = this.startGroup.ci_types
-          .filter((ciType) => {
-            const _find = g.ci_types.find((gCiType) => ciType.id === gCiType.id)
-            if (_find) {
-              return false
-            }
-            return true
-          })
-          .map((item) => item.id)
-        deleteCITypeGroup(g.id, { name: g.name, type_ids: changedCiTypes })
-          .then(() => {
-            this.$message.success('保存成功!')
-          })
-          .catch(() => {
-            this.loadCITypes(!this.currentId)
-          })
-          .finally(() => {
-            this.startId = null
-            this.endId = null
-            this.addId = null
-          })
-      }
-    },
-    add(g) {
-      console.log('add', g)
-      this.addId = g.id
-      if (g.id && g.id !== -1) {
-        // 跨组换位置 不换到其他
-        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
-          .then(() => {
-            this.$message.success('保存成功!')
-          })
-          .catch(() => {
-            this.loadCITypes(!this.currentId)
-          })
-          .finally(() => {
-            this.startId = null
-            this.endId = null
-            this.addId = null
-          })
-      }
-    },
-    async handleChangeCITypes(e, g) {
-      if (g.id && g.id !== -1) {
-        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
-          .then(() => {
-            this.$message.success('保存成功!')
-          })
-          .catch(() => {
-            this.loadCITypes(!this.currentId)
-          })
-      }
-    },
-    async handleChangeGroups() {
-      putCITypeGroups({ group_ids: this.CITypeGroups.filter((c) => c.id).map((c) => c.id) })
-        .then(() => {
-          this.$message.success('保存成功!')
-        })
-        .catch(() => {
-          this.loadCITypes(!this.currentId)
-        })
-    },
-    async createCIType(data) {
-      const { type_id } = await createCIType(data).catch(() => {
-        this.loading = false
-      })
-      this.$message.success(`添加成功`)
-      if (this.selectGroup && this.selectGroup.id && this.selectGroup.id !== -1) {
-        const ids = this.selectGroup.ci_types.map((i) => i.id)
-        ids.push(type_id)
-        await putCITypeGroupByGId(this.selectGroup.id, {
-          name: this.selectGroup.name,
-          type_ids: ids,
-        })
-      }
-      this.currentId = `${this.selectGroup?.id || ''}%${type_id}%${data.name}`
-
-      localStorage.setItem('ops_cityps_currentId', this.currentId)
-      setTimeout(() => {
-        this.loadCITypes()
-        this.loading = false
-        this.drawerVisible = false
-      }, 1000)
-    },
-    async updateCIType(CITypeId, data) {
-      await updateCIType(CITypeId, data)
-        .then((res) => {
-          this.$message.success(`修改成功`)
-
-          const _currentId = this.currentId
-          this.currentId = null
-          this.$nextTick(() => {
-            this.currentId = _currentId
-
-            localStorage.setItem('ops_cityps_currentId', this.currentId)
-            setTimeout(() => {
-              this.loadCITypes()
-              this.loading = false
-              this.drawerVisible = false
-            }, 1000)
-          })
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    handleDelete(e, record) {
-      e.preventDefault()
-      e.stopPropagation()
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: `确定要删除模型 【${record.alias || record.name}】 吗？`,
-        onOk() {
-          deleteCIType(record.id).then((res) => {
-            that.$message.success(`删除成功！`)
-            that.loadCITypes(true)
-            that.resetRoute()
-          })
-        },
-      })
-    },
-    handleDownloadCiType(e, ci) {
-      e.preventDefault()
-      e.stopPropagation()
-      const x = new XMLHttpRequest()
-      x.open('GET', `/api/v0.1/ci_types/${ci.id}/template/export`, true)
-      x.responseType = 'blob'
-      x.onload = function(e) {
-        const url = window.URL.createObjectURL(x.response)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = `${ci.alias || ci.name}.json`
-        a.click()
-      }
-      x.send()
-    },
-    resetRoute() {
-      resetRouter()
-      const roles = store.getters.roles
-      store.dispatch('GenerateRoutes', { roles }, { root: true }).then(() => {
-        router.addRoutes(store.getters.appRoutes)
-      })
-    },
-    handleEdit(e, record) {
-      e.preventDefault()
-      e.stopPropagation()
-      this.drawerTitle = '编辑模型'
-      this.drawerVisible = true
-      getCITypeAttributesById(record.id).then((res) => {
-        this.orderSelectionOptions = res.attributes.filter((item) => item.is_required)
-        this.$nextTick(() => {
-          this.default_order_asc = record.default_order_attr && record.default_order_attr.startsWith('-') ? '2' : '1'
-
-          this.form.setFieldsValue({
-            id: record.id,
-            alias: record.alias,
-            name: record.name,
-            unique_key: record.unique_id,
-            default_order_attr:
-              record.default_order_attr && record.default_order_attr.startsWith('-')
-                ? record.default_order_attr.slice(1)
-                : record.default_order_attr,
-          })
-          this.$refs.iconArea.setIcon(
-            record.icon
-              ? {
-                  name: record.icon.split('$$')[0] || '',
-                  color: record.icon.split('$$')[1] || '',
-                  id: record.icon.split('$$')[2] ? Number(record.icon.split('$$')[2]) : null,
-                  url: record.icon.split('$$')[3] || '',
-                }
-              : {}
-          )
-        })
-      })
-    },
-    handleCreatNewAttr() {
-      this.newAttrAreaVisible = !this.newAttrAreaVisible
-      if (this.newAttrAreaVisible) {
-        this.$nextTick(() => {
-          this.$refs.createNewAttribute.checkCanDefineComputed()
-        })
-      }
-    },
-    handlePerm(e, ci) {
-      e.preventDefault()
-      e.stopPropagation()
-      roleHasPermissionToGrant({
-        app_id: 'cmdb',
-        resource_type_name: 'CIType',
-        perm: 'grant',
-        resource_name: ci.name,
-      }).then((res) => {
-        if (res.result) {
-          this.$refs.cmdbGrant.open({ name: ci.name, cmdbGrantType: 'ci_type', CITypeId: ci.id })
-        } else {
-          this.$message.error('权限不足！')
-        }
-      })
-    },
-    changeUploadFile({ file, fileList, event }) {
-      const key = 'upload'
-      if (file.status === 'uploading') {
-        this.$message.loading({ content: '正在导入中', key, duration: 0 })
-      }
-      if (file.status === 'done') {
-        this.$message.success({ content: '导入成功', key, duration: 2 })
-        this.reload()
-      }
-      if (file.status === 'error') {
-        this.$message.error({ content: '导入失败，请稍后重试', key, duration: 2 })
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.ci-types-wrap {
-  margin: 0 0 -24px 0;
-  .ci-types-empty {
-    position: absolute;
-    text-align: center;
-    left: 50%;
-    top: 40%;
-    transform: translate(-50%, -50%);
-  }
-  .ci-types-left {
-    width: 100%;
-    overflow: auto;
-    float: left;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    .ci-types-left-content {
-      max-height: calc(100% - 45px);
-      overflow: auto;
-    }
-    .ci-types-left-title {
-      padding: 10px 15px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    .ci-types-left-group {
-      position: relative;
-      padding: 8px 15px;
-      color: rgb(99, 99, 99);
-      cursor: pointer;
-      font-size: 14px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      > div:nth-child(2) {
-        font-size: 14px;
-        display: none;
-      }
-      &:hover {
-        background-color: #e1efff;
-        > div:nth-child(2) {
-          display: inline-flex;
-        }
-        svg {
-          display: inline !important;
-        }
-      }
-    }
-    .ci-types-left-detail {
-      padding: 3px 14px 3px 36px;
-      cursor: pointer;
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      margin-bottom: 4px;
-      .ci-types-left-detail-action {
-        display: none;
-        margin-left: auto;
-      }
-      .ci-types-left-detail-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        border-radius: 2px;
-        box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
-        margin-right: 6px;
-        background-color: #fff;
-        img {
-          max-height: 20px;
-          max-width: 20px;
-        }
-      }
-      &:hover {
-        background-color: #e1efff;
-        svg {
-          display: inline !important;
-        }
-        .ci-types-left-detail-action {
-          display: inline-flex;
-        }
-      }
-    }
-    .selected {
-      background-color: #e1efff;
-      .ci-types-left-detail-title {
-        font-weight: 700;
-      }
-    }
-  }
-  .ci-types-right {
-    width: 100%;
-    position: relative;
-    .ci-types-right-empty {
-      position: absolute;
-      text-align: center;
-      left: 50%;
-      top: 40%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  .ci-types-left,
-  .ci-types-right {
-    height: 100%;
-    background-color: #fff;
-  }
-}
-</style>
-
-<style lang="less">
-.ci_types-icon-area {
-  margin-top: 5px;
-  > .icon-area-item > span {
-    margin-right: 0 !important;
-  }
-}
-</style>
+<template>
+  <div class="ci-types-wrap" :style="{ height: `${windowHeight - 66}px` }">
+    <div v-if="!CITypeGroups.length" class="ci-types-empty">
+      <a-empty :image="emptyImage" description=""></a-empty>
+      <a-button icon="plus" size="small" type="primary" @click="handleClickAddGroup">{{
+        $t('cmdb.ciType.addGroup')
+      }}</a-button>
+    </div>
+    <SplitPane
+      v-else
+      :min="280"
+      :max="500"
+      :paneLengthPixel.sync="paneLengthPixel"
+      appName="cmdb-ci-types"
+      triggerColor="#F0F5FF"
+      :triggerLength="18"
+    >
+      <template #one>
+        <div class="ci-types-left">
+          <div class="ci-types-left-title">
+            <a-button
+              :disabled="!permissions.includes('admin') && !permissions.includes('cmdb_admin')"
+              type="primary"
+              size="small"
+              icon="plus"
+              @click="handleClickAddGroup"
+              class="ops-button-primary"
+            >{{ $t('cmdb.ciType.group') }}</a-button
+            >
+            <a-space>
+              <a
+                @click="
+                  () => {
+                    $refs.attributeStore.open()
+                  }
+                "
+              >{{ $t('cmdb.ciType.attributeLibray') }}</a
+              >
+              <a-dropdown v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')">
+                <a><ops-icon type="ops-menu" /></a>
+                <a-menu slot="overlay">
+                  <a-menu-item key="0">
+                    <a-upload
+                      name="file"
+                      accept=".json"
+                      :showUploadList="false"
+                      style="display: inline-block"
+                      action="/api/v0.1/ci_types/template/import/file"
+                      @change="changeUploadFile"
+                    >
+                      <a><a-icon type="upload" /></a><a> {{ $t('upload') }}</a>
+                    </a-upload>
+                  </a-menu-item>
+                  <a-menu-item key="1">
+                    <a-space>
+                      <a href="/api/v0.1/ci_types/template/export/file"><a-icon type="download" /> {{ $t('download') }}</a>
+                    </a-space>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </a-space>
+          </div>
+          <draggable class="ci-types-left-content" :list="CITypeGroups" @end="handleChangeGroups" filter=".undraggable">
+            <div v-for="g in CITypeGroups" :key="g.id || g.name">
+              <div
+                :class="`${currentGId === g.id && !currentCId ? 'selected' : ''} ci-types-left-group ${
+                  g.id === -1 ? 'undraggable' : ''
+                }`"
+                @click="handleClickGroup(g.id)"
+              >
+                <div>
+                  <OpsMoveIcon
+                    style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 10px"
+                  />
+                  <span style="font-weight: 700">{{ g.name || $t('other') }}</span>
+                  <span :style="{ color: '#c3cdd7' }">({{ g.ci_types.length }})</span>
+                </div>
+                <a-space>
+                  <a-tooltip>
+                    <template slot="title">{{ $t('cmdb.ciType.addCITypeInGroup') }}</template>
+                    <a><a-icon type="plus" @click="handleCreate(g)" /></a>
+                  </a-tooltip>
+                  <template v-if="g.id !== -1">
+                    <a-tooltip>
+                      <template slot="title">{{ $t('cmdb.ciType.editGroup') }}</template>
+                      <a><a-icon type="edit" @click="handleEditGroup(g)" /></a>
+                    </a-tooltip>
+                    <a-tooltip>
+                      <template slot="title">{{ $t('cmdb.ciType.deleteGroup') }}</template>
+                      <a style="color: red"><a-icon type="delete" @click="handleDeleteGroup(g)" /></a>
+                    </a-tooltip>
+                  </template>
+                </a-space>
+              </div>
+              <draggable
+                v-model="g.ci_types"
+                group="ciType"
+                :animation="100"
+                @start="start(g)"
+                @end="end(g)"
+                @add="add(g)"
+              >
+                <div
+                  v-for="ci in g.ci_types"
+                  :key="ci.id"
+                  :class="`${currentCId === ci.id ? 'selected' : ''} ci-types-left-detail`"
+                  @click="handleClickCIType(g.id, ci.id, ci.name)"
+                >
+                  <div>
+                    <OpsMoveIcon
+                      style="width: 17px; height: 17px; display: none; position: absolute; left: 15px; top: 5px"
+                    />
+                    <span class="ci-types-left-detail-icon">
+                      <template v-if="ci.icon">
+                        <img
+                          v-if="ci.icon.split('$$')[2]"
+                          :src="`/api/common-setting/v1/file/${ci.icon.split('$$')[3]}`"
+                        />
+                        <ops-icon
+                          v-else
+                          :style="{
+                            color: ci.icon.split('$$')[1],
+                            fontSize: '14px',
+                          }"
+                          :type="ci.icon.split('$$')[0]"
+                        />
+                      </template>
+                      <span :style="{ color: '#2f54eb' }" v-else>{{ ci.name[0].toUpperCase() }}</span>
+                    </span>
+                  </div>
+                  <span class="ci-types-left-detail-title">{{ ci.alias || ci.name }}</span>
+                  <a-space class="ci-types-left-detail-action">
+                    <a><a-icon type="user-add" @click="(e) => handlePerm(e, ci)" /></a>
+                    <a><a-icon type="edit" @click="(e) => handleEdit(e, ci)" /></a>
+                    <a
+                      v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')"
+                      @click="(e) => handleDownloadCiType(e, ci)">
+                      <a-icon type="download"/>
+                    </a>
+                    <a style="color: red" @click="(e) => handleDelete(e, ci)"><a-icon type="delete" /></a>
+                  </a-space>
+                </div>
+              </draggable>
+            </div>
+          </draggable>
+        </div>
+      </template>
+      <template #two>
+        <div class="ci-types-right">
+          <CITypeDetail v-if="currentCId" :CITypeId="currentCId" :CITypeName="currentCName" />
+          <div v-else class="ci-types-right-empty">
+            <a-empty :image="emptyImage" description=""></a-empty>
+            <a-button icon="plus" size="small" type="primary" @click="handleCreateCiFromEmpty">{{
+              $t('cmdb.ciType.addCIType')
+            }}</a-button>
+          </div>
+        </div>
+      </template>
+    </SplitPane>
+    <a-modal v-model="modalVisible" :title="modalTitle" @ok="handleSubmitEditGroup">
+      <a-form-item :label="$t('name')" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
+        <a-input v-model="editingInput" />
+      </a-form-item>
+    </a-modal>
+    <CustomDrawer
+      :closable="false"
+      :title="drawerTitle"
+      :visible="drawerVisible"
+      @close="onClose"
+      placement="right"
+      width="900px"
+      :destroyOnClose="true"
+    >
+      <a-form
+        :form="form"
+        :layout="formLayout"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-item :label="$t('cmdb.ciType.CITypeName')">
+          <a-input
+            name="name"
+            :placeholder="$t('cmdb.ciType.English')"
+            v-decorator="[
+              'name',
+              {
+                rules: [
+                  { required: true, message: $t('cmdb.ciType.inputAttributeName') },
+                  {
+                    message: $t('cmdb.ciType.attributeNameTips'),
+                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
+                  },
+                ],
+              },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('alias')">
+          <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
+        </a-form-item>
+        <a-form-item :label="$t('icon')">
+          <IconArea class="ci_types-icon-area" ref="iconArea" />
+        </a-form-item>
+        <a-form-item :label="$t('cmdb.ciType.defaultSort')" v-if="drawerTitle === $t('cmdb.ciType.editCIType')">
+          <el-select
+            size="small"
+            filterable
+            clearable
+            v-decorator="[
+              'default_order_attr',
+              { rules: [{ required: false, message: $t('cmdb.ciType.selectDefaultOrderAttr') }] },
+            ]"
+          >
+            <el-option
+              :key="item.name"
+              :value="item.name"
+              v-for="item in orderSelectionOptions"
+              :label="item.alias || item.name"
+            >
+              <span> {{ item.alias || item.name }}</span>
+              <span :title="item.name" style="font-size: 10px; color: #afafaf"> {{ item.name }}</span>
+            </el-option>
+            <a-divider :style="{ margin: '5px 0' }" />
+            <div :style="{ textAlign: 'right' }">
+              <a-radio-group v-model="default_order_asc">
+                <a-radio value="1">
+                  {{ $t('cmdb.ciType.asec') }}
+                </a-radio>
+                <a-radio value="2">
+                  {{ $t('cmdb.ciType.desc') }}
+                </a-radio>
+              </a-radio-group>
+            </div>
+          </el-select>
+        </a-form-item>
+        <a-form-item :label="$t('cmdb.ciType.uniqueKey')">
+          <el-select
+            size="small"
+            filterable
+            optionFilterProp="children"
+            name="unique_key"
+            :filter-method="filterOption"
+            v-decorator="['unique_key', { rules: [{ required: true, message: $t('cmdb.ciType.uniqueKeySelect') }] }]"
+            :placeholder="$t('placeholder2')"
+          >
+            <el-option
+              :key="item.id"
+              :value="item.id"
+              v-for="item in filterAttributes"
+              :label="item.alias || item.name"
+            >
+              <span> {{ item.alias || item.name }}</span>
+              <span :title="item.name" style="font-size: 10px; color: #afafaf"> {{ item.name }}</span>
+            </el-option>
+          </el-select>
+          <a-divider type="vertical" />
+          <a @click="handleCreatNewAttr">{{ $t('cmdb.ciType.notfound') }}</a>
+        </a-form-item>
+        <div v-if="newAttrAreaVisible" :style="{ padding: '15px 8px 0 8px', backgroundColor: '#fafafa' }">
+          <create-new-attribute
+            ref="createNewAttribute"
+            @done="handleCreateNewAttrDone"
+            @cancel="newAttrAreaVisible = false"
+          ></create-new-attribute>
+        </div>
+        <a-form-item>
+          <a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
+        </a-form-item>
+        <div class="custom-drawer-bottom-action">
+          <a-button @click="handleSubmit" :loading="loading" type="primary" style="margin-right: 1rem">{{
+            $t('confirm')
+          }}</a-button>
+          <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        </div>
+      </a-form>
+    </CustomDrawer>
+    <CMDBGrant ref="cmdbGrant" resourceType="CIType" app_id="cmdb" />
+    <AttributeStore ref="attributeStore" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import router, { resetRouter } from '@/router'
+import store from '@/store'
+import draggable from 'vuedraggable'
+import { Select, Option } from 'element-ui'
+import { createCIType, updateCIType, deleteCIType } from '@/modules/cmdb/api/CIType'
+import {
+  getCITypeGroupsConfig,
+  postCITypeGroup,
+  putCITypeGroupByGId,
+  deleteCITypeGroup,
+  putCITypeGroups,
+} from '@/modules/cmdb/api/ciTypeGroup'
+import { searchAttributes, getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import CreateNewAttribute from './ceateNewAttribute.vue'
+import CITypeDetail from './ciTypedetail.vue'
+import emptyImage from '@/assets/data_empty.png'
+import { searchResourceType } from '@/modules/acl/api/resource'
+import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
+import IconArea from './iconArea.vue'
+import SplitPane from '@/components/SplitPane'
+import CMDBGrant from '../../components/cmdbGrant'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
+import AttributeStore from './attributeStore.vue'
+import { getAllDepAndEmployee } from '@/api/company'
+
+export default {
+  name: 'CITypes',
+  components: {
+    draggable,
+    CreateNewAttribute,
+    CITypeDetail,
+    CMDBGrant,
+    ElSelect: Select,
+    ElOption: Option,
+    IconArea,
+    SplitPane,
+    OpsMoveIcon,
+    AttributeStore,
+  },
+  inject: ['reload'],
+  data() {
+    return {
+      emptyImage,
+      modalTitle: this.$t('cmdb.ciType.addGroup'),
+      modalVisible: false,
+      editingGroup: null,
+      editingInput: '',
+
+      CITypeGroups: [],
+      allAttributes: [],
+      currentId: null,
+
+      form: this.$form.createForm(this),
+      drawerVisible: false,
+      drawerTitle: '',
+      selectGroup: {}, // add CIType in group
+
+      formLayout: 'horizontal',
+      newAttrAreaVisible: false,
+
+      resource_type: {},
+
+      paneLengthPixel: 280,
+      loading: false,
+
+      startId: null,
+      startGroup: null,
+      endId: null,
+      addId: null,
+
+      filterInput: '',
+
+      orderSelectionOptions: [],
+      default_order_asc: '1',
+
+      allTreeDepAndEmp: [],
+    }
+  },
+  computed: {
+    formItemLayout() {
+      const { formLayout } = this
+      return formLayout === 'horizontal'
+        ? {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 16 },
+          }
+        : {}
+    },
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    permissions() {
+      return this.$store.state.user?.roles?.permissions || []
+    },
+    currentGId() {
+      if (this.currentId) {
+        return Number(this.currentId.split('%')[0])
+      }
+      return null
+    },
+    currentCId() {
+      if (this.currentId) {
+        if (this.currentId.split('%')[1] !== 'null') {
+          return Number(this.currentId.split('%')[1])
+        }
+        return null
+      }
+      return null
+    },
+    currentCName() {
+      if (this.currentId) {
+        console.log(this.currentId)
+        if (this.currentId.split('%')[2] !== 'null') {
+          return this.currentId.split('%')[2]
+        }
+        return null
+      }
+      return null
+    },
+    filterAttributes() {
+      // unique key, excludes: choice  password computed json
+      const _attributes = this.allAttributes.filter(
+        (item) => !item.is_choice && !item.is_computed && !['6', '7'].includes(item.value_type)
+      )
+      if (this.filterInput) {
+        return _attributes.filter(
+          (item) =>
+            item.name.toLowerCase().includes(this.filterInput.toLowerCase()) ||
+            item.alias.toLowerCase().includes(this.filterInput.toLowerCase())
+        )
+      }
+      return _attributes
+    },
+  },
+  provide() {
+    return {
+      resource_type: () => {
+        return this.resource_type
+      },
+      provide_allTreeDepAndEmp: () => {
+        return this.allTreeDepAndEmp
+      },
+    }
+  },
+  mounted() {
+    this.getAllDepAndEmployee()
+    const _currentId = localStorage.getItem('ops_cityps_currentId')
+    if (_currentId) {
+      this.currentId = _currentId
+    }
+    searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
+      this.resource_type = { groups: res.groups, id2perms: res.id2perms }
+    })
+    this.loadCITypes(!_currentId)
+    this.getAttributes()
+  },
+  methods: {
+    getAllDepAndEmployee() {
+      getAllDepAndEmployee({ block: 0 }).then((res) => {
+        this.allTreeDepAndEmp = res
+      })
+    },
+    async loadCITypes(isResetCurrentId = false) {
+      const groups = await getCITypeGroupsConfig({ need_other: true })
+      let alreadyReset = false
+      if (isResetCurrentId) {
+        this.currentId = null
+      }
+      this.$nextTick(() => {
+        groups.forEach((g) => {
+          if (!g.id) {
+            // Add a fake id to ungrouped
+            g.id = -1
+          }
+          if (isResetCurrentId && !alreadyReset && g.ci_types && g.ci_types.length) {
+            this.currentId = `${g.id}%${g.ci_types[0].id}%${g.ci_types[0].name}`
+            alreadyReset = true
+          }
+          if (!g.ci_types) {
+            g.ci_types = []
+          }
+        })
+        this.CITypeGroups = groups
+        localStorage.setItem('ops_cityps_currentId', this.currentId)
+      })
+    },
+    getAttributes() {
+      searchAttributes({ page_size: 10000 }).then((res) => {
+        this.allAttributes = res.attributes
+      })
+    },
+    handleClickAddGroup() {
+      this.editingGroup = {}
+      this.editingInput = ''
+      this.modalTitle = this.$t('cmdb.ciType.addGroup')
+      this.modalVisible = true
+    },
+    async handleSubmitEditGroup() {
+      if (this.editingGroup && this.editingGroup.id && this.editingGroup.id !== -1) {
+        await putCITypeGroupByGId(this.editingGroup.id, {
+          name: this.editingInput,
+          type_ids: this.editingGroup.ci_types.map((i) => i.id),
+        })
+        this.$message.success(this.$t('updateSuccess'))
+      } else {
+        const { id } = await postCITypeGroup({ name: this.editingInput })
+        this.currentId = `${id}%null%null`
+        this.$message.success(this.$t('addSuccess'))
+      }
+      this.modalVisible = false
+      localStorage.setItem('ops_cityps_currentId', this.currentId)
+      this.loadCITypes()
+    },
+    handleClickGroup(gId) {
+      this.currentId = null
+      this.$nextTick(() => {
+        this.currentId = `${gId}%null%null`
+        localStorage.setItem('ops_cityps_currentId', this.currentId)
+      })
+    },
+    handleClickCIType(gId, cId, cName) {
+      this.currentId = null
+      this.$nextTick(() => {
+        this.currentId = `${gId}%${cId}%${cName}`
+        localStorage.setItem('ops_cityps_currentId', this.currentId)
+      })
+    },
+    handleCreate(g) {
+      this.drawerTitle = this.$t('cmdb.ciType.addCIType')
+      this.drawerVisible = true
+      this.selectGroup = g
+      this.$nextTick(() => {
+        this.$refs.iconArea.setIcon()
+      })
+    },
+    handleCreateCiFromEmpty() {
+      this.drawerTitle = this.$t('cmdb.ciType.addCIType')
+      this.drawerVisible = true
+      const _find = this.CITypeGroups.find((item) => item.id === this.currentGId)
+      this.selectGroup = _find
+      this.$nextTick(() => {
+        this.$refs.iconArea.setIcon()
+      })
+    },
+    handleEditGroup(g) {
+      this.editingGroup = g
+      this.editingInput = g.name
+      this.modalTitle = this.$t('cmdb.ciType.editGroup')
+      this.modalVisible = true
+    },
+    async handleDeleteGroup(g) {
+      if (g.ci_types && g.ci_types.length > 0) {
+        this.$message.error(this.$t('cmdb.ciType.cannotDeleteGroupTips'))
+        return
+      }
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDeleteGroup', { groupName: `${g.name}` }),
+        onOk() {
+          deleteCITypeGroup(g.id).then((res) => {
+            that.$message.info(that.$t('deleteSuccess'))
+            that.loadCITypes(true)
+          })
+        },
+      })
+    },
+    onClose() {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    handleCreateNewAttrDone() {
+      this.getAttributes()
+      this.newAttrAreaVisible = false
+    },
+    filterOption(input) {
+      this.filterInput = input
+    },
+    async handleSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields(async (err, values) => {
+        if (!err) {
+          this.loading = true
+          if (values.default_order_attr && this.default_order_asc === '2') {
+            values.default_order_attr = `-${values.default_order_attr}`
+          }
+          const _icon = this.$refs.iconArea.getIcon()
+          const icon =
+            _icon && _icon.name ? `${_icon.name}$$${_icon.color || ''}$$${_icon.id || ''}$$${_icon.url || ''}` : ''
+          if (values.id) {
+            await this.updateCIType(values.id, {
+              ...values,
+              icon,
+            })
+          } else {
+            await this.createCIType({ ...values, icon })
+          }
+        }
+      })
+    },
+    start(g) {
+      console.log('start', g)
+      this.startId = g.id
+      this.startGroup = _.cloneDeep(g)
+    },
+    end(g) {
+      console.log('end', g)
+      this.endId = g.id
+      const that = this
+      if (this.startId === g.id && g.id !== -1 && this.addId !== -1) {
+        // Changing positions within a group
+        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
+          .then(() => {
+            this.$message.success(that.$t('saveSuccess'))
+          })
+          .catch(() => {
+            this.loadCITypes(!this.currentId)
+          })
+          .finally(() => {
+            this.startId = null
+            this.endId = null
+            this.addId = null
+          })
+      }
+      if (this.startId === g.id && g.id !== -1 && this.addId === -1) {
+        // Change from one group to another
+        const changedCiTypes = this.startGroup.ci_types
+          .filter((ciType) => {
+            const _find = g.ci_types.find((gCiType) => ciType.id === gCiType.id)
+            if (_find) {
+              return false
+            }
+            return true
+          })
+          .map((item) => item.id)
+        deleteCITypeGroup(g.id, { name: g.name, type_ids: changedCiTypes })
+          .then(() => {
+            this.$message.success(that.$t('saveSuccess'))
+          })
+          .catch(() => {
+            this.loadCITypes(!this.currentId)
+          })
+          .finally(() => {
+            this.startId = null
+            this.endId = null
+            this.addId = null
+          })
+      }
+    },
+    add(g) {
+      console.log('add', g)
+      this.addId = g.id
+      const that = this
+      if (g.id && g.id !== -1) {
+        // Change positions across groups without changing to others
+        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
+          .then(() => {
+            this.$message.success(that.$t('saveSuccess'))
+          })
+          .catch(() => {
+            this.loadCITypes(!this.currentId)
+          })
+          .finally(() => {
+            this.startId = null
+            this.endId = null
+            this.addId = null
+          })
+      }
+    },
+    async handleChangeCITypes(e, g) {
+      const that = this
+      if (g.id && g.id !== -1) {
+        putCITypeGroupByGId(g.id, { name: g.name, type_ids: g.ci_types.map((i) => i.id) })
+          .then(() => {
+            this.$message.success(that.$t('saveSuccess'))
+          })
+          .catch(() => {
+            this.loadCITypes(!this.currentId)
+          })
+      }
+    },
+    async handleChangeGroups() {
+      const that = this
+      putCITypeGroups({ group_ids: this.CITypeGroups.filter((c) => c.id).map((c) => c.id) })
+        .then(() => {
+          this.$message.success(that.$t('saveSuccess'))
+        })
+        .catch(() => {
+          this.loadCITypes(!this.currentId)
+        })
+    },
+    async createCIType(data) {
+      const { type_id } = await createCIType(data).catch(() => {
+        this.loading = false
+      })
+      this.$message.success(this.$t('addSuccess'))
+      if (this.selectGroup && this.selectGroup.id && this.selectGroup.id !== -1) {
+        const ids = this.selectGroup.ci_types.map((i) => i.id)
+        ids.push(type_id)
+        await putCITypeGroupByGId(this.selectGroup.id, {
+          name: this.selectGroup.name,
+          type_ids: ids,
+        })
+      }
+      this.currentId = `${this.selectGroup?.id || ''}%${type_id}%${data.name}`
+
+      localStorage.setItem('ops_cityps_currentId', this.currentId)
+      setTimeout(() => {
+        this.loadCITypes()
+        this.loading = false
+        this.drawerVisible = false
+      }, 1000)
+    },
+    async updateCIType(CITypeId, data) {
+      const that = this
+      await updateCIType(CITypeId, data)
+        .then((res) => {
+          this.$message.success(that.$t('updateSuccess'))
+
+          const _currentId = this.currentId
+          this.currentId = null
+          this.$nextTick(() => {
+            this.currentId = _currentId
+
+            localStorage.setItem('ops_cityps_currentId', this.currentId)
+            setTimeout(() => {
+              this.loadCITypes()
+              this.loading = false
+              this.drawerVisible = false
+            }, 1000)
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleDelete(e, record) {
+      e.preventDefault()
+      e.stopPropagation()
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDeleteCIType', { typeName: `${record.alias || record.name}` }),
+        onOk() {
+          deleteCIType(record.id).then((res) => {
+            that.$message.success(that.$t('deleteSuccess'))
+            that.loadCITypes(true)
+            that.resetRoute()
+          })
+        },
+      })
+    },
+    handleDownloadCiType(e, ci) {
+      e.preventDefault()
+      e.stopPropagation()
+      const x = new XMLHttpRequest()
+      x.open('GET', `/api/v0.1/ci_types/${ci.id}/template/export`, true)
+      x.responseType = 'blob'
+      x.onload = function (e) {
+        const url = window.URL.createObjectURL(x.response)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${ci.alias || ci.name}.json`
+        a.click()
+      }
+      x.send()
+    },
+    resetRoute() {
+      resetRouter()
+      const roles = store.getters.roles
+      store.dispatch('GenerateRoutes', { roles }, { root: true }).then(() => {
+        router.addRoutes(store.getters.appRoutes)
+      })
+    },
+    handleEdit(e, record) {
+      e.preventDefault()
+      e.stopPropagation()
+      this.drawerTitle = this.$t('cmdb.ciType.editCIType')
+      this.drawerVisible = true
+      getCITypeAttributesById(record.id).then((res) => {
+        this.orderSelectionOptions = res.attributes.filter((item) => item.is_required)
+        this.$nextTick(() => {
+          this.default_order_asc = record.default_order_attr && record.default_order_attr.startsWith('-') ? '2' : '1'
+
+          this.form.setFieldsValue({
+            id: record.id,
+            alias: record.alias,
+            name: record.name,
+            unique_key: record.unique_id,
+            default_order_attr:
+              record.default_order_attr && record.default_order_attr.startsWith('-')
+                ? record.default_order_attr.slice(1)
+                : record.default_order_attr,
+          })
+          this.$refs.iconArea.setIcon(
+            record.icon
+              ? {
+                  name: record.icon.split('$$')[0] || '',
+                  color: record.icon.split('$$')[1] || '',
+                  id: record.icon.split('$$')[2] ? Number(record.icon.split('$$')[2]) : null,
+                  url: record.icon.split('$$')[3] || '',
+                }
+              : {}
+          )
+        })
+      })
+    },
+    handleCreatNewAttr() {
+      this.newAttrAreaVisible = !this.newAttrAreaVisible
+      if (this.newAttrAreaVisible) {
+        this.$nextTick(() => {
+          this.$refs.createNewAttribute.checkCanDefineComputed()
+        })
+      }
+    },
+    handlePerm(e, ci) {
+      e.preventDefault()
+      e.stopPropagation()
+      roleHasPermissionToGrant({
+        app_id: 'cmdb',
+        resource_type_name: 'CIType',
+        perm: 'grant',
+        resource_name: ci.name,
+      }).then((res) => {
+        if (res.result) {
+          this.$refs.cmdbGrant.open({ name: ci.name, cmdbGrantType: 'ci_type', CITypeId: ci.id })
+        } else {
+          this.$message.error(this.$t('noPermission'))
+        }
+      })
+    },
+    changeUploadFile({ file, fileList, event }) {
+      const key = 'upload'
+      if (file.status === 'uploading') {
+        this.$message.loading({ content: this.$t('cmdb.ciType.uploading'), key, duration: 0 })
+      }
+      if (file.status === 'done') {
+        this.$message.success({ content: this.$t('uploadSuccess'), key, duration: 2 })
+        this.reload()
+      }
+      if (file.status === 'error') {
+        this.$message.error({ content: this.$t('cmdb.ciType.uploadFailed'), key, duration: 2 })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ci-types-wrap {
+  margin: 0 0 -24px 0;
+  .ci-types-empty {
+    position: absolute;
+    text-align: center;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+  }
+  .ci-types-left {
+    width: 100%;
+    overflow: auto;
+    float: left;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    .ci-types-left-content {
+      max-height: calc(100% - 45px);
+      overflow: auto;
+    }
+    .ci-types-left-title {
+      padding: 10px 15px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .ci-types-left-group {
+      position: relative;
+      padding: 8px 15px;
+      color: rgb(99, 99, 99);
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      > div:nth-child(2) {
+        font-size: 14px;
+        display: none;
+      }
+      &:hover {
+        background-color: #e1efff;
+        > div:nth-child(2) {
+          display: inline-flex;
+        }
+        svg {
+          display: inline !important;
+        }
+      }
+    }
+    .ci-types-left-detail {
+      padding: 3px 14px 3px 36px;
+      cursor: pointer;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-bottom: 4px;
+      .ci-types-left-detail-action {
+        display: none;
+        margin-left: auto;
+      }
+      .ci-types-left-detail-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
+        margin-right: 6px;
+        background-color: #fff;
+        img {
+          max-height: 20px;
+          max-width: 20px;
+        }
+      }
+      &:hover {
+        background-color: #e1efff;
+        svg {
+          display: inline !important;
+        }
+        .ci-types-left-detail-action {
+          display: inline-flex;
+        }
+      }
+    }
+    .selected {
+      background-color: #e1efff;
+      .ci-types-left-detail-title {
+        font-weight: 700;
+      }
+    }
+  }
+  .ci-types-right {
+    width: 100%;
+    position: relative;
+    .ci-types-right-empty {
+      position: absolute;
+      text-align: center;
+      left: 50%;
+      top: 40%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .ci-types-left,
+  .ci-types-right {
+    height: 100%;
+    background-color: #fff;
+  }
+}
+</style>
+
+<style lang="less">
+.ci_types-icon-area {
+  margin-top: 5px;
+  > .icon-area-item > span {
+    margin-right: 0 !important;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
index 33981da..b578db7 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
@@ -18,18 +18,18 @@
             visible = false
           }
         "
-      >取消</a-button
+      >{{ $t('cancel') }}</a-button
       >
-      <a-button :loading="confirmLoading" @click="handleSubmit(false)" type="primary">继续添加</a-button>
-      <a-button :loading="confirmLoading" type="primary" @click="handleSubmit">确定</a-button>
+      <a-button :loading="confirmLoading" @click="handleSubmit(false)" type="primary">{{ $t('cmdb.ciType.continueAdd') }}</a-button>
+      <a-button :loading="confirmLoading" type="primary" @click="handleSubmit">{{ $t('confirm') }}</a-button>
     </template>
     <a-tabs v-model="activeKey">
-      <a-tab-pane key="1" tab="新建属性">
+      <a-tab-pane key="1" :tab="$t('cmdb.ciType.addAttribute')">
         <div :style="{ overflow: 'auto', maxHeight: '480px' }">
           <create-new-attribute ref="createNewAttribute" :hasFooter="false" @done="handleAddNewAttr" />
         </div>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="已有属性" force-render>
+      <a-tab-pane key="2" :tab="$t('cmdb.ciType.existedAttributes')" force-render>
         <AttributesTransfer
           :dataSource="unLinkdAttrs"
           :targetKeys="targetKeys"
@@ -67,7 +67,6 @@ export default {
   },
   data() {
     return {
-      valueTypeMap,
       activeKey: '1',
       visible: false,
       attributes: [],
@@ -78,6 +77,9 @@ export default {
     }
   },
   computed: {
+    valueTypeMap() {
+      return valueTypeMap()
+    },
     windowHeight() {
       return this.$store.state.windowHeight
     },
@@ -154,7 +156,7 @@ export default {
     },
     handleClose(isCloseModal = true) {
       this.$emit('ok')
-      this.$message.success('添加成功！')
+      this.$message.success(this.$t('addSuccess'))
       if (isCloseModal) {
         this.visible = false
       }
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
index c47d19c..17b8df4 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
@@ -1,422 +1,422 @@
-<template>
-  <a-tabs
-    id="preValueArea"
-    v-model="activeKey"
-    @change="changeActiveKey"
-    size="small"
-    :tabBarStyle="{ borderBottom: 'none' }"
-  >
-    <a-tab-pane key="define" :disabled="disabled">
-      <span style="font-size:12px;" slot="tab">定义</span>
-      <PreValueTag type="add" :item="[]" @add="addNewValue" :disabled="disabled">
-        <template #default>
-          <a-button
-            :style="{ marginBottom: '10px', fontSize: '12px', padding: '1px 7px' }"
-            type="primary"
-            ghost
-            :disabled="disabled"
-            size="small"
-          >
-            <a-icon type="plus" />添加</a-button
-          >
-        </template>
-      </PreValueTag>
-      <draggable :list="valueList" handle=".handle" :disabled="disabled">
-        <PreValueTag
-          :disabled="disabled"
-          v-for="(item, index) in valueList"
-          :key="`${item[0]}_${index}`"
-          :item="item"
-          @deleteValue="deleteValue"
-          @editValue="editValue"
-        />
-      </draggable>
-    </a-tab-pane>
-    <a-tab-pane key="webhook" :disabled="disabled">
-      <span style="font-size:12px;" slot="tab">Webhook</span>
-      <Webhook ref="webhook" style="margin-top:10px" />
-      <a-form-model :model="form">
-        <a-col :span="24">
-          <a-form-model-item prop="ret_key" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18 }">
-            <template slot="label">
-              <span
-                style="position:relative;white-space:pre;"
-              >{{ `过滤` }}
-                <a-tooltip
-                  title="返回的结果按字段来过滤，层级嵌套用##分隔，比如k1##k2，web请求返回{k1: [{k2: 1}, {k2: 2}]}, 解析结果为[1, 2]"
-                >
-                  <a-icon
-                    style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
-                    type="question-circle"
-                    theme="filled"
-                  />
-                </a-tooltip>
-              </span>
-            </template>
-            <a-input style="width:150px;" v-model="form.ret_key" placeholder="k1##k2" :disabled="disabled" />
-          </a-form-model-item>
-        </a-col>
-      </a-form-model>
-    </a-tab-pane>
-    <a-tab-pane key="choice_other" :disabled="disabled">
-      <span style="font-size:12px;" slot="tab">其他模型属性</span>
-      <a-row :gutter="[24, 24]">
-        <a-col :span="12">
-          <a-form-item
-            :style="{ lineHeight: '24px', marginBottom: '5px' }"
-            label="模型"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 20 }"
-          >
-            <treeselect
-              :disable-branch-nodes="true"
-              :class="{
-                'custom-treeselect': true,
-                'custom-treeselect-bgcAndBorder': true,
-              }"
-              :style="{
-                '--custom-height': '32px',
-                lineHeight: '32px',
-                '--custom-bg-color': '#fff',
-                '--custom-border': '1px solid #d9d9d9',
-                '--custom-multiple-lineHeight': '14px',
-              }"
-              v-model="choice_other.type_ids"
-              :multiple="true"
-              :clearable="true"
-              searchable
-              :options="ciTypeGroup"
-              value-consists-of="LEAF_PRIORITY"
-              placeholder="请选择CMDB模型"
-              :normalizer="
-                (node) => {
-                  return {
-                    id: node.id || -1,
-                    label: node.alias || node.name || '其他',
-                    title: node.alias || node.name || '其他',
-                    children: node.ci_types,
-                  }
-                }
-              "
-              appendToBody
-              :zIndex="1050"
-              @select="
-                () => {
-                  choice_other.attr_id = undefined
-                }
-              "
-            >
-              <div
-                :title="node.label"
-                slot="option-label"
-                slot-scope="{ node }"
-                :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-              >
-                {{ node.label }}
-              </div>
-            </treeselect>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12" v-if="choice_other.type_ids && choice_other.type_ids.length">
-          <a-form-item
-            :style="{ marginBottom: '5px' }"
-            label="属性"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 20 }"
-          >
-            <treeselect
-              :disable-branch-nodes="true"
-              class="ops-setting-treeselect"
-              v-model="choice_other.attr_id"
-              :multiple="false"
-              :clearable="true"
-              searchable
-              :options="typeAttrs"
-              value-consists-of="LEAF_PRIORITY"
-              placeholder="请选择模型属性"
-              :normalizer="
-                (node) => {
-                  return {
-                    id: node.id || -1,
-                    label: node.alias || node.name || '其他',
-                    title: node.alias || node.name || '其他',
-                  }
-                }
-              "
-              appendToBody
-              :zIndex="1050"
-            >
-              <div
-                :title="node.label"
-                slot="option-label"
-                slot-scope="{ node }"
-                :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-              >
-                {{ node.label }}
-              </div>
-            </treeselect>
-          </a-form-item>
-        </a-col>
-        <a-col :span="24" v-if="choice_other.type_ids && choice_other.type_ids.length">
-          <a-form-item
-            :style="{ marginBottom: '5px' }"
-            class="pre-value-filter"
-            label="筛选"
-            :label-col="{ span: 2 }"
-            :wrapper-col="{ span: 22 }"
-          >
-            <FilterComp
-              ref="filterComp"
-              :isDropdown="false"
-              :canSearchPreferenceAttrList="typeAttrs"
-              @setExpFromFilter="setExpFromFilter"
-              :expression="filterExp ? `q=${filterExp}` : ''"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-tab-pane>
-    <a-tab-pane key="script" :disabled="disabled || !canDefineScript">
-      <span style="font-size:12px;" slot="tab">脚本</span>
-      <CustomCodeMirror
-        codeMirrorId="cmdb-pre-value"
-        ref="codemirror"
-        @changeCodeContent="changeCodeContent"
-      ></CustomCodeMirror>
-      <!-- <codemirror style="z-index: 9999" :options="cmOptions" v-model="script"></codemirror> -->
-    </a-tab-pane>
-  </a-tabs>
-</template>
-
-<script>
-import _ from 'lodash'
-import draggable from 'vuedraggable'
-import PreValueTag from './preValueTag.vue'
-import { defautValueColor } from '../../utils/const'
-import ColorPicker from '../../components/colorPicker/index.vue'
-import Webhook from '../../components/webhook'
-import { getCITypeGroups } from '../../api/ciTypeGroup'
-import { getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
-import FilterComp from '@/components/CMDBFilterComp'
-
-import CustomCodeMirror from '@/components/CustomCodeMirror'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/monokai.css'
-require('codemirror/mode/python/python.js')
-export default {
-  name: 'PreValueArea',
-  components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp, CustomCodeMirror },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: true,
-    },
-    canDefineScript: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      defautValueColor,
-      activeKey: 'define', // define webhook
-      valueList: [],
-      form: {
-        ret_key: '',
-      },
-      choice_other: {
-        type_ids: undefined,
-        attr_id: undefined,
-      },
-      ciTypeGroup: [],
-      typeAttrs: [],
-      filterExp: '',
-      script:
-        'class ChoiceValue(object):\n    @staticmethod\n    def values():\n        """\n        执行入口, 返回预定义值\n        :return: 返回一个列表, 值的类型同属性的类型\n        例如:\n        return ["在线", "下线"]\n        """\n        return []',
-      cmOptions: {
-        lineNumbers: true,
-        mode: 'python',
-        height: '200px',
-        theme: 'monokai',
-        tabSize: 4,
-        lineWrapping: true,
-        readOnly: this.disabled || !this.canDefineScript,
-      },
-    }
-  },
-  watch: {
-    disabled: {
-      immediate: false,
-      handler(newValue) {
-        const dom = document.querySelector('#preValueArea .ant-tabs-ink-bar')
-        if (newValue) {
-          // 如果是disabled 把tab 的ink-bar也置灰
-          dom.style.backgroundColor = '#00000040'
-        } else {
-          dom.style.backgroundColor = '#2f54eb'
-        }
-      },
-    },
-    'choice_other.type_ids': {
-      handler(newValue) {
-        if (newValue && newValue.length) {
-          getCITypeCommonAttributesByTypeIds({ type_ids: newValue.join(',') }).then((res) => {
-            this.typeAttrs = res.attributes
-          })
-        }
-      },
-    },
-  },
-  created() {
-    getCITypeGroups({ need_other: true }).then((res) => {
-      this.ciTypeGroup = res
-        .filter((item) => item.ci_types && item.ci_types.length)
-        .map((item) => {
-          item.id = `parent_${item.id || -1}`
-          return { ..._.cloneDeep(item) }
-        })
-    })
-  },
-  methods: {
-    addNewValue(newValue, newStyle, newIcon) {
-      if (newValue) {
-        const idx = this.valueList.findIndex((v) => v[0] === newValue)
-        if (idx > -1) {
-          this.$message.warning('当前值已存在！')
-        } else {
-          this.valueList.push([newValue, { style: newStyle, icon: { ...newIcon } }])
-        }
-      }
-    },
-    deleteValue(item) {
-      const _valueList = _.cloneDeep(this.valueList)
-      const idx = _valueList.findIndex((v) => v[0] === item[0])
-      if (idx > -1) {
-        _valueList.splice(idx, 1)
-        this.valueList = _valueList
-      }
-    },
-    editValue(item, newValue, newStyle, newIcon) {
-      const _valueList = _.cloneDeep(this.valueList)
-      const idx = _valueList.findIndex((v) => v[0] === item[0])
-      if (idx > -1) {
-        _valueList[idx] = [newValue, { style: newStyle, icon: { ...newIcon } }]
-        this.valueList = _valueList
-      }
-    },
-    getData() {
-      if (this.activeKey === 'define') {
-        return {
-          choice_value: this.valueList,
-          choice_web_hook: null,
-          choice_other: null,
-        }
-      } else if (this.activeKey === 'webhook') {
-        const choice_web_hook = this.$refs.webhook.getParams()
-        choice_web_hook.ret_key = this.form.ret_key
-        return { choice_value: [], choice_web_hook, choice_other: null }
-      } else if (this.activeKey === 'script') {
-        return {
-          choice_value: [],
-          choice_web_hook: null,
-          choice_other: {
-            script: this.script,
-          },
-        }
-      } else {
-        let choice_other = {}
-        if (this.choice_other.type_ids && this.choice_other.type_ids.length) {
-          this.$refs.filterComp.handleSubmit()
-          choice_other = { ...this.choice_other, filter: this.filterExp }
-        }
-        return {
-          choice_value: [],
-          choice_web_hook: null,
-          choice_other,
-        }
-      }
-    },
-    setData({ choice_value, choice_web_hook, choice_other }) {
-      if (choice_web_hook) {
-        this.activeKey = 'webhook'
-        this.$nextTick(() => {
-          this.$refs.webhook.setParams(choice_web_hook)
-          this.form.ret_key = choice_web_hook.ret_key ?? ''
-        })
-      } else if (choice_other) {
-        if (choice_other.script) {
-          this.activeKey = 'script'
-          this.script = choice_other.script
-          this.$nextTick(() => {
-            this.$refs.codemirror.initCodeMirror(choice_other.script)
-          })
-        } else {
-          this.activeKey = 'choice_other'
-          const { type_ids, attr_id, filter } = choice_other
-          this.choice_other = { type_ids, attr_id }
-          this.filterExp = filter
-          if (type_ids && type_ids.length) {
-            this.$nextTick(() => {
-              this.$refs.filterComp.visibleChange(true, false)
-            })
-          }
-        }
-      } else {
-        this.valueList = choice_value
-        this.activeKey = 'define'
-      }
-      const dom = document.querySelector('#preValueArea .ant-tabs-ink-bar')
-      if (this.disabled) {
-        // 如果是disabled 把tab 的ink-bar也置灰
-        dom.style.backgroundColor = '#00000040'
-      } else {
-        dom.style.backgroundColor = '#2f54eb'
-      }
-    },
-    setExpFromFilter(filterExp) {
-      if (filterExp) {
-        this.filterExp = `${filterExp}`
-      } else {
-        this.filterExp = ''
-      }
-    },
-    changeCodeContent(value) {
-      this.script = value && value.replace('\t', '    ')
-    },
-    changeActiveKey(value) {
-      if (value === 'script') {
-        this.$nextTick(() => {
-          this.$refs.codemirror.initCodeMirror(this.script)
-        })
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.pre-value-edit-color {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .pre-value-edit-color-item {
-    cursor: pointer;
-    display: inline-block;
-    width: 25px;
-    height: 20px;
-    margin: 5px;
-  }
-}
-</style>
-
-<style lang="less">
-.pre-value-filter {
-  .ant-form-item-control {
-    line-height: 24px;
-  }
-  .table-filter-add {
-    line-height: 40px;
-  }
-}
-</style>
+<template>
+  <a-tabs
+    id="preValueArea"
+    v-model="activeKey"
+    @change="changeActiveKey"
+    size="small"
+    :tabBarStyle="{ borderBottom: 'none' }"
+  >
+    <a-tab-pane key="define" :disabled="disabled">
+      <span style="font-size:12px;" slot="tab">{{ $t('define') }}</span>
+      <PreValueTag type="add" :item="[]" @add="addNewValue" :disabled="disabled">
+        <template #default>
+          <a-button
+            :style="{ marginBottom: '10px', fontSize: '12px', padding: '1px 7px' }"
+            type="primary"
+            ghost
+            :disabled="disabled"
+            size="small"
+          >
+            <a-icon type="plus" />{{ $t('add') }}</a-button
+          >
+        </template>
+      </PreValueTag>
+      <draggable :list="valueList" handle=".handle" :disabled="disabled">
+        <PreValueTag
+          :disabled="disabled"
+          v-for="(item, index) in valueList"
+          :key="`${item[0]}_${index}`"
+          :item="item"
+          @deleteValue="deleteValue"
+          @editValue="editValue"
+        />
+      </draggable>
+    </a-tab-pane>
+    <a-tab-pane key="webhook" :disabled="disabled">
+      <span style="font-size:12px;" slot="tab">Webhook</span>
+      <Webhook ref="webhook" style="margin-top:10px" />
+      <a-form-model :model="form">
+        <a-col :span="24">
+          <a-form-model-item prop="ret_key" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18 }">
+            <template slot="label">
+              <span
+                style="position:relative;white-space:pre;"
+              >{{ $t('cmdb.ciType.filter') }}
+                <a-tooltip
+                  :title="$t('cmdb.ciType.choiceWebhookTips')"
+                >
+                  <a-icon
+                    style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
+                    type="question-circle"
+                    theme="filled"
+                  />
+                </a-tooltip>
+              </span>
+            </template>
+            <a-input style="width:150px;" v-model="form.ret_key" placeholder="k1##k2" :disabled="disabled" />
+          </a-form-model-item>
+        </a-col>
+      </a-form-model>
+    </a-tab-pane>
+    <a-tab-pane key="choice_other" :disabled="disabled">
+      <span style="font-size:12px;" slot="tab">{{ $t('cmdb.ciType.choiceOther') }}</span>
+      <a-row :gutter="[24, 24]">
+        <a-col :span="12">
+          <a-form-item
+            :style="{ lineHeight: '24px', marginBottom: '5px' }"
+            :label="$t('cmdb.ciType.ciType')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+          >
+            <treeselect
+              :disable-branch-nodes="true"
+              :class="{
+                'custom-treeselect': true,
+                'custom-treeselect-bgcAndBorder': true,
+              }"
+              :style="{
+                '--custom-height': '32px',
+                lineHeight: '32px',
+                '--custom-bg-color': '#fff',
+                '--custom-border': '1px solid #d9d9d9',
+                '--custom-multiple-lineHeight': '14px',
+              }"
+              v-model="choice_other.type_ids"
+              :multiple="true"
+              :clearable="true"
+              searchable
+              :options="ciTypeGroup"
+              value-consists-of="LEAF_PRIORITY"
+              :placeholder="$t('cmdb.ciType.selectCIType')"
+              :normalizer="
+                (node) => {
+                  return {
+                    id: node.id || -1,
+                    label: node.alias || node.name || $t('other'),
+                    title: node.alias || node.name || $t('other'),
+                    children: node.ci_types,
+                  }
+                }
+              "
+              appendToBody
+              :zIndex="1050"
+              @select="
+                () => {
+                  choice_other.attr_id = undefined
+                }
+              "
+            >
+              <div
+                :title="node.label"
+                slot="option-label"
+                slot-scope="{ node }"
+                :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+              >
+                {{ node.label }}
+              </div>
+            </treeselect>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12" v-if="choice_other.type_ids && choice_other.type_ids.length">
+          <a-form-item
+            :style="{ marginBottom: '5px' }"
+            :label="$t('cmdb.ciType.attributes')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+          >
+            <treeselect
+              :disable-branch-nodes="true"
+              class="ops-setting-treeselect"
+              v-model="choice_other.attr_id"
+              :multiple="false"
+              :clearable="true"
+              searchable
+              :options="typeAttrs"
+              value-consists-of="LEAF_PRIORITY"
+              :placeholder="$t('cmdb.ciType.selectCITypeAttributes')"
+              :normalizer="
+                (node) => {
+                  return {
+                    id: node.id || -1,
+                    label: node.alias || node.name || $t('other'),
+                    title: node.alias || node.name || $t('other'),
+                  }
+                }
+              "
+              appendToBody
+              :zIndex="1050"
+            >
+              <div
+                :title="node.label"
+                slot="option-label"
+                slot-scope="{ node }"
+                :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+              >
+                {{ node.label }}
+              </div>
+            </treeselect>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24" v-if="choice_other.type_ids && choice_other.type_ids.length">
+          <a-form-item
+            :style="{ marginBottom: '5px' }"
+            class="pre-value-filter"
+            :label="$t('cmdb.ciType.filter')"
+            :label-col="{ span: 2 }"
+            :wrapper-col="{ span: 22 }"
+          >
+            <FilterComp
+              ref="filterComp"
+              :isDropdown="false"
+              :canSearchPreferenceAttrList="typeAttrs"
+              @setExpFromFilter="setExpFromFilter"
+              :expression="filterExp ? `q=${filterExp}` : ''"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-tab-pane>
+    <a-tab-pane key="script" :disabled="disabled || !canDefineScript">
+      <span style="font-size:12px;" slot="tab">{{ $t('cmdb.ciType.code') }}</span>
+      <CustomCodeMirror
+        codeMirrorId="cmdb-pre-value"
+        ref="codemirror"
+        @changeCodeContent="changeCodeContent"
+      ></CustomCodeMirror>
+      <!-- <codemirror style="z-index: 9999" :options="cmOptions" v-model="script"></codemirror> -->
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import PreValueTag from './preValueTag.vue'
+import { defautValueColor } from '../../utils/const'
+import ColorPicker from '../../components/colorPicker/index.vue'
+import Webhook from '../../components/webhook'
+import { getCITypeGroups } from '../../api/ciTypeGroup'
+import { getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
+import FilterComp from '@/components/CMDBFilterComp'
+
+import CustomCodeMirror from '@/components/CustomCodeMirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/monokai.css'
+require('codemirror/mode/python/python.js')
+export default {
+  name: 'PreValueArea',
+  components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp, CustomCodeMirror },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    canDefineScript: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defautValueColor,
+      activeKey: 'define', // define webhook
+      valueList: [],
+      form: {
+        ret_key: '',
+      },
+      choice_other: {
+        type_ids: undefined,
+        attr_id: undefined,
+      },
+      ciTypeGroup: [],
+      typeAttrs: [],
+      filterExp: '',
+      script:
+        this.$t('cmdb.ciType.choiceScriptDemo'),
+      cmOptions: {
+        lineNumbers: true,
+        mode: 'python',
+        height: '200px',
+        theme: 'monokai',
+        tabSize: 4,
+        lineWrapping: true,
+        readOnly: this.disabled || !this.canDefineScript,
+      },
+    }
+  },
+  watch: {
+    disabled: {
+      immediate: false,
+      handler(newValue) {
+        const dom = document.querySelector('#preValueArea .ant-tabs-ink-bar')
+        if (newValue) {
+          // If it is disabled, the ink-bar of the tab will also be grayed out.
+          dom.style.backgroundColor = '#00000040'
+        } else {
+          dom.style.backgroundColor = '#2f54eb'
+        }
+      },
+    },
+    'choice_other.type_ids': {
+      handler(newValue) {
+        if (newValue && newValue.length) {
+          getCITypeCommonAttributesByTypeIds({ type_ids: newValue.join(',') }).then((res) => {
+            this.typeAttrs = res.attributes
+          })
+        }
+      },
+    },
+  },
+  created() {
+    getCITypeGroups({ need_other: true }).then((res) => {
+      this.ciTypeGroup = res
+        .filter((item) => item.ci_types && item.ci_types.length)
+        .map((item) => {
+          item.id = `parent_${item.id || -1}`
+          return { ..._.cloneDeep(item) }
+        })
+    })
+  },
+  methods: {
+    addNewValue(newValue, newStyle, newIcon) {
+      if (newValue) {
+        const idx = this.valueList.findIndex((v) => v[0] === newValue)
+        if (idx > -1) {
+          this.$message.warning(this.$t('cmdb.ciType.valueExisted'))
+        } else {
+          this.valueList.push([newValue, { style: newStyle, icon: { ...newIcon } }])
+        }
+      }
+    },
+    deleteValue(item) {
+      const _valueList = _.cloneDeep(this.valueList)
+      const idx = _valueList.findIndex((v) => v[0] === item[0])
+      if (idx > -1) {
+        _valueList.splice(idx, 1)
+        this.valueList = _valueList
+      }
+    },
+    editValue(item, newValue, newStyle, newIcon) {
+      const _valueList = _.cloneDeep(this.valueList)
+      const idx = _valueList.findIndex((v) => v[0] === item[0])
+      if (idx > -1) {
+        _valueList[idx] = [newValue, { style: newStyle, icon: { ...newIcon } }]
+        this.valueList = _valueList
+      }
+    },
+    getData() {
+      if (this.activeKey === 'define') {
+        return {
+          choice_value: this.valueList,
+          choice_web_hook: null,
+          choice_other: null,
+        }
+      } else if (this.activeKey === 'webhook') {
+        const choice_web_hook = this.$refs.webhook.getParams()
+        choice_web_hook.ret_key = this.form.ret_key
+        return { choice_value: [], choice_web_hook, choice_other: null }
+      } else if (this.activeKey === 'script') {
+        return {
+          choice_value: [],
+          choice_web_hook: null,
+          choice_other: {
+            script: this.script,
+          },
+        }
+      } else {
+        let choice_other = {}
+        if (this.choice_other.type_ids && this.choice_other.type_ids.length) {
+          this.$refs.filterComp.handleSubmit()
+          choice_other = { ...this.choice_other, filter: this.filterExp }
+        }
+        return {
+          choice_value: [],
+          choice_web_hook: null,
+          choice_other,
+        }
+      }
+    },
+    setData({ choice_value, choice_web_hook, choice_other }) {
+      if (choice_web_hook) {
+        this.activeKey = 'webhook'
+        this.$nextTick(() => {
+          this.$refs.webhook.setParams(choice_web_hook)
+          this.form.ret_key = choice_web_hook.ret_key ?? ''
+        })
+      } else if (choice_other) {
+        if (choice_other.script) {
+          this.activeKey = 'script'
+          this.script = choice_other.script
+          this.$nextTick(() => {
+            this.$refs.codemirror.initCodeMirror(choice_other.script)
+          })
+        } else {
+          this.activeKey = 'choice_other'
+          const { type_ids, attr_id, filter } = choice_other
+          this.choice_other = { type_ids, attr_id }
+          this.filterExp = filter
+          if (type_ids && type_ids.length) {
+            this.$nextTick(() => {
+              this.$refs.filterComp.visibleChange(true, false)
+            })
+          }
+        }
+      } else {
+        this.valueList = choice_value
+        this.activeKey = 'define'
+      }
+      const dom = document.querySelector('#preValueArea .ant-tabs-ink-bar')
+      if (this.disabled) {
+        // If it is disabled, the ink-bar of the tab will also be grayed out.
+        dom.style.backgroundColor = '#00000040'
+      } else {
+        dom.style.backgroundColor = '#2f54eb'
+      }
+    },
+    setExpFromFilter(filterExp) {
+      if (filterExp) {
+        this.filterExp = `${filterExp}`
+      } else {
+        this.filterExp = ''
+      }
+    },
+    changeCodeContent(value) {
+      this.script = value && value.replace('\t', '    ')
+    },
+    changeActiveKey(value) {
+      if (value === 'script') {
+        this.$nextTick(() => {
+          this.$refs.codemirror.initCodeMirror(this.script)
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pre-value-edit-color {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .pre-value-edit-color-item {
+    cursor: pointer;
+    display: inline-block;
+    width: 25px;
+    height: 20px;
+    margin: 5px;
+  }
+}
+</style>
+
+<style lang="less">
+.pre-value-filter {
+  .ant-form-item-control {
+    line-height: 24px;
+  }
+  .table-filter-add {
+    line-height: 40px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueTag.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueTag.vue
index d3e1b81..7c790dc 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueTag.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueTag.vue
@@ -11,9 +11,9 @@
       >
       </a-input>
       <div ref="preValueEdit" slot="content">
-        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">图标</a-divider>
+        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">{{ $t('icon') }}</a-divider>
         <IconArea ref="iconArea" />
-        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">字体</a-divider>
+        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">{{ $t('cmdb.ciType.font') }}</a-divider>
         <div :style="{ display: 'flex', justifyContent: 'space-around' }">
           <div
             @click="changeFontStyle('fontWeight', 'bold')"
@@ -37,7 +37,7 @@
           </div>
         </div>
 
-        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">颜色</a-divider>
+        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">{{ $t('cmdb.ciType.color') }}</a-divider>
         <div :style="{ display: 'flex', justifyContent: 'space-around' }">
           <div class="attributes-font-color">
             <a-icon type="font-colors" /><el-color-picker
@@ -56,11 +56,11 @@
             </el-color-picker>
           </div>
         </div>
-        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">操作</a-divider>
+        <a-divider orientation="left" style="margin:8px 0;color:gray;font-size:10px;">{{ $t('operation') }}</a-divider>
         <div style="text-align:right;">
           <a-tooltip
             v-if="type !== 'add'"
-            title="删除"
+            :title="$t('delete')"
           ><a
           ><a-icon
             @click="handleDelete"
@@ -69,11 +69,11 @@
             type="delete"/></a
             ></a-tooltip>
           <a-tooltip
-            title="确定"
+            :title="$t('confirm')"
           ><a><a-icon @click="handleEditOk" style="margin-right:10px;color:green;" type="check"/></a
           ></a-tooltip>
           <a-tooltip
-            title="取消"
+            :title="$t('cancel')"
           ><a
           ><a-icon
             @click="
@@ -137,6 +137,9 @@ import _ from 'lodash'
 import { ColorPicker } from 'element-ui'
 import { defautValueColor, defaultBGColors } from '../../utils/const'
 import IconArea from './iconArea.vue'
+import lang from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale'
+locale.use(lang)
 export default {
   name: 'PreValueTag',
   components: { ElColorPicker: ColorPicker, IconArea },
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
index 2bb3a46..becf5ae 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
@@ -10,7 +10,7 @@
         searchable
         :options="ciTypeADTAttributes"
         value-consists-of="LEAF_PRIORITY"
-        placeholder="请选择属性"
+        :placeholder="$t('cmdb.ciType.selectAttributes')"
         :normalizer="
           (node) => {
             return {
@@ -35,15 +35,15 @@
         searchable
         :options="ciTypeGroup"
         value-consists-of="LEAF_PRIORITY"
-        placeholder="请选择模型"
+        :placeholder="$t('cmdb.ciType.selectCIType')"
         :disableBranchNodes="true"
         @select="changeType(item)"
         :normalizer="
           (node) => {
             return {
-              id: node.name || '其他',
-              label: node.alias || node.name || '其他',
-              title: node.alias || node.name || '其他',
+              id: node.name || $t('other'),
+              label: node.alias || node.name || $t('other'),
+              title: node.alias || node.name || $t('other'),
               children: node.ci_types,
             }
           }
@@ -67,7 +67,7 @@
         searchable
         :options="item.attributes"
         value-consists-of="LEAF_PRIORITY"
-        placeholder="请选择属性"
+        :placeholder="$t('cmdb.ciType.selectAttributes')"
         :normalizer="
           (node) => {
             return {
@@ -89,7 +89,7 @@
       </treeselect>
     </div>
     <div class="relation-ad-footer">
-      <a-button type="primary" @click="handleSave">保存</a-button>
+      <a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
     </div>
   </div>
 </template>
@@ -148,7 +148,7 @@ export default {
     },
     getCITypeDiscovery() {
       getCITypeDiscovery(this.CITypeId).then(async (res) => {
-        // 第一个下拉框的options
+        // Options for the first drop-down box
         const _ciTypeADTAttributes = []
         res
           .filter((adt) => adt.adr_id)
@@ -160,7 +160,7 @@ export default {
           })
         console.log(_ciTypeADTAttributes)
         this.ciTypeADTAttributes = _.uniqBy(_ciTypeADTAttributes, 'name')
-        // 第一个下拉框的options
+        // Options for the first drop-down box
         const _find = res.find((adt) => !adt.adr_id)
         if (_find) {
           this.adt_id = _find.id
@@ -242,7 +242,7 @@ export default {
         } else {
           await postCITypeDiscovery(this.CITypeId, { relation: _relation })
         }
-        this.$message.success('保存成功')
+        this.$message.success(this.$t('saveSuccess'))
         this.getCITypeDiscovery()
       }
     },
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
index c2016be..205aa16 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
@@ -7,7 +7,7 @@
       size="small"
       class="ops-button-primary"
       icon="plus"
-    >新增关系</a-button
+    >{{ $t('cmdb.ciType.addRelation') }}</a-button
     >
     <vxe-table
       stripe
@@ -20,15 +20,15 @@
       class="ops-stripe-table"
       :row-class-name="rowClass"
     >
-      <vxe-column field="source_ci_type_name" title="源模型英文名"></vxe-column>
-      <vxe-column field="relation_type" title="关联类型">
+      <vxe-column field="source_ci_type_name" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column>
+      <vxe-column field="relation_type" :title="$t('cmdb.ciType.relationType')">
         <template #default="{row}">
-          <span style="color:#2f54eb" v-if="row.isParent">被</span>
+          <span style="color:#2f54eb" v-if="row.isParent">{{ $t('cmdb.ciType.isParent') }}</span>
           {{ row.relation_type }}
         </template>
       </vxe-column>
-      <vxe-column field="alias" title="目标模型名"></vxe-column>
-      <vxe-column field="constraint" title="关系约束">
+      <vxe-column field="alias" :title="$t('cmdb.ciType.dstCIType')"></vxe-column>
+      <vxe-column field="constraint" :title="$t('cmdb.ciType.relationConstraint')">
         <template #default="{row}">
           <span v-if="row.isParent && constraintMap[row.constraint]">{{
             constraintMap[row.constraint]
@@ -39,11 +39,11 @@
           <span v-else>{{ constraintMap[row.constraint] }}</span>
         </template>
       </vxe-column>
-      <vxe-column field="operation" title="操作" width="100">
+      <vxe-column field="operation" :title="$t('operation')" width="100">
         <template #default="{row}">
           <a-space v-if="!row.isParent && row.source_ci_type_id">
             <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
-            <a-popconfirm title="确认删除？" @confirm="handleDelete(row)">
+            <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="handleDelete(row)">
               <a style="color: red;"><a-icon type="delete"/></a>
             </a-popconfirm>
           </a-space>
@@ -52,7 +52,7 @@
       <template #empty>
         <div>
           <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
-          <div>暂无数据</div>
+          <div>{{ $t('noData') }}</div>
         </div>
       </template>
     </vxe-table>
@@ -65,21 +65,24 @@
       width="500px"
     >
       <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
-        <a-form-item label="源模型">
+        <a-form-item :label="$t('cmdb.ciType.sourceCIType')">
           <a-select
             name="source_ci_type_id"
-            v-decorator="['source_ci_type_id', { rules: [{ required: true, message: '请选择源模型' }] }]"
+            v-decorator="[
+              'source_ci_type_id',
+              { rules: [{ required: true, message: $t('cmdb.ciType.sourceCITypeTips') }] },
+            ]"
           >
             <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayCITypes">{{
               CIType.alias
             }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="目标模型">
+        <a-form-item :label="$t('cmdb.ciType.dstCIType')">
           <a-select
             showSearch
             name="ci_type_id"
-            v-decorator="['ci_type_id', { rules: [{ required: true, message: '请选择目标模型' }] }]"
+            v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
             :filterOption="filterOption"
           >
             <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in CITypes">
@@ -88,10 +91,13 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="关联关系">
+        <a-form-item :label="$t('cmdb.ciType.relationType')">
           <a-select
             name="relation_type_id"
-            v-decorator="['relation_type_id', { rules: [{ required: true, message: '请选择关联关系' }] }]"
+            v-decorator="[
+              'relation_type_id',
+              { rules: [{ required: true, message: $t('cmdb.ciType.relationTypeTips') }] },
+            ]"
           >
             <a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{
               relationType.name
@@ -99,11 +105,16 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="关联约束">
-          <a-select v-decorator="['constraint', { rules: [{ required: true, message: '请选择关联约束' }] }]">
-            <a-select-option value="0">一对多</a-select-option>
-            <a-select-option value="1">一对一</a-select-option>
-            <a-select-option value="2">多对多</a-select-option>
+        <a-form-item :label="$t('cmdb.ciType.relationConstraint')">
+          <a-select
+            v-decorator="[
+              'constraint',
+              { rules: [{ required: true, message: $t('cmdb.ciType.relationConstraintTips') }] },
+            ]"
+          >
+            <a-select-option value="0">{{ $t('cmdb.ciType.one2Many') }}</a-select-option>
+            <a-select-option value="1">{{ $t('cmdb.ciType.one2One') }}</a-select-option>
+            <a-select-option value="2">{{ $t('cmdb.ciType.many2Many') }}</a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
@@ -145,11 +156,6 @@ export default {
       drawerTitle: '',
       CITypes: [],
       relationTypes: [],
-      constraintMap: {
-        '0': '一对多',
-        '1': '一对一',
-        '2': '多对多',
-      },
       tableData: [],
       parentTableData: [],
     }
@@ -161,6 +167,13 @@ export default {
     windowHeight() {
       return this.$store.state.windowHeight
     },
+    constraintMap() {
+      return {
+        '0': this.$t('cmdb.ciType.one2Many'),
+        '1': this.$t('cmdb.ciType.one2One'),
+        '2': this.$t('cmdb.ciType.many2Many'),
+      }
+    },
   },
   async mounted() {
     this.getCITypes()
@@ -209,7 +222,7 @@ export default {
     },
     handleDelete(record) {
       deleteRelation(record.source_ci_type_id, record.id).then((res) => {
-        this.$message.success(`删除成功！`)
+        this.$message.success(this.$t('deleteSuccess'))
         this.handleOk()
       })
     },
@@ -218,7 +231,7 @@ export default {
     },
 
     handleCreate() {
-      this.drawerTitle = '新增关系'
+      this.drawerTitle = this.$t('cmdb.ciType.addRelation')
       this.visible = true
       this.$nextTick(() => {
         this.form.setFieldsValue({
@@ -241,7 +254,7 @@ export default {
 
           createRelation(values.source_ci_type_id, values.ci_type_id, values.relation_type_id, values.constraint).then(
             (res) => {
-              this.$message.success(`添加成功`)
+              this.$message.success(this.$t('addSuccess'))
               this.onClose()
               this.handleOk()
             }
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 03f2ff5..dac013c 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
@@ -1,653 +1,674 @@
-<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-row :style="{ marginTop: '4px' }" :gutter="[0, 12]">
-            <a-col :span="6">
-              <a-checkbox value="email"> <ops-icon type="email" style="margin-right:5px" />邮件 </a-checkbox>
-            </a-col>
-            <a-col :span="6">
-              <a-checkbox value="wechatApp">
-                <ops-icon type="wechatApp" style="margin-right:5px" />企业微信
-              </a-checkbox>
-            </a-col>
-            <a-col :span="6">
-              <a-checkbox value="dingdingApp">
-                <ops-icon type="dingdingApp" style="margin-right:5px" />钉钉
-              </a-checkbox>
-            </a-col>
-            <a-col :span="6">
-              <a-checkbox value="feishuApp"> <ops-icon type="feishuApp" style="margin-right:5px" />飞书 </a-checkbox>
-            </a-col>
-            <a-col :span="4" :style="{ lineHeight: '32px' }">
-              <ops-icon type="robot" style="margin-right:5px" />机器人：
-            </a-col>
-            <a-col :span="18">
-              <treeselect
-                :disable-branch-nodes="true"
-                :class="{
-                  'custom-treeselect': true,
-                  'custom-treeselect-bgcAndBorder': true,
-                }"
-                :style="{
-                  '--custom-height': '32px',
-                  lineHeight: '32px',
-                  '--custom-bg-color': '#fff',
-                  '--custom-border': '1px solid #d9d9d9',
-                  '--custom-multiple-lineHeight': '14px',
-                }"
-                v-model="selectedBot"
-                :multiple="true"
-                :clearable="true"
-                searchable
-                :options="appBot"
-                value-consists-of="LEAF_PRIORITY"
-                placeholder="请选择机器人"
-                :normalizer="
-                  (node) => {
-                    return {
-                      id: node.name,
-                      label: node.label || node.name,
-                      children: node.bot,
-                    }
-                  }
-                "
-                appendToBody
-                :zIndex="1050"
-                noChildrenText="暂无数据"
-              >
-                <div
-                  :title="node.label"
-                  slot="option-label"
-                  slot-scope="{ node }"
-                  :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-                >
-                  <ops-icon :type="node.id" v-if="node.children" />{{ node.label }}
-                </div>
-                <div slot="value-label" slot-scope="{ node }">
-                  <ops-icon :type="node.parentNode.id" />{{ node.label }}
-                </div>
-              </treeselect>
-            </a-col>
-          </a-row>
-        </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>
-    <span v-if="triggerAction === '2'" class="trigger-tips">{{ webhookTips }}</span>
-    <Webhook ref="webhook" style="margin-top:10px" v-if="triggerAction === '2'" />
-  </CustomDrawer>
-</template>
-
-<script>
-import _ from 'lodash'
-import { addTrigger, updateTrigger, deleteTrigger } 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'
-import { getNoticeConfigAppBot } from '@/api/noticeSetting'
-
-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 }}',
-      webhookTips: '请求参数可以引用该模型的属性值，引用方法为: {{ 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,
-      appBot: [],
-      selectedBot: undefined,
-    }
-  },
-  computed: {
-    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 getNoticeConfigAppBot() {
-      await getNoticeConfigAppBot().then((res) => {
-        this.appBot = res
-      })
-    },
-    createFromTriggerTable(attrList) {
-      this.visible = true
-      this.getNoticeConfigAppBot()
-      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
-      await this.getNoticeConfigAppBot()
-      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 && t.email)
-              .map((t) => t.email)
-              .join(';') ?? ''
-
-          if (custom_email) {
-            this.showCustomEmail = true
-          }
-          if (body_html) {
-            setTimeout(() => {
-              this.$refs.noticeContent.setContent(body_html)
-            }, 100)
-          }
-          const _method = method.filter((item) => ['email', 'wechatApp', 'dingdingApp', 'feishuApp'].includes(item))
-          const _flatAppBot = []
-          this.appBot.forEach((item) => {
-            _flatAppBot.push(...item.bot.map((b) => b.name))
-          })
-          const selectedBot = method.filter(
-            (item) => !['email', 'wechatApp', 'dingdingApp', 'feishuApp'].includes(item) && _flatAppBot.includes(item)
-          )
-          this.selectedBot = selectedBot
-          this.notifies = { employee_ids, custom_email, subject, method: _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.selectedBot = undefined
-      this.visible = false
-    },
-    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.selectedBot && this.selectedBot.length) {
-                this.selectedBot.forEach((bot) => {
-                  tos.push({ [`${bot}`]: bot })
-                })
-              }
-              if (this.category === 2) {
-                const { before_days, notify_at } = this.dateForm
-                params.option.notifies = {
-                  tos,
-                  subject,
-                  body,
-                  body_html,
-                  method: [...method, ...(this.selectedBot ?? [])],
-                  before_days,
-                  notify_at,
-                }
-              } else {
-                params.option.notifies = {
-                  tos,
-                  subject,
-                  body,
-                  body_html,
-                  method: [...method, ...(this.selectedBot ?? [])],
-                }
-              }
-              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>
+<template>
+  <CustomDrawer
+    wrapClassName="trigger-form"
+    :width="910"
+    :title="title"
+    :visible="visible"
+    @close="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="custom-drawer-bottom-action">
+      <a-button type="primary" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
+      <a-button v-if="triggerId" type="danger" @click="handleDetele">{{ $t('delete') }}</a-button>
+      <a-button @click="handleOk" type="primary">{{ $t('confirm') }}</a-button>
+    </div>
+    <a-form-model ref="triggerForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
+      <p>
+        <strong>{{ $t('cmdb.ciType.basicInfo') }}</strong>
+      </p>
+      <a-form-model-item :label="$t('name')" prop="name">
+        <a-input v-model="form.name" :placeholder="$t('cmdb.ciType.nameInputTips')" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('type')">
+        <a-radio-group v-model="category">
+          <a-radio-button :value="1">
+            {{ $t('cmdb.ciType.triggerDataChange') }}
+          </a-radio-button>
+          <a-radio-button :value="2">
+            {{ $t('cmdb.ciType.triggerDate') }}
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('desc')" prop="description">
+        <a-input v-model="form.description" :placeholder="$t('cmdb.ciType.descInput')" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.ciType.triggerEnable')" prop="enable">
+        <a-switch v-model="form.enable" />
+      </a-form-model-item>
+      <template v-if="category === 1">
+        <p>
+          <strong>{{ $t('cmdb.ciType.triggerCondition') }}</strong>
+        </p>
+        <a-form-model-item :label="$t('cmdb.ciType.event')" prop="action">
+          <a-radio-group v-model="form.action">
+            <a-radio value="0">
+              {{ $t('cmdb.ciType.addInstance') }}
+            </a-radio>
+            <a-radio value="1">
+              {{ $t('cmdb.ciType.deleteInstance') }}
+            </a-radio>
+            <a-radio value="2">
+              {{ $t('cmdb.ciType.changeInstance') }}
+            </a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item v-if="form.action === '2'" :label="$t('cmdb.ciType.attributes')" prop="attr_ids">
+          <a-select
+            v-model="form.attr_ids"
+            show-search
+            mode="multiple"
+            :placeholder="$t('cmdb.ciType.selectMutipleAttributes')"
+          >
+            <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="$t('cmdb.ciType.filter')" 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>{{ $t('cmdb.ciType.triggerCondition') }}</strong>
+      </p>
+      <a-form-model
+        ref="dateForm"
+        :model="dateForm"
+        :rules="dateFormRules"
+        :label-col="{ span: 3 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <a-form-model-item :label="$t('cmdb.ciType.attributes')" prop="attr_id">
+          <a-select v-model="dateForm.attr_id" :placeholder="$t('cmdb.ciType.selectSingleAttribute')">
+            <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="$t('cmdb.ciType.filter')" 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="$t('cmdb.ciType.beforeDays')" prop="before_days">
+          <a-input-number v-model="dateForm.before_days" :min="0" />
+          {{ $t('cmdb.ciType.days') }}
+        </a-form-model-item>
+        <a-form-model-item :label="$t('cmdb.ciType.notifyAt')" 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>{{ $t('cmdb.ciType.triggerAction') }}</strong>
+    </p>
+    <a-radio-group
+      v-model="triggerAction"
+      :style="{ width: '100%', display: 'flex', justifyContent: 'space-around', marginBottom: '10px' }"
+    >
+      <a-radio value="1">
+        {{ $t('cmdb.ciType.notify') }}
+      </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="$t('cmdb.ciType.receivers')" 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="$t('cmdb.ciType.emailTips')"
+            :rows="1"
+          />
+          <a-button
+            @click="
+              () => {
+                showCustomEmail = !showCustomEmail
+              }
+            "
+            type="primary"
+            size="small"
+            class="ops-button-primary"
+          >{{ `${showCustomEmail ? $t('delete') : $t('add')}` }}{{ $t('cmdb.ciType.customEmail') }}</a-button
+          >
+        </div>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.ciType.notifySubject')" prop="subject">
+        <a-input v-model="notifies.subject" :placeholder="$t('cmdb.ciType.notifySubjectTips')" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cmdb.ciType.notifyContent')" 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="$t('cmdb.ciType.notifyMethod')" prop="method">
+        <a-checkbox-group v-model="notifies.method">
+          <a-row :style="{ marginTop: '4px' }" :gutter="[0, 12]">
+            <a-col :span="6">
+              <a-checkbox value="email">
+                <ops-icon type="email" style="margin-right:5px" />{{ $t('email') }}
+              </a-checkbox>
+            </a-col>
+            <a-col :span="6">
+              <a-checkbox value="wechatApp">
+                <ops-icon type="wechatApp" style="margin-right:5px" />{{ $t('wechat') }}
+              </a-checkbox>
+            </a-col>
+            <a-col :span="6">
+              <a-checkbox value="dingdingApp">
+                <ops-icon type="dingdingApp" style="margin-right:5px" />{{ $t('dingding') }}
+              </a-checkbox>
+            </a-col>
+            <a-col :span="6">
+              <a-checkbox value="feishuApp">
+                <ops-icon type="feishuApp" style="margin-right:5px" />{{ $t('feishu') }}
+              </a-checkbox>
+            </a-col>
+            <a-col :span="4" :style="{ lineHeight: '32px' }">
+              <ops-icon type="robot" style="margin-right:5px" />{{ $t('bot') }}：
+            </a-col>
+            <a-col :span="18">
+              <treeselect
+                :disable-branch-nodes="true"
+                :class="{
+                  'custom-treeselect': true,
+                  'custom-treeselect-bgcAndBorder': true,
+                }"
+                :style="{
+                  '--custom-height': '32px',
+                  lineHeight: '32px',
+                  '--custom-bg-color': '#fff',
+                  '--custom-border': '1px solid #d9d9d9',
+                  '--custom-multiple-lineHeight': '14px',
+                }"
+                v-model="selectedBot"
+                :multiple="true"
+                :clearable="true"
+                searchable
+                :options="appBot"
+                value-consists-of="LEAF_PRIORITY"
+                :placeholder="$t('cmdb.ciType.botSelect')"
+                :normalizer="
+                  (node) => {
+                    return {
+                      id: node.name,
+                      label: node.label || node.name,
+                      children: node.bot,
+                    }
+                  }
+                "
+                appendToBody
+                :zIndex="1050"
+                :noChildrenText="$t('noData')"
+              >
+                <div
+                  :title="node.label"
+                  slot="option-label"
+                  slot-scope="{ node }"
+                  :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+                >
+                  <ops-icon :type="node.id" v-if="node.children" />{{ node.label }}
+                </div>
+                <div slot="value-label" slot-scope="{ node }">
+                  <ops-icon :type="node.parentNode.id" />{{ node.label }}
+                </div>
+              </treeselect>
+            </a-col>
+          </a-row>
+        </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>
+    <span v-if="triggerAction === '2'" class="trigger-tips">{{ webhookTips }}</span>
+    <Webhook ref="webhook" style="margin-top:10px" v-if="triggerAction === '2'" />
+  </CustomDrawer>
+</template>
+
+<script>
+import _ from 'lodash'
+import { addTrigger, updateTrigger, deleteTrigger } 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'
+import { getNoticeConfigAppBot } from '@/api/noticeSetting'
+
+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,
+      visible: false,
+      category: 1,
+      form: _.cloneDeep(defaultForm),
+      rules: {
+        name: [{ required: true, message: this.$t('cmdb.ciType.nameInputTips') }],
+      },
+      dateForm: _.cloneDeep(defaultDateForm),
+      dateFormRules: {
+        attr_id: [{ required: true, message: this.$t('cmdb.ciType.selectAttributes') }],
+      },
+      notifies: _.cloneDeep(defaultNotify),
+      notifiesRules: {},
+      WxUsers: [],
+      filterValue: '',
+      triggerId: null,
+      title: this.$t('cmdb.ciType.newTrigger'),
+      attrList: [],
+      filterExp: '',
+      triggerAction: '1',
+      searchValue: '',
+      dags: [],
+      isShow: false,
+      dag_id: null,
+      showCustomEmail: false,
+      appBot: [],
+      selectedBot: undefined,
+    }
+  },
+  computed: {
+    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
+    },
+    tips() {
+      return this.$t('cmdb.ciType.refAttributeTips')
+    },
+    webhookTips() {
+      return this.$t('cmdb.ciType.webhookRefAttributeTips')
+    },
+  },
+  inject: {
+    refresh: {
+      from: 'refresh',
+      default: null,
+    },
+  },
+  mounted() {},
+  methods: {
+    async getNoticeConfigAppBot() {
+      await getNoticeConfigAppBot().then((res) => {
+        this.appBot = res
+      })
+    },
+    createFromTriggerTable(attrList) {
+      this.visible = true
+      this.getNoticeConfigAppBot()
+      this.attrList = attrList
+      this.triggerId = null
+      this.title = this.$t('cmdb.ciType.newTrigger')
+      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
+      await this.getNoticeConfigAppBot()
+      this.attrList = attrList
+      if (property.has_trigger) {
+        this.triggerId = property.trigger.id
+        this.title = this.$t('cmdb.ciType.editTriggerTitle', { name: `${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 && t.email)
+              .map((t) => t.email)
+              .join(';') ?? ''
+
+          if (custom_email) {
+            this.showCustomEmail = true
+          }
+          if (body_html) {
+            setTimeout(() => {
+              this.$refs.noticeContent.setContent(body_html)
+            }, 100)
+          }
+          const _method = method.filter((item) => ['email', 'wechatApp', 'dingdingApp', 'feishuApp'].includes(item))
+          const _flatAppBot = []
+          this.appBot.forEach((item) => {
+            _flatAppBot.push(...item.bot.map((b) => b.name))
+          })
+          const selectedBot = method.filter(
+            (item) => !['email', 'wechatApp', 'dingdingApp', 'feishuApp'].includes(item) && _flatAppBot.includes(item)
+          )
+          this.selectedBot = selectedBot
+          this.notifies = { employee_ids, custom_email, subject, method: _method }
+        }
+      } else {
+        this.title = this.$t('cmdb.ciType.newTriggerTitle', { name: `${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.selectedBot = undefined
+      this.visible = false
+    },
+    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.selectedBot && this.selectedBot.length) {
+                this.selectedBot.forEach((bot) => {
+                  tos.push({ [`${bot}`]: bot })
+                })
+              }
+              if (this.category === 2) {
+                const { before_days, notify_at } = this.dateForm
+                params.option.notifies = {
+                  tos,
+                  subject,
+                  body,
+                  body_html,
+                  method: [...method, ...(this.selectedBot ?? [])],
+                  before_days,
+                  notify_at,
+                }
+              } else {
+                params.option.notifies = {
+                  tos,
+                  subject,
+                  body,
+                  body_html,
+                  method: [...method, ...(this.selectedBot ?? [])],
+                }
+              }
+              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: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDeleteTrigger'),
+        onOk() {
+          deleteTrigger(that.CITypeId, that.triggerId).then(() => {
+            that.$message.success(that.$t('deleteSuccess'))
+            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 8d0f6fc..501270b 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerTable.vue
@@ -1,159 +1,139 @@
-<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'
-
-export default {
-  name: 'TriggerTable',
-  components: { TriggerForm },
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-      attrList: [],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  provide() {
-    return {
-      refresh: this.getTableData,
-    }
-  },
-  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.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>
+<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"
+      >{{ $t('cmdb.ciType.newTrigger') }}</a-button
+      >
+    </div>
+    <ops-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="$t('name')"></vxe-column>
+      <vxe-column field="option.description" :title="$t('desc')"></vxe-column>
+      <vxe-column field="type" :title="$t('type')">
+        <template #default="{ row }">
+          <span v-if="row.attr_id">{{ $t('cmdb.ciType.triggerDate') }}</span>
+          <span v-else>{{ $t('cmdb.ciType.triggerDataChange') }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="option.enable" :title="$t('cmdb.ciType.triggerEnable')">
+        <template #default="{ row }">
+          <a-switch :checked="row.option.enable" @click="changeEnable(row)"></a-switch>
+        </template>
+      </vxe-column>
+      <vxe-column field="operation" :title="$t('operation')" width="100px" 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>
+    </ops-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'
+
+export default {
+  name: 'TriggerTable',
+  components: { TriggerForm },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      attrList: [],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return {
+      refresh: this.getTableData,
+    }
+  },
+  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.attrList)
+    },
+    handleDetele(id) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ciType.confirmDeleteTrigger'),
+        onOk() {
+          deleteTrigger(that.CITypeId, id).then(() => {
+            that.$message.success(that.$t('deleteSuccess'))
+            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/ci_types/uniqueConstraint.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/uniqueConstraint.vue
index 24bc2d9..7f3598b 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/uniqueConstraint.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/uniqueConstraint.vue
@@ -7,9 +7,9 @@
       icon="plus"
       size="small"
       :style="{ marginBottom: '10px' }"
-    >新增</a-button
+    >{{ $t('new') }}</a-button
     >
-    <vxe-table
+    <ops-table
       :loading="loading"
       :data="tableData"
       :edit-config="{ trigger: 'manual', mode: 'row', showIcon: false, autoClear: false, showStatus: true }"
@@ -18,8 +18,10 @@
       ref="xTable"
       size="mini"
       keep-source
+      stripe
+      class="ops-stripe-table"
     >
-      <vxe-column field="attr_ids" title="属性" :edit-render="{}">
+      <vxe-column field="attr_ids" :title="$t('cmdb.ciType.attributes')" :edit-render="{}">
         <template #default="{ row }">
           <template v-for="(attr, index) in row.attr_ids">
             <span :key="attr" :style="{ color: '#2f54eb' }">{{ getDisplayName(attr) }}</span>
@@ -37,9 +39,9 @@
           </vxe-select>
         </template>
       </vxe-column>
-      <vxe-column filed="opeartion" title="操作" width="100">
+      <vxe-column filed="opeartion" :title="$t('operation')" width="100">
         <template #default="{ row }">
-          <template v-if="$refs.xTable.isActiveByRow(row)">
+          <template v-if="$refs.xTable.getVxetableRef().isActiveByRow(row)">
             <a-space>
               <a> <a-icon @click="saveRowEvent(row)" type="save"/></a>
             </a-space>
@@ -47,14 +49,14 @@
           <template v-else>
             <a-space>
               <a> <a-icon @click="editRowEvent(row)" type="edit"/></a>
-              <a-popconfirm title="确认删除？" @confirm="removeRowEvent(row)">
+              <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="removeRowEvent(row)">
                 <a :style="{ color: 'red' }"> <a-icon type="delete"/></a>
               </a-popconfirm>
             </a-space>
           </template>
         </template>
       </vxe-column>
-    </vxe-table>
+    </ops-table>
   </a-modal>
 </template>
 
@@ -98,7 +100,7 @@ export default {
       })
     },
     async handleAddUnique(row) {
-      const $table = this.$refs.xTable
+      const $table = this.$refs.xTable.getVxetableRef()
       const record = {
         attr_ids: [],
       }
@@ -106,7 +108,7 @@ export default {
       await $table.setActiveRow(newRow)
     },
     saveRowEvent(row) {
-      const $table = this.$refs.xTable
+      const $table = this.$refs.xTable.getVxetableRef()
       $table.clearActived().then(() => {
         if (row.id) {
           updateUniqueConstraint(this.CITypeId, row.id, { attr_ids: row.attr_ids }).then((res) => {
@@ -120,12 +122,12 @@ export default {
       })
     },
     editRowEvent(row) {
-      const $table = this.$refs.xTable
+      const $table = this.$refs.xTable.getVxetableRef()
       $table.setActiveRow(row)
     },
     removeRowEvent(row) {
       deleteUniqueConstraint(this.CITypeId, row.id).then((res) => {
-        this.$message.success('删除成功！')
+        this.$message.success(this.$t('deleteSuccess'))
         this.getTableList()
       })
     },
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chart.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chart.vue
index 53a775e..8dd4e21 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chart.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chart.vue
@@ -53,7 +53,7 @@
             <span>{{ row[`key${index}`] }}</span>
           </template>
         </vxe-column>
-        <vxe-column field="value" title="数量"></vxe-column>
+        <vxe-column field="value" :title="$t('cmdb.custom_dashboard.quantity')"></vxe-column>
       </template>
     </vxe-table>
     <div
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
index 00ce9cd..18f2276 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
@@ -1,778 +1,786 @@
-<template>
-  <a-modal
-    width="1100px"
-    :title="`${type === 'add' ? '新增' : '编辑'}图表`"
-    :visible="visible"
-    @cancel="handleclose"
-    @ok="handleok"
-    :bodyStyle="{ paddingTop: 0 }"
-  >
-    <div class="chart-wrapper">
-      <div class="chart-left">
-        <a-form-model ref="chartForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-          <a-form-model-item label="标题" prop="name">
-            <a-input v-model="form.name" placeholder="请输入图表标题"></a-input>
-          </a-form-model-item>
-          <a-form-model-item label="类型" prop="category" v-if="chartType !== 'count' && chartType !== 'table'">
-            <a-radio-group
-              @change="
-                () => {
-                  resetForm()
-                }
-              "
-              :default-value="1"
-              v-model="form.category"
-            >
-              <a-radio-button :value="Number(key)" :key="key" v-for="key in Object.keys(dashboardCategory)">
-                {{ dashboardCategory[key].label }}
-              </a-radio-button>
-            </a-radio-group>
-          </a-form-model-item>
-          <a-form-model-item label="类型" prop="tableCategory" v-if="chartType === 'table'">
-            <a-radio-group
-              @change="
-                () => {
-                  resetForm()
-                }
-              "
-              :default-value="1"
-              v-model="form.tableCategory"
-            >
-              <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
-            v-if="(chartType !== 'table' && form.category !== 2) || (chartType === 'table' && form.tableCategory === 1)"
-            label="模型"
-            prop="type_ids"
-          >
-            <a-select
-              show-search
-              optionFilterProp="children"
-              @change="changeCIType"
-              v-model="form.type_ids"
-              placeholder="请选择模型"
-              mode="multiple"
-            >
-              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
-                ci_type.alias || ci_type.name
-              }}</a-select-option>
-            </a-select>
-          </a-form-model-item>
-          <a-form-model-item v-else label="模型" prop="type_id">
-            <a-select
-              show-search
-              optionFilterProp="children"
-              @change="changeCIType"
-              v-model="form.type_id"
-              placeholder="请选择模型"
-            >
-              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
-                ci_type.alias || ci_type.name
-              }}</a-select-option>
-            </a-select>
-          </a-form-model-item>
-          <a-form-model-item
-            label="维度"
-            prop="attr_ids"
-            v-if="(['bar', 'line', 'pie'].includes(chartType) && form.category === 1) || chartType === 'table'"
-          >
-            <a-select
-              :filter-option="filterOption"
-              @change="changeAttr"
-              v-model="form.attr_ids"
-              placeholder="请选择维度"
-              mode="multiple"
-              show-search
-            >
-              <a-select-option
-                v-for="attr in commonAttributes.filter((attr) => !attr.is_password)"
-                :key="attr.id"
-                :value="attr.id"
-              >{{ attr.alias || attr.name }}</a-select-option
-              >
-            </a-select>
-          </a-form-model-item>
-          <a-form-model-item
-            prop="type_ids"
-            label="关系模型"
-            v-if="['bar', 'line', 'pie'].includes(chartType) && form.category === 2"
-          >
-            <a-select
-              show-search
-              optionFilterProp="children"
-              mode="multiple"
-              v-model="form.type_ids"
-              placeholder="请选择模型"
-            >
-              <a-select-opt-group
-                v-for="(key, index) in Object.keys(level2children)"
-                :key="key"
-                :label="`层级${index + 1}`"
-              >
-                <a-select-option
-                  @click="(e) => clickLevel2children(e, citype, index + 1)"
-                  v-for="citype in level2children[key]"
-                  :key="citype.id"
-                  :value="citype.id"
-                >
-                  {{ citype.alias || citype.name }}
-                </a-select-option>
-              </a-select-opt-group>
-            </a-select>
-          </a-form-model-item>
-          <div :class="{ 'chart-left-preview': true, 'chart-left-preview-empty': !isShowPreview }">
-            <span class="chart-left-preview-operation" @click="showPreview"><a-icon type="play-circle" /> 预览</span>
-            <template v-if="isShowPreview">
-              <div v-if="chartType !== 'count'" class="cmdb-dashboard-grid-item-title">
-                <template v-if="form.showIcon && ciType">
-                  <template v-if="ciType.icon">
-                    <img
-                      v-if="ciType.icon.split('$$')[2]"
-                      :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
-                    />
-                    <ops-icon
-                      v-else
-                      :style="{
-                        color: ciType.icon.split('$$')[1],
-                      }"
-                      :type="ciType.icon.split('$$')[0]"
-                    />
-                  </template>
-                  <span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
-                </template>
-                <span :style="{ color: '#000' }"> {{ form.name }}</span>
-              </div>
-              <div
-                class="chart-left-preview-box"
-                :style="{
-                  height: chartType === 'count' ? '120px' : '',
-                  marginTop: chartType === 'count' ? '80px' : '',
-                  background:
-                    chartType === 'count'
-                      ? Array.isArray(bgColor)
-                        ? `linear-gradient(to bottom, ${bgColor[0]} 0%, ${bgColor[1]} 100%)`
-                        : bgColor
-                      : '#fafafa',
-                }"
-              >
-                <div :style="{ color: fontColor }">{{ form.name }}</div>
-                <Chart
-                  :ref="`chart_${item.id}`"
-                  :chartId="item.id"
-                  :data="previewData"
-                  :category="form.category"
-                  :options="{
-                    ...item.options,
-                    name: form.name,
-                    fontColor: fontColor,
-                    bgColor: bgColor,
-                    chartType: chartType,
-                    showIcon: form.showIcon,
-                    barDirection: barDirection,
-                    barStack: barStack,
-                    chartColor: chartColor,
-                    type_ids: form.type_ids,
-                    attr_ids: form.attr_ids,
-                    isShadow: isShadow,
-                    ret: form.tableCategory === 2 ? 'cis' : '',
-                  }"
-                  :editable="false"
-                  :ci_types="ci_types"
-                  :type_id="form.type_id || form.type_ids"
-                  isPreview
-                />
-              </div>
-            </template>
-          </div>
-          <a-form-model-item label="是否显示icon" prop="showIcon" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
-            <a-switch v-model="form.showIcon"></a-switch>
-          </a-form-model-item>
-        </a-form-model>
-      </div>
-
-      <div class="chart-right">
-        <h4>图表类型</h4>
-        <div class="chart-right-type">
-          <div
-            :class="{ 'chart-right-type-box': true, 'chart-right-type-box-selected': chartType === t.value }"
-            v-for="t in chartTypeList"
-            :key="t.value"
-            @click="changeChartType(t)"
-          >
-            <ops-icon :type="`cmdb-${t.value}`" />
-            <span>{{ t.label }}</span>
-          </div>
-        </div>
-        <h4>数据筛选</h4>
-        <FilterComp
-          ref="filterComp"
-          :isDropdown="false"
-          :canSearchPreferenceAttrList="attributes"
-          @setExpFromFilter="setExpFromFilter"
-          :expression="filterExp ? `q=${filterExp}` : ''"
-        />
-        <h4>格式</h4>
-        <a-form-model :colon="false" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-          <a-form-model-item label="字体颜色" v-if="chartType === 'count'">
-            <ColorPicker
-              v-model="fontColor"
-              :colorList="[
-                '#1D2129',
-                '#4E5969',
-                '#103C93',
-                '#86909C',
-                '#ffffff',
-                '#C9F2FF',
-                '#FFEAC0',
-                '#D6FFE6',
-                '#F2DEFF',
-              ]"
-            />
-          </a-form-model-item>
-          <a-form-model-item label="背景颜色" v-if="chartType === 'count'">
-            <ColorPicker
-              v-model="bgColor"
-              :colorList="[
-                ['#6ABFFE', '#5375EB'],
-                ['#C69EFF', '#A377F9'],
-                ['#85EBC9', '#4AB8D8'],
-                ['#FEB58B', '#DF6463'],
-                '#ffffff',
-                '#FFFBF0',
-                '#FFF1EC',
-                '#E5FFFE',
-                '#E5E7FF',
-              ]"
-            />
-          </a-form-model-item>
-          <a-form-model-item label="图表颜色" v-else-if="chartType !== 'table'">
-            <ColorListPicker v-model="chartColor" />
-          </a-form-model-item>
-          <a-form-model-item label="图表长度(%)">
-            <a-radio-group class="chart-width" style="width:100%;" v-model="width">
-              <a-radio-button :value="3">
-                25
-              </a-radio-button>
-              <a-radio-button :value="6">
-                50
-              </a-radio-button>
-              <a-radio-button :value="9">
-                75
-              </a-radio-button>
-              <a-radio-button :value="12">
-                100
-              </a-radio-button>
-            </a-radio-group>
-          </a-form-model-item>
-          <a-form-model-item label="柱状图类型" v-if="chartType === 'bar'">
-            <a-radio-group v-model="barStack">
-              <a-radio value="total">
-                堆积柱状图
-              </a-radio>
-              <a-radio value="">
-                多系列柱状图
-              </a-radio>
-            </a-radio-group>
-          </a-form-model-item>
-          <a-form-model-item label="方向" v-if="chartType === 'bar'">
-            <a-radio-group v-model="barDirection">
-              <a-radio value="x">
-                X轴
-              </a-radio>
-              <a-radio value="y">
-                y轴
-              </a-radio>
-            </a-radio-group>
-          </a-form-model-item>
-          <a-form-model-item label="下方阴影" v-if="chartType === 'line'">
-            <a-switch v-model="isShadow" />
-          </a-form-model-item>
-        </a-form-model>
-      </div>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import Chart from './chart.vue'
-import { dashboardCategory } from './constant'
-import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '../../api/customDashboard'
-import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
-import { getRecursive_level2children } from '../../api/CITypeRelation'
-import { getLastLayout } from '../../utils/helper'
-import FilterComp from '@/components/CMDBFilterComp'
-import ColorPicker from './colorPicker.vue'
-import ColorListPicker from './colorListPicker.vue'
-
-export default {
-  name: 'ChartForm',
-  components: { Chart, FilterComp, ColorPicker, ColorListPicker },
-  props: {
-    ci_types: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    const chartTypeList = [
-      {
-        value: 'count',
-        label: '指标',
-      },
-      {
-        value: 'bar',
-        label: '柱状图',
-      },
-      {
-        value: 'line',
-        label: '折线图',
-      },
-      {
-        value: 'pie',
-        label: '饼状图',
-      },
-      {
-        value: 'table',
-        label: '表格',
-      },
-    ]
-    return {
-      dashboardCategory,
-      chartTypeList,
-      visible: false,
-      attributes: [],
-      type: 'add',
-      form: {
-        category: 0,
-        tableCategory: 1,
-        name: undefined,
-        type_id: undefined,
-        type_ids: undefined,
-        attr_ids: undefined,
-        level: undefined,
-        showIcon: false,
-      },
-      rules: {
-        category: [{ required: true, trigger: 'change' }],
-        name: [{ required: true, message: '请输入图表名称' }],
-        type_id: [{ required: true, message: '请选择模型', trigger: 'change' }],
-        type_ids: [{ required: true, message: '请选择模型', trigger: 'change' }],
-        attr_ids: [{ required: true, message: '请选择模型属性', trigger: 'change' }],
-        level: [{ required: true, message: '请输入关系层级' }],
-        showIcon: [{ required: false }],
-      },
-      item: {},
-      chartType: 'count', // table,bar,line,pie,count
-      width: 3,
-      fontColor: '#ffffff',
-      bgColor: ['#6ABFFE', '#5375EB'],
-      chartColor: '#5DADF2,#86DFB7,#5A6F96,#7BD5FF,#FFB980,#4D58D6,#D9B6E9,#8054FF', // 图表颜色
-      isShowPreview: false,
-      filterExp: undefined,
-      previewData: null,
-      barStack: 'total',
-      barDirection: 'y',
-      commonAttributes: [],
-      level2children: {},
-      isShadow: false,
-    }
-  },
-  computed: {
-    ciType() {
-      if (this.form.type_id || this.form.type_ids) {
-        const _find = this.ci_types.find((item) => item.id === this.form.type_id || item.id === this.form.type_ids[0])
-        return _find || null
-      }
-      return null
-    },
-  },
-  inject: ['layout'],
-  methods: {
-    async open(type, item = {}) {
-      this.visible = true
-      this.type = type
-      this.item = item
-      const { category = 0, name, type_id, attr_id, level } = item
-      const chartType = (item.options || {}).chartType || 'count'
-      const fontColor = (item.options || {}).fontColor || '#ffffff'
-      const bgColor = (item.options || {}).bgColor || ['#6ABFFE', '#5375EB']
-      const width = (item.options || {}).w
-      const showIcon = (item.options || {}).showIcon
-      const type_ids = item?.options?.type_ids || []
-      const attr_ids = item?.options?.attr_ids || []
-      const ret = item?.options?.ret || ''
-      this.width = width
-      this.chartType = chartType
-      this.filterExp = item?.options?.filter ?? ''
-      this.chartColor = item?.options?.chartColor ?? '#5DADF2,#86DFB7,#5A6F96,#7BD5FF,#FFB980,#4D58D6,#D9B6E9,#8054FF'
-      this.isShadow = item?.options?.isShadow ?? false
-
-      if (chartType === 'count') {
-        this.fontColor = fontColor
-        this.bgColor = bgColor
-      }
-      if (type_ids && type_ids.length) {
-        await getCITypeAttributesByTypeIds({ type_ids: type_ids.join(',') }).then((res) => {
-          this.attributes = res.attributes
-        })
-        if ((['bar', 'line', 'pie'].includes(chartType) && category === 1) || chartType === 'table') {
-          this.barDirection = item?.options?.barDirection ?? 'y'
-          this.barStack = item?.options?.barStack ?? 'total'
-          await getCITypeCommonAttributesByTypeIds({
-            type_ids: type_ids.join(','),
-          }).then((res) => {
-            this.commonAttributes = res.attributes
-          })
-        }
-      }
-      if (type_id) {
-        getRecursive_level2children(type_id).then((res) => {
-          this.level2children = res
-        })
-        await getCITypeCommonAttributesByTypeIds({
-          type_ids: type_id,
-        }).then((res) => {
-          this.commonAttributes = res.attributes
-        })
-      }
-      this.$nextTick(() => {
-        this.$refs.filterComp.visibleChange(true, false)
-      })
-      const default_form = {
-        category: 0,
-        name: undefined,
-        type_id: undefined,
-        type_ids: undefined,
-        attr_ids: undefined,
-        level: undefined,
-        showIcon: false,
-        tableCategory: 1,
-      }
-      this.form = {
-        ...default_form,
-        category,
-        name,
-        type_id,
-        type_ids,
-        attr_ids,
-        level,
-        showIcon,
-        tableCategory: ret === 'cis' ? 2 : 1,
-      }
-    },
-    handleclose() {
-      this.attributes = []
-      this.$refs.chartForm.clearValidate()
-      this.isShowPreview = false
-      this.visible = false
-    },
-    changeCIType(value) {
-      this.form.attr_ids = []
-      this.commonAttributes = []
-      if ((Array.isArray(value) && value.length) || (!Array.isArray(value) && value)) {
-        getCITypeAttributesByTypeIds({ type_ids: Array.isArray(value) ? value.join(',') : value }).then((res) => {
-          this.attributes = res.attributes
-        })
-      }
-      if (!Array.isArray(value) && value) {
-        getRecursive_level2children(value).then((res) => {
-          this.level2children = res
-        })
-      }
-      if ((['bar', 'line', 'pie'].includes(this.chartType) && this.form.category === 1) || this.chartType === 'table') {
-        getCITypeCommonAttributesByTypeIds({ type_ids: Array.isArray(value) ? value.join(',') : value }).then((res) => {
-          this.commonAttributes = res.attributes
-        })
-      }
-    },
-    handleok() {
-      this.$refs.chartForm.validate(async (valid) => {
-        if (valid) {
-          const name = this.form.name
-          const { chartType, fontColor, bgColor } = this
-          this.$refs.filterComp.handleSubmit()
-          if (this.item.id) {
-            const params = {
-              ...this.form,
-              options: {
-                ...this.item.options,
-                name,
-                w: this.width,
-                chartType: this.chartType,
-                showIcon: this.form.showIcon,
-                type_ids: this.form.type_ids,
-                filter: this.filterExp,
-                isShadow: this.isShadow,
-              },
-            }
-            if (chartType === 'count') {
-              params.options.fontColor = fontColor
-              params.options.bgColor = bgColor
-            }
-            if (['bar', 'line', 'pie'].includes(chartType)) {
-              if (this.form.category === 1) {
-                params.options.attr_ids = this.form.attr_ids
-              }
-              params.options.chartColor = this.chartColor
-            }
-            if (chartType === 'bar') {
-              params.options.barDirection = this.barDirection
-              params.options.barStack = this.barStack
-            }
-            if (chartType === 'table') {
-              params.options.attr_ids = this.form.attr_ids
-              if (this.form.tableCategory === 2) {
-                params.options.ret = 'cis'
-              }
-            }
-            delete params.showIcon
-            delete params.type_ids
-            delete params.attr_ids
-            delete params.tableCategory
-            await putCustomDashboard(this.item.id, params)
-            this.$emit('refresh', this.item.id)
-          } else {
-            const { xLast, yLast, wLast } = getLastLayout(this.layout())
-            const w = this.width
-            const x = xLast + wLast + w > 12 ? 0 : xLast + wLast
-            const y = xLast + wLast + w > 12 ? yLast + 1 : yLast
-            const params = {
-              ...this.form,
-              options: {
-                x,
-                y,
-                w,
-                h: this.form.category === 0 ? 3 : 5,
-                name,
-                chartType: this.chartType,
-                showIcon: this.form.showIcon,
-                type_ids: this.form.type_ids,
-                filter: this.filterExp,
-                isShadow: this.isShadow,
-              },
-            }
-            if (chartType === 'count') {
-              params.options.fontColor = fontColor
-              params.options.bgColor = bgColor
-            }
-            if (['bar', 'line', 'pie'].includes(chartType)) {
-              if (this.form.category === 1) {
-                params.options.attr_ids = this.form.attr_ids
-              }
-              params.options.chartColor = this.chartColor
-            }
-            if (chartType === 'bar') {
-              params.options.barDirection = this.barDirection
-              params.options.barStack = this.barStack
-            }
-            if (chartType === 'table') {
-              params.options.attr_ids = this.form.attr_ids
-              if (this.form.tableCategory === 2) {
-                params.options.ret = 'cis'
-              }
-            }
-            delete params.showIcon
-            delete params.type_ids
-            delete params.attr_ids
-            delete params.tableCategory
-            await postCustomDashboard(params)
-          }
-          this.handleclose()
-          this.$emit('refresh')
-        }
-      })
-    },
-    // changeDashboardCategory(value) {
-    //   this.$refs.chartForm.clearValidate()
-    //   if (value === 1 && this.form.type_id) {
-    //     this.changeCIType(this.form.type_id)
-    //   }
-    // },
-    changeChartType(t) {
-      if (!(['bar', 'line', 'pie'].includes(this.chartType) && ['bar', 'line', 'pie'].includes(t.value))) {
-        this.resetForm()
-      }
-      this.chartType = t.value
-      this.isShowPreview = false
-      if (t.value === 'count') {
-        this.form.category = 0
-      } else {
-        this.form.category = 1
-      }
-    },
-    showPreview() {
-      this.$refs.chartForm.validate(async (valid) => {
-        if (valid) {
-          this.isShowPreview = false
-          const name = this.form.name
-          const { chartType, fontColor, bgColor } = this
-          this.$refs.filterComp.handleSubmit()
-          const params = {
-            ...this.form,
-            options: {
-              name,
-              chartType,
-              showIcon: this.form.showIcon,
-              type_ids: this.form.type_ids,
-              filter: this.filterExp,
-              isShadow: this.isShadow,
-            },
-          }
-          if (chartType === 'count') {
-            params.options.fontColor = fontColor
-            params.options.bgColor = bgColor
-          }
-          if (['bar', 'line', 'pie'].includes(chartType)) {
-            if (this.form.category === 1) {
-              params.options.attr_ids = this.form.attr_ids
-            }
-            params.options.chartColor = this.chartColor
-          }
-          if (chartType === 'bar') {
-            params.options.barDirection = this.barDirection
-            params.options.barStack = this.barStack
-          }
-          if (chartType === 'table') {
-            params.options.attr_ids = this.form.attr_ids
-            if (this.form.tableCategory === 2) {
-              params.options.ret = 'cis'
-            }
-          }
-          delete params.showIcon
-          delete params.type_ids
-          delete params.attr_ids
-          delete params.tableCategory
-          postCustomDashboardPreview(params).then((res) => {
-            this.isShowPreview = true
-            this.previewData = res.counter
-          })
-        }
-      })
-    },
-    setExpFromFilter(filterExp) {
-      if (filterExp) {
-        this.filterExp = `${filterExp}`
-      } else {
-        this.filterExp = undefined
-      }
-    },
-    resetForm() {
-      this.form.type_id = undefined
-      this.form.type_ids = []
-      this.form.attr_ids = []
-      this.$refs.chartForm.clearValidate()
-    },
-    changeAttr(value) {
-      if (value && value.length) {
-        if (['line', 'pie'].includes(this.chartType)) {
-          this.form.attr_ids = [value[value.length - 1]]
-        }
-        if (['bar'].includes(this.chartType) && value.length > 2) {
-          this.form.attr_ids = value.slice(value.length - 2, value.length)
-        }
-        if (['table'].includes(this.chartType) && value.length > 3) {
-          this.form.attr_ids = value.slice(value.length - 3, value.length)
-        }
-      }
-    },
-    clickLevel2children(e, citype, level) {
-      if (this.form.level !== level) {
-        this.$nextTick(() => {
-          this.form.type_ids = [citype.id]
-        })
-      }
-      this.form.level = level
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.chart-wrapper {
-  display: flex;
-  .chart-left {
-    width: 50%;
-    .chart-left-preview {
-      border: 1px solid #e4e7ed;
-      border-radius: 2px;
-      height: 280px;
-      width: 92%;
-      position: relative;
-      padding: 12px;
-      .chart-left-preview-operation {
-        color: #86909c;
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        cursor: pointer;
-      }
-      .chart-left-preview-box {
-        padding: 6px 12px;
-        height: 250px;
-        border-radius: 8px;
-      }
-    }
-    .chart-left-preview-empty {
-      background: url('../../assets/dashboard_empty.png');
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position-x: center;
-      background-position-y: center;
-    }
-  }
-  .chart-right {
-    width: 50%;
-    h4 {
-      font-weight: 700;
-      color: #000;
-    }
-    .chart-right-type {
-      display: flex;
-      justify-content: space-between;
-      background-color: #f0f5ff;
-      padding: 6px 12px;
-      .chart-right-type-box {
-        cursor: pointer;
-        width: 70px;
-        height: 60px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        > i {
-          font-size: 32px;
-        }
-        > span {
-          font-size: 12px;
-        }
-      }
-      .chart-right-type-box-selected {
-        background-color: #e5f1ff;
-      }
-    }
-    .chart-width {
-      width: 100%;
-      > label {
-        width: 25%;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
-<style lang="less">
-.chart-wrapper {
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
+<template>
+  <a-modal
+    width="1200px"
+    :title="`${type === 'add' ? $t('cmdb.custom_dashboard.newChart') : $t('cmdb.custom_dashboard.editChart')}`"
+    :visible="visible"
+    @cancel="handleclose"
+    @ok="handleok"
+    :bodyStyle="{ paddingTop: 0 }"
+  >
+    <div class="chart-wrapper">
+      <div class="chart-left">
+        <a-form-model ref="chartForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.title')" prop="name">
+            <a-input v-model="form.name" :placeholder="$t('cmdb.custom_dashboard.titleTips')"></a-input>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('type')" prop="category" v-if="chartType !== 'count' && chartType !== 'table'">
+            <a-radio-group
+              @change="
+                () => {
+                  resetForm()
+                }
+              "
+              :default-value="1"
+              v-model="form.category"
+            >
+              <a-radio-button :value="Number(key)" :key="key" v-for="key in Object.keys(dashboardCategory)">
+                {{ dashboardCategory[key].label }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('type')" prop="tableCategory" v-if="chartType === 'table'">
+            <a-radio-group
+              @change="
+                () => {
+                  resetForm()
+                }
+              "
+              :default-value="1"
+              v-model="form.tableCategory"
+            >
+              <a-radio-button :value="1">
+                {{ $t('cmdb.custom_dashboard.calcIndicators') }}
+              </a-radio-button>
+              <a-radio-button :value="2">
+                {{ $t('cmdb.menu.ciTable') }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item
+            v-if="(chartType !== 'table' && form.category !== 2) || (chartType === 'table' && form.tableCategory === 1)"
+            :label="$t('cmdb.ciType.ciType')"
+            prop="type_ids"
+          >
+            <a-select
+              show-search
+              optionFilterProp="children"
+              @change="changeCIType"
+              v-model="form.type_ids"
+              :placeholder="$t('cmdb.ciType.selectCIType')"
+              mode="multiple"
+            >
+              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
+                ci_type.alias || ci_type.name
+              }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item v-else :label="$t('cmdb.ciType.ciType')" prop="type_id">
+            <a-select
+              show-search
+              optionFilterProp="children"
+              @change="changeCIType"
+              v-model="form.type_id"
+              :placeholder="$t('cmdb.ciType.selectCIType')"
+            >
+              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
+                ci_type.alias || ci_type.name
+              }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item
+            :label="$t('cmdb.custom_dashboard.dimensions')"
+            prop="attr_ids"
+            v-if="(['bar', 'line', 'pie'].includes(chartType) && form.category === 1) || chartType === 'table'"
+          >
+            <a-select
+              :filter-option="filterOption"
+              @change="changeAttr"
+              v-model="form.attr_ids"
+              :placeholder="$t('cmdb.custom_dashboard.selectDimensions')"
+              mode="multiple"
+              show-search
+            >
+              <a-select-option
+                v-for="attr in commonAttributes.filter((attr) => !attr.is_password)"
+                :key="attr.id"
+                :value="attr.id"
+              >{{ attr.alias || attr.name }}</a-select-option
+              >
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item
+            prop="type_ids"
+            :label="$t('cmdb.custom_dashboard.childCIType')"
+            v-if="['bar', 'line', 'pie'].includes(chartType) && form.category === 2"
+          >
+            <a-select
+              show-search
+              optionFilterProp="children"
+              mode="multiple"
+              v-model="form.type_ids"
+              :placeholder="$t('cmdb.ciType.selectCIType')"
+            >
+              <a-select-opt-group
+                v-for="(key, index) in Object.keys(level2children)"
+                :key="key"
+                :label="$t('cmdb.custom_dashboard.level') + `${index + 1}`"
+              >
+                <a-select-option
+                  @click="(e) => clickLevel2children(e, citype, index + 1)"
+                  v-for="citype in level2children[key]"
+                  :key="citype.id"
+                  :value="citype.id"
+                >
+                  {{ citype.alias || citype.name }}
+                </a-select-option>
+              </a-select-opt-group>
+            </a-select>
+          </a-form-model-item>
+          <div :class="{ 'chart-left-preview': true, 'chart-left-preview-empty': !isShowPreview }">
+            <span
+              class="chart-left-preview-operation"
+              @click="showPreview"
+            ><a-icon type="play-circle" /> {{ $t('cmdb.custom_dashboard.preview') }}</span
+            >
+            <template v-if="isShowPreview">
+              <div v-if="chartType !== 'count'" class="cmdb-dashboard-grid-item-title">
+                <template v-if="form.showIcon && ciType">
+                  <template v-if="ciType.icon">
+                    <img
+                      v-if="ciType.icon.split('$$')[2]"
+                      :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
+                    />
+                    <ops-icon
+                      v-else
+                      :style="{
+                        color: ciType.icon.split('$$')[1],
+                      }"
+                      :type="ciType.icon.split('$$')[0]"
+                    />
+                  </template>
+                  <span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
+                </template>
+                <span :style="{ color: '#000' }"> {{ form.name }}</span>
+              </div>
+              <div
+                class="chart-left-preview-box"
+                :style="{
+                  height: chartType === 'count' ? '120px' : '',
+                  marginTop: chartType === 'count' ? '80px' : '',
+                  background:
+                    chartType === 'count'
+                      ? Array.isArray(bgColor)
+                        ? `linear-gradient(to bottom, ${bgColor[0]} 0%, ${bgColor[1]} 100%)`
+                        : bgColor
+                      : '#fafafa',
+                }"
+              >
+                <div :style="{ color: fontColor }">{{ form.name }}</div>
+                <Chart
+                  :ref="`chart_${item.id}`"
+                  :chartId="item.id"
+                  :data="previewData"
+                  :category="form.category"
+                  :options="{
+                    ...item.options,
+                    name: form.name,
+                    fontColor: fontColor,
+                    bgColor: bgColor,
+                    chartType: chartType,
+                    showIcon: form.showIcon,
+                    barDirection: barDirection,
+                    barStack: barStack,
+                    chartColor: chartColor,
+                    type_ids: form.type_ids,
+                    attr_ids: form.attr_ids,
+                    isShadow: isShadow,
+                    ret: form.tableCategory === 2 ? 'cis' : '',
+                  }"
+                  :editable="false"
+                  :ci_types="ci_types"
+                  :type_id="form.type_id || form.type_ids"
+                  isPreview
+                />
+              </div>
+            </template>
+          </div>
+          <a-form-model-item
+            :label="$t('cmdb.custom_dashboard.showIcon')"
+            prop="showIcon"
+            :label-col="{ span: 5 }"
+            :wrapper-col="{ span: 18 }"
+          >
+            <a-switch v-model="form.showIcon"></a-switch>
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+
+      <div class="chart-right">
+        <h4>{{ $t('cmdb.custom_dashboard.chartType') }}</h4>
+        <div class="chart-right-type">
+          <div
+            :class="{ 'chart-right-type-box': true, 'chart-right-type-box-selected': chartType === t.value }"
+            v-for="t in chartTypeList"
+            :key="t.value"
+            @click="changeChartType(t)"
+          >
+            <ops-icon :type="`cmdb-${t.value}`" />
+            <span>{{ t.label }}</span>
+          </div>
+        </div>
+        <h4>{{ $t('cmdb.custom_dashboard.dataFilter') }}</h4>
+        <FilterComp
+          ref="filterComp"
+          :isDropdown="false"
+          :canSearchPreferenceAttrList="attributes"
+          @setExpFromFilter="setExpFromFilter"
+          :expression="filterExp ? `q=${filterExp}` : ''"
+        />
+        <h4>{{ $t('cmdb.custom_dashboard.format') }}</h4>
+        <a-form-model :colon="false" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.fontColor')" v-if="chartType === 'count'">
+            <ColorPicker
+              v-model="fontColor"
+              :colorList="[
+                '#1D2129',
+                '#4E5969',
+                '#103C93',
+                '#86909C',
+                '#ffffff',
+                '#C9F2FF',
+                '#FFEAC0',
+                '#D6FFE6',
+                '#F2DEFF',
+              ]"
+            />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.backgroundColor')" v-if="chartType === 'count'">
+            <ColorPicker
+              v-model="bgColor"
+              :colorList="[
+                ['#6ABFFE', '#5375EB'],
+                ['#C69EFF', '#A377F9'],
+                ['#85EBC9', '#4AB8D8'],
+                ['#FEB58B', '#DF6463'],
+                '#ffffff',
+                '#FFFBF0',
+                '#FFF1EC',
+                '#E5FFFE',
+                '#E5E7FF',
+              ]"
+            />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.chartColor')" v-else-if="chartType !== 'table'">
+            <ColorListPicker v-model="chartColor" />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.chartLength') + `(%)`">
+            <a-radio-group class="chart-width" style="width:100%;" v-model="width">
+              <a-radio-button :value="3">
+                25
+              </a-radio-button>
+              <a-radio-button :value="6">
+                50
+              </a-radio-button>
+              <a-radio-button :value="9">
+                75
+              </a-radio-button>
+              <a-radio-button :value="12">
+                100
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.barType')" v-if="chartType === 'bar'">
+            <a-radio-group v-model="barStack">
+              <a-radio value="total">
+                {{ $t('cmdb.custom_dashboard.stackedBar') }}
+              </a-radio>
+              <a-radio value="">
+                {{ $t('cmdb.custom_dashboard.multipleSeriesBar') }}
+              </a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.direction')" v-if="chartType === 'bar'">
+            <a-radio-group v-model="barDirection">
+              <a-radio value="x"> X {{ $t('cmdb.custom_dashboard.axis') }} </a-radio>
+              <a-radio value="y"> Y {{ $t('cmdb.custom_dashboard.axis') }} </a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cmdb.custom_dashboard.lowerShadow')" v-if="chartType === 'line'">
+            <a-switch v-model="isShadow" />
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import Chart from './chart.vue'
+import { dashboardCategory } from './constant'
+import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '../../api/customDashboard'
+import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
+import { getRecursive_level2children } from '../../api/CITypeRelation'
+import { getLastLayout } from '../../utils/helper'
+import FilterComp from '@/components/CMDBFilterComp'
+import ColorPicker from './colorPicker.vue'
+import ColorListPicker from './colorListPicker.vue'
+
+export default {
+  name: 'ChartForm',
+  components: { Chart, FilterComp, ColorPicker, ColorListPicker },
+  props: {
+    ci_types: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      attributes: [],
+      type: 'add',
+      form: {
+        category: 0,
+        tableCategory: 1,
+        name: undefined,
+        type_id: undefined,
+        type_ids: undefined,
+        attr_ids: undefined,
+        level: undefined,
+        showIcon: false,
+      },
+      rules: {
+        category: [{ required: true, trigger: 'change' }],
+        name: [{ required: true, message: this.$t('cmdb.custom_dashboard.titleTips') }],
+        type_id: [{ required: true, message: this.$t('cmdb.ciType.selectCIType'), trigger: 'change' }],
+        type_ids: [{ required: true, message: this.$t('cmdb.ciType.selectCIType'), trigger: 'change' }],
+        attr_ids: [{ required: true, message: this.$t('cmdb.ciType.selectCITypeAttributes'), trigger: 'change' }],
+        level: [{ required: true, message: this.$t('cmdb.custom_dashboard.levelTips') }],
+        showIcon: [{ required: false }],
+      },
+      item: {},
+      chartType: 'count', // table,bar,line,pie,count
+      width: 3,
+      fontColor: '#ffffff',
+      bgColor: ['#6ABFFE', '#5375EB'],
+      chartColor: '#5DADF2,#86DFB7,#5A6F96,#7BD5FF,#FFB980,#4D58D6,#D9B6E9,#8054FF', // chart color
+      isShowPreview: false,
+      filterExp: undefined,
+      previewData: null,
+      barStack: 'total',
+      barDirection: 'y',
+      commonAttributes: [],
+      level2children: {},
+      isShadow: false,
+    }
+  },
+  computed: {
+    ciType() {
+      if (this.form.type_id || this.form.type_ids) {
+        const _find = this.ci_types.find((item) => item.id === this.form.type_id || item.id === this.form.type_ids[0])
+        return _find || null
+      }
+      return null
+    },
+    chartTypeList() {
+      return [
+        {
+          value: 'count',
+          label: this.$t('cmdb.custom_dashboard.count'),
+        },
+        {
+          value: 'bar',
+          label: this.$t('cmdb.custom_dashboard.bar'),
+        },
+        {
+          value: 'line',
+          label: this.$t('cmdb.custom_dashboard.line'),
+        },
+        {
+          value: 'pie',
+          label: this.$t('cmdb.custom_dashboard.pie'),
+        },
+        {
+          value: 'table',
+          label: this.$t('cmdb.custom_dashboard.table'),
+        },
+      ]
+    },
+    dashboardCategory() {
+      return dashboardCategory()
+    },
+  },
+  inject: ['layout'],
+  methods: {
+    async open(type, item = {}) {
+      this.visible = true
+      this.type = type
+      this.item = item
+      const { category = 0, name, type_id, attr_id, level } = item
+      const chartType = (item.options || {}).chartType || 'count'
+      const fontColor = (item.options || {}).fontColor || '#ffffff'
+      const bgColor = (item.options || {}).bgColor || ['#6ABFFE', '#5375EB']
+      const width = (item.options || {}).w
+      const showIcon = (item.options || {}).showIcon
+      const type_ids = item?.options?.type_ids || []
+      const attr_ids = item?.options?.attr_ids || []
+      const ret = item?.options?.ret || ''
+      this.width = width
+      this.chartType = chartType
+      this.filterExp = item?.options?.filter ?? ''
+      this.chartColor = item?.options?.chartColor ?? '#5DADF2,#86DFB7,#5A6F96,#7BD5FF,#FFB980,#4D58D6,#D9B6E9,#8054FF'
+      this.isShadow = item?.options?.isShadow ?? false
+
+      if (chartType === 'count') {
+        this.fontColor = fontColor
+        this.bgColor = bgColor
+      }
+      if (type_ids && type_ids.length) {
+        await getCITypeAttributesByTypeIds({ type_ids: type_ids.join(',') }).then((res) => {
+          this.attributes = res.attributes
+        })
+        if ((['bar', 'line', 'pie'].includes(chartType) && category === 1) || chartType === 'table') {
+          this.barDirection = item?.options?.barDirection ?? 'y'
+          this.barStack = item?.options?.barStack ?? 'total'
+          await getCITypeCommonAttributesByTypeIds({
+            type_ids: type_ids.join(','),
+          }).then((res) => {
+            this.commonAttributes = res.attributes
+          })
+        }
+      }
+      if (type_id) {
+        getRecursive_level2children(type_id).then((res) => {
+          this.level2children = res
+        })
+        await getCITypeCommonAttributesByTypeIds({
+          type_ids: type_id,
+        }).then((res) => {
+          this.commonAttributes = res.attributes
+        })
+      }
+      this.$nextTick(() => {
+        this.$refs.filterComp.visibleChange(true, false)
+      })
+      const default_form = {
+        category: 0,
+        name: undefined,
+        type_id: undefined,
+        type_ids: undefined,
+        attr_ids: undefined,
+        level: undefined,
+        showIcon: false,
+        tableCategory: 1,
+      }
+      this.form = {
+        ...default_form,
+        category,
+        name,
+        type_id,
+        type_ids,
+        attr_ids,
+        level,
+        showIcon,
+        tableCategory: ret === 'cis' ? 2 : 1,
+      }
+    },
+    handleclose() {
+      this.attributes = []
+      this.$refs.chartForm.clearValidate()
+      this.isShowPreview = false
+      this.visible = false
+    },
+    changeCIType(value) {
+      this.form.attr_ids = []
+      this.commonAttributes = []
+      if ((Array.isArray(value) && value.length) || (!Array.isArray(value) && value)) {
+        getCITypeAttributesByTypeIds({ type_ids: Array.isArray(value) ? value.join(',') : value }).then((res) => {
+          this.attributes = res.attributes
+        })
+      }
+      if (!Array.isArray(value) && value) {
+        getRecursive_level2children(value).then((res) => {
+          this.level2children = res
+        })
+      }
+      if ((['bar', 'line', 'pie'].includes(this.chartType) && this.form.category === 1) || this.chartType === 'table') {
+        getCITypeCommonAttributesByTypeIds({ type_ids: Array.isArray(value) ? value.join(',') : value }).then((res) => {
+          this.commonAttributes = res.attributes
+        })
+      }
+    },
+    handleok() {
+      this.$refs.chartForm.validate(async (valid) => {
+        if (valid) {
+          const name = this.form.name
+          const { chartType, fontColor, bgColor } = this
+          this.$refs.filterComp.handleSubmit()
+          if (this.item.id) {
+            const params = {
+              ...this.form,
+              options: {
+                ...this.item.options,
+                name,
+                w: this.width,
+                chartType: this.chartType,
+                showIcon: this.form.showIcon,
+                type_ids: this.form.type_ids,
+                filter: this.filterExp,
+                isShadow: this.isShadow,
+              },
+            }
+            if (chartType === 'count') {
+              params.options.fontColor = fontColor
+              params.options.bgColor = bgColor
+            }
+            if (['bar', 'line', 'pie'].includes(chartType)) {
+              if (this.form.category === 1) {
+                params.options.attr_ids = this.form.attr_ids
+              }
+              params.options.chartColor = this.chartColor
+            }
+            if (chartType === 'bar') {
+              params.options.barDirection = this.barDirection
+              params.options.barStack = this.barStack
+            }
+            if (chartType === 'table') {
+              params.options.attr_ids = this.form.attr_ids
+              if (this.form.tableCategory === 2) {
+                params.options.ret = 'cis'
+              }
+            }
+            delete params.showIcon
+            delete params.type_ids
+            delete params.attr_ids
+            delete params.tableCategory
+            await putCustomDashboard(this.item.id, params)
+            this.$emit('refresh', this.item.id)
+          } else {
+            const { xLast, yLast, wLast } = getLastLayout(this.layout())
+            const w = this.width
+            const x = xLast + wLast + w > 12 ? 0 : xLast + wLast
+            const y = xLast + wLast + w > 12 ? yLast + 1 : yLast
+            const params = {
+              ...this.form,
+              options: {
+                x,
+                y,
+                w,
+                h: this.form.category === 0 ? 3 : 5,
+                name,
+                chartType: this.chartType,
+                showIcon: this.form.showIcon,
+                type_ids: this.form.type_ids,
+                filter: this.filterExp,
+                isShadow: this.isShadow,
+              },
+            }
+            if (chartType === 'count') {
+              params.options.fontColor = fontColor
+              params.options.bgColor = bgColor
+            }
+            if (['bar', 'line', 'pie'].includes(chartType)) {
+              if (this.form.category === 1) {
+                params.options.attr_ids = this.form.attr_ids
+              }
+              params.options.chartColor = this.chartColor
+            }
+            if (chartType === 'bar') {
+              params.options.barDirection = this.barDirection
+              params.options.barStack = this.barStack
+            }
+            if (chartType === 'table') {
+              params.options.attr_ids = this.form.attr_ids
+              if (this.form.tableCategory === 2) {
+                params.options.ret = 'cis'
+              }
+            }
+            delete params.showIcon
+            delete params.type_ids
+            delete params.attr_ids
+            delete params.tableCategory
+            await postCustomDashboard(params)
+          }
+          this.handleclose()
+          this.$emit('refresh')
+        }
+      })
+    },
+    // changeDashboardCategory(value) {
+    //   this.$refs.chartForm.clearValidate()
+    //   if (value === 1 && this.form.type_id) {
+    //     this.changeCIType(this.form.type_id)
+    //   }
+    // },
+    changeChartType(t) {
+      if (!(['bar', 'line', 'pie'].includes(this.chartType) && ['bar', 'line', 'pie'].includes(t.value))) {
+        this.resetForm()
+      }
+      this.chartType = t.value
+      this.isShowPreview = false
+      if (t.value === 'count') {
+        this.form.category = 0
+      } else {
+        this.form.category = 1
+      }
+    },
+    showPreview() {
+      this.$refs.chartForm.validate(async (valid) => {
+        if (valid) {
+          this.isShowPreview = false
+          const name = this.form.name
+          const { chartType, fontColor, bgColor } = this
+          this.$refs.filterComp.handleSubmit()
+          const params = {
+            ...this.form,
+            options: {
+              name,
+              chartType,
+              showIcon: this.form.showIcon,
+              type_ids: this.form.type_ids,
+              filter: this.filterExp,
+              isShadow: this.isShadow,
+            },
+          }
+          if (chartType === 'count') {
+            params.options.fontColor = fontColor
+            params.options.bgColor = bgColor
+          }
+          if (['bar', 'line', 'pie'].includes(chartType)) {
+            if (this.form.category === 1) {
+              params.options.attr_ids = this.form.attr_ids
+            }
+            params.options.chartColor = this.chartColor
+          }
+          if (chartType === 'bar') {
+            params.options.barDirection = this.barDirection
+            params.options.barStack = this.barStack
+          }
+          if (chartType === 'table') {
+            params.options.attr_ids = this.form.attr_ids
+            if (this.form.tableCategory === 2) {
+              params.options.ret = 'cis'
+            }
+          }
+          delete params.showIcon
+          delete params.type_ids
+          delete params.attr_ids
+          delete params.tableCategory
+          postCustomDashboardPreview(params).then((res) => {
+            this.isShowPreview = true
+            this.previewData = res.counter
+          })
+        }
+      })
+    },
+    setExpFromFilter(filterExp) {
+      if (filterExp) {
+        this.filterExp = `${filterExp}`
+      } else {
+        this.filterExp = undefined
+      }
+    },
+    resetForm() {
+      this.form.type_id = undefined
+      this.form.type_ids = []
+      this.form.attr_ids = []
+      this.$refs.chartForm.clearValidate()
+    },
+    changeAttr(value) {
+      if (value && value.length) {
+        if (['line', 'pie'].includes(this.chartType)) {
+          this.form.attr_ids = [value[value.length - 1]]
+        }
+        if (['bar'].includes(this.chartType) && value.length > 2) {
+          this.form.attr_ids = value.slice(value.length - 2, value.length)
+        }
+        if (['table'].includes(this.chartType) && value.length > 3) {
+          this.form.attr_ids = value.slice(value.length - 3, value.length)
+        }
+      }
+    },
+    clickLevel2children(e, citype, level) {
+      if (this.form.level !== level) {
+        this.$nextTick(() => {
+          this.form.type_ids = [citype.id]
+        })
+      }
+      this.form.level = level
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.chart-wrapper {
+  display: flex;
+  .chart-left {
+    width: 50%;
+    .chart-left-preview {
+      border: 1px solid #e4e7ed;
+      border-radius: 2px;
+      height: 280px;
+      width: 92%;
+      position: relative;
+      padding: 12px;
+      .chart-left-preview-operation {
+        color: #86909c;
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        cursor: pointer;
+      }
+      .chart-left-preview-box {
+        padding: 6px 12px;
+        height: 250px;
+        border-radius: 8px;
+      }
+    }
+    .chart-left-preview-empty {
+      background: url('../../assets/dashboard_empty.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position-x: center;
+      background-position-y: center;
+    }
+  }
+  .chart-right {
+    width: 50%;
+    h4 {
+      font-weight: 700;
+      color: #000;
+    }
+    .chart-right-type {
+      display: flex;
+      justify-content: space-between;
+      background-color: #f0f5ff;
+      padding: 6px 12px;
+      .chart-right-type-box {
+        cursor: pointer;
+        width: 70px;
+        height: 60px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        > i {
+          font-size: 32px;
+        }
+        > span {
+          font-size: 12px;
+        }
+      }
+      .chart-right-type-box-selected {
+        background-color: #e5f1ff;
+      }
+    }
+    .chart-width {
+      width: 100%;
+      > label {
+        width: 25%;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.chart-wrapper {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartOptions.js b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartOptions.js
index a256dbb..45fe798 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartOptions.js
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartOptions.js
@@ -1,7 +1,9 @@
+import i18n from '@/lang'
+
 export const category_1_bar_options = (data, options) => {
-    // 计算一级分类
+    // Calculate first level classification
     const xData = Object.keys(data)
-    // 计算共有多少二级分类
+    // Calculate how many secondary categories there are
     const secondCategory = {}
     Object.keys(data).forEach(key => {
         if (Object.prototype.toString.call(data[key]) === '[object Object]') {
@@ -9,7 +11,7 @@ export const category_1_bar_options = (data, options) => {
                 secondCategory[key1] = Array.from({ length: xData.length }).fill(0)
             })
         } else {
-            secondCategory['其他'] = Array.from({ length: xData.length }).fill(0)
+            secondCategory[i18n.t('other')] = Array.from({ length: xData.length }).fill(0)
         }
     })
     Object.keys(secondCategory).forEach(key => {
@@ -18,7 +20,7 @@ export const category_1_bar_options = (data, options) => {
                 secondCategory[key][idx] = data[x][key]
             }
             if (typeof data[x] === 'number') {
-                secondCategory['其他'][idx] = data[x]
+                secondCategory[i18n.t('other')][idx] = data[x]
             }
         })
     })
@@ -121,7 +123,7 @@ export const category_1_line_options = (data, options) => {
                         }, {
                             offset: 1, color: '#ffffff' // 100% 处的颜色
                         }],
-                        global: false // 缺省为 false
+                        global: false // default is false
                     }
                 } : null
             }
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/constant.js b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/constant.js
index 57843ed..6bf0eb4 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/constant.js
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/constant.js
@@ -1,4 +1,8 @@
-export const dashboardCategory = {
-    1: { label: '默认' },
-    2: { label: '关系' }
+import i18n from '@/lang'
+
+export const dashboardCategory = () => {
+    return {
+        1: { label: i18n.t('cmdb.custom_dashboard.default') },
+        2: { label: i18n.t('cmdb.custom_dashboard.relation') }
+    }
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
index 6a86dfd..63e75a2 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
@@ -16,7 +16,7 @@
           type="primary"
           icon="plus-circle"
           class="ops-button-primary"
-        >新增图表</a-button
+        >{{ $t('cmdb.custom_dashboard.newChart') }}</a-button
         >
       </div>
       <GridLayout
@@ -78,10 +78,10 @@
             ></a>
             <a-menu slot="overlay">
               <a-menu-item>
-                <a @click="() => openChartForm('edit', item)"><a-icon style="margin-right:5px" type="edit" />编辑</a>
+                <a @click="() => openChartForm('edit', item)"><a-icon style="margin-right:5px" type="edit" />{{ $t('edit') }}</a>
               </a-menu-item>
               <a-menu-item>
-                <a @click="deleteChart(item)"><a-icon style="margin-right:5px" type="delete" />删除</a>
+                <a @click="deleteChart(item)"><a-icon style="margin-right:5px" type="delete" />{{ $t('delete') }}</a>
               </a-menu-item>
             </a-menu>
           </a-dropdown>
@@ -116,7 +116,7 @@
       >
         定制仪表盘
       </a-button>
-      <span v-else>管理员暂未定制仪表盘</span>
+      <span v-else>{{ $t('cmdb.custom_dashboard.noCustomDashboard') }}</span>
     </div>
     <ChartForm ref="chartForm" @refresh="refresh" :ci_types="ci_types" :totalData="totalData" />
   </div>
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue b/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
index 3139dd0..bd098a4 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
@@ -32,7 +32,7 @@
             /></a>
           </a-space>
           <a v-else @click="handleEdit"><a-icon type="eye"/></a>
-          <span>{{ rule.is_plugin ? 'Plugin' : '默认' }}</span>
+          <span>{{ rule.is_plugin ? 'Plugin' : $t('cmdb.custom_dashboard.default') }}</span>
         </div>
       </template>
     </div>
@@ -57,7 +57,7 @@ export default {
       return this.rule?.option?.icon ?? { color: '', name: 'caise-wuliji' }
     },
     isDeletable() {
-      return !['物理机', '虚拟机', '网卡', '硬盘', 'server', 'vserver', 'NIC', 'harddisk'].includes(this.rule.name)
+      return ![this.$t('cmdb.ad.server'), this.$t('cmdb.ad.vserver'), this.$t('cmdb.ad.nic'), this.$t('cmdb.ad.disk'), 'server', 'vserver', 'NIC', 'harddisk'].includes(this.rule.name)
     },
   },
   inject: {
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue b/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
index 0aa2fc0..b18c4d1 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
@@ -1,344 +1,298 @@
-<template>
-  <CustomDrawer width="800px" :title="title" :visible="visible" @close="handleClose">
-    <template v-if="adType === 'agent'">
-      <a-form-model
-        ref="autoDiscoveryForm"
-        :model="form"
-        :rules="rules"
-        :label-col="{ span: 2 }"
-        :wrapper-col="{ span: 20 }"
-      >
-        <a-divider :style="{ margin: '5px 0' }">基础设置</a-divider>
-        <a-form-model-item label="名称" prop="name">
-          <a-input v-model="form.name" />
-        </a-form-model-item>
-        <a-form-model-item label="图标" v-if="is_inner">
-          <CustomIconSelect v-model="customIcon" :style="{ marginTop: '6px' }" />
-        </a-form-model-item>
-        <a-form-model-item label="模式" prop="is_plugin">
-          <a-radio-group v-model="form.is_plugin" @change="changeIsPlugin" :disabled="!is_inner">
-            <a-radio :value="false">默认</a-radio>
-            <a-radio :value="true">plugin</a-radio>
-          </a-radio-group>
-        </a-form-model-item>
-      </a-form-model>
-      <a-divider :style="{ margin: '5px 0' }">采集设置</a-divider>
-      <CustomCodeMirror
-        codeMirrorId="cmdb-adt"
-        v-if="form.is_plugin"
-        ref="codemirror"
-        @changeCodeContent="changeCodeContent"
-      ></CustomCodeMirror>
-      <div style="margin:10px 0;text-align:right;">
-        <a-button
-          v-show="form.is_plugin"
-          size="small"
-          type="primary"
-          ghost
-          @click="handleSubmit(true)"
-        >更新字段</a-button
-        >
-      </div>
-      <a-button
-        v-show="!form.is_plugin"
-        size="small"
-        type="primary"
-        ghost
-        icon="plus"
-        :style="{ marginBottom: '10px' }"
-        @click="insertEvent(-1)"
-      >新增</a-button
-      >
-      <vxe-table
-        size="mini"
-        stripe
-        class="ops-stripe-table"
-        show-overflow
-        keep-source
-        ref="xTable"
-        max-height="400"
-        :data="tableData"
-        :edit-config="{ trigger: 'manual', mode: 'row' }"
-      >
-        <vxe-column field="name" title="名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
-          <template #edit="{ row }">
-            <vxe-input v-model="row.name" type="text"></vxe-input>
-          </template>
-        </vxe-column>
-        <vxe-column field="type" title="类型" :edit-render="{}">
-          <template #edit="{ row }">
-            <vxe-select v-model="row.type" transfer>
-              <vxe-option v-for="item in typeList" :key="item" :value="item" :label="item"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-column>
-        <vxe-column field="desc" title="描述" :edit-render="{ autofocus: '.vxe-input--inner' }">
-          <template #edit="{ row }">
-            <vxe-input v-model="row.desc" type="text"></vxe-input>
-          </template>
-        </vxe-column>
-        <vxe-column title="操作" width="60" v-if="!form.is_plugin">
-          <template #default="{ row }">
-            <a-space v-if="$refs.xTable.isActiveByRow(row)">
-              <a @click="saveRowEvent(row)"><a-icon type="save"/></a>
-              <a @click="cancelRowEvent(row)"><a-icon type="close"/></a>
-            </a-space>
-            <a-space v-else>
-              <a @click="editRowEvent(row)"><a-icon type="edit"/></a>
-              <a :style="{ color: 'red' }" @click="deleteRowEvent(row)"><a-icon type="delete"/></a>
-            </a-space>
-          </template>
-        </vxe-column>
-      </vxe-table>
-
-      <div class="custom-drawer-bottom-action">
-        <a-button @click="handleClose">取消</a-button>
-        <a-button @click="handleSubmit(false)" type="primary">保存</a-button>
-      </div>
-    </template>
-    <template v-else>
-      <HttpSnmpAD ref="httpSnmpAd" :ruleType="adType" :ruleName="ruleData.name" />
-    </template>
-  </CustomDrawer>
-</template>
-
-<script>
-import CustomIconSelect from '@/components/CustomIconSelect'
-import { postDiscovery, putDiscovery } from '../../api/discovery'
-import HttpSnmpAD from '../../components/httpSnmpAD'
-import CustomCodeMirror from '@/components/CustomCodeMirror'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/monokai.css'
-export default {
-  name: 'EditDrawer',
-  components: { CustomIconSelect, CustomCodeMirror, HttpSnmpAD },
-  props: {
-    is_inner: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    const default_plugin_script = `# -*- coding:utf-8 -*-
-
-import json
-
-
-class AutoDiscovery(object):
-
-    @property
-    def unique_key(self):
-        """
-
-        :return: 返回唯一属性的名字
-        """
-        return
-
-    @staticmethod
-    def attributes():
-        """
-        定义属性字段
-        :return: 返回属性字段列表, 列表项是(名称, 类型, 描述), 名称必须是英文
-        类型: String Integer Float Date DateTime Time JSON
-        例如:
-        return [
-            ("ci_type", "String", "模型名称"),
-            ("private_ip", "String", "内网IP, 多值逗号分隔")
-        ]
-        """
-        return []
-
-    @staticmethod
-    def run():
-        """
-        执行入口, 返回采集的属性值
-        :return: 返回一个列表, 列表项是字典, 字典key是属性名称, value是属性值
-        例如:
-        return [dict(ci_type="server", private_ip="192.168.1.1")]
-        """
-        return []
-
-
-if __name__ == "__main__":
-    result = AutoDiscovery().run()
-    if isinstance(result, list):
-        print("AutoDiscovery::Result::{}".format(json.dumps(result)))
-    else:
-        print("ERROR: 采集返回必须是列表")
-          `
-    const typeList = ['String', 'Integer', 'Float', 'Date', 'DateTime', 'Time', 'JSON']
-    return {
-      default_plugin_script,
-      typeList,
-      visible: false,
-      ruleData: {},
-      type: 'add',
-      adType: '',
-      form: { name: '', is_plugin: false },
-      rules: {},
-      customIcon: { name: '', color: '' },
-      tableData: [],
-      editDefaultTableData: [],
-      plugin_script: '',
-      cmOptions: {
-        lineNumbers: true,
-        mode: 'python',
-        height: '200px',
-        theme: 'monokai',
-        tabSize: 4,
-        lineWrapping: true,
-      },
-    }
-  },
-  computed: {
-    title() {
-      if (this.adType === 'http' || this.adType === 'snmp') {
-        return this.ruleData.name
-      }
-      if (this.type === 'edit') {
-        return `编辑：${this.ruleData.name}`
-      }
-      return '新建'
-    },
-  },
-  inject: {
-    getDiscovery: {
-      from: 'getDiscovery',
-      default: () => {},
-    },
-  },
-  methods: {
-    open(data, type, adType) {
-      this.visible = true
-      this.type = type
-      this.ruleData = data
-      this.adType = adType
-      if (!this.is_inner) {
-        this.form = {
-          name: '',
-          is_plugin: true,
-        }
-      }
-      if (adType === 'http' || adType === 'snmp') {
-        return
-      }
-      this.$nextTick(() => {
-        if (this.type === 'edit') {
-          this.form = {
-            name: data.name,
-            is_plugin: data.is_plugin,
-          }
-          this.customIcon = data?.option?.icon ?? { name: 'caise-chajian', color: '' }
-          this.tableData = data?.attributes ?? []
-          this.editDefaultTableData = data?.attributes ?? []
-          this.plugin_script = data?.plugin_script ?? this.default_plugin_script
-        }
-        if (this.type === 'add') {
-          this.customIcon = { name: 'caise-chajian', color: '' }
-          // eslint-disable-next-line no-useless-escape
-          this.plugin_script = this.default_plugin_script
-        }
-        if (data?.is_plugin || !this.is_inner) {
-          this.$nextTick(() => {
-            this.$refs.codemirror.initCodeMirror(this.plugin_script)
-          })
-        }
-      })
-    },
-    handleClose() {
-      this.tableData = []
-      this.customIcon = { name: '', color: '' }
-      this.form = { name: '', is_plugin: false }
-      if (this.adType === 'agent') {
-        this.$refs.autoDiscoveryForm.clearValidate()
-      } else {
-        // this.$refs.httpSnmpAd.currentCate = ''
-      }
-      this.visible = false
-    },
-    async insertEvent(row) {
-      const $table = this.$refs.xTable
-      const record = {}
-      const { row: newRow } = await $table.insertAt(record, row)
-      await $table.setEditRow(newRow)
-    },
-    editRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.setActiveRow(row)
-    },
-    saveRowEvent() {
-      const $table = this.$refs.xTable
-      $table.clearActived().then(() => {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-        }, 300)
-      })
-    },
-    cancelRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.clearActived().then(() => {
-        // 还原行数据
-        $table.revertData(row)
-      })
-    },
-    deleteRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.remove(row)
-    },
-    async handleSubmit(isUpdateAttr = false) {
-      const $table = this.$refs.xTable
-      const { fullData: _tableData } = $table.getTableData()
-      console.log(_tableData)
-      const params = {
-        ...this.form,
-        type: this.adType,
-        is_inner: this.is_inner,
-        option: { icon: this.customIcon },
-        attributes: this.form.is_plugin
-          ? undefined
-          : _tableData.map(({ name, alias, desc, type }) => {
-              return { name, alias, desc, type }
-            }),
-        plugin_script: this.form.is_plugin ? this.plugin_script : undefined,
-      }
-      let res
-      if (this.type === 'add') {
-        res = await postDiscovery(params)
-      } else {
-        res = await putDiscovery(this.ruleData.id, params)
-      }
-      if (isUpdateAttr) {
-        this.tableData = res.attributes
-        this.type = 'edit'
-        this.ruleData = res
-        this.$message.success('更新成功！')
-        if (this.is_inner) {
-          this.getDiscovery()
-        }
-        return
-      }
-      this.handleClose()
-      console.log(this.is_inner)
-      if (this.is_inner) {
-        this.$message.success('保存成功！')
-        this.getDiscovery()
-      } else {
-        this.$emit('updateNotInner', res)
-      }
-    },
-    changeIsPlugin(e) {
-      if (e.target.value) {
-        this.$nextTick(() => {
-          this.$refs.codemirror.initCodeMirror(this.plugin_script)
-        })
-      }
-    },
-    changeCodeContent(value) {
-      this.plugin_script = value && value.replace('\t', '    ')
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <CustomDrawer width="800px" :title="title" :visible="visible" @close="handleClose">
+    <template v-if="adType === 'agent'">
+      <a-form-model
+        ref="autoDiscoveryForm"
+        :model="form"
+        :rules="rules"
+        :label-col="{ span: 2 }"
+        :wrapper-col="{ span: 20 }"
+      >
+        <a-divider :style="{ margin: '5px 0' }">{{ $t('cmdb.ciType.basicConfig') }}</a-divider>
+        <a-form-model-item :label="$t('name')" prop="name">
+          <a-input v-model="form.name" />
+        </a-form-model-item>
+        <a-form-model-item :label="$t('icon')" v-if="is_inner">
+          <CustomIconSelect v-model="customIcon" :style="{ marginTop: '6px' }" />
+        </a-form-model-item>
+        <a-form-model-item :label="$t('cmdb.ad.mode')" prop="is_plugin">
+          <a-radio-group v-model="form.is_plugin" @change="changeIsPlugin" :disabled="!is_inner">
+            <a-radio :value="false">{{ $t('cmdb.custom_dashboard.default') }}</a-radio>
+            <a-radio :value="true">plugin</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+      </a-form-model>
+      <a-divider :style="{ margin: '5px 0' }">{{ $t('cmdb.ad.collectSettings') }}</a-divider>
+      <CustomCodeMirror
+        codeMirrorId="cmdb-adt"
+        v-if="form.is_plugin"
+        ref="codemirror"
+        @changeCodeContent="changeCodeContent"
+      ></CustomCodeMirror>
+      <div style="margin:10px 0;text-align:right;">
+        <a-button
+          v-show="form.is_plugin"
+          size="small"
+          type="primary"
+          ghost
+          @click="handleSubmit(true)"
+        >{{ $t('cmdb.ad.updateFields') }}</a-button
+        >
+      </div>
+      <a-button
+        v-show="!form.is_plugin"
+        size="small"
+        type="primary"
+        ghost
+        icon="plus"
+        :style="{ marginBottom: '10px' }"
+        @click="insertEvent(-1)"
+      >{{ $t('new') }}</a-button
+      >
+      <vxe-table
+        size="mini"
+        stripe
+        class="ops-stripe-table"
+        show-overflow
+        keep-source
+        ref="xTable"
+        max-height="400"
+        :data="tableData"
+        :edit-config="{ trigger: 'manual', mode: 'row' }"
+      >
+        <vxe-column field="name" :title="$t('name')" :edit-render="{ autofocus: '.vxe-input--inner' }">
+          <template #edit="{ row }">
+            <vxe-input v-model="row.name" type="text"></vxe-input>
+          </template>
+        </vxe-column>
+        <vxe-column field="type" :title="$t('type')" :edit-render="{}">
+          <template #edit="{ row }">
+            <vxe-select v-model="row.type" transfer>
+              <vxe-option v-for="item in typeList" :key="item" :value="item" :label="item"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-column>
+        <vxe-column field="desc" :title="$t('desc')" :edit-render="{ autofocus: '.vxe-input--inner' }">
+          <template #edit="{ row }">
+            <vxe-input v-model="row.desc" type="text"></vxe-input>
+          </template>
+        </vxe-column>
+        <vxe-column :title="$t('operation')" width="60" v-if="!form.is_plugin">
+          <template #default="{ row }">
+            <a-space v-if="$refs.xTable.isActiveByRow(row)">
+              <a @click="saveRowEvent(row)"><a-icon type="save"/></a>
+              <a @click="cancelRowEvent(row)"><a-icon type="close"/></a>
+            </a-space>
+            <a-space v-else>
+              <a @click="editRowEvent(row)"><a-icon type="edit"/></a>
+              <a :style="{ color: 'red' }" @click="deleteRowEvent(row)"><a-icon type="delete"/></a>
+            </a-space>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <div class="custom-drawer-bottom-action">
+        <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit(false)" type="primary">{{ $t('save') }}</a-button>
+      </div>
+    </template>
+    <template v-else>
+      <HttpSnmpAD ref="httpSnmpAd" :ruleType="adType" :ruleName="ruleData.name" />
+    </template>
+  </CustomDrawer>
+</template>
+
+<script>
+import CustomIconSelect from '@/components/CustomIconSelect'
+import { postDiscovery, putDiscovery } from '../../api/discovery'
+import HttpSnmpAD from '../../components/httpSnmpAD'
+import CustomCodeMirror from '@/components/CustomCodeMirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/monokai.css'
+export default {
+  name: 'EditDrawer',
+  components: { CustomIconSelect, CustomCodeMirror, HttpSnmpAD },
+  props: {
+    is_inner: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    const default_plugin_script = this.$t('cmdb.ad.pluginScript')
+    const typeList = ['String', 'Integer', 'Float', 'Date', 'DateTime', 'Time', 'JSON']
+    return {
+      default_plugin_script,
+      typeList,
+      visible: false,
+      ruleData: {},
+      type: 'add',
+      adType: '',
+      form: { name: '', is_plugin: false },
+      rules: {},
+      customIcon: { name: '', color: '' },
+      tableData: [],
+      editDefaultTableData: [],
+      plugin_script: '',
+      cmOptions: {
+        lineNumbers: true,
+        mode: 'python',
+        height: '200px',
+        theme: 'monokai',
+        tabSize: 4,
+        lineWrapping: true,
+      },
+    }
+  },
+  computed: {
+    title() {
+      if (this.adType === 'http' || this.adType === 'snmp') {
+        return this.ruleData.name
+      }
+      if (this.type === 'edit') {
+        return this.$t('edit') + `：${this.ruleData.name}`
+      }
+      return this.$t('new')
+    },
+  },
+  inject: {
+    getDiscovery: {
+      from: 'getDiscovery',
+      default: () => {},
+    },
+  },
+  methods: {
+    open(data, type, adType) {
+      this.visible = true
+      this.type = type
+      this.ruleData = data
+      this.adType = adType
+      if (!this.is_inner) {
+        this.form = {
+          name: '',
+          is_plugin: true,
+        }
+      }
+      if (adType === 'http' || adType === 'snmp') {
+        return
+      }
+      this.$nextTick(() => {
+        if (this.type === 'edit') {
+          this.form = {
+            name: data.name,
+            is_plugin: data.is_plugin,
+          }
+          this.customIcon = data?.option?.icon ?? { name: 'caise-chajian', color: '' }
+          this.tableData = data?.attributes ?? []
+          this.editDefaultTableData = data?.attributes ?? []
+          this.plugin_script = data?.plugin_script ?? this.default_plugin_script
+        }
+        if (this.type === 'add') {
+          this.customIcon = { name: 'caise-chajian', color: '' }
+          // eslint-disable-next-line no-useless-escape
+          this.plugin_script = this.default_plugin_script
+        }
+        if (data?.is_plugin || !this.is_inner) {
+          this.$nextTick(() => {
+            this.$refs.codemirror.initCodeMirror(this.plugin_script)
+          })
+        }
+      })
+    },
+    handleClose() {
+      this.tableData = []
+      this.customIcon = { name: '', color: '' }
+      this.form = { name: '', is_plugin: false }
+      if (this.adType === 'agent') {
+        this.$refs.autoDiscoveryForm.clearValidate()
+      } else {
+        // this.$refs.httpSnmpAd.currentCate = ''
+      }
+      this.visible = false
+    },
+    async insertEvent(row) {
+      const $table = this.$refs.xTable
+      const record = {}
+      const { row: newRow } = await $table.insertAt(record, row)
+      await $table.setEditRow(newRow)
+    },
+    editRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.setActiveRow(row)
+    },
+    saveRowEvent() {
+      const $table = this.$refs.xTable
+      $table.clearActived().then(() => {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+        }, 300)
+      })
+    },
+    cancelRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.clearActived().then(() => {
+        // Restore row data
+        $table.revertData(row)
+      })
+    },
+    deleteRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.remove(row)
+    },
+    async handleSubmit(isUpdateAttr = false) {
+      const $table = this.$refs.xTable
+      const { fullData: _tableData } = $table.getTableData()
+      console.log(_tableData)
+      const params = {
+        ...this.form,
+        type: this.adType,
+        is_inner: this.is_inner,
+        option: { icon: this.customIcon },
+        attributes: this.form.is_plugin
+          ? undefined
+          : _tableData.map(({ name, alias, desc, type }) => {
+              return { name, alias, desc, type }
+            }),
+        plugin_script: this.form.is_plugin ? this.plugin_script : undefined,
+      }
+      let res
+      if (this.type === 'add') {
+        res = await postDiscovery(params)
+      } else {
+        res = await putDiscovery(this.ruleData.id, params)
+      }
+      if (isUpdateAttr) {
+        this.tableData = res.attributes
+        this.type = 'edit'
+        this.ruleData = res
+        this.$message.success(this.$t('updateSuccess'))
+        if (this.is_inner) {
+          this.getDiscovery()
+        }
+        return
+      }
+      this.handleClose()
+      console.log(this.is_inner)
+      if (this.is_inner) {
+        this.$message.success(this.$t('saveSuccess'))
+        this.getDiscovery()
+      } else {
+        this.$emit('updateNotInner', res)
+      }
+    },
+    changeIsPlugin(e) {
+      if (e.target.value) {
+        this.$nextTick(() => {
+          this.$refs.codemirror.initCodeMirror(this.plugin_script)
+        })
+      }
+    },
+    changeCodeContent(value) {
+      this.plugin_script = value && value.replace('\t', '    ')
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
index e2442fd..f34b1fa 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
@@ -3,9 +3,9 @@
     <div :style="{ textAlign: 'right' }">
       <a-space v-if="!isSelected">
         <a-upload name="file" :multiple="false" accept=".json" :fileList="[]" :beforeUpload="beforeUpload">
-          <a><a-icon type="upload" />规则导入</a>
+          <a><a-icon type="upload" />{{ $t('cmdb.ad.upload') }}</a>
         </a-upload>
-        <a @click="download"><a-icon type="download" />规则导出</a>
+        <a @click="download"><a-icon type="download" />{{ $t('cmdb.ad.download') }}</a>
       </a-space>
     </div>
     <div v-for="{ type, label } in typeCategory" :key="type">
@@ -45,22 +45,26 @@ export default {
   },
   data() {
     return {
-      typeCategory: [
+      typeCategoryChildren: { agent: [], snmp: [], http: [] },
+    }
+  },
+  computed: {
+    typeCategory() {
+      return [
         {
           type: 'agent',
-          label: '内置 & 插件',
+          label: this.$t('cmdb.ad.agent'),
         },
         {
           type: 'snmp',
-          label: '网络设备',
+          label: this.$t('cmdb.ad.snmp'),
         },
         {
           type: 'http',
-          label: '公有云资源',
+          label: this.$t('cmdb.ad.http'),
         },
-      ],
-      typeCategoryChildren: { agent: [], snmp: [], http: [] },
-    }
+      ]
+    },
   },
   provide() {
     return {
@@ -87,11 +91,11 @@ export default {
     deleteRule(rule) {
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认删除 【${rule.name}】？`,
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete', { name: `${rule.name}` }),
         onOk() {
           deleteDiscovery(rule.id).then(() => {
-            that.$message.success('删除成功！')
+            that.$message.success(that.$t('deleteSuccess'))
             that.getDiscovery()
           })
         },
@@ -99,13 +103,14 @@ export default {
     },
     download() {
       const x = new XMLHttpRequest()
+      const that = this
       x.open('GET', `/api/v0.1/adr/template/export/file`, true)
       x.responseType = 'blob'
       x.onload = function(e) {
         const url = window.URL.createObjectURL(x.response)
         const a = document.createElement('a')
         a.href = url
-        a.download = `自动发现规则`
+        a.download = that.$t('cmdb.ad.rule')
         a.click()
       }
       x.send()
@@ -120,13 +125,13 @@ export default {
         const state = Number(xhr.readyState)
         if (state === 4) {
           if (xhr.status === 200) {
-            that.$message.success('上传成功')
+            that.$message.success(that.$t('uploadSuccess'))
             that.getDiscovery()
           }
         }
       }
       xhr.ontimeout = function() {
-        that.$httpError('超时错误')
+        that.$httpError(that.$t('cmdb.ad.timeout'))
       }
 
       xhr.send(formData)
diff --git a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
index 581e46b..21450ff 100644
--- a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
@@ -3,7 +3,7 @@
     <template #one>
       <div v-for="group in ci_types_list" :key="group.id">
         <div>
-          <strong>{{ group.name || '其他' }}</strong
+          <strong>{{ group.name || $t('other') }}</strong
           ><span :style="{ color: 'rgb(195, 205, 215)' }">({{ group.ci_types.length }})</span>
         </div>
         <div
@@ -33,17 +33,17 @@
     <template #two>
       <div id="discovery-ci">
         <a-input-search
-          placeholder="请查找"
+          :placeholder="$t('cmdb.components.pleaseSearch')"
           class="ops-input ops-input-radius"
           :style="{ width: '200px', marginRight: '20px', marginBottom: '10px' }"
           @search="handleSearch"
           allowClear
         />
         <div class="ops-list-batch-action" :style="{ marginBottom: '10px' }" v-show="!!selectedRowKeys.length">
-          <span @click="batchAccept">入库</span>
+          <span @click="batchAccept">{{ $t('cmdb.ad.accept') }}</span>
           <a-divider type="vertical" />
-          <span @click="batchDelete">删除</span>
-          <span>选取：{{ selectedRowKeys.length }} 项</span>
+          <span @click="batchDelete">{{ $t('delete') }}</span>
+          <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
         </div>
         <ops-table
           show-overflow
@@ -79,33 +79,33 @@
           <vxe-column
             align="center"
             field="is_accept"
-            title="是否入库"
+            :title="$t('cmdb.ad.isAccpet')"
             v-bind="columns.length ? { width: '100px' } : { minWidth: '100px' }"
             :filters="[
-              { label: '是', value: true },
-              { label: '否', value: false },
+              { label: $t('yes'), value: true },
+              { label: $t('no'), value: false },
             ]"
           >
             <template #default="{row}">
-              {{ row.is_accept ? '是' : '否' }}
+              {{ row.is_accept ? $t('yes') : $t('no') }}
             </template>
           </vxe-column>
           <vxe-column
             field="accept_by"
-            title="入库人"
+            :title="$t('cmdb.ad.accpetBy')"
             v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
             :filters="[]"
           ></vxe-column>
           <vxe-column
             field="accept_time"
-            title="入库时间"
+            :title="$t('cmdb.ad.acceptTime')"
             sortable
             v-bind="columns.length ? { width: '130px' } : { minWidth: '130px' }"
           ></vxe-column>
-          <vxe-column title="操作" v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }" align="center">
+          <vxe-column :title="$t('operation')" v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }" align="center">
             <template #default="{row}">
               <a-space>
-                <a-tooltip title="入库">
+                <a-tooltip :title="$t('cmdb.ad.accept')">
                   <a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="icon-xianxing-edit"/></a>
                 </a-tooltip>
                 <a :style="{ color: 'red' }" @click="deleteADC(row)"><ops-icon type="icon-xianxing-delete"/></a>
@@ -115,7 +115,7 @@
           <template #empty>
             <div>
               <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-              <div>暂无数据</div>
+              <div>{{ $t('noData') }}</div>
             </div>
           </template>
         </ops-table>
@@ -242,11 +242,11 @@ export default {
       this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认入库？`,
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ad.confirmAccept'),
         onOk() {
           updateADCAccept(row.id).then(() => {
-            that.$message.success('入库成功')
+            that.$message.success(that.$t('cmdb.ad.accpetSuccess'))
             that.getAdc(false)
           })
         },
@@ -258,11 +258,11 @@ export default {
       this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认删除该条数据？`,
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ad.deleteADC'),
         onOk() {
           deleteAdc(row.id).then(() => {
-            that.$message.success('删除成功')
+            that.$message.success(that.$t('deleteSuccess'))
             that.getAdc(false)
           })
         },
@@ -273,7 +273,7 @@ export default {
       for (let i = 0; i < this.selectedRowKeys.length; i++) {
         await updateADCAccept(this.selectedRowKeys[i])
       }
-      this.$message.success('入库成功')
+      this.$message.success(this.$t('cmdb.ad.acceptSuccess'))
       this.getAdc(false)
       this.selectedRowKeys = []
       this.$refs.xTable.getVxetableRef().clearCheckboxRow()
@@ -283,13 +283,13 @@ export default {
     async batchDelete() {
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认删除这些数据？`,
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ad.batchDelete'),
         async onOk() {
           for (let i = 0; i < that.selectedRowKeys.length; i++) {
             await deleteAdc(that.selectedRowKeys[i])
           }
-          that.$message.success('删除成功')
+          that.$message.success(that.$t('deleteSuccess'))
           that.getAdc(false)
           that.selectedRowKeys = []
           that.$refs.xTable.getVxetableRef().clearCheckboxRow()
diff --git a/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue b/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
index e383790..4275634 100644
--- a/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="model-relation">
-    <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;" icon="plus">新增关系</a-button>
+    <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;" icon="plus">{{
+      $t('cmdb.ciType.addRelation')
+    }}</a-button>
     <model-relation-table ref="table"></model-relation-table>
     <a-modal
       :closable="false"
@@ -11,11 +13,14 @@
       width="500px"
     >
       <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
-        <a-form-item label="源模型">
+        <a-form-item :label="$t('cmdb.ciType.sourceCIType')">
           <a-select
             showSearch
             name="source_ci_type_id"
-            v-decorator="['source_ci_type_id', { rules: [{ required: true, message: '请选择源模型' }] }]"
+            v-decorator="[
+              'source_ci_type_id',
+              { rules: [{ required: true, message: $t('cmdb.ciType.sourceCITypeTips') }] },
+            ]"
             @change="handleSourceTypeChange"
             :filterOption="filterOption"
           >
@@ -24,11 +29,11 @@
             }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="目标模型">
+        <a-form-item :label="$t('cmdb.ciType.dstCIType')">
           <a-select
             showSearch
             name="ci_type_id"
-            v-decorator="['ci_type_id', { rules: [{ required: true, message: '请选择目标模型' }] }]"
+            v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
             @change="handleTargetTypeChange"
             :filterOption="filterOption"
           >
@@ -38,10 +43,13 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="关联关系">
+        <a-form-item :label="$t('cmdb.ciType.relationType')">
           <a-select
             name="relation_type_id"
-            v-decorator="['relation_type_id', { rules: [{ required: true, message: '请选择关联关系' }] }]"
+            v-decorator="[
+              'relation_type_id',
+              { rules: [{ required: true, message: $t('cmdb.ciType.relationTypeTips') }] },
+            ]"
           >
             <a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{
               relationType.name
@@ -49,11 +57,16 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="关联约束">
-          <a-select v-decorator="['constraint', { rules: [{ required: true, message: '请选择关联约束' }] }]">
-            <a-select-option value="0">一对多</a-select-option>
-            <a-select-option value="1">一对一</a-select-option>
-            <a-select-option value="2">多对多</a-select-option>
+        <a-form-item :label="$t('cmdb.ciType.relationConstraint')">
+          <a-select
+            v-decorator="[
+              'constraint',
+              { rules: [{ required: true, message: $t('cmdb.ciType.relationConstraintTips') }] },
+            ]"
+          >
+            <a-select-option value="0">{{ $t('cmdb.ciType.one2Many') }}</a-select-option>
+            <a-select-option value="1">{{ $t('cmdb.ciType.one2One') }}</a-select-option>
+            <a-select-option value="2">{{ $t('cmdb.ciType.many2Many') }}</a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
@@ -66,7 +79,7 @@ import ModelRelationTable from './modules/modelRelationTable.vue'
 import { searchResourceType } from '@/modules/acl/api/resource'
 import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
-import { createRelation, deleteRelation, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
+import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
 export default {
   name: 'Index',
   components: {
@@ -85,16 +98,40 @@ export default {
       drawerTitle: '',
       CITypes: [],
       relationTypes: [],
-      constraintMap: {
-        '0': '一对多',
-        '1': '一对一',
-        '2': '多对多',
-      },
 
       sourceCITypeId: undefined,
       targetCITypeId: undefined,
     }
   },
+  computed: {
+    currentCId() {
+      if (this.currentId) {
+        if (this.currentId.split('%')[1] !== 'null') {
+          return Number(this.currentId.split('%')[1])
+        }
+        return null
+      }
+      return null
+    },
+    displayCITypes() {
+      return this.CITypes
+      // return this.CITypes.filter((c) => c.id !== this.targetCITypeId)
+    },
+    displayTargetCITypes() {
+      return this.CITypes
+      // return this.CITypes.filter((c) => c.id !== this.sourceCITypeId)
+    },
+    CITypeId() {
+      return this.currentCId
+    },
+    constraintMap() {
+      return {
+        '0': this.$t('cmdb.ciType.one2Many'),
+        '1': this.$t('cmdb.ciType.one2One'),
+        '2': this.$t('cmdb.ciType.many2Many'),
+      }
+    },
+  },
   provide() {
     return {
       resource_type: () => {
@@ -116,26 +153,6 @@ export default {
     })
     this.loadCITypes(!_currentId)
   },
-  computed: {
-    currentCId() {
-      if (this.currentId) {
-        if (this.currentId.split('%')[1] !== 'null') {
-          return Number(this.currentId.split('%')[1])
-        }
-        return null
-      }
-      return null
-    },
-    displayCITypes() {
-      return this.CITypes
-    },
-    displayTargetCITypes() {
-      return this.CITypes
-    },
-    CITypeId() {
-      return this.currentCId
-    },
-  },
   methods: {
     async loadCITypes(isResetCurrentId = false) {
       const groups = await getCITypeGroupsConfig({ need_other: true })
@@ -146,7 +163,6 @@ export default {
       this.$nextTick(() => {
         groups.forEach((g) => {
           if (!g.id) {
-            // 给未分组增加一个假的id
             g.id = -1
           }
           if (isResetCurrentId && !alreadyReset && g.ci_types && g.ci_types.length) {
@@ -172,7 +188,7 @@ export default {
       })
     },
     handleCreate() {
-      this.drawerTitle = '新增关系'
+      this.drawerTitle = this.$t('cmdb.ciType.addRelation')
       this.visible = true
       this.$nextTick(() => {
         this.form.setFieldsValue({
@@ -192,7 +208,7 @@ export default {
         if (!err) {
           createRelation(values.source_ci_type_id, values.ci_type_id, values.relation_type_id, values.constraint).then(
             (res) => {
-              this.$message.success(`添加成功`)
+              this.$message.success(this.$t('addSuccess'))
               this.onClose()
               this.handleOk()
             }
@@ -207,7 +223,7 @@ export default {
     },
     handleDelete(record) {
       deleteRelation(record.source_ci_type_id, record.id).then((res) => {
-        this.$message.success(`删除成功！`)
+        this.$message.success(this.$t('deleteSuccess'))
 
         this.handleOk()
       })
diff --git a/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue b/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
index 13d5f48..69c40ae 100644
--- a/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
@@ -11,22 +11,27 @@
       :data="tableData"
       :sort-config="{ defaultSort: { field: 'created_at', order: 'desc' } }"
     >
-      <vxe-column field="created_at" title="创建时间" sortable width="159px"></vxe-column>
-      <vxe-column field="parent.alias" title="源模型"></vxe-column>
-      <vxe-column field="relation_type_id" title="关系" :filters="[{ data: '' }]" :filter-multiple="false">
+      <vxe-column field="created_at" :title="$t('created_at')" sortable width="159px"></vxe-column>
+      <vxe-column field="parent.alias" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column>
+      <vxe-column
+        field="relation_type_id"
+        :title="$t('cmdb.custom_dashboard.relation')"
+        :filters="[{ data: '' }]"
+        :filter-multiple="false"
+      >
         <template #default="{ row }">
           <a-tag color="cyan">
             {{ row.relation_type.name }}
           </a-tag>
         </template>
       </vxe-column>
-      <vxe-column field="child.alias" title="目标模型"></vxe-column>
-      <vxe-column field="constraint" title="关联约束"></vxe-column>
-      <vxe-column field="authorization" title="操作" width="89px">
+      <vxe-column field="child.alias" :title="$t('cmdb.ciType.dstCIType')"></vxe-column>
+      <vxe-column field="constraint" :title="$t('cmdb.ciType.relationConstraint')"></vxe-column>
+      <vxe-column field="authorization" :title="$t('operation')" width="89px">
         <template #default="{ row }">
           <a-space>
             <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
-            <a-popconfirm title="确认删除？" @confirm="deleteRelation(row)">
+            <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="deleteRelation(row)">
               <a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
             </a-popconfirm>
           </a-space>
@@ -48,11 +53,6 @@ export default {
       drawerVisible: false,
       tableData: [],
       relationTypeList: null,
-      constraintMap: {
-        '0': '一对多',
-        '1': '一对一',
-        '2': '多对多',
-      },
     }
   },
   components: {
@@ -65,6 +65,13 @@ export default {
     windowHeight() {
       return this.$store.state.windowHeight
     },
+    constraintMap() {
+      return {
+        '0': this.$t('cmdb.ciType.one2Many'),
+        '1': this.$t('cmdb.ciType.one2One'),
+        '2': this.$t('cmdb.ciType.many2Many'),
+      }
+    },
   },
   methods: {
     async refresh() {
@@ -103,7 +110,8 @@ export default {
     },
     deleteRelation(row) {
       deleteRelation(row.parent_id, row.child_id).then((res) => {
-        this.$message.success(`删除成功！`)
+        this.$message.success(this.$t('deleteSuccess'))
+        this.getRelationTypes()
         this.refresh()
       })
     },
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 d81a97c..618b657 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
@@ -1,43 +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-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>
+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" :tab="$t('cmdb.history.ciChange')">
+          <ci-table></ci-table>
+        </a-tab-pane>
+        <a-tab-pane key="2" :tab="$t('cmdb.history.relationChange')">
+          <relation-table></relation-table>
+        </a-tab-pane>
+        <a-tab-pane key="3" :tab="$t('cmdb.history.ciTypeChange')">
+          <type-table></type-table>
+        </a-tab-pane>
+        <a-tab-pane key="4" :tab="$t('cmdb.history.triggerHistory')">
+          <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 76e2fed..f5d1950 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,421 +1,407 @@
-<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>
+<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="$t('cmdb.history.opreateTime')"></vxe-column>
+      <vxe-column field="user" width="100px" :title="$t('cmdb.history.user')">
+        <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="$t('cmdb.history.userTips')"
+                size="small"
+                v-model="queryParams.username"
+                style="width: 200px"
+                allowClear
+              />
+              <a-button type="link" class="filterButton" @click="filterUser">{{ $t('cmdb.history.filter') }}</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterUserReset">{{ $t('reset') }}</a-button>
+            </a>
+          </a-popover>
+        </template>
+      </vxe-column>
+      <vxe-column field="type_id" width="100px" :title="$t('cmdb.ciType.ciType')"></vxe-column>
+      <vxe-column field="operate_type" width="89px" :title="$t('operation')">
+        <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="$t('cmdb.history.filterOperate')"
+                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">{{
+                $t('cmdb.history.filter')
+              }}</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">{{ $t('reset') }}</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type === $t('new')">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type === $t('update')">
+            {{ 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="$t('cmdb.history.attribute')"></vxe-column>
+      <vxe-column field="old" :title="$t('cmdb.history.old')"></vxe-column>
+      <vxe-column field="new" :title="$t('cmdb.history.new')"></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 { mapState } from 'vuex'
+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 },
+  inject: ['reload'],
+  data() {
+    return {
+      typeId: undefined,
+      loading: true,
+      typeList: null,
+      userList: [],
+      tableData: [],
+      total: 0,
+      isExpand: false,
+      queryParams: {
+        page: 1,
+        page_size: 50,
+      },
+      ciTableAttrList: [
+        {
+          alias: this.$t('cmdb.ciType.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('cmdb.history.user'),
+          is_choice: true,
+          name: 'username',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('cmdb.ciType.ciType'),
+          is_choice: true,
+          name: 'type_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('cmdb.history.attribute'),
+          is_choice: true,
+          name: 'attr_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('new')]: 0 }, { [this.$t('delete')]: 1 }, { [this.$t('update')]: 2 }],
+        },
+        {
+          alias: 'CI_ID',
+          is_choice: false,
+          name: 'ci_id',
+          value_type: '2',
+        },
+      ],
+    }
+  },
+  computed: {
+    ...mapState(['locale']),
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 331
+    },
+    operateTypeMap() {
+      return new Map([
+        ['0', this.$t('new')],
+        ['1', this.$t('delete')],
+        ['2', this.$t('update')],
+      ])
+    },
+  },
+  watch: {
+    locale() {
+      this.reload()
+    },
+  },
+  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,
+      }
+      this.ciTableAttrList[3].choice_value = []
+      this.getTable(this.queryParams)
+    },
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    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]
+          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]
+          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]
+          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 266c9db..11b5705 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 }}{{ $t('cmdb.history.itemsPerPage') }}
+              </a-menu-item>
+            </a-menu>
+            <a-button size="small"> {{ pageSize }}{{ $t('cmdb.history.itemsPerPage') }} <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 d177ca1..45b954c 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,404 +1,395 @@
-<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>
+<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="$t('cmdb.history.opreateTime')"></vxe-column>
+      <vxe-column field="user" width="100px" :title="$t('cmdb.history.user')">
+        <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="$t('cmdb.history.userTips')"
+                size="small"
+                v-model="queryParams.username"
+                style="width: 200px"
+                allowClear
+              />
+              <a-button type="link" class="filterButton" @click="filterUser">{{ $t('cmdb.history.filter') }}</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterUserReset">{{ $t('reset') }}</a-button>
+            </a>
+          </a-popover>
+        </template>
+      </vxe-column>
+      <vxe-column field="operate_type" width="89px" :title="$t('operation')">
+        <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="$t('cmdb.history.filterOperate')"
+                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">{{
+                $t('cmdb.history.filter')
+              }}</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">{{ $t('reset') }}</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type.includes($t('new'))">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type.includes($t('update'))">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="red" v-else>
+            {{ row.operate_type }}
+          </a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="changeDescription" :title="$t('desc')">
+        <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 === $t('cmdb.history.noUpdate')">
+            {{ row.relation_type_id }}
+          </a-tag>
+          <template v-else-if="row.operate_type.includes($t('update'))">
+            <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($t('new'))" :style="{ fontWeight: 'bolder' }">
+            {{ row.relation_type_id }}
+          </a-tag>
+          <a-tag color="red" v-else-if="row.operate_type.includes($t('delete'))">
+            {{ 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 { mapState } from 'vuex'
+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 },
+  inject: ['reload'],
+  data() {
+    return {
+      visible: false,
+      loading: true,
+      isExpand: false,
+      tableData: [],
+      relationTypeList: null,
+      total: 0,
+      userList: [],
+      queryParams: {
+        page: 1,
+        page_size: 50,
+        start: '',
+        end: '',
+        username: '',
+        first_ci_id: undefined,
+        second_ci_id: undefined,
+        operate_type: undefined,
+      },
+      relationTableAttrList: [
+        {
+          alias: this.$t('cmdb.ciType.date'),
+          is_choice: false,
+          name: 'datetime',
+          value_type: '3',
+        },
+        {
+          alias: this.$t('cmdb.history.user'),
+          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: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [{ [this.$t('new')]: 0 }, { [this.$t('delete')]: 1 }, { [this.$t('update')]: 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: {
+    ...mapState(['locale']),
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 331
+    },
+    operateTypeMap() {
+      return new Map([
+        ['0', this.$t('new')],
+        ['1', this.$t('delete')],
+        ['2', this.$t('update')],
+      ])
+    },
+  },
+  watch: {
+    locale() {
+      this.reload()
+    },
+  },
+  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)
+    },
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    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]
+          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]
+          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 2491035..66d80c5 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,195 @@
-<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="$t('cmdb.history.pleaseSelect')"
+              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="[$t('cmdb.history.startTime'), $t('cmdb.history.endTime')]"
+              :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="$t('cmdb.history.pleaseSelect')"
+                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="[$t('cmdb.history.startTime'), $t('cmdb.history.endTime')]"
+                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">
+            {{ $t('query') }}
+          </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+            {{ $t('reset') }}
+          </a-button>
+          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle" v-if="attrList.length >= 4">
+            {{ expand?$t('hide'):$t('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 {
+      expand: false,
+      queryParams: {
+        page: 1,
+        page_size: 50
+      },
+      date: undefined
+    }
+  },
+  computed: {
+    valueTypeMap() {
+      return valueTypeMap()
+    },
+  },
+  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
index 21ee144..c32416b 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/triggerTable.vue
@@ -1,123 +1,123 @@
-<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 }">
-          <a-tag color="green" v-if="row.is_ok">已完成</a-tag>
-          <a-tag color="red" v-else>未完成</a-tag>
-        </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>
+<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="$t('cmdb.history.triggerName')"> </vxe-column>
+      <vxe-column field="type" :title="$t('type')">
+        <template #default="{ row }">
+          <span v-if="row.trigger && row.trigger.attr_id">{{ $t('cmdb.ciType.triggerDate') }}</span>
+          <span v-else-if="row.trigger && !row.trigger.attr_id">{{ $t('cmdb.ciType.triggerDataChange') }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column :title="$t('cmdb.history.event')">
+        <template #default="{ row }">
+          <span v-if="row.operate_type === '0'">{{ $t('cmdb.ciType.addInstance') }}</span>
+          <span v-else-if="row.operate_type === '1'">{{ $t('cmdb.ciType.deleteInstance') }}</span>
+          <span v-else-if="row.operate_type === '2'">{{ $t('cmdb.ciType.changeInstance') }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column :title="$t('cmdb.history.action')">
+        <template #default="{ row }">
+          <span v-if="row.webhook">Webhook</span>
+          <span v-else-if="row.notify">{{ $t('cmdb.ciType.notify') }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column :title="$t('cmdb.history.status')">
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.is_ok">{{ $t('cmdb.history.done') }}</a-tag>
+          <a-tag color="red" v-else>{{ $t('cmdb.history.undone') }}</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column :title="$t('cmdb.history.triggerTime')">
+        <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) => $t('cmdb.history.totalItems', { total: 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 c58eec7..5925aa8 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,478 +1,484 @@
-<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>
+<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="$t('cmdb.history.opreateTime')"></vxe-column>
+      <vxe-column field="user" width="116px" :title="$t('cmdb.history.user')"></vxe-column>
+      <vxe-column field="operate_type" width="135px" :title="$t('operation')">
+        <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="$t('cmdb.history.filterOperate')"
+                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">{{
+                $t('cmdb.history.filter')
+              }}</a-button>
+              <a-button type="link" class="filterResetButton" @click="filterOperateReset">{{ $t('reset') }}</a-button>
+            </a>
+          </a-popover>
+        </template>
+        <template #default="{ row }">
+          <a-tag color="green" v-if="row.operate_type.includes($t('new'))">
+            {{ row.operate_type }}
+          </a-tag>
+          <a-tag color="orange" v-else-if="row.operate_type.includes($t('update'))">
+            {{ 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="$t('cmdb.ciType.ciType')" width="150px">
+        <template #default="{ row }">
+          {{ row.operate_type === $t('cmdb.history.deleteCIType') ? row.change.alias : row.type_id }}
+        </template>
+      </vxe-column>
+      <vxe-column field="changeDescription" :title="$t('desc')">
+        <template #default="{ row }">
+          <p style="color:rgba(0, 0, 0, 0.65);" v-if="row.changeDescription === $t('cmdb.history.noUpdate')">
+            {{ row.changeDescription }}
+          </p>
+          <template v-else-if="row.operate_type.includes($t('update'))">
+            <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($t('new'))">
+            {{ row.changeDescription }}
+          </p>
+          <p style="color:#f5222d;" v-else-if="row.operate_type.includes($t('delete'))">
+            {{ 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) => $t('cmdb.history.totalItems', { total: total })"
+        >
+        </a-pagination>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapState } from 'vuex'
+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 },
+  inject: ['reload'],
+  data() {
+    return {
+      loading: true,
+      relationTypeList: null,
+      typeList: null,
+      userList: [],
+      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,
+      },
+      typeTableAttrList: [
+        {
+          alias: this.$t('cmdb.ciType.ciType'),
+          is_choice: true,
+          name: 'type_id',
+          value_type: '2',
+          choice_value: [],
+        },
+        {
+          alias: this.$t('operation'),
+          is_choice: true,
+          name: 'operate_type',
+          value_type: '2',
+          choice_value: [
+            { [this.$t('cmdb.history.addCIType')]: 0 },
+            { [this.$t('cmdb.history.updateCIType')]: 1 },
+            { [this.$t('cmdb.history.deleteCIType')]: 2 },
+            { [this.$t('cmdb.history.addAttribute')]: 3 },
+            { [this.$t('cmdb.history.updateAttribute')]: 4 },
+            { [this.$t('cmdb.history.deleteAttribute')]: 5 },
+            { [this.$t('cmdb.history.addTrigger')]: 6 },
+            { [this.$t('cmdb.history.updateTrigger')]: 7 },
+            { [this.$t('cmdb.history.deleteTrigger')]: 8 },
+            { [this.$t('cmdb.history.addUniqueConstraint')]: 9 },
+            { [this.$t('cmdb.history.updateUniqueConstraint')]: 10 },
+            { [this.$t('cmdb.history.deleteUniqueConstraint')]: 11 },
+            { [this.$t('cmdb.history.addRelation')]: 12 },
+            { [this.$t('cmdb.history.deleteRelation')]: 13 },
+          ],
+        },
+      ],
+    }
+  },
+  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: {
+    ...mapState(['locale']),
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    windowHeightMinus() {
+      return this.isExpand ? 396 : 335
+    },
+    operateTypeMap() {
+      return new Map([
+        ['0', this.$t('cmdb.history.addCIType')],
+        ['1', this.$t('cmdb.history.updateCIType')],
+        ['2', this.$t('cmdb.history.deleteCIType')],
+        ['3', this.$t('cmdb.history.addAttribute')],
+        ['4', this.$t('cmdb.history.updateAttribute')],
+        ['5', this.$t('cmdb.history.deleteAttribute')],
+        ['6', this.$t('cmdb.history.addTrigger')],
+        ['7', this.$t('cmdb.history.updateTrigger')],
+        ['8', this.$t('cmdb.history.deleteTrigger')],
+        ['9', this.$t('cmdb.history.addUniqueConstraint')],
+        ['10', this.$t('cmdb.history.updateUniqueConstraint')],
+        ['11', this.$t('cmdb.history.deleteUniqueConstraint')],
+        ['12', this.$t('cmdb.history.addRelation')],
+        ['13', this.$t('cmdb.history.deleteRelation')],
+      ])
+    },
+  },
+  watch: {
+    current(val) {
+      this.queryParams.page = val
+    },
+    pageSize(val) {
+      this.queryParams.page_size = val
+    },
+    locale() {
+      this.reload()
+    },
+  },
+  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
+      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)
+    },
+    handleOperateType(operate_type) {
+      return this.operateTypeMap.get(operate_type)
+    },
+    handleTypeId(type_id) {
+      return this.typeList.get(type_id) ? this.typeList.get(type_id) : type_id
+    },
+    handleUID(uid) {
+      return this.userList.get(uid)
+    },
+    handleRelationType(relation_type_id) {
+      return this.relationTypeList.get(relation_type_id)
+    },
+    handleChangeDescription(item, operate_type) {
+      switch (operate_type) {
+        // add CIType
+        case '0': {
+          item.changeDescription = this.$t('cmdb.history.addCIType') + ': ' + item.change.alias
+          break
+        }
+        // update CIType
+        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 = this.$t('cmdb.history.noModifications')
+          break
+        }
+        // delete CIType
+        case '2': {
+          item.changeDescription = this.$t('cmdb.history.addCIType') + ': ' + `${item.change.alias}`
+          break
+        }
+        // add Attribute
+        case '3': {
+          item.changeDescription = `${this.$t('cmdb.history.attr')}：${item.change.alias}`
+          break
+        }
+        // update Attribute
+        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 = this.$t('cmdb.history.noModifications')
+          break
+        }
+        // delete Attribute
+        case '5': {
+          item.changeDescription = `${this.$t('delete')}：${item.change.alias}`
+          break
+        }
+        // add trigger
+        case '6': {
+          item.changeDescription = this.$t('cmdb.history.noModifications', {
+            attr_id: item.change.attr_id,
+            before_days: item.change.option.before_days,
+            subject: item.change.option.subject,
+            body: item.change.option.body,
+            notify_at: item.change.option.notify_at,
+          })
+          break
+        }
+        // update trigger
+        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 = this.$t('cmdb.history.noModifications')
+          break
+        }
+        // delete trigger
+        case '8': {
+          item.changeDescription = this.$t('cmdb.history.noModifications', {
+            attr_id: item.change.attr_id,
+            before_days: item.change.option.before_days,
+            subject: item.change.option.subject,
+            body: item.change.option.body,
+            notify_at: item.change.option.notify_at,
+          })
+          break
+        }
+        // add unique constraint
+        case '9': {
+          item.changeDescription = `${this.$t('cmdb.history.attrId')}：[${item.change.attr_ids}]`
+          break
+        }
+        // update unique constraint
+        case '10': {
+          item.changeArr = []
+          const oldVal = item.change.old.attr_ids
+          const newVal = item.change.new.attr_ids
+          const str = `${this.$t('cmdb.history.attrId')}：[${oldVal}] -> [${newVal}]`
+          item.changeDescription = str
+          item.changeArr.push(str)
+          break
+        }
+        // delete unique constraint
+        case '11': {
+          item.changeDescription = `${this.$t('cmdb.history.attrId')}：[${item.change.attr_ids}]`
+          break
+        }
+        // add relation
+        case '12': {
+          item.changeDescription = `${this.$t('new')}：${item.change.parent.alias} -> ${this.handleRelationType(
+            item.change.relation_type_id
+          )} -> ${item.change.child.alias}`
+          break
+        }
+        // delete relation
+        case '13': {
+          item.changeDescription = `${this.$t('delete')}：${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>
diff --git a/cmdb-ui/src/modules/cmdb/views/preference/index.vue b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
index 0987d23..8fd2003 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
@@ -2,10 +2,10 @@
   <div class="cmdb-preference" :style="{ height: `${windowHeight - 40}px` }">
     <div class="cmdb-preference-left">
       <div class="cmdb-preference-left-card">
-        <span class="cmdb-preference-left-card-title">我的订阅</span>
+        <span class="cmdb-preference-left-card-title">{{ $t('cmdb.preference.mySub') }}</span>
         <span
           class="cmdb-preference-left-card-content"
-        ><ops-icon type="cmdb-ci" :style="{ marginRight: '5px' }" />资源数据：
+        ><ops-icon type="cmdb-ci" :style="{ marginRight: '5px' }" />{{ $t('cmdb.menu.ciTable') }}:
           <a-badge
             showZero
             :count="self.instance.length"
@@ -20,7 +20,7 @@
         >
         <span
           class="cmdb-preference-left-card-content"
-        ><ops-icon type="cmdb-tree" :style="{ marginRight: '5px' }" />资源层级：
+        ><ops-icon type="cmdb-tree" :style="{ marginRight: '5px' }" />{{ $t('cmdb.menu.ciTree') }}:
           <a-badge
             showZero
             :count="self.tree.length"
@@ -66,14 +66,14 @@
           </div>
           <span class="cmdb-preference-group-content-title">{{ ciType.alias || ciType.name }}</span>
           <span class="cmdb-preference-group-content-action">
-            <a-tooltip title="取消订阅">
+            <a-tooltip :title="$t('cmdb.preference.cancelSub')">
               <span
                 @click="unsubscribe(ciType, group.type)"
               ><ops-icon type="cmdb-preference-cancel-subscribe" />
               </span>
             </a-tooltip>
             <a-divider type="vertical" :style="{ margin: '0 3px' }" />
-            <a-tooltip title="编辑订阅">
+            <a-tooltip :title="$t('cmdb.preference.editSub')">
               <span
                 @click="openSubscribeSetting(ciType, `${index + 1}`)"
               ><ops-icon
@@ -126,7 +126,8 @@
               <div class="cmdb-preference-colleague">
                 <template v-if="type_id2users[item.id] && type_id2users[item.id].length">
                   <span
-                  >{{ type_id2users[item.id].length > 99 ? '99+' : type_id2users[item.id].length }}位同事已订阅</span
+                  >{{ type_id2users[item.id].length > 99 ? '99+' : type_id2users[item.id].length
+                  }}{{ $t('cmdb.preference.peopleSub') }}</span
                   >
                   <span class="cmdb-preference-colleague-name">
                     <span v-for="uid in type_id2users[item.id].slice(0, 4)" :key="uid">
@@ -135,11 +136,11 @@
                     <span class="cmdb-preference-colleague-ellipsis" v-if="type_id2users[item.id].length > 4">...</span>
                   </span>
                 </template>
-                <span v-else :style="{ marginLeft: 'auto' }">暂无同事订阅</span>
+                <span v-else :style="{ marginLeft: 'auto' }">{{ $t('cmdb.preference.noSub') }}</span>
               </div>
               <div class="cmdb-preference-progress">
                 <div class="cmdb-preference-progress-info">
-                  <span>自动发现</span>
+                  <span>{{ $t('cmdb.menu.ad') }}</span>
                   <span>{{ item.integrity }}%</span>
                 </div>
                 <div class="cmdb-preference-progress-gray">
@@ -148,15 +149,13 @@
               </div>
               <a-divider :style="{ margin: '10px 0 3px 0' }" />
               <div class="cmdb-preference-footor-subscribed" v-if="item.is_subscribed">
-                <span
-                ><a-icon type="clock-circle" :style="{ marginRight: '3px' }" />{{ getsubscribedDays(item) }}订阅</span
-                >
+                <span><a-icon type="clock-circle" :style="{ marginRight: '3px' }" />{{ getsubscribedDays(item) }}</span>
                 <span>
-                  <a-tooltip title="取消订阅">
+                  <a-tooltip :title="$t('cmdb.preference.cancelSub')">
                     <span @click="unsubscribe(item)"><ops-icon type="cmdb-preference-cancel-subscribe" /> </span>
                   </a-tooltip>
                   <a-divider type="vertical" :style="{ margin: '0 3px' }" />
-                  <a-tooltip title="编辑订阅">
+                  <a-tooltip :title="$t('cmdb.preference.editSub')">
                     <span @click="openSubscribeSetting(item)"><ops-icon type="cmdb-preference-subscribe"/></span>
                   </a-tooltip>
                 </span>
@@ -164,7 +163,9 @@
               <div v-else class="cmdb-preference-footor-unsubscribed">
                 <span
                   @click="openSubscribeSetting(item)"
-                ><ops-icon :style="{ marginRight: '3px' }" type="cmdb-preference-subscribe" />订阅</span
+                ><ops-icon :style="{ marginRight: '3px' }" type="cmdb-preference-subscribe" />{{
+                  $t('cmdb.preference.sub')
+                }}</span
                 >
               </div>
             </div>
@@ -242,7 +243,7 @@ export default {
         }
         if (!group.id) {
           group.id = -1
-          group.name = '其他'
+          group.name = this.$t('other')
         }
       })
       this.citypeData = ciTypeGroup
@@ -251,7 +252,7 @@ export default {
       this.type_id2users = type_id2users
       const _myPreferences = [
         {
-          name: '资源数据',
+          name: this.$t('cmdb.menu.ciTable'),
           ci_types: self.instance.map((item) => {
             const _find = pref.find((ci) => ci.id === item)
             return _find
@@ -260,7 +261,7 @@ export default {
           type: 'ci',
         },
         {
-          name: '资源层级',
+          name: this.$t('cmdb.menu.ciTree'),
           ci_types: self.tree.map((item) => {
             const _find = pref.find((ci) => ci.id === item)
             return _find
@@ -285,23 +286,28 @@ export default {
       moment.duration(moment().diff(moment(subscribedTime)))
       const day = moment().diff(moment(subscribedTime), 'day')
       if (day > 0 && day < 1) {
-        return `${moment().diff(moment(subscribedTime), 'hour')}小时前`
+        return `${moment().diff(moment(subscribedTime), 'hour')}` + this.$t('cmdb.preference.hoursAgo')
       } else if (day >= 1 && day <= 31) {
-        return `${day}天前`
+        return `${day} ` + this.$t('cmdb.preference.daysAgo')
       } else if (day > 31 && day < 365) {
-        return `${moment().diff(moment(subscribedTime), 'month')}月前`
+        return `${moment().diff(moment(subscribedTime), 'month')}` + this.$t('cmdb.preference.monthsAgo')
       } else if (day >= 365) {
-        return `${moment().diff(moment(subscribedTime), 'year')}年前`
+        return `${moment().diff(moment(subscribedTime), 'year')}` + this.$t('cmdb.preference.yearsAgo')
       }
-      return '刚刚'
+      return this.$t('cmdb.preference.just')
     },
     unsubscribe(ciType, type = 'all') {
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认取消订阅 ${ciType.alias || ciType.name} ${
-          type !== 'all' ? `的${type === 'ci' ? '资源数据' : '资源层级'}` : ''
-        } 吗？`,
+        title: that.$t('warning'),
+        content:
+          that.$t('cmdb.preference.confirmcancelSub') +
+          ` ${ciType.alias || ciType.name} ${
+            type !== 'all'
+              ? that.$t('cmdb.preference.of') +
+                `${type === 'ci' ? this.$t('cmdb.menu.ciTable') : that.$t('cmdb.menu.ciTree')}`
+              : ''
+          } ？`,
         onOk() {
           const promises = []
           if (type === 'all' || type === 'ci') {
@@ -320,7 +326,7 @@ export default {
                 localStorage.setItem('ops_ci_typeid', '')
               }
             }
-            that.$message.success('取消订阅成功')
+            that.$message.success(that.$t('cmdb.preference.cancelSubSuccess'))
             that.resetRoute()
           })
         },
diff --git a/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue b/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
index e9f2d9c..f0b246b 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference_relation/index.vue
@@ -12,12 +12,12 @@
                 isEdit = true
               }
             "
-          >新增业务关系</a-button
+          >{{ $t('cmdb.preference_relation.newServiceTree') }}</a-button
           >
           <template v-else>
-            <a-input v-model="newRelationViewName" placeholder="新增业务关系名"></a-input>
-            <a-checkbox v-model="is_public">公开</a-checkbox>
-            <a-button type="primary" size="small" @click="handleSaveRelationViews">保存</a-button>
+            <a-input v-model="newRelationViewName" :placeholder="$t('cmdb.preference_relation.serviceTreeName')"></a-input>
+            <a-checkbox v-model="is_public">{{ $t('cmdb.preference_relation.public') }}</a-checkbox>
+            <a-button type="primary" size="small" @click="handleSaveRelationViews">{{ $t('save') }}</a-button>
             <a-button
               type="primary"
               size="small"
@@ -29,10 +29,10 @@
                   newRelationViewName = ''
                 }
               "
-            >取消</a-button
+            >{{ $t('cancel') }}</a-button
             >
           </template>
-          <a-button type="primary" size="small" @click="handleSave">保存布局</a-button>
+          <a-button type="primary" size="small" @click="handleSave">{{ $t('cmdb.preference_relation.saveLayout') }}</a-button>
         </a-space>
       </div>
       <SeeksRelationGraph v-if="isPullConfig" ref="ciTypeRelationGraph" :options="graphOptions">
@@ -59,7 +59,7 @@
         >
           <div class="relation-views">
             <h3 :style="{ padding: '10px 0 0 20px' }">{{ view }}</h3>
-            <a-popconfirm :title="`确认删除 ${view}？`" @confirm="confirmDelete(view)">
+            <a-popconfirm :title="$t('cmdb.ciType.confirmDelete', { name: `${view}` })" @confirm="confirmDelete(view)">
               <a class="relation-views-close"><a-icon type="close"/></a>
             </a-popconfirm>
             <div :style="{ height: '250px' }">
@@ -246,7 +246,7 @@ export default {
       if (e.target.checked) {
         const graph = this.$refs.ciTypeRelationGraph
         if (!graph.getNodeById(node.id).targetTo.length) {
-          this.$message.warning(`${node.text} 不存在子节点，不能形成业务关系，请重新选择！`)
+          this.$message.warning(`${node.text} ` + this.$t('cmdb.preference_relation.childNodesNotFound'))
           return
         }
         if (!this.checkedNodes.length) {
@@ -278,7 +278,7 @@ export default {
       const idFrom = startNode.targetFrom.findIndex((item) => item.id === node.id)
       const idTo = endNode.targetTo.findIndex((item) => item.id === node.id)
       if (idFrom <= -1 && idTo <= -1) {
-        this.$message.warning(`${node.text} 不能与当前选中节点形成视图，请重新选择！`)
+        this.$message.warning(`${node.text} ` + this.$t('cmdb.preference_relation.tips1'))
         return
       }
       if (idFrom > -1) {
@@ -290,11 +290,11 @@ export default {
     },
     async handleSaveRelationViews() {
       if (!this.newRelationViewName) {
-        this.$message.warning('请输入新增业务关系名！')
+        this.$message.warning(this.$t('cmdb.preference_relation.tips2'))
         return
       }
       if (this.checkedNodes.length < 2) {
-        this.$message.warning('请选择至少两个节点！')
+        this.$message.warning(this.$t('cmdb.preference_relation.tips3'))
         return
       }
       // eslint-disable-next-line camelcase
@@ -341,7 +341,7 @@ export default {
             }
           }),
         }).then((res) => {
-          this.$message.success('保存成功！')
+          this.$message.success(this.$t('saveSuccess'))
         })
       }
     },
diff --git a/cmdb-ui/src/modules/cmdb/views/preference_relation/modules/RelationViewForm.vue b/cmdb-ui/src/modules/cmdb/views/preference_relation/modules/RelationViewForm.vue
index 262b369..6e09246 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference_relation/modules/RelationViewForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference_relation/modules/RelationViewForm.vue
@@ -1,18 +1,18 @@
 <template>
   <CustomDrawer
     :closable="false"
-    :title="drawerTitle"
+    :title="$t('cmdb.preference_relation.newServiceTree')"
     :visible="drawerVisible"
     @close="onClose"
     placement="right"
     width="30%"
   >
     <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="业务关系名">
+      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('cmdb.preference_relation.serviceTreeName')">
         <a-input
           name="name"
           placeholder
-          v-decorator="['name', { rules: [{ required: true, message: '请输入类型名' }] }]"
+          v-decorator="['name', { rules: [{ required: true, message: $t('cmdb.preference_relation.tips2')}] }]"
         />
       </a-form-item>
 
@@ -21,8 +21,8 @@
       </a-form-item>
 
       <div class="custom-drawer-bottom-action">
-        <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">提交</a-button>
+        <a-button @click="onClose">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('submit') }}</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -35,7 +35,6 @@ export default {
   name: 'RelationViewForm',
   data() {
     return {
-      drawerTitle: '新增业务关系',
       drawerVisible: false,
       formLayout: 'vertical',
       crIds: [],
@@ -95,7 +94,7 @@ export default {
     createRelationView(data) {
       data.cr_ids = this.crIds
       subscribeRelationView(data).then(res => {
-        this.$message.success('新增成功!')
+        this.$message.success(this.$t('addSuccess'))
         this.onClose()
         this.$emit('refresh')
       })
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_type/index.vue b/cmdb-ui/src/modules/cmdb/views/relation_type/index.vue
index 6d4bfa6..3dc62c8 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_type/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_type/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-card :bordered="false">
     <div class="action-btn">
-      <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;">新增关系类型</a-button>
+      <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;">{{ $t('cmdb.relation_type.addRelationType') }}</a-button>
     </div>
     <vxe-table
       ref="relationTypeTable"
@@ -16,20 +16,20 @@
     >
       <vxe-table-column
         field="name"
-        title="名称"
+        :title="$t('name')"
         :edit-render="{ name: 'input', attrs: { type: 'text' }, events: { keyup: customCloseEdit } }"
       ></vxe-table-column>
-      <vxe-table-column field="updateTime" title="更新时间">
+      <vxe-table-column field="updateTime" :title="$t('updated_at')">
         <template #default="{row}">
           {{ row.updated_at || row.created_at }}
         </template>
       </vxe-table-column>
-      <vxe-table-column field="operation" title="操作" align="center">
+      <vxe-table-column field="operation" :title="$t('operation')" align="center">
         <template #default="{row}">
           <template>
             <a><a-icon type="edit" @click="handleEdit(row)"/></a>
             <a-divider type="vertical" />
-            <a-popconfirm title="确认删除吗?" @confirm="handleDelete(row)" okText="是" cancelText="否">
+            <a-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(row)" :okText="$t('yes')" :cancelText="$t('no')">
               <a :style="{ color: 'red' }"><a-icon type="delete"/></a>
             </a-popconfirm>
           </template>
@@ -50,6 +50,7 @@ import {
 
 export default {
   name: 'RelationType',
+  components: {},
   data() {
     return {
       tableData: [],
@@ -97,14 +98,14 @@ export default {
     },
     updateRelationType(id, data) {
       updateRelationType(id, data).then((res) => {
-        this.$message.success('更新成功!')
+        this.$message.success(this.$t('updateSuccess'))
         this.loadData()
       })
     },
 
     createRelationType(data) {
       addRelationType(data).then((res) => {
-        this.$message.success('新增成功！')
+        this.$message.success(this.$t('addSuccess'))
         this.loadData()
       })
     },
@@ -113,12 +114,12 @@ export default {
     },
     deleteRelationType(id) {
       deleteRelationType(id).then((res) => {
-        this.$message.success('删除成功！')
+        this.$message.success(this.$t('deleteSuccess'))
         this.loadData()
       })
     },
     customCloseEdit(value, $event) {
-      // 回车结束编辑
+      // enter, close edit
       if ($event.keyCode === 13) {
         const $table = this.$refs.relationTypeTable
         $table.clearActived()
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
index ac0df19..ad2ab74 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
@@ -1,1510 +1,1517 @@
-<template>
-  <div :style="{ marginBottom: '-24px', overflow: 'hidden' }">
-    <div v-if="relationViews.name2id && relationViews.name2id.length" class="relation-views-wrapper">
-      <div class="cmdb-views-header">
-        <span class="cmdb-views-header-title">{{ $route.meta.name }}</span>
-        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">授权</a-button>
-      </div>
-      <SplitPane
-        :min="200"
-        :max="500"
-        :paneLengthPixel.sync="paneLengthPixel"
-        appName="cmdb-relation-views"
-        triggerColor="#F0F5FF"
-        :triggerLength="18"
-      >
-        <template #one>
-          <div class="relation-views-left" :style="{ height: `${windowHeight - 115}px` }">
-            <a-tree
-              :selectedKeys="selectedKeys"
-              :loadData="onLoadData"
-              :treeData="treeData"
-              draggable
-              @dragenter="onDragEnter"
-              @drop="onDrop"
-              :expandedKeys="expandedKeys"
-            >
-              <a-icon slot="switcherIcon" type="down" />
-              <template #title="{ key: treeKey, title, isLeaf }">
-                <ContextMenu
-                  :title="title"
-                  :treeKey="treeKey"
-                  :levels="levels"
-                  :isLeaf="isLeaf"
-                  :currentViews="relationViews.views[viewName]"
-                  :id2type="relationViews.id2type"
-                  @onContextMenuClick="onContextMenuClick"
-                  @onNodeClick="onNodeClick"
-                  :ciTypes="ciTypes"
-                />
-              </template>
-            </a-tree>
-          </div>
-        </template>
-        <template #two>
-          <div id="relation-views-right" class="relation-views-right" :style="{ height: `${windowHeight - 115}px` }">
-            <a-tabs :activeKey="String(currentTypeId[0])" type="card" @change="changeCIType" class="ops-tab">
-              <a-tab-pane v-for="item in showTypes" :key="`${item.id}`" :tab="item.alias || item.name"> </a-tab-pane>
-            </a-tabs>
-            <SearchForm
-              ref="search"
-              @refresh="refreshTable"
-              :preferenceAttrList="preferenceAttrList"
-              :isShowExpression="true"
-              :typeId="Number(currentTypeId[0])"
-              @copyExpression="copyExpression"
-              type="relationView"
-              :style="{ padding: '0 12px', marginTop: '16px' }"
-            />
-            <div class="relation-views-right-bar">
-              <a-space>
-                <a-button
-                  v-if="isLeaf"
-                  type="primary"
-                  size="small"
-                  @click="$refs.create.handleOpen(true, 'create')"
-                >新建</a-button
-                >
-
-                <div class="ops-list-batch-action" v-if="isLeaf && isShowBatchIcon">
-                  <template v-if="selectedRowKeys.length">
-                    <span @click="$refs.create.handleOpen(true, 'update')">修改</span>
-                    <a-divider type="vertical" />
-                    <span @click="openBatchDownload">下载</span>
-                    <a-divider type="vertical" />
-                    <span @click="batchDelete">删除实例</span>
-                    <a-divider type="vertical" />
-                    <span @click="batchDeleteCIRelation">删除关系</span>
-                    <span>选取：{{ selectedRowKeys.length }} 项</span>
-                  </template>
-                </div>
-                <PreferenceSearch
-                  ref="preferenceSearch"
-                  @getQAndSort="getQAndSort"
-                  @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-                />
-              </a-space>
-            </div>
-            <vxe-table
-              :id="`cmdb-relation-${viewId}-${currentTypeId}`"
-              border
-              keep-source
-              show-overflow
-              resizable
-              ref="xTable"
-              size="small"
-              row-id="_id"
-              :height="tableHeight"
-              :loading="loading"
-              show-header-overflow
-              highlight-hover-row
-              :data="instanceList"
-              @checkbox-change="onSelectChange"
-              @checkbox-all="onSelectChange"
-              :checkbox-config="{ reserve: true, trigger: 'cell' }"
-              @edit-closed="handleEditClose"
-              @edit-actived="handleEditActived"
-              :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
-              :sort-config="{ remote: true, trigger: 'cell' }"
-              @sort-change="handleSortCol"
-              :row-key="true"
-              :column-key="true"
-              :cell-style="getCellStyle"
-              :scroll-y="{ enabled: true, gt: 20 }"
-              :scroll-x="{ enabled: true, gt: 0 }"
-              class="ops-unstripe-table"
-              :custom-config="{ storage: true }"
-            >
-              <vxe-column v-if="isLeaf" align="center" type="checkbox" width="50" fixed="left"></vxe-column>
-              <vxe-table-column
-                v-for="(col, index) in columns"
-                :key="`${col.field}_${index}`"
-                :title="col.title"
-                :field="col.field"
-                :width="col.width"
-                :sortable="col.sortable"
-                :edit-render="getColumnsEditRender(col)"
-                :cell-type="col.value_type === '2' ? 'string' : 'auto'"
-                :fixed="col.is_fixed ? 'left' : ''"
-              >
-                <template #header>
-                  <span class="vxe-handle">
-                    <OpsMoveIcon
-                      style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
-                    />
-                    {{ col.title }}</span
-                  >
-                </template>
-                <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
-                  <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
-                  <a-select
-                    :getPopupContainer="(trigger) => trigger.parentElement"
-                    :style="{ width: '100%', height: '32px' }"
-                    v-model="row[col.field]"
-                    placeholder="请选择"
-                    v-if="col.is_choice"
-                    :showArrow="false"
-                    :mode="col.is_list ? 'multiple' : 'default'"
-                    class="ci-table-edit-select"
-                    allowClear
-                  >
-                    <a-select-option
-                      :value="choice[0]"
-                      :key="'edit_' + col.field + idx"
-                      v-for="(choice, idx) in col.filters"
-                    >
-                      <span
-                        :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
-                      >
-                        <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
-                          <img
-                            v-if="choice[1].icon.id && choice[1].icon.url"
-                            :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
-                            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                          />
-                          <ops-icon
-                            v-else
-                            :style="{ color: choice[1].icon.color, marginRight: '5px' }"
-                            :type="choice[1].icon.name"
-                          />
-                        </template>
-                        {{ choice[0] }}
-                      </span>
-                    </a-select-option>
-                  </a-select>
-                  <a-select
-                    :getPopupContainer="(trigger) => trigger.parentElement"
-                    :style="{ width: '100%', height: '32px' }"
-                    v-model="row[col.field]"
-                    placeholder="请选择"
-                    v-else-if="col.is_list"
-                    :showArrow="false"
-                    mode="tags"
-                    class="ci-table-edit-select"
-                    allowClear
-                  >
-                  </a-select>
-                </template>
-                <template
-                  v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
-                  #default="{row}"
-                >
-                  <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
-                  <a
-                    v-else-if="col.is_link && row[col.field]"
-                    :href="
-                      row[col.field].startsWith('http') || row[col.field].startsWith('https')
-                        ? `${row[col.field]}`
-                        : `http://${row[col.field]}`
-                    "
-                    target="_blank"
-                  >{{ row[col.field] }}</a
-                  >
-                  <PasswordField
-                    v-else-if="col.is_password && row[col.field]"
-                    :ci_id="row._id"
-                    :attr_id="col.attr_id"
-                  ></PasswordField>
-                  <template v-else-if="col.is_choice">
-                    <template v-if="col.is_list">
-                      <span
-                        v-for="value in row[col.field]"
-                        :key="value"
-                        :style="{
-                          borderRadius: '4px',
-                          padding: '1px 5px',
-                          margin: '2px',
-                          ...getChoiceValueStyle(col, value),
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                        }"
-                      >
-                        <img
-                          v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
-                          :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
-                          :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                        />
-                        <ops-icon
-                          v-else
-                          :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
-                          :type="getChoiceValueIcon(col, value).name"
-                        />{{ value }}</span
-                      >
-                    </template>
-                    <span
-                      v-else-if="row[col.field]"
-                      :style="{
-                        borderRadius: '4px',
-                        padding: '1px 5px',
-                        margin: '2px 0',
-                        ...getChoiceValueStyle(col, row[col.field]),
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                      }"
-                    >
-                      <img
-                        v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
-                        :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
-                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                      />
-                      <ops-icon
-                        v-else
-                        :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
-                        :type="getChoiceValueIcon(col, row[col.field]).name"
-                      />{{ row[col.field] }}</span
-                    >
-                  </template>
-                </template>
-              </vxe-table-column>
-              <vxe-column align="left" field="operate" fixed="right" width="80">
-                <template #header>
-                  <span>操作</span>
-                  <EditAttrsPopover
-                    :typeId="Number(currentTypeId[0])"
-                    class="operation-icon"
-                    @refresh="refreshAfterEditAttrs"
-                  />
-                </template>
-                <template #default="{ row }">
-                  <a-space>
-                    <a @click="$refs.detail.create(row.ci_id || row._id)">
-                      <a-icon type="unordered-list" />
-                    </a>
-                    <a-tooltip title="添加关系">
-                      <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
-                        <a-icon type="retweet" />
-                      </a>
-                    </a-tooltip>
-                    <template v-if="isLeaf">
-                      <a-tooltip title="删除实例">
-                        <a @click="deleteCI(row)" :style="{ color: 'red' }">
-                          <a-icon type="delete" />
-                        </a>
-                      </a-tooltip>
-                    </template>
-                  </a-space>
-                </template>
-              </vxe-column>
-              <template #empty>
-                <div v-if="loading" style="height: 200px; line-height: 200px">加载中...</div>
-                <div v-else>
-                  <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-                  <div>暂无数据</div>
-                </div>
-              </template>
-            </vxe-table>
-            <div :style="{ textAlign: 'right', marginTop: '4px' }">
-              <a-pagination
-                :showSizeChanger="true"
-                v-model="pageNo"
-                size="small"
-                :total="numfound"
-                show-quick-jumper
-                :page-size="pageSize"
-                :page-size-options="pageSizeOptions"
-                @showSizeChange="onShowSizeChange"
-                :show-total="(total, range) => `当前${range[0]}-${range[1]} 共 ${total}条记录`"
-                :style="{ alignSelf: 'flex-end', marginRight: '12px' }"
-              >
-                <template slot="buildOptionText" slot-scope="props">
-                  <span v-if="props.value !== '100000'">{{ props.value }}条/页</span>
-                  <span v-if="props.value === '100000'">全部</span>
-                </template>
-              </a-pagination>
-            </div>
-          </div>
-        </template>
-      </SplitPane>
-    </div>
-    <a-alert
-      message="管理员 还未配置业务关系, 或者你无权限访问!"
-      banner
-      v-else-if="relationViews.name2id && !relationViews.name2id.length"
-    ></a-alert>
-    <AddTableModal ref="addTableModal" @reload="reload" />
-    <!-- <GrantDrawer ref="grantDrawer" resourceTypeName="RelationView" app_id="cmdb" /> -->
-    <CMDBGrant ref="cmdbGrant" resourceType="RelationView" app_id="cmdb" />
-
-    <ci-detail ref="detail" :typeId="Number(currentTypeId[0])" />
-    <create-instance-form
-      ref="create"
-      :typeIdFromRelation="Number(currentTypeId[0])"
-      @reload="sumbitFromCreateInstance"
-      @submit="batchUpdateFromCreateInstance"
-    />
-    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
-    <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-useless-escape */
-import _ from 'lodash'
-import { Tree } from 'element-ui'
-import Sortable from 'sortablejs'
-import SearchForm from '../../components/searchForm/SearchForm.vue'
-import { getCITableColumns } from '../../utils/helper'
-import AddTableModal from './modules/AddTableModal'
-import ContextMenu from './modules/ContextMenu.vue'
-import { getRelationView, getSubscribeAttributes } from '@/modules/cmdb/api/preference'
-import {
-  searchCIRelation,
-  statisticsCIRelation,
-  deleteCIRelationView,
-  batchDeleteCIRelation,
-  batchUpdateCIRelationChildren,
-  addCIRelationView,
-} from '@/modules/cmdb/api/CIRelation'
-
-import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-import { searchCI2, updateCI, deleteCI, searchCI } from '@/modules/cmdb/api/ci'
-import { getCITypes } from '../../api/CIType'
-import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
-import { searchResourceType } from '@/modules/acl/api/resource'
-import SplitPane from '@/components/SplitPane'
-import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
-import CiDetail from '../ci/modules/CiDetail'
-import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
-import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
-import BatchDownload from '../../components/batchDownload/batchDownload.vue'
-import PasswordField from '../../components/passwordField/index.vue'
-import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
-import CMDBGrant from '../../components/cmdbGrant'
-import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
-import { getAttrPassword } from '../../api/CITypeAttr'
-
-export default {
-  name: 'RelationViews',
-  components: {
-    SearchForm,
-    AddTableModal,
-    ContextMenu,
-    // GrantDrawer,
-    CMDBGrant,
-    SplitPane,
-    ElTree: Tree,
-    EditAttrsPopover,
-    CiDetail,
-    CreateInstanceForm,
-    JsonEditor,
-    BatchDownload,
-    PasswordField,
-    PreferenceSearch,
-    OpsMoveIcon,
-  },
-  data() {
-    return {
-      treeData: [],
-      triggerSelect: false,
-      treeNode: null,
-      ciTypes: [],
-      relationViews: {},
-      levels: [],
-      showTypeIds: [],
-      origShowTypeIds: [],
-      showTypes: [],
-      origShowTypes: [],
-      leaf2showTypes: {},
-      node2ShowTypes: {},
-      level2constraint: {},
-      leaf: [],
-      typeId: null,
-      viewId: null,
-      viewName: null,
-      currentView: null,
-      currentTypeId: [],
-      instanceList: [],
-      numfound: 0,
-      pageNo: 1,
-      pageSize: 50,
-      pageSizeOptions: ['50', '100', '200', '100000'],
-      treeKeys: [],
-      expandedKeys: [],
-      columns: [],
-      loading: false,
-      preferenceAttrList: [],
-      selectedRowKeys: [],
-      paneLengthPixel: 210,
-      attrList: [],
-      attributes: {},
-      // 对照是否编辑
-      initialInstanceList: [],
-      sortByTable: undefined,
-      // 表格拖拽的参数
-      tableDragClassName: [],
-
-      resource_type: {},
-
-      initialPasswordValue: {},
-      passwordValue: {},
-      lastEditCiId: null,
-      isContinueCloseEdit: true,
-    }
-  },
-
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    tableHeight() {
-      return this.windowHeight - 295
-    },
-    selectedKeys() {
-      if (this.treeKeys.length <= 1) {
-        return this.treeKeys.map((item) => `@^@${item}`)
-      }
-      return [this.treeKeys.join('@^@')]
-    },
-    isLeaf() {
-      return this.treeKeys.length === this.levels.length
-    },
-    isShowBatchIcon() {
-      return !!this.selectedRowKeys.length
-    },
-  },
-  provide() {
-    return {
-      handleSearch: this.refreshTable,
-      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
-      attrList: () => {
-        return this.attrList
-      },
-      attributes: () => {
-        return this.attributes
-      },
-      relationViewRefreshNumber: this.relationViewRefreshNumber,
-      filterCompPreferenceSearch: () => {
-        return { prv_id: this.viewId }
-      },
-      resource_type: () => {
-        return this.resource_type
-      },
-    }
-  },
-  created() {
-    this.getRelationViews()
-    this.getCITypesList()
-  },
-  mounted() {
-    setTimeout(() => {
-      this.columnDrop()
-    }, 1000)
-  },
-  beforeDestroy() {
-    if (this.sortable) {
-      this.sortable.destroy()
-    }
-  },
-  inject: ['reload'],
-  watch: {
-    '$route.path': function (newPath, oldPath) {
-      this.viewId = this.$route.params.viewId
-      this.reload()
-    },
-    pageNo: function (newPage, oldPage) {
-      this.loadData({ pageNo: newPage }, undefined, this.sortByTable)
-    },
-  },
-
-  methods: {
-    async getAttributeList() {
-      await getCITypeAttributesById(Number(this.currentTypeId[0])).then((res) => {
-        this.attrList = res.attributes
-        this.attributes = res
-      })
-    },
-    getCITypesList() {
-      getCITypes().then((res) => {
-        this.ciTypes = res.ci_types
-      })
-    },
-    refreshTable() {
-      this.selectedRowKeys = []
-      this.sortByTable = undefined
-      const xTable = this.$refs.xTable
-      if (xTable) {
-        xTable.clearCheckboxRow()
-        xTable.clearCheckboxReserve()
-        xTable.clearSort()
-      }
-      this.loadData()
-    },
-
-    async loadData(parameter, refreshType = undefined, sortByTable = undefined) {
-      // refreshType='refreshNumber' 树图只更新number
-      const params = Object.assign(parameter || {}, (this.$refs.search || {}).queryParam)
-      let q = ''
-      Object.keys(params).forEach((key) => {
-        if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
-          if (typeof params[key] === 'object' && params[key] && params[key].length > 1) {
-            q += `,${key}:(${params[key].join(';')})`
-          } else if (params[key]) {
-            q += `,${key}:*${params[key]}*`
-          }
-        }
-      })
-
-      const expression = (this.$refs['search'] || {}).expression || ''
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-      const regSort = /(?<=sort=).+/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      if (exp) {
-        // exp = exp.replace(/(\:)/g, '$1*')
-        // exp = exp.replace(/(\,)/g, '*$1')
-        q = `${q},${exp}`
-      }
-
-      let sort
-      if (sortByTable) {
-        sort = sortByTable
-      } else {
-        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
-      }
-      if (sort) {
-        q = `${q}&sort=${sort}`
-      }
-      if ('pageNo' in params) {
-        q += `&page=${params['pageNo']}&count=${this.pageSize}`
-      } else {
-        q += `&page=1&count=${this.pageSize}`
-      }
-
-      if ('sortField' in params) {
-        let order = ''
-        if (params['sortOrder'] !== 'ascend') {
-          order = '-'
-        }
-        q += `&sort=${order}${params['sortField']}`
-      }
-      if (q && q[0] === ',') {
-        q = q.slice(1)
-      }
-      if (this.treeKeys.length === 0) {
-        await this.judgeCITypes(q)
-        if (!refreshType) {
-          this.loadRoot()
-        }
-
-        const fuzzySearch = (this.$refs['search'] || {}).fuzzySearch || ''
-        if (fuzzySearch) {
-          q = `q=_type:${this.currentTypeId[0]},*${fuzzySearch}*,` + q
-        } else {
-          q = `q=_type:${this.currentTypeId[0]},` + q
-        }
-        if (this.currentTypeId[0]) {
-          const res = await searchCI2(q)
-          this.pageNo = res.page
-          this.numfound = res.numfound
-          res.result.forEach((item, index) => (item.key = item._id))
-          const jsonAttrList = this.preferenceAttrList.filter((attr) => attr.value_type === '6')
-          console.log(jsonAttrList)
-          this.instanceList = res['result'].map((item) => {
-            jsonAttrList.forEach(
-              (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
-            )
-            return { ..._.cloneDeep(item) }
-          })
-          this.initialInstanceList = _.cloneDeep(this.instanceList)
-          this.calcColumns()
-        }
-      } else {
-        q += `&root_id=${this.treeKeys[this.treeKeys.length - 1].split('%')[0]}`
-
-        if (
-          Object.keys(this.level2constraint).some(
-            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-          )
-        ) {
-          q += `&ancestor_ids=${this.treeKeys
-            .slice(0, this.treeKeys.length - 1)
-            .map((item) => item.split('%')[0])
-            .join(',')}`
-        }
-        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
-
-        let level = []
-        if (!this.leaf.includes(typeId)) {
-          let startIdx = 0
-          this.levels.forEach((item, idx) => {
-            if (item.includes(typeId)) {
-              startIdx = idx
-            }
-          })
-
-          this.leaf.forEach((leafId) => {
-            this.levels.forEach((item, levelIdx) => {
-              if (item.includes(leafId) && levelIdx - startIdx + 1 > 0) {
-                level.push(levelIdx - startIdx + 1)
-              }
-            })
-          })
-        } else {
-          level = [1]
-        }
-        q += `&level=${level.join(',')}`
-        if (!refreshType) {
-          this.loadNoRoot(this.treeKeys[this.treeKeys.length - 1], level)
-        }
-        await this.judgeCITypes(q)
-        const fuzzySearch = (this.$refs['search'] || {}).fuzzySearch || ''
-        if (fuzzySearch) {
-          q = `q=_type:${this.currentTypeId[0]},*${fuzzySearch}*,` + q
-        } else {
-          q = `q=_type:${this.currentTypeId[0]},` + q
-        }
-        if (Object.values(this.level2constraint).includes('2')) {
-          q = q + `&&has_m2m=1`
-        }
-        if (this.currentTypeId[0]) {
-          const res = await searchCIRelation(q)
-
-          const _data = Object.assign([], res.result)
-          _data.forEach((item, index) => (item.key = item._id))
-          this.numfound = res.numfound
-          this.pageNo = res.page
-
-          const jsonAttrList = this.preferenceAttrList.filter((attr) => attr.value_type === '6')
-          this.instanceList = _data.map((item) => {
-            jsonAttrList.forEach(
-              (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
-            )
-            return { ..._.cloneDeep(item) }
-          })
-          this.initialInstanceList = _.cloneDeep(this.instanceList)
-
-          this.calcColumns()
-        }
-
-        if (refreshType === 'refreshNumber') {
-          const promises = this.treeKeys.map((key, index) => {
-            let ancestor_ids
-            if (
-              Object.keys(this.level2constraint).some(
-                (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-              )
-            ) {
-              ancestor_ids = `${this.treeKeys
-                .slice(0, index)
-                .map((item) => item.split('%')[0])
-                .join(',')}`
-            }
-            statisticsCIRelation({
-              ancestor_ids,
-              root_ids: key.split('%')[0],
-              level: this.treeKeys.length - index,
-              type_ids: this.showTypes.map((type) => type.id).join(','),
-              has_m2m: Number(Object.values(this.level2constraint).includes('2')),
-            }).then((res) => {
-              let result
-              const getTreeItem = (data, id) => {
-                for (let i = 0; i < data.length; i++) {
-                  if (Number(data[i].id) === Number(id)) {
-                    result = data[i] // 结果赋值
-                    break
-                  } else {
-                    if (data[i].children && data[i].children.length) {
-                      getTreeItem(data[i].children, id)
-                    }
-                  }
-                }
-              }
-              getTreeItem(this.treeData, key.split('%')[0])
-
-              const reg = /(?<=\()\S+(?=\))/g
-              result.title = result.title.replace(reg, `${res[key.split('%')[0]]}`)
-            })
-          })
-        }
-      }
-    },
-
-    changeCIType(typeId) {
-      this.$refs.xTable.clearCheckboxRow()
-      this.$refs.xTable.clearCheckboxReserve()
-      this.$refs.search.reset()
-      this.selectedRowKeys = []
-      this.currentTypeId = [typeId]
-      this.loadColumns()
-      this.$nextTick(() => {
-        this.refreshTable()
-      })
-    },
-
-    async judgeCITypes(q) {
-      const showTypeIds = []
-      let _showTypes = []
-      let _showTypeIds = []
-
-      if (this.treeKeys.length) {
-        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
-
-        _showTypes = this.node2ShowTypes[typeId + '']
-        _showTypes.forEach((item) => {
-          _showTypeIds.push(item.id)
-        })
-      } else {
-        _showTypeIds = JSON.parse(JSON.stringify(this.origShowTypeIds))
-        _showTypes = JSON.parse(JSON.stringify(this.origShowTypes))
-      }
-      const promises = _showTypeIds.map((typeId) => {
-        let _q = (`q=_type:${typeId},` + q).replace(/count=\d*/, 'count=1')
-        if (Object.values(this.level2constraint).includes('2')) {
-          _q = _q + `&&has_m2m=1`
-        }
-        console.log(_q)
-        if (this.treeKeys.length === 0) {
-          return searchCI2(_q).then((res) => {
-            if (res.numfound !== 0) {
-              showTypeIds.push(typeId)
-            }
-          })
-        } else {
-          return searchCIRelation(_q).then((res) => {
-            if (res.numfound !== 0) {
-              showTypeIds.push(typeId)
-            }
-          })
-        }
-      })
-      await Promise.all(promises).then(async () => {
-        if (showTypeIds.length && showTypeIds.sort().join(',') !== this.showTypeIds.sort().join(',')) {
-          const showTypes = []
-          _showTypes.forEach((item) => {
-            if (showTypeIds.includes(item.id)) {
-              showTypes.push(item)
-            }
-          })
-          this.showTypes = showTypes
-          this.showTypeIds = showTypeIds
-          if (
-            !this.currentTypeId.length ||
-            (this.currentTypeId.length && !this.showTypeIds.includes(this.currentTypeId[0]))
-          ) {
-            this.currentTypeId = [this.showTypeIds[0]]
-            await this.loadColumns()
-          }
-        }
-      })
-    },
-
-    async loadRoot() {
-      searchCI2(`q=_type:(${this.levels[0].join(';')})&count=10000`).then(async (res) => {
-        const facet = []
-        const ciIds = []
-        res.result.forEach((item) => {
-          facet.push([item[item.unique], 0, item._id, item._type, item.unique])
-          ciIds.push(item._id)
-        })
-        const promises = this.leaf.map((leafId) => {
-          let level = 0
-          this.levels.forEach((item, idx) => {
-            if (item.includes(leafId)) {
-              level = idx + 1
-            }
-          })
-          return statisticsCIRelation({
-            root_ids: ciIds.join(','),
-            level: level,
-            type_ids: this.showTypes.map((type) => type.id).join(','),
-            has_m2m: Number(Object.values(this.level2constraint).includes('2')),
-          }).then((num) => {
-            facet.forEach((item, idx) => {
-              item[1] += num[ciIds[idx] + '']
-            })
-          })
-        })
-        await Promise.all(promises)
-        this.wrapTreeData(facet, 'loadRoot')
-      })
-    },
-
-    async loadNoRoot(rootIdAndTypeId, level) {
-      const rootId = rootIdAndTypeId.split('%')[0]
-      const typeId = Number(rootIdAndTypeId.split('%')[1])
-      const topo_flatten = this.relationViews?.views[this.$route.meta.name]?.topo_flatten ?? []
-      const index = topo_flatten.findIndex((id) => id === typeId)
-      const _type = topo_flatten[index + 1]
-      if (_type) {
-        let q = `q=_type:${_type}&root_id=${rootId}&level=1&count=10000`
-        if (
-          Object.keys(this.level2constraint).some(
-            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-          )
-        ) {
-          q += `&ancestor_ids=${this.treeKeys
-            .slice(0, this.treeKeys.length - 1)
-            .map((item) => item.split('%')[0])
-            .join(',')}`
-        }
-        if (Object.values(this.level2constraint).includes('2')) {
-          q = q + `&&has_m2m=1`
-        }
-        searchCIRelation(q).then(async (res) => {
-          const facet = []
-          const ciIds = []
-          res.result.forEach((item) => {
-            facet.push([item[item.unique], 0, item._id, item._type, item.unique])
-            ciIds.push(item._id)
-          })
-          let ancestor_ids
-          if (
-            Object.keys(this.level2constraint).some(
-              (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-            )
-          ) {
-            ancestor_ids = `${this.treeKeys.map((item) => item.split('%')[0]).join(',')}`
-          }
-          const promises = level.map((_level) => {
-            if (_level > 1) {
-              return statisticsCIRelation({
-                ancestor_ids,
-                root_ids: ciIds.join(','),
-                level: _level - 1,
-                type_ids: this.showTypes.map((type) => type.id).join(','),
-                has_m2m: Number(Object.values(this.level2constraint).includes('2')),
-              }).then((num) => {
-                facet.forEach((item, idx) => {
-                  item[1] += num[ciIds[idx] + '']
-                })
-              })
-            }
-          })
-          await Promise.all(promises)
-          this.wrapTreeData(facet, 'loadNoRoot')
-        })
-      }
-    },
-
-    onNodeClick(keys) {
-      this.triggerSelect = true
-      if (keys) {
-        const _tempKeys = keys.split('@^@').filter((item) => item !== '')
-        if (_tempKeys.length === this.levels.length) {
-          this.$refs.xTable.clearCheckboxRow()
-          this.$refs.xTable.clearCheckboxReserve()
-          this.selectedRowKeys = []
-        }
-        this.treeKeys = _tempKeys
-      }
-      const idx = this.expandedKeys.findIndex((item) => item === keys)
-      if (idx > -1) {
-        this.expandedKeys.splice(idx, 1)
-      } else {
-        this.expandedKeys.push(keys)
-      }
-
-      this.refreshTable()
-    },
-    wrapTreeData(facet) {
-      if (this.triggerSelect) {
-        return
-      }
-      const treeData = []
-      facet.forEach((item) => {
-        treeData.push({
-          title: `${item[0]} (${item[1]})`,
-          key: this.treeKeys.join('@^@') + '@^@' + item[2] + '%' + item[3] + '%' + `{"${item[4]}":"${item[0]}"}`,
-          isLeaf: this.leaf.includes(item[3]),
-          id: item[2],
-        })
-      })
-      if (this.treeNode === null) {
-        this.treeData = treeData
-      } else {
-        this.treeNode.dataRef.children = treeData
-        this.treeData = [...this.treeData]
-      }
-    },
-
-    onLoadData(treeNode) {
-      this.triggerSelect = false
-      return new Promise((resolve) => {
-        if (treeNode.dataRef.children) {
-          resolve()
-          return
-        }
-        this.treeKeys = treeNode.eventKey.split('@^@').filter((item) => item !== '')
-        this.treeNode = treeNode
-        resolve()
-      })
-    },
-
-    getRelationViews() {
-      getRelationView().then((res) => {
-        if (JSON.stringify(res) === '{}') {
-          this.relationViews = {
-            id2type: {},
-            name2id: [],
-            views: {},
-          }
-        } else {
-          this.relationViews = res
-        }
-        if ((Object.keys(this.relationViews.views) || []).length) {
-          this.viewId =
-            parseInt(this.$route.path.split('/')[this.$route.path.split('/').length - 1]) ||
-            this.relationViews.name2id[0][1]
-          this.relationViews.name2id.forEach((item) => {
-            if (item[1] === this.viewId) {
-              this.viewName = item[0]
-            }
-          })
-          this.levels = this.relationViews.views[this.viewName].topo
-          this.origShowTypes = this.relationViews.views[this.viewName].show_types
-          const showTypeIds = []
-          this.origShowTypes.forEach((item) => {
-            showTypeIds.push(item.id)
-          })
-          this.origShowTypeIds = showTypeIds
-          this.leaf2showTypes = this.relationViews.views[this.viewName].leaf2show_types
-          this.node2ShowTypes = this.relationViews.views[this.viewName].node2show_types
-          this.level2constraint = this.relationViews.views[this.viewName].level2constraint
-          this.leaf = this.relationViews.views[this.viewName].leaf
-          this.currentView = `${this.viewId}`
-          this.typeId = this.levels[0][0]
-          this.refreshTable()
-        }
-      })
-    },
-
-    async loadColumns() {
-      this.getAttributeList()
-      const res = await getSubscribeAttributes(this.currentTypeId[0])
-      this.preferenceAttrList = res.attributes
-      this.calcColumns()
-    },
-
-    calcColumns() {
-      const width = document.getElementById('relation-views-right').clientWidth
-      this.columns = getCITableColumns(this.instanceList, this.preferenceAttrList, width)
-      this.columns.forEach((col) => {
-        if (col.is_password) {
-          this.initialPasswordValue[col.field] = ''
-          this.passwordValue[col.field] = ''
-        }
-      })
-      this.$nextTick(() => {
-        this.$refs.xTable.refreshColumn()
-      })
-    },
-    onContextMenuClick(treeKey, menuKey) {
-      if (treeKey) {
-        const splitTreeKey = treeKey.split('@^@')
-        const _tempTree = splitTreeKey[splitTreeKey.length - 1].split('%')
-        const firstCIObj = JSON.parse(_tempTree[2])
-        const firstCIId = _tempTree[0]
-        let ancestor_ids
-        if (
-          Object.keys(this.level2constraint).some(
-            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-          )
-        ) {
-          const ancestor = treeKey
-            .split('@^@')
-            .slice(0, menuKey === 'delete' ? treeKey.split('@^@').length - 2 : treeKey.split('@^@').length - 1)
-          ancestor_ids = ancestor.map((item) => item.split('%')[0]).join(',')
-        }
-        if (menuKey === 'delete') {
-          const _tempTreeParent = splitTreeKey[splitTreeKey.length - 2].split('%')
-          const that = this
-
-          this.$confirm({
-            title: '警告',
-            content: (h) => (
-              <div>
-                确认删除 <strong>{Object.values(firstCIObj)[0]}</strong>？
-              </div>
-            ),
-            onOk() {
-              deleteCIRelationView(_tempTreeParent[0], _tempTree[0], { ancestor_ids }).then((res) => {
-                that.$message.success('删除成功！')
-                setTimeout(() => {
-                  that.reload()
-                }, 500)
-              })
-            },
-          })
-        } else {
-          const childTypeId = menuKey
-          this.$refs.addTableModal.openModal(firstCIObj, firstCIId, childTypeId, 'children', ancestor_ids)
-        }
-      }
-    },
-    onSelectChange({ records, reserves }) {
-      this.selectedRowKeys = [...records, ...reserves]
-    },
-    batchDeleteCIRelation() {
-      const currentShowType = this.showTypes.find((item) => item.id === Number(this.currentTypeId[0]))
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: (h) => (
-          <div>
-            确认将选中的 <strong>{currentShowType.alias || currentShowType.name}</strong> 从当前关系中删除？
-          </div>
-        ),
-        onOk() {
-          const _tempTree = that.treeKeys[that.treeKeys.length - 1].split('%')
-          const first_ci_id = Number(_tempTree[0])
-          let ancestor_ids
-          if (
-            Object.keys(that.level2constraint).some(
-              (le) => le < Object.keys(that.level2constraint).length && that.level2constraint[le] === '2'
-            )
-          ) {
-            ancestor_ids = `${that.treeKeys
-              .slice(0, that.treeKeys.length - 1)
-              .map((item) => item.split('%')[0])
-              .join(',')}`
-          }
-          batchDeleteCIRelation(
-            that.selectedRowKeys.map((item) => item._id),
-            [first_ci_id],
-            ancestor_ids
-          ).then((res) => {
-            that.$refs.xTable.clearCheckboxRow()
-            that.$refs.xTable.clearCheckboxReserve()
-            that.selectedRowKeys = []
-            that.loadData({}, 'refreshNumber')
-          })
-        },
-      })
-    },
-    onDragEnter(info) {},
-    onDrop(info) {
-      const dragKey = info.dragNode.eventKey
-      const targetKey = info.node.eventKey
-      const _splitDragKey = dragKey.split('@^@')
-      const _splitTargetKey = targetKey.split('@^@').filter((item) => item !== '')
-      if (_splitDragKey.length - 1 === _splitTargetKey.length) {
-        const dragId = _splitDragKey[_splitDragKey.length - 1].split('%')[0]
-        const targetId = _splitTargetKey[_splitTargetKey.length - 1].split('%')[0]
-        console.log(_splitDragKey)
-        batchUpdateCIRelationChildren([dragId], [targetId]).then((res) => {
-          this.reload()
-        })
-      }
-    },
-    handlePerm() {
-      roleHasPermissionToGrant({
-        app_id: 'cmdb',
-        resource_type_name: 'RelationView',
-        perm: 'grant',
-        resource_name: this.$route.meta.title,
-      }).then((res) => {
-        if (res.result) {
-          searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
-            this.resource_type = { groups: res.groups, id2perms: res.id2perms }
-            this.$nextTick(() => {
-              this.$refs.cmdbGrant.open({ name: this.$route.meta.title, cmdbGrantType: 'relation_view' })
-            })
-          })
-        } else {
-          this.$message.error('权限不足！')
-        }
-      })
-    },
-    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
-      let sortByTable
-      if (order === 'asc') {
-        sortByTable = property
-      } else if (order === 'desc') {
-        sortByTable = `-${property}`
-      }
-      this.sortByTable = sortByTable
-      this.$nextTick(() => {
-        if (this.pageNo === 1) {
-          this.loadData({}, undefined, sortByTable)
-        } else {
-          this.pageNo = 1
-        }
-      })
-    },
-    columnDrop() {
-      this.$nextTick(() => {
-        const xTable = this.$refs.xTable
-        this.sortable = Sortable.create(
-          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
-          {
-            handle: '.vxe-handle',
-            onChoose: () => {
-              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
-              const classNameList = []
-              header.childNodes.forEach((item) => {
-                classNameList.push(item.classList[1])
-              })
-              this.tableDragClassName = classNameList
-            },
-            onEnd: (params) => {
-              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
-              const { newIndex, oldIndex } = params
-              // 从tableDragClassName拿到colid
-              const fromColid = this.tableDragClassName[oldIndex]
-              const toColid = this.tableDragClassName[newIndex]
-              const fromColumn = xTable.getColumnById(fromColid)
-              const toColumn = xTable.getColumnById(toColid)
-              const fromIndex = xTable.getColumnIndex(fromColumn)
-              const toIndex = xTable.getColumnIndex(toColumn)
-              const tableColumn = xTable.getColumns()
-              const currRow = tableColumn.splice(fromIndex, 1)[0]
-              tableColumn.splice(toIndex, 0, currRow)
-              xTable.loadColumn(tableColumn)
-            },
-          }
-        )
-      })
-    },
-    getChoiceValueStyle(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.style || {}
-      }
-      return {}
-    },
-    getChoiceValueIcon(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.icon || {}
-      }
-      return {}
-    },
-    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
-      const { property } = column
-      const _find = this.preferenceAttrList.find((attr) => attr.name === property)
-      if (
-        _find &&
-        _find.option &&
-        _find.option.fontOptions &&
-        row[`${property}`] !== undefined &&
-        row[`${property}`] !== null
-      ) {
-        return { ..._find.option.fontOptions }
-      }
-    },
-    refreshAfterEditAttrs() {
-      this.loadColumns()
-    },
-    getColumnsEditRender(col) {
-      const _editRender = {
-        ...col.editRender,
-      }
-      if (col.value_type === '6') {
-        _editRender.events = { focus: this.handleFocusJson }
-      }
-      return _editRender
-    },
-    handleEditActived() {
-      const passwordCol = this.columns.filter((col) => col.is_password)
-      this.$nextTick(() => {
-        const editRecord = this.$refs.xTable.getEditRecord()
-        const { row, column } = editRecord
-        if (passwordCol.length && this.lastEditCiId !== row._id) {
-          this.$nextTick(async () => {
-            for (let i = 0; i < passwordCol.length; i++) {
-              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
-                this.initialPasswordValue[passwordCol[i].field] = res.value
-                this.passwordValue[passwordCol[i].field] = res.value
-              })
-            }
-            this.isContinueCloseEdit = false
-            await this.$refs.xTable.clearEdit()
-            this.isContinueCloseEdit = true
-            this.$nextTick(() => {
-              this.$refs.xTable.setEditCell(row, column.field)
-            })
-          })
-        }
-        this.lastEditCiId = row._id
-      })
-    },
-    handleEditClose({ row, rowIndex, column }) {
-      if (!this.isContinueCloseEdit) {
-        return
-      }
-      const $table = this.$refs['xTable']
-      const data = {}
-      this.columns.forEach((item) => {
-        if (
-          !(item.field in this.initialPasswordValue) &&
-          !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])
-        ) {
-          data[item.field] = row[item.field] ?? null
-        }
-      })
-      Object.keys(this.initialPasswordValue).forEach((key) => {
-        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
-          data[key] = this.passwordValue[key]
-          row[key] = this.passwordValue[key]
-        }
-      })
-      this.lastEditCiId = null
-      if (JSON.stringify(data) !== '{}') {
-        updateCI(row.ci_id || row._id, data)
-          .then(() => {
-            this.$message.success('保存成功！')
-            $table.reloadRow(row, null)
-            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
-            _initialInstanceList[rowIndex] = {
-              ..._initialInstanceList[rowIndex],
-              ...data,
-            }
-            this.initialInstanceList = _initialInstanceList
-          })
-          .catch((err) => {
-            console.log(err)
-            $table.revertData(row)
-          })
-      }
-      this.columns.forEach((col) => {
-        if (col.is_password) {
-          this.initialPasswordValue[col.field] = ''
-          this.passwordValue[col.field] = ''
-        }
-      })
-    },
-    deleteCI(record) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          deleteCI(record.ci_id || record._id).then((res) => {
-            that.$message.success('删除成功！')
-            that.loadData({}, 'refreshNumber')
-          })
-        },
-      })
-    },
-    sumbitFromCreateInstance({ ci_id }) {
-      const first_ci_id = this.treeKeys[this.treeKeys.length - 1].split('%')[0]
-      let ancestor_ids
-      if (
-        Object.keys(this.level2constraint).some(
-          (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
-        )
-      ) {
-        ancestor_ids = `${this.treeKeys
-          .slice(0, this.treeKeys.length - 1)
-          .map((item) => item.split('%')[0])
-          .join(',')}`
-      }
-      addCIRelationView(first_ci_id, ci_id, { ancestor_ids }).then((res) => {
-        setTimeout(() => {
-          this.loadData({}, 'refreshNumber')
-        }, 500)
-      })
-    },
-    batchUpdateFromCreateInstance(values) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认要批量修改吗 ?',
-        onOk() {
-          that.loading = true
-          const payload = {}
-          Object.keys(values).forEach((key) => {
-            if (values[key] || values[key] === 0) {
-              payload[key] = values[key]
-            }
-            // 字段值支持置空
-            // 目前存在字段值不支持置空，由后端返回
-            if (values[key] === undefined || values[key] === null) {
-              payload[key] = null
-            }
-          })
-          const promises = that.selectedRowKeys.map((row) => {
-            return updateCI(row._id, payload).then((res) => {
-              return 'ok'
-            })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('批量修改成功')
-              that.$refs.create.visible = false
-            })
-            .catch((e) => {
-              console.log(e)
-            })
-            .finally(() => {
-              that.loading = false
-              setTimeout(() => {
-                that.loadData({})
-              }, 800)
-            })
-        },
-      })
-    },
-    async openBatchDownload() {
-      this.$refs.batchDownload.open({
-        preferenceAttrList: this.preferenceAttrList,
-        ciTypeName: this.$route.meta.name,
-      })
-    },
-    batchDownload({ filename, type, checkedKeys }) {
-      const jsonAttrList = []
-      checkedKeys.forEach((key) => {
-        const _find = this.preferenceAttrList.find((attr) => attr.name === key)
-        if (_find && _find.value_type === '6') jsonAttrList.push(key)
-      })
-      const data = _.cloneDeep([
-        ...this.$refs.xTable.getCheckboxReserveRecords(),
-        ...this.$refs.xTable.getCheckboxRecords(true),
-      ])
-      this.$refs.xTable.exportData({
-        filename,
-        type,
-        columnFilterMethod({ column }) {
-          return checkedKeys.includes(column.property)
-        },
-        data: [
-          ...data.map((item) => {
-            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
-            return { ...item }
-          }),
-        ],
-      })
-      this.selectedRowKeys = []
-      this.$refs.xTable.clearCheckboxRow()
-      this.$refs.xTable.clearCheckboxReserve()
-    },
-    batchDelete() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          that.loading = true
-          const promises = that.selectedRowKeys.map((c) => {
-            return deleteCI(c._id).then((res) => {
-              return 'ok'
-            })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('删除成功')
-            })
-            .catch((e) => {
-              console.log(e)
-            })
-            .finally(() => {
-              that.loading = false
-              that.selectedRowKeys = []
-              that.$refs.xTable.clearCheckboxRow()
-              that.$refs.xTable.clearCheckboxReserve()
-              that.loadData({}, 'refreshNumber')
-            })
-        },
-      })
-    },
-    handleFocusJson({ column, row }) {
-      this.$refs.jsonEditor.open(column, row)
-    },
-    jsonEditorOk(row, column, jsonData) {
-      // 后端写数据有快慢，不拉接口直接修改table的数据
-      // this.reloadData()
-      this.instanceList.forEach((item) => {
-        if (item._id === row._id) {
-          item[column.property] = JSON.stringify(jsonData)
-        }
-      })
-      this.$refs.xTable.refreshColumn()
-    },
-    relationViewRefreshNumber() {
-      this.loadData({}, 'refreshNumber')
-    },
-    onShowSizeChange(current, pageSize) {
-      this.pageSize = pageSize
-      this.pageNo = 1
-      this.loadData()
-    },
-    getQAndSort() {
-      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
-      const expression = this.$refs['search'].expression || ''
-      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
-    },
-    setParamsFromPreferenceSearch(item) {
-      const { fuzzySearch, expression } = item.option
-      this.$refs.search.fuzzySearch = fuzzySearch
-      this.$refs.search.expression = expression
-      this.pageNo = 1
-      this.$nextTick(() => {
-        this.loadData()
-      })
-    },
-    setPreferenceSearchCurrent(id = null) {
-      this.$refs.preferenceSearch.currentPreferenceSearch = id
-    },
-    copyExpression() {
-      const expression = this.$refs['search'].expression || ''
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      const text = `q=_type:${this.currentTypeId[0]}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
-      this.$copyText(text)
-        .then(() => {
-          this.$message.success('复制成功！')
-        })
-        .catch(() => {
-          this.$message.error('复制失败！')
-        })
-    },
-  },
-}
-</script>
-
-<style lang="less">
-@import '../index.less';
-@import '~@/style/static.less';
-
-.relation-views-wrapper {
-  width: 100%;
-  .relation-views-left {
-    width: 100%;
-    float: left;
-    position: relative;
-    // transition: all 0.3s;
-    background-color: #fff;
-    overflow: hidden;
-    padding: 12px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    &:hover {
-      overflow: auto;
-    }
-    .ant-tree li {
-      padding: 2px 0;
-    }
-    .ant-tree-switcher {
-      display: none;
-    }
-    .ant-tree-node-content-wrapper {
-      width: 100%;
-      padding: 4px 0;
-      display: inline-block;
-      height: 100%;
-      .ant-tree-title {
-        display: inline-block;
-        width: 100%;
-        padding: 0 6px;
-      }
-    }
-  }
-  .relation-views-right {
-    width: 100%;
-    overflow: auto;
-    background-color: #fff;
-    .relation-views-right-bar {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-bottom: 5px;
-      height: 32px;
-      padding: 0 12px;
-    }
-  }
-}
-</style>
+<template>
+  <div :style="{ marginBottom: '-24px', overflow: 'hidden' }">
+    <div v-if="relationViews.name2id && relationViews.name2id.length" class="relation-views-wrapper">
+      <div class="cmdb-views-header">
+        <span class="cmdb-views-header-title">{{ $route.meta.name }}</span>
+        <a-button size="small" icon="user-add" type="primary" ghost @click="handlePerm">{{ $t('grant') }}</a-button>
+      </div>
+      <SplitPane
+        :min="200"
+        :max="500"
+        :paneLengthPixel.sync="paneLengthPixel"
+        appName="cmdb-relation-views"
+        triggerColor="#F0F5FF"
+        :triggerLength="18"
+      >
+        <template #one>
+          <div class="relation-views-left" :style="{ height: `${windowHeight - 115}px` }">
+            <a-tree
+              :selectedKeys="selectedKeys"
+              :loadData="onLoadData"
+              :treeData="treeData"
+              draggable
+              @dragenter="onDragEnter"
+              @drop="onDrop"
+              :expandedKeys="expandedKeys"
+            >
+              <a-icon slot="switcherIcon" type="down" />
+              <template #title="{ key: treeKey, title, isLeaf }">
+                <ContextMenu
+                  :title="title"
+                  :treeKey="treeKey"
+                  :levels="levels"
+                  :isLeaf="isLeaf"
+                  :currentViews="relationViews.views[viewName]"
+                  :id2type="relationViews.id2type"
+                  @onContextMenuClick="onContextMenuClick"
+                  @onNodeClick="onNodeClick"
+                  :ciTypes="ciTypes"
+                />
+              </template>
+            </a-tree>
+          </div>
+        </template>
+        <template #two>
+          <div id="relation-views-right" class="relation-views-right" :style="{ height: `${windowHeight - 115}px` }">
+            <a-tabs :activeKey="String(currentTypeId[0])" type="card" @change="changeCIType" class="ops-tab">
+              <a-tab-pane v-for="item in showTypes" :key="`${item.id}`" :tab="item.alias || item.name"> </a-tab-pane>
+            </a-tabs>
+            <SearchForm
+              ref="search"
+              @refresh="refreshTable"
+              :preferenceAttrList="preferenceAttrList"
+              :isShowExpression="true"
+              :typeId="Number(currentTypeId[0])"
+              @copyExpression="copyExpression"
+              type="relationView"
+              :style="{ padding: '0 12px', marginTop: '16px' }"
+            />
+            <div class="relation-views-right-bar">
+              <a-space>
+                <a-button
+                  v-if="isLeaf"
+                  type="primary"
+                  size="small"
+                  @click="$refs.create.handleOpen(true, 'create')"
+                >{{ $t('create') }}</a-button
+                >
+
+                <div class="ops-list-batch-action" v-if="isLeaf && isShowBatchIcon">
+                  <template v-if="selectedRowKeys.length">
+                    <span @click="$refs.create.handleOpen(true, 'update')">{{ $t('update') }}</span>
+                    <a-divider type="vertical" />
+                    <span @click="openBatchDownload">{{ $t('download') }}</span>
+                    <a-divider type="vertical" />
+                    <span @click="batchDelete">{{ $t('cmdb.ciType.deleteInstance') }}</span>
+                    <a-divider type="vertical" />
+                    <span @click="batchDeleteCIRelation">{{ $t('cmdb.history.deleteRelation') }}</span>
+                    <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
+                  </template>
+                </div>
+                <PreferenceSearch
+                  ref="preferenceSearch"
+                  @getQAndSort="getQAndSort"
+                  @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+                />
+              </a-space>
+            </div>
+            <vxe-table
+              :id="`cmdb-relation-${viewId}-${currentTypeId}`"
+              border
+              keep-source
+              show-overflow
+              resizable
+              ref="xTable"
+              size="small"
+              row-id="_id"
+              :height="tableHeight"
+              :loading="loading"
+              show-header-overflow
+              highlight-hover-row
+              :data="instanceList"
+              @checkbox-change="onSelectChange"
+              @checkbox-all="onSelectChange"
+              :checkbox-config="{ reserve: true, trigger: 'cell' }"
+              @edit-closed="handleEditClose"
+              @edit-actived="handleEditActived"
+              :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
+              :sort-config="{ remote: true, trigger: 'cell' }"
+              @sort-change="handleSortCol"
+              :row-key="true"
+              :column-key="true"
+              :cell-style="getCellStyle"
+              :scroll-y="{ enabled: true, gt: 20 }"
+              :scroll-x="{ enabled: true, gt: 0 }"
+              class="ops-unstripe-table"
+              :custom-config="{ storage: true }"
+            >
+              <vxe-column v-if="isLeaf" align="center" type="checkbox" width="50" fixed="left"></vxe-column>
+              <vxe-table-column
+                v-for="(col, index) in columns"
+                :key="`${col.field}_${index}`"
+                :title="col.title"
+                :field="col.field"
+                :width="col.width"
+                :sortable="col.sortable"
+                :edit-render="getColumnsEditRender(col)"
+                :cell-type="col.value_type === '2' ? 'string' : 'auto'"
+                :fixed="col.is_fixed ? 'left' : ''"
+              >
+                <template #header>
+                  <span class="vxe-handle">
+                    <OpsMoveIcon
+                      style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
+                    />
+                    {{ col.title }}</span
+                  >
+                </template>
+                <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
+                  <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
+                  <a-select
+                    :getPopupContainer="(trigger) => trigger.parentElement"
+                    :style="{ width: '100%', height: '32px' }"
+                    v-model="row[col.field]"
+                    :placeholder="$t('placeholder2')"
+                    v-if="col.is_choice"
+                    :showArrow="false"
+                    :mode="col.is_list ? 'multiple' : 'default'"
+                    class="ci-table-edit-select"
+                    allowClear
+                  >
+                    <a-select-option
+                      :value="choice[0]"
+                      :key="'edit_' + col.field + idx"
+                      v-for="(choice, idx) in col.filters"
+                    >
+                      <span
+                        :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
+                      >
+                        <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
+                          <img
+                            v-if="choice[1].icon.id && choice[1].icon.url"
+                            :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
+                            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                          />
+                          <ops-icon
+                            v-else
+                            :style="{ color: choice[1].icon.color, marginRight: '5px' }"
+                            :type="choice[1].icon.name"
+                          />
+                        </template>
+                        {{ choice[0] }}
+                      </span>
+                    </a-select-option>
+                  </a-select>
+                  <a-select
+                    :getPopupContainer="(trigger) => trigger.parentElement"
+                    :style="{ width: '100%', height: '32px' }"
+                    v-model="row[col.field]"
+                    :placeholder="$t('placeholder2')"
+                    v-else-if="col.is_list"
+                    :showArrow="false"
+                    mode="tags"
+                    class="ci-table-edit-select"
+                    allowClear
+                  >
+                  </a-select>
+                </template>
+                <template
+                  v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
+                  #default="{row}"
+                >
+                  <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
+                  <a
+                    v-else-if="col.is_link && row[col.field]"
+                    :href="
+                      row[col.field].startsWith('http') || row[col.field].startsWith('https')
+                        ? `${row[col.field]}`
+                        : `http://${row[col.field]}`
+                    "
+                    target="_blank"
+                  >{{ row[col.field] }}</a
+                  >
+                  <PasswordField
+                    v-else-if="col.is_password && row[col.field]"
+                    :ci_id="row._id"
+                    :attr_id="col.attr_id"
+                  ></PasswordField>
+                  <template v-else-if="col.is_choice">
+                    <template v-if="col.is_list">
+                      <span
+                        v-for="value in row[col.field]"
+                        :key="value"
+                        :style="{
+                          borderRadius: '4px',
+                          padding: '1px 5px',
+                          margin: '2px',
+                          ...getChoiceValueStyle(col, value),
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                        }"
+                      >
+                        <img
+                          v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
+                          :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
+                          :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                        />
+                        <ops-icon
+                          v-else
+                          :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
+                          :type="getChoiceValueIcon(col, value).name"
+                        />{{ value }}</span
+                      >
+                    </template>
+                    <span
+                      v-else-if="row[col.field]"
+                      :style="{
+                        borderRadius: '4px',
+                        padding: '1px 5px',
+                        margin: '2px 0',
+                        ...getChoiceValueStyle(col, row[col.field]),
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                      }"
+                    >
+                      <img
+                        v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
+                        :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
+                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                      />
+                      <ops-icon
+                        v-else
+                        :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
+                        :type="getChoiceValueIcon(col, row[col.field]).name"
+                      />{{ row[col.field] }}</span
+                    >
+                  </template>
+                </template>
+              </vxe-table-column>
+              <vxe-column align="left" field="operate" fixed="right" width="120">
+                <template #header>
+                  <span>{{ $t('operation') }}</span>
+                  <EditAttrsPopover
+                    :typeId="Number(currentTypeId[0])"
+                    class="operation-icon"
+                    @refresh="refreshAfterEditAttrs"
+                  />
+                </template>
+                <template #default="{ row }">
+                  <a-space>
+                    <a @click="$refs.detail.create(row.ci_id || row._id)">
+                      <a-icon type="unordered-list" />
+                    </a>
+                    <a-tooltip :title="$t('cmdb.ci.addRelation')">
+                      <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
+                        <a-icon type="retweet" />
+                      </a>
+                    </a-tooltip>
+                    <template v-if="isLeaf">
+                      <a-tooltip :title="$t('cmdb.ciType.deleteInstance')">
+                        <a @click="deleteCI(row)" :style="{ color: 'red' }">
+                          <a-icon type="delete" />
+                        </a>
+                      </a-tooltip>
+                    </template>
+                  </a-space>
+                </template>
+              </vxe-column>
+              <template #empty>
+                <div v-if="loading" style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
+                <div v-else>
+                  <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
+                  <div>{{ $t('noData') }}</div>
+                </div>
+              </template>
+            </vxe-table>
+            <div :style="{ textAlign: 'right', marginTop: '4px' }">
+              <a-pagination
+                :showSizeChanger="true"
+                v-model="pageNo"
+                size="small"
+                :total="numfound"
+                show-quick-jumper
+                :page-size="pageSize"
+                :page-size-options="pageSizeOptions"
+                @showSizeChange="onShowSizeChange"
+                :show-total="
+                  (total, range) =>
+                    $t('pagination.total', {
+                      range0: range[0],
+                      range1: range[1],
+                      total,
+                    })
+                "
+                :style="{ alignSelf: 'flex-end', marginRight: '12px' }"
+              >
+                <template slot="buildOptionText" slot-scope="props">
+                  <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('cmdb.history.itemsPerPage') }}</span>
+                  <span v-if="props.value === '100000'">{{ $t('cmdb.components.all') }}</span>
+                </template>
+              </a-pagination>
+            </div>
+          </div>
+        </template>
+      </SplitPane>
+    </div>
+    <a-alert
+      :message="$t('cmdb.serviceTreealert1')"
+      banner
+      v-else-if="relationViews.name2id && !relationViews.name2id.length"
+    ></a-alert>
+    <AddTableModal ref="addTableModal" @reload="reload" />
+    <!-- <GrantDrawer ref="grantDrawer" resourceTypeName="RelationView" app_id="cmdb" /> -->
+    <CMDBGrant ref="cmdbGrant" resourceType="RelationView" app_id="cmdb" />
+
+    <ci-detail ref="detail" :typeId="Number(currentTypeId[0])" />
+    <create-instance-form
+      ref="create"
+      :typeIdFromRelation="Number(currentTypeId[0])"
+      @reload="sumbitFromCreateInstance"
+      @submit="batchUpdateFromCreateInstance"
+    />
+    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
+    <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-useless-escape */
+import _ from 'lodash'
+import { Tree } from 'element-ui'
+import Sortable from 'sortablejs'
+import SearchForm from '../../components/searchForm/SearchForm.vue'
+import { getCITableColumns } from '../../utils/helper'
+import AddTableModal from './modules/AddTableModal'
+import ContextMenu from './modules/ContextMenu.vue'
+import { getRelationView, getSubscribeAttributes } from '@/modules/cmdb/api/preference'
+import {
+  searchCIRelation,
+  statisticsCIRelation,
+  deleteCIRelationView,
+  batchDeleteCIRelation,
+  batchUpdateCIRelationChildren,
+  addCIRelationView,
+} from '@/modules/cmdb/api/CIRelation'
+
+import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { searchCI2, updateCI, deleteCI, searchCI } from '@/modules/cmdb/api/ci'
+import { getCITypes } from '../../api/CIType'
+import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
+import { searchResourceType } from '@/modules/acl/api/resource'
+import SplitPane from '@/components/SplitPane'
+import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
+import CiDetail from '../ci/modules/CiDetail'
+import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
+import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
+import BatchDownload from '../../components/batchDownload/batchDownload.vue'
+import PasswordField from '../../components/passwordField/index.vue'
+import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
+import CMDBGrant from '../../components/cmdbGrant'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
+import { getAttrPassword } from '../../api/CITypeAttr'
+
+export default {
+  name: 'RelationViews',
+  components: {
+    SearchForm,
+    AddTableModal,
+    ContextMenu,
+    // GrantDrawer,
+    CMDBGrant,
+    SplitPane,
+    ElTree: Tree,
+    EditAttrsPopover,
+    CiDetail,
+    CreateInstanceForm,
+    JsonEditor,
+    BatchDownload,
+    PasswordField,
+    PreferenceSearch,
+    OpsMoveIcon,
+  },
+  data() {
+    return {
+      treeData: [],
+      triggerSelect: false,
+      treeNode: null,
+      ciTypes: [],
+      relationViews: {},
+      levels: [],
+      showTypeIds: [],
+      origShowTypeIds: [],
+      showTypes: [],
+      origShowTypes: [],
+      leaf2showTypes: {},
+      node2ShowTypes: {},
+      level2constraint: {},
+      leaf: [],
+      typeId: null,
+      viewId: null,
+      viewName: null,
+      currentView: null,
+      currentTypeId: [],
+      instanceList: [],
+      numfound: 0,
+      pageNo: 1,
+      pageSize: 50,
+      pageSizeOptions: ['50', '100', '200', '100000'],
+      treeKeys: [],
+      expandedKeys: [],
+      columns: [],
+      loading: false,
+      preferenceAttrList: [],
+      selectedRowKeys: [],
+      paneLengthPixel: 210,
+      attrList: [],
+      attributes: {},
+      // 对照是否编辑
+      initialInstanceList: [],
+      sortByTable: undefined,
+      // 表格拖拽的参数
+      tableDragClassName: [],
+
+      resource_type: {},
+
+      initialPasswordValue: {},
+      passwordValue: {},
+      lastEditCiId: null,
+      isContinueCloseEdit: true,
+    }
+  },
+
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    tableHeight() {
+      return this.windowHeight - 295
+    },
+    selectedKeys() {
+      if (this.treeKeys.length <= 1) {
+        return this.treeKeys.map((item) => `@^@${item}`)
+      }
+      return [this.treeKeys.join('@^@')]
+    },
+    isLeaf() {
+      return this.treeKeys.length === this.levels.length
+    },
+    isShowBatchIcon() {
+      return !!this.selectedRowKeys.length
+    },
+  },
+  provide() {
+    return {
+      handleSearch: this.refreshTable,
+      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
+      attrList: () => {
+        return this.attrList
+      },
+      attributes: () => {
+        return this.attributes
+      },
+      relationViewRefreshNumber: this.relationViewRefreshNumber,
+      filterCompPreferenceSearch: () => {
+        return { prv_id: this.viewId }
+      },
+      resource_type: () => {
+        return this.resource_type
+      },
+    }
+  },
+  created() {
+    this.getRelationViews()
+    this.getCITypesList()
+  },
+  mounted() {
+    setTimeout(() => {
+      this.columnDrop()
+    }, 1000)
+  },
+  beforeDestroy() {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+  },
+  inject: ['reload'],
+  watch: {
+    '$route.path': function(newPath, oldPath) {
+      this.viewId = this.$route.params.viewId
+      this.reload()
+    },
+    pageNo: function(newPage, oldPage) {
+      this.loadData({ pageNo: newPage }, undefined, this.sortByTable)
+    },
+  },
+
+  methods: {
+    async getAttributeList() {
+      await getCITypeAttributesById(Number(this.currentTypeId[0])).then((res) => {
+        this.attrList = res.attributes
+        this.attributes = res
+      })
+    },
+    getCITypesList() {
+      getCITypes().then((res) => {
+        this.ciTypes = res.ci_types
+      })
+    },
+    refreshTable() {
+      this.selectedRowKeys = []
+      this.sortByTable = undefined
+      const xTable = this.$refs.xTable
+      if (xTable) {
+        xTable.clearCheckboxRow()
+        xTable.clearCheckboxReserve()
+        xTable.clearSort()
+      }
+      this.loadData()
+    },
+
+    async loadData(parameter, refreshType = undefined, sortByTable = undefined) {
+      // refreshType='refreshNumber' 树图只更新number
+      const params = Object.assign(parameter || {}, (this.$refs.search || {}).queryParam)
+      let q = ''
+      Object.keys(params).forEach((key) => {
+        if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
+          if (typeof params[key] === 'object' && params[key] && params[key].length > 1) {
+            q += `,${key}:(${params[key].join(';')})`
+          } else if (params[key]) {
+            q += `,${key}:*${params[key]}*`
+          }
+        }
+      })
+
+      const expression = (this.$refs['search'] || {}).expression || ''
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+      const regSort = /(?<=sort=).+/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      if (exp) {
+        // exp = exp.replace(/(\:)/g, '$1*')
+        // exp = exp.replace(/(\,)/g, '*$1')
+        q = `${q},${exp}`
+      }
+
+      let sort
+      if (sortByTable) {
+        sort = sortByTable
+      } else {
+        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
+      }
+      if (sort) {
+        q = `${q}&sort=${sort}`
+      }
+      if ('pageNo' in params) {
+        q += `&page=${params['pageNo']}&count=${this.pageSize}`
+      } else {
+        q += `&page=1&count=${this.pageSize}`
+      }
+
+      if ('sortField' in params) {
+        let order = ''
+        if (params['sortOrder'] !== 'ascend') {
+          order = '-'
+        }
+        q += `&sort=${order}${params['sortField']}`
+      }
+      if (q && q[0] === ',') {
+        q = q.slice(1)
+      }
+      if (this.treeKeys.length === 0) {
+        await this.judgeCITypes(q)
+        if (!refreshType) {
+          this.loadRoot()
+        }
+
+        const fuzzySearch = (this.$refs['search'] || {}).fuzzySearch || ''
+        if (fuzzySearch) {
+          q = `q=_type:${this.currentTypeId[0]},*${fuzzySearch}*,` + q
+        } else {
+          q = `q=_type:${this.currentTypeId[0]},` + q
+        }
+        if (this.currentTypeId[0]) {
+          const res = await searchCI2(q)
+          this.pageNo = res.page
+          this.numfound = res.numfound
+          res.result.forEach((item, index) => (item.key = item._id))
+          const jsonAttrList = this.preferenceAttrList.filter((attr) => attr.value_type === '6')
+          console.log(jsonAttrList)
+          this.instanceList = res['result'].map((item) => {
+            jsonAttrList.forEach(
+              (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
+            )
+            return { ..._.cloneDeep(item) }
+          })
+          this.initialInstanceList = _.cloneDeep(this.instanceList)
+          this.calcColumns()
+        }
+      } else {
+        q += `&root_id=${this.treeKeys[this.treeKeys.length - 1].split('%')[0]}`
+
+        if (
+          Object.keys(this.level2constraint).some(
+            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+          )
+        ) {
+          q += `&ancestor_ids=${this.treeKeys
+            .slice(0, this.treeKeys.length - 1)
+            .map((item) => item.split('%')[0])
+            .join(',')}`
+        }
+        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
+
+        let level = []
+        if (!this.leaf.includes(typeId)) {
+          let startIdx = 0
+          this.levels.forEach((item, idx) => {
+            if (item.includes(typeId)) {
+              startIdx = idx
+            }
+          })
+
+          this.leaf.forEach((leafId) => {
+            this.levels.forEach((item, levelIdx) => {
+              if (item.includes(leafId) && levelIdx - startIdx + 1 > 0) {
+                level.push(levelIdx - startIdx + 1)
+              }
+            })
+          })
+        } else {
+          level = [1]
+        }
+        q += `&level=${level.join(',')}`
+        if (!refreshType) {
+          this.loadNoRoot(this.treeKeys[this.treeKeys.length - 1], level)
+        }
+        await this.judgeCITypes(q)
+        const fuzzySearch = (this.$refs['search'] || {}).fuzzySearch || ''
+        if (fuzzySearch) {
+          q = `q=_type:${this.currentTypeId[0]},*${fuzzySearch}*,` + q
+        } else {
+          q = `q=_type:${this.currentTypeId[0]},` + q
+        }
+        if (Object.values(this.level2constraint).includes('2')) {
+          q = q + `&&has_m2m=1`
+        }
+        if (this.currentTypeId[0]) {
+          const res = await searchCIRelation(q)
+
+          const _data = Object.assign([], res.result)
+          _data.forEach((item, index) => (item.key = item._id))
+          this.numfound = res.numfound
+          this.pageNo = res.page
+
+          const jsonAttrList = this.preferenceAttrList.filter((attr) => attr.value_type === '6')
+          this.instanceList = _data.map((item) => {
+            jsonAttrList.forEach(
+              (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
+            )
+            return { ..._.cloneDeep(item) }
+          })
+          this.initialInstanceList = _.cloneDeep(this.instanceList)
+
+          this.calcColumns()
+        }
+
+        if (refreshType === 'refreshNumber') {
+          const promises = this.treeKeys.map((key, index) => {
+            let ancestor_ids
+            if (
+              Object.keys(this.level2constraint).some(
+                (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+              )
+            ) {
+              ancestor_ids = `${this.treeKeys
+                .slice(0, index)
+                .map((item) => item.split('%')[0])
+                .join(',')}`
+            }
+            statisticsCIRelation({
+              ancestor_ids,
+              root_ids: key.split('%')[0],
+              level: this.treeKeys.length - index,
+              type_ids: this.showTypes.map((type) => type.id).join(','),
+              has_m2m: Number(Object.values(this.level2constraint).includes('2')),
+            }).then((res) => {
+              let result
+              const getTreeItem = (data, id) => {
+                for (let i = 0; i < data.length; i++) {
+                  if (Number(data[i].id) === Number(id)) {
+                    result = data[i] // 结果赋值
+                    break
+                  } else {
+                    if (data[i].children && data[i].children.length) {
+                      getTreeItem(data[i].children, id)
+                    }
+                  }
+                }
+              }
+              getTreeItem(this.treeData, key.split('%')[0])
+
+              const reg = /(?<=\()\S+(?=\))/g
+              result.title = result.title.replace(reg, `${res[key.split('%')[0]]}`)
+            })
+          })
+        }
+      }
+    },
+
+    changeCIType(typeId) {
+      this.$refs.xTable.clearCheckboxRow()
+      this.$refs.xTable.clearCheckboxReserve()
+      this.$refs.search.reset()
+      this.selectedRowKeys = []
+      this.currentTypeId = [typeId]
+      this.loadColumns()
+      this.$nextTick(() => {
+        this.refreshTable()
+      })
+    },
+
+    async judgeCITypes(q) {
+      const showTypeIds = []
+      let _showTypes = []
+      let _showTypeIds = []
+
+      if (this.treeKeys.length) {
+        const typeId = parseInt(this.treeKeys[this.treeKeys.length - 1].split('%')[1])
+
+        _showTypes = this.node2ShowTypes[typeId + '']
+        _showTypes.forEach((item) => {
+          _showTypeIds.push(item.id)
+        })
+      } else {
+        _showTypeIds = JSON.parse(JSON.stringify(this.origShowTypeIds))
+        _showTypes = JSON.parse(JSON.stringify(this.origShowTypes))
+      }
+      const promises = _showTypeIds.map((typeId) => {
+        let _q = (`q=_type:${typeId},` + q).replace(/count=\d*/, 'count=1')
+        if (Object.values(this.level2constraint).includes('2')) {
+          _q = _q + `&&has_m2m=1`
+        }
+        console.log(_q)
+        if (this.treeKeys.length === 0) {
+          return searchCI2(_q).then((res) => {
+            if (res.numfound !== 0) {
+              showTypeIds.push(typeId)
+            }
+          })
+        } else {
+          return searchCIRelation(_q).then((res) => {
+            if (res.numfound !== 0) {
+              showTypeIds.push(typeId)
+            }
+          })
+        }
+      })
+      await Promise.all(promises).then(async () => {
+        if (showTypeIds.length && showTypeIds.sort().join(',') !== this.showTypeIds.sort().join(',')) {
+          const showTypes = []
+          _showTypes.forEach((item) => {
+            if (showTypeIds.includes(item.id)) {
+              showTypes.push(item)
+            }
+          })
+          this.showTypes = showTypes
+          this.showTypeIds = showTypeIds
+          if (
+            !this.currentTypeId.length ||
+            (this.currentTypeId.length && !this.showTypeIds.includes(this.currentTypeId[0]))
+          ) {
+            this.currentTypeId = [this.showTypeIds[0]]
+            await this.loadColumns()
+          }
+        }
+      })
+    },
+
+    async loadRoot() {
+      searchCI2(`q=_type:(${this.levels[0].join(';')})&count=10000`).then(async (res) => {
+        const facet = []
+        const ciIds = []
+        res.result.forEach((item) => {
+          facet.push([item[item.unique], 0, item._id, item._type, item.unique])
+          ciIds.push(item._id)
+        })
+        const promises = this.leaf.map((leafId) => {
+          let level = 0
+          this.levels.forEach((item, idx) => {
+            if (item.includes(leafId)) {
+              level = idx + 1
+            }
+          })
+          return statisticsCIRelation({
+            root_ids: ciIds.join(','),
+            level: level,
+            type_ids: this.showTypes.map((type) => type.id).join(','),
+            has_m2m: Number(Object.values(this.level2constraint).includes('2')),
+          }).then((num) => {
+            facet.forEach((item, idx) => {
+              item[1] += num[ciIds[idx] + '']
+            })
+          })
+        })
+        await Promise.all(promises)
+        this.wrapTreeData(facet, 'loadRoot')
+      })
+    },
+
+    async loadNoRoot(rootIdAndTypeId, level) {
+      const rootId = rootIdAndTypeId.split('%')[0]
+      const typeId = Number(rootIdAndTypeId.split('%')[1])
+      const topo_flatten = this.relationViews?.views[this.$route.meta.name]?.topo_flatten ?? []
+      const index = topo_flatten.findIndex((id) => id === typeId)
+      const _type = topo_flatten[index + 1]
+      if (_type) {
+        let q = `q=_type:${_type}&root_id=${rootId}&level=1&count=10000`
+        if (
+          Object.keys(this.level2constraint).some(
+            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+          )
+        ) {
+          q += `&ancestor_ids=${this.treeKeys
+            .slice(0, this.treeKeys.length - 1)
+            .map((item) => item.split('%')[0])
+            .join(',')}`
+        }
+        if (Object.values(this.level2constraint).includes('2')) {
+          q = q + `&&has_m2m=1`
+        }
+        searchCIRelation(q).then(async (res) => {
+          const facet = []
+          const ciIds = []
+          res.result.forEach((item) => {
+            facet.push([item[item.unique], 0, item._id, item._type, item.unique])
+            ciIds.push(item._id)
+          })
+          let ancestor_ids
+          if (
+            Object.keys(this.level2constraint).some(
+              (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+            )
+          ) {
+            ancestor_ids = `${this.treeKeys.map((item) => item.split('%')[0]).join(',')}`
+          }
+          const promises = level.map((_level) => {
+            if (_level > 1) {
+              return statisticsCIRelation({
+                ancestor_ids,
+                root_ids: ciIds.join(','),
+                level: _level - 1,
+                type_ids: this.showTypes.map((type) => type.id).join(','),
+                has_m2m: Number(Object.values(this.level2constraint).includes('2')),
+              }).then((num) => {
+                facet.forEach((item, idx) => {
+                  item[1] += num[ciIds[idx] + '']
+                })
+              })
+            }
+          })
+          await Promise.all(promises)
+          this.wrapTreeData(facet, 'loadNoRoot')
+        })
+      }
+    },
+
+    onNodeClick(keys) {
+      this.triggerSelect = true
+      if (keys) {
+        const _tempKeys = keys.split('@^@').filter((item) => item !== '')
+        if (_tempKeys.length === this.levels.length) {
+          this.$refs.xTable.clearCheckboxRow()
+          this.$refs.xTable.clearCheckboxReserve()
+          this.selectedRowKeys = []
+        }
+        this.treeKeys = _tempKeys
+      }
+      const idx = this.expandedKeys.findIndex((item) => item === keys)
+      if (idx > -1) {
+        this.expandedKeys.splice(idx, 1)
+      } else {
+        this.expandedKeys.push(keys)
+      }
+
+      this.refreshTable()
+    },
+    wrapTreeData(facet) {
+      if (this.triggerSelect) {
+        return
+      }
+      const treeData = []
+      facet.forEach((item) => {
+        treeData.push({
+          title: `${item[0]} (${item[1]})`,
+          key: this.treeKeys.join('@^@') + '@^@' + item[2] + '%' + item[3] + '%' + `{"${item[4]}":"${item[0]}"}`,
+          isLeaf: this.leaf.includes(item[3]),
+          id: item[2],
+        })
+      })
+      if (this.treeNode === null) {
+        this.treeData = treeData
+      } else {
+        this.treeNode.dataRef.children = treeData
+        this.treeData = [...this.treeData]
+      }
+    },
+
+    onLoadData(treeNode) {
+      this.triggerSelect = false
+      return new Promise((resolve) => {
+        if (treeNode.dataRef.children) {
+          resolve()
+          return
+        }
+        this.treeKeys = treeNode.eventKey.split('@^@').filter((item) => item !== '')
+        this.treeNode = treeNode
+        resolve()
+      })
+    },
+
+    getRelationViews() {
+      getRelationView().then((res) => {
+        if (JSON.stringify(res) === '{}') {
+          this.relationViews = {
+            id2type: {},
+            name2id: [],
+            views: {},
+          }
+        } else {
+          this.relationViews = res
+        }
+        if ((Object.keys(this.relationViews.views) || []).length) {
+          this.viewId =
+            parseInt(this.$route.path.split('/')[this.$route.path.split('/').length - 1]) ||
+            this.relationViews.name2id[0][1]
+          this.relationViews.name2id.forEach((item) => {
+            if (item[1] === this.viewId) {
+              this.viewName = item[0]
+            }
+          })
+          this.levels = this.relationViews.views[this.viewName].topo
+          this.origShowTypes = this.relationViews.views[this.viewName].show_types
+          const showTypeIds = []
+          this.origShowTypes.forEach((item) => {
+            showTypeIds.push(item.id)
+          })
+          this.origShowTypeIds = showTypeIds
+          this.leaf2showTypes = this.relationViews.views[this.viewName].leaf2show_types
+          this.node2ShowTypes = this.relationViews.views[this.viewName].node2show_types
+          this.level2constraint = this.relationViews.views[this.viewName].level2constraint
+          this.leaf = this.relationViews.views[this.viewName].leaf
+          this.currentView = `${this.viewId}`
+          this.typeId = this.levels[0][0]
+          this.refreshTable()
+        }
+      })
+    },
+
+    async loadColumns() {
+      this.getAttributeList()
+      const res = await getSubscribeAttributes(this.currentTypeId[0])
+      this.preferenceAttrList = res.attributes
+      this.calcColumns()
+    },
+
+    calcColumns() {
+      const width = document.getElementById('relation-views-right').clientWidth
+      this.columns = getCITableColumns(this.instanceList, this.preferenceAttrList, width)
+      this.columns.forEach((col) => {
+        if (col.is_password) {
+          this.initialPasswordValue[col.field] = ''
+          this.passwordValue[col.field] = ''
+        }
+      })
+      this.$nextTick(() => {
+        this.$refs.xTable.refreshColumn()
+      })
+    },
+    onContextMenuClick(treeKey, menuKey) {
+      if (treeKey) {
+        const splitTreeKey = treeKey.split('@^@')
+        const _tempTree = splitTreeKey[splitTreeKey.length - 1].split('%')
+        const firstCIObj = JSON.parse(_tempTree[2])
+        const firstCIId = _tempTree[0]
+        let ancestor_ids
+        if (
+          Object.keys(this.level2constraint).some(
+            (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+          )
+        ) {
+          const ancestor = treeKey
+            .split('@^@')
+            .slice(0, menuKey === 'delete' ? treeKey.split('@^@').length - 2 : treeKey.split('@^@').length - 1)
+          ancestor_ids = ancestor.map((item) => item.split('%')[0]).join(',')
+        }
+        if (menuKey === 'delete') {
+          const _tempTreeParent = splitTreeKey[splitTreeKey.length - 2].split('%')
+          const that = this
+
+          this.$confirm({
+            title: that.$t('warning'),
+            content: (h) => (
+              <div>
+                {that.$t('confirmDelete2', { name: Object.values(firstCIObj)[0] })}
+              </div>
+            ),
+            onOk() {
+              deleteCIRelationView(_tempTreeParent[0], _tempTree[0], { ancestor_ids }).then((res) => {
+                that.$message.success(that.$t('deleteSuccess'))
+                setTimeout(() => {
+                  that.reload()
+                }, 500)
+              })
+            },
+          })
+        } else {
+          const childTypeId = menuKey
+          this.$refs.addTableModal.openModal(firstCIObj, firstCIId, childTypeId, 'children', ancestor_ids)
+        }
+      }
+    },
+    onSelectChange({ records, reserves }) {
+      this.selectedRowKeys = [...records, ...reserves]
+    },
+    batchDeleteCIRelation() {
+      const currentShowType = this.showTypes.find((item) => item.id === Number(this.currentTypeId[0]))
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: (h) => (
+          <div>
+            {that.$t('cmdb.serviceTreedeleteRelationConfirm', { name: currentShowType.alias || currentShowType.name })}
+          </div>
+        ),
+        onOk() {
+          const _tempTree = that.treeKeys[that.treeKeys.length - 1].split('%')
+          const first_ci_id = Number(_tempTree[0])
+          let ancestor_ids
+          if (
+            Object.keys(that.level2constraint).some(
+              (le) => le < Object.keys(that.level2constraint).length && that.level2constraint[le] === '2'
+            )
+          ) {
+            ancestor_ids = `${that.treeKeys
+              .slice(0, that.treeKeys.length - 1)
+              .map((item) => item.split('%')[0])
+              .join(',')}`
+          }
+          batchDeleteCIRelation(
+            that.selectedRowKeys.map((item) => item._id),
+            [first_ci_id],
+            ancestor_ids
+          ).then((res) => {
+            that.$refs.xTable.clearCheckboxRow()
+            that.$refs.xTable.clearCheckboxReserve()
+            that.selectedRowKeys = []
+            that.loadData({}, 'refreshNumber')
+          })
+        },
+      })
+    },
+    onDragEnter(info) {},
+    onDrop(info) {
+      const dragKey = info.dragNode.eventKey
+      const targetKey = info.node.eventKey
+      const _splitDragKey = dragKey.split('@^@')
+      const _splitTargetKey = targetKey.split('@^@').filter((item) => item !== '')
+      if (_splitDragKey.length - 1 === _splitTargetKey.length) {
+        const dragId = _splitDragKey[_splitDragKey.length - 1].split('%')[0]
+        const targetId = _splitTargetKey[_splitTargetKey.length - 1].split('%')[0]
+        console.log(_splitDragKey)
+        batchUpdateCIRelationChildren([dragId], [targetId]).then((res) => {
+          this.reload()
+        })
+      }
+    },
+    handlePerm() {
+      roleHasPermissionToGrant({
+        app_id: 'cmdb',
+        resource_type_name: 'RelationView',
+        perm: 'grant',
+        resource_name: this.$route.meta.title,
+      }).then((res) => {
+        if (res.result) {
+          searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
+            this.resource_type = { groups: res.groups, id2perms: res.id2perms }
+            this.$nextTick(() => {
+              this.$refs.cmdbGrant.open({ name: this.$route.meta.title, cmdbGrantType: 'relation_view' })
+            })
+          })
+        } else {
+          this.$message.error(this.$t('noPermission'))
+        }
+      })
+    },
+    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
+      let sortByTable
+      if (order === 'asc') {
+        sortByTable = property
+      } else if (order === 'desc') {
+        sortByTable = `-${property}`
+      }
+      this.sortByTable = sortByTable
+      this.$nextTick(() => {
+        if (this.pageNo === 1) {
+          this.loadData({}, undefined, sortByTable)
+        } else {
+          this.pageNo = 1
+        }
+      })
+    },
+    columnDrop() {
+      this.$nextTick(() => {
+        const xTable = this.$refs.xTable
+        this.sortable = Sortable.create(
+          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
+          {
+            handle: '.vxe-handle',
+            onChoose: () => {
+              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
+              const classNameList = []
+              header.childNodes.forEach((item) => {
+                classNameList.push(item.classList[1])
+              })
+              this.tableDragClassName = classNameList
+            },
+            onEnd: (params) => {
+              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
+              const { newIndex, oldIndex } = params
+              // 从tableDragClassName拿到colid
+              const fromColid = this.tableDragClassName[oldIndex]
+              const toColid = this.tableDragClassName[newIndex]
+              const fromColumn = xTable.getColumnById(fromColid)
+              const toColumn = xTable.getColumnById(toColid)
+              const fromIndex = xTable.getColumnIndex(fromColumn)
+              const toIndex = xTable.getColumnIndex(toColumn)
+              const tableColumn = xTable.getColumns()
+              const currRow = tableColumn.splice(fromIndex, 1)[0]
+              tableColumn.splice(toIndex, 0, currRow)
+              xTable.loadColumn(tableColumn)
+            },
+          }
+        )
+      })
+    },
+    getChoiceValueStyle(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.style || {}
+      }
+      return {}
+    },
+    getChoiceValueIcon(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.icon || {}
+      }
+      return {}
+    },
+    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
+      const { property } = column
+      const _find = this.preferenceAttrList.find((attr) => attr.name === property)
+      if (
+        _find &&
+        _find.option &&
+        _find.option.fontOptions &&
+        row[`${property}`] !== undefined &&
+        row[`${property}`] !== null
+      ) {
+        return { ..._find.option.fontOptions }
+      }
+    },
+    refreshAfterEditAttrs() {
+      this.loadColumns()
+    },
+    getColumnsEditRender(col) {
+      const _editRender = {
+        ...col.editRender,
+      }
+      if (col.value_type === '6') {
+        _editRender.events = { focus: this.handleFocusJson }
+      }
+      return _editRender
+    },
+    handleEditActived() {
+      const passwordCol = this.columns.filter((col) => col.is_password)
+      this.$nextTick(() => {
+        const editRecord = this.$refs.xTable.getEditRecord()
+        const { row, column } = editRecord
+        if (passwordCol.length && this.lastEditCiId !== row._id) {
+          this.$nextTick(async () => {
+            for (let i = 0; i < passwordCol.length; i++) {
+              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
+                this.initialPasswordValue[passwordCol[i].field] = res.value
+                this.passwordValue[passwordCol[i].field] = res.value
+              })
+            }
+            this.isContinueCloseEdit = false
+            await this.$refs.xTable.clearEdit()
+            this.isContinueCloseEdit = true
+            this.$nextTick(() => {
+              this.$refs.xTable.setEditCell(row, column.field)
+            })
+          })
+        }
+        this.lastEditCiId = row._id
+      })
+    },
+    handleEditClose({ row, rowIndex, column }) {
+      if (!this.isContinueCloseEdit) {
+        return
+      }
+      const $table = this.$refs['xTable']
+      const data = {}
+      this.columns.forEach((item) => {
+        if (
+          !(item.field in this.initialPasswordValue) &&
+          !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])
+        ) {
+          data[item.field] = row[item.field] ?? null
+        }
+      })
+      Object.keys(this.initialPasswordValue).forEach((key) => {
+        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
+          data[key] = this.passwordValue[key]
+          row[key] = this.passwordValue[key]
+        }
+      })
+      this.lastEditCiId = null
+      if (JSON.stringify(data) !== '{}') {
+        updateCI(row.ci_id || row._id, data)
+          .then(() => {
+            this.$message.success(this.$t('saveSuccess'))
+            $table.reloadRow(row, null)
+            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
+            _initialInstanceList[rowIndex] = {
+              ..._initialInstanceList[rowIndex],
+              ...data,
+            }
+            this.initialInstanceList = _initialInstanceList
+          })
+          .catch((err) => {
+            console.log(err)
+            $table.revertData(row)
+          })
+      }
+      this.columns.forEach((col) => {
+        if (col.is_password) {
+          this.initialPasswordValue[col.field] = ''
+          this.passwordValue[col.field] = ''
+        }
+      })
+    },
+    deleteCI(record) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          deleteCI(record.ci_id || record._id).then((res) => {
+            that.$message.success(that.$t('deleteSuccess'))
+            that.loadData({}, 'refreshNumber')
+          })
+        },
+      })
+    },
+    sumbitFromCreateInstance({ ci_id }) {
+      const first_ci_id = this.treeKeys[this.treeKeys.length - 1].split('%')[0]
+      let ancestor_ids
+      if (
+        Object.keys(this.level2constraint).some(
+          (le) => le < Object.keys(this.level2constraint).length && this.level2constraint[le] === '2'
+        )
+      ) {
+        ancestor_ids = `${this.treeKeys
+          .slice(0, this.treeKeys.length - 1)
+          .map((item) => item.split('%')[0])
+          .join(',')}`
+      }
+      addCIRelationView(first_ci_id, ci_id, { ancestor_ids }).then((res) => {
+        setTimeout(() => {
+          this.loadData({}, 'refreshNumber')
+        }, 500)
+      })
+    },
+    batchUpdateFromCreateInstance(values) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ci.batchUpdateConfirm'),
+        onOk() {
+          that.loading = true
+          const payload = {}
+          Object.keys(values).forEach((key) => {
+            if (values[key] || values[key] === 0) {
+              payload[key] = values[key]
+            }
+            // 字段值支持置空
+            // 目前存在字段值不支持置空，由后端返回
+            if (values[key] === undefined || values[key] === null) {
+              payload[key] = null
+            }
+          })
+          const promises = that.selectedRowKeys.map((row) => {
+            return updateCI(row._id, payload).then((res) => {
+              return 'ok'
+            })
+          })
+          Promise.all(promises)
+            .then((res) => {
+              that.$message.success(that.$t('updateSuccess'))
+              that.$refs.create.visible = false
+            })
+            .catch((e) => {
+              console.log(e)
+            })
+            .finally(() => {
+              that.loading = false
+              setTimeout(() => {
+                that.loadData({})
+              }, 800)
+            })
+        },
+      })
+    },
+    async openBatchDownload() {
+      this.$refs.batchDownload.open({
+        preferenceAttrList: this.preferenceAttrList,
+        ciTypeName: this.$route.meta.name,
+      })
+    },
+    batchDownload({ filename, type, checkedKeys }) {
+      const jsonAttrList = []
+      checkedKeys.forEach((key) => {
+        const _find = this.preferenceAttrList.find((attr) => attr.name === key)
+        if (_find && _find.value_type === '6') jsonAttrList.push(key)
+      })
+      const data = _.cloneDeep([
+        ...this.$refs.xTable.getCheckboxReserveRecords(),
+        ...this.$refs.xTable.getCheckboxRecords(true),
+      ])
+      this.$refs.xTable.exportData({
+        filename,
+        type,
+        columnFilterMethod({ column }) {
+          return checkedKeys.includes(column.property)
+        },
+        data: [
+          ...data.map((item) => {
+            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
+            return { ...item }
+          }),
+        ],
+      })
+      this.selectedRowKeys = []
+      this.$refs.xTable.clearCheckboxRow()
+      this.$refs.xTable.clearCheckboxReserve()
+    },
+    batchDelete() {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          that.loading = true
+          const promises = that.selectedRowKeys.map((c) => {
+            return deleteCI(c._id).then((res) => {
+              return 'ok'
+            })
+          })
+          Promise.all(promises)
+            .then((res) => {
+              that.$message.success(that.$t('deleteSuccess'))
+            })
+            .catch((e) => {
+              console.log(e)
+            })
+            .finally(() => {
+              that.loading = false
+              that.selectedRowKeys = []
+              that.$refs.xTable.clearCheckboxRow()
+              that.$refs.xTable.clearCheckboxReserve()
+              that.loadData({}, 'refreshNumber')
+            })
+        },
+      })
+    },
+    handleFocusJson({ column, row }) {
+      this.$refs.jsonEditor.open(column, row)
+    },
+    jsonEditorOk(row, column, jsonData) {
+      // 后端写数据有快慢，不拉接口直接修改table的数据
+      // this.reloadData()
+      this.instanceList.forEach((item) => {
+        if (item._id === row._id) {
+          item[column.property] = JSON.stringify(jsonData)
+        }
+      })
+      this.$refs.xTable.refreshColumn()
+    },
+    relationViewRefreshNumber() {
+      this.loadData({}, 'refreshNumber')
+    },
+    onShowSizeChange(current, pageSize) {
+      this.pageSize = pageSize
+      this.pageNo = 1
+      this.loadData()
+    },
+    getQAndSort() {
+      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
+      const expression = this.$refs['search'].expression || ''
+      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
+    },
+    setParamsFromPreferenceSearch(item) {
+      const { fuzzySearch, expression } = item.option
+      this.$refs.search.fuzzySearch = fuzzySearch
+      this.$refs.search.expression = expression
+      this.pageNo = 1
+      this.$nextTick(() => {
+        this.loadData()
+      })
+    },
+    setPreferenceSearchCurrent(id = null) {
+      this.$refs.preferenceSearch.currentPreferenceSearch = id
+    },
+    copyExpression() {
+      const expression = this.$refs['search'].expression || ''
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      const text = `q=_type:${this.currentTypeId[0]}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.serviceTreecopyFailed'))
+        })
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import '../index.less';
+@import '~@/style/static.less';
+
+.relation-views-wrapper {
+  width: 100%;
+  .relation-views-left {
+    width: 100%;
+    float: left;
+    position: relative;
+    // transition: all 0.3s;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 12px;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    &:hover {
+      overflow: auto;
+    }
+    .ant-tree li {
+      padding: 2px 0;
+    }
+    .ant-tree-switcher {
+      display: none;
+    }
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+      padding: 4px 0;
+      display: inline-block;
+      height: 100%;
+      .ant-tree-title {
+        display: inline-block;
+        width: 100%;
+        padding: 0 6px;
+      }
+    }
+  }
+  .relation-views-right {
+    width: 100%;
+    overflow: auto;
+    background-color: #fff;
+    .relation-views-right-bar {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 5px;
+      height: 32px;
+      padding: 0 12px;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/AddTableModal.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/AddTableModal.vue
index 737e42f..4ccc2e5 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/AddTableModal.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/AddTableModal.vue
@@ -11,12 +11,24 @@
   >
     <div :style="{ width: '100%' }" id="add-table-modal">
       <a-spin :spinning="loading">
+        <!-- <a-input
+          v-model="expression"
+          class="ci-searchform-expression"
+          :style="{ width, marginBottom: '10px' }"
+          :placeholder="placeholder"
+          @focus="
+            () => {
+              isFocusExpression = true
+            }
+          "
+        /> -->
         <SearchForm
           ref="searchForm"
           :typeId="addTypeId"
           :preferenceAttrList="preferenceAttrList"
           @refresh="handleSearch"
         />
+        <!-- <a @click="handleSearch"><a-icon type="search"/></a> -->
         <vxe-table
           ref="xTable"
           row-id="_id"
@@ -52,7 +64,14 @@
           :total="totalNumber"
           show-quick-jumper
           :page-size="50"
-          :show-total="(total, range) => `当前${range[0]}-${range[1]} 共 ${total}条记录`"
+          :show-total="
+            (total, range) =>
+              $t('pagination.total', {
+                range0: range[0],
+                range1: range[1],
+                total,
+              })
+          "
           :style="{ textAlign: 'right', marginTop: '10px' }"
           @change="handleChangePage"
         />
@@ -94,7 +113,7 @@ export default {
       return this.$store.state.windowHeight - 250
     },
     placeholder() {
-      return this.isFocusExpression ? '例：q=os_version:centos&sort=os_version' : '表达式搜索'
+      return this.isFocusExpression ? this.$t('cmdb.serviceTreetips1') : this.$t('cmdb.serviceTreetips2')
     },
     width() {
       return this.isFocusExpression ? '500px' : '100px'
@@ -103,6 +122,7 @@ export default {
   watch: {},
   methods: {
     async openModal(ciObj, ciId, addTypeId, type, ancestor_ids = undefined) {
+      console.log(ciObj, ciId, addTypeId, type)
       this.visible = true
       this.ciObj = ciObj
       this.ciId = ciId
@@ -121,6 +141,10 @@ export default {
     },
     async fetchData(isInit) {
       this.loading = true
+      // if (isInit) {
+      //   const subscribed = await getSubscribeAttributes(this.addTypeId)
+      //   this.preferenceAttrList = subscribed.attributes // 已经订阅的全部列
+      // }
       let sort, fuzzySearch, expression, exp
       if (!isInit) {
         fuzzySearch = this.$refs['searchForm'].fuzzySearch
@@ -179,7 +203,7 @@ export default {
           await batchUpdateCIRelationParents(ciIds, [this.ciId])
         }
         setTimeout(() => {
-          this.$message.success('添加成功！')
+          this.$message.success(this.$t('addSuccess'))
           this.handleClose()
           this.$emit('reload')
         }, 500)
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
index 29bc3e2..126883b 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/modules/ContextMenu.vue
@@ -1,8 +1,8 @@
 <template>
   <a-dropdown :trigger="['contextmenu']">
     <a-menu slot="overlay" @click="({ key: menuKey }) => this.onContextMenuClick(this.treeKey, menuKey)">
-      <a-menu-item v-for="item in menuList" :key="item.id">新增{{ item.alias }}</a-menu-item>
-      <a-menu-item v-if="showDelete" key="delete">删除节点</a-menu-item>
+      <a-menu-item v-for="item in menuList" :key="item.id">{{ $t('new') }} {{ item.alias }}</a-menu-item>
+      <a-menu-item v-if="showDelete" key="delete">{{ $t('cmdb.serviceTree.deleteNode') }}</a-menu-item>
     </a-menu>
     <div
       :style="{
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue b/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
index 0d644c6..f5efe04 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
@@ -1,529 +1,542 @@
-<template>
-  <div id="resource_search" :style="{ height: fromCronJob ? `${windowHeight - 48}px` : `${windowHeight - 90}px` }">
-    <div class="cmdb-views-header">
-      <span>
-        <span class="cmdb-views-header-title">资源搜索</span>
-      </span>
-    </div>
-    <div :style="{ backgroundColor: '#fff', padding: '12px', borderRadius: '15px' }">
-      <SearchForm
-        ref="search"
-        type="resourceSearch"
-        @refresh="handleSearch"
-        :preferenceAttrList="allAttributesList"
-        @updateAllAttributesList="updateAllAttributesList"
-        @copyExpression="copyExpression"
-      />
-      <div
-        v-if="!fromCronJob"
-        :style="{
-          display: 'flex',
-          justifyContent: 'space-between',
-          height: '32px',
-          marginBottom: '5px',
-          alignItems: 'center',
-        }"
-      >
-        <a-button icon="download" type="primary" ghost size="small" @click="handleExport">导出</a-button>
-        <PreferenceSearch
-          ref="preferenceSearch"
-          @getQAndSort="getQAndSort"
-          @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-        />
-      </div>
-      <vxe-table
-        :id="`cmdb-resource`"
-        border
-        keep-source
-        show-overflow
-        resizable
-        ref="xTable"
-        size="small"
-        row-id="_id"
-        :loading="loading"
-        :height="fromCronJob ? windowHeight - 180 : windowHeight - 250"
-        show-header-overflow
-        highlight-hover-row
-        :data="instanceList"
-        :sort-config="{ remote: true, trigger: 'cell' }"
-        @sort-change="handleSortCol"
-        :row-key="true"
-        :column-key="true"
-        :cell-style="getCellStyle"
-        :scroll-y="{ enabled: true, gt: 20 }"
-        :scroll-x="{ enabled: true, gt: 0 }"
-        :export-config="{
-          isColgroup: true,
-          type: 'xlsx',
-          types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
-          mode: 'current',
-          modes: ['current'],
-          isFooter: false,
-          isHeader: true,
-          isColgroup: true,
-        }"
-        class="ops-unstripe-table"
-        :style="{ margin: '0 -12px' }"
-        :custom-config="{ storage: true }"
-      >
-        <vxe-column
-          v-if="instanceList.length"
-          title="模型"
-          field="ci_type_alias"
-          :width="100"
-          fixed="left"
-        ></vxe-column>
-        <vxe-colgroup v-for="colGroup in columnsGroup" :key="colGroup.value" :title="colGroup.label">
-          <template #header>
-            <span :style="{ display: 'inline-flex', alignItems: 'center' }">
-              {{ colGroup.label }}
-              <EditAttrsPopover
-                :style="{ borderLeft: 'none', width: '30px', height: '38px', cursor: 'pointer' }"
-                v-if="colGroup.isCiType"
-                :typeId="Number(colGroup.id.split('-')[1])"
-                @refresh="loadInstance"
-              />
-            </span>
-          </template>
-          <vxe-column
-            v-for="(col, index) in colGroup.children"
-            :key="`${col.field}_${index}`"
-            :title="col.title"
-            :field="col.field"
-            :width="col.width"
-            :minWidth="100"
-            :cell-type="col.value_type === '2' ? 'string' : 'auto'"
-          >
-            <template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}">
-              <span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span>
-              <a
-                v-else-if="col.is_link && row[col.field]"
-                :href="
-                  row[col.field].startsWith('http') || row[col.field].startsWith('https')
-                    ? `${row[col.field]}`
-                    : `http://${row[col.field]}`
-                "
-                target="_blank"
-              >{{ row[col.field] }}</a
-              >
-              <PasswordField
-                v-else-if="col.is_password && row[col.field]"
-                :ci_id="row._id"
-                :attr_id="col.attr_id"
-              ></PasswordField>
-              <template v-else-if="col.is_choice">
-                <template v-if="col.is_list">
-                  <span
-                    v-for="value in row[col.field]"
-                    :key="value"
-                    :style="{
-                      borderRadius: '4px',
-                      padding: '1px 5px',
-                      margin: '2px',
-                      ...getChoiceValueStyle(col, value),
-                    }"
-                  ><ops-icon
-                    :style="{ color: getChoiceValueIcon(col, value).color }"
-                    :type="getChoiceValueIcon(col, value).name"
-                  />{{ value }}</span
-                  >
-                </template>
-                <span
-                  v-else
-                  :style="{
-                    borderRadius: '4px',
-                    padding: '1px 5px',
-                    margin: '2px 0',
-                    ...getChoiceValueStyle(col, row[col.field]),
-                  }"
-                >
-                  <ops-icon
-                    :style="{ color: getChoiceValueIcon(col, row[col.field]).color }"
-                    :type="getChoiceValueIcon(col, row[col.field]).name"
-                  />
-                  {{ row[col.field] }}</span
-                >
-              </template>
-            </template>
-          </vxe-column>
-        </vxe-colgroup>
-
-        <template #empty>
-          <div v-if="loading" style="height: 200px; line-height: 200px">加载中...</div>
-          <div v-else>
-            <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-            <div>暂无数据</div>
-          </div>
-        </template>
-      </vxe-table>
-      <div :style="{ textAlign: 'right', marginTop: '4px' }">
-        <a-pagination
-          :showSizeChanger="true"
-          :current="currentPage"
-          size="small"
-          :total="totalNumber"
-          show-quick-jumper
-          :page-size="pageSize"
-          :page-size-options="pageSizeOptions"
-          @showSizeChange="onShowSizeChange"
-          :show-total="(total, range) => `当前${range[0]}-${range[1]} 共 ${total}条记录`"
-          @change="
-            (page) => {
-              currentPage = page
-              loadInstance(sortByTable)
-            }
-          "
-        >
-          <template slot="buildOptionText" slot-scope="props">
-            <span v-if="props.value !== '100000'">{{ props.value }}条/页</span>
-            <span v-if="props.value === '100000'">全部</span>
-          </template>
-        </a-pagination>
-      </div>
-    </div>
-
-    <BatchDownload
-      :replaceFields="{ cildren: 'children', title: 'label', key: 'id' }"
-      ref="batchDownload"
-      @batchDownload="batchDownload"
-      treeType="tree"
-    />
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import SearchForm from '../../components/searchForm/SearchForm.vue'
-import { searchCI } from '../../api/ci'
-import { searchAttributes, getCITypeAttributesByTypeIds } from '../../api/CITypeAttr'
-import { getCITypes } from '../../api/CIType'
-import { getSubscribeAttributes } from '../../api/preference'
-import { getCITableColumns } from '../../utils/helper'
-import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
-import PasswordField from '../../components/passwordField/index.vue'
-import BatchDownload from '../../components/batchDownload/batchDownload.vue'
-import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
-
-export default {
-  name: 'ResourceSearch',
-  components: { SearchForm, EditAttrsPopover, PasswordField, BatchDownload, PreferenceSearch },
-  props: {
-    fromCronJob: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      ciTypes: [],
-      allAttributesList: [], // 当前选择的模型的全部attributes  默认全部
-      currentPage: 1,
-      pageSizeOptions: ['50', '100', '200', '100000'],
-      pageSize: 50,
-      totalNumber: 0,
-      instanceList: [],
-      // columns: {},
-      sortByTable: undefined,
-      loading: false,
-      columnsGroup: [],
-    }
-  },
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  provide() {
-    return {
-      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
-      filterCompPreferenceSearch: () => {},
-    }
-  },
-  mounted() {
-    this.getAllAttr()
-    this.getAllCiTypes()
-  },
-  methods: {
-    getAllCiTypes() {
-      getCITypes().then((res) => {
-        this.ciTypes = res.ci_types
-      })
-    },
-    getAllAttr() {
-      searchAttributes({ page_size: 9999 }).then((res) => {
-        this.allAttributesList = res.attributes
-      })
-    },
-    updateAllAttributesList(value) {
-      if (value && value.length) {
-        getCITypeAttributesByTypeIds({ type_ids: value.join(',') }).then((res) => {
-          this.allAttributesList = res.attributes
-        })
-      } else {
-        this.getAllAttr()
-      }
-    },
-    async loadInstance(sortByTable = undefined) {
-      this.loading = true
-      // 若模糊搜索可以 queryParam相关后期可删除
-      // const queryParams = this.$refs['search'].queryParam || {}
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-      const expression = this.$refs['search'].expression || ''
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-      const regSort = /(?<=sort=).+/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      // 如果是表格点击的排序 以表格为准
-      let sort
-      if (sortByTable) {
-        sort = sortByTable
-      } else {
-        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
-      }
-      if (!sort) {
-        sort = '_type'
-      }
-      let currenCiType = this.$refs['search'].currenCiType
-      if (!currenCiType.length) {
-        const _currenCiType = []
-        this.$refs['search'].ciTypeGroup.forEach((item) => {
-          _currenCiType.push(...item.ci_types.map((type) => type.id))
-        })
-        currenCiType = _currenCiType
-      }
-      searchCI({
-        q: `${currenCiType && currenCiType.length ? `_type:(${currenCiType.join(';')})` : ''}${exp ? `,${exp}` : ''}${
-          fuzzySearch ? `,*${fuzzySearch}*` : ''
-        }`,
-        count: this.pageSize,
-        page: this.currentPage,
-        sort,
-      })
-        .then(async (res) => {
-          this.columnsGroup = []
-          this.instanceList = []
-          this.totalNumber = res['numfound']
-
-          const oldData = res.result
-
-          function allKeys(data) {
-            const keys = {}
-            const ignoreAttr = ['_id', '_type', 'ci_type', 'ci_type_alias', 'unique', 'unique_alias']
-            data.forEach((item) => {
-              Object.keys(item).forEach((key) => {
-                if (!ignoreAttr.includes(key)) {
-                  keys[key] = ''
-                }
-              })
-            })
-            return keys
-          }
-
-          function tidy(data) {
-            const outputKeys = allKeys(data)
-            const common = {}
-            data.forEach((item) => {
-              const tmp = {}
-              Object.keys(outputKeys).forEach((j) => {
-                if (j in item) {
-                  tmp[j] = item[j]
-                  // 提取common
-                  {
-                    const key = item['ci_type_alias']
-                    if (j in common) {
-                      common[j][[key]] = ''
-                    } else {
-                      common[j] = { [key]: '' }
-                    }
-                  }
-                } else {
-                  tmp[j] = null
-                }
-              })
-            })
-            const commonObject = {}
-            const commonKeys = []
-            // 整理common
-            Object.keys(common).forEach((key) => {
-              if (Object.keys(common[key]).length > 1) {
-                commonKeys.push(key)
-                const reverseKey = Object.keys(common[key]).join('&')
-                if (!commonObject[reverseKey]) {
-                  commonObject[reverseKey] = [key]
-                } else {
-                  commonObject[reverseKey].push(key)
-                }
-              }
-            })
-            return { commonObject, commonKeys }
-          }
-
-          const { commonObject, commonKeys } = tidy(oldData)
-          const _commonColumnsGroup = Object.keys(commonObject).map((key) => {
-            return {
-              id: `parent-${key}`,
-              value: key,
-              label: key,
-              children: this.getColumns(
-                res.result,
-                commonObject[key].map((item) => {
-                  const _find = this.allAttributesList.find((attr) => attr.name === item)
-                  return _find
-                })
-              ),
-            }
-          })
-
-          const _columnsGroup = Object.keys(res.counter).map((key) => {
-            const _find = this.ciTypes.find((item) => item.name === key)
-            return {
-              id: `parent-${_find.id}`,
-              value: key,
-              label: _find?.alias || _find?.name,
-              isCiType: true,
-            }
-          })
-
-          const promises = _columnsGroup.map((item) => {
-            return getSubscribeAttributes(item.id.split('-')[1]).then((res1) => {
-              item.children = this.getColumns(res.result, res1.attributes).filter(
-                (col) => !commonKeys.includes(col.field)
-              )
-            })
-          })
-          await Promise.all(promises).then(() => {
-            this.columnsGroup = [..._commonColumnsGroup, ..._columnsGroup]
-            this.instanceList = res['result']
-          })
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    getColumns(data, attrList) {
-      const width = document.getElementById('resource_search').clientWidth - 50
-      return getCITableColumns(data, attrList, width).map((item) => {
-        return { ...item, id: item.field, label: item.title }
-      })
-    },
-    handleSearch() {
-      this.currentPage = 1
-      this.loadInstance()
-    },
-    onShowSizeChange(current, pageSize) {
-      this.pageSize = pageSize
-      this.currentPage = 1
-      this.loadInstance()
-    },
-    handleSortCol() {},
-    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
-      const { property } = column
-      const _find = this.allAttributesList.find((attr) => attr.name === property)
-      if (
-        _find &&
-        _find.option &&
-        _find.option.fontOptions &&
-        row[`${property}`] !== undefined &&
-        row[`${property}`] !== null
-      ) {
-        return { ..._find.option.fontOptions }
-      }
-    },
-    getChoiceValueStyle(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.style || {}
-      }
-      return {}
-    },
-    getChoiceValueIcon(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.icon || {}
-      }
-      return {}
-    },
-    handleExport() {
-      // this.$refs.xTable.openExport()
-      this.$refs.batchDownload.open({
-        preferenceAttrList: [{ id: `ci_type_alias`, value: 'ci_type_alias', label: '模型' }, ...this.columnsGroup],
-      })
-    },
-    batchDownload({ filename, type, checkedKeys }) {
-      const jsonAttrList = []
-      checkedKeys.forEach((key) => {
-        const _find = this.allAttributesList.find((attr) => attr.name === key)
-        if (_find && _find.value_type === '6') {
-          jsonAttrList.push(key)
-        }
-      })
-      const data = _.cloneDeep(this.instanceList)
-      this.$refs.xTable.exportData({
-        filename,
-        type,
-        columnFilterMethod({ column }) {
-          return checkedKeys.includes(column.property)
-        },
-        data: [
-          ...data.map((item) => {
-            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
-            return { ...item }
-          }),
-        ],
-        download: false,
-      })
-      this.selectedRowKeys = []
-      this.$refs.xTable.clearCheckboxRow()
-      this.$refs.xTable.clearCheckboxReserve()
-    },
-    getQAndSort() {
-      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
-      const expression = this.$refs['search'].expression || ''
-      const currenCiType = this.$refs['search'].currenCiType || undefined
-      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression, currenCiType })
-    },
-    setParamsFromPreferenceSearch(item) {
-      const { fuzzySearch, expression, currenCiType } = item.option
-      this.$refs.search.fuzzySearch = fuzzySearch
-      this.$refs.search.expression = expression
-      this.$refs.search.currenCiType = currenCiType
-      this.currentPage = 1
-      this.$nextTick(() => {
-        this.loadInstance()
-      })
-    },
-    setPreferenceSearchCurrent(id = null) {
-      if (this.$refs.preferenceSearch) {
-        this.$refs.preferenceSearch.currentPreferenceSearch = id
-      }
-    },
-    copyExpression() {
-      const expression = this.$refs['search'].expression || ''
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      let currenCiType = this.$refs['search'].currenCiType
-      if (!currenCiType.length) {
-        const _currenCiType = []
-        this.$refs['search'].ciTypeGroup.forEach((item) => {
-          _currenCiType.push(...item.ci_types.map((type) => type.id))
-        })
-        currenCiType = _currenCiType
-      }
-      const text = `q=${currenCiType && currenCiType.length ? `_type:(${currenCiType.join(';')})` : ''}${
-        exp ? `,${exp}` : ''
-      }${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
-      this.$copyText(text)
-        .then(() => {
-          this.$message.success('复制成功！')
-          this.$emit('copySuccess', text)
-        })
-        .catch(() => {
-          this.$message.error('复制失败！')
-        })
-    },
-  },
-}
-</script>
+<template>
+  <div id="resource_search" :style="{ height: fromCronJob ? `${windowHeight - 48}px` : `${windowHeight - 90}px` }">
+    <div class="cmdb-views-header">
+      <span>
+        <span class="cmdb-views-header-title">{{ $t('cmdb.menu.ciSearch') }}</span>
+      </span>
+    </div>
+    <div :style="{ backgroundColor: '#fff', padding: '12px', borderRadius: '15px' }">
+      <SearchForm
+        ref="search"
+        type="resourceSearch"
+        @refresh="handleSearch"
+        :preferenceAttrList="allAttributesList"
+        @updateAllAttributesList="updateAllAttributesList"
+        @copyExpression="copyExpression"
+      />
+      <div
+        v-if="!fromCronJob"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          height: '32px',
+          marginBottom: '5px',
+          alignItems: 'center',
+        }"
+      >
+        <a-button icon="download" type="primary" ghost size="small" @click="handleExport">{{
+          $t('download')
+        }}</a-button>
+        <PreferenceSearch
+          ref="preferenceSearch"
+          @getQAndSort="getQAndSort"
+          @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+        />
+      </div>
+      <vxe-table
+        :id="`cmdb-resource`"
+        border
+        keep-source
+        show-overflow
+        resizable
+        ref="xTable"
+        size="small"
+        row-id="_id"
+        :loading="loading"
+        :height="fromCronJob ? windowHeight - 180 : windowHeight - 250"
+        show-header-overflow
+        highlight-hover-row
+        :data="instanceList"
+        :sort-config="{ remote: true, trigger: 'cell' }"
+        @sort-change="handleSortCol"
+        :row-key="true"
+        :column-key="true"
+        :cell-style="getCellStyle"
+        :scroll-y="{ enabled: true, gt: 20 }"
+        :scroll-x="{ enabled: true, gt: 0 }"
+        :export-config="{
+          isColgroup: true,
+          type: 'xlsx',
+          types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+          mode: 'current',
+          modes: ['current'],
+          isFooter: false,
+          isHeader: true,
+          isColgroup: true,
+        }"
+        class="ops-unstripe-table"
+        :style="{ margin: '0 -12px' }"
+        :custom-config="{ storage: true }"
+      >
+        <vxe-column
+          v-if="instanceList.length"
+          :title="$t('cmdb.ciType.ciType')"
+          field="ci_type_alias"
+          :width="100"
+          fixed="left"
+        ></vxe-column>
+        <vxe-colgroup v-for="colGroup in columnsGroup" :key="colGroup.value" :title="colGroup.label">
+          <template #header>
+            <span :style="{ display: 'inline-flex', alignItems: 'center' }">
+              {{ colGroup.label }}
+              <EditAttrsPopover
+                :style="{ borderLeft: 'none', width: '30px', height: '38px', cursor: 'pointer' }"
+                v-if="colGroup.isCiType"
+                :typeId="Number(colGroup.id.split('-')[1])"
+                @refresh="loadInstance"
+              />
+            </span>
+          </template>
+          <vxe-column
+            v-for="(col, index) in colGroup.children"
+            :key="`${col.field}_${index}`"
+            :title="col.title"
+            :field="col.field"
+            :width="col.width"
+            :minWidth="100"
+            :cell-type="col.value_type === '2' ? 'string' : 'auto'"
+          >
+            <template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}">
+              <span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span>
+              <a
+                v-else-if="col.is_link && row[col.field]"
+                :href="
+                  row[col.field].startsWith('http') || row[col.field].startsWith('https')
+                    ? `${row[col.field]}`
+                    : `http://${row[col.field]}`
+                "
+                target="_blank"
+              >{{ row[col.field] }}</a
+              >
+              <PasswordField
+                v-else-if="col.is_password && row[col.field]"
+                :ci_id="row._id"
+                :attr_id="col.attr_id"
+              ></PasswordField>
+              <template v-else-if="col.is_choice">
+                <template v-if="col.is_list">
+                  <span
+                    v-for="value in row[col.field]"
+                    :key="value"
+                    :style="{
+                      borderRadius: '4px',
+                      padding: '1px 5px',
+                      margin: '2px',
+                      ...getChoiceValueStyle(col, value),
+                    }"
+                  ><ops-icon
+                    :style="{ color: getChoiceValueIcon(col, value).color }"
+                    :type="getChoiceValueIcon(col, value).name"
+                  />{{ value }}</span
+                  >
+                </template>
+                <span
+                  v-else
+                  :style="{
+                    borderRadius: '4px',
+                    padding: '1px 5px',
+                    margin: '2px 0',
+                    ...getChoiceValueStyle(col, row[col.field]),
+                  }"
+                >
+                  <ops-icon
+                    :style="{ color: getChoiceValueIcon(col, row[col.field]).color }"
+                    :type="getChoiceValueIcon(col, row[col.field]).name"
+                  />
+                  {{ row[col.field] }}</span
+                >
+              </template>
+            </template>
+          </vxe-column>
+        </vxe-colgroup>
+
+        <template #empty>
+          <div>
+            <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
+            <div>{{ $t('noData') }}</div>
+          </div>
+        </template>
+        <template #loading>
+          <div style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
+        </template>
+      </vxe-table>
+      <div :style="{ textAlign: 'right', marginTop: '4px' }">
+        <a-pagination
+          :showSizeChanger="true"
+          :current="currentPage"
+          size="small"
+          :total="totalNumber"
+          show-quick-jumper
+          :page-size="pageSize"
+          :page-size-options="pageSizeOptions"
+          @showSizeChange="onShowSizeChange"
+          :show-total="
+            (total, range) =>
+              $t('pagination.total', {
+                range0: range[0],
+                range1: range[1],
+                total,
+              })
+          "
+          @change="
+            (page) => {
+              currentPage = page
+              loadInstance(sortByTable)
+            }
+          "
+        >
+          <template slot="buildOptionText" slot-scope="props">
+            <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
+            <span v-if="props.value === '100000'">{{ $t('all') }}</span>
+          </template>
+        </a-pagination>
+      </div>
+    </div>
+
+    <BatchDownload
+      :replaceFields="{ cildren: 'children', title: 'label', key: 'id' }"
+      ref="batchDownload"
+      @batchDownload="batchDownload"
+      treeType="tree"
+    />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import SearchForm from '../../components/searchForm/SearchForm.vue'
+import { searchCI } from '../../api/ci'
+import { searchAttributes, getCITypeAttributesByTypeIds } from '../../api/CITypeAttr'
+import { getCITypes } from '../../api/CIType'
+import { getSubscribeAttributes } from '../../api/preference'
+import { getCITableColumns } from '../../utils/helper'
+import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
+import PasswordField from '../../components/passwordField/index.vue'
+import BatchDownload from '../../components/batchDownload/batchDownload.vue'
+import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
+
+export default {
+  name: 'ResourceSearch',
+  components: { SearchForm, EditAttrsPopover, PasswordField, BatchDownload, PreferenceSearch },
+  props: {
+    fromCronJob: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      ciTypes: [],
+      allAttributesList: [], // 当前选择的模型的全部attributes  默认全部
+      currentPage: 1,
+      pageSizeOptions: ['50', '100', '200', '100000'],
+      pageSize: 50,
+      totalNumber: 0,
+      instanceList: [],
+      // columns: {},
+      sortByTable: undefined,
+      loading: false,
+      columnsGroup: [],
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return {
+      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
+      filterCompPreferenceSearch: () => {},
+    }
+  },
+  mounted() {
+    this.getAllAttr()
+    this.getAllCiTypes()
+  },
+  methods: {
+    getAllCiTypes() {
+      getCITypes().then((res) => {
+        this.ciTypes = res.ci_types
+      })
+    },
+    getAllAttr() {
+      searchAttributes({ page_size: 9999 }).then((res) => {
+        this.allAttributesList = res.attributes
+      })
+    },
+    updateAllAttributesList(value) {
+      if (value && value.length) {
+        getCITypeAttributesByTypeIds({ type_ids: value.join(',') }).then((res) => {
+          this.allAttributesList = res.attributes
+        })
+      } else {
+        this.getAllAttr()
+      }
+    },
+    async loadInstance(sortByTable = undefined) {
+      this.loading = true
+      // 若模糊搜索可以 queryParam相关后期可删除
+      // const queryParams = this.$refs['search'].queryParam || {}
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+      const expression = this.$refs['search'].expression || ''
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+      const regSort = /(?<=sort=).+/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      // 如果是表格点击的排序 以表格为准
+      let sort
+      if (sortByTable) {
+        sort = sortByTable
+      } else {
+        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
+      }
+      if (!sort) {
+        sort = '_type'
+      }
+      let currenCiType = this.$refs['search'].currenCiType
+      if (!currenCiType.length) {
+        const _currenCiType = []
+        this.$refs['search'].ciTypeGroup.forEach((item) => {
+          _currenCiType.push(...item.ci_types.map((type) => type.id))
+        })
+        currenCiType = _currenCiType
+      }
+      searchCI({
+        q: `${currenCiType && currenCiType.length ? `_type:(${currenCiType.join(';')})` : ''}${exp ? `,${exp}` : ''}${
+          fuzzySearch ? `,*${fuzzySearch}*` : ''
+        }`,
+        count: this.pageSize,
+        page: this.currentPage,
+        sort,
+      })
+        .then(async (res) => {
+          this.columnsGroup = []
+          this.instanceList = []
+          this.totalNumber = res['numfound']
+
+          const oldData = res.result
+
+          function allKeys(data) {
+            const keys = {}
+            const ignoreAttr = ['_id', '_type', 'ci_type', 'ci_type_alias', 'unique', 'unique_alias']
+            data.forEach((item) => {
+              Object.keys(item).forEach((key) => {
+                if (!ignoreAttr.includes(key)) {
+                  keys[key] = ''
+                }
+              })
+            })
+            return keys
+          }
+
+          function tidy(data) {
+            const outputKeys = allKeys(data)
+            const common = {}
+            data.forEach((item) => {
+              const tmp = {}
+              Object.keys(outputKeys).forEach((j) => {
+                if (j in item) {
+                  tmp[j] = item[j]
+                  // 提取common
+                  {
+                    const key = item['ci_type_alias']
+                    if (j in common) {
+                      common[j][[key]] = ''
+                    } else {
+                      common[j] = { [key]: '' }
+                    }
+                  }
+                } else {
+                  tmp[j] = null
+                }
+              })
+            })
+            const commonObject = {}
+            const commonKeys = []
+            // 整理common
+            Object.keys(common).forEach((key) => {
+              if (Object.keys(common[key]).length > 1) {
+                commonKeys.push(key)
+                const reverseKey = Object.keys(common[key]).join('&')
+                if (!commonObject[reverseKey]) {
+                  commonObject[reverseKey] = [key]
+                } else {
+                  commonObject[reverseKey].push(key)
+                }
+              }
+            })
+            return { commonObject, commonKeys }
+          }
+
+          const { commonObject, commonKeys } = tidy(oldData)
+          const _commonColumnsGroup = Object.keys(commonObject).map((key) => {
+            return {
+              id: `parent-${key}`,
+              value: key,
+              label: key,
+              children: this.getColumns(
+                res.result,
+                commonObject[key].map((item) => {
+                  const _find = this.allAttributesList.find((attr) => attr.name === item)
+                  return _find
+                })
+              ),
+            }
+          })
+
+          const _columnsGroup = Object.keys(res.counter).map((key) => {
+            const _find = this.ciTypes.find((item) => item.name === key)
+            return {
+              id: `parent-${_find.id}`,
+              value: key,
+              label: _find?.alias || _find?.name,
+              isCiType: true,
+            }
+          })
+
+          const promises = _columnsGroup.map((item) => {
+            return getSubscribeAttributes(item.id.split('-')[1]).then((res1) => {
+              item.children = this.getColumns(res.result, res1.attributes).filter(
+                (col) => !commonKeys.includes(col.field)
+              )
+            })
+          })
+          await Promise.all(promises).then(() => {
+            this.columnsGroup = [..._commonColumnsGroup, ..._columnsGroup]
+            this.instanceList = res['result']
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    getColumns(data, attrList) {
+      const width = document.getElementById('resource_search').clientWidth - 50
+      return getCITableColumns(data, attrList, width).map((item) => {
+        return { ...item, id: item.field, label: item.title }
+      })
+    },
+    handleSearch() {
+      this.currentPage = 1
+      this.loadInstance()
+    },
+    onShowSizeChange(current, pageSize) {
+      this.pageSize = pageSize
+      this.currentPage = 1
+      this.loadInstance()
+    },
+    handleSortCol() {},
+    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
+      const { property } = column
+      const _find = this.allAttributesList.find((attr) => attr.name === property)
+      if (
+        _find &&
+        _find.option &&
+        _find.option.fontOptions &&
+        row[`${property}`] !== undefined &&
+        row[`${property}`] !== null
+      ) {
+        return { ..._find.option.fontOptions }
+      }
+    },
+    getChoiceValueStyle(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.style || {}
+      }
+      return {}
+    },
+    getChoiceValueIcon(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.icon || {}
+      }
+      return {}
+    },
+    handleExport() {
+      this.$refs.batchDownload.open({
+        preferenceAttrList: [
+          { id: `ci_type_alias`, value: 'ci_type_alias', label: this.$t('cmdb.ciType.ciType') },
+          ...this.columnsGroup,
+        ],
+      })
+    },
+    batchDownload({ filename, type, checkedKeys }) {
+      const jsonAttrList = []
+      checkedKeys.forEach((key) => {
+        const _find = this.allAttributesList.find((attr) => attr.name === key)
+        if (_find && _find.value_type === '6') {
+          jsonAttrList.push(key)
+        }
+      })
+      const data = _.cloneDeep(this.instanceList)
+      this.$refs.xTable.exportData({
+        filename,
+        type,
+        columnFilterMethod({ column }) {
+          return checkedKeys.includes(column.property)
+        },
+        data: [
+          ...data.map((item) => {
+            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
+            return { ...item }
+          }),
+        ],
+        download: false,
+      })
+      this.selectedRowKeys = []
+      this.$refs.xTable.clearCheckboxRow()
+      this.$refs.xTable.clearCheckboxReserve()
+    },
+    getQAndSort() {
+      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
+      const expression = this.$refs['search'].expression || ''
+      const currenCiType = this.$refs['search'].currenCiType || undefined
+      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression, currenCiType })
+    },
+    setParamsFromPreferenceSearch(item) {
+      const { fuzzySearch, expression, currenCiType } = item.option
+      this.$refs.search.fuzzySearch = fuzzySearch
+      this.$refs.search.expression = expression
+      this.$refs.search.currenCiType = currenCiType
+      this.currentPage = 1
+      this.$nextTick(() => {
+        this.loadInstance()
+      })
+    },
+    setPreferenceSearchCurrent(id = null) {
+      if (this.$refs.preferenceSearch) {
+        this.$refs.preferenceSearch.currentPreferenceSearch = id
+      }
+    },
+    copyExpression() {
+      const expression = this.$refs['search'].expression || ''
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      let currenCiType = this.$refs['search'].currenCiType
+      if (!currenCiType.length) {
+        const _currenCiType = []
+        this.$refs['search'].ciTypeGroup.forEach((item) => {
+          _currenCiType.push(...item.ci_types.map((type) => type.id))
+        })
+        currenCiType = _currenCiType
+      }
+      const text = `q=${currenCiType && currenCiType.length ? `_type:(${currenCiType.join(';')})` : ''}${
+        exp ? `,${exp}` : ''
+      }${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+          this.$emit('copySuccess', text)
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    },
+  },
+}
+</script>
diff --git a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
index d2896be..85f41c5 100644
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
@@ -1,1343 +1,1329 @@
-<template>
-  <div :style="{ marginBottom: '-24px' }">
-    <div v-if="!subscribeTreeViewCiTypesLoading && subscribeTreeViewCiTypes.length === 0">
-      <a-alert message="请先到 我的订阅 页面完成订阅!" banner></a-alert>
-    </div>
-    <div class="tree-views">
-      <div class="cmdb-views-header">
-        <span>
-          <span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
-          <span
-            @click="
-              () => {
-                $refs.metadataDrawer.open(typeId)
-              }
-            "
-            class="cmdb-views-header-metadata"
-          ><a-icon type="info-circle" />
-            属性说明
-          </span>
-        </span>
-        <a-button
-          size="small"
-          icon="plus"
-          type="primary"
-          @click="$refs.create.handleOpen(true, 'create')"
-        >新建</a-button
-        >
-      </div>
-      <SplitPane
-        :min="200"
-        :max="500"
-        :paneLengthPixel.sync="paneLengthPixel"
-        appName="cmdb-tree-views"
-        triggerColor="#F0F5FF"
-        :triggerLength="18"
-      >
-        <template #one>
-          <div class="tree-views-left" :style="{ height: `${windowHeight - 115}px` }">
-            <a-collapse
-              :activeKey="current"
-              accordion
-              @change="handleChangeCi"
-              :bordered="false"
-              :destroyInactivePanel="true"
-            >
-              <a-collapse-panel
-                v-for="ciType in subscribeTreeViewCiTypes"
-                :key="String(ciType.type_id)"
-                :showArrow="false"
-                :style="{
-                  borderRadius: '4px',
-                  marginBottom: '5px',
-                  border: 0,
-                  overflow: 'hidden',
-                  width: '100%',
-                }"
-              >
-                <div
-                  slot="header"
-                  :class="{
-                    'custom-header': true,
-                    'custom-header-selected': Number(ciType.type_id) === Number(typeId),
-                  }"
-                >
-                  <span class="tree-views-left-header-icon">
-                    <template v-if="ciType.icon">
-                      <img
-                        v-if="ciType.icon.split('$$')[2]"
-                        :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
-                        :style="{ maxHeight: '14px', maxWidth: '14px' }"
-                      />
-                      <ops-icon
-                        v-else
-                        :style="{
-                          color: ciType.icon.split('$$')[1],
-                          fontSize: '14px',
-                        }"
-                        :type="ciType.icon.split('$$')[0]"
-                      />
-                    </template>
-                    <span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
-                  </span>
-                  <span class="tree-views-left-header-name">{{ ciType.alias || ciType.name }}</span>
-                  <div class="actions">
-                    <a-tooltip title="取消订阅">
-                      <div class="action" @click="(e) => cancelSubscribe(e, ciType)">
-                        <a-icon type="star" />
-                      </div>
-                    </a-tooltip>
-                    <a-tooltip title="订阅设置">
-                      <div class="action" @click="(e) => subscribeSetting(e, ciType)">
-                        <a-icon type="setting" />
-                      </div>
-                    </a-tooltip>
-                  </div>
-                </div>
-                <a-tree
-                  :selectedKeys="selectedKeys"
-                  :tree-data="treeData"
-                  :load-data="onLoadData"
-                  :expandedKeys="expandedKeys"
-                >
-                  <a-icon slot="switcherIcon" type="down" />
-                  <template #title="{ key: treeKey, title, isLeaf }">
-                    <TreeViewsNode
-                      :title="title"
-                      :treeKey="treeKey"
-                      :levels="levels"
-                      :isLeaf="isLeaf"
-                      @onNodeClick="onNodeClick"
-                    />
-                  </template>
-                </a-tree>
-              </a-collapse-panel>
-            </a-collapse>
-          </div>
-        </template>
-        <template #two>
-          <div class="tree-views-right" id="tree-views-right" :style="{ height: `${windowHeight - 115}px` }">
-            <SearchForm
-              ref="search"
-              @refresh="reloadData"
-              :preferenceAttrList="currentAttrList"
-              :typeId="Number(typeId)"
-              @copyExpression="copyExpression"
-            />
-            <div class="tree-views-right-bar">
-              <PreferenceSearch
-                ref="preferenceSearch"
-                @getQAndSort="getQAndSort"
-                @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
-              />
-              <div class="ops-list-batch-action">
-                <template v-if="selectedRowKeys.length">
-                  <span @click="$refs.create.handleOpen(true, 'update')">修改</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchDownload">下载</span>
-                  <a-divider type="vertical" />
-                  <span @click="batchDelete">删除</span>
-                  <span>选取：{{ selectedRowKeys.length }} 项</span>
-                </template>
-              </div>
-            </div>
-            <ops-table
-              :id="`cmdb-tree-${typeId}`"
-              border
-              ref="xTable"
-              size="small"
-              keep-source
-              :loading="loading"
-              :data="instanceList"
-              highlight-hover-row
-              show-overflow
-              show-header-overflow
-              row-id="_id"
-              resizable
-              :row-key="true"
-              :column-key="true"
-              :sort-config="{ remote: true, trigger: 'cell' }"
-              @sort-change="handleSortCol"
-              :cell-style="getCellStyle"
-              :scroll-y="{ enabled: true, gt: 20 }"
-              :scroll-x="{ enabled: true, gt: 0 }"
-              :height="`${windowHeight - 252}px`"
-              @checkbox-change="onSelectChange"
-              @checkbox-all="onSelectChange"
-              @checkbox-range-end="onSelectRangeEnd"
-              :checkbox-config="{ reserve: true, highlight: true, range: true }"
-              @edit-closed="handleEditClose"
-              @edit-actived="handleEditActived"
-              :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
-              class="ops-unstripe-table"
-              :style="{ margin: '0 -12px' }"
-              :custom-config="{ storage: true }"
-            >
-              <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
-              <vxe-table-column
-                v-for="(col, index) in columns"
-                :key="`${col.field}_${index}`"
-                :title="col.title"
-                :field="col.field"
-                :width="col.width"
-                :sortable="col.sortable"
-                :edit-render="getColumnsEditRender(col)"
-                :cell-type="col.value_type === '2' ? 'string' : 'auto'"
-                :fixed="col.is_fixed ? 'left' : ''"
-              >
-                <template #header>
-                  <span class="vxe-handle">
-                    <OpsMoveIcon
-                      style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
-                    />
-                    {{ col.title }}</span
-                  >
-                </template>
-                <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
-                  <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
-                  <a-select
-                    :getPopupContainer="(trigger) => trigger.parentElement"
-                    :style="{ width: '100%', height: '32px' }"
-                    v-model="row[col.field]"
-                    placeholder="请选择"
-                    v-if="col.is_choice"
-                    :showArrow="false"
-                    :mode="col.is_list ? 'multiple' : 'default'"
-                    class="ci-table-edit-select"
-                    allowClear
-                  >
-                    <a-select-option
-                      :value="choice[0]"
-                      :key="'edit_' + col.field + idx"
-                      v-for="(choice, idx) in col.filters"
-                    >
-                      <span
-                        :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
-                      >
-                        <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
-                          <img
-                            v-if="choice[1].icon.id && choice[1].icon.url"
-                            :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
-                            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                          />
-                          <ops-icon
-                            v-else
-                            :style="{ color: choice[1].icon.color, marginRight: '5px' }"
-                            :type="choice[1].icon.name"
-                          />
-                        </template>
-                        {{ choice[0] }}
-                      </span>
-                    </a-select-option>
-                  </a-select>
-                  <a-select
-                    :getPopupContainer="(trigger) => trigger.parentElement"
-                    :style="{ width: '100%', height: '32px' }"
-                    v-model="row[col.field]"
-                    placeholder="请选择"
-                    v-else-if="col.is_list"
-                    :showArrow="false"
-                    mode="tags"
-                    class="ci-table-edit-select"
-                    allowClear
-                  >
-                  </a-select>
-                </template>
-                <template
-                  v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
-                  #default="{row}"
-                >
-                  <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
-                  <a
-                    v-else-if="col.is_link && row[col.field]"
-                    :href="
-                      row[col.field].startsWith('http') || row[col.field].startsWith('https')
-                        ? `${row[col.field]}`
-                        : `http://${row[col.field]}`
-                    "
-                    target="_blank"
-                  >{{ row[col.field] }}</a
-                  >
-                  <PasswordField
-                    v-else-if="col.is_password && row[col.field]"
-                    :ci_id="row._id"
-                    :attr_id="col.attr_id"
-                  ></PasswordField>
-                  <template v-else-if="col.is_choice">
-                    <template v-if="col.is_list">
-                      <span
-                        v-for="value in row[col.field]"
-                        :key="value"
-                        :style="{
-                          borderRadius: '4px',
-                          padding: '1px 5px',
-                          margin: '2px',
-                          ...getChoiceValueStyle(col, value),
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                        }"
-                      >
-                        <img
-                          v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
-                          :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
-                          :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                        />
-                        <ops-icon
-                          v-else
-                          :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
-                          :type="getChoiceValueIcon(col, value).name"
-                        />{{ value }}</span
-                      >
-                    </template>
-                    <span
-                      v-else-if="row[col.field]"
-                      :style="{
-                        borderRadius: '4px',
-                        padding: '1px 5px',
-                        margin: '2px 0',
-                        ...getChoiceValueStyle(col, row[col.field]),
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                      }"
-                    >
-                      <img
-                        v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
-                        :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
-                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
-                      />
-                      <ops-icon
-                        v-else
-                        :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
-                        :type="getChoiceValueIcon(col, row[col.field]).name"
-                      />{{ row[col.field] }}</span
-                    >
-                  </template>
-                </template>
-              </vxe-table-column>
-              <vxe-table-column align="left" field="operate" fixed="right" width="80">
-                <template #header>
-                  <span>操作</span>
-                  <EditAttrsPopover :typeId="Number(typeId)" class="operation-icon" @refresh="refreshAfterEditAttrs" />
-                </template>
-                <template #default="{ row }">
-                  <a-space>
-                    <a @click="$refs.detail.create(row.ci_id || row._id)">
-                      <a-icon type="unordered-list" />
-                    </a>
-                    <a-tooltip title="添加关系">
-                      <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
-                        <a-icon type="retweet" />
-                      </a>
-                    </a-tooltip>
-                    <template>
-                      <a-tooltip title="删除实例">
-                        <a @click="deleteCI(row)" :style="{ color: 'red' }">
-                          <a-icon type="delete" />
-                        </a>
-                      </a-tooltip>
-                    </template>
-                  </a-space>
-                </template>
-              </vxe-table-column>
-              <template #empty>
-                <div v-if="loading" style="height: 200px; line-height: 200px">加载中...</div>
-                <div v-else>
-                  <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-                  <div>暂无数据</div>
-                </div>
-              </template>
-              <template #loading>
-                <div style="height: 200px; line-height: 200px">{{ loadTip || '加载中...' }}</div>
-              </template>
-            </ops-table>
-            <div :style="{ textAlign: 'right', marginTop: '4px' }">
-              <a-pagination
-                :showSizeChanger="true"
-                :current="currentPage"
-                size="small"
-                :total="totalNumber"
-                show-quick-jumper
-                :page-size="pageSize"
-                :page-size-options="pageSizeOptions"
-                :show-total="(total, range) => `当前${range[0]}-${range[1]} 共 ${total}条记录`"
-                :style="{ alignSelf: 'flex-end' }"
-                @showSizeChange="onShowSizeChange"
-                @change="
-                  (page) => {
-                    currentPage = page
-                    handleLoadInstance({ sortByTable })
-                  }
-                "
-              >
-                <template slot="buildOptionText" slot-scope="props">
-                  <span v-if="props.value !== '100000'">{{ props.value }}条/页</span>
-                  <span v-if="props.value === '100000'">全部</span>
-                </template>
-              </a-pagination>
-            </div>
-          </div>
-        </template>
-      </SplitPane>
-    </div>
-    <SubscribeSetting
-      ref="subscribeSetting"
-      @reload="
-        () => {
-          reload()
-        }
-      "
-    />
-    <ci-detail ref="detail" :typeId="Number(typeId)" :treeViewsLevels="treeViewsLevels" />
-    <create-instance-form
-      ref="create"
-      :typeIdFromRelation="Number(typeId)"
-      @reload="sumbitFromCreateInstance"
-      @submit="batchUpdateFromCreateInstance"
-    />
-    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
-    <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
-    <MetadataDrawer ref="metadataDrawer" />
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-useless-escape */
-import _ from 'lodash'
-import Sortable from 'sortablejs'
-import { getSubscribeTreeView, getSubscribeAttributes, subscribeTreeView } from '@/modules/cmdb/api/preference'
-import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
-import { getCITypes } from '@/modules/cmdb/api/CIType'
-import { getCITableColumns } from '../../utils/helper'
-import SearchForm from '../../components/searchForm/SearchForm.vue'
-import SubscribeSetting from '../../components/subscribeSetting/subscribeSetting'
-import PasswordField from '../../components/passwordField/index.vue'
-import SplitPane from '@/components/SplitPane'
-import TreeViewsNode from './modules/treeViewsNode.vue'
-import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
-import CiDetail from '../ci/modules/CiDetail'
-import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
-import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
-import BatchDownload from '../../components/batchDownload/batchDownload.vue'
-import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
-import MetadataDrawer from '../ci/modules/MetadataDrawer.vue'
-import { intersection } from '@/utils/functions/set'
-import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
-import { getAttrPassword } from '../../api/CITypeAttr'
-
-export default {
-  name: 'TreeViews',
-  components: {
-    SearchForm,
-    SubscribeSetting,
-    PasswordField,
-    SplitPane,
-    TreeViewsNode,
-    EditAttrsPopover,
-    CiDetail,
-    CreateInstanceForm,
-    JsonEditor,
-    BatchDownload,
-    PreferenceSearch,
-    MetadataDrawer,
-    OpsMoveIcon,
-  },
-  data() {
-    return {
-      keySplit: '---',
-      treeData: [],
-      treeNode: null,
-      treeKeys: [],
-      subscribeTreeViewCiTypes: [],
-      subscribeTreeViewCiTypesLoading: false,
-      levels: [],
-      typeId: null,
-      instanceList: [],
-      columns: [],
-      loading: false,
-      loadTip: '',
-      pageSizeOptions: ['50', '100', '200', '100000'],
-      pageSize: 50,
-      currentPage: 1,
-      totalNumber: 0,
-      current: '', // 当前页面的type_id
-      currentAttrList: [],
-      trigger: false,
-      newLoad: true,
-      formatSearchFormData: '',
-      sortByTable: undefined,
-      paneLengthPixel: 205,
-      expandedKeys: [],
-      attrList: [],
-      attributes: {},
-      selectedRowKeys: [],
-      // 对照是否编辑
-      initialInstanceList: [],
-      citypes: [],
-      // 表格拖拽的参数
-      tableDragClassName: [],
-      // 已经设置过data的node
-      isSetDataNodes: [],
-
-      initialPasswordValue: {},
-      passwordValue: {},
-      lastEditCiId: null,
-      isContinueCloseEdit: true,
-    }
-  },
-
-  computed: {
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-    selectedKeys() {
-      if (this.treeKeys.length <= 1) {
-        return this.treeKeys.map((item) => `${this.keySplit}${item}`)
-      }
-      return [this.treeKeys.join(this.keySplit)]
-    },
-    treeViewsLevels() {
-      // 当前订阅的树型视图的字段
-      const _find = this.subscribeTreeViewCiTypes.find((item) => item.type_id === Number(this.typeId))
-      return _find?.levels || []
-    },
-    treeViewId() {
-      // 当前页面的id
-      const _find = this.subscribeTreeViewCiTypes.find((item) => item.type_id === Number(this.typeId))
-      return _find?.id
-    },
-    isCheckboxFixed() {
-      const idx = this.columns.findIndex((item) => item.is_fixed)
-      return idx > -1
-    },
-    currentCiTypeName() {
-      const _find = this.citypes.find((item) => Number(item.id) === Number(this.typeId))
-      return _find?.alias || _find?.name || ''
-    },
-  },
-  watch: {
-    '$route.path': function (newPath, oldPath) {
-      this.newLoad = true
-      this.typeId = this.$route.params.typeId
-      this.initPage()
-    },
-  },
-  provide() {
-    return {
-      handleSearch: this.handleLoadInstance,
-      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
-      attrList: () => {
-        return this.attrList
-      },
-      attributes: () => {
-        return this.attributes
-      },
-      filterCompPreferenceSearch: () => {
-        return { ptv_id: this.treeViewId }
-      },
-    }
-  },
-  inject: ['reload'],
-  async created() {
-    // const res = await getSubscribeTreeView()
-    // this.subscribeTreeViewCiTypes = res
-    // await this.initPage()
-    await this.getTreeViews()
-  },
-  mounted() {
-    setTimeout(() => {
-      this.columnDrop()
-    }, 1000)
-    getCITypes().then((res) => {
-      this.citypes = res.ci_types
-    })
-  },
-  beforeDestroy() {
-    if (this.sortable) {
-      this.sortable.destroy()
-    }
-  },
-  methods: {
-    async getAttributeList() {
-      await getCITypeAttributesById(Number(this.typeId)).then((res) => {
-        this.attrList = res.attributes
-        this.attributes = res
-      })
-    },
-    async getTreeViews() {
-      this.subscribeTreeViewCiTypesLoading = true
-      const res = await getSubscribeTreeView()
-      this.subscribeTreeViewCiTypesLoading = false
-      this.subscribeTreeViewCiTypes = res
-      if (this.subscribeTreeViewCiTypes.length) {
-        this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
-        this.current = `${this.typeId}`
-        this.selectedRowKeys = []
-        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-        this.levels = res.find((item) => item.type_id.toString() === this.typeId.toString()).levels
-        await this.initPage()
-      }
-    },
-
-    async initPage() {
-      this.treeNode = null
-      this.treeKeys = []
-      this.levels = []
-      this.currentPage = 1
-      this.totalNumber = 0
-      this.instanceList = []
-      this.selectedRowKeys = []
-      this.expandedKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      await this.loadCurrentView()
-      await this.getAttributeList()
-      await this.loadAttrList()
-      await this.handleLoadInstance()
-    },
-
-    async loadCurrentView() {
-      if (this.subscribeTreeViewCiTypes.length) {
-        this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
-        this.current = String(this.typeId)
-        this.selectedRowKeys = []
-        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-        this.levels = this.subscribeTreeViewCiTypes.find(
-          (item) => item.type_id.toString() === this.typeId.toString()
-        ).levels
-      }
-    },
-
-    async loadAttrList() {
-      const res = await getSubscribeAttributes(this.typeId)
-      this.currentAttrList = res.attributes
-    },
-
-    async handleLoadInstance(params = {}) {
-      this.trigger = true
-      this.loading = true
-      let q = `_type:${this.typeId}`
-
-      if (this.treeKeys.length > 0) {
-        // 再增加垂直分类信息
-        this.treeKeys.forEach((item, idx) => {
-          q += `,${this.levels[idx].name}:${item}`
-        })
-      }
-      if (this.formatSearchFormData) {
-        q = `${q}${this.formatSearchFormData}`
-      }
-
-      const expression = this.$refs['search'] ? this.$refs['search'].expression || '' : ''
-
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-      const regSort = /(?<=sort=).+/g
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      if (exp) {
-        q = `${q},${exp}`
-      }
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-      if (fuzzySearch) {
-        q = `${q},*${fuzzySearch}*`
-      }
-      const payload = { q }
-
-      // 如果是表格点击的排序 以表格为准
-      let sort
-      const { sortByTable } = params
-      if (sortByTable) {
-        sort = sortByTable
-      } else {
-        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
-      }
-      payload.sort = sort
-
-      if (this.levels.length > this.treeKeys.length) {
-        // 增加切面信息
-        payload['facet'] = `${this.levels[this.treeKeys.length].name}`
-      }
-      payload['page'] = this.currentPage
-      payload['count'] = this.pageSize
-
-      try {
-        const res = await searchCI(payload)
-        this.totalNumber = res.numfound
-
-        if (Object.values(res.facet).length) {
-          this.wrapTreeData(res.facet)
-        }
-
-        const jsonAttrList = this.currentAttrList.filter((attr) => attr.value_type === '6')
-        this.instanceList = res['result'].map((item) => {
-          jsonAttrList.forEach(
-            (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
-          )
-          return { ..._.cloneDeep(item) }
-        })
-        this.initialInstanceList = _.cloneDeep(this.instanceList)
-        const treeViewsRight = document.getElementById('tree-views-right')
-        if (treeViewsRight) {
-          const width = treeViewsRight.clientWidth - 50
-          this.columns = getCITableColumns(res.result, this.currentAttrList, width)
-          this.columns.forEach((col) => {
-            if (col.is_password) {
-              this.initialPasswordValue[col.field] = ''
-              this.passwordValue[col.field] = ''
-            }
-          })
-        }
-      } catch (e) {
-        console.log(e)
-        this.$message.error(e)
-      } finally {
-        this.loading = false
-        this.$nextTick(() => {
-          this.trigger = false
-          if (this.$refs.xTable) {
-            this.$refs.xTable.getVxetableRef().refreshColumn()
-          }
-        })
-      }
-      this.newLoad = false
-    },
-
-    wrapTreeData(facet) {
-      // 切面
-      console.log('facet', facet)
-      const _treeData = Object.values(facet)[0].map((item) => {
-        return {
-          title: `${item[0]} (${item[1]})`,
-          key: this.treeKeys.join(this.keySplit) + this.keySplit + item[0],
-          isLeaf: this.levels.length - 1 === this.treeKeys.length,
-        }
-      })
-      if (this.treeNode === null && this.newLoad) {
-        this.treeData = _treeData
-        this.treeNode = { dataRef: {} }
-      } else {
-        if (!this.isSetDataNodes.includes(this.treeNode.dataRef.key)) {
-          this.treeNode.dataRef.children = _treeData
-          this.treeData = [...this.treeData]
-          this.isSetDataNodes.push(this.treeNode.dataRef.key)
-        }
-      }
-    },
-    onLoadData(treeNode) {
-      this.triggerSelect = false
-      return new Promise((resolve) => {
-        if (treeNode.dataRef.children) {
-          resolve()
-          return
-        }
-        this.treeKeys = treeNode.eventKey.split(this.keySplit).filter((item) => item !== '')
-        this.treeNode = treeNode
-        this.selectedRowKeys = []
-        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-        resolve()
-      })
-    },
-    handleChangeCi(value) {
-      if (value && Number(this.typeId) !== Number(value)) {
-        this.treeData = []
-        this.$router.history.push({
-          name: 'cmdb_tree_views_item',
-          params: { typeId: Number(value) },
-        })
-      } else {
-        this.newLoad = true
-        this.initPage()
-      }
-      this.isSetDataNodes = []
-    },
-    async reloadData() {
-      const queryParams = this.$refs['search'].queryParam || {}
-      this.formatSearchFormData = this.mergeQ(queryParams)
-      this.currentPage = 1
-      this.sortByTable = undefined
-      const xTable = this.$refs.xTable.getVxetableRef()
-      xTable.clearSort().then(() => {
-        this.handleLoadInstance()
-      })
-    },
-    mergeQ(params) {
-      let q = ''
-      Object.keys(params).forEach((key) => {
-        if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
-          if (typeof params[key] === 'object' && params[key] && params[key].length > 1) {
-            q += `,${key}:(${params[key].join(';')})`
-          } else if (params[key]) {
-            q += `,${key}:*${params[key]}*`
-          }
-        }
-      })
-      return q
-    },
-    cancelSubscribe(e, ciType) {
-      e.stopPropagation()
-      e.preventDefault()
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: (h) => (
-          <div>
-            确认要取消订阅 <span style={{ fontWeight: 700, color: 'black' }}>{ciType.alias || ciType.name}</span>？
-          </div>
-        ),
-        onOk() {
-          subscribeTreeView(ciType.type_id, []).then(() => {
-            that.$message.success('取消订阅成功')
-            if (Number(that.$route.params.typeId) === Number(ciType.type_id)) {
-              that.$router.history.push('/cmdb/treeviews')
-              that.reload()
-            } else {
-              that.reload()
-            }
-          })
-        },
-      })
-    },
-    subscribeSetting(e, ciType) {
-      e.stopPropagation()
-      e.preventDefault()
-      this.$refs.subscribeSetting.open(ciType)
-    },
-    columnDrop() {
-      this.$nextTick(() => {
-        const xTable = this.$refs.xTable.getVxetableRef()
-        this.sortable = Sortable.create(
-          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
-          {
-            handle: '.vxe-handle',
-            onChoose: () => {
-              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
-              const classNameList = []
-              header.childNodes.forEach((item) => {
-                classNameList.push(item.classList[1])
-              })
-              this.tableDragClassName = classNameList
-            },
-            onEnd: (params) => {
-              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
-              const { newIndex, oldIndex } = params
-              // 从tableDragClassName拿到colid
-              const fromColid = this.tableDragClassName[oldIndex]
-              const toColid = this.tableDragClassName[newIndex]
-              const fromColumn = xTable.getColumnById(fromColid)
-              const toColumn = xTable.getColumnById(toColid)
-              const fromIndex = xTable.getColumnIndex(fromColumn)
-              const toIndex = xTable.getColumnIndex(toColumn)
-              const tableColumn = xTable.getColumns()
-              const currRow = tableColumn.splice(fromIndex, 1)[0]
-              tableColumn.splice(toIndex, 0, currRow)
-              xTable.loadColumn(tableColumn)
-            },
-          }
-        )
-      })
-    },
-    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
-      let sortByTable
-      if (order === 'asc') {
-        sortByTable = property
-      } else if (order === 'desc') {
-        sortByTable = `-${property}`
-      }
-      this.sortByTable = sortByTable
-      this.currentPage = 1
-      this.handleLoadInstance({ sortByTable })
-    },
-    getChoiceValueStyle(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.style || {}
-      }
-      return {}
-    },
-    getChoiceValueIcon(col, colValue) {
-      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
-      if (_find) {
-        return _find[1]?.icon || {}
-      }
-      return {}
-    },
-    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
-      const { property } = column
-      const _find = this.currentAttrList.find((attr) => attr.name === property)
-      if (
-        _find &&
-        _find.option &&
-        _find.option.fontOptions &&
-        row[`${property}`] !== undefined &&
-        row[`${property}`] !== null
-      ) {
-        return { ..._find.option.fontOptions }
-      }
-    },
-    onNodeClick(keys, type) {
-      console.log(keys)
-      if (keys) {
-        const _tempKeys = keys.split(this.keySplit).filter((item) => item !== '')
-        if (_tempKeys.length === this.levels.length) {
-          this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-          this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-          this.selectedRowKeys = []
-        }
-        this.treeKeys = _tempKeys
-      }
-      const idx = this.expandedKeys.findIndex((item) => item === keys)
-      if (idx > -1) {
-        this.expandedKeys.splice(idx, 1)
-      } else {
-        this.expandedKeys.push(keys)
-      }
-      this.handleLoadInstance()
-    },
-    async refreshAfterEditAttrs() {
-      await this.loadAttrList()
-      await this.handleLoadInstance()
-    },
-    deleteCI(record) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          deleteCI(record.ci_id || record._id).then((res) => {
-            that.$message.success('删除成功！')
-            that.reload()
-          })
-        },
-      })
-    },
-    onSelectChange(e) {
-      /* const current = records.map((i) => i._id)
-
-      const cached = new Set(this.selectedRowKeys)
-      if (checked) {
-        current.forEach((i) => {
-          cached.add(i)
-        })
-      } else {
-        if (row) {
-          cached.delete(row._id)
-        } else {
-          this.instanceList.map((row) => {
-            cached.delete(row._id)
-          })
-        }
-      }
-      this.selectedRowKeys = Array.from(cached) */
-      const xTable = this.$refs.xTable.getVxetableRef()
-      const records = [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()]
-      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
-    },
-    setSelectRows() {
-      const cached = new Set(this.selectedRowKeys)
-      const loaded = new Set(this.instanceList.map((i) => i.ci_id || i._id))
-
-      const inter = Array.from(intersection(cached, loaded))
-
-      if (inter.length === this.instanceList.length) {
-        this.$refs['xTable'].getVxetableRef().setAllCheckboxRow(true)
-      } else {
-        const rows = []
-        inter.forEach((rid) => {
-          rows.push(this.$refs['xTable'].getVxetableRef().getRowById(rid))
-        })
-        this.$refs['xTable'].getVxetableRef().setCheckboxRow(rows, true)
-      }
-    },
-    onSelectRangeEnd({ records }) {
-      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
-    },
-    handleEditActived() {
-      const passwordCol = this.columns.filter((col) => col.is_password)
-      this.$nextTick(() => {
-        const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
-        const { row, column } = editRecord
-        if (passwordCol.length && this.lastEditCiId !== row._id) {
-          this.$nextTick(async () => {
-            for (let i = 0; i < passwordCol.length; i++) {
-              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
-                this.initialPasswordValue[passwordCol[i].field] = res.value
-                this.passwordValue[passwordCol[i].field] = res.value
-              })
-            }
-            this.isContinueCloseEdit = false
-            await this.$refs.xTable.getVxetableRef().clearEdit()
-            this.isContinueCloseEdit = true
-            this.$nextTick(() => {
-              this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
-            })
-          })
-        }
-        this.lastEditCiId = row._id
-      })
-    },
-    handleEditClose({ row, rowIndex, column }) {
-      if (!this.isContinueCloseEdit) {
-        return
-      }
-      const $table = this.$refs['xTable'].getVxetableRef()
-      const data = {}
-      this.columns.forEach((item) => {
-        if (
-          !(item.field in this.initialPasswordValue) &&
-          !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])
-        ) {
-          data[item.field] = row[item.field] ?? null
-        }
-      })
-      Object.keys(this.initialPasswordValue).forEach((key) => {
-        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
-          data[key] = this.passwordValue[key]
-          row[key] = this.passwordValue[key]
-        }
-      })
-      this.lastEditCiId = null
-      if (JSON.stringify(data) !== '{}') {
-        updateCI(row._id, data)
-          .then(() => {
-            this.$message.success('保存成功！')
-            const arr1 = this.treeViewsLevels.map((item) => item.name)
-            const arr2 = Object.keys(data)
-            const arr3 = arr1.filter((item) => {
-              return arr2.includes(item)
-            })
-            if (arr3.length) {
-              this.reload()
-              return
-            }
-            $table.reloadRow(row, null)
-            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
-            _initialInstanceList[rowIndex] = {
-              ..._initialInstanceList[rowIndex],
-              ...data,
-            }
-            this.initialInstanceList = _initialInstanceList
-          })
-          .catch((err) => {
-            console.log(err)
-            $table.revertData(row)
-          })
-      }
-      this.columns.forEach((col) => {
-        if (col.is_password) {
-          this.initialPasswordValue[col.field] = ''
-          this.passwordValue[col.field] = ''
-        }
-      })
-    },
-    jsonEditorOk(row, column, jsonData) {
-      // 后端写数据有快慢，不拉接口直接修改table的数据
-      // this.reloadData()
-      this.instanceList.forEach((item) => {
-        if (item._id === row._id) {
-          item[column.property] = JSON.stringify(jsonData)
-        }
-      })
-      this.$refs.xTable.getVxetableRef().refreshColumn()
-    },
-    getColumnsEditRender(col) {
-      const _editRender = {
-        ...col.editRender,
-      }
-      if (col.value_type === '6') {
-        _editRender.events = { focus: this.handleFocusJson }
-      }
-      return _editRender
-    },
-    handleFocusJson({ column, row }) {
-      this.$refs.jsonEditor.open(column, row)
-    },
-    async openBatchDownload() {
-      this.$refs.batchDownload.open({
-        preferenceAttrList: this.currentAttrList,
-        ciTypeName: this.$route.meta.title || this.$route.meta.name,
-      })
-    },
-    batchDownload({ filename, type, checkedKeys }) {
-      console.log(filename, type)
-      const jsonAttrList = []
-      checkedKeys.forEach((key) => {
-        const _find = this.currentAttrList.find((attr) => attr.name === key)
-        if (_find && _find.value_type === '6') jsonAttrList.push(key)
-      })
-      const data = _.cloneDeep([
-        ...this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords(),
-        ...this.$refs.xTable.getVxetableRef().getCheckboxRecords(true),
-      ])
-      this.$refs.xTable.getVxetableRef().exportData({
-        filename,
-        type,
-        columnFilterMethod({ column }) {
-          return checkedKeys.includes(column.property)
-        },
-        data: [
-          ...data.map((item) => {
-            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
-            return { ...item }
-          }),
-        ],
-      })
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-    },
-    batchDelete() {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认删除？',
-        onOk() {
-          that.batchDeleteAsync()
-        },
-      })
-    },
-    async batchDeleteAsync() {
-      let successNum = 0
-      let errorNum = 0
-      this.loading = true
-      this.loadTip = `正在删除...`
-      const floor = Math.ceil(this.selectedRowKeys.length / 6)
-      for (let i = 0; i < floor; i++) {
-        const itemList = this.selectedRowKeys.slice(6 * i, 6 * i + 6)
-        const promises = itemList.map((x) => deleteCI(x, false))
-        await Promise.allSettled(promises)
-          .then((res) => {
-            res.forEach((r) => {
-              if (r.status === 'fulfilled') {
-                successNum += 1
-              } else {
-                errorNum += 1
-              }
-            })
-          })
-          .finally(() => {
-            this.loadTip = `正在删除，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
-          })
-      }
-      this.loading = false
-      this.loadTip = ''
-      this.reload()
-    },
-    sumbitFromCreateInstance({ ci_id }) {
-      this.reload()
-    },
-    batchUpdateFromCreateInstance(values) {
-      const that = this
-      this.$confirm({
-        title: '警告',
-        content: '确认要批量修改吗 ?',
-        onOk() {
-          that.batchUpdateAsync(values)
-        },
-      })
-    },
-    async batchUpdateAsync(values) {
-      let successNum = 0
-      let errorNum = 0
-      this.loading = true
-      this.loadTip = `正在批量修改...`
-      const payload = {}
-      Object.keys(values).forEach((key) => {
-        if (values[key] || values[key] === 0) {
-          payload[key] = values[key]
-        }
-        // 字段值支持置空
-        // 目前存在字段值不支持置空，由后端返回
-        if (values[key] === undefined || values[key] === null) {
-          payload[key] = null
-        }
-      })
-      this.$refs.create.visible = false
-      for (let i = 0; i < this.selectedRowKeys.length; i++) {
-        await updateCI(this.selectedRowKeys[i], payload, false)
-          .then(() => {
-            successNum += 1
-          })
-          .catch(() => {
-            errorNum += 1
-          })
-          .finally(() => {
-            this.loadTip = `正在批量修改，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
-          })
-      }
-      this.loading = false
-      this.loadTip = ''
-      const arr1 = this.treeViewsLevels.map((item) => item.name)
-      const arr2 = Object.keys(values)
-      const arr3 = arr1.filter((item) => {
-        return arr2.includes(item)
-      })
-      if (arr3.length) {
-        this.reload()
-        return
-      }
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      this.handleLoadInstance()
-    },
-    onShowSizeChange(current, pageSize) {
-      this.pageSize = pageSize
-      this.currentPage = 1
-      this.handleLoadInstance()
-    },
-    getQAndSort() {
-      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
-      const expression = this.$refs['search'].expression || ''
-      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
-    },
-    setParamsFromPreferenceSearch(item) {
-      const { fuzzySearch, expression } = item.option
-      this.$refs.search.fuzzySearch = fuzzySearch
-      this.$refs.search.expression = expression
-      this.currentPage = 1
-      this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-      this.$nextTick(() => {
-        this.handleLoadInstance()
-      })
-    },
-    setPreferenceSearchCurrent(id = null) {
-      this.$refs.preferenceSearch.currentPreferenceSearch = id
-    },
-    copyExpression() {
-      const expression = this.$refs['search'].expression || ''
-      const fuzzySearch = this.$refs['search'].fuzzySearch
-
-      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
-
-      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
-      const text = `q=_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
-      this.$copyText(text)
-        .then(() => {
-          this.$message.success('复制成功！')
-        })
-        .catch(() => {
-          this.$message.error('复制失败！')
-        })
-    },
-  },
-}
-</script>
-
-<style lang="less">
-@import '../index.less';
-.tree-views {
-  width: 100%;
-  height: calc(100% - 32px);
-  .tree-views-left {
-    float: left;
-    position: relative;
-    background-color: #fff;
-    overflow: hidden;
-    width: 100%;
-    padding: 12px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    &:hover {
-      overflow: auto;
-    }
-    .ant-collapse-borderless {
-      background-color: #fff;
-    }
-    .ant-collapse-item:has(.custom-header-selected):not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header,
-    .ant-collapse-item-active:not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header {
-      background-color: #d6e4ff;
-    }
-    .ant-collapse-header {
-      padding: 8px 12px 4px;
-      &:hover {
-        background-color: #f0f5ff;
-      }
-      &:hover > .custom-header > .actions {
-        display: inherit;
-      }
-      .custom-header {
-        width: 100%;
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        align-items: center;
-        .tree-views-left-header-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 20px;
-          height: 20px;
-          border-radius: 2px;
-          box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
-          margin-right: 6px;
-          background-color: #fff;
-        }
-        .tree-views-left-header-name {
-          flex: 1;
-          font-weight: bold;
-          margin-left: 5px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .actions {
-          display: none;
-          margin-left: auto;
-        }
-        .action {
-          display: inline-block;
-          width: 22px;
-          text-align: center;
-          border-radius: 5px;
-          &:hover {
-            background-color: #cacaca;
-          }
-        }
-      }
-    }
-
-    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
-      white-space: nowrap;
-    }
-    .ant-tree li {
-      padding: 2px 0;
-    }
-    .ant-tree-switcher {
-      display: none;
-    }
-    .ant-tree-node-content-wrapper {
-      width: 100%;
-      padding: 4px 0;
-      display: inline-block;
-      height: 100%;
-      .ant-tree-title {
-        display: inline-block;
-        width: 100%;
-        padding: 0 6px;
-      }
-    }
-  }
-  .tree-views-right {
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    padding: 12px;
-    overflow: auto;
-    width: 100%;
-    border-radius: 15px;
-    .tree-views-right-bar {
-      display: inline-flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-bottom: 10px;
-      height: 36px;
-    }
-  }
-}
-</style>
+<template>
+  <div :style="{ marginBottom: '-24px' }">
+    <div v-if="!subscribeTreeViewCiTypesLoading && subscribeTreeViewCiTypes.length === 0">
+      <a-alert :message="$t('cmdb.tree.tips1')" banner></a-alert>
+    </div>
+    <div class="tree-views" v-else>
+      <div class="cmdb-views-header">
+        <span>
+          <span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
+          <span
+            @click="
+              () => {
+                $refs.metadataDrawer.open(typeId)
+              }
+            "
+            class="cmdb-views-header-metadata"
+          ><a-icon type="info-circle" />
+            {{ $t('cmdb.components.attributeDesc') }}
+          </span>
+        </span>
+        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')">{{
+          $t('create')
+        }}</a-button>
+      </div>
+      <SplitPane
+        :min="200"
+        :max="500"
+        :paneLengthPixel.sync="paneLengthPixel"
+        appName="cmdb-tree-views"
+        triggerColor="#F0F5FF"
+        :triggerLength="18"
+      >
+        <template #one>
+          <div class="tree-views-left" :style="{ height: `${windowHeight - 115}px` }">
+            <a-collapse
+              :activeKey="current"
+              accordion
+              @change="handleChangeCi"
+              :bordered="false"
+              :destroyInactivePanel="true"
+            >
+              <a-collapse-panel
+                v-for="ciType in subscribeTreeViewCiTypes"
+                :key="String(ciType.type_id)"
+                :showArrow="false"
+                :style="{
+                  borderRadius: '4px',
+                  marginBottom: '5px',
+                  border: 0,
+                  overflow: 'hidden',
+                  width: '100%',
+                }"
+              >
+                <div
+                  slot="header"
+                  :class="{
+                    'custom-header': true,
+                    'custom-header-selected': Number(ciType.type_id) === Number(typeId),
+                  }"
+                >
+                  <span class="tree-views-left-header-icon">
+                    <template v-if="ciType.icon">
+                      <img
+                        v-if="ciType.icon.split('$$')[2]"
+                        :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
+                        :style="{ maxHeight: '14px', maxWidth: '14px' }"
+                      />
+                      <ops-icon
+                        v-else
+                        :style="{
+                          color: ciType.icon.split('$$')[1],
+                          fontSize: '14px',
+                        }"
+                        :type="ciType.icon.split('$$')[0]"
+                      />
+                    </template>
+                    <span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
+                  </span>
+                  <span class="tree-views-left-header-name">{{ ciType.alias || ciType.name }}</span>
+                  <div class="actions">
+                    <a-tooltip :title="$t('cmdb.preference.cancelSub')">
+                      <div class="action" @click="(e) => cancelSubscribe(e, ciType)">
+                        <a-icon type="star" />
+                      </div>
+                    </a-tooltip>
+                    <a-tooltip :title="$t('cmdb.tree.subSettings')">
+                      <div class="action" @click="(e) => subscribeSetting(e, ciType)">
+                        <a-icon type="setting" />
+                      </div>
+                    </a-tooltip>
+                  </div>
+                </div>
+                <a-tree
+                  :selectedKeys="selectedKeys"
+                  :tree-data="treeData"
+                  :load-data="onLoadData"
+                  :expandedKeys="expandedKeys"
+                >
+                  <a-icon slot="switcherIcon" type="down" />
+                  <template #title="{ key: treeKey, title, isLeaf }">
+                    <TreeViewsNode
+                      :title="title"
+                      :treeKey="treeKey"
+                      :levels="levels"
+                      :isLeaf="isLeaf"
+                      @onNodeClick="onNodeClick"
+                    />
+                  </template>
+                </a-tree>
+              </a-collapse-panel>
+            </a-collapse>
+          </div>
+        </template>
+        <template #two>
+          <div class="tree-views-right" id="tree-views-right" :style="{ height: `${windowHeight - 115}px` }">
+            <SearchForm
+              ref="search"
+              @refresh="reloadData"
+              :preferenceAttrList="currentAttrList"
+              :typeId="Number(typeId)"
+              @copyExpression="copyExpression"
+            />
+            <div class="tree-views-right-bar">
+              <PreferenceSearch
+                ref="preferenceSearch"
+                @getQAndSort="getQAndSort"
+                @setParamsFromPreferenceSearch="setParamsFromPreferenceSearch"
+              />
+              <div class="ops-list-batch-action">
+                <template v-if="selectedRowKeys.length">
+                  <span @click="$refs.create.handleOpen(true, 'update')">{{ $t('update') }}</span>
+                  <a-divider type="vertical" />
+                  <span @click="openBatchDownload">{{ $t('download') }}</span>
+                  <a-divider type="vertical" />
+                  <span @click="batchDelete">{{ $t('delete') }}</span>
+                  <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
+                </template>
+              </div>
+            </div>
+            <ops-table
+              :id="`cmdb-tree-${typeId}`"
+              border
+              ref="xTable"
+              size="small"
+              keep-source
+              :loading="loading"
+              :data="instanceList"
+              highlight-hover-row
+              show-overflow
+              show-header-overflow
+              row-id="_id"
+              resizable
+              :row-key="true"
+              :column-key="true"
+              :sort-config="{ remote: true, trigger: 'cell' }"
+              @sort-change="handleSortCol"
+              :cell-style="getCellStyle"
+              :scroll-y="{ enabled: true, gt: 20 }"
+              :scroll-x="{ enabled: true, gt: 0 }"
+              :height="`${windowHeight - 252}px`"
+              @checkbox-change="onSelectChange"
+              @checkbox-all="onSelectChange"
+              @checkbox-range-end="onSelectRangeEnd"
+              :checkbox-config="{ reserve: true, highlight: true, range: true }"
+              @edit-closed="handleEditClose"
+              @edit-actived="handleEditActived"
+              :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
+              class="ops-unstripe-table"
+              :style="{ margin: '0 -12px' }"
+              :custom-config="{ storage: true }"
+            >
+              <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
+              <vxe-table-column
+                v-for="(col, index) in columns"
+                :key="`${col.field}_${index}`"
+                :title="col.title"
+                :field="col.field"
+                :width="col.width"
+                :sortable="col.sortable"
+                :edit-render="getColumnsEditRender(col)"
+                :cell-type="col.value_type === '2' ? 'string' : 'auto'"
+                :fixed="col.is_fixed ? 'left' : ''"
+              >
+                <template #header>
+                  <span class="vxe-handle">
+                    <OpsMoveIcon
+                      style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 12px"
+                    />
+                    {{ col.title }}</span
+                  >
+                </template>
+                <template v-if="col.is_choice || col.is_password || col.is_list" #edit="{ row }">
+                  <vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
+                  <a-select
+                    :getPopupContainer="(trigger) => trigger.parentElement"
+                    :style="{ width: '100%', height: '32px' }"
+                    v-model="row[col.field]"
+                    :placeholder="$t('placeholder2')"
+                    v-if="col.is_choice"
+                    :showArrow="false"
+                    :mode="col.is_list ? 'multiple' : 'default'"
+                    class="ci-table-edit-select"
+                    allowClear
+                  >
+                    <a-select-option
+                      :value="choice[0]"
+                      :key="'edit_' + col.field + idx"
+                      v-for="(choice, idx) in col.filters"
+                    >
+                      <span
+                        :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }"
+                      >
+                        <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
+                          <img
+                            v-if="choice[1].icon.id && choice[1].icon.url"
+                            :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
+                            :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                          />
+                          <ops-icon
+                            v-else
+                            :style="{ color: choice[1].icon.color, marginRight: '5px' }"
+                            :type="choice[1].icon.name"
+                          />
+                        </template>
+                        {{ choice[0] }}
+                      </span>
+                    </a-select-option>
+                  </a-select>
+                  <a-select
+                    :getPopupContainer="(trigger) => trigger.parentElement"
+                    :style="{ width: '100%', height: '32px' }"
+                    v-model="row[col.field]"
+                    :placeholder="$t('placeholder2')"
+                    v-else-if="col.is_list"
+                    :showArrow="false"
+                    mode="tags"
+                    class="ci-table-edit-select"
+                    allowClear
+                  >
+                  </a-select>
+                </template>
+                <template
+                  v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
+                  #default="{row}"
+                >
+                  <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
+                  <a
+                    v-else-if="col.is_link && row[col.field]"
+                    :href="
+                      row[col.field].startsWith('http') || row[col.field].startsWith('https')
+                        ? `${row[col.field]}`
+                        : `http://${row[col.field]}`
+                    "
+                    target="_blank"
+                  >{{ row[col.field] }}</a
+                  >
+                  <PasswordField
+                    v-else-if="col.is_password && row[col.field]"
+                    :ci_id="row._id"
+                    :attr_id="col.attr_id"
+                  ></PasswordField>
+                  <template v-else-if="col.is_choice">
+                    <template v-if="col.is_list">
+                      <span
+                        v-for="value in row[col.field]"
+                        :key="value"
+                        :style="{
+                          borderRadius: '4px',
+                          padding: '1px 5px',
+                          margin: '2px',
+                          ...getChoiceValueStyle(col, value),
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                        }"
+                      >
+                        <img
+                          v-if="getChoiceValueIcon(col, value).id && getChoiceValueIcon(col, value).url"
+                          :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, value).url}`"
+                          :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                        />
+                        <ops-icon
+                          v-else
+                          :style="{ color: getChoiceValueIcon(col, value).color, marginRight: '5px' }"
+                          :type="getChoiceValueIcon(col, value).name"
+                        />{{ value }}</span
+                      >
+                    </template>
+                    <span
+                      v-else-if="row[col.field]"
+                      :style="{
+                        borderRadius: '4px',
+                        padding: '1px 5px',
+                        margin: '2px 0',
+                        ...getChoiceValueStyle(col, row[col.field]),
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                      }"
+                    >
+                      <img
+                        v-if="getChoiceValueIcon(col, row[col.field]).id && getChoiceValueIcon(col, row[col.field]).url"
+                        :src="`/api/common-setting/v1/file/${getChoiceValueIcon(col, row[col.field]).url}`"
+                        :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
+                      />
+                      <ops-icon
+                        v-else
+                        :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
+                        :type="getChoiceValueIcon(col, row[col.field]).name"
+                      />{{ row[col.field] }}</span
+                    >
+                  </template>
+                </template>
+              </vxe-table-column>
+              <vxe-table-column align="left" field="operate" fixed="right" width="120">
+                <template #header>
+                  <span>{{ $t('operation') }}</span>
+                  <EditAttrsPopover :typeId="Number(typeId)" class="operation-icon" @refresh="refreshAfterEditAttrs" />
+                </template>
+                <template #default="{ row }">
+                  <a-space>
+                    <a @click="$refs.detail.create(row.ci_id || row._id)">
+                      <a-icon type="unordered-list" />
+                    </a>
+                    <a-tooltip :title="$t('cmdb.ci.addRelation')">
+                      <a @click="$refs.detail.create(row.ci_id || row._id, 'tab_2', '2')">
+                        <a-icon type="retweet" />
+                      </a>
+                    </a-tooltip>
+                    <template>
+                      <a-tooltip :title="$t('cmdb.ciType.deleteInstance')">
+                        <a @click="deleteCI(row)" :style="{ color: 'red' }">
+                          <a-icon type="delete" />
+                        </a>
+                      </a-tooltip>
+                    </template>
+                  </a-space>
+                </template>
+              </vxe-table-column>
+              <template #empty>
+                <div v-if="loading" style="height: 200px; line-height: 200px">{{ $t('loading') }}</div>
+                <div v-else>
+                  <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
+                  <div>{{ $t('noData') }}</div>
+                </div>
+              </template>
+              <template #loading>
+                <div style="height: 200px; line-height: 200px">{{ loadTip || $t('loading') }}</div>
+              </template>
+            </ops-table>
+            <div :style="{ textAlign: 'right', marginTop: '4px' }">
+              <a-pagination
+                :showSizeChanger="true"
+                :current="currentPage"
+                size="small"
+                :total="totalNumber"
+                show-quick-jumper
+                :page-size="pageSize"
+                :page-size-options="pageSizeOptions"
+                :show-total="
+                  (total, range) =>
+                    $t('pagination.total', {
+                      range0: range[0],
+                      range1: range[1],
+                      total,
+                    })
+                "
+                :style="{ alignSelf: 'flex-end' }"
+                @showSizeChange="onShowSizeChange"
+                @change="
+                  (page) => {
+                    currentPage = page
+                    handleLoadInstance({ sortByTable })
+                  }
+                "
+              >
+                <template slot="buildOptionText" slot-scope="props">
+                  <span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
+                  <span v-if="props.value === '100000'">{{ $t('all') }}</span>
+                </template>
+              </a-pagination>
+            </div>
+          </div>
+        </template>
+      </SplitPane>
+    </div>
+    <SubscribeSetting
+      ref="subscribeSetting"
+      @reload="
+        () => {
+          reload()
+        }
+      "
+    />
+    <ci-detail ref="detail" :typeId="Number(typeId)" :treeViewsLevels="treeViewsLevels" />
+    <create-instance-form
+      ref="create"
+      :typeIdFromRelation="Number(typeId)"
+      @reload="sumbitFromCreateInstance"
+      @submit="batchUpdateFromCreateInstance"
+    />
+    <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
+    <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
+    <MetadataDrawer ref="metadataDrawer" />
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-useless-escape */
+import _ from 'lodash'
+import Sortable from 'sortablejs'
+import { getSubscribeTreeView, getSubscribeAttributes, subscribeTreeView } from '@/modules/cmdb/api/preference'
+import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
+import { getCITypes } from '@/modules/cmdb/api/CIType'
+import { getCITableColumns } from '../../utils/helper'
+import SearchForm from '../../components/searchForm/SearchForm.vue'
+import SubscribeSetting from '../../components/subscribeSetting/subscribeSetting'
+import PasswordField from '../../components/passwordField/index.vue'
+import SplitPane from '@/components/SplitPane'
+import TreeViewsNode from './modules/treeViewsNode.vue'
+import EditAttrsPopover from '../ci/modules/editAttrsPopover.vue'
+import CiDetail from '../ci/modules/CiDetail'
+import CreateInstanceForm from '../ci/modules/CreateInstanceForm'
+import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import JsonEditor from '../../components/JsonEditor/jsonEditor.vue'
+import BatchDownload from '../../components/batchDownload/batchDownload.vue'
+import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
+import MetadataDrawer from '../ci/modules/MetadataDrawer.vue'
+import { intersection } from '@/utils/functions/set'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
+import { getAttrPassword } from '../../api/CITypeAttr'
+
+export default {
+  name: 'TreeViews',
+  components: {
+    SearchForm,
+    SubscribeSetting,
+    PasswordField,
+    SplitPane,
+    TreeViewsNode,
+    EditAttrsPopover,
+    CiDetail,
+    CreateInstanceForm,
+    JsonEditor,
+    BatchDownload,
+    PreferenceSearch,
+    MetadataDrawer,
+    OpsMoveIcon,
+  },
+  data() {
+    return {
+      keySplit: '---',
+      treeData: [],
+      treeNode: null,
+      treeKeys: [],
+      subscribeTreeViewCiTypes: [],
+      subscribeTreeViewCiTypesLoading: false,
+      levels: [],
+      typeId: null,
+      instanceList: [],
+      columns: [],
+      loading: false,
+      loadTip: '',
+      pageSizeOptions: ['50', '100', '200', '100000'],
+      pageSize: 50,
+      currentPage: 1,
+      totalNumber: 0,
+      current: '', // 当前页面的type_id
+      currentAttrList: [],
+      trigger: false,
+      newLoad: true,
+      formatSearchFormData: '',
+      sortByTable: undefined,
+      paneLengthPixel: 205,
+      expandedKeys: [],
+      attrList: [],
+      attributes: {},
+      selectedRowKeys: [],
+      // 对照是否编辑
+      initialInstanceList: [],
+      citypes: [],
+      // 表格拖拽的参数
+      tableDragClassName: [],
+      // 已经设置过data的node
+      isSetDataNodes: [],
+
+      initialPasswordValue: {},
+      passwordValue: {},
+      lastEditCiId: null,
+      isContinueCloseEdit: true,
+    }
+  },
+
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+    selectedKeys() {
+      if (this.treeKeys.length <= 1) {
+        return this.treeKeys.map((item) => `${this.keySplit}${item}`)
+      }
+      return [this.treeKeys.join(this.keySplit)]
+    },
+    treeViewsLevels() {
+      // 当前订阅的树型视图的字段
+      const _find = this.subscribeTreeViewCiTypes.find((item) => item.type_id === Number(this.typeId))
+      return _find?.levels || []
+    },
+    treeViewId() {
+      // 当前页面的id
+      const _find = this.subscribeTreeViewCiTypes.find((item) => item.type_id === Number(this.typeId))
+      return _find?.id
+    },
+    isCheckboxFixed() {
+      const idx = this.columns.findIndex((item) => item.is_fixed)
+      return idx > -1
+    },
+    currentCiTypeName() {
+      const _find = this.citypes.find((item) => Number(item.id) === Number(this.typeId))
+      return _find?.alias || _find?.name || ''
+    },
+  },
+  watch: {
+    '$route.path': function(newPath, oldPath) {
+      this.newLoad = true
+      this.typeId = this.$route.params.typeId
+      this.initPage()
+    },
+  },
+  provide() {
+    return {
+      handleSearch: this.handleLoadInstance,
+      setPreferenceSearchCurrent: this.setPreferenceSearchCurrent,
+      attrList: () => {
+        return this.attrList
+      },
+      attributes: () => {
+        return this.attributes
+      },
+      filterCompPreferenceSearch: () => {
+        return { ptv_id: this.treeViewId }
+      },
+    }
+  },
+  inject: ['reload'],
+  async created() {
+    await this.getTreeViews()
+  },
+  mounted() {
+    setTimeout(() => {
+      this.columnDrop()
+    }, 1000)
+    getCITypes().then((res) => {
+      this.citypes = res.ci_types
+    })
+  },
+  beforeDestroy() {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+  },
+  methods: {
+    async getAttributeList() {
+      await getCITypeAttributesById(Number(this.typeId)).then((res) => {
+        this.attrList = res.attributes
+        this.attributes = res
+      })
+    },
+    async getTreeViews() {
+      this.subscribeTreeViewCiTypesLoading = true
+      const res = await getSubscribeTreeView()
+      this.subscribeTreeViewCiTypesLoading = false
+      this.subscribeTreeViewCiTypes = res
+      if (this.subscribeTreeViewCiTypes.length) {
+        this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
+        this.current = `${this.typeId}`
+        this.selectedRowKeys = []
+        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+        this.levels = res.find((item) => item.type_id.toString() === this.typeId.toString()).levels
+        await this.initPage()
+      }
+    },
+
+    async initPage() {
+      this.treeNode = null
+      this.treeKeys = []
+      this.levels = []
+      this.currentPage = 1
+      this.totalNumber = 0
+      this.instanceList = []
+      this.selectedRowKeys = []
+      this.expandedKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      await this.loadCurrentView()
+      await this.getAttributeList()
+      await this.loadAttrList()
+      await this.handleLoadInstance()
+    },
+
+    async loadCurrentView() {
+      if (this.subscribeTreeViewCiTypes.length) {
+        this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
+        this.current = String(this.typeId)
+        this.selectedRowKeys = []
+        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+        this.levels = this.subscribeTreeViewCiTypes.find(
+          (item) => item.type_id.toString() === this.typeId.toString()
+        ).levels
+      }
+    },
+
+    async loadAttrList() {
+      const res = await getSubscribeAttributes(this.typeId)
+      this.currentAttrList = res.attributes
+    },
+
+    async handleLoadInstance(params = {}) {
+      this.trigger = true
+      this.loading = true
+      let q = `_type:${this.typeId}`
+
+      if (this.treeKeys.length > 0) {
+        // 再增加垂直分类信息
+        this.treeKeys.forEach((item, idx) => {
+          q += `,${this.levels[idx].name}:${item}`
+        })
+      }
+      if (this.formatSearchFormData) {
+        q = `${q}${this.formatSearchFormData}`
+      }
+
+      const expression = this.$refs['search'] ? this.$refs['search'].expression || '' : ''
+
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+      const regSort = /(?<=sort=).+/g
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      if (exp) {
+        q = `${q},${exp}`
+      }
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+      if (fuzzySearch) {
+        q = `${q},*${fuzzySearch}*`
+      }
+      const payload = { q }
+
+      // 如果是表格点击的排序 以表格为准
+      let sort
+      const { sortByTable } = params
+      if (sortByTable) {
+        sort = sortByTable
+      } else {
+        sort = expression.match(regSort) ? expression.match(regSort)[0] : undefined
+      }
+      payload.sort = sort
+
+      if (this.levels.length > this.treeKeys.length) {
+        // 增加切面信息
+        payload['facet'] = `${this.levels[this.treeKeys.length].name}`
+      }
+      payload['page'] = this.currentPage
+      payload['count'] = this.pageSize
+
+      try {
+        const res = await searchCI(payload)
+        this.totalNumber = res.numfound
+
+        if (Object.values(res.facet).length) {
+          this.wrapTreeData(res.facet)
+        }
+
+        const jsonAttrList = this.currentAttrList.filter((attr) => attr.value_type === '6')
+        this.instanceList = res['result'].map((item) => {
+          jsonAttrList.forEach(
+            (jsonAttr) => (item[jsonAttr.name] = item[jsonAttr.name] ? JSON.stringify(item[jsonAttr.name]) : '')
+          )
+          return { ..._.cloneDeep(item) }
+        })
+        this.initialInstanceList = _.cloneDeep(this.instanceList)
+        const treeViewsRight = document.getElementById('tree-views-right')
+        if (treeViewsRight) {
+          const width = treeViewsRight.clientWidth - 50
+          this.columns = getCITableColumns(res.result, this.currentAttrList, width)
+          this.columns.forEach((col) => {
+            if (col.is_password) {
+              this.initialPasswordValue[col.field] = ''
+              this.passwordValue[col.field] = ''
+            }
+          })
+        }
+      } catch (e) {
+        console.log(e)
+        this.$message.error(e)
+      } finally {
+        this.loading = false
+        this.$nextTick(() => {
+          this.trigger = false
+          if (this.$refs.xTable) {
+            this.$refs.xTable.getVxetableRef().refreshColumn()
+          }
+        })
+      }
+      this.newLoad = false
+    },
+
+    wrapTreeData(facet) {
+      // 切面
+      console.log('facet', facet)
+      const _treeData = Object.values(facet)[0].map((item) => {
+        return {
+          title: `${item[0]} (${item[1]})`,
+          key: this.treeKeys.join(this.keySplit) + this.keySplit + item[0],
+          isLeaf: this.levels.length - 1 === this.treeKeys.length,
+        }
+      })
+      if (this.treeNode === null && this.newLoad) {
+        this.treeData = _treeData
+        this.treeNode = { dataRef: {} }
+      } else {
+        if (!this.isSetDataNodes.includes(this.treeNode.dataRef.key)) {
+          this.treeNode.dataRef.children = _treeData
+          this.treeData = [...this.treeData]
+          this.isSetDataNodes.push(this.treeNode.dataRef.key)
+        }
+      }
+    },
+    onLoadData(treeNode) {
+      this.triggerSelect = false
+      return new Promise((resolve) => {
+        if (treeNode.dataRef.children) {
+          resolve()
+          return
+        }
+        this.treeKeys = treeNode.eventKey.split(this.keySplit).filter((item) => item !== '')
+        this.treeNode = treeNode
+        this.selectedRowKeys = []
+        this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+        this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+        resolve()
+      })
+    },
+    handleChangeCi(value) {
+      if (value && Number(this.typeId) !== Number(value)) {
+        this.treeData = []
+        this.$router.history.push({
+          name: 'cmdb_tree_views_item',
+          params: { typeId: Number(value) },
+        })
+      } else {
+        this.newLoad = true
+        this.initPage()
+      }
+      this.isSetDataNodes = []
+    },
+    async reloadData() {
+      const queryParams = this.$refs['search'].queryParam || {}
+      this.formatSearchFormData = this.mergeQ(queryParams)
+      this.currentPage = 1
+      this.sortByTable = undefined
+      const xTable = this.$refs.xTable.getVxetableRef()
+      xTable.clearSort().then(() => {
+        this.handleLoadInstance()
+      })
+    },
+    mergeQ(params) {
+      let q = ''
+      Object.keys(params).forEach((key) => {
+        if (!['pageNo', 'pageSize', 'sortField', 'sortOrder'].includes(key) && params[key] + '' !== '') {
+          if (typeof params[key] === 'object' && params[key] && params[key].length > 1) {
+            q += `,${key}:(${params[key].join(';')})`
+          } else if (params[key]) {
+            q += `,${key}:*${params[key]}*`
+          }
+        }
+      })
+      return q
+    },
+    cancelSubscribe(e, ciType) {
+      e.stopPropagation()
+      e.preventDefault()
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: (h) => (
+          <div>{that.$t('cmdb.preference.confirmcancelSub2', { name: ciType.alias || ciType.name })}</div>
+        ),
+        onOk() {
+          subscribeTreeView(ciType.type_id, []).then(() => {
+            that.$message.success(that.$t('cmdb.preference.cancelSubSuccess'))
+            if (Number(that.$route.params.typeId) === Number(ciType.type_id)) {
+              that.$router.history.push('/cmdb/treeviews')
+              that.reload()
+            } else {
+              that.reload()
+            }
+          })
+        },
+      })
+    },
+    subscribeSetting(e, ciType) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.$refs.subscribeSetting.open(ciType)
+    },
+    columnDrop() {
+      this.$nextTick(() => {
+        const xTable = this.$refs.xTable.getVxetableRef()
+        this.sortable = Sortable.create(
+          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
+          {
+            handle: '.vxe-handle',
+            onChoose: () => {
+              const header = xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row')
+              const classNameList = []
+              header.childNodes.forEach((item) => {
+                classNameList.push(item.classList[1])
+              })
+              this.tableDragClassName = classNameList
+            },
+            onEnd: (params) => {
+              // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
+              const { newIndex, oldIndex } = params
+              // 从tableDragClassName拿到colid
+              const fromColid = this.tableDragClassName[oldIndex]
+              const toColid = this.tableDragClassName[newIndex]
+              const fromColumn = xTable.getColumnById(fromColid)
+              const toColumn = xTable.getColumnById(toColid)
+              const fromIndex = xTable.getColumnIndex(fromColumn)
+              const toIndex = xTable.getColumnIndex(toColumn)
+              const tableColumn = xTable.getColumns()
+              const currRow = tableColumn.splice(fromIndex, 1)[0]
+              tableColumn.splice(toIndex, 0, currRow)
+              xTable.loadColumn(tableColumn)
+            },
+          }
+        )
+      })
+    },
+    handleSortCol({ column, property, order, sortBy, sortList, $event }) {
+      let sortByTable
+      if (order === 'asc') {
+        sortByTable = property
+      } else if (order === 'desc') {
+        sortByTable = `-${property}`
+      }
+      this.sortByTable = sortByTable
+      this.currentPage = 1
+      this.handleLoadInstance({ sortByTable })
+    },
+    getChoiceValueStyle(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.style || {}
+      }
+      return {}
+    },
+    getChoiceValueIcon(col, colValue) {
+      const _find = col.filters.find((item) => String(item[0]) === String(colValue))
+      if (_find) {
+        return _find[1]?.icon || {}
+      }
+      return {}
+    },
+    getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
+      const { property } = column
+      const _find = this.currentAttrList.find((attr) => attr.name === property)
+      if (
+        _find &&
+        _find.option &&
+        _find.option.fontOptions &&
+        row[`${property}`] !== undefined &&
+        row[`${property}`] !== null
+      ) {
+        return { ..._find.option.fontOptions }
+      }
+    },
+    onNodeClick(keys, type) {
+      console.log(keys)
+      if (keys) {
+        const _tempKeys = keys.split(this.keySplit).filter((item) => item !== '')
+        if (_tempKeys.length === this.levels.length) {
+          this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+          this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+          this.selectedRowKeys = []
+        }
+        this.treeKeys = _tempKeys
+      }
+      const idx = this.expandedKeys.findIndex((item) => item === keys)
+      if (idx > -1) {
+        this.expandedKeys.splice(idx, 1)
+      } else {
+        this.expandedKeys.push(keys)
+      }
+      this.handleLoadInstance()
+    },
+    async refreshAfterEditAttrs() {
+      await this.loadAttrList()
+      await this.handleLoadInstance()
+    },
+    deleteCI(record) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          deleteCI(record.ci_id || record._id).then((res) => {
+            that.$message.success(that.$t('deleteSuccess'))
+            that.reload()
+          })
+        },
+      })
+    },
+    onSelectChange(e) {
+      const xTable = this.$refs.xTable.getVxetableRef()
+      const records = [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()]
+      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
+    },
+    setSelectRows() {
+      const cached = new Set(this.selectedRowKeys)
+      const loaded = new Set(this.instanceList.map((i) => i.ci_id || i._id))
+
+      const inter = Array.from(intersection(cached, loaded))
+
+      if (inter.length === this.instanceList.length) {
+        this.$refs['xTable'].getVxetableRef().setAllCheckboxRow(true)
+      } else {
+        const rows = []
+        inter.forEach((rid) => {
+          rows.push(this.$refs['xTable'].getVxetableRef().getRowById(rid))
+        })
+        this.$refs['xTable'].getVxetableRef().setCheckboxRow(rows, true)
+      }
+    },
+    onSelectRangeEnd({ records }) {
+      this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
+    },
+    handleEditActived() {
+      const passwordCol = this.columns.filter((col) => col.is_password)
+      this.$nextTick(() => {
+        const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
+        const { row, column } = editRecord
+        if (passwordCol.length && this.lastEditCiId !== row._id) {
+          this.$nextTick(async () => {
+            for (let i = 0; i < passwordCol.length; i++) {
+              await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
+                this.initialPasswordValue[passwordCol[i].field] = res.value
+                this.passwordValue[passwordCol[i].field] = res.value
+              })
+            }
+            this.isContinueCloseEdit = false
+            await this.$refs.xTable.getVxetableRef().clearEdit()
+            this.isContinueCloseEdit = true
+            this.$nextTick(() => {
+              this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
+            })
+          })
+        }
+        this.lastEditCiId = row._id
+      })
+    },
+    handleEditClose({ row, rowIndex, column }) {
+      if (!this.isContinueCloseEdit) {
+        return
+      }
+      const $table = this.$refs['xTable'].getVxetableRef()
+      const data = {}
+      this.columns.forEach((item) => {
+        if (
+          !(item.field in this.initialPasswordValue) &&
+          !_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])
+        ) {
+          data[item.field] = row[item.field] ?? null
+        }
+      })
+      Object.keys(this.initialPasswordValue).forEach((key) => {
+        if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
+          data[key] = this.passwordValue[key]
+          row[key] = this.passwordValue[key]
+        }
+      })
+      this.lastEditCiId = null
+      if (JSON.stringify(data) !== '{}') {
+        updateCI(row._id, data)
+          .then(() => {
+            this.$message.success(this.$t('saveSuccess'))
+            const arr1 = this.treeViewsLevels.map((item) => item.name)
+            const arr2 = Object.keys(data)
+            const arr3 = arr1.filter((item) => {
+              return arr2.includes(item)
+            })
+            if (arr3.length) {
+              this.reload()
+              return
+            }
+            $table.reloadRow(row, null)
+            const _initialInstanceList = _.cloneDeep(this.initialInstanceList)
+            _initialInstanceList[rowIndex] = {
+              ..._initialInstanceList[rowIndex],
+              ...data,
+            }
+            this.initialInstanceList = _initialInstanceList
+          })
+          .catch((err) => {
+            console.log(err)
+            $table.revertData(row)
+          })
+      }
+      this.columns.forEach((col) => {
+        if (col.is_password) {
+          this.initialPasswordValue[col.field] = ''
+          this.passwordValue[col.field] = ''
+        }
+      })
+    },
+    jsonEditorOk(row, column, jsonData) {
+      // 后端写数据有快慢，不拉接口直接修改table的数据
+      // this.reloadData()
+      this.instanceList.forEach((item) => {
+        if (item._id === row._id) {
+          item[column.property] = JSON.stringify(jsonData)
+        }
+      })
+      this.$refs.xTable.getVxetableRef().refreshColumn()
+    },
+    getColumnsEditRender(col) {
+      const _editRender = {
+        ...col.editRender,
+      }
+      if (col.value_type === '6') {
+        _editRender.events = { focus: this.handleFocusJson }
+      }
+      return _editRender
+    },
+    handleFocusJson({ column, row }) {
+      this.$refs.jsonEditor.open(column, row)
+    },
+    async openBatchDownload() {
+      this.$refs.batchDownload.open({ preferenceAttrList: this.currentAttrList, ciTypeName: this.currentCiTypeName })
+    },
+    batchDownload({ filename, type, checkedKeys }) {
+      console.log(filename, type)
+      const jsonAttrList = []
+      checkedKeys.forEach((key) => {
+        const _find = this.currentAttrList.find((attr) => attr.name === key)
+        if (_find && _find.value_type === '6') jsonAttrList.push(key)
+      })
+      const data = _.cloneDeep([
+        ...this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords(),
+        ...this.$refs.xTable.getVxetableRef().getCheckboxRecords(true),
+      ])
+      this.$refs.xTable.getVxetableRef().exportData({
+        filename,
+        type,
+        columnFilterMethod({ column }) {
+          return checkedKeys.includes(column.property)
+        },
+        data: [
+          ...data.map((item) => {
+            jsonAttrList.forEach((jsonAttr) => (item[jsonAttr] = item[jsonAttr] ? JSON.stringify(item[jsonAttr]) : ''))
+            return { ...item }
+          }),
+        ],
+      })
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+    },
+    batchDelete() {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('confirmDelete'),
+        onOk() {
+          that.batchDeleteAsync()
+        },
+      })
+    },
+    async batchDeleteAsync() {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = this.$t('cmdb.ci.batchDeleting')
+      const floor = Math.ceil(this.selectedRowKeys.length / 6)
+      for (let i = 0; i < floor; i++) {
+        const itemList = this.selectedRowKeys.slice(6 * i, 6 * i + 6)
+        const promises = itemList.map((x) => deleteCI(x, false))
+        await Promise.allSettled(promises)
+          .then((res) => {
+            res.forEach((r) => {
+              if (r.status === 'fulfilled') {
+                successNum += 1
+              } else {
+                errorNum += 1
+              }
+            })
+          })
+          .finally(() => {
+            this.loadTip = this.$t('cmdb.ci.batchDeleting2', {
+              total: this.selectedRowKeys.length,
+              successNum: successNum,
+              errorNum: errorNum,
+            })
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.reload()
+    },
+    sumbitFromCreateInstance({ ci_id }) {
+      this.reload()
+    },
+    batchUpdateFromCreateInstance(values) {
+      const that = this
+      this.$confirm({
+        title: that.$t('warning'),
+        content: that.$t('cmdb.ci.batchUpdateConfirm'),
+        onOk() {
+          that.batchUpdateAsync(values)
+        },
+      })
+    },
+    async batchUpdateAsync(values) {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = this.$t('cmdb.ci.batchUpdateInProgress')
+      const payload = {}
+      Object.keys(values).forEach((key) => {
+        if (values[key] || values[key] === 0) {
+          payload[key] = values[key]
+        }
+        // 字段值支持置空
+        // 目前存在字段值不支持置空，由后端返回
+        if (values[key] === undefined || values[key] === null) {
+          payload[key] = null
+        }
+      })
+      this.$refs.create.visible = false
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await updateCI(this.selectedRowKeys[i], payload, false)
+          .then(() => {
+            successNum += 1
+          })
+          .catch(() => {
+            errorNum += 1
+          })
+          .finally(() => {
+            this.loadTip = this.$t('cmdb.ci.batchUpdateInProgress2', {
+              total: this.selectedRowKeys.length,
+              successNum: successNum,
+              errorNum: errorNum,
+            })
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      const arr1 = this.treeViewsLevels.map((item) => item.name)
+      const arr2 = Object.keys(values)
+      const arr3 = arr1.filter((item) => {
+        return arr2.includes(item)
+      })
+      if (arr3.length) {
+        this.reload()
+        return
+      }
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.handleLoadInstance()
+    },
+    onShowSizeChange(current, pageSize) {
+      this.pageSize = pageSize
+      this.currentPage = 1
+      this.handleLoadInstance()
+    },
+    getQAndSort() {
+      const fuzzySearch = this.$refs['search'].fuzzySearch || ''
+      const expression = this.$refs['search'].expression || ''
+      this.$refs.preferenceSearch.savePreference({ fuzzySearch, expression })
+    },
+    setParamsFromPreferenceSearch(item) {
+      const { fuzzySearch, expression } = item.option
+      this.$refs.search.fuzzySearch = fuzzySearch
+      this.$refs.search.expression = expression
+      this.currentPage = 1
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.$nextTick(() => {
+        this.handleLoadInstance()
+      })
+    },
+    setPreferenceSearchCurrent(id = null) {
+      this.$refs.preferenceSearch.currentPreferenceSearch = id
+    },
+    copyExpression() {
+      const expression = this.$refs['search'].expression || ''
+      const fuzzySearch = this.$refs['search'].fuzzySearch
+
+      const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
+
+      const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
+      const text = `q=_type:${this.typeId}${exp ? `,${exp}` : ''}${fuzzySearch ? `,*${fuzzySearch}*` : ''}`
+      this.$copyText(text)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import '../index.less';
+.tree-views {
+  width: 100%;
+  height: calc(100% - 32px);
+  .tree-views-left {
+    float: left;
+    position: relative;
+    background-color: #fff;
+    overflow: hidden;
+    width: 100%;
+    padding: 12px;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    &:hover {
+      overflow: auto;
+    }
+    .ant-collapse-borderless {
+      background-color: #fff;
+    }
+    .ant-collapse-item:has(.custom-header-selected):not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header,
+    .ant-collapse-item-active:not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header {
+      background-color: #d6e4ff;
+    }
+    .ant-collapse-header {
+      padding: 8px 12px 4px;
+      &:hover {
+        background-color: #f0f5ff;
+      }
+      &:hover > .custom-header > .actions {
+        display: inherit;
+      }
+      .custom-header {
+        width: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: center;
+        .tree-views-left-header-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          border-radius: 2px;
+          box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
+          margin-right: 6px;
+          background-color: #fff;
+        }
+        .tree-views-left-header-name {
+          flex: 1;
+          font-weight: bold;
+          margin-left: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .actions {
+          display: none;
+          margin-left: auto;
+        }
+        .action {
+          display: inline-block;
+          width: 22px;
+          text-align: center;
+          border-radius: 5px;
+          &:hover {
+            background-color: #cacaca;
+          }
+        }
+      }
+    }
+
+    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+      white-space: nowrap;
+    }
+    .ant-tree li {
+      padding: 2px 0;
+    }
+    .ant-tree-switcher {
+      display: none;
+    }
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+      padding: 4px 0;
+      display: inline-block;
+      height: 100%;
+      .ant-tree-title {
+        display: inline-block;
+        width: 100%;
+        padding: 0 6px;
+      }
+    }
+  }
+  .tree-views-right {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    overflow: auto;
+    width: 100%;
+    border-radius: 15px;
+    .tree-views-right-bar {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 10px;
+      height: 36px;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/router/config.js b/cmdb-ui/src/router/config.js
index 4800af4..01d9861 100644
--- a/cmdb-ui/src/router/config.js
+++ b/cmdb-ui/src/router/config.js
@@ -34,6 +34,7 @@ export const generatorDynamicRouter = async () => {
       name: 'notice_center',
       component: BasicLayout,
       children: [{
+        hidden: true,
         path: '/noticecenter',
         name: 'notice_center',
         meta: { title: '消息中心' },
@@ -50,53 +51,53 @@ export const generatorDynamicRouter = async () => {
           hidden: true,
           path: '/setting/person',
           name: 'setting_person',
-          meta: { title: '个人中心', },
+          meta: { title: 'cs.menu.person', },
           component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/person/index')
         },
         {
           path: '/setting/companyinfo',
           name: 'company_info',
-          meta: { title: '公司信息', appName: 'backend', icon: 'ops-setting-companyInfo', selectedIcon: 'ops-setting-companyInfo-selected', permission: ['acl_admin', 'backend_admin'] },
+          meta: { title: 'cs.menu.companyInfo', appName: 'backend', icon: 'ops-setting-companyInfo', selectedIcon: 'ops-setting-companyInfo-selected', permission: ['公司信息', 'backend_admin'] },
           component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/companyInfo/index')
         },
         {
           path: '/setting/companystructure',
           name: 'company_structure',
-          meta: { title: '公司架构', appName: 'backend', icon: 'ops-setting-companyStructure', selectedIcon: 'ops-setting-companyStructure-selected', permission: ['acl_admin', 'backend_admin'] },
+          meta: { title: 'cs.menu.companyStructure', appName: 'backend', icon: 'ops-setting-companyStructure', selectedIcon: 'ops-setting-companyStructure-selected', permission: ['公司架构', 'backend_admin'] },
           component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/companyStructure/index')
         },
         {
           path: '/setting/notice',
           name: 'notice',
           component: RouteView,
-          meta: { title: '通知设置', appName: 'backend', icon: 'ops-setting-notice', selectedIcon: 'ops-setting-notice-selected', permission: ['通知设置', 'backend_admin'] },
+          meta: { title: 'cs.menu.notice', appName: 'backend', icon: 'ops-setting-notice', selectedIcon: 'ops-setting-notice-selected', permission: ['通知设置', 'backend_admin'] },
           redirect: '/setting/notice/email',
           children: [{
             path: '/setting/notice/email',
             name: 'notice_email',
-            meta: { title: '邮件设置', icon: 'ops-setting-notice-email', selectedIcon: 'ops-setting-notice-email-selected' },
+            meta: { title: 'cs.menu.email', icon: 'ops-setting-notice-email', selectedIcon: 'ops-setting-notice-email-selected' },
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/notice/email/index')
           }, {
             path: '/setting/notice/wx',
             name: 'notice_wx',
-            meta: { title: '企业微信', icon: 'ops-setting-notice-wx', selectedIcon: 'ops-setting-notice-wx-selected' },
+            meta: { title: 'cs.menu.wx', icon: 'ops-setting-notice-wx', selectedIcon: 'ops-setting-notice-wx-selected' },
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/notice/wx')
           }, {
             path: '/setting/notice/dingding',
             name: 'notice_dingding',
-            meta: { title: '钉钉', icon: 'ops-setting-notice-dingding', selectedIcon: 'ops-setting-notice-dingding-selected' },
+            meta: { title: 'cs.menu.dingding', icon: 'ops-setting-notice-dingding', selectedIcon: 'ops-setting-notice-dingding-selected' },
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/notice/dingding')
           }, {
             path: '/setting/notice/feishu',
             name: 'notice_feishu',
-            meta: { title: '飞书', icon: 'ops-setting-notice-feishu', selectedIcon: 'ops-setting-notice-feishu-selected' },
+            meta: { title: 'cs.menu.feishu', icon: 'ops-setting-notice-feishu', selectedIcon: 'ops-setting-notice-feishu-selected' },
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/notice/feishu')
           }]
         },
         {
           path: '/setting/auth',
           name: 'company_auth',
-          meta: { title: '认证设置', appName: 'backend', icon: 'ops-setting-auth', selectedIcon: 'ops-setting-auth-selected', permission: ['acl_admin'] },
+          meta: { title: 'cs.menu.auth', appName: 'backend', icon: 'ops-setting-auth', selectedIcon: 'ops-setting-auth-selected', permission: ['acl_admin'] },
           component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/auth/index')
         },
       ]
diff --git a/cmdb-ui/src/store/index.js b/cmdb-ui/src/store/index.js
index a2e37cd..47c3e32 100644
--- a/cmdb-ui/src/store/index.js
+++ b/cmdb-ui/src/store/index.js
@@ -24,6 +24,7 @@ const store = new Vuex.Store({
     windowWidth: 800,
     windowHeight: 600,
     currentTime: 0,
+    locale: 'zh'
   },
   mutations: {
     SET_WINDOW_SIZE(state, { width, height }) {
@@ -33,6 +34,10 @@ const store = new Vuex.Store({
     SET_TIME: (state, time) => {
       state.currentTime = time
     },
+    SET_LOCALE: (state, locale) => {
+      state.locale = locale
+      localStorage.setItem('ops_locale', locale)
+    }
   },
   actions: {
     setWindowSize({ commit }) {
diff --git a/cmdb-ui/src/views/setting/auth/cas.vue b/cmdb-ui/src/views/setting/auth/cas.vue
index 5e9bb09..1aa8012 100644
--- a/cmdb-ui/src/views/setting/auth/cas.vue
+++ b/cmdb-ui/src/views/setting/auth/cas.vue
@@ -1,7 +1,7 @@
 <template>
   <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
-    <SpanTitle>基本</SpanTitle>
-    <a-form-model-item label="是否启用" prop="enable">
+    <SpanTitle>{{ $t('cs.auth.basic') }}</SpanTitle>
+    <a-form-model-item :label="$t('cs.auth.isEnable')" prop="enable">
       <a-switch
         :checked="Boolean(form.enable)"
         @change="
@@ -11,26 +11,26 @@
         "
       />
     </a-form-model-item>
-    <a-form-model-item label="服务端地址" prop="cas_server" help="不包括url path，例如https://xxx.com">
-      <a-input v-model="form.cas_server" placeholder="请输入服务端地址" />
+    <a-form-model-item :label="$t('cs.auth.cas.server')" prop="cas_server" :help="$t('cs.auth.cas.serverHelp')">
+      <a-input v-model="form.cas_server" :placeholder="$t('cs.auth.cas.serverPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="验证服务端地址" prop="cas_validate_server" help="不包括url path，例如https://xxx.com">
-      <a-input v-model="form.cas_validate_server" placeholder="请输入验证服务端地址" />
+    <a-form-model-item :label="$t('cs.auth.cas.validateServer')" prop="cas_validate_server" :help="$t('cs.auth.cas.validateServerHelp')">
+      <a-input v-model="form.cas_validate_server" :placeholder="$t('cs.auth.cas.validateServerPlaceholder')" />
     </a-form-model-item>
-    <SpanTitle>其他</SpanTitle>
-    <a-form-model-item label="登录路由" prop="cas_login_route">
+    <SpanTitle>{{ $t('cs.auth.other') }}</SpanTitle>
+    <a-form-model-item :label="$t('cs.auth.cas.loginRoute')" prop="cas_login_route">
       <a-input v-model="form.cas_login_route" placeholder="/cas/built-in/cas/login" />
     </a-form-model-item>
-    <a-form-model-item label="注销路由" prop="cas_logout_route">
+    <a-form-model-item :label="$t('cs.auth.cas.logoutRoute')" prop="cas_logout_route">
       <a-input v-model="form.cas_logout_route" placeholder="/cas/built-in/cas/logout" />
     </a-form-model-item>
-    <a-form-model-item label="验证路由" prop="cas_validate_route">
+    <a-form-model-item :label="$t('cs.auth.cas.validateRoute')" prop="cas_validate_route">
       <a-input v-model="form.cas_validate_route" placeholder="/cas/built-in/cas/serviceValidate" />
     </a-form-model-item>
-    <a-form-model-item label="重定向路由" prop="cas_after_login">
-      <a-input v-model="form.cas_after_login" placeholder="请输入重定向路由" />
+    <a-form-model-item :label="$t('cs.auth.cas.afterLoginRoute')" prop="cas_after_login">
+      <a-input v-model="form.cas_after_login" :placeholder="$t('cs.auth.cas.afterLoginRoutePlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="用户属性映射" prop="cas_user_map" :wrapper-col="{ span: 15 }">
+    <a-form-model-item :label="$t('cs.auth.cas.userMap')" prop="cas_user_map" :wrapper-col="{ span: 15 }">
       <vue-json-editor
         :style="{ '--custom-height': `${200}px` }"
         v-model="form.cas_user_map"
@@ -73,16 +73,20 @@ export default {
       labelCol: { span: 3 },
       wrapperCol: { span: 10 },
       form: _.cloneDeep(defaultForm),
-      rules: {
-        enable: [{ required: true }],
-        cas_server: [{ required: true, message: '请输入服务端地址' }],
-        cas_login_route: [{ required: true, message: '请输入登录路由' }],
-        cas_logout_route: [{ required: true, message: '请输入注销路由' }],
-        cas_validate_route: [{ required: true, message: '请输入验证路由' }],
-      },
       isJsonRight: true,
     }
   },
+  computed: {
+    rules() {
+      return {
+        enable: [{ required: true }],
+        cas_server: [{ required: true, message: this.$t('cs.auth.cas.serverPlaceholder') }],
+        cas_login_route: [{ required: true, message: this.$t('cs.auth.cas.loginRoutePlaceholder') }],
+        cas_logout_route: [{ required: true, message: this.$t('cs.auth.cas.logoutRoutePlaceholder') }],
+        cas_validate_route: [{ required: true, message: this.$t('cs.auth.cas.validateRoutePlaceholder') }],
+      }
+    }
+  },
   methods: {
     setData(data) {
       if (data) {
diff --git a/cmdb-ui/src/views/setting/auth/common.vue b/cmdb-ui/src/views/setting/auth/common.vue
index be3a895..69eedc8 100644
--- a/cmdb-ui/src/views/setting/auth/common.vue
+++ b/cmdb-ui/src/views/setting/auth/common.vue
@@ -1,10 +1,10 @@
 <template>
   <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
-    <SpanTitle>基本</SpanTitle>
+    <SpanTitle>{{ $t('cs.auth.basic') }}</SpanTitle>
     <a-form-model-item
-      label="自动跳转到第三方登录页"
+      :label="$t('cs.auth.autoRedirectLogin')"
       prop="auto_redirect"
-      help="如果关闭，则会弹出跳转到第三方登录页的确认，点取消按钮会进入系统内置的登录页"
+      :help="$t('cs.auth.autoRedirectLoginHelp')"
     >
       <a-switch
         :checked="Boolean(form.auto_redirect)"
diff --git a/cmdb-ui/src/views/setting/auth/index.vue b/cmdb-ui/src/views/setting/auth/index.vue
index 7166689..1bfd111 100644
--- a/cmdb-ui/src/views/setting/auth/index.vue
+++ b/cmdb-ui/src/views/setting/auth/index.vue
@@ -15,12 +15,12 @@
         <a-row>
           <a-col :offset="item.value === 'AuthCommonConfig' ? 5 : 3">
             <a-space>
-              <a-button :loading="loading" type="primary" @click="handleSave">保存</a-button>
+              <a-button :loading="loading" type="primary" @click="handleSave">{{ $t('save') }}</a-button>
               <template v-if="item.value === 'LDAP'">
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">测试连接</a-button>
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">测试登录</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">{{ $t('cs.auth.testConnect') }}</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">{{ $t('cs.auth.testLogin') }}</a-button>
               </template>
-              <a-button :loading="loading" @click="handleReset">重置</a-button>
+              <a-button :loading="loading" @click="handleReset">{{ $t('reset') }}</a-button>
             </a-space>
           </a-col>
         </a-row>
@@ -42,7 +42,20 @@ export default {
   name: 'Auth',
   components: { LDAP, CAS, AuthCommonConfig, OAUTH2, LoginModal },
   data() {
-    const authList = [
+    return {
+      activeKey: 'LDAP',
+      dataTypeId: null,
+      loading: false,
+      enable_list: [],
+    }
+  },
+  mounted() {
+    this.changeActiveKey()
+    this.getAuthDataEnable()
+  },
+  computed: {
+    authList() {
+      return [
       {
         value: 'LDAP',
         label: 'LDAP',
@@ -61,21 +74,11 @@ export default {
       },
       {
         value: 'AuthCommonConfig',
-        label: '通用',
+        label: this.$t('cs.auth.common'),
       },
     ]
-    return {
-      authList,
-      activeKey: 'LDAP',
-      dataTypeId: null,
-      loading: false,
-      enable_list: [],
     }
   },
-  mounted() {
-    this.changeActiveKey()
-    this.getAuthDataEnable()
-  },
   methods: {
     getAuthDataEnable() {
       getAuthDataEnable().then((res) => {
@@ -105,7 +108,7 @@ export default {
             this.loading = false
           })
         }
-        this.$message.success('保存成功')
+        this.$message.success(this.$t('saveSuccess'))
         this.changeActiveKey()
         this.getAuthDataEnable()
       })
@@ -128,7 +131,7 @@ export default {
           }
           testLDAP(type, { data: _data })
             .then((res) => {
-              this.$message.success('测试成功')
+              this.$message.success(this.$t('cs.auth.testSuccess'))
             })
             .finally(() => {
               this.loading = false
diff --git a/cmdb-ui/src/views/setting/auth/ldap.vue b/cmdb-ui/src/views/setting/auth/ldap.vue
index 0abcfaa..41343e6 100644
--- a/cmdb-ui/src/views/setting/auth/ldap.vue
+++ b/cmdb-ui/src/views/setting/auth/ldap.vue
@@ -1,7 +1,7 @@
 <template>
   <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
-    <SpanTitle>基本</SpanTitle>
-    <a-form-model-item label="是否启用" prop="enable">
+    <SpanTitle>{{ $t('cs.auth.basic') }}</SpanTitle>
+    <a-form-model-item :label="$t('cs.auth.isEnable')" prop="enable">
       <a-switch
         :checked="Boolean(form.enable)"
         @change="
@@ -12,22 +12,22 @@
       />
     </a-form-model-item>
     <a-form-model-item
-      label="服务器地址"
+      :label="$t('cs.auth.ldap.serverAddress')"
       prop="ldap_server"
-      help="例如: 192.168.1.6 或者  ldap://192.168.1.6 或者 ldap://192.168.1.6:389"
+      :help="$t('cs.auth.ldap.serverAddressHelp')"
     >
-      <a-input v-model="form.ldap_server" placeholder="请输入服务器地址" />
+      <a-input v-model="form.ldap_server" :placeholder="$t('cs.auth.ldap.serverAddressPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="域" prop="ldap_domain">
-      <a-input v-model="form.ldap_domain" placeholder="请输入域" />
+    <a-form-model-item :label="$t('cs.auth.ldap.domain')" prop="ldap_domain">
+      <a-input v-model="form.ldap_domain" :placeholder="$t('cs.auth.ldap.domainPlaceholder')" />
     </a-form-model-item>
-    <SpanTitle>用户</SpanTitle>
+    <SpanTitle>{{ $t('cs.auth.ldap.user') }}</SpanTitle>
     <a-form-model-item
-      label="用户名称"
+      :label="$t('cs.auth.ldap.username')"
       prop="ldap_user_dn"
-      help="用户dn: cn={},ou=users,dc=xxx,dc=com   {}会替换成用户名"
+      :help="$t('cs.auth.ldap.userHelp')"
     >
-      <a-input v-model="form.ldap_user_dn" placeholder="请输入用户名称" />
+      <a-input v-model="form.ldap_user_dn" :placeholder="$t('cs.auth.ldap.userPlaceholder')" />
     </a-form-model-item>
   </a-form-model>
 </template>
@@ -46,11 +46,15 @@ export default {
         ldap_server: '',
         ldap_domain: '',
         ldap_user_dn: 'cn={},ou=users,dc=xxx,dc=com',
-      },
-      rules: {
+      }
+    }
+  },
+  computed: {
+    rules() {
+      return {
         enable: [{ required: true }],
-        ldap_server: [{ required: true, message: '请输入服务器地址' }],
-      },
+        ldap_server: [{ required: true, message: this.$t('cs.auth.ldap.domainPlaceholder') }],
+      }
     }
   },
   methods: {
diff --git a/cmdb-ui/src/views/setting/auth/loginModal.vue b/cmdb-ui/src/views/setting/auth/loginModal.vue
index 682e253..a5e6c5e 100644
--- a/cmdb-ui/src/views/setting/auth/loginModal.vue
+++ b/cmdb-ui/src/views/setting/auth/loginModal.vue
@@ -1,23 +1,23 @@
 <template>
   <a-modal :visible="visible" @cancel="handleCancel" @ok="handleOK">
     <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-      <a-form-item label="用户名/邮箱">
+      <a-form-item :label="$t('cs.auth.usernameOrEmail')">
         <a-input
           v-decorator="[
             'username',
             {
-              rules: [{ required: true, message: '请输入用户名或邮箱' }],
+              rules: [{ required: true, message: $t('cs.auth.usernameOrEmailPlaceholder') }],
               validateTrigger: 'change',
             },
           ]"
         >
         </a-input>
       </a-form-item>
-      <a-form-item label="密码">
+      <a-form-item :label="$t('cs.auth.password')">
         <a-input
           type="password"
           autocomplete="false"
-          v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
+          v-decorator="['password', { rules: [{ required: true, message: $t('cs.auth.passwordPlaceholder') }], validateTrigger: 'blur' }]"
         >
         </a-input>
       </a-form-item>
@@ -25,32 +25,32 @@
   </a-modal>
 </template>
 
-  <script>
-  export default {
-    name: 'LoginModal',
-    data() {
-      return {
-        visible: false,
-        form: this.$form.createForm(this),
-      }
+<script>
+export default {
+  name: 'LoginModal',
+  data() {
+    return {
+      visible: false,
+      form: this.$form.createForm(this),
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
     },
-    methods: {
-      open() {
-        this.visible = true
-      },
-      handleCancel() {
-        this.visible = false
-      },
-      handleOK() {
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            this.$emit('handleOK', values)
-            this.handleCancel()
-          }
-        })
-      },
+    handleCancel() {
+      this.visible = false
     },
-  }
-  </script>
+    handleOK() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$emit('handleOK', values)
+          this.handleCancel()
+        }
+      })
+    },
+  },
+}
+</script>
 
-  <style></style>
+<style></style>
diff --git a/cmdb-ui/src/views/setting/auth/oauth2.vue b/cmdb-ui/src/views/setting/auth/oauth2.vue
index f01f78d..af85831 100644
--- a/cmdb-ui/src/views/setting/auth/oauth2.vue
+++ b/cmdb-ui/src/views/setting/auth/oauth2.vue
@@ -1,7 +1,7 @@
 <template>
   <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
-    <SpanTitle>基本</SpanTitle>
-    <a-form-model-item label="是否启用" prop="enable">
+    <SpanTitle>{{ $t('cs.auth.basic') }}</SpanTitle>
+    <a-form-model-item :label="$t('cs.auth.isEnable')" prop="enable">
       <a-switch
         :checked="Boolean(form.enable)"
         @change="
@@ -11,20 +11,20 @@
         "
       />
     </a-form-model-item>
-    <a-form-model-item label="客户端ID" prop="client_id">
-      <a-input v-model="form.client_id" placeholder="请输入客户端ID" />
+    <a-form-model-item :label="$t('cs.auth.oauth2.clientId')" prop="client_id">
+      <a-input v-model="form.client_id" :placeholder="$t('cs.auth.oauth2.clientIdPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="客户端密钥" prop="client_secret">
-      <a-input v-model="form.client_secret" placeholder="请输入客户端密钥" />
+    <a-form-model-item :label="$t('cs.auth.oauth2.clientSecret')" prop="client_secret">
+      <a-input v-model="form.client_secret" :placeholder="$t('cs.auth.oauth2.clientSecretPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="授权链接" prop="authorize_url">
-      <a-input v-model="form.authorize_url" placeholder="请输入授权链接" />
+    <a-form-model-item :label="$t('cs.auth.oauth2.authorizeUrl')" prop="authorize_url">
+      <a-input v-model="form.authorize_url" :placeholder="$t('cs.auth.oauth2.authorizeUrlPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="令牌链接" prop="token_url">
-      <a-input v-model="form.token_url" placeholder="请输入令牌链接" />
+    <a-form-model-item :label="$t('cs.auth.oauth2.tokenUrl')" prop="token_url">
+      <a-input v-model="form.token_url" :placeholder="$t('cs.auth.oauth2.tokenUrlPlaceholder')" />
     </a-form-model-item>
     <SpanTitle>其他</SpanTitle>
-    <a-form-model-item label="用户信息" prop="user_info" :wrapper-col="{ span: 15 }">
+    <a-form-model-item :label="$t('cs.auth.oauth2.userInfo')" prop="user_info" :wrapper-col="{ span: 15 }">
       <vue-json-editor
         :style="{ '--custom-height': `${200}px` }"
         v-model="form.user_info"
@@ -35,11 +35,11 @@
         @has-error="onJsonError"
       />
     </a-form-model-item>
-    <a-form-model-item label="范围" prop="scopes">
-      <a-select mode="tags" v-model="form.scopes" placeholder="请输入范围" />
+    <a-form-model-item :label="$t('cs.auth.oauth2.scopes')" prop="scopes">
+      <a-select mode="tags" v-model="form.scopes" :placeholder="$t('cs.auth.oauth2.scopesPlaceholder')" />
     </a-form-model-item>
-    <a-form-model-item label="重定向路由" prop="after_login">
-      <a-input v-model="form.after_login" placeholder="请输入重定向路由" />
+    <a-form-model-item :label="$t('cs.auth.cas.afterLoginRoute')" prop="after_login">
+      <a-input v-model="form.after_login" :placeholder="$t('cs.auth.cas.afterLoginRoutePlaceholder')" />
     </a-form-model-item>
   </a-form-model>
 </template>
@@ -78,14 +78,18 @@ export default {
       labelCol: { span: 3 },
       wrapperCol: { span: 10 },
       form: _.cloneDeep(defaultForm),
-      rules: {
-        enable: [{ required: true }],
-        client_id: [{ required: true, message: '请输入客户端ID' }],
-        client_secret: [{ required: true, message: '请输入客户端密钥' }],
-      },
       isJsonRight: true,
     }
   },
+  computed: {
+    rules() {
+      return {
+        enable: [{ required: true }],
+        client_id: [{ required: true, message: this.$t('cs.auth.oauth2.clientIdPlaceholder') }],
+        client_secret: [{ required: true, message: this.$t('cs.auth.oauth2.clientSecretPlaceholder') }],
+      }
+    }
+  },
   methods: {
     setData(data) {
       if (data) {
diff --git a/cmdb-ui/src/views/setting/companyInfo/index.vue b/cmdb-ui/src/views/setting/companyInfo/index.vue
index 2d667b5..0f554c7 100644
--- a/cmdb-ui/src/views/setting/companyInfo/index.vue
+++ b/cmdb-ui/src/views/setting/companyInfo/index.vue
@@ -1,379 +1,384 @@
-<template>
-  <div class="ops-setting-companyinfo" :style="{ height: `${windowHeight - 64}px` }">
-    <a-form-model ref="infoData" :model="infoData" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rule">
-      <SpanTitle>公司描述</SpanTitle>
-      <a-form-model-item label="名称" prop="name">
-        <a-input v-model="infoData.name" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="描述">
-        <a-input v-model="infoData.description" type="textarea" :disabled="!isEditable" />
-      </a-form-model-item>
-      <SpanTitle>公司地址</SpanTitle>
-      <a-form-model-item label="国家/地区">
-        <a-input v-model="infoData.country" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="城市">
-        <a-input v-model="infoData.city" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="地址">
-        <a-input v-model="infoData.address" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="邮编">
-        <a-input v-model="infoData.postCode" :disabled="!isEditable" />
-      </a-form-model-item>
-      <SpanTitle>联系方式</SpanTitle>
-      <a-form-model-item label="网站">
-        <a-input v-model="infoData.website" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="电话号码" prop="phone">
-        <a-input v-model="infoData.phone" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="传真号码" prop="faxCode">
-        <a-input v-model="infoData.faxCode" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="电子邮箱" prop="email">
-        <a-input v-model="infoData.email" :disabled="!isEditable" />
-      </a-form-model-item>
-      <SpanTitle>公司标识</SpanTitle>
-      <a-form-model-item label="Messenger地址" prop="messenger">
-        <a-input v-model="infoData.messenger" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="部署域名" prop="domainName">
-        <a-input v-model="infoData.domainName" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="公司logo">
-        <a-space>
-          <a-upload
-            :disabled="!isEditable"
-            name="avatar"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            :customRequest="customRequest"
-            :before-upload="beforeUpload"
-            :style="{ width: '400px', height: '80px' }"
-            accept=".png,.jpg,.jpeg"
-          >
-            <div
-              class="ops-setting-companyinfo-upload-show"
-              v-if="infoData.logoName"
-              :style="{ width: '400px', height: '80px' }"
-              @click="eidtImageOption.type = 'Logo'"
-            >
-              <img :src="`/api/common-setting/v1/file/${infoData.logoName}`" alt="avatar" />
-              <a-icon
-                v-if="isEditable"
-                type="minus-circle"
-                theme="filled"
-                class="delete-icon"
-                @click.stop="deleteLogo"
-              />
-            </div>
-            <div v-else @click="eidtImageOption.type = 'Logo'">
-              <a-icon type="plus" />
-              <div class="ant-upload-text">上传</div>
-            </div>
-          </a-upload>
-
-          <a-upload
-            :disabled="!isEditable"
-            name="avatar"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            :customRequest="customRequest"
-            :before-upload="beforeUpload"
-            :style="{ width: '82px', height: '82px' }"
-            accept=".png,.jpg,.jpeg"
-          >
-            <div
-              class="ops-setting-companyinfo-upload-show"
-              v-if="infoData.smallLogoName"
-              :style="{ width: '82px', height: '82px' }"
-              @click="eidtImageOption.type = 'SmallLogo'"
-            >
-              <img :src="`/api/common-setting/v1/file/${infoData.smallLogoName}`" alt="avatar" />
-              <a-icon
-                v-if="isEditable"
-                type="minus-circle"
-                theme="filled"
-                class="delete-icon"
-                @click.stop="deleteSmallLogo"
-              />
-            </div>
-            <div v-else @click="eidtImageOption.type = 'SmallLogo'">
-              <a-icon type="plus" />
-              <div class="ant-upload-text">上传</div>
-            </div>
-          </a-upload>
-        </a-space>
-      </a-form-model-item>
-      <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }" v-if="isEditable">
-        <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-        <a-button ghost type="primary" style="margin-left: 28px" @click="resetForm"> 重置 </a-button>
-      </a-form-model-item>
-    </a-form-model>
-    <edit-image
-      v-if="showEditImage"
-      :show="showEditImage"
-      :image="editImage"
-      :title="eidtImageOption.title"
-      :eidtImageOption="eidtImageOption"
-      @save="submitImage"
-      @close="showEditImage = false"
-    />
-  </div>
-</template>
-
-<script>
-import { getCompanyInfo, postCompanyInfo, putCompanyInfo } from '@/api/company'
-import { postImageFile } from '@/api/file'
-import { mapMutations, mapState } from 'vuex'
-import SpanTitle from '../components/spanTitle.vue'
-import EditImage from '../components/EditImage.vue'
-import { mixinPermissions } from '@/utils/mixin'
-export default {
-  name: 'CompanyInfo',
-  mixins: [mixinPermissions],
-  components: { SpanTitle, EditImage },
-  data() {
-    return {
-      labelCol: { span: 3 },
-      wrapperCol: { span: 10 },
-      infoData: {
-        name: '',
-        description: '',
-        address: '',
-        city: '',
-        postCode: '',
-        country: '',
-        website: '',
-        phone: '',
-        faxCode: '',
-        email: '',
-        logoName: '',
-        smallLogoName: '',
-        messenger: '',
-        domainName: '',
-      },
-      rule: {
-        name: [{ required: true, whitespace: true, message: '请输入名称', trigger: 'blur' }],
-        phone: [
-          {
-            required: false,
-            whitespace: true,
-            pattern: new RegExp('^([0-9]|-)+$', 'g'),
-            message: '请输入正确的电话号码',
-            trigger: 'blur',
-          },
-        ],
-        faxCode: [
-          {
-            required: false,
-            whitespace: true,
-            pattern: new RegExp('^([0-9]|-)+$', 'g'),
-            message: '请输入正确的传真号码',
-            trigger: 'blur',
-          },
-        ],
-        email: [
-          {
-            required: false,
-            whitespace: true,
-            pattern: new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$', 'g'),
-            message: '请输入正确的邮箱地址',
-            trigger: 'blur',
-          },
-        ],
-      },
-      getId: -1,
-      showEditImage: false,
-      editImage: null,
-      eidtImageOption: {
-        type: 'Logo',
-        fixedNumber: [15, 4],
-        title: '编辑企业logo',
-        previewWidth: '200px',
-        previewHeight: '40px',
-        autoCropWidth: 200,
-        autoCropHeight: 40,
-      },
-    }
-  },
-  async mounted() {
-    const res = await getCompanyInfo()
-    if (!res.id) {
-      this.getId = -1
-    } else {
-      this.infoData = res.info
-      this.getId = res.id
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isEditable() {
-      return this.hasDetailPermission('backend', '公司信息', ['update'])
-    },
-  },
-  methods: {
-    ...mapMutations(['SET_FILENAME', 'SET_SMALL_FILENAME']),
-    deleteLogo() {
-      this.infoData.logoName = ''
-    },
-    deleteSmallLogo() {
-      this.infoData.smallLogoName = ''
-    },
-    async onSubmit() {
-      this.$refs.infoData.validate(async (valid) => {
-        if (valid) {
-          if (this.getId === -1) {
-            await postCompanyInfo(this.infoData)
-          } else {
-            await putCompanyInfo(this.getId, this.infoData)
-          }
-          this.SET_FILENAME(this.infoData.logoName)
-          this.SET_SMALL_FILENAME(this.infoData.smallFileName)
-          this.$message.success('保存成功')
-        } else {
-          this.$message.warning('检查您的输入是否正确!')
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.infoData = {
-        name: '',
-        description: '',
-        address: '',
-        city: '',
-        postCode: '',
-        country: '',
-        website: '',
-        phone: '',
-        faxCode: '',
-        email: '',
-        logoName: '',
-        smallLogoName: '',
-        messenger: '',
-        domainName: '',
-      }
-    },
-    customRequest(file) {
-      const reader = new FileReader()
-      var self = this
-      if (this.eidtImageOption.type === 'Logo') {
-        this.eidtImageOption = {
-          type: 'Logo',
-          fixedNumber: [20, 4],
-          title: '编辑企业logo',
-          previewWidth: '200px',
-          previewHeight: '40px',
-          autoCropWidth: 200,
-          autoCropHeight: 40,
-        }
-      } else if (this.eidtImageOption.type === 'SmallLogo') {
-        this.eidtImageOption = {
-          type: 'SmallLogo',
-          fixedNumber: [4, 4],
-          title: '编辑企业logo缩略图',
-          previewWidth: '80px',
-          previewHeight: '80px',
-          autoCropWidth: 250,
-          autoCropHeight: 250,
-        }
-      }
-      reader.onload = function(e) {
-        let result
-        if (typeof e.target.result === 'object') {
-          // 把Array Buffer转化为blob 如果是base64不需要
-          result = window.URL.createObjectURL(new Blob([e.target.result]))
-        } else {
-          result = e.target.result
-        }
-
-        self.editImage = result
-        self.showEditImage = true
-      }
-      reader.readAsDataURL(file.file)
-    },
-    submitImage(file) {
-      postImageFile(file).then((res) => {
-        if (res.file_name) {
-          if (this.eidtImageOption.type === 'Logo') {
-            this.infoData.logoName = res.file_name
-          } else if (this.eidtImageOption.type === 'SmallLogo') {
-            this.infoData.smallLogoName = res.file_name
-          }
-        } else {
-        }
-      })
-    },
-
-    beforeUpload(file) {
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isLt2M) {
-        this.$message.error('图片大小不可超过2MB!')
-      }
-      return isLt2M
-    },
-  },
-}
-</script>
-
-<style lang="less">
-.ops-setting-companyinfo {
-  padding-top: 15px;
-  background-color: #fff;
-  border-radius: 15px;
-  overflow: auto;
-  margin-bottom: -24px;
-  .ops-setting-companyinfo-upload-show {
-    position: relative;
-    width: 290px;
-    height: 100px;
-    max-height: 100px;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    .delete-icon {
-      display: none;
-    }
-  }
-  .ant-upload:hover .delete-icon {
-    display: block;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    color: rgb(247, 85, 85);
-  }
-  .ant-form-item {
-    margin-bottom: 10px;
-  }
-  .ant-form-item label {
-    padding-right: 10px;
-  }
-  .avatar-uploader > .ant-upload {
-    // max-width: 100px;
-    max-height: 100px;
-  }
-  // .ant-upload.ant-upload-select-picture-card {
-  //   width: 100%;
-  //   > .ant-upload {
-  //     padding: 0px;
-  .ant-upload-picture-card-wrapper {
-    height: 100px;
-    .ant-upload.ant-upload-select-picture-card {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      > .ant-upload {
-        padding: 0px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="ops-setting-companyinfo" :style="{ height: `${windowHeight - 64}px` }">
+    <a-form-model ref="infoData" :model="infoData" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rule">
+      <SpanTitle>{{ $t('cs.companyInfo.spanCompany') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.companyInfo.name')" prop="name">
+        <a-input v-model="infoData.name" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.description')">
+        <a-input v-model="infoData.description" type="textarea" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <SpanTitle>{{ $t('cs.companyInfo.spanAddress') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.companyInfo.country')">
+        <a-input v-model="infoData.country" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.city')">
+        <a-input v-model="infoData.city" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.address')">
+        <a-input v-model="infoData.address" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.postcode')">
+        <a-input v-model="infoData.postCode" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <SpanTitle>{{ $t('cs.companyInfo.spanContract') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.companyInfo.website')">
+        <a-input v-model="infoData.website" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.phone')" prop="phone">
+        <a-input v-model="infoData.phone" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.faxCode')" prop="faxCode">
+        <a-input v-model="infoData.faxCode" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.email')" prop="email">
+        <a-input v-model="infoData.email" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <SpanTitle>{{ $t('cs.companyInfo.spanLogo') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.companyInfo.messenger')" prop="messenger">
+        <a-input v-model="infoData.messenger" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.domainName')" prop="domainName">
+        <a-input v-model="infoData.domainName" :disabled="!isEditable"/>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyInfo.logo')">
+        <a-space>
+          <a-upload
+            :disabled="!isEditable"
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customRequest"
+            :before-upload="beforeUpload"
+            :style="{ width: '400px', height: '80px' }"
+            accept=".png,.jpg,.jpeg"
+          >
+            <div
+              class="ops-setting-companyinfo-upload-show"
+              v-if="infoData.logoName"
+              :style="{ width: '400px', height: '80px' }"
+              @click="eidtImageOption.type = 'Logo'"
+            >
+              <img :src="`/api/common-setting/v1/file/${infoData.logoName}`" alt="avatar"/>
+              <a-icon
+                v-if="isEditable"
+                type="minus-circle"
+                theme="filled"
+                class="delete-icon"
+                @click.stop="deleteLogo"
+              />
+            </div>
+            <div v-else @click="eidtImageOption.type = 'Logo'">
+              <a-icon type="plus"/>
+              <div class="ant-upload-text">{{ $t('cs.companyInfo.upload') }}</div>
+            </div>
+          </a-upload>
+
+          <a-upload
+            :disabled="!isEditable"
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customRequest"
+            :before-upload="beforeUpload"
+            :style="{ width: '82px', height: '82px' }"
+            accept=".png,.jpg,.jpeg"
+          >
+            <div
+              class="ops-setting-companyinfo-upload-show"
+              v-if="infoData.smallLogoName"
+              :style="{ width: '82px', height: '82px' }"
+              @click="eidtImageOption.type = 'SmallLogo'"
+            >
+              <img :src="`/api/common-setting/v1/file/${infoData.smallLogoName}`" alt="avatar"/>
+              <a-icon
+                v-if="isEditable"
+                type="minus-circle"
+                theme="filled"
+                class="delete-icon"
+                @click.stop="deleteSmallLogo"
+              />
+            </div>
+            <div v-else @click="eidtImageOption.type = 'SmallLogo'">
+              <a-icon type="plus"/>
+              <div class="ant-upload-text">{{ $t('cs.companyInfo.upload') }}</div>
+            </div>
+          </a-upload>
+        </a-space>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }" v-if="isEditable">
+        <a-button type="primary" @click="onSubmit"> {{ $t('save') }}</a-button>
+        <a-button ghost type="primary" style="margin-left: 28px" @click="resetForm"> {{ $t('reset') }}</a-button>
+      </a-form-model-item>
+    </a-form-model>
+    <edit-image
+      v-if="showEditImage"
+      :show="showEditImage"
+      :image="editImage"
+      :title="eidtImageOption.title"
+      :eidtImageOption="eidtImageOption"
+      @save="submitImage"
+      @close="showEditImage = false"
+    />
+  </div>
+</template>
+
+<script>
+import { getCompanyInfo, postCompanyInfo, putCompanyInfo } from '@/api/company'
+import { postImageFile } from '@/api/file'
+import { mapMutations, mapState } from 'vuex'
+import SpanTitle from '../components/spanTitle.vue'
+import EditImage from '../components/EditImage.vue'
+import { mixinPermissions } from '@/utils/mixin'
+
+export default {
+  name: 'CompanyInfo',
+  mixins: [mixinPermissions],
+  components: { SpanTitle, EditImage },
+  data() {
+    return {
+      labelCol: { span: 3 },
+      wrapperCol: { span: 10 },
+      infoData: {
+        name: '',
+        description: '',
+        address: '',
+        city: '',
+        postCode: '',
+        country: '',
+        website: '',
+        phone: '',
+        faxCode: '',
+        email: '',
+        logoName: '',
+        smallLogoName: '',
+        messenger: '',
+        domainName: '',
+      },
+      getId: -1,
+      showEditImage: false,
+      editImage: null
+    }
+  },
+  async mounted() {
+    const res = await getCompanyInfo()
+    if (!res.id) {
+      this.getId = -1
+    } else {
+      this.infoData = res.info
+      this.getId = res.id
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isEditable() {
+      return this.hasDetailPermission('backend', '公司信息', ['update'])
+    },
+    rule() {
+      return {
+        name: [{ required: true, whitespace: true, message: this.$t('cs.companyInfo.nameValidate'), trigger: 'blur' }],
+        phone: [
+          {
+            required: false,
+            whitespace: true,
+            pattern: new RegExp('^([0-9]|-)+$', 'g'),
+            message: this.$t('cs.companyInfo.phoneValidate'),
+            trigger: 'blur',
+          },
+        ],
+        faxCode: [
+          {
+            required: false,
+            whitespace: true,
+            pattern: new RegExp('^([0-9]|-)+$', 'g'),
+            message: this.$t('cs.companyInfo.faxCodeValidate'),
+            trigger: 'blur',
+          },
+        ],
+        email: [
+          {
+            required: false,
+            whitespace: true,
+            pattern: new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$', 'g'),
+            message: this.$t('cs.companyInfo.emailValidate'),
+            trigger: 'blur',
+          },
+        ],
+      }
+    },
+    eidtImageOption () {
+      return {
+        type: 'Logo',
+        fixedNumber: [15, 4],
+        title: this.$t('cs.companyInfo.editCompanyLogo'),
+        previewWidth: '200px',
+        previewHeight: '40px',
+        autoCropWidth: 200,
+        autoCropHeight: 40,
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_FILENAME', 'SET_SMALL_FILENAME']),
+    deleteLogo() {
+      this.infoData.logoName = ''
+    },
+    deleteSmallLogo() {
+      this.infoData.smallLogoName = ''
+    },
+    async onSubmit() {
+      this.$refs.infoData.validate(async (valid) => {
+        if (valid) {
+          if (this.getId === -1) {
+            await postCompanyInfo(this.infoData)
+          } else {
+            await putCompanyInfo(this.getId, this.infoData)
+          }
+          this.SET_FILENAME(this.infoData.logoName)
+          this.SET_SMALL_FILENAME(this.infoData.smallFileName)
+          this.$message.success(this.$t('saveSuccess'))
+        } else {
+          this.$message.warning(this.$t('cs.companyInfo.checkInputCorrect'))
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.infoData = {
+        name: '',
+        description: '',
+        address: '',
+        city: '',
+        postCode: '',
+        country: '',
+        website: '',
+        phone: '',
+        faxCode: '',
+        email: '',
+        logoName: '',
+        smallLogoName: '',
+        messenger: '',
+        domainName: '',
+      }
+    },
+    customRequest(file) {
+      const reader = new FileReader()
+      var self = this
+      if (this.eidtImageOption.type === 'Logo') {
+        this.eidtImageOption = {
+          type: 'Logo',
+          fixedNumber: [20, 4],
+          title: this.$t('cs.companyInfo.editCompanyLogo'),
+          previewWidth: '200px',
+          previewHeight: '40px',
+          autoCropWidth: 200,
+          autoCropHeight: 40,
+        }
+      } else if (this.eidtImageOption.type === 'SmallLogo') {
+        this.eidtImageOption = {
+          type: 'SmallLogo',
+          fixedNumber: [4, 4],
+          title: this.$t('cs.companyInfo.editCompanyLogoSmall'),
+          previewWidth: '80px',
+          previewHeight: '80px',
+          autoCropWidth: 250,
+          autoCropHeight: 250,
+        }
+      }
+      reader.onload = function (e) {
+        let result
+        if (typeof e.target.result === 'object') {
+          // 把Array Buffer转化为blob 如果是base64不需要
+          result = window.URL.createObjectURL(new Blob([e.target.result]))
+        } else {
+          result = e.target.result
+        }
+
+        self.editImage = result
+        self.showEditImage = true
+      }
+      reader.readAsDataURL(file.file)
+    },
+    submitImage(file) {
+      postImageFile(file).then((res) => {
+        if (res.file_name) {
+          if (this.eidtImageOption.type === 'Logo') {
+            this.infoData.logoName = res.file_name
+          } else if (this.eidtImageOption.type === 'SmallLogo') {
+            this.infoData.smallLogoName = res.file_name
+          }
+        } else {
+        }
+      })
+    },
+
+    beforeUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error(this.$t('cs.companyInfo.imageSizeLimit2MB'))
+      }
+      return isLt2M
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.ops-setting-companyinfo {
+  padding-top: 15px;
+  background-color: #fff;
+  border-radius: 15px;
+  overflow: auto;
+  margin-bottom: -24px;
+  .ops-setting-companyinfo-upload-show {
+    position: relative;
+    width: 290px;
+    height: 100px;
+    max-height: 100px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .delete-icon {
+      display: none;
+    }
+  }
+  .ant-upload:hover .delete-icon {
+    display: block;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    color: rgb(247, 85, 85);
+  }
+  .ant-form-item {
+    margin-bottom: 10px;
+  }
+  .ant-form-item label {
+    padding-right: 10px;
+  }
+  .avatar-uploader > .ant-upload {
+    // max-width: 100px;
+    max-height: 100px;
+  }
+  // .ant-upload.ant-upload-select-picture-card {
+  //   width: 100%;
+  //   > .ant-upload {
+  //     padding: 0px;
+  .ant-upload-picture-card-wrapper {
+    height: 100px;
+    .ant-upload.ant-upload-select-picture-card {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      > .ant-upload {
+        padding: 0px;
+      }
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/views/setting/companyStructure/BatchModal.vue b/cmdb-ui/src/views/setting/companyStructure/BatchModal.vue
index 321378b..69b55f1 100644
--- a/cmdb-ui/src/views/setting/companyStructure/BatchModal.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/BatchModal.vue
@@ -10,54 +10,54 @@
   >
     <a-form-model v-if="visible && batchProps.type === 'department_id'">
       <div :style="{ width: '420px', display: 'inline-block', margin: '0 7px' }">
-        <div :style="{ height: '40px', lineHeight: '40px' }">选择部门:</div>
+        <div :style="{ height: '40px', lineHeight: '40px' }">{{ $t('cs.companyStructure.selectDepartment') }}:</div>
         <DepartmentTreeSelect v-model="batchForm.value"> </DepartmentTreeSelect>
       </div>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'direct_supervisor_id'" ref="ruleForm">
       <div :style="{ width: '420px', display: 'inline-block', margin: '0 7px' }">
-        <div :style="{ height: '40px', lineHeight: '40px' }">选择上级:</div>
+        <div :style="{ height: '40px', lineHeight: '40px' }">{{ $t('cs.companyStructure.selectDirectSupervisor') }}:</div>
         <EmployeeTreeSelect v-model="batchForm.value" />
       </div>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'position_name'">
-      <a-form-model-item label="编辑岗位">
+      <a-form-model-item :label="$t('cs.companyStructure.editPosition')">
         <a-input v-model="batchForm.value" />
       </a-form-model-item>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'annual_leave'">
-      <a-form-model-item label="编辑年假">
+      <a-form-model-item :label="$t('cs.companyStructure.editAnnualLeave')">
         <a-input-number
           :min="0"
           :step="1"
           :style="{ width: '100%' }"
           v-model="batchForm.value"
-          placeholder="请输入年假"
-          :formatter="(value) => `${value} 天`"
+          :placeholder="$t('cs.companyStructure.annualLeavePlaceholder')"
+          :formatter="(value) => `${value} $t('cs.companyStructure.day')`"
         />
       </a-form-model-item>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'password'" ref="batchForm" :model="batchForm" :rules="rules">
-      <a-form-model-item label="重置密码" prop="password">
+      <a-form-model-item :label="$t('cs.companyStructure.resetPassword')" prop="password">
         <a-input-password v-model="batchForm.value" />
       </a-form-model-item>
-      <a-form-model-item label="确认密码" prop="repeatPassword">
+      <a-form-model-item :label="$t('cs.companyStructure.confirmPassword')" prop="repeatPassword">
         <a-input-password v-model="batchForm.confirmValue" />
       </a-form-model-item>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'block' && batchProps.state === 1">
       <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px', marginRight: '10px' }" />
-      <span v-if="batchProps.selectedRowKeys.length > 1">这些用户将会被禁用，是否继续?</span>
-      <span v-else>该用户将会被禁用，是否继续?</span>
+      <span v-if="batchProps.selectedRowKeys.length > 1">{{ $t('cs.companyStructure.batchBlockUserConfirm') }}</span>
+      <span v-else>{{ $t('cs.companyStructure.blockUserConfirm') }}</span>
     </a-form-model>
     <a-form-model v-else-if="batchProps.type === 'block' && batchProps.state === 0">
       <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px', marginRight: '10px' }" />
-      <span v-if="batchProps.selectedRowKeys.length > 1">这些用户将会被恢复，是否继续?</span>
-      <span v-else>该用户将会被恢复，是否继续?</span>
+      <span v-if="batchProps.selectedRowKeys.length > 1">{{ $t('cs.companyStructure.batchRecoverUserConfirm') }}</span>
+      <span v-else>{{ $t('cs.companyStructure.recoverUserConfirm') }}</span>
     </a-form-model>
     <template slot="footer">
-      <a-button key="back" @click="close"> 取消 </a-button>
-      <a-button key="submit" type="primary" @click="batchModalHandleOk"> 确定 </a-button>
+      <a-button key="back" @click="close"> {{ $t('cancel') }} </a-button>
+      <a-button key="submit" type="primary" @click="batchModalHandleOk"> {{ $t('confirm') }} </a-button>
     </template>
   </a-modal>
 </template>
@@ -75,7 +75,7 @@ export default {
     const validatePass = (rule, value, callback) => {
       console.log(this.batchForm)
       if (this.batchForm.value === '') {
-        callback(new Error('请输入密码'))
+        callback(new Error(this.$t('cs.companyStructure.password_placeholder')))
       } else {
         this.$refs.batchForm.validateField('repeatPassword')
         callback()
@@ -84,9 +84,9 @@ export default {
     const validatePass2 = (rule, value, callback) => {
       console.log(this.batchForm)
       if (this.batchForm.confirmValue === '') {
-        callback(new Error('请输入密码'))
+        callback(new Error(this.$t('cs.companyStructure.passwordPlaceholder')))
       } else if (this.batchForm.confirmValue !== this.batchForm.value) {
-        callback(new Error('两次密码不一致'))
+        callback(new Error(this.$t('cs.person.thePasswordEnteredTwiceIsInconsistent')))
       } else {
         callback()
       }
@@ -115,19 +115,19 @@ export default {
       this.visible = true
       this.batchProps = batchProps
       const { type, selectedRowKeys, state } = batchProps
-      this.title = '批量编辑'
+      this.title = this.$t('cs.companyStructure.batchEdit')
       if (type === 'department_id') {
         this.batchForm.value = null
       } else if (type === 'direct_supervisor_id') {
         this.batchForm.value = undefined
       } else if (type === 'password') {
         if (selectedRowKeys.length <= 1) {
-          this.title = '重置密码'
+          this.title = this.$t('cs.companyStructure.resetPassword')
         }
       } else if (type === 'block') {
         this.batchForm.value = state
         if (selectedRowKeys.length <= 1) {
-          this.title = state ? '禁用' : '恢复'
+          this.title = state ? this.$t('cs.companyStructure.block') : this.$t('cs.companyStructure.recover')
         }
       }
     },
@@ -163,7 +163,7 @@ export default {
       })
       if (res.length) {
         this.$notification.error({
-          message: '操作失败',
+          message: this.$t('cs.companyStructure.opFailed'),
           description: res
             .map((item) => `${getDirectorName(this.allFlatEmployees, item.employee_id)}：${item.err}`)
             .join('\n'),
@@ -175,7 +175,7 @@ export default {
           },
         })
       } else {
-        this.$message.success('操作成功')
+        this.$message.success(this.$t('cs.companyStructure.opSuccess'))
       }
       if (this.batchProps.type === 'department_id') {
         Bus.$emit('clickSelectGroup', 1)
diff --git a/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue b/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
index 7582e22..ccff2c4 100644
--- a/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/BatchUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :visible="visible"
-    title="批量导入"
+    :title="$t('cs.companyStructure.batchImport')"
     dialogClass="ops-modal setting-structure-upload"
     :width="800"
     @cancel="close"
@@ -22,15 +22,17 @@
       <a-upload :multiple="false" :customRequest="customRequest" accept=".xlsx" :showUploadList="false">
         <a-button :style="{ marginBottom: '20px' }" type="primary"> <a-icon type="upload" />选择文件</a-button>
       </a-upload>
-      <p><a @click="download">点击下载《员工导入模板》</a></p>
+      <p><a @click="download">{{ $t('cs.companyStructure.clickDownloadImportTemplate') }}</a></p>
     </template>
     <div
       :style="{ height: '60px', display: 'flex', justifyContent: 'center', alignItems: 'center' }"
       v-if="currentStep === 3"
     >
       导入总数据{{ allCount }}条, 导入成功 <span :style="{ color: '#2362FB' }">{{ allCount - errorCount }}</span> 条,
-      导入失败<span :style="{ color: '#D81E06' }">{{ errorCount }}</span
-      >条
+      {{ $t('cs.companyStructure.importSuccess', {allCount: allCount}) }}<span :style="{ color: '#2362FB' }">{{ allCount - errorCount }}</span>
+      {{ $t('cs.companyStructure.count')}},
+      {{ $t('cs.companyStructure.importError') }}<span :style="{ color: '#D81E06' }">{{ errorCount }}</span
+      >{{ $t('cs.companyStructure.count')}}
     </div>
     <vxe-table
       v-if="currentStep === 2 || has_error"
@@ -45,46 +47,53 @@
       :max-height="400"
       :column-config="{ resizable: true }"
     >
-      <vxe-column field="email" title="邮箱" min-width="120" fixed="left"></vxe-column>
-      <vxe-column field="username" title="用户名" min-width="80"></vxe-column>
-      <vxe-column field="nickname" title="姓名" min-width="80"></vxe-column>
-      <vxe-column field="password" title="密码" min-width="80"></vxe-column>
-      <vxe-column field="sex" title="性别" min-width="60"></vxe-column>
-      <vxe-column field="mobile" title="手机号" min-width="80"></vxe-column>
-      <vxe-column field="position_name" title="岗位" min-width="80"></vxe-column>
-      <vxe-column field="department_name" title="部门" min-width="80"></vxe-column>
-      <vxe-column field="entry_date" title="目前主体入职日期" min-width="120"></vxe-column>
-      <vxe-column field="is_internship" title="正式/实习生" min-width="120"></vxe-column>
-      <vxe-column field="leave_date" title="离职日期" min-width="120"></vxe-column>
-      <vxe-column field="id_card" title="身份证号码" min-width="120"></vxe-column>
-      <vxe-column field="nation" title="民族" min-width="80"></vxe-column>
-      <vxe-column field="id_place" title="籍贯" min-width="80"></vxe-column>
-      <vxe-column field="party" title="组织关系" min-width="80"></vxe-column>
-      <vxe-column field="household_registration_type" title="户籍类型" min-width="80"></vxe-column>
-      <vxe-column field="hometown" title="户口所在地" min-width="80"></vxe-column>
-      <vxe-column field="marry" title="婚姻情况" min-width="80"></vxe-column>
-      <vxe-column field="max_degree" title="最高学历" min-width="80"></vxe-column>
-      <vxe-column field="emergency_person" title="紧急联系人" min-width="120"></vxe-column>
-      <vxe-column field="emergency_phone" title="紧急联系电话" min-width="120"></vxe-column>
-      <vxe-column field="bank_card_number" title="卡号" min-width="120"></vxe-column>
-      <vxe-column field="bank_card_name" title="银行" min-width="80"></vxe-column>
-      <vxe-column field="opening_bank" title="开户行" min-width="80"></vxe-column>
-      <vxe-column field="account_opening_location" title="开户地" min-width="120"></vxe-column>
-      <vxe-column field="school" title="学校" min-width="80"></vxe-column>
-      <vxe-column field="major" title="专业" min-width="80"></vxe-column>
-      <vxe-column field="education" title="学历" min-width="80"></vxe-column>
-      <vxe-column field="graduation_year" title="毕业年份" min-width="120"></vxe-column>
-      <vxe-column v-if="has_error" field="err" title="失败原因" min-width="120" fixed="right">
+      <vxe-column field="email" :title="$t('cs.companyStructure.email')" min-width="120" fixed="left"></vxe-column>
+      <vxe-column field="username" :title="$t('cs.companyStructure.username')" min-width="80" ></vxe-column>
+      <vxe-column field="nickname" :title="$t('cs.companyStructure.nickname')" min-width="80"></vxe-column>
+      <vxe-column field="password" :title="$t('cs.companyStructure.password')" min-width="80"></vxe-column>
+      <vxe-column field="sex" :title="$t('cs.companyStructure.sex')" min-width="60"></vxe-column>
+      <vxe-column field="mobile" :title="$t('cs.companyStructure.mobile')" min-width="80"></vxe-column>
+      <vxe-column field="position_name" :title="$t('cs.companyStructure.positionName')" min-width="80"></vxe-column>
+      <vxe-column field="department_name" :title="$t('cs.companyStructure.departmentName')" min-width="80"></vxe-column>
+      <vxe-column field="current_company" v-if="useDFC" :title="$t('cs.companyStructure.currentCompany')" min-width="120"></vxe-column>
+      <vxe-column field="dfc_entry_date" v-if="useDFC" :title="$t('cs.companyStructure.dfcEntryDate')" min-width="120"></vxe-column>
+      <vxe-column field="entry_date" :title="$t('cs.companyStructure.entryDate')" min-width="120"></vxe-column>
+      <vxe-column field="is_internship" :title="$t('cs.companyStructure.isInternship')" min-width="120"></vxe-column>
+      <vxe-column field="leave_date" :title="$t('cs.companyStructure.leaveDate')" min-width="120"></vxe-column>
+      <vxe-column field="id_card" :title="$t('cs.companyStructure.idCard')" min-width="120"></vxe-column>
+      <vxe-column field="nation" :title="$t('cs.companyStructure.nation')" min-width="80"></vxe-column>
+      <vxe-column field="id_place" :title="$t('cs.companyStructure.idPlace')" min-width="80"></vxe-column>
+      <vxe-column field="party" :title="$t('cs.companyStructure.party')" min-width="80"></vxe-column>
+      <vxe-column field="household_registration_type" :title="$t('cs.companyStructure.householdRegistrationType')" min-width="80"></vxe-column>
+      <vxe-column field="hometown" :title="$t('cs.companyStructure.homewtown')" min-width="80"></vxe-column>
+      <vxe-column field="marry" :title="$t('cs.companyStructure.marry')" min-width="80"></vxe-column>
+      <vxe-column field="max_degree" :title="$t('cs.companyStructure.maxDegree')" min-width="80"></vxe-column>
+      <vxe-column field="emergency_person" :title="$t('cs.companyStructure.emergencyPerson')" min-width="120"></vxe-column>
+      <vxe-column field="emergency_phone" :title="$t('cs.companyStructure.emergencyPhone')" min-width="120"></vxe-column>
+      <vxe-column field="bank_card_number" :title="$t('cs.companyStructure.bankCardNumber')" min-width="120"></vxe-column>
+      <vxe-column field="bank_card_name" :title="$t('cs.companyStructure.bankCardName')" min-width="80"></vxe-column>
+      <vxe-column field="opening_bank" :title="$t('cs.companyStructure.openingBank')" min-width="80"></vxe-column>
+      <vxe-column field="account_opening_location" :title="$t('cs.companyStructure.accountOpeningLocation')" min-width="120"></vxe-column>
+      <vxe-column field="school" :title="$t('cs.companyStructure.school')" min-width="80"></vxe-column>
+      <vxe-column field="major" :title="$t('cs.companyStructure.major')" min-width="80"></vxe-column>
+      <vxe-column field="education" :title="$t('cs.companyStructure.education')" min-width="80"></vxe-column>
+      <vxe-column field="graduation_year" :title="$t('cs.companyStructure.graduationYear')" min-width="120"></vxe-column>
+      <vxe-column field="birth_date" :title="$t('cs.companyStructure.birthDate')" min-width="120"></vxe-column>
+      <vxe-column field="birth_place" :title="$t('cs.companyStructure.birthPlace')" min-width="120"></vxe-column>
+      <vxe-column field="nationality_region" :title="$t('cs.companyStructure.nationalityRegion')" min-width="120"></vxe-column>
+      <vxe-column field="first_entry_date" :title="$t('cs.companyStructure.firstEntryDate')" min-width="120"></vxe-column>
+      <vxe-column field="estimated_departure_date" :title="$t('cs.companyStructure.estimatedDepartureDate')" min-width="120"></vxe-column>
+      <vxe-column v-if="has_error" field="err" :title="$t('cs.companyStructure.importFailedReason')" min-width="120" fixed="right">
         <template #default="{ row }">
           <span :style="{ color: '#D81E06' }">{{ row.err }}</span>
         </template>
       </vxe-column>
     </vxe-table>
     <a-space slot="footer">
-      <a-button size="small" type="primary" ghost @click="close">取消</a-button>
-      <a-button v-if="currentStep !== 1" size="small" type="primary" ghost @click="goPre">上一步</a-button>
-      <a-button v-if="currentStep !== 3" size="small" type="primary" @click="goNext">下一步</a-button>
-      <a-button v-else size="small" type="primary" @click="close">完成</a-button>
+      <a-button size="small" type="primary" ghost @click="close">{{ $t('cancel') }}</a-button>
+      <a-button v-if="currentStep !== 1" size="small" type="primary" ghost @click="goPre">{{ $t('cs.companyStructure.prevStep') }}</a-button>
+      <a-button v-if="currentStep !== 3" size="small" type="primary" @click="goNext">{{ $t('cs.companyStructure.nextStep') }}</a-button>
+      <a-button v-else size="small" type="primary" @click="close">{{ $t('cs.companyStructure.done') }}</a-button>
     </a-space>
   </a-modal>
 </template>
@@ -98,17 +107,17 @@ export default {
     const stepList = [
       {
         value: 1,
-        label: '上传文件',
+        label: this.$t('cs.companyStructure.uploadFile'),
         icon: 'icon-shidi-tianjia',
       },
       {
         value: 2,
-        label: '确认数据',
+        label: this.$t('cs.companyStructure.confirmData'),
         icon: 'icon-shidi-yunshangchuan',
       },
       {
         value: 3,
-        label: '上传完成',
+        label: this.$t('cs.companyStructure.uploadDone'),
         icon: 'icon-shidi-queren',
       },
     ]
@@ -235,10 +244,10 @@ export default {
           this.errorCount = errData.length
           this.currentStep += 1
           this.importData = errData
-          this.$message.error('数据存在错误')
+          this.$message.error(this.$t('cs.companyStructure.dataErr'))
         } else {
           this.currentStep += 1
-          this.$message.success('操作成功')
+          this.$message.success(this.$t('cs.companyStructure.opSuccess'))
         }
         this.$emit('refresh')
       }
diff --git a/cmdb-ui/src/views/setting/companyStructure/DepartmentModal.vue b/cmdb-ui/src/views/setting/companyStructure/DepartmentModal.vue
index 70fd058..83a2463 100644
--- a/cmdb-ui/src/views/setting/companyStructure/DepartmentModal.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/DepartmentModal.vue
@@ -3,7 +3,7 @@
     destroyOnClose
     width="500px"
     v-model="visible"
-    :title="type === 'add' ? '创建子部门' : '编辑部门'"
+    :title="type === 'add' ? $t('cs.companyStructure.createSubDepartment') : $t('cs.companyStructure.editDepartment')"
     layout="inline"
     @cancel="close"
   >
@@ -14,10 +14,10 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-model-item ref="title" label="部门名称" prop="department_name">
-        <a-input v-model="departmentFormData.department_name" placeholder="请输入部门名称" />
+      <a-form-model-item ref="title" :label="$t('cs.companyStructure.departmentLabel')" prop="department_name">
+        <a-input v-model="departmentFormData.department_name" :placeholder="$t('cs.companyStructure.departmentLabelPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item label="上级部门" prop="department_parent_id">
+      <a-form-model-item :label="$t('cs.companyStructure.parentDepartment')" prop="department_parent_id">
         <DepartmentTreeSelect v-model="departmentFormData.department_parent_id" />
         <!-- <Treeselect
           v-else
@@ -37,13 +37,13 @@
           "
         /> -->
       </a-form-model-item>
-      <a-form-model-item label="部门负责人" prop="department_director_id">
+      <a-form-model-item :label="$t('cs.companyStructure.departmentDirector')" prop="department_director_id">
         <EmployeeTreeSelect v-model="departmentFormData.department_director_id" />
       </a-form-model-item>
     </a-form-model>
     <template slot="footer">
-      <a-button key="back" @click="close"> 取消 </a-button>
-      <a-button key="submit" type="primary" @click="departmentModalHandleOk"> 确定 </a-button>
+      <a-button key="back" @click="close"> {{ $t('cancel') }} </a-button>
+      <a-button key="submit" type="primary" @click="departmentModalHandleOk"> {{ $t('confirm') }} </a-button>
     </template>
   </a-modal>
 </template>
@@ -67,10 +67,6 @@ export default {
         department_parent_id: '',
         department_director_id: undefined,
       },
-      rules: {
-        department_name: [{ required: true, message: '请输入部门名称' }],
-        department_parent_id: [{ required: true, message: '请选择上级部门' }],
-      },
       currentDepartmentParentList: [],
       selectDepartment: {},
       type: 'add',
@@ -81,6 +77,12 @@ export default {
     allFlatEmployees() {
       return this.provide_allFlatEmployees()
     },
+    rules () {
+      return {
+        department_name: [{ required: true, message: this.$t('cs.companyStructure.departmentLabelPlaceholder') }],
+        department_parent_id: [{ required: true, message: this.$t('cs.companyStructure.parentDepartmentPlaceholder') }],
+      }
+    }
   },
   mounted() {},
   methods: {
@@ -129,7 +131,7 @@ export default {
           } else if (this.type === 'add') {
             await postDepartment(params)
           }
-          this.$message.success('操作成功')
+          this.$message.success(this.$t('cs.companyStructure.opSuccess'))
           this.$emit('refresh')
           Bus.$emit('updateAllIncludeDepartment')
           this.close()
diff --git a/cmdb-ui/src/views/setting/companyStructure/EmployeeModal.vue b/cmdb-ui/src/views/setting/companyStructure/EmployeeModal.vue
index b25fc0b..822d29f 100644
--- a/cmdb-ui/src/views/setting/companyStructure/EmployeeModal.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/EmployeeModal.vue
@@ -10,349 +10,225 @@
     :body-style="{ height: `${windowHeight - 320}px`, overflow: 'hidden', overflowY: 'scroll' }"
   >
     <a-form-model ref="employeeFormData" :model="employeeFormData" :rules="rules" :colon="false">
-      <a-form-model-item
-        ref="email"
-        label="邮箱"
-        prop="email"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'email') !== -1"
-      >
-        <a-input v-model="employeeFormData.email" placeholder="请输入邮箱" />
+      <a-form-model-item ref="email" :label="$t('cs.companyStructure.email')" prop="email" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='email')!==-1">
+        <a-input v-model="employeeFormData.email" :placeholder="$t('cs.companyStructure.emailPlaceholder')"/>
       </a-form-model-item>
-      <a-form-model-item
-        ref="username"
-        label="用户名"
-        prop="username"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'username') !== -1"
-      >
-        <a-input v-model="employeeFormData.username" placeholder="请输入用户名" />
+      <a-form-model-item ref="username" :label="$t('cs.companyStructure.username')" prop="username" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='username')!==-1">
+        <a-input v-model="employeeFormData.username" :placeholder="$t('cs.companyStructure.usernamePlaceholder')" />
       </a-form-model-item>
       <a-form-model-item
         v-if="type === 'add'"
         ref="password"
-        label="登录密码"
+        :label="$t('cs.companyStructure.password')"
         prop="password"
         :style="formModalItemStyle"
       >
-        <a-input-password v-model="employeeFormData.password" placeholder="请输入登录密码" />
+        <a-input-password v-model="employeeFormData.password" :placeholder="$t('cs.companyStructure.passwordPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="nickname"
-        label="姓名"
-        prop="nickname"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'nickname') !== -1"
-      >
-        <a-input v-model="employeeFormData.nickname" placeholder="请输入姓名" />
+      <a-form-model-item ref="nickname" :label="$t('cs.companyStructure.nickname')" prop="nickname" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='nickname')!==-1">
+        <a-input v-model="employeeFormData.nickname" :placeholder="$t('cs.companyStructure.nicknamePlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        label="性别"
-        prop="sex"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'sex') !== -1"
-      >
-        <a-select v-model="employeeFormData.sex" placeholder="请选择性别">
-          <a-select-option value="男"> 男 </a-select-option>
-          <a-select-option value="女"> 女 </a-select-option>
+      <a-form-model-item :label="$t('cs.companyStructure.sex')" prop="sex" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='sex')!==-1">
+        <a-select v-model="employeeFormData.sex" :placeholder="$t('cs.companyStructure.sexPlaceholder')">
+          <a-select-option value="男"> {{ $t('cs.companyStructure.male') }} </a-select-option>
+          <a-select-option value="女"> {{ $t('cs.companyStructure.female') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="mobile"
-        label="手机号"
-        prop="mobile"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'mobile') !== -1"
-      >
-        <a-input v-model="employeeFormData.mobile" placeholder="请输入手机号" />
+      <a-form-model-item ref="mobile" :label="$t('cs.companyStructure.mobile')" prop="mobile" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='mobile')!==-1">
+        <a-input v-model="employeeFormData.mobile" :placeholder="$t('cs.companyStructure.mobilePlaceholder')" />
       </a-form-model-item>
-      <div
-        :style="{ width: '361px', display: 'inline-block', margin: '0 7px' }"
-        v-if="attributes.findIndex((v) => v == 'department_id') !== -1"
-      >
-        <div :style="{ height: '41px', lineHeight: '40px' }">部门</div>
+      <div :style="{ width: '361px', display: 'inline-block', margin: '0 7px' }" v-if="attributes.findIndex(v=>v=='department_id')!==-1">
+        <div :style="{ height: '41px', lineHeight: '40px' }">{{ $t('cs.companyStructure.departmentName') }}</div>
         <DepartmentTreeSelect v-model="employeeFormData.department_id" />
       </div>
-      <a-form-model-item
-        ref="position_name"
-        label="岗位"
-        prop="position_name"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'position_name') !== -1"
-      >
-        <a-input v-model="employeeFormData.position_name" placeholder="请输入岗位" />
+      <a-form-model-item ref="position_name" :label="$t('cs.companyStructure.positionName')" prop="position_name" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='position_name')!==-1">
+        <a-input v-model="employeeFormData.position_name" :placeholder="$t('cs.companyStructure.positionNamePlaceholder')" />
       </a-form-model-item>
-      <div
-        :style="{ width: '361px', display: 'inline-block', margin: '0 7px' }"
-        v-if="attributes.findIndex((v) => v == 'direct_supervisor_id') !== -1"
-      >
-        <div :style="{ height: '41px', lineHeight: '40px' }">上级</div>
+      <div :style="{ width: '361px', display: 'inline-block', margin: '0 7px' }" v-if="attributes.findIndex(v=>v=='direct_supervisor_id')!==-1">
+        <div :style="{ height: '41px', lineHeight: '40px' }">{{ $t('cs.companyStructure.selectDirectSupervisor') }}</div>
         <EmployeeTreeSelect v-model="employeeFormData.direct_supervisor_id" />
       </div>
-      <a-form-model-item
-        ref="annual_leave"
-        label="年假"
-        prop="annual_leave"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'annual_leave') !== -1"
-      >
+      <!-- <a-form-model-item :label="角色" prop="role" :style="formModalItemStyle">
+        <a-select mode="multiple" v-model="employeeFormData.role" :placeholder="请选择角色">
+          <a-select-option value="PM"> PM </a-select-option>
+          <a-select-option value="Test"> Test </a-select-option>
+          <a-select-option value="Tevelop"> Develop </a-select-option>
+        </a-select>
+      </a-form-model-item> -->
+      <a-form-model-item ref="annual_leave" :label="$t('cs.companyStructure.annualLeave')" prop="annual_leave" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='annual_leave')!==-1">
         <a-input-number
           :min="0"
           :step="1"
           :style="{ width: '100%' }"
           v-model="employeeFormData.annual_leave"
-          placeholder="请输入年假"
-          :formatter="(value) => `${value} 天`"
+          :placeholder="$t('cs.companyStructure.annualLeavePlaceholder')"
+          :formatter="(value) => `${value} $t('cs.companyStructure.day')`"
         />
       </a-form-model-item>
-      <a-form-model-item
-        ref="virtual_annual_leave"
-        label="虚拟年假"
-        prop="virtual_annual_leave"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'virtual_annual_leave') !== -1"
-      >
+      <a-form-model-item ref="virtual_annual_leave" :label="$t('cs.companyStructure.virtualAnnualLeave')" prop="virtual_annual_leave" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='virtual_annual_leave')!==-1">
         <a-input-number
           :min="0"
           :step="1"
           :style="{ width: '100%' }"
           v-model="employeeFormData.virtual_annual_leave"
-          placeholder="请输入虚拟年假"
-          :formatter="(value) => `${value} 天`"
+          :placeholder="$t('cs.companyStructure.virtualAnnualLeavePlaceholder')"
+          :formatter="(value) => `${value} $t('cs.companyStructure.day')`"
         />
       </a-form-model-item>
-      <a-form-model-item
-        ref="parenting_leave"
-        label="育儿假"
-        prop="parenting_leave"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'parenting_leave') !== -1"
-      >
+      <a-form-model-item ref="parenting_leave" :label="$t('cs.companyStructure.parentingLeave')" prop="parenting_leave" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='parenting_leave')!==-1">
         <a-input-number
           :min="0"
           :step="1"
           :style="{ width: '100%' }"
           v-model="employeeFormData.parenting_leave"
-          placeholder="请输入育儿假"
-          :formatter="(value) => `${value} 天`"
+          :placeholder="$t('cs.companyStructure.parentingLeavePlaceholder')"
+          :formatter="(value) => `${value} $t('cs.companyStructure.day')`"
         />
       </a-form-model-item>
-      <a-form-model-item
-        ref="entry_date"
-        label="目前主体入职日期"
-        prop="entry_date"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'entry_date') !== -1"
-      >
-        <a-date-picker
-          placeholder="请选择目前主体入职日期"
-          v-model="employeeFormData.entry_date"
-          :style="{ width: '100%' }"
-          @change="onChange($event, 'entry_date')"
-        ></a-date-picker>
+      <a-form-model-item v-if="attributes.findIndex(v=>v=='current_company')!==-1" ref="current_company" :label="$t('cs.companyStructure.currentCompany')" prop="current_company" :style="formModalItemStyle">
+        <a-input v-model="employeeFormData.current_company" :placeholder="$t('cs.companyStructure.currentCompanyPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="is_internship"
-        label="正式/实习生"
-        prop="is_internship"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'is_internship') !== -1"
-      >
-        <a-select v-model="employeeFormData.is_internship" placeholder="请选择是否正式/实习生">
-          <a-select-option :value="0"> 正式 </a-select-option>
-          <a-select-option :value="1"> 实习生 </a-select-option>
+      <a-form-model-item v-if="attributes.findIndex(v=>v=='dfc_entry_date')!==-1" ref="dfc_entry_date" :label="$t('cs.companyStructure.dfcEntryDate')" prop="dfc_entry_date" :style="formModalItemStyle">
+        <a-date-picker :placeholder="$t('cs.companyStructure.dfcEntryDatePlaceholder')" v-model="employeeFormData.dfc_entry_date" :style="{ width: '100%'}" @change="onChange($event, 'dfc_entry_date')"></a-date-picker>
+      </a-form-model-item>
+      <a-form-model-item ref="entry_date" :label="$t('cs.companyStructure.entryDate')" prop="entry_date" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='entry_date')!==-1">
+        <a-date-picker :placeholder="$t('cs.companyStructure.entryDatePlaceholder')" v-model="employeeFormData.entry_date" :style="{ width: '100%'}" @change="onChange($event, 'entry_date')"></a-date-picker>
+      </a-form-model-item>
+      <a-form-model-item ref="is_internship" :label="$t('cs.companyStructure.isInternship')" prop="is_internship" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='is_internship')!==-1">
+        <a-select v-model="employeeFormData.is_internship" :placeholder="$t('cs.companyStructure.isInternshipPlaceholder')">
+          <a-select-option :value="0"> {{ $t('cs.companyStructure.fullTime') }} </a-select-option>
+          <a-select-option :value="1"> {{ $t('cs.companyStructure.internship') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="leave_date"
-        label="离职日期"
-        prop="leave_date"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'leave_date') !== -1"
-      >
-        <a-date-picker
-          v-model="employeeFormData.leave_date"
-          placeholder="请选择离职日期"
-          :style="{ width: '100%' }"
-          @change="onChange($event, 'leave_date')"
-        ></a-date-picker>
+      <a-form-model-item ref="leave_date" :label="$t('cs.companyStructure.leaveDate')" prop="leave_date" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='leave_date')!==-1">
+        <a-date-picker v-model="employeeFormData.leave_date" :placeholder="$t('cs.companyStructure.leaveDatePlaceholder')" :style="{ width: '100%'}" @change="onChange($event, 'leave_date')"></a-date-picker>
       </a-form-model-item>
-      <a-form-model-item
-        ref="id_card"
-        label="身份证号码"
-        prop="id_card"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'id_card') !== -1"
-      >
-        <a-input v-model="employeeFormData.id_card" placeholder="请输入身份证号码" />
+      <a-form-model-item ref="id_card" :label="$t('cs.companyStructure.idCard')" prop="id_card" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='id_card')!==-1">
+        <a-input v-model="employeeFormData.id_card" :placeholder="$t('cs.companyStructure.idCardPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="nation"
-        label="民族"
-        prop="nation"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'nation') !== -1"
-      >
-        <a-input v-model="employeeFormData.nation" placeholder="请输入民族" />
+      <a-form-model-item ref="nation" :label="$t('cs.companyStructure.nation')" prop="nation" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='nation')!==-1">
+        <a-input v-model="employeeFormData.nation" :placeholder="$t('cs.companyStructure.nationPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="id_place"
-        label="籍贯"
-        prop="id_place"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'id_place') !== -1"
-      >
-        <a-input v-model="employeeFormData.id_place" placeholder="请输入籍贯" />
+      <a-form-model-item ref="id_place" :label="$t('cs.companyStructure.idPlace')" prop="id_place" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='id_place')!==-1">
+        <a-input v-model="employeeFormData.id_place" :placeholder="$t('cs.companyStructure.idPlacePlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="party"
-        label="组织关系"
-        prop="party"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'party') !== -1"
-      >
-        <a-select v-model="employeeFormData.party" placeholder="请选择组织关系">
-          <a-select-option value="党员"> 党员 </a-select-option>
-          <a-select-option value="团员"> 团员 </a-select-option>
-          <a-select-option value="群众"> 群众 </a-select-option>
+      <a-form-model-item ref="party" :label="$t('cs.companyStructure.party')" prop="party" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='party')!==-1">
+        <a-select v-model="employeeFormData.party" :placeholder="$t('cs.companyStructure.')">
+          <a-select-option value="党员"> {{ $t('cs.companyStructure.partyMember') }} </a-select-option>
+          <a-select-option value="团员"> {{ $t('cs.companyStructure.member') }} </a-select-option>
+          <a-select-option value="群众"> {{ $t('cs.companyStructure.masses') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="household_registration_type"
-        label="户籍类型"
-        prop="household_registration_type"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'household_registration_type') !== -1"
-      >
-        <a-select v-model="employeeFormData.household_registration_type" placeholder="请选择户籍类型">
-          <a-select-option value="城镇"> 城镇 </a-select-option>
-          <a-select-option value="农业"> 农业 </a-select-option>
+      <a-form-model-item ref="household_registration_type" :label="$t('cs.companyStructure.householdRegistrationType')" prop="household_registration_type" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='household_registration_type')!==-1">
+        <a-select v-model="employeeFormData.household_registration_type" :placeholder="$t('cs.companyStructure.')">
+          <a-select-option value="城镇"> {{ $t('cs.companyStructure.town') }} </a-select-option>
+          <a-select-option value="农业"> {{ $t('cs.companyStructure.agriculture') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="hometown"
-        label="户口所在地"
-        prop="hometown"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'hometown') !== -1"
-      >
-        <a-input v-model="employeeFormData.hometown" placeholder="请输入户口所在地" />
+      <a-form-model-item ref="hometown" :label="$t('cs.companyStructure.hometown')" prop="hometown" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='hometown')!==-1">
+        <a-input v-model="employeeFormData.hometown" :placeholder="$t('cs.companyStructure.hometownPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="marry"
-        label="婚姻情况"
-        prop="marry"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'marry') !== -1"
-      >
-        <a-select v-model="employeeFormData.marry" placeholder="请选择婚姻情况">
-          <a-select-option value="未婚"> 未婚 </a-select-option>
-          <a-select-option value="已婚"> 已婚 </a-select-option>
+      <a-form-model-item ref="marry" :label="$t('cs.companyStructure.marry')" prop="marry" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='marry')!==-1">
+        <a-select v-model="employeeFormData.marry" :placeholder="$t('cs.companyStructure.')">
+          <a-select-option value="未婚"> {{ $t('cs.companyStructure.unmarried') }}</a-select-option>
+          <a-select-option value="已婚"> {{ $t('cs.companyStructure.married') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="max_degree"
-        label="最高学历"
-        prop="max_degree"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'max_degree') !== -1"
-      >
-        <a-select v-model="employeeFormData.max_degree" placeholder="请选择最高学历">
-          <a-select-option value="博士"> 博士 </a-select-option>
-          <a-select-option value="硕士"> 硕士 </a-select-option>
-          <a-select-option value="本科"> 本科 </a-select-option>
-          <a-select-option value="专科"> 专科 </a-select-option>
-          <a-select-option value="高中"> 高中 </a-select-option>
+      <a-form-model-item ref="max_degree" :label="$t('cs.companyStructure.maxDegree')" prop="max_degree" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='max_degree')!==-1">
+        <a-select v-model="employeeFormData.max_degree" :placeholder="$t('cs.companyStructure.maxDegreePlaceholder')">
+          <a-select-option value="博士"> {{ $t('cs.companyStructure.phd') }} </a-select-option>
+          <a-select-option value="硕士"> {{ $t('cs.companyStructure.master') }} </a-select-option>
+          <a-select-option value="本科"> {{ $t('cs.companyStructure.undergraduate') }} </a-select-option>
+          <a-select-option value="专科"> {{ $t('cs.companyStructure.specialist') }} </a-select-option>
+          <a-select-option value="高中"> {{ $t('cs.companyStructure.highSchool') }} </a-select-option>
         </a-select>
       </a-form-model-item>
-      <a-form-model-item
-        ref="emergency_person"
-        label="紧急联系人"
-        prop="emergency_person"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'emergency_person') !== -1"
-      >
-        <a-input v-model="employeeFormData.emergency_person" placeholder="请输入紧急联系人" />
+      <a-form-model-item ref="emergency_person" :label="$t('cs.companyStructure.emergencyPerson')" prop="emergency_person" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='emergency_person')!==-1">
+        <a-input v-model="employeeFormData.emergency_person" :placeholder="$t('cs.companyStructure.emergencyPersonPlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        ref="emergency_phone"
-        label="紧急联系电话"
-        prop="emergency_phone"
-        :style="formModalItemStyle"
-        v-if="attributes.findIndex((v) => v == 'emergency_phone') !== -1"
-      >
-        <a-input v-model="employeeFormData.emergency_phone" placeholder="请输入紧急联系电话" />
+      <a-form-model-item ref="emergency_phone" :label="$t('cs.companyStructure.emergencyPhone')" prop="emergency_phone" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='emergency_phone')!==-1">
+        <a-input v-model="employeeFormData.emergency_phone" :placeholder="$t('cs.companyStructure.emergencyPhonePlaceholder')" />
       </a-form-model-item>
-      <a-form-model-item
-        label="教育经历"
-        prop="employeeFormData"
-        :style="{ display: 'inline-block', width: '100%', margin: '0 7px' }"
-        v-if="attributes.findIndex((v) => v == 'educational_experience') !== -1"
-      >
-        <a-row :gutter="[8, { xs: 8 }]" v-for="item in educational_experience" :key="item.id">
+      <a-form-model-item ref="birth_date" :label="$t('cs.companyStructure.birthDate')" prop="birth_date" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='birth_date')!==-1">
+        <a-date-picker v-model="employeeFormData.birth_date" :placeholder="$t('cs.companyStructure.birthDatePlaceholder')" :style="{ width: '100%'}" @change="onChange($event, 'birth_date')"></a-date-picker>
+      </a-form-model-item>
+      <a-form-model-item ref="birth_place" :label="$t('cs.companyStructure.birthPlace')" prop="birth_place" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='birth_place')!==-1">
+        <a-input v-model="employeeFormData.birth_place" :placeholder="$t('cs.companyStructure.birthPlacePlaceholder')" />
+      </a-form-model-item>
+      <a-form-model-item ref="nationality_region" :label="$t('cs.companyStructure.nationalityRegion')" prop="nationality_region" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='nationality_region')!==-1">
+        <a-input v-model="employeeFormData.nationality_region" :placeholder="$t('cs.companyStructure.nationalityRegionPlaceholder')" />
+      </a-form-model-item>
+      <a-form-model-item ref="first_entry_date" :label="$t('cs.companyStructure.firstEntryDate')" prop="first_entry_date" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='first_entry_date')!==-1">
+        <a-date-picker v-model="employeeFormData.first_entry_date" :placeholder="$t('cs.companyStructure.firstEntryDatePlaceholder')" :style="{ width: '100%'}" @change="onChange($event, 'first_entry_date')"></a-date-picker>
+      </a-form-model-item>
+      <a-form-model-item ref="estimated_departure_date" :label="$t('cs.companyStructure.estimatedDepartureDate')" prop="estimated_departure_date" :style="formModalItemStyle" v-if="attributes.findIndex(v=>v=='estimated_departure_date')!==-1">
+        <a-date-picker v-model="employeeFormData.estimated_departure_date" :placeholder="$t('cs.companyStructure.estimatedDepartureDatePlaceholder')" :style="{ width: '100%'}" @change="onChange($event, 'estimated_departure_date')"></a-date-picker>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.companyStructure.educationalExperience')" prop="employeeFormData" :style="{ display: 'inline-block', width: '100%', margin: '0 7px'}" v-if="attributes.findIndex(v=>v=='educational_experience')!==-1">
+        <a-row
+          :gutter="[8,{xs:8}]"
+          v-for="(item) in educational_experience"
+          :key="item.id"
+        >
           <a-col :span="5">
-            <a-input v-model="item.school" placeholder="学校" allowClear></a-input>
+            <a-input v-model="item.school" :placeholder="$t('cs.companyStructure.school')" allowClear></a-input>
           </a-col>
           <a-col :span="5">
-            <a-input v-model="item.major" placeholder="专业" allowClear></a-input>
+            <a-input v-model="item.major" :placeholder="$t('cs.companyStructure.major')" allowClear></a-input>
           </a-col>
           <a-col :span="5">
-            <a-select v-model="item.education" placeholder="学历" allowClear>
-              <a-select-option value="小学"> 小学 </a-select-option>
-              <a-select-option value="初中"> 初中 </a-select-option>
-              <a-select-option value="中专/高中"> 中专/高中 </a-select-option>
-              <a-select-option value="专科"> 专科 </a-select-option>
-              <a-select-option value="本科"> 本科 </a-select-option>
-              <a-select-option value="硕士"> 硕士 </a-select-option>
-              <a-select-option value="博士"> 博士 </a-select-option>
+            <a-select v-model="item.education" :placeholder="$t('cs.companyStructure.education')" allowClear>
+              <a-select-option value="小学"> {{ $t('cs.companyStructure.primarySchool') }} </a-select-option>
+              <a-select-option value="初中"> {{ $t('cs.companyStructure.juniorHighSchool') }} </a-select-option>
+              <a-select-option value="中专/高中"> {{ $t('cs.companyStructure.technicalSecondaryOrHighSchool') }} </a-select-option>
+              <a-select-option value="专科"> {{ $t('cs.companyStructure.specialist') }} </a-select-option>
+              <a-select-option value="本科"> {{ $t('cs.companyStructure.undergraduate') }} </a-select-option>
+              <a-select-option value="硕士"> {{ $t('cs.companyStructure.master') }} </a-select-option>
+              <a-select-option value="博士"> {{ $t('cs.companyStructure.phd') }} </a-select-option>
             </a-select>
           </a-col>
           <a-col :span="5">
-            <a-month-picker
-              v-model="item.graduation_year"
-              placeholder="毕业年份"
-              @change="onChange($event, 'graduation_year', item.id)"
-            ></a-month-picker>
+            <a-month-picker v-model="item.graduation_year" :placeholder="$t('cs.companyStructure.graduationYearPlaceholder')"  @change="onChange($event, 'graduation_year',item.id)" ></a-month-picker>
           </a-col>
           <a-col :span="1">
-            <a @click="addEducation">
+            <a
+              @click="addEducation"
+            >
               <a-icon type="plus-circle" />
             </a>
           </a-col>
           <a-col :span="1" v-if="educational_experience.length > 1">
-            <a @click="() => removeEducation(item.id)" :style="{ color: 'red' }">
+            <a
+              @click="() => removeEducation(item.id)"
+              :style="{ color: 'red' }"
+            >
               <a-icon type="delete" />
             </a>
           </a-col>
         </a-row>
       </a-form-model-item>
-      <a-form-model-item
-        label="子女信息"
-        prop="employeeFormData"
-        :style="{ display: 'inline-block', width: '100%', margin: '0 7px' }"
-        v-if="attributes.findIndex((v) => v == 'children_information') !== -1"
-      >
+      <a-form-model-item :label="$t('cs.companyStructure.childrenInformation')" prop="employeeFormData" :style="{ display: 'inline-block', width: '100%', margin: '0 7px'}" v-if="attributes.findIndex(v=>v=='children_information')!==-1">
         <!-- <a-space
           v-for="(item,index) in educational_experience"
           :key="index"
           align="baseline"
           > -->
-        <a-row :gutter="[8, { xs: 8 }]" v-for="item in children_information" :key="item.id">
+        <a-row
+          :gutter="[8,{xs:8}]"
+          v-for="(item) in children_information"
+          :key="item.id"
+        >
           <a-col :span="5">
-            <a-input v-model="item.name" placeholder="姓名" allowClear></a-input>
+            <a-input v-model="item.name" :placeholder="$t('cs.companyStructure.childrenName')" allowClear></a-input>
           </a-col>
           <a-col :span="5">
-            <a-select v-model="item.gender" placeholder="请选择性别" allowClear>
-              <a-select-option value="男"> 男 </a-select-option>
-              <a-select-option value="女"> 女 </a-select-option>
+            <a-select v-model="item.gender" :placeholder="$t('cs.companyStructure.sex')"  allowClear>
+              <a-select-option value="男"> {{ $t('cs.companyStructure.male') }} </a-select-option>
+              <a-select-option value="女"> {{ $t('cs.companyStructure.female') }} </a-select-option>
             </a-select>
           </a-col>
           <a-col :span="5">
-            <a-date-picker
-              v-model="item.birthday"
-              placeholder="出生日期"
-              @change="onChange($event, 'birth_date', item.id)"
-            ></a-date-picker>
+            <a-date-picker v-model="item.birthday" :placeholder="$t('cs.companyStructure.birthDatePlaceholder')" @change="onChange($event, 'birthday',item.id)"></a-date-picker>
           </a-col>
           <a-col :span="5">
             <a-input-number
@@ -360,52 +236,52 @@
               :step="1"
               :style="{ width: '100%' }"
               v-model="item.parental_leave_left"
-              placeholder="请输入剩余育儿假"
-              :formatter="(value) => `${value} 天`"
+              :placeholder="$t('cs.companyStructure.')"
+              :formatter="(value) => `${value} $t('cs.companyStructure.day')`"
             />
           </a-col>
           <a-col :span="1">
-            <a @click="addChildren">
+            <a
+              @click="addChildren"
+            >
               <a-icon type="plus-circle" />
             </a>
           </a-col>
           <a-col :span="1" v-if="children_information.length > 1">
-            <a @click="() => removeChildren(item.id)" :style="{ color: 'red' }">
+            <a
+              @click="() => removeChildren(item.id)"
+              :style="{ color: 'red' }"
+            >
               <a-icon type="delete" />
             </a>
           </a-col>
         </a-row>
       </a-form-model-item>
       <a-form-model-item
-        label="银行卡"
+        :label="$t('cs.companyStructure.bankCardInfo')"
         prop="bank_card"
-        :style="{ display: 'inline-block', width: '98%', margin: '0 7px 24px' }"
-        v-if="
-          attributes.findIndex((v) => v == 'bank_card_number') !== -1 ||
-            attributes.findIndex((v) => v == 'bank_card_name') !== -1 ||
-            attributes.findIndex((v) => v == 'opening_bank') !== -1 ||
-            attributes.findIndex((v) => v == 'account_opening_location') !== -1
-        "
+        :style="{display: 'inline-block', width: '98%', margin: '0 7px 24px'}"
+        v-if="attributes.findIndex(v=>v=='bank_card_number')!==-1 || attributes.findIndex(v=>v=='bank_card_name')!==-1 || attributes.findIndex(v=>v=='opening_bank')!==-1 || attributes.findIndex(v=>v=='account_opening_location')!==-1"
       >
-        <a-row :gutter="[8, { xs: 8 }]">
-          <a-col :span="6" v-if="attributes.findIndex((v) => v == 'bank_card_number') !== -1">
-            <a-input v-model="employeeFormData.bank_card_number" placeholder="卡号" allowClear></a-input>
+        <a-row :gutter="[8,{xs:8}]">
+          <a-col :span="6" v-if="attributes.findIndex(v=>v=='bank_card_number')!==-1">
+            <a-input v-model="employeeFormData.bank_card_number" :placeholder="$t('cs.companyStructure.bankCardNumberPlaceholder')" allowClear></a-input>
           </a-col>
-          <a-col :span="6" v-if="attributes.findIndex((v) => v == 'bank_card_name') !== -1">
-            <a-input v-model="employeeFormData.bank_card_name" placeholder="银行" allowClear></a-input>
+          <a-col :span="6" v-if="attributes.findIndex(v=>v=='bank_card_name')!==-1">
+            <a-input v-model="employeeFormData.bank_card_name" :placeholder="$t('cs.companyStructure.bankCardNamePlaceholder')" allowClear></a-input>
           </a-col>
-          <a-col :span="6" v-if="attributes.findIndex((v) => v == 'opening_bank') !== -1">
-            <a-input v-model="employeeFormData.opening_bank" placeholder="开户行" allowClear></a-input>
+          <a-col :span="6" v-if="attributes.findIndex(v=>v=='opening_bank')!==-1">
+            <a-input v-model="employeeFormData.opening_bank" :placeholder="$t('cs.companyStructure.openingBankPlaceholder')" allowClear></a-input>
           </a-col>
-          <a-col :span="6" v-if="attributes.findIndex((v) => v == 'account_opening_location') !== -1">
-            <a-input v-model="employeeFormData.account_opening_location" placeholder="开户地" allowClear></a-input>
+          <a-col :span="6" v-if="attributes.findIndex(v=>v=='account_opening_location')!==-1">
+            <a-input v-model="employeeFormData.account_opening_location" :placeholder="$t('cs.companyStructure.accountOpeningLocationPlaceholder')" allowClear></a-input>
           </a-col>
         </a-row>
       </a-form-model-item>
     </a-form-model>
     <template slot="footer">
-      <a-button key="back" @click="close"> 取消 </a-button>
-      <a-button type="primary" @click="employeeModalHandleOk"> 确定 </a-button>
+      <a-button key="back" @click="close"> {{ $t('cancel') }} </a-button>
+      <a-button type="primary" @click="employeeModalHandleOk"> {{ $t('confirm') }} </a-button>
     </template>
   </a-modal>
 </template>
@@ -425,38 +301,11 @@ export default {
       visible: false,
       employeeFormData: {},
       formModalItemStyle: { display: 'inline-block', width: '48%', margin: '0 7px 24px', overflow: 'hidden' },
-      rules: {
-        email: [
-          { required: true, whitespace: true, message: '请输入邮箱', trigger: 'blur' },
-          {
-            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
-            message: '邮箱格式错误',
-            trigger: 'blur',
-          },
-          { max: 50, message: '字符数须小于50' },
-        ],
-        username: [
-          { required: true, whitespace: true, message: '请输入用户名', trigger: 'blur' },
-          { max: 20, message: '字符数须小于20' },
-        ],
-        password: [{ required: true, whitespace: true, message: '请输入密码', trigger: 'blur' }],
-        nickname: [
-          { required: true, whitespace: true, message: '请输入姓名', trigger: 'blur' },
-          { max: 20, message: '字符数须小于20' },
-        ],
-        mobile: [
-          {
-            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
-            message: '请输入正确的手机号',
-            trigger: 'blur',
-          },
-        ],
-      },
       type: 'add',
       educational_experience: [],
       children_information: [],
       file_is_show: true,
-      attributes: [],
+      attributes: []
     }
   },
   created() {
@@ -466,7 +315,7 @@ export default {
   },
   inject: ['provide_allTreeDepartment', 'provide_allFlatEmployees'],
   computed: {
-    ...mapState({
+        ...mapState({
       windowHeight: (state) => state.windowHeight,
     }),
     departemntTreeSelectOption() {
@@ -477,10 +326,39 @@ export default {
     },
     title() {
       if (this.type === 'add') {
-        return '新建员工'
+        return this.$t('cs.companyStructure.createEmployee')
       }
-      return '编辑员工'
+      return this.$t('cs.companyStructure.editEmployee')
     },
+    rules() {
+      return {
+        email: [
+          { required: true, whitespace: true, message: this.$t('cs.companyStructure.emailPlaceholder'), trigger: 'blur' },
+          {
+            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+            message: this.$t('cs.companyStructure.emailFormatErr'),
+            trigger: 'blur',
+          },
+          { max: 50, message: this.$t('cs.person.inputStrCountLimit', { limit: 50 }) },
+        ],
+        username: [
+          { required: true, whitespace: true, message: '请输入用户名', trigger: 'blur' },
+          { max: 20, message: this.$t('cs.person.inputStrCountLimit', { limit: 20 }) },
+        ],
+        password: [{ required: true, whitespace: true, message: '请输入密码', trigger: 'blur' }],
+        nickname: [
+          { required: true, whitespace: true, message: '请输入姓名', trigger: 'blur' },
+          { max: 20, message: this.$t('cs.person.inputStrCountLimit', { limit: 20 }) },
+        ],
+        mobile: [
+          {
+            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
+            message: this.$t('cs.companyStructure.mobileFormatErr'),
+            trigger: 'blur',
+          },
+        ],
+      }
+    }
   },
   beforeDestroy() {
     Bus.$off('getAttributes')
@@ -488,8 +366,7 @@ export default {
   methods: {
     async open(getData, type) {
       // 提交时去掉school, major, education, graduation_year, name, gender, birthday, parental_leave_left
-      const { school, major, education, graduation_year, name, gender, birthday, parental_leave_left, ...newGetData } =
-        getData
+      const { school, major, education, graduation_year, name, gender, birthday, parental_leave_left, ...newGetData } = getData
       const _getData = _.cloneDeep(newGetData)
       const { direct_supervisor_id } = newGetData
       if (direct_supervisor_id) {
@@ -502,54 +379,46 @@ export default {
       // if (type !== 'add' && this.employeeFormData.educational_experience.length !== 0) {
       //   this.educational_experience = this.employeeFormData.educational_experience
       // }
-      this.children_information = this.formatChildrenInformationList() || [
-        {
-          id: uuidv4(),
-          name: '',
-          gender: undefined,
-          birthday: null,
-          parental_leave_left: 0,
-        },
-      ]
-      this.educational_experience = this.formatEducationalExperienceList() || [
-        {
-          id: uuidv4(),
-          school: '',
-          major: '',
-          education: undefined,
-          graduation_year: null,
-        },
-      ]
+      this.children_information = this.formatChildrenInformationList() || [{
+        id: uuidv4(),
+        name: '',
+        gender: undefined,
+        birthday: null,
+        parental_leave_left: 0
+      }]
+      this.educational_experience = this.formatEducationalExperienceList() || [{
+        id: uuidv4(),
+        school: '',
+        major: '',
+        education: undefined,
+        graduation_year: null
+      }]
 
       this.type = type
       this.visible = true
     },
     close() {
       this.$refs.employeeFormData.resetFields()
-      this.educational_experience = [
-        {
-          school: '',
-          major: '',
-          education: undefined,
-          graduation_year: null,
-        },
-      ]
-      this.children_information = [
-        {
-          id: uuidv4(),
-          name: '',
-          gender: undefined,
-          birthday: null,
-          parental_leave_left: 0,
-        },
-      ]
+      this.educational_experience = [{
+        school: '',
+        major: '',
+        education: undefined,
+        graduation_year: null
+      }]
+      this.children_information = [{
+        id: uuidv4(),
+        name: '',
+        gender: undefined,
+        birthday: null,
+        parental_leave_left: 0
+      }]
       this.visible = false
     },
     formatChildrenInformationList() {
       let arr = []
       arr = this.employeeFormData.children_information ? this.employeeFormData.children_information : undefined
       if (arr && arr.length) {
-        arr.forEach((item) => {
+        arr.forEach(item => {
           item.id = uuidv4()
         })
         return arr
@@ -560,7 +429,7 @@ export default {
       let arr = []
       arr = this.employeeFormData.educational_experience ? this.employeeFormData.educational_experience : undefined
       if (arr && arr.length) {
-        arr.forEach((item) => {
+        arr.forEach(item => {
           item.id = uuidv4()
         })
         return arr
@@ -573,12 +442,12 @@ export default {
         school: '',
         major: '',
         education: undefined,
-        graduation_year: null,
+        graduation_year: null
       }
       this.educational_experience.push(newEducational_experience)
     },
     removeEducation(removeId) {
-      const _idx = this.educational_experience.findIndex((item) => item.id === removeId)
+      const _idx = this.educational_experience.findIndex(item => item.id === removeId)
       if (_idx !== -1) {
         this.educational_experience.splice(_idx, 1)
       }
@@ -589,12 +458,12 @@ export default {
         name: '',
         gender: undefined,
         birthday: null,
-        parental_leave_left: 0,
+        parental_leave_left: 0
       }
       this.children_information.push(newChildrenInfo)
     },
     removeChildren(removeId) {
-      const _idx = this.children_information.findIndex((item) => item.id === removeId)
+      const _idx = this.children_information.findIndex(item => item.id === removeId)
       if (_idx !== -1) {
         this.children_information.splice(_idx, 1)
       }
@@ -615,10 +484,10 @@ export default {
       // }
       if (date !== null) {
         if (param === 'graduation_year') {
-          const _idx = this.educational_experience.findIndex((item) => item.id === id)
+          const _idx = this.educational_experience.findIndex(item => item.id === id)
           this.educational_experience[_idx].graduation_year = moment(date).format('YYYY-MM')
-        } else if (param === 'birth_date') {
-          const _idx = this.children_information.findIndex((item) => item.id === id)
+        } else if (param === 'birthday') {
+          const _idx = this.children_information.findIndex(item => item.id === id)
           this.children_information[_idx].birthday = moment(date).format('YYYY-MM-DD')
         } else {
           this.employeeFormData[param] = moment(date).format('YYYY-MM-DD')
@@ -649,12 +518,12 @@ export default {
           if (this.type === 'edit') {
             await putEmployee(getFormData.employee_id, getFormData)
           }
-          this.$message.success('操作成功')
+          this.$message.success(this.$t('cs.companyStructure.opSuccess'))
           this.$emit('refresh')
           Bus.$emit('updataAllIncludeEmployees')
           this.close()
         } else {
-          this.$message.warning('检查您的输入是否正确!')
+          this.$message.warning(this.$t('cs.companyInfo.checkInputCorrect'))
           return false
         }
       })
@@ -664,7 +533,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .el-date-picker {
-  width: 100%;
-  height: 36px;
+    width: 100%;
+    height: 36px;
 }
 </style>
diff --git a/cmdb-ui/src/views/setting/companyStructure/index.vue b/cmdb-ui/src/views/setting/companyStructure/index.vue
index 7620d25..181e6e7 100644
--- a/cmdb-ui/src/views/setting/companyStructure/index.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/index.vue
@@ -21,7 +21,7 @@
               :class="{ 'group-selected': groupIndex === activeGroupIndex }"
             >
               <div class="ops-setting-structure-sidebar-group-header-avatar">
-                <a-icon :type="group.icon" />
+                <a-icon :type="group.icon"/>
               </div>
               <span
                 class="ops-setting-structure-sidebar-group-header-title"
@@ -46,7 +46,7 @@
                 >
                   <div class="ops-setting-structure-sidebar-group-category-item-title" @click="clickSelectItem(0)">
                     <div class="item-title">
-                      在职员工
+                      {{ $t('cs.companyStructure.activeEmployee') }}
                     </div>
                     <div class="item-count">
                       <div class="item-count-before">{{ activeEmployeeCount }}</div>
@@ -61,7 +61,7 @@
                 >
                   <div class="ops-setting-structure-sidebar-group-category-item-title" @click="clickSelectItem(1)">
                     <div class="item-title">
-                      停用员工
+                      {{ $t('cs.companyStructure.blockEmployee') }}
                     </div>
                     <div class="item-count">
                       <div class="item-count-before">{{ deactiveEmployeeCount }}</div>
@@ -70,7 +70,7 @@
                 </div>
               </div>
             </CollapseTransition>
-            <ul :style="{ marginTop: '10px' }" v-if="activeGroupIndex === groupIndex && activeGroupIndex === 1" >
+            <ul :style="{ marginTop: '10px' }" v-if="activeGroupIndex === groupIndex && activeGroupIndex === 1">
               <CategroyTree
                 v-for="(subTree, subIndex) in departmentList"
                 :id="subTree.id"
@@ -96,7 +96,7 @@
                     v-model="filterName"
                     :style="{ minWidth: '200px' }"
                     class="ops-input ops-input-radius"
-                    placeholder="请输入姓名/邮箱"
+                    :placeholder="$t('cs.role.inputNameOrEmail')"
                     @search="updateTableDataByFilter()"
                   />
                 </div>
@@ -123,16 +123,16 @@
                       </div>
                     </template>
                     <span :style="{ whiteSpace: 'nowrap' }">
-                      <a-icon class="screening-box-scene-icon" type="filter" />
+                      <a-icon class="screening-box-scene-icon" type="filter"/>
                       {{ getCurrentSceneLabel() }}
-                      <a-icon class="screening-box-scene-icon" :type="displayTimeIcon" />
+                      <a-icon class="screening-box-scene-icon" :type="displayTimeIcon"/>
                     </span>
                   </a-popover>
                 </div>
                 <SearchForm
                   ref="search"
                   :canSearchPreferenceAttrList="canSearchPreferenceAttrList"
-                  @refresh="handleSearch" />
+                  @refresh="handleSearch"/>
               </div>
               <div>
                 <a-space v-if="isEditable">
@@ -144,10 +144,12 @@
                     icon="plus"
                     ghost
                   />
-                  <a-button type="primary" size="small" ghost @click="batchUpload"> 批量导入 </a-button>
+                  <a-button type="primary" size="small" ghost @click="batchUpload">
+                    {{ $t('cs.companyStructure.batchImport') }}
+                  </a-button>
                   <template v-if="activeGroupIndex === 1 && selectDepartment.hasOwnProperty('id')">
                     <a-button type="primary" size="small" ghost @click="openDepartmentModal('add')">
-                      创建子部门
+                      {{ $t('cs.companyStructure.createSubDepartment') }}
                     </a-button>
                     <a-button
                       type="primary"
@@ -156,10 +158,10 @@
                       @click="openDepartmentModal('edit')"
                       v-if="selectDepartment.id"
                     >
-                      编辑部门
+                      {{ $t('cs.companyStructure.editDepartment') }}
                     </a-button>
                     <a-button v-if="selectDepartment.id" type="danger" size="small" ghost @click="deleteDepartment">
-                      删除部门
+                      {{ $t('cs.companyStructure.deleteDepartment') }}
                     </a-button>
                   </template>
                 </a-space>
@@ -168,25 +170,26 @@
             <div class="ops-setting-batch">
               <div>
                 <div :style="{ marginTop: '8px' }" class="ops-list-batch-action" v-show="!!selectedRowKeys.length">
-                  <span @click="downloadEmployeeAll">下载全部</span>
-                  <a-divider type="vertical" />
-                  <span @click="exportSelectEvent">下载选中</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('department_id')">编辑部门</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('direct_supervisor_id')">编辑上级</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('position_name')">编辑岗位</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('annual_leave')">编辑年假</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('password')">重置密码</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('block', null, 1)">禁用</span>
-                  <a-divider type="vertical" />
-                  <span @click="openBatchModal('block', null, 0)">恢复</span>
-                  <a-divider type="vertical" />
-                  <span>选取: {{ selectedRowKeys.length }} 项</span>
+                  <span @click="downloadEmployeeAll">{{ $t('cs.companyStructure.downloadAll') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="exportSelectEvent">{{ $t('cs.companyStructure.downloadSelected') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('department_id')">{{ $t('cs.companyStructure.editDepartment') }}</span>
+                  <a-divider type="vertical"/>
+                  <span
+                    @click="openBatchModal('direct_supervisor_id')">{{ $t('cs.companyStructure.editDirectSupervisor') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('position_name')">{{ $t('cs.companyStructure.editPosition') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('annual_leave')">{{ $t('cs.companyStructure.editAnnualLeave') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('password')">{{ $t('cs.companyStructure.resetPassword') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('block', null, 1)">{{ $t('cs.companyStructure.block') }}</span>
+                  <a-divider type="vertical"/>
+                  <span @click="openBatchModal('block', null, 0)">{{ $t('cs.companyStructure.recover') }}</span>
+                  <a-divider type="vertical"/>
+                  <span>{{ $t('selectRows', {rows: selectedRowKeys.length}) }}</span>
                 </div>
               </div>
               <!-- <div>
@@ -197,14 +200,15 @@
             </div>
           </div>
           <!-- 批量操作对话框 -->
-          <BatchModal ref="BatchModal" @refresh="updateAll" />
+          <BatchModal ref="BatchModal" @refresh="updateAll"/>
           <!-- 部门表单对话框 -->
-          <DepartmentModal ref="DepartmentModal" @refresh="clickSelectGroup(1)" />
+          <DepartmentModal ref="DepartmentModal" @refresh="clickSelectGroup(1)"/>
           <!-- 员工表单对话框 -->
-          <EmployeeModal ref="EmployeeModal" @refresh="updateAll" />
+          <EmployeeModal ref="EmployeeModal" @refresh="updateAll"/>
 
           <!-- 表格展示 -->
           <EmployeeTable
+            ref="employeeTable"
             :tableData="tableData"
             :tableHeight="tableHeight"
             @sortChangeEvent="sortChangeEvent"
@@ -226,15 +230,15 @@
               :page-size-options="pageSizeOptions"
               :current="tablePage.currentPage"
               :total="tablePage.totalResult"
-              :show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
+              :show-total="(total, range) => $t('pagination.total', { range0: range[0], range1: range[1], total:total })"
               :page-size="tablePage.pageSize"
               :default-current="1"
               @change="pageOrSizeChange"
               @showSizeChange="pageOrSizeChange"
             >
               <template #buildOptionText="props">
-                <span v-if="props.value !== '9999'">{{ props.value }}条/页</span>
-                <span v-else>全部</span>
+                <span v-if="props.value !== '9999'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
+                <span v-else>{{ $t('all') }}</span>
               </template>
             </a-pagination>
           </div>
@@ -288,74 +292,16 @@ export default {
     SearchForm
   },
   data() {
-    const canSearchPreferenceAttrList = [
-        { label: '姓名', value: 'nickname' },
-        { label: '用户名', value: 'username' },
-        { label: '邮箱', value: 'email' },
-        { label: '性别', value: 'sex', is_choice: true, choice_value: [{ label: '男', value: '男' }, { label: '女', value: '女' }] },
-        { label: '手机号', value: 'mobile' },
-        { label: '部门', value: 'department_name' },
-        { label: '岗位', value: 'position_name' },
-        { label: '直接上级', value: 'direct_supervisor_id' },
-        { label: '年假', value: 'annual_leave' },
-        { label: '目前所属主体', value: 'current_company' },
-        { label: '初始入职日期', value: 'dfc_entry_date' },
-        { label: '目前主体入职日期', value: 'entry_date' },
-        { label: '正式/实习生', value: 'is_internship', is_choice: true, choice_value: [{ label: '正式', value: 0 }, { label: '实习生', value: 1 }] },
-        { label: '离职日期', value: 'leave_date' },
-        { label: '身份证号码', value: 'id_card' },
-        { label: '民族', value: 'nation' },
-        { label: '籍贯', value: 'id_place' },
-        { label: '组织关系', value: 'party', is_choice: true, choice_value: [{ label: '党员', value: '党员' }, { label: '团员', value: '团员' }, { label: '群众', value: '群众' }] },
-        { label: '户籍类型', value: 'household_registration_type', is_choice: true, choice_value: [{ label: '城镇', value: '城镇' }, { label: '农业', value: '农业' }] },
-        { label: '户口所在地', value: 'hometown' },
-        { label: '婚姻情况', value: 'marry', is_choice: true, choice_value: [{ label: '未婚', value: '未婚' }, { label: '已婚', value: '已婚' }] },
-        { label: '最高学历', value: 'max_degree', is_choice: true, choice_value: [{ label: '博士', value: '博士' }, { label: '硕士', value: '硕士' }, { label: '本科', value: '本科' }, { label: '专科', value: '专科' }, { label: '高中', value: '高中' }] },
-        { label: '紧急联系人', value: 'emergency_person' },
-        { label: '紧急联系电话', value: 'emergency_phone' },
-        { label: '卡号', value: 'bank_card_number' },
-        { label: '银行', value: 'bank_card_name' },
-        { label: '开户行', value: 'opening_bank' },
-        { label: '开户地', value: 'account_opening_location' },
-        { label: '上次登录时间', value: 'last_login' },
-      ]
-
     return {
       isActive: '',
       visible: true,
-      sceneList: [
-        {
-          label: '全部',
-          value: -1,
-        },
-        {
-          label: '在职员工',
-          value: 0,
-        },
-        {
-          label: '停用员工',
-          value: 1,
-        },
-      ],
-      localStorageKey: 'setting-company-strcutre',
+      localStorageKey: 'itsm-company-strcutre',
       localStoragePaneLengthPixel: 'setting-structure-paneLengthPixel',
       displayTimeIcon: 'down',
       currentScene: '',
       // historySceneitemSelected: 'history-scene-item-selected',
       // historySceneItem: 'history-scene-item',
       paneLengthPixel: 204,
-      groupData: [
-        {
-          id: 0,
-          title: '员工',
-          icon: 'user',
-        },
-        {
-          id: 1,
-          title: '部门',
-          icon: 'apartment',
-        },
-      ],
       tableData: [],
       activeEmployeeCount: 0,
       deactiveEmployeeCount: 0,
@@ -378,7 +324,6 @@ export default {
       allTreeDepartment: [],
       allTreeDepAndEmp: [],
       isFolder: false,
-      canSearchPreferenceAttrList,
       attributes: [],
       pageSizeOptions: ['50', '100', '200', '9999'],
       expression: [],
@@ -413,6 +358,115 @@ export default {
     isEditable() {
       return this.hasDetailPermission('backend', '公司架构', ['update'])
     },
+    canSearchPreferenceAttrList() {
+      return [
+        { label: this.$t('cs.companyStructure.nickname'), value: 'nickname' },
+        { label: this.$t('cs.companyStructure.username'), value: 'username' },
+        { label: this.$t('cs.companyStructure.email'), value: 'email' },
+        {
+          label: this.$t('cs.companyStructure.sex'),
+          value: 'sex',
+          is_choice: true,
+          choice_value: [
+              { label: this.$t('cs.companyStructure.male'), value: '男' },
+            { label: this.$t('cs.companyStructure.female'), value: '女' }]
+        },
+        { label: this.$t('cs.companyStructure.mobile'), value: 'mobile' },
+        { label: this.$t('cs.companyStructure.departmentName'), value: 'department_name' },
+        { label: this.$t('cs.companyStructure.positionName'), value: 'position_name' },
+        { label: this.$t('cs.companyStructure.departmentDirector'), value: 'direct_supervisor_id' },
+        { label: this.$t('cs.companyStructure.annualLeave'), value: 'annual_leave' },
+        { label: this.$t('cs.companyStructure.currentCompany'), value: 'current_company' },
+        { label: this.$t('cs.companyStructure.dfcEntryDate'), value: 'dfc_entry_date' },
+        { label: this.$t('cs.companyStructure.entryDate'), value: 'entry_date' },
+        {
+          label: this.$t('cs.companyStructure.isInternship'),
+          value: 'is_internship',
+          is_choice: true,
+          choice_value: [{ label: this.$t('cs.companyStructure.fullTime'), value: 0 },
+            { label: this.$t('cs.companyStructure.internship'), value: 1 }]
+        },
+        { label: this.$t('cs.companyStructure.leaveDate'), value: 'leave_date' },
+        { label: this.$t('cs.companyStructure.idCard'), value: 'id_card' },
+        { label: this.$t('cs.companyStructure.nation'), value: 'nation' },
+        { label: this.$t('cs.companyStructure.idPlace'), value: 'id_place' },
+        {
+          label: this.$t('cs.companyStructure.party'),
+          value: 'party',
+          is_choice: true,
+          choice_value: [
+              { label: this.$t('cs.companyStructure.partyMember'), value: '党员' },
+            { label: this.$t('cs.companyStructure.member'), value: '团员' },
+            { label: this.$t('cs.companyStructure.masses'), value: '群众' }]
+        },
+        {
+          label: this.$t('cs.companyStructure.householdRegistrationType'),
+          value: 'household_registration_type',
+          is_choice: true,
+          choice_value: [{ label: this.$t('cs.companyStructure.town'), value: '城镇' }, { label: this.$t('cs.companyStructure.agriculture'), value: '农业' }]
+        },
+        { label: this.$t('cs.companyStructure.hometown'), value: 'hometown' },
+        {
+          label: this.$t('cs.companyStructure.marry'),
+          value: 'marry',
+          is_choice: true,
+          choice_value: [{ label: this.$t('cs.companyStructure.unmarried'), value: '未婚' }, { label: this.$t('cs.companyStructure.married'), value: '已婚' }]
+        },
+        {
+          label: this.$t('cs.companyStructure.maxDegree'),
+          value: 'max_degree',
+          is_choice: true,
+          choice_value: [{ label: this.$t('cs.companyStructure.phd'), value: '博士' }, { label: this.$t('cs.companyStructure.master'), value: '硕士' }, {
+            label: this.$t('cs.companyStructure.undergraduate'),
+            value: '本科'
+          }, { label: this.$t('cs.companyStructure.specialist'), value: '专科' }, { label: this.$t('cs.companyStructure.highSchool'), value: '高中' }]
+        },
+        { label: this.$t('cs.companyStructure.emergencyPerson'), value: 'emergency_person' },
+        { label: this.$t('cs.companyStructure.emergencyPhone'), value: 'emergency_phone' },
+        { label: this.$t('cs.companyStructure.bankCardNumber'), value: 'bank_card_number' },
+        { label: this.$t('cs.companyStructure.bankCardName'), value: 'bank_card_name' },
+        { label: this.$t('cs.companyStructure.openingBank'), value: 'opening_bank' },
+        { label: this.$t('cs.companyStructure.accountOpeningLocation'), value: 'account_opening_location' },
+        { label: this.$t('cs.companyStructure.birthDate'), value: 'birth_date' },
+        { label: this.$t('cs.companyStructure.nationalityRegion'), value: 'nationality_region' },
+        { label: this.$t('cs.companyStructure.birthPlace'), value: 'birth_place' },
+        { label: this.$t('cs.companyStructure.firstEntryDate'), value: 'first_entry_date' },
+        { label: this.$t('cs.companyStructure.estimatedDepartureDate'), value: 'estimated_departure_date' },
+        // { label: '角色', value: 'roles' },
+        { label: this.$t('cs.companyStructure.lastLogin'), value: 'last_login' },
+
+      ]
+    },
+    sceneList () {
+      return [
+        {
+          label: this.$t('all'),
+          value: -1,
+        },
+        {
+          label: this.$t('cs.companyStructure.activeEmployee'),
+          value: 0,
+        },
+        {
+          label: this.$t('cs.companyStructure.blockEmployee'),
+          value: 1,
+        },
+      ]
+    },
+    groupData () {
+      return [
+        {
+          id: 0,
+          title: this.$t('cs.companyStructure.employee'),
+          icon: 'user',
+        },
+        {
+          id: 1,
+          title: this.$t('cs.companyStructure.departmentName'),
+          icon: 'apartment',
+        },
+      ]
+    }
   },
   provide() {
     return {
@@ -470,6 +524,9 @@ export default {
     Bus.$on('clickSelectGroup', async (index) => {
       this.clickSelectGroup(index)
     })
+    Bus.$on('changeSelectedRowKeys', (selectedRowKeys) => {
+      this.selectedRowKeys = selectedRowKeys
+    })
     this.getAllFlatEmployees()
     this.getAllFlatDepartment()
     this.getAllTreeDepartment()
@@ -480,6 +537,7 @@ export default {
     Bus.$off('updateAllIncludeDepartment')
     Bus.$off('selectDepartment')
     Bus.$off('reqChildren')
+    Bus.$off('changeSelectedRowKeys')
   },
   methods: {
     // mouseOver: function() {
@@ -579,55 +637,7 @@ export default {
           order: this.tableSortData || 'direct_supervisor_id',
         })
       }
-      //   console.log(this.activeGroupIndex, reqEmployeeData)
-      this.tableData = reqEmployeeData.data_list
-      if (reqEmployeeData.data_list.length) {
-        // 筛选教育经历数组中学历最高的一条记录
-        if (reqEmployeeData.data_list[0].educational_experience) {
-          reqEmployeeData.data_list.forEach((row, row_index) => {
-            const educational_experience = row.educational_experience
-            if (educational_experience.length > 1) {
-              let max_index = 0
-              educational_experience.forEach((item, index) => {
-                if (index < educational_experience.length - 1) {
-                  max_index = item.graduation_year > educational_experience[index + 1].graduation_year ? index : index + 1
-                }
-              })
-            this.tableData[row_index].school = educational_experience[max_index].school
-            this.tableData[row_index].major = educational_experience[max_index].major
-            this.tableData[row_index].education = educational_experience[max_index].education
-            this.tableData[row_index].graduation_year = educational_experience[max_index].graduation_year
-            } else if (educational_experience.length === 1) {
-                this.tableData[row_index].school = educational_experience[0].school
-                this.tableData[row_index].major = educational_experience[0].major
-                this.tableData[row_index].education = educational_experience[0].education
-                this.tableData[row_index].graduation_year = educational_experience[0].graduation_year
-            } else {
-                this.tableData[row_index].school = ''
-                this.tableData[row_index].major = ''
-                this.tableData[row_index].education = ''
-                this.tableData[row_index].graduation_year = ''
-            }
-          })
-        }
-        // 筛选子女信息中第一位展示在employeeTable
-        if (reqEmployeeData.data_list[0].children_information) {
-          reqEmployeeData.data_list.forEach((row, row_index) => {
-            const children_information = row.children_information
-            if (children_information.length) {
-              this.tableData[row_index].name = children_information[0].name
-              this.tableData[row_index].gender = children_information[0].gender
-              this.tableData[row_index].birthday = children_information[0].birthday
-              this.tableData[row_index].parental_leave_left = children_information[0].parental_leave_left
-            } else {
-                this.tableData[row_index].name = ''
-                this.tableData[row_index].gender = ''
-                this.tableData[row_index].birthday = ''
-                this.tableData[row_index].parental_leave_left = ''
-            }
-          })
-        }
-      }
+      this.tableData = this.FilterTableData(reqEmployeeData)
       this.tablePage = {
         ...this.tablePage,
         currentPage: reqEmployeeData.page,
@@ -661,57 +671,7 @@ export default {
           order: this.tableSortData || 'direct_supervisor_id',
         })
       }
-      const tableData = reqEmployeeData.data_list
-      // 筛选教育经历数组中学历最高的一条记录
-      if (reqEmployeeData.data_list.length) {
-        if (reqEmployeeData.data_list[0].educational_experience) {
-          // reqEmployeeData.data_list.forEach((row, row_index) => {
-          for (let index = 0, len = reqEmployeeData.data_list.length; index < len; index++) {
-            const educational_experience = reqEmployeeData.data_list[index].educational_experience
-            if (educational_experience.length > 1) {
-              let max_index = 0
-              educational_experience.forEach((item, index) => {
-                if (index < educational_experience.length - 1) {
-                  max_index = item.graduation_year > educational_experience[index + 1].graduation_year ? index : index + 1
-                }
-              })
-            tableData[index].school = educational_experience[max_index].school
-            tableData[index].major = educational_experience[max_index].major
-            tableData[index].education = educational_experience[max_index].education
-            tableData[index].graduation_year = educational_experience[max_index].graduation_year
-            } else if (educational_experience.length === 1) {
-                tableData[index].school = educational_experience[0].school
-                tableData[index].major = educational_experience[0].major
-                tableData[index].education = educational_experience[0].education
-                tableData[index].graduation_year = educational_experience[0].graduation_year
-            } else {
-                tableData[index].school = ''
-                tableData[index].major = ''
-                tableData[index].education = ''
-                tableData[index].graduation_year = ''
-            }
-          }
-        }
-        // 筛选子女信息中第一位展示在employeeTable
-        if (reqEmployeeData.data_list[0].children_information) {
-          // reqEmployeeData.data_list.forEach((row, row_index) => {
-            for (let row_index = 0, len = reqEmployeeData.data_list.length; row_index < len; row_index++) {
-            const children_information = reqEmployeeData.data_list[row_index].children_information
-            if (children_information.length) {
-              tableData[row_index].name = children_information[0].name
-              tableData[row_index].gender = children_information[0].gender
-              tableData[row_index].birthday = children_information[0].birthday
-              tableData[row_index].parental_leave_left = children_information[0].parental_leave_left
-            } else {
-                tableData[row_index].name = ''
-                tableData[row_index].gender = ''
-                tableData[row_index].birthday = ''
-                tableData[row_index].parental_leave_left = ''
-            }
-          }
-        }
-      }
-      this.tableData = tableData
+      this.tableData = this.FilterTableData(reqEmployeeData)
       this.tablePage = {
         ...this.tablePage,
         currentPage: reqEmployeeData.page,
@@ -720,6 +680,63 @@ export default {
       }
       this.loading = false
     },
+    FilterTableData(reqEmployeeData) {
+      const tableData = reqEmployeeData.data_list
+      // 筛选教育经历数组中学历最高的一条记录
+      if (reqEmployeeData.data_list.length) {
+        if (reqEmployeeData.data_list[0].educational_experience) {
+          // reqEmployeeData.data_list.forEach((row, row_index) => {
+          for (let index = 0, len = reqEmployeeData.data_list.length; index < len; index++) {
+            const educational_experience = reqEmployeeData.data_list[index].educational_experience
+            if (educational_experience) {
+              if (educational_experience.length > 1) {
+                let max_index = 0
+                educational_experience.forEach((item, index) => {
+                  if (index < educational_experience.length - 1) {
+                    max_index = item.graduation_year > educational_experience[index + 1].graduation_year ? index : index + 1
+                  }
+                })
+                tableData[index].school = educational_experience[max_index].school
+                tableData[index].major = educational_experience[max_index].major
+                tableData[index].education = educational_experience[max_index].education
+                tableData[index].graduation_year = educational_experience[max_index].graduation_year
+              } else if (educational_experience.length === 1) {
+                tableData[index].school = educational_experience[0].school
+                tableData[index].major = educational_experience[0].major
+                tableData[index].education = educational_experience[0].education
+                tableData[index].graduation_year = educational_experience[0].graduation_year
+              } else {
+                tableData[index].school = ''
+                tableData[index].major = ''
+                tableData[index].education = ''
+                tableData[index].graduation_year = ''
+              }
+            }
+          }
+        }
+        // 筛选子女信息中第一位展示在employeeTable
+        if (reqEmployeeData.data_list[0].children_information) {
+          // reqEmployeeData.data_list.forEach((row, row_index) => {
+          for (let row_index = 0, len = reqEmployeeData.data_list.length; row_index < len; row_index++) {
+            const children_information = reqEmployeeData.data_list[row_index].children_information
+            if (children_information) {
+              if (children_information.length) {
+                tableData[row_index].name = children_information[0].name
+                tableData[row_index].gender = children_information[0].gender
+                tableData[row_index].birthday = children_information[0].birthday
+                tableData[row_index].parental_leave_left = children_information[0].parental_leave_left
+              } else {
+                tableData[row_index].name = ''
+                tableData[row_index].gender = ''
+                tableData[row_index].birthday = ''
+                tableData[row_index].parental_leave_left = ''
+              }
+            }
+          }
+        }
+      }
+      return tableData
+    },
     updateAll() {
       // this.expression = []
       this.updateCount()
@@ -771,6 +788,11 @@ export default {
         a.click()
         window.URL.revokeObjectURL(url)
       })
+      this.$refs.employeeTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.employeeTable.getVxetableRef().clearCheckboxReserve()
+      this.$refs.employeeTable.getVxetableRef().clearSort()
+      this.tableSortData = undefined
+      this.selectedRowKeys = []
     },
     reset() {
       this.filterName = ''
@@ -842,18 +864,18 @@ export default {
       if (this.selectDepartment.hasOwnProperty('id')) {
         this.$refs.DepartmentModal.open({ type, selectDepartment: this.selectDepartment })
       } else {
-        this.$message.error('请选择部门')
+        this.$message.error(this.$t('cs.companyStructure.selectDepartment'))
       }
     },
     async deleteDepartment() {
       const that = this
       this.$confirm({
-        title: '警告',
-        content: `确认删除 【${this.selectDepartment.title}】？`,
+        title: this.$t('warning'),
+        content: this.$t('confirmDelete2', { name: this.selectDepartment.title }),
         onOk() {
           deleteDepartmentById(that.selectDepartment.id).then((res) => {
             that.clickSelectGroup(1)
-            that.$message.success('删除成功！')
+            that.$message.success(that.$t('deleteSuccess'))
             Bus.$emit('updateAllIncludeDepartment')
           })
         },
@@ -876,14 +898,20 @@ export default {
     },
     sortChangeEvent({ sortList }) {
       this.tableSortData = sortList
-        .map((item) => {
-          return `${item.order === 'asc' ? '' : '-'}${item.property}`
-        })
-        .join(',')
+          .map((item) => {
+            return `${item.order === 'asc' ? '' : '-'}${item.property}`
+          })
+          .join(',')
       this.updateTableDataByFilter()
     },
     filterChangeEvent({ column, property, values, datas, filterList, $event }) {
-        if (property === 'is_internship') {
+      if (property === 'roles') {
+        this.tableFilterData = {
+          ...this.tableFilterData,
+          // role_id_list: values && values.length ? values.join(',') : undefined,
+          role_id_list: values && values.length ? values : undefined,
+        }
+      } else if (property === 'is_internship') {
         this.tableFilterData = {
           ...this.tableFilterData,
           is_internship: values && values.length ? values[0] : undefined,
@@ -1098,7 +1126,8 @@ export default {
           }
         }
       }
-      .ops-setting-batch{
+
+      .ops-setting-batch {
         width: 100%;
         display: flex;
         justify-content: space-between;
diff --git a/cmdb-ui/src/views/setting/components/EditImage.vue b/cmdb-ui/src/views/setting/components/EditImage.vue
index e17b4a4..d5481e5 100644
--- a/cmdb-ui/src/views/setting/components/EditImage.vue
+++ b/cmdb-ui/src/views/setting/components/EditImage.vue
@@ -18,14 +18,13 @@
         :img="cropperImg"
         output-type="png"
         @realTime="realTime"
-        v-bind="eidtImageOption"
       />
       <div class="ops-modal-preview">
-        <div class="ops-modal-preview-name">预览</div>
+        <div class="ops-modal-preview-name">{{ $t('cs.components.preview') }}</div>
         <img
           :style="{
-            width: eidtImageOption.previewWidth,
-            height: eidtImageOption.previewHeight,
+            width: previewWidth,
+            height: previewHeight,
             border: '1px solid #f2f2f2',
           }"
           :src="previewImg"
@@ -35,7 +34,7 @@
     </div>
 
     <div slot="footer" class="ops-modal-dialog-footer">
-      <a-button type="primary" @click="submitImage()">确定</a-button>
+      <a-button type="primary" @click="submitImage()">{{ $t('confirm') }}</a-button>
     </div>
   </a-modal>
 </template>
@@ -50,7 +49,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: '编辑头像',
+      default: () => this.$t('cs.components.editAvatar'),
     },
     show: {
       type: Boolean,
@@ -60,9 +59,13 @@ export default {
       type: String,
       default: '',
     },
-    eidtImageOption: {
-      type: Object,
-      default: () => {},
+    previewWidth: {
+      type: String,
+      default: '60px',
+    },
+    previewHeight: {
+      type: String,
+      default: '60px',
     },
   },
   data() {
diff --git a/cmdb-ui/src/views/setting/components/SearchForm.vue b/cmdb-ui/src/views/setting/components/SearchForm.vue
index 174d2e5..188b6bb 100644
--- a/cmdb-ui/src/views/setting/components/SearchForm.vue
+++ b/cmdb-ui/src/views/setting/components/SearchForm.vue
@@ -9,7 +9,7 @@
       >
         <div slot="popover_item" class="search-form-bar-filter">
           <a-icon :class="filterExp.length ? 'search-form-bar-filter-icon' : 'search-form-bar-filter-icon_selected'" type="filter"/>
-          条件过滤
+          {{ $t('cs.components.conditionFilter') }}
           <a-icon :class="filterExp.length ? 'search-form-bar-filter-icon' : 'search-form-bar-filter-icon_selected'" type="down"/>
         </div>
       </FilterComp>
diff --git a/cmdb-ui/src/views/setting/components/departmentTreeSelect.vue b/cmdb-ui/src/views/setting/components/departmentTreeSelect.vue
index 8532497..ba76362 100644
--- a/cmdb-ui/src/views/setting/components/departmentTreeSelect.vue
+++ b/cmdb-ui/src/views/setting/components/departmentTreeSelect.vue
@@ -2,12 +2,12 @@
   <treeselect
     :multiple="false"
     :options="departemntTreeSelectOption"
-    placeholder="请选择部门"
+    :placeholder="readOnly ? '' : $t('cs.companyStructure.selectDepartment')"
     v-model="treeValue"
     :normalizer="normalizer"
-    noChildrenText="空"
-    noOptionsText="空"
-    class="ops-setting-treeselect"
+    :noChildrenText="$t('cs.components.empty')"
+    :noOptionsText="$t('cs.components.empty')"
+    :class="className ? className : 'ops-setting-treeselect'"
     v-bind="$attrs"
     appendToBody
     :zIndex="1050"
@@ -28,6 +28,10 @@ export default {
       type: [String, Array, Number, null],
       default: null,
     },
+    className: {
+      type: String,
+      default: 'ops-setting-treeselect',
+    },
   },
   data() {
     return {
@@ -46,7 +50,15 @@ export default {
       },
     }
   },
-  inject: ['provide_allTreeDepartment'],
+  inject: {
+    provide_allTreeDepartment: {
+      from: 'provide_allTreeDepartment',
+    },
+    readOnly: {
+      from: 'readOnly',
+      default: false,
+    },
+  },
   computed: {
     departemntTreeSelectOption() {
       return this.provide_allTreeDepartment()
diff --git a/cmdb-ui/src/views/setting/components/employeeTable.vue b/cmdb-ui/src/views/setting/components/employeeTable.vue
index 1f12865..85cd9e8 100644
--- a/cmdb-ui/src/views/setting/components/employeeTable.vue
+++ b/cmdb-ui/src/views/setting/components/employeeTable.vue
@@ -26,7 +26,7 @@
     <vxe-column
       field="nickname"
       min-width="100px"
-      title="姓名"
+      :title="$t('cs.companyStructure.nickname')"
       sortable
       v-if="checkedCols.findIndex((v) => v == 'nickname') !== -1 && attributes.findIndex((v) => v == 'nickname') !== -1"
       key="nickname"
@@ -49,7 +49,7 @@
     </vxe-column>
     <vxe-column
       field="username"
-      title="用户名"
+      :title="$t('cs.companyStructure.username')"
       min-width="120px"
       sortable
       v-if="checkedCols.findIndex((v) => v == 'username') !== -1 && attributes.findIndex((v) => v == 'username') !== -1"
@@ -58,13 +58,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>用户名</span>
+          <span>{{ $t('cs.companyStructure.username') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="email"
-      title="邮箱"
+      :title="$t('cs.companyStructure.email')"
       min-width="140px"
       sortable
       v-if="checkedCols.findIndex((v) => v == 'email') !== -1 && attributes.findIndex((v) => v == 'email') !== -1"
@@ -73,13 +73,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>邮箱</span>
+          <span>{{ $t('cs.companyStructure.email') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="sex"
-      title="性别"
+      :title="$t('cs.companyStructure.sex')"
       width="70px"
       sortable
       align="center"
@@ -89,13 +89,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>性别</span>
+          <span>{{ $t('cs.companyStructure.sex') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="mobile"
-      title="手机号"
+      :title="$t('cs.companyStructure.mobile')"
       min-width="100px"
       v-if="checkedCols.findIndex((v) => v == 'mobile') !== -1 && attributes.findIndex((v) => v == 'mobile') !== -1"
       sortable
@@ -104,13 +104,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>手机号</span>
+          <span>{{ $t('cs.companyStructure.mobile') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="department_name"
-      title="部门"
+      :title="$t('cs.companyStructure.departmentName')"
       min-width="90px"
       sortable
       v-if="
@@ -122,7 +122,7 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>部门</span>
+          <span>{{ $t('cs.companyStructure.departmentName') }}</span>
         </span>
       </template>
       <template #default="{ row }">
@@ -132,7 +132,7 @@
     </vxe-column>
     <vxe-column
       field="position_name"
-      title="岗位"
+      :title="$t('cs.companyStructure.positionName')"
       min-width="120px"
       sortable
       v-if="
@@ -144,13 +144,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>岗位</span>
+          <span>{{ $t('cs.companyStructure.positionName') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="direct_supervisor_id"
-      title="直接上级"
+      :title="$t('cs.companyStructure.supervisor')"
       min-width="120px"
       sortable
       v-if="
@@ -162,7 +162,7 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>直接上级</span>
+          <span>{{ $t('cs.companyStructure.supervisor') }}</span>
         </span>
       </template>
       <template #default="{ row }">
@@ -173,7 +173,7 @@
     </vxe-column>
     <vxe-column
       field="annual_leave"
-      title="年假"
+      :title="$t('cs.companyStructure.annualLeave')"
       sortable
       min-width="80"
       v-if="
@@ -186,13 +186,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>年假</span>
+          <span>{{ $t('cs.companyStructure.annualLeave') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="virtual_annual_leave"
-      title="虚拟年假"
+      :title="$t('cs.companyStructure.virtualAnnualLeave')"
       sortable
       min-width="100"
       v-if="
@@ -205,13 +205,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>虚拟年假</span>
+          <span>{{ $t('cs.companyStructure.virtualAnnualLeave') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="parenting_leave"
-      title="育儿假"
+      :title="$t('cs.companyStructure.parentingLeave')"
       sortable
       min-width="100"
       v-if="
@@ -224,13 +224,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>育儿假</span>
+          <span>{{ $t('cs.companyStructure.parentingLeave') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="entry_date"
-      title="目前主体入职日期"
+      :title="$t('cs.companyStructure.entryDate')"
       sortable
       min-width="150"
       v-if="
@@ -243,13 +243,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>目前主体入职日期</span>
+          <span>{{ $t('cs.companyStructure.entryDate') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="is_internship"
-      title="正式/实习生"
+      :title="$t('cs.companyStructure.isInternship')"
       sortable
       min-width="140"
       v-bind="tableType === 'structure' ? { filters: internOptions, 'filter-multiple': false } : {}"
@@ -263,7 +263,7 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>正式/实习生</span>
+          <span>{{ $t('cs.companyStructure.isInternship') }}</span>
         </span>
       </template>
       <template #default="{ row }">
@@ -272,7 +272,7 @@
     >I
     <vxe-column
       field="leave_date"
-      title="离职日期"
+      :title="$t('cs.companyStructure.leaveDate')"
       sortable
       min-width="100"
       v-if="
@@ -285,13 +285,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>离职日期</span>
+          <span>{{ $t('cs.companyStructure.leaveDate') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="id_card"
-      title="身份证号码"
+      :title="$t('cs.companyStructure.idCard')"
       sortable
       min-width="120"
       v-if="
@@ -304,13 +304,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>身份证号码</span>
+          <span>{{ $t('cs.companyStructure.idCard') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="nation"
-      title="民族"
+      :title="$t('cs.companyStructure.nation')"
       sortable
       min-width="80"
       v-if="
@@ -323,13 +323,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>民族</span>
+          <span>{{ $t('cs.companyStructure.idPlace') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="id_place"
-      title="籍贯"
+      :title="$t('cs.companyStructure.nation')"
       sortable
       min-width="120"
       v-if="
@@ -342,13 +342,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>籍贯</span>
+          <span>{{ $t('cs.companyStructure.idPlace') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="party"
-      title="组织关系"
+      :title="$t('cs.companyStructure.party')"
       sortable
       min-width="100"
       v-if="
@@ -361,13 +361,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>组织关系</span>
+          <span>{{ $t('cs.companyStructure.party') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="household_registration_type"
-      title="户籍类型"
+      :title="$t('cs.companyStructure.householdRegistrationType')"
       sortable
       min-width="100"
       v-if="
@@ -380,13 +380,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>户籍类型</span>
+          <span>{{ $t('cs.companyStructure.hometown') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="hometown"
-      title="户口所在地"
+      :title="$t('cs.companyStructure.householdRegistrationType') "
       sortable
       min-width="120"
       v-if="
@@ -399,13 +399,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>户口所在地</span>
+          <span>{{ $t('cs.companyStructure.hometown') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="marry"
-      title="婚姻情况"
+      :title="$t('cs.companyStructure.marry')"
       sortable
       min-width="100"
       v-if="
@@ -418,13 +418,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>婚姻情况</span>
+          <span>{{ $t('cs.companyStructure.marry') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="max_degree"
-      title="最高学历"
+      :title="$t('cs.companyStructure.maxDegree')"
       sortable
       min-width="100"
       v-if="
@@ -437,13 +437,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>最高学历</span>
+          <span>{{ $t('cs.companyStructure.maxDegree') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="emergency_person"
-      title="紧急联系人"
+      :title="$t('cs.companyStructure.emergencyPerson')"
       sortable
       min-width="110"
       v-if="
@@ -456,13 +456,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>紧急联系人</span>
+          <span>{{ $t('cs.companyStructure.emergencyPerson') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="emergency_phone"
-      title="紧急联系电话"
+      :title="$t('cs.companyStructure.emergencyPhone')"
       sortable
       min-width="120"
       v-if="
@@ -475,13 +475,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>紧急联系电话</span>
+          <span>{{ $t('cs.companyStructure.emergencyPhone') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="bank_card_number"
-      title="卡号"
+      :title="$t('cs.companyStructure.bankCardNumber')"
       sortable
       min-width="120"
       v-if="
@@ -494,13 +494,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>卡号</span>
+          <span>{{ $t('cs.companyStructure.bankCardNumber') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="bank_card_name"
-      title="银行"
+      :title="$t('cs.companyStructure.bankCardName')"
       sortable
       min-width="100"
       v-if="
@@ -513,13 +513,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>银行</span>
+          <span>{{ $t('cs.companyStructure.bankCardName') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="opening_bank"
-      title="开户行"
+      :title="$t('cs.companyStructure.openingBank')"
       sortable
       min-width="100"
       v-if="
@@ -532,13 +532,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>开户行</span>
+          <span>{{ $t('cs.companyStructure.openingBank') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="account_opening_location"
-      title="开户地"
+      :title="$t('cs.companyStructure.accountOpeningLocation')"
       sortable
       min-width="120"
       v-if="
@@ -551,13 +551,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>开户地</span>
+          <span>{{ $t('cs.companyStructure.accountOpeningLocation') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="school"
-      title="学校"
+      :title="$t('cs.companyStructure.school')"
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'school') !== -1 &&
@@ -569,13 +569,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>学校</span>
+          <span>{{ $t('cs.companyStructure.school') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="major"
-      title="专业"
+      :title="$t('cs.companyStructure.major')"
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'major') !== -1 &&
@@ -587,13 +587,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>专业</span>
+          <span>{{ $t('cs.companyStructure.major') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="education"
-      title="学历"
+      :title="$t('cs.companyStructure.education')"
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'education') !== -1 &&
@@ -605,13 +605,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>学历</span>
+          <span>{{ $t('cs.companyStructure.education') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="graduation_year"
-      title="毕业年份"
+      :title="$t('cs.companyStructure.graduationYear')"
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'graduation_year') !== -1 &&
@@ -623,13 +623,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>毕业年份</span>
+          <span>{{ $t('cs.companyStructure.graduationYear') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="name"
-      title="子女姓名"
+      :title="$t('cs.companyStructure.childrenName')"
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'name') !== -1 &&
@@ -641,13 +641,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>子女姓名</span>
+          <span>{{ $t('cs.companyStructure.childrenName') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="gender"
-      title="子女性别"
+      :title="$t('cs.companyStructure.sex')"
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'gender') !== -1 &&
@@ -659,13 +659,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>子女性别</span>
+          <span>{{ $t('cs.companyStructure.sex') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="birthday"
-      title="子女出生日期"
+      :title="$t('cs.companyStructure.birthDate')"
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'birthday') !== -1 &&
@@ -677,13 +677,13 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>子女出生日期</span>
+          <span>{{ $t('cs.companyStructure.birthDate') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="parental_leave_left"
-      title="剩余育儿假"
+      :title="$t('cs.companyStructure.leftParentingLeave')"
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'parental_leave_left') !== -1 &&
@@ -695,13 +695,103 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>剩余育儿假</span>
+          <span>{{ $t('cs.companyStructure.leftParentingLeave') }}</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="birth_date"
+      :title="$t('cs.companyStructure.birthDate')"
+      min-width="100"
+      v-if="
+        checkedCols.findIndex((v) => v == 'birth_date') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'birth_date') !== -1
+      "
+      key="birth_date"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>{{ $t('cs.companyStructure.birthDate') }}</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="birth_place"
+      :title="$t('cs.companyStructure.birthPlace')"
+      min-width="100"
+      v-if="
+        checkedCols.findIndex((v) => v == 'birth_place') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'birth_place') !== -1
+      "
+      key="birth_place"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>{{ $t('cs.companyStructure.birthPlace') }}</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="nationality_region"
+      :title="$t('cs.companyStructure.nationalityRegion')"
+      min-width="100"
+      v-if="
+        checkedCols.findIndex((v) => v == 'nationality_region') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'nationality_region') !== -1
+      "
+      key="nationality_region"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>{{ $t('cs.companyStructure.nationalityRegion') }}</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="first_entry_date"
+      :title="$t('cs.companyStructure.firstEntryDate')"
+      min-width="100"
+      v-if="
+        checkedCols.findIndex((v) => v == 'first_entry_date') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'first_entry_date') !== -1
+      "
+      key="first_entry_date"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>{{ $t('cs.companyStructure.firstEntryDate') }}</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="estimated_departure_date"
+      :title="$t('cs.companyStructure.estimatedDepartureDate')"
+      min-width="100"
+      v-if="
+        checkedCols.findIndex((v) => v == 'estimated_departure_date') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'estimated_departure_date') !== -1
+      "
+      key="estimated_departure_date"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>{{ $t('cs.companyStructure.estimatedDepartureDate') }}</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
       field="last_login"
-      title="上次登录时间"
+      :title="$t('cs.companyStructure.lastLogin')"
       min-width="140px"
       sortable
       :formatter="formatDate"
@@ -715,7 +805,7 @@
       <template #header>
         <span class="vxe-handle">
           <OpsMoveIcon class="move-icon" />
-          <span>上次登录时间</span>
+          <span>{{ $t('cs.companyStructure.lastLogin') }}</span>
         </span>
       </template>
     </vxe-column>
@@ -728,10 +818,10 @@
       key="control"
     >
       <template #header>
-        <span>操作</span>
+        <span>{{ $t('operation') }}</span>
         <template>
           <a-popover
-            title="请选择需要展示的列"
+            :title="$t('cs.companyStructure.selectDisplayColumn')"
             placement="bottom"
             v-model="visible"
             trigger="click"
@@ -741,7 +831,7 @@
           >
             <template slot="content">
               <div :style="{ maxHeight: `${windowHeight - 320}px`, overflowY: 'auto', width: '160px' }">
-                <a-checkbox-group v-model="unsbmitCheckedCols" :options="options" style="display: grid">
+                <a-checkbox-group v-model="unsbmitCheckedCols" :options="options" style="display: grid;">
                 </a-checkbox-group>
               </div>
               <div
@@ -753,36 +843,44 @@
                   justifyContent: 'flex-end',
                 }"
               >
-                <a-button :style="{ marginRight: '10px' }" size="small" @click="handleCancel">取消</a-button>
-                <a-button size="small" @click="handleSubmit" type="primary">确定</a-button>
+                <a-button :style="{ marginRight: '10px' }" size="small" @click="handleCancel">{{ $t('cancel') }}</a-button>
+                <a-button size="small" @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
               </div>
             </template>
-            <a-icon type="control" style="cursor: pointer" />
+            <a-icon type="control" style="cursor: pointer;" />
           </a-popover>
         </template>
       </template>
       <template #default="{ row }">
         <a-space v-if="tableType === 'structure'">
-          <a><a-icon type="edit" @click="openEmployeeModal(row, 'edit')" /></a>
+          <a><a-icon type="edit" @click="openEmployeeModal(row, 'edit')"/></a>
           <a-tooltip>
-            <template slot="title"> 重置密码 </template>
-            <a><a-icon type="reload" @click="openBatchModal('password', row)" /></a>
+            <template slot="title">
+              {{ $t('cs.companyStructure.resetPassword') }}
+            </template>
+            <a><a-icon type="reload" @click="openBatchModal('password', row)"/></a>
           </a-tooltip>
           <a-tooltip v-if="!row.block">
-            <template slot="title"> 禁用 </template>
+            <template slot="title">
+              {{ $t('cs.companyStructure.block') }}
+            </template>
             <a :style="{ color: 'red' }" @click="openBatchModal('block', row, 1)">
               <ops-icon type="icon-xianxing-weilianjie" />
             </a>
           </a-tooltip>
           <a-tooltip v-else>
-            <template slot="title"> 恢复 </template>
+            <template slot="title">
+              {{ $t('cs.companyStructure.recover') }}
+            </template>
             <a @click="openBatchModal('block', row, 0)">
               <ops-icon type="icon-xianxing-yilianjie" />
             </a>
           </a-tooltip>
         </a-space>
         <a-tooltip v-else>
-          <template slot="title"> 移除 </template>
+          <template slot="title">
+            {{ $t('cs.role.remove') }}
+          </template>
           <a :style="{ color: 'red' }" @click="removeEmployee(row)">
             <ops-icon type="icon-xianxing-shanchuyonghu" />
           </a>
@@ -792,7 +890,7 @@
     <template #empty>
       <div>
         <img :style="{ width: '200px' }" :src="require('@/assets/data_empty.png')" />
-        <div>暂无数据</div>
+        <div>{{ $t('noData') }}</div>
       </div>
     </template>
   </vxe-table>
@@ -833,46 +931,49 @@ export default {
   },
   data() {
     const options = [
-      { label: '姓名', value: 'nickname' },
-      { label: '用户名', value: 'username' },
-      { label: '邮箱', value: 'email' },
-      { label: '性别', value: 'sex' },
-      { label: '手机号', value: 'mobile' },
-      { label: '部门', value: 'department_name' },
-      { label: '岗位', value: 'position_name' },
-      { label: '直接上级', value: 'direct_supervisor_id' },
-      { label: '年假', value: 'annual_leave' },
-      { label: '虚拟年假', value: 'virtual_annual_leave' },
-      { label: '育儿假', value: 'parenting_leave' },
-      { label: '目前所属主体', value: 'current_company' },
-      { label: '初始入职日期', value: 'dfc_entry_date' },
-      { label: '目前主体入职日期', value: 'entry_date' },
-      { label: '正式/实习生', value: 'is_internship' },
-      { label: '离职日期', value: 'leave_date' },
-      { label: '身份证号码', value: 'id_card' },
-      { label: '民族', value: 'nation' },
-      { label: '籍贯', value: 'id_place' },
-      { label: '组织关系', value: 'party' },
-      { label: '户籍类型', value: 'household_registration_type' },
-      { label: '户口所在地', value: 'hometown' },
-      { label: '婚姻情况', value: 'marry' },
-      { label: '最高学历', value: 'max_degree' },
-      { label: '紧急联系人', value: 'emergency_person' },
-      { label: '紧急联系电话', value: 'emergency_phone' },
-      { label: '卡号', value: 'bank_card_number' },
-      { label: '银行', value: 'bank_card_name' },
-      { label: '开户行', value: 'opening_bank' },
-      { label: '开户地', value: 'account_opening_location' },
-      { label: '学校', value: 'school' },
-      { label: '专业', value: 'major' },
-      { label: '学历', value: 'education' },
-      { label: '毕业年份', value: 'graduation_year' },
-      { label: '子女姓名', value: 'name' },
-      { label: '子女性别', value: 'gender' },
-      { label: '子女出生日期', value: 'birthday' },
-      { label: '剩余育儿假', value: 'parental_leave_left' },
-      { label: '角色', value: 'roles' },
-      { label: '上次登录时间', value: 'last_login' },
+      { label: this.$t('cs.companyStructure.nickname'), value: 'nickname' },
+      { label: this.$t('cs.companyStructure.username'), value: 'username' },
+      { label: this.$t('cs.companyStructure.email'), value: 'email' },
+      { label: this.$t('cs.companyStructure.sex'), value: 'sex' },
+      { label: this.$t('cs.companyStructure.mobile'), value: 'mobile' },
+      { label: this.$t('cs.companyStructure.departmentName'), value: 'department_name' },
+      { label: this.$t('cs.companyStructure.positionName'), value: 'position_name' },
+      { label: this.$t('cs.companyStructure.supervisor'), value: 'direct_supervisor_id' },
+      { label: this.$t('cs.companyStructure.annualLeave'), value: 'annual_leave' },
+      { label: this.$t('cs.companyStructure.virtualAnnualLeave'), value: 'virtual_annual_leave' },
+      { label: this.$t('cs.companyStructure.parentingLeave'), value: 'parenting_leave' },
+      { label: this.$t('cs.companyStructure.entryDate'), value: 'entry_date' },
+      { label: this.$t('cs.companyStructure.isInternship'), value: 'is_internship' },
+      { label: this.$t('cs.companyStructure.leaveDate'), value: 'leave_date' },
+      { label: this.$t('cs.companyStructure.idCard'), value: 'id_card' },
+      { label: this.$t('cs.companyStructure.nation'), value: 'nation' },
+      { label: this.$t('cs.companyStructure.idPlace'), value: 'id_place' },
+      { label: this.$t('cs.companyStructure.party'), value: 'party' },
+      { label: this.$t('cs.companyStructure.householdRegistrationType'), value: 'household_registration_type' },
+      { label: this.$t('cs.companyStructure.hometown'), value: 'hometown' },
+      { label: this.$t('cs.companyStructure.marry'), value: 'marry' },
+      { label: this.$t('cs.companyStructure.maxDegree'), value: 'max_degree' },
+      { label: this.$t('cs.companyStructure.emergencyPerson'), value: 'emergency_person' },
+      { label: this.$t('cs.companyStructure.emergencyPhone'), value: 'emergency_phone' },
+      { label: this.$t('cs.companyStructure.bankCardNumber'), value: 'bank_card_number' },
+      { label: this.$t('cs.companyStructure.bankCardName'), value: 'bank_card_name' },
+      { label: this.$t('cs.companyStructure.openingBank'), value: 'opening_bank' },
+      { label: this.$t('cs.companyStructure.accountOpeningLocation'), value: 'account_opening_location' },
+      { label: this.$t('cs.companyStructure.school'), value: 'school' },
+      { label: this.$t('cs.companyStructure.major'), value: 'major' },
+      { label: this.$t('cs.companyStructure.education'), value: 'education' },
+      { label: this.$t('cs.companyStructure.graduationYear'), value: 'graduation_year' },
+      { label: this.$t('cs.companyStructure.childrenName'), value: 'name' },
+      { label: this.$t('cs.companyStructure.childrenGender'), value: 'gender' },
+      { label: this.$t('cs.companyStructure.childrenBirthday'), value: 'birthday' },
+      { label: this.$t('cs.companyStructure.leftParentingLeave'), value: 'parental_leave_left' },
+      { label: this.$t('cs.companyStructure.birthDate'), value: 'birth_date' },
+      { label: this.$t('cs.companyStructure.nationalityRegion'), value: 'nationality_region' },
+      { label: this.$t('cs.companyStructure.birthPlace'), value: 'birth_place' },
+      { label: this.$t('cs.companyStructure.firstEntryDate'), value: 'first_entry_date' },
+      { label: this.$t('cs.companyStructure.estimatedDepartureDate'), value: 'estimated_departure_date' },
+      { label: this.$t('cs.companyStructure.role'), value: 'roles' },
+      { label: this.$t('cs.companyStructure.lastLogin'), value: 'last_login' },
     ]
     const checkedCols = JSON.parse(localStorage.getItem('setting-table-CheckedCols')) || [
       'nickname',
@@ -889,7 +990,6 @@ export default {
       'roles',
       'last_login',
       'current_company',
-      'dfc_entry_date',
       'is_internship',
       'entry_date',
       'leave_date',
@@ -924,24 +1024,28 @@ export default {
       visible: false,
       tableDragClassName: [], // 表格拖拽的参数
       attributes: [],
-      internMap: [
-        {
-          id: 0,
-          label: '正式',
-        },
-        {
-          id: 1,
-          label: '实习生',
-        },
-      ],
-      internOptions: [
-        { label: '正式', value: 0 },
-        { label: '实习生', value: 1 },
-      ],
     }
   },
   inject: ['provide_allFlatEmployees', 'provide_allFlatDepartments'],
   computed: {
+    internOptions() {
+      return [
+        { label: this.$t('cs.companyStructure.fullTime'), value: 0 },
+        { label: this.$t('cs.companyStructure.internship'), value: 1 },
+      ]
+    },
+    internMap() {
+      return [
+        {
+          id: 0,
+          label: this.$t('cs.companyStructure.fullTime'),
+        },
+        {
+          id: 1,
+          label: this.$t('cs.companyStructure.internship'),
+        },
+      ]
+    },
     allFlatEmployees() {
       return this.provide_allFlatEmployees()
     },
@@ -956,9 +1060,6 @@ export default {
     Bus.$on('reqExportSelectEvent', () => {
       this.exportExcel()
     })
-    this.options = this.options
-      .filter((item) => item.label !== '目前所属主体')
-      .filter((item) => item.label !== '初始入职日期')
     this.unsbmitCheckedCols = this.checkedCols
   },
   beforeDestroy() {
@@ -1064,8 +1165,8 @@ export default {
     removeEmployee(row) {
       const that = this
       this.$confirm({
-        title: '提示',
-        content: '确认移除该员工?',
+        title: that.$t('warning'),
+        content: that.$t('cs.role.confirmRemoveEmployee'),
         onOk() {
           that.$emit('removeEmployee', row)
         },
@@ -1140,7 +1241,7 @@ export default {
         useStyle: true, // 是否导出样式
         isFooter: false, // 是否导出表尾（比如合计）
         // 过滤那个字段导出
-        columnFilterMethod: function (column, $columnIndex) {
+        columnFilterMethod: function(column, $columnIndex) {
           return !(column.$columnIndex === 0)
           // 0是复选框 不导出
         },
diff --git a/cmdb-ui/src/views/setting/components/employeeTreeSelect.vue b/cmdb-ui/src/views/setting/components/employeeTreeSelect.vue
index 0aad668..ee39b78 100644
--- a/cmdb-ui/src/views/setting/components/employeeTreeSelect.vue
+++ b/cmdb-ui/src/views/setting/components/employeeTreeSelect.vue
@@ -3,12 +3,12 @@
     :disable-branch-nodes="multiple ? false : true"
     :multiple="multiple"
     :options="employeeTreeSelectOption"
-    placeholder="请选择员工"
+    :placeholder="readOnly ? '' : placeholder || $t('cs.components.selectEmployee')"
     v-model="treeValue"
     :max-height="200"
-    noChildrenText="空"
-    noOptionsText="空"
-    :class="className ? className: 'ops-setting-treeselect'"
+    :noChildrenText="$t('cs.components.empty')"
+    :noOptionsText="$t('cs.components.empty')"
+    :class="className ? className : 'ops-setting-treeselect'"
     value-consists-of="LEAF_PRIORITY"
     :limit="20"
     :limitText="(count) => `+ ${count}`"
@@ -42,13 +42,37 @@ export default {
     },
     className: {
       type: String,
-      default: 'ops-setting-treeselect'
-    }
+      default: 'ops-setting-treeselect',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    idType: {
+      type: Number,
+      default: 1,
+    },
+    departmentKey: {
+      type: String,
+      default: 'department_id',
+    },
+    employeeKey: {
+      type: String,
+      default: 'employee_id',
+    },
   },
   data() {
     return {}
   },
-  inject: ['provide_allTreeDepAndEmp'],
+  inject: {
+    provide_allTreeDepAndEmp: {
+      from: 'provide_allTreeDepAndEmp',
+    },
+    readOnly: {
+      from: 'readOnly',
+      default: false,
+    },
+  },
   computed: {
     treeValue: {
       get() {
@@ -63,12 +87,11 @@ export default {
       return this.provide_allTreeDepAndEmp()
     },
     employeeTreeSelectOption() {
-      return formatOption(this.allTreeDepAndEmp)
+      return formatOption(this.allTreeDepAndEmp, this.idType, false, this.departmentKey, this.employeeKey)
     },
   },
   methods: {},
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/cmdb-ui/src/views/setting/components/relateEmployee.vue b/cmdb-ui/src/views/setting/components/relateEmployee.vue
index c92c68f..b86111d 100644
--- a/cmdb-ui/src/views/setting/components/relateEmployee.vue
+++ b/cmdb-ui/src/views/setting/components/relateEmployee.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-modal title="关联员工" :visible="visible" @cancel="handleCancel" @ok="handleOK">
+  <a-modal :title="$t('cs.role.associatedEmployees')" :visible="visible" @cancel="handleCancel" @ok="handleOK">
     <EmployeeTreeSelect v-model="values" :multiple="true" />
   </a-modal>
 </template>
diff --git a/cmdb-ui/src/views/setting/components/settingFilterComp/constants.js b/cmdb-ui/src/views/setting/components/settingFilterComp/constants.js
index fa8a0be..6942364 100644
--- a/cmdb-ui/src/views/setting/components/settingFilterComp/constants.js
+++ b/cmdb-ui/src/views/setting/components/settingFilterComp/constants.js
@@ -1,20 +1,22 @@
+import i18n from '@/lang'
+
 export const ruleTypeList = [
-    { value: '&', label: '与' },
-    { value: '|', label: '或' },
+    { value: '&', label: i18n.t('cs.components.and') },
+    { value: '|', label: i18n.t('cs.components.or') },
     // { value: 'not', label: '非' },
 ]
 
 export const expList = [
-    { value: 1, label: '等于' },
-    { value: 2, label: '不等于' },
+    { value: 1, label: i18n.t('cs.components.equal') },
+    { value: 2, label: i18n.t('cs.components.notEqual') },
     // { value: 'contain', label: '包含' },
     // { value: '~contain', label: '不包含' },
     // { value: 'start_with', label: '以...开始' },
     // { value: '~start_with', label: '不以...开始' },
     // { value: 'end_with', label: '以...结束' },
     // { value: '~end_with', label: '不以...结束' },
-    { value: 7, label: '为空' }, // 为空的定义有点绕
-    { value: 8, label: '不为空' },
+    { value: 7, label: i18n.t('cs.components.isEmpty') }, // 为空的定义有点绕
+    { value: 8, label: i18n.t('cs.components.isNotEmpty') },
 ]
 
 export const advancedExpList = [
@@ -22,12 +24,12 @@ export const advancedExpList = [
     // { value: '~in', label: '非in查询' },
     // { value: 'range', label: '范围' },
     // { value: '~range', label: '范围外' },
-    { value: 'compare', label: '比较' },
+    { value: 'compare', label: i18n.t('cs.components.compare') },
 ]
 
 export const compareTypeList = [
-    { value: 5, label: '大于' },
+    { value: 5, label: i18n.t('cs.components.moreThan') },
     // { value: '2', label: '>=' },
-    { value: 6, label: '小于' },
+    { value: 6, label: i18n.t('cs.components.lessThan') },
     // { value: '4', label: '<=' },
 ]
diff --git a/cmdb-ui/src/views/setting/components/settingFilterComp/index.vue b/cmdb-ui/src/views/setting/components/settingFilterComp/index.vue
index 74ea7a8..8ff2bad 100644
--- a/cmdb-ui/src/views/setting/components/settingFilterComp/index.vue
+++ b/cmdb-ui/src/views/setting/components/settingFilterComp/index.vue
@@ -7,7 +7,7 @@
     @visibleChange="visibleChange"
   >
     <slot name="popover_item">
-      <a-button type="primary" ghost>条件过滤<a-icon type="filter"/></a-button>
+      <a-button type="primary" ghost>{{ $t('cs.components.conditionFilter') }}<a-icon type="filter"/></a-button>
     </slot>
     <template slot="content">
       <svg
@@ -106,7 +106,7 @@
           searchable
           v-if="isChoiceByProperty(item.column) && (item.operator === 1 || item.operator === 2)"
           :options="getChoiceValueByProperty(item.column)"
-          placeholder="请选择"
+          :placeholder="$t('cs.components.selectPlaceholder')"
           :normalizer="
             (node) => {
               return {
@@ -133,26 +133,26 @@
           v-else-if="item.operator !== 7 && item.operator !== 8"
           size="small"
           v-model="item.value"
-          :placeholder="item.exp === 'in' || item.exp === '~in' ? '以 ; 分隔' : ''"
+          :placeholder="item.exp === 'in' || item.exp === '~in' ? $t('cs.components.operatorInPlaceholder') : ''"
           class="ops-input"
         ></a-input>
         <!-- <div v-else :style="{ width: '175px' }"></div> -->
-        <a-tooltip title="复制">
+        <a-tooltip :title="$t('cs.components.copy')">
           <a class="operation" @click="handleCopyRule(item)"><a-icon type="copy"/></a>
         </a-tooltip>
-        <a-tooltip title="删除">
+        <a-tooltip :title="$t('delete')">
           <a class="operation" @click="handleDeleteRule(item)" :style="{ color: 'red' }"><a-icon type="delete"/></a>
         </a-tooltip>
 
       </a-space>
       <div class="table-filter-add">
-        <a @click="handleAddRule">+ 新增</a>
+        <a @click="handleAddRule">+ {{ $t('new') }}</a>
       </div>
       <a-divider :style="{ margin: '10px 0' }" />
       <div style="width:534px">
         <a-space :style="{ display: 'flex', justifyContent: 'flex-end' }">
-          <a-button type="primary" size="small" @click="handleSubmit">确定</a-button>
-          <a-button size="small" @click="handleClear">清空</a-button>
+          <a-button type="primary" size="small" @click="handleSubmit">{{ $t('confirm') }}</a-button>
+          <a-button size="small" @click="handleClear">{{ $t('clear') }}</a-button>
         </a-space>
       </div>
     </template>
diff --git a/cmdb-ui/src/views/setting/lang/en.js b/cmdb-ui/src/views/setting/lang/en.js
new file mode 100644
index 0000000..226422f
--- /dev/null
+++ b/cmdb-ui/src/views/setting/lang/en.js
@@ -0,0 +1,443 @@
+const cs_en = {
+    menu: {
+      person: 'Personal Center',
+      companyInfo: 'Company Info',
+      companyStructure: 'Company Structure',
+      notice: 'Notification Settings',
+      email: 'Email Settings',
+      wx: 'WeChat Work',
+      dingding: 'DingTalk',
+      feishu: 'Feishu',
+      auth: 'Auth Settings',
+      role: 'Role Management',
+      sys: 'System Role',
+      technician: 'Technician Role',
+      user: 'User Role',
+      group: 'User Group',
+      duty: 'Duty Management',
+  },
+  companyInfo: {
+    spanCompany: 'Description',
+    name: 'Company Name',
+    nameValidate: 'Please enter name',
+    description: 'Description',
+    spanAddress: 'Address',
+    country: 'Country/Region',
+    city: 'City',
+    address: 'Address',
+    postcode: 'Postal Code',
+    spanContract: 'Contact Information',
+    spanLogo: 'Company Logo',
+    website: 'Website',
+    phone: 'Phone Number',
+    phoneValidate: 'Please enter a valid phone number',
+    faxCode: 'Fax Number',
+    faxCodeValidate: 'Please enter a valid fax number',
+    email: 'Email',
+    emailValidate: 'Please enter a valid email address',
+    messenger: 'Messenger Address',
+    domainName: 'Deployment Domain',
+    logo: 'Company Logo',
+    upload: 'Upload',
+    editCompanyLogo: 'Edit Company Logo',
+    editCompanyLogoSmall: 'Edit Company Logo Thumbnail',
+    imageSizeLimit2MB: 'Image size does not exceed 2MB',
+    checkInputCorrect: 'Please check if the input content is correct',
+  },
+  companyStructure: {
+    batchImport: 'Batch Import',
+    batchEdit: 'Batch Edit',
+    selectFile: 'Select File',
+    clickDownloadImportTemplate: 'Click to download Employee Import Template',
+    importSuccess: 'Imported total {allCount} items, imported successfully',
+    importFailed: 'Import failed',
+    count: 'items',
+    email: 'Email',
+    emailPlaceholder: 'Please enter email',
+    emailFormatErr: 'Email format error',
+    username: 'Username',
+    usernamePlaceholder: 'Please enter username',
+    nickname: 'Full Name',
+    nicknamePlaceholder: 'Please enter full name',
+    password: 'Password',
+    passwordPlaceholder: 'Please enter password',
+    sex: 'Gender',
+    sexPlaceholder: 'Please select gender',
+    male: 'Male',
+    female: 'Female',
+    mobile: 'Mobile Number',
+    mobilePlaceholder: 'Please enter mobile number',
+    mobileFormatErr: 'Please enter a valid mobile number',
+    positionName: 'Position',
+    positionNamePlaceholder: 'Please enter position',
+    employee: 'Employee',
+    departmentName: 'Department',
+    currentCompany: 'Current Company',
+    currentCompanyPlaceholder: 'Please select current company',
+    dfcEntryDate: 'Initial Entry Date',
+    dfcEntryDatePlaceholder: 'Please select initial entry date',
+    entryDate: 'Current Company Entry Date',
+    entryDatePlaceholder: 'Please select current company entry date',
+    isInternship: 'Full-time/Intern',
+    isInternshipPlaceholder: 'Please select full-time/intern',
+    internship: 'Intern',
+    fullTime: 'Full-time',
+    leaveDate: 'Resignation Date',
+    leaveDatePlaceholder: 'Please select resignation date',
+    idCard: 'ID Card Number',
+    idCardPlaceholder: 'Please enter ID card number',
+    nation: 'Ethnicity',
+    nationPlaceholder: 'Please select ethnicity',
+    idPlace: 'Native Place',
+    idPlacePlaceholder: 'Please enter native place',
+    party: 'Political Affiliation',
+    partyPlaceholder: 'Please select political affiliation',
+    partyMember: 'Party Member',
+    member: 'League Member',
+    masses: 'Masses',
+    householdRegistrationType: 'Residency Type',
+    householdRegistrationTypePlaceholder: 'Please select residency type',
+    town: 'Urban',
+    agriculture: 'Rural',
+    hometown: 'Residence Location',
+    hometownPlaceholder: 'Please enter residence location',
+    marry: 'Marital Status',
+    unmarried: 'Unmarried',
+    married: 'Married',
+    marryPlaceholder: 'Please select marital status',
+    maxDegree: 'Highest Degree',
+    maxDegreePlaceholder: 'Please select highest degree',
+    phd: 'PhD',
+    master: 'Master',
+    undergraduate: 'Bachelor',
+    specialist: 'Associate',
+    highSchool: 'High School',
+    technicalSecondaryOrHighSchool: 'Technical/High School',
+    juniorHighSchool: 'Junior High School',
+    primarySchool: 'Primary School',
+    emergencyPerson: 'Emergency Contact',
+    emergencyPersonPlaceholder: 'Please enter emergency contact',
+    emergencyPhone: 'Emergency Contact Number',
+    emergencyPhonePlaceholder: 'Please enter emergency contact number',
+    bankCardInfo: 'Bank Card',
+    bankCardNumber: 'Bank Card Number',
+    bankCardNumberPlaceholder: 'Please enter bank card number',
+    bankCardName: 'Bank',
+    bankCardNamePlaceholder: 'Please enter bank',
+    openingBank: 'Issuing Bank',
+    openingBankPlaceholder: 'Please enter issuing bank',
+    accountOpeningLocation: 'Account Opening Location',
+    accountOpeningLocationPlaceholder: 'Please enter account opening location',
+    school: 'Graduated School',
+    schoolPlaceholder: 'Please enter graduated school',
+    major: 'Major',
+    majorPlaceholder: 'Please enter major',
+    education: 'Education',
+    educationPlaceholder: 'Please select education',
+    educationalExperience: 'Education History',
+    graduationYear: 'Graduation Year',
+    graduationYearPlaceholder: 'Please select graduation year',
+    birthDate: 'Date of Birth',
+    birthDatePlaceholder: 'Please select date of birth',
+    birthPlace: 'Place of Birth',
+    birthPlacePlaceholder: 'Please enter place of birth',
+    nationalityRegion: 'Nationality/Region',
+    nationalityRegionPlaceholder: 'Please select nationality/region',
+    firstEntryDate: 'First Entry Date',
+    firstEntryDatePlaceholder: 'Please select first entry date',
+    estimatedDepartureDate: 'Estimated Departure Date',
+    estimatedDepartureDatePlaceholder: 'Please select estimated departure date',
+    lastLogin: 'Last Login Time',
+    importFailedReason: 'Failure Reason',
+    selectDepartment: 'Select Department',
+    supervisor: 'Supervisor',
+    editDirectSupervisor: 'Edit Supervisor',
+    selectDirectSupervisor: 'Select Supervisor',
+    annualLeave: 'Annual Leave',
+    editPosition: 'Edit Position',
+    editAnnualLeave: 'Edit Annual Leave',
+    annualLeavePlaceholder: 'Please enter annual leave',
+    virtualAnnualLeave: 'Virtual Annual Leave',
+    virtualAnnualLeavePlaceholder: 'Please enter virtual annual leave',
+    parentingLeave: 'Parenting Leave',
+    leftParentingLeave: 'Remaining Parenting Leave',
+    parentingLeavePlaceholder: 'Please enter parenting leave',
+    day: 'day(s)',
+    resetPassword: 'Reset Password',
+    confirmPassword: 'Confirm Password',
+    block: 'Disable',
+    blockUserConfirm: 'This user will be disabled, continue?',
+    batchBlockUserConfirm: 'These users will be disabled, continue?',
+    recover: 'Recover',
+    recoverUserConfirm: 'This user will be recovered, continue?',
+    batchRecoverUserConfirm: 'These users will be recovered, continue?',
+    opFailed: 'Operation failed',
+    opSuccess: 'Operation successful',
+    createSubDepartment: 'Create Sub-department',
+    editDepartment: 'Edit Department',
+    deleteDepartment: 'Delete Department',
+    downloadAll: 'Download All',
+    downloadSelected: 'Download Selected',
+    departmentLabel: 'Department Name',
+    departmentLabelPlaceholder: 'Please enter department name',
+    parentDepartment: 'Parent Department',
+    parentDepartmentPlaceholder: 'Please select parent department',
+    departmentDirector: 'Department Director',
+    childrenInformation: 'Children Information',
+    childrenName: 'Children Name',
+    childrenGender: 'Children Gender',
+    childrenBirthday: 'Children Birthday',
+    allEmployee: 'All Employees',
+    activeEmployee: 'Active',
+    blockEmployee: 'Disabled',
+    prevStep: 'Previous',
+    nextStep: 'Next',
+    done: 'Done',
+    uploadFile: 'Upload File',
+    confirmData: 'Confirm Data',
+    uploadDone: 'Upload Done',
+    dataErr: 'Data Error',
+    createEmployee: 'Create Employee',
+    editEmployee: 'Edit Employee',
+    role: 'Role',
+    selectDisplayColumn: 'Please select columns to display'
+  },
+  auth: {
+    basic: 'Basic',
+    other: 'Other',
+    isEnable: 'Is Enabled',
+    common: 'Common',
+    testConnect: 'Test Connection',
+    testLogin: 'Test Login',
+    testSuccess: 'Test Successful',
+    ldap: {
+      serverAddress: 'Server Address',
+      serverAddressHelp: 'E.g. 192.168.1.6 or ldap://192.168.1.6 or ldap://192.168.1.6:389',
+      serverAddressPlaceholder: 'Please enter server address',
+      domain: 'Domain',
+      domainPlaceholder: 'Please enter domain',
+      user: 'User',
+      username: 'Username',
+      userPlaceholder: 'Please enter username',
+      userHelp: 'User DN: cn={},ou=users,dc=xxx,dc=com   {} will be replaced by username'
+    },
+    cas: {
+      server: 'Server Address',
+      serverHelp: 'Without url path, e.g. https://xxx.com',
+      serverPlaceholder: 'Please enter CAS server address',
+      validateServer: 'Validation Server Address',
+      validateServerHelp: 'Without url path, e.g. https://xxx.com',
+      validateServerPlaceholder: 'Please enter validation server address',
+      loginRoute: 'Login Route',
+      loginRoutePlaceholder: 'Please enter login route',
+      logoutRoute: 'Logout Route',
+      logoutRoutePlaceholder: 'Please enter logout route',
+      validateRoute: 'Validate Route',
+      validateRoutePlaceholder: 'Please enter validate route',
+      afterLoginRoute: 'Redirect Route',
+      afterLoginRoutePlaceholder: 'Please enter redirect route',
+      userMap: 'User Attribute Mapping'
+    },
+    autoRedirectLogin: 'Auto Redirect to Third-party Login Page',
+    autoRedirectLoginHelp: 'If disabled, a confirmation will be displayed to redirect to third-party login page. Click the Cancel button will go to the built-in login page',
+    usernameOrEmail: 'Username/Email',
+    usernameOrEmailPlaceholder: 'Please enter username/email',
+    password: 'Password',
+    passwordPlaceholder: 'Please enter password',
+    oauth2: {
+      clientId: 'Client ID',
+      clientIdPlaceholder: 'Please enter client ID',
+      clientSecret: 'Client Secret',
+      clientSecretPlaceholder: 'Please enter client secret',
+      authorizeUrl: 'Authorize URL',
+      authorizeUrlPlaceholder: 'Please enter authorize URL',
+      tokenUrl: 'Token URL',
+      tokenUrlPlaceholder: 'Please enter token URL',
+      userInfo: 'User Info',
+      scopes: 'Scopes',
+      scopesPlaceholder: 'Please enter scopes',
+    }
+  },
+  duty: {
+    basicSetting: 'Basic Settings',
+    ruleName: 'Title',
+    ruleNamePlaceholder: 'Please enter title',
+    principalId: 'Person in Charge',
+    specifyId: 'Appointee',
+    principalIdPlaceholder: 'Please select person in charge/single select',
+    remark: 'Remark',
+    remarkPlaceholder: 'Please enter remark',
+    remindTime: 'Duty Remind Time',
+    remindWay: 'Remind Way',
+    remindPeople: 'Remind People',
+    mainDutyPeople: 'Main Duty Person',
+    deputyDutyPeople: 'Deputy Duty Person',
+    dutyRule: 'Duty Rule',
+    '一': 'Mon',
+    '二': 'Tue',
+    '三': 'Wed',
+    '四': 'Thu',
+    '五': 'Fri',
+    '六': 'Sat',
+    '日': 'Sun',
+    searchPlaceholder: 'Please search',
+    dutyTable: 'Duty Schedule',
+    dutyMember: 'Duty Member',
+    dutyMemberPlaceholder: 'Please select duty member',
+    startDutyMember: 'Start Duty Member',
+    startEndDate: 'Start End Date',
+    startEndDatePlaceholder: 'Please select start end date',
+    dutyPeriod: 'Duty Period',
+    dutyFrequency: 'Duty Frequency',
+    fullDay: 'Full Day',
+    specifyTime: 'Specify Time',
+    monthDayFormat: 'MM/DD',
+    week: 'Week',
+    month: 'Month',
+    hour: 'Hour',
+    min: 'min',
+    before: 'Before',
+    fixed: 'Fixed Time',
+    removeHolidays: 'Remove Holidays',
+    offDutyReceiver: 'Off-duty Receiver',
+    offDutyReceiverPlaceholder: 'Please select off-duty receiver',
+    titleLimit: 'Please enter title (20 characters)',
+    remarkLimit: 'Remark 150 characters max',
+    frequencyLimit: 'Please enter duty frequency (positive integer)'
+  },
+  group: {
+    groupName: 'User Group',
+    groupNamePlaceholder: 'Please enter user group',
+    addGroup: 'Add Group',
+    editGroup: 'Edit Group',
+  },
+  components: {
+    preview: 'Preview',
+    copy: 'Copy',
+    editAvatar: 'Edit Avatar',
+    conditionFilter: 'Condition Filter',
+    selectPlaceholder: 'Please select',
+    empty: 'Empty',
+    and: 'And',
+    or: 'Or',
+    equal: 'Equal',
+    notEqual: 'Not Equal',
+    isEmpty: 'Is Empty',
+    isNotEmpty: 'Is Not Empty',
+    compare: 'Compare',
+    moreThan: 'More Than',
+    lessThan: 'Less Than',
+    operatorInPlaceholder: 'Separate by ;',
+    selectEmployee: 'Select Employee'
+  },
+  notice: {
+    corpid: 'Corp ID',
+    agentid: 'Self-built App ID',
+    corpsecret: 'Self-built App Secret',
+    itsmAppId: 'ITSM App ID',
+    robot: 'Robot',
+    selectRobot: 'Please select robot',
+    robotConfigErrorTips: 'Please fill out robot configuration completely',
+    webhookAddress: 'Webhook Address',
+    appKey: 'App Key',
+    appSecret: 'App Secret',
+    robotCode: 'Robot Code',
+    sendServer: 'Outgoing Server',
+    connectProtocol: 'Connection Protocol',
+    ews: 'EWS(Exchange Web Services)',
+    authType: 'Auth Type',
+    base: 'Base',
+    oauth: 'OAuth',
+    ip: 'Server Name/IP Address',
+    username: 'Username',
+    password: 'Password',
+    email: 'Email Address',
+    emailType: 'Email Type',
+    port: 'Port',
+    testEmailConfig: 'Test Email Settings',
+    testRecyclingBin: 'Test Recycle Bin',
+    receiveEmailFailed: 'Receive email failed',
+    emailServiceNotConfig: 'Email server is not configured, please configure one email server',
+    troubleshooting: 'Troubleshooting',
+    emailConfig: 'Email Settings',
+    receiveEmailInterval: 'Get Email Interval',
+    startProxyServer: 'Start Proxy Server',
+    configProxyServer: 'Config Proxy Server',
+    startEmailTest: 'Start Email Test',
+    disableCreationOfRequestsViaEmail: 'Disable Creation of Requests Via Email',
+    specifyAllowedEmails: 'Specify Allowed Emails/Domains, Separate Multiple Values By Comma',
+    specifyAllowedEmailsExample: 'E.g. user@domain.com,*@domain.com',
+    specifyAllowedEmailsLimit: 'Limit cannot apply to requests already in sessions, it will aggregate to its parent ticket',
+    messageConfig: 'Message Settings',
+    moveWrongMessagesToFolder: 'Move Messages to Wrong Folder',
+    knowMore: 'Learn More',
+    configProxySettings: 'Config Proxy Settings',
+    host: 'Host',
+    isEncrypted: 'Is Encrypted',
+    emailTest: 'Email Test',
+    testSendAddress: 'Test Send Email Address',
+    testMailSend: 'Test Mail Send',
+    portPlaceholder: 'Please enter port',
+    testSendAddressPlaceholder: 'Please enter test send email address',
+    emailSendSuccess: 'Email Send Success',
+    title: 'Title',
+  },
+  person: {
+    spanTitle: 'Personal Info',
+    accountAndPassword: 'Account Password',
+    avatar: 'Avatar',
+    changeAvatar: 'Change Avatar',
+    email: 'Email',
+    wechatApp: 'WeChat Work',
+    feishuApp: 'Feishu',
+    dingdingApp: 'DingTalk',
+    bindInfo: 'Bind Info',
+    newPassword: 'New Password',
+    confirmPassword: 'Confirm Password',
+    pleaseConfirmNewPasswordSecondTime: 'Please confirm new password again',
+    thePasswordEnteredTwiceIsInconsistent: 'The password entered twice is inconsistent',
+    inputStrCountLimit20: 'Character count must be less than 20',
+    inputStrCountLimit: 'Character count must be less than {limit}',
+    alert: 'Warning',
+    confirmUnbind: 'Confirm unbind?',
+    unbindSuccess: 'Unbind successful',
+    bindSuccess: 'Bind successful',
+  },
+  role: {
+    systemRole: 'System Role',
+    technicianRole: 'Technician Role',
+    userRole: 'User Role',
+    authorizedByTheCreator: 'Authorized By The Creator',
+    authorizeAccordingToRules: 'Authorize According To Rules',
+    expression: 'Expression',
+    matchResults: 'Match Results',
+    matchResultEmpty: 'Empty',
+    pleaseFillInTheCompleteRules: 'Please fill in the complete rules',
+    roleName: 'Role Name',
+    pleaseEnterRoleName: 'Please enter role name',
+    appName: 'App Name',
+    pleaseEnterAppName: 'Please enter app name',
+    createRole: 'Create Role',
+    editRole: 'Edit Role',
+    copyRole: 'Copy Role From {roleName}',
+    associatedEmployees: 'Associated Employees',
+    inputNameOrEmail: 'Enter Name/Email',
+    remove: 'Remove',
+    confirmRemoveEmployee: 'Confirm remove this employee?',
+    removeSuccess: 'Remove successful',
+    associatedSuccess: 'Associate successful',
+    roleEmployee: 'Role Employee',
+    operationPermission: 'Operation Permission',
+    dataPermission: 'Data Permission',
+    confirmDeleteRole: 'Confirm delete role [{roleName}]?',
+    deleteRoleSuccess: 'Delete successful',
+    mySelf: 'My self',
+    mySubordinates: 'My Subordinates',
+    myDepartment: 'My Department',
+    myDepartmentAndSubordinateDepartments: 'My Department And Subordinate Departments',
+    test: 'Test',
+    selectApp: 'Select App',
+  }
+}
+
+export default cs_en
diff --git a/cmdb-ui/src/views/setting/lang/zh.js b/cmdb-ui/src/views/setting/lang/zh.js
new file mode 100644
index 0000000..98f043b
--- /dev/null
+++ b/cmdb-ui/src/views/setting/lang/zh.js
@@ -0,0 +1,442 @@
+const cs_zh = {
+  menu: {
+    person: '个人中心',
+    companyInfo: '公司信息',
+    companyStructure: '公司架构',
+    notice: '通知设置',
+    email: '邮件设置',
+    wx: '企业微信',
+    dingding: '钉钉',
+    feishu: '飞书',
+    auth: '认证设置',
+    role: '角色管理',
+    sys: '系统角色',
+    technician: '技术员角色',
+    user: '用户角色',
+    group: '用户分组',
+    duty: '值班管理',
+  },
+  companyInfo: {
+    spanCompany: '公司描述',
+    name: '公司名称',
+    nameValidate: '请输入名称',
+    description: '描述',
+    spanAddress: '公司地址',
+    country: '国家/地区',
+    city: '城市',
+    address: '地址',
+    postcode: '邮政编码',
+    spanContract: '联系方式',
+    spanLogo: '公司标识',
+    website: '网站',
+    phone: '电话号码',
+    phoneValidate: '请输入正确的电话号码',
+    faxCode: '传真号码',
+    faxCodeValidate: '请输入正确的传真号码',
+    email: '邮箱',
+    emailValidate: '请输入正确的邮箱地址',
+    messenger: 'Messenger地址',
+    domainName: '部署域名',
+    logo: '公司logo',
+    upload: '上传',
+    editCompanyLogo: '编辑公司logo',
+    editCompanyLogoSmall: '编辑公司logo缩略图',
+    imageSizeLimit2MB: '图片大小不超过2MB',
+    checkInputCorrect: '请检查输入内容是否正确',
+  },
+  companyStructure: {
+    batchImport: '批量导入',
+    batchEdit: '批量编辑',
+    selectFile: '选择文件',
+    clickDownloadImportTemplate: '点击下载《员工导入模板》',
+    importSuccess: '导入总数据 {allCount} 条, 导入成功',
+    importFailed: '导入失败',
+    count: '条',
+    email: '邮箱',
+    emailPlaceholder: '请输入邮箱',
+    emailFormatErr: '邮箱格式错误',
+    username: '用户名',
+    usernamePlaceholder: '请输入用户名',
+    nickname: '姓名',
+    nicknamePlaceholder: '请输入姓名',
+    password: '密码',
+    passwordPlaceholder: '请输入密码',
+    sex: '性别',
+    sexPlaceholder: '请选择性别',
+    male: '男',
+    female: '女',
+    mobile: '手机号',
+    mobilePlaceholder: '请输入手机号',
+    mobileFormatErr: '请输入正确的手机号',
+    positionName: '岗位',
+    positionNamePlaceholder: '请输入岗位',
+    employee: '员工',
+    departmentName: '部门',
+    currentCompany: '目前所属主体',
+    currentCompanyPlaceholder: '请选择目前所属主体',
+    dfcEntryDate: '初始入职日期',
+    dfcEntryDatePlaceholder: '请选择初始入职日期',
+    entryDate: '目前主体入职日期',
+    entryDatePlaceholder: '请选择目前主体入职日期',
+    isInternship: '正式/实习生',
+    isInternshipPlaceholder: '请选择正式/实习生',
+    internship: '实习生',
+    fullTime: '正式',
+    leaveDate: '离职日期',
+    leaveDatePlaceholder: '请选择离职日期',
+    idCard: '身份证号',
+    idCardPlaceholder: '请输入身份证号',
+    nation: '民族',
+    nationPlaceholder: '请选择民族',
+    idPlace: '籍贯',
+    idPlacePlaceholder: '请输入籍贯',
+    party: '组织关系',
+    partyPlaceholder: '请选择组织关系',
+    partyMember: '党员',
+    member: '团员',
+    masses: '群众',
+    householdRegistrationType: '户籍类型',
+    householdRegistrationTypePlaceholder: '请选择户籍类型',
+    town: '城镇',
+    agriculture: '农业',
+    hometown: '户口所在地',
+    hometownPlaceholder: '请输入户口所在地',
+    marry: '婚姻状况',
+    unmarried: '未婚',
+    married: '已婚',
+    marryPlaceholder: '请选择婚姻状况',
+    maxDegree: '最高学历',
+    maxDegreePlaceholder: '请选择最高学历',
+    phd: '博士',
+    master: '硕士',
+    undergraduate: '本科',
+    specialist: '专科',
+    highSchool: '高中',
+    technicalSecondaryOrHighSchool: '中专/高中',
+    juniorHighSchool: '初中',
+    primarySchool: '小学',
+    emergencyPerson: '紧急联系人',
+    emergencyPersonPlaceholder: '请输入紧急联系人',
+    emergencyPhone: '紧急联系人电话',
+    emergencyPhonePlaceholder: '请输入紧急联系人电话',
+    bankCardInfo: '银行卡',
+    bankCardNumber: '银行卡号',
+    bankCardNumberPlaceholder: '请输入银行卡号',
+    bankCardName: '银行',
+    bankCardNamePlaceholder: '请输入银行',
+    openingBank: '开户行',
+    openingBankPlaceholder: '请输入开户行',
+    accountOpeningLocation: '开户地',
+    accountOpeningLocationPlaceholder: '请输入开户地',
+    school: '毕业学校',
+    schoolPlaceholder: '请输入毕业学校',
+    major: '专业',
+    majorPlaceholder: '请输入专业',
+    education: '学历',
+    educationPlaceholder: '请选择学历',
+    educationalExperience: '教育经历',
+    graduationYear: '毕业年份',
+    graduationYearPlaceholder: '请选择毕业年份',
+    birthDate: '出生日期',
+    birthDatePlaceholder: '请选择出生日期',
+    birthPlace: '出生地',
+    birthPlacePlaceholder: '请输入出生地',
+    nationalityRegion: '国籍/地区',
+    nationalityRegionPlaceholder: '请选择国籍/地区',
+    firstEntryDate: '首次入境日期',
+    firstEntryDatePlaceholder: '请选择首次入境日期',
+    estimatedDepartureDate: '预计离境日期',
+    estimatedDepartureDatePlaceholder: '请选择预计离境日期',
+    lastLogin: '上次登录时间',
+    importFailedReason: '失败原因',
+    selectDepartment: '选择部门',
+    supervisor: '上级',
+    editDirectSupervisor: '编辑上级',
+    selectDirectSupervisor: '选择上级',
+    annualLeave: '年假',
+    editPosition: '编辑岗位',
+    editAnnualLeave: '编辑年假',
+    annualLeavePlaceholder: '请输入年假',
+    virtualAnnualLeave: '虚拟年假',
+    virtualAnnualLeavePlaceholder: '请输入虚拟年假',
+    parentingLeave: '育儿假',
+    leftParentingLeave: '剩余育儿假',
+    parentingLeavePlaceholder: '请输入育儿假',
+    day: '天',
+    resetPassword: '重置密码',
+    confirmPassword: '确认密码',
+    block: '禁用',
+    blockUserConfirm: '该用户将会被禁用，是否继续?',
+    batchBlockUserConfirm: '这些用户将会被禁用，是否继续?',
+    recover: '恢复',
+    recoverUserConfirm: '该用户将会被恢复，是否继续?',
+    batchRecoverUserConfirm: '这些用户将会被恢复，是否继续?',
+    opFailed: '操作失败',
+    opSuccess: '操作成功',
+    createSubDepartment: '创建子部门',
+    editDepartment: '编辑部门',
+    deleteDepartment: '删除部门',
+    downloadAll: '下载全部',
+    downloadSelected: '下载选中',
+    departmentLabel: '部门名称',
+    departmentLabelPlaceholder: '请输入部门名称',
+    parentDepartment: '上级部门',
+    parentDepartmentPlaceholder: '请选择上级部门',
+    departmentDirector: '部门负责人',
+    childrenInformation: '子女信息',
+    childrenName: '子女姓名',
+    childrenGender: '子女性别',
+    childrenBirthday: '子女出生日期',
+    allEmployee: '全部',
+    activeEmployee: '在职员工',
+    blockEmployee: '停用员工',
+    prevStep: '上一步',
+    nextStep: '下一步',
+    done: '完成',
+    uploadFile: '上传文件',
+    confirmData: '确认数据',
+    uploadDone: '上传完成',
+    dataErr: '数据有误',
+    createEmployee: '新建员工',
+    editEmployee: '编辑员工',
+    role: '角色',
+    selectDisplayColumn: '请选择需要展示的列'
+  },
+  auth: {
+    basic: '基本',
+    other: '其他',
+    isEnable: '是否启用',
+    common: '通用',
+    testConnect: '测试连接',
+    testLogin: '测试登录',
+    testSuccess: '测试成功',
+    ldap: {
+      serverAddress: '服务器地址',
+      serverAddressHelp: '例如: 192.168.1.6 或者  ldap://192.168.1.6 或者 ldap://192.168.1.6:389',
+      serverAddressPlaceholder: '请输入服务器地址',
+      domain: '域',
+      domainPlaceholder: '请输入域',
+      user: '用户',
+      username: '用户名称',
+      userPlaceholder: '请输入用户名称',
+      userHelp: '用户dn: cn={},ou=users,dc=xxx,dc=com   {}会替换成用户名'
+    },
+    cas: {
+      server: '服务端地址',
+      serverHelp: '不包括url path，例如https://xxx.com',
+      serverPlaceholder: '请输入cas服务器地址',
+      validateServer: '验证服务端地址',
+      validateServerHelp: '不包括url path，例如https://xxx.com',
+      validateServerPlaceholder: '请输入验证服务端地址',
+      loginRoute: '登录路由',
+      loginRoutePlaceholder: '请输入登录路由',
+      logoutRoute: '注销路由',
+      logoutRoutePlaceholder: '请输入注销路由',
+      validateRoute: '验证路由',
+      validateRoutePlaceholder: '请输入验证路由',
+      afterLoginRoute: '重定向路由',
+      afterLoginRoutePlaceholder: '请输入重定向路由',
+      userMap: '用户属性映射'
+    },
+    autoRedirectLogin: '自动跳转到第三方登录页',
+    autoRedirectLoginHelp: '如果关闭，则会弹出跳转到第三方登录页的确认，点取消按钮会进入系统内置的登录页',
+    usernameOrEmail: '用户名/邮箱',
+    usernameOrEmailPlaceholder: '请输入用户名/邮箱',
+    password: '密码',
+    passwordPlaceholder: '请输入密码',
+    oauth2: {
+      clientId: '客户端ID',
+      clientIdPlaceholder: '请输入客户端ID',
+      clientSecret: '客户端密钥',
+      clientSecretPlaceholder: '请输入客户端密钥',
+      authorizeUrl: '授权链接',
+      authorizeUrlPlaceholder: '请输入授权链接',
+      tokenUrl: '令牌链接',
+      tokenUrlPlaceholder: '请输入令牌链接',
+      userInfo: '用户信息',
+      scopes: '授权范围',
+      scopesPlaceholder: '请输入授权范围',
+    }
+  },
+  duty: {
+    basicSetting: '基础设置',
+    ruleName: '标题',
+    ruleNamePlaceholder: '请输入标题',
+    principalId: '负责人',
+    specifyId: '指定人',
+    principalIdPlaceholder: '请选择负责人/单选',
+    remark: '备注',
+    remarkPlaceholder: '请输入备注',
+    remindTime: '值班提醒时间',
+    remindWay: '提醒方式',
+    remindPeople: '提醒人',
+    mainDutyPeople: '主值班人',
+    deputyDutyPeople: '副值班人',
+    dutyRule: '排班规则',
+    '一': '一',
+    '二': '二',
+    '三': '三',
+    '四': '四',
+    '五': '五',
+    '六': '六',
+    '日': '日',
+    searchPlaceholder: '请查找',
+    dutyTable: '值班表',
+    dutyMember: '值班人员',
+    dutyMemberPlaceholder: '请选择值班人员',
+    startDutyMember: '开始值班人员',
+    startEndDate: '起止日期',
+    startEndDatePlaceholder: '请选择起止日期',
+    dutyPeriod: '值班时段',
+    dutyFrequency: '值班频次',
+    fullDay: '全天',
+    specifyTime: '指定时间',
+    monthDayFormat: 'MM月DD日',
+    week: '周',
+    month: '月',
+    hour: '小时',
+    min: '分',
+    before: '提前',
+    fixed: '固定时间',
+    removeHolidays: '是否去除节假日',
+    offDutyReceiver: '非值班时间接收人',
+    offDutyReceiverPlaceholder: '请选择非值班时间接收人',
+    titleLimit: '请输入标题（20个字符）',
+    remarkLimit: '备注150个字符以内',
+    frequencyLimit: '请输入值班频次（正整数）'
+  },
+  group: {
+    groupName: '用户分组',
+    groupNamePlaceholder: '请输入用户分组',
+    addGroup: '新增分组',
+    editGroup: '编辑分组',
+  },
+  components: {
+    preview: '预览',
+    copy: '复制',
+    editAvatar: '编辑头像',
+    conditionFilter: '条件过滤',
+    selectPlaceholder: '请选择',
+    empty: '空',
+    and: '与',
+    or: '或',
+    equal: '等于',
+    notEqual: '不等于',
+    isEmpty: '为空',
+    isNotEmpty: '不为空',
+    compare: '比较',
+    moreThan: '大于',
+    lessThan: '小于',
+    operatorInPlaceholder: '以 ; 分隔',
+    selectEmployee: '选择员工'
+  },
+  notice: {
+    corpid: '企业ID',
+    agentid: '自建应用ID',
+    corpsecret: '自建应用密钥',
+    itsmAppId: 'ITSM应用ID',
+    robot: '机器人',
+    selectRobot: '请选择机器人',
+    robotConfigErrorTips: '请完整填写机器人配置',
+    webhookAddress: 'Webhook地址',
+    appKey: '应用Key',
+    appSecret: '应用密码',
+    robotCode: '机器人码',
+    sendServer: '发送服务器',
+    connectProtocol: '连接协议',
+    ews: 'EWS(Exchange Web服务)',
+    authType: '认证类型',
+    base: '基本',
+    oauth: 'OAuth',
+    ip: '服务器名/IP地址',
+    username: '用户名',
+    password: '密码',
+    email: '邮件地址',
+    emailType: '邮件类型',
+    port: '端口',
+    testEmailConfig: '测试邮件设置',
+    testRecyclingBin: '测试回收箱',
+    receiveEmailFailed: '接收邮件失败',
+    emailServiceNotConfig: '邮箱服务器未配置，请配置一个邮箱服务器',
+    troubleshooting: '故障诊断',
+    emailConfig: '邮件设置',
+    receiveEmailInterval: '获取邮件间隔',
+    startProxyServer: '启动代理服务器',
+    configProxyServer: '配置代理服务器',
+    startEmailTest: '启动邮件测试',
+    disableCreationOfRequestsViaEmail: '禁用通过邮件创建请求',
+    specifyAllowedEmails: '指定允许的邮件/域名,逗号分隔多个值',
+    specifyAllowedEmailsExample: '例如:user@domain.com,*@domain.com',
+    specifyAllowedEmailsLimit: '限制不能适用于已在会话中的请求,它将聚集到它的上级工单中',
+    messageConfig: '消息设置',
+    moveWrongMessagesToFolder: '将消息移动到错误的文件夹',
+    knowMore: '了解更多',
+    configProxySettings: '配置代理设置',
+    host: '主机',
+    isEncrypted: '是否加密',
+    emailTest: '邮件测试',
+    testSendAddress: '测试发送邮件地址',
+    testMailSend: '测试邮件发送',
+    portPlaceholder: '请输入端口',
+    testSendAddressPlaceholder: '请输入测试发送邮件地址',
+    emailSendSuccess: '已发送邮件，请查收',
+    title: '名称',
+  },
+  person: {
+    spanTitle: '个人信息',
+    accountAndPassword: '账号密码',
+    avatar: '头像',
+    changeAvatar: '更换头像',
+    email: '邮件',
+    wechatApp: '企业微信',
+    feishuApp: '飞书',
+    dingdingApp: '钉钉',
+    bindInfo: '绑定信息',
+    newPassword: '新密码',
+    confirmPassword: '确认密码',
+    pleaseConfirmNewPasswordSecondTime: '请再次确认新密码',
+    thePasswordEnteredTwiceIsInconsistent: '两次输入的密码不一致',
+    inputStrCountLimit20: '字符数须小于20',
+    inputStrCountLimit: '字符数须小于{limit}',
+    alert: '警告',
+    confirmUnbind: '确认解绑?',
+    unbindSuccess: '解绑成功',
+    bindSuccess: '绑定成功',
+  },
+  role: {
+    systemRole: '系统角色',
+    technicianRole: '技术员角色',
+    userRole: '用户角色',
+    authorizedByTheCreator: '按照创建人授权',
+    authorizeAccordingToRules: '按照规则授权',
+    expression: '表达式',
+    matchResults: '匹配结果',
+    matchResultEmpty: '无',
+    pleaseFillInTheCompleteRules: '请填写完整的规则',
+    roleName: '角色名称',
+    pleaseEnterRoleName: '请输入角色名称',
+    appName: '应用名称',
+    pleaseEnterAppName: '请输入应用名称',
+    createRole: '新建角色',
+    editRole: '编辑角色',
+    copyRole: '从 {roleName} 复制角色',
+    associatedEmployees: '关联员工',
+    inputNameOrEmail: '请输入姓名/邮箱',
+    remove: '移除',
+    confirmRemoveEmployee: '确认移除该员工?',
+    removeSuccess: '移除成功',
+    associatedSuccess: '关联成功',
+    roleEmployee: '角色员工',
+    operationPermission: '操作权限',
+    dataPermission: '数据权限',
+    confirmDeleteRole: '确认删除角色 [{roleName}]?',
+    deleteRoleSuccess: '删除成功',
+    mySelf: '本人', // Myself
+    mySubordinates: '本人及下属', // my subordinates
+    myDepartment: '本部门', // my department
+    myDepartmentAndSubordinateDepartments: '本部门及下属部门',
+    test: '测试',
+    selectApp: '选择应用',
+  }
+}
+export default cs_zh
diff --git a/cmdb-ui/src/views/setting/notice/bot.vue b/cmdb-ui/src/views/setting/notice/bot.vue
index 3d48023..3a9b8a5 100644
--- a/cmdb-ui/src/views/setting/notice/bot.vue
+++ b/cmdb-ui/src/views/setting/notice/bot.vue
@@ -1,122 +1,106 @@
-<template>
-  <div>
-    <vxe-table
-      ref="xTable"
-      :data="tableData"
-      size="mini"
-      stripe
-      class="ops-stripe-table"
-      show-overflow
-      :edit-config="{ showIcon: false, trigger: 'manual', mode: 'row' }"
-    >
-      <vxe-column v-for="col in columns" :key="col.field" :field="col.field" :title="col.title" :edit-render="{}">
-        <template #header> <span v-if="col.required" :style="{ color: 'red' }">* </span>{{ col.title }} </template>
-        <template #edit="{ row }">
-          <vxe-input v-model="row[col.field]" type="text"></vxe-input>
-        </template>
-      </vxe-column>
-      <vxe-column title="操作" width="80" v-if="!disabled">
-        <template #default="{ row }">
-          <template v-if="$refs.xTable.isActiveByRow(row)">
-            <a @click="saveRowEvent(row)"><a-icon type="save"/></a>
-          </template>
-          <a-space v-else>
-            <a @click="editRowEvent(row)"><ops-icon type="icon-xianxing-edit"/></a>
-            <a style="color:red" @click="deleteRowEvent(row)"><ops-icon type="icon-xianxing-delete"/></a>
-          </a-space>
-        </template>
-      </vxe-column>
-    </vxe-table>
-    <div :style="{ color: '#f5222d' }" v-if="errorFlag">请完整填写机器人配置</div>
-    <a-button
-      v-if="!disabled"
-      icon="plus-circle"
-      class="ops-button-primary"
-      type="primary"
-      @click="insertEvent"
-    >添加</a-button
-    >
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Bot',
-  props: {
-    columns: {
-      type: Array,
-      default: () => [
-        {
-          field: 'name',
-          title: '名称',
-          required: true,
-        },
-        {
-          field: 'url',
-          title: 'Webhook地址',
-          required: true,
-        },
-      ],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-      errorFlag: false,
-    }
-  },
-  methods: {
-    async insertEvent() {
-      const $table = this.$refs.xTable
-      const record = {
-        name: '',
-        url: '',
-      }
-      const { row: newRow } = await $table.insertAt(record, -1)
-      await $table.setActiveRow(newRow)
-    },
-    saveRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.clearActived()
-    },
-    editRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.setActiveRow(row)
-    },
-    deleteRowEvent(row) {
-      const $table = this.$refs.xTable
-      $table.remove(row)
-    },
-    getData(callback) {
-      const $table = this.$refs.xTable
-      const { fullData: _tableData } = $table.getTableData()
-      const requiredObj = {}
-      this.columns.forEach((col) => {
-        if (col.required) {
-          requiredObj[col.field] = true
-        }
-      })
-      let flag = true
-      _tableData.forEach((td) => {
-        Object.keys(requiredObj).forEach((key) => {
-          if (requiredObj[key]) {
-            flag = !!(flag && td[`${key}`])
-          }
-        })
-      })
-      this.errorFlag = !flag
-      callback(flag, _tableData)
-    },
-    setData(value) {
-      this.tableData = value
-      this.errorFlag = false
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <div>
+    <vxe-table
+      ref="xTable"
+      :data="tableData"
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      show-overflow
+      :edit-config="{ showIcon: false, trigger: 'manual', mode: 'row' }"
+    >
+      <vxe-column v-for="col in columns" :key="col.field" :field="col.field" :title="col.title" :edit-render="{}">
+        <template #header> <span v-if="col.required" :style="{ color: 'red' }">* </span>{{ col.title }} </template>
+        <template #edit="{ row }">
+          <vxe-input v-model="row[col.field]" type="text"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column :title="$t('operation')" width="80" v-if="!disabled">
+        <template #default="{ row }">
+          <template v-if="$refs.xTable.isActiveByRow(row)">
+            <a @click="saveRowEvent(row)"><a-icon type="save"/></a>
+          </template>
+          <a-space v-else>
+            <a @click="editRowEvent(row)"><ops-icon type="icon-xianxing-edit"/></a>
+            <a style="color:red" @click="deleteRowEvent(row)"><ops-icon type="icon-xianxing-delete"/></a>
+          </a-space>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <div :style="{ color: '#f5222d' }" v-if="errorFlag">{{ $t('cs.notice.robotConfigErrorTips') }}</div>
+    <a-button v-if="!disabled" icon="plus-circle" class="ops-button-primary" type="primary" @click="insertEvent">{{
+      $t('add')
+    }}</a-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Bot',
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      errorFlag: false,
+    }
+  },
+  methods: {
+    async insertEvent() {
+      const $table = this.$refs.xTable
+      const record = {
+        name: '',
+        url: '',
+      }
+      const { row: newRow } = await $table.insertAt(record, -1)
+      await $table.setActiveRow(newRow)
+    },
+    saveRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.clearActived()
+    },
+    editRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.setActiveRow(row)
+    },
+    deleteRowEvent(row) {
+      const $table = this.$refs.xTable
+      $table.remove(row)
+    },
+    getData(callback) {
+      const $table = this.$refs.xTable
+      const { fullData: _tableData } = $table.getTableData()
+      const requiredObj = {}
+      this.columns.forEach((col) => {
+        if (col.required) {
+          requiredObj[col.field] = true
+        }
+      })
+      let flag = true
+      _tableData.forEach((td) => {
+        Object.keys(requiredObj).forEach((key) => {
+          if (requiredObj[key]) {
+            flag = !!(flag && td[`${key}`])
+          }
+        })
+      })
+      this.errorFlag = !flag
+      callback(flag, _tableData)
+    },
+    setData(value) {
+      this.tableData = value
+      this.errorFlag = false
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/views/setting/notice/dingding.vue b/cmdb-ui/src/views/setting/notice/dingding.vue
index debed25..c02a72a 100644
--- a/cmdb-ui/src/views/setting/notice/dingding.vue
+++ b/cmdb-ui/src/views/setting/notice/dingding.vue
@@ -1,151 +1,151 @@
-<template>
-  <div class="notice-dingding-wrapper" :style="{ height: `${windowHeight - 64}px` }">
-    <a-form-model ref="dingdingForm" :model="dingdingData" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <SpanTitle>基础设置</SpanTitle>
-      <a-form-model-item label="应用Key">
-        <a-input v-model="dingdingData.appKey" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="应用密码">
-        <a-input v-model="dingdingData.appSecret" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="机器人码">
-        <a-input v-model="dingdingData.robotCode" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="机器人">
-        <Bot
-          ref="bot"
-          :disabled="!isEditable"
-          :columns="[
-            {
-              field: 'name',
-              title: '名称',
-              required: true,
-            },
-            {
-              field: 'url',
-              title: 'Webhook地址',
-              required: true,
-            },
-            {
-              field: 'token',
-              title: 'token',
-              required: false,
-            },
-          ]"
-        />
-      </a-form-model-item>
-      <!-- <a-form-model-item label="测试邮件设置">
-        <a-button type="primary" ghost>测试回收箱</a-button>
-        <br />
-        <span
-          class="notice-dingding-wrapper-tips"
-        ><ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" /> 邮件接收失败</span
-        >
-        <br />
-        <span>邮箱服务器未配置，请配置一个邮箱服务器 | <a>故障诊断</a></span>
-      </a-form-model-item> -->
-      <a-row v-if="isEditable">
-        <a-col :span="16" :offset="3">
-          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> 重置 </a-button>
-          </a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import SpanTitle from '../components/spanTitle.vue'
-import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
-import { mixinPermissions } from '@/utils/mixin'
-import Bot from './bot.vue'
-
-export default {
-  name: 'NoticeDingding',
-  components: { SpanTitle, Bot },
-  mixins: [mixinPermissions],
-  data() {
-    return {
-      labelCol: { lg: 3, md: 5, sm: 8 },
-      wrapperCol: { lg: 15, md: 19, sm: 16 },
-      id: null,
-      dingdingData: {
-        appKey: '',
-        appSecret: '',
-        robotCode: '',
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isEditable() {
-      return this.hasDetailPermission('backend', '通知设置', ['update'])
-    },
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getNoticeConfigByPlatform({ platform: 'dingdingApp' }).then((res) => {
-        this.id = res?.id ?? null
-        if (this.id) {
-          this.dingdingData = res.info
-          this.$refs.bot.setData(res?.info?.bot)
-        }
-      })
-    },
-    onSubmit() {
-      this.$refs.dingdingForm.validate(async (valid) => {
-        if (valid) {
-          this.$refs.bot.getData(async (flag, bot) => {
-            if (flag) {
-              if (this.id) {
-                await putNoticeConfigByPlatform(this.id, { info: { ...this.dingdingData, bot, label: '钉钉' } })
-              } else {
-                await postNoticeConfigByPlatform({
-                  platform: 'dingdingApp',
-                  info: { ...this.dingdingData, bot, label: '钉钉' },
-                })
-              }
-              this.$message.success('保存成功')
-              this.getData()
-            }
-          })
-        }
-      })
-    },
-    resetForm() {
-      this.dingdingData = {
-        appKey: '',
-        appSecret: '',
-        robotCode: '',
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.notice-dingding-wrapper {
-  background-color: #fff;
-  padding-top: 15px;
-  overflow: auto;
-  margin-bottom: -24px;
-  border-radius: 15px;
-  .notice-dingding-wrapper-tips {
-    display: inline-block;
-    background-color: #ffdfdf;
-    border-radius: 4px;
-    padding: 0 12px;
-    width: 300px;
-    color: #000000;
-    margin-top: 8px;
-  }
-}
-</style>
+<template>
+  <div class="notice-dingding-wrapper" :style="{ height: `${windowHeight - 64}px` }">
+    <a-form-model ref="dingdingForm" :model="dingdingData" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <SpanTitle>{{ $t('cs.duty.basicSetting') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.appKey')">
+        <a-input v-model="dingdingData.appKey" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.appSecret')">
+        <a-input v-model="dingdingData.appSecret" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.robotCode')">
+        <a-input v-model="dingdingData.robotCode" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.robot')">
+        <Bot
+          ref="bot"
+          :disabled="!isEditable"
+          :columns="[
+            {
+              field: 'name',
+              title: $t('cs.notice.title'),
+              required: true,
+            },
+            {
+              field: 'url',
+              title: $t('cs.notice.webhookAddress'),
+              required: true,
+            },
+            {
+              field: 'token',
+              title: 'token',
+              required: false,
+            },
+          ]"
+        />
+      </a-form-model-item>
+      <!-- <a-form-model-item :label="测试邮件设置">
+        <a-button type="primary" ghost>测试回收箱</a-button>
+        <br />
+        <span
+          class="notice-dingding-wrapper-tips"
+        ><ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" /> 邮件接收失败</span
+        >
+        <br />
+        <span>邮箱服务器未配置，请配置一个邮箱服务器 | <a>故障诊断</a></span>
+      </a-form-model-item> -->
+      <a-row v-if="isEditable">
+        <a-col :span="16" :offset="3">
+          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-button type="primary" @click="onSubmit"> {{ $t('save') }} </a-button>
+            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> {{ $t('reset') }} </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SpanTitle from '../components/spanTitle.vue'
+import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
+import { mixinPermissions } from '@/utils/mixin'
+import Bot from './bot.vue'
+
+export default {
+  name: 'NoticeDingding',
+  components: { SpanTitle, Bot },
+  mixins: [mixinPermissions],
+  data() {
+    return {
+      labelCol: { lg: 3, md: 5, sm: 8 },
+      wrapperCol: { lg: 15, md: 19, sm: 16 },
+      id: null,
+      dingdingData: {
+        appKey: '',
+        appSecret: '',
+        robotCode: '',
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isEditable() {
+      return this.hasDetailPermission('backend', '通知设置', ['update'])
+    },
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getNoticeConfigByPlatform({ platform: 'dingdingApp' }).then((res) => {
+        this.id = res?.id ?? null
+        if (this.id) {
+          this.dingdingData = res.info
+          this.$refs.bot.setData(res?.info?.bot)
+        }
+      })
+    },
+    onSubmit() {
+      this.$refs.dingdingForm.validate(async (valid) => {
+        if (valid) {
+          this.$refs.bot.getData(async (flag, bot) => {
+            if (flag) {
+              if (this.id) {
+                await putNoticeConfigByPlatform(this.id, { info: { ...this.dingdingData, bot, label: this.$t('cs.person.dingdingApp') } })
+              } else {
+                await postNoticeConfigByPlatform({
+                  platform: 'dingdingApp',
+                  info: { ...this.dingdingData, bot, label: this.$t('cs.person.dingdingApp') },
+                })
+              }
+              this.$message.success(this.$t('saveSuccess'))
+              this.getData()
+            }
+          })
+        }
+      })
+    },
+    resetForm() {
+      this.dingdingData = {
+        appKey: '',
+        appSecret: '',
+        robotCode: '',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.notice-dingding-wrapper {
+  background-color: #fff;
+  padding-top: 15px;
+  overflow: auto;
+  margin-bottom: -24px;
+  border-radius: 15px;
+  .notice-dingding-wrapper-tips {
+    display: inline-block;
+    background-color: #ffdfdf;
+    border-radius: 4px;
+    padding: 0 12px;
+    width: 300px;
+    color: #000000;
+    margin-top: 8px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/views/setting/notice/email/index.less b/cmdb-ui/src/views/setting/notice/email/index.less
index 0419b3b..c60ee3f 100644
--- a/cmdb-ui/src/views/setting/notice/email/index.less
+++ b/cmdb-ui/src/views/setting/notice/email/index.less
@@ -1,17 +1,17 @@
-.notice-email-wrapper {
-  background-color: #fff;
-  padding-top: 24px;
-  overflow: auto;
-  .notice-email-error-tips {
-    display: inline-block;
-    background-color: #ffdfdf;
-    border-radius: 4px;
-    padding: 0 12px;
-    width: 300px;
-    color: #000000;
-    margin-top: 8px;
-  }
-  .ant-form-item {
-    margin-bottom: 10px;
-  }
-}
+.notice-email-wrapper {
+  background-color: #fff;
+  padding-top: 24px;
+  overflow: auto;
+  .notice-email-error-tips {
+    display: inline-block;
+    background-color: #ffdfdf;
+    border-radius: 4px;
+    padding: 0 12px;
+    width: 300px;
+    color: #000000;
+    margin-top: 8px;
+  }
+  .ant-form-item {
+    margin-bottom: 10px;
+  }
+}
diff --git a/cmdb-ui/src/views/setting/notice/email/index.vue b/cmdb-ui/src/views/setting/notice/email/index.vue
index 8d70986..22a0211 100644
--- a/cmdb-ui/src/views/setting/notice/email/index.vue
+++ b/cmdb-ui/src/views/setting/notice/email/index.vue
@@ -1,33 +1,33 @@
-<template>
-  <div :style="{ marginBottom: '-24px' }">
-    <a-tabs :activeKey="activeKey" @change="changeTab" class="ops-tab" type="card">
-      <!-- <a-tab-pane key="1" tab="接收服务器">
-        <Receive />
-      </a-tab-pane> -->
-      <a-tab-pane key="2" tab="发送服务器">
-        <Send />
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script>
-import Receive from './receive.vue'
-import Send from './send.vue'
-export default {
-  name: 'NoticeEmail',
-  components: { Receive, Send },
-  data() {
-    return {
-      activeKey: '2',
-    }
-  },
-  methods: {
-    changeTab(activeKey) {
-      this.activeKey = activeKey
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <div :style="{ marginBottom: '-24px' }">
+    <a-tabs :activeKey="activeKey" @change="changeTab" class="ops-tab" type="card">
+      <!-- <a-tab-pane key="1" tab="接收服务器">
+        <Receive />
+      </a-tab-pane> -->
+      <a-tab-pane key="2" :tab="$t('cs.notice.sendServer')">
+        <Send />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import Receive from './receive.vue'
+import Send from './send.vue'
+export default {
+  name: 'NoticeEmail',
+  components: { Receive, Send },
+  data() {
+    return {
+      activeKey: '2',
+    }
+  },
+  methods: {
+    changeTab(activeKey) {
+      this.activeKey = activeKey
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/views/setting/notice/email/receive.vue b/cmdb-ui/src/views/setting/notice/email/receive.vue
index a6c48c2..3180610 100644
--- a/cmdb-ui/src/views/setting/notice/email/receive.vue
+++ b/cmdb-ui/src/views/setting/notice/email/receive.vue
@@ -1,196 +1,196 @@
-<template>
-  <div class="notice-email-wrapper" :style="{ height: `${windowHeight - 104}px` }">
-    <a-form-model :model="settingData" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <SpanTitle>基础设置</SpanTitle>
-      <a-form-model-item label="连接协议">
-        <a-radio-group v-model="settingData.connectProtocol" :default-value="1" @change="changeConnectProtocol">
-          <a-radio :value="1" :default-checked="true"> POP/IMAP/POPS/IMAPS </a-radio>
-          <a-radio :value="2"> EWS(Exchange Web服务) </a-radio>
-        </a-radio-group>
-      </a-form-model-item>
-      <a-form-model-item label="认证类型">
-        <a-select v-model="settingData.authentication">
-          <a-select-option value="Base"> 基本 </a-select-option>
-          <a-select-option value="OAuth"> OAuth </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="服务器名/IP地址" prop="IP">
-        <a-input v-model="settingData.IP" />
-      </a-form-model-item>
-      <a-form-model-item label="用户名">
-        <a-input v-model="settingData.username" />
-      </a-form-model-item>
-      <a-form-model-item label="密码">
-        <a-input v-model="settingData.password" />
-      </a-form-model-item>
-      <a-form-model-item label="邮件地址">
-        <a-input v-model="settingData.email" />
-      </a-form-model-item>
-      <template v-if="settingData.connectProtocol === 1">
-        <a-form-model-item label="邮件类型">
-          <a-select v-model="settingData.emailType">
-            <a-select-option value="POP"> POP </a-select-option>
-            <a-select-option value="IMAP"> IMAP </a-select-option>
-            <a-select-option value="POPS"> POPS </a-select-option>
-            <a-select-option value="IMAPS"> IMAPS </a-select-option>
-          </a-select>
-        </a-form-model-item>
-        <a-form-model-item label="端口">
-          <a-input v-model="settingData.port" />
-        </a-form-model-item>
-      </template>
-      <a-form-model-item label="测试邮件设置">
-        <a-button type="primary" ghost>测试回收箱</a-button>
-        <br />
-        <span class="notice-email-error-tips">
-          <ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" />
-          邮件接收失败
-        </span>
-        <br />
-        <span
-        >邮箱服务器未配置，请配置一个邮箱服务器 <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
-          <a>故障诊断</a></span
-        >
-      </a-form-model-item>
-      <SpanTitle>邮件设置</SpanTitle>
-      <a-form-model-item label="获取邮件间隔" :wrapperCol="{ span: 4 }">
-        <a-input class="ant-input-after" v-model="settingData.getEmailTimeout" />
-        <span :style="{ position: 'absolute', marginLeft: '8px' }">分</span>
-      </a-form-model-item>
-      <a-row>
-        <a-col :span="16" :offset="3">
-          <a-checkbox :default-checked="false" disabled>启动代理服务器</a-checkbox>
-          <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px' }" />
-          <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
-          <a @click="configProxySetting">配置代理设置</a>
-          <br />
-          <a-checkbox :default-checked="false">启动邮件测试</a-checkbox>
-          <br /><br />
-          <a-checkbox :default-checked="false" @change="changeCreateReqByEmail">禁用通过邮件创建请求</a-checkbox>
-          <br />
-          <template v-if="settingData.banReqByEmail">
-            <strong>指定允许的邮件/域名,逗号分隔多个值</strong>
-            <a-input type="textarea" :style="{ borderRadius: '8px', borderColor: '#2F54EB' }" />
-            <p :style="{ fontSize: '12px' }">例如:user@domain.com,*@domain.com</p>
-            <p :style="{ fontSize: '12px' }">限制不能适用于已在会话中的请求,它将聚集到它的上级工单中</p>
-          </template>
-        </a-col>
-      </a-row>
-      <SpanTitle>消息设置</SpanTitle>
-      <a-row>
-        <a-col :span="16" :offset="3">
-          <a-checkbox :default-checked="false">将消息移动到错误的文件夹</a-checkbox>
-          <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px' }" />
-          <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
-          <a href="#">了解更多</a>
-        </a-col>
-      </a-row>
-      <br /><br />
-      <a-row>
-        <a-col :span="16" :offset="3">
-          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> 重置 </a-button>
-          </a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-    <a-modal dialogClass="ops-modal" width="500px" v-model="visible" title="配置代理设置">
-      <a-form-model v-model="proxySetting" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
-        <a-form-model-item label="主机">
-          <a-input v-model="proxySetting.host" />
-        </a-form-model-item>
-        <a-form-model-item label="端口">
-          <a-input v-model="proxySetting.port" />
-        </a-form-model-item>
-        <a-form-model-item label="用户名">
-          <a-input v-model="proxySetting.username" />
-        </a-form-model-item>
-        <a-form-model-item label="密码">
-          <a-input v-model="proxySetting.password" />
-        </a-form-model-item>
-      </a-form-model>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import SpanTitle from '../../components/spanTitle.vue'
-export default {
-  name: 'Receive',
-  components: { SpanTitle },
-  data() {
-    return {
-      labelCol: { span: 3 },
-      wrapperCol: { span: 10 },
-      settingData: {
-        connectProtocol: 1,
-        authentication: 'Base',
-        IP: '',
-        username: '',
-        password: '',
-        email: '',
-        emailType: '',
-        port: '',
-
-        getEmailTimeout: '',
-        activeProxy: false,
-        activeEmailDebug: false,
-        banReqByEmail: false,
-
-        transfromMessage: false,
-      },
-      visible: false,
-      proxySetting: {
-        host: '',
-        post: '',
-        username: '',
-        password: '',
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-  },
-  methods: {
-    changeConnectProtocol(e) {
-      console.log(e.target.value)
-    },
-    changeCreateReqByEmail(e) {
-      this.settingData.banReqByEmail = e.target.checked
-    },
-    configProxySetting() {
-      this.visible = true
-    },
-    onSubmit() {
-      console.log(this.settingData)
-    },
-    resetForm() {
-      this.settingData = {
-        connectProtocol: 1,
-        authentication: '',
-        IP: '',
-        username: '',
-        password: '',
-        email: '',
-        emailType: '',
-        port: '',
-
-        getEmailTimeout: '',
-        activeProxy: false,
-        activeEmailDebug: false,
-        banReqByEmail: false,
-
-        transfromMessage: false,
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-@import './index.less';
-</style>
+<template>
+  <div class="notice-email-wrapper" :style="{ height: `${windowHeight - 104}px` }">
+    <a-form-model :model="settingData" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <SpanTitle>{{ $t('cs.duty.basicSetting') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.connectProtocol')">
+        <a-radio-group v-model="settingData.connectProtocol" :default-value="1" @change="changeConnectProtocol">
+          <a-radio :value="1" :default-checked="true"> POP/IMAP/POPS/IMAPS </a-radio>
+          <a-radio :value="2">{{ $t('cs.notice.ews') }}</a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.authType')">
+        <a-select v-model="settingData.authentication">
+          <a-select-option value="Base"> {{ $t('cs.notice.base') }} </a-select-option>
+          <a-select-option value="OAuth"> {{ $t('cs.notice.oauth') }} </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.ip')" prop="IP">
+        <a-input v-model="settingData.IP" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.username')">
+        <a-input v-model="settingData.username" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.password')">
+        <a-input v-model="settingData.password" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.email')">
+        <a-input v-model="settingData.email" />
+      </a-form-model-item>
+      <template v-if="settingData.connectProtocol === 1">
+        <a-form-model-item :label="$t('cs.notice.emailType')">
+          <a-select v-model="settingData.emailType">
+            <a-select-option value="POP"> POP </a-select-option>
+            <a-select-option value="IMAP"> IMAP </a-select-option>
+            <a-select-option value="POPS"> POPS </a-select-option>
+            <a-select-option value="IMAPS"> IMAPS </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item :label="$t('cs.notice.port')">
+          <a-input v-model="settingData.port" />
+        </a-form-model-item>
+      </template>
+      <a-form-model-item :label="$t('cs.notice.oauth')">
+        <a-button type="primary" ghost>{{ $t('cs.notice.testRecyclingBin') }}</a-button>
+        <br />
+        <span class="notice-email-error-tips">
+          <ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" />
+          {{ $t('cs.notice.receiveEmailFailed') }}
+        </span>
+        <br />
+        <span
+        >{{ $('cs.notice.emailServiceNotConfig') }} <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
+          <a>{{ $('cs.notice.troubleshooting') }}</a></span
+        >
+      </a-form-model-item>
+      <SpanTitle>{{ $('cs.notice.emailConfig') }}</SpanTitle>
+      <a-form-model-item :label="$('cs.notice.receiveEmailInterval')" :wrapperCol="{ span: 4 }">
+        <a-input class="ant-input-after" v-model="settingData.getEmailTimeout" />
+        <span :style="{ position: 'absolute', marginLeft: '8px' }">{{ $t('cs.duty.min') }}</span>
+      </a-form-model-item>
+      <a-row>
+        <a-col :span="16" :offset="3">
+          <a-checkbox :default-checked="false" disabled>{{ $('cs.notice.startProxyServer') }}</a-checkbox>
+          <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px' }" />
+          <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
+          <a @click="configProxySetting">{{ $('cs.notice.configProxyServer') }}</a>
+          <br />
+          <a-checkbox :default-checked="false">{{ $('cs.notice.startEmailTest') }}</a-checkbox>
+          <br /><br />
+          <a-checkbox :default-checked="false" @change="changeCreateReqByEmail">{{ $('cs.notice.disableCreationOfRequestsViaEmail') }}</a-checkbox>
+          <br />
+          <template v-if="settingData.banReqByEmail">
+            <strong>{{ $('cs.notice.specifyAllowedEmails') }}</strong>
+            <a-input type="textarea" :style="{ borderRadius: '8px', borderColor: '#2F54EB' }" />
+            <p :style="{ fontSize: '12px' }">{{ $('cs.notice.specifyAllowedEmailsExample') }}</p>
+            <p :style="{ fontSize: '12px' }">{{ $('cs.notice.specifyAllowedEmailsLimit') }}</p>
+          </template>
+        </a-col>
+      </a-row>
+      <SpanTitle>{{ $('cs.notice.messageConfig') }}</SpanTitle>
+      <a-row>
+        <a-col :span="16" :offset="3">
+          <a-checkbox :default-checked="false">{{ $('cs.notice.moveWrongMessagesToFolder') }}</a-checkbox>
+          <a-icon type="info-circle" :style="{ color: '#FF9E58', fontSize: '16px' }" />
+          <a-divider type="vertical" :style="{ backgroundColor: '#2F54EB' }" />
+          <a href="#">{{ $('cs.notice.knowMore') }}</a>
+        </a-col>
+      </a-row>
+      <br /><br />
+      <a-row>
+        <a-col :span="16" :offset="3">
+          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-button type="primary" @click="onSubmit"> {{ $('save') }} </a-button>
+            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> {{ $('reset') }}  </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+    <a-modal dialogClass="ops-modal" width="500px" v-model="visible" :title="$('cs.notice.configProxySettings')">
+      <a-form-model v-model="proxySetting" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
+        <a-form-model-item :label="$('cs.notice.host')">
+          <a-input v-model="proxySetting.host" />
+        </a-form-model-item>
+        <a-form-model-item :label="$('cs.notice.port')">
+          <a-input v-model="proxySetting.port" />
+        </a-form-model-item>
+        <a-form-model-item :label="$('cs.notice.username')">
+          <a-input v-model="proxySetting.username" />
+        </a-form-model-item>
+        <a-form-model-item :label="$('cs.notice.password')">
+          <a-input v-model="proxySetting.password" />
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SpanTitle from '../../components/spanTitle.vue'
+export default {
+  name: 'Receive',
+  components: { SpanTitle },
+  data() {
+    return {
+      labelCol: { span: 3 },
+      wrapperCol: { span: 10 },
+      settingData: {
+        connectProtocol: 1,
+        authentication: 'Base',
+        IP: '',
+        username: '',
+        password: '',
+        email: '',
+        emailType: '',
+        port: '',
+
+        getEmailTimeout: '',
+        activeProxy: false,
+        activeEmailDebug: false,
+        banReqByEmail: false,
+
+        transfromMessage: false,
+      },
+      visible: false,
+      proxySetting: {
+        host: '',
+        post: '',
+        username: '',
+        password: '',
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+  },
+  methods: {
+    changeConnectProtocol(e) {
+      console.log(e.target.value)
+    },
+    changeCreateReqByEmail(e) {
+      this.settingData.banReqByEmail = e.target.checked
+    },
+    configProxySetting() {
+      this.visible = true
+    },
+    onSubmit() {
+      console.log(this.settingData)
+    },
+    resetForm() {
+      this.settingData = {
+        connectProtocol: 1,
+        authentication: '',
+        IP: '',
+        username: '',
+        password: '',
+        email: '',
+        emailType: '',
+        port: '',
+
+        getEmailTimeout: '',
+        activeProxy: false,
+        activeEmailDebug: false,
+        banReqByEmail: false,
+
+        transfromMessage: false,
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/cmdb-ui/src/views/setting/notice/email/send.vue b/cmdb-ui/src/views/setting/notice/email/send.vue
index 0978439..3742399 100644
--- a/cmdb-ui/src/views/setting/notice/email/send.vue
+++ b/cmdb-ui/src/views/setting/notice/email/send.vue
@@ -1,169 +1,171 @@
-<template>
-  <div class="notice-email-wrapper" :style="{ height: `${windowHeight - 104}px` }">
-    <a-form-model ref="sendForm" :model="settingData" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
-      <SpanTitle>基础设置</SpanTitle>
-      <a-form-model-item label="是否加密">
-        <a-radio-group v-model="settingData.tls" :disabled="!isEditable">
-          <a-radio :value="true">
-            是
-          </a-radio>
-          <a-radio :value="false">
-            否
-          </a-radio>
-        </a-radio-group>
-      </a-form-model-item>
-      <a-form-model-item label="端口" prop="port">
-        <a-input v-model="settingData.port" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="邮件服务器" prop="host">
-        <a-input v-model="settingData.host" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="用户名" prop="account">
-        <a-input v-model="settingData.account" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="密码" prop="password">
-        <a-input-password v-model="settingData.password" :disabled="!isEditable" />
-      </a-form-model-item>
-      <SpanTitle>邮件测试</SpanTitle>
-      <a-form-model-item label="测试发送邮件地址" prop="receive_address">
-        <a-input v-model="settingData.receive_address" :disabled="!isEditable">
-          <span
-            v-if="isEditable"
-            :style="{ cursor: 'pointer' }"
-            @click="testSendEmail"
-            slot="addonAfter"
-          >测试邮件发送</span
-          >
-        </a-input>
-      </a-form-model-item>
-      <a-row v-if="isEditable">
-        <a-col :span="16" :offset="3">
-          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> 重置 </a-button>
-          </a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import SpanTitle from '../../components/spanTitle.vue'
-import {
-  getNoticeConfigByPlatform,
-  postNoticeConfigByPlatform,
-  putNoticeConfigByPlatform,
-  sendTestEmail,
-} from '@/api/noticeSetting'
-import { mixinPermissions } from '@/utils/mixin'
-export default {
-  name: 'Send',
-  mixins: [mixinPermissions],
-  components: { SpanTitle },
-  data() {
-    return {
-      labelCol: { lg: 3, md: 5, sm: 8 },
-      wrapperCol: { lg: 10, md: 12, sm: 12 },
-      id: null,
-      settingData: {
-        tls: true,
-        host: '',
-        account: '',
-        password: '',
-        port: '',
-        receive_address: '',
-      },
-      rules: {
-        port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
-        host: [{ required: true, whitespace: true, message: '请输入服务器', trigger: 'blur' }],
-        account: [
-          { required: true, whitespace: true, message: '请输入用户名', trigger: 'blur' },
-          {
-            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
-            message: '邮箱格式错误',
-            trigger: 'blur',
-          },
-        ],
-        password: [{ required: false, whitespace: true, message: '请输入密码', trigger: 'blur' }],
-        receive_address: [
-          { required: false, whitespace: true, message: '请输入测试发送邮件地址', trigger: 'blur' },
-          {
-            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
-            message: '邮箱格式错误',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isEditable() {
-      return this.hasDetailPermission('backend', '通知设置', ['update'])
-    },
-  },
-  watch: {
-    'settingData.tls': {
-      handler(newV, oldV) {
-        if (newV === false) {
-          this.settingData.port = 25
-        }
-        if (newV === true) {
-          this.settingData.port = 465
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getNoticeConfigByPlatform({ platform: 'email' }).then((res) => {
-        this.id = res?.id ?? null
-        if (this.id) {
-          this.settingData = res.info
-        }
-      })
-    },
-    async testSendEmail() {
-      await sendTestEmail(this.settingData.receive_address, {
-        info: { ...this.settingData, receive_address: undefined },
-      })
-      this.$message.success('已发送邮件，请查收')
-    },
-    onSubmit() {
-      this.$refs.sendForm.validate(async (valid) => {
-        if (valid) {
-          if (this.id) {
-            await putNoticeConfigByPlatform(this.id, { info: { ...this.settingData, label: '邮箱' } })
-          } else {
-            await postNoticeConfigByPlatform({ platform: 'email', info: { ...this.settingData, label: '邮箱' } })
-          }
-          this.$message.success('保存成功')
-          this.getData()
-        }
-      })
-    },
-    resetForm() {
-      this.settingData = {
-        tls: true,
-        host: '',
-        account: '',
-        password: '',
-        port: 25,
-        receive_address: '',
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-@import './index.less';
-</style>
+<template>
+  <div class="notice-email-wrapper" :style="{ height: `${windowHeight - 104}px` }">
+    <a-form-model ref="sendForm" :model="settingData" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
+      <SpanTitle>{{ $t('cs.duty.basicSetting') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.isEncrypted')">
+        <a-radio-group v-model="settingData.tls" :disabled="!isEditable">
+          <a-radio :value="true">
+            {{ $t('yes') }}
+          </a-radio>
+          <a-radio :value="false">
+            {{ $t('no') }}
+          </a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.port')" prop="port">
+        <a-input v-model="settingData.port" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.host')" prop="host">
+        <a-input v-model="settingData.host" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.username')" prop="account">
+        <a-input v-model="settingData.account" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.password')" prop="password">
+        <a-input-password v-model="settingData.password" :disabled="!isEditable" />
+      </a-form-model-item>
+      <SpanTitle>{{ $t('cs.notice.emailTest') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.testSendAddress')" prop="receive_address">
+        <a-input v-model="settingData.receive_address" :disabled="!isEditable">
+          <span
+            v-if="isEditable"
+            :style="{ cursor: 'pointer' }"
+            @click="testSendEmail"
+            slot="addonAfter"
+          >{{ $t('cs.notice.testMailSend') }}</span
+          >
+        </a-input>
+      </a-form-model-item>
+      <a-row v-if="isEditable">
+        <a-col :span="16" :offset="3">
+          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-button type="primary" @click="onSubmit"> {{ $t('save') }} </a-button>
+            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> {{ $t('reset') }} </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SpanTitle from '../../components/spanTitle.vue'
+import {
+  getNoticeConfigByPlatform,
+  postNoticeConfigByPlatform,
+  putNoticeConfigByPlatform,
+  sendTestEmail,
+} from '@/api/noticeSetting'
+import { mixinPermissions } from '@/utils/mixin'
+export default {
+  name: 'Send',
+  mixins: [mixinPermissions],
+  components: { SpanTitle },
+  data() {
+    return {
+      labelCol: { lg: 3, md: 5, sm: 8 },
+      wrapperCol: { lg: 10, md: 12, sm: 12 },
+      id: null,
+      settingData: {
+        tls: true,
+        host: '',
+        account: '',
+        password: '',
+        port: '',
+        receive_address: '',
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      rules() {
+        return {
+          port: [{ required: true, message: this.$t('cs.notice.portPlaceholder'), trigger: 'blur' }],
+        host: [{ required: true, whitespace: true, message: this.$t('cs.auth.ldap.serverAddressPlaceholder'), trigger: 'blur' }],
+        account: [
+          { required: true, whitespace: true, message: this.$t('cs.auth.ldap.userPlaceholder'), trigger: 'blur' },
+          {
+            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+            message: this.$t('cs.companyStructure.emailFormatErr'),
+            trigger: 'blur',
+          },
+        ],
+        password: [{ required: false, whitespace: true, message: this.$t('cs.companyStructure.passwordPlaceholder'), trigger: 'blur' }],
+        receive_address: [
+          { required: false, whitespace: true, message: this.$t('cs.notice.testSendAddressPlaceholder'), trigger: 'blur' },
+          {
+            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+            message: this.$t('cs.companyStructure.emailFormatErr'),
+            trigger: 'blur',
+          },
+        ]
+        }
+      },
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isEditable() {
+      return this.hasDetailPermission('backend', '通知设置', ['update'])
+    },
+  },
+  watch: {
+    'settingData.tls': {
+      handler(newV, oldV) {
+        if (newV === false) {
+          this.settingData.port = 25
+        }
+        if (newV === true) {
+          this.settingData.port = 465
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getNoticeConfigByPlatform({ platform: 'email' }).then((res) => {
+        this.id = res?.id ?? null
+        if (this.id) {
+          this.settingData = res.info
+        }
+      })
+    },
+    async testSendEmail() {
+      await sendTestEmail(this.settingData.receive_address, {
+        info: { ...this.settingData, receive_address: undefined },
+      })
+      this.$message.success(this.$t('cs.notice.emailSendSuccess'))
+    },
+    onSubmit() {
+      this.$refs.sendForm.validate(async (valid) => {
+        if (valid) {
+          if (this.id) {
+            await putNoticeConfigByPlatform(this.id, { info: { ...this.settingData, label: this.$t('cs.companyInfo.email') } })
+          } else {
+            await postNoticeConfigByPlatform({ platform: 'email', info: { ...this.settingData, label: this.$t('cs.companyInfo.email') } })
+          }
+          this.$message.success(this.$t('saveSuccess'))
+          this.getData()
+        }
+      })
+    },
+    resetForm() {
+      this.settingData = {
+        tls: true,
+        host: '',
+        account: '',
+        password: '',
+        port: 25,
+        receive_address: '',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/cmdb-ui/src/views/setting/notice/feishu.vue b/cmdb-ui/src/views/setting/notice/feishu.vue
index 45de4ac..f297329 100644
--- a/cmdb-ui/src/views/setting/notice/feishu.vue
+++ b/cmdb-ui/src/views/setting/notice/feishu.vue
@@ -1,131 +1,131 @@
-<template>
-  <div class="notice-feishu-wrapper" :style="{ height: `${windowHeight - 64}px` }">
-    <a-form-model ref="feishuForm" :model="feishuData" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <SpanTitle>基础设置</SpanTitle>
-      <a-form-model-item label="应用ID">
-        <a-input v-model="feishuData.id" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="应用密码">
-        <a-input v-model="feishuData.password" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="机器人">
-        <Bot
-          ref="bot"
-          :disabled="!isEditable"
-          :columns="[
-            {
-              field: 'name',
-              title: '名称',
-              required: true,
-            },
-            {
-              field: 'url',
-              title: 'Webhook地址',
-              required: true,
-            },
-          ]"
-        />
-      </a-form-model-item>
-      <a-row v-if="isEditable">
-        <a-col :span="16" :offset="3">
-          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> 重置 </a-button>
-          </a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import SpanTitle from '../components/spanTitle.vue'
-import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
-import { mixinPermissions } from '@/utils/mixin'
-import Bot from './bot.vue'
-
-export default {
-  name: 'NoticeFeishu',
-  components: { SpanTitle, Bot },
-  mixins: [mixinPermissions],
-  data() {
-    return {
-      labelCol: { lg: 3, md: 5, sm: 8 },
-      wrapperCol: { lg: 15, md: 19, sm: 16 },
-      id: null,
-      feishuData: {
-        id: '',
-        password: '',
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isEditable() {
-      return this.hasDetailPermission('backend', '通知设置', ['update'])
-    },
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getNoticeConfigByPlatform({ platform: 'feishuApp' }).then((res) => {
-        this.id = res?.id ?? null
-        if (this.id) {
-          this.feishuData = res.info
-          this.$refs.bot.setData(res?.info?.bot)
-        }
-      })
-    },
-    onSubmit() {
-      this.$refs.feishuForm.validate(async (valid) => {
-        if (valid) {
-          this.$refs.bot.getData(async (flag, bot) => {
-            if (flag) {
-              if (this.id) {
-                await putNoticeConfigByPlatform(this.id, { info: { ...this.feishuData, bot, label: '飞书' } })
-              } else {
-                await postNoticeConfigByPlatform({
-                  platform: 'feishuApp',
-                  info: { ...this.feishuData, bot, label: '飞书' },
-                })
-              }
-              this.$message.success('保存成功')
-              this.getData()
-            }
-          })
-        }
-      })
-    },
-    resetForm() {
-      this.feishuData = {
-        id: '',
-        password: '',
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.notice-feishu-wrapper {
-  background-color: #fff;
-  padding-top: 15px;
-  overflow: auto;
-  margin-bottom: -24px;
-  border-radius: 15px;
-  .notice-feishu-wrapper-tips {
-    display: inline-block;
-    background-color: #ffdfdf;
-    border-radius: 4px;
-    padding: 0 12px;
-    width: 300px;
-    color: #000000;
-    margin-top: 8px;
-  }
-}
-</style>
+<template>
+  <div class="notice-feishu-wrapper" :style="{ height: `${windowHeight - 64}px` }">
+    <a-form-model ref="feishuForm" :model="feishuData" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <SpanTitle>{{ $t('cs.duty.basicSetting') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.appKey')">
+        <a-input v-model="feishuData.id" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.appSecret')">
+        <a-input v-model="feishuData.password" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.robot')">
+        <Bot
+          ref="bot"
+          :disabled="!isEditable"
+          :columns="[
+            {
+              field: 'name',
+              title: $t('cs.notice.title'),
+              required: true,
+            },
+            {
+              field: 'url',
+              title: $t('cs.notice.webhookAddress'),
+              required: true,
+            },
+          ]"
+        />
+      </a-form-model-item>
+      <a-row v-if="isEditable">
+        <a-col :span="16" :offset="3">
+          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-button type="primary" @click="onSubmit"> {{ $t('save') }} </a-button>
+            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> {{ $t('reset') }}  </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SpanTitle from '../components/spanTitle.vue'
+import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
+import { mixinPermissions } from '@/utils/mixin'
+import Bot from './bot.vue'
+
+export default {
+  name: 'NoticeFeishu',
+  components: { SpanTitle, Bot },
+  mixins: [mixinPermissions],
+  data() {
+    return {
+      labelCol: { lg: 3, md: 5, sm: 8 },
+      wrapperCol: { lg: 15, md: 19, sm: 16 },
+      id: null,
+      feishuData: {
+        id: '',
+        password: '',
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isEditable() {
+      return this.hasDetailPermission('backend', '通知设置', ['update'])
+    },
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getNoticeConfigByPlatform({ platform: 'feishuApp' }).then((res) => {
+        this.id = res?.id ?? null
+        if (this.id) {
+          this.feishuData = res.info
+          this.$refs.bot.setData(res?.info?.bot)
+        }
+      })
+    },
+    onSubmit() {
+      this.$refs.feishuForm.validate(async (valid) => {
+        if (valid) {
+          this.$refs.bot.getData(async (flag, bot) => {
+            if (flag) {
+              if (this.id) {
+                await putNoticeConfigByPlatform(this.id, { info: { ...this.feishuData, bot, label: this.$t('cs.person.feishuApp') } })
+              } else {
+                await postNoticeConfigByPlatform({
+                  platform: 'feishuApp',
+                  info: { ...this.feishuData, bot, label: this.$t('cs.person.feishuApp') },
+                })
+              }
+              this.$message.success(this.$t('saveSuccess'))
+              this.getData()
+            }
+          })
+        }
+      })
+    },
+    resetForm() {
+      this.feishuData = {
+        id: '',
+        password: '',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.notice-feishu-wrapper {
+  background-color: #fff;
+  padding-top: 15px;
+  overflow: auto;
+  margin-bottom: -24px;
+  border-radius: 15px;
+  .notice-feishu-wrapper-tips {
+    display: inline-block;
+    background-color: #ffdfdf;
+    border-radius: 4px;
+    padding: 0 12px;
+    width: 300px;
+    color: #000000;
+    margin-top: 8px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/views/setting/notice/wx.vue b/cmdb-ui/src/views/setting/notice/wx.vue
index 31e1470..246dd54 100644
--- a/cmdb-ui/src/views/setting/notice/wx.vue
+++ b/cmdb-ui/src/views/setting/notice/wx.vue
@@ -1,135 +1,152 @@
-<template>
-  <div class="notice-wx-wrapper" :style="{ height: `${windowHeight - 64}px` }">
-    <a-form-model ref="wxForm" :model="wxData" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <SpanTitle>基础设置</SpanTitle>
-      <a-form-model-item label="企业ID">
-        <a-input v-model="wxData.corpid" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="自建应用ID">
-        <a-input v-model="wxData.agentid" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="自建应用密码">
-        <a-input-password v-model="wxData.corpsecret" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="ITSM AppId">
-        <a-input v-model="wxData.itsm_app_id" :disabled="!isEditable" />
-      </a-form-model-item>
-      <a-form-model-item label="机器人">
-        <Bot ref="bot" :disabled="!isEditable" />
-      </a-form-model-item>
-      <!-- <a-form-model-item label="测试邮件设置">
-        <a-button type="primary" ghost>测试回收箱</a-button>
-        <br />
-        <span
-          class="notice-wx-wrapper-tips"
-        ><ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" /> 邮件接收失败</span
-        >
-        <br />
-        <span>邮箱服务器未配置，请配置一个邮箱服务器 | <a>故障诊断</a></span>
-      </a-form-model-item> -->
-      <a-row v-if="isEditable">
-        <a-col :span="16" :offset="3">
-          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
-            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> 重置 </a-button>
-          </a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import SpanTitle from '../components/spanTitle.vue'
-import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
-import { mixinPermissions } from '@/utils/mixin'
-import Bot from './bot.vue'
-export default {
-  name: 'NoticeWx',
-  mixins: [mixinPermissions],
-  components: { SpanTitle, Bot },
-  data() {
-    return {
-      labelCol: { lg: 3, md: 5, sm: 8 },
-      wrapperCol: { lg: 15, md: 19, sm: 16 },
-      id: null,
-      wxData: {
-        corpid: '',
-        agentid: '',
-        corpsecret: '',
-        itsm_app_id: '',
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      windowHeight: (state) => state.windowHeight,
-    }),
-    isEditable() {
-      return this.hasDetailPermission('backend', '通知设置', ['update'])
-    },
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getNoticeConfigByPlatform({ platform: 'wechatApp' }).then((res) => {
-        this.id = res?.id ?? null
-        if (this.id) {
-          this.wxData = res.info
-          this.$refs.bot.setData(res?.info?.bot)
-        }
-      })
-    },
-    onSubmit() {
-      this.$refs.wxForm.validate(async (valid) => {
-        if (valid) {
-          this.$refs.bot.getData(async (flag, bot) => {
-            if (flag) {
-              if (this.id) {
-                await putNoticeConfigByPlatform(this.id, { info: { ...this.wxData, bot, label: '企业微信' } })
-              } else {
-                await postNoticeConfigByPlatform({
-                  platform: 'wechatApp',
-                  info: { ...this.wxData, bot, label: '企业微信' },
-                })
-              }
-              this.$message.success('保存成功')
-              this.getData()
-            }
-          })
-        }
-      })
-    },
-    resetForm() {
-      this.wxData = {
-        corpid: '',
-        agentid: '',
-        corpsecret: '',
-        itsm_app_id: '',
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.notice-wx-wrapper {
-  background-color: #fff;
-  padding-top: 15px;
-  overflow: auto;
-  margin-bottom: -24px;
-  border-radius: 15px;
-  .notice-wx-wrapper-tips {
-    display: inline-block;
-    background-color: #ffdfdf;
-    border-radius: 4px;
-    padding: 0 12px;
-    width: 300px;
-    color: #000000;
-    margin-top: 8px;
-  }
-}
-</style>
+<template>
+  <div class="notice-wx-wrapper" :style="{ height: `${windowHeight - 64}px` }">
+    <a-form-model ref="wxForm" :model="wxData" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <SpanTitle>{{ $t('cs.duty.basicSetting') }}</SpanTitle>
+      <a-form-model-item :label="$t('cs.notice.corpid')">
+        <a-input v-model="wxData.corpid" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.agentid')">
+        <a-input v-model="wxData.agentid" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.corpsecret')">
+        <a-input-password v-model="wxData.corpsecret" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item label="ITSM AppId">
+        <a-input v-model="wxData.itsm_app_id" :disabled="!isEditable" />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('cs.notice.robot')">
+        <Bot
+          ref="bot"
+          :disabled="!isEditable"
+          :columns="[
+            {
+              field: 'name',
+              title: $t('cs.notice.title'),
+              required: true,
+            },
+            {
+              field: 'url',
+              title: $t('cs.notice.webhookAddress'),
+              required: true,
+            },
+          ]"
+        />
+      </a-form-model-item>
+      <!-- <a-form-model-item :label="测试邮件设置">
+        <a-button type="primary" ghost>测试回收箱</a-button>
+        <br />
+        <span
+          class="notice-wx-wrapper-tips"
+        ><ops-icon type="icon-shidi-quxiao" :style="{ color: '#D81E06' }" /> 邮件接收失败</span
+        >
+        <br />
+        <span>邮箱服务器未配置，请配置一个邮箱服务器 | <a>故障诊断</a></span>
+      </a-form-model-item> -->
+      <a-row v-if="isEditable">
+        <a-col :span="16" :offset="3">
+          <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-button type="primary" @click="onSubmit"> {{ $t('save') }} </a-button>
+            <a-button ghost type="primary" style="margin-left: 28px;" @click="resetForm"> {{ $t('reset') }} </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SpanTitle from '../components/spanTitle.vue'
+import { getNoticeConfigByPlatform, postNoticeConfigByPlatform, putNoticeConfigByPlatform } from '@/api/noticeSetting'
+import { mixinPermissions } from '@/utils/mixin'
+import Bot from './bot.vue'
+export default {
+  name: 'NoticeWx',
+  mixins: [mixinPermissions],
+  components: { SpanTitle, Bot },
+  data() {
+    return {
+      labelCol: { lg: 3, md: 5, sm: 8 },
+      wrapperCol: { lg: 15, md: 19, sm: 16 },
+      id: null,
+      wxData: {
+        corpid: '',
+        agentid: '',
+        corpsecret: '',
+        itsm_app_id: '',
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+    isEditable() {
+      return this.hasDetailPermission('backend', '通知设置', ['update'])
+    },
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getNoticeConfigByPlatform({ platform: 'wechatApp' }).then((res) => {
+        this.id = res?.id ?? null
+        if (this.id) {
+          this.wxData = res.info
+          this.$refs.bot.setData(res?.info?.bot)
+        }
+      })
+    },
+    onSubmit() {
+      this.$refs.wxForm.validate(async (valid) => {
+        if (valid) {
+          this.$refs.bot.getData(async (flag, bot) => {
+            if (flag) {
+              if (this.id) {
+                await putNoticeConfigByPlatform(this.id, {
+                  info: { ...this.wxData, bot, label: this.$t('cs.person.wechatApp') },
+                })
+              } else {
+                await postNoticeConfigByPlatform({
+                  platform: 'wechatApp',
+                  info: { ...this.wxData, bot, label: this.$t('cs.person.wechatApp') },
+                })
+              }
+              this.$message.success(this.$t('saveSuccess'))
+              this.getData()
+            }
+          })
+        }
+      })
+    },
+    resetForm() {
+      this.wxData = {
+        corpid: '',
+        agentid: '',
+        corpsecret: '',
+        itsm_app_id: '',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.notice-wx-wrapper {
+  background-color: #fff;
+  padding-top: 15px;
+  overflow: auto;
+  margin-bottom: -24px;
+  border-radius: 15px;
+  .notice-wx-wrapper-tips {
+    display: inline-block;
+    background-color: #ffdfdf;
+    border-radius: 4px;
+    padding: 0 12px;
+    width: 300px;
+    color: #000000;
+    margin-top: 8px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/views/setting/person/index.vue b/cmdb-ui/src/views/setting/person/index.vue
index d24ac17..c02eca1 100644
--- a/cmdb-ui/src/views/setting/person/index.vue
+++ b/cmdb-ui/src/views/setting/person/index.vue
@@ -1,405 +1,425 @@
-<template>
-  <div class="setting-person">
-    <div class="setting-person-left">
-      <div
-        @click="
-          () => {
-            $refs.personForm.clearValidate()
-            $nextTick(() => {
-              current = '1'
-            })
-          }
-        "
-        :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '1' }"
-      >
-        <ops-icon type="icon-shidi-yonghu" />个人信息
-      </div>
-      <div
-        @click="
-          () => {
-            $refs.personForm.clearValidate()
-            $nextTick(() => {
-              current = '2'
-            })
-          }
-        "
-        :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '2' }"
-      >
-        <a-icon type="unlock" theme="filled" />账号密码
-      </div>
-    </div>
-    <div class="setting-person-right">
-      <a-form-model
-        ref="personForm"
-        :model="form"
-        :rules="current === '1' ? rules1 : rules2"
-        :colon="false"
-        labelAlign="left"
-        :labelCol="{ span: 4 }"
-        :wrapperCol="{ span: 10 }"
-      >
-        <div v-show="current === '1'">
-          <a-form-model-item label="头像" :style="{ display: 'flex', alignItems: 'center' }">
-            <a-space>
-              <a-avatar v-if="form.avatar" :src="`/api/common-setting/v1/file/${form.avatar}`" :size="64"> </a-avatar>
-              <a-avatar v-else style="backgroundColor:#F0F5FF" :size="64">
-                <ops-icon type="icon-shidi-yonghu" :style="{ color: '#2F54EB' }" />
-              </a-avatar>
-              <a-upload
-                name="avatar"
-                :show-upload-list="false"
-                :customRequest="customRequest"
-                :before-upload="beforeUpload"
-                :style="{ width: '310px', height: '100px' }"
-                accept=".svg,.png,.jpg,.jpeg"
-              >
-                <a-button type="primary" ghost size="small">更换头像</a-button>
-              </a-upload>
-            </a-space>
-          </a-form-model-item>
-          <a-form-model-item label="姓名" prop="nickname">
-            <a-input v-model="form.nickname" />
-          </a-form-model-item>
-          <a-form-model-item label="用户名">
-            <div class="setting-person-right-disabled">{{ form.username }}</div>
-          </a-form-model-item>
-          <a-form-model-item label="邮箱">
-            <div class="setting-person-right-disabled">{{ form.email }}</div>
-          </a-form-model-item>
-          <a-form-model-item label="直属上级">
-            <div class="setting-person-right-disabled">
-              {{ getDirectorName(allFlatEmployees, form.direct_supervisor_id) }}
-            </div>
-          </a-form-model-item>
-          <a-form-model-item label="性别">
-            <a-select v-model="form.sex">
-              <a-select-option value="男">男</a-select-option>
-              <a-select-option value="女">女</a-select-option>
-            </a-select>
-          </a-form-model-item>
-          <a-form-model-item label="手机号" prop="mobile">
-            <a-input v-model="form.mobile" />
-          </a-form-model-item>
-          <a-form-model-item label="部门">
-            <div class="setting-person-right-disabled">
-              {{ getDepartmentName(allFlatDepartments, form.department_id) }}
-            </div>
-          </a-form-model-item>
-          <a-form-model-item label="岗位">
-            <div class="setting-person-right-disabled">{{ form.position_name }}</div>
-          </a-form-model-item>
-          <a-form-model-item label="绑定信息">
-            <a-space>
-              <a-tooltip title="企业微信">
-                <div
-                  @click="handleBind('wechatApp', form.notice_info && form.notice_info.wechatApp)"
-                  :class="{
-                    'setting-person-bind': true,
-                    'setting-person-bind-existed': form.notice_info && form.notice_info.wechatApp,
-                  }"
-                >
-                  <ops-icon type="ops-setting-notice-wx" />
-                </div>
-              </a-tooltip>
-              <a-tooltip title="飞书">
-                <div
-                  @click="handleBind('feishuApp', form.notice_info && form.notice_info.feishuApp)"
-                  :class="{
-                    'setting-person-bind': true,
-                    'setting-person-bind-existed': form.notice_info && form.notice_info.feishuApp,
-                  }"
-                >
-                  <ops-icon type="ops-setting-notice-feishu" />
-                </div>
-              </a-tooltip>
-              <a-tooltip title="钉钉">
-                <div
-                  @click="handleBind('dingdingApp', form.notice_info && form.notice_info.dingdingApp)"
-                  :class="{
-                    'setting-person-bind': true,
-                    'setting-person-bind-existed': form.notice_info && form.notice_info.dingdingApp,
-                  }"
-                >
-                  <ops-icon type="ops-setting-notice-dingding" />
-                </div>
-              </a-tooltip>
-            </a-space>
-          </a-form-model-item>
-        </div>
-        <div v-show="current === '2'">
-          <a-form-model-item label="新密码" prop="password1">
-            <a-input v-model="form.password1" />
-          </a-form-model-item>
-          <a-form-model-item label="确认密码" prop="password2">
-            <a-input v-model="form.password2" />
-          </a-form-model-item>
-        </div>
-        <div style="margin-right: 120px">
-          <a-form-model-item label=" ">
-            <a-button type="primary" @click="handleSave" :style="{ width: '100%' }">保存</a-button>
-          </a-form-model-item>
-        </div>
-      </a-form-model>
-    </div>
-    <EditImage
-      v-if="showEditImage"
-      :show="showEditImage"
-      :image="editImage"
-      :title="eidtImageOption.title"
-      :preview-width="eidtImageOption.previewWidth"
-      :preview-height="eidtImageOption.previewHeight"
-      preview-radius="0"
-      width="550px"
-      save-button-title="确定"
-      @save="submitImage"
-      @close="showEditImage = false"
-    />
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import { getAllDepartmentList } from '@/api/company'
-import { postImageFile } from '@/api/file'
-import {
-  getEmployeeList,
-  getEmployeeByUid,
-  updateEmployeeByUid,
-  updatePasswordByUid,
-  bindPlatformByUid,
-  unbindPlatformByUid,
-} from '@/api/employee'
-import { getDepartmentName, getDirectorName } from '@/utils/util'
-import EditImage from '../components/EditImage.vue'
-export default {
-  name: 'Person',
-  components: { EditImage },
-  data() {
-    const validatePassword = (rule, value, callback) => {
-      if (!value) {
-        callback(new Error('请二次确认新密码'))
-      }
-      if (value !== this.form.password1) {
-        callback(new Error('两次输入密码不一致'))
-      }
-      callback()
-    }
-    return {
-      current: '1',
-      form: {},
-      rules1: {
-        nickname: [
-          { required: true, whitespace: true, message: '请输入姓名', trigger: 'blur' },
-          { max: 20, message: '字符数须小于20' },
-        ],
-        mobile: [
-          {
-            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
-            message: '请输入正确的手机号',
-            trigger: 'blur',
-          },
-        ],
-      },
-      rules2: {
-        password1: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
-        password2: [{ required: true, message: '两次输入密码不一致', trigger: 'blur', validator: validatePassword }],
-      },
-      allFlatEmployees: [],
-      allFlatDepartments: [],
-      showEditImage: false,
-      eidtImageOption: {
-        type: 'avatar',
-        fixedNumber: [4, 4],
-        title: '编辑头像',
-        previewWidth: '60px',
-        previewHeight: '60px',
-      },
-      editImage: null,
-    }
-  },
-  computed: {
-    ...mapGetters(['uid']),
-  },
-  mounted() {
-    this.getAllFlatEmployees()
-    this.getAllFlatDepartment()
-    this.getEmployeeByUid()
-  },
-  methods: {
-    ...mapActions(['GetInfo']),
-    getDepartmentName,
-    getDirectorName,
-    getEmployeeByUid() {
-      getEmployeeByUid(this.uid).then((res) => {
-        this.form = { ...res }
-      })
-    },
-    getAllFlatEmployees() {
-      getEmployeeList({ block_status: 0, page_size: 99999 }).then((res) => {
-        this.allFlatEmployees = res.data_list
-      })
-    },
-    getAllFlatDepartment() {
-      getAllDepartmentList({ is_tree: 0 }).then((res) => {
-        this.allFlatDepartments = res
-      })
-    },
-    async handleSave() {
-      await this.$refs.personForm.validate(async (valid) => {
-        if (valid) {
-          const { nickname, mobile, sex, avatar, password1 } = this.form
-          const params = { nickname, mobile, sex, avatar }
-          if (this.current === '1') {
-            await updateEmployeeByUid(this.uid, params).then((res) => {
-              this.$message.success('保存成功！')
-              this.getEmployeeByUid()
-              this.GetInfo()
-            })
-          } else {
-            await updatePasswordByUid(this.uid, { password: password1 }).then((res) => {
-              this.$message.success('保存成功！')
-            })
-          }
-        }
-      })
-    },
-    customRequest(file) {
-      const reader = new FileReader()
-      var self = this
-      reader.onload = function(e) {
-        let result
-        if (typeof e.target.result === 'object') {
-          // 把Array Buffer转化为blob 如果是base64不需要
-          result = window.URL.createObjectURL(new Blob([e.target.result]))
-        } else {
-          result = e.target.result
-        }
-
-        self.editImage = result
-        self.showEditImage = true
-      }
-      reader.readAsDataURL(file.file)
-    },
-    beforeUpload(file) {
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isLt2M) {
-        this.$message.error('图片大小不可超过2MB!')
-      }
-      return isLt2M
-    },
-    submitImage(file) {
-      postImageFile(file).then((res) => {
-        if (res.file_name) {
-          this.form.avatar = res.file_name
-        }
-      })
-    },
-    async handleBind(platform, isBind) {
-      if (isBind) {
-        const that = this
-        this.$confirm({
-          title: '警告',
-          content: `确认解绑？`,
-          onOk() {
-            unbindPlatformByUid(platform, that.uid)
-              .then(() => {
-                that.$message.success('解绑成功！')
-              })
-              .finally(() => {
-                that.getEmployeeByUid()
-                that.GetInfo()
-              })
-          },
-        })
-      } else {
-        await this.$refs.personForm.validate(async (valid) => {
-          if (valid) {
-            const { nickname, mobile, sex, avatar } = this.form
-            const params = { nickname, mobile, sex, avatar }
-            await updateEmployeeByUid(this.uid, params)
-            bindPlatformByUid(platform, this.uid)
-              .then(() => {
-                this.$message.success('绑定成功！')
-              })
-              .finally(() => {
-                this.getEmployeeByUid()
-                this.GetInfo()
-              })
-          }
-        })
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-@import '~@/style/static.less';
-.setting-person {
-  display: flex;
-  flex-direction: row;
-  .setting-person-left {
-    width: 200px;
-    height: 400px;
-    margin-right: 24px;
-    background-color: #fff;
-    border-radius: 15px;
-    padding-top: 15px;
-    .setting-person-left-item {
-      cursor: pointer;
-      padding: 10px 20px;
-      color: #a5a9bc;
-      border-left: 4px solid #fff;
-      margin-bottom: 5px;
-      &:hover {
-        .ops_popover_item_selected();
-        border-color: #custom_colors[color_1];
-      }
-      > i {
-        margin-right: 10px;
-      }
-    }
-    .setting-person-left-item-selected {
-      .ops_popover_item_selected();
-      border-color: #custom_colors[color_1];
-    }
-  }
-  .setting-person-right {
-    width: 800px;
-    height: 700px;
-    background-color: #fff;
-    border-radius: 15px;
-    padding: 24px 48px;
-    .setting-person-right-disabled {
-      background-color: #custom_colors[color_2];
-      border-radius: 4px;
-      height: 30px;
-      line-height: 30px;
-      margin-top: 4px;
-      padding: 0 10px;
-      color: #a5a9bc;
-    }
-    .setting-person-bind {
-      width: 40px;
-      height: 40px;
-      background: #a5a9bc;
-      border-radius: 4px;
-      color: #fff;
-      font-size: 30px;
-      text-align: center;
-      cursor: pointer;
-    }
-    .setting-person-bind-existed {
-      background: #008cee;
-    }
-  }
-}
-</style>
-<style lang="less">
-.setting-person-right .ant-form-item {
-  margin-bottom: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="setting-person">
+    <div class="setting-person-left">
+      <div
+        @click="
+          () => {
+            $refs.personForm.clearValidate()
+            $nextTick(() => {
+              current = '1'
+            })
+          }
+        "
+        :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '1' }"
+      >
+        <ops-icon type="icon-shidi-yonghu" />{{ $t('cs.person.spanTitle') }}
+      </div>
+      <div
+        @click="
+          () => {
+            $refs.personForm.clearValidate()
+            $nextTick(() => {
+              current = '2'
+            })
+          }
+        "
+        :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '2' }"
+      >
+        <a-icon type="unlock" theme="filled" />{{ $t('cs.person.accountAndPassword') }}
+      </div>
+    </div>
+    <div class="setting-person-right">
+      <a-form-model
+        ref="personForm"
+        :model="form"
+        :rules="current === '1' ? rules1 : rules2"
+        :colon="false"
+        labelAlign="left"
+        :labelCol="{ span: 4 }"
+        :wrapperCol="{ span: 10 }"
+      >
+        <div v-show="current === '1'">
+          <a-form-model-item :label="$t('cs.person.avatar')" :style="{ display: 'flex', alignItems: 'center' }">
+            <a-space>
+              <a-avatar v-if="form.avatar" :src="`/api/common-setting/v1/file/${form.avatar}`" :size="64"> </a-avatar>
+              <a-avatar v-else style="backgroundColor:#F0F5FF" :size="64">
+                <ops-icon type="icon-shidi-yonghu" :style="{ color: '#2F54EB' }" />
+              </a-avatar>
+              <a-upload
+                name="avatar"
+                :show-upload-list="false"
+                :customRequest="customRequest"
+                :before-upload="beforeUpload"
+                :style="{ width: '310px', height: '100px' }"
+                accept=".svg,.png,.jpg,.jpeg"
+              >
+                <a-button type="primary" ghost size="small">{{ $t('cs.person.changeAvatar') }}</a-button>
+              </a-upload>
+            </a-space>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.nickname')" prop="nickname">
+            <a-input v-model="form.nickname" />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.username')">
+            <div class="setting-person-right-disabled">{{ form.username }}</div>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.email')">
+            <div class="setting-person-right-disabled">{{ form.email }}</div>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.supervisor')">
+            <div class="setting-person-right-disabled">
+              {{ getDirectorName(allFlatEmployees, form.direct_supervisor_id) }}
+            </div>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.sex')">
+            <a-select v-model="form.sex">
+              <a-select-option value="男">{{ $t('cs.companyStructure.male') }}</a-select-option>
+              <a-select-option value="女">{{ $t('cs.companyStructure.female') }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.mobile')" prop="mobile">
+            <a-input v-model="form.mobile" />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.departmentName')">
+            <div class="setting-person-right-disabled">
+              {{ getDepartmentName(allFlatDepartments, form.department_id) }}
+            </div>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.companyStructure.positionName')">
+            <div class="setting-person-right-disabled">{{ form.position_name }}</div>
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.person.bindInfo')">
+            <a-space>
+              <a-tooltip :title="$t('cs.person.wechatApp')">
+                <div
+                  @click="handleBind('wechatApp', form.notice_info && form.notice_info.wechatApp)"
+                  :class="{
+                    'setting-person-bind': true,
+                    'setting-person-bind-existed': form.notice_info && form.notice_info.wechatApp,
+                  }"
+                >
+                  <ops-icon type="ops-setting-notice-wx" />
+                </div>
+              </a-tooltip>
+              <a-tooltip :title="$t('cs.person.feishuApp')">
+                <div
+                  @click="handleBind('feishuApp', form.notice_info && form.notice_info.feishuApp)"
+                  :class="{
+                    'setting-person-bind': true,
+                    'setting-person-bind-existed': form.notice_info && form.notice_info.feishuApp,
+                  }"
+                >
+                  <ops-icon type="ops-setting-notice-feishu" />
+                </div>
+              </a-tooltip>
+              <a-tooltip :title="$t('cs.person.dingdingApp')">
+                <div
+                  @click="handleBind('dingdingApp', form.notice_info && form.notice_info.dingdingApp)"
+                  :class="{
+                    'setting-person-bind': true,
+                    'setting-person-bind-existed': form.notice_info && form.notice_info.dingdingApp,
+                  }"
+                >
+                  <ops-icon type="ops-setting-notice-dingding" />
+                </div>
+              </a-tooltip>
+            </a-space>
+          </a-form-model-item>
+        </div>
+        <div v-show="current === '2'">
+          <a-form-model-item :label="$t('cs.person.newPassword')" prop="password1">
+            <a-input v-model="form.password1" />
+          </a-form-model-item>
+          <a-form-model-item :label="$t('cs.person.confirmPassword')" prop="password2">
+            <a-input v-model="form.password2" />
+          </a-form-model-item>
+        </div>
+        <div style="margin-right: 120px">
+          <a-form-model-item label=" ">
+            <a-button type="primary" @click="handleSave" :style="{ width: '100%' }">{{ $t('save') }}</a-button>
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </div>
+    <EditImage
+      v-if="showEditImage"
+      :show="showEditImage"
+      :image="editImage"
+      :title="eidtImageOption.title"
+      :preview-width="eidtImageOption.previewWidth"
+      :preview-height="eidtImageOption.previewHeight"
+      preview-radius="0"
+      width="550px"
+      :save-button-title="$t('confirm')"
+      @save="submitImage"
+      @close="showEditImage = false"
+    />
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { getAllDepartmentList } from '@/api/company'
+import { postImageFile } from '@/api/file'
+import {
+  getEmployeeList,
+  getEmployeeByUid,
+  updateEmployeeByUid,
+  updatePasswordByUid,
+  bindPlatformByUid,
+  unbindPlatformByUid,
+} from '@/api/employee'
+import { getDepartmentName, getDirectorName } from '@/utils/util'
+import EditImage from '../components/EditImage.vue'
+export default {
+  name: 'Person',
+  components: { EditImage },
+  data() {
+    return {
+      current: '1',
+      form: {},
+      allFlatEmployees: [],
+      allFlatDepartments: [],
+      showEditImage: false,
+      editImage: null,
+    }
+  },
+  computed: {
+    ...mapGetters(['uid']),
+    rules1() {
+      return {
+        nickname: [
+          {
+            required: true,
+            whitespace: true,
+            message: this.$t('cs.companyStructure.nicknamePlaceholder'),
+            trigger: 'blur',
+          },
+          { max: 20, message: this.$t('cs.person.inputStrCountLimit', { limit: 20 }) },
+        ],
+        mobile: [
+          {
+            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
+            message: this.$t('cs.companyStructure.mobileFormatErr'),
+            trigger: 'blur',
+          },
+        ],
+      }
+    },
+    rules2() {
+      const validatePassword = (rule, value, callback) => {
+        if (!value) {
+          callback(new Error(this.$t('cs.person.pleaseConfirmNewPasswordSecondTime')))
+        }
+        if (value !== this.form.password1) {
+          callback(new Error(this.$t('cs.person.thePasswordEnteredTwiceIsInconsistent')))
+        }
+        callback()
+      }
+      return {
+        password1: [
+          { required: true, message: this.$t('cs.person.pleaseConfirmNewPasswordSecondTime'), trigger: 'blur' },
+        ],
+        password2: [
+          {
+            required: true,
+            message: this.$t('cs.person.thePasswordEnteredTwiceIsInconsistent'),
+            trigger: 'blur',
+            validator: validatePassword,
+          },
+        ],
+      }
+    },
+    eidtImageOption() {
+      return {
+        type: 'avatar',
+        fixedNumber: [4, 4],
+        title: this.$t('cs.components.editAvatar'),
+        previewWidth: '60px',
+        previewHeight: '60px',
+      }
+    },
+  },
+  mounted() {
+    this.getAllFlatEmployees()
+    this.getAllFlatDepartment()
+    this.getEmployeeByUid()
+  },
+  methods: {
+    ...mapActions(['GetInfo']),
+    getDepartmentName,
+    getDirectorName,
+    getEmployeeByUid() {
+      getEmployeeByUid(this.uid).then((res) => {
+        this.form = { ...res }
+      })
+    },
+    getAllFlatEmployees() {
+      getEmployeeList({ block_status: 0, page_size: 99999 }).then((res) => {
+        this.allFlatEmployees = res.data_list
+      })
+    },
+    getAllFlatDepartment() {
+      getAllDepartmentList({ is_tree: 0 }).then((res) => {
+        this.allFlatDepartments = res
+      })
+    },
+    async handleSave() {
+      await this.$refs.personForm.validate(async (valid) => {
+        if (valid) {
+          const { nickname, mobile, sex, avatar, password1 } = this.form
+          const params = { nickname, mobile, sex, avatar }
+          if (this.current === '1') {
+            await updateEmployeeByUid(this.uid, params).then((res) => {
+              this.$message.success(this.$t('saveSuccess'))
+              this.getEmployeeByUid()
+              this.GetInfo()
+            })
+          } else {
+            await updatePasswordByUid(this.uid, { password: password1 }).then((res) => {
+              this.$message.success(this.$t('saveSuccess'))
+            })
+          }
+        }
+      })
+    },
+    customRequest(file) {
+      const reader = new FileReader()
+      var self = this
+      reader.onload = function(e) {
+        let result
+        if (typeof e.target.result === 'object') {
+          // 把Array Buffer转化为blob 如果是base64不需要
+          result = window.URL.createObjectURL(new Blob([e.target.result]))
+        } else {
+          result = e.target.result
+        }
+
+        self.editImage = result
+        self.showEditImage = true
+      }
+      reader.readAsDataURL(file.file)
+    },
+    beforeUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error(this.$t('cs.companyInfo.imageSizeLimit2MB'))
+      }
+      return isLt2M
+    },
+    submitImage(file) {
+      postImageFile(file).then((res) => {
+        if (res.file_name) {
+          this.form.avatar = res.file_name
+        }
+      })
+    },
+    async handleBind(platform, isBind) {
+      if (isBind) {
+        const that = this
+        this.$confirm({
+          title: this.$t('warning'),
+          content: this.$t('cs.person.confirmUnbind'),
+          onOk() {
+            unbindPlatformByUid(platform, that.uid)
+              .then(() => {
+                that.$message.success(this.$t('cs.person.unbindSuccess'))
+              })
+              .finally(() => {
+                that.getEmployeeByUid()
+                that.GetInfo()
+              })
+          },
+        })
+      } else {
+        await this.$refs.personForm.validate(async (valid) => {
+          if (valid) {
+            const { nickname, mobile, sex, avatar } = this.form
+            const params = { nickname, mobile, sex, avatar }
+            await updateEmployeeByUid(this.uid, params)
+            bindPlatformByUid(platform, this.uid)
+              .then(() => {
+                this.$message.success(this.$t('cs.person.bindSuccess'))
+              })
+              .finally(() => {
+                this.getEmployeeByUid()
+                this.GetInfo()
+              })
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+.setting-person {
+  display: flex;
+  flex-direction: row;
+  .setting-person-left {
+    width: 200px;
+    height: 400px;
+    margin-right: 24px;
+    background-color: #fff;
+    border-radius: 15px;
+    padding-top: 15px;
+    .setting-person-left-item {
+      cursor: pointer;
+      padding: 10px 20px;
+      color: #a5a9bc;
+      border-left: 4px solid #fff;
+      margin-bottom: 5px;
+      &:hover {
+        .ops_popover_item_selected();
+        border-color: #custom_colors[color_1];
+      }
+      > i {
+        margin-right: 10px;
+      }
+    }
+    .setting-person-left-item-selected {
+      .ops_popover_item_selected();
+      border-color: #custom_colors[color_1];
+    }
+  }
+  .setting-person-right {
+    width: 800px;
+    height: 700px;
+    background-color: #fff;
+    border-radius: 15px;
+    padding: 24px 48px;
+    .setting-person-right-disabled {
+      background-color: #custom_colors[color_2];
+      border-radius: 4px;
+      height: 30px;
+      line-height: 30px;
+      margin-top: 4px;
+      padding: 0 10px;
+      color: #a5a9bc;
+    }
+    .setting-person-bind {
+      width: 40px;
+      height: 40px;
+      background: #a5a9bc;
+      border-radius: 4px;
+      color: #fff;
+      font-size: 30px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .setting-person-bind-existed {
+      background: #008cee;
+    }
+  }
+}
+</style>
+<style lang="less">
+.setting-person-right .ant-form-item {
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>