优化

src/views/monthly/components/createdMonthly.vue

@@ -1,17 +1,17 @@
 <template>
   <el-dialog :title="title" :show="show" :visible.sync="monthly_show" width="60%" class="public_task" @close="$emit('update:show', false)">
     <div class="blueStripe" />
-    <el-form ref="monthly_form" :model="monthly_form" label-position="left" label-width="80px">
-      <el-form-item label="标题">
+    <el-form ref="monthly_form" :model="monthly_form" :rules="rules" label-position="left" label-width="80px">
+      <el-form-item label="标题" prop="title">
         <el-input v-model="monthly_form.title" placeholder="请输入" />
       </el-form-item>
-      <el-form-item label="缩略图">
+      <el-form-item label="缩略图" prop="thumb">
         <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreview" :on-remove="handleRemove">
           <i class="el-icon-plus" />
           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
         </el-upload>
       </el-form-item>
-      <el-form-item label="素材">
+      <el-form-item label="素材" prop="content">
         <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreviewTow" :on-remove="handleRemoveTow">
           <i class="el-icon-plus" />
           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
@@ -34,7 +34,12 @@ export default {
   data() {
     return {
       monthly_show: this.show,
-      monthly_form: {}
+      monthly_form: {},
+      rules: {
+        title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
+        thumb: [{ required: true, message: '缩略图不能为空', trigger: 'change' }],
+        content: [{ required: true, message: '素材不能为空', trigger: 'change' }]
+      }
     }
   },
   watch: {
@@ -47,8 +52,12 @@ export default {
   },
   methods: {
     monthly_dialog() {
-      this.$emit('monthly_created', this.monthly_form)
-      this.$emit('update:show', false)
+      this.$refs.monthly_form.validate((valid) => {
+        if (valid) {
+          this.$emit('monthly_created', this.monthly_form)
+          this.$emit('update:show', false)
+        }
+      })
     },
     handleClose(done) {
       this.monthly_show = false