VUE传统方式开发下的 Element UI + RequreJS单页应用

后端开发人员很少接触node.js，因为要花很多精力去学，不易上手，这里用RequreJS来简单代替WebPack吧，用它来记录JS库的路径，依赖关系，按需动态加载，这样一个前端工程化的架构也就初步形成了。

首先说一说RequreJS的基本用法，使用RequreJS需要两个文件，一个是JS库本身，一个是它的配置文件，下图我是这样放置的

RequreJS的配置文件我就叫 require.data.main.js了，里面记录了JS库的路径和依赖关系，这些路径全都是相对于require.data.main.js这个文件的相对路径，这点一定要注意，例如下图

require.config({
    map: {
        '*': {
            css: '../lib/css'
        }
    },
    paths: {
        /*公用组件***************************************************************************************/
        LinqJS: ['linq.min'],
        PhotoUpload: ['photoUpload'],
        SelectPage: ['v-selectpage'],
        VueExtend: ['vue-extend-func'],
        /*公用业务逻辑组件*******************************************************************************/
        //组织机构分配用户
        OrganizationUserComponent: ['../Pages/Users/OrganizationUserComponent'],
        //选择用户组件
        UserSelectComponent: ['../Pages/Users/UserSelectComponent'],
        //客户订单转为生产订单
        OrderTransferProduct: ['../Pages/Orders/OrderTransferProduct'],
        //选择油罐
        ChooseOiltank: ['../Pages/Orders/ChooseOilTank'], 
        //订单配方流程图
        OrderRecipeFlow: ['../Pages/Orders/OrderRecipeFlow'], 
        //生产订单模板
        OrderProductTemplate: ['../Pages/Orders/OrderProductTemplate'], 
    },
    shim: {
        PhotoUpload: ['css!photoUpload.css'],
        SelectPage: ['css!v-selectpage.css'],
        OrderTransferProduct: {
            deps: ["SelectPage", "ChooseOiltank","OrderRecipeFlow"],
        },
        ChooseOiltank: {
            deps: ["SelectPage"],
        },
        OrderProductTemplate: {
            deps: ["LinqJS"],
        },
    }
});

注意这一行 css: '../lib/css'，这里使用了一个RequreJS的插件，用来动态加载css的库，shim 下则记录了JS库依赖的其他库或css文件，上面的路径上JS文件全都不用写.js文件后缀名，写了反而会报404找不到的错误，RequreJS配置文件的用法比较简单，这里就不写那么详细了

在使用RequreJS库的地方要这样引用 

<script type="text/javascript" data-main="/Scripts/Component/require.data.main.js" src="/Scripts/lib/require.js"></script>

跟一般JS文件引用不同的是 data-main 上面要写上配置文件的路径，这样一来就可以使用RequreJS来按需动态加载JS文件了

比如说，有一个导航树，点击以后动态的加载一个Vue组件可以这么写，

            require(['UserSelectComponent'], function () {
                that.userSelectShow = true;
            });

上面的 UserSelectComponent 是在 require.data.main.js 这个RequreJS配置文件中早就注册好的组件别名。所以把上面的这一套连起来看，也就知道怎么用了，Vue组件的用法这里不详细写了，下面写一下如何动态的加载组件，下例是一个典型的左边导航树，右边浏览页的结构，传统的做法是iframe里面套上不同的页面，缺点不用我多说，加载慢，跨页调用等等，很多不好的地方。

上图每个Tab页都是个动态加载出来的Vue组件，所有的东西都是在同一个页面，没有跳转，加载速度和体验比iframe不止好一点点，下面给出主要代码，后端接口的代码就不贴了，因为没什么意义

