加入了权限管理

src/api/system/permission/index.js

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

src/stores/system/permission/index.js

@@ -0,0 +1,99 @@
+import { defineStore } from "pinia";
+import {
+  queryInfo,
+  add,
+  edit,
+  del,
+  batchDelete,
+} from "@/api/system/permission/index";
+import { ElMessage } from "element-plus";
+
+export const usePermissionStore = defineStore("permission", {
+  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;
+      }
+    },
+    addPermission(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);
+          });
+      });
+    },
+    editPermission(data) {
+      return new Promise((resolve, reject) => {
+        edit(data)
+          .then(() => {
+            this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    deletePermission(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);
+          });
+      });
+    },
+    batchDeletePermission(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/permission/index.vue

@@ -1,20 +1,389 @@
 <template>
-  <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这个是permission</p>
+  <div class="data-table-container">
+    <div class="search-from">
+      <!-- 搜索表单 -->
+    </div>
+    <div class="operate-buttons">
+      <el-button size="default" type="primary" @click="permissionStore.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="permissionStore.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="permissionName" label="权限名称">
+            <template #default="{ row }">
+              <span v-if="row.permissionType === 1" style="color: #409EFF">{{ row.permissionName }}</span>
+              <span v-else>{{ row.permissionName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="permissionCode" label="权限编码" />
+          <el-table-column prop="permissionStr" label="权限字符串" />
+          <el-table-column prop="permissionComponent" label="组件路径" />
+          <el-table-column prop="permissionIcon" label="图标" />
+          <el-table-column prop="sort" label="排序" />
+          <el-table-column prop="description" label="描述" />
+          <el-table-column prop="createTime" label="创建时间" width="160" />
+          <el-table-column fixed="right" label="操作" width="120">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
+              <el-button link type="danger" size="small" @click="handleDelete(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="permissionStore.dialogFormVisible" title="新增权限" width="600" center>
+    <el-form ref="permissionAddFromRef" :model="permissionAddFrom" :rules="permissionAddFromRules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item prop="permissionName">
+            <el-input v-model="permissionAddFrom.permissionName" placeholder="权限名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="permissionCode">
+            <el-input v-model="permissionAddFrom.permissionCode" placeholder="权限编码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="权限类型" prop="permissionType">
+            <el-select v-model="permissionAddFrom.permissionType" style="width: 100%">
+              <el-option label="目录" :value="1" />
+              <el-option label="菜单" :value="2" />
+              <el-option label="按钮" :value="3" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="父级权限">
+            <el-cascader
+              v-model="permissionAddFrom.parentId"
+              :options="permissionStore.parentPermissions"
+              :props="{ checkStrictly: true }"
+              clearable
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="权限字符串" prop="permissionStr">
+            <el-input v-model="permissionAddFrom.permissionStr" placeholder="权限字符串" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="组件路径">
+            <el-input v-model="permissionAddFrom.permissionComponent" placeholder="组件路径" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="图标">
+            <el-input v-model="permissionAddFrom.permissionIcon" placeholder="图标" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序">
+            <el-input-number v-model="permissionAddFrom.sort" :min="0" style="width: 100%" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-form-item label="描述">
+        <el-input v-model="permissionAddFrom.description" type="textarea" :rows="2" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="permissionStore.dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleAdd">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 编辑权限对话框 -->
+  <el-dialog v-model="permissionStore.dialogEditFormVisible" title="编辑权限" width="600" center>
+    <el-form ref="permissionEditFromRef" :model="permissionEditFrom" :rules="permissionEditFromRules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item prop="permissionName">
+            <el-input v-model="permissionEditFrom.permissionName" placeholder="权限名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="permissionCode">
+            <el-input v-model="permissionEditFrom.permissionCode" placeholder="权限编码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item prop="permissionType">
+            <el-select v-model="permissionEditFrom.permissionType" style="width: 100%">
+              <el-option label="目录" :value="1" />
+              <el-option label="菜单" :value="2" />
+              <el-option label="按钮" :value="3" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="父级权限">
+            <el-cascader
+              v-model="permissionEditFrom.parentId"
+              :options="permissionStore.parentPermissions"
+              :props="{ checkStrictly: true }"
+              clearable
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="权限字符串" prop="permissionStr">
+            <el-input v-model="permissionEditFrom.permissionStr" placeholder="权限字符串" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="组件路径">
+            <el-input v-model="permissionEditFrom.permissionComponent" placeholder="组件路径" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="图标">
+            <el-input v-model="permissionEditFrom.permissionIcon" placeholder="图标类名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序">
+            <el-input-number v-model="permissionEditFrom.sort" :min="0" style="width: 100%" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-form-item label="描述">
+        <el-input v-model="permissionEditFrom.description" type="textarea" :rows="2" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="permissionStore.dialogEditFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleEditSubmit">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
-// 这里可以添加首页需要的业务逻辑
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { usePermissionStore } from '@/stores/system/permission';
+import { storeToRefs } from 'pinia';
+
+const permissionStore = usePermissionStore();
+const { tableData, total, pageNum, pageSize } = storeToRefs(permissionStore);
+
+// 选中的权限ID数组
+const selectedPermissionIds = ref([]);
+
+// 查询参数
+const queryFunction = function () {
+  permissionStore.queryData({
+    pageNum: pageNum.value,
+    pageSize: pageSize.value
+  });
+}
+
+// 新增权限表单
+const permissionAddFrom = ref({
+  permissionName: '',
+  permissionCode: '',
+  description: '',
+  parentId: null,
+  permissionType: 1,
+  permissionIcon: '',
+  permissionStr: '',
+  permissionComponent: '',
+  sort: 0
+});
+
+// 新增权限类型格式化方法
+const permissionTypeFormat = (type) => {
+  switch(type) {
+    case 1: return '目录';
+    case 2: return '菜单';
+    case 3: return '按钮';
+    default: return '未知';
+  }
+};
+
+// 更新新增权限验证规则
+const permissionAddFromRules = {
+  permissionName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
+  permissionCode: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入描述信息', trigger: 'blur' }],
+  permissionType: [{ required: true, message: '请选择权限类型', trigger: 'change' }]
+};
+
+// 创建表单引用
+const permissionAddFromRef = ref();
+
+// 分页查询
+onMounted(() => {
+  queryFunction();
+})
+
+// 分页大小变化
+const handleSizeChange = function (val) {
+  permissionStore.pageSize = val;
+  queryFunction();
+}
+
+// 当前页码变化
+const handleCurrentChange = function (val) {
+  permissionStore.pageNum = val;
+  queryFunction();
+}
+
+// 新增权限
+const handleAdd = async () => {
+  if (!permissionAddFromRef.value) return
+  try {
+    const valid = await permissionAddFromRef.value.validate();
+    if (valid) {
+      permissionStore.addPermission(permissionAddFrom.value);
+      permissionStore.dialogFormVisible = false;
+    }
+  } catch (error) {
+    ElMessage.error('添加权限失败，请重试');
+  }
+};
+
+// 编辑权限表单
+const permissionEditFrom = ref({
+  id: '',
+  permissionName: '',
+  permissionCode: '',
+  description: '',
+  parentId: null,
+  permissionType: 1,
+  permissionIcon: '',
+  permissionStr: '',
+  permissionComponent: '',
+  sort: 0
+});
+
+// 更新编辑权限验证规则
+const permissionEditFromRules = {
+  permissionName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
+  permissionCode: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入描述信息', trigger: 'blur' }],
+  permissionType: [{ required: true, message: '请选择权限类型', trigger: 'change' }]
+};
+
+// 编辑表单引用
+const permissionEditFromRef = ref();
+
+// 编辑权限
+const handleEdit = (row) => {
+  // 初始化编辑表单数据
+  permissionEditFrom.value = { ...row };
+  // 显示编辑对话框
+  permissionStore.dialogEditFormVisible = true;
+};
+
+// 提交编辑
+const handleEditSubmit = async () => {
+  if (!permissionEditFromRef.value) return
+  try {
+    const valid = await permissionEditFromRef.value.validate();
+    if (valid) {
+      await permissionStore.editPermission(permissionEditFrom.value);
+      permissionStore.dialogEditFormVisible = false;
+    }
+  } catch (error) {
+    ElMessage.error('编辑权限失败，请重试');
+  }
+};
+
+// 选择行变化
+const handleSelectionChange = (rows) => {
+  // 获取选中行的ID
+  selectedPermissionIds.value = rows.map(row => row.id);
+};
+
+// 删除权限
+const handleDelete = (row) => {
+  ElMessageBox.confirm('确定要删除这个权限吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    permissionStore.deletePermission(row.id);
+  }).catch(() => {
+    // 用户点击取消时的处理
+  });
+};
+
+// 批量删除
+const handleBatchDelete = () => {
+  if (selectedPermissionIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+  ElMessageBox.confirm('确定要批量删除选中的权限吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    permissionStore.batchDeletePermission(selectedPermissionIds.value);
+  }).catch(() => {
+    // 用户点击取消时的处理
+  });
+};
 </script>
 
 <style scoped>
-.home {
+.data-table-container {
   padding: 20px;
-  font-size: 16px;
 }
-h1 {
-  color: #1890ff;
+.el-cascader {
+  width: 100%;
+}
+.dialog-footer {
+  text-align: right;
 }
-</style>
+</style>