bxs-tools-ui 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bxs-tools-ui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "微易前端业务组件",
   "main": "lib/index.js",
   "files": [

package/packages/components/form-item/title-item.css

@@ -17,18 +17,16 @@
 	}
 
 	& .bxt-item-title-label {
-		@apply --noWrap;
-
-		display: inline-block;
-		width: 18rem;
+		display: flex;
 		padding: 15px 0;
 		line-height: normal;
 		font-size: 17px;
 		font-weight: bold;
 		vertical-align: middle;
+		white-space: nowrap;
 
-		& span {
-			vertical-align: middle;
+		& .bxt-item-title-label-item {
+			flex: 0 0 auto;
 		}
 
 		& .bxt-title-code {
@@ -40,39 +38,42 @@
 			font-size: 12px;
 			transform: scale(0.8334);
 			transform-origin: left center;
+			vertical-align: 1px;
 		}
 
-		& .bxt-titile-content--disabled {
-			color: var(--color-text-assist);
-		}
+		& .bxt-item-title-label-name {
+			flex: 1;
 
-		& .bxt-titile-persion-modify {
-			margin-left: 12px;
-			color: var(--color-primary);
-			font-weight: normal;
-			font-size: 14px;
+			& span {
+				display: inline-block;
+				vertical-align: top;
+				white-space: normal;
 
-			& i.iconfont {
-				font-size: 12px;
-			}
-		}
-	}
+				&.bxt-title-content--disabled {
+					color: var(--color-text-assist);
+				}
 
-	& .bxt-title-huomian-tag {
-		position: absolute;
-		top: 50%;
-		right: 30px;
-		transform: translateY(-50%);
-		color: #f90;
-		font-size: 14px;
-		line-height: normal;
-	}
+				&.bxt-title-persion-modify {
+					margin-left: 12px;
+					color: var(--color-primary);
+					font-weight: normal;
+					font-size: 14px;
+					vertical-align: middle;
 
-	& .bxt-item-title-checkbox {
-		position: absolute;
-		top: 50%;
-		right: 0;
-		transform: translateY(-50%);
+					& i.iconfont {
+						font-size: 12px;
+					}
+				}
+
+				&.bxt-title-huomian-tag {
+					margin-left: 5px;
+					color: #f90;
+					font-size: 14px;
+					line-height: normal;
+					vertical-align: middle;
+				}
+			}
+		}
 	}
 }
 

package/packages/components/form-item/title-item.vue

@@ -1,33 +1,43 @@
 <template>
   <div>
     <div class="bxt-item-title">
-      <label class="bxt-item-title-label" :style="{ width: huomianTag ? '16rem' : '18rem' }">
-        <span v-if="code" class="bxt-title-code">{{ code }}</span>
-        <span
-          :class="{
-            'bxt-titile-content': true,
-            'bxt-titile-content--disabled': !!disabled && !value
-          }"
-          >{{ label }}</span
-        >
-        <span
-          v-if="isShowCrmPerson"
-          class="bxt-titile-persion-modify"
-          :data-stat-id="dataStatId"
-          @click="$emit('modify')"
-        >
-          修改
-          <i class="iconfont icon-arrows_right"></i>
-        </span>
-      </label>
-      <span v-if="huomianTag" class="bxt-title-huomian-tag">{{ huomianTag }}</span>
-      <bxs-checkbox
-        v-if="!(currentValue && disabled)"
-        class="bxt-item-title-checkbox"
-        :value="currentValue"
-        :disabled="disabled"
-        @click.native="onchange"
-      />
+      <div class="bxt-item-title-label">
+        <div v-if="code" class="bxt-item-title-label-item">
+          <span class="bxt-title-code">{{ code }}</span>
+        </div>
+        <div class="bxt-item-title-label-item bxt-item-title-label-name">
+          <span
+            :class="{
+              'bxt-titile-content': true,
+              'bxt-titile-content--disabled': !!disabled && !value
+            }"
+            :style="{
+              maxWidth: huomianTag ? '78%' : '100%'
+            }"
+            >{{ label }}</span
+          >
+          <span
+            v-if="isShowCrmPerson"
+            class="bxt-title-persion-modify"
+            :data-stat-id="dataStatId"
+            @click="$emit('modify')"
+          >
+            修改
+            <i class="iconfont icon-arrows_right"></i>
+          </span>
+          <span v-if="huomianTag" class="bxt-title-huomian-tag">
+            {{ huomianTag }}
+          </span>
+        </div>
+        <div v-if="!(currentValue && disabled)" class="bxt-item-title-label-item">
+          <bxs-checkbox
+            class="bxt-item-title-checkbox"
+            :value="currentValue"
+            :disabled="disabled"
+            @click.native="onchange"
+          />
+        </div>
+      </div>
     </div>
     <div v-if="huomianTips" class="bxt-title-huomian-tips" @click="$emit('openCrmPerson')" v-html="huomianTips" />
   </div>

package/packages/product-info/index.css

@@ -121,7 +121,7 @@
 			& .bxt-ins-unit-tips {
 				display: inline-block;
 				position: absolute;
-				top: 60%;
+				top: 30px;
 				right: 55px;
 				margin-top: 11px;
 				line-height: normal;
@@ -151,12 +151,38 @@
 			}
 		}
 