导航树的界面

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="app" oncontextmenu="self.event.returnValue=false">
    <el-container>
        <el-aside id="op" width="auto">
            <el-row>
                <el-col :span="24">
                    <button v-on:click="collapseStatus" style="border:0px;background-color: white;">
                        <i :class="collapseIcon" style="font-size: 20px;border:0px;"></i>
                    </button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-menu class="el-menu-vertical" :collapse="!isCollapse">
                        <el-row gutter="1" v-show="isCollapse">
                            <el-col :span="24">
                                <div @@contextmenu="rightClick" @@click="menuVisible=false">
                                    <el-input placeholder="输入关键字进行过滤"
                                              v-model="filterText" clearable>
                                    </el-input>
                                    <el-tree class="filter-tree" ref="tree" node-key="id" :expand-on-click-node="false" default-expand-all :data="treeData"
                                             :props="props" :filter-node-method="filterNode"
                                             @@node-click="addTab"
                                             @@node-contextmenu="rightClick">
                                    </el-tree>
                                </div>
                            </el-col>
                        </el-row>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
        <el-main v-resize="onResize">
            <el-container>
                <el-tabs v-if="editableTabs.length > 0" v-model="editableTabsValue" type="border-card" closable @@tab-remove="removeTab">
                    <el-tab-pane v-for="(item, index) in editableTabs"
                                 :key="item.name"
                                 :label="item.title"
                                 :name="item.name">
                        <keep-alive>
                            <component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
                        </keep-alive>
                    </el-tab-pane>
                </el-tabs>
            </el-container>
        </el-main>
    </el-container>
    <div v-show="menuVisible">
        <ul id="menu" class="el-dropdown-menu el-popper"
            style="width: 190.1px; top: 41px; left: 420px; z-index: 9999;">
            <li class="el-dropdown-menu__item" v-on:click="onAddNode()">
                <i class="el-icon-plus" style="color: #E6A23C"></i>
                <span>创建</span>
            </li>
            <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click="onRenameNode()" v-if="treeData.length > 0">
                <i class="el-icon-edit" style="color: #E6A23C"></i>
                <span>重命名</span>
            </li>
            <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click=" onRemoveNode()" v-if="treeData.length > 0">
                <i class="el-icon-delete-solid" style="color: #ea6f5a"></i>
                <span>删除</span>
            </li>
        </ul>
    </div>
