Merge pull request #566 from veops/dev_ui_0627

feat: update model config

cmdb-ui/public/iconfont/demo_index.html

@@ -54,6 +54,60 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe96a;</span>
+                <div class="name">veops-markdown</div>
+                <div class="code-name">&amp;#xe96a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe860;</span>
+                <div class="name">veops-bar_horizontal</div>
+                <div class="code-name">&amp;#xe860;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe965;</span>
+                <div class="name">veops-gauge</div>
+                <div class="code-name">&amp;#xe965;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe966;</span>
+                <div class="name">veops-heatmap</div>
+                <div class="code-name">&amp;#xe966;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe967;</span>
+                <div class="name">veops-treemap</div>
+                <div class="code-name">&amp;#xe967;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe968;</span>
+                <div class="name">veops-radar</div>
+                <div class="code-name">&amp;#xe968;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe969;</span>
+                <div class="name">veops-data</div>
+                <div class="code-name">&amp;#xe969;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe963;</span>
+                <div class="name">veops-import</div>
+                <div class="code-name">&amp;#xe963;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe964;</span>
+                <div class="name">veops-batch_operation</div>
+                <div class="code-name">&amp;#xe964;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe962;</span>
                 <div class="name">cmdb-enterprise_edition</div>
@@ -552,12 +606,6 @@
                 <div class="code-name">&amp;#xe862;</div>
               </li>
           
-            <li class="dib">
-              <span class="icon iconfont">&#xe860;</span>
-                <div class="name">veops-import</div>
-                <div class="code-name">&amp;#xe860;</div>
-              </li>
-          
             <li class="dib">
               <span class="icon iconfont">&#xe807;</span>
                 <div class="name">monitor-ip (1)</div>
@@ -5196,9 +5244,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1719307117118') format('woff2'),
-       url('iconfont.woff?t=1719307117118') format('woff'),
-       url('iconfont.ttf?t=1719307117118') format('truetype');
+  src: url('iconfont.woff2?t=1719487341033') format('woff2'),
+       url('iconfont.woff?t=1719487341033') format('woff'),
+       url('iconfont.ttf?t=1719487341033') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -5224,6 +5272,87 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont veops-markdown"></span>
+            <div class="name">
+              veops-markdown
+            </div>
+            <div class="code-name">.veops-markdown
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-bar_horizontal"></span>
+            <div class="name">
+              veops-bar_horizontal
+            </div>
+            <div class="code-name">.veops-bar_horizontal
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-gauge"></span>
+            <div class="name">
+              veops-gauge
+            </div>
+            <div class="code-name">.veops-gauge
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-heatmap"></span>
+            <div class="name">
+              veops-heatmap
+            </div>
+            <div class="code-name">.veops-heatmap
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-treemap"></span>
+            <div class="name">
+              veops-treemap
+            </div>
+            <div class="code-name">.veops-treemap
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-radar"></span>
+            <div class="name">
+              veops-radar
+            </div>
+            <div class="code-name">.veops-radar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-data"></span>
+            <div class="name">
+              veops-data
+            </div>
+            <div class="code-name">.veops-data
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-import"></span>
+            <div class="name">
+              veops-import
+            </div>
+            <div class="code-name">.veops-import
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont veops-batch_operation"></span>
+            <div class="name">
+              veops-batch_operation
+            </div>
+            <div class="code-name">.veops-batch_operation
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont cmdb-enterprise_edition"></span>
             <div class="name">
@@ -5738,11 +5867,11 @@
           </li>
           
           <li class="dib">
-            <span class="icon iconfont a-Group427319324"></span>
+            <span class="icon iconfont monitor-add2"></span>
             <div class="name">
               monitor-add2
             </div>
-            <div class="code-name">.a-Group427319324
+            <div class="code-name">.monitor-add2
             </div>
           </li>
           
@@ -5971,15 +6100,6 @@
             </div>
           </li>
           
-          <li class="dib">
-            <span class="icon iconfont a-veops-import1"></span>
-            <div class="name">
-              veops-import
-            </div>
-            <div class="code-name">.a-veops-import1
-            </div>
-          </li>
-          
           <li class="dib">
             <span class="icon iconfont monitor-ip"></span>
             <div class="name">
