HM21St_Page_Manager/src/views/organize_manage/PersonList.vue

<template>
  <div class="manage-root organize-manage person-list">
    <Header />
    <div class="manage-root-contain">
        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
        <div class="manage-root-contain-right personnel-manage-right">
            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
            <div class="personal-inner" v-if="info">
                <div class="common-title-box">
                    <h3>{{info.name}}<span class="total-number">共{{info.person_count_audited}}人</span></h3>
                    <div class="btn-box">
                        <el-button type="primary" size="small" @click="handleBatchImport">批量导入</el-button>
                    </div>
                </div>
                <div class="tabs">
                    <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">人员列表</a>
                    <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">人员审核 {{info.person_count_wait_audit}}</a>
                </div>
                <div class="search">
                    <div class="search-box">
                        <div class="search-item">
                            <label>搜索</label>
                            <el-input
                                placeholder="输入搜索内容"
                                v-model="searchInput">
                                <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" style="cursor: pointer;"></i>
                            </el-input>
                        </div>
                        <div class="search-item">
                            <label>权限</label>
                            <el-select v-model="searchType" @change="getList" placeholder="请选择">
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.account_type"
                                    :label="item.account_type_name"
                                    :value="item.account_type">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="search-item" v-if="tabsIndex===0">
                            <label>状态</label>
                            <el-select v-model="searchStatus" @change="getList" placeholder="请选择">
                                <el-option
                                    v-for="item in searchStatusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="search-item" v-if="tabsIndex===1">
                            <label>状态</label>
                            <el-select v-model="searchAuditStatus" @change="getList" placeholder="请选择">
                                <el-option
                                    v-for="item in searchAuditStatusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="search-right" v-if="tabsIndex===0">
                        <el-button class="gray-btn" size="small" @click="handleUp('','up',multipleSelection)">开启选中用户</el-button>
                        <el-button class="pink-btn" size="small" @click="handleUp('','down',multipleSelection)">停用选中用户</el-button>
                        <el-button class="red-btn" size="small" @click="handleDelete('',multipleSelection)">删除选中用户</el-button>
                    </div>
                    <div class="search-right" v-if="tabsIndex===1">
                        <el-button class="gray-btn" size="small" @click="handleAudit('','up',multipleSelection)">同意选中用户</el-button>
                        <el-button class="pink-btn" size="small" @click="handleAudit('','down',multipleSelection)">拒绝选中用户</el-button>
                    </div>
                </div>
                <template v-if="tabsIndex===0">
                    <el-table
                        class="search-table"
                        :data="tableData"
                        style="width: 100%"
                        key="table"
                        :max-height="tableHeight"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="40">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="用户名"
                            sortable
                            min-width="132"
                            class-name="user-info">
                            <template slot-scope="scope">
                                <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" />
                                <span class="name">{{scope.row.user_name}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="real_name"
                            label="真实姓名"
                            width="103">
                        </el-table-column>
                        <el-table-column
                            prop="sex_name"
                            label="性别"
                            width="56">
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="权限"
                            width="88" >
                            <template slot-scope="scope">
                                {{scope.row.is_manager==='true'?'管理员':'普通用户'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="email"
                            label="邮箱"
                            sortable
                            min-width="223">
                        </el-table-column>
                        <el-table-column
                            prop="phone"
                            label="手机号"
                            sortable
                            width="160">
                        </el-table-column>
                        <el-table-column
                            prop="register_time"
                            label="注册时间"
                            sortable
                            width="144">
                        </el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                            width="116" >
                            <template slot-scope="scope">
                                <div class="status-box">
                                    <span :style="{background:statusList[scope.row.status].bg}"></span>
                                    <b :style="{color:statusList[scope.row.status].color}">{{statusList[scope.row.status].text}}</b>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="147">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="handleEdit(scope.row)"
                                    type="text"
                                    size="small"
                                    class="primary-btn">
                                    编辑
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleUp(scope.row, 'up')"
                                    type="text"
                                    size="small"
                                    class="primary-btn"
                                    v-if="scope.row.status===0">
                                    开启
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleUp(scope.row, 'down')"
                                    type="text"
                                    size="small"
                                    class="red-btn"
                                    v-else-if="scope.row.status===1">
                                    停用
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleDelete(scope.row)"
                                    type="text"
                                    size="small"
                                    class="red-btn"
                                    v-if="scope.row.status===0">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        @size-change="(val)=>handleSizeChange(val,'pageSize','pageNumber')"
                        @current-change="(val)=>handleCurrentChange(val,'pageNumber')"
                        :current-page="pageNumber"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, sizes, jumper"
                        :total="total_count">
                    </el-pagination>
                </template>
                <template v-if="tabsIndex===1">
                    <el-table
                        class="search-table"
                        :data="tableData"
                        style="width: 100%"
                        :max-height="tableHeight"
                        key="auditTable"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="40">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="用户名"
                            sortable
                            min-width="132"
                            class-name="user-info">
                            <template slot-scope="scope">
                                <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" />
                                <span class="name">{{scope.row.user_name}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="real_name"
                            label="真实姓名"
                            width="103">
                        </el-table-column>
                        <el-table-column
                            prop="sex_name"
                            label="性别"
                            width="56">
                        </el-table-column>
                        <el-table-column
                            prop="email"
                            label="邮箱"
                            sortable
                            min-width="223">
                        </el-table-column>
                        <el-table-column
                            prop="phone"
                            label="手机号"
                            sortable
                            width="160">
                        </el-table-column>
                        <el-table-column
                            prop="apply_time"
                            label="申请时间"
                            sortable
                            width="144">
                        </el-table-column>
                        <el-table-column
                            prop="audit_time"
                            label="审核时间"
                            sortable
                            width="144">
                            <template slot-scope="scope">
                                {{scope.row.audit_time?scope.row.audit_time:'-'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                            width="116" >
                            <template slot-scope="scope">
                                <div class="status-box" v-if="auditStatusList[scope.row.audit_status]">
                                    <span :style="{background:auditStatusList[scope.row.audit_status].bg}"></span>
                                    <b :style="{color:auditStatusList[scope.row.audit_status].color}">{{auditStatusList[scope.row.audit_status].text}}</b>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="147">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="handleEdit(scope.row)"
                                    type="text"
                                    size="small"
                                    class="primary-btn">
                                    查看
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleAudit(scope.row,'up')"
                                    type="text"
                                    size="small"
                                    class="primary-btn">
                                    同意
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleAudit(scope.row,'down')"
                                    type="text"
                                    size="small"
                                    class="red-btn"
                                    v-if="scope.row.audit_status===0">
                                    拒绝    
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        @size-change="(val)=>handleSizeChange(val,'pageSizes','pageNumbers')"
                        @current-change="(val)=>handleCurrentChange(val,'pageNumbers')"
                        :current-page="pageNumbers"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSizes"
                        layout="total, prev, pager, next, sizes, jumper"
                        :total="total_count">
                    </el-pagination>
                </template>
            </div>
        </div>
    </div>
    <el-dialog
        :visible.sync="importFlag"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="398px"
        class="login-dialog person-dialog"
        v-if="importFlag">
        <batch-import @closeDialog="closeDialog"></batch-import>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue"
import Breadcrumb from '../../components/Breadcrumb.vue';
import BatchImport from './BatchImport.vue'
import {
  provinceAndCityData
} from "element-china-area-data";
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, BatchImport },
  props: {},
  data() {
    //这里存放数据
    return {
        provinceAndCityData,
        activeMenuIndex: "organize_manage",
        breadcrumbList:[
            {
                icon:'school-line',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                text:'机构管理'
            }
        ],
        searchInput: '',
        searchType: -1,
        searchStatus: -1,
        searchAuditStatus: -1,
        typeList:[
            {
                account_type:-1,
                account_type_name:'全部'
            },
            {
                account_type:1,
                account_type_name:'管理员'
            },
            {
                account_type:0,
                account_type_name:'普通用户'
            }
        ],
        searchAuditStatusList:[
            {
                value:-1,
                label:'全部'
            },
            {
                value:0,
                label:'待审核'
            },
            {
                value:2,
                label:'已拒绝'
            }
        ], // 审核状态列表
        searchStatusList:[
            {
                value:-1,
                label:'全部'
            },
            {
                value:1,
                label:'正常'
            },
            {
                value:0,
                label:'停用'
            }
        ],
        statusList:{
            1:{
                text:'正常',
                bg:'#165DFF',
                color:''
            },
            0:{
                text:'停用',
                bg:'#F53F3F',
                color:'#F53F3F'
            }
        },
        auditStatusList:{
            0:{
                text:'待审核',
                bg:'#165DFF',
                color:''
            },
            2:{
                text:'已拒绝',
                bg:'#F53F3F',
                color:'#F53F3F'
            }
        },
        tableData:[],
        pageSize: window.localStorage.getItem('pageSizec')?Number(window.localStorage.getItem('pageSize-people')):10, 
        pageNumber: window.localStorage.getItem('pageNumber-people')?Number(window.localStorage.getItem('pageNumber-people')):1,
        tableHeight: "", // 表格高度
        orgName:'', // 机构名称
        id:this.$route.query.id?this.$route.query.id:'',
        multipleSelection:[],
        tabsIndex:0,
        pageSizes: window.localStorage.getItem('pageSize-check')?Number(window.localStorage.getItem('pageSize-check')):10, 
        pageNumbers: window.localStorage.getItem('pageNumber-check')?Number(window.localStorage.getItem('pageNumber-check')):1,
        importFlag: false, // 批量导入flag
        info: null, 
        total_count: 0
    }
  },
  //计算属性 类似于data概念
  computed: {
    
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 查询列表
    getList(){
        let MethodName = "/OrgServer/Manager/PageQuery/PageQueryPersonList";
        let data = {
            org_id: this.id,
            search_content:this.searchInput.trim(),
            role_type:this.searchType,
            status:this.tabsIndex===0?this.searchStatus:-1,
            audit_status:this.tabsIndex===1?this.searchAuditStatus:-1,
            page_capacity:this.tabsIndex===0?this.pageSize:this.pageSizes,
            cur_page:this.tabsIndex===0?this.pageNumber:this.pageNumbers,
            list_type: this.tabsIndex*1
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
               this.tableData = res.person_list
               this.total_count = res.total_count
            }
        })
        .catch(() => {
            this.loading = false
        }); 
    },
    // 创建机构或者编辑信息
    handleEdit(row){
        // 根据登录用户判断当前用户是不是超管 在table里加上disabled

        // 点击时记录页码和每页条数
        window.localStorage.setItem('pageSize',this.pageSize)
        window.localStorage.setItem('pageNumber',this.pageNumber)
        this.$router.push({
            path: "/editOrgPerson",
            query: {
                id: row?row.id:''
            },
        });
    },
    // 人员管理
    handlePerson(){

    },
    // 停用 启用
    handleUp(row,type,arr) {
      if(!row&&arr.length===0){
        return false
      }
      let Mname = "/OrgServer/Manager/PersonManager/EnablePerson";
      let data = {
        id_list: arr?arr:[row.id]
      };
      if (type==='up') {
        // 下架状态
        data.is_enable = "true";
      } else if (type==='down') {
        data.is_enable = "false";
      }
      getLogin(Mname, data).then(res => {
        this.$message.success("操作成功");
        this.getList()
      });
    },
    // 通过 拒绝
    handleAudit(row,type,arr) {
      if(!row&&arr.length===0){
        return false
      }
      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
      let data = {
        id_list: arr?arr:[row.id]
      };
      if (type==='up') {
        // 下架状态
        data.is_pass = "true";
      } else if (type==='down') {
        data.is_pass = "false";
      }
      getLogin(Mname, data).then(res => {
        this.$message.success("操作成功");
        this.getList()
      });
    },
    handleSizeChange(val,type,page) {
        this[type] = val
        this[page] = 1
        this.getList()
    },
    handleCurrentChange(val,type) {
        this[type] = val
        this.getList()
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 434; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 删除
    handleDelete(row,arr){
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            if(!row&&arr.length===0){
                return false
            }
            let Mname = "/OrgServer/Manager/PersonManager/DeletePerson";
            let data = {
                id_list: arr?arr:[row.id]
            };
            getLogin(Mname, data).then(res => {
                this.$message.success("删除成功");
                this.getList()
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 复选框
    handleSelectionChange(val) {
        this.multipleSelection = []
        val.forEach(item => {
            this.multipleSelection.push(item.id)
        });
    },
    handleChangeTabs(value){
        this.tabsIndex = value
        this.pageNumber = 1
        this.getList()
    },
    // 批量导入
    handleBatchImport(){
        this.importFlag = true
    },
    // 关闭批量导入
    closeDialog(){
        this.importFlag = false
        this.getList()
        this.getInfo()
    },
    // 获取机构信息
    getInfo(){
        let MethodName = "/OrgServer/Manager/OrgManager/GetOrgTitleInfo";
        let data = {
            id: this.id,
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.info = res
                let obj = {
                    icon:'',
                    url:'',
                    text:res.name
                }
                this.breadcrumbList=[
                    {
                        icon:'school-line',
                        url:'',
                        text:''
                    },
                    {
                        icon:'',
                        url:'',
                        text:'机构管理'
                    }
                ]
                this.breadcrumbList.push(obj)
            }
        })
        .catch(() => {
            
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
    this.getTableHeight();
    if(this.id){
        this.getInfo()
    }else{
        this.breadcrumbList=[
            {
                icon:'school-line',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                text:'机构管理'
            }
        ]
        let obj = {
            icon:'',
            url:'',
            text:'青岛科技大学'
        }
        this.breadcrumbList.push(obj)
    }
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */

.total-number{
    color: #86909C;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    margin-left: 4px;
}
.tabs{
    display: flex;
    padding: 16px 0;
    a{
        font-size: 14px;
        line-height: 22px;
        color: #4E5969;
        border-radius: 100px;
        padding: 5px 16px;
        margin-right: 12px;
        &:hover{
            background: #F2F3F5;
        }
        &.active{
            background: #F2F3F5;
            font-weight: 500;
            color: #165DFF;
        }
    }
}
.search{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.search-box{
    padding-top: 0;
}
.search-right{
    height: 34px;
    button{
        font-size: 14px;
    }
    .pink-btn{
        background: #FFECE8;
        color: #F53F3F;
        border-color: #FFECE8;
        &:hover{
            background: #fde0da;
            border-color: #fde0da;
        }
        &:focus{
            background: #f8cfc6;
            border-color: #f8cfc6;
        }
    }
    .red-btn{
        background: #F53F3F;
        color: #fff;
        border-color: #F53F3F;
        &:hover{
            background: #ed3b3b;
        }
        &:focus{
            background: #ec1111;
        }
    }
}
</style>
<style lang="scss">
.organize-manage{
    .el-cascader{
        width: 160px;
        height: 32px;
        line-height: 32px;
        .el-input{
            width: 100%;
            height: 32px;
        }
    }
}
.person-dialog{
    .el-dialog{
        border-radius: 8px;
    }
}
.person-list{
    .user-info{
        .cell{
            display: flex;
            align-items: center;
            .touxiang{
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 8px;
            }
        }
    }
}
</style>