提交

src/views/warehouse/suppliesManage/index.vue

@@ -105,6 +105,20 @@
                     <el-button @click="batchSetDialogVisible = false">取消</el-button>
                 </template>
             </el-dialog>
+            <!-- 上传excel -->
+            <el-dialog :title="dialogFile.title" v-model="dialogFile.visible" width="700px" append-to-body>
+                <el-upload drag :action="uploadFileUrl" :headers="headers" :file-list="fileList" accept=".xlsx,.xls" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError">
+                    <el-icon class="el-icon--upload">
+                        <upload-filled />
+                    </el-icon>
+                    <div class="el-upload__text">
+                        将文件拖到此处，或 <em>点击上传</em>
+                    </div>
+                </el-upload>
+                <div class="el-upload__tip">
+                    请上传 .xls , .xlsx 标准格式文件
+                </div>
+            </el-dialog>
         </el-card>
     </div>
 </template>
@@ -115,6 +129,7 @@
     import { SuppliesManageVO, SuppliesManageQuery } from '@/api/warehouse/suppliesManage/types';
     import { listSuppliesCategory } from '@/api/warehouse/suppliesCategory';
     import { useRouter } from 'vue-router';
+    import { globalHeaders } from '@/utils/request';
     import type { FormInstance } from 'element-plus';
 
     const router = useRouter();
@@ -125,10 +140,18 @@
     const loading = ref(true);
     const showSearch = ref(true);
     const ids = ref < Array < string | number >> ([]);
+    const fileList = ref<any[]>([]);
     const single = ref(true);
     const multiple = ref(true);
     const total = ref(0);
+    const headers = ref(globalHeaders());
     const batchSetDialogVisible = ref(false);
+    const baseUrl =import.meta.env.VITE_APP_BASE_API;
+    const uploadFileUrl = ref(baseUrl + '/warehouse/suppliesManage/importExcel');
+    const dialogFile = reactive < DialogOption > ({
+        visible: false,
+        title: '请上传'
+    });
 
     const rules = {
         shelfLifeReminder: [{ required: true, message: "保质期临期提醒不能为空", trigger: "blur" }],
@@ -223,7 +246,8 @@
 
     /** 导入按钮操作 */
     const handleImport = () => {
-        // TODO: 实现导入功能
+        dialogFile.visible = true;
+        fileList.value = [];
     };
 
     /** 导出按钮操作 */
@@ -238,6 +262,38 @@
         proxy ?.getDownload('warehouse/suppliesManage/downLoadTemplate', {}, `耗材模版.xlsx`)
     }
 
+    // 上传失败
+    const handleUploadError = () => {
+        proxy ?.$modal.msgError('上传Excel失败');
+        proxy ?.$modal.closeLoading();
+    };
+
+    // 上传成功回调
+    const handleUploadSuccess = (res: any, file: UploadFile) => {
+        if (res.code === 200) {
+            dialogFile.visible = false;
+            fileList.value = [];
+            proxy ?.$modal.closeLoading();
+            getList();
+        } else {
+            proxy ?.$modal.msgError(res.msg);
+            proxy ?.$modal.closeLoading();
+        }
+        fileList.value = [];
+    };
+
+
+    /** 上传前loading加载 */
+    const handleBeforeUpload = (file: any) => {
+        const isLt = file.size / 1024 / 1024 < 10;
+        if (!isLt) {
+            proxy ?.$modal.msgError(`上传文件大小不能超过10MB!`);
+            return false;
+        }
+        proxy ?.$modal.loading('正在上传文件，请稍候...');
+        return true;
+    };
+
     /** 获取分类名称 */
     const getCategoryName = (categoryIds) => {
         if (!categoryIds) return '--';