基于Spring的Uniapp自动更新实现方法

曼曼青青草2024-08-31 16:38

Uniapp自动更新

本文介绍了基于rouyi-uniapp的更新包版本自动推送更新。结合minio和网址下载地址两种方式，计算版本号大小后，可选是否强制更新。

一、表结构和后端版本号检测设计

1、版本更新控制表结构

主要字段和设计思路：

**fileUrl：**直接下载地址，用于网址直接下载，uniapp可直接访问（isUrlDownload="Y"）

filePath：minio下载地址， 存储minio文件管理系统表的关键字，uniapp走本地minio文件下载地址（isUrlDownload="N"）

version ：版本号3位，eg：4.0.1，与uniapp的manifest.Json的versionName对应。

versionValue ：版本号值，类似于二进制值转化，在更新版本时，比价用户当前版本信息和发布的有效最高版本号，如果当前版本号低于发布的最高版本号，进行更新提示。

Eg：Version=4.0.1; versionValue = 1*Math.power(10,0)+0*Math.power(10,1)+1*Math.power(10,2)。平方基数值不得小于10，否则值计算的最终大小会不符合。

isUrlDownload ：是否使用直接地址下载还是minio，更加灵活

**Status：**版本是否可用。'Y'为可用，即使用户安装的是旧版本，也可以不更新。'N'为版本停用，如果用户当前安装的版本状态为停用，则强制更新到最新版（状态为'Y'，且版本号值最高）

java 复制代码 
package com.inspur.factory.factoryAppManage.domain;

import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.inspur.common.annotation.Excel;
import com.inspur.common.core.domain.BaseEntity;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;

/**
 * app版本管理对象 factory_app_manage
 *
 */
@TableName("factory_app_manage")

@Data
public class FactoryAppManage extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** 主键 */
    @TableId
    private Long id;

    /** 版本号名称 */
    @Excel(name = "版本号名称")
    private String version;

    /** 版本号值 */
    @Excel(name = "版本号值")
    private Long versionValue;

    /** 手机品牌 */
    @Excel(name = "手机品牌")
    private String phoneBrand;

    /** 文件名(安装包名称) */
    @Excel(name = "文件名(安装包名称)")
    private String fileName;

    /** 安装包地址 */
    @Excel(name = "安装包地址")
    private String filePath;

    /** 下载地址 */
    @Excel(name = "下载地址")
    private String fileUrl;

    /** 上传时间 */
//    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @Excel(name = "上传时间", width = 30, dateFormat = "yyyy-MM-dd")
    private Date fileTime;

    /** 状态 */
    @Excel(name = "状态")
    private String status;

    /** 更新说明 */
    @Excel(name = "更新说明")
    private String upgradeDescription;

    /** 文件大小 */
    @Excel(name = "文件大小")
    private String fileSize;

    /** 使用临时地址 */
    @Excel(name = "使用临时地址",readConverterExp = "Y=是,N=否")
    private String isUrlDownload;

    }


    @Override
    public String toString() {
        return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
            .append("id", getId())
            .append("version", getVersion())
            .append("versionValue", getVersionValue())
            .append("phoneBrand", getPhoneBrand())
            .append("fileName", getFileName())
            .append("filePath", getFilePath())
            .append("fileUrl", getFileUrl())
            .append("fileTime", getFileTime())
            .append("status", getStatus())
            .append("upgradeDescription", getUpgradeDescription())
            .append("fileSize", getFileSize())
            .append("createTime", getCreateTime())
            .append("createBy", getCreateBy())
            .append("updateTime", getUpdateTime())
            .append("updateBy", getUpdateBy())
            .append("remark", getRemark())
            .toString();
    }
}

2、检查版本更新

检查用户当前的版本是否可用。'Y'为可用，即使用户安装的是旧版本，也可以不更新。'N'为版本停用，如果用户当前安装的版本状态为停用，则强制更新到最新版（状态为'Y'，且版本号值最高）。

java 复制代码 
//获取应当安装的app版本

