xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成pure角色页面对接

Browse Source
This commit is contained in:
橙子
2024-09-01 21:34:36 +08:00
parent 8be36f088b
commit 71fd5a13fc
12 changed files with 219 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Yi.Pure.Vue3/src/api/system.ts
View File

@@ -1,50 +1,6 @@
import { http } from "@/utils/http";
import type { Result, ResultList, ResultPage } from "./result.ts";
/** 获取系统管理-用户管理列表 */
export const getUserList = (data?: object) => {
return http.request<ResultPage>("get", "/user", { params: data });
};
/** 获取一个用户详细消息 */
export const getUser = (userId: string) => {
return http.request<Result>("get", `/user/${userId}`, {});
};
/** 删除用户 */
export const delUser = (userIds: string[]) => {
return http.request<Result>("delete", `/user`, {
params: { id: userIds }
});
};
/** 用户密码重置 */
export const resetUserPwd = (id: string, password: string) => {
return http.request<Result>("put", `/account/rest-password/${id}`, {
data: { password }
});
};
/** 改变用户状态 */
export const changeUserStatus = (userId: string, state: boolean) => {
return http.request<Result>("put", `/user/${userId}/${state}`, {});
};
/** 修改用户 */
export const updateUser = (id: string, data: any) => {
return http.request<Result>("put", `/user/${id}`, { data });
};
/** 获取角色选择框列表 */
export const getRoleOption = () => {
return http.request<ResultPage>("get", `/role`, {});
};
/** 新增角色 */
export const addUser = (data: any) => {
return http.request<Result>("post", `/user`, { data });
};
/** 新增角色 */
export const addRole = (data: any) => {
return http.request<Result>("post", `/role`, { data });
@@ -60,11 +16,6 @@ export const getMenuList = (data?: object) => {
return http.request<Result>("post", "/menu", { data });
};
/** 获取系统管理-部门管理列表 */
export const getDeptList = (data?: object) => {
return http.request<ResultPage>("get", "/dept", { data });
};
/** 获取系统监控-在线用户列表 */
export const getOnlineLogsList = (data?: object) => {
return http.request<ResultPage>("post", "/online-logs", { data });

7
Yi.Pure.Vue3/src/api/system/dept.ts Normal file
View File

@@ -0,0 +1,7 @@
import {http} from "@/utils/http";
import type {ResultPage} from "@/api/result";
/** 获取系统管理-部门管理列表 */
export const getDeptList = (data?: object) => {
return http.request<ResultPage>("get", "/dept", { data });
};

7
Yi.Pure.Vue3/src/api/system/menu.ts Normal file
View File

@@ -0,0 +1,7 @@
import {http} from "@/utils/http";
import type {ResultPage} from "@/api/result";
/** 查询菜单下拉树结构 */
export const getMenuOption = () => {
return http.request<ResultPage>("get", `/menu`, {});
};

47
Yi.Pure.Vue3/src/api/system/role.ts Normal file
View File

@@ -0,0 +1,47 @@
import { http } from "@/utils/http";
import type { Result, ResultList, ResultPage } from "@/api/result";
/** 获取角色选择框列表 */
export const getRoleOption = () => {
return http.request<ResultPage>("get", `/role`, {});
};
/** 查询角色列表 */
export const listRole = query => {
return http.request<ResultPage>("get", `/role`, { params: query });
};
/** 查询角色详细 */
export const getRole = roleId => {
return http.request<Result>("get", `/role/${roleId}`, {});
};
/** 新增角色 */
export const addRole = data => {
return http.request<Result>("post", `/role`, { data });
};
/** 修改角色 */
export const updateRole = (roleId, data) => {
return http.request<Result>("put", `/role/${roleId}`, { data });
};
/** 修改角色 */
export const changeRoleStatus = (roleId, state) => {
return http.request<Result>("put", `/role/${roleId}/${state}`, {});
};
/** 删除角色 */
export const delRole = roleIds => {
return http.request<Result>("delete", `/role`, { params: { id: roleIds } });
};
/** 修改角色数据权限 */
export const updataDataScope = data => {
return http.request<Result>("put", `/role/data-scpoce`, { data });
};
/** 根据角色ID查询菜单下拉树结构 */
export const getRoleMenuSelect = roleId => {
return http.request<ResultList>("get", `/menu/role-id/${roleId}`, {});
};

41
Yi.Pure.Vue3/src/api/system/user.ts Normal file
View File

@@ -0,0 +1,41 @@
import { http } from "@/utils/http";
import type { Result, ResultList, ResultPage } from "@/api/result";
/** 获取系统管理-用户管理列表 */
export const getUserList = (data?: object) => {
return http.request<ResultPage>("get", "/user", { params: data });
};
/** 获取一个用户详细消息 */
export const getUser = (userId: string) => {
return http.request<Result>("get", `/user/${userId}`, {});
};
/** 删除用户 */
export const delUser = (userIds: string[]) => {
return http.request<Result>("delete", `/user`, {
params: { id: userIds }
});
};
/** 用户密码重置 */
export const resetUserPwd = (id: string, password: string) => {
return http.request<Result>("put", `/account/rest-password/${id}`, {
data: { password }
});
};
/** 改变用户状态 */
export const changeUserStatus = (userId: string, state: boolean) => {
return http.request<Result>("put", `/user/${userId}/${state}`, {});
};
/** 修改用户 */
export const updateUser = (id: string, data: any) => {
return http.request<Result>("put", `/user/${id}`, { data });
};
/** 新增用户 */
export const addUser = (data: any) => {
return http.request<Result>("post", `/user`, { data });
};

14
Yi.Pure.Vue3/src/views/system/role/form.vue
View File

@@ -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="请输入角色标识"
/>

14
Yi.Pure.Vue3/src/views/system/role/index.vue
View File

@@ -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>

157
Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
View File

@@ -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,

4
Yi.Pure.Vue3/src/views/system/role/utils/rule.ts
View File

@@ -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" }]
});

5
Yi.Pure.Vue3/src/views/system/role/utils/types.ts
View File

@@ -1,10 +1,11 @@
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
interface FormItemProps {
id?: string;
/** 角色名称 */
name: string;
roleName: string;
/** 角色编号 */
code: string;
roleCode: string;
/** 备注 */
remark: string;
}

4
Yi.Pure.Vue3/src/views/system/user/form/index.vue
View File

@@ -25,11 +25,11 @@ const props = withDefaults(defineProps<FormProps>(), {
const sexOptions = [
{
value: 0,
value: "Male",
label: "男"
},
{
value: 1,
value: "Woman",
label: "女"
}
];

14
Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
View File

@@ -17,16 +17,16 @@ import {
deviceDetection
} from "@pureadmin/utils";
import {
getDeptList,
getUserList,
getUser,
getRoleOption,
addUser,
delUser,
resetUserPwd,
changeUserStatus,
updateUser
} from "@/api/system";
updateUser,
getUserList
} from "@/api/system/user";
import { getRoleOption } from "@/api/system/role";
import { getDeptList } from "@/api/system/dept";
import {
ElForm,
ElInput,
@@ -116,10 +116,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
cellRenderer: ({ row, props }) => (
<el-tag
size={props.size}
type={row.sex === 1 ? "danger" : null}
type={row.sex === "Woman" ? "danger" : null}
effect="plain"
>
{row.sex === 1 ? "女" : "男"}
{row.sex === "Woman" ? "女" : "男"}
</el-tag>
)
},