rt-sim-training-client/src/views/designPlatform/trainingList.vue

<template>
  <el-dialog v-dialogDrag title="实训" :visible.sync="dialogVisible" width="1000px" :before-close="doClose" center>
    <div>
      <el-card class="box-card">
        <div style="margin-bottom: 10px;font-size: 16px;">{{ `当前实训名称：${training.name || ''}` }}</div>
        <div style="font-size: 16px;">{{ `当前实训描述：${training.description || ''}` }}</div>
      </el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="单操实训" name="first">
          <QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
        </el-tab-pane>
        <el-tab-pane label="场景实训" name="second">
          <QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryListScene" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { getPublishSingleList, getPublishTrainingDetail, loadPublishTraining, getPublishScenesList } from '@/api/jmap/training';
import Cookies from 'js-cookie';
import ConstConfig from '@/scripts/ConstConfig';

export default {
    name: 'TrainingList',
    components:{
    },
    props: {},
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            training: {},
            queryForm: {
                labelWidth: '100px',
                reset: true,
                show:false
            },
            prdTypeMap: {
                DISPATCHER: '02',
                STATION_SUPERVISOR: '01',
                STATION_ASSISTANT: '01',
                DEPOT_DISPATCHER: '09',
                DRIVER: '04',
                RAIL_CTC: '10'
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                paginationHiden: true,
                indexShow: true,
                height: 500,
                columns: [
                    {
                        title: this.$t('trainingManage.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('trainingManage.description'),
                        prop: 'description'
                    },
                    {
                        title: this.$t('trainingManage.type'),
                        prop: 'type',
                        type: 'tag',
                        columnValue: (row) => { return this.covertData(row); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: this.$t('trainingManage.labelJson'),
                        prop: 'labelJson'
                    },
                    {
                        type: 'button',
                        title: this.$t('trainingManage.operate'),
                        width: '150',
                        buttons: [
                            {
                                name: '加载',
                                handleClick: this.loadScript,
                                type: 'primary',
                                showControl:(row) => { return row.id; }
                            }
                        ]
                    }
                ]
            },
            queryListScene: {
                query: this.queryFunctionScene,
                selectCheckShow: false,
                paginationHiden: true,
                indexShow: true,
                height: 500,
                columns: [
                    {
                        title: this.$t('trainingManage.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('trainingManage.description'),
                        prop: 'description'
                    },
                    {
                        title: this.$t('trainingManage.type'),
                        prop: 'type',
                        type: 'tag',
                        columnValue: (row) => { return this.covertData(row); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: this.$t('trainingManage.labelJson'),
                        prop: 'labelJson'
                    },
                    {
                        type: 'button',
                        title: this.$t('trainingManage.operate'),
                        width: '150',
                        buttons: [
                            {
                                name: '加载',
                                handleClick: this.loadScript,
                                type: 'primary',
                                showControl:(row) => { return row.id; }
                            }
                        ]
                    }
                ]
            }
        };
    },
    computed: {
        group() {
            return this.$route.query.group;
        },
        mapId() {
            return this.$route.query.mapId;
        },
        teachMode() {
            return this.$store.state.trainingNew.teachMode;
        },
        trainingSwitch() {
            return this.$store.state.trainingNew.trainingSwitch;
        }
    },
    methods: {
        queryFunction() {
            return getPublishSingleList(this.mapId);
        },
        queryFunctionScene() {
            return getPublishScenesList(this.mapId);
        },
        doShow() {
            this.getListData();
            this.dialogVisible = true;
        },
        doClose() {
            this.dialogVisible = false;
        },
        async loadScript(index, data) {
            if (this.trainingSwitch) {
                this.$message.error('请先结束当前实训后再加载新的实训！');
                return;
            }
            try {
                const detailResp = await getPublishTrainingDetail(data.id);
                this.training = detailResp.data;
                if (detailResp.data.mapLocationJson) {
                    const mapLocation = JSON.parse(detailResp.data.mapLocationJson);
                    this.$jlmap.updateTransform(mapLocation.scale, {x:mapLocation.x, y:mapLocation.y});
                }
                if (detailResp.data.playerIdJson) {
                    const playerId = JSON.parse(detailResp.data.playerIdJson)[0];
                    if (playerId) {
                        const member = this.$store.state.training.memberData[playerId];
                        this.$store.dispatch('training/setPrdType', this.prdTypeMap[member.type]);
                        this.$store.dispatch('training/setRoles', member.type);
                    }
                }
                this.$store.dispatch('trainingNew/setTrainingDetail', detailResp.data);
                await loadPublishTraining(this.group, data.id, {mode: this.teachMode});
                this.$message.success('加载实训成功！');
            } catch (e) {
                this.$message.error('加载实训失败！');
            }
        },
        covertData(row) {
            const releaseReview = ConstConfig.ConstSelect.trainingType;
            const lastData = Object.assign({}, row);
            if (Cookies.get('user_lang') == 'en') {
                releaseReview.forEach(function(element) {
                    const rolename = element.value;
                    if (lastData.type == rolename) {
                        lastData.type = element.enlabel;
                    }
                });
            } else {
                releaseReview.forEach(function(element) {
                    const rolename = element.value;
                    if (lastData.type == rolename) {
                        lastData.type = element.label;
                    }
                });
            }
            return lastData.type;
        },
        getListData() {
            this.$refs.queryListPage && this.$refs.queryListPage.commitQuery();
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog--center .el-dialog__body{
    padding: 10px 25px 10px 25px;
}
.box-card{
	padding: 10px;
	font-size: 14px;
}
.trainingHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 5px;
	.flexNull {
		flex: 1;
	}
}
</style>