feat: 完成pure角色页面对接

2024-09-01 21:34:36 +08:00
parent 8be36f088b
commit 71fd5a13fc
12 changed files with 219 additions and 144 deletions
--- a/Yi.Pure.Vue3/src/views/system/role/form.vue
+++ b/Yi.Pure.Vue3/src/views/system/role/form.vue
@@ -5,9 +5,13 @@ import { FormProps } from "./utils/types";

 const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
-    name: "",
-    code: "",
-    remark: ""
+    roleName: "",
+    roleCode: "",
+    remark: "",
+    deptIds: [],
+    menuIds: [],
+    orderNum: 0,
+    dataScope: "ALL"
  })
 });

@@ -30,7 +34,7 @@ defineExpose({ getRef });
  >
    <el-form-item label="角色名称" prop="name">
      <el-input
-        v-model="newFormInline.name"
+        v-model="newFormInline.roleName"
        clearable
        placeholder="请输入角色名称"
      />
@@ -38,7 +42,7 @@ defineExpose({ getRef });

    <el-form-item label="角色标识" prop="code">
      <el-input
-        v-model="newFormInline.code"
+        v-model="newFormInline.roleCode"
        clearable
        placeholder="请输入角色标识"
      />
--- a/Yi.Pure.Vue3/src/views/system/role/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/role/index.vue
@@ -100,7 +100,7 @@ onMounted(() => {
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input
-          v-model="form.name"
+          v-model="form.roleName"
          placeholder="请输入角色名称"
          clearable
          class="!w-[180px]"
@@ -108,7 +108,7 @@ onMounted(() => {
      </el-form-item>
      <el-form-item label="角色标识：" prop="code">
        <el-input
-          v-model="form.code"
+          v-model="form.roleCode"
          placeholder="请输入角色标识"
          clearable
          class="!w-[180px]"
@@ -116,13 +116,13 @@ onMounted(() => {
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
-          v-model="form.status"
+          v-model="form.state"
          placeholder="请选择状态"
          clearable
          class="!w-[180px]"
        >
-          <el-option label="已启用" value="1" />
-          <el-option label="已停用" value="0" />
+          <el-option label="已启用" :value="true" />
+          <el-option label="已停用" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
@@ -147,7 +147,7 @@ onMounted(() => {
      <PureTableBar
        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-        title="角色管理（仅演示，操作后不生效）"
+        title="角色管理"
        :columns="columns"
        @refresh="onSearch"
      >
@@ -194,7 +194,7 @@ onMounted(() => {
                修改
              </el-button>
              <el-popconfirm
-                :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                :title="`是否确认删除角色名称为${row.roleName}的这条数据`"
                @confirm="handleDelete(row)"
              >
                <template #reference>
--- a/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
@@ -9,14 +9,27 @@ import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
 import { getKeyList, deviceDetection } from "@pureadmin/utils";
-import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
-import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
+import {
+  listRole,
+  getRole,
+  addRole,
+  updateRole,
+  changeRoleStatus,
+  delRole,
+  getRoleMenuSelect,
+  updataDataScope
+} from "@/api/system/role";
+import { getMenuOption } from "@/api/system/menu";
+
+import {type Ref, reactive, ref, onMounted, h, toRaw, watch, nextTick} from "vue";

 export function useRole(treeRef: Ref) {
  const form = reactive({
-    name: "",
-    code: "",
-    status: ""
+    roleName: "",
+    roleCode: "",
+    state: true,
+    skipCount: 1,
+    maxResultCount: 10
  });
  const curRow = ref();
  const formRef = ref();
@@ -31,9 +44,10 @@ export function useRole(treeRef: Ref) {
  const isExpandAll = ref(false);
  const isSelectAll = ref(false);
  const { switchStyle } = usePublicHooks();
+  let currentRoleData: any = {};
  const treeProps = {
    value: "id",
-    label: "title",
+    label: "menuName",
    children: "children"
  };
  const pagination = reactive<PaginationProps>({
@@ -49,11 +63,11 @@ export function useRole(treeRef: Ref) {
    },
    {
      label: "角色名称",
-      prop: "name"
+      prop: "roleName"
    },
    {
      label: "角色标识",
-      prop: "code"
+      prop: "roleCode"
    },
    {
      label: "状态",
@@ -61,9 +75,9 @@ export function useRole(treeRef: Ref) {
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
          loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
+          v-model={scope.row.state}
+          active-value={true}
+          inactive-value={false}
          active-text="已启用"
          inactive-text="已停用"
          inline-prompt
@@ -80,10 +94,10 @@ export function useRole(treeRef: Ref) {
    },
    {
      label: "创建时间",
-      prop: "createTime",
+      prop: "creationTime",
      minWidth: 160,
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+      formatter: ({ creationTime }) =>
+        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "操作",
@@ -92,22 +106,13 @@ export function useRole(treeRef: Ref) {
      slot: "operation"
    }
  ];
-  // const buttonClass = computed(() => {
-  //   return [
-  //     "!h-[20px]",
-  //     "reset-margin",
-  //     "!text-gray-500",
-  //     "dark:!text-white",
-  //     "dark:hover:!text-primary"
-  //   ];
-  // });

-  function onChange({ row, index }) {
+  async function onChange({ row, index }) {
    ElMessageBox.confirm(
      `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
+        row.state === false ? "停用" : "启用"
      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.name
+        row.roleName
      }</strong>吗?`,
      "系统提示",
      {
@@ -118,7 +123,7 @@ export function useRole(treeRef: Ref) {
        draggable: true
      }
    )
-      .then(() => {
+      .then(async () => {
        switchLoadMap.value[index] = Object.assign(
          {},
          switchLoadMap.value[index],
@@ -126,35 +131,39 @@ export function useRole(treeRef: Ref) {
            loading: true
          }
        );
-        setTimeout(() => {
-          switchLoadMap.value[index] = Object.assign(
-            {},
-            switchLoadMap.value[index],
-            {
-              loading: false
-            }
-          );
-          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
-            type: "success"
-          });
-        }, 300);
+
+        await changeRoleStatus(row.id, row.state);
+
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: false
+          }
+        );
+        message(`已${row.state === false ? "停用" : "启用"}${row.roleName}`, {
+          type: "success"
+        });
      })
      .catch(() => {
-        row.status === 0 ? (row.status = 1) : (row.status = 0);
+        row.state === false ? (row.state = true) : (row.state = false);
      });
  }

-  function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+  async function handleDelete(row) {
+    await delRole([row.id]);
+    message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
    onSearch();
  }

  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
+    form.maxResultCount = val;
+    onSearch();
  }

  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
+    form.skipCount = val;
+    onSearch();
  }

  function handleSelectionChange(val) {
@@ -163,31 +172,34 @@ export function useRole(treeRef: Ref) {

  async function onSearch() {
    loading.value = true;
-    const { data } = await getRoleList(toRaw(form));
-    dataList.value = data.list;
-    pagination.total = data.total;
-    pagination.pageSize = data.pageSize;
-    pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    const { data } = await listRole(toRaw(form));
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
+    loading.value = false;
  }
-
  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };

-  function openDialog(title = "新增", row?: FormItemProps) {
+  async function openDialog(title = "新增", row?: FormItemProps) {
+    let data: any = null;
+    if (title == "修改") {
+      const response = await getRole(row?.id);
+      data = response.data;
+    }
    addDialog({
      title: `${title}角色`,
      props: {
        formInline: {
-          name: row?.name ?? "",
-          code: row?.code ?? "",
-          remark: row?.remark ?? ""
+          roleName: row?.roleName ?? "",
+          roleCode: row?.roleCode ?? "",
+          remark: row?.remark ?? "",
+          deptIds: data?.deptIds ?? [],
+          menuIds: data?.menuIds ?? [],
+          orderNum: data?.orderNum ?? 0,
+          dataScope: data?.dataScope ?? "ALL"
        }
      },
      width: "40%",
@@ -200,21 +212,22 @@ export function useRole(treeRef: Ref) {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;
        function chores() {
-          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+          message(`您${title}了角色名称为${curData.roleName}的这条数据`, {
            type: "success"
          });
          done(); // 关闭弹框
          onSearch(); // 刷新表格数据
        }
-        FormRef.validate(valid => {
+        FormRef.validate(async valid => {
          if (valid) {
-            console.log("curData", curData);
            // 表单规则校验通过
            if (title === "新增") {
              // 实际开发先调用新增接口，再进行下面操作
+              await addRole(curData);
              chores();
            } else {
              // 实际开发先调用修改接口，再进行下面操作
+              await updateRole(row?.id, curData);
              chores();
            }
          }
@@ -227,10 +240,13 @@ export function useRole(treeRef: Ref) {
  async function handleMenu(row?: any) {
    const { id } = row;
    if (id) {
-      curRow.value = row;
+      curRow.value = (await getRole(id)).data;
+      curRow.value.menuIds = (await getRoleMenuSelect(id)).data.map(m => m.id);
      isShow.value = true;
-      const { data } = await getRoleMenuIds({ id });
-      treeRef.value.setCheckedKeys(data);
+      nextTick(async () => {
+        treeRef.value.setCheckedKeys(curRow.value.menuIds);
+      });
+
    } else {
      curRow.value = null;
      isShow.value = false;
@@ -246,11 +262,13 @@ export function useRole(treeRef: Ref) {
  }

  /** 菜单权限-保存 */
-  function handleSave() {
-    const { id, name } = curRow.value;
+  async function handleSave() {
+    const { id, roleName } = curRow.value;
+    curRow.value.menuIds = treeRef.value.getCheckedKeys();
    // 根据用户 id 调用实际项目中菜单权限修改接口
-    console.log(id, treeRef.value.getCheckedKeys());
-    message(`角色名称为${name}的菜单权限修改成功`, {
+    await updateRole(id, curRow.value);
+
+    message(`角色名称为${roleName}的菜单权限修改成功`, {
      type: "success"
    });
  }
@@ -268,7 +286,7 @@ export function useRole(treeRef: Ref) {

  onMounted(async () => {
    onSearch();
-    const { data } = await getRoleMenu();
+    const data = (await getMenuOption()).data.items;
    treeIds.value = getKeyList(data, "id");
    treeData.value = handleTree(data);
  });
@@ -300,7 +318,6 @@ export function useRole(treeRef: Ref) {
    isExpandAll,
    isSelectAll,
    treeSearchValue,
-    // buttonClass,
    onSearch,
    resetForm,
    openDialog,
--- a/Yi.Pure.Vue3/src/views/system/role/utils/rule.ts
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/rule.ts
@@ -3,6 +3,6 @@ import type { FormRules } from "element-plus";

 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
-  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+  roleName: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  roleCode: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
 });
--- a/Yi.Pure.Vue3/src/views/system/role/utils/types.ts
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/types.ts
@@ -1,10 +1,11 @@
 // 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了

 interface FormItemProps {
+  id?: string;
  /** 角色名称 */
-  name: string;
+  roleName: string;
  /** 角色编号 */
-  code: string;
+  roleCode: string;
  /** 备注 */
  remark: string;
 }