猫舍管理 栏目管理 添加表单校验

src/views/ohplay/programa/index.vue

@@ -22,26 +22,26 @@
       </el-table-column>
     </el-table>
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px">
-      <el-form label-width="100px">
-        <el-form-item label="栏目名称：">
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="栏目名称：" prop="name">
           <el-input v-model="form.name" placeholder="请输入栏目名称" />
         </el-form-item>
-        <el-form-item label="栏目排序：">
+        <el-form-item label="栏目排序：" prop="sort">
           <el-input-number v-model="form.sort" :min="0" />
         </el-form-item>
-        <el-form-item label="栏目状态：">
+        <el-form-item label="栏目状态：" prop="type">
           <el-select v-model="form.type" placeholder="请选择栏目状态">
             <el-option v-for="item in dict.type.valid_yes_not" :key="item.value" :label="item.label"
               :value="Number(item.value)" />
           </el-select>
         </el-form-item>
-        <el-form-item label="栏目定位：">
+        <el-form-item label="栏目定位：" prop="location">
           <el-input v-model="form.location" type="textarea" :rows="4" placeholder="请输入栏目定位" />
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button>取消</el-button>
+        <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
@@ -62,7 +62,22 @@ export default {
       dialogVisible: false,
       title: '',
       // 表单
-      form: {}
+      form: {},
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入栏目名称', trigger: 'blur'
+        }],
+        sort: [{
+          required: true, message: '请选择栏目排序', trigger: 'change'
+        }],
+        type: [{
+          required: true, message: '请选择栏目状态', trigger: 'change'
+        }],
+        location: [{
+          required: true, message: '请输入栏目定位', trigger: 'blur'
+        }]
+      }
     }
   },
   mounted() {
@@ -82,38 +97,47 @@ export default {
     // 打开弹窗
     getDialog(id) {
       this.dialogVisible = true
+      this.title = id ? '编辑' : '新增'
       if (id) {
-        this.title = '详情'
         detail(id).then(res => {
           if (res.code === 0) {
             this.form = res.data
           }
         })
-      } else {
-        this.title = '新增'
-        this.form = {}
       }
     },
 
     // 新增
     getSubmit() {
-      if (this.form.id) {
-        edit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('修改成功！')
-            this.dialogVisible = false
-            this.getList()
-          }
-        })
-      } else {
-        create(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('创建成功！')
-            this.dialogVisible = false
-            this.getList()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.id) {
+            edit(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('修改成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          } else {
+            create(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('创建成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
           }
-        })
-      }
+        } else {
+          return false
+        }
+      })
+    },
+
+    // 取消
+    cancel() {
+      this.$refs.form.resetFields()
+      this.dialogVisible = false
     },
 
     // 字典翻译