From 4b480d972e021e849c60f2244cc483845d66a6eb Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 28 Feb 2022 14:16:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/t-zs.png        | Bin 0 -> 2227 bytes
 src/assets/styles/eladmin.scss    |  24 ++--
 src/assets/styles/index.scss      | 135 ++++++++++++++++++-
 src/assets/styles/login.scss      |  36 +----
 src/assets/styles/sidebar.scss    |   4 +
 src/layout/index.vue              |   4 +-
 src/views/device/deviceConfig.vue |   3 -
 src/views/device/index.vue        |  78 ++++++++---
 src/views/login.vue               |  45 +++++--
 src/views/system/dept/index.vue   | 185 ++++++++++++++++++--------
 src/views/system/menu/index.vue   | 108 ++++++++++-----
 src/views/system/role/index.vue   | 190 ++++++++++++++++++++-------
 src/views/system/user/index.vue   | 210 +++++++++++++++++-------------
 13 files changed, 715 insertions(+), 307 deletions(-)
 create mode 100644 src/assets/images/t-zs.png

diff --git a/src/assets/images/t-zs.png b/src/assets/images/t-zs.png
new file mode 100644
index 0000000000000000000000000000000000000000..824f898d12887b614962d2b8f91e465db66d7bd0
GIT binary patch
literal 2227
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

literal 0
HcmV?d00001

diff --git a/src/assets/styles/eladmin.scss b/src/assets/styles/eladmin.scss
index e1e0195..6510976 100644
--- a/src/assets/styles/eladmin.scss
+++ b/src/assets/styles/eladmin.scss
@@ -1,12 +1,14 @@
 .head-container {
-  padding-bottom: 10px;
+  padding-bottom: 20px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #eee;
   .filter-item {
     display: inline-block;
     vertical-align: middle;
-    margin: 0 3px 10px 0;
+    // margin: 0 3px 10px 0;
     input {
-      height: 30.5px;
-      line-height: 30.5px;
+      height: 32px;
+      line-height: 32px;
     }
   }
   .el-form-item-label {
@@ -16,20 +18,22 @@
     vertical-align: middle;
     font-size: 14px;
     color: #606266;
-    line-height: 30.5px;
+    line-height: 32px;
     padding: 0 7px 0 7px;
   }
-  .el-button+.el-button {
-    margin-left: 0 !important;
+  .el-button {
+    // margin-left: 0 !important;
+    padding: 0 15px;
+    height: 32px;
   }
   .el-select__caret.el-input__icon.el-icon-arrow-up{
-    line-height: 30.5px;
+    line-height: 32px;
   }
   .date-item {
     display: inline-block;
     vertical-align: middle;
-    margin-bottom: 10px;
-    height: 30.5px !important;
+    // margin-bottom: 10px;
+    height: 32pxpx !important;
     width: 230px !important;
   }
 }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ec8be31..2eab990 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -126,7 +126,11 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px 20px 45px 20px;
+  margin: 24px;
+  padding: 20px 24px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: calc(100vh - 152px);
 }
 
 .components-container {
@@ -186,19 +190,146 @@ aside {
 }
 
 // start
+.auth_code {
+  position: relative;
+  .login-code {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 33%;
+    display: inline-block;
+    height: 40px;
+    img {
+      cursor: pointer;
+      vertical-align: middle
+    }
+    span {
+      position: relative;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+      text-align: center;
+      line-height: 40px;
+      color: #33a1fa;
+      cursor: pointer;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 2px;
+        top: 50%;
+        width: 1px;
+        height: 18px;
+        margin-top: -9px;
+        background-color: #e2e6ee;
+      }
+    }
+  }
+}
 .page_add {
   text-align: right;
+  .table_add{
+    padding: 0 24px;
+    height: 28px;
+    border-radius: 14px;
+    margin-top: 2px;
+  }
 }
 .form_item {
+  display: flex;
   margin: 0 10px;
 
   span {
+    display: block;
+    line-height: 32px;
     font-size: 14px;
     margin-right: 10px;
-    color: #666;
+    color: #333;
   }
 }
 .list_table {
   margin-top: 20px;
 }
