NEZ-3247 fix：endpoint 编辑页面增加 software asset 下拉框

2023-10-23 15:10:56 +08:00
parent 3fa0f29648
commit e47baacf71
3 changed files with 103 additions and 5 deletions
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -34,7 +34,7 @@
          </el-form-item>
          <!--module-->
          <el-form-item :label='$t("overall.module")' prop="moduleId">
-            <el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
+            <el-select @change="renderEndpoint(false)" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
              <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
@@ -50,7 +50,7 @@
                varType: 2, dashboardId: 0,
                returnChildren:0,groupId:0,
              }"
-              @values="renderEndpoint"
+              @values="renderEndpoint(true)"
              :multiple="false"
              :language="language"
              title="ChartSearch"
@@ -66,6 +66,34 @@
          <el-form-item :label='$t("asset.asset")' label-width="125px" prop="assetName" v-if="disabled">
            <el-input id="module-box-input-assetName" v-model="editEndpoint.assetName" :disabled="disabled"   placeholder="" show-word-limit size="small"></el-input>
          </el-form-item>
+          <!--softwareAsset-->
+
+          <el-form-item :label='$t("softwareAsset.text")' label-width="125px" prop="softwareAssetId" v-if="showSoftwareAsset">
+            <!--            <el-select id="module-box-input-asset"  @change="renderEndpoint" v-model="editEndpoint.assetId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">-->
+            <!--              <el-option v-for="item in assetList" :id="'asset-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
+            <!--            </el-select>  @values="renderEndpoint"-->
+            <v-selectpage
+              :data="softwareAssetList"
+              :tb-columns="softwareAssetColumns"
+              :params="{
+                varType: 2, dashboardId: 0,
+                returnChildren:0,groupId:0,
+              }"
+              :multiple="false"
+              :language="language"
+              title="ChartSearch"
+              key-field="id"
+              show-field="name"
+              :width="626"
+              v-model="editEndpoint.softwareAssetId"
+              class="form-control"
+              ref="sp"
+              :result-format="resultFormat"
+            ></v-selectpage>
+          </el-form-item>
+          <el-form-item :label='$t("softwareAsset.text")' label-width="125px" prop="softwareAssetName" v-else>
+            <el-input id="module-box-input-softwareAssetName" v-model="editEndpoint.softwareAssetName" :disabled="!(editEndpoint.assetId && editEndpoint.projectId) || disabled"   placeholder="" show-word-limit size="small"></el-input>
+          </el-form-item>
          <!--name-->
          <el-form-item v-if="optionType!=='batch'" :label='$t("overall.name")' label-width="125px" prop="name">
            <el-input id="module-box-input-name" v-model="editEndpoint.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
