<template>
<div class="transfer">
<div class="candidate">
<div class="header">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>候选人</el-checkbox>
</div>
<div class="body-list">
<el-input placeholder="请输入内容" v-model="searchText" @keyup.native.enter="searchAction">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClick"></i>
</el-input>
<div v-if="searchResult.length > 0" class="scroll">
<el-scrollbar style="height:100%">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item of searchResult" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else class="scroll">
<el-scrollbar style="height:100%">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
</div>
</div>
<div class="operation">
<el-button @click="addressee">收件人</el-button>
<el-button @click="copyListBtn">抄送人</el-button>
<el-button @click="removeItems">移除</el-button>
</div>
<div class="addressee">
<div class="header">
<el-checkbox
:indeterminate="isIndeterminateAddressee"
v-model="checkAllAddressee"
@change="handleCheckAllChangeAddressee"
>收件人</el-checkbox>
</div>
<div class="body-list">
<el-input
placeholder="请输入内容"
v-model="searchTextAddressee"
@keyup.native.enter="searchActionAddressee"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClickAddressee"></i>
</el-input>
<div v-if="searchResultAddressee.length > 0" class="scroll">
<el-scrollbar style="height:100%">
<el-checkbox-group
v-model="checkedCitiesAddressee"
@change="handleCheckedCitiesChangeAddressee"
>
<el-checkbox v-for="item of searchResultAddressee" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else class="scroll">
<el-scrollbar style="height:100%" v-if="addresseeList.length > 0">
<el-checkbox-group
v-model="checkedCitiesAddressee"
@change="handleCheckedCitiesChangeAddressee"
>
<el-checkbox v-for="city in addresseeList" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
<div class="no-addressee">暂无数据</div>
</div>
</div>
</div>
<div class="copylist">
<div class="header">
<el-checkbox
:indeterminate="isIndeterminateCopylist"
v-model="checkAllCopylist"
@change="handleCheckAllChangeCopylist"
>抄送人</el-checkbox>
</div>
<div class="body-list">
<el-input
placeholder="请输入内容"
v-model="searchTextCopylist"
@keyup.native.enter="searchActionCopylist"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClickCopylist"></i>
</el-input>
<div v-if="searchResultCopylist.length > 0" class="scroll">
<el-scrollbar style="height:100%">
<el-checkbox-group
v-model="checkedCitiesCopylist"
@change="handleCheckedCitiesChangeCopylist"
>
<el-checkbox v-for="item of searchResultCopylist" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
<div v-else class="scroll">
<el-scrollbar style="height:100%">
<el-checkbox-group
v-model="checkedCitiesCopylist"
@change="handleCheckedCitiesChangeCopylist"
>
<el-checkbox v-for="city in copyList" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
searchText: "",
searchResult: [],
checkAll: false,
isIndeterminate: false,
cityOptions: [
"上海 shanghai@pa.com",
"北京 shanghai@pa.com",
"广州 shanghai@pa.com",
"深圳 shanghai@pa.com",
"四川 shanghai@pa.com",
"广被 shanghai@pa.com",
"海南 shanghai@pa.com",
"海口 shanghai@pa.com"
],
checkedCities: [],
searchTextAddressee: "",
searchResultAddressee: [],
checkAllAddressee: false,
isIndeterminateAddressee: false,
addresseeList: [],
checkedCitiesAddressee: [],
searchTextCopylist: "",
searchResultCopylist: [],
checkAllCopylist: false,
isIndeterminateCopylist: false,
copyList: [],
checkedCitiesCopylist: []
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cityOptions.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cityOptions.length;
},
handleIconClick() {
this.searchText = "";
this.searchResult = [];
},
searchAction(e) {
this.searchResult = this.cityOptions.filter(item => {
if (item.includes(e.target.value)) {
console.log(item);
return item;
}
});
},
addressee() {
if (this.checkedCities.length != 0) {
this.addresseeList.push(...this.checkedCities);
this.checkedCities = [];
this.cityOptions = this.cityOptions.filter(item => {
return this.addresseeList.indexOf(item) == -1;
});
this.isIndeterminate = false;
this.checkAll = false;
this.searchResult = [];
this.searchText = "";
}
},
handleCheckAllChangeAddressee(val) {
this.checkedCitiesAddressee = val ? this.addresseeList : [];
this.isIndeterminateAddressee = false;
},
handleCheckedCitiesChangeAddressee(value) {
let checkedCount = value.length;
this.checkAllAddressee = checkedCount === this.addresseeList.length;
this.isIndeterminateAddressee =
checkedCount > 0 && checkedCount < this.addresseeList.length;
},
handleIconClickAddressee() {
this.searchTextAddressee = "";
this.searchResultAddressee = [];
},
searchActionAddressee(e) {
this.searchResultAddressee = this.addresseeList.filter(item => {
if (item.includes(e.target.value)) {
console.log(item);
return item;
}
});
},
handleCheckAllChangeCopylist(val) {
this.checkedCitiesCopylist = val ? this.copyList : [];
this.isIndeterminateCopylist = false;
},
handleCheckedCitiesChangeCopylist(value) {
let checkedCount = value.length;
this.checkAllCopylist = checkedCount === this.copyList.length;
this.isIndeterminateCopylist =
checkedCount > 0 && checkedCount < this.copyList.length;
},
handleIconClickCopylist() {
this.searchTextCopylist = "";
this.searchResultCopylist = [];
},
copyListBtn() {
if (this.checkedCities.lenght != 0) {
this.copyList.push(...this.checkedCities);
this.checkedCities = [];
this.cityOptions = this.cityOptions.filter(item => {
return this.copyList.indexOf(item) == -1;
});
this.searchResult = this.searchResult.filter(item => {
return this.searchResult.indexOf(item) == -1;
});
this.isIndeterminate = false;
this.checkAll = false;
this.searchResult = [];
this.searchText = ""
}
},
searchActionCopylist(e) {
this.searchResultCopylist = this.copyList.filter(item => {
if (item.includes(e.target.value)) {
console.log(item);
return item;
}
});
},
removeItems() {
if (
this.checkedCitiesAddressee.length > 0 ||
this.checkedCitiesCopylist.length > 0
) {
this.cityOptions.unshift(
...this.checkedCitiesAddressee,
...this.checkedCitiesCopylist
);
this.addresseeList = this.addresseeList.filter(item => {
return this.checkedCitiesAddressee.indexOf(item) == -1;
});
this.copyList = this.copyList.filter(item => {
return this.checkedCitiesCopylist.indexOf(item) == -1;
});
this.checkedCitiesAddressee = [];
this.checkedCitiesCopylist = [];
this.isIndeterminateAddressee = false;
this.isIndeterminateCopylist = false;
this.checkAllAddressee = false;
this.checkAllCopylist = false;
this.searchTextCopylist = "";
this.searchResultCopylist = [];
this.searchTextAddressee = "";
this.searchResultAddressee = [];
}
}
}
};
</script>
<style lang="less" scoped>
.transfer {
display: flex;
.copylist {
margin-left: 20px;
}
.operation {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
.el-button {
margin: 4px 10px;
}
}
.candidate,
.addressee,
.copylist {
width: 300px;
height: 250px;
border: 1px solid #ccc;
// display: flex;
.header {
width: 300px;
height: 40px;
background: #ccc;
padding-left: 20px;
line-height: 40px;
box-sizing: border-box;
}
.body-list {
width: 300px;
height: 200px;
.scroll {
height: 160px;
overflow: hidden;
margin-top: 10px;
.no-addressee {
text-align: center;
padding-top: 50px;
color: #ccc;
}
}
::v-deep .el-input__inner,
.el-input {
height: 30px;
width: 280px;
margin: 5px 0 0 5px;
line-height: 30px;
}
::v-deep .el-checkbox-group {
display: flex;
flex-direction: column;
margin: 10px 0 0 20px;
.el-checkbox {
margin-bottom: 8px;
}
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
// overflow: hidden;
}
}
}
}
</style>