policeSecurity/policeManagement/src/views/register.vue

<template>
  <div style="height: 100%; width: 100%">
    <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: 200px"
            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 style="width: 200px; display: flex; justify-content: center; align-items: center"><a-spin /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp数据加载中～～～</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>
</template>

<script setup lang="ts">
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]
  // formState.province = value[0]
  // formState.city = value[1]
  // formState.districts = value[2]
  // formState.street = value[3]
}

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[]
  // province: string
  // city: string
  // districts: string
  // street: string
  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 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: checkIsNull, trigger: 'change' }],
}
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
}
const handleFinish = (values: FormState) => {
  console.log(values, formState)
  if (value.value.length === 0) {
    message.error('请选择行政区划')
    return
  } else {
    api.post<any>('/common/policeUnitRegister', { ...formState }).then((res) => {
      console.log(res)
    })
  }
}
const handleFinishFailed = (errors: any) => {
  console.log(errors)
}
const resetForm = () => {
  formRef.value.resetFields()
}
const handleValidate = (...args: any[]) => {
  console.log(args)
}
//
</script>