From 0cf2375b6de4c9b65a10aa1c9d4cef9bb5936fe1 Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期一, 19 九月 2022 18:02:40 +0800
Subject: [PATCH] 页面重构

---
 src/views/systemSetting/baseSetting/department/updateUser/index.vue |  363 ++++++
 src/views/systemSetting/baseSetting/authority/updateUser/index.vue  |  363 ++++++
 src/views/systemSetting/baseSetting/authority/index.vue             |  199 ++
 src/views/systemSetting/baseSetting/role/createUser/index.vue       |  375 ++++++
 src/views/layout/components/Header/index.vue                        |  164 --
 src/views/systemSetting/baseSetting/role/updateUser/index.vue       |  363 ++++++
 src/views/layout/components/Menu/index.vue                          |  223 ++-
 src/views/systemSetting/baseSetting/authority/createUser/index.vue  |  375 ++++++
 src/views/systemSetting/baseSetting/department/createUser/index.vue |  375 ++++++
 src/views/systemSetting/baseSetting/department/index.vue            |  199 ++
 src/views/layout/components/AsideBar/index.vue                      |  154 ++
 src/views/layout/index.vue                                          |    4 
 src/views/layout/components/Main/index.vue                          |    6 
 src/views/systemSetting/baseSetting/user/index.vue                  |  140 +
 src/views/systemSetting/baseSetting/role/index.vue                  |  206 ++
 15 files changed, 3,152 insertions(+), 357 deletions(-)

diff --git a/src/views/layout/components/AsideBar/index.vue b/src/views/layout/components/AsideBar/index.vue
new file mode 100644
index 0000000..f3e391f
--- /dev/null
+++ b/src/views/layout/components/AsideBar/index.vue
@@ -0,0 +1,154 @@
+<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/user',
+                },
+                {
+                  name:'瑙掕壊绠＄悊', index:'/home/system/role',
+                },
+                {
+                  name:'鏉冮檺绠＄悊',index:'/home/system/authority',
+                },
+                {
+                  name:'閮ㄩ棬绠＄悊',index:'/home/system/department',
+                }
+              ]
+            },
+            { name: "骞冲彴璁剧疆", index: "/home/system/plateform", children: [
+              {
+                name:'闂ㄦ埛璁剧疆',index:'/home/system/portalSetting'
+              },
+              {
+                name:'绗笁鏂规帴鍙ｇ鐞�',index:'/home/system/otherInterface'
+              }
+            ] },
+          ],
+        }
+      ],
+      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) {
+          that.asideList = item.children;
+        }
+      })
+    },
+    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>
\ No newline at end of file
diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue
index c2255db..04cfe32 100644
--- a/src/views/layout/components/Header/index.vue
+++ b/src/views/layout/components/Header/index.vue
@@ -1,182 +1,76 @@
 <template>
-  <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>
+  <!-- 澶撮儴 -->
+  <el-header>
       <!-- 鍙充晶鑿滃崟 -->
-      <div class="menuRight">
-        <div class="search">
-          <el-input placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" suffix-icon="el-icon-search" v-model="search">
-          </el-input>
+      <div class="header-title">
+        <div class="bell">
+          <el-icon class="el-icon-bell" style="color: white"></el-icon>
         </div>
-        <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 class="userinfo">
+          <div class="avatar"></div>
+          <span class="username">admin</span>
         </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 class="loginout" @click="loginout">閫�鍑虹櫥褰�</div>
       </div>
     </el-header>
-  </div>
 </template>
 
 <script>
-import hamburger from "@/components/hamburger";
 export default {
   data() {
     return {
       opened: false,
-      search:'',
-      nav:[
-        {
-          name:'椹鹃┒鑸�',
-          checked:true,
-        },
-        {
-          name:'瑙嗛鏌ヨ',
-          checked:false,
-        },
-        {
-          name:'鎵ф硶绠＄悊',
-          checked:false,
-        }
-      ]
     };
   },
-  components: {
-    hamburger,
-  },
-  methods: {
-    loginout() {
-      // 娓呴櫎token
-      localStorage.clear();
-      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);
+  methods:{
+    loginout(){
+      this.$router.push({path:"/login"})
     }
-  },
-  mounted() {
-    const idx = localStorage.getItem("navIdx");
-    if(idx){
-      this.handleChange(idx);
-    }
-  },
+  }
 };
 </script>
 
