4.6-开发用户管理页面并实现接口对接

src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/stores/system/user/index.js

@@ -0,0 +1,97 @@
+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/system/user/index.vue

@@ -1,20 +1,209 @@
+<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>
+<style scoped lang="less">
+.data-table-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 
-<script setup>
-// 这里可以添加首页需要的业务逻辑
-</script>
+  .search-from {
+    padding-top: 20px;
+  }
 
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
-}
-h1 {
-  color: #1890ff;
+  .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>