rt-sim-training-client/src/views/messageBoard/manage.vue

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <create-draft ref="createDraft" :project-option-list="projectOptionList" @reloadTable="reloadTable" />
  </div>
</template>

<script>
import { queryPostPage } from '@/api/learn';
import { ProjectList} from '@/scripts/ProjectConfig';
import CreateDraft from './create';
export default {
    name: 'Manage',
    components:{
        CreateDraft
    },
    data() {
        return {
            projectOptionList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '140px',
                reset: false,
                queryObject: {
                    project: {
                        type: 'select',
                        label: '所属项目',
                        config: {
                            data: []
                        }
                    }
                }
            },
            queryList: {
                query: queryPostPage,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '项目',
                        prop: 'project',
                        type: 'tag',
                        columnValue: (row) => { return this.getProjectName(row.project); },
                        tagType: (row) => {
                            return 'success';
                        }
                    },
                    {
                        title: '留言板名称',
                        prop: 'title'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '350',
                        buttons: [
                            {
                                name: '进入',
                                handleClick: this.handleEnter
                            },
                            {
                                name: '修改',
                                handleClick: this.handleUpdate
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '创建留言板', handler: this.handleCreateMessageBoard }
                ]
            }
        };
    },
    mounted() {
        this.projectOptionList = [{value: 'DEFAULT', label: '玖琏云平台'}];
        ProjectList.forEach(item => {
            this.projectOptionList.push({value: item.value.toUpperCase(), label: item.label});
        });
        this.queryForm.queryObject.project.config.data = this.projectOptionList;
    },
    methods:{
        getProjectName(projectCode) {
            let name;
            this.projectOptionList.forEach(item => {
                if (item.value.toUpperCase() == projectCode) {
                    name = item.label;
                }
            });
            return name;
        },
        handleCreateMessageBoard() {
            this.$refs.createDraft.doShow();
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        handleEnter(index, row) {
            const routeData = this.$router.resolve({
                path:'/messageBoard',
                query:{
                    project: row.project.toLowerCase(),
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank', 'noopener noreferrer');
        },
        handleUpdate(index, row) {
            this.$refs.createDraft.doShow(row);
        }
    }
};
</script>

<style scoped>

</style>