推送管理 消息推送 修改不同的推送类型对应不同的模板

src/views/push/message/index.vue

@@ -39,7 +39,8 @@
       <el-table-column label="推送平台" prop="systemType" align="center" :formatter="systemFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog(scope.row.id)" v-hasPermi="['push:message:edit']">编辑</el-button>
+          <el-button type="text" @click="getDialog(scope.row.id)" v-hasPermi="['push:message:edit']">编辑
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -47,33 +48,33 @@
       @pagination="getList" />
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="新增推送" width="500px" :before-close="cancel">
-      <el-form label-width="100px">
-        <el-form-item label="推送类型：">
+      <el-form label-width="auto" :model="dialogForm" :rules="rules" ref="dialogForm">
+        <el-form-item label="推送类型：" prop="messageType">
           <el-select v-model="dialogForm.messageType" placeholder="请选择推送类型">
             <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="推送标题：">
+        <el-form-item label="推送标题：" prop="title">
           <el-input v-model="dialogForm.title" placeholder="请输入推送标题" />
         </el-form-item>
-        <el-form-item label="推送内容：">
+        <el-form-item label="推送内容：" prop="content">
           <el-input v-model="dialogForm.content" type="textarea" rows="4" placeholder="请输入推送内容" />
         </el-form-item>
-        <el-form-item v-if="dialogForm.id" label="打开方式：">
+        <el-form-item v-if="dialogForm.messageType === 4" label="打开方式：" prop="jumpType">
           <el-select v-model="dialogForm.jumpType" placeholder="请选择打开方式">
             <el-option v-for="item in jumpOptions" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="dialogForm.id" label="参数：">
+        <el-form-item v-if="dialogForm.messageType === 4" label="参数：" prop="jumpContent">
           <el-input v-model="dialogForm.jumpContent" placeholder="请输入URL或App参数" />
         </el-form-item>
-        <el-form-item label="推送日期：">
+        <el-form-item label="推送日期：" prop="pushTime">
           <el-date-picker v-model="dialogForm.pushTime" type="datetime" placeholder="选择推送日期"
             value-format="yyyy-MM-dd HH:mm:ss" />
         </el-form-item>
-        <el-form-item label="推送平台：">
+        <el-form-item label="推送平台：" prop="systemType">
           <el-select v-model="dialogForm.systemType" placeholder="请选择推送平台">
             <el-option v-for="item in systemOptions" :key="item.value" :label="item.label"
               :value="item.value" />
@@ -151,7 +152,39 @@ export default {
       }],
       // 表单
       title: '',
-      dialogForm: {}
+      dialogForm: {},
+      // 校验
+      rules: {
+        messageType: [{
+          required: true, message: '请选择推送类型', trigger: 'change'
+        }],
+        title: [{
+          required: true, message: '请输入推送标题', trigger: 'blur'
+        }],
+        content: [{
+          required: true, message: '请输入推送内容', trigger: 'blur'
+        }],
+        jumpType: [{
+          required: true, message: '请选择打开方式', trigger: 'change'
+        }],
+        jumpContent: [{
+          required: true, message: '请输入参数', trigger: 'blur'
+        }],
+        pushTime: [{
+          required: true, message: '请选择推送日期', trigger: 'change'
+        }],
+        systemType: [{
+          required: true, message: '请选择推送平台', trigger: 'change'
+        }]
+      }
+    }
+  },
+  watch: {
+    'dialogForm.messageType'(val) {
+      if (val !== 4) {
+        delete this.dialogForm.jumpType
+        delete this.dialogForm.jumpContent
+      }
     }
   },
   mounted() {
@@ -197,29 +230,36 @@ export default {
 
     // 推送
     getSubmit() {
-      if (this.dialogForm.id) {
-        edit(this.dialogForm).then(res => {
-          if (res.code === 0) {
-            this.$message.success('新增成功！')
-            this.dialogVisible = false
-            this.getList()
-          }
-        })
-      } else {
-        create(this.dialogForm).then(res => {
-          if (res.code === 0) {
-            this.$message.success('新增成功！')
-            this.dialogVisible = false
-            this.getList()
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          if (this.dialogForm.id) {
+            edit(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          } else {
+            create(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
           }
-        })
-      }
+        } else {
+          return false
+        }
+      })
     },
 
     // 取消
     cancel() {
-      this.dialogVisible = false
       this.dialogForm = {}
+      this.$refs.dialogForm.resetFields()
+      this.dialogVisible = false
     },
 
     // 字典翻译