9. CMDB前端开发(上)

<template>
    这是仪表盘
</template>

<script>
    export default {
        name: "Dashboard"
    }
</script>

<style scoped>

</style>

...
const routes = [
  {
    path: '/',
    name: '首页',
    icon: 'Monitor',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
         path: '/dashboard',
         name: '仪表盘',
         component: () => import('../views/dashboard/Dashboard.vue')
      }
    ]
  },
  ....

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
              <!-- 单独处理仪表盘的菜单-->
              <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
                <el-icon><component :is="menu.children[0].icon" /></el-icon>
                <span>{{menu.name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.children[0].name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>密码修改</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  .el-dropdown-link img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: auto;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

<template>
    <div class="main">
        <div class="login_box">
            <div class="title">
                欢迎访问DevOps运维平台
            </div>
            <div class="login_form">
                <el-form label-width="30px">
                    <el-form-item>
                        <el-input
                                :prefix-icon="User"
                                placeholder="用户名"
                                v-model="form.username"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                                :prefix-icon="Lock"
                                placeholder="密码"
                                type="password"
                                v-model="form.password"
                                show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                       <el-button type="primary" @click="onSubmit" >登录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>
<script>
    // input里加图标必须单独按需导入
    import { User, Lock } from "@element-plus/icons-vue";
    export default {
        name: 'Login',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log("aaa")
            }
        },
        // 需要用setup导入
        setup() {
            return {
                User,Lock
            }
        }
    }
</script>

<style scoped>
    .main {
        background-image: url("../assets/img/login_background.jpeg");
        background-size: 100% 100%;
        height: 100%;
    }
    .login_box {
        width: 400px;
        height: 300px;
        background-color: #FFFFFF;
        box-shadow: 0 5px 20px 0 #e8e8e8;
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #409eff;
        text-align: center;
        margin-top: 30px;
    }
    .login_form {
        margin-top: 40px;
        margin-right: 30px;
    }
    .btn {
        margin-left: 36%;
    }
    .btn .el-button {
        width: 140px;
    }
</style>

...
const routes = [
  {
    path: '/login',
    name: '登录',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/',
    name: '首页',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
         path: '/dashboard',
         name: '仪表盘',
         icon: 'Monitor',
         component: () => import('../views/dashboard/Dashboard.vue')
      }
    ]
  },
  ....

cd devops_web
npm install axios

import  axios from "axios"
import {ElMessage} from "element-plus"

const instance = axios.create({
    baseURL: 'http://127.0.0.1:8000/api',
    timeout: 5000
})
//请求拦截器
instance.interceptors.request.use(config => {
    //在请求api之前携带token
    const token = window.sessionStorage.getItem('token')
    if (token) {
        config.headers = {
            'Authorization': 'Token ' + token
        }
    }
    return config;
}, error => {
    return Promise.reject(error)
})
//响应拦截器
instance.interceptors.response.use(response => {
    //处理响应数据
    if (response.data.code != 200 ) {
        ElMessage.error(response.data.msg)
    }
    return response
}, error => {
    //处理catch的地方
    ElMessage('连接服务器失败，请稍后再试！！')
    return Promise.reject(error)
})

export default instance

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElIconModules from '@element-plus/icons-vue'
//导入axios, 重新封装的axios
import axios from "./api/http";

const app = createApp(App)

app.use(ElementPlus)
for(let iconName in ElIconModules) {
    app.component(iconName,ElIconModules[iconName])
}
app.config.globalProperties.$http = axios;
app.use(router).mount('#app')

<template>
    <div class="main">
        <div class="login_box">
            <div class="title">
                欢迎访问DevOps运维平台
            </div>
            <div class="login_form">
                <el-form :model="form" ref="form" :rules="rules" label-width="30px">
                    <el-form-item prop="username">
                        <el-input
                                :prefix-icon="User"
                                placeholder="用户名"
                                v-model="form.username"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                :prefix-icon="Lock"
                                placeholder="密码"
                                type="password"
                                v-model="form.password"
                                show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                       <el-button type="primary" @click="onSubmit" >登录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>
<script>
    // input里加图标必须单独按需导入
    import { User, Lock } from "@element-plus/icons-vue";
    export default {
        name: 'Login',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                },
                rules: {
                  username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, message: '用户名长度应不小于3个字符', trigger: 'blur'}
                  ],
                  password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur'}
                  ]
                }
            }
        },
        methods: {
            onSubmit() {
                // 提交前预验证
               this.$refs.form.validate((valid) => {  //回调函数中valid布尔值
                  if (valid) {
                    // 登陆成功并给消息提示
                    this.$http.post('/login/', this.form)
                    .then(res => {
                      if (res.data.code == 200) {
                        this.$message.success('登录成功');
                        // 保存token
                        window.sessionStorage.setItem("token", res.data.token);
                        this.$router.push('/dashboard/')
                      }
                })
                  } else {
                    this.$message.warning('用户名或密码格式错误！')
                  }
                })
            }
        },
        // 需要用setup导入
        setup() {
            return {
                User,Lock
            }
        }
    }
</script>

<style scoped>
    .main {
        background-image: url("../assets/img/login_background.jpeg");
        background-size: 100% 100%;
        height: 100%;
    }
    .login_box {
        width: 400px;
        height: 300px;
        background-color: #FFFFFF;
        box-shadow: 0 5px 20px 0 #e8e8e8;
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #409eff;
        text-align: center;
        margin-top: 30px;
    }
    .login_form {
        margin-top: 40px;
        margin-right: 30px;
    }
    .btn {
        margin-left: 36%;
    }
    .btn .el-button {
        width: 140px;
    }
