feat(ui): 新增系统分类菜单

new-ui/projects/admin/src/views/SysRole/SysRoleContainer.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { Message } from "@arco-design/web-vue";
+import SearchTable from "@/components/SearchTable/SearchTable.vue";
+import type { SearchTableColumns } from "@/components/SearchTable/type";
+import usePopup from "@/composables/usePopup";
+import SysRoleForm from "./SysRoleForm.vue";
+import { getList, save, remove } from "./api";
+
+const columns: SearchTableColumns[] = [
+  {
+    title: "角色名称",
+    dataIndex: "name",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    title: "角色描述",
+    dataIndex: "description",
+  },
+  {
+    title: "创建时间",
+    dataIndex: "created_at",
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    width: 120,
+  },
+];
+
+const openFormModal = usePopup(SysRoleForm, {
+  nodeProps: ([record]) => ({ record }),
+  popupProps: ([record, reload], exposed) => ({
+    title: `${record?.id ? "编辑" : "新增"}角色`,
+    width: 800,
+    onBeforeOk: async (done) => {
+      await exposed()?.handleSubmit(save, {
+        id: record?.id,
+      });
+      Message.success("操作成功");
+      await reload();
+      done(true);
+    },
+  }),
+});
+
+const handleRemove = async (id, reload) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+</script>
+<template>
+  <SearchTable :request="getList" :columns="columns">
+    <template #header-option="{ reload }">
+      <a-button type="primary" @click="openFormModal({}, reload)">
+        <template #icon>
+          <icon-plus />
+        </template>
+        新增
+      </a-button>
+    </template>
+    <template #actions="{ record, reload }">
+      <a-link @click="openFormModal(record, reload)">编辑</a-link>
+      <a-popconfirm
+        content="是否删除？"
+        position="left"
+        type="warning"
+        :on-before-ok="() => handleRemove(record.id, reload)"
+      >
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+  </SearchTable>
+</template>
+./SysRoleForm.vue

new-ui/projects/admin/src/views/SysRole/SysRoleForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-form ref="formRef" :model="formData" autoLabelWidth>
+    <a-formItem
+      label="角色名称"
+      field="name"
+      :rules="[{ required: true, message: '请输入角色名称' }]"
+    >
+      <a-input v-model="formData.name" />
+    </a-formItem>
+    <a-formItem
+      label="角色描述"
+      field="description"
+      :rules="[{ required: true, message: '请输入角色描述' }]"
+    >
+      <a-input v-model="formData.description" />
+    </a-formItem>
+    <a-formItem
+      label="平台权限"
+      field="permissions"
+      :rules="[{ required: true, message: '请选择平台权限' }]"
+    >
+      <a-tree
+        v-model:checked-keys="formData.permissions"
+        :data="options"
+        :field-names="{ key: 'id', title: 'name' }"
+      />
+    </a-formItem>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import { getList } from "@/views/SysPermission/api";
+import useRequest from "@/composables/useRequest";
+import useSubmit from "@/composables/useSubmit";
+
+const props = defineProps({
+  record: Object,
+});
+
+const [getOptions, options, loading] = useRequest(getList);
+
+const { formRef, formData, handleSubmit } = useSubmit({
+  name: "",
+  description: "",
+  permissions: [],
+});
+
+Object.assign(formData, props.record);
+getOptions();
+defineExpose({ handleSubmit });
+</script>

new-ui/projects/admin/src/views/SysRole/api.ts

@@ -0,0 +1,25 @@
+import http from "@/http/config";
+
+export const getList = (params) => {
+  return http({
+    url: "/api/admin/sysRole/list",
+    method: "get",
+    params
+  })
+}
+
+export const save = (data) => {
+  return http({
+    url: "/api/admin/sysRole/save",
+    method: "post",
+    data
+  })
+}
+
+export const remove = (data) => {
+  return http({
+    url: "/api/admin/sysRole/remove",
+    method: "post",
+    data
+  })
+}