rt-sim-training-client/src/views/planMonitor/editTool/menuBar.vue

<template>
  <div id="PlanMenuBar">
    <div class="nav" style="height:45px;">
      <template v-for="(item,i) in menus">
        <template v-if="noShowingChildren(item.children)">
          <li v-if="isNotUser" :key="i" class="nav-li" @click="hookClick(item)">
            <span class="nav-li-text">{{ item.title }}</span>
          </li>
        </template>
        <template v-else>
          <li :key="i" v-if="isNotUser" class="nav-li" :class="{'menu_active' :i==classA}" @click.stop="popupMenuA(item, i)">
            <span class="nav-li-text">{{ item.title }}</span>
            <ul class="nav-ul" :class="{'active' :i==classA}">
              <template v-for="(child,j) in item.children">
                <template
                  v-if="child.children&&child.children.length>0&&hasShowingChildren(child.children)"
                >
                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
                    <span class="separator">&ensp;</span>
                  </li>
                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
                    <div class="menu-li-block" :disabled="child.disabled">
                      <span class="menu-li-text">
                        <el-button type="text" class="button" :disabled="child.disabled">
                          <input
                            :ref="child.label"
                            type="file"
                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            @change="openLoadFile(child)"
                          >
                          <span> {{ child.title }}</span>
                        </el-button>
                      </span>
                    </div>
                  </li>
                  <li v-else :key="j" class="menu-li" @click.stop="popupMenuB(child, j)">
                    <div class="menu-li-block" :disabled="child.disabled">
                      <span class="menu-li-text">
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                    <ul class="menu-ul" :class="{'active' :j==classB}">
                      <template v-for="(grandchild,k) in child.children">
                        <li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator">
                          <span class="separator">&ensp;</span>
                        </li>
                        <li v-else-if="grandchild.type === 'file'" :key="k" class="menu-li">
                          <div class="menu-li-block" :disabled="grandchild.disabled">
                            <span class="menu-li-text">
                              <el-button
                                type="text"
                                class="button"
                                :disabled="grandchild.disabled"
                              >
                                <input
                                  :ref="grandchild.label"
                                  type="file"
                                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                  @change="openLoadFile(grandchild)"
                                >
                                <span> {{ grandchild.title }}</span>
                              </el-button>
                            </span>
                          </div>
                        </li>
                        <li v-else :key="k" class="menu-li" @click.stop="hookClick(grandchild)">
                          <div class="menu-li-block" :disabled="grandchild.disabled">
                            <span class="menu-li-text">
                              <span class="label">{{ grandchild.title }}</span>
                            </span>
                          </div>
                        </li>
                      </template>
                    </ul>
                  </li>
                </template>
                <template v-else>
                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
                    <span class="separator">&ensp;</span>
                  </li>
                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
                    <div class="menu-li-block" :disabled="child.disabled">
                      <span class="menu-li-text">
                        <el-button type="text" class="button" :disabled="child.disabled">
                          <input
                            :ref="child.title"
                            type="file"
                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            @change="openLoadFile(child)"
                          >
                          <span> {{ child.title }}</span>
                        </el-button>
                      </span>
                    </div>
                  </li>
                  <li v-else :key="j" class="menu-li" @click.stop="hookClick(child)">
                    <div class="menu-li-block" :disabled="child.disabled">
                      <span class="menu-li-text">
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </template>
      </template>
      <div class="nav-li" style="position: absolute; right: 10px;" @click="back">
        <span class="nav-li-text">{{ $t('global.back') }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { planEffectiveCheck, runPlanNotify } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';
import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'PlanMenuBar',
    props: {
        // skinCode: {
        // 	type: String,
        // 	default: ''
        // },
        planConvert: {
            type: Object,
            default: function() {
                return { };
            }
        }
    },
    data() {
        return {
            isNotUser: true,
            classA: -1,
            classB: -1,
            tempClassA: -1,
            tempClassB: -1,
            menus: [],
            loading: null,
            menuBase: [
                {
                    title: this.$t('planMonitor.file'),
                    children: [
                        {
                            title: this.$t('planMonitor.modifyStationIntervalTime'),
                            click: this.handleModifyingStationIntervalTime
                            // disabledCallback: () => { return !this.$route.query.planId },
                        }
                    ]
                },
                {
                    title: this.$t('planMonitor.view'),
                    children: [
                    ]
                },
                {
                    title: this.$t('planMonitor.tool'),
                    children: [
                        // {
                        //     title: '自动生成',
                        //     click: this.handleAutoGenerate,
                        // },
                        {
                            title: this.$t('planMonitor.validityCheck'),
                            click: this.handlePlanEffectiveCheck
                        },
                        {
                            title: this.$t('planMonitor.testRunningDiagram'),
                            click: this.handleTestRunPlan
                        }
                    ]
                },
                {
                    title: this.$t('planMonitor.modify'),
                    children: [
                        // {
                        //     title: '计划参数',
                        //     click: this.handleParameter,
                        // },
                        // {
                        //     title: '打印参数',
                        //     click: this.undeveloped,
                        // },
                        // {
                        //     type: 'separator'
                        // },
                        {
                            title: this.$t('planMonitor.addPlan'),
                            click: this.handleAddPlanningTrain
                        },
                        {
                            title: this.$t('planMonitor.deletePlan'),
                            click: this.handleDeletePlanningTrain
                        },
                        // {
                        //     title: '修改计划',
                        //     click: this.handleEditPlanningTrain,
                        // },
                        {
                            title: this.$t('planMonitor.duplicatePlan'),
                            click: this.handleDuplicateTrain
                        },
                        {
                            type: 'separator'
                        },
                        {
                            title: this.$t('planMonitor.addTask'),
                            click: this.handleAddTask
                        },
                        {
                            title: this.$t('planMonitor.deleteTask'),
                            click: this.handleDeleteTask
                        },
                        {
                            title: this.$t('planMonitor.modifyTask'),
                            click: this.handleModifyingTask
                        }
                        // {
                        //     type: 'separator'
                        // },
                        // {
                        //     title: '修改交路',
                        //     click: this.handleModifyingRouting,
                        // },
                        // {
                        //     title: '修改开始时间',
                        //     click: this.handleModifyingStartTime,
                        // },
                        // {
                        //     title: '快速增加任务',
                        //     click: this.undeveloped,
                        // }
                    ]
                },
                {
                    title: this.$t('planMonitor.option'),
                    children: [
                    ]
                },
                {
                    title: this.$t('planMonitor.help'),
                    children: [
                    ]
                }
            ]
        };
    },
    created() {
        if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
            this.isNotUser = false;
        } else {
            this.isNotUser = true;
        }
    },
    computed: {
        ...mapGetters('training', [
            'mode'
        ]),
        ...mapGetters('map', [
            'stationList'
        ])
    },
    watch: {
        tempClassA() {
            this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
        },
        tempClassB() {
            this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
        },
        '$store.state.menuOperation.break': function (val) {
            if (val) {
                this.classA = this.classB = -1;
            } else {
                this.classA = this.tempClassA;
                this.classB = this.tempClassB;
            }
        },
        '$route.query.planId': function () {
            this.menus = this.menuConvert(this.menuBase);
        }
    },
    mounted() {
        this.initMenu();
    },
    methods: {
        back() {
            // this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
            this.$router.go(-1);
        },
        menuConvert(menuBase) {
            const menus = [];
            menuBase.forEach(elem => {
                const item = {};
                Object.keys(elem).forEach(key => {
                    if (key == 'disabledCallback') {
                        item['disabled'] = elem.disabledCallback();
                    } else if (key != 'children') {
                        item[key] = elem[key];
                    } else {
                        item.children = this.menuConvert(elem.children || []);
                    }
                });
                menus.push(item);
            });

            return menus;
        },
        initMenu() {
            this.menus = this.menuConvert(this.menuBase);
            this.clickEvent();
            this.closeMenu();
        },
        clickEvent() {
            const self = this;
            window.onclick = function (e) {
                self.closeMenu(false);
            };
        },
        noShowingChildren(children) {
            if (!children || children.length <= 0) {
                return true;
            }
            return false;
        },
        hasShowingChildren(children) {
            if (children && children.length > 0) {
                return true;
            }
            return false;
        },
        closeMenu() {
            this.classA = this.tempClassA = -1;
            this.classB = this.tempClassB = -1;
        },
        hookClick(item, event) {
            this.closeMenu();
            // launchFullscreen();
            if (!item.disabled) {
                setTimeout(() => {
                    if (item && typeof item.click == 'function') {
                        item.click();
                    }
                }, 500);
            }
        },
        popupMenuA(item, index) {
            this.clickEvent();
            this.tempClassA = index;
            this.tempClassB = -1;
        },
        popupMenuB(item, index) {
            this.tempClassB = index;
        },
        openLoadFile(item) {
            const obj = this.$refs[item.title][0];
            if (obj.files) {
                const file = obj.files[0];
                item.click(file);
                obj.value = '';
            }
        },
        doClose() {
            this.$nextTick(() => {
                EventBus.$emit('closeMenu');
            });
        },
        // 刷新
        refresh() {
            this.closeMenu(true);
            EventBus.$emit('refresh');
        },
        undeveloped() {
            this.doClose();
            this.$alert( this.$t('planMonitor.implemented'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('global.confirm'),
                callback: action => {
                }
            });
        },
        loadingScreen() {
            this.loading = this.$loading({
                lock: true,
                text: this.$t('tip.underImport'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        // 修改站间运行时间
        handleModifyingStationIntervalTime() {
            this.$emit('dispatchDialog', { name: 'modifyingStationIntervalTime', params: {} });
        },
        // 自动生成
        handleAutoGenerate() {
            this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
        },
        // 校验运行图
        handlePlanEffectiveCheck() {
            const planId = this.$route.query.planId;
            if (planId) {
                planEffectiveCheck(planId).then(resp => {
                    this.$emit('dispatchDialog', {
                        name: 'systermOut',
                        params: {
                            width: 600,
                            contextList: resp.data
                        }
                    });
                }).catch(() => {
                    this.$messageBox(this.$t('tip.runGraphVerificationFailed'));
                });
            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        // 测试运行图
        async handleTestRunPlan() {
            const data = { planId: this.$route.query.planId };
            runPlanNotify(data).then(resp => {
                // skinCode: this.$route.query.skinCode,
                const query = {
                    prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
                };
                debugger;
                this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
                launchFullscreen();
            }).catch(error => {
                this.$messageBox(this.$t('tip.createSimulationFaild') + this.$t('global.colon') + error.message);
            });
        },
        // 计划参数
        handleParameter() {
            this.$emit('dispatchDialog', { name: 'parameter', params: {} });
        },
        // 添加计划
        handleAddPlanningTrain() {
            const planId = this.$route.query.planId;
            if (planId) {
                this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        // 删除计划
        handleDeletePlanningTrain() {
            const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', {
                    name: 'offLine', params: {
                        type: 'warning',
                        width: 260,
                        message: this.$t('tip.deleteTrainHint') + serviceNumber + '?',
                        operate: 'DeletePlanningTrain',
                        serviceNumber: serviceNumber,
                        refresh: true
                    }
                });
            } else {
                this.$messageBox(this.$t('tip.selectAPlan'));
            }
        },
        // 修改计划
        handleEditPlanningTrain() {
            const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
            } else {
                this.$messageBox(this.$t('tip.selectAPlan'));
            }
        },
        // 复制计划
        handleDuplicateTrain() {
            const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
            } else {
                this.$messageBox(this.$t('tip.selectAPlan'));
            }
        },
        // 添加任务
        handleAddTask() {
            const params = this.$store.state.runPlan.selected;
            if (params.serviceNumber && params.tripNumber) {
                this.$emit('dispatchDialog', { name: 'addTask', params });
            } else {
                this.$messageBox(this.$t('tip.selectATrain'));
            }
        },
        // 删除任务
        handleDeleteTask() {
            const params = this.$store.state.runPlan.selected;
            if (params.serviceNumber && params.tripNumber) {
                this.$emit('dispatchDialog', { name: 'deleteTask', params });
            } else {
                this.$messageBox(this.$t('tip.selectATrain'));
            }
        },
        // 修改任务
        handleModifyingTask() {
            const params = this.$store.state.runPlan.selected;
            if (params.serviceNumber && params.tripNumber) {
                this.$emit('dispatchDialog', { name: 'modifyingTask', params });
            } else {
                this.$messageBox(this.$t('tip.selectATrain'));
            }
        },
        // 修改交路
        handleModifyingRouting() {
            const params = this.$store.state.runPlan.selected;
            this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
        },
        // 修改开始时间
        handleModifyingStartTime() {
            const params = this.$store.state.runPlan.selected;
            this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
        }
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";
    $top: 0px;
    $width: 30px;
    $height: 40px;
    $menuPadding: 15px;
    $menuItemHeight: 30px;
    $menuItemWidth: 160px;
    $menuItemPadding: 5px;

    #PlanMenuBar {
        z-index: 10;
        position: absolute;
        top: $top;
        width: 100%;
        height: $height;
        line-height: $height;
    }

    .nav {
        display: block;
        cursor: pointer;
        list-style: none;
        // border: 1px solid #B6BCCC !important;
		background-color: #293c55;
		box-sizing: border-box;
		padding-left: 20px;
    }

    .nav-li {
        position: relative;
        display: inline-block;
		padding: 0 $menuPadding;
		color: rgba(255,255,255,0.45);
		border-top: 4px solid #293c55;
    }

    .nav-li.menu_active {
		border-top: 4px solid #a9334c;
		background-color: #0e151f;
		transition: 0.5s all;
    }

	.nav-li:hover {
		border-top: 4px solid #a9334c;
		background-color: #0e151f;
		transition: 0.5s all;
    }

	.nav-li:hover .nav-li-text{
		color: #fff;
	}

	.nav-li.menu_active .nav-li-text {
		color: #fff;
    }

    .nav-li-text {
        font-size: 13px;
        text-align: center;
        text-decoration: none;
    }

    .nav-ul {
        display: none;
        position: absolute;
        list-style: none;
        border: 1px solid gray;
        width: $menuItemWidth;
        padding: 0px;
        margin: 0px;
    }

    .menu-ul {
        display: none;
        list-style: none;
        background: #F0F0F0;
        line-height: $menuItemHeight;
        width: $menuItemWidth;
        bottom: $menuItemHeight;
    }

    .active {
        position: absolute;
		left: 0;
        display: block !important;
    }

    .menu-ul-text {
        font-size: 14px;
        letter-spacing: 0;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }

    .menu-separator {
        text-align: left;
        background: #F0F0F0;
        height: 2px;
        line-height: 2px;
    }

    .menu-separator .status {
        display: inline-block;
        border-right: 1px inset #CACACA;
        width: $width;
        height: 100%;
        background: #EFECDE;
    }

    .menu-separator .separator {
        display: inline-block;
        background: #293c55;
        // margin-left: 5px;
        height: 2px;
        width: 100%;
    }

    .menu-li {
        text-align: left;
        background: #162436;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
    }

    .menu-li-block {
        letter-spacing: 0;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
    }

    .menu-li-text {
        font-size: 14px;
    }

    .menu-li-text .label {
        display: inline-block;
        margin-left: 5px;
		padding-left: 12px;
    }

    .menu-li-text .button {
        position: relative;
        overflow: hidden;
        line-height: 0px;
        width: 100%;
        top: 0;
        color:rgba(255,255,255,0.45);
        cursor: pointer;
		padding-left: 16px;
		text-align: left;

        input {
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0px;
            width: $menuItemWidth - $width - 10px;
        }
    }

    .menu-li-block:hover {
        background: #C9DEF7;
		color: #000;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

	.menu-li-text .button:hover{
		color: #000;
	}
</style>