bxs-tools-ui 3.2.0-1 → 3.2.0-2

package/packages/product-info/readme.md

@@ -1,22 +1,32 @@
-<!--仅用于绕过 eslint-loader 校验的错误信息：Parsing error: Invalid character-->
-<!--??以目前现象看，文档首字符不为 "<" 会报错??-->
 ## 计划书产品（ProductInfo）
-说明：计划书产品组件    
-内容：包括产品中各险种的各项元素值的修改、校验  
-属性：inputData、verifyData、groupKey、productKey、params  
-方法：change、validate  
 
-### 示例  
-```html
-  import { ProductInfo } from 'bxs-tools-ui'
-  export default {
-    components: {
-      ProductInfo
-    }
+计划书投保页的产品组件，基于服务端下发的 `mulInsOrderList` 动态渲染各险种的表单元素，支持元素值修改、险种联动逻辑处理与表单校验。
+
+> 数据来源：访问[计划书初始化 API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 查看示例数据，或参考 `demo/constant.js`。
+> - `inputData`：`data → initData → inputData`
+> - `verifyData`：`data → verifyData`
+> - `groupKey`：`inputData → productGroupList → key`
+> - `productKey`：`inputData → productGroupList → prodOrderList → key`
+
+---
+
+### 模块引用（import）
+
+```javascript
+import { ProductInfo } from 'bxs-tools-ui';
+export default {
+  components: {
+    ProductInfo
   }
+};
 ```
 
+---
+
+### 示例（example）
+
 ```html
+<template>
   <ProductInfo
     ref="productInfo"
     :input-data="inputData"
@@ -24,63 +34,114 @@
     :group-key="'allMainInsData'"
     :product-key="2695"
     @change="cgProduct"
