安装说明

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: '测试一区'
  }
];