detail.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
  4. <el-form-item label="版本号:" prop="lastVersion">
  5. <el-input v-model="form.lastVersion" placeholder="请输入版本号" />
  6. </el-form-item>
  7. <el-form-item label="升级标题:" prop="updateTitle">
  8. <el-input v-model="form.updateTitle" placeholder="请输入升级标题" maxlength="100" show-word-limit />
  9. </el-form-item>
  10. <el-form-item label="升级说明:" prop="updateDesc">
  11. <el-input v-model="form.updateDesc" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入升级说明"
  12. maxlength="500" show-word-limit />
  13. </el-form-item>
  14. <el-form-item label="强制升级:" prop="isForceUpdate">
  15. <el-select v-model="form.isForceUpdate" placeholder="请选择是否强制">
  16. <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="升级系统:" prop="appType">
  20. <el-select v-model="form.appType" placeholder="请选择升级系统">
  21. <el-option v-for="item in systemOptions" :key="item.value" :value="item.value" :label="item.label" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="下载路径:" prop="downUrl">
  25. <el-row type="flex" justify="space-between">
  26. <el-col :span="16">
  27. <el-input v-model="form.downUrl" placeholder="请输入或上传下载路径" />
  28. </el-col>
  29. <el-col :span="6">
  30. <Upload @upload="upload" style="float:right" />
  31. </el-col>
  32. </el-row>
  33. </el-form-item>
  34. </el-form>
  35. <div class="form-btn">
  36. <el-button @click="cancel">取消</el-button>
  37. <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import { detail, submit } from '@/api/push/update'
  43. import { systemMixin } from '@/mixin'
  44. export default {
  45. mixins: [systemMixin],
  46. data() {
  47. var checkVersion = (rule, value, callback) => {
  48. if (!value) {
  49. return callback(new Error('请输入版本号'))
  50. }
  51. let reg = /^[1-9](\.(0|[1-9])){2}$/
  52. if (reg.test(value)) {
  53. callback()
  54. } else {
  55. return callback(new Error('请输入正确的版本号,示例:x.x.x'))
  56. }
  57. }
  58. return {
  59. // 表单
  60. form: {
  61. downUrl: ""
  62. },
  63. // 只读
  64. disabled: false,
  65. // 是否强制
  66. typeOptions: [{
  67. value: 0,
  68. label: '否'
  69. }, {
  70. value: 1,
  71. label: '是'
  72. }],
  73. // 校验
  74. rules: {
  75. lastVersion: [{ required: true, validator: checkVersion, trigger: 'blur' }],
  76. updateTitle: [{ required: true, message: '请输入升级标题', trigger: 'blur' }],
  77. updateDesc: [{ required: true, message: '请输入升级说明', trigger: 'blur' }],
  78. isForceUpdate: [{ required: true, message: '请选择是否强制', trigger: 'change' }],
  79. appType: [{ required: true, message: '请选择升级系统', trigger: 'change' }],
  80. downUrl: [{ required: true, message: '请上传下载路径', trigger: 'blur' }]
  81. }
  82. }
  83. },
  84. mounted() {
  85. if (this.$route.query.id) {
  86. this.form.id = this.$route.query.id
  87. this.disabled = Boolean(this.$route.query.boolean)
  88. this.getDetail()
  89. }
  90. },
  91. methods: {
  92. // 详情
  93. getDetail() {
  94. detail(this.form.id).then(res => {
  95. if (res.code === 0) {
  96. this.form = res.data
  97. }
  98. })
  99. },
  100. // 上传
  101. upload(e) {
  102. this.form.downUrl = e.file
  103. },
  104. // 取消
  105. cancel() {
  106. this.$tab.closeOpenPage("/push/update");
  107. },
  108. // 确定
  109. getSubmit() {
  110. this.$refs.form.validate((valid) => {
  111. if (valid) {
  112. submit(this.form).then(res => {
  113. if (res.code === 0) {
  114. this.$message.success('提交成功!')
  115. this.cancel()
  116. }
  117. })
  118. } else {
  119. return false
  120. }
  121. })
  122. }
  123. }
  124. }
  125. </script>
  126. <style lang="scss" scoped>
  127. .el-form {
  128. width: 500px;
  129. }
  130. </style>