+.col_flex {
+  display: flex;
+}
+.el-table{
+  color: #333;
+  font-size: 14px;
+  .el-button{
+    padding: 5px 8px;
+    border: none !important;
+  }
+  .delt_btn {
+    background-color: #ee5747 !important;
+  }
+  .stop_btn{
+     background-color: #faaf45 !important;
+  }
+  .record_btn{
+    background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
+  }
+}
+.el-dialog__body{
+  .el-form-item{
+    margin-bottom: 24px;
+  }
+  .el-form-item__label{
+    line-height: 40px;
+    color: #333;
+  }
+  .el-input__inner{
+    height: 40px;
+    line-height: 40px;
+  }
+  .el-range-separator{
+    line-height: 34px;
+  }
+}
+.el-dialog__header{
+  position: relative;
+  padding: 20px 0;
+  margin: 0 24px;
+  border-bottom: 1px solid #eee;
+  &::before{
+    content: "";
+    position: absolute;
+    left: -18px;
+    top: 50%;
+    width: 44px;
+    height: 47px;
+    margin-top: -24px;
+    background: url(../images/t-zs.png) no-repeat left center;
+    background-size: 100% 100%;
+  }
+  .el-dialog__title{
+    color: #000;
+  }
+  .el-dialog__headerbtn{
+    font-size: 20px;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+}
+.el-dialog__footer {
+  padding: 10px 0 40px 0;
+  text-align: center;
+  .dialog-footer{
+    .el-button{
+      font-size: 14px;
+      padding: 10px 36px;
+    }
+    .el-button--default{
+      color: #3a8aeb;
+      border-color: #3a8aeb;
+      margin-left: 40px;
+    }
+  }
+}
+.record_layer {
+  .el-dialog__body {
+    padding: 0 20px 30px 20px;
+    color: #333;
+  }
+}
 // end
diff --git a/src/assets/styles/login.scss b/src/assets/styles/login.scss
index 2370862..7a814bd 100644
--- a/src/assets/styles/login.scss
+++ b/src/assets/styles/login.scss
@@ -43,38 +43,4 @@
     //   height: 39px;width: 14px;margin-left: 2px;
     // }
   }
-  .auth_code{
-    position: relative;
-    .login-code {
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 33%;
-      display: inline-block;
-      height: 40px;
-      img{
-        cursor: pointer;
-        vertical-align:middle
-      }
-      span{
-        position: relative;
-        display: block;
-        width: 100%;
-        font-size: 12px;
-        text-align: center;
-        line-height: 40px;
-        color: #33a1fa;
-        cursor: pointer;
-        &:before {
-          content: "";
-          position: absolute;
-          left: 2px;
-          top: 50%;
-          width: 1px;
-          height: 18px;
-          margin-top: -9px;
-          background-color: #e2e6ee;
-        }
-      }
-    }
-  }
+
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 7655962..edb7e17 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -5,6 +5,10 @@
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
     position: relative;
+    background-color: #f5f5f5;
+    .el-button--primary {
+      background: #3a8aeb;
+    }
   }
 
   .sidebar-container {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4318fb9..c0b5c13 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -45,8 +45,8 @@ export default {
     }),
     classObj() {
       return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
+        // hideSidebar: !this.sidebar.opened,
+        // openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
       }
diff --git a/src/views/device/deviceConfig.vue b/src/views/device/deviceConfig.vue
index 41a4a4e..11004fc 100644
--- a/src/views/device/deviceConfig.vue
+++ b/src/views/device/deviceConfig.vue
@@ -274,9 +274,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.col_flex {
-  display: flex;
-}
 .setting_btn{
   margin-right: 10px;
 }
diff --git a/src/views/device/index.vue b/src/views/device/index.vue
index 8415e5f..e8d0252 100644
--- a/src/views/device/index.vue
+++ b/src/views/device/index.vue
@@ -7,20 +7,43 @@
           <div class="form_item">
             <span>状态</span>
             <el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
-              <el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" />
+              <el-option
+                v-for="item in stateData"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
+              />
             </el-select>
           </div>
           <div class="form_item">
             <span>设备ID</span>
-            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="请输入设备ID"
+              style="width: 200px"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
           </div>
           <div class="form_item">
             <span>设备名称</span>
-            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="请输入设备名称"
+              style="width: 200px"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
           </div>
           <rrOperation />
         </el-col>
-        <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button></el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button>
+        </el-col>
       </el-row>
     </div>
     <el-row :gutter="15">
@@ -46,7 +69,11 @@
             <el-table-column prop="date" label="创建时间" align="center" width="200" />
             <el-table-column fixed="right" label="操作" align="center">
               <template slot-scope="scope">
