mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-04 07:27:41 +08:00
feat: 完善系统管理-用户管理页面 (#688)
* feat: 完善系统管理-用户管理页面 * feat: 上传头像 * feat: 重置密码 * feat: 分配角色 * chore: update type * chore: done
This commit is contained in:
xiaoming
GitHub
parent
fad5483491
commit
bc1bd23e80
162
mock/system.ts
162
mock/system.ts
@ -1,86 +1,104 @@
|
||||
import { MockMethod } from "vite-plugin-mock";
|
||||
|
||||
export default [
|
||||
// 用户
|
||||
// 用户管理
|
||||
{
|
||||
url: "/user",
|
||||
method: "post",
|
||||
response: () => {
|
||||
response: ({ body }) => {
|
||||
let list = [
|
||||
{
|
||||
username: "admin",
|
||||
nickname: "admin",
|
||||
avatar: "https://avatars.githubusercontent.com/u/44761321",
|
||||
phone: "15888886789",
|
||||
email: "@email",
|
||||
sex: 0,
|
||||
id: 1,
|
||||
status: 1,
|
||||
dept: {
|
||||
// 部门id
|
||||
id: 103,
|
||||
// 部门名称
|
||||
name: "研发部门"
|
||||
},
|
||||
remark: "管理员",
|
||||
createTime: 1605456000000
|
||||
},
|
||||
{
|
||||
username: "common",
|
||||
nickname: "common",
|
||||
avatar: "https://avatars.githubusercontent.com/u/52823142",
|
||||
phone: "18288882345",
|
||||
email: "@email",
|
||||
sex: 1,
|
||||
id: 2,
|
||||
status: 1,
|
||||
dept: {
|
||||
id: 105,
|
||||
name: "测试部门"
|
||||
},
|
||||
remark: "普通用户",
|
||||
createTime: 1605456000000
|
||||
}
|
||||
];
|
||||
list = list.filter(item => item.username.includes(body?.username));
|
||||
list = list.filter(item =>
|
||||
String(item.status).includes(String(body?.status))
|
||||
);
|
||||
if (body.phone) list = list.filter(item => item.phone === body.phone);
|
||||
if (body.deptId) list = list.filter(item => item.dept.id === body.deptId);
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
list: [
|
||||
{
|
||||
username: "admin",
|
||||
nickname: "admin",
|
||||
remark: "管理员",
|
||||
deptId: 103,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 1,
|
||||
status: 0,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 103,
|
||||
name: "研发部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "pure",
|
||||
nickname: "pure",
|
||||
remark: "不要吓我",
|
||||
deptId: 104,
|
||||
postIds: [1],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 100,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 104,
|
||||
name: "市场部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小姐姐",
|
||||
nickname: "girl",
|
||||
remark: null,
|
||||
deptId: 106,
|
||||
postIds: null,
|
||||
mobile: "15888888888",
|
||||
sex: 1,
|
||||
id: 103,
|
||||
status: 1,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 106,
|
||||
name: "财务部门"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "小哥哥",
|
||||
nickname: "boy",
|
||||
remark: null,
|
||||
deptId: 107,
|
||||
postIds: [],
|
||||
mobile: "15888888888",
|
||||
sex: 0,
|
||||
id: 104,
|
||||
status: 0,
|
||||
createTime: 1605456000000,
|
||||
dept: {
|
||||
id: 107,
|
||||
name: "运维部门"
|
||||
}
|
||||
}
|
||||
],
|
||||
total: 4
|
||||
list,
|
||||
total: list.length, // 总条目数
|
||||
pageSize: 10, // 每页显示条目个数
|
||||
currentPage: 1 // 当前页数
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// 角色
|
||||
// 用户管理-获取所有角色列表
|
||||
{
|
||||
url: "/list-all-role",
|
||||
method: "get",
|
||||
response: () => {
|
||||
return {
|
||||
success: true,
|
||||
data: [
|
||||
{ id: 1, name: "超级管理员" },
|
||||
{ id: 2, name: "普通角色" }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
// 用户管理-根据userId，获取对应角色id列表（userId：用户id）
|
||||
{
|
||||
url: "/list-role-ids",
|
||||
method: "post",
|
||||
response: ({ body }) => {
|
||||
if (body.userId) {
|
||||
if (body.userId == 1) {
|
||||
return {
|
||||
success: true,
|
||||
data: [1]
|
||||
};
|
||||
} else if (body.userId == 2) {
|
||||
return {
|
||||
success: true,
|
||||
data: [2]
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
data: []
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
// 角色管理
|
||||
{
|
||||
url: "/role",
|
||||
method: "post",
|
||||
@ -89,7 +107,6 @@ export default [
|
||||
{
|
||||
createTime: 1605456000000, // 时间戳（毫秒ms）
|
||||
updateTime: 1684512000000,
|
||||
creator: "admin",
|
||||
id: 1,
|
||||
name: "超级管理员",
|
||||
code: "admin",
|
||||
@ -99,7 +116,6 @@ export default [
|
||||
{
|
||||
createTime: 1605456000000,
|
||||
updateTime: 1684512000000,
|
||||
creator: "admin",
|
||||
id: 2,
|
||||
name: "普通角色",
|
||||
code: "common",
|
||||
@ -123,7 +139,7 @@ export default [
|
||||
};
|
||||
}
|
||||
},
|
||||
// 部门
|
||||
// 部门管理
|
||||
{
|
||||
url: "/dept",
|
||||
method: "post",
|
||||
|
||||
61
package.json
61
package.json
@ -31,24 +31,25 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@howdyjs/mouse-menu": "^2.0.9",
|
||||
"@logicflow/core": "^1.2.10",
|
||||
"@logicflow/extension": "^1.2.10",
|
||||
"@logicflow/core": "^1.2.12",
|
||||
"@logicflow/extension": "^1.2.13",
|
||||
"@pureadmin/descriptions": "^1.1.1",
|
||||
"@pureadmin/table": "^2.3.3",
|
||||
"@pureadmin/utils": "^1.9.7",
|
||||
"@vueuse/core": "^10.3.0",
|
||||
"@vueuse/core": "^10.4.0",
|
||||
"@vueuse/motion": "^2.0.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zxcvbn-ts/core": "^3.0.3",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.4.0",
|
||||
"axios": "^1.5.0",
|
||||
"china-area-data": "^5.0.1",
|
||||
"cropperjs": "^1.5.13",
|
||||
"cropperjs": "^1.6.0",
|
||||
"dayjs": "^1.11.9",
|
||||
"echarts": "^5.4.3",
|
||||
"el-table-infinite-scroll": "^3.0.1",
|
||||
"element-plus": "^2.3.9",
|
||||
"intro.js": "^7.0.1",
|
||||
"element-plus": "^2.3.12",
|
||||
"intro.js": "^7.2.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.11.5",
|
||||
"md-editor-v3": "2.7.2",
|
||||
@ -58,12 +59,12 @@
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.1.6",
|
||||
"pinyin-pro": "^3.16.2",
|
||||
"pinyin-pro": "^3.16.3",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"swiper": "^10.1.0",
|
||||
"swiper": "^10.2.0",
|
||||
"typeit": "^8.7.1",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
@ -76,16 +77,16 @@
|
||||
"vue-tippy": "^6.3.1",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue-virtual-scroller": "2.0.0-beta.7",
|
||||
"vue-waterfall-plugin-next": "^2.2.2",
|
||||
"vue-waterfall-plugin-next": "^2.2.3",
|
||||
"vue3-danmaku": "^1.5.1",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"wavesurfer.js": "^7.1.2",
|
||||
"xgplayer": "^3.0.7",
|
||||
"wavesurfer.js": "^7.1.5",
|
||||
"xgplayer": "^3.0.8",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.6.6",
|
||||
"@commitlint/config-conventional": "^17.6.6",
|
||||
"@commitlint/cli": "^17.7.1",
|
||||
"@commitlint/config-conventional": "^17.7.0",
|
||||
"@iconify-icons/ep": "^1.2.12",
|
||||
"@iconify-icons/ri": "^1.2.10",
|
||||
"@iconify/vue": "^4.1.1",
|
||||
@ -94,47 +95,47 @@
|
||||
"@types/intro.js": "^5.1.1",
|
||||
"@types/js-cookie": "^3.0.3",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/node": "^18.17.4",
|
||||
"@types/node": "^18.17.12",
|
||||
"@types/nprogress": "0.2.0",
|
||||
"@types/qrcode": "^1.5.1",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/sortablejs": "^1.15.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.60.0",
|
||||
"@typescript-eslint/parser": "^5.60.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@vitejs/plugin-vue": "^4.3.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.3",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"cloc": "^2.11.0",
|
||||
"cssnano": "^6.0.1",
|
||||
"eslint": "^8.43.0",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.15.1",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.2",
|
||||
"lint-staged": "^13.3.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.27",
|
||||
"postcss": "^8.4.28",
|
||||
"postcss-html": "^1.5.0",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-scss": "^4.0.6",
|
||||
"postcss-scss": "^4.0.7",
|
||||
"prettier": "^2.8.8",
|
||||
"pretty-quick": "^3.1.3",
|
||||
"rimraf": "^5.0.1",
|
||||
"rollup-plugin-visualizer": "^5.9.2",
|
||||
"sass": "^1.65.1",
|
||||
"sass": "^1.66.1",
|
||||
"sass-loader": "^13.3.2",
|
||||
"stylelint": "^15.9.0",
|
||||
"stylelint": "^15.10.3",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^4.2.0",
|
||||
"stylelint-config-recess-order": "^4.3.0",
|
||||
"stylelint-config-recommended": "^12.0.0",
|
||||
"stylelint-config-recommended-scss": "^12.0.0",
|
||||
"stylelint-config-recommended-vue": "^1.4.0",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard": "^33.0.0",
|
||||
"stylelint-config-standard-scss": "^9.0.0",
|
||||
"stylelint-order": "^6.0.3",
|
||||
"stylelint-prettier": "^3.0.0",
|
||||
"stylelint-scss": "^5.0.1",
|
||||
"stylelint-scss": "^5.1.0",
|
||||
"svgo": "^3.0.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"terser": "^5.19.2",
|
||||
|
||||
1664
pnpm-lock.yaml
generated
1664
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,11 @@
|
||||
import { http } from "@/utils/http";
|
||||
|
||||
type Result = {
|
||||
success: boolean;
|
||||
data?: Array<any>;
|
||||
};
|
||||
|
||||
type ResultTable = {
|
||||
success: boolean;
|
||||
data?: {
|
||||
/** 列表数据 */
|
||||
@ -14,22 +19,27 @@ type Result = {
|
||||
};
|
||||
};
|
||||
|
||||
type ResultDept = {
|
||||
success: boolean;
|
||||
data?: Array<any>;
|
||||
};
|
||||
|
||||
/** 获取用户管理列表 */
|
||||
export const getUserList = (data?: object) => {
|
||||
return http.request<Result>("post", "/user", { data });
|
||||
return http.request<ResultTable>("post", "/user", { data });
|
||||
};
|
||||
|
||||
/** 用户管理-获取所有角色列表 */
|
||||
export const getAllRoleList = () => {
|
||||
return http.request<Result>("get", "/list-all-role");
|
||||
};
|
||||
|
||||
/** 用户管理-根据userId，获取对应角色id列表（userId：用户id） */
|
||||
export const getRoleIds = (data?: object) => {
|
||||
return http.request<Result>("post", "/list-role-ids", { data });
|
||||
};
|
||||
|
||||
/** 获取角色管理列表 */
|
||||
export const getRoleList = (data?: object) => {
|
||||
return http.request<Result>("post", "/role", { data });
|
||||
return http.request<ResultTable>("post", "/role", { data });
|
||||
};
|
||||
|
||||
/** 获取部门管理列表 */
|
||||
export const getDeptList = (data?: object) => {
|
||||
return http.request<ResultDept>("post", "/dept", { data });
|
||||
return http.request<Result>("post", "/dept", { data });
|
||||
};
|
||||
|
||||
@ -376,7 +376,7 @@ export default defineComponent({
|
||||
appendTo: "parent",
|
||||
// hideOnClick: false,
|
||||
animation: "perspective",
|
||||
placement: "bottom-start"
|
||||
placement: "bottom-end"
|
||||
});
|
||||
|
||||
setProps({
|
||||
|
||||
@ -49,7 +49,7 @@ const closeAllDialog = () => {
|
||||
/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
|
||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
|
||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
|
||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
|
||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
|
||||
*/
|
||||
const ReDialog = withInstall(reDialog);
|
||||
|
||||
|
||||
@ -29,9 +29,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
|
||||
>
|
||||
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
|
||||
<topCollapse
|
||||
v-if="device === 'mobile'"
|
||||
class="hamburger-container"
|
||||
|
||||
@ -11,25 +11,29 @@ const guide = () => {
|
||||
.setOptions({
|
||||
steps: [
|
||||
{
|
||||
element: document.querySelector("#header-notice"),
|
||||
element: document.querySelector("#header-notice") as
|
||||
| string
|
||||
| HTMLElement,
|
||||
title: "消息通知",
|
||||
intro: "您可以在这里查看管理员发送的消息",
|
||||
position: "left"
|
||||
},
|
||||
{
|
||||
element: document.querySelector("#header-translation"),
|
||||
element: document.querySelector("#header-translation") as
|
||||
| string
|
||||
| HTMLElement,
|
||||
title: "国际化",
|
||||
intro: "您可以在这里进行语言切换",
|
||||
position: "left"
|
||||
},
|
||||
{
|
||||
element: document.querySelector(".set-icon"),
|
||||
element: document.querySelector(".set-icon") as string | HTMLElement,
|
||||
title: "项目配置",
|
||||
intro: "您可以在这里查看项目配置",
|
||||
position: "left"
|
||||
},
|
||||
{
|
||||
element: document.querySelector(".tags-view"),
|
||||
element: document.querySelector(".tags-view") as string | HTMLElement,
|
||||
title: "多标签页",
|
||||
intro: "这里是您访问过的页面的历史",
|
||||
position: "bottom"
|
||||
|
||||
@ -89,7 +89,6 @@ const {
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
border
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 32 }"
|
||||
align-whole="center"
|
||||
@ -102,7 +101,7 @@ const {
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
|
||||
@ -103,7 +103,6 @@ const {
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
@ -115,7 +114,7 @@ const {
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
|
||||
176
src/views/system/user/form/index.vue
Normal file
176
src/views/system/user/form/index.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "../utils/rule";
|
||||
import { FormProps } from "../utils/types";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
title: "新增",
|
||||
higherDeptOptions: [],
|
||||
parentId: 0,
|
||||
nickname: "",
|
||||
username: "",
|
||||
password: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
sex: "",
|
||||
status: 1,
|
||||
remark: ""
|
||||
})
|
||||
});
|
||||
|
||||
const sexOptions = [
|
||||
{
|
||||
value: 0,
|
||||
label: "男"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "女"
|
||||
}
|
||||
];
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
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-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="用户昵称" prop="nickname">
|
||||
<el-input
|
||||
v-model="newFormInline.nickname"
|
||||
clearable
|
||||
placeholder="请输入用户昵称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="用户名称" prop="username">
|
||||
<el-input
|
||||
v-model="newFormInline.username"
|
||||
clearable
|
||||
placeholder="请输入用户名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col
|
||||
:value="12"
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
v-if="newFormInline.title === '新增'"
|
||||
>
|
||||
<el-form-item label="用户密码" prop="password">
|
||||
<el-input
|
||||
v-model="newFormInline.password"
|
||||
clearable
|
||||
placeholder="请输入用户密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input
|
||||
v-model="newFormInline.phone"
|
||||
clearable
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="newFormInline.email"
|
||||
clearable
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="用户性别">
|
||||
<el-select
|
||||
v-model="newFormInline.sex"
|
||||
placeholder="请选择用户性别"
|
||||
class="w-full"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in sexOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="归属部门">
|
||||
<el-cascader
|
||||
class="w-full"
|
||||
v-model="newFormInline.parentId"
|
||||
:options="newFormInline.higherDeptOptions"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择归属部门"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col
|
||||
:value="12"
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
v-if="newFormInline.title === '新增'"
|
||||
>
|
||||
<el-form-item label="用户状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.status"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
placeholder="请输入备注信息"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
53
src/views/system/user/form/role.vue
Normal file
53
src/views/system/user/form/role.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { RoleFormProps } from "../utils/types";
|
||||
|
||||
const props = withDefaults(defineProps<RoleFormProps>(), {
|
||||
formInline: () => ({
|
||||
username: "",
|
||||
nickname: "",
|
||||
roleOptions: [],
|
||||
ids: []
|
||||
})
|
||||
});
|
||||
|
||||
const newFormInline = ref(props.formInline);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form :model="newFormInline">
|
||||
<el-row :gutter="30">
|
||||
<!-- <re-col>
|
||||
<el-form-item label="用户名称" prop="username">
|
||||
<el-input disabled v-model="newFormInline.username" />
|
||||
</el-form-item>
|
||||
</re-col> -->
|
||||
<re-col>
|
||||
<el-form-item label="用户昵称" prop="nickname">
|
||||
<el-input disabled v-model="newFormInline.nickname" />
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col>
|
||||
<el-form-item label="角色列表" prop="ids">
|
||||
<el-select
|
||||
v-model="newFormInline.ids"
|
||||
placeholder="请选择"
|
||||
class="w-full"
|
||||
clearable
|
||||
multiple
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in newFormInline.roleOptions"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -1,209 +0,0 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getUserList } from "@/api/system";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, computed, onMounted } from "vue";
|
||||
|
||||
export function useUser() {
|
||||
const form = reactive({
|
||||
username: "",
|
||||
mobile: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const switchLoadMap = ref({});
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
type: "index",
|
||||
width: 70,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
label: "用户编号",
|
||||
prop: "id",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "用户名称",
|
||||
prop: "username",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "用户昵称",
|
||||
prop: "nickname",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
minWidth: 90,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.sex === 1 ? "danger" : ""}
|
||||
effect="plain"
|
||||
>
|
||||
{row.sex === 1 ? "女" : "男"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "部门",
|
||||
prop: "dept",
|
||||
minWidth: 90,
|
||||
formatter: ({ dept }) => dept.name
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 90,
|
||||
cellRenderer: scope => (
|
||||
<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}
|
||||
active-text="已开启"
|
||||
inactive-text="已关闭"
|
||||
inline-prompt
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 90,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 180,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.username
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message("已成功修改用户状态", {
|
||||
type: "success"
|
||||
});
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getUserList();
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import tree from "./tree.vue";
|
||||
import { useUser } from "./hook";
|
||||
import { useUser } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Upload from "@iconify-icons/ri/upload-line";
|
||||
import Role from "@iconify-icons/ri/admin-line";
|
||||
import Password from "@iconify-icons/ri/lock-password-line";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
@ -18,28 +19,47 @@ defineOptions({
|
||||
name: "User"
|
||||
});
|
||||
|
||||
const treeRef = ref();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
treeData,
|
||||
treeLoading,
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
openDialog,
|
||||
onTreeSelect,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleUpload,
|
||||
handleReset,
|
||||
handleRole,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useUser();
|
||||
} = useUser(tableRef, treeRef);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<tree class="w-[17%] float-left" />
|
||||
<div class="float-right w-[82%]">
|
||||
<div class="flex justify-between">
|
||||
<tree
|
||||
ref="treeRef"
|
||||
class="min-w-[200px] mr-2"
|
||||
:treeData="treeData"
|
||||
:treeLoading="treeLoading"
|
||||
@tree-select="onTreeSelect"
|
||||
/>
|
||||
<div class="w-[calc(100%-200px)]">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
@ -54,9 +74,9 @@ const {
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="mobile">
|
||||
<el-form-item label="手机号码：" prop="phone">
|
||||
<el-input
|
||||
v-model="form.mobile"
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
@ -88,15 +108,48 @@ const {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
|
||||
<PureTableBar
|
||||
title="用户管理（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增用户
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<div
|
||||
v-if="selectedNum > 0"
|
||||
v-motion-fade
|
||||
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<span
|
||||
style="font-size: var(--el-font-size-base)"
|
||||
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||
>
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1">
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
border
|
||||
row-key="id"
|
||||
ref="tableRef"
|
||||
adaptive
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
@ -107,7 +160,7 @@ const {
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@ -120,12 +173,15 @@ const {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除用户编号为${row.id}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
@ -133,7 +189,6 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
@ -145,11 +200,23 @@ const {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(More)"
|
||||
@click="handleUpdate(row)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Upload)"
|
||||
@click="handleUpload(row)"
|
||||
>
|
||||
上传头像
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
@ -157,6 +224,7 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Password)"
|
||||
@click="handleReset(row)"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
@ -168,6 +236,7 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Role)"
|
||||
@click="handleRole(row)"
|
||||
>
|
||||
分配角色
|
||||
</el-button>
|
||||
@ -188,6 +257,10 @@ const {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
|
||||
import { ref, computed, watch, getCurrentInstance } from "vue";
|
||||
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
// import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
@ -20,8 +18,14 @@ interface Tree {
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
treeLoading: Boolean,
|
||||
treeData: Array
|
||||
});
|
||||
|
||||
const emit = defineEmits(["tree-select"]);
|
||||
|
||||
const treeRef = ref();
|
||||
const treeData = ref([]);
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
@ -59,6 +63,12 @@ function nodeClick(value) {
|
||||
v.highlight = false;
|
||||
}
|
||||
});
|
||||
emit(
|
||||
"tree-select",
|
||||
highlightMap.value[nodeId]?.highlight
|
||||
? Object.assign({ ...value, selected: true })
|
||||
: Object.assign({ ...value, selected: false })
|
||||
);
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(status) {
|
||||
@ -69,8 +79,8 @@ function toggleRowExpansionAll(status) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置状态（选中状态、搜索框值、树初始化） */
|
||||
function onReset() {
|
||||
/** 重置部门树状态（选中状态、搜索框值、树初始化） */
|
||||
function onTreeReset() {
|
||||
highlightMap.value = {};
|
||||
searchValue.value = "";
|
||||
toggleRowExpansionAll(true);
|
||||
@ -80,23 +90,18 @@ watch(searchValue, val => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getDeptList();
|
||||
treeData.value = handleTree(data);
|
||||
});
|
||||
defineExpose({ onTreeReset });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="props.treeLoading"
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
:style="{ minHeight: `calc(100vh - 133px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[34px]">
|
||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||
部门列表
|
||||
</p>
|
||||
<el-input
|
||||
style="flex: 2"
|
||||
class="ml-2"
|
||||
size="small"
|
||||
v-model="searchValue"
|
||||
placeholder="请输入部门名称"
|
||||
@ -130,17 +135,17 @@ onMounted(async () => {
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<!-- <el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
@click="onReset"
|
||||
@click="onTreeReset"
|
||||
>
|
||||
重置状态
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@ -148,7 +153,7 @@ onMounted(async () => {
|
||||
<el-divider />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
:data="props.treeData"
|
||||
node-key="id"
|
||||
size="small"
|
||||
:props="defaultProps"
|
||||
@ -166,12 +171,16 @@ onMounted(async () => {
|
||||
'flex',
|
||||
'items-center',
|
||||
'select-none',
|
||||
'hover:text-primary',
|
||||
searchValue.trim().length > 0 &&
|
||||
node.label.includes(searchValue) &&
|
||||
'text-red-500',
|
||||
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
|
||||
]"
|
||||
:style="{
|
||||
color: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary)'
|
||||
: '',
|
||||
background: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary-light-7)'
|
||||
: 'transparent'
|
||||
@ -197,4 +206,8 @@ onMounted(async () => {
|
||||
:deep(.el-divider) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
--el-tree-node-hover-bg-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
60
src/views/system/user/upload.vue
Normal file
60
src/views/system/user/upload.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
|
||||
const props = defineProps({
|
||||
imgSrc: String
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cropper"]);
|
||||
|
||||
const infos = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
|
||||
function onCropper({ base64, blob, info }) {
|
||||
infos.value = info;
|
||||
cropperImg.value = base64;
|
||||
emit("cropper", { base64, blob, info });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover :visible="showPopover" placement="right" width="18vw">
|
||||
<template #reference>
|
||||
<div class="w-[18vw]">
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
:src="props.imgSrc"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
<p class="mt-1 text-center" v-show="showPopover">
|
||||
温馨提示：右键上方裁剪区可开启功能菜单
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
521
src/views/system/user/utils/hook.tsx
Normal file
521
src/views/system/user/utils/hook.tsx
Normal file
@ -0,0 +1,521 @@
|
||||
import "./reset.css";
|
||||
import dayjs from "dayjs";
|
||||
import roleForm from "../form/role.vue";
|
||||
import editForm from "../form/index.vue";
|
||||
import { zxcvbn } from "@zxcvbn-ts/core";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { message } from "@/utils/message";
|
||||
import croppingUpload from "../upload.vue";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import type { FormItemProps, RoleFormItemProps } from "../utils/types";
|
||||
import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
|
||||
import {
|
||||
getRoleIds,
|
||||
getDeptList,
|
||||
getUserList,
|
||||
getAllRoleList
|
||||
} from "@/api/system";
|
||||
import {
|
||||
ElForm,
|
||||
ElInput,
|
||||
ElFormItem,
|
||||
ElProgress,
|
||||
ElMessageBox
|
||||
} from "element-plus";
|
||||
import {
|
||||
type Ref,
|
||||
h,
|
||||
ref,
|
||||
toRaw,
|
||||
watch,
|
||||
computed,
|
||||
reactive,
|
||||
onMounted
|
||||
} from "vue";
|
||||
|
||||
export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
const form = reactive({
|
||||
// 左侧部门树的id
|
||||
deptId: "",
|
||||
username: "",
|
||||
phone: "",
|
||||
status: ""
|
||||
});
|
||||
const formRef = ref();
|
||||
const ruleFormRef = ref();
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
// 上传头像信息
|
||||
const avatarInfo = ref();
|
||||
const switchLoadMap = ref({});
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const higherDeptOptions = ref();
|
||||
const treeData = ref([]);
|
||||
const treeLoading = ref(true);
|
||||
const selectedNum = ref(0);
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||
type: "selection",
|
||||
fixed: "left",
|
||||
reserveSelection: true // 数据刷新后保留选项
|
||||
},
|
||||
{
|
||||
label: "用户编号",
|
||||
prop: "id",
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
label: "用户头像",
|
||||
prop: "avatar",
|
||||
cellRenderer: ({ row }) => (
|
||||
<el-image
|
||||
fit="cover"
|
||||
preview-teleported={true}
|
||||
src={row.avatar}
|
||||
preview-src-list={Array.of(row.avatar)}
|
||||
class="w-[24px] h-[24px] rounded-full align-middle"
|
||||
/>
|
||||
),
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
label: "用户名称",
|
||||
prop: "username",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "用户昵称",
|
||||
prop: "nickname",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
minWidth: 90,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.sex === 1 ? "danger" : ""}
|
||||
effect="plain"
|
||||
>
|
||||
{row.sex === 1 ? "女" : "男"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "部门",
|
||||
prop: "dept.name",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "phone",
|
||||
minWidth: 90,
|
||||
formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 90,
|
||||
cellRenderer: scope => (
|
||||
<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}
|
||||
active-text="已启用"
|
||||
inactive-text="已停用"
|
||||
inline-prompt
|
||||
style={switchStyle.value}
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 90,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 180,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
// 重置的新密码
|
||||
const pwdForm = reactive({
|
||||
newPwd: ""
|
||||
});
|
||||
const pwdProgress = [
|
||||
{ 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 }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.status === 0 ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.username
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message("已成功修改用户状态", {
|
||||
type: "success"
|
||||
});
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
function handleSelectionChange(val) {
|
||||
selectedNum.value = val.length;
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
|
||||
/** 取消选择 */
|
||||
function onSelectionCancel() {
|
||||
selectedNum.value = 0;
|
||||
// 用于多选表格，清空用户的选择
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
}
|
||||
|
||||
/** 批量删除 */
|
||||
function onbatchDel() {
|
||||
// 返回当前选中的行
|
||||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
|
||||
message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getUserList(toRaw(form));
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
pagination.pageSize = data.pageSize;
|
||||
pagination.currentPage = data.currentPage;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
form.deptId = "";
|
||||
treeRef.value.onTreeReset();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
function onTreeSelect({ id, selected }) {
|
||||
form.deptId = selected ? id : "";
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function formatHigherDeptOptions(treeList) {
|
||||
// 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
|
||||
if (!treeList || !treeList.length) return;
|
||||
const newTreeList = [];
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
treeList[i].disabled = treeList[i].status === 0 ? true : false;
|
||||
formatHigherDeptOptions(treeList[i].children);
|
||||
newTreeList.push(treeList[i]);
|
||||
}
|
||||
return newTreeList;
|
||||
}
|
||||
|
||||
function openDialog(title = "新增", row?: FormItemProps) {
|
||||
addDialog({
|
||||
title: `${title}用户`,
|
||||
props: {
|
||||
formInline: {
|
||||
title,
|
||||
higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
|
||||
parentId: row?.dept.id ?? 0,
|
||||
nickname: row?.nickname ?? "",
|
||||
username: row?.username ?? "",
|
||||
password: row?.password ?? "",
|
||||
phone: row?.phone ?? "",
|
||||
email: row?.email ?? "",
|
||||
sex: row?.sex ?? "",
|
||||
status: row?.status ?? 1,
|
||||
remark: row?.remark ?? ""
|
||||
}
|
||||
},
|
||||
width: "46%",
|
||||
draggable: true,
|
||||
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.username}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
console.log("curData", curData);
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
chores();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 上传头像 */
|
||||
function handleUpload(row) {
|
||||
addDialog({
|
||||
title: "裁剪、上传头像",
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () =>
|
||||
h(croppingUpload, {
|
||||
imgSrc: row.avatar,
|
||||
onCropper: info => (avatarInfo.value = info)
|
||||
}),
|
||||
beforeSure: done => {
|
||||
console.log("裁剪后的图片信息：", avatarInfo.value);
|
||||
// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
pwdForm,
|
||||
({ newPwd }) =>
|
||||
(curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
|
||||
);
|
||||
|
||||
/** 重置密码 */
|
||||
function handleReset(row) {
|
||||
addDialog({
|
||||
title: `重置 ${row.username} 用户的密码`,
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => (
|
||||
<>
|
||||
<ElForm ref={ruleFormRef} model={pwdForm}>
|
||||
<ElFormItem
|
||||
prop="newPwd"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入新密码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ElInput
|
||||
clearable
|
||||
show-password
|
||||
type="password"
|
||||
v-model={pwdForm.newPwd}
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="mt-4 flex">
|
||||
{pwdProgress.map(({ color, text }, idx) => (
|
||||
<div
|
||||
class="w-[19vw]"
|
||||
style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
|
||||
>
|
||||
<ElProgress
|
||||
striped
|
||||
striped-flow
|
||||
duration={curScore.value === idx ? 6 : 0}
|
||||
percentage={curScore.value >= idx ? 100 : 0}
|
||||
color={color}
|
||||
stroke-width={10}
|
||||
show-text={false}
|
||||
/>
|
||||
<p
|
||||
class="text-center"
|
||||
style={{ color: curScore.value === idx ? color : "" }}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
closeCallBack: () => (pwdForm.newPwd = ""),
|
||||
beforeSure: done => {
|
||||
ruleFormRef.value.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
message(`已成功重置 ${row.username} 用户的密码`, {
|
||||
type: "success"
|
||||
});
|
||||
console.log(pwdForm.newPwd);
|
||||
// 根据实际业务使用pwdForm.newPwd和row里的某些字段去调用重置用户密码接口即可
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 分配角色 */
|
||||
async function handleRole(row) {
|
||||
// 选中的角色列表
|
||||
const ids = (await getRoleIds({ userId: row.id })).data ?? [];
|
||||
addDialog({
|
||||
title: `分配 ${row.username} 用户的角色`,
|
||||
props: {
|
||||
formInline: {
|
||||
username: row?.username ?? "",
|
||||
nickname: row?.nickname ?? "",
|
||||
roleOptions: roleOptions.value ?? [],
|
||||
ids
|
||||
}
|
||||
},
|
||||
width: "400px",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(roleForm),
|
||||
beforeSure: (done, { options }) => {
|
||||
const curData = options.props.formInline as RoleFormItemProps;
|
||||
console.log("curIds", curData.ids);
|
||||
// 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
|
||||
done(); // 关闭弹框
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
treeLoading.value = true;
|
||||
onSearch();
|
||||
|
||||
// 归属部门
|
||||
const { data } = await getDeptList();
|
||||
higherDeptOptions.value = handleTree(data);
|
||||
treeData.value = handleTree(data);
|
||||
treeLoading.value = false;
|
||||
|
||||
// 角色列表
|
||||
roleOptions.value = (await getAllRoleList()).data;
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
treeData,
|
||||
treeLoading,
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
openDialog,
|
||||
onTreeSelect,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleUpload,
|
||||
handleReset,
|
||||
handleRole,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
5
src/views/system/user/utils/reset.css
Normal file
5
src/views/system/user/utils/reset.css
Normal file
@ -0,0 +1,5 @@
|
||||
/** 局部重置 ElProgress 的部分样式 */
|
||||
.el-progress-bar__outer,
|
||||
.el-progress-bar__inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
39
src/views/system/user/utils/rule.ts
Normal file
39
src/views/system/user/utils/rule.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
|
||||
username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
|
||||
password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
36
src/views/system/user/utils/types.ts
Normal file
36
src/views/system/user/utils/types.ts
Normal file
@ -0,0 +1,36 @@
|
||||
interface FormItemProps {
|
||||
id?: number;
|
||||
/** 用于判断是`新增`还是`修改` */
|
||||
title: string;
|
||||
higherDeptOptions: Record<string, unknown>[];
|
||||
parentId: number;
|
||||
nickname: string;
|
||||
username: string;
|
||||
password: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
sex: string | number;
|
||||
status: number;
|
||||
dept?: {
|
||||
id?: number;
|
||||
name?: string;
|
||||
};
|
||||
remark: string;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
|
||||
interface RoleFormItemProps {
|
||||
username: string;
|
||||
nickname: string;
|
||||
/** 角色列表 */
|
||||
roleOptions: any[];
|
||||
/** 选中的角色列表 */
|
||||
ids: Record<number, unknown>[];
|
||||
}
|
||||
interface RoleFormProps {
|
||||
formInline: RoleFormItemProps;
|
||||
}
|
||||
|
||||
export type { FormItemProps, FormProps, RoleFormItemProps, RoleFormProps };
|
||||
Loading…
x
Reference in New Issue
Block a user