drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Transfer component

Browse source 
add Transfer component
This commit is contained in:
梁灏 2016-11-18 11:46:55 +08:00
parent 306e3f74e8
commit 77f7bb9533
15 changed files with 519 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/transfer/index.js Normal file
View file

@ -0,0 +1,2 @@
import Transfer from './transfer.vue';
export default Transfer;

108
src/components/transfer/list.vue Normal file
View file

@ -0,0 +1,108 @@
<template>
<div :class="prefixCls" :style="style">
<div :class="prefixCls + '-header'">
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox>
<span :class="prefixCls + '-header-count'">{{ count }}</span>
</div>
<div :class="bodyClasses">
<div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
<Search
:prefix-cls="prefixCls + '-search'"
:query.sync="query"
:placeholder="filterPlaceholder"></Search>
</div>
<ul :class="prefixCls + '-content'" v-if="showItems.length">
<li
v-for="item in showItems | filterBy filterData"
:class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]"
@click.prevent="select(item)"><Checkbox :checked="isCheck(item)" :disabled="item.disabled">{{ showLabel(item) }}</Checkbox></li>
</ul>
<div :class="prefixCls + '-body-not-found'" v-else>{{ notFoundText }}</div>
</div>
<div :class="prefixCls + '-footer'">
<slot></slot>
</div>
</div>
</template>
<script>
import Search from './search.vue';
import Checkbox from '../checkbox/checkbox.vue';
export default {
components: { Search, Checkbox },
// filters: { filterData: this.filterData },
props: {
prefixCls: String,
data: Array,
renderFormat: Function,
checkedKeys: Array,
style: Object,
title: [String, Number],
filterable: Boolean,
filterPlaceholder: String,
filterMethod: Function,
notFoundText: String,
validKeysCount: Number
},
data () {
return {
showItems: [],
query: ''
}
},
computed: {
bodyClasses () {
return [
`${this.prefixCls}-body`,
{
[`${this.prefixCls}-body-with-search`]: this.filterable
}
]
},
count () {
const validKeysCount = this.validKeysCount;
return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}条`;
},
checkedAll () {
return this.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
},
checkedAllDisabled () {
return this.data.filter(data => !data.disabled).length <= 0;
}
},
methods: {
showLabel (item) {
return this.renderFormat(item);
},
isCheck (item) {
return this.checkedKeys.some(key => key === item.key);
},
select (item) {
if (item.disabled) return;
const index = this.checkedKeys.indexOf(item.key);
index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
},
updateFilteredData () {
this.showItems = this.data.map(item => {
return item;
})
},
toggleSelectAll (status) {
this.checkedKeys = status ?
this.data.filter(data => !data.disabled || this.checkedKeys.indexOf(data.key) > -1).map(data => data.key) :
this.data.filter(data => data.disabled && this.checkedKeys.indexOf(data.key) > -1).map(data => data.key);
},
filterData (value) {
return this.filterMethod(value, this.query);
}
},
created () {
this.updateFilteredData();
},
watch: {
data () {
this.updateFilteredData();
}
}
}
</script>

31
src/components/transfer/operation.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div :class="prefixCls + '-operation'">
<i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
<Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
</i-button>
<i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
{{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
</i-button>
</div>
</template>
<script>
import iButton from '../button/button.vue';
import Icon from '../icon/icon.vue';
export default {
props: {
prefixCls: String,
operations: Array,
leftActive: Boolean,
rightActive: Boolean
},
methods: {
moveToLeft () {
this.$parent.moveTo('left');
},
moveToRight () {
this.$parent.moveTo('right');
}
}
}
</script>

32
src/components/transfer/search.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<div :class="prefixCls">
<i-input
:value.sync="query"
size="small"
:icon="icon"
:placeholder="placeholder"
@on-click="handleClick"></i-input>
</div>
</template>
<script>
import iInput from '../input/input.vue';
export default {
props: {
prefixCls: String,
placeholder: String,
query: String
},
computed: {
icon () {
return this.query === '' ? 'ios-search' : 'ios-close';
}
},
methods: {
handleClick () {
if (this.query === '') return;
this.query = '';
}
}
}
</script>

186
src/components/transfer/transfer.vue Normal file
View file

@ -0,0 +1,186 @@
<template>
<div :class="classes">
<List
v-ref:left
:prefix-cls="prefixCls + '-list'"
:data="leftData"
:render-format="renderFormat"
:checked-keys.sync="leftCheckedKeys"
:valid-keys-count.sync="leftValidKeysCount"
:style="listStyle"
:title="titles[0]"
:filterable="filterable"
:filter-placeholder="filterPlaceholder"
:filter-method="filterMethod"
:not-found-text="notFoundText">
<slot></slot>
</List><Operation
:prefix-cls="prefixCls"
:operations="operations"
:left-active="leftValidKeysCount > 0"
:right-active="rightValidKeysCount > 0"></Operation><List
v-ref:right
:prefix-cls="prefixCls + '-list'"
:data="rightData"
:render-format="renderFormat"
:checked-keys.sync="rightCheckedKeys"
:valid-keys-count.sync="rightValidKeysCount"
:style="listStyle"
:title="titles[1]"
:filterable="filterable"
:filter-placeholder="filterPlaceholder"
:filter-method="filterMethod"
:not-found-text="notFoundText">
<slot></slot>
</List>
</div>
</template>
<script>
import List from './list.vue';
import Operation from './operation.vue';
const prefixCls = 'ivu-transfer';
export default {
components: { List, Operation },
props: {
data: {
type: Array,
default () {
return []
}
},
renderFormat: {
type: Function,
default (item) {
return item.label || item.key;
}
},
targetKeys: {
type: Array,
default () {
return []
}
},
selectedKeys: {
type: Array,
default () {
return []
}
},
listStyle: {
type: Object,
default () {
return {}
}
},
titles: {
type: Array,
default () {
return ['源列表', '目的列表']
}
},
operations: {
type: Array,
default () {
return []
}
},
filterable: {
type: Boolean,
default: false
},
filterPlaceholder: {
type: String,
default: '请输入搜索内容'
},
filterMethod: {
type: Function,
default (data, query) {
const type = ('label' in data) ? 'label' : 'key';
return data[type].indexOf(query) > -1;
}
},
notFoundText: {
type: String,
default: '列表为空'
}
},
data () {
return {
prefixCls: prefixCls,
leftData: [],
rightData: [],
leftCheckedKeys: [],
rightCheckedKeys: []
}
},
computed: {
classes () {
return [
`${prefixCls}`
]
},
leftValidKeysCount () {
return this.getValidKeys('left').length;
},
rightValidKeysCount () {
return this.getValidKeys('right').length;
}
},
methods: {
getValidKeys (direction) {
return this[`${direction}Data`].filter(data => !data.disabled && this[`${direction}CheckedKeys`].indexOf(data.key) > -1).map(data => data.key);
},
splitData (init = false) {
this.leftData = [...this.data];
this.rightData = [];
if (this.targetKeys.length > 0) {
this.targetKeys.forEach((targetKey) => {
this.rightData.push(
this.leftData.filter((data, index) => {
if (data.key === targetKey) {
this.leftData.splice(index, 1);
return true;
}
return false;
})[0]);
});
}
if (init) {
this.splitSelectedKey();
}
},
splitSelectedKey () {
const selectedKeys = this.selectedKeys;
if (selectedKeys.length > 0) {
this.leftCheckedKeys = this.leftData
.filter(data => selectedKeys.indexOf(data.key) > -1)
.map(data => data.key);
this.rightCheckedKeys = this.rightData
.filter(data => selectedKeys.indexOf(data.key) > -1)
.map(data => data.key);
}
},
moveTo (direction) {
const targetKeys = this.targetKeys;
const opposite = direction === 'left' ? 'right' : 'left';
const moveKeys = this.getValidKeys(opposite);
const newTargetKeys = direction === 'right' ?
moveKeys.concat(targetKeys) :
targetKeys.filter(targetKey => !moveKeys.some(checkedKey => targetKey === checkedKey));
this.$refs[opposite].toggleSelectAll(false);
this.$emit('on-change', newTargetKeys, direction, moveKeys);
}
},
watch: {
targetKeys () {
this.splitData(false);
}
},
created () {
this.splitData(true);
}
}
</script>