导入用户

magic-boot-ui/src/assets/css/common.css

@@ -53,7 +53,7 @@ body{
   margin-bottom: 10px
 }
 .toolbar-container > div{
-  margin-left: 10px;
+  margin-left: 12px;
 }
 .toolbar-container > div:nth-child(1){
   margin-left: 0px;

magic-boot-ui/src/components/magic/form/mb-upload-file.vue

@@ -2,7 +2,8 @@
   <el-upload
     :id="uploadDomId"
     class="upload-demo"
-    :action="action"
+    ref="uploadRef"
+    :action="actionUrl"
     :headers="headers"
     :on-preview="handlePreview"
     :on-remove="handleRemove"
@@ -11,11 +12,12 @@
     :limit="limit"
     :on-exceed="handleExceed"
     :file-list="fileList"
+    :show-file-list="showFileList"
     :before-upload="beforeAvatarUpload"
     :on-success="handleAvatarSuccess"
   >
-    <el-button size="small" type="primary" :disabled="!multiple && fileList.length == 1">点击上传</el-button>
-    <div slot="tip" class="el-upload__tip">支持上传{{ getSettingSuffixs().replaceAll(',', '，') }}文件，且不超过{{ maxFileSize }}MB</div>
+    <el-button type="primary" :loading="uploadLoading" :disabled="!multiple && fileList.length == 1">{{ label }}</el-button>
+    <div slot="tip" v-if="showTip" class="el-upload__tip">支持上传{{ getSettingSuffixs().replaceAll(',', '，') }}文件，且不超过{{ maxFileSize }}MB</div>
   </el-upload>
 </template>
 
@@ -59,6 +61,30 @@ export default {
     formats: {
       type: String,
       default: ''
+    },
+    label: {
+      type: String,
+      default: '点击上传'
+    },
+    showTip: {
+      type: Boolean,
+      default: () => true
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    showFileList: {
+      type: Boolean,
+      default: () => true
+    },
+    onSuccess: {
+      type: Function,
+      default: () => {}
+    },
+    showRemoveTip: {
+      type: Boolean,
+      default: () => true
     }
   },
   data() {
@@ -70,13 +96,14 @@ export default {
         video: 'avi,flv,mp4,mpeg,mov'
       },
       imageUrl: '',
-      action: import.meta.env.VITE_APP_BASE_API + '/system/file/upload',
+      actionUrl: import.meta.env.VITE_APP_BASE_API + '/system/file/upload',
       headers: {
         token: getToken()
       },
       urls: [],
       uploadDomId: Math.random(),
-      fileList: []
+      fileList: [],
+      uploadLoading: false
     }
   },
   watch: {
@@ -90,12 +117,18 @@ export default {
         const { data } = res
         this.fileList = data
       })
-      this.action = this.action + `?externalId=${this.externalId}&externalType=${this.externalType}`
+      this.actionUrl = this.actionUrl + `?externalId=${this.externalId}&externalType=${this.externalType}`
     } else {
       this.renderFile()
     }
