系统框架重新搭建

ColorWhiteDeveloper

2022-09-19 17792a8900da5a2dbdc32c1dd865a92c027a1ca6

系统框架重新搭建

 src/main.js

@@ -12,8 +12,17 @@
import './assets/icons' 
// å¼•å…¥å…¨å±€æ ·å¼
import '@/styles/index.scss' 
import axios from "axios"
Vue.prototype.$axios=axios
import api from "axios"
api.interceptors.request.use((config)=>{
  console.log(config);
  const token = localStorage.getItem('token');
  const tokenHead = localStorage.getItem('tokenHead');
    if(token){
      config.headers.Authorization = tokenHead+token;
    }
  return config;
})
Vue.prototype.$axios=api
console.log(process.env.VUE_APP_BASE_API);
Vue.use(ElementUI)
new Vue({

 src/router/index.js

@@ -3,20 +3,62 @@
Vue.use(VueRouter)
const routes = [
  {
    path:"/",
    name:'index',
    redirect:'/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/layout'),
    children: [
      {
        path: 'system',
        name: 'system',
        component: () => import('@/views/systemSetting'),
        children: [
          {
            path: "createUser",
            name: "createUser",
            component: () => import('@/views/systemSetting/baseSetting/user/createUser')
          },
          {
            path: 'userList',
            name: 'userList',
            component: () => import('@/views/systemSetting/baseSetting/user/userList')
          }
        ]
      },
      {
        path: "operate",
        name: 'operate',
        component: () => import('@/views/operate/index.vue')
      },
      {
        path: "video",
        name: 'video',
        component: () => import('@/views/video')
      },
      {
        path:"createUser",
        name:"createUser",
        component:()=> import('@/views/systemSetting/baseSetting/user/createUser')
      }
        path: "lampblack",
        name: 'lampblack',
        component: () => import('@/views/lampblack')
      },
      {
        path: "law",
        name: 'law',
        component: () => import('@/views/law')
      },
      {
        path: "intellect",
        name: 'intellect',
        component: () => import('@/views/intellect')
      },
      {
        path: "info",
        name: 'info',
        component: () => import('@/views/info')
      },
    ]
  },
  {
@@ -34,7 +76,7 @@
    name: "404",
    component: () => import('@/views/NotFound'),
  },
  { path: '*', redirect: '/404' }
  // { path: '*', redirect: '/404' }
]

const router = new VueRouter({
@@ -42,5 +84,8 @@
  base: process.env.BASE_URL,
  routes
})

const originalPush = router.push
router.push = function push(location) {
    return originalPush.call(this, location).catch(err => err);
}
export default router

 src/utils/request.js

@@ -1,10 +1,16 @@
import axios from 'axios';
const service = axios.create({
    baseURL: 'http://42.193.1.25:8082/', // è¯·æ±‚的公共地址部分
})
// æ‹¦æˆªå™¨
// è¯·æ±‚
axios.interceptors.request.use(
service.interceptors.request.use(
  // è¯·æ±‚之前的回调函数
  function (config) {
    config['baseURL'] = '/api';
    const token = localStorage.getItem('token');
    if(token){
      config.headers.authentication = token;
    }
    return config;
  },
  function (error) {
@@ -13,7 +19,7 @@
  }
);
// å“åº”
axios.interceptors.response.use(
service.interceptors.response.use(
  function (response) {
    return response.data;
  },
@@ -21,3 +27,4 @@
    return Promise.reject(error);
  }
);  
export default service;

 src/views/info/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/intellect/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/intellect/Êý¾Ýͳ¼Æ

 src/views/intellect/Ç÷ÊÆ·ÖÎö

 src/views/intellect/ÔËÐб¨¸æ

 src/views/intellect/Î¥¹æ¼ìË÷

 src/views/intellect/Ô¤¾¯ÑÐÅÐ

 src/views/lampblack/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/law/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/layout/components/AsideBar/index.vue

New file
@@ -0,0 +1,143 @@
<template>
  <div class="AsideBar">
    <!-- äºŒçº§ä¾§è¾¹æ  -->
    <el-aside width="200px" class="aside">
      <el-scrollbar>
        <el-menu class="el-menu-vertical" :default-active="$route.path">
          <div v-for="item in asideList" :key="item.name">
            <span class="AsideBarTitle">{{item.name}}</span>
            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.index" class="firstMenu"
              @click="Jump(child.index)">
              <span class="firstSpan">{{child.name}}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      menu: [
        {
          name: '/home/system', children: [
            {
              name: "基础设置", index: '/home/system/base', children: [
                {
                  name: '用户管理', index: '/home/system/userList',
                },
                {
                  name: '新增用户', index: '/home/system/createUser'
                }
              ]
            },
            { name: "平台设置", index: "/home/system/plateform", children: [] },
          ],
        }
      ],
      asideList: null,
    }
  },
  created() {
    this.getAsideList(this.$route.path);
  },
  watch: {
    $route(to, from) {
      this.getAsideList(to.fullPath);
    }
  },
  methods: {
    getAsideList(path) {
      let { menu } = this;
      const that = this;
      this.asideList = null;
      menu.forEach(item => {
        if (path.indexOf(item.name) !== -1) {
          console.log(item.children);
          that.asideList = item.children;
        }
      })
      console.log(this.asideList);
    },
    Jump(path) {
      this.$router.push(path);
    }
  }
};
</script>
  
