<template>
<div>
<a-modal
:visible="true"
title="选择部门"
@cancel="closeModal"
width="560px"
>
<div class="gutter-example">
<a-row :gutter="16">
<a-col class="gutter-row" :span="12">
<!--
:infinite-scroll-disabled="busy"
:infinite-scroll-distance="0"
@scroll="scroll" -->
<div
class="gutter-box"
ref="leftList"
>
<a-input
allow-clear
style="width: 220px; margin-bottom: 8px; padding-left: 8px"
v-model="searchParmas.keyword"
placeholder="请输入搜索内容"
@change="onSearch"
>
<a-icon slot="prefix" type="search" />
</a-input>
<a-checkbox-group @change="onChooseOrg" v-model="chooseArray">
<a-checkbox
class="item-style"
v-for="item in departmentList"
:key="item.id"
:value="item.id"
:disabled="item.disabled"
>{{ item.name }}
</a-checkbox>
</a-checkbox-group>
</div>
</a-col>
<a-col class="gutter-row" :span="12">
<div class="gutter-box">
<div class="choose-title">
已选部门({{ chooseList.length }}/10)
</div>
<div
class="choose-item"
v-for="item in chooseList"
:key="item.id"
>
{{ item.name }}
<span class="close-style" @click="deleteItem(item)">
<a-icon type="close" />
</span>
</div>
</div>
</a-col>
</a-row>
</div>
<div slot="footer">
<a-button @click="closeModal()">取消</a-button>
<a-button type="primary" @click="handelOk()">确定</a-button>
</div>
</a-modal>
</div>
</template>
<script>
import { organizationList } from "@/api/staff.js";
export default {
props: {
selectArray:{
type:Array,
default:()=> []
}
},
data() {
return {
loading: false,
departmentList: [],
copyList: [],
total: 0,
searchParmas: {
page: 1,
pageSize: 500,
keyword: "",
},
chooseList: [],
busy: false,
chooseArray:[]
};
},
mounted() {
this.getOrganizationList();
this.initData()
},
methods: {
// 初始化数据
initData() {
let arr = [],choose = []
arr = this.selectArray
if(arr.length > 0){
arr.forEach( item => {
choose.push(item.id)
})
this.chooseArray = choose
this.chooseList = arr
}
},
// 选择部门
onChooseOrg(e) {
// 是否在查询列表选择
if(!this.searchParmas.keyword){
this.chooseList = []
}
if (e.length > 0) {
if(this.chooseList.length < 10){
e.forEach( item => {
let chooseResult = []
let flag = this.chooseList.filter( (ite) => ite.id == item)
// 表示已选数组里面不包含此数据
if(flag.length == 0){
chooseResult = this.departmentList.filter((ite) => ite.id == item);
}
let resultArr = [...chooseResult,...this.chooseList]
this.chooseList = resultArr.filter((item, index, arr) => arr.indexOf(item, 0) === index)
})
}
// 最多选择十个部门
if (this.chooseList.length == 10) {
this.disabledList();
}else{
this.departmentList.map((ele) => {
this.$set(ele, "disabled", false);
});
}
}
},
// 禁用可选列表
disabledList() {
this.searchParmas.keyword = null
this.departmentList = this.copyList
this.chooseArray = []
this.chooseList.forEach( item => {
this.chooseArray.push(item.id)
})
this.departmentList.map((ele) => {
if (this.chooseArray.includes(ele.id)) {
this.$set(ele, "disabled", false);
} else {
this.$set(ele, "disabled", true);
}
});
},
// 删除部门
deleteItem(data) {
this.chooseArray = this.chooseArray.filter( item => item != data.id)
this.chooseList = this.chooseList.filter( item => item.id != data.id)
this.handelChooseArray()
},
// 搜索后选中数据处理
handelChooseArray() {
this.searchParmas.keyword = null
this.departmentList = this.copyList
this.chooseArray = []
this.chooseList.forEach( item => {
this.chooseArray.push(item.id)
})
if(this.chooseList.length == 10){
this.disabledList()
}else{
this.departmentList.map((ele) => {
this.$set(ele, "disabled", false);
});
}
},
// 左侧部门树滑动加载
// scroll() {
// this.$nextTick(() => {
// const el = this.$refs.leftList;
// const offsetHeight = el.offsetHeight;
// const scrollTop = el.scrollTop;
// const scrollHeight = el.scrollHeight;
// if (offsetHeight + scrollTop - scrollHeight >= 0) {
// this.searchParmas.page += 1;
// this.getOrganizationList();
// }
// });
// },
// 获取部门列表
getOrganizationList(option) {
if (this.loading) {
return;
}
this.loading = true;
organizationList(this.searchParmas)
.then((res) => {
if (res.errorCode == "00000") {
if (res.data.records.length == 0) {
this.loading = false;
return;
}
if(this.chooseList.length == 10){
res.data.records.forEach((item) => {
item.disabled = true;
});
}else{
res.data.records.forEach((item) => {
item.disabled = false;
});
}
if (option) {
this.departmentList = res.data.records;
} else {
this.departmentList = res.data.records;
this.copyList = this.departmentList;
}
this.total = res.data.total;
this.loading = false;
}
})
.catch((err) => {
if (err) {
this.loading = false;
}
});
},
// 搜索数据
onSearch(e) {
if (!e.target.value) {
this.handelChooseArray()
} else {
this.searchParmas.page = 1;
this.searchParmas.keyword = e.target.value;
this.getOrganizationList("search");
}
},
closeModal() {
this.chooseList = []
this.chooseArray = []
this.$emit('closeModal')
},
handelOk() {
this.$emit('getChooseData',this.chooseList)
}
},
watch:{}
};
</script>
<style lang="less" scoped>
.gutter-example > .ant-row > div {
background: transparent;
border: 0;
}
.gutter-box {
width: 100%;
background: #00a0e9;
padding: 8px 0;
height: 349px;
background: #ffffff;
border-radius: 4px;
opacity: 1;
border: 1px solid #d9dadd;
overflow-y: auto;
overflow-x: hidden;
color: #272e3b;
.item-style {
padding: 0 8px;
margin: 8px 0 0;
width: 100%;
font-weight: 600;
}
.choose-title {
font-weight: 600;
height: 42px;
line-height: 42px;
padding: 0 8px;
}
.choose-item {
line-height: 30px;
font-weight: 600;
padding: 0 8px;
.close-style {
color: #d9dadd;
float: right;
cursor: pointer;
visibility: hidden;
}
&:hover {
background: #f6f9ff;
.close-style {
visibility: inherit;
}
}
}
}
</style>
基于antd-vue的简易穿梭框
最新推荐文章于 2022-09-27 14:23:18 发布