attendDialog.vue

<!--添加代码-->
<template>
    <div class="code">
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rulesForm" ref="form" :before-close="initForm">
                <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="initForm">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {addAttendInfo,updateAttendInfo} from "../api/api"
    export default {
        name: "attend-dialog",
        data() {
            return {
                id:"",
                form:{
                  name:"",
                },
                rulesForm:{
                    name:[{required:true,message:"请输入名称",trigger:'blur'},{min:1,max:20,message:'长度在1到20个字符之间',trigger:'blur'}]
                },
                title: "",
                dialogFormVisible: false,
                formLabelWidth: "100px"
            }
        },
        methods: {
            showAddDialog(title) {
                this.dialogFormVisible = true
                this.title = title;
            },
            showEditDialog(title,item){
                this.dialogFormVisible = true
                this.title = title;
                this.id = item.id;
                this.form.name = item.name
            },
            initForm(){
                this.dialogFormVisible = false;
                this.$refs['form'].resetFields();
            },
            submitForm(formName){
                this.$refs[formName].validate((valid)=>{
                    console.log(valid)
                    if(valid){
                        if(this.title == "添加列席"){
                            addAttendInfo(this.form).then(
                                (res)=>{
                                    this.$message.success('添加成功')
                                    this.$emit('update',res.data)
                                    this.initForm()
                                }
                            )
                        }else{
                            const data = {
                                id:this.id,
                                name:this.form.name,
                            }
                            updateAttendInfo(data).then(
                                (res)=>{
                                    this.$emit('update',res.data)
                                    this.$message.success('编辑成功')
                                    this.initForm()
                                }
                            )
                        }
                    }else{
                        return false
                    }
                })
            }

        }
    }
</script>

<style scoped>

</style>