From 14bd524eb25225f281acf9e3a4b742c6cfc84b98 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 23 Feb 2022 17:29:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86/=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                   |   3 +-
 src/assets/styles/index.scss    |  30 ++-
 src/router/routers.js           |  74 +++++---
 src/views/device/config.vue     | 171 +++++++++++++++++
 src/views/system/dept/index.vue | 149 +++++++--------
 src/views/system/menu/index.vue | 258 +++++++++++---------------
 src/views/system/role/index.vue | 108 +++++------
 src/views/system/role/role.json | 124 ++++++-------
 src/views/system/user/index.vue | 312 ++++++++++++++++----------------
 9 files changed, 692 insertions(+), 537 deletions(-)
 create mode 100644 src/views/device/config.vue

diff --git a/.eslintignore b/.eslintignore
index ba587c1..1214b3f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
 build/*.js
 src/assets
 public
-dist
-*vue
\ No newline at end of file
+dist
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 21fbda1..ec8be31 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -32,7 +32,11 @@ html {
 *:after {
   box-sizing: inherit;
 }
-
+ul,
+ol {
+	list-style: none;
+  padding: 0;
+}
 .no-padding {
   padding: 0 !important;
 }
@@ -91,7 +95,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -105,7 +109,7 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -135,7 +139,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -180,3 +184,21 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+// start
+.page_add {
+  text-align: right;
+}
+.form_item {
+  margin: 0 10px;
+
+  span {
+    font-size: 14px;
+    margin-right: 10px;
+    color: #666;
+  }
+}
+.list_table {
+  margin-top: 20px;
+}
+// end
diff --git a/src/router/routers.js b/src/router/routers.js
index 950e007..0f818df 100644
--- a/src/router/routers.js
+++ b/src/router/routers.js
@@ -59,52 +59,84 @@ export const constantRouterMap = [
     }]
   },
   {
-    path: '/user',
+    path: '/system',
     component: Layout,
-    redirect: '/system/user',
+    hidden: true,
+    redirect: 'noredirect',
     meta: {
-      title: '用户管理',
+      title: '权限管理',
       icon: 'documentation'
     },
     children: [{
-      path: '/system/user',
+      path: '/user',
       component: () => import('@/views/system/user/index'),
       meta: {
         title: '用户管理',
         icon: 'edit'
       }
-    }]
-  },
-  {
-    path: '/role',
-    component: Layout,
-    redirect: '/system/role',
-    meta: {
-      title: '角色管理',
-      icon: 'documentation'
     },
-    children: [{
-      path: '/system/role',
+    {
+      path: '/role',
       component: () => import('@/views/system/role/index'),
       meta: {
         title: '角色管理',
         icon: 'edit'
       }
+    },
+    {
+      path: '/dept',
+      component: () => import('@/views/system/dept/index'),
+      meta: {
+        title: '机构管理',
+        icon: 'edit'
+      }
+    },
+    {
+      path: '/menu',
+      component: () => import('@/views/system/menu/index'),
+      meta: {
+        title: '权限管理',
+        icon: 'edit'
+      }
     }]
   },
+  // {
+  //   path: '/role',
+  //   component: Layout,
+  //   redirect: '/system',
+  //   meta: {
+  //     title: '权限管理',
+  //     icon: 'documentation'
+  //   },
+  //   children: [{
+  //     path: '/system/role',
+  //     component: () => import('@/views/system/role/index'),
+  //     meta: {
+  //       title: '角色管理',
+  //       icon: 'edit'
+  //     }
+  //   }]
+  // },
   {
-    path: '/dept',
+    path: '/device',
     component: Layout,
-    redirect: '/system/dept',
     meta: {
-      title: '机构管理',
+      title: '设备管理',
       icon: 'documentation'
     },
     children: [{
-      path: '/system/dept',
-      component: () => import('@/views/system/dept/index'),
+      path: '/device',
+      component: () => import('@/views/device/index'),
       meta: {
-        title: '机构管理',
+        title: '设备管理',
+        icon: 'edit'
+      }
+    },
+    {
+      path: '/config',
+      component: () => import('@/views/device/config'),
+      meta: {
+        title: '开关机配置',
         icon: 'edit'
       }
     }]
diff --git a/src/views/device/config.vue b/src/views/device/config.vue
new file mode 100644
index 0000000..a1449b4
--- /dev/null
+++ b/src/views/device/config.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <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" />
+          </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="setting_btn" type="primary" icon="el-icon-setting">配置</el-button>
+          <el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-row :gutter="15">
+      <el-col>
+        <el-card class="box-card" shadow="never">
+          <el-table style="width: 100%;" :data="tableData">
+            <el-table-column :selectable="checkboxT" type="selection" width="55" />
+            <el-table-column prop="id" label="设备ID" align="center" />
+            <el-table-column prop="account" label="设备账号" align="center" />
+            <el-table-column prop="name" label="设备名称" align="center" />
+            <el-table-column prop="orientation" label="设备方向" align="center" />
+            <el-table-column prop="period" label="配置周期" align="center" width="300" />
+            <el-table-column prop="cover" label="启动画面" align="center">
+              <template slot-scope="scope">
+                <el-image class="cover_img" :src="scope.row.cover" />
+              </template>
+            </el-table-column>
+            <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="info" icon="el-icon-info" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 编辑设备 -->
+    <div class="layer">
+      <el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="600px">
+        <el-form ref="form" inline="true" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="开机时间" prop="uptime">
+            <span>设置时间：</span>
+            <el-radio-group v-model="form.time">
+              <el-radio label="每天" />
+              <el-radio label="每周" />
+            </el-radio-group>
+            <!-- <el-form-item label="活动性质" prop="type">
+              <el-checkbox-group v-model="ruleForm.type">
+                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                <el-checkbox label="地推活动" name="type" />
+                <el-checkbox label="线下主题活动" name="type" />
+                <el-checkbox label="单纯品牌曝光" name="type" />
+              </el-checkbox-group>
+            </el-form-item> -->
+            <el-checkbox-group v-model="form.week">
+              <el-checkbox label="周一" name="week" />
+              <el-checkbox label="周二" name="week" />
+              <el-checkbox label="周三" name="week" />
+              <el-checkbox label="周四" name="week" />
+              <el-checkbox label="周五" name="week" />
+              <el-checkbox label="周六" name="week" />
+              <el-checkbox label="周日" name="week" />
+            </el-checkbox-group>
+          </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>
+          </el-form-item> -->
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addFromVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import crudUser from '@/api/system/user'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+const defaultForm = {
+  time: null,
+  week: [],
+  orientation: null
+}
+export default {
+  name: 'DeviceConfig',
+  components: { rrOperation, pagination },
+  cruds() {
+    return CRUD({
+      title: '用户',
+      url: 'api/users',
+      crudMethod: { ...crudUser }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      addFromVisible: false,
+      tableData: [
+        {
+          id: 'XXXXXXXXX',
+          account: '13476289682',
+          name: 'GCXR2',
+          orientation: '竖屏',
+          period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00',
+          cover: 'https://qiniu.aiyxlib.com/1636076789085.png',
+          date: '2021-09-14 16:35'
+        }
+      ],
+      stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
+      deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
+      rules: {
+        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
+        orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // 编辑
+    edit(index, row) {
+      this.addFromVisible = true
+      this.form.account = row.account
+      this.form.name = row.name
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.col_flex {
+  display: flex;
+}
+.setting_btn{
+  margin-right: 10px;
+}
+.cover_img{
+  width: 65px;
+}
+
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 8f79ed1..8f04ddb 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -25,11 +25,11 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             style="width: 360px;"
-          ></el-date-picker>
+          />
         </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>
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -48,70 +48,72 @@
         <el-table-column property="date" label="操作时间" />
       </el-table>
     </el-dialog>
-    <!--表格渲染-->
-    <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">
-          <el-switch
-            v-model="scope.row.enabled"
-            :disabled="scope.row.id === 1"
-            active-color="#409EFF"
-            inactive-color="#F56C6C"
-            @change="changeEnabled(scope.row, scope.row.enabled)"
-          />
-        </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-switch>
-          <el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
-          <el-button type="info" icon="el-icon-info" />
-        </template>
-      </el-table-column>
-    </el-table>
+    <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-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import crudDept from '@/api/system/dept';
-import Treeselect from '@riophae/vue-treeselect';
-import '@riophae/vue-treeselect/dist/vue-treeselect.css';
-import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
-import CRUD, { presenter, header, form, crud } from '@crud/crud';
-import rrOperation from '@crud/RR.operation';
-import crudOperation from '@crud/CRUD.operation';
-import udOperation from '@crud/UD.operation';
-import DateRangePicker from '@/components/DateRangePicker';
+import crudDept from '@/api/system/dept'
+// import Treeselect from '@riophae/vue-treeselect';
+// import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+// import crudOperation from '@crud/CRUD.operation';
+// import udOperation from '@crud/UD.operation';
+// import DateRangePicker from '@/components/DateRangePicker'
+import pagination from '@crud/Pagination'
 
 const defaultForm = {
   id: null,
   name: null,
   versions: null,
   indate: []
-};
+}
 export default {
   name: 'Dept',
-  components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
+  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()],
   // 设置数据字典
@@ -126,7 +128,7 @@ export default {
         ],
         indate: [
           { type: 'datetimerange', required: true, message: '请选择时间范围', trigger: 'change' }
-        ],
+        ]
       },
       addDialogVisible: false,
       recordVisible: false,
@@ -138,7 +140,7 @@ export default {
           number: '2',
           user_name: '某某某',
           user_account: '15100701025',
-          enabled: '已配置',
+          enabled: true,
           off: true,
           indate: '2021-2-2 14:00至2022-4-6 18:00'
         }
@@ -162,16 +164,19 @@ export default {
           type: 'editor',
           date: '2021-1-1 14:00'
         }
-      ],
-      permission: {
-        add: ['admin', 'dept:add'],
-        edit: ['admin', 'dept:edit'],
-        del: ['admin', 'dept:del']
-      },
-      enabledTypeOptions: [{ key: 'true', display_name: '正常' }, { key: 'false', display_name: '禁用' }]
-    };
+      ]
+      // permission: {
+      //   add: ['admin', 'dept:add'],
+      //   edit: ['admin', 'dept:edit'],
+      //   del: ['admin', 'dept:del']
+      // },
+      // enabledTypeOptions: [{ key: 'true', display_name: '正常' }, { key: 'false', display_name: '禁用' }]
+    }
   },
   methods: {
+    handleRecord(index, row) {
+      this.recordVisible = true
+    },
     getDeptDatas(tree, treeNode, resolve) {
       // const params = { pid: tree.id };
       // setTimeout(() => {
@@ -274,26 +279,12 @@ export default {
     //     });
     // },
     checkboxT(row, rowIndex) {
-      return row.id !== 1;
+      return row.id !== 1
     }
   }
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-::v-deep .vue-treeselect__control,
-::v-deep .vue-treeselect__placeholder,
-::v-deep .vue-treeselect__single-value {
-  height: 30px;
-  line-height: 30px;
 }
-</style>
+</script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-// start
-.page_add {
-  text-align: right;
-}
-// end
 .init_password {
   font-size: 12px;
   margin-left: 10px;
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 110077e..7f740dc 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -2,168 +2,84 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <div v-if="crud.props.searchToggle">
-        <!-- 搜索 -->
-        <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" />
-        <rrOperation />
-      </div>
-      <crudOperation :permission="permission" />
+      <el-row type="flex">
+        <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" />
+          <date-range-picker v-model="query.createTime" class="date-item" />
+          <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>
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
+    <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-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
-            <el-radio-button label="0">目录</el-radio-button>
-            <el-radio-button label="1">菜单</el-radio-button>
-            <el-radio-button label="2">按钮</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
-          <el-popover
-            placement="bottom-start"
-            width="450"
-            trigger="click"
-            @show="$refs['iconSelect'].reset()"
-          >
-            <IconSelect ref="iconSelect" @selected="selected" />
-            <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-            </el-input>
-          </el-popover>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iframe">
-          <el-radio-group v-model="form.iframe" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
-          <el-radio-group v-model="form.cache" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
-          <el-radio-group v-model="form.hidden" size="mini">
-            <el-radio-button label="false">是</el-radio-button>
-            <el-radio-button label="true">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
-          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
-        </el-form-item>
-        <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
-          <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
+        <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>
         </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
+        <el-form-item label="新增权限" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="新增权限" style="width: 260px;" />
         </el-form-item>
-        <el-form-item label="菜单排序" prop="menuSort">
-          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
-        </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件名称" prop="componentName">
-          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
-        </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件路径" prop="component">
-          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
-        </el-form-item>
-        <el-form-item label="上级类目" prop="pid">
-          <treeselect
-            v-model="form.pid"
-            :options="menus"
-            :load-options="loadMenus"
-            style="width: 450px;"
-            placeholder="选择上级类目"
-          />
+        <el-form-item label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 260px;" />
         </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" @click="crud.submitCU">添加</el-button>
+        <el-button type="text" @click="crud.cancelCU">关闭</el-button>
       </div>
     </el-dialog>
-    <!--表格渲染-->
-    <el-table
-      ref="table"
-      v-loading="crud.loading"
-      lazy
-      :load="getMenus"
-      :data="crud.data"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      row-key="id"
-      @select="crud.selectChange"
-      @select-all="crud.selectAllChange"
-      @selection-change="crud.selectionChangeHandler"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
-      <el-table-column prop="icon" label="图标" align="center" width="60px">
-        <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="menuSort" align="center" label="排序">
-        <template slot-scope="scope">
-          {{ scope.row.menuSort }}
-        </template>
-      </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
-      <el-table-column prop="iframe" label="外链" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.iframe">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="cache" label="缓存" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.cache">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="hidden" label="可见" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.hidden">否</span>
-          <span v-else>是</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="135px" />
-      <el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
-        <template slot-scope="scope">
-          <udOperation
-            :data="scope.row"
-            :permission="permission"
-            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
-          />
-        </template>
-      </el-table-column>
-    </el-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-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import crudMenu from '@/api/system/menu'
-import IconSelect from '@/components/IconSelect'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+// import IconSelect from '@/components/IconSelect'
+// import Treeselect from '@riophae/vue-treeselect'
+// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
-import udOperation from '@crud/UD.operation'
+// import crudOperation from '@crud/CRUD.operation'
+// import udOperation from '@crud/UD.operation'
 import DateRangePicker from '@/components/DateRangePicker'
 
 // crud交由presenter持有
-const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }
+const defaultForm = {
+  id: null,
+  title: null,
+  path: null,
+  permission: null
+}
 export default {
   name: 'Menu',
-  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
+  components: { rrOperation, DateRangePicker },
   cruds() {
     return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
   },
@@ -171,18 +87,59 @@ export default {
   data() {
     return {
       menus: [],
+      addDialogVisible: false,
+      tableData: [
+        {
+          id: 1,
+          title: '素材库',
+          permission: '查看',
+          operationName: '某某某',
+          operationTime: '2022-2-9 14：00'
+        }
+      ],
+      options: [
+        {
+          value: '选项1',
+          label: '素材库'
+        },
+        {
+          value: '选项2',
+          label: '上屏发布'
+        },
+        {
+          value: '选项3',
+          label: '紧急通知'
+        },
+        {
+          value: '选项4',
+          label: '设备列表'
+        },
+        {
+          value: '选项5',
+          label: '开关机'
+        },
+        {
+          value: '选项6',
+          label: '权限管理'
+        },
+        {
+          value: '选项7',
+          label: '角色管理'
+        },
+        {
+          value: '选项8',
+          label: '主题模板'
+        }
+      ],
       permission: {
         add: ['admin', 'menu:add'],
         edit: ['admin', 'menu:edit'],
         del: ['admin', 'menu:del']
       },
       rules: {
-        title: [
-          { required: true, message: '请输入标题', trigger: 'blur' }
-        ],
-        path: [
-          { required: true, message: '请输入地址', trigger: 'blur' }
-        ]
+        title: [{ required: true, message: '请选择所属菜单', trigger: 'change' }],
+        path: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+        permission: [{ required: true, message: '请输入权限', trigger: 'blur' }]
       }
     }
   },
@@ -241,12 +198,5 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
-  }
- ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
-    height: 30px;
-    line-height: 30px;
-  }
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 3198ce1..1a5d960 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -2,22 +2,24 @@
   <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" />
-        <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-row type="flex">
+        <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" />
+          <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-row>
     </div>
     <!-- 角色新增-表单 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="roleFormVisible" :title="crud.status.title" width="600px" top="20px">
+    <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" :label="item.name" :key="index" class="press_form">
-          <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.isCheck" @change="handleCheckAllChange(index, $event)">全选</el-checkbox>
-          <div>
-            <el-checkbox v-for="(items, i) in item.children" v-model="items.isCheck" :label="items.name" :key="i" @change="handleCheckedCitiesChange(index, items.Key, $event)">
+        <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>
           </div>
@@ -76,11 +78,11 @@
 </template>
 
 <script>
-import crudRoles from '@/api/system/role';
-import CRUD, { presenter, header, form, crud } from '@crud/crud';
-import rrOperation from '@crud/RR.operation';
-import pagination from '@crud/Pagination';
-import roleTree from './role.json';
+import crudRoles from '@/api/system/role'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+import roleTree from './role.json'
 
 const defaultForm = {
   id: null,
@@ -89,12 +91,12 @@ const defaultForm = {
   library: [],
   publish: [],
   description: null
-};
+}
 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() {
@@ -139,52 +141,52 @@ export default {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
         permission: [{ required: true, message: '请输入权限', trigger: 'blur' }]
       }
-    };
+    }
   },
   created() {
-    this.roleTree = roleTree;
+    this.roleTree = roleTree
   },
   methods: {
     // 全选反选的多选框
     handleCheckAllChange(index, e) {
-      this.roleTree[index].isCheck = e;
-      if (e == false) this.roleTree[index].isIndeterminate = false;
-      let childrenArray = this.roleTree[index].children;
-      if (childrenArray) for (let i = 0, len = childrenArray.length; i < len; i++) childrenArray[i].isCheck = e;
+      this.roleTree[index].isCheck = e
+      if (e == false) this.roleTree[index].isIndeterminate = false
+      const childrenArray = this.roleTree[index].children
+      if (childrenArray) for (let i = 0, len = childrenArray.length; i < len; i++) childrenArray[i].isCheck = e
     },
     handleCheckedCitiesChange(index, Key, e) {
-      let childrenArray = this.roleTree[index].children;
-      let tickCount = 0,
-        unTickCount = 0,
-        len = childrenArray.length;
+      const childrenArray = this.roleTree[index].children
+      let tickCount = 0
+      let unTickCount = 0
+      const len = childrenArray.length
       for (let i = 0; i < len; i++) {
-        if (Key == childrenArray[i].Key) childrenArray[i].isCheck = e;
-        if (childrenArray[i].isCheck == true) tickCount++;
-        if (childrenArray[i].isCheck == false) unTickCount++;
+        if (Key == childrenArray[i].Key) childrenArray[i].isCheck = e
+        if (childrenArray[i].isCheck == true) tickCount++
+        if (childrenArray[i].isCheck == false) unTickCount++
       }
       if (tickCount == len) {
-        //二级全勾选
-        this.roleTree[index].isCheck = true;
-        this.roleTree[index].isIndeterminate = false;
+        // 二级全勾选
+        this.roleTree[index].isCheck = true
+        this.roleTree[index].isIndeterminate = false
       } else if (unTickCount == len) {
-        //二级全不勾选
-        this.roleTree[index].isCheck = false;
-        this.roleTree[index].isIndeterminate = false;
+        // 二级全不勾选
+        this.roleTree[index].isCheck = false
+        this.roleTree[index].isIndeterminate = false
       } else {
-        this.roleTree[index].isCheck = false;
-        this.roleTree[index].isIndeterminate = true;
+        this.roleTree[index].isCheck = false
+        this.roleTree[index].isIndeterminate = true
       }
     },
     checkboxT(row) {
-      return row.level >= this.level;
+      return row.level >= this.level
     },
     editFormData(index, row) {
-      this.roleFormVisible = true;
-      this.form.roleName = row.roleName;
-      this.form.description = row.description;
+      this.roleFormVisible = true
+      this.form.roleName = row.roleName
+      this.form.description = row.description
     },
     handleRecord(index, row) {
-      this.recordVisible = true;
+      this.recordVisible = true
       // switch (that.recordData[i].operateType) {
       //   case 'Edit':
       //     that.recordData[i].operateType = '编辑'
@@ -217,7 +219,7 @@ export default {
       // }
     }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
@@ -230,14 +232,7 @@ export default {
   border: 0;
   padding: 0;
 }
-.head-container {
-  height: 44px;
-}
-// start
-.page_add {
-  text-align: right;
-}
-// end
+
 .el-tag {
   margin: 5px 10px 5px 0;
 }
@@ -250,4 +245,11 @@ export default {
 .press_list {
   margin-right: 10px;
 }
+.check_list {
+  width: 430px;
+}
+.check_all,
+.check_list .el-checkbox{
+  margin-right: 10px;
+}
 </style>
diff --git a/src/views/system/role/role.json b/src/views/system/role/role.json
index 5ff3a9b..538e58d 100644
--- a/src/views/system/role/role.json
+++ b/src/views/system/role/role.json
@@ -10,49 +10,39 @@
         "Key": "1",
         "name": "编辑"
       },
-      {
-        "isCheck": true,
-        "Key": "2",
-        "name": "查看"
-      },
       {
         "isCheck": false,
-        "Key": "3",
+        "Key": "2",
         "name": "删除"
       },
       {
         "isCheck": false,
-        "Key": "4",
+        "Key": "3",
         "name": "上传"
       },
       {
         "isCheck": false,
-        "Key": "5",
+        "Key": "4",
         "name": "下载"
       }
     ]
   },
   {
-    "name": "内容发布",
+    "name": "上屏发布",
     "children": [
       {
         "isCheck": false,
-        "Key": "6",
+        "Key": "5",
         "name": "编辑"
       },
       {
         "isCheck": false,
-        "Key": "7",
-        "name": "查看"
-      },
-      {
-        "isCheck": false,
-        "Key": "8",
+        "Key": "6",
         "name": "删除"
       },
       {
         "isCheck": false,
-        "Key": "9",
+        "Key": "7",
         "name": "添加"
       }
     ]
@@ -62,13 +52,28 @@
     "children": [
       {
         "isCheck": false,
-        "Key": "10",
+        "Key": "8",
         "name": "编辑"
       },
+      {
+        "isCheck": false,
+        "Key": "9",
+        "name": "删除"
+      },
+      {
+        "isCheck": false,
+        "Key": "10",
+        "name": "添加"
+      }
+    ]
+  },
+  {
+    "name": "设备列表",
+    "children": [
       {
         "isCheck": false,
         "Key": "11",
-        "name": "查看"
+        "name": "编辑"
       },
       {
         "isCheck": false,
@@ -83,27 +88,27 @@
     ]
   },
   {
-    "name": "播放列表",
+    "name": "开关机",
     "children": [
       {
         "isCheck": false,
         "Key": "14",
-        "name": "查看"
-      }
-    ]
-  },
-  {
-    "name": "主题模板",
-    "children": [
+        "name": "编辑"
+      },
       {
         "isCheck": false,
         "Key": "15",
-        "name": "查看"
+        "name": "删除"
+      },
+      {
+        "isCheck": false,
+        "Key": "16",
+        "name": "添加"
       }
     ]
   },
   {
-    "name": "设备列表",
+    "name": "权限管理",
     "children": [
       {
         "isCheck": false,
@@ -113,92 +118,77 @@
       {
         "isCheck": false,
         "Key": "18",
-        "name": "查看"
-      },
-      {
-        "isCheck": false,
-        "Key": "19",
         "name": "删除"
       },
       {
         "isCheck": false,
-        "Key": "20",
+        "Key": "19",
         "name": "添加"
       }
     ]
   },
   {
-    "name": "开关机",
+    "name": "角色管理",
     "children": [
       {
         "isCheck": false,
-        "Key": "21",
+        "Key": "20",
         "name": "编辑"
       },
       {
         "isCheck": false,
-        "Key": "22",
-        "name": "查看"
-      },
-      {
-        "isCheck": false,
-        "Key": "23",
+        "Key": "21",
         "name": "删除"
       },
       {
         "isCheck": false,
-        "Key": "24",
+        "Key": "22",
         "name": "添加"
       }
     ]
   },
   {
-    "name": "权限管理",
+    "name": "主题模板",
     "children": [
       {
         "isCheck": false,
-        "Key": "25",
-        "name": "编辑"
+        "Key": "23",
+        "name": "查看"
       },
       {
         "isCheck": false,
-        "Key": "26",
-        "name": "查看"
+        "Key": "24",
+        "name": "为你推荐"
       },
       {
         "isCheck": false,
-        "Key": "27",
-        "name": "删除"
+        "Key": "25",
+        "name": "人工智能"
       },
       {
         "isCheck": false,
-        "Key": "28",
-        "name": "添加"
-      }
-    ]
-  },
-  {
-    "name": "角色管理",
-    "children": [
+        "Key": "26",
+        "name": "党建文化"
+      },
       {
         "isCheck": false,
-        "Key": "29",
-        "name": "编辑"
+        "Key": "27",
+        "name": "节日节气"
       },
       {
         "isCheck": false,
-        "Key": "30",
-        "name": "查看"
+        "Key": "28",
+        "name": "艺术鉴赏"
       },
       {
         "isCheck": false,
-        "Key": "31",
-        "name": "删除"
+        "Key": "29",
+        "name": "摄影"
       },
       {
         "isCheck": false,
-        "Key": "32",
-        "name": "添加"
+        "Key": "30",
+        "name": "书法"
       }
     ]
   }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 481990b..d5452b6 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,163 +1,166 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <!--用户数据-->
+    <!--工具栏-->
+    <div class="head-container">
+      <el-row type="flex">
+        <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>
+    </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-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
+        <el-form-item
+          label="登录账号"
+          prop="account"
+          :rules="[
+            { required: true, message: '请输入登录账号', trigger: 'blur' }
+          ]"
+        >
+          <el-input v-model="form.account" style="width: 200px" />
+        </el-form-item>
+        <el-form-item
+          label="管理员名称"
+          prop="nickName"
+          :rules="[
+            { required: true, message: '请输入管理员名称', trigger: 'blur' },
+            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+          ]"
+        >
+          <el-input v-model="form.nickName" style="width: 200px" />
+        </el-form-item>
+        <el-form-item
+          label="管理员角色"
+          prop="roles"
+          :rules="[
+            { required: true, message: '请选择管理员角色', trigger: 'change' }
+          ]"
+        >
+          <el-select v-model="form.roles" placeholder="请选择管理员角色">
+            <el-option label="机构超级管理员" value="1" />
+            <el-option label="普通用户" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="管理员状态"
+          prop="enabled"
+          :rules="[
+            { required: true, trigger: 'change', message: '请选择管理员状态' }
+          ]"
+        >
+          <el-select v-model="form.enabled" placeholder="请选择管理员状态">
+            <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>
+      </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-form-item label="管理员名称" prop="nickName">
+          <el-input v-model="editForm.nickName" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="管理员角色" prop="roles">
+          <el-input v-model="editForm.roles" disabled style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="机构名称" prop="orgName">
+          <el-input v-model="editForm.orgName" disabled style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="更改手机号" prop="phone">
+          <el-input v-model.number="editForm.phone" style="width: 200px" />
+        </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>
+        <el-form-item label="登录密码" prop="password">
+          <el-input v-model="editForm.password" style="width: 200px" />
+        </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>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-row :gutter="15">
       <el-col>
-        <!--工具栏-->
-        <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>
-        </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-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
-            <el-form-item
-              label="登录账号"
-              prop="account"
-              :rules="[
-                { required: true, message: '请输入登录账号', trigger: 'blur' }
-              ]"
+        <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"
             >
-              <el-input v-model="form.account" style="width: 200px" />
-            </el-form-item>
-            <el-form-item
-              label="管理员名称"
-              prop="nickName"
-              :rules="[
-                { required: true, message: '请输入管理员名称', trigger: 'blur' },
-                { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-              ]"
-            >
-              <el-input v-model="form.nickName" style="width: 200px" />
-            </el-form-item>
-            <el-form-item
-              label="管理员角色"
-              prop="roles"
-              :rules="[
-                { required: true, message: '请选择管理员角色', trigger: 'change' }
-              ]"
-            >
-              <el-select v-model="form.roles" placeholder="请选择管理员角色">
-                <el-option label="机构超级管理员" value="1" />
-                <el-option label="普通用户" value="2" />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              label="管理员状态"
-              prop="enabled"
-              :rules="[
-                { required: true, trigger: 'change', message: '请选择管理员状态' }
-              ]"
-            >
-              <el-select v-model="form.enabled" placeholder="请选择管理员状态">
-                <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>
-          </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-form-item label="管理员名称" prop="nickName">
-              <el-input v-model="editForm.nickName" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="管理员角色" prop="roles">
-              <el-input v-model="editForm.roles" disabled style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="机构名称" prop="orgName">
-              <el-input v-model="editForm.orgName" disabled style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="更改手机号" prop="phone">
-              <el-input v-model.number="editForm.phone" style="width: 200px" />
-            </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>
-            <el-form-item label="登录密码" prop="password">
-              <el-input v-model="editForm.password" style="width: 200px" />
-            </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>
-          </div>
-        </el-dialog>
-        <!--表格渲染-->
-        <!-- :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
+              <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-dialog></el-col>
+                <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>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -338,11 +341,6 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  // start
-  .page_add{
-    text-align: right;
-  }
-  // end
   .el-dialog__header{
     background-color: #f1f1f1;
   }