feat: update model config

2025-08-08 22:04:04 +08:00 · 2024-06-27 19:41:24 +08:00
parent c7f30b63ff
commit b96fc06a62
19 changed files with 3832 additions and 3131 deletions
--- a/cmdb-ui/src/modules/cmdb/api/ciTypeGroup.js
+++ b/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,
+  })
+}
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/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',
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/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: '密码',
--- a/cmdb-ui/src/modules/cmdb/views/ci/index.vue
+++ b/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>
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
+++ b/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 {
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
+++ b/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;
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
+++ b/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
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/modelExport.vue
+++ b/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>
--- a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
+++ b/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 {
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
+++ b/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>