rt-sim-training-client/src/views/system/userControl/index.vue

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <dictionary-edit ref="edit" :company-list="companyList" @reloadTable="reloadTable" />
    <create-user ref="createUser" />
    <bind-company ref="bindCompany" :company-list="companyList" @create="create" />
  </div>
</template>

<script>
import { getUserList } from '@/api/management/user';
import { getCompanyList } from '@/api/company';
import DictionaryEdit from './edit';
import CreateUser from './createUser';
import BindCompany from './bindCompany';

export default {
    name: 'UserControl',
    components: {
        DictionaryEdit,
        CreateUser,
        BindCompany
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            companyMap: {},
            companyList: [],
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('system.name')
                    },
                    roles: {
                        type: 'select',
                        label: this.$t('system.roles'),
                        config: {
                            data: this.$ConstSelect.roleList
                        }
                    }
                }

            },
            queryList: {
                query: getUserList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('system.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('system.nickname'),
                        prop: 'nickname'
                    },
                    {
                        title: this.$t('global.mobile'),
                        prop: 'mobile'
                    },
                    {
                        title: this.$t('global.email'),
                        prop: 'email'
                    },
                    {
                        title: '组织',
                        prop: 'companyId',
                        type: 'tag',
                        columnValue: (row) => { return this.getCompanyName(row.companyId); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.roles'),
                        prop: 'roles',
                        type: 'tagMore',
                        columnValue: (row) => { return this.$convertField(row.roles, this.$ConstSelect.roleList, ['value', 'label'], true); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleUserEdit
                            },
                            {
                                name: '绑定组织管理员',
                                handleClick: this.handleBind
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '创建本地用户', btnCode: 'employee_auto', handler: this.createLocalUsers },
                    { text: '组织管理', btnCode: 'company_manage', handler: this.companyManage }
                ]
            },
            currentModel: {}
        };
    },
    created() {
        this.companyMap = {};
        this.companyList = [];
        getCompanyList().then(resp => {
            if (resp && resp.data && resp.data.length) {
                resp.data.forEach(item => {
                    this.companyMap[item.id] = item.name;
                    this.companyList.push({label: item.name, value: parseInt(item.id)});
                });
            }
        }).catch((error) => {
            console.error(error);
        });
    },
    methods: {
        // 编辑
        handleUserEdit(index, row) {
            this.$refs.edit.doShow(row);
        },
        getCompanyName(companyId) {
            return this.companyMap[companyId];
        },
        reloadTable() {
            this.queryList.reload();
        },
        createLocalUsers() {
            this.$refs.createUser.doShow();
        },
        companyManage() {
            this.$router.push({ path: `/system/companyManage`});
        },
        handleBind(index, row) {
            this.$refs.bindCompany.doShow(row);
        },
        create() {
            this.reloadTable();
        }
    }
};
</script>