From 956aed0c2b674153106042f641011a27adcfad5f Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sat, 27 Feb 2021 12:49:48 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.02.27:=E6=96=B0=E5=A2=9E=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E3=80=81=E8=A1=A8=E6=A0=BC=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E3=80=81=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E4=BC=98=E5=8C=96=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/theme/app.scss                           | 20 -----
 src/theme/media/media.scss                   |  2 +
 src/theme/media/pagination.scss              | 15 ++++
 src/theme/media/scrollbar.scss               | 56 ++++++++++++
 src/views/system/menu/component/addMenu.vue  | 16 ++++
 src/views/system/menu/component/editMenu.vue | 16 ++++
 src/views/system/menu/index.vue              |  4 +-
 src/views/system/user/index.vue              | 91 ++++++++++++++++++--
 8 files changed, 192 insertions(+), 28 deletions(-)
 create mode 100644 src/theme/media/pagination.scss
 create mode 100644 src/theme/media/scrollbar.scss
 create mode 100644 src/views/system/menu/component/addMenu.vue
 create mode 100644 src/views/system/menu/component/editMenu.vue

diff --git a/src/theme/app.scss b/src/theme/app.scss
index e2c81d74..01465ee6 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -24,26 +24,6 @@ body,
   overflow: hidden;
 }
 
-::-webkit-scrollbar-track-piece {
-  background-color: #f8f8f8;
-}
-// 滚动条的宽度
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-// 滚动条的设置
-::-webkit-scrollbar-thumb {
-  background-color: rgba(144, 147, 153, 0.3);
-  background-clip: padding-box;
-  min-height: 28px;
-  border-radius: 5px;
-  transition: 0.3s background-color;
-}
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144, 147, 153, 0.5);
-}
-
 /* 主布局样式
 ------------------------------- */
 .layout-container {
diff --git a/src/theme/media/media.scss b/src/theme/media/media.scss
index 201f3b10..77f237e6 100644
--- a/src/theme/media/media.scss
+++ b/src/theme/media/media.scss
@@ -6,3 +6,5 @@
 @import './home.scss';
 @import './chart.scss';
 @import './form.scss';
+@import './scrollbar.scss';
+@import './pagination.scss';
diff --git a/src/theme/media/pagination.scss b/src/theme/media/pagination.scss
new file mode 100644
index 00000000..a09a9e6e
--- /dev/null
+++ b/src/theme/media/pagination.scss
@@ -0,0 +1,15 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+  .el-pager,
+  .el-pagination__jump {
+    display: none !important;
+  }
+}
+
+// 默认居中对齐
+.el-pagination {
+  text-align: center !important;
+}
diff --git a/src/theme/media/scrollbar.scss b/src/theme/media/scrollbar.scss
new file mode 100644
index 00000000..d31c7801
--- /dev/null
+++ b/src/theme/media/scrollbar.scss
@@ -0,0 +1,56 @@
+@import './index.scss';
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+  // 滚动条的宽度
+  ::-webkit-scrollbar {
+    width: 3px !important;
+    height: 3px !important;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+  }
+  // 滚动条的设置
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, 0.3);
+    background-clip: padding-box;
+    min-height: 28px;
+    border-radius: 5px;
+    transition: 0.3s background-color;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+  // element plus scrollbar
+  .el-scrollbar__bar.is-vertical {
+    width: 2px !important;
+  }
+  .el-scrollbar__bar.is-horizontal {
+    height: 2px !important;
+  }
+}
+
+/* 页面宽度大于768px
+------------------------------- */
+@media screen and (min-width: 769px) {
+  // 滚动条的宽度
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+  }
+  // 滚动条的设置
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, 0.3);
+    background-clip: padding-box;
+    min-height: 28px;
+    border-radius: 5px;
+    transition: 0.3s background-color;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+}
diff --git a/src/views/system/menu/component/addMenu.vue b/src/views/system/menu/component/addMenu.vue
new file mode 100644
index 00000000..6918ad72
--- /dev/null
+++ b/src/views/system/menu/component/addMenu.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="system-menu-add-container"></div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from "vue";
+export default {
+  name: "systemAddMenu",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/system/menu/component/editMenu.vue b/src/views/system/menu/component/editMenu.vue
new file mode 100644
index 00000000..5846c4df
--- /dev/null
+++ b/src/views/system/menu/component/editMenu.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="system-menu-edit-container"></div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from "vue";
+export default {
+  name: "systemEditMenu",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 0112ac03..b3cd7432 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -3,7 +3,7 @@
     <el-card shadow="hover">
       <el-table :data="menuTableData" stripe style="width: 100%" row-key="path"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-        <el-table-column label="菜单" show-overflow-tooltip>
+        <el-table-column label="菜单名称" show-overflow-tooltip>
           <template #default="scope">
             <i :class="scope.row.meta.icon"></i>
             <span class="ml10">{{ scope.row.meta.title }}</span>
@@ -41,7 +41,7 @@
             <span v-else class="color-info">否</span>
           </template>
         </el-table-column>
-        <el-table-column label="权限" show-overflow-tooltip>
+        <el-table-column label="权限标识" show-overflow-tooltip>
           <template #default="scope">
             <span>{{ scope.row.meta.auth }}</span>
           </template>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1d666bbf..6fc4e08d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,21 +1,100 @@
 <template>
-  <div>
-    systemUser
-    <el-input v-model="val"></el-input>
+  <div class="system-user-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-input size="small" placeholder="请输入用户名" prefix-icon="el-icon-search" style="max-width:180px;"></el-input>
+        <el-button size="small" type="primary" class="ml10">查询</el-button>
+      </div>
+      <el-table :data="tableData.data" stripe style="width: 100%">
+        <el-table-column prop="num" label="ID" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="name" label="用户名" show-overflow-tooltip></el-table-column>
+        <el-table-column label="头像" show-overflow-tooltip>
+          <template #default="scope">
+            <el-image class="system-user-photo" :src="scope.row.photo" :preview-src-list="[scope.row.photo]">
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="time" label="加入时间" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="path" label="操作" width="90">
+          <template #default="scope">
+            <el-button size="mini" type="text">修改</el-button>
+            <el-button size="mini" type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
+        :pager-count="5" :page-sizes="[10, 20, 30]" :current-page="tableData.param.pageNum" background
+        :page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
+      </el-pagination>
+    </el-card>
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive, onMounted } from "vue";
 export default {
   name: "systemUser",
   setup() {
     const state = reactive({
-      val: "",
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      for (let i = 0; i < 20; i++) {
+        state.tableData.data.push({
+          num: `00${i + 1}`,
+          name: (Math.round(Math.random() * 20901) + 19968).toString(16),
+          photo:
+            "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3142181265,1044547961&fm=11&gp=0.jpg",
+          phone: Math.floor(Math.random() * 10000000000),
+          email: `${Math.floor(Math.random() * 1000)}@qq.com`,
+          sex: i % 2 === 0 ? "男" : "女",
+          time: new Date().toLocaleDateString(),
+        });
+      }
+      state.tableData.total = state.tableData.data.length;
+    };
+    // 分页改变
+    const onHandleSizeChange = (val) => {
+      state.tableData.param.pageSize = val;
+    };
+    // 分页改变
+    const onHandleCurrentChange = (val) => {
+      state.tableData.param.pageSize = val;
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
     });
     return {
+      onHandleSizeChange,
+      onHandleCurrentChange,
       ...toRefs(state),
     };
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+.system-user-container {
+  .system-user-search {
+    text-align: right;
+  }
+  .system-user-photo {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+  }
+}
+</style>
\ No newline at end of file