From b48b2ab96a5c419cb2780ef739fa38ae9214aa45 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Mon, 5 Feb 2024 21:14:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E6=88=90=E5=8A=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LoginRegister/EmailRegister.vue |   3 +
 src/LoginRegister/Register.vue      | 126 ++++++++++++++++++++++++++++
 src/MainPage/Index.vue              |   4 +-
 src/Manager/components/Role.vue     | 118 +++++++-------------------
 src/Manager/components/User.vue     |  82 ++++++++++--------
 src/router/index.js                 |  10 +++
 6 files changed, 216 insertions(+), 127 deletions(-)
 create mode 100644 src/LoginRegister/EmailRegister.vue
 create mode 100644 src/LoginRegister/Register.vue

diff --git a/src/LoginRegister/EmailRegister.vue b/src/LoginRegister/EmailRegister.vue
new file mode 100644
index 0000000..7301b21
--- /dev/null
+++ b/src/LoginRegister/EmailRegister.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
\ No newline at end of file
diff --git a/src/LoginRegister/Register.vue b/src/LoginRegister/Register.vue
new file mode 100644
index 0000000..91a8ce7
--- /dev/null
+++ b/src/LoginRegister/Register.vue
@@ -0,0 +1,126 @@
+<template>
+  <div style="display: flex; justify-content: center; margin-top: 10vh; width: auto;">
+    <a-card style="width: 25vw; display: flex; justify-content: center; background-color: #f9f9f9">
+      <a-button style="margin-left: 15vw; font-size: medium" type="text" @click="$router.push('/emailregister')"><MailOutlined />邮箱注册</a-button>
+      <h1 style="display: flex; font-weight: bold">用户注册</h1>
+      <a-form
+          :label-col="{ span: 8 }"
+          :model="formState"
+          :wrapper-col="{ span: 16 }"
+          autocomplete="off"
+          name="basic"
+          style="margin-top: 3vh"
+          @finish="onFinish"
+          @finishFailed="onFinishFailed"
+      >
+        <a-form-item
+            :rules="[{ required: true, message: '请输入您的用户名！' }]"
+            label="用户名"
+            name="username"
+        >
+          <a-input v-model:value="formState.username" type="text" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入您的密码！' }]"
+            label="用户密码"
+            name="password"
+        >
+          <a-input-password v-model:value="formState.password" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入家庭地址！' }]"
+            label="家庭地址"
+            name="address"
+        >
+          <a-input v-model:value="formState.address" type="text" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入手机号码！' }]"
+            label="手机号"
+            name="phone"
+        >
+          <a-input v-model:value="formState.phone" type="text" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入邮箱！' }]"
+            label="邮箱"
+            name="email"
+        >
+          <a-input v-model:value="formState.email" type="email" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入年龄！' }]"
+            label="年龄"
+            name="age"
+        >
+          <a-input-number v-model:value="formState.age" />
+        </a-form-item>
+        <a-form-item
+            :rules="[{ required: true, message: '请输入性别！' }]"
+            label="性别"
+            name="sex"
+        >
+          <a-radio-group v-model:value="formState.sex">
+            <a-radio :value="0">保密</a-radio>
+            <a-radio :value="1">男</a-radio>
+            <a-radio :value="2">女</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 8, span: 16 }" style="margin-top: 4vh">
+          <a-button html-type="submit" type="primary" @click="registerUser">立即注册</a-button>
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import {reactive} from 'vue';
+import {MailOutlined} from "@ant-design/icons-vue";
+import requests from '../public/request.js'
+import {message} from "ant-design-vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
+message.config({
+  background: true
+})
+
+const formState = reactive({
+  username: '',
+  password: '',
+  address:'',
+  phone:'',
+  email:'',
+  sex:'',
+  age:0,
+});
+const onFinish = values => {
+  console.log('Success:', values);
+};
+const onFinishFailed = errorInfo => {
+  console.log('Failed:', errorInfo);
+};
+
+function registerUser() {
+
+  formState.sex = parseInt(formState.sex)
+  console.log("registerData:",formState)
+  requests.register(formState).then((res) => {
+    console.log("registerData:",formState)
+    console.log("registerResult:",res)
+    if (res.data.code === 200) {
+      //注册成功，提示+跳转页面
+      console.log('注册成功')
+      message.success('注册成功')
+      router.push("/login")
+    } else {
+      //注册失败，消息提示
+      console.log('注册失败')
+    }
+    console.log(res)
+  })
+}
+
+</script>
\ No newline at end of file
diff --git a/src/MainPage/Index.vue b/src/MainPage/Index.vue
index 71fa5c6..24bd6fe 100644
--- a/src/MainPage/Index.vue
+++ b/src/MainPage/Index.vue
@@ -2,8 +2,8 @@
   <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">登陆</a-button>
