src/api/system/user/index.js

@@ -1,11 +1,54 @@
 import service from "@/utils/http";
 export function queryInfo(params) {
+ return service.request({
+ url: '/api/v1/system/userInfo/queryInfo',
+ method: 'get',
+ params
+ })
+}
+export function add(data) {
+ return service.request({
+ url: '/api/v1/system/userInfo/add',
+ method: 'post',
+ data,
+ headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+ })
+}
+export function edit(data) {
+ return service.request({
+ url: '/api/v1/system/userInfo/update',
+ method: 'put',
+ data,
+ headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+ })
+}
+export function del(params) {
+ return service.request({
+ url: '/api/v1/system/userInfo/delete/'+params,
+ method: 'delete',
+ params:{}
+ })
+}
+export function batchDelete(params) {
+ return service.request({
+ url: '/api/v1/system/userInfo/batchDelete',
+ method: 'delete',
+ data: params,
+ headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+ })
+}
+export function getInfo(val) {
+ return service.request({
+    url: '/api/v1/system/userInfo/detail?userInfoId=' + val,
+ method: 'get',
+ params: {}
+ })
+}
   return service.request({
     url: "/api/v1/system/userInfo/queryInfo",
     method: "get",
     params,
   });
-}
 export function add(data) {
   return service.request({
     url: "/api/v1/system/userInfo/add",

src/stores/system/user/index.js

@@ -1,12 +1,7 @@
 import { defineStore } from "pinia";
-import {
-  queryInfo,
-  add,
-  edit,
-  del,
-  batchDelete,
-} from "@/api/system/user/index";
-import { ElMessage } from "element-plus";
+import { queryInfo, add, edit, del, batchDelete } from "@/api/system/user/index";
+import { ElMessage } from 'element-plus';
+
 export const useUserStore = defineStore("user", {
   state: () => ({
     tableData: [],
@@ -32,11 +27,8 @@ export const useUserStore = defineStore("user", {
         add(data)
           .then(({ code }) => {
             if (code === 200) {
-              ElMessage.success("⽤户添加成功");
-              this.queryData({
-                pageNum: this.pageNum,
-                pageSize: this.pageSize,
-              });
+              ElMessage.success("用户添加成功");
+              this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
               resolve();
             }
           })
@@ -63,10 +55,7 @@ export const useUserStore = defineStore("user", {
           .then(({ code }) => {
             if (code == 200) {
               ElMessage.success("批量删除成功");
-              this.queryData({
-                pageNum: this.pageNum,
-                pageSize: this.pageSize,
-              });
+              this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
             }
             resolve();
           })
@@ -81,10 +70,7 @@ export const useUserStore = defineStore("user", {
           .then(({ code }) => {
             if (code == 200) {
               ElMessage.success("批量删除成功");
-              this.queryData({
-                pageNum: this.pageNum,
-                pageSize: this.pageSize,
-              });
+              this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
             }
             resolve();
           })
@@ -94,4 +80,4 @@ export const useUserStore = defineStore("user", {
       });
     },
   },
-});
+});

src/views/home/index.vue

@@ -1,20 +1,134 @@
-<template>
-  <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这是您的首页内容区域</p>
-  </div>
-</template>
-
 <script setup>
-// 这里可以添加首页需要的业务逻辑
+import { Setting } from "@element-plus/icons-vue";
+const handleOpen = (key, keyPath) => {
+  console.log(key, keyPath);
+};
+const handleClose = (key, keyPath) => {
+  console.log(key, keyPath);
+};
 </script>
-
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
-}
-h1 {
-  color: #1890ff;
+<template>
+  <el-container class="app-layout">
+    <el-aside width="200px" class="app-side">
+      <div class="logo">
+        <span>ADMIN UI</span>
+      </div>
+      <el-menu
+        default-active="/home"
+        class="side-menu"
+        @open="handleOpen"
+        @close="handleClose"
+        router
+      >
+        <el-menu-item index="/home">
+          <el-icon><HomeFilled /></el-icon>
+          <span>⾸⻚</span>
+        </el-menu-item>
+        <el-sub-menu index="/system">
+          <template #title>
+            <el-icon>
+              <setting />
+            </el-icon>
+            <span>系统管理</span>
+          </template>
+          <el-menu-item index="/system/user">
+            <el-icon><Menu /></el-icon>
+            <span>⽤户管理</span>
+          </el-menu-item>
+          <el-menu-item index="/system/role">
+            <el-icon><Menu /></el-icon>
+            <span>⻆⾊管理</span>
+          </el-menu-item>
+          <el-menu-item index="/system/permission">
+            <el-icon><Menu /></el-icon>
+            <span>权限管理</span>
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+    <el-container class="app-cent-container">
+      <el-header class="app-header">Header</el-header>
+      <el-main class="app-content">
+        <div class="content-wrapper">
+          <router-view></router-view>
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<style lang="less" scoped>
+.app-layout {
+  height: 100vh;
+  background-color: #f0f2f5;
+  .app-side {
+    background-color: #fff;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+    position: relative;
+    z-index: 10;
+    .logo {
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 24px;
+      overflow: hidden;
+      span {
+        color: #0c0c0c;
+        font-size: 18px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+    }
+    .side-menu {
+      border-right: none;
+    }
+  }
+  .app-cent-container{
+    position: fixed;
+    top: 0;
+    left: 200px;
+    right: 0;
+    bottom: 0;
+    background-color: #f9f9f9;
+    .app-header{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      height: 64px;
+      background: #fff;
+      padding-left: 16px;
+      padding-right: 16px;
+      line-height: 64px;
+      align-items: center;
+      border-bottom: 1px solid #d8dce5;
+    }
+    .app-content {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 104px;
+      right: 20px;
+      bottom: 20px;
+      left: 20px;
+      background-color: #fff;
+    }
+  }
+  .app-footer {
+    text-align: center;
+    padding: 16px 24px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+    background: #fff;
+    .footer-links {
+      margin-bottom: 8px;
+      a {
+        color: rgba(0, 0, 0, 0.45);
+        margin: 0 8px;
+        &:hover {
+          color: rgba(0, 0, 0, 0.65);
+        }
+      }
+    }
+  }
 }
 </style>

src/views/system/index.vue

@@ -1,20 +1,234 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useUserStore } from '@/stores/system/user';
+import { storeToRefs } from 'pinia';
+const userStore = useUserStore();
+const { tableData, total, pageNum, pageSize } = storeToRefs(userStore);
+// 选中的⽤户ID数组
+const selectedUserIds = ref([]);
+const queryFunction = function () {
+  userStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value
+  });
+}
+const userAddFrom = ref({
+  userName: '',
+  password: '',
+  fullName: '',
+  phoneNumber: '',
+  avatarAddress: ''
+});
+const userAddFromRules = {
+  userName: [{ required: true, message: '请输⼊⽤户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输⼊密码', trigger: 'blur' }],
+  fullName: [{ required: true, message: '请输⼊姓名', trigger: 'blur' }]
+};
+// 创建表单引⽤
+const userAddFromRef = ref();
+onMounted(() => {
+  queryFunction();
+})
+const handleSizeChange = function (val) {
+  userStore.pageSize = val;
+  queryFunction();
+}
+const handleCurrentChange = function (val) {
+  userStore.pageNum = val;
+  queryFunction();
+}
+const handleAdd = async () => {
+  if (!userAddFromRef.value) return
+  try {
+    // 这⾥可以打开添加⽤户对话框，并传递userAddFrom数据
+    const valid = await userAddFromRef.value.validate();
+    if (valid) {
+      userStore.addUser(userAddFrom.value);
+      userStore.dialogFormVisible = false;
+    }
+  } catch (error) {
+    // console.error('添加⽤户失败:', error);
+    // 可以显示错误提示给⽤户，例如使⽤ElMessage
+    ElMessage.error('添加⽤户失败，请重试');
+  }
+};
+const handleEdit = (row) => {
+  // 这⾥可以打开编辑⽤户对话框，并传递row数据
+  userStore.editUser(row);
+};
+// 当前选中的⾏
+const handleSelectionChange = (rows) => {
+  // 获取选中⾏的ID
+  selectedUserIds.value = rows.map(row => row.id);
+};
+const handleDelete = (row) => {
+  // 使⽤Element Plus的MessageBox组件实现确认对话框
+  ElMessageBox.confirm('确定要删除这个⽤户吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.deleteUser(row.id);
+  }).catch(() => {
+    // ⽤户点击取消时的处理
+  });
+};
+// 批量删除选中的⽤户
+const handleBatchDelete = () => {
+  if (selectedUserIds.value.length === 0) {
+    ElMessage.warning('请⾄少选择⼀条记录进⾏删除');
+    return;
+  }
+  ElMessageBox.confirm('确定要批量删除选中的⽤户吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.batchDeleteUser(selectedUserIds.value);
+  }).catch(() => {
+    // ⽤户点击取消时的处理
+  });
+};
+</script>
 <template>
-  <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这是您的首页内容区域</p>
+  <div class="data-table-container">
+    <div class="search-from">
+      <!-- 搜索表单 -->
+    </div>
+    <div class="operate-buttons">
+      <el-button size="default" type="primary" @click="userStore.dialogFo
+rmVisible = true">
+        <i class="el-icon-plus el-icon--left"></i>新增
+      </el-button>
+      <el-button size="default" type="danger" @click="handleBatchDelete">
+        <i class="el-icon-delete el-icon--left"></i>批量删除
+      </el-button>
+    </div>
+    <div class="data-table">
+      <div class="table-container">
+        <el-table
+          height="600"
+          border
+          fit
+          stripe
+          :data="tableData"
+          style="width: 100%"
+          max-height="600"
+          v-loading="userStore.loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.1)"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" label="序号" width="55" />
+          <el-table-column prop="userName" label="⽤户名" />
+          <el-table-column prop="fullName" label="姓名" />
+          <el-table-column prop="phoneNumber" label="⼿机号" />
+          <el-table-column label="头像" width="88">
+            <template #default="{ row }">
+              <el-image
+                style="width: 40px; height: 40px"
+                :src="row.avatarAddress"
+                :zoom-rate="1.2"
+                :max-scale="7"
+                :min-scale="0.2"
+                show-progress
+                :initial-index="4"
+                fit="cover"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column fixed="right" label="操作" min-width="80">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="handleD
+elete(row)">
+                删除
+              </el-button>
+              <el-button link type="primary" size="small" @click="handleE
+dit(row)">
+                修改
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container">
+        <el-pagination
+          :currentPage="pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </div>
+  <el-dialog v-model="userStore.dialogFormVisible" title="新增⽤户" width
+    ="600" center>
+    <el-form ref="userAddFromRef" :model="userAddFrom" :rules="userAddFromRules">
+      <el-form-item prop="userName">
+        <el-input v-model="userAddFrom.userName" autocomplete="off" place
+                  holder="请输⼊⽤户名" />
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input v-model="userAddFrom.password" type="password" autocomp
+                  lete="off" placeholder="请输⼊⽤户名" />
+      </el-form-item>
+      <el-form-item prop="fullName">
+        <el-input v-model="userAddFrom.fullName" autocomplete="off" place
+                  holder="请输⼊姓名" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="userAddFrom.phoneNumber" autocomplete="off" pl
+                  aceholder="请输⼊⼿机号" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="userAddFrom.avatarAddress" autocomplete="off"
+                  placeholder="请上传头像" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="userStore.dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleAdd">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
-
-<script setup>
-// 这里可以添加首页需要的业务逻辑
-</script>
-
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
-}
-h1 {
-  color: #1890ff;
+<style scoped lang="less">
+.data-table-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  .search-from {
+    padding-top: 20px;
+  }
+  .operate-buttons {
+    height: 54px;
+    line-height: 54px;
+  }
+  .data-table {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    .table-container {
+      flex: 1;
+      overflow: hidden;
+    }
+    .pagination-container {
+      height: 70px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: 24px;
+    }
+  }
 }
 </style>