bxs-tools-ui 1.2.18 → 1.3.0

package/packages/product-info/index.css

@@ -3,8 +3,44 @@
 .bxt-product-info {
 	padding: 10px;
 
+	& .bxt-custom-result {
+		margin-bottom: 9px;
+		background: white;
+		font-size: 15px;
+		color: var(--color-text-primary);
+
+		& .bxt-custom-result-title {
+			padding: 15px;
+			position: relative;
+
+			& .bxt-custom-result-title_desc {
+				& .icon-arrows_up,
+				& .icon-arrows_down {
+					color: var(--color-text-assist);
+				}
+			}
+
+			& .bx-switch-box {
+				@apply --vertical-center;
+
+				right: 15px;
+
+				& .bx-switch-circle {
+					pointer-events: none;
+				}
+			}
+		}
+
+		& .bxt-custom-result-tips {
+			padding: 0 15px 15px;
+			font-size: 14px;
+			line-height: normal;
+			color: var(--color-text-patch);
+		}
+	}
+
 	& .bxt-product-info-form {
-		background: #fff;
+		background: white;
 		margin-bottom: 9px;
 		border-radius: 6px;
 
@@ -144,7 +180,7 @@
 					padding: 1px 12px;
 					line-height: normal;
 					background: #666;
-					color: #fff;
+					color: white;
 					font-size: 12px;
 					border-radius: 4px;
 				}

package/packages/product-info/index.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="bxt-product-info" v-if="productData && productData.mulInsOrderList">
+    <section v-if="params.allowCustomResult" class="bxt-custom-result">
+      <div class="bxt-custom-result-title">
+        <span class="bxt-custom-result-title_desc" @click="isShowCustomValueTips = !isShowCustomValueTips">
+          自定义保费
+          <i class="iconfont" :class="isShowCustomValueTips ? 'icon-arrows_up' : 'icon-arrows_down'" />
+        </span>
+        <bxs-switch v-model="productData.inputResultSwitch" @change="createInsuranceInputResultEle()" />
+      </div>
+      <div v-if="isShowCustomValueTips" class="bxt-custom-result-tips">
+        保险公司会因非标准体等原因修改费率。<br />
+        打开"自定义保费"功能，按保单填写实际保费/保额
+      </div>
+    </section>
     <template v-for="ins in filterInsuranceList">
       <bxs-form
         :ref="`insuranceForm${ins.key}`"
@@ -191,6 +204,7 @@ import {
   productDataHandler,
   verifyProductRules,
   clearAddAndTakeAndAdjustBaoeData,
+  initElementValidateRules,
   convertEleOrderListToObj
 } from 'packages/bxs-utils/index';
 import { createdProductDataToCalc } from 'packages/planbook-input/helper.js';
@@ -198,7 +212,7 @@ import { createdProductDataToCalc } from 'packages/planbook-input/helper.js';
 import SelectItem from 'packages/components/form-item/select-item.vue';
 import TitleItem from 'packages/components/form-item/title-item.vue';
 
-import { Form, FormItem, Input, RadioGroup, Radio } from 'bxs-ui-vue';
+import { Form, FormItem, Input, RadioGroup, Radio, Switch } from 'bxs-ui-vue';
 import 'bxs-ui-vue/esm/index.css';
 
 @Component({
@@ -210,7 +224,8 @@ import 'bxs-ui-vue/esm/index.css';
     [FormItem.name]: FormItem,
     [Input.name]: Input,
     [RadioGroup.name]: RadioGroup,
-    [Radio.name]: Radio
+    [Radio.name]: Radio,
+    [Switch.name]: Switch
   }
 })
 export default class BxtProductInfo extends Vue {
@@ -218,6 +233,7 @@ export default class BxtProductInfo extends Vue {
   numberUnitStr = '';
   recommendValues = {};
   recommendValuesCache = {};
+  isShowCustomValueTips = true;
 
   @Prop({
     default: () => ({})
@@ -239,6 +255,11 @@ export default class BxtProductInfo extends Vue {
   })
   productKey!: number | string;
 
+  @Prop({
+    default: () => ({})
+  })
+  params: any;
+
   get personData() {
     return this.inputData && this.inputData.personData;
   }
@@ -336,6 +357,11 @@ export default class BxtProductInfo extends Vue {
       clearAddAndTakeAndAdjustBaoeData(productData);
     }
     productDataHandler(productData, this.verifyData && this.verifyData[productData.key], this.personData);
+    if (options.type === 'change') {
+      this.createInsuranceInputResultEle(options.insData, options.eleData);
+    } else {
+      this.createInsuranceInputResultEle();
+    }
     return verifyProductRules({
       personData: this.personData,
       productData,
@@ -514,6 +540,55 @@ export default class BxtProductInfo extends Vue {
       }
     });
   }
+  createInsuranceInputResultEle(insData?: any, eleData?: any) {
+    const { params, productData } = this;
+    if (!params.allowCustomResult) {
+      return;
+    }
+
+    productData.mulInsOrderList
+      .filter(e => e.key !== 'common' || e.eleOrderList)
+      .forEach(ins => {
+        // 需要特别注意组合险的情况
+        if (ins.groupKey) {
+          return;
+        }
+        if (insData && eleData && !insData.isGroup && insData.key === ins.key && eleData.key !== 'calMethod') {
+          return;
+        }
+
+        const calMethod = ins.eleOrderList.find(e => e.key === 'calMethod');
+        const baof = ins.eleOrderList.find(e => e.key === 'baof');
+        let inputResult = ins.eleOrderList.find(e => e.key === 'inputResult');
+        const labelName = calMethod ? (calMethod.value === 'baof2baoe' ? '保额' : '保费') : baof ? '保额' : '保费';
+        let value = ins.inputResult === undefined ? null : ins.inputResult;
+        if (inputResult) {
+          value = inputResult.value;
+        }
+        if (insData && eleData && insData.key === ins.key && eleData.key === 'inputResult') {
+          value = eleData.value;
+        }
+        inputResult = {
+          componentName: 'cmCommonInput',
+          placeholder: `按照保单填写${labelName}`,
+          isHide: !productData.inputResultSwitch,
+          key: 'inputResult',
+          labelName: `自定义${labelName}`,
+          inputType: 'text',
+          required: false,
+          regExp: '/^\\d{1,}(\\.\\d{1,2})?$/',
+          regExpMessage: '请输入1-2位小数的值',
+          value
+        };
+        inputResult.rules = initElementValidateRules(inputResult);
+        delete ins.inputResult;
+        ins.eleOrderList = ins.eleOrderList.filter(e => e.key !== 'inputResult');
+
+        if (productData.inputResultSwitch) {
+          ins.eleOrderList.push(inputResult);
+        }
+      });
+  }
 }
 </script>
 <style>

package/packages/product-info/readme.md

@@ -3,17 +3,17 @@
 ## 计划书产品（ProductInfo）
 说明：计划书产品组件    
 内容：包括产品中各险种的各项元素值的修改、校验  
-属性：inputData、verifyData、groupKey、productKey  
+属性：inputData、verifyData、groupKey、productKey、params  
 方法：change、validate  
 
 ### 示例  
 ```html
   import { ProductInfo } from 'bxs-tools-ui'
-  ...
-  components: {
-    ProductInfo
+  export default {
+    components: {
+      ProductInfo
+    }
   }
-  ...
 ```
 
 ```html
@@ -25,33 +25,6 @@
     :product-key="2695"
     @change="cgProduct"
   ></ProductInfo>
-  ...
-  inputData = {
-    personData: {
-      personOrderList: [
-        ...
-      ],
-    },
-    productGroupList: [
-      {
-        "defNum": "5",
-        "prodOrderList": [
-          ...
-        ],
-        "maxNum": 5,
-        "key": "allMainInsData"
-      }
-    ]
-  }
-  verifyData = null
-  cgProduct(product, obj, inst) {
-    if (obj.type === 'change') {
-      alert(
-        `${obj.ins.eleOrderList[0].labelName} -> ${obj.ele.labelName}: ${obj.ele.value}`
-      );
-    }
-  }
-  ...
 ```
   
 ### Attributes
@@ -61,33 +34,21 @@
 | verify-data | 可不传，计划书限制条件。如不传，不会调用模块内部封装的产品逻辑处理函数 | Object | {} |
 | group-key | 必传，产品组的key。 | Number, String | null |
 | product-key | 必传，产品的key。 | Number, String | null |
-> 注: 访问[计划书初始化API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128)查看示例数据。  
+| 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
-```js
-let inputData = {
-  personData: {
-    personOrderList: [personData对象, personData对象]
-  },
-  productGroupList: [
-    {
-      "prodOrderList": [
-        productData对象,
-        productData对象
-      ],
-      "key": "allMainInsData"
-    }
-  ]
-}
-```
 
 #### productData对象
 | 参数| 说明 | 类型 | 默认值 |
 | --- | --- | --- |  --- |
 | mulInsOrderList | 必传。险种列表，具体查看mulInsOrderList数组 | Array | - |
 | key | 必传。产品id | Number | - |
+
 #### mulInsOrderList数组
 | 参数| 说明 | 类型 | 默认值 |
 | --- | --- | --- |  --- |
@@ -95,6 +56,7 @@ let inputData = {
 | key | 必传。险种id | Number | - |
 | code | 可不传。险种code | String | - |
 | isFollowing | 可不传。是否去除与上一险种之间的间距 | Boolean | - |
+
 #### eleOrderList数组
 | 参数| 说明 | 类型 | 默认值 |
 | --- | --- | --- |  --- |
@@ -111,31 +73,6 @@ let inputData = {
 | restrictions | 可不传。当前元素的限制条件 | Array | - |
 | placeholder | 可不传。适用于 cmCommonInput 组件 | String | - |
 ```js
-productData = {
-  "mulInsOrderList": [
-    {
-      "code": "",
-      "isFollowing": false,
-      "eleOrderList": [
-        {
-          "componentName": "cmCommonTitle",
-          "common": false,
-          "labelName": "康乐一生（2019）",
-          "value": true,
-          "key": "title",
-          "isDisabled": true,
-          "isHide": null,
-          "isIgnoreValidate": null,
-          "rules": []
-        },
-        ...
-      ],
-      "key": 18753
-    },
-  ],
-  "key": 2695
-}
-```
 
   
 ### Methods