Skip to content

Y
yongxinda-admin
提交 379ab906 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

初步完成商品规格排序功能

上级 924b9c81
隐藏空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 46 行删除
src/views/commodityManage/components/selectSpec.vue
浏览文件 @ 379ab906
<template> <template>
<el-card> <el-card>
<h3>选择规格</h3> <div style="display: flex; flex-direction: row; align-items: center;">
<h3 style="width: 15%;">选择规格</h3>
<el-alert style="width: 50%" title="注意：对规格排序之后会对之前添加购物车的商品有影响！" type="warning" :closable="false" />
</div>
<div>{{ data }}</div> <div>{{ data }}</div>
<div v-if="JSON.stringify(specData) != '[]'"> <div v-if="JSON.stringify(specData) != '[]'">
<div v-for="(item, i) in specData" :key="i"> <div v-for="(item, i) in specDatas" :key="i">
<div style="margin-bottom: 20px;"> <div style="display: flex; justify-content: space-between;">
<el-tag class="ml-2" effect="dark" size="large">{{ item.specification }}</el-tag> <div style="margin-bottom: 20px;">
<el-tag class="ml-2" effect="dark" size="large">{{ item.specification }}</el-tag>
</div>
<div style="margin-right: 5%;">
<el-button v-show="i !== 0" type="primary" icon="top" circle @click="handleAscending(item)" />
<el-button v-show="specDatas.length - 1 !== i" type="primary" icon="bottom" circle
@click="handleDescending(item)" />
</div>
</div> </div>
<el-radio-group v-model="item.specRadio" size="small" @change="radioChange($event, item)"> <el-radio-group v-model="item.specRadio" size="small" @change="radioChange($event, item)">
<el-radio-button v-for="(res, r) in item.values" :key="r" :label="res.value" /> <el-radio-button v-for="(res, r) in item.values" :key="r" :label="res.value" />
...@@ -81,14 +91,14 @@ let props = defineProps({ ...@@ -81,14 +91,14 @@ let props = defineProps({
} }
}) })
let emits = defineEmits(['productsData']) let emits = defineEmits(['productsData', 'handleSort'])
let data = computed(() => { let data = computed(() => {
if (JSON.stringify(props.specData) != '[]') { if (JSON.stringify(props.specData) != '[]') {
specData.value = [] specDatas.value = []
group(props.specData) group(props.specData)
} else { } else {
specData.value = [] specDatas.value = []
specificationData.value = [] specificationData.value = []
} }
}) })
...@@ -97,19 +107,30 @@ let specificationsRef = ref() ...@@ -97,19 +107,30 @@ let specificationsRef = ref()
let specList = ref([] as any) let specList = ref([] as any)
let specificationData = ref([] as any) let specificationData = ref([] as any)
var specData = ref([] as any) //符合条件的数据 var specDatas = ref([] as any) //符合条件的数据
watch(specData.value, (newVlaue: any) => { watch(specDatas.value, (newVlaue: any) => {
if (JSON.stringify(newVlaue) === '[]') { if (JSON.stringify(newVlaue) === '[]') {
specData.value = [] specDatas.value = []
specificationData.value = [] specificationData.value = []
} }
}) }, { deep: true, immediate: true })
let setSpecifications = (data: any) => { let setSpecifications = (data: any) => {
if (data) specificationData.value = data if (data) specificationData.value = data
} }
// 升序
let handleAscending = (item: any) => {
emits('handleSort', 'ascending', item)
}
// 降序
let handleDescending = (item: any) => {
console.log('descending');
emits('handleSort', 'descending', item)
}
// 参数值操作 // 参数值操作
let paramsChange = (type: string, data: any, index: any) => { let paramsChange = (type: string, data: any, index: any) => {
if (type === 'add') { if (type === 'add') {
...@@ -197,29 +218,18 @@ let handleSpecData = () => { ...@@ -197,29 +218,18 @@ let handleSpecData = () => {
newarr.map((item: any) => { newarr.map((item: any) => {
let flag = true let flag = true
// 如果已经存储了相同的specification，则下面就不在循环 // 如果已经存储了相同的specification，则下面就不在循环
data.map((res: any) => { data.map((res: any) => { if (item.specification === res.specification) flag = false })
if (item.specification === res.specification) flag = false
})
newarr.map((item1: any) => { newarr.map((item1: any) => {
if (flag) { if (flag) {
if (item.specification === item1.specification) { if (item.specification === item1.specification) {
let flag1 = true let flag1 = true
// 如果已经存储了相同的specification，就只添加value // 如果已经存储了相同的specification，就只添加value
data.map((res: any) => { data.map((res: any) => { if (item.specification === res.specification) flag1 = false })
if (item.specification === res.specification) flag1 = false if (flag1) data.push({
specification: item.specification,
value: [item1.value]
}) })
if (flag1) { else data.forEach((res: any) => { if (item1.specification === res.specification) res.value.push(item1.value) })
data.push({
specification: item.specification,
value: [item1.value]
})
} else {
data.forEach((res: any) => {
if (item1.specification === res.specification) {
res.value.push(item1.value)
}
})
}
} }
} }
}) })
...@@ -229,12 +239,14 @@ let handleSpecData = () => { ...@@ -229,12 +239,14 @@ let handleSpecData = () => {
// 判断规格属性的顺序是否正确，错误需要排序 // 判断规格属性的顺序是否正确，错误需要排序
let handleSequence = (data: any) => { let handleSequence = (data: any) => {
// console.log('firstSort', data, specList.value);
let specListCopy = [...specList.value] // 浅拷贝 let specListCopy = [...specList.value] // 浅拷贝
// 双重循环判断对应索引值是否对应 // 双重循环判断对应索引值是否对应
specList.value.map((arrVal: any, arr: number) => { specList.value.map((arrVal: any, arr: number) => {
data.map((item: any, i: number) => { data.map((item: any, i: number) => {
if (arr === i) { if (arr === i) {
let index = item.value.indexOf(arrVal) let index = item.value.indexOf(arrVal)
// console.log(index);
// 如果对应索引中没有对应关系，则取当前索引在拷贝数组找到对应值，直接赋值 // 如果对应索引中没有对应关系，则取当前索引在拷贝数组找到对应值，直接赋值
if (index === -1) { if (index === -1) {
data[arr].value.map((element: any) => { data[arr].value.map((element: any) => {
...@@ -258,12 +270,27 @@ let showAddSpec = () => { ...@@ -258,12 +270,27 @@ let showAddSpec = () => {
specificationsRef.value.formData = { specificationsRef.value.formData = {
bomCode: '', bomCode: '',
model: '', model: '',
productName: '' productName: '',
url: '',
designUrl: ''
} }
specificationsRef.value.title = '添加规格属性' specificationsRef.value.title = '添加规格属性'
specificationsRef.value.showVisiable = true specificationsRef.value.showVisiable = true
} }
// 修改规格顺序时触发
let sort = () => {
let resultSpecData = handleSpecData()
specificationData.value.map((item: any) => {
specList.value = item.specifications
if (item.updateTime) item.updateTime = null
if (item.specifications.length === resultSpecData.length) handleSequence(resultSpecData)
else console.log('少数量');
})
specList.value = []
emits('productsData', specificationData.value)
}
// 添加规格属性 // 添加规格属性
let clickAdd = (formData: any) => { let clickAdd = (formData: any) => {
let data = { let data = {
...@@ -278,7 +305,7 @@ let clickAdd = (formData: any) => { ...@@ -278,7 +305,7 @@ let clickAdd = (formData: any) => {
data = { ...data, ...formData } data = { ...data, ...formData }
specificationData.value.push(data) specificationData.value.push(data)
specList.value = [] specList.value = []
specData.value = poty.value specDatas.value = poty.value
emits('productsData', specificationData.value) emits('productsData', specificationData.value)
// console.log(attributes.value, '规格属性数据'); // console.log(attributes.value, '规格属性数据');
} }
...@@ -314,12 +341,13 @@ let handleAttributeDelete = (row: any) => { ...@@ -314,12 +341,13 @@ let handleAttributeDelete = (row: any) => {
let poty = ref() let poty = ref()
// 把相同数据分组 // 把相同数据分组(递归)
let group = (data: any) => { let group = (data: any) => {
let arr = [] as any //记录相同索引 let arr = [] as any //记录相同索引
let copyArr = [...data] // 拷贝 let copyArr = [...data] // 拷贝
let list = [] as any // 记录相同value let list = [] as any // 记录相同value
let spec = copyArr[0].specification // 记录specification let spec = copyArr[0].specification // 记录specification
let sort = copyArr[0].sort // 记录sort
copyArr.forEach((item: any, i: number) => { copyArr.forEach((item: any, i: number) => {
if (item.specification == copyArr[0].specification) { if (item.specification == copyArr[0].specification) {
arr.push(i) arr.push(i)
...@@ -344,17 +372,19 @@ let group = (data: any) => { ...@@ -344,17 +372,19 @@ let group = (data: any) => {
copyArr.splice(index, 1) copyArr.splice(index, 1)
} }
}); });
specData.value.push({ specDatas.value.push({
specification: spec, specification: spec,
values: list, values: list,
specRadio: '' specRadio: '',
sort
}) })
if (copyArr.length === 0) return poty.value = [...specData.value] if (copyArr.length === 0) return poty.value = [...specDatas.value]
else group(copyArr) else group(copyArr)
} }
defineExpose({ defineExpose({
setSpecifications setSpecifications,
sort
}) })
</script> </script>
......
src/views/commodityManage/edit.vue
浏览文件 @ 379ab906
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
</el-card> </el-card>
<select-spec ref="selectSpecRef" :specData="specifications" :products="products" <select-spec ref="selectSpecRef" :specData="specifications" :products="products"
@productsData="productsData" /> @productsData="productsData" @handle-sort="handleSort" />
<template #footer> <template #footer>
<el-button @click="handleCancel">取消</el-button> <el-button @click="handleCancel">取消</el-button>
...@@ -406,6 +406,76 @@ let productsData = (data: any, deleteIndex?: any, deleteIndexData?: any, ...@@ -406,6 +406,76 @@ let productsData = (data: any, deleteIndex?: any, deleteIndexData?: any,
} }
} }
// 排序规格
let handleSort = (type: string, data: any) => {
let sameIndex: any;
// 取第一个规格名的索引
let sameFlag = specifications.value.some((item: any, index: number) => {
sameIndex = index
return item.specification === data.specification
})
let preSpecSort = specifications.value[sameIndex].sort // 记录当前的排序sort
let preSpecName = specifications.value[sameIndex].specification // 当前的规格名
// ascending 升序
if (sameFlag) {
if (type == 'ascending') {
let frontPreSpecName = specifications.value[sameIndex - 1].specification // 前一个的规格名
let frontPreSpecSort = specifications.value[sameIndex - 1].sort // 记录前一个的规格属性的排序sort
specifications.value.forEach((item: any) => {
if (item.specification == frontPreSpecName) {
item.sort = preSpecSort
if (item.updateTime) item.updateTime = null
}
if (item.specification == preSpecName) {
item.sort = frontPreSpecSort
if (item.updateTime) item.updateTime = null
}
});
console.log(specifications.value, data);
bubbleSort(specifications.value)
selectSpecRef.value.setSpecifications(products.value)
} else {
let sum = 0
specifications.value.map((item: any) => { if (item.specification == preSpecName) sum++ })
// 防止相加索引值大于数组长度而导致取不到值
if (sameIndex + sum > specifications.value.length - 1) {
var afterPreSpecName = specifications.value[specifications.value.length - 1].specification // 后一个的规格名
var afterPreSpecSort = specifications.value[specifications.value.length - 1].sort // 记录前一个的规格属性的排序sort
} else {
var afterPreSpecName = specifications.value[sameIndex + sum].specification // 后一个的规格名
var afterPreSpecSort = specifications.value[sameIndex + sum].sort // 记录前一个的规格属性的排序sort
}
// console.log(typeof frontPreSpecName, frontPreSpecSort);
specifications.value.forEach((item: any) => {
if (item.specification == afterPreSpecName) {
item.sort = preSpecSort
if (item.updateTime) item.updateTime = null
}
if (item.specification == preSpecName) {
item.sort = afterPreSpecSort
if (item.updateTime) item.updateTime = null
}
});
console.log(specifications.value, data);
bubbleSort(specifications.value)
}
}
}
// 冒泡排序
let bubbleSort = ((arr: any) => {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j].sort > arr[j + 1].sort) {
var temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
selectSpecRef.value.sort()
})
let handleCategoryChange = (value: any) => { let handleCategoryChange = (value: any) => {
// goods.value.categoryId = value[value.length - 1]; // goods.value.categoryId = value[value.length - 1];
} }
...@@ -644,11 +714,43 @@ let handleSpecificationAdd = () => { ...@@ -644,11 +714,43 @@ let handleSpecificationAdd = () => {
}) })
} }
} }
specifications.value.push({ // 判断是否添加过改规格名
specification: dictName.value, let sameSpecIndex;
value: s, let sameSort;
customSpec: dictSwitch.value let sameFlag = specifications.value.some((item: any, index: number) => {
sameSpecIndex = index
sameSort = item.sort
return item.specification === dictName.value
}) })
// console.log(sameFlag, 'sameFlag', sameSpecIndex);
if (sameFlag) {
// dictSwitch.value 变成true后需要把相同的规格名的customSpec值也变成true
if (dictSwitch.value) {
specifications.value.forEach((item: any) => {
if (item.specification === dictName.value) {
item.customSpec = dictSwitch.value
item.updateTime = null
}
})
}
specifications.value.splice(sameSpecIndex, 0, {
specification: dictName.value,
value: s,
customSpec: dictSwitch.value,
sort: sameSort
})
} else {
let sort;
if (specifications.value.length === 0) sort = 0
else sort = specifications.value[specifications.value.length - 1].sort + 1
specifications.value.push({
specification: dictName.value,
value: s,
customSpec: dictSwitch.value,
sort
})
}
// console.log(specifications.value, 'specifications.value');
} }
dictValue.value = null dictValue.value = null
dictName.value = null dictName.value = null
...@@ -688,6 +790,7 @@ let handleSpecificationEdit = (row: any, index: number) => { ...@@ -688,6 +790,7 @@ let handleSpecificationEdit = (row: any, index: number) => {
} }
let specificationsDeleteData = ref([] as any) let specificationsDeleteData = ref([] as any)
let handleSpecificationDelete = (row: any) => { let handleSpecificationDelete = (row: any) => {
const index = specifications.value.indexOf(row); const index = specifications.value.indexOf(row);
let delRow = specifications.value[index] let delRow = specifications.value[index]
......
src/views/commodityManage/shelves.vue
浏览文件 @ 379ab906
...@@ -179,7 +179,8 @@ ...@@ -179,7 +179,8 @@
</el-dialog> </el-dialog>
</el-card> </el-card>
<select-spec :specData="specifications" @productsData="productsData" /> <select-spec ref="selectSpecRef" :specData="specifications" @productsData="productsData"
@handle-sort="handleSort" />
<template #footer> <template #footer>
<el-button @click="handleCancel">取消</el-button> <el-button @click="handleCancel">取消</el-button>
...@@ -206,6 +207,7 @@ let uploadRef = ref(); ...@@ -206,6 +207,7 @@ let uploadRef = ref();
let keywords = ref([] as any); let keywords = ref([] as any);
let categoryList = ref([] as any); let categoryList = ref([] as any);
let brandList = ref([] as any); let brandList = ref([] as any);
let selectSpecRef = ref()
let goods = ref({ let goods = ref({
goodsSn: "", goodsSn: "",
name: "", name: "",
...@@ -237,7 +239,7 @@ let rules = ref({ ...@@ -237,7 +239,7 @@ let rules = ref({
goodsSn: [{ required: true, message: "商品编号不能为空", trigger: "blur" }], goodsSn: [{ required: true, message: "商品编号不能为空", trigger: "blur" }],
name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }], name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
picUrl: [{ required: true, message: "商品图片不能为空", trigger: ["blur", 'change'] }], picUrl: [{ required: true, message: "商品图片不能为空", trigger: ["blur", 'change'] }],
// designUrl: [{ required: true, message: "设计图片不能为空", trigger: ["blur", 'change'] }], // designUrl: [{ required: true, message: "设计图片不能为空", trigger: ["blur", 'change'] }],
}); });
let emits = defineEmits(['initShelves']) let emits = defineEmits(['initShelves'])
...@@ -300,6 +302,77 @@ let handleCancel = () => { ...@@ -300,6 +302,77 @@ let handleCancel = () => {
let productsData = (data: any) => { let productsData = (data: any) => {
products.value = data products.value = data
} }
// 排序规格
let handleSort = (type: string, data: any) => {
let sameIndex: any;
// 取第一个规格名的索引
let sameFlag = specifications.value.some((item: any, index: number) => {
sameIndex = index
return item.specification === data.specification
})
let preSpecSort = specifications.value[sameIndex].sort // 记录当前的排序sort
let preSpecName = specifications.value[sameIndex].specification // 当前的规格名
// ascending 升序
if (sameFlag) {
if (type == 'ascending') {
let frontPreSpecName = specifications.value[sameIndex - 1].specification // 前一个的规格名
let frontPreSpecSort = specifications.value[sameIndex - 1].sort // 记录前一个的规格属性的排序sort
specifications.value.forEach((item: any) => {
if (item.specification == frontPreSpecName) {
item.sort = preSpecSort
if (item.updateTime) item.updateTime = null
}
if (item.specification == preSpecName) {
item.sort = frontPreSpecSort
if (item.updateTime) item.updateTime = null
}
});
console.log(specifications.value, data);
bubbleSort(specifications.value)
selectSpecRef.value.setSpecifications(products.value)
} else {
let sum = 0
specifications.value.map((item: any) => { if (item.specification == preSpecName) sum++ })
// 防止相加索引值大于数组长度而导致取不到值
if (sameIndex + sum > specifications.value.length - 1) {
var afterPreSpecName = specifications.value[specifications.value.length - 1].specification // 后一个的规格名
var afterPreSpecSort = specifications.value[specifications.value.length - 1].sort // 记录前一个的规格属性的排序sort
} else {
var afterPreSpecName = specifications.value[sameIndex + sum].specification // 后一个的规格名
var afterPreSpecSort = specifications.value[sameIndex + sum].sort // 记录前一个的规格属性的排序sort
}
// console.log(typeof frontPreSpecName, frontPreSpecSort);
specifications.value.forEach((item: any) => {
if (item.specification == afterPreSpecName) {
item.sort = preSpecSort
if (item.updateTime) item.updateTime = null
}
if (item.specification == preSpecName) {
item.sort = afterPreSpecSort
if (item.updateTime) item.updateTime = null
}
});
console.log(specifications.value, data);
bubbleSort(specifications.value)
}
}
}
// 冒泡排序
let bubbleSort = ((arr: any) => {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j].sort > arr[j + 1].sort) {
var temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
selectSpecRef.value.sort()
})
let handlePublish = () => { let handlePublish = () => {
goodsRef.value?.validate((valid: boolean) => { goodsRef.value?.validate((valid: boolean) => {
if (valid) { if (valid) {
...@@ -439,11 +512,43 @@ let handleSpecificationAdd = () => { ...@@ -439,11 +512,43 @@ let handleSpecificationAdd = () => {
}) })
} }
} }
specifications.value.push({ // 判断是否添加过改规格名
specification: dictName.value, let sameSpecIndex;
value: s, let sameSort;
customSpec: dictSwitch.value let sameFlag = specifications.value.some((item: any, index: number) => {
sameSpecIndex = index
sameSort = item.sort
return item.specification === dictName.value
}) })
// console.log(sameFlag, 'sameFlag', sameSpecIndex);
if (sameFlag) {
// dictSwitch.value 变成true后需要把相同的规格名的customSpec值也变成true
if (dictSwitch.value) {
specifications.value.forEach((item: any) => {
if (item.specification === dictName.value) {
item.customSpec = dictSwitch.value
item.updateTime = null
}
})
}
specifications.value.splice(sameSpecIndex, 0, {
specification: dictName.value,
value: s,
customSpec: dictSwitch.value,
sort: sameSort
})
} else {
let sort;
if (specifications.value.length === 0) sort = 0
else sort = specifications.value[specifications.value.length - 1].sort + 1
specifications.value.push({
specification: dictName.value,
value: s,
customSpec: dictSwitch.value,
sort
})
}
// console.log(specifications.value, 'specifications.value');
} }
dictValue.value = null dictValue.value = null
dictName.value = null dictName.value = null
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论