fineui-start/src/modules/main.js

import { shortcut } from "../core/javascript/decorator";
import { ToDoListHeader } from "./header/header";
import { List } from "./list/list";
import "./main.less";

/**
 * todolist 组件
 */
@shortcut()
export class ToDoList extends BI.Widget {
    static xtype = "my.todolist";

    props = {
        baseCls: "fine-to-do-list",
    }

    // 生命周期函数,在组件创建前
    beforeCreate() {
        // 初始化存储数据
        this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
    }

    render() {
        return {
            type: BI.VTapeLayout.xtype, // vtape布局,顶部高度固定,下部分列表占满高度
            items: [
                {
                    el: {
                        type: ToDoListHeader.xtype, // 顶部组件
                        listeners: [
                            { // 监听组件的EVENT_ADD事件,新建todo项
                                eventName: "EVENT_ADD",
                                action: v => {
                                    this.addToDo(v);
                                },
                            },
                        ],
                        height: 40,
                    },
                    height: 40,
                }, {
                    type: BI.HorizontalAutoLayout.xtype, // 水平居中布局
                    cls: "my-todolist-background", // 添加className
                    items: [
                        {
                            el: {
                                type: List.xtype, // need todo项列表
                                ref: _ref => {
                                    this.todolist = _ref;
                                },
                                items: this._getNeedTodoList(),
                                text: "正在进行",
                                listeners: [
                                    { // 监听EVENT_CHANGE事件,完成某一项todo
                                        eventName: "EVENT_CHANGE",
                                        action: v => {
                                            this.finishTodo(v);
                                        },
                                    },
                                ],
                                width: 600,
                            },
                        }, {
                            el: {
                                type: List.xtype, // 已经完成的todo项列表
                                text: "已经完成",
                                items: this._getAlreadyDoneList(),
                                ref: _ref => {
                                    this.donelist = _ref;
                                },
                                width: 600,
                            },
                        },
                    ],
                }],
        };
    }

    _updateLocalStorage() {
        localStorage.setItem("fine-todolist", JSON.stringify(this.list));
    }

    _getNeedTodoList() {
        return BI.filter(this.list, (index, item) => !item.done);
    }

    _getAlreadyDoneList() {
        return BI.filter(this.list, (index, item) => item.done);
    }

    /**
     * 添加todo项
     * @param text todo项的内容
     */
    addToDo(text) {
        this.list.push({
            value: BI.UUID(),
            text,
            done: false,
        });
        this.todolist.populate(this._getNeedTodoList());
        this._updateLocalStorage();
    }

    /**
     * 完成某一项todo
     * @param v todo项的value
     */
    finishTodo(v) {
        BI.some(this.list, (index, item) => {
            if (item.value === v) {
                item.done = true;
            }
        });
        this.todolist.populate(this._getNeedTodoList());
        this.donelist.populate(this._getAlreadyDoneList());
        this._updateLocalStorage();
    }
}