完善选择框，删除操作

src/MainPage/Index.vue

@@ -1,12 +1,91 @@
+<!--
 <template>
   <div style="display: flex; background-color: #74abe3; height: 70px; width: auto; position: relative; justify-content: flex-end; padding: 0 20px;">
     <a-button ghost  style="border: none; font-size: 25px; font-weight: bold; display: flex; position: absolute; top: 20%; left: 20px;" @click="">LOGO</a-button>
     <div style="display: flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)">
-      <a-button style="color: white" type="text" @click="$router.push('/login')">登陆</a-button>
+      <a-button style="color: white" type="text" @click="$router.push('/login')">登录</a-button>
       <a-button style="color: white" type="text" @click="$router.push('/register')">注册</a-button>
     </div>
 
   </div>
 </template>
 <script setup>
-</script>
+</script>-->
+
+
+<template>
+  <a-layout class="layout">
+    <a-layout-header>
+      <div class="header-content">
+        <div class="logo">LOGO</div>
+        <a-menu default-selected-keys="['1']" mode="horizontal" theme="dark">
+          <a-menu-item key="1">首页</a-menu-item>
+          <a-menu-item key="2">项目</a-menu-item>
+          <a-sub-menu title="关于">
+            <a-menu-item key="about:1">公司历史</a-menu-item>
+            <a-menu-item key="about:2">团队成员</a-menu-item>
+            <!-- 更多下拉菜单项 -->
+          </a-sub-menu>
+          <a-menu-item key="3">团队</a-menu-item>
+          <a-menu-item key="4">新闻</a-menu-item>
+        </a-menu>
+        <div class="auth-buttons">
+          <a-button type="link">登录</a-button>
+          <a-button type="primary">注册</a-button>
+        </div>
+      </div>
+    </a-layout-header>
+  </a-layout>
+</template>
+
+<script>
+import {Button, Layout, Menu} from 'ant-design-vue';
+
+export default {
+  name: 'NavigationBar',
+  components: {
+    'a-layout': Layout,
+    'a-layout-header': Layout.Header,
+    'a-menu': Menu,
+    'a-menu-item': Menu.Item,
+    'a-sub-menu': Menu.SubMenu,
+    'a-button': Button
+  }
+};
+</script>
+
+<style>
+.layout {
+  height: 64px; /* 根据需要调整高度 */
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  float: left;
+  width: 120px;
+  height: 31px;
+  margin: 16px 24px 16px 0;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  text-align: center;
+  line-height: 31px;
+}
+
+a-layout-header {
+  background-color: white; /* Ant Design 默认导航栏颜色 */
+}
+
+.auth-buttons {
+  float: right;
+}
+
+/* 修正下拉菜单的样式 */
+a-sub-menu {
+  color: white !important; /* 确保使用白色文本 */
+}
+</style>

src/Manager/components/Role.vue

@@ -44,7 +44,7 @@
     >
       <div style="">
         <div style="margin-bottom: 10px;">
-          <div style="margin-left: 15px; margin-bottom: 15px">角色id： <a-input v-model:value="updateData.id" style="width: 250px" type="number"  /></div>
+          <div style="margin-left: 15px; margin-bottom: 15px">角色id(原始id)： <a-input v-model:value="updateData.id" style="width: 250px" type="number"  /></div>
           <div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model:value="updateData.name" style="width: 250px" /></div>
           <div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model:value="updateData.displayName" style="width: 250px;" /></div>
         </div>
@@ -52,7 +52,7 @@
     </a-modal>
 
     <div class="table">
-      <a-table :columns="columns" :data-source="states.data"  :row-selection="rowSelection"
+      <a-table :columns="columns" :data-source="states.data" :row-selection="rowSelection"  :rowKey="record => record.id"
         :loading="loading"
         @change="handleTableChange">
         <template #bodyCell="{ column, record }">
@@ -74,7 +74,7 @@
           <template v-else-if="column.key === 'role_action'">
             <span style="margin-left: 10px">
               <a-button class="button2" size="small" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button>
-              <a-button class="button1" size="small" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
+              <a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -85,9 +85,15 @@
 
 
 <script setup>
