BookingService/frontend/src/views/account/Account.vue

<template>
  <page-layout title="用户">
    <a-card>
      <a-row>
        <a-input-group class="tool">
          <a-row :gutter="6">
            <a-col
              class="item"
              v-bind="layout2">
              <a-select
                v-model="params.role"
                style="width: 100%;"
                @change="getData()">
                <a-select-option value="">角色筛选</a-select-option>
                <a-select-option :value="item.id" v-for="item in roleList">{{item.name}}</a-select-option>
              </a-select>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-select
                v-model="params.ordering"
                style="width: 100%;"
                @change="getData()">
                <a-select-option value="">排序</a-select-option>
                <a-select-option value="id">ID正排序</a-select-option>
                <a-select-option value="-id">ID倒排序</a-select-option>
                <a-select-option value="username">用户名正排序</a-select-option>
                <a-select-option value="-username">用户名倒排序</a-select-option>
                <a-select-option value="date_joined">加入时间正排序</a-select-option>
                <a-select-option value="-date_joined">加入时间倒排序</a-select-option>
                <a-select-option value="last_login">上次登录正排序</a-select-option>
                <a-select-option value="-last_login">上次登录倒排序</a-select-option>
              </a-select>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-input
                v-model="params.search"
                style="width: 100%;"
                placeholder="ID，用户名，邮箱"
                @keypress.enter="getData">
              </a-input>
            </a-col>
            <a-col
              class="item"
              :xs="{ span: 12 }"
              :sm="{ span: 8 }"
              :xl="{ span: 4 }">
              <a-button
                style="width: 100%;"
                icon="search"
                @click="getData">
                搜索
              </a-button>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-button
                style="width: 100%;"
                icon="delete"
                @click="handleClearParams">
                重置
              </a-button>
            </a-col>
            <a-col
              class="item"
              v-bind="layout2">
              <a-button
                type="primary"
                icon="plus"
                style="width: 100%;"
                @click="$router.push({name: 'accountCreate'})">
                新建
              </a-button>
            </a-col>
          </a-row>
        </a-input-group>
      </a-row>
      <a-row>
        <a-col class="item">
          <a-table
            rowKey="id"
            :loading="state.loading"
            :columns="columns"
            :dataSource="userList"
            :pagination="false">
            <template slot="role" slot-scope="text, record, index">
              {{roleList.find(item=> item.id === text).name}}
            </template>
            <template slot="is_active" slot-scope="text, record, index">
              {{text ? '有效': '无效'}}
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <a-button @click="$router.push({name: 'accountEdit', params: {id: record.id.toString()}})">编辑</a-button>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="item">
          <span style="vertical-align: -5px">共 {{count}} 条</span>
          <a-pagination
            v-model="params.page"
            @change="handelePage"
            style="float: right"
            :total="count">
          </a-pagination>
        </a-col>
      </a-row>
    </a-card>
  </page-layout>
</template>

<script>
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      width: '8%'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width: '14%'
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: '12%'
    },
    {
      title: '角色',
      dataIndex: 'role',
      width: '12%',
      scopedSlots: { customRender: 'role' }
    },
    {
      title: '积分',
      dataIndex: 'point',
      width: '12%'
    },
    {
      title: '上次登陆时间',
      dataIndex: 'last_login',
      width: '14%'
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      width: '10%',
      scopedSlots: { customRender: 'is_active' }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]
  import PageLayout from '../../components/page/PageLayout'
  import api from '../../api/account'

  export default {
    name: 'Account',
    components: {
      PageLayout
    },
    data () {
      return {
        columns,
        layout1: {
          xs: { span: 24 },
          sm: { span: 8 },
          xl: { span: 8 },
        },
        layout2: {
          xs: { span: 12 },
          sm: { span: 8 },
          xl: { span: 4 },
        },
        params: {
          search: '',
          page: 1,
          ordering: '-last_login',
          role: '',
        },
        state: {
          loading: false,
        },
        roleList: [],
        count: 0,
        userList: [],
        setting: {}
      }
    },
    mounted () {
      api.getRoleList()
        .then(data => {
          this.roleList = data
          this.getData()
        })
    },
    methods: {
      getData () {
        this.state.loading = true
        api.getUserList(this.params)
          .then(data => {
            this.userList = data.results
            this.count = data.count
            this.state.loading = false
          })
          .catch(() => {
            this.state.loading = false
          })
      },
      handleClearParams () {
        this.params = {
          search: '',
          page: 1,
          ordering: '-last_login',
          role: '',
        }
        this.state = {
          loading: false
        }
        this.getData()
      },
      handelePage (page) {
        this.params.page = page
        this.getData()
      },
    }
  }
</script>

<style scoped lang="less">
  .item {
    margin: 8px 0;
  }
</style>