快速上手

安装

npm i --save yx-components-vue2

完成引入

import Vue from 'vue';
import yxComponentsVue2 from 'yx-components-vue2'
import 'yx-components-vue2/dist/yx-components-vue2.css'
Vue.use(yxComponentsVue2)

公共配置

type

| 类型（type） | 说明 | | :-------- | ------ | | dd | 抖店 | | ks | 快手 | | jd | 京东 | | sph | 视频号 | | pdd | 拼多多 | | xhs | 小红书 |

module

const module = {
  0: '批量修改价格', // 表格导入
  1: '批量修改标题',
  2: '批量修改库存', // 表格导入
  3: '批量修改发货方式',
  4: '批量修改上下架',
  5: '批量修改运费模板',
  6: '批量修改短标题',
  7: '批量修改详情图',
  8: '批量修改品牌',
  9: '批量修改商品属性', // 只支持范围修改
 10: '批量修改跨类目商品属性',
 11: '批量修改货号', // 表格导入
 12: '批量定时上下架',
 13: '批量删除商品',
 14: '批量修改主图',
 15: '批量修改3:4导购图',
 16: '批量修改尺码表',
 17: '批量修改库存计件',
 18: '批量修改测评短视频',
 19: '批量修改sku编码', // 表格导入
 20: '批量修改商品限购',
 21: '批量修改7天无理由退换货',
 22: '批量修改同店商品推荐',
 23: '批量修改三包服务承诺',
}

搜索组件

<template>
  <y-search />
</template>

props

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ----------------------------------- | ---------------- | ------ | | type | 搬家平台类型(详情点击查看) | String | dd | | options | 详情点击查看 | Object | - | | labelWidth | label 的宽度 | String | String | 96px | | wrapperWidth | 右边表单的宽度 | String | Number | 230px | | limit | 最多展示几行 后显示展开更多 | String | Number | 2 | | defaultIsUnfolded | 是否默认收起 | Boolean | false |

options props

/*
  商品分类：category
  商品id：product_ids
  标题：title
  状态：status
  创建时间：create_time
  发货模式：presell_type
  商品货号：item_no
  价格范围：price
  库存范围：stock
  运费模板：freight_id
*/
type searchOptions = {
  // 非 select 可不传 list 跟 listFields 字段
  // 不传或者传false等其他空值都是不显示
  category: boolean | [{
    type?: string, // 表单的类型 例如：input select ... 默认都是有的请查看原型文档
    data?: object, // 表单的数据 用的是ant-design-vue的组件 除category除外 详情请看组件库的文档
		hidden?: boolean, // 是否隐藏这个选项 默认是 根据你传过来的type字段控制 tips：如果隐藏了后续不会返回改字段
    width?: string|number, // 某些特定的场景才有用 一般不用设置 如商品标题/状态等
    label?: string, // 默认label是写死的 具体请查看下产品原型 如果是有多个数组的情况取第一个label的值
    fields?: string, // 后端提供的字段名 默认是 上面的字段 例如：category_begin category_end
    list?: any[], // 如果有下拉列表这个字段必填 例如：[{ name: xxx, value: xxx }] 有些表单没有 例如：category
    listFields?: { // 用于控制下拉列表展示字段 有些表单没有 例如：category
      value?: string,
      name?: string,
      children?: children, // 用于级联属性 普通select可不传
    },
    sort?: number, // 默认原型的顺序 数字越小 排名越前
    placeholder?: string, // 为空显示的占位符 例如：请选择xxx
  }]
}

分页组件

<template>
  <y-pagination />
</template>

props

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ---------------------- | -------------- | ------------------------------------------ | | page | 分页信息 | Object | { currentPage: 1, pageSize: 10, total: 0 } | | pageSize | 指定每页可以显示多少条 | String[] | ['10', '20', '50', '100', '200'] | | disabled | 禁用分页 | Boolean | false | | showSizeChanger | 是否可以改变 pageSize | Boolean | true | | showQuickJumper | 是否可以快速跳转至某页 | Boolean | true | | total | 数据总数 | Number|String | 0 |

