esua-epdc-admin/src/views/modules/events/issue-detail.vue

<template>
  <el-dialog :visible.sync="visible" :title="$t('look')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item label="发布人">
        <div>{{dataForm.nickName}}</div>
      </el-form-item>
      <el-form-item label="发布时间">
        <div>{{dataForm.distributeTime}}</div>
      </el-form-item>
      <el-form-item label="议题内容">
        <div>{{dataForm.issueContent}}</div>
        <span v-for="(imgUrl, index) in dataForm.images" :key="index" style="margin: 5px">
          <el-popover placement="bottom" title="" trigger="click">
            <img :src="imgUrl" style='width: 300px;height: 300px;'>
            <img slot="reference" :src="imgUrl" :alt="imgUrl" style="max-height: 100px;max-width: 100px">
          </el-popover>
        </span>
      </el-form-item>
      <el-form-item>
        <span>支持 {{dataForm.approveNum}}</span>
        <span>反对 {{dataForm.opposeNum}}</span>
        <span>评论 {{dataForm.commentNum}}</span>
      </el-form-item>
      <el-form-item label="工作反馈">
        <el-timeline :reverse="false">
          <el-timeline-item v-for="(feedbackDTO, index) in dataForm.feedbackDTOList" :key="index" :timestamp="feedbackDTO.createdTime" placement="top">
            <el-card>
              <p>{{feedbackDTO.stateName}}{{feedbackDTO.createdTime}}</p>
              <p>{{feedbackDTO.advice}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
      <el-form-item label="评论">
        <el-collapse v-for="(commentsDTO, index) in commentsDTOs" :key="index" :name="index">
          <el-collapse-item>
            <template slot="title" style="height: 100px">
              <span>
                {{commentsDTO.content}}
              </span>
            </template>
            <div>{{commentsDTO.replyComment ? commentsDTO.replyComment.content : ''}}</div>
          </el-collapse-item>
          <el-button @click="deleteComment(commentsDTO.commentId)">屏蔽评论</el-button>
        </el-collapse>
        <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limitVal"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandleNew"
        @current-change="pageCurrentChangeHandleNew">
      </el-pagination>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        nickName: '',
        distributeTime: '',
        issueContent: '',
        feedbackDTOList: [],
        images: []
      },
      order: '',
      orderField: '',
      pageIndex: 1,
      limitVal: 10,
      total: 0,
      commentsDTOs: []
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
          this.getCommentList()
        }
      })
    },
    deleteComment (val) {
      this.$http['post'](
        '/events/issue/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getCommentList()
          }
        })
      }).catch(() => {})
    },
    getInfo () {
      this.$http.get(`/events/issue/issueContentDetail/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
    pageSizeChangeHandleNew (val) {
      this.pageIndex = 1
      this.limitVal = val
      this.getCommentList()
    },
    pageCurrentChangeHandleNew (val) {
      this.pageIndex = val
      this.getCommentList()
    },
    getCommentList () {
      this.$http.get('/events/issue/comments', { params: { id: this.dataForm.id, order: this.order, orderField: this.orderField, page: this.pageIndex, limit: this.limitVal }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.commentsDTOs = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.commentsDTOs = res.data.list
        this.total = res.data.total
      }).catch(() => {})
    }
  }
}
</script>