商品调整
This commit is contained in:
parent
80346aaa31
commit
528be26be6
@ -3,10 +3,10 @@ import request from '@/utils/request';
|
|||||||
// 查询商品分类列表
|
// 查询商品分类列表
|
||||||
export function listPmsProductCategory(query, pageReq) {
|
export function listPmsProductCategory(query, pageReq) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/productCategory/page',
|
url: '/pms/product/category/tree',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: query,
|
data: query
|
||||||
params: pageReq
|
// params: pageReq
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<div class="right-menu flex align-center">
|
<div class="right-menu flex align-center">
|
||||||
<template v-if="appStore.device !== 'mobile'">
|
<template v-if="appStore.device !== 'mobile'">
|
||||||
<!-- <el-select
|
<el-select
|
||||||
v-if="userId === 1 && tenantEnabled"
|
v-if="userId === 1 && tenantEnabled"
|
||||||
v-model="companyId"
|
v-model="companyId"
|
||||||
class="min-w-244px"
|
class="min-w-244px"
|
||||||
@ -19,7 +19,7 @@
|
|||||||
>
|
>
|
||||||
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
|
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
|
||||||
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
||||||
</el-select> -->
|
</el-select>
|
||||||
|
|
||||||
<search-menu ref="searchMenuRef" />
|
<search-menu ref="searchMenuRef" />
|
||||||
<el-tooltip content="搜索" effect="dark" placement="bottom">
|
<el-tooltip content="搜索" effect="dark" placement="bottom">
|
||||||
|
@ -27,7 +27,21 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="分类" prop="categoryId">
|
<el-form-item label="分类" prop="categoryId">
|
||||||
<product-category-select v-model="form.categoryId" @change="categoryChange" :style="{ width: '300px' }"></product-category-select>
|
<el-cascader
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="form.categoryId"
|
||||||
|
:options="categoryOptions"
|
||||||
|
:props="{
|
||||||
|
value: 'id',
|
||||||
|
label: 'name',
|
||||||
|
children: 'children',
|
||||||
|
checkStrictly: true,
|
||||||
|
emitPath: false
|
||||||
|
}"
|
||||||
|
placeholder="请选择分类"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@ -69,10 +83,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<el-form-item label="主图" prop="pic">
|
<el-form-item label="主图" prop="pic">
|
||||||
<oss-image-upload v-model="form.pic" :limit="1" @input=""></oss-image-upload>
|
<oss-image-upload v-model="form.pic" :limit="1"></oss-image-upload>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="轮播图" prop="albumPics">
|
<el-form-item label="轮播图" prop="albumPics">
|
||||||
<oss-image-upload v-model="albumPics" :limit="5"></oss-image-upload>
|
<oss-image-upload v-model="albumPics" :limit="5" class="img-upload-mini"></oss-image-upload>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
@ -85,15 +99,26 @@
|
|||||||
<el-form-item label="规格类型">
|
<el-form-item label="规格类型">
|
||||||
<div class="sku-wrapper">
|
<div class="sku-wrapper">
|
||||||
<div class="sku_sorts">
|
<div class="sku_sorts">
|
||||||
|
<div :style="{ display: 'flex', width: '500px' }">
|
||||||
|
<el-input v-model="nameAdd" placeholder="请输入要添加的规格名称(例如大小,版本,颜色)"></el-input>
|
||||||
|
<el-button @click="addSkuSort" :style="{ marginLeft: '10px' }">+添加规格类型</el-button>
|
||||||
|
</div>
|
||||||
<div class="sku_sort" v-for="(s, idx0) in productAttr" :key="s.name">
|
<div class="sku_sort" v-for="(s, idx0) in productAttr" :key="s.name">
|
||||||
<div class="label flex-center">
|
<div class="label flex-center">
|
||||||
<div class="flex-one">
|
<!-- <div class="flex-one">
|
||||||
<dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
|
<dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
|
||||||
</div>
|
</div> -->
|
||||||
<a class="red" @click="deleteSkuSort(idx0)">{{ s.name }}</a>
|
<a class="red" @click="deleteSkuSort(idx0)">{{ s.name }}</a
|
||||||
|
><span :style="{ color: 'blue', cursor: 'pointer', padding: '0 4px' }" @click="moveSpecGroupUp(s, idx0)" v-if="idx0 > 0">↑</span>
|
||||||
|
<span
|
||||||
|
:style="{ color: 'blue', cursor: 'pointer', padding: '0 4px' }"
|
||||||
|
@click="moveSpecGroupDown(s, idx0)"
|
||||||
|
v-if="idx0 < s.options.length - 1"
|
||||||
|
>↓</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="values" v-if="s.name">
|
<div class="values" v-if="s.name">
|
||||||
<div :style="{ display: 'flex' }" v-if="s.name == '颜色'">
|
<div :style="{ display: 'flex' }">
|
||||||
<div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
|
<div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
|
||||||
<el-tag type="primary" v-if="idx1 != undefined">
|
<el-tag type="primary" v-if="idx1 != undefined">
|
||||||
<span>{{ it2.name }} </span>
|
<span>{{ it2.name }} </span>
|
||||||
@ -103,59 +128,21 @@
|
|||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ padding: '0 32px 8px 0', display: 'flex', alignItems: 'center', gap: '8px' }">
|
<div :style="{ padding: '0 32px 8px 0', display: 'flex', alignItems: 'center', gap: '8px' }">
|
||||||
<el-input v-model="color" placeholder="请输入规格名称"></el-input>
|
<el-input v-model="s.newOptionName" placeholder="请输入规格值"></el-input>
|
||||||
<el-tag type="primary">
|
<el-tag type="primary">
|
||||||
<span @click="addOption(s, idx1)">添加</span>
|
<span @click="addOption(s, idx1)">添加</span>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ display: 'flex' }" v-if="s.name == '大小'">
|
|
||||||
<div class="value" v-for="(it2, idx1) in s.memory" :key="idx1">
|
|
||||||
<el-tag type="primary" v-if="idx1 != undefined">
|
|
||||||
<span>{{ it2.name }} </span>
|
|
||||||
<span
|
|
||||||
:style="{ color: 'red', cursor: 'pointer', paddingLeft: '8px' }"
|
|
||||||
@click="deleteOption1(s, idx1)"
|
|
||||||
v-if="idx1 != undefined"
|
|
||||||
>X</span
|
|
||||||
>
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
<div :style="{ padding: '0 32px 8px 0', display: 'flex', alignItems: 'center', gap: '8px' }">
|
|
||||||
<el-input v-model="memory" placeholder="请输入规格名称" @keyup.enter="addOption1(s, idx1)"></el-input>
|
|
||||||
<el-tag type="primary">
|
|
||||||
<span @click="addOption1(s, idx1)">添加</span>
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :style="{ display: 'flex' }" v-if="s.name == '版本'">
|
|
||||||
<div class="value" v-for="(it2, idx1) in s.version" :key="idx1">
|
|
||||||
<el-tag type="primary" v-if="idx1 != undefined">
|
|
||||||
<span>{{ it2.name }} </span>
|
|
||||||
<span
|
|
||||||
:style="{ color: 'red', cursor: 'pointer', paddingLeft: '8px' }"
|
|
||||||
@click="deleteOption2(s, idx1)"
|
|
||||||
v-if="idx1 != undefined"
|
|
||||||
>X</span
|
|
||||||
>
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
<div :style="{ padding: '0 32px 8px 0', display: 'flex', alignItems: 'center', gap: '8px' }">
|
|
||||||
<el-input v-model="version" placeholder="请输入规格名称" @keyup.enter="addOption2(s, idx1)"></el-input>
|
|
||||||
<el-tag type="primary">
|
|
||||||
<span @click="addOption2(s, idx1)">添加</span>
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-button v-if="productAttr.length < 2" @click="addSkuSort">+添加规格类型</el-button> -->
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="规格信息">
|
<el-form-item label="规格信息">
|
||||||
<el-button @click="refreshSku()" class="mb20">刷新列表</el-button>
|
<el-button @click="refreshSku()" class="mb20">刷新列表</el-button>
|
||||||
<el-table :data="form.skuList" :max-height="400">
|
<el-table :data="form.skuList" :max-height="400" :span-method="objectSpanMethod">
|
||||||
<el-table-column v-for="s in skuAttr" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
|
<el-table-column v-for="s in skuAttr" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
|
||||||
<el-table-column label="展示图片">
|
<el-table-column label="展示图片">
|
||||||
<template v-slot="{ row }">
|
<template v-slot="{ row }">
|
||||||
@ -182,6 +169,13 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template v-slot="{ row, $index }">
|
||||||
|
<el-form-item>
|
||||||
|
<el-button text type="primary" icon="Delete" @click="handleDeleteSku(row, $index)">删除</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -209,106 +203,203 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { addPmsProduct, getPmsProduct, updatePmsProduct } from '@/api/pms/product';
|
import { addPmsProduct, getPmsProduct, updatePmsProduct } from '@/api/pms/product';
|
||||||
import ProductCategorySelect from '@/views/components/ProductCategorySelect';
|
// import ProductCategorySelect from '@/views/components/ProductCategorySelect';
|
||||||
import BrandSelect from '@/views/components/BrandSelect';
|
import BrandSelect from '@/views/components/BrandSelect';
|
||||||
|
import { listPmsProductCategory } from '@/api/pms/productCategory';
|
||||||
export default {
|
export default {
|
||||||
name: 'AddProduct',
|
name: 'AddProduct',
|
||||||
dicts: ['pms_publish_status'],
|
dicts: ['pms_publish_status'],
|
||||||
components: { BrandSelect, ProductCategorySelect },
|
components: { BrandSelect },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
color: '',
|
color: '',
|
||||||
memory: '',
|
nameAdd: '',
|
||||||
version: '',
|
|
||||||
rules: {
|
rules: {
|
||||||
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
|
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
|
||||||
},
|
},
|
||||||
|
categoryOptions: [],
|
||||||
form: {
|
form: {
|
||||||
publishStatus: '',
|
publishStatus: '',
|
||||||
sort: 1000
|
sort: 1000
|
||||||
},
|
},
|
||||||
skuAttr: [],
|
skuAttr: [],
|
||||||
albumPics: null,
|
albumPics: null,
|
||||||
productAttr: [
|
productAttr: [],
|
||||||
{
|
|
||||||
name: '颜色',
|
|
||||||
options: [{ name: '红' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '大小',
|
|
||||||
memory: [{ name: '4G' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '版本',
|
|
||||||
version: [{ name: '12' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
maxOptionNum: 44
|
maxOptionNum: 44
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getSkuList();
|
||||||
const { id } = this.$route.query;
|
const { id } = this.$route.query;
|
||||||
if (id) {
|
if (id) {
|
||||||
this.getInfo(id);
|
this.getInfo(id);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 删除单个SKU
|
||||||
|
handleDeleteSku(row, index) {
|
||||||
|
this.$modal.confirm('确定要删除这个规格组合吗?').then(() => {
|
||||||
|
// 只删除当前这一行
|
||||||
|
console.log(this.form.skuList, index);
|
||||||
|
this.form.skuList.splice(index, 1);
|
||||||
|
this.$modal.success('删除成功');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 向上移动整个规格组
|
||||||
|
moveSpecGroupUp(s, index) {
|
||||||
|
if (index > 0) {
|
||||||
|
const temp = this.productAttr[index];
|
||||||
|
this.productAttr[index] = this.productAttr[index - 1];
|
||||||
|
this.productAttr[index - 1] = temp;
|
||||||
|
this.refreshSku(); // 重新生成SKU列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 向下移动整个规格组
|
||||||
|
moveSpecGroupDown(s, index) {
|
||||||
|
if (index < this.productAttr.length - 1) {
|
||||||
|
const temp = this.productAttr[index];
|
||||||
|
this.productAttr[index] = this.productAttr[index + 1];
|
||||||
|
this.productAttr[index + 1] = temp;
|
||||||
|
this.refreshSku(); // 重新生成SKU列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 完全替换现有的 objectSpanMethod 方法
|
||||||
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
// 只对规格列进行合并(排除图片、价格等操作列)
|
||||||
|
if (columnIndex < this.skuAttr.length) {
|
||||||
|
return this.calculateMultiLevelSpan(rowIndex, columnIndex);
|
||||||
|
}
|
||||||
|
return { rowspan: 1, colspan: 1 };
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增多级合并计算逻辑
|
||||||
|
calculateMultiLevelSpan(rowIndex, columnIndex) {
|
||||||
|
if (!this.form.skuList || this.form.skuList.length === 0) {
|
||||||
|
return { rowspan: 1, colspan: 1 };
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentRow = this.form.skuList[rowIndex];
|
||||||
|
|
||||||
|
// 如果是第一列(最外层规格)
|
||||||
|
if (columnIndex === 0) {
|
||||||
|
const specName = this.skuAttr[0].name;
|
||||||
|
const currentValue = currentRow[specName];
|
||||||
|
|
||||||
|
// 找到这个值的起始行和结束行
|
||||||
|
let startRow = rowIndex;
|
||||||
|
let endRow = rowIndex;
|
||||||
|
|
||||||
|
// 向上查找
|
||||||
|
for (let i = rowIndex - 1; i >= 0; i--) {
|
||||||
|
if (this.form.skuList[i][specName] === currentValue) {
|
||||||
|
startRow = i;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 向下查找
|
||||||
|
for (let i = rowIndex + 1; i < this.form.skuList.length; i++) {
|
||||||
|
if (this.form.skuList[i][specName] === currentValue) {
|
||||||
|
endRow = i;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rowspan = endRow - startRow + 1;
|
||||||
|
|
||||||
|
// 只在起始行显示合并
|
||||||
|
if (rowIndex === startRow) {
|
||||||
|
return { rowspan, colspan: 1 };
|
||||||
|
} else {
|
||||||
|
return { rowspan: 0, colspan: 0 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对于其他列(内层规格)
|
||||||
|
if (columnIndex > 0) {
|
||||||
|
const specName = this.skuAttr[columnIndex].name;
|
||||||
|
const currentValue = currentRow[specName];
|
||||||
|
|
||||||
|
// 获取所有前置规格的值
|
||||||
|
const prefixSpecs = {};
|
||||||
|
for (let i = 0; i < columnIndex; i++) {
|
||||||
|
prefixSpecs[this.skuAttr[i].name] = currentRow[this.skuAttr[i].name];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 找到在当前前置规格组合下的相同值范围
|
||||||
|
let startRow = rowIndex;
|
||||||
|
let endRow = rowIndex;
|
||||||
|
|
||||||
|
// 向上查找
|
||||||
|
for (let i = rowIndex - 1; i >= 0; i--) {
|
||||||
|
let match = true;
|
||||||
|
for (const [key, value] of Object.entries(prefixSpecs)) {
|
||||||
|
if (this.form.skuList[i][key] !== value) {
|
||||||
|
match = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (match && this.form.skuList[i][specName] === currentValue) {
|
||||||
|
startRow = i;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 向下查找
|
||||||
|
for (let i = rowIndex + 1; i < this.form.skuList.length; i++) {
|
||||||
|
let match = true;
|
||||||
|
for (const [key, value] of Object.entries(prefixSpecs)) {
|
||||||
|
if (this.form.skuList[i][key] !== value) {
|
||||||
|
match = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (match && this.form.skuList[i][specName] === currentValue) {
|
||||||
|
endRow = i;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rowspan = endRow - startRow + 1;
|
||||||
|
|
||||||
|
// 只在起始行显示合并
|
||||||
|
if (rowIndex === startRow) {
|
||||||
|
return { rowspan, colspan: 1 };
|
||||||
|
} else {
|
||||||
|
return { rowspan: 0, colspan: 0 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { rowspan: 1, colspan: 1 };
|
||||||
|
},
|
||||||
refreshSku() {
|
refreshSku() {
|
||||||
let skus = [];
|
let skus = [];
|
||||||
const skuMap = new Map();
|
const skuMap = new Map();
|
||||||
this.skuAttr = [...this.productAttr];
|
this.skuAttr = [...this.productAttr];
|
||||||
if (this.form.skuList) {
|
if (this.form.skuList) {
|
||||||
this.form.skuList.forEach((sku) => {
|
this.form.skuList.forEach((sku) => {
|
||||||
console.log(sku);
|
|
||||||
skuMap.set(sku.spData, sku);
|
skuMap.set(sku.spData, sku);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
console.log(skuMap);
|
|
||||||
this.productAttr.forEach((attr, index) => {
|
this.productAttr.forEach((attr, index) => {
|
||||||
const attrSku = [];
|
const attrSku = [];
|
||||||
if (attr.name === '颜色') {
|
attr.options.forEach((option) => {
|
||||||
attr.options.forEach((option) => {
|
if (!option.name) {
|
||||||
if (!option.name) {
|
return;
|
||||||
return;
|
}
|
||||||
}
|
if (index === 0) {
|
||||||
if (index === 0) {
|
attrSku.push({ [attr.name]: option.name });
|
||||||
attrSku.push({ [attr.name]: option.name });
|
} else {
|
||||||
} else {
|
skus.forEach((it3) => {
|
||||||
skus.forEach((it3) => {
|
attrSku.push({ ...it3, [attr.name]: option.name });
|
||||||
attrSku.push({ ...it3, [attr.name]: option.name });
|
});
|
||||||
});
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
if (attr.name === '大小') {
|
|
||||||
attr.memory.forEach((option) => {
|
|
||||||
if (!option.name) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (index === 0) {
|
|
||||||
attrSku.push({ [attr.name]: option.name });
|
|
||||||
} else {
|
|
||||||
skus.forEach((it3) => {
|
|
||||||
attrSku.push({ ...it3, [attr.name]: option.name });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (attr.name === '版本') {
|
|
||||||
attr.version.forEach((option) => {
|
|
||||||
if (!option.name) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (index === 0) {
|
|
||||||
attrSku.push({ [attr.name]: option.name });
|
|
||||||
} else {
|
|
||||||
skus.forEach((it3) => {
|
|
||||||
attrSku.push({ ...it3, [attr.name]: option.name });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
skus = attrSku;
|
skus = attrSku;
|
||||||
});
|
});
|
||||||
skus.forEach((it) => {
|
skus.forEach((it) => {
|
||||||
@ -333,7 +424,17 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.form.productAttr = JSON.stringify(this.productAttr);
|
this.form.productAttr = JSON.stringify(this.productAttr);
|
||||||
this.form.skuList = skus;
|
this.form.skuList = skus.sort((a, b) => {
|
||||||
|
// 按规格顺序排序,确保合并正确
|
||||||
|
for (let i = 0; i < this.skuAttr.length; i++) {
|
||||||
|
const specName = this.skuAttr[i].name;
|
||||||
|
if (a[specName] !== b[specName]) {
|
||||||
|
return a[specName].localeCompare(b[specName]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
// this.form.skuList = skus;
|
||||||
},
|
},
|
||||||
categoryChange(value) {
|
categoryChange(value) {
|
||||||
if (Array.isArray(value)) {
|
if (Array.isArray(value)) {
|
||||||
@ -352,7 +453,7 @@ export default {
|
|||||||
this.albumPics = albumPics.split(',');
|
this.albumPics = albumPics.split(',');
|
||||||
}
|
}
|
||||||
this.form = response.data;
|
this.form = response.data;
|
||||||
|
this.form.publishStatus = this.form.publishStatus.toString();
|
||||||
if (this.form.productAttr) {
|
if (this.form.productAttr) {
|
||||||
this.productAttr = JSON.parse(this.form.productAttr);
|
this.productAttr = JSON.parse(this.form.productAttr);
|
||||||
}
|
}
|
||||||
@ -411,45 +512,44 @@ export default {
|
|||||||
s.options.push({ name: null });
|
s.options.push({ name: null });
|
||||||
},
|
},
|
||||||
addSkuSort() {
|
addSkuSort() {
|
||||||
this.productAttr.push({
|
if (this.nameAdd != '') {
|
||||||
name: null,
|
this.productAttr.push({
|
||||||
options: [{ name: null }]
|
name: this.nameAdd,
|
||||||
});
|
options: [],
|
||||||
|
newOptionName: ''
|
||||||
|
});
|
||||||
|
this.nameAdd = '';
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(`请输入规格名称`);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
deleteSkuSort(idx) {
|
deleteSkuSort(idx) {
|
||||||
this.productAttr.splice(idx);
|
this.productAttr.splice(idx, 1);
|
||||||
},
|
},
|
||||||
deleteOption(s, idx) {
|
addOption(specGroup, index) {
|
||||||
s.options.splice(idx, 1);
|
const newName = specGroup.newOptionName?.trim();
|
||||||
|
if (!newName) {
|
||||||
|
this.$modal.msgError('请输入规格值');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 检查是否已存在
|
||||||
|
const exists = specGroup.options.some((opt) => opt.name === newName);
|
||||||
|
if (exists) {
|
||||||
|
this.$modal.msgError('该规格已存在');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
specGroup.options.push({ name: newName });
|
||||||
|
specGroup.newOptionName = ''; // 清空输入框
|
||||||
|
this.refreshSku();
|
||||||
},
|
},
|
||||||
deleteOption1(s, idx) {
|
|
||||||
s.memory.splice(idx, 1);
|
deleteOption(specGroup, index) {
|
||||||
|
specGroup.options.splice(index, 1);
|
||||||
|
this.refreshSku();
|
||||||
},
|
},
|
||||||
deleteOption2(s, idx) {
|
getSkuList() {
|
||||||
s.version.splice(idx, 1);
|
listPmsProductCategory({ id: null }).then((response) => {
|
||||||
},
|
this.categoryOptions = response.data;
|
||||||
addOption(s, idx) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.color != '') {
|
|
||||||
s.options.push({ name: this.color });
|
|
||||||
this.color = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addOption1(s, idx) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.memory !== '') {
|
|
||||||
s.memory.push({ name: this.memory });
|
|
||||||
this.memory = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addOption2(s, idx) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.version !== '') {
|
|
||||||
s.version.push({ name: this.version });
|
|
||||||
this.version = '';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -485,4 +585,12 @@ export default {
|
|||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 57px;
|
line-height: 57px;
|
||||||
|
.hide .el-upload-list--picture-card .el-upload-list__item
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
.el-upload-list--picture-card .el-upload-list__item
|
||||||
|
width: 80px;
|
||||||
|
height:80px;
|
||||||
</style>
|
</style>
|
||||||
|
@ -15,9 +15,21 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="分类" prop="categoryId">
|
<el-form-item label="分类" prop="categoryId">
|
||||||
<el-select v-model="queryParams.categoryId" placeholder="请选择分类" clearable @change="handleQuery">
|
<el-cascader
|
||||||
<el-option v-for="item in getCategoryNameLike" :key="item.id" :label="item.name" :value="item.id" />
|
style="width: 100%"
|
||||||
</el-select>
|
v-model="queryParams.categoryId"
|
||||||
|
:options="categoryOptions"
|
||||||
|
:props="{
|
||||||
|
value: 'id',
|
||||||
|
label: 'name',
|
||||||
|
children: 'children',
|
||||||
|
checkStrictly: true,
|
||||||
|
emitPath: false
|
||||||
|
}"
|
||||||
|
placeholder="请选择分类"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="编码" prop="outProductId">
|
<el-form-item label="编码" prop="outProductId">
|
||||||
<el-input v-model="queryParams.outProductId" placeholder="请输入商品编码" clearable @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.outProductId" placeholder="请输入商品编码" clearable @keyup.enter="handleQuery" />
|
||||||
@ -184,6 +196,7 @@ import { isStarRepo } from '@/utils/is-star-plugin';
|
|||||||
import { useUserStore } from '@/store/modules/user';
|
import { useUserStore } from '@/store/modules/user';
|
||||||
import AddressSelector from '@/views/components/AddressSelector/index.vue';
|
import AddressSelector from '@/views/components/AddressSelector/index.vue';
|
||||||
import { editUserData } from '@/api/ums/member.js';
|
import { editUserData } from '@/api/ums/member.js';
|
||||||
|
import { listPmsProductCategory } from '@/api/pms/productCategory';
|
||||||
export default {
|
export default {
|
||||||
name: 'PmsProduct',
|
name: 'PmsProduct',
|
||||||
components: { AddressSelector },
|
components: { AddressSelector },
|
||||||
@ -230,7 +243,6 @@ export default {
|
|||||||
/* email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],*/
|
/* email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],*/
|
||||||
phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
|
phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
|
||||||
},
|
},
|
||||||
getCategoryNameLike: [],
|
|
||||||
getbrandList: [],
|
getbrandList: [],
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
@ -252,12 +264,13 @@ export default {
|
|||||||
brandName: null,
|
brandName: null,
|
||||||
productCategoryName: null,
|
productCategoryName: null,
|
||||||
brandId: null
|
brandId: null
|
||||||
}
|
},
|
||||||
|
categoryOptions: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getSkuList();
|
||||||
this.getList();
|
this.getList();
|
||||||
this.getgetproductCategoryNameLike();
|
|
||||||
this.getbrand();
|
this.getbrand();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -268,11 +281,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 查询商品分类列表
|
getSkuList() {
|
||||||
async getgetproductCategoryNameLike() {
|
listPmsProductCategory({ id: null }).then((response) => {
|
||||||
const res = await getproductCategoryNameLike();
|
this.categoryOptions = response.data;
|
||||||
this.getCategoryNameLike = res.data;
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 查询商品分类列表
|
// 查询商品分类列表
|
||||||
async getbrand() {
|
async getbrand() {
|
||||||
const res = await getbrand();
|
const res = await getbrand();
|
||||||
|
@ -27,8 +27,7 @@
|
|||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="pmsProductCategoryList"
|
:data="pmsProductCategoryList"
|
||||||
border
|
border
|
||||||
:tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
row-key="id"
|
row-key="id"
|
||||||
>
|
>
|
||||||
<el-table-column label="名称" prop="name" align="center" />
|
<el-table-column label="名称" prop="name" align="center" />
|
||||||
@ -44,7 +43,7 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="排序" prop="sort" align="center" />
|
<el-table-column label="排序" prop="sort" align="left" />
|
||||||
<el-table-column label="状态" prop="showStatus" align="center">
|
<el-table-column label="状态" prop="showStatus" align="center">
|
||||||
<template v-slot="{ row }">
|
<template v-slot="{ row }">
|
||||||
<dict-tag :options="showStatusMap" :value="row.showStatus" prop-name="sys_show_status"></dict-tag>
|
<dict-tag :options="showStatusMap" :value="row.showStatus" prop-name="sys_show_status"></dict-tag>
|
||||||
@ -52,6 +51,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" class-name="small-padding fixed-width">
|
<el-table-column label="操作" class-name="small-padding fixed-width">
|
||||||
<template v-slot="scope">
|
<template v-slot="scope">
|
||||||
|
<el-button text type="primary" icon="Edit" @click="handadd(scope.row)" v-if="!scope.row.parentId">添加二级分类 </el-button>
|
||||||
<el-button text type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改 </el-button>
|
<el-button text type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改 </el-button>
|
||||||
<el-button text type="primary" icon="Delete" @click="handleDelete(scope.row)">删除 </el-button>
|
<el-button text type="primary" icon="Delete" @click="handleDelete(scope.row)">删除 </el-button>
|
||||||
</template>
|
</template>
|
||||||
@ -77,9 +77,10 @@
|
|||||||
<!-- <el-form-item label="层级" prop="level">
|
<!-- <el-form-item label="层级" prop="level">
|
||||||
<el-input v-model="form.level" placeholder="层级" />
|
<el-input v-model="form.level" placeholder="层级" />
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<!-- <el-form-item label="上级分类" prop="parentId">
|
<el-form-item label="上级分类" prop="parentId" v-if="form.parentId">
|
||||||
<product-category-select class="w200" v-model="form.parentId" :props="{ checkStrictly: true }"/>
|
{{ nameFn }}
|
||||||
</el-form-item> -->
|
<!-- <product-category-select class="w200" v-model="form.parentId" :props="{ checkStrictly: true }"/> -->
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template v-slot:footer>
|
<template v-slot:footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
@ -136,11 +137,13 @@ export default {
|
|||||||
showStatus: '',
|
showStatus: '',
|
||||||
sort: null
|
sort: null
|
||||||
},
|
},
|
||||||
|
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {},
|
rules: {},
|
||||||
showStatusMap: []
|
showStatusMap: [],
|
||||||
|
nameFn: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
@ -154,11 +157,11 @@ export default {
|
|||||||
this.loading = true;
|
this.loading = true;
|
||||||
const { pageNum, pageSize } = this.queryParams;
|
const { pageNum, pageSize } = this.queryParams;
|
||||||
const query = { ...this.queryParams, pageNum: undefined, pageSize: undefined };
|
const query = { ...this.queryParams, pageNum: undefined, pageSize: undefined };
|
||||||
const pageReq = { current: pageNum - 1, size: pageSize };
|
// const pageReq = { current: pageNum - 1, size: pageSize };
|
||||||
listPmsProductCategory(query, pageReq).then((response) => {
|
listPmsProductCategory(query).then((response) => {
|
||||||
const { records, total } = response.data || {};
|
const res = response.data || {};
|
||||||
this.pmsProductCategoryList = records;
|
this.pmsProductCategoryList = res;
|
||||||
this.total = total;
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -194,17 +197,25 @@ export default {
|
|||||||
this.handleQuery();
|
this.handleQuery();
|
||||||
},
|
},
|
||||||
// 多选框选中数据
|
// 多选框选中数据
|
||||||
handleSelectionChange(selection) {
|
// handleSelectionChange(selection) {
|
||||||
this.ids = selection.map((item) => item.id);
|
// this.ids = selection.map((item) => item.id);
|
||||||
this.single = selection.length !== 1;
|
// this.single = selection.length !== 1;
|
||||||
this.multiple = !selection.length;
|
// this.multiple = !selection.length;
|
||||||
},
|
// },
|
||||||
/** 新增按钮操作 */
|
/** 新增按钮操作 */
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
this.reset();
|
this.reset();
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = '添加商品分类';
|
this.title = '添加商品分类';
|
||||||
},
|
},
|
||||||
|
handadd(row) {
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
this.title = '添加二级商品分类';
|
||||||
|
this.form.parentId = row.id;
|
||||||
|
this.nameFn = row.name;
|
||||||
|
this.open = true;
|
||||||
|
},
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
this.reset();
|
this.reset();
|
||||||
@ -224,9 +235,9 @@ export default {
|
|||||||
this.$refs['form'].validate((valid) => {
|
this.$refs['form'].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
let p;
|
let p;
|
||||||
if (this.form.parentId) {
|
// if (this.form.parentId) {
|
||||||
this.form.parentId = this.form.parentId.pop();
|
// this.form.parentId = this.form.parentId.pop();
|
||||||
}
|
// }
|
||||||
if (this.form.id != null) {
|
if (this.form.id != null) {
|
||||||
p = updatePmsProductCategory(this.form).then((response) => {
|
p = updatePmsProductCategory(this.form).then((response) => {
|
||||||
this.$modal.msgSuccess('修改成功');
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<el-table v-loading="loading" border :data="postList" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">
|
<el-table v-loading="loading" border :data="postList" :tree-props="{ children: 'children' }" row-key="id">
|
||||||
<el-table-column label="分类名称" align="left" prop="name" />
|
<el-table-column label="分类名称" align="left" prop="name" />
|
||||||
<el-table-column label="排序" align="center" prop="sort" />
|
<el-table-column label="排序" align="center" prop="sort" />
|
||||||
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
|
||||||
@ -70,9 +70,6 @@ const showSearch = ref(true);
|
|||||||
const ids = ref<Array<number | string>>([]);
|
const ids = ref<Array<number | string>>([]);
|
||||||
const single = ref(true);
|
const single = ref(true);
|
||||||
const multiple = ref(true);
|
const multiple = ref(true);
|
||||||
const total = ref(0);
|
|
||||||
const deptName = ref('');
|
|
||||||
const deptOptions = ref<DeptVO[]>([]);
|
|
||||||
const deptTreeRef = ref<ElTreeInstance>();
|
const deptTreeRef = ref<ElTreeInstance>();
|
||||||
const postFormRef = ref<ElFormInstance>();
|
const postFormRef = ref<ElFormInstance>();
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user