<template>
|
<div class="appmenubutton" :style="{ width: props.width, height: props.height }" :onclick="onClick"
|
:title="props.item.text">
|
<div style="margin-top: 10px;">
|
<svg-icon width="30" height="30" :color="props.color" :name="props.item.icon"/>
|
</div>
|
<div style="margin-top: 10px;">
|
<p style="width: 100%; overflow: hidden">{{ props.item.code }}</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, shallowRef, ref} from "vue";
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import * as elementplus from "element-plus";
|
|
export default {
|
name: "AppMenuButton",
|
components: {},
|
props: {
|
item: null,
|
height: "100px",
|
width: "100px",
|
color: ""
|
},
|
setup(props) {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
|
};
|
|
const onClick = () => {
|
switch (props.item.type) {
|
case "menu":
|
if (store.tags.length > store.tagUpperLimit) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.TagQuantityReachedUpperLimit')}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'warning',
|
}
|
);
|
|
return;
|
}
|
|
addTag(props.item);
|
proxy.$router.replace(props.item.link);
|
break;
|
case "link":
|
window.open(props.item.link);
|
break;
|
}
|
};
|
const addTag = (target) => {
|
let stags = store.tags.filter(tab => tab.name === target.name);
|
|
if (stags === [] || stags.length <= 0) {
|
store.tags.push({
|
name: target.name,
|
languagekey: target.languagekey,
|
closable: true,
|
icon: target.icon
|
});
|
}
|
};
|
return {
|
...toRefs(state), props, onClick
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.appmenubutton {
|
border: 1px solid;
|
border-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, var(--el-color-info-light) 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;
|
float: left;
|
text-align: center;
|
padding: 5px;
|
font-size: 12px;
|
}
|
|
.appmenubutton:hover {
|
background-color: var(--el-color-info-light);
|
color: white;
|
}
|
|
.appmenubutton:active {
|
background-color: var(--el-color-info-light);
|
color: white;
|
}
|
</style>
|
