GCLS_Page_BMS/src/views/quota/index.vue

<template>
  <div class="quota">
    <div class="quota-list">
      <el-table :data="data_list">
        <el-table-column label="机构" width="176">
          <template slot-scope="{ row }">
            <router-link :to="`/quota/usageRecord/${row.org_id}/${row.org_name}`">
              {{ row.org_name }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="quota_lave" label="1v1余量" width="160">
          <template slot-scope="{ row }"> {{ row.quota_lave_1v1_online }}小时 </template>
        </el-table-column>
        <el-table-column prop="quota_lave" label="1v1余额" width="160">
          <template slot-scope="{ row }"> {{ row.money_lave_1v1_online }}元 </template>
        </el-table-column>
        <el-table-column prop="quota_lave" label="1v多余量" width="160">
          <template slot-scope="{ row }"> {{ row.quota_lave_1vm_online }}小时 </template>
        </el-table-column>
        <el-table-column prop="quota_lave" label="1v多余额" width="160">
          <template slot-scope="{ row }"> {{ row.money_lave_1vm_online }}元 </template>
        </el-table-column>
        <el-table-column prop="quota_status" label="状态" width="160">
          <template slot-scope="{ row }">
            <span :style="{ color: row.quota_status ? '#019319' : '#CA0000' }">
              {{ row.quota_status ? '使用中' : '已停用' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="{ row }">
            <span class="set-quota operation" @click="setQuota(row.org_id)">设置配额</span>
            <span class="operation" @click="setStatus(row.org_id, !row.quota_status)">
              {{ row.quota_status ? '停用' : '启用' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page_capacity"
      layout="prev, pager, next, total, sizes, jumper"
      :total="total_count"
      :current-page="cur_page"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
      @size-change="changePageSize"
    />

    <set-quota :org-id="curOrgId" :visible="visible" @close="closeSetQuota" />
  </div>
</template>

<script>
import { PageQueryOrgQuotaList } from '@/api/list';
import { EnableOrgQuota } from '@/api/org';
import SetQuota from './SetQuota.vue';

export default {
  name: 'QuotaList',
  components: { SetQuota },
  data() {
    return {
      data_list: [],
      page_capacity: 10,
      total_count: 0,
      cur_page: 1,
      visible: false,
      curOrgId: ''
    };
  },
  created() {
    this.pageQueryOrgQuotaList();
  },
  methods: {
    pageQueryOrgQuotaList() {
      PageQueryOrgQuotaList({
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      }).then(({ data_list, total_count, cur_page }) => {
        this.data_list = data_list;
        this.total_count = total_count;
        this.cur_page = cur_page;
      });
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.pageQueryOrgQuotaList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.pageQueryOrgQuotaList();
    },

    setQuota(org_id) {
      this.visible = true;
      this.curOrgId = org_id;
    },

    setStatus(org_id, is_enabled) {
      EnableOrgQuota({
        org_id,
        is_enabled
      }).then(() => {
        this.$message.success(`${is_enabled ? '启用' : '停用'}机构配额成功`);
        this.pageQueryOrgQuotaList();
      });
    },

    closeSetQuota() {
      this.visible = false;
      this.curOrgId = '';
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

.quota {
  @include container;
  @include pagination;
  @include dialog;

  padding: 24px 0 46px;

  &-list {
    @include list;

    padding: 0 32px;

    .el-table {
      .set-quota {
        margin-right: 12px;
      }

      ::v-deep th.el-table__cell {
        color: #000;
      }
    }
  }
}
</style>