新增

马宇豪

2024-11-12 77737f4e73f7267170b9b06fc73d1610c29c0661

 src/layout/navBars/breadcrumb/user.vue

@@ -1,79 +1,101 @@
<template>
    <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
        <div class="logo">
            <img src="src/assets/menu/companyLogo.jpg">
            <span> | </span>
            <img src="../../../assets/menu/companyLogo.png" />
            <span>{{ systemName }}</span>
        </div>
        <div style="display: flex;padding-right: 5px">
        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
            <div class="layout-navbars-breadcrumb-user-icon">
                <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
        <div style="display: flex; align-items: center; padding-right: 5px">
            <div @click="backToMenu()" class="backBtn">返回首页</div>
            <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
                <div class="layout-navbars-breadcrumb-user-icon">
                    <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
                        <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
                        <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
            <!--            <div class="layout-navbars-breadcrumb-user-icon">-->
            <!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
            <!--            </div>-->
            <!--            <template #dropdown>-->
            <!--                <el-dropdown-menu>-->
            <!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
            <!--                </el-dropdown-menu>-->
            <!--            </template>-->
            <!--        </el-dropdown>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
            <!--            <el-icon :title="$t('message.user.title2')">-->
            <!--                <ele-Search />-->
            <!--            </el-icon>-->
            <!--        </div>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
            <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
            <!--        </div>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
            <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
            <!--                <template #reference>-->
            <!--                    <el-badge :is-dot="true">-->
            <!--                        <el-icon :title="$t('message.user.title4')">-->
            <!--                            <ele-Bell />-->
            <!--                        </el-icon>-->
            <!--                    </el-badge>-->
            <!--                </template>-->
            <!--                <template #default>-->
            <!--                    <UserNews />-->
            <!--                </template>-->
            <!--            </el-popover>-->
            <!--        </div>-->
            <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
                <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
                    <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
                    <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
                </el-dropdown-menu>
            <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
                <span class="layout-navbars-breadcrumb-user-link">
                    <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/>
                    {{ userInfos.userName }}
                    <el-icon class="el-icon--right">
                        <ele-ArrowDown />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                        <el-dropdown-item @click="showPwdDialog = true">修改密码</el-dropdown-item>
                        <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                        <!--               <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
                        <!--               <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
                        <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
          <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
            <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="rePassword">
                  <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dropdown>
<!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
<!--            <div class="layout-navbars-breadcrumb-user-icon">-->
<!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
<!--            </div>-->
<!--            <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
<!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
<!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </template>-->
<!--        </el-dropdown>-->
<!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
<!--            <el-icon :title="$t('message.user.title2')">-->
<!--                <ele-Search />-->
<!--            </el-icon>-->
<!--        </div>-->
        <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
        <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
        <!--        </div>-->
        <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
        <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
        <!--                <template #reference>-->
        <!--                    <el-badge :is-dot="true">-->
        <!--                        <el-icon :title="$t('message.user.title4')">-->
        <!--                            <ele-Bell />-->
        <!--                        </el-icon>-->
        <!--                    </el-badge>-->
        <!--                </template>-->
        <!--                <template #default>-->
        <!--                    <UserNews />-->
        <!--                </template>-->
        <!--            </el-popover>-->
        <!--        </div>-->
        <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
            <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
        </div>
        <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
            <span class="layout-navbars-breadcrumb-user-link">
                <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
                {{ userInfos.userName }}
                <el-icon class="el-icon--right">
                    <ele-ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="/homeMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                    <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
<!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                    <!--               <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
                    <!--               <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
                    <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <Search ref="searchRef" />
          </el-dialog>
            <Search ref="searchRef" />
        </div>
    </div>
</template>
@@ -92,6 +114,17 @@
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
import Search from '/@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '/@/api/login';
import { useMenuApi } from '/@/api/systemManage/menu/index';

