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

package/packages/person-info/readme.md

@@ -1,156 +1,171 @@
-<!--仅用于绕过 eslint-loader 校验的错误信息：Parsing error: Invalid character-->
-<!--??以目前现象看，文档首字符不为 "<" 会报错??-->
 ## 计划书人员（PersonInfo）
-说明： 计划书人员信息模块  
-内容： 性别、年龄、生日等  
-属性： inputData、verifyData、personData 等  
-方法： change  
-    
-### 示例
-```html
-import { PersonInfo } from 'bxs-tools-ui'
+
+计划书投保页的人员信息模块，基于服务端下发的 `eleOrderList` 动态渲染表单元素，支持性别、年龄、生日等字段的展示与编辑。
+
+> 数据来源：访问[计划书初始化 API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 查看示例数据。
+> - `inputData`：`data → initData → inputData`
+> - `verifyData`：`data → verifyData`
+> - `personData`：`data → initData → inputData → personData → personOrderList[0]`
+
+---
+
+### 模块引用（import）
+
+```javascript
+import { PersonInfo } from 'bxs-tools-ui';
 export default {
   components: {
     PersonInfo
   }
-}
+};
 ```
-  
+
+---
+
+### 示例（example）
+
 ```html
-<PersonInfo
-  :input-data="inputData"
-  :verify-data="verifyData"
-  :person-data="personData"
-  @change="changePersonInfo"
-></PersonInfo>
-
-...
-inputData = null
-verifyData = null
-personData = {
-    "eleOrderList": [
-      {
-        "isImport": true,
-        "value": true,
-        "key": "title",
-        "isDisabled": false,
-        "componentName": "cmCommonTitle",
-        "label": "投保人信息"
-      },
-      {
-        "key": "applicantAndInsuredSame",
-        "value": 0,
-        "label": "投被保人",
-        "componentName": "cmCommonRadio",
-        "options": [
+<template>
+  <PersonInfo
+    :input-data="inputData"
+    :verify-data="verifyData"
+    :person-data="personData"
+    @change="changePersonInfo"
+  />
+</template>
+
+<script>
+import { PersonInfo } from 'bxs-tools-ui';
+
+export default {
+  components: { PersonInfo },
+  data() {
+    return {
+      inputData: null,
+      verifyData: null,
+      personData: {
+        eleOrderList: [
           {
-            "val": 0,
-            "desc": "非同一人"
+            isImport: true,
+            value: true,
+            key: 'title',
+            isDisabled: false,
+            componentName: 'cmCommonTitle',
+            label: '投保人信息'
           },
           {
-            "val": 1,
-            "desc": "是同一人"
-          }
-        ],
-        "isDisabled": null,
-        "isHide": null
-      },
-      {
-        "value": 1,
-        "key": "sex",
-        "label": "性别",
-        "componentName": "cmCommonRadio",
-        "options": [
-          {
-            "val": 1,
-            "desc": "男"
+            key: 'applicantAndInsuredSame',
+            value: 0,
+            label: '投被保人',
+            componentName: 'cmCommonRadio',
+            options: [
+              { val: 0, desc: '非同一人' },
+              { val: 1, desc: '是同一人' }
+            ],
+            isDisabled: null,
+            isHide: null
           },
           {
-            "val": 2,
-            "desc": "女"
-          }
-        ],
-        "isDisabled": false,
-        "isHide": false
-      },
-      {
-        "value": 30,
-        "key": "age",
-        "label": "年龄",
-        "componentName": "cmCommonSelect",
-        "placeholder": "请选择年龄",
-        "options": [
+            value: 1,
+            key: 'sex',
+            label: '性别',
+            componentName: 'cmCommonRadio',
+            options: [
+              { val: 1, desc: '男' },
+              { val: 2, desc: '女' }
+            ],
+            isDisabled: false,
+            isHide: false
+          },
           {
-            "val": 18,
-            "desc": "18岁"
+            value: 30,
+            key: 'age',
+            label: '年龄',
+            componentName: 'cmCommonSelect',
+            placeholder: '请选择年龄',
+            options: [
+              { val: 18, desc: '18岁' },
+              { val: 19, desc: '19岁' }
+            ],
+            isHide: false
           },
           {
-            "val": 19,
-            "desc": "19岁"
+            key: 'birthday',
+            value: null,
+            label: '生日',
+            componentName: 'cmCommonDate',
+            placeholder: '请选择生日',
+            minDate: new Date(2000, 0, 1),
+            maxDate: new Date(),
+            defaulValue: new Date(2020, 11, 1),
+            isHide: false
           }
-        ],
-        "isHide": false
-      },
-      {
-        "key": "birthday",
-        "value": null,
-        "label": "生日",
-        "componentName": "cmCommonDate",
-        "placeholder": "请选择生日",
-        "minDate": new Date(2000),
-        "maxDate": new Date(),
-        "defaulValue": new Date(2020, 11, 1),
-        "isHide": false
+        ]
       }
-    ]
+    };
+  },
+  methods: {
+    changePersonInfo(personData, eleData) {
+      console.log(`${eleData.label} -> ${eleData.value}`);
+    }
   }
-changePersonInfo(personData, eleData) {
-  alert(`${eleData.label} -> ${eleData.value}`);
-}
-...
+};
+</script>
 ```
-  
-  
+
+---
+
 ### Attributes
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| input-data | 可不传，计划书初始化数据。如不传，不会调用模块内部封装的人员逻辑、产品逻辑处理函数 | Object | {} |
-| verify-data | 可不传，计划书限制条件。如不传，不会调用模块内部封装的产品逻辑处理函数 | Object | {} |
-| person-data | 必传。人员数据结构。具体查看personData对象 | Object | {} |
-| is-show-crm-person | 选传。是否显示修改CRM人员信息的按钮 | Boolean | false |
-| params | 选传。一些附加信息 | Object | {} |
-> 注: 访问 [计划书初始化API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 查看示例数据。  
-> inputData: data -> initData -> inputData  
-> verifyData: data -> verifyData  
-> personData: data -> initData -> inputData -> personData -> personOrderList[0]  
-
-#### personData对象
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| eleOrderList | 必传。人员信息的元素数据。具体查看eleOrderList数组 | Array | - |
-#### eleOrderList数组
-| 参数| 说明 | 类型 | 默认值 |
-| --- | --- | --- |  --- |
-| eleOrderList | 必传。人员信息的元素数据。具体查看eleOrderList数组 | Array | - |
-| key | 必传。元素关键字 | String | - |
-| value | 必传。元素对应的值  | String \| Number  | - |
-| componentName | 必传。元素对应的模块。  | String  | - |
-| label | 选传。元素对应的名称 | String | - |
-| placeholder | 选传。元素对应的占位符 | String | - |
-| options | 元素对应的选项。 | Array | - |
-| minDate | 生日最小范围 | Date | - |
-| maxDate | 生日最大范围 | Date | - |
-| defaulValue | 生日默认值范围 | Date | - |
-| isHide | 必传。是否隐藏元素 | Bool | - |
-| isDisabled | 必传。元素值是否可修改 | Bool | - |
-| isImport | 预留字段 | Bool | - |
-  
-  
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `input-data` | 必传，计划书初始化数据；不传则不执行模块内部的人员逻辑与产品逻辑 | Object | `{}` |
+| `person-data` | 必传，人员数据结构，见 PersonData 对象 | Object | `{}` |
+| `verify-data` | 可选，计划书限制条件；不传则不执行模块内部的产品逻辑 | Object | `{}` |
+| `is-show-crm-person` | 可选，是否显示修改 CRM 人员信息的按钮 | Boolean | `false` |
+| `params` | 可选，附加信息 | Object | `{}` |
+
+
+#### PersonData 对象
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `eleOrderList` | 必传，人员信息的元素数据，见 EleOrderList 数组 | Array | — |
+
+
+#### EleOrderList 数组（单项）
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `key` | 必传，元素关键字 | String | — |
+| `value` | 必传，元素当前值 | String / Number | — |
+| `componentName` | 必传，对应渲染组件（`cmCommonTitle` / `cmCommonInput` / `cmCommonRadio` / `cmCommonSelect` / `cmAgeBirthday`） | String | — |
+| `label` | 元素名称 | String | — |
+| `placeholder` | 元素占位符 | String | — |
+| `options` | 元素选项列表（`cmCommonRadio` / `cmCommonSelect` / `cmAgeBirthday` 适用） | Array | — |
+| `rules` | 校验规则（基于 vant van-form） | Array | — |
+| `labelIcon` | 标签右侧图标 class 名（`cmCommonInput` 适用） | String | — |
+| `maxlength` | 输入最大长度，默认 9（`cmCommonInput` 适用） | Number | `9` |
+| `minDate` | 日期最小范围（`cmAgeBirthday` 适用） | Date | — |
+| `maxDate` | 日期最大范围（`cmAgeBirthday` 适用） | Date | — |
+| `defaulValue` | 日期默认值（`cmAgeBirthday` 适用） | Date | — |
+| `isHide` | 必传，是否隐藏元素 | Boolean | — |
+| `isDisabled` | 必传，元素值是否不可修改 | Boolean | — |
+| `isImport` | 预留字段 | Boolean | — |
+
+---
+
 ### Methods
-| 方法名 | 说明 | 参数 | 备注 |
-| --- | --- | --- |  --- |
-  
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| `validate` | 表单校验，通过 `$refs` 调用，返回 Promise；若当前人员的 `title` 为 `false`（折叠状态）则跳过校验 | — |
+
+---
+
 ### Events
-| 方法名 | 说明 | 参数 | 备注 |
-| --- | --- | --- |  --- |
-| change | 任一元素的值变化，触发change事件 | person: personData对象, ele: 当前点击的元素（eleOrderList数组的子元素） ) | - |
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `change` | 任一元素的值变化时触发 | `Function(personData, eleData)`；`personData` 为 PersonData 对象，`eleData` 为当前变化的元素（EleOrderList 单项） |
+| `clickLabel` | 点击 `cmCommonInput` 元素的标签区域时触发 | `Function(personData, eleData)` |

package/packages/planbook-input/readme.md

@@ -1,20 +1,40 @@
-<!--仅用于绕过 eslint-loader 校验的错误信息：Parsing error: Invalid character-->
-<!--??以目前现象看，文档首字符不为 "<" 会报错??-->
 ## 计划书投保页（PlanbookInput）
-说明: 计划书投保页DEMO  
-内容: 基于组件库的人员模块和产品模块，创建投保页面  
-备注: 投保页主要由人员模块和产品模块组成。核心处理逻辑有：
-* 数据的初始化：在已有的 [初始化API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 请求数据后，调用已封装好的辅助函数处理人员、产品数据。可参考下方 `initPageData`函数。也可以按人员、产品模块的数据结构，自行初始化数据。
-* 人员信息改变：处理人员之间的关系、产品中各险种的逻辑（主要逻辑，已封装在模块中了）。模块中的`change`方法中可加一些额外的处理逻辑。
-* 产品信息改变：处理产品中各险种的逻辑，重新校验产品数据（主要逻辑，已封装在模块中了）。模块中的`change`方法中可加一些额外的处理逻辑。
-* 产品模块的表单校验：产品模块内部的 `validate` 方法。参考下方 `confirmProduct`函数
-> 查看[一些辅助函数](https://docs.winbaoxian.cn/bxs-tools-ui/docs.html#/bxs-utils)中封装好的函数。
-
-### 示例
-index.app
+
+计划书投保页的完整实现示例，基于 `PersonInfo`（人员模块）和 `ProductInfo`（产品模块）组合构建。
+
+**核心处理逻辑**：
+
+1. **数据初始化**：请求[计划书初始化 API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 后，调用封装好的辅助函数处理人员与产品数据（参考 `initPageData`），也可按各模块数据结构自行初始化。
+2. **人员信息变更**：模块内部已封装投被保人关系、险种联动等主要逻辑；`change` 回调中可追加额外处理（如触发产品数据重算）。
+3. **产品信息变更**：模块内部已封装险种逻辑与产品数据校验；`change` 回调中可处理错误提示等额外逻辑。
+4. **产品表单校验**：通过 `$refs.productInfo.validate()` 调用产品模块内部的校验方法。
+
+> 查看[辅助函数文档](https://docs.winbaoxian.cn/bxs-tools-ui/docs.html#/bxs-utils)了解 `initPersonData`、`personDataHandler`、`initProductData`、`productDataHandler` 等封装函数的用法。
+
+---
+
+### 模块引用（import）
+
+```javascript
+import { PersonInfo, ProductInfo } from 'bxs-tools-ui';
+export default {
+  components: {
+    PersonInfo,
+    ProductInfo
+  }
+};
+```
+
+---
+
+### 示例（example）
+
+**投保页主页面（index.vue）：**
+
 ```html
 <template>
   <div class="bxt-planbook" v-if="inputData">
+    <!-- 人员模块 -->
     <div class="bxt-planbook-person">
       <div class="bxt-person-container" v-if="inputData.personData">
         <template v-for="person in inputData.personData.personOrderList">
@@ -24,10 +44,11 @@ index.app
             :verify-data="planbookData.verifyData"
             :person-data="person"
             @change="changePersonInfo"
-          ></PersonInfo>
+          />
         </template>
       </div>
     </div>
+    <!-- 产品模块 -->
     <div class="bxt-planbook-product">
       <template v-for="g in inputData.productGroupList">
         <template v-for="(p, pi) in g.prodOrderList">
@@ -39,79 +60,73 @@ index.app
             :group-key="g.key"
             :product-key="p.key"
             @confirm="confirmProduct"
-          ></ProductTable>
+          />
         </template>
       </template>
     </div>
-    ...
   </div>
 </template>
 
-// ...
-initPageData(data) {
-  let inputData = data && data.initData && data.initData.inputData;
-  if (inputData) {
-    initPersonData(inputData, data.verifyData);
-    personDataHandler(inputData.personData);
-    let productGroupList = inputData.productGroupList;
-    if (productGroupList && productGroupList.length) {
-      productGroupList.forEach(group => {
-        if (group.prodOrderList) {
-          group.prodOrderList.forEach(prod => {
-            initProductData(prod);
-            productDataHandler(
-              prod,
-              data.verifyData[prod.key],
-              inputData.personData
-            );
+<script>
+import { PersonInfo } from 'bxs-tools-ui';
+import { initPersonData, personDataHandler, initProductData, productDataHandler } from 'bxs-utils';
+
+export default {
+  components: { PersonInfo },
+  methods: {
+    async initPageData(data) {
+      const inputData = data && data.initData && data.initData.inputData;
+      if (inputData) {
+        initPersonData(inputData, data.verifyData);
+        personDataHandler(inputData.personData);
+        const productGroupList = inputData.productGroupList || [];
+        productGroupList
+          .filter(g => g.prodOrderList)
+          .forEach(g => {
+            g.prodOrderList.forEach(p => {
+              initProductData(p);
+              productDataHandler(p, data.verifyData[p.key], inputData.personData);
+            });
+          });
+      }
+      return data;
+    },
+    changePersonInfo(person, ele) {
+      this.inputData.productGroupList.forEach(g => {
+        g.prodOrderList &&
+          g.prodOrderList.forEach(p => {
+            if (p.hadChoice) {
+              this.doubleCalcProductData(this.inputData, {
+                planbookId: this.URL_PARAM.planbookId * 1,
+                groupKey: g.key,
+                productKey: p.key,
+                isIgnoreError: true
+              });
+            }
           });
-        }
       });
+    },
+    confirmProduct(options, inst) {
+      inst.$refs.productInfo
+        .validate()
+        .then(valid => {
+          // 校验通过，执行投保逻辑
+        })
+        .catch(err => {
+          console.log(err);
+        });
     }
   }
-  return data;
-}
-
-changePersonInfo(person: any = {}, ele: any = {}) {
-  this.inputData.productGroupList.forEach(g => {
-    g.prodOrderList &&
-      g.prodOrderList.map(p => {
-        if (p.hadChoice) {
-          this.calcProductData(this.inputData, {
-            planbookId: this.URL_PARAM.planbookId * 1,
-            groupKey: g.key,
-            productKey: p.key,
-            isIgnoreError: true
-          });
-        }
-      });
-  });
-}
-confirmProduct(options, inst) {
-  let self = this;
-  inst.$refs.productInfo
-    .validate()
-    .then(valid => {
-      // ...
-    })
-    .catch(err => {
-      console.log(err);
-    });
-}
-// ...
-```  
-  
-product-table.vue  
+};
+</script>
+```
+
+**产品弹层子组件（product-table.vue）：**
+
 ```html
 <template>
-  <div
-    :class="['bxt-product-show', `bxt-product-id-${productData.key}`]"
-    v-if="productData"
-  >
-    ...
+  <div :class="['bxt-product-show', `bxt-product-id-${productData.key}`]" v-if="productData">
     <bxs-bottom-sheets
-      class="product-sheets"
-      :key="`sheets-${productData.key}`"
       v-model="isShowProductSheet"
       :title="productData.titleName"
       height="middle"
@@ -124,19 +139,63 @@ product-table.vue
         :group-key="groupKey"
         :product-key="productKey"
         @change="cgProduct"
-      ></ProductInfo>
-      ...
+      />
     </bxs-bottom-sheets>
   </div>
 </template>
 
-// ...
-cgProduct(product, options) {
-  if (options.type === 'change' && options.errorMsg) {
-    this.$nextTick(() => {
-      this.$toast(options.errorMsg);
-    });
+<script>
+import { ProductInfo } from 'bxs-tools-ui';
+
+export default {
+  components: { ProductInfo },
+  methods: {
+    cgProduct(product, options) {
+      if (options.type === 'change' && options.errorMsg) {
+        this.$nextTick(() => {
+          this.$toast(options.errorMsg);
+        });
+      }
+    }
   }
-}
-// ...
+};
+</script>
+```
+
+---
+
+### 说明
+
+投保页本身不是一个独立的 Vue 组件，而是由 `PersonInfo` + `ProductInfo` 等模块组合而成的页面。各模块的 props、events、methods 请分别参考：
+
+- [PersonInfo 文档](../person-info/readme.md)
+- [ProductInfo 文档](../product-info/readme.md)
+- [辅助函数文档](../bxs-utils/readme.md)
+
+---
+
+### helper.js 导出函数
+
+`helper.js` 封装了投保页常用的数据处理与请求函数，可按需单独引入：
+
+```javascript
+import {
+  initPageData,
+  setPageDataBaseOnResult,
+  calculateProductData,
+  doubleCalcProductData,
+  createPlanbookDataToMake,
+  setupUnderwriteRuleToInputData
+} from 'packages/planbook-input/helper.js';
 ```
+
+| 函数名 | 说明 | 入参 | 出参 |
+| --- | --- | --- | --- |
+| `initPageData(data)` | 初始化计划书数据，依次处理人员数据和所有产品数据 | `data`：接口返回的原始数据 | Promise\<data\> |
+| `setPageDataBaseOnResult(data)` | 将已生成结果中的导出数据（`exportData`）回填到初始化数据中，用于「编辑已有计划书」场景 | `data`：同上 | data |
+| `calculateProductData(inputData, options)` | 对指定产品发起一次试算请求，并将结果写回 `inputData` | `inputData`；`options`：`{ planbookId, publicPbUuid, groupKey, productKey, isIgnoreError }` | Promise |
+| `doubleCalcProductData(inputData, verifyData, options)` | 先执行 `productDataHandler` 再执行 `calculateProductData`，对存在 `revalidateFlag` 的产品自动执行二次试算 | 同上，额外需要 `verifyData` | Promise |
+| `createPlanbookDataToMake(planbookData, options)` | 将投保页数据转换为提交计划书所需的 JSON 结构 | `planbookData`；`options`：`{ pbType, insuranceTypeId, publicPbUuid, totalBaof, userUuid }` | Object / null |
+| `setupUnderwriteRuleToInputData(inputData)` | 将核保规则（underwrite rule）应用到 inputData，返回处理后的 inputData | `inputData` | Promise\<inputData\> |
+| `createdProductDataToCalc(inputData, options)` | 生成试算接口的请求参数（jd + signature） | `inputData`；`options`：`{ planbookId, publicPbUuid, groupKey, productKey }` | Promise\<{ errorMsg, jd, signature }\> |
+| `receiveProductData(inputData, rProductData, options)` | 将试算接口返回的产品数据写回 `inputData` | `inputData`；`rProductData`：接口返回的产品数据；`options` | productData |