<template>
|
<b-modal
|
ref="myModalRef"
|
title="请选择人员关系"
|
size="lg"
|
ok-title="确定"
|
cancel-title="取消"
|
@ok="handleSave"
|
@cancel="hideModal"
|
>
|
<div class="ml10">
|
<span>姓名：</span>
|
<b-input
|
autocomplete="off"
|
v-model="searchValue"
|
style="width: 200px; display: inline-block"
|
placeholder="请输入姓名"
|
@change.native="handleSearch"
|
/>
|
<b-btn
|
variant="primary"
|
@click="handleSearch"
|
>
|
搜索
|
</b-btn>
|
</div>
|
<div class="row pt-3" style="margin-left: 0; margin-right: 0">
|
<div
|
:key="item.id"
|
v-for="item in modelList"
|
class="col-md-6 col-xl-4"
|
>
|
<b-card
|
class="card-condenced mb-4"
|
body-class="media align-items-center"
|
@click.stop.prevent="toggleSelect($event, item)"
|
>
|
<!-- :checked="selected.includes(item)" -->
|
<b-check
|
class="file-item-checkbox"
|
:checked="selected.some(i => i.id === item.id)"
|
@change.stop.prevent="toggleSelect($event, item)"
|
/>
|
<httpImg :src="item.photos" height="100px" class="max-img" />
|
<div class="media-body ml-3">
|
<a
|
href="javascript:void(0)"
|
class="text-dark font-weight-semibold mb-2"
|
>
|
{{item.name}}
|
</a>
|
</div>
|
</b-card>
|
</div>
|
</div>
|
<div class="fr">
|
<b-pagination
|
class="ml10"
|
v-if="total"
|
size="md"
|
:total-rows="total"
|
v-model="currentPage"
|
:per-page="length"
|
@change="changePage"
|
/>
|
</div>
|
</b-modal>
|
</template>
|
|
<style src="@/vendor/styles/pages/file-manager.scss" lang="scss"></style>
|
|
<script>
|
import { isOrg } from '../../../components/common/util.js'
|
import { relationByOrg } from '../../../server/personnel.js'
|
|
export default {
|
props: {
|
item: {
|
type: Object,
|
default: () => (null)
|
},
|
orgId: {
|
type: Number | String,
|
default: ''
|
},
|
relationList: {
|
type: Array,
|
default: () => ([])
|
}
|
},
|
data: () => ({
|
modelList: [],
|
total: 0,
|
length: 9,
|
currentPage: 1,
|
searchValue: '',
|
selected: [],
|
focused: null,
|
dropdownOpened: null
|
}),
|
methods: {
|
showModal () {
|
this.$refs.myModalRef.show()
|
this.getRelation()
|
this.selected = [...this.relationList]
|
},
|
hideModal () {
|
this.$refs.myModalRef.hide()
|
},
|
// * 获取数据
|
async getRelation() {
|
const loginedInfo = JSON.parse(sessionStorage.getItem('loginedInfo'))
|
const accessToken = loginedInfo.access_token.split(' ')[0]
|
let orgId
|
if (this.item) {
|
const isOrgResult = isOrg(this.item.type)
|
orgId = isOrgResult ? this.item.id : this.item.orgId
|
}
|
const res = await relationByOrg({
|
orgId: this.orgId || orgId,
|
id: this.orgId || orgId,
|
length: this.length,
|
start: this.length * (this.currentPage - 1),
|
access_token: accessToken,
|
searchName: this.searchValue
|
})
|
if (res) {
|
this.modelList = res.data
|
this.total = res.total
|
}
|
},
|
// * 分页器设置
|
changePage(e) {
|
this.currentPage = e
|
this.getRelation()
|
},
|
// * 搜索
|
handleSearch() {
|
this.currentPage = 1
|
this.getRelation()
|
},
|
// * 选择
|
toggleSelect (checked, item) {
|
if (checked) {
|
this.selected.push(item)
|
} else {
|
this.selected.splice(this.selected.indexOf(item), 1)
|
}
|
},
|
// * 保存
|
handleSave() {
|
this.$emit('relationData', this.selected)
|
this.selected = []
|
this.hideModal()
|
}
|
}
|
}
|
</script>
|
<style>
|
.max-img {
|
max-width: 120px;
|
}
|
.card-condenced {
|
height: 135px;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
.card-condenced:hover {
|
border: 1px solid #26b4ff;
|
}
|
</style>
|