@@ -12937,6 +13057,78 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-markdown"></use>
+                </svg>
+                <div class="name">veops-markdown</div>
+                <div class="code-name">#veops-markdown</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-bar_horizontal"></use>
+                </svg>
+                <div class="name">veops-bar_horizontal</div>
+                <div class="code-name">#veops-bar_horizontal</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-gauge"></use>
+                </svg>
+                <div class="name">veops-gauge</div>
+                <div class="code-name">#veops-gauge</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-heatmap"></use>
+                </svg>
+                <div class="name">veops-heatmap</div>
+                <div class="code-name">#veops-heatmap</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-treemap"></use>
+                </svg>
+                <div class="name">veops-treemap</div>
+                <div class="code-name">#veops-treemap</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-radar"></use>
+                </svg>
+                <div class="name">veops-radar</div>
+                <div class="code-name">#veops-radar</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-data"></use>
+                </svg>
+                <div class="name">veops-data</div>
+                <div class="code-name">#veops-data</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-import"></use>
+                </svg>
+                <div class="name">veops-import</div>
+                <div class="code-name">#veops-import</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-batch_operation"></use>
+                </svg>
+                <div class="name">veops-batch_operation</div>
+                <div class="code-name">#veops-batch_operation</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#cmdb-enterprise_edition"></use>
@@ -13395,10 +13587,10 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#a-Group427319324"></use>
+                  <use xlink:href="#monitor-add2"></use>
                 </svg>
                 <div class="name">monitor-add2</div>
-                <div class="code-name">#a-Group427319324</div>
+                <div class="code-name">#monitor-add2</div>
             </li>
           
             <li class="dib">
@@ -13601,14 +13793,6 @@
                 <div class="code-name">#veops-export</div>
             </li>
           
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#a-veops-import1"></use>
-                </svg>
-                <div class="name">veops-import</div>
-                <div class="code-name">#a-veops-import1</div>
-            </li>
-          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#monitor-ip"></use>

cmdb-ui/public/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3857903 */
-  src: url('iconfont.woff2?t=1719307117118') format('woff2'),
-       url('iconfont.woff?t=1719307117118') format('woff'),
-       url('iconfont.ttf?t=1719307117118') format('truetype');
+  src: url('iconfont.woff2?t=1719487341033') format('woff2'),
+       url('iconfont.woff?t=1719487341033') format('woff'),
+       url('iconfont.ttf?t=1719487341033') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.veops-markdown:before {
+  content: "\e96a";
+}
+
+.veops-bar_horizontal:before {
+  content: "\e860";
+}
+
+.veops-gauge:before {
+  content: "\e965";
+}
+
+.veops-heatmap:before {
+  content: "\e966";
+}
+
+.veops-treemap:before {
+  content: "\e967";
+}
+
+.veops-radar:before {
+  content: "\e968";
+}
+
+.veops-data:before {
+  content: "\e969";
+}
+
+.veops-import:before {
+  content: "\e963";
+}
+
+.veops-batch_operation:before {
+  content: "\e964";
+}
+
 .cmdb-enterprise_edition:before {
   content: "\e962";
 }
@@ -241,7 +277,7 @@
   content: "\e92a";
 }
 
-.a-Group427319324:before {
+.monitor-add2:before {
   content: "\e929";
 }
 
@@ -345,10 +381,6 @@
   content: "\e862";
 }
 
-.a-veops-import1:before {
-  content: "\e860";
-}
-
 .monitor-ip:before {
   content: "\e807";
 }

cmdb-ui/public/iconfont/iconfont.json

@@ -5,6 +5,69 @@
   "css_prefix_text": "",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "40896913",
