ncs_ui/src/views/ncs-orginazition/components/AppVersionManager.vue

<template>
  <el-card style="margin: 15px">
    <el-form ref="editform" :rules="rules" label-width="130px" :model="formmodel">

      <el-row>
        <el-col :span="12">
          <el-form-item label="APK文件上传">

            <el-upload
              class="upload-demo"
              drag
              :action="`${uploadServer}/ncs/app_version/upload`"
              :show-file-list="false"
              :on-success="uploaded"
              :before-upload="handleShopLogoBefore"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">只能上传APK文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="版本数字" prop="version_no">
            <el-input-number v-model="formmodel.version_no" :min="1" :max="1000" placeholder="请输入版本数字" />
<!--            <el-input v-model="formmodel.version_no" type="number" clearable :maxlength="100" placeholder="请输入版本信息" />-->
          </el-form-item>
          <el-form-item label="版本信息" prop="version_code">
            <el-input v-model="formmodel.version_code" clearable :maxlength="100" placeholder="请输入版本信息" />
          </el-form-item>
          <el-form-item label="文件路径" prop="ver_filepath">
            <el-input v-model="formmodel.app_path" clearable readonly placeholder="文件路径" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item align="center" class="margin-top-sm">
        <el-button type="success" @click="handlerFormSubmit">保存设置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { serverUrl } from '@/utils/domain'
import * as API_Device from '@/api/ncs_device'
export default {
  name: 'AppVersionManager',
  props: {
    deviceType: {
      type: Number,
      default: null
    },
    partId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formmodel: {
        app_path: ''
      },
      rules: {
        version_no: [
          { required: true, message: '版本数字不能为空', trigger: 'blur' }
        ],
        version_code: [
          { required: true, message: '版本信息不能为空', trigger: 'blur' }
        ],
        app_path: [
          { required: true, message: '请上传APK文件', trigger: 'blur' }
        ]
      },
      uploadServer: serverUrl
    }
  },
  mounted() {
    this.getAppVersion()
  },
  methods: {
    /** 上传成功后的钩子 更换图片 置空存储数组*/
    uploaded(response) {
      // this.formmodel.app_path = response
      this.$set(this.formmodel, 'app_path', response)
    },
    /** 文件上传之前的校验 */
    handleShopLogoBefore(file) {
      const isImg = file.type === 'application/vnd.android.package-archive'
      const ext = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() === 'apk'
      const isapk = isImg || ext
      if (!isapk) {
        this.$message.error('只能上传APK文件!')
      }
      return isapk
    },
    getAppVersion() {
      const params = {
        partid: this.partId,
        devicetype: this.deviceType
      }
      API_Device.getAPPVersion(params).then(res => {
        this.formmodel = { ...res }
      })
    },
    /** 新增 提交表单 */
    handlerFormSubmit() {
      this.$refs['editform'].validate((valid) => {
        if (valid) {
          /** 设置app版本信息 */
          this.formmodel.part_id = this.partId
          this.formmodel.device_type = this.deviceType
          API_Device.setAPPVersion(this.formmodel).then(res => {
            this.formmodel = { ...res }
            this.$message.success('保存成功！')
          }).catch(response => {
            this.$message.error(response.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>