feat: ✨ 完善角色管理api

src/views/system/role/components/RoleModal.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { insertRule } from '@/api/system/role';
+import { insertRule, updateRule } from '@/api/system/role';
 const props = defineProps({
   formRoleValue: {
     type: Object,
     default: () => ({}),
   },
 });
+const emit = defineEmits(['reloadTable']);
 const formRef = ref();
 const { formRoleValue } = toRefs(props);
 const roleTitle = ref('新增角色');
@@ -18,6 +19,7 @@ const rules = {
     trigger: 'blur',
   },
 };
+
 // 提交表单
 const confirmForm = () => {
   formRef.value.validate(async (errors: any) => {
@@ -28,7 +30,19 @@ const confirmForm = () => {
 };
 
 // 修改
-const updateRuleApi = () => {};
+const updateRuleApi = async () => {
+  const { roleName, description, status, id } = formRoleValue.value;
+  const params = {
+    id,
+    roleName,
+    description,
+    status,
+  };
+  const res = await updateRule(params);
+  if (res.status === 200) window['$message'].success('修改成功!');
+  close();
+  emit('reloadTable');
+};
 
 // 新增
 const insertRuleApi = async () => {
@@ -40,16 +54,17 @@ const insertRuleApi = async () => {
   };
   const res = await insertRule(params);
   if (res.status === 200) window['$message'].success('新增成功!');
+  close();
+  emit('reloadTable');
 };
 
 const init = (str: string) => {
-  if (str === 'add') {
-    roleTitle.value = '新增角色';
-  } else {
-    roleTitle.value = '编辑角色';
-  }
+  str === 'add'
+    ? (roleTitle.value = '新增角色')
+    : (roleTitle.value = '编辑角色');
   showRoleModal.value = true;
 };
+
 const close = () => {
   showRoleModal.value = false;
 };
@@ -84,8 +99,8 @@ defineExpose({
       <n-form-item label="状态">
         <n-radio-group v-model:value="formRoleValue.status" name="radiogroup1">
           <n-space>
-            <n-radio :value="0"> 冻结 </n-radio>
-            <n-radio :value="1"> 启用 </n-radio>
+            <n-radio :value="false"> 冻结 </n-radio>
+            <n-radio :value="true"> 启用 </n-radio>
           </n-space>
         </n-radio-group>
       </n-form-item>

src/views/system/role/role.vue

@@ -27,7 +27,11 @@
     </n-card>
 
     <!-- 添加角色 -->
-    <RoleModal ref="formRole" :formRoleValue="formRoleValue" />
+    <RoleModal
+      ref="formRole"
+      :formRoleValue="formRoleValue"
+      @reload-table="reloadTable()"
+    />
 
     <!-- 菜单权限 -->
     <n-modal
@@ -39,7 +43,6 @@
       <div class="py-3 menu-list">
         <n-tree
           block-line
-          cascade
           checkable
           :virtual-scroll="true"
           :data="treeData"
@@ -82,9 +85,11 @@ import { BasicTable, TableAction } from '@/components/Table';
 import { columns } from './columns';
 import { PlusOutlined } from '@vicons/antd';
 import { getTreeAll } from '@/utils';
-import { getRuleList } from '@/api/system/role';
+import { getRuleList, deleteRule } from '@/api/system/role';
 import { getMenuTreeAll } from '@/api/system/menu';
 import { queryMenuByRole, saveRoleMenu } from '@/api/system/roleMenu';
+import { zsDialog } from '@/utils';
+import { DialogEnum } from '@/enums/pluginEnum';
 
 const actionRef = ref();
 const formRole = ref();
@@ -92,7 +97,7 @@ const formRoleValue = reactive({
   id: null,
   roleName: '',
   roleCode: null,
-  status: 1,
+  status: true,
   description: '',
 });
 const lastMenuIds = ref([]);
@@ -157,6 +162,13 @@ const mapTreeData = (data) => {
 // 新增按钮
 const addRole = () => {
   formRole.value.init('add');
+  Object.assign(formRoleValue, {
+    id: null,
+    roleName: '',
+    roleCode: null,
+    status: true,
+    description: '',
+  });
 };
 
 const loadDataTable = async (res: any) => {
@@ -193,11 +205,21 @@ async function confirmForm(e: any) {
 }
 
 function handleEdit(record: Recordable) {
-  console.log('点击了编辑', record);
+  Object.assign(formRoleValue, record);
+  formRole.value.init('edit');
 }
 
-function handleDelete(record: Recordable) {
-  console.log('点击了删除', record);
+async function handleDelete(record: Recordable) {
+  zsDialog({
+    type: DialogEnum.ERROR,
+    message: `您确定要删除 ${record.roleName} 角色吗?`,
+    positiveButtonProps: { type: 'primary', ghost: false },
+    onPositiveCallback: async () => {
+      const data = await deleteRule({ id: record.id });
+      if (data.status === 200) reloadTable();
+      window['$message'].success('删除成功');
+    },
+  });
 }
 
 async function handleMenuAuth(record: Recordable) {