</style>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
             <!--  <el-menu-item v-if="!menu.children" :index="menu.path">-->
             <!--    <el-icon><component :is="menu.icon" /></el-icon>-->
             <!--    <span>{{menu.name}}</span>-->
             <!--  </el-menu-item>-->
              <!-- 单独处理仪表盘的菜单-->
              <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
                <el-icon><component :is="menu.children[0].icon" /></el-icon>
                <span>{{menu.children[0].name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else-if="menu.children" :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>密码修改</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  .el-dropdown-link img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: auto;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

pip3 install django-cors-headers

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'rest_framework.authtoken',
    'rest_framework_swagger',
    'django_filters',
    'cmdb',
    'system_config',
    'corsheaders'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware'
]
CORS_ORIGIN_ALLOW_ALL = True

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
             <!--  <el-menu-item v-if="!menu.children" :index="menu.path">-->
             <!--    <el-icon><component :is="menu.icon" /></el-icon>-->
             <!--    <span>{{menu.name}}</span>-->
             <!--  </el-menu-item>-->
              <!-- 单独处理仪表盘的菜单-->
              <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
                <el-icon><component :is="menu.children[0].icon" /></el-icon>
                <span>{{menu.children[0].name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else-if="menu.children" :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>密码修改</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      },
      //退出登录函数
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  .el-dropdown-link img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: auto;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

...
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 添加导航守卫
router.beforeEach((to, from, next) => {
  // 如果用户访问登录页，直接放行
  if(to.path == '/login') {
    return next()
  }
  // 从sessionStorage获取token值
  const token = window.sessionStorage.getItem('token');
  // 如果没有获取到token值，跳转到登录页
  if (!token) {
    return next('/login')
  }
  // 正常跳转
  next()
});

export default router

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
             <!--  <el-menu-item v-if="!menu.children" :index="menu.path">-->
             <!--    <el-icon><component :is="menu.icon" /></el-icon>-->
             <!--    <span>{{menu.name}}</span>-->
             <!--  </el-menu-item>-->
              <!-- 单独处理仪表盘的菜单-->
              <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
                <el-icon><component :is="menu.children[0].icon" /></el-icon>
                <span>{{menu.children[0].name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else-if="menu.children" :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
              <span>{{username}}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>密码修改</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false,
        username: window.sessionStorage.getItem('username')
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      },
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  //头像和用户名显示并排操作，需要username跟头像在两个不同的元素中才行
  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
  //缩小头像比例
  .el-dropdown-link img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: auto;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
             <!--  <el-menu-item v-if="!menu.children" :index="menu.path">-->
             <!--    <el-icon><component :is="menu.icon" /></el-icon>-->
             <!--    <span>{{menu.name}}</span>-->
             <!--  </el-menu-item>-->
              <!-- 单独处理仪表盘的菜单-->
              <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
                <el-icon><component :is="menu.children[0].icon" /></el-icon>
                <span>{{menu.children[0].name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else-if="menu.children" :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
              <span>{{username}}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="dialogVisible=true">密码修改</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <!--  修改密码对话框 dialogVisible 在修改密码按钮处有click事件调起-->
  <el-dialog
    v-model="dialogVisible"
    title="修改密码"
    width="30%"
  >
    <el-form :model="UserPasswordForm" label-position="right" label-width="100px" :rules="rules" ref="UserPasswordForm">
      <el-form-item label="原密码：" prop="old_password">
        <el-input
          v-model="UserPasswordForm.old_password"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="new_password">
        <el-input
            v-model="UserPasswordForm.new_password"
            type="password"
            show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="再次确认：" prop="confirm_password">
        <el-input
            v-model="UserPasswordForm.confirm_password"
            type="password"
            show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changePasswordSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script>
  export default {
    name: 'Layout',
    data() {
      // 新旧密码校验规则
      const checkNewOldPassword = (rule, value, callback) => {
        if (value == this.UserPasswordForm.old_password) {
            callback(new Error('新密码不能与旧密码一样！'))
        } else {
           return callback()
        }
      };
      const checkNewPassword = (rule, value, callback) => {
        if (value != this.UserPasswordForm.new_password) {
            callback(new Error('两次输入密码不一致！'))
        } else {
          return callback()
        }
      };
      return {
        isCollapse: false,
        username: window.sessionStorage.getItem('username'),
        dialogVisible: false,
        UserPasswordForm: {
          old_password: '',
          new_password: '',
          confirm_password: ''
        },
        rules: {
          old_password: [
              {required: true, message: '请输入原密码', trigger: 'blur'},
              {min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur'}
          ],
          new_password: [
              {required: true, message: '请输入新密码', trigger: 'blur'},
              {min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur'},
              {validator: checkNewOldPassword, trigger: 'blur'}
          ],
          confirm_password: [
              {required: true, message: '请确认新密码', trigger: 'blur'},
              {min: 6, message: '用户名长度应不小于6个字符', trigger: 'blur'},
              {validator: checkNewPassword, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      },
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      changePasswordSubmit() {
        // 提交前预验证
        this.$refs.UserPasswordForm.validate((valid) => {
        // 回调函数中valid布尔值
        console.log(this.UserPasswordForm)
        if (valid) {
            //获取用户名
            const username = window.sessionStorage.getItem('username')
            this.UserPasswordForm['username'] = username
            this.$http.post('/change_password/', this.UserPasswordForm)
            .then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg);
                    this.dialogVisible = false
                }
            })
          }
        })
      }
    }
  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
  .el-dropdown-link img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: auto;
    margin-right: 10px;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>