选择商品弹窗组件

<template>
	<y-batch-modify-header />
</template>

props

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | ------------------------------------------------------ | -------------------------------------- | ---------------------------------------------------- | | v-model(visible) | 弹窗显示隐藏 | Boolean | false | | searchType | 搬家平台类型(详情点击查看) | String | Dd | | searchConfig | 搜索组件模块相关配置 详情点击查看 | Object | - | | rowKey | 表格每一项的唯一标识 | String | Id | | columns | 表格的columns配置 详情请看 ant-design-vue 1.7.8 的官网 | Array | [] | | goodsInfoFields | 商品信息字段 | Object | { image: 'image', title: 'title', status: 'status' } | | dataSource | 表格数据来源 | Function({page: 0, pageSize: 10, ...}) | - |

批量修改-头部组件

<template>
	<y-batch-modify-header />
</template>

props

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ------------------------------------------------------------ | -------------- | ---------------------------------------------------- | | type | 搬家平台类型(详情点击查看) | String | dd | | Module | 搬家平台类型(详情点击查看) | Number|String | 0 | | loading | 同步商品 loading | Boolean | false | | message | 同步商品的message提示 | String | 在操作前请先同步后台商品，确保商品更新至最新后再操作 | | searchConfig | 搜索组件模块相关配置 详情点击查看 | Object | - | | selectProductsConfig | 选择商品模块的相关参数 详情点击查看 | Object | - |

批量修改-内容组件

<template>
	<y-batch-modify-content />
</template>

props

| 参数 | 说明 | 类型 | 默认值 | | ------------------- | ------------------------------------------------------- | -------------- | ------ | | type | 搬家平台类型(详情点击查看) | String | dd | | Module | 搬家平台类型(详情点击查看) | Number|String | 0 | | modifyContentConfig | 传给模块的props 是情况而定 | Object | - | | modifyTableConfig | 修改表格模块相关配置 详情点击查看 | Object | - | | tableImportConfig | 表格导入模块相关配置 详情点击查看 | Object | - | | totalGoodsNum | 总共多少商品数量 | String|Number | 0 | | removeTotalGoodsNum | 移除多少商品数量 | String|Number | 0 | | batchRemoveConfig | 批量移除的相关配置 详情点击查看 | Object | - | | isShowPreview | 是否显示效果预览 | Boolean | false |

modify table props

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ------------------------ | ------- | ---------------------------------------------------------- | | tableData | 表格数据 | Array | [] | | extendsFields | 扩展字段 一般用于sku展示 | String | childrens | | tableColumns | 表格的columns | Array | [] | | tableInnerColumns | 扩展表格的columns | Array | [] | | goodsInfoFields | 商品信息字段 | Object | { image: 'image', title: 'title', productId: 'productId' } | | isNeedModifyPrefix | 是否需要修改前的内容 | Boolean | true | | tableLoading | 表格 loading | Boolean | false | | tableExtendsY | 表格的最大高度 | Number | 320 |

table import props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------- | -------------- | --------------- | | fileType | 文件类型 | Array | ['xls', 'xlsx'] | | submitModify | 提交修改（可用于自定义处理提交前的流程） | Function(File) | - |

batch remove props

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | -------------------------------------------------- | -------------------------------------- | -------------------------------------------------- | | v-model(visible) | 弹窗显示隐藏 | Boolean | false | | searchConfig | 搜索组件模块相关配置 详情点击查看 | Object | - | | dataSource | 表格数据来源 | Function({page: 0, pageSize: 10, ...}) | - | | rowKey | 表格每一项的唯一标识 | String | Id | | removeData | 移除的数据 | Array | [] | | goodsInfoFields | 商品信息字段 | Object | { image: 'image', title: 'title', price: 'price' } |