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

feat:新增岗位管理

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Post/PostCreateInputVo.cs
View File

@@ -5,12 +5,9 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Post
/// </summary>
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 string PostCode { get; set; } = string.Empty;
public string PostName { get; set; } = string.Empty;
public string PostCode { get; set; }
public string PostName { get; set; }
public string? Remark { get; set; }
}
}

7
Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Post/PostUpdateInputVo.cs
View File

@@ -2,12 +2,9 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Post
{
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 string PostCode { get; set; } = string.Empty;
public string PostName { get; set; } = string.Empty;
public string PostCode { get; set; }
public string PostName { get; set; }
public string? Remark { get; set; }
}
}

3
Yi.Pure.Vue3/locales/en.yaml
View File

@@ -71,6 +71,7 @@ menus:
pureRole: Role Manage
pureSystemMenu: Menu Manage
pureDept: Dept Manage
purePost: Post Manage
pureSysMonitor: System Monitor
pureOnlineUser: Online User
pureLoginLog: Login Log
@@ -233,4 +234,4 @@ login:
purePassWordRuleReg: The password format should be any combination of 8-18 digits
purePassWordSureReg: Please enter confirm password
purePassWordDifferentReg: The two passwords do not match!
purePassWordUpdateReg: Password has been updated
purePassWordUpdateReg: Password has been updated

1
Yi.Pure.Vue3/locales/zh-CN.yaml
View File

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

11
Yi.Pure.Vue3/mock/asyncRoutes.ts
View File

@@ -51,6 +51,15 @@ const systemManagementRouter = {
title: "menus.pureDept",
//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 [
systemManagementRouter,
systemMonitorRouter,
permissionRouter,
//permissionRouter,
// frameRouter,
// tabsRouter
];

29
Yi.Pure.Vue3/src/api/system/post.ts
View File

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

4
Yi.Pure.Vue3/src/api/system/role.ts
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 });
};
@@ -26,7 +26,7 @@ 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}`, {});
};

5
Yi.Pure.Vue3/src/layout/hooks/useNav.ts
View File

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

8
Yi.Pure.Vue3/src/utils/file.ts Normal file
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}`;
}

8
Yi.Pure.Vue3/src/utils/http/index.ts
View File

@@ -12,7 +12,8 @@ import { stringify } from "qs";
import NProgress from "../progress";
import { getToken, formatToken } from "@/utils/auth";
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
const defaultConfig: AxiosRequestConfig = {
baseURL: import.meta.env.VITE_APP_BASE_API,
@@ -134,13 +135,14 @@ class PureHttp {
}
return response;
},
(error: PureHttpError) => {
(error: any) => {
const $error = error;
message(error.response.data.error.message, { type: "error" });
$error.isCancelRequest = Axios.isCancel($error);
// 关闭进度条动画
NProgress.done();
// 所有的响应异常 区分来源为取消请求/非取消请求
return Promise.reject($error);
return Promise.reject($error);
}
);
}

32
Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
View File

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

57
Yi.Pure.Vue3/src/views/system/post/form.vue Normal file
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>

293
Yi.Pure.Vue3/src/views/system/post/index.vue Normal file
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>

298
Yi.Pure.Vue3/src/views/system/post/utils/hook.tsx Normal file
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
};
}

8
Yi.Pure.Vue3/src/views/system/post/utils/rule.ts Normal file
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" }]
});

18
Yi.Pure.Vue3/src/views/system/post/utils/types.ts Normal file
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 };

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

