ohplay_system/src/views/ohplay/content/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline label-width="100px" size="mini">
      <el-form-item label="内容类型：">
        <el-select v-model="form.contentType" placeholder="请选择内容类型" clearable>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="内容分类：">
        <el-select v-model="form.type" placeholder="请选择内容分类" clearable>
          <el-option v-for="item in locationOptions" :key="item.value" :label="item.label"
            :value='item.value' />
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="form.typeStatus" placeholder="请选择当前状态" clearable>
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
            :value='item.value' />
        </el-select>
      </el-form-item>
      <el-form-item label="内容或回复：">
        <el-input v-model="form.content" placeholder="请输入内容或回复" clearable />
      </el-form-item>
      <el-form-item label="更新时间：">
        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="内容" prop="content" align="center" show-overflow-tooltip />
      <el-table-column label="图片" align="center" width="170px">
        <template slot-scope="scope">
          <div class="image-box" v-if="scope.row.images">
            <el-image class="image" v-for="item in scope.row.images.split(',').slice(0, 6)" :key="item"
              :src="item" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isDelete === '0'" type="text"
            @click="dialogVisible = true, title = '推荐', dialogForm.id = scope.row.id">
            推荐
          </el-button>
          <el-button type="text" @click="dialogVisible = true, title = '详情', getDetail(scope.row)">
            详情
          </el-button>
          <el-button type="delete" v-if="scope.row.isDelete === '0'" @click="getChange(scope.row, 1)">
            隐藏
          </el-button>
          <el-button type="text" v-else @click="getChange(scope.row, 0)">显示</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" :before-close="cancel" width="600px">
      <!-- 推荐 -->
      <div v-if="title === '推荐'">
        <el-form label-width="100px">
          <el-form-item label="推荐位置：">
            <el-select v-model="dialogForm.tagId" placeholder="请选择推荐位置">
              <el-option v-for="item in locationOptions" :key="item.value" :label="item.label"
                :value='item.value' />
            </el-select>
          </el-form-item>
          <el-form-item label="推荐权重：">
            <el-input-number v-model="dialogForm.weight" :min="0" :max="10" />
          </el-form-item>
          <el-form-item label="权重唯一：">
            <el-select v-model="dialogForm.isOnlyWeight" placeholder="权重是否唯一">
              <el-option v-for="item in dict.type.hot_yes_no" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="推荐日期：">
            <el-date-picker v-model="dialogDate" type="datetimerange" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 详情 -->
      <div v-else class="item_box">
        <!-- 话题 -->
        <el-row>
          <el-col :span="3">
            <el-avatar :src="dialogList.userAvatar" />
          </el-col>
          <el-col :span="16">
            <div>{{ dialogList.userName }}</div>
            <div>{{ dialogList.creatTime }}</div>
          </el-col>
          <el-col :span="5">
            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">
              隐藏
            </el-button>
            <el-button v-else type="text" @click="getChange(dialogList, 0)">显示</el-button>
          </el-col>
        </el-row>
        <div class="item_content">
          <!-- 内容 -->
          <div style="padding: 20px 0;">{{ dialogList.content }}</div>
          <!-- 图片 -->
          <div class="image-box" v-if="dialogList.images">
            <el-image class="image" v-for="item in dialogList.images.split(',')" :key="item" :src="item" />
          </div>
          <div style="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
        </div>
        <!-- 评论 -->
        <div class="dialog_list" v-for="item in dialogList.commentList" :key="item.id">
          <el-row>
            <el-col :span="3">
              <el-avatar :src="item.toUserAvatar" />
            </el-col>
            <el-col :span="16">
              <div>{{ item.toUserName }}</div>
              <div>{{ item.createTime }}</div>
            </el-col>
            <el-col :span="5">
              <el-button v-if="item.isDelete === 0" type="delete" @click="getCommentChange(item, 1)">隐藏
              </el-button>
              <el-button v-else type="text" @click="getCommentChange(item, 0)">显示</el-button>
            </el-col>
          </el-row>
          <div class="item_content">
            <div>{{ item.content }}</div>
            <div style="margin-top: 10px">点赞：</div>
          </div>
          <!-- 评论的评论 -->
          <div class="item_children">
            <div class="item_i" v-for="i in item.children" :key="i.id">
              <el-row>
                <el-col :span="3">
                  <el-avatar :src="i.toUserAvatar" />
                </el-col>
                <el-col :span="16">
                  <div>{{ i.toUserName }}</div>
                  <div>{{ i.createTime }}</div>
                </el-col>
                <el-col :span="5">
                  <el-button v-if="i.isDelete === 0" type="delete" @click="getCommentChange(i, 1)">隐藏
                  </el-button>
                  <el-button v-else type="text" @click="getCommentChange(i, 0)">显示</el-button>
                </el-col>
              </el-row>
              <div class="item_content">
                <div>{{ i.content }}</div>
                <div style="margin-top: 10px">点赞：</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="title === '推荐'" slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, showOrHide, recommend, commentShowOrHide } from '@/api/ohplay/content'
