From d0867daa585f19665a9a8743484b59f04582c0c4 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Sun, 28 Jan 2024 19:40:36 +0800
Subject: [PATCH] =?UTF-8?q?user=E3=80=81role=E9=A1=B5=E9=9D=A2=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json               |  46 +++++
 package.json                    |   1 +
 src/Manager/components/Role.vue | 310 +++++++++++++++++++++++++++-
 src/Manager/components/User.vue | 344 +++++++++++++++++++++++---------
 4 files changed, 609 insertions(+), 92 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc478eb..a12b3b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "ant-design-vue": "^4.1.1",
         "axios": "^1.6.7",
         "vue": "^3.3.11",
+        "vue-request": "^2.0.4",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -1774,6 +1775,51 @@
         }
       }
     },
+    "node_modules/vue-request": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vue-request/-/vue-request-2.0.4.tgz",
+      "integrity": "sha512-+Tu5rDy6ItF9UdD21Mmbjiq5Pq6NZSN9juH72hNQTMn1whHh4KZPTKWVLK2YS4nzbuEnPs+82G91AA2Fgd93mg==",
+      "dependencies": {
+        "vue-demi": "latest"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-request/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://mirrors.cloud.tencent.com/npm/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/package.json b/package.json
index f135f44..c0cd8c1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "ant-design-vue": "^4.1.1",
     "axios": "^1.6.7",
     "vue": "^3.3.11",
+    "vue-request": "^2.0.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
diff --git a/src/Manager/components/Role.vue b/src/Manager/components/Role.vue
index 5c1c218..cd5cc2a 100644
--- a/src/Manager/components/Role.vue
+++ b/src/Manager/components/Role.vue
@@ -1,3 +1,307 @@
-<template>
-角色管理
-</template>
\ No newline at end of file
+<template xmlns="">
+  <div class="main">
+    <div class="header">
+      <div class="input">
+        <a-input class="first-input" v-model:value="value1" addonBefore="角色名称" placeholder="请输入角色名称" />
+        <a-select
+            placeholder="请选择状态"
+            ref="select"
+            style="width: 120px"
+            @focus="focus"
+        >
+          <a-select-option value="启用">启用</a-select-option>
+          <a-select-option value="禁用">禁用</a-select-option>
+        </a-select>
+      </div>
+      <div class="edit">
+        <a-button class="query-button"><SearchOutlined />查询</a-button>
+        <a-button class="add-button" @click="showModal1"><PlusOutlined />新增角色</a-button>
+      </div>
+    </div>
+
+
+    <!--新增、删除角色对话框-->
+    <a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
+      <p>新增</p>
+    </a-modal>
+    <a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
+      <p>删除</p>
+    </a-modal>
+
+    <div class="table">
+      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'role_name'">
+            <a>
+              {{ record.role_name }}
+            </a>
+          </template>
+          <template v-else-if="column.key === 'role_state'">
+            <span>
+              <a-tag
+                  v-for="tag in record.role_state"
+                  :key="tag"
+                  :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+              >
+                {{ tag.toUpperCase() }}
+              </a-tag>
+            </span>
+          </template>
+          <template v-else-if="column.key === 'role_action'">
+            <span style="margin-left: 10px">
+              <a-button class="button2" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
+              <a-button class="button1" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
+            </span>
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import {createVNode, ref, computed} from 'vue';
+import {SearchOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, EditOutlined} from '@ant-design/icons-vue';
+import {Modal} from "ant-design-vue";
+import { usePagination } from 'vue-request';
+import axios from 'axios';
+const value1 = ref('');
+const value2 = ref('');
+const open1 = ref(false);
+
+
+const showModal1 = () => {
+  open1.value = true;
+};
+const handleOk = e => {
+  console.log(e);
+  open1.value = false;
+};
+
+const open2 = ref(false);
+const showModal2 = () => {
+  open2.value = true;
+};
+const hideModal = () => {
+  open2.value = false;
+};
+
+const showDeleteConfirm = () => {
+  console.log("delete Dialog")
+  Modal.confirm({
+    title: 'Confirm',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '确认删除这条数据吗',
+    okText: '确认',
+    cancelText: '取消',
+  });
+
+};
+
+const columns = [
+  {
+    title: '角色名称',
+    dataIndex: 'role_name',
+    key: 'role_name',
+  },
+  {
+    title: '排序',
+    dataIndex: 'role_id',
+    key: 'role_id',
+  },
+  {
+    title: '角色状态',
+    dataIndex: 'role_state',
+    key: 'role_state',
+  },
+  {
+    title: '创建时间',
+    key: 'create_time',
+    dataIndex: 'create_time',
+  },
+  {
+    title: '更新时间',
+    key: 'update_time',
+    dataIndex: 'update_time'
+  },
+  {
+    title: '操作',
+    key: 'role_action',
+    dataIndex: 'role_action'
+  },
+];
+const data = [
+  {
+    key: '1',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '2',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '3',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '4',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '5',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '6',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '7',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+  {
+    key: '8',
+    role_name: 'John Brown',
+    role_id: 32,
+    role_state: ['启用'],
+    create_time:'1.28',
+    update_time:'1.28',
+  },
+];
+
+
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  getCheckboxProps: record => ({
+    disabled: record.role_name === 'Disabled User',
+    // Column configuration not to be checked
+    role_name: record.role_name,
+  }),
+};
+
+const queryData = params => {
+  return axios.get('https://randomuser.me/api?noinfo', {
+    params,
+  });
+};
+const {
+  data: dataSource,
+  run,
+  loading,
+  current,
+  pageSize,
+} = usePagination(queryData, {
+  formatResult: res => res.data.results,
+  pagination: {
+    currentKey: 'page',
+    pageSizeKey: 'results',
+  },
+});
+const pagination = computed(() => ({
+  total: 200,
+  current: current.value,
+  pageSize: pageSize.value,
+}));
+const handleTableChange = (pag, filters, sorter) => {
+  run({
+    results: pag.pageSize,
+    page: pag?.current,
+    sortField: sorter.field,
+    sortOrder: sorter.order,
+    ...filters,
+  });
+};
+</script>
+
+
+<style scoped>
+.main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+}
+
+.header {
+  display: flex;
+}
+
+.input {
+  width: 20vw;
+  margin-top: 2vh;
+  margin-bottom: 1vh;
+  display: flex;
+  flex-direction: row;
+}
+
+.first-input {
+  margin-right: 1vw;
+  margin-left: 1vw;
+}
+
+
+.edit {
+  margin-top: 2vh;
+  width: 20vw;
+  display: flex;
+}
+
+.query-button {
+  background-color: dodgerblue;
+  color:white;
+  margin-left: 4vw;
+  margin-right: 1vw;
+}
+
+.add-button {
+  background-color: limegreen;
+  color: white;
+}
+
+.table {
+  width: 100%;
+  height: auto;
+  margin-top: 2vh;
+}
+
+.button1 {
+  color: dodgerblue;
+}
+
+.button2 {
+  color:dodgerblue;
+}
+</style>
diff --git a/src/Manager/components/User.vue b/src/Manager/components/User.vue
index 4d16edb..b2595cf 100644
--- a/src/Manager/components/User.vue
+++ b/src/Manager/components/User.vue
@@ -1,121 +1,280 @@
 <template xmlns="">
   <div class="main">
