rt-sim-training-client/src/views/scriptManage/home.vue

<template>
  <el-card :style="{height: height+'px'}">
	  <div class="scriptHeader">
		  <div class="scriptList">{{$t('scriptRecord.scriptList')}}</div>
		  <el-button size="small" type="primary" @click="handleCreate" class="createScript">{{$t('scriptRecord.scriptCreate')}}</el-button>
	  </div>
	  <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;display: inline-block;"/>
	<script-publish ref='publishScript' @reloadTable="reloadTable" @create="handleConfirmPublish" :title="$t('scriptRecord.publishScript')">
    </script-publish>
	<create-script ref='createScript' @reloadTable="reloadTable" @create="handleConfirmCreate" :title="$t('scriptRecord.createScript')">
	</create-script>
	<create-script ref='modifyScript' @reloadTable="reloadTable" @create="handleConfirmModify" :title="$t('scriptRecord.modifyScript')">
	</create-script>
  </el-card>
</template>

<script>
import Cookies from 'js-cookie';
import ConstConfig from '@/scripts/ConstConfig';
import { UrlConfig } from '@/router/index';
import { mapGetters } from 'vuex';
import { admin, superAdmin} from '@/router';
import { getQuestPageList,createQuest,deleteQuest,updateQuest,publishQuest,retractQuest} from '@/api/quest';
import { launchFullscreen } from '@/utils/screen';
import { scriptRecordNotify } from '@/api/simulation';
import CreateScript from './create';
import ScriptPublish from './publish';

