87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
import BaseComponent from './basic-component';
|
|
import { computed } from '@ember/object';
|
|
import { alias } from '@ember/object/computed';
|
|
import { addObserver } from '@ember/object/observers';
|
|
import { assign } from '@ember/polyfills';
|
|
|
|
export default BaseComponent.extend({
|
|
tagName: 'a',
|
|
attributeBindings: ['title', 'data-original-title', 'role', 'data-rel'],
|
|
role: 'button',
|
|
'data-rel': 'tooltip',
|
|
'enabled-text': '启用',
|
|
enabledText: alias('enabled-text'),
|
|
'disabled-text': '禁用',
|
|
disabledText: alias('disabled-text'),
|
|
'enabled-op': 'enable',
|
|
enabledOp: alias('enabled-op'),
|
|
'disabled-op': 'disable',
|
|
disabledOp: alias('disabled-op'),
|
|
'enabled-icon': 'fa-ban',
|
|
'disabled-icon': 'fa-check',
|
|
'enabled-class': 'btn-warning',
|
|
'disabled-class': 'btn-success',
|
|
field: 'active',
|
|
title: computed('enabled', function() {
|
|
const me = this;
|
|
return me.get('enabled') ?
|
|
me.get('disabled-text') :
|
|
me.get('enabled-text');
|
|
}),
|
|
'data-original-title': alias('title'),
|
|
'iconOnly': alias('icon-only'),
|
|
op: computed('enabled', function() {
|
|
const me = this;
|
|
return me.get('enabled') ?
|
|
me.get('disabled-op') || me.get('disabled-text')
|
|
: me.get('enabled-op') || me.get('enabled-text');
|
|
}),
|
|
'icon-size-class': '',
|
|
iconSizeClass: alias('icon-size-class'),
|
|
didReceiveAttrs() {
|
|
const me = this;
|
|
// me.enabled = alias('model.' + me.get('field'));
|
|
const field = me.getFieldPath();
|
|
me.set('enabled', me.get(field));
|
|
addObserver(me, field, function() {
|
|
me.set('enabled', me.get(field));
|
|
});
|
|
|
|
if (me.get('icon-only')) {
|
|
me.setProperties({
|
|
'icon-size-class': 'bigger-130',
|
|
'classNameBindings': ['enabled:orange:light-green']
|
|
});
|
|
}
|
|
else {
|
|
me.setProperties({
|
|
classNames: ['btn', 'btn-xs'],
|
|
classNameBindings: [
|
|
['enabled',
|
|
me.get('enabled-class'),
|
|
me.get('disabled-class')].join(':')]
|
|
});
|
|
}
|
|
},
|
|
click() {
|
|
const me = this;
|
|
const onClick = me.get('on-click');
|
|
onClick ? onClick() : me.doUpdate();
|
|
},
|
|
doUpdate() {
|
|
const me = this;
|
|
me.get('dialog').confirm('确认要' + me.get('title') + '吗？', () => {
|
|
const model = me.get('model');
|
|
const value = !me.get('enabled');
|
|
me.set('model.' + me.get('field'), value);
|
|
me.get('service').ajaxPost('update-field',
|
|
assign({id: model.id, field: me.get('field'), value: value},
|
|
me.get('params') || {}));
|
|
});
|
|
},
|
|
getFieldPath() {
|
|
const me = this;
|
|
return 'model.' + (me.get('field') || 'enabled');
|
|
}
|
|
});
|