修改bug
parent
12016f1b34
commit
070cc2e7c2
@ -0,0 +1,48 @@
|
||||
<div id="transfer-app">
|
||||
<div id="transfer">
|
||||
<div class="tra-left">
|
||||
<div class="tra-header">
|
||||
<div class="tra-header-left"><i class="tra-pointer" :class="selectIconLeft" @click="allInitSelect" aria-hidden="true"></i></div>
|
||||
<div class="tra-header-center">全部成员</div>
|
||||
<div class="tra-header-right">{{leftSelectNum}} / {{initNum}}</div>
|
||||
</div>
|
||||
<div class="tra-search">
|
||||
<input type="text" class="form-control" v-model="traLeftInput"/>
|
||||
<span class="fa fa-search searchicon" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="tra-content" v-show="!leftEmpty">
|
||||
<div class="tra-item" v-for="item in initList" v-if="item.isSearch">
|
||||
<i class="tra-pointer tra-icon fa" :class="item.type ? 'fa-check-square-o':'fa-square-o'" @click="selectLeft(item.id)" aria-hidden="true"></i>
|
||||
<span>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tra-empty-content" v-show="leftEmpty">
|
||||
无数据
|
||||
</div>
|
||||
</div>
|
||||
<div class="tra-center">
|
||||
<button class="btn" type="button" @click="toRight" :disabled="leftDisabled" :class="leftDisabled ? '': 'btn-primary'"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
|
||||
<button class="btn" type="button" @click="toLeft" :disabled="rightDisabled" :class="rightDisabled ? '': 'btn-primary'"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div class="tra-right">
|
||||
<div class="tra-header">
|
||||
<div class="tra-header-left"><i class="tra-pointer" :class="selectIconRight" @click="allTargetSelect" aria-hidden="true"></i></div>
|
||||
<div class="tra-header-center">选中成员</div>
|
||||
<div class="tra-header-right">{{rightSelectNum}} / {{targetNum}}</div>
|
||||
</div>
|
||||
<div class="tra-search">
|
||||
<input type="text" class="form-control" v-model="traRightInput"/>
|
||||
<span class="fa fa-search searchicon" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="tra-content" v-show="!rightEmpty">
|
||||
<div class="tra-item" v-for="item in targetList" v-if="item.isSearch">
|
||||
<i class="tra-pointer tra-icon fa" :class="item.type ? 'fa-check-square-o':'fa-square-o'" @click="selectRight(item.id)" aria-hidden="true"></i>
|
||||
<span>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tra-empty-content" v-show="rightEmpty">
|
||||
无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,128 @@
|
||||
|
||||
/*穿梭框*/
|
||||
|
||||
#transfer{
|
||||
display: flex;
|
||||
height: 300px;
|
||||
}
|
||||
.tra-left,.tra-right{
|
||||
border: 1px solid #cecece;
|
||||
flex: 1;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tra-center{
|
||||
width: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tra-center button{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.tra-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
background: #F9FAFC;
|
||||
}
|
||||
.tra-header-left{
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.tra-header-center{
|
||||
flex: 1;
|
||||
}
|
||||
.tra-header-right{
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.tra-icon{
|
||||
width: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tra-tab{
|
||||
height: 35px;
|
||||
border: 1px solid #cecece;
|
||||
display: flex;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.activeBottom{
|
||||
border-bottom: 2px solid #2D8CF0!important;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.tra-tab-pic{
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 2px solid #fff;
|
||||
/*box-sizing: border-box;*/
|
||||
}
|
||||
.tra-search{
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.searchicon{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
.tra-content{
|
||||
padding: 0 15px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tra-empty-content{
|
||||
padding: 0 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tra-item{
|
||||
height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tra-item span{
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tra-pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
.tra-content::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 4px;
|
||||
}
|
||||
.tra-content::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.tra-content::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@ -0,0 +1,217 @@
|
||||
var vm = new Vue({
|
||||
el:'#transfer-app',
|
||||
data:{
|
||||
initList:[],//初始化数据
|
||||
initNum:0,//初始化数据总数
|
||||
targetList:[],//目标数据
|
||||
targetNum:0,//目标数据总数
|
||||
leftSelectNum:0,//左侧选中数据
|
||||
rightSelectNum:0,//右侧选中数据
|
||||
traLeftInput:'',//左边输入框数值
|
||||
traRightInput:'',//右边输入框数值
|
||||
leftEmpty:false,//左侧数据为空
|
||||
rightEmpty:false,//左侧数据为空
|
||||
selectIconLeft:"fa fa-square-o",
|
||||
selectIconRight:"fa fa-square-o",
|
||||
leftDisabled:true,
|
||||
rightDisabled:true,
|
||||
leftActive:1,
|
||||
rightActive:1
|
||||
},
|
||||
mounted:function(){
|
||||
this.init();
|
||||
},
|
||||
watch:{
|
||||
traLeftInput:function (newVal,oldVal) {
|
||||
this.initList.map((item)=>{
|
||||
if(item.name.indexOf(newVal)!=-1){
|
||||
item.isSearch=true
|
||||
}else{
|
||||
item.isSearch=false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
traRightInput:function (newVal,oldVal) {
|
||||
this.targetList.map((item)=>{
|
||||
if(item.name.indexOf(newVal)!=-1){
|
||||
item.isSearch=true
|
||||
}else{
|
||||
item.isSearch=false
|
||||
}
|
||||
})
|
||||
},
|
||||
initList:{
|
||||
handler:function (newVal,oldVal) {
|
||||
var len=newVal.filter(item=>item.type);
|
||||
if(len.length>0){
|
||||
this.leftDisabled=false;
|
||||
}else{
|
||||
this.leftDisabled=true;
|
||||
}
|
||||
|
||||
//计算初始化数据长度
|
||||
this.initNum=newVal.length;
|
||||
|
||||
//计算选中数据长度
|
||||
this.leftSelectNum=newVal.filter(item=>item.type).length;
|
||||
|
||||
//判断数据是否为空
|
||||
if(newVal.length>0){
|
||||
this.leftEmpty=false
|
||||
}else{
|
||||
this.leftEmpty=true
|
||||
}
|
||||
|
||||
},
|
||||
deep:true
|
||||
},
|
||||
targetList:{
|
||||
handler:function (newVal,oldVal) {
|
||||
var len=newVal.filter(item=>item.type);
|
||||
if(len.length>0){
|
||||
this.rightDisabled=false;
|
||||
}else{
|
||||
this.rightDisabled=true;
|
||||
}
|
||||
|
||||
//计算初始化数据长度
|
||||
this.targetNum=newVal.length;
|
||||
|
||||
//计算选中数据长度
|
||||
this.rightSelectNum=newVal.filter(item=>item.type).length;
|
||||
|
||||
//判断数据是否为空
|
||||
if(newVal.length>0){
|
||||
this.rightEmpty=false;
|
||||
}else{
|
||||
this.rightEmpty=true;
|
||||
}
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
init:function(){
|
||||
this.getInitList();
|
||||
},
|
||||
allInitSelect:function () {
|
||||
if(this.selectIconLeft=="fa fa-square-o"){
|
||||
this.selectIconLeft="fa fa-check-square-o";
|
||||
this.initList.map(item=>{item.type=true})
|
||||
}else{
|
||||
this.selectIconLeft="fa fa-square-o";
|
||||
this.initList.map(item=>{item.type=false});
|
||||
}
|
||||
},//左侧全选
|
||||
allTargetSelect:function () {
|
||||
if(this.selectIconRight=="fa fa-square-o"){
|
||||
this.selectIconRight="fa fa-check-square-o";
|
||||
this.targetList.map(item=>{item.type=true})
|
||||
}else{
|
||||
this.selectIconRight="fa fa-square-o";
|
||||
this.targetList.map(item=>{item.type=false});
|
||||
}
|
||||
},//右侧全选
|
||||
getInitList:function () {
|
||||
this.initList = [];
|
||||
// this.initList=[];
|
||||
this.targetList=[];
|
||||
this.initList=this.sortByName(this.initList,'name');
|
||||
},
|
||||
selectLeft:function (id) {
|
||||
this.initList.map((item)=>{
|
||||
if(item.id==id){
|
||||
item.type=!item.type
|
||||
}
|
||||
})
|
||||
},
|
||||
selectRight:function (id) {
|
||||
this.targetList.map((item)=>{
|
||||
if(item.id==id){
|
||||
item.type=!item.type
|
||||
}
|
||||
})
|
||||
},
|
||||
toRight:function () {
|
||||
var selArr=this.initList.filter(item=>item.type);
|
||||
var noSelArr=this.initList.filter(item=>!item.type);
|
||||
this.initList=noSelArr;
|
||||
this.targetList=this.targetList.concat(selArr);
|
||||
|
||||
//对目标数据进行重新排序
|
||||
if(this.rightActive==1){
|
||||
this.targetList=this.sortByName(this.targetList,'name');
|
||||
}else{
|
||||
this.targetList=this.sortByNumber(this.targetList,'number');
|
||||
}
|
||||
|
||||
//将目标数据设置为未选中
|
||||
this.targetList.map(item=>{(item.type=false)})
|
||||
|
||||
|
||||
},
|
||||
toLeft:function () {
|
||||
var selArr=this.targetList.filter(item=>item.type);
|
||||
var noSelArr=this.targetList.filter(item=>!item.type);
|
||||
this.targetList=noSelArr;
|
||||
this.initList=this.initList.concat(selArr);
|
||||
|
||||
//对初始数据进行重新排序，并将设置为未选中
|
||||
if(this.leftActive==1){
|
||||
this.initList=this.sortByName(this.initList,'name');
|
||||
}else{
|
||||
this.initList=this.sortByNumber(this.initList,'number');
|
||||
}
|
||||
|
||||
//将初始数据设置为未选中
|
||||
this.initList.map(item=>{(item.type=false)})
|
||||
|
||||
},
|
||||
changeLeftTab:function (num) {
|
||||
this.leftActive=num;
|
||||
if(num==1){
|
||||
this.initList=this.sortByName(this.initList,'name');
|
||||
}else{
|
||||
this.initList=this.sortByNumber(this.initList,'number');
|
||||
}
|
||||
},
|
||||
changeRightTab:function (num) {
|
||||
this.rightActive=num;
|
||||
if(num==1){
|
||||
this.targetList=this.sortByName(this.targetList,'name');
|
||||
}else{
|
||||
this.targetList=this.sortByNumber(this.targetList,'number');
|
||||
}
|
||||
},
|
||||
sortByName:function (arr,type) {
|
||||
return arr.sort((a,b)=>{
|
||||
return (a[type].localeCompare(b[type]))
|
||||
})
|
||||
},
|
||||
sortByNumber:function (arr,type) {
|
||||
return arr.sort((a,b)=>{
|
||||
return (a[type]-b[type]>0)
|
||||
})
|
||||
},
|
||||
getTargetIds() {
|
||||
let ids = []
|
||||
for (let i in this.targetList) {
|
||||
ids.push(this.targetList[i].id)
|
||||
}
|
||||
return ids
|
||||
},
|
||||
save:function(){
|
||||
if(this.targetList.length){
|
||||
let result=[];
|
||||
this.targetList.map(item=>{
|
||||
return result.push(item.name)
|
||||
})
|
||||
alert('获取的值为:'+result.join(','))
|
||||
}else{
|
||||
alert("获取值为空")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue