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: 14px;">{{ `当前实训名称：${training.name || ''}` }}</div>
        <div>{{ `当前实训描述：${training.description || ''}` }}</div>
      </el-card>
      <div class="trainingHeader">
        <div class="trainingList">实训列表</div>
        <div class="flexNull" />
      </div>
      <QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    </div>
  </el-dialog>
</template>

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

export default {
    name: 'TrainingList',
    components:{
    },
    props: {},
    data() {
        return {
            dialogVisible: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            training: {},
            queryForm: {
                labelWidth: '100px',
                reset: true,
                show:false
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                paginationHiden: true,
                indexShow: true,
                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: {
    },
    methods: {
        queryFunction() {
            return getPublishSingleList(this.$route.query.mapId);
        },
        doShow() {
            this.getListData();
            this.dialogVisible = true;
        },
        doClose() {
            this.dialogVisible = false;
        },
        loadScript(index, data) {
            getPublishTrainingDetail(data.id).then(resp => {
                this.training = resp.data;
            }).catch(() => {
                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>