@Override
public FactoryAppManage getAppVersion(FactoryAppManage factoryAppManage){
    //传入版本号、手机系统类型
    List<FactoryAppManage> oldVersion = factoryAppManageMapper.selectFactoryAppManageList(factoryAppManage);
    if(oldVersion!=null && oldVersion.size()!=0){
        //如果当前版本还可使用，返回当前版本
        if(oldVersion.get(0).getStatus().equals("Y")){
            return oldVersion.get(0);
        }else{
            //如果当前版本不可使用强制更新，返回最新版本
            FactoryAppManage factoryAppManageQuery = new FactoryAppManage();
            factoryAppManageQuery.setStatus("Y");
            factoryAppManageQuery.setPhoneBrand(factoryAppManage.getPhoneBrand());
            List<FactoryAppManage> newVersion = factoryAppManageMapper.selectFactoryAppManageList(factoryAppManageQuery);
            if(newVersion!=null){
                return newVersion.get(0);
            }
        }
    }
    return null;
}

二、前端uniapp设计

版本号比较后，更新包安装提示弹窗，点击确认下载文件。

文件下载和打开主要方法如下：

1、主要应用技术

（1）直接地址下载：

javascript 复制代码 
uni.saveFile({})

（2）Minio下载：

Url为本地接口地址

javascript 复制代码 
plus.downloader.createDownload(url, {})

plus.io.convertLocalFileSystemURL

plus.runtime.openFile(d.filename); //选择软件打开文件

（3）H5平台下载：

主要用于电脑调试，BLOB转化，具体不做解释

（4）软件信息获取

javascript 复制代码 
uni.getSystemInfoSync()

获取：phoneBrand（版本）version（版本号）

2、实现方法（***重点***）

App.vue根组件，每次打开任何页面都会执行到，在此文件下检测版本和更新包安装。

（1）版本检测

当前版本号为参数，后台请求对比最新版本号（版本号值最大为最新版本），返回应当安装的版本。

如果需要更新，则弹窗显示，点击确定进行安装。

根据web前台配置的是否用直接地址下载，进入安装包下载安装。

javascript 复制代码 
      checkUploadVersion(){
        //检测更新
        let server = config.baseUrl +'/factory/factoryAppManage/getAppVersion'; //检查更新地址（minio检测地址）
        let info = uni.getSystemInfoSync()
        uni.request({
          url: server,
          data: {
            phoneBrand: info.platform,
            version: info.appVersion
          },
          success: (res) => {
            if (res.data.data.version != info.appVersion) {
            // if (1) {
              let upgradeDescription = res.data.data.upgradeDescription
              uni.showModal({ //提醒用户更新
                title: "更新提示",
                content: '版本更新内容：'+ upgradeDescription,
                showCancel:false,
                success: (e) => {
                  if (e.confirm) {
                    if(info.uniPlatform=='web'){
                      //h5平台调用后端minio接口下载
                      this.downloadApp2(res.data.data)
                    }else if(info.platform!='windows' && info.uniPlatform!='web' && res.data.data.isUrlDownload == 'Y'){
                      //app手机端使用临时地址下载
                      this.downloadApp1(res.data.data)
                    }else if(info.platform!='windows' && info.uniPlatform!='web' && res.data.data.isUrlDownload == 'N'){
                      //app手机端调用后端minio接口下载
                      this.downloadApp3(res.data.data)
                    }
                  }
                }
              })
            }
          }
        })
      },

(2) minio下载

此方式具有参考意义，可以不用购买云空间存放安装包文件，直接使用minio文件存储。

javascript 复制代码 
   /** app安装包下载-(下载方式3-APP调用后端minio下载接口下载)*/
      downloadApp3(appVersionInfo) {

        var url = config.baseUrl +'/fileManage/downloadFile'+'?filePath=' + appVersionInfo.filePath+'&fileName=' + appVersionInfo.fileName; //请求下载接口地址
        var name = appVersionInfo.fileName;
        // console.log('method', reqMethod)
        uni.showLoading({
          title: '正在下载'
        });
// 本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，
// 这时用户文件管理器能看到的了，之后创建 京唐港app 作为文件夹，
        let dtask = plus.downloader.createDownload(url, {
          filename: "file://storage/emulated/0/京唐港app/" + name //利用保存路径，实现下载文件的重命名
        },(d, status)=> {
          //d为下载的文件对象
          if (status == 200) {
            uni.hideLoading();
            uni.showToast({
              icon: 'none',
              mask: true,
              title: '已保存到文件夹：/京唐港app/' + name, //保存路径
              duration: 3000,
            });
            //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
            let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
            setTimeout(()=>{
              plus.runtime.openFile(d.filename); //选择软件打开文件
            },1500)
          } else {
            //下载失败
            uni.hideLoading();
            plus.downloader.clear(); //清除下载任务
            uni.showToast({
              icon:'none',
              mask:true,
              title: '下载失败，请稍后重试',
            });
          }
        })
        dtask.start();
      },