-<style lang="scss" scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-
+<style lang="scss" >
 .el-header {
-  background-color: rgb(0, 121, 254);
+  background-color: #071a38;
   color: #333;
   text-align: center;
   line-height: 60px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 0;
-  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;
-    }
-
-    li {
-      list-style: none;
-      width: 100px;
-      &:hover{
-        cursor: pointer;
-      }
-    }
-
-    .activeIndex {
-      height: 30px;
-      line-height: 30px;
-      border-radius: 20px;
-      background-color: #53a5ff;
-    }
-
-    display: flex;
-  }
-
-  .menuRight {
+  .header-title {
     display: flex;
     align-items: center;
+    width: 280px;
     justify-content: space-evenly;
-    .search{
-      .el-input{
-        width: 200px;
-        margin: 0 10px;
-      }
-      .el-input__inner{
-        height: 30px;
-      }
-    }
-    .userItem{
-      width: 120px;
-    }
-    .userBtn{
-      width: 60px;
-      color: #fff;
-      font-size: 20px;
+    .bell {
+      background-color: #00d1fa;
+      width: 25px;
+      height: 25px;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 25px;
     }
     .userinfo {
+      width: 100xp;
       display: flex;
       align-items: center;
-      justify-content: center;
-      .userIcon {
-        width: 20px;
-        height: 20px;
+      .avatar {
+        width: 25px;
+        height: 25px;
         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;
diff --git a/src/views/layout/components/Main/index.vue b/src/views/layout/components/Main/index.vue
index f5301df..43c14f7 100644
--- a/src/views/layout/components/Main/index.vue
+++ b/src/views/layout/components/Main/index.vue
@@ -1,10 +1,10 @@
 <template>
   <el-main>
-    <NavBar />
+    <!-- <NavBar /> -->
     <div class="content">
       <router-view></router-view>
       <!-- 搴曢儴鍖哄煙 -->
-      <MyFooter/>
+      <!-- <MyFooter/> -->
     </div>
   </el-main>
 </template>
@@ -25,7 +25,7 @@
   min-width: 1024px;
   padding: 0;
   .content {
-    background-color: #f0f2f5;
+    background-color: #070f22;
     padding: 11px;
   }
 }
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 8ad84aa..422737c 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -1,19 +1,149 @@
 <template>
-  <div class="Menu">
-    <!-- 鑿滃崟鏍� -->
-    <el-aside width="200px" class="menu">
+  <div>
+    <!-- 渚ц竟瀵艰埅鏍� -->
+    <el-aside width="200px">
       <h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2>
-      <el-scrollbar class="MenuScroll">
+      <el-scrollbar>
         <!-- 璺敱 -->
-        <el-menu class="el-menu-vertical">
-          <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
+        <el-menu router class="el-menu-vertical" :default-active="$route.path" >
+          <!-- 绯荤粺璁剧疆妯″潡 -->
+          <el-submenu index="/home/system" class="firstMenu">
             <template slot="title" class="firstSpan">
-              <span slot="prefix" class="icon-padding fisrtSpan">
-                <svg-icon :icon-class="item.icon"></svg-icon>
+              <!-- <i class="el-icon-reading"></i> -->
+              <span  slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="system"></svg-icon>
               </span>
-              <span class="fisrtSpan">{{item.name}}</span>
+              <span class="fisrtSpan">绯荤粺璁剧疆</span>
             </template>
-          </el-menu-item>
+            <!-- 鍩烘湰璁剧疆 -->
+            <el-submenu index="/home/system/base" class="secondMenu">
+              <template slot="title">
+                <span class="secondSpan">鍩烘湰璁剧疆</span>
+              </template>
+              <!-- 鐢ㄦ埛绠＄悊 -->
+              <el-submenu index="/home/system/base/user" class="thirdMenu">
+                <template slot="title">
+                  <span class="thirdSpan">鐢ㄦ埛绠＄悊</span>
+                </template>
+                <el-menu-item index="/home/system/user">鐢ㄦ埛鍒楄〃</el-menu-item>
+              </el-submenu>
+              <!-- 瑙掕壊绠＄悊 -->
+              <el-submenu index="/home/system/base/role" class="thirdMenu">
+                <template slot="title">
+                  <span class="thirdSpan">瑙掕壊绠＄悊</span>
+                </template>
+                <el-menu-item index="/home/system/role">瑙掕壊绠＄悊鍒楄〃</el-menu-item>
+              </el-submenu>
+              <!-- 鏉冮檺绠＄悊 -->
+              <el-submenu index="/home/system/base/authority" class="thirdMenu">
+                <template slot="title">
+                  <span class="thirdSpan">鏉冮檺绠＄悊</span>
+                </template>
+                <el-menu-item index="/home/system/authority">璁剧疆鏉冮檺</el-menu-item>
+              </el-submenu>
+              <!-- 閮ㄩ棬绠＄悊 -->
+              <el-submenu index="/home/system/base/department" class="thirdMenu">
+                <template slot="title">
+                  <span class="thirdSpan">閮ㄩ棬绠＄悊</span>
+                </template>
+                <el-menu-item index="/home/system/department">閮ㄩ棬绠＄悊</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+            <!-- 骞冲彴璁剧疆 -->
+            <el-submenu index="/home/article/add" class="secondMenu">
+              <template slot="title">
+                <span class="secondSpan">骞冲彴璁剧疆</span>
+              </template>
+              <el-menu-item index="/home/system/portalSetting">闂ㄦ埛璁剧疆</el-menu-item>
+              <el-menu-item index="/home/system/otherInterface">绗笁鏂规帴鍙ｇ鐞�</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <!-- 杩愯惀绠＄悊妯″潡 -->
+          <el-submenu index="/home/operate" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="operate"></svg-icon>
+              </span>
+              <span class="fisrtSpan">杩愯惀绠＄悊</span>
+            </template>
+            <el-menu-item index="/home/article/add">鎵ф硶绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">璋冨害绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">搴楅摵绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">杞﹁締绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">鍥剧墖绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">瑙嗛绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">娑堟伅绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">瀹℃牳绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article/add">鐭俊绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article">绠楁硶妯″瀷绠＄悊</el-menu-item>
+            <el-menu-item index="/home/article">鏃ュ織绠＄悊</el-menu-item>
+          </el-submenu>
+          <!-- 瑙嗛宸℃煡妯″潡 -->
+          <el-submenu index="/home/video" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="video"></svg-icon>
+              </span>
+              <span slot="title" class="fisrtSpan">瑙嗛宸℃煡</span>
+            </template>
+            <el-menu-item index="/home/video">瑙嗛宸℃煡</el-menu-item>
+          </el-submenu>
+          <!-- 娌圭儫淇℃伅鏌ヨ妯″潡 -->
+          <el-submenu index="/home/lampblack" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="intelligence"></svg-icon>
+              </span>
+              <span class="fisrtSpan">娌圭儫淇℃伅鏌ヨ</span>
+            </template>
+            <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+            <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+            <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+            <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+            <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+          </el-submenu>
+          <!-- 鎵ф硶绠＄悊妯″潡 -->
+          <el-submenu index="/home/law" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="intelligence"></svg-icon>
+              </span>
+              <span class="fisrtSpan">鎵ф硶绠＄悊</span>
+            </template>
+            <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+            <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+            <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+            <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+            <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+          </el-submenu>
+          <!-- 鏅鸿兘宸℃煡妯″潡 -->
+          <el-submenu index="/home/intellect" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="intelligence"></svg-icon>
+              </span>
+              <span class="fisrtSpan">鏅鸿兘宸℃煡</span>
+            </template>
+            <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+            <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+            <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+            <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+            <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+          </el-submenu>
+          <!-- 骞冲彴鍩烘湰淇℃伅 -->
+          <el-submenu index="/home/info" class="firstMenu">
+            <template slot="title">
+              <span slot="prefix" class="icon-padding fisrtSpan">
+                <svg-icon icon-class="intelligence"></svg-icon>
+              </span>
+              <span class="fisrtSpan">骞冲彴鍩烘湰淇℃伅</span>
+            </template>
+            <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+            <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+            <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+            <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+            <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+          </el-submenu>
         </el-menu>
       </el-scrollbar>
     </el-aside>
@@ -22,38 +152,7 @@
 
 <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>
 
@@ -61,7 +160,7 @@
 .icon-padding {
   padding-right: 10px;
 }
-.menu {
+.el-aside {
   background: #07162e;
   color: #e9eef3;
   text-align: center;
@@ -78,48 +177,50 @@
     top: 0;
     left: 0;
     z-index: 999;
-    background-color: #08162f;
+    // box-shadow: 0 -5px 5px #0ff inset;
   }
-
-  .MenuScroll {
+  .el-scrollbar {
     height: calc(100vh - 66px);
-    box-sizing: border-box;
     margin-top: 66px;
+    box-sizing: border-box;
     .el-menu {
       background: linear-gradient(#07162e, #0f2b56);
       border: 0;
-
       .firstMenu {
-        background:  #07162e;
+        background: #07162e;
         text-align: left;
-        &:hover .fisrtSpan {
-          color: #fff;
+        &:hover .fisrtSpan{
+          color: #22d3eb;
         }
-
-        span {
+        span,span {
           color: #e9eef3;
         }
-
         .el-menu-item {
-          color: #c3c3c4;
+          color: #e9eef3;
           background-color: #07162e;
           &:hover {
-            color: #fff;
-            background-color: #0c2c4c;
+            color: #22d3eb;
           }
         }
-
         .is-active {
           background-color: #07162e;
           color: #22d3eb;
         }
       }
-
+      .secondMenu{
+        &:hover .secondSpan{
+          color: #22d3eb;
+        }
+      }
+      .thirdMenu{
+        &:hover .thirdSpan{
+          color: #22d3eb;
+        }
+      }
       .is-active {
-        background-color: #07162e;
+        background-color: #092c4a;
       }
     }
-
     .el-scrollbar__wrap {
       overflow-x: hidden;
     }
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index c9bb95e..112b4ad 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -2,7 +2,7 @@
   <el-container id="body-wrapper">
     <!-- 渚ц竟瀵艰埅鏍� -->
     <Menu />
-    <el-container>
+    <el-container class="content">
       <!-- 澶撮儴 -->
       <Header />
       <!-- 鍐呭鍖哄煙 -->
@@ -35,7 +35,7 @@
   margin-top: 60px;
 }
 
-.my-el-container {
+.content{
   display: flex;
   flex-direction: column;
 }
diff --git a/src/views/systemSetting/baseSetting/authority/createUser/index.vue b/src/views/systemSetting/baseSetting/authority/createUser/index.vue
new file mode 100644
index 0000000..872c556
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/authority/createUser/index.vue
@@ -0,0 +1,375 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="username">
+                        <el-input v-model="user.username" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item>
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <el-radio-group v-model="user.isDy">
+                            <el-radio :label="1">鏄�</el-radio>
+                            <el-radio :label="0">鍚�</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- 鎵�灞炴墜鏈哄彿鐮� -->
+                    <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.mobile" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.email" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <el-select v-model="user.userType" 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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 0,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const {user} = this;
+            console.log(user);
+            this.$axios.post('sccg/admin/register',{
+                departmentId:user.departmentId,
+                email:user.email,
+                jsDy:user.isDy,
+                jobTitle:user.jobTitle,
+                mobile:user.mobile,
+                nickName:user.nickName,
+                password:user.password,
+                userType:user.userType,
+                username:user.username,
+            }).then(res=>{
+                if(res.code === 200){
+                    this.refresh();
+                }
+            })
+        }
+    },
+    props:['refresh']
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/authority/index.vue b/src/views/systemSetting/baseSetting/authority/index.vue
index 1a3b79f..02590b6 100644
--- a/src/views/systemSetting/baseSetting/authority/index.vue
+++ b/src/views/systemSetting/baseSetting/authority/index.vue
@@ -1,97 +1,149 @@
 <template>
     <div class="userList">
         <header>
-            <div class="headerTitle">鏁版嵁绛涢��</div>
             <div class="headerContent">
                 <div class="search">
                     <span>绛涢�夋潯浠�:</span>
                     <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                    <div class="findBtn">
+                        <el-button type="primary">鏌ヨ</el-button>
+                    </div>
                 </div>
                 <div class="addUser">
-                    <el-button type="primary">娣诲姞鐢ㄦ埛</el-button>
+                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
+                    <el-dialog :visible.sync="dialogCreate" width="45%">
+                        <createUser :refresh="getUserList" />
+                    </el-dialog>
                 </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 ref="multipleTable"
+                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                     <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 prop="nickName" label="鐢ㄦ埛鍚嶇О" width="82">
                     </el-table-column>
-                    <el-table-column prop="true_name" label="鎵�灞炲鍚�" width="76">
+                    <el-table-column prop="username" label="鎵�灞炲鍚�" width="76">
                     </el-table-column>
-                    <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" width="81">
+                    <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" width="81">
                     </el-table-column>
-                    <el-table-column prop="role" label="鎵�灞炶鑹�" width="87">
+                    <el-table-column prop="note" label="鎵�灞炶鑹�" width="87">
                     </el-table-column>
-                    <el-table-column prop="department" label="鎵�灞為儴闂�" width="80">
+                    <el-table-column prop="departName" label="鎵�灞為儴闂�" width="80">
                     </el-table-column>
-                    <el-table-column prop="work" label="鎵�灞炶亴鍔�" width="83">
+                    <el-table-column prop="jobTitle" 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">
+                    <el-table-column prop="status" label="鍚敤" width="90">
                         <template slot-scope="scope">
-                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�"
+                                active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)">
                             </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>
+                            <div class="operation">
+                                <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> -->
+                                <span>鏌ョ湅</span>
+                                <!-- <span>淇敼瀵嗙爜</span> -->
+                                <!-- <span>鍒犻櫎</span> -->
+                                <span>淇敼閮ㄩ棬</span>
+                            </div>
                         </template>
                     </el-table-column>
                 </el-table>
+                <el-dialog :visible.sync="dialogUpdate" width="45%">
+                    <updateUser />
+                </el-dialog>
             </div>
         </main>
     </div>
 </template>
 <script>
+import createUser from "./createUser"
+import updateUser from "./updateUser"
+import helper from "@/utils/mydate.js"
 export default {
+    components: {
+        createUser, updateUser
+    },
     data() {
         return {
-            tableData: [
-                {
-                    createTime: '2016-05-02',
-                    name: 'admin',
-                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
-                    role: '瓒呯骇绠＄悊鍛�',
-                    is_open: true,
-                }
-            ]
+            tableData: [],
+            dialogCreate: false,
+            dialogUpdate: false,
+            user: '',
         }
     },
+    created() {
+        this.getUserList();
+    },
+    methods: {
+        // 淇敼瑙掕壊
+        handleChangeRole(obj) {
+            this.dialogUpdate = true
+            this.user = obj;
+            // console.log(obj)
+        },
+        // 淇敼鐢ㄦ埛鐘舵��
+        handleChangeStatus(obj) {
+            let { id, status } = obj;
+            status == true ? status = 1 : status = 0;
+            console.log(id, status);
+            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
+                console.log(res);
+            })
+        },
+        // 鑾峰彇鐢ㄦ埛鍒楄〃
+        getUserList() {
+            const that = this;
+            this.dialogCreate = false;
+            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+            this.$axios.get('sccg/admin/list').then(res => {
+                if (res.code === 200) {
+                    res.data.records.forEach(item => {
+                        item.createTime = helper(item.createTime);
+                        item.status == 1 ? item.status = true : item.status = false;
+                    })
+                    that.tableData = res.data.records;
+                }
+            })
+        },
+        // 璁剧疆琛ㄦ牸鏂戦┈绾�
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 == 0) {
+                return 'warning-row';
+            } else {
+                return 'success-row';
+            }
+            return '';
+        }
+    }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .userList {
     text-align: left;
     margin: 10px 20px;
+    color: #4b9bb7;
 
     header {
-        background-color: #fff;
-
-        .headerTitle {
-            font-weight: 600;
-            padding: 0 20px;
-            color: #666;
-            line-height: 50px;
-            border-bottom: 1px solid #f0f2f5;
-        }
+        background-color: #09152f;
 
         .headerContent {
             padding: 0 40px;
             display: flex;
             line-height: 100px;
             justify-content: space-between;
+            align-items: center;
 
             .search {
                 display: flex;
@@ -104,21 +156,90 @@
                 .el-input {
                     flex: 2;
                 }
+
+            }
+
+            .findBtn {
+                line-height: 100px;
+                margin-left: 15px;
+                display: flex;
+                align-items: center;
+                margin-top: -2px;
+
+                .el-button {
+                    padding: 12px 25px;
+                    border-radius: 20px;
+                }
+            }
+
+            .addBtn {
+                background-color: #eb5d01;
+                border: none;
+                border-radius: 20px;
+                padding: 12px 30px;
             }
         }
     }
 
     main {
-        background-color: #fff;
+        background-color: #09152f;
         margin-top: 20px;
-        padding: 0 10px;
+        // padding: 0 40px;
+        padding-bottom: 50px;
 
         .mainTitle {
             line-height: 60px;
         }
-        .el-table{
-            font-size: 10px;
+    }
+}
+
+.el-table {
+    color: #4b9bb7;
+    font-size: 10px;
+
+    .operation {
+        display: flex;
+        // justify-content: space-around;
+        color: #0079fe;
+        span{
+            margin-left: 10px;
+        }
+        span:hover {
+            cursor: pointer;
         }
     }
 }
+
+.el-table .warning-row {
+    background: #06122c;
+}
+.el-input__inner{
+    background-color: #09152f;
+}
+.el-table .success-row {
+    background: #071f39;
+}
+.switchStyle .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+ .el-switch__core{
+    background-color: rgba(166, 166, 166, 1) ;
+  }
+  .switchStyle .el-switch__label--left {
+    z-index: 9;
+    left: 20px;
+  }
+  .switchStyle .el-switch__label--right {
+    z-index: 9;
+    left: 4px;
+  }
+  .switchStyle .el-switch__label.is-active {
+    display: block;
+  }
+  .switchStyle.el-switch .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 50px !important;
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/authority/updateUser/index.vue b/src/views/systemSetting/baseSetting/authority/updateUser/index.vue
new file mode 100644
index 0000000..72f9605
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/authority/updateUser/index.vue
@@ -0,0 +1,363 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name">
+                        <el-input v-model="user.true_name" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item> -->
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <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" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.phone" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.mail" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 1,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const that = this;
+            console.log(this.user);
+            // this.$axios.post('sccg/admin/register',that.user).then(res=>{
+            //     console.log(res);
+            // })
+        }
+    },
+    props:[]
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/department/createUser/index.vue b/src/views/systemSetting/baseSetting/department/createUser/index.vue
new file mode 100644
index 0000000..872c556
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/department/createUser/index.vue
@@ -0,0 +1,375 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="username">
+                        <el-input v-model="user.username" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item>
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <el-radio-group v-model="user.isDy">
+                            <el-radio :label="1">鏄�</el-radio>
+                            <el-radio :label="0">鍚�</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- 鎵�灞炴墜鏈哄彿鐮� -->
+                    <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.mobile" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.email" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <el-select v-model="user.userType" 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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 0,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const {user} = this;
+            console.log(user);
+            this.$axios.post('sccg/admin/register',{
+                departmentId:user.departmentId,
+                email:user.email,
+                jsDy:user.isDy,
+                jobTitle:user.jobTitle,
+                mobile:user.mobile,
+                nickName:user.nickName,
+                password:user.password,
+                userType:user.userType,
+                username:user.username,
+            }).then(res=>{
+                if(res.code === 200){
+                    this.refresh();
+                }
+            })
+        }
+    },
+    props:['refresh']
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/department/index.vue b/src/views/systemSetting/baseSetting/department/index.vue
index 1a3b79f..02590b6 100644
--- a/src/views/systemSetting/baseSetting/department/index.vue
+++ b/src/views/systemSetting/baseSetting/department/index.vue
@@ -1,97 +1,149 @@
 <template>
     <div class="userList">
         <header>
-            <div class="headerTitle">鏁版嵁绛涢��</div>
             <div class="headerContent">
                 <div class="search">
                     <span>绛涢�夋潯浠�:</span>
                     <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                    <div class="findBtn">
+                        <el-button type="primary">鏌ヨ</el-button>
+                    </div>
                 </div>
                 <div class="addUser">
-                    <el-button type="primary">娣诲姞鐢ㄦ埛</el-button>
+                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
+                    <el-dialog :visible.sync="dialogCreate" width="45%">
+                        <createUser :refresh="getUserList" />
+                    </el-dialog>
                 </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 ref="multipleTable"
+                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                     <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 prop="nickName" label="鐢ㄦ埛鍚嶇О" width="82">
                     </el-table-column>
-                    <el-table-column prop="true_name" label="鎵�灞炲鍚�" width="76">
+                    <el-table-column prop="username" label="鎵�灞炲鍚�" width="76">
                     </el-table-column>
-                    <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" width="81">
+                    <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" width="81">
                     </el-table-column>
-                    <el-table-column prop="role" label="鎵�灞炶鑹�" width="87">
+                    <el-table-column prop="note" label="鎵�灞炶鑹�" width="87">
                     </el-table-column>
-                    <el-table-column prop="department" label="鎵�灞為儴闂�" width="80">
+                    <el-table-column prop="departName" label="鎵�灞為儴闂�" width="80">
                     </el-table-column>
-                    <el-table-column prop="work" label="鎵�灞炶亴鍔�" width="83">
+                    <el-table-column prop="jobTitle" 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">
+                    <el-table-column prop="status" label="鍚敤" width="90">
                         <template slot-scope="scope">
-                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�"
+                                active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)">
                             </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>
+                            <div class="operation">
+                                <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> -->
+                                <span>鏌ョ湅</span>
+                                <!-- <span>淇敼瀵嗙爜</span> -->
+                                <!-- <span>鍒犻櫎</span> -->
+                                <span>淇敼閮ㄩ棬</span>
+                            </div>
                         </template>
                     </el-table-column>
                 </el-table>
+                <el-dialog :visible.sync="dialogUpdate" width="45%">
+                    <updateUser />
+                </el-dialog>
             </div>
         </main>
     </div>
 </template>
 <script>
+import createUser from "./createUser"
+import updateUser from "./updateUser"
+import helper from "@/utils/mydate.js"
 export default {
+    components: {
+        createUser, updateUser
+    },
     data() {
         return {
-            tableData: [
-                {
-                    createTime: '2016-05-02',
-                    name: 'admin',
-                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
-                    role: '瓒呯骇绠＄悊鍛�',
-                    is_open: true,
-                }
-            ]
+            tableData: [],
+            dialogCreate: false,
+            dialogUpdate: false,
+            user: '',
         }
     },
+    created() {
+        this.getUserList();
+    },
+    methods: {
+        // 淇敼瑙掕壊
+        handleChangeRole(obj) {
+            this.dialogUpdate = true
+            this.user = obj;
+            // console.log(obj)
+        },
+        // 淇敼鐢ㄦ埛鐘舵��
+        handleChangeStatus(obj) {
+            let { id, status } = obj;
+            status == true ? status = 1 : status = 0;
+            console.log(id, status);
+            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
+                console.log(res);
+            })
+        },
+        // 鑾峰彇鐢ㄦ埛鍒楄〃
+        getUserList() {
+            const that = this;
+            this.dialogCreate = false;
+            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+            this.$axios.get('sccg/admin/list').then(res => {
+                if (res.code === 200) {
+                    res.data.records.forEach(item => {
+                        item.createTime = helper(item.createTime);
+                        item.status == 1 ? item.status = true : item.status = false;
+                    })
+                    that.tableData = res.data.records;
+                }
+            })
+        },
+        // 璁剧疆琛ㄦ牸鏂戦┈绾�
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 == 0) {
+                return 'warning-row';
+            } else {
+                return 'success-row';
+            }
+            return '';
+        }
+    }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .userList {
     text-align: left;
     margin: 10px 20px;
+    color: #4b9bb7;
 
     header {
-        background-color: #fff;
-
-        .headerTitle {
-            font-weight: 600;
-            padding: 0 20px;
-            color: #666;
-            line-height: 50px;
-            border-bottom: 1px solid #f0f2f5;
-        }
+        background-color: #09152f;
 
         .headerContent {
             padding: 0 40px;
             display: flex;
             line-height: 100px;
             justify-content: space-between;
+            align-items: center;
 
             .search {
                 display: flex;
@@ -104,21 +156,90 @@
                 .el-input {
                     flex: 2;
                 }
+
+            }
+
+            .findBtn {
+                line-height: 100px;
+                margin-left: 15px;
+                display: flex;
+                align-items: center;
+                margin-top: -2px;
+
+                .el-button {
+                    padding: 12px 25px;
+                    border-radius: 20px;
+                }
+            }
+
+            .addBtn {
+                background-color: #eb5d01;
+                border: none;
+                border-radius: 20px;
+                padding: 12px 30px;
             }
         }
     }
 
     main {
-        background-color: #fff;
+        background-color: #09152f;
         margin-top: 20px;
-        padding: 0 10px;
+        // padding: 0 40px;
+        padding-bottom: 50px;
 
         .mainTitle {
             line-height: 60px;
         }
-        .el-table{
-            font-size: 10px;
+    }
+}
+
+.el-table {
+    color: #4b9bb7;
+    font-size: 10px;
+
+    .operation {
+        display: flex;
+        // justify-content: space-around;
+        color: #0079fe;
+        span{
+            margin-left: 10px;
+        }
+        span:hover {
+            cursor: pointer;
         }
     }
 }
+
+.el-table .warning-row {
+    background: #06122c;
+}
+.el-input__inner{
+    background-color: #09152f;
+}
+.el-table .success-row {
+    background: #071f39;
+}
+.switchStyle .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+ .el-switch__core{
+    background-color: rgba(166, 166, 166, 1) ;
+  }
+  .switchStyle .el-switch__label--left {
+    z-index: 9;
+    left: 20px;
+  }
+  .switchStyle .el-switch__label--right {
+    z-index: 9;
+    left: 4px;
+  }
+  .switchStyle .el-switch__label.is-active {
+    display: block;
+  }
+  .switchStyle.el-switch .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 50px !important;
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/department/updateUser/index.vue b/src/views/systemSetting/baseSetting/department/updateUser/index.vue
new file mode 100644
index 0000000..72f9605
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/department/updateUser/index.vue
@@ -0,0 +1,363 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name">
+                        <el-input v-model="user.true_name" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item> -->
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <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" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.phone" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.mail" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 1,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const that = this;
+            console.log(this.user);
+            // this.$axios.post('sccg/admin/register',that.user).then(res=>{
+            //     console.log(res);
+            // })
+        }
+    },
+    props:[]
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/role/createUser/index.vue b/src/views/systemSetting/baseSetting/role/createUser/index.vue
new file mode 100644
index 0000000..872c556
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/role/createUser/index.vue
@@ -0,0 +1,375 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="username">
+                        <el-input v-model="user.username" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item>
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <el-radio-group v-model="user.isDy">
+                            <el-radio :label="1">鏄�</el-radio>
+                            <el-radio :label="0">鍚�</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- 鎵�灞炴墜鏈哄彿鐮� -->
+                    <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.mobile" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.email" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <el-select v-model="user.userType" 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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 0,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const {user} = this;
+            console.log(user);
+            this.$axios.post('sccg/admin/register',{
+                departmentId:user.departmentId,
+                email:user.email,
+                jsDy:user.isDy,
+                jobTitle:user.jobTitle,
+                mobile:user.mobile,
+                nickName:user.nickName,
+                password:user.password,
+                userType:user.userType,
+                username:user.username,
+            }).then(res=>{
+                if(res.code === 200){
+                    this.refresh();
+                }
+            })
+        }
+    },
+    props:['refresh']
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/role/index.vue b/src/views/systemSetting/baseSetting/role/index.vue
index 5e9e096..8958fd2 100644
--- a/src/views/systemSetting/baseSetting/role/index.vue
+++ b/src/views/systemSetting/baseSetting/role/index.vue
@@ -1,89 +1,149 @@
 <template>
     <div class="userList">
         <header>
