FormPageDemo.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <div class='input-form'>
  3. <el-form :model='ruleForm' :rules='rules' ref='ruleForm'>
  4. <el-form-item label='活动名称' prop='name'>
  5. <el-input v-model='ruleForm.name'></el-input>
  6. </el-form-item>
  7. <el-form-item label='活动区域' prop='region'>
  8. <el-select v-model='ruleForm.region' placeholder='请选择活动区域'>
  9. <el-option label='区域一' value='shanghai'></el-option>
  10. <el-option label='区域二' value='beijing'></el-option>
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item label='活动时间' required>
  14. <el-col :span='6'>
  15. <el-form-item prop='date1'>
  16. <el-date-picker type='date' placeholder='选择日期' v-model='ruleForm.date1' style='width: 100%;'></el-date-picker>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :span='6'>
  20. <el-form-item prop='date2'>
  21. <el-time-picker
  22. type='fixed-time'
  23. placeholder='选择时间'
  24. v-model='ruleForm.date2'
  25. style='width: 100%;'
  26. ></el-time-picker>
  27. </el-form-item>
  28. </el-col>
  29. </el-form-item>
  30. <el-form-item label='活动时间' required>
  31. <el-col :span='6'>
  32. <el-form-item prop='date1'>
  33. <el-date-picker type='date' placeholder='选择日期' v-model='ruleForm.date1' style='width: 100%;'></el-date-picker>
  34. </el-form-item>
  35. </el-col>
  36. <el-col :span='6'>
  37. <el-form-item prop='date2'>
  38. <el-time-picker
  39. type='fixed-time'
  40. placeholder='选择时间'
  41. v-model='ruleForm.date2'
  42. style='width: 100%;'
  43. ></el-time-picker>
  44. </el-form-item>
  45. </el-col>
  46. </el-form-item>
  47. <el-form-item label='即时配送' prop='delivery'>
  48. <el-switch on-text off-text v-model='ruleForm.delivery'></el-switch>
  49. </el-form-item>
  50. <el-form-item label='活动性质' prop='type'>
  51. <el-checkbox-group v-model='ruleForm.type'>
  52. <el-checkbox label='美食/餐厅线上活动' name='type'></el-checkbox>
  53. <el-checkbox label='地推活动' name='type'></el-checkbox>
  54. <el-checkbox label='线下主题活动' name='type'></el-checkbox>
  55. <el-checkbox label='单纯品牌曝光' name='type'></el-checkbox>
  56. </el-checkbox-group>
  57. </el-form-item>
  58. <el-form-item label='特殊资源' prop='resource'>
  59. <el-radio-group v-model='ruleForm.resource'>
  60. <el-radio label='线上品牌商赞助'></el-radio>
  61. <el-radio label='线下场地免费'></el-radio>
  62. </el-radio-group>
  63. </el-form-item>
  64. <el-form-item label='活动形式' prop='desc'>
  65. <el-input type='textarea' v-model='ruleForm.desc'></el-input>
  66. </el-form-item>
  67. <el-form-item>
  68. <el-button type='primary' @click='submitForm("ruleForm")'>立即创建</el-button>
  69. <el-button @click='resetForm("ruleForm")'>重置</el-button>
  70. </el-form-item>
  71. </el-form>
  72. </div>
  73. </template>
  74. <script>
  75. export default {
  76. name: 'FormPageDemo',
  77. props: [],
  78. components: {},
  79. data() {
  80. return {
  81. imagesArr: [
  82. 'http://service.sagacloud.cn:28888/image-service/common/file_get?systemId=saas&key=业主管理1537929021391.png'
  83. ],
  84. ruleForm: {
  85. name: '',
  86. region: '',
  87. date1: '',
  88. date2: '',
  89. delivery: false,
  90. type: [],
  91. resource: '',
  92. desc: ''
  93. },
  94. rules: {
  95. name: [
  96. { required: true, message: '请输入活动名称', trigger: 'blur' },
  97. { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  98. ],
  99. region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
  100. date1: [
  101. {
  102. type: 'date',
  103. required: true,
  104. message: '请选择日期',
  105. trigger: 'change'
  106. }
  107. ],
  108. date2: [
  109. {
  110. type: 'date',
  111. required: true,
  112. message: '请选择时间',
  113. trigger: 'change'
  114. }
  115. ],
  116. type: [
  117. {
  118. type: 'array',
  119. required: true,
  120. message: '请至少选择一个活动性质',
  121. trigger: 'change'
  122. }
  123. ],
  124. resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
  125. desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
  126. }
  127. }
  128. },
  129. methods: {
  130. imagesChange(keys) {
  131. this.imagesArr = keys
  132. },
  133. submitForm(formName) {
  134. this.$refs[formName].validate(valid => {
  135. if (valid) {
  136. alert('submit!')
  137. } else {
  138. console.log('error submit!!')
  139. return false
  140. }
  141. })
  142. },
  143. resetForm(formName) {
  144. this.$refs[formName].resetFields()
  145. }
  146. }
  147. }
  148. </script>
  149. <style lang='scss' scoped>
  150. </style>