+      "name": "veops-markdown",
+      "font_class": "veops-markdown",
+      "unicode": "e96a",
+      "unicode_decimal": 59754
+    },
+    {
+      "icon_id": "40896859",
+      "name": "veops-bar_horizontal",
+      "font_class": "veops-bar_horizontal",
+      "unicode": "e860",
+      "unicode_decimal": 59488
+    },
+    {
+      "icon_id": "40896881",
+      "name": "veops-gauge",
+      "font_class": "veops-gauge",
+      "unicode": "e965",
+      "unicode_decimal": 59749
+    },
+    {
+      "icon_id": "40896882",
+      "name": "veops-heatmap",
+      "font_class": "veops-heatmap",
+      "unicode": "e966",
+      "unicode_decimal": 59750
+    },
+    {
+      "icon_id": "40896884",
+      "name": "veops-treemap",
+      "font_class": "veops-treemap",
+      "unicode": "e967",
+      "unicode_decimal": 59751
+    },
+    {
+      "icon_id": "40896887",
+      "name": "veops-radar",
+      "font_class": "veops-radar",
+      "unicode": "e968",
+      "unicode_decimal": 59752
+    },
+    {
+      "icon_id": "40896905",
+      "name": "veops-data",
+      "font_class": "veops-data",
+      "unicode": "e969",
+      "unicode_decimal": 59753
+    },
+    {
+      "icon_id": "40872369",
+      "name": "veops-import",
+      "font_class": "veops-import",
+      "unicode": "e963",
+      "unicode_decimal": 59747
+    },
+    {
+      "icon_id": "40872361",
+      "name": "veops-batch_operation",
+      "font_class": "veops-batch_operation",
+      "unicode": "e964",
+      "unicode_decimal": 59748
+    },
     {
       "icon_id": "40834860",
       "name": "cmdb-enterprise_edition",
@@ -407,7 +470,7 @@
     {
       "icon_id": "40372105",
       "name": "monitor-add2",
-      "font_class": "a-Group427319324",
+      "font_class": "monitor-add2",
       "unicode": "e929",
       "unicode_decimal": 59689
     },
@@ -586,13 +649,6 @@
       "unicode": "e862",
       "unicode_decimal": 59490
     },
-    {
-      "icon_id": "40306881",
-      "name": "veops-import",
-      "font_class": "a-veops-import1",
-      "unicode": "e860",
-      "unicode_decimal": 59488
-    },
     {
       "icon_id": "40262335",
       "name": "monitor-ip (1)",

cmdb-ui/src/modules/cmdb/api/ciTypeGroup.js

@@ -50,3 +50,13 @@ export const putCITypeGroups = (data) => {
         data: data
     })
 }
