micro_vue/src/scrm_pages/article/components/CreateArticleForm.vue

<template>
    <div id="create-article-form-box">
      <el-dialog
        title="添加分类"
        :visible.sync="centerDialogVisible"
        width="1000px"
        center>
        <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform" :rules="rules">
          <el-row :span=20>
            <el-form-item label="分类名称:" required prop="name">
              <el-input v-model="form.name">

              </el-input>
            </el-form-item>
          </el-row>
          <el-row :span=20>
            <el-form-item label="分类描述:" required prop="summary">      
                <div style="margin: 10px 0;"></div>
                <el-input
                 type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                 v-model="form.summary">
                </el-input>
            </el-form-item>
          </el-row>
          <el-row :span=20>
            <el-form-item label="排序:" required prop="order">
              <el-input v-model="form.order">

              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
               <el-button type="primary" @click="addCategory('acticleform');">添加</el-button>
              <el-button  @click="centerDialogVisible = false">返回列表</el-button>
             </span>
      </el-dialog>
    </div>

</template>

<script>
    import { addCategory } from '@/api/act/submitinfo'
    export default {
        name: "CreateArticleForm",       
           props:{
             articsData:{
             type: Array,
             default: function () {
             return [];
        }
      }
           },
            data(){
                return {
                    centerDialogVisible:false,
                    rules: {
                    name: [{required: true, message: "请填写分类名称",},],
                    summary: [{required: true,message:"请填写分类描述"}],
                    order: [{required: true,message:"请填写排序"}]
                 },
                acticleform:[],
                 form:{
                    name:"",
                    summary:"",
                    order:"",
                   },
             }
          },   
           methods:{
                 open:function(){
                    this.centerDialogVisible = true;
                  },   
                 resetForm(formName) {
                     if (typeof(this.$refs[formName]) !='undefined') {
                     this.$refs[formName].resetFields();
                   }
                  },
               addCategory(formName){                 
                   this.$refs[formName].validate((valid)=>{
                       if(valid){                         
                            addCategory(this.form).then(response =>{
                                  console.log("添加分类响应",response.data.state)
                                  if(response.data.state==1){
                                    var category = response.data.data.category
                                    console.log("category是什么",category)
                                    this.centerDialogVisible=false;
                                    this.articsData.unshift(category);
                                    this.resetForm("acticleform");
                                    this.$message.success("添加分类成功");                           
                                  }
                            });
                       }   
                   });         
              },  
          }
      }  
</script>

<style scoped>

</style>