| | |
| | | <template> |
| | | <div class="avue-top"> |
| | | <div class="top-bar__left"> |
| | | <div class="avue-breadcrumb" |
| | | <div v-if="showCollapse" |
| | | :class="[{ 'avue-breadcrumb--active': isCollapse }]" |
| | | v-if="showCollapse"> |
| | | class="avue-breadcrumb"> |
| | | <i class="icon-navicon" |
| | | @click="setCollapse"></i> |
| | | </div> |
| | | </div> |
| | | <div class="top-bar__title"> |
| | | <div class="top-bar__item top-bar__item--show" |
| | | v-if="showMenu"> |
| | | <div v-if="showMenu" |
| | | class="top-bar__item top-bar__item--show"> |
| | | <top-menu ref="topMenu"></top-menu> |
| | | </div> |
| | | <span class="top-bar__item" |
| | | v-if="showSearch"> |
| | | <span v-if="showSearch" |
| | | class="top-bar__item"> |
| | | <top-search></top-search> |
| | | </span> |
| | | </div> |
| | | <div class="top-bar__right"> |
| | | <el-tooltip v-if="showColor" |
| | | effect="dark" |
| | | :content="$t('navbar.color')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item"> |
| | | <top-color></top-color> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showDebug" |
| | | effect="dark" |
| | | :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item"> |
| | | <top-logs></top-logs> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showLock" |
| | | effect="dark" |
| | | :content="$t('navbar.lock')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item"> |
| | | <top-lock></top-lock> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showTheme" |
| | | effect="dark" |
| | | :content="$t('navbar.theme')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-theme></top-theme> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip effect="dark" |
| | | :content="$t('navbar.notice')" |
| | | <el-tooltip :content="$t('navbar.notice')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-notice></top-notice> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip effect="dark" |
| | | :content="$t('navbar.language')" |
| | | <el-tooltip :content="$t('navbar.language')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item top-bar__item--show"> |
| | | <top-lang></top-lang> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showFullScren" |
| | | effect="dark" |
| | | :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" |
| | | effect="dark" |
| | | placement="bottom"> |
| | | <div class="top-bar__item"> |
| | | <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" |
| | | @click="handleScreen"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <img class="top-bar__img" |
| | | :src="userInfo.avatar"> |
| | | <img :src="userInfo.avatar" |
| | | class="top-bar__img"> |
| | | <el-dropdown> |
| | | <span class="el-dropdown-link"> |
| | | {{userInfo.userName}} |
| | |
| | | <el-dropdown-item> |
| | | <router-link to="/">{{$t('navbar.dashboard')}}</router-link> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item> |
| | | <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link> |
| | | <el-dropdown-item @click.native="changePasswordHandler"> |
| | | <!-- <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>--> |
| | | 修改密码 |
| | | </el-dropdown-item> |
| | | <el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept" |
| | | >{{$t('navbar.switchDept')}} |
| | | </el-dropdown-item> |
| | | <el-dropdown-item @click.native="logout" |
| | | divided>{{$t('navbar.logOut')}} |
| | | <el-dropdown-item divided |
| | | @click.native="logout">{{ $t('navbar.logOut') }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | <el-dialog title="用户信息选择" |
| | | <el-dialog :visible.sync="userBox" |
| | | append-to-body |
| | | :visible.sync="userBox" |
| | | title="用户信息选择" |
| | | width="350px"> |
| | | <avue-form ref="form" :option="userOption" v-model="userForm" @submit="submitSwitch"/> |
| | | <avue-form ref="form" v-model="userForm" :option="userOption" @submit="submitSwitch"/> |
| | | </el-dialog> |
| | | |
| | | <!-- 修改密码对话框 --> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | :visible.sync="passwordVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="修改密码" |
| | | width="50%"> |
| | | <avue-form ref="form" v-model="passwordForm" :option="passwordOption" @submit="submitSwitch"/> |
| | | </el-dialog> |
| | | </div> |
| | | </div> |
| | |
| | | name: "top", |
| | | data() { |
| | | return { |
| | | passwordVisible: false, |
| | | passwordForm: {}, |
| | | passwordOption: { |
| | | submitText:'保存', |
| | | column: [ |
| | | { |
| | | label: '登陆密码', |
| | | prop: 'input', |
| | | span: 24, |
| | | labelWidth:"15%", |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入登陆密码', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '新登陆密码', |
| | | prop: 'input1', |
| | | span: 24, |
| | | labelWidth:"15%", |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入新登陆密码', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '新密码登陆确认', |
| | | prop: 'input2', |
| | | span: 24, |
| | | labelWidth:"15%", |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请确认登陆密码', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | | userBox: false, |
| | | userForm: { |
| | | deptId: '', |
| | |
| | | ]) |
| | | }, |
| | | methods: { |
| | | // 修改密码 |
| | | changePasswordHandler() { |
| | | console.log('123'); |
| | | this.passwordVisible = true; |
| | | }, |
| | | handleScreen() { |
| | | fullscreenToggel(); |
| | | }, |