Ares.Lin
/
fineui-start
forked from Teller/fineui-start
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

测试多组单选下拉框，区分watermark和text

master
linyang3 3 years ago
parent
029d18e683
commit
13bee3aad4
11 changed files with 1096 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Gruntfile.js
  2. 6
      dist/bundle.css
  3. 756
      dist/bundle.js
  4. 3
      src/css/multilayer_single_tree_combo/main.css
  5. 3
      src/css/tree-single-chooser-combo/main.css
  6. 8
      src/index.js
  7. 12
      src/modules/multilayer_single_tree_combo/main.js
  8. 0
      src/modules/multilayer_single_tree_combo/main.less
  9. 142
      src/modules/tree-single-chooser-combo/main.js
  10. 3
      src/modules/tree-single-chooser-combo/main.less
  11. 316
      src/modules/tree-single-chooser-combo/tree.single.chooser.combo.js

2
Gruntfile.js
Unescape View File

@ -111,7 +111,7 @@ module.exports = function (grunt) {
grunt.loadNpmTasks("grunt-contrib-connect"); grunt.loadNpmTasks("grunt-contrib-connect");
grunt.registerTask("default", [ grunt.registerTask("default", [
"jshint", // "jshint",
"less", "less",
"concat", "concat",
"connect", "connect",

6
dist/bundle.css vendored
Unescape View File

@ -34,6 +34,9 @@
.my-todolist-background { .my-todolist-background {
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.bi-multilayer-single-tree-combo.bi-combo.combo-error {
border-color: red;
}
/** /**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
*/ */
@ -70,6 +73,9 @@
.my-todolist-background { .my-todolist-background {
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.dec-amiba-components-tree-single-chooser-combo.combo-error {
border-color: red;
}
.bi-multilayer-single-tree-combo.bi-combo.combo-error { .bi-multilayer-single-tree-combo.bi-combo.combo-error {
border-color: red; border-color: red;
} }

756
dist/bundle.js vendored
Unescape View File

@ -1,4 +1,193 @@
!(function() { !(function () {
/**
* 多层级单选树增加无效值时状态，使用BI.config覆盖原组件，只能调用一次
* 新增watermark参数，表示空默认值，不传默认值为请选择，注意不能替代text，只是为了跟text区分开，text现在包含空默认值和暂不可用值两种情况。
* value存在且不存在于items中，为无效值，文本框标红
* value不存在，text不为watermark时，为暂不可用值，文本框不变，去除水印
*/
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error";
var WATERMARK_CLASS = "bi-water-mark";
var WATERMARK = "请选择";
/**
* 判断是否是有效值
* @param {Object} config
* @param {String} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid (options, value) {
if (!BI.isObject(options)) {
return true;
}
value = value || options.value;
// null/undefined/空字符串作为空值
if (BI.isNull(value) || (value === "")) {
return true;
}
var items = options.items || [];
var itemIds = [];
// 获取id列表
BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
});
return BI.contains(itemIds, value);
}
/**
* 增加/去除标红className
* @param {Object} widget
* @param {String} value setValue传入的值
*/
function changeInvalidClassName (widget, value) {
if (!BI.isObject(widget)) {
return;
}
var combo = widget.combo;
var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
var options = widget.options;
var watermark = options.watermark || WATERMARK;
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
}
if (options.text !== watermark) {
trigger.removeClass(WATERMARK_CLASS);
}
}
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function () {
// 覆盖原setValue方法，调用原setValue前，修改样式
var _setValue = this.setValue;
this.setValue = function (value) {
_setValue.call(this, value);
changeInvalidClassName(this, value && value[0]);
};
// 立即触发一次样式变更，不需要传value
changeInvalidClassName(this);
}
});
return config;
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
{id: 12111, pId: 1211, value: "第五级文件1", text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function () {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
};
},
childContext: ["items"]
});
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function () {
return BI.Models.getModel("dec.amiba.test.tree.model");
},
props: {
baseCls: "fine-test-tree"
},
watch: {
items: function (items) {
console.log("items", items);
this.treeRef.populate(items);
},
value: function (v) {
console.log("value", v);
}
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function () {
// 测试增加树节点
var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value;
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("不存在的值");
}, 3000);
},
items: [
{
type: "bi.label",
textAlign: "left",
text: "叶子节点单选"
},
{
type: "bi.multilayer_single_tree_combo",
text: "无效值",
watermark: "请选择",
allowEdit: false,
items: self.model.items,
ref: function (ref) {
self.treeRef = ref;
},
width: 250,
value: self.model.value,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.model.value = self.treeRef.getValue()[0];
}
}]
}
]
};
}
});
BI.shortcut("dec.amiba.test.tree", TestTree);
})();!(function() {
/** /**
* 顶部组件,提供输入框添加todo项目 * 顶部组件,提供输入框添加todo项目
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中 * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
@ -279,183 +468,135 @@
})(); })();
!(function () { !(function () {
var originData = {
/** label: [
* 多层级单选树增加无效值时状态，使用BI.config覆盖原组件，只能调用一次 // "a7ed634a-0b59-4392-b92d-93a408803287"
* 新增defaultText参数，表示空默认值，不传默认值为请选择，注意不能替代text，只是为了跟text区分开，text现在包含空默认值和暂不可用值两种情况。 ],
* value存在且不存在于items中，为无效值，文本框标红 labels: [
* value不存在，text不为defaultText时，为暂不可用值，文本框不变，去除水印 {
*/ dimension: {
BI.config("bi.multilayer_single_tree_combo", function (config) { id: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
var ERROR_CLASS = "combo-error"; name: "部门",
var WATERMARK_CLASS = "bi-water-mark"; status: 1,
var DEFAULT_TEXT = "请选择"; description: null,
createTime: "2022-03-29 15:44:36.114"
/** },
* 判断是否是有效值 labels: [
* @param {Object} config {
* @param {String} value setValue传入的值 id: "85253c00-268c-4c77-a87d-6c532853ff1d",
* @returns {Boolean} name: "研发",
*/ description: null,
function isValueValid (options, value) { dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
if (!BI.isObject(options)) { createTime: "2022-03-29 15:45:18.348"
return true; },
} {
value = value || options.value; id: "f18d4479-9220-43f5-a696-b408b59c75c0",
name: "行政",
// null/undefined/空字符串作为空值 description: null,
if (BI.isNull(value) || (value === "")) { dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
return true; createTime: "2022-03-29 15:45:07.412"
} },
{
var items = options.items || []; id: "a7ed634a-0b59-4392-b92d-93a408803287",
var itemIds = []; name: "财务",
description: null,
// 获取id列表 dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
BI.each(items, function (i, item) { createTime: "2022-03-29 15:45:12.398"
item && item.value && itemIds.push(item.value); }
}); ]
return BI.contains(itemIds, value);
}
/**
* 增加/去除标红className
* @param {Object} widget
* @param {String} value setValue传入的值
*/
function changeInvalidClassName (widget, value) {
if (!BI.isObject(widget)) {
return;
}
var combo = widget.combo;
var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
var options = widget.options;
var defaultText = options.defaultText || DEFAULT_TEXT;
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
} }
]
};
if (options.text !== defaultText) {
trigger.removeClass(WATERMARK_CLASS);
}
}
var TestTreeSingleChooserModel = BI.inherit(Fix.Model, {
config.listeners = config.listeners || []; state: function () {
// 新增mount生命周期回调 // 所有标签
config.listeners.push({ var rawDimension = [], defaultDimension = {};
eventName: BI.Events.MOUNT, BI.each(originData.labels, function (i, item) {
action: function () { var temp = {
// 覆盖原setValue方法，调用原setValue前，修改样式 text: item.dimension.name,
var _setValue = this.setValue; value: item.dimension.id,
this.setValue = function (value) { children: BI.isNotEmptyArray(item.labels) ? BI.sortBy(BI.map(item.labels, function (i, label) {
_setValue.call(this, value); return {
changeInvalidClassName(this, value && value[0]); text: label.name,
value: label.id
};
}), [function (item) {
return BI.makeFirstPY(item["name"]);
}]) : []
}; };
rawDimension.push(temp);
});
rawDimension = BI.sortBy(rawDimension, [function (item) {
return BI.makeFirstPY(item["text"]);
}]);
!BI.isEmpty(defaultDimension) && rawDimension.unshift(defaultDimension);
console.log("state --> labels", rawDimension);
console.log("state --> label", originData.label);
// 立即触发一次样式变更，不需要传value
changeInvalidClassName(this);
}
});
return config;
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
{id: 12111, pId: 1211, value: "第五级文件1", text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function () {
return { return {
items: BI.deepClone(treeItems), labels: rawDimension,
value: "第三级文件1" label: originData.label
}; };
}, }
childContext: ["items"]
}); });
BI.model("dec.amiba.test.tree.model", TestTreeModel); BI.model("dec.amiba.test.tree.single.chooser.model", TestTreeSingleChooserModel);
var TestTree = BI.inherit(BI.Widget, {
var TestTreeSingleChooser = BI.inherit(BI.Widget, {
_store: function () { _store: function () {
return BI.Models.getModel("dec.amiba.test.tree.model"); return BI.Models.getModel("dec.amiba.test.tree.single.chooser.model");
},
props: {
baseCls: "fine-test-tree"
}, },
watch: { watch: {
items: function (items) { labels: function (v) {
console.log("items", items); console.log("labels", v);
this.treeRef.populate(items);
}, },
value: function (v) { label: function (v) {
console.log("value", v); console.log("label", v);
} }
}, },
mounted: function () {
var _this = this;
setTimeout(function () {
console.log("_this.dataLabelRef", _this.dataLabelRef);
_this.dataLabelRef.setValue(["a7ed634a-0b59-4392-b92d-93a408803287"]);
}, 3000);
},
render: function () { render: function () {
var self = this, o = this.options; var _this = this, o = this.options, m = this.model;
console.log("_this.label", _this);
return { return {
type: "bi.vertical", type: "bi.vertical",
height: 150, height: 150,
lgap: 20, lgap: 20,
tgap: 20, tgap: 20,
mounted: function () { mounted: function () {},
// 测试增加树节点
var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value;
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("不存在的值");
}, 3000);
},
items: [ items: [
{ {
type: "bi.label", type: "bi.label",
textAlign: "left", textAlign: "left",
text: "叶子节点单选" text: "层级单选下拉框"
}, },
{ {
type: "bi.multilayer_single_tree_combo", type: "dec.amiba.components.tree.single.chooser.combo",
watermark: "请选择",
text: "无效值", text: "无效值",
defaultText: "无效值", width: 300,
allowEdit: false, height: 32,
items: self.model.items, value: m.label,
items: m.labels,
ref: function (ref) { ref: function (ref) {
self.treeRef = ref; _this.dataLabelRef = ref;
}, },
width: 250,
value: self.model.value,
listeners: [{ listeners: [{
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: function () { action: function (value) {
self.model.value = self.treeRef.getValue()[0]; m.label = value;
} }
}] }]
} }
@ -464,7 +605,322 @@
} }
}); });
BI.shortcut("dec.amiba.test.tree", TestTree); BI.shortcut("dec.amiba.test.tree.single.chooser", TestTreeSingleChooser);
})();!(function () {
/**
* 组件说明：
* - 只支持两级展开
* - 第二级只允许单选
*
* 可用方法：
* setValue([] or '')
* getValue() => []
* populate() 刷新items
*
* 内部事件：
* EVENT_CHANGE，参数：value
*/
var SingleChooserPopup = BI.inherit(BI.Widget, {
props: function () {
return {
items: [],
value: [],
itemHeight: 32
};
},
mounted: function () {
BI.each(this.refGroupList, function (index, refGroup) {
refGroup.ref.element.hide();
});
},
render: function () {
var o = this.options;
var _this = this;
return {
type: "bi.button_group",
items: this._createItems(o.items),
layouts: [{
type: "bi.vertical",
vgap: 5
}],
ref: function (ref) {
_this.btnGroupRef = ref;
}
};
},
populate: function (items) {
this.btnGroupRef.populate(this._createItems(items));
},
getValue: function () {
var value = [];
BI.each(this.refGroupList, function (index, ref) {
BI.any(ref.selectRefs, function (index, selectRef) {
return (!BI.isNull(selectRef) && selectRef.isSelected()) ? (value.push(selectRef.getValue()), true) : false;
});
});
return value;
},
setValue: function (value) {
value = BI.isArray(value) ? value : [value];
BI.each(this.refGroupList, function (index, ref) {
BI.each(ref.selectRefs, function (index, selectRef) {
!BI.isNull(selectRef) && selectRef.setSelected(BI.contains(value, selectRef.getValue()));
});
});
},
_createItems: function (items) {
var o = this.options;
var _this = this;
this.refGroupList = BI.map(items, function () {
return {
ref: null,
selectRefs: []
};
});
if (BI.isNotEmptyArray(items)) {
return BI.map(items, function (index, item) {
var triggerRef = null;
return {
type: "bi.vertical",
items: [{
type: "bi.basic_button",
render: function () {
return {
type: "bi.htape",
cls: "bi-list-item",
height: o.itemHeight,
items: [{
width: 16,
lgap: 10,
el: {
type: "bi.icon_label",
baseCls: "fold-font",
height: o.itemHeight,
ref: function (ref) {
triggerRef = ref;
}
}
}, {
width: "fill",
lgap: 5,
el: {
type: "bi.label",
height: o.itemHeight,
text: item.text,
textAlign: "left"
}
}]
};
},
listeners: [{
eventName: "BasicButton.EVENT_CHANGE",
action: function () {
triggerRef.element.toggleClass("unfold-font fold-font");
_this.refGroupList[index].ref.element.toggle();
}
}]
}, {
el: {
type: "bi.button_group",
chooseType: BI.Selection.Multi,
ref: function (ref) {
_this.refGroupList[index].ref = ref;
},
items: BI.map(item.children, function (idx, child) {
return {
type: "bi.multi_select_item",
css: {
paddingLeft: "40px"
},
cls: "bi-list-item-active",
ref: function (ref) {
_this.refGroupList[index].selectRefs[idx] = ref;
},
height: o.itemHeight,
value: child.value,
text: child.text,
textLgap: 5,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
if (this.isSelected()) {
var self = this;
var ref = _this.refGroupList[index];
BI.each(ref.selectRefs, function (index, selectRef) {
if (self !== selectRef && selectRef.isSelected()) {
selectRef.setSelected(false);
}
});
}
_this.fireEvent("EVENT_CHANGE", _this.getValue());
}
}],
logic: {
dynamic: true
}
};
}),
layouts: [{
type: "bi.vertical"
}]
}
}]
};
});
}
return [{
type: "bi.label",
height: 25,
disabled: true,
text: BI.i18nText("Fine-Plugin_AMB_Component_No_Available_Select_Items")
}];
}
});
BI.shortcut("dec.amiba.components.single.chooser.popup", SingleChooserPopup);
/**
* value:
* [value, ...]
*
* items:
* [{
* text: '',
* value: '',
* children: [{
* text: '',
* value: ''
* }],
* ...
* }]
*/
var SingleChooserCombo = BI.inherit(BI.Widget, {
props: {
itemHeight: 32,
text: null, // 显示值，在显示值为无效值的情况下表现为水印样式
value: null, // 真实值，真实值为空的时候显示水印值
watermark: null, // 提示水印
baseCls: "dec-amiba-components-tree-single-chooser-combo"
},
mounted: function () {
var o = this.options;
this.setValue(o.value, true);
},
render: function () {
var o = this.options;
var _this = this;
return {
type: "bi.combo",
cls: "bi-border",
isDefaultInit: true,
adjustLength: 2,
el: {
type: "bi.text_trigger",
ref: function (ref) {
_this.triggerRef = ref;
},
height: o.height,
readonly: o.readonly,
tipType: o.tipType,
warningTitle: o.warningTitle
},
popup: {
maxHeight: 240,
minHeight: 25,
el: {
type: "bi.vertical",
items: [{
type: "dec.amiba.components.single.chooser.popup",
ref: function (ref) {
_this.popupRef = ref;
},
items: o.items,
value: o.value,
itemHeight: o.itemHeight,
listeners: [{
eventName: "EVENT_CHANGE",
action: function (value) {
_this._adjustText(value, false);
_this.fireEvent("EVENT_CHANGE", value);
}
}]
}]
}
}
};
},
/**
*
* @param {array} value 选中值
* @param {boolean}[optional] init 是否初始状态，mounted生命周期传true，其余传false或不传
*/
setValue: function (value, init) {
this._adjustText(value, init);
this.popupRef.setValue(value);
},
getValue: function () {
return this.popupRef.getValue();
},
populate: function (items) {
this.popupRef.populate(items);
},
_digest: function (value, init, items) {
var o = this.options;
var text = BI.isFunction(o.watermark) ? o.watermark() : o.watermark, textCls = "bi-water-mark";
value = BI.isArray(value) ? value : [value];
var result = [];
BI.each(items, function (i, item) {
BI.each(item.children, function (i, leafItem) {
if (BI.contains(value, leafItem.value)) {
result.push(leafItem.text);
}
});
});
var showError = false;
var valueText = result.length > 0 ? result.join(",") : BI.emptyStr;
if (init && BI.isNotEmptyString(o.text)) {
text = o.text;
if (BI.isEqual(text, valueText)) {
textCls = BI.emptyStr;
} else {
showError = true;
}
} else if (BI.isNotEmptyString(valueText)) {
text = valueText;
textCls = BI.emptyStr;
}
this._applyComboClass(showError);
return {
text: text,
textCls: textCls
};
},
/**
* 初始状态下，设置的显示值的优先级最高，根据真实值构造出来的文本值次之，水印文本最末
* 非初始状态下，显示值不再有效
*
* @param {*} value 真实值
* @param {*} init 是否为初始状态
*/
_adjustText: function (value, init) {
var o = this.options;
var digestObj = this._digest(value, init, o.items);
this.triggerRef.setText(digestObj.text);
this.triggerRef.setTextCls(digestObj.textCls);
},
// 切换下拉树控件样式
_applyComboClass: function (showError) {
if (showError) {
this.element.addClass("combo-error");
} else {
this.element.removeClass("combo-error");
}
}
});
BI.shortcut("dec.amiba.components.tree.single.chooser.combo", SingleChooserCombo);
})();!(function () { })();!(function () {
// 将todolist组件挂载到#wrapper上. // 将todolist组件挂载到#wrapper上.
@ -474,8 +930,14 @@
// }); // });
// 挂载下拉树测试组件 // 挂载下拉树测试组件
// BI.createWidget({
// type: "dec.amiba.test.tree",
// element: "#wrapper"
// });
// 挂载每组单选下拉框组件
BI.createWidget({ BI.createWidget({
type: "dec.amiba.test.tree", type: "dec.amiba.test.tree.single.chooser",
element: "#wrapper" element: "#wrapper"
}); });
})(); })();

