风格菜单-添加风格编号字段

src/views/componentGallery/style.vue

@@ -27,6 +27,8 @@
                     <el-table class="my-table" :data="tableData">
                         <el-table-column fixed prop="id" label="编号">
                         </el-table-column>
+                        <el-table-column fixed prop="class_id" label="风格编号">
+                        </el-table-column>
                         <el-table-column prop="name" label="风格名称" width="">
                         </el-table-column>
                         <el-table-column prop="keyword" label="风格关键词" width="">
@@ -72,6 +74,9 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
+                    <el-form-item label="风格编号:" prop="class_id">
+                        <el-input v-model="ruleForm.class_id" placeholder="请输入风格编号"></el-input>
+                    </el-form-item>
                     <el-form-item label="风格名称:" prop="name">
                         <el-input v-model="ruleForm.name" placeholder="请输入风格名称"></el-input>
                     </el-form-item>
@@ -156,10 +161,12 @@ export default {
             ruleForm: {
                 keyword: '', //风格关键词
                 name: '', //风格名称
+                class_id: '', //风格编号
             },
             rules: {
                 keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
                 name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                class_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             }
         }
     },
@@ -294,9 +301,10 @@ export default {
             //数据回显
             this.ruleForm.name = val.name            
             this.ruleForm.keyword = val.keyword;
+            this.ruleForm.class_id = val.class_id;
             this.tags = val.keyword ? val.keyword.split("|") : [];
             // console.log(typeof(this.ruleForm.keyword))
-            // console.log(this.ruleForm.keyword)        
+            console.log(this.ruleForm)        
         },
         //1.8 添加
         addWebsite() {
@@ -307,6 +315,7 @@ export default {
             this.ruleForm.keyword = ''
             this.tags = []
             this.ruleForm.name = ''
+            this.ruleForm.class_id = ''
         },
 
         // 弹出层相关方法 ---------------------------------------------------->
@@ -331,7 +340,7 @@ export default {
             }
 
             if (this.dialogName == "编辑") {
-                this.$store.dispatch('genre/upTemplateClass',{id: this.activeid,name: this.ruleForm.name,keyword: this.ruleForm.keyword}).then(res=> {
+                this.$store.dispatch('genre/upTemplateClass',{id: this.activeid,name: this.ruleForm.name,keyword: this.ruleForm.keyword,class_id: this.ruleForm.class_id}).then(res=> {
                     if (res.code == 200) {
                         this.$message({
                             message: '编辑成功',