[![npm version](https://img.shields.io/npm/v/ycloud-refer.svg)](https://www.npmjs.com/package/ycloud-refer)
[![license](https://img.shields.io/npm/l/ycloud-refer.svg)](https://www.npmjs.com/package/ycloud-refer)
[![Build Status](https://api.travis-ci.org/yonyouyc/ycloud-refer.png?branch=master)](https://api.travis-ci.org/yonyouyc/ycloud-refer.png?branch=master)

# ycloud-refer
2.0的参照主要是给ys融合后的mdd用的
## 来自友云采前端团队的业务组件（参照系列）

目前可使用的参照有：

### 供应商参照： <y-refer-supply><y-modal-supply>

### 物料参照: <y-modal-material>

### 人员参照： <y-refer-person>

### 组织参照： <y-refer-org>


## 开发须知：

## 1. 引用lodash代码时请通过修改 util/lodash.js直接引入lodash对应的包的方式来引入
代码中其他地方需要引入lodash 都通过
```
import _ from '@/util/lodash'
```
的方式来引入，需要的包按需引入

## 2. 组件维护信息开头注释
  ```
  /*
  * @author: songhlc
  * @date: 2017-10-23
  * @description: 下拉组件
  * */
  ```
  
  依赖第三方包：knockout,jquery,ko-bindinghandler
  
## 3.参照组件应该怎么写

### 3.1 参照组件应支持哪些功能

1）快捷输入查询 + 弹框搜索的组合
2）单独弹框搜索（外部label自定义）
3）快捷输入的查询关键字点击弹框后应该自动带到modal内部并自动查询结果
4）应同时支持单选和多选两种

### 3.2 弹框里的表格跨页多选注意事项
1）勾选与全选，需在点击确定之后才保存到外层的datatable之中
2）第一页勾选一条数据，跨页后再返回，需要保留已选择的数据
3）已勾选数据在更改查询条件后重新查询出，也需要保留勾选

基本实现：写跨页表格多选的时候可以使用如下的实现方式
1）定义oldData(之前已经选择过的数据项)
2）定义oldDataIds(基于oldData,compute出的已选择过的id数组)
3）定义addedData(新增加的行)
4）定义addedDataIds(基于addedData,compute出的新增加的行的id)
5）定义deleteData(存在于oldData中，且当前你操作删除掉的行)
6）定义deleteDataIds(基于deleteData，compute出的要删除掉的行)
7）dataTable跨页重新查询后返回的row是不一样的要注意，所以判断要根据xxxIds单据主键来判断
最终结果finalData = oldData - deleteData + addedData
xxxIds均属于在使用过程中方便计算和处理使用

以上基本实现后续会考虑放到grid组件之中统一实现（表格组件已统一实现）


## 3.3 如何使用参照，以供应商参照为例

### 3.3.1 单选
``` 
<y-refer-supply params="
  value: value, 
  onOk: handleOk>
</y-refer-supply>
```

value: 选中值，ko对象,值如：{
                id: xxx,
                name: 'xxx'
              }

onOk: 点击确定后事件，会返回选中的data

### 3.3.2 多选
```
<y-refer-supply params="
  selectedRows: selectedRows,
  multiple: true,
  onOk:handleOk">
</y-refer-supply>
```

selectedRows: 选中值，ko ObservableArray对象,值如：[{
                id: xxx,
                name: 'xxx'
              },{
                                id: xxx2,
                                name: 'xxx2'
                              }]

multiple: 声明使用多选

onOk: 点击确定后事件，会返回选中的datas

// 注意：对于多选（如果可选范围是服务器端动态查询的）需要服务器端存储name值，不能只存id，需要冗余存储name否则修改时不知道该怎么展示

// 如果保存的不是id,name这种格式那么需要在onOk和初始化的时候重新转换一下

### 3.3.3 点击事件触发

```
<y-button params="
  type:'primary',
  click:showSupplyModal">推荐供应商</y-button>
<y-modal-supply params="
  selectedRows: crossPageSelectedRows,
  multiple:true,
  onOk: handleSupplyOk,
  visible:modalVisible4Supply">
</y-modal-supply> 
```
改成使用y-modal-supply

多使用一个visible属性

其他参数同单选和多选

## 4.参照接口修改备注

### 4.1 供应商参照更改接口
更改时间：2022.6.17
改动内容：供应商参照更改接口(yonbip-cpu-bctask/search/supply/getsupply)请求类型POST类型，本次改动是新增了一个post请求接口，老的get请求接口还可以支持
修改前分支：yms-before-supply-servertype-change