easydo-zcgx-web/src/components/ReplyCard/dialog.vue

<template>
    <el-dialog v-model="visible" :title="`回复@${form.replyName}`" width="680" @closed="$emit('closed')">
        <el-input v-model="form.messageContent" type="textarea" autosize clearable show-word-limit maxlength="140" placeholder="发布你的回复"></el-input>

        <template #footer>
            <el-button :loading="isSaving" type="primary" :disabled="!form.messageContent" @click="submit">回复</el-button>
        </template>
    </el-dialog>
</template>

<script>
import API from "@/api/policy/message";

export default {
    emits: ["success", "closed"],
    props: {
        refId: { type: String, default: "" },
        refType: { type: String, default: "policy_share" }
    },
    
    data() {
        return {
            visible: false,
            isSaving: false,
            
            form: {
                parentId: null,
                refId: this.refId,
                refType: this.refType,
                replyId: null,
                replyName: null,
                messageContent: null
            }
        }
    },

    methods: {
        open() {
            this.visible = true;
            return this;
        },

        setData(data) {
            if (data.parentId == 0) {
                this.form.parentId = data.id;
            } else {
                this.form.parentId = data.parentId;
                this.form.replyId = data.createId;
                this.form.replyName = data.createName;
            }
        },

        // 表单提交方法
        submit() {
            this.isSaving = true;
            API.add(this.form).then(res => {
                this.isSaving = false;
                if (res.code === 200) {
                    ElMessage.success("操作成功");
                    this.visible = false;
                    this.$emit("success", this.form.parentId);
                } else ElMessage.error(res.msg);
            }).catch(() => this.isSaving = false);
        }
    }
}
</script>

<style lang="scss" scoped>
.el-textarea {
  margin: 10px 0 18px;
}
</style>