rt-sim-training-client/src/views/planSchedule/menuBar.vue

<template>
  <div id="PlanMenuBar">
    <div class="nav">
      <template v-for="(item,i) in menu">
        <template v-if="noShowingChildren(item.children)">
          <li :key="i" class="nav-li" @click="hookClick(item)">
            <span class="nav-li-text">{{ item.title }}</span>
          </li>
        </template>
        <template v-else>
          <li :key="i" class="nav-li" @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="status">&ensp;</span>
                    <span class="separator">&ensp;</span>
                  </li>
                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <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)"
                          >
                          {{ child.title }}
                        </el-button>
                      </span>
                    </div>
                  </li>
                  <li v-else :key="j" class="menu-li" @click.stop="popupMenuB(child, j)">
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <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="status">&ensp;</span>
                          <span class="separator">&ensp;</span>
                        </li>
                        <li v-else-if="grandchild.type === 'file'" :key="k" class="menu-li">
                          <div class="menu-li-block">
                            <span class="menu-li-text">
                              <span class="status">&ensp;</span>
                              <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)"
                                >
                                {{ grandchild.title }}
                              </el-button>
                            </span>
                          </div>
                        </li>
                        <li v-else :key="k" class="menu-li" @click.stop="hookClick(grandchild)">
                          <div class="menu-li-block">
                            <span class="menu-li-text">
                              <span class="status">&ensp;</span>
                              <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="status">&ensp;</span>
                    <span class="separator">&ensp;</span>
                  </li>
                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <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)"
                          >
                          {{ child.title }}
                        </el-button>
                      </span>
                    </div>
                  </li>
                  <li v-else :key="j" class="menu-li" @click.stop="hookClick(child)">
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'PlanMenuBar',
    props: {
        lineCode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            classA: -1,
            classB: -1,
            tempClassA: -1,
            tempClassB: -1,
            menu: [
                {
                    title: '管理运行计划',
                    click: this.handleViewPlanSchedule
                },
                {
                    title: '运行图管理',
                    click: this.handleReloadTodayPlan
                }
                // {
                //     title: '工具（T）',
                //     children: [
                //         {
                //             title: '查看计划列表',
                //             click: this.handleViewPlanSchedule
                //         },
                //         {
                //             title: '创建一周计划',
                //             click: this.handleCreateWeekPlan
                //         },
                //         {
                //             title: '加载当天计划',
                //             click: this.handleReloadTodayPlan
                //         }
                //         // {
                //         //     title: '有效性检查',
                //         //     click: this.handleValidityCheck
                //         // }
                //     ]
                // }
            ]
        };
    },
    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;
            }
        }
    },
    mounted() {
        this.initMenu();
    },
    methods: {
        initMenu() {
            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();
            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('实现中......', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        },
        // 查看计划列表
        handleViewPlanSchedule() {
            this.$emit('dispatchDialog', { name: 'managePlanList' });
        },
        // 创建一周计划
        handleCreateWeekPlan() {
            this.$emit('dispatchDialog', { name: 'createWeekPlan' });
        },
        // 创建当天计划
        handleReloadTodayPlan() {
            this.$emit('dispatchDialog', { name: 'createTodayPlan' });
        },
        // 有效性检查
        handleValidityCheck() {
        }
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";
    $top: 25px;
    $width: 30px;
    $height: 20px;
    $menuPadding: 10px;
    $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;
        color: #0000;
        background: #EBEADB;
        list-style: none;
        border: 1px solid #B6BCCC !important;
    }

    .nav-li {
        position: relative;
        display: inline-block;
        padding-left: $menuPadding;
        padding-right: $menuPadding;
    }

    .nav-li:active {
        background: #C9D0E1;
        border-radius: 4px;
    }

    .nav-li-text {
        font-size: 13px;
        color: #000;
        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;
        display: block !important;
    }

    .menu-ul-text {
        font-size: 14px;
        color: #000;
        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: #CACACA;
        margin-left: 5px;
        height: 2px;
        width: $menuItemWidth - $width - 30px;
    }

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

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

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

    .menu-li-text .status {
        display: inline-block;
        border-right: 1px inset #CACACA;
        width: $width;
        background: #EFECDE;
    }

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

    .menu-li-text .button {
        position: relative;
        overflow: hidden;
        margin-left: 10px;
        line-height: 0px;
        width: $menuItemWidth - $width;
        top: -$menuItemHeight;
        color: #000;
        cursor: pointer;

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

    .menu-li-block:hover {
        background: #C9DEF7;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
</style>