From 367e3803c247ae2c01c16c5c91fd9438514ec694 Mon Sep 17 00:00:00 2001
From: pumelotea <zf_722@yeah.net>
Date: Sat, 12 Mar 2022 19:49:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20user=20=E3=80=81role=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HbAdminUserCard.vue |  15 +-
 src/mock/routerData.js             |  50 ++++--
 src/views/base-list/index.vue      |   4 +-
 src/views/card-list/index.vue      |  13 ++
 src/views/role/index.vue           | 236 +++++++++++++++++++++++++++++
 src/views/user/index.vue           | 205 +++++++++++++++++++++++++
 6 files changed, 506 insertions(+), 17 deletions(-)
 create mode 100644 src/views/card-list/index.vue
 create mode 100644 src/views/role/index.vue
 create mode 100644 src/views/user/index.vue

diff --git a/src/components/HbAdminUserCard.vue b/src/components/HbAdminUserCard.vue
index b6315c6..e44302f 100644
--- a/src/components/HbAdminUserCard.vue
+++ b/src/components/HbAdminUserCard.vue
@@ -1,7 +1,7 @@
 <script setup>
-import {NAvatar,NLayout,NLayoutHeader,NIcon,NButton} from "naive-ui";
+import {NAvatar,NLayout,NLayoutHeader,NIcon,NButton,NBadge,NSpace} from "naive-ui";
 import {
-  SettingsOutline
+  EarthOutline
 } from "@vicons/ionicons5"
 import {isMenuCollapsed} from "../global/config";
 </script>
@@ -12,10 +12,13 @@ import {isMenuCollapsed} from "../global/config";
       <div class="hb-admin-user-card-com">
         <n-avatar size="large" round src="https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG"/>
         <span class="nickname" v-if="!isMenuCollapsed">千阳</span>
-        <span style="flex: 1" v-if="!isMenuCollapsed"></span>
-        <n-button text>
-          <n-icon size="24" :component="SettingsOutline" v-if="!isMenuCollapsed"></n-icon>
-        </n-button>
+        <span style="flex: 1;" v-if="!isMenuCollapsed"></span>
+        <n-space align="center" justify="end">
+          <n-badge type="success" :value="20" processing></n-badge>
+          <n-button round text style="align-items: center;display: flex">
+            <n-icon size="24" :component="EarthOutline" v-if="!isMenuCollapsed"></n-icon>
+          </n-button>
+        </n-space>
       </div>
     </n-layout-header>
   </n-layout>
diff --git a/src/mock/routerData.js b/src/mock/routerData.js
index bedb31f..6995192 100644
--- a/src/mock/routerData.js
+++ b/src/mock/routerData.js
@@ -9,15 +9,6 @@ const routerData = [
     type: 'menu',
     children: []
   },
-  {
-    name: '权限',
-    path: '/permission',
-    view: '/permission/index.vue',
-    isRouter: true,
-    isKeepalive: true,
-    type: 'menu',
-    children: []
-  },
   {
     name: '错误页面',
     path: '/error',
@@ -69,6 +60,47 @@ const routerData = [
     icon:'ri-table-line',
     children: []
   },
+  {
+    name: '系统设置',
+    path: '/setting',
+    view: '',
+    isRouter: false,
+    isKeepalive: false,
+    icon:'ri-tools-line',
+    type: 'menu',
+    children: [
+      {
+        name: '菜单设置',
+        path: '/menu',
+        view: '/permission/index.vue',
+        isRouter: true,
+        isKeepalive: false,
+        icon:'ri-menu-line',
+        type: 'menu',
+        children: []
+      },
+      {
+        name: '用户管理',
+        path: '/user',
+        view: '/user/index.vue',
+        isRouter: true,
+        isKeepalive: false,
+        icon:'ri-user-line',
+        type: 'menu',
+        children: []
+      },
+      {
+        name: '角色管理',
+        path: '/role',
+        view: '/role/index.vue',
+        isRouter: true,
+        isKeepalive: false,
+        icon:'ri-file-user-line',
+        type: 'menu',
+        children: []
+      },
+    ]
+  },
 ]
 
 export default routerData
