rt-sim-training-client/src/views/planMonitor/newEditTool/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 v-if="isNotUser" :key="i" 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>
                        <i v-if="j!==classB" class="el-icon-arrow-right" style="float: right;height: 30px;line-height: 30px;" />
                        <i v-if="j===classB" class="el-icon-arrow-left" style="float: right;height: 30px;line-height: 30px;" />
                      </span>
                    </div>
                    <ul class="menu-ul" :class="{'children-active' :j==classB}" style="padding-left: 2px;">
                      <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">{{ dispaly?'关闭':$t('global.back') }}</span>
      </div>
    </div>
    <el-dialog
      title="运行图发布"
      :visible.sync="publishVisible"
      width="30%"
      center
      :modal="false"
      :before-close="handleClose"
    >
      <el-input v-model="publishName"><template slot="prepend">运行图名称:</template></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="publishVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmPublish">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { planEffectiveCheck } from '@/api/runplan';
import { EventBus } from '@/scripts/event-bus';
import { publishRunPlanAllUser } from '@/api/designPlatform';
import { deleteRunPlan } from '@/api/runplan';

export default {
    name: 'PlanMenuBar',
    props: {
        planConvert: {
            type: Object,
            default: function() {
                return { };
            }
        },
        runPlanList: {
            type: Array,
            default: function() {
                return [];
            }
        },
        loadRunPlanId: {
            type: String,
            default: function() {
                return '';
            }
        },
        loadRunPlanName: {
            type: String,
            default: function() {
                return '';
            }
        }
    },
    data() {
        return {
            isNotUser: true,
            classA: -1,
            classB: -1,
            tempClassA: -1,
            tempClassB: -1,
            menus: [],
            loading: null,
            publishName: '',
            publishVisible: false,
            menuBase: [
                {
                    title: this.$t('planMonitor.file'),
                    children: [
                        // {
                        //     title: '查看站间运行等级',
                        //     click: this.handleModifyingStationIntervalTime
                        // },
                        {
                            title: '填充通用数据',
                            click: this.populatingGenericData
                        },
                        {
                            title: '创建运行图',
                            click: this.newRunPlan
                        },
                        {
                            title: '打开',
                            children: []
                        },
                        {
                            title: '删除',
                            click: this.deleteRunPlanOperate
                        },
                        {
                            title: '发布',
                            click: this.publishRunPlan
                        }
                    ]
                },
                // {
                //     title: this.$t('planMonitor.view'),
                //     children: [
                //     ]
                // },
                {
                    title: this.$t('planMonitor.tool'),
                    children: [
                        {
                            title: this.$t('planMonitor.validityCheck'),
                            click: this.handlePlanEffectiveCheck
                        }
                    ]
                },
                {
                    title: this.$t('planMonitor.modify'),
                    children: [
                        {
                            title: this.$t('planMonitor.addPlan'),
                            click: this.handleAddPlanningTrain
                        },
                        {
                            title: this.$t('planMonitor.deletePlan'),
                            click: this.handleDeletePlanningTrain
                        },
                        {
                            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
                        },
                        {
                            title: '修改名称',
                            click: this.modifyRunPlanName
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        ...mapGetters('training', [
            'mode'
        ]),
        ...mapGetters('map', [
            'stationList'
        ]),
        dispaly() {
            return this.$route.path.includes('display');
        }
    },
    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;
            }
        },
        runPlanList() {
            this.initMenu();
        }
    },
    created() {
        if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
            this.isNotUser = false;
        } else {
            this.isNotUser = true;
        }
    },
    mounted() {
        this.initMenu();
    },
    methods: {
        back() {
            // this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
            if (this.dispaly) {
                this.$emit('doClose');
            } else {
                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() {
            const menuLoading = [];
            this.runPlanList.forEach(item => {
                menuLoading.push({title: item.name, planId:item.id, planName: item.name, click: this.loadingRunPlan});
            });
            this.menuBase.forEach(item => {
                if (item.title === this.$t('planMonitor.file')) {
                    item.children.forEach(elem => {
                        if (elem.title === '打开') {
                            elem.children = menuLoading;
                        }
                    });
                }
            });
            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(item);
                    }
                }, 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: {} });
        },
        // 填充计划运行图
        populatingGenericData() {
            this.$emit('dispatchDialog', { name: 'populatingGenericData', params: {} });
        },
        newRunPlan() {
            this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {}});
        },
        // 自动生成
        handleAutoGenerate() {
            this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
        },
        // 校验运行图
        handlePlanEffectiveCheck() {
            if (this.loadRunPlanId) {
                planEffectiveCheck(this.loadRunPlanId).then(resp => {
                    this.$emit('dispatchDialog', {
                        name: 'systermOut',
                        params: {
                            width: 600,
                            contextList: resp.data.length > 0 ? resp.data : ['检查成功']
                        }
                    });
                }).catch(() => {
                    this.$messageBox(this.$t('tip.runGraphVerificationFailed'));
                });
            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        // 计划参数
        handleParameter() {
            this.$emit('dispatchDialog', { name: 'parameter', params: {} });
        },
        // 添加计划
        handleAddPlanningTrain() {
            if (this.loadRunPlanId) {
                this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        // 删除计划
        handleDeletePlanningTrain() {
            const serviceNumber = this.$store.state.runPlan.draftSelected.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.draftSelected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
            } else {
                this.$messageBox(this.$t('tip.selectAPlan'));
            }
        },
        // 复制计划
        handleDuplicateTrain() {
            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
            } else {
                this.$messageBox(this.$t('tip.selectAPlan'));
            }
        },
        // 添加任务
        handleAddTask() {
            const params = this.$store.state.runPlan.draftSelected;
            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.draftSelected;
            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.draftSelected;
            if (params.serviceNumber && params.tripNumber) {
                this.$emit('dispatchDialog', { name: 'modifyingTask', params });
            } else {
                this.$messageBox(this.$t('tip.selectATrain'));
            }
        },
        modifyRunPlanName() {
            this.$emit('modifyRunPlanName');
        },
        // 修改交路
        handleModifyingRouting() {
            const params = this.$store.state.runPlan.draftSelected;
            this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
        },
        // 修改开始时间
        handleModifyingStartTime() {
            const params = this.$store.state.runPlan.draftSelected;
            this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
        },
        loadingRunPlan(param) {
            this.$emit('loadingRunPlan', param);
        },
        deleteRunPlanOperate() {
            // 删除运行图
            if (this.loadRunPlanId) {
                this.$confirm(this.$t('planMonitor.openRunPlan.confirmDeleteRunPlan'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    cancelButtonText: this.$t('tip.cancel'),
                    type: 'warning'
                }).then(() => {
                    deleteRunPlan(this.loadRunPlanId).then(Response => {
                        this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
                        this.$emit('refresh');
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
                    });
                }).catch(() => { });
            } else {
                this.$message.error('请先打开运行图！');
            }
        },
        publishRunPlan() {
            if (this.loadRunPlanId) {
                this.publishVisible = true;
                this.publishName = this.loadRunPlanName;
            } else {
                this.$message.error('请先打开运行图！');
            }
        },
        handleClose() {
            this.publishVisible = false;
        },
        confirmPublish() {
            publishRunPlanAllUser(this.loadRunPlanId, this.publishName || this.loadRunPlanName).then(resp => {
                this.$message.success(this.$t('tip.publishRunPlanSuccess'));
                this.publishVisible = false;
            }).catch(() => {
                this.$messageBox(this.$t('tip.publishRunPlanFail'));
                this.publishVisible = false;
            });
        }
    }
};
</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 {
        width: 100%;
        line-height: $height;
        position: absolute;
        z-index: 2;
    }

    .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;
    }
	.children-active {
		position: relative;
		left: 160px;
		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>