vue & table with operation slot

vue & table with operation slot

seed demo

<!-- @format -->

<template>
  <seed ref="list" :fetch-list="fetchList" :seed="seed">
    <template slot="column-joinNum" slot-scope="{ row }">
      <el-button
        @click="showHistory('join', row)"
        :disabled="row.joinNum === 0"
        type="text"
        >{{ row.joinNum }}</el-button
      >
    </template>
    <template slot="column-violationNum" slot-scope="{ row }">
      <el-button
        @click="showHistory('violation', row)"
        :disabled="row.violationNum === 0"
        type="text"
        >{{ row.violationNum }}</el-button
      >
    </template>
    <template slot="column-control" slot-scope="{ row }">
      <el-button size="mini" @click="reject(row.id)" type="danger"
        >驳 回</el-button
      >
    </template>
  </seed>
</template>

<script>
/**
 * 正常用户
 */
import axios from 'axios'
import JoinHistory from './JoinHistory'
import ViolationHistory from './ViolationHistory'
import { SelectBox } from '@/mixins/audit'
const REJECT_REASONS = [
  '发布营销内容',
  '发布与事实不符内容',
  '发布辱骂内容',
  '发布不符合社区制度内容',
  '发布违法内容'
]
export default {
  components: {
    JoinHistory,
    ViolationHistory
  },
  data() {
    return {
      seed: [
        {
          key: 'userId',
          label: '用户ID',
          readonly: true
        },
        {
          key: 'userName',
          label: '用户名称',
          readonly: true
        },
        {
          key: 'mobileNo',
          label: '用户手机号',
          readonly: true
        },
        {
          key: 'feedNum',
          label: '内容数',
          readonly: true
        },
        {
          key: 'qualityFeedNum',
          label: '优质内容数',
        },
        {
          label: '最新加入时间',
          key: 'addTime',
          type: 'time',
        },
        {
          key: 'joinNum',
          label: '加入次数',
        },
        {
          key: 'violationNum',
          label: '违规次数',
        }
      ]
    }
  },
  methods: {
    fetchList(params) {
      return axios('/opapi/tweetClub', {
        params: {
          ...params,
          status: 1
        }
      })
    },
    showHistory(type = 'join', row = {}) {
      const h = this.$createElement
      let { userId, userName } = row
      this.$msgbox({
        title: userName + '的' + (type === 'join' ? '加入' : '违规') + '记录',
        message: h(type + '-history', {
          key: userId,
          props: {
            userId
          }
        })
      })
    },
    reject(id) {
      if (!id) {
        this.$message.error('没有ID')
        return
      }
      SelectBox(
        REJECT_REASONS,
        '是否驳回该用户身份，驳回后该用户将不享受福利！'
      )
        .then(supplement => {
          return axios.put(`/opapi/tweetClub/${id}/reject`, '', {
            params: {
              supplement
            }
          })
        })
        .then(() => {
          this.$message({
            message: '驳回成功',
            type: 'success',
          })
          this.$nextTick(() => {
            this.$refs.list.refresh()
          })
        })
        .catch(e => {
          let message = e.message || e
          if (e.response) {
            message = e.response.data
          }
          this.$message.error(message)
        })
    }
  }
}
</script>

refs

seed

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---