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

<template>
  <el-card :style="{height: height+'px'}">
	<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 size="small" type="primary" @click="handleCreate" class="createRunPlan" v-if="isCreate">{{$t('planMonitor.createRunningDiagram')}}</el-button>
	</div>
	<el-table :data="runPlanList" height="600" 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 :label="this.$t('global.status')" v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))">
            <template slot-scope="scope">
                <el-tag>{{handlerStatus(scope.row)}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="explanation"
            show-overflow-tooltip
			v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))"
            :label="this.$t('planMonitor.explanation')">
        </el-table-column>
        <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 size="mini" class="button_box" type="success" @click="handleConfirm(scope.row)" v-if="scope.row.status !=='1'">{{$t('planMonitor.load')}}</el-button>
            <el-button size="mini" class="button_box" type="primary" @click="handleEdit(scope.row)" v-if="isCreate && scope.row.status !=='1'">{{$t('planMonitor.modifyName')}}</el-button>
            <el-button size="mini" class="button_box" type="danger" @click="handleDelete(scope.row)" v-if="isCreate && scope.row.status !=='1'">{{$t('global.delete')}}</el-button>
            <el-button size="mini" class="button_box" type="primary" @click="handlePublish(scope.row)" v-if="isCreate && scope.row.status ==='0'">{{hasRelease?$t('global.release'):'申请发布'}}</el-button>
            <el-button size="mini" class="button_box" type="primary" @click="handlePreview(scope.row)" v-if="scope.row.status === '1'">预览</el-button>
            <el-button size="mini" class="button_box" type="danger" @click="handelRevert(scope.row)" v-if="scope.row.status === '1'" >撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
	  <create-empty-plan ref="createEmptyPlan" :plan-convert="PlanConvert" @dispatchOperate="dispatchOperate" @dispatchDialog="dispatchDialog" @refresh="refresh"/>
	  <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 - 50;
		},
		skinCode() {
			return this.$route.query.skinCode || '02';
		},
        hasRelease() {
            return this.$store.state.user.roles.includes('04') ||
                this.$store.state.user.roles.includes('05');
        }
	},
	created(){
		this.PlanConvert = this.$theme.loadPlanConvert(this.$route.query.skinCode);
	},
	mounted(){
		this.getRunPlanList();
	},
	watch: {
		'$route' () {
			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.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.refresh();
                    }).catch(() => {
                        this.$messageBox('发布运行图失败！');
                        this.refresh();
                    })
                } else {
                    releaseOrCancelRunPlan(row.id, '1').then(resp => {
                        this.$message.success('提交运行图发布申请成功！');
                        this.refresh();
                    }).catch(() => {
                        this.$messageBox('提交运行图发布申请失败！');
                        this.refresh();
                    })
                }
            });
        },
        handelRevert(row) {
		    this.$confirm('此操作将撤销发布运行图申请，是否继续？',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.refresh();
                }).catch(() => {
                    this.$messageBox('撤销运行图发布申请失败！')
                    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) {
            let timeList = time.split("T");
            return timeList[0] + ' ' +timeList[1];
        },
        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";

    // .title {
    //     font-weight: bold
    // }

    // .time-item {
    //     font-size: 24px;
    //     color: black !important;
    // }

    // .time-label {
    //     display: -moz-inline-box;
    //     display: inline-block;
    //     text-align: right;
    //     margin-left: 14px;
    // }

    // .time-elem {
    //     color: rgb(90, 89, 89) !important;
    // }

    // .list-item {
    //     font-size: 16px;
    //     margin-bottom: 20px;
    // }

    // .list-label {
    //     display: -moz-inline-box;
    //     display: inline-block;
    //     text-align: right;
    //     /* width: 160px; */
    // }

    // .list-elem {
    //     color: #808080 !important;
    // }

	.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>