saas-one/frontend/operation-web/app/view/help/DocItemPanel.js

/**
 * 文档目录+文档编辑
 */
Ext.define('saas.view.help.DocItemPanel', {
    extend: 'Ext.container.Container',
    xtype: 'help-docitem-panel',
    requires: ['Ext.ux.form.FilterField', 'Ext.tree.Panel', 'Ext.tree.plugin.TreeViewDragDrop', 'Ext.form.field.HtmlEditor'],

    controller: 'help-docitem-panel',
    viewModel: {
        data: {
            project: {
                name: null
            },
            article: {
                id: null,
                itemName: null,
                contentHtml: null
            },
            articlePath: null
        },
        stores: {
            treeStore: {
                type: 'tree',
                filterer: 'bottomup',
                itemMapper: function (item) {
                    var me = this, node = {
                        raw: item,
                        id: item.id,
                        text: item.name
                    };
                    if (item.article) {
                        node.leaf = true;
                    } else if (item.children) {
                        node.children = item.children.map(i => {
                            return me.itemMapper(i);
                        });
                    }
                    return node;
                },
                transformAndLoad: function (items) {
                    var me = this, data = items ? items.map(i => {
                        return me.itemMapper(i);
                    }) : [];
                    me.setRoot({
                        expanded: true,
                        children: data
                    });
                }
            }
        }
    },

    listeners: {
        boxready: 'onViewReady'
    },

    layout: 'border',
    items: [{
        xtype: 'container',
        region: 'center',
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch'
        },
        items: [{
            xtype: 'toolbar',
            margin: '0 0 12 0',
            padding: '10 5 10 12',
            height: 52,
            items: [{
                xtype: 'tbtext',
                bind: {
                    text: '{articlePath}'
                }
            }, {
                xtype: 'tbfill'
            }, {
                text: '预览',
                handler: 'handleViewArticle',
                bind: {
                    disabled: '{!article.id}'
                }
            }, {
                text: '保存',
                handler: 'handleSaveArticle',
                bind: {
                    disabled: '{!article.id}'
                }
            }]
        }, {
            flex: 1,
            padding: 0,
            margin: 0,
            xtype: 'htmleditor',
            bind: {
                readOnly: '{!article.id}',
                value: '{article.contentHtml}',
                textValue: '{article.contentText}'
            },
            iframePad: 10,
            cls: 'doc-editor'
        }]
    }, {
        region: 'west',
        collapsible: true,
        width: 300,
        ui: 'simple',
        bind: {
            title: '{project.name}'
        },
        layout: 'fit',
        margin: '0 10 0 0',
        tools: [{
            iconCls: 'x-fa fa-plus',
            items: [{
                text: '新建文件夹',
                handler: 'handleCreateFolder'
            }, {
                text: '新建文档',
                handler: 'handleCreateItem'
            }]
        }],
        items: [{
            ui: 'simple',
            xtype: 'treepanel',
            reference: 'tree',
            checkPropagation: 'both',
            rootVisible: false,
            bufferedRenderer: false,
            animate: true,
            bind: {
                store: '{treeStore}'
            },
            tbar: {
                ui: 'simple',
                layout: 'fit',
                padding: '0 8 6 8',
                items: [{
                    xtype: 'filterfield',
                    bind: {
                        store: '{treeStore}'
                    },
                    filterName: 'text',
                    emptyText: '搜索'
                }]
            },
            listeners: {
                selectionchange: 'onItemSelect'
            },
            viewConfig: {
                plugins: {
                    treeviewdragdrop: {
                        containerScroll: true
                    }
                },
                listeners: {
                    drop: 'onItemDragDrop'
                }
            },
            hideHeaders: true,
            columns: [{
                xtype: 'treecolumn',
                dataIndex: 'text',
                flex: 1
            }, {
                xtype: 'actioncolumn',
                tdCls: 'x-over-visible',
                iconCls: 'x-fa fa-ellipsis-h',
                width: 25,
                handler: function (view, rowIndex, colIndex, item, e) {
                    var rec = view.getStore().getAt(rowIndex),
                        raw = rec.get('raw'), items = [{
                            text: '重命名',
                            handler: 'handleEditItem'
                        }, {
                            text: '删除',
                            handler: 'handleDeleteItem'
                        }];
                    if (!raw.article) {
                        items = Ext.Array.merge([/* {
                            text: '新建文件夹',
                            handler: 'handleCreateFolder'
                        },  */{
                            text: '新建文档',
                            handler: 'handleCreateItem'
                        }, '-'], items);
                    }
                    Ext.create('Ext.menu.Menu', {
                        width: 100,
                        margin: '0 0 10 0',
                        record: rec,
                        items: items,
                        ownerCmp: view
                    }).showAt(e.getXY());
                }
            }]
        }]
    }]
});