增加管理员版本管理页面

This commit is contained in:
YeMingfei666 2024-08-28 18:30:33 +08:00
parent 18b6509b26
commit 7d3251f1d6
8 changed files with 811 additions and 0 deletions

32
src/api/class-api.js Normal file
View File

@ -0,0 +1,32 @@
import request from '@/utils/request'
class API {
constructor(url, req) {
const map = {
add: 'POST',
del: 'DELETE',
update: 'PUT',
get: 'GET'
}
this.url = url
for (let key in map) {
this[key] = function (data) {
data = Array.isArray(data) ? data : {
...data, shopId: localStorage.getItem("shopId"),
}
if (key === 'del') {
delete data.shopId
}
const par={ url, method: map[key] }
if(key==='get'){
par.params=data
}else{
par.data=data
}
return request(par)
}
}
}
}
export default API

38
src/api/version.js Normal file
View File

@ -0,0 +1,38 @@
import $api from './class-api'
import request from '@/utils/request'
export const $version = new $api('/api/tbVersion')
/**
* 修改当前选中 版本
* @returns
*/
export function $upSel(data) {
return request({
url: 'upSel',
method: "put",
data: {
shopId: localStorage.getItem("shopId"),
...data
}
});
}
/**
* 上传版本文件
* @returns
*/
export function $uploadVersionFile(file, par) {
var data = new FormData()
data.append('file', file)
for(let i in par){
if(i!=='file'){
data.append(i, par[i])
}
}
return request({
url: 'api/qiNiuContent/uploadVersionFile',
method: "post",
data
});
}

View File

@ -17,6 +17,7 @@ const getters = {
fileUploadApi: state => state.api.fileUploadApi,
updateAvatarApi: state => state.api.updateAvatarApi,
qiNiuUploadApi: state => state.api.qiNiuUploadApi,
versionUploadApi: state => state.api.versonUploadApi,
sqlApi: state => state.api.sqlApi,
swaggerApi: state => state.api.swaggerApi,
sidebarRouters: state => state.permission.sidebarRouters

View File

@ -18,6 +18,8 @@ const api = {
swaggerApi: baseUrl + '/doc.html',
// 文件上传
fileUploadApi: baseUrl + '/api/localStorage',
// 上传版本文件
versonUploadApi: baseUrl + '/api/uploadVersionFile',
// baseUrl
baseApi: baseUrl
}

View File

@ -0,0 +1,157 @@
<template>
<el-dialog
:title="title"
width="500px"
:visible.sync="dialogVisible"
@close="diaClose"
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="120px"
label-position="left"
>
<el-form-item label="版本文件">
<uploadFile ref="uploadImg" :limit="1" @remove="uploadRemove" />
<div class="tips"></div>
</el-form-item>
<el-form-item label="版本号" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="onSubmitHandle"> </el-button>
</span>
</el-dialog>
</template>
<script>
import uploadFile from "./upload-file";
import { $uploadVersionFile } from "@/api/version";
const form = {
file: "",
name: "",
};
export default {
components: {
uploadFile,
},
data() {
return {
title: "",
dialogVisible: false,
rules: {
name: [
{
required: true,
message: "版本号必填",
trigger: "blur",
},
],
},
form: { ...form },
};
},
mounted() {},
methods: {
restForm() {
console.log("restForm");
console.log(form);
this.form = { ...form };
this.$refs.uploadImg.clearFiles();
},
diaClose() {
this.restForm();
},
uploadSuccess(res) {
this.form.img = res[0];
console.log(this.form.img);
},
uploadRemove() {
this.form.img = "";
},
//
onSubmitHandle() {
console.log(this.form);
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
let res = "";
if (this.form.id) {
//
res = await tbShopSongEdit(this.form);
this.$notify({
title: "成功",
message: `修改成功`,
type: "success",
});
} else {
//
const file=this.$refs.uploadImg.getFileList()[0]
console.log(this.form)
res = await $uploadVersionFile(file,this.form);
this.$notify({
title: "成功",
message: `添加成功`,
type: "success",
});
}
this.close();
this.$emit("success", res);
} catch (error) {
console.log(error);
}
}
});
},
async show(obj = {}) {
console.log(obj);
// this.form=this.$options.data().form
this.dialogVisible = true;
this.title = "上传版本文件";
if (obj && obj.id) {
this.title = "编辑版本文件";
this.form = {
...obj,
};
}
if (obj && obj.hasOwnProperty("img") && obj.img) {
console.log(obj.img);
this.form.img = obj.img;
requestAnimationFrame(() => {
this.$refs.uploadImg.fileList = [
{
url: obj.img,
},
];
});
}
},
close() {
this.restForm();
this.dialogVisible = false;
},
},
};
</script>
<style scoped lang="scss">
.goods_info {
background-color: #f9f9f9;
padding: 10px;
display: flex;
align-items: center;
.info {
flex: 1;
padding-left: 10px;
}
}
</style>

View File

