优化注册登录

This commit is contained in:
TimSpan 2024-09-04 15:33:29 +08:00
parent f06a136ea7
commit 9eebc328c2
3 changed files with 131 additions and 78 deletions

View File

@ -8,3 +8,15 @@ interface JsonResult<T> {
message: string;
data?: T;
}
interface dataStatus {
account: string;
password: string;
remark: string;
checkStatus: {
extData: {
color: string;
};
label: string;
value: number;
};
}

View File

@ -19,6 +19,10 @@ export const useUserStore = defineStore({
getters: {
getTokenInfo: (state): TokenInfo => state.tokenInfo as TokenInfo,
},
// persist 是 Pinia 的一个插件 pinia-plugin-persistedstate 提供的功能
// 用来让状态数据在页面刷新或重新加载时保存在浏览器的存储中
// 通过这个插件,你可以让 Pinia store 的状态持久化,即即使页面刷新,数据也不会丢失
persist: {
key: "useUserStore",
storage: window.localStorage,

View File

@ -32,21 +32,21 @@
</a-form-item>
</div>
<!-- 用户根据单位代码去查询 审核状态 -->
<a-form-item has-feedback label="单位代码" name="code">
<a-form-item has-feedback label="单位机构代码" name="code">
<a-input v-model:value="formState.code" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="单位名称" name="name">
<a-form-item has-feedback label="单位机构名称" name="name">
<a-input v-model:value="formState.name" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="详细地址" name="address">
<a-input v-model:value="formState.address" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="联系人姓名" name="contactPersonInfo">
<a-input v-model:value="formState.contactPersonInfo.name" autocomplete="off" />
<a-form-item has-feedback label="联系人姓名" name="contactName">
<a-input v-model:value="formState.contactName" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
<a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
<a-form-item has-feedback label="联系人电话" name="telephone">
<a-input v-model:value="formState.telephone" autocomplete="off" />
</a-form-item>
<!-- -->
@ -60,13 +60,14 @@
</a-tab-pane>
<a-tab-pane key="2" tab="查询注册结果">
<div class="flex items-center justify-center flex-col" style="max-height: 500px; overflow-y: auto">
<a-card v-if="isLogin" class="mb-8" style="width: 300px">
<div>账户{{ account }}</div>
<div>密码{{ password }}</div>
</a-card>
<a-input v-if="isHasAccount" class="w-40 mb-8" v-model:value="searchCode.code" autocomplete="off" placeholder="请输入单位代码查询" />
<a-button v-if="isHasAccount" size="large" type="primary" :loading="loading" @click="getCheckStatus"> 查询审核状态 </a-button>
<a-button v-if="isLogin" size="large" type="primary" @click="toLogin"> 去登录 </a-button>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="statusDate" layout="horizontal">
<a-form-item label="单位机构代码" name="onlyCode" :rules="[{ required: true, message: '请输入单位代码进行查询' }]">
<a-input placeholder="请输入单位代码查询" :allowClear="true" v-model:value="statusDate.onlyCode"></a-input>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit" style="width: 100px" @click="getCheckStatus">确认</a-button>
</a-form-item>
</a-form>
</div>
</a-tab-pane>
</a-tabs>
@ -78,24 +79,25 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
import { message } from 'ant-design-vue'
// import type { CascaderProps } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import api from '@/axios/index.ts'
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
import { onMounted, reactive, ref, defineComponent } from 'vue'
import { onMounted, reactive, ref, defineComponent, createVNode, h } from 'vue'
defineComponent({
name: 'Register',
})
onMounted(() => {
getTree()
})
const labelCol = { style: { width: '120px' } }
const wrapperCol = { span: 14 }
const filter: ShowSearchType['filter'] = (inputValue, path) => {
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
}
const value = ref<string[]>([])
const options = ref<any[]>([])
const cascaderChange = (value: any, selectedOptions: any): void => {
const cascaderChange = (value: any): void => {
formState.administrativeDivisionCodes = [...value]
}
@ -154,7 +156,6 @@ const loadTreeFromCache = async (): Promise<any | null> => {
const request = store.get('treeData')
request.onsuccess = () => {
// console.log('🚀 ~ loadTreeFromCache ~ request.result:', request.result)
if (request.result !== undefined) {
resolve(request.result) //
} else {
@ -172,7 +173,6 @@ const loadTreeFromCache = async (): Promise<any | null> => {
const getTree = async () => {
//
const cachedData = await loadTreeFromCache()
// console.log('🚀 ~ getTree ~ cachedData:', cachedData)
if (cachedData) {
console.log('未发请求')
// 使
@ -193,66 +193,83 @@ interface FormState {
name: string
code: number | string
administrativeDivisionCodes: any[]
address: string
contactPersonInfo: ContactPersonInfo
telephone: string //
contactName: string //
}
const formRef = ref<FormInstance>()
interface ContactPersonInfo {
telephone: string
name: string
}
const formState = reactive<FormState>({
name: '',
code: '',
administrativeDivisionCodes: [],
// province: '',
// city: '',
// districts: '',
// street: '',
address: '',
contactPersonInfo: {
telephone: '',
name: '',
},
contactName: '',
})
const checkIsNull = async (_rule: Rule, value: string) => {
const checkName = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入')
return Promise.reject('请输入单位机构名称')
} else {
return Promise.resolve()
}
}
const checkOBJ = async (_rule: Rule, value: ContactPersonInfo) => {
// console.log('🚀 ~ checkOBJ ~ value:', value)
if (value.telephone !== '' && value.name !== '') {
return Promise.resolve()
const checkCode = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入单位机构代码')
} else {
// return Promise.reject('')
// return Promise.reject('')
return Promise.resolve()
}
}
const checkAddress = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入详细地址')
} else {
return Promise.resolve()
}
}
const checkTelephone = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入联系人电话')
} else {
return Promise.resolve()
}
}
const checkContactName = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入联系人姓名')
} else {
return Promise.resolve()
}
}
// Rule
const rules: Record<string, Rule[]> = {
name: [{ required: true, validator: checkIsNull, trigger: 'change' }],
code: [{ required: true, validator: checkIsNull, trigger: 'change' }],
address: [{ required: true, validator: checkIsNull, trigger: 'change' }],
contactPersonInfo: [{ required: true, validator: checkOBJ, trigger: 'change' }],
name: [{ required: true, validator: checkName, trigger: 'change' }],
code: [{ required: true, validator: checkCode, trigger: 'change' }],
address: [{ required: true, validator: checkAddress, trigger: 'change' }],
telephone: [{ required: true, validator: checkTelephone, trigger: 'change' }],
contactName: [{ required: true, validator: checkContactName, trigger: 'change' }],
}
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
const register = (values: any) => {
const register = () => {
if (value.value.length === 0) {
message.error('请选择行政区划')
return
} else {
api.post<any>('/common/policeUnitRegister', { ...formState }).then((res) => {
const { telephone, contactName, ...rest } = formState
const contactPersonInfo = {
telephone,
name: contactName,
}
const submitForm = {
...rest,
contactPersonInfo,
}
api.post<any>('/common/policeUnitRegister', { ...submitForm }).then((res) => {
console.log(res)
if (res.code === 200) {
message.success('提交成功')
@ -262,14 +279,15 @@ const register = (values: any) => {
}
const handleFinish = (values: FormState) => {
console.log(values, formState)
register(values)
console.log('自定义校验成功')
console.log(values)
register()
}
const handleFinishFailed = (errors: any) => {
console.log(errors)
}
const resetForm = () => {
formRef.value.resetFields()
formRef.value?.resetFields()
value.value = []
}
const handleValidate = (...args: any[]) => {
@ -278,36 +296,55 @@ const handleValidate = (...args: any[]) => {
const activeKey = ref('1')
const loading = ref<boolean>(false)
const account = ref<string>('')
const password = ref<string>('')
const isHasAccount = ref<boolean>(true)
const isLogin = ref<boolean>(false)
// const searchCode = ref<string>()
//
const searchCode = reactive({
// dawda
code: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
})
const getCheckStatus = () => {
const getCheckStatus = async () => {
if (statusDate.onlyCode.trim() === '') {
return
}
loading.value = true
api
.post<any>('/management/getCheckStatus', { onlyCode: searchCode.code, unitOptType: 'POLICE_UNIT' })
.post<dataStatus>('/management/getCheckStatus', statusDate)
.then((res) => {
console.log('🚀 ~ api.post<any> ~ res:', res)
if (res.code === 200) {
loading.value = false
isHasAccount.value = false
isLogin.value = true
account.value = res.data.account
password.value = res.data.password
}
showConfirm(res.data as dataStatus)
})
.finally(() => {
loading.value = false
})
}
const toLogin = () => {
router.replace({ path: '/login', query: { password: password.value, account: account.value } })
import { useUserStore } from '@/stores/modules/userStore.ts'
const showConfirm = (columnsDate: dataStatus) => {
if (columnsDate.checkStatus.value === 0) {
Modal.success({
title: `审核通过`,
icon: createVNode(ExclamationCircleOutlined),
content: h('div', {}, [h('div', `账号:${columnsDate.account}`), h('div', `密码:${columnsDate.password}`), h('div', `${columnsDate.remark}`)]),
okText: '跳转',
async onOk() {
await useUserStore().resetUserInfo()
await router
.replace({
path: '/login',
query: {
account: columnsDate.account,
password: columnsDate.password,
},
})
.then(() => {})
},
onCancel() {},
})
} else {
Modal.error({
title: `未审核`,
icon: createVNode(ExclamationCircleOutlined),
content: `${columnsDate.remark}`,
})
}
}
const statusDate = reactive({
// __APP_ENV.VITE_APP_ENV === 'development' ? 'dawda' : '',
onlyCode: '',
unitOptType: 'POLICE_UNIT',
})
</script>