+
+// 导出模型分组
+export function exportCITypeGroups(params) {
+  return axios({
+    url: `${urlPrefix}/ci_types/template/export`,
+    method: 'GET',
+    params: params,
+    timeout: 30 * 1000,
+  })
+}

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -37,6 +37,14 @@ const cmdb_en = {
         editGroup: 'Edit Group',
         group: 'Group',
         attributeLibray: 'Attribute Library',
+        viewAttributeLibray: 'Attribute Library',
+        addGroup2: 'Add Group',
+        modelExport: 'Model Export',
+        filename: 'Filename',
+        filenameInputTips: 'Please enter filename',
+        selectModel: 'Select Model',
+        unselectModel: 'Unselected',
+        selectedModel: 'Selected',
         addCITypeInGroup: 'Add a new CIType to the group',
         addCIType: 'Add CIType',
         editGroupName: 'Edit group name',
@@ -76,6 +84,8 @@ const cmdb_en = {
         byInterval: 'by interval',
         allNodes: 'All machines',
         specifyNodes: 'Specify machine',
+        masterNode: 'Master machine',
+        masterNodeTip: 'The machine where OneMaster is installed',
         specifyNodesTips: 'Please fill in the specify machine!',
         username: 'Username',
         password: 'Password',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -37,6 +37,14 @@ const cmdb_zh = {
         editGroup: '修改分组',
         group: '分组',
         attributeLibray: '属性库',
+        viewAttributeLibray: '查看属性库',
+        addGroup2: '添加分组',
+        modelExport: '模型导出',
+        filename: '文件名',
+        filenameInputTips: '请输入文件名',
+        selectModel: '请选择模型',
+        unselectModel: '未选',
+        selectedModel: '已选',
         addCITypeInGroup: '在该组中新增CI模型',
         addCIType: '新增CI模型',
         editGroupName: '重命名分组',
@@ -76,6 +84,8 @@ const cmdb_zh = {
         byInterval: '按间隔',
         allNodes: '所有机器',
         specifyNodes: '指定机器',
+        masterNode: 'Master机器',
+        masterNodeTip: '安装OneMaster的所在机器',
         specifyNodesTips: '请填写指定机器！',
         username: '用户名',
         password: '密码',

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

@@ -101,10 +101,14 @@
           :cell-style="getCellStyle"
           :scroll-y="{ enabled: true, gt: 20 }"
           :scroll-x="{ enabled: true, gt: 0 }"
-          class="ops-unstripe-table"
+          class="ops-unstripe-table checkbox-hover-table"
           :custom-config="{ storage: true }"
         >
-          <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
+          <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''">
+            <template #default="{row}">
+              {{ getRowSeq(row) }}
+            </template>
+          </vxe-column>
           <vxe-table-column
             v-for="(col, index) in columns"
             :key="`${col.field}_${index}`"
@@ -1048,6 +1052,9 @@ export default {
         this.visible = false
       }
     },
+    getRowSeq(row) {
+      return this.$refs.xTable.getVxetableRef().getRowSeq(row)
+    }
   },
 }
 </script>
@@ -1065,4 +1072,33 @@ export default {
   overflow: auto;
   margin-bottom: -24px;
 }
+.checkbox-hover-table {
+  /deep/ .vxe-table--body-wrapper {
+    .vxe-checkbox--label {
+      display: inline;
+      padding-left: 0px !important;
+      color: #bfbfbf;
+    }
+
+    .vxe-icon-checkbox-unchecked {
+      display: none;
+    }
+
+    .vxe-icon-checkbox-checked ~ .vxe-checkbox--label {
+      display: none;
+    }
+
+    .vxe-cell--checkbox {
+      &:hover {
+        .vxe-icon-checkbox-unchecked {
+          display: inline;
+        }
+
+        .vxe-checkbox--label {
+          display: none;
+        }
+      }
+    }
+  }
+}
 </style>

cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue

@@ -69,6 +69,13 @@
           >
             <a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a>
           </a-input>
+          <span
+            v-show="agent_type === 'master'"
+            slot="extra_master"
+            class="radio-master-tip"
+          >
+            {{ $t('cmdb.ciType.masterNodeTip') }}
+          </span>
         </CustomRadio>
       </a-form-model-item>
       <a-form-model-item
@@ -284,6 +291,10 @@ export default {
         radios.unshift({ value: 'all', label: this.$t('cmdb.ciType.allNodes') })
       }
 
+      if (this.adrType !== 'agent' || this?.currentAdr?.is_plugin) {
+        radios.unshift({ value: 'master', label: this.$t('cmdb.ciType.masterNode') })
+      }
+
       return radios
     },
     radioList() {
@@ -378,13 +389,13 @@ export default {
       }
       this.form = {
         auto_accept: _findADT?.auto_accept || false,
-        agent_id: _findADT.agent_id || '',
+        agent_id: _findADT?.agent_id && _findADT?.agent_id !== '0x0000' ? _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'
+        this.agent_type = _findADT.agent_id === '0x0000' ? 'master' : 'agent_id'
       } else {
         this.agent_type = this.agentTypeRadioList[0].value
       }
@@ -477,6 +488,10 @@ export default {
         }
       }
 
