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

<template>
  <div style="height: 100%; overflow-y: auto;">
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <create-task ref="CreateTask" @reloadTable="reloadTable" />
    <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 { getTaskList, postTask, postTaskCancel } from '@/api/management/task';
import { getPublishMapListOnline } from '@/api/jmap/map';
import CreateTask from './createTask';

export default {
    name: 'ManagementList',
    components: {
        CreateTask
    },
    data() {
        return {
            mapIdList: [],
            taskList: [],
            taskStatusList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                queryObject: {
                    status: {
                        type: 'select',
                        label: this.$t('global.status'),
                        config: {
                            data: []
                        }
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('lesson.mapName'),
                        prop: 'parameter',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.parameter, this.mapIdList, ['id', '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.mapIdList = [];
            getPublishMapListOnline().then(response => {
                this.mapIdList = 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')}, ${error.message}`);
                });
            });
        },
        taskCancel(index, node) {
            this.$confirm( this.$t('tip.cancelsTaskHint'), 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')}, ${error.message}`);
                });
            });
        },
        reloadTable() {
            this.queryList.reload();
        },
        createTask() {
            this.$refs.CreateTask.doShow();
        },
        turnback() {
            this.$router.go(-1);
        },
        queryFunction(params) {
            params['mapId'] = this.$route.query.mapId;
            return getTaskList(params);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
</style>