-    <div class="input">
-      <a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
-      <a-input v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
-    </div>
-    <div class="edit">
-      <a-button class="query-button"><SearchOutlined />查询</a-button>
-      <a-button class="add-button"><PlusOutlined />新增用户</a-button>
-      <a-button class="delete-button"><DeleteOutlined />删除用户</a-button>
+    <div class="header">
+      <div class="input">
+        <a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
+        <a-input class="second-input" v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
+        <a-select
+            placeholder="请选择状态"
+            ref="select"
+            style="width: 120px"
+            @focus="focus"
+        >
+          <a-select-option value="启用">启用</a-select-option>
+          <a-select-option value="禁用">禁用</a-select-option>
+        </a-select>
+      </div>
+      <div class="edit">
+        <a-button class="query-button"><SearchOutlined />查询</a-button>
+        <a-button class="add-button" @click="showModal1"><PlusOutlined />新增用户</a-button>
+        <a-button class="delete-button" @click="showModal2"><DeleteOutlined />删除用户</a-button>
+      </div>
     </div>
+
+
+    <!--新增、删除用户对话框-->
+    <a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
+      <p>新增</p>
+    </a-modal>
+    <a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
+      <p>删除</p>
+    </a-modal>
+
+
     <div class="table">
-      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />
+      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'name'">
+            <a>
+              {{ record.name }}
+            </a>
+          </template>
+          <template v-else-if="column.key === 'user_state'">
+            <span>
+              <a-tag
+                v-for="tag in record.user_state"
+                :key="tag"
+                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+              >
+                {{ tag.toUpperCase() }}
+              </a-tag>
+            </span>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <span style="margin-left: 10px">
+              <a-button style="color: dodgerblue" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
+              <a-button style="color: dodgerblue" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
+            </span>
+          </template>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
 
 
 <script setup>
