完善sku
This commit is contained in:
wangxiaowei
@ -1,307 +1,371 @@
|
||||
<template>
|
||||
<el-form>
|
||||
<el-form-item label="销售属性" name="skuAttributes">
|
||||
<div class="mb-[10px] bg-[#fafafa] p-[8px] max-w-[1000px]" v-for="(item, index) in skuAttributes">
|
||||
<div class="flex items-center relative">
|
||||
<!-- <a-popconfirm title="确定删除吗?" @confirm="deleteSkuAttr(index)" placement="right">
|
||||
<a-button class="absolute top-[5px] right-[5px]" type="text">删除</a-button>
|
||||
</a-popconfirm> -->
|
||||
<div class="absolute top-[5px] right-[5px]" @confirm="deleteSkuAttr(index)">删除</div>
|
||||
<div class="w-[60px] text-right">属性名称:</div>
|
||||
<el-input class="ml-5 w-[130px]" v-model="item.title" placeholder="请输入属性名称"></el-input>
|
||||
</div>
|
||||
<div class="flex items-start mt-[10px] overflow-x-auto">
|
||||
<div class="w-[60px] text-right leading-[32px]">属性值:</div>
|
||||
<div class="ml-5 relative sku_item" v-for="(text, cindex) in item.values">
|
||||
<!-- <DeleteIcon class="sku_item_delete absolute top-[-4px] right-[4px] z-50"
|
||||
@click="deleteSkuAttrName(index, cindex)"></DeleteIcon> -->
|
||||
<el-icon class="sku_item_delete absolute top-[-4px] right-[4px] z-50" color="red"
|
||||
@click="deleteSkuAttrName(index, cindex)">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<div class="flex flex-col items-center mr-[10px]">
|
||||
<el-input placeholder="请输入属性值" class="w-[130px]" v-model="text.attributeValue"></el-input>
|
||||
<div v-if="item.isAddImage"
|
||||
class="relative w-[100px] h-[100px] border-solid border-[#eee] border-[1px] mt-[10px] cursor-pointer flex justify-center items-center bg-white"
|
||||
@click="addSkuAttrImage(index, cindex)">
|
||||
<img v-if="text.thumbnailUrl" class="w-[100%] h-[100%]" :src="text.thumbnailUrl" />
|
||||
<!-- <svgIcon v-else class="w-[40px] h-[40px]" name="add" color="#eee"></svgIcon> -->
|
||||
<el-icon v-else class="w-[40px] h-[40px]" name="add" color="#eee">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<div class="ml-[80px] pr-8">
|
||||
<div class="flex m-4">
|
||||
<!-- :disabled="specItem.length >= 3" -->
|
||||
<el-button type="primary" @click="addSpecItem">添加规格项</el-button>
|
||||
<!-- <div class="ml-4 form-tips">最多支持3个规格项</div> -->
|
||||
</div>
|
||||
|
||||
<template v-for="(item, index) in specItem" :key="index">
|
||||
<del-wrap @close="handleDelSpecItem(index)">
|
||||
<div class="flex p-[16px] ml-4 mt-[16px] spec-item">
|
||||
<div class="flex-none mr-[10px]">
|
||||
<div class="mt-2">规格名</div>
|
||||
<div class="mt-6">规格值</div>
|
||||
</div>
|
||||
<div class="spec-item__content">
|
||||
<div>
|
||||
<el-input v-model="item.name" style="width: 240px" maxlength="20" show-word-limit>
|
||||
</el-input>
|
||||
<!-- <el-checkbox class="ml-4" :false-label="0" :true-label="1" v-model="item.has_image"
|
||||
@change="addImage(index, $event)">
|
||||
规格图片
|
||||
</el-checkbox> -->
|
||||
</div>
|
||||
<div class="flex flex-wrap col-top">
|
||||
<div class="mt-4 mr-4" v-for="(subItem, subIndex) in item.value" :key="subIndex">
|
||||
<del-wrap @close="removeSpecValue(index, subIndex)">
|
||||
<el-input class="w-40" v-model="subItem.value" maxlength="20" show-word-limit
|
||||
@blur="checkValue(index, subIndex)"></el-input>
|
||||
</del-wrap>
|
||||
<div v-if="item.has_image">
|
||||
<material-picker class="mt-4" :limit="1" size="60px" v-model="subItem.image">
|
||||
</material-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<el-button @click="addSpecValue(index)">+ 添加规格值</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button :disabled="item.values.length >= 3" type="text" @click="addSkuAttrName(index)">
|
||||
增加字段
|
||||
</el-button>
|
||||
<!-- <el-button class="ml-[10px]" v-if="isAddImg" @click="toggleSkuImg(index)">上传图片</el-button>
|
||||
<el-button class="ml-[10px]" v-if="item.isAddImage" @click="toggleSkuImg(index)">
|
||||
取消上传
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="addSkuAttr">增加销售属性</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="销售规格" name="stockKeepUnits">
|
||||
<el-table :data="stockKeepUnits" class="mt-[10px] max-w-[1000px] w-auto" border>
|
||||
<!-- 销售规格 -->
|
||||
<el-table-column prop="attributeValue" label="销售规格">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.attributeValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 售价 -->
|
||||
<el-table-column prop="price" label="*售价">
|
||||
<template #default="{ row }">
|
||||
<el-input class="w-[80px]" v-model="row.price" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 市场价 -->
|
||||
<el-table-column prop="marketPrice" label="*市场价">
|
||||
<template #default="{ row }">
|
||||
<el-input class="w-[80px]" v-model="row.marketPrice" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 库存 -->
|
||||
<el-table-column prop="stock" label="*库存">
|
||||
<template #default="{ row }">
|
||||
<el-input class="w-[80px]" v-model="row.stock" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-table class="mt-[10px] max-w-[1000px] w-auto" bordered :data="stockKeepUnits">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<div v-if="column.dataIndex === 'attributeValue'">
|
||||
<span>{{ record.attributeValue }}</span>
|
||||
</div>
|
||||
<div v-else-if="column.dataIndex === 'thumbnailUrl'">
|
||||
<img v-if="record.thumbnailUrl" class="w-[90px] h-[90px]" :src="record.thumbnailUrl" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-input class="w-[80px]" v-model:value="record[column.dataIndex]"></el-input>
|
||||
</del-wrap>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<el-form-item label="规格明细" class="mt-8">
|
||||
<div class="flex pl-[10px] mb-4">
|
||||
<popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'price')">
|
||||
<el-button :disabled="disabledBatchBtn">设置价格</el-button>
|
||||
</popover-input>
|
||||
<!-- <popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'line_price')">
|
||||
<el-button :disabled="disabledBatchBtn">设置划线价</el-button>
|
||||
</popover-input> -->
|
||||
<popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'cost_price')">
|
||||
<el-button :disabled="disabledBatchBtn">设置成本价</el-button>
|
||||
</popover-input>
|
||||
<popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'stock')">
|
||||
<el-button :disabled="disabledBatchBtn">设置库存</el-button>
|
||||
</popover-input>
|
||||
<!-- <popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'volume')">
|
||||
<el-button :disabled="disabledBatchBtn">设置体积</el-button>
|
||||
</popover-input>
|
||||
<popover-input class="mr-2" :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'weight')">
|
||||
<el-button :disabled="disabledBatchBtn">设置重量</el-button>
|
||||
</popover-input>
|
||||
<popover-input :disabled="disabledBatchBtn" @confirm="batchSetting($event, 'code')">
|
||||
<el-button :disabled="disabledBatchBtn">设置条码</el-button>
|
||||
</popover-input> -->
|
||||
</div>
|
||||
|
||||
<el-table class="pl-[10px]" :data="specParams.tableData" max-height="600" :row-height="75" tooltip-effect="dark"
|
||||
:border="false" big-data-checkbox @selection-change="selectDataChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column v-for="(item, index) in specItem" :key="index" :label="item.name" min-width="100"
|
||||
:show-overflow-tooltip="true">
|
||||
<template #default="{ row }">
|
||||
{{ row.sku_value_arr[index] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="规格图片" min-width="90">
|
||||
<template #default="{ row, $index }">
|
||||
<del-wrap @close="removeSpecImage($index)" v-if="row.image">
|
||||
<el-image style="width: 50px; height: 50px" :src="row.image" @click="addSpecImage($index)">
|
||||
</el-image>
|
||||
</del-wrap>
|
||||
<div class="flex items-center justify-center spec-image" @click="addSpecImage($index)" v-else>
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-table-column> -->
|
||||
<el-table-column min-width="100">
|
||||
<template #header>
|
||||
<span class="require-text">*</span> 价格
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.price"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column min-width="100">
|
||||
<template #header> 划线价 </template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.line_price"></el-input>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="成本价" min-width="100">
|
||||
<template #header>
|
||||
<span class="require-text">*</span> 成本价
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.cost_price"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100">
|
||||
<template #header>
|
||||
<span class="require-text">*</span> 库存
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.stock"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column min-width="100">
|
||||
<template #header> 体积 </template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.volume"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="重量" min-width="100">
|
||||
<template #header> 重量 </template>
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.weight"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="条码" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-input class="spec-input" type="number" v-model="row.code"></el-input>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<material-picker ref="materialRef" :hiddenUpload="true" @change="changeSpecImage" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, type Ref, computed } from 'vue'
|
||||
import type { skuType, skuAttrItemType } from './type.d'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
import { deepClone } from '@yipai-front-end/lib'
|
||||
import { ElMessage } from 'element-plus'
|
||||
<script lang="ts" setup>
|
||||
import feedback from "@/utils/feedback";
|
||||
import { flatten } from "@/utils/util";
|
||||
import type { SkuItemList, SkuNameList } from "@/api/goods"
|
||||
|
||||
const skuAttributes: Ref<skuAttrItemType[]> = ref([])
|
||||
const stockKeepUnits: Ref<skuType[]> = ref([])
|
||||
let afterSku: skuType[] = []
|
||||
|
||||
const emit = defineEmits(['update:attribute'])
|
||||
|
||||
|
||||
const skuAttrItem: skuAttrItemType = {
|
||||
title: '',
|
||||
isAddImage: false,
|
||||
values: [{ thumbnailUrl: '', attributeValue: '' }],
|
||||
}
|
||||
|
||||
const columns = [
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: any;
|
||||
}>(),
|
||||
{
|
||||
dataIndex: 'attributeValue',
|
||||
title: '销售规格',
|
||||
},
|
||||
{
|
||||
dataIndex: 'thumbnailUrl',
|
||||
title: '图片',
|
||||
},
|
||||
{
|
||||
dataIndex: 'price',
|
||||
title: '*售价',
|
||||
},
|
||||
{
|
||||
dataIndex: 'marketPrice',
|
||||
title: '*市场价',
|
||||
},
|
||||
{
|
||||
dataIndex: 'stock',
|
||||
title: '*库存',
|
||||
},
|
||||
{
|
||||
dataIndex: 'specificationBarCode',
|
||||
title: '商品条码',
|
||||
},
|
||||
]
|
||||
modelValue: {},
|
||||
}
|
||||
);
|
||||
|
||||
// 是否可以增加图片
|
||||
const isAddImg = computed(() => {
|
||||
return skuAttributes.value.findIndex((e) => e.isAddImage == true) == -1 ? true : false
|
||||
})
|
||||
const materialRef = shallowRef();
|
||||
const specParams = reactive<any>({
|
||||
tableData: [],
|
||||
selectData: [],
|
||||
tableDataIndex: 0 as number,
|
||||
});
|
||||
|
||||
// 监听sku本身的变化,并将当前sku进行备份
|
||||
watch(
|
||||
() => stockKeepUnits.value,
|
||||
(value) => {
|
||||
afterSku = deepClone(value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
const disabledBatchBtn = computed(() => !specParams.selectData.length);
|
||||
|
||||
// 监听销售属性的变化,并构建sku
|
||||
watch(
|
||||
() => skuAttributes.value,
|
||||
(value) => {
|
||||
if (value.length) {
|
||||
generateSku(deepClone(value))
|
||||
const specItem = computed(() => props.modelValue.sku_name_list || []);
|
||||
const specSubItem = computed(() => props.modelValue.sku_list || []);
|
||||
|
||||
// 新增规格项
|
||||
const addSpecItem = () => {
|
||||
const len = props.modelValue.sku_name_list.length;
|
||||
// if (len >= 3) return feedback.msgError("最多添加3个规格项");
|
||||
props.modelValue.sku_name_list.push({
|
||||
has_image: 0,
|
||||
id: "",
|
||||
name: "",
|
||||
value: [
|
||||
{
|
||||
value: "",
|
||||
image: "",
|
||||
},
|
||||
],
|
||||
spec_id: 0
|
||||
});
|
||||
};
|
||||
|
||||
// 删除规格项
|
||||
const handleDelSpecItem = (index: number) => {
|
||||
const len = props.modelValue.sku_name_list.length;
|
||||
if (len <= 1) return feedback.msgError("至少一个规格项");
|
||||
props.modelValue.sku_name_list.splice(index, 1);
|
||||
};
|
||||
|
||||
// 新增规格值
|
||||
const addSpecValue = (index: number) => {
|
||||
props.modelValue.sku_name_list[index].value.push({
|
||||
// id: "",
|
||||
value: "",
|
||||
image: "",
|
||||
});
|
||||
};
|
||||
|
||||
// 删除规格值
|
||||
const removeSpecValue = (index: number, subIndex: number) => {
|
||||
props.modelValue.sku_name_list[index].value.splice(subIndex, 1);
|
||||
};
|
||||
|
||||
const addImage = (i: number, v: any) => {
|
||||
const skuItem: SkuNameList[] = props.modelValue.sku_name_list;
|
||||
const skuSubItem: SkuItemList[] = props.modelValue.sku_list;
|
||||
skuItem.forEach((item, index: number) => {
|
||||
item.has_image = 0;
|
||||
if (i == index) {
|
||||
item.has_image = v;
|
||||
}
|
||||
});
|
||||
skuSubItem.forEach(sitem => {
|
||||
sitem.image = "";
|
||||
});
|
||||
specParams.tableData.forEach((item: { image: string; }) => {
|
||||
item.image = "";
|
||||
});
|
||||
};
|
||||
|
||||
// 娇艳规格值
|
||||
const checkValue = (index: number, subIndex: number) => {
|
||||
const skuItem = props.modelValue?.sku_name_list[index];
|
||||
const value = skuItem?.value[subIndex].value;
|
||||
const res = skuItem?.value.filter(
|
||||
(item: { value: string }) =>
|
||||
item.value == value && value != "" && value.length != 0
|
||||
);
|
||||
const lessTops = res.length >= 2;
|
||||
if (lessTops) {
|
||||
feedback.msgWarning("已存在相同规格值");
|
||||
skuItem.value[subIndex].value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const selectDataChange = (value: SkuItemList[]) => {
|
||||
specParams.selectData = value.map(item => item.ids);
|
||||
};
|
||||
|
||||
const batchSetting = (value: string, fields: string | never) => {
|
||||
specParams.tableData.forEach((item: { [x: string]: string; ids: any; }) => {
|
||||
if (specParams.selectData.includes(item.ids)) {
|
||||
item[fields] != undefined && (item[fields] = value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//设置字段名称
|
||||
const setFields = (prev: any, next: any) => {
|
||||
let valueArr = [prev, next]
|
||||
valueArr = valueArr.filter(item => item.value !== undefined)
|
||||
const ids = flatten(valueArr.map(item => item.ids)).join()
|
||||
const value = flatten(valueArr.map(item => item.value))
|
||||
return {
|
||||
id: prev.id ? prev.id : '',
|
||||
ids: ids,
|
||||
value,
|
||||
sku_value_arr: value,
|
||||
// image: prev.image ? prev.image : next.image,
|
||||
price: prev.price ? prev.price : '',
|
||||
// line_price: prev.line_price ? prev.line_price : '',
|
||||
cost_price: prev.cost_price ? prev.cost_price : '',
|
||||
stock: prev.stock ? prev.stock : '',
|
||||
// volume: prev.volume ? prev.volume : '',
|
||||
// weight: prev.weight ? prev.weight : '',
|
||||
// code: prev.code ? prev.code : ''
|
||||
spec_value_ids: prev.spec_value_ids ? prev.spec_value_ids : 0,
|
||||
item_id: prev.item_id ? prev.item_id : '',
|
||||
}
|
||||
};
|
||||
|
||||
// 通过规格项和规格值得到一个表格data
|
||||
const getTableData = (arr: any[]) => {
|
||||
arr = JSON.parse(JSON.stringify(arr))
|
||||
return arr.reduce(
|
||||
(prev, next) => {
|
||||
const newArr = []
|
||||
for (let i = 0; i < prev.length; i++) {
|
||||
if (!next.length) {
|
||||
newArr.push(setFields(prev[i], {}))
|
||||
}
|
||||
for (let j = 0; j < next.length; j++) {
|
||||
next[j].ids = j
|
||||
newArr.push(setFields(prev[i], next[j]))
|
||||
}
|
||||
}
|
||||
return newArr
|
||||
},
|
||||
[{}]
|
||||
)
|
||||
}
|
||||
|
||||
const setTableData = () => {
|
||||
const skuNameList = props.modelValue.sku_name_list;
|
||||
const tableData = specParams.tableData;
|
||||
const specList = skuNameList.map((item: SkuNameList) => item.value)
|
||||
const newData = getTableData(specList);
|
||||
const rawData = JSON.parse(JSON.stringify(tableData));
|
||||
const rawObject: any = {};
|
||||
rawData.forEach((item: any) => {
|
||||
if (item.sku_value_arr !== undefined) {
|
||||
rawObject[item.sku_value_arr] = item;
|
||||
}
|
||||
})
|
||||
|
||||
specParams.tableData = newData.map((item: any) =>
|
||||
rawObject[item.sku_value_arr]
|
||||
? {
|
||||
...rawObject[item.sku_value_arr],
|
||||
value: item.value,
|
||||
ids: item.ids,
|
||||
image: item.image || rawObject[item.sku_value_arr].image,
|
||||
}
|
||||
: item
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => specItem.value,
|
||||
() => {
|
||||
setTableData();
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 更新销售属性构建sku
|
||||
* @param skuAttribute
|
||||
*/
|
||||
function generateSku(skuAttribute: skuAttrItemType[]) {
|
||||
let attrValue: any[] = []
|
||||
skuAttribute.map((item) => {
|
||||
attrValue.push(item.values)
|
||||
})
|
||||
let skus: any[] = []
|
||||
if (attrValue.length === 0) {
|
||||
stockKeepUnits.value = []
|
||||
return
|
||||
watch(
|
||||
() => props.modelValue.sku_list,
|
||||
(value) => {
|
||||
specParams.tableData = value
|
||||
}
|
||||
);
|
||||
|
||||
skus = attrValue.reduce((col: any[], set) => {
|
||||
let res: any[] = []
|
||||
col.forEach((c) => {
|
||||
set.forEach((s) => {
|
||||
let t = c.attributeValue + ',' + s.attributeValue
|
||||
res.push({ attributeValue: t, thumbnailUrl: c.thumbnailUrl || s.thumbnailUrl || '' })
|
||||
})
|
||||
})
|
||||
return res
|
||||
})
|
||||
// 增加,回显相关字段
|
||||
skus.map((e: skuType) => {
|
||||
// 寻找销售规格一致的副本数据
|
||||
let old = afterSku.find((item) => item.attributeValue == e.attributeValue)
|
||||
console.log('单项', e)
|
||||
e.id = old == null ? '' : old.id
|
||||
e.price = old == null ? '' : old.price
|
||||
e.marketPrice = old == null ? '' : old.marketPrice
|
||||
e.stock = old == null ? '' : old.stock
|
||||
e.specificationBarCode = old == null ? '' : old.specificationBarCode
|
||||
return e
|
||||
})
|
||||
console.log(skus, 'skus')
|
||||
stockKeepUnits.value = skus
|
||||
}
|
||||
watch(
|
||||
() => specParams.tableData,
|
||||
(value) => {
|
||||
props.modelValue.sku_list = value
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 删除销售属性
|
||||
* @param index
|
||||
*/
|
||||
function deleteSkuAttr(index) {
|
||||
skuAttributes.value.splice(index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除销售属性字段
|
||||
* @param index
|
||||
* @param cindex
|
||||
*/
|
||||
function deleteSkuAttrName(index: number, cindex: number) {
|
||||
skuAttributes.value[index].values.splice(cindex, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加sku属性图片
|
||||
* @param index
|
||||
* @param cindex
|
||||
*/
|
||||
async function addSkuAttrImage(index: number, cindex: number) {
|
||||
let res = await chooseToFile()
|
||||
console.log(res)
|
||||
// 生产环境此处应该是上传到服务端,获取线上url
|
||||
// 此处写法仅限测试,上传大图片可能造成卡顿
|
||||
_blobToDataUrl(res[0], (res) => {
|
||||
skuAttributes.value[index].values[cindex].thumbnailUrl = res
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加销售属性字段
|
||||
* @param index
|
||||
*/
|
||||
function addSkuAttrName(index: number) {
|
||||
skuAttributes.value[index].values.push({ attributeValue: '', thumbnailUrl: '' })
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换首个sku是否上传图片的状态
|
||||
*/
|
||||
function toggleSkuImg(index) {
|
||||
let { isAddImage } = skuAttributes.value[index]
|
||||
if (isAddImage) {
|
||||
skuAttributes.value[index].values.map((e) => {
|
||||
e.thumbnailUrl = ''
|
||||
return e
|
||||
})
|
||||
}
|
||||
skuAttributes.value[index].isAddImage = !isAddImage
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加销售属性
|
||||
*/
|
||||
function addSkuAttr() {
|
||||
skuAttributes.value.push(deepClone(skuAttrItem))
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态更新表格字段
|
||||
* @param index
|
||||
* @param dataIndex
|
||||
*/
|
||||
function changeSkuData(index: number, dataIndex: string, evt: any) {
|
||||
let value = evt.target.value
|
||||
stockKeepUnits.value[index][dataIndex] = value
|
||||
}
|
||||
|
||||
function save() {
|
||||
message.success('请查看控制台输出')
|
||||
console.log('销售属性:', skuAttributes.value)
|
||||
console.log('sku:', stockKeepUnits.value)
|
||||
}
|
||||
|
||||
function _blobToDataUrl(file, callback) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const url = URL.createObjectURL(file) // 获取临时访问链接
|
||||
callback(url)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
skuAttributes,
|
||||
stockKeepUnits
|
||||
})
|
||||
const addSpecImage = (index: number) => {
|
||||
specParams.tableDataIndex = index;
|
||||
materialRef.value?.showPopup();
|
||||
};
|
||||
const changeSpecImage = (value: string) => {
|
||||
specParams.tableData[specParams.tableDataIndex].image = value;
|
||||
};
|
||||
const removeSpecImage = (index: number) => {
|
||||
specParams.tableData[index].image = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sku_item {
|
||||
&:hover {
|
||||
.sku_item_delete {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
<style>
|
||||
.spec-item {
|
||||
transition: all 1s;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.sku_item_delete {
|
||||
opacity: 0;
|
||||
}
|
||||
.spec-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
border: 1px dashed #e5e5e5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user