|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <div ref="container">
|
|
|
+ <a-modal
|
|
|
+ title="发布新版本"
|
|
|
+ :visible="visible"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ :getContainer="() => $refs.container"
|
|
|
+ :maskStyle="{ top: '93px', left: '154px' }"
|
|
|
+ :wrapClassName="wrapClassNameInfo()"
|
|
|
+ :mask="isDesktop()"
|
|
|
+ :maskClosable="false"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ :footer="null"
|
|
|
+ width="500px"
|
|
|
+ style="top: 5%"
|
|
|
+ >
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <a-form :form="form" class="form-content" id="appVersionModal">
|
|
|
+ <a-form-item label="版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input placeholder="请输入" allowClear v-decorator="['version', validatorRules.version]" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="上传文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <div class="upload-container">
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ :data="uploadOpts.data"
|
|
|
+ :showUploadList="true"
|
|
|
+ :multiple="false"
|
|
|
+ :headers="uploadOpts.headers"
|
|
|
+ :action="uploadOpts.action"
|
|
|
+ :method="uploadOpts.method"
|
|
|
+ :accept="uploadOpts.accept"
|
|
|
+ :fileList="fileList"
|
|
|
+ @change="handleChange"
|
|
|
+ :beforeUpload="beforeUpload"
|
|
|
+ @reject="handleReject"
|
|
|
+ >
|
|
|
+ <div class="upload-content">
|
|
|
+ <div class="upload-icon">
|
|
|
+ <a-icon type="folder-open" style="color: #4e73f8; font-size: 32px;" />
|
|
|
+ </div>
|
|
|
+ <a-button type="primary" class="upload-button">上传文件</a-button>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <div class="form-actions">
|
|
|
+ <a-button @click="handleCancel" class="cancel-button">取消</a-button>
|
|
|
+ <a-button type="primary" @click="handleOk" :loading="confirmLoading" class="confirm-button">确定发布新版本</a-button>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </a-spin>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
+import pick from 'lodash.pick'
|
|
|
+import { autoJumpNextInput } from '@/utils/util'
|
|
|
+import { mixinDevice } from '@/utils/mixin'
|
|
|
+import { postAction } from '@/api/manage'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AppVersionModal',
|
|
|
+ mixins: [mixinDevice],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ confirmLoading: false,
|
|
|
+ labelCol: { span: 4 },
|
|
|
+ wrapperCol: { span: 20 },
|
|
|
+ fileList: [],
|
|
|
+ validatorRules: {
|
|
|
+ version: {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '请输入版本号!' },
|
|
|
+ { pattern: /^\d+\.\d+\.\d+$/, message: '版本号格式不正确!' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '请上传.apk文件!' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ model: {},
|
|
|
+ uploadOpts:{
|
|
|
+ headers: {
|
|
|
+ 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
|
|
|
+ },
|
|
|
+ method: 'POST',
|
|
|
+ action: window._CONFIG['domianURL'] + '/apkVersion/upload',
|
|
|
+ accept: '.apk',
|
|
|
+ data:{
|
|
|
+ biz: 'bill'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add() {
|
|
|
+ this.edit({})
|
|
|
+ },
|
|
|
+ edit(record) {
|
|
|
+ this.form.resetFields()
|
|
|
+ this.model = Object.assign({}, record)
|
|
|
+ this.fileList = []
|
|
|
+ this.visible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(
|
|
|
+ pick(
|
|
|
+ this.model,
|
|
|
+ 'url',
|
|
|
+ 'version'
|
|
|
+ )
|
|
|
+ )
|
|
|
+ autoJumpNextInput('appVersionModal')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ // 检查文件类型
|
|
|
+ const isAPK = file.type === 'application/vnd.android.package-archive' || file.name.endsWith('.apk')
|
|
|
+ if (!isAPK) {
|
|
|
+ this.$message.error('只能上传APK文件!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 阻止自动上传
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ handleChange(info) {
|
|
|
+ this.fileList = [info.file]
|
|
|
+ console.log('文件列表:', this.fileList)
|
|
|
+ if (info.file.status === 'uploading') {
|
|
|
+ console.log(info.file, info.fileList)
|
|
|
+ this.confirmLoading = true
|
|
|
+ }else if(info.file.status === 'removed'){
|
|
|
+ this.fileList = []
|
|
|
+ this.model.url = ''
|
|
|
+ }else if (info.file.status === 'done') {
|
|
|
+ this.confirmLoading = false
|
|
|
+ console.log('model=====', this.model)
|
|
|
+ if (info.file.response) {
|
|
|
+ if (info.file.response.code === 200) {
|
|
|
+ info.file.name = info.file.response.data
|
|
|
+ this.model.url = info.file.response.data
|
|
|
+ } else {
|
|
|
+ this.$message.warning(info.file.response.data, 8)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(`${info.file.name} ${info.file.response.data}.`)
|
|
|
+ }
|
|
|
+ } else if (info.file.status === 'error') {
|
|
|
+ this.confirmLoading = false
|
|
|
+ this.$message.error(`文件上传失败: ${info.file.msg} `)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleReject(file) {
|
|
|
+ console.log('文件类型不正确:', file)
|
|
|
+ this.$message.error('文件类型不正确,请上传.apk文件!')
|
|
|
+ },
|
|
|
+ handleOk() {
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (err) return
|
|
|
+ console.log('values======',values)
|
|
|
+ if (this.fileList.length === 0) {
|
|
|
+ this.$message.error('请上传.apk类型文件!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = {
|
|
|
+ version: values.version,
|
|
|
+ url: this.fileList[0].name // 实际应用中这里应该是上传后的URL
|
|
|
+ }
|
|
|
+
|
|
|
+ this.confirmLoading = true
|
|
|
+
|
|
|
+ postAction('/apkVersion/add', formData).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('ok', formData)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data||'操作失败')
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.error(err)
|
|
|
+ }).finally(() => {
|
|
|
+ this.confirmLoading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.form-content {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-container {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 24px;
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-icon {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #4e73f8;
|
|
|
+ border-color: #4e73f8;
|
|
|
+}
|
|
|
+
|
|
|
+.reupload-button {
|
|
|
+ background-color: #4e73f8;
|
|
|
+ border-color: #4e73f8;
|
|
|
+}
|
|
|
+
|
|
|
+.form-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ .cancel-button {
|
|
|
+ margin-right: 12px;
|
|
|
+ min-width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-button {
|
|
|
+ background-color: #4e73f8;
|
|
|
+ border-color: #4e73f8;
|
|
|
+ min-width: 120px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-upload.ant-upload-select {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-upload-list-item {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-form-item-label {
|
|
|
+ text-align: left;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-form-item {
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-modal-close-x {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-modal-body {
|
|
|
+ padding: 16px 24px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-form-item-control {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-input {
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+</style>
|