-import { watch, ref,computed,unref } from 'vue';
-import { Table } from 'ant-design-vue';
-import { SearchOutlined,PlusOutlined,DeleteOutlined} from '@ant-design/icons-vue';
+import {createVNode, ref, computed} from 'vue';
+import {
+  SearchOutlined,
+  PlusOutlined,
+  DeleteOutlined,
+  ExclamationCircleOutlined,
+  EditOutlined
+} from '@ant-design/icons-vue';
+import {Modal} from "ant-design-vue";
+import { usePagination } from 'vue-request';
+import axios from 'axios';
 const value1 = ref('');
 const value2 = ref('');
+const open1 = ref(false);
 
-watch(value1, () => {
-  console.log(value1.value);
-});
-watch(value2, () => {
-  console.log(value2.value);
-});
 
+const showModal1 = () => {
+  open1.value = true;
+};
+const handleOk = e => {
+  console.log(e);
+  open1.value = false;
+};
+
+const open2 = ref(false);
+const showModal2 = () => {
+  open2.value = true;
+};
+const hideModal = () => {
+  open2.value = false;
+};
+
+const showDeleteConfirm = () => {
+  console.log("delete Dialog")
+  Modal.confirm({
+    title: 'Confirm',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '确认删除这条数据吗',
+    okText: '确认',
+    cancelText: '取消',
+  });
+
+};
 
 const columns = [
   {
     title: '序号',
     dataIndex: 'id',
+    key: 'id',
   },
   {
-    title: '账号昵称',
+    title: '账户昵称',
     dataIndex: 'name',
+    key: 'name',
   },
   {
     title: '用户名',
     dataIndex: 'username',
+    key: 'username',
   },
   {
     title: '电话',
+    key: 'tel',
     dataIndex: 'tel',
   },
   {
-    title: '更新时间',
-    dataIndex: 'updatetime',
+    title: '用户状态',
+    dataIndex: 'user_state',
+    key: 'user_state',
   },
   {
-    title: '用户状态',
-    dataIndex: 'state',
+    title: '更新时间',
+    key: 'updatetime',
+    dataIndex: 'updatetime'
   },
   {
     title: '操作',
-    dataIndex: 'operation',
+    key: 'action',
   },
 ];
