ohplay_system/src/views/push/update/detail.vue

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
      <el-form-item label="版本号：" prop="lastVersion">
        <el-input v-model="form.lastVersion" placeholder="请输入版本号" />
      </el-form-item>
      <el-form-item label="升级标题：" prop="updateTitle">
        <el-input v-model="form.updateTitle" placeholder="请输入升级标题" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="升级说明：" prop="updateDesc">
        <el-input v-model="form.updateDesc" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入升级说明"
          maxlength="500" show-word-limit />
      </el-form-item>
      <el-form-item label="强制升级：" prop="isForceUpdate">
        <el-select v-model="form.isForceUpdate" placeholder="请选择是否强制">
          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="升级系统：" prop="appType">
        <el-select v-model="form.appType" placeholder="请选择升级系统">
          <el-option v-for="item in systemOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="下载路径：" prop="downUrl">
        <el-row type="flex" justify="space-between">
          <el-col :span="16">
            <el-input v-model="form.downUrl" placeholder="请输入或上传下载路径" />
          </el-col>
          <el-col :span="6">
            <Upload @upload="upload" style="float:right" />
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { detail, submit } from '@/api/push/update'
import { systemMixin } from '@/mixin'
export default {
  // name:"pushUpdateDetail",
  mixins: [systemMixin],
  data() {
    var checkVersion = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入版本号'))
      }
      let reg = /^[1-9](\.(0|[1-9])){2}$/
      if (reg.test(value)) {
        callback()
      } else {
        return callback(new Error('请输入正确的版本号，示例：x.x.x'))
      }
    }
    return {
      // 表单
      form: {
        downUrl: ""
      },
      // 只读
      disabled: false,
      // 是否强制
      typeOptions: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      // 校验
      rules: {
        lastVersion: [{ required: true, validator: checkVersion, trigger: 'blur' }],
        updateTitle: [{ required: true, message: '请输入升级标题', trigger: 'blur' }],
        updateDesc: [{ required: true, message: '请输入升级说明', trigger: 'blur' }],
        isForceUpdate: [{ required: true, message: '请选择是否强制', trigger: 'change' }],
        appType: [{ required: true, message: '请选择升级系统', trigger: 'change' }],
        downUrl: [{ required: true, message: '请上传下载路径', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.disabled = Boolean(this.$route.query.boolean)
      this.getDetail()
    }
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 上传
    upload(e) {
      this.form.downUrl = e.file
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/push/pushUpdate");
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功！')
              this.cancel()
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}
</style>