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-button type="primary" @click="innerVisible = true">点击查看评论</el-button>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
    </template>
    <el-dialog width="90%" title="评论" :visible.sync="innerVisible" append-to-body>
      <el-table :data="commentsDTOs" border style="width: 100%;">
          <el-table-column prop="user.userName" label="发言人" header-align="center" align="center"></el-table-column>
          <el-table-column prop="commentTime" label="发言时间" header-align="center" align="center"></el-table-column>
          <el-table-column prop="content" label="发言内容" header-align="center" align="center"></el-table-column>
          <el-table-column prop="replyComment.userName" label="被回复人" header-align="center" align="center"></el-table-column>
          <el-table-column prop="replyComment.content" label="被回复内容" header-align="center" align="center"></el-table-column>
          <el-table-column :label="$t('handle')" header-align="center" align="center" width="150">
            <template slot-scope="scope">
              <el-button v-if="scope.row.shieldFlag === '0'" type="button" size="small" @click="deleteComment(scope.row.commentId)">屏蔽</el-button>
              <el-button v-if="scope.row.shieldFlag === '1'" type="text" size="small">已屏蔽</el-button>
            </template>
          </el-table-column>
      </el-table>
      <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-dialog>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      innerVisible: 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>