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>
|