k-kpy-config v2.0.22-beta6
安装说明
npm install k-kpy-config
预览地址
http://npm-view.kpy.cloud/k-kpy-config/
更新日志 antd 3.x 版,antd 4.x 版
v2.0.20 (2023.8.29) react,react-dom,antd迁移至devdep,并废弃1.x版本
v1.0.9 / v2.0.8(2023/03/09)
0、【2023/03/09】新增硬盘类型枚举
1、【2023/05/11】新增主机实例GPU增强型
2、【2023/05/16】删除mysql的多余数据
3、【2023/05/16】添加系统盘变配的展示
v1.0.8-beta.2 / v2.0.7-beta.10(2023/02/02)
0、【2022/05/30】升级正式版
1、【2022/06/20】ConfigInfo 增加适配移动端样式类名;
2、【2022/08/19】ConfigInfo 修复适配移动端样式类名;
3.1、【2022/08/22】ConfigInfo 修复高防包配置显示;
3.2、【2022/08/24】useCoupon 修复代金券使用限制问题;
4、【2022/10/25】ConfigInfo 修复 globalInfo 配置展示;
5、【2023/01/16】添加共享性服务器枚举
6、【2023/01/17】重新打包
7、【2023/01/30】添加裸金属的单元格
8、【2023/01/30】修改裸金属枚举值
9.2、【2023/02/02】修改新增的折后价样式
9.4、【2023/03/22】修改裸金属配置详情显示
v1.0.7-48 / v2.0.6-48(2022/05/12)
1、修复代金券查询字段错误和排序规则;
2、优化配置组件展示;
3、修复代金券排序规则;
4、新增专属带宽包配置详情;
5、修复专属带宽包配置问题;
6、修复代金券领取后价格展示问题;
7、增加代金券排序规则条件;
8、修复专属带宽包配置问题;
9、修改配置组件的详情展示;
10、修改配置组件的详情展示;
11、修复控制台和超管查询代金券参数名区别;
12、【2021/06/15】增加 configInfo 的 ecs 配置参数-系统盘显示;
13、【2021/06/17】修复 disk 配置参数变配展示;
14、【2021/06/17】修复 disk 配置参数变配单位错误;
15、【2021/06/17】修复 ecs 配置枚举没有转义;
16.1、【2021/06/22】增加 useCoupon 组件 ecs 使用代金券的限制判断;
16.2、【2021/06/22】修复 useCoupon 组件 取消使用代金券的 bug;
17、【2021/06/22】修复 useCoupon 组件资源使用代金券的限制判断;
18.1、【2021/06/24】修复 useCoupon 组件资源使用代金券的限制判断;
18.2、【2021/06/24】增加 ConfigInfo 组件 ecs 实例类型:gpu 和 redis 参数展示;
19、【2021/06/29】修复 ConfigInfo 组件 bwp 参数展示问题;
20、【2021/06/30】修复 ConfigInfo 组件 ecs 参数展示问题;
21、【2021/07/02】修复 ConfigInfo 组件参数展示问题;
22.1、【2021/07/09】增加 ConfigInfo 组件 GLOBAL_ACCEL 的网络模式和修复其他细节;
22.2、【2021/07/09】修改 UseCoupon 组件不可使用嗲进球提示;
23、【2021/07/16】修复 UseCoupon 样式问题;
24、【2021/07/17】修复 UseCoupon 禁用问题;
25、【2021/07/19】修改 UseCoupon 入参字段;
26、【2021/07/20】修复 UseCoupon 限制条件;
27、【2021/07/20】修改 ConfigInfo 配置展示;
28、【2021/07/29】修改 ConfigInfo 配置展示;
29、【2021/08/03】修改 ConfigInfo 配置展示;
30、【2021/08/05】增加 ConfigInfo ecs 配置 gpu 机型的显卡数展示;
31、【2021/08/09】修改 ConfigInfo 配置展示;
32、【2021/08/17】修改 ConfigInfo 配置展示;
33、【2021/09/28】增加 ConfigInfo Bwp 公网 IP 数量配置展示;
34、【2021/10/13】修改 ConfigInfo Bwp 公网 IP 数量配置展示;
35、【2021/10/13】增加 ConfigInfo Nat 和 Slb 配置展示;
36、【2021/10/22】修改 ConfigInfo Nat 和 Slb 配置展示;
37、【2021/12/13】优化引入方式,减少文件打包大小;
39、【2021/12/21】修改 ConfigInfo Ecs 的实例类型和显卡展示名称;
40、【2021/12/21】修改 ConfigInfo Ecs 的显卡展示名称;
41、【2021/12/23】增加 ConfigInfo graphicsCardNum 显卡配置项;
42、43、44、【2021/12/30】修改 ConfigInfo 的 dadpInfo 和 dadsInfo 配置展示;
45、【2021/12/31】增加 ConfigInfo graphicsCardNum 显卡配置项;
46、【2022/01/26】修复 ConfigInfo dadsInfo 带宽问题;
47、【2022/03/04】增加 ConfigInfo graphicsCardNum 显卡配置项;
48、【2022/05/06】增加 ipv6 配置详情;
v1.0.6-9 / v2.0.5-9(2021/04/25)
1、升级 ts 配置;
2、修复 moment 引入问题;
3、修复 intDadsInfo 配置问题;
4、修复代金券到期时间的长度问题;
5、修复代金券样式问题;
6、优化代金券金额排序、勾选代金券默认使用第一个
7、优化代金券排序使用金额>时间>限制规则
8、修复代金券查询字段错误;
v1.0.5-5 / v2.0.4-1(2021/04/12)
1、新增 ConfigInfo 资源配置详情组件的;
v1.0.5 / v2.0.4(2021/04/01)
1、优化 CollapseTable 组件的 openKey 方法;
v1.0.4 / v2.0.3(2021/03/26)
1、增加 CollapseTable,KPayConfirm 组件的 openKey 方法;
v1.0.3 / v2.0.2(2021/03/23)
1、优化组件打包文件大小;
v1.0.2 / v2.0.1(2021/03/19)
1、新增 KPayConfirm 支付确认页组件;
2、新增 UseCoupon 支付确认页组件子组件-代金券展示组件;
3、新增 BottomSubmit 支付确认页组件子组件-按钮区域组件;
v1.0.1(2021/03/04)
1、修改 CollapseTable 折叠表格组件样式,增加固定样式;
v2.0.0(2021/03/04) v1.0.0(2021/02/26)
1、新增 CollapseTable 折叠表格组件;
参数注释
【CollapseTable 参数说明】
参数 | 类型 | 选填 | 描述 |
---|---|---|---|
expandIconPosition | string | -- | 折叠图标位置,right(默认)、left, |
dataKey | string | -- | 面板数据在源数据的字段键名,'configJsons' |
activeKey | array | -- | 默认打开折叠面板的 key, [],//优先级次 |
data | array | yes | 源数据, [] |
headColumns | array | yes | 头部 columns , [] |
panelColumns | array | yes | 面板 columns , [] |
openKey | bool | -- | 是否打开折叠表格,默认 true,//优先级最高 |
【KPayConfirm 参数说明】
参数 | 类型 | 选填 | 描述 |
---|---|---|---|
data | array | yes | 源数据 , [] |
dataKey | string | -- | 面板数据在源数据的字段键名,'configJsons' |
headColumns | array | yes | 头部 columns , [] |
panelColumns | array | yes | 面板 columns , [] |
priceData | object | -- | 价格展示,{sumOriginPrice: 0, sumDiscountPrice: 0} |
submitLoading | boolen | -- | 提交按钮状态 |
resourceTypes | array | -- | 资源类型集合,[] |
userId | number | -- | 用户 id,超管类型用到 |
isSuper | boolen | -- | 是否超管类型,默认 false |
style | object | -- | 内容顶部样式 |
serviceInfo | object | -- | 服务条款内容,{name: '《靠谱云服务条款》', url: ''} |
isBlack | boolen | -- | 是否有返回按钮,默认 true |
voucherOkApi | string | -- | 代金券兑换接口 |
voucherApi | string | -- | 代金券接口 |
voucherPriceApi | string | -- | 使用代金券查询价格接口 |
voucherLink | object | -- | 代金券管理名称和路由,{ name: '代金券管理',consoleLink: '',superLink: '' } |
voucherSlide | number | -- | 代金券列表展示数量,默认 4 |
resourceTypeFilter | array | -- | 资源类型枚举集合 |
onBack | fun | -- | 返回上一步回调函数 |
onSubmit | fun | -- | 提交回调函数,返回 activeId |
openKey | bool | -- | 是否打开折叠表格,默认 true |
【UseCoupon 参数说明】
参数 | 类型 | 选填 | 描述 |
---|---|---|---|
data | array | yes | 源数据 , [] |
priceData | object | -- | 价格展示,{sumOriginPrice: 0, sumDiscountPrice: 0} |
resourceTypes | array | -- | 资源类型集合,[] |
userId | number | -- | 用户 id,超管类型用到 |
isSuper | boolen | -- | 是否超管类型,默认 false |
voucherOkApi | string | -- | 代金券兑换接口 |
voucherApi | string | -- | 代金券接口 |
voucherPriceApi | string | -- | 使用代金券查询价格接口 |
voucherLink | object | -- | 代金券管理名称和路由,{ name: '代金券管理',consoleLink: '',superLink: '' } |
voucherSlide | number | -- | 代金券列表展示数量,默认 4 |
resourceTypeFilter | array | -- | 资源类型枚举集合 |
couponPrice | fun | -- | 代金券价格计算回调函数,返回 {value} |
callback | fun | -- | 使用代金券回调函数,返回 activeId |
【BottomSubmit 参数说明】
参数 | 类型 | 选填 | 描述 |
---|---|---|---|
priceData | object | -- | 价格展示,{sumOriginPrice: 0, sumDiscountPrice: 0} |
submitLoading | boolen | -- | 提交按钮状态 |
serviceInfo | object | -- | 服务条款内容,{name: '《靠谱云服务条款》', url: ''} |
isBlack | boolen | -- | 是否有返回按钮,默认 true |
onBack | fun | -- | 返回上一步回调函数 |
onSubmit | fun | -- | 提交回调函数,返回 activeId |
【ConfigInfo 参数说明】
参数 | 类型 | 选填 | 描述 |
---|---|---|---|
resourceType | string | -- | 资源类型 |
data | object | yes | 资源配置数据 |
regionFilter | array | -- | 地域枚举集合 |
zoneCodeFilter | array | -- | 可用区枚举集合 |
networkBandwithFilter | array | -- | 线路枚举集合 |
accelRegionFilter | array | -- | 加速地域枚举集合 |
hideRegion | boolen | -- | 是否隐藏地域,默认 false |
isSimplify | boolen | -- | 是否简化配置,默认 false |
online | boolen | -- | 是否线上产品,默认 true |
isShowChange | boolen | -- | 是否变配配置,默认 false |
isDetail | boolen | -- | 是否详情展示,在订单详情需要展示个别字段,默认 false |
示例
import React from 'react';
import ReactDom from 'react-dom';
import { CollapseTable, KPayConfirm, UseCoupon, BottomSubmit, ConfigInfo } from 'k-kpy-config';
import { collapseData } from './collapseData';
import { configData } from './payConfirmData';
import { mysqlData, redisData } from './configData';
import { headColumns, panelColumns } from './collapseConfig';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_handleSubmitOrder = couponId => {
console.log('原有的提交方法,增加代金券id输出', couponId);
};
_handleBack = () => {
console.log('原返回方法');
};
render() {
return (
<div style={{ padding: 20 }}>
<h2>折叠表格组件预览:</h2>
<CollapseTable
data={collapseData}
headColumns={headColumns}
panelColumns={panelColumns}
dataKey='configJsons'
activeKey={[0, 1, 2, 3]}
/>
<h2 style={{ marginTop: 30 }}>支付确认页组件预览:</h2>
<div style={{ minHeight: 600, position: 'relative' }}>
<KPayConfirm
data={configData}
resourceTypes={['OWN_ECS', 'OWN_EIP', 'OWN_DISK']}
headColumns={headColumns}
panelColumns={panelColumns}
userId={114008316} //超管需要传的用户id,进行查询代金券情况
isSuper={true} //是否超管类型
priceData={{
sumOriginPrice: 0,
sumDiscountPrice: 0
}}
voucherOkApi={''} //代金券兑换接口
voucherApi={''} //代金券接口
voucherPriceApi={''} //使用代金券查询价格接口
submitLoading={false}
onSubmitOrder={this._handleSubmitOrder}
onBack={this._handleBack}
style={{ paddingTop: 20 }} //页面上顶部距离,看情况是否增加
/>
</div>
<h2 style={{ marginTop: 30 }}>
区别个别样式,把提交和代金券组件拆开预览:
</h2>
<div className='react-KPayConfirm' style={{ position: 'relative' }}>
<div className='payConfirm-body'>
<UseCoupon
data={configData}
resourceTypes={resourceTypes}
priceData={priceData}
userId={114008316}
// voucherOkApi={} //代金券兑换接口
// voucherApi={''} //代金券接口
// voucherPriceApi={''} //使用代金券查询价格接口
// voucherLink={''}
// voucherSlide={4}
resourceTypeFilter={[]}
callback={this.handleCoupon}
couponPrice={this.handleCouponPrice}
isSuper={false}
/>
<BottomSubmit
priceData={{
...priceData,
deductionAmount,
deductionTotalAmount
}}
// serviceInfo={''}
isBlack={true}
priceLoading={priceLoading}
submitLoading={false}
onSubmit={this._handleSubmitOrder}
onBack={this._handleBack}
/>
</div>
</div>
<h2 style={{ marginTop: 30 }}>资源配置详情组件预览:</h2>
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
<p>mysql配置详情:</p>
<ConfigInfo
data={mysqlData}
resourceType='CDS_MYSQL'
regionFilter={[]}
zoneCodeFilter={[]}
/>
</div>
<div>
<p>redis配置详情:</p>
<ConfigInfo
data={redisData}
resourceType='CDS_REDIS'
regionFilter={[]}
zoneCodeFilter={[]}
/>
</div>
</div>
</div>
);
}
}
ReactDom.render(<Demo />, document.getElementById('root'));
<!-- collapseConfig -->
import React from 'react';
/**头部列数据 */
export const headColumns = [
{
dataIndex: 'resourceType',
width: 200,
render() {
return (
<div className='u-first-name'>
<span>云服务器</span>
</div>
);
}
},
{
dataIndex: 'regionName',
width: 200,
render(item) {
return (
<div className='u-span'>
<span>地域:</span>
<span>{item}</span>
</div>
);
}
},
{
dataIndex: 'count',
width: 200,
render(item, rowdata) {
return (
<div>
<label className='u-span'>
<span>数量:</span>
<span style={{ marginRight: 50 }}>{item}</span>
</label>
<label className='u-span'>
<span>时长:</span>
<span>{rowdata.buyTime}月</span>
</label>
</div>
);
}
},
{
dataIndex: 'buyTime',
width: 200,
render() {
return (
<div className='u-span'>
<span>新购到期时间:</span>
<span>2021-03-30 23:59:59</span>
</div>
);
}
},
{
dataIndex: 'payPrice',
width: 200,
render() {
return (
<div className='u-span'>
<span>应付金额:</span>
<span className='c-money'>¥6.7</span>
</div>
);
}
}
];
/**面板列数据 */
export const panelColumns = [
{
dataIndex: 'configItem',
width: 200,
render(item, rowdata, index) {
//默认第一个显示“实例规格”
return index ? <div>{item}</div> : <div>实例规格</div>;
}
},
{
dataIndex: 'configJson',
width: 200,
render() {
return (
<div className='u-span'>
<div>
<div>
<div>
<span>可用区:</span>
<span>可用区B</span>
</div>
<div>
<span>实例类型:</span>
<span>通用型</span>
</div>
<div>
<span>实例规格:</span>
<span>1核1GB</span>
</div>
<div>
<span>镜像:</span>
<span>标准镜像</span>
</div>
</div>
</div>
</div>
);
}
},
{
dataIndex: 'unitPriceStr',
width: 200,
render(item, rowdata, index) {
//因数据限制,第一个显示,其余为0
return (
<div className='u-span'>
<span>单价:</span>
<span>{index ? '¥5/月' : item}</span>
</div>
);
}
},
{
dataIndex: 'billItem',
width: 200,
render() {
return (
<div className='u-span'>
<span>计费方式:</span>
<span>预付费</span>
</div>
);
}
},
{
dataIndex: 'payPrice',
width: 200,
render(item, rowdata, index) {
//因数据限制,第一个显示,其余为0
return (
<div className='u-span'>
<span>应付金额:</span>
{index ? (
'¥0'
) : rowdata.oriPrice === rowdata.payPrice ? (
<span>¥6</span>
) : (
<span>
¥5
<del>¥7.5</del>
</span>
)}
</div>
);
}
}
];
<!-- collapseData -->
export const collapseData = [
{
ConsumptTranType: 'PAYMENT_BEFORE_DELIVERY',
billingCycle: 'MONTH',
buyTime: 1,
region: 'demo-1',
zone: 'demo-1-b',
resourceType: 'OWN_ECS',
resourceRelation: 'MASTER',
prodConfigJson: {
autoRenew: 'Infinite',
cpu: 1,
hostName: '20210303182853021',
image: 'windows',
imageId: 'img-pm0000g42a7833',
imageName: 'Windows 2008 R2 64位 数据中心版',
imageType: 'System',
instanceChargeType: 'PrePaid',
instanceSpec: 'ecs.n1.tiny',
instanceType: 's2',
memory: 1,
netType: 'privateNet',
password: 'rF7=AN68F',
region: 'demo-1',
subnetId: '',
vpcId: '',
zone: 'demo-1-b',
multiItems: [
{
diskCategory: 'local',
diskSize: 40,
diskType: 'System',
multiItemId: 999,
size: 0
}
]
},
resourceConfigParams: [
{
billItem: 'PREPAID',
configItem: '云服务器',
configJson: '{"instanceSpec":"ecs.n1.tiny"}',
itemName: 'INSTANCE_SPEC',
oriPrice: 67,
payPrice: 6.7,
unitPriceStr: '¥67.00/月',
prodConfigJson: {
autoRenew: 'Infinite',
cpu: 1,
hostName: '20210303182853021',
image: 'windows',
imageId: 'img-pm0000g42a7833',
imageName: 'Windows 2008 R2 64位 数据中心版',
imageType: 'System',
instanceChargeType: 'PrePaid',
instanceSpec: 'ecs.n1.tiny',
instanceType: 's2',
memory: 1,
netType: 'privateNet',
password: 'rF7=AN68F',
region: 'demo-1',
subnetId: '',
vpcId: '',
zone: 'demo-1-b',
multiItems: [
{
diskCategory: 'local',
diskSize: 40,
diskType: 'System',
multiItemId: 999,
size: 0
}
]
},
resourceType: 'OWN_ECS'
},
{
billItem: 'PREPAID',
configItem: '系统盘',
configJson:
'{"diskCategory":"local","diskSize":40,"diskType":"System","multiItemId":999,"size":0}',
itemName: 'DISK_SIZE',
oriPrice: 67,
payPrice: 6.7,
unitPriceStr: '¥67.00/月',
prodConfigJson: {
autoRenew: 'Infinite',
cpu: 1,
hostName: '20210303182853021',
image: 'windows',
imageId: 'img-pm0000g42a7833',
imageName: 'Windows 2008 R2 64位 数据中心版',
imageType: 'System',
instanceChargeType: 'PrePaid',
instanceSpec: 'ecs.n1.tiny',
instanceType: 's2',
memory: 1,
netType: 'privateNet',
password: 'rF7=AN68F',
region: 'demo-1',
subnetId: '',
vpcId: '',
zone: 'demo-1-b',
multiItems: [
{
diskCategory: 'local',
diskSize: 40,
diskType: 'System',
multiItemId: 999,
size: 0
}
]
},
resourceType: 'OWN_ECS'
}
],
discountPrice: 0,
oriPrice: 67,
payPrice: 6.7,
unitPriceStr: '¥67.00/月',
count: 1,
regionName: '测试一区'
}
];
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago