c6d08a863b
【主 题】： 【描 述】： [原因]： [过程]： [影响]： 【结 束】 # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<el-transfer :titles="['SKU列表', tit]" :filter-method="filterMethod" filterable filter-placeholder="输入编号或名称搜索"
|
|
v-model="value" :data="skuListArr">
|
|
</el-transfer>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'skuTransfer',
|
|
props: {
|
|
tit: String,
|
|
val: Array,
|
|
shop_id: String
|
|
},
|
|
data () {
|
|
return {
|
|
value: this.val
|
|
}
|
|
},
|
|
computed: {
|
|
// 获取商品sku列表
|
|
skuList () {
|
|
return this.$store.state.skuList.filter(item => item.shop_id === this.shop_id)
|
|
},
|
|
// 格式化sku列表
|
|
skuListArr () {
|
|
if (this.skuList.length > 0) {
|
|
const list = this.skuList.map(item => {
|
|
const key = parseInt(item.id) // 将id转换为整数
|
|
const label = `${item.sku_number} - ${item.name}`
|
|
return { key, label }
|
|
})
|
|
return list
|
|
} else {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.updateValue(val)
|
|
},
|
|
// 监听父级 "所属商铺"控件 更新时清除sku穿梭框已选值
|
|
shop_id () {
|
|
this.value = []
|
|
}
|
|
},
|
|
created () {
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: 穿梭框 条件搜索
|
|
* @param {*} query 搜索关键字
|
|
* @param {*} item 穿梭框 遍历数据
|
|
*/
|
|
filterMethod (query, item) {
|
|
return item.label.indexOf(query) > -1
|
|
},
|
|
/**
|
|
* @description:发送 input 事件给父级 父级通过input事件来接收value值
|
|
*/
|
|
updateValue (value) {
|
|
this.$emit('input', value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|