启动页面跟登录页修改

flossom-modules/flossom-file/src/main/java/com/flossom/file/controller/SysFileController.java

@@ -33,6 +33,7 @@ public class SysFileController
         try
         {
             // 上传并返回访问地址
+            System.out.println("文件上传开始");
             String url = sysFileService.uploadFile(file);
             SysFile sysFile = new SysFile();
             sysFile.setName(FileUtils.getName(url));

flossom-modules/flossom-file/src/main/resources/bootstrap.yml

@@ -23,3 +23,8 @@ spring:
         # 共享配置
         shared-configs:
           - application-${spring.profiles.active}.${spring.cloud.nacos.config.file-extension}
+  servlet:
+    multipart:
+      enabled: true #默认支持文件上传
+      max-file-size: 50MB #最大文件
+      max-request-size: 30MB #最大支持请求大小

flossom-ui/src/views/system/firing/index.vue

@@ -1,132 +1,76 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-form-item label="文件路径" prop="filePath">
+      <el-tab-pane label="启动页" name="startPage">
-        <el-input
+        <div class="block" style="float: left;margin-left: 3%;margin-top: 3%">
-          v-model="queryParams.filePath"
+          <video
-          placeholder="请输入文件路径"
+            ref="video"
-          clearable
+            class="play-video"
-          @keyup.enter.native="handleQuery"
+            controls="controls"
-        />
+            autoplay="autoplay"
-      </el-form-item>
+            width="337px"
-      <el-form-item label="文件类型" prop="fileSuffix">
+            height="600px"
-        <el-input
+          >
-          v-model="queryParams.fileSuffix"
+            <source :src="videoForm.filePath" type="video/mp4" />
-          placeholder="请输入文件类型"
+          </video>
-          clearable
+        </div>
-          @keyup.enter.native="handleQuery"
+        <div style="float: left;margin-left: 10%;margin-top: 10%;">
-        />
+          <el-upload
-      </el-form-item>
+            ref="upload"
-      <el-form-item>
+            :limit="1"
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            accept=".mp4"
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            :headers="upload.headers"
-      </el-form-item>
+            :action="upload.url"
-    </el-form>
+            :disabled="upload.isUploading"
-
+            :on-progress="handleFileUploadProgress"
-    <el-row :gutter="10" class="mb8">
+            :on-success="handleFileSuccess"
-      <el-col :span="1.5">
+            drag
-        <el-button
+          >
-          type="primary"
+            <i class="el-icon-upload"></i>
-          plain
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-          icon="el-icon-plus"
+            <div class="el-upload__tip" slot="tip">请上传视频，用于启动页显示，比例建议为16: 9</div>
-          size="mini"
+          </el-upload>
-          @click="handleAdd"
+        </div>
-          v-hasPermi="['system:info:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:info:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:info:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:info:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
 
-    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+      </el-tab-pane>
-      <el-table-column type="selection" width="55" align="center" />
+      <el-tab-pane label="登录页" name="logoPage">
-      <el-table-column label="主键ID" align="center" prop="id" />
+        <div class="block" style="float: left;margin-left: 3%;margin-top: 3%">
-      <el-table-column label="文件路径" align="center" prop="filePath" />
+          <el-image :src="loginForm.filePath" style="width: 330px;height: 461px;">
-      <el-table-column label="文件类型" align="center" prop="fileSuffix" />
+            <div slot="placeholder" class="image-slot"><span class="dot"></span>
-      <el-table-column label="类型(1-启动页 2-登录页)" align="center" prop="type" />
+            </div>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          </el-image>
-        <template slot-scope="scope">
+        </div>
-          <el-button
+        <div style="float: left;margin-left: 10%;margin-top: 10%;">
-            size="mini"
+          <el-upload
-            type="text"
+            ref="upload"
-            icon="el-icon-edit"
+            :limit="1"
-            @click="handleUpdate(scope.row)"
+            accept=".jpg, .png, .jpeg"
-            v-hasPermi="['system:info:edit']"
+            :headers="upload.headers"
-          >修改</el-button>
+            :action="upload.url"
-          <el-button
+            :disabled="upload.isUploading"
-            size="mini"
+            :on-progress="handleFileUploadProgress"
-            type="text"
+            :on-success="handleFileSuccess"
-            icon="el-icon-delete"
+            drag
-            @click="handleDelete(scope.row)"
+          >
-            v-hasPermi="['system:info:remove']"
+            <i class="el-icon-upload"></i>
-          >删除</el-button>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        </template>
+            <div class="el-upload__tip" slot="tip">请上传登录页背景图片，建议尺寸为375px*471p</div>
-      </el-table-column>
+          </el-upload>
-    </el-table>
+        </div>
 
-    <pagination
+      </el-tab-pane>
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
-    <!-- 添加或修改登录信息对话框 -->
+    </el-tabs>
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <div style="margin-left: 76%;margin-top: 2%"  v-show="this.activeName != 'logoPage'">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-button type="primary" @click="submitForm">提 交</el-button>
-        <el-form-item label="文件路径" prop="filePath">
-          <el-input v-model="form.filePath" placeholder="请输入文件路径" />
-        </el-form-item>
-        <el-form-item label="文件类型" prop="fileSuffix">
-          <el-input v-model="form.fileSuffix" placeholder="请输入文件类型" />
-        </el-form-item>
-        <el-form-item label="删除标识" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标识" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
     </div>
-    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/system/firing";
-
+import {getToken} from "@/utils/auth";
 export default {
   name: "Info",
   data() {
@@ -137,6 +81,7 @@ export default {
       ids: [],
       // 非单个禁用
       single: true,
+      activeName: 'startPage',
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
@@ -147,8 +92,30 @@ export default {
       infoList: [],
       // 弹出层标题
       title: "",
+      videoSrc: 'http://127.0.0.1:9300/statics/2023/12/16/0c49191de1ed8f91b28d9c2b12556154_20231216154804A002.mp4',
       // 是否显示弹出层
       open: false,
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/file/upload"
+      },
+      videoForm:{
+
+      },
+      loginForm:{
+
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -175,8 +142,23 @@ export default {
         this.infoList = response.rows;
         this.total = response.total;
         this.loading = false;
+        // 处理逻辑
+        this.infoList.forEach((item)=>{
+          if (item.type == 1) {
+            // 启动页
+            this.videoForm = item;
+            this.$refs["video"].load();
+            this.$refs["video"].play();
+          } else {
+            // 登录页
+            this.loginForm = item;
+          }
+        })
       });
     },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -195,6 +177,59 @@ export default {
       };
       this.resetForm("form");
     },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      // this.upload.isUploading = true;
+      console.log('上传处理中==>',JSON.stringify(event))
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if(response.code == '200') {
+        if (this.activeName == 'startPage') {
+          // 启动页处理
+          this.videoForm.filePath = response.data.url;
+          this.videoForm.fileUrl =  response.data.url;
+          if (this.videoForm.id != null) {
+            // 更新操作
+            updateInfo(this.videoForm).then(response => {
+              this.$modal.msgSuccess("更新成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            // 新增操作
+            this.videoForm.type =  1;
+            addInfo(this.videoForm).then(response => {
+              this.$modal.msgSuccess("保存成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        } else {
+          // 登录页处理
+          this.loginForm.filePath = response.data.url;
+          this.loginForm.fileUrl =  response.data.url;
+          if (this.loginForm.id != null) {
+            // 更新操作
+            updateInfo(this.loginForm).then(response => {
+              this.$modal.msgSuccess("更新成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            // 新增操作
+            this.loginForm.type =  2;
+            addInfo(this.loginForm).then(response => {
+              this.$modal.msgSuccess("保存成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      }
+
+      console.log('上传后的结果==>',JSON.stringify(response))
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;

flossom-ui/src/views/system/setting/index.vue

@@ -66,7 +66,7 @@
           <el-upload
             ref="upload"
             :limit="1"
-            accept=".jpg, .png, .jpeg"
+            accept=".jpg, .png, .jpeg, .mp4"
             :headers="upload.headers"
             :action="upload.url"
             :disabled="upload.isUploading"