@@ -98,7 +98,7 @@ onMounted(() => {
:model="form"
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
v-model="form.roleName"
placeholder="请输入角色名称"
@@ -106,7 +106,7 @@ onMounted(() => {
class="!w-[180px]"
/>
</el-form-item>
<el-form-item label="角色标识：" prop="code">
<el-form-item label="角色标识：" prop="roleCode">
<el-input
v-model="form.roleCode"
placeholder="请输入角色标识"
@@ -114,7 +114,7 @@ onMounted(() => {
class="!w-[180px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-form-item label="状态：" prop="state">
<el-select
v-model="form.state"
placeholder="请选择状态"

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

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

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

@@ -1,15 +1,16 @@
import "./reset.css";
import dayjs from "dayjs";
import editForm from "../form/index.vue";
import { zxcvbn } from "@zxcvbn-ts/core";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import {zxcvbn} from "@zxcvbn-ts/core";
import {handleTree} from "@/utils/tree";
import {message} from "@/utils/message";
import userAvatar from "@/assets/user.jpg";
import { usePublicHooks } from "../../hooks";
import { addDialog } from "@/components/ReDialog";
import type { PaginationProps } from "@pureadmin/table";
import {getFileUrl} from "@/utils/file"
import {usePublicHooks} from "../../hooks";
import {addDialog} from "@/components/ReDialog";
import type {PaginationProps} from "@pureadmin/table";
import ReCropperPreview from "@/components/ReCropperPreview";
import type { FormItemProps } from "../utils/types";
import type {FormItemProps} from "../utils/types";
import {
getKeyList,
isAllEmpty,
@@ -25,8 +26,8 @@ import {
updateUser,
getUserList
} from "@/api/system/user";
import { getRoleOption } from "@/api/system/role";
import { getDeptList } from "@/api/system/dept";
import {getRoleOption} from "@/api/system/role";
import {getDeptList} from "@/api/system/dept";
import {
ElForm,
ElInput,
@@ -62,7 +63,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
// 上传头像信息
const avatarInfo = ref();
const switchLoadMap = ref({});
const { switchStyle } = usePublicHooks();
const {switchStyle} = usePublicHooks();
const higherDeptOptions = ref();
const treeData = ref([]);
const treeLoading = ref(true);
@@ -88,12 +89,12 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
{
label: "用户头像",
prop: "avatar",
cellRenderer: ({ row }) => (
cellRenderer: ({row}) => (
<el-image
fit="cover"
preview-teleported={true}
src={row.avatar || userAvatar}
preview-src-list={Array.of(row.avatar || userAvatar)}
src={getFileUrl(row.avatar, userAvatar)}
preview-src-list={Array.of(getFileUrl(row.avatar , userAvatar))}
class="w-[24px] h-[24px] rounded-full align-middle"
/>
),
@@ -113,7 +114,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
label: "性别",
prop: "sex",
minWidth: 90,
cellRenderer: ({ row, props }) => (
cellRenderer: ({row, props}) => (
<el-tag
size={props.size}
type={row.sex === "Woman" ? "danger" : null}
@@ -132,8 +133,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
label: "手机号码",
prop: "phone",
minWidth: 90,
formatter: ({ phone }) =>
phone == null ? "-" : hideTextAtIndex(phone, { start: 3, end: 6 })
formatter: ({phone}) =>
phone == null ? "-" : hideTextAtIndex(phone, {start: 3, end: 6})
},
{
label: "状态",
@@ -158,7 +159,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
label: "创建时间",
minWidth: 90,
prop: "creationTime",
formatter: ({ creationTime }) =>
formatter: ({creationTime}) =>
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
},
{
@@ -182,17 +183,17 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
password: ""
});
const pwdProgress = [
{ color: "#e74242", text: "非常弱" },
{ color: "#EFBD47", text: "弱" },
{ color: "#ffa500", text: "一般" },
{ color: "#1bbf1b", text: "强" },
{ color: "#008000", text: "非常强" }
{color: "#e74242", text: "非常弱"},
{color: "#EFBD47", text: "弱"},
{color: "#ffa500", text: "一般"},
{color: "#1bbf1b", text: "强"},
{color: "#008000", text: "非常强"}
];
// 当前密码强度（0-4）
const curScore = ref();
const roleOptions = ref([]);
function onChange({ row, index }) {
function onChange({row, index}) {
ElMessageBox.confirm(
`确认要<strong>${
row.state === 0 ? "停用" : "启用"
@@ -241,7 +242,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
async function handleDelete(row) {
await delUser([row.id]);
message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
message(`您删除了用户编号为${row.id}的这条数据`, {type: "success"});
onSearch();
}
@@ -285,7 +286,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
async function onSearch() {
loading.value = true;
const { data } = await getUserList(toRaw(form));
const {data} = await getUserList(toRaw(form));
dataList.value = data.items;
pagination.total = data.totalCount;
// pagination.pageSize = data.pageSize;
@@ -304,7 +305,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
onSearch();
};
function onTreeSelect({ id, selected }) {
function onTreeSelect({id, selected}) {
form.deptId = selected ? id : "";
onSearch();
}
@@ -320,6 +321,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
}
return newTreeList;
}
async function openDialog(title = "新增", row?: FormItemProps) {
let data: any = null;
//打开弹窗之前，如果是修改，还需进行查询详情
@@ -351,8 +353,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(editForm, { ref: formRef }),
beforeSure: (done, { options }) => {
contentRenderer: () => h(editForm, {ref: formRef}),
beforeSure: (done, {options}) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as FormItemProps;
@@ -394,7 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
contentRenderer: () =>
h(ReCropperPreview, {
ref: cropRef,
imgSrc: row.avatar || userAvatar,
imgSrc: getFileUrl(row.avatar, userAvatar),
onCropper: info => (avatarInfo.value = info)
}),
beforeSure: done => {
@@ -409,7 +411,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
watch(
pwdForm,
({ password }) =>
({password}) =>
(curScore.value = isAllEmpty(password) ? -1 : zxcvbn(password).score)
);
@@ -444,10 +446,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
</ElFormItem>
</ElForm>
<div class="mt-4 flex">
{pwdProgress.map(({ color, text }, idx) => (
{pwdProgress.map(({color, text}, idx) => (
<div
class="w-[19vw]"
style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
style={{marginLeft: idx !== 0 ? "4px" : 0}}
>
<ElProgress
striped
@@ -460,7 +462,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
/>
<p
class="text-center"
style={{ color: curScore.value === idx ? color : "" }}
style={{color: curScore.value === idx ? color : ""}}
>
{text}
</p>
@@ -492,7 +494,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
onSearch();
// 归属部门
const { data } = await getDeptList();
const {data} = await getDeptList();
higherDeptOptions.value = handleTree(data.items);
treeData.value = handleTree(data.items);
treeLoading.value = false;