perf: 优化资产列表，拆分大组件

src/components/DataTable/index.vue

@@ -94,9 +94,9 @@ export default {
     tableConfig() {
       const tableDefaultConfig = this.defaultConfig
       tableDefaultConfig.paginationSize = _.get(this.globalTableConfig, 'paginationSize', 15)
-      let tableAttrs = {}
+      let tableAttrs = tableDefaultConfig.tableAttrs
       if (this.config.tableAttrs) {
-        tableAttrs = Object.assign(tableDefaultConfig.tableAttrs, this.config.tableAttrs)
+        tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
       }
       const config = Object.assign(tableDefaultConfig, this.config)
       config.tableAttrs = tableAttrs

src/components/FormFields/Select2.vue

@@ -8,8 +8,8 @@
     :remote="remote"
     :remote-method="filterOptions"
     :multiple="multiple"
-    filterable
     :clearable="clearable"
+    filterable
     popper-append-to-body
     class="select2"
     v-bind="$attrs"
@@ -98,7 +98,6 @@ export default {
     return {
       loading: false,
       initialized: false,
-      iValue: this.multiple ? [] : '',
       defaultParams: _.cloneDeep(defaultParams),
       params: _.cloneDeep(defaultParams),
       iOptions: this.options || [],
@@ -113,6 +112,14 @@ export default {
     optionsValues() {
       return this.iOptions.map((v) => v.value)
     },
+    iValue: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    },
     iAjax() {
       const defaultPageSize = 10
       const defaultMakeParams = (params) => {

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog
     :title="this.$t('common.updateSelected')"
-    :visible.sync="dialogSetting.dialogVisible"
+    :visible.sync="iVisible"
     width="70%"
     top="1vh"
     :show-cancel="false"
@@ -45,13 +45,13 @@ export default {
       type: Array,
       default: () => ([])
     },
-    dialogSetting: {
-      type: Object,
-      default: () => ({})
-    },
     formSetting: {
       type: Object,
       default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
     }
   },
   data: function() {
@@ -62,6 +62,16 @@ export default {
       iFormSetting: {}
     }
   },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  },
   mounted() {
     const defaultFormSetting = this.getDefaultFormSetting()
     this.iFormSetting = Object.assign({}, this.formSetting, defaultFormSetting)
@@ -100,7 +110,7 @@ export default {
           this.$axios.patch(url, validValues).then((res) => {
             vm.$emit('update')
             this.$message.success(msg)
-            vm.dialogSetting.dialogVisible = false
+            this.iVisible = false
           }).catch(error => {
             this.$emit('submitError', error)
             const response = error.response

src/userviews/assets/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { ActionsFormatter, SystemUserFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
+import { SystemUserFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
 export default {
   components: {
     GenericTreeListPage
@@ -99,8 +99,6 @@ export default {
             width: '180px'
           },
           actions: {
-            formatter: ActionsFormatter,
-            label: this.$t('common.action'),
             formatterArgs: {
               hasDelete: false,
               loading: true,

src/views/assets/Asset/AssetBulkUpdateDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <GenericUpdateFormDialog
+    v-if="visible"
+    :selected-rows="selectedRows"
+    :form-setting="formSetting"
+    :visible="visible"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { GenericUpdateFormDialog } from '@/layout/components'
+import Protocols from '@/views/assets/Asset/components/Protocols'
+import rules from '@/components/DataForm/rules'
+export default {
+  name: 'AssetBulkUpdateDialog',
+  components: {
+    GenericUpdateFormDialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    selectedRows: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      formSetting: {
+        url: '/api/v1/assets/assets/',
+        hasSaveContinue: false,
+        initial: {
+          platform: 'Linux',
+          protocols: ['ssh/22']
+        },
+        fields: [
+          'platform', 'protocols', 'domain', 'admin_user', 'labels', 'comment'
+        ],
+        fieldsMeta: {
+          platform: {
+            label: this.$t('assets.Platform'),
+            hidden: () => false,
+            el: {
+              multiple: false,
+              ajax: {
+                url: '/api/v1/assets/platforms/',
+                transformOption: (item) => {
+                  return { label: `${item.name}`, value: item.name }
+                }
+              }
+            }
+          },
+          protocols: {
+            label: this.$t('assets.Protocols'),
+            component: Protocols
+          },
+          domain: {
+            label: this.$t('assets.Domain'),
+            hidden: () => false,
+            el: {
+              multiple: false,
+              ajax: {
+                url: '/api/v1/assets/domains/'
+              }
+            }
+          },
+          admin_user: {
+            rules: [rules.RequiredChange],
+            label: this.$t('assets.AdminUser'),
+            hidden: () => false,
+            el: {
+              multiple: false,
+              ajax: {
+                url: '/api/v1/assets/admin-users/',
+                transformOption: (item) => {
+                  return { label: `${item.name}(${item.username})`, value: item.id }
+                }
+              }
+            }
+          },
+          labels: {
+            label: this.$t('assets.Label'),
+            hidden: () => false,
+            el: {
+              ajax: {
+                url: '/api/v1/assets/labels/'
+              }
+            }
+          },
+          comment: {
+            label: this.$t('common.Comment'),
+            hidden: () => false
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/assets/Asset/AssetList.vue

@@ -38,29 +38,13 @@
         <el-col :span="18"><div class="item-text">{{ item.value }}</div></el-col>
       </el-row>
     </Dialog>
-    <div class="asset-select-dialog">
+    <AssetBulkUpdateDialog
-      <Dialog
+      :visible.sync="updateSelectedDialogSetting.visible"
-        v-if="assetTreeTableDialogSetting.dialogVisible"
+      v-bind="updateSelectedDialogSetting"
-        :title="this.$t('assets.Assets')"
-        :visible.sync="assetTreeTableDialogSetting.dialogVisible"
-        width="70%"
-        top="1vh"
-        @confirm="assetTreeTableDialogHandleConfirm"
-        @cancel="assetTreeTableDialogHandleCancel"
-      >
-        <TreeTable
-          ref="TreeTable"
-          :tree-setting="assetTreeTableDialogSetting.treeSetting"
-          :table-config="assetTreeTableDialogSetting.tableConfig"
-          :header-actions="assetTreeTableDialogSetting.headerActions"
     />
-      </Dialog>
+    <NodeAssetsUpdateDialog
-    </div>
+      :visible.sync="nodeAssetsUpdateDialog.visible"
-    <GenericUpdateFormDialog
+      v-bind="nodeAssetsUpdateDialog"
-      v-if="updateSelectedDialogSetting.dialogSetting.dialogVisible"
-      :selected-rows="updateSelectedDialogSetting.selectedRows"
-      :form-setting="updateSelectedDialogSetting.formSetting"
-      :dialog-setting="updateSelectedDialogSetting.dialogSetting"
     />
   </div>
 </template>
@@ -70,20 +54,18 @@ import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
 import { DetailFormatter, ActionsFormatter } from '@/components/TableFormatters'
 import $ from '@/utils/jquery-vendor'
 import Dialog from '@/components/Dialog'
-import TreeTable from '@/components/TreeTable'
-import { GenericUpdateFormDialog } from '@/layout/components'
-import rules from '@/components/DataForm/rules'
-import Protocols from '@/views/assets/Asset/components/Protocols/index'
 import { mapGetters } from 'vuex'
 import { connectivityMeta } from '@/components/AccountListTable/const'
 import { openTaskPage } from '@/utils/jms'
+import AssetBulkUpdateDialog from './AssetBulkUpdateDialog'
+import NodeAssetsUpdateDialog from './NodeAssetsUpdateDialog'
 
 export default {
   components: {
     GenericTreeListPage,
     Dialog,
-    TreeTable,
+    AssetBulkUpdateDialog,
-    GenericUpdateFormDialog
+    NodeAssetsUpdateDialog
   },
   data() {
     const vm = this
@@ -220,9 +202,9 @@ export default {
             name: 'updateSelected',
             title: this.$t('common.updateSelected'),
             can: ({ selectedRows }) => selectedRows.length > 0 && !this.$store.getters.currentOrgIsRoot,
-            callback: ({ selectedRows, reloadTable }) => {
+            callback: ({ selectedRows }) => {
-              vm.updateSelectedDialogSetting.dialogSetting.dialogVisible = true
               vm.updateSelectedDialogSetting.selectedRows = selectedRows
+              vm.updateSelectedDialogSetting.visible = true
             }
           },
           {
@@ -259,125 +241,14 @@ export default {
         dialogVisible: false,
         items: []
       },
-      assetTreeTableDialogSetting: {
-        dialogVisible: false,
-        assetsSelected: [],
-        action: '',
-        treeSetting: {
-          showMenu: false,
-          showRefresh: true,
-          showAssets: false,
-          url: '/api/v1/assets/assets/?fields_size=mini',
-          nodeUrl: '/api/v1/assets/nodes/',
-          // ?assets=0不显示资产. =1显示资产
-          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
-        },
-        tableConfig: {
-          url: '/api/v1/assets/assets/',
-          hasTree: true,
-          columns: [
-            {
-              prop: 'hostname',
-              label: this.$t('assets.Hostname'),
-              sortable: true,
-              formatter: DetailFormatter,
-              formatterArgs: {
-                route: 'AssetDetail'
-              }
-            },
-            {
-              prop: 'ip',
-              label: this.$t('assets.ip'),
-              sortable: 'custom'
-            }
-          ],
-          listeners: {
-            'toggle-row-selection': (isSelected, row) => {
-              if (isSelected) {
-                this.addRowToAssetsSelected(row)
-              } else {
-                this.removeRowFromAssetsSelected(row)
-              }
-            }
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasRightActions: false
-        }
-      },
       updateSelectedDialogSetting: {
-        selectedRows: [],
+        visible: false,
-        dialogSetting: {
+        selectedRows: []
-          dialogVisible: false
       },
-        formSetting: {
+      nodeAssetsUpdateDialog: {
-          url: '/api/v1/assets/assets/',
+        visible: false,
-          hasSaveContinue: false,
+        action: 'add',
-          initial: {
+        selectNode: null
-            platform: 'Linux',
-            protocols: ['ssh/22']
-          },
-          fields: [
-            'platform', 'protocols', 'domain', 'admin_user', 'labels', 'comment'
-          ],
-          fieldsMeta: {
-            platform: {
-              label: this.$t('assets.Platform'),
-              hidden: () => false,
-              el: {
-                multiple: false,
-                ajax: {
-                  url: '/api/v1/assets/platforms/',
-                  transformOption: (item) => {
-                    return { label: `${item.name}`, value: item.name }
-                  }
-                }
-              }
-            },
-            protocols: {
-              label: this.$t('assets.Protocols'),
-              component: Protocols
-            },
-            domain: {
-              label: this.$t('assets.Domain'),
-              hidden: () => false,
-              el: {
-                multiple: false,
-                ajax: {
-                  url: '/api/v1/assets/domains/'
-                }
-              }
-            },
-            admin_user: {
-              rules: [rules.RequiredChange],
-              label: this.$t('assets.AdminUser'),
-              hidden: () => false,
-              el: {
-                multiple: false,
-                ajax: {
-                  url: '/api/v1/assets/admin-users/',
-                  transformOption: (item) => {
-                    return { label: `${item.name}(${item.username})`, value: item.id }
-                  }
-                }
-              }
-            },
-            labels: {
-              label: this.$t('assets.Label'),
-              hidden: () => false,
-              el: {
-                ajax: {
-                  url: '/api/v1/assets/labels/'
-                }
-              }
-            },
-            comment: {
-              label: this.$t('common.Comment'),
-              hidden: () => false
-            }
-          }
-        }
       }
     }
   },
@@ -405,13 +276,15 @@ export default {
     getSelectedNodes() {
       return this.$refs.TreeList.getSelectedNodes()
     },
-    rMenuAddAssetToNode: function() {
+    rMenuAddAssetToNode() {
-      this.assetTreeTableDialogSetting.dialogVisible = true
+      this.nodeAssetsUpdateDialog.visible = true
-      this.assetTreeTableDialogSetting.action = 'add'
+      this.nodeAssetsUpdateDialog.action = 'add'
+      this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
     },
-    rMenuMoveAssetToNode: function() {
+    rMenuMoveAssetToNode() {
-      this.assetTreeTableDialogSetting.dialogVisible = true
+      this.nodeAssetsUpdateDialog.visible = true
-      this.assetTreeTableDialogSetting.action = 'move'
+      this.nodeAssetsUpdateDialog.action = 'move'
+      this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
     },
     rMenuUpdateNodeAssetHardwareInfo: function() {
       this.hideRMenu()
@@ -493,43 +366,6 @@ export default {
       }).catch(error => {
         this.$message.error(this.$t('common.getErrorMsg' + ' ' + error))
       })
-    },
-    addRowToAssetsSelected(row) {
-      const selectValueIndex = this.assetTreeTableDialogSetting.assetsSelected.indexOf(row.id)
-      if (selectValueIndex === -1) {
-        this.assetTreeTableDialogSetting.assetsSelected.push(row.id)
-      }
-    },
-    removeRowFromAssetsSelected(row) {
-      const selectValueIndex = this.assetTreeTableDialogSetting.assetsSelected.indexOf(row.id)
-      if (selectValueIndex > -1) {
-        this.assetTreeTableDialogSetting.assetsSelected.splice(selectValueIndex, 1)
-      }
-    },
-    assetTreeTableDialogHandleConfirm() {
-      const currentNode = this.getSelectedNodes()[0]
-      const assetsSelected = this.assetTreeTableDialogSetting.assetsSelected
-      if (!currentNode || assetsSelected.length === 0) {
-        return
-      }
-      let url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/add/`
-      if (this.assetTreeTableDialogSetting.action === 'move') {
-        url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/replace/`
-      }
-      this.$axios.put(
-        url, { assets: assetsSelected }
-      ).then(res => {
-        this.assetTreeTableDialogSetting.dialogVisible = false
-        this.assetTreeTableDialogSetting.assetsSelected = []
-        $('#tree-refresh').trigger('click')
-        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).catch(error => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
-      })
-    },
-    assetTreeTableDialogHandleCancel() {
-      this.assetTreeTableDialogSetting.dialogVisible = false
-      this.assetTreeTableDialogSetting.assetsSelected = []
     }
   }
 }

src/views/assets/Asset/NodeAssetsUpdateDialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="asset-select-dialog">
+    <Dialog
+      v-if="iVisible"
+      :title="this.$t('assets.Assets')"
+      :visible.sync="iVisible"
+      width="70%"
+      top="1vh"
+      @confirm="assetTreeTableDialogHandleConfirm"
+      @cancel="assetTreeTableDialogHandleCancel"
+    >
+      <TreeTable
+        ref="TreeTable"
+        :tree-setting="treeSetting"
+        :table-config="tableConfig"
+        :header-actions="headerActions"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import TreeTable from '@/components/TreeTable'
+import { DetailFormatter } from '@/components/TableFormatters'
+import $ from '@/utils/jquery-vendor'
+export default {
+  name: 'NodeAssetsUpdate',
+  components: {
+    Dialog,
+    TreeTable
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    action: {
+      type: String,
+      default: 'add'
+    },
+    selectNode: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      assetsSelected: [],
+      treeSetting: {
+        showMenu: false,
+        showRefresh: true,
+        showAssets: false,
+        url: '/api/v1/assets/assets/?fields_size=mini',
+        nodeUrl: '/api/v1/assets/nodes/',
+        // ?assets=0不显示资产. =1显示资产
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
+      },
+      tableConfig: {
+        url: '/api/v1/assets/assets/',
+        hasTree: true,
+        columns: [
+          {
+            prop: 'hostname',
+            label: this.$t('assets.Hostname'),
+            sortable: true,
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'AssetDetail'
+            }
+          },
+          {
+            prop: 'ip',
+            label: this.$t('assets.ip'),
+            sortable: 'custom'
+          }
+        ],
+        listeners: {
+          'toggle-row-selection': (isSelected, row) => {
+            if (isSelected) {
+              this.addRowToAssetsSelected(row)
+            } else {
+              this.removeRowFromAssetsSelected(row)
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasLeftActions: false,
+        hasRightActions: false
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      set(val) {
+        console.log('set val: ', val)
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  },
+  methods: {
+    addRowToAssetsSelected(row) {
+      const selectValueIndex = this.assetsSelected.indexOf(row.id)
+      if (selectValueIndex === -1) {
+        this.assetsSelected.push(row.id)
+      }
+    },
+    removeRowFromAssetsSelected(row) {
+      const selectValueIndex = this.assetsSelected.indexOf(row.id)
+      if (selectValueIndex > -1) {
+        this.assetsSelected.splice(selectValueIndex, 1)
+      }
+    },
+    assetTreeTableDialogHandleConfirm() {
+      const currentNode = this.selectNode
+      const assetsSelected = this.assetsSelected
+      if (!currentNode || assetsSelected.length === 0) {
+        return
+      }
+      let url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/add/`
+      if (this.action === 'move') {
+        url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/replace/`
+      }
+      this.$axios.put(
+        url, { assets: assetsSelected }
+      ).then(res => {
+        this.dialogVisible = false
+        this.assetsSelected = []
+        $('#tree-refresh').trigger('click')
+        this.$message.success(this.$t('common.updateSuccessMsg'))
+      }).catch(error => {
+        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
+      })
+    },
+    assetTreeTableDialogHandleCancel() {
+      this.dialogVisible = false
+      this.assetsSelected = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/RequestAssetPerm/RequestAssetPermTicketCreateUpdate.vue

@@ -25,7 +25,8 @@ export default {
         meta: {
           apply_date_expired: date_expired,
           apply_date_start: date_start,
-          apply_actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file']
+          apply_actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file'],
+          apply_assets: []
         },
         org_id: '',
         type: 'apply_asset'
@@ -42,6 +43,9 @@ export default {
           }
         },
         meta: {
+          hidden: (form) => {
+            console.log('Form is: ', form)
+          },
           fields: [
             'apply_assets', 'apply_system_users', 'apply_actions',
             'apply_date_start', 'apply_date_expired'
@@ -87,13 +91,15 @@ export default {
           component: Select2,
           el: {
             multiple: false,
-            options: this.$store.state.users.profile.user_all_orgs.map((item) => {
+            options: this.$store.state.users.profile['user_all_orgs'].map((item) => {
               return { label: item.name, value: item.id }
             })
           },
           hidden: (form) => {
-            this.fieldsMeta.meta.fieldsMeta.apply_system_users.el.ajax.url = `/api/v1/assets/system-users/suggestions/?oid=${form['org_id']}&protocol__in=rdp,ssh,vnc,telnet`
+            const fieldsMeta = this.fieldsMeta.meta.fieldsMeta
-            this.fieldsMeta.meta.fieldsMeta.apply_assets.el.ajax.url = `/api/v1/assets/assets/suggestions/?oid=${form['org_id']}`
+            fieldsMeta.apply_system_users.el.ajax.url = `/api/v1/assets/system-users/suggestions/?oid=${form['org_id']}&protocol__in=rdp,ssh,vnc,telnet`
+            fieldsMeta.apply_assets.el.value = []
+            fieldsMeta.apply_assets.el.ajax.url = `/api/v1/assets/assets/suggestions/?oid=${form['org_id']}`
           }
         }
       },
@@ -104,8 +110,8 @@ export default {
     }
   },
   mounted() {
-    if (this.$store.state.users.profile.user_all_orgs.length > 0) {
+    if (this.$store.state.users.profile['user_all_orgs'].length > 0) {
-      this.initial.org_id = this.$store.state.users.profile.user_all_orgs[0].id
+      this.initial.org_id = this.$store.state.users.profile['user_all_orgs'][0].id
     }
     this.loading = false
   },

src/views/users/User/UserList.vue

@@ -8,7 +8,7 @@
     <GenericUpdateFormDialog
       :selected-rows="updateSelectedDialogSetting.selectedRows"
       :form-setting="updateSelectedDialogSetting.formSetting"
-      :dialog-setting="updateSelectedDialogSetting.dialogSetting"
+      :visible.sync="updateSelectedDialogSetting.visible"
       @update="handleDialogUpdate"
     />
     <InviteUsersDialog :setting="InviteDialogSetting" @close="handleInviteDialogClose" />
@@ -166,7 +166,7 @@ export default {
             title: this.$t('common.updateSelected'),
             can: ({ selectedRows }) => selectedRows.length > 0 && !vm.currentOrgIsRoot,
             callback: ({ selectedRows, reloadTable }) => {
-              vm.updateSelectedDialogSetting.dialogSetting.dialogVisible = true
+              vm.updateSelectedDialogSetting.visible = true
               vm.updateSelectedDialogSetting.selectedRows = selectedRows
             }
           }
@@ -174,9 +174,7 @@ export default {
       },
       updateSelectedDialogSetting: {
         selectedRows: [],
-        dialogSetting: {
+        visible: false,
-          dialogVisible: false
-        },
         formSetting: {
           initial: {
             date_expired: getDayFuture(36500, new Date()).toISOString()