NEZ-3052 fix：software type 列表编辑页面（60%）

2023-08-15 11:15:43 +08:00
parent f71d00db0a
commit cb3b2af593
9 changed files with 699 additions and 134 deletions
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -130,6 +130,7 @@
@import './page/tool/ping.scss';
@import './page/tool/trace.scss';
@import './page/integration/integration.scss';
+@import './page/softwareType/softwareType.scss';

@import './common/v-selectpagenew/selectpage.scss';
@import './common/selectTable.scss';
--- a/nezha-fronted/src/assets/css/components/page/softwareType/softwareType.scss
+++ b/nezha-fronted/src/assets/css/components/page/softwareType/softwareType.scss
@@ -0,0 +1,6 @@
+.right-box-editSoftwareType {
+  .el-dropdown-link {
+    border: 1px solid $--border-color-light;
+    border-radius: 2px;
+  }
+}
--- a/nezha-fronted/src/components/common/js/iconList.js
+++ b/nezha-fronted/src/components/common/js/iconList.js
@@ -0,0 +1,134 @@
+const iconList = [
+  {
+    value: undefined
+  }, {
+    value: 'nz-icon nz-icon-Router'
+  }, {
+    value: 'nz-icon nz-icon-Computer'
+  }, {
+    value: 'nz-icon nz-icon-a-Networkdevices'
+  }, {
+    value: 'nz-icon nz-icon-Other'
+  }, {
+    value: 'nz-icon nz-icon-a-Virtualmachine'
+  }, {
+    value: 'nz-icon nz-icon-Switch'
+  }, {
+    value: 'nz-icon nz-icon-Server'
+  }, {
+    value: 'nz-icon nz-icon-ADC'
+  }, {
+    value: 'nz-icon nz-icon-Firewall'
+  }, {
+    value: 'nz-icon nz-icon-guide'
+  }, {
+    value: 'nz-icon nz-icon-Silence'
+  }, {
+    value: 'nz-icon nz-icon-fast-silence'
+  }, {
+    value: 'nz-icon nz-icon-mute'
+  }, {
+    value: 'nz-icon nz-icon-overview-alert'
+  }, {
+    value: 'nz-icon nz-icon-overview-endpoint'
+  }, {
+    value: 'nz-icon nz-icon-Alertrule'
+  }, {
+    value: 'nz-icon nz-icon-import-success1'
+  }, {
+    value: 'nz-icon nz-icon-import-failed1'
+  }, {
+    value: 'nz-icon nz-icon-stop'
+  }, {
+    value: 'nz-icon nz-icon-failed'
+  }, {
+    value: 'nz-icon nz-icon-unknown-error'
+  }, {
+    value: 'nz-icon nz-icon-role1'
+  }, {
+    value: 'nz-icon nz-icon-Cabinet1'
+  }, {
+    value: 'nz-icon nz-icon-user1'
+  }, {
+    value: 'nz-icon nz-icon-Datacenter2'
+  }, {
+    value: 'nz-icon nz-icon-overview-project'
+  }, {
+    value: 'nz-icon nz-icon-project'
+  }, {
+    value: 'nz-icon nz-icon-overview-module'
+  }, {
+    value: 'el-icon-share'
+  }, {
+    value: 'el-icon-d-caret'
+  }, {
+    value: 'el-icon-caret-left'
+  }, {
+    value: 'el-icon-caret-right'
+  }, {
+    value: 'el-icon-caret-bottom'
+  }, {
+    value: 'el-icon-caret-top'
+  }, {
+    value: 'el-icon-bottom-left'
+  }, {
+    value: 'el-icon-bottom-right'
+  }, {
+    value: 'el-icon-back'
+  }, {
+    value: 'el-icon-right'
+  }, {
+    value: 'el-icon-bottom'
+  }, {
+    value: 'el-icon-top'
+  }, {
+    value: 'el-icon-top-left'
+  }, {
+    value: 'el-icon-top-right'
+  }, {
+    value: 'el-icon-arrow-left'
+  }, {
+    value: 'el-icon-arrow-right'
+  }, {
+    value: 'el-icon-arrow-down'
+  }, {
+    value: 'el-icon-arrow-up'
+  }, {
+    value: 'el-icon-d-arrow-left'
+  }, {
+    value: 'el-icon-d-arrow-right'
+  }, {
+    value: 'el-icon-video-pause'
+  }, {
+    value: 'el-icon-video-play'
+  }, {
+    value: 'el-icon-refresh'
+  }, {
+    value: 'el-icon-refresh-right'
+  }, {
+    value: 'el-icon-refresh-left'
+  }, {
+    value: 'el-icon-finished'
+  }, {
+    value: 'el-icon-sort'
+  }, {
+    value: 'el-icon-sort-up'
+  }, {
+    value: 'el-icon-sort-down'
+  }, {
+    value: 'el-icon-rank'
+  }, {
+    value: 'nz-icon nz-icon-zhengfangxing'
+  }, {
+    value: 'nz-icon nz-icon-zhixian'
+  }, {
+    value: 'nz-icon nz-icon-sanjiaoxing'
+  }, {
+    value: 'nz-icon nz-icon-xingxing'
+  }, {
+    value: 'nz-icon nz-icon-duobianxing'
+  }, {
+    value: 'nz-icon nz-icon-circle'
+  }
+]
+export default iconList
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -3,6 +3,7 @@ import { getUUID, resetZIndex } from '@/components/common/js/common'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
 import { isStat } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
