[update]新增AssetSelect组件,有bug,正在修复

src/components/AssetSelect/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-select ref="select" v-model="internalValue" multiple placeholder="请选择资产" @focus="handleFocus" />
+    <el-dialog
+      :title="this.$t('资产列表')"
+      :visible.sync="dialogVisible"
+      width="45%"
+      :before-close="handleClose"
+    >
+      <GenericTreeListPage ref="ListPage" :table-config="tableConfig" :header-actions="headerActions" />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
+import { DetailFormatter } from '@/components/ListTable/formatters'
+export default {
+  componentName: 'AssetSelect',
+  components: { GenericTreeListPage },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      internalValue: [],
+      showValue: [],
+      dialogVisible: false,
+      tableConfig: {
+        url: '/api/v1/assets/assets/',
+        hasTree: true,
+        treeSetting: {
+          showMenu: true,
+          showRefresh: true,
+          showAssets: false,
+          url: '/api/v1/assets/assets/',
+          nodeUrl: '/api/v1/assets/nodes/',
+          // ?assets=0不显示资产. =1显示资产
+          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
+        },
+        columns: [
+          {
+            prop: 'hostname',
+            label: this.$t('assets.hostname'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'AssetDetail'
+          },
+          {
+            prop: 'ip',
+            label: this.$t('assets.ip'),
+            sortable: 'custom'
+          }
+        ]
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: true,
+        hasRightActions: false
+      }
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+    this.$on('SelectionChange', (val) => {
+      // 对象循环
+      this.internalValue = []
+      this.showValue = []
+      for (const key in val) {
+        this.internalValue.push(`${val[key].hostname}(${val[key].ip})`)
+        this.showValue.push(`${val[key].id}`)
+      }
+
+      this.$emit('input', this.showValue)
+    })
+  },
+  methods: {
+    handleFocus() {
+      this.$refs.select.blur()
+      this.dialogVisible = true
+    },
+    handleConfirm() {
+      this.dialogVisible = false
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {
+        })
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+  .el-select{
+    width: 100%;
+  }
+  .page /deep/ .page-heading{
+    display: none;
+  }
+  .el-dialog__wrapper /deep/.el-dialog__body{
+    padding: inherit !important;
+  }
+  .page /deep/ .treebox{
+    height: inherit !important;
+  }
+</style>

src/components/AutoDataForm/index.vue

@@ -131,6 +131,7 @@ export default {
       field = this.generateFieldByName(name, field)
       field = this.generateFieldByOther(field, fieldMeta)
       field = Object.assign(field, this.fieldsMeta[name] || {})
+      console.log(field)
       _.set(field, 'attrs.error', '')
       return field
     },

src/components/ListTable/index.vue

@@ -45,6 +45,7 @@ import AutoDataTable from '../AutoDataTable'
 import Dialog from '../Dialog'
 import TableAction from './TableAction'
 import { createSourceIdCache } from '@/api/common'
+import Emitter from '@/mixins/emitter'
 
 export default {
   name: 'ListTable',
@@ -53,6 +54,7 @@ export default {
     TableAction,
     Dialog
   },
+  mixins: [Emitter],
   props: {
     // 定义 table 的配置
     tableConfig: {
@@ -115,6 +117,10 @@ export default {
     },
     handleSelectionChange(val) {
       this.selectedRows = val
+      var obj = {}
+      val.forEach((item, index) => { obj[index] = item })
+      // 已知Bug，必须避免数组扁平化
+      this.dispatch('AssetSelect', 'SelectionChange', obj)
     },
     reloadTable() {
       this.$refs.dataTable.$refs.dataTable.getList()

src/components/index.js

@@ -14,6 +14,7 @@ export { default as ListTable } from './ListTable'
 export { default as RelationCard } from './RelationCard'
 export { default as ActiveCard } from './ActiveCard'
 export { default as Select2 } from './Select2'
+export { default as AssetSelect } from './AssetSelect'
 export { default as SvgIcon } from './SvgIcon'
 export { default as TreeTable } from './TreeTable'
 

src/mixins/emitter.js

@@ -0,0 +1,36 @@
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    var name = child.$options.componentName
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]))
+    }
+  })
+}
+// 已知Issues
+// https://github.com/ElemeFE/element/issues/17229
+
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root
+      var name = parent.$options.componentName
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+
+        if (parent) {
+          name = parent.$options.componentName
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params)
+    }
+  }
+}

src/router/index.js

@@ -217,10 +217,23 @@ export const constantRoutes = [
         component: () => import('@/views/assets/SystemUserList.vue'),
         meta: { title: 'SystemUserList' }
       },
+      {
+        path: 'labels/create',
+        name: 'LabelCreate',
+        component: () => import('@/views/assets/Label/LabelCreateUpdate.vue'),
+        meta: { title: 'LabelCreate' },
+        hidden: true
+      },
+      {
+        path: 'labels/update/:id',
+        name: 'LabelUpdate',
+        component: () => import('@/views/assets/Label/LabelCreateUpdate.vue'),
+        meta: { title: 'LabelUpdate' }, hidden: true
+      },
       {
         path: 'labels',
         name: 'LabelList',
-        component: () => import('@/views/assets//LabelList.vue'),
+        component: () => import('@/views/assets/Label/LabelList.vue'),
         meta: { title: 'LabelList' }
       },
       {

src/views/assets/Domain/DomainCreateUpdate.vue

@@ -5,7 +5,7 @@
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
 export default {
-  name: 'GatewayCreate',
+  name: 'GatewayCreateUpdate',
   components: {
     GenericCreateUpdatePage
   },

src/views/assets/Label/LabelCreateUpdate.vue

@@ -0,0 +1,39 @@
+<template>
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
+</template>
+
+<script>
+import { AssetSelect } from '@/components'
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+export default {
+  name: 'LabelCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      initial: {
+
+      },
+      fields: [
+        ['', ['name', 'value', 'assets']]
+      ],
+      fieldsMeta: {
+        assets: {
+          type: 'assetSelect',
+          component: AssetSelect,
+          label: '资产',
+          rules: [{
+            required: false
+          }]
+        }
+      },
+      url: '/api/v1/assets/labels/'
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>