export default {
	name: 'ScriptDraft',
	 components: {
		CreateScript,
		ScriptPublish
	},
	data() {
		return {
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '100px',
				reset: true,
				show:false
			},
			queryList: {
				query: this.queryFunction,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: this.$t('scriptRecord.scriptName'),
						prop: 'name'
					},
					{
						title: this.$t('scriptRecord.scriptDescription'),
						prop: 'description',
					},
					{
						title: this.$t('scriptRecord.status'),
						prop: 'status',
						type: 'tag',
						columnValue: (row) => { return this.covertData(row)},
						tagType: (row) => { return ''; }
					},
					{
						title: this.$t('scriptRecord.revokeReason'),
						prop: 'explanation',
					},
					{
						type: 'button',
						title: this.$t('scriptRecord.operate'),
						width: '400',
						buttons: [
							{
								name: this.$t('scriptRecord.scriptRecord'),
								handleClick: this.drawUp,
								type: 'success',
								showControl:(row) => { return !(row.status==1) },
							},
							{
								name: this.$t('scriptRecord.scriptModify'),
								handleClick: this.handleModify,
								type: 'primary',
								showControl:(row) => { return !(row.status==1) },
							},
							{
								name: this.$t('scriptRecord.scriptDelete'),
								handleClick: this.deleteScript,
								type: 'danger',
								showControl:(row) => { return !(row.status==1) },
							},
							{
								name: this.covertButtonname(),
								handleClick: this.publishScript,
								type: 'primary',
								showControl:(row) => { return row.status==0 },
							},
							{
								name: this.$t('scriptRecord.applyRevoke'),
								handleClick: this.revokeScript,
								type: 'primary',
								showControl:(row) => { return row.status==1 },
							},
							{
								name: this.$t('scriptRecord.preview'),
								handleClick: this.previewScript,
								type: 'success',
								showControl:(row) => { return row.status==1 },
							}
						]
					}
                ]
			}
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	watch: {
		'$route' () {
			this.reloadTable();
		}
	},
	mounted() {
		this.reloadTable();
	},
	methods: {
		queryFunction(params) {
            return getQuestPageList(this.$route.params.mapId,params);
		},
		reloadTable() {
			if (this.queryList && this.queryList.reload) {
				this.queryList.reload();
			}
		},
		drawUp(index,row) {
			scriptRecordNotify(row.id).then(resp => {
				const query = { mapId: row.mapId, group: resp.data, scriptId: row.id,lang:row.lang };
				this.$router.push({ path: `${UrlConfig.scriptDisplay}/script`, query });
				launchFullscreen();
			}).catch(error => {
				this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
			});
		},
		deleteScript(index,row) {
			this.$confirm(this.$t('scriptRecord.deleteScriptTip'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				deleteQuest(row.id).then(response => {
					this.$message.success(this.$t('scriptRecord.deleteScriptSucess'));
					this.reloadTable();
				}).catch(() => {
					this.$messageBox(this.$t('scriptRecord.deleteScriptFail'));
				});
			}).catch(() => { });
		},
		// 确定创建
		handleConfirmCreate(data) {
			if(Cookies.get("user_lang")=="en"){
				data.lang='en';
			}else{
				data.lang='zh';
			}
			createQuest(data).then(resp => {
				this.reloadTable();
				this.$message.success(this.$t('scriptRecord.createScriptSuccess'));
			}).catch(error => {
				this.$messageBox(`${this.$t('scriptRecord.createScriptFail')}: ${error.message}`);
			})
		},
		//修改
		handleModify(index, row){
			this.$refs.modifyScript.doShow(row.id);
		},
		//确认修改
		handleConfirmModify(data){
			if(Cookies.get("user_lang")=="en"){
				data.lang='en';
			}else{
				data.lang='zh';
			}
			updateQuest(data.id,data).then(resp => {
				this.reloadTable();
				this.$message.success(this.$t('scriptRecord.modifyScriptSuccess'));
			}).catch(error => {
				this.$messageBox(`${this.$t('scriptRecord.modifyScriptFail')}: ${error.message}`);
			})
		},
		// 创建
		handleCreate() {
			this.$refs.createScript.doShow(null);
		},
		covertData(row){
			let releaseReview=ConstConfig.ConstSelect.releaseReview;
			let lastData=Object.assign({}, row);
			if(Cookies.get("user_lang")=="en"){
				releaseReview.forEach(function(element){
					let rolename=element.value;
					if(lastData.status==rolename){
						lastData.status=element.enlabel;
					}
				});
			}else{
				releaseReview.forEach(function(element){
					let rolename=element.value;
					if(lastData.status==rolename){
						lastData.status=element.label;
					}
				});
			}
			return lastData.status;
			// let explanation=lastData.explanation?'{ 说明：'+lastData.explanation+'}':'';
			// return lastData.status+explanation;
		},
		handleConfirmPublish(data){
			publishQuest(data.id,{'scriptName':data.scriptName}).then(resp => {
				this.reloadTable();
				this.$message.success(this.$t('scriptRecord.publishScriptSuccess'));
			}).catch(error => {
				this.$messageBox(`${this.$t('scriptRecord.publishScriptFailed')}: ${error.message}`);
			});
		},
		publishScript(index,row){
			if(this.$store.getters.roles.indexOf(admin) >= 0 || this.$store.getters.roles.indexOf(superAdmin) >= 0){
				this.$refs.publishScript.doShow(row);
			}else{
				this.$confirm(this.$t('scriptRecord.releaseScriptTip'), this.$t('global.tips'), {
					confirmButtonText: this.$t('global.confirm'),
					cancelButtonText: this.$t('global.cancel'),
					type: 'warning'
				}).then(() => {
					publishQuest(row.id,{name:''}).then(resp => {
						this.reloadTable();
						this.$message.success(this.$t('scriptRecord.releaseScriptSuccess'));
					}).catch(error => {
						this.$messageBox(`${this.$t('scriptRecord.releaseScriptFailed')}: ${error.message}`);
					});
				}).catch(() => { });

			}
		},
		covertButtonname(){
			if(this.$store.getters.roles.indexOf(admin) >= 0 || this.$store.getters.roles.indexOf(superAdmin) >= 0){
				return this.$t('scriptRecord.publish');
			}else{
				return this.$t('scriptRecord.applyPublish');
			}
		},
		revokeScript(index,row){
			this.$confirm(this.$t('scriptRecord.revokeScriptTip'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				retractQuest(row.id).then(resp => {
					this.reloadTable();
					this.$message.success(this.$t('approval.revokeScriptSuccess'));
				}).catch(error => {
					this.$messageBox(`${this.$t('approval.revokeScriptFailed')}: ${error.message}`);
				});
			}).catch(() => { });
		},
		previewScript(index,row){
			scriptRecordNotify(row.id).then(resp => {
				const query = { mapId: row.mapId, group: resp.data, scriptId: row.id,skinCode:this.$route.query.skinCode,try:0};
				this.$router.push({ path: `${UrlConfig.design.display}/demon`, query });
				launchFullscreen();
			}).catch(error => {
				this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
			});
			// skinCode=02&group=16-128-757&prdType=02&mapId=18&code=JLFZZX-1&goodsId=&try=0
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.createScript{
		display:inline-block;float:right;margin-right:20px;
	}
	.scriptHeader{
		display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
	}
	.scriptList{
		display:inline-block;padding:7px 0px
	}
	.el-button+.el-button {
		margin-left: 10px;
		margin-top: 5px;
	}
</style>