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管理系统/开发环境 # SAC管理系统/开发环境
VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = '/dev-api'
# SAC管理系统/开发环境上传
VUE_APP_BASE_API_ = '/'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

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

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

@ -2,7 +2,7 @@
<div class="component-upload-image"> <div class="component-upload-image">
<el-upload <el-upload
ref="imageUpload" ref="imageUpload"
:action="uploadImgUrl" :action="baseUrl+uploadImgUrl"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:class="{hide: this.fileList.length >= this.limit}" :class="{hide: this.fileList.length >= this.limit}"
:file-list="fileList" :file-list="fileList"
@ -72,6 +72,10 @@ export default {
isShowTip: { isShowTip: {
type: Boolean, type: Boolean,
default: true default: true
},
uploadFileUrl: {
type: String,
default: () => '/system/oss/upload'
} }
}, },
data() { data() {
@ -82,7 +86,7 @@ export default {
dialogVisible: false, dialogVisible: false,
hideUpload: false, hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API, 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: { headers: {
Authorization: 'Bearer ' + getToken() Authorization: 'Bearer ' + getToken()
}, },
@ -160,7 +164,7 @@ export default {
// 上传成功回调 // 上传成功回调
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
if (res.code === 200) { 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() this.uploadedSuccessfully()
} else { } else {
this.number-- this.number--
@ -191,7 +195,6 @@ export default {
this.uploadList = [] this.uploadList = []
this.number = 0 this.number = 0
this.$emit('input', this.listToString(this.fileList)) this.$emit('input', this.listToString(this.fileList))
this.$emit('getSize', this.fileList)
this.$modal.closeLoading() this.$modal.closeLoading()
} }
}, },
@ -209,7 +212,7 @@ export default {
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 : ''
} }
} }
} }

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

@ -30,18 +30,10 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="安装包文件" prop="sysApk"> <el-form-item label="安装包文件" prop="sysApk">
<file-upload v-model="formData.sysApk" :fileType="['apk','txt']" :limit="1"
<image-upload v-model="formData.sysApk" :fileType="['apk','txt','png','excel']" :limit="1"
:listType="'text'"
@getSize="getSize" @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>
<el-form-item label="安装包大小" prop="sysApkSize"> <el-form-item label="安装包大小" prop="sysApkSize">
<el-input v-model="formData.sysApkSize" :style="{width: '100%'}" placeholder="请输入安装包大小" readonly> <el-input v-model="formData.sysApkSize" :style="{width: '100%'}" placeholder="请输入安装包大小" readonly>
@ -85,7 +77,7 @@ export default {
data() { data() {
return { return {
formData: { formData: {
uploadingType: 1, uploadingType: 'OffLineUploading',
sysApkName: undefined, sysApkName: undefined,
version: undefined, version: undefined,
sysApk: null, sysApk: null,
@ -112,8 +104,7 @@ export default {
{ required: true, message: '安装包不能为空', trigger: 'change' } { required: true, message: '安装包不能为空', trigger: 'change' }
] ]
}, },
actionUrl: 'http://192.168.1.23:1024/dev-api/common/upload',
field101fileList: [],
activeTabs: '1' activeTabs: '1'
} }
}, },

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

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