feat:完善用户表单页面对接
This commit is contained in:
@@ -1,27 +1,23 @@
|
|||||||
import { http } from "@/utils/http";
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
type Result = {
|
type Result = {
|
||||||
success: boolean;
|
status: number;
|
||||||
data?: Array<any>;
|
data?: Array<any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ResultTable = {
|
type ResultTable = {
|
||||||
success: boolean;
|
status: number;
|
||||||
data?: {
|
data?: {
|
||||||
/** 列表数据 */
|
/** 列表数据 */
|
||||||
list: Array<any>;
|
items: Array<any>;
|
||||||
/** 总条目数 */
|
/** 总条目数 */
|
||||||
total?: number;
|
totalCount?: number;
|
||||||
/** 每页显示条目个数 */
|
|
||||||
pageSize?: number;
|
|
||||||
/** 当前页数 */
|
|
||||||
currentPage?: number;
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统管理-用户管理列表 */
|
/** 获取系统管理-用户管理列表 */
|
||||||
export const getUserList = (data?: object) => {
|
export const getUserList = (data?: object) => {
|
||||||
return http.request<ResultTable>("post", "/user", { data });
|
return http.request<ResultTable>("get", "/user", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 系统管理-用户管理-获取所有角色列表 */
|
/** 系统管理-用户管理-获取所有角色列表 */
|
||||||
@@ -46,7 +42,7 @@ export const getMenuList = (data?: object) => {
|
|||||||
|
|
||||||
/** 获取系统管理-部门管理列表 */
|
/** 获取系统管理-部门管理列表 */
|
||||||
export const getDeptList = (data?: object) => {
|
export const getDeptList = (data?: object) => {
|
||||||
return http.request<Result>("post", "/dept", { data });
|
return http.request<ResultTable>("get", "/dept", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统监控-在线用户列表 */
|
/** 获取系统监控-在线用户列表 */
|
||||||
|
|||||||
@@ -21,14 +21,17 @@ export type LoginResult = {
|
|||||||
export type UserResult = {
|
export type UserResult = {
|
||||||
status: number;
|
status: number;
|
||||||
data: {
|
data: {
|
||||||
/** 头像 */
|
user: {
|
||||||
avatar: string;
|
/** 头像 */
|
||||||
/** 用户名 */
|
icon: string;
|
||||||
username: string;
|
/** 用户名 */
|
||||||
/** 昵称 */
|
userName: string;
|
||||||
nick: string;
|
/** 昵称 */
|
||||||
|
nick: string;
|
||||||
|
};
|
||||||
|
|
||||||
/** 当前登录用户的角色 */
|
/** 当前登录用户的角色 */
|
||||||
roles: Array<string>;
|
roleCodes: Array<string>;
|
||||||
/** 按钮级别权限 */
|
/** 按钮级别权限 */
|
||||||
permissions: Array<string>;
|
permissions: Array<string>;
|
||||||
/** `token` */
|
/** `token` */
|
||||||
|
|||||||
@@ -90,11 +90,10 @@ export const useUserStore = defineStore({
|
|||||||
};
|
};
|
||||||
setToken(storeData);
|
setToken(storeData);
|
||||||
getUserInfo().then(resInfo => {
|
getUserInfo().then(resInfo => {
|
||||||
storeData.username = resInfo.data.username;
|
storeData.username = resInfo.data.user.userName;
|
||||||
storeData.avatar = resInfo.data.avatar;
|
storeData.avatar = resInfo.data.user.icon;
|
||||||
storeData.nickname = resInfo.data.nick;
|
storeData.nickname = resInfo.data.user.nick;
|
||||||
storeData.roles = resInfo.data.roles;
|
storeData.roles = resInfo.data.roleCodes;
|
||||||
storeData.accessToken = resInfo.data.accessToken;
|
|
||||||
setToken(storeData);
|
setToken(storeData);
|
||||||
resolve(resInfo);
|
resolve(resInfo);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export function setToken(data: DataInfo<Date>) {
|
|||||||
permissions
|
permissions
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
console.log(data,"storeData");
|
||||||
if (data.username && data.roles) {
|
if (data.username && data.roles) {
|
||||||
const { username, roles } = data;
|
const { username, roles } = data;
|
||||||
setUserKey({
|
setUserKey({
|
||||||
|
|||||||
@@ -10,13 +10,13 @@ const props = withDefaults(defineProps<FormProps>(), {
|
|||||||
title: "新增",
|
title: "新增",
|
||||||
higherDeptOptions: [],
|
higherDeptOptions: [],
|
||||||
parentId: 0,
|
parentId: 0,
|
||||||
nickname: "",
|
nick: "",
|
||||||
username: "",
|
userName: "",
|
||||||
password: "",
|
password: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
email: "",
|
email: "",
|
||||||
sex: "",
|
sex: "",
|
||||||
status: 1,
|
state: 1,
|
||||||
remark: ""
|
remark: ""
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
@@ -51,18 +51,18 @@ defineExpose({ getRef });
|
|||||||
>
|
>
|
||||||
<el-row :gutter="30">
|
<el-row :gutter="30">
|
||||||
<re-col :value="12" :xs="24" :sm="24">
|
<re-col :value="12" :xs="24" :sm="24">
|
||||||
<el-form-item label="用户昵称" prop="nickname">
|
<el-form-item label="用户昵称" prop="nick">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="newFormInline.nickname"
|
v-model="newFormInline.nick"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入用户昵称"
|
placeholder="请输入用户昵称"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</re-col>
|
</re-col>
|
||||||
<re-col :value="12" :xs="24" :sm="24">
|
<re-col :value="12" :xs="24" :sm="24">
|
||||||
<el-form-item label="用户名称" prop="username">
|
<el-form-item label="用户名称" prop="userName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="newFormInline.username"
|
v-model="newFormInline.userName"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入用户名称"
|
placeholder="请输入用户名称"
|
||||||
/>
|
/>
|
||||||
@@ -151,10 +151,10 @@ defineExpose({ getRef });
|
|||||||
>
|
>
|
||||||
<el-form-item label="用户状态">
|
<el-form-item label="用户状态">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="newFormInline.status"
|
v-model="newFormInline.state"
|
||||||
inline-prompt
|
inline-prompt
|
||||||
:active-value="1"
|
:active-value="true"
|
||||||
:inactive-value="0"
|
:inactive-value="false"
|
||||||
active-text="启用"
|
active-text="启用"
|
||||||
inactive-text="停用"
|
inactive-text="停用"
|
||||||
:style="switchStyle"
|
:style="switchStyle"
|
||||||
|
|||||||
@@ -5,8 +5,8 @@ import { RoleFormProps } from "../utils/types";
|
|||||||
|
|
||||||
const props = withDefaults(defineProps<RoleFormProps>(), {
|
const props = withDefaults(defineProps<RoleFormProps>(), {
|
||||||
formInline: () => ({
|
formInline: () => ({
|
||||||
username: "",
|
userName: "",
|
||||||
nickname: "",
|
nick: "",
|
||||||
roleOptions: [],
|
roleOptions: [],
|
||||||
ids: []
|
ids: []
|
||||||
})
|
})
|
||||||
@@ -18,14 +18,9 @@ const newFormInline = ref(props.formInline);
|
|||||||
<template>
|
<template>
|
||||||
<el-form :model="newFormInline">
|
<el-form :model="newFormInline">
|
||||||
<el-row :gutter="30">
|
<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>
|
<re-col>
|
||||||
<el-form-item label="用户昵称" prop="nickname">
|
<el-form-item label="用户昵称" prop="nick">
|
||||||
<el-input v-model="newFormInline.nickname" disabled />
|
<el-input v-model="newFormInline.nick" disabled />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</re-col>
|
</re-col>
|
||||||
<re-col>
|
<re-col>
|
||||||
|
|||||||
@@ -68,9 +68,9 @@ const {
|
|||||||
:model="form"
|
:model="form"
|
||||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||||
>
|
>
|
||||||
<el-form-item label="用户名称:" prop="username">
|
<el-form-item label="用户名称:" prop="userName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.username"
|
v-model="form.userName"
|
||||||
placeholder="请输入用户名称"
|
placeholder="请输入用户名称"
|
||||||
clearable
|
clearable
|
||||||
class="!w-[180px]"
|
class="!w-[180px]"
|
||||||
@@ -84,15 +84,15 @@ const {
|
|||||||
class="!w-[180px]"
|
class="!w-[180px]"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="状态:" prop="status">
|
<el-form-item label="状态:" prop="state">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="form.status"
|
v-model="form.state"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
clearable
|
clearable
|
||||||
class="!w-[180px]"
|
class="!w-[180px]"
|
||||||
>
|
>
|
||||||
<el-option label="已开启" value="1" />
|
<el-option label="已开启" :value="true" />
|
||||||
<el-option label="已关闭" value="0" />
|
<el-option label="已关闭" :value="false" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ const highlightMap = ref({});
|
|||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
children: "children",
|
children: "children",
|
||||||
label: "name"
|
label: "deptName"
|
||||||
};
|
};
|
||||||
const buttonClass = computed(() => {
|
const buttonClass = computed(() => {
|
||||||
return [
|
return [
|
||||||
|
|||||||
@@ -45,9 +45,9 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
const form = reactive({
|
const form = reactive({
|
||||||
// 左侧部门树的id
|
// 左侧部门树的id
|
||||||
deptId: "",
|
deptId: "",
|
||||||
username: "",
|
userName: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
status: ""
|
state: true
|
||||||
});
|
});
|
||||||
const formRef = ref();
|
const formRef = ref();
|
||||||
const ruleFormRef = ref();
|
const ruleFormRef = ref();
|
||||||
@@ -77,7 +77,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
{
|
{
|
||||||
label: "用户编号",
|
label: "用户编号",
|
||||||
prop: "id",
|
prop: "id",
|
||||||
width: 90
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "用户头像",
|
label: "用户头像",
|
||||||
@@ -95,12 +95,12 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "用户名称",
|
label: "用户名称",
|
||||||
prop: "username",
|
prop: "userName",
|
||||||
minWidth: 130
|
minWidth: 130
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "用户昵称",
|
label: "用户昵称",
|
||||||
prop: "nickname",
|
prop: "nick",
|
||||||
minWidth: 130
|
minWidth: 130
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -119,7 +119,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "部门",
|
label: "部门",
|
||||||
prop: "dept.name",
|
prop: "deptName",
|
||||||
minWidth: 90
|
minWidth: 90
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -130,15 +130,15 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "状态",
|
label: "状态",
|
||||||
prop: "status",
|
prop: "state",
|
||||||
minWidth: 90,
|
minWidth: 90,
|
||||||
cellRenderer: scope => (
|
cellRenderer: scope => (
|
||||||
<el-switch
|
<el-switch
|
||||||
size={scope.props.size === "small" ? "small" : "default"}
|
size={scope.props.size === "small" ? "small" : "default"}
|
||||||
loading={switchLoadMap.value[scope.index]?.loading}
|
loading={switchLoadMap.value[scope.index]?.loading}
|
||||||
v-model={scope.row.status}
|
v-model={scope.row.state}
|
||||||
active-value={1}
|
active-value={true}
|
||||||
inactive-value={0}
|
inactive-value={false}
|
||||||
active-text="已启用"
|
active-text="已启用"
|
||||||
inactive-text="已停用"
|
inactive-text="已停用"
|
||||||
inline-prompt
|
inline-prompt
|
||||||
@@ -273,10 +273,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
async function onSearch() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { data } = await getUserList(toRaw(form));
|
const { data } = await getUserList(toRaw(form));
|
||||||
dataList.value = data.list;
|
dataList.value = data.items;
|
||||||
pagination.total = data.total;
|
pagination.total = data.totalCount;
|
||||||
pagination.pageSize = data.pageSize;
|
// pagination.pageSize = data.pageSize;
|
||||||
pagination.currentPage = data.currentPage;
|
// pagination.currentPage = data.currentPage;
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
@@ -316,13 +316,13 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
title,
|
title,
|
||||||
higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
|
higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
|
||||||
parentId: row?.dept.id ?? 0,
|
parentId: row?.dept.id ?? 0,
|
||||||
nickname: row?.nickname ?? "",
|
nickname: row?.nick ?? "",
|
||||||
username: row?.username ?? "",
|
username: row?.userName ?? "",
|
||||||
password: row?.password ?? "",
|
password: row?.password ?? "",
|
||||||
phone: row?.phone ?? "",
|
phone: row?.phone ?? "",
|
||||||
email: row?.email ?? "",
|
email: row?.email ?? "",
|
||||||
sex: row?.sex ?? "",
|
sex: row?.sex ?? "",
|
||||||
status: row?.status ?? 1,
|
status: row?.state ?? false,
|
||||||
remark: row?.remark ?? ""
|
remark: row?.remark ?? ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -336,7 +336,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
const FormRef = formRef.value.getRef();
|
const FormRef = formRef.value.getRef();
|
||||||
const curData = options.props.formInline as FormItemProps;
|
const curData = options.props.formInline as FormItemProps;
|
||||||
function chores() {
|
function chores() {
|
||||||
message(`您${title}了用户名称为${curData.username}的这条数据`, {
|
message(`您${title}了用户名称为${curData.userName}的这条数据`, {
|
||||||
type: "success"
|
type: "success"
|
||||||
});
|
});
|
||||||
done(); // 关闭弹框
|
done(); // 关闭弹框
|
||||||
@@ -498,8 +498,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
|
|
||||||
// 归属部门
|
// 归属部门
|
||||||
const { data } = await getDeptList();
|
const { data } = await getDeptList();
|
||||||
higherDeptOptions.value = handleTree(data);
|
higherDeptOptions.value = handleTree(data.items);
|
||||||
treeData.value = handleTree(data);
|
treeData.value = handleTree(data.items);
|
||||||
treeLoading.value = false;
|
treeLoading.value = false;
|
||||||
|
|
||||||
// 角色列表
|
// 角色列表
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import { isPhone, isEmail } from "@pureadmin/utils";
|
|||||||
|
|
||||||
/** 自定义表单规则校验 */
|
/** 自定义表单规则校验 */
|
||||||
export const formRules = reactive(<FormRules>{
|
export const formRules = reactive(<FormRules>{
|
||||||
nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
|
nick: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
|
||||||
username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
|
userName: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
|
||||||
password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
|
password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
|
||||||
phone: [
|
phone: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -4,13 +4,13 @@ interface FormItemProps {
|
|||||||
title: string;
|
title: string;
|
||||||
higherDeptOptions: Record<string, unknown>[];
|
higherDeptOptions: Record<string, unknown>[];
|
||||||
parentId: number;
|
parentId: number;
|
||||||
nickname: string;
|
nick: string;
|
||||||
username: string;
|
userName: string;
|
||||||
password: string;
|
password: string;
|
||||||
phone: string | number;
|
phone: string | number;
|
||||||
email: string;
|
email: string;
|
||||||
sex: string | number;
|
sex: string | number;
|
||||||
status: number;
|
state: boolean;
|
||||||
dept?: {
|
dept?: {
|
||||||
id?: number;
|
id?: number;
|
||||||
name?: string;
|
name?: string;
|
||||||
@@ -22,8 +22,8 @@ interface FormProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface RoleFormItemProps {
|
interface RoleFormItemProps {
|
||||||
username: string;
|
userName: string;
|
||||||
nickname: string;
|
nick: string;
|
||||||
/** 角色列表 */
|
/** 角色列表 */
|
||||||
roleOptions: any[];
|
roleOptions: any[];
|
||||||
/** 选中的角色列表 */
|
/** 选中的角色列表 */
|
||||||
|
|||||||
Reference in New Issue
Block a user