@ -0,0 +1,211 @@
<template>
<el-dialog
:title="title"
width="500px"
:visible.sync="dialogVisible"
@close="diaClose"
>
<el-form
v-loading="loading"
:element-loading-text="loadingText"
element-loading-spinner="el-icon-loading"
ref="form"
:model="form"
:rules="rules"
label-width="120px"
label-position="left"
>
<el-form-item label="平台">
<el-select
v-model="form.source"
placeholder="请选择平台"
style="width: 100%"
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in sources"
:key="item.value"
/>
</el-select>
<div class="tips"></div>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="form.version"></el-input>
</el-form-item>
<el-form-item label="是否强制更新" prop="isUp">
<el-radio-group v-model="form.isUp">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="更新提示内容" prop="message">
<el-input type="textarea" v-model="form.message"></el-input>
</el-form-item>
<el-form-item label="版本文件">
<uploadFile ref="uploadFile" @success="changeHasUpload" :limit="1" @remove="uploadRemove" />
<div class="tips"></div>
</el-form-item>
<div class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="onSubmitHandle"> </el-button>
</div>
</el-form>
</el-dialog>
</template>
<script>
import uploadFile from "./upload-file";
import { $uploadVersionFile, $version } from "@/api/version";
const form = {
source: "PC",
version: "",
isUp: 0,
message: "",
url: "",
};
export default {
components: {
uploadFile,
},
data() {
return {
loading: false,
loadingText:'',
sources: [
{ label: "PC", value: "PC" },
{ label: "APP", value: "APP" },
],
title: "",
dialogVisible: false,
rules: {
version: [
{
required: true,
message: "版本号必填",
trigger: "blur",
},
],
},
form: { ...form },
//
hasUpload:true
};
},
mounted() {},
methods: {
changeHasUpload(){
this.hasUpload=false
},
restForm() {
console.log("restForm");
console.log(form);
this.form = { ...form };
this.loadingText=''
this.loading=false
this.$refs.uploadFile.clearFiles();
},
diaClose() {
this.restForm();
},
uploadSuccess(res) {
this.form.img = res[0];
console.log(this.form.img);
},
uploadRemove() {
this.form.img = "";
},
//
onSubmitHandle() {
console.log(this.form);
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
const { version } = this.form;
let fileRes=''
const file = this.$refs.uploadFile.getFileList();
if(!this.hasUpload&&file){
this.loadingText='文件上传中,请耐心等待。。。!'
this.loading = true;
fileRes = await $uploadVersionFile(file, { name:version });
this.loading = false;
}
let res = "";
if (this.form.id) {
//
res = await $version.update({...this.form,url:fileRes?fileRes.data:this.form.url});
this.$notify({
title: "成功",
message: `修改成功`,
type: "success",
});
} else {
//
if (file) {
console.log(1);
}
res = await $version.add({...this.form,url:fileRes?fileRes.data:this.form.url});
this.$notify({
title: "成功",
message: `添加成功`,
type: "success",
});
}
this.close();
this.$emit("success", res);
} catch (error) {
console.log(error);
}
}
});
},
async show(obj = {}) {
console.log(obj);
// this.form=this.$options.data().form
this.dialogVisible = true;
this.title = "新增版本";
if (obj && obj.id) {
this.title = "编辑版本";
this.form = {
...obj,
};
requestAnimationFrame(()=>{
this.$refs.uploadFile.fileList = [{
url: obj.url,
name: obj.url,
}]
})
}
},
close() {
this.restForm();
this.dialogVisible = false;
},
},
};
</script>
<style scoped lang="scss">
.dialog-footer{
display: flex;
margin-top: 30px;
justify-content: right;
}
.goods_info {
background-color: #f9f9f9;
padding: 10px;
display: flex;
align-items: center;
.info {
flex: 1;
padding-left: 10px;
}
}
</style>

View File

