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

<template>
  <div>
    <el-dialog
      v-dialogDrag
      :title="$t('display.script.scriptList')"
      :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
      v-dialogDrag
      :title="$t('display.script.roleSelect')"
      :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="$t('display.script.role')" prop="role">
            <el-select v-model="form.role" :placeholder="$t('display.script.pleaseSelect')">
              <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">{{ $t('global.cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import ConstConfig from '@/scripts/ConstConfig';
import {getScriptPageListOnlineNew, getScriptByIdNew, getDraftScriptByGroupNew } from '@/api/script';

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

                }
            },
            queryList: {
                query: this.listQuest,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('display.script.scriptName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('display.script.createTime'),
                        prop: 'createTime'
                    },
                    {
                        type: 'button',
                        title: this.$t('display.script.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('display.script.loadScript'),
                                type: 'primary',
                                handleClick: this.handleLoad
                            }
                        ]
                    }
                ],
                actions: [
                ]
            },

            currentModel: {},
            roleConfig: {
                'Admin': this.$t('display.script.admin'),
                'Instructor': this.$t('display.script.instructor'),
                'Dispatcher': this.$t('display.script.dispatcher'),
                'Attendant': this.$t('display.script.attendant'),
                'Audience': this.$t('display.script.audience'),
                'Driver': this.$t('display.script.driver'),
                'Repair':this.$t('display.script.repair'),
                'no': ''
            }
        };
    },
    created() {
        this.loadInitData();
    },
    methods: {
        doShow() {
            this.show = true;
            this.reloadTable();
        },
        doClose() {
            this.show = false;
        },
        listQuest(params) {
            params['mapId'] = this.$route.query.mapId;
            return getScriptPageListOnlineNew(params);
        },
        async loadInitData() {

        },
        covert(data, roleTypeList) {
            let lastData = data;
            roleTypeList.forEach(function(element) {
                const rolename = element.value;
                if (Cookies.get('user_lang') == 'en') {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
                } else {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
                }
            });
            lastData = JSON.parse(lastData);
            lastData.forEach(each=>{
                const name = each.name == undefined ? '' : '-' + each.name;
                const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
                each.name = each.role + deviceName + name;
            });
            return lastData;
        },
        async handleLoad(index, row) {
            this.row = row;
            const res = this.$route.fullPath.includes('design/displayNew/demon') ? await getDraftScriptByGroupNew(row.group) : await getScriptByIdNew(row.id);
            let newMemberList = [];
            if (res.code == 200) {
                if (res.data.playerList && res.data.playerList.length > 0) {
                    const lastData = JSON.stringify(res.data.playerList);
                    const playerList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
                    newMemberList = playerList.filter(item => item.hasPlay === true);
                }
                if (res.data.mapLocation) {
                    this.mapLocation = res.data.mapLocation;
                }
                this.memberList = newMemberList || [];
                this.memberList.unshift({ id: '', name: this.$t('display.script.none'), role: 'no' });
            }
            this.roleShow = true;
        },

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

        confirm() {
            const roleName = this.memberList.find(elem=>{ return elem.id == this.form.role; });
            this.$emit('selectQuest', this.row, this.form.role, this.mapLocation, roleName.role);
            this.doClose();
            this.roleDoClose();

        },

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

        checkDisabled(role) {
            if (!this.$route.fullPath.includes('design/display/demon')) {
                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>