|
|
@@ -10,35 +10,23 @@
|
|
|
</span>
|
|
|
</span>
|
|
|
|
|
|
+ <!-- 地灾才使用 -->
|
|
|
+ <!-- <template #overlay>
|
|
|
+ <Menu @click="handleMenuClick2">
|
|
|
+ <MenuItem key="personal" text="返回门户" icon="ion:document-text-outline" />
|
|
|
+ </Menu>
|
|
|
+ </template> -->
|
|
|
+
|
|
|
<!-- <template #overlay>
|
|
|
<Menu @click="handleMenuClick">
|
|
|
- <MenuItem
|
|
|
- key="personal"
|
|
|
- :text="t('layout.header.dropdownItemPersonal')"
|
|
|
- icon="ion:document-text-outline"
|
|
|
- />
|
|
|
- <MenuItem
|
|
|
- v-if="hasPermission('system:password:view')"
|
|
|
- key="changePassword"
|
|
|
- :text="t('layout.header.dropdownItemChangePassword')"
|
|
|
- icon="ant-design:unlock-twotone"
|
|
|
- />
|
|
|
- <MenuItem
|
|
|
- key="aboutSoftware"
|
|
|
- :text="handleDecode(t('routes.aboutSoftware.aboutSoftware'))"
|
|
|
- icon="ant-design:message-outline"
|
|
|
- />
|
|
|
- <MenuItem
|
|
|
- v-if="getUseLockPage"
|
|
|
- key="lock"
|
|
|
- :text="t('layout.header.tooltipLock')"
|
|
|
- icon="ion:lock-closed-outline"
|
|
|
- />
|
|
|
- <MenuItem
|
|
|
- key="logout"
|
|
|
- :text="t('layout.header.dropdownItemLoginOut')"
|
|
|
- icon="ion:power-outline"
|
|
|
- />
|
|
|
+ <MenuItem key="personal" :text="t('layout.header.dropdownItemPersonal')" icon="ion:document-text-outline" />
|
|
|
+ <MenuItem v-if="hasPermission('system:password:view')" key="changePassword"
|
|
|
+ :text="t('layout.header.dropdownItemChangePassword')" icon="ant-design:unlock-twotone" />
|
|
|
+ <MenuItem key="aboutSoftware" :text="handleDecode(t('routes.aboutSoftware.aboutSoftware'))"
|
|
|
+ icon="ant-design:message-outline" />
|
|
|
+ <MenuItem v-if="getUseLockPage" key="lock" :text="t('layout.header.tooltipLock')"
|
|
|
+ icon="ion:lock-closed-outline" />
|
|
|
+ <MenuItem key="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
|
|
|
</Menu>
|
|
|
</template> -->
|
|
|
</Dropdown>
|
|
|
@@ -48,211 +36,223 @@
|
|
|
ref="personalRef"
|
|
|
@register="registerPersonal"
|
|
|
/> -->
|
|
|
- <PersonInfoModal v-if="ifShowPersonInfo" @closeModal="ifShowPersonInfo = false" :formData="userInfo"/>
|
|
|
+ <PersonInfoModal v-if="ifShowPersonInfo" @closeModal="ifShowPersonInfo = false" :formData="userInfo" />
|
|
|
<AboutSoftwareModal @register="registerModal" />
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- // components
|
|
|
- import { Dropdown, Menu } from 'ant-design-vue';
|
|
|
- import { defineComponent, computed, ref, reactive } from 'vue';
|
|
|
- import { useUserStore } from '/@/store/modules/user';
|
|
|
- import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
|
|
- import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
- import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
- import { useModal } from '/@/components/Modal';
|
|
|
- import headerImg from '/@/assets/images/logo.png';
|
|
|
- import { propTypes } from '/@/utils/propTypes';
|
|
|
- import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
|
|
- import { USER_INFO_KEY } from '/@/enums/cacheEnum';
|
|
|
- import { getAuthCache } from '/@/utils/auth';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
- import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
- import AboutSoftwareModal from '../AboutSoftwareModal.vue';
|
|
|
- import { AesEncryption } from '/@/utils/cipher';
|
|
|
- import { cacheCipher } from '/@/settings/encryptionSetting';
|
|
|
- import userImg from "/@/assets/images/userImg.svg";
|
|
|
- import PersonInfoModal from './PersonInfoModal.vue';
|
|
|
+// components
|
|
|
+import { Dropdown, Menu } from 'ant-design-vue';
|
|
|
+import { defineComponent, computed, ref, reactive } from 'vue';
|
|
|
+import { useUserStore } from '/@/store/modules/user';
|
|
|
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
|
|
+import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
+import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
+import { useModal } from '/@/components/Modal';
|
|
|
+import headerImg from '/@/assets/images/logo.png';
|
|
|
+import { propTypes } from '/@/utils/propTypes';
|
|
|
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
|
|
+import { USER_INFO_KEY } from '/@/enums/cacheEnum';
|
|
|
+import { getAuthCache } from '/@/utils/auth';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+import AboutSoftwareModal from '../AboutSoftwareModal.vue';
|
|
|
+import { AesEncryption } from '/@/utils/cipher';
|
|
|
+import { cacheCipher } from '/@/settings/encryptionSetting';
|
|
|
+import userImg from "/@/assets/images/userImg.svg";
|
|
|
+import PersonInfoModal from './PersonInfoModal.vue';
|
|
|
|
|
|
- type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal' | 'changePassword' | 'aboutSoftware';
|
|
|
+type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal' | 'changePassword' | 'aboutSoftware';
|
|
|
|
|
|
- export default defineComponent({
|
|
|
- name: 'UserDropdown',
|
|
|
- components: {
|
|
|
- Dropdown,
|
|
|
- Menu,
|
|
|
- MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
|
|
|
- LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
|
|
|
- PersonalChild: createAsyncComponent(() => import('../personal/index.vue')),
|
|
|
- AboutSoftwareModal,
|
|
|
- PersonInfoModal
|
|
|
- },
|
|
|
- props: {
|
|
|
- theme: propTypes.oneOf(['dark', 'light']),
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const ifShowPersonInfo = ref(false)
|
|
|
- //修复修改密码根据后端返回的权限标识来显隐
|
|
|
- const { hasPermission } = usePermission();
|
|
|
- //修复修改密码根据后端返回的权限标识来显隐
|
|
|
- const refreshPersonlData = reactive({
|
|
|
- avatar: '',
|
|
|
- realName: '',
|
|
|
- });
|
|
|
- const updataPersonlData = reactive({
|
|
|
- avatar: '',
|
|
|
- realName: '',
|
|
|
- });
|
|
|
- const userInfo = getAuthCache(USER_INFO_KEY);
|
|
|
- const personalRef = ref(null);
|
|
|
- const { prefixCls } = useDesign('header-user-dropdown');
|
|
|
- const { t } = useI18n();
|
|
|
- const { getShowDoc, getUseLockPage } = useHeaderSetting();
|
|
|
- const userStore = useUserStore();
|
|
|
+export default defineComponent({
|
|
|
+ name: 'UserDropdown',
|
|
|
+ components: {
|
|
|
+ Dropdown,
|
|
|
+ Menu,
|
|
|
+ MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
|
|
|
+ LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
|
|
|
+ PersonalChild: createAsyncComponent(() => import('../personal/index.vue')),
|
|
|
+ AboutSoftwareModal,
|
|
|
+ PersonInfoModal
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ theme: propTypes.oneOf(['dark', 'light']),
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const ifShowPersonInfo = ref(false)
|
|
|
+ //修复修改密码根据后端返回的权限标识来显隐
|
|
|
+ const { hasPermission } = usePermission();
|
|
|
+ //修复修改密码根据后端返回的权限标识来显隐
|
|
|
+ const refreshPersonlData = reactive({
|
|
|
+ avatar: '',
|
|
|
+ realName: '',
|
|
|
+ });
|
|
|
+ const updataPersonlData = reactive({
|
|
|
+ avatar: '',
|
|
|
+ realName: '',
|
|
|
+ });
|
|
|
+ const userInfo = getAuthCache(USER_INFO_KEY);
|
|
|
+ const personalRef = ref(null);
|
|
|
+ const { prefixCls } = useDesign('header-user-dropdown');
|
|
|
+ const { t } = useI18n();
|
|
|
+ const { getShowDoc, getUseLockPage } = useHeaderSetting();
|
|
|
+ const userStore = useUserStore();
|
|
|
|
|
|
- const getUserInfo = computed(() => {
|
|
|
- const { realName = '', avatar } = userStore.getUserInfo || {};
|
|
|
- return { realName, avatar: avatar || headerImg };
|
|
|
- });
|
|
|
+ const getUserInfo = computed(() => {
|
|
|
+ const { realName = '', avatar } = userStore.getUserInfo || {};
|
|
|
+ return { realName, avatar: avatar || headerImg };
|
|
|
+ });
|
|
|
|
|
|
- const [register, { openModal }] = useModal();
|
|
|
- const [registerPersonal, { openModal: openModalPersonal }] = useModal();
|
|
|
+ const [register, { openModal }] = useModal();
|
|
|
+ const [registerPersonal, { openModal: openModalPersonal }] = useModal();
|
|
|
|
|
|
- function handleLock() {
|
|
|
- openModal(true);
|
|
|
- }
|
|
|
+ function handleLock() {
|
|
|
+ openModal(true);
|
|
|
+ }
|
|
|
|
|
|
- const [registerModal, { openModal: openAboutSoftwareModal }] = useModal();
|
|
|
- function handleOpenAboutSoftwareModal() {
|
|
|
- openAboutSoftwareModal();
|
|
|
- }
|
|
|
+ const [registerModal, { openModal: openAboutSoftwareModal }] = useModal();
|
|
|
+ function handleOpenAboutSoftwareModal() {
|
|
|
+ openAboutSoftwareModal();
|
|
|
+ }
|
|
|
|
|
|
- // login out
|
|
|
- function handleLoginOut() {
|
|
|
- userStore.confirmLoginOut();
|
|
|
- }
|
|
|
- function handleMenuClick(e: { key: MenuEvent }) {
|
|
|
- ifShowPersonInfo.value = true
|
|
|
- // openPersonalFunc();
|
|
|
- // switch (e.key) {
|
|
|
- // case 'logout':
|
|
|
- // handleLoginOut();
|
|
|
- // break;
|
|
|
- // case 'personal':
|
|
|
- // openPersonalFunc();
|
|
|
- // break;
|
|
|
- // case 'lock':
|
|
|
- // handleLock();
|
|
|
- // break;
|
|
|
- // case 'changePassword':
|
|
|
- // changePassword();
|
|
|
- // break;
|
|
|
- // case 'aboutSoftware':
|
|
|
- // handleOpenAboutSoftwareModal();
|
|
|
- // }
|
|
|
+ // login out
|
|
|
+ function handleLoginOut() {
|
|
|
+ userStore.confirmLoginOut();
|
|
|
+ }
|
|
|
+ function handleMenuClick(e: { key: MenuEvent }) {
|
|
|
+ ifShowPersonInfo.value = true
|
|
|
+ // openPersonalFunc();
|
|
|
+ // switch (e.key) {
|
|
|
+ // case 'logout':
|
|
|
+ // handleLoginOut();
|
|
|
+ // break;
|
|
|
+ // case 'personal':
|
|
|
+ // openPersonalFunc();
|
|
|
+ // break;
|
|
|
+ // case 'lock':
|
|
|
+ // handleLock();
|
|
|
+ // break;
|
|
|
+ // case 'changePassword':
|
|
|
+ // changePassword();
|
|
|
+ // break;
|
|
|
+ // case 'aboutSoftware':
|
|
|
+ // handleOpenAboutSoftwareModal();
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleMenuClick2(e: { key: MenuEvent }) {//地灾
|
|
|
+ openPersonalFunc();
|
|
|
+ switch (e.key) {
|
|
|
+ case 'personal':
|
|
|
+ var t = sessionStorage.getItem('adminToken');
|
|
|
+ if (t) sessionStorage.setItem('token', t);
|
|
|
+ window.location.href = '/admin/index.html#/lifeline/bigscreen/systemNavigation'
|
|
|
+ break;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- const openPersonalFunc = () => {
|
|
|
- setTimeout(() => {
|
|
|
- openModalPersonal(true, {
|
|
|
- userInfo,
|
|
|
- });
|
|
|
- }, 10);
|
|
|
- };
|
|
|
- const refreshCacheGetData = () => {
|
|
|
- const getItem = window.localStorage.getItem('updateUserInfo');
|
|
|
- const newItem = JSON.parse(getItem);
|
|
|
- updataPersonlData.avatar = newItem?.avatar;
|
|
|
- updataPersonlData.realName = newItem?.realName;
|
|
|
- };
|
|
|
- refreshCacheGetData();
|
|
|
- const refreshPersonalFunc = (v) => {
|
|
|
- refreshPersonlData.avatar = v.avatar;
|
|
|
- refreshPersonlData.realName = v.realName;
|
|
|
- };
|
|
|
- const router = useRouter();
|
|
|
- const changePassword = () => {
|
|
|
- router.push('/system/changePassword');
|
|
|
- };
|
|
|
+ const openPersonalFunc = () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ openModalPersonal(true, {
|
|
|
+ userInfo,
|
|
|
+ });
|
|
|
+ }, 10);
|
|
|
+ };
|
|
|
+ const refreshCacheGetData = () => {
|
|
|
+ const getItem = window.localStorage.getItem('updateUserInfo');
|
|
|
+ const newItem = JSON.parse(getItem);
|
|
|
+ updataPersonlData.avatar = newItem?.avatar;
|
|
|
+ updataPersonlData.realName = newItem?.realName;
|
|
|
+ };
|
|
|
+ refreshCacheGetData();
|
|
|
+ const refreshPersonalFunc = (v) => {
|
|
|
+ refreshPersonlData.avatar = v.avatar;
|
|
|
+ refreshPersonlData.realName = v.realName;
|
|
|
+ };
|
|
|
+ const router = useRouter();
|
|
|
+ const changePassword = () => {
|
|
|
+ router.push('/system/changePassword');
|
|
|
+ };
|
|
|
|
|
|
- const encryption = new AesEncryption(cacheCipher);
|
|
|
- const handleDecode = (string: string) => {
|
|
|
- return encryption.decryptByAES(string);
|
|
|
- };
|
|
|
+ const encryption = new AesEncryption(cacheCipher);
|
|
|
+ const handleDecode = (string: string) => {
|
|
|
+ return encryption.decryptByAES(string);
|
|
|
+ };
|
|
|
|
|
|
- return {
|
|
|
- userInfo,
|
|
|
- ifShowPersonInfo,
|
|
|
- userImg,
|
|
|
- handleDecode,
|
|
|
- updataPersonlData,
|
|
|
- refreshPersonlData,
|
|
|
- refreshPersonalFunc,
|
|
|
- personalRef,
|
|
|
- registerPersonal,
|
|
|
- openPersonalFunc,
|
|
|
- prefixCls,
|
|
|
- t,
|
|
|
- getUserInfo,
|
|
|
- handleMenuClick,
|
|
|
- getShowDoc,
|
|
|
- register,
|
|
|
- getUseLockPage,
|
|
|
- hasPermission,
|
|
|
- registerModal,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ return {
|
|
|
+ userInfo,
|
|
|
+ ifShowPersonInfo,
|
|
|
+ userImg,
|
|
|
+ handleDecode,
|
|
|
+ updataPersonlData,
|
|
|
+ refreshPersonlData,
|
|
|
+ refreshPersonalFunc,
|
|
|
+ personalRef,
|
|
|
+ registerPersonal,
|
|
|
+ openPersonalFunc,
|
|
|
+ prefixCls,
|
|
|
+ t,
|
|
|
+ getUserInfo,
|
|
|
+ handleMenuClick2,
|
|
|
+ handleMenuClick,
|
|
|
+ getShowDoc,
|
|
|
+ register,
|
|
|
+ getUseLockPage,
|
|
|
+ hasPermission,
|
|
|
+ registerModal,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- @prefix-cls: ~'@{namespace}-header-user-dropdown';
|
|
|
+@prefix-cls: ~'@{namespace}-header-user-dropdown';
|
|
|
|
|
|
- .@{prefix-cls} {
|
|
|
- height: @header-height;
|
|
|
- padding: 0 0 0 10px;
|
|
|
- padding-right: 10px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- align-items: center;
|
|
|
+.@{prefix-cls} {
|
|
|
+ height: @header-height;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
|
|
|
- &__header {
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+ &__header {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
|
|
|
- &__name {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ &__name {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
- &--dark {
|
|
|
- &:hover {
|
|
|
- background-color: @header-dark-bg-hover-color;
|
|
|
- }
|
|
|
+ &--dark {
|
|
|
+ &:hover {
|
|
|
+ background-color: @header-dark-bg-hover-color;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &--light {
|
|
|
- &:hover {
|
|
|
- background-color: @header-light-bg-hover-color;
|
|
|
- }
|
|
|
+ &--light {
|
|
|
+ &:hover {
|
|
|
+ background-color: @header-light-bg-hover-color;
|
|
|
+ }
|
|
|
|
|
|
- .@{prefix-cls}__name {
|
|
|
- color: @text-color-base;
|
|
|
- }
|
|
|
+ .@{prefix-cls}__name {
|
|
|
+ color: @text-color-base;
|
|
|
+ }
|
|
|
|
|
|
- .@{prefix-cls}__desc {
|
|
|
- color: @header-light-desc-color;
|
|
|
- }
|
|
|
+ .@{prefix-cls}__desc {
|
|
|
+ color: @header-light-desc-color;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &-dropdown-overlay {
|
|
|
- .ant-dropdown-menu-item {
|
|
|
- min-width: 160px;
|
|
|
- }
|
|
|
+ &-dropdown-overlay {
|
|
|
+ .ant-dropdown-menu-item {
|
|
|
+ min-width: 160px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
XiaXxxxxx