Przeglądaj źródła

文章管理 添加新增校验

DESKTOP-SVI9JE1\muzen 1 rok temu
rodzic
commit
11989e7e96

+ 40 - 16
src/views/content/article/detail.vue

@@ -1,10 +1,10 @@
 <template>
   <div class='app-container'>
-    <el-form class="form" label-width="auto" :disabled="disabled">
-      <el-form-item label="文章标题:">
+    <el-form :model="form" ref="form" :rules="rules" class="form" label-width="auto" :disabled="disabled">
+      <el-form-item label="文章标题:" prop="title">
         <el-input v-model="form.title" placeholder="请输入文章标题" />
       </el-form-item>
-      <el-form-item label="模板类型:">
+      <el-form-item label="模板类型:" prop="templateType">
         <el-select v-model="form.templateType" placeholder="请选择模板类型">
           <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
@@ -47,13 +47,13 @@
           </el-table-column>
         </el-table>
       </el-form-item>
-      <el-form-item label="分享标题:">
+      <el-form-item label="分享标题:" prop="shareTitle">
         <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
       </el-form-item>
-      <el-form-item label="分享描述:">
+      <el-form-item label="分享描述:" prop="shareDescription">
         <el-input v-model="form.shareDescription" type="textarea" :rows="5" placeholder="请输入分享描述" />
       </el-form-item>
-      <el-form-item label="分享图片:">
+      <el-form-item label="分享图片:" prop="shareIcon">
         <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')"
           :disabled="disabled" />
       </el-form-item>
@@ -239,7 +239,25 @@ export default {
       // 页面排版索引
       index: -1,
       // 只读
-      disabled: Boolean(this.$route.query.boolean)
+      disabled: Boolean(this.$route.query.boolean),
+      // 校验
+      rules: {
+        title: [{
+          required: true, message: '请输入文章标题', trigger: 'blur'
+        }],
+        templateType: [{
+          required: true, message: '请选择模版类型', trigger: 'change'
+        }],
+        shareTitle: [{
+          required: true, message: '请输入分享标题', trigger: 'blur'
+        }],
+        shareDescription: [{
+          required: true, message: '请输入分享描述', trigger: 'blur'
+        }],
+        shareIcon: [{
+          required: true, message: '请上传分享图片', trigger: 'change'
+        }]
+      }
     }
   },
   watch: {
@@ -347,11 +365,11 @@ export default {
         this.$set(e, 'contentType', row.audioType)
         this.$set(e, 'platformId', row.platformId)
       } else {
-        let e = this.index == -1 ? 'left' : 'right'
-        this.$set(this.form, `${e}ButtonContentId`, row.audioId)
-        this.$set(this.form, `${e}ButtonContentName`, row.audioName)
-        this.$set(this.form, `${e}ButtonContentType`, row.audioType)
-        this.$set(this.form, `${e}ButtonPlatformId`, row.platformId)
+        let e = this.index == -1 ? 'leftButton' : 'rightButton'
+        this.$set(this.form, `${e}ContentId`, row.audioId)
+        this.$set(this.form, `${e}ContentName`, row.audioName)
+        this.$set(this.form, `${e}ContentType`, row.audioType)
+        this.$set(this.form, `${e}PlatformId`, row.platformId)
       }
       this.$message.success('选择成功!')
       this.dialogVisible = false
@@ -369,10 +387,16 @@ export default {
 
     // 提交
     getSubmit() {
-      submit(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.success('提交成功!')
-          this.close()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功!')
+              this.close()
+            }
+          })
+        } else {
+          return false
         }
       })
     },

+ 1 - 1
src/views/content/article/index.vue

@@ -11,7 +11,7 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail">新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->