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

<template>
    <el-card :class="['reply-card', total > 0 && 'header-has-border', showInput && 'card-has-padding']" shadow="never">
        <template #header>
            <el-button type="primary" link @click="showInput = !showInput">留言
                <template #icon><el-icon size="16"><tjm-icon-mdi-comment-text-outline /></el-icon></template>
            </el-button>

            <div v-show="showInput" class="reply-form">
                <el-input v-model="messageContent" type="textarea" clearable autosize show-word-limit maxlength="140" placeholder="发布你的留言"></el-input>
                <el-button :loading="isSaving" type="primary" :disabled="!messageContent" @click="submit">发布</el-button>
            </div>
        </template>

        <template v-for="(item, index) in replyData" v-bind:key="index">
            <reply-tree :currentReply="item" :pageSize="replyChildrenCount" @closeDialog="reloadTree">
                <!-- 回复详情 -->
                <el-button class="text-reverse" type="primary" link @click="reply_detail(item)">共{{ item.childrenCount }}条回复
                    <template #icon><el-icon size="22"><tjm-icon-mdi-menu-down /></el-icon></template>
                </el-button>
            </reply-tree>
        </template>
        
        <div class="reply-card__footer">
            <template v-if="total > params.size">
                <el-divider></el-divider>
                <el-button class="text-reverse" type="primary" icon="arrow-right" link @click="showAllReply">查看全部{{ replyTotal }}条留言</el-button>
            </template>
            <template v-else><el-divider v-if="total">已加载全部留言</el-divider></template>
        </div>
    </el-card>

    <reply-detail v-if="dialog" ref="replyDetail" @closed="reloadTree(), dialog = false"></reply-detail>
</template>

<script>
import API from "@/api/policy/message";
import replyTree from "@/components/ReplyCard/tree/index.vue";
import replyDetail from "@/components/ReplyCard/detail.vue";

export default {
    components: {
        replyTree,
        replyDetail
    },
    props: {
        isDetail: { type: Boolean, default: false },
        refId: { type: String, default: "" },
        refType: { type: String, default: "policy_share" },
        replyCount: { type: Number, default: 2 },
        replyChildrenCount: { type: Number, default: 2 }
    },

    data() {
        return {
            loading: false,
            params: {
                page: 1,
                size: this.replyCount,
                parentId: 0,
                refId: this.refId,
                refType: this.refType
            },
            total: 0,
            replyData: [],

            showInput: false,
            isSaving: false,
            messageContent: null,

            dialog: false
        }
    },

    computed: {
        replyTotal() {
            return (this.replyData && this.replyData.length && (this.total + this.replyData.map(r => r.childrenCount).reduce((p, v) => p + v))) || 0;
        }
    },

    mounted() {
        this.reloadTree();
    },

    methods: {
        reloadTree() {
            this.loading = true;
            API.get(this.params).then(res => {
                this.loading = false;
                this.replyData = res.data.records;
                this.total = res.data.total;
                this.$emit("replySuccess")
            }).catch(() => this.loading = false);
        },

        submit() {
            if (this.refId && this.refType) {
                const data = {
                    parentId: 0,
                    refId: this.refId,
                    refType: this.refType,
                    messageContent: this.messageContent
                }

                this.isSaving = true;
                API.add(data).then(() => {
                    this.isSaving = false;
                    ElMessage.success("留言成功");
                    this.messageContent = null;
                    this.reloadTree();
                }).catch(() => this.isSaving = false);
            }
        },

        reply_detail(data) {
            this.dialog = true;
            nextTick(() => this.$refs.replyDetail.open(data));
        },

        showAllReply() {
            if (this.isDetail) {
               this.params.size = this.total;
               this.reloadTree();
            } else {
                this.$emit("replyAll", this.total);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.text-reverse {
  display: flex;
  flex-direction: row-reverse;

  :deep([class*='el-icon'] + span) {
    margin-left: 0;
    font-size: 13px;
  }
}

.reply-card {
  --el-card-border-color: var(--el-border-color-lighter);
  max-width: 750px;
  margin: auto;
  border: none;

  :deep(.el-card__header) {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
    padding: calc(var(--el-card-padding) / 2) var(--el-card-padding);

    .reply-form {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 80%;
      margin-top: calc(var(--el-card-padding) / 2);

      .el-button {
        margin-top: 18px;
      }
    }
  }

  > :deep(.el-card__body) {
    padding: 0;

    .el-card {
      border: none;
      border-radius: 0;

      .el-card__body {
        margin-left: 10px;
        padding: 0;

        .text-reverse {
          margin-bottom: 10px;
          padding: calc(9px / 2) 0 calc(9px / 2) 9px;
          border: none;
          border-left: 1px solid var(--el-border-color-lighter);
          border-radius: 0;
        }
      }
    }
  }

  .reply-card__footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;

    .el-divider {
      margin: 10px 0;
      border-color: var(--el-card-border-color);

      :deep(.el-divider__text) {
        padding: 0 60px;
        color: var(--el-text-color-disabled);
      }
    }
  }
}

.header-has-border.reply-card > {
  :deep(.el-card__header) {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: calc(100% - 2 * var(--el-card-padding));
      height: 1px;
      background: var(--el-card-border-color);
    }
  }

  :deep(.el-card__body) {
    padding: calc(var(--el-card-padding) / 2) var(--el-card-padding);
  }
}

.card-has-padding.reply-card > :deep(.el-card__header) {
  padding: var(--el-card-padding);
}
</style>