+import iconList from '@/components/common/js/iconList'
 const rz = {
  methods: {
    rz (e) {
@@ -79,139 +80,7 @@ export default {
          value: 'regx'
        }
      ],
-      mappingIconList: [
-        {
-          value: undefined
-        }, {
-          value: 'nz-icon nz-icon-Router'
-        }, {
-          value: 'nz-icon nz-icon-Computer'
-        }, {
-          value: 'nz-icon nz-icon-a-Networkdevices'
-        }, {
-          value: 'nz-icon nz-icon-Other'
-        }, {
-          value: 'nz-icon nz-icon-a-Virtualmachine'
-        }, {
-          value: 'nz-icon nz-icon-Switch'
-        }, {
-          value: 'nz-icon nz-icon-Server'
-        }, {
-          value: 'nz-icon nz-icon-ADC'
-        }, {
-          value: 'nz-icon nz-icon-Firewall'
-        }, {
-          value: 'nz-icon nz-icon-guide'
-        }, {
-          value: 'nz-icon nz-icon-Silence'
-        }, {
-          value: 'nz-icon nz-icon-fast-silence'
-        }, {
-          value: 'nz-icon nz-icon-mute'
-        }, {
-          value: 'nz-icon nz-icon-overview-alert'
-        }, {
-          value: 'nz-icon nz-icon-overview-endpoint'
-        }, {
-          value: 'nz-icon nz-icon-Alertrule'
-        }, {
-          value: 'nz-icon nz-icon-import-success1'
-        }, {
-          value: 'nz-icon nz-icon-import-failed1'
-        }, {
-          value: 'nz-icon nz-icon-stop'
-        }, {
-          value: 'nz-icon nz-icon-failed'
-        }, {
-          value: 'nz-icon nz-icon-unknown-error'
-        }, {
-          value: 'nz-icon nz-icon-role1'
-        }, {
-          value: 'nz-icon nz-icon-Cabinet1'
-        }, {
-          value: 'nz-icon nz-icon-user1'
-        }, {
-          value: 'nz-icon nz-icon-Datacenter2'
-        }, {
-          value: 'nz-icon nz-icon-overview-project'
-        }, {
-          value: 'nz-icon nz-icon-project'
-        }, {
-          value: 'nz-icon nz-icon-overview-module'
-        }, {
-          value: 'el-icon-share'
-        }, {
-          value: 'el-icon-d-caret'
-        }, {
-          value: 'el-icon-caret-left'
-        }, {
-          value: 'el-icon-caret-right'
-        }, {
-          value: 'el-icon-caret-bottom'
-        }, {
-          value: 'el-icon-caret-top'
-        }, {
-          value: 'el-icon-bottom-left'
-        }, {
-          value: 'el-icon-bottom-right'
-        }, {
-          value: 'el-icon-back'
-        }, {
-          value: 'el-icon-right'
-        }, {
-          value: 'el-icon-bottom'
-        }, {
-          value: 'el-icon-top'
-        }, {
-          value: 'el-icon-top-left'
-        }, {
-          value: 'el-icon-top-right'
-        }, {
-          value: 'el-icon-arrow-left'
-        }, {
-          value: 'el-icon-arrow-right'
-        }, {
-          value: 'el-icon-arrow-down'
-        }, {
-          value: 'el-icon-arrow-up'
-        }, {
-          value: 'el-icon-d-arrow-left'
-        }, {
-          value: 'el-icon-d-arrow-right'
-        }, {
-          value: 'el-icon-video-pause'
-        }, {
-          value: 'el-icon-video-play'
-        }, {
-          value: 'el-icon-refresh'
-        }, {
-          value: 'el-icon-refresh-right'
-        }, {
-          value: 'el-icon-refresh-left'
-        }, {
-          value: 'el-icon-finished'
-        }, {
-          value: 'el-icon-sort'
-        }, {
-          value: 'el-icon-sort-up'
-        }, {
-          value: 'el-icon-sort-down'
-        }, {
-          value: 'el-icon-rank'
-        }, {
-          value: 'nz-icon nz-icon-zhengfangxing'
-        }, {
-          value: 'nz-icon nz-icon-zhixian'
-        }, {
-          value: 'nz-icon nz-icon-sanjiaoxing'
-        }, {
-          value: 'nz-icon nz-icon-xingxing'
-        }, {
-          value: 'nz-icon nz-icon-duobianxing'
-        }, {
-          value: 'nz-icon nz-icon-circle'
-        }
-      ], // 获取icon列表
+      mappingIconList: iconList, // 获取icon列表
      letter: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N',
--- a/nezha-fronted/src/components/common/rightBox/software/softwareTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/software/softwareTypeBox.vue
@@ -0,0 +1,253 @@
+<template>
+  <div v-clickoutside="{obj: editSoftwareType, func: esc}" class="right-box right-box-editSoftwareType right-box-edit-endpoint ">
+    <div class="right-box__header">
+      <div class="header__title">{{editSoftwareType.id ? $t('Edit SoftwareType') : $t('new SoftwareType')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editSoftwareType, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="modelForm" :model="editSoftwareType" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label="$t('config.model.name')" prop="name">
+            <el-input maxlength="64" show-word-limit v-model="editSoftwareType.name" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--category-->
+          <el-form-item :label="$t('editSoftwareType.category')" prop="category">
+            <el-input maxlength="64" show-word-limit v-model="editSoftwareType.category" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--icon-->
+          <el-form-item :label="$t('config.menus.icon')" prop="icon">
+            <el-dropdown trigger="click" placement="top-start">
+              <div class="el-dropdown-link">
+                <i v-if="editSoftwareType.icon" class="mapping-icon" :class="editSoftwareType.icon"></i>
+                <div v-else class="mapping-iconSelect" :title="$t('tip.add')">
+                  <i class="nz-icon nz-icon-create-square"></i>
+                </div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="mapping-iconPop">
+                <ul class="mapping-iconList">
+                  <li class="mapping-iconItem" :class="{active:editSoftwareType.icon===subItem.value}" v-for="subItem in iconList" @click="iconActive(subItem)" :key="subItem.value">
+                    <i :class="subItem.value"></i>
+                  </li>
+                </ul>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-form-item>
+          <!--params-->
+          <el-form-item :label="$t('config.assetLabel.params')" prop="category">
+            <div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow-x: auto;">
+              <div v-for="(item, index) in editSoftwareType.paramObj" :key="index" class="param-box-row">
+                <el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_][a-zA-Z0-9_]*/, message: $t('overall.ASCIIKey') ,trigger: 'blur'}]">
+                  <el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
+                </el-form-item>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
+                  <vue-tags-input
+                    v-model="item.tags"
+                    :maxlength="32"
+                    :placeholder="$t('overall.addParameter')"
+                    :tags="item.value"
+                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                  />
+                </el-form-item>
+                <span :id="'moduel-remove-param-'+index" class="param-box-row-symbol" @click="removeParam(index)" :title="$t('overall.delete')"><i class="nz-icon nz-icon-shanchu1"></i></span>
+              </div>
+            </div>
+            <div style="text-align: center">
+                  <span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addParam">
+                    <span :title="$t('tip.add')"><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
+                  </span>
+            </div>
+          </el-form-item>
+          <!--remark-->
+          <el-form-item :label="$t('overall.remark')" prop="remark">
+            <el-input maxlength="256" show-word-limit v-model="editSoftwareType.remark" size="small" :rows="2" type="textarea"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editSoftwareType, 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 { host, port } from '@/components/common/js/validate'
+import selectWalk from '../../popBox/selectWalk'
+import editRigthBox from '../../mixin/editRigthBox'
+import { sysObjectIdInput } from '@/components/common/js/validate'
+import iconList from '@/components/common/js/iconList'
+import VueTagsInput from '@johmun/vue-tags-input'
+import bus from '@/libs/bus'
+
+export default {
+  name: 'modelBox',
+  components: {
+    'select-walk': selectWalk,
+    VueTagsInput
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    },
+    language () { return this.$store.getters.getLanguage }
+  },
+  mixins: [editRigthBox],
+  data () {
+    return {
+      iconList: iconList,
+      editSoftwareType: {
+        id: '',
+        name: '',
+        category: '',
+        icon: undefined,
+        params: {
+        },
+        paramObj: [],
+        remark: ''
+      },
+      brandList: [], // brand 列表数据
+      editModule: {},
+      typeDataList: [],
+      // chartlList: [], // chart 列表数据
+      dashboardList: [], // dashboard 列表数据
+      // ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
+      //   { title: 'ID', data: 'id' },
+      //   { title: this.$t('overall.name'), data: 'name', key: 'name' },
+      //   { title: this.$t('overall.type'), data: 'type', key: 'type' },
+      //   { title: this.$t('overall.remark'), data: 'remark', key: 'remark' }
+      // ],
+      DashboardSearchShowFields: [ // DashboardSearch 下拉搜索表头
+        { title: 'ID', data: 'id' },
+        { title: this.$t('overall.name'), data: 'name', key: 'name' },
+        { title: this.$t('overall.remark'), data: 'remark', key: 'remark' }
+      ],
+      url: 'asset/model',
+      brandUrl: 'asset/brand',
+      rightBox: { model: { show: false } },
+      roles: [],
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        brandId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        typeId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        sysObjectId: [
+          { validator: sysObjectIdInput, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.isEdit = true
+        const editSoftwareType = JSON.parse(JSON.stringify(n))
+        editSoftwareType.paramObj = []
+        if (editSoftwareType.params) {
+          Object.keys(editSoftwareType.params).forEach(key => {
+            editSoftwareType.paramObj.push({
+              key,
+              value: editSoftwareType.params[key]
+            })
+          })
+        }
+        if (!editSoftwareType.paramObj.length) {
+          editSoftwareType.paramObj.push({ key: '', value: [] })
+        }
+        this.editSoftwareType = editSoftwareType
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    iconActive (subItem) {
+      console.log(subItem, this.editSoftwareType.icon)
+      if (this.editSoftwareType.icon === subItem.value) {
+        this.editSoftwareType.icon = undefined
+        this.$set(this.editSoftwareType, 'icon', '')
+      } else {
+        this.editSoftwareType.icon = subItem.value
+        this.$set(this.editSoftwareType, 'icon', subItem.value)
+      }
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.$refs.modelForm.validate((valid) => {
+        if (valid) {
+          const params = {
+            ...this.editSoftwareType
+          }
+          if (this.editSoftwareType.id) {
+            this.$put(this.url, params).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, params).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
+        }
+      })
+    },
+    tagsChange (newTags, index) {
+      this.editSoftwareType.paramObj[index].value = newTags.map(item => item.text)
+    },
+    // 新增param
+    addParam () {
+      this.editSoftwareType.paramObj.push({ key: '', value: [] })
+    },
+    // 移除单个param
+    removeParam (index) {
+      if (this.editSoftwareType.paramObj.length === 1) {
+        this.editSoftwareType.paramObj = [{ key: '', value: [] }]
+      }
+      this.editSoftwareType.paramObj.splice(index, 1)
+    }
+  }
+}
+</script>
--- a/nezha-fronted/src/components/common/table/settings/softwareTypeTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/softwareTypeTable.vue
@@ -0,0 +1,160 @@
+<template>
+  <el-table
+    id="softwareTypeTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    :default-sort="orderBy"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{}"
+  >
+    <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}-${item.prop}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'roles'">
+          <template v-if="scope.row[item.prop]">
+            {{scope.row[item.prop].map(t=>t.name).join(',')}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'name'">
+          <copy :copyData='scope.row[item.prop]' :showInfo='scope.row[item.prop]'>
+                  <template slot="copy-text">
+                     {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                  </template>
+          </copy>
+          </template>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
+        <span v-else>-</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" v-has="'model_edit'" @click="$emit('edit', scope.row)" :title="$t('overall.edit')"><i class="nz-icon nz-icon-edit"></i></button> -->
+       <button class="table-operation-item" @click="showBottomBox('asset', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" v-has="['model_delete','main_edit','model_edit']" trigger="click" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
+            <i class="nz-icon nz-icon-more3"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'model_edit'" :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 v-has="'model_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'model_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true,from:'model'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'main_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import copy from '@/components/common/copy'
+export default {
+  name: 'softwareTypeTable',
+  mixins: [table],
+  components: { copy },
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.model.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 350,
+          sortable: 'custom'
+        }, {
+          label: this.$t('category'),
+          prop: 'category',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('icon'),
+          prop: 'icon',
+          show: true,
+          width: 120,
+          sortable: 'custom'
+        }, {
+          label: this.$t('params'),
+          prop: 'params',
+          minWidth: 200,
+          show: false
+        }, {
+          label: this.$t('cts'),
+          prop: 'cts',
+          minWidth: 200,
+          show: false
+        }, {
+          label: this.$t('uts'),
+          prop: 'uts',
+          minWidth: 200,
+          show: false
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          minWidth: 200,
+          show: true
+        }
+      ]
+    }
+  },
+  methods: {
+
+  },
+  created () {
+  },
+  computed: {
+
+  }
+}
+</script>
--- a/nezha-fronted/src/components/page/software/softwareType.vue
+++ b/nezha-fronted/src/components/page/software/softwareType.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.model"
+      :layout="['searchInput', 'elementSet', 'pagination']"
+      :search-msg="searchMsg"
+      @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="account-add" v-has="'model_add'" :title="$t('overall.createSoftwareType')" class="top-tool-btn margin-r-10" type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+       <top-tool-more-options
+          :delete-objs="batchDeleteObjs"
+          ref="export"
+          id="model"
+          :params="searchLabel"
+          :permissions="{
+            import: 'model_add',
+            export: 'model_edit'
+          }"
+          class="top-tool-export margin-r-10"
+          export-file-name="asset-model"
+          @afterImport="getTableData"
+          v-has="['model_add','model_edit','model_delete']"
+        >
+          <template v-slot:before>
+            <div>
+              <el-dropdown-item :disabled="batchDeleteObjs.length==0" :class="'nz-el-dropdown-menu-item'">
+                <delete-button
+                  ref="deleteButton"
+                  :single="false"
+                  :from="'model'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="account-list-batch-delete"
+                  v-has="'model_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
+              </el-dropdown-item>
+            </div>
+          </template>
+        </top-tool-more-options>
+      </template>
+      <template v-slot="slotProps">
+        <softwareTypeTable
+
+          ref="dataTable"
+          :orderByFa="orderBy"
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @copy="copy"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></softwareTypeTable>
+      </template>
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <softwareTypeBox v-if="rightBox.show" :obj="object" @close="closeRightBox"></softwareTypeBox>
+    </transition>
+  </div>
+</template>
+<script>
+import deleteButton from '@/components/common/deleteButton'
+import softwareTypeBox from '@/components/common/rightBox/software/softwareTypeBox'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import softwareTypeTable from '@/components/common/table/settings/softwareTypeTable'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+
+export default {
+  name: 'softwareType',
+  components: {
+    nzDataList,
+    softwareTypeBox,
+    deleteButton,
+    softwareTypeTable,
+    topToolMoreOptions
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: '/asset/software/type',
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        category: '',
+        icon: '',
+        params: {
+        },
+        remark: ''
+      },
+      tableId: 'softwareTypeTable',
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [{
+          name: 'ID',
+          type: 'input',
+          label: 'ids',
+          disabled: false
+        }, {
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      }
+    }
+  },
+  created () {
+
+  },
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+  },
+  beforeDestroy () {
+  }
+}
+</script>
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -8,7 +8,7 @@ import VueResource from 'vue-resource'
 import bus from '@/libs/bus'
 Vue.use(VueResource)

-const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance', '/i18n', '/terminal'] // 免登陆白名单
+const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance', '/i18n', '/terminal', '/softwareType'] // 免登陆白名单
 export const permissionWhiteList = ['/profile', '/menu', ...loginWhiteList] // 权限白名单
 router.beforeEach((to, from, next) => {
  if (window.entrance) {
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -231,6 +231,10 @@ export default new Router({
        {
          path: '/integration',
          component: resolve => require(['@/components/page/integration/integration'], resolve)
+        },
+        {
+          path: '/softwareType',
+          component: resolve => require(['@/components/page/software/softwareType'], resolve)
        }
      ]
    },