237 lines
11 KiB
Vue
237 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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 has-feedback label="联系人电话" name="contactPersonInfo"> <a-input v-model:value="formState.contactPersonInfo.telephone" 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-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 } from 'vue'
|
||
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 getTree = async () => {
|
||
const res = await api.get<any>('/common/administrativeDivisionTree')
|
||
console.log(res)
|
||
options.value = 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()
|
||
}
|
||
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 getCheckStatus = () => {
|
||
loading.value = true
|
||
api.post<any>('/management/getCheckStatus', { onlyCode: 'dawda', 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
|
||
}
|
||
})
|
||
}
|
||
const toLogin = () => {
|
||
router.replace({ path: '/login' })
|
||
}
|
||
</script>
|