mirror of
https://gitee.com/bootx/dax-pay-ui.git
synced 2025-09-01 18:17:46 +00:00
feat 用户管理和登录对接
This commit is contained in:
DaxPay
@@ -27,7 +27,7 @@ export interface GetUserInfoModel {
|
||||
// 名称
|
||||
name: string
|
||||
// 账号
|
||||
username: string
|
||||
account: string
|
||||
// 头像
|
||||
avatar: string
|
||||
}
|
||||
|
||||
50
src/api/sys/userAssist.ts
Normal file
50
src/api/sys/userAssist.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { defHttp } from '@/utils/http/axios'
|
||||
import { Result } from '#/axios'
|
||||
|
||||
/**
|
||||
* 账号是否被使用
|
||||
*/
|
||||
export function existsAccount(account) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsAccount`,
|
||||
params: { account },
|
||||
})
|
||||
}
|
||||
export function existsAccountNotId(account, id) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsAccountNotId`,
|
||||
params: { account, id },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号是否被使用
|
||||
*/
|
||||
export function existsPhone(phone) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsPhone`,
|
||||
params: { phone },
|
||||
})
|
||||
}
|
||||
export function existsPhoneNotId(phone, id) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsPhoneNotId`,
|
||||
params: { phone, id },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 邮箱是否被使用
|
||||
*/
|
||||
export function existsEmail(email) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsEmail`,
|
||||
params: { email },
|
||||
})
|
||||
}
|
||||
export function existsEmailNotId(email, id) {
|
||||
return defHttp.get<Result<boolean>>({
|
||||
url: `/user/existsEmailNotId`,
|
||||
params: { email, id },
|
||||
})
|
||||
}
|
||||
254
src/utils/validate.ts
Normal file
254
src/utils/validate.ts
Normal file
@@ -0,0 +1,254 @@
|
||||
/**
|
||||
* 邮箱
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isEmail(s) {
|
||||
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号码
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isMobile(s) {
|
||||
return /^1[0-9]{10}$/.test(s)
|
||||
}
|
||||
|
||||
/**
|
||||
* 电话号码
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isPhone(s) {
|
||||
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
|
||||
}
|
||||
|
||||
/**
|
||||
* URL地址
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isURL(s) {
|
||||
return /^http[s]?:\/\/.*/.test(s)
|
||||
}
|
||||
|
||||
export function isValidUsername(str) {
|
||||
const validMap = ['admin', 'editor']
|
||||
return validMap.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
/* 合法uri */
|
||||
export function validateURL(textval) {
|
||||
const urlregex =
|
||||
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
|
||||
return urlregex.test(textval)
|
||||
}
|
||||
|
||||
/* 小写字母 */
|
||||
export function validateLowerCase(str) {
|
||||
const reg = /^[a-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/* 大写字母 */
|
||||
export function validateUpperCase(str) {
|
||||
const reg = /^[A-Z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/* 大小写字母 */
|
||||
export function validateAlphabets(str) {
|
||||
const reg = /^[A-Za-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/* 验证pad还是pc */
|
||||
export const validatePc = function () {
|
||||
const userAgentInfo = navigator.userAgent
|
||||
const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
|
||||
let flag = true
|
||||
for (let v = 0; v < Agents.length; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false
|
||||
break
|
||||
}
|
||||
}
|
||||
return flag
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断身份证号码
|
||||
*/
|
||||
export function validateCardId(code) {
|
||||
let result = true
|
||||
let msg = ''
|
||||
const city = {
|
||||
11: '北京',
|
||||
12: '天津',
|
||||
13: '河北',
|
||||
14: '山西',
|
||||
15: '内蒙古',
|
||||
21: '辽宁',
|
||||
22: '吉林',
|
||||
23: '黑龙江 ',
|
||||
31: '上海',
|
||||
32: '江苏',
|
||||
33: '浙江',
|
||||
34: '安徽',
|
||||
35: '福建',
|
||||
36: '江西',
|
||||
37: '山东',
|
||||
41: '河南',
|
||||
42: '湖北 ',
|
||||
43: '湖南',
|
||||
44: '广东',
|
||||
45: '广西',
|
||||
46: '海南',
|
||||
50: '重庆',
|
||||
51: '四川',
|
||||
52: '贵州',
|
||||
53: '云南',
|
||||
54: '西藏 ',
|
||||
61: '陕西',
|
||||
62: '甘肃',
|
||||
63: '青海',
|
||||
64: '宁夏',
|
||||
65: '新疆',
|
||||
71: '台湾',
|
||||
81: '香港',
|
||||
82: '澳门',
|
||||
91: '国外 ',
|
||||
}
|
||||
if (!validateNull(code)) {
|
||||
if (code.length === 18) {
|
||||
if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
|
||||
msg = '证件号码格式错误'
|
||||
} else if (!city[code.substr(0, 2)]) {
|
||||
msg = '地址编码错误'
|
||||
} else {
|
||||
// 18位身份证需要验证最后一位校验位
|
||||
code = code.split('')
|
||||
// ∑(ai×Wi)(mod 11)
|
||||
// 加权因子
|
||||
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
|
||||
// 校验位
|
||||
const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
|
||||
let sum = 0
|
||||
let ai = 0
|
||||
let wi = 0
|
||||
for (let i = 0; i < 17; i++) {
|
||||
ai = code[i]
|
||||
wi = factor[i]
|
||||
sum += ai * wi
|
||||
}
|
||||
if (parity[sum % 11] !== code[17]) {
|
||||
msg = '证件号码校验位错误'
|
||||
} else {
|
||||
result = false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
msg = '证件号码长度不为18位'
|
||||
}
|
||||
} else {
|
||||
msg = '证件号码不能为空'
|
||||
}
|
||||
return { result, msg }
|
||||
}
|
||||
|
||||
/**
|
||||
* 邮件
|
||||
*/
|
||||
export function validateEmail(email) {
|
||||
const isEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/
|
||||
let result = false
|
||||
let msg = ''
|
||||
if (!validateNull(email)) {
|
||||
if (!isEmail.test(email)) {
|
||||
msg = '邮箱格式不正确'
|
||||
} else {
|
||||
result = true
|
||||
}
|
||||
} else {
|
||||
msg = '邮箱不能为空'
|
||||
}
|
||||
return { result, msg }
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断手机号码是否正确
|
||||
* @return
|
||||
*/
|
||||
export function validateMobile(phone) {
|
||||
let result = false
|
||||
let msg = ''
|
||||
const isPhone = /^(1[0-9])\d{9}$/
|
||||
if (!validateNull(phone)) {
|
||||
if (phone.length === 11) {
|
||||
if (!isPhone.test(phone)) {
|
||||
msg = '手机号码格式不正确'
|
||||
} else {
|
||||
result = true
|
||||
}
|
||||
} else {
|
||||
msg = '手机号码格式不正确'
|
||||
}
|
||||
} else {
|
||||
msg = '手机号码不能为空'
|
||||
}
|
||||
return { result, msg }
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断姓名是否正确
|
||||
*/
|
||||
export function validateName(name) {
|
||||
const regName = /^[\u4e00-\u9fa5]{2,4}$/
|
||||
return regName.test(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为整数
|
||||
*/
|
||||
export function validateNum(num, type) {
|
||||
let regName = /[^\d.]/g
|
||||
if (type === 1) {
|
||||
if (!regName.test(num)) return false
|
||||
} else if (type === 2) {
|
||||
regName = /[^\d]/g
|
||||
if (!regName.test(num)) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为小数
|
||||
*/
|
||||
export function validateNumOrd(num, type) {
|
||||
let regName = /[^\d.]/g
|
||||
if (type === 1) {
|
||||
if (!regName.test(num)) return false
|
||||
} else if (type === 2) {
|
||||
regName = /[^\d.]/g
|
||||
if (!regName.test(num)) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为空
|
||||
*/
|
||||
export function validateNull(val) {
|
||||
if (typeof val === 'boolean') {
|
||||
return false
|
||||
}
|
||||
if (typeof val === 'number') {
|
||||
return false
|
||||
}
|
||||
if (val instanceof Array) {
|
||||
if (val.length === 0) return true
|
||||
} else if (val instanceof Object) {
|
||||
if (JSON.stringify(val) === '{}') return true
|
||||
} else {
|
||||
return val === 'null' || val == null || val === 'undefined' || val === undefined || val === ''
|
||||
}
|
||||
return false
|
||||
}
|
||||
136
src/views/iam/user/User.api.ts
Normal file
136
src/views/iam/user/User.api.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import { defHttp } from '@/utils/http/axios'
|
||||
import { PageResult, Result } from '#/axios'
|
||||
import { BaseEntity } from '#/web'
|
||||
|
||||
/**
|
||||
* 分页
|
||||
*/
|
||||
export function page(params) {
|
||||
return defHttp.get<Result<PageResult<UserInfo>>>({
|
||||
url: '/user/admin/page',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取单条
|
||||
*/
|
||||
export function get(id) {
|
||||
return defHttp.get<Result<UserInfo>>({
|
||||
url: '/user/admin/findById',
|
||||
params: { id },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加
|
||||
*/
|
||||
export function add(obj) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/add',
|
||||
data: obj,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新
|
||||
*/
|
||||
export function update(obj) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/update',
|
||||
data: obj,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询全部
|
||||
*/
|
||||
export function findAll() {
|
||||
return defHttp.get<Result<Array<UserInfo>>>({
|
||||
url: '/user/admin/findAll',
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
export function restartPassword(userId, newPassword) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/restartPassword',
|
||||
params: { userId, newPassword },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量重置密码
|
||||
*/
|
||||
export function restartPasswordBatch(userIds, newPassword) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/restartPasswordBatch',
|
||||
data: userIds,
|
||||
params: { newPassword },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 封禁用户
|
||||
*/
|
||||
export function banUser(userId) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/ban',
|
||||
params: { userId },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 封禁用户 批量
|
||||
*/
|
||||
export function banUserBatch(userIds) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/banUserBatch',
|
||||
data: userIds,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 解锁用户
|
||||
*/
|
||||
export function unlockUser(userId) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/unlock',
|
||||
params: { userId },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 解锁用户
|
||||
*/
|
||||
export function unlockUserBatch(userIds) {
|
||||
return defHttp.post({
|
||||
url: '/user/admin/unlockBatch',
|
||||
data: userIds,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
export interface UserInfo extends BaseEntity {
|
||||
// 名称
|
||||
name: string
|
||||
// 账号
|
||||
account: string
|
||||
// 密码
|
||||
password?: string
|
||||
// 确认密码
|
||||
confirmPassword?: string
|
||||
// 手机号
|
||||
phone?: string
|
||||
// 邮箱
|
||||
email?: string
|
||||
// 是否超级管理员
|
||||
administrator?: boolean
|
||||
// 注册时间
|
||||
registerTime?: string
|
||||
// 账号状态
|
||||
status?: number
|
||||
}
|
||||
182
src/views/iam/user/UserAdd.vue
Normal file
182
src/views/iam/user/UserAdd.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<basic-drawer
|
||||
showFooter
|
||||
title="添加用户"
|
||||
v-bind="$attrs"
|
||||
:width="modalWidth"
|
||||
:open="visible"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form
|
||||
class="small-from-item"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:validate-trigger="['blur', 'change']"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="用户账号" name="account" validate-first>
|
||||
<a-input v-model:value="form.account" placeholder="请输入用户账号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名称" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入用户名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="登录密码" name="password" validate-first>
|
||||
<strength-meter
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入登录密码"
|
||||
@change="validateToNextPassword"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="confirmPassword" validate-first>
|
||||
<a-input-password v-model:value="form.confirmPassword" placeholder="请重新输入登录密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" validate-first name="phone">
|
||||
<a-input v-model:value="form.phone" placeholder="请输入用户手机号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" validate-first name="email">
|
||||
<a-input v-model:value="form.email" placeholder="请输入用户邮箱" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button key="cancel" @click="handleCancel">取消</a-button>
|
||||
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
</basic-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicDrawer from '@/components/Drawer/src/BasicDrawer.vue'
|
||||
import useFormEdit from '@/hooks/bootx/useFormEdit'
|
||||
import { FormInstance, Rule } from 'ant-design-vue/lib/form'
|
||||
import { nextTick, reactive, ref } from 'vue'
|
||||
import StrengthMeter from '/@/components/StrengthMeter/src/StrengthMeter.vue'
|
||||
import { validateEmail, validateMobile } from '@/utils/validate'
|
||||
import { existsAccount, existsEmail, existsPhone } from '@/api/sys/userAssist'
|
||||
import { add, UserInfo } from './User.api'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
|
||||
const { handleCancel, labelCol, wrapperCol, modalWidth, confirmLoading, visible } = useFormEdit()
|
||||
const { createMessage } = useMessage()
|
||||
const formRef = ref<FormInstance>()
|
||||
let form = ref<UserInfo>({
|
||||
name: '',
|
||||
account: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
// 校验
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入用户名称' }],
|
||||
account: [
|
||||
{ required: true, message: '请输入用户账号' },
|
||||
{ validator: checkAccount, trigger: 'blur' },
|
||||
],
|
||||
password: [{ required: true, message: '请输入登录密码!' }],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请重新输入登录密码!' },
|
||||
{ validator: compareToFirstPassword },
|
||||
],
|
||||
phone: [{ validator: validatePhone }, { validator: validateBindPhone, trigger: 'blur' }],
|
||||
email: [{ validator: validateEmailRule }, { validator: validateBindEmail, trigger: 'blur' }],
|
||||
} as Record<string, Rule[]>)
|
||||
|
||||
let confirmDirty = ref(false)
|
||||
|
||||
// 事件
|
||||
const emits = defineEmits(['ok'])
|
||||
|
||||
function init() {
|
||||
visible.value = true
|
||||
confirmLoading.value = false
|
||||
nextTick(() => {
|
||||
formRef.value?.resetFields()
|
||||
})
|
||||
}
|
||||
|
||||
function handleOk() {
|
||||
formRef.value?.validate().then(async () => {
|
||||
confirmLoading.value = true
|
||||
await add(form.value).finally(() => (confirmLoading.value = false))
|
||||
createMessage.success('添加用户成功')
|
||||
confirmLoading.value = false
|
||||
emits('ok')
|
||||
handleCancel()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户名检查
|
||||
*/
|
||||
async function checkAccount() {
|
||||
const { data } = await existsAccount(form.value.account)
|
||||
return data ? Promise.reject('用户名已存在!') : Promise.resolve()
|
||||
}
|
||||
/**
|
||||
* 密码检查
|
||||
*/
|
||||
function validateToNextPassword() {
|
||||
if (confirmDirty.value) {
|
||||
formRef.value?.validateFields(['confirmPassword'])
|
||||
}
|
||||
}
|
||||
function compareToFirstPassword() {
|
||||
if (form.value.confirmPassword !== form.value.password) {
|
||||
confirmDirty.value = true
|
||||
return Promise.reject('密码不一致')
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验邮箱号
|
||||
*/
|
||||
function validateEmailRule() {
|
||||
const { email } = form.value
|
||||
if (!email) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
const { msg, result } = validateEmail(email)
|
||||
return result ? Promise.resolve() : Promise.reject(msg)
|
||||
}
|
||||
/**
|
||||
* 后台校验邮箱号是否被使用
|
||||
*/
|
||||
async function validateBindEmail() {
|
||||
const { email } = form.value
|
||||
const { data } = await existsEmail(email)
|
||||
return data ? Promise.reject('邮箱已被使用') : Promise.resolve()
|
||||
}
|
||||
/**
|
||||
* 校验手机号
|
||||
*/
|
||||
function validatePhone() {
|
||||
const { phone } = form.value
|
||||
if (!phone) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
const { msg, result } = validateMobile(phone)
|
||||
return result ? Promise.resolve() : Promise.reject(msg)
|
||||
}
|
||||
/**
|
||||
* 后台校验手机号是否被使用
|
||||
*/
|
||||
async function validateBindPhone() {
|
||||
const { phone } = form.value
|
||||
const { data } = await existsPhone(phone)
|
||||
return data ? Promise.reject('手机号已被使用') : Promise.resolve()
|
||||
}
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
43
src/views/iam/user/UserAssign.api.ts
Normal file
43
src/views/iam/user/UserAssign.api.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defHttp } from '@/utils/http/axios'
|
||||
import { Result } from '#/axios'
|
||||
import { Role } from '@/views/iam/role/Role.api'
|
||||
|
||||
/**
|
||||
* 获取用户拥有角色id集合
|
||||
*/
|
||||
export function getRoleIds(id) {
|
||||
return defHttp.get<Result<string[]>>({
|
||||
url: `/user/role/findRoleIdsByUser`,
|
||||
params: { id },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户拥有角色集合
|
||||
*/
|
||||
export function getRoles(id) {
|
||||
return defHttp.get<Result<Role[]>>({
|
||||
url: `/user/role/findRolesByUser`,
|
||||
params: { id },
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加用户角色关联关系
|
||||
*/
|
||||
export function addUserRole(data) {
|
||||
return defHttp.post({
|
||||
url: `/user/role/saveAssign`,
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加用户角色关联关系 批量
|
||||
*/
|
||||
export function addUserRoleBatch(data) {
|
||||
return defHttp.post({
|
||||
url: `/user/role/saveAssignBatch`,
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
169
src/views/iam/user/UserEdit.vue
Normal file
169
src/views/iam/user/UserEdit.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<basic-drawer
|
||||
showFooter
|
||||
title="用户信息修改"
|
||||
v-bind="$attrs"
|
||||
:width="modalWidth"
|
||||
:open="visible"
|
||||
:mask-closable="false"
|
||||
@ok="handleOk"
|
||||
@close="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form
|
||||
class="small-from-item"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:validate-trigger="['blur', 'change']"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="用户账号" validate-first name="account">
|
||||
<a-input v-model:value="form.account" placeholder="请输入用户账号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名称" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入用户名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" validate-first name="phone">
|
||||
<a-input v-model:value="form.phone" placeholder="请输入用户手机号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" validate-first name="email">
|
||||
<a-input v-model:value="form.email" placeholder="请输入用户邮箱" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</basic-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicDrawer from '@/components/Drawer/src/BasicDrawer.vue'
|
||||
import useFormEdit from '@/hooks/bootx/useFormEdit'
|
||||
import { FormInstance, Rule } from 'ant-design-vue/lib/form'
|
||||
import { computed, nextTick, ref } from 'vue'
|
||||
import { get, update, UserInfo } from './User.api'
|
||||
import { existsEmailNotId, existsPhoneNotId, existsAccountNotId } from '@/api/sys/userAssist'
|
||||
import { validateEmail, validateMobile } from '@/utils/validate'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
|
||||
const { handleCancel, diffForm, labelCol, wrapperCol, modalWidth, confirmLoading, visible } =
|
||||
useFormEdit()
|
||||
const { createMessage } = useMessage()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
let form = ref<UserInfo>({
|
||||
id: null,
|
||||
name: '',
|
||||
account: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
})
|
||||
let rawForm: any = {}
|
||||
|
||||
// 校验
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
account: [
|
||||
{ required: true, message: '请输入账号' },
|
||||
{ validator: checkAccount, trigger: 'blur' },
|
||||
],
|
||||
phone:
|
||||
rawForm.phone !== form.value.phone
|
||||
? [{ validator: validatePhone }, { validator: validateBindPhone, trigger: 'blur' }]
|
||||
: [],
|
||||
email:
|
||||
rawForm.email !== form.value.email
|
||||
? [{ validator: validateEmailRule }, { validator: validateBindEmail, trigger: 'blur' }]
|
||||
: [],
|
||||
} as Record<string, Rule[]>
|
||||
})
|
||||
// 事件
|
||||
const emits = defineEmits(['ok'])
|
||||
|
||||
/**
|
||||
* 入口
|
||||
*/
|
||||
function init(id) {
|
||||
visible.value = true
|
||||
confirmLoading.value = true
|
||||
nextTick(() => {
|
||||
formRef.value?.resetFields()
|
||||
})
|
||||
get(id).then(({ data }) => {
|
||||
rawForm = { ...data }
|
||||
form.value = data
|
||||
confirmLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新
|
||||
*/
|
||||
function handleOk() {
|
||||
formRef.value?.validate().then(async () => {
|
||||
confirmLoading.value = true
|
||||
await update({
|
||||
...form.value,
|
||||
...diffForm(form.value, rawForm, 'password'),
|
||||
}).finally(() => (confirmLoading.value = false))
|
||||
createMessage.success('用户更改成功')
|
||||
confirmLoading.value = false
|
||||
emits('ok')
|
||||
handleCancel()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户名检查
|
||||
*/
|
||||
async function checkAccount() {
|
||||
const { data } = await existsAccountNotId(form.value.account, form.value.id)
|
||||
return data ? Promise.reject('用户名已存在!') : Promise.resolve()
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验邮箱号
|
||||
*/
|
||||
function validateEmailRule() {
|
||||
const { email } = form.value
|
||||
if (!email) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
const { msg, result } = validateEmail(email)
|
||||
return result ? Promise.resolve() : Promise.reject(msg)
|
||||
}
|
||||
/**
|
||||
* 后台校验邮箱号是否被使用
|
||||
*/
|
||||
async function validateBindEmail() {
|
||||
const { email, id } = form.value
|
||||
if (rawForm.email === email) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
const { data } = await existsEmailNotId(email, id)
|
||||
return data ? Promise.reject('邮箱已被使用') : Promise.resolve()
|
||||
}
|
||||
/**
|
||||
* 校验手机号
|
||||
*/
|
||||
function validatePhone() {
|
||||
const { phone } = form.value
|
||||
if (!phone) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
const { msg, result } = validateMobile(phone)
|
||||
return result ? Promise.resolve() : Promise.reject(msg)
|
||||
}
|
||||
/**
|
||||
* 后台校验手机号是否被使用
|
||||
*/
|
||||
async function validateBindPhone() {
|
||||
const { phone, id } = form.value
|
||||
const { data } = await existsPhoneNotId(phone, id)
|
||||
return data ? Promise.reject('手机号已被使用') : Promise.resolve()
|
||||
}
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
293
src/views/iam/user/UserList.vue
Normal file
293
src/views/iam/user/UserList.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="m-3 p-3 pt-5 bg-white">
|
||||
<b-query
|
||||
:query-params="model.queryParam"
|
||||
:fields="fields"
|
||||
@query="queryPage"
|
||||
@reset="resetQueryParams"
|
||||
/>
|
||||
</div>
|
||||
<div class="m-3 p-3 bg-white">
|
||||
<vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
|
||||
<template #buttons>
|
||||
<a-space>
|
||||
<a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add"
|
||||
>新建</a-button
|
||||
>
|
||||
<a-dropdown v-if="batchOperateFlag">
|
||||
<a-button post-icon="ant-design:down-outlined"> 批量操作 </a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a @click="assignRolesBatch()">角色分配</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="lockUserConfirmBatch(true)">锁定账号</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="lockUserConfirmBatch(false)">解锁账号</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="resetPwdBatch()">重置密码</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
<vxe-table
|
||||
ref="xTable"
|
||||
size="medium"
|
||||
@checkbox-all="selectAllEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
:loading="loading"
|
||||
:data="pagination.records"
|
||||
>
|
||||
<vxe-column type="checkbox" width="50" />
|
||||
<vxe-column field="name" title="姓名" />
|
||||
<vxe-column field="account" title="账号" />
|
||||
<vxe-column field="phone" title="手机号" />
|
||||
<vxe-column field="email" title="邮箱" />
|
||||
<vxe-column field="administrator" title="是否管理员">
|
||||
<template #default="{ row }">
|
||||
<a-tag v-if="row.administrator" color="green">是</a-tag>
|
||||
<a-tag v-else color="red">否</a-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="status" title="用户状态">
|
||||
<template #default="{ row }">
|
||||
{{ dictConvert('UserStatusCode', row.status) || '无' }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column fixed="right" width="170" :showOverflow="false" title="操作">
|
||||
<template #default="{ row }">
|
||||
<a href="javascript:" @click="show(row)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a href="javascript:" @click="edit(row)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-link @click="assignRoles(row)">角色分配</a-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-link @click="assignDept(row)">部门分配</a-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-link @click="assignDataScope(row)">数据角色分配</a-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-link @click="resetPwd(row)">重置密码</a-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="[1, 3].includes(row.status)">
|
||||
<a-link v-if="row.status === 1" @click="lockUserConfirm(row.id, true)"
|
||||
>封禁账号</a-link
|
||||
>
|
||||
<a-link v-if="row.status === 3" @click="lockUserConfirm(row.id, false)"
|
||||
>解锁账号</a-link
|
||||
>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<vxe-pager
|
||||
size="medium"
|
||||
:loading="loading"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@page-change="handleTableChange"
|
||||
/>
|
||||
<UserAdd ref="userAdd" @ok="queryPage" />
|
||||
<UserEdit ref="userEdit" @ok="queryPage" />
|
||||
<UserShow ref="userShow" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BQuery from '/@/components/Bootx/Query/BQuery.vue'
|
||||
import useTablePage from '@/hooks/bootx/useTablePage'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { QueryField, STRING } from '@/components/Bootx/Query/Query'
|
||||
import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
|
||||
import { banUser, banUserBatch, page, unlockUser, unlockUserBatch } from './User.api'
|
||||
import { useDict } from '@/hooks/bootx/useDict'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import UserAdd from './UserAdd.vue'
|
||||
import UserEdit from './UserEdit.vue'
|
||||
import UserShow from './UserShow.vue'
|
||||
import ALink from "@/components/Link/Link.vue";
|
||||
|
||||
// 使用hooks
|
||||
const {
|
||||
handleTableChange,
|
||||
pageQueryResHandel,
|
||||
resetQueryParams,
|
||||
pagination,
|
||||
pages,
|
||||
model,
|
||||
loading,
|
||||
batchOperateFlag,
|
||||
} = useTablePage(queryPage)
|
||||
const { createConfirm } = useMessage()
|
||||
const { dictConvert } = useDict()
|
||||
|
||||
// 查询条件
|
||||
const fields = [
|
||||
{ field: 'account', type: STRING, name: '账号', placeholder: '请输入要查询的账号' },
|
||||
{ field: 'name', type: STRING, name: '姓名', placeholder: '请输入要查询的姓名' },
|
||||
] as QueryField[]
|
||||
const xTable = ref<VxeTableInstance>()
|
||||
const xToolbar = ref<VxeToolbarInstance>()
|
||||
let userAdd = ref<any>()
|
||||
let userEdit = ref<any>()
|
||||
let userShow = ref<any>()
|
||||
let userRoleAssign = ref<any>()
|
||||
let userRoleAssignBatch = ref<any>()
|
||||
let userDataScopeAssign = ref<any>()
|
||||
let userDataScopeAssignBatch = ref<any>()
|
||||
let userDeptAssign = ref<any>()
|
||||
let userDeptAssignBatch = ref<any>()
|
||||
let userResetPwd = ref<any>()
|
||||
let userResetPwdBatch = ref<any>()
|
||||
|
||||
onMounted(() => {
|
||||
vxeBind()
|
||||
queryPage()
|
||||
})
|
||||
function vxeBind() {
|
||||
xTable.value?.connect(xToolbar.value as VxeToolbarInstance)
|
||||
}
|
||||
|
||||
// 分页查询
|
||||
function queryPage() {
|
||||
loading.value = true
|
||||
page({
|
||||
...model.queryParam,
|
||||
...pages,
|
||||
}).then(({ data }) => {
|
||||
pageQueryResHandel(data)
|
||||
})
|
||||
return Promise.resolve()
|
||||
}
|
||||
/**
|
||||
* 选中全部
|
||||
*/
|
||||
function selectAllEvent() {
|
||||
const records = xTable.value?.getCheckboxRecords()
|
||||
batchOperateFlag.value = !!records?.length
|
||||
}
|
||||
/**
|
||||
* 选中事件
|
||||
*/
|
||||
function selectChangeEvent() {
|
||||
const records = xTable.value?.getCheckboxRecords()
|
||||
batchOperateFlag.value = !!records?.length
|
||||
}
|
||||
/**
|
||||
* 锁定/解锁用户
|
||||
* @param userId 用户id
|
||||
* @param type true 锁定, false 解锁
|
||||
*/
|
||||
function lockUserConfirm(userId, type: boolean) {
|
||||
createConfirm({
|
||||
iconType: 'warning',
|
||||
title: '警告',
|
||||
content: type ? '是否封禁选中的用户' : '是否解锁选中的用户',
|
||||
onOk: async () => {
|
||||
if (type) {
|
||||
await banUser(userId)
|
||||
} else {
|
||||
await unlockUser(userId)
|
||||
}
|
||||
queryPage()
|
||||
},
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 批量锁定/解锁用户
|
||||
* @param type true 锁定, false 解锁
|
||||
*/
|
||||
function lockUserConfirmBatch(type) {
|
||||
const userIds = xTable.value?.getCheckboxRecords().map((o) => o.id)
|
||||
createConfirm({
|
||||
iconType: 'warning',
|
||||
title: '警告',
|
||||
content: type ? '是否锁定选中的用户' : '是否解锁选中的用户',
|
||||
onOk: async () => {
|
||||
if (type) {
|
||||
await banUserBatch(userIds)
|
||||
} else {
|
||||
await unlockUserBatch(userIds)
|
||||
}
|
||||
queryPage()
|
||||
},
|
||||
})
|
||||
}
|
||||
// 分配角色
|
||||
function assignRoles(record) {
|
||||
userRoleAssign.value.init(record)
|
||||
}
|
||||
// 批量分配角色
|
||||
function assignRolesBatch() {
|
||||
const userIds = xTable.value?.getCheckboxRecords().map((o) => o.id)
|
||||
userRoleAssignBatch.value.init(userIds)
|
||||
}
|
||||
// 分配数据权限
|
||||
function assignDataScope(record) {
|
||||
userDataScopeAssign.value.init(record)
|
||||
}
|
||||
// 批量分配数据权限
|
||||
function assignDataScopeBatch() {
|
||||
const userIds = xTable.value?.getCheckboxRecords().map((o) => o.id)
|
||||
userDataScopeAssignBatch.value.init(userIds)
|
||||
}
|
||||
// 分配部门
|
||||
function assignDept(record) {
|
||||
userDeptAssign.value.init(record.id)
|
||||
}
|
||||
// 批量分配部门
|
||||
function assignDeptBatch() {
|
||||
const userIds = xTable.value?.getCheckboxRecords().map((o) => o.id)
|
||||
userDeptAssignBatch.value.init(userIds)
|
||||
}
|
||||
function add() {
|
||||
userAdd.value.init()
|
||||
}
|
||||
/**
|
||||
* 查看信息
|
||||
*/
|
||||
function show(record) {
|
||||
userShow.value.init(record.id)
|
||||
}
|
||||
/**
|
||||
* 信息编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
userEdit.value.init(record.id)
|
||||
}
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
function resetPwd(record) {
|
||||
userResetPwd.value.init(record.id)
|
||||
}
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
function resetPwdBatch() {
|
||||
const userIds = xTable.value?.getCheckboxRecords().map((o) => o.id)
|
||||
userResetPwdBatch.value.init(userIds)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
85
src/views/iam/user/UserShow.vue
Normal file
85
src/views/iam/user/UserShow.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<basic-drawer
|
||||
show-footer
|
||||
title="用户信息"
|
||||
v-bind="$attrs"
|
||||
:width="modalWidth"
|
||||
:open="visible"
|
||||
:mask-closable="false"
|
||||
@close="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form
|
||||
shio
|
||||
class="small-from-item"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="用户账号" name="account">
|
||||
<a-input disabled v-model:value="form.account" />
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名称" name="name">
|
||||
<a-input disabled v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone">
|
||||
<a-input disabled v-model:value="form.phone" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱">
|
||||
<a-input disabled v-model:value="form.email" />
|
||||
</a-form-item>
|
||||
<a-form-item label="管理员">
|
||||
<a-tag v-if="form.administrator" color="green">是</a-tag>
|
||||
<a-tag v-else>否</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户状态">
|
||||
<a-tag>{{ dictConvert('UserStatusCode', form.status) || '无' }}</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色列表">
|
||||
<a-tag color="green" v-for="o in roles" :key="o.id">{{ o.name }}</a-tag>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
<template #footer>
|
||||
<a-button key="cancel" @click="handleCancel">取消</a-button>
|
||||
</template>
|
||||
</basic-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useFormEdit from '@/hooks/bootx/useFormEdit'
|
||||
import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
|
||||
import { get, UserInfo } from './User.api'
|
||||
import { getRoles } from './UserAssign.api'
|
||||
import { useDict } from '@/hooks/bootx/useDict'
|
||||
import { ref } from 'vue'
|
||||
import { Role } from '@/views/iam/role/Role.api'
|
||||
|
||||
const { handleCancel, labelCol, wrapperCol, modalWidth, confirmLoading, visible } = useFormEdit()
|
||||
const { dictConvert } = useDict()
|
||||
|
||||
let form = ref<UserInfo>({
|
||||
name: '',
|
||||
account: '',
|
||||
})
|
||||
let roles = ref<Role[]>([])
|
||||
|
||||
async function init(id) {
|
||||
confirmLoading.value = true
|
||||
visible.value = true
|
||||
|
||||
Promise.all([
|
||||
get(id).then((res) => {
|
||||
form.value = res.data
|
||||
}),
|
||||
getRoles(id).then((res) => {
|
||||
roles.value = res.data
|
||||
}),
|
||||
]).then(() => (confirmLoading.value = false))
|
||||
}
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
2
types/store.d.ts
vendored
2
types/store.d.ts
vendored
@@ -33,7 +33,7 @@ export interface UserInfo {
|
||||
// 名称
|
||||
name: string
|
||||
// 账号
|
||||
username: string
|
||||
account: string
|
||||
// 头像图片id
|
||||
avatar: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user