feat:新增岗位管理

This commit is contained in:
chenchun
2024-09-04 16:24:26 +08:00
parent ad78cb1bcd
commit e393e1f525
19 changed files with 782 additions and 87 deletions

View File

@@ -5,12 +5,9 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Post
/// </summary> /// </summary>
public class PostCreateInputVo public class PostCreateInputVo
{ {
public Guid Id { get; set; }
public DateTime CreationTime { get; set; } = DateTime.Now;
public long? CreatorId { get; set; }
public bool? State { get; set; } public bool? State { get; set; }
public string PostCode { get; set; } = string.Empty; public string PostCode { get; set; }
public string PostName { get; set; } = string.Empty; public string PostName { get; set; }
public string? Remark { get; set; } public string? Remark { get; set; }
} }
} }

View File

@@ -2,12 +2,9 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Post
{ {
public class PostUpdateInputVo public class PostUpdateInputVo
{ {
public Guid Id { get; set; }
public DateTime CreationTime { get; set; } = DateTime.Now;
public Guid? CreatorId { get; set; }
public bool? State { get; set; } public bool? State { get; set; }
public string PostCode { get; set; } = string.Empty; public string PostCode { get; set; }
public string PostName { get; set; } = string.Empty; public string PostName { get; set; }
public string? Remark { get; set; } public string? Remark { get; set; }
} }
} }

View File

@@ -71,6 +71,7 @@ menus:
pureRole: Role Manage pureRole: Role Manage
pureSystemMenu: Menu Manage pureSystemMenu: Menu Manage
pureDept: Dept Manage pureDept: Dept Manage
purePost: Post Manage
pureSysMonitor: System Monitor pureSysMonitor: System Monitor
pureOnlineUser: Online User pureOnlineUser: Online User
pureLoginLog: Login Log pureLoginLog: Login Log

View File

@@ -71,6 +71,7 @@ menus:
pureRole: 角色管理 pureRole: 角色管理
pureSystemMenu: 菜单管理 pureSystemMenu: 菜单管理
pureDept: 部门管理 pureDept: 部门管理
purePost: 岗位管理
pureSysMonitor: 系统监控 pureSysMonitor: 系统监控
pureOnlineUser: 在线用户 pureOnlineUser: 在线用户
pureLoginLog: 登录日志 pureLoginLog: 登录日志

View File

@@ -51,6 +51,15 @@ const systemManagementRouter = {
title: "menus.pureDept", title: "menus.pureDept",
//roles: ["admin"] //roles: ["admin"]
} }
},
{
path: "/system/post/index",
name: "SystemPost",
meta: {
icon: "ant-design:deployment-unit-outlined",
title: "menus.purePost",
//roles: ["admin"]
}
} }
] ]
}; };
@@ -328,7 +337,7 @@ export default defineFakeRoute([
return [ return [
systemManagementRouter, systemManagementRouter,
systemMonitorRouter, systemMonitorRouter,
permissionRouter, //permissionRouter,
// frameRouter, // frameRouter,
// tabsRouter // tabsRouter
]; ];

View File

@@ -2,31 +2,36 @@ import { http } from "@/utils/http";
import type { Result, ResultPage } from "@/api/result"; import type { Result, ResultPage } from "@/api/result";
/** 查询岗位列表 */ /** 查询岗位列表 */
export const getList = (data?: object) => { export const getPostList = (data?: object) => {
return http.request<ResultPage>("get", "/dept", { data }); return http.request<ResultPage>("get", "/post", { data });
}; };
/** 查询部门详细 */ /** 查询岗位详细 */
export const getPost = id => { export const getPost = id => {
return http.request<Result>("get", `/dept/${id}`, {}); return http.request<Result>("get", `/post/${id}`, {});
}; };
/** 新增部门 */ /** 新增岗位 */
export const addPost = data => { export const addPost = data => {
return http.request<Result>("post", `/dept`, { data }); return http.request<Result>("post", `/post`, { data });
}; };
/** 修改部门 */ /** 修改岗位 */
export const updatePost = (id, data) => { export const updatePost = (id, data) => {
return http.request<Result>("put", `/dept/${id}`, { data }); return http.request<Result>("put", `/post/${id}`, { data });
}; };
/** 删除部门 */ /** 修改岗位状态 */
export const delPost = id => { export const updatePostStatus = (id, state) => {
return http.request<Result>("delete", `/dept`, { params: { id } }); return http.request<Result>("put", `/post/${id}/${state}`, {});
}; };
/** 获取部门选择框列表 */ /** 删除岗位 */
export const delPost = ids => {
return http.request<Result>("delete", `/post`, { params: { id:ids } });
};
/** 获取岗位选择框列表 */
export const getPostOptionSelect = () => { export const getPostOptionSelect = () => {
return http.request<Result>("get", `/post`, {}); return http.request<Result>("get", `/post`, {});
}; };

View File

@@ -7,7 +7,7 @@ export const getRoleOption = () => {
}; };
/** 查询角色列表 */ /** 查询角色列表 */
export const listRole = query => { export const getRoleList = query => {
return http.request<ResultPage>("get", `/role`, { params: query }); return http.request<ResultPage>("get", `/role`, { params: query });
}; };
@@ -26,7 +26,7 @@ export const updateRole = (roleId, data) => {
return http.request<Result>("put", `/role/${roleId}`, { data }); return http.request<Result>("put", `/role/${roleId}`, { data });
}; };
/** 修改角色 */ /** 修改角色状态 */
export const changeRoleStatus = (roleId, state) => { export const changeRoleStatus = (roleId, state) => {
return http.request<Result>("put", `/role/${roleId}/${state}`, {}); return http.request<Result>("put", `/role/${roleId}/${state}`, {});
}; };

