NEZ-586 asset Type页面新增

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

@@ -79,6 +79,18 @@ export const asset = {
     { value: 2, label: i18n.t('asset.notInStock') },
     { value: 3, label: i18n.t('asset.suspended') }
   ],
+  assetType: {
+    authProtocolOptions: [
+      { value: 0, label: '无' },
+      { value: 1, label: 'SSH' },
+      { value: 2, label: 'TELNET' }
+    ],
+    authProtocolData: {
+      non: 0,
+      ssh: 1,
+      telnet: 2
+    },
+  },
   authProtocolOptions: [
     { value: 1, label: 'SSH' },
     { value: 2, label: 'TELNET' }

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

@@ -950,6 +950,7 @@ const cn = {
       }
     },
     assetType: {
+      name:'名称',
       assetType: '资产类型',
       parent: '父级',
       pname: '父级',

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

@@ -972,6 +972,12 @@ const en = {
     },
     assetType: {
       assetType: 'Asset Type',
+      name:'Name',
+      vm:'VM',
+      vmh:'VMH',
+      authProtocol:'AuthProtocol',
+      snmpEnable: 'SnmpEnable',
+      createModel:'CreateModel',
       parent: 'Parent',
       pname: 'Parent name',
       editAssetType: 'Edit asset type',
@@ -986,6 +992,7 @@ const en = {
       editAssetState: 'Edit asset state'
     },
     assetLabel: {
+      addMeta:'addMeta',
       example: 'Example',
       assetLabel: 'Asset labels',
       all: 'All',

nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue

@@ -0,0 +1,198 @@
+<template>
+  <div v-clickoutside="{obj: editAssetType, func: esc}" class="right-box right-box-asset">
+    <div class="right-box__header">
+      <div class="header__title">{{editAssetType.id ? $t('config.assetType.editAssetType') : $t('config.assetType.createModel')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editAssetType, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="assetTypeForm" :model="editAssetType" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label="$t('config.assetType.name')" prop="name">
+            <el-input v-model="editAssetType.name" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--vm-->
+          <el-form-item :label='$t("config.assetType.vm")' prop="vm">
+            <el-switch
+              v-model="editAssetType.vm"
+              active-color="#ee9d3f"
+              :active-value="1"
+              :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+          <!--vmh-->
+          <el-form-item :label='$t("config.assetType.vmh")' prop="vmh">
+            <el-switch
+              v-model="editAssetType.vmh"
+              active-color="#ee9d3f"
+              :active-value="1"
+              :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+          <!--authProtocol-->
+          <el-form-item :label='$t("config.assetType.authProtocol")' prop="authProtocol">
+            <el-select class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="请选择">
+              <el-option :key="option.value" v-for="option in assetConstants.assetType.authProtocolOptions" :value="option.value" :label="option.label"></el-option>
+            </el-select>
+          </el-form-item>
+          <!--snmpEnable-->
+          <el-form-item :label='$t("config.assetType.snmpEnable")' prop="snmpEnable">
+            <el-switch
+              v-model="editAssetType.snmpEnable"
+              active-color="#ee9d3f"
+              :active-value="1"
+              :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+          <!-- ChartTemplate -->
+          <!-- <el-form-item :label="$t('config.type.ChartTemplate')" prop="ChartTemplate">
+            <v-selectpage 
+            :data="chartlList" 
+            :tb-columns="ChartSearchShowFields" 
+            :max-select-limit="3" 
+            :multiple="true"
+            title="ChartSearch"
+            placeholder="Please select item"
+            key-field="id"
+            v-model="editAssetType.chartIds" 
+            show-field="name" 
+            class="form-control"
+            @values="(data) => {editAssetType.chartIds = data.map(d => d.id).join(',')}"
+          ></v-selectpage>
+          </el-form-item> -->
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editAssetType, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { asset as assetConstants} from '@/components/common/js/constants'
+import selectWalk from '../../popBox/selectWalk'
+export default {
+  name: 'assetTypeBox',
+  components: {
+    'select-walk': selectWalk,
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    }
+  },
+  data () {
+    return {
+      assetConstants,
+      editAssetType: {}, 
+      editModule: {},
+      assetTypeList:[
+        {
+          id:'',
+          authProtocol:''
+        }
+      ], 
+      value:'',
+      url: 'asset/typeConf',
+      // brandUrl: 'asset/brand',
+      rightBox: { model: { show: false } },
+      roles: [],
+      rules: {
+          name: [
+            { required: true, message: '必填', trigger: 'blur' }
+          ],
+          brandId: [
+            { required: true, message: this.$t('validate.required'), trigger: 'change' }
+          ]
+      }
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editAssetType = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  created () {
+    // this.getBrandList()
+    // this.ChartTemplateList()
+    this.assetType()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.$refs.assetTypeForm.validate((valid) => {
+        if (valid) {
+          if (this.editAssetType.id) {
+            console.log(this.editAssetType);
+            this.$put(this.url, this.editAssetType).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            this.$post(this.url, this.editAssetType).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    selectWalk (walk) {
+      console.log(walk);
+      if (this.editModule.walk.indexOf(walk) != -1) {
+        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
+      } else {
+        this.editModule.walk.push(walk)
+      }
+    },
+    assetType(){
+      this.$get('asset/typeConf').then(res => {
+        this.assetTypeList = res.data.list
+        console.log(this.assetTypeList);
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+  @import '@/assets/css/common/rightBoxCommon.scss';
+</style>

nezha-fronted/src/components/common/rightBox/administration/modelBox.vue

@@ -8,14 +8,14 @@
     </div>
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="modelForm" :model="editModel" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+        <el-form ref="modelForm" :model="editModel" :rules="rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('config.model.name')" prop="name">
             <el-input v-model="editModel.name" size="small" type="text"></el-input>
           </el-form-item>
           <!--brand-->
           <el-form-item :label='$t("config.model.brand")' prop="brandId">
-            <el-select value-key="id" allow-create popper-class="config-dropdown" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
+            <el-select value-key="id" allow-create  class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
               <el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box-580">
-    <div class="right-box right-box-panel z-top" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
+    <div class="right-box right-box-asset" 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"
@@ -12,33 +12,35 @@
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
-      <div class="right-box-title">{{editAssetMeta.id ? $t("config.assetMeta.editMeta") + " ID：" + editAssetMeta.id :
+      <div class="right-box__header">
-        $t("config.assetMeta.addMeta")}}
+      <div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta") + " ID：" + editAssetMeta.id :
+        $t("config.assetLabel.addMeta")}}</div>
     </div>
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <div class="right-box-form-box">
+      <div class="right-box__container">
         <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-form-item :label='$t("config.assetLabel.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-form-item :label='$t("config.assetLabel.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-form-item :label='$t("config.assetLabel.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-form-item :label='$t("config.assetLabel.search")' prop="search">
 <!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.search" size="small" id="editAssetMeta-box-input-search"></el-input>-->
             <el-switch
+              @change="switchSearch"
               v-model="editAssetMeta.search"
               active-color="#ee9d3f"
               :active-value="1"
@@ -46,7 +48,7 @@
             </el-switch>
           </el-form-item>
 
-          <el-form-item :label='$t("config.assetMeta.display")' prop="display">
+          <el-form-item :label='$t("config.assetLabel.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"
@@ -56,14 +58,16 @@
             </el-switch>
           </el-form-item>
 
-          <el-form-item :label='$t("config.assetMeta.type")' prop="type">
+          <el-form-item :label='$t("config.assetLabel.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-select  v-model="editAssetMeta.type" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :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-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
+                <div><i :class="item.icon"></i>&nbsp;&nbsp;<span >{{item.name}}</span></div>
+              </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>{{$t('config.assetLabel.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>
@@ -75,13 +79,13 @@
             <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">
-                  {{$t('config.assetMeta.option')}}
+                  {{$t('config.assetLabel.option')}}
                 </el-col>
                 <el-col :span="6">
-                  {{$t('config.assetMeta.isCheck')}}
+                  {{$t('config.assetLabel.isCheck')}}
                 </el-col>
                 <el-col :span="6">
-                  {{$t('config.assetMeta.operate')}}
+                  {{$t('config.assetLabel.operate')}}
                 </el-col>
               </el-row>
               <el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
@@ -89,9 +93,9 @@
                   <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)">{{$t('config.assetMeta.default')}}</el-radio>
+                  <el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetLabel.default')}}</el-radio>
 
-                  <el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetMeta.default')}}</el-checkbox>
+                  <el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetLabel.default')}}</el-checkbox>
 
                 </el-col>
                 <el-col :span="6">
@@ -109,15 +113,15 @@
 
             <div v-if="editAssetMeta.type==='datetime'">
               <el-row style="margin-bottom: 10px">
-                <span class="datetime-header">{{$t('config.assetMeta.dateType')}}: </span>
+                <span class="datetime-header">{{$t('config.assetLabel.dateType')}}: </span>
                 <el-radio-group v-model="editAssetMeta.param.subType">
-                  <el-radio :label="'date'">{{$t('config.assetMeta.date')}}</el-radio>
+                  <el-radio :label="'date'">{{$t('config.assetLabel.date')}}</el-radio>
-                  <el-radio :label="'time'">{{$t('config.assetMeta.time')}}</el-radio>
+                  <el-radio :label="'time'">{{$t('config.assetLabel.time')}}</el-radio>
-                  <el-radio :label="'datetime'">{{$t('config.assetMeta.datetimes')}}</el-radio>
+                  <el-radio :label="'datetime'">{{$t('config.assetLabel.datetimes')}}</el-radio>
                 </el-radio-group>
               </el-row>
               <el-row>
-                <span class="datetime-header">{{$t('config.assetMeta.interval')}}: </span>
+                <span class="datetime-header">{{$t('config.assetLabel.interval')}}: </span>
                 <el-switch
                   v-model="editAssetMeta.param.interval"
                   @change="$forceUpdate"
@@ -128,7 +132,7 @@
 
             <div v-if="editAssetMeta.type==='double'">
               <el-row>
-                <span class="datetime-header">{{$t('config.assetMeta.decimals')}}: </span>
+                <span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
                 <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
               </el-row>
             </div>
@@ -138,7 +142,7 @@
             <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 :label='$t("config.assetLabel.example")'>
             <assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
           </el-form-item>
 
@@ -164,9 +168,9 @@
 <script>
 import assetTagEx from '../../page/asset/components/assetTagEx'
 export default {
-  name: 'assetMetaBox',
+  name: 'assetLabelBox',
   props: {
-    assetMeta: {}
+    assetLabel: {}
   },
   components: { assetTagEx },
   data () {
@@ -195,53 +199,74 @@ export default {
         groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
         type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
       },
+      value:'',
       typeData: [
         {
+          icon: 'nz-icon nz-icon-text',
+          disabled:true,
           value: 'text',
-          name: this.$t('config.assetMeta.text')
+          name: this.$t('config.assetLabel.text')
         },
         {
+          icon: 'nz-icon nz-icon-multitext',
+          disabled:true,
           value: 'multitext',
-          name: this.$t('config.assetMeta.multitext')
+          name: this.$t('config.assetLabel.multitext')
         },
         {
+          icon: 'nz-icon nz-icon-textarea',
+          disabled:true,
           value: 'textarea',
-          name: this.$t('config.assetMeta.textarea')
+          name: this.$t('config.assetLabel.textarea')
         },
         {
+          icon: 'nz-icon nz-icon-radio',
+          disabled:true,
           value: 'radio',
-          name: this.$t('config.assetMeta.radio')
+          name: this.$t('config.assetLabel.radio')
         },
         {
+          icon: 'nz-icon nz-icon-checkbox',
+          disabled:true,
           value: 'checkbox',
-          name: this.$t('config.assetMeta.checkbox')
+          name: this.$t('config.assetLabel.checkbox')
         },
         {
+          icon: 'nz-icon nz-icon-xialaxuanze',
+          disabled:true,
           value: 'select',
-          name: this.$t('config.assetMeta.select')
+          name: this.$t('config.assetLabel.select')
         },
         {
+          icon: 'nz-icon nz-icon-integer',
+          disabled:true,
           value: 'integer',
-          name: this.$t('config.assetMeta.integer')
+          name: this.$t('config.assetLabel.integer')
         },
         {
+          icon: 'nz-icon nz-icon-double',
+          disabled:true,
           value: 'double',
-          name: this.$t('config.assetMeta.double')
+          name: this.$t('config.assetLabel.double')
         },
         {
+          icon: 'nz-icon nz-icon-double',
+          disabled:true,
           value: 'datetime',
-          name: this.$t('config.assetMeta.datetime')
+          name: this.$t('config.assetLabel.datetime')
         },
         {
+          icon: 'nz-icon nz-icon-double',
+          disabled:true,
           value: 'email',
-          name: this.$t('config.assetMeta.email')
+          name: this.$t('config.assetLabel.email')
         }
       ],
       showParam: false
     }
   },
   watch: {
-    assetMeta: {
+    assetLabel: {
       immediate: true,
       handler (n) {
         this.editAssetMeta = { ...n }
@@ -251,8 +276,24 @@ export default {
   },
   mounted () {
     this.getGroupData()
+    this.switchSearch()
   },
   methods: {
+    switchSearch(value){
+      this.typeData.forEach(element => {
+          if( value === 0 ) {
+            element.disabled = false
+          }else {
+            if(element.value == 'radio'){
+              element.disabled = false
+            }else if(element.value == 'checkbox'){
+              element.disabled = false
+            }else if(element.value == 'select'){
+              element.disabled = false
+            }
+          }
+      })    
+    },
     clickOutside () {
       this.esc(false)
     },
@@ -273,7 +314,7 @@ export default {
             for (let i = 0; i < param.param.items.length; i++) {
               if (!param.param.items[i].name) {
                 this.$refs['metaNameOption' + i][0].focus()
-                this.$message.error(this.$t('config.assetMeta.metaOptionNull'))
+                this.$message.error(this.$t('config.assetLabel.metaOptionNull'))
                 this.prevent_opt.save = false
                 return
               }
@@ -398,7 +439,7 @@ export default {
     },
     addParam () {
       if (this.editAssetMeta.param.items.length >= 20) {
-        this.$message.error(this.$t('config.assetMeta.moreOptionsError'))
+        this.$message.error(this.$t('config.assetLabel.moreOptionsError'))
         return
       }
       this.editAssetMeta.param.items.push({
@@ -409,7 +450,7 @@ export default {
     },
     deleteParam (index) {
       if (this.editAssetMeta.param.items.length === 1) {
-        this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
+        this.$message.error(this.$t('config.assetLabel.onlyOptionError'))
         return
       }
       this.editAssetMeta.param.items.splice(index, 1)

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

@@ -1,234 +0,0 @@
-<template>
-  <div class="right-box right-box-asset-type" v-clickoutside="{obj: editAssetType, 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="asset-type-edit-del"
-              type="button" v-has="'assetType_delete'"
-              v-if="editAssetType.buildIn !== 1 && editAssetType.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">{{editAssetType.id ? ($t("config.assetType.editAssetType") + "  ID：" + editAssetType.id) : $t("config.assetType.createAssetType")}}</div>
-    <!-- end--标题-->
-
-    <!-- begin--表单-->
-    <div class="right-box-form-box">
-      <el-form :model="editAssetType" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px" ref="assetTypeForm">
-        <!--name-->
-        <el-form-item :label="$t('overall.name')" prop="name">
-          <el-input id="asset-type-input-name" placeholder="" size="small" type="text" v-model="editAssetType.name"></el-input>
-        </el-form-item>
-        <!--parent-->
-        <el-form-item :label="$t('config.assetType.parent')" prop="pid">
-          <select-asset-type id="asset-type-parent" :asset-type-data="assetTypeData2" :show-type="showParentAssetType" @selectAssetType="selectParent"
-                              size="small">
-            <template v-slot:trigger>
-              <el-input :clearable="true" :readonly="true" placeholder="" size="small" v-model="showParentAssetType.name">
-                <i @click.stop="clearParent" class="el-icon-circle-close" slot="suffix" style="padding-right: 5px; cursor: pointer;"></i>
-              </el-input>
-            </template>
-          </select-asset-type>
-        </el-form-item>
-        <!--vm-->
-        <el-form-item label="VM">
-          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vm-status"
-                     v-model="editAssetType.vm">
-          </el-switch>
-        </el-form-item>
-        <!--vm host-->
-        <el-form-item label="VM host">
-          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vmh-status"
-                     v-model="editAssetType.vmh">
-          </el-switch>
-        </el-form-item>
-        <!--ssh-->
-        <el-form-item label="SSH">
-          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-ssh-status"
-                     v-model="editAssetType.ssh">
-          </el-switch>
-        </el-form-item>
-        <!--telnet-->
-        <el-form-item label="Telnet">
-          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-telnet-status"
-                     v-model="editAssetType.telnet">
-          </el-switch>
-        </el-form-item>
-        <!--descrption-->
-        <el-form-item :label="$t('overall.remark')" prop="remark">
-          <el-input id="asset-type-input-description" placeholder="" size="small" type="textarea" v-model="editAssetType.remark"></el-input>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- end--表单-->
-    <!--底部按钮-->
-    <div class="right-box-bottom-btns">
-      <button class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-type-esc"
-              v-cancel="{obj:editAssetType, func:esc}">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-              id="asset-type-save"
-      >
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-import selectAssetType from '@/components/common/popBox/selectAssetType'
-export default {
-  name: 'asset-type-right-box',
-  props: {
-    assetType: Object,
-    assetTypeData: Array // 所有数据，用于选择下拉框显示内容
-  },
-  components: {
-    selectAssetType
-  },
-  mounted () {
-    this.assetTypeData2 = [...this.assetTypeData]
-    this.setDisabled(this.assetTypeData2)
-  },
-  data () {
-    return {
-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
-      assetTypeData2: [],
-      editAssetType: {},
-      showParentAssetType: {}
-    }
-  },
-  methods: {
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.$emit('close', refresh)
-    },
-    clickOutside () {
-      this.esc(false)
-    },
-    setDisabled (data, flag) {
-      data.forEach(t => {
-        if (t.id == this.assetType.id || flag) {
-          this.$set(t, 'disabled', true)
-          this.setDisabled(t.children, true)
-        } else {
-          this.$set(t, 'disabled', false)
-          this.setDisabled(t.children)
-        }
-      })
-    },
-    clearParent () {
-      this.showParentAssetType = { name: '', id: '' }
-    },
-    /* 保存 */
-    save () {
-      this.$refs.assetTypeForm.validate((valid) => {
-        if (valid) {
-          this.showParentAssetType.id && (this.editAssetType.pid = this.showParentAssetType.id)
-          if (this.assetType.id) {
-            this.$put('/asset/typeConf', this.editAssetType).then(response => {
-              if (response.code === 200) {
-                this.esc(true)
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          } else {
-            this.$post('/asset/typeConf', this.editAssetType).then(response => {
-              if (response.code === 200) {
-                this.esc(true)
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    selectParent (val) {
-      if (!val) {
-        return false
-      }
-      this.showParentAssetType = val
-    },
-    /* 删除 */
-    del () {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('/asset/typeConf?ids=' + this.editAssetType.id).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.esc(true)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      }).catch(() => {
-      })
-    },
-    findParent (data, pid) {
-      // eslint-disable-next-line no-unreachable-loop
-      for (let i = 0; i < data.length; i++) {
-        return data[i].id == pid ? { ...data[i] } : this.findParent(data[i].children, pid)
-      }
-    }
-  },
-  watch: {
-    assetType: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        if (n) {
-          this.editAssetType = JSON.parse(JSON.stringify(n))
-          if (this.editAssetType.pid != 0) {
-            this.showParentAssetType = this.findParent(this.assetTypeData, this.editAssetType.pid)
-          }
-        }
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-  .right-box-asset-type {
-    .right-box-sub-title {
-      #add-notification {
-        border: none;
-        outline: none;
-        cursor: pointer;
-
-        i {
-          font-size: 17px;
-          background-color: #f6f6f6;
-        }
-      }
-    }
-  }
-
-  .notification-item {
-    .el-select {
-      width: 100px;
-
-    }
-  }
-</style>
-<style scoped>
-  .form-item-title{
-    position: absolute;
-    left: -120px;
-  }
-</style>

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -1,6 +1,6 @@
 <template>
   <el-table
-    id="assetMetaTable"
+    id="assetLabelTable"
     ref="dataTable"
     :data="tableData"
     :height="height"
@@ -37,22 +37,22 @@
           {{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}
         </div>
         <div v-else-if=" item.prop === 'display' ">
-          <el-switch
+          <div v-if="scope.row[item.prop] === 1">Enabled</div>
-            v-model="scope.row[item.prop]"
+          <div v-else-if="scope.row[item.prop] === 0">Disabled</div>
-            :active-value="1"
-            :inactive-value="0"
-            active-color="#ee9d3f"
-            @change="putMeta(scope.row)">
-          </el-switch>
         </div>
         <div v-else-if=" item.prop === 'search' ">
-          <el-switch
+          <div v-if="scope.row[item.prop] === 1">Enabled</div>
-            v-model="scope.row[item.prop]"
+          <div v-else-if="scope.row[item.prop] === 0">Disabled</div>
-            :active-value="1"
+        </div>
-            :inactive-value="0"
+        <div v-else-if=" item.prop === 'type' ">
-            active-color="#ee9d3f"
+          <div v-if="scope.row[item.prop] == 'TEXT'&&'text'"><i class="nz-icon nz-icon-text"></i>TEXT</div>
-            @change="putMeta(scope.row)">
+          <div v-else-if="scope.row[item.prop] == 'multitext'"><i class="nz-icon nz-icon-multitext"></i>MULTITEXT</div>
-          </el-switch>
+          <div v-else-if="scope.row[item.prop] == 'textarea'"><i class="nz-icon nz-icon-textarea"></i>TEXTAREA</div>
+          <div v-else-if="scope.row[item.prop] == 'radio'"><i class="nz-icon nz-icon-radio"></i>RADI0</div>
+          <div v-else-if="scope.row[item.prop] == 'checkbox'"><i class="nz-icon nz-icon-checkbox"></i>CHECKBOX</div>
+          <div v-else-if="scope.row[item.prop] == 'xialaxuanze'"><i class="nz-icon nz-icon-xialaxuanze"></i>SELECT</div>
+          <div v-else-if="scope.row[item.prop] == 'integer'"><i class="nz-icon nz-icon-integer"></i>INTEGER</div>
+          <div v-else-if="scope.row[item.prop] == 'double'"><i class="nz-icon nz-icon-double"></i>DOUBLE</div>
         </div>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
@@ -93,31 +93,32 @@ export default {
           show: true,
           width: 80
         }, {
-          label: this.$t('config.assetMeta.name'),
+          label: this.$t('config.assetLabel.name'),
           prop: 'name',
-          show: true
+          show: true,
+          width: 100
         }, {
-          label: this.$t('config.assetMeta.key'),
+          label: this.$t('config.assetLabel.key'),
           prop: 'metaKey',
           show: true
         }, {
-          label: this.$t('config.assetMeta.group'),
+          label: this.$t('config.assetLabel.group'),
           prop: 'group',
           show: true
         }, {
-          label: this.$t('config.assetMeta.search'),
+          label: this.$t('config.assetLabel.search'),
           prop: 'search',
           show: true
         }, {
-          label: this.$t('config.assetMeta.display'),
+          label: this.$t('config.assetLabel.display'),
           prop: 'display',
           show: true
         }, {
-          label: this.$t('config.assetMeta.type'),
+          label: this.$t('config.assetLabel.type'),
           prop: 'type',
           show: true
         }, {
-          label: this.$t('config.assetMeta.params'),
+          label: this.$t('config.assetLabel.params'),
           prop: 'param',
           show: false
         }
@@ -125,18 +126,7 @@ export default {
     }
   },
   methods: {
-    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.getTableData()
-      })
-    }
   }
 }
 </script>

nezha-fronted/src/components/common/table/settings/assetTypeTable.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-table
+    id="assetTypeTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      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}`"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <div v-if=" item.prop === 'vm' ">
+          <div v-if="scope.row[item.prop] === 1">YES</div>
+          <div v-else-if="scope.row[item.prop] === 0">NO</div>
+        </div>
+        <div v-else-if=" item.prop === 'vmh' ">
+          <div v-if="scope.row[item.prop] === 1">YES</div>
+          <div v-else-if="scope.row[item.prop] === 0">NO</div>
+        </div>
+        <div v-else-if=" item.prop === 'authProtocol' ">
+          <div v-if="scope.row[item.prop] === 1">SSH</div>
+          <div v-else-if="scope.row[item.prop] === 0">无</div>
+          <div v-else-if="scope.row[item.prop] === 2">telnet</div>
+        </div>
+        <div v-else-if=" item.prop === 'snmpEnable' ">
+          <div v-if="scope.row[item.prop] === 1">Enabled</div>
+          <div v-else-if="scope.row[item.prop] === 0">Disabled</div>
+        </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
+      :resizable="false"
+      :width="operationWidth"
+      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" @click="showBottomBox('operationLogTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'asstTypeTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.assetType.name'),
+          prop: 'name',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('config.assetType.vm'),
+          prop: 'vm',
+          show: true,
+        }, {
+          label: this.$t('config.assetType.vmh'),
+          prop: 'vmh',
+          show: true
+        },{
+          label: this.$t('config.assetType.authProtocol'),
+          prop: 'authProtocol',
+          show: true,
+        },{
+          label: this.$t('config.assetType.snmpEnable'),
+          prop: 'snmpEnable',
+          show: true,
+        }
+      ]
+    }
+  },
+  methods: {
+   
+    
+  },
+  computed: {
+    
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/modelTable.vue

@@ -43,16 +43,6 @@
          <template v-else-if="item.prop === 'brand'">
              {{scope.row.brand.name}}
          </template>
-        <template v-else-if="item.prop === 'status'">
-          <el-switch
-            v-model="scope.row.status"
-            :active-color="theme.themeColor"
-            :disabled="isCurrentUser(scope.row.username) || !hasButton('user_edit') || (scope.row.username === 'admin' && scope.row.id === 1)"
-            active-value="1"
-            inactive-value="0"
-            @change="val => {statusChange(scope.row)}">
-          </el-switch>
-        </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
@@ -115,27 +105,11 @@ export default {
     }
   },
   methods: {
-    statusChange (user) {
+   
-      if (user.roles) {
+    
-        user.roleIds = user.roles.map(t => t.id)
-      }
-      this.$put(this.url, user).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.$emit('reload')
-      })
-    }
   },
   computed: {
-    isCurrentUser () {
+    
-      return function (username) {
-        return localStorage.getItem('nz-username') === username
-      }
-    }
   }
 }
 </script>

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

@@ -94,7 +94,7 @@ export default {
         groupShow: false
       },
       groupData: [{
-        name: this.$t('config.assetMeta.all'),
+        name: this.$t('config.assetLabel.all'),
         id: -1,
         children: []
       }],
@@ -114,7 +114,7 @@ export default {
             disabled: false
           }, {
             id: 12,
-            name: this.$t('config.assetMeta.name'),
+            name: this.$t('config.assetLabel.name'),
             type: 'input',
             label: 'name',
             disabled: false
@@ -226,6 +226,7 @@ export default {
     },
     add () {
       this.object = JSON.parse(JSON.stringify(this.blankObject))
+      console.log(this.object);
       this.rightBox.metaShow = true
     },
     edit (row) {

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

@@ -1,192 +1,78 @@
 <template>
-  <div style="height: 100%">
+  <div>
     <nz-data-list
       ref="dataList"
-      :components="['searchInput', 'elementSet']"
+      :api="url"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.assetType"
+      :from="fromRoute.model"
+      :layout="['searchInput', 'elementSet']"
       :search-msg="searchMsg"
-      :table-id="tableId"
+      @search="search"
-      :table-title="tableTitle">
+    >
       <template v-slot:top-tool-right>
-        <button id="assetType-add" v-has="'assetType_toAdd'" :title="$t('overall.createAssetType')" class="top-tool-btn margin-l-20"
+        <button id="account-add" v-has="'user_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="asset-type-list-batch-delete" v-has="'assetType_delete'" :delete-objs="batchDeleteObjs" api="asset/typeConf" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button id="account-list-batch-delete" v-has="'user_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
-      <template v-slot:default="slotProps">
+      <template v-slot="slotProps">
-        <el-table
+        <asset-type-table
-          id="role-list-table"
           ref="dataTable"
-          v-loading="tools.loading"
+          v-loading="slotProps.loading"
-          :data="tableData"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
-          border
+          :table-data="tableData"
-          @header-dragend="dragend"
+          @del="del"
-          @sort-change="tableDataSort"
+          @edit="edit"
-          @selection-change="(selection)=>{batchDeleteObjs=selection}"
+          @orderBy="tableDataSort"
-        >
+          @reload="getTableData"
-          <el-table-column
+          @selectionChange="selectionChange"
-            :resizable="false"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-type-table>
-            align="center"
-            type="selection"
-            width="55">
-          </el-table-column>
-          <el-table-column
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :fixed="item.fixed"
-            :label="item.label"
-            :prop="item.prop"
-            :resizable="true"
-            :sort-orders="['ascending', 'descending']"
-            :width="`${item.width}`"
-            class="data-column"
-          >
-            <template slot="header">
-              <span>
-                <span>{{item.label}}</span>
-                <div class="col-resize-area"></div>
-              </span>
       </template>
-            <template slot-scope="scope" :column="item">
-              <el-switch
-                v-if="item.prop === 'vm'"
-                v-model="scope.row.vm"
-                :active-value="1"
-                :disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
-                :inactive-value="0"
-                active-color="#ee9d3f"
-                @change="(val)=>{statusChange(scope.row)}">
-              </el-switch>
-              <el-switch
-                v-else-if="item.prop === 'vmh'"
-                v-model="scope.row.vmh"
-                :active-value="1"
-                :disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
-                :inactive-value="0"
-                active-color="#ee9d3f"
-                @change="(val)=>{statusChange(scope.row)}">
-              </el-switch>
-              <el-switch
-                v-else-if="item.prop === 'ssh'"
-                v-model="scope.row.ssh"
-                :active-value="1"
-                :disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
-                :inactive-value="0"
-                active-color="#ee9d3f"
-                @change="(val)=>{statusChange(scope.row)}">
-              </el-switch>
-              <el-switch
-                v-else-if="item.prop === 'telnet'"
-                v-model="scope.row.telnet"
-                :active-value="1"
-                :disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
-                :inactive-value="0"
-                active-color="#ee9d3f"
-                @change="(val)=>{statusChange(scope.row)}">
-              </el-switch>
-              <span v-else>{{scope.row[item.prop]}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            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" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-              <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-                <div class="table-operation-item table-operation-item--more">
-                  <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="['edit', scope.row]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-                  <el-dropdown-item :command="['delete', scope.row, `asset/typeConf?ids=${scope.row.id}`]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </el-table-column>
-        </el-table>
-        <!-- 回到table顶部的按钮 -->
-        <button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="role-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
-      </template>
-      <!-- 分页组件 -->
       <template v-slot:pagination>
-        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <asset-type-box v-if="rightBox.show" :asset-type="object" :asset-type-data="assetTypeData" @close="closeRightBox"></asset-type-box>
+      <asset-type-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></asset-type-box>
     </transition>
   </div>
 </template>
 <script>
-import assetTypeBox from '@/components/common/rightBox/assetTypeBox'
 import deleteButton from '@/components/common/deleteButton'
+import assetTypeBox from '@/components/common/rightBox/administration/assetTypeBox'
 import nzDataList from '@/components/common/table/nzDataList'
-import tableMixin from '@/components/common/mixin/table'
+import dataListMixin from '@/components/common/mixin/dataList'
+import assetTypeTable from '@/components/common/table/settings/assetTypeTable'
 
 export default {
-  name: 'asset-type-list',
+  name: 'assetType',
   components: {
-    deleteButton,
+    nzDataList,
     assetTypeBox,
-    nzDataList
+    deleteButton,
+    assetTypeTable
   },
-  mixins: [tableMixin],
+  mixins: [dataListMixin],
   data () {
     return {
-      assetTypeData: [],
+      url: 'asset/typeConf',
-
-      tableId: 'assetTypeTable', // 需要分页的table的id，用于记录每页数量
       blankObject: { // 空白对象
-        id: '', pid: '', pname: '', name: '', vm: 0, vmh: 0, ssh: 0, telnet: 0, buildIn: 0, remark: ''
+        id: '',
+        name: '',
+        vm: '',
+        vmh:'',
+        authProtocol:'',
+        snmpEnable:''
       },
-      tableTitle: [ // 原table列
+      tableId: 'typeConfTable',
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 80
-        }, {
-          label: this.$t('overall.name'),
-          prop: 'name',
-          show: true
-        }, {
-          label: this.$t('config.assetType.parent'),
-          prop: 'pname',
-          show: true
-        }, {
-          label: 'VM',
-          prop: 'vm',
-          show: true
-        }, {
-          label: 'VM host',
-          prop: 'vmh',
-          show: true
-        }, {
-          label: 'SSH',
-          prop: 'ssh',
-          show: true
-        }, {
-          label: 'Telnet',
-          prop: 'telnet',
-          show: true
-        }, {
-          label: this.$t('overall.remark'),
-          prop: 'remark',
-          show: true
-        }
-      ],
-      tableData: [],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
           id: 10,
-          name: this.$t('overall.name'),
+          name: this.$t('config.assetType.type'),
           type: 'input',
           label: 'name',
           disabled: false
@@ -195,56 +81,8 @@ export default {
     }
   },
   methods: {
-    getAssetTypeTreeData () {
-      this.$get('/asset/typeConf/tree').then(response => {
-        if (response.code === 200) {
-          this.assetTypeData = response.data.list
-        }
-      })
   },
-    getTableData () {
+  computed: {
-      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
-      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      if (!this.scrollbarWrap) {
-        this.$nextTick(() => {
-          this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
-          this.toTopBtnHandler(this.scrollbarWrap)
-        })
-      }
-      this.tools.loading = true
-      this.$get('/asset/typeConf', this.searchLabel).then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
-          }
-          this.tableData = response.data.list
-          this.pageObj.total = response.data.total
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
-    statusChange (obj) {
-      this.$nextTick(() => {
-        this.$put('/asset/typeConf', obj).then(response => {
-          if (response.code === 200) {
-            this.rightBox.show = false
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-          } else {
-            this.$message.error(response.msg)
-          }
-          this.getTableData()
-        })
-      })
-    }
-  },
-  mounted () {
-    this.getAssetTypeTreeData()
   }
 }
 </script>