caimei-authentic-manager/src/views/components/ClubListSelector/index.vue

<template>
  <div class="supplier-list-selector">
    <div class="filter-container">
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input v-model="listQuery.authParty" size="mini" placeholder="机构名称" @keyup.enter.native="filterList" />
      </div>
      <div class="filter-control">
        <span>审核状态:</span>
        <el-select v-model="listQuery.auditStatus" size="mini" placeholder="审核状态" clearable @change="filterList">
          <el-option label="全部" value="" />
          <el-option label="待审核" :value="2" />
          <el-option label="审核通过" :value="1" />
          <el-option label="审核未通过" :value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>上线状态:</span>
        <el-select v-model="listQuery.status" size="mini" placeholder="上线状态" clearable @change="filterList">
          <el-option label="全部" value="" />
          <el-option label="已上线" :value="1" />
          <el-option label="待上线" :value="2" />
          <el-option label="未上线" :value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <el-button type="primary" size="mini" @click="filterList">查询</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      border
      fit
      highlight-current-row
      header-row-class-name="tableHeader"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" width="80" type="selection" />
      <el-table-column label="序号" :index="indexMethod" align="center" width="80" type="index" />
      <el-table-column label="机构名称" align="center" prop="authParty" />
      <el-table-column label="审核状态" width="120px" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.auditStatus === 2" class="status warning">待审核</span>
          <span v-if="row.auditStatus === 1" class="status success">审核通过</span>
          <span v-if="row.auditStatus === 0" class="status danger">审核未通过</span>
        </template>
      </el-table-column>
      <el-table-column label="上线状态" width="160px" align="center">
        <template slot-scope="{ row }">
          <template v-if="row.auditStatus === 1">
            <span v-if="row.status === 0" class="status danger">已下线</span>
            <span v-else class="status success">已上线</span>
          </template>
          <span v-else class="status warning">待上线</span>
        </template>
      </el-table-column>
      <el-table-column label="访问次数" align="center" prop="" width="80px" />
    </el-table>
    <!-- 页码 -->
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <div class="control-footer">
      <el-button type="primary" @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>
<script>
import { fecthAuthList } from '@/api/auth'
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils'
export default {
  name: 'ClubListSelector',
  data() {
    return {
      listQuery: {
        authUserId: '',
        authParty: '',
        auditStatus: '',
        status: '',
        listType: 5,
        pageNum: 1, // 页码
        pageSize: 10 // 分页
      },
      list: [],
      total: 0,
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.getList()
  },
  methods: {
    // 取消
    onCancel() {
      this.multipleSelection = []
      this.$emit('cancel', [])
    },

    // 确认
    onConfirm() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('导出列表不能为空')
        return
      }
      this.$emit('confirm', deepClone(this.multipleSelection))
    },

    // 获取机构列表
    getList() {
      this.list = []
      this.fecthAuthClubList()
    },

    // 筛选机构列表
    filterList() {
      this.listQuery.pageNum = 1
      this.getList()
    },

    // 接口请求获取机构列表
    async fecthAuthClubList() {
      try {
        this.listQuery.authUserId = this.authUserId
        const res = await fecthAuthList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      }
    },

    // 设置选中的行
    setSelection() {
      this.list.forEach((row) => {})
    },

    // 表格列选择
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    },

    // 表格索引
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .pagination-container {
    padding: 0 !important;
  }
}
.control-footer {
  text-align: right;
  margin-top: 15px;
}
</style>