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

<template>
  <el-card :style="{height: height+'px'}">
    <!-- <div slot="header" style="text-align: center;">
      <span class=" title">{{ $t('global.line')+courseModel.name }}</span>
    </div>
    <div style="margin:50px; overflow-x: auto;" :style="{ height: height - 150 +'px' }">
      <p class="list-item">
        <span class="list-label">{{ $t('global.updateTime') }}</span>
        <span class="list-elem">{{ courseModel.updateTime }}</span>
      </p>
      <p class="list-item">
        <span class="list-label">{{ $t('global.permissionList') }}</span>
      </p>
      <limit-list ref="limitList" :course-model="courseModel" @initLoadPage="getScreenLists" />
      <p style="display: flex; justify-content: center;">
        <span class="list-label" />
        <el-button type="success" @click="buy">{{ $t('global.buy') }}</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="distribute">{{ $t('global.distributePermission') }}</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="transfer">{{ $t('global.transferQRCode') }}</el-button>
        <el-button type="primary" @click="start">{{ $t('planMonitor.offlineMappingSoftware') }}</el-button>
      </p>
    </div> -->
	<div class="runPlanHeader">
		<div class="runPlanList">运行图列表</div>
		<el-button size="small" type="primary" @click="handleCreate" class="createRunPlan" v-if="isCreate">创建运行图</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="运行图名称" />
        <el-table-column prop="createTime" label="创建日期" width="180" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" class="button_box" @click="handleConfirm(scope.row)">加载</el-button>
            <el-button size="mini" class="button_box" @click="handleEdit(scope.row)" v-if="isCreate">修改名称</el-button>
            <el-button size="mini" class="button_box" type="danger" @click="handleDelete(scope.row)" v-if="isCreate">删除</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 { getPublishMapInfo } from '@/api/jmap/map';
// import { PermissionType } from '@/scripts/ConstDic';
// import { UrlConfig } from '@/router/index';
// import LimitList from '@/views/components/limits/index';

// export default {
// 	name: 'ExamDetailList',
// 	components: {
// 		LimitList
// 	},
// 	filters: {
// 	},
// 	data() {
// 		return {
// 			courseModel: {
// 				mapId: '',
// 				name: '',
// 				skinCode: '',
// 				updateTime: '',
// 				pmsList: []
// 			},
// 			EffectiveTypeList: [],
// 			screenList: []
// 		};
// 	},
// 	computed: {
// 		hasPermssion() {
// 			let isShow = false;
// 			this.courseModel.pmsList.forEach(item => {
// 				if (item.canDistribute) {
// 					isShow = true;
// 				}
// 			});
// 			return isShow;
// 		},
// 		height() {
// 			return this.$store.state.app.height;
// 		}
// 	},
// 	watch: {
// 		$route(newVal) {
// 			this.initLoadPage();
// 		}
// 	},
// 	async mounted() {
// 		this.$Dictionary.effectiveType().then(list => {
// 			this.EffectiveTypeList = list;
// 		});
// 		await this.getScreenLists();
// 		this.initLoadPage();
// 	},
// 	methods: {
// 		async getScreenLists() {
// 		},
// 		async initLoadPage() {
// 			const that = this;
// 			const data = { id: this.$route.params.lessonId };
// 			if (parseInt(data.id)) {
// 				try {
// 					const res = await getPublishMapInfo(data.id);
// 					this.tryUser = 0;
// 					that.courseModel = {
// 						name: res.data.name,
// 						mapId: res.data.id,
// 						skinCode: res.data.skinCode,
// 						updateTime: res.data.updateTime,
// 						pmsList: that.screenList || [],
// 						PermissionType: PermissionType.PLAN
// 					};

// 					this.$store.dispatch('training/setPrdType', res.data.prdType);
// 				} catch (error) {
// 					this.$messageBox(this.$t('error.refreshFailed'));
// 				}
// 			}
// 		},
// 		buy() {
// 			this.$router.push({
// 				path: `${UrlConfig.plan.pay}/${this.$route.params.lessonId}`,
// 				query: { permissionType: PermissionType.SCREEN, prdCode: this.courseModel.prdCode, mapId: this.courseModel.mapId }
// 			});
// 		},
// 		transfer() {
// 			if (this.$refs) {
// 				this.$refs.limitList.transfer(this.courseModel);
// 			}
// 		},
// 		distribute() {
// 			if (this.$refs) {
// 				this.$refs.limitList.distribute(this.courseModel);
// 			}
// 		},
// 		jump() {
// 			const query = {
// 				skinCode: this.courseModel.skinCode, mapId: this.courseModel.mapId
// 			};
// 			this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
// 		},
// 		start() {
// 			this.jump();
// 		}
// 	}
// };
import EditPlanName from './editTool/menus/editPlanName';
import CreateEmptyPlan from './editTool/menus/createEmptyPlan';
import { getRpListByUserMapId} from '@/api/designPlatform';
import { getRpListByMapId, deleteRunPlan } from '@/api/runplan';
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';
		},
	},
	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(() => { });
		}
	}
};
</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>