View File

@@ -14,6 +14,7 @@ import { useUserStoreHook } from "@/store/modules/user";
import { useGlobal, isAllEmpty } from "@pureadmin/utils"; import { useGlobal, isAllEmpty } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import {getFileUrl} from "@/utils/file"
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@@ -40,9 +41,7 @@ export function useNav() {
/** 头像(如果头像为空则使用 src/assets/user.jpg */ /** 头像(如果头像为空则使用 src/assets/user.jpg */
const userAvatar = computed(() => { const userAvatar = computed(() => {
return isAllEmpty(useUserStoreHook()?.avatar) return getFileUrl(useUserStoreHook()?.avatar,Avatar);
? Avatar
: useUserStoreHook()?.avatar;
}); });
/** 昵称(如果昵称为空则显示用户名) */ /** 昵称(如果昵称为空则显示用户名) */

View File

@@ -0,0 +1,8 @@
import {isAllEmpty} from "@pureadmin/utils";
export function getFileUrl(fileId: string, tryPath: string): string {
if (isAllEmpty(fileId)) {
return tryPath;
}
return `${import.meta.env.VITE_APP_BASE_API}/file/${fileId}`;
}

View File

@@ -12,7 +12,8 @@ import { stringify } from "qs";
import NProgress from "../progress"; import NProgress from "../progress";
import { getToken, formatToken } from "@/utils/auth"; import { getToken, formatToken } from "@/utils/auth";
import { useUserStoreHook } from "@/store/modules/user"; import { useUserStoreHook } from "@/store/modules/user";
import {message} from "@/utils/message";
import { transformI18n } from "@/plugins/i18n";
// 相关配置请参考www.axios-js.com/zh-cn/docs/#axios-request-config-1 // 相关配置请参考www.axios-js.com/zh-cn/docs/#axios-request-config-1
const defaultConfig: AxiosRequestConfig = { const defaultConfig: AxiosRequestConfig = {
baseURL: import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
@@ -134,8 +135,9 @@ class PureHttp {
} }
return response; return response;
}, },
(error: PureHttpError) => { (error: any) => {
const $error = error; const $error = error;
message(error.response.data.error.message, { type: "error" });
$error.isCancelRequest = Axios.isCancel($error); $error.isCancelRequest = Axios.isCancel($error);
// 关闭进度条动画 // 关闭进度条动画
NProgress.done(); NProgress.done();

View File

@@ -1,7 +1,7 @@
import editForm from "../form.vue"; import editForm from "../form.vue";
import { handleTree } from "@/utils/tree"; import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import { addMenu, delMenu, getListMenu, updateMenu } from "@/api/system/menu"; import {addMenu, delMenu, getListMenu, getMenu, updateMenu} from "@/api/system/menu";
import { transformI18n } from "@/plugins/i18n"; import { transformI18n } from "@/plugins/i18n";
import { addDialog } from "@/components/ReDialog"; import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h } from "vue"; import { reactive, ref, onMounted, h } from "vue";
@@ -129,32 +129,32 @@ export function useMenu() {
} }
async function openDialog(title = "新增", row?: FormItemProps) { async function openDialog(title = "新增", row?: FormItemProps) {
// let data: any = null; let data: any = null;
// if (title == "修改") { if (title == "修改") {
// data = await getMenu(row.id); data = await getMenu(row.id);
// } }
addDialog({ addDialog({
title: `${title}菜单`, title: `${title}菜单`,
props: { props: {
formInline: { formInline: {
menuName: row?.menuName ?? "", menuName: row?.menuName ?? "",
menuType: menuType:
row?.menuType == undefined data?.menuType == undefined
? 0 ? 0
: menuTypeOptions.findIndex( : menuTypeOptions.findIndex(
option => option.value === row?.menuType option => option.value === row?.menuType
), ),
higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)), higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
id: row?.id ?? "", id: data?.id ?? "",
parentId: row?.parentId ?? 0, parentId: data?.parentId ?? 0,
router: row?.router ?? "", router: data?.router ?? "",
component: row?.component ?? "", component: data?.component ?? "",
orderNum: row?.orderNum ?? 0, orderNum: data?.orderNum ?? 0,
icon: row?.icon ?? "", icon: data?.icon ?? "",
permissionCode: row?.permissionCode ?? "", permissionCode: data?.permissionCode ?? "",
showLink: row?.isShow ?? true, showLink: data?.isShow ?? true,
isLink: row?.isLink ?? false, isLink: data?.isLink ?? false,
state: row?.state ?? true state: data?.state ?? true
} }
}, },
width: "45%", width: "45%",

View File

@@ -0,0 +1,57 @@
<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
id: "",
postName: "",
postCode: "",
remark: "",
orderNum: 0
})
});
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
function getRef() {
return ruleFormRef.value;
}
defineExpose({ getRef });
</script>
<template>
<el-form
ref="ruleFormRef"
:model="newFormInline"
:rules="formRules"
label-width="82px"
>
<el-form-item label="角色名称" prop="postName">
<el-input
v-model="newFormInline.postName"
clearable
placeholder="请输入角色名称"
/>
</el-form-item>
<el-form-item label="角色标识" prop="postCode">
<el-input
v-model="newFormInline.postCode"
clearable
placeholder="请输入角色标识"
/>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="newFormInline.remark"
placeholder="请输入备注信息"
type="textarea"
/>
</el-form-item>
</el-form>
</template>

