页面大小和遮罩层

ruoyi-ui/package.json

@@ -5,9 +5,9 @@
   "author": "若依",
   "license": "MIT",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
+    "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
+    "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
+    "build:stage": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src"
   },
@@ -36,16 +36,21 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
-    "@riophae/vue-treeselect": "0.4.0",
     "af-table-column": "^1.0.3",
     "axios": "0.21.0",
+    "babel-eslint": "10.1.0",
+    "chalk": "4.1.0",
     "clipboard": "2.0.6",
+    "connect": "3.6.6",
     "core-js": "3.8.1",
     "echarts": "4.9.0",
     "element-ui": "2.15.0",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "fuse.js": "6.4.3",
@@ -54,45 +59,44 @@
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lint-staged": "10.5.3",
     "luckyexcel": "^1.0.1",
-
     "nprogress": "0.2.0",
     "quill": "1.3.7",
+    "runjs": "4.4.2",
+    "sass": "1.32.0",
+    "sass-loader": "10.1.0",
     "screenfull": "5.0.2",
+    "script-ext-html-webpack-plugin": "2.1.5",
     "scriptjs": "^2.5.9",
-    "sortablejs": "1.10.2",
+    "svg-sprite-loader": "5.1.1",
+    "uuid": "^9.0.0",
     "vue": "2.6.12",
     "vue-append": "^2.2.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
+    "vue-template-compiler": "2.6.12",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "xlsx": "^0.17.5",
-    "babel-eslint": "10.1.0",
-    "chalk": "4.1.0",
-    "connect": "3.6.6",
-    "eslint": "7.15.0",
-    "eslint-plugin-vue": "7.2.0",
-    "lint-staged": "10.5.3",
-    "runjs": "4.4.2",
-    "sass": "1.32.0",
-    "sass-loader": "10.1.0",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "xlsx": "^0.17.5"
   },
   "devDependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
-    "@riophae/vue-treeselect": "0.4.0",
     "af-table-column": "^1.0.3",
     "axios": "0.21.0",
+    "babel-eslint": "10.1.0",
+    "chalk": "4.1.0",
     "clipboard": "2.0.6",
+    "connect": "3.6.6",
     "core-js": "3.8.1",
     "echarts": "4.9.0",
     "element-ui": "2.15.0",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "fuse.js": "6.4.3",
@@ -101,33 +105,27 @@
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lint-staged": "10.5.3",
     "luckyexcel": "^1.0.1",
-
     "nprogress": "0.2.0",
     "quill": "1.3.7",
+    "runjs": "4.4.2",
+    "sass": "1.32.0",
+    "sass-loader": "10.1.0",
     "screenfull": "5.0.2",
+    "script-ext-html-webpack-plugin": "2.1.5",
     "scriptjs": "^2.5.9",
-    "sortablejs": "1.10.2",
+    "sortablejs": "^1.10.2",
+    "svg-sprite-loader": "5.1.1",
     "vue": "2.6.12",
     "vue-append": "^2.2.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
+    "vue-template-compiler": "2.6.12",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "xlsx": "^0.17.5",
-    "babel-eslint": "10.1.0",
-    "chalk": "4.1.0",
-    "connect": "3.6.6",
-    "eslint": "7.15.0",
-    "eslint-plugin-vue": "7.2.0",
-    "lint-staged": "10.5.3",
-    "runjs": "4.4.2",
-    "sass": "1.32.0",
-    "sass-loader": "10.1.0",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "xlsx": "^0.17.5"
   },
   "engines": {
     "node": ">=8.9",

ruoyi-ui/src/views/system/supplies/index.vue

@@ -20,7 +20,6 @@
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                 </el-form-item>
             </el-form>
-
             <el-row :gutter="10" class="mb8">
                 <el-col :span="1.5">
                     <el-button
@@ -42,17 +41,22 @@
                         :limit="1"
                         :file-list="fileList"
                         :disabled="disableNextButton"
+                        :show-file-list=false
                     >
                         <el-button  plain size="mini" icon="el-icon-download" type="primary"  :disabled="disableNextButton"  >导入</el-button>
                     </el-upload>
                 </el-col>
             </el-row>
+
         <!-- luckysheet容器 -->
         <div
             id="luckysheet"
-            style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 110px; height: 1000px; z-index: 0"
+            style="margin: 0px; padding: 0px; position: absolute; width: 100%; height:78vh; z-index: 0"
         >
         </div>
+        <div v-if="showMask" class="mask">
+            <div class="loading-spinner"></div>
+        </div>
 
     </div>
 </template>
@@ -77,6 +81,7 @@ export default {
     name: "Mymodule",
     data() {
         return {
+            showMask:false,
             uuid:'',
             //弹出页面的表名
             from_name : "",
@@ -245,7 +250,7 @@ export default {
         /** 导入事件*/
         async handleFileChange(evt) {
             let exx;
-
+            this.showMask = true;
             const cons = new Promise((resolve, reject) => {
                 LuckyExcel.transformExcelToLucky(evt, exportJson => {
                     exx = exportJson;
@@ -257,7 +262,10 @@ export default {
                 const exportJson = await cons;
                 await this.summary(exportJson);
                 console.log('summary 执行完毕');
+                // 导入完成后关闭遮罩层
+                this.showMask = false;
                 this.submit(exportJson);
+
             } catch (Error) {
                     this.$message({
                         message: Error.message,
@@ -1056,4 +1064,34 @@ function generateUUID() {
     return array.join("-");
 }
 </script>
+<style>
+.mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
+.loading-spinner {
+    /* 添加你的加载动画样式 */
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

ruoyi-ui/src/views/system/supplies/indexupload.vue

@@ -60,18 +60,15 @@
                 >导出</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button icon="el-icon-s-opportunity
-" size="mini" @click="addToMap">生成</el-button>
+                <el-button icon="el-icon-s-opportunity" size="mini" @click="addToMap">生成</el-button>
             </el-col>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="right-float">重置</el-button>
         </el-row>
-
         <!-- luckysheet容器 -->
         <div
             id="luckysheet"
-            style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 1000px; z-index: 0"
-        >
-        </div>
+            style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 75vh; z-index: 0"
+        ></div>
 
     </div>
 </template>
@@ -441,10 +438,7 @@ export default {
                     }
 
 
-
-
-                }
-            )
+                })
         },
         /** 导出设置 */
         handleExport: debounce(function() {

ruoyi-ui/src/views/system/supplies/upload.vue

@@ -53,7 +53,7 @@
         <!-- luckysheet容器 -->
         <div
             id="luckysheet"
-            style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 60px; height: 1000px; z-index: 0"
+            style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 78vh; z-index: 0"
         >
         </div>