+      if (this.agent_type === 'master') {
+        params.agent_id = '0x0000'
+      }
+
       if (!this.cron) {
         this.$message.error(this.$t('cmdb.ciType.cronRequiredTip'))
         return
@@ -578,6 +593,11 @@ export default {
     margin-left: 17px;
     margin-bottom: 20px;
   }
+
+  .radio-master-tip {
+    font-size: 12px;
+    color: #86909c;
+  }
 }
 .attr-ad-snmp-form {
   .ant-form-item {

cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue

@@ -241,8 +241,8 @@ export default {
 
 <style lang="less" scoped>
 .attribute-card {
-  width: 182px;
-  height: 80px;
+  width: 172px;
+  height: 75px;
   background: @primary-color_6;
   border-radius: 2px;
   position: relative;
@@ -308,7 +308,7 @@ export default {
     }
   }
   .attribute-card-footer {
-    width: 182px;
+    width: 172px;
     height: 30px;
     padding: 0 8px;
     position: absolute;

cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue

@@ -104,7 +104,7 @@
             :filter="'.filter-empty'"
             :animation="300"
             tag="div"
-            style="width: 100%; display: flex;flex-flow: wrap"
+            style="width: 100%; display: flex; flex-flow: wrap; column-gap: 10px;"
             handle=".handle"
           >
             <AttributeCard
@@ -146,7 +146,7 @@
             }
           "
           :animation="300"
-          style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap"
+          style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap; column-gap: 10px;"
           handle=".handle"
         >
           <AttributeCard

cmdb-ui/src/modules/cmdb/views/ci_types/modelExport.vue

@@ -0,0 +1,200 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="$t('cmdb.ciType.modelExport')"
+    :width="560"
+    @cancel="handleCancel"
+    @ok="handleOK"
+  >
+    <a-form
+      :form="form"
+      :labelCol="{ span: 5 }"
+      :wrapperCol="{ span: 19 }"
+    >
+      <a-form-item
+        :label="$t('cmdb.ciType.filename')"
+      >
+        <a-input v-decorator="['name', { rules: [{ required: true, message: $t('cmdb.ciType.filenameInputTips') }], initialValue: 'cmdb_template' }]" />
+      </a-form-item>
+      <a-form-item
+        :label="$t('cmdb.ciType.selectModel')"
+      >
+        <a-transfer
+          class="model-export-transfer"
+          :dataSource="transferDataSource"
+          :targetKeys="targetKeys"
+          :render="item => item.title"
+          :titles="[$t('cmdb.ciType.unselectModel'), $t('cmdb.ciType.selectedModel')]"
+          :listStyle="{
+            width: '180px',
+            height: `262px`,
+          }"
+          @change="onChange"
+        >
+          <template
+            slot="children"
+            slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
+          >
+            <a-tree
+              v-if="direction === 'left'"
+              blockNode
+              checkable
+              :checkedKeys="[...selectedKeys, ...targetKeys]"
+              :treeData="treeData"
+              :checkStrictly="true"
+              @check="
+                (_, props) => {
+                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
+                }
+              "
+              @select="
+                (_, props) => {
+                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
+                }
+              "
+            />
+          </template>
+        </a-transfer>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import _ from 'lodash'
+import { exportCITypeGroups } from '@/modules/cmdb/api/ciTypeGroup'
+
+export default {
+  name: 'ModelExport',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    CITypeGroups: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'model-export' }),
+      targetKeys: [],
+      btnLoading: false,
+    }
+  },
+  computed: {
+    transferDataSource() {
+      const dataSource = this.CITypeGroups.reduce((acc, item) => {
+        const types = _.cloneDeep(item?.ci_types || [])
+        types.forEach((item) => {
+          item.key = String(item.id)
+          item.title = item?.alias || item?.name || this.$t('other')
+        })
+        return acc.concat(types)
+      }, [])
+      return dataSource
+    },
+    treeData() {
+      const treeData = _.cloneDeep(this.CITypeGroups)
+      let newTreeData = treeData.map((item) => {
+        const childrenKeys = []
+        const children = (item.ci_types || []).map((child) => {
+          const key = String(child?.id)
+          const disabled = this.targetKeys.includes(key)
+          childrenKeys.push(key)
+
+          return {
+            key,
+            title: child?.alias || child?.name || this.$t('other'),
+            disabled,
+            checkable: true,
+            children: []
+          }
+        })
+        return {
+          key: String(item?.id),
+          title: item?.name || this.$t('other'),
+          children,
+          childrenKeys,
+          disabled: children.every((item) => item.disabled),
+          checkable: false,
+          selectable: false
+        }
+      })
+      console.log('treeData', newTreeData)
+      newTreeData = newTreeData.filter((item) => item.children.length > 0)
+
+      return newTreeData
+    }
+  },
+  methods: {
+    onChange(targetKeys, direction, moveKeys) {
+      this.targetKeys = targetKeys
+    },
+    onChecked(_, e, checkedKeys, itemSelect) {
+      const { eventKey } = e.node
+      const selected = checkedKeys.indexOf(eventKey) === -1
+
+      itemSelect(eventKey, selected)
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.form.resetFields()
+      this.targetKeys = []
+    },
+    handleOK() {
+      this.form.validateFields(async (err, values) => {
+        if (err || !this.targetKeys.length || this.btnLoading) {
+          return
+        }
+        this.btnLoading = true
+        const hide = this.$message.loading(this.$t('loading'), 0)
+
+        try {
+          const typeIds = this.targetKeys.join(',')
+          const res = await exportCITypeGroups({
+            type_ids: typeIds
+          })
+          console.log('exportCITypeGroups res', res)
+
+          if (res) {
+            const jsonStr = JSON.stringify(res)
+            const blob = new Blob([jsonStr], { type: 'application/json' })
+
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+
+            const fileName = values.name
+            a.download = fileName
+
+            a.click()
+            URL.revokeObjectURL(url)
+          }
+        } catch (error) {
+          console.log('exportCITypeGroups fail', error)
+          hide()
+          this.btnLoading = false
+        }
+        hide()
+        this.btnLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.model-export-transfer {
+  /deep/ .ant-transfer-list-body {
+    overflow: auto;
+  }
+
+  /deep/ .ant-transfer-list-header-title {
+    color: @primary-color;
+    font-weight: 400;
+    font-size: 12px;
+  }
+}
+</style>

cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue

@@ -58,7 +58,7 @@
           ref="xTable"
           size="mini"
           stripe
-          class="ops-stripe-table"
+          class="ops-stripe-table checkbox-hover-table"
           :data="filterTableData"
           :height="tableHeight"
           :scroll-y="{ enabled: true, gt: 50 }"
@@ -74,7 +74,11 @@
             type="checkbox"
             width="60"
             fixed="left"
-          ></vxe-column>
+          >
+            <template #default="{row}">
+              {{ getRowSeq(row) }}
+            </template>
+          </vxe-column>
           <vxe-column
             v-for="(col, index) in columns"
             :key="`${col.field}_${index}`"
@@ -399,6 +403,9 @@ export default {
           textEl.scrollTop = textEl.scrollHeight
         }
       })
+    },
+    getRowSeq(row) {
+      return this.$refs.xTable.getVxetableRef().getRowSeq(row)
     }
   },
 }
