<template>
|
<div class="app-container">
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="Upload" @click="openUploadDialog">上传APK</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table v-loading="loading" :data="versionList">
|
<el-table-column label="ID" prop="id" align="center" width="80" />
|
<el-table-column label="应用名称" prop="name" align="center" min-width="150" />
|
<el-table-column label="版本号" prop="version" align="center" width="120" />
|
<el-table-column label="创建时间" prop="createTime" align="center" width="170">
|
<template #default="scope">
|
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="更新时间" prop="updateTime" align="center" width="170">
|
<template #default="scope">
|
<span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建人" prop="createUser" align="center" width="100" />
|
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button link type="primary" @click="downloadAttachment(scope.row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
v-model:page="queryParams.current"
|
v-model:limit="queryParams.size"
|
@pagination="getList"
|
/>
|
|
<el-dialog title="上传APK" v-model="uploadOpen" width="560px" append-to-body @close="resetUploadForm">
|
<el-form ref="uploadRef" :model="uploadForm" :rules="uploadRules" label-width="90px">
|
<el-form-item label="应用名称" prop="name">
|
<el-input v-model="uploadForm.name" placeholder="请输入应用名称" />
|
</el-form-item>
|
<el-form-item label="版本号" prop="version">
|
<el-input v-model="uploadForm.version" placeholder="请输入版本号" />
|
</el-form-item>
|
<el-form-item label="APK文件" prop="file">
|
<el-upload
|
:auto-upload="false"
|
:show-file-list="true"
|
:limit="1"
|
accept=".apk"
|
:on-change="handleApkChange"
|
:on-remove="handleApkRemove"
|
:on-exceed="handleApkExceed"
|
:before-upload="beforeApkUpload"
|
>
|
<el-button type="primary">选择APK文件</el-button>
|
<template #tip>
|
<div class="el-upload__tip">只能上传 APK 文件，且不超过 200MB</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" :loading="uploading" @click="submitUpload">确 定</el-button>
|
<el-button @click="uploadOpen = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="SystemAppVersion">
|
import { listAppVersion, uploadApk } from "@/api/system/appVersion";
|
|
const { proxy } = getCurrentInstance();
|
|
const loading = ref(false);
|
const versionList = ref([]);
|
const total = ref(0);
|
|
const queryParams = reactive({
|
current: 1,
|
size: 10,
|
});
|
|
const uploadOpen = ref(false);
|
const uploading = ref(false);
|
const uploadForm = reactive({
|
name: "",
|
version: "",
|
file: null,
|
});
|
|
const uploadRules = {
|
name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
|
version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
file: [{ required: true, message: "请上传APK文件", trigger: "change" }],
|
};
|
|
function normalizeListResp(res) {
|
const data = res?.data || {};
|
const records = data.records || res?.rows || [];
|
const totalNum = Number(data.total ?? res?.total ?? 0);
|
return {
|
records: Array.isArray(records) ? records : [],
|
total: Number.isNaN(totalNum) ? 0 : totalNum,
|
};
|
}
|
|
function getList() {
|
loading.value = true;
|
listAppVersion(queryParams)
|
.then(res => {
|
const result = normalizeListResp(res);
|
versionList.value = result.records;
|
total.value = result.total;
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function openUploadDialog() {
|
resetUploadForm();
|
uploadOpen.value = true;
|
}
|
|
function resetUploadForm() {
|
uploadForm.name = "";
|
uploadForm.version = "";
|
uploadForm.file = null;
|
proxy.resetForm("uploadRef");
|
}
|
|
function beforeApkUpload(file) {
|
const isApk = /\.apk$/i.test(file.name);
|
if (!isApk) {
|
proxy.$modal.msgWarning("只能上传APK文件");
|
return false;
|
}
|
const isLt200M = file.size / 1024 / 1024 < 200;
|
if (!isLt200M) {
|
proxy.$modal.msgWarning("APK 文件大小不能超过 200MB");
|
return false;
|
}
|
return true;
|
}
|
|
function handleApkChange(file) {
|
if (!file || !file.raw) return;
|
if (!beforeApkUpload(file.raw)) {
|
uploadForm.file = null;
|
proxy.$refs.uploadRef?.clearValidate("file");
|
return;
|
}
|
uploadForm.file = file.raw;
|
}
|
|
function handleApkRemove() {
|
uploadForm.file = null;
|
}
|
|
function handleApkExceed() {
|
proxy.$modal.msgWarning("只能上传一个APK文件");
|
}
|
|
function downloadAttachment(row) {
|
const filePath =
|
(row.commonFileList &&
|
row.commonFileList.length > 0 &&
|
row.commonFileList[0].url) ||
|
row.url;
|
if (!filePath) {
|
proxy.$modal.msgError("下载链接不存在");
|
return;
|
}
|
|
const link = document.createElement("a");
|
const rawName = String(row.name || "").trim();
|
const fallbackName = String(filePath).split("/").pop()?.split("?")[0] || "app";
|
const baseName = rawName || fallbackName;
|
const downloadName = /\.apk$/i.test(baseName) ? baseName : `${baseName}.apk`;
|
console.log(downloadName,filePath,'downloadName,filePath');
|
link.href = filePath;
|
link.download = downloadName;
|
link.target = "_blank";
|
link.rel = "noopener noreferrer";
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
}
|
|
function submitUpload() {
|
proxy.$refs.uploadRef.validate(valid => {
|
if (!valid) return;
|
const formData = new FormData();
|
formData.append("name", uploadForm.name);
|
formData.append("version", uploadForm.version);
|
formData.append("file", uploadForm.file);
|
|
uploading.value = true;
|
uploadApk(formData)
|
.then(() => {
|
proxy.$modal.msgSuccess("上传成功");
|
uploadOpen.value = false;
|
getList();
|
})
|
.finally(() => {
|
uploading.value = false;
|
});
|
});
|
}
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
