rt-sim-training-client/src/views/package/index.vue

<template>
  <div style="height: 100%; overflow: auto;">
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <select-role ref="selectRole" @reloadTable="reloadTable" />
  </div>
</template>

<script>
import { listUserPermision } from '@/api/management/author';
import { superAdmin, admin } from '@/router/index_APP_TARGET';
import selectRole from './selectRole/list';
import LangStorage from '@/utils/lang';

export default {
    name: 'Author',
    components: {
        selectRole
    },
    data() {
        return {
            param: '',
            WhetherTypeList: [],
            // EffectiveTypeList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '140px',
                reset: true,
                leftSpan: 18,
                queryObject: {
                    'canDistribute': {
                        type: 'select',
                        label: this.$t('permission.permissionUseType'),
                        config: {
                            data: []
                        }
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('permission.permissionName'),
                        width: '210',
                        prop: 'permissionName'
                    },
                    {
                        title: this.$t('permission.permissionUseType'),
                        prop: 'canDistribute',
                        type: 'tag',
                        columnValue: (row) => {
                            const type = LangStorage.getLang() == 'en' ? 'PermissionUseListEn' : 'PermissionUseList';
                            return this.$ConstSelect.translate(row.canDistribute, type);
                        },
                        tagType: (row) => {
                            switch (row.canDistribute) {
                            case true: return 'success';
                            case false: return 'danger';
                            }
                        }
                    },
                    {
                        title: this.$t('permission.permissionTotal'),
                        prop: 'amount'
                    },
                    {
                        title: this.$t('permission.permissionRemains'),
                        prop: 'remains'
                    },
                    {
                        title: this.$t('permission.startTime'),
                        prop: 'startTime',
                        type: 'formatter',
                        formatter: this.formatterDate

                    },
                    {
                        title: this.$t('permission.endTime'),
                        prop: 'endTime',
                        type: 'formatter',
                        formatter: this.formatterDate
                    },
                    {
                        title: this.$t('permission.belonger'),
                        prop: 'ownerName',
                        isShow: () => { return this.$store.state.user.roles.indexOf(superAdmin) > 0 || this.$store.state.user.roles.indexOf(admin) > 0; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '300',
                        hide: () => { return this.$store.state.user.roles.indexOf(superAdmin) < 0 || this.$store.state.user.roles.indexOf(admin) < 0; },
                        buttons: [
                            {
                                name: this.$t('permission.setBelonger'),
                                handleClick: this.handleRoleVest,
                                type: ''
                            }
                        ]
                    }
                ]
            }
        };
    },
    watch: {
        '$route.params.mapId': function (val) {
            this.$refs.queryListPage.refresh(true);
        }
    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        handleRoleVest(index, row) {
            this.$refs.selectRole.doShow(row.id);
        },
        loadInitData() {
            this.queryForm.queryObject.canDistribute.config.data = this.$ConstSelect.PermissionUseList;
        },
        formatterDate(row, porpInfo) {
            return row[porpInfo.property] ? row[porpInfo.property] : this.$t('global.perpetual');
        },
        queryFunction(params) {
            if (this.$route.params.mapId) {
                params.mapId = this.$route.params.mapId;
            }
            return listUserPermision(params);
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        }
    }
};
</script>