增加远程升级页面的接口和列表权限

src/hooks/useCommon.ts

@@ -39,7 +39,7 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
 
   const loading = ref(false)
 
-  const tableData = ref<T[] | any[]>([])
+  const tableData = ref<T[] | any>([])
 
   const getList = async (pageNum?: number) => {
     typeof pageNum === 'number' && (params.pageNum = pageNum);

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

@@ -1,14 +1,14 @@
 <!-- 远程升级 -->
 <template>
-	<div class="page">
-		<el-card shadow="nover" class="page-full-part">
-			<h1 class="mb14">当前系统版本号：{{ tableData.currentVersion }}</h1>
-			<el-card>
-				<template #header>
-					<div class="card-header flex justify-between">
-						<h4>可升级系统列表</h4>
-						<el-button size="small" class="ml6" type="primary" @click="dialogVisible = true" v-auth="'upgrade'">本地升级</el-button>
-						<!-- <el-upload
+  <div class="page">
+    <el-card shadow="nover" class="page-full-part">
+      <h1 class="mb14">当前系统版本号：{{ tableData.currentVersion }}</h1>
+      <el-card>
+        <template #header>
+          <div class="card-header flex justify-between">
+            <h4>可升级系统列表</h4>
+            <el-button size="small" class="ml6" type="primary" @click="dialogVisible = true" v-auth="'upgrade'">本地升级</el-button>
+            <!-- <el-upload
 							ref="upload"
 							class="upload-demo"
 							:action="action"
@@ -28,139 +28,135 @@
 								</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="description" show-overflow-tooltip />
-					<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)" v-auth="'upgrade'">升级</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-			</el-card>
-		</el-card>
+          </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="版本号" v-col="'version'" align="center" prop="version" width="160" show-overflow-tooltip />
+          <el-table-column label="描述" v-col="'description'" align="center" prop="description" show-overflow-tooltip />
+          <el-table-column label="发布时间" v-col="'createdAt'" 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="操作" v-col="'handle'" width="180" align="center" fixed="right">
+            <template #default="scope">
+              <el-button size="small" type="success" link @click="handleUpgrade(scope.row)" v-auth="'upgrade'">升级</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>
+    <!-- 本地上传弹窗 -->
+    <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>
+        </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 { 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'
+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: '' })
+const { params, tableData, getList, loading } = useSearch(api.upgrade.getList, "list", { keyWord: "" });
 
-getList()
+getList();
 
-const dialogVisible = ref(false)
-const uploadLoading = ref(false)
+const dialogVisible = ref(false);
+const uploadLoading = ref(false);
 
+const upload = ref<UploadInstance>();
 
-const upload = ref<UploadInstance>()
+const file = ref<File | null>(null);
 
-const file = ref(null);
-
-
-
-const handleChange: UploadProps['onChange'] = (uploadFile) => {
-	file.value = uploadFile.raw
-}
+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
-	})
-
-}
-
+  uploadLoading.value = true;
+  const formData = new FormData();
+  formData.append("file", file.value!);
+  api.upgrade
+    .upgradeFile(formData)
+    .then(() => {
+      ElMessage.success("上传成功");
+      dialogVisible.value = false;
+    })
+    .catch(() => {
+      ElMessage.error("上传失败");
+    })
+    .finally(() => {
+      uploadLoading.value = false;
+    });
+};
 
 /**
  * 升级版本
  */
 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('升级失败')
-				})
-		})
-		.catch(() => {
-			ElMessage({
-				type: 'info',
-				message: '已取消升级',
-			})
-		})
-}
+  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("升级失败");
+        });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消升级",
+      });
+    });
+};
 </script>
 <style lang="scss" scoped>
-	
-	::v-deep .el-dialog__body {
-		min-height: 200px!important;
-	}
-</style>
+::v-deep .el-dialog__body {
+  min-height: 200px !important;
+}
+</style>