bxs-tools-ui 3.2.0 → 3.3.0

package/packages/person-info/index.vue

@@ -113,15 +113,16 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { get as _get } from 'lodash';
-import { Component, Prop } from 'vue-property-decorator';
-import { convertEleOrderListToObj, personDataHandler, productDataHandler, clearAddAndTakeAndAdjustBaoeData } from 'packages/bxs-utils/index';
-import CommonTitle from '@src/components/common/common-title.vue';
-import CommonRadio from '@src/components/common/common-radio.vue';
-import CommonSelect from '@src/components/common/common-select.vue';
-import CommonAgeBirthday from '@src/components/common/common-age-birthday.vue';
-import CrmPopup from 'packages/person-info/crm-popup.vue';
+import Vue from 'vue'
+import { get as _get } from 'lodash'
+import { Component, Prop } from 'vue-property-decorator'
+import { convertEleOrderListToObj, personDataHandler } from 'packages/bxs-utils/index'
+import CommonTitle from '../../src/components/common/common-title.vue'
+import CommonRadio from '../../src/components/common/common-radio.vue'
+import CommonSelect from '../../src/components/common/common-select.vue'
+import CommonAgeBirthday from '../../src/components/common/common-age-birthday.vue'
+import CrmPopup from 'packages/person-info/crm-popup.vue'
+import './index-inline.less'
 
 @Component({
   name: 'BxtPersonInfo',
@@ -134,145 +135,114 @@ import CrmPopup from 'packages/person-info/crm-popup.vue';
   }
 })
 export default class BxtPersonInfo extends Vue {
-  isShowCrmPersonPop = false;
+  isShowCrmPersonPop = false
   @Prop({
     default: () => ({})
   })
-  inputData: any;
+  user: any
 
   @Prop({
     default: () => ({})
   })
-  verifyData: any;
+  inputData: any
 
   @Prop({
     default: () => ({})
   })
-  personData: any;
+  verifyData: any
 
   @Prop({
     default: () => ({})
   })
-  params: any;
+  personData: any
+
+  @Prop({
+    default: () => ({})
+  })
+  params: any
 
   @Prop({
     default: false
   })
-  isShowCrmPerson!: boolean;
+  isShowCrmPerson!: boolean
 
   get personForm() {
-    return convertEleOrderListToObj(this.personData);
+    return convertEleOrderListToObj(this.personData)
   }
 
   get birthdayElement() {
-    const elementList = _get(this, 'personData.eleOrderList') || [];
-    const element = elementList.find(e => e.key === 'birthday');
-    return element;
+    const elementList = _get(this, 'personData.eleOrderList') || []
+    const element = elementList.find(e => e.key === 'birthday')
+    return element
   }
 
   isShowPersonElement(person, ele) {
-    const title = person.eleOrderList.find(e => e.key === 'title');
-    let bool = title && title.value;
+    const title = person.eleOrderList.find(e => e.key === 'title')
+    let bool = title && title.value
     if (!bool) {
-      return false;
+      return false
     }
     if (person.key === 'applicantInfo' && ele.key !== 'applicantAndInsuredSame') {
-      const applicantSame = person.eleOrderList.find(e => e.key === 'applicantAndInsuredSame');
+      const applicantSame = person.eleOrderList.find(e => e.key === 'applicantAndInsuredSame')
       if (applicantSame) {
-        bool = !applicantSame.value;
+        bool = !applicantSame.value
       }
     }
-    return bool;
+    return bool
   }
   onClickLabel(ele) {
-    this.$emit('clickLabel', this.personData, ele);
+    this.$emit('clickLabel', this.personData, ele)
   }
   onClickIcon(id) {
-    const inputDom: any = document.querySelector(`#${id}`);
-    inputDom.focus();
+    const inputDom: any = document.querySelector(`#${id}`)
+    inputDom.focus()
   }
   async change(ele: any = {}) {
-    const { inputData, personData, verifyData, params } = this;
+    const { inputData, personData } = this
     if (!inputData) {
-      return;
+      return
     }
-    const allPersonsData = inputData.personData;
-    const productGroupList = inputData.productGroupList || [];
-    const eventTarget = {
-      personKey: personData.key,
-      elementKey: ele.key
-    };
-
+    const allPersonsData = inputData.personData
     if (allPersonsData) {
-      personDataHandler(allPersonsData);
+      personDataHandler(allPersonsData)
       if (personData.key === 'applicantInfo') {
         if (ele.key === 'applicantAndInsuredSame' && !ele.value) {
-          personData.cid = null;
+          personData.cid = null
         }
       }
-
-      const promises: any = [];
-      productGroupList
-        .filter(g => g.prodOrderList)
-        .forEach(g => {
-          g.prodOrderList.map(p => {
-            clearAddAndTakeAndAdjustBaoeData(p);
-            promises.push(
-              productDataHandler(p, _get(verifyData, `[${p.key}]`), allPersonsData, {
-                planbookId: _get(params, 'planbookId'),
-                eventTarget
-              })
-            );
-          });
-        });
-      await Promise.all(promises);
     }
     if (personData.key && ele.key && !['age'].includes(ele.key)) {
-      window.WeiyiStatSDK && window.WeiyiStatSDK.submit(`${personData.key}_${ele.key}`);
+      window.WeiyiStatSDK && window.WeiyiStatSDK.submit(`${personData.key}_${ele.key}`)
     }
-    this.$emit('change', personData, ele);
+    this.$emit('change', personData, ele)
   }
   validate() {
     if (!this.personForm.title) {
-      return Promise.resolve();
+      return Promise.resolve()
     }
     return new Promise((resolve, reject) => {
-      const refPersonForm: any = this.$refs.personForm;
+      const refPersonForm: any = this.$refs.personForm
       return refPersonForm
         ?.validate()
         .then(valid => {
           if (!valid) {
-            resolve(valid);
-            return;
+            resolve(valid)
+            return
           }
-          reject();
+          reject()
         })
         .catch(err => {
-          reject(err);
-        });
-    });
+          reject(err)
+        })
+    })
   }
   closeKeyBoard() {
-    const activeElement: any = document.activeElement;
+    const activeElement: any = document.activeElement
     if (!activeElement) {
-      return false;
+      return false
     }
-    activeElement.blur();
-    return false;
+    activeElement.blur()
+    return false
   }
 }
 </script>
