rt-sim-training-client/src/views/display/demon/addQuest.vue

<template>
  <div>
    <el-dialog
      title="剧本列表"
      :visible.sync="show"
      top="50px"
      width="70%"
      :before-do-close="doClose"
      :close-on-click-modal="false"
      :z-index="2000"
    >
      <QueryListPage
        ref="queryListPage"
        :pager-config="pagerConfig"
        :query-form="queryForm"
        :query-list="queryList"
      />
    </el-dialog>
    <el-dialog
      title="角色选择"
      :visible.sync="roleShow"
      top="50px"
      width="350px"
      :before-do-close="roleDoClose"
      :close-on-click-modal="false"
      :z-index="5000"
    >
      <div>
        <el-form ref="ruleForm" :model="form" label-width="50px">
          <el-form-item label="角色" prop="role">
            <el-select v-model="form.role" placeholder="请选择">
              <el-option
                v-for="item in memberList"
                :key="item.id"
                :label="(roleConfig[item.role]?roleConfig[item.role]: '')+(item.name?item.name: '')"
                :value="item.id"
                :disabled="checkDisabled(item.role)"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleDoClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getScriptPageListOnline, getScriptById } from '@/api/script';
import { listPublishMap } from '@/api/jmap/map';
// import { roleType } from '@/scripts/ConstConfig';

export default {
	name: 'AddQuest',
	props: {
		trainings: {
			type: Array,
			default() {
				return [];
			}
		},
		detail: {
			type: Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			show: false,
			roleShow: false,
			mapList: [],
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			row: {},
			form: {
				role: ''
			},
			memberList: [],
			queryForm: {
				labelWidth: '80px',
				reset: false,
				show: false,
				queryObject: {

				}
			},
			queryList: {
				query: this.listQuest,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: '任务名称',
						prop: 'name'
					},
					{
						title: '地图',
						prop: 'mapId',
						type: 'tag',
						columnValue: (row) => { return this.$convertField(row.mapId, this.mapList, ['id', 'name']); },
						tagType: (row) => { return 'success'; }
					},
					{
						title: '创建时间',
						prop: 'createTime'
					},
					{
						type: 'button',
						title: '操作',
						width: '250',
						buttons: [
							{
								name: '加载剧本',
								type: 'primary',
								handleClick: this.handleLoad
							}
						]
					}
				],
				actions: [
				]
			},

			currentModel: {},
			roleConfig: {
				'Admin': '管理员',
				'Instructor': '教员',
				'Dispatcher': '行调',
				'Attendant': '车站',
				'Audience': '观众',
				'Driver': '列车',
				'no': ''
			}
		};
	},
	created() {
		this.loadInitData();
	},
	methods: {
		doShow() {
			this.show = true;
			this.reloadTable();
		},
		doClose() {
			this.show = false;
		},
		listQuest(params) {
			params['skinCode'] = this.$route.query.skinCode;
			return getScriptPageListOnline(params);
		},
		async loadInitData() {
			// 皮肤类型
			this.mapList = [];
			listPublishMap().then(response => {
				this.mapList = response.data;
			});
		},
		async handleLoad(index, row) {
			this.row = row;
			const res = await getScriptById(row.id);
			let newMemberList = [];
			if (res.code == 200) {
				if (res.data.memberVOList && res.data.memberVOList.length > 0) {
					newMemberList = res.data.memberVOList.filter(item => item.hasPlay === true);
				}
				this.memberList = newMemberList || [];
				this.memberList.unshift({ id: '', name: '无', role: 'no' });
			}
			this.roleShow = true;
		},

		reloadTable() {
			if (this.queryList && this.queryList.reload) {
				this.queryList.reload();
			}
		},

		async confirm() {
			await this.$store.dispatch('training/over');
			await this.$store.dispatch('training/setMapDefaultState');
			await this.$store.dispatch('map/clearJlmapTrainView');
			await this.$store.dispatch('map/setTrainWindowShow', false);
			this.$emit('selectQuest', this.row, this.form.role);
			this.doClose();
			this.roleDoClose();
		},

		roleDoClose() {
			this.$refs['ruleForm'].resetFields();
			this.roleShow = false;
		},

		checkDisabled(role) {
			if (this.$route.query.prdType == '01') {
				return role !== 'Attendant' && role !== 'no';
			} else if (this.$route.query.prdType == '02') {
				return role !== 'Dispatcher'&& role !== 'no';
			} else if (this.$route.query.prdType == '04') {
				return role !== 'Driver' && role !== 'no';
			}
		},

		handleName(item) {
			return this.roleConfig[item.role]?this.roleConfig[item.role]: ''+(item.name?item.name: '');
		}
	}
};
</script>