js-bxt-ui

Summary

✨✨ bxt UI组件 ✨✨

Install

npm install js-bxt-ui--save
OR
yarn add js-bxt-ui

Import

import { Search } from 'js-bxt-ui'

组件使用

筛选组件都统一加了 hideBorder 属性，隐藏底部分隔线

1、Search 通用组件：搜索

<Search onSearch={Function} width placeholder />

onSearch: Function //搜索回调方法(回车键也可触发)
width： String  // 搜索组件的宽度
placeholder: String
value: String // 初始值

2、Collect 通用组件：收藏

<Collect isCollected onCollect={Function} item />

onCollect: Function //点击后的回调方法 (isCollecte: 是否收藏,item: 传进去的item)
isCollected: Boolean  // 是否收藏：true:已收藏；false:未收藏
item: 无类型限制

3、ProvinceChoose 筛选项：区域选择（省份）(多选)

<ProvinceChoose onChoose={Function} isRadio value=[] />

isRadio: 是否单选
onChoose: Function //选择后的回调方法
value: Array  // 数据绑定

4、IndustryChoose2 筛选项：行业类型选择(树形结构，多选)

<IndustryChoose2 onChoose selectTree />

onChoose: Function //选择后的回调方法 (tree)
selectTree: Array  // 已选择的tree
数据格式：[
    {
        label:"xxx",
        isSelected:0 //未全选；1 //全选,
        children:[
            {
                label:"xxx"
            }
        ]
    }
]

5、PriceRange 筛选项：价格区间选择

<PriceRange />

onChangeNum: Function // 选择后的回调方法 ({minAmount:Number,maxAmount:Number})
InputNumber: Component // 传入antd组件 InputNumber
minAmount: Number // 最小价格
maxAmount: Number // 最大价格

6、InfoType 筛选项：信息类型选择(多选)

<InfoType onChoose selectTree />（同4）

onChoose: Function //选择后的回调方法 (tree)
selectTree: Array  // 已选择的tree
数据格式：[
    {
        label:"xxx",
        isSelected:0 //未全选；1 //全选,
        children:[
            {
                label:"xxx"
            }
        ]
    }
]

7、PurchasingUnit 筛选项：采购单位类型选择(多选)

<PurchasingUnit onChoose value />

onChoose: Function //选择后的回调方法
value: Array  // 已选择的数组
数组格式：["采矿业","制造业"]

8、DateChoose 筛选项：时间选择

<DateChoose onChoose value />

onChoose: Function //选择后的回调方法
value: String  // 默认时间

9、TabRadio 通用组件：tab单选

<TabRadio tabs onChange value />

tabs: Array
数据格式：[
    {
        label: XXX
    }
    ...
]

onChoose: Function //鼠标选中后的回调方法(item,index)
value: Number  // 默认选中的tab的index

10、AmountChoose 筛选项：中标金额(单选)

<AmountChoose onChoose value />

onChoose: Function //选择后的回调方法
value: String  // 已选中的金额的id
金额id说明（1:100w以下，2：100w-500w，3：500w-1000w，4：1000w-5000w，5：5000w以上）

10、DateFilter 筛选项：查询时间

<DateFilter RangePicker moment onChoose value />

onChoose: Function //选择后的回调方法（{
    timeRange:1:最近一个月，2：本季度，3：本年度，4:自定义日期
    startDate:"",
    endDate:""
}）
value: Object  // 上边同回调方法内的传参
RangePicker：antd RangePicker组件
moment：和antd版本号匹配的moment.js

11、TencentInfo 通用业务组件：标讯列表中的标讯信息卡片

<TencentInfo info keyword onClick />

info: Object // 接口返回的标准化的标讯信息对象
content: String // 接口返回的内容简介，可高亮显示em标签文本
keyword：String // 项目名中显示高亮的文字（已弃用）
onClick: Function  // 点击事件，参数为info

标题：如果info中返回了highlight对象中的informationTitle字段，标题优先展示informationTitle字段，替代前端匹配keyword高亮展示标题

12、Monitor 通用组件：监控/取消监控按钮

<Monitor isMonitored onMonitor={Function} item />

onCollect: Function //点击后的回调方法 (isMonitored: 是否监控,item: 传进去的item)
isMonitored: Boolean  // 是否监控：true:已监控；false:未监控
item: 无类型限制

12、TencentInfo 通用业务组件：企业/采购单位信息头展示组件

<EnterpriseInfo info />

info: Object // 接口返回的标准化的企业信息对象
例{
    businessScope: "负责义务教育小学阶段教育教学工作。"
    capital: "261万元"
    capitalNum: null
    companyAddress: "广州市增城区朱村街横塱村"
    companyEmail: null
    companyName: "广州市增城区朱村街横塱小学"
    companyPhone: null
    creditNo: "12440118729923168Q"
    establishDate: "1623168000000"
    legalPerson: "朱长辉"
}

13、AppInfo 通用业务组件：应用标头信息展示组件

<AppInfo title subTitle showBack children  />

title: String  // 应用标题
subTitle: String // 应用副标题
children: ReactNode // 右侧功能区
showBack: Boolean // 是否显示返回按钮

14、IndustryChoose 筛选项：招采类型选择(筛选项通过接口获取)(替代之前行业类型筛选)

<IndustryChoose onChoose value />

onChoose: Function //选择后的回调方法 (tree)
isRadio：Boolean //是否是单选
value: int Array  // 已选择的招采类型的tagValue
数据格式：[
    1,2,3,4
]

15、Sort 排序组件

<Sort label value onSort />

onSort: Function //选择后的回调方法 (value)
label： // 前置排序文字说明
value: int || String  // 空字符无排序 1降序 2升序 

16、采购单位类型筛选组件

<PurchaseTypeChoose onChoose value />

onChoose: Function //选择后的回调方法
value: int Array  // 已选择的采购单位的名称
数据格式：[
    "机关",
    "事业单位"
    ...
]