-                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
+                <el-button
+                  type="primary"
+                  icon="el-icon-edit"
+                  @click="edit(scope.$index, scope.row)"
+                />
                 <el-button type="info" icon="el-icon-info" />
               </template>
             </el-table-column>
@@ -58,13 +85,32 @@
     </el-row>
     <!-- 编辑设备 -->
     <div class="layer">
-      <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="addFromVisible" width="400px">
+      <el-dialog
+        :title="dialogTitle"
+        :close-on-click-modal="false"
+        :visible.sync="addFromVisible"
+        width="400px"
+      >
         <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-          <el-form-item label="设备账号" prop="account"><el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" /></el-form-item>
-          <el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item>
+          <el-form-item label="设备账号" prop="account">
+            <el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="设备名称" prop="name">
+            <el-input v-model="form.name" style="width: 200px" />
+          </el-form-item>
           <el-form-item label="设备方向" prop="orientation">
-            <el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px">
-              <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
+            <el-select
+              v-model="form.orientation"
+              size="small"
+              class="filter-item"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="item in deviceData"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
+              />
             </el-select>
           </el-form-item>
         </el-form>
@@ -76,12 +122,17 @@
     </div>
 
     <div class="layer">
-      <el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="720px">
+      <el-dialog
+        title="发布内容"
+        :close-on-click-modal="false"
+        :visible.sync="contentVisible"
+        width="720px"
+      >
         <div class="content_warp">
           <h4>图片</h4>
           <ul class="item_list">
             <li class="item_cont">
-              <img src="../../assets/images/background.jpg" alt="">
+              <img src="../../assets/images/background.jpg" alt />
               <div class="item_info">
                 <div class="item_format">
                   <span class="item_type">JPG</span>
