Skip to content

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

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

上级 924b9c81
隐藏空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 46 行删除
src/views/commodityManage/components/selectSpec.vue
浏览文件 @ 379ab906
<template>
<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 v-if="JSON.stringify(specData) != '[]'">
<div v-for="(item, i) in specData" :key="i">
<div style="margin-bottom: 20px;">
<el-tag class="ml-2" effect="dark" size="large">{{ item.specification }}</el-tag>
<div v-for="(item, i) in specDatas" :key="i">
<div style="display: flex; justify-content: space-between;">
<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>
<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" />
......@@ -81,14 +91,14 @@ let props = defineProps({
}
})
let emits = defineEmits(['productsData'])
let emits = defineEmits(['productsData', 'handleSort'])
let data = computed(() => {
if (JSON.stringify(props.specData) != '[]') {
specData.value = []
specDatas.value = []
group(props.specData)
} else {
specData.value = []
specDatas.value = []
specificationData.value = []
}
})
......@@ -97,19 +107,30 @@ let specificationsRef = ref()
let specList = 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) === '[]') {
specData.value = []
specDatas.value = []
specificationData.value = []
}
})
}, { deep: true, immediate: true })
let setSpecifications = (data: any) => {
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) => {
if (type === 'add') {
......@@ -197,29 +218,18 @@ let handleSpecData = () => {
newarr.map((item: any) => {
let flag = true
// 如果已经存储了相同的specification，则下面就不在循环
data.map((res: any) => {
if (item.specification === res.specification) flag = false
})
data.map((res: any) => { if (item.specification === res.specification) flag = false })
newarr.map((item1: any) => {
if (flag) {
if (item.specification === item1.specification) {
let flag1 = true
// 如果已经存储了相同的specification，就只添加value
data.map((res: any) => {
if (item.specification === res.specification) flag1 = false
data.map((res: any) => { if (item.specification === res.specification) flag1 = false })
if (flag1) data.push({
specification: item.specification,
value: [item1.value]
})
if (flag1) {
data.push({
specification: item.specification,
value: [item1.value]
})
} else {
data.forEach((res: any) => {
if (item1.specification === res.specification) {
res.value.push(item1.value)
}
})
}
else data.forEach((res: any) => { if (item1.specification === res.specification) res.value.push(item1.value) })
}
}
})
......@@ -229,12 +239,14 @@ let handleSpecData = () => {
// 判断规格属性的顺序是否正确，错误需要排序
let handleSequence = (data: any) => {
// console.log('firstSort', data, specList.value);
let specListCopy = [...specList.value] // 浅拷贝
// 双重循环判断对应索引值是否对应
specList.value.map((arrVal: any, arr: number) => {
data.map((item: any, i: number) => {
if (arr === i) {
let index = item.value.indexOf(arrVal)
// console.log(index);
// 如果对应索引中没有对应关系，则取当前索引在拷贝数组找到对应值，直接赋值
if (index === -1) {
data[arr].value.map((element: any) => {
......@@ -258,12 +270,27 @@ let showAddSpec = () => {
specificationsRef.value.formData = {
bomCode: '',
model: '',
productName: ''
productName: '',
url: '',
designUrl: ''
}
specificationsRef.value.title = '添加规格属性'
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 data = {
......@@ -278,7 +305,7 @@ let clickAdd = (formData: any) => {
data = { ...data, ...formData }
specificationData.value.push(data)
specList.value = []
specData.value = poty.value
specDatas.value = poty.value
emits('productsData', specificationData.value)
// console.log(attributes.value, '规格属性数据');
}
......@@ -314,12 +341,13 @@ let handleAttributeDelete = (row: any) => {
let poty = ref()
// 把相同数据分组
// 把相同数据分组(递归)
let group = (data: any) => {
let arr = [] as any //记录相同索引
let copyArr = [...data] // 拷贝
let list = [] as any // 记录相同value
let spec = copyArr[0].specification // 记录specification
let sort = copyArr[0].sort // 记录sort
copyArr.forEach((item: any, i: number) => {
if (item.specification == copyArr[0].specification) {
arr.push(i)
......@@ -344,17 +372,19 @@ let group = (data: any) => {
copyArr.splice(index, 1)
}
});
specData.value.push({
specDatas.value.push({
specification: spec,
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)
}
defineExpose({
setSpecifications
setSpecifications,
sort
})
</script>
......
src/views/commodityManage/edit.vue
浏览文件 @ 379ab906
......@@ -184,7 +184,7 @@
</el-card>
<select-spec ref="selectSpecRef" :specData="specifications" :products="products"
@productsData="productsData" />
@productsData="productsData" @handle-sort="handleSort" />
<template #footer>
<el-button @click="handleCancel">取消</el-button>
......@@ -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) => {
// goods.value.categoryId = value[value.length - 1];
}
......@@ -644,11 +714,43 @@ let handleSpecificationAdd = () => {
})
}
}
specifications.value.push({
specification: dictName.value,
value: s,
customSpec: dictSwitch.value
// 判断是否添加过改规格名
let sameSpecIndex;
let sameSort;
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
dictName.value = null
......@@ -688,6 +790,7 @@ let handleSpecificationEdit = (row: any, index: number) => {
}
let specificationsDeleteData = ref([] as any)
let handleSpecificationDelete = (row: any) => {
const index = specifications.value.indexOf(row);
let delRow = specifications.value[index]
......
src/views/commodityManage/shelves.vue
浏览文件 @ 379ab906
......@@ -179,7 +179,8 @@
</el-dialog>
</el-card>
<select-spec :specData="specifications" @productsData="productsData" />
<select-spec ref="selectSpecRef" :specData="specifications" @productsData="productsData"
@handle-sort="handleSort" />
<template #footer>
<el-button @click="handleCancel">取消</el-button>
......@@ -206,6 +207,7 @@ let uploadRef = ref();
let keywords = ref([] as any);
let categoryList = ref([] as any);
let brandList = ref([] as any);
let selectSpecRef = ref()
let goods = ref({
goodsSn: "",
name: "",
......@@ -237,7 +239,7 @@ let rules = ref({
goodsSn: [{ required: true, message: "商品编号不能为空", trigger: "blur" }],
name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
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'])
......@@ -300,6 +302,77 @@ let handleCancel = () => {
let productsData = (data: any) => {
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 = () => {
goodsRef.value?.validate((valid: boolean) => {
if (valid) {
......@@ -439,11 +512,43 @@ let handleSpecificationAdd = () => {
})
}
}
specifications.value.push({
specification: dictName.value,
value: s,
customSpec: dictSwitch.value
// 判断是否添加过改规格名
let sameSpecIndex;
let sameSort;
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
dictName.value = null
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论