feat: 添加用户管理
This commit is contained in:
@@ -75,12 +75,14 @@
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
{{ t("buttons:Deselect") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||
<el-button type="danger" text class="mr-1">
|
||||
{{ t("buttons:DeleteInBatches") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
|
||||
@@ -60,12 +60,14 @@
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
{{ t("buttons:Deselect") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||
<el-button type="danger" text class="mr-1">
|
||||
{{ t("buttons:DeleteInBatches") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
|
||||
211
src/views/system/user/components/form.vue
Normal file
211
src/views/system/user/components/form.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { isEmail, isPhone } from "@pureadmin/utils";
|
||||
import type { FormRules } from "element-plus";
|
||||
interface FormItemProps {
|
||||
id?: string;
|
||||
/** 用于判断是`新增`还是`修改` */
|
||||
way: string;
|
||||
higherOptions: Record<string, unknown>[];
|
||||
username: string;
|
||||
nickname: string;
|
||||
password?: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
gender: string | number;
|
||||
status: number;
|
||||
department_id: string;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
/** 自定义表单规则校验 */
|
||||
const formRules = reactive<FormRules>({
|
||||
username: [{ required: true, message: "用户账号为必填项", trigger: "blur" }],
|
||||
nickname: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
|
||||
gender: [{ required: true, message: "用户性别为必选项", trigger: "blur" }],
|
||||
status: [{ required: true, message: "用户状态为必选项", trigger: "blur" }],
|
||||
department_id: [
|
||||
{ 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"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
higherOptions: [],
|
||||
way: "新增",
|
||||
username: "",
|
||||
nickname: "",
|
||||
password: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
gender: "",
|
||||
status: 1,
|
||||
department_id: ""
|
||||
})
|
||||
});
|
||||
|
||||
const sexOptions = [
|
||||
{
|
||||
value: 1,
|
||||
label: "男"
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
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="username">
|
||||
<el-input
|
||||
v-model="newFormInline.username"
|
||||
clearable
|
||||
placeholder="请输入用户账号~"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<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 v-if="newFormInline.way === '新增'" :value="12" :xs="24" :sm="24">
|
||||
<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="用户性别" prop="gender">
|
||||
<el-select
|
||||
v-model="newFormInline.gender"
|
||||
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="归属部门" prop="department_id">
|
||||
<el-cascader
|
||||
v-model="newFormInline.department_id"
|
||||
class="w-full"
|
||||
:options="newFormInline.higherOptions"
|
||||
: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">
|
||||
<el-form-item label="用户状态" prop="status">
|
||||
<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>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
95
src/views/system/user/components/permission.vue
Normal file
95
src/views/system/user/components/permission.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="treeSearchValue"
|
||||
placeholder="请输入权限进行搜索"
|
||||
class="mb-1"
|
||||
clearable
|
||||
@input="onQueryChanged"
|
||||
/>
|
||||
<div class="flex flex-wrap">
|
||||
<el-checkbox v-model="isExpandAll" label="展开/折叠" />
|
||||
</div>
|
||||
<el-tree-v2
|
||||
ref="permissionRef"
|
||||
show-checkbox
|
||||
:data="permissionTreeData"
|
||||
:props="treeProps"
|
||||
:filter-method="filterMethod"
|
||||
>
|
||||
<template #default="{ node }">
|
||||
<span>{{ transformI18n(node.label) }}</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{ id: string }>(), {
|
||||
id: ""
|
||||
});
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
import { getUserPermissionsAPI, getPermissionListAPI } from "@/api/system";
|
||||
import { PermissionInfo } from "types/system";
|
||||
|
||||
/**树形选择节点 */
|
||||
const permissionRef = ref(null);
|
||||
/**树形选择配置 */
|
||||
const treeProps = {
|
||||
value: "id",
|
||||
label: "title",
|
||||
children: "children",
|
||||
disabled: "disabled"
|
||||
};
|
||||
const treeSearchValue = ref();
|
||||
const isExpandAll = ref(false);
|
||||
|
||||
/**权限列表 */
|
||||
const permissions = ref<PermissionInfo[]>([]);
|
||||
/**权限树 */
|
||||
const permissionTreeData = ref([]);
|
||||
|
||||
/**获取权限列表 */
|
||||
const getPermissions = async () => {
|
||||
const { data } = await getPermissionListAPI({
|
||||
page: 1,
|
||||
pageSize: 999999
|
||||
});
|
||||
permissions.value = getKeyList(data.result, "id");
|
||||
for (const key in data.result) {
|
||||
data.result[key]["disabled"] = true;
|
||||
}
|
||||
permissionTreeData.value = handleTree(data.result, "id", "parent_id");
|
||||
};
|
||||
/**获取用户权限 */
|
||||
const getUserPermissions = async () => {
|
||||
const { data } = await getUserPermissionsAPI(props.id);
|
||||
let permission = data;
|
||||
permissionRef.value.setCheckedKeys(permission);
|
||||
};
|
||||
const onQueryChanged = (query: string) => {
|
||||
permissionRef.value!.filter(query);
|
||||
};
|
||||
const filterMethod = (query: string, node) => {
|
||||
return transformI18n(node.title)!.includes(query);
|
||||
};
|
||||
watch(isExpandAll, val => {
|
||||
val
|
||||
? permissionRef.value.setExpandedKeys(permissions.value)
|
||||
: permissionRef.value.setExpandedKeys([]);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await getPermissions();
|
||||
await getUserPermissions();
|
||||
isExpandAll.value = true;
|
||||
});
|
||||
function getRef() {
|
||||
return permissionRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
64
src/views/system/user/components/role.vue
Normal file
64
src/views/system/user/components/role.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
interface RoleFormItemProps {
|
||||
/**用户账号 */
|
||||
username: string;
|
||||
/**用户昵称 */
|
||||
nickname: string;
|
||||
/** 角色列表 */
|
||||
roleOptions: any[];
|
||||
/** 选中的角色列表 */
|
||||
ids: Record<number, unknown>[];
|
||||
}
|
||||
interface RoleFormProps {
|
||||
formInline: RoleFormItemProps;
|
||||
}
|
||||
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 v-model="newFormInline.username" disabled />
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col>
|
||||
<el-form-item label="用户姓名" prop="nickname">
|
||||
<el-input v-model="newFormInline.nickname" disabled />
|
||||
</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.role_id"
|
||||
:label="item.role_name"
|
||||
>
|
||||
{{ item.role_name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
212
src/views/system/user/components/tree.vue
Normal file
212
src/views/system/user/components/tree.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
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 More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import ExpandIcon from "../svg/expand.svg?component";
|
||||
import UnExpandIcon from "../svg/unexpand.svg?component";
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
name: string;
|
||||
highlight?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
treeLoading: Boolean,
|
||||
treeData: Array
|
||||
});
|
||||
|
||||
const emit = defineEmits(["tree-select"]);
|
||||
|
||||
const treeRef = ref();
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name"
|
||||
};
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
return data.name.includes(value);
|
||||
};
|
||||
|
||||
function nodeClick(value) {
|
||||
const nodeId = value.$treeNodeId;
|
||||
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
|
||||
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: false
|
||||
})
|
||||
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: true
|
||||
});
|
||||
Object.values(highlightMap.value).forEach((v: Tree) => {
|
||||
if (v.id !== nodeId) {
|
||||
v.highlight = false;
|
||||
}
|
||||
});
|
||||
emit(
|
||||
"tree-select",
|
||||
highlightMap.value[nodeId]?.highlight
|
||||
? Object.assign({ ...value, selected: true })
|
||||
: Object.assign({ ...value, selected: false })
|
||||
);
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(status) {
|
||||
isExpand.value = status;
|
||||
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status;
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置部门树状态（选中状态、搜索框值、树初始化） */
|
||||
function onTreeReset() {
|
||||
highlightMap.value = {};
|
||||
searchValue.value = "";
|
||||
toggleRowExpansionAll(true);
|
||||
}
|
||||
|
||||
watch(searchValue, val => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
defineExpose({ onTreeReset });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="props.treeLoading"
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
:style="{ minHeight: `calc(100vh - 145px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[34px]">
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
class="ml-2"
|
||||
size="small"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
icon="ri:search-line"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<IconifyIconOffline
|
||||
class="w-[28px] cursor-pointer"
|
||||
width="18px"
|
||||
:icon="More2Fill"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
|
||||
@click="toggleRowExpansionAll(!isExpand)"
|
||||
>
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<!-- <el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
@click="onTreeReset"
|
||||
>
|
||||
重置状态
|
||||
</el-button>
|
||||
</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="props.treeData"
|
||||
node-key="id"
|
||||
size="small"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span
|
||||
:class="[
|
||||
'pl-1',
|
||||
'pr-1',
|
||||
'rounded',
|
||||
'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'
|
||||
}"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.type === 1
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
--el-tree-node-hover-bg-color: transparent;
|
||||
}
|
||||
</style>
|
||||
72
src/views/system/user/components/upload.vue
Normal file
72
src/views/system/user/components/upload.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<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 popoverRef = 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 });
|
||||
}
|
||||
|
||||
function hidePopover() {
|
||||
popoverRef.value.hide();
|
||||
}
|
||||
|
||||
defineExpose({ hidePopover });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
: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 v-show="showPopover" class="mt-1 text-center">
|
||||
温馨提示：右键上方裁剪区可开启功能菜单
|
||||
</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>
|
||||
290
src/views/system/user/index.vue
Normal file
290
src/views/system/user/index.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import tree from "./components/tree.vue";
|
||||
import { useUser } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
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";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { onBeforeRouteUpdate } from "vue-router";
|
||||
defineOptions({
|
||||
name: "SystemUser"
|
||||
});
|
||||
const { t } = useI18n();
|
||||
|
||||
const treeRef = ref();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
treeData,
|
||||
treeLoading,
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
openPerDialog,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
openDialog,
|
||||
onTreeSelect,
|
||||
handleDelete,
|
||||
handleUpload,
|
||||
handleReset,
|
||||
handleRole,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useUser(tableRef, treeRef);
|
||||
onBeforeRouteUpdate((to, from, next) => {
|
||||
onSearch();
|
||||
next();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="用户名称：" prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
{{ t("buttons:Search") }}
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
{{ t("buttons:Reset") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
{{ t("buttons:Add") }}
|
||||
</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">
|
||||
{{ t("buttons:Deselect") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1">
|
||||
{{ t("buttons:DeleteInBatches") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
adaptive
|
||||
border
|
||||
stripe
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
: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)"
|
||||
>
|
||||
{{ t("buttons:Update") }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除用户名称为${row.name}的这条数据?`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
{{ t("buttons:Delete") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(More)"
|
||||
>{{ t("buttons:More") }}</el-button
|
||||
>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Upload)"
|
||||
@click="handleUpload(row)"
|
||||
>
|
||||
{{ t("buttons:UploadAvatar") }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Password)"
|
||||
@click="handleReset(row)"
|
||||
>
|
||||
{{ t("buttons:ResetPassword") }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Role)"
|
||||
@click="handleRole(row)"
|
||||
>
|
||||
{{ t("buttons:RoleAllocation") }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="openPerDialog(row)"
|
||||
>
|
||||
{{ t("buttons:PermissionDetails") }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/views/system/user/svg/expand.svg
Normal file
1
src/views/system/user/svg/expand.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
|
||||
|
After Width: | Height: | Size: 161 B |
1
src/views/system/user/svg/unexpand.svg
Normal file
1
src/views/system/user/svg/unexpand.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5 1.41 1.42L22 12l-7.92-7.92-1.41 1.42 5.5 5.5H4z"/></svg>
|
||||
|
After Width: | Height: | Size: 163 B |
669
src/views/system/user/utils/hook.tsx
Normal file
669
src/views/system/user/utils/hook.tsx
Normal file
@@ -0,0 +1,669 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../components/form.vue";
|
||||
import roleForm from "../components/role.vue";
|
||||
import permissionForm from "../components/permission.vue";
|
||||
import { zxcvbn } from "@zxcvbn-ts/core";
|
||||
import { message } from "@/utils/message";
|
||||
import croppingUpload from "../components/upload.vue";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
|
||||
import Avatar from "@/assets/user.png";
|
||||
import {
|
||||
getDepartmentListAPI,
|
||||
getUserListAPI,
|
||||
postAddUserAPI,
|
||||
putUpdateUserAPI,
|
||||
deleteUserAPI,
|
||||
putUpdateUserPasswordAPI,
|
||||
putUpdateUserRolesAPI,
|
||||
getUserRolesAPI,
|
||||
deleteUserListAPI,
|
||||
getUserGetDepartmentRolesAPI
|
||||
} from "@/api/system";
|
||||
import { postUploadAvatarAPI } from "@/api/user";
|
||||
import { ElForm, ElInput, ElFormItem, ElProgress } from "element-plus";
|
||||
import { type Ref, h, ref, watch, computed, reactive, onMounted } from "vue";
|
||||
import type { DepartmentInfo, UserInfo } from "types/system";
|
||||
|
||||
import { handleTree } from "@/utils/tree";
|
||||
|
||||
export const useUser = (tableRef: Ref, treeRef: Ref) => {
|
||||
/**查询表单 */
|
||||
const form = reactive({
|
||||
id: "",
|
||||
department_id: "",
|
||||
username: "",
|
||||
nickname: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
gender: "",
|
||||
status: ""
|
||||
});
|
||||
const formRef = ref(null);
|
||||
const ruleFormRef = ref(null);
|
||||
/**
|
||||
* 数据列表
|
||||
*/
|
||||
const dataList = ref<UserInfo[]>([]);
|
||||
/**
|
||||
* 加载状态
|
||||
*/
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
// 上传头像信息
|
||||
const avatarInfo = ref();
|
||||
/**
|
||||
* 标签样式
|
||||
*/
|
||||
const { tagStyle } = usePublicHooks();
|
||||
/**
|
||||
* 部门树形列表
|
||||
*/
|
||||
const higherOptions = ref();
|
||||
/**
|
||||
* 部门树形列表
|
||||
*/
|
||||
const treeData = ref<DepartmentInfo[]>([]);
|
||||
/**
|
||||
* 部门树形列表加载状态
|
||||
*/
|
||||
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: "username"
|
||||
},
|
||||
{
|
||||
label: "用户头像",
|
||||
prop: "avatar",
|
||||
cellRenderer: ({ row }) => (
|
||||
<el-image
|
||||
fit="cover"
|
||||
preview-teleported={true}
|
||||
src={row.avatar || Avatar}
|
||||
preview-src-list={Array.of(row.avatar || Avatar)}
|
||||
class="w-[24px] h-[24px] rounded-full align-middle"
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "用户姓名",
|
||||
prop: "nickname"
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "gender",
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.gender === 0 ? "danger" : null}
|
||||
effect="plain"
|
||||
>
|
||||
{row.gender === 0 ? "女" : "男"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "phone",
|
||||
formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(row.status)}>
|
||||
{row.status === 1 ? "启用" : "停用"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
prop: "create_time",
|
||||
formatter: ({ create_time }) =>
|
||||
dayjs(create_time).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
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<number>(0);
|
||||
const roleOptions = ref([]);
|
||||
|
||||
/**
|
||||
* 删除用户
|
||||
* @param row
|
||||
*/
|
||||
const handleDelete = async (row: UserInfo) => {
|
||||
const res = await deleteUserAPI(row.id);
|
||||
if (res.code === 200) {
|
||||
message(`您删除了用户账号为${row.username}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
onSearch();
|
||||
} else {
|
||||
message("删除失败！", { type: "error" });
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 处理每页数量变化
|
||||
* @param val
|
||||
*/
|
||||
const handleSizeChange = async (val: number) => {
|
||||
const res = await getUserListAPI({
|
||||
page: pagination.currentPage,
|
||||
pageSize: val,
|
||||
department_id: form.department_id,
|
||||
username: form.username,
|
||||
nickname: form.nickname,
|
||||
gender: form.gender,
|
||||
email: form.email,
|
||||
status: form.status,
|
||||
phone: form.phone
|
||||
});
|
||||
if (res.success) {
|
||||
dataList.value = res.data.result;
|
||||
pagination.total = res.data.total;
|
||||
pagination.currentPage = res.data.page;
|
||||
}
|
||||
};
|
||||
// 处理页码变化
|
||||
const handleCurrentChange = async (val: number) => {
|
||||
const res = await getUserListAPI({
|
||||
page: val,
|
||||
pageSize: pagination.pageSize,
|
||||
department_id: form.department_id,
|
||||
username: form.username,
|
||||
nickname: form.nickname,
|
||||
gender: form.gender,
|
||||
email: form.email,
|
||||
status: form.status,
|
||||
phone: form.phone
|
||||
});
|
||||
if (res.success) {
|
||||
dataList.value = res.data.result;
|
||||
pagination.total = res.data.total;
|
||||
pagination.currentPage = res.data.page;
|
||||
}
|
||||
};
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
const handleSelectionChange = (val: any) => {
|
||||
selectedNum.value = val.length;
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
};
|
||||
|
||||
/** 取消选择 */
|
||||
const onSelectionCancel = () => {
|
||||
selectedNum.value = 0;
|
||||
// 用于多选表格，清空用户的选择
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
};
|
||||
|
||||
/** 批量删除 */
|
||||
const onbatchDel = async () => {
|
||||
// 返回当前选中的行
|
||||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||
const res = await deleteUserListAPI({
|
||||
userIds: getKeyList(curSelected, "id")
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
onSearch();
|
||||
} else {
|
||||
message(res.msg, { type: "error", duration: 5000 });
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
const onSearch = async () => {
|
||||
loading.value = true;
|
||||
const { data } = await getUserListAPI({
|
||||
page: pagination.currentPage,
|
||||
pageSize: pagination.pageSize,
|
||||
department_id: form.department_id,
|
||||
username: form.username,
|
||||
nickname: form.nickname,
|
||||
gender: form.gender,
|
||||
email: form.email,
|
||||
status: form.status,
|
||||
phone: form.phone
|
||||
});
|
||||
dataList.value = data.result;
|
||||
pagination.total = data.total;
|
||||
pagination.currentPage = data.page;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
};
|
||||
/**
|
||||
* 重置表单
|
||||
* @param formEl
|
||||
* @returns
|
||||
*/
|
||||
const resetForm = async (formEl: any) => {
|
||||
if (!formEl) return;
|
||||
form.department_id = "";
|
||||
treeRef.value.onTreeReset();
|
||||
formEl.resetFields();
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
/**树形选择器选中 */
|
||||
const onTreeSelect = async ({ id, selected }) => {
|
||||
form.department_id = selected ? id : "";
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
const formatHigherOptions = (treeList: any) => {
|
||||
// 根据返回数据的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;
|
||||
formatHigherOptions(treeList[i].children);
|
||||
newTreeList.push(treeList[i]);
|
||||
}
|
||||
return newTreeList;
|
||||
};
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param way
|
||||
* @param row
|
||||
*/
|
||||
const openDialog = (way = "新增", row?: UserInfo) => {
|
||||
addDialog({
|
||||
title: `${way}用户`,
|
||||
props: {
|
||||
formInline: {
|
||||
way: way,
|
||||
id: row?.id ?? "",
|
||||
higherOptions: formatHigherOptions(higherOptions.value),
|
||||
username: row?.username ?? "",
|
||||
nickname: row?.nickname ?? "",
|
||||
password: "",
|
||||
phone: row?.phone ?? "",
|
||||
email: row?.email ?? "",
|
||||
gender: row?.gender ?? "",
|
||||
department_id: row?.department_id ?? "",
|
||||
status: row?.status ?? 1
|
||||
}
|
||||
},
|
||||
width: "46%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () =>
|
||||
h(editForm, {
|
||||
ref: formRef,
|
||||
formInline: {
|
||||
way: way,
|
||||
id: row?.id ?? "",
|
||||
higherOptions: formatHigherOptions(higherOptions.value),
|
||||
username: row?.username ?? "",
|
||||
nickname: row?.nickname ?? "",
|
||||
password: "",
|
||||
phone: row?.phone ?? "",
|
||||
email: row?.email ?? "",
|
||||
gender: row?.gender ?? "",
|
||||
department_id: row?.department_id ?? "",
|
||||
status: row?.status ?? 1
|
||||
}
|
||||
}),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as UserInfo;
|
||||
function chores() {
|
||||
message(`您${way}了用户账号为${curData.username}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
FormRef.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (way === "新增") {
|
||||
let addForm = {
|
||||
username: "string",
|
||||
password: "string",
|
||||
gender: 1,
|
||||
avatar: "",
|
||||
email: "",
|
||||
nickname: "普通用户",
|
||||
phone: "",
|
||||
department_id: "",
|
||||
status: 1
|
||||
};
|
||||
for (let key in addForm) {
|
||||
// 检查第二个字典是否包含相同的键
|
||||
if (key in curData) {
|
||||
// 将第二个字典中对应键的值赋给第一个字典
|
||||
addForm[key] = curData[key];
|
||||
}
|
||||
}
|
||||
const res = await postAddUserAPI(addForm);
|
||||
if (res.code === 200) {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
message("添加失败", { type: "error" });
|
||||
}
|
||||
} else {
|
||||
// 实际开发先调用修改接口，再进行下面操作
|
||||
let updateForm = {
|
||||
username: "string",
|
||||
gender: 1,
|
||||
avatar: "",
|
||||
email: "",
|
||||
nickname: "普通用户",
|
||||
phone: "",
|
||||
department_id: "",
|
||||
status: 1
|
||||
};
|
||||
for (let key in updateForm) {
|
||||
// 检查第二个字典是否包含相同的键
|
||||
if (key in curData) {
|
||||
// 将第二个字典中对应键的值赋给第一个字典
|
||||
updateForm[key] = curData[key];
|
||||
}
|
||||
}
|
||||
const res = await putUpdateUserAPI(curData.id, updateForm);
|
||||
if (res.code === 200) {
|
||||
chores();
|
||||
} else {
|
||||
message(`更新失败！`, { type: "error" });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cropRef = ref();
|
||||
/** 上传头像 */
|
||||
const handleUpload = (row: UserInfo) => {
|
||||
addDialog({
|
||||
title: "裁剪、上传头像",
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () =>
|
||||
h(croppingUpload, {
|
||||
ref: cropRef,
|
||||
imgSrc: row.avatar || Avatar,
|
||||
onCropper: info => (avatarInfo.value = info)
|
||||
}),
|
||||
beforeSure: async done => {
|
||||
const res = await postUploadAvatarAPI(row.id, {
|
||||
file: avatarInfo.value.blob
|
||||
});
|
||||
if (res.code === 200) {
|
||||
// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
|
||||
message(`更新成功！`, { type: "success" });
|
||||
onSearch(); // 刷新表格数据
|
||||
} else {
|
||||
message(`更新失败！`, { type: "error" });
|
||||
}
|
||||
done(); // 关闭弹框
|
||||
},
|
||||
closeCallBack: () => cropRef.value.hidePopover()
|
||||
});
|
||||
};
|
||||
watch(
|
||||
pwdForm,
|
||||
({ newPwd }) =>
|
||||
(curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
|
||||
);
|
||||
|
||||
/** 重置密码 */
|
||||
const handleReset = (row: UserInfo) => {
|
||||
addDialog({
|
||||
title: `重置 ${row.username} 的密码`,
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => (
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
),
|
||||
closeCallBack: () => (pwdForm.newPwd = ""),
|
||||
beforeSure: done => {
|
||||
ruleFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
const res = await putUpdateUserPasswordAPI(row.id, {
|
||||
password: pwdForm.newPwd
|
||||
});
|
||||
if (res.code === 200) {
|
||||
console.log(pwdForm.newPwd);
|
||||
done();
|
||||
message(`已成功重置 ${row.username} 的密码`, {
|
||||
type: "success"
|
||||
});
|
||||
onSearch(); // 刷新表格数据
|
||||
} else {
|
||||
message(`重置 ${row.username} 用户的密码失败！`, {
|
||||
type: "error"
|
||||
});
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 分配角色 */
|
||||
const handleRole = async (row: UserInfo) => {
|
||||
// 选中的角色列表
|
||||
const idRes = await getUserRolesAPI(row.id);
|
||||
const ids = getKeyList(idRes.data.result, "role_id") ?? [];
|
||||
const res = await getUserGetDepartmentRolesAPI(row.department_id);
|
||||
if (res.success) {
|
||||
roleOptions.value = res.data.result;
|
||||
} else {
|
||||
roleOptions.value = [];
|
||||
}
|
||||
addDialog({
|
||||
title: `分配 ${row.username}--${row.nickname} 用户的角色`,
|
||||
props: {
|
||||
formInline: {
|
||||
username: row?.username ?? "",
|
||||
nickname: row?.nickname ?? "",
|
||||
roleOptions: roleOptions.value ?? [],
|
||||
ids
|
||||
}
|
||||
},
|
||||
width: "400px",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(roleForm),
|
||||
beforeSure: async (done, { options }) => {
|
||||
const curData = options.props.formInline;
|
||||
console.log("curIds", curData.ids);
|
||||
const res = await putUpdateUserRolesAPI({
|
||||
user_id: row.id,
|
||||
role_ids: curData.ids as string[]
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message(`${row.username}--${row.nickname}的角色信息更新成功！`, {
|
||||
type: "success",
|
||||
duration: 5000
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
} else {
|
||||
message(`${row.username}--${row.nickname}的角色信息更新失败！`, {
|
||||
type: "error",
|
||||
duration: 5000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**分配权限 */
|
||||
const openPerDialog = async (row: UserInfo) => {
|
||||
addDialog({
|
||||
title: `权限详情--(${row.username}-${row.nickname})`,
|
||||
props: {
|
||||
id: row?.id ?? ""
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () =>
|
||||
h(permissionForm, { ref: formRef, id: row?.id ?? "" }),
|
||||
beforeSure: async done => {
|
||||
done();
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(async () => {
|
||||
treeLoading.value = true;
|
||||
onSearch();
|
||||
// 归属部门
|
||||
const res = await getDepartmentListAPI({
|
||||
page: 1,
|
||||
pageSize: 9999
|
||||
});
|
||||
if (res.success) {
|
||||
const data = res.data.result.sort((a, b) => a.sort - b.sort);
|
||||
higherOptions.value = handleTree(data, "id", "parent_id");
|
||||
treeData.value = handleTree(data, "id", "parent_id");
|
||||
treeLoading.value = false;
|
||||
}
|
||||
});
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
treeData,
|
||||
treeLoading,
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
openPerDialog,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
openDialog,
|
||||
onTreeSelect,
|
||||
handleDelete,
|
||||
handleUpload,
|
||||
handleReset,
|
||||
handleRole,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user