user、role页面模型

src/Manager/components/User.vue

@@ -16,8 +16,8 @@
       </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>
+        <a-button class="add-button" @click="showAddDialog"><PlusOutlined />新增用户</a-button>
+        <a-button class="delete-button" @click="showDelectDialog"><DeleteOutlined />删除用户</a-button>
       </div>
     </div>
 
@@ -32,32 +32,17 @@
 
 
     <div class="table">
-      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
+      <div>
+      <a-table
+          :columns="columns"
+          :data-source="data"
           :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'"
+          :pagination="pagination"
+          :row-key="record => record.login.uuid"
+          @change="handleTableChange"
       >
-                {{ 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 #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
         </template>
       </a-table>
   </div>
@@ -65,24 +50,29 @@
 </template>
 
 
+
 <script setup>
-import {createVNode, ref, computed} from 'vue';
-import {
-  SearchOutlined,
-  PlusOutlined,
-  DeleteOutlined,
-  ExclamationCircleOutlined,
-  EditOutlined
-} from '@ant-design/icons-vue';
+import {computed, createVNode, ref} from 'vue';
+import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
 import {Modal} from "ant-design-vue";
-import { usePagination } from 'vue-request';
+import {usePagination} from 'vue-request';
 import axios from 'axios';
+import request from '@/public/request.js'
+
 const value1 = ref('');
 const value2 = ref('');
 const open1 = ref(false);
+const open2 = ref(false);
+let data = null
+const token = window.localStorage.getItem('token')
+const requestBody = {
+  "page": null,
+  "limit": null,
+  "search": null,
+  "role": null
+}
 
-
-const showModal1 = () => {
+const showAddDialog = () => {
   open1.value = true;
 };
 const handleOk = e => {
@@ -90,8 +80,7 @@ const handleOk = e => {
   open1.value = false;
 };
 
-const open2 = ref(false);
-const showModal2 = () => {
+const showDelectDialog = () => {
   open2.value = true;
 };
 const hideModal = () => {
@@ -107,7 +96,6 @@ const showDeleteConfirm = () => {
     okText: '确认',
     cancelText: '取消',
   });
-
 };
 
 const columns = [
@@ -116,121 +104,36 @@ const columns = [
     dataIndex: 'id',
     key: 'id',
   },
-  {
-    title: '账户昵称',
-    dataIndex: 'name',
-    key: 'name',
-  },
   {
     title: '用户名',
     dataIndex: 'username',
     key: 'username',
   },
+  {
+    title: '账户昵称',
+    dataIndex: 'nickname',
+    key: 'nickname',
+  },
   {
     title: '电话',
-    key: 'tel',
-    dataIndex: 'tel',
+    key: 'phone',
+    dataIndex: 'phone',
   },
   {
     title: '用户状态',
-    dataIndex: 'user_state',
-    key: 'user_state',
+    dataIndex: 'enabled',
+    key: 'enabled',
   },
   {
     title: '更新时间',
-    key: 'updatetime',
-    dataIndex: 'updatetime'
+    key: 'updatedAt',
+    dataIndex: 'updatedAt'
   },
   {
     title: '操作',
     key: 'action',
   },
 ];
-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 rowSelection = {
   onChange: (selectedRowKeys, selectedRows) => {
@@ -238,7 +141,6 @@ const rowSelection = {
   },
   getCheckboxProps: record => ({
     disabled: record.name === 'Disabled User',
-    // Column configuration not to be checked
     name: record.name,
   }),
 };
@@ -248,8 +150,10 @@ const queryData = params => {
     params,
   });
 };
+request.userAllCurrent(requestBody, token).then((res) => {
+  data = res.data.data.users
+})
 const {
-  data: dataSource,
   run,
   loading,
   current,