diff --git a/src/api/business/GoodsManager/Goodss/goods.js b/src/api/business/GoodsManager/Goodss/goods.js index 0e83924..9ff5b6d 100644 --- a/src/api/business/GoodsManager/Goodss/goods.js +++ b/src/api/business/GoodsManager/Goodss/goods.js @@ -18,6 +18,24 @@ export function goodsList(query) { }) } +// 获取商品Sku +export function getGoodsSkuList(query) { + return request({ + url: '/business/Goods/getGoodsSkuList', + method: 'get', + params: query + }) +} + +// 获取商品服务与承诺 +export function getCurrentGoodsServiceList(query) { + return request({ + url: '/business/Goods/getCurrentGoodsServiceList', + method: 'get', + params: query + }) +} + // 商品新增或修改 export function addOrUpdateGoods(data) { return request({ diff --git a/src/views/business/GoodsManager/Goodss/components/AddDialog.vue b/src/views/business/GoodsManager/Goodss/components/AddDialog.vue index 3c142e1..30379c6 100644 --- a/src/views/business/GoodsManager/Goodss/components/AddDialog.vue +++ b/src/views/business/GoodsManager/Goodss/components/AddDialog.vue @@ -94,7 +94,7 @@ - + {{ @@ -315,7 +315,7 @@ @@ -377,6 +377,7 @@ const activeName = ref('base') // 选择店铺弹窗参数 const ChooseShopDialogVisible = ref(false); const ChooseShopDialogRow = ref({}); +// 当前用户id const userid = useUserStore().userId // 商品类目树形列表 @@ -499,17 +500,15 @@ async function getGoodsServicesList() { // 基础信息表单 const baseFormRef = ref(); - // 商品规格表单 const skuFormRef = ref(); - // 商品详情表单 const detailFormRef = ref(); - // 更多设置表单 const moreFormRef = ref(); // -基础参数 +const loadingStatus = ref(false) const labelWidth = 100; const { proxy } = getCurrentInstance() const emits = defineEmits(["update:modelValue"]); @@ -541,7 +540,7 @@ const imgData = ref({ const rules = reactive({ shopGuid: [{ required: true, message: "店铺不能为空", trigger: "blur" }], goodsCategoryGuid: [{ required: true, message: "商品类目不能为空", trigger: "blur" }], - goodsSpecType: [{ required: true, message: "商品规格类型不能为空", trigger: "blur" }], + goodsSpecType: [{ required: true, message: "规格类型不能为空", trigger: "blur" }], deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }], goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }], goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }], @@ -577,11 +576,12 @@ const handleAddClick = async () => { const validateResult = res.every((item) => !!item) if (validateResult) { + loadingStatus.value = true if (formData.goodsServicesIds.length !== 0) { formData.goodsServicesIds = formData.goodsServicesIds.join(',') } - if (formData.goodsSpecType = "2") { + if (formData.goodsSpecType = 2) { if (formData.goodsSpecList.length == 0) { modal.msgError('商品规格不能为空！') return @@ -592,6 +592,7 @@ const handleAddClick = async () => { if (code == 200) { modal.msgSuccess('添加成功') closeDialog(); + loadingStatus.value = false } } else { modal.msgError('表单未通过验证！') diff --git a/src/views/business/GoodsManager/Goodss/components/EditDialog.vue b/src/views/business/GoodsManager/Goodss/components/EditDialog.vue index f095a30..ac18cea 100644 --- a/src/views/business/GoodsManager/Goodss/components/EditDialog.vue +++ b/src/views/business/GoodsManager/Goodss/components/EditDialog.vue @@ -7,198 +7,312 @@ * @LastEditTime: (2023-06-19) --> @@ -96,9 +99,36 @@ const props = defineProps({ watch(props, async (v) => { goodsSpecList.value = v.modelValue.goodsSpecList; + if (v.modelValue.goodsSpecList && v.modelValue.goodsSpecList.length !== 0) { + skuColumns.value = []; // 清空原有的表头 + + // 遍历规格组列表 + v.modelValue.goodsSpecList.forEach((specGroup, index) => { + let prop; + if (index === 0) { + prop = 'specValue'; + } else if (index === 1) { + prop = 'specSecondValue'; + } else if (index === 2) { + prop = 'specThirdValue'; + } + + const column = { + prop: prop, // 使用属性名称 + label: specGroup.specName, // 使用规格组的名称作为标签 + width: '100' + }; + + skuColumns.value.push(column); // 将表头对象添加到skuColumns数组 + }); + } skuList.value = v.modelValue.skuList; + if (v.modelValue.skuList && v.modelValue.skuList.length !== 0) { + getSpanArr(skuList.value); + } }); + /** 商品规格 业务参数 */ // 添加商品规格按钮状态 @@ -137,7 +167,18 @@ const goodsSpecList = ref([ // specValue: "", // }, // ], - // } + // }, + // { + // specId: 0, + // specName: "", + // props: [ + // { + // specValueId: 0, + // specValueName: "", + // specValue: "", + // }, + // ], + // }, ]) // sku列表 @@ -175,20 +216,17 @@ const getList = () => { newList.value = descartes(newData.value); console.log(newList.value, '笛卡尔积处理过后的数据'); newList.value.forEach((item) => { - console.log(item, 'item数据'); skuList.value.push({ specValue: Array.isArray(item) ? item[0] : item, specSecondValue: Array.isArray(item) ? item[1] : null, specThirdValue: Array.isArray(item) ? item[2] : null, goodsGuid: 0, - specValueName: "", goodsSkuImg: "", goodsSkuPrice: 0.01, goodsSkuLinePrice: 0, goodsSkuStockNum: 0, goodsSkuWeight: 0, goodsSkuSkuCode: "", - goodsSkuProps: "" }); }); @@ -199,6 +237,43 @@ const getList = () => { console.log(skuList.value, '表格中的数据'); } +// 合并已存在的sku数据 +// function oldSkuList(newSkuList) { +// // const oldSkuList = _.cloneDeep(this.multiSpecData.skuList) +// const oldSkuList = skuList.value.concat() +// if (!oldSkuList.length || !newSkuList.length) { +// return newSkuList +// } +// for (const index in newSkuList) { +// // 查找符合的旧记录 +// let oldSkuItem = {} +// if (oldSkuList.length === newSkuList.length) { +// oldSkuItem = _.cloneDeep(oldSkuList[index]) +// } else { +// oldSkuItem = oldSkuList.find(item => { +// return item.key === newSkuList[index].key +// }) +// } +// // 写入新纪录 +// if (oldSkuItem) { +// newSkuList[index] = { +// ...newSkuList[index], +// ..._.pick(oldSkuItem, Object.keys({ +// goodsGuid: 0, +// goodsSkuImg: "", +// goodsSkuPrice: 0.01, +// goodsSkuLinePrice: 0, +// goodsSkuStockNum: 0, +// goodsSkuWeight: 0, +// goodsSkuSkuCode: "", +// })) +// } +// // console.log(newSkuList[index].image) +// } +// } +// return newSkuList +// } + //计算位置的方法 const getSpanArr = (data) => { @@ -246,84 +321,29 @@ const getSpanArr = (data) => { // 合并行数 const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => { // columnIndex === 0 找到第一列，实现合并随机出现的行数 - if (columnIndex === 0) { - const _row = spanArr.value[rowIndex]; - const _col = _row > 0 ? 1 : 0; - return { - rowspan: _row, - colspan: _col - }; - // columnIndex === 1 找到第二列，合并他的列数 - } else if (columnIndex === 1) { - if (spanArr1.value.length != 0) { - const _row = spanArr1.value[rowIndex]; + if (goodsSpecList.value && goodsSpecList.value.length !== 0) { + if (columnIndex === 0) { + const _row = spanArr.value[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; + // columnIndex === 1 找到第二列，合并他的列数 + } else if (columnIndex === 1) { + if (spanArr1.value.length != 0) { + const _row = spanArr1.value[rowIndex]; + const _col = _row > 0 ? 1 : 0; + return { + rowspan: _row, + colspan: _col + }; + } } } } -// 合并列表 -// const objectSpanMethod = ({ -// row, -// column, -// rowIndex, -// columnIndex, -// }) => { -// // if (columnIndex === 0) { -// // if (rowIndex % firstLen === 0) { -// // return { -// // rowspan: firstLen, -// // colspan: 1, -// // } -// // } else { -// // return { -// // rowspan: 0, -// // colspan: 0, -// // } -// // } -// // } - -// // if (columnIndex === 1) { -// // if (rowIndex % secondLen === 0) { -// // return { -// // rowspan: secondLen, -// // colspan: 1, -// // } -// // } else { -// // return { -// // rowspan: 0, -// // colspan: 0, -// // } -// // } -// // } - -// } - -// let firstLen = 0 -// let secondLen = 0 -// skuList.value.map((item, idx) => { -// let firstVal = skuList?.value[0].specValue -// if (item.specValue === firstVal) { -// firstLen += 1 -// firstVal = item.specValue -// } - -// // let secondVal = skuList?.value[0].specSecondValue -// // if (item.specSecondValue === secondVal) { -// // secondLen += 1 -// // secondVal = item.specSecondValue -// // } -// }) -// console.log(secondLen, '第二列'); - - - - /** 商品规格 业务方法 */ @@ -380,7 +400,6 @@ function handleChangeSepc(item, idx) { key: idx } skuColumns.value.push(column) - } // 删除规格组 @@ -531,9 +550,7 @@ function handleDelSpecValue(item, specValue) { height: 90px; } -:deep(.el-upload-list--picture-card ) { +:deep(.el-upload-list--picture-card) { --el-upload-list-picture-card-size: 100px; } - -