yelaixiang/src/views/comment/auditModal.vue

<template>
    <ModalView ref="mv" cname="ElDialog" :viewProps="{
        customClass: 'myModal'
    }">
        <div style="flex: 1;">
            <el-form ref="uForm" :model="form" :rules="rules">
                <el-form-item label="审核状态" prop="auditStatus">
                    <el-radio-group v-model="form.auditStatus">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核备注" prop="auditReason">
                    <el-input type="textarea" placeholder="请输入审核备注/拒绝理由，审核拒绝时必填" v-model="form.auditReason"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('uForm')">确 定</el-button>
            <el-button @click="resetForm('uForm')">取 消</el-button>
        </div>
    </ModalView>
</template>

<script>
import ModalView from '@/components/ZModalView/index.vue';
import { auditComment } from "@/api/system/comment";
export default {
    components: {
        ModalView
    },
    data() {
        return {
            title: '审核',
            form: {},
            oForm: {},
            loading: false,
        }
    },
    computed: {
        rules() {
            return {
                auditStatus: [
                    { required: true, message: '请选择审核状态', trigger: 'change' }
                ],
                auditReason: [
                    { required: this.form.auditStatus === 2, message: '请输入拒绝理由', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    auditComment({
                        ...this.form,
                        commentId: this.oForm.id
                    }).then(res => {
                        this.$modal.msgSuccess("操作成功");
                        this.resetForm('uForm');
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.close();
        },
        open(e) {
            if (e) {
                this.oForm = e;
            }
            console.log(this.oForm)
            this.$refs.mv.open(this.title);
        },
        // 关闭弹窗
        close() {
            this.$refs.mv.close();
        },
    }
};
</script>

<style lang="scss" scoped>
::v-deep .myModal {
    .el-dialog__body {
        max-height: 70vh;
        overflow-y: auto;
        padding: 10px 20px;
    }
}
</style>