feat 完成用户管理基本操作，添加modal雏形

admin-fe/src/components/modal/index.ts

@@ -0,0 +1,3 @@
+import Modal from './modal.vue';
+
+export default Modal

admin-fe/src/components/modal/modal.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="modal" v-if="modalVisible">
+    <div class="modal-mask"></div>
+    <div class="modal-content">
+      <div class="modal-close" @click="modalVisible = false">关闭</div>
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed} from "vue";
+
+export default {
+  name: "modal",
+  props: {
+    modelValue: {
+      type: Boolean,
+      require: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, ctx) {
+    const modalVisible = computed({
+      get() {
+        return props.modelValue
+      },
+      set(value) {
+        ctx.emit('update:modelValue', value)
+      }
+    })
+    return {
+      modalVisible
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.modal {
+  .modal-mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 9998;
+  }
+
+  .modal-close {
+    text-align: right;
+    margin-bottom: 10px;
+  }
+
+  .modal-content {
+    position: fixed;
+    z-index: 9999;
+    background-color: #fff;
+    left: 50%;
+    top: 100px;
+    transform: translateX(-50%);
+    padding: 10px;
+  }
+}
+</style>

admin-fe/src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import {httpConfig} from "./util/http";
 import './assets/app.css'
+import PInput from "./components/input";
 
 httpConfig.baseURL = "http://localhost:8080"
 
@@ -12,5 +13,6 @@ const app = createApp(App)
 // 使用路由
 app.use(router)
 app.use(createPinia());
+app.component('PInput',PInput)
 // 将应用实例挂载到 模板中
 app.mount('#vue-root-app')

admin-fe/src/util/http.ts

@@ -1,6 +1,5 @@
 import {toast} from "../components/message";
 import {useUserStore} from "../service/store";
-import {useRoute, useRouter} from "vue-router";
 
 export type HttpMethod = 'get' | 'post' | 'delete' | 'put'
 
@@ -77,7 +76,8 @@ class Http {
                     for (const key in data) {
                         params.push(`${key}=${data[key]}`);
                     }
-                    data = params.join('&')
+                    data = null;
+                    url += '?' + params.join('&')
                 }
             }
 
@@ -86,7 +86,6 @@ class Http {
             }
             const token = useUserStore().token();
             if (token) headers.token = token
-            const r = useRoute(), router = useRouter();
             fetch(httpConfig.baseURL + url, {
                 method,
                 body: data,
@@ -100,9 +99,9 @@ class Http {
                         // 需要统一处理数据
                         if (code === 403) {
                             toast("登录凭证无效或者已过期")
-                            if (r.fullPath != '/login') {
+                            // if (r.fullPath != '/login') {
-                                router.replace('/login');
+                            //     router.replace('/login');
-                            }
+                            // }
                             return;
                         } else if (err) {
                             toast(httpConfig.globalErrorHandler[code])
@@ -114,7 +113,6 @@ class Http {
                     resolve(res.data)
                 })
                 .catch(() => {
-
                 })
         });
     }

admin-fe/src/views/user/index.vue

@@ -24,17 +24,42 @@
       <td>{{ u.pointInfo?.totalPoint }}</td>
       <td>{{ u.firstLoginTime }}</td>
       <td>
-        <span>编辑</span>
+        <span @click="editUser(u)">编辑</span>
         <span>禁用</span>
-        <span>删除</span>
+        <span @click="removeUser(u.id)">删除</span>
       </td>
     </tr>
   </table>
+  <Modal v-model="modalVisible">
+    <div>
+      <div>
+        <span>昵称</span>
+        <p>
+          <PInput placeholder="请输入昵称" v-model="editUserData.nickname"/>
+        </p>
+      </div>
+      <div>
+        <span>省份</span>
+        <p>
+          <PInput placeholder="请输入省份" v-model="editUserData.province"/>
+        </p>
+      </div>
+      <div>
+        <span>城市</span>
+        <p>
+          <PInput placeholder="请输入城市" v-model="editUserData.city"/>
+        </p>
+      </div>
+      <button @click="updateUser">提交</button>
+    </div>
+  </Modal>
 </template>
 
 <script setup lang="ts">
 import {onMounted, reactive, ref} from "vue";
 import http, {DataListModel} from "../../util/http";
+import message from "../../components/message";
+import Modal from "../../components/modal/modal.vue";
 //
 const GenderEnum = {
   1: '男', 2: '女'
@@ -51,8 +76,16 @@ const param = reactive({
   page: 1,
   pageSize: 10
 })
+const modalVisible = ref(false)
 
 const userList = ref<UserInfoModel[]>([]);
+const editUserData = reactive({
+  id: 0,
+  nickname: '',
+  headImage: '',
+  province: '',
+  city: ''
+});
 const userTotalCount = ref(0)
 
 function loadUserList() {
@@ -62,6 +95,43 @@ function loadUserList() {
   })
 }
 
+function editUser(user: UserInfoModel) {
+  editUserData.id = user.id;
+  editUserData.nickname = user.nickname;
+  editUserData.province = user.province;
+  editUserData.city = user.city
+  modalVisible.value = true
+}
+
+async function updateUser() {
+  try {
+    await http.post('/admin/user', editUserData)
+    modalVisible.value = false;
+    message.toast('更新成功');
+
+    loadUserList();
+  } catch (e) {
+    message.toast(e.message || '更新失败')
+  }
+}
+
+/**
+ * 删除用户
+ * @param id 要删除的用户id
+ */
+async function removeUser(id: number) {
+  if (!confirm('是否删除?')) {
+    return;
+  }
+  try {
+    await http.get('/admin/user/remove', {id});
+    message.toast('删除成功');
+    loadUserList();
+  } catch (e) {
+    message.toast(e.message || '删除失败')
+  }
+}
+
 onMounted(loadUserList)
 </script>