feat：添加资产标签 （示例暂时未添加）

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

@@ -637,7 +637,7 @@ export const tableSet = {
           case 'gname': return 'gname'
           default : return prop
         }
-      default: break
+      default: return prop
     }
   },
   // 本地正序

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

@@ -438,7 +438,8 @@ const cn = {
     uSize: '必须是(1 - 47)的数字',
     requiredIdc: '机房为必选项',
     tooLong: '文本太长',
-    key: '不合法的值'
+    key: '不合法的值',
+    onlyWord: '只可以输入a-z、A-Z、0-9、"_" 字符'
   },
   search: {
     searchTip: '点击或回车执行搜索',
@@ -930,6 +931,35 @@ const cn = {
       createAssetState: '新增资产状态',
       editAssetState: '编辑资产状态'
     },
+    assetMeta: {
+      example: '示例',
+      assetMeta: '资产标签',
+      addGroup: '创建分组',
+      editGroup: '编辑分组',
+      addMeta: '创建Meta',
+      editMeta: '编辑Meta',
+      groupName: '名称',
+      key: '键名',
+      name: '名称',
+      group: '组',
+      search: '搜索',
+      display: '显示',
+      type: '类型',
+      params: '参数',
+      updateMeta: '编辑Meta',
+      deleteMeta: '删除 Meta',
+      infoMeta: 'Meta 信息',
+      text: '单行文本',
+      multitext: '多行文本',
+      textarea: '文本域',
+      radio: '单选按钮',
+      checkbox: '多选',
+      select: '下拉列表',
+      integer: '整数',
+      double: '小数',
+      datetime: '日期',
+      email: '邮箱'
+    },
     exprTemp: {
       exprTemp: 'expression模板',
       exprTempInfo: 'Expression 模板详情',

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

@@ -441,7 +441,8 @@ const en = {
     requiredIdc: 'dc is required',
     key: 'Invalid key',
     repeat: 'Repeat',
-    tooLong: 'Too long content'
+    tooLong: 'Too long content',
+    onlyWord: 'only input a-z、A-Z、0-9、"_" '
   },
   search: {
     searchTip: 'Enter to search', // '点击或回车执行搜索'
@@ -933,6 +934,35 @@ const en = {
       createAssetState: 'Create asset state',
       editAssetState: 'Edit asset state'
     },
+    assetMeta: {
+      example: 'Example',
+      assetMeta: 'Asset meta',
+      addGroup: 'Create group',
+      editGroup: 'Edit group',
+      addMeta: 'Create meta',
+      editMeta: 'Edit meta',
+      groupName: 'Name',
+      key: 'Key',
+      name: 'Name',
+      group: 'Group',
+      search: 'Search',
+      display: 'Display',
+      type: 'Type',
+      params: 'Params',
+      updateMeta: 'Update Meta',
+      deleteMeta: 'Delete Meta',
+      infoMeta: 'Meta Info',
+      text: 'TEXT',
+      multitext: 'MULTITEXT',
+      textarea: 'TEXTAREA',
+      radio: 'RADIO',
+      checkbox: 'CHECKBOX',
+      select: 'SELECT',
+      integer: 'INTEGER',
+      double: 'DOUBLE',
+      datetime: 'DATETIME',
+      email: 'EMAIL'
+    },
     exprTemp: {
       exprTemp: 'Expression template',
       exprTempInfo: 'Expression template Info',

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

@@ -0,0 +1,437 @@
+<template>
+  <transition name="right-box-580">
+    <div class="right-box right-box-panel z-top" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns right-box-form-delete">
+        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
+                v-has="'alert_silence_delete'" v-if="editAssetMeta.id">
+          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+        </button>
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">{{editAssetMeta.id ? $t("config.assetMeta.editMeta") + " ID：" + editAssetMeta.id :
+        $t("config.assetMeta.addMeta")}}
+      </div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form-box">
+        <el-form class="right-box-form right-box-form-left" label-width="120px"  :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
+
+          <el-form-item :label='$t("config.assetMeta.name")' prop="name">
+            <el-input placeholder="" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.key")' prop="metaKey">
+            <el-input placeholder="" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.group")' prop="groupId">
+<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.group" size="small" id="editAssetMeta-box-input-group"></el-input>-->
+            <el-select v-model="editAssetMeta.groupId" size="small" :popper-class="'nz-meta-group-box'" :popper-append-to-body="false">
+              <el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.search")' prop="search">
+<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.search" size="small" id="editAssetMeta-box-input-search"></el-input>-->
+            <el-switch
+              v-model="editAssetMeta.search"
+              active-color="#ee9d3f"
+              :active-value="1"
+              :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.display")' prop="display">
+<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.display" size="small" id="editAssetMeta-box-input-display"></el-input>-->
+            <el-switch
+              v-model="editAssetMeta.display"
+              active-color="#ee9d3f"
+              :active-value="1"
+              :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.type")' prop="type">
+            <el-select v-model="editAssetMeta.type" size="small" :popper-class="'nz-meta-group-box'" :popper-append-to-body="false" @change="selectType">
+              <el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="showParam">
+            <span>{{$t('config.assetMeta.params')}}</span>
+            <span @click="addParam" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="editAssetMeta.type!=='datetime'">
+            <span class="create-square-box">
+              <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
+            </span>
+          </span>
+          </div>
+          <el-form-item prop="param" v-if="showParam" class="asset-meta-param">
+<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.param" size="small" id="editAssetMeta-box-input-param"></el-input>-->
+            <div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box">
+              <el-row class="asset-meta-param-row asset-meta-param-header">
+                <el-col :span="12">
+                  选项
+                </el-col>
+                <el-col :span="6">
+                  是否默认
+                </el-col>
+                <el-col :span="6">
+                  操作
+                </el-col>
+              </el-row>
+              <el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
+                <el-col :span="12">
+                  <el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
+                </el-col>
+                <el-col :span="6">
+                  <el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">默认</el-radio>
+
+                  <el-checkbox v-else v-model="item.check" @change="checkBoxChange">默认</el-checkbox>
+
+                </el-col>
+                <el-col :span="6">
+                  <div class="">
+                <span class="nz-icon-minus-medium">
+                  <i @click="deleteParam(index)" class="nz-icon nz-icon-minus"></i>
+                </span>
+                    <span class="nz-icon-copy">
+                  <i @click="copyParam(index)" class="nz-icon nz-icon-override"></i>
+                </span>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+            <div v-if="editAssetMeta.type==='datetime'">
+              <el-row style="margin-bottom: 10px">
+                <span class="datetime-header">日期类型: </span>
+                <el-radio-group v-model="editAssetMeta.param.subType" @change="()=>{console.log(editAssetMeta.param.subType)}">
+                  <el-radio :label="'date'">日期</el-radio>
+                  <el-radio :label="'time'">时间</el-radio>
+                  <el-radio :label="'dateTime'">日期+时间</el-radio>
+                </el-radio-group>
+              </el-row>
+              <el-row>
+                <span class="datetime-header">是否区间: </span>
+                <el-switch
+                  v-model="editAssetMeta.param.interval"
+                  @change="$forceUpdate"
+                  active-color="#ee9d3f">
+                </el-switch>
+              </el-row>
+            </div>
+
+          </el-form-item>
+
+          <el-form-item :label='$t("overall.remark")' prop="remark">
+            <el-input placeholder="" maxlength="512" type="textarea" show-word-limit v-model="editAssetMeta.remark" size="small" id="editAssetMeta-box-input-remark"></el-input>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.assetMeta.example")'>
+          </el-form-item>
+
+        </el-form>
+      </div>
+      <!-- end--表单-->
+
+      <!-- begin--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button v-cancel="{obj:editAssetMeta,func:esc}" id="editAssetMeta-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="editAssetMeta-box-save">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
+      <!-- end--底部按钮-->
+
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'assetMetaBox',
+  props: {
+    assetMeta: {}
+  },
+  components: {},
+  data () {
+    return {
+      editAssetMeta: {
+        id: '',
+        name: '',
+        metaKey: '',
+        groupId: {
+          id: '',
+          name: ''
+        },
+        search: 1,
+        display: 1,
+        type: '',
+        param: {},
+        remark: ''
+      },
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      groupData: [],
+      rules: {
+        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        metaKey: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }, { pattern: /\w/, message: this.$t('validate.onlyWord'), trigger: 'change' }],
+        groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
+      },
+      typeData: [
+        {
+          value: 'text',
+          name: this.$t('config.assetMeta.text')
+        },
+        {
+          value: 'multitext',
+          name: this.$t('config.assetMeta.multitext')
+        },
+        {
+          value: 'textarea',
+          name: this.$t('config.assetMeta.textarea')
+        },
+        {
+          value: 'radio',
+          name: this.$t('config.assetMeta.radio')
+        },
+        {
+          value: 'checkbox',
+          name: this.$t('config.assetMeta.checkbox')
+        },
+        {
+          value: 'select',
+          name: this.$t('config.assetMeta.select')
+        },
+        {
+          value: 'integer',
+          name: this.$t('config.assetMeta.integer')
+        },
+        {
+          value: 'double',
+          name: this.$t('config.assetMeta.double')
+        },
+        {
+          value: 'datetime',
+          name: this.$t('config.assetMeta.datetime')
+        },
+        {
+          value: 'email',
+          name: this.$t('config.assetMeta.email')
+        }
+      ],
+      showParam: false
+    }
+  },
+  watch: {
+    assetMeta: {
+      immediate: true,
+      handler (n) {
+        this.editAssetMeta = { ...n }
+        this.selectType(n.type, true)
+      }
+    }
+  },
+  mounted () {
+    this.getGroupData()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$refs.editAssetMetaForm.validate((valid) => {
+        if (valid) {
+          const param = { ...this.editAssetMeta }
+          if (param.type !== 'radio' && param.type !== 'checkbox' && param.type !== 'select' && param.type !== 'datetime'){
+            delete param.param
+          } else {
+            param.param = JSON.stringify(param.param)
+          }
+          if (this.editAssetMeta.id) {
+            this.$put('asset/field/meta', param).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.$post('asset/field/meta', param).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
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/alert/silence?ids=' + this.editAssetMeta.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    getGroupData () {
+      this.$get('asset/field/group', { pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.groupData = response.data.list
+          console.log(this.groupData)
+        }
+      })
+    },
+    selectType (val, init) {
+      console.log(val)
+      switch (val) {
+        case 'radio' :
+        case 'checkbox' :
+        case 'select' :
+          this.showParam = true
+          if (init) return
+          this.editAssetMeta.param = {}
+          this.editAssetMeta.param.items = [{
+            name: 'Option 1',
+            check: false
+          }, {
+            name: 'Option 2',
+            check: false
+          }]
+          break
+        case 'datetime' :
+          this.showParam = true
+          if (init) return
+          this.editAssetMeta.param = {
+            subType: 'date',
+            interval: false
+          }
+          break
+        default:
+          this.showParam = false
+          break
+      }
+    },
+    inputChange (index, val) {
+      // console.log(val)
+      // this.editAssetMeta.param.items[index] = val
+      this.$forceUpdate()
+    },
+    radioChange (i) {
+      console.log(i)
+      this.editAssetMeta.param.items.forEach((item, index) => {
+        if (index === i) {
+          item.check = !!item.check
+        } else if (this.editAssetMeta.type !== 'checkbox') {
+          item.check = false
+        }
+      })
+      this.$forceUpdate()
+    },
+    checkBoxChange () {
+      this.$forceUpdate()
+    },
+    addParam () {
+      if (this.editAssetMeta.param.items.length > 20) {
+        this.$message.error('选项最多20条')
+        return
+      }
+      this.editAssetMeta.param.items.push({
+        name: '',
+        check: false
+      })
+      this.$forceUpdate()
+    },
+    deleteParam (index) {
+      if (this.editAssetMeta.param.items.length > 20) {
+        this.$message.error('至少需要一个选项')
+        return
+      }
+      this.editAssetMeta.param.items.splice(index, 1)
+    },
+    copyParam (index) {
+      if (this.editAssetMeta.type !== 'checkbox') {
+        this.editAssetMeta.param.items.push({
+          name: this.editAssetMeta.param.items[index].name,
+          check: false
+        })
+      } else {
+        this.editAssetMeta.param.items.push({
+          ...this.editAssetMeta.param.items[index]
+        })
+      }
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  /deep/ .nz-meta-group-box{
+    min-width: 220px;
+  }
+  /*.asset-meta-param /deep/ .el-radio__label{*/
+  /*  display: none;*/
+  /*}*/
+  .asset-meta-param-row{
+    text-align: center;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .asset-meta-param-row:last-child{
+    margin-bottom: 0;
+  }
+  .meta-option-box{
+
+  }
+  .datetime-header{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+    text-align: right;
+  }
+</style>

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

@@ -0,0 +1,151 @@
+<template>
+  <transition name="right-box-580">
+    <div class="right-box right-box-panel z-top" v-clickoutside="{obj:editMetaGroup,func:clickOutside}">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns right-box-form-delete">
+        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
+                v-has="'alert_silence_delete'" v-if="editMetaGroup.id">
+          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+        </button>
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">{{editMetaGroup.id ? $t("config.assetMeta.editGroup") + " ID：" + editMetaGroup.id :
+        $t("config.assetMeta.addGroup")}}
+      </div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form-box">
+        <el-form class="right-box-form right-box-form-left" label-width="120px"  :model="editMetaGroup" label-position = "top" ref="editMetaGroupForm">
+          <el-form-item :label='$t("config.assetMeta.groupName")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editMetaGroup.name" size="small" id="editMetaGroup-box-input-name"></el-input>
+          </el-form-item>
+          <el-form-item :label='$t("overall.remark")' prop="remark">
+            <el-input placeholder="" maxlength="512" type="textarea" show-word-limit v-model="editMetaGroup.remark" size="small" id="editMetaGroup-box-input-remark"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- end--表单-->
+
+      <!-- begin--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button v-cancel="{obj:editMetaGroup,func:esc}" id="editMetaGroup-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="editMetaGroup-box-save">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
+      <!-- end--底部按钮-->
+
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'assetMetaGroup',
+  props: {
+    metaGroup: {}
+  },
+  components: {},
+  data () {
+    return {
+      editMetaGroup: {
+        id: '',
+        name: '',
+        remark: ''
+      },
+      rightBox: { // 面板弹出框相关
+        show: false
+      }
+    }
+  },
+  watch: {
+    metaGroup: {
+      immediate: true,
+      handler (n) {
+        this.editMetaGroup = { ...n }
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$refs.editMetaGroupForm.validate((valid) => {
+        if (valid) {
+          const params = { ...this.editMetaGroup }
+          if (this.editMetaGroup.id) {
+            this.$put('asset/field/group', params).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.$post('asset/field/group', params).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
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/alert/silence?ids=' + this.editMetaGroup.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -143,7 +143,7 @@ export default {
         if (response.code == 200) {
           this.menus = response.data.list
 
-          console.log("menus",this.menus)
+          console.log('menus', this.menus)
         } else {
           this.$message.error('load menu faild')
         }

nezha-fronted/src/components/page/config/assetMeta.vue

@@ -0,0 +1,584 @@
+<template>
+  <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': bottomBox.showSubList}">
+    <!--工具组-->
+    <div class="top-tools" v-show="bottomBox.mainResizeShow">
+      <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
+        <div class="top-tool-search margin-r-20">
+          <search-input :searchMsg="searchMsg" @search="search"
+                        :inTransform="bottomBox.inTransform" :single="true"></search-input>
+        </div>
+        <button :title="$t('overall.exportExcelLower')" @click="addMeta" type="button" v-has="'expr_temp_save'"
+                class="nz-btn nz-btn-size-normal nz-btn-style-light" id="meta-add-meta">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+
+        <delete-button :delete-objs="batchDeleteObjs" @after="getAssetMeta"
+                       :api="'asset/field/meta'" v-has="'expr_temp_delete'" id="meta-msg-batch-delete"></delete-button>
+      </div>
+      <div class="pagination-top pagination-top-hide display-none"></div>
+    </div>
+    <!-- content -->
+    <div class="content">
+      <div class="asset-meta-group">
+        <div class="group-title">
+          <span>
+            <button @click="addGroup" type="button" v-has="'asset:fieldgroup:add'" :disabled="metaGroupLock"
+                    :class="{'nz-btn-disabled' : metaGroupLock}"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light" id="meta-list-export">
+              <i class="nz-icon nz-icon-create-square"></i>
+            </button>
+             <button @click="metaGroupLock=!metaGroupLock" class="nz-btn nz-btn-size-normal nz-btn-style-light" type="button" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':metaGroupLock,'nz-icon nz-icon-unlock':!metaGroupLock}"></i></button>
+        </span>
+        </div>
+        <el-tree
+          :data="groupData"
+          :props="defaultProps"
+          :node-key="'id'"
+          @node-click="changeGroup"
+          ref="groupTree"
+          check-on-click-node
+          check-strictly
+        >
+          <div class="meta-group" slot-scope="{ node, data }">
+        <div>
+          <i class="nz-icon nz-icon-reading" v-if="!data.children"></i>
+          <i class="el-icon-folder-opened" v-if="data.children"></i>
+          {{ node.label }}
+        </div>
+        <div v-if="!data.children&&!metaGroupLock" class="icon-box">
+          <span :id="'asset-group-edit-'+node.id" :title="$t('overall.edit')" @click.stop="editGroup(data)"
+                                    class="content-right-option" v-has="'asset:fieldgroup:update'">
+            <i class="nz-icon nz-icon-edit"></i>
+          </span>
+          <span
+            :id="'asset-group-del-'+node.id"
+            :title="$t('overall.delete')"
+            @click.stop="delGroup(data)"
+            class="content-right-option"
+            v-has="'asset:fieldgroup:delete'">
+            <i  class="nz-icon nz-icon-delete"></i>
+          </span>
+        </div>
+      </div>
+        </el-tree>
+      </div>
+      <div class="asset-meta-table">
+        <!--表格开始-->
+        <transition name="el-zoom-in-top">
+          <element-set
+            id="meta-rule-element-set"
+            v-if="tools.showCustomTableTitle"
+            @close="tools.showCustomTableTitle = false"
+            :custom-table-title.sync="tools.customTableTitle"
+            :original-table-title="tableTitle"
+            ref="customTableTitle"
+          ></element-set>
+        </transition>
+        <el-table
+          id="meta-rule-table"
+          class="nz-table"
+          :data="tableData"
+          border
+          v-show="bottomBox.mainResizeShow"
+          ref="assetMetaTable"
+          tooltip-effect="light"
+          :height="mainTableHeight"
+          v-loading="tools.loading"
+          style="width: 100%;"
+          @sort-change="tableDataSort"
+          @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+        >
+          <el-table-column
+            :resizable="false"
+            type="selection"
+            width="40"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            :resizable="true"
+            v-for="(item, index) in tools.customTableTitle"
+            v-if="item.show"
+            :key="`col-${index}`"
+            :label="item.label"
+            :show-overflow-tooltip="item.prop!=='matchers'"
+            :sort-orders="['ascending', 'descending']"
+            :sortable="$tableSet.sortableShow(item.prop,'assetMeta')"
+            :prop="$tableSet.propTitle(item.prop,'assetMeta')"
+            :width="item.width"
+          >
+            <template slot-scope="scope" :column="item">
+              <div v-if="item.prop === 'option'" class="content-right-options">
+            <span :id="'meta-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)"
+                  class="content-right-option" v-has="'expr_temp_update'">
+              <i class="nz-icon nz-icon-edit"></i>
+            </span>
+                <span
+                  :id="'meta-del-'+scope.row.id"
+                  :title="$t('overall.delete')"
+                  @click="del(scope.row)"
+                  class="content-right-option"
+                  v-has="'expr_temp_delete'">
+              <i  class="nz-icon nz-icon-delete"></i>
+            </span>
+              </div>
+              <div v-else-if=" item.prop === 'group' ">
+                {{scope.row[item.prop].name}}
+              </div>
+              <div v-else-if=" item.prop === 'display' ">
+                <el-switch
+                  v-model="scope.row[item.prop]"
+                  active-color="#ee9d3f"
+                  :active-value="1"
+                  @change="putMeta(scope.row)"
+                  :inactive-value="0">
+                </el-switch>
+              </div>
+              <div v-else-if=" item.prop === 'search' ">
+                <el-switch
+                  v-model="scope.row[item.prop]"
+                  active-color="#ee9d3f"
+                  :active-value="1"
+                  @change="putMeta(scope.row)"
+                  :inactive-value="0">
+                </el-switch>
+              </div>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
+
+          <el-table-column width="28" :resizable="false">
+            <template slot="header">
+          <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
+                class="nz-table-gear">
+            <i class="nz-icon nz-icon-gear"></i>
+          </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}"
+                @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"
+                id="meta-rule-toTop"><i class="nz-icon nz-icon-top"></i></button>
+        <!--表格结束-->
+        <!--分页部分-->
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize'
+                      ref="Pagination"></Pagination>
+        </div>
+      </div>
+    </div>
+    <!--侧滑-->
+    <transition name="right-box">
+      <assetMetaBox v-if="rightBox.metaShow" :assetMeta="assetMeta" @close="closeRightBox"
+                   ref="assetMetaBox"></assetMetaBox>
+    </transition>
+    <transition name="right-box">
+      <assetMetaGroup v-if="rightBox.groupShow" :metaGroup="metaGroup" @close="closeRightBox"
+                    ref="assetMetaBox"></assetMetaGroup>
+    </transition>
+  </div>
+</template>
+
+<script>
+import deleteButton from '../../common/deleteButton'
+import assetMetaGroup from '../../common/rightBox/assetMetaGroup'
+import assetMetaBox from '../../common/rightBox/assetMetaBox'
+
+export default {
+  name: 'assetMeta',
+  components: {
+    'delete-button': deleteButton,
+    assetMetaGroup,
+    assetMetaBox
+  },
+  data () {
+    return {
+      tableId: 'assetMeta',
+      // 侧滑
+      rightBox: {
+        metaShow: false,
+        groupShow: false
+      },
+      metaGroupLock: true,
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.assetMeta.key'),
+          prop: 'metaKey',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.group'),
+          prop: 'group',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.search'),
+          prop: 'search',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.display'),
+          prop: 'display',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.params'),
+          prop: 'params',
+          show: true
+        }, {
+          label: this.$t('alert.config.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      groupData: [{
+        name: 'All',
+        id: -1,
+        children: []
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      tableData: [],
+      /* 二级列表相关 */
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 二级页面相关 */
+      bottomBox: {
+        tabList: [], // 二级列表的标签
+        tabDetailList: [], // 多个详情
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      /* 批量删除相关 */
+      batchDeleteObjs: [],
+      /* 搜素相关 */
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          // {
+          //   id: 11,
+          //   name: 'Id',
+          //   type: 'input',
+          //   label: 'id',
+          //   disabled: false
+          // }, {
+          //   id: 12,
+          //   name: this.$t('config.assetMeta.name'),
+          //   type: 'input',
+          //   label: 'name',
+          //   disabled: false
+          // }, {
+          //   id: 13,
+          //   name: this.$t('config.assetMeta.gname'),
+          //   type: 'selectTemp',
+          //   label: 'gname',
+          //   disabled: false
+          // }
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      // 创建修改相关
+      blackAssetMeta: {
+        id: '',
+        name: '',
+        metaKey: '',
+        groupId: '',
+        search: 1,
+        display: 1,
+        type: 'text',
+        param: {},
+        remark: ''
+      },
+      assetMeta: {
+
+      },
+      blackMetaGroup: {
+        id: '',
+        name: '',
+        remark: ''
+      },
+      activeGroupId: -1,
+      metaGroup: {
+
+      }
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.initEvent()
+  },
+  methods: {
+    initEvent () {
+      this.$refs.groupTree.setCurrentKey(this.activeGroupId)
+      this.getGroup()
+      this.getAssetMeta()
+    },
+    getGroup () {
+      this.$get('asset/field/group', { pageSize: -1 }).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.groupData[0].children = response.data.list
+          console.log(this.groupData)
+          this.$forceUpdate()
+        }
+      })
+    },
+    getAssetMeta () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      if (!this.searchLabel.groupId) {
+        delete this.searchLabel.groupId
+      }
+      this.$get('asset/field/meta', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          // console.info(this.$refs.assetMetaTable)
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.assetMetaTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAssetMeta()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAssetMeta()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.$refs.assetMetaTable.bodyWrapper.scrollTop = 0
+      this.getAssetMeta()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAssetMeta()
+    },
+    afterTableListChange () {
+      this.getAssetMeta()
+    },
+    addGroup () {
+      console.log(123123123123)
+      this.metaGroup = JSON.parse(JSON.stringify(this.blackMetaGroup))
+      this.rightBox.groupShow = true
+    },
+    editGroup (group) {
+      console.log(group)
+      this.metaGroup = JSON.parse(JSON.stringify(group))
+      this.rightBox.groupShow = true
+    },
+    delGroup (group) {
+      const selectKey = this.$refs.groupTree.getCurrentKey()
+      console.log(selectKey)
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('asset/field/group?ids=' + group.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getGroup()
+
+            if (selectKey === group.id) {
+              this.activeGroupId = -1
+              this.searchLabel.groupId = ''
+              this.getAssetMeta()
+              this.$refs.groupTree.setCurrentKey(this.activeGroupId)
+            }
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    changeGroup (item) {
+      this.activeGroupId = item.id
+      this.searchLabel.groupId = item.id !== -1 ? item.id : ''
+      this.getAssetMeta()
+    },
+    addMeta () {
+      this.assetMeta = JSON.parse(JSON.stringify(this.blackAssetMeta))
+      this.rightBox.metaShow = true
+    },
+    edit (row) {
+      this.$get('asset/field/meta/' + row.id).then(res => {
+        this.assetMeta = { ...res.data, param: JSON.parse(res.data.param) }
+        this.rightBox.metaShow = true
+      })
+    },
+    putMeta (row) {
+      this.tools.loading = true
+      this.$put('asset/field/meta', row).then(response => {
+        this.prevent_opt.save = false
+        if (response.code === 200) {
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.getAssetMeta()
+      })
+    },
+    del (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('asset/field/meta?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getAssetMeta()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    closeRightBox (refresh) {
+      this.rightBox.metaShow = false
+      this.rightBox.groupShow = false
+      if (refresh) {
+        this.delFlag = true
+        this.getAssetMeta()
+        this.getGroup()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .content{
+    display: flex;
+    height: calc(100% - 40px);
+  }
+  .asset-meta-group{
+    width: 200px;
+    height: calc(100% - 100px);
+    background: #fff;
+    margin-right: 10px;
+    border: 1px solid #d4d4d4;
+  }
+  .asset-meta-table{
+    flex: 1;
+  }
+  .group-title {
+    background-image: linear-gradient(#f8f8f8, #e6e6e6);
+    border-bottom: 1px solid #d4d4d4;
+    display: flex;
+    justify-content: flex-end;
+    padding: 3px 5px;
+  }
+  .group-box{
+    height: 100%;
+    overflow-y:auto;
+  }
+  /deep/ .el-tree-node.is-current>.el-tree-node__content{
+    background-color: #F5F7FA;
+    color: #ee9d3f;
+  }
+  /deep/ .el-tree-node.is-current>.el-tree-node__content .meta-group{
+    background-color: #F5F7FA;
+    color: #ee9d3f;
+  }
+  /deep/ .el-tree-node__content:hover .meta-group {
+    color: #ee9d3f;
+  }
+  .meta-group{
+    color: #606266;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .meta-group .nz-icon-edit{
+    color: #606266;
+  }
+  .meta-group .icon-box{
+    display: none;
+  }
+  .meta-group:hover .icon-box{
+    display: inline-block;
+  }
+</style>

nezha-fronted/src/router/index.js

@@ -65,6 +65,10 @@ export default new Router({
           path: '/assetState',
           component: resolve => require(['../components/page/config/assetState.vue'], resolve)
         },
+        {
+          path: '/assetMeta',
+          component: resolve => require(['../components/page/config/assetMeta.vue'], resolve)
+        },
         {
           path: '/dc',
           component: resolve => require(['../components/page/config/dc.vue'], resolve)

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"", "version": "1.2.2020.11.10.14.10"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "1.2.2020.11.10.14.10"}