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

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline label-width="100px" size="mini">
      <el-form-item label="内容：">
        <el-input v-model="form.content" placeholder="请输入内容" clearable />
      </el-form-item>
      <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 classifyOptions" :key="item.id" :label="item.name" :value='item.id' />
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="form.recommendStatus" 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-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          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="100px">
        <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="内容位置" prop="recommendLocation" align="center" :formatter="locationFormatter" />
      <el-table-column label="权重" prop="recommendWeight" align="center" />
      <el-table-column label="当前状态" prop="recommendStatus" align="center" :formatter="statusFormatter" />
      <el-table-column label="有效期" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ scope.row.startRecommendTime }} 至 {{ scope.row.endRecommendTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="dialogVisible = true, getDetail(scope.row.id)">详情</el-button>
          <el-button type="delete" @click="getRemove(scope.row.id)" v-hasPermi="['ohplay:recommend:delete']">
            结束推荐</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="详情" width="600px">
      <div 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)"
              v-hasPermi="['ohplay:recommend:hide']">
              隐藏
            </el-button>
            <el-button v-else type="text" @click="getChange(dialogList, 0)"
              v-hasPermi="['ohplay:recommend:show']">显示</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)"
                v-hasPermi="['ohplay:recommend:hide']">隐藏
              </el-button>
              <el-button v-else type="text" @click="getCommentChange(item, 0)"
                v-hasPermi="['ohplay:recommend:show']">显示</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)"
                    v-hasPermi="['ohplay:recommend:hide']">隐藏
                  </el-button>
                  <el-button v-else type="text" @click="getCommentChange(i, 0)"
                    v-hasPermi="['ohplay:recommend:show']">显示</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>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove } from '@/api/ohplay/recommend'
import { detail, showOrHide, commentShowOrHide } from '@/api/ohplay/content'
import { classifyMixin, typeMixin } from '../mixin/index'
export default {
  mixins: [classifyMixin, typeMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      date: [],
      // 数据总数
      total: 0,
      // 列表
      tableData: [],
      // 弹窗
      dialogVisible: false,
      dialogList: {},

      // 当前状态
      statusOptions: [{
        value: 0,
        label: '未开始'
      }, {
        value: 1,
        label: '有效'
      }, {
        value: 2,
        label: '失效'
      }]
    }
  },
  watch: {
    date(val) {
      this.form.startDate = val[0]
      this.form.endtDate = 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
        }
      })
    },

    // 详情
    getDetail(id) {
      detail(id).then(res => {
        if (res.code === 0) {
          this.dialogList = res.data
        }
      })
    },

    // 结束推荐
    getRemove(id) {
      remove(id).then(res => {
        if (res.code === 0) {
          this.$message.success('成功结束推荐！')
          this.getList()
        }
      })
    },

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

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

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },

    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.date = []
      this.getList()
    },

    // 字典翻译
    locationFormatter(row) {
      return this.classifyOptions.find(i => i.id === row.recommendLocation).name
    },
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.recommendStatus)
    }
  }
}
</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>