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="70">
          <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-column fixed="right" width="180">
          <template slot-scope="{ row }">
            <el-popover trigger="click" width="200" @show="getDistributablePopedomList_OrgManager(row.id)">
              <div class="popedom">
                <span class="popedom-manager">权限管理</span>
                <div v-for="item in popedom_list" :key="item.popedom_code" class="popedom-list">
                  <span>{{ item.popedom_name }}</span>
                  <el-switch v-model="item.is_selected" active-color="#34CC83" inactive-color="#C4C4C4" />
                </div>
                <el-button type="primary" @click="setDistributablePopedom_OrgManager(row.id)">保存</el-button>
              </div>
              <el-link slot="reference" :underline="false">管理员可分配权限</el-link>
            </el-popover>
          </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" @refresh="queryOrgList" />
  </div>
</template>

<script>
import ResetPassword from '@/components/ResetPassword.vue';
import ShowOrg from './ShowOrg.vue';
import UpdateOrg from './UpdateOrg.vue';
import { pageQueryOrgList } from '@/api/list';
import { GetDistributablePopedomList_OrgManager, SetDistributablePopedom_OrgManager } from '@/api/org';

export default {
  name: 'OrgManager',
  components: {
    ResetPassword,
    ShowOrg,
    UpdateOrg
  },
  data() {
    return {
      search: '',
      page_capacity: 10,
      cur_page: 1,
      org_list: [],
      total_count: 0,
      curUserId: '',
      curOrgId: '',
      // 权限列表
      popedom_list: []
    };
  },
  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();
    },

    getDistributablePopedomList_OrgManager(org_id) {
      GetDistributablePopedomList_OrgManager({ org_id }).then(({ popedom_list }) => {
        popedom_list.forEach((el, i, arr) => {
          el.is_selected = el.is_selected === 'true';
          arr[i] = el;
        });
        this.popedom_list = popedom_list;
      });
    },

    setDistributablePopedom_OrgManager(org_id) {
      let popedom_code_list = [];
      this.popedom_list.forEach(({ popedom_code, is_selected }) => {
        if (is_selected) popedom_code_list.push(popedom_code);
      });
      SetDistributablePopedom_OrgManager({ org_id, popedom_code_list }).then(() => {
        this.$message.success('为机构管理员设置可分配的权限成功');
      });
    },

    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>

<style lang="scss">
// 权限管理
.popedom {
  &-manager {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9;
  }

  &-list {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
  }

  .el-button {
    width: 100%;
    padding: 6px 20px;
    margin-top: 16px;
  }
}
</style>