<template>
<div class="app-container">
<AmiConsole
ref="amiConsole"
:menuOptions="activePanel"
:activeMenu="activeMenu.menu"
:hideNavigation="hideNavigation"
:menuList="menuData"
:tokenReady="tokenReady"
>
<div id="app-main" :class="$store.state.largeScreen ? 'large-screen ' : ''">
<el-config-provider :locale="elLocale">
<router-view v-slot="{ Component }" class="right app-container-right">
<keep-alive :max="1">
<component
:is="Component"
v-if="isShow && $route?.meta?.keepAlive"
:key="$route.path"
/>
</keep-alive>
<component
:is="Component"
v-if="isShow && !$route?.meta?.keepAlive"
:key="$route.path"
/>
</router-view>
</el-config-provider>
</div>
</AmiConsole>
<NotifyDialog v-if="!hideNavigation" />
<smart-it-nps-feedback
v-if="user"
:serviceId="npsFeedbackConfig.serviceId"
:serviceName="npsFeedbackConfig.serviceName"
:contactId="npsFeedbackConfig.contactId"
:userId="user"
:lang="$i18n.locale"
:toggleAction.prop="'click'"
:showSelection.prop="true"
:isNewVersion="true"
:showFeedback="true"
@clickFeedback="openNpsFeedback"
></smart-it-nps-feedback>
<nps-feedback
v-if="user"
ref="npsFeedback"
:locale.prop="$i18n.locale === 'en' ? 'en-us' : 'zh-cn'"
:config.prop="npsFeedbackConfig"
:commitDate.prop="commitDate"
:clientRectTop.prop="'48px'"
:type.prop="'functionDrawer'"
:descriptionZh.prop="npsFeedbackConfig.descriptionZh"
:descriptionEn.prop="npsFeedbackConfig.descriptionEn"
:mustwork.prop="true"
:testwork.prop="true"
@submit="onFeedbackSubmit"
></nps-feedback>
</div>
</template>
<script>
import AmiConsole from '@/components/AmiConsole';
import { consoleInit } from '@cloud/uni-console/vue3';
import { useStore } from 'vuex';
import { tokenManager } from '@/apis';
import { getQueryByName } from '@/util/getUrlParams.js';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import { getMenuListAPI, getUserInfoAPI } from '@/apis/common';
import { getI18n } from '@/util/i18n';
import NotifyDialog from '@/components/NotifyDialog';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { commitFeedbackAPI, getCommitDateAPI } from '@/apis/feedback';
export default {
name: 'App',
components: {
AmiConsole,
NotifyDialog,
},
provide() {
return {
reload: this.reload,
menuCollapse: () => {
if (this.hideNavigation) {
return true;
}
return this.$refs?.amiConsole?.amiAsideMenu?.collapse;
},
getMenuData: () => this.menuData,
getActiveMenu: () => this.activeMenu,
getActivePanel: () => this.activePanel,
toggleConsole: isFullpage => this.$refs?.amiConsole?.toggleConsole(isFullpage),
toggleCollapseAsideMenu: isCollapse =>
this.$refs?.amiConsole?.toggleCollapseAsideMenu(isCollapse),
openNpsFeedback: this.openNpsFeedback,
};
},
props: ['locale'],
setup() {
// 初始化console函数
const { VITE_ENV_UNI_CONSOLE_INIT } = import.meta.env;
consoleInit(VITE_ENV_UNI_CONSOLE_INIT);
let store = useStore();
return {
store,
...getI18n(),
};
},
data() {
return {
loading: false,
tokenReady: false,
isShow: true,
lastTime: null,
isHome: false,
showHome: false,
searchFormData: {},
user: '',
menuData: [],
activePanel: {},
activeMenu: { menu: {}, pathes: [] },
token: '',
sideWidth: '',
breadCrumb: {},
path: '',
elLocale: this.locale === 'zh' ? zhCn : en,
timer: null,
npsFeedbackConfig: {
serviceId: 'CCS2022072000043',
serviceName: 'eAmirA',
contactId: '',
descriptionZh:
'感谢您对数字化平台部eAmirA工具的支持,数字化平台部eAmirA工具致力于不断提升产品和服务,为您提供更好的体验,我们诚邀您回答几个问题,大概占用您1-2分钟时间。',
descriptionEn:
// eslint-disable-next-line max-len
'Thank you for your support to the eAmirA tool of the Digital Platform Dept. The eAmirA tool of the Digital Platform Dept is dedicated to continuously improving products and services and providing you with better experience. We invite you to answer a few questions, which will take you 1-2 minutes.',
},
commitDate: '',
};
},
computed: {
hideNavigation() {
let isHideNavigation = getQueryByName('hideNavigation');
return isHideNavigation === 'true';
},
},
watch: {
$route: {
handler: function(val) {
this.$store.commit('setDiction', false);
this.$store.state.largeScreen = val.fullPath.indexOf('largeScreen=true') !== -1;
this.isHome = val.fullPath.indexOf('/home') !== -1;
this.findActive(val);
},
deep: true,
},
locale: {
handler(val) {
this.elLocale = val === 'zh' ? zhCn : en;
},
},
},
beforeCreate() {
this.$Progress.start();
tokenManager
.refreshToken()
.then(() => {
this.tokenReady = true;
this.user = this.$Cookies.get('iam_user');
this.scheduledGetXToken();
if (!getQueryByName('hideNavigation')) {
this.getMenuList();
}
})
.catch(() => {
this.$Progress.fail();
})
.finally(() => {
this.$Progress.finish();
});
},
created() {
sessionStorage.setItem('baseUrl', import.meta.env.VITE_LOGOUT_URL);
const HWRouter = JSON.parse(window.sessionStorage.getItem('HWRoutes'));
if (HWRouter && HWRouter.length > 0) {
this.$router.addRoutes(HWRouter);
this.$router.options.routes = HWRouter;
}
if (this.$route.path === '/' && this.$route.name === 'home') {
this.showHome = true;
}
this.$store.state.largeScreen = this.$route.fullPath.indexOf('largeScreen=true') !== -1;
this.processLongFunc();
sessionStorage.componentName = '';
sessionStorage.pages = '';
this.getUserInfo();
},
beforeUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
sessionStorage.setItem('state', JSON.stringify(this.$store.state.curRoute));
},
methods: {
// fusion 埋码 设置用户id
furionSetConfig(config) {
try {
if (window.__fr) {
if (config.uid) {
if (window.__fr.setConfig) {
window.__fr.setConfig(config);
} else {
Object.assign(window.__fr.config, config);
}
}
}
} catch (e) {
ElMessage.error(e);
}
},
// 获取用户信息以及租户信息
getUserInfo() {
getUserInfoAPI('')
.then(res => {
const { code, data } = res;
const { userInfo, tenants, roleList } = data;
const { uid } = userInfo || { uid: '' };
if (code === 'SUCCESS') {
let isAdmin = false;
roleList.forEach(element => {
if (element.module === 'Amira' && element.type === '3') {
isAdmin = true;
}
});
let obj = {
tenants: tenants.split('%2C'),
userInfo,
roleList,
};
this.$store.dispatch('adminStatus/changeAdminStatus', isAdmin);
this.$store.dispatch('adminStatus/changeUserInfo', obj);
this.furionSetConfig({ uid });
}
})
.catch(() => {
// empty
});
},
reload() {
this.isShow = false;
this.$nextTick(() => {
this.isShow = true;
});
},
getMenuList() {
return getMenuListAPI('')
.then(data => {
if (data.success) {
this.menuData = data.data;
this.$store.state.DCMenu = data.data;
this.findActive(this.$route);
}
})
.catch(err => Promise.reject(err));
},
findActive(route) {
if (this.menuData.length === 0) {
return;
}
let path = route.path.replace(/\?.*$/, '');
if (route.meta.menuActivePath) {
let { menuActivePath } = route.meta;
path =
typeof menuActivePath === 'object'
? menuActivePath[route.params.fromType]
: menuActivePath;
}
let activePanel = this.menuData[1];
this.activeMenu = { menu: {}, pathes: [] };
this.menuData.forEach(panelItem => {
if (panelItem.subMenu.length > 0) {
panelItem.subMenu.forEach(menuItem => {
if (menuItem.path === '/myWorkSpace/myproject/pemisstionApply') {
this.$store.state.pemisstionApplyUrl = menuItem.iframeUrl;
}
if (menuItem.subMenu.length > 0) {
menuItem.subMenu.forEach(subMenuItem => {
if (path === subMenuItem.path) {
activePanel = panelItem;
this.activeMenu.menu = subMenuItem;
this.activeMenu.pathes = [menuItem];
}
});
} else {
if (path === menuItem.path) {
activePanel = panelItem;
this.activeMenu.menu = menuItem;
this.activeMenu.pathes = [];
}
}
});
} else {
if (path === panelItem.path) {
activePanel = panelItem;
}
}
});
this.activePanel = activePanel;
},
processLongFunc() {
// 当前用户有权限租户,但当前租户不是HWCloud_Engineering,切换到该租户
if (this.tenant !== 'HWCloud_Engineering') {
return false;
}
// 获取x-token失败时,跳转权限申请页面或登录页面
this.ErrorCode = this.$store.state.ErrorCode;
this.ErrorFlag = this.$store.state.ErrorFlag;
if (!this.ErrorFlag && this.rightCode) {
if (this.rightCode.includes(this.ErrorCode)) {
this.curSubMenu = '/myWorkSpace/myproject';
this.$router.push({
path: '/myWorkSpace/myproject',
query: {},
});
} else {
window.location.reload();
}
return false;
}
if (!this.ErrorFlag && this.rightCode) {
if (this.rightCode.includes(this.ErrorCode)) {
this.curSubMenu = '/myWorkSpace/myproject';
this.$router.push({
path: '/myWorkSpace/myproject',
query: {},
});
}
return false;
}
if (
JSON.parse(sessionStorage.getItem('state')) &&
JSON.parse(sessionStorage.getItem('state')).path
) {
this.$store.commit('getCurRoute', JSON.parse(sessionStorage.state));
}
if (
this.user &&
this.token &&
this.tenant === 'HWCloud_Engineering' &&
JSON.parse(sessionStorage.getItem('state')) &&
JSON.parse(sessionStorage.getItem('state')).path
) {
this.$router.push({
path: '/myWorkSpace/myproject',
});
}
return true;
},
setCookie(cname, cvalue, exdays, domain) {
let d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
let expires = `expires=${d.toUTCString()}`;
document.cookie = `${cname}=${cvalue}; ${expires};path=/;domain=${domain || 'huawei.com'}`;
},
// 定时重新获取XToken 每半个小时获取一次
scheduledGetXToken() {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
tokenManager.refreshToken().then(r => r);
this.scheduledGetXToken();
}, 30 * 60 * 1000);
},
openNpsFeedback(config = {}) {
Object.assign(this.npsFeedbackConfig, {
serviceName: 'eAmirA',
negativeOptions: null,
positiveOptions: null,
...config,
});
let params = {
userId: this.$Cookies.get('iam_user'),
serviceId: this.npsFeedbackConfig.serviceId,
contactId: this.npsFeedbackConfig.contactId || this.$route.path,
};
getCommitDateAPI({ params })
.then(res => {
this.commitDate = res.data?.latest_feedback_date || '';
this.$nextTick(() => {
if (this.$refs.npsFeedback) {
let overTimeInterval = this.$refs.npsFeedback.overTimeInterval();
if (!overTimeInterval) {
this.$message.warning(
this.$t('已经评价', {
lastCommitDate: this.commitDate,
nextCommitDate: this.commitDate
? dayjs(this.commitDate).add(30, 'day').format('YYYY-MM-DD HH:mm:ss')
: '',
}),
);
} else {
this.$refs.npsFeedback.openNPS();
}
}
});
})
.catch(() => {
// 留作接口异常处理
});
},
onFeedbackSubmit(e) {
let items = [];
if (e && e.detail && e.detail[0] && Array.isArray(e.detail[0])) {
items = e.detail[0];
}
/* eslint-disable camelcase */
let answers = items.map(item => ({
question_id: item.questionId,
sub_question_id: item.subQuestionId,
sub_name: item.subName,
sub_remark: item.subRemark,
answer: item.answer,
reason: item.reason,
}));
commitFeedbackAPI({
user_id: this.$Cookies.get('iam_user'),
service_id: this.npsFeedbackConfig.serviceId,
contact_id: this.npsFeedbackConfig.contactId || this.$route.path,
answers,
})
.then(() => {
this.$message.success(this.$t('操作成功'));
this.$refs.npsFeedback?.closeNPS();
})
.catch(() => {
// 留作接口异常处理
});
},
/* eslint-disable camelcase */
},
};
</script>
<style lang="less" scoped>
.app-container {
height: 100%;
#app-main {
margin-right: 0px;
height: 100%;
overflow-y: auto;
}
.app-container-right {
min-height: 790px;
}
.app-container-right::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.el-container {
&.normal {
height: calc(100% - 48px) !important;
min-width: 1800px;
}
.el-aside {
width: auto !important;
max-width: 192px;
background-color: #222;
line-height: 200px;
}
.el-main {
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.el-main::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #d8dce5;
}
.el-main::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #adb0b8;
}
.large-screen {
overflow: hidden;
height: 1080px;
}
}
}
.el-breadcrumb {
padding: 10px;
font-size: 14px;
// background: rgb(238, 240, 245);
}
// 右上角警告弹窗
.el-notification {
width: auto !important;
}
// 滚动条样式
::-webkit-scrollbar {
width: 10px;
height: 6px;
}
// 滚动滑块
::-webkit-scrollbar-thumb {
background: #adb0b8;
border-radius: 8px;
}
::-webkit-scrollbar-track {
background: #ddd;
border-radius: 8px;
}
</style>
这是它的App.vue文件,app-container-right确实是存在的