green-valley-admin/src/components/Community/CommentDate.vue

<template>
  <div class="main flex-1">
    <a-spin :spinning="spinning">
      <div style="width:100%" v-if="lists && lists.length > 0">
        <a-table
          :columns="columns"
          :data-source="lists"
          :loading="loading"
          :pagination="pagination"
          :row-key="record => record.id"
          :scroll="{ y: height }"
          @change="handleTableChange"
          bordered
          class="white"
        >
          <template slot="id" slot-scope="text, record, index">
            <span>{{ index + 1 }}</span>
          </template>

          <!-- 用户头像 -->
          <template slot="avatarUrl" slot-scope="text, record">
            <a-avatar :size="50" :src="record.avatarUrl" v-if="record.avatarUrl" />
          </template>

          <!-- 审核状态 -->
          <template slot="comStatus" slot-scope="text, record">
            <a-tag
              :color="record.comStatus === 0 ? 'green' : 'red'"
            >{{ record.comStatus === 0 ? '正常' : '禁用' }}</a-tag>
          </template>

          <template slot="examine" slot-scope="text, record">
            <a-button
              @click="handleUpTopping({id:record.id,comStatus:0})"
              size="small"
              type="primary"
              v-if="record.comStatus != 0"
            >正常</a-button>
            <a-button
              @click="handleUpTopping({id:record.id,comStatus:1})"
              size="small"
              type="danger"
              v-else
            >禁用</a-button>
          </template>

          <div
            class="d-flex flex-column"
            slot="expandedRowRender"
            slot-scope="record"
            style="margin: 0"
          >
            <div>
              <span class="font-bold-14">帖子内容：</span>
              <span v-dompurify-html="record.content" v-if="record.content"></span>
              <span v-else>暂无内容</span>
            </div>
          </div>
        </a-table>
      </div>
      <a-empty v-else />
    </a-spin>
  </div>
</template>

<script>
import { upComment } from 'config/api';

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    width: '7%',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '跟帖人',
    align: 'center',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '用户头像',
    align: 'center',
    dataIndex: 'avatarUrl',
    key: 'avatarUrl',
    scopedSlots: { customRender: 'avatarUrl' },
  },
  {
    title: '跟帖时间',
    align: 'center',
    dataIndex: 'creatTime',
    key: 'creatTime',
  },
  {
    title: '跟帖状态',
    align: 'center',
    dataIndex: 'comStatus',
    key: 'comStatus',
    scopedSlots: { customRender: 'comStatus' },
  },
  {
    title: '审核',
    align: 'center',
    dataIndex: 'examine',
    key: 'examine',
    scopedSlots: { customRender: 'examine' },
  },
];

export default {
  name: 'CommunityDate',
  props: { lists: { type: Array, default: () => [] }, pagination: { type: Object, default: () => {} } },
  data() {
    return {
      columns,
      loading: false,
      height: '',
      spinning: false,
    };
  },

  mounted() {
    let th = 250;
    let wh = window.innerHeight;
    this.height = wh - th;
    window.onresize = () => {
      return (() => {
        wh = window.innerHeight;
        this.height = wh - th;
      })();
    };
  },

  methods: {
    // 换页
    handleTableChange(pagination) {
      const { current, pageSize } = pagination;
      const condition = { current, pageSize };
      this.$emit('getSelectTeam', condition);
    },

    // 置顶/审核
    async handleUpTopping(options) {
      try {
        this.spinning = true;
        const params = { param: { id: options.id } };
        if (options) {
          if (options.comStatus !== null) {
            params.param.comStatus = +options.comStatus;
          }
        }
        const res = await upComment(params);
        const { data, msg, code } = res.data;
        this.spinning = false;
        if (code === 200) {
          this.$message.success('修改成功');
          this.$emit('getSelectTeam');
        } else {
          throw msg;
        }
      } catch (error) {
        this.spinning = false;
        this.$message.error(error || '修改失败');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.main .img {
  height: 65px;
}

.main .big_img {
  width: 200px;
}
</style>