addDialog.vue

<template>
  <el-dialog
    class="custom-dialog"
    custom-class="party-dialog"
    title="上传新版安装包"
    width="540px"
    :visible.sync="formVisible"
    :before-close="close"
  >
    <div class="dialog-content">
      <el-form
        :model="formItem"
        class="party-form"
        ref="formItem"
        label-width="125px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="版本号：" prop="appVersion">
          <el-input size="small" v-model="formItem.appVersion" clearable placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item label="版本信息：" prop="versionInfo">
          <el-input type="textarea" size="small" v-model="formItem.versionInfo"></el-input>
        </el-form-item>
        <el-form-item label="更新内容：" prop="updateContent">
          <el-input type="textarea" size="small" v-model="formItem.updateContent"></el-input>
        </el-form-item>
        <el-upload
          class="text-center"
          drag
          action="http://192.168.110.67/mall/file/upload/allType"
          :on-success="handleAvatarSuccess"
          :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文件，且不超过500kb</div>
        </el-upload>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
      <el-button size="mini" @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      formVisible: false,
      formItem: {},
      fileList:[],
      rules: {
        appVersion: [
          { required: true, message: "请输入版本号", trigger: "blur" }
        ],
        versionInfo: [{ required: true, message: "请输入版本信息", trigger: "blur" }],
        updateContent: [{ required: true, message: "请输入更新内容", trigger: "blur" }]
      }
    };
  },
  methods: {
    backFn(item) {
      this.formVisible = true;
      this.$nextTick(()=>{
        this.$refs.formItem.clearValidate();
      })
      this.formItem = {};
    },
    // 关闭
    close() {
      this.formVisible = false;
      for (let key in this.formItem) {
        this.formItem[key] = null;
      }
      this.$refs["formItem"].resetFields();
    },
    // 上传数据操作
    handleAvatarSuccess(res, file) {
      this.formItem.apkUrl = res.url
    },

    // 保存编辑信息
    submitForm() {
      let _this = this;
      console.log(this.formItem)
      _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,
            updateContent: this.formItem.updateContent ,
            apkUrl: this.formItem.apkUrl ,
          };
          // const fileType = this.fileList.every(item => {
          //   console.log(item.raw.type)
          //   return item.raw.type === 'application/zip'
          // })
          // if (!fileType) {
          //   this.$message.error('支持扩展名：.zip格式!')
          //   return false
          // }
          // const param = new FormData()
          // this.fileList.forEach(file => {
          //   param.append('file', file.raw) // 此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
          //   param.append('fileName', file.name)
          //   param.append('appVersion', this.formItem.appVersion)
          //   param.append('versionInfo', this.formItem.versionInfo)
          //   param.append('updateContent', this.formItem.updateContent)
          // })
          // _this.$emit("refreshFn");
          // _this.formVisible = false;
          _this.$https(
              {
                url: "tAppVersion/save",
                method: "post",
                authType: this.backToken
              },
              _this.$qs.stringify(param)
            ).then(res => {
                if (res.data.resultCode === '200') {
                  _this.$message({
                    type: "success",
                    message: res.data.message
                  });
                  _this.formVisible = false;
                  _this.$emit("refreshFn");
                } else {
                  _this.$message({
                    type: "error",
                    message: res.data.message
                  });
                }
              },
              error => {
                _this.$message({
                  type: "error",
                  message: error
                });
              }
            );
        }
      });
    },
  }
};
</script>

<style lang="less">
@import "../../../../style/dialog.less";
.text-center {
  text-align: center;
}
.custom-dialog {
  .party-form .el-input {
    width: 100%;
  }
}
</style>