-      <a-button style="color: white" type="text">注册</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>
diff --git a/src/Manager/components/Role.vue b/src/Manager/components/Role.vue
index 1d6c5db..1671434 100644
--- a/src/Manager/components/Role.vue
+++ b/src/Manager/components/Role.vue
@@ -7,7 +7,7 @@
             placeholder="请选择状态"
             ref="select"
             style="width: 120px"
-            @focus="focus"
+
         >
           <a-select-option value="启用">启用</a-select-option>
           <a-select-option value="禁用">禁用</a-select-option>
@@ -23,8 +23,8 @@
     <!--新增角色对话框-->
     <a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk">
       <div>
-        <div>角色名称：<a-input v-model="addData.name" style="width: 250px; margin-bottom: 10px"/></div>
-        <div>角色备注：<a-input v-model="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div>
+        <div>角色名称：<a-input v-model:value="addData.name" style="width: 250px; margin-bottom: 10px"/></div>
+        <div>角色备注：<a-input v-model:value="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div>
       </div>
     </a-modal>
 
@@ -52,17 +52,17 @@
     </a-modal>
 
     <div class="table">
-      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
+      <a-table :columns="columns" :data-source="states.data" :pagination="pagination" :row-selection="rowSelection"
         :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_id'">
+              {{record.role_id}}
           </template>
           <template v-else-if="column.key === 'role_state'">
-            <span>
               <a-tag
                   v-for="tag in record.role_state"
                   :key="tag"
@@ -70,7 +70,12 @@
               >
                 {{ tag.toUpperCase() }}
               </a-tag>
-            </span>
+          </template>
+          <template v-else-if="column.key === 'createdAt'">
+            {{record.createdAt}}
+          </template>
+          <template v-else-if="column.key === 'updatedAt'">
+            {{record.updatedAt}}
           </template>
           <template v-else-if="column.key === 'role_action'">
             <span style="margin-left: 10px">
@@ -97,8 +102,8 @@ const value1 = ref('');
 const roleid = ref('');
 const AddDiaLog = ref(false);
 const DeleteDiaLog = ref(false);
-const editDiaLog = ref(false)
-const token = window.localStorage.getItem('token')
+const editDiaLog = ref(false);
+const token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNzA0OTQxM30.E5c9_3_PTAKUpCTXmgX7PCN5giV9zp66b1JUesxXURM'
 const states = reactive({
   data:[]
 })
@@ -107,7 +112,8 @@ const updateData = reactive({
   name: '',
   displayName: '',
 
-})
+});
+const loadingTable = ref(true);
 
 /**
  * 配置代码
@@ -131,9 +137,9 @@ function getAll() {
     // states.data = res.data.data
     // console.log(res.data.data)
     loadingTable.value = false
-     for (let i = 0; i < res.data.data.length; i++) {
+     /*for (let i = 0; i < res.data.data.length; i++) {
        states.data[i] = res.data.data[i].user
-     }
+     }*/
     console.log("getAll:",states.data)
   })
 }