-import {computed, onMounted, reactive, ref} from 'vue';
-import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
-import {message} from "ant-design-vue";
+import {computed, createVNode, onMounted, reactive, ref} from 'vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ExclamationCircleOutlined,
+  PlusOutlined,
+  SearchOutlined
+} from '@ant-design/icons-vue';
+import {message, Modal} from "ant-design-vue";
 import {usePagination} from 'vue-request';
 import requests from '../../public/request.js';
 import axios from 'axios';
@@ -175,32 +181,42 @@ function addCancel () {
 
 
 
-/*删除用户*/
-const deleteId = ref(0)
-function showDeleteDiaLog(){
-  DeleteDiaLog.value = true
-  deleteId.value = record.id
-}
+const deleteId = reactive({
+  id: -1
+})
+
+//删除
+const showDeleteConfirm = (record) => {
+  console.log("delete Dialog")
+  Modal.confirm({
+    title: '删除数据',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '确认删除这条数据吗',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+
+      deleteId.id = record.id
+      requests.roleDelete(deleteId, token)
+          .then(response => {
+            console.log('删除成功');
+            message.success("删除成功")
+            getAll()
+          })
+          .catch(error => {
+            console.error('删除失败', error);
+            message.error("删除失败")
+            getAll()
+          })
 
-function deleteOk() {
-  DeleteDiaLog.value = false;
-  console.log(deleteId.value)
-  requests.roleDelete(deleteId.value, token).then((res) => {
-    console.log("deleteResult:", res)
-    if (res.data.code === 200) {
-      message.success('删除成功')
-    } else {
-      message.error('删除失败')
     }
-  })
-}
 
-function deleteCancel(){
-  DeleteDiaLog.value = false;
-  message.info('取消删除')
-}
+  });
 
-/*修改用户*/
+};
+
+
+/*修改角色*/
 function showEditDiaLog(record){
   editDiaLog.value = true
   updateData.id = record.id
@@ -276,7 +292,7 @@ const columns = [
     key:'displayName',
   },
   {
-    title: '排序',
+    title: '排序id',
     dataIndex: 'id',
     key: 'id',
   },
@@ -304,7 +320,7 @@ const rowSelection = {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
   getCheckboxProps: record => ({
-    role_name: record.role_name,
+    checked:record.id,
   }),
 };
 

src/Manager/components/User.vue

@@ -162,7 +162,7 @@
 
     <!--表格内容-->
     <div class="table">
-      <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection">
+      <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection" :rowKey="record => record.id">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key==='id'">
             {{record.id}}
@@ -177,10 +177,13 @@
           <template v-else-if="column.key==='updateAt'">
             {{record.updatedAt}}
           </template>
+          <template v-else-if="column.key === 'isDelete'">
+            {{record.isDelete}}
+          </template>
           <template v-else-if="column.key==='action'">
             <span style="margin-left: 10px">
               <a-button size="small" style="color: dodgerblue" type="text" @click="showEditDiaLog(record)"><EditOutlined />修改</a-button>
-              <a-button size="small" style="color: dodgerblue" type="text" @click="showDeleteConfirm"><DeleteOutlined />删除</a-button>
+              <a-button size="small" style="color: dodgerblue" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -245,25 +248,13 @@ const updateData = reactive({
   isLocked: false,
   createdAt:'',
   updateAt:'',
+  isDelete:false,
 })
 
 
 const roleSingle = ref(1);
 
-const roleList= reactive([
-  {
-    value: 1,
-    label: '管理员'
-  },
-  {
-    value: 2,
-    label: '老师'
-  },
-  {
-    value: 3,
-    label: '学生'
-  }
-])
+
 
 
 const userLock = reactive({
@@ -271,6 +262,7 @@ const userLock = reactive({
   isLock: 1
 })
 
+
 function setRowClassName(record,index) {
   return 'custom-row';
 }
@@ -309,7 +301,6 @@ function getAll() {
 
 
 
-
 /*新增用户*/
 const addData = reactive({
   username: '',
@@ -360,38 +351,43 @@ function addCancel () {
 
 
 /*删除用户*/
+const deleteId = reactive({
+  id: -1
+})
 
-const showDeleteConfirm = (record, tableData, token) => {
+const showDeleteConfirm = (record) => {
+  console.log("delete Dialog")
   Modal.confirm({
-    title: '确认删除',
+    title: '删除数据',
     icon: createVNode(ExclamationCircleOutlined),
-    content: '确定删除该数据吗',
+    content: '确认删除这条数据吗',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      const id = record.id;
-      requests.userDelete(id, token).then((res) => {
-        console.log("deleteResult:", res)
-        if (res.data.code === 200) {
-          message.success('删除成功');
-          // 从表格数据中移除该行
-          const index = tableData.findIndex(item => item.id === id);
-          if (index !== -1) {
-            tableData.splice(index, 1);
-          }
-        } else {
-          message.error('删除失败');
-        }
-      });
-    },
-    onCancel: () => {
-      message.info('取消删除');
+
+      deleteId.id = record.id
+      requests.userDelete(deleteId.id, token)
+          .then(response => {
+            console.log('删除成功');
+            message.success("删除成功")
+            getAll()
+          })
+          .catch(error => {
+            console.error('删除失败', error);
+            message.error("删除失败")
+            getAll()
+          })
+
     }
+
   });
+
 };
 
 
 
+
+
 /*编辑用户*/
 function showEditDiaLog(record, index){
   EditDiaLog.value = true
@@ -406,6 +402,7 @@ function showEditDiaLog(record, index){
   updateData.avatar = record.avatar
   updateData.nickname = record.nickname
   updateData.description = record.description
+  updateData.isDelete = record.isDelete
   roleSingle.value = states.role[index]
   if (record.sex === 1) {
     sex.value = '男'
@@ -496,6 +493,11 @@ const columns = [
     key: 'updatedAt',
     dataIndex: 'updatedAt'
   },
+  {
+    title: '是否已被删除',
+    key:'isDelete',
+    dataIndex: 'isDelete'
+  },
   {
     title:'操作',
     key:'action',
@@ -509,12 +511,12 @@ const rowSelection = {
   },
   getCheckboxProps: (record) => ({
     // 设置每行选择框的属性
-    checked: record.isSelected, // 这里的 record.isSelected 应该是你的数据中记录的选中状态
+    checked: record.id
   }),
 };
 
 
-async function fetchData() {
+/*async function fetchData() {
   try {
     const queryData = await requests.userAllCurrent(
         {
@@ -524,7 +526,6 @@ async function fetchData() {
           role: null
         },
     window.localStorage.getItem('token')
-        //"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNzk3NDM1MH0.pi7yFk4RMrUuAhfIz7DEtSahOWwNi55A4vCXimf4Eyo"
     );
     console.log(queryData.data); // 访问数据
     dataSource.value = queryData.data.data;
@@ -550,10 +551,61 @@ async function fetchData() {
 }
 console.log(dataSource)
 
+// 组件挂载时调用 fetchData
+onMounted(() => {
+  fetchData();
+});*/
+
+
+async function fetchData() {
+  try {
+    const queryData = await requests.userAllCurrent(
+        {
+          page: null,
+          limit: null,
+          search: null,
+          role: null
+        },
+        window.localStorage.getItem('token')
+    );
+    console.log(queryData.data); // 访问数据
+    dataSource.value = queryData.data.data;
+    dataLoaded.value = true;
+
+    // 修正循环条件，确保我们不越界
+    for (let i = 0; i < dataSource.value.count; i++) {
+      const user = dataSource.value.users[i].user;
+      if (user.updatedAt === null) {
+        user.updatedAt = "null";
+      }
+
+      // 现在 'user' 已经定义，我们可以安全地访问它的属性
+      data.value.push({
+        username: user.username,
+        nickname: user.nickname,
+        phone: user.phone,
+        enabled: user.enabled,
+        createdAt: user.createdAt,
+        updatedAt: user.updatedAt,
+        id: user.id,
+        isDelete:user.isDelete,
+      });
+    }
+    console.log(data.value);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+console.log(dataSource)
+
 // 组件挂载时调用 fetchData
 onMounted(() => {
   fetchData();
 });
+
+
+
 </script>
 
 

src/public/request.js

@@ -205,7 +205,7 @@ const userEdit = (data, token) => {
 const userDelete = (id, token) => {
     return axios({
         url: api + "/user/delete",
-        method: "put",
+        method: "delete",
         params: {
             id: id
         },