feat: collaboration and statistics

frontend/web/src/views/system/role/index.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { h, ref } from "vue";
 import { useRole } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { addDialog } from "@/components/ReDialog";
 
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";
-import { getRoleInfoApi, RoleDTO } from "@/api/system/role";
+import {
+  AddRoleCommand,
+  RoleDTO,
+  UpdateRoleCommand,
+  addRoleApi,
+  getRoleInfoApi,
+  updateRoleApi
+} from "@/api/system/role";
 import RoleFormModal from "@/views/system/role/role-form-modal.vue";
 import { ElMessage } from "element-plus";
 
@@ -31,11 +39,37 @@ const {
   handleDelete
 } = useRole();
 
-const opType = ref<"add" | "update">("add");
-const modalVisible = ref(false);
-const opRow = ref<RoleDTO>();
+const roleFormRef = ref();
+
+function getRoleFormData(row?: RoleDTO) {
+  return {
+    roleId: row?.roleId ?? 0,
+    dataScope: row?.dataScope?.toString() ?? "",
+    menuIds: row?.selectedMenuList ?? [],
+    remark: row?.remark ?? "",
+    roleKey: row?.roleKey ?? "",
+    roleName: row?.roleName ?? "",
+    roleSort: row?.roleSort ?? 1,
+    status: row?.status?.toString() ?? ""
+  };
+}
+
+async function submitRoleForm(
+  type: "add" | "update",
+  formData: AddRoleCommand & Partial<UpdateRoleCommand>,
+  done: () => void
+) {
+  if (type === "add") {
+    await addRoleApi(formData);
+  } else {
+    await updateRoleApi(formData as UpdateRoleCommand);
+  }
+  ElMessage.success("提交成功");
+  done();
+  onSearch();
+}
+
 async function openDialog(type: "add" | "update", row?: RoleDTO) {
-  debugger;
   try {
     await getMenuTree();
     if (row) {
@@ -46,10 +80,43 @@ async function openDialog(type: "add" | "update", row?: RoleDTO) {
   } catch (e) {
     console.error(e);
     ElMessage.error((e as Error)?.message || "加载菜单失败");
+    return;
   }
-  opType.value = type;
-  opRow.value = row;
-  modalVisible.value = true;
+  const formInline = getRoleFormData(row);
+  addDialog({
+    title: type === "add" ? "新增角色" : "更新角色",
+    props: {
+      formInline,
+      menuOptions: menuTree.value
+    },
+    width: "40%",
+    draggable: true,
+    fullscreenIcon: true,
+    closeOnClickModal: false,
+    contentRenderer: () => h(RoleFormModal, { ref: roleFormRef }),
+    beforeSure: (done, { options }) => {
+      const formRuleRef = roleFormRef.value.getFormRuleRef();
+      const formData = options.props.formInline as AddRoleCommand &
+        Partial<UpdateRoleCommand>;
+      formRuleRef.validate(valid => {
+        if (valid) {
+          submitRoleForm(type, formData, () => done());
+        }
+      });
+    }
+  });
+}
+
+function handleSelectionChange(rows: RoleDTO[]) {
+  void rows;
+}
+
+function handleSizeChange() {
+  onSearch();
+}
+
+function handleCurrentChange() {
+  onSearch();
 }
 </script>
 <template>
@@ -205,13 +272,6 @@ async function openDialog(type: "add" | "update", row?: RoleDTO) {
         </pure-table>
       </template>
     </PureTableBar>
-
-    <role-form-modal
-      v-model="modalVisible"
-      :type="opType"
-      :row="opRow"
-      :menu-options="menuTree"
-    />
   </div>
 </template>