@@ -177,7 +183,7 @@ function addCancel () {
 const deleteId = ref(0)
 function showDeleteDiaLog(){
   DeleteDiaLog.value = true
-  deleteId.value = row.id
+  deleteId.value = record.id
 }
 
 function deleteOk() {
@@ -199,11 +205,11 @@ function deleteCancel(){
 }
 
 /*修改用户*/
-function showEditDiaLog(){
+function showEditDiaLog(record){
   editDiaLog.value = true
-  updateData.id = row.id
-  updateData.name = row.roleName
-  updateData.displayName = row.displayName
+  updateData.id = record.id
+  updateData.name = record.role_name
+  updateData.displayName = record.displayName
 
 }
 
@@ -280,13 +286,13 @@ const columns = [
   },
   {
     title: '创建时间',
-    key: 'create_time',
-    dataIndex: 'create_time',
+    key: 'createdAt',
+    dataIndex: 'createdAt',
   },
   {
     title: '更新时间',
-    key: 'update_time',
-    dataIndex: 'update_time'
+    key: 'updatedAt',
+    dataIndex: 'updatedAt'
   },
   {
     title: '操作',
@@ -294,72 +300,7 @@ const columns = [
     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 = {
@@ -367,7 +308,6 @@ const rowSelection = {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
   getCheckboxProps: record => ({
-    // Column configuration not to be checked
     role_name: record.role_name,
   }),
 };
diff --git a/src/Manager/components/User.vue b/src/Manager/components/User.vue
index 69db763..8a7385d 100644
--- a/src/Manager/components/User.vue
+++ b/src/Manager/components/User.vue
@@ -65,9 +65,6 @@
       </a-form>
     </a-modal>
 
-    <!--删除用户对话框-->
-    <a-modal v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk"></a-modal>
-
     <!--修改用户对话框-->
     <a-modal
         v-model:open="EditDiaLog"
@@ -183,7 +180,7 @@
           <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="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
+              <a-button size="small" style="color: dodgerblue" type="text" @click="showDeleteConfirm"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -193,21 +190,25 @@
 </template>
 
 <script setup>
-import {onMounted, reactive, ref} from 'vue';
-import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
-import {message} from "ant-design-vue";
+import {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 requests from "@/public/request.js";
 
 const value1 = ref('');
 const value2 = ref('');
 const AddDiaLog = ref(false);
-const DeleteDiaLog = ref(false);
 const EditDiaLog = ref(false);
-const DeleteId = ref(0);
 let dataSource = ref([]);
 let data = ref([]);
 const dataLoaded = ref(false);
-const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
+const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNzA0OTQxM30.E5c9_3_PTAKUpCTXmgX7PCN5giV9zp66b1JUesxXURM"
 const requestBody = {
   "page": null,
   "limit": null,
@@ -270,6 +271,9 @@ const userLock = reactive({
   isLock: 1
 })
 
+function setRowClassName(record,index) {
+  return 'custom-row';
+}
 
 const states = reactive({
   data:[],
@@ -283,9 +287,6 @@ const states = reactive({
 message.config({
   background: true
 })
-function setRowClassName(record, index) {
-  return 'custom-record';
-}
 
 onMounted(() => {
   getAll()
@@ -359,28 +360,35 @@ function addCancel () {
 
 
 /*删除用户*/
-function showDeleteDiaLog(record){
-  DeleteDiaLog.value = true;
-  DeleteId.value = record.id;
-}
 
-function deleteOk() {
-  DeleteDiaLog.value = false;
-  console.log(DeleteId.value)
-  requests.userDelete(DeleteId.value, token).then((res) => {
-    console.log("deleteResult:", res)
-    if (res.data.code === 200) {
-      message.success('删除成功')
-    } else {
-      message.error('删除失败')
+const showDeleteConfirm = (record, tableData, token) => {
+  Modal.confirm({
+    title: '确认删除',
+    icon: createVNode(ExclamationCircleOutlined),
+    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('取消删除');
     }
-  })
-}
-
-function deleteCancel(){
-  DeleteDiaLog.value = false;
-  message.info('取消删除')
-}
+  });
+};
 
 
 
@@ -499,11 +507,13 @@ const rowSelection = {
   onChange: (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
-  getCheckboxProps: record => ({
-    username: record.username,
+  getCheckboxProps: (record) => ({
+    // 设置每行选择框的属性
+    checked: record.isSelected, // 这里的 record.isSelected 应该是你的数据中记录的选中状态
   }),
 };
 
+
 async function fetchData() {
   try {
     const queryData = await requests.userAllCurrent(
@@ -513,7 +523,7 @@ async function fetchData() {
           search: null,
           role: null
         },
-        "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
+        "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNzA0OTQxM30.E5c9_3_PTAKUpCTXmgX7PCN5giV9zp66b1JUesxXURM"
     );
     console.log(queryData.data); // 访问数据
     dataSource.value = queryData.data.data;
diff --git a/src/router/index.js b/src/router/index.js
index 46a88b7..3a234cd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,16 @@ const router = createRouter({
       name:'login',
       component:()=>import('@/LoginRegister/Login.vue')
     },
+    {
+      path:'/register',
+      name:'register',
+      component:()=>import('../LoginRegister/Register.vue')
+    },
+    {
+      path:'/emailregister',
+      name:'emailregister',
+      component:()=>import('../LoginRegister/EmailRegister.vue')
+    },
     {
       path:'/Manager',
       name:'Manager',