Merge branch 'master' of http://118.89.139.230:10101/r/docManageSystem

he wei

2022-09-02 540ea20b37aca7fc96e7e5ba45e55f95b39e65a2

Merge branch 'master' of http://118.89.139.230:10101/r/docManageSystem

 src/components/menu/SideMenu.vue

@@ -7,15 +7,31 @@
      </router-link>
    </div>
    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
    <div class="header-avatar-container" v-if="affixed">
      <header-avatar :show-name="!collapsed" class="header-item" color="#FFFFFF" @changepwd="changePwd"/>
    </div>
    <a-modal
        :visible="changePwdShow"
        :footer="null"
        title="修改密码"
        :destroyOnClose="true"
        @cancel="cancel"
    >
      <change-password
          @close="cancel"
      ></change-password>
    </a-modal>
  </a-layout-sider>
</template>

<script>
import IMenu from './menu'
import {mapState} from 'vuex'
import HeaderAvatar from "../../layouts/header/HeaderAvatar";
import ChangePassword from '@/pages/user/components/changePwd';
export default {
  name: 'SideMenu',
  components: {IMenu},
  components: {IMenu, HeaderAvatar, ChangePassword},
  props: {
    collapsible: {
      type: Boolean,
@@ -37,16 +53,27 @@
      default: 'dark'
    }
  },
  data() {
    return {
      changePwdShow: false,
    }
  },
  computed: {
    sideTheme() {
      return this.theme == 'light' ? this.theme : 'dark'
    },
    ...mapState('setting', ['isMobile', 'systemName'])
    ...mapState('setting', ['isMobile', 'systemName', 'affixed'])
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
    },
    changePwd () {
      this.changePwdShow = true;
    },
    cancel () {
      this.changePwdShow = false;
    },
  }
}
</script>

 src/components/menu/index.less

@@ -36,3 +36,9 @@
.menu{
  padding: 16px 0;
}
.header-avatar-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-left: 32px;
}

 src/layouts/header/HeaderAvatar.vue

@@ -2,9 +2,12 @@
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-avatar class="avatar" size="small" shape="circle" icon="user" />
      <span class="name">{{ user.name }}</span>
      <span v-if="showName" class="name" :style="{'color': color}">{{ user.name }}</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item>
        <div style="text-align: center" v-if="!showName">{{ user.name }}</div>
      </a-menu-item>
      <a-menu-item @click="changePwd">
        <a-icon type="user" />
        <span>修改密码</span>
@@ -24,6 +27,17 @@

export default {
  name: "HeaderAvatar",
  props: {
    color: {
      type: String,
      default: "#000"
    },
    showName: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  computed: {
    ...mapGetters("account", ["user"]),
  },