View File

@@ -0,0 +1,293 @@
<script setup lang="ts">
import { usePost } from "./utils/hook";
import { ref, computed, nextTick, onMounted } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
delay,
subBefore,
deviceDetection,
useResizeObserver
} from "@pureadmin/utils";
// import Database from "@iconify-icons/ri/database-2-line";
// import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import Menu from "@iconify-icons/ep/menu";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Close from "@iconify-icons/ep/close";
import Check from "@iconify-icons/ep/check";
defineOptions({
name: "SystemPost"
});
const iconClass = computed(() => {
return [
"w-[22px]",
"h-[22px]",
"flex",
"justify-center",
"items-center",
"outline-none",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
"hover:bg-[#0000000f]",
"dark:hover:bg-[#ffffff1f]",
"dark:hover:text-[#ffffffd9]"
];
});
const formRef = ref();
const tableRef = ref();
const contentRef = ref();
const treeHeight = ref();
const {
form,
isShow,
curRow,
loading,
columns,
rowStyle,
dataList,
treeData,
treeProps,
isLinkage,
pagination,
isExpandAll,
isSelectAll,
treeSearchValue,
onSearch,
resetForm,
openDialog,
handleMenu,
handleSave,
handleDelete,
filterMethod,
transformI18n,
onQueryChanged,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
} = usePost();
onMounted(() => {
useResizeObserver(contentRef, async () => {
await nextTick();
delay(60).then(() => {
treeHeight.value = parseFloat(
subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
);
});
});
});
</script>
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
>
<el-form-item label="岗位名称:" prop="postName">
<el-input
v-model="form.postName"
placeholder="请输入岗位名称"
clearable
class="!w-[180px]"
/>
</el-form-item>
<el-form-item label="岗位标识:" prop="postCode">
<el-input
v-model="form.postCode"
placeholder="请输入岗位标识"
clearable
class="!w-[180px]"
/>
</el-form-item>
<el-form-item label="状态:" prop="state">
<el-select
v-model="form.state"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-option label="已启用" :value="true" />
<el-option label="已停用" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon('ri:search-line')"
:loading="loading"
@click="onSearch"
>
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<div
ref="contentRef"
:class="['flex', deviceDetection() ? 'flex-wrap' : '']"
>
<PureTableBar
:class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
title="岗位管理"
:columns="columns"
@refresh="onSearch"
>
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
新增岗位
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
align-whole="center"
showOverflowTooltip
table-layout="auto"
:loading="loading"
:size="size"
adaptive
:row-style="rowStyle"
:adaptiveConfig="{ offsetBottom: 108 }"
:data="dataList"
:columns="dynamicColumns"
:pagination="{ ...pagination, size }"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('修改', row)"
>
修改
</el-button>
<el-popconfirm
:title="`是否确认删除岗位名称为${row.postName}的这条数据`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
<div
v-if="isShow"
class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
>
<div class="flex justify-between w-full px-3 pt-5 pb-4">
<div class="flex">
<span :class="iconClass">
<IconifyIconOffline
v-tippy="{
content: '关闭'
}"
class="dark:text-white"
width="18px"
height="18px"
:icon="Close"
@click="handleMenu"
/>
</span>
<span :class="[iconClass, 'ml-2']">
<IconifyIconOffline
v-tippy="{
content: '保存菜单权限'
}"
class="dark:text-white"
width="18px"
height="18px"
:icon="Check"
@click="handleSave"
/>
</span>
</div>
<p class="font-bold truncate">
菜单权限
{{ `${curRow?.name ? `${curRow.name}` : ""}` }}
</p>
</div>
<el-input
v-model="treeSearchValue"
placeholder="请输入菜单进行搜索"
class="mb-1"
clearable
@input="onQueryChanged"
/>
<div class="flex flex-wrap">
<el-checkbox v-model="isExpandAll" label="展开/折叠" />
<el-checkbox v-model="isSelectAll" label="全选/全不选" />
<el-checkbox v-model="isLinkage" label="父子联动" />
</div>
<el-tree-v2
ref="treeRef"
show-checkbox
:data="treeData"
:props="treeProps"
:height="treeHeight"
:check-strictly="!isLinkage"
:filter-method="filterMethod"
>
<template #default="{ node }">
<span>{{ transformI18n(node.label) }}</span>
</template>
</el-tree-v2>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.main-content {
margin: 24px 24px 0 !important;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>

View File

@@ -0,0 +1,298 @@
import dayjs from "dayjs";
import editForm from "../form.vue";
import {message} from "@/utils/message";
import {ElMessageBox} from "element-plus";
import {usePublicHooks} from "../../hooks";
import {transformI18n} from "@/plugins/i18n";
import {addDialog} from "@/components/ReDialog";
import type {FormItemProps} from "../utils/types";
import type {PaginationProps} from "@pureadmin/table";
import {getKeyList, deviceDetection} from "@pureadmin/utils";
import {
getPostList,
addPost,
updatePost,
delPost,
getPost,
updatePostStatus
} from "@/api/system/post"
import {
type Ref,
reactive,
ref,
onMounted,
h,
toRaw,
watch,
nextTick
} from "vue";
export function usePost(treeRef: Ref) {
const form = reactive({
postName: "",
postCode: "",
state: true,
skipCount: 1,
maxResultCount: 10
});
const curRow = ref();
const formRef = ref();
const dataList = ref([]);
const treeIds = ref([]);
const treeData = ref([]);
const isShow = ref(false);
const loading = ref(true);
const isLinkage = ref(false);
const treeSearchValue = ref();
const switchLoadMap = ref({});
const isExpandAll = ref(false);
const isSelectAll = ref(false);
const {switchStyle} = usePublicHooks();
const pagination = reactive<PaginationProps>({
total: 0,
pageSize: 10,
currentPage: 1,
background: true
});
const columns: TableColumnList = [
{
label: "岗位编号",
prop: "id"
},
{
label: "岗位名称",
prop: "postName"
},
{
label: "岗位标识",
prop: "postCode"
},
{
label: "状态",
cellRenderer: scope => (
<el-switch
size={scope.props.size === "small" ? "small" : "default"}
loading={switchLoadMap.value[scope.index]?.loading}
v-model={scope.row.state}
active-value={true}
inactive-value={false}
active-text="已启用"
inactive-text="已停用"
inline-prompt
style={switchStyle.value}
onChange={() => onChange(scope as any)}
/>
),
minWidth: 90
},
{label:"排序",prop:"orderNum"},
{
label: "备注",
prop: "remark",
minWidth: 160
},
{
label: "创建时间",
prop: "creationTime",
minWidth: 160,
formatter: ({creationTime}) =>
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 210,
slot: "operation"
}
];
async function onChange({row, index}) {
ElMessageBox.confirm(
`确认要<strong>${
row.state === false ? "停用" : "启用"
}</strong><strong style='color:var(--el-color-primary)'>${
row.roleName
}</strong>吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
)
.then(async () => {
switchLoadMap.value[index] = Object.assign(
{},
switchLoadMap.value[index],
{
loading: true
}
);
await updatePostStatus(row.id, row.state);
switchLoadMap.value[index] = Object.assign(
{},
switchLoadMap.value[index],
{
loading: false
}
);
message(`${row.state === false ? "停用" : "启用"}${row.roleName}`, {
type: "success"
});
})
.catch(() => {
row.state === false ? (row.state = true) : (row.state = false);
});
}
async function handleDelete(row) {
await delPost([row.id]);
message(`您删除了角色名称为${row.roleName}的这条数据`, {type: "success"});
onSearch();
}
function handleSizeChange(val: number) {
form.maxResultCount = val;
onSearch();
}
function handleCurrentChange(val: number) {
form.skipCount = val;
onSearch();
}
function handleSelectionChange(val) {
console.log("handleSelectionChange", val);
}
async function onSearch() {
loading.value = true;
const {data} = await getPostList(toRaw(form));
dataList.value = data.items;
pagination.total = data.totalCount;
loading.value = false;
}
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
async function openDialog(title = "新增", row?: FormItemProps) {
let data: any = null;
if (title == "修改") {
data = (await getPost(row?.id)).data;
}
addDialog({
title: `${title}岗位`,
props: {
formInline: {
postName: row?.postName ?? "",
postCode: row?.postCode ?? "",
remark: row?.remark ?? "",
orderNum: data?.orderNum ?? 0,
}
},
width: "40%",
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(editForm, {ref: formRef}),
beforeSure: (done, {options}) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as FormItemProps;
function chores() {
message(`${title}了岗位名称为${curData.postName}的这条数据`, {
type: "success"
});
done(); // 关闭弹框
onSearch(); // 刷新表格数据
}
FormRef.validate(async valid => {
if (valid) {
// 表单规则校验通过
if (title === "新增") {
// 实际开发先调用新增接口,再进行下面操作
await addPost(curData);
chores();
} else {
// 实际开发先调用修改接口,再进行下面操作
await updatePost(row?.id, curData);
chores();
}
}
});
}
});
}
/** 高亮当前权限选中行 */
function rowStyle({row: {id}}) {
return {
cursor: "pointer",
background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
};
}
/** 数据权限 可自行开发 */
// function handleDatabase() {}
const onQueryChanged = (query: string) => {
treeRef.value!.filter(query);
};
const filterMethod = (query: string, node) => {
return transformI18n(node.title)!.includes(query);
};
onMounted(async () => {
onSearch();
});
watch(isExpandAll, val => {
val
? treeRef.value.setExpandedKeys(treeIds.value)
: treeRef.value.setExpandedKeys([]);
});
watch(isSelectAll, val => {
val
? treeRef.value.setCheckedKeys(treeIds.value)
: treeRef.value.setCheckedKeys([]);
});
return {
form,
isShow,
curRow,
loading,
columns,
rowStyle,
dataList,
treeData,
isLinkage,
pagination,
isExpandAll,
isSelectAll,
treeSearchValue,
onSearch,
resetForm,
openDialog,
handleDelete,
filterMethod,
transformI18n,
onQueryChanged,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
};
}

View File

@@ -0,0 +1,8 @@
import { reactive } from "vue";
import type { FormRules } from "element-plus";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
postName: [{ required: true, message: "岗位名称为必填项", trigger: "blur" }],
postCode: [{ required: true, message: "岗位标识为必填项", trigger: "blur" }]
});

View File

@@ -0,0 +1,18 @@
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
interface FormItemProps {
id?: string;
/** 角色名称 */
postName: string;
/** 角色编号 */
postCode: string;
/** 备注 */
remark: string;
orderNum: number;
}
interface FormProps {
formInline: FormItemProps;
}
export type { FormItemProps, FormProps };

View File

@@ -98,7 +98,7 @@ onMounted(() => {
:model="form" :model="form"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
> >
<el-form-item label="角色名称:" prop="name"> <el-form-item label="角色名称:" prop="roleName">
<el-input <el-input
v-model="form.roleName" v-model="form.roleName"
placeholder="请输入角色名称" placeholder="请输入角色名称"
@@ -106,7 +106,7 @@ onMounted(() => {
class="!w-[180px]" class="!w-[180px]"
/> />
</el-form-item> </el-form-item>
<el-form-item label="角色标识:" prop="code"> <el-form-item label="角色标识:" prop="roleCode">
<el-input <el-input
v-model="form.roleCode" v-model="form.roleCode"
placeholder="请输入角色标识" placeholder="请输入角色标识"
@@ -114,7 +114,7 @@ onMounted(() => {
class="!w-[180px]" class="!w-[180px]"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态:" prop="status"> <el-form-item label="状态:" prop="state">
<el-select <el-select
v-model="form.state" v-model="form.state"
placeholder="请选择状态" placeholder="请选择状态"

View File

@@ -10,7 +10,7 @@ import type { FormItemProps } from "../utils/types";
import type { PaginationProps } from "@pureadmin/table"; import type { PaginationProps } from "@pureadmin/table";
import { getKeyList, deviceDetection } from "@pureadmin/utils"; import { getKeyList, deviceDetection } from "@pureadmin/utils";
import { import {
listRole, getRoleList,
getRole, getRole,
addRole, addRole,
updateRole, updateRole,
@@ -180,7 +180,7 @@ export function useRole(treeRef: Ref) {
async function onSearch() { async function onSearch() {
loading.value = true; loading.value = true;
const { data } = await listRole(toRaw(form)); const { data } = await getRoleList(toRaw(form));
dataList.value = data.items; dataList.value = data.items;
pagination.total = data.totalCount; pagination.total = data.totalCount;
loading.value = false; loading.value = false;

View File

@@ -5,6 +5,7 @@ import { zxcvbn } from "@zxcvbn-ts/core";
import {handleTree} from "@/utils/tree"; import {handleTree} from "@/utils/tree";
import {message} from "@/utils/message"; import {message} from "@/utils/message";
import userAvatar from "@/assets/user.jpg"; import userAvatar from "@/assets/user.jpg";
import {getFileUrl} from "@/utils/file"
import {usePublicHooks} from "../../hooks"; import {usePublicHooks} from "../../hooks";
import {addDialog} from "@/components/ReDialog"; import {addDialog} from "@/components/ReDialog";
import type {PaginationProps} from "@pureadmin/table"; import type {PaginationProps} from "@pureadmin/table";
@@ -92,8 +93,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
<el-image <el-image
fit="cover" fit="cover"
preview-teleported={true} preview-teleported={true}
src={row.avatar || userAvatar} src={getFileUrl(row.avatar, userAvatar)}
preview-src-list={Array.of(row.avatar || userAvatar)} preview-src-list={Array.of(getFileUrl(row.avatar , userAvatar))}
class="w-[24px] h-[24px] rounded-full align-middle" class="w-[24px] h-[24px] rounded-full align-middle"
/> />
), ),
@@ -320,6 +321,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
} }
return newTreeList; return newTreeList;
} }
async function openDialog(title = "新增", row?: FormItemProps) { async function openDialog(title = "新增", row?: FormItemProps) {
let data: any = null; let data: any = null;
//打开弹窗之前,如果是修改,还需进行查询详情 //打开弹窗之前,如果是修改,还需进行查询详情
@@ -394,7 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
contentRenderer: () => contentRenderer: () =>
h(ReCropperPreview, { h(ReCropperPreview, {
ref: cropRef, ref: cropRef,
imgSrc: row.avatar || userAvatar, imgSrc: getFileUrl(row.avatar, userAvatar),
onCropper: info => (avatarInfo.value = info) onCropper: info => (avatarInfo.value = info)
}), }),
beforeSure: done => { beforeSure: done => {