index.vue 6.23 KB
<template>
    <div class="app-container">
        <div class="qg-row">
            <!-- TODO  行内样式修改-->
            <div class="qg-col--category" style="padding-right: 6px;">
                <qg-tree
                    ref="departmentTree"
                    style="background-color: #fff;padding: 12px;"
                    :request="departmentRequest"
                    :include-child="includeChild"
                    @node-click="nodeClick"
                    @include-child-change="includeChildChange"
                />
            </div>
            <div class="qg-col">
                <qg-search-form :data="searchConfig"/>
                <section class="opt-bar">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                    <el-button type="default" @click="handleBatch('enable')">启用</el-button>
                    <el-button type="default" @click="handleBatch('disable')">停用</el-button>
                </section>
                <qg-table
                    ref="listTable"
                    :columns="tableColumns"
                    :param="listQuery"
                    :request="listRequest"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import {userPage, userDisabled, userEnable, userResetPwd} from '@/api/moudles/uc/user';
    import {
        getOrgTree
    } from '@/api/moudles/uc/org';
    import {tableColumns, listQuery, searchConfig} from './index.js';
    // import {
    //     getToken
    // } from '@/utils/auth';

    import UserEditor from './edit';

    export default {
        name: 'UserIndex',
        components: {},
        data() {
            const includeChild = true;
            return {
                listRequest: userPage,
                tableColumns: tableColumns.bind(this)(),
                listQuery: Object.assign(listQuery, {includeChild}),
                departmentRequest: getOrgTree,
                includeChild: includeChild
            };
        },
        created() {
            // TODO
            this.searchConfig = searchConfig.bind(this)();
        },
        methods: {
            handleSubmit() {
                this.$refs.listTable.load(this.listQuery);
            },
            handleAdd() {
                const data = this.$refs.departmentTree.getCurrentNode();
                const orgId = (data && data.id) || '';
                const orgName = (data && data.name) || '';
                console.log(data, orgId, orgName);
                const dialog = this.$qgDialog({
                    title: '新增',
                    width: '600px',
                    props: {
                        orgId,
                        orgName,
                        callback: (action, data) => {
                            if (action === 'save') {
                                this.$refs.listTable.refresh();
                            }
                            dialog.close();
                        }
                    },
                    component: UserEditor
                });
            },
            handleBatch(type) {
                const {ids} = this.$refs.listTable.getSelections();
                if (!ids || ids.length === 0) {
                    this.$message.warning('请先选择操作对象');
                    return;
                }

                if (type === 'enable' || type === 'disable') {
                    this.handleOpt(type, ids);
                }
            },
            handleOpt(type, params) {
                let request = null;
                let isReloadList = true;
                let dialog;
                switch (type) {
                    case 'edit':
                        dialog = this.$qgDialog({
                            title: '编辑',
                            width: '600px',
                            props: {
                                id: params.id,
                                callback: (action, data) => {
                                    if (action === 'save') {
                                        this.$refs.listTable.refresh();
                                    }
                                    dialog.close();
                                }
                            },
                            component: UserEditor
                        });
                        return;
                    case 'enable':
                        request = userEnable(params);
                        break;
                    case 'disable':
                        request = userDisabled(params);
                        break;
                    case 'resetPwd':
                        request = userResetPwd(params);
                        isReloadList = false;
                        break;
                }
                this.operate(request, isReloadList, type);
            },
            operate(request, isReloadList, type) {
                if (!request) {
                    return;
                }
                request.then(res => {
                    let msg = res.msg || '操作成功';
                    if (type === 'resetPwd') {
                        msg += (',重置后的密码是:' + res.data);
                    }
                    this.$message.success(msg);
                    if (isReloadList) {
                        this.$refs.listTable.load(this.listQuery);
                    }
                });
            },
            handleImport() {
                this.$refs.importDialog.open();
            },
            handleExport() {
                this.$notify.info({
                    title: '系统提示',
                    message: '导出任务正在后台执行,您可以离开本页面进行其他操作,稍后再回来下载。参考时间:5千人约5分钟;1万人约10分钟;2万人约20分钟。'
                });
            },
            handleImportOk(result) {
                console.log(result);
            },
            nodeClick(data) {
                this.listQuery.orgId = data.id;
                this.$refs.listTable.load(this.listQuery);
            },
            includeChildChange(flag) {
                this.listQuery.includeChild = flag;
                this.$refs.listTable.load(this.listQuery);
            }
        }
    };
</script>