<style lang="scss" scpoed>
.icon-padding {
  padding-right: 10px;
}

.aside {
  background: #eaedf1;
  color: black;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  //    å›ºå®šæ ‡é¢˜
  .siderbar-title {
    position: fixed;
    text-align: center;
    margin: 0;
    font-size: 26px;
    width: 200px;
    line-height: 66px;
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 -5px 5px #0ff inset;
  }

  .el-scrollbar {
    height: calc(100vh - 66px);
    box-sizing: border-box;

    .el-menu {
      border: 0;
      .AsideBarTitle {
        display: block;
        line-height: 60px;
        color: #999;
        font-weight: 650;
        background-color: #f2f2f2;
        border-bottom: 1px solid #e4e4e4;
      }

      .firstMenu {
        background: #eaedf1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background-color: #eaedf1;
        color: #666666;
        border-bottom: 1px solid #e4e4e4;

        &:hover .firstSpan {
          color: #1a87fe;
        }

        .el-menu-item {
          &:hover {
            color: #22d3eb;
          }
        }
      }

      .is-active {
        background-color: #fff;
        color: #1a87fe;
      }
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>

 src/views/layout/components/Footer/index.vue

New file
@@ -0,0 +1,28 @@
<template>
    <el-footer class="footer">
      <div>Copyright&copy;杭州超马科技有限公司</div>
      <div>遂昌县执法局</div>
    </el-footer>
</template>
<script>
export default {
    
}
</script>
<style lang="scss">
  .el-footer{
    padding: 0;
    margin-top: 60px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#f0f2f5;
    div{
      line-height: 24px;
      font-size: 12px;
      color: #cccfd8;
    }
  }
</style>

 src/views/layout/components/Header/index.vue

@@ -2,83 +2,179 @@
  <div>
    <!-- å¤´éƒ¨ -->
    <el-header>
      <!-- å·¦ä¾§èœå• -->
      <div class="menuLeft">
        <div class="icon">
          <img style="width:30px;height:30px"
            src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__155eeb2ceaac89ec717869a050964a36.svg"
            alt="">
        </div>
        <div class="systemName">遂昌智慧执法平台</div>
        <ul class="headerNav">
          <li v-for="(item,index) in nav" :key="item.name" :class="item.checked?'activeIndex':''" @click="handleChange(index)">{{item.name}}</li>
        </ul>
      </div>
      <!-- å³ä¾§èœå• -->
      <div class="header-title">
        <div class="bell">
          <el-icon class="el-icon-bell" style="color: white"></el-icon>
      <div class="menuRight">
        <div class="search">
          <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="search">
          </el-input>
        </div>
        <div class="userinfo">
          <div class="avatar"></div>
          <span class="username">admin</span>
        <div class="userinfo userItem">
          <div class="userIcon"></div>
          <span class="username">admin<i class="el-icon-arrow-down" style="margin-left:3px"></i></span>
        </div>
        <div class="loginout" @click="loginout">退出登录</div>
        <div class="userMessage userBtn"><i class="el-icon-message-solid"></i></div>
        <div class="userSetting userBtn"><i class="el-icon-s-tools"></i></div>
        <div class="userLoginout userBtn" @click="loginout"><i class="el-icon-switch-button"></i></div>
      </div>
    </el-header>
    <!-- <NavBar /> -->
  </div>
</template>

<script>
import hamburger from "@/components/hamburger";
// import NavBar from "../NavBar";
export default {
  data() {
    return {
      opened: false,
      search:'',
      nav:[
        {
          name:'驾驶舱',
          checked:true,
        },
        {
          name:'视频查询',
          checked:false,
        },
        {
          name:'执法管理',
          checked:false,
        }
      ]
    };
  },
  components: {
    hamburger,
    // NavBar,
  },
  methods:{
    loginout(){
      this.$router.push({path:"/login"})
    },
    handleChange(idx){
      // è®¾ç½®nav激活
      this.nav.forEach((item,index)=>{
        index==idx?item.checked = true:item.checked = false;
      })
      localStorage.setItem('navIdx',idx);
    }
  },
  mounted() {
    const idx = localStorage.getItem("navIdx");
    if(idx){
      this.handleChange(idx);
  }
  },
};
</script>

<style lang="scss" >
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: #071a38;
  background-color: rgb(0, 121, 254);
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-content: space-between;
  padding: 0;
  .header-title {
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 9999;
  .menuLeft {
    color: #fff;

    .icon {
      margin: 0 20px;
    }

    .systemName {
      width: 185px;
      font-weight: 650;
      font-size: 18px;
    }

    ul,
    .icon {
    display: flex;
    align-items: center;
    width: 280px;
    }

    li {
      list-style: none;
      width: 100px;
      &:hover{
        cursor: pointer;
      }
    }

    .activeIndex {
      height: 30px;
      line-height: 30px;
      border-radius: 20px;
      background-color: #53a5ff;
    }

    display: flex;
  }

  .menuRight {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .bell {
      background-color: #00d1fa;
      width: 25px;
      height: 25px;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
    .search{
      .el-input{
        width: 200px;
        margin: 0 10px;
      }
      .el-input__inner{
        height: 30px;
      }
    }
    .userItem{
      width: 120px;
    }
    .userBtn{
      width: 60px;
      color: #fff;
      font-size: 20px;
    }
    .userinfo {
      width: 100xp;
      display: flex;
      align-items: center;
      .avatar {
        width: 25px;
        height: 25px;
      justify-content: center;
      .userIcon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: url("@/assets/imgs/user/default-avatar.jpg");
        background-size: cover;
      }

      .username {
        margin: 0 5px;
        color: #22d3eb;
        font-size: 14px;
      }
    }

    .loginout {
      color: #22d3eb;
      font-size: 14px;

 src/views/layout/components/Main/index.vue

@@ -1,15 +1,32 @@
<template>
  <el-main>
    <NavBar />
    <div class="content">
    <router-view></router-view>
      <!-- åº•éƒ¨åŒºåŸŸ -->
      <MyFooter/>
    </div>
  </el-main>
</template>

<script>
// import NavBar from "../NavBar"
import MyFooter from "../Footer"
import NavBar from "../NavBar"
export default {
  name: "Main",
  components:{
    // NavBar
    MyFooter,
    NavBar
  }
};
</script>
<style lang="scss">
.el-main {
  min-width: 1024px;
  padding: 0;
  .content {
    background-color: #f0f2f5;
    padding: 20px 40px;
  }
}
</style>

 src/views/layout/components/Menu/index.vue

New file
@@ -0,0 +1,127 @@
<template>
  <div class="Menu">
    <!-- èœå•æ  -->
    <el-aside width="160px" class="menu">
      <el-scrollbar class="MenuScroll">
        <!-- è·¯ç”± -->
        <el-menu class="el-menu-vertical">
          <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
            <template slot="title" class="firstSpan">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon :icon-class="item.icon"></svg-icon>
              </span>
              <span class="fisrtSpan">{{item.name}}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: "系统设置", icon: "system", index: "/home/system", 
        },
        {
          name: "运营管理", icon: "operate", index: "/home/operate",
        },
        {
          name: "视频巡查", icon: "video", index: "/home/video",
        },
        {
          name: "油烟信息查询", icon: "intelligence", index: "/home/lampblack",
        },
        {
          name: "执法管理", icon: "intelligence", index: "/home/law",
        },
        {
          name: "智能巡查", icon: "intelligence", index: "/home/intellect",
        },
        {
          name: "平台基本信息", icon: "intelligence", index: "/home/info",
        }
      ],
    }
  },
  methods:{
    Jump(url){
      this.$router.push(url);
    }
  }
};
</script>

<style lang="scss" scpoed>
$bk:#333744;
.icon-padding {
  padding-right: 10px;
}
.menu {
  background: $bk;
  color: #e9eef3;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  //    å›ºå®šæ ‡é¢˜
  .siderbar-title {
    position: fixed;
    text-align: center;
    margin: 0;
    font-size: 26px;
    width: 200px;
    line-height: 66px;
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 -5px 5px #0ff inset;
  }

  .MenuScroll {
    height: calc(100vh - 66px);
    box-sizing: border-box;
    .el-menu {
      background: linear-gradient(#07162e, #0f2b56);
      border: 0;

      .firstMenu {
        background: $bk;
        text-align: left;
        &:hover .fisrtSpan {
          color: #fff;
        }

        span {
          color: #e9eef3;
        }

        .el-menu-item {
          color: #c3c3c4;
          background-color: #333744;

          &:hover {
            color: #fff;
          }
        }

        .is-active {
          background-color: #07162e;
          color: #22d3eb;
        }
      }

      .is-active {
        background-color: #092c4a;
      }
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>

 src/views/layout/components/NavBar/index.vue

@@ -1,76 +1,56 @@
<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
    <div class="NavBar">
        <div class="NavTitle">页面导航</div>
        <div class="NavRefresh">
            <el-button icon="el-icon-refresh" @click="Refresh">刷新</el-button>
        </div>
    </div>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: null

    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
        Refresh(){
            window.location.href = "";
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
    .NavBar{
        display: flex;
        color: #999999;
        justify-content: space-between;
        line-height: 60px;
        width: 100%;
        padding: 0 40px;
        background-color: #fff;
        .NavTitle{
            display: flex;
            align-items: center;
            font-weight: 650;
            font-size: 18px;
            &::before{
                content: "";
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  margin-left: 8px;
  .no-redirect {
    color: #97a8be;
    cursor: text;
                width: 5px;
                height: 20px;
                margin-right: 5px;
                background-color: #0079fe;
            }
        }
        .NavRefresh{
            width: 70px;
            height: 30px;
            .el-button{
                padding: 0;
                width: 100%;
                height: 100%;
            }
  }
}
</style>

 src/views/layout/components/SiderBar/index.vue

File was deleted

 src/views/layout/index.vue

@@ -1,29 +1,31 @@
<template>
  <el-container id="body-wrapper">
    <!-- ä¾§è¾¹å¯¼èˆªæ  -->
    <SiderBar/>
    <el-container>
      <!-- å¤´éƒ¨ -->
      <Header/>
    <el-container class="my-el-content">
      <!-- ä¾§è¾¹å¯¼èˆªæ  -->
      <Menu />
      <AsideBar />
      <el-container class="my-el-container">
      <!-- å†…容区域 -->
      <Main/>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import Main from "./components/Main";
import NavBar from "./components/NavBar";
import SiderBar from "./components/SiderBar";
import Menu from "./components/Menu";
import Header from "./components/Header";

import AsideBar from "./components/AsideBar"
export default {
  name: "layout",
  components: {
    NavBar,
    SiderBar,
    Menu,
    Main,
    Header
    Header,
    AsideBar
  },
};
</script>
@@ -32,11 +34,17 @@
#body-wrapper{
  width: 100vw;
  height: 100vh;
}

.my-el-content {
  margin-top: 60px;
}

.my-el-container {
  display: flex;
  .el-container{
    flex-direction: column;
  }
}

.el-main {
  background-color: #f0f2f5;
  color: #333;

 src/views/login/index.vue

@@ -113,6 +113,11 @@
        })
        .then(function (response) {
          if (response.data.code === 200) {
            // ä¿å­˜token
            console.log(response);
            localStorage.setItem('token',response.data.data.token);
            // ä¿å­˜token
            localStorage.setItem('tokenHead',response.data.data.tokenHead)
            // è·³è½¬åˆ°é¦–页
            that.$router.push("/home");
          }else{
@@ -122,7 +127,7 @@
              }
            })
          }
          console.log(response);
          // console.log(response);
        })
        .catch(function (error) {
          console.log(error);

 src/views/operate/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/operate/ͼƬ¹ÜÀí

 src/views/operate/ÉóºË¹ÜÀí

 src/views/operate/µêÆ̹ÜÀí

 src/views/operate/Ö´·¨¹ÜÀí

 src/views/operate/ÈÕÖ¾¹ÜÀí

 src/views/operate/ÏûÏ¢¹ÜÀí

 src/views/operate/¶ÌÐŹÜÀí

 src/views/operate/Ë㷨ģÐ͹ÜÀí

 src/views/operate/ÊÓƵ¹ÜÀí

 src/views/operate/µ÷¶È¹ÜÀí

 src/views/operate/³µÁ¾¹ÜÀí

 src/views/systemSetting/baseSetting/user/createUser/index.vue

@@ -10,96 +10,99 @@
        <main>
            <div class="mainTitle">基础信息</div>
            <div class="mainContent">
                <el-form ref="form" :model="user">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- ç”¨æˆ·åç§° -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户名称:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    <el-form-item class="optionItem" label="用户名称:" prop="nick_name">
                        <el-input v-model="user.nick_name" placeholder="填写用户名称"></el-input>
                    </el-form-item>
                    <!-- ç”¨æˆ·å¯†ç  -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户密码:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    <el-form-item class="optionItems" label="用户密码:" prop="password">
                        <el-input v-model="user.password" type="password" placeholder="请输入用户密码"></el-input>
                    </el-form-item>
                    <!-- æ‰€å±žç”¨æˆ·å§“名 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属用户姓名:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    <el-form-item class="optionItem" label="所属用户姓名:" prop="true_name">
                        <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input>
                    </el-form-item>
                    <!-- æ€§åˆ« -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>性别:</label></div>
                    <el-form-item class="optionItem" label="性别:" prop="gender">
                        <el-radio-group v-model="user.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- æ˜¯å¦å…šå‘˜ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>是否党员:</label></div>
                    <el-form-item class="optionItem" label="是否党员:" prop="member">
                        <el-radio-group v-model="user.member">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- æ‰€å±žæ‰‹æœºå·ç  -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属手机号码:</label></div>
                        <el-input v-model="user.phone"></el-input>
                    <el-form-item class="optionItem" label="所属手机号码:" prop="phone">
                        <el-input v-model="user.phone" placeholder="请填写手机号码"></el-input>
                    </el-form-item>
                    <!-- é‚®ç®±åœ°å€ -->
                    <el-form-item class="optionItem">
                        <div><label>邮箱地址:</label></div>
                        <el-input v-model="user.mail"></el-input>
                    <el-form-item class="optionItem" label="邮箱地址:" prop="mail">
                        <el-input v-model="user.mail" placeholder="请填写邮箱地址"></el-input>
                    </el-form-item>
                    <!-- é€‰æ‹©è§’色 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>选择角色:</label></div>
                        <el-select v-model="user.role">
                    <el-form-item class="optionItem" label="选择角色:" prop="role">
                        <el-select v-model="user.role" placeholder="请选择所属角色">
                            <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- ç”¨æˆ·ç±»åž‹ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户类型:</label></div>
                        <el-select v-model="user.type">
                    <el-form-item class="optionItem" label="用户类型:" prop="type">
                        <el-select v-model="user.type" placeholder="请选择用户类型">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- åº§æœº/分机 -->
                    <el-form-item class="optionItem">
                        <div><label>座机/分机:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    <el-form-item class="optionItem" label="座机/分机:" prop="telPhone">
                        <div class="optionHandleSp">
                            <el-input class="areaNumber" v-model="user.telPhone.areaNumber" placeholder="电话区号">
                            </el-input>
                            <el-input class="telNumber" v-model="user.telPhone.phoneNumber" placeholder="电话号码">
                            </el-input>
                            <el-input class="moreNumber" v-model="user.telPhone.moreNumber" placeholder="分机号码">
                            </el-input>
                        </div>
                    </el-form-item>
                    <!-- æ‰€å±žéƒ¨é—¨ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属部门:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    <el-form-item class="optionItem" label="所属部门:" prop="department">
                        <el-select v-model="user.department" placeholder="请选择所属部门">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- å½“前职务 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>当前职务:</label></div>
                        <!-- <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                    <el-form-item class="optionItem" label="当前职务:" prop="work">
                        <el-select v-model="user.work" placeholder="请选择当前职务">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select> -->
                        </el-select>
                    </el-form-item>
                    <!-- å¡«å†™æ‰€å±žmac地址 -->
                    <el-form-item class="optionItem">
                        <div><label>填写所属mac地址:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac">
                        <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input>
                    </el-form-item>
                    <!-- å¡«å†™æ‰€å±žip地址 -->
                    <el-form-item class="optionItem">
                        <div><label>填写所属ip地址:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip">
                        <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input>
                    </el-form-item>
                    <el-form-item class="optionBtn">
                        <el-button type="primary" class="btn submit" @click="handleUser">提交</el-button>
                        <el-button class="btn reset">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </main>
    </div>
@@ -107,24 +110,172 @@
<script>
export default {
    data() {
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户名称"));
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                const rep = /^\w+$/;
                if(!rep.test(value)){
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }
            }
        };
        const validateTruename = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户姓名"));
            } else {
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if(!rep.test(value)){
                    callback("请输入正确的用户姓名");
                }
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写手机号码"));
            } else {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if(!rep.test(value)){
                    callback("请输入正确的手机号码");
                }
            }
        };
        const validateMail = (rule, value, callback) => {
            if (value) {
                const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if(!rep.test(value)){
                    callback(new Error("请输入正确的邮箱"))
                }
            }
        };
        const validateRole = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateType = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateDepartment = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateWork = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateMac = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateIp = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        return {
            user: {
                nick_name: '',
                password: '',
                true_name: '',
                gender: 1,
                member: 0,
                member: 1,
                phone: '',
                mail: '',
                role: 0,
                type: 0,
                role: null,
                type: null,
                telPhone: {
                    areaNumber: '',
                    phoneNumber: "",
                    moreNumber: "",
                },
                department: null,
                work: null,
                mac: '',
                ip: '',
            },
            createUserRules: {
                nick_name: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                password: [
                    { required: true, trigger: "blur", validator: validatePass },
                ],
                true_name: [
                    { required: true, trigger: "blur", validator: validateTruename },
                ],
                gender: [
                    { required: true, trigger: "blur" },
                ],
                member: [
                    { required: true, trigger: "blur" },
                ],
                phone: [
                    { required: true, trigger: "blur", validator: validatePhone },
                ],
                mail: [
                    { required: false, trigger: "blur", validator: validateMail },
                ],
                role: [
                    { required: true, trigger: "blur", validator: validateRole },
                ],
                type: [
                    { required: true, trigger: "blur", validator: validateType },
                ],
                telPhone: [
                    { required: false, trigger: "blur" },
                ],
                department: [
                    { required: true, trigger: "blur", validator: validateDepartment },
                ],
                work: [
                    { required: true, trigger: "blur", validator: validateWork },
                ],
                mac: [
                    { required: false, trigger: "blur", validator: validateMac },
                ],
                ip: [
                    { required: false, trigger: "blur", validator: validateIp },
                ],
            },
            roleList: [
                { name: '请选择所属角色', value: 0, disabled: true }, { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
                { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
            ],
            typeList: [
                { name: '请选择用户类型', value: 0, disabled: true }, { name: '类型1', value: 1 }, { name: '类型2', value: 2 }
                { name: '类型1', value: 1 }, { name: '类型2', value: 2 }
            ]
        }
    },
    created() { 
        this.$axios.get("http://42.193.1.25:8082/sccg/role/listAll").then(res=>{
            console.log(res);
        });
    },
    methods: {
        handleUser() {
            console.log(this.user);
        }
    },
}
@@ -132,8 +283,11 @@
<style lang="scss" scpoed>
.createUser {
    border-radius: 1px;
    header {
    // min-width: 1024px;
    // min-height: 1450px;
        background-color: #fff;

    header {
        display: flex;
        justify-content: space-between;
        height: 60px;
@@ -143,33 +297,56 @@
            font-weight: 600;
            color: #666;
        }

        .headerTip span {
            color: #ff3b6c;
        }

        .headerTip label {
            color: #999999;
        }
    }

    main {
        background-color: #fff;
        margin-top: 1px;
        border-top: 1px solid #f0f2f5;
        text-align: left;
        padding: 0 55px;
        .mainTitle {
            margin-left: 60px;
            // margin-left: 60px;
            color: #666;
            font-weight: 600;
            line-height: 100px;
            font-size: 14px;
        }

        .mainContent {
            padding: 0px 100px;
            .el-form-item__content {
                display: flex;
                justify-content: center;
                div{
                    width: 160px;
                    text-align: right;
            .el-form-item__content {
                width: 400px;

                .el-select {
                    width: 100%;
                }
            }
            .optionHandleSp{
                display: flex;
                .areaNumber,.moreNumber{
                    flex: 1;
                }
                .telNumber{
                    flex: 2;
                }
            }
            .optionBtn{
                display: flex;
                justify-content: center;
                margin-top: 80px;
                .btn{
                    padding: 12px 50px;
                }
            }

        }
    }
}

 src/views/systemSetting/baseSetting/user/userList/index.vue

New file
@@ -0,0 +1,124 @@
<template>
    <div class="userList">
        <header>
            <div class="headerTitle">数据筛选</div>
            <div class="headerContent">
                <div class="search">
                    <span>筛选条件:</span>
                    <el-input placeholder="请输入内容"></el-input>
                </div>
                <div class="addUser">
                    <el-button type="primary">添加用户</el-button>
                </div>
            </div>
        </header>
        <main>
            <div class="mainTitle">数据列表</div>
            <div class="mainContent">
                <el-table border ref="multipleTable"
                    :header-cell-style="{background:'#f5f5f5','font-size':'12px',color:'#666666','font-weight':'650','line-height':'45px'}"
                    :data="tableData" tooltip-effect="dark" style="width: 100%">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="用户ID" width="67">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="用户名称" width="82">
                    </el-table-column>
                    <el-table-column prop="true_name" label="所属姓名" width="76">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式" width="81">
                    </el-table-column>
                    <el-table-column prop="role" label="所属角色" width="87">
                    </el-table-column>
                    <el-table-column prop="department" label="所属部门" width="80">
                    </el-table-column>
                    <el-table-column prop="work" label="所属职务" width="83">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="128">
                    </el-table-column>
                    <el-table-column prop="is_open" label="启用" width="90">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" width="246">
                        <template slot-scope="scope">
                            <el-button size="mini">编辑</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                {
                    createTime: '2016-05-02',
                    name: 'admin',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    role: '超级管理员',
                    is_open: true,
                }
            ]
        }
    },
}
</script>
<style lang="scss" scoped>
.userList {
    text-align: left;
    margin: 10px 20px;

    header {
        background-color: #fff;

        .headerTitle {
            font-weight: 600;
            padding: 0 20px;
            color: #666;
            line-height: 50px;
            border-bottom: 1px solid #f0f2f5;
        }

        .headerContent {
            padding: 0 40px;
            display: flex;
            line-height: 100px;
            justify-content: space-between;

            .search {
                display: flex;
                justify-content: flex-start;

                span {
                    flex: 1;
                }

                .el-input {
                    flex: 2;
                }
            }
        }
    }

    main {
        background-color: #fff;
        margin-top: 20px;
        padding: 0 10px;

        .mainTitle {
            line-height: 60px;
        }
        .el-table{
            font-size: 10px;
        }
    }
}
</style>

 src/views/systemSetting/index.vue

New file
@@ -0,0 +1,3 @@
<template>
    <router-view></router-view>
</template>

 src/views/video/index.vue

@@ -8,8 +8,5 @@
}
</script>

<style>
div{
    color: white;
}
<style lang="scss" scoped>
</style>