@ -0,0 +1,125 @@
<template>
<div>
<el-upload
ref="upload"
:action="versionUploadApi"
:auto-upload="true"
:headers="headers"
:file-list="fileList"
:limit="limit"
:show-file-list="true"
:http-request="uploadVersionFile"
:list-type="type"
:multiple="limit > 1"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="onExceed"
:on-remove="handleRemove"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :z-index="99">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { Notification } from "element-ui";
export default {
computed: {
...mapGetters(["versionUploadApi"]),
},
props: {
type: {
type: String,
default: "text",
},
limit: {
type: Number,
default: 1,
},
},
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
fileList: [],
// files: [],
headers: {
Authorization: getToken(),
},
};
},
methods: {
beforeUpload(file) {
// const isExe = file.name.endsWith(".exe");
// if (!isExe) {
// this.$message.error(".exe");
// return false; //
// }
return true; //
},
uploadVersionFile(e) {
this.fileList.push(e.file);
this.$emit("success");
},
getFileList() {
if (this.limit == 1) {
return this.fileList[0];
} else {
return this.fileList;
}
},
handleSuccess(response, file, fileList) {
console.log("handleSuccess");
setTimeout(() => {
this.fileList.push({
url: response.data[0],
id: response.data.id,
});
}, 100);
// this.files = response.data
this.$emit("success", response.data);
},
//
handleError(e, file, fileList) {
// console.log(e)
const m = JSON.parse(e.message);
Notification.error({
title: m.message,
duration: 5000,
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
onExceed() {
this.$notify.error({
title: "错误",
message: `最多上传${this.limit}个文件`,
});
},
handleRemove(file, fileList) {
console.log(file);
let arr = fileList.map((item) => item.url);
//
let index = this.fileList.findIndex((ele) => ele.url == file.url);
this.fileList.splice(index, 1);
this.$emit("remove", arr);
},
clearFiles() {
this.$refs.upload.clearFiles();
},
},
};
</script>
<style>
/* .el-upload-list__item {
transition: none;
} */
</style>

View File

@ -0,0 +1,245 @@
<template>
<div class="app-container">
<div class="head-container">
<el-row :gutter="20">
<el-col :span="3">
<el-input
v-model="query.version"
size="small"
clearable
placeholder="请输入版本号"
style="width: 100%"
class="filter-item"
@keyup.enter.native="getTableData"
/>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="queryHandle">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
</el-col>
</el-row>
</div>
<div class="head-container">
<el-row>
<el-col>
<el-button @click="addVersionShow" type="primary" icon="el-icon-plus"
>新增版本</el-button
>
</el-col>
</el-row>
</div>
<div class="head-container" id="table_drag">
<el-table
ref="table"
:data="tableData.data"
v-loading="tableData.loading"
row-key="id"
>
<el-table-column prop="id" label="ID" width="50px"></el-table-column>
<el-table-column prop="source" label="平台"></el-table-column>
<el-table-column prop="version" label="版本号"></el-table-column>
<el-table-column label="当前选中版本" prop="sel">
<template v-slot="scope">
<el-switch
v-if="scope.row.sel"
disabled
@change="changeSel($event, scope.row)"
v-model="scope.row.sel"
:active-value="1"
:inactive-value="0"
></el-switch>
<el-button @click="changeSel(scope.row)" v-else type="primary" size="mini">设置为当前版本</el-button>
</template>
</el-table-column>
<el-table-column label="是否强制更新" prop="createdAt">
<template v-slot="scope">
<el-switch
v-model="scope.row.isUp"
:active-value="1"
:inactive-value="0"
@change="changeIsup($event, scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="更新提示内容" prop="message"> </el-table-column>
<el-table-column label="下载地址" prop="url">
<template v-slot="scope">
<a :href="scope.row.url">{{ scope.row.url }}</a>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createdAt">
<template v-slot="scope">
{{ dayjs(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updatedAt">
<template v-slot="scope">
<span v-if="scope.row.updatedAt">{{
dayjs(scope.row.updatedAt).format("YYYY-MM-DD HH:mm:ss")
}}</span>
<span v-else></span>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template v-slot="scope">
<el-button type="text" @click="editClick(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-popconfirm
title="确定删除吗?"
@confirm="delTableHandle([scope.row.id])"
>
<el-button
type="text"
icon="el-icon-delete"
style="margin-left: 20px !important"
slot="reference"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination
:total="tableData.total"
@size-change="handleSizeChange"
:current-page="tableData.page + 1"
:page-size="tableData.size"
@current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
</div>
<add-version ref="refAddVersion" @success="refresh"></add-version>
</div>
</template>
<script>
import dayjs from "dayjs";
import { $version,$upSel } from "@/api/version";
import addVersion from "./components/add-version";
export default {
components: { addVersion },
data() {
return {
dayjs,
query: {
version: "",
},
categorys: [],
tableData: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0,
},
};
},
async mounted() {
await this.getTableData();
},
methods: {
addVersionShow() {
this.$refs.refAddVersion.show();
},
editClick(item){
this.$refs.refAddVersion.show(item);
},
//
queryHandle() {
localStorage.setItem("shopIndexQuery", JSON.stringify(this.query));
this.getTableData();
},
async changeIsup(e,item){
const res= await $version.update(item)
this.getTableData()
},
async changeSel(item){
const res= await $upSel(item)
this.getTableData()
},
//
resetHandle() {
this.query.name = "";
this.query.categoryId = "";
this.query.typeEnum = "";
this.query.productId = "";
this.tableData.page = 0;
this.getTableData();
},
//
paginationChange(e) {
this.tableData.page = e - 1;
this.getTableData();
},
refresh(){
this.tableData.page=0
this.getTableData()
},
//
async getTableData() {
try {
this.tableData.loading = true;
const res = await $version.get({
page: this.tableData.page,
pageSize: this.tableData.size,
version: this.query.version,
});
this.tableData.loading = false;
this.tableData.data = res.content;
this.tableData.total = res.totalElements;
} catch (error) {
console.log(error);
}
},
handleSizeChange(val) {
this.tableData.size = val;
this.getTableData();
},
//
async delTableHandle(ids) {
try {
await $version.del(ids);
this.getTableData();
} catch (error) {
console.log(error);
}
},
},
};
</script>
<style scoped lang="scss">
.handle {
font-size: 18px;
color: #999;
&:hover {
cursor: grab;
}
}
.shop_info {
display: flex;
.info {
flex: 1;
padding-left: 8px;
display: flex;
flex-direction: column;
.tag_wrap {
display: flex;
}
}
}
</style>