support Transfer
support Transfer
This commit is contained in:
梁灏
parent
191068ac0c
commit
5b19b5f55f
8 changed files with 198 additions and 55 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style">
|
||||
<div :class="prefixCls + '-header'">
|
||||
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
|
||||
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
|
||||
<span>{{ title }}</span>
|
||||
<span :class="prefixCls + '-header-count'">{{ count }}</span>
|
||||
</div>
|
||||
|
|
@ -9,21 +9,23 @@
|
|||
<div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
|
||||
<Search
|
||||
:prefix-cls="prefixCls + '-search'"
|
||||
:query.sync="query"
|
||||
:query="query"
|
||||
@on-query-clear="handleQueryClear"
|
||||
@on-query-change="handleQueryChange"
|
||||
:placeholder="filterPlaceholder"></Search>
|
||||
</div>
|
||||
<ul :class="prefixCls + '-content'">
|
||||
<li
|
||||
v-for="item in showItems | filterBy filterData"
|
||||
v-for="item in filterData"
|
||||
:class="itemClasses(item)"
|
||||
@click.prevent="select(item)">
|
||||
<Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
|
||||
<span>{{{ showLabel(item) }}}</span>
|
||||
<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" v-el:footer><slot></slot></div>
|
||||
<div :class="prefixCls + '-footer'" v-if="showFooter"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -31,6 +33,7 @@
|
|||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
|
||||
export default {
|
||||
name: 'TransferList',
|
||||
components: { Search, Checkbox },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
|
|
@ -52,6 +55,11 @@
|
|||
showFooter: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.updateFilteredData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
|
|
@ -79,6 +87,9 @@
|
|||
},
|
||||
checkedAllDisabled () {
|
||||
return this.data.filter(data => !data.disabled).length <= 0;
|
||||
},
|
||||
filterData () {
|
||||
return this.showItems.filter(item => this.filterMethod(item, this.query));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -105,25 +116,23 @@
|
|||
this.showItems = this.data;
|
||||
},
|
||||
toggleSelectAll (status) {
|
||||
this.checkedKeys = status ?
|
||||
const keys = 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);
|
||||
this.$emit('on-checked-keys-change', keys);
|
||||
},
|
||||
filterData (value) {
|
||||
return this.filterMethod(value, this.query);
|
||||
handleQueryClear () {
|
||||
this.query = '';
|
||||
},
|
||||
handleQueryChange (val) {
|
||||
this.query = val;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.updateFilteredData();
|
||||
|
||||
},
|
||||
compiled () {
|
||||
this.showFooter = this.$els.footer.innerHTML !== '';
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.updateFilteredData();
|
||||
}
|
||||
mounted () {
|
||||
this.showFooter = this.$slots.default !== undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div :class="prefixCls + '-operation'">
|
||||
<i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
|
||||
<i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
|
||||
<Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
|
||||
</i-button>
|
||||
<i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
|
||||
<i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
|
||||
{{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
|
||||
</i-button>
|
||||
</div>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
import Icon from '../icon/icon.vue';
|
||||
|
||||
export default {
|
||||
name: 'Operation',
|
||||
components: { iButton, Icon },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<i-input
|
||||
:value.sync="query"
|
||||
v-model="currentQuery"
|
||||
size="small"
|
||||
:icon="icon"
|
||||
:placeholder="placeholder"
|
||||
|
|
@ -12,12 +12,26 @@
|
|||
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';
|
||||
|
|
@ -25,17 +39,19 @@
|
|||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.query === '') return;
|
||||
this.query = '';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
if (this.currentQuery === '') return;
|
||||
this.currentQuery = '';
|
||||
this.$emit('on-query-clear');
|
||||
}
|
||||
}
|
||||
// todo 事件
|
||||
// events: {
|
||||
// 'on-form-blur' () {
|
||||
// return false;
|
||||
// },
|
||||
// 'on-form-change' () {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<List
|
||||
v-ref:left
|
||||
ref="left"
|
||||
:prefix-cls="prefixCls + '-list'"
|
||||
:data="leftData"
|
||||
:render-format="renderFormat"
|
||||
:checked-keys.sync="leftCheckedKeys"
|
||||
:valid-keys-count.sync="leftValidKeysCount"
|
||||
:checked-keys="leftCheckedKeys"
|
||||
@on-checked-keys-change="handleLeftCheckedKeysChange"
|
||||
:valid-keys-count="leftValidKeysCount"
|
||||
:style="listStyle"
|
||||
:title="titles[0]"
|
||||
:filterable="filterable"
|
||||
|
|
@ -19,19 +20,20 @@
|
|||
:operations="operations"
|
||||
:left-active="leftValidKeysCount > 0"
|
||||
:right-active="rightValidKeysCount > 0"></Operation><List
|
||||
v-ref:right
|
||||
ref="right"
|
||||
:prefix-cls="prefixCls + '-list'"
|
||||
:data="rightData"
|
||||
:render-format="renderFormat"
|
||||
:checked-keys.sync="rightCheckedKeys"
|
||||
:valid-keys-count.sync="rightValidKeysCount"
|
||||
:checked-keys="rightCheckedKeys"
|
||||
@on-checked-keys-change="handleRightCheckedKeysChange"
|
||||
:valid-keys-count="rightValidKeysCount"
|
||||
:style="listStyle"
|
||||
:title="titles[1]"
|
||||
:filterable="filterable"
|
||||
:filter-placeholder="filterPlaceholder"
|
||||
:filter-method="filterMethod"
|
||||
:not-found-text="notFoundText">
|
||||
<slot></slot>
|
||||
<slot name="right"></slot>
|
||||
</List>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -177,7 +179,14 @@
|
|||
|
||||
this.$refs[opposite].toggleSelectAll(false);
|
||||
this.$emit('on-change', newTargetKeys, direction, moveKeys);
|
||||
this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
|
||||
},
|
||||
handleLeftCheckedKeysChange (keys) {
|
||||
this.leftCheckedKeys = keys;
|
||||
},
|
||||
handleRightCheckedKeysChange (keys) {
|
||||
this.rightCheckedKeys = keys;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import Tag from './components/tag';
|
|||
import Timeline from './components/timeline';
|
||||
// import TimePicker from './components/time-picker';
|
||||
import Tooltip from './components/tooltip';
|
||||
// import Transfer from './components/transfer';
|
||||
import Transfer from './components/transfer';
|
||||
import Tree from './components/tree';
|
||||
import Upload from './components/upload';
|
||||
import { Row, Col } from './components/grid';
|
||||
|
|
@ -107,7 +107,7 @@ const iview = {
|
|||
TimelineItem: Timeline.Item,
|
||||
// TimePicker,
|
||||
Tooltip,
|
||||
// Transfer,
|
||||
Transfer,
|
||||
Tree,
|
||||
Upload
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue