add.vue

<template>
    <div style="display: inline-block;">
        <div @click.stop="openDialog">
            <slot></slot>
        </div>
        <el-dialog
            title="新增"
            :visible.sync="visible"
            @closed="closed"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="项目描述" prop="description">
                    <el-input type="textarea" v-model="form.description" placeholder="请输入项目描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {add} from '../api'
export default {
    name: 'project-add',
    data(){
        return {
            // 弹窗是否展示
            visible: false,
            // 表单数据
            form: {
                name: '',
                description: ''
            }
        }
    },
    methods: {
        // 打开对话窗
        openDialog(){
            this.visible = true
        },
        // 对话框关闭回调
        closed(){
            this.$refs.form.resetFields()
        },
        // 确定
        ok(){
            add(this.form).then(res => {
                if (res.status === 200){
                    this.$message.success('新增成功')
                    this.$emit('reload')
                    this.visible = false
                }
            })
        },
        // 取消
        cancel(){
            this.visible = false
        }
    }
}
</script>
Last modified: 15 十一月 2023