scrm-vue/src/scrm_pages/article/components/EditArticleForm.vue

<template>
    <div id="edit-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="submitForm('acticleform')">保存
               </el-button>
              <el-button  @click="centerDialogVisible = false">取消</el-button>
             </span>
      </el-dialog>   
    </div>
</template>
<script>
 import { EditArticleCategory } from '@/api/act/submitinfo'
export default {
    name: "EditArticleForm",
      props:{
        form:{
           name:'',
           summary:'',
           order:'',
           id:0,
        },
      artilceIndex:{
          type:Number,
          default:-1,
        },
      articsData:{
          type: Array,
          default: function () {
          return [];
        }
      }
    },
     data(){
          return {
          centerDialogVisible:false,
           rules: {
             name: [{required: true, message: "请填写分类名称",},],
             summary: [{required: true,message:"请填写分类描述"}],
             order: [{required: true,message:"请填写排序"}]
              },
             }
          }, 
          methods:{
                open:function(){
                  this.centerDialogVisible = true;
                },
                resetForm(formName) {
                     if (typeof(this.$refs[formName]) !='undefined') {
                     this.$refs[formName].resetFields();
                   }
                },  
              submitForm(forname){ 
                this.$refs[forname].validate((valid)=>{
                   if(valid){
                       var order = this.form.order
                       var ord = parseInt(order)
                       this.form.order = ord
                      EditArticleCategory(this.form.id,this.form).then(response=>{                        
                           var res =  response.data;
                           console.log("返回响应",res.state)
                           if(res.state ===1 ){
                              var categorys = res.data.category; 
                              console.log("categorys是什么",categorys)
                              this.articsData[this.artilceIndex].name = categorys.name;
                              this.articsData[this.artilceIndex].summary = categorys.summary;
                              this.articsData[this.artilceIndex].order = categorys.order;
                              //this.articsData.unshift(categorys);
                              // this.resetForm("acticleform");
                              this.centerDialogVisible = false;
                              this.$message.success("编辑文章分类成功");
                           }
                      })
                   }
                })
              },  
          }
}
</script>
<style scoped>

</style>