省市区联动组件(对接后端接口，AntDesignVue3、TSX)

最新推荐文章于 2024-05-03 13:04:04 发布

一只小马_Hourse

最新推荐文章于 2024-05-03 13:04:04 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41634323/article/details/127042611

版权

接口数据来自于上一篇文章，组件暂时只实现基本功能。有需要的朋友可以自行修改。实际使用接口请求方法记得替换成自己的！！！

一、TS(如果有些没给到，可以直接用any)

/**
 * 选择器
 */
interface SelectParams extends BaseFormItemParams {
  // 是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。
  autoClearSearchValue?: boolean
  // 自定义的多选框清空图标
  clearIcon?: VNode
  // 是否默认高亮第一个选项
  defaultActiveFirstOption?: boolean
  // 是否默认展开下拉菜单
  defaultOpen?: boolean
  // 下拉菜单的 className 属性
  dropdownClassName?: string
  // 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动
  dropdownMatchSelectWidth?: boolean | number
  // dropdown 菜单自定义样式
  dropdownMenuStyle?: object
  // 自定义下拉框内容
  dropdownRender?: any
  // 下拉菜单的 style 属性
  dropdownStyle?: object
  // 自定义节点 label、value、options 的字段
  fieldNames?: BaseOptions
  // 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。
  filterOption?: (inputValue: string, option: unknown) => boolean | boolean
  // 搜索时对筛选结果项的排序函数, 类似Array.sort里的 compareFunction
  filterSort?: (optionA: BaseOptions, optionB: BaseOptions) => number
  // 默认高亮的选项
  firstActiveValue?: string | string[]
  // 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
  getPopupContainer?: (node: Node) => Node
  // 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes, originLabel: any} 的格式,
  // originLabel（3.1） 保持原始类型，如果通过 a-select-option children 构造的节点，该值是是个函数（即 a-select-option 的默认插槽）
  labelInValue?: boolean
  // 设置弹窗滚动高度
  listHeight?: number
  // 最多显示多少个 tag
  maxTagCount?: number
  // 最大显示的 tag 文本长度
  maxTagTextLength?: number
  // 自定义当前选中的条目图标
  menuItemSelectedIcon?: VNode
  // 设置 Select 的模式为多选或标签
  mode?: 'multiple' | 'tags' | 'combobox'
  // 当下拉列表为空时显示的内容
  notFoundContent?: string
  // 是否展开下拉菜单
  open?: boolean
  // 通过 option 插槽，自定义节点
  option?: BaseOptions
  // 搜索时过滤对应的 option 属性，不支持 children
  optionFilterProp?: string
  // 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。
  optionLabelProp?: string
  // options 数据，如果设置则不需要手动构造 selectOption 节点
  options?: Array<BaseOptions>
  // 自定义的多选框清除图标
  removeIcon?: VNode
  // 控制搜索文本
  searchValue?: string
  // 是否显示下拉小箭头
  showArrow?: boolean
  // 使单选模式可搜索
  showSearch?: boolean
  // 自定义的选择框后缀图标
  suffixIcon?: VNode
  // 自定义 tag 内容 render，仅在 mode 为 multiple 或 tags 时生效
  tagRender?: (props: any) => any
  // 在 tags 和 multiple 模式下自动分词的分隔符
  tokenSeparators?: string[]
  // 设置 false 时关闭虚拟滚动
  virtual?: boolean
  // 是否禁用
  disabled?: boolean
  // 提示
  placeholder?: string
}

/**
 * 表单项通用参数
 */
interface BaseFormItemParams {
  // 是否有边框
  bordered?: boolean
  // 支持清除, 单选模式有效 | 是否允许再次点击后清除
  allowClear?: boolean
  // 自动获取焦点
  autofocus?: boolean
  // 输入框大小，large 高度为 40px，small 为 24px，默认是 32px
  size?: 'large' | 'middle' | 'small'
}

二、API文档

{
  "adcode": "",
  "center": "",
  "cityCode": "",
  "id": "",
  "level": "",
  "name": "",
  "pageNum": 0,
  "pageSize": 0,
  "parentId": "",
  "polyline": ""
}

adcode	区域编码
	
center	区域中心点 	
	
cityCode	城市编码 
	
id	主键id
	
level	country:国家 province:省份（直辖市会在province和city显示） city:市（直辖市会在province和city显示） district:区县 street:街道
	
name	行政区名称 
	
pageNum	页码
	
pageSize	页数 	
	
parentId	上级id 	
	
polyline	行政区边界坐标点

三、组件

import { ref, defineComponent, getCurrentInstance, onMounted } from 'vue'
import { SelectParams } from '@/components/base/form-item/props/form-item-params'
import AreaSelect, { UpdateSelect } from './area-select'
import { BasePage } from '@/entity/base-model'
/**
 * 省市区联动
 */
export interface AreaProps {
  // 接口api
  action: Function
  // 表单项的参数
  params: SelectParams
  // 区域类型值
  typeValue: AreaTypeValue
}

/**
 * 区域参数
 */
