jsh_erp/jshERP-web/src/views/system/modules/AppVersionModal.vue

<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>