<template>
|
<div class="version inner-bg-style">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
|
class="demo-ruleForm">
|
<el-form-item label="版本类型:" prop="appType">
|
<div>
|
<el-select v-model="ruleForm.appType" class="custom-input-style" placeholder="请选择版本类型">
|
<el-option label="Android" value="Android"></el-option>
|
<el-option label="iOS" value="iOS"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item label="版本上传" prop="androidAPK" v-if="ruleForm.appType === 'Android'">
|
<el-upload class="avatar-uploader" drag :action="action" :headers="headers" :data="{
|
path: 'apk'
|
}" accept=".apk" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
|
:on-success="handleAvatarSuccess">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">只能上传apk文件</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="版本号:" prop="version">
|
<el-input v-model="ruleForm.version" class="custom-input-style" placeholder="请输入版本号">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="发布内容:" prop="content">
|
<el-input type="textarea" class="custom-input-style" v-model="ruleForm.content"
|
:maxlength="500" show-word-limit placeholder="请输入发布内容"></el-input>
|
</el-form-item>
|
<el-form-item class="text-center" label-width="0">
|
<el-button size="mini" type="primary" :loading="loading" @click="submitForm('ruleForm')">保存
|
</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import { saveMobileVersion } from '../../api/system'
|
import Cookie from 'js-cookie'
|
// 跨域认证信息 header 名
|
const xsrfHeaderName = 'Authorization'
|
export default {
|
name: 'version',
|
data() {
|
var validateVersion = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入版本号'))
|
} else {
|
const reg = /^([1-9]\d|[1-9])(\.([1-9]\d|\d)){2}$/
|
if (reg.test(value)) {
|
callback()
|
} else {
|
callback(new Error('请输入正确的版本号'))
|
}
|
}
|
}
|
return {
|
loading: false,
|
action: `${process.env.VUE_APP_CURRENTMODE === 'development' ? '/api/' : process.env.VUE_APP_API_BASE_URL}lbcloud-file/file/upload/file`,
|
headers: {
|
Authorization: 'Bearer ' + Cookie.get(xsrfHeaderName)
|
},
|
ruleForm: {
|
appType: '',
|
androidAPK: '',
|
content: '',
|
version: ''
|
},
|
rules: {
|
appType: [{ required: true, message: '请选择版本类型', trigger: 'change' }],
|
androidAPK: [{ required: true, message: '请上传APK', trigger: 'change' }],
|
version: [{ required: true, validator: validateVersion, trigger: 'change' }],
|
content: [{ required: true, message: '请输入发布内容', trigger: 'change' }]
|
}
|
}
|
},
|
methods: {
|
cancel() {
|
this.$router.push('/dash/version')
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this._saveMobileVersion({
|
appType: this.ruleForm.appType,
|
apkUrl: this.ruleForm.androidAPK,
|
content: this.ruleForm.content,
|
version: this.ruleForm.version,
|
status: '0'
|
})
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
async _saveMobileVersion(params) {
|
if (this.loading) {
|
return
|
}
|
this.loading = true
|
const res = await saveMobileVersion(params)
|
if (res.code === '0') {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
this.cancel()
|
}
|
this.loading = false
|
},
|
handleRemove() {
|
this.ruleForm.androidAPK = ''
|
},
|
handleAvatarSuccess(res, file) {
|
console.log(res.code)
|
if (res.code === '200') {
|
// this.ruleForm.androidAPK = URL.createObjectURL(file.raw)
|
this.ruleForm.androidAPK = res.data.like
|
this.$message({
|
message: '上传成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '上传失败',
|
type: 'error'
|
})
|
}
|
},
|
beforeAvatarUpload(file) {
|
var fileSize = file.size / 1024 / 1024 < 300
|
if (!fileSize) {
|
this.$message.error('上传失败！上传文件大小不能超过 300MB！请重新上传')
|
return false
|
}
|
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
if (testmsg !== 'apk') {
|
this.$message({
|
message: '上传失败！仅支持APK格式，请重新上传',
|
type: 'error'
|
})
|
return false
|
}
|
return true
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.inner-bg-style {
|
padding-top: 20px;
|
}
|
</style>
|
