cmc-web/webs/ams-web/src/views/resource/menu/index.vue

71 lines
2.3 KiB
Vue

<template>
<split-pane :min-percent="10" :default-percent="15" split="vertical" style="height: calc(100vh - 110px)">
<template slot="paneL">
<!-- <el-button @click="setIsLeaderPosition"> {{ isLeaderPosition }}</el-button>
<el-radio-group v-model="select" @change="SET_SELECTED_POSITION" v-if="isLeaderPosition">
<el-radio v-for="item in ['sma-1', 'ams-2']" :key="item" :label="item">{{ item }}</el-radio>
</el-radio-group> -->
<SideMenu @handleNodeClick="handleNodeClick"></SideMenu>
</template>
<template slot="paneR">
<RightList ref="listRef"></RightList>
</template>
</split-pane>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue'
import SplitPane from 'vue-splitpane'
import SideMenu from './SideMenu.vue'
import RightList from './List.vue'
import usePostion from '@/views/usePostion'
const addStorageEvent = (key, data) => {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent')
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val)
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
// 派发对象
window.dispatchEvent(newStorageEvent)
},
}
return storage.setItem(key, data)
}
export default defineComponent({
components: { SplitPane, SideMenu, RightList },
setup() {
// eslint-disable-next-line
const { isLeaderPosition } = usePostion(() => {
handleNodeClick(unref(lastNode))
})
const lastNode = ref(null)
const listRef = ref()
function handleNodeClick(node: any) {
lastNode.value = node
const { type, id } = node
if (type === 'module') {
listRef.value.init(node)
}
}
const select = ref('')
const SET_SELECTED_POSITION = () => {
addStorageEvent('selectPostion', unref(select))
}
const setIsLeaderPosition = () => {
const val = Math.random() > 0.5
addStorageEvent('isLeaderPosition', val)
if (!val) addStorageEvent('selectPostion', '')
}
return {
listRef,
handleNodeClick,
isLeaderPosition,
setIsLeaderPosition,
select,
SET_SELECTED_POSITION,
}
},
})
</script>