元气智驾官网后台前端页面
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

113 lignes
3.5 KiB

  1. <!--
  2. * @Date: 2021-10-11 14:12:26
  3. * @LastEditTime: 2022-07-27 10:48:47
  4. * @Description: 新增/编辑页面
  5. -->
  6. <template>
  7. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="resetform">
  8. <el-form-item label="文章标题" prop="name">
  9. <el-input v-model="ruleForm.name"></el-input>
  10. </el-form-item>
  11. <el-form-item label="活动区域" prop="region">
  12. <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
  13. <el-option label="区域一" value="shanghai"></el-option>
  14. <el-option label="区域二" value="beijing"></el-option>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="活动性质" prop="type">
  18. <el-checkbox-group v-model="ruleForm.type">
  19. <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  20. <el-checkbox label="地推活动" name="type"></el-checkbox>
  21. <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  22. <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  23. </el-checkbox-group>
  24. </el-form-item>
  25. <el-form-item label="特殊资源" prop="resource">
  26. <el-radio-group v-model="ruleForm.resource">
  27. <el-radio label="线上品牌商赞助"></el-radio>
  28. <el-radio label="线下场地免费"></el-radio>
  29. </el-radio-group>
  30. </el-form-item>
  31. <el-form-item label="活动形式" prop="desc">
  32. <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  33. </el-form-item>
  34. <el-form-item>
  35. <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
  36. <el-button @click="resetForm('ruleForm')">重置</el-button>
  37. </el-form-item>
  38. </el-form>
  39. </template>
  40. <script>
  41. import demoService from '@/api/nested/demo'
  42. export default {
  43. props: ['id'],
  44. data() {
  45. return {
  46. ruleForm: {
  47. name: '',
  48. region: '',
  49. type: [],
  50. resource: '',
  51. desc: ''
  52. },
  53. rules: {
  54. name: [
  55. { required: true, message: '请输入活动名称', trigger: 'blur' },
  56. { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  57. ],
  58. region: [
  59. { required: true, message: '请选择活动区域', trigger: 'change' }
  60. ],
  61. type: [
  62. { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
  63. ],
  64. resource: [
  65. { required: true, message: '请选择活动资源', trigger: 'change' }
  66. ],
  67. desc: [
  68. { required: true, message: '请填写活动形式', trigger: 'blur' }
  69. ]
  70. },
  71. loadingBtn: false
  72. }
  73. },
  74. created() {
  75. if (this.id) {
  76. this.getData()
  77. }
  78. },
  79. methods: {
  80. getData() {
  81. demoService.getData().then(res => {
  82. this.ruleForm = res
  83. })
  84. },
  85. submitForm(formName) {
  86. this.$refs[formName].validate((valid) => {
  87. if (valid) {
  88. this.loadingBtn = true
  89. demoService.save(this.ruleForm).then(res => {
  90. this.$message({
  91. message: '操作成功!',
  92. type: 'success'
  93. })
  94. this.loadingBtn = false
  95. this.$emit('close', 'save')
  96. }).catch(() => {
  97. this.loadingBtn = true
  98. })
  99. } else {
  100. console.log('error submit!!')
  101. return false
  102. }
  103. })
  104. },
  105. resetForm(formName) {
  106. this.$refs[formName].resetFields()
  107. }
  108. }
  109. }
  110. </script>