-            <div class="headerTitle">鏁版嵁绛涢��</div>
             <div class="headerContent">
                 <div class="search">
                     <span>绛涢�夋潯浠�:</span>
                     <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                    <div class="findBtn">
+                        <el-button type="primary">鏌ヨ</el-button>
+                    </div>
                 </div>
                 <div class="addUser">
-                    <el-button type="primary">鏂板缓瑙掕壊</el-button>
+                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
+                    <el-dialog :visible.sync="dialogCreate" width="45%">
+                        <createUser :refresh="getUserList" />
+                    </el-dialog>
                 </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 ref="multipleTable"
+                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                     <el-table-column type="selection" width="55">
                     </el-table-column>
-                    <el-table-column prop="name" label="鐢ㄦ埛鍚嶇О" width="82">
+                    <el-table-column label="鐢ㄦ埛ID" width="80">
+                        <template slot-scope="scope">{{ scope.row.id }}</template>
                     </el-table-column>
-                    <el-table-column prop="true_name" label="瑙掕壊绫诲瀷" width="76">
+                    <el-table-column prop="nickName" label="鐢ㄦ埛鍚嶇О" width="100">
                     </el-table-column>
-                    <el-table-column prop="phone" label="榛樿瑙掕壊" width="81">
+                    <el-table-column prop="username" label="鎵�灞炲鍚�" width="76">
                     </el-table-column>
