tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录和用户接口typescript类型声明

Browse Source
This commit is contained in:
郝先瑞
2022-03-12 00:18:21 +08:00
parent 7d46ff1224
commit 27bbd35057
8 changed files with 415 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/login/index.ts
View File

@@ -1,13 +1,15 @@
import { LoginRequestParam, LoginResponseData } from "@/types";
import request from "@/utils/request";
import { AxiosPromise } from "axios";
/**
* 登录
* @param data
*/
export function login(data: object) {
export function login(data: LoginRequestParam): AxiosPromise<LoginResponseData> {
return request({
url: '/youlai-auth/oauth/token',
method:'post',
method: 'post',
params: data,
headers: {
'Authorization': 'Basic bWFsbC1hZG1pbi13ZWI6MTIzNDU2' // 客户端信息Base64明文：mall-admin-web:123456
@@ -15,16 +17,6 @@ export function login(data: object) {
})
}
/**
* 登录成功后获取用户信息（包括用户头像、权限列表等）
*/
export function getUserInfo() {
return request({
url: '/youlai-admin/api/v1/users/me',
method: 'get'
})
}
/**
* 注销
*/
@@ -38,9 +30,9 @@ export function logout() {
/**
* 获取图片验证码
*/
export function getCaptcha() {
export function getCaptcha(): AxiosPromise<string> {
return request({
url: '/captcha?t='+(new Date()).getTime().toString(),
url: '/captcha?t=' + (new Date()).getTime().toString(),
method: 'get'
})
}

15
src/api/system/user.ts
View File

@@ -1,11 +1,24 @@
import request from "@/utils/request";
import { AxiosPromise } from "axios";
import { UserInfo, UserQueryParam } from "@/types";
/**
* 登录成功后获取用户信息（包括用户头像、权限列表等）
*/
export function getUserInfo(): AxiosPromise<UserInfo> {
return request({
url: '/youlai-admin/api/v1/users/me',
method: 'get'
})
}
/**
* 获取用户分页列表
*
* @param queryParams
*/
export function listUsersWithPage(queryParams: any) {
export function listUserPages(queryParams: UserQueryParam) {
return request({
url: '/youlai-admin/api/v1/users/page',
method: 'get',

59
src/store/modules/user.ts
View File

@@ -1,12 +1,13 @@
import { defineStore } from "pinia";
import {UserState} from "@/store/interface";
import {localStorage} from "@/utils/storage";
import {getUserInfo, login, logout} from "@/api/login";
import {resetRouter} from "@/router";
import { UserState } from "@/store/interface";
import { localStorage } from "@/utils/storage";
import { login, logout } from "@/api/login";
import { resetRouter } from "@/router";
import { getUserInfo } from "@/api/system/user";
const useUserStore = defineStore({
id:"user",
state: ():UserState=>({
const useUserStore = defineStore({
id: "user",
state: (): UserState => ({
token: localStorage.get('token') || '',
nickname: '',
avatar: '',
@@ -14,7 +15,7 @@ import {resetRouter} from "@/router";
perms: []
}),
actions: {
async RESET_STATE () {
async RESET_STATE() {
this.$reset()
},
/**
@@ -26,7 +27,7 @@ import {resetRouter} from "@/router";
* uuid: 匹配正确验证码的 key
*/
login(userInfo: { username: string, password: string, code: string, uuid: string }) {
const {username, password, code, uuid} = userInfo
const { username, password, code, uuid } = userInfo
return new Promise((resolve, reject) => {
login(
{
@@ -37,7 +38,7 @@ import {resetRouter} from "@/router";
uuid: uuid
}
).then(response => {
const {access_token, token_type} = response.data
const { access_token, token_type } = response.data
const accessToken = token_type + " " + access_token
localStorage.set("token", accessToken)
this.token = accessToken
@@ -52,24 +53,24 @@ import {resetRouter} from "@/router";
*/
getUserInfo() {
return new Promise(((resolve, reject) => {
getUserInfo().then(response => {
const {data} = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const {nickname, avatar, roles, perms} = data
if (!roles || roles.length <= 0) {
reject('getUserInfo: roles must be a non-null array!')
}
this.nickname = nickname
this.avatar = avatar
this.roles = roles
this.perms = perms
resolve(data)
}).catch(error => {
reject(error)
})
getUserInfo().then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const { nickname, avatar, roles, perms } = data
if (!roles || roles.length <= 0) {
reject('getUserInfo: roles must be a non-null array!')
}
this.nickname = nickname
this.avatar = avatar
this.roles = roles
this.perms = perms
resolve(data)
}).catch(error => {
reject(error)
})
})
)
},
@@ -92,8 +93,8 @@ import {resetRouter} from "@/router";
/**
* 清除 Token
*/
resetToken(){
return new Promise(resolve=>{
resetToken() {
return new Promise(resolve => {
localStorage.remove('token')
this.RESET_STATE()
resolve(null)

11
src/types/api/base.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
export interface Page {
pageNum: number,
pageSize: number
}
export interface PageResult<T> {
data: T,
total: number
}

18
src/types/api/login.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
/**
* 登录请求参数
*/
export interface LoginRequestParam {
username: string,
password: string,
grant_type: string,
code: string,
uuid: string,
}
/**
* 登录响应参数
*/
export interface LoginResponseData {
access_token: string,
token_type: string
}

20
src/types/api/user.d.ts vendored Normal file
View File

@@ -0,0 +1,20 @@
import { Page, PageResult } from "./base"
/**
* 用户信息
*/
export interface UserInfo {
nickname: string,
avatar: string,
roles: string[],
perms: string[]
}
/**
* 用户查询参数
*/
export interface UserQueryParam extends Page {
keywords: String | undefined,
status: number | undefined ,
deptId: number | undefined
}

2
src/types/index.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
export * from './api/login'
export * from './api/user'

663
src/views/system/user/index.vue
View File

@@ -1,58 +1,48 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<!-- 部门数据 -->
<el-col
:span="4"
:xs="24"
>
<!-- 部门树 -->
<el-col :span="4" :xs="24">
<el-card class="box-card">
<el-input
v-model="deptName"
placeholder="部门名称"
clearable
:prefix-icon="Search"
style="margin-bottom: 20px"
v-model="deptName"
placeholder="部门名称"
clearable
:prefix-icon="Search"
style="margin-bottom: 20px"
/>
<el-tree
ref="deptTreeRef"
:data="deptOptions"
:props="{ children: 'children',label: 'label',disabled:''}"
:expand-on-click-node="false"
:filter-node-method="filterDeptNode"
default-expand-all
@node-click="handleDeptNodeClick"
ref="deptTreeRef"
:data="deptOptions"
:props="{ children: 'children', label: 'label', disabled: '' }"
:expand-on-click-node="false"
:filter-node-method="filterDeptNode"
default-expand-all
@node-click="handleDeptNodeClick"
>
</el-tree>
</el-card>
</el-col>
<!-- 用户数据 -->
<el-col
:span="20"
:xs="24"
>
<el-col :span="20" :xs="24">
<el-card class="box-card">
<el-form
ref="queryFormRef"
:model="queryParams"
:inline="true"
>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button
type="success"
:icon="Plus"
@click="handleAdd"
v-hasPerm="['sys:user:add']"
type="success"
:icon="Plus"
@click="handleAdd"
v-hasPerm="['sys:user:add']"
>
新增
</el-button>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPerm="['sys:user:delete']"
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPerm="['sys:user:delete']"
>
删除
</el-button>
@@ -60,136 +50,115 @@
<el-form-item prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 200px"
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 200px"
>
<el-option label="正常" value="1"/>
<el-option label="停用" value="0"/>
<el-option label="正常" value="1" />
<el-option label="停用" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="Search"
@click="handleQuery"
>
<el-button type="primary" :icon="Search" @click="handleQuery">
搜索
</el-button>
<el-button
:icon="Refresh"
@click="resetQuery"
>
重置
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="pageList"
@selection-change="handleSelectionChange"
v-loading="loading"
:data="pageList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
type="selection"
width="50"
align="center"
key="id"
label="用户编号"
align="center"
prop="id"
/>
<el-table-column
key="id"
label="用户编号"
align="center"
prop="id"
key="username"
label="用户名称"
align="center"
prop="username"
:show-overflow-tooltip="true"
/>
<el-table-column
key="username"
label="用户名称"
align="center"
prop="username"
:show-overflow-tooltip="true"
label="用户昵称"
align="center"
prop="nickname"
:show-overflow-tooltip="true"
/>
<el-table-column
label="用户昵称"
align="center"
prop="nickname"
:show-overflow-tooltip="true"
label="部门"
align="center"
prop="deptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="部门"
align="center"
prop="deptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
prop="mobile"
width="120"
label="手机号码"
align="center"
prop="mobile"
width="120"
/>
<el-table-column
label="状态"
align="center"
prop="status"
>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:inactive-value=0
:active-value=1
@change="handleStatusChange(scope.row)"
v-model="scope.row.status"
:inactive-value="0"
:active-value="1"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="gmtCreate"
width="180"
label="创建时间"
align="center"
prop="gmtCreate"
width="180"
>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="150"
>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click="handleUpdate(scope.row)"
v-hasPerm="['sys:user:edit']"
type="primary"
:icon="Edit"
circle
plain
@click="handleUpdate(scope.row)"
v-hasPerm="['sys:user:edit']"
>
</el-button>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click="handleDelete(scope.row)"
v-hasPerm="['sys:user:delete']"
type="danger"
:icon="Delete"
circle
plain
@click="handleDelete(scope.row)"
v-hasPerm="['sys:user:delete']"
>
</el-button>
<el-button
type="warning"
:icon="Lock"
circle
plain
@click="resetPassword(scope.row)"
type="warning"
:icon="Lock"
circle
plain
@click="resetPassword(scope.row)"
>
</el-button>
</template>
@@ -197,11 +166,11 @@
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
</el-col>
@@ -209,70 +178,51 @@
<!-- 添加或修改参数配置对话框 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="600px"
append-to-body
@close="cancel"
:title="dialog.title"
v-model="dialog.visible"
width="600px"
append-to-body
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item
label="用户名"
prop="username"
>
<el-form-item label="用户名" prop="username">
<el-input
:readonly="!!formData.id"
v-model="formData.username"
placeholder="请输入用户名"
:readonly="!!formData.id"
v-model="formData.username"
placeholder="请输入用户名"
/>
</el-form-item>
<el-form-item
label="用户昵称"
prop="nickname"
>
<el-input
v-model="formData.nickname"
placeholder="请输入用户昵称"
/>
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item
label="归属部门"
prop="deptId"
>
<el-form-item label="归属部门" prop="deptId">
<tree-select
v-model="formData.deptId"
:options="deptOptions"
placeholder="请选择归属部门"
v-model="formData.deptId"
:options="deptOptions"
placeholder="请选择归属部门"
/>
</el-form-item>
<el-form-item
label="手机号码"
prop="mobile"
>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="formData.mobile"
placeholder="请输入手机号码"
maxlength="11"
v-model="formData.mobile"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
<el-form-item
label="邮箱"
prop="email"
>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
@@ -284,42 +234,28 @@
</el-form-item>
<el-form-item label="用户性别" prop="gender">
<el-select
v-model="formData.gender"
placeholder="请选择"
>
<el-option label="未知" :value="0"/>
<el-option label="男" :value="1"/>
<el-option label="女" :value="2"/>
<el-select v-model="formData.gender" placeholder="请选择">
<el-option label="未知" :value="0" />
<el-option label="男" :value="1" />
<el-option label="女" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select
v-model="formData.roleIds"
multiple
placeholder="请选择"
>
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button
type="primary"
@click="submitForm"
>
确 定
</el-button>
<el-button @click="cancel">
取 消
</el-button>
<el-button type="primary" @click="submitForm"> 确 定 </el-button>
<el-button @click="cancel"> 取 消 </el-button>
</div>
</template>
</el-dialog>
@@ -328,24 +264,46 @@
<script setup lang='ts'>
// Vue依赖
import {reactive, ref, unref, watchEffect, onMounted, getCurrentInstance, toRefs} from 'vue'
import {
reactive,
ref,
unref,
watchEffect,
onMounted,
getCurrentInstance,
toRefs,
} from "vue";
// API依赖
import {listUsersWithPage, getUserFormDetail, deleteUsers, addUser, updateUser, updateUserPart} from '@/api/system/user'
import {listDeptSelect} from '@/api/system/dept'
import {listRoles} from '@/api/system/role'
import {
listUserPages,
getUserFormDetail,
deleteUsers,
addUser,
updateUser,
updateUserPart,
} from "@/api/system/user";
import { listDeptSelect } from "@/api/system/dept";
import { listRoles } from "@/api/system/role";
// 组件依赖
import {ElMessage, ElMessageBox, ElTree, ElForm} from 'element-plus'
import {Search, Plus, Edit, Refresh, Delete, Lock} from '@element-plus/icons-vue'
import TreeSelect from '@/components/TreeSelect/index.vue'
import { ElMessage, ElMessageBox, ElTree, ElForm } from "element-plus";
import {
Search,
Plus,
Edit,
Refresh,
Delete,
Lock,
} from "@element-plus/icons-vue";
import TreeSelect from "@/components/TreeSelect/index.vue";
// DOM元素的引用声明定义
const deptTreeRef = ref(ElTree) // 变量名和DOM的ref属性值一致
const queryFormRef = ref(ElForm)
const dataFormRef = ref(ElForm)
const deptTreeRef = ref(ElTree); // 变量名和DOM的ref属性值一致
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const {proxy}: any = getCurrentInstance();
const { proxy }: any = getCurrentInstance();
const state = reactive({
// 遮罩层
@@ -362,10 +320,10 @@ const state = reactive({
pageList: [],
// 弹窗属性
dialog: {
title: '',
visible: false
title: "",
visible: false,
},
deptName:undefined,
deptName: undefined,
// 部门树选项
deptOptions: [],
// 部门名称
@@ -379,52 +337,46 @@ const state = reactive({
deptId: undefined,
username: undefined,
nickname: undefined,
password: '',
password: "",
mobile: undefined,
email: undefined,
gender: undefined,
status: 1,
remark: undefined,
roleIds: []
roleIds: [],
},
// 查询参数
queryParams: {
queryParams:{
pageNum: 1,
pageSize: 10,
keywords: undefined,
status: undefined,
deptId: undefined
deptId: undefined,
},
// 表单校验
rules: {
username: [
{required: true, message: '用户名不能为空', trigger: 'blur'}
],
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
nickname: [
{required: true, message: '用户昵称不能为空', trigger: 'blur'}
],
deptId: [
{required: true, message: '归属部门不能为空', trigger: 'blur'}
],
roleId: [
{required: true, message: '用户角色不能为空', trigger: 'blur'}
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
],
deptId: [{ required: true, message: "归属部门不能为空", trigger: "blur" }],
roleId: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
})
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
});
const {
loading,
@@ -438,238 +390,251 @@ const {
rules,
deptName,
deptOptions,
roleOptions
} = toRefs(state)
roleOptions,
} = toRefs(state);
/**
* 部门筛选
**/
watchEffect(() => {
const deptTree = unref(deptTreeRef)
deptTree.filter(state.deptName)
}, {
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
})
*/
watchEffect(
() => {
const deptTree = unref(deptTreeRef);
deptTree.filter(state.deptName);
},
{
flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
function filterDeptNode(value: string, data: any) {
if (!value) {
return true
return true;
}
return data.label.indexOf(value) !== -1
return data.label.indexOf(value) !== -1;
}
/**
* 部门树节点点击事件
*/
function handleDeptNodeClick(data: { [key: string]: any }) {
state.queryParams.deptId = data.id
handleQuery()
state.queryParams.deptId = data.id;
handleQuery();
}
/**
* 加载角色数据
*/
async function loadRoleOptions() {
listRoles().then(response => {
state.roleOptions = response.data
})
listRoles().then((response) => {
state.roleOptions = response.data;
});
}
/**
* 用户状态修改
*/
function handleStatusChange(row: { [key: string]: any }) {
const text = row.status === 1 ? '启用' : '停用'
ElMessageBox.confirm('确认要' + text + '' + row.username + '用户吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return updateUserPart(row.id, {status: row.status})
}).then(() => {
ElMessage.success(text + '成功')
}).catch(() => {
row.status = row.status === 1 ? 0 : 1
})
const text = row.status === 1 ? "启用" : "停用";
ElMessageBox.confirm(
"确认要" + text + "" + row.username + "用户吗?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
return updateUserPart(row.id, { status: row.status });
})
.then(() => {
ElMessage.success(text + "成功");
})
.catch(() => {
row.status = row.status === 1 ? 0 : 1;
});
}
/**
* 用户查询
**/
function handleQuery() {
state.loading = true
listUsersWithPage(state.queryParams).then(response => {
const {data, total} = response as any
state.pageList = data
state.total = total
state.loading = false
})
state.loading = true;
listUserPages(state.queryParams).then((response) => {
const { data, total } = response as any;
state.pageList = data;
state.total = total;
state.loading = false;
});
}
/**
* 重置查询
*/
function resetQuery() {
const queryForm = unref(queryFormRef)
queryForm.resetFields()
handleQuery()
const queryForm = unref(queryFormRef);
queryForm.resetFields();
handleQuery();
}
/**
* 表格行选中事件
**/
*/
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id)
state.single = selection.length !== 1
state.multiple = !selection.length
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
/**
* 密码重置
**/
*/
function resetPassword(row: { [key: string]: any }) {
ElMessageBox.prompt('请输入用户「' + row.username + '」的新密码', '重置密码', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (!value) {
ElMessage.warning("请输入新密码")
return false
ElMessageBox.prompt(
"请输入用户「" + row.username + "」的新密码",
"重置密码",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
}
updateUserPart(row.id, {
password: value
}).then(() => {
ElMessage.success('修改成功，新密码是：' + value)
)
.then(({ value }) => {
if (!value) {
ElMessage.warning("请输入新密码");
return false;
}
updateUserPart(row.id, {
password: value,
}).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
})
}).catch(() => {
})
.catch(() => {});
}
/**
* 添加用户
**/
async function handleAdd() {
await loadDeptOptions()
await loadRoleOptions()
await loadDeptOptions();
await loadRoleOptions();
state.dialog = {
title: '添加用户',
visible: true
}
title: "添加用户",
visible: true,
};
}
/**
* 修改用户
**/
async function handleUpdate(row: { [key: string]: any }) {
const userId = row.id || state.ids
await loadDeptOptions()
await loadRoleOptions()
const userId = row.id || state.ids;
await loadDeptOptions();
await loadRoleOptions();
state.dialog = {
title: '修改用户',
visible: true
}
title: "修改用户",
visible: true,
};
getUserFormDetail(userId).then((response: any) => {
state.formData = response.data
})
state.formData = response.data;
});
}
/**
* 表单提交
**/
*/
function submitForm() {
const dataForm = unref(dataFormRef)
const dataForm = unref(dataFormRef);
dataForm.validate((valid: any) => {
if (valid) {
const userId = state.formData.id
const userId = state.formData.id;
if (userId) {
updateUser(userId, state.formData).then(() => {
ElMessage.success('修改用户成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
ElMessage.success("修改用户成功");
state.dialog.visible = false;
resetForm();
handleQuery();
});
} else {
addUser(state.formData).then((response: any) => {
ElMessage.success('新增用户成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
ElMessage.success("新增用户成功");
state.dialog.visible = false;
resetForm();
handleQuery();
});
}
}
})
});
}
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value.resetFields()
dataFormRef.value.resetFields();
}
/**
* 删除用户
**/
function handleDelete(row: { [key: string]: any }) {
const userIds = row.id || state.ids.join(',')
ElMessageBox.confirm('是否确认删除用户编号为「' + userIds + '」的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
deleteUsers(userIds).then(() => {
ElMessage.success('删除成功')
handleQuery()
})
}).catch(() =>
ElMessage.info('已取消删除')
const userIds = row.id || state.ids.join(",");
ElMessageBox.confirm(
"是否确认删除用户编号为「" + userIds + "」的数据项?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
deleteUsers(userIds).then(() => {
ElMessage.success("删除成功");
handleQuery();
});
})
.catch(() => ElMessage.info("已取消删除"));
}
/**
* 取消关闭
*/
function cancel() {
state.dialog.visible = false
resetForm()
state.dialog.visible = false;
resetForm();
}
/**
* 加载部门数据
**/
async function loadDeptOptions() {
listDeptSelect().then(response => {
state.deptOptions = response.data
})
listDeptSelect().then((response) => {
state.deptOptions = response.data;
});
}
/**
* 加载性别字典数据
*/
function loadGenderOptions() {
proxy.$listDictsByCode('gender').then((response: any) => {
state.genderOptions = response?.data
})
proxy.$listDictsByCode("gender").then((response: any) => {
state.genderOptions = response?.data;
});
}
/**
* 初始化数据
*/
function loadData() {
loadGenderOptions()
loadDeptOptions()
handleQuery()
loadGenderOptions();
loadDeptOptions();
handleQuery();
}
onMounted(() => {
loadData()
})
loadData();
});
</script>
<style lang="scss" scoped>
</style>