（3）直接地址下载

此方式需要云空间

javascript 复制代码 
    /** app安装包下载-(下载方式1-APP指定url下载)*/
      downloadApp1(appVersionInfo){
        //下载方式1：指定url下载
        let downloadUrl = appVersionInfo.fileUrl
        // let downloadUrl = 'https://mp-fdbd529e-1d38-4f4a-bf37-72ba880de14a.cdn.bspapp.com/cloudstorage/00b0e017-b375-4758-88c8-4acfab810d7a.apk'
         uni.downloadFile({
          url: downloadUrl,
/*          data:{
            filePath:'mnQ0lCrayctz3TkHxB4rB0PeVTD7fbXNhULFZo4g+iPK0KXkzzzYJWCIJ5vxfiu1a8fzsYOb07weXbcXd92dkw==',
            fileName: '3.jpg'
          },
          method: 'POST',*/
          success: (res) => {
            console.log('downloadFile success, res is', res)
            //文件保存到本地
            uni.saveFile({
              tempFilePath: res.tempFilePath, //临时路径
              success: function(re) {
                uni.showToast({
                  icon: 'none',
                  mask: true,
                  title: '文件已保存：' + re.savedFilePath, //保存路径
                  duration: 3000,
                });
                setTimeout(() => {
                  //打开查看
                  uni.openDocument({
                    filePath: re.savedFilePath,
                    success: function(res) {
                      // console.log('打开成功');
                    }
                  });
                }, 3000)
              }
            });

            uni.hideLoading();
          },
          fail: (err) => {
            console.log('downloadFile fail, err is:', err)
            uni.hideLoading();
          }
        })
      },

(4) H5平台电脑端下载

javascript 复制代码 
      /** app安装包下载-(下载方式2-h5平台web使用后端minio后端接口下载)*/
      downloadApp2(appVersionInfo){
        //下载方式2：请求接口下载
        let server = config.baseUrl +'/fileManage/downloadFile'+'?filePath=' + appVersionInfo.filePath+'&fileName=' + appVersionInfo.fileName; //请求下载接口地址
        uni.request({
          url: server,
          method: 'post',
          success: (res) => {
            /** h5 平台下载*/
            try {
              // const res = await exportOrderById({ id });//获取返回的二进制数据
              const blob = new Blob([res.data]); // 通过返回的流数据 手动构建blob 流
              const reader = new FileReader();
              reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签的href
              reader.onload = (e) => {
                // 转换完成，创建一个a标签用于下载
                const a = document.createElement("a");
                a.download = appVersionInfo.fileName; // 构建 下载的文件名称以及下载的文件格式（可通过传值输入）
                if (typeof e.target.result === "string") {
                  a.href = e.target.result;
                }
                a.click();
              };
            } catch (err) {
              this.$message.error("遇到错误！");
            }
          }
        })
      },

三、前端web设计

1、版本页面展示

javascript 复制代码 
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px" style="margin-bottom: 5px">
      <div class="con-container">
        <div class="lab-container">
              <label class="condition-item-title">版本号名称</label>
              <el-form-item label="" prop="version" class="custom-el-form-item">
                <el-input
                    v-model="queryParams.version" class="query-param"
                    placeholder="请输入版本号名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
              </el-form-item>
        </div>

        <div class="btn-container">
          <el-form-item>
            <el-button type="primary" icon="el-icon-setting" size="mini" @click="conditionToggle">高级查询
            </el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['factory:factoryAppManage:add']">新增
            </el-button>
            <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport"
                       v-hasPermi="['factory:factoryAppManage:export']">导出
            </el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                       v-hasPermi="['factory:factoryAppManage:remove']"
            >删除</el-button>
          </el-form-item>
        </div>
      </div>


    <div class="toggle-container" ref="toggle-container" style="display: none;">
    <div class="condition-item">
      <label class="condition-item-title">手机品牌</label>
      <el-form-item label="" prop="phoneBrand">
        <el-input
          v-model="queryParams.phoneBrand"
          placeholder="请输入手机品牌"
          clearable
          size="small" class="query-param"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
    </div>
    <div class="condition-item">
      <label class="condition-item-title">状态</label>
      <el-form-item label="" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" class="query-param">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>
      </div>
    </el-form>
    <el-table v-loading="loading" ref="table" border
    :height="tableHeight" :header-cell-style="{fontSize:'14px', fontWeight:'500'}"
    :data="factoryAppManageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="60" align="left">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="主键" align="center" prop="id" />-->
      <el-table-column label="手机品牌" align="center" prop="phoneBrand">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.phone_brand" :value="scope.row.phoneBrand"/>
        </template>
      </el-table-column>
      <el-table-column label="版本号名称" align="center" prop="version" />
      <el-table-column label="版本号值" align="center" prop="versionValue" />
      <el-table-column label="安装包名称" :show-overflow-tooltip="true" align="center" prop="fileName" />
      <el-table-column label="安装包地址" :show-overflow-tooltip="true" align="center" prop="filePath" />