-                    <el-table-column prop="role" label="澶囨敞" width="87">
+                    <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" width="81">
                     </el-table-column>
-                    <el-table-column prop="is_open" label="鐘舵��" width="90">
+                    <el-table-column prop="note" label="鎵�灞炶鑹�" width="87">
+                    </el-table-column>
+                    <el-table-column prop="departName" label="鎵�灞為儴闂�" width="80">
+                    </el-table-column>
+                    <el-table-column prop="jobTitle" label="鎵�灞炶亴鍔�" width="83">
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="128">
+                    </el-table-column>
+                    <el-table-column prop="status" label="鍚敤" width="120">
                         <template slot-scope="scope">
-                            <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949">
+                            <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�"
+                                active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)">
                             </el-switch>
                         </template>
                     </el-table-column>
-                    <el-table-column prop="operation" label="鎿嶄綔" width="246" class="operation">
+                    <el-table-column prop="operation" label="鎿嶄綔" width="500">
                         <template slot-scope="scope">
-                            <span>鏌ョ湅</span>
-                            <span>鏉冮檺璁剧疆</span>
-                            <span>鍋滅敤</span>
+                            <div class="operation">
+                                <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> -->
+                                <span>鏌ョ湅</span>
+                                <!-- <span>淇敼瀵嗙爜</span> -->
+                                <!-- <span>鍒犻櫎</span> -->
+                                <span>淇敼閮ㄩ棬</span>
+                            </div>
                         </template>
                     </el-table-column>
                 </el-table>
