addDialog.vue

<template>
  <el-dialog
    class="custom-dialog"
    custom-class="party-dialog"
    title="上传新版安装包"
    width="468px"
    :visible.sync="formVisible"
    :before-close="close"
  >
    <div class="dialog-content">
      <el-form
        :model="formItem"
        class="party-form version-add"
        ref="formItem"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="版本号：" prop="appVersion">
          <el-input
            v-model="formItem.appVersion"
            clearable
            placeholder="请输入版本号"
          ></el-input>
        </el-form-item>
        <el-form-item label="版本信息：" prop="versionInfo">
          <el-input
            type="textarea"
            v-model="formItem.versionInfo"
          ></el-input>
        </el-form-item>
        <el-form-item label="更新内容：" prop="updateLog">
          <el-input
            type="textarea"
            v-model="formItem.updateLog"
          ></el-input>
        </el-form-item>
        <el-upload
          class="text-center"
          drag
          :action="uploadUrl"
          :headers ="headers"
          :on-success="handleAvatarSuccess"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
        >
          <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>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>

    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl:'http://111.203.232.175:8088/mall/file/upload/allType',
      formVisible: false,
      headers:{Authorization: localStorage.getItem('backToken')},
      formItem: {},
      fileList: [],
      rules: {
        appVersion: [
          { required: true, message: "请输入版本号", trigger: "blur" },
        ],
        versionInfo: [
          { required: true, message: "请输入版本信息", trigger: "blur" },
        ],
        updateLog: [
          { required: true, message: "请输入更新内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    backFn() {
      this.formVisible = true
      this.formItem = {}
      this.fileList = []
      this.$nextTick(() => {
        this.$refs.formItem.clearValidate()
      });

    },
    // 关闭
    close() {
      this.formVisible = false;
      for (let key in this.formItem) {
        this.formItem[key] = null
      }
      this.$refs["formItem"].resetFields()
    },
    // 格式控制
    handleBeforeUpload(file) {
      if (file.type !== "application/vnd.android.package-archive") {
        this.$message.error("只能上传apk文件")
        return false
      }
      return true
    },
    // 上传数据操作
    handleAvatarSuccess(res, file) {
      if(res.resultCode==='200'){
        this.formItem.apkUrl = res.data.url
      }else{
        this.$message.error(res.message)
      }
    },

    // 保存编辑信息
    submitForm() {
      let _this = this
      _this.$refs.formItem.validate((valid) => {
        if (valid) {
          if (!this.formItem.apkUrl) {
            this.$message.info("请先选取文件!")
            return false
          }
          let param = {
            appVersion: this.formItem.appVersion,
            versionInfo: this.formItem.versionInfo,
            updateLog: this.formItem.updateLog,
            apkUrl: this.formItem.apkUrl,
          }
          _this
            .$https(
              {
                url: "tAppVersion/save",
                method: "post",
                authType: this.backToken,
              },
              _this.$qs.stringify(param)
            )
            .then(
              (res) => {
                if (res.data.resultCode === "200") {
                  _this.$message.success(res.data.message)
                  _this.formVisible = false
                  _this.$emit("refreshFn")
                } else {
                  _this.$message.error(res.data.message)
                }
              },
              (error) => {
                console.log(error)
              }
            )
        }
      })
    },
  },
};
</script>

<style lang="less">
.version-add {
  .el-upload-dragger {
    height: 120px;
    .el-icon-upload {
      margin-top: 10px;
    }
  }
  .text-center {
    text-align: center;
  }
}

</style>