GCLS_Page_BMS/src/views/org_manager/index.vue

<template>
  <div class="org-manager">
    <el-input v-model="search" type="text" prefix-icon="el-icon-search" @keyup.enter.native="queryOrgList">
      <el-button slot="append" icon="el-icon-search" @click="queryOrgList"></el-button>
    </el-input>
    <div class="org-manager-list">
      <div class="org-manager-list-title">
        <div>机构管理</div>
        <div>
          <el-button icon="el-icon-plus" @click="$router.push('/add_org')">创建机构</el-button>
        </div>
      </div>
      <el-table :data="org_list">
        <el-table-column prop="name" label="名称" width="240" />
        <el-table-column prop="teacher_count" label="注册教师人数" width="110" />
        <el-table-column prop="teacher_count_audited" label="审核通过的注册教师人数" width="180" />
        <el-table-column prop="admin_user_name" label="机构管理员" />
        <el-table-column fixed="right" width="70">
          <template slot-scope="{ row }">
            <a @click="showOrg(row.id)">查看</a>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120">
          <template slot-scope="{ row }">
            <el-dropdown placement="top">
              <a class="el-dropdown-link">管理</a>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="updateOrg(row.id)">修改</el-dropdown-item>
                <el-dropdown-item @click.native="resetOrgAdminPassword(row.admin_user_id)">
                  重置机构管理员密码
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </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"
    />

    <reset-password ref="reset" :user-id="curUserId" />
    <show-org ref="showOrg" :org-id="curOrgId" />
    <update-org ref="updateOrg" :org-id="curOrgId" />
  </div>
</template>

<script>
import ResetPassword from '@/components/ResetPassword';
import ShowOrg from './ShowOrg';
import UpdateOrg from './UpdateOrg';
import { pageQueryOrgList } from '@/api/list';

export default {
  name: 'OrgManager',
  components: {
    ResetPassword,
    ShowOrg,
    UpdateOrg
  },
  data() {
    return {
      search: '',
      page_capacity: 10,
      cur_page: 1,
      org_list: [],
      total_count: 0,
      curUserId: '',
      curOrgId: ''
    };
  },
  created() {
    this.queryOrgList();
  },
  methods: {
    changePage(newPage) {
      this.cur_page = newPage;
      this.queryOrgList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.queryOrgList();
    },
    queryOrgList() {
      pageQueryOrgList({
        name: this.search,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      }).then(({ cur_page, org_list, total_count }) => {
        this.cur_page = cur_page;
        this.org_list = org_list;
        this.total_count = total_count;
      });
    },

    showOrg(id) {
      this.curOrgId = id;
      this.$refs.showOrg.show();
    },

    updateOrg(id) {
      this.curOrgId = id;
      this.$refs.updateOrg.show();
    },

    resetOrgAdminPassword(id) {
      this.curUserId = id;
      this.$refs.reset.show();
    }
  }
};
</script>

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

.org-manager {
  @include container;
  @include pagination;

  padding: 24px 0 46px;

  > .el-input {
    width: 528px;
  }

  &-list {
    @include list;

    &-title {
      display: flex;
      justify-content: space-between;

      &:first-child {
        font-size: 24px;
        font-weight: 700;
      }
    }
  }
}
</style>