rt-sim-training-client/src/views/lesson/trainingmanage/index.vue

<template>
  <div style="height: 100%; overflow-y: auto;">
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" style="width: 98%;margin-left:1%;margin-top:20px;" />
    <training-draft
      ref="draftTrain"
      :map-id-list="mapIdList"
      :training-type-list="trainingTypeList"
      :training-operate-type-map="trainingOperateTypeMap"
      @refresh="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 ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import { pageQueryTraining, pageQueryTrainingNew } from '@/api/jmap/training';
import { trainingNotify, trainingNotifyNew } from '@/api/simulation';
import { launchFullscreen } from '@/utils/screen';
import { getPublishMapListOnline } from '@/api/jmap/map';
import { UrlConfig } from '@/router/index';
import TrainingDraft from './draft';
import localStore from 'storejs';

export default {
    name: 'TrainingGeneration',
    components: {
        TrainingDraft
    },
    data() {
        return {
            mapIdList: [],
            trainingTypeList: [],
            trainingOperateTypeMap: {},
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '120px',
                queryObject: {
                    prdType: {
                        type: 'select',
                        label: this.$t('lesson.prdType'),
                        change: this.prdChoose,
                        config: {
                            data: []
                        }
                    },
                    type: {
                        type: 'select',
                        label: this.$t('lesson.trainingType'),
                        change: this.typeChoose,
                        config: {
                            data: []
                        }
                    },
                    operateType: {
                        type: 'select',
                        label: this.$t('lesson.operationType'),
                        config: {
                            data: []
                        }
                    },
                    name: {
                        type: 'text',
                        label: this.$t('lesson.trainingName')
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('lesson.trainingName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('lesson.prdType'),
                        prop: 'prdType',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.prdType, this.prdTypeList, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('lesson.trainingType'),
                        prop: 'type',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.type, this.trainingTypeList, ['code', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('lesson.operationType'),
                        prop: 'operateType',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.operateType, this.trainingOperateTypeMap[row.type], ['code', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('lesson.minDuration'),
                        prop: 'minDuration'
                    },
                    {
                        title: this.$t('lesson.maxDuration'),
                        prop: 'maxDuration'
                    },
                    {
                        title: this.$t('lesson.remarks'),
                        prop: 'remarks'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('lesson.demonstration'),
                                handleClick: this.demoDisplay,
                                type: ''
                            }
                            /* {
								name: this.$t('lesson.trainingRecord'),
								handleClick: this.trainingRecord,
								type: ''
							}*/
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('lesson.generateTraining'), btnCode: 'employee_auto', handler: this.autoMaticTrainging },
                    { text: this.$t('lesson.updateTraining'), btnCode: 'employee_edit', handler: this.editTrainingByType, type: 'warning'},
                    { text: this.$t('lesson.deleteTraining'), btnCode: 'employee_delete', handler: this.delAutoMaticTrainging, type: 'danger'}
                ]
            },

            currentModel: {}
        };
    },
    computed:{
        prdTypeList() {
            const productTypeList = ConstConfig.ConstSelect.prdType;
            return Cookies.get('user_lang') == 'en'
                ? productTypeList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
                : productTypeList.map(elem => { return { value: elem.value, label: elem.label }; });
        }
    },
    async created() {
        await this.loadInitData();
        const json = localStore.get(this.$route.path);
        json.type = '';
        json.prdType = '';
        json.operateType = '';
    },
    methods: {
        async loadInitData() {
            this.mapIdList = [];
            this.queryForm.queryObject.prdType.config.data = [];
            getPublishMapListOnline().then(response => {
                this.mapIdList = response.data;
            });
            this.queryForm.queryObject.prdType.config.data = this.prdTypeList;

            // 获取实训类型
            this.trainingTypeList = [];
            this.$Dictionary.trainingType().then(list => {
                this.trainingTypeList = list;
                list.forEach(elem => {
                    this.queryForm.queryObject.type.config.data.push({ value: elem.code, label: elem.name });
                });
            });

            this.trainingOperateTypeMap = {};
            const list01 = await this.$Dictionary.stationControl();
            this.trainingOperateTypeMap['01'] = list01; // 控制权实训
            const list02 = await this.$Dictionary.signalOperation();
            this.trainingOperateTypeMap['02'] = list02; // 信号机实训
            const list03 = await this.$Dictionary.switchOperation();
            this.trainingOperateTypeMap['03'] = list03; // 道岔实训
            const list04 = await this.$Dictionary.sectionOperation();
            this.trainingOperateTypeMap['04'] = list04; // 区段实训
            const list05 = await this.$Dictionary.stationStandOperation();
            this.trainingOperateTypeMap['05'] = list05; // 站台实训
            const list06 = await this.$Dictionary.trainPlanOperation();
            this.trainingOperateTypeMap['06'] = list06; // 行车计划实训
            const list07 = await this.$Dictionary.trainOperation();
            this.trainingOperateTypeMap['07'] = list07; // 列车实训
            const list08 = await this.$Dictionary.limitOperation();
            this.trainingOperateTypeMap['08'] = list08; // 限速实训
            this.reloadTable();
        },
        prdChoose(form) {
            form.type = '';
            form.operateType = '';
        },
        typeChoose(form) {
            this.queryForm.queryObject.operateType.config.data = [];
            form.operateType = '';
            if (form && form.type) {
                this.trainingOperateTypeMap[form.type].forEach(elem => {
                    this.queryForm.queryObject.operateType.config.data.push({ value: elem.code, label: elem.name });
                });
            }
        },
        autoMaticTrainging() {
            this.$refs.draftTrain.show({ event: '01', title: this.$t('lesson.automaticGenerationOfTraining') });
        },
        editTrainingByType() {
            this.$refs.draftTrain.show({ event: '02', title: this.$t('lesson.modifyTrainingByCategory') });
        },
        delAutoMaticTrainging() {
            this.$refs.draftTrain.show({ event: '03', title: this.$t('lesson.deleteAutoGeneratedTraining') });
        },
        demoDisplay(index, node) {
            if (this.$route.query.drawWay == 'true') {
                trainingNotifyNew({ trainingId: node.id }).then(resp => {
                    /** 区分演示和正式，需要在演示时设置lessonId为0*/
                    const query = { group: resp.data, trainingId: node.id, lessonId: 0, mapId: this.$route.query.mapId};
                    this.$router.push({ path: `${UrlConfig.display}/manage`, query: query });
                    launchFullscreen();
                }).catch(error => {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                });
            } else {
                trainingNotify({ trainingId: node.id }).then(resp => {
                    /** 区分演示和正式，需要在演示时设置lessonId为0*/
                    const query = { group: resp.data, trainingId: node.id, lessonId: 0, mapId: this.$route.query.mapId};
                    this.$router.push({ path: `${UrlConfig.display}/manage`, query: query });
                    launchFullscreen();
                }).catch(error => {
                    this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
                });
            }

        },
        reloadTable() {
            this.queryList.reload();
        },
        turnback() {
            this.$router.go(-1);
        },
        trainingRecord(index, node) {
            if (this.$route.query.drawWay == 'true') {
                trainingNotifyNew({ trainingId: node.id }).then(resp => {
                    this.group = resp.data;
                    this.$router.push({ path: `${UrlConfig.design.trainingRecord}/${node.id}/${node.name}`, query: { group: resp.data } });
                }).catch(error => {
                    this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
                });
            } else {
                trainingNotify({ trainingId: node.id }).then(resp => {
                    this.group = resp.data;
                    this.$router.push({ path: `${UrlConfig.design.trainingRecord}/${node.id}/${node.name}`, query: { group: resp.data } });
                }).catch(error => {
                    this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
                });
            }

        },
        queryFunction(params) {
            params['mapId'] = this.$route.query.mapId;
            if (this.$route.query.drawWay == 'true') {
                return pageQueryTrainingNew(params);
            } else {
                return pageQueryTraining(params);
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
</style>