src/MainPage/Index.vue

@@ -1,91 +1,12 @@
-<!--
 <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>-->
-
-
-<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(原始id)： <a-input v-model:value="updateData.id" style="width: 250px" type="number"  /></div>
+          <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">角色名称：<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"  :rowKey="record => record.id"
+      <a-table :columns="columns" :data-source="states.data"  :row-selection="rowSelection"
         :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="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
+              <a-button class="button1" size="small" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -85,15 +85,9 @@
 
 
 <script setup>
-import {computed, createVNode, onMounted, reactive, ref} from 'vue';
+import {computed, onMounted, reactive, ref} from 'vue';
-import {
+import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
-  DeleteOutlined,
+import {message} from "ant-design-vue";
-  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';
@@ -181,42 +175,32 @@ function addCancel () {
 
 
 
-const deleteId = reactive({
+/*删除用户*/
-  id: -1
+const deleteId = ref(0)
-})
+function showDeleteDiaLog(){
-
+  DeleteDiaLog.value = true
-//删除
+  deleteId.value = record.id
-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
@@ -292,7 +276,7 @@ const columns = [
     key:'displayName',
   },
   {
-    title: '排序id',
+    title: '排序',
     dataIndex: 'id',
     key: 'id',
   },
@@ -320,7 +304,7 @@ const rowSelection = {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
   getCheckboxProps: record => ({
-    checked:record.id,
+    role_name: record.role_name,
   }),
 };
 

src/Manager/components/User.vue

@@ -162,7 +162,7 @@
 
     <!--表格内容-->
     <div class="table">
-      <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection" :rowKey="record => record.id">
+      <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key==='id'">
             {{record.id}}
@@ -177,13 +177,10 @@
           <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(record)"><DeleteOutlined />删除</a-button>
+              <a-button size="small" style="color: dodgerblue" type="text" @click="showDeleteConfirm"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -248,13 +245,25 @@ 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({
@@ -262,7 +271,6 @@ const userLock = reactive({
   isLock: 1
 })
 
-
 function setRowClassName(record,index) {
   return 'custom-row';
 }
@@ -301,6 +309,7 @@ function getAll() {
 
 
 
+
 /*新增用户*/
 const addData = reactive({
   username: '',
@@ -351,43 +360,38 @@ function addCancel () {
 
 
 /*删除用户*/
-const deleteId = reactive({
-  id: -1
-})
 
-const showDeleteConfirm = (record) => {
+const showDeleteConfirm = (record, tableData, token) => {
-  console.log("delete Dialog")
   Modal.confirm({
-    title: '删除数据',
+    title: '确认删除',
     icon: createVNode(ExclamationCircleOutlined),
-    content: '确认删除这条数据吗',
+    content: '确定删除该数据吗',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-
+      const id = record.id;
-      deleteId.id = record.id
+      requests.userDelete(id, token).then((res) => {
-      requests.userDelete(deleteId.id, token)
+        console.log("deleteResult:", res)
-          .then(response => {
+        if (res.data.code === 200) {
-            console.log('删除成功');
+          message.success('删除成功');
-            message.success("删除成功")
+          // 从表格数据中移除该行
-            getAll()
+          const index = tableData.findIndex(item => item.id === id);
-          })
+          if (index !== -1) {
-          .catch(error => {
+            tableData.splice(index, 1);
-            console.error('删除失败', error);
+          }
-            message.error("删除失败")
+        } else {
-            getAll()
+          message.error('删除失败');
-          })
+        }
-
+      });
+    },
+    onCancel: () => {
+      message.info('取消删除');
     }
-
   });
-
 };
 
 
 
-
-
 /*编辑用户*/
 function showEditDiaLog(record, index){
   EditDiaLog.value = true
@@ -402,7 +406,6 @@ 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 = '男'
@@ -493,11 +496,6 @@ const columns = [
     key: 'updatedAt',
     dataIndex: 'updatedAt'
   },
-  {
-    title: '是否已被删除',
-    key:'isDelete',
-    dataIndex: 'isDelete'
-  },
   {
     title:'操作',
     key:'action',
@@ -511,12 +509,12 @@ const rowSelection = {
   },
   getCheckboxProps: (record) => ({
     // 设置每行选择框的属性
-    checked: record.id
+    checked: record.isSelected, // 这里的 record.isSelected 应该是你的数据中记录的选中状态
   }),
 };
 
 
-/*async function fetchData() {
+async function fetchData() {
   try {
     const queryData = await requests.userAllCurrent(
         {
@@ -526,6 +524,7 @@ const rowSelection = {
           role: null
         },
     window.localStorage.getItem('token')
+        //"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNzk3NDM1MH0.pi7yFk4RMrUuAhfIz7DEtSahOWwNi55A4vCXimf4Eyo"
     );
     console.log(queryData.data); // 访问数据
     dataSource.value = queryData.data.data;
@@ -551,61 +550,10 @@ const rowSelection = {
 }
 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: "delete",
+        method: "put",
         params: {
             id: id
         },