eta_front/src/views/approve_manage/components/rejectDialog.vue

<template>
    <el-dialog custom-class="approve-reject-dialog"
        :title="$t('AprrovalDetailPage.rejection_title')"
        :visible.sync="isDetailDialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="$emit('close')"
        width="692px"
        v-dialogDrag
        center
    >
        <div class="dialog-content-wrap">
            <el-input type="textarea" v-model="content" :disabled="!isEdit" :rows="10" :placeholder="isEdit?$t('AprrovalDetailPage.rejection_reason_ipt'):'无'"></el-input>
        </div>
        <div class="dialog-btn-wrap">
            
            <template v-if="isEdit">
                <el-button @click="$emit('close')">{{$t('Dialog.cancel_btn')}}</el-button>
                <el-button type="primary" @click="handleConfirm">{{$t('Dialog.confirm_btn')}}</el-button>
            </template>
            <el-button v-else @click="$emit('close')">{{$t('Dialog.known')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props:{
        isDetailDialogShow:{
            type:Boolean,
            default:false
        },
        isEdit:{
            type:Boolean,
            default:true
        },
        data:{
            type:Object,
            default:()=>{return{}}
        }
    },
    watch:{
        isDetailDialogShow(val){
            if(val){
                this.content = this.data.ApproveRemark||''
            }
        }
    },
    data() {
        return {
            content:''
        };
    },
    methods: {
        handleConfirm(){
           if(this.content.length > 500){
              return this.$message.warning('内容不能超过500字') 
           };
            this.$emit('edit',this.content)
        }
    },
};
</script>

<style lang="scss">
.approve-reject-dialog{
    .dialog-content-wrap{
        .el-textarea{
            textarea{
                resize: none !important;
            }
        }
    }
    .dialog-btn-wrap{
        text-align: center;
        margin-top: 20px;
        padding-bottom: 25px;
    }
}
</style>