-const data = [];
-for (let i = 0; i < 46; i++) {
-  data.push({
-    key: i,
-    name: `Edward King ${i}`,
-    age: 32,
-    address: `London, Park Lane no. ${i}`,
-  });
-}
-const selectedRowKeys = ref([]); // Check here to configure the default column
+const data = [
+  {
+    key: '1',
+    id:'1',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '2',
+    id:'2',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '3',
+    id:'3',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '4',
+    id:'4',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '5',
+    id:'5',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '6',
+    id:'6',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '7',
+    id:'7',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '8',
+    id:'8',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
+  {
+    key: '9',
+    id:'9',
+    name: 'John Brown',
+    username: 32,
+    tel: '123456789',
+    user_state:['启用'],
+    updatetime:'1.28',
+  },
 
-const onSelectChange = changableRowKeys => {
-  console.log('selectedRowKeys changed: ', changableRowKeys);
-  selectedRowKeys.value = changableRowKeys;
+];
+
+
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  getCheckboxProps: record => ({
+    disabled: record.name === 'Disabled User',
+    // Column configuration not to be checked
+    name: record.name,
+  }),
 };
-const rowSelection = computed(() => {
-  return {
-    selectedRowKeys: unref(selectedRowKeys),
-    onChange: onSelectChange,
-    hideDefaultSelections: true,
-    selections: [
-      Table.SELECTION_ALL,
-      Table.SELECTION_INVERT,
-      Table.SELECTION_NONE,
-      {
-        key: 'odd',
-        text: 'Select Odd Row',
-        onSelect: changableRowKeys => {
-          let newSelectedRowKeys = [];
-          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
-            if (index % 2 !== 0) {
-              return false;
-            }
-            return true;
-          });
-          selectedRowKeys.value = newSelectedRowKeys;
-        },
-      },
-      {
-        key: 'even',
-        text: 'Select Even Row',
-        onSelect: changableRowKeys => {
-          let newSelectedRowKeys = [];
-          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
-            if (index % 2 !== 0) {
-              return true;
-            }
-            return false;
-          });
-          selectedRowKeys.value = newSelectedRowKeys;
-        },
-      },
-    ],
-  };
+
+const queryData = params => {
+  return axios.get('https://randomuser.me/api?noinfo', {
+    params,
+  });
+};
+const {
+  data: dataSource,
+  run,
+  loading,
+  current,
+  pageSize,
+} = usePagination(queryData, {
+  formatResult: res => res.data.results,
+  pagination: {
+    currentKey: 'page',
+    pageSizeKey: 'results',
+  },
 });
+const pagination = computed(() => ({
+  total: 200,
+  current: current.value,
+  pageSize: pageSize.value,
+}));
+const handleTableChange = (pag, filters, sorter) => {
+  run({
+    results: pag.pageSize,
+    page: pag?.current,
+    sortField: sorter.field,
+    sortOrder: sorter.order,
+    ...filters,
+  });
+};
 </script>
 
 
@@ -127,47 +286,54 @@ const rowSelection = computed(() => {
   height: auto;
 }
 
+.header {
+  display: flex;
+}
+
 .input {
-  width: 30vw;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  width: 35vw;
+  margin-top: 2vh;
+  margin-bottom: 1vh;
   display: flex;
   flex-direction: row;
 }
 
 .first-input {
-  margin-right: 60px;
-  margin-left: 20px;
+  margin-right: 1vw;
+  margin-left: 1vw;
 }
 
+.second-input {
+  margin-right: 1vw;
+}
 
 .edit {
+  margin-top: 2vh;
   width: 20vw;
-  display: grid;
-  grid-template-columns: repeat(3, auto); /* 将容器分为三列，每个按钮占一列 */
-  column-gap: 20px;
+  display: flex;
 }
 
 .query-button {
   background-color: dodgerblue;
   color:white;
-  margin-left: 20px;
+  margin-left: 4vw;
+  margin-right: 1vw;
 }
 
 .add-button {
   background-color: limegreen;
   color: white;
-  margin-left: 20px;
 }
 
 .delete-button {
   background-color: #CD5C5C;
   color: white;
-  margin-left: 20px;
+  margin-left: 1vw;
 }
 
 .table {
-  width: 100%; /* 设置表格宽度为100% */
-  height: 400px; /* 设置表格高度为400px */
+  width: 100%;
+  height: auto;
+  margin-top: 2vh;
 }
 </style>