update the master branch to the latest
This commit is contained in:
梁灏
parent
67d534df27
commit
23a0ba9831
611 changed files with 122648 additions and 0 deletions
2
src/components/transfer/index.js
Normal file
2
src/components/transfer/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Transfer from './transfer.vue';
|
||||
export default Transfer;
|
||||
139
src/components/transfer/list.vue
Normal file
139
src/components/transfer/list.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div :class="classes" :style="listStyle">
|
||||
<div :class="prefixCls + '-header'">
|
||||
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
|
||||
<span :class="prefixCls + '-header-title'" @click="toggleSelectAll(!checkedAll)">{{ title }}</span>
|
||||
<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="query"
|
||||
@on-query-clear="handleQueryClear"
|
||||
@on-query-change="handleQueryChange"
|
||||
:placeholder="filterPlaceholder"></Search>
|
||||
</div>
|
||||
<ul :class="prefixCls + '-content'">
|
||||
<li
|
||||
v-for="item in filterData"
|
||||
:class="itemClasses(item)"
|
||||
@click.prevent="select(item)">
|
||||
<Checkbox :value="isCheck(item)" :disabled="item.disabled"></Checkbox>
|
||||
<span v-html="showLabel(item)"></span>
|
||||
</li>
|
||||
<li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="prefixCls + '-footer'" v-if="showFooter"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from './search.vue';
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
|
||||
export default {
|
||||
name: 'TransferList',
|
||||
components: { Search, Checkbox },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
data: Array,
|
||||
renderFormat: Function,
|
||||
checkedKeys: Array,
|
||||
listStyle: Object,
|
||||
title: [String, Number],
|
||||
filterable: Boolean,
|
||||
filterPlaceholder: String,
|
||||
filterMethod: Function,
|
||||
notFoundText: String,
|
||||
validKeysCount: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showItems: [],
|
||||
query: '',
|
||||
showFooter: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.updateFilteredData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}`,
|
||||
{
|
||||
[`${this.prefixCls}-with-footer`]: this.showFooter
|
||||
}
|
||||
];
|
||||
},
|
||||
bodyClasses () {
|
||||
return [
|
||||
`${this.prefixCls}-body`,
|
||||
{
|
||||
[`${this.prefixCls}-body-with-search`]: this.filterable,
|
||||
[`${this.prefixCls}-body-with-footer`]: this.showFooter
|
||||
}
|
||||
];
|
||||
},
|
||||
count () {
|
||||
const validKeysCount = this.validKeysCount;
|
||||
return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}`;
|
||||
},
|
||||
checkedAll () {
|
||||
return this.filterData.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
|
||||
},
|
||||
checkedAllDisabled () {
|
||||
return this.filterData.filter(data => !data.disabled).length <= 0;
|
||||
},
|
||||
filterData () {
|
||||
return this.showItems.filter(item => this.filterMethod(item, this.query));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClasses (item) {
|
||||
return [
|
||||
`${this.prefixCls}-content-item`,
|
||||
{
|
||||
[`${this.prefixCls}-content-item-disabled`]: item.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
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);
|
||||
this.$parent.handleCheckedKeys();
|
||||
},
|
||||
updateFilteredData () {
|
||||
this.showItems = this.data;
|
||||
},
|
||||
toggleSelectAll (status) {
|
||||
const keys = status ?
|
||||
this.filterData.filter(data => !data.disabled || this.checkedKeys.indexOf(data.key) > -1).map(data => data.key) :
|
||||
this.filterData.filter(data => data.disabled && this.checkedKeys.indexOf(data.key) > -1).map(data => data.key);
|
||||
this.$emit('on-checked-keys-change', keys);
|
||||
},
|
||||
handleQueryClear () {
|
||||
this.query = '';
|
||||
},
|
||||
handleQueryChange (val) {
|
||||
this.query = val;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.updateFilteredData();
|
||||
},
|
||||
mounted () {
|
||||
this.showFooter = this.$slots.default !== undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
33
src/components/transfer/operation.vue
Normal file
33
src/components/transfer/operation.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div :class="prefixCls + '-operation'">
|
||||
<i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
|
||||
<Icon type="ios-arrow-back"></Icon> <span>{{ operations[0] }}</span>
|
||||
</i-button>
|
||||
<i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
|
||||
<span>{{ operations[1] }}</span> <Icon type="ios-arrow-forward"></Icon>
|
||||
</i-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../button/button.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
|
||||
export default {
|
||||
name: 'Operation',
|
||||
components: { iButton, Icon },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
operations: Array,
|
||||
leftActive: Boolean,
|
||||
rightActive: Boolean
|
||||
},
|
||||
methods: {
|
||||
moveToLeft () {
|
||||
this.$parent.moveTo('left');
|
||||
},
|
||||
moveToRight () {
|
||||
this.$parent.moveTo('right');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
48
src/components/transfer/search.vue
Normal file
48
src/components/transfer/search.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<i-input
|
||||
v-model="currentQuery"
|
||||
size="small"
|
||||
:icon="icon"
|
||||
:placeholder="placeholder"
|
||||
@on-click="handleClick"></i-input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: { iInput },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
placeholder: String,
|
||||
query: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentQuery: this.query
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
query (val) {
|
||||
this.currentQuery = val;
|
||||
},
|
||||
currentQuery (val) {
|
||||
this.$emit('on-query-change', val);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon () {
|
||||
return this.query === '' ? 'ios-search' : 'ios-close-circle';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.currentQuery === '') return;
|
||||
this.currentQuery = '';
|
||||
this.$emit('on-query-clear');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
260
src/components/transfer/transfer.vue
Normal file
260
src/components/transfer/transfer.vue
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
<script>
|
||||
import List from './list.vue';
|
||||
import Operation from './operation.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-transfer';
|
||||
|
||||
export default {
|
||||
name: 'Transfer',
|
||||
mixins: [ Emitter, Locale ],
|
||||
render (h) {
|
||||
|
||||
function cloneVNode (vnode) {
|
||||
const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode));
|
||||
const cloned = h(vnode.tag, vnode.data, clonedChildren);
|
||||
cloned.text = vnode.text;
|
||||
cloned.isComment = vnode.isComment;
|
||||
cloned.componentOptions = vnode.componentOptions;
|
||||
cloned.elm = vnode.elm;
|
||||
cloned.context = vnode.context;
|
||||
cloned.ns = vnode.ns;
|
||||
cloned.isStatic = vnode.isStatic;
|
||||
cloned.key = vnode.key;
|
||||
|
||||
return cloned;
|
||||
}
|
||||
|
||||
const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
|
||||
const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
|
||||
|
||||
return h('div', {
|
||||
'class': this.classes
|
||||
}, [
|
||||
h(List, {
|
||||
ref: 'left',
|
||||
props: {
|
||||
prefixCls: this.prefixCls + '-list',
|
||||
data: this.leftData,
|
||||
renderFormat: this.renderFormat,
|
||||
checkedKeys: this.leftCheckedKeys,
|
||||
validKeysCount: this.leftValidKeysCount,
|
||||
listStyle: this.listStyle,
|
||||
title: this.localeTitles[0],
|
||||
filterable: this.filterable,
|
||||
filterPlaceholder: this.localeFilterPlaceholder,
|
||||
filterMethod: this.filterMethod,
|
||||
notFoundText: this.localeNotFoundText
|
||||
},
|
||||
on: {
|
||||
'on-checked-keys-change': this.handleLeftCheckedKeysChange
|
||||
}
|
||||
}, vNodes),
|
||||
|
||||
h(Operation, {
|
||||
props: {
|
||||
prefixCls: this.prefixCls,
|
||||
operations: this.operations,
|
||||
leftActive: this.leftValidKeysCount > 0,
|
||||
rightActive: this.rightValidKeysCount > 0
|
||||
}
|
||||
}),
|
||||
|
||||
h(List, {
|
||||
ref: 'right',
|
||||
props: {
|
||||
prefixCls: this.prefixCls + '-list',
|
||||
data: this.rightData,
|
||||
renderFormat: this.renderFormat,
|
||||
checkedKeys: this.rightCheckedKeys,
|
||||
validKeysCount: this.rightValidKeysCount,
|
||||
listStyle: this.listStyle,
|
||||
title: this.localeTitles[1],
|
||||
filterable: this.filterable,
|
||||
filterPlaceholder: this.localeFilterPlaceholder,
|
||||
filterMethod: this.filterMethod,
|
||||
notFoundText: this.localeNotFoundText
|
||||
},
|
||||
on: {
|
||||
'on-checked-keys-change': this.handleRightCheckedKeysChange
|
||||
}
|
||||
}, clonedVNodes)
|
||||
]);
|
||||
},
|
||||
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
|
||||
},
|
||||
operations: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterPlaceholder: {
|
||||
type: String
|
||||
},
|
||||
filterMethod: {
|
||||
type: Function,
|
||||
default (data, query) {
|
||||
const type = ('label' in data) ? 'label' : 'key';
|
||||
return data[type].indexOf(query) > -1;
|
||||
}
|
||||
},
|
||||
notFoundText: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
leftData: [],
|
||||
rightData: [],
|
||||
leftCheckedKeys: [],
|
||||
rightCheckedKeys: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`
|
||||
];
|
||||
},
|
||||
leftValidKeysCount () {
|
||||
return this.getValidKeys('left').length;
|
||||
},
|
||||
rightValidKeysCount () {
|
||||
return this.getValidKeys('right').length;
|
||||
},
|
||||
localeFilterPlaceholder () {
|
||||
if (this.filterPlaceholder === undefined) {
|
||||
return this.t('i.transfer.filterPlaceholder');
|
||||
} else {
|
||||
return this.filterPlaceholder;
|
||||
}
|
||||
},
|
||||
localeNotFoundText () {
|
||||
if (this.notFoundText === undefined) {
|
||||
return this.t('i.transfer.notFoundText');
|
||||
} else {
|
||||
return this.notFoundText;
|
||||
}
|
||||
},
|
||||
localeTitles () {
|
||||
if (this.titles === undefined) {
|
||||
return [this.t('i.transfer.titles.source'), this.t('i.transfer.titles.target')];
|
||||
} else {
|
||||
return this.titles;
|
||||
}
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
const filteredData = this.leftData.filter((data, index) => {
|
||||
if (data.key === targetKey) {
|
||||
this.leftData.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
if (filteredData && filteredData.length > 0) this.rightData.push(filteredData[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);
|
||||
this.dispatch('FormItem', 'on-form-change', {
|
||||
tarketKeys: newTargetKeys,
|
||||
direction: direction,
|
||||
moveKeys: moveKeys
|
||||
});
|
||||
},
|
||||
handleLeftCheckedKeysChange (keys) {
|
||||
this.leftCheckedKeys = keys;
|
||||
},
|
||||
handleRightCheckedKeysChange (keys) {
|
||||
this.rightCheckedKeys = keys;
|
||||
},
|
||||
handleCheckedKeys () {
|
||||
const sourceSelectedKeys = this.getValidKeys('left');
|
||||
const targetSelectedKeys = this.getValidKeys('right');
|
||||
this.$emit('on-selected-change', sourceSelectedKeys, targetSelectedKeys);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
targetKeys () {
|
||||
this.splitData(false);
|
||||
},
|
||||
data () {
|
||||
this.splitData(false);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.splitData(true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue