no message

src/views/operation/channels/index.vue

@@ -66,7 +66,7 @@
               </el-dropdown-menu>
             </el-dropdown>
             <el-button v-if="dialogForm.personalChannelList.length < 9" icon="el-icon-plus" size="small"
-              @click="inputVisible = true, type = 0">新增</el-button>
+              @click="getCreateDialog(0)">新增</el-button>
           </div>
         </el-form-item>
 
@@ -91,7 +91,7 @@
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-            <el-button icon="el-icon-plus" size="small" @click="inputVisible = true, type = 1">新增</el-button>
+            <el-button icon="el-icon-plus" size="small" @click="getCreateDialog(1)">新增</el-button>
           </div>
         </el-form-item>
       </el-form>
@@ -122,8 +122,13 @@
       </div>
     </el-dialog>
 
-    <el-dialog :visible.sync="inputVisible" title="分类名称" width="500px" :before-close="getInputClose">
-      <el-input v-model="classForm.channelTypeName" placeholder="请输入分类名称" />
+    <el-dialog :visible.sync="inputVisible" :title="classTitle" width="500px" :before-close="getInputClose">
+      <el-form :model="classForm" ref="classForm" label-width="auto">
+        <el-form-item label="分类名称：" prop="channelTypeName"
+          :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }, { max: 6, message: '不可超过6个字符', trigger: 'blur' }]">
+          <el-input v-model="classForm.channelTypeName" placeholder="请输入分类名称" />
+        </el-form-item>
+      </el-form>
       <div slot="footer">
         <el-button @click="getInputClose">取消</el-button>
         <el-button type="primary" @click="getInputSubmit">确定</el-button>
@@ -151,6 +156,7 @@ export default {
       readOnly: false,
       // 弹窗名称
       title: '新增',
+      classTitle: '新增',
       // 弹窗表单
       dialogForm: {
         deviceIds: []
@@ -255,36 +261,46 @@ export default {
     // 打开分类弹窗
     getInputDialog(item) {
       this.inputVisible = true
+      this.classTitle = '编辑'
       this.classForm = JSON.parse(JSON.stringify(item))
     },
+    getCreateDialog(type) {
+      this.inputVisible = true
+      this.classTitle = '新增'
+      this.type = type
+    },
     // 关闭分类表单
     getInputClose() {
       this.inputVisible = false
+      this.type = null
       this.classForm = {}
+      this.$refs.classForm.resetFields()
     },
     // 提交分类表单
     getInputSubmit() {
-      if (this.classForm.channelTypeName) {
-        if (this.type === 1) {
-          classEdit(this.classForm.channelTypeName, this.classForm.channelTypeId).then(res => {
-            if (res.code === 0) {
-              this.inputVisible = false
-              this.$message.success('编辑成功！')
-              this.getDetail()
-            }
-          })
+      this.$refs.classForm.validate((valid) => {
+        if (valid) {
+          if (this.type === null) {
+            classEdit(this.classForm.channelTypeName, this.classForm.channelTypeId).then(res => {
+              if (res.code === 0) {
+                this.getInputClose()
+                this.$message.success('编辑成功！')
+                this.getDetail()
+              }
+            })
+          } else {
+            classSubmit(this.classForm.channelTypeName, this.type, this.dialogForm.id).then(res => {
+              if (res.code === 0) {
+                this.getInputClose()
+                this.$message.success('新增成功！')
+                this.getDetail()
+              }
+            })
+          }
         } else {
-          classSubmit(this.classForm.channelTypeName, this.type, this.dialogForm.id).then(res => {
-            if (res.code === 0) {
-              this.inputVisible = false
-              this.$message.success('新增成功！')
-              this.getDetail()
-            }
-          })
+          return false
         }
-      } else {
-        this.$message.error('请输入频道分类名称')
-      }
+      })
     },
 
     // 提交