351 lines
8.4 KiB
JavaScript
351 lines
8.4 KiB
JavaScript
import { ref, computed } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import peach from '@/peach'
|
||
import GoodsApi from '@/peach/api/trade/goods'
|
||
import { SPEC_TYPE, SKU_RULE_CONFIG } from './config'
|
||
|
||
const pickerRef = ref(null)
|
||
|
||
// 多属性商品 sku 列表
|
||
const skus = ref([])
|
||
|
||
// 已选中商品规格的规格属性和值
|
||
const propertyList = ref([])
|
||
|
||
const goodsPropertyList = ref([])
|
||
|
||
const propertyListRef = ref(null)
|
||
|
||
const canEdit = computed(() => peach.$store('trade').canEdit)
|
||
|
||
const formData = ref({
|
||
specType: true,
|
||
specText: SPEC_TYPE[0].label,
|
||
})
|
||
|
||
async function showPropertyList() {
|
||
await getGoodsProperty()
|
||
propertyListRef.value.onOpen()
|
||
}
|
||
|
||
function onRDPickerConfirm(e) {
|
||
formData.value.specType = SPEC_TYPE[e.value[0]].value
|
||
formData.value.specText = SPEC_TYPE[e.value[0]].label
|
||
|
||
// 如果商品规格不一致，则需要重新初始化 sku 列表
|
||
initSku()
|
||
}
|
||
|
||
function pickerProperty() {
|
||
if (canEdit.value) {
|
||
let index = formData.value.specType ? 1 : 0
|
||
|
||
pickerRef.value.onOpen([index])
|
||
}
|
||
}
|
||
|
||
async function onPropertyConfirm(e) {
|
||
await getGoodsProperty()
|
||
}
|
||
|
||
function onConfirm() {
|
||
console.log(skus.value)
|
||
}
|
||
|
||
async function getGoodsProperty() {
|
||
let { data } = await GoodsApi.getHistoryProperty()
|
||
|
||
// 此处处理商品详情情况下，多规格属性
|
||
// 把 propertyList 中 id 相同的属性合并，并去重
|
||
propertyList.value = peach.$store('trade').selectedProperty || []
|
||
|
||
// 根据已经选择数据，设置默认选中
|
||
data.forEach((item) => {
|
||
// 判断属性是否已经选中
|
||
let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id)
|
||
|
||
item.checked = propertyParent ? true : false
|
||
|
||
// 如果属性已经选中，查询子类中是否有选中
|
||
if (item.checked) {
|
||
item.propertyValues.forEach((child) => {
|
||
let childResult = propertyParent?.children.some((schild) => schild === child.id)
|
||
child.checked = childResult ? true : false
|
||
})
|
||
}
|
||
})
|
||
|
||
goodsPropertyList.value = data
|
||
|
||
console.log(goodsPropertyList.value)
|
||
}
|
||
|
||
function changeSubProperty() {
|
||
// 修改子属性状态，需要同步更新 skus 的显示
|
||
console.log(goodsPropertyList.value)
|
||
// 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
|
||
let temp = JSON.parse(JSON.stringify(goodsPropertyList.value.filter((item) => item.checked)))
|
||
temp.forEach((item) => {
|
||
item.propertyValues = item.propertyValues.filter((child) => child.checked)
|
||
})
|
||
|
||
let result = temp.map((item) => {
|
||
return item.propertyValues.map((child) => ({
|
||
propertyId: item.id,
|
||
propertyName: item.name,
|
||
valueId: child.id,
|
||
valueName: child.name,
|
||
}))
|
||
})
|
||
|
||
let tempSkus = []
|
||
|
||
for (let item of reduceArr(result)) {
|
||
let obj = {
|
||
picUrl: '',
|
||
barCode: '',
|
||
price: 0,
|
||
marketPrice: 0,
|
||
costPrice: 0,
|
||
stock: 0,
|
||
weight: 0,
|
||
volume: 0,
|
||
properties: item,
|
||
}
|
||
tempSkus.push(obj)
|
||
}
|
||
|
||
skus.value = tempSkus
|
||
}
|
||
|
||
/**
|
||
* @author Ankkaya
|
||
* @description 新增商品初始化商品 sku
|
||
* @param {Type} -
|
||
* @returns {Type}
|
||
*/
|
||
function initSku() {
|
||
// 单规格
|
||
if (!formData.value.specType) {
|
||
let obj = {
|
||
picUrl: '',
|
||
barCode: '',
|
||
price: 0,
|
||
marketPrice: 0,
|
||
costPrice: 0,
|
||
stock: 0,
|
||
weight: null,
|
||
volume: null,
|
||
properties: [
|
||
{
|
||
propertyId: 0,
|
||
propertyName: '默认',
|
||
valueId: 0,
|
||
valueName: '默认',
|
||
},
|
||
],
|
||
}
|
||
|
||
skus.value = [obj]
|
||
} else {
|
||
// 初始化已选中规格，属性和格式化后的结果
|
||
propertyList.value = []
|
||
goodsPropertyList.value = []
|
||
// 多规格
|
||
skus.value = []
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @author Ankkaya
|
||
* @description 确认属性
|
||
* @param {Type} -
|
||
* @returns {Type}
|
||
*/
|
||
function submitProperty() {
|
||
try {
|
||
validateSku(skus.value)
|
||
peach.$store('trade').$patch({
|
||
skus: skus.value,
|
||
specType: formData.value.specType,
|
||
})
|
||
peach.$router.back()
|
||
} catch (e) {
|
||
console.log(skus.value)
|
||
console.log(e, '校验失败')
|
||
}
|
||
}
|
||
|
||
function validateSku(skus) {
|
||
let warningInfo = '请检查商品各行相关属性配置，'
|
||
let validateStatue = true
|
||
let skusValue = skus ?? peach.$store('trade').skus
|
||
|
||
// 判断如果是多规格，并且 skusValue 为空 []，则提示
|
||
if (formData.value.specType && skusValue.length < 1) {
|
||
uni.showToast({
|
||
title: '请选择商品规格',
|
||
icon: 'none',
|
||
duration: 4000,
|
||
})
|
||
throw new Error('请选择商品规格')
|
||
}
|
||
for (const sku of skusValue) {
|
||
for (const rule of SKU_RULE_CONFIG) {
|
||
const arg = getValue(sku, rule.name)
|
||
if (!rule.rule(arg)) {
|
||
validateStatue = false
|
||
warningInfo += rule.message
|
||
break
|
||
}
|
||
}
|
||
if (!validateStatue) {
|
||
uni.showToast({
|
||
title: warningInfo,
|
||
icon: 'none',
|
||
duration: 4000,
|
||
})
|
||
throw new Error(warningInfo)
|
||
}
|
||
}
|
||
}
|
||
|
||
function getValue(obj, arg) {
|
||
const keys = arg.split('.')
|
||
let value = obj
|
||
for (const key of keys) {
|
||
if (value && typeof value === 'object' && key in value) {
|
||
value = value[key]
|
||
} else {
|
||
value = undefined
|
||
break
|
||
}
|
||
}
|
||
return value
|
||
}
|
||
|
||
function reduceArr(arr) {
|
||
return arr.reduce((acc, cur) => {
|
||
let tempAcc = []
|
||
|
||
if (acc.length < 1) {
|
||
cur.forEach((item, index) => {
|
||
if (tempAcc[index]) {
|
||
tempAcc[index].push(item)
|
||
} else {
|
||
tempAcc[index] = [item]
|
||
}
|
||
})
|
||
} else {
|
||
acc.forEach((item, index) => {
|
||
cur.forEach((sitem, sindex) => {
|
||
tempAcc.push([...item, sitem])
|
||
})
|
||
})
|
||
|
||
if (cur.length < 1) {
|
||
tempAcc = acc
|
||
}
|
||
}
|
||
return tempAcc
|
||
}, [])
|
||
}
|
||
|
||
const specType = computed(() => peach.$store('trade').specType)
|
||
|
||
function initial() {
|
||
onLoad(() => {
|
||
formData.value.specType = specType.value
|
||
formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label
|
||
skus.value = JSON.parse(JSON.stringify(peach.$store('trade').skus))
|
||
// 如果新增商品 sku，并且是单规格，初始化 sku
|
||
|
||
if (!skus.value) {
|
||
initSku()
|
||
}
|
||
if (specType.value) {
|
||
getGoodsProperty()
|
||
}
|
||
})
|
||
}
|
||
|
||
const propertyValueTitle = ref('新增')
|
||
const inputPropertyValueDialogRef = ref()
|
||
const inputPropertyValueFormdata = ref({
|
||
id: '',
|
||
propertyId: '',
|
||
name: '',
|
||
remark: '',
|
||
})
|
||
function addPropertyValueClick(item) {
|
||
console.log(item)
|
||
propertyValueTitle.value = '新增'
|
||
inputPropertyValueFormdata.value.name = ''
|
||
inputPropertyValueFormdata.value.propertyId = item.id
|
||
inputPropertyValueDialogRef.value.open()
|
||
}
|
||
|
||
async function dialogInputPropertyValueConfirm(value) {
|
||
if (!value) {
|
||
peach.$helper.toast('请输入商品属性')
|
||
return
|
||
}
|
||
if (inputPropertyValueFormdata.value.id) {
|
||
await GoodsApi.editPropertyValue(inputPropertyValueFormdata.value)
|
||
} else {
|
||
await GoodsApi.createPropertyValue(inputPropertyValueFormdata.value)
|
||
}
|
||
await getGoodsProperty()
|
||
inputPropertyValueDialogRef.value.close()
|
||
}
|
||
|
||
function longPropertyValuePress(item) {
|
||
console.log(item)
|
||
if (canEdit.value) {
|
||
// 震动提示
|
||
uni.vibrateShort()
|
||
uni.showActionSheet({
|
||
itemList: ['编辑', '删除'],
|
||
success: async (res) => {
|
||
if (res.tapIndex === 0) {
|
||
propertyValueTitle.value = '编辑'
|
||
inputPropertyValueFormdata.value.id = item.id
|
||
inputPropertyValueFormdata.value.propertyId = item.propertyId
|
||
inputPropertyValueFormdata.value.name = item.name
|
||
inputPropertyValueDialogRef.value.open()
|
||
}
|
||
if (res.tapIndex === 1) {
|
||
await GoodsApi.delPropertyValue({ id: item.id })
|
||
await getGoodsProperty()
|
||
}
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
export {
|
||
initial,
|
||
canEdit,
|
||
skus,
|
||
pickerRef,
|
||
pickerProperty,
|
||
validateSku,
|
||
onConfirm,
|
||
submitProperty,
|
||
propertyListRef,
|
||
formData,
|
||
onRDPickerConfirm,
|
||
onPropertyConfirm,
|
||
propertyList,
|
||
showPropertyList,
|
||
goodsPropertyList,
|
||
changeSubProperty,
|
||
getGoodsProperty,
|
||
addPropertyValueClick,
|
||
dialogInputPropertyValueConfirm,
|
||
longPropertyValuePress,
|
||
inputPropertyValueDialogRef,
|
||
inputPropertyValueFormdata,
|
||
propertyValueTitle,
|
||
}
|