iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
293 lines (266 loc) • 7.82 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _rkWebIcon = require('rk-web-icon');
var _configConsumerProps = require('../config-provider/configConsumerProps');
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _momentUtil = require('../_util/moment-util');
var _lodash = require('lodash');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var dateEnum = {
minute: '分钟',
hour: '小时',
day: '日',
week: '周',
month: '月',
year: '年'
};
exports['default'] = {
name: 'IepPanelPicker',
props: {
prefixCls: _vueTypes2['default'].string,
pickerVisible: _vueTypes2['default'].bool.def(true),
value: _momentUtil.TimesType,
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
mode: _vueTypes2['default'].oneOf(['minute', 'hour', 'day', 'week', 'month', 'year']).def('minute'),
type: {
type: Array,
'default': function _default() {
return ['minute', 'hour', 'day', 'week', 'month', 'year'];
}
}
},
model: {
prop: 'value'
},
inject: {
configProvider: { 'default': function _default() {
return _configConsumerProps.ConfigConsumerProps;
} }
},
data: function data() {
return {
select: 'minute',
panelValue: undefined,
panelType: {
minute: '分钟',
hour: '小时',
day: '日',
week: '周',
month: '月',
year: '年'
}
};
},
watch: {
type: {
handler: function handler(e) {
var panelType = {};
if (e && !(0, _lodash.isEmpty)(e)) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = Object.entries(dateEnum)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _ref = _step.value;
var _ref2 = (0, _slicedToArray3['default'])(_ref, 2);
var k = _ref2[0];
var v = _ref2[1];
if (this.type.includes(k)) {
panelType[k] = v;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator['return']) {
_iterator['return']();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
this.panelType = panelType;
this.select = this.type.includes(this.mode) ? this.mode : Object.keys(panelType)[0];
this.$emit('mode', this.select);
} else {
this.panelType = dateEnum;
this.select = this.mode;
this.$emit('mode', this.mode);
}
},
immediate: true
},
value: {
handler: function handler(e) {
this.panelValue = e;
}
},
mode: {
handler: function handler(e) {
this.select = e;
}
}
},
created: function created() {
this.panelValue = this.value;
},
methods: {
handleTap: function handleTap(e) {
this.select = e.tag;
this.$emit('mode', e.tag);
},
onChange: function onChange(val) {
this.panelValue = val;
this.$emit('change', val);
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var props = this.$props,
select = this.select;
var customizePrefixCls = props.prefixCls,
theme = props.theme;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('panel-picker', customizePrefixCls);
var wrapperCls = (0, _classnames2['default'])([prefixCls, prefixCls + '-' + theme]);
var leftNodes = Object.keys(this.panelType).map(function (item) {
return {
tag: item,
text: _this.panelType[item]
};
}).map(function (item) {
var itemCls = (0, _classnames2['default'])([prefixCls + '-left-item', item.tag === select ? prefixCls + '-left-item-active' : '']);
return h(
'div',
{ 'class': itemCls, on: {
'click': function click() {
return _this.handleTap(item);
}
}
},
[item.tag === select ? h(_rkWebIcon.IepIcon, {
attrs: { type: 'basic_linear_common_time' }
}) : null, h('span', [item.text])]
);
});
var rightNodes = function rightNodes() {
switch (select) {
case 'minute':
return h('a-range-picker', {
attrs: {
showTime: true,
format: 'YYYY-MM-DD HH:mm',
picker: 'datetime',
allowClear: false,
value: _this.panelValue
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
case 'hour':
return h('a-range-picker', {
attrs: {
showTime: true,
format: 'YYYY-MM-DD HH:00',
picker: 'datetime',
allowClear: false,
value: _this.panelValue
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
case 'day':
return h('a-range-picker', {
attrs: {
picker: 'datetime',
format: 'YYYY-MM-DD',
allowClear: false,
value: _this.panelValue
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
case 'week':
return h('a-range-picker', {
attrs: {
picker: 'week',
allowClear: false,
value: _this.panelValue
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
case 'month':
return h('a-range-picker', {
attrs: {
picker: 'month',
allowClear: false,
value: _this.panelValue
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
case 'year':
return h('a-range-picker', {
attrs: {
picker: 'year',
allowClear: false,
value: _this.panelValue,
format: 'YYYY\u5E74'
},
on: {
'change': function change(e) {
return _this.onChange(e);
}
}
});
}
};
return h(
'div',
{ 'class': wrapperCls },
[h(
'div',
{ 'class': prefixCls + '-left' },
[leftNodes]
), this.$props.pickerVisible ? h(
'div',
{ 'class': [prefixCls + '-right', prefixCls + '-' + select + '-right'] },
[h(_rkWebIcon.IepIcon, {
attrs: { type: 'basic_linear_common_calendar' }
}), h(
'span',
{ 'class': prefixCls + '-right-date' },
[rightNodes()]
)]
) : null]
);
}
};