chenzihao/sac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改上传接口，补全字段逻辑。新增环境服务的页面开发

Browse Source
This commit is contained in:
张洋川 2024-04-16 17:59:05 +08:00
parent 0dbe3c713e
commit 333eefd2a1
5 changed files with 112 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sf-ui/.env.development
View File

@ -6,6 +6,7 @@ ENV = 'development'
# SAC管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# SAC管理系统/开发环境上传
VUE_APP_BASE_API_ = '/'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

137
sf-ui/src/components/FileUpload/index.vue
View File

@ -1,38 +1,38 @@
<template>
<div class="upload-file">
<el-upload
multiple
:action="uploadFileUrl"
ref="fileUpload"
:action="baseUrl+uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:headers="headers"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
multiple
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 -->
<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="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
的文件
</div>
</el-upload>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<li v-for="(file, index) in fileList" :key="file.url" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
<el-link :underline="false" type="danger" @click="handleDelete(index)">删除</el-link>
</div>
</li>
</transition-group>
@ -40,32 +40,36 @@
</template>
<script>
import { getToken } from "@/utils/auth";
import { getToken } from '@/utils/auth'
export default {
name: "FileUpload",
name: 'FileUpload',
props: {
// 值
value: [String, Object, Array],
// 数量限制
limit: {
type: Number,
default: 5,
default: 5
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
default: 5
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf', 'apk']
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
},
uploadFileUrl: {
type: String,
default: () => '/system/oss/upload'
}
},
data() {
@ -73,31 +77,31 @@ export default {
number: 0,
uploadList: [],
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
// uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
Authorization: 'Bearer ' + getToken()
},
fileList: [],
};
fileList: []
}
},
watch: {
value: {
handler(val) {
if (val) {
let temp = 1;
let temp = 1
// 首先将值转为数组
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") {
item = { name: item, url: item };
if (typeof item === 'string') {
item = { name: item, url: item }
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
item.uid = item.uid || new Date().getTime() + temp++
return item
})
} else {
this.fileList = [];
return [];
this.fileList = []
return []
}
},
deep: true,
@ -107,108 +111,113 @@ export default {
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
return this.isShowTip && (this.fileType || this.fileSize)
}
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
const fileName = file.name.split('.')
const fileExt = fileName[fileName.length - 1]
const isTypeOk = this.fileType.indexOf(fileExt) >= 0
if (!isTypeOk) {
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++;
return true;
this.$modal.loading('正在上传文件，请稍候...')
this.number++
return true
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传文件失败，请重试");
this.$modal.msgError('上传文件失败，请重试')
this.$modal.closeLoading()
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
this.uploadList.push({ name: res.data.url, url: res.data.url, size: res.data.size })
this.uploadedSuccessfully()
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
this.number--
this.$modal.closeLoading()
this.$modal.msgError(res.msg)
this.$refs.fileUpload.handleRemove(file)
this.uploadedSuccessfully()
}
},
// 删除文件
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
this.fileList.splice(index, 1)
this.$emit('input', this.listToString(this.fileList))
},
// 上传结束处理
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)
this.uploadList = []
this.number = 0
this.$emit('input', this.listToString(this.fileList))
this.$emit('getSize', this.fileList)
this.$modal.closeLoading()
}
},
// 获取文件名称
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
if (name.lastIndexOf('/') > -1) {
return name.slice(name.lastIndexOf('/') + 1)
} else {
return "";
return ''
}
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
let strs = ''
separator = separator || ','
for (let i in list) {
strs += list[i].url + separator;
strs += list[i].url
}
return strs != '' ? strs : ''
}
return strs != '' ? strs.substr(0, strs.length - 1) : '';
}
}
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}

13
sf-ui/src/components/ImageUpload/index.vue
View File

@ -2,7 +2,7 @@
<div class="component-upload-image">
<el-upload
ref="imageUpload"
:action="uploadImgUrl"
:action="baseUrl+uploadImgUrl"
:before-upload="handleBeforeUpload"
:class="{hide: this.fileList.length >= this.limit}"
:file-list="fileList"
@ -72,6 +72,10 @@ export default {
isShowTip: {
type: Boolean,
default: true
},
uploadFileUrl: {
type: String,
default: () => '/system/oss/upload'
}
},
data() {
@ -82,7 +86,7 @@ export default {
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()
},
@ -160,7 +164,7 @@ export default {
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName, size: res.fileSize })
this.uploadList.push({ name: res.data.url, url: res.data.url, size: res.fileSize })
this.uploadedSuccessfully()
} else {
this.number--
@ -191,7 +195,6 @@ export default {
this.uploadList = []
this.number = 0
this.$emit('input', this.listToString(this.fileList))
this.$emit('getSize', this.fileList)
this.$modal.closeLoading()
}
},
@ -209,7 +212,7 @@ export default {
strs += list[i].url.replace(this.baseUrl, '') + separator
}
}
return strs != '' ? strs.substr(0, strs.length - 1) : ''
return strs != '' ? strs : ''
}
}
}

15
sf-ui/src/views/FDS/installationList/add.vue
View File

@ -30,18 +30,10 @@
</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'"
<file-upload v-model="formData.sysApk" :fileType="['apk','txt']" :limit="1"
@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>
@ -85,7 +77,7 @@ export default {
data() {
return {
formData: {
uploadingType: 1,
uploadingType: 'OffLineUploading',
sysApkName: undefined,
version: undefined,
sysApk: null,
@ -112,8 +104,7 @@ export default {
{ required: true, message: '安装包不能为空', trigger: 'change' }
]
},
actionUrl: 'http://192.168.1.23:1024/dev-api/common/upload',
field101fileList: [],
activeTabs: '1'
}
},

16
sf-ui/src/views/FDS/installationList/edit.vue
View File

@ -31,17 +31,10 @@
</el-form-item>
<el-form-item label="安装包文件" prop="sysApk">
<image-upload v-model="formData.sysApk" :fileType="['apk','txt','png','excel']" :limit="1"
:listType="'text'"
<file-upload v-model="formData.sysApk" :fileType="['apk','txt']" :limit="1"
@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>
@ -85,7 +78,7 @@ export default {
data() {
return {
formData: {
uploadingType: 1,
uploadingType: undefined,
sysApkName: undefined,
version: undefined,
sysApk: null,
@ -111,10 +104,7 @@ export default {
sysApk: [
{ required: true, message: '安装包不能为空', trigger: 'change' }
]
},
actionUrl: 'http://192.168.1.23:1024/dev-api/common/upload',
field101fileList: [],
activeTabs: '1'
}
}
},
computed: {},