feat： 添加批量新增的页面

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -21,7 +21,7 @@
                   <el-collapse-item :title="item.group" :name="item.group">
                     <template slot="title">
                       <div style="display: flex;width: 100%;">
-                        <i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
+                        <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
                       </div>
                     </template>
                     <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons"  :title="btn.data.text">

nezha-fronted/src/components/common/language/cn.js

@@ -76,6 +76,7 @@ const cn = {
     createProject: '新增系统',
     createEndpoint: '新增 Endpoint',
     batchEndpoint: '批量修改Endpoint',
+    batchAddEndpoint: '批量新增 Endpoint',
     createAsset: '新增资产',
     createAlertRule: '新增告警规则',
     createAlertSilence: '新增告警规则',
@@ -144,7 +145,8 @@ const cn = {
     tempPrev: '模板预览',
     silenceAlert: '告警静默',
     quickSilent: '快速静默',
-    configEndpoint: '配置'
+    configEndpoint: '配置',
+    generate: '生产'
   },
   setup: {
     step0: '欢迎',
@@ -1298,6 +1300,7 @@ const cn = {
       editEndpoint: '修改 Endpoint',
       createEndpoint: '新增 Endpoint',
       batchEndpoint: '批量 Endpoint',
+      batchAddEndpoint: '批量新增 Endpoint',
       endpointName: 'Endpoint name',
       name: '名称'
     },

nezha-fronted/src/components/common/language/en.js

@@ -82,6 +82,7 @@ const en = {
     createProject: 'New project',
     createEndpoint: 'New endpoint',
     batchEndpoint: 'Batch modify endpoint',
+    batchAddEndpoint: 'Batch new endpoint',
     createAsset: 'New asset',
     createAlertRule: 'New alert rule',
     createAlertSilence: 'New alert silence',
@@ -149,7 +150,8 @@ const en = {
     tempPrev: 'Template preview',
     silenceAlert: 'silence alert',
     quickSilent: 'Quick silent',
-    configEndpoint: 'Config'
+    configEndpoint: 'Config',
+    generate: 'Generate'
   },
   pageSize: '/page',
   setup: {
@@ -1297,7 +1299,8 @@ const en = {
       asset: 'Asset',
       editEndpoint: 'Edit endpoint',
       createEndpoint: 'New endpoint',
-      batchEndpoint: 'Batch Endpoint',
+      batchEndpoint: 'Batch endpoint',
+      batchAddEndpoint: 'Batch new endpoint',
       endpointName: 'Endpoint',
       name: 'Name',
       tip: {

nezha-fronted/src/components/common/popBox/selectWalk.vue

@@ -134,6 +134,7 @@ export default {
 <style lang="scss">
 .select-walk-tree {
   height: 350px;
+  overflow-y: auto;
 }
 .select-walk-tree .el-tree-node__content {
   height: 34px;
@@ -181,4 +182,5 @@ export default {
   top: 50%;
   transform: translate(10px, -50%);
 }
+
 </style>

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -2495,4 +2495,7 @@ export default {
 /deep/ .metric-selector-title {
   background: #fff !important;
 }
+/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
+  display: inline-block !important;
+}
 </style>

nezha-fronted/src/components/common/project/topology.scss

@@ -1,11 +1,14 @@
-/deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
+  display: none !important;
+}
+/deep/ .el-collapse-item  .is-active .nz-icon-arrow-right{
   transform: rotate(90deg);
   color: #FA901C;
 }
 /deep/ .el-collapse-item .title-delete{
   display: none;
 }
-/deep/ .el-collapse-item .nz-icon-caret-right{
+/deep/ .el-collapse-item .nz-icon-arrow-right{
   transition: transform .3s;
   color: #BEBEBE;
   margin-right: 5px;
@@ -14,7 +17,7 @@
   .el-collapse-item__header{
     color: #FA901C;
   }
-  .nz-icon-caret-right{
+  .nz-icon-arrow-right{
     color: #FA901C;
   }
   .title-delete{

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -21,7 +21,7 @@
                   <el-collapse-item :title="item.group" :name="item.group">
                     <template slot="title">
                       <div style="display: flex;width: 100%;">
-                        <i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
+                        <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
                       </div>
                     </template>
                     <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">

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

@@ -0,0 +1,426 @@
+<template>
+  <div class="right-box right-box-modify-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
+    <div class="right-box__header">
+      <!-- begin--标题-->
+      <div class="header__title">{{$t("overall.batchAddEndpoint")}}</div>
+      <!-- end--标题-->
+      <div class="header__operation">
+        <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+
+    <!-- begin--表单-->
+    <div class="right-box-form-box right-box__container" style="overflow: hidden;padding-left: 20px;margin-top: 0">
+      <div class="container__form">
+        <el-form class="right-box-form" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
+          <el-form-item :label="$t('project.module.module')" prop="ChartTemplate">
+            <v-selectpage
+              :data="moduleList"
+              :tb-columns="ChartSearchShowFields"
+              :params="{
+                varType: 2, panelId: 0,
+                returnChildren:0,groupId:0,
+              }"
+              :multiple="true"
+              :language="language"
+              title="ChartSearch"
+              key-field="id"
+              show-field="name"
+              v-model="moduleIds"
+              class="form-control"
+              :result-format="resultFormat"
+            ></v-selectpage>
+          </el-form-item>
+          <el-form-item :label="$t('asset.asset')" prop="ChartTemplate">
+            <v-selectpage
+              :data="assetDataList"
+              :tb-columns="ChartSearchShowFields"
+              :params="{
+                varType: 2, panelId: 0,
+                returnChildren:0,groupId:0,
+              }"
+              :multiple="true"
+              :language="language"
+              title="ChartSearch"
+              key-field="id"
+              show-field="name"
+              v-model="assetIds"
+              class="form-control"
+              :result-format="resultFormat"
+            ></v-selectpage>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="tableData"
+          :height="400"
+          v-if="tableData.length"
+          style="width:calc(100% - 55px)"
+          border>
+          <el-table-column
+            v-for="(item, index) in endpointTableTitle"
+            v-if="item.show"
+            :key="`col-${index}`"
+            :fixed="item.fixed"
+            :label="item.label"
+            :min-width="`${item.minWidth}`"
+            :prop="item.prop"
+            :resizable="true"
+            :sort-orders="['ascending', 'descending']"
+            :width="`${item.width}`"
+            class="data-column"
+          >
+            <template slot="header">
+              <span>{{item.label}}</span>
+              <div class="col-resize-area"></div>
+            </template>
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop === 'name'">
+                {{scope.row[item.prop]}}
+              </template>
+              <template v-else-if="item.prop === 'asset'">
+                {{scope.row.asset?scope.row.asset.name : '' }}
+              </template>
+              <template v-else-if="item.prop === 'project'">
+                {{scope.row.project?scope.row.project.name : '' }}
+              </template>
+              <template v-else-if="item.prop === 'module'">
+                {{scope.row.module?scope.row.module.name : '' }}
+              </template>
+              <template v-else-if="item.prop == 'configs'">
+                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
+                  <span class="configs-endpoint">{ ... }</span>
+                  <div class="endpointConfigsTips" slot="content">
+                    <pre >{{JSON.stringify(scope.row[item.prop],null,2)}}</pre>
+                  </div>
+                </el-tooltip>
+              </template>
+              <template v-else>1</template>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :resizable="false"
+            :width="80"
+            fixed="right">
+            <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+            <div slot-scope="scope" class="table-operation-items">
+              <button class="table-operation-item" v-has="'model_edit'" @click="del(scope.row, scope.$index)"><i class="nz-icon nz-icon-minus"></i></button>
+              <button class="table-operation-item"  @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></button>
+            </div>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!--底部按钮-->
+    <div class="right-box__footer">
+      <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="generate" id="ep-generate" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.generate')}}</span>
+      </button>
+      <button @click="save" class="footer__btn" id="ep-add">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+    <!--    edit endpoint-->
+    <transition name="right-box">
+      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'" :optionType="optionType"></edit-endpoint-box-new>
+    </transition>
+  </div>
+</template>
+
+<script>
+import editEndpointBoxNew from './editEndpointBoxNew'
+export default {
+  name: 'batchAddEndpointBox',
+  props: {
+    currentProject: Object,
+    currentModule: Object,
+    selectEndpointList: Array
+  },
+  components: {
+    'edit-endpoint-box-new': editEndpointBoxNew
+  },
+  data () {
+    return {
+      rules: {
+        projectId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        moduleId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      moduleIds: '',
+      assetIds: '',
+      assetDataList: [],
+      moduleList: [],
+      language: localStorage.getItem('nz-language'),
+      ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
+        { title: 'ID', data: 'id' },
+        { title: this.$t('config.model.titleName'), data: 'name' },
+        { title: this.$t('overall.remark'), data: 'remark' }
+      ],
+      object: {},
+      vendorAndModelOptionData: [],
+      paramBorderColor: '#dcdfe6',
+      endpointTouch: false,
+      endpoint: { projectId: '', moduleId: '', endpointList: [] },
+      currentModuleCopy: {},
+      currentProjectCopy: { id: '' },
+      tempParamObj: [],
+      tempLabelModule: [],
+      inputKeyErr: [],
+      tempEndpoint: {},
+      tempEndpoint2: {},
+      assetLoading: true,
+      rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
+      optionType: 'add',
+      tableData: [],
+      endpointTableTitle: [ // 原始table列
+        {
+          label: this.$t('project.endpoint.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('overall.project'),
+          prop: 'project',
+          show: true
+        },
+        {
+          label: this.$t('project.module.module'),
+          prop: 'module',
+          show: true
+        },
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true
+        },
+        {
+          label: this.$t('project.endpoint.configs'),
+          prop: 'configs',
+          show: true
+        }
+      ]
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    // 获取endpoint弹框中module下拉框数据
+    getModuleList () {
+      this.$get('monitor/module', { projectIds: '', pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.moduleList = response.data.list
+        }
+      })
+    },
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
+    getAssetList () {
+      this.assetLoading = true
+      const params = {
+        pageSize: -1
+      }
+      this.$get('asset/asset', params).then(response => {
+        if (response.code === 200) {
+          this.assetDataList = response.data.list
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.assetLoading = false
+        }, 200)
+      })
+    },
+    generate () {
+      if (!this.assetIds || !this.moduleIds) {
+        this.$message.error('Please select module or asset')
+      }
+      const res = {
+        code: 200,
+        msg: 'success',
+        data: {
+          list: [{
+            name: 'module+asset',
+            module: {
+              id: 2,
+              name: 'aaa'
+            },
+            project: {
+              id: 5,
+              name: 'aaa'
+            },
+            asset: {
+              id: 1,
+              name: 'aaa'
+            },
+            chartIds: '688355',
+            configs: [
+              { type: 'metrics', config: { protocol: 'HTTP', scrape_interval: 30, scrape_timeout: 10, host: '192.168.40.1', port: 9090, metrics_path: '/metric', params: { module: ['cpu', 'memory'] }, basic_auth: { username: 'zhangsan', password: 'lisi' }, bearer_token: 'yiduanwenzi', labels: { datacenter: 'bj', module: 'mysql' } }, enable: 1 },
+              {
+                type: 'logs',
+                config: [
+                  {
+                    type: 'file',
+                    fileName: '/var/logs/mysqld.log',
+                    labels: { datacenter: 'bj', module: 'mysql' },
+                    pipeline: [
+                      { type: 'regex', expression: 'ad?!*', source: '' },
+                      { type: 'json', expressions: [{ abc: 'abc', level: 'config' }], source: '' },
+                      { type: 'template', template: 'ad?!*', source: '' },
+                      { type: 'timestamp', format: 'RFC822Z', source: '' },
+                      { type: 'labels', labels: [{ abc: 'abc', level: 'config' }] },
+                      { type: 'output', source: 'content' }
+                    ]
+                  },
+                  { type: 'syslog', listenAddress: '0.0.0.0:9100', appName: 'sapp' },
+                  { type: 'journal', unit: 'nzagent.service' }
+                ],
+                enable: 1
+              }]
+          }
+          ]
+        }
+      }
+      this.tableData = res.data.list
+      // this.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => {
+      //   console.log(res)
+      //   this.tableData = res.data.list
+      // })
+    },
+    // 保存endpoint
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      // 对endpointList进行处理，避免携带过多无用数据
+      const endpointList = []
+      this.endpointTableData.forEach((item, index) => {
+        const endpoint = {
+          moduleId: item.moduleId,
+          assetId: item.assetId,
+          name: item.name,
+          configs: JSON.stringify(item.configs),
+          id: item.id
+        }
+        endpointList.push(endpoint)
+      })
+      this.$refs.addEndpoint.validate((valid) => {
+        if (valid) {
+          this.$put('monitor/endpoint', endpointList).then(response => {
+            this.prevent_opt.save = false
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    resultFormat (resp) {
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
+    },
+    closeRightBox (isEdit, endpoint, isAll) {
+      this.rightBox.show = false
+      if (!isEdit) { return }
+      if (isAll) {
+        Object.keys(this.blankEndpoint).forEach(key => {
+          this.blankEndpoint[key] = endpoint[key]
+        })
+      } else {
+        this.endpointTableData.forEach((item, index) => {
+          if (item.id === endpoint.id) {
+            this.endpointTableData[index] = { ...endpoint }
+          }
+        })
+        this.endpointTableData = [...this.endpointTableData]
+      }
+    },
+    del () {
+
+    },
+    edit (row) {
+      this.object = row
+      // this.object.configs = JSON.parse(this.object.configs)
+      this.object.projectId = this.object.project.id
+      this.object.moduleId = this.object.module.id
+      this.object.assetName = this.object.asset.name
+      this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
+      this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
+      this.object.paramObj = []
+      this.object.labelModule = []
+      this.object.configs[1].config.forEach(item => {
+        item.labelModule = []
+        if (JSON.stringify(item.labels) !== '{}' && item.labels) {
+          Object.keys(item.labels).forEach(key => {
+            item.labelModule.push({ key, value: item.labels[key] })
+          })
+        } else {
+          item.labelModule.push({ key: '', value: '' })
+        }
+        item.pipeline && item.pipeline.forEach((pipeline) => {
+          if (pipeline.type === 'labels') {
+            const labelsArr = []
+            if (JSON.stringify(pipeline.labels) !== '{}' && pipeline.labels) {
+              Object.keys(pipeline.labels).forEach(key => {
+                labelsArr.push({ key, value: pipeline.labels[key] })
+              })
+            } else {
+              labelsArr.push({ key: '', value: '' })
+            }
+            pipeline.labels = labelsArr
+          }
+        })
+        if (!item.pipeline) {
+          item.pipeline = []
+        }
+      })
+      if (JSON.stringify(this.object.configs[0].config.labels) !== '{}' && this.object.configs[0].config.labels) {
+        Object.keys(this.object.configs[0].config.labels).forEach(key => {
+          this.object.labelModule.push({ key, value: this.object.configs[0].config.labels[key] })
+        })
+      } else {
+        this.object.labelModule.push({ key: '', value: '' })
+      }
+      if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
+        Object.keys(this.object.configs[0].config.params).forEach(key => {
+          this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
+        })
+      } else {
+        this.object.paramObj.push({ key: '', value: [] })
+      }
+      if (!this.object.chartIds) {
+        this.object.chartIds = ''
+      } else {
+        // this.object.chartIds = this.object.chartIds.split(',')
+      }
+      this.rightBox.show = true
+      this.rightBox.show = true
+    }
+  },
+  created () {
+    this.getModuleList()
+    this.getAssetList()
+  },
+  watch: {
+  }
+}
+</script>

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

@@ -30,7 +30,7 @@
             </el-select>
           </el-form-item>
           <!--module-->
-          <el-form-item :label='$t("project.module.module")' prop="remark">
+          <el-form-item :label='$t("project.module.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-dropdown 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>
@@ -48,52 +48,6 @@
           <el-form-item v-if="optionType!=='batch'" :label='$t("project.module.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>
           </el-form-item>
-          <!-- snmp表单 -->
-          <span v-if="editEndpoint.type && editEndpoint.type == 'snmp'" class="snmp-form">
-          <div class="right-box-sub-title">SNMP settings</div>
-          <div class="right-box-line"></div>
-
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="walk">
-                <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editEndpoint.walk">
-                  <template v-slot:trigger>
-                    <div class="el-cascader">
-                      <div class="el-input">
-                        <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
-                      </div>
-                      <div class="el-cascader__tags">
-                        <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
-                          <span v-for="(item, index) in editEndpoint.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
-                            <span v-html="mibName(item)"></span>
-                            <div class="walk-close-box" @click.stop="removeWalk(item)">
-                              <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
-                            </div>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </select-walk>
-              </el-form-item>
-            </el-col>
-          </el-row>
-            <!--credentials-->
-        <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-          <el-select id="module-box-input-credentials" v-model="editEndpoint.configs.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
-            <el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        </span>
-          <!--module-->
-          <el-form-item :label='$t("project.endpoint.state")' prop="remark">
-            <el-select id="module-box-input-state" v-model="editEndpoint.enabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
-              <el-option v-for="item in endpointStateList" :id="'module-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
           <!--Enpoint template-->
           <div class="right-box-sub-title">{{ $t("overall.configEndpoint") }}
 <!--            <el-tooltip effect="light" placement="top">-->
@@ -123,7 +77,6 @@
               key-field="id"
               show-field="name"
               title="ChartSearch"
-              @values="(data) => {editEndpoint.chartIds = data.map(d => d.id).join(',')}"
             ></v-selectpage>
           </el-form-item>
           <div class="endpoint-title">
@@ -158,10 +111,10 @@
                   <el-input id="module-box-input-host" v-model="editEndpoint.configs[0].config.host" placeholder="" size="small"></el-input>
                 </el-form-item>
                 <!-- snmp表单 -->
-                <span v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'" class="snmp-form">
+                <div v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'">
                 <el-row>
                   <el-col :span="6">
-                    <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+                    <div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
                   </el-col>
                   <el-col :span="24">
                     <el-form-item prop="configs.0.config.walk"  :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
@@ -193,7 +146,7 @@
                       <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                     </el-select>
                   </el-form-item>
-                </span>
+                </div>
                 <transition name="el-zoom-in-top">
                   <div v-show="showAllBasicOption" >
                     <!--scrape_interval-->
@@ -301,42 +254,42 @@
                   <el-tab-pane label="Basic" name="Basic">
                     <!--type-->
                     <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                      <el-select id="module-box-input-type" v-model="item.basic.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                      <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                         <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                       </el-select>
                     </el-form-item>
                     <el-form-item
-                      v-if='item.basic.type === "file"'
+                      v-if='item.type === "file"'
-                      :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                      :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                      :prop="'configs.1.config.'+ index +'.basic.fileName'"
+                      :prop="'configs.1.config.'+ index +'fileName'"
                       :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                     >
-                      <el-input v-if='item.basic.type === "file"' v-model="item.basic.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                      <el-input v-if='item.type === "file"' v-model="item.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                     </el-form-item>
                     <el-form-item
-                      v-if='item.basic.type === "journal"'
+                      v-if='item.type === "journal"'
-                      :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                      :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                      :prop="'configs.1.config.'+ index +'.basic.unit'"
+                      :prop="'configs.1.config.'+ index +'unit'"
                       :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                     >
-                      <el-input v-if='item.basic.type === "journal"' v-model="item.basic.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                      <el-input v-if='item.type === "journal"' v-model="item.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                     </el-form-item>
                     <el-form-item
-                      v-if='item.basic.type === "syslog"'
+                      v-if='item.type === "syslog"'
-                      :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                      :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                      :prop="'configs.1.config.'+ index +'.basic.listenAddress'"
+                      :prop="'configs.1.config.'+ index +'listenAddress'"
                       :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                     >
-                      <el-input v-if='item.basic.type === "syslog"' v-model="item.basic.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                      <el-input v-if='item.type === "syslog"' v-model="item.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                     </el-form-item>
                     <el-form-item
-                      v-if="item.basic.type === 'syslog'"
+                      v-if="item.type === 'syslog'"
                       :label=' $t("project.endpoint.basicAppName")'
                       class="half-form-item"
-                      :prop="'configs.1.config.'+ index +'.basic.appName'"
+                      :prop="'configs.1.config.'+ index +'appName'"
                       :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                     >
-                      <el-input  v-model="item.basic.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
+                      <el-input  v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
                     </el-form-item>
                   </el-tab-pane>
                   <el-tab-pane label="Labels" name="Labels">
@@ -524,6 +477,7 @@ import pipelineSelect from './pipelineSelect'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
 import VueTagsInput from '@johmun/vue-tags-input'
+import project from "@/components/page/monitor/project/project";
 
 export default {
   name: 'editEndpointBoxNew',
@@ -555,6 +509,7 @@ export default {
       walkData: [],
       chartTempList: [],
       activeName: 'Basic',
+      activeNameLogs: ['Basic'],
       expandedWalkData: [],
       language: localStorage.getItem('nz-language'),
       radio: 'password',
@@ -572,7 +527,8 @@ export default {
       showAllBasicOption: false,
       rules: {
         name: [
-          { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' }
+          { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' },
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
         assetId: [
           { required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
@@ -675,10 +631,10 @@ export default {
   methods: {
     port: port,
     selectWalk (walk) {
-      if (this.editEndpoint.walk.indexOf(walk) != -1) {
+      if (this.editEndpoint.configs[0].config.walk.indexOf(walk) != -1) {
-        this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
+        this.editEndpoint.configs[0].config.walk.splice(this.editEndpoint.configs[0].config.walk.indexOf(walk), 1)
       } else {
-        this.editEndpoint.walk.push(walk)
+        this.editEndpoint.configs[0].config.walk.push(walk)
       }
     },
     // 从mibData里取得oid对应的mib名称
@@ -725,7 +681,7 @@ export default {
     },
 
     removeWalk (walk) {
-      this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
+      this.editEndpoint.configs[0].config.walk.splice(this.editEndpoint.configs[0].config.walk.indexOf(walk), 1)
       this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
     },
 
@@ -886,23 +842,22 @@ export default {
       }
     },
     logsBasicTypeChange (i) {
-      const type = this.editEndpoint.configs[1].config[i].basic.type
+      const type = this.editEndpoint.configs[1].config[i].type
       if (type === 'file') {
-        this.editEndpoint.configs[1].config[i].basic = {
+        this.editModule.configs[1].config[i].fileName = ''
-          type,
+        delete this.editModule.configs[1].config[i].unit
-          fileName: ''
+        delete this.editModule.configs[1].config[i].appName
-        }
+        delete this.editModule.configs[1].config[i].listenAddress
       } else if (type === 'journal') {
-        this.editEndpoint.configs[1].config[i].basic = {
+        delete this.editModule.configs[1].config[i].fileName
-          type,
+        this.editModule.configs[1].config[i].unit = ''
-          unit: ''
+        delete this.editModule.configs[1].config[i].appName
-        }
+        delete this.editModule.configs[1].config[i].listenAddress
       } else if (type === 'syslog') {
-        this.editEndpoint.configs[1].config[i].basic = {
+        delete this.editModule.configs[1].config[i].fileName
-          type,
+        delete this.editModule.configs[1].config[i].unit
-          appName: '',
+        this.editModule.configs[1].config[i].appName = ''
-          listenAddress: ''
+        this.editModule.configs[1].config[i].listenAddress = ''
-        }
       }
     },
     /* 获取project列表 */
@@ -915,6 +870,10 @@ export default {
     },
     changeProject () {
       this.getModuleList()
+      if (this.editEndpoint.moduleId) {
+        this.editEndpoint.moduleId = ''
+        this.$refs.moduleForm.clearValidate('moduleId')
+      }
     },
     /* 获取module列表 */
     getModuleList () {
@@ -1142,10 +1101,18 @@ export default {
       if (this.disabled) {
         return
       }
-      if (this.editEndpoint.moduleId && this.editEndpoint.assetId && (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs))) {
+      if (this.editEndpoint.moduleId && this.editEndpoint.assetId) {
         this.$post('/monitor/endpoint/render', { moduleIds: this.editEndpoint.moduleId, assetIds: this.editEndpoint.assetId }).then(res => {
           console.log(res)
+          if (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs)) {
             this.editEndpoint.configs = res.data.list[0].configs
+          }
+          if (!this.editEndpoint.name) {
+            this.editEndpoint.name = res.data.list[0].name
+          }
+          if (!this.editEndpoint.chartIds) {
+            this.editEndpoint.chartIds = res.data.list[0].chartIds
+          }
         })
       }
     }
@@ -1174,6 +1141,7 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editEndpoint = JSON.parse(JSON.stringify(n))
+        this.getModuleList()
         this.activeName = 'Basic'
         this.activeNameLogs = this.editEndpoint.configs[1].config.map(() => 'Basic')
         this.logsCopyValue = this.editEndpoint.configs[1].config.map(() => '')
@@ -1186,7 +1154,7 @@ export default {
         }
         if (n.type && n.type.toLowerCase() == 'snmp') {
           this.$refs.selectWalk.show()
-          for (let i = 0; i < this.editEndpoint.walk.length; i++) {
+          for (let i = 0; i < this.editEndpoint.configs[0].config.walk.length; i++) {
             this.expandedWalkData.push(this.editEndpoint.configs[0].config.walk[i].substring(0, this.editEndpoint.configs[0].config.walk[i].lastIndexOf('.')))
           }
         }
@@ -1398,6 +1366,8 @@ export default {
     .nz-icon-arrow-down{
       display: inline-block;
       transition: transform .3s;
+      color: #BDBDBD;
+      font-size: 12px;
     }
     .nz-icon-arrow-down.is-active{
       transform: rotate(

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

@@ -111,10 +111,10 @@
                 <el-input id="module-box-input-host" v-model="editModule.configs[0].config.host" placeholder="" size="small"></el-input>
               </el-form-item>
               <!-- snmp表单 -->
-              <span v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="snmp-form">
+              <div v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="">
                 <el-row>
                   <el-col :span="6">
-                    <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+                    <div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
                   </el-col>
                   <el-col :span="24">
                     <el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
@@ -146,7 +146,7 @@
                   <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                 </el-select>
               </el-form-item>
-          </span>
+          </div>
               <transition name="el-zoom-in-top">
                 <div v-show="showAllBasicOption" >
                   <!--scrape_interval-->
@@ -254,42 +254,42 @@
                 <el-tab-pane label="Basic" name="Basic">
                   <!--type-->
                   <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                    <el-select id="module-box-input-type" v-model="item.basic.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                    <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                       <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                     </el-select>
                   </el-form-item>
                   <el-form-item
-                    v-if='item.basic.type === "file"'
+                    v-if='item.type === "file"'
-                    :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                    :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                    :prop="'configs.1.config.'+ index +'.basic.fileName'"
+                    :prop="'configs.1.config.'+ index +'.fileName'"
                     :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                   >
-                    <el-input v-if='item.basic.type === "file"' v-model="item.basic.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                    <el-input v-if='item.type === "file"' v-model="item.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                   </el-form-item>
                   <el-form-item
-                    v-if='item.basic.type === "journal"'
+                    v-if='item.type === "journal"'
-                    :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                    :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                    :prop="'configs.1.config.'+ index +'.basic.unit'"
+                    :prop="'configs.1.config.'+ index +'.unit'"
                     :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                   >
-                    <el-input v-if='item.basic.type === "journal"' v-model="item.basic.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                    <el-input v-if='item.type === "journal"' v-model="item.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                   </el-form-item>
                   <el-form-item
-                    v-if='item.basic.type === "syslog"'
+                    v-if='item.type === "syslog"'
-                    :label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
+                    :label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
-                    :prop="'configs.1.config.'+ index +'.basic.listenAddress'"
+                    :prop="'configs.1.config.'+ index +'.listenAddress'"
                     :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                   >
-                    <el-input v-if='item.basic.type === "syslog"' v-model="item.basic.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
+                    <el-input v-if='item.type === "syslog"' v-model="item.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
                   </el-form-item>
                   <el-form-item
-                    v-if="item.basic.type === 'syslog'"
+                    v-if="item.type === 'syslog'"
                     :label=' $t("project.endpoint.basicAppName")'
                     class="half-form-item"
-                    :prop="'configs.1.config.'+ index +'.basic.appName'"
+                    :prop="'configs.1.config.'+ index +'.appName'"
                     :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
                   >
-                    <el-input  v-model="item.basic.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
+                    <el-input  v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
                   </el-form-item>
                 </el-tab-pane>
                 <el-tab-pane label="Labels" name="Labels">
@@ -622,10 +622,10 @@ export default {
   methods: {
     port: port,
     selectWalk (walk) {
-      if (this.editModule.walk.indexOf(walk) != -1) {
+      if (this.editModule.configs[0].config.walk.indexOf(walk) != -1) {
-        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
+        this.editModule.configs[0].config.walk.splice(this.editModule.configs[0].config.walk.indexOf(walk), 1)
       } else {
-        this.editModule.walk.push(walk)
+        this.editModule.configs[0].config.walk.push(walk)
       }
     },
     // 从mibData里取得oid对应的mib名称
@@ -672,7 +672,7 @@ export default {
     },
 
     removeWalk (walk) {
-      this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
+      this.editModule.configs[0].config.walk.splice(this.editModule.configs[0].config.walk.indexOf(walk), 1)
       this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
     },
 
@@ -915,10 +915,8 @@ export default {
       this.activeNameLogs.push('Basic')
       this.logsCopyValue.push('')
       this.editModule.configs[1].config.push({
-        basic: {
         type: 'file',
-          fileName: ''
+        fileName: '',
-        },
         labels: '',
         labelModule: [{ key: '', value: '' }],
         pipeline: []
@@ -930,23 +928,22 @@ export default {
       }
     },
     logsBasicTypeChange (i) {
-      const type = this.editModule.configs[1].config[i].basic.type
+      const type = this.editModule.configs[1].config[i].type
       if (type === 'file') {
-        this.editModule.configs[1].config[i].basic = {
+        this.editModule.configs[1].config[i].fileName = ''
-          type,
+        delete this.editModule.configs[1].config[i].unit
-          fileName: ''
+        delete this.editModule.configs[1].config[i].appName
-        }
+        delete this.editModule.configs[1].config[i].listenAddress
       } else if (type === 'journal') {
-        this.editModule.configs[1].config[i].basic = {
+        delete this.editModule.configs[1].config[i].fileName
-          type,
+        this.editModule.configs[1].config[i].unit = ''
-          unit: ''
+        delete this.editModule.configs[1].config[i].appName
-        }
+        delete this.editModule.configs[1].config[i].listenAddress
       } else if (type === 'syslog') {
-        this.editModule.configs[1].config[i].basic = {
+        delete this.editModule.configs[1].config[i].fileName
-          type,
+        delete this.editModule.configs[1].config[i].unit
-          appName: '',
+        this.editModule.configs[1].config[i].appName = ''
-          listenAddress: ''
+        this.editModule.configs[1].config[i].listenAddress = ''
-        }
       }
     },
     copyValue () {
@@ -1117,7 +1114,7 @@ export default {
         }
         if (n.type && n.type.toLowerCase() == 'snmp') {
           this.$refs.selectWalk.show()
-          for (let i = 0; i < this.editModule.walk.length; i++) {
+          for (let i = 0; i < this.editModule.configs[0].config.walk.length; i++) {
             this.expandedWalkData.push(this.editModule.configs[0].config.walk[i].substring(0, this.editModule.configs[0].config.walk[i].lastIndexOf('.')))
           }
         }
@@ -1329,6 +1326,8 @@ export default {
     .nz-icon-arrow-down{
       display: inline-block;
       transition: transform .3s;
+      color: #BDBDBD;
+      font-size: 12px;
     }
     .nz-icon-arrow-down.is-active{
       transform: rotate(

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

@@ -35,6 +35,9 @@
               <el-dropdown-item>
                 <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
               </el-dropdown-item>
+              <el-dropdown-item>
+                <div id="batch-add" @click="batchAdd"><i class="nz-icon nz-icon-table-edit"></i>{{$t('overall.batchAdd')}}</div>
+              </el-dropdown-item>
             </div>
           </template>
         </top-tool-more-options>
@@ -79,6 +82,9 @@
     <transition name="right-box">
       <batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
     </transition>
+    <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>
   </div>
@@ -91,6 +97,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import endpointTable from '@/components/common/table/settings/endpointTable'
 import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
 import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
+import batchAddEndpoint from '@/components/common/rightBox/batchAddEndpoint'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
@@ -106,7 +113,8 @@ export default {
     clickSearch,
     batchModifyEndpoint,
     topToolMoreOptions,
-    alertSilenceBox
+    alertSilenceBox,
+    batchAddEndpoint
   },
   mixins: [dataListMixin],
   data () {
@@ -145,10 +153,8 @@ export default {
           {
             type: 'logs',
             config: [{
-              basic: {
               type: 'file',
-                fileName: ''
+              fileName: '',
-              },
               labels: '',
               labelModule: [{ key: '', value: '' }],
               pipeline: []
@@ -213,7 +219,8 @@ export default {
       rightBox: {
         editShow: false,
         show: false,
-        batchModify: false
+        batchModify: false,
+        batchAdd: false,
       },
       titleSearch: {},
       titleSearchList: {
@@ -302,6 +309,13 @@ export default {
         this.getTableData()
       }
     },
+    closeRightBatchAdd (refresh) {
+      this.rightBox.batchAdd = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -366,6 +380,9 @@ export default {
         return
       }
       this.rightBox.batchModify = true
+    },
+    batchAdd () {
+      this.rightBox.batchAdd = true
     }
   },
   computed: {

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -125,10 +125,8 @@ export default {
           {
             type: 'logs',
             config: [{
-              basic: {
               type: 'file',
-                fileName: ''
+              fileName: '',
-              },
               labels: '',
               labelModule: [{ key: '', value: '' }],
               pipeline: []
@@ -230,7 +228,7 @@ export default {
           }
           if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
             Object.keys(this.object.configs[0].config.params).forEach(key => {
-              this.object.paramObj.push({ key, value: this.object.configs[0].params[key] })
+              this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
             })
           } else {
             this.object.paramObj.push({ key: '', value: [] })