master
parent
c6b90e1b62
commit
95c15c2f5d
@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
title="充值"
|
||||||
|
:visible="visible"
|
||||||
|
:confirm-loading="submitLoading"
|
||||||
|
:mask-closable="false"
|
||||||
|
:width="400"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleClose"
|
||||||
|
>
|
||||||
|
<a-spin :spinning="submitLoading">
|
||||||
|
<a-form :model="formModel" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="线索数量">
|
||||||
|
<!-- <a-input v-model:value="formModel.clueNumber" placeholder="用户名" /> -->
|
||||||
|
<a-input-number
|
||||||
|
id="inputNumber"
|
||||||
|
v-model:value="formModel.clueNumber"
|
||||||
|
:min="0"
|
||||||
|
placeholder="线索数量"
|
||||||
|
style="width: 140px"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-spin>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { updateUserPassword } from '@/api/system/user'
|
||||||
|
import type { SysUserPassDTO } from '@/api/system/user/types'
|
||||||
|
import type { SysUserPageVO } from '@/api/system/user/types'
|
||||||
|
import { passEncrypt } from '@/utils/password-utils'
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form'
|
||||||
|
import { FormAction, useAdminForm } from '@/hooks/form'
|
||||||
|
import type { FormRequestMapping } from '@/hooks/form'
|
||||||
|
import { useModal } from '@/hooks/modal'
|
||||||
|
|
||||||
|
type ChangePasswordFormModel = SysUserPassDTO & {
|
||||||
|
clueNumber?: number | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const { visible, openModal, closeModal } = useModal()
|
||||||
|
|
||||||
|
const labelCol = {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 5 }
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapperCol = {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 16 }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 校验密码 */
|
||||||
|
const validatePass = async (_rule: Rule, value: string) => {
|
||||||
|
if (value === '') {
|
||||||
|
return Promise.reject('请输入新密码！')
|
||||||
|
} else {
|
||||||
|
if (formModel.confirmPass !== '') {
|
||||||
|
validate('confirmPass')
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 校验 confirm 密码 */
|
||||||
|
const validateConfirmPass = async (_rule: Rule, value: string) => {
|
||||||
|
if (value === '') {
|
||||||
|
return Promise.reject('请确认新密码！')
|
||||||
|
} else if (value !== formModel.pass) {
|
||||||
|
return Promise.reject('两次输入的密码不一致！')
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
interface chargeFormModel {
|
||||||
|
clueNumber?: number | undefined
|
||||||
|
}
|
||||||
|
// 表单模型
|
||||||
|
const formModel = reactive<chargeFormModel>({
|
||||||
|
// username: '',
|
||||||
|
// pass: '',
|
||||||
|
// confirmPass: '',
|
||||||
|
clueNumber: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单校验规则
|
||||||
|
const formRule = reactive({
|
||||||
|
pass: [{ required: true, validator: validatePass, trigger: 'change' }],
|
||||||
|
confirmPass: [{ required: true, validator: validateConfirmPass, trigger: 'change' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单的提交请求
|
||||||
|
const formRequestMapping: FormRequestMapping<ChangePasswordFormModel> = {
|
||||||
|
[FormAction.OTHER]: () => {
|
||||||
|
return updateUserPassword(formModel.userId!, {
|
||||||
|
pass: passEncrypt(formModel.pass),
|
||||||
|
confirmPass: passEncrypt(formModel.confirmPass)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formAction = FormAction.OTHER
|
||||||
|
|
||||||
|
const { submitLoading, validateAndSubmit, resetFields, validate, validateInfos } = useAdminForm(
|
||||||
|
formAction,
|
||||||
|
formRequestMapping,
|
||||||
|
formModel,
|
||||||
|
formRule
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 表单提交方法 */
|
||||||
|
const handleSubmit = () => {
|
||||||
|
validateAndSubmit(
|
||||||
|
{ ...formModel },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
closeModal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗关闭方法 */
|
||||||
|
const handleClose = () => {
|
||||||
|
closeModal()
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open(record: SysUserPageVO) {
|
||||||
|
resetFields()
|
||||||
|
openModal()
|
||||||
|
formModel.userId = record.userId
|
||||||
|
formModel.username = record.username
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .ant-input-number {
|
||||||
|
width: 160px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
title="充值"
|
||||||
|
:visible="visible"
|
||||||
|
:confirm-loading="submitLoading"
|
||||||
|
:mask-closable="false"
|
||||||
|
:width="400"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleClose"
|
||||||
|
>
|
||||||
|
<a-spin :spinning="submitLoading">
|
||||||
|
<a-form :model="formModel" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="线索数量">
|
||||||
|
<!-- <a-input v-model:value="formModel.clueNumber" placeholder="用户名" /> -->
|
||||||
|
<a-input-number
|
||||||
|
id="inputNumber"
|
||||||
|
v-model:value="formModel.clueNumber"
|
||||||
|
:min="0"
|
||||||
|
placeholder="线索数量"
|
||||||
|
style="width: 140px"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-spin>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { updateUserPassword } from '@/api/system/user'
|
||||||
|
import type { SysUserPassDTO } from '@/api/system/user/types'
|
||||||
|
import type { SysUserPageVO } from '@/api/system/user/types'
|
||||||
|
import { passEncrypt } from '@/utils/password-utils'
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form'
|
||||||
|
import { FormAction, useAdminForm } from '@/hooks/form'
|
||||||
|
import type { FormRequestMapping } from '@/hooks/form'
|
||||||
|
import { useModal } from '@/hooks/modal'
|
||||||
|
|
||||||
|
type ChangePasswordFormModel = SysUserPassDTO & {
|
||||||
|
clueNumber?: number | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const { visible, openModal, closeModal } = useModal()
|
||||||
|
|
||||||
|
const labelCol = {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 5 }
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapperCol = {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 16 }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 校验密码 */
|
||||||
|
const validatePass = async (_rule: Rule, value: string) => {
|
||||||
|
if (value === '') {
|
||||||
|
return Promise.reject('请输入新密码！')
|
||||||
|
} else {
|
||||||
|
if (formModel.confirmPass !== '') {
|
||||||
|
validate('confirmPass')
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 校验 confirm 密码 */
|
||||||
|
const validateConfirmPass = async (_rule: Rule, value: string) => {
|
||||||
|
if (value === '') {
|
||||||
|
return Promise.reject('请确认新密码！')
|
||||||
|
} else if (value !== formModel.pass) {
|
||||||
|
return Promise.reject('两次输入的密码不一致！')
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
interface chargeFormModel {
|
||||||
|
clueNumber?: number | undefined
|
||||||
|
}
|
||||||
|
// 表单模型
|
||||||
|
const formModel = reactive<chargeFormModel>({
|
||||||
|
// username: '',
|
||||||
|
// pass: '',
|
||||||
|
// confirmPass: '',
|
||||||
|
clueNumber: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单校验规则
|
||||||
|
const formRule = reactive({
|
||||||
|
pass: [{ required: true, validator: validatePass, trigger: 'change' }],
|
||||||
|
confirmPass: [{ required: true, validator: validateConfirmPass, trigger: 'change' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单的提交请求
|
||||||
|
const formRequestMapping: FormRequestMapping<ChangePasswordFormModel> = {
|
||||||
|
[FormAction.OTHER]: () => {
|
||||||
|
return updateUserPassword(formModel.userId!, {
|
||||||
|
pass: passEncrypt(formModel.pass),
|
||||||
|
confirmPass: passEncrypt(formModel.confirmPass)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formAction = FormAction.OTHER
|
||||||
|
|
||||||
|
const { submitLoading, validateAndSubmit, resetFields, validate, validateInfos } = useAdminForm(
|
||||||
|
formAction,
|
||||||
|
formRequestMapping,
|
||||||
|
formModel,
|
||||||
|
formRule
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 表单提交方法 */
|
||||||
|
const handleSubmit = () => {
|
||||||
|
validateAndSubmit(
|
||||||
|
{ ...formModel },
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
closeModal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗关闭方法 */
|
||||||
|
const handleClose = () => {
|
||||||
|
closeModal()
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open(record: SysUserPageVO) {
|
||||||
|
resetFields()
|
||||||
|
openModal()
|
||||||
|
formModel.userId = record.userId
|
||||||
|
formModel.username = record.username
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
::v-deep .ant-input-number {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue