@beisen-phoenix/area-selector

概述

PC端地区选择基础交互组件

使用方式

    npm install --save @beisen-phoenix/area-selector

API说明

参数	说明	类型	默认值	必须
isMulti	单选/多选	boolean	false	Yes
required	多选保存时，是否校验选中数据为空	boolean	true	No
defaultData	默认选中的值	Array [{id: 地区id, label: 地区显示名称}]	无	Yes
value	当前值，设置此值则为受控组件	Array [{id: 地区id, label: 地区显示名称}]	无	Yes
getDataUrl	数据常量请求链接	String	"//const.italent.cn/resource/Areas-chs-74-100000.js"	No
showForeignSource	显示国外的数据选项	Boolean	true	No
areaData	自定义数据源地区的值	Object	无	No
onSubmit	确定方法	Function	无	Yes
visible	用于手动控制确认框显隐	boolean	false	No
translation	多语言常量值	object	translation: {clearText: "清空已选",selectDataText: "已选地区",allProvincesText: "全部省市",countryText: "国家",cancelText: '取消',submitText: '确定',selectDataEmptyText: "请在左侧选择地区"}	Yes
limit	复选的情况下,可以配置最多能选择的数据条数,达到该数据后,不可再选择	number	40
showLimit	复选的情况下，是否显示最多数据条数	boolean	true
maxExpandLevel	最大钻取深度	number	No，即不设限制
showParentInSelection	已选区域属性，是否带直属父级，true 则显示为 上一级名／当前名，false 显示为 当前名	boolean	false
showRootInSelection	已选区域属性，是否带所有父级，true 则显示为 第一级/第二级/.../上一级/当前名， false 则会走showParentInSelection配置	boolean	false
isActiveLinkRelation	是否开启父子联动	boolean	false
selectedLevel	选定层级：1）如选定层级小于等于钻取层级，则选定层级和之后的层级均显示复选框可进行勾选；之前的层级复选框隐藏不可进行勾选；（2）如选定层级大于钻取层级，则钻取层级的末级显示复选框可进行勾选，末级之前的层级复选框隐藏不可进行勾选；如果末级为一级，则显示复选框	number	不设限制

数据格式注意

• getDataUrl

  getDataUrl是北森提供的标准地区常量数据源地址,返回数据有严格规定。如果你想要使用自定义的数据源,则需要使用areaData属性。

  getDataUrl默认是返回的数据是现在是中文版本，如果是其他语言版本需要自己拼接链接，比如: http://const.italent.cn/resource/Areas-en-74-100000.js.

  数据返回的内容格式如下：

   ConstAreas([
       ["1",["全国"],"",0],
       ["2",["国外"],"",1],
       ....
   ])
  

数据解释及含义["1",["全国"],"",0] 数组的第一个元素代表地区的id， 第二个代表显示的文字， 第三个代表数据的父级元素、 第四个元素代表是否含有子地区

地区数据的全国和国外id为1、2，parentId为空，都应该是含有子节点的

• areaData的数据单项格式["1",["国内"], "" , 0] 数据含义的解释如上

样式属性

const propsData = {
    isMuiti: false,
    selectData: [{
        id: "1001",
        label: "顺义区"
    }],
    areaData: [
        ["1",["国内"], "" , ""]
        ...
    ]
}