forked from fanruan/fineui-start
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
9.7 KiB
277 lines
9.7 KiB
6 years ago
|
!(function () {
|
||
|
var ToDoListHeader = BI.inherit(BI.Widget, {
|
||
|
|
||
|
props: {
|
||
|
baseCls: "my-todolist-header"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this, o = this.options;
|
||
|
return {
|
||
|
type: "bi.horizontal_auto",
|
||
|
items: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.left_right_vertical_adapt",
|
||
|
width: 600,
|
||
|
height: o.height,
|
||
|
items: {
|
||
|
left: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
cls: "my-todolist-title",
|
||
|
text: "FineUI ToDoList",
|
||
|
height: o.height
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
right: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.editor",
|
||
|
allowBlank: true,
|
||
|
cls: "my-todolist-header-editor",
|
||
|
watermark: "添加ToDo",
|
||
|
width: 300,
|
||
|
height: 24,
|
||
|
listeners: [
|
||
|
{
|
||
|
eventName: "EVENT_ENTER",
|
||
|
action: function () {
|
||
|
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
|
||
|
this.setValue("");
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
|
||
|
ToDoListHeader.EVENT_ADD = "EVENT_ADD";
|
||
|
|
||
|
BI.shortcut("my.todolist.header", ToDoListHeader);
|
||
|
})();!(function () {
|
||
|
var List = BI.inherit(BI.Widget, {
|
||
|
|
||
|
props: {
|
||
|
baseCls: "my-todolist-list",
|
||
|
text: "正在进行"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this, o = this.options;
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.vertical_adapt",
|
||
|
height: 40,
|
||
|
items: [
|
||
|
{
|
||
|
type: "bi.label",
|
||
|
cls: "my-todolist-list-text",
|
||
|
textAlign: "left",
|
||
|
text: o.text,
|
||
|
width: 580
|
||
|
}, {
|
||
|
type: "bi.center_adapt",
|
||
|
cls: "my-todolist-list-count-container",
|
||
|
width: 20,
|
||
|
height: 20,
|
||
|
items: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
ref: function (_ref) {
|
||
|
self.count = _ref;
|
||
|
},
|
||
|
text: "0"
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.button_group",
|
||
|
ref: function (_ref) {
|
||
|
self.list = _ref;
|
||
|
},
|
||
|
layouts: [
|
||
|
{
|
||
|
type: "bi.vertical",
|
||
|
vgap: 10
|
||
|
}
|
||
|
],
|
||
|
items: o.items,
|
||
|
listeners: [
|
||
|
{
|
||
|
eventName: "EVENT_CHANGE",
|
||
|
action: function (v) {
|
||
|
self.fireEvent("EVENT_CHANGE", v);
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
},
|
||
|
|
||
|
_createItems: function (items) {
|
||
|
return BI.createItems(items, this.options.el);
|
||
|
},
|
||
|
|
||
|
_setCount: function (count) {
|
||
|
this.count.setText(count);
|
||
|
},
|
||
|
|
||
|
populate: function (items) {
|
||
|
this.list.populate(this._createItems(items));
|
||
|
this._setCount(items.length);
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("my.todolist.list", List);
|
||
|
})();!(function () {
|
||
|
var ToDoList = BI.inherit(BI.Widget, {
|
||
|
|
||
|
props: {
|
||
|
baseCls: "fine-to-do-list"
|
||
|
},
|
||
|
|
||
|
_store: function () {
|
||
|
return BI.Models.getModel("my.model.todolist");
|
||
|
},
|
||
|
|
||
|
watch: {
|
||
|
todoList: function (items) {
|
||
|
this.todolist.populate(items);
|
||
|
},
|
||
|
doneList: function (items) {
|
||
|
this.donelist.populate(items);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this, o = this.options;
|
||
|
return {
|
||
|
type: "bi.vtape",
|
||
|
items: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "my.todolist.header",
|
||
|
listeners: [
|
||
|
{
|
||
|
eventName: "EVENT_ADD",
|
||
|
action: function (v) {
|
||
|
self.store.addToDo(v);
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
height: 40
|
||
|
},
|
||
|
height: 40
|
||
|
}, {
|
||
|
type: "bi.horizontal_auto",
|
||
|
cls: "bi-background",
|
||
|
items: [
|
||
|
{
|
||
|
el: {
|
||
|
type: "my.todolist.list",
|
||
|
ref: function (_ref) {
|
||
|
self.todolist = _ref;
|
||
|
},
|
||
|
text: "正在进行",
|
||
|
listeners: [
|
||
|
{
|
||
|
eventName: "EVENT_CHANGE",
|
||
|
action: function (v) {
|
||
|
self.store.finish(v);
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
width: 600
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "my.todolist.list",
|
||
|
text: "已经完成",
|
||
|
ref: function (_ref) {
|
||
|
self.donelist = _ref;
|
||
|
},
|
||
|
width: 600
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("my.todolist", ToDoList);
|
||
|
})();
|
||
|
!(function () {
|
||
|
|
||
|
var ToDoListModel = BI.inherit(Fix.Model, {
|
||
|
|
||
|
state: function () {
|
||
|
return {
|
||
|
list: []
|
||
|
};
|
||
|
},
|
||
|
watch: {},
|
||
|
|
||
|
computed: {
|
||
|
todoList: function () {
|
||
|
var items = BI.filter(this.model.list, function (index, item) {
|
||
|
return !item.done;
|
||
|
});
|
||
|
return BI.map(items, function (index, item) {
|
||
|
return BI.extend({
|
||
|
type: "bi.multi_select_item"
|
||
|
}, item);
|
||
|
});
|
||
|
},
|
||
|
doneList: function () {
|
||
|
var items = BI.filter(this.model.list, function (index, item) {
|
||
|
return item.done;
|
||
|
});
|
||
|
return BI.map(items, function (index, item) {
|
||
|
return BI.extend({
|
||
|
type: "bi.multi_select_item",
|
||
|
selected: true,
|
||
|
disabled: true
|
||
|
}, item);
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
|
||
|
actions: {
|
||
|
addToDo: function (v) {
|
||
|
this.model.list.push({
|
||
|
value: BI.UUID(),
|
||
|
text: v,
|
||
|
done: false
|
||
|
});
|
||
|
},
|
||
|
|
||
|
finish: function (v) {
|
||
|
BI.some(this.model.list, function (index, item) {
|
||
|
if (item.value === v) {
|
||
|
item.done = true;
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.model("my.model.todolist", ToDoListModel);
|
||
|
})();
|