const menuApi = useMenuApi();
import { backEndComponent, getBackEndControlRoutes, initBackEndControlRoutes, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '../../../router/backEnd';
import { NextLoading } from '/@/utils/loading';
import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
import { dynamicRoutes } from '/@/router/route';
import Cookies from 'js-cookie';
import {useRoutesList} from "/@/stores/routesList";
import {verifyPwd} from "/@/utils/toolsValidate";
import {userApi} from "/@/api/systemManage/user";

export default defineComponent({
    name: 'layoutBreadcrumbUser',
@@ -101,14 +134,47 @@
        const { proxy } = <any>getCurrentInstance();
        const router = useRouter();
        const stores = useUserInfo();
        const routeList = storeToRefs(useRoutesList())
        const storesThemeConfig = useThemeConfig();
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const searchRef = ref();
      const pwdRef = ref();
      const validatePwd = (rule: any, value: any, callback: any)=>{
        if(value === ''){
          callback(new Error('请输入密码'))
        }else{
          if(!verifyPwd(value)){
            callback(new Error('密码须包含字母、数字、特殊字符，长度在6-16之间'))
          }else{
            callback()
          }
        }
      }
      const equalToPassword = (rule: any, value: any, callback: any) => {
        if(value == ''){
          callback(new Error("请再次确认密码"))
        }else if (state.pwdForm.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"))
        } else {
          callback();
        }
      };
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
            disabledSize: 'large'
            disabledSize: 'large',
            systemName: '',
          showPwdDialog: false,
          pwdForm: {
            uid: Cookies.get('uid'),
            newPassword: '',
            rePassword: ''
          },
          pwdFormRules: {
            newPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
            rePassword: [{ required: true, validator: equalToPassword, trigger: "blur" }]
          }
        });
        // 设置分割样式
        const layoutUserFlexNum = computed(() => {
@@ -119,6 +185,42 @@
            else num = '';
            return num;
        });

      const onPwdSubmit = async () => {
        pwdRef.value.validate(async (valid:Boolean) => {
          if(valid){
            const {rePassword,...data} = state.pwdForm
            let res = await userApi().pwdModSelf(data);
            if (res.data.code === '200') {
              state.showPwdDialog = false
              ElMessage({
                type: 'success',
                message: '密码修改成功，请重新登录',
                duration: 2000
              })
              setTimeout(()=>{
                useLoginApi()
                    .signOut()
                    .then(() => {
                      Session.clear()
                      window.location.href = '/'
                    })
              },2000)
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }else{
            ElMessage({
              type:'warning',
              message:'请完善信息'
            })
          }
        })
      }

        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
@@ -238,15 +340,42 @@
                    break;
            }
        };

        const getSysName = async () => {
            if (window.nextLoading === undefined) NextLoading.start();
            if (!Cookies.get('token')) return false;
            const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
            if (res.data.code === '200') {
              if(res.data.data && res.data.data[0]){
                state.systemName = res.data.data[0].project.projectName;
              }else{
                state.systemName = ''
              }
            } else {
                console.log('有问题');
            }
        };
        const backToMenu = () => {
            router.push({ path: 'newMenu' }).then(()=>{
                routeList.routesList.value = []
            });
        };
        // const toHome = () => {
        //     router.push({ path: 'newMenu' });
        // };
        // 页面加载时
        onMounted(() => {
            if (Local.get('themeConfig')) {
                initI18n();
                initComponentSize();
            }
            getSysName();
        });
        return {
            userInfos,
          pwdRef,
          onPwdSubmit,
            backToMenu,
            onLayoutSetingClick,
            onHandleCommandClick,
            onScreenfullClick,
@@ -262,60 +391,130 @@
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (min-width: 1400px) {
        .logo{
            img {
                height: 100%;
            }
            span{
                font-size: 32px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 16px;
            cursor: pointer;
            margin-right: 20px;

    .logo{
        height: 50px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;
        img{
            height: 100%;
        }
    }
    &-link {
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        &-photo {
            width: 25px;
            height: 25px;
            border-radius: 100%;
        }
    }
    &-icon {
        padding: 0 10px;
        cursor: pointer;
        color: var(--next-bg-topBarColor);
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        &:hover {
            background: var(--next-color-user-hover);
            i {
                display: inline-block;
                animation: logoAnimation 0.3s ease-in-out;
            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    }
    ::v-deep(.el-dropdown) {
        color: var(--next-bg-topBarColor);
    @media screen and (min-width: 1200px) and (max-width: 1400px) {
        .logo{
            img {
                height: 90%;
            }
            span{
                font-size: 28px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 14px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    }
    ::v-deep(.el-badge) {
        height: 40px;
        line-height: 40px;
    @media screen and (max-width: 1024px) {
        .logo{
            img {
                width: 60%;
                height: auto;
            }
            span{
                font-size: 22px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 12px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    }
    .layout-navbars-breadcrumb-user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo {
            height: 75%;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
        }
        &-link {
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            &-photo {
                width: 25px;
                height: 25px;
                border-radius: 100%;
            }
        }
        &-icon {
            padding: 0 10px;
            cursor: pointer;
            color: var(--next-bg-topBarColor);
            height: 80px;
            line-height: 80px;
            display: flex;
            align-items: center;
            &:hover {
                background: var(--next-color-user-hover);
                i {
                    display: inline-block;
                    animation: logoAnimation 0.3s ease-in-out;
                }
            }
        }
        ::v-deep(.el-dropdown) {
            color: var(--next-bg-topBarColor);
        }
        ::v-deep(.el-badge) {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
        }
        ::v-deep(.el-badge__content.is-fixed) {
            top: 12px;
        }
    }
    ::v-deep(.el-badge__content.is-fixed) {
        top: 12px;
    }
}
</style>