文件上传组件调整

src/assets/styles/common-comp.scss

@@ -352,23 +352,6 @@ $--cc-list-upload-pre: cc-list-upload;
       font-size: 30px;
     }
   }
-
-  // view-ui
-  .ivu-modal-content {
-    background: transparent;
-  }
-  .ivu-modal-header {
-    display: none;
-  }
-  .ivu-modal-body {
-    top: 0;
-  }
-  .ivu-modal-close {
-    display: none;
-  }
-  .ivu-modal-mask {
-    background: rgba(55, 55, 55, 0.8);
-  }
 }
 
 // import-file
@@ -380,10 +363,17 @@ $--cc-list-upload-pre: cc-list-upload;
   &-footer {
     padding: 10px 0;
     font-size: 14px;
-    a:hover {
+    a {
       color: $--color-primary;
+      &:hover {
+        opacity: 0.9;
+      }
     }
   }
+
+  .el-dialog__body {
+    padding-top: 10px;
+  }
 }
 
 // rich-editor

src/assets/styles/element-ui-costom.scss

@@ -207,6 +207,17 @@
 .el-upload-dragger {
   width: 100%;
 }
+.el-upload-dragger {
+  &:hover {
+    border-color: $--color-primary;
+  }
+  .el-icon-upload {
+    color: $--color-primary;
+  }
+  .el-upload__text em {
+    color: $--color-primary;
+  }
+}
 // radio
 .el-radio-button {
   &:not(.is-disabled):hover {

src/components/ImportFile.vue

@@ -1,66 +1,78 @@
 <template>
-  <div :class="prefixCls">
-    <el-dialog
-      class="modify-data"
-      :visible.sync="modalIsShow"
-      :title="title"
-      top="10vh"
-      width="500px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      append-to-body
-      @open="visibleChange"
-    >
-      <div style="footer"></div>
-      <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
-        文件下载：
-        <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
-      </div>
-      <div :class="[`${prefixCls}-footer`]" v-if="downloadHandle">
-        文件下载：
-        <el-button type="text" @click="downloadHandle">{{
-          dfilename
-        }}</el-button>
-      </div>
-      <div :class="[`${prefixCls}-body`]">
-        <el-upload
-          drag
-          :action="uploadUrl"
-          :headers="headers"
-          :max-size="maxSize"
-          :format="format"
-          :accept="accept"
-          :data="uploadDataDict"
-          :before-upload="handleBeforeUpload"
-          :on-error="handleError"
-          :on-success="handleSuccess"
-          :http-request="upload"
-          :disabled="disabled || loading"
-          :show-file-list="false"
-          ref="UploadComp"
+  <el-dialog
+    :class="prefixCls"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
+      文件下载：
+      <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
+    </div>
+    <div :class="[`${prefixCls}-footer`]" v-if="downloadHandle">
+      文件下载：
+      <el-button type="text" @click="downloadHandle">{{ dfilename }}</el-button>
+    </div>
+    <div :class="[`${prefixCls}-body`]">
+      <el-upload
+        drag
+        :action="uploadUrl"
+        :headers="headers"
+        :max-size="maxSize"
+        :format="format"
+        :accept="accept"
+        :data="uploadDataDict"
+        :before-upload="handleBeforeUpload"
+        :on-error="handleError"
+        :on-success="handleSuccess"
+        :http-request="upload"
+        :disabled="disabled || loading"
+        :auto-upload="autoUpload"
+        :show-file-list="true"
+        :file-list="fileList"
+        :on-change="handleFileChange"
+        :on-remove="handleFileRemove"
+        ref="UploadComp"
+      >
+        <i class="el-icon-upload"></i><br />
+        <em class="el-upload__text">将文件拖到此处，或<em>点击上传</em></em>
+        <p
+          slot="tip"
+          :class="[
+            `${prefixCls}-tips`,
+            {
+              'cc-tips-success': res.success,
+              'cc-tips-error': !res.success
+            }
+          ]"
+          v-if="res.message"
         >
-          <i class="el-icon-upload"></i><br />
-          <em class="el-upload__text">将文件拖到此处，或<em>点击上传</em></em>
-          <p
-            slot="tip"
-            :class="[
-              `${prefixCls}-tips`,
-              {
-                'cc-tips-success': res.success,
-                'cc-tips-error': !res.success
-              }
-            ]"
-            v-if="res.msg"
-          >
-            {{ res.msg }}
-          </p>
-        </el-upload>
-      </div>
-    </el-dialog>
-  </div>
+          {{ res.message }}
+        </p>
+      </el-upload>
+    </div>
+
+    <div v-if="!autoUpload" slot="footer">
+      <el-button
+        type="primary"
+        :disabled="loading || !canUpload"
+        @click="startUpload"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
+/**
+ * auto-upload为false时，手动调用ElUpload.Submit时会触发before-upload-handle
+ */
 import { fileMD5 } from "@/plugins/md5";
 import { $post } from "@/plugins/axios";
 
@@ -105,6 +117,10 @@ export default {
       type: String,
       default: "filename"
     },
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
     disabled: { type: Boolean, default: false }
   },
   data() {
@@ -114,12 +130,14 @@ export default {
       headers: {
         md5: ""
       },
+      selectFileName: "",
       loading: false,
       uploadDataDict: {},
       res: {
         success: true,
-        msg: ""
-      }
+        message: ""
+      },
+      fileList: []
     };
   },
   computed: {
@@ -128,27 +146,37 @@ export default {
     },
     accept() {
       return this.format.map(el => `.${el}`).join();
+    },
+    canUpload() {
+      return this.fileList.length > 0;
     }
   },
   methods: {
     visibleChange() {
       this.res = {
         success: true,
-        msg: ""
+        message: ""
       };
       this.headers = { md5: "" };
       this.loading = false;
       this.uploadDataDict = {};
+      this.$refs.UploadComp.clearFiles();
     },
     checkFileFormat(fileType) {
       const _file_format = fileType
         .split(".")
         .pop()
-        .toLowerCase();
+        .toLocaleLowerCase();
       return this.format.length
-        ? this.format.some(item => item.toLowerCase() === _file_format)
+        ? this.format.some(item => item.toLocaleLowerCase() === _file_format)
         : true;
     },
+    handleFileChange(file) {
+      this.fileList = [file];
+    },
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList;
+    },
     async handleBeforeUpload(file) {
       this.uploadDataDict = {
         ...this.uploadData
@@ -170,6 +198,9 @@ export default {
 
       return true;
     },
+    startUpload() {
+      this.$refs.UploadComp.submit();
+    },
     upload(options) {
       let formData = new FormData();
       Object.entries(options.data).forEach(([k, v]) => {
@@ -184,7 +215,7 @@ export default {
       this.loading = false;
       this.res = {
         success: false,
-        msg: error.message
+        message: error.message
       };
       this.$emit("upload-error", error);
     },
@@ -192,23 +223,30 @@ export default {
       this.loading = false;
       this.res = {
         success: true,
-        msg: "导入成功！"
+        message: "导入成功！"
       };
       this.cancel();
-      this.$emit("upload-success", responseData);
+      this.$emit("upload-success", {
+        data: responseData,
+        filename: this.uploadDataDict[this.addFilenameParam]
+      });
     },
     handleFormatError() {
+      const content = "只支持文件格式为" + this.format.join("/");
       this.res = {
         success: false,
-        msg: "只支持文件格式为" + this.format.join("/")
+        message: content
       };
+      this.$emit("valid-error", this.res);
       this.$refs.UploadComp.clearFiles();
     },
     handleExceededSize() {
       this.res = {
         success: false,
-        msg: "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M"
+        message:
+          "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M"
       };
+      this.$emit("valid-error", this.res);
       this.$refs.UploadComp.clearFiles();
     },
     cancel() {

src/modules/base/views/StudentManage.vue

@@ -51,23 +51,12 @@
           >批量删除</el-button
         >
         <el-button
-          type="success"
-          icon="el-icon-download"
-          v-if="checkPrivilege('button', 'import')"
-          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
-        >
-        <upload-button
           v-if="checkPrivilege('button', 'import')"
-          btn-icon="el-icon-circle-plus-outline"
-          btn-content="批量导入"
-          btn-type="success"
-          :upload-url="uploadUrl"
-          :format="['xls', 'xlsx']"
-          accept=".xls,.xlsx"
-          @valid-error="validError"
-          @upload-success="uploadSuccess"
+          type="success"
+          icon="el-icon-upload"
+          @click="toImportStudent"
+          >导入学生</el-button
         >
-        </upload-button>
         <el-button
           v-if="checkPrivilege('button', 'add')"
           type="primary"
@@ -137,17 +126,29 @@
       @modified="getList"
       ref="ModifyStudent"
     ></modify-student>
+    <!-- ImportFile -->
+    <import-file
+      v-if="checkPrivilege('button', 'import')"
+      ref="ImportFile"
+      title="导入学生"
+      :upload-url="uploadUrl"
+      :format="['xls', 'xlsx']"
+      :download-url="downloadUrl"
+      :download-filename="dfilename"
+      :auto-upload="false"
+      @upload-success="uploadSuccess"
+    ></import-file>
   </div>
 </template>
 
 <script>
 import { studentListQuery, deleteStudent, deleteFilterStudent } from "../api";
 import ModifyStudent from "../components/ModifyStudent";
-import UploadButton from "../../../components/UploadButton";
+import ImportFile from "../../../components/ImportFile.vue";
 
 export default {
   name: "student-manage",
-  components: { ModifyStudent, UploadButton },
+  components: { ModifyStudent, ImportFile },
   data() {
     return {
       filter: {
@@ -196,6 +197,9 @@ export default {
       this.current = page;
       this.getList();
     },
+    toImportStudent() {
+      this.$refs.ImportFile.open();
+    },
     toAdd() {
       this.curRow = {};
       this.$refs.ModifyStudent.open();
@@ -227,9 +231,6 @@ export default {
         .catch(() => {});
     },
     // import
-    validError(errorData) {
-      this.$message.error(errorData.message);
-    },
     uploadSuccess() {
       this.$message.success("文件上传成功，后台正在导入！");
       this.getList();

src/modules/base/views/UserManage.vue

@@ -32,23 +32,12 @@
           >批量删除</el-button
         >
         <el-button
-          type="success"
-          icon="el-icon-download"
-          v-if="checkPrivilege('button', 'export')"
-          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
-        >
-        <upload-button
           v-if="checkPrivilege('button', 'export')"
-          btn-icon="el-icon-circle-plus-outline"
-          btn-content="导入用户"
-          btn-type="success"
-          :upload-url="uploadUrl"
-          :format="['xls', 'xlsx']"
-          accept=".xls,.xlsx"
-          @valid-error="validError"
-          @upload-success="uploadSuccess"
+          type="success"
+          icon="el-icon-upload"
+          @click="toImportUser"
+          >导入用户</el-button
         >
-        </upload-button>
         <el-button
           v-if="checkPrivilege('button', 'add')"
           type="primary"
@@ -156,6 +145,18 @@
       :roles="roles"
       @modified="getList"
     ></modify-user>
+    <!-- ImportFile -->
+    <import-file
+      v-if="checkPrivilege('button', 'export')"
+      ref="ImportFile"
+      title="导入用户"
+      :upload-url="uploadUrl"
+      :format="['xls', 'xlsx']"
+      :download-url="downloadUrl"
+      :download-filename="dfilename"
+      :auto-upload="false"
+      @upload-success="uploadSuccess"
+    ></import-file>
   </div>
 </template>
 
@@ -168,11 +169,11 @@ import {
   userRoleListPage,
   deleteUser
 } from "../api";
-import UploadButton from "../../../components/UploadButton";
+import ImportFile from "../../../components/ImportFile.vue";
 
 export default {
   name: "user-manage",
-  components: { ModifyUser, UploadButton },
+  components: { ModifyUser, ImportFile },
   data() {
     return {
       filter: {
@@ -258,6 +259,9 @@ export default {
       this.curUser = {};
       this.$refs.ModifyUser.open();
     },
+    toImportUser() {
+      this.$refs.ImportFile.open();
+    },
     async toResetPwd(row) {
       await resetPwd(row.id);
       this.$message.success("密码重置成功！");
@@ -303,10 +307,8 @@ export default {
     //   this.$message.info("您的密码已经变更，请重新登录系统！");
     // },
     // import
-    validError(errorData) {
-      this.$message.error(errorData.message);
-    },
     uploadSuccess() {
+      this.$message.success("导入成功！");
       this.getList();
     }
   }

src/modules/record/views/ScanTaskManage.vue

@@ -32,23 +32,12 @@
           >批量删除</el-button
         >
         <el-button
+          v-if="checkPrivilege('button', 'import')"
           type="success"
-          icon="el-icon-download"
-          v-if="checkPrivilege('button', 'export')"
-          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
+          icon="el-icon-upload"
+          @click="toImportTask"
+          >导入任务</el-button
         >
-        <upload-button
-          v-if="checkPrivilege('button', 'export')"
-          btn-icon="el-icon-circle-plus-outline"
-          btn-content="批量导入"
-          btn-type="success"
-          :upload-url="uploadUrl"
-          :format="['xls', 'xlsx']"
-          accept=".xls,.xlsx"
-          @valid-error="validError"
-          @upload-success="uploadSuccess"
-        >
-        </upload-button>
         <el-button
           v-if="checkPrivilege('button', 'add')"
           type="primary"
@@ -135,17 +124,29 @@
       :instance="curRow"
       @modified="getList"
     ></scan-task-bind-user-dialog>
+    <!-- ImportFile -->
+    <import-file
+      v-if="checkPrivilege('button', 'import')"
+      ref="ImportTask"
+      title="导入任务"
+      :upload-url="uploadUrl"
+      :format="['xls', 'xlsx']"
+      :download-url="downloadUrl"
+      :download-filename="dfilename"
+      :auto-upload="false"
+      @upload-success="uploadSuccess"
+    ></import-file>
   </div>
 </template>
 
 <script>
 import { scanTaskListPage, deleteScanTask } from "../api";
-import UploadButton from "../../../components/UploadButton";
+import ImportFile from "../../../components/ImportFile.vue";
 import ScanTaskBindUserDialog from "../components/ScanTaskBindUserDialog.vue";
 
 export default {
   name: "user-manage",
-  components: { ScanTaskBindUserDialog, UploadButton },
+  components: { ScanTaskBindUserDialog, ImportFile },
   data() {
     return {
       filter: {},
@@ -160,7 +161,7 @@ export default {
       // import
       uploadUrl: "/api/admin/sys/user/import",
       downloadUrl: "/temps/userTemplate.xlsx",
-      dfilename: "用户导入模板.xlsx"
+      dfilename: "扫描任务导入模板.xlsx"
     };
   },
   mounted() {
@@ -197,6 +198,9 @@ export default {
       this.curRow = {};
       this.$refs.ScanTaskBindUserDialog.open();
     },
+    toImportTask() {
+      this.$refs.ImportTask.open();
+    },
     async batchDelete() {
       if (!this.multipleSelection.length) {
         this.$message.error("请选择要删除的数据");