rt-sim-training-client/src/views/planMonitor/detail.vue

<template>
  <el-card :style="{height: height+'px'}" style="overflow-y:scroll;padding-bottom:20px;">
    <div class="runPlanHeader" style="width: 90%;margin-left:5%;margin-top:20px;display: inline-block;">
      <div class="runPlanList">{{ $t('planMonitor.openRunPlan.runPlanList') }}</div>
      <el-button v-if="isCreate" size="small" type="primary" class="createRunPlan" @click="handleCreate">{{ $t('planMonitor.createRunningDiagram') }}</el-button>
    </div>
    <el-table
      :data="runPlanList"
      height="500"
      stripe
      border
      style="width: 90%;margin-left:5%;margin-top:20px;display: inline-block;"
    >
      <el-table-column prop="name" :label="this.$t('planMonitor.runGraphName')" />
      <el-table-column v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))" :label="this.$t('global.status')">
        <template slot-scope="scope">
          <el-tag>{{ handlerStatus(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))"
        prop="explanation"
        show-overflow-tooltip
        :label="this.$t('planMonitor.explanation')"
      />
      <el-table-column :label="this.$t('planMonitor.creationDate')">
        <template slot-scope="scope">
          <el-tag type="success">{{ handleTime(scope.row.createTime) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="this.$t('global.operate')" width="400">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status !=='1'" size="mini" class="button_box" type="success" @click="handleConfirm(scope.row)">{{ $t('planMonitor.load') }}</el-button>
          <el-button v-if="isCreate && scope.row.status !=='1'" size="mini" class="button_box" type="primary" @click="handleEdit(scope.row)">{{ $t('planMonitor.modifyName') }}</el-button>
          <el-button v-if="isCreate && scope.row.status !=='1'" size="mini" class="button_box" type="danger" @click="handleDelete(scope.row)">{{ $t('global.delete') }}</el-button>
          <el-button v-if="isCreate && scope.row.status ==='0'" size="mini" class="button_box" type="primary" @click="handlePublish(scope.row)">{{ hasRelease?$t('global.release'):$t('planMonitor.applyRelease') }}</el-button>
          <el-button v-if="scope.row.status === '1'" size="mini" class="button_box" type="primary" @click="handlePreview(scope.row)">{{ $t('planMonitor.preview') }}</el-button>
          <el-button v-if="scope.row.status === '1'" size="mini" class="button_box" type="danger" @click="handelRevert(scope.row)">{{ $t('planMonitor.revoke') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <create-empty-plan ref="createEmptyPlan" :plan-convert="PlanConvert" @dispatchDialog="dispatchDialog" @refresh="refresh" />
    <!-- @dispatchOperate="dispatchOperate" -->
    <edit-plan-name ref="editPlan" @renewal="getRunPlanList" />
  </el-card>
</template>
<script>
import EditPlanName from './editTool/menus/editPlanName';
import CreateEmptyPlan from './editTool/menus/createEmptyPlan';
import { getRpListByUserMapId, publishRunPlan, releaseOrCancelRunPlan, previewRunPlan} from '@/api/designPlatform';
import { getRpListByMapId, deleteRunPlan } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';
export default {
    name: 'UserRunPlanList',
    components: {
        CreateEmptyPlan,
        EditPlanName
        // LimitList
    },
    filters: {
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            // height: 260,
            // planId: '',
            // planName: '',
            type: 'add',
            // defaultShowKeys: [],
            runPlanList: [],
            runPlanDict: {},
            isCreate:false,
            PlanConvert: {}
            // defaultProps: {
            // 	label: 'name'
            // }
        };
    },
    computed: {
        height() {
            return this.$store.state.app.height - 60 - 30;
        },
        skinCode() {
            return this.$route.query.skinCode || '02';
        },
        hasRelease() {
            return this.$store.state.user.roles.includes('04') ||
                this.$store.state.user.roles.includes('05');
        }
    },
    watch: {
        '$route' () {
            this.getRunPlanList();
        }
    },
    created() {
        this.PlanConvert = this.$theme.loadPlanConvert(this.$route.query.skinCode);
    },
    mounted() {
        this.getRunPlanList();
    },
    methods:{
        refresh() {
            this.getRunPlanList();
        },
        getRunPlanList() {
            if (/^\/design\/userlist/.test(this.$route.fullPath)) {
                this.isCreate = false;
                getRpListByUserMapId(this.$route.params.mapId).then((resp) => {
                    this.runPlanList = resp.data;
                    this.runPlanList.forEach(elem => {
                        this.runPlanDict[elem.id] = elem.name;
                    });
                    // this.dialogShow = true;
                }).catch(() => {
                    this.$messageBox(this.$t('planMonitor.openRunPlan.getRunPlanListFail'));
                });
            } else {
                this.isCreate = true;
                getRpListByMapId(this.$route.params.mapId).then((resp) => {
                    this.runPlanList = resp.data;
                    this.runPlanList.forEach(elem => {
                        this.runPlanDict[elem.id] = elem.name;
                    });
                    // this.dialogShow = true;
                }).catch(() => {
                    this.$messageBox(this.$t('planMonitor.openRunPlan.getRunPlanListFail'));
                });
            }
        },
        // dispatchOperate(){
        // 	this.$refs[operateObj.dialogName][operateObj.operate](operateObj.params);
        // },
        dispatchDialog() {
            this.$refs['createEmptyPlan'].doShow();
        },
        handleCreate() {
            this.$refs['createEmptyPlan'].doShow();
        },
        handleConfirm(row) {
            this.loadRunPlanData({
                planId: row.id,
                skinCode: this.$route.query.skinCode,
                planName: row.name
            });
        },
        // 修改运行图名称
        handleEdit(row) {
            if (row.id && row.name) {
                this.$refs.editPlan.doShow({id: row.id, name: row.name});
            } else {
                this.$message.info(this.$t('planMonitor.openRunPlan.pleaseSelectRunplan'));
            }
        },
        loadRunPlanData({ refresh, planId, skinCode, planName }) {
            if (refresh) {
                this.$store.dispatch('runPlan/refresh');
            } else {
                const query = { skinCode: skinCode, mapId: this.$route.params.mapId, planId: planId, planName: planName };
                if (/^\/design\/userlist/.test(this.$route.fullPath)) {
                    this.$router.push({ path: `${UrlConfig.plan.usertool}`, query: query });
                } else {
                    this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
                }
            }
        },
        // 删除运行图
        handleDelete(row) {
            this.$confirm(this.$t('planMonitor.openRunPlan.confirmDeleteRunPlan'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type: 'warning'
            }).then(() => {
                deleteRunPlan(row.id).then(Response => {
                    this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
                    // if (row.id === this.$route.query.planId) {
                    // 	const query = { skinCode: this.$route.query.skinCode, mapId: this.$route.query.mapId };
                    // 	this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
                    // }
                    this.refresh();
                    // this.doClose();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
                });
            }).catch(() => { });
        },
        handlePublish(row) {
            this.$confirm(this.hasRelease ? this.$t('tip.publishRunPlanTips') : this.$t('tip.applyRunPlanTips'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type: 'warning'
            }).then(() => {
                if (this.hasRelease) {
                    publishRunPlan(row.id, {runPlanName: name}).then(resp => {
                        this.$message.success(this.$t('tip.publishRunPlanSuccess'));
                        this.refresh();
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.publishRunPlanFail'));
                        this.refresh();
                    });
                } else {
                    releaseOrCancelRunPlan(row.id, '1').then(resp => {
                        this.$message.success(this.$t('tip.applyRunPlanSuccess'));
                        this.refresh();
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.applyRunPlanFail'));
                        this.refresh();
                    });
                }
            });
        },
        handelRevert(row) {
		    this.$confirm(this.$t('tip.cancelRunPlanTips'), this.$t('tip.hint'), {
		        confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type:'warning'
            }).then(() => {
                releaseOrCancelRunPlan(row.id, '0').then(resp=> {
                    this.$message.success(this.$t('tip.cancelRunPlanSuccess'));
                    this.refresh();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.cancelRunPlanFail'));
                    this.refresh();
                });
            });
        },
        handlerStatus(row) {
            let lessonStatus = '';
            switch (row.status) {
            case '0':
                lessonStatus = this.$t('lesson.notRelease');
                break;
            case '1':
                lessonStatus = this.$t('lesson.pendingReview');
                break;
            case '2':
                lessonStatus = this.$t('lesson.published');
                break;
            case '3':
                lessonStatus = this.$t('lesson.rejected');
                break;
            }
            return lessonStatus;
        },
        handleTime(time) {
            return time.replace('T', ' ');
        },
        handlePreview(row) {
            previewRunPlan(row.id).then(resp => {
                const query = {
                    skinCode: row.skinCode, prdType: '01', group: resp.data, mapId: row.mapId, planId: row.id, from:''
                };
                this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
                launchFullscreen();
            }).catch(error => {
                this.$messageBox(this.$t('tip.createSimulationFaild') + this.$t('global.colon') + error.message);
            });
        }
    }
};
</script>
<style scoped>
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

	.el-button+.el-button{
		margin-top:5px;
		margin-left: 0px;
	}

	.createRunPlan{
		display:inline-block;float:right;margin-right:20px;
	}
	.runPlanHeader{
		display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
	}
	.runPlanList{
		display:inline-block;padding:7px 0px
	}
</style>