<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="180" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button link type="primary" @click="downloadAttachment(scope.row)">下载</el-button>
|
<el-button link type="success" @click="openQrDialog(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="storageBlobDTOList">
|
<FileUpload v-model:file-list="uploadForm.storageBlobDTOList" :limit="1" :file-type="['apk']"
|
:file-size="200"/>
|
</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>
|
|
<el-dialog
|
v-model="qrOpen"
|
title="扫码下载"
|
width="460px"
|
append-to-body
|
class="download-qr-dialog"
|
>
|
<div class="download-qr-content">
|
<div class="app-meta-card">
|
<div class="meta-row">
|
<span class="meta-label">应用名称</span>
|
<span class="meta-value">{{ qrCurrentRow?.name || "-" }}</span>
|
</div>
|
<div class="meta-row">
|
<span class="meta-label">版本编号</span>
|
<span class="meta-value">{{ qrCurrentRow?.version || "-" }}</span>
|
</div>
|
</div>
|
<div class="qr-box">
|
<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="download qr code" class="qr-image" />
|
<div class="qr-tip">请使用手机扫码下载应用</div>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="qrOpen = false">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="SystemAppVersion">
|
import {listAppVersion, add} from "@/api/system/appVersion";
|
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
|
import QRCode from "qrcode";
|
|
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 qrOpen = ref(false);
|
const qrCodeUrl = ref("");
|
const qrCurrentRow = ref(null);
|
const uploadForm = reactive({
|
name: "",
|
version: "",
|
storageBlobDTOList: null,
|
});
|
|
const uploadRules = {
|
name: [{required: true, message: "请输入应用名称", trigger: "blur"}],
|
version: [{required: true, message: "请输入版本号", trigger: "blur"}],
|
storageBlobDTOList: [{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.storageBlobDTOList = null;
|
proxy.resetForm("uploadRef");
|
}
|
|
|
function downloadAttachment(row) {
|
window.open(row.downloadURL, "_blank");
|
}
|
|
async function openQrDialog(row) {
|
if (!row?.downloadURL) {
|
proxy.$modal.msgError("当前记录缺少下载地址，无法生成二维码");
|
return;
|
}
|
try {
|
qrCodeUrl.value = await QRCode.toDataURL(row.downloadURL, {
|
width: 220,
|
margin: 2,
|
errorCorrectionLevel: "M",
|
color: {
|
dark: "#1f2937",
|
light: "#ffffff",
|
},
|
});
|
qrCurrentRow.value = row;
|
qrOpen.value = true;
|
} catch (error) {
|
proxy.$modal.msgError("二维码生成失败，请稍后重试");
|
}
|
}
|
|
function submitUpload() {
|
proxy.$refs.uploadRef.validate(valid => {
|
if (!valid) return;
|
uploading.value = true;
|
add(uploadForm)
|
.then(() => {
|
proxy.$modal.msgSuccess("上传成功");
|
uploadOpen.value = false;
|
getList();
|
})
|
.finally(() => {
|
uploading.value = false;
|
});
|
});
|
}
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped>
|
.download-qr-content {
|
padding: 4px 4px 8px;
|
}
|
|
.app-meta-card {
|
border-radius: 10px;
|
padding: 12px 14px;
|
margin-bottom: 16px;
|
background: linear-gradient(135deg, #f0f7ff 0%, #ecfdf5 100%);
|
border: 1px solid #dbeafe;
|
}
|
|
.meta-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
line-height: 26px;
|
}
|
|
.meta-row + .meta-row {
|
margin-top: 6px;
|
}
|
|
.meta-label {
|
font-size: 13px;
|
color: #64748b;
|
}
|
|
.meta-value {
|
max-width: 260px;
|
font-size: 14px;
|
color: #0f172a;
|
font-weight: 600;
|
word-break: break-all;
|
text-align: right;
|
}
|
|
.qr-box {
|
border: 1px solid #e2e8f0;
|
border-radius: 12px;
|
padding: 18px 12px 14px;
|
text-align: center;
|
background: #ffffff;
|
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
}
|
|
.qr-image {
|
width: 220px;
|
height: 220px;
|
border-radius: 8px;
|
border: 1px solid #e5e7eb;
|
padding: 8px;
|
background: #fff;
|
}
|
|
.qr-tip {
|
margin-top: 10px;
|
font-size: 13px;
|
color: #64748b;
|
}
|
</style>
|
