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>
            <div class="tips"><p>请输入1-99的整数，数值越小，模块排序越靠前</p></div>
          </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,getAritcleCount } from '@/api/act/submitinfo'
    import {checkNumber} from "@/utils/tools";
    export default {
        name: "CreateArticleForm",       
           props:{
             articsData:{
             type: Array,
             default: function () {
             return [];
                 }
              }
           },
            data(){
                 var checkNumberRule = (rule, value, callback) => {
                    if (!checkNumber(value)) {
                       callback(new Error('请输入1-99的整数'));
                     }else {
                       callback(); 
                       }
                    };

                return {
                    centerDialogVisible:false,               
                    rules: {
                    name: [{required: true, message: "请填写分类名称",},],
                    summary: [{required: true,message:"请填写分类描述"}],
                    order: [{required: true,message:"请填写排序"},{validator:checkNumberRule}],
                 },
                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){   
                            var params = new Object();
                            params.name = this.form.name;      
                             params.summary = this.form.summary;
                            params.order = this.form.order;       
                            console.log("对象params是什么?",params);         
                            addCategory(params).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("添加分类成功");                           
                                  }else{
                                    this.$message.error("该分类名称已存在");
                                    
                                  }
                            }).catch(e=>{})
                       }   
                   });         
              },    
          },
      }  
</script>

<style scoped>
  .tips {
    font-size: 12px;
    line-height: 18px;
    width:100%;
    height: 100px;
    /* border:solid 1px red; */
    margin-left: 86px;
  }
</style>