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>
	<el-table
		:data="tableData"
        stripe
        border
		style="width: 90%;margin-left:5%;margin-top:20px;display: inline-block;">
		<el-table-column
		type="index"
		width="150">
		</el-table-column>
		<el-table-column
			prop="name"
			:label="$t('scriptRecord.scriptName')"
			width="300">
		</el-table-column>
		<el-table-column
			prop="description"
			:label="$t('scriptRecord.scriptDescription')"
			width="400">
		</el-table-column>
		<el-table-column
			:label="$t('scriptRecord.operate')"
			>
			<template slot-scope="scope">
				<el-button size="small" type="success" @click="drawUp(scope.$index, scope.row)">{{$t('scriptRecord.scriptRecord')}}</el-button>
				<el-button size="small" type="primary" @click="handleModify(scope.$index, scope.row)">{{$t('scriptRecord.scriptModify')}}</el-button>
				<el-button size="small" type="danger" @click="deleteScript(scope.$index, scope.row)">{{$t('scriptRecord.scriptDelete')}}</el-button>
				<el-button size="small" type="primary" @click="publishScript(scope.$index, scope.row)">{{$t('scriptRecord.applyPublish')}}</el-button>
				<el-button size="small" type="success" @click="previewScript(scope.$index, scope.row)">{{$t('scriptRecord.preview')}}</el-button>
			</template>
		</el-table-column>
	</el-table>
	<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>
		
    <!-- <div class="home-box">
      <el-card class="box-card">
        <div id="scriptTitle">{{ $t('scriptRecord.createScript') }}</div>
        <div id="sciptForm">
          <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
        </div>
        <div id="btnList">
          <span slot="footer" class="btn-footer">
            <el-button type="primary" :loading="loading" @click="doCreate">{{$t('scriptRecord.submit')}}</el-button>
          </span>
        </div>
      </el-card>
    </div> -->
  </el-card>
</template>

<script>
import { UrlConfig } from '@/router/index';
// import {listPublishMap} from '@/api/jmap/map';
import { getQuestPageList,createQuest,deleteQuest,updateQuest} from '@/api/quest';
import { launchFullscreen } from '@/utils/screen';
import { scriptRecordNotify } from '@/api/simulation';
import CreateScript from './create';
// import {createQuest} from '@/api/quest';

export default {
	name: 'ScriptDraft',
	 components: {
		CreateScript,
	},
	data() {
		return {
			tableData:[],
			// queryList: {
            //         actions: [
            //             { text: '创建', btnCode: 'employee_insert', handler: this.handleCreate }
            //         ]
            //     },
			// loading: false,
			// mapList: [],
			// taskStatusList: [],
			// disabled: true,
			// formModel: {
			// 	name: '',
			// 	mapId: '',
			// 	description: ''
			// },
			// isShow: false 
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	watch: {
		// '$store.state.scriptRecord.scriptId': function (val) {
		// 	this.formModel.mapId=val;
		// }
	},
	mounted() {
		this.loadInitData();
	},
	methods: {
		loadInitData(){
			this.getQuestPageList(this.$route.params.mapId)
		},
		async getQuestPageList(id){
			let response=await getQuestPageList(id);
            this.tableData=response.data;
		},
		drawUp(index,row) {
			scriptRecordNotify(row.id).then(resp => {
				const query = { mapId: row.mapId, group: resp.data, scriptId: row.id };
				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.loadInitData();
				}).catch(() => {
					this.$messageBox(this.$t('scriptRecord.deleteScriptFail'));
				});
			}).catch(() => { });
		},
		// 确定创建
		handleConfirmCreate(data) {
			createQuest(data).then(resp => {
				this.reloadTable();
				this.$message.success('创建剧本成功');
			}).catch(error => {
				this.$messageBox(`创建剧本失败: ${error.message}`);
			})
		},
		//修改
		handleModify(index, row){                
			this.$refs.modifyScript.doShow(row.id);
		},
		//确认修改
		handleConfirmModify(data){
			updateQuest(data.id,data).then(resp => {
				this.reloadTable();
				this.$message.success('修改剧本成功');
			}).catch(error => {
				this.$messageBox(`修改剧本失败: ${error.message}`);
			})
		},
		// 创建
		handleCreate() {
			this.$refs.createScript.doShow(null);
		},
		reloadTable() {
			this.loadInitData();
		}
		
		// loadInitData() {
		// 	this.mapList = [];
		// 	listPublishMap().then(response => {
		// 		this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name }; });
		// 		this.formModel.mapId=this.$store.state.scriptRecord.scriptId|| this.mapList[0].value;
		// 	});
		// },
		// doCreate() {
		// 	const self = this;
		// 	if (!this.loading) {
		// 		this.$refs.dataform.validateForm(() => {
		// 			this.loading=true;
		// 			const data=this.formModel;
		// 			createQuest(data).then(resp => {
		// 				const data={mapId: self.formModel.mapId, scriptId: resp.data};
		// 				this.$emit('refresh', data);
		// 				this.$message.success(this.$t('scriptRecord.createScriptSuccess'));
						

		// 				this.formModel={};
		// 				this.loading=false;
		// 				this.$router.push({ path: `${UrlConfig.script.detail}/${resp.data}` });
		// 			}).catch(error => {
		// 				this.loading=false;
		// 				this.$messageBox(`${$t('scriptRecord.createScriptFail')}${error.message}`);
		// 			});
		// 		});
		// 	}
		// }
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    // .home-box {
    //     padding: 20px 100px;
    //     float: left;
    //     width: 100%;
    //     font-family: 'Microsoft YaHei';
    // }
    // .box-card {
    //     width:800px;
    //     margin: 0 auto;
    //     margin-top: 20px;
    //     padding-bottom: 50px;
    // }
    // #scriptTitle{
    //     padding: 30px 40px;
    // }
    // #sciptForm{
    //     margin-top: 10px;
    //     padding: 0px 130px 0px 100px;
    // }
    // #btnList{
    //     margin: 0px 100px;
    // }
    // .btn-footer{
    //     margin-left: 100px;
    //     margin-top: 10px;
    //     display: inline-block;
    // }
	.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
	}
</style>