rt-sim-training-client/src/views/orderauthor/rules/index.vue

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <detail ref="detail" :permission-type-list="PermissionTypeList" />
    <belong ref="belong" :permission-type-list="PermissionTypeList" :effective-type-list="EffectiveTypeList" />
  </div>
</template>

<script>
import { listPermision, setLessonPermisson } from '@/api/management/author';
import Detail from './detail';
import Belong from './belong';
import localStore from 'storejs';

export default {
    name: 'Author',
    components: {
        Detail,
        Belong
    },
    data() {
        return {
            PermissionTypeList: [],
            belongForm: {},
            EffectiveTypeList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '120px',
                reset: true,
                queryObject: {
                    userName: {
                        type: 'text',
                        label: this.$t('permission.userName'),
                        config: {
                            data: []
                        }
                    },
                    status: {
                        type: 'select',
                        label: this.$t('permission.statusType'),
                        config: {
                            data: []
                        }
                    },
                    canDistribute: {
                        type: 'select',
                        label: this.$t('permission.permissionUseType'),
                        config: {
                            data: [
                                { value: false, label: this.$t('permission.private')},
                                { value: true, label: this.$t('permission.public')}
                            ]
                        }
                    },
                    distributeId: {
                        type: 'text',
                        label: this.$t('permission.distributeId'),
                        config: {
                            data: []
                        }
                    }
                    // sortOrder:{
                    //     type: 'select',
                    //     label: this.$t('permission.sortType'),
                    //     default:'id desc',
                    //     noClearable:true,
                    //     config: {
                    //         data: [
                    //             {value:'id desc', label:'ID倒序'},
                    //             {value:'userName', label:'用户名正序'}
                    //         ]
                    //     }
                    // }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                defaultSort:{prop:'sortOrder', order:''},
                columns: [
                    {
                        title: this.$t('permission.userName'),
                        prop: 'userName',
                        sortable:'custom',
                        sortBy:'sortOrder'
                    },
                    {
                        title: this.$t('permission.nickName'),
                        width: '200',
                        prop: 'userNickname'
                    },
                    {
                        title: this.$t('permission.permissionName'),
                        width: '200',
                        prop: 'permissionName'
                    },
                    {
                        title: this.$t('permission.permissionType'),
                        prop: 'permissionType',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.permissionType, this.PermissionTypeList, ['value', 'label']); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: this.$t('permission.permissionUseType'),
                        prop: 'canDistribute',
                        type: 'tag',
                        columnValue: (row) => { return this.$ConstSelect.translate(row.canDistribute, 'PermissionUseList'); },
                        tagType: (row) => {
                            switch (row.canDistribute) {
                            case true: return 'success';
                            case false: return 'danger';
                            }
                        }
                    },
                    {
                        title: this.$t('permission.isForever'),
                        prop: 'forever',
                        type: 'tag',
                        columnValue: (row) => { return this.$ConstSelect.translate(row.forever, 'Whether'); },
                        tagType: (row) => {
                            switch (row.forever) {
                            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.permissionStatus'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.status, this.EffectiveTypeList, ['value', 'label']); },
                        tagType: (row) => {
                            switch (row.status) {
                            case '1': return 'success';
                            default: return 'danger';
                            }
                        }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '300',
                        buttons: [
                            {
                                name: this.$t('orderAuthor.setupFailure'),
                                handleClick: this.handleEfficacy,
                                type: 'warning',
                                showControl: (row) => {
                                    return row.status === '1';
                                }
                            },
                            {
                                name: this.$t('orderAuthor.transferAttribution'),
                                handleClick: this.handleBelongs,
                                type: '',
                                showControl: (row) => {
                                    return row.status === '1' && row.amount !== row.remains;
                                }
                            },
                            {
                                name: this.$t('global.details'),
                                handleClick: this.handleRoleVest,
                                type: '',
                                showControl: (row) => { return !row.permissionType; }
                            }
                        ]
                    }
                ],
                // sortChange:function(data) {
                //     switch (data.order) {
                //     case 'ascending': {
                //         this.data=[];
                //         break;
                //     }
                //     case 'descending': {
                //         break;
                //     }
                //     default: {
                //         // sortOrder
                //         debugger;
                //         break;
                //     }
                //     }
                // },
                actions: [
                ]
            }
        };
    },
    created() {
        this.handleOriginalForm();

    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        handleRoleVest(index, row) {
            this.$refs.detail.doShow(row.permissionId);
        },
        handleOriginalForm() {
            if (this.$route.query.distributeId) {
                const form = localStore.get(this.$route.path);
                form['distributeId'] = this.$route.query.distributeId;
                localStore.set(this.$route.path, form);
            } else {
                const form = localStore.get(this.$route.path);
                form['distributeId'] = '';
                localStore.set(this.$route.path, form);
            }
        },
        loadInitData() {
            this.$Dictionary.effectiveType().then(list => {
                list.forEach(elem => {
                    this.queryForm.queryObject.status.config.data.push({ value: elem.code, label: elem.name });
                });
                this.$convertList(list, this.EffectiveTypeList, elem => {
                    return true;
                });
            });
            this.$Dictionary.permissionType().then(list => {
                this.$convertList(list, this.PermissionTypeList, elem => {
                    return true;
                });
            });
        },
        formatterDate(row, porpInfo) {
            return row[porpInfo.property] ? row[porpInfo.property] : this.$t('global.perpetual');
        },
        queryFunction(params) {
            return listPermision(params);
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        handleEfficacy(index, row) {
            this.$confirm(this.$t('tip.modifyTheUserPermissionStatus'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                setLessonPermisson({id: row.id }).then(res => {
                    this.$message.success(this.$t('tip.operationSuccessfully'));
                    this.reloadTable();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.operationFailed'));
                    this.reloadTable();
                });
            }).catch(() => { });
        },
        handleBelongs(index, row) {
            this.$refs.belong.doShow(row.id);
        }
    }
};
</script>
<style lang="scss" scoped>

</style>