314 lines
11 KiB
Vue
314 lines
11 KiB
Vue
<template>
|
||
<!-- 背景色覆盖整个页面，并且能够正常滚动内容，同时固定内层内容的位置 -->
|
||
<body style="margin: 0; padding: 0; overflow: auto">
|
||
<!-- 背景色层 -->
|
||
<div class="bg-gray-100" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1"></div>
|
||
<!-- 内容层 -->
|
||
<div class="flex justify-center" style="position: relative; margin: 20px auto">
|
||
<!-- 卡片盒子 -->
|
||
<div class="w-full max-w-3xl p-6 bg-white rounded-xl shadow-md">
|
||
<!-- type="card" -->
|
||
<a-tabs v-model:activeKey="activeKey" :tabBarGutter="300" centered>
|
||
<a-tab-pane key="1" tab="注册">
|
||
<div style="max-height: 500px; overflow-y: auto">
|
||
<a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
|
||
<div style="height: 100%">
|
||
<a-form-item v-if="options.length > 0" label="行政区划">
|
||
<a-cascader
|
||
:field-names="{ label: 'label', value: 'value', children: 'children' }"
|
||
@change="cascaderChange"
|
||
style="width: 300px"
|
||
v-if="options.length > 0"
|
||
v-model:value="value"
|
||
:options="options"
|
||
:show-search="{ filter }"
|
||
placeholder="请选择行政区划"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item v-else label="行政区划">
|
||
<!--  数据加载中～～～ -->
|
||
|
||
<div class="flex justify-center items-center" style="width: 200px"><a-spin /></div>
|
||
</a-form-item>
|
||
</div>
|
||
<!-- 用户根据单位代码去查询 审核状态 -->
|
||
<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-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>
|
||
<a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
|
||
<a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
|
||
</a-form-item>
|
||
<!-- -->
|
||
|
||
<!-- -->
|
||
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
|
||
<a-button type="primary" html-type="submit">提交</a-button>
|
||
<a-button style="margin-left: 10px" @click="resetForm">重置表单</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</template>
|
||
|
||
<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 api from '@/axios/index.ts'
|
||
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
|
||
import { onMounted, reactive, ref, defineComponent } from 'vue'
|
||
defineComponent({
|
||
name: 'Register',
|
||
})
|
||
onMounted(() => {
|
||
getTree()
|
||
})
|
||
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 => {
|
||
formState.administrativeDivisionCodes = [...value]
|
||
}
|
||
|
||
const dbName = 'myDatabase' // 定义数据库名称
|
||
const storeName = 'treeStore' // 定义存储空间名称
|
||
|
||
// 打开或创建 IndexedDB 数据库的函数
|
||
const openDB = () => {
|
||
return new Promise<IDBDatabase>((resolve, reject) => {
|
||
// 尝试打开名为 'myDatabase' 的数据库，如果不存在则创建
|
||
const request = indexedDB.open(dbName, 1)
|
||
|
||
// 如果数据库需要升级（例如第一次打开或版本号增加），会触发此事件
|
||
request.onupgradeneeded = (event) => {
|
||
const db = (event.target as IDBOpenDBRequest).result
|
||
// 创建一个新的对象存储空间（相当于数据库中的表）名为 'treeStore'
|
||
db.createObjectStore(storeName)
|
||
}
|
||
|
||
// 成功打开数据库后执行此回调
|
||
request.onsuccess = (event) => {
|
||
// 将数据库实例传递给 resolve，供后续使用
|
||
resolve((event.target as IDBOpenDBRequest).result)
|
||
}
|
||
|
||
// 如果打开数据库失败，执行此回调
|
||
request.onerror = (event) => {
|
||
// 将错误信息传递给 reject
|
||
reject((event.target as IDBOpenDBRequest).error)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 将树形结构数据存储到 IndexedDB 中的函数
|
||
const storeTreeData = async (data: any) => {
|
||
const db = await openDB() // 打开数据库并获取数据库实例
|
||
const transaction = db.transaction(storeName, 'readwrite') // 创建一个读写事务
|
||
const store = transaction.objectStore(storeName) // 获取存储空间
|
||
|
||
// 使用 'treeData' 作为键，将数据存储到存储空间中
|
||
store.put(data, 'treeData')
|
||
|
||
// 事务完成后执行的回调
|
||
transaction.oncomplete = () => {
|
||
console.log('Data stored successfully') // 数据存储成功后输出信息
|
||
}
|
||
}
|
||
|
||
// 从 IndexedDB 中加载缓存数据的函数
|
||
const loadTreeFromCache = async (): Promise<any | null> => {
|
||
const db = await openDB()
|
||
const transaction = db.transaction(storeName, 'readonly')
|
||
const store = transaction.objectStore(storeName)
|
||
|
||
return new Promise<any | null>((resolve, reject) => {
|
||
const request = store.get('treeData')
|
||
|
||
request.onsuccess = () => {
|
||
// console.log('🚀 ~ loadTreeFromCache ~ request.result:', request.result)
|
||
if (request.result !== undefined) {
|
||
resolve(request.result) // 返回缓存数据
|
||
} else {
|
||
resolve(null) // 如果没有缓存数据，返回 null
|
||
}
|
||
}
|
||
|
||
request.onerror = () => {
|
||
reject(request.error)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取树形结构数据并存储在 IndexedDB 中的主函数
|
||
const getTree = async () => {
|
||
// 先尝试从缓存中加载数据
|
||
const cachedData = await loadTreeFromCache()
|
||
// console.log('🚀 ~ getTree ~ cachedData:', cachedData)
|
||
if (cachedData) {
|
||
console.log('未发请求')
|
||
// 如果缓存存在，直接使用缓存数据
|
||
options.value = cachedData
|
||
// console.log('Loaded from cache:', cachedData)
|
||
} else {
|
||
console.log('发起了请求')
|
||
// 如果缓存不存在，发起 API 请求
|
||
const res = await api.get<any>('/common/administrativeDivisionTree')
|
||
options.value = res.data
|
||
await storeTreeData(res.data)
|
||
}
|
||
}
|
||
import type { Rule } from 'ant-design-vue/es/form'
|
||
import type { FormInstance } from 'ant-design-vue'
|
||
|
||
interface FormState {
|
||
name: string
|
||
code: number | string
|
||
administrativeDivisionCodes: any[]
|
||
|
||
address: string
|
||
contactPersonInfo: ContactPersonInfo
|
||
}
|
||
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: '',
|
||
},
|
||
})
|
||
|
||
const checkIsNull = async (_rule: Rule, value: string) => {
|
||
if (value === '') {
|
||
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()
|
||
} else {
|
||
// return Promise.reject('请填写完整的联系人信息')
|
||
// return Promise.reject('请输入')
|
||
}
|
||
}
|
||
|
||
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' }],
|
||
}
|
||
const layout = {
|
||
labelCol: { span: 4 },
|
||
wrapperCol: { span: 14 },
|
||
}
|
||
|
||
const register = (values: any) => {
|
||
if (value.value.length === 0) {
|
||
message.error('请选择行政区划')
|
||
return
|
||
} else {
|
||
api.post<any>('/common/policeUnitRegister', { ...formState }).then((res) => {
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
message.success('提交成功')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const handleFinish = (values: FormState) => {
|
||
console.log(values, formState)
|
||
register(values)
|
||
}
|
||
const handleFinishFailed = (errors: any) => {
|
||
console.log(errors)
|
||
}
|
||
const resetForm = () => {
|
||
formRef.value.resetFields()
|
||
value.value = []
|
||
}
|
||
const handleValidate = (...args: any[]) => {
|
||
console.log(args)
|
||
}
|
||
|
||
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 = () => {
|
||
loading.value = true
|
||
api
|
||
.post<any>('/management/getCheckStatus', { onlyCode: searchCode.code, unitOptType: 'POLICE_UNIT' })
|
||
.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
|
||
}
|
||
})
|
||
.finally(() => {
|
||
loading.value = false
|
||
})
|
||
}
|
||
const toLogin = () => {
|
||
router.replace({ path: '/login', query: { password: password.value, account: account.value } })
|
||
}
|
||
</script>
|