diff --git a/src/views/base-list/index.vue b/src/views/base-list/index.vue
index fee289e..ff8f114 100644
--- a/src/views/base-list/index.vue
+++ b/src/views/base-list/index.vue
@@ -8,7 +8,7 @@ import {
 } from "naive-ui";
 import {h, onMounted, reactive, ref} from "vue";
 import {
-  AddSharp, TrashSharp, RefreshSharp, SearchSharp,DocumentOutline,PencilSharp
+  AddSharp, TrashSharp, RefreshSharp, SearchSharp,DocumentOutline,PencilSharp,CreateOutline
 } from "@vicons/ionicons5"
 
 
@@ -74,7 +74,7 @@ const columns = [
             tertiary: true,
             size: "small",
             onClick: () => openDialog(row)
-          }, {default: () => "编辑", icon: () => h(PencilSharp)}),
+          }, {default: () => "编辑", icon: () => h(CreateOutline)}),
           h(NPopconfirm, {
             onPositiveClick: () => handlePositiveClick(row),
             onNegativeClick: () => handleNegativeClick(row),
diff --git a/src/views/card-list/index.vue b/src/views/card-list/index.vue
new file mode 100644
index 0000000..54b19c1
--- /dev/null
+++ b/src/views/card-list/index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
new file mode 100644
index 0000000..3bfadc3
--- /dev/null
+++ b/src/views/role/index.vue
@@ -0,0 +1,236 @@
+<script setup>
+import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import {
+  NLayout, NLayoutHeader, NLayoutContent, NDataTable,
+  NGrid, NGridItem, NDatePicker, NInput, NSelect, NButton, NSpace, NIcon, useMessage,
+  NPopconfirm, NAlert,NP,
+} from "naive-ui";
+import {h, onMounted, reactive, ref} from "vue";
+import {
+  AddSharp, TrashSharp, RefreshSharp, SearchSharp,DocumentOutline,PencilSharp,CreateOutline
+} from "@vicons/ionicons5"
+
+
+const message = useMessage()
+
+
+function handlePositiveClick(row) {
+  message.info("你点击了确定");
+}
+
+function handleNegativeClick(row) {
+  message.info("你点击了取消");
+}
+
+const columns = [
+  {
+    type: 'selection',
+    disabled(row, index) {
+      return row.name === 'Edward King 3'
+    }
+  },
+  {
+    title: '角色',
+    key: 'role'
+  },
+  {
+    title: '描述',
+    key: 'desc',
+  },
+  {
+    title: '备注',
+    key: 'remark',
+  },
+  {
+    title: "操作",
+    key: "actions",
+    width: "270",
+    render(row) {
+      return h(NSpace, null, {
+        default: () => [
+          h(NButton, {
+            tertiary: true,
+            size: "small",
+          }, {default: () => "详情", icon: () => h(DocumentOutline)}),
+          h(NButton, {
+            tertiary: true,
+            size: "small",
+          }, {default: () => "编辑", icon: () => h(CreateOutline)}),
+          h(NPopconfirm, {
+            onPositiveClick: () => handlePositiveClick(row),
+            onNegativeClick: () => handleNegativeClick(row),
+          }, {
+            default: () => "你确定以及肯定要删除这条数据吗？",
+            trigger: () => h(NButton, {
+              tertiary: true,
+              size: "small",
+              type: 'error',
+            }, {default: () => "删除", icon: () => h(TrashSharp)})
+          })
+        ]
+      })
+    }
+  }
+]
+
+const checkedRowKeys = ref([])
+
+const data = Array.apply(null, {length: 200}).map((_, index) => ({
+  key: index,
+  role: `角色 - ${index}`,
+  desc: '我是描述',
+  remark: '备注' + index,
+}))
+
+const pagination = reactive({
+  pageSize: 20,
+  showQuickJumper: true,
+  showSizePicker: true,
+  pageSizes: [20, 50, 100],
+  prefix({itemCount}) {
+    return `总数 ${itemCount}`
+  }
+})
+
+const options = ref([
+  {
+    label: "Everybody's Got Something to Hide Except Me and My Monkey",
+    value: 'song0',
+    disabled: true
+  },
+  {
+    label: 'Drive My Car',
+    value: 'song1'
+  },
+  {
+    label: 'Norwegian Wood',
+    value: 'song2'
+  },
+  {
+    label: "You Won't See",
+    value: 'song3',
+    disabled: true
+  },
+  {
+    label: 'Nowhere Man',
+    value: 'song4'
+  },
+  {
+    label: 'Think For Yourself',
+    value: 'song5'
+  },
+  {
+    label: 'The Word',
+    value: 'song6'
+  },
+  {
+    label: 'Michelle',
+    value: 'song7',
+    disabled: true
+  },
+  {
+    label: 'What goes on',
+    value: 'song8'
+  },
+  {
+    label: 'Girl',
+    value: 'song9'
+  },
+  {
+    label: "I'm looking through you",
+    value: 'song10'
+  },
+  {
+    label: 'In My Life',
+    value: 'song11'
+  },
+  {
+    label: 'Wait',
+    value: 'song12'
+  }
+])
+
+</script>
+
+<template>
+  <hb-admin-page-layout>
+    <n-layout style="height: 100%;" content-style="display:flex;flex-direction: column">
+      <n-layout-header>
+        <n-grid x-gap="12" :cols="4" style="padding: 5px;box-sizing: border-box">
+          <n-grid-item>
+            <n-input>
+              <template #prefix>
+                描述
+              </template>
+            </n-input>
+          </n-grid-item>
+          <n-grid-item>
+            <n-input>
+              <template #prefix>
+                角色
+              </template>
+            </n-input>
+          </n-grid-item>
+        </n-grid>
+        <n-grid x-gap="12" :cols="2" style="padding: 5px;box-sizing: border-box">
+          <n-grid-item>
+            <n-space>
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="AddSharp"></n-icon>
+                </template>
+                新增
+              </n-button>
+              <n-button type="error">
+                <template #icon>
+                  <n-icon :component="TrashSharp"></n-icon>
+                </template>
+                删除
+              </n-button>
+            </n-space>
+          </n-grid-item>
+          <n-grid-item>
+            <n-space justify="end">
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="RefreshSharp"></n-icon>
+                </template>
+                刷新数据
+              </n-button>
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="SearchSharp"></n-icon>
+                </template>
+                查询
+              </n-button>
+              <n-button>重置</n-button>
+            </n-space>
+          </n-grid-item>
+        </n-grid>
+        <n-grid x-gap="12" :cols="1" style="padding: 5px;box-sizing: border-box" v-if="checkedRowKeys.length>0">
+          <n-grid-item>
+            <n-alert type="info">
+              你选中了 {{ checkedRowKeys.length }} 行
+            </n-alert>
+          </n-grid-item>
+        </n-grid>
+      </n-layout-header>
+      <n-layout-content>
+        <n-data-table
+            v-model:checked-row-keys="checkedRowKeys"
+            flex-height
+            :columns="columns"
+            striped
+            :data="data"
+            style="height: 100%;padding: 5px;box-sizing: border-box"
+            :pagination="pagination"
+        />
+
+      </n-layout-content>
+    </n-layout>
+  </hb-admin-page-layout>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
new file mode 100644
index 0000000..dd013b8
--- /dev/null
+++ b/src/views/user/index.vue
@@ -0,0 +1,205 @@
+<script setup>
+import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import {
+  NLayout, NLayoutHeader, NLayoutContent, NDataTable,
+  NGrid, NGridItem, NDatePicker, NInput, NSelect, NButton, NSpace, NIcon, useMessage,
+  NPopconfirm, NAlert,NP,
+} from "naive-ui";
+import {h, onMounted, reactive, ref} from "vue";
+import {
+  AddSharp, TrashSharp, RefreshSharp, SearchSharp,DocumentOutline,PencilSharp,CreateOutline
+} from "@vicons/ionicons5"
+
+
+const message = useMessage()
+
+
+function handlePositiveClick(row) {
+  message.info("你点击了确定");
+}
+
+function handleNegativeClick(row) {
+  message.info("你点击了取消");
+}
+
+const columns = [
+  {
+    type: 'selection',
+    disabled(row, index) {
+      return row.name === 'Edward King 3'
+    }
+  },
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '年龄',
+    key: 'age',
+    sortOrder: true,
+    sorter(rowA, rowB) {
+      return rowA.age - rowB.age
+    }
+  },
+  {
+    title: '身高',
+    key: 'high',
+    sortOrder: true,
+    sorter(rowA, rowB) {
+      return rowA.high - rowB.high
+    }
+  },
+  {
+    title: '手机',
+    key: 'phone'
+  },
+  {
+    title: '体重',
+    key: 'weight'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  },
+  {
+    title: "操作",
+    key: "actions",
+    width: "270",
+    render(row) {
+      return h(NSpace, null, {
+        default: () => [
+          h(NButton, {
+            tertiary: true,
+            size: "small",
+          }, {default: () => "详情", icon: () => h(DocumentOutline)}),
+          h(NButton, {
+            tertiary: true,
+            size: "small",
+          }, {default: () => "编辑", icon: () => h(CreateOutline)}),
+          h(NPopconfirm, {
+            onPositiveClick: () => handlePositiveClick(row),
+            onNegativeClick: () => handleNegativeClick(row),
+          }, {
+            default: () => "你确定以及肯定要删除这条数据吗？",
+            trigger: () => h(NButton, {
+              tertiary: true,
+              size: "small",
+              type: 'error',
+            }, {default: () => "删除", icon: () => h(TrashSharp)})
+          })
+        ]
+      })
+    }
+  }
+]
+
+const checkedRowKeys = ref([])
+
+const data = Array.apply(null, {length: 200}).map((_, index) => ({
+  key: index,
+  name: `Edward King ${index}`,
+  age: index,
+  phone: '18888888888',
+  high: 150 + index,
+  weight: '55kg',
+  address: `London, Park Lane no. ${index}`
+}))
+
+const pagination = reactive({
+  pageSize: 20,
+  showQuickJumper: true,
+  showSizePicker: true,
+  pageSizes: [20, 50, 100],
+  prefix({itemCount}) {
+    return `总数 ${itemCount}`
+  }
+})
+
+</script>
+
+<template>
+  <hb-admin-page-layout>
+    <n-layout style="height: 100%;" content-style="display:flex;flex-direction: column">
+      <n-layout-header>
+        <n-grid x-gap="12" :cols="4" style="padding: 5px;box-sizing: border-box">
+
+          <n-grid-item>
+            <n-input>
+              <template #prefix>
+                姓名
+              </template>
+            </n-input>
+          </n-grid-item>
+          <n-grid-item>
+            <n-input>
+              <template #prefix>
+                手机号
+              </template>
+            </n-input>
+          </n-grid-item>
+          <n-grid-item>
+            <n-date-picker clearable placeholder="创建日期"></n-date-picker>
+          </n-grid-item>
+        </n-grid>
+        <n-grid x-gap="12" :cols="2" style="padding: 5px;box-sizing: border-box">
+          <n-grid-item>
+            <n-space>
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="AddSharp"></n-icon>
+                </template>
+                新增
+              </n-button>
+              <n-button type="error">
+                <template #icon>
+                  <n-icon :component="TrashSharp"></n-icon>
+                </template>
+                删除
+              </n-button>
+            </n-space>
+          </n-grid-item>
+          <n-grid-item>
+            <n-space justify="end">
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="RefreshSharp"></n-icon>
+                </template>
+                刷新数据
+              </n-button>
+              <n-button type="info">
+                <template #icon>
+                  <n-icon :component="SearchSharp"></n-icon>
+                </template>
+                查询
+              </n-button>
+              <n-button>重置</n-button>
+            </n-space>
+          </n-grid-item>
+        </n-grid>
+        <n-grid x-gap="12" :cols="1" style="padding: 5px;box-sizing: border-box" v-if="checkedRowKeys.length>0">
+          <n-grid-item>
+            <n-alert type="info">
+              你选中了 {{ checkedRowKeys.length }} 行
+            </n-alert>
+          </n-grid-item>
+        </n-grid>
+      </n-layout-header>
+      <n-layout-content>
+        <n-data-table
+            v-model:checked-row-keys="checkedRowKeys"
+            flex-height
+            :columns="columns"
+            striped
+            :data="data"
+            style="height: 100%;padding: 5px;box-sizing: border-box"
+            :pagination="pagination"
+        />
+
+      </n-layout-content>
+    </n-layout>
+  </hb-admin-page-layout>
+</template>
+
+<style scoped>
+
+</style>