更新了用户界面

src/api/system/user/index.js

@@ -0,0 +1,46 @@
+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: {}
+ })
+}

src/stores/system/user/index.js

@@ -0,0 +1,82 @@
+import { defineStore } from "pinia";
+import { queryInfo, add, edit, del, batchDelete } from "@/api/system/user/index";
+import { ElMessage } from 'element-plus';
+export const useUserStore = defineStore("user", {
+ state: () => ({
+ tableData: [],
+ total: 0,
+ pageNum: 1,
+ pageSize: 10,
+ loading: false,
+ dialogFormVisible: false,
+ }),
+ actions: {
+ async queryData(params) {
+ this.loading = true;
+ try {
+ const { data } = await queryInfo(params);
+ this.tableData = data.list;
+ this.total = data.total;
+ } finally {
+ this.loading = false;
+ }
+ },
+ addUser(data) {
+ return new Promise((resolve, reject) => {
+ add(data)
+ .then(({ code }) => {
+ if (code === 200) {
+ ElMessage.success('⽤户添加成功');
+ this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+ resolve();
+ }
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+ },
+ editUser(data) {
+ return new Promise((resolve, reject) => {
+ edit(data)
+ .then(() => {
+ this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+ },
+ deleteUser(params) {
+ return new Promise((resolve, reject) => {
+ del(params)
+ .then(({ code }) => {
+ if (code==200){
+ ElMessage.success('批量删除成功');
+ this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+ }
+ resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+ },
+ batchDeleteUser(params) {
+ return new Promise((resolve, reject) => {
+ batchDelete(params)
+ .then(({ code }) => {
+ if (code==200){
+ ElMessage.success('批量删除成功');
+ this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+ }
+ resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+ }
+ },
+});

src/views/home/index.vue

@@ -0,0 +1,134 @@
+<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>
+<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

@@ -0,0 +1,241 @@
+<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="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>
+<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>