优化注册登录

policeManagement/src/global.d.ts

@@ -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;
+    };
+}

policeManagement/src/stores/modules/userStore.ts

@@ -1,5 +1,5 @@
-import {defineStore} from "pinia";
+import { defineStore } from "pinia";
-import {TokenInfo, UserStore} from "@/types/stores/userStore.ts";
+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,

policeManagement/src/views/register.vue

@@ -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-form-item has-feedback label="联系人姓名" name="contactName">
-                  <a-input v-model:value="formState.contactPersonInfo.name" autocomplete="off" />
+                  <a-input v-model:value="formState.contactName" autocomplete="off" />
                 </a-form-item>
-                <a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
+                <a-form-item has-feedback label="联系人电话" name="telephone">
-                  <a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
+                  <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">
+              <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="statusDate" layout="horizontal">
-                <div>账户：{{ account }}</div>
+                <a-form-item label="单位机构代码" name="onlyCode" :rules="[{ required: true, message: '请输入单位代码进行查询' }]">
-                <div>密码：{{ password }}</div>
+                  <a-input placeholder="请输入单位代码查询" :allowClear="true" v-model:value="statusDate.onlyCode"></a-input>
-              </a-card>
+                </a-form-item>
-              <a-input v-if="isHasAccount" class="w-40 mb-8" v-model:value="searchCode.code" autocomplete="off" placeholder="请输入单位代码查询" />
+                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-              <a-button v-if="isHasAccount" size="large" type="primary" :loading="loading" @click="getCheckStatus"> 查询审核状态 </a-button>
+                  <a-button type="primary" html-type="submit" style="width: 100px" @click="getCheckStatus">确认</a-button>
-              <a-button v-if="isLogin" size="large" type="primary" @click="toLogin"> 去登录 </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 { ExclamationCircleOutlined } from '@ant-design/icons-vue'
-import { message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
-// import type { CascaderProps } 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) => {
+const checkCode = async (_rule: Rule, value: string) => {
-  // console.log('🚀 ~ checkOBJ ~ value:', value)
+  if (value === '') {
-
+    return Promise.reject('请输入单位机构代码')
-  if (value.telephone !== '' && value.name !== '') {
-    return Promise.resolve()
   } else {
-    // return Promise.reject('请填写完整的联系人信息')
+    return Promise.resolve()
-    // return Promise.reject('请输入')
   }
 }
-
+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' }],
+  name: [{ required: true, validator: checkName, trigger: 'change' }],
-  code: [{ required: true, validator: checkIsNull, trigger: 'change' }],
+  code: [{ required: true, validator: checkCode, trigger: 'change' }],
-  address: [{ required: true, validator: checkIsNull, trigger: 'change' }],
+  address: [{ required: true, validator: checkAddress, trigger: 'change' }],
-
+  telephone: [{ required: true, validator: checkTelephone, trigger: 'change' }],
-  contactPersonInfo: [{ required: true, validator: checkOBJ, 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)
+  console.log('自定义校验成功')
-  register(values)
+  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)
+      showConfirm(res.data as dataStatus)
-      if (res.code === 200) {
-        loading.value = false
-        isHasAccount.value = false
-        isLogin.value = true
-        account.value = res.data.account
-        password.value = res.data.password
-      }
     })
     .finally(() => {
       loading.value = false
     })
 }
-const toLogin = () => {
+import { useUserStore } from '@/stores/modules/userStore.ts'
-  router.replace({ path: '/login', query: { password: password.value, account: account.value } })
+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>