iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
256 lines (242 loc) • 7.32 kB
JavaScript
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Scrollbar from "../scrollbar";
import Checkbox from "../checkbox";
import Input from "../input";
import { cloneDeep, isEmpty } from "lodash";
import Empty from '../empty';
export default {
name: 'IepSundryTransfer',
model: {
prop: 'value',
event: 'change'
},
props: {
value: PropTypes.value,
dataSource: PropTypes.array,
title: PropTypes.string.def('请选择'),
placeholder: PropTypes.string.def('请输入')
},
inject: {
configProvider: { 'default': function _default() {
return ConfigConsumerProps;
} }
},
data: function data() {
return {
localSelectKeys: [],
tempSelectKeys: [],
localDataSource: [],
targetDataSource: [],
isAllChecked: false,
localSearchContent: undefined
};
},
watch: {
dataSource: {
handler: function handler(e) {
this.localDataSource = cloneDeep(e);
},
immediate: true
},
value: {
handler: function handler(e) {
this.localSelectKeys = e;
this.listenTarget();
},
immediate: true,
deep: true
}
},
methods: {
listenTarget: function listenTarget() {
var _this = this;
if (!isEmpty(this.localSelectKeys)) {
this.targetDataSource = this.$props.dataSource.filter(function (item) {
return _this.localSelectKeys.includes(item.key);
});
} else {
this.targetDataSource = [];
}
this.isAllChecked = this.targetDataSource.length === this.$props.dataSource.length;
},
handleChange: function handleChange(e) {
this.tempSelectKeys = e;
this.localSelectKeys = e;
this.isAllChecked = this.localSelectKeys.length === this.$props.dataSource.length;
this.listenTarget();
this.$emit('change', this.localSelectKeys);
},
handleAllChecked: function handleAllChecked() {
this.isAllChecked = !this.isAllChecked;
this.localSelectKeys = this.isAllChecked ? this.$props.dataSource.map(function (item) {
return item.key;
}) : [];
this.listenTarget();
this.$emit('change', this.localSelectKeys);
},
handleInputChange: function handleInputChange(e) {
var value = e.target.value;
var data = cloneDeep(this.dataSource);
this.localSearchContent = value;
if (!isEmpty(value)) {
this.localDataSource = data.filter(function (item) {
return item.title.includes(value);
});
} else {
this.localDataSource = data;
}
},
handleClear: function handleClear(e) {
var selectKeysIndex = this.localSelectKeys.findIndex(function (item) {
return item === e.key;
});
if (selectKeysIndex > -1) {
this.localSelectKeys.splice(selectKeysIndex, 1);
}
var targetIndex = this.targetDataSource.findIndex(function (item) {
return item.key === e.key;
});
if (targetIndex > -1) {
this.targetDataSource.splice(targetIndex, 1);
}
this.listenTarget();
this.$emit('change', this.localSelectKeys);
}
},
render: function render() {
var _this2 = this;
var h = arguments[0];
var customizePrefixCls = this.prefixCls,
$props = this.$props,
localSelectKeys = this.localSelectKeys,
isAllChecked = this.isAllChecked,
localDataSource = this.localDataSource,
localSearchContent = this.localSearchContent,
targetDataSource = this.targetDataSource;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('iep-sundry-transfer', customizePrefixCls);
var title = $props.title,
placeholder = $props.placeholder,
dataSource = $props.dataSource;
var checkboxVNodes = localDataSource.map(function (item) {
return h(
'div',
{ 'class': prefixCls + '-footer-item-footer-item' },
[h(
Checkbox,
{
attrs: { value: item.key }
},
[item.title]
)]
);
});
var targetVNodes = !isEmpty(targetDataSource) ? targetDataSource.map(function (item) {
return h(
'div',
{ 'class': prefixCls + '-select-item' },
[h(
'div',
{ 'class': prefixCls + '-select-item-text' },
[item.title]
), h(
'div',
{ 'class': prefixCls + '-select-item-btn', on: {
'click': function click() {
return _this2.handleClear(item);
}
}
},
[h('a-iep-icon', {
attrs: { type: 'basic_linear_button_close', color: '#CCCCCC', 'font-size': 20 }
})]
)]
);
}) : h(Empty);
return h(
'div',
{ 'class': prefixCls },
[h(
'div',
{ 'class': prefixCls + '-header' },
[h(
'div',
{ 'class': prefixCls + '-header-text' },
[h(
Checkbox,
{
attrs: { checked: isAllChecked },
on: {
'change': function change() {
return _this2.handleAllChecked();
}
}
},
[title]
)]
), h(
'div',
{ 'class': prefixCls + '-header-tag' },
[localSelectKeys.length, '/', dataSource.length]
)]
), h(
'div',
{ 'class': prefixCls + '-footer' },
[h(
'div',
{ 'class': prefixCls + '-footer-item' },
[h(
'div',
{ 'class': prefixCls + '-footer-item-header' },
[h(Input.Search, {
attrs: { placeholder: placeholder, value: localSearchContent
},
on: {
'change': function change(e) {
return _this2.handleInputChange(e);
}
}
})]
), h(
'div',
{ 'class': prefixCls + '-footer-item-footer' },
[h(Scrollbar, [h(
Checkbox.Group,
{
attrs: { value: localSelectKeys },
on: {
'change': function change(e) {
return _this2.handleChange(e);
}
}
},
[h(
'div',
{ 'class': prefixCls + '-footer-item-footer-inner' },
[checkboxVNodes]
)]
)])]
)]
), h(
'div',
{ 'class': prefixCls + '-footer-item' },
[h(
'div',
{ 'class': [prefixCls + '-footer-item-header', prefixCls + '-footer-item-header-text'] },
['\u5DF2\u9009\u62E9', localSelectKeys.length, '\u6761']
), h(
'div',
{ 'class': prefixCls + '-footer-item-footer' },
[h(Scrollbar, [h(
'div',
{
'class': [prefixCls + '-footer-item-footer-inner', isEmpty(targetDataSource) ? prefixCls + '-footer-item-footer-inner-empty' : ''] },
[targetVNodes]
)])]
)]
)]
)]
);
}
};