rt-sim-training-client/src/views/lesson/taskmanage/list.vue

<template>
    <div>
        <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList">
        </QueryListPage>
        <create-task ref='CreateTask' @reloadTable="reloadTable"></create-task>
        <div class="draft">
            <el-button-group>
                <el-button type="primary" @click="turnback">{{ $t('global.back') }}</el-button>
            </el-button-group>
        </div>
    </div>
</template>

<script>
    import { listPublishMap, getProductList, putMapProductOnLine, putMapProductOffLine } from '@/api/jmap/mapdraft';
    import { getTaskList, postTask, postTaskCancel } from '@/api/management/task';
    import { launchFullscreen } from '@/utils/screen';
    import { getSkinCodeList } from '@/api/management/mapskin'
    import { UrlConfig } from '@/router/index';
    import localStore from 'storejs';
    import CreateTask from './createTask';

    export default {
        name: 'ManagementList',
        components: {
            CreateTask
        },
        data() {
            return {
                skinCodeList: [],
                taskList: [],
                taskStatusList: [],
                pagerConfig: {
                    pageSize: 'pageSize',
                    pageIndex: 'pageNum'
                },
                queryForm: {
                    labelWidth: '80px',
                    queryObject: {
                        status: {
                            type: 'select',
                            label: this.$t('global.status'),
                            config: {
                                data: []
                            }
                        }
                    }
                },
                queryList: {
                    query: getTaskList,
                    selectCheckShow: false,
                    indexShow: true,
                    columns: [
                        {
                            title: this.$t('lesson.skinType'),
                            prop: 'parameter',
                            type: 'tag',
                            columnValue: (row) => { return this.$convertField(row.parameter, this.skinCodeList, ['code', 'name']) },
                            tagType: (row) => { return '' }
                        },
                        {
                            title: this.$t('lesson.creationTime'),
                            prop: 'createTime'
                        },
                        {
                            title: this.$t('global.status'),
                            prop: 'status',
                            type: 'tag',
                            columnValue: (row) => { return this.$convertField(row.status, this.taskStatusList, ['code', 'name']) },
                            tagType: (row) => { if (row.status != '03') { return 'warning' } else { return 'success' } }
                        },
                        {
                            title: this.$t('global.startTime'),
                            prop: 'startTime'
                        },
                        {
                            title: this.$t('lesson.finishTime'),
                            prop: 'finishTime'
                        },
                        {
                            title: this.$t('lesson.createResults'),
                            prop: 'result',
                            width: '400px'
                        },
                        {
                            type: 'button',
                            title: this.$t('global.operate'),
                            width: '250',
                            buttons: [
                                {
                                    name: this.$t('lesson.start'),
                                    handleClick: this.taskStart,
                                    type: '',
                                    showControl: (row) => { return row.status == '01' }
                                },
                                {
                                    name: this.$t('global.cancel'),
                                    handleClick: this.taskCancel,
                                    type: '',
                                    showControl: (row) => { return row.status == '04' }
                                },
                                {
                                    name: this.$t('lesson.toPerform'),
                                    handleClick: this.taskStart,
                                    type: '',
                                    showControl: (row) => { return row.status == '03' || row.status == '05' }
                                },
                            ]
                        }
                    ],
                    actions: [
                        { text: this.$t('global.create'), btnCode: 'employee_insert', handler: this.createTask }
                    ]
                },

                currentModel: {}
            }
        },
        created() {
            this.loadInitData();
        },
        methods: {
            loadInitData() {
                this.skinCodeList = [];
                getSkinCodeList().then(response => {
                    this.skinCodeList = response.data;
                })

                this.taskStatusList = [];
                this.$Dictionary.taskStatus().then(list => {
                    this.taskStatusList = list;
                    list.forEach(elem => {
                        this.queryForm.queryObject.status.config.data.push({ value: elem.code, label: elem.name });
                    });
                })
            },
            taskStart(index, node) {
                this.$confirm( this.$t('tip.startOperationHint'), this.$t('global.tips'), {
                    confirmButtonText: this.$t('global.confirm'),
                    cancelButtonText: this.$t('global.cancel'),
                    type: 'warning'
                }).then(() => {
                    postTask({ id: node.id }).then(res => {
                        this.$message.success(this.$t('lesson.operateSuccess'));
                        this.reloadTable();
                    }).catch(error => {
                        this.reloadTable();
                        this.$messageBox(this.$t('error.operationFailure'));
                    })
                })
            },
            taskCancel(index, node) {
                this.$confirm( this.$t('tip.startOperationHint'), this.$t('global.tips'), {
                    confirmButtonText: this.$t('global.confirm'),
                    cancelButtonText: this.$t('global.cancel'),
                    type: 'warning'
                }).then(() => {
                    postTaskCancel(node.id).then(res => {
                        this.$message.success(this.$t('lesson.operateSuccess'));
                        this.reloadTable();
                    }).catch(error => {
                        this.reloadTable();
                        this.$messageBox(this.$t('error.operationFailure'));
                    })
                })
            },
            reloadTable() {
                this.queryList.reload()
            },
            createTask() {
                this.$refs.CreateTask.doShow();
            },
            turnback() {
                this.$router.go(-1)
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
</style>