<template>
|
<div>
|
<b-row class="row mb10">
|
<b-col cols="6">
|
<span>类型：</span>
|
<b-select
|
v-model="selectType"
|
style="width: 160px; display: inline-block"
|
:options="peoType"
|
text-field="lable"
|
value-field="lable"
|
@change="handleSelectType"
|
/>
|
<span class="ml10">姓名：</span>
|
<b-form-input autocomplete="off" style="width: 200px; display: inline-block" id="search" v-model="searchValue" @keyup.enter. native="handleSearch" />
|
<b-btn variant="primary" @click="handleSearch">
|
<span class="fas fa-search"></span>
|
搜 索
|
</b-btn>
|
</b-col>
|
<b-col cols="6">
|
<div class="fr">
|
<b-dd variant="primary" text="下载模板" :right="isRTL">
|
<b-dd-item @click="handleDownloadTem('stu')">学生模板</b-dd-item>
|
<b-dd-item @click="handleDownloadTem('tea')">教师模板</b-dd-item>
|
</b-dd>
|
<b-dd variant="primary" text="批量导入" :right="isRTL">
|
<b-dd-item @click="handleUpdateTem('stu')">学生模板</b-dd-item>
|
<b-dd-item @click="handleUpdateTem('tea')">教师模板</b-dd-item>
|
</b-dd>
|
<b-btn
|
variant="warning"
|
@click="$router.push('/personnel/add')"
|
>
|
<span class="fas fa-plus"></span>
|
添 加
|
</b-btn>
|
</div>
|
</b-col>
|
</b-row>
|
<div class="row">
|
<div class="col-md-12 col-lg-12 col-xl-3">
|
<PersonnelTree
|
:data="treeList"
|
children="child"
|
label="name"
|
/>
|
</div>
|
<div class="col-md-12 col-lg-12 col-xl-6">
|
<b-card style="width: 700px; position: relative; padding-bottom: 32px;">
|
<Card
|
@click.native="handleDetail(item)"
|
v-for="item of tableList"
|
:key="item.id"
|
class="fl"
|
style="width: 200px; margin: 8px;"
|
:body-style="{ padding: '0px' }"
|
>
|
<httpImg :src="item.photo" style="width: 100%" />
|
<div style="padding: 14px; text-align: center">
|
<span>{{item.name}}</span>
|
</div>
|
</Card>
|
<div class="pagination">
|
<b-pagination
|
v-if="total"
|
size="md"
|
:total-rows="total"
|
v-model="currentPage"
|
:per-page="10"
|
@change="changePage"
|
/>
|
</div>
|
<h5 v-if="!total" class="no-data">暂无数据</h5>
|
</b-card>
|
</div>
|
<div class="col-md-12 col-lg-12 col-xl-3">
|
<PersonnelDetail :item="item" @update="_initData" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Table, TableColumn, Card } from 'element-ui'
|
import PersonnelDetail from './component/PersonnelDetail'
|
import PersonnelTree from './component/PersonnelTree'
|
import { getUserList, getPeoType, excelDownload } from '../../server/personnel.js'
|
import { getOrgTree } from '../../server/project.js'
|
export default {
|
data: () => ({
|
searchValue: '',
|
selectType: '',
|
tableList: [],
|
currentPage: 1,
|
length: 6,
|
total: 0,
|
peoType: [],
|
treeList: [],
|
item: {} // 当前选择 type
|
}),
|
mounted() {
|
this._getOrgTree()
|
this._initData()
|
this._initPeoType()
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
methods: {
|
index(index) {
|
return this.currentPage > 1 ? this.length * (this.currentPage - 1) + index + 1 : index + 1
|
},
|
async _getOrgTree() {
|
let res = await getOrgTree({
|
orgById: this.orgId
|
})
|
if (res) {
|
this.treeList = [...res]
|
}
|
},
|
async _initPeoType() {
|
let response = await getPeoType({
|
orgId: this.orgId,
|
type: 'PEO_TYPE'
|
})
|
if (response.code - 0 === 0 && response.data) {
|
this.peoType = response.data
|
if (this.peoType.length > 0) {
|
this.selectType = this.peoType[0].lable
|
}
|
}
|
},
|
// 初始化
|
async _initData(type = '') {
|
let res = await getUserList({
|
orgId: this.orgId,
|
start: this.length * (this.currentPage - 1),
|
length: this.length,
|
type: type || this.selectType
|
})
|
if (res && res.data) {
|
this.total = res.total
|
this.tableList = [...res.data]
|
}
|
},
|
// 搜索功能
|
handleSearch() {
|
this._initData()
|
},
|
// 变换类型
|
handleSelectType(e) {
|
// console.log(e)
|
this._initData(e)
|
},
|
// 变换detail
|
handleDetail(item) {
|
this.item = item
|
},
|
// 分页器
|
changePage(e) {
|
this.currentPage = e
|
this._initData()
|
},
|
// 下载模板
|
async handleDownloadTem(type) {
|
await excelDownload({ type })
|
},
|
// 导入
|
async handleUpdateTem(type) {}
|
},
|
components: {
|
Card,
|
Table,
|
TableColumn,
|
PersonnelDetail,
|
PersonnelTree
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pagination {
|
position: absolute;
|
right: 16px;
|
bottom: 0px;
|
}
|
.no-data {
|
text-align: center;
|
margin: 60px auto 60px auto;
|
}
|
.max-img {
|
max-width: 120px;
|
}
|
.person-card {
|
height: 135px;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
.person-card:hover {
|
border: 1px solid #26b4ff;
|
}
|
</style>
|