@@ -462,6 +469,36 @@ export default {
     align-items: center;
     gap: 6px;
   }
+
+  .checkbox-hover-table {
+    /deep/ .vxe-table--body-wrapper {
+      .vxe-checkbox--label {
+        display: inline;
+        padding-left: 0px !important;
+        color: #bfbfbf;
+      }
+
+      .vxe-icon-checkbox-unchecked {
+        display: none;
+      }
+
+      .vxe-icon-checkbox-checked ~ .vxe-checkbox--label {
+        display: none;
+      }
+
+      .vxe-cell--checkbox {
+        &:hover {
+          .vxe-icon-checkbox-unchecked {
+            display: inline;
+          }
+
+          .vxe-checkbox--label {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
 
 .log-modal-title {

cmdb-ui/src/modules/cmdb/views/tree_views/index.vue

@@ -172,10 +172,14 @@
               @edit-closed="handleEditClose"
               @edit-actived="handleEditActived"
               :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
-              class="ops-unstripe-table"
+              class="ops-unstripe-table checkbox-hover-table"
               :custom-config="{ storage: true }"
             >
-              <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''"></vxe-column>
+              <vxe-column align="center" type="checkbox" width="60" :fixed="isCheckboxFixed ? 'left' : ''">
+                <template #default="{row}">
+                  {{ getRowSeq(row) }}
+                </template>
+              </vxe-column>
               <vxe-table-column
                 v-for="(col, index) in columns"
                 :key="`${col.field}_${index}`"
@@ -1229,6 +1233,9 @@ export default {
         }
       )
     },
+    getRowSeq(row) {
+      return this.$refs.xTable.getVxetableRef().getRowSeq(row)
+    }
   },
 }
 </script>
@@ -1337,6 +1344,36 @@ export default {
     overflow: auto;
     width: 100%;
     border-radius: @border-radius-box;
+
+    .checkbox-hover-table {
+      .vxe-table--body-wrapper {
+        .vxe-checkbox--label {
+          display: inline;
+          padding-left: 0px !important;
+          color: #bfbfbf;
+        }
+
+        .vxe-icon-checkbox-unchecked {
+          display: none;
+        }
+
+        .vxe-icon-checkbox-checked ~ .vxe-checkbox--label {
+          display: none;
+        }
+
+        .vxe-cell--checkbox {
+          &:hover {
+            .vxe-icon-checkbox-unchecked {
+              display: inline;
+            }
+
+            .vxe-checkbox--label {
+              display: none;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>