NEZ-1876 fix：Endpoint 批量修改页面开发

nezha-fronted/src/assets/css/components/page/config/profile.scss

@@ -224,7 +224,7 @@
     }
   }
   .list-page.profile-right {
-    width: calc(100% - 370px);
+    width: calc(100% - 360px);
     padding: 0;
     pxbox-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
     border-radius: 2px;

nezha-fronted/src/components/chart/chartList.vue

@@ -504,11 +504,13 @@ export default {
           tempList = null
           setTimeout(() => {
             this.gridLayoutShow = true
-            if (!this.isGroup && !this.isExportHtml) {
+            if (!this.isGroup) {
+              if (!this.isExportHtml) {
                 this.onScroll()
               } else {
                 this.onScroll(999999)
               }
+            }
           })
           setTimeout(() => {
             this.firstInit = false

nezha-fronted/src/components/common/js/constants.js

@@ -184,7 +184,13 @@ export const asset = {
     dateTime: 'dateTime'
   }
 }
-
+export const endpoint = {
+  editTypeOptions: [
+    { value: 1, label: i18n.t('endpoint.metricLabel') },
+    { value: 2, label: i18n.t('endpoint.metricEnable') },
+    { value: 3, label: i18n.t('endpoint.logEnable') }
+  ],
+}
 export const alertMessage = {
   severityData: [
     { value: 'P1', label: i18n.t('alert.config.P1') },

nezha-fronted/src/components/common/nzTransfer.vue

@@ -32,7 +32,7 @@
             v-for="(item,index) in tableTitle"
             :key="index"
           >
-            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
+            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop].name || scope.row[item.prop]}}</template>
             <slot :name="item.prop" v-else></slot>
           </el-table-column>
         </el-table>

nezha-fronted/src/components/common/rightBox/batchEditEndpoint.vue

@@ -0,0 +1,275 @@
+<template>
+  <div v-clickoutside="{obj: editData, func: esc}" class="right-box right-box-endpoint-batch">
+    <div class="right-box__header">
+      <div class="header__title">{{$t('endpoint.batchEditendpoint')}}</div>
+      <div class="header__operation">
+        <span @click="esc"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <!-- Edit type -->
+        <el-form ref="endpointEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('overall.editType')" prop="editType">
+            <el-select v-model="editData.editType" @change="endpointBatch" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
+              <el-option v-for="type in endpointConfig.editTypeOptions" :key="type.value" :label="$t(type.label)" :value="type.value"/>
+            </el-select>
+          </el-form-item>
+          <div class="form__sub-title" style="margin-top: 20px">{{$t(endpointConfig.editTypeOptions.find(title=>title.value === editData.editType).label)}}</div>
+          <!-- Edit type === 1  metric label-->
+          <template v-if="editData.editType === 1">
+<!--            <div class="form__sub-title">{{$t('overall.labels')}}</div>-->
+            <div v-for="(item, index) in editData.labels" :key="index" class="form__dotted-item">
+              <el-form-item :prop="'labels.' + index + '.value'">
+                <template v-slot:label>
+                  <div class="form__labels-label">
+                    <span>{{item.name}}</span>
+                    <div>
+                      <el-checkbox v-model="item.action" :false-label="0" :label="$t('overall.delete')" :true-label="1" size="small" style="padding-right: 20px;"></el-checkbox>
+                      <span @click="removeLabels(index)"><i class="nz-icon nz-icon-minus"></i></span>
+                    </div>
+                  </div>
+                  <el-form-item :prop="'labels.' + index + '.key'" class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_][a-zA-Z0-9_]*/, message: $t('overall.ASCIIKey') ,trigger: 'blur'}]">
+                    <el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
+                  </el-form-item>
+                  <span class="param-box-row-eq">=</span>
+                  <el-form-item :prop="'labels.' + index + '.value'" class="param-box-row-value">
+                    <el-input v-model="item.value" placeholder="value" size="mini"></el-input>
+                  </el-form-item>
+                </template>
+
+              </el-form-item>
+            </div>
+            <!-- label的新增按钮 -->
+            <div class="form__flex-container hide-casc-input">
+              <div style="text-align: center">
+                 <span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addLabels">
+                <span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
+              </span>
+              </div>
+            </div>
+          </template>
+          <!-- Edit type === 2 || 3 metric enable-->
+          <el-form-item :label="$t('overall.state')" prop="enable" v-if="editData.editType!==1">
+            <el-select v-model="editData.enable" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
+              <el-option :value="1" :label="$t('overall.enabled')">{{$t('overall.enabled')}}</el-option>
+              <el-option :value="0" :label="$t('overall.disabled')">{{$t('overall.disabled')}}</el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 选择Endpoint，穿梭框 -->
+          <div class="form__sub-title" style="margin-top: 20px">{{$t('overall.select')}}</div>
+          <div style="position: relative">
+            <nz-transfer ref="transfer"
+                         :showError="showError"
+                         style="margin-bottom: 20px;"
+                         :page-obj="transfer.pageObj"
+                         :search-msg="transfer.searchMsg"
+                         :table-data="transfer.tableData"
+                         :tableTitle="transfer.tableTitle"
+                         @pageNo="pageNoChange"
+                         @search="search"
+                         @leftToRight="addEndpoint"
+                         @rightToLeft="removeEndpoint">
+              <template v-slot:title>{{$t('overall.selected')}}</template>
+            </nz-transfer>
+            <div v-if="showError" class="el-form-item__error">{{$t('validate.required')}}</div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="endpoint-edit-cancel" v-cancel="{obj: editData, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="endpoint-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import nzTransfer from '@/components/common/nzTransfer'
+import { endpoint as endpointConfig } from '@/components/common/js/constants'
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+export default {
+  name: 'endpointBatchEditBox',
+  components: {
+    nzTransfer
+  },
+  props: {
+    fieldGroupData: {
+      type: Array
+    },
+    stateData: {
+      type: Array
+    },
+    snmpCredentialData: {
+      type: Array
+    }
+  },
+  mixins: [editRigthBox],
+  data () {
+    const vm = this
+    return {
+      endpointConfig,
+      url: 'monitor/endpoint',
+      editData: {
+        editType: 1,
+        labels: [],
+        enable: 1
+      },
+      transfer: {
+        tableData: [],
+        selectedData: [],
+        searchLabel: {},
+        searchMsg: { // 给搜索框子组件传递的信息
+          searchLabelList: [
+            {
+              id: 13,
+              name: 'ID',
+              type: 'input',
+              label: 'ids',
+              disabled: false
+            }, {
+              name: this.$t('overall.name'),
+              type: 'input',
+              label: 'name',
+              disabled: false
+            },
+            {
+              name: this.$t('overall.asset'),
+              type: 'input',
+              label: 'assetName',
+              disabled: false
+            },
+            {
+              name: this.$t('overall.projectName'),
+              type: 'project',
+              label: 'projectIds',
+              id: 11,
+              readonly: true,
+              disabled: false
+            }, {
+              name: this.$t('overall.module'),
+              type: 'module',
+              label: 'moduleIds',
+              id: 11,
+              readonly: true,
+              disabled: false
+            }
+          ]
+        },
+        tableTitle: [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true,
+            slot: false
+          }, {
+            label: this.$t('project.module.module'),
+            prop: 'module',
+            show: true
+          }
+        ],
+        pageObj: {
+          pageNo: 1,
+          pageSize: 10,
+          pages: 1,
+          total: 0
+        }
+      },
+      rules: {
+        editType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      metaData: [],
+      showError: false
+    }
+  },
+  methods: {
+    search (searchLabel, page) {
+      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
+      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
+      this.getTableData()
+    },
+    endpointBatch () {
+      // this.getTableData()
+      this.editData.enable = 1
+      this.editData.labels = []
+    },
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.editData.ids = this.transfer.selectedData.map(d => d.id)
+      if (this.editData.ids.length === 0) {
+        this.showError = true
+      }
+      this.$refs.endpointEditForm.validate((valid) => {
+        if (valid && !this.showError) {
+          const params = this.$loadsh.cloneDeep(this.editData)
+          if (params.editType === 1) {
+            delete params.enable
+          } else {
+            delete params.labels
+          }
+          this.$put('monitor/endpoint/bulk', params).then(res => {
+            if (res.code === 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            }
+          })
+        }
+      })
+    },
+    pageNoChange (val) {
+      this.transfer.pageObj.pageNo = val
+      this.getTableData()
+    },
+    getTableData () {
+      this.$refs.transfer && this.$refs.transfer.startLoading()
+      const searchLabel = { ...this.transfer.searchLabel }
+      this.$get(this.url, { ...searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+          this.transfer.pageObj.pages = response.data.pages
+        }
+      })
+    },
+    addEndpoint (toAdd) {
+      this.transfer.selectedData = toAdd
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+      this.showError = false
+    },
+    removeEndpoint (toRemove) {
+      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+      // dc, brand, model, type
+    },
+    addLabels () {
+      this.editData.labels.push({
+        action: 0,
+        key: '',
+        value: ''
+      })
+    },
+    removeLabels (i) {
+      this.editData.labels.splice(i, 1)
+    }
+  },
+  mounted () {
+    this.getTableData()
+  },
+  watch: {
+
+  }
+}
+</script>