+                <el-dialog :visible.sync="dialogUpdate" width="45%">
+                    <updateUser />
+                </el-dialog>
             </div>
         </main>
     </div>
 </template>
 <script>
+import createUser from "./createUser"
+import updateUser from "./updateUser"
+import helper from "@/utils/mydate.js"
 export default {
+    components: {
+        createUser, updateUser
+    },
     data() {
         return {
-            tableData: [
-                {
-                    createTime: '2016-05-02',
-                    name: 'admin',
-                    address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
-                    role: '瓒呯骇绠＄悊鍛�',
-                    is_open: true,
-                }
-            ]
+            tableData: [],
+            dialogCreate: false,
+            dialogUpdate: false,
+            user: '',
         }
     },
+    created() {
+        this.getUserList();
+    },
+    methods: {
+        // 淇敼瑙掕壊
+        handleChangeRole(obj) {
+            this.dialogUpdate = true
+            this.user = obj;
+            // console.log(obj)
+        },
+        // 淇敼鐢ㄦ埛鐘舵��
+        handleChangeStatus(obj) {
+            let { id, status } = obj;
+            status == true ? status = 1 : status = 0;
+            console.log(id, status);
+            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
+                console.log(res);
+            })
+        },
+        // 鑾峰彇鐢ㄦ埛鍒楄〃
+        getUserList() {
+            const that = this;
+            this.dialogCreate = false;
+            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+            this.$axios.get('sccg/admin/list').then(res => {
+                if (res.code === 200) {
+                    res.data.records.forEach(item => {
+                        item.createTime = helper(item.createTime);
+                        item.status == 1 ? item.status = true : item.status = false;
+                    })
+                    that.tableData = res.data.records;
+                }
+            })
+        },
+        // 璁剧疆琛ㄦ牸鏂戦┈绾�
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 == 0) {
+                return 'warning-row';
+            } else {
+                return 'success-row';
+            }
+            return '';
+        }
+    }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .userList {
     text-align: left;
     margin: 10px 20px;
+    color: #4b9bb7;
 
     header {
-        background-color: #fff;
-
-        .headerTitle {
-            font-weight: 600;
-            padding: 0 20px;
-            color: #666;
-            line-height: 50px;
-            border-bottom: 1px solid #f0f2f5;
-        }
+        background-color: #09152f;
 
         .headerContent {
             padding: 0 40px;
             display: flex;
             line-height: 100px;
             justify-content: space-between;
+            align-items: center;
 
             .search {
                 display: flex;
@@ -96,21 +156,89 @@
                 .el-input {
                     flex: 2;
                 }
+
+            }
+
+            .findBtn {
+                line-height: 100px;
+                margin-left: 15px;
+                display: flex;
+                align-items: center;
+                margin-top: -2px;
+
+                .el-button {
+                    padding: 12px 25px;
+                    border-radius: 20px;
+                }
+            }
+
+            .addBtn {
+                background-color: #eb5d01;
+                border: none;
+                border-radius: 20px;
+                padding: 12px 30px;
             }
         }
     }
 
     main {
-        background-color: #fff;
+        background-color: #09152f;
         margin-top: 20px;
-        padding: 0 10px;
+        // padding: 0 40px;
+        padding-bottom: 50px;
 
         .mainTitle {
             line-height: 60px;
         }
-        .el-table{
-            font-size: 10px;
+    }
+}
+
+.el-table {
+    color: #4b9bb7;
+    font-size: 10px;
+    .operation {
+        display: flex;
+        // justify-content: space-around;
+        color: #0079fe;
+        span{
+            margin-left: 10px;
+        }
+        span:hover {
+            cursor: pointer;
         }
     }
 }
+
+.el-table .warning-row {
+    background: #06122c;
+}
+.el-input__inner{
+    background-color: #09152f;
+}
+.el-table .success-row {
+    background: #071f39;
+}
+.switchStyle .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+ .el-switch__core{
+    background-color: rgba(166, 166, 166, 1) ;
+  }
+  .switchStyle .el-switch__label--left {
+    z-index: 9;
+    left: 20px;
+  }
+  .switchStyle .el-switch__label--right {
+    z-index: 9;
+    left: 4px;
+  }
+  .switchStyle .el-switch__label.is-active {
+    display: block;
+  }
+  .switchStyle.el-switch .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 50px !important;
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/role/updateUser/index.vue b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
new file mode 100644
index 0000000..72f9605
--- /dev/null
+++ b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
@@ -0,0 +1,363 @@
+<template>
+    <div class="createUser">
+        <header>
+            <div class="headerTitle">鏂板璐︽埛</div>
+            <div class="headerTip">
+                <span>*</span>
+                <label>涓哄繀濉」</label>
+            </div>
+        </header>
+        <main>
+            <div class="mainTitle">鍩虹淇℃伅</div>
+            <div class="mainContent">
+                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+                    label-position="right">
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
+                        <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
+                    </el-form-item>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name">
+                        <el-input v-model="user.true_name" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
+                    </el-form-item> -->
+                    <!-- 鎬у埆 -->
+                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
+                        <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" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
+                        <el-input v-model="user.phone" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
+                    </el-form-item>
+                    <!-- 閭鍦板潃 -->
+                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
+                        <el-input v-model="user.mail" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
+                    </el-form-item>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <!-- <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" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+                        <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" label="搴ф満/鍒嗘満:" prop="zj">
+                        <div class="optionHandleSp">
+                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+                            </el-input>
+                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+                            </el-input>
+                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <!-- 鎵�灞為儴闂� -->
+                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
+                        <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 褰撳墠鑱屽姟 -->
+                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
+                        <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-form-item>
+                    <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+                        <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <!-- 濉啓鎵�灞瀒p鍦板潃 -->
+                    <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+                        <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+                    </el-form-item> -->
+                    <el-form-item class="optionBtn">
+                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button>
+                        <el-button class="btn reset">閲嶇疆</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </div>
+        </main>
+    </div>
+</template>
+<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: {
+                nickName: '',
+                password: '',
+                username: '',
+                // gender: 1,
+                isDy: 1,
+                mobile: '',
+                email: '',
+                // role: null,
+                userType: null,
+                zj: {
+                    areaNumber: '',
+                    phoneNumber: "",
+                    moreNumber: "",
+                },
+                departmentId: null,
+                jobTitle: null,
+                // mac: '',
+                // ip: '',
+            },
+            createUserRules: {
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
+                password: [
+                    { required: true, trigger: "blur", validator: validatePass },
+                ],
+                username: [
+                    { required: true, trigger: "blur", validator: validateTruename },
+                ],
+                // gender: [
+                //     { required: true, trigger: "blur" },
+                // ],
+                isDy: [
+                    { required: true, trigger: "blur" },
+                ],
+                mobile: [
+                    { required: true, trigger: "blur", validator: validatePhone },
+                ],
+                email: [
+                    { required: false, trigger: "blur", validator: validateMail },
+                ],
+                // role: [
+                //     { required: true, trigger: "blur", validator: validateRole },
+                // ],
+                userType: [
+                    { required: true, trigger: "blur", validator: validateType },
+                ],
+                zj: [
+                    { required: false, trigger: "blur" },
+                ],
+                departmentId: [
+                    { required: true, trigger: "blur", validator: validateDepartment },
+                ],
+                jobTitle: [
+                    { required: true, trigger: "blur", validator: validateWork },
+                ],
+                // mac: [
+                //     { required: false, trigger: "blur", validator: validateMac },
+                // ],
+                // ip: [
+                //     { required: false, trigger: "blur", validator: validateIp },
+                // ],
+            },
+            roleList: [
+                { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+            ],
+            typeList: []
+        }
+    },
+    created() { 
+        const that = this ;
+        // 鑾峰彇瑙掕壊鍒楄〃
+        // this.$axios.get('')
+        // 鑾峰彇鐢ㄦ埛绫诲瀷鍒楄〃
+        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
+        //     console.log(res);
+        // })
+        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
+        this.$axios.get('sccg/depart/page').then(res=>{
+            that.typeList = res.data.records;
+        })
+    },
+    methods: {
+        handleUser() {
+            const that = this;
+            console.log(this.user);
+            // this.$axios.post('sccg/admin/register',that.user).then(res=>{
+            //     console.log(res);
+            // })
+        }
+    },
+    props:[]
+}
+</script>
+<style lang="scss" scpoed>
+.createUser {
+    border-radius: 1px;
+    // min-width: 1024px;
+    // min-height: 1450px;
+    background-color: #fff;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 20px;
+        .headerTitle {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .headerTip span {
+            color: #ff3b6c;
+        }
+
+        .headerTip label {
+            color: #999999;
+        }
+    }
+
+    main {
+        border-top: 1px solid #f0f2f5;
+        text-align: left;
+        padding: 0 55px;
+        .mainTitle {
+            // margin-left: 60px;
+            color: #666;
+            font-weight: 600;
+            line-height: 100px;
+            font-size: 14px;
+        }
+
+        .mainContent {
+            display: flex;
+            justify-content: center;
+            .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;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemSetting/baseSetting/user/index.vue b/src/views/systemSetting/baseSetting/user/index.vue
index f186680..02590b6 100644
--- a/src/views/systemSetting/baseSetting/user/index.vue
+++ b/src/views/systemSetting/baseSetting/user/index.vue
@@ -1,14 +1,16 @@
 <template>
     <div class="userList">
         <header>
-            <div class="headerTitle">鏁版嵁绛涢��</div>
             <div class="headerContent">
                 <div class="search">
                     <span>绛涢�夋潯浠�:</span>
                     <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                    <div class="findBtn">
+                        <el-button type="primary">鏌ヨ</el-button>
+                    </div>
                 </div>
                 <div class="addUser">
-                    <el-button type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
+                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
                     <el-dialog :visible.sync="dialogCreate" width="45%">
                         <createUser :refresh="getUserList" />
                     </el-dialog>
@@ -16,11 +18,10 @@
             </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 ref="multipleTable"
+                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
+                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                     <el-table-column type="selection" width="55">
                     </el-table-column>
                     <el-table-column label="鐢ㄦ埛ID" width="67">
@@ -42,17 +43,18 @@
                     </el-table-column>
                     <el-table-column prop="status" label="鍚敤" width="90">
                         <template slot-scope="scope">
-                            <el-switch v-model="scope.row.status" active-color="#0079fe" inactive-color="#ff4949" @change="handleChangeStatus(scope.row)">
+                            <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�"
+                                active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)">
                             </el-switch>
                         </template>
                     </el-table-column>
                     <el-table-column prop="operation" label="鎿嶄綔" width="246">
                         <template slot-scope="scope">
                             <div class="operation">
-                                <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span>
+                                <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> -->
                                 <span>鏌ョ湅</span>
-                                <span>淇敼瀵嗙爜</span>
-                                <span>鍒犻櫎</span>
+                                <!-- <span>淇敼瀵嗙爜</span> -->
+                                <!-- <span>鍒犻櫎</span> -->
                                 <span>淇敼閮ㄩ棬</span>
                             </div>
                         </template>
@@ -92,11 +94,11 @@
             // console.log(obj)
         },
         // 淇敼鐢ㄦ埛鐘舵��
-        handleChangeStatus(obj){
-            let {id,status} = obj ;
-            status==true ? status=1:status=0;
-            console.log(id,status);
-            this.$axios.post(`sccg/admin/updateStatus/`+id+'?status='+status).then(res=>{
+        handleChangeStatus(obj) {
+            let { id, status } = obj;
+            status == true ? status = 1 : status = 0;
+            console.log(id, status);
+            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
                 console.log(res);
             })
         },
@@ -109,36 +111,39 @@
                 if (res.code === 200) {
                     res.data.records.forEach(item => {
                         item.createTime = helper(item.createTime);
-                        item.status==1 ? item.status = true:item.status = false;
+                        item.status == 1 ? item.status = true : item.status = false;
                     })
                     that.tableData = res.data.records;
                 }
             })
