fix: 修改安装包模块出现的问题

This commit is contained in:
张洋川 2024-04-12 11:49:20 +08:00
parent 1f7755386d
commit 58e0e2c7aa
7 changed files with 390 additions and 159 deletions

View File

@ -1,49 +1,50 @@
<template>
<div class="component-upload-image">
<el-upload
multiple
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
:on-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= this.limit}"
ref="imageUpload"
:action="uploadImgUrl"
:before-upload="handleBeforeUpload"
:class="{hide: this.fileList.length >= this.limit}"
:file-list="fileList"
:headers="headers"
:limit="limit"
:list-type="listType"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview"
:on-remove="handleDelete"
:on-success="handleUploadSuccess"
:show-file-list="true"
multiple
>
<i class="el-icon-plus"></i>
<i v-if="listType=='picture-card'" class="el-icon-plus"></i>
<el-button v-else icon="el-icon-upload" size="small" type="primary">上传文件</el-button>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
<div v-if="showTip" slot="tip" class="el-upload__tip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
的文件
</div>
<el-dialog
:visible.sync="dialogVisible"
title="预览"
width="800"
append-to-body
:visible.sync="dialogVisible"
append-to-body
title="预览"
width="800"
>
<img
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getToken } from '@/utils/auth'
export default {
props: {
@ -51,17 +52,21 @@ export default {
//
limit: {
type: Number,
default: 5,
default: 5
},
// (MB)
fileSize: {
type: Number,
default: 5,
type: Number,
default: 5
},
// , ['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
default: () => ['png', 'jpg', 'jpeg']
},
listType: {
type: String,
default: 'picture-card'
},
//
isShowTip: {
@ -73,37 +78,37 @@ export default {
return {
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogImageUrl: '',
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", //
uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', //
headers: {
Authorization: "Bearer " + getToken(),
Authorization: 'Bearer ' + getToken()
},
fileList: []
};
}
},
watch: {
value: {
handler(val) {
if (val) {
//
const list = Array.isArray(val) ? val : this.value.split(',');
const list = Array.isArray(val) ? val : this.value.split(',')
//
this.fileList = list.map(item => {
if (typeof item === "string") {
if (typeof item === 'string') {
if (item.indexOf(this.baseUrl) === -1) {
item = { name: this.baseUrl + item, url: this.baseUrl + item };
item = { name: this.baseUrl + item, url: this.baseUrl + item }
} else {
item = { name: item, url: item };
item = { name: item, url: item }
}
}
return item;
});
return item
})
} else {
this.fileList = [];
return [];
this.fileList = []
return []
}
},
deep: true,
@ -113,114 +118,117 @@ export default {
computed: {
//
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
return this.isShowTip && (this.fileType || this.fileSize)
}
},
methods: {
// loading
handleBeforeUpload(file) {
let isImg = false;
let isImg = false
if (this.fileType.length) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
let fileExtension = ''
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
}
isImg = this.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (file.type.indexOf(type) > -1) return true
if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false
})
} else {
isImg = file.type.indexOf("image") > -1;
isImg = file.type.indexOf('image') > -1
}
if (!isImg) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
return false;
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
return false
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
return false;
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
return false
}
}
this.$modal.loading("正在上传图片,请稍候...");
this.number++;
this.$modal.loading('正在上传图片,请稍候...')
this.number++
},
//
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
},
//
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
this.uploadList.push({ name: res.fileName, url: res.fileName, size: res.fileSize })
this.uploadedSuccessfully()
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.imageUpload.handleRemove(file);
this.uploadedSuccessfully();
this.number--
this.$modal.closeLoading()
this.$modal.msgError(res.msg)
this.$refs.imageUpload.handleRemove(file)
this.uploadedSuccessfully()
}
},
//
handleDelete(file) {
const findex = this.fileList.map(f => f.name).indexOf(file.name);
if(findex > -1) {
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
const findex = this.fileList.map(f => f.name).indexOf(file.name)
if (findex > -1) {
this.fileList.splice(findex, 1)
this.$emit('input', this.listToString(this.fileList))
}
},
//
handleUploadError() {
this.$modal.msgError("上传图片失败,请重试");
this.$modal.closeLoading();
this.$modal.msgError('上传图片失败,请重试')
this.$modal.closeLoading()
},
//
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
this.fileList = this.fileList.concat(this.uploadList)
console.log(this.fileList)
this.uploadList = []
this.number = 0
this.$emit('input', this.listToString(this.fileList))
this.$emit('getSize', this.fileList)
this.$modal.closeLoading()
}
},
//
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//
listToString(list, separator) {
let strs = "";
separator = separator || ",";
let strs = ''
separator = separator || ','
for (let i in list) {
if (list[i].url) {
strs += list[i].url.replace(this.baseUrl, "") + separator;
strs += list[i].url.replace(this.baseUrl, '') + separator
}
}
return strs != '' ? strs.substr(0, strs.length - 1) : '';
return strs != '' ? strs.substr(0, strs.length - 1) : ''
}
}
};
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
// .el-upload--picture-card
::v-deep.hide .el-upload--picture-card {
display: none;
display: none;
}
//
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
transition: all 0s;
}
::v-deep .el-list-enter, .el-list-leave-active {
opacity: 0;
transform: translateY(0);
opacity: 0;
transform: translateY(0);
}
</style>

View File

@ -176,6 +176,22 @@ export const dynamicRoutes = [
}
]
},
{
path: '/build/install',
component: Layout,
hidden: true,
permissions: ['build:install:edit'],
children: [
{
path: 'edit',
component: () => import('@/views/FDS/installationList/edit'),
name: 'InstallEdit',
meta: { title: '编辑安装包', activeMenu: '/build/installationList' }
}
]
},
{
path: '/build/install',
component: Layout,
@ -221,7 +237,7 @@ export const dynamicRoutes = [
},
{
path: '/build/whiteListManagement',
path: '/build/whiteList',
component: Layout,
hidden: true,
permissions: ['build:whiteListManagement:add'],
@ -236,7 +252,7 @@ export const dynamicRoutes = [
},
{
path: '/build/whiteListManagement',
path: '/build/whiteList',
component: Layout,
hidden: true,
permissions: ['build:whiteListManagement:detail'],
@ -251,7 +267,7 @@ export const dynamicRoutes = [
},
{
path: '/build/whiteListManagement',
path: '/build/whiteList',
component: Layout,
hidden: true,
permissions: ['build:whiteListManagement:addConfig'],

View File

@ -62,7 +62,7 @@
</el-table-column>
<el-table-column align="center" label="状态" prop="uploading_status">
<template slot-scope="scopeA">
<dict-tag :options="dict.type.sys_yes_no" :value="scopeA.row.type"/>
<dict-tag :options="dict.type.uploading_status" :value="scopeA.row.uploadingStatus"/>
</template>
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250">
@ -107,7 +107,7 @@
// import { listINFO, getINFO, delINFO, addINFO, updateINFO } from "@/api/deploy/INFO";
export default {
name: 'ChannelManagement',
dicts: ['sys_yes_no'],
dicts: ['sys_yes_no', 'uploading_status'],
data() {
return {
//

View File

@ -30,15 +30,21 @@
</el-input>
</el-form-item>
<el-form-item label="安装包文件" prop="sysApk">
<el-upload ref="sysApk" v-model="formData.sysApk" :action="field101Action"
:before-upload="field101BeforeUpload"
:file-list="field101fileList"
>
<el-button icon="el-icon-upload" size="small" type="primary">上传文件</el-button>
</el-upload>
<image-upload v-model="formData.sysApk" :fileType="['apk','txt','png','excel']" :limit="1"
:listType="'text'"
@getSize="getSize"
/>
<!-- <el-upload ref="sysApk" v-model="formData.sysApk" :action="actionUrl"-->
<!-- :before-upload="field101BeforeUpload"-->
<!-- :file-list="field101fileList"-->
<!-- >-->
<!-- <el-button icon="el-icon-upload" size="small" type="primary">上传文件</el-button>-->
<!-- </el-upload>-->
</el-form-item>
<el-form-item label="安装包大小" prop="sysApkSize">
<el-input v-model="formData.sysApkSize" :style="{width: '100%'}" clearable placeholder="请输入安装包大小">
<el-input v-model="formData.sysApkSize" :style="{width: '100%'}" placeholder="请输入安装包大小" readonly>
</el-input>
</el-form-item>
<el-form-item label="安装包类型" prop="sysType">
@ -61,7 +67,7 @@
<!-- </el-form-item>-->
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
<el-button @click="cancel"> </el-button>
</el-form-item>
</el-form>
</div>
@ -71,7 +77,7 @@
</template>
<script>
import { addINFO, updateINFO } from '@/api/FDS/installList'
import { addINFO } from '@/api/FDS/installList'
export default {
name: 'InstallAdd',
@ -79,14 +85,12 @@ export default {
data() {
return {
formData: {
field102: 1,
field103: undefined,
field104: undefined,
field101: null,
field105: undefined,
field106: 'Android',
field107: undefined,
field108: undefined
uploadingType: 1,
sysApkName: undefined,
version: undefined,
sysApk: null,
sysApkSize: undefined,
sysType: ''
},
rules: {
uploadingType: [
@ -100,49 +104,38 @@ export default {
],
sysType: [
{ required: true, message: '安装包类型不能为空', trigger: 'change' }
],
sysApkSize: [
{ required: true, message: '安装包大小不能为空', trigger: 'blur' }
],
sysApk: [
{ required: true, message: '安装包不能为空', trigger: 'change' }
]
},
field101Action: 'https://jsonplaceholder.typicode.com/posts/',
actionUrl: 'http://192.168.1.23:1024/dev-api/common/upload',
field101fileList: [],
activeTabs: '1'
}
},
computed: {},
mounted() {
this.activeTabs = this.$route.query.activeTabs
},
methods: {
/** 提交按钮 */
submitForm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
updateINFO(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.closeModal()
})
} else {
addINFO(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.closeModal()
})
}
addINFO(this.formData).then(response => {
this.$modal.msgSuccess('新增成功')
})
this.$router.push({ path: '/build/installationList' })
}
})
},
//
resetForm() {
this.$refs['elForm'].resetFields()
},
field101BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
getSize(e) {
this.formData.sysApkSize = e[0].size + 'kb'
},
cancel() {
this.history.back()
this.$router.push({ path: '/build/installationList' })
}
}
}

View File

@ -10,19 +10,31 @@
<el-form ref="form" :model="form" label-width="150px" size="mini">
<el-row>
<el-col :span="24">
<el-form-item label="上传方式:">{{ form.uploadingType }}</el-form-item>
<el-form-item label="上传方式:">
<dict-tag :options="dict.type.sys_apk_uploading_type" :value="form.uploadingType"/>
</el-form-item>
<el-form-item
label="安装包名称:"
>{{ form.sysApkName }}
</el-form-item>
<el-form-item label="安装包文件名称:">{{ form.sysApk }}</el-form-item>
<el-form-item label="安装包大小:">{{ form.sysApkSize }}</el-form-item>
<el-form-item label="适用系统:">{{ form.sysApkSize }}</el-form-item>
<el-form-item label="适用系统:">
<dict-tag :options="dict.type.sys_apk_type" :value="form.sysType"/>
</el-form-item>
<el-form-item v-if="activeTabs!='1'" label="适用模块:">登录模块</el-form-item>
<el-form-item label="上传时间:">{{ form.create_time }}</el-form-item>
<el-form-item label="上传状态:">{{ form.uploadingStatus }}</el-form-item>
<el-form-item label="上传时间:">{{ form.createTime }}</el-form-item>
<el-form-item label="上传状态:">
<dict-tag :options="dict.type.uploading_status" :value="form.uploadingStatus"/>
</el-form-item>
<el-form-item label="上传人员:">{{ form.created }}</el-form-item>
<el-form-item label="上传日志:">日志日志</el-form-item>
<el-form-item size="large">
<el-button @click="cancel"> </el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
@ -38,7 +50,7 @@ import { getINFO } from '@/api/FDS/installList'
export default {
name: 'InstallDetail',
dicts: ['sys_yes_no'],
dicts: ['sys_apk_uploading_type', 'uploading_status', 'sys_apk_type'],
data() {
return {
@ -53,10 +65,12 @@ export default {
methods: {
/** 查询安装包管理详情 */
getInfo() {
this.loading = false
getINFO(this.id).then(response => {
this.form = response.rows
getINFO(this.$route.query.id).then(response => {
this.form = response.data
})
},
cancel() {
this.$router.push({ path: '/build/installationList' })
}
}
}

View File

@ -0,0 +1,183 @@
<template>
<div class="app-container">
<el-container>
<el-header>
<div>编辑安装包</div>
<el-divider/>
</el-header>
<el-main>
<div class="form-main">
<el-form ref="elForm" :model="formData" :rules="rules" label-width="100px" size="medium">
<el-form-item label="上传方式" prop="uploadingType">
<el-radio-group v-model="formData.uploadingType" size="medium">
<el-radio v-for="(item, index) in dict.type.sys_apk_uploading_type" :key="index"
:disabled="item.disabled"
:label="item.value"
>{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeTabs==='1'" label="安装包名称" prop="sysApkName">
<el-input v-model="formData.sysApkName" :style="{width: '100%'}" clearable placeholder="请输入安装包名称">
</el-input>
</el-form-item>
<!-- <el-form-item v-else label="模块包名称" prop="field107">-->
<!-- <el-input v-model="formData.field107" :style="{width: '100%'}" clearable placeholder="请输入模块包名称">-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<el-form-item label="版本号" prop="version">
<el-input v-model="formData.version" :style="{width: '100%'}" clearable placeholder="请输入版本号">
</el-input>
</el-form-item>
<el-form-item label="安装包文件" prop="sysApk">
<image-upload v-model="formData.sysApk" :fileType="['apk','txt','png','excel']" :limit="1"
:listType="'text'"
@getSize="getSize"
/>
<!-- <el-upload ref="sysApk" v-model="formData.sysApk" :action="actionUrl"-->
<!-- :before-upload="field101BeforeUpload"-->
<!-- :file-list="field101fileList"-->
<!-- >-->
<!-- <el-button icon="el-icon-upload" size="small" type="primary">上传文件</el-button>-->
<!-- </el-upload>-->
</el-form-item>
<el-form-item label="安装包大小" prop="sysApkSize">
<el-input v-model="formData.sysApkSize" :style="{width: '100%'}" placeholder="请输入安装包大小" readonly>
</el-input>
</el-form-item>
<el-form-item label="安装包类型" prop="sysType">
<el-radio-group v-model="formData.sysType" size="medium">
<el-radio v-for="(item, index) in dict.type.sys_apk_type" :key="index" :disabled="item.disabled"
:label="item.value"
>{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item v-if="activeTabs!='1'" label="适用模块" prop="configName">-->
<!-- <el-select v-model="formData.field108" clearable placeholder="请选择对应的模块">-->
<!-- <el-option-->
<!-- v-for="dict in dict.type.sys_yes_no"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancel"> </el-button>
</el-form-item>
</el-form>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
import { getINFO, updateINFO } from '@/api/FDS/installList'
export default {
name: 'InstallAdd',
dicts: ['sys_apk_uploading_type', 'uploading_status', 'sys_apk_type'],
data() {
return {
formData: {
uploadingType: 1,
sysApkName: undefined,
version: undefined,
sysApk: null,
sysApkSize: undefined,
sysType: ''
},
rules: {
uploadingType: [
{ required: true, message: '上传类型不能为空', trigger: 'change' }
],
sysApkName: [
{ required: true, message: '安装包名称不能为空', trigger: 'blur' }
],
version: [
{ required: true, message: '版本号不能为空', trigger: 'blur' }
],
sysType: [
{ required: true, message: '安装包类型不能为空', trigger: 'change' }
],
sysApkSize: [
{ required: true, message: '安装包大小不能为空', trigger: 'blur' }
],
sysApk: [
{ required: true, message: '安装包不能为空', trigger: 'change' }
]
},
actionUrl: 'http://192.168.1.23:1024/dev-api/common/upload',
field101fileList: [],
activeTabs: '1'
}
},
computed: {},
watch: {
$route(to, from) {
if (to) {
this.getInfo()
console.log(to)
}
}
},
created() {
this.activeTabs = this.$route.query.activeTabs
this.getInfo()
},
mounted() {
},
methods: {
/** 提交按钮 */
submitForm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
updateINFO(this.formData).then(response => {
this.$modal.msgSuccess('修改成功')
})
this.$router.push({ path: '/build/installationList' })
}
})
},
/** 查询安装包管理详情 */
getInfo() {
getINFO(this.$route.query.id).then(response => {
this.formData = response.data
})
},
getSize(e) {
this.formData.sysApkSize = e[0].size + 'kb'
},
cancel() {
this.$router.push({ path: '/build/installationList' })
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
background: #ffffff;
margin: 24px;
}
.form-main {
width: 700px;
margin: 0 auto;
}
::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
border: 1px solid #E4E7ED !important;
}
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -129,14 +129,14 @@
</template>
<el-table-column align="center" label="状态" prop="uploading_status">
<template slot-scope="scopeA">
<dict-tag :options="dict.type.sys_yes_no" :value="scopeA.row.type"/>
<dict-tag :options="dict.type.uploading_status" :value="scopeA.row.uploadingStatus"/>
</template>
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250">
<template slot-scope="scope">
<el-button
v-hasPermi="['system:config:dowmload']"
icon="el-icon-edit"
icon="el-icon-download"
size="mini"
type="text"
@click="handleDownload(scope.row)"
@ -152,7 +152,7 @@
</el-button>
<el-button
v-hasPermi="['system:config:detail']"
icon="el-icon-edit"
icon="el-icon-view"
size="mini"
type="text"
@click="handleDetail(scope.row)"
@ -226,6 +226,11 @@ export default {
//
}
},
watch: {
$route(to, from) {
if (to) this.getList()
}
},
created() {
this.getList()
},
@ -252,11 +257,14 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
const params = {
type: 'add',
const query = {
activeTabs: this.activeTabs
}
this.$tab.openPage('新增安装包', '/build/install/add/', params)
this.$router.push({
path: '/build/install/add/',
query: query
})
// this.$tab.openPage('', '/build/install/add/', params)
},
//
@ -279,15 +287,24 @@ export default {
},
/** 修改按钮操作 */
handleEdit(row) {
const params = {
type: 'edit',
activeTabs: this.activeTabs
const query = {
activeTabs: this.activeTabs,
id: row.id
}
this.$tab.openPage('编辑安装包', '/build/install/add/', params)
this.$router.push({
path: '/build/install/edit/',
query: query
})
// this.$tab.openPage('', '/build/install/add/', params)
},
/** 查看详情弹窗 **/
handleDetail(row) {
this.$tab.openPage('编辑安装包', '/build/install/add/', row.id)
const params = {
id: row.id
}
this.$tab.openPage('安装包详情', '/build/install/detail/', params)
},
/** 切换TAB触发的事件 */