+    if(this.action){
+      this.actionUrl = import.meta.env.VITE_APP_BASE_API + this.action
+    }
   },
   methods: {
+    handlerRemove(file){
+      this.$refs.uploadRef.handleRemove(file)
+    },
     renderFile() {
       if (this.value instanceof Array && this.value.length > 0) {
         this.fileList = this.value.map(it => {
@@ -146,9 +179,13 @@ export default {
       this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
     },
     beforeRemove(file, fileList) {
+      if(!this.showRemoveTip){
+        return true
+      }
       return this.$confirm(`确定移除 ${file.name}？`)
     },
     handleAvatarSuccess(res, file, fileList) {
+      this.uploadLoading = false
       if (res.data) {
         if (this.multiple) {
           this.urls.push(res.data.url)
@@ -160,6 +197,9 @@ export default {
           this.$emit('change', res.data.url)
         }
       }
+      if(this.onSuccess){
+        this.onSuccess(res, file, fileList)
+      }
     },
     getSettingSuffixs() {
       if (this.formats) {
@@ -172,6 +212,7 @@ export default {
       return suffixs
     },
     beforeAvatarUpload(file, fileList) {
+      this.uploadLoading = true
       var fileName = file.name
       var accepts = this.accept.split(',')
       if (accepts) {

magic-boot-ui/src/views/system/dict/dict-list.vue

@@ -17,7 +17,7 @@
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="字典类型" prop="dictType">
-                <mb-select v-model="temp.dictType" type="dict_type" width="185px" />
+                <mb-select v-model="temp.dictType" type="dict_type" />
               </el-form-item>
             </el-col>
             <el-col :span="12">

magic-boot-ui/src/views/system/menu/menu-form.vue

@@ -32,6 +32,7 @@
         v-model="temp.componentName"
         :disable-branch-nodes="true"
         :show-count="true"
+        placeholder=""
         :options="componentTree"
         :key="temp.componentName"
         style="position: fixed;z-index:999999;width: 850px;"
@@ -120,7 +121,7 @@ const getTemp = () => {
     pid: 0,
     icon: '',
     keepAlive: 0,
-    componentName: ''
+    componentName: null
   }
 }
 

magic-boot-ui/src/views/system/office/office-list.vue

@@ -60,7 +60,7 @@
             </el-col>
           </el-row>
           <el-row :gutter="24">
-            <el-col :span="6">
+            <el-col :span="12">
               <el-form-item label="排序" prop="sort">
                 <el-input-number v-model="temp.sort" controls-position="right" />
               </el-form-item>

magic-boot-ui/src/views/system/user/user-list.vue

@@ -34,15 +34,22 @@
         </template>
       </mb-search>
 
-      <el-row style="margin-bottom: 15px">
+      <el-row class="toolbar-container">
         <el-button v-permission="'user:save'" class="filter-item" type="primary" icon="ElEdit" @click="handleCreate">
           添加
         </el-button>
         <mb-button v-permission="'user:delete'" :el="{ plain: true }" :request-url="'/system/user/delete'" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reloadTable" />
+        <mb-upload-file ref="importUserRef" action="/system/user/import/preview" label="导入用户" :show-tip="false" :show-file-list="false" :show-remove-tip="false" :on-success="importUserSuccess" />
       </el-row>
 
       <mb-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
 
+      <mb-dialog ref="previewUsersDialog" title="预览数据" @confirm-click="importUsers">
+        <template #content>
+          <mb-table v-bind="importUserTableOptions" />
+        </template>
+      </mb-dialog>
+
       <mb-dialog ref="userFormDialog" :title="dialogTitle" @confirm-click="userForm.save($event)" width="670px">
         <template #content>
           <user-form ref="userForm" :key="'userForm'" @reload-table="reloadTable" />
@@ -58,10 +65,50 @@
 <script setup>
 import UserForm from './user-form.vue'
 
-import { ref, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'
+import { ref, reactive, getCurrentInstance, nextTick, watch } from 'vue'
 
 const { proxy } = getCurrentInstance()
+const importUserRef = ref()
+const previewUsersDialog = ref()
+const importUserTableOptions = reactive({
 
+})
+const sourceDatas = ref()
+function importUserSuccess(res, file, fileList){
+  const { datas } = res.data
+  sourceDatas.value = res.data.sourceDatas
+  console.log(JSON.stringify(res.data.sourceDatas))
+  importUserRef.value.handlerRemove(file)
+  if(datas && datas.length){
+    var cols = []
+    for(var key in datas[0]){
+      cols.push({
+        field: key,
+        label: key
+      })
+    }
+    previewUsersDialog.value.show(() => {
+      importUserTableOptions.data = datas
+      importUserTableOptions.cols = cols
+    })
+  }
+}
+function importUsers(){
+  proxy.$postJson('/system/user/import', {
+    datas: sourceDatas.value
+  }).then(res => {
+    if(res.data){
+      proxy.$notify({
+        title: '成功',
+        message: '导入成功',
+        type: 'success',
+        duration: 2000
+      })
+      previewUsersDialog.value.hide()
+      table.value.reload()
+    }
+  })
+}
 const tableOptions = reactive({
   url: '/system/user/list',
   page: true,