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 59cf19c..8c0f04e 100644
Binary files a/cmdb-ui/src/modules/cmdb/assets/dashboard_empty.png and b/cmdb-ui/src/modules/cmdb/assets/dashboard_empty.png differ
diff --git a/cmdb-ui/src/modules/cmdb/assets/preference_card.png b/cmdb-ui/src/modules/cmdb/assets/preference_card.png
index 100af6c..6ff82e0 100644
Binary files a/cmdb-ui/src/modules/cmdb/assets/preference_card.png and b/cmdb-ui/src/modules/cmdb/assets/preference_card.png differ
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>