@@ -175,9 +226,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.col_flex {
-  display: flex;
-}
 .layer {
   ::v-deep .el-dialog__body {
     padding: 0 0 30px 20px;
diff --git a/src/views/login.vue b/src/views/login.vue
index 8eeb4bf..03c96eb 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -2,15 +2,37 @@
   <div class="login">
     <div class="login_bg" />
     <div class="login_cont">
-      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
-        <img src="../assets/images/login/logo.png" class="login_logo" alt="">
-        <el-form-item prop="phone"><el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        label-position="left"
+        label-width="0px"
+        class="login_form"
+      >
+        <img src="../assets/images/login/logo.png" class="login_logo" alt />
+        <el-form-item prop="phone">
+          <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" />
+        </el-form-item>
         <el-form-item prop="password">
-          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="请输入密码"
+            @keyup.enter.native="handleLogin"
+          />
         </el-form-item>
         <el-form-item prop="code" class="auth_code">
-          <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin" />
-          <div class="login-code"><img :src="codeUrl" @click="getCode"></div>
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="请输入验证码"
+            @keyup.enter.native="handleLogin"
+          />
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" />
+          </div>
         </el-form-item>
         <el-form-item prop="agree" class="login_checked login_agree" style="line-height: 0;">
           <el-checkbox v-model="loginForm.agree">
@@ -19,7 +41,12 @@
           </el-checkbox>
         </el-form-item>
         <el-form-item class="login_btn">
-          <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            @click.native.prevent="handleLogin"
+          >
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
           </el-button>
@@ -78,7 +105,7 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect
       },
       immediate: true
@@ -187,7 +214,7 @@ export default {
 }
 </style>
 <style rel="stylesheet/scss" lang="scss">
-@import '~@/assets/styles/login.scss';
+@import "~@/assets/styles/login.scss";
 .login_checked {
   .el-checkbox__label {
     font-size: 12px;
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 8f04ddb..0c93275 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -2,16 +2,49 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <el-col :span="20">
-        <!-- 搜索 -->
-        <el-input v-model="query.blurry" clearable size="small" placeholder="机构名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-input v-model="query.blurry" clearable size="small" placeholder="管理员名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <rrOperation />
-      </el-col>
-      <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button></el-col>
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <!-- 搜索 -->
+          <div class="form_item">
+            <span>机构名称：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="机构名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
+          <div class="form_item">
+            <span>管理员名称：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="管理员名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
+          <rrOperation />
+        </el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
+        </el-col>
+      </el-row>
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" :title="crud.status.title" width="620px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="addDialogVisible"
+      title="新增"
+      width="620px"
+    >
       <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="机构名称" prop="name">
           <el-input v-model="form.name" style="width: 360px;" />
@@ -29,63 +62,88 @@
         </el-form-item>
         <el-form-item label="当前版本" prop="versions">
           <el-select v-model="form.versions" placeholder="请选择" style="width: 360px;">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
+        <el-button round @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
     <!-- 记录 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
-      <el-table :data="recordData">
-        <el-table-column property="name" label="操作人" />
-        <el-table-column property="permissionType" label="角色权限" />
-        <el-table-column property="account" label="登录账号" />
-        <el-table-column property="type" label="操作类型" />
-        <el-table-column property="date" label="操作时间" />
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="recordVisible"
+      title="记录"
+      class="record_layer"
+      width="750px"
+    >
+      <el-table :data="recordData" :header-cell-style="{ color: '#333' }">
+        <el-table-column align="center" property="name" label="操作人" />
+        <el-table-column align="center" property="permissionType" label="角色权限" />
+        <el-table-column align="center" property="account" label="登录账号" />
+        <el-table-column align="center" property="type" label="操作类型" />
+        <el-table-column align="center" property="date" label="操作时间" />
       </el-table>
     </el-dialog>
+    <!-- list -->
     <el-row :gutter="15">
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table
-            ref="table"
-            v-loading="crud.loading"
-            lazy
-            :load="getDeptDatas"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            :data="tableData"
-            row-key="id"
-            @select="crud.selectChange"
-            @select-all="crud.selectAllChange"
-            @selection-change="crud.selectionChangeHandler"
-          >
-            <el-table-column :selectable="checkboxT" type="selection" width="55" />
-            <el-table-column label="机构名称" align="center" prop="name" />
-            <el-table-column label="当前版本" align="center" prop="versions" />
-            <el-table-column label="用户数" align="center" prop="number" />
-            <el-table-column label="管理员名称" align="center" prop="user_name" />
-            <el-table-column label="管理员账号" align="center" prop="user_account" />
-            <el-table-column label="配置状态" align="center" prop="enabled">
-              <template slot-scope="scope">
-                <div>{{ scope.row.enabled ? '已配置' : '未配置' }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="indate" align="center" label="有效时间" />
-            <el-table-column label="操作" width="220px" align="center" fixed="right">
-              <template slot-scope="scope">
-                <el-switch v-model="scope.row.off" active-color="#13ce66" inactive-color="#ff4949" style="margin-right: 10px;" />
-                <el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
-                <el-button type="info" icon="el-icon-info" @click="handleRecord(scope.$index, scope.row)" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
+        <el-table
+          ref="table"
+          v-loading="crud.loading"
+          lazy
+          :load="getDeptDatas"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          :data="tableData"
+          row-key="id"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          @select="crud.selectChange"
+          @select-all="crud.selectAllChange"
+          @selection-change="crud.selectionChangeHandler"
+        >
+          <el-table-column :selectable="checkboxT" type="selection" width="55" />
+          <el-table-column label="机构名称" align="center" prop="name" />
+          <el-table-column label="当前版本" align="center" prop="versions" />
+          <el-table-column label="用户数" align="center" prop="number" />
+          <el-table-column label="管理员名称" align="center" prop="user_name" />
+          <el-table-column label="管理员账号" align="center" prop="user_account" />
+          <el-table-column label="配置状态" align="center" prop="enabled">
+            <template slot-scope="scope">
+              <div>{{ scope.row.enabled ? '已配置' : '未配置' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="indate" align="center" label="有效时间" />
+          <el-table-column label="操作" width="220px" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button
+                type="primary"
+                class="stop_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >停用</el-button>
+              <el-button
+                type="info"
+                class="record_btn"
+                @click="handleRecord(scope.$index, scope.row)"
+              >记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
       </el-col>
     </el-row>
   </div>
@@ -113,7 +171,7 @@ export default {
   name: 'Dept',
   components: { rrOperation, pagination },
   cruds() {
-    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
+    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept } })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   // 设置数据字典
@@ -293,4 +351,21 @@ export default {
 ::v-deep .el-input-number .el-input__inner {
   text-align: left;
 }
+
+::v-deep .el-dialog__body {
+  .el-form-item {
+    margin-bottom: 24px;
+  }
+  .el-form-item__label {
+    line-height: 32px;
+    color: #333;
+  }
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-range-separator {
+    line-height: 24px;
+  }
+}
 </style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 7f740dc..3a5e26a 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -3,56 +3,96 @@
     <!--工具栏-->
     <div class="head-container">
       <el-row type="flex">
-        <el-col :span="20">
+        <el-col :span="20" class="col_flex">
           <!-- 搜索 -->
-          <el-input v-model="query.blurry" clearable size="small" placeholder="所属菜单" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-          <date-range-picker v-model="query.createTime" class="date-item" />
+          <div class="form_item">
+            <span>所属菜单：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="所属菜单"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
+          <div class="form_item">
+            <span>时间：</span>
+            <date-range-picker v-model="query.createTime" class="date-item" />
+          </div>
           <rrOperation />
         </el-col>
-        <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button></el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
+        </el-col>
       </el-row>
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" :title="crud.status.title" width="420px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="addDialogVisible"
+      title="新增菜单"
+      width="580px"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="80px"
+      >
         <el-form-item label="所属菜单" prop="title">
-          <el-select v-model="form.title" placeholder="请选择" style="width: 260px;">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          <el-select v-model="form.title" placeholder="请选择" style="width: 336px;">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="新增权限" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="新增权限" style="width: 260px;" />
+          <el-input
+            v-model="form.permission"
+            :disabled="form.iframe"
+            placeholder="新增权限"
+            style="width: 336px;"
+          />
         </el-form-item>
         <el-form-item label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 260px;" />
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 336px;" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">添加</el-button>
-        <el-button type="text" @click="crud.cancelCU">关闭</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">添加</el-button>
+        <el-button round @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
+    <!-- table -->
     <el-row :gutter="15">
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table
-            ref="table"
-            v-loading="crud.loading"
-            lazy
-            :load="getMenus"
-            :data="tableData"
-            row-key="id"
-            @select="crud.selectChange"
-            @select-all="crud.selectAllChange"
-            @selection-change="crud.selectionChangeHandler"
-          >
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column prop="title" label="菜单标题" align="center" />
-            <el-table-column prop="permission" label="新增权限" align="center" />
-            <el-table-column prop="operationTime" label="操作时间" align="center" />
-            <el-table-column prop="operationName" label="操作人" align="center" />
-          </el-table>
-        </el-card>
+        <el-table
+          ref="table"
+          v-loading="crud.loading"
+          lazy
+          :load="getMenus"
+          :data="tableData"
+          row-key="id"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          @select="crud.selectChange"
+          @select-all="crud.selectAllChange"
+          @selection-change="crud.selectionChangeHandler"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column prop="title" label="菜单标题" align="center" />
+          <el-table-column prop="permission" label="新增权限" align="center" />
+          <el-table-column prop="operationTime" label="操作时间" align="center" />
+          <el-table-column prop="operationName" label="操作人" align="center" />
+        </el-table>
       </el-col>
     </el-row>
   </div>
@@ -81,7 +121,7 @@ export default {
   name: 'Menu',
   components: { rrOperation, DateRangePicker },
   cruds() {
-    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
+    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu } })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
@@ -166,7 +206,7 @@ export default {
     },
     getSupDepts(id) {
       crudMenu.getMenuSuperior(id).then(res => {
-        const children = res.map(function(obj) {
+        const children = res.map(function (obj) {
           if (!obj.leaf && !obj.children) {
             obj.children = null
           }
@@ -178,7 +218,7 @@ export default {
     loadMenus({ action, parentNode, callback }) {
       if (action === LOAD_CHILDREN_OPTIONS) {
         crudMenu.getMenusTree(parentNode.id).then(res => {
-          parentNode.children = res.map(function(obj) {
+          parentNode.children = res.map(function (obj) {
             if (!obj.leaf) {
               obj.children = null
             }
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 1a5d960..96552c2 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -3,36 +3,89 @@
     <!--工具栏-->
     <div class="head-container">
       <el-row type="flex">
-        <el-col :span="20">
+        <el-col :span="20" class="col_flex">
           <!-- 搜索 -->
-          <el-input v-model="query.blurry" clearable size="small" placeholder="角色名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+          <div class="form_item">
+            <span>角色名称：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="角色名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
           <rrOperation />
         </el-col>
-        <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="roleFormVisible = true">新增</el-button></el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button>
+        </el-col>
       </el-row>
     </div>
     <!-- 角色新增-表单 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="roleFormVisible" :title="crud.status.title" width="620px" top="20px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="角色名称" prop="roleName"><el-input v-model="form.roleName" style="width: 380px;" /></el-form-item>
-        <el-form-item label="描述" prop="description"><el-input v-model="form.description" style="width: 380px;" /></el-form-item>
-        <el-form-item v-for="(item, index) in roleTree" :key="index" :label="item.name" class="press_form">
-          <el-checkbox v-model="item.isCheck" :indeterminate="item.isIndeterminate" class="check_all" @change="handleCheckAllChange(index, $event)">全选</el-checkbox>
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="roleFormVisible"
+      :title="crud.status.title"
+      width="960px"
+      top="20px"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="80px"
+      >
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="form.roleName" style="width: 380px;" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" style="width: 380px;" />
+        </el-form-item>
+        <el-form-item
+          v-for="(item, index) in roleTree"
+          :key="index"
+          :label="item.name"
+          class="press_form"
+        >
+          <el-checkbox
+            v-model="item.isCheck"
+            :indeterminate="item.isIndeterminate"
+            class="check_all"
+            @change="handleCheckAllChange(index, $event)"
+          >全选</el-checkbox>
           <div class="check_list">
-            <el-checkbox v-for="(items, i) in item.children" :key="i" v-model="items.isCheck" :label="items.name" @change="handleCheckedCitiesChange(index, items.Key, $event)">
-              {{ items.name }}
-            </el-checkbox>
+            <el-checkbox
+              v-for="(items, i) in item.children"
+              :key="i"
+              v-model="items.isCheck"
+              :label="items.name"
+              @change="handleCheckedCitiesChange(index, items.Key, $event)"
+            >{{ items.name }}</el-checkbox>
           </div>
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
+        <el-button round @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
     <!-- 记录 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="recordVisible"
+      title="记录"
+      class="record_layer"
+      width="750px"
+    >
       <el-table :data="recordData">
         <el-table-column property="name" label="操作人" />
         <el-table-column property="permissionType" label="角色权限" />
@@ -41,37 +94,48 @@
         <el-table-column property="date" label="操作时间" />
       </el-table>
     </el-dialog>
+    <!--角色管理-->
     <el-row :gutter="15">
-      <!--角色管理-->
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table
-            ref="table"
-            v-loading="crud.loading"
-            highlight-current-row
-            style="width: 100%;"
-            :data="roleData"
-            @selection-change="crud.selectionChangeHandler"
-            @current-change="handleCurrentChange"
-          >
-            <el-table-column :selectable="checkboxT" align="center" type="selection" width="55" />
-            <el-table-column align="center" prop="roleName" label="角色名称" />
-            <el-table-column align="center" prop="description" label="描述" />
-            <el-table-column header-align="center" width="600" prop="permissionList" label="相关权限">
-              <template slot-scope="scope">
-                <el-tag v-for="tag in scope.row.permissionList" :key="tag.name" type="primary">{{ tag.name }}</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="140" align="center" fixed="right">
-              <template slot-scope="scope">
-                <el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
-                <el-button type="info" icon="el-icon-info" @click="handleRecord(scope.$index, scope.row)" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
+        <el-table
+          ref="table"
+          v-loading="crud.loading"
+          highlight-current-row
+          style="width: 100%;"
+          :data="roleData"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          @selection-change="crud.selectionChangeHandler"
+          @current-change="handleCurrentChange"
+        >
+          <el-table-column :selectable="checkboxT" align="center" type="selection" width="55" />
+          <el-table-column align="center" prop="roleName" label="角色名称" />
+          <el-table-column align="center" prop="description" label="描述" />
+          <el-table-column header-align="center" width="700" prop="permissionList" label="相关权限">
+            <template slot-scope="scope">
+              <el-tag
+                v-for="tag in scope.row.permissionList"
+                :key="tag.name"
+                type="primary"
+              >{{ tag.name }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="140" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button
+                type="info"
+                class="record_btn"
+                @click="handleRecord(scope.$index, scope.row)"
+              >记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
       </el-col>
     </el-row>
   </div>
@@ -96,7 +160,7 @@ export default {
   name: 'Role',
   components: { pagination, rrOperation },
   cruds() {
-    return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
+    return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles } })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
@@ -232,12 +296,42 @@ export default {
   border: 0;
   padding: 0;
 }
-
+::v-deep .el-dialog__body {
+  .el-form-item {
+    margin-bottom: 24px;
+  }
+  .el-form-item__label {
+    line-height: 32px;
+    color: #333;
+  }
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-range-separator {
+    line-height: 24px;
+  }
+}
 .el-tag {
+  height: 26px;
+  line-height: 26px;
   margin: 5px 10px 5px 0;
+  background: #cbe3ff;
+  color: #3a8aeb;
+  border: none;
 }
 .press_form {
   display: flex;
+  &:last-child {
+    .check_list {
+      width: 590px;
+      .el-checkbox {
+        &:nth-child(1) {
+          display: block;
+        }
+      }
+    }
+  }
 }
 .press_form ::v-deep .el-form-item__content {
   display: flex;
@@ -249,7 +343,7 @@ export default {
   width: 430px;
 }
 .check_all,
-.check_list .el-checkbox{
+.check_list .el-checkbox {
   margin-right: 10px;
 }
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index d5452b6..3244e7a 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -3,35 +3,48 @@
     <!--工具栏-->
     <div class="head-container">
       <el-row type="flex">
-        <el-col :span="20">
+        <el-col :span="20" class="col_flex">
           <!-- 搜索 -->
-          <el-input
-            v-model="query.blurry"
-            clearable
-            size="small"
-            placeholder="角色名称"
-            style="width: 200px;"
-            class="filter-item"
-            @keyup.enter.native="crud.toQuery"
-          />
-          <el-input
-            v-model="query.blurry"
-            clearable
-            size="small"
-            placeholder="管理员名称"
-            style="width: 200px;"
-            class="filter-item"
-            @keyup.enter.native="crud.toQuery"
-          />
+          <div class="form_item">
+            <span>角色名称：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="角色名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
+          <div class="form_item">
+            <span>管理员名称：</span>
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="管理员名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </div>
           <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button>
+          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
         </el-col>
       </el-row>
     </div>
     <!--新增用户-->
-    <el-dialog append-to-body :close-on-click-modal="false" :show-close="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" title="新增" width="400px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="addDialogVisible"
+      title="新增"
+      width="576px"
+    >
       <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
         <el-form-item
           label="登录账号"
@@ -40,7 +53,7 @@
             { required: true, message: '请输入登录账号', trigger: 'blur' }
           ]"
         >
-          <el-input v-model="form.account" style="width: 200px" />
+          <el-input v-model="form.account" style="width: 336px" />
         </el-form-item>
         <el-form-item
           label="管理员名称"
@@ -50,7 +63,7 @@
             { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
           ]"
         >
-          <el-input v-model="form.nickName" style="width: 200px" />
+          <el-input v-model="form.nickName" style="width: 336px" />
         </el-form-item>
         <el-form-item
           label="管理员角色"
@@ -59,7 +72,7 @@
             { required: true, message: '请选择管理员角色', trigger: 'change' }
           ]"
         >
-          <el-select v-model="form.roles" placeholder="请选择管理员角色">
+          <el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px">
             <el-option label="机构超级管理员" value="1" />
             <el-option label="普通用户" value="2" />
           </el-select>
@@ -71,95 +84,104 @@
             { required: true, trigger: 'change', message: '请选择管理员状态' }
           ]"
         >
-          <el-select v-model="form.enabled" placeholder="请选择管理员状态">
+          <el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px">
             <el-option label="启用" value="1" />
             <el-option label="关闭" value="0" />
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">关闭</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
+        <el-button round @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
     <!-- 编辑用户 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :show-close="false" :before-close="crud.cancelCU" :visible.sync="editDialogVisible" title="编辑" width="480px">
-      <el-form ref="form" :inline="true" :model="editForm" :rules="rules" size="small" label-width="100px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="editDialogVisible"
+      title="编辑"
+      width="576px"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="editForm"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
         <el-form-item label="管理员名称" prop="nickName">
-          <el-input v-model="editForm.nickName" style="width: 200px" />
+          <el-input v-model="editForm.nickName" style="width: 336px" />
         </el-form-item>
         <el-form-item label="管理员角色" prop="roles">
-          <el-input v-model="editForm.roles" disabled style="width: 200px" />
+          <el-input v-model="editForm.roles" disabled style="width: 336px" />
         </el-form-item>
         <el-form-item label="机构名称" prop="orgName">
-          <el-input v-model="editForm.orgName" disabled style="width: 200px" />
+          <el-input v-model="editForm.orgName" disabled style="width: 336px" />
         </el-form-item>
         <el-form-item label="更改手机号" prop="phone">
-          <el-input v-model.number="editForm.phone" style="width: 200px" />
+          <el-input v-model.number="editForm.phone" style="width: 336px" />
         </el-form-item>
-        <el-form-item label="获取验证码" prop="code">
-          <el-input v-model.number="editForm.code" style="width: 200px" />
-          <el-button class="edit_code" type="primary" :disabled="disabledSendCode" @click="countdown()">{{ verification }}</el-button>
+        <el-form-item label="验证码" prop="code" class="auth_code">
+          <el-input v-model.number="editForm.code" style="width: 336px" />
+          <div class="login-code">
+            <span @click="countdown()">{{ verification }}</span>
+          </div>
         </el-form-item>
         <el-form-item label="登录密码" prop="password">
-          <el-input v-model="editForm.password" style="width: 200px" />
+          <el-input v-model="editForm.password" style="width: 336px" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">关闭</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
+        <el-button round @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
     <!--表格渲染-->
     <el-row :gutter="15">
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <!-- :data="crud.data" -->
-          <el-table ref="table" v-loading="crud.loading" :data="tableData" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-            <el-table-column :selectable="checkboxT" type="selection" width="55" />
-            <el-table-column prop="account" width="135" align="center" label="登录账号" />
-            <el-table-column prop="nickName" align="center" label="管理员名称" />
-            <el-table-column prop="roles" align="center" label="管理角色" />
-            <el-table-column prop="orgName" align="center" label="机构名称" />
-            <el-table-column prop="phone" align="center" label="手机号码" />
-            </el-table-column>
-            <el-table-column label="状态" align="center" prop="enabled">
-              <template slot-scope="scope">
-                <el-switch
-                  v-model="scope.row.enabled"
-                  :disabled="user.id === scope.row.id"
-                  active-color="#409EFF"
-                  inactive-color="#F56C6C"
-                  @change="changeEnabled(scope.row, scope.row.enabled)"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column prop="createTime" width="135" label="创建日期" />
-            <!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
-            <el-table-column
-              label="操作"
-              width="140"
-              align="center"
-              fixed="right"
-            >
-              <template slot-scope="scope">
-                <!-- <udOperation
-                :data="scope.row"
-                :permission="permission"
-                :disabled-dle="scope.row.id === user.id"
-              /> -->
-                <el-button
-                  type="primary"
-                  icon="el-icon-edit"
-                  @click="editFormData(scope.$index, scope.row)"
-                />
-                <el-button type="danger" icon="el-icon-delete" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
+        <!-- :data="crud.data" -->
+        <el-table
+          ref="table"
+          v-loading="crud.loading"
+          :data="tableData"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          style="width: 100%;"
+          @selection-change="crud.selectionChangeHandler"
+        >
+          <el-table-column :selectable="checkboxT" type="selection" width="55" />
+          <el-table-column prop="account" width="135" align="center" label="登录账号" />
+          <el-table-column prop="nickName" align="center" label="管理员名称" />
+          <el-table-column prop="roles" align="center" label="管理角色" />
+          <el-table-column prop="orgName" align="center" label="机构名称" />
+          <el-table-column prop="phone" align="center" label="手机号码" />
+          <el-table-column label="状态" align="center" prop="enabled">
+            <template slot-scope="scope">
+              <div>{{ scope.row.enabled == 0 ? '启用' : '关闭' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" width="135" label="创建日期" />
+          <!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
+          <el-table-column label="操作" width="180" align="center" fixed="right">
+            <template slot-scope="scope">
+              <!-- <udOperation
+            :data="scope.row"
+            :permission="permission"
+            :disabled-dle="scope.row.id === user.id"
+              />-->
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button type="danger" class="delt_btn">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
       </el-col>
     </el-row>
   </div>
@@ -185,7 +207,7 @@ export default {
   name: 'User',
   components: { rrOperation, pagination },
   cruds() {
-    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
+    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   // 数据字典
@@ -257,7 +279,7 @@ export default {
   created() {
     this.crud.msg.add = '新增成功，默认密码：123456'
   },
-  mounted: function() {
+  mounted: function () {
     const that = this
     window.onresize = function temp() {
       that.height = document.documentElement.clientHeight - 180 + 'px;'
@@ -341,10 +363,10 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .el-dialog__header{
-    background-color: #f1f1f1;
-  }
-  .edit_code{
-    margin-left: 20px;
-  }
+.el-dialog__header {
+  background-color: #f1f1f1;
+}
+.edit_code {
+  margin-left: 20px;
+}
 </style>