创建了角色管理页面

src/api/system/role/index.js

@@ -0,0 +1,44 @@
+import service from "@/utils/http";
+
+export function queryInfo(params) {
+  return service.request({
+    url: "/api/v1/system/roleInfo/queryInfo",
+    method: "get",
+    params,
+  });
+}
+
+export function add(data) {
+  return service.request({
+    url: "/api/v1/system/roleInfo/add",
+    method: "post",
+    data,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}
+
+export function edit(data) {
+  return service.request({
+    url: "/api/v1/system/roleInfo/edit",
+    method: "put",
+    data,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}
+
+export function del(params) {
+  return service.request({
+    url: "/api/v1/system/roleInfo/delete/" + params,
+    method: "delete",
+    params: {},
+  });
+}
+
+export function batchDelete(params) {
+  return service.request({
+    url: "/api/v1/system/roleInfo/batchDelete",
+    method: "delete",
+    data: params,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}

src/stores/system/role/index.js

@@ -0,0 +1,99 @@
+import { defineStore } from "pinia";
+import {
+  queryInfo,
+  add,
+  edit,
+  del,
+  batchDelete,
+} from "@/api/system/role/index";
+import { ElMessage } from "element-plus";
+
+export const useRoleStore = defineStore("role", {
+  state: () => ({
+    tableData: [],
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    loading: false,
+    dialogFormVisible: false,
+    dialogEditFormVisible: 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;
+      }
+    },
+    addRole(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);
+          });
+      });
+    },
+    editRole(data) {
+      return new Promise((resolve, reject) => {
+        edit(data)
+          .then(() => {
+            this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    deleteRole(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);
+          });
+      });
+    },
+    batchDeleteRole(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/role/index.vue

@@ -1,20 +1,244 @@
 <template>
-  <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这个是role</p>
+  <div class="data-table-container">
+    <div class="search-from">
+      <!-- 搜索表单 -->
+    </div>
+    <div class="operate-buttons">
+      <el-button size="default" type="primary" @click="roleStore.dialogFormVisible = 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="roleStore.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="roleName" label="角色名称" />
+          <el-table-column prop="roleCode" label="角色代码" />
+          <el-table-column prop="description" label="描述" />
+          <el-table-column prop="remark" label="备注" />
+          <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="handleDelete(row)">
+                删除
+              </el-button>
+              <el-button link type="primary" size="small" @click="handleEdit(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="roleStore.dialogFormVisible" title="新增角色" width="600" center>
+    <el-form ref="roleAddFromRef" :model="roleAddFrom" :rules="roleAddFromRules">
+      <el-form-item prop="roleName">
+        <el-input v-model="roleAddFrom.roleName" autocomplete="off" placeholder="请输入角色名称" />
+      </el-form-item>
+      <el-form-item prop="roleCode">
+        <el-input v-model="roleAddFrom.roleCode" autocomplete="off" placeholder="请输入角色代码" />
+      </el-form-item>
+      <el-form-item prop="description">
+        <el-input v-model="roleAddFrom.description" autocomplete="off" placeholder="请输入描述" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="roleAddFrom.remark" autocomplete="off" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="roleStore.dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleAdd">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 编辑角色对话框 -->
+  <el-dialog v-model="roleStore.dialogEditFormVisible" title="编辑角色" width="600" center>
+    <el-form ref="roleEditFromRef" :model="roleEditFrom" :rules="roleEditFromRules">
+      <el-form-item prop="roleName">
+        <el-input v-model="roleEditFrom.roleName" autocomplete="off" placeholder="请输入角色名称" />
+      </el-form-item>
+      <el-form-item prop="roleCode">
+        <el-input v-model="roleEditFrom.roleCode" autocomplete="off" placeholder="请输入角色代码" />
+      </el-form-item>
+      <el-form-item prop="description">
+        <el-input v-model="roleEditFrom.description" autocomplete="off" placeholder="请输入描述" />
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="roleEditFrom.remark" autocomplete="off" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="roleStore.dialogEditFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleEditSubmit">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
-// 这里可以添加首页需要的业务逻辑
-</script>
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoleStore } from '@/stores/system/role';
+import { storeToRefs } from 'pinia';
+
+const roleStore = useRoleStore();
+const { tableData, total, pageNum, pageSize } = storeToRefs(roleStore);
+
+// 选中的角色ID数组
+const selectedRoleIds = ref([]);
+
+// 查询参数
+const queryFunction = function () {
+  roleStore.queryData({
+    pageNum: pageNum.value,
+    pageSize: pageSize.value
+  });
+}
+
+// 新增角色表单
+const roleAddFrom = ref({
+  roleName: '',
+  roleCode: '',
+  description: '',
+  remark: ''
+});
+
+// 新增角色验证规则
+const roleAddFromRules = {
+  roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+  roleCode: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入描述信息', trigger: 'blur' }]
+};
+
+// 创建表单引用
+const roleAddFromRef = ref();
+
+// 分页查询
+onMounted(() => {
+  queryFunction();
+})
 
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
+// 分页大小变化
+const handleSizeChange = function (val) {
+  roleStore.pageSize = val;
+  queryFunction();
 }
-h1 {
-  color: #1890ff;
+
+// 当前页码变化
+const handleCurrentChange = function (val) {
+  roleStore.pageNum = val;
+  queryFunction();
 }
-</style>
+
+// 新增角色
+const handleAdd = async () => {
+  if (!roleAddFromRef.value) return
+  try {
+    const valid = await roleAddFromRef.value.validate();
+    if (valid) {
+      roleStore.addRole(roleAddFrom.value);
+      roleStore.dialogFormVisible = false;
+    }
+  } catch (error) {
+    ElMessage.error('添加角色失败，请重试');
+  }
+};
+
+// 编辑角色表单
+const roleEditFrom = ref({
+  id: '',
+  roleName: '',
+  roleCode: '',
+  description: '',
+  remark: ''
+});
+
+// 编辑角色验证规则
+const roleEditFromRules = {
+  roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+  roleCode: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入描述信息', trigger: 'blur' }]
+};
+
+// 编辑表单引用
+const roleEditFromRef = ref();
+
+// 编辑角色
+const handleEdit = (row) => {
+  // 初始化编辑表单数据
+  roleEditFrom.value = { ...row };
+  // 显示编辑对话框
+  roleStore.dialogEditFormVisible = true;
+};
+
+// 提交编辑
+const handleEditSubmit = async () => {
+  if (!roleEditFromRef.value) return
+  try {
+    const valid = await roleEditFromRef.value.validate();
+    if (valid) {
+      await roleStore.editRole(roleEditFrom.value);
+      roleStore.dialogEditFormVisible = false;
+    }
+  } catch (error) {
+    ElMessage.error('编辑角色失败，请重试');
+  }
+};
+
+// 选择行变化
+const handleSelectionChange = (rows) => {
+  // 获取选中行的ID
+  selectedRoleIds.value = rows.map(row => row.id);
+};
+
+// 删除角色
+const handleDelete = (row) => {
+  ElMessageBox.confirm('确定要删除这个角色吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    roleStore.deleteRole(row.id);
+  }).catch(() => {
+    // 用户点击取消时的处理
+  });
+};
+
+// 批量删除
+const handleBatchDelete = () => {
+  if (selectedRoleIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+  ElMessageBox.confirm('确定要批量删除选中的角色吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    roleStore.batchDeleteRole(selectedRoleIds.value);
+  }).catch(() => {
+    // 用户点击取消时的处理
+  });
+};
+</script>