-  ></ProductInfo>
+    @openCrmPerson="openCrmPersonPopup"
+  />
+</template>
+
+<script>
+import { ProductInfo } from 'bxs-tools-ui';
+
+export default {
+  components: { ProductInfo },
+  methods: {
+    cgProduct(product, options, inst) {
+      if (options.type === 'change' && options.errorMsg) {
+        this.$nextTick(() => {
+          this.$toast(options.errorMsg);
+        });
+      }
+    },
+    openCrmPersonPopup() {
+      // 打开人员信息修改浮层（含 CRM 导入功能）
+    },
+    validate() {
+      this.$refs.productInfo
+        .validate()
+        .then(valid => {
+          // 校验通过
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  }
+};
+</script>
 ```
-  
+
+---
+
 ### Attributes
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| input-data | 必传，计划书初始化数据。 | Object | {} |
-| verify-data | 可不传，计划书限制条件。如不传，不会调用模块内部封装的产品逻辑处理函数 | Object | {} |
-| group-key | 必传，产品组的key。 | Number, String | null |
-| product-key | 必传，产品的key。 | Number, String | null |
-| params | 可传，一些可选参数，目前有：allowCustomResult（自定义保额、保费）。 | Object | {} |
-
-### 数据说明
-注: 访问[计划书初始化API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128)查看示例数据，或者查看[静态示例数据](./demo/constant.js)。  
-> inputData: data -> initData -> inputData  
-> verifyData: data -> verifyData  
-> groupKey: inputData -> productGroupList -> key  
-> productKey: inputData -> productGroupList -> prodOrderList -> key
-
-#### productData对象
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| mulInsOrderList | 必传。险种列表，具体查看mulInsOrderList数组 | Array | - |
-| key | 必传。产品id | Number | - |
-
-#### mulInsOrderList数组
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| eleOrderList | 必传。险种中元素列表，具体查看eleOrderList数组 | Array | - |
-| key | 必传。险种id | Number | - |
-| code | 可不传。险种code | String | - |
-| isFollowing | 可不传。是否去除与上一险种之间的间距 | Boolean | - |
-
-#### eleOrderList数组
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| componentName | 必传。元素对应的组件名称。 cmCommonTitle \| cmCommonInput \| cmCommonRadioBtn \| cmCommonRadio \| cmCommonSelect | String | - |
-| key | 必传。元素id | String | - |
-| value | 必传。元素的值 | [String, Number] | - |
-| labelName | 必传。元素名称 | String | - |
-| common | 可不传。是否为通用元素 | Boolean | - |
-| isDisabled | 必传。元素是否不可修改 | Boolean | - |
-| isHide | 必传。元素是否隐藏 | Boolean | - |
-| isIgnoreValidate | 必传。是否忽略元素校验 | Boolean | - |
-| rules | 可不传。元素校验规则。基于[async-validate](https://github.com/yiminghe/async-validator#type)的校验规则 | Array | - |
-| opts | 必传。适用于 cmCommonRadioBtn \| cmCommonRadio \| cmCommonSelect 组件 | Array | - |
-| restrictions | 可不传。当前元素的限制条件 | Array | - |
-| placeholder | 可不传。适用于 cmCommonInput 组件 | String | - |
-  
-  
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `input-data` | 必传，计划书初始化数据 | Object | `{}` |
+| `group-key` | 必传，产品组的 key | Number / String | `null` |
+| `product-key` | 必传，产品的 key | Number / String | `null` |
+| `verify-data` | 可选，计划书限制条件；不传则不执行产品逻辑处理函数 | Object | `{}` |
+| `show-recommend-value` | 可选，是否展示保额/保费推荐值 | Boolean | `true` |
+| `params` | 可选，其他参数，见 Params 对象 | Object | `{}` |
+
+
+#### Params 对象
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| `planbookId` | 计划书 ID，用于产品联动逻辑 | Number |
+| `publicPbUuid` | 公开计划书 uuid，传入后使用 public 接口重算 | String |
+| `allowCustomResult` | 是否显示「自定义保费/保额」开关 | Boolean |
+| `insuranceSaleStatus` | 险种停售状态映射：`{ [insuranceKey]: number }`；值为 `2` 时展示「停」标签 | Object |
+
+
+#### ProductData 对象（inputData 中的产品结构）
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| `key` | 必传，产品 ID | Number |
+| `mulInsOrderList` | 必传，险种列表，见 MulInsOrderList 数组 | Array |
+
+
+#### MulInsOrderList 数组（单项）
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| `key` | 必传，险种 ID | Number |
+| `eleOrderList` | 必传，险种内元素列表，见 EleOrderList 数组 | Array |
+| `code` | 险种 code | String |
+| `isFollowing` | 是否去除与上一险种之间的间距 | Boolean |
+
+
+#### EleOrderList 数组（单项）
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| `key` | 必传，元素 ID | String |
+| `value` | 必传，元素当前值 | String / Number |
+| `componentName` | 必传，对应渲染组件（`cmCommonTitle` / `cmCommonInput` / `cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect`） | String |
+| `labelName` | 必传，元素名称 | String |
+| `isDisabled` | 必传，是否不可修改 | Boolean |
+| `isHide` | 必传，是否隐藏 | Boolean |
+| `isIgnoreValidate` | 必传，是否忽略校验 | Boolean |
+| `common` | 是否为通用元素 | Boolean |
+| `opts` | 选项列表（`cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect` 适用） | Array |
+| `rules` | 校验规则，基于 [async-validator](https://github.com/yiminghe/async-validator#type) | Array |
+| `restrictions` | 当前元素的限制条件 | Array |
+| `placeholder` | 占位符（`cmCommonInput` 适用） | String |
+
+---
+
 ### Methods
-| 方法名 | 说明 | 参数 | 备注 |
-| --- | --- | --- |  --- |
-| validate | 组件的校验方法，可用$refs调用。返回Promise | - | - |
-  
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| `validate` | 表单校验，通过 `$refs` 调用，返回 Promise | — |
+
+---
+
 ### Events
-| 方法名 | 说明 | 参数 | 备注 |
-| --- | --- | --- |  --- |
-| change | 产品信息改变时触发 | function(product, options, inst) {}。product: options: {ins: 险种, ele: 元素，type: init \| change}, inst: 当前Vue组件的实例 | - |
-| openCrmPerson | 点击豁免险中标题的提示信息时触。一般用于打开浮层，修改人员信息（包含CRM导入功能）。<br/>注意：由于 BottomSheets 不支持嵌套。人员信息修改浮层需要开发者在外层定义。<br/>注意：如果不传该方法，豁免险中不会显示相关提示信息。 | - | - |
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `change` | 产品信息改变时触发 | `Function(product, options, inst)`；初始化时 `options` 为 `{ errorMsg }`；字段变更时 `options` 含 `{ type: 'change', insData: 险种, eleData: 元素, errorMsg }`；`inst` 为当前 Vue 实例 |
+| `openCrmPerson` | 点击豁免险标题提示信息时触发，用于打开人员信息修改浮层（含 CRM 导入功能）；不传该监听则豁免险中不显示相关提示 | — |
+| `reCalculate` | 险种存在 `revalidateFlag` 且外部监听了该事件时触发，用于外部执行重算并回调通知组件 | `Function(inputData, params, resolve, reject)` |