# 版本要求

sense >= 2.23.7

由于当前sense需要做业务组件和基础组件的拆分，上帝选择器组件已拆分至@xiaoe/basic-goods，最新包版本为@xiaoe/basic-goods@1.2.7

业务侧可以直接接入，只需要改一下godSelector的引入地址即可，不需要做其它的额外改动！！！

# 业务背景

选择器从前端UI到后端数据，都处于不统一，业务侧各自维护状态，极大降低开发效率也影响用户体验

这次该组件目标就是统一前端UI交互以及后端接口，提高开发效率

PRD戳这里 (opens new window)

# Demo

弹窗版

打开/关闭上帝选择器

重置数据

非弹窗版

打开/关闭上帝选择器

# Demo源码

<template>
    <div class="god-selector-demo-wrapper" style="margin-top: 20px;">
        <h1>弹窗版</h1>
        <ss-god-selector
            :scene-id="1"
            title="选择商品"
            v-model="isShowGodSelector"
            :selected-ids="selectedData"
            :max-select-count="5"
            @confirm="handleConfirm"
        ></ss-god-selector>
        <ss-button @click="isShowGodSelector = !isShowGodSelector">打开/关闭上帝选择器</ss-button>
        <ss-button @click="reset">重置数据</ss-button>
        <div class="no-dialog">
            <h1>非弹窗版</h1>
            <ss-god-selector-inner
                :scene-id="1"
                title="选择商品"
                v-if="isShowGodSelector2"
                @tab-change="handleTabChange"
                @selection="handleSelectionChange"
            ></ss-god-selector-inner>
            <ss-button @click="isShowGodSelector2 = !isShowGodSelector2">打开/关闭上帝选择器</ss-button>
        </div>
    </div>
</template>

<script>
import { Button, GodSelector, GodSelectorInner } from '@xiaoe/sense';

