MyMessage.vue

<template>
  <div>
    <el-container>
      <el-main>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input size="small" clearable v-model="formInline.userName" placeholder="请输入用户名"
                      @keydown.enter.native="messagePage"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="small" clearable v-model="formInline.nickName" placeholder="请输入用户昵称"
                      @keydown.enter.native="messagePage"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="small" v-model="formInline.hasRepliedInfo" placeholder="请选择收藏状态" @change="messagePage">
              <el-option v-for="item in hasRepliedInfo" :key="item.type" :label="item.name"
                         :value="item.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="messagePage">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" @click="prepareRefreshMessage">刷新私信列表</el-button>
            <el-dialog title="提示" :visible.sync="refreshMessageDialogVisible" width="30%" :before-close="handleClose">
              <span>确认刷新私信列表吗?</span>
              <span slot="footer" class="dialog-footer">
								<el-button @click="refreshMessageDialogVisible = false">取 消</el-button>
								<el-button type="primary" @click.prevent="acquireMessage()">确 定</el-button>
							</span>
            </el-dialog>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" @click="messageDeal">私信点赞收藏</el-button>
          </el-form-item>
        </el-form>
        <el-table  border ref="multipleTable" v-loading="loading" :data="csdnMessageList" tooltip-effect="dark"
                  style="width: 100%">
          <el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
          <el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
            <template slot-scope="scope">
              <a :href="scope.row.messageUrl" target="_blank">{{ scope.row.nickName }}</a>
            </template>
          </el-table-column>

          <el-table-column prop="hasRepliedName" label="是否回复" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :type="getTagType(scope.row.hasRepliedName)">{{ scope.row.hasRepliedName }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="content" label="回复内容" show-overflow-tooltip></el-table-column>

          <el-table-column label="更新时间">
            <template slot-scope="props">
              {{ props.row.updateTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="操作" label="操作" width="380px">
            <template slot-scope="props">
              <el-button type="primary" @click="dealMessageOne(props.row.userName)" size="small">私信</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[8, 50, 100, 200, 400]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </el-main>
      <el-backtop class="backtop"></el-backtop>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import ApiService from '../../api/ApiService'
export default {
  name: 'MyMessage',

  data() {
    return {
      formInline: {
        userName: '',
        nickName: '',
        hasRepliedInfo: null,
      },
      hasRepliedInfo: [
        {
          type: -1,
          name: '全部',
        },
        {
          type: 0,
          name: '未回复',
        },
        {type: 1, name: '已回复'},
      ],
      refreshMessageDialogVisible: false,
      // 用户列表数据
      csdnMessageList: [],
      loading: false,
      elementui_page_component_key: 0,
      currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
      pageSize: 8,
      total: 0,
      currentRowId: null,
      currentUserName: null,
    }
  },
  watch: {
    'formInline.userName'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.currentPage = 1
        localStorage.setItem('csdnUserPage', this.currentPage)
        this.messagePage()
      }
    },
    'formInline.nickName'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.currentPage = 1
        localStorage.setItem('csdnUserPage', this.currentPage)
        this.messagePage()
      }
    },
    // 监听currentPage的变化，将新值保存到localStorage中
    currentPage(newPage) {
      localStorage.setItem('csdnUserPage', newPage.toString())
    },
  },
  created() {
    //获取问题类型的枚举
    this.messagePage()
  },
  mounted() {
    this.currentPage = 1
  },
  methods: {
    prepareRefreshMessage() {
      this.refreshMessageDialogVisible = true
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {
          })
    },
    handleConfirm(addType) {
      this.dialogFormVisible = false // 关闭对话框
      this.dialogMutiFormVisible = false
      this.addUser(addType) // 发送请求
    },
    async messagePage() {
      this.loading = true
      const {data: res} = await ApiService.messagePage(this.currentPage, this.pageSize, this.formInline)
      if (res.code === 200) {
        this.total = res.result.totalElements
        const userWeightMap = {}
        this.hasRepliedInfo.forEach((option) => {
          userWeightMap[option.type] = option.name
        })
        res.result.content.forEach((item) => {
          item.hasRepliedName = userWeightMap[item.hasReplied]
        })
        this.csdnMessageList = res.result.content
      }
      this.loading = false
    },

    async dealMessageOne(userName) {
      this.loading = true
      const {data: res} = await ApiService.dealMessageOne(userName)
      if (res.code === 200) {
        this.currentUserName = null
        await this.messagePage()
      } else {
        console.error('Received non-200 status code', res)
      }
      this.loading = false
    },

    async messageDeal() {
      this.loading = true
      const {data: res1} = await ApiService.dealMessage()
      if (res1.code === 200) {
        await this.messagePage()
      } else {
        console.error('Received non-200 status code', res1)
      }
      const {data: res2} = await ApiService.dealLikeCollect()
      if (res2.code === 200) {
        await this.messagePage()
      } else {
        console.error('Received non-200 status code', res2)
      }
      this.loading = false
    },
    async acquireMessage() {
      this.loading = true
      this.refreshMessageDialogVisible = false
      const {data: res} = await ApiService.acquireMessage()
      if (res.code === 200) {
        await this.messagePage()
      } else {
        console.error('Received non-200 status code', res)
      }
      this.loading = false
    },
    refreshPage() {
      //获取问题类型的枚举
      this.messagePage()
      location.reload()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.messagePage()
    },
    handleSizeChange(currentSize) {
      this.pageSize = currentSize
      this.messagePage()
    },
    getTagType(hasRepliedName) {
      if (hasRepliedName == '未回复') {
        return 'warning'
      } else {
        return 'success'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.pagination {
  margin-top: 16px;
  text-align: right;
}

.header-button-item {
  margin-right: 15px;
  font-size: 20px;
}

.red-title {
  line-height: 24px;
  font-size: 18px;
  color: red;
}

.backtop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #007aff;
  color: #fff;
  cursor: pointer;
  z-index: 999;
}

.custom-textarea {
  width: 100%;
  text-align: left;
}

.backtop:hover {
  background-color: #0050a0;
}
</style>