GCLS_Page_BMS/src/views/teacher_manager/index.vue

<template>
  <div class="teacher-manager">
    <!--搜索-->
    <div class="teacher-manager-search">
      <el-row type="flex" justify="space-between" class="search-condition">
        <el-col :span="20">
          <span class="search-name">用户名</span>
          <el-input
            v-model="user_name"
            class="account-search"
            type="text"
            @keyup.enter.native="queryOrgTeacherUserList"
          />
          <span class="search-name">姓名</span>
          <el-input
            v-model="user_real_name"
            class="account-search"
            type="text"
            @keyup.enter.native="queryOrgTeacherUserList"
          />
          <span class="search-name">审核状态</span>
          <el-select v-model="is_audited" :style="{ 'margin-right': '12px' }">
            <el-option v-for="{ value, label } in auditedList" :key="value" :value="value" :label="label" />
          </el-select>
          <date-search ref="dateSearch" name="加入机构时间" />
        </el-col>
        <el-col :span="2">
          <el-button class="search-button" icon="el-icon-search" @click="queryOrgTeacherUserList" />
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <CommonTable
      name="教师列表"
      :min-height="554"
      :page-size="page_capacity"
      :total="total_count"
      :current-page="cur_page"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
      @size-change="changePageSize"
    >
      <el-table :data="org_teacher_user_list">
        <el-table-column prop="user_name" label="用户名" width="180" />
        <el-table-column prop="user_real_name" label="姓名" width="180" />
        <el-table-column prop="org_name" label="服务机构" width="180" />
        <el-table-column prop="user_email" label="邮箱" width="180" />
        <el-table-column prop="join_org_time" label="加入机构时间" width="180" />
        <el-table-column prop="is_audited" label="已审核">
          <template slot-scope="{ row }">
            <div :style="{ 'text-align': 'center', width: '40px' }">{{ row.is_audited === 'true' ? '√' : '' }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="180">
          <template slot-scope="{ row }">
            <el-row type="flex" justify="space-between">
              <el-col>
                <el-link
                  :underline="false"
                  :type="row.is_audited === 'true' ? 'danger' : 'success'"
                  @click="auditOrgTeacher(row)"
                >
                  审核{{ row.is_audited === 'true' ? '拒绝' : '同意' }}
                </el-link>
              </el-col>
              <el-col>
                <el-popover trigger="click" width="200" @show="getPopedomList(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="setPopedom(row.id)">保存</el-button>
                  </div>
                  <el-link slot="reference" :underline="false">权限</el-link>
                </el-popover>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </CommonTable>
  </div>
</template>

<script>
import { pageQueryOrgTeacherUserList } from '@/api/list';
import { auditOrgTeacherUser, getPopedomList_OrgTeacherUse, setPopedom_OrgTeacherUser } from '@/api/teacher';
import DateSearch from '@/components/common/DateSearch.vue';
import CommonTable from '@/components/common/CommonTable.vue';

export default {
  name: 'TeacherManager',
  components: {
    DateSearch,
    CommonTable
  },
  data() {
    return {
      user_name: '',
      user_real_name: '',
      org_teacher_user_list: [],
      page_capacity: 10,
      total_count: 0,
      cur_page: 1,
      popedom_list: [],
      auditedList: [
        {
          value: '',
          label: '所有'
        },
        {
          value: true,
          label: '已审核'
        },
        {
          value: false,
          label: '未审核'
        }
      ],
      is_audited: ''
    };
  },
  created() {
    this.queryOrgTeacherUserList();
  },
  methods: {
    changePage(newPage) {
      this.cur_page = newPage;
      this.queryOrgTeacherUserList();
    },

    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.queryOrgTeacherUserList();
    },

    queryOrgTeacherUserList() {
      pageQueryOrgTeacherUserList({
        user_name: this.user_name,
        user_real_name: this.user_real_name,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        is_audited: this.is_audited,
        join_org_time_min: this.$refs?.dateSearch?.join_org_time_min ?? '',
        join_org_time_max: this.$refs?.dateSearch?.join_org_time_max ?? ''
      }).then(({ cur_page, org_teacher_user_list, total_count }) => {
        this.cur_page = cur_page;
        this.org_teacher_user_list = org_teacher_user_list;
        this.total_count = total_count;
      });
    },
    // 审核教师
    auditOrgTeacher(row) {
      auditOrgTeacherUser({
        id_list: [row.id],
        is_audited: row.is_audited !== 'true'
      }).then(() => {
        this.queryOrgTeacherUserList();
      });
    },
    // 得到权限列表
    getPopedomList(user_org_id) {
      getPopedomList_OrgTeacherUse({ user_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;
      });
    },
    // 设置教师权限
    setPopedom(user_org_id) {
      let popedom_code_list = this.popedom_list
        .map(({ popedom_code, is_selected }) => {
          if (is_selected) return popedom_code;
        })
        .filter(item => item !== undefined);

      setPopedom_OrgTeacherUser({
        user_org_id,
        popedom_code_list
      }).then(() => {
        this.$message.success('设置教师权限成功');
      });
    }
  }
};
</script>

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

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

  padding: 24px 0 46px;

  &-search {
    span.search-name {
      margin-right: 14px;
    }

    .search-condition {
      align-items: center;
    }

    .account-search {
      width: 240px;
      margin-right: 48px;
    }

    .search-button {
      float: right;
    }
  }
}

// 权限管理
.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>