管理后台-创建门店

htmldev/manage/src/views/business/outlet/details.vue

@@ -7,18 +7,24 @@
                top="50px">
       <el-form ref="form"
                :model="form"
+               :rules="formRules"
                label-width="140px">
-        <el-form-item label="门店名称：">
+        <el-form-item prop="bar_name"
+                      :rules="formRules.required"
+                      label="门店名称：">
           <el-input v-model="form.bar_name"
                     placeholder="请输入门店名称"
                     clearable></el-input>
         </el-form-item>
-        <el-form-item label="门店地址：">
+        <el-form-item prop="bar_address"
+                      :rules="formRules.required"
+                      label="门店地址：">
           <el-input v-model="form.bar_address"
                     placeholder="请输入门店地址"
                     clearable></el-input>
         </el-form-item>
-        <el-form-item label="门店图片：">
+        <el-form-item :rules="formRules.required"
+                      label="门店图片：">
           <el-upload :on-remove="handleRemove"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
@@ -30,7 +36,9 @@
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
           </el-upload>
         </el-form-item>
-        <el-form-item label="门店状态：">
+        <el-form-item prop="bar_status"
+                      :rules="formRules.required"
+                      label="门店状态：">
           <el-radio v-model="form.bar_status"
                     label="1">有效
             <el-radio v-model="form.bar_status"
@@ -38,25 +46,33 @@
             </el-radio>
           </el-radio>
         </el-form-item>
-        <el-form-item label="点歌开始时间：">
+        <el-form-item prop="bar_song_start_time"
+                      :rules="formRules.required"
+                      label="点歌开始时间：">
           <el-time-select placeholder="起始时间"
                           v-model="form.bar_song_start_time"
                           :picker-options="{start: '00:00', step: '00:05', end: '23:59'}">
           </el-time-select>
         </el-form-item>
-        <el-form-item label="点歌结束时间：">
+        <el-form-item prop="bar_song_end_time"
+                      :rules="formRules.required"
+                      label="点歌结束时间：">
           <el-time-select placeholder="结束时间"
                           v-model="form.bar_song_end_time"
                           :picker-options="{start: '00:00', step: '00:05', end: '23:59', minTime: form.bar_song_start_time}">
           </el-time-select>
         </el-form-item>
-        <el-form-item label="座位预定开始时间：">
+        <el-form-item prop="bar_place_reserve_start_time"
+                      :rules="formRules.required"
+                      label="座位预定开始时间：">
           <el-time-select placeholder="起始时间"
                           v-model="form.bar_place_reserve_start_time"
                           :picker-options="{start: '00:00', step: '00:05', end: '23:59'}">
           </el-time-select>
         </el-form-item>
-        <el-form-item label="座位预定结束时间：">
+        <el-form-item prop="bar_place_reserve_end_time"
+                      :rules="formRules.required"
+                      label="座位预定结束时间：">
           <el-time-select placeholder="结束时间"
                           v-model="form.bar_place_reserve_end_time"
                           :picker-options="{start: '00:00', step: '00:05', end: '23:59', minTime: form.bar_place_reserve_start_time}">
@@ -101,13 +117,13 @@ export default {
         bar_name: '', // 门店名称
         bar_address: '', // 门店地址
         bar_status: '1', // 门店状态(0无效1有效)
+        bar_img_url: [], // 门店图片
         bar_song_start_time: '', // 点歌开始时间
         bar_song_end_time: '', // 点歌结束时间
         bar_place_reserve_start_time: '', // 座位预定开始时间
         bar_place_reserve_end_time: '', // 座位预定结束时间
         note: '' // 备注
-      },
-      bar_img_url: [] // 门店图片
+      }
     }
   },
   methods: {
@@ -120,24 +136,30 @@ export default {
     },
     handleRemove (file) {
       const { path } = file.response.data
-      this.bar_img_url = this.bar_img_url.filter(item => item !== path)
+      this.form.bar_img_url = this.form.bar_img_url.filter(item => item !== path)
     },
     handleAvatarSuccess (res) {
       if (res.code === 200) {
         const { path } = res.data
-        this.bar_img_url.push(path)
+        this.form.bar_img_url.push(path)
       } else {
         this.$message.error('图片上传失败')
       }
     },
-    async handleSubmit () {
-      let url = this.exData.id ? '/v1/bar/modify' : '/v1/bar/add'
-      const data = await this.$fetch(url, { ...this.form })
-      if (data.code === 200) {
-        this.$message.success('提交成功')
-        this.$emit('success')
-        this.dialog = false
-      }
+    handleSubmit () {
+      const url = this.exData.id ? '/v1/bar/modify' : '/v1/bar/add'
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          const data = await this.$fetch(url, {
+            ...this.form
+          })
+          if (data.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('success')
+            this.dialog = false
+          }
+        }
+      })
     }
   },
   mounted () {