</div>
<script src="~/Scripts/Component/vuex.js"></script>
<script src="~/Scripts/lib/lodash.min.js"></script>
<script src="~/Scripts/lib/ResizeSensor.min.js"></script>
<script src="~/Scripts/lib/Vueresize.js?v=20190712152543"></script>
<script type="text/javascript" data-main="/Scripts/Component/require.data.main.js" src="/Scripts/lib/require.js"></script>
<script src="~/Scripts/Pages/Users/Organization.js?v=20190712152543"></script>
<style scoped>
    .el-icon-tools {
        background: url('../icon/tools.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-tools:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-consumables {
        background: url('../icon/consumables.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-consumables:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-types {
        background: url('../icon/types.jpg') center no-repeat;
        background-size: cover;
    }

        .el-icon-types:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-inventory {
        background: url('../icon/inventory.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-inventory:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-machines {
        background: url('../icon/machines.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-machines:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-custom {
        background: url('../icon/custom.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-custom:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders {
        background: url('../icon/workorders.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-created {
        background: url('../icon/workordercreated.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-created:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-confirmed {
        background: url('../icon/workorderconfirmed.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-confirmed:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-processing {
        background: url('../icon/workorderprocessing.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-processing:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-audit {
        background: url('../icon/workorderaudit.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-audit:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-completed {
        background: url('../icon/workordercompleted.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-completed:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-feedback {
        background: url('../icon/feedback.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-feedback:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-feedbackdefect {
        background: url('../icon/feedbackdefect.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-feedbackdefect:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-icon-workorders-feedbackresult {
        background: url('../icon/feedbackresult.png') center no-repeat;
        background-size: cover;
    }

        .el-icon-workorders-feedbackresult:before {
            content: "替";
            font-size: 16px;
            visibility: hidden;
        }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: auto;
        height: auto;
        font-size: 16px;
        color: #1790ff;
        padding: 5px;
    }

    .el-aside {
        background-color: white;
        border-radius: 5px;
        padding: 1px;
    }

    .el-menu--collapse {
        color: #1790ff;
        width: 20px;
        padding: 0px;
    }

    el-menu-vertical el-menu {
        height: 100%
    }

    .el-input el-input--small el-input--suffix {
        padding: 5px;
    }

    .el-breadcrumb__inner {
        color: #1790ff;
    }

    .el-header {
        padding: 20px,0px,20px,0px;
    }

    .el-aside {
        border: 1px solid #ccc;
        border-right: none;
    }

    .el-main {
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
    }

    .inner-el-main {
        border: 1px;
        padding: 0px;
    }

    li:hover {
        background-color: #1790ff;
        color: white;
    }

    li {
        font-size: 15px
    }

    html, body, #app, .el-container {
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
        /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }

    div.popContainer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0);
    }

    img {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px; /* 高度的一半 */
        margin-left: -15px; /* 宽度的一半 */
    }

    .el-tabs__nav {
        height: 35px;
        font-size: 12px;
        line-height: 35px;
    }

    .el-tabs__item {
        font-size: 12px;
        line-height: 35px;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        font-size: 12px;
        height: 35px;
    }
</style>

最重要的是这个部分

                        <keep-alive>
                            <component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
                        </keep-alive>

 component : is = xxx 这是Vue里面动态加载组件的标记，keep-alive 则表示缓存这个组件，具体用法可以百度了，这里篇幅有限，不展开写了

const store = new Vuex.Store({
    state: {
        showUserSelect: false
    },
})
var minWidth = 0;
var app;
Vue.prototype.$ELEMENT.size = "small";
$(document).ready(function () {
    app = new Vue({
        el: "#app",
        directives: {
            resize: Vueresize, //注册v-resize指令
        },
        store,    //把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
        data: {
            editableTabsValue: '',
            editableTabs: [],
            showUserSelect: false,
            collapseIcon: 'el-icon-s-fold',
            isCollapse: true,
            treeData: [],
            treeSelectNode: null,
            filterText: '',
            props: {
                label: 'label',
                children: 'children'
            },
            menuVisible: false,
        },
        watch: {
            isCollapse(val) {
                app.collapseIcon = val == true ? 'el-icon-s-fold' : 'el-icon-s-unfold';
            },
            filterText(val) {
                app.$refs.tree.filter(val);
            },
            editableTabsValue(val) {
                let tabs = this.editableTabs;
                var activeInde = 0;
                let activeName = val;
                tabs.forEach((tab, index) => {
                    if (tab.name === activeName) {
                        activeInde = index;
                    }
                });
                this.$nextTick(() => {
                    var elMain = $('.el-main')[0];
                    if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
                        app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
                    }
                });
            }
        },
        mounted() {
            this.$nextTick(() => {
                app.loadTreeData();
            });
        },
        methods: {
            onSelectUser() {
                require(['UserSelectComponent'], function () {
                    app.$store.state.showUserSelect = true;
                });
            },
            loadTreeData() {
                let loading = app.$loading();
                $.ajax({
                    type: "POST",
                    url: "/Organization/LoadTree",
                    success: function (data) {
                        if (data.Success) {
                            app.treeData = data.Data;
                        }
                        loading.close();
                    }, error() {
                        app.$message.error("请求失败！");
                        loading.close();
                    }
                });
            },
            rightClick(event, data, node, self) {
                this.menuVisible = false
                if (node) { app.treeSelectNode = node }
                var menu = document.querySelector('#menu')
                menu.style.left = event.clientX + 'px'
                menu.style.top = event.clientY - 10 + 'px'
                document.addEventListener('click', this.foo)
                this.menuVisible = true
            },
            foo() { // 取消鼠标监听事件 菜单栏
                this.menuVisible = false
                document.removeEventListener('click', this.foo) // 要及时关掉监听
            },
            collapseStatus() {
                this.collapseBtnClick = this.isCollapse;
                this.isCollapse = !this.isCollapse;

                let tabs = this.editableTabs;
                var activeInde = 0;
                let activeName = this.editableTabsValue;
                tabs.forEach((tab, index) => {
                    if (tab.name === activeName) {
                        activeInde = index;
                    }
                });
                this.$nextTick(() => {
                    var elMain = $('.el-main')[0];
                    if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
                        app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
                    }
                });
            },
            //节点过滤
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //添加节点
            onAddNode() {
                app.$prompt('请输入组织机构名称', '添加组织机构', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: ''
                }).then(({ value }) => {
                    if (value.length == 0) {
                        return;
                    }
                    var parent_id = 0;
                    if (app.treeSelectNode &&
                        app.treeSelectNode.data &&
                        app.treeSelectNode.data.id) {
                        parent_id = app.treeSelectNode.data.id
                    }
                    var cloneObj = {
                        "id": "",
                        "label": value,
                        "name": value,
                        "parent_id": parent_id,
                    };
                    $.ajax({
                        type: "POST",
                        url: "/Organization/NewModel",
                        data: JSON.stringify(cloneObj),
                        success: function (data) {
                            if (data.Success) {
                                var newChild = data.Data;
                                if (!newChild.children) {
                                    app.$set(newChild, 'children', []);
                                }
                                app.$nextTick(() => {
                                    if (app.treeSelectNode &&
                                        app.treeSelectNode.data &&
                                        !app.treeSelectNode.data.children) {
                                        app.$set(app.treeSelectNode.data, 'children', []);
                                    }
                                    if (app.treeData.length == 0) {
                                        app.treeData.push(cloneObj);
                                    }
                                    else {
                                        cloneObj.id = newChild.id;
                                        app.treeSelectNode.data.children.push(cloneObj);
                                    }
                                    app.$message({
                                        type: 'success',
                                        message: '创建成功!'
                                    });
                                });
                            }
                            else
                                app.$message.error("创建失败！");
                        }, error() {
                            app.$message.error("创建失败！");
                        }
                    });
                });
            },
            //删除节点
            onRemoveNode() {
                if (app.treeSelectNode.data.children &&
                    app.treeSelectNode.data.children.length &&
                    app.treeSelectNode.data.children.length > 0) {
                    app.$message.error("请先删除所有子节点！");
                    return;
                }
                app.$confirm("是否删除此节点？", "提示", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    var ids = [];
                    ids.push(app.treeSelectNode.data.id);
                    $.ajax({
                        type: "POST",
                        url: "/Organization/DeleteModel",
                        data: JSON.stringify({ ids: ids }),
                        success: function (data) {
                            if (data.Success) {
                                var treeNode = app.treeSelectNode;
                                var treeData = app.treeSelectNode.data;
                                const parent = treeNode.parent;
                                const children = parent.data.children || parent.data;
                                const index = children.findIndex(d => d.id === treeData.id);
                                children.splice(index, 1);
                                app.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        }, error() {
                            app.$message.error("重命名失败！");
                        }
                    });
                }).catch(() => {
                    return false;
                })
            },
            //重命名
            onRenameNode() {
                app.$prompt('请输入名称', '重命名', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: Object.assign(app.treeSelectNode.data.label)
                }).then(({ value }) => {
                    if (value.length == 0) {
                        return;
                    }
                    var cloneObj = Object.assign(app.treeSelectNode.data);
                    cloneObj.label = value;
                    cloneObj.name = value;
                    $.ajax({
                        type: "POST",
                        url: "/Organization/UpdateModel",
                        data: JSON.stringify(cloneObj),
                        success: function (data) {
                            app.treeSelectNode.data.label = value;
                            if (data.Success) {
                                app.$message({
                                    type: 'success',
                                    message: '重命名完成'
                                });
                            }
                        }, error() {
                            app.$message.error("重命名失败！");
                        }
                    });
                }).catch(() => {
                    return false;
                })
            },
            addTab(data, node, self) {
                require(['LinqJS', 'OrganizationUserComponent'], function () {
                    app.treeSelectNode = node;
                    let newTabName = app.treeSelectNode.data.label;
                    if (app.editableTabs.length > 0) {
                        var isExsit = Enumerable.From(app.editableTabs).Any(p => p.name == app.treeSelectNode.data.label);
                        if (isExsit) {
                            app.editableTabsValue = newTabName;
                            return;
                        }
                    }
                    app.editableTabs.push({
                        id: node.data.id,
                        title: newTabName,
                        name: newTabName,
                        content: 'organization-user'
                    });
                    app.editableTabsValue = newTabName;
                });
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //树导航折叠的时候触发resize修改tab页的宽度
            onResize(obj) {
                this.$nextTick(() => {
                    if (app.$refs.tabsRef) {
                        for (i = 0; i < app.$refs.tabsRef.length; i++) {
                            if (obj.scrollWidth > obj.clientWidth || obj.scrollHeight > obj.clientHeight) {
                                var scrollWidth = obj.scrollWidth - obj.clientWidth;
                                app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - scrollWidth - 30 + "px";
                            }
                            else {
                                if (minWidth > obj.scrollWidth && minWidth == 0) {
                                    minWidth = obj.scrollWidth
                                    app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 10 + "px";
                                }
                                else {
                                    app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 50 + "px";
                                }
                            }
                        }
                    }
                });
            }
        }
    })
})

上面就是左边的导航树及主要界面,下面给出Tab页里的组件，这个实例就比较完整了

Vue.component('organization-user', {
    template: `<div class="organUserWrapper">
                   <div class="nav-bar" style="padding: 4px">
                        <el-row :gutter="4">
                            <el-col :span="12">
                                <el-button-group>
                                    <el-button size="small" type="primary" icon="el-icon-plus" v-on:click="onSelectUser">
                                        添 加
                                    </el-button>
                                    <el-button size="small" type="danger" icon="el-icon-delete" v-on:click="onDelete">
                                        移 除
                                    </el-button>
                                    <el-button size="small" icon="el-icon-search" v-on:click="onSearch">
                                        查 询
                                    </el-button>
                                </el-button-group>
                            </el-col>
                            <el-col :span="12">
                                <el-input size="small" v-model="search.field_value" placeholder="请输入内容" style="width: 100%; float: right" clearable v-on:clear="clearSearchValue">
                                    <el-select v-model="search.field_name" size="small" slot="prepend" placeholder="请选择" style="min-width: 100px" clearable v-on:clear="clearSearchText">
                                        <el-option label="用户账号" value="c.user_name"></el-option>
                                        <el-option label="用户名称" value="c.full_name"></el-option>
                                    </el-select>
                                    <el-button slot="thisend" type="Success" icon="el-icon-search" v-on:click="onSearch()">查询</el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <el-table size="small" ref="multipleTable" v-on:select="handleSelectedRow" v-on:select-all="handleSelectedAllRow" border :data="table.data" :height="table.height">
                                    <el-table-column label="选择" fixed="left" type="selection" width="40px" class="selection" prop='id'></el-table-column>
                                    <template>
                                        <el-table-column v-for="item in headerGroup" :key="item.label" v-if="item.show" :label="item.label" :prop="item.prop" :width="item.width"></el-table-column>
                                    </template>
                                </el-table>
                            </el-col>
                            <el-col :span="24" class="remove">
                                <el-pagination v-on:size-change="onPageSizeChange" v-on:current-change="onPageCurrentChange"
                                                :current-page.sync="GridPageRequest.PageIndex" :page-sizes="[20, 50, 100, 200]"
                                                :page-size="GridPageRequest.PageSize" layout="sizes, prev, pager, next, total" :total="table.count">
                                </el-pagination>
                            </el-col>
                        </el-row>
                   </div>
                   <user-select :show="userSelectShow" :multiple="true" @close="CloseUserSelect" @callback="afterUserSelect"></user-select>
                 </div>`,
    props: {
        organizationId: {
            type: String
        },
    },
    data() {
        return {
            radio: '',
            userSelectShow: false,
            //表头
            headerGroup: [
                { label: 'id', prop: 'id', show: false, width: "160px" },
                { label: '组织机构', prop: 'organization_name', show: true, width: "160px" },
                { label: '用户账号', prop: 'user_name', show: true, width: "160px" },
                { label: '用户名称', prop: 'full_name', show: true, width: "auto" }
            ],
            //搜索
            search: {
                field_name: null,
                field_value: null
            },
            //表格
            table: {
                height: "300px",
                data: [],
                count: 0
            },
            //分页
            GridPageRequest: {
                PageSize: 20,
                PageIndex: 0,
                PageTotal: 0,
                Filter: []
            },
            selectedRows: [],
            BusinessModel: {
                width: "100px",
                show: false,
                title: "新增",
                model: {
                    id: "",
                    user_name: "",
                    password: "",
                    full_name: "",
                    validate_status: "",
                    createby: "",
                    create_time: "",
                    updateby: "",
                    update_time: "",
                    remarks: "",
                    Items: [] //明细
                },
                tag: { //公共资源
                    validate_status: {
                        1001: "启用",
                        1002: "禁用"
                    }
                }
            }
        }
    },
    mounted() {
        var that = this;
        this.$nextTick(() => {
            that.getTableData();
            let resize = window.onresize = function () {
                that.table.height = $(window).height() - 150 + "px";
            };
            resize();
        });
    },
    methods: {
        //选择行
        handleSelectedRow(selection, row) {
            if (selection && selection.length > 0) {
                this.selectedRows = selection;
            } else {
                this.selectedRows = [];
            }
        },
        //全选
        handleSelectedAllRow(selection) {
            this.selectedRows = selection;
        },
        //选择用户的事件
        onDelete() {
            var that = this;
            var ids = this.selectedRows.map((o) => o.id);
            if (ids.length == 0) {
                this.$message.error("请选择用户！");
                return;
            }
            var ids = this.selectedRows.map((o) => o.id);
            this.$confirm('是否确认操作所选择的行?', "删除", {
                confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                $.ajax({
                    type: "POST",
                    url: "/OrganizationUser/DeleteModel",
                    data: JSON.stringify({ "ids": ids }),
                    datatype: "json",
                    success: function (data) {
                        //绑定数据
                        if (data.Success) {
                            that.$message({ message: '操作成功!', type: 'success' });
                            that.onSearch();
                        }
                    },
                    error() {
                        that.$message.error("操作失败！");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //搜索
        onSearch() {
            this.search = this.search;
            this.GridPageRequest.Filter = [];
            if (this.search.field_name &&
                this.search.field_name.length > 0 &&
                this.search.field_value &&
                this.search.field_value.length > 0) {
                this.GridPageRequest.Filter.push({ "Operator": "and", "Where": this.search.field_name + " like " + "'%" + this.search.field_value + "%'" });
            }
            this.getTableData();
        },
        //请求表格数据
        getTableData() {
            this.GridPageRequest.Filter.push({ "Operator": "and", "Where": "b.id =" + "'" + this.organizationId + "'" });
            let loading = this.$loading();
            var that = this;
            $.ajax({
                type: "POST",
                url: "/OrganizationUser/LoadPageData",
                data: JSON.stringify(Object.assign(that.GridPageRequest)),
                success: function (data) {
                    if (data.Success) {
                        that.table.data = data.Data;
                        that.table.count = data.TotalRows;
                    }
                    loading.close();
                }, error() {
                    that.$message.error("请求失败！");
                    loading.close();
                }
            });
        },
        //修改分页大小
        onPageSizeChange(now) {
            this.GridPageRequest.PageSize = now;
            this.getTableData();
        },
        //修改分页页数
        onPageCurrentChange(now) {
            this.GridPageRequest.PageIndex = now;
            this.getTableData();
        },
        clearSearchText() {
            this.search.field_name = "";
            this.GridPageRequest.Filter = [];
        },
        clearSearchValue() {
            this.search.field_value = "";
            this.GridPageRequest.Filter = [];
        },
        onSelectUser() {
            var that = this;
            require(['UserSelectComponent'], function () {
                that.userSelectShow = true;
            });
        },
        CloseUserSelect() {
            this.userSelectShow = false;
        },
        afterUserSelect(ids) {
            var that = this;
            $.ajax({
                type: "POST",
                url: "/OrganizationUser/NewModels",
                data: JSON.stringify({ organizationId: that.organizationId, userIds: ids }),
                success: function (data) {
                    if (data.Success) {
                        that.getTableData();
                        that.$message({
                            type: 'success',
                            message: '操作完成！'
                        });
                    }
                }, error() {
                    that.$message.error("操作完成！");
                }
            });
        }
    }
});