+        },
+        // 璁剧疆琛ㄦ牸鏂戦┈绾�
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 == 0) {
+                return 'warning-row';
+            } else {
+                return 'success-row';
+            }
+            return '';
         }
     }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .userList {
     text-align: left;
     margin: 10px 20px;
+    color: #4b9bb7;
 
     header {
-        background-color: #fff;
-
-        .headerTitle {
-            font-weight: 600;
-            padding: 0 20px;
-            color: #666;
-            line-height: 50px;
-            border-bottom: 1px solid #f0f2f5;
-        }
+        background-color: #09152f;
 
         .headerContent {
             padding: 0 40px;
             display: flex;
             line-height: 100px;
             justify-content: space-between;
+            align-items: center;
 
             .search {
                 display: flex;
@@ -151,33 +156,90 @@
                 .el-input {
                     flex: 2;
                 }
+
+            }
+
+            .findBtn {
+                line-height: 100px;
+                margin-left: 15px;
+                display: flex;
+                align-items: center;
+                margin-top: -2px;
+
+                .el-button {
+                    padding: 12px 25px;
+                    border-radius: 20px;
+                }
+            }
+
+            .addBtn {
+                background-color: #eb5d01;
+                border: none;
+                border-radius: 20px;
+                padding: 12px 30px;
             }
         }
     }
 
     main {
-        background-color: #fff;
+        background-color: #09152f;
         margin-top: 20px;
-        padding: 0 10px;
+        // padding: 0 40px;
         padding-bottom: 50px;
 
         .mainTitle {
             line-height: 60px;
         }
+    }
+}
 
-        .el-table {
-            font-size: 10px;
+.el-table {
+    color: #4b9bb7;
+    font-size: 10px;
 
-            .operation {
-                display: flex;
-                justify-content: space-around;
-                color: #0079fe;
-
-                span:hover {
-                    cursor: pointer;
-                }
-            }
+    .operation {
+        display: flex;
+        // justify-content: space-around;
+        color: #0079fe;
+        span{
+            margin-left: 10px;
+        }
+        span:hover {
+            cursor: pointer;
         }
     }
 }
+
+.el-table .warning-row {
+    background: #06122c;
+}
+.el-input__inner{
+    background-color: #09152f;
+}
+.el-table .success-row {
+    background: #071f39;
+}
+.switchStyle .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+ .el-switch__core{
+    background-color: rgba(166, 166, 166, 1) ;
+  }
+  .switchStyle .el-switch__label--left {
+    z-index: 9;
+    left: 20px;
+  }
+  .switchStyle .el-switch__label--right {
+    z-index: 9;
+    left: 4px;
+  }
+  .switchStyle .el-switch__label.is-active {
+    display: block;
+  }
+  .switchStyle.el-switch .el-switch__core,
+  .el-switch .el-switch__label {
+    width: 50px !important;
+  }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0