3
src/css/multilayer_single_tree_combo/main.css
Unescape View File

@ -0,0 +1,3 @@
.bi-multilayer-single-tree-combo.bi-combo.combo-error {
border-color: red;
}

3
src/css/tree-single-chooser-combo/main.css
Unescape View File

@ -0,0 +1,3 @@
.dec-amiba-components-tree-single-chooser-combo.combo-error {
border-color: red;
}

8
src/index.js
Unescape View File

@ -6,8 +6,14 @@
// }); // });
// 挂载下拉树测试组件 // 挂载下拉树测试组件
// BI.createWidget({
// type: "dec.amiba.test.tree",
// element: "#wrapper"
// });
// 挂载每组单选下拉框组件
BI.createWidget({ BI.createWidget({
type: "dec.amiba.test.tree", type: "dec.amiba.test.tree.single.chooser",
element: "#wrapper" element: "#wrapper"
}); });
})(); })();

12
src/modules/tree/main.js → src/modules/multilayer_single_tree_combo/main.js
Unescape View File

@ -3,14 +3,14 @@
/** /**
* 多层级单选树增加无效值时状态，使用BI.config覆盖原组件，只能调用一次 * 多层级单选树增加无效值时状态，使用BI.config覆盖原组件，只能调用一次
* 新增defaultText参数，表示空默认值，不传默认值为请选择，注意不能替代text，只是为了跟text区分开，text现在包含空默认值和暂不可用值两种情况。 * 新增watermark参数，表示空默认值，不传默认值为请选择，注意不能替代text，只是为了跟text区分开，text现在包含空默认值和暂不可用值两种情况。
* value存在且不存在于items中，为无效值，文本框标红 * value存在且不存在于items中，为无效值，文本框标红
* value不存在，text不为defaultText时，为暂不可用值，文本框不变，去除水印 * value不存在，text不为watermark时，为暂不可用值，文本框不变，去除水印
*/ */
BI.config("bi.multilayer_single_tree_combo", function (config) { BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error"; var ERROR_CLASS = "combo-error";
var WATERMARK_CLASS = "bi-water-mark"; var WATERMARK_CLASS = "bi-water-mark";
var DEFAULT_TEXT = "请选择"; var WATERMARK = "请选择";
/** /**
* 判断是否是有效值 * 判断是否是有效值
@ -52,7 +52,7 @@
var combo = widget.combo; var combo = widget.combo;
var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element; var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
var options = widget.options; var options = widget.options;
var defaultText = options.defaultText || DEFAULT_TEXT; var watermark = options.watermark || WATERMARK;
if (isValueValid(options, value)) { if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS); combo && combo.element.removeClass(ERROR_CLASS);
@ -60,7 +60,7 @@
combo && combo.element.addClass(ERROR_CLASS); combo && combo.element.addClass(ERROR_CLASS);
} }
if (options.text !== defaultText) { if (options.text !== watermark) {
trigger.removeClass(WATERMARK_CLASS); trigger.removeClass(WATERMARK_CLASS);
} }
} }
@ -165,7 +165,7 @@
{ {
type: "bi.multilayer_single_tree_combo", type: "bi.multilayer_single_tree_combo",
text: "无效值", text: "无效值",
defaultText: "无效值", watermark: "请选择",
allowEdit: false, allowEdit: false,
items: self.model.items, items: self.model.items,
ref: function (ref) { ref: function (ref) {

0
src/modules/tree/main.less → src/modules/multilayer_single_tree_combo/main.less
Unescape View File

142
src/modules/tree-single-chooser-combo/main.js
Unescape View File

@ -0,0 +1,142 @@
!(function () {
var originData = {
label: [
// "a7ed634a-0b59-4392-b92d-93a408803287"
],
labels: [
{
dimension: {
id: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
name: "部门",
status: 1,
description: null,
createTime: "2022-03-29 15:44:36.114"
},
labels: [
{
id: "85253c00-268c-4c77-a87d-6c532853ff1d",
name: "研发",
description: null,
dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
createTime: "2022-03-29 15:45:18.348"
},
{
id: "f18d4479-9220-43f5-a696-b408b59c75c0",
name: "行政",
description: null,
dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
createTime: "2022-03-29 15:45:07.412"
},
{
id: "a7ed634a-0b59-4392-b92d-93a408803287",
name: "财务",
description: null,
dimensionId: "4ac8a4f8-5798-4c18-9cdf-9b1b9e7f9372",
createTime: "2022-03-29 15:45:12.398"
}
]
}
]
};
var TestTreeSingleChooserModel = BI.inherit(Fix.Model, {
state: function () {
// 所有标签
var rawDimension = [], defaultDimension = {};
BI.each(originData.labels, function (i, item) {
var temp = {
text: item.dimension.name,
value: item.dimension.id,
children: BI.isNotEmptyArray(item.labels) ? BI.sortBy(BI.map(item.labels, function (i, label) {
return {
text: label.name,
value: label.id
};
}), [function (item) {
return BI.makeFirstPY(item["name"]);
}]) : []
};
rawDimension.push(temp);
});
rawDimension = BI.sortBy(rawDimension, [function (item) {
return BI.makeFirstPY(item["text"]);
}]);
!BI.isEmpty(defaultDimension) && rawDimension.unshift(defaultDimension);
console.log("state --> labels", rawDimension);
console.log("state --> label", originData.label);
return {
labels: rawDimension,
label: originData.label
};
}
});
BI.model("dec.amiba.test.tree.single.chooser.model", TestTreeSingleChooserModel);
var TestTreeSingleChooser = BI.inherit(BI.Widget, {
_store: function () {
return BI.Models.getModel("dec.amiba.test.tree.single.chooser.model");
},
watch: {
labels: function (v) {
console.log("labels", v);
},
label: function (v) {
console.log("label", v);
}
},
mounted: function () {
var _this = this;
setTimeout(function () {
console.log("_this.dataLabelRef", _this.dataLabelRef);
_this.dataLabelRef.setValue(["a7ed634a-0b59-4392-b92d-93a408803287"]);
}, 3000);
},
render: function () {
var _this = this, o = this.options, m = this.model;
console.log("_this.label", _this);
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function () {},
items: [
{
type: "bi.label",
textAlign: "left",
text: "层级单选下拉框"
},
{
type: "dec.amiba.components.tree.single.chooser.combo",
watermark: "请选择",
text: "无效值",
width: 300,
height: 32,
value: m.label,
items: m.labels,
ref: function (ref) {
_this.dataLabelRef = ref;
},
listeners: [{
eventName: "EVENT_CHANGE",
action: function (value) {
m.label = value;
}
}]
}
]
};
}
});
BI.shortcut("dec.amiba.test.tree.single.chooser", TestTreeSingleChooser);
})();

3
src/modules/tree-single-chooser-combo/main.less
Unescape View File

@ -0,0 +1,3 @@
.dec-amiba-components-tree-single-chooser-combo&.combo-error{
border-color: red;
}

316
src/modules/tree-single-chooser-combo/tree.single.chooser.combo.js
Unescape View File

@ -0,0 +1,316 @@
!(function () {
/**
* 组件说明：
* - 只支持两级展开
* - 第二级只允许单选
*
* 可用方法：
* setValue([] or '')
* getValue() => []
* populate() 刷新items
*
* 内部事件：
* EVENT_CHANGE，参数：value
*/
var SingleChooserPopup = BI.inherit(BI.Widget, {
props: function () {
return {
items: [],
value: [],
itemHeight: 32
};
},
mounted: function () {
BI.each(this.refGroupList, function (index, refGroup) {
refGroup.ref.element.hide();
});
},
render: function () {
var o = this.options;
var _this = this;
return {
type: "bi.button_group",
items: this._createItems(o.items),
layouts: [{
type: "bi.vertical",
vgap: 5
}],
ref: function (ref) {
_this.btnGroupRef = ref;
}
};
},
populate: function (items) {
this.btnGroupRef.populate(this._createItems(items));
},
getValue: function () {
var value = [];
BI.each(this.refGroupList, function (index, ref) {
BI.any(ref.selectRefs, function (index, selectRef) {
return (!BI.isNull(selectRef) && selectRef.isSelected()) ? (value.push(selectRef.getValue()), true) : false;
});
});
return value;
},
setValue: function (value) {
value = BI.isArray(value) ? value : [value];
BI.each(this.refGroupList, function (index, ref) {
BI.each(ref.selectRefs, function (index, selectRef) {
!BI.isNull(selectRef) && selectRef.setSelected(BI.contains(value, selectRef.getValue()));
});
});
},
_createItems: function (items) {
var o = this.options;
var _this = this;
this.refGroupList = BI.map(items, function () {
return {
ref: null,
selectRefs: []
};
});
if (BI.isNotEmptyArray(items)) {
return BI.map(items, function (index, item) {
var triggerRef = null;
return {
type: "bi.vertical",
items: [{
type: "bi.basic_button",
render: function () {
return {
type: "bi.htape",
cls: "bi-list-item",
height: o.itemHeight,
items: [{
width: 16,
lgap: 10,
el: {
type: "bi.icon_label",
baseCls: "fold-font",
height: o.itemHeight,
ref: function (ref) {
triggerRef = ref;
}
}
}, {
width: "fill",
lgap: 5,
el: {
type: "bi.label",
height: o.itemHeight,
text: item.text,
textAlign: "left"
}
}]
};
},
listeners: [{
eventName: "BasicButton.EVENT_CHANGE",
action: function () {
triggerRef.element.toggleClass("unfold-font fold-font");
_this.refGroupList[index].ref.element.toggle();
}
}]
}, {
el: {
type: "bi.button_group",
chooseType: BI.Selection.Multi,
ref: function (ref) {
_this.refGroupList[index].ref = ref;
},
items: BI.map(item.children, function (idx, child) {
return {
type: "bi.multi_select_item",
css: {
paddingLeft: "40px"
},
cls: "bi-list-item-active",
ref: function (ref) {
_this.refGroupList[index].selectRefs[idx] = ref;
},
height: o.itemHeight,
value: child.value,
text: child.text,
textLgap: 5,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
if (this.isSelected()) {
var self = this;
var ref = _this.refGroupList[index];
BI.each(ref.selectRefs, function (index, selectRef) {
if (self !== selectRef && selectRef.isSelected()) {
selectRef.setSelected(false);
}
});
}
_this.fireEvent("EVENT_CHANGE", _this.getValue());
}
}],
logic: {
dynamic: true
}
};
}),
layouts: [{
type: "bi.vertical"
}]
}
}]
};
});
}
return [{
type: "bi.label",
height: 25,
disabled: true,
text: BI.i18nText("Fine-Plugin_AMB_Component_No_Available_Select_Items")
}];
}
});
BI.shortcut("dec.amiba.components.single.chooser.popup", SingleChooserPopup);
/**
* value:
* [value, ...]
*
* items:
* [{
* text: '',
* value: '',
* children: [{
* text: '',
* value: ''
* }],
* ...
* }]
*/
var SingleChooserCombo = BI.inherit(BI.Widget, {
props: {
itemHeight: 32,
text: null, // 显示值，在显示值为无效值的情况下表现为水印样式
value: null, // 真实值，真实值为空的时候显示水印值
watermark: null, // 提示水印
baseCls: "dec-amiba-components-tree-single-chooser-combo"
},
mounted: function () {
var o = this.options;
this.setValue(o.value, true);
},
render: function () {
var o = this.options;
var _this = this;
return {
type: "bi.combo",
cls: "bi-border",
isDefaultInit: true,
adjustLength: 2,
el: {
type: "bi.text_trigger",
ref: function (ref) {
_this.triggerRef = ref;
},
height: o.height,
readonly: o.readonly,
tipType: o.tipType,
warningTitle: o.warningTitle
},
popup: {
maxHeight: 240,
minHeight: 25,
el: {
type: "bi.vertical",
items: [{
type: "dec.amiba.components.single.chooser.popup",
ref: function (ref) {
_this.popupRef = ref;
},
items: o.items,
value: o.value,
itemHeight: o.itemHeight,
listeners: [{
eventName: "EVENT_CHANGE",
action: function (value) {
_this._adjustText(value, false);
_this.fireEvent("EVENT_CHANGE", value);
}
}]
}]
}
}
};
},
/**
*
* @param {array} value 选中值
* @param {boolean}[optional] init 是否初始状态，mounted生命周期传true，其余传false或不传
*/
setValue: function (value, init) {
this._adjustText(value, init);
this.popupRef.setValue(value);
},
getValue: function () {
return this.popupRef.getValue();
},
populate: function (items) {
this.popupRef.populate(items);
},
_digest: function (value, init, items) {
var o = this.options;
var text = BI.isFunction(o.watermark) ? o.watermark() : o.watermark, textCls = "bi-water-mark";
value = BI.isArray(value) ? value : [value];
var result = [];
BI.each(items, function (i, item) {
BI.each(item.children, function (i, leafItem) {
if (BI.contains(value, leafItem.value)) {
result.push(leafItem.text);
}
});
});
var showError = false;
var valueText = result.length > 0 ? result.join(",") : BI.emptyStr;
if (init && BI.isNotEmptyString(o.text)) {
text = o.text;
if (BI.isEqual(text, valueText)) {
textCls = BI.emptyStr;
} else {
showError = true;
}
} else if (BI.isNotEmptyString(valueText)) {
text = valueText;
textCls = BI.emptyStr;
}
this._applyComboClass(showError);
return {
text: text,
textCls: textCls
};
},
/**
* 初始状态下，设置的显示值的优先级最高，根据真实值构造出来的文本值次之，水印文本最末
* 非初始状态下，显示值不再有效
*
* @param {*} value 真实值
* @param {*} init 是否为初始状态
*/
_adjustText: function (value, init) {
var o = this.options;
var digestObj = this._digest(value, init, o.items);
this.triggerRef.setText(digestObj.text);
this.triggerRef.setTextCls(digestObj.textCls);
},
// 切换下拉树控件样式
_applyComboClass: function (showError) {
if (showError) {
this.element.addClass("combo-error");
} else {
this.element.removeClass("combo-error");
}
}
});
BI.shortcut("dec.amiba.components.tree.single.chooser.combo", SingleChooserCombo);
})();
Write Preview
Loading…
Cancel
Save