feat: 增加本地升级功能

src/api/system/index.ts

@@ -230,5 +230,6 @@ export default {
   upgrade: {
     getList: (params: object) => get('/upgrade/versions', params),
     upgrade: (data: object) => post('/upgrade/upgrade', data),
+    upgradeFile: (data: object) => post('/upgrade/upgradeFile', data),
   }
 }

src/views/system/monitor/upgrade/index.vue

@@ -2,82 +2,165 @@
 <template>
 	<div class="page">
 		<el-card shadow="nover" class="page-full-part">
-			<h1 class="mb14">
-				当前系统版本号：{{ tableData.currentVersion }}
-			</h1>
+			<h1 class="mb14">当前系统版本号：{{ tableData.currentVersion }}</h1>
 			<el-card>
 				<template #header>
-					<div class="card-header">
+					<div class="card-header flex justify-between">
 						<h4>可升级系统列表</h4>
+						<el-button size="small" class="ml6" type="primary" @click="dialogVisible = true">本地升级</el-button>
+						<!-- <el-upload
+							ref="upload"
+							class="upload-demo"
+							:action="action"
+							:limit="1"
+							:on-exceed="handleExceed"
+							:auto-upload="false"
+						>
+							<template #trigger>
+								<el-button type="primary">本地升级</el-button>
+							</template>
+							<el-button class="ml-3" type="success" @click="submitUpload">
+								upload to server
+							</el-button>
+							<template #tip>
+								<div class="el-upload__tip text-red">
+									limit 1 file, new file will cover the old file
+								</div>
+							</template>
+						</el-upload> -->
 					</div>
 				</template>
 				<el-table :data="tableData.availableVersions" style="width: 100%" v-loading="loading">
 					<el-table-column label="序号" align="center" width="100">
 						<template #default="{ $index }">{{ params.pageSize * (params.pageNum - 1) + ($index + 1) }} </template>
 					</el-table-column>
-					<el-table-column label="版本号" align="center" prop="version" width="160" show-overflow-tooltip/>
+					<el-table-column label="版本号" align="center" prop="version" width="160" show-overflow-tooltip />
 					<el-table-column label="描述" align="center" prop="description" show-overflow-tooltip />
-					<el-table-column label="创建日期" align="center" prop="createdAt" width="240">
+					<el-table-column label="发布时间" align="center" prop="createdAt" width="240">
 						<template #default="scope">
 							{{ dayjs(scope.row.releaseDate).format('YYYY-MM-DD HH:mm:ss') }}
 						</template>
 					</el-table-column>
 					<el-table-column label="操作" width="180" align="center" fixed="right" v-col="'handle'">
 						<template #default="scope">
-							<el-button  size="small" type="success" link @click="handleUpgrade(scope.row, 1)" >升级</el-button>
+							<el-button size="small" type="success" link @click="handleUpgrade(scope.row, 1)">升级</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
 			</el-card>
 		</el-card>
+
+		<!-- 本地上传弹窗 -->
+		<el-dialog v-model="dialogVisible" title="上传升级包" center>
+			<div v-loading="uploadLoading">
+				<el-upload  :on-change="handleChange" ref="upload" :auto-upload="false" class="upload-demo" drag action="action">
+					<el-icon class="el-icon--upload">
+						<ele-UploadFilled />
+					</el-icon>
+					<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
+					<!-- <template #tip>
+						<div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+					</template> -->
+				</el-upload>
+			</div>
+			<template #footer>
+      <span class="dialog-footer">
+        <el-button :disabled="uploadLoading" @click="dialogVisible = false">Cancel</el-button>
+        <el-button :disabled="uploadLoading|| !file" type="primary" @click="submitUpload">
+          上传升级包
+        </el-button>
+      </span>
+    </template>
+		</el-dialog>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadProps, UploadInstance } from 'element-plus'
+
 import api from '/@/api/system'
 import { useSearch } from '/@/hooks/useCommon'
 import dayjs from 'dayjs'
 
 const { params, tableData, getList, loading } = useSearch(api.upgrade.getList, 'list', { keyWord: '' })
 
-getList();
+getList()
+
+const dialogVisible = ref(false)
+const uploadLoading = ref(false)
+
+
+const upload = ref<UploadInstance>()
+
+const file = ref(null);
+
+
+
+const handleChange: UploadProps['onChange'] = (uploadFile) => {
+	file.value = uploadFile.raw
+}
+const submitUpload = () => {
+	uploadLoading.value = true
+	const formData = new FormData()
+	formData.append('file', file.value)
+	api.upgrade.upgradeFile(formData).then((res: any) => {
+		ElMessage.success('上传成功');
+		dialogVisible.value = false;
+	}).catch(() => {
+		ElMessage.error('上传失败')
+	}).finally(() => {
+		uploadLoading.value = false
+	})
+
+}
+
 
 /**
  * 升级版本
  */
-const handleUpgrade = (row:any) => {
+const handleUpgrade = (row: any) => {
 	ElMessageBox.confirm('确定要升级系统吗？此操作不可逆。', '升级确认', {
-	confirmButtonText: '确定',
-	cancelButtonText: '取消',
-	type: 'warning',
-})
-	.then(() => {
-		ElMessage({
-			type: 'success',
-			message: '已开始执行升级任务',
-		});
-		api.upgrade.upgrade({
-			targetVersion: row.version
-		}).then((res:any) => {
-			getList();
-			setTimeout(() => {
-				if(res.data.error) {
-					ElMessage.error(res.data.message)
-				}else {
-					ElMessage.success('升级成功');
-					getList();
-				}
-			}, 1000)
-		}).catch(() => {
-			ElMessage.error('升级失败')
-		})
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
 	})
-	.catch(() => {
-		ElMessage({
-			type: 'info',
-			message: '已取消升级',
-		});
-	});
+		.then(() => {
+			ElMessage({
+				type: 'success',
+				message: '已开始执行升级任务',
+			})
+			api.upgrade
+				.upgrade({
+					targetVersion: row.version,
+				})
+				.then((res: any) => {
+					getList()
+					setTimeout(() => {
+						if (res.data.error) {
+							ElMessage.error(res.data.message)
+						} else {
+							ElMessage.success('升级成功')
+							getList()
+						}
+					}, 1000)
+				})
+				.catch(() => {
+					ElMessage.error('升级失败')
+				})
+		})
+		.catch(() => {
+			ElMessage({
+				type: 'info',
+				message: '已取消升级',
+			})
+		})
 }
-</script>
+</script>
+<style lang="scss" scoped>
+	
+	::v-deep .el-dialog__body {
+		min-height: 200px!important;
+	}
+</style>