empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
|
|
@ -1,2 +0,0 @@
|
|||
import Transfer from './transfer.vue';
|
||||
export default Transfer;
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style">
|
||||
<div :class="prefixCls + '-header'">
|
||||
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
|
||||
<span>{{ 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.sync="query"
|
||||
:placeholder="filterPlaceholder"></Search>
|
||||
</div>
|
||||
<ul :class="prefixCls + '-content'">
|
||||
<li
|
||||
v-for="item in showItems | filterBy filterData"
|
||||
:class="itemClasses(item)"
|
||||
@click.prevent="select(item)">
|
||||
<Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
|
||||
<span>{{{ showLabel(item) }}}</span>
|
||||
</li>
|
||||
<li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="prefixCls + '-footer'" v-if="showFooter" v-el:footer><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from './search.vue';
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
|
||||
export default {
|
||||
components: { Search, Checkbox },
|
||||
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: '',
|
||||
showFooter: true
|
||||
};
|
||||
},
|
||||
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.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
|
||||
},
|
||||
checkedAllDisabled () {
|
||||
return this.data.filter(data => !data.disabled).length <= 0;
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
updateFilteredData () {
|
||||
this.showItems = this.data;
|
||||
},
|
||||
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();
|
||||
|
||||
},
|
||||
compiled () {
|
||||
this.showFooter = this.$els.footer.innerHTML !== '';
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.updateFilteredData();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<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 {
|
||||
components: { iButton, Icon },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
operations: Array,
|
||||
leftActive: Boolean,
|
||||
rightActive: Boolean
|
||||
},
|
||||
methods: {
|
||||
moveToLeft () {
|
||||
this.$parent.moveTo('left');
|
||||
},
|
||||
moveToRight () {
|
||||
this.$parent.moveTo('right');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<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 {
|
||||
components: { iInput },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
placeholder: String,
|
||||
query: String
|
||||
},
|
||||
computed: {
|
||||
icon () {
|
||||
return this.query === '' ? 'ios-search' : 'ios-close';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.query === '') return;
|
||||
this.query = '';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
<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';
|
||||
import { t } from '../../locale';
|
||||
|
||||
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 [t('i.transfer.titles.source'), t('i.transfer.titles.target')];
|
||||
}
|
||||
},
|
||||
operations: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterPlaceholder: {
|
||||
type: String,
|
||||
default () {
|
||||
return t('i.transfer.filterPlaceholder');
|
||||
}
|
||||
},
|
||||
filterMethod: {
|
||||
type: Function,
|
||||
default (data, query) {
|
||||
const type = ('label' in data) ? 'label' : 'key';
|
||||
return data[type].indexOf(query) > -1;
|
||||
}
|
||||
},
|
||||
notFoundText: {
|
||||
type: String,
|
||||
default () {
|
||||
return t('i.transfer.notFoundText');
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
targetKeys () {
|
||||
this.splitData(false);
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.splitData(true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue