api-client/src/views/rating/topicRecommend/index.vue

<template>
  <div class="topic-recommend-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加推荐</el-button>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
      <el-table-column align="left" label="推荐话题" min-width="220" width="220">
        <template #default="{ row }">
          <div class="topic-cell" @click="handleClick(row.topic)">
            <div class="topic-title">{{ row.topic ? row.topic.title : '-' }}</div>
            <div class="topic-meta">
              <span class="meta-label">Topic ID:</span>
              <span>{{ row.topicId }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="话题状态" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.topic && row.topic.status === 1" type="warning">审核中</el-tag>
          <el-tag v-else-if="row.topic && row.topic.status === 2" type="success">已通过</el-tag>
          <el-tag v-else-if="row.topic && row.topic.status === 3" type="danger">已拒绝</el-tag>
          <el-tag v-else-if="row.topic && row.topic.status === 4" type="info">禁用</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="排序" prop="sort" width="120">
        <template #default="{ row }">
          <el-input v-model="row.sort" placeholder="排序" size="mini" @blur="handleMove(row)" @keyup.enter.native="handleMove(row)" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="启用" width="100">
        <template #default="{ row }">
          <el-switch v-model="row.enable" :active-value="true" :inactive-value="false" @change="handleToggleStatus(row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <topic-recommend-add ref="add" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { getList, toggleEnable, moveTo } from '@/api/rating/topicRecommend'
  import TopicRecommendAdd from './components/TopicRecommendAdd'

  export default {
    name: 'RatingTopicRecommendIndex',
    components: { TopicRecommendAdd },
    data() {
      return {
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleAdd() {
        this.$refs['add'].showEdit()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleClick(topic) {
        this.$router.push({
          path: '/rating/topic',
          query: {
            topicId: topic.id,
          },
        })
      },
      async fetchData() {
        this.listLoading = true
        try {
          const { data } = await getList(this.queryForm)
          this.list = data.list || []
          this.total = data.totalCount || 0
        } catch (error) {
          console.error(error)
        } finally {
          this.listLoading = false
        }
      },
      async handleToggleStatus(row) {
        try {
          const { msg } = await toggleEnable(row.id, row.enable)
          this.$baseMessage(msg || '状态切换成功', 'success')
          this.fetchData()
        } catch (error) {
          console.error(error)
          row.enable = !row.enable
        }
      },
      async handleMove(row) {
        const sortVal = Number(row.sort)
        if (isNaN(sortVal)) {
          this.$message.error('排序必须是数字')
          this.fetchData()
          return
        }

        try {
          const { msg } = await moveTo(row.id, sortVal)
          this.$baseMessage(msg || '移动成功', 'success')
          this.fetchData()
        } catch (error) {
          console.error(error)
          this.fetchData()
        }
      },
    },
  }
</script>

<style scoped>
  .topic-recommend-container {
    padding: 20px;
  }

  .topic-cell {
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }

  .topic-title {
    color: #303133;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .topic-meta {
    color: #909399;
    font-size: 12px;
    word-break: break-all;
  }

  .meta-label {
    margin-right: 4px;
  }
</style>