# CCMS自定义组件

## 项目启动
安装依赖
```
npm install 
```
启动项目
```
npm run dev 
```
本地打包
```
npm run build
```
### 发布
代码发布初始化  
已安装`create-ccms-custom`
```
create-ccms-custom init publish
```
使用npx方式
```
npx create-ccms-custom init publish
```
发布
```
npm run publish
```
## 组件开发基础配置
根目录`ccms.config.js`下的配置项。可对域名配置、接口请求公共信息进行配置。示例：
```js
{
    // 自定义组件名称（英文）
    'customName': 'ccms-custom-detail-myproject',
    // 自定义组件名称（中文）
    'customNameCN': '自定义组件',
    // 自定义组件类型（table ｜ form | detail | common）
    'customType': 'table',
    // 创建人
    'createdBy': 'wangailin',
    // 创建人邮箱
    'createdEmail': 'wangailin@jd.com',
    // 域名相关配置
    'domain': {
        // 线上域名名称
        'domainName': 'test',
        // 上线后使用当前本地配置域名（不使用平台系统配置的域名）
        'uselocaldomain': true,
        // 预发域名地址
        'pre': 'http://beta-oconsole.jd.com',
        // 线上域名地址
        'oline': 'http://oconsole.jd.com'
    },
    // 接口相关配置
    'apiConfig': {
        // 接口成功验证code
        'sucessCode': 0,
        'loginCode': [
            401
        ],
        'loginUrl': '//ssa.jd.com/sso/login?ReturnUrl='
    }
}
```
## 域名配置
域名相关配置在根目录`ccms.config.js`的`domain`下
### 域名配置总览
| 参数名         | 参数类型 | 描述                       | 备注                                                     |
| -------------- | -------- | -------------------------- | -------------------------------------------------------- |
| domainName     | string   | 线上域名名称               | 在oconsole上配置的域名名称，通过名称自动获取接口域名     |
| uselocaldomain | string   | 线上使用config内配置的域名 | 开启后使用`ccms.config.js`配置的的`pre`和`online`域名    |
| pre            | string   | 预发域名                   | 本地调试用                                               |
| oline          | string   | 线上域名                   | 本地调度使用，当uselocaldomain为true时，线上使用当前配置 |

## 接口请求公共信息
域名相关配置在根目录`ccms.config.js`的`apiConfig`下
### 域名配置总览
| 参数名     | 参数类型 | 描述             | 备注           |
| ---------- | -------- | ---------------- | -------------- |
| sucessCode | Array    | 接口调用成功code | 例：[200,201'] |
| loginCode  | Array    | 未登录code       | 例：[401]      |
| loginUrl   | string   | 登录跳转地址前缀 |                |


## 自定义组件-表单API

在`./src/index.js`下可通过ccms.*的方式调用api

### 参数获取
| 参数名    | 字段类型         | 备注 | 说明 |
| --------- | ---------------- | ---- | ---- |
| config    | 当前组件的配置项 |      |      |
| value     | 组件值           |      |      |
| domain    | 域名地址         |      |      |
| editData  | 组件编辑数据     |      |      |
| formValue | 组件提交数据     |      |      |

### 公用方法
| 参数名       | 描述                                     | 类型                                |            |
| ------------ | ---------------------------------------- | ----------------------------------- | ---------- |
| onChange     | 修改表单参数值                           | (value:any) => value                |            |
| onValueSet   | 修改表单参数值，并提定参数名称与校验结果 | (key:string,value:any,validate:true | [])=> void |  |
| bindValidate | 表单校验逻辑                             |                                     |            |
| bindGet      | 添加提交表单时的参数处理                 |                                     |            |



## 文档目录
```
.
├── README.md
├── ccms.config.js // 自定义组件配置文件
├── publish.json // 发布相关配置
├── src
│   ├── api
│   │   ├── api.js // 添加接口路径
│   │   └── index.js
│   ├── common
│   │   └── index.js // 初始化信息
│   ├── components // 子组件
│   ├── index.js // 自定义组件首页
│   └── index.less
├── assets // 静态资源
├── index.html // html文件
├── build // 打包与自定义生成
│   ├── App.js
│   ├── build.ccms.config.js
│   ├── ccms.base.config.js
│   ├── config.js
│   ├── mock-server.js // 本地mock
│   ├── publish.js 
│   ├── utils.js
│   ├── webpack.base.config.js
│   ├── webpack.dev.config.js
│   └── webpack.prod.config.js
├── dist // 打包生成文件
│   ├── ccms.config.json
│   ├── index.html
│   └── static
│       ├── css
│       │   └── app.css
│       └── js
│           └── app.bundle.js
├── mock // 本地mock
│   └── api
│       └── config.json
├── package.json
└── tsconfig.json
```