Browse Source

文件上传弹出层改造

zhangjie 2 years ago
parent
commit
f6f95bd7ba

+ 1 - 21
src/assets/styles/base.scss

@@ -302,26 +302,6 @@ body {
   }
 }
 
-/* list */
-.list-lr-right {
-  float: right;
-  width: 300px;
-}
-.list-lr-left {
-  margin-right: 320px;
-}
-
-.vlcode {
-  height: 36px;
-}
-.vlcode-left {
-  margin-right: 135px;
-}
-.vlcode-right {
-  float: right;
-  width: 120px;
-}
-
 // color
 .color-primary {
   color: $--color-primary !important;
@@ -426,7 +406,7 @@ body {
   color: $--color-primary;
   cursor: pointer;
   &:hover {
-    color: $--color-success;
+    opacity: 0.8;
   }
 }
 .ml-1 {

+ 18 - 13
src/components/ImportFile.vue

@@ -11,13 +11,10 @@
     @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>
+    <slot></slot>
     <div :class="[`${prefixCls}-body`]">
       <el-upload
         drag
@@ -61,7 +58,7 @@
       <el-button
         type="primary"
         :disabled="loading || !canUpload"
-        @click="startUpload"
+        @click="submit"
         >确认</el-button
       >
       <el-button @click="cancel">取消</el-button>
@@ -85,9 +82,6 @@ export default {
       type: String,
       default: "文件上传"
     },
-    downloadHandle: {
-      type: Function
-    },
     downloadUrl: {
       type: String,
       default: ""
@@ -121,7 +115,11 @@ export default {
       type: Boolean,
       default: true
     },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    beforeSubmitHandle: {
+      type: Function,
+      default: null
+    }
   },
   data() {
     return {
@@ -198,9 +196,6 @@ export default {
 
       return true;
     },
-    startUpload() {
-      this.$refs.UploadComp.submit();
-    },
     upload(options) {
       let formData = new FormData();
       Object.entries(options.data).forEach(([k, v]) => {
@@ -254,6 +249,16 @@ export default {
     },
     open() {
       this.modalIsShow = true;
+    },
+    async submit() {
+      if (this.beforeSubmitHandle) {
+        let handleResult = true;
+        await this.beforeSubmitHandle().catch(() => {
+          handleResult = false;
+        });
+        if (!handleResult) return;
+      }
+      this.$refs.UploadComp.submit();
     }
   }
 };

+ 1 - 1
src/constants/menus-data.js

@@ -745,7 +745,7 @@ export default [
       {
         id: "511",
         name: "学期管理-导入",
-        url: "export",
+        url: "import",
         type: "BUTTON",
         parentId: "510",
         sequence: 1,

+ 48 - 5
src/modules/record/views/ScanTaskManage.vue

@@ -130,12 +130,42 @@
       ref="ImportTask"
       title="导入任务"
       :upload-url="uploadUrl"
+      :upload-data="uploadData"
       :format="['xls', 'xlsx']"
-      :download-url="downloadUrl"
-      :download-filename="dfilename"
       :auto-upload="false"
+      :before-submit-handle="submitImport"
       @upload-success="uploadSuccess"
-    ></import-file>
+    >
+      <el-form
+        ref="modalFormComp"
+        :model="modalForm"
+        :rules="rules"
+        label-width="90px"
+      >
+        <el-form-item label="模板下载:">
+          <a class="cont-link" :href="downloadUrl" :download="dfilename">{{
+            dfilename
+          }}</a>
+        </el-form-item>
+
+        <el-form-item prop="recordId" label="所属档案:">
+          <el-select
+            style="width:100%;"
+            v-model="modalForm.recordId"
+            placeholder="请选择所属档案"
+            filterable
+          >
+            <el-option
+              v-for="item in records"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </import-file>
   </div>
 </template>
 
@@ -158,7 +188,19 @@ export default {
       curRow: {},
       loading: false,
       userId: this.$ls.get("user", { id: "" }).id,
+      records: [],
+      modalForm: { recordId: "" },
+      rules: {
+        recordId: [
+          {
+            required: true,
+            message: "请选择所属档案",
+            trigger: "change"
+          }
+        ]
+      },
       // import
+      uploadData: {},
       uploadUrl: "/api/admin/sys/user/import",
       downloadUrl: "/temps/userTemplate.xlsx",
       dfilename: "扫描任务导入模板.xlsx"
@@ -231,8 +273,9 @@ export default {
       this.deletePageLastItem();
     },
     // import
-    validError(errorData) {
-      this.$message.error(errorData.message);
+    async submitImport() {
+      this.uploadData = { ...this.modalForm };
+      return this.$refs.modalFormComp.validate();
     },
     uploadSuccess() {
       this.getList();