<!--      <el-table-column label="下载地址" align="center" prop="fileUrl" />-->
      <el-table-column label="上传时间" align="center" prop="fileTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.fileTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.status=='N'">停用</el-tag>
          <el-tag type="success" v-if="scope.row.status=='Y'">启用</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="更新说明" align="center" prop="upgradeDescription" />-->
      <el-table-column label="文件大小(MB)" align="center" prop="fileSize" />
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column label="操作" min-width="200" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="handleDownload(scope.row.filePath,scope.row.fileName)"
          >下载
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-tickets"
              @click="handleView(scope.row)"
              v-hasPermi="['factory:factoryAppManage:query']"
          >详情</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['factory:factoryAppManage:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['factory:factoryAppManage:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改app版本管理对话框 -->
    <el-dialog :visible.sync="open" @opened="openDialog">
      <div slot="title">
        <span>{{ title }}</span>
      </div>
      <div class="factoryAppManage-body"></div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

      <div class="sub-project">
        <div class="sub-title">
          <div class="sub-title-name">app版本管理信息</div>
        </div>
        <div class="sub-body">
          <el-row>
            <el-col :span="8" v-if="!readOnly">
              <el-form-item label="安装包">
                <up-record @sendRecordData="getRecordData"></up-record>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上传时间" prop="fileTime" v-show="!readOnly">
                <el-date-picker clearable size="small"
                                v-model="form.fileTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                disabled
                                style="width:100%"
                                placeholder="选择上传时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="上传时间：" prop="fileTime" v-show="readOnly" class="custom-form-item">
                {{form.fileTime}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机品牌" prop="phoneBrand" v-show="!readOnly">
                <el-select v-model="form.phoneBrand" placeholder="请选择手机品牌" class="custom-form-item">
                  <el-option
                    v-for="dict in dict.type.phone_brand"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机品牌：" prop="phoneBrand" v-show="readOnly" class="custom-form-item">
                {{form.phoneBrand}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装包名称" prop="fileName" v-show="!readOnly">
                <el-input v-model="form.fileName" placeholder="安装包名称" class="form-item" disabled/>
              </el-form-item>
              <el-form-item label="安装包名称：" prop="fileName" v-show="readOnly" class="custom-form-item">
                {{form.fileName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装包地址" prop="filePath" v-show="!readOnly">
                <el-input v-model="form.filePath" placeholder="请输入安装包地址" class="form-item" disabled/>
              </el-form-item>
              <el-form-item label="安装包地址：" prop="filePath" v-show="readOnly" class="custom-form-item">
                {{form.filePath}}
              </el-form-item>
            </el-col>
        <el-col :span="8">
        <el-form-item label="版本号名称" prop="version" v-show="!readOnly">
          <el-input v-model="form.version" placeholder="四位，如（4.0.0.0）" class="form-item"/>
        </el-form-item>
        <el-form-item label="版本号名称：" prop="version" v-show="readOnly" class="custom-form-item">
          {{form.version}}
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="版本号值" prop="versionValue" v-show="!readOnly">
          <div v-if="!versionValueShow" @click="generateVersionValue" style="align-items: center"><el-link type="primary">计算版本号值</el-link></div>
          <el-input v-model="form.versionValue" placeholder="请输入版本号值" disabled class="form-item" v-if="versionValueShow"/>
        </el-form-item>
        <el-form-item label="版本号值：" prop="versionValue" v-show="readOnly" class="custom-form-item">
          {{form.versionValue}}
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="直接下载地址" prop="fileUrl" v-show="!readOnly">
          <el-input v-model="form.fileUrl" placeholder="请输入下载地址" class="form-item"/>
        </el-form-item>
        <el-form-item label="直接下载地址：" prop="fileUrl" v-show="readOnly" class="custom-form-item">
          {{form.fileUrl}}
        </el-form-item>
        </el-col>
            <el-col :span="24">
              <el-form-item label="更新说明" prop="upgradeDescription" v-show="!readOnly">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" v-model="form.upgradeDescription" placeholder="请输入更新说明" maxlength="85" show-word-limit class="form-item"/>
              </el-form-item>
              <el-form-item label="更新说明：" prop="upgradeDescription" v-show="readOnly" class="custom-form-item">
                {{form.upgradeDescription}}
              </el-form-item>
            </el-col>
        <el-col :span="24">
        <el-form-item label="状态" v-if="!readOnly">
          <el-radio-group v-model="form.status" class="form-item">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
          <el-form-item label="状态" v-if="readOnly">
            <el-tag type="warning" v-if="form.status=='N'">停用</el-tag>
            <el-tag type="success" v-if="form.status=='Y'">启用</el-tag>
        </el-form-item>
        </el-col>
          </el-row>
        </div>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-show="!readOnly">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFactoryAppManage, getFactoryAppManage, countFactoryAppManage, delFactoryAppManage, addFactoryAppManage, updateFactoryAppManage, exportFactoryAppManage } from "@/api/factory/factoryAppManage";
import upRecord from "@/components/FileUpload/upRecord";
import $ from 'jquery'
import selectSingleDevice from "@/components/esis/selectSingleDevice";
import {addFactoryDeviceFile} from "@/api/factory/factoryDeviceFile";
export default {
  name: "FactoryAppManage",
  dicts: ['phone_brand'],
  components: {upRecord},
  data() {
    // 唯一字段校验
    const validateUnique = (comment, rule, value, callback) => {
      let param = {}
      value =  value.trim()
      if (!value || value.length === 0) {
        callback(new Error(comment + "不能为空"));
        return;
      }
      this.$set(param, rule.field, value)
      let id =  this.form.id
      if(!id){ // 新增唯一校验
        countFactoryAppManage(param).then(res => {
          if(res.code === 200){
            if(res.data > 0){
              callback(new Error(comment + "已存在"));
            }else{
              callback()
            }
          }else{
            callback()
          }
        })
      }else { // 修改唯一校验
        this.$set(param, "id", id)
        countFactoryAppManage(param).then(res => {
          if(res.code === 200){
            if(res.data > 0){
              callback(new Error(comment + "已存在"));
            }else{
              callback()
            }
          }else{
            callback()
          }
        })
      }
    };
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      versionValueShow: false,
      // 总条数
      total: 0,
      tableHeight: 450,
      // app版本管理表格数据
      factoryAppManageList: [],
      recordFileSucc: [],

      statusOptions:[
        {value:'Y',label: '启用'},
        {value:'N',label: '停用'}
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //查看按钮默认不能编辑
      readOnly: false,
              // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        version: null,
        versionValue: null,
        phoneBrand: null,
        fileName: null,
        filePath: null,
        fileUrl: null,
        fileTime: null,
        status: null,
        upgradeDescription: null,
        fileSize: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
                                                                                                                                                                                                                                                                                                              }
    };
  },
  watch: {
      '$store.state.app.screenHeight': function() { //监听屏幕高度变化
          if (this.$refs.table.$el.offsetTop) {
              this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160
          } else {
              this.tableHeight = window.innerHeight - 62 - 160
          }
          this.openDialog()
      }
  },
  created() {
    this.getList();
  },

  methods: {
    openDialog() {
        $('.factoryAppManage-body').css('top', 0).css('overflow-y', 'auto')
    },

    generateVersionValue(){
      debugger
      let dotVal = this.form.version.split('.')
      this.form.versionValue = 4*Number(dotVal[0]) + 3*Number(dotVal[1])+ 2*Number(dotVal[2])+ 1*Number(dotVal[3])
      this.versionValueShow = true

    },
    /** 查询app版本管理列表 */
    getList() {
      this.loading = true;
      listFactoryAppManage(this.queryParams).then(response => {
        this.factoryAppManageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 文件下载处理*/
    getRecordData(val) {
      this.recordFileSucc = val

        this.form.fileName = val[0].appendixName
        this.form.filePath = val[0].appendixPath
        this.form.fileTime = new Date()
        this.form.createBy = val[0].createBy
        this.form.fileSize = val[0].fileSize.toFixed(2)

    },
    conditionToggle() {
        if(this.$refs['toggle-container'].style.display === 'none'){
            this.$refs['toggle-container'].style.display = 'inline-block';
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop -  160
        }else{
            this.$refs['toggle-container'].style.display = 'none';
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop -  160
        }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        version: null,
        versionValue: null,
        phoneBrand: null,
        fileName: null,
        filePath: null,
        fileUrl: null,
        fileTime: null,
        status: "Y",
        upgradeDescription: null,
        fileSize: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: 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
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.recordFileSucc = []
      this.open = true;
      this.readOnly = false
      this.title = "添加";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getFactoryAppManage(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.readOnly = false
        this.title = "修改";
      });
    },

    //下载按钮操作
    handleDownload(url,name){
      // window.location.href = process.env.VUE_APP_BASE_API + '/fileManage/downloadFile?url=' + url + '&name=' + name
      this.$minio.downloadFile(url,name)
    },

    /** 详情按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id || this.ids
      getFactoryAppManage(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.readOnly = true
        this.title = "详情";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFactoryAppManage(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.recordFileSucc.filter(res => {
              let obj = {
                version: this.form.version,
                versionValue: this.form.versionValue,
                phoneBrand: this.form.phoneBrand,
                fileName: res.appendixName,
                filePath: res.appendixPath,
                status: this.form.status,
                upgradeDescription: this.form.upgradeDescription,
                // fileId: res.fileId,
                // fileType: res.appendixName.substring(res.appendixName.lastIndexOf(".") + 1, res.appendixName.length),
                fileTime: new Date(),
                createBy: res.createBy,
                fileSize: res.fileSize.toFixed(2),
              }
              addFactoryAppManage(obj).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            })

          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delFactoryAppManage(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有app版本管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportFactoryAppManage(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  },
  mounted() {

      this.$nextTick(function() {
          this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160
      })
  }
};

</script>

<style scoped>
  .form-item{
    width: 100%;
  }
</style>

2、文件上传组件

javascript 复制代码 
<!--文件上传组件（限制1个）-->
<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="recordUpload"
      :headers="headers"
      :action="uploadUrl"
      :on-remove="handleRemoveRecord"
      :on-progress="uploadProcess"
      :before-upload="beforeUpload"
      :on-success="handleUpFileSuccess"
      :file-list="recordFileList"
    >
      <el-button size="small" type="primary" style="width: 100%">点击上传</el-button>
    </el-upload>

<!--    <div class="el-upload__tip" slot="tip">
      <template>
        最多上传一个文件，每个文件最大不能超过20MB！！！
      </template>
    </div>-->
    <!--    文件上传遮罩-->
    <el-dialog :visible.sync="uploadFlag" :show-close="false">
      <div class="sysFolderManage-body"></div>
      <el-progress v-if="uploadFlag == true" :percentage="videoUploadPercent">
      </el-progress>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  name: "upRecord",
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/fileManage/uploadWithManage",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadFlag: false,
      videoUploadPercent: 0,
      recordFileList: [],
      recordFileSucc: []
    }
  },
  methods: {
    beforeUpload(file) {
      if (this.recordFileSucc.length === 1) {
        this.msgError("单次最多上传3个文件！")
        return false
      }
      //判断文件大小
      var limitFileSize = file.size / 1024 / 1024 < 30
      if (!limitFileSize) {
        this.msgError("上传文件大小不能超过 30MB!")
        return limitFileSize
      }
    },
    /**文件上传遮罩 进度条*/
    uploadProcess(event, file, fileList) {
      this.uploadFlag = true;
      this.videoUploadPercent = parseInt(event.percent);
    },
    //文件上传处理
    handleUpFileSuccess(res, file, recordList) {
      if (res.code != 200) {
        this.msgError(res.msg);
      } else {
        this.uploadFlag = false;
        this.recordFileSucc = []
        this.handleFileList(recordList)
        this.$emit('sendRecordData', this.recordFileSucc);
      }
    },
    //文件删除处理
    handleRemoveRecord(file, recordList) {
      this.recordFileSucc = []
      this.handleFileList(recordList)
      this.$emit('sendRecordData', this.recordFileSucc);
    },
    //数据转换
    handleFileList(recordList) {
      recordList.filter(a => {
        this.recordFileSucc.push({
          fileId: a.response.appendix.id,
          fileSize: a.size / 1024 / 1024,
          appendixName: a.response.appendix.appendixName,
          appendixPath: a.response.appendix.appendixPath,
          createBy: a.response.appendix.createBy
        })
      })
    }
  }
}
</script>
相关推荐
阿伟来咯~4 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端8 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8688 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦16 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解