-<style lang="postcss">
-@import 'base.css';
-@import 'color.css';
-
-.bxt-person-info {
-  & .van-form {
-    background: #fff;
-
-    & .van-cell::after {
-      border-bottom: 0;
-    }
-  }
-}
-</style>

package/packages/person-info/readme.md

@@ -3,6 +3,7 @@
 计划书投保页的人员信息模块，基于服务端下发的 `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]`
@@ -26,90 +27,85 @@ export default {
 
 ```html
 <template>
-  <PersonInfo
-    :input-data="inputData"
-    :verify-data="verifyData"
-    :person-data="personData"
-    @change="changePersonInfo"
-  />
+  <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: [
-          {
-            isImport: true,
-            value: true,
-            key: 'title',
-            isDisabled: false,
-            componentName: 'cmCommonTitle',
-            label: '投保人信息'
-          },
-          {
-            key: 'applicantAndInsuredSame',
-            value: 0,
-            label: '投被保人',
-            componentName: 'cmCommonRadio',
-            options: [
-              { val: 0, desc: '非同一人' },
-              { val: 1, desc: '是同一人' }
-            ],
-            isDisabled: null,
-            isHide: null
-          },
-          {
-            value: 1,
-            key: 'sex',
-            label: '性别',
-            componentName: 'cmCommonRadio',
-            options: [
-              { val: 1, desc: '男' },
-              { val: 2, desc: '女' }
-            ],
-            isDisabled: false,
-            isHide: false
-          },
-          {
-            value: 30,
-            key: 'age',
-            label: '年龄',
-            componentName: 'cmCommonSelect',
-            placeholder: '请选择年龄',
-            options: [
-              { val: 18, desc: '18岁' },
-              { val: 19, desc: '19岁' }
-            ],
-            isHide: false
-          },
-          {
-            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
-          }
-        ]
+  import { PersonInfo } from 'bxs-tools-ui';
+
+  export default {
+    components: { PersonInfo },
+    data() {
+      return {
+        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: [
+                { val: 0, desc: '非同一人' },
+                { val: 1, desc: '是同一人' }
+              ],
+              isDisabled: null,
+              isHide: null
+            },
+            {
+              value: 1,
+              key: 'sex',
+              label: '性别',
+              componentName: 'cmCommonRadio',
+              options: [
+                { val: 1, desc: '男' },
+                { val: 2, desc: '女' }
+              ],
+              isDisabled: false,
+              isHide: false
+            },
+            {
+              value: 30,
+              key: 'age',
+              label: '年龄',
+              componentName: 'cmCommonSelect',
+              placeholder: '请选择年龄',
+              options: [
+                { val: 18, desc: '18岁' },
+                { val: 19, desc: '19岁' }
+              ],
+              isHide: false
+            },
+            {
+              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
+            }
+          ]
+        }
+      };
+    },
+    methods: {
+      changePersonInfo(personData, eleData) {
+        console.log(`${eleData.label} -> ${eleData.value}`);
       }
-    };
-  },
-  methods: {
-    changePersonInfo(personData, eleData) {
-      console.log(`${eleData.label} -> ${eleData.value}`);
     }
-  }
-};
+  };
 </script>
 ```
 
@@ -117,55 +113,53 @@ export default {
 
 ### Attributes
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `input-data` | 必传，计划书初始化数据；不传则不执行模块内部的人员逻辑与产品逻辑 | Object | `{}` |
-| `person-data` | 必传，人员数据结构，见 PersonData 对象 | Object | `{}` |
-| `verify-data` | 可选，计划书限制条件；不传则不执行模块内部的产品逻辑 | Object | `{}` |
-| `is-show-crm-person` | 可选，是否显示修改 CRM 人员信息的按钮 | Boolean | `false` |
-| `params` | 可选，附加信息 | Object | `{}` |
-
+| 参数                 | 说明                                                             | 类型    | 默认值  |
+| -------------------- | ---------------------------------------------------------------- | ------- | ------- |
+| `input-data`         | 必传，计划书初始化数据；不传则不执行模块内部的人员逻辑与产品逻辑 | Object  | `{}`    |
+| `person-data`        | 必传，人员数据结构，见 PersonData 对象                           | Object  | `{}`    |
+| `verify-data`        | 可选，计划书限制条件；不传则不执行模块内部的产品逻辑             | Object  | `{}`    |
+| `is-show-crm-person` | 可选，是否显示修改 CRM 人员信息的按钮                            | Boolean | `false` |
+| `params`             | 可选，附加信息                                                   | Object  | `{}`    |
 
 #### PersonData 对象
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `eleOrderList` | 必传，人员信息的元素数据，见 EleOrderList 数组 | Array | — |
-
+| 参数           | 说明                                           | 类型  | 默认值 |
+| -------------- | ---------------------------------------------- | ----- | ------ |
+| `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 | — |
+| 参数            | 说明                                                                                                           | 类型            | 默认值 |
+| --------------- | -------------------------------------------------------------------------------------------------------------- | --------------- | ------ |
+| `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`（折叠状态）则跳过校验 | — |
+| 方法名     | 说明                                                                                             | 参数 |
+| ---------- | ------------------------------------------------------------------------------------------------ | ---- |
+| `validate` | 表单校验，通过 `$refs` 调用，返回 Promise；若当前人员的 `title` 为 `false`（折叠状态）则跳过校验 | —    |
 
 ---
 
 ### Events
 
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| `change` | 任一元素的值变化时触发 | `Function(personData, eleData)`；`personData` 为 PersonData 对象，`eleData` 为当前变化的元素（EleOrderList 单项） |
-| `clickLabel` | 点击 `cmCommonInput` 元素的标签区域时触发 | `Function(personData, eleData)` |
+| 事件名       | 说明                                      | 回调参数                                                                                                          |
+| ------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `change`     | 任一元素的值变化时触发                    | `Function(personData, eleData)`；`personData` 为 PersonData 对象，`eleData` 为当前变化的元素（EleOrderList 单项） |
+| `clickLabel` | 点击 `cmCommonInput` 元素的标签区域时触发 | `Function(personData, eleData)`                                                                                   |

package/packages/planbook-input/components/footer.less

@@ -0,0 +1,54 @@
+.bxt-input-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  border-top: 1px solid var(--bxt-line-split);
+  background: var(--bxt-bg-minor);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
+
+  & ul {
+    display: flex;
+    padding: 6px 10px;
+
+    & li {
+      flex: 2;
+
+      & .bxt-footer-info {
+        color: var(--bxt-text-primary);
+
+        & .bxt-info-title {
+          margin-top: 2px;
+          font-size: 12px;
+        }
+
+        & .bxt-info-baofei {
+          font-size: 20px;
+          color: var(--bxt-feature-minor);
+
+          & em {
+            font-style: normal;
+            font-size: 12px;
+          }
+        }
+      }
+
+      & .bxt-footer-btn {
+        padding: 10px 12px;
+        background: var(--bxt-primary);
+        border-radius: 6px;
+        color: #fff;
+        font-size: 13px;
+      }
+
+      &:last-child {
+        display: flex;
+        flex: 1;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+  }
+}

package/packages/planbook-input/components/footer.vue

@@ -16,9 +16,11 @@
   </footer>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-import { calcTotalBaof } from 'packages/bxs-utils/index';
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { calcTotalBaof } from 'packages/bxs-utils/index'
+import './footer.less'
+
 @Component({
   name: 'BxtInputFooter',
   components: {}
@@ -27,72 +29,14 @@ export default class BxtInputFooter extends Vue {
   @Prop({
     default: () => ({})
   })
-  inputData: any;
+  inputData: any
 
   // 计算属性
   get totalBaoFei() {
-    return calcTotalBaof(this.inputData.productGroupList);
+    return calcTotalBaof(this.inputData.productGroupList)
   }
   createPlanbook() {
-    this.$emit('createPlanbook');
+    this.$emit('createPlanbook')
   }
 }
 </script>
-<style lang="postcss">
-@import 'base.css';
-@import '../index.css';
-
-.bxt-input-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
-  border-top: 1px solid var(--color-line-split);
-  background: var(--color-bg-minor);
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-  box-sizing: content-box;
-
-  & ul {
-    display: flex;
-    padding: 6px 10px;
-
-    & li {
-      flex: 2;
-
-      & .bxt-footer-info {
-        color: var(--color-text-primary);
-
-        & .bxt-info-title {
-          margin-top: 2px;
-          font-size: 12px;
-        }
-
-        & .bxt-info-baofei {
-          font-size: 20px;
-          color: var(--color-feature-minor);
-
-          & em {
-            font-size: 12px;
-          }
-        }
-      }
-
-      & .bxt-footer-btn {
-        padding: 10px 12px;
-        background: var(--color-primary);
-        border-radius: 6px;
-        color: #fff;
-        font-size: 13px;
-      }
-
-      &:last-child {
-        display: flex;
-        flex: 1;
-        justify-content: flex-end;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>