export default {
    components: {
        GodSelector,
        Button,
        GodSelectorInner,
    },
    data() {
        return {        
            isShowGodSelector: false,
            isShowGodSelector2: false,
            selectedData: []
        };
    },

    methods: {
        handleConfirm(opts){
            console.log('confirm ', opts)
            Object.values(opts).forEach(item => {
                Array.isArray(item) && item.forEach(listItem => {
                    this.selectedData.push(listItem.resource_id);
                })
            })
        },
        reset(){
            this.selectedData = []
        },
        handleTabChange(tab){
            console.log('tab change', tab)
        },
        handleSelectionChange(selection){
            console.log('selection change', selection)
        }
    },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 文档说明

# 组件参数

组件参数/事件回调	说明	值(默认值)	必填
title	弹窗标题	String	false
value: v-model绑定	弹窗显隐	Boolean	false
sceneId	场景id，前端通过这个id去获取配置。业务侧自行找基础二组配置	Number	true
rowKey	数据key,不是resource_id必传，用于判断数据的选中状态	String(`resource_id`)	true
selectedIds	不可选数据	String []	false
disabledIds	不可选数据	String []	false
defaultSelectedData	当前选中数据	Object []	false
selectedSku	当前选中的sku数据	Object []	false
disabledSku	禁选sku数据列表	String []	false
requestUrl	自定义请求地址	String	false
pageSizeOptions	自定义分页器页码（需升级到basic-goods 1.2.7）	Array	[10, 20, 50]
dataNeedHandler	确认事件回调返回数据是否需要处理	Boolean(`false`)	false
destroyOnClose	是否给dialog组件添加destroyOnClose属性	Boolean(`false`)	false
unSelectedCountText	未选中数据时点确认按钮的提示文案	String(`请选择商品`)	false
maxSelectText	最大可选择数量的文案，业务侧自行传入(`{t}`必须有)	String(`最多可选择{t}个商品`)	false
disabledReason	业务侧数据被选中时的前端展示文案,业务侧自行传入	String(`该数据已被选择`)	false
extraParams	getList接口透传参数	Object	false
@confirm	确认事件回调	Function`(allSelected, sku) => {}`	-
@cancel	取消事件回调（遮罩框点击，dialog右上关闭ICON点击，取消按钮点击）	Function`() => {}`	-
@tab-change（GodSelectorInner回调）	切换类目事件回调	Function	-
@selection （GodSelectorInner回调）	选中/取消选中事件回调	Function	-

# 后端可配置项

- 最大可选择数: max_choices
- 每页数据展示条数: scene_page_size
- 类目
    - 单选/多选: selection_type
    - 创建url: create_url
    - 表格列配置: object_columns
        - field: 对应列内容的字段名
        - title: 显示的标题
        - options: 对应列内容的字段值的文字映射。例如字段名为`resource_type`, `options`传入`[{value: 1, label: '图文'}]`,此时表格展示为`图文`
        - label: 'img'渲染成img标签,默认为'str'
    - sku单选/多选: sku_selection_type
- 上下架状态选择框是否展示以及展示那些选择条目: scene_sale_status

1
2
3
4
5
6
7
8
9
10
11
12

# 问题说明

如果遇到上更新sense3.0后，帝选择器分页器有100的情况，请升级basic-goods到1.2.7，里面内置了pageSizeOptions参数，可用于自定义，但是每页不能大于50条，因为后端接口不支持。

# selectedIds & defaultSelectedData && disabledIds

selectedIds：主要是指当前场景下的业务侧数据。由于业务侧返回数据未过滤掉已在该场景下的数据。所以会导致应该过滤掉的数据仍然在选择器接口内返回，所以前端需要通过此字段把数据做成不可选中状态。但是这个字段会占用最大可选择数量

disabledIds：业务侧可能有各种原因，有些数据需要禁止选中。此时禁选的数据不会占用最大可选择数量。

defaultSelectedData：当前选中的所有业务侧数据，未保存时前端页面交互用。

defaultSelectedData对传进来的数据有以下要求：

格式可以为object和array
场景包含分销商品：请保证传入数据的有这个字段type: Number，因为有些场景下，分销的数据resource_type为分销内容的resource_type，此时前端无法判断需要type来判断。
场景不包含分销：可以没有type字段，有type字段的话，就要和上面一样。没有type就必须有resource_type字段。

/**
    @desc 传入数据例子 
*/

// 传入resource_id []
selectedIds: [
    's_628617c34d74e_PZpKWV4j96', 
    'i_628ca58be4b0dce31cc4309c'
];

// 传入resource_id []
disabledIds: [
    "g_6284ba6374ee3_SrYaX9hk46",
    "g_627d150ba15f3_KFnp05B472",
]

// 回传数据必须要有以下字段
defaultSelectedData: [
    {
        resource_id: 'i_628ca58be4b0dce31cc4309c',
        resource_type: 1,
        type: 1, // 分销用这个
    },
]

// 回传数据必须要有以下字段
selectedSku: [
    {
        resource_id: "g_626a60f3985e3_n3lSTPfc84",
        sku_id: "SKU_ENT_1651138803kfIhN9fTbY"
    },
    {
        resource_id: "s_628617c34d74e_PZpKWV4j96",
        sku_id: "SKU_SVP_6529550760058u9RBg14"
    }
]

// 可传：id数组 或者sku数组。混传也可以但最好保持一致
disabledSku: [
    'SKU_ENT_1651138803kfIhN9fTbY',
    'SKU_SVP_6529550760058u9RBg14',
    {
        resource_id: "g_626a60f3985e3_n3lSTPfc84",
        sku_id: "SKU_ENT_1651138803kfIhN9fTbY"
    },
    {
        resource_id: "s_628617c34d74e_PZpKWV4j96",
        sku_id: "SKU_SVP_6529550760058u9RBg14"
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# confirm回调

现在confirm回调会返回两个参数，第一个是选中的数据，第二个是选中的规格

// 传入参数dataNeedHandler: false 或者不传该参数 默认当前返回以类目type为key的对象集合：
{
    '1': [], // 选中的图文数据
    '2': [], // 选中的音频数据
}
// 传入参数dataNeedHandler: true, 数组返回全部数据
[
    // 按选中顺序返回全部数据
]


// sku
[
    {
        // sku数据
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 获取O端配置接口参数说明

is_shop_group: 0, // 是否走商品分组 后端需要的参数，列表接口原样传参即可
list: [
    {
        id: 2, // 后端自增id
        object_type: 2, // 资源type
        object_topic: 1, // 所属场景
        object_label: "audio", // 资源label
        object_name: "音频", // 资源名称
        object_columns: [
            { 
                field: "title", // 列取的数据属性
                title: "名称", // 列标题名称
                label: 'img', //是否渲染为img标签
                // 表格列value值的文字映射， 格式如下：
                options: [
                    {
                        label: '上架',
                        value: 1,
                    },
                    {
                        label: '下架',
                        value: 0,
                    },
                ],
            }
        ], // 列配置
        object_body: {
            is_return_deleted: 0,
            is_return_display: 1,
            sale_status: 1,
            sort: "id,desc"
        }, // B端后台服务请求用，后端传啥前端请求时传啥
        selection_type: 0, // 是否多选， 0多选，1单选
        create_url: "", // 新建类目路由，无路由且前端无兜底时不展示新建按钮
    },
],
max_choices: 1, // 为0不限制选择数量
scene_page_size: 10, // 每页条数
scene_sale_status: [], // 上下架状态
special_logical_url: '' // 后端特殊逻辑url，前端不管。给啥传啥

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 问题列表

# 选择器内Table无法正常渲染表格数据

问题描述：后端返回正常，前端传值正常，无报错信息，表格内数据无法渲染。

原因：table组件内，table-header,table-body无法响应式获取到table内store的columns数据。参考Element Issue[Bug Report] 二次封装的Table无法正常渲染表格数据 (opens new window)。但是这边推测可能是由于业务侧vue版本和sense内vue版本不一致导致的

解决方案：上面Issue内的解决方法不正确，因为sense打包已经配置了externals却仍然有此类问题。目前解决方案为锁定业务侧工程vue版本为2.6.12。

← drawer 抽屉数据埋点 →