frontend/src/views/deviceUpgrade/components/upgradeDialog.vue

<template>
  <el-dialog
    class="upgradeDialog"
    title="上传Apk"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="670px"
    @close="handleclose"
  >
    <div class="upBox">
      <el-form
        :rules="rules"
        :model="formData"
        ref="dataForm"
        label-width="90px"
      >
        <el-form-item label="版本号：" prop="version">
          <el-input v-model="formData.version" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="上传Apk" prop="file">
          <el-input v-model="apkname" disabled></el-input>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      isShow: false,
      formData: {
        version: "",
        file: null,
      },
      rules: {
        version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
        file: [{ required: true, message: "请选择上传文件", trigger: "blur" }],
      },
      apkname: "",
      fileList: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 保存确定操作
    submitForm() {
      this.isShow = false;
    },
    display() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.$parent.updateList();
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.upgradeDialog {
}
</style>