export default {
  dicts: ['hot_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      // 搜索时间
      date: [],
      // 列表
      tableData: [],
      total: 0,
      // 弹窗
      dialogVisible: false,
      title: '',
      // 弹窗列表
      dialogList: {},
      // 推荐表单
      dialogForm: {},
      dialogDate: [],
      // 推荐位置
      locationOptions: [
        { value: 5, label: '推荐' },
        { value: 1, label: '生活' },
        { value: 2, label: '音频' },
        { value: 3, label: '硬件' },
        { value: 4, label: '同城' },
      ],
      // 内容类型
      typeOptions: [
        { value: 0, label: '帖子' },
        { value: 1, label: '图片' }
      ],
      // 当前状态
      statusOptions: [
        { value: 0, label: '显示' },
        { value: 1, label: '隐藏' }
      ]
    }
  },
  watch: {
    date(val) {
      this.form.startDate = val[0]
      this.form.endDate = val[1]
    },
    dialogDate(val) {
      this.dialogForm.startRecommendTime = val[0]
      this.dialogForm.endRecommendTime = val[1]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },
    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.date = []
      this.getList()
    },
    // 详情
    getDetail(row) {
      detail(row.id).then(res => {
        if (res.code === 0) {
          this.dialogList = res.data
        }
      })
    },
    // 隐藏或显示
    getChange(row, type) {
      showOrHide(row.id, type).then(res => {
        let tip = type === 0 ? '显示' : '隐藏'
        if (res.code === 0) {
          this.$message.success(`${tip}成功！`)
          this.getList()
          if (this.dialogVisible === true) {
            this.getDetail(row)
          }
        }
      })
    },

    getCommentChange(row, type) {
      commentShowOrHide(row.id, type).then(res => {
        let tip = type === 0 ? '显示' : '隐藏'
        if (res.code === 0) {
          this.$message.success(`${tip}成功！`)
          this.getDetail(this.dialogList)
        }
      })
    },

    // 确定
    getSubmit() {
      recommend(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.$message.success('推荐成功！')
          this.dialogVisible = false
          this.getList()
        }
      })
    },

    // 取消
    cancel() {
      this.dialogForm = {}
      this.dialogDate = []
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.item_box {
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;
  padding: 20px;
}

.dialog_list {
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;
  padding: 10px;
  width: calc(100% - 20px);
  margin-top: 20px;

  .el-row {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item_content {
    margin-top: 10px;
  }
}

.dialog_item:last-child {
  border: none;
}

.item_children {
  width: calc(100% - 40px);
  margin-top: 20px;
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;

  .item_i {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }

  .item_i:last-child {
    border: none;
  }
}

.image-box {
  display: flex;
  flex-wrap: wrap;
  width: 150px;

  .image {
    width: 50px;
    height: 50px;
  }
}
</style>