+		& .bxt-ins-recommend-values {
+			padding: 0 15px 18px 15px;
+			text-align: right;
+			white-space: nowrap;
+			overflow: auto;
+
+			& span {
+				display: inline-block;
+				margin-top: 5px;
+				margin-left: 6px;
+				padding: 4px 5px;
+				line-height: 100%;
+				color: #666;
+				background: #f8f8f8;
+				border: 1px solid #ccc;
+				border-radius: 50px;
+				font-size: 12px;
+			}
+		}
+
 		& .bxt-ins-form-radio-btn {
 			& .bx-form-item__inner {
 				align-items: flex-start;
 			}
 		}
 
+		& .bx-form-item__input {
+			& .bx-form-item__inner {
+				align-items: flex-start;
+			}
+		}
+
 		& .bx-form-item__unit {
 			position: relative;
 			z-index: 1;

package/packages/product-info/index.vue

@@ -33,6 +33,7 @@
             <bxs-form-item
               v-show="isInsuranceChecked(ins) && !ele.isHide"
               :class="{
+                'bx-form-item__input': true,
                 'bx-form-item__unit': activeInputKey === ins.key + ele.key && numberUnitStr
               }"
               :key="ins.key + ele.key"
@@ -72,6 +73,15 @@
                 </span>
               </div>
             </bxs-form-item>
+            <div
+              v-if="isInsuranceChecked(ins) && !ele.isHide && getRecommendValues(ins, ele)"
+              :key="ins.key + ele.key"
+              class="bxt-ins-recommend-values"
+            >
+              <span v-for="v in getRecommendValues(ins, ele)" :key="v" @click="onClickRecommendValue(v, ins, ele)">
+                {{ v }}
+              </span>
+            </div>
           </template>
           <template v-if="['cmCommonRadioBtn'].includes(ele.componentName)">
             <bxs-form-item
@@ -176,7 +186,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
-import { productDataHandler, verifyProductRules, clearAddAndTakeAndAdjustBaoeData } from 'packages/bxs-utils/index';
+import {
+  productDataHandler,
+  verifyProductRules,
+  clearAddAndTakeAndAdjustBaoeData,
+  convertEleOrderListToObj
+} from 'packages/bxs-utils/index';
+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';
 
@@ -198,6 +215,8 @@ import 'bxs-ui-vue/esm/index.css';
 export default class BxtProductInfo extends Vue {
   activeInputKey = '';
   numberUnitStr = '';
+  recommendValues = {};
+  recommendValuesCache = {};
 
   @Prop({
     default: () => ({})
@@ -280,6 +299,7 @@ export default class BxtProductInfo extends Vue {
   }
   change(options) {
     const self = this;
+    self.requiestRecommendValues();
     if (options.type === 'change') {
       self.$nextTick(() => {
         self.$emit(
@@ -415,6 +435,73 @@ export default class BxtProductInfo extends Vue {
     activeElement.blur();
     return false;
   }
+  getRecommendValues(ins, ele) {
+    if (!['baoe', 'baof'].includes(ele.key)) {
+      return null;
+    }
+    const insurance = convertEleOrderListToObj(ins);
+    return this.recommendValues && this.recommendValues[insurance.isGroup ? insurance.insuranceId : insurance.key];
+  }
+  async requiestRecommendValues() {
+    const { recommendValuesCache, inputData, groupData, productData } = this;
+    const IS_PRODUCT_ENV = location.hostname.search(/winbaoxian\.com/) !== -1;
+    const url = `https://app.winbaoxian.${IS_PRODUCT_ENV ? 'com' : 'cn'}/planBook/input/calculate/recommend`;
+    const calcData = await createdProductDataToCalc(inputData, {
+      groupKey: groupData.key,
+      productKey: productData.key
+    });
+
+    const reqParams: any = [];
+    const calcInputData = JSON.parse(calcData.jd);
+    const calcProductData = calcInputData && calcInputData.productGroupList[0].prodOrderList[0];
+    if (calcProductData && calcProductData.mulInsOrderList) {
+      calcProductData.mulInsOrderList.forEach(ins => {
+        reqParams.push({
+          insuranceId: ins.key,
+          period: ins.pPeriod,
+          calMethod: ins.calMethod || ins.calculatorType
+        });
+      });
+    }
+
+    if (recommendValuesCache[JSON.stringify(reqParams)]) {
+      this.recommendValues = recommendValuesCache[JSON.stringify(reqParams)];
+      return;
+    }
+
+    return fetch(url, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json;'
+      },
+      body: JSON.stringify(reqParams)
+    })
+      .then(response => response.json())
+      .then(({ success, data, info }: any) => {
+        if (!success || !data) {
+          this.$toast(info);
+          return Promise.reject();
+        }
+        this.recommendValues = data.reduce((obj, ele) => {
+          obj[ele.insuranceId] = ele.valueList;
+          return obj;
+        }, {});
+        recommendValuesCache[JSON.stringify(reqParams)] = this.recommendValues;
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+  onClickRecommendValue(value, ins, ele) {
+    ele.value = value;
+    this.change({
+      insData: ins,
+      eleData: ele,
+      type: 'change'
+    });
+  }
 }
 </script>
 <style>