dvcp_v2_webapp/packages/publicity/AppHotTopic/AppHotTopic.vue

<template>
  <div class="AppHotTopic">
    <ai-list v-if="showList">
      <template slot="title">
        <ai-title title="热点话题" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
      </template>
      <template slot="content">
        <ai-search-bar>
          <template slot="left">
            <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add">添加</el-button>
          </template>
          <template slot="right">
            <el-input
              v-model="page.title"
              size="small"
              placeholder="搜索标题"
              clearable
              v-throttle="() => {page.current = 1, getList()}"
              @clear="page.current = 1, page.title = '', getList()"
              suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :current.sync="page.current"
          :size.sync="page.size"
          :dict="dict"
          @getList="getList">
          <el-table-column slot="option" label="操作" fixed="right" width="300" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" title="发布" class="btn" v-if="row.status==0" @click="handlePublish(row)">发布
              </el-button>
              <el-button type="text" title="取消发布" class="btn" v-else @click="handlePublish(row)">取消发布</el-button>
              <el-button type="text" title="详情" @click="toDetail(row)">详情</el-button>
              <el-button type="text" title="编辑" @click="add(row)">编辑</el-button>
              <el-button type="text" title="删除" @click="handleDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <component v-else :is="currentPage" :detail="detail" :instance="instance" :dict="dict" :permissions="permissions"
                @goBack="goBack"/>
  </div>
</template>

<script>
  import addHot from "./components/addHot";
  import hotDetail from "./components/hotDetail";

  export default {
    name: "AppHotTopic",
    label: "热点话题",
    components: {addHot, hotDetail},
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },
    data() {
      return {
        showList: true,
        currentPage: "",
        detail: {},
        page: {
          title:"",
          current: 1,
          size: 10
        },
        total: 0,
        tableData: []
      }
    },
    computed: {
      colConfigs() {
        return [
          {prop: 'title', label: '话题标题'},
          {prop: 'subjectTotal', label: '话题数', align: 'center'},
          {prop: 'viewTotal', label: '浏览数', align: 'center'},
          {prop: 'publishUserName', label: '发布人'},
          {prop: 'publishTime', label: '发布时间'},
          {prop: 'status', label: '发布状态', align: 'center',dict:"newsCenterStatus"},
          {slot: 'option'},
        ]
      }
    },
    methods: {
      toDetail(row) {
        this.detail = row
        this.showList = false
        this.currentPage = "hotDetail"
      },
      add(row) {
        row && (this.detail = row)
        this.showList = false
        this.currentPage = "addHot"
      },
      handlePublish(row) {
        this.$confirm(`是否${!!+row.status ? '取消' : ''}发布？`).then(() => {
          this.instance.post(`/app/apphotsubject/setStatus`, null, {
            params: {
              id: row.id,
              status: !!+row.status ? 0 : 1
            }
          }).then(res => {
            if (res.code == 0) {
              this.$message.success(`${!!+row.status ? '取消' : ''}发布成功`)
              this.getList()
            }
          })
        })
      },
      handleDel({id}) {
        this.$confirm("是否删除？").then(() => {
          this.instance.post(`/app/apphotsubject/delete`, null, {
            params: {ids: id}
          }).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功")
              this.getList()
            }
          })
        })
      },
      goBack() {
        this.showList = true
        this.getList()
      },
      getList() {
        this.instance.post(`/app/apphotsubject/list`, null, {
          params: {
            ...this.search,
            ...this.page
          }
        }).then(res => {
          if (res && res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      }
    },
    mounted(){
      this.$dict.load("newsCenterStatus").then(()=>this.getList())
    }
  }
</script>

<style lang="scss" scoped>
  .AppHotTopic {
    height: 100%;

    .btn {
      width: 74px;
    }
  }
</style>