bxs-tools-ui 3.3.2 → 3.4.0

package/packages/product-info/readme.md

@@ -9,6 +9,8 @@
 > - `groupKey`：`inputData → productGroupList → key`
 > - `productKey`：`inputData → productGroupList → prodOrderList → key`
 
+**组合险**：子险带 `groupKey` / `groupName`（可选 `isCheckbox`）。组头用 `CommonGroupTitle`（Switch）；UI 状态见 `handler.js`（`Map`：`active` + `selectedIds` + `locked`），**不写入产品数据**；试算只认子险 `title`。有子险 title 锁定勾选时 `locked=true`：组开关开启且不可关，其他子险不可点。展示：**普通险在前**，组合险在后。单险种表单：`components/product-insurance-form`。
+
 ---
 
 ### 模块引用（import）
@@ -40,6 +42,7 @@ export default {
 </template>
 
 <script>
+  import { Toast } from 'vant';
   import { ProductInfo } from 'bxs-tools-ui';
 
   export default {
@@ -48,7 +51,7 @@ export default {
       cgProduct(product, options, inst) {
         if (options.type === 'change' && options.errorMsg) {
           this.$nextTick(() => {
-            this.$toast(options.errorMsg);
+            Toast(options.errorMsg);
           });
         }
       },
@@ -88,7 +91,6 @@ export default {
 | 参数                  | 说明                                                                      | 类型    |
 | --------------------- | ------------------------------------------------------------------------- | ------- |
 | `planbookId`          | 计划书 ID，用于产品联动逻辑                                               | Number  |
-| `publicPbUuid`        | 公开计划书 uuid，传入后使用 public 接口重算                               | String  |
 | `allowCustomResult`   | 是否显示「自定义保费/保额」开关                                           | Boolean |
 | `insuranceSaleStatus` | 险种停售状态映射：`{ [insuranceKey]: number }`；值为 `2` 时展示「停」标签 | Object  |
 
@@ -107,6 +109,9 @@ export default {
 | `eleOrderList` | 必传，险种内元素列表，见 EleOrderList 数组 | Array   |
 | `code`         | 险种 code                                  | String  |
 | `isFollowing`  | 是否去除与上一险种之间的间距               | Boolean |
+| `groupKey`     | 组合险分组 key；有值则为组合子险           | String  |
+| `groupName`    | 组合险组标题                               | String  |
+| `isCheckbox`   | 组合内是否多选；默认单选互斥               | Boolean |
 
 #### EleOrderList 数组（单项）
 

package/packages/share-sheet/constant.js

@@ -1,5 +1,4 @@
-import Jax from '@bxs/jax'
-export const { isIos, isAndroid } = Jax.parseUaString()
+import { isIos } from 'src/js/variables.js'
 const oneDayMillisecond = 24 * 3600 * 1000
 
 export const EXPIRE_ENUM = [

package/src/api/adjust-baoe.js

@@ -1,9 +1,9 @@
 import QS from 'qs'
 import request from './request'
 
-export function validateAdjustBaoe(params, options = {}) {
+export function validateAdjustBaoe(params) {
   return request({
-    url: `/planBook/${options.publicPbUuid ? 'public' : 'V2'}/validateAccount/-1/low`,
+    url: '/planBook/V2/validateAccount/-1/low',
     method: 'post',
     data: QS.stringify({
       jd: JSON.stringify(params)

package/src/api/planbook.js

@@ -1,4 +1,3 @@
-import QS from 'qs'
 import request from './request'
 import { APP_HOSTNAME } from '../js/variables.js'
 
@@ -10,28 +9,13 @@ export function getPlanbookInitData(params) {
   })
 }
 
-export function getPublicPlanbookInitData(params) {
-  return request({
-    url: '/planBook/public/init',
-    method: 'post',
-    data: QS.stringify(params),
-    headers: {
-      Accept: 'application/json, text/plain, */*',
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  })
-}
-
 export function getPlanbookData(params) {
-  if (params && params.publicPbUuid) {
-    return getPublicPlanbookInitData(params)
-  }
   return getPlanbookInitData(params)
 }
 
-export function calcPlanbookProduct(params, options = {}) {
+export function calcPlanbookProduct(params) {
   return request({
-    url: `/planBook/${options.publicPbUuid ? 'public' : 'V2'}/calculate`,
+    url: '/planBook/V2/calculate',
     method: 'post',
     data: params,
     headers: {
@@ -43,9 +27,9 @@ export function calcPlanbookProduct(params, options = {}) {
   })
 }
 
-export function uploadPlanBookResult(params, options = {}) {
+export function uploadPlanBookResult(params) {
   return request({
-    url: `/planBook/${options.publicPbUuid ? 'public/createPb' : 'V2/uploadResult'}`,
+    url: '/planBook/V2/uploadResult',
     method: 'post',
     data: params,
     headers: {

package/src/api/trade.js

@@ -28,6 +28,37 @@ export function getAddress(data, userUuid) {
   })
 }
 
+/**
+ * 职业类别（POST `…/api/product/data/getProfession`）
+ * @param {object} urlParams query 参数，如 `{ userUuid }`
+ * @param {object} postParams body，如 `{ productId, parentId?, searchKey? }`
+ * @param {boolean} [isDev] 可选，覆盖默认环境域名（true → .cn，false → 生产）
+ */
+export function getProfession(urlParams, postParams, isDev) {
+  const host = typeof isDev === 'boolean' ? `https://insurance2a-api.wyins.net${isDev ? '.cn' : ''}` : INSURANCE2A_API_HOSTNAME
+  let url = `${host}/api/product/data/getProfession`
+  if (urlParams && typeof urlParams === 'object') {
+    const query = Object.keys(urlParams)
+      .filter(key => urlParams[key] !== undefined && urlParams[key] !== null)
+      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(urlParams[key])}`)
+      .join('&')
+    if (query) {
+      url += `?${query}`
+    }
+  }
+  return request({
+    url,
+    method: 'post',
+    data: postParams,
+    headers: {
+      Accept: 'application/json, text/plain, */*',
+      'Content-Type': 'application/json'
+    },
+    isIgnoreLoading: false,
+    returnFullResponse: true
+  })
+}
+
 /**
  * 险种保费试算 `/api/product/data/calculate`
  */

package/src/components/common/common-group-title.less

@@ -0,0 +1,54 @@
+.bxt-group-title-wrapper {
+  width: 100%;
+}
+
+.bxt-group-title {
+  position: relative;
+  text-align: left;
+
+  &::before {
+    position: absolute;
+    left: -15px;
+    top: 9px;
+    display: block;
+    width: 4px;
+    height: 15px;
+    content: '';
+    background: var(--bxt-primary);
+  }
+
+  & .bxt-group-title-label {
+    display: flex;
+    align-items: center;
+    padding: 5px 0;
+    line-height: normal;
+    font-size: 17px;
+    font-weight: bold;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    & .bxt-group-title-label-name {
+      flex: 1;
+      min-width: 0;
+
+      & .bxt-group-title-content {
+        display: inline-block;
+        vertical-align: middle;
+        white-space: normal;
+
+        &--disabled {
+          color: var(--bxt-text-assist);
+        }
+      }
+    }
+
+    & .bxt-group-title-label-switch {
+      flex: 0 0 auto;
+      margin-left: 12px;
+
+      & .van-switch--on {
+        background-color: var(--bxt-primary);
+      }
+    }
+  }
+}

package/src/components/common/common-group-title.md

@@ -0,0 +1,34 @@
+# CommonGroupTitle
+
+组合险组标题：在 `common-title` 布局基础上，右侧用 **Switch** 控制组展开/收起（非 Checkbox）。
+
+## 用法
+
+```html
+<CommonGroupTitle
+  v-model="active"
+  :label="groupName"
+  :disabled="disabled"
+  data-stat-id="product_insurance_group_xxx"
+  @change="onGroupActiveChange"
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认 |
+|------|------|------|------|
+| `value` / `v-model` | 是否展开 | Boolean | — |
+| `label` | 组名 | String | `''` |
+| `disabled` | 禁用开关 | Boolean | `null` |
+| `dataStatId` | 声明式埋点 id（挂在 switch 上） | String | `''` |
+| `size` | Switch 尺寸 | String / Number | `24` |
+
+打开态 Switch 使用主题色 `var(--bxt-primary)`（与 `common-title` Checkbox 一致）。
+
+## Events
+
+| 事件 | 说明 | 参数 |
+|------|------|------|
+| `input` | v-model | `boolean` |
+| `change` | 切换后 | `boolean` |

package/src/components/common/common-group-title.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="bxt-group-title-wrapper">
+    <div class="bxt-group-title">
+      <div class="bxt-group-title-label">
+        <div class="bxt-group-title-label-name">
+          <span
+            :class="{
+              'bxt-group-title-content': true,
+              'bxt-group-title-content--disabled': !!disabled && !value
+            }"
+            >{{ label }}</span
+          >
+        </div>
+        <div class="bxt-group-title-label-switch">
+          <van-switch
+            :value="currentValue"
+            :disabled="disabled"
+            :size="size"
+            active-color="var(--bxt-primary)"
+            :data-stat-id="dataStatId"
+            @input="onSwitchInput"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Model, Prop, Watch } from 'vue-property-decorator'
+import './common-group-title.less'
+
+@Component({
+  name: 'BxtGroupTitle'
+})
+export default class BxtGroupTitle extends Vue {
+  currentValue: boolean = false
+
+  @Model('input', {})
+  value!: boolean
+
+  @Prop({ default: '' })
+  label!: string
+
+  @Prop({ default: null })
+  disabled!: boolean
+
+  @Prop({ default: '' })
+  dataStatId!: string
+
+  @Prop({ default: 20 })
+  size!: string | number
+
+  @Watch('value', { immediate: true })
+  watchValue(val: boolean) {
+    this.currentValue = val
+  }
+
+  created() {
+    this.currentValue = this.value
+  }
+
+  onSwitchInput(val: boolean) {
+    if (this.disabled) {
+      return
+    }
+    this.currentValue = val
+    this.$emit('input', val)
+    this.$emit('change', val)
+  }
+}
+</script>

package/src/components/common/common-title.less

@@ -22,6 +22,10 @@
     border-color: var(--bxt-primary);
   }
 
+  & .van-checkbox--disabled .van-checkbox__icon--checked .van-icon {
+    opacity: 0.4;
+  }
+
   & .bxt-item-title-label {
     display: flex;
     padding: 5px 0;

package/src/components/common/common-title.vue

@@ -9,7 +9,7 @@
           <span
             :class="{
               'bxt-titile-content': true,
-              'bxt-titile-content--disabled': !!disabled && !value
+              'bxt-title-content--disabled': !!disabled && !value
             }"
             :style="{
               maxWidth: huomianTag || statusTag ? '78%' : '100%'
@@ -27,7 +27,7 @@
             {{ huomianTag }}
           </span>
         </div>
-        <div v-if="!(currentValue && disabled)" class="bxt-item-title-label-item">
+        <div v-if="alwaysShowCheckbox || !(currentValue && disabled)" class="bxt-item-title-label-item">
           <van-checkbox class="bxt-item-title-checkbox" :value="currentValue" :disabled="disabled" @click.native="onchange" />
         </div>
       </div>
@@ -94,6 +94,12 @@ export default class BxtTitleItem extends Vue {
   })
   dataStatId!: string
 
+  /** 锁定勾选时仍展示 checkbox（组合子险必选） */
+  @Prop({
+    default: false
+  })
+  alwaysShowCheckbox!: boolean
+
   @Watch('value', {
     immediate: true,
     deep: true

package/src/components/profession-list/README.md

@@ -0,0 +1,114 @@
+# ProfessionList（职业类别）
+
+## 说明
+
+保险试算等场景下的职业类别选择 / 查询面板。支持异步接口拉取与本地树形 `columns` 两种数据源，可只读查询或选择后回传。
+
+非目标：不做投保规则引擎；校验由外部传入的 `verifyProfess` 决定。
+
+## 引用
+
+```js
+import ProfessionList from 'src/components/profession-list'
+// 或相对路径
+import ProfessionList from '../../src/components/profession-list'
+```
+
+```html
+<bxt-profession-list
+  v-model="isShowProfession"
+  :async-columns-params="asyncColumnsParams"
+  readonly
+  @select="onSelectProfession"
+/>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| value | 控制面板显隐（`v-model`） | Boolean | `false` |
+| async-columns-params | 异步模式必传；含 `urlParams.userUuid`、`postParams.productId`，可选 `isDev` | Object | - |
+| columns | 同步树形数据 | Array | `[]` |
+| children-key-name | 子集字段名 | String | `'children'` |
+| initial-selection | 同步模式默认选中（`{ code, des, val }`） | Object | `null` |
+| verify-profess | 校验函数，返回 `true` / `false` | Function | `() => true` |
+| readonly | 只读：选中叶子不关闭，仅展示是否符合条件 | Boolean | `false` |
+
+### asyncColumnsParams
+
+| 字段 | 说明 |
+|------|------|
+| urlParams.userUuid | 拼到请求 query |
+| postParams.productId | 请求 body |
+| isDev | 可选，覆盖环境域名（`true` → `.cn`） |
+
+## Events
+
+| 事件 | 说明 | 参数 |
+|------|------|------|
+| input | 显隐变更 | `Boolean` |
+| select | 选中末级职业（搜索符合条件或非只读点选叶子） | 当前职业对象 |
+
+## Slots
+
+无
+
+## Demo
+
+```html
+<template>
+  <div>
+    <button @click="isShow = true">查询职业</button>
+    <bxt-profession-list
+      v-model="isShow"
+      :async-columns-params="asyncColumnsParams"
+      :verify-profess="verifyProfess"
+      @select="onSelect"
+    />
+  </div>
+</template>
+
+<script>
+import ProfessionList from 'src/components/profession-list'
+
+export default {
+  components: { BxtProfessionList: ProfessionList },
+  data() {
+    return {
+      isShow: false,
+      asyncColumnsParams: {
+        urlParams: { userUuid: 'xxx' },
+        postParams: { productId: '102163' },
+        isDev: true
+      }
+    }
+  },
+  methods: {
+    verifyProfess() {
+      return true
+    },
+    onSelect(item) {
+      console.log(item)
+    }
+  }
+}
+</script>
+```
+
+## 依赖
+
+| 依赖 | 说明 |
+|------|------|
+| Vue 2 Options API | 组件实现 |
+| vant ^2 | `Popup` / `Search` / `Icon` / `Empty` / `Toast` |
+| `src/api` → `getProfession` | 异步职业接口 |
+| 原生 App 桥接 | 无（不适用 use-wy-appbridge） |
+
+## 埋点清单
+
+本组件为通用选择面板，**当前无独立埋点**。若业务页需要，请在挂载入口的触发按钮上声明式埋点。
+
+| 事件类型 | 触发位置 | statId | ep | 备注 |
+|----------|----------|--------|----|------|
+| - | - | - | - | 无 programmatic / 声明式埋点 |

package/src/components/profession-list/constant.js

@@ -0,0 +1,4 @@
+/** 职业层级菜单文案 */
+export const PROFESSION_LEVEL_DIGIT = ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级', '九级', '十级']
+
+export const DEFAULT_MENU_LIST = [{ des: '一级' }]

package/src/components/profession-list/handler.js

@@ -0,0 +1,155 @@
+/**
+ * asyncColumnsParams 校验：异步模式下需 productId + userUuid
+ * null/undefined 表示未启用异步；不完整对象不告警（兼容父组件渐进赋值）
+ * @param {object|null|undefined} ov
+ * @returns {boolean}
+ */
+export function asyncColumnsParamsValidator(ov) {
+  if (!ov || typeof ov !== 'object') {
+    return true
+  }
+  const { postParams, urlParams } = ov
+  // 尚未填入请求参数时跳过（避免 init 中间态告警）
+  if (!postParams && !urlParams) {
+    return true
+  }
+  return !!(postParams && postParams.productId && urlParams && urlParams.userUuid)
+}
+
+/**
+ * 是否已带职业类别（含 0 类；无 category 的为中间层级）
+ * @param {object} item
+ * @returns {boolean}
+ */
+export function hasProfessionCategory(item) {
+  return item != null && item.category != null && item.category !== ''
+}
+
+/**
+ * 异步接口数据格式化：补齐 des / val
+ * @param {Array} data
+ * @returns {Array}
+ */
+export function formatColumn(data) {
+  if (!data || data.length === 0) {
+    return []
+  }
+  return data.map(item => {
+    if (hasProfessionCategory(item)) {
+      return { ...item, des: item.name, val: item.category }
+    }
+    return { ...item, des: item.name }
+  })
+}
+
+/**
+ * 沿 parent 链拼出完整路径节点（搜索结果用）
+ * @param {object} item
+ * @param {Array} arr
+ * @returns {Array}
+ */
+export function getAllNames(item, arr) {
+  if (!item.parent) {
+    arr.unshift(item)
+    return arr
+  }
+  arr.unshift(item)
+  return getAllNames(item.parent, arr)
+}
+
+/**
+ * 树转扁平数组（同步搜索用）
+ * @param {Array} list
+ * @param {string} des
+ * @param {Array} params
+ * @param {string} childrenKeyName
+ * @returns {Array}
+ */
+export function treeTranArray(list, des, params, childrenKeyName) {
+  const res = params
+  for (let index = 0; index < list.length; index += 1) {
+    const item = list[index]
+    if (item[childrenKeyName]) {
+      const tempDes = `${des}-${item.des}`
+      treeTranArray(item[childrenKeyName], tempDes, res, childrenKeyName)
+    } else {
+      const tempDes = `${des}-${item.des}`
+      res.push({ ...item, des: tempDes.slice(1) })
+    }
+  }
+  return res
+}
+
+/**
+ * 按 code/des/val 查找职业路径
+ * @returns {{ nodes: Array }|null}
+ */
+export function findProfessionByCode(list, code, des, val, childrenKeyName, params) {
+  for (let index = 0; index < list.length; index += 1) {
+    const item = list[index]
+    let data = JSON.parse(JSON.stringify(params || { nodes: [] }))
+    if (String(item.code) === String(code) && item.des === des && item.val === val) {
+      data.nodes.push(item)
+      return data
+    }
+    if (item[childrenKeyName]) {
+      data.nodes.push(item)
+      const result = findProfessionByCode(item[childrenKeyName], code, des, val, childrenKeyName, data)
+      if (result) {
+        return result
+      }
+    } else {
+      data = null
+    }
+  }
+  return null
+}
+
+/**
+ * 已选文案
+ * @param {Array} selected
+ * @param {boolean} asyncColumns
+ * @returns {string}
+ */
+export function buildSelectedStr(selected, asyncColumns) {
+  if (!selected || !selected.length) {
+    return ''
+  }
+  if (asyncColumns) {
+    return selected.reduce((preVal, currVal, idx) => `${preVal}${currVal.name && idx > 0 ? '-' : ''}${currVal.name || ''}`, '')
+  }
+  return selected.reduce((preVal, currVal, idx) => `${preVal}${currVal.des && idx > 0 ? '-' : ''}${currVal.des || ''}`, '')
+}
+
+/**
+ * 根据已选生成层级菜单
+ * @param {Array} selected
+ * @param {boolean} asyncColumns
+ * @param {number} totalLevels
+ * @param {string[]} digit
+ * @returns {{ menuList: Array, totalLevels: number }}
+ */
+export function buildMenuFromSelected(selected, asyncColumns, totalLevels, digit) {
+  const menuList = JSON.parse(JSON.stringify(selected || []))
+  let nextTotalLevels = totalLevels
+  if (asyncColumns) {
+    if (selected && selected.length) {
+      const lastItem = selected[selected.length - 1]
+      if (!hasProfessionCategory(lastItem)) {
+        menuList.push({
+          des: digit[menuList.length]
+        })
+      }
+    } else {
+      menuList.push({
+        des: digit[menuList.length]
+      })
+    }
+    nextTotalLevels = menuList.length
+  } else if (menuList.length < totalLevels) {
+    menuList.push({
+      des: digit[menuList.length]
+    })
+  }
+  return { menuList, totalLevels: nextTotalLevels }
+}