Merge pull request #93 from jumpserver/dev_bulkUpdate

Dev bulk update

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <Dialog
+    v-if="dialogSetting.dialogVisible"
+    :title="this.$t('common.updateSelected')"
+    :visible.sync="dialogSetting.dialogVisible"
+    width="70%"
+    top="1vh"
+    :show-cancel="false"
+    :show-confirm="false"
+  >
+    <GenericCreateUpdateForm
+      v-bind="iFormSetting"
+    />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import { GenericCreateUpdateForm } from '@/layout/components'
+
+export default {
+  name: 'GenericUpdateFormDialog',
+  components: {
+    Dialog, GenericCreateUpdateForm
+  },
+  props: {
+    selectedRows: {
+      type: Array,
+      default: () => ([])
+    },
+    dialogSetting: {
+      type: Object,
+      default: () => ({})
+    },
+    formSetting: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data: function() {
+    return {
+      iFormSetting: {}
+    }
+  },
+  mounted() {
+    const defaultFormSetting = this.getDefaultFormSetting()
+    this.iFormSetting = Object.assign({}, this.formSetting, defaultFormSetting)
+  },
+  methods: {
+    getDefaultFormSetting() {
+      const vm = this
+      return {
+        getMethod: () => 'post',
+        cleanFormValue: function(value) {
+          const newValue = []
+          let object = {}
+          for (const row of vm.selectedRows) {
+            object = Object.assign({}, value, { id: row.id })
+            newValue.push(object)
+          }
+          return newValue
+        },
+        onSubmit: function(validValues) {
+          const url = this.url
+          const msg = this.updateSuccessMsg
+          this.$axios.patch(url, validValues).then((res) => {
+            this.$message.success(msg)
+            vm.dialogSetting.dialogVisible = false
+          }).catch(error => {
+            this.$emit('submitError', error)
+            const response = error.response
+            const data = response.data
+            if (response.status === 400) {
+              for (const key of Object.keys(data)) {
+                let value = data[key]
+                if (value instanceof Array) {
+                  value = value.join(';')
+                }
+                this.$refs.form.setFieldError(key, value)
+              }
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/layout/components/index.js

@@ -8,3 +8,5 @@ export { default as TabPage } from './TabPage'
 export { default as Footer } from './Footer'
 export { default as GenericListPage } from './GenericListPage'
 export { default as GenericCreateUpdatePage } from './GenericCreateUpdatePage'
+export { default as GenericCreateUpdateForm } from './GenericCreateUpdateForm'
+export { default as GenericUpdateFormDialog } from './GenericUpdateFormDialog'

src/views/assets/Asset/AssetList.vue

@@ -53,6 +53,11 @@
         />
       </Dialog>
     </div>
+    <GenericUpdateFormDialog
+      :selected-rows="updateSelectedDialogSetting.selectedRows"
+      :form-setting="updateSelectedDialogSetting.formSetting"
+      :dialog-setting="updateSelectedDialogSetting.dialogSetting"
+    />
   </div>
 </template>
 
@@ -62,14 +67,17 @@ import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/component
 import $ from '@/utils/jquery-vendor'
 import Dialog from '@/components/Dialog'
 import TreeTable from '@/components/TreeTable'
+import { GenericUpdateFormDialog } from '@/layout/components'
 
 export default {
   components: {
     GenericTreeListPage,
     Dialog,
-    TreeTable
+    TreeTable,
+    GenericUpdateFormDialog
   },
   data() {
+    const vm = this
     return {
       treeSetting: {
         showMenu: true,
@@ -170,6 +178,15 @@ export default {
               })
             }.bind(this)
           },
+          {
+            name: 'updateSelected',
+            title: this.$t('common.updateSelected'),
+            can: ({ selectedRows }) => selectedRows.length > 0,
+            callback: ({ selectedRows, reloadTable }) => {
+              vm.updateSelectedDialogSetting.dialogSetting.dialogVisible = true
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+            }
+          },
           {
             name: 'RemoveFromCurrentNode',
             title: this.$t('assets.RemoveFromCurrentNode'),
@@ -250,6 +267,63 @@ export default {
           hasLeftActions: false,
           hasRightActions: false
         }
+      },
+      updateSelectedDialogSetting: {
+        selectedRows: [],
+        dialogSetting: {
+          dialogVisible: false
+        },
+        formSetting: {
+          url: '/api/v1/assets/assets/',
+          initial: {
+            platform: 'Linux'
+          },
+          fields: [
+            [this.$t('assets.Basic'), ['platform', 'domain']],
+            [this.$t('assets.Auth'), ['admin_user']],
+            [this.$t('assets.Label'), ['labels']],
+            [this.$t('assets.Other'), ['comment']]
+          ],
+          fieldsMeta: {
+            platform: {
+              el: {
+                multiple: false,
+                ajax: {
+                  url: '/api/v1/assets/platforms/',
+                  transformOption: (item) => {
+                    return { label: `${item.name}`, value: item.name }
+                  }
+                }
+              }
+            },
+            domain: {
+              el: {
+                multiple: false,
+                ajax: {
+                  url: '/api/v1/assets/domains/'
+                }
+              }
+            },
+            admin_user: {
+              el: {
+                multiple: false,
+                ajax: {
+                  url: '/api/v1/assets/admin-users/',
+                  transformOption: (item) => {
+                    return { label: `${item.name}(${item.username})`, value: item.id }
+                  }
+                }
+              }
+            },
+            labels: {
+              el: {
+                ajax: {
+                  url: '/api/v1/assets/labels/'
+                }
+              }
+            }
+          }
+        }
       }
     }
   },

src/views/users/User/UserList.vue

@@ -1,14 +1,23 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <div>
+    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    <GenericUpdateFormDialog
+      :selected-rows="updateSelectedDialogSetting.selectedRows"
+      :form-setting="updateSelectedDialogSetting.formSetting"
+      :dialog-setting="updateSelectedDialogSetting.dialogSetting"
+    />
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { GenericListPage } from '@/layout/components'
+import { GenericUpdateFormDialog } from '@/layout/components'
 
 export default {
   components: {
-    GenericListPage
+    GenericListPage,
+    GenericUpdateFormDialog
   },
   data() {
     const vm = this
@@ -82,8 +91,45 @@ export default {
                 reloadTable()
               })
             }
+          },
+          {
+            name: 'updateSelected',
+            title: this.$t('common.updateSelected'),
+            can: ({ selectedRows }) => selectedRows.length > 0,
+            callback: ({ selectedRows, reloadTable }) => {
+              vm.updateSelectedDialogSetting.dialogSetting.dialogVisible = true
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+            }
           }
         ]
+      },
+      updateSelectedDialogSetting: {
+        selectedRows: [],
+        dialogSetting: {
+          dialogVisible: false
+        },
+        formSetting: {
+          initial: {
+            date_expired: '2099-12-31 00:00:00 +0800'
+          },
+          fields: [
+            [this.$t('users.Account'), ['groups']],
+            [this.$t('users.Secure'), ['date_expired']],
+            [this.$t('common.Other'), ['comment']]
+          ],
+          url: '/api/v1/users/users/',
+          fieldsMeta: {
+            groups: {
+              el: {
+                multiple: true,
+                ajax: {
+                  url: '/api/v1/users/groups/'
+                },
+                value: []
+              }
+            }
+          }
+        }
       }
     }
   },