export interface AreaTypeValue {
  // 第一个选择框的初始化参数 todo 根据接口来选择设置
  firstParams?: BasePage
  // 父属性名称
  parentKey: string
  // 子属性名称
  childrenKey: string
}
const App = defineComponent({
  inheritAttrs: false,
  props: {
    // 请求方法
    action: {
      required: true,
      type: Function,
    },
    // 表单项配置参数
    params: {
      type: Object,
      default: () => {},
    },
    // 数据值（v-model）
    value: {
      required: true,
      type: Array,
      validator: (val: Array<string>) => val.length == 3,
    },
    // 区域参数
    typeValue: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  // 最终返回的数据,数组
  emits: ['update:value'],
  setup(_props, { slots, emit, expose, attrs }) {
    const { action, params, value, typeValue } = _props
    onMounted(() => {
      refsList.value = getCurrentInstance()?.refs
    })
    const refsList = ref()
    // 全局更新方法
    function handlerGlobalUpdate(data: UpdateSelect) {
      const { order, option } = data
      const { childrenKey, parentKey } = typeValue as AreaTypeValue
      // 封装请求参数
      let params = {} as any
      params[childrenKey] = option[parentKey]
      // 切换业务
      switch (order) {
        case 0:
          refsList.value.AreaSelectLevel2.updateData(params)
          value[1] = ''
          value[2] = ''
          refsList.value.AreaSelectLevel2.val = ''
          refsList.value.AreaSelectLevel3.val = ''
          break
        case 1:
          refsList.value.AreaSelectLevel3.updateData(params)
          refsList.value.AreaSelectLevel3.val = ''
          value[2] = ''
          break
      }
    }
    return () => (
      <>
        <AreaSelect
          ref="AreaSelectLevel1"
          action={action}
          params={params}
          order={0}
          v-model:value={value[0]}
          onGlobalUpdate={handlerGlobalUpdate}
          typeValue={typeValue}
        />
        <AreaSelect
          action={action}
          params={params}
          order={1}
          ref="AreaSelectLevel2"
          v-model:value={value[1]}
          onGlobalUpdate={handlerGlobalUpdate}
          typeValue={typeValue}
        />
        <AreaSelect
          action={action}
          params={params}
          order={2}
          ref="AreaSelectLevel3"
          v-model:value={value[2]}
          onGlobalUpdate={handlerGlobalUpdate}
          typeValue={typeValue}
        />
      </>
    )
  },
})

export default App

import { ref, defineComponent, onMounted, unref, watch } from 'vue'
import './style/style.less'
import { AreaTypeValue } from '@/views/test/advanced/tsx/area/area'
import { SelectParams } from '@/components/base/form-item/props/form-item-params'
import { BasePage } from '@/entity/base-model'

/**
 * 更新级联参数
 */
export interface UpdateSelect {
  value: string
  order: number
  option: any
}
/**
 * 区域选择
 */
const AreaSelect = defineComponent({
  props: {
    // 请求方法
    action: {
      required: true,
      type: Function,
    },
    // 表单项配置参数
    params: {
      type: Object,
      default: () => {},
    },
    // 数据值（v-model）
    value: {
      required: true,
      type: String,
      default: '',
    },
    // 当前选择框顺序
    order: {
      type: Number,
      required: true,
      default: 0,
    },
    // 区域参数
    typeValue: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  // 最终返回的数据,数组
  emits: ['update:value', 'globalUpdate'],
  setup(_props, { slots, emit, expose }) {
    const style = {
      width: '120px',
    }
    const { order, action, params, value, typeValue } = _props
    const config = unref(params) as SelectParams
    const options = ref([])
    let val = ref('')
    onMounted(() => {
      // 初始情况下，只有第一个会请求
      if (order == 0) {
        let param = (typeValue as AreaTypeValue)?.firstParams
        updateData(param)
      }
      val.value = value
    })

    /**
     * 更新当前选项的方法
     * @param params 参数
     */
    const updateData = async (params: BasePage = {}) => {
      params.pageNum = 0
      params.pageSize = 0
      const { data } = await action(params)
      options.value = data
    }
    function handlerChange(value: string, option: unknown) {
      val.value = value
      // 局部更新
      emit('update:value', value)
      // 全局更新
      emit('globalUpdate', { value, order, option })
    }
    // todo 暴露更新数据的方法给父组件
    expose({ updateData, val })
    return () => (
      <a-select
        onSelect={handlerChange}
        notFoundContent={config?.notFoundContent}
        showSearch={config?.showSearch}
        fieldNames={config?.fieldNames}
        allowClear={config?.allowClear}
        autoClearSearchValue={config?.autoClearSearchValue}
        autofocus={config?.autofocus}
        bordered={config?.bordered}
        defaultOpen={config?.defaultOpen}
        defaultActiveFirstOption={config?.defaultActiveFirstOption}
        disabled={config?.disabled}
        placeholder={config?.placeholder}
        style={style}
        value={val}
        options={options}
      />
    )
  },
})

export default AreaSelect

.ant-select{
  margin: 5px;
}
.ant-select-selection-item{
  margin-top: -4px
}

四、使用

<!--
@description: 省市区组件测试
@author: ldb
@time: 2022-09-25 15:26:53
-->
<template>
  {{ value }}
  <Area
    ref="area"
    v-model:value="value"
    :action="getArea"
    :params="params"
    :type-value="typeValue"
  />
</template>

<script lang="ts" setup>
import Area, { AreaTypeValue } from './area'
import { ref } from 'vue'
import { getArea } from '@/api/system/area'
import { SelectParams } from '@/components/base/form-item/props/form-item-params'
const params: SelectParams = {
  notFoundContent: '暂无数据',
  showSearch: false,
  fieldNames: {
    label: 'name',
    value: 'name',
  },
}
const typeValue: AreaTypeValue = {
  firstParams: {
    level: 'province',
  },
  parentKey: 'id',
  childrenKey: 'parentId',
}
const value = ref<Array<string>>(['', '', ''])
</script>

<style scoped lang="scss"></style>