nezha-fronted/src/components/common/searchInput.vue

@@ -926,7 +926,7 @@ export default {
           } else if (val.type === 'asset') {
             objectInfo.asset = val.val
           } else if (val.type === 'module') {
-            objectInfo.moduleId = val.valnum
+            objectInfo.moduleIds = val.valnum
           } else if (val.type === 'project') {
             objectInfo.projectIds = val.valnum
           } else if (val.label === 'assetState') {
@@ -1510,6 +1510,10 @@ export default {
       if (this.$route.path === '/module') {
         this.getProjectData()
       }
+      if (this.$route.path === '/endpoint') {
+        this.getProjectData()
+        this.getModuleData()
+      }
       if (this.$route.path === '/alertRule') {
         this.getSeverityData()
       }

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -166,7 +166,11 @@
     <transition name="right-box">
       <batchAddEndpoint v-if="rightBox.batchAdd" @close="closeRightBatchAdd"></batchAddEndpoint>
     </transition>
-    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box></transition>
+    <transition name="right-box">
+      <batchEditEndpoint    v-if="rightBox.batchShow"
+                            @close="closeRightBox"
+                            @refresh="getTableData"></batchEditEndpoint>
     </transition>
     <el-dialog :close-on-click-modal="false" :show-close="true" destroy-on-close :title='$t("overall.batchAddEndpoint")' :visible.sync="importBoxShow" :width="'600px'" append-to-body class="nz-dialog" @close="closeDialog">
       <div class="upload-body result-body">
@@ -238,6 +242,7 @@ import detailViewMixin from '@/components/common/mixin/detailViewMixin'
 import endpointDetail from '@/components/common/detailView/list/endpoint/endpointDetail'
 import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
+import batchEditEndpoint from '@/components/common/rightBox/batchEditEndpoint'
 import lodash from 'lodash'
 
 export default {
@@ -255,7 +260,8 @@ export default {
     batchAddEndpoint,
     nzDetailView,
     endpointDetail,
-    detailViewTopSearch
+    detailViewTopSearch,
+    batchEditEndpoint
   },
   mixins: [dataListMixin, detailViewMixin, routerPathParams],
   data () {
@@ -885,7 +891,7 @@ export default {
     if (this.$route.query && this.$route.query.assetId) {
       this.object = {
         ...this.newObject(),
-        assetId: JSON.stringify(this.$route.query.assetId),
+        assetId: JSON.stringify(this.$route.query.assetId)
       }
       this.rightBox.show = true
     }