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

<template>
  <div id="PlanMenuBar">
    <div class="nav">
      <template v-for="(item,i) in menus">
        <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" :disabled="child.disabled">
                      <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)"
                          >
                          <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="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" :disabled="grandchild.disabled">
                            <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)"
                                >
                                <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="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" :disabled="child.disabled">
                      <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)"
                          >
                          <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="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import XLSX from 'xlsx';
import { mapGetters } from 'vuex';
import { importRunPlan, 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: {
		skinStyle: {
			type: String,
			required: true
		},
		planConvert: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			classA: -1,
			classB: -1,
			tempClassA: -1,
			tempClassB: -1,
			menus: [],
			menuBase: [
				{
					title: '文件（F）',
					children: [
						{
							title: '打开运行图',
							click: this.handleOpenRunPlan
						},
						{
							type: 'file',
							title: '导入运行图',
							click: this.handleImportRunPlan
						},
						{
							title: '新建运行图',
							click: this.handleCreateEmptyPlan
						},
						{
							title: '修改站间运行时间',
							click: this.handleModifyingStationIntervalTime
							// disabledCallback: () => { return !this.$route.query.planId },
						}
					]
				},
				{
					title: '查看（V）',
					children: [
					]
				},
				{
					title: '工具',
					children: [
						// {
						//     title: '自动生成',
						//     click: this.handleAutoGenerate,
						// },
						{
							title: '有效性检查',
							click: this.handlePlanEffectiveCheck
						},
						{
							title: '测试运行图',
							click: this.handleTestRunPlan
						}
					]
				},
				{
					title: '修改',
					children: [
						// {
						//     title: '计划参数',
						//     click: this.handleParameter,
						// },
						// {
						//     title: '打印参数',
						//     click: this.undeveloped,
						// },
						// {
						//     type: 'separator'
						// },
						{
							title: '增加计划（A）',
							click: this.handleAddPlanningTrain
						},
						{
							title: '删除计划',
							click: this.handleDeletePlanningTrain
						},
						// {
						//     title: '修改计划',
						//     click: this.handleEditPlanningTrain,
						// },
						{
							title: '复制计划',
							click: this.handleDuplicateTrain
						},
						{
							type: 'separator'
						},
						{
							title: '增加任务',
							click: this.handleAddTask
						},
						{
							title: '删除任务',
							click: this.handleDeleteTask
						},
						{
							title: '修改任务',
							click: this.handleModifyingTask
						}
						// {
						//     type: 'separator'
						// },
						// {
						//     title: '修改交路',
						//     click: this.handleModifyingRouting,
						// },
						// {
						//     title: '修改开始时间',
						//     click: this.handleModifyingStartTime,
						// },
						// {
						//     title: '快速增加任务',
						//     click: this.undeveloped,
						// }
					]
				},
				{
					title: '选项',
					children: [
					]
				},
				{
					title: '帮助',
					children: [
					]
				}
			]
		};
	},
	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: {
		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('实现中......', '提示', {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
		},
		// 打开运行图列表
		handleOpenRunPlan() {
			this.$emit('dispatchDialog', { name: 'openRunPlan', params: {} });
		},
		// 导入运行图
		handleImportRunPlan(file) {
			if (file) {
				const loading = this.$loading({
					lock: true,
					text: '正在导入中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				const that = this;
				const reader = new FileReader();
				if (reader) {
					reader.onload = function (e) {
						let wb;
						const data = e.target.result;
						if (that.rABS) {
							wb = XLSX.read(btoa(that.fixdata(data)), { // 手动转化
								type: 'base64'
							});
						} else {
							wb = XLSX.read(data, {
								type: 'binary'
							});
						}

						if (wb) {
							try {
								let jsonData = [];
								for (const index in wb.Sheets) {
									jsonData = that.PlanConvert.importData(wb.Sheets[index], jsonData);
								}

								importRunPlan({ skinStyle: that.skinStyle, runPlanList: jsonData }).then(response => {
									loading.close();
									that.refresh();
									that.$message.success('导入运行图成功!');
								}).catch(() => {
									loading.close();
									that.refresh();
									that.$message.warning('导入运行图失败!');
								});

							} catch (error) {
								loading.close();
								that.refresh();
								that.$message.warning('解析运行图失败!');
							}
						}
					};

					if (that.rABS) {
						reader.readAsArrayBuffer(file);
					} else {
						reader.readAsBinaryString(file);
					}
				}
			}
			this.closeMenu();
		},
		// 新建运行图
		handleCreateEmptyPlan() {
			this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {} });
		},
		// 修改站间运行时间
		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('运行图校验失败');
				});
			} else {
				this.$messageBox('请先选择一张运行图');
			}
		},
		// 测试运行图
		async handleTestRunPlan() {
			const data = { planId: this.$route.query.planId };
			runPlanNotify(data).then(resp => {
				const query = {
					skinStyle: this.$route.query.skinStyle, prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
				};
				this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
				launchFullscreen();
			}).catch(error => {
				this.$messageBox(`创建仿真失败: ${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('请选择一张运行图');
			}
		},
		// 删除计划
		handleDeletePlanningTrain() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			if (serviceNumber) {
				this.$emit('dispatchDialog', {
					name: 'offLine', params: {
						type: 'warning',
						width: 260,
						message: `真的要删除列车 ${serviceNumber} 吗？`,
						operate: 'DeletePlanningTrain',
						serviceNumber: serviceNumber,
						refresh: true
					}
				});
			} else {
				this.$messageBox('请选择一条计划');
			}
		},
		// 修改计划
		handleEditPlanningTrain() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			if (serviceNumber) {
				this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
			} else {
				this.$messageBox('请选择一条计划');
			}
		},
		// 复制计划
		handleDuplicateTrain() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			if (serviceNumber) {
				this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
			} else {
				this.$messageBox('请选择一条计划');
			}
		},
		// 添加任务
		handleAddTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'addTask', params });
			} else {
				this.$messageBox('请选择一个车次');
			}
		},
		// 删除任务
		handleDeleteTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'deleteTask', params });
			} else {
				this.$messageBox('请选择一个车次');
			}
		},
		// 修改任务
		handleModifyingTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'modifyingTask', params });
			} else {
				this.$messageBox('请选择一个车次');
			}
		},
		// 修改交路
		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: 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;
        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;
        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;
        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;
    }

    .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>