优化注册登录
This commit is contained in:
parent
f06a136ea7
commit
9eebc328c2
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import {defineStore} from "pinia";
|
||||
import {TokenInfo, UserStore} from "@/types/stores/userStore.ts";
|
||||
import { defineStore } from "pinia";
|
||||
import { TokenInfo, UserStore } from "@/types/stores/userStore.ts";
|
||||
|
||||
export const useUserStore = defineStore({
|
||||
id: 'useUserStore',
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
},
|
||||
telephone: '',
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue