362 lines
7.5 KiB
Vue
362 lines
7.5 KiB
Vue
<template>
|
|
<section class="AiPersonSelect">
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
@click="isDialog = true"
|
|
:disabled="disabled"
|
|
>{{ dialogTitle || '选择党员' }}</el-button>
|
|
<el-dialog
|
|
title="选择党员"
|
|
:visible.sync="isDialog"
|
|
append-to-body
|
|
width="840px"
|
|
:modal-append-to-body="false"
|
|
:close-on-click-modal="false">
|
|
<div class="dialog-wrapper">
|
|
<div class="selectCont">
|
|
<el-row type="flex" justify="space-between">
|
|
<el-col>
|
|
<span style="font-weight: bold;">党员列表</span>
|
|
</el-col>
|
|
<el-col>
|
|
<el-input
|
|
size="mini"
|
|
placeholder="请输入..."
|
|
v-model="searchObj.con"
|
|
@keyup.native.enter="reSearchInfo"
|
|
clearable
|
|
@clear="onClear"
|
|
:validate-event="false">
|
|
<i slot="suffix" class="iconfont iconSearch" @click="reSearchInfo"></i>
|
|
</el-input>
|
|
</el-col>
|
|
</el-row>
|
|
<ul class="seleceUl">
|
|
<li v-for="(item, index) in meta || tableData" :key="index" @click="chooseItem(item, index)" :class="{ selectedLi: getIsActive(item.id) }">
|
|
<slot v-if="meta || url" name="option" :item="item"></slot>
|
|
<template v-else>
|
|
<div class="user-wrapper">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icondangyuan"></use>
|
|
</svg>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<ai-id mode="show" :show-eyes="false" :value="item.idNumber" />
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
<div v-if="!meta" class="pagination">
|
|
<el-pagination
|
|
background
|
|
:current-page.sync="searchObj.current"
|
|
:total="total"
|
|
small
|
|
layout="prev, pager, next"
|
|
@current-change="handleChange"
|
|
:pager-count="5"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
<div class="selected-people add-item">
|
|
<p class="add_top">
|
|
<span>已选择</span>
|
|
<el-button
|
|
icon="iconfont iconDelete"
|
|
size="mini"
|
|
@click="clearAll">
|
|
清空
|
|
</el-button>
|
|
</p>
|
|
<div class="add_tag" v-if="selectPeople.length" style="width:100%;">
|
|
<el-tag
|
|
v-for="(item, i) in selectPeople"
|
|
:disable-transitions="true"
|
|
:key="i"
|
|
closable
|
|
@close="cancelSelect(item, i)">{{ item.name }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="add_tag" v-else style="display:flex;align-items:center;justify-content:center;width:100%;">
|
|
<span>暂无数据</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" style="text-align: center;">
|
|
<el-button size="small" @click="isDialog = false">取消</el-button>
|
|
<el-button size="small" type="primary" @click="saveSelect">确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiPartyMemberSelect',
|
|
|
|
props: {
|
|
instance: Function,
|
|
url: String,
|
|
meta: Array,
|
|
dialogTitle: String,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
searchObj: {
|
|
current: 1,
|
|
size: 10,
|
|
con: ''
|
|
},
|
|
selectPeople: [],
|
|
tableData: [],
|
|
total: 0,
|
|
isDialog: false,
|
|
whichOne: -1,
|
|
selectObj: null
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.searchInfo()
|
|
},
|
|
|
|
methods: {
|
|
chooseItem (user) {
|
|
let index = this.selectPeople.findIndex(item => item.id === user.id)
|
|
|
|
if (index > -1) {
|
|
this.selectPeople.splice(index ,1)
|
|
} else {
|
|
this.selectPeople.push(user)
|
|
}
|
|
},
|
|
|
|
onClear () {
|
|
this.searchObj.con = ''
|
|
|
|
this.$nextTick(() => {
|
|
this.reSearchInfo()
|
|
})
|
|
},
|
|
|
|
getIsActive (id) {
|
|
return this.selectPeople.findIndex(item => item.id === id) > -1
|
|
},
|
|
|
|
cancelSelect (item) {
|
|
this.chooseItem(item)
|
|
},
|
|
|
|
clearAll () {
|
|
this.selectPeople = []
|
|
},
|
|
|
|
reSearchInfo () {
|
|
this.searchObj.current = 1
|
|
this.searchInfo()
|
|
},
|
|
|
|
searchInfo () {
|
|
let url = ''
|
|
if (!this.url) {
|
|
url = '/app/appparty/list'
|
|
} else {
|
|
url = this.url
|
|
}
|
|
|
|
this.instance.post(`${url}`, null, {
|
|
params: {
|
|
...this.searchObj,
|
|
},
|
|
}).then((res) => {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
},
|
|
|
|
handleChange (val) {
|
|
this.searchObj.current = val
|
|
this.searchInfo()
|
|
},
|
|
|
|
saveSelect () {
|
|
this.$emit('selectPerson', this.selectPeople)
|
|
this.isDialog = false
|
|
this.whichOne = -1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.selectCont {
|
|
position: relative;
|
|
border: 1px solid #d0d4dc;
|
|
background: #fcfcfc;
|
|
width: 416px;
|
|
height: 400px;
|
|
margin: 0 20px;
|
|
box-sizing: border-box;
|
|
|
|
.el-row {
|
|
background: #f5f5f5;
|
|
border-bottom: 1px solid #d0d4dc;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.seleceUl {
|
|
margin: 8px;
|
|
padding: 0;
|
|
height: 248px;
|
|
overflow-y: auto;
|
|
|
|
.AiID {
|
|
line-height: inherit;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
.iconfont {
|
|
font-size: 12px;
|
|
}
|
|
|
|
p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
background: #eff6ff;
|
|
color: #5088ff;
|
|
}
|
|
|
|
.selectedLi {
|
|
background: #eff6ff;
|
|
color: #5088ff;
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
:deep( .pagination .el-pager li ){
|
|
line-height: 22px!important;
|
|
}
|
|
|
|
.add-item {
|
|
position: relative;
|
|
width: 260px;
|
|
height: 400px;
|
|
background: rgba(252, 252, 252, 1);
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(208, 212, 220, 1);
|
|
position: relative;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
|
|
&:nth-of-type(2) {
|
|
width: 360px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
padding: 0;
|
|
}
|
|
|
|
.add_top {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: rgba(245, 245, 245, 1);
|
|
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tree_list {
|
|
width: 100%;
|
|
overflow: auto;
|
|
height: calc(100% - 40px);
|
|
|
|
.el-tree {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.add_buttom {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-size: 12px;
|
|
width: 310px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
z-index: 10000;
|
|
background: rgba(245, 246, 247, 1);
|
|
color: rgba(51, 51, 51, 1);
|
|
box-shadow: 0 1px 0 0 rgba(216, 220, 227, 1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add_tag {
|
|
width: 310px;
|
|
height: calc(100% - 40px);
|
|
overflow-y: auto;
|
|
|
|
.el-tag {
|
|
margin: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-wrapper {
|
|
display: flex;
|
|
}
|
|
.user-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
.el-dialog__wrapper {
|
|
z-index: 3000 !important;
|
|
}
|
|
</style>
|