页面修改

ruoyi-ui/public/index.html

@@ -216,7 +216,7 @@
 <style>
   .el-dialog__header{
     padding:20px 20px 10px;
-    background-color: #b8d1fb;
+    background-color: dodgerblue;
   }
   .el-dialog__headerbtn .el-dialog__close {
     color: #f5f8ff;

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

@@ -2,22 +2,16 @@
   <div class="app-container">
     <el-form  ref="queryForm" size="small" :inline="true"  label-width="68px">
       <el-form-item label="模板" prop="name">
-        <el-select v-model="selectedOption" size="mini" @change="handleOptionChange" placeholder="请选择你要查看的模板" >
-          <!--          <el-option label="自设的模板名" value="这里是Excel表内容"></el-option>-->
+        <el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" placeholder="请选择你要查看的模板" >
+          <!--  <el-option label="自设的模板名" value="使用空白模板"></el-option>-->
           <el-option
-            v-for="item in depss"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
+            v-for="item in depss" :key="item.id" :label="item.name" :value="item.id">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
         <!--<el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button> -->
-        <!--<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
-        <!--<el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button>-->
-        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -50,18 +44,16 @@
           action=''
           :limit="1"
           :file-list="fileList"
+          :disabled="disableNextButton"
         >
-                  <el-button  plain size="mini" icon="el-icon-upload2" type="primary">导入</el-button>
-
+          <el-button  plain size="mini" icon="el-icon-upload2" type="primary" :disabled="disableNextButton" >导入</el-button>
         </el-upload>
       </el-col>
-      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
     </el-row>
     <!-- luckysheet容器 -->
-<!--    <div id="luckysheetContainer"></div>-->
     <div
       id="luckysheet"
-      style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 800px; left: 0px; top: 110px; bottom: 0px; z-index: 0"
+      style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 1000px; left: 0px; top: 110px; bottom: 0px; z-index: 0"
     >
     </div>
     <!-- 用户添加或修改我的Excel表格的弹框 -->
@@ -87,6 +79,7 @@
   </div>
 </template>
 
+
 <script>
 import $ from 'jquery'
 /*安装插件 npm install xlsx，安装完成后引入 import XLSX from ‘xlsx’*/
@@ -108,6 +101,7 @@ export default {
       selectedOption:'',
       luckysheetData: '',
       fileList:[],
+      disableNextButton: true,
       depss:[],
       // 表单参数
       form: {},
@@ -142,7 +136,7 @@ export default {
       getMyluckyexcel(this.selectedOption).then(response => {
 
         const sysSupplies = response.data;
-
+        this.disableNextButton = this.selectedOption === '';
         this.luckysheetData = sysSupplies.jsons;
         //将接收到的json存到json_data中
         //const json_data = response.data;
@@ -156,16 +150,11 @@ export default {
           showinfobar: false, //是否显示顶部名称栏
           lang:'zh',
         });
-
       }).catch(() => {
         // 处理错误逻辑，这里是一个空的错误处理函数
-        this.$message.error('暂停失败,发生未知错误!');
+        this.$message.error('查询失败,发生未知错误!');
       });
     },
-    /** 导出设置 */
-    handleExport(){
-      exportExcel(luckysheet.getAllSheets(), '导出')
-    },
     /** 弹出的确认框关闭 */
     handleClose(done) {
       this.$confirm('确认关闭？')
@@ -208,38 +197,14 @@ export default {
       }
 
     },
-
-    /*// 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        name: null,
-        description: null
-      };
-      this.resetForm("form");
-    },
-    /!** 搜索按钮操作 *!/
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /!** 重置按钮操作 *!/
+    /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      //刷新下拉选框内容
+      this.selectedOption='';
+      this.disableNextButton='';
+      //刷新luckysheet表格
+      this.init();
     },
-    /!** 导出按钮操作 *!/
-    handleExport() {
-      this.download('ruoyi-mymodule/mymodule/export', {
-        ...this.queryParams
-      }, `mymodule_${new Date().getTime()}.xlsx`)
-    },*/
     /** Luckyexcel文档 */
     init() {
       let options = {
@@ -255,8 +220,8 @@ export default {
             "status": 1, //激活状态
             "order": 0, //工作表的下标
             "hide": 0,//是否隐藏
-            "row": 20, //行数
-            "column": 15, //列数
+            "row": 8, //行数
+            "column": 10, //列数
             "defaultRowHeight": 19, //自定义行高
             "defaultColWidth": 73, //自定义列宽
             "celldata": [
@@ -301,72 +266,33 @@ export default {
       luckysheet.create(options)
 
     },
-    Excel(e) {
-      let that = this
-      // 错误情况判断
-      const files = e.target.files
-      if (files.length <= 0) {
-        return false;
-      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
-        this.$message({
-          message: "上传格式不正确，请上传xls或者xlsx格式",
-          type: "warning"
-        });
-        return false
-      } else {
-        that.upload_file = files[0].name
-      }
-      // 读取表格
-      const fileReader = new FileReader()
-      fileReader.onload = ev => {
-        try {
-          const data = ev.target.result;
-          const workbook = XLSX.read(data, {
-            type: "binary"
-          })
-          // 读取第一张表
-          const wsname = workbook.SheetNames[0]
-          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
-          // 打印 ws 就可以看到读取出的表格数据
-          console.log(ws)
-          // 定义一个新数组，存放处理后的表格数据
-          that.lists = []
-          ws.forEach(item => {
-            that.lists.push({
-              // 对ws进行处理后放进lists内
-            })
-          })
-          // 调用方法将lists数组发送给后端
-          this.submit_form(that.lists)
-        } catch (e) {
-          return false
-        }
-      }
-      fileReader.readAsBinaryString(files[0])
-    },
     /** 导入事件*/
     handleFileChange(evt) {
+      if (this.disableNextButton) {
+        this.$message.warning("请先选择模板再进行导入!");
+        return false; // 如果按钮被禁用，提前返回，避免执行下一步操作
+      }
         let name = evt.name
         let suffixArr = name.split('.'),
           suffix = suffixArr[suffixArr.length - 1]
         if (suffix != 'xlsx') {
-        alert('当前仅支持导入xlsx文件')
+          this.$message({
+            message: "上传格式不正确，请上传xls或者xlsx格式",
+            type: "warning"
+          });
           return
         }
         LuckyExcel.transformExcelToLucky(
           evt,
           function(exportJson, luckysheetfile) {
-
-
             if (exportJson.sheets == null || exportJson.sheets.length == 0) {
-            alert(
-              '无法读取excel文件的内容，目前不支持xls文件!'
-            )
+              this.$message({
+                message: "导入失败，请检查上传的文件是否正确",
+                type: "warning"
+              });
               return
             }
-
             luckysheet.destroy()
-
             luckysheet.create({
               container: 'luckysheet', //luckysheet is the container id
               title: exportJson.info.name,
@@ -377,6 +303,11 @@ export default {
             })
           }
         )
+
+    },
+    /** 导出设置 */
+    handleExport(){
+      exportExcel(luckysheet.getAllSheets(), this.from_name)
     },
   }
 // 配置项