@@ -835,6 +863,7 @@ export default {
      projectList: [],
      moduleList: [],
      assetList: [],
+      softwareAssetList: [],
      credentialList: [],
      typeList: [
        {
@@ -955,6 +984,39 @@ export default {
          }
        }
      ],
+      softwareAssetColumns: [
+        { title: 'ID', data: 'id' },
+        {
+          title: this.$t('overall.name'),
+          data: function (row) {
+            if (row.name.length > 15) {
+              return row.name.substring(0, 12) + '...'
+            }
+            return row.name
+          }
+        },
+        {
+          title: this.$t('softwareType.category'),
+          data: (row) => {
+            return row.type ? row.type.category : ''
+          }
+        },
+        {
+          title: this.$t('overall.type'),
+          data: (row) => {
+            return row.type ? row.type.name : ''
+          }
+        },
+        {
+          title: this.$t('overall.remark'),
+          data: function (row) {
+            if (row.remark.length > 15) {
+              return row.remark.substring(0, 12) + '...'
+            }
+            return row.remark
+          }
+        }
+      ],
      timestampList: ['ANSIC', 'UnixDate', 'RubyDate', 'RFC822', 'RFC822Z', 'RFC850', 'RFC1123', 'RFC1123Z', 'RFC3339', 'RFC3339Nano', 'Unix', 'UnixMs', 'UnixUs', 'UnixNs'],
      actionList: [{
        value: 'replace',
@@ -1075,6 +1137,11 @@ export default {
        this.assetList = res.data.list
      })
    },
+    getSoftwareAsset () {
+      this.$get('/asset/software', { pageSize: -1, projectIds: this.editEndpoint.projectId, assetIds:  this.editEndpoint.assetId }).then(res => {
+        this.softwareAssetList = res.data.list
+      })
+    },
    getWalkData () {
      this.$get('mib/tree', { pageSize: -1, pageNo: 1 }).then(response => {
        if (response.code === 200) {
@@ -1331,6 +1398,10 @@ export default {
        this.$refs.sp.remove()
        this.$refs.moduleForm.clearValidate('moduleId')
      }
+      if (this.editEndpoint.assetId) {
+        this.editEndpoint.softwareAssetId = ''
+        this.getSoftwareAsset()
+      }
    },
    /* 获取module列表 */
    getModuleList () {
@@ -1582,7 +1653,7 @@ export default {
        return assetData
      }
    },
-    renderEndpoint () {
+    renderEndpoint (flag) {
      if (this.disabled) {
        return
      }
@@ -1674,6 +1745,10 @@ export default {
          // }
        })
      }
+      if (this.editEndpoint.projectId && flag) {
+        this.editEndpoint.softwareAssetId = ''
+        this.getSoftwareAsset()
+      }
    },

    actionChange (index) {
@@ -1768,7 +1843,11 @@ export default {
  mounted () {
    setTimeout(() => {
      this.editEndpoint.assetId = this.module.assetId + ''
+      this.editEndpoint.softwareAssetId = this.module.softwareAssetId + ''
    }, 500)
+    if (this.disabled && !this.module.softwareAssetId) {
+      this.getSoftwareAsset()
+    }
  },
  created () {
    this.getProjectList()
@@ -1783,6 +1862,19 @@ export default {
        return this.getMibName(this.walkData, value)
      }
    },
+    showSoftwareAsset () {
+      let show = false
+      if (this.editEndpoint.projectId && this.editEndpoint.assetId) {
+        show = true
+      }
+      if (this.disabled && !this.module.softwareAssetId) {
+        show = true
+      }
+      if (this.disabled && this.module.softwareAssetId) {
+        show = false
+      }
+      return show
+    },
    language () { return this.$store.getters.getLanguage }
  },
  watch: {
@@ -1797,7 +1889,11 @@ export default {
      deep: true,
      handler (n, o) {
        this.isEdit = true
-        this.editEndpoint = JSON.parse(JSON.stringify(n))
+        const editEndpoint = JSON.parse(JSON.stringify(n))
+        if (!editEndpoint.softwareAssetId) {
+          editEndpoint.softwareAssetId = ''
+        }
+        this.editEndpoint = editEndpoint
        this.getModuleList()
        this.activeName = 'Basic'
        this.activeNameLogs = this.editEndpoint.configs[1].config.map(() => 'Basic')
--- a/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue
@@ -145,7 +145,7 @@ export default {
          width: 120,
          sortable: 'custom'
        }, {
-          label: this.$t('config.model.name'),
+          label: this.$t('overall.name'),
          prop: 'name',
          show: true,
          width: 350,
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -613,7 +613,9 @@ export default {
          this.object.paramObj.push({ key: '', value: [] })
        }
        this.object.assetName = this.object.asset ? this.object.asset.name : ''
+        this.object.softwareAssetName = this.object.softwareAsset ? this.object.softwareAsset.name : ''
        this.object.assetId = this.object.asset ? this.object.asset.id + '' : ''
+        this.object.softwareAssetId = this.object.softwareAsset ? this.object.softwareAsset.id + '' : ''
        this.object.projectId = this.object.project.id
        this.object.moduleId = this.object.module.id
        this.object.type = this.object.module.type