[update]完善用户界面

src/components/ListTable/formatters/ConnectFormatter.vue

@@ -0,0 +1,146 @@
+<template>
+  <ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" />
+</template>
+
+<script>
+import ActionsGroup from '@/components/ActionsGroup/index'
+import BaseFormatter from './base'
+
+const defaultPerformDelete = function({ row, col }) {
+  const id = row.id
+  const url = `${this.url}${id}/`
+  return this.$axios.delete(url)
+}
+const defaultUpdateCallback = function({ row, col }) {
+  const id = row.id
+  const routeName = this.colActions.updateRoute
+  this.$router.push({ name: routeName, params: { id: id }})
+}
+
+const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
+  const msg = this.$t('common.deleteWarningMsg') + ' "' + row.name + '"'
+  const title = this.$t('common.Info')
+  const performDelete = this.colActions.performDelete
+  this.$alert(msg, title, {
+    type: 'warning',
+    confirmButtonClass: 'el-button--danger',
+    showCancelButton: true,
+    beforeClose: async(action, instance, done) => {
+      if (action !== 'confirm') return done()
+      instance.confirmButtonLoading = true
+      try {
+        await performDelete.bind(this)({ row: row, col: col })
+        done()
+        reload()
+        this.$message.success(this.$t('common.deleteSuccessMsg'))
+      } catch (error) {
+        this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+      } finally {
+        instance.confirmButtonLoading = false
+      }
+    }
+  }).catch(() => {
+    /* 取消*/
+  })
+}
+
+export default {
+  name: 'ActionsFormatter',
+  components: { ActionsGroup },
+  extends: BaseFormatter,
+  props: {
+    actionsDefault: {
+      type: Object,
+      default: function() {
+        return {
+          hasUpdate: true, // can set function(row, value)
+          canUpdate: true, // can set function(row, value)
+          hasDelete: true, // can set function(row, value)
+          canDelete: true,
+          updateRoute: this.$route.name.replace('List', 'Update'),
+          performDelete: defaultPerformDelete,
+          onUpdate: defaultUpdateCallback,
+          onDelete: defaultDeleteCallback,
+          extraActions: [] // format see defaultActions
+        }
+      }
+    }
+  },
+  data() {
+    const colActions = Object.assign(this.actionsDefault, this.col, this.col.actions)
+    const defaultActions = [
+      {
+        name: 'update',
+        fa: 'fa-terminal',
+        type: 'primary',
+        has: colActions.hasUpdate,
+        can: colActions.canUpdate,
+        callback: colActions.onUpdate
+      },
+      {
+        name: 'delete',
+        type: 'info',
+        fa: 'fa-star-o',
+        has: colActions.hasDelete,
+        can: colActions.canDelete,
+        callback: colActions.onDelete
+      }
+    ]
+    return {
+      colActions: colActions,
+      defaultActions: defaultActions,
+      extraActions: colActions.extraActions
+    }
+  },
+  computed: {
+    cleanedActions() {
+      let actions = [...this.defaultActions, ...this.extraActions]
+      actions = _.cloneDeep(actions)
+      actions = actions.map((v) => {
+        v.has = this.cleanBoolean(v, 'has')
+        v.can = this.cleanBoolean(v, 'can')
+        v.callback = this.cleanCallback(v)
+        return v
+      })
+      actions = actions.filter((v) => v.has)
+      return actions
+    },
+    actions() {
+      if (this.cleanedActions.length <= 3) {
+        return this.cleanedActions
+      }
+      return this.cleanedActions.slice(0, 2)
+    },
+    moreActions() {
+      if (this.cleanedActions.length <= 3) {
+        return []
+      }
+      return this.cleanedActions.slice(2, this.cleanedActions.length)
+    }
+  },
+  methods: {
+    cleanBoolean(item, attr) {
+      const ok = item[attr]
+      if (typeof ok !== 'function') {
+        return ok === undefined ? true : ok
+      }
+      return ok(this.row, this.cellValue)
+    },
+    cleanCallback(item) {
+      const callback = item.callback
+      const attrs = {
+        reload: this.reload,
+        row: this.row,
+        col: this.col,
+        cellValue: this.cellValue,
+        tableData: this.tableData
+      }
+      return () => { return callback.bind(this)(attrs) }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ListTable/formatters/index.js

@@ -11,6 +11,8 @@ import ExpandAssetPermissionFormatter from './ExpandAssetPermissionFormatter'
 import CustomActionsFormatter from './CustomActionsFormatter'
 import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
+import ConnectFormatter from './ConnectFormatter'
+import SystemUserFormatter from './SystemUserFormatter'
 
 export default {
   DetailFormatter,
@@ -25,7 +27,9 @@ export default {
   ExpandAssetPermissionFormatter,
   CustomActionsFormatter,
   DeleteActionFormatter,
-  DateFormatter
+  DateFormatter,
+  ConnectFormatter,
+  SystemUserFormatter
 }
 
 export {
@@ -41,5 +45,7 @@ export {
   ExpandAssetPermissionFormatter,
   CustomActionsFormatter,
   DeleteActionFormatter,
-  DateFormatter
+  DateFormatter,
+  ConnectFormatter,
+  SystemUserFormatter
 }

src/userviews/assets/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter, ConnectFormatter, SystemUserFormatter } from '@/components/ListTable/formatters'
 export default {
   components: {
     GenericTreeListPage
@@ -20,7 +20,13 @@ export default {
         // ?assets=0不显示资产. =1显示资产
         treeUrl: '/api/v1/perms/users/nodes/children/tree/?cache_policy=2',
         callback: {
-          refresh: () => {}
+          refresh: () => {},
+          onSelected: function(event, treeNode) {
+            if (treeNode.meta.type === 'node') {
+              const currentNodeId = treeNode.meta.node.id
+              this.tableConfig.url = `/api/v1/perms/users/nodes/${currentNodeId}/assets/?cache_policy=1`
+            }
+          }.bind(this)
         }
       },
       tableConfig: {
@@ -41,8 +47,9 @@ export default {
             sortable: 'custom'
           },
           {
-            prop: 'hardware_info',
+            prop: 'SystemUsers',
             align: 'center',
+            formatter: SystemUserFormatter,
             label: this.$t('assets.SystemUsers')
           },
           {
@@ -53,14 +60,15 @@ export default {
           {
             prop: 'id',
             align: 'center',
-            formatter: ActionsFormatter,
+            formatter: ConnectFormatter,
             width: '200px',
             label: this.$t('common.action'),
             actions: {
-              performDelete: ({ row, col }) => {
+              onDelete: function({ row, col, cellValue, reload }) {
-                const id = row.id
+                alert('接口错误：获取不到对应的资产状态')
-                const url = `/api/v1/assets/assets/${id}/`
+              },
-                return this.$axios.delete(url)
+              onUpdate: function({ row, col, cellValue, reload }) {
+                window.open(`/luna/?login_to=${cellValue}`, '_blank')
               }
             }
           }