<template>
|
<a-modal centered width="35%" v-model="visibleShow" title="新增版本" @cancel="cancelClick" @ok="onsubmit">
|
<a-form-model :model="queryForm" ref="ruleForm" :rules="rules">
|
<a-form-model-item
|
ref="version"
|
prop="version"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="版本号"
|
>
|
<a-input :maxLength="10" v-model="queryForm.version" placeholder="请输入版本号" allowClear/>
|
</a-form-model-item>
|
<a-form-model-item
|
prop="path"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="文件地址"
|
>
|
<a-upload
|
name="file"
|
:file-list="uploadedFileList"
|
:showUploadList="true"
|
:multiple="false"
|
:customRequest="uploadFiles"
|
:remove="deleteFileItem"
|
:beforeUpload="beforeFileUpload"
|
>
|
<div class="upload">
|
<a-button>
|
<a-icon type="upload"/>
|
选择文件
|
</a-button>
|
<div>文件不能超过200M</div>
|
</div>
|
</a-upload>
|
</a-form-model-item>
|
<a-form-model-item
|
prop="description"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="版本描述"
|
>
|
<a-textarea placeholder="请输入版本描述" v-model="queryForm.description" allow-clear/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
</template>
|
|
<script>
|
import {uploadAction} from '@tievd/cube-block/lib/api/manage'
|
|
const formItemLayout = {
|
labelCol: {span: 8},
|
wrapperCol: {span: 12},
|
}
|
const formTailLayout = {
|
labelCol: {span: 4},
|
wrapperCol: {span: 8, offset: 4},
|
}
|
export default {
|
created() {
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
formItemLayout,
|
formTailLayout,
|
visibleShow: false,
|
queryForm: {
|
version: '',
|
description: '',
|
fileSize: '',
|
path: '',
|
},
|
uploadedFileList: [],
|
rules: {
|
version: [{required: true, message: '请输入版本号', trigger: 'blur'}],
|
description: [{required: true, message: '请输入版本描述', trigger: 'blur'}],
|
path: [{required: true, message: '请上传文件', trigger: 'blur'}],
|
},
|
}
|
},
|
watch: {
|
visible(val) {
|
this.visibleShow = val
|
},
|
},
|
methods: {
|
// 点击关闭或者是遮罩发射关闭信号给父组件，控制关闭
|
cancelClick() {
|
this.$emit('modalClose')
|
this.$refs.ruleForm.resetFields()
|
this.uploadedFileList = []
|
},
|
// 上传文件
|
uploadFiles(info) {
|
//初始化文件信息
|
const fileInfo = {
|
uid: info.file.uid,
|
name: info.file.name,
|
status: 'uploading',
|
response: '',
|
url: '',
|
}
|
//放入上传列表中，以便于显示上传进度
|
this.uploadedFileList.push(fileInfo)
|
let formData = new FormData()
|
formData.append('file', info.file)
|
uploadAction('/jyz/upgrade/upload', formData)
|
.then((res) => {
|
// console.log(res)
|
//根据服务端返回的结果判断成功与否，设置文件条目的状态
|
if (res.code == 200) {
|
this.queryForm.path = res.result.path
|
this.queryForm.fileSize = res.result.fileSize
|
fileInfo.status = 'done'
|
fileInfo.response = res.message
|
fileInfo.url = res.result.path
|
this.$message.success('上传成功！')
|
console.log(this.queryForm)
|
} else {
|
fileInfo.status = 'error'
|
fileInfo.response = res.message
|
this.$message.error('上传失败！')
|
}
|
})
|
.catch((err) => {
|
fileInfo.status = 'error'
|
fileInfo.response = err.message
|
})
|
},
|
// 删除文件
|
deleteFileItem(file) {
|
console.log(file)
|
//找到当前文件所在列表的索引
|
let index = this.uploadedFileList.indexOf(file)
|
//从列表中移除该文件
|
this.uploadedFileList.splice(index, 1)
|
return true
|
},
|
//上传之前的操作
|
beforeFileUpload(file, fileList) {
|
var this_ = this
|
return new Promise((resolve, reject) => {
|
const isSize = file.size > 200 * 1024 * 1024
|
if (this.uploadedFileList.length == 1) {
|
//可以限制只上传一个文件
|
this_.$message.error('只能上传一个文件')
|
reject(false)
|
return
|
}
|
if (isSize) {
|
this_.$message.error('上传文件不能超过200M!')
|
reject(false)
|
return
|
}
|
const name = file.name
|
if (name.indexOf(".") == -1 || name.indexOf("V") == -1) {
|
this_.$message.error('升级包名称不符合规范!')
|
reject(false)
|
return
|
}
|
const version = name.substring(name.indexOf("V") - 1, name.lastIndexOf("."));
|
if (version.length === 0) {
|
this_.$message.error('升级包名称不符合规范!')
|
reject(false)
|
return
|
} else {
|
this.queryForm.version = version
|
this.queryForm.description = version
|
resolve(true)
|
}
|
}).finally(() => {
|
|
})
|
},
|
// 提交表单
|
onsubmit() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
let formObj = JSON.parse(JSON.stringify(this.queryForm))
|
this.$emit('modalClose', formObj)
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.upload {
|
display: flex;
|
align-items: center;
|
|
div {
|
margin-left: 10